ExtJS GTGrid 简单用户管理

概述

在本文中，将会详细讲解通过 ExtJS GTGrid 进行简单用户管理的完整攻略。用户管理是每个 Web 系统必备的功能之一，通过 ExtJS GTGrid 可以快速搭建一个用户管理模块，同时也能与后端数据进行交互。

本文将会通过以下几个方面逐步阐述：

1. GTGrid 的基本使用方法

2. GTGrid 与后端数据的交互方式

3. 如何通过 GTGrid 实现用户的增删改查

GTGrid 的基本使用方法

GTGrid 是一个基于ExtJS框架的表格组件，可以快速的对数据进行增删改查操作。在使用 GTGrid 之前，需要先引入 GTGrid 的相关文件，然后初始化一个 GTGrid 对象。

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.layout.*'
]);

Ext.onReady(function() {
    // 定义数据模型
    Ext.define('User', {
        extend : 'Ext.data.Model',
        fields : [{
            name : 'id',
            type : 'int'
        }, {
            name : 'username',
            type : 'string'
        }, {
            name : 'email',
            type : 'string'
        }]
    });
    // 定义数据源
    var store = Ext.create('Ext.data.Store', {
        model : 'User',
        proxy : {
            type : 'ajax',
            url : '/user/list',
            reader : {
                type : 'json'
            }
        }
    });
    // 创建 GTGrid
    var grid = Ext.create('Ext.grid.Panel', {
        renderTo: 'grid-demo',
        store: store,
        columns: [{
            text: 'ID',
            dataIndex: 'id'
        }, {
            text: '用户名',
            dataIndex: 'username',
            editor: {
                xtype: 'textfield',
                allowBlank: false
            }
        }, {
            text: '邮箱',
            dataIndex: 'email',
            editor: {
                xtype: 'textfield',
                allowBlank: false
            }
        }],
        tbar: [{
            text: '新增',
            handler: function () {
                var record = new User();
                store.insert(0, record);
                grid.editingPlugin.startEdit(record, 0);
            }
        }, {
            text: '删除',
            handler: function () {
                var selection = grid.getView().getSelectionModel().getSelection()[0];
                if (selection) {
                    store.remove(selection);
                }
            }
        }]
    });

    //开启编辑
    var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
    });
    grid.addPlugin(cellEditing);

    //请求数据
    store.load();
});

在上面的代码中，我们首先定义了一个数据模型 User，该模型包含三个字段，分别是 id、username 和 email。然后我们定义了一个数据源 store，该数据源使用了 ajax proxy，并且指定了 url 和 reader，用于与后端进行数据交互。接着我们创建了一个 GTGrid，其 columns 属性指定了第一列为 ID，第二列为用户名，第三列为邮箱，第二列和第三列都支持编辑操作。最后通过 tbar 属性添加了一个新增按钮和一个删除按钮。

GTGrid 与后端数据的交互方式

GTGrid 支持多种与后端数据进行交互的方式，比如使用 ajax proxy、json proxy、rest proxy 等等。在调用 GTGrid 的数据源时，我们需要指定一个数据代理（proxy），用于与后端进行数据交互。下面以 ajax proxy 为例，展示 GTGrid 与后端数据的交互方式。

// 定义数据模型
Ext.define('User', {
    extend : 'Ext.data.Model',
    fields : [{
        name : 'id',
        type : 'int'
    }, {
        name : 'username',
        type : 'string'
    }, {
        name : 'email',
        type : 'string'
    }]
});
// 定义数据源
var store = Ext.create('Ext.data.Store', {
    model : 'User',
    proxy : {
        type : 'ajax',
        url : '/user/list',
        reader : {
            type : 'json'
        }
    }
});

在上面的代码中，我们定义了一个数据模型 User，并且定义了一个数据源 store，该数据源使用了 ajax proxy。ajax proxy 中的 url 属性指定了请求数据的地址，reader 属性指定了返回数据的格式。

如何通过 GTGrid 实现用户的增删改查

通过 GTGrid 实现用户的增删改查，需要处理以下几个方面：

1. 定义数据模型

2. 定义数据源

3. 定义 GTGrid

4. 处理数据新增和删除功能

5. 处理数据编辑功能

下面是一份完整的代码示例：

// 定义数据模型
Ext.define('User', {
    extend : 'Ext.data.Model',
    fields : [{
        name : 'id',
        type : 'int'
    }, {
        name : 'username',
        type : 'string'
    }, {
        name : 'email',
        type : 'string'
    }]
});
// 定义数据源
var store = Ext.create('Ext.data.Store', {
    model : 'User',
    proxy : {
        type : 'ajax',
        url : '/user/list',
        reader : {
            type : 'json'
        }
    }
});
// 定义 GTGrid
var grid = Ext.create('Ext.grid.Panel', {
    renderTo: 'grid-demo',
    store: store,
    columns: [{
        text: 'ID',
        dataIndex: 'id'
    }, {
        text: '用户名',
        dataIndex: 'username',
        editor: {
            xtype: 'textfield',
            allowBlank: false
        }
    }, {
        text: '邮箱',
        dataIndex: 'email',
        editor: {
            xtype: 'textfield',
            allowBlank: false
        }
    }],
    tbar: [{
        text: '新增',
        handler: function () {
            var record = new User();
            store.insert(0, record);
            grid.editingPlugin.startEdit(record, 0);
        }
    }, {
        text: '删除',
        handler: function () {
            var selection = grid.getView().getSelectionModel().getSelection()[0];
            if (selection) {
                store.remove(selection);
            }
        }
    }]
});

// 开启编辑
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
});
grid.addPlugin(cellEditing);

// 请求数据
store.load();

在上面的代码中，我们首先定义了一个数据模型 User，然后定义了一个数据源 store，该数据源使用了 ajax proxy，然后创建了一个 GTGrid。在 GTGrid 中，我们定义了 columns 属性，用于指定 GTGrid 的列，其中第二列和第三列都支持编辑操作。我们还通过 tbar 属性添加了一个新增按钮和一个删除按钮。在新增和删除按钮的事件中，我们使用 store.insert 和 store.remove 方法，实现了数据的增加和删除。最后我们还开启了编辑功能，通过 GTGrid 实现了数据的编辑。