PDA

View Full Version : Fieldset height 100%



extjser12
16 Mar 2012, 6:28 AM
Hi together

How I have to config my fieldsets, so that they will fill out (width and height 100%) their parent element? Sadly my code doesn't do this.



Ext.onReady(function () {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'center',
border: false,
layout: 'fit',
items: [
panel
]
}]
});
});

var panel = Ext.create('Ext.form.Panel', {
title: 'Table layout',
cls: 'table1',
layout: {
type: 'table',
columns: 2
},


items: [{
xtype: 'container',
layout: 'fit',
cellCls: 'cell_left',
rowspan: 2,
items: [{
xtype: 'fieldset',
title: 'Fieldset 1',
autoHeight: true
}]
}, {
xtype: 'container',
layout: 'fit',
items: [{
xtype: 'fieldset',
title: 'Fieldset 2',
autoHeight: true
}]
}, {
xtype: 'container',
layout: 'fit',
items: [{
xtype: 'fieldset',
title: 'Fieldset 3',
autoHeight: true
}]
}, {
xtype: 'container',
layout: 'fit',
rowspan: 3,
cellCls: 'cell_left',
items: [{
xtype: 'fieldset',
title: 'Fieldset 4',
autoHeight: true
}]
}, {
xtype: 'container',
layout: 'fit',
items: [{
xtype: 'fieldset',
title: 'Fieldset 5',
autoHeight: true
}]
}, {
xtype: 'container',
layout: 'fit',
items: [{
xtype: 'fieldset',
title: 'Fieldset 6',
autoHeight: true
}]
}, {
xtype: 'container',
layout: 'fit',
items: [{
xtype: 'fieldset',
title: 'Fieldset 7',
autoHeight: true
}]
}]
});


CSS:

.table1 table.x-table-layout {
width: 100%;
height: 100%;
}

.cell_left {
width: 60%;
}

.table1 td {
vertical-align: top;
}

.table1 tr:nth-child(1) {
height: 12%;
}

.table1 tr:nth-child(2) {
height: 28%;
}

.table1 tr:nth-child(3) {
height: 12%;
}

.table1 tr:nth-child(4) {
height: 24%;
}

.table1 tr:nth-child(5) {
height: 24%;
}

Thanks for your help!

Kind regards
extjser12

Igor.Szyporyn
16 Mar 2012, 8:44 AM
var panel = Ext.create('Ext.form.Panel', {
title: 'Table layout',
cls: 'table1',
layout: {
type: 'table',
columns: 2
},
items: [{
xtype: 'container',
layout: 'anchor',
cellCls: 'cell_left',
rowspan: 2,
items: [{
xtype: 'fieldset',
title: 'Fieldset 1',
anchor: "100% 100%"
}]
}]
});

Hope that works for you :)

extjser12
16 Mar 2012, 12:17 PM
Thanks for your answer. Sorry, but this doesn't work.
Do you have another idea?

vela1606
18 Mar 2012, 2:07 PM
I did remove a lot of over nesting and the classes/css code
You can put them back if you need.



var panel = Ext.create('Ext.form.Panel', {
title: 'Table layout',
layout: {
type: 'table',
columns: 2,
tableAttrs: {
style: {
width: '100%',
height:'100%',
}
}
},
defaults:{
xtype: 'fieldset',
height:'100%',
},
items: [{
title: 'Fieldset 1',
rowspan: 2,
}, {
title: 'Fieldset 2',
}, {
title: 'Fieldset 3',
}, {
title: 'Fieldset 4',
rowspan: 3,
}, {
title: 'Fieldset 5',
}, {
title: 'Fieldset 6',
}, {
title: 'Fieldset 7',
}]
});
Ext.onReady(function () {
Ext.create('Ext.container.Viewport', {
layout:'fit',
items: [
panel
]
});
});?

If you want some space between cells just use these defaults


defaults:{
xtype: 'fieldset',
height:'100%',
margin:5
},

extjser12
19 Mar 2012, 12:06 AM
Thanks for your answer!
Your code doesn't for me. The fieldset still have the same height as previously.

Kind regards
extjser12

voodoov
19 Mar 2012, 1:02 AM
Hi,

If I got what you want, you can do this with render event like this:


...

items: [{
xtype: 'fieldset',
title: 'My Fieldset',
listeners: {
render: function(obj) {
obj.setHeight( Ext.getCmp('parentCmp').getHeight() ); // parentCmp = [your parent component id]
}
}
}

vela1606
19 Mar 2012, 1:43 AM
weird because here is my test case
http://jsfiddle.net/vela1606/qZMTe/

vela1606
19 Mar 2012, 1:48 AM
Ohhh is working on Chrome but not in FF :-(

vela1606
19 Mar 2012, 2:26 AM
you can archive the same results using hbox and vbox try using that