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

プロパティ.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 を展開しようとすると、展開されません。この問題の解決を手伝ってください。どこかで間違っている場合は、正しい方向を教えてください。どんな助けでも大歓迎です.Thanks.

4

1 に答える 1

3

コンポーネントが作成される前にストアを利用できるようにするのはどうですか?

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()
});
于 2013-08-01T09:49:46.197 に答える