ExtJS中如何扩展自定义的类

【 tulaoshi.com - Web开发 】

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