Question

Here is my add item code:

myapp.cards.vehicleInfo.items.add(
       new Ext.List({ ...})
)

If after this I then do:

myapp.cards.vehicleInfo.items.add(
        new Ext.Panel(
        {html: 'test' }
        )
    );

The panel with ‘test’ appears on top of my list (overlapping), rather than vertically below it. I have tried doing a componenet dolayout inbetween adding the two items.

Any ideas? If I only do one or the other of the above it works as expected but if I do both together it leads to the above behaviour.

Thanks

Answer 1

You should dock the panel to the bottom.

myapp.cards.vehicleInfo.dockedItems.add( new Ext.Panel(
    {html: 'test' }
    )
);

Update

Ext.regModel('Contact', {
    fields: ['firstName', 'lastName']
});

var store1 = new Ext.data.JsonStore({
    model  : 'Contact',
    data: [
        {firstName: 'Tommy',   lastName: 'Maintz'},
        {firstName: 'Rob',     lastName: 'Dougan'},
        {firstName: 'Ed',      lastName: 'Spencer'},
        {firstName: 'Jamie',   lastName: 'Avins'},
        {firstName: 'Aaron',   lastName: 'Conran'},
        {firstName: 'Dave',    lastName: 'Kaneda'},
        {firstName: 'Michael', lastName: 'Mullany'},
        {firstName: 'Abraham', lastName: 'Elias'},
        {firstName: 'Jay',     lastName: 'Robinson'},
        {firstName: 'Tommy',   lastName: 'Maintz'},
        {firstName: 'Rob',     lastName: 'Dougan'},
        {firstName: 'Ed',      lastName: 'Spencer'},
        {firstName: 'Jamie',   lastName: 'Avins'},
        {firstName: 'Aaron',   lastName: 'Conran'},
        {firstName: 'Dave',    lastName: 'Kaneda'},
        {firstName: 'Michael', lastName: 'Mullany'},
        {firstName: 'Abraham', lastName: 'Elias'},
        {firstName: 'Jay',     lastName: 'Robinson'}
    ]
});

new Ext.Application({
    launch: function() {
       var panel =  new Ext.Panel({
            fullscreen: true,
            id:'thePanel',
            layout: 'vbox',
            style: 'background-color:darkblue',
            scroll:'vertical'
        });
//do this in your dynamically called function
    var list = new Ext.List({
        id :'theList',
        itemTpl : '{firstName} {lastName}',
        store: store1,
        width: '100%',
        scroll:false
    });


var smallPanel = new Ext.Panel({layout: 'auto',width:'100%',height:200,style:'background-color:darkgreen;color:white',html:"Hello I'm the panel"});
    panel.items.add(list);
    panel.items.add(smallPanel);
    panel.doLayout();               
    }
});