扩展/自定义 Extjs.Toolbar 组件

/*==================================================================
*                     通用网格工具栏示例
*===================================================================
* 说明:此工具栏包含了常用的 新增,删除,打印,导出 等按钮和搜索框;

*      本示例包括:工具栏初始化,自定义属性,自定义方法,自定义事件等关键技术点
* 用法:
* 1.创建GridToolBar实例
* #参数:指定Store 用于搜索框搜索数据
* var gridToolBar = new Ext.nRelax.GridToolBar({ store: store }); 
* 2.onDelete事件,点击删除按钮时触发
* gridToolBar.on('onDelete', doDelete);
*====================================================================
*/
//定义命名空间
Ext.ns('Ext.nRelax');

Ext.nRelax.GridToolBar = function (cfg) {
    Ext.nRelax.GridToolBar.superclass.constructor.call(this, {
        id: 'tool_bar',
        cls: 'top-toolbar',
        items: [{ id: "add", text: "新增", iconCls: "silk-add" },
            { id: "del", text: "删除", iconCls: "silk-delete", disabled: "true", handler: doDelete },
            "-",
            { id: "print", xtype: "splitbutton", iconCls: "silk-printer", text: "打印" },
            "-",
            { id: "expore", xtype: "splitbutton", text: "导出" },
            "->",
            new Ext.ux.form.SearchField({
                store: this.store,
                width: 220
            }),
            { xtype: "tbspacer"}]
    });
    //自定义事件
    this.addEvents("onDelete");
    //自定义方法
    this.test = function () {
        alert('测试自定义方法');
    }
    //自定义属性
    this.buttonDel = this.findById("del");
    this.buttonAdd = this.findById("add");
    this.buttonPrint = this.findById("print");
    this.buttonExport = this.findById("expore");
};

doDelete = function () {
    //这里不能直接用This因为这里的This指删除按钮,可以用this.id测试

    
    this.ownerCt.fireEvent("onDelete");
}

//继承父控件
Ext.extend(Ext.nRelax.GridToolBar, Ext.Toolbar);


//第一个参数为自定义控件的xtype
Ext.reg('gridtoolbar', Ext.nRelax.GridToolBar); 

转载于:https://www.cnblogs.com/duanqs/archive/2010/11/19/1881324.html