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 store
Ext.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 above
var 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' } } });