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 */
11PersonListGridPanel = Ext.extend(Ext.grid.GridPanel, {
12 constructor: function(_url){
13 PersonListGridPanel.superclass.constructor.apply(this, [{
14 renderTo: Ext.getBody(),
15 width: 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: this
54 }
55 }
56 })
57
58 }]);
59 this.addEvents("rowselect");//添加事件
60 }
61})
62
前端调用代码
1/**//**
2 * 前端调用自定义类（组件）
3 */
4Ext.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});
