首页 新闻 搜索 专区 学院

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 }
qqmamiao的主页 qqmamiao | 初学一级 | 园豆:146
提问于:2012-08-07 15:59
< >
分享
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册