View Full Version : Component's Height

5 Oct 2010, 6:45 AM
I have a long list of items defined using a simple div structure and put them into a component, which has been configured to scroll vertically, like so...

var listHtml = "<div>item 1</div><div>item 2</div><div>item 3</div><div>item 4</div>...<div>item 50</div>"

var listPanel = new Ext.Component(
layout: { type: 'vbox' },
scroll: 'vertical',
html: listHtml,
title: 'title'

The component itself is on a tabbed panel.

If I don't set a height on the Component, then I only can only scroll to get the first say 10 items. On setting a height I can scroll to the bottom of the list.

The problem I've got is that if I set the height to be suitable for an iPhone, then the list is too long/short for other devices. Equally if i change the orientation, the height is wrong.

On the tabbed panel there is a property that can be set "fullscreen: true" which forces it to fill the available height. Is there a similar property that I can set on the component to achieve this?

Or do i need to write some code to look at the device's screen size and orientation in order to figure out how big to make the component's height?


5 Oct 2010, 2:05 PM
By putting an item inside a tab panel, the card is automatically sized to the height of the tab panel:

onReady: function(){
var main = new Ext.TabPanel({
fullscreen: true,
items: [{
title: 'Foo',
html: 'Foo'

}, 1000);