技术开发 频道

Ext 2.0使用:组件开发模式

【IT168技术文档】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);
0
相关文章