PDA

View Full Version : Component's Height



darrenb
5 Oct 2010, 6:45 AM
Hi,
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?

Thanks,
Darren.

evant
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:



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

setTimeout(function(){
console.log(main.items.first().getSize());
}, 1000);
}
});