Extjs4快速上手四——实现菜单

本次将主要讲Extjs树形菜单的实现。在很多系统里边，树形菜单被广泛应用，主要因为其有清晰的层次结构。记得最早见到的树形菜单是通过<ul><li>实现的，非常简单。之后用C#的现成控件拖拽了一个，当时还沾沾自喜。再后来在学习师兄的一个通用后台代码时，看到了梅花雪，当时感觉太强大了，每个节点都可以存在数据库，并且能够进行自定义。之后接触到一些UI库之后，更是见到了更强大的树形菜单。

　　或许实现一个简单的树形菜单对于不少人并非难事，但是想要实现一个功能比较完善的确要花不少功夫。好在目前有很多现成的供我们使用，而Extjs也提供了功能丰富的树形菜单。本次我们就来讲最简单的一种：Ext.tree.Panel。

　　正如之前讲到的，我们在实现一个Extjs组件时，应该按照如下的步骤：

　　以下就是各部分的代码实现：

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

补充：web前端 , JavaScript ,