ExtJS中的TreeStore如何新增json格式的資料
阿新 • • 發佈:2019-01-02
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端也有三種方式,其中只有
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'
}
}
});