Extjs4.1中动态改变gridpanel的数据源

最新推荐文章于 2021-07-06 09:37:23 发布

weixin_34235135

最新推荐文章于 2021-07-06 09:37:23 发布

阅读量261

点赞数

文章标签： xhtml javascript json ViewUI

原文链接：http://www.cnblogs.com/mayantao/archive/2013/03/07/2947557.html

版权

动态改变数据源，不是同一个数据源，按照条件再重新过滤，而是指定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                                         width: 40,
57                                         renderer: function (value, metadata, record, rowIndex) {
58                                             return rowIndex + 1;
59                                         }
60                                     }),
61                                     { text: "姓名", width: 120, dataIndex: 'userName', sortable: true },
62                                     { text: "性别", flex: 1, dataIndex: 'Sex', sortable: false },
63                                     { text: "年龄", width: 100, dataIndex: 'Age', sortable: true },
64                                     { text: "学号", width: 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行是方式，很很简单吧，找到了就是简单

转载于:https://www.cnblogs.com/mayantao/archive/2013/03/07/2947557.html

weixin_34235135

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Extjs4.1中动态改变gridpanel的数据源

动态改变数据源，不是同一个数据源，按照条件再重新过滤，而是指定store的url，做这个功能时也上网搜了一些方法，有的管用，有的不管用，找个适合自己的看看。修改前数据展示点击按钮“修改动态数据源”效果如下：代码如下：View Code 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E...
复制链接

扫一扫