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/

Установите для конфигурации листа значение true, чтобы указать, что этот дочерний элемент не может иметь дочерних элементов. Значок / стрелка раскрытия не будут отображаться для этого узла.

Так что в вашем случае удалите leaf: true Конфигурация с любого узла, у которого есть дочерние элементы, и вы хотите расширить их.

Как я уже говорил ранее в ваших предыдущих вопросах, я настоятельно рекомендую вам сначала прочитать документы Sencha, они не только могут ответить на большинство ваших общих вопросов, но и прочитав их, вы также поймете логику основ до их реализации, так что вы выиграли ". в будущем нужно задать простой вопрос.