PDA

View Full Version : Horizontal Scroll for GridPanel inside TabPanel



winklerd
2 Dec 2010, 9:05 AM
I have a GridPanel inside a TabPanel. Neither have autoHeight or autoWidth set. I have tried setting autoScroll on one, then the other, then both, but I cannot get a horizontal scrollbar to appear. Vertical scrollbar shows up no problem.


SouthPanel = function(){
SouthPanel.superclass.constructor.call(this, {
id:'south-panel',
region: 'south',
title: 'Query Executions',
collapsible: true,
split: true,
height: eval(Ext.get('south-panel-height') ? Ext.get('south-panel-height').dom.innerHTML : 150),
autoScroll:true,
minHeight: 125,
resizeTabs: true,
enableTabScroll: true,
defaults: {
autoScroll: true
},
plugins: new Ext.ux.TabCloseMenu(),
activeTab: 0,
items:[ ],
tabPosition:'bottom'
});
};
Ext.extend(SouthPanel, Ext.TabPanel, {
});

The GridPanel definition is quite large but here's a snippet:

Apps.QueryHistory.MainPanel.superclass.constructor.call(this,{
id: 'queryHistoryPanel',
ds: this.jsonStore,
cm: new Ext.grid.ColumnModel(columnConfiguration),
frame:false,
title:'Query History',
loadMask:false,
maskDisabled: true,
clicksToEdit: 1,
viewConfig: {
forceFit: true
},
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
titleCollapse:true,
bbar: new Ext.PagingToolbar({
pageSize: Global.Preferences.QueryHistoryRecordsPerPage,
store: this.jsonStore,
displayInfo: true,
displayMsg: 'Displaying queries {0} - {1} of {2}',
listeners: {
change: {
fn: function(t, o)
{
// handling the 'start' value to keep paging toolbar consistent
var pg = o.activePage;
if(pg <= 0) { pg = 1;}
this.preferencesObj.Qstart = (pg - 1) * Global.Preferences.QueryHistoryRecordsPerPage;
}
},
scope: this
}
})
});

winklerd
2 Dec 2010, 11:58 AM
So I figured out part of it. Because the viewConfig has forceFit enabled, the last column automatically sets itself to the available width. The problem is that the content of our last column is variable-width. Is there a way to set the minimum width of an individual column, or to make it so the column will never be set to a smaller size than the largest content? I've tried setting the width and using forceFit, but the results are the same.

Basically, I want the column to take up all available space if there is more space than needed, but I want to make sure everything inside it is also visible if there is less space than needed (so, scroll bar).