PDA

View Full Version : Setting height of Panel to accomodate Grids



harjits
1 Nov 2012, 7:50 AM
Hi there,

I have a panel which has multiple grids in it. Right now I have to set the height explictly of the panel to display all the grids. Is there any way I can set it to % or auto so that I don't have to set a static height . Here is panel definition and grid definition. All of the definitions are the same.


sentry.ResultPanel = Ext.extend(Ext.Panel, {
id:'resultContainer',
height:1500,
frame:false,
forceFit:true,
scroll:true,
resize:true,




layout:{
type:'vbox',
align:'stretch'
}
})


My grid is as follows


this.gridPanel = new Ext.grid.GridPanel({


autoScroll : true,
id : 'FeResultsView',
title: 'Finance Account',
stripeRows : true,
margins : '0',
height:200,
forceFit : true,
loadMask:true,


cls:'mygrid',
columnLines : true,
tbar:[],
store : parent.store,
cm : new Ext.grid.ColumnModel({
columns : [{
header : 'Finance Account',
width : 150,
dataIndex : 'finAccount'
}, {
header : 'Account Type',
width : 150,
dataIndex : 'accountType'
}, {
header : 'Institution',
width : 150,
dataIndex : 'institution'
}, {
header : 'Associated Entity',
width : 150,
dataIndex : 'associatedEntity'
}, {
header : 'Group Id',
width : 100,
dataIndex : 'groupID'
}, {
header : 'Date Of Info',
width : 400,
dataIndex : 'dateOfInfo'
}],
defaults : {
sortable : true,
menuDisabled : false,
width : 150
},
viewConfig: {
forceFit:true
}
}),


sm : new Ext.grid.RowSelectionModel({
singleSelect : true

}),

trackMouseOver : true
//bbar : parent.pager //zz :disable page bar
});

Tim Toady
1 Nov 2012, 8:11 AM
Not sure what you are going for here. Do you want the parent to be the size of its children or the children to stretch to the size of the parent? If you don't have a layout it will be the size of its children assuming you have given them heights and don't have a height on the parent. If you do use a layout such as vbox you can specify percentages on the children to take up the parent assuming you have a height on the parent. In almost every situation I have encountered, I want the children to stretch to the size of the parent.

harjits
1 Nov 2012, 8:18 AM
What I need is this

I have 6 grids in the parent panel. Unless I increase the height of the grid I cannot add any other grid. I need to change so that so that when new grids are added to the panel, I don't have to keep adjusting the height of the parent to accomodate that. Let me know if that makes sense.

Tim Toady
1 Nov 2012, 8:23 AM
If your parent panel has a fixed height or if it is managed by the parent's parent you can set autoScroll: true on it. Then, if the children have fixed heights it will scroll when they take up too much space. Does that work for you or are you looking for different behavior?

harjits
1 Nov 2012, 9:41 AM
IF I remove the height of my parent and set autoscroll = true my grids are not being displayed. HEre is the parent Grid in which all the grids are defined


sentry.ResultPanel = Ext.extend(Ext.Panel, {
id:'resultContainer',
frame:false,
autoScroll:true,
resize:true,
forceFit:true,


layout:{
type:'vbox',
align:'stretch'
},
initComponent:function () {


console.log(sentry)
sentry.sentryQueryForm.nameResultsGrid = new NameResultsGrid(sentry.sentryQueryForm);
sentry.sentryQueryForm.phoneResultsGrid = new PhoneResultsGrid(sentry.sentryQueryForm);
sentry.sentryQueryForm.fcResultsGrid = new FcResultsGrid(sentry.sentryQueryForm);
sentry.sentryQueryForm.mtResultsGrid = new MtResultsGrid(sentry.sentryQueryForm);
sentry.sentryQueryForm.irResultsGrid = new IrResultsGrid(sentry.sentryQueryForm);
sentry.sentryQueryForm.tcResultGrid = new TcResultsGrid(sentry.sentryQueryForm);


sentry.sentryQueryForm.nameGrid = sentry.sentryQueryForm.nameResultsGrid;
sentry.sentryQueryForm.phoneGrid = sentry.sentryQueryForm.phoneResultsGrid;
sentry.sentryQueryForm.fcGrid = sentry.sentryQueryForm.fcResultsGrid;
sentry.sentryQueryForm.mtGrid = sentry.sentryQueryForm.mtResultsGrid;
sentry.sentryQueryForm.irResultGrid = sentry.sentryQueryForm.irResultsGrid;


console.log(sentry.sentryQueryForm.tcResultGrid);
var config = {
items:[sentry.sentryQueryForm.nameResultsGrid.gridPanel, sentry.sentryQueryForm.phoneResultsGrid.gridPanel, sentry.sentryQueryForm.tcResultGrid.gridPanel ,sentry.sentryQueryForm.irResultsGrid.gridPanel,
sentry.sentryQueryForm.fcResultsGrid.gridPanel,sentry.sentryQueryForm.mtResultsGrid.gridPanel]
};




Ext.apply(this, config);
sentry.ResultPanel.superclass.initComponent.apply(this, arguments);
}

Tim Toady
1 Nov 2012, 9:49 AM
You need to have a height on the parent or have it managed by its parent for autoScroll to make any sense. Do your grids have heights?

harjits
1 Nov 2012, 10:05 AM
My grids have height. The way I'm adding the panel is as follows

new sentry.ResultPanel().render(document.body)

Tim Toady
1 Nov 2012, 10:17 AM
Why are you rendering it directly to the body? Do you want it to take up the whole page? In that case you would use a viewport. If you are trying to render multiple components to the body, that is not the correct way to do it.

harjits
1 Nov 2012, 10:20 AM
For some reasons when I have this


var find = new sentry.FindWrapperPanel()
var results = new sentry.ResultPanel()
var viewP = new Ext.Viewport({
layout : 'fit',
autoScroll:true,
items : [find,results]
});

it doesn't show the results panel and hence I had to do this....

Tim Toady
1 Nov 2012, 10:31 AM
layout: 'fit' stretches the first child to the parent container's full width and height. You would want a vbox with align stretch. Then you would probably put a height on your find component and a flex: 1 on your results component.

harjits
1 Nov 2012, 10:36 AM
I figured it out , the layout on it was fit and the first panel took all the space and the second panel was being rendered below it, I just had to scroll 1000 pixels below to see it... don't know why if I set to fit it takes the whole view


For some reasons when I have this


var find = new sentry.FindWrapperPanel()
var results = new sentry.ResultPanel()
var viewP = new Ext.Viewport({
layout : 'fit',
autoScroll:true,
items : [find,results]
});

it doesn't show the results panel and hence I had to do this....

harjits
1 Nov 2012, 10:47 AM
I did that and my vertical scroll bar is gone so I can't see all of my grids now. Can only see 3.

harjits
1 Nov 2012, 10:49 AM
I did that and my vertical scroll bar is gone so I can't see all of my grids now. Can only see 3.


layout: 'fit' stretches the first child to the parent container's full width and height. You would want a vbox with align stretch. Then you would probably put a height on your find component and a flex: 1 on your results component.

Tim Toady
1 Nov 2012, 11:31 AM
It should be something like this. Did you drop the autoScroll true on the results panel?

Viewport - vbox layout with align stretch

Find - with a height
Results - flex 1, no height, vbox with align: 'stretch', and autoScroll: true


Grid1 - with height
Grid2 - with height
Grid3 - with height
Grid4 - with height
Grid5 - with height
Grid6 - with height

harjits
2 Nov 2012, 5:42 AM
It didn't help. I have viewport with



var viewP = new Ext.Viewport({
layout:{
type:'vbox',
align:'stretch'
},
items : [find,results]
});

Results with

sentry.ResultPanel = Ext.extend(Ext.Panel, {
id:'resultContainer',
frame:false,
autoScroll:true,
flex:1,
layout:{
type:'vbox',
align:'stretch'
},

and find with a height. I still don't see the scroll bar on the right and I just see 3 grids. I'm attaching the picture...39775

It should be something like this. Did you drop the autoScroll true on the results panel?

Viewport - vbox layout with align stretch
Find - with a height
Results - flex 1, no height, vbox with align: 'stretch', and autoScroll: true


Grid1 - with height
Grid2 - with height
Grid3 - with height
Grid4 - with height
Grid5 - with height
Grid6 - with height