ExtJS中如何扩展自定义的类
![](/Images/OutliningIndicators/ContractedBlock.gif)
JS代码
1![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
/**//**
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![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
PersonListGridPanel = Ext.extend(Ext.grid.GridPanel,
{
12![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
constructor: function(_url)
{
13![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
PersonListGridPanel.superclass.constructor.apply(this, [
{
14
renderTo: Ext.getBody(),
15
350,
16
height: 200,
17
frame: true,
18
layout: "form",
19![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
tbar:[
{
20
text:"add"
21![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},"-",
{
22
text:"update"
23![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},"-",
{
24
text:"delete"
25
}],
26
enableColumnMove: false,
27![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
columns: [
{
28
header: "Name",
29
menuDisabled: true,
30
dataIndex: "name"
31![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
32
header: "Age",
33
menuDisabled: true,
34
dataIndex: "age"
35![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
36
header: "Sex",
37
menuDisabled: true,
38
dataIndex: "sex"
39
}],
40![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
store: new Ext.data.JsonStore(
{
41
autoLoad: true,
42
url: _url,
43
fields: ["name", "age", "sex"]
44
}),
45
46![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
selModel: new Ext.grid.RowSelectionModel(
{
47
singleSelect: true,
48![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
listeners:
{
49![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
"rowselect":
{
50![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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
![](/Images/OutliningIndicators/ContractedBlock.gif)
前端调用代码
1![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
/**//**
2
* 前端调用自定义类(组件)
3
*/
4![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
Ext.onReady(function()
{
5
var _grid=new PersonListGridPanel("http://localhost:3830/extjs/gridData.ashx");
6
//以下订阅该事件
7![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
_grid.on("rowselect", function(_r)
{
8
this.getForm().loadRecord(_r);
9
},_form);
10
11
});
原文地址:https://www.cnblogs.com/xnxylf/p/1427243.html