PDA

View Full Version : Grid Panel scroll bars are not visible and column labels in menu are not aligned



MMirabito
4 Aug 2010, 5:09 AM
I am having several strange behavior and I am hoping that someone can point me in the right direction. I have searched the forum but I was not successful in identifying a solution.

1) I have a series of primary tab panels and nested tab panels

2) In one of the tab panels I have divided a region into an accordion on the WEST and another tab panel in the CENTER (with 3 additional tab pages nested inside the CENTER region)

3) My grid panel which is contained inside a tab page is initially invisible using the x-hide-display on the div tag

When the data is loaded I click on the tab page that has my grid, the data displayes but the scroll bars are not there

I think it has to do with the components not being able to size themselves properly because they are initially invisible (just a guess). In contrast if I first click on the tab panel that has the grid and then load the data the scroll bar appears. Does anyone know how to fix this?

My second question is regarding the strange alignment of the Colum labels on the menu that gives you the ability to hide or show columns, see image attached. Anyone knows how to fix this?

Thanks in advance for any help


Max

Animal
4 Aug 2010, 5:11 AM
It will be an overnest.

MMirabito
4 Aug 2010, 5:20 AM
Animal,

thanks for the response, but I am not sure I follow you when you say overnest and in this case what should I do? I am confused and its probably based on a lack of fundamental understating about the layouts thus makig the the desgin even more complicated.

This is wah t I have


Tab panel
tab
accordion WEST
tab panel CENTER
tab
tab
gridpanel
tab
tab
Thanks again
Max

Animal
4 Aug 2010, 5:33 AM
So I assume you've put your Panel IN something, and put that SOMETHING into the TabPanel.



Tab panel
tab
accordion WEST
tab panel CENTER
tab
gridpanel
tab
tab

Condor
4 Aug 2010, 5:41 AM
No scrollbars is usually caused by an incorrect layout.

Your strange column menu is probably caused by your own css styling.

Animal
4 Aug 2010, 5:49 AM
layout: 'auto', as in "a grid inside a tab" is an incorrect layout.

MMirabito
4 Aug 2010, 6:03 AM
Animal thanks again,

this is what I have, and i am not sure when and where i need to apply the layout whatever I try i am not getting anywere. So it's safe to assume that "i do not know how" :(

Here is what I have.



var tabs = new Ext.TabPanel({
renderTo: 'extContainer',
activeTab: 0,
margins: '5 0 5 5',
height: 627,
plain: true,
items:[{
autoWidth: true,
monitorResize: true,
title: 'Query',
items:[queryPanel],
tabTip : 'Explore ways of accessing and visualizing the data'
},{
autoWidth: true,
title: 'Atlas',
tabTip : 'Explore the data'

}]
});



// ****************************
// Cobined Query Panel
// ****************************
var queryPanel = new Ext.Panel({
layout:'border',
height:600,
items:[queryAccordion, queryCenterPanel]
});


var queryCenterPanel = {
region: 'center',
xtype: 'tabpanel',
tabPosition: 'bottom',
activeTab: 0,
items: [{
title: 'Query Designer',
contentEl: 'queryView',
tabTip: 'Select query constraints'
},{
title: 'Data',
contentEl: 'resultContainier',
tabTip: 'View Data results'
}]
};



var grid = new Ext.grid.GridPanel({
renderTo: 'resultContainier',
frame:true,
title: 'Movie Database',
autoWidth:true,
height:535,
stripeRows: true,
store: remoteQueryStore,
columns: [
{ header : 'C1', dataIndex : 'C1' },
{ header : 'C2', dataIndex : 'C2' },
{ header : 'C3', dataIndex : 'C3' },
{ header : 'C4', dataIndex : 'C4' },
{ header : 'C5', dataIndex : 'C5' },
{ header : 'C6', dataIndex : 'C6' },
{ header : 'C7', dataIndex : 'C7' },
{ header : 'C8', dataIndex : 'C8' },
{ header : 'C9', dataIndex : 'C9' }

]
});



var queryAccordion = new Ext.Panel({
title: 'Query Builder',
region:'west',
split: true,
collapsible: true,
collapseMode: 'mini',
width: 128,
minWidth: 128,
height: 250,
layout: {type: 'accordion', animate: true},
items: [{
id: 'filters',
title: 'Filters',
autoScroll: true,
items: [queryBuilderForm],
cls:'empty'
},{
title: 'Saved Queries',
autoScroll: true,
contentEl: 'savedQueries',
cls:'empty'
}]
});

Condor
4 Aug 2010, 6:14 AM
This is so completely wrong that I don't even know where to start...

1. Do NOT render components inside a layout! Instead, add() them to the layout (or include them in the items).
2. Your layout is completely overnested. Forms and grids can be included directly into a tabpanel or an accordion layout. No need to use an extra panel (for which you also forgot to specify a layout).
3. You obviously have no idea what autoWidth:true and monitorResize:true do, otherwise you wouldn't be using them.

MMirabito
4 Aug 2010, 6:23 AM
Condor

thanks for your reply, yes you are right I am clueles :), so now i will go back and see how to simplify per your suggestion, not sure how yet.

thanks again

Max