extjs_02_grid显示本地数据、显示跨域数据

现在我来详细讲解“extjs_02_grid显示本地数据、显示跨域数据”的完整攻略。

1. Grid 显示本地数据

1.1 示例说明

下面是一个简单的示例，演示如何创建 Ext JS Grid 并显示本地数据。

Ext.application({
    name: 'MyApp',
    launch: function() {
        // 创建数据模型
        Ext.define('User', {
            extend: 'Ext.data.Model',
            fields: [
                { name: 'id', type: 'int' },
                { name: 'name', type: 'string' },
                { name: 'email', type: 'string' },
                { name: 'phone', type: 'string' }
            ]
        });

        // 创建数据源
        var store = Ext.create('Ext.data.Store', {
            model: 'User',
            data: [
                { id: 1, name: '张三', email: '[e-mail]', phone: '13800138000' },
                { id: 2, name: '李四', email: '[e-mail]', phone: '13800138001' },
                { id: 3, name: '王五', email: '[e-mail]', phone: '13800138002' }
            ]
        });

        // 创建 Grid
        var grid = Ext.create('Ext.grid.Panel', {
            title: '用户列表',
            store: store,
            columns: [
                { text: 'ID', dataIndex: 'id' },
                { text: '姓名', dataIndex: 'name' },
                { text: '邮箱', dataIndex: 'email' },
                { text: '电话', dataIndex: 'phone' }
            ],
            height: 200,
            width: 500,
            renderTo: Ext.getBody()
        });
    }
});

1.2 说明

上面的示例中，我们创建了一个 Ext JS 应用程序，并在其 launch 方法中创建了一个数据模型 User，该模型定义了用户的数据结构。然后，我们创建了一个数据源，该数据源使用了定义好的模型并设置了一些用户的数据。最后，我们创建了一个 Ext JS Grid 并将数据源和列的定义传递给了它。最后，我们在页面中渲染出这个 Grid。

2. Grid 显示跨域数据

2.1 示例说明

跨域数据的加载需要特别处理，下面是一个简单的示例，演示如何通过 JSONP 的方式加载跨域数据并在 Ext JS Grid 中进行显示。

Ext.application({
    name: 'MyApp',
    launch: function() {
        // 创建数据源
        var store = Ext.create('Ext.data.Store', {
            fields: ['name', 'email', 'phone'],
            proxy: {
                type: 'jsonp',
                url: 'http://api.example.com/users',
                reader: {
                    type: 'json',
                    rootProperty: 'data'
                }
            },
            autoLoad: true
        });

        // 创建 Grid
        var grid = Ext.create('Ext.grid.Panel', {
            title: '用户列表',
            store: store,
            columns: [
                { text: '姓名', dataIndex: 'name' },
                { text: '邮箱', dataIndex: 'email' },
                { text: '电话', dataIndex: 'phone' }
            ],
            height: 200,
            width: 500,
            renderTo: Ext.getBody()
        });
    }
});

2.2 说明

上面的示例中，我们创建了一个 Ext JS 应用程序，并在其 launch 方法中创建了一个数据源 store，该数据源使用了 jsonp 类型的代理来加载跨域数据。数据源中还指定了数据和 reader 的配置。读取器将接受返回的 JSON 数据，并查找名为 data 的属性，以在我们的 Ext JS Grid 中显示纪录。最后，我们创建了一个 Ext JS Grid 并将数据源和列定义传递给了它。最终，我们在页面中渲染出这个 Grid。