Extjs中创建Store数据源的方式
程序员文章站
2022-05-13 14:12:02
...
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
}
效果如下：
