『ExtJS』给 Panel Items 中的 Grid 更新数据

几点说明

其实这是一个很无聊的问题，因为除非你还不了解Ext的运行机制，不然你是不可能想到这个问题的
其实再下面的代码中，我并没有对Grid进行任何的实质性的操作
在ExtJS中，Grid配置项store所绑定的是一个JsonStore的storeId
而JsonStore在实例化之后，理论上说，每个storeId只对应一个JsonStore
从而，Grid中的数据会随着绑定的storeId的JsonStore中的数据变化而变化
也就是说，只要我更新对应的storeId的JsonStore的数据就可以让Grid跟着变化

由于ExtJS的布局让我很是烦燥，所以我就用Ext Design来生成了

效果图

代码

在下面的代码中，要注意加粗加大的部分

其它部分的代码并不是关键代码，但这并不是说可以没有它们，最起码，它们还定义着显示的样式...

注释部分为Ext Design自动生成的

Ext Design 是Ext官方出的一个Ext代码生成的工具，用起来感觉与VS相差不大

按 F5 会生成代码文件到桌面

如果你的设计中，使用了 Grid 或 Combox 之类的控件，可能会需要再新建一个JsonDataStore

具体的使用方法，请参考官方提供的文档

MyPanel.ui.js

1 /*
2 * File: MyPanel.ui.js
3 * Date: Mon Feb 13 2012 14:51:27 GMT+0800 (ÖÐ¹ú±ê×¼Ê±¼ä)
4 *
5 * This file was generated by Ext Designer version 1.2.2.
6 * http://www.sencha.com/products/designer/
7 *
8 * This file will be auto-generated each and everytime you export.
9 *
10 * Do NOT hand edit this file.
11 */
12
13 MyPanelUi = Ext.extend(Ext.Panel, {
14     height: 577,
15      852,
16     layout: 'border',
17     title: '',
18
19     initComponent: function() {
20         Ext.applyIf(this, {
21             items: [
22                 {
23                     xtype: 'panel',
24                     id: 'GridPanel',
25                      100,
26                     layout: 'border',
27                     title: '',
28                     region: 'center',
29                     items: [
30                         {
31                             xtype: 'grid',
32                             id: 'GridDetails',
33                             height: 412,
34                              100,
35                             title: '',
36                             store: 'GridJsonStore',
37                             region: 'center',
38                             columns: [
39                                 {
40                                     xtype: 'gridcolumn',
41                                     dataIndex: 'id',
42                                     header: 'Id',
43                                     id: 'id',
44                                     sortable: true,
45                                      50
46                                 },
47                                 {
48                                     xtype: 'gridcolumn',
49                                     dataIndex: 'title',
50                                     header: 'Title',
51                                     id: 'title',
52                                     sortable: false,
53                                      200
54                                 },
55                                 {
56                                     xtype: 'gridcolumn',
57                                     dataIndex: 'author',
58                                     header: 'Author',
59                                     id: 'author',
60                                     sortable: false,
61                                      100
62                                 },
63                                 {
64                                     xtype: 'datecolumn',
65                                     dataIndex: 'publishDate',
66                                     header: 'Publish Date',
67                                     id: 'publishDate',
68                                     sortable: true,
69                                      120
70                                 }
71                             ]
72                         }
73                     ]
74                 }
75             ]
76         });
77
78         MyPanelUi.superclass.initComponent.call(this);
79     }
80 });

GridJsonStore.js

1 GridJsonStore = Ext.extend(Ext.data.JsonStore, {
2     constructor: function(cfg) {
3         cfg = cfg || {};
4         GridJsonStore.superclass.constructor.call(this, Ext.apply({
5             storeId: 'GridJsonStore'
6         }, cfg));
7     }
8 });

MyPanel.js

1 MyPanel = Ext.extend(MyPanelUi, {
2     initComponent: function() {
3         MyPanel.superclass.initComponent.call(this);
4     }
5 });

xds_index.js

1 Ext.onReady(function() {
2
3     Ext.QuickTips.init();
4
5     var store = new GridJsonStore({
6             // store configs
7             autoDestroy: true,
8             storeId: 'GridJsonStore',
9
10             // reader configs
11             idProperty: 'id',
12             fields: ['id', 'title','author']
13     });
14
15     var cmp1 = new MyPanel({
16         renderTo: Ext.getBody()
17     });
18
19     Ext.Ajax.request({
20         url: 'demo5response.aspx',
21         success: function(response,options){
22             try{
23                 store.loadData(Ext.decode(response.responseText));
24
25                 Ext.Msg.alert('Success','It Worked');
26             }
27             catch(eee)
28             {
29                 Ext.Msg.alert('Success',eee.message);
30             }
31         },
32         failure: function(response,options){
33             Ext.Msg.alert('Failure',response.responseText);
34         }
35     });
36
37     cmp1.show();
38 });

demo5response.aspx.cs

1 using System;
2 using System.Collections;
3 using System.Configuration;
4 using System.Data;
5 using System.Linq;
6 using System.Web;
7 using System.Web.Security;
8 using System.Web.UI;
9 using System.Web.UI.HtmlControls;
10 using System.Web.UI.WebControls;
11 using System.Web.UI.WebControls.WebParts;
12 using System.Xml.Linq;
13 using System.Web.Script.Serialization;
14
15 namespace WebApplication1.Demo5_Grid_DataStore_Load
16 {
17     public partial class demo5response : System.Web.UI.Page
18     {
19         protected void Page_Load(object sender, EventArgs e)
20         {
21             demo5json data = new demo5json();
22
23             data.success = true;
24             data.errorMsg = "Test the ErrorMsg!";
25
26             data.id = 1;
27             data.title = "『ExtJS』给 Panel Items 中的 Grid 更新数据";
28             data.author = "丛峻峰";
29
30             JavaScriptSerializer js = new JavaScriptSerializer();
31
32             Response.Write(js.Serialize(data));
33         }
34     }
35     public class demo5json
36     {
37         private bool _success;
38
39         public bool success
40         {
41             get { return _success; }
42             set { _success = value; }
43         }
44         private string _errorMsg;
45
46         public string errorMsg
47         {
48             get { return _errorMsg; }
49             set { _errorMsg = value; }
50         }
51         private int _id;
52
53         public int id
54         {
55             get { return _id; }
56             set { _id = value; }
57         }
58         private string _title;
59
60         public string title
61         {
62             get { return _title; }
63             set { _title = value; }
64         }
65         private string _author;
66
67         public string author
68         {
69             get { return _author; }
70             set { _author = value; }
71         }
72     }
73 }
74