ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

ExtJS-数据处理-配置Store增删改查操作实例

2022-07-16 08:35:12  阅读：192  来源： 互联网

标签：改查 Id Ext Store var model ExtJS store


更新记录
2022年7月16日 发布。
2022年7月6日 从笔记迁移到博客。

ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html

实例-Store增删改查操作

实例：Store查-获得数据条数

使用store实例的count方法即可

var store = Ext.create('Ext.data.Store',{
    fields: [
        'userName',
        'code'
    ],
    data: [  //直接内联数据
        ['Panda', 666],
        ['Dog', 888],
        ['Cat', 222]
    ]
});
console.log(store.count());

实例：Store查-获得第一条记录数据

使用Store实例的first()方法即可，取得的是Model的实例，可以用Model的方法

var store = Ext.create('Ext.data.ArrayStore',{
    fields: [
        'userName',
        'code'
    ],
    data: [
        ['Panda', 666],
        ['Dog', 888],
        ['Cat', 222]
    ]
});

console.log(store.first().get('userName')); //Panda
console.log(store.first().get('code'));     //666

//获得第一条数据（使用data属性）（不建议）
console.log(store.first().data);

实例：Store查-读取最后一条数据

var store = Ext.create('Ext.data.ArrayStore',{
    fields: [
        'userName', 'code'
    ],
    data: [
        ['Panda', 666],
        ['Dog', 888],
        ['Cat', 222]
    ]
});

//获得最后一条数据
console.log(store.last().get('userName')); //Cat
console.log(store.last().get('code'));     //222

//获得最后一条数据（使用data属性）（不建议）
console.log(store.last().data);

实例：Store查-读取数据通过记录索引值

使用Store实例的getAt()方法即可

//测试用的Model
Ext.define('PandaApp.model.User', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'Name', type: 'string' }
    ]
});

//测试用的Store
var store = Ext.create('Ext.data.Store', {
    model: 'PandaApp.model.User',
});

//新建model的实例记录
var user1 = Ext.create('PandaApp.model.User', {
    Id : 666,
    Name : 'Panda'
});
var user2 = Ext.create('PandaApp.model.User', {
    Id : 888,
    Name : 'dog'
});
var user3 = Ext.create('PandaApp.model.User', {
    Id : 999,
    Name : 'Monkey'
});
//添加数据到Store中
store.add([user1,user2,user3]);

//通过索引值取得记录
var record = store.getAt(2);

//同步到后端
store.sync();

实例：Store查-读取数据通过记录索引范围

使用getRange()方法
注意：返回的是一个数组类型

//测试用的Model
Ext.define('PandaApp.model.User', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'Name', type: 'string' }
    ]
});

//测试用的Store
var store = Ext.create('Ext.data.Store', {
    model: 'PandaApp.model.User',
});

//新建model的实例记录
var user1 = Ext.create('PandaApp.model.User', {
    Id : 666,
    Name : 'Panda'
});
var user2 = Ext.create('PandaApp.model.User', {
    Id : 888,
    Name : 'dog'
});
var user3 = Ext.create('PandaApp.model.User', {
    Id : 999,
    Name : 'Monkey'
});
//添加数据到Store中
store.add([user1,user2,user3]);

//通过索引值取得记录
var records = store.getRange(0,2);
//因为是数组，所以使用Ext.each
Ext.each(records,function(record, index){
    console.log(record);
});
//同步到后端
store.sync();

实例：Store查-读取数据通过模型的Id

注意：这里的Id指的是模型的Id

//测试用的Model
Ext.define('PandaApp.model.User', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'Name', type: 'string' }
    ]
});

//测试用的Store
var store = Ext.create('Ext.data.Store', {
    model: 'PandaApp.model.User',
});

//新建model的实例记录
var user1 = Ext.create('PandaApp.model.User', {
    Id : 666,
    Name : 'Panda'
});
var user2 = Ext.create('PandaApp.model.User', {
    Id : 888,
    Name : 'dog'
});
var user3 = Ext.create('PandaApp.model.User', {
    Id : 999,
    Name : 'Monkey'
});
//添加数据到Store中
store.add([user1,user2,user3]);

//通过模型的Id取得记录
var record = store.getById(888);
console.log(record);

//同步到后端
store.sync();
实例：Store查-查找记录数据的索引值通过记录字段值
使用Store实例的find()方法
//测试用的Model
Ext.define('PandaApp.model.User', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'Name', type: 'string' }
    ]
});

//测试用的Store
var store = Ext.create('Ext.data.Store', {
    model: 'PandaApp.model.User',
});

//新建model的实例记录
var user1 = Ext.create('PandaApp.model.User', {
    Id : 666,
    Name : 'Panda'
});
var user2 = Ext.create('PandaApp.model.User', {
    Id : 888,
    Name : 'dog'
});
var user3 = Ext.create('PandaApp.model.User', {
    Id : 999,
    Name : 'Monkey'
});

//添加数据到Store中
store.add([user1,user2,user3]);

//查找记录数据通过记录字段值
var recordIndex = store.find('Name','dog');
console.log(store.getAt(recordIndex));

实例：Store查-查找记录数据通过记录字段值

使用Store实例的findRecord()方法

//测试用的Model
Ext.define('PandaApp.model.User', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'Name', type: 'string' }
    ]
});

//测试用的Store
var store = Ext.create('Ext.data.Store', {
    model: 'PandaApp.model.User',
});

//新建model的实例记录
var user1 = Ext.create('PandaApp.model.User', {
    Id : 666,
    Name : 'Panda'
});
var user2 = Ext.create('PandaApp.model.User', {
    Id : 888,
    Name : 'dog'
});
var user3 = Ext.create('PandaApp.model.User', {
    Id : 999,
    Name : 'Monkey'
});

//添加数据到Store中
store.add([user1,user2,user3]);

//查找记录数据通过记录字段值
var record = store.findRecord('Name','dog');
console.log(record);

实例：Store查-查找记录数据通过自定义方法

使用Store实例的findBy()方法
注意：返回的是记录的索引值

//测试用的Model
Ext.define('PandaApp.model.User', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'Name', type: 'string' }
    ]
});

//测试用的Store
var store = Ext.create('Ext.data.Store', {
    model: 'PandaApp.model.User',
});

//新建model的实例记录
var user1 = Ext.create('PandaApp.model.User', {
    Id : 666,
    Name : 'Panda'
});
var user2 = Ext.create('PandaApp.model.User', {
    Id : 888,
    Name : 'dog'
});
var user3 = Ext.create('PandaApp.model.User', {
    Id : 999,
    Name : 'Monkey'
});

//添加数据到Store中
store.add([user1,user2,user3]);

//查找记录数据通过记录字段值
var recordIndex = store.findBy(function(record){
    return record.get('Name') == 'Monkey';
});

console.log(store.getAt(recordIndex));

实例：Store查-遍历读取记录数据

使用Store实例的each()方法即可

//测试用的Model
Ext.define('PandaApp.model.User', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'Name', type: 'string' }
    ]
});

//测试用的Store
var store = Ext.create('Ext.data.Store', {
    model: 'PandaApp.model.User',
});

//新建model的实例记录
var user1 = Ext.create('PandaApp.model.User', {
    Id : 666,
    Name : 'Panda'
});
var user2 = Ext.create('PandaApp.model.User', {
    Id : 888,
    Name : 'dog'
});
var user3 = Ext.create('PandaApp.model.User', {
    Id : 999,
    Name : 'Monkey'
});

//添加数据到Store中
store.add([user1,user2]);
//插入数据到Store中
store.insert(0,user3);

//计算条数
console.log(store.count()); //3

//遍历Store获得每条记录
store.each(function(record, index){
    //record表示每条记录
    console.log(record);
    //index表示记录在Store内的索引号
    console.log(index);
});

//同步到后端
store.sync();

实例：Store改-修改记录的数据

就是Model的操作方法而已

//获得Store中的第一条数据
var firstEmployee = employeeStore.first();
//修改第一条数据的内容
firstEmployee.set('firstName', 'Anita');
firstEmployee.set('lastName', 'Andresen');
//同步到后端
employeeStore.sync();

实例：Store增-添加记录数据

使用Store实例的add方法

//测试用的Model
Ext.define('PandaApp.model.User', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'Name', type: 'string' }
    ]
});

//测试用的Store
var store = Ext.create('Ext.data.Store', {
    model: 'PandaApp.model.User',
});

//新建model的实例记录
var user1 = Ext.create('PandaApp.model.User', {
    Id : 666,
    Name : 'Panda'
});
var user2 = Ext.create('PandaApp.model.User', {
    Id : 888,
    Name : 'dog'
});

//添加数据到Store中（单条）
store.add(user1);
store.add(user2);

//添加数据到Store中（多条）
store.add([user1,user2]);

//计算条数
console.log(store.count()); //2
//同步到后端
store.sync();

实例：Store增-插入记录数据

使用Store实例的insert()方法即可

//测试用的Model
Ext.define('PandaApp.model.User', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'Name', type: 'string' }
    ]
});

//测试用的Store
var store = Ext.create('Ext.data.Store', {
    model: 'PandaApp.model.User',
});

//新建model的实例记录
var user1 = Ext.create('PandaApp.model.User', {
    Id : 666,
    Name : 'Panda'
});
var user2 = Ext.create('PandaApp.model.User', {
    Id : 888,
    Name : 'dog'
});
var user3 = Ext.create('PandaApp.model.User', {
    Id : 999,
    Name : 'Monkey'
});

//添加数据到Store中
store.add([user1,user2]);

//插入数据到Store中
store.insert(0,user3);

//计算条数
console.log(store.count()); //3

//同步到后端
store.sync();

实例：Store删-删除记录数据-通过记录引用

使用Store实例的remove()方法即可
支持删除单个记录和多个记录

//测试用的Model
Ext.define('PandaApp.model.User', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'Name', type: 'string' }
    ]
});

//测试用的Store
var store = Ext.create('Ext.data.Store', {
    model: 'PandaApp.model.User',
});

//新建model的实例记录
var user1 = Ext.create('PandaApp.model.User', {
    Id : 666,
    Name : 'Panda'
});
var user2 = Ext.create('PandaApp.model.User', {
    Id : 888,
    Name : 'dog'
});
var user3 = Ext.create('PandaApp.model.User', {
    Id : 999,
    Name : 'Monkey'
});
//添加数据到Store中
store.add([user1,user2,user3]);

//删除单条记录数据
var record = store.remove(user3);
//删除多条记录数据
var record = store.remove([user1,user2]);

console.log(store.count());

//同步到后端
store.sync();

实例：Store删-删除记录数据-通过索引值

//测试用的Model
Ext.define('PandaApp.model.User', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'Name', type: 'string' }
    ]
});

//测试用的Store
var store = Ext.create('Ext.data.Store', {
    model: 'PandaApp.model.User',
});

//新建model的实例记录
var user1 = Ext.create('PandaApp.model.User', {
    Id : 666,
    Name : 'Panda'
});
var user2 = Ext.create('PandaApp.model.User', {
    Id : 888,
    Name : 'dog'
});
var user3 = Ext.create('PandaApp.model.User', {
    Id : 999,
    Name : 'Monkey'
});
//添加数据到Store中
store.add([user1,user2,user3]);

//删除记录数据通过索引值
var removeRecord = store.removeAt(2);
// store.each(function(record, index){
//     console.log(record);
//     console.log(index);
// });

console.log(store.count());

//同步到后端
store.sync();

实例：Store删-删除所有记录数据

使用removeAll()方法

//测试用的Model
Ext.define('PandaApp.model.User', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'Name', type: 'string' }
    ]
});

//测试用的Store
var store = Ext.create('Ext.data.Store', {
    model: 'PandaApp.model.User',
});

//新建model的实例记录
var user1 = Ext.create('PandaApp.model.User', {
    Id : 666,
    Name : 'Panda'
});
var user2 = Ext.create('PandaApp.model.User', {
    Id : 888,
    Name : 'dog'
});
var user3 = Ext.create('PandaApp.model.User', {
    Id : 999,
    Name : 'Monkey'
});
//添加数据到Store中
store.add([user1,user2,user3]);

//删除记录数据(所有)
var removeRecord = store.removeAll();

console.log(store.count()); //0

//同步到后端
store.sync();

标签：改查,Id,Ext,Store,var,model,ExtJS,store
来源： https://www.cnblogs.com/cqpanda/p/16452735.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有