Ext 2.0中取消了组件的构造方法，你完全可以在initComponent中执行自己的构造逻辑。假如开发过
Asp.Net的控件，那么你应该比较熟悉这种开发模式。只要你了解Ext控件的各个方法的生命周期，调用模式，那么你可以随心所欲的继承和扩展Ext的组件，和开发自己的新的组件。
比如我们需要一个显示用户信息的Grid，那么在Ext 2.0中可以更加方便的实现。
以下代码是显示用户信息的GridPanel：
1
/**//**
2
* @author Terry
3
*/
4
5EasyNet.UserGrid = Ext.extend(Ext.grid.GridPanel, 
{
6 serviceURL: '',
7
loadMask: {
8 msg: '加载用户信息'
9
},
10 viewConfig: {
11 forceFit: true
12 },
13
14 initComponent: function(){
15 var url = this.serviceURL;
16
17 this.store = new Ext.data.Store({
18 proxy: new Ext.data.HttpProxy({
19 url: url + '/QueryUser'
20 }),
21 baseParams: {
22 fields: '*',
23 filter: 'Status=1'
24 },
25 reader: new Ext.data.XmlReaderEx({
26 root: 'User',
27 totalRecords: 'Count',
28 record: 'UserData',
29 id: 'ID'
30 }, [
31 {name: 'LoginName', mapping: 'LoginName'},
32 {name: 'UserName', mapping: 'UserName'},
33 {name: 'Sex', type: 'int', mapping: 'Sex'},
34 {name: 'RegDate', type: 'date', format: 'Y-m-d', mapping: 'RegDate'}
35 ])
36 });
37
38 this.cm = new Ext.grid.ColumnModel([{
39 header: '登录名称',
40 dataIndex: 'LoginName'
41 },{
42 header: '用户名称',
43 dataIndex: 'UserName'
44 }, {
45 header: '用户姓名',
46 dataIndex: 'UserName'
47 }, {
48 header: '性别',
49 dataIndex: 'Sex',
50 renderer: function(v, params, data){
51 if(v == 1){
52 return '男';
53 }
54
55 return '女';
56 }
57 }, {
58 header: '注册时间',
59 dataIndex: 'RegDate'
60 }]);
61
62 this.cm.defaultSortable = true;
63
64 var searchBtn = new Ext.Button({
65 text: '查找'
66 });
67 var delBtn = new Ext.Button({
68 text: '删除'
69 });
70
71 searchBtn.on('click', this.onSearch, this);
72 delBtn.on('click', this.onDelete, this);
73
74 this.tbar = [searchBtn, delBtn];
75
76 var store = this.store;
77
78 this.bbar = new Ext.PagingToolbarEx({
79 store: store,
80 displayMsg: '显示用户信息 {0} - {1} / {2}',
81 emptyMsg: '没有用户信息',
82 paramNames: {
83 start: 'pageIndex',
84 limit: 'pageSize'
85 }
86 });
87
88 EasyNet.UserGrid.superclass.initComponent.call(this);
89 },
90
91 loadData: function(){
92 var params = Ext.util.JSON.decode(Ext.util.JSON.encode(this.store.baseParams));
93 params.pageIndex = 1;
94 params.pageSize = 20;
95 this.store.load({params: params});
96 },
97
98 onSearch: function(){
99 if(!this.searchWindow){
100 this.searchWindow = new EasyNet.SearchUserWindow({
101 searchTo:this
102 });
103 }
104
105 this.searchWindow.show();
106 },
107
108 onDelete: function(){
109 var sls = this.getSelections();
110 var count = sls.length;
111
112 if(count == 0){
113 return;
114 }
115
116 var surl = this.serviceURL;
117 var grid = this;
118
119 Ext.Msg.show({
120 title: '确认删除用户',
121 msg: '确实要删除所选用户吗?',
122 buttons: Ext.Msg.YESNO,
123 icon: Ext.Msg.WARNING,
124 fn: function(btn, text){
125 if(btn == 'yes'){
126 var filter = '';
127
128 for(var i = 0; i < count; i ++){
129 if(i == 0){
130 filter = new String(sls[0].id);
131 }
132 else{
133 filter = filter + ',' + sls[i].id;
134 }
135 }
136
137 var store = new Ext.data.Store({
138 proxy: new Ext.data.HttpProxy({
139 url: surl + '/DeleteUser'
140 })
141 });
142
143 store.load({params: {filter: 'ID IN(' + filter +')'}});
144 grid.loadData();
145 }
146 }
147 });
148 }
149});
150
151Ext.reg('easynetusergrid', EasyNet.UserGrid);
以下是查找用户对话窗体：
1/**//**
2 * @author Terry
3 */
4
5EasyNet.SearchUserWindow = Ext.extend(Ext.Window, {
6 width: 350,
7 height: 250,
8 resizable: false,
9 layout: 'form',
10 plain: true,
11 bodyStyle: 'padding:5px;',
12 buttonAlign: 'right',
13 modal:true,
14 title: '查找用户',
15 closeAction: 'hide',
16 buttons: [{
17 text: '确定'
18 }, {
19 text: '取消'
20 }],
21
22 initComponent: function(){
23 this.items = [{
24 layout: 'column',
25 baseCls: 'x-plain',
26 items: [{
27 columnWidth:0.08,
28 layout: 'form',
29 baseCls: 'x-plain',
30 items: [{
31 hideLabel: true,
32 xtype: 'checkbox',
33 name: 'ckLoginName'
34 }, {
35 hideLabel: true,
36