/**//** * ExtJs自定义PersonListGridPanel类 * 该类继承自GridPanel[使用Ext.extend(superClass,override Object)方法实现继承], * 并override了该类的构造函数 * 构造函数内部继承自GridPanel的构造函数[apply(this,arguments)实现继承] * 该类实现了如何对外部公布一个事件 * 在构造函数中添加一个事件[this.addEvents("事件名称"）] * 然后使用this.fireEvent("事件名称",参数）来发布此事件 * 最后在客户端调用的时候来订阅该事件 */ 
PersonListGridPanel = Ext.extend(Ext.grid.GridPanel, { 
constructor: function(_url){ PersonListGridPanel.superclass.constructor.apply(this, [{ 
renderTo: Ext.getBody(), width: 350, height: 200, frame: true, layout: "form", tbar:[{ text:"add" },"-",{ text:"update" },"-",{ text:"delete" 
}], enableColumnMove: false, columns: [{ header: "Name", menuDisabled: true, dataIndex: "name" }, { header: "Age", menuDisabled: true, dataIndex: "age" }, { header: "Sex", menuDisabled: true, dataIndex: "sex" }], store: new Ext.data.JsonStore({ autoLoad: true, url: _url, fields: ["name", "age", "sex"] }), selModel: new Ext.grid.RowSelectionModel({ singleSelect: true, listeners: { "rowselect": { fn: function(_sel, _index, _r){ this.fireEvent("rowselect", _r);//发布事件 }, scope: this } } }) }]); this.addEvents("rowselect");//添加事件 } 
}) 前端调用代码
/**//** * 前端调用自定义类（组件） */ Ext.onReady(function(){ var _grid=new PersonListGridPanel("http://localhost:3830/extjs/gridData.ashx"); //以下订阅该事件 _grid.on("rowselect", function(_r){ this.getForm().loadRecord(_r); },_form); });
PersonListGridPanel = Ext.extend(Ext.grid.GridPanel, 
constructor: function(_url)