Extjs中创建Store数据源的方式

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("")

后台返回数据如下：

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
}

效果如下：

Extjs中创建Store数据源的方式

猜你喜欢