ExtMVC+ThinkPHP开发CRM管理系统--导航树的实现

浏览数：22 / 时间：2015年06月09日

最近很是郁闷，因不明原因本机的开发的后台管理程序无法访问。模仿其他大侠给你的导航树（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({
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
        });
    }
});

上效果：