Show panel below list sencha touch

Question

I want to place a panel below a list but it seems the panel is always over top of the list. I dont want to set a height on the list as it might have no records or 20 so the height varies.

I simply want my panel to show right below my list. Also note I have disabled scrolling.

 Rad.views.testList = Ext.extend(Ext.List, {
        fullscreen: true,
        layout: 'hbox',
        scroll: false,
        align: 'top',

        store: Rad.stores.test,

        itemTpl: Rad.views.testTemplate(),


    });


   topPanel = new Ext.Panel({
        fullscreen: true,
        scroll: true,
        layout: {
           type: 'vbox',
           pack: "start",
           align: "start"
        },
        defaults: {
           width: '100%',
        },
        items: [
            {
                layout: 'hbox',
                items: [testList]

            },
            {
                html: 'This will be on the list not below!'
        ]


   }); 

    Ext.apply(this, {
        layout: {
            type: 'vbox',
            pack : 'top',
        }, 
        dockedItems: [titlebar],
        items : [ topPanel]
    });

Dan Carter Dan Carter · Accepted Answer · 2011-11-25T22:02:59

I should have been using Panels with Data View.

var tpl = new Ext.XTemplate(
    '<tpl for=".">',
        '<div class="photosLocation">{pic}{name}',
        '</div>',
    '</tpl>'
);

var panel = new Ext.Panel({
    width:535,
    autoHeight:true,
    layout:'hbox',
    title:'Simple DataView',

    listeners: {
        click: {
            element: 'el', //bind to the underlying el property on the panel
            fn: function(){ alert('click'); }
        }
    },
    items: new Ext.DataView({
        store: Rad.stores.deals,
        tpl: tpl,
        autoHeight:true,
        itemSelector:'div.photosLocation',

    })
});

Show panel below list sencha touch

1 Answers