extJs 常用到的增，删，改，查操作代码

下面我将为您详细讲解 ExtJS 常用到的增、删、改、查操作的完整攻略。这里主要针对 ExtJS 版本 6.2 进行讲解。

概述

在 ExtJS 中，我们常常需要进行数据的增、删、改、查操作。这些操作基本都是基于 Ext.data.Store 和 Ext.data.Model 进行的。

其中，Ext.data.Store 负责连接数据源（可以是远程 URL，也可以是本地数据），并将数据缓存至本地。而 Ext.data.Model 则代表数据模型，每一个模型代表一条数据记录。我们可以通过 Ext.data.Store 对数据进行加载、新增、删除、修改等操作，最后通过 Ext.data.Store.sync() 方法将这些操作同步至数据源。

下面，我们将针对具体操作进行详细阐述。

新增数据

在 ExtJS 中，我们可以通过 Ext.data.Store.add() 方法向数据源中新增数据。具体演示代码如下所示：

// 定义数据模型
Ext.define('UserModel', {
    extend: 'Ext.data.Model',
    fields: ['id', 'name', 'email']
});

// 定义数据源
var userStore = Ext.create('Ext.data.Store', {
    model: 'UserModel',
    proxy: {
        type: 'rest',
        url: '/users'
    }
});

// 添加新的数据记录
userStore.add({
    name: 'John',
    email: '[e-mail]'
});

// 将新增的数据同步至数据源
userStore.sync();

在上述代码中，我们首先定义了一个数据模型 UserModel，这个模型代表一条用户数据记录，包含 id、name 和 email 字段。接着，我们创建了一个数据源 userStore，将数据模型和数据源进行了关联，并指定了数据源的代理类型为 REST，URL 为 '/users'。

最后，我们通过调用 userStore.add() 将一条新的数据记录添加进数据源中，并通过调用 userStore.sync() 方法将新增的数据同步至数据源中。

删除数据

在 ExtJS 中，我们可以通过 Ext.data.Store.remove() 方法从数据源中删除数据。具体演示代码如下所示：

// 删除指定的数据记录
var record = userStore.getById(1); // 假设要删除 id=1 的记录
if (record) {
    userStore.remove(record);
    userStore.sync();
}

在上述代码中，我们首先通过调用 userStore.getById() 方法获取到 id=1 的数据记录，然后通过调用 userStore.remove() 将记录删除，最后通过调用 userStore.sync() 方法将删除操作同步至数据源中。

修改数据

在 ExtJS 中，我们可以通过修改 Ext.data.Model 中的属性来修改数据记录。具体演示代码如下所示：

// 修改指定的数据记录
var record = userStore.getById(1); // 假设要修改 id=1 的记录
if (record) {
    record.set('name', 'Tom');
    userStore.sync();
}

在上述代码中，我们首先通过调用 userStore.getById() 方法获取到 id=1 的数据记录，然后通过调用 record.set() 方法修改 name 属性的值为 'Tom'，最后通过调用 userStore.sync() 方法将修改操作同步至数据源中。

查询数据

在 ExtJS 中，我们可以通过 Ext.data.Store.load() 方法从数据源中加载数据。这个方法会自动将数据缓存至本地，供后续操作使用。具体演示代码如下所示：

// 加载数据
userStore.load({
    callback: function(records, operation, success) {
        // 显示加载结果
        if (success) {
            console.log('加载成功！');
            console.log(records);
        } else {
            console.log('加载失败：', operation.getError());
        }
    }
});

在上述代码中，我们通过调用 userStore.load() 方法从数据源中加载数据，这个方法接受一个回调函数作为参数。回调函数会在数据加载完成后被执行，我们可以在这个函数中处理加载结果。如果加载成功，回调函数的第二个参数 operation 中会包含记录集合 records，我们可以通过打印 records 查看加载的结果。如果加载失败，我们可以通过调用 operation.getError() 方法获取到错误原因。

这就是 ExtJS 常用到的增、删、改、查操作的完整攻略。通过上述演示代码的学习，您应该已经掌握了相关的操作方法。