Extjs 動態修改gridPanel列頭資訊以及store資料的方法，extjsgridpanel

Extjs 動態修改gridPanel列頭資訊以及store資料的方法，extjsgridpanel

  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列頭及顯示資訊的方法，個人總結，如轉載，請註明出處，謝謝