PDA

View Full Version : Grid + Panel within a Panel which is a tab



Morris
28 Nov 2007, 5:14 AM
I've got a Tab Panel which contains a Panel as one of the Tabs, entitled "Messages".

Within this Messages Tab (Panel) I've got an Ext.grid.GridPanel and an Ext.Panel.

The Grid all works fine, and the Panel beneath shows some dummy HTML, but I want a splitter between them and can't get it to appear. Also the sizes need forcing, for example to see the Grid I have to say 'height:200' - which is not desirable.

Am I going about this the right way?

santosh.rajan
28 Nov 2007, 6:46 AM
you might want to set a border layout for the tab. the grid becomes 'center' and the panel 'south'

Morris
28 Nov 2007, 7:35 AM
Hi Santosh,
Thanks for the reply. It's nearly there with a layout:'border' as you suggest.
The code is :



var messages = new Ext.grid.GridPanel({
region:'center',
border:false,
minSize:150,
height:200,
bodyStyle: 'padding:0',
store: dataStore,
cm: columnModel,
trackMouseOver:true,
... etc etc
});

var view_message = new Ext.Panel({
region:'south',
split:true,
autoScroll:true,
border:false,
title:'No message selected',
html:'<%= words(200) %>'
});

var panel = new Ext.Panel({
title:'Messages',
layout:'border',
autoScroll:false,
items:[messages, view_message]
});



Interestingly, when I did as you said and had regions 'center' and 'south' instead of 'north' and 'center' the splitter appears.

It's almost spot on, except for the scroll bars. The grid at the top has scroll bars as appropriate, but when the south region has too much text the scroll bars appear on the outer panel not the 'view_message' panel, plus the top grid disappears.

Any clues on this one?

Cheers,
Morris

santosh.rajan
28 Nov 2007, 7:47 AM
Try layout: 'fit' for view_message or set height.