ExtJs 实现动态加载grid完整示例

下面是ExtJs实现动态加载grid完整示例的攻略：

概述

在实际开发中，有时候需要动态加载grid数据，在数据量较大的情况下，提高页面加载速度，减少用户等待时间，这就需要使用ExtJs实现动态加载grid数据。ExtJs中实现动态加载grid数据的方式有两种，一种是使用分页加载数据，另一种是使用滚动加载数据，下面我们将详细介绍这两种方式以及示例。

分页加载数据

分页加载数据是指在grid表格中分页加载数据，可以提高页面加载速度，同时减少数据传输量，对于数据量较大的情况下尤为适用。下面是一个分页加载数据的示例代码：

Ext.define('App.view.UserList', {
    extend: 'Ext.grid.Panel',

    requires: [
        'App.store.Users',
        'Ext.toolbar.Paging'
    ],

    alias: 'widget.userlist',

    store: 'Users',
    columnLines: true,

    initComponent: function () {
        var me = this;

        Ext.applyIf(me, {
            dockedItems: [
                {
                    xtype: 'pagingtoolbar',
                    dock: 'bottom',
                    displayInfo: true,
                    store: me.store
                }
            ],
            columns: [
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'id',
                    text: 'ID',
                    hidden: true,
                    flex: 1
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'name',
                    text: 'Name',
                    flex: 1
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'email',
                    text: 'Email',
                    flex: 1
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'phone',
                    text: 'Phone',
                    flex: 1
                }
            ]
        });

        me.callParent(arguments);
    }
});

滚动加载数据

滚动加载数据是指在grid表格中滚动浏览器滚动条时，动态加载数据，这种方式可以实现无缝加载数据，对于数据量较小的情况下尤为适用。下面是一个滚动加载数据的示例代码：

Ext.define('App.view.UserList', {
    extend: 'Ext.grid.Panel',

    requires: [
        'App.store.Users'
    ],

    alias: 'widget.userlist',

    store: 'Users',
    columnLines: true,
    loadMask: true,
    scroll: 'vertical',

    initComponent: function () {
        var me = this;

        Ext.applyIf(me, {
            columns: [
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'id',
                    text: 'ID',
                    hidden: true,
                    flex: 1
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'name',
                    text: 'Name',
                    flex: 1
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'email',
                    text: 'Email',
                    flex: 1
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'phone',
                    text: 'Phone',
                    flex: 1
                }
            ]
        });

        me.store.addListener('load', function (store, records, successful, operation) {
            if (successful && records.length > 0) {
                var lastRecord = records[records.length - 1];
                var lastId = lastRecord.data.id;
                var newRecords = [];
                for (var i = lastId + 1; i <= lastId + 10; i++) {
                    newRecords.push({
                        id: i,
                        name: 'name' + i,
                        email: 'email' + i + '@example.com',
                        phone: '1234567890'
                    });
                }
                store.add(newRecords);
            }
        });

        me.callParent(arguments);
    }
});

在这个示例中，我们监听了store的load事件，在load完成后，判断是否加载成功并且有记录，如果满足条件，则根据最后一条记录的id，动态生成10条记录，并添加到store中。

以上是两个ExtJs实现动态加载grid数据的示例代码，具体可以根据实际情况进行选择，如果数据量较大，建议使用分页加载数据，如果数据量较小，可以使用滚动加载数据。