Adding a Panel with two child panels as a separate xtype

[sam-ghosh]

I downloaded the latest version of the file and in the view/Main.js , for the Item1/Group 1 item, added toolbar + 2 panels, instead of toolbar + 1 panel, the code works fine:

{
    title : 'Item1',
    group : 'Group 1',

    xtype : 'container',

    // Enable the slide button using the
    // defaults defined above in
    // `slideButtonDefaults`.
    slideButton : true,
    layout: 'vbox',

    items : [
                {
                    xtype : 'toolbar',
                    title : 'Item 1',
                    docked : 'top'
                },
                {
                    xtype : 'panel',
                    style: 'background: red',
                    html: 'New1',
                    flex: 1,

                    // Mask this item when the
                    // container is opened
                    maskOnOpen : true
                },
                {
                    xtype : 'panel',
                    style: 'background: green',
                    html: 'New2',
                    flex: 2,

                    // Mask this item when the
                    // container is opened
                    maskOnOpen : true
                } 

            ]
},

The code works fine - it replaces the image you have in your demo with a panel with two vertically placed subpanels in red and green

I am trying to refactor the code into into separate view

Ext.define('Volt.view.FeedView', {
    extend: 'Ext.Panel',

    requires: [
        'Ext.TitleBar',
        'Ext.Button',
        'Ext.Toolbar',
        //'Ext.Panel'
    ],

    xtype: 'feedViewCard',


    config: {

        iconCls: 'action',
        title: 'FeedView',

        layout: 
        {
            type: 'vbox'
        },

        items : [
                    {
                        xtype : 'toolbar',
                        title : 'FeedView',
                        docked : 'top'
                    },
                    {
                        xtype : 'container',
                        style: 'background: red',
                        html: 'New1',

                        flex: 1

                        // Mask this item when the
                        // container is opened
                        //maskOnOpen : true
                    },
                    {
                        xtype : 'container',
                        style: 'background: green',
                        html: 'New2',
                        flex: 1

                        // Mask this item when the
                        // container is opened
                        //maskOnOpen : true
                    } 

                ]
    }
});

and use the following code in view/Main.js , removing the earlier code- there are no errors, but only the green box shows up

 { 
     xtype: 'feedViewCard',
     title : 'Home Page',
     group : 'Group 1',
     slideButton : true

 },

Also, this refactored FeedView.js shows up as two child panels when used in a TabPanel view - so it is definitely working fine. Any advice? Thanks much