Extjs 动态修改gridPanel列头信息以及store数据的方法
Posted 书未来
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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‘, width: 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 width: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 width: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‘,width:80}, 104 { 105 text: ‘处理人‘, 106 dataIndex: ‘delUser‘, 107 width: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 width: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‘, width: 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 width: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 width: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‘,width:80} 224 ]; 225 226 queryAlarmInfo_grid.reconfigure(queryAlarmInfoNotHis_store,queryAlarmInfoNotHis_columns); 227 228 } 229 } 230 });
以上代码片段是动态随需求改变gridpanel列头及显示信息的方法，个人总结，如转载，请注明出处，谢谢
以上是关于Extjs 动态修改gridPanel列头信息以及store数据的方法的主要内容，如果未能解决你的问题，请参考以下文章