Extjs4.1 gridPanel动态列

动态列很常见，比如你构造的报表时需要根据不同的情况，显示完全不同的列表，在加载页面时或者在同一个页面上根据不同的条件设置不同的报表列都有可能，直接看效果吧

点击“修改动态列”显示为：

代码如下：

View Code 
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <title>根据不同的条件动态创建grid表格</title>
  5       <link href="../Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
  6     <script src="../Ext/ext-all.js" type="text/javascript"></script>
  7 
  8     <script src="../Ext/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
  9     <script type="text/javascript">
 10         Ext.Loader.setConfig({
 11         enabled:true
 12         });
 13         Ext.require([
 14                'Ext.grid.*',
 15                 'Ext.toolbar.Paging',
 16                 'Ext.util.*'
 17 
 18         ]);
 19         Ext.onReady(function () {
 20 
 21             Ext.define('MyData', {
 22                 extend: 'Ext.data.Model',
 23                 fields: [
 24                                     { name: 'userName', mapping: 'UserName' },
 25                                     'Sex',
 26                                     'Age',
 27                                     'XueHao',
 28                                     'BanJi'
 29                                 ]
 30             });
 31 
 32             Ext.define('MyModel', {
 33                 extend: 'Ext.data.Model',
 34                 fields: [{
 35                     name: 'departInfo', type: 'string'
 36                 }, {
 37                  name: 'coursename', type: 'string' 
 38                  }]
 39             });
 40 
 41 
 42             var store = Ext.create('Ext.data.Store', {
 43                 model: 'MyData',
 44                 proxy: {
 45                     type: 'ajax',
 46                     url: 'mydata.json',
 47                     reader: {
 48                         type: 'json',
 49                         root: 'items'
 50                         //totalProperty : 'total'
 51                     }
 52                 },
 53                 autoLoad: true
 54             });
 55 
 56             var newstore = Ext.create('Ext.data.Store', {
 57                 model: 'MyModel',
 58                 proxy: {
 59                     //异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可
 60                     type: 'ajax',
 61                     url: 'courseinfo.js',
 62                     reader: {
 63                         type: 'json',
 64                         root: 'data'
 65                         //totalProperty : 'total'
 66                     }
 67                 },
 68                 autoLoad: true
 69             });
 70 
 71             var grid = Ext.create('Ext.grid.Panel', {
 72                 id: "mygrid",
 73                 store: store,
 74                 columns: [
 75                                     Ext.grid.RowNumberer({
 76                                         header: "序号",
 77                                         width: 40,
 78                                         renderer: function (value, metadata, record, rowIndex) {
 79                                             return rowIndex + 1;
 80                                         }
 81                                     }),
 82                                     { text: "姓名", width: 120, dataIndex: 'userName', sortable: true },
 83                                     { text: "性别", flex: 1, dataIndex: 'Sex', sortable: false },
 84                                     { text: "年龄", width: 100, dataIndex: 'Age', sortable: true },
 85                                     { text: "学号", width: 100, dataIndex: 'XueHao', sortable: true }
 86                                     ],
 87                 title: 'ExtJS4 Grid示例',
 88                 viewConfig: { stripeRows: true },
 89                 tbar: Ext.create("Ext.toolbar.Toolbar", {
 90                     items: [{
 91                         text: "修改动态列",
 92                         handler: function () {
 93 
 94                             //设置新的model
 95 //                            var fields = [];
 96 //                            fields.push({ name: 'departInfo', type: 'string' });
 97 //                            fields.push({ name: 'coursename', type: 'string' });
 98 //                            MyModel.setFields(fields);
 99                             newstore.reload();
100 
101 
102 
103                             //重新配置列和数据源
104                             var newcolumns = [];
105                             newcolumns.push({ text: '系别', dataIndex: 'departInfo' });
106                             newcolumns.push({ text: '课程', dataIndex: 'coursename' });
107 
108                             Ext.getCmp("mygrid").reconfigure(newstore, newcolumns);
109 
110                             //                            grid.getStore().proxy.url = "newdata.js";
111                             //                            grid.getStore().load();
112 
113                         }
114                     }]
115                 })
116             });
117 
118             Ext.create('Ext.container.Viewport',
119                 {
120                     layout: 'fit',
121                     items: grid
122                 }
123             );
124         });
125     </script>
126 </head>
127 <body>
128 
129 </body>
130 </html>

动态列其实也牵扯到动态数据源，你有两种方式来修改，一种是直接构造动态的Model和动态的store如代码中的95~98行，你也可以直接事先构造好model和store，如代码中的32行和56行声明的新的model和store，两种方式根据自己的实际情况决定

posted @ 2013-03-07 10:46  myt  阅读(1334)  评论(1)  编辑  收藏  举报