Extjs中创建Store数据源的方式

最新推荐文章于 2022-06-23 16:03:37 发布
最新推荐文章于 2022-06-23 16:03:37 发布
阅读量752 收藏
点赞数
分类专栏： ExtJs

Extjs中创建Store数据源的方式


分享到：
评论(0) |2014-10-21 |发布  pfan

Store简要说明请查看：http://extjs.org.cn/node/564

一.本地数据源

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

01 var 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,否则报错!

1 var 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.设置数据源
02 var 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.定义列
12 var 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.创建表格面板
36 var 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  
58 Ext.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分离式写法经测试无法解析数据！)

正确写法：

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

 

2.Store：Ext.data.Store

方式一：结合式定义

01 var 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换简便方式定义，如下：
17 var 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形式：
28 var 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 });
 

 

 方式二：分离式定义

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

方式三：带Record形式：

01 /**方式一：分离式 Proxy + Reader */
02  
03 /*1.创建Record*/
04 var 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*/
12 var costProxy=new Ext.data.HttpProxy({
13     url:'getProjectCost.eva?doType=getProjectCost',
14     timeout:90000
15 });
16 /*3.创建Reader*/
17 var costReader = new Ext.data.JsonReader({
18     root:"data"
19 },costRecord);
20 /*4.创建Store*/
21 var costStore = new Ext.data.Store({
22     proxy:costProxy,
23     reader: costReader
24 });
25  
26  
27 /**方式二：结合式 Proxy + Reader */
28  
29 /*1.创建Record*/
30 var 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*/
38 var 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*/
52 var 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*/
60 var 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
69 var 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

01 var 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表单：

01 var 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加载后的数据放到文本框中：

1 itemStore.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.文本框赋值方式：

1 getForm().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:

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

itemStore:

1 data: [{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 }
  
效果如下： 
 
  
 
  
 
  
 
  
 
 
 
系统分类： 编程语言 >>  Java

javaPie
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 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 4070
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 119
ext.js动态弹窗的时候 窗口的store也是临时创建的，为了能够让store与弹窗同时销毁，必须在create的时候加一个属性:autoDestroy:true Ext.create('Tour.store.ticket.Ticket',{autoDestroy:true}); 转载于:https://www.cnblogs.com/manyiString/p/4107581....
ext--创建store
11-05 106
　　如何通讯?通过ajax,获取到的数据如何管理?大多数时候我会认为,完全没有必要,通过ajax获取数据以后,整个流程就已经结束了... 　　在基础数据维护或者大多数后台管理系统中,登陆的目的就是为了增删改,单独用ajax时,对于数据的修改,依赖于额外引入的一个变量'data'或者将其置入一个容器form,通过form.submit自动获取所需要修改的数据...另一种更为oo的方式就是...
ExtJs教程----创建Store
早起吃虫的博客
09-06 485
创建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 对各类型store各种数据的读取 model 前台 等等
10-18
ExtJS框架支持多种方式将Store中的数据绑定到界面上。常见的绑定方式包括： - **Grid Panel**: 通过Grid Panel组件可以方便地显示表格数据。 - **Form Panel**: 可以用来编辑或显示模型的字段。 - **List**: 显示...
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操作、...
Extjs4 创建Store
xs_zgsc的专栏
11-04 2687
//直接创建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 722
动态拼装ArrayStore 1:定义Store var result = [];//数据 var fieldStr = [];//列名 var store = Ext.create('Ext.data.ArrayStore', { fields : fieldStr, data : result
Extjs Store使用
Gavin的专栏
06-09 307
http://heshencao.iteye.com/blog/476431
Extjs7.0.0——Store篇
qq_41555595的博客
06-23 1114
关于 Extjs 中 Ext.data.Store的使用体会。
Extjs4 store定义
weixin_30240349的博客
10-14 60
1 Ext.define('Keer.ext.store.ExhibitionCategoryStore',{ 2 extend: 'Ext.data.Store', 3 model: 'Keer.ext.model.ExhibitionCategoryModel', 4 pageSize: 20, 5 remoteSort: true, ...
Extjs中Ext.data.Store的多种操作详解
热门推荐
idomyway的博客
10-18 1万+
前言Store是extjs中的重中之重，贴过来，备用查询操作Store.getCount()Store.getCount()返回的是store中的所有数据记录，然后使用for循环遍历整个store，从而得到每条记录。store.each()除了使用getCount()的方法外，还可以使用each()函数，如下面的代码所示。 store.each(function(record) {
Ext Js简单Data Store创建及使用
xiaoliuyiting的博客
10-29 4048
转载：https://www.cnblogs.com/SanMaoSpace/archive/2013/02/05/2893352.html Ext Js简单Data Store创建及使用 　　不知道大家是如何学习一门新语言、一门技术或某一新鲜事物的？可能还是自己在一开始学习编程时常听到的那样，找一本基础的书看看，把书上的每一个示例都敲一遍，把书上的每一段代码都理顺。现在忙碌生活中又是如何接触...
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、付费专栏及课程。

余额充值