Ext 2.0使用:组件开发模式 - Easy Net (Lucene && SOA) -...

Ext 2.0使用:组件开发模式
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                    xtype: 'checkbox',
37                    name: 'ckUserName'
38                }, {
39                    hideLabel: true,
40                    xtype: 'checkbox',
41                    name: 'ckDate'
42                }]
43            }, {
44                columnWidth: 0.8,
45                layout: 'form',
46                baseCls: 'x-plain',
47                items: [{
48                    xtype: 'textfield',
49                    fieldLabel: '登录名称',
50                    emptyText: '登录名称',
51                    maxLength: 50,
52                    name: 'loginName'
53                }, {
54                    xtype: 'textfield',
55                    fieldLabel: '用户名称',
56                    emptyText: '用户名称',
57                    maxLength: 50,
58                    name: 'userName'
59                }, {
60                    xtype: 'datefield',
61                    fieldLabel: '起始时间',
62                    emptyText: '年-月-日',
63                    format: 'Y-m-d',
64                    width: 130,
65                    name: 'bDate'
66                }, {
67                    xtype: 'datefield',
68                    fieldLabel: '起始时间',
69                    emptyText: '年-月-日',
70                    format: 'Y-m-d',
71                    width: 130,
72                    name: 'eDate'
73                }]
74            }]
75        }];
76
77        Easy.SearchUserWindow.superclass.initComponent.call(this);
78    },
79
80    onRender: function(ct, position){
81        EasyNet.SearchUserWindow.superclass.onRender.call(this, ct, position);
82        this.buttons[0].on('click', this.onSearch, this);
83        this.buttons[1].on('click', this.onCancel, this);
84
85    },
86
87    onSearch: function(){
88        this.loadData();
89    },
90
91    onCancel: function(){
92        if(this.closeAction == 'hide'){
93            this.hide();
94        }
95        else if(this.closeAction == 'close'){
96            this.close();
97        }
98    },
99
100    getValue: function(){
101        return {
102            ckLoginName: this.find('name', 'ckLoginName')[0].getValue(),
103            ckUserName: this.find('name', 'ckUserName')[0].getValue(),
104            loginName: this.find('name', 'loginName')[0].getValue(),
105            userName: this.find('name', 'userName')[0].getValue(),
106            bDate: this.find('name', 'bDate')[0].getValue(),
107            eDate: this.find('name', 'eDate')[0].getValue()
108        }
109    },
110
111    getCondition: function(){
112        var o = this.getValue();
113        var filter ='Status=1';
114
115        if(o.ckLoginName && o.LoginName != ''){
116            filter += String.format(' AND LoginName LIKE \'%{0}%\'', o.loginName);
117        }
118        if(o.ckUserName && o.userName != ''){
119            filter += String.format(' AND UserName LIKE \'%{0}%\'', o.userName);
120        }
121        if(o.ckDate && o.bDate != '' && o.eDate != '' && o.eDate >= o.bDate){
122            filter += String.format(' AND RegDate BETWEEN \'{0}\' AND \'{1}\'', o.bDate, o.eDate);
123        }
124
125        return {
126            fields: '*',
127            filter: filter
128        }
129    },
130
131    loadData: function(){
132        if(this.searchTo){
133            this.searchTo.store.baseParams = this.getCondition();
134            this.searchTo.loadData();
135        }
136
137        this.onCancel();
138    }
139});
在实际应用中所有数据调用.Net写的Web Service取得。