PDA

View Full Version : GridPanel with PagingToolBar Width Issue



ssh_ext
16 Mar 2011, 7:40 AM
Hi,

I am using GridPanel with PagingToolbar. GridPanel and it's parent container panel both have autoWidth = true and GridPanel has fixed height. What I am seeing is when browser displays "Vertical Scroll" as needed, Browser also displays "Horizontal Scroll" , which is not required. This happens only in IE. My assumption is , this is happening because PagingToolbar width is extended whenever Vertical ScrollBar is displayed to cover the space behind V-scrollbar.

Can someone help me how to fix this issue ? below is the code and screen shot




var grid = new Ext.grid.GridPanel({
store: store,
title: 'Title',
id:'product_id',
collapsible: true,
titleCollapse: true,
columns: [
{header: '<input type=checkbox id=selectAllPId onclick="selectAll(this);">', width: 30, sortable: false, menuDisabled : true,align: 'center', renderer: chekRenderer},
{header: 'Column 1', width: 180, sortable: true,renderer: productRenderer},
{header: 'Column 2', width: 80, sortable: true, dataIndex: 'percent'},
{header: 'Column 3', width: 80, sortable: true, dataIndex: 'fmCategory'},
{header: 'Cust#', width: 50, sortable: true, dataIndex: 'refCustomerNo'}
],
loadMask: true,
stripeRows: true,
autoWidth: true,
height: 260,
autoScroll: true,
overflow: 'auto',
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
bbar: new Ext.PagingToolbar({
plugins:new Ext.ux.Andrie.pPagingSize(),
pageSize: 5,
store: storeRebate,
autoWidth:true,
displayInfo: true,
id : 'listPagingBar2'
}),
tbar:tbbar,
viewConfig: {
enableRowBody:true,
forceFit: true,
scrollOffset:0
}
});

25174

ssh_ext
18 Mar 2011, 5:49 AM
Bump !! Please help if anyone can

Hi,

I am using GridPanel with PagingToolbar. GridPanel and it's parent container panel both have autoWidth = true and GridPanel has fixed height. What I am seeing is when browser displays "Vertical Scroll" as needed, Browser also displays "Horizontal Scroll" , which is not required. This happens only in IE. My assumption is , this is happening because PagingToolbar width is extended whenever Vertical ScrollBar is displayed to cover the space behind V-scrollbar.

Can someone help me how to fix this issue ? below is the code and screen shot




var grid = new Ext.grid.GridPanel({
store: store,
title: 'Title',
id:'product_id',
collapsible: true,
titleCollapse: true,
columns: [
{header: '<input type=checkbox id=selectAllPId onclick="selectAll(this);">', width: 30, sortable: false, menuDisabled : true,align: 'center', renderer: chekRenderer},
{header: 'Column 1', width: 180, sortable: true,renderer: productRenderer},
{header: 'Column 2', width: 80, sortable: true, dataIndex: 'percent'},
{header: 'Column 3', width: 80, sortable: true, dataIndex: 'fmCategory'},
{header: 'Cust#', width: 50, sortable: true, dataIndex: 'refCustomerNo'}
],
loadMask: true,
stripeRows: true,
autoWidth: true,
height: 260,
autoScroll: true,
overflow: 'auto',
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
bbar: new Ext.PagingToolbar({
plugins:new Ext.ux.Andrie.pPagingSize(),
pageSize: 5,
store: storeRebate,
autoWidth:true,
displayInfo: true,
id : 'listPagingBar2'
}),
tbar:tbbar,
viewConfig: {
enableRowBody:true,
forceFit: true,
scrollOffset:0
}
});

25174