Thursday, January 8, 2009
[SOLVED] 3 Column Layout with independent scrollbars for each column?
A simple example of my code is here:
new Ext.Panel({
items: [{
autoHeight: true,
autoScroll: true,
columnWidth: .3,
html: 'column 1'
}, {
autoHeight: true,
autoScroll: true,
columnWidth: .3,
html: 'column 2'
}, {
autoHeight: true,
autoScroll: true,
columnWidth: .4,
html: 'column 3'
}],
layout: 'column'
});I have tried adding autoScroll: true to the parent panel container but it makes the entire container scroll instead of giving the columns scrollbars. I can't have it this way because I will have a list that will be very long in column 1 and when they look at the bottom of that list they will need to see the top of column 2 without scrolling back up and loosing focus of the bottom of column 1.
I have also tried layout: 'table' but could not get the contents aligned to the top of the container nor get scrollbars to appear.
I have read pretty much every thread that had to do with scrollbars and panels and no solution has worked yet so far.
Any ideas on how to get this done?
Ext.onReady(function() {
var p = new Ext.Panel({
items: [{
autoScroll: true,
height:172,
columnWidth: .33,
html: 'long text here'
}, {
autoScroll: true,
height:172,
columnWidth: .33,
html: 'long text here'
}, {
autoScroll: true,
height:172,
columnWidth: .33,
html: 'long text here'
}],
layout: 'column',
height: 200,
width:500,
title:'Scrolling columns',
renderTo:document.body
});
listeners: {
'bodyresize' : {
fn: function( c ) {
Ext.getCmp("column1").setHeight( c.getSize().height - c.getTopToolbar().getSize().height - c.getBottomToolbar().getSize().height );
Ext.getCmp("column2").setHeight( c.getSize().height - c.getTopToolbar().getSize().height - c.getBottomToolbar().getSize().height );
Ext.getCmp("column3").setHeight( c.getSize().height - c.getTopToolbar().getSize().height - c.getBottomToolbar().getSize().height );
},
scope: this
}
}Thanks jsakalos for the input. I knew that was normally how HTML worked, I had just thought EXT would by default overcome this for me already. I figured why by default would you not want scrollbars to appear (using autoScroll: true) is you had columns that had inner content that overflowed the content size. Mostly I was expecting it to act the way border layout expand to the container and manage scrollbars. Might be something useful to add in (maybe better implemented than what I did).
I need it to expand to the container and so specifying a height attribute would cause it not to fill its parent container's height.
Ext.getCmp("parent").items.each( function( item , index , length ) {
item.setHeight( c.getSize().height - c.getTopToolbar().getSize().height - c.getBottomToolbar().getSize().height );
}, this);
It's just as it works: column divs have no height set so they expand/contract depending on their content. Column layout container has overflow:hidden so if a column is higher it's clipped at container height.
If you set overflow:auto (autoScroll:true) on columns and don't limit their heights they just expand/contract as before ignoring the container height.
It is not a limitation of Ext, it's how html works.
#If you have any other info about this subject , Please add it free.# |
Posted by rose |