extjs - 从 extjs 中的 json 属性文件动态加载树形网格数据

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 显示在树形网格中。当我尝试展开 serverName 时，它​​没有展开。请帮助我解决此问题。如果我要去，请为我指出正确的方向某处错误。任何帮助将不胜感激。谢谢。

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()
});