View Full Version : GridPanel as a card doesn't resize horizontally

3 Jun 2009, 6:50 PM
I have a panel with cardlayout and a GridPanel as one of the cards. It displays fine, except when the containing panel (with the cardlayout) is resized, the grid card does not resize horizontally. I saw some various old threads on this, but haven't gotten it to work.

What's the secret?


3 Jun 2009, 11:23 PM
The secret (Actually, its no secret because I have to tell people several times a day, and have been doing so for about two years now) is not to overnest.

4 Jun 2009, 3:11 AM
Hi Animal,
Darn, sorry if I asked a FAQ. But by not to overnest I assume you are not talking about birds.

I have a grid as a card in a panel with cardlayout. That parent panel resizes because its split but the cards do not. Is that overnested?

4 Jun 2009, 3:43 AM
post your code so we can help

4 Jun 2009, 6:50 AM
Here is the relevant sections from my subclass. It has hundreds of lines of code, so I just post the important sections that are involved.

FusionViewPanel = Ext.extend(Ext.Panel,{


addView: function(view,config) {

var grid = new Ext.grid.GridPanel({
autoScroll: true,
sm: rowSelectionModel,
store: store,
viewConfig: {
forceFit: true,
autoFill: true

view: new Ext.grid.GroupingView({
enableNoGroups: true,
enableRowBody: true,
enableGrouping: false,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'

var cardlayout = this.layoutObject;
constructor: function(.. ....) {

var layout = new Ext.layout.CardLayout({
this.layoutObject = layout;

var rconfig = Ext.apply(config,{
id: Ext.id(),
activeItem: 0, // make sure the active item is set on the container config!

When the panel itself is added to a tabpanel it fills the space fine, but when the tabpanel resizes, only the panel above resizes, the grid card in it does not.

Thanks for any tips guys! You rock.

4 Jun 2009, 6:59 AM
Don't do all that stuff with new Ext.layout.BLah

Just use the config layout: 'fiit'

And remove the layout property from the prototype.

JUst use this.layout to reference the layout manager.

4 Jun 2009, 7:14 AM
The problem I had before though, was that referencing the layout field of a container before it was rendered produced the string 'card'. And when the panel was rendered it did not have the correct card in the active slot. Its kind of a chicken and the egg, but if I manually created the card layout, I could force the active card on it so it rendered on the first pass.

I'm not sure how that prevents the grid from resizing when it renders fine on the first pass, but only because I'm still learning how ext works. :)

EDIT: Ok, if I change the layout to 'card' and not the object, it resizes properly, but I couldn't see how to get the instance of the layout manager to change the active card. reading now.....

EDIT: Yeah, see I just tried to use cardLayout = panel.getLayout(); cardLayout.setActiveItem(grid);
and it doesn't work because I don't get an instance of cardlayout from panel.getLayout().....

RESOLVED: I found a way to get things to work the way I need. I use layout:'card' but I have to fork some logic on condition of the panel being shown already or not. Originally I want to instantiate all the objects and set the active card on the layout before rendering via method call, but that only works after it is rendered.

4 Jun 2009, 7:17 AM
Here's a capture of what's happening. the card doesn't resize to the parent.