动态列很常见，比如你构造的报表时需要根据不同的情况，显示完全不同的列表，在加载页面时或者在同一个页面上根据不同的条件设置不同的报表列都有可能，直接看效果吧
点击“修改动态列”显示为：
代码如下：
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 40, 78 renderer: function (value, metadata, record, rowIndex) { 79 return rowIndex + 1; 80 } 81 }), 82 { text: "姓名", 120, dataIndex: 'userName', sortable: true }, 83 { text: "性别", flex: 1, dataIndex: 'Sex', sortable: false }, 84 { text: "年龄", 100, dataIndex: 'Age', sortable: true }, 85 { text: "学号", 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，两种方式根据自己的实际情况决定