PDA

View Full Version : How to get a horizontal scrollbar on a gridpanel without setting the width



suchitratata
7 Jul 2010, 9:36 PM
Hi,

I have a grid panel for which I don't want to set the width but still want a horizontal scrollbar. The reason is that when the containing portlet is maximized I want the grid to resize accordingly, which won't be possible if I set the width for the grid panel.

Appreciate a quick response.

Thanks.

Condor
7 Jul 2010, 10:58 PM
The layout of the grid container should set the width of the grid. If it doesn't then you configure it wrong.

Can you post the layout you are using (including the code to maximize a portlet)?

suchitratata
8 Jul 2010, 12:31 AM
Our portlet is a JSR286 portlet, so no code was written explicitly to achieve maximize.
The following snippet of code is how we achieve rendering a tree and a grid adjacent to each other. Like I said I can't fix the width of the container because it wouldn't expand in the maximized state.

var grid = new Ext.grid.GridPanel({
id:'sp-grid',
store: dataStore,
stateId: 'sp-grid-stateId',
stateful: true,
cm: colMod,
sm: selModel,
animate: true,
stripeRows: true,
region:'center',
viewConfig : {
emptyText: "No Documents found"
},
// toolbars buttons
tbar:gToolBar,
autoScroll: true,
//width:700,
//height:300,
title:data.listTitle,
bbar:new pExt.PagingToolbar({
pageSize: userPageSize,
store: dataStore,
afterPageText:'',
emptyMsg: "No Records to display",
items: ['-'],
listeners:{
render:function(c) {
/* hiding the last page button as the pages/contents are dynamic */
c.last.hide();
}
}
}),
listeners: {
rowcontextmenu: function(grid, rowidx, e) {
grid.getSelectionModel().selectRow(rowidx);
e.stopEvent();
row = this.store.data.items[rowidx];
showContextMenu(row.json, e);
}
}

});

var panel = new pExt.Panel({
renderTo:'spgrid',
layout:'border',
height: 400,
defaults: {
split: true
},
items: [
{title:'Folders',
region:'west',
tbar: [serverList],
layout:'border',
autoScroll: true,
width: 175,
minSize: 100,
maxSize: 250,
collapsible: true,
items: [tree]},
grid]
})

Condor
8 Jul 2010, 12:59 AM
1. Next time, please post using [CODE] tags!
2. You are overnesting. The tree should BE the west region instead of being an item in the west region.
3. Is the size of 'spgrid' managed by the JSR286 portal code? In that case you should use the FitToParent plugin on the outher panel.

suchitratata
8 Jul 2010, 10:10 PM
Thanks!! The fitToContainer plugin works perfectly on Firefox but is giving some syntax error on IE7. Still investigating. Will keep you posted

suchitratata
19 Jul 2010, 8:25 PM
So here's the solution to the IE problem. In the FitToContainer plugin configuration, width:false needs to be added.

Condor
19 Jul 2010, 10:53 PM
The plugin I suggested was FitToParent (http://www.sencha.com/forum/showthread.php?28318-Fit-to-parent) and it doesn't have a width config option.

suchitratata
19 Jul 2010, 11:02 PM
Yes, but in another thread someone had recommended that FitToContainer is better than FitToParent. So I used that one and it has a width option.

Condor
19 Jul 2010, 11:07 PM
I recommend the FitToParent plugin (it has been updated after that remark).