动态改变数据源，不是同一个数据源，按照条件再重新过滤，而是指定store的url，做这个功能时也上网搜了一些方法，有的管用，有的不管用，找个适合自己的看看。
修改前数据展示
点击按钮“修改动态数据源”效果如下：
代码如下：
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>Ext的动态修改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 <script src="../Ext/bootstrap.js" type="text/javascript"></script> 8 <script src="../Ext/locale/ext-lang-zh_CN.js" type="text/javascript"></script> 9 <script type="text/javascript"> 10 Ext.require([ 11 'Ext.grid.*', 12 'Ext.toolbar.Paging', 13 'Ext.util.*' 14 15 ]); 16 Ext.onReady(function () { 17 18 Ext.define('MyData', { 19 extend: 'Ext.data.Model', 20 fields: [ 21 //第一个字段需要指定mapping，其他字段，可以省略掉。 22 {name: 'userName', mapping: 'UserName' }, 23 24 'Sex', 25 'Age', 26 'XueHao', 27 'BanJi' 28 ] 29 }); 30 31 //创建数据源 32 var store = Ext.create('Ext.data.Store', { 33 model: 'MyData', 34 proxy: { 35 //异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可 36 type: 'ajax', 37 url: 'mydata.json', 38 reader: { 39 type: 'json', 40 root: 'items' 41 //totalProperty : 'total' 42 } 43 }, 44 autoLoad: true 45 }); 46 47 //复选框 48 // var sel = Ext.create("Ext.selection.CheckBoxModel"); 49 50 //创建Grid 51 var grid = Ext.create('Ext.grid.Panel', { 52 store: store, 53 columns: [ 54 Ext.grid.RowNumberer({ 55 header: "序号", 56 40, 57 renderer: function (value, metadata, record, rowIndex) { 58 return rowIndex + 1; 59 } 60 }), 61 { text: "姓名", 120, dataIndex: 'userName', sortable: true }, 62 { text: "性别", flex: 1, dataIndex: 'Sex', sortable: false }, 63 { text: "年龄", 100, dataIndex: 'Age', sortable: true }, 64 { text: "学号", 100, dataIndex: 'XueHao', sortable: true } 65 ], 66 title: 'ExtJS4 Grid示例', 67 viewConfig: { stripeRows: true }, 68 tbar: Ext.create("Ext.toolbar.Toolbar", { 69 items: [{ 70 text: "动态修改数据源", 71 handler: function () { 72 73 grid.getStore().proxy.url = "newdata.js"; 74 75 grid.getStore().load(); 76 77 } 78 }] 79 }) 80 }); 81 82 Ext.create('Ext.container.Viewport', 83 { 84 layout: 'fit', 85 items: grid 86 } 87 ); 88 }); 89 </script> 90 </head> 91 <body> 92 <div id="demo"> 93 </div> 94 </body> 95 </html>
第73行是方式，很很简单吧，找到了就是简单