这几乎天状态不帅,杂事太多聊郁闷,那等同次于就是掉讲点吧。

  本次用着重讲Extjs树形菜单的实现。在博系中,树形菜单被广泛应用,首要因为其来清晰的层次结构。记得最早盼的树形菜单是经<ul><li>实现的,非凡简单。之后用C#的现控件拖拽了一个,当时髦得意。再后来当攻读师兄的一个通用后台代码时,看到了梅花雪,当时感到无与伦比强了,每个节点都得在数据库,并且可以进行由定义。之后接触到一些UI库之后,更是看到了又强硬的树形菜单。

  或许实现一个简便的树形菜单对于群总人口不要难事,不过想使实现一个功效相比较完美的确要消费不少素养。好以当前发出好多现成的供我们以,而Extjs也提供了功用充分的树形菜单。本次我们虽来提最简单易行的一致种植:Ext.tree.Panel。

  正使前讲到的,我们在实现一个Extjs组件时,应该按如下的步调:

图片 1

  以下即是各级部分的代码实现:

//model
Ext.define('et.model.Menu', { 
    extend: 'Ext.data.Model', 
    fields:  ['mid', 'text','cls','columns','url','expanded','optype']
});
//或许你看到这些字段和下边json数据并不对应,这个并不重要,这里边有几个是我自己拓展的,只是没用到,只要几个关键的字段设置即可,下边会有介绍。

//store
Ext.define('et.store.Menus',{
    extend: 'Ext.data.TreeStore',
    requires: 'et.model.Menu',
     model: 'et.model.Menu',
     autoLoad: true,            //设置自动加载,在打开页面的时候数据就自动加载
     proxy: {
        type: 'ajax',
        url: 'data/manager.json',
        reader: {
            type: 'json',
            successProperty: 'success'
        }
    } 
});

//view
Ext.define('et.view.Menu',{ 
    extend: 'Ext.tree.Panel', 
    alias: 'widget.sxptmenu', 
    requires:['et.store.Menus'], 
    initComponent : function(){ 
        Ext.apply(this,{ 
            id: 'menu-panel', 
            title: '系统菜单', 
            iconCls:'icon-menu', 
            margins : '0 0 -1 1', 
            region:'west', 
            border : false, 
            enableDD : false, 
            split: true, 
            width : 212, 
            minSize : 130, 
            maxSize : 300, 
            rootVisible: false, 
            containerScroll : true, 
            collapsible : true, 
            autoScroll: false,
            store:Ext.create('et.store.Menus')
        }); 
        this.callParent(arguments); 
    } 
}); 

//controller
Ext.define('et.controller.Menu',{ 
    extend: 'Ext.app.Controller', 
    stores: ['Menus'],  
    models: ['Menu'],  
    views: ['Menu'],  
    init: function () {  
    //初始化部分,下面是部分是给菜单绑定单击事件,接下来会用,这里先注释  
        this.control({  
            'sxptmenu': {  
              itemmousedown: this.loadMenu
          }
          });
    },
    loadMenu:function(selModel, record){     //加载菜单项对应panel,首先判断是不是叶子结点,是的话判断当前该panel是否已经创建,已创建的话直接激活,未创建的话创建并加入content-panel
        if (record.get('leaf')) {
            if(record.get('optype')=='window'){
                var win= Ext.getCmp(record.get('url'));
                if(!win){
                    win=Ext.widget(record.get('url'))
                }
                win.show();
            }
            else{
                var panel = Ext.getCmp(record.get('id'));
                if(!panel){  
                    panel ={
                        id:record.get('url'),
                        title: record.get('text'), 
                        xtype:record.get('url'),
                        closable: true  
                    };
                    this.openTab(panel,record.get('url')); 
                }else{ 
                    var main = Ext.getCmp("content-panel"); 
                    main.setActiveTab(panel);  
                } 
            }

        }  },
     openTab : function (panel,id){
        var o = (typeof panel == "string" ? panel : id || panel.id); 
        var main = Ext.getCmp("content-panel"); 
        var tab = main.getComponent(o);       
        if (tab) { 
            main.setActiveTab(tab);  
        } else if(typeof panel!="string"){  
            panel.id = o;  
            var p = main.add(panel);  
            main.setActiveTab(p);  
        }  

    }  

});

//app.js
Ext.Loader.setConfig({enabled: true});      
Ext.application({
    name:'et',           
    autoCreateViewport: true,
    appFolder:'app',    'Menu'        //加入菜单的controller
    ]
});

  咱们只要未来台将菜单以固定格式的json将数据传过来即可,下边大家看一下一个简短菜单的json数据:

[{"text":"题目管理",
  "mid":"1",
  "cls":"folder",
  "leaf":false,
  "expanded": true,
  "children":[{"text":"题目列表",
                 "mid":"2",
                 "cls":"file",
                 "url":"subjectlist",
                 "leaf":true,
                 "children":[]}
               ]
 },{"text":"分组管理",
  "mid":"3",
  "cls":"folder",
  "leaf":false,
  "expanded": true,
  "children":[{"text":"选题分组确认",
                 "mid":"4",
                 "cls":"file",
                 "url":"mstudentlist",
                 "leaf":true,
                 "children":[]},
                 {"text":"分组列表",
                 "mid":"5",
                 "cls":"file",
                 "url":"mstudentlist",
                 "leaf":true,
                 "children":[]},
                 {"text":"报告审阅",
                 "mid":"6",
                 "cls":"file",
                 "url":"mstudentlist",
                 "leaf":true,
                 "children":[]}
               ]
 }]

  其中我们可见到,text指定了结点名,cls指定了图标样式(如folder为文件夹图标,file为文件图标),leaf指定是否也叶子结点,children内嵌套子结点。其他几独全为打定义,如这里url来指定打开panel的别名。

  基本的menu的用法就是这样简单,假设有重胜之急需,如添加复选按钮、可拖动、动态编辑等,可参考extjs自带的实例代码。

  最后钻探一下json的浮动,对于灵活性相比大的系列(如权限管理),一般将每个菜单项是数据库相比较便宜,可按照事态结合后并接json重回前台。可是洋洋时候我们也许并不需要这么强的灵活度,例如每个角色菜单固定,那么这是咱能够设想以如上json格式将每个菜单写上一个json文件,在用户登陆时判断角色加载对诺文件即可。这样做力所能及省多转业(但虽然注意制止用户一贯打开json文件路径,来越权操作效用,所未来台最好以拦截器里又拓展下判断)。

   代码在表现上平等通最后。

相关文章

网站地图xml地图