Extjs中创建Store数据源的方式

最新推荐文章于 2022-06-23 16:03:37 发布
最新推荐文章于 2022-06-23 16:03:37 发布
阅读量4.2k 收藏 4
点赞数
分类专栏： JavaScript 文章标签： extjs
Store简要说明请查看：http://extjs.org.cn/node/564

一.本地数据源

1.数组格式的数据：data只能是数组!——不能用JsonStore,否则报错！

01var arrStore = new Ext.data.SimpleStore({
02    data:[
03        /*{id:1,name:"zs",age:22},
04        {id:2,name:"ls",age:23},
05        {id:3,name:"ww",age:24}*/注释掉的是json格式的，只能用JsonStore
06        [1,"zs",22],
07        [2,"ls",23],
08        [3,"ww",24]
09    ],
10    fields:["id","name","age"]
11});

 

 

2.JSON格式的数据：data只能是json!——不能用SimpleStore,也不能用父类Store,否则报错!

1var jsonStore = new Ext.data.JsonStore({
2    data:[
3        {id:1,name:"zs",age:22},
4        {id:2,name:"ls",age:23},
5        {id:3,name:"ww",age:24}
6    ],
7    fields:["id","name","age"]
8});

 

fields类型：

 

实例分析：

01//1.设置数据源
02var jsonStore = new Ext.data.JsonStore({
03    data:[
04        {id:1,name:"zs",age:22},
05        {id:2,name:"ls",age:23},
06        {id:3,name:"ww",age:24}
07    ],
08    fields:["id","name","age"]
09});
10 
11//2.定义列
12var cm = new Ext.grid.ColumnModel({
13    columns:[
14        {
15            header:"编号",
16            dataIndex:"id",
17            width:100,
18            sortable:true
19        },{
20            header:"姓名",
21            dataIndex:"name",
22            width:100,
23            sortable:true
24        },{
25            header:"年龄",
26            dataIndex:"age",
27            width:100,
28            sortable:true
29        }
30    ]
31});
32 
33 
34 
35//4.创建表格面板
36var grid = new Ext.grid.GridPanel({
37    cm:cm,
38    store:jsonStore,
39    height:80,
40    tbar:[
41        {
42            text:"增加项目",
43            iconCls:"add",
44            handler:function(){
45                addWin.show();
46            }
47        },{
48            text:"修改",
49            iconCls:"edit"
50        },{
51            text:"删除",
52            iconCls:"remove"
53        }
54    ]
55});
56 
57 
58Ext.onReady(function(){
59    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
60    Ext.QuickTips.init();
61    new Ext.Viewport({
62        layout: 'fit',
63        items: [grid]
64    });
65});

注意事项：

column中的dataIndex对应的就是fields中的字段

 

效果：



 

 

 

二.后台获取数据源

1.JsonStore：Ext.data.JsonStore ——只能用结合式的 url + root + fields 形式!!!

(注：API中只有结合式的写法，用proxy,reader分离式写法经测试无法解析数据！)

正确写法：

1var epStore = new Ext.data.JsonStore({
2    autoLoad: true,
3    url:"getEProject.eva?doType=getEProject",
4    root:"data",
5    fields: ["project","company"]
6});
错误写法：（此时，若将JsonStore换成其父类Store则可以正确解析！）
01var epProxy = new Ext.data.HttpProxy({
02    url:"getEProject.eva?doType=getEProject"
03});
04 
05var epReader = new Ext.data.JsonReader({
06    root:"data",
07    fields: ["project","company"]
08});
09 
10var epStore = new Ext.data.JsonStore({//此处若换成父类Store则解析正确
11    autoLoad: true,
12    proxy:epProxy,
13    reader:epReader
14});
 

 

2.Store：Ext.data.Store

方式一：结合式定义

01var xmmcStore = new Ext.data.Store({
02    proxy:  new Ext.data.HttpProxy({
03                url:'getXmmc.eva?doType=getXmmc'
04            }),
05    /*注：此处用url代替proxy也是可以的,如下：
06    url:'getXmmc.eva?doType=getXmmc',
07    但是绝对不要用proxy:'getXmmc.eva?doType=getXmmc'这种形式！！！*/
08    reader: new Ext.data.JsonReader({
09                root: 'data'
10            },[
11                { name: 'id' },
12                { name: 'name'}
13            ])
14});
15 
16//此处也可将reader中的fields换简便方式定义，如下：
17var xmmcStore = new Ext.data.Store({
18    proxy:  new Ext.data.HttpProxy({
19                url:'getXmmc.eva?doType=getXmmc'
20            }),
21    reader: new Ext.data.JsonReader(
22            {root: 'data'},
23            ['id','name']
24    )
25});
26 
27//proxy换成url形式：
28var xmmcStore = new Ext.data.Store({
29    url:'getXmmc.eva?doType=getXmmc',
30    reader: new Ext.data.JsonReader(
31            {root: 'data'},
32            ['id','name']
33    )
34});
 

 

 方式二：分离式定义

01var itemProxy = new Ext.data.HttpProxy({
02    url:"getItem.eva?doType=getItem"
03});
04var itemReader = new Ext.data.JsonReader(
05    {
06        root:"data"
07    },[
08        {"name":"company"},
09        {"name":"department"}
10]);
11var itemStore = new Ext.data.Store({
12    proxy:itemProxy,
13    reader:itemReader
14});
15 
16此处也可将reader中的fields换简便方式定义，如下：
17var itemReader = new Ext.data.JsonReader(
18    {root:"data"},
19    ["company","department"]
20);
 

方式三：带Record形式：

01/**方式一：分离式 Proxy + Reader */
02 
03/*1.创建Record*/
04var costRecord = new Ext.data.Record.create([
05    {name:"id",type:"int"},
06    {name:"xmid",type:"int"},
07    {name:"subject",type:"string"},
08    {name:"planCost",type:"string"},
09    {name:"actualCost",type:"string"}
10]);
11/*2.创建Proxy*/
12var costProxy=new Ext.data.HttpProxy({
13    url:'getProjectCost.eva?doType=getProjectCost',
14    timeout:90000
15});
16/*3.创建Reader*/
17var costReader = new Ext.data.JsonReader({
18    root:"data"
19},costRecord);
20/*4.创建Store*/
21var costStore = new Ext.data.Store({
22    proxy:costProxy,
23    reader: costReader
24});
25 
26 
27/**方式二：结合式 Proxy + Reader */
28 
29/*1.创建Record*/
30var costRecord = new Ext.data.Record.create([
31    {name:"id",type:"int"},
32    {name:"xmid",type:"int"},
33    {name:"subject",type:"string"},
34    {name:"planCost",type:"string"},
35    {name:"actualCost",type:"string"}
36]);
37/*2.创建Store*/
38var costStore = new Ext.data.Store({
39    proxy:new Ext.data.HttpProxy({
40            url:'getProjectCost.eva?doType=getProjectCost',
41            timeout:90000
42        }),
43    reader: new Ext.data.JsonReader({
44        root:"data"
45    },costRecord)
46});
47 
48 
49/**方式三：url + reader */
50 
51/*1.创建Record*/
52var costRecord = new Ext.data.Record.create([
53    {name:"id",type:"int"},
54    {name:"xmid",type:"int"},
55    {name:"subject",type:"string"},
56    {name:"planCost",type:"string"},
57    {name:"actualCost",type:"string"}
58]);
59/*2.创建Store*/
60var costStore = new Ext.data.Store({
61    url:"getProjectCost.eva?doType=getProjectCost",
62    reader: new Ext.data.JsonReader({
63        root:"data"
64    },costRecord)
65});
66 
67 
68/**方式四：直接创建 JsonStore!*/————注意：这种方式只能用JsonStore,不能用父类Store
69var costStore = new Ext.data.JsonStore({
70    url:"getProjectCost.eva?doType=getProjectCost",
71    root:"data",
72    fields:["id","xmid","subject","planCost","actualCost"]
73});

 注：url + root + fields的方式四，只能用JsonStore,不能用Store!!!

 

 

实例分析：

1.将方式一的Store放到下拉选中

2.在下拉选选中某项时加载方式二的Store

3.将加载后的数据放到文本框中显示出来

(1).创建下拉选，并监听选中事件，加载第二个store

01var xmmcCombox = new Ext.form.ComboBox({
02    fieldLabel:"项目名称",
03    store:xmmcStore,
04    displayField:"name",
05    valueField:"id",
06    triggerAction:"all",
07    emptyText:"请选择",
08    editable:false,
09    listeners:{
10        /*"expand":function(){
11            xmmcStore.load();
12        },*/
13        "select":function(obj, record){
14            itemStore.baseParams.xmid = record.get('id');
15            itemStore.load();
16        }
17    }
18});
 注：Store的传参赋值方式：store.baseParams.id/name/... = ......

 

(2).创建form表单：

01var addForm = new Ext.FormPanel({
02    frame: true,
03    labelWidth: 80,
04    //labelAlign: "right",
05    //buttonAlign:"center",
06    items:[
07        xmmcCombox,
08        {  
09            name:"xmdw",
10            xtype:"textfield",
11            fieldLabel:"项目单位",
12            readOnly:true,
13            width:200
14        },{
15            name:"depart",
16            xtype:"textfield",
17            fieldLabel:"主管部门",
18            readOnly:true,
19            width:200
20        }
21    ]
22});
 

 

(3).将第二个Store加载后的数据放到文本框中：

1itemStore.on('load', function (store, record, options) {
2    var comp = record[0].get("company");
3    var dept = record[0].data.department;
4    addForm.getForm().findField("xmdw").setValue(comp);
5    addForm.getForm().findField("depart").setValue(dept);
6});
注意事项：

1.文本框赋值方式：

1getForm().findField("").setValue("")
2.在Store中取record：
(1).取总记录records：store.data  (注，此时若要取某下标记录，还得用records.get(i))
(2).取指定下标的record：store.getAt(i)  (注：不是get(i)或者getById(i))
2.在record中取值方式：
(1).record.data.name
(2).record.data["name"]
(3).record.get("name")   (注意：这里比前两种少了data)
分析：record是一个数组，所以取值要用get，而record.data已经是一个对象了，所以可以直接用“.”
详情请参照：http://blog.csdn.net/liu78778/article/details/3942990
 

后台返回数据如下：

xmmcStore:

1data: [{id:4, name:百年老字手工豆腐火锅}, {id:5, name:光伏节能减排照明系统}]

itemStore:

1data: [{department:商贸局 农业局 , company:一号企业}]
 注意事项：

1.返回的数据中的data即定义的JsonReader中的root

2.返回的数据的data后面必须是json数据的数组！就算只有一条数据也得用数组形式返回。

3.文本框不可编辑方式有2种： readOnly:true或 disable:true
4.要显示非文本框样式，则加上一句：style:'background:none;border:0px;',
01{  
02    name:"xmdw",
03    xtype:"textfield",
04    fieldLabel:"项目单位",
05    readOnly:true,
06    style:'background:none;border:0px;',
07    width:200
08},{
09    name:"depart",
10    xtype:"textfield",
11    fieldLabel:"主管部门",
12    readOnly:true,
13    style:'background:none;border:0px;',
14    width:200
15}
 
效果如下：

 

 

 

 

 
Aurora Polaris
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
extjs动态生成model、store、panel
07-19
extjs动态生成model、store、panel；sql拼接等多种技术难点
ExtJS Store的数据访问与更新问题
12-04
排序可以使用`sort`方法，如果数据源支持远程排序，只需提供排序字段和方向即可。 总的来说，ExtJS Store提供了全面的数据管理功能，包括添加、删除、更新和组织数据，以及变更跟踪和数据同步，是构建数据驱动的Web...
Ext.data专题四：Ext.data.Store
天将降大任于斯人也
03-05 4064
Ext.data专题四：Ext.data.StoreExt.data.Store是EXT中用来进行数据交换和数据交互的标准中间件，无论是Grid还是ComboBox，都是通过它实现数据读取、类型转换、排序分页和搜索等操作的。Ext.data.Store中有一个Ext.data.Record数组，所有数据都存放在这些Ext.data. Record实例中，为后面的读取和修改操作做准备
Ext.js create store
weixin_33953249的博客
11-19 118
ext.js动态弹窗的时候 窗口的store也是临时创建的，为了能够让store与弹窗同时销毁，必须在create的时候加一个属性:autoDestroy:true Ext.create('Tour.store.ticket.Ticket',{autoDestroy:true}); 转载于:https://www.cnblogs.com/manyiString/p/4107581....
ExtJs教程----创建Store
早起吃虫的博客
09-06 484
创建Store Ext.define('common.EnterpriseLevel', { extend: 'Ext.data.Store', alias: 'widget.EnterpriseLevel', autoLoad: true, autoSync: false, model: 'model.CustomerModel', prox
storebar extjs通过store实现toolbar
05-11
1. 创建`Store`：定义一个`Store`实例，配置数据源（如URL）、数据模型（`Model`）以及数据加载的相关参数。 ```javascript var myStore = Ext.create('Ext.data.Store', { model: 'MyModel', proxy: { type: '...
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
10-27
本教程将深入讲解如何在EXTJS 4.0中设置 `Ext.data.Store` 的请求方式，特别是如何将其从默认的 GET 更改为 POST。 首先，创建一个 `Ext.data.Store` 实例，你需要定义其配置项，包括数据模型（model）、自动加载...
ExtJs4.1中文API离线BS版
10-25
ExtJS 4.1还支持Ext Designer，这是一款图形化的设计工具，允许开发者通过拖放方式创建和编辑UI，大大提高了开发效率。 9. **性能优化**： 在4.1版本中，ExtJS团队对框架进行了大量性能优化，包括减少DOM操作、...
简单的两种Extjs formpanel加载数据的方式
12-12
formpanel数据源是单独的，则store传入到formpanel页面后，还需要手动将formpanel中的每个控件用value赋值，形如： 代码如下:<span xss=removed>{ xtype: “textarea”, fieldLabel: “备注说明”, 
ext--创建store
11-05 105
　　如何通讯?通过ajax,获取到的数据如何管理?大多数时候我会认为,完全没有必要,通过ajax获取数据以后,整个流程就已经结束了... 　　在基础数据维护或者大多数后台管理系统中,登陆的目的就是为了增删改,单独用ajax时,对于数据的修改,依赖于额外引入的一个变量'data'或者将其置入一个容器form,通过form.submit自动获取所需要修改的数据...另一种更为oo的方式就是...
Extjs4 创建Store
xs_zgsc的专栏
11-04 2685
//直接创建Store 不根据View层的字段。 new Ext.create('Ext.data.Store', { storeId: "FontColorStore", fields: [{ name: 'name', type: "string"
ExtJS中创建Store的方法
热门推荐
thtwinj2ee的专栏
04-18 1万+
第一次弄EXTJS的时候就在远程加载XML数据的时候给卡住了。做了N多个例子，百度N回都弄不出来，当时就停下来了。因为后来一直没有时间去学,所以之后对EXTJS一直有一种恐惧感!!!!!!! 现在看着别人用EXTJS做的东西确实好。而自己也觉得如果真的能够不需要美工的帮忙就能够完成一套界面漂亮的东西，那也是很让人兴奋的事情。于是自己又开始从头再来，继续学习ExtJS。不过还是在远程加载数据的时
Extjs-动态拼装Store
luckycz的博客
07-20 721
动态拼装ArrayStore 1:定义Store var result = [];//数据 var fieldStr = [];//列名 var store = Ext.create('Ext.data.ArrayStore', { fields : fieldStr, data : result
Extjs Store使用
Gavin的专栏
06-09 305
http://heshencao.iteye.com/blog/476431
Extjs7.0.0——Store篇
qq_41555595的博客
06-23 1078
关于 Extjs 中 Ext.data.Store的使用体会。
Extjs4 store定义
weixin_30240349的博客
10-14 59
1 Ext.define('Keer.ext.store.ExhibitionCategoryStore',{ 2 extend: 'Ext.data.Store', 3 model: 'Keer.ext.model.ExhibitionCategoryModel', 4 pageSize: 20, 5 remoteSort: true, ...
Ext.js 数据
qq_36987708的博客
01-14 291
数据包用于加载和保存应用程序中的所有数据。 数据包有许多类，但最重要的类是: 模态 商店 代理   模型 model的基类是Ext.data.Model.It表示应用程序中的一个实体。 它将存储数据绑定到视图。 它有后端数据对象到视图dataIndex的映射。 在store的帮助下获取数据。   创建模型 为了创建一个模型，我们需要扩展Ext.data.Model类，我们需要定义...
extjs6的数据源store怎样去传参数
最新发布
04-05
在ExtJS6中，可以通过以下方式向Store传递参数： 1. 使用load方法传递参数 ``` store.load({ params: { param1: 'value1', param2: 'value2' } }); ``` 2. 在创建store时，使用extraParams配置项传递参数 ``...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值