PDA

View Full Version : Dynamic list height



lasseok
26 Nov 2010, 6:17 AM
Hi

I'm extending the Ext.list component to create navigation tables like the ones found on the iPhone (Example can be seen by opening the Settings menu).

My problem is, though, that lists seem to have a calculated height, which is great if you only have that one list - Because it extends to fill the available space. But if you have two of them underneath each other in a Vbox layout with scroll set to 'vertical' you get list content - *a lot of space* - next list - *a lot of space*.

Here's some code illustrating the "problem":



var panel = new Ext.Panel({
items: [{
xtype: 'infotable',
store: new Ext.data.Store({
model: 'InfoTable',
data: [{
header:"Sample",
text:"data"
}, {
header:"Sample",
text:"data"
}, {
header:"Sample",
text:"data"
}, {
header:"Sample",
text:"data"
}, {
header:"Sample",
text:"data"
}]
})
},{ xtype: 'panel', cls: 'tableHeader', html: "Installed languages" },{
xtype: 'infotable',
store: new Ext.data.Store({
model: 'InfoTable',
proxy: {
url: 'check/languages_installed.php?format=json',
type: 'ajax',
reader: {
type: 'json',
root: 'languages'
}
},
autoLoad: true
})
}]
});


In the above 'infotable' is just a custom class extending Ext.list with these settings applied:



width: Ext.is.Phone ? undefined : 500,
singleSelect: true,
scroll: false,


I've tried setting the height of the list to a fixed number (fx. 200) but because I dynamically load the information into the list, I can't really be sure about the height. If there's more information, than what the fixed height can hold, the lists end up all cluttered together...

Any advice would be greatly appreciated! :)

Steffen Hiller
27 Nov 2010, 7:48 AM
Try to set "autoHeight: true" in your Ext.List. That might help.

lasseok
27 Nov 2010, 12:35 PM
Hi Steffen

Thanks for the advice, but unfortunately that doesn't make a difference (As far as I can see, this is because autoHeight is already set to true on the Ext.List component or one of its parent classes).

My current solution is to add a listener for the render-event and then calculate how tall the list should be. This seems inefficient, though...

Steffen Hiller
27 Nov 2010, 1:06 PM
Hmm sorry, just re-checked the source and it seems the stuff I saw were just left overs from Ext JS and have no functionality in ST.

Your solution sounds fine though.
Just checked in the Ext JS source for GridView, there they set the scroller element just to overflow: visible. Not sure if that would work fine in your case:



if (grid.autoHeight) {
scrollStyle = scroller.dom.style;
scrollStyle.overflow = 'visible';

if (Ext.isWebKit) {
scrollStyle.position = 'static';
}
}

lasseok
27 Nov 2010, 3:36 PM
Oh okay, no problem.

I happend to fall across another thread (http://www.sencha.com/forum/showthread.php?116498-Scrolling-list-without-fixed-height), where one of the developers say that a list must have a fixed height. Either by hardcoding it or by using a layout that sets the height for you.

But if you say my render event solution is fine, I'll use that.

Thank you very much for the help to get me in the right direction, Steffen!

If someone else stumbles across this thread - My solution:

I ended up using the onRender method in my custom list class:



calcHeight: function(){
var count = this.getStore().getCount();
count == 1 ? count = 2 : null;
var height = count*54;
this.setHeight(height);
},
onRender:function(){
this.calcHeight();
InformationTable.superclass.onRender.apply(this, arguments);
}


I use this because I found that if I add a proxy to the list's store, the store loads, the render event fires and everyone's happy. But if I just hardcode data to the store, the render event would not fire... The dedicated onRender method was run no matter what, so naturally I just used that.