PDA

View Full Version : [SOLVED] Vbox height



ctp
13 Oct 2010, 5:29 AM
Hi folks,

I try to compose a simple FieldSet in vbox Layout, but the following code produces a FieldSet with the height 0. No textfields are visible within the FieldSet. The FieldSet is rendered properly when I add a fix height value but how to render the component without fix height?


App.widget.BasicDataFieldSet = Ext.extend(Ext.form.FieldSet, {
constructor: function (config) {
var config = Ext.apply(config || {}, {
xtype: 'fieldset',
title: 'Basic data',
collapsible: true,
layout: 'vbox',
defaults: {
flex: 1,
layout: 'form',
border: false
},
items: [{
defaultType: 'textfield',
items: [{
fieldLabel: 'foo'
},{
fieldLabel: 'bar'
}]
}]
});
App.widget.BasicDataFieldSet.superclass.constructor.call(this, config);
}
});
Ext.reg('basic_data_field_set', App.widget.BasicDataFieldSet);

Condor
13 Oct 2010, 5:37 AM
flex:1 stretches the inner panel to fit the outer fieldset. This only works if the fieldset actually has a height!

ctp
13 Oct 2010, 5:41 AM
Hi Condor,

so you mean I have to set the height with a static value? 'autoHeight: true' doesnt solve my trouble but i dont wanna use static heights/widths within my app :-(

Condor
13 Oct 2010, 5:56 AM
Why are you using flex:1? What kind of layout are you trying to achieve?

ctp
13 Oct 2010, 6:11 AM
Same behaviour with no 'flex: 1'. I have to define static height to get the fieldset's content rendered. My aim is to get such layout rendered:


Foo: Bar:
-------------- --------------
| | | |
-------------- --------------

Foobar:
------------------------------
| |
| |
------------------------------

I'm using vbox for the outer layout, hbox for the upper 50% (foo and bar textfields) and a simple container for the lower foobar textarea.

Condor
13 Oct 2010, 6:16 AM
So you really want this layout?

{
xtype: 'form',
autoHeight: true,
layout: 'anchor',
items: [{
anchor: '100%',
autoHeight: true,
xtype: 'container',
layout: 'vbox',
items: [{
flex: 1,
autoHeight: true,
xtype: 'fieldset',
title: 'Foo',
items: [...]
},{
flex: 1,
autoHeight: true,
xtype: 'fieldset',
title: 'Bar',
items: [...]
}]
},{
anchor: '100%',
autoHeight: true,
xtype: 'fieldset',
title: 'Foobar',
items: [...]
}]
}

ctp
13 Oct 2010, 6:17 AM
I've simplified the code to a minimal snippet:

With explicit height all works fine, without the height, the FieldSet shrinks so no items are visible:


App.widget.BasicDataFieldSet = Ext.extend(Ext.form.FieldSet, {
constructor: function (config) {
var config = Ext.apply(config || {}, {
xtype: 'fieldset',
title: 'Foo bar',
layout: 'vbox',
height: 150,
items: [{
layout: 'form',
defaultType: 'textfield',
items: [{
fieldLabel: 'foo'
},{
fieldLabel: 'bar'
}]
}]
});
App.widget.BasicDataFieldSet.superclass.constructor.call(this, config);
}
});
Ext.reg('basic_data_field_set', App.widget.BasicDataFieldSet);

ctp
13 Oct 2010, 6:25 AM
This is strange. Take a look at the code snippet below. layout: hbox => foo & bar are rendered in the left column, baz & foobar in the right. Like I'm expecting. Swapped layout: hbox to vbox => the fieldset shrinks, no items visible without adding a height value explicitely. What's going wrong there?


App.widget.BasicDataFieldSet = Ext.extend(Ext.form.FieldSet, {
constructor: function (config) {
var config = Ext.apply(config || {}, {
xtype: 'fieldset',
title: 'Foo bar',
layout: 'hbox',
defaults: {
layout: 'form'
},
items: [{
defaultType: 'textfield',
items: [{
fieldLabel: 'foo'
},{
fieldLabel: 'bar'
}]
},{
defaultType: 'textfield',
items: [{
fieldLabel: 'baz'
},{
fieldLabel: 'foobar'
}]
}]
});
App.widget.BasicDataFieldSet.superclass.constructor.call(this, config);
}
});
Ext.reg('basic_data_field_set', App.widget.BasicDataFieldSet);

Condor
13 Oct 2010, 6:31 AM
1. I would recommend using xtype:'container' instead of the default xtype:'panel' for the field containers.
2. The two textfield containers should be configured with flex:1 and autoHeight:true.
3. The fieldset itself should also be configured with autoHeight:true (or does it get a height from the layout it is in?).

ctp
13 Oct 2010, 7:01 AM
Hi Condor,

the vbox drives me crazy. I absolutely don't understand what's going wrong. I've broken down the code to a simple window which should render a vbox within a container. The same here: without explicit height no items within the container :-( Tried all now: with flex, without flex, with autoHeight and without. Absolutely confusing ...


App.ComponentTestWindow = Ext.extend(Ext.Window, {
constructor: function (config) {
var config = Ext.apply(config || {}, {
height: 150,
width: 250,
items: [{
xtype: 'container',
layout: 'vbox',
items: [{
layout: 'form',
defaultType: 'textfield',
items: [{
fieldLabel: 'Foo'
},{
fieldLabel: 'Bar'
}]
}]
}]
});
App.ComponentTestWindow.superclass.constructor.call(this, config);
}
});

Condor
13 Oct 2010, 7:07 AM
You are overnesting! Why are you putting a field inside a panel inside a container inside a window?

The window should be layout:'vbox' and the container layout:'form' and you don't need the extra panel.

ctp
13 Oct 2010, 9:56 AM
Hi Condor,

I've combined all ways to get the fieldset render properly but didnt find the solution. That's my code snippet I'm playing around in my Firebug. I have to tell Ext the height of the FieldSet, otherwise no items within are rendered. What's going wrong?


var win = new Ext.Window({
title: 'Window',
width: 400,
height: 200,
items: [{
xtype: 'fieldset',
title: 'Fieldset',
height: 150,
layout: 'vbox',
layoutConfig: {
pack: 'start',
align: 'stretch'
},
defaults: {
flex: 1,
layout: 'form'
},
items: [{
defaultType: 'textfield',
items: [{
fieldLabel: 'Label 1'
},{
fieldLabel: 'Label 2'
}]
},{
defaultType: 'textfield',
items: [{
fieldLabel: 'Label 3'
},{
fieldLabel: 'Label 4'
}]
}]
}]
});
win.show(this);

Condor
13 Oct 2010, 10:45 AM
Your window is missing layout:'fit'.

ctp
13 Oct 2010, 11:09 AM
Thanks Condor. You were right ;-)