Extjs3-----自定義組件的使用

上面寫過,Extjs4如何自定義toolbar組件,現在寫一下Extjs3如何自定義toolbar組件,並且與後臺交互

/** 
 * 該擴展可以通過一定解析規則的json串生成菜單 
 * 通過itemclick事件調用點擊菜單項的監聽函數; 
 * 通過afterload事件調用菜單加載完畢後的監聽函數; 
 * 注意:使用該控件須確保父菜單code值小於子菜單 
 * 'code', 'name', 'url', 'leaf', 'enabled', 'parentcode', 'iconcls' 
 *  code、parentcode都是編碼,通常來講這個菜單表都是開發人員手工寫入數據庫的 
 *  name 對應菜單上的文字,leaf爲空字符串、false、0的時候表示該節點下面還有子節點 
 *  enabled 字段目前還沒什麼用,可以無視 
 *   
 *  iconcls 就是菜單文件前圖標的css樣式類 
 *   
 *  1.1修改:加載完成後清楚內置的父容器緩存 
 * 
 * @version 1.1 2014-1-15 
 * @author zhubl 
 */  
Ext.namespace("com.increase.cen");
  
com.increase.cen.MenuToolbar = Ext.extend(Ext.Toolbar, {  
    height: 25,  
    /** 
     * @cfg {root} store的root 
     */  
    root: 'menus',  
    /** 
     * @cfg {split} 一級菜單之間是否用橫線間隔 
     */  
    split: true,  
    /** 
     * @cfg {store} 讀取記錄的store 默認爲jsonstore 
     */  
    /** 
     * @cfg {url} 用於讀取菜單記錄串的url 
     */  
    url: 'main!getMenus.action',
    initComponent: function(){  
        this.addEvents(
        /** 
         * @event itemclick 菜單被點擊時觸發 
         */  
        'itemclick',          
        /** 
         * @event afterload 菜單項加載完畢後觸發 
         */  
        'afterload');  
        if (!this.store)   
            this.store = new Ext.data.JsonStore({  
                url: this.url,  
                root: this.root,  
                fields: ['code', 'name', 'url', 'leaf', 'enabled', 'parentcode', 'iconcls']  
            });  
        this.store.on('load', this.loadRecords, this);  
        this.store.load();  
        com.increase.cen.MenuToolbar.superclass.initComponent.call(this);  
    },  
    //private 遍歷records生成菜單  
    loadRecords: function(s, r, o){  
        this.menuCache = {};//對菜單(Menu)按照code進行緩存 code必須是唯一的!  
        this.store.sort('code');
        s.each(function(record){
            var parentCt = this.getParnetCt(record.get('parentcode'));  
            if (parentCt === this && this.split)   
                this.add('-');  
            if (!record.get('leaf')) {//是個菜單  
                var menu = new Ext.menu.Menu({  
                    code: record.get('code')
                });  
                parentCt.add({  
                    text: record.get('name'),  
                    iconCls: record.get('iconcls'),  
                    menu: menu, 
                    width: 100
                });  
                this.menuCache[record.get('code')] = menu;  
            }  else {  
                var item = new Ext.menu.Item({  
                    text: record.get('name'),  
                    code: record.get('code'),  
                    url: record.get('url')  
                });  
                item.on('click', function(item){//註冊點擊事件監聽函數
                	reflash();
                    this.lastItem = item;  
                    this.fireEvent('itemclick', this, item);  
                    parent.Ext.getCmp("pnNorth").setTitle(" 網絡資源清查工具管理系統    -導航>>"+item.text);
                    parent.Ext.getCmp("pnCenterframe").body
							.update("<iframe id='domainTreeIframe' src='"+item.url+"' scrolling='yes' width='100%' height='100%' frameborder='no' border='0' marginwidth='0' marginheight='0' align='center'></iframe>");
                }, this);  
                parentCt.add(item);  
            }  
        }, this);  
        this.add('-');
        delete this.menuCache;//沒用,不要了  
        this.doLayout();  
        this.fireEvent('afterload', this);  
    },  
    //private 根據parentcode獲取它的容器對象,parentcode不存在或是cache中找不到就返回toolbar對象  
    getParnetCt: function(parentcode){  
        if (!parentcode) { //parentcode爲空時父容器就是toolbar  
            return this;  
        }  
        return this.menuCache[parentcode] ? this.menuCache[parentcode] : this;  
    },  
    //根據item對象或者code屬性獲取它的的路徑  
    getItemPath: function(item){  
        var code = typeof item == 'string' ? item : item.code;  
        var record = this.store.getAt(this.store.find('code', code));  
        if (!record)   
            return;  
        var path = [];         
        while (record) {  
            path.push(record.get('name'));  
            index = this.store.find('code', record.get('parentcode'));  
            record = this.store.getAt(index);              
        }  
        path.reverse();  
        return path.join('-->');  
    },  
    //獲取最後一個被點擊的item  
    getLastItem: function(){  
        return this.lastItem;  
    },  
    load: function(){  
        this.store.load();  
    }  
});
Ext.reg("MenuToolBar", com.increase.cen.MenuToolbar);


發佈了31 篇原創文章 · 獲贊 21 · 訪問量 1萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章