PDA

View Full Version : Form layout doesn't resize as expected



droesler
17 Aug 2009, 9:27 PM
Hi,

I have the following form that gets added to a tab in a tab panel in the center region of a viewport.

If the browser is resized the form doesn't resize with it. Also, when the data store for grid1 is loaded the grid doesn't expand in height to show the loaded data. One row is partially visible.

Grids and another form in other tabs of the tab panel in the center region will resize properly but the other form is pretty simple and the grids just get loaded into a tab.

I've looked through the different layout configurations but don't understand what I'm doing wrong.

Dennis



var grid1 = new Ext.grid.GridPanel({
store : gridStore,
columns : gridColModel,
autoExpandColumn : 4,
id : 'grid1',
stateId : 'grid1',
stateful : true,
loadMask : {msg: "Loading Grid 1..."},
view : new Ext.ux.grid.BufferView( {
// render rows as they come into viewable area.
scrollDelay: false
}),
width : 'auto', // <------------ What should go here?
height : 'auto', // <------------ What should go here?
frame : true,
tools : [
{
id :'refresh',
qtip : 'Load/Reload Grid 1...',
handler : function (event, toolEl, panel) {
gridStore.reload( {
params: {
parm1: val1,
parm2: val2,
parm3: val3
}
});
}
}
],
keys: {
key: [10,13],
fn: function() {
var record = gridStore.getAt(gridRow);
grid2Store.add(record);
grid2Store.sort('Column', 'ASC');
}
},
listeners: {
'celldblclick': function(grid, rIndex, cIndex, event){
var record = gridStore.getAt(rIndex);
grid2Store.add(record);
grid2Store.sort('Column', 'ASC');
},
'rowclick': function(grid, rIndex, event){
gridRow = rIndex;
}
},
title : 'Grid 1'
});

var myForm = new Ext.FormPanel (
{
frame : true,
id : 'myForm',
border : false,
bodyBorder : false,
bodyStyle : 'padding:5px 5px 0',
monitorResize : true,
bufferResize : true,
layout : 'form',
items: [
{
layout :'column',
labelAlign : 'top',
border : false,
items: [
{
columnWidth :.25,
border : false,
layout : 'form',
items: [
{
xtype:'textfield',
...
},
{
xtype:'combo',
...
},
{
xtype:'combo',
...
},
{
xtype:'combo',
...
}
] // end items of first column
}, // end of first column definition
{
columnWidth :.25,
border : false,
layout : 'form',
items: [
{
xtype:'textfield',
...
},
{
xtype:'combo',
...
},
{
xtype:'combo',
...
},
{
xtype:'checkbox',
...
}
] // end of items in second column
}, // end of second column definition
{
columnWidth :.25,
border : false,
layout : 'form',
items: [
{
xtype:'textfield',
...
},
{
xtype:'combo',
...
},
{
xtype:'combo',
...
}
] // end of items in third column
}, // end of third column definition
{
columnWidth :.25,
border : false,
layout : 'form',
items: [
{
xtype:'textfield',
...
},
{
xtype:'combo',
...
},
{
xtype:'combo',
...
}
] // end of items in fourth column
} // end of fourth column definition
] // end of column layout
}, // end of first item in formPanel - column layout for form fields
{
xtype : 'spacer',
height: '30px'
}, // end of second item in formPanel - space between column layout and tabPanel
{
xtype :'tabpanel',
plain : true,
activeTab : 2,
defaults :{bodyStyle:'padding: 5px'},
items: [
{
title : 'Tab 1',
layout : 'fit',
defaultType : 'textarea',
items : { name: 'ta1'}
},
{
title : 'Tab 2',
layout : 'fit',
defaultType : 'textarea',
items : { name: 'ta2'}
},
{
title : 'Tab 3',
layout : 'fit',
defaultType : 'textarea',
items : { name: 'ta3'}
}
] // end of tabs in tabPanel
}, // end of third item in formPanel - tabPanel
{
xtype: 'spacer',
height: '30px'
}, // end of fourth in formPanel - space between tabPanel and stds grids
{
layout : 'form',
labelWidth : 120,
labelAlign : 'right',
items: [
{
xtype : 'textfield',
...
}
]
},
{ // place holders until the data stores for the grids are loaded
layout :'column',
id : 'myGrids',
border : false,
items: [
{
columnWidth : .5,
bodyStyle :'padding:5px 5px 0',
border : false,
layout : 'fit',
items : [ grid1 ]
},
{
columnWidth : .5,
bodyStyle :'padding:5px 5px 0',
border : false,
layout : 'fit',
items : [ grid2 ]
}
]
} // end of fifth item in formPanel - place holder for grids
], // end of fields on the formPanel
buttons: [
{
text : 'Button Text',
type : 'submit',
formBind : true,
handler : function(button, event) {
...
}
},
{
text : 'Another Button',
handler : function(button, event) {
alert('Not yet implemented...');
}
},
{
text : 'YAB',
handler : function(button, event) {
alert('Not yet implemented...');
}
}
] // end of button definitions
} // end of formPanel definition
); // end of new() function

Animal
17 Aug 2009, 9:34 PM
What, you're somehow expecting that layout: 'column' Panel to somehow recieve sizing from.... somewhere? Why? What layout (http://extjs.com/deploy/dev/docs/?class=Ext.Container&member=layout) manager would be controlling it, and why?

Animal
17 Aug 2009, 9:37 PM
{
columnWidth : .5,
bodyStyle :'padding:5px 5px 0',
border : false,
layout : 'fit',
items : [ grid1 ]
}


Why WRAP the Grid in that extra layer of Paneling?

All these things need a height defining. Otherwise what height are they to be?

droesler
17 Aug 2009, 9:41 PM
{
columnWidth : .5,
bodyStyle :'padding:5px 5px 0',
border : false,
layout : 'fit',
items : [ grid1 ]
}


Why WRAP the Grid in that extra layer of Paneling?

All these things need a height defining. Otherwise what height are they to be?

I was under the assumption that a column needed to define the items that went into the column. I'll re-review how to define this.

Thanks

Dennis

droesler
17 Aug 2009, 9:44 PM
What, you're somehow expecting that layout: 'column' Panel to somehow recieve sizing from.... somewhere? Why? What layout (http://extjs.com/deploy/dev/docs/?class=Ext.Container&member=layout) manager would be controlling it, and why?


Thanks Animal. I'll find a different way to layout the fields at the top of the form. I was having trouble laying the fields out the way they are in the column layout. I resorted to that without realizing that the column layout wouldn't handle resizing properly.

Dennis

droesler
17 Aug 2009, 11:34 PM
Thanks Animal. I'll find a different way to layout the fields at the top of the form. I was having trouble laying the fields out the way they are in the column layout. I resorted to that without realizing that the column layout wouldn't handle resizing properly.

Dennis

I took the code for Form 3 from the samples and dropped it into the tab my form was going in. I needed to resize the browser twice for the form to resize to the size of the browser. Is this expected?

Thanks

Dennis

Animal
18 Aug 2009, 2:26 AM
I don't mean you to find a different way. They way you are thinking, you will not succeed.

That nested column layout Panel is not being sized by it's owner.

So it won't ever lay itself out dynamically.

Think about it.

Components are sized by the layout manager of their parent Container (IF it's a size managing layout, and IF the configs are there to tell it to do it).

So.

Your embedded column layout Panel is inside a FormPanel.

How do you want your column layout Panel to be sized by that FormPanel's layout?