ExtJS中如何扩展自定义的类

ExtJS中如何扩展自定义的类2010-12-05 博客园落木

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}）;