『ExtJS』ExtJS Grid 与 Asp.NET 通信

几点说明

---

1. 所谓的与Asp.NET通信，并不是说 ExtJS 用HTML写，然后再与Asp.NET通信。
2. 我们可以选择使用Html作为 ExtJS 的主体容器的。
3. 所谓的通信，主要是通过 ExtJS 中的 Ajax 访问一个独立的 Asp.NET 页面（就是ASPX为扩展名的页面）来进行的。
4. 这里只使用一条记录的数据，主要是因为做起来比较方便，如果需要，可以通过序列List<T>来回传 JSON 。
5. 这里我使用 JSON 做为通信的数据格式，还可以用XML等（我没试过，抱歉）。
6. 请不要直接Copy文中的代码，虽然它们很简单，因为可能会出现因环境、版本等原因而造成的异常。

主要代码

---

IDE: VS 2010 SP1

ExtJS 版本：3.4.0

参考文档：http://docs.sencha.com/ext-js/3-4/#!/api

<script type="text/javascript">
            Ext.onReady(function () {
                var store = new Ext.data.JsonStore({
                    // store configs
                    autoDestroy: true,
                    storeId: 'store',
                    // reader configs
                    idProperty: 'id',
                    fields: ['id', 'title']

                });

                Ext.Ajax.request({
                    url: 'WebForm1.aspx',
                    success: function (response, options) {
                        var storeJson = Ext.decode(response.responseText);
                        store.loadData(storeJson);
                    }
                });

                // Grid
                var grid = new Ext.grid.GridPanel({
                    renderTo: document.body,
                    title: 'Move Database',
                    height: 200,
                     500,
                    store: store,
                    columns: [
                        { header: "Id", dataIndex: 'id' },
                        { header: "Title", dataIndex: 'title' }
                        ]
                });
            }); 
     </script>

    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            User user = new User();

            user.success = true;
            user.id = 1;
            user.title = "title";

            //JavaScriptSerializer类在System.Web.Extensions.dll中，注意添加这个引用  
            JavaScriptSerializer serializer = new JavaScriptSerializer();

            //JSON序列化  
            string result = serializer.Serialize(user);

            Response.Write(result);
        }
    }
    public class User
    {
        private bool _success;

        public bool success
        {
            get { return _success; }
            set { _success = value; }
        }

        private int _id;

        public int id
        {
            get { return _id; }
            set { _id = value; }
        }

        private string _title;

        public string title
        {
            get { return _title; }
            set { _title = value; }
        }

    }

说明：

1. ExtJS ：test.aspx
1. Ext.onReady()，这个是必须的，至于为什么，不是这里的重点。
2. function()，这个也不是这里的重点。
3. Ext.data.JsonStore，这个是用于给Grid绑定数据的，类似数据字典一样的东西，具体见API文档，这个是一时说不清的。
1. 这里的fields用于指定可用的 JSON 字段，可以与最终获取到的不同，结果是最后Grid中只显示在这里和 JSON 中都有的字段。
2. 具体的参见API文档。
4. loadData()，这个是JsonStore类型实例的一个方法，用于将JSON数据加载到实例中。这个必须有，就算你成功了，也是没数据给Grid用的。
5. Ext.Ajax.request 这里一共使用了两个属性（最简单的使用了，其实这里在文档中是用「配置」来标注的）
1. url：提供数据的后台Asp.NET页面地址。
2. success：这个是request的方法，用于产生相应结果时调用，还有failure（用于失败时）等等。
3. Ext.decode(response.responseText)，Ext.decode是一个类似解码的方法，将后台response回来的 JSON 解释成我们用的形式。
4. store.loadData(storeJson)，加载返回数据到 JsonStore 中。
6. 在Grid中
1. 要注意，没有renderTo，可能会造成显示不出Grid。
2. 使用store来指定JsonStore。
3. columns用于指定要显示的字段，其中dataIndex指定的是JSON「名/值」中的名。
2. Asp.NET：WebForm1.aspx.cs
1. 为了方便，这里使用了.NET自带的序列化JSON的类JavaScriptSerializer，它的命名空间是System.Web.Script.Serialization。
2. 类User是我做为参考的一个伪Model类，这里如果你可以换成你自己的。
3. 在User中，success是ExtJS的Ext.data.JsonStore这个类需要的。
4. id 和 title 是User类里面的字段。
5. 在序列化之前，一定要确定有值，不然在store.loadData(storeJson)这里会出现错误。
6. result = serializer.Serialize(user)，这里的Serialize是序列化的一个方法，其将类的属性和其值制成一个JSON样式的字符串。
7. 如果没有特殊的事情要做，直接response.write(result)将序列化好的字符串不回就好。

结果页面

---

测试浏览器：Opera 11

改变后台中给User实例赋予的值