PDA

View Full Version : Fieldsets with hbox and vbox



mjhaston
11 May 2013, 3:49 AM
All help appreciated. It seems like the hbox marked in red should be vbox. That does make the fieldsets stretch to the same height, but it throws just about everything else off!

I think I've paste in all of the necessary code.


Left fieldset:


var incomeProtection = Ext.create('Ext.form.FieldSet', {
xtype : 'fieldset',
title : 'INCOME PROTECTION',
cls : 'italic-it',
layout : {
type : 'vbox',
pack : 'start',
align : 'stretch'
},
margins : '0 5 0 0',
flex : 3,
items : [{
xtype : 'container',
layout : 'hbox',
items : [{
xtype : 'box',
html : '<b>Disability Benefits</b>',
margins : '0 5 5 0',
flex : 3
}, {
xtype : 'box',
//html : '<center>title</center>',
margins : '0 5 5 0',
flex : 1
}]
}, {
layout : 'hbox',
xtype : 'container',
defaultType : 'textfield',
defaults : {
readOnly : true
},
items : [{
xtype : 'box',
html : '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i>Estimated Initial Monthly Disability Income</i>',
margins : '0 5 5 0',
flex : 3
}, {
hideEmptyLabel : true,
//xtype : 'textfield',
xtype : 'dollarfield',
cls : 'textField-align-right',
itemId : 'disBox',
name : 'dis$$',
margins : '0 5 5 0',
flex : 1
//width : 70
}]
}, {
xtype : 'container',
layout : 'hbox',
items : [{
xtype : 'box',
html : '<b>Death Benefit Prior to Retirement</b>',
margins : '10 5 5 0',
flex : 3
}, {
xtype : 'box',
margins : '10 5 5 0',
flex : 1
}]
}, {
layout : 'hbox',
xtype : 'container',
defaultType : 'textfield',
defaults : {
readOnly : true
},
items : [{
xtype : 'box',
html : '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i>First Year Estimated Payout Value</i>',
margins : '0 5 5 0',
flex : 3
}, {
hideEmptyLabel : true,
//xtype : 'textfield',
xtype : 'dollarfield',
cls : 'textField-align-right',
itemId : 'adth13Box',
name : 'adth13$',
margins : '0 5 5 0',
flex : 1
//width : 70
}]
}, {
layout : 'hbox',
xtype : 'container',
defaultType : 'textfield',
defaults : {
readOnly : true
},
items : [{
xtype : 'box',
html : '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i>Second Year Estimated Payout Value</i>',
margins : '0 5 5 0',
flex : 3
}, {
hideEmptyLabel : true,
//xtype : 'textfield',
xtype : 'dollarfield',
cls : 'textField-align-right',
itemId : 'adth23Box',
name : 'adth23$',
margins : '0 5 5 0',
flex : 1
//width : 70
}]
}, {
layout : 'hbox',
xtype : 'container',
defaultType : 'textfield',
defaults : {
readOnly : true
},
items : [{
xtype : 'box',
html : '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i>Full Estimated Payout Value</i>',
margins : '0 5 5 0',
flex : 3
}, {
hideEmptyLabel : true,
//xtype : 'textfield',
xtype : 'dollarfield',
cls : 'textField-align-right',
itemId : 'adthBox',
name : 'adth$',
margins : '0 5 5 0',
flex : 1
//width : 70
}]
}]
});




Right fieldset:


var retirementAccounts = Ext.create('Ext.form.FieldSet', {
xtype : 'fieldset',
title : 'RETIREMENT ACCOUNTS',
cls : 'italic-it',
layout : {
type : 'hbox',
pack : 'start',
align : 'stretch'
},
flex : 5,
items : [{
xtype : 'container',
layout : {
type : 'vbox',
pack : 'start',
align : 'stretch'
},
flex : 4,
items : [{
xtype : 'container',
layout : {
type : 'hbox',
pack : 'start',
align : 'stretch'
},
defaults : {
labelAlign : 'top',
margin : '0px 5px 5px 0px',
labelStyle : 'height:40px'
},
items : [{
xtype : 'box',
margins : '0 5 5 0',
flex : 3
}, {
xtype : 'displayfield',
name : 'eolm',
margins : '0 5 5 0',
flex : 1,
renderer : function(value) {
return '<i>Value of account as of ' + value + '</i>';
}
}, {
xtype : 'displayfield',
name : 'retirementRun1',
margins : '0 5 5 0',
flex : 1,
renderer : function(value) {
return '<i>Est value of account as of ' + value + '</i>';
}
}, {
xtype : 'displayfield',
name : 'retirementRun2',
margins : '0 5 5 0',
flex : 1,
renderer : function(value) {
return '<i>Est monthly payment as of ' + value + '</i>';
}
}]
}, {
xtype : 'container',
layout : {
type : 'hbox',
pack : 'start',
align : 'stretch'
},
defaultType : 'textfield',
defaults : {
readOnly : true
},
items : [{
xtype : 'box',
html : '<b>Comprehensive Retirement Plan</b>',
margins : '0 5 5 0',
flex : 3
}, {
hideEmptyLabel : true,
//xtype : 'textfield',
xtype : 'dollarfield',
cls : 'textField-align-right',
itemId : 'rpValueBox',
name : 'rpValue2',
margins : '0 5 5 0',
flex : 1
}, {
hideEmptyLabel : true,
//xtype : 'textfield',
xtype : 'dollarfield',
cls : 'textField-align-right',
itemId : 'avm01Box',
name : 'avm01',
margins : '0 5 5 0',
flex : 1
}, {
hideEmptyLabel : true,
//xtype : 'textfield',
xtype : 'dollarfield',
cls : 'textField-align-right',
itemId : 'cmp01Box',
name : 'cmp01',
margins : '0 5 5 0',
flex : 1
}]
}, {
xtype : 'container',
layout : {
type : 'hbox',
pack : 'start',
align : 'stretch'
},
defaultType : 'textfield',
defaults : {
readOnly : true
},
items : [{
xtype : 'box',
html : '<b>The Annuity Supplement (TAS)</b>',
margins : '0 5 5 0',
flex : 3
}, {
hideEmptyLabel : true,
//xtype : 'textfield',
xtype : 'dollarfield',
cls : 'textField-align-right',
itemId : 'tasValueBox',
name : 'tasValue2',
margins : '0 5 5 0',
flex : 1
}, {
hideEmptyLabel : true,
//xtype : 'textfield',
xtype : 'dollarfield',
cls : 'textField-align-right',
itemId : 'avm02Box',
name : 'avm02',
margins : '0 5 5 0',
flex : 1
}, {
hideEmptyLabel : true,
//xtype : 'textfield',
xtype : 'dollarfield',
cls : 'textField-align-right',
itemId : 'cmp02Box',
name : 'cmp02',
margins : '0 5 5 0',
flex : 1
}]
}, {
xtype : 'container',
layout : {
type : 'hbox',
pack : 'start',
align : 'stretch'
},
defaultType : 'textfield',
defaults : {
readOnly : true
},
items : [{
xtype : 'box',
html : '<b>Tax Deferred Annuity (TDA)</b>',
margins : '0 5 5 0',
flex : 3
}, {
hideEmptyLabel : true,
//xtype : 'textfield',
xtype : 'dollarfield',
cls : 'textField-align-right',
itemId : 'tdaValueBox',
name : 'tdaValue2',
margins : '0 5 5 0',
flex : 1
}, {
hideEmptyLabel : true,
//xtype : 'textfield',
xtype : 'dollarfield',
cls : 'textField-align-right',
itemId : 'avm03Box',
name : 'avm03',
margins : '0 5 5 0',
flex : 1
}, {
hideEmptyLabel : true,
//xtype : 'textfield',
xtype : 'dollarfield',
cls : 'textField-align-right',
itemId : 'cmp03Box',
name : 'cmp03',
margins : '0 5 5 0',
flex : 1
}]
}, {
xtype : 'container',
layout : {
type : 'hbox',
pack : 'start',
align : 'stretch'
},
defaultType : 'textfield',
defaults : {
readOnly : true
},
items : [{
xtype : 'box',
html : '<b>Totals</b>',
margins : '0 5 5 0',
flex : 3
}, {
hideEmptyLabel : true,
//xtype : 'textfield',
xtype : 'dollarfield',
cls : 'textField-align-right',
itemId : 'totalValueBox',
name : 'totalValue',
margins : '0 5 5 0',
flex : 1
}, {
hideEmptyLabel : true,
//xtype : 'textfield',
xtype : 'dollarfield',
cls : 'textField-align-right',
itemId : 'totalValueBox2',
name : 'totalValue2',
margins : '0 5 5 0',
flex : 1
}, {
hideEmptyLabel : true,
//xtype : 'textfield',
xtype : 'dollarfield',
cls : 'textField-align-right',
itemId : 'totalIncomeBox',
name : 'totalIncome',
margins : '0 5 5 0',
flex : 1
}]
}]
}, chart]
});



Chart:


var chart = Ext.create('Ext.chart.Chart', {
//title : 'Estimated Monthly Payments',
width : 150,
height : 150,
animate : true,
store : chartStore,
shadow : true,
theme : 'Base',
series : [{
type : 'pie',
angleField : 'data',
showInLegend : false,
tips : {
trackMouse : true,
width : 100,
height : 28,
renderer : function(storeItem, item) {
// calculate and display percentage on hover
var total = 0;
chartStore.each(function(rec) {
total += rec.get('data');
});
var s = Ext.util.Format.usMoney(storeItem.get('data'));
this.setTitle(storeItem.get('name') + ': ' + s.substring(0, s.indexOf('.')));
}
},
highlight : {
segment : {
margin : 20
}
},
label : {
field : 'name',
display : 'rotate',
contrast : true,
font : '16px Arial'
}
}]
});



Where the left and right fieldsets are laid out:


xtype : 'container',
layout : {
type : 'hbox',
pack : 'start',
align : 'stretch'
},
items : [incomeProtection, retirementAccounts]

suzuki1100nz
11 May 2013, 1:47 PM
Hi,

I wrapped the fieldsets as you have in a container with hbox layout.
The parent of the fieldset container can have vbox layout but you need to set the layout options as per below (appears align : "left" which is the default for vbox kills the fieldsets layout).

The code below worked well for me and respected the flex setting of the fieldsets.


var window = Ext.create('Ext.Window',{
height : 500,
width : 800,
title : 'Test ExtJS',
layout : {
type : 'vbox',
pack : 'start',
align : 'stretch'
},
items : [{
xtype : 'container',
height : 300,
layout : {
type : 'hbox',
pack : 'start',
align : 'stretch'
},
items : [incomeProtection, retirementAccounts]
}]
});