上一篇演示了extjs grid的基本用法，并加载了本地数据。今天我们将演示如何加载异步数据。
所谓异步，就是通过ajax的方式将服务器端的数据加载到我们的grid中。为了提供数据，我们先定义一个数据类，并创建一些临时数据。
public class UserEntity { public string ID { get; set; } public string Name { get; set; } public int Age { get; set; } public static List<UserEntity> UserList = null; static UserEntity() { UserList = new List<UserEntity>(); UserList.Add(new UserEntity() { ID = "1", Name = "齐飞1", Age = 27 }); UserList.Add(new UserEntity() { ID = "2", Name = "齐飞2", Age = 27 }); UserList.Add(new UserEntity() { ID = "3", Name = "齐飞3", Age = 27 }); UserList.Add(new UserEntity() { ID = "4", Name = "齐飞4", Age = 27 }); UserList.Add(new UserEntity() { ID = "5", Name = "齐飞5", Age = 27 }); UserList.Add(new UserEntity() { ID = "6", Name = "齐飞6", Age = 27 }); } }
有了数据，我们来创建一个HttpHandler，我们通过handler来提供数据：
public class gridAsync : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/json"; Common.HandleResult result = new Common.HandleResult(); result.Set(true, Entity.UserEntity.UserList); string jsonString = JsonConvert.SerializeObject(result); context.Response.Write(jsonString); } public bool IsReusable { get { return false; } } }
我们这里使用了Json.net来将数据序列化为json字符串。
然后，我们来改造一下上一篇的代码。上一篇中已经提到过，grid中的数据都是通过store来提供的，当我们修改了数据获取方式以后，我们只需要修改store的定义即可。
var myStore = Ext.create(‘Ext.data.Store‘, { model: ‘User‘, autoLoad: true, proxy: { type: "ajax", url: "/handlers/gridAsync.ashx", reader: { type: ‘json‘, root: "data", idProperty: ‘ID‘ } } });
首先，添加了autoLoad属性，这个属性表示自动加载url中的数据。
然后的proxy属性，这是一个数据代理，extjs中有很多数据代理，具体可以分为服务器端代理和客户端代理，关于代理的文章我之前也下过两篇，感兴趣的小伙伴可以去看看：
proxy中的url属性就是我们刚才定义的handler的地址。
完成改造以后，运行我们的程序，一个简单的异步加载的grid就完成了。
欢迎小伙伴们加入我们的“ExtJS 互助团”QQ群：2257136296
这篇文章还发布在了我的个人网站上面，链接地址：http://www.qeefee.com/article/extjs-starter-05-grid-async