Store简要说明请查看:http://extjs.org.cn/node/564
一.本地数据源
1.数组格式的数据:data只能是数组!——不能用JsonStore,否则报错!
var arrStore = new Ext.data.SimpleStore({
data:[
/*{id:1,name:"zs",age:22},
{id:2,name:"ls",age:23},
{id:3,name:"ww",age:24}*/注释掉的是json格式的,只能用JsonStore
[1,"zs",22],
[2,"ls",23],
[3,"ww",24]
],
fields:["id","name","age"]
});
2.JSON格式的数据:data只能是json!——不能用SimpleStore,也不能用父类Store,否则报错!
var jsonStore = new Ext.data.JsonStore({
data:[
{id:1,name:"zs",age:22},
{id:2,name:"ls",age:23},
{id:3,name:"ww",age:24}
],
fields:["id","name","age"]
});
fields类型:
实例分析:
//1.设置数据源
var jsonStore = new Ext.data.JsonStore({
data:[
{id:1,name:"zs",age:22},
{id:2,name:"ls",age:23},
{id:3,name:"ww",age:24}
],
fields:["id","name","age"]
});
//2.定义列
var cm = new Ext.grid.ColumnModel({
columns:[
{
header:"编号",
dataIndex:"id",
width:100,
sortable:true
},{
header:"姓名",
dataIndex:"name",
width:100,
sortable:true
},{
header:"年龄",
dataIndex:"age",
width:100,
sortable:true
}
]
});
//4.创建表格面板
var grid = new Ext.grid.GridPanel({
cm:cm,
store:jsonStore,
height:80,
tbar:[
{
text:"增加项目",
iconCls:"add",
handler:function(){
addWin.show();
}
},{
text:"修改",
iconCls:"edit"
},{
text:"删除",
iconCls:"remove"
}
]
});
Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
Ext.QuickTips.init();
new Ext.Viewport({
layout: 'fit',
items: [grid]
});
});
注意事项:
column中的dataIndex对应的就是fields中的字段
效果:
二.后台获取数据源
1.JsonStore:Ext.data.JsonStore ——只能用结合式的 url + root + fields 形式!!!
(注:API中只有结合式的写法,用proxy,reader分离式写法经测试无法解析数据!)
正确写法:
var epStore = new Ext.data.JsonStore({
autoLoad: true,
url:"getEProject.eva?doType=getEProject",
root:"data",
fields: ["project","company"]
});
错误写法:(此时,若将JsonStore换成其父类Store则可以正确解析!)
var epProxy = new Ext.data.HttpProxy({
url:"getEProject.eva?doType=getEProject"
});
var epReader = new Ext.data.JsonReader({
root:"data",
fields: ["project","company"]
});
var epStore = new Ext.data.JsonStore({//此处若换成父类Store则解析正确
autoLoad: true,
proxy:epProxy,
reader:epReader
});
2.Store:Ext.data.Store
方式一:结合式定义
var xmmcStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url:'getXmmc.eva?doType=getXmmc'
}),
/*注:此处用url代替proxy也是可以的,如下:
url:'getXmmc.eva?doType=getXmmc',
但是绝对不要用proxy:'getXmmc.eva?doType=getXmmc'这种形式!!!*/
reader: new Ext.data.JsonReader({
root: 'data'
},[
{ name: 'id' },
{ name: 'name'}
])
});
//此处也可将reader中的fields换简便方式定义,如下:
var xmmcStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url:'getXmmc.eva?doType=getXmmc'
}),
reader: new Ext.data.JsonReader(
{root: 'data'},
['id','name']
)
});
//proxy换成url形式:
var xmmcStore = new Ext.data.Store({
url:'getXmmc.eva?doType=getXmmc',
reader: new Ext.data.JsonReader(
{root: 'data'},
['id','name']
)
});
方式二:分离式定义
var itemProxy = new Ext.data.HttpProxy({
url:"getItem.eva?doType=getItem"
});
var itemReader = new Ext.data.JsonReader(
{
root:"data"
},[
{"name":"company"},
{"name":"department"}
]);
var itemStore = new Ext.data.Store({
proxy:itemProxy,
reader:itemReader
});
此处也可将reader中的fields换简便方式定义,如下:
var itemReader = new Ext.data.JsonReader(
{root:"data"},
["company","department"]
);
方式三:带Record形式:
/**方式一:分离式 Proxy + Reader */
/*1.创建Record*/
var costRecord = new Ext.data.Record.create([
{name:"id",type:"int"},
{name:"xmid",type:"int"},
{name:"subject",type:"string"},
{name:"planCost",type:"string"},
{name:"actualCost",type:"string"}
]);
/*2.创建Proxy*/
var costProxy=new Ext.data.HttpProxy({
url:'getProjectCost.eva?doType=getProjectCost',
timeout:90000
});
/*3.创建Reader*/
var costReader = new Ext.data.JsonReader({
root:"data"
},costRecord);
/*4.创建Store*/
var costStore = new Ext.data.Store({
proxy:costProxy,
reader: costReader
});
/**方式二:结合式 Proxy + Reader */
/*1.创建Record*/
var costRecord = new Ext.data.Record.create([
{name:"id",type:"int"},
{name:"xmid",type:"int"},
{name:"subject",type:"string"},
{name:"planCost",type:"string"},
{name:"actualCost",type:"string"}
]);
/*2.创建Store*/
var costStore = new Ext.data.Store({
proxy:new Ext.data.HttpProxy({
url:'getProjectCost.eva?doType=getProjectCost',
timeout:90000
}),
reader: new Ext.data.JsonReader({
root:"data"
},costRecord)
});
/**方式三:url + reader */
/*1.创建Record*/
var costRecord = new Ext.data.Record.create([
{name:"id",type:"int"},
{name:"xmid",type:"int"},
{name:"subject",type:"string"},
{name:"planCost",type:"string"},
{name:"actualCost",type:"string"}
]);
/*2.创建Store*/
var costStore = new Ext.data.Store({
url:"getProjectCost.eva?doType=getProjectCost",
reader: new Ext.data.JsonReader({
root:"data"
},costRecord)
});
/**方式四:直接创建 JsonStore!*/————注意:这种方式只能用JsonStore,不能用父类Store
var costStore = new Ext.data.JsonStore({
url:"getProjectCost.eva?doType=getProjectCost",
root:"data",
fields:["id","xmid","subject","planCost","actualCost"]
});
注:url + root + fields的方式四,只能用JsonStore,不能用Store!!!
实例分析:
1.将方式一的Store放到下拉选中
2.在下拉选选中某项时加载方式二的Store
3.将加载后的数据放到文本框中显示出来
(1).创建下拉选,并监听选中事件,加载第二个store
var xmmcCombox = new Ext.form.ComboBox({
fieldLabel:"项目名称",
store:xmmcStore,
displayField:"name",
valueField:"id",
triggerAction:"all",
emptyText:"请选择",
editable:false,
listeners:{
/*"expand":function(){
xmmcStore.load();
},*/
"select":function(obj, record){
itemStore.baseParams.xmid = record.get('id');
itemStore.load();
}
}
});
注:Store的传参赋值方式:store.baseParams.id/name/... = ......
(2).创建form表单:
var addForm = new Ext.FormPanel({
frame: true,
labelWidth: 80,
//labelAlign: "right",
//buttonAlign:"center",
items:[
xmmcCombox,
{
name:"xmdw",
xtype:"textfield",
fieldLabel:"项目单位",
readOnly:true,
width:200
},{
name:"depart",
xtype:"textfield",
fieldLabel:"主管部门",
readOnly:true,
width:200
}
]
});
(3).将第二个Store加载后的数据放到文本框中:
itemStore.on('load', function (store, record, options) {
var comp = record[0].get("company");
var dept = record[0].data.department;
addForm.getForm().findField("xmdw").setValue(comp);
addForm.getForm().findField("depart").setValue(dept);
});
注意事项:
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:
data: [{id:4, name:百年老字手工豆腐火锅}, {id:5, name:光伏节能减排照明系统}]
itemStore:
data: [{department:商贸局 农业局 , company:一号企业}]
注意事项:
1.返回的数据中的data即定义的JsonReader中的root
2.返回的数据的data后面必须是json数据的数组!就算只有一条数据也得用数组形式返回。
3.文本框不可编辑方式有2种:readOnly:true或
disable:true
(注:Combobox有3种:readOnly、disable、editable)
4.要显示非文本框样式,则加上一句:style:'background:none;border:0px;',
{
name:"xmdw",
xtype:"textfield",
fieldLabel:"项目单位",
readOnly:true,
style:'background:none;border:0px;',
width:200
},{
name:"depart",
xtype:"textfield",
fieldLabel:"主管部门",
readOnly:true,
style:'background:none;border:0px;',
width:200
}
- 大小: 1.7 KB
- 大小: 2.9 KB
- 大小: 2.4 KB
- 大小: 4.4 KB
- 大小: 1.6 KB
- 大小: 2.1 KB
分享到:
相关推荐
ExtJS框架支持多种方式将Store中的数据绑定到界面上。常见的绑定方式包括: - **Grid Panel**: 通过Grid Panel组件可以方便地显示表格数据。 - **Form Panel**: 可以用来编辑或显示模型的字段。 - **List**: 显示...
1. 创建`Store`:定义一个`Store`实例,配置数据源(如URL)、数据模型(`Model`)以及数据加载的相关参数。 ```javascript var myStore = Ext.create('Ext.data.Store', { model: 'MyModel', proxy: { type: '...
Store是ExtJS中管理数据的容器,它可以连接到各种数据源,包括本地数据、JSON、XML等,或者通过Ajax请求从服务器获取数据。在Combox中,我们通常会配置一个与服务器交互的Store,并设置它的proxy属性为AjaxSource,...
ExtJS的数据绑定使得UI组件可以直接与数据存储关联,当数据源发生变化时,UI会自动更新。例如,一个`Ext.form.Panel`可以通过`bind`配置项与Store绑定,如`{fieldLabel: 'Name', xtype: 'textfield', bind: '{user....
此外,利用Data Binding功能,可以实现组件和数据源之间的实时同步,大大简化了数据更新的操作。 总而言之,这三份文档为开发者提供了一个全面的ExtJS学习资源库,无论你是初学者还是经验丰富的开发者,都能从中...
Store是ExtJS中用于管理数据的核心组件,它可以连接到各种数据源,如JSON、XML或远程服务器,并负责加载、处理和缓存数据。在STOREMENU中,Store通常用来存储菜单项的相关信息,如标题、链接或者图标等。 “Menu”...
- **Store**:Store是数据管理的核心,它可以连接到各种数据源,如JSON、XML或Ajax请求,负责加载、存储和更新数据。 - **Proxy**:Store通过Proxy与数据源交互,支持远程和本地数据操作。 - **Model**:定义数据...
1. **创建Grid**:配置Grid,包括列模型(ColumnModel)、数据源(Store)以及视图配置。数据源应指向SSH后台的一个RESTful服务接口。 2. **定义删除行为**:为Grid添加一个删除按钮或右键菜单,绑定删除操作。在...
2. **数据存储(Store)**:管理数据集,它可以是本地数据或远程数据,如`Ext.data.Store`,配置数据源、proxy(代理)用于与服务器通信,例如JSONP或Ajax。 3. **列模型(Column Model)**:定义Grid的列布局,`...
3. **Store和Proxy**:Store用于存储数据,Proxy负责与服务器进行数据交换,可能采用Ajax或Direct方式与后端通信。 4. **模型(Model)和元数据(Metadata)**:定义数据结构和验证规则,便于数据处理。 5. **控制...
在DataGrid组件中,动态数据绑定是指将表格的数据源与服务器上的数据实时连接,当数据发生变化时,DataGrid会自动更新显示。这种特性在处理大量或频繁更新的数据时非常有用,因为它减少了不必要的页面刷新,提高了...
2. **数据存储与远程通信**:EXTJS的`Ext.data.Store`类负责管理数据,它可以连接到各种数据源,如JSON、XML或Ajax接口。在产品级别管理中,通常会有一个专门的Store用于获取、更新和保存产品级别的数据。同时,...
总结起来,这个“Extjs treeGrid 本地数据 例子”主要展示了如何使用ExtJS创建一个基于本地数据的TreeGrid,包括设置数据源、定义数据模型、构建TreeGrid面板以及处理交互事件。通过学习这个例子,你可以掌握在Web...
7. **数据存储**:ExtJS的数据存储(Store)组件负责管理数据集,它可以与各种数据源(如JSON、XML、CSV等)交互,并提供排序、过滤、分页等功能。 8. **Ajax请求**:在与服务器通信时,ExtJS通常使用Ajax请求来...
在"extDemo"中,你可能会看到如何定义一个Store,配置它的模型(Model)以及数据源,以及如何监听数据变更事件。 接下来是"grid"。Grid是ExtJS中最常用的组件之一,用于显示二维数据,通常与Store配合使用。在"ext...
在ExtJS4中,我们首先需要创建一个Grid配置对象,定义列模型、数据源、以及任何自定义的行为。 例如,创建一个Grid的基本结构可能如下: ```javascript Ext.application({ name: 'MyApp', launch: function () {...
数据绑定允许组件与后端数据源进行实时同步。 2. **类系统**:EXTJS采用面向对象的方式组织代码,其类系统是基于Ext.Base构建的。了解类系统有助于理解EXTJS如何扩展JavaScript对象并实现复用。 3. **组件库**:...