1

/**//**2
* ExtJs自定义PersonListGridPanel类3
* 该类继承自GridPanel[使用Ext.extend(superClass,override Object)方法实现继承],4
* 并override了该类的构造函数5
* 构造函数内部继承自GridPanel的构造函数[apply(this,arguments)实现继承]6
* 该类实现了如何对外部公布一个事件7
* 在构造函数中添加一个事件[this.addEvents("事件名称")]8
* 然后使用this.fireEvent("事件名称",参数)来发布此事件9
* 最后在客户端调用的时候来订阅该事件10
*/11

PersonListGridPanel = Ext.extend(Ext.grid.GridPanel,
{12

constructor: function(_url)
{13

PersonListGridPanel.superclass.constructor.apply(this, [
{14
renderTo: Ext.getBody(),15
350,16
height: 200,17
frame: true,18
layout: "form",19

tbar:[
{20
text:"add"21

},"-",
{22
text:"update"23

},"-",
{24
text:"delete"25
}],26
enableColumnMove: false,27

columns: [
{28
header: "Name",29
menuDisabled: true,30
dataIndex: "name"31

},
{32
header: "Age",33
menuDisabled: true,34
dataIndex: "age"35

},
{36
header: "Sex",37
menuDisabled: true,38
dataIndex: "sex"39
}],40

store: new Ext.data.JsonStore(
{41
autoLoad: true,42
url: _url,43
fields: ["name", "age", "sex"]44
}),45
46

selModel: new Ext.grid.RowSelectionModel(
{47
singleSelect: true,48

listeners:
{49

"rowselect":
{50

fn: function(_sel, _index, _r)
{51
this.fireEvent("rowselect", _r);//发布事件52
},53
scope: this54
}55
}56
})57
58
}]);59
this.addEvents("rowselect");//添加事件60
}61
})62
1

/**//**2
* 前端调用自定义类(组件)3
*/4

Ext.onReady(function()
{5
var _grid=new PersonListGridPanel("http://localhost:3830/extjs/gridData.ashx");6
//以下订阅该事件7

_grid.on("rowselect", function(_r)
{8
this.getForm().loadRecord(_r);9
},_form);10
11
});