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列头及显示信息的方法,个人总结,如转载,请注明出处,谢谢

时间: 2024-10-21 05:24:50

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

GridPanel列头带有复选框的列

由于工作需要,封装了ExtJS4,GridPanel列头带有复选框的列, 代码如下: 1 /** 2 * 列头带有复选框的列 3 * 4 */ 5 Ext.define("org.pine.widget.CheckBoxColumn", { 6 extend : "Ext.grid.column.Column", 7 xtype : 'xcc_cfets_checkboxcolumn', 8 requires:[ 9 ], 10 /** 属性定义 */ 11 con

WPF (DataGridColumnHeader)实现自义定列头样式 并绑定数据

原文:WPF (DataGridColumnHeader)实现自义定列头样式 并绑定数据 实现功能是这样的 自定义列头 样式 样式里的 数据来源于后台绑定 这篇就说头样式 和头样式数据绑定 思路 1)实现功能的时候 首先想的是编辑列头样式 选择使用DataGridTextColumn 编辑 DataGridColumnHeader 样式 样式很简单 就布局好了 这段结束 2)动态列 没有要求换肤 所以就没有完全使用MVVM 直接写后台循环   到这里数据有了 List<string> LS =

动态修改easyui-datagrid 列

<table id="DataList" title="查询结果" style="width:99%;padding:10px;"></table> ① 隐藏列 $('#DataList').datagrid('hideColumn', 'Columnfield'); ② 动态修改列标题 $('div[class$="Columnfield"] :not(.datagrid-sort-icon)').h

easyui 在编辑状态下,动态修改其他列值。

1 首先是自定义了一个方法uodateColumn更新列值 2 3 /** 4 *自定义的修改列值方法 5 */ 6 $.extend($.fn.datagrid.methods, { 7 updateColumn: function(datagrid,data) { 8 datagrid.each(function(){ 9 //获取缓存中的配置数据 10 var gridObj=$.data(this,"datagrid"); 11 var opts=gridObj.options

extjs动态插入一列

1 StdDayWordQuery:function(btn,event){ 2 var form=Ext.getCmp('queryFormSDW'); 3 var userNameORuserCode = form.getForm().getValues()['userNameORuserCode']; 4 var gradeCode = form.getForm().getValues()['gradeCode']; 5 var startDate = form.getForm().get

WPF 动态列(DataGridTemplateColumn) 绑定数据 (自定义控件)对象绑定

原文:WPF 动态列(DataGridTemplateColumn) 绑定数据 (自定义控件)对象绑定 WPF 动态列(DataGridTemplateColumn) 绑定数据 (自定义控件) 上面的使用动态对象加载的数据 发现一个问题 一个是卡 二是 对象数量得写死 很不开心 最后使用对象方式 也应该使用对象方式 因为业务需要 我的datagird 数据来源于俩个对象 列头是一个,行和行内容是一个  不好的点是列行的数据匹配 不好掌控 因为业务问题 数据库设计问题 后期再修改成一个对象吧 行对

python常用模块email----从原始邮件中提取邮件头信息

email.parser.Parser()的parsestr()和parse()方法都可以用来从原始邮件文件中提取邮件头信息.这两个方法的区别就parsestr处理的是字符串对象,parse处理的是文件对象.   让我们通过两个例子来了解这两个方法的使用.先来看一封邮件的原始信息的一部分: cat /tmp/email_test1.txt date: Wed, 16 Nov 2016 16:04:44 +0800 From: 3456789 <[email protected]> To: 12

extjs动态树 动态grid 动态列

由于项目需要做一个动态的extjs树.列等等,简而言之,就是一个都是动态的加载功能, 自己琢磨了半天,查各种资料,弄了将近两个星期,终于做出来了 首先,想看表结构,我的这个功能需要主从两张表来支持 代码目录表: CREATE TABLE SYS_T01_CODECONTENT ( ID NUMBER NOT NULL, PID NUMBER NOT NULL, TABLENAME VARCHAR2(50 BYTE), ZH_CN VARCHAR2(200 BYTE), ENABLE CHAR(1

ExtJS4.2 仅需配置URL动态加载GridPanel列(带分页)

最近做ExtJS一直想做个傻瓜式的GridPanel,今天折腾了一天,从GitHub找到的老外写的解决方案, 在他的基础上做了一些改动,增加了分页,增加了columns手动配置(原本只能动态生成),大家有兴趣可以自由扩展,我做了很详细的注释 效果图如下,仅需在html页面引入ext.all,并创建自定义控件,配置url即可创建带分页效果的GirdPanel 代码: 效果图: 一.动态加载自定义控件 自定义脚本包括两部分:DynamicGrid.js和DynamicReader.js 将Ext目录