从 Extjs 的 JSON 属性文件动态加载 treegrid 数据

Question

从 Extjs 的 JSON 属性文件动态加载 treegrid 数据

3

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中显示。当我尝试展开serverName时，它无法展开。请帮助我解决这个问题。如果我做错了什么，请指出正确的方向。非常感谢您的帮助。

- Dev

这个 initComponent 方法属于哪个组件？考虑到你没有调用超类方法 (this.callParent())，人们可以合理地期望该组件是有问题的。 - rixo

@rixo 我已经编辑了问题。谢谢。在这里我能够看到Server1，但是它的子节点没有显示出来。但是当我在控制台中查看store.getRootNode()时，我能够看到子节点。 - Dev

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- rixo · Accepted Answer

在组件创建之前，将存储库提前准备好怎么样？

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