PDA

View Full Version : Why is this Ext.Panel not scrollable?



mikerthomsen
3 Mar 2010, 10:27 AM
I am attempting to make a window with a 2 tab TabPanel that has 1 Panel and 1 FormPanel in it. Here is the code:

store = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['asset_label', 'asset_url', 'asset_id', 'asset_thumbnail'],
root: 'assets'
}),
baseParams: {
__mode: 'image_gallery_search_results',
blog_id: extBlogId,
search_query: ''
},
proxy: new Ext.data.HttpProxy({
url: ScriptURI,
method: 'POST'
}),
autoLoad: true
});

store2 = new Ext.data.SimpleStore({
data: [['http://www.codemonkeyramblings.com/demotivators/freedom_of_speech_demotivator.jpeg', '1', 'Freedom of Speech']],
fields: ['asset_url', 'asset_id', 'asset_label']
});


var dataview = new Ext.DataView({
frame: true,
autoHeight: true,
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div style="float:left" id="{asset_id}">',
'<img style="height:50px;width:50px" src="{asset_thumbnail}" title="{asset_label}"></div>',
'</tpl>'),
store: store,
emptyText: 'No image assets'
});

imagePanel = new Ext.Panel({
frame: true,
autoHeight: true,
layout: 'fit',
title: 'Demotivators',
items: dataview,
autoScroll: true
});

igTabPane = new Ext.TabPanel({
frame: true,
autoHeight: true,
autoHeight: true,
layoutOnTabChange: true,
activeItem: 0,
items: [ imagePanel, searchPanel ],
});

extImageGalleryWindow = new Ext.Window({
height: 500,
width: 500,
frame: true,
closeable: true,
resizable: true,
items: [ igTabPane ],
layout: 'fit',
});

I want imagePanel to be scrollable, but scrollbars only appear at all once I add autoScroll to extImageGalleryWindow. Could someone explain what I am doing wrong and/or how ExtJS determines what to make scrollable?

Animal
3 Mar 2010, 10:38 AM
imagePanel is fitting the DataView, so the DataView does not overflow. That's what you ask for.

mikerthomsen
3 Mar 2010, 10:58 AM
I removed that and it's still not scrollable. Is there something that you can tell I'm missing from my code to make that panel scrollable?

Animal
3 Mar 2010, 12:08 PM
Make the DataView's style overflow:hidden;zoom:1 to force it to have layout. Then it should overflow the Panel bounds, and the autoScroll Panel should offer scrollbars.

mikerthomsen
3 Mar 2010, 12:41 PM
Is this what you mean?


var dataview = new Ext.DataView({
frame: true,
autoHeight: true,
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div style="float:left" id="{asset_id}">',
'<img style="height:50px;width:50px" src="{asset_thumbnail}" title="{asset_label}"></div>',
'</tpl>'),
store: store,
emptyText: 'No image assets',
autoScroll:true,
style: {
overflow: 'hidden',
zoom: 1
}
});

Animal
3 Mar 2010, 1:13 PM
Yes. Does it work?

mikerthomsen
3 Mar 2010, 4:09 PM
Unfortunately, it doesn't. I've attached a screenshot to show how it behaves.

Animal
4 Mar 2010, 12:56 AM
And the panel you put that inside is now auto layout (no layout configured), and autoScroll: true?

mikerthomsen
4 Mar 2010, 3:13 AM
Yes. Here's the code as it currently stands:


store = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['asset_label', 'asset_url', 'asset_id', 'asset_thumbnail'],
root: 'assets'
}),
baseParams: {
__mode: 'image_gallery_search_results',
blog_id: extBlogId,
search_query: ''
},
proxy: new Ext.data.HttpProxy({
url: ScriptURI,
method: 'POST'
}),
autoLoad: true
});

var dataview = new Ext.DataView({
frame: true,
autoHeight: true,
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div style="float:left" id="{asset_id}">',
'<img style="height:50px;width:50px" src="{asset_thumbnail}" title="{asset_label}"></div>',
'</tpl>'),
store: store,
emptyText: 'No image assets',
autoScroll:true,
style: {
overflow: 'hidden',
zoom: 1
}
});

imagePanel = new Ext.Panel({
frame: true,
autoHeight: true,
title: 'Demotivators',
items: dataview,
autoScroll: true,
style: {
overflow: 'hidden',
zoom: 1
}
});

igTabPane = new Ext.TabPanel({
frame: true,
autoHeight: true,
autoHeight: true,
layoutOnTabChange: true,
activeItem: 0,
items: [imagePanel, searchPanel ],
});

extImageGalleryWindow = new Ext.Window({
height: 500,
width: 500,
frame: true,
closeable: true,
resizable: true,
items: [ igTabPane ]
});

Animal
4 Mar 2010, 3:22 AM
imagePanel may not be autoHeight: true

That disables the TabPanel from setting its height. So it won't be hight-limited, and so won't display scrollbars.

mikerthomsen
4 Mar 2010, 4:16 AM
Thanks, that worked. It now scrolls. One last question if you don't mind, what layout strategy do I need to use to make it so that imagePanel fits automatically with the size of the tab that it is in?

Animal
4 Mar 2010, 5:17 AM
imagePanel IS the tab.

mikerthomsen
4 Mar 2010, 5:44 AM
Thanks for your help. It may be hackish, but I got around that last issue by adding this to the window object's constructor:


listeners: {
resize: function(win, x, y) {
imagePanel.setHeight(win.getHeight()-60);
}
}

Works well enough.

Animal
4 Mar 2010, 5:47 AM
That is wrong. You don't need to do anything. TabPanel's card layout sizes all its child items to fit exactly.

Animal
4 Mar 2010, 5:49 AM
You have



autoHeight: true,
autoHeight: true,


in your TabPanel which, as explained, defeats any layout management by any owning Container (The Window in this case which attempts to fit it)

Read the manual, and understand what it does: http://www.extjs.com/deploy/dev/docs/?class=Ext.Panel&member=autoHeight

mikerthomsen
4 Mar 2010, 7:06 AM
Thanks for your help. It was just a stupid bug in my code. I didn't specify "layout: 'fit'" in the window to give it the appropriate layout strategy.

binoruv
25 Aug 2010, 11:12 PM
thanks Animal, that works for me!