1. 程式人生 > >ExtJS中的TreeStore如何新增json格式的資料

ExtJS中的TreeStore如何新增json格式的資料

Ext的幫助中寫明瞭給treeStore繫結資料有兩種方式,一種是root屬性,code如下:

root:{
    expanded:true,
    text:"My Root",
    children:[{ text:"Child 1", leaf:true},{ text:"Child 2", expanded:true, children:[{ text:"GrandChild", leaf:true}]}]}

這種方式只能新增Tree格式的資料,但是如果想要新增TreeGrid格式的資料就不行了,所以Pass。

另外一種是proxy的方式:這種方式有兩種選擇,一種是Client端的,一種是Server端的,現在我要繫結json格式的資料,肯定選擇Client端的,Client端也有三種方式,其中只有

MemoryProxy方式與瀏覽器無關的,所以選擇這種。

Code如下:

//this is the model we will be using in the storeExt.define('User',{
    extend:'Ext.data.Model',
    fields:[{name:'id',    type:'int'},{name:'name',  type:'string'},{name:'phone', type:'string', mapping:'phoneNumber'}]});//this data does not line up to our model fields - the phone field is called phoneNumber
var data ={ users:[{ id:1, name:'Ed Spencer', phoneNumber:'555 1234'},{ id:2, name:'Abe Elias', phoneNumber:'666 1234'}]};//note how we set the 'root' in the reader to match the data structure abovevar store =
Ext.create('Ext.data.Store
',{ autoLoad:true, model:'User', data : data, proxy:{ type:'memory', reader:{ type:'json', root:'users'}}});

這裡大家如果拿這個code去測試,肯定無法通過的,因為你將store加入到tree.panel中會報錯,因為你建立的store格式不是TreeStore格式的,這塊需要修改一下,還需要把data拿到proxy裡面,因為TreeStore沒有data屬性,這塊是Ext示例程式碼的問題,修改後的結果為:

var store = Ext.create('Ext.data.TreeStore', {
	autoLoad: true,
	model: 'Case',
	proxy: {
		type: 'memory',
		data: data,
		reader: {
			type: 'json',
			root: 'users'
		}
	}
});