ExtJS入门教程05,grid的异步加载数据

上一篇演示了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中有很多数据代理,具体可以分为服务器端代理和客户端代理,关于代理的文章我之前也下过两篇,感兴趣的小伙伴可以去看看:

  • ExtJS 4.2 客户端代理(proxy)
  • ExtJS 4.2 服务器代理(proxy)

proxy中的url属性就是我们刚才定义的handler的地址。

完成改造以后,运行我们的程序,一个简单的异步加载的grid就完成了。

上一篇:tomcat内存溢出处理


下一篇:Tomcat内存溢出