PDA

View Full Version : Horizontal scroll bar issue with GridPanel.



alks
28 Nov 2007, 9:40 PM
Forgive me if I m reposting the same question, but I m really stuck with it for last 1 week.
I am displaying a Grid Panel(with paging & navigation) in an Ext.Panel. The functionality works fine, but I have large no of columns in GridPanel & want horizontal scroll bar to show up.


function createDrillDetailNavGrid(){
var ds = new Ext.data.Store({ ... });
var colModel = new Ext.grid.ColumnModel([ ... ]);
drillDetailGrid = new Ext.grid.GridPanel({
store:ds,
cm: colModel,
autoExpandColumn: 'user',
autoHeight:true,
width: 950,
fitToFrame:true,
autoScroll: true,
loadMask: {msg: 'Please wait...'},
tbar : ...,
bbar : ...,
viewConfig: { forceFit: true });

ds.load({params:{start:0, limit:25, period_value: period_value, ndownloads: ndownloads}});
createDrillDetailPanel();
}
function createDrillDetailPanel(){
drillDetailResultPanel = new Ext.Panel({
title: 'Drill Through Result',
layout: 'table',
renderTo: 'query-result-dwa',
width: 750,
layoutConfig: {
columns: 1
},
items:[{
id:'drill-detail-panel',
collapsible: true,
titleCollapse: true,
el: 'drill-detail-dwa',
title: 'Drill Details',
autoHeight:true,
width: 750,
collapsed: false,
items:[drillDetailGrid]
}
]
}); //END OF PANEL
}//END OF FUNCTION

I want horizontal scroll bar for GridPanel & not Panel(container).
Thanking in advance.

santosh.rajan
28 Nov 2007, 10:18 PM
try removing fittoframe and forcefit and autoscroll. grids autoscroll by default.

alks
28 Nov 2007, 10:25 PM
try removing fittoframe and forcefit and autoscroll. grids autoscroll by default.

Thanks santosh.rajan. But I still have the same prob. Hori scroll bar still doesn't appear.

santosh.rajan
28 Nov 2007, 10:33 PM
Question: Why are you using layout: 'table' in griddetailresultpanel? Is there only one grid in this panel?

alks
28 Nov 2007, 11:01 PM
Question: Why are you using layout: 'table' in griddetailresultpanel? Is there only one grid in this panel?
Yes, there's only one grid in 'drillDetailResultPanel'. Is layout:'table' causing problem.
Thanks.

santosh.rajan
28 Nov 2007, 11:13 PM
try this code then



function createDrillDetailPanel(){
drillDetailResultPanel = new Ext.Panel({
title: 'Drill Through Result',
layout: 'fit',
renderTo: 'query-result-dwa',
width: 750,
items: drillDetailGrid
}); //END OF PANEL
}

alks
29 Nov 2007, 12:40 AM
try this code then

Thanks santosh.rajan, I made the changes u suggested. But the hori scroll is still not visible. Is anything wrong with my GridPanel code.

santosh.rajan
29 Nov 2007, 1:32 AM
Try this code. remove everything else.


drillDetailGrid = new Ext.grid.GridPanel({
store:ds,
cm: colModel,
autoExpandColumn: 'user',
loadMask: {msg: 'Please wait...'},
tbar : ...,
bbar : ...,

alks
29 Nov 2007, 2:10 AM
Try this code. remove everything else.
Thanks for ur follow-up santosh.rajan. I replaced my code with yours. But the rows are not visible, only the top paging toolbar, headers(with end columns cliped) & bottom paging toolbar.
So I kept 'autoHeight:true' property which did display rows, but the hori scroll bar is still missing.
This is my exact code.
JS:


function createDrillDetailNavGrid(period_value, ndownloads, drillURL){
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({ url: drillURL, method : 'POST' }),
baseParams: { period_value: period_value, ndownloads: ndownloads },

reader: new Ext.data.JsonReader({
root: 'rs_data',
totalProperty: 'rs_count'},
[{name: 'access_time', mapping:'access_time'},
{name: 'consumer', mapping:'consumer'},
{name: 'user', mapping:'user'},
{name: 'subject', mapping:'subject'},
{name: 'genre', mapping:'genre'},
{name: 'title', mapping:'title'},
{name: 'file_size', mapping:'file_size'} ]
)
});

var colModel = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{id:'access_time', header: "Access Time", width: 125, sortable: true, dataIndex: 'access_time'},
{id:'consumer', header: "Consumer", width: 100, sortable: true, dataIndex: 'consumer'},
{id:'user', header: "User", sortable: true, dataIndex: 'user',
renderer: function(v){
if(v.indexOf('NA') == 0 ){ return '<span style="color:red;">' + v + '</span>'; }
return v;
}
},
{id:'subject', header: "Subject", width: 100, sortable: true, dataIndex: 'subject'},
{id:'genre', header: "Genre", width: 100, sortable: true, dataIndex: 'genre'},
{id:'title', header: "Title", width: 175, sortable: true, dataIndex: 'title'},
{id:'file_size', header: "File Size", width: 100, sortable: true, dataIndex: 'file_size', renderer: Ext.util.Format.fileSize}
]);

drillDetailGrid = new Ext.grid.GridPanel({
store:ds,
cm: colModel,
autoHeight:true,
loadMask: {msg: 'Please wait...'},
tbar : new Ext.PagingToolbar({ pageSize:25, store:ds, displayInfo: true, displayMsg: 'Displaying details {0} - {1} of {2}', emptyMsg: "No details to display." }),
bbar : new Ext.PagingToolbar({ pageSize:25, store:ds, displayInfo: true, displayMsg: 'Displaying details {0} - {1} of {2}', emptyMsg: "No details to display." })
});
ds.load({params:{start:0, limit:25, period_value: period_value, ndownloads: ndownloads}});
}

function createDrillDetailPanel(){
drillDetailResultPanel = new Ext.Panel({
title: 'Drill Through Result',
layout: 'fit',
renderTo: 'query-result-dwa',
width: 750,
items: drillDetailGrid
}); //END OF PANEL
}
HTML:


<!-- Drill Down Results -->
<div id="query-result-dwa" class="x-layout-inactive-content">
<div id="drill-summary-dwa" class="x-layout-inactive-content"></div>
<div id="drill-chart-dwa" class="x-layout-inactive-content"></div>
<div id="drill-aggregate-dwa" class="x-layout-inactive-content"></div>
<div id="drill-detail-dwa" class="x-layout-inactive-content"></div>
</div>
Thanks.

aerozep
21 Mar 2008, 6:39 AM
I have the same problem.
Any?

Animal
21 Mar 2008, 8:45 AM
OVER NESTING YET AGAIN.



items:[{
id:'drill-detail-panel',
collapsible: true,
titleCollapse: true,
el: 'drill-detail-dwa',
title: 'Drill Details',
autoHeight:true,
width: 750,
collapsed: false,
items:[drillDetailGrid]
}
]


See drillDetailGrid is put INTO 'drill-detail-panel'.

What layout does 'drill-detail-panel' have why is it even there?, and then that function shoehorns that intp another Panel!!!!!!

Just add drillDetailGrid to whatever Container you want, do not wrap it up in multiple layers of Panel.