PDA

View Full Version : Grid not rendering properly in card layout



dbassett74
28 Sep 2009, 6:52 AM
I'm not sure if I'm missing something here, but here is the problem. I have a Window, which contains a Panel with a card layout. In both the first and second cards, I have a grid. Both grids have an autoexpand column defined. The first visible card, shows a properly expanded column in the grid. However, when showing card two, the column is not expanded. I tried issuing a doLayout() on the grid, but that doesn't seem to work. Can someone help me here?

Animal
28 Sep 2009, 9:51 AM
It should work. Show some code.

dbassett74
28 Sep 2009, 3:26 PM
Okay, I will try to create a sample app with minimum code to show the problem. Thanks.

dbassett74
29 Sep 2009, 8:20 AM
Here's the code. It seems that if the grid is in a panel with an absolute layout, as an item in a card layout, the problem occurs (autoexpand column not working). I need this nested layout because I need control over the layout of items in the card panel, but the card panel is a fix layout.



var pnl = new Ext.Panel({
layout: "card",
height: 400,
width: 600,
items: [
{ xtype: "panel", layout: "absolute",
items: [
{ xtype: "grid", width: 550, height: 300, x: 20, y: 20,
store: new Ext.data.JsonStore({
sortInfo: {
field: 'id',
direction: 'DESC'
},
id: 'id',
fields: ['id', 'employee', 'message']
}),
columns: [
{ header: 'Name', dataIndex: 'employee', width: 50 },
{ header: 'Message', dataIndex: 'message', id: "message" }
],
autoExpandColumn: 'message'
}
]
}
],
renderTo: "divBody"
});

pnl.layout.setActiveItem(0);

Animal
29 Sep 2009, 9:52 AM
Yes, something funny going on. A simplified testcase:



var pnl = new Ext.Panel({
title: 'Single card panel',
layout: "card",
height: 400,
width: 600,
items: {
xtype: "container",
items: {
xtype: "grid", width: 550, height: 300,
store: new Ext.data.JsonStore({}),
columns: [
{ header: 'Name', dataIndex: 'employee', width: 50 },
{ header: 'Message', dataIndex: 'message', id: "message" }],
autoExpandColumn: 'message'
}
},
renderTo: document.body
});
pnl.layout.setActiveItem(0);


Looks like it's allocating space before the View is rendered (which only happens when the setActiveItem is called)

Animal
29 Sep 2009, 10:06 AM
And this works:



Ext.getBody().update('')
var pnl = new Ext.Panel({
title: 'Single card panel',
layout: "card",
height: 400,
width: 600,
items: {
xtype: "container",
items: {
id: 'grid',
xtype: "grid", width: 550, height: 300,
store: new Ext.data.JsonStore({}),
columns: [
{ header: 'Name', dataIndex: 'employee', width: 50 },
{ header: 'Message', dataIndex: 'message', id: "message" }],
autoExpandColumn: 'message'
}
},
renderTo: document.body
});
pnl.layout.setActiveItem(0);
Ext.getCmp("grid").view.layout();


It needs laying out on activation

Animal
29 Sep 2009, 10:07 AM
And this works:



Ext.getBody().update('')
var pnl = new Ext.Panel({
title: 'Single card panel',
layout: "card",
height: 400,
width: 600,
items: {
xtype: "container",
items: {
id: 'grid',
xtype: "grid", width: 550, height: 300,
store: new Ext.data.JsonStore({}),
columns: [
{ header: 'Name', dataIndex: 'employee', width: 50 },
{ header: 'Message', dataIndex: 'message', id: "message" }],
autoExpandColumn: 'message'
}
},
renderTo: document.body
});
pnl.layout.setActiveItem(0);
Ext.getCmp("grid").view.layout();


It needs laying out on activation

dbassett74
29 Sep 2009, 10:22 AM
It works! So is this a bug?