TreeView不能擴展爲子節點。我究竟做錯了什麼？

Question

我已經創建了一個TreePanel，它使用了一個TreeStore和一個原來不顯示標籤的模型。我在面板中添加了一列，並顯示了樹的標籤。

我沒有得到錯誤添加孫子樹，但樹不會擴大或顯示孫子

Ext.define('Writer.view.MainView', { 
    extend: 'Ext.container.Viewport', 

    itemId: 'mainView', 
    layout: { 
     type: 'border' 
    }, 

    initComponent: function() { 
     var me = this; 

     Ext.applyIf(me, { 
      items: [ 
       { 
        xtype: 'panel', 
        region: 'center', 
        itemId: 'contentPanel', 
        layout: { 
         type: 'card' 
        }, 
        title: 'Content', 
        items: [ 
         { 
          xtype: 'htmleditor', 
          height: 150 
         } 
        ], 
        dockedItems: [ 
         { 
          xtype: 'toolbar', 
          dock: 'top', 
          width: 400, 
          items: [ 
           { 
            xtype: 'button', 
            text: 'MyButton', 
            listeners: { 
             click: { 
              fn: me.onButtonClick, 
              scope: me 
             } 
            } 
           }, 
           { 
            xtype: 'button', 
            text: 'MyButton' 
           }, 
           { 
            xtype: 'button', 
            text: 'MyButton' 
           } 
          ] 
         } 
        ] 
       }, 
       { 
        xtype: 'treepanel', 
        region: 'west', 
        id: 'projectTree', 
        itemId: 'projectTree', 
        width: 150, 
        title: 'Organizer', 
        store: 'MyTreeStore', 
        viewConfig: { 
         rootVisible: false, 
         listeners: { 
          select: { 
           fn: me.onViewSelect, 
           scope: me 
          } 
         } 
        }, 
        columns: [ 
         { 
          xtype: 'treecolumn', 
          width: 148, 
          defaultWidth: 149, 
          enableColumnHide: false, 
          dataIndex: 'name' 
         } 
        ] 
       } 
      ] 
     }); 

     me.callParent(arguments); 
    }, 

    onButtonClick: function(button, e, eOpts) { 

     // This Works 
     var tree = Ext.getCmp('projectTree'); 

     var treeNode = Ext.getCmp('projectTree').getRootNode(); 
     treeNode.expandChildren(true); // Optional: To see what happens 
     treeNode.appendChild({ 
      name: 'Child 4', 
      leaf: true 
     }); 

     // This one works 
     treeNode.childNodes[1].appendChild({ 
      text: 'Grand Child 3', 
      leaf: true 
     }); 

     treeNode.childNodes[1].expand(); 
    }, 

    onViewSelect: function(dataviewmodel, record, eOpts) { 

    } 

}); 

我要瘋了試圖弄明白。我還爲現在有孫子店的商店製作了JSON，並且一切正常，但它再次無法將它們展示在樹上。

{ 
    "success": true, 
    "Root": [ 
      { 
      "name": "Chapters", 
      "leaf": true, 
      "expanded": true, 
      "children": [ 
       { 
        "name": "Chapter 1", 
        "leaf": true, 
        "expanded": true 
       },{ 
        "name": "Chapter 2", 
        "leaf": true, 
        "expanded": true 
       },{ 
        "name": "Chapter 3", 
        "leaf": true, 
        "expanded": true 
       } 
      ] 
     },{ 
      "name": "Characters", 
      "leaf": true, 
      "expanded": true 
     },{ 
      "name": "Settings", 
      "leaf": true, 
      "expanded": true 
     } 
    ] 
} 

Answer 1

根據埃文的評論，來自：http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.NodeInterface-cfg-leaf

集葉配置爲true，表明這個孩子能有沒有孩子。這個節點不會渲染擴展圖標/箭頭。

所以你的情況，從有孩子的任何節點刪除leaf: true配置，並且希望將其展開。

正如我在之前的問題中所說的，我強烈建議您先閱讀Sencha文檔，它不僅可以回答大多數常見問題，而且它還可以讓您在實施前瞭解基本邏輯，所以你將來不必再問一個簡單的問題。