Ext 2.0使用:组件开发模式

Ext 2.0使用:组件开发模式

Ext 2.0中取消了组件的构造方法，你完全可以在initComponent中执行自己的构造逻辑。假如开发过
Asp.Net的控件，那么你应该比较熟悉这种开发模式。只要你了解Ext控件的各个方法的生命周期，调用模式，那么你可以随心所欲的继承和扩展Ext的组件，和开发自己的新的组件。
比如我们需要一个显示用户信息的Grid，那么在Ext 2.0中可以更加方便的实现。
以下代码是显示用户信息的GridPanel：

  1 /**/ /**
  2 * @author Terry
  3 */
  4
  5 EasyNet.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
151 Ext.reg('easynetusergrid', EasyNet.UserGrid);

以下是查找用户对话窗体：

  1 /**/ /**
  2 * @author Terry
  3 */
  4
  5 EasyNet.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取得。