TreeView not expanding for child nodes. What am I doing wrong?

Question

I have created a TreePanel that uses a TreeStore and a Model that originally was not showing labels. I added a Column to the panel and the labels of the tree showed.

I don't get errors for adding grandchildren to the tree but the tree won't expand or show the grandchildren

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) {

    }

});

I am going crazy trying to figure it out. I also made JSON for the store that now had grandchildren and it all loads in fine but once again it fails to show them in the tree.

{
    "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

According to Evan's comment; and from: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.NodeInterface-cfg-leaf

Set leaf config to true to indicate that this child can have no children. The expand icon/arrow will then not be rendered for this node.

So in your case, remove leaf: true config from any node that has children and you want to expand them.

As I've said before in your previous questions, I highly suggest you read the Sencha documents first, not only it can answers most of your common questions, but reading it will also make you understand the basics logic before implementing, so you won't have to ask a simple question in the future.