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

分类：extjs作者：编程之家用户

更新记录
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();

原文地址：https://www.cnblogs.com/cqpanda/p/16452735.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

javascript – Delphi indy10 http服务器和ExtJS表单提交
我有一个问题,我不知道如何解决.我有一个Indy10HTTP服务器.我在许多应用程序中使用过Indy9和Indy10HTTP服务器,从未遇到任何问题.但现在我使用带有ExtJSjavascriptRAI框架的Indy10HTTP服务器.问题是当我提交包含非ansi字符的数据时.例如,当我提交1250代码页中的字母“č”(
javascript – firefox addon sdk 1.17截图
我正在使用sdk1.17开发一个Firefox附加组件.它包含一个带有按钮的面板(使用ExtJs开发),我想在用户单击按钮时拍摄当前页面的屏幕截图.在GoogleChrome中,有一个API(chrome.page-capture)就在那里.但我在Firefox中找不到类似的那个.在firefox中如何从main.js完成此任务.解决方法:哦
ECharts+ExtJs缩放与左右键菜单自定义
Ext.define('PhysicsEvaluationSystemV1.view.base.BaseCharts',{extend:'Ext.panel.Panel',xtype:'basecharts',html:'<divid="main"style="width:600px;height:400px;"></div&
ExtJS 2.2.1 实现双表头动态列
默认所有列(假设列3最大3列，动态显示)，使用headerRowsEx中的rowspan实现双表头，第一层表头的width也必须要设置正确。使用"grid.getColumnModel().setHidden"即可实现列的隐藏，也不需要动态设置colspan。{xtype:'filtergrid',id:'grid1',cm:newExt.grid.Colu
ExtJS面向对象
序言   1.ExtJs是一套很好的后台框架。现在很流行的，我们要会。    2.这是我写ExtJs的第一篇，以后会写很多直到把这框架运用的炉火纯青，走火入魔。ExtJs中的命名空间      我是做.net的，这命名空间名字一样，功能也一样，都是对项目中类进行有效的管理，区分类
javascript – ExtJs表单验证
我在ExtJs中有这个表单.如果field1不为空,则field2不能为空.但即使听众正在解雇,它也无法正常工作.{xtype:'panel',title:'title1',items:[{xtype:'fieldset',title:'fieldA',items:[{xtype:'t
javascript – 如何在ExtJS面板的标题中添加下拉列表？
我可以将HTML元素(如文本和图像)放在面板标题中,如下所示：vargrid=newExt.grid.GridPanel({region:'center',style:'margin:10px',store:newExt.data.Store({data:myData,reader:myReader}),headerCfg:{tag:
解决vscode更新后Ext Js插件无法使用问题
解决方案来至于https://www.sencha.com/forum/showthread.php?471410-Bug-in-VS-Code-Plugin-since-VS-Code-Update-(-gt-1-31)在C:\Users\你的用户名\.vscode\extensions\sencha.vscode-extjs-1.0.1\out\src文件下找到Logger.js，打开它。找到代码fs.writeFile(path.join(Platfo
extjs_05_grid(表格分组)
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%><!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"><html><head><title>MyJSP'index.jsp'
Extjs 判断对象是非为null或者为空字符串
Ext.isEmpty(str,[allowEmptyString])如果str为nullundefinedazero-lengtharrayazero-lengthstring (UnlesstheallowEmptyStringparameterissettotrue)//意思如果第二个参数设为true，则是允许str对象为空字符串该方法返回true 如果不为上面条件则返回fal
javascript – 关闭ExtJS选项卡的正确技巧
以编程方式关闭ExtJS选项卡的正确方法是什么？我需要在IE6中完成这项工作;虽然从TabPanel删除选项卡有效,但我看到IE警告：此页面包含安全和不安全的项目……当我单击选项卡上的X时,我看不到此警告.所以,当我点击X时,显然会发生一些聪明的事情.注意：当我使用tabPanel.remove(aTab,true
Extjs相关知识
1.链接1.1.零散知识链接https://blog.csdn.net/zhaojianrun/article/details/701410711.2.系统教程http://extjs.org.cn/1.3.视频教程1.4.官方网站 
javascript – ExtJS中是否有map()函数？
ExtJS有Ext.each()函数,但是有一个map()也隐藏在某个地方吗？我努力了,但没有找到任何可以填补这个角色的东西.这似乎是一件简单而微不足道的事情,一个像Ext这样庞大的JS库显然必须拥有.或者当Ext真的不包含它时,将它添加到Ext的最佳方法是什么.当然,我可以写：Ext.map=function(
javascript – 如何在野外使用Ext-JS？抽象与否？
我在一家使用Ext-JS的公司工作.该产品目前过度扩展了Ext-JS组件并覆盖了父功能.这使升级变得困难.我们正在保留Ext-JS,但我们正在考虑以非标准的方式使用它.似乎有两个阵营.在一个阵营中,成员们认为我们应该在Ext-JS之上编写一个抽象,以防我们决定在几年内改变框架,希望这样我们不
javascript – 如何计算今天和给定日期之间的天数以及getTime()的代码？
我想计算今天和给定日期之间的天数,并检查截至今天剩余的天数或今天过去的天数.vartoday=newDate();vardate_to_reply=newDate('2012-10-15');vartimeinmilisec=today.getTime()-date_to_reply.getTime();console.log(Math.floor(timeinmilisec/(1000*60*
javascript – ExtJS解码方法无法解码“文件上传后”
我将JSON格式结果发送回保存$quot符号的客户端.由于某些未知原因,代码中断了.这是来自ext-all-debug的代码：doDecode=function(json){returneval("("+json+")");FAILSHERE},这是我的JSON,因为它离开了服务器(据我所知,我希望服务器没有花时间解码这个&quot的
javascript – ExtJS：在窗口大小调整时自动调整表单字段的大小
我创建了Ext.Window,里面有一些Ext.form字段.但是当我调整窗口窗体时,元素仍然具有初始宽度和高度.是否需要在窗口大小调整时显式调整表单字段的大小？或者有一些选项可以自动调整表单字段的大小？示例代码：varf_1=newExt.form.TextField({fieldLabel:'Label1'});varf_2=n
javascript – 网格在存储记录编辑之后和提交之后丢失(可见)选择
我有一个简单的案例,我有一个附加商店的网格.有2个按钮.一个带有修改所选记录的处理程序.一个具有提交所选记录的处理程序.当我选择一个记录并推送编辑时–>编辑发生选择(看起来丢失)如果你调用grid.geSelectionModel().getSelection()你会看到记录仍然被选中.它只是没有这样显
javascript – Extjs ajax代码重构
我有这种ajax代码重复了很多地方.如何将其重构为单个方法,以便在成功或失败时仍允许不同的行为.Ext.Ajax.request({url:'ajax.php',params:{action:'getDate'},method:'GET',success:function(result,request){Ext.MessageBox.alert(
extjs基础操作
Ext.define('JsApp.com.Util',{  /**   *显示新建视图   *title：新建界面显示的标题   *xtype：新建界面的别名   */  showCreatingView:function(title,xtype){    this.shrink.formType='create';    this.shrink
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot