PDA

View Full Version : Unwanted horizontal scroll bar in GridPanel



sheikyerbootie
11 Mar 2011, 6:08 AM
I am having an issue with two grid panels contained in a panel where the second grid panel insists on adding a horizontal scroll bar. I do not want to use fixed widths so I have used the autoExpandColumn. I have included a screen shot of the offending panel, and he code that causes this is:



var myData = {
records : [{ volume_name : "Rec 0", volume_guid : "0" }]
};

var fields = [
{name: 'volume_name', mapping : 'volume_name'},
{name: 'volume_guid', mapping : 'volume_guid'}
];

var vol_in_grid_store = new Ext.data.JsonStore({
fields : fields,
data : myData,
root : 'records'
});

var vol_out_grid_store = new Ext.data.JsonStore({
fields : fields,
root : 'records'
});


var volume_cols = [
{ header: "Volume Name", width: 200, sortable: true, dataIndex: 'volume_name', id : 'volume_name' },
{ header: "Volume GUID", width: 200, sortable: true, dataIndex: 'volume_guid', id : 'volume_guid' }
];

/**
*
*/
var vol_out_cluster_grid = new Ext.grid.GridPanel({
autoExpandColumn : 'volume_guid',
columns : volume_cols,
ddGroup : 'inVolGrid',
enableDragDrop : true,
flex : 1,
stripeRows : true,
store : vol_out_grid_store,
viewConfig : {autoFill: true, deferEmptyText: false, emptyText: 'No volumes currently under cluster control.'},
title : 'Volumes out'
});

var vol_in_cluster_grid = new Ext.grid.GridPanel({
autoExpandColumn : 'volume_guid',
columns : volume_cols,
ddGroup : 'outVolGrid',
enableDragDrop : true,
flex : 1,
stripeRows : true,
store : vol_in_grid_store,
title : 'Volumes in'
});

additional_volumes_panel = new Ext.Panel({
layoutConfig : { align : 'stretch' },
height : 189,
layout : 'hbox',
items : [vol_out_cluster_grid, vol_in_cluster_grid]
});

conorarmstrong
11 Mar 2011, 6:41 AM
try a separate instance of the column model.

sheikyerbootie
11 Mar 2011, 7:40 AM
GR8 - that did it!