Ext 4.1封装 grid问题
0
悬赏园豆：50
[已关闭问题]
关闭于 2012-08-13 15:52
谁能帮我把下面这段代码封装成一个像Ext 4.1中使用grid的时候那样使用，如：var grid=ext.create('ext...',{});或者给我一个思路也行
View Code
1 var simplyGrid = { 2 ajaxUrl: null, 3 width: null, 4 heigth: 435, 5 pageSize: null, 6 romanceContainer: null, 7 params: null, 8 title: null, 9 gird: null, 10 simply: function() { 11 12 var pageIndex = 1; 13 var pageCount = 1; 14 var rowCount = 0; 15 var lastdatacount = 0; 16 var pageSize = this.pageSize; 17 var ajaxPath = this.ajaxUrl; 18 var params = this.params; 19 var renders = this.romanceContainer; 20 var width = this.width; 21 var height = this.heigth; 22 var gridPanel = null; 23 var gridStore = null; 24 var GridColumn = null; 25 var GridOption = null; 26 var lastdatacount = null; 27 var title = this.title; 28 29 30 31 Jit.extension.locale.LanguageResourcesLoader.load('zh_CN'); 32 33 var btnFirst = Ext.create('Ext.Button', { id: 'btnFirst', icon: '/images/paging/page-first.gif', handler: function() { pageLoad('First'); } }); 34 var btnPrev = Ext.create('Ext.Button', { id: 'btnPrev', icon: '/images/paging/page-prev.gif', handler: function() { pageLoad('Prev'); } }); 35 var btnNext = Ext.create('Ext.Button', { id: 'btnNext', icon: '/images/paging/page-next.gif', handler: function() { pageLoad('Next'); } }); 36 var btnLast = Ext.create('Ext.Button', { id: 'btnLast', icon: '/images/paging/page-last.gif', handler: function() { pageLoad('Last'); } }); 37 38 var btnMsg = Ext.create('Ext.form.Label', { id: 'btnMsg' }); 39 var txtPage = Ext.create('Ext.form.Number', { id: 'txtPage', width: 50, value: 1, minValue: 1 }); 40 41 var label = Ext.create('Ext.form.Label', { id: 'lable', width: 10 }); 42 var btnJump = Ext.create('Ext.Button', { id: 'btnJump', text: 'GO', pressed: true, width: 30, handler: function() { go(); } }); 43 44 ///设置分页样式 45 var setButtonStyle = function(i, s, c, l) { 46 Ext.getCmp("btnFirst").setDisabled(false); 47 Ext.getCmp("btnPrev").setDisabled(false); 48 Ext.getCmp("btnNext").setDisabled(false); 49 Ext.getCmp("btnLast").setDisabled(false); 50 51 if (i == 1) { 52 Ext.getCmp("btnFirst").setDisabled(true); 53 Ext.getCmp("btnPrev").setDisabled(true); 54 Ext.getCmp("btnNext").setDisabled(false); 55 Ext.getCmp("btnLast").setDisabled(false); 56 } 57 if (i == c) { 58 Ext.getCmp("btnFirst").setDisabled(false); 59 Ext.getCmp("btnPrev").setDisabled(false); 60 Ext.getCmp("btnNext").setDisabled(true); 61 Ext.getCmp("btnLast").setDisabled(true); 62 } 63 if (c == 0 || c == 1) { 64 Ext.getCmp("btnFirst").setDisabled(true); 65 Ext.getCmp("btnPrev").setDisabled(true); 66 Ext.getCmp("btnNext").setDisabled(true); 67 Ext.getCmp("btnLast").setDisabled(true); 68 } 69 setPagingMsg(i, s, c, l); 70 } 71 72 var setPagingMsg = function(i, s, c, l) { 73 Ext.getCmp("txtPage").setValue(i); 74 Ext.getCmp("txtPage").setMaxValue(c); 75 Ext.getCmp("btnMsg").setText("共" + c + "页，显示" + parseInt((i - 1) * pageSize + 1) + "-" + parseInt((i - 1) * pageSize + l) + "条/共" + rowCount + "条"); 76 } 77 78 var pageLoad = function(type) { 79 pageIndex = txtPage.getValue(); 80 if (type == 'First') { 81 82 pageIndex = 1; 83 paging(); 84 } 85 86 else if (type == 'Prev') { 87 88 if (pageIndex > 1) { 89 pageIndex--; 90 } 91 paging(); 92 93 } 94 95 else if (type == 'Next') { 96 if (pageIndex < pageCount) { 97 pageIndex++; 98 } 99 100 paging(); 101 102 } 103 else if (type == 'Last') { 104 pageIndex = pageCount; 105 paging(); 106 } 107 } 108 //改变页码调用事件 109 var paging = function() { 110 111 var myMask = new Ext.LoadMask(Ext.getBody(), { msg: 'Please wait.......' }); 112 myMask.show(); 113 114 Ext.Ajax.request({ 115 url: ajaxPath + "?PageSize=" + pageSize + "&PageIndex=" + pageIndex + "", 116 method: 'post', 117 params: params, 118 success: function(response, config) { 119 var json = Ext.JSON.decode(response.responseText); 120 gridPanel.store.model.fields = data.model; 121 gridPanel.store.loadData(json.data, false); 122 123 lastdatacount = json.data.length; 124 gridPanel.reconfigure(gridPanel.store, GridColumn); //重新设置grid的列模型和显示的数据源 125 gridPanel.setHeight(height); 126 rowCount = json.totalCount; 127 pageCount = rowCount % pageSize == 0 ? parseInt(rowCount / pageSize) : parseInt(rowCount / pageSize) + 1; 128 setButtonStyle(pageIndex, pageSize, pageCount, lastdatacount); 129 myMask.hide(); 130 } 131 }); 132 } 133 /** 134 *跳转到指定页数 135 */ 136 var go = function() { 137 138 var myMask = new Ext.LoadMask(Ext.getBody(), { msg: "Please wait..." }); 139 myMask.show(); 140 Ext.Ajax.request({ 141 url: ajaxPath + "?PageSize=" + pageSize + "&PageIndex=" + txtPage.getValue() + "", 142 method: 'post', 143 params: params, 144 success: function(response, config) { 145 var json = Ext.JSON.decode(response.responseText); 146 gridPanel.store.model.fields = data.model; 147 gridPanel.store.loadData(json.data, false); 148 lastdatacount = json.data.length; 149 gridPanel.reconfigure(gridPanel.store, GridColumn); //重新设置grid的列模型和显示的数据源 150 gridPanel.setHeight(height); 151 rowCount = json.totalCount; 152 pageCount = rowCount % pageSize == 0 ? parseInt(rowCount / pageSize) : parseInt(rowCount / pageSize) + 1; 153 setButtonStyle(txtPage.getValue(), pageSize, pageCount, lastdatacount); 154 myMask.hide(); 155 } 156 }); 157 } 158 159 var firstLoadCreate = function() { 160 161 var myMask = new Ext.LoadMask(Ext.getBody(), { msg: "Please wait..." }); 162 myMask.show(); 163 Ext.Ajax.request({ 164 url: ajaxPath + "?PageSize=" + pageSize + "&PageIndex=" + pageIndex + "", 165 method: 'post', 166 params: params, 167 success: function(response, config) { 168 var json = Ext.JSON.decode(response.responseText); 169 lastdatacount = json.data.length; 170 171 GridOption = json.fieldsNames; 172 GridColumn = json.columModel; 173 174 data = json.data; 175 //设置页码 176 rowCount = json.totalCount; 177 pageCount = rowCount % pageSize == 0 ? parseInt(rowCount / pageSize) : parseInt(rowCount / pageSize) + 1; 178 179 gridStore = new Ext.data.Store({ 180 fields: GridOption, 181 data: data 182 }); 183 184 gridPanel = Ext.create('Ext.grid.Panel', { 185 store: gridStore, 186 columnLines: true, 187 id: 'customerOrdersGridView', 188 columns: GridColumn, 189 renderTo: renders, 190 stripeRows: true, 191 title: title, 192 bbar: [btnFirst, btnPrev, txtPage, btnNext, btnLast, btnJump, label, btnMsg] 193 }); 194 gridPanel.setHeight(height); 195 setButtonStyle(1, rowCount, pageCount, lastdatacount); 196 myMask.hide(); 197 } 198 199 }); 200 simplyGrid.gird = gridPanel; 201 } 202 203 firstLoadCreate(); 204 205 } 206 207 }
