使用ExtJS 4动态更改Store内容

在ExtJS 4中，我们可以通过更改Store的内容来实现动态更新应用程序数据的目的。Store代表了应用程序中的数据集合，它可以从服务器加载数据，并根据需要进行增删改查操作。在本篇博客中，我们将重点介绍如何动态更改Store里面的内容，并提供一些相关示例代码。

动态添加数据

在ExtJS 4中，我们可以使用Store的add方法向数据集中动态添加一条或多条记录。假设我们有一个名为userStore的Store，现在我们要向其中添加一条用户记录。可以按照以下步骤进行操作：

var userStore = Ext.create('Ext.data.Store', {
    fields: ['name', 'age'],
    data: [
        {name: 'Alice', age: 25},
        {name: 'Bob', age: 30}
    ]
});

var newUser = Ext.create('User', {
    name: 'Carol',
    age: 35
});

userStore.add(newUser);

上述代码通过创建一个名为userStore的Store，并定义了数据模型的字段。然后，我们创建一个名为newUser的新用户记录，并将其添加到userStore中。

动态删除数据

同样地，我们可以使用Store的remove方法来动态删除数据集中的记录。假设我们要删除userStore中名为"Bob"的用户记录。可以按照以下步骤进行操作：

var usersToRemove = userStore.query('name', 'Bob');
userStore.remove(usersToRemove.getRange());

上述代码通过查询name字段为"Bob"的记录，并将其从userStore中删除。

动态更新数据

如果我们想要更新已存在的记录，可以使用Store的sync方法先将更改同步到服务器，然后再使用store的load方法重新加载数据。假设我们要将userStore中的名为"Alice"的用户的年龄更新为28岁。可以按照以下步骤进行操作：

var userToUpdate = userStore.findRecord('name', 'Alice');
userToUpdate.set('age', 28);

userStore.sync({
    success:function(){
        userStore.load();
    }
});

上述代码中，我们通过查询name字段为"Alice"的记录，将其年龄属性更新为28岁。然后，我们使用store的sync方法将更改保存到服务器，并在成功回调函数中重新加载数据。

结论

通过使用ExtJS 4提供的方法和属性，我们可以轻松地对Store中的数据进行增删改查操作。动态更改Store内容是构建复杂应用程序时经常遇到的需求，本文提供了一些简单易懂的示例代码，供读者参考。希望本篇博客能帮助您更好地理解和运用ExtJS 4中的Store功能。

参考资料：

• ExtJS 4官方文档