Question

So I have a TabPanel defined like so:

panel = new Ext.TabPanel({
            fullscreen: true,
            cardSwitchAnimation: 'slide',
            ui: 'dark',
            items: [home, faq, about]
        });

The home section is defined like so:

home = new Ext.Component({
            title: "Home",
            scroll: 'vertical',
            tpl: [
                '<tpl for="."',
                ' <div messageId="{message_id}">',
                ' </div>',
                '</tpl>'
            ]
        });

Now, ONLY on the home tab, I want a section right underneath the TabPanel that is going to contain some other elements, specifically, a textbox, button, and two dropdowns.

How can I add them so that the content section still acts the same way and doesn’t start until underneath these added elements?

Answer 1

It’s not 100% clear what your aim is, but it sounds like you just want to stack two panels on top of each other within your ‘home’ card as below…. If you need to control how much room each sub-item takes up you need to look at layout properties specifically hbox I think.

home = new Ext.Panel({
    title: "Home",
    scroll: 'vertical',
    items: [
        {
            html: 'first panel'
        },
        {
            tpl: '<tpl for="."><div messageId="{message_id}"></div></tpl>'
        }
    ]
});

Alternatively you might have been talking about having something like a second toolbar, in which case take a look at dockedItems.