正文

如何用ExtJS高效获取并展示数据库中的Grid数据教程

/0 浏览量
0707

在开发Web应用程序时，使用ExtJS来构建用户界面是一个常见的选择。ExtJS是一个功能强大的JavaScript库，它可以帮助开发者快速构建高性能的Web应用程序。在这个教程中，我们将学习如何使用ExtJS高效获取并展示数据库中的Grid数据。

环境准备

在开始之前，请确保你已经以下环境：

  • Node.js和npm或Yarn
  • ExtJS开发工具包
  • 数据库（如MySQL、PostgreSQL、MongoDB等）
  • 一个Web服务器（如Apache、Nginx等）

步骤1：创建ExtJS项目

  1. 使用ExtJS命令行工具创建一个新的项目：
ext create myGridApp -t classic

这将创建一个名为myGridApp的ExtJS项目，使用经典主题。

  1. 进入项目目录：
cd myGridApp

步骤2：配置数据库连接

  1. 在项目的app.js文件中，配置数据库连接。以下是一个使用ExtJS的Ext.data.Connection配置MySQL数据库的示例：
Ext.onReady(function() {
    Ext.data.Connection.setup({
        defaultType: 'ajax',
        url: '/api',
        timeout: 30000,
        method: 'post',
        headers: {
            'Content-Type': 'application/json'
        }
    });
});

确保你的服务器已经设置好了API接口，用于处理数据库查询。

步骤3：创建Grid组件

  1. 在项目的view目录下创建一个新的文件，例如Grid.js。

  2. 在Grid.js文件中，定义一个Grid组件，如下所示：

Ext.define('MyApp.view.Grid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.mygrid',
    title: '数据列表',
    store: 'MyStore',
    columns: [
        { text: 'ID', dataIndex: 'id', width: 50 },
        { text: '姓名', dataIndex: 'name', flex: 1 },
        { text: '年龄', dataIndex: 'age', width: 100 }
    ],
    dockedItems: [
        {
            xtype: 'toolbar',
            items: [
                {
                    text: '刷新',
                    icon: 'resources/images/icons/fam_refresh.png',
                    handler: function() {
                        var grid = Ext.ComponentQuery.query('mygrid')[0];
                        grid.getStore().load();
                    }
                }
            ]
        }
    ]
});

这里，我们创建了一个名为MyApp.view.Grid的Grid组件，它包含三个列：ID、姓名和年龄。我们使用MyStore作为数据源。

步骤4：创建数据存储

  1. 在项目的store目录下创建一个新的文件，例如MyStore.js。

  2. 在MyStore.js文件中，定义一个数据存储，如下所示：

Ext.define('MyApp.store.MyStore', {
    extend: 'Ext.data.Store',
    alias: 'store.myStore',
    model: 'MyApp.model.MyRecord',
    proxy: {
        type: 'ajax',
        url: '/api/data',
        reader: {
            type: 'json',
            rootProperty: 'data'
        }
    }
});

这里，我们创建了一个名为MyApp.store.MyStore的数据存储，它使用ajax代理从API接口获取数据。

步骤5：创建模型

  1. 在项目的model目录下创建一个新的文件，例如MyRecord.js。

  2. 在MyRecord.js文件中，定义一个模型，如下所示：

Ext.define('MyApp.model.MyRecord', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'name', type: 'string' },
        { name: 'age', type: 'int' }
    ]
});

这里，我们创建了一个名为MyApp.model.MyRecord的模型，它包含三个字段：ID、姓名和年龄。

步骤6：运行项目

  1. 启动Web服务器。

  2. 打开浏览器，访问http://localhost:8080/。

现在你应该能看到一个包含数据的Grid组件，你可以通过点击“刷新”按钮来更新数据。

总结

在这个教程中，我们学习了如何使用ExtJS高效获取并展示数据库中的Grid数据。我们创建了一个Grid组件、数据存储和模型，并配置了数据库连接。通过这个教程，你应该能够掌握使用ExtJS进行数据展示的基本技巧。

-- 展开阅读全文 --