最近很是郁闷，因不明原因本机的开发的后台管理程序无法访问。模仿其他大侠给你的导航树（ExtJSMVC）到我这里没有效果。甚至一气之下删除了自己写的一周的代码样例，莫非是本月运势不好，不抱怨了（哈哈！无非是给自己近期没有更新博客找个借口）。
进入正题今天分享一个通过后台访问mysql数据库，加载前台导航树的完整案例。
前期准备：
- 后台创建mySql数据库及相应表结构：
MI_ID int(11)
MI_MenuName varchar(100)
MI_URL varchar(100)
MI_ParentNode varchar(45)
MI_GroupName varchar(100)
MI_StateID int(10)
- 创建数据如下:
- 前台目录准备：
其中红色方框部分的内容是今天要演示的导航树的文件。
准备工作完成，下面开始逐步逐层实现：
首先：创建前台的html和js页面，这里需要着重说面一下，ExtJSMVC的特点是将当前页面需要显示的内容在初始化中导入本地，后期待用户触发才会引用的js文件，在用户触发相关操作后，才导入到本地。所以很多ExtJSMVC的规范结构，有点像.net winform开发的program.cs,每一个项目有一个主文件，项目通过经过该主文件入口运行。但在实际项目开发中，可能会面对各种情况，所以，在这里演示的项目案例，全部是以一个html文件搭载一个js文件作为主文件。在一定层面上是借助ExtJS MVC可以将前台显示控件封装成对应的view,而后在使用中，可以进行相关的复用。闲话到此实现开始。
前台html页面代码：Index_menuTree.html
<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>menuTree page</title> <link rel=‘stylesheet‘ type=‘text/css‘ href=‘__PUBLIC__/extjs410/resources/css/ext-all.css‘> <script type="text/javascript" src=‘__PUBLIC__/extjs410/bootstrap.js‘></script> <script> var ExtMVCPath=‘<{:C("__ExtMVCPath__")}>‘; var ExtSrcPath=‘<{:C("__ExtSrcPath__")}>‘; var mainURL=‘<{:C("__mainUrl__")}>‘+‘Index‘; </script> </head> <body> <script type="text/javascript" src=‘__ROOTPATH__/Tpl/Index_menuTree.js‘></script> </body> </html>
这里要注意一下ExtMVCPath 是通过ThinkPHP config配置文件配置的内容：
‘__ExtMVCPath__‘=>__ROOT__.‘/App/Tpl/default/‘.GROUP_NAME.‘/Js‘,
前台js文件:Index_menuTree
Ext.Loader.setConfig({ enabled:true});
Ext.application({
requires:[‘Ext.container.Viewport‘],
name:‘MVC‘,
appFolder:ExtMVCPath,
controllers:[‘Index_menuTreeController‘],
launch:function(){
Ext.create(‘Ext.container.Viewport‘,{
layout:‘fit‘,
items:[
{
xtype:‘panel‘,
title:‘Demo panel‘
}
]
});
}
});
来个效果先：
革命尚未成功同志仍需努力，下一步创建对应的view文件,目录结构如下：
Ext.define(‘MVC.view.main.menuTree‘,{
extend:‘Ext.tree.Panel‘,
alias:‘widget.mainMenuTree‘,
border:false,
//hrefTarget:‘mainContent‘,
rootVisible:false,
store:‘menuStore‘
});
menuStore.js 这个文件要注意一下了哈！
Ext.define(‘MVC.store.menuStore‘,{
extend:‘Ext.data.TreeStore‘,
alias:‘widget.menuStore‘,
//storeId:‘menuStoreID‘,
defaultRoodId:‘root‘,
//requires:[‘MVC.model.menuModel‘],
//model:[‘MVC.model.menuModel‘],
proxy:{
type:‘ajax‘,
url:ExtMVCPath+‘/json/menuJson.json‘,
reader:‘json‘,
autoLoad:true
}
});
menuJson.js 文件
[
{"id":"2",
"pid":"1",
"text":"用户管理",
"leaf":"0",
"url":"http:\/\/www.lihuai.net",
"children":[{
"id":"5",
"pid":"2",
"text":"基本信息",
"leaf":"1",
"url":"http:\/\/www.sogou.com",
"children":""},{
"id":"11",
"pid":"2",
"text":"信息管理",
"leaf":"1",
"url":"http:\/\/www.sogou.com",
"children":""},{
"id":"12",
"pid":"2",
"text":"添加用户",
"leaf":"1",
"url":"http:\/\/www.sogou.com",
"children":""}]},
{"id":"3",
"pid":"1",
"text":"产品管理",
"leaf":"0",
"url":"http:\/\/www.so.com",
"children":[{
"id":"7",
"pid":"3",
"text":"产品信息",
"leaf":"1",
"url":"http:\/\/www.so.com",
"children":""},{
"id":"8",
"pid":"3",
"text":"产品添加",
"leaf":"1",
"url":"http:\/\/www.so.com",
"children":""}]}
]
最后一部传说中的controller文件闪亮登场；Index_menuTreeController.js
Ext.define(‘MVC.controller.Index_menuTreeController‘,{
extend:‘Ext.app.Controller‘,
views:[‘main.menuTree‘],
models:[‘menuModel‘],
stores:[‘menuStore‘],
init:function(){
this.control({
});
}
});
上效果：
下一步将结合ThinkPHP访问数据库获取响应的数据：
ExtMVC+ThinkPHP开发CRM管理系统--导航树的实现