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);


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值