Extjs 动态修改gridPanel列头信息以及store数据的方法


  1 /*******************************checkbox按钮 历史报警信息**************************************/
  2         var checkboxHistoryModule = new Ext.form.Checkbox({  
  3             id : "alarmHistoryInfoCheck",  
  4             name : "alarmHistoryInfoCheck",  
  5             //width : 70,  
  6             boxLabel : "历史报警信息",  
  7             //checked : true,
  8             handler: function() {
  9                 //当选中和取消历史信息时，动态加载grid列头及数据信息，选中历史信息时，加载列多出处理人和处理时间两列
 10                 if(this.checked==true) {
 11                     var queryAlarmInfoHis_store = Ext.create('Ext.data.Store', {
 12                         autoLoad: true,
 13                         pageSize: 50,
 14                         model: 'queryAlarmInfoHistoryData',
 15                         proxy: {
 16                             type: 'ajax',
 17                             url: 'queryAlarmInfo.do',
 18                             extraParams  : {                           
 19                                 isShowHistory : "true"
 20                             },
 21                             reader: {
 22                                 type: 'json',
 23                                 root: 'dataList',
 24                                 totalProperty: 'total'
 25                             }
 26                         }
 27                     });
 28                 
 29                   var queryAlarmInfoHis_columns = 
 30                           [{ text: '序号', xtype:'rownumberer',  40 },
 31                            { text: '拓扑图',  dataIndex: 'link',flex:1},
 32                            { 
 33                                text: '工作流ID',  
 34                                dataIndex: 'iflowid',
 35                                flex:1,
 36                                // 鼠标悬浮提醒
 37                                renderer : function (value, metaData, record, colIndex, store, view)
 38                                {
 39                                    metaData.tdAttr = 'data-qtip="' + value + '"';
 40                                    return value;
 41                                }},
 42                            { 
 43                                text: '工程名称',  
 44                                dataIndex: 'prjName',
 45                                flex:1,
 46                                // 鼠标悬浮提醒
 47                                renderer : function (value, metaData, record, colIndex, store, view)
 48                                {
 49                                    metaData.tdAttr = 'data-qtip="' + value + '"';
 50                                    return value;
 51                                }},
 52                            { 
 53                                text: '工作流名',  
 54                                dataIndex: 'flowName',
 55                                flex:1,
 56                                // 鼠标悬浮提醒
 57                                renderer : function (value, metaData, record, colIndex, store, view)
 58                                {
 59                                    metaData.tdAttr = 'data-qtip="' + value + '"';
 60                                    return value;
 61                                }},
 62                            { 
 63                                text: '活动名',  
 64                                dataIndex: 'actName',
 65                                flex:1,
 66                                // 鼠标悬浮提醒
 67                                renderer : function (value, metaData, record, colIndex, store, view)
 68                                {
 69                                    metaData.tdAttr = 'data-qtip="' + value + '"';
 70                                    return value;
 71                                }},
 72                            { 
 73                                text: '报警类型',  
 74                                dataIndex: 'type',
 75                                80,
 76                                // 鼠标悬浮提醒
 77                                renderer : function (value, metaData, record, colIndex, store, view)
 78                                {
 79                                    metaData.tdAttr = 'data-qtip="' + value + '"';
 80                                    return value;
 81                                }},
 82                            {   
 83                                text: '报警描述',  
 84                                dataIndex: 'warnDes',
 85                                flex:1,
 86                                // 鼠标悬浮提醒
 87                                renderer : function (value, metaData, record, colIndex, store, view)
 88                                {
 89                                    metaData.tdAttr = 'data-qtip="' + value + '"';
 90                                    return value;
 91                                }},
 92                            {   
 93                                text: '报警时间',  
 94                                dataIndex: 'warnTime',
 95                                80,
 96                                // 鼠标悬浮提醒
 97                                renderer : function (value, metaData, record, colIndex, store, view)
 98                                {
 99                                    metaData.tdAttr = 'data-qtip="' + value + '"';
100                                    return value;
101                                }
102                            },
103                            { text: '处理描述',  dataIndex: 'delDes',80},
104                            {   
105                                text: '处理人',  
106                                dataIndex: 'delUser',
107                                80,
108                                // 鼠标悬浮提醒
109                                renderer : function (value, metaData, record, colIndex, store, view)
110                                {
111                                    metaData.tdAttr = 'data-qtip="' + value + '"';
112                                    return value;
113                                }
114                            },
115                            {   
116                                text: '处理时间',  
117                                dataIndex: 'delTime',
118                                80,
119                                // 鼠标悬浮提醒
120                                renderer : function (value, metaData, record, colIndex, store, view)
121                                {
122                                    metaData.tdAttr = 'data-qtip="' + value + '"';
123                                    return value;
124                                }
125                            }
126                         ];
127                   
128                   //重载gridpanel列信息的方法
129                   queryAlarmInfo_grid.reconfigure(queryAlarmInfoHis_store,queryAlarmInfoHis_columns);
130 
131                 } else {
132                     var queryAlarmInfoNotHis_store = Ext.create('Ext.data.Store', {
133                           autoLoad: true,
134                           pageSize: 50,
135                           model: 'queryAlarmInfoData',
136                           proxy: {
137                               type: 'ajax',
138                               url: 'queryAlarmInfo.do',
139                               extraParams  : {                           
140                                   isShowHistory : "false"
141                               },
142                               reader: {
143                                   type: 'json',
144                                   root: 'dataList',
145                                   totalProperty: 'total'
146                               }
147                           }
148                       });
149                       
150                     var queryAlarmInfoNotHis_columns = 
151                             [{ text: '序号', xtype:'rownumberer',  40 },
152                              { text: '拓扑图',  dataIndex: 'link',flex:1},
153                              { 
154                                  text: '工作流ID',  
155                                  dataIndex: 'iflowid',
156                                  flex:1,
157                                  // 鼠标悬浮提醒
158                                  renderer : function (value, metaData, record, colIndex, store, view)
159                                  {
160                                      metaData.tdAttr = 'data-qtip="' + value + '"';
161                                      return value;
162                                  }},
163                              { 
164                                  text: '工程名称',  
165                                  dataIndex: 'prjName',
166                                  flex:1,
167                                  // 鼠标悬浮提醒
168                                  renderer : function (value, metaData, record, colIndex, store, view)
169                                  {
170                                      metaData.tdAttr = 'data-qtip="' + value + '"';
171                                      return value;
172                                  }},
173                              { 
174                                  text: '工作流名',  
175                                  dataIndex: 'flowName',
176                                  flex:1,
177                                  // 鼠标悬浮提醒
178                                  renderer : function (value, metaData, record, colIndex, store, view)
179                                  {
180                                      metaData.tdAttr = 'data-qtip="' + value + '"';
181                                      return value;
182                                  }},
183                              { 
184                                  text: '活动名',  
185                                  dataIndex: 'actName',
186                                  flex:1,
187                                  // 鼠标悬浮提醒
188                                  renderer : function (value, metaData, record, colIndex, store, view)
189                                  {
190                                      metaData.tdAttr = 'data-qtip="' + value + '"';
191                                      return value;
192                                  }},
193                              { 
194                                  text: '报警类型',  
195                                  dataIndex: 'type',
196                                  80,
197                                  // 鼠标悬浮提醒
198                                  renderer : function (value, metaData, record, colIndex, store, view)
199                                  {
200                                      metaData.tdAttr = 'data-qtip="' + value + '"';
201                                      return value;
202                                  }},
203                              {   
204                                  text: '报警描述',  
205                                  dataIndex: 'warnDes',
206                                  flex:1,
207                                  // 鼠标悬浮提醒
208                                  renderer : function (value, metaData, record, colIndex, store, view)
209                                  {
210                                      metaData.tdAttr = 'data-qtip="' + value + '"';
211                                      return value;
212                                  }},
213                              {   
214                                  text: '报警时间',  
215                                  dataIndex: 'warnTime',
216                                  80,
217                                  // 鼠标悬浮提醒
218                                  renderer : function (value, metaData, record, colIndex, store, view)
219                                  {
220                                      metaData.tdAttr = 'data-qtip="' + value + '"';
221                                      return value;
222                                  }},
223                              { text: '处理描述',  dataIndex: 'delDes',80}
224                           ];
225 
226                     queryAlarmInfo_grid.reconfigure(queryAlarmInfoNotHis_store,queryAlarmInfoNotHis_columns);
227                     
228                 }
229             }
230         });
以上代码片段是动态随需求改变gridpanel列头及显示信息的方法，个人总结，如转载，请注明出处，谢谢
相关阅读:
安装VS 2015完成后,VS2012 打开报错
 ASP.NET MVC 项目中一般处理程序ashx 获取Session
windows平台查看 dll 程序集 PublicKeyToken
MySQL 表与字段编码格式报错
 Linux系统下安装MongoDB 指南
 ASP.NET 访问路径错误提示 HTTP 错误 404.8 原来路径中包含bin目录被拒绝
 ASP.NET 大文件上传
 将类型(int,string,…)转换为 T 类型
 直接插入排序
 MySQL 优化之索引合并（index_merge）
原文地址：https://www.cnblogs.com/symbol8888/p/7144918.html