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

最新推荐文章于 2021-02-23 12:25:08 发布

weixin_34306593

最新推荐文章于 2021-02-23 12:25:08 发布

阅读量154

点赞数

文章标签： json

本文详细介绍了如何在ExtJS中实现异步数据加载功能，通过定义数据类和创建HttpHandler来提供数据，同时改造grid的store定义以支持异步加载。通过实例演示了如何将服务器端数据动态加载到Grid组件中，实现了一个简单的异步加载的Grid应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一篇演示了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'
        }
    }
});