從extjs中的json屬性文件中以dyanamically方式加載treegrid數據

Question

Treegrid無法正確呈現。下面是代碼：

treeGrid.js：

Ext.define('App.view.DBStatusGrid', { 
extend  : 'Ext.container.Container', 
xtype  : 'app-DB-grid', 
layout  : 'vbox', 
items  : [ 
    { 
     xtype : 'container', 
     cls  : 'boxTitle', 
     html : 'DB Details' 
    }, 
    { 
    xtype : 'treepanel', 
    singleExpand: true, 
    useArrows:true, 
    rootVisible:false, 
    columns: [ 
       {text: 'Server Status', dataIndex: 'serverStatus' , width: 80,}, 
       { xtype: 'treecolumn',text: 'Server Name', dataIndex: 'serverName' , width: 140}, 
       { text: 'Instance Status', align:'center', dataIndex: 'instanceStatus',width: 80,}, 
       {text: 'Instance Name', align:'center', dataIndex: 'instanceName',width: 140} 
     ] 
    } 
    ] 
}); 

property.json：

"data":[ 
     { 
      "serverStatus": "active", 
      "serverName":"rg0C1", 
      "iconCls":"task-folder", 
      "expanded":false, 
      "data": [ 
         { 
         "instanceStatus": "active", 
         "instanceName":"OA1", 
         "leaf":true, 
         "iconCls":"no-icon" 
         } 
         ] 
     } 
     ] 

創建商店

Ext.define('App.view.InnerContainerView', { 
extend  : 'Ext.container.Container', 
xtype  : 'app-inner-ContainerView', 
config : { 
    component : 'NONE', 
    parentView : '' 
}, 
initComponent : function() { 
    var parentView = this.getParentView(); 
    this.items = [ 
     { 
      xtype : 'container', 
      layout: 'card', 
      items : [ 
        { 
         xtype: 'app-DB-grid', 
         parentView: parentView, 
         listeners :{ 
         render : function(){ 
         var store = Ext.create('Ext.data.TreeStore', 
         { 
         model: 'App.model.treeModel', 
         autoLoad: true, 
         proxy: { 
           type: 'ajax', 
           url:'app/data/property.json', 
           reader: { 
             type: 'json', 
             root : 'data' 
            } 
          }, 
          root :{ 
           expanded :true 
          } 
         }); 
         this.down('treepanel').setRootNode(store.getRootNode()); // I am getting my treegrid,and setting the rootnode. 
        } 
       ] 
     } 
     ] 
    this.callParent(); 
    }); 

我的問題：

從JSON屬性文件，只有ServerName是越來越顯示在treegrid.When我嘗試展開ServerName，它是沒有得到expanded.Please幫我解決這個issue.Please點我正確的方向，如果我錯了某處。任何幫助將不勝感激。謝謝。

Answer 1

如何在組件創建之前讓商店可用？

Ext.widget({ 
    renderTo: Ext.getBody(), 

    xtype : 'treepanel', 
    singleExpand: true, 
    useArrows:true, 
    rootVisible:false, 
    columns: [ 
     {text: 'Server Status', dataIndex: 'serverStatus' , width: 80,}, 
     {xtype: 'treecolumn',text: 'Server Name', dataIndex: 'serverName' , width: 140}, 
     {text: 'Instance Status', align:'center', dataIndex: 'instanceStatus',width: 80,}, 
     {text: 'Instance Name', align:'center', dataIndex: 'instanceName',width: 140} 
    ] 

    ,store: Ext.create('Ext.data.TreeStore', { 
     model: 'App.model.treeModel', 
     autoLoad: true, 
     proxy: { 
      type: 'ajax', 
      url:'property.json', 
      reader: { 
       type: 'json', 
       root : 'data' 
      } 
     }, 
     root :{ 
      expanded :true 
     } 
    }) 
}); 

我從你沒有定義一個類爲組件的xtype的存在假設，但也可以做到：

Ext.define('My.TreePanel', { 
    extend: 'Ext.tree.Panel', 

    singleExpand: true, 
    useArrows:true, 
    rootVisible:false, 
    columns: [ 
     {text: 'Server Status', dataIndex: 'serverStatus' , width: 80,}, 
     {xtype: 'treecolumn',text: 'Server Name', dataIndex: 'serverName' , width: 140}, 
     {text: 'Instance Status', align:'center', dataIndex: 'instanceStatus',width: 80,}, 
     {text: 'Instance Name', align:'center', dataIndex: 'instanceName',width: 140} 
    ] 

    // Providing only configuration (as opposed to a store instance) in order for 
    // each tree to have its own store instance 
    ,store: { 
     model: 'App.model.treeModel', 
     autoLoad: true, 
     proxy: { 
      type: 'ajax', 
      url:'property.json', 
      reader: { 
       type: 'json', 
       root : 'data' 
      } 
     }, 
     root :{ 
      expanded :true 
     } 
    } 
}); 

Ext.create('My.TreePanel', { 
    renderTo: Ext.getBody() 
}); 

還是這樣，這將允許我們在創建商店時更具動態：

Ext.define('My.TreePanel', { 
    extend: 'Ext.tree.Panel', 

    singleExpand: true, 
    useArrows:true, 
    rootVisible:false, 
    columns: [ 
     {text: 'Server Status', dataIndex: 'serverStatus' , width: 80,}, 
     {xtype: 'treecolumn',text: 'Server Name', dataIndex: 'serverName' , width: 140}, 
     {text: 'Instance Status', align:'center', dataIndex: 'instanceStatus',width: 80,}, 
     {text: 'Instance Name', align:'center', dataIndex: 'instanceName',width: 140} 
    ] 

    ,initComponent: function() { 

     // Creating store instance myself at creation time 
     this.store = Ext.create('Ext.data.TreeStore', { 
      model: 'App.model.treeModel', 
      autoLoad: true, 
      proxy: { 
       type: 'ajax', 
       url:'property.json', 
       reader: { 
        type: 'json', 
        root : 'data' 
       } 
      }, 
      root :{ 
       expanded :true 
      } 
     }); 

     // Don't forget to call the superclass method! 
     this.callParent(arguments); 
    } 

}); 

Ext.create('My.TreePanel', { 
    renderTo: Ext.getBody() 
});