trouble with placing an image above buttons

[beefwellington]

So I have a menu of about 6 buttons on it. I'd like to have a logo/banner above the buttons but sencha touch likes to add them after the buttons.

I've been playing with CSS by using "position: absolute" but I'm wondering if there's an easier way to do it (plus my image overlaps some of the buttons on the menu if I do it this way). I've listed the code for my panel below.



var pnlMainMenu = new Ext.Panel({
id: 'pnlMainMenu',
title: 'Main Menu',
fullscreen: true,
styleHtmlContent: true,
scroll: 'vertical',
html: '<img src="images/banner_ds.jpg" class="imgBanner" />',
items: btnsMainMenu_CS,
iconCls: 'info',
cls: 'pnlMainMenu'
});



Is there an easier way to move the image from the bottom of the buttons to the top with the Sencha Touch code or CSS?

[Stoot98]

Use the 'dockedItems' config to define a new element docked to the top of your main menu panel.




var pnlMainMenu = new Ext.Panel({
id: 'pnlMainMenu',
title: 'Main Menu',
fullscreen: true,
styleHtmlContent: true,
scroll: 'vertical',
dockedItems: [{
dock: 'top',
html: '<img src="images/banner_ds.jpg" class="imgBanner" />'
}],
items: btnsMainMenu_CS,
iconCls: 'info',
cls: 'pnlMainMenu'
});

[beefwellington]

thanks Stoot98. That worked... except my image is 320x60 and it seems like there is a white box behind the image that is 320x200 so its overlapping most of my buttons :(

Any idea why that might happen? I tried changing the "height:" in the dockedItems area but that just shifts my menu more upward, thus being more hidden.


EDIT: DISREGARD that, got it working with the following code. Thanks again :D



dockedItems: [{
dock: 'top',
html: '<img src="images/banner_ds.jpg" class="imgBanner" height="50" />',
height: 50,
}],


added the "height" to the <img /> and that seemed to work