Grid + Panel within a Panel which is a tab

[Morris]

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]

you might want to set a border layout for the tab. the grid becomes 'center' and the panel 'south'

[Morris]

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]

Try layout: 'fit' for view_message or set height.