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"]
);

 
方式3: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の方法4、JsonStoreしか使えない、Storeは使えない!!!
 
 
インスタンス分析:
1.方法1のStoreをドロップダウンで選択
2.ドロップダウンでアイテムを選択したときのロード方法2のStore
3.ロードしたデータをテキストボックスに表示する
(1).ドロップダウン選択を作成し、選択したイベントをリスニングし、2番目の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).2番目の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でレコードを取得するには:
(1).合計レコードを取得するdata(注、この場合下付きレコードを取るにはrecords.get(i))
(2).下付きのレコードを指定します:store.getAt(i)(注:get(i)またはgetById(i)ではありません)
2.recordで値を取る方法:
(1).record.data.name
(2).record.data["name"]
(3).record.get(「name」)
分析:recordは配列なので、getを使用して値を取り、recordを使用します.dataはもう1つのオブジェクトなので、直接「.」を使うことができます.
詳細は以下を参照してください.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データの配列が必要です!1つのデータだけでも配列形式で返さなければなりません.
3.テキストボックスの編集不可方式は2種類あります.
readOnly:trueまたは
disable:true(注:ComboxはreadOnly、disable、editableの3種類ある)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
}

 
効果は次のとおりです.