EXTJS4.2資料源配置及建立注意事項

陷阱一：TreeStore

1、TreeStore在API文檔中使用的是Ext.data.NodeInterface類作為Model原型，其中children屬性存儲的是子節點，但是在建立TreeStore時如下代碼中指定了root節點不為children時，子節點資料需要存儲在root節點

Ext.define('MyApp.store.MenuStore', {       <span style="white-space:pre">	</span>    //定義一個樹形的資料源
    extend: 'Ext.data.TreeStore',                   //繼承自Ext.data.TreeStore
    model: 'MyApp.model.NodeInterface',             //指定Model為“MyApp.model.NodeInterface”在本項目中樹的資料源統一采用本Model
    proxy: {                                        //請求代理設定
        type: 'ajax',                               //請求類型為AJAX
        url: '/GetMenuTree',      <span style="white-space:pre">		</span>    //請求URL位址
        reader: {                                   //配置資料嵌套
            type: 'json',                           //配置資料類型為JSON
            root: 'Data'                            //資料根節點為Data
        }
    },
    root: {                                         //設定根節點屬性
        text: '我是根節點',                         //顯示值
        id: '',                                     //value值
        expanded: true                              //預設展開
    },
    autoLoad: true                                  //自動加載
});
           

2、 TreeStore會使用預設的Ext.data.NodeInterface類作為Model原型但是該原型沒有對應存儲自定義屬性的地方是以我進行擴充了一個自定義屬性 attributes自定義屬性，該屬性可以存儲成對象，之是以沒有寫checked屬性是因為隻要有checked屬性樹就會顯示複選框，經測試單傳回的資料中存在checked屬性同樣也能夠實作選中的情況，經省一部研究發現在treeStore指定model後會自動添加一下屬性

Ext.define('MyApp.model.NodeInterface', {     //定義一個Model，該Model用于該應用程式的樹形結構接收對象
    extend: 'Ext.data.Model',                 //繼承自Ext.data.Model
    fields: [                                 //定義該Model的字段
        'id', 'text', 'parentId', 'index', 'depth', 'expanded', 'expandable',        //'checked',
        'leaf', 'cls', 'iconCls', 'icon', 'root', 'isLast', 'isFirst', 'allowDrop', 'allowDrag', 'loaded', 'loading', 'href', 'hrefTarget', 'qtip', 'qtitle',
         'attributes', 'Data'
    ]
});
           

3、但需要取值時可以使用以上方式取值

function (view, record, item, index, e, eOpts) {                                 //菜單樹節點的單擊事件
        var id = record.get('id');                                                              //擷取目前節點綁定的資料的id字段
        var controller = record.get('attributes').Controller;                                   //擷取目前節點綁定的資料的Controller字段
        var viewXtype = record.get('attributes').ViewXtype;                                     //擷取目前節點綁定的資料的ViewXtype字段<pre name="code" class="html">}
           

4、TreeStore不含data屬性是以配置記憶體代理TreeStore的時候要把data寫到代理裡面如下

<pre name="code" class="javascript">//TreeStore記憶體代理
           

new Ext.data.TreeStore({

model: 'MyApp.model.NodeInterface',

proxy: {

data: {Data:[{id:'1',text:'12',Data:[{ id:'2',text:'122'},{ id:'3',text:'123'}]}]}

type: 'memory',

reader: {

type: 'json',

root: 'Data'

}

},

root: {                                         //設定根節點屬性

text: '----全部----',                       //顯示值

id: '',                                     //value值

expanded: true                               //預設展開

},

autoLoad: true                                   //自動加載

});

//Store記憶體代理
           

new Ext.data.Store({
<span style="white-space:pre">	</span>fields: ['ID', 'Name'],
<span style="white-space:pre">	</span>data: [{ID:1,name:'張三'},<span style="font-family: Arial, Helvetica, sans-serif;">{ID:1,name:'李四},</span>],
<span style="white-space:pre">	</span>autoLoad: true
});