现在的位置: 首页 > 综合 > 正文

扩展/自定义 Extjs.Toolbar 组件

2014年02月11日 ⁄ 综合 ⁄ 共 1462字 ⁄ 字号 评论关闭
/*================================================================== 
* 通用网格工具栏示例 
*=================================================================== 
* 说明:此工具栏包含了常用的 新增,删除,打印,导出 等按钮和搜索框;
* 本示例包括:工具栏初始化,自定义属性,自定义方法,自定义事件等关键技术点 
* 用法: 
* 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);

转载地址:http://www.haogongju.net/art/615697

抱歉!评论已关闭.