1. #1
    Sencha User
    Join Date
    Jan 2008
    Location
    Levittown, PA
    Posts
    316
    Answers
    2
    Vote Rating
    2
    mjhaston is on a distinguished road

      0  

    Default Answered: FieldSet with two items side-by-side

    Answered: FieldSet with two items side-by-side


    I would like to include this chart INSIDE of my FieldSet.

    To me it seems that my FieldSet should be layout : 'bbox' with items : [retirementAccounts, chart]

    No matter how I try it doesn't seem to want to cooperate. Most of the time all of the fields in retirementAccount are shown across the top and the chart under.

    I wonder if I'm trying to do something I can't with FieldSet or if I'm over-nesting?




    FIELDSET

    Code:
    	var retirementAccounts = Ext.create('Ext.form.FieldSet', {
    		xtype : 'fieldset',
    		title : 'RETIREMENT ACCOUNTS',
    		layout : 'anchor',
    		margins : '0 5 0 0',
    		flex : 1,
    		items : [{
    			xtype : 'container',
    			layout : 'hbox',
    			items : [{
    				xtype : 'box',
    				html : '<b>Comprehensive Retirement Plan</b>',
    				name : 'memberName',
    				margins : '0 5 2 0',
    				flex : 3
    			}, {
    				xtype : 'box',
    				html : '<center>title</center>',
    				name : 'mmdob',
    				margins : '0 5 2 0',
    				flex : 1
    			}, {
    				xtype : 'box',
    				html : '<center>title</center>',
    				name : 'mdob',
    				margins : '0 5 2 0',
    				flex : 1
    			}]
    		}, {
    			layout : 'hbox',
    			xtype : 'container',
    			defaultType : 'textfield',
    			items : [{
    				xtype : 'box',
    				html : '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Value of Account',
    				//name : 'linea1',
    				name : 'memberName',
    				margins : '0 5 2 0',
    				flex : 3
    			}, {
    				hideEmptyLabel : true,
    				name : 'memberName',
    				margins : '0 5 2 0',
    				flex : 1
    			}, {
    				hideEmptyLabel : true,
    				name : 'mdob',
    				margins : '0 5 2 0',
    				flex : 1
    			}]
    		}, {
    			layout : 'hbox',
    			xtype : 'container',
    			defaultType : 'textfield',
    			items : [{
    				xtype : 'box',
    				html : '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i>Estimated Monthly Retirement Income*</i>',
    				//name : 'linea1',
    				name : 'memberName',
    				margins : '0 5 2 0',
    				flex : 3
    			}, {
    				hideEmptyLabel : true,
    				name : 'memberName',
    				margins : '0 5 2 0',
    				flex : 1
    			}, {
    				hideEmptyLabel : true,
    				name : 'mdob',
    				margins : '0 5 2 0',
    				flex : 1
    			}]
    		}, {
    			xtype : 'container',
    			layout : 'hbox',
    			items : [{
    				xtype : 'box',
    				html : '<b>Basic Retirement Plan (TDA)</b>',
    				name : 'memberName',
    				margins : '0 5 2 0',
    				flex : 3
    			}, {
    				xtype : 'box',
    				//hideEmptyLabel : true,
    				name : 'memberName',
    				margins : '0 5 2 0',
    				flex : 1
    			}, {
    				xtype : 'box',
    				//hideEmptyLabel : true,
    				name : 'mdob',
    				margins : '0 5 2 0',
    				flex : 1
    			}]
    		}, {
    			layout : 'hbox',
    			xtype : 'container',
    			defaultType : 'textfield',
    			items : [{
    				xtype : 'box',
    				html : '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Value of Account',
    				//name : 'linea1',
    				name : 'memberName',
    				margins : '0 5 2 0',
    				flex : 3
    			}, {
    				hideEmptyLabel : true,
    				name : 'memberName',
    				margins : '0 5 2 0',
    				flex : 1
    			}, {
    				hideEmptyLabel : true,
    				name : 'mdob',
    				margins : '0 5 2 0',
    				flex : 1
    			}]
    		}, {
    			layout : 'hbox',
    			xtype : 'container',
    			defaultType : 'textfield',
    			items : [{
    				xtype : 'box',
    				html : '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i>Estimated Monthly Retirement Income*</i>',
    				//name : 'linea1',
    				name : 'memberName',
    				margins : '0 5 2 0',
    				flex : 3
    			}, {
    				hideEmptyLabel : true,
    				name : 'memberName',
    				margins : '0 5 2 0',
    				flex : 1
    			}, {
    				hideEmptyLabel : true,
    				name : 'mdob',
    				margins : '0 5 2 0',
    				flex : 1
    			}]
    		}, {
    			xtype : 'container',
    			layout : 'hbox',
    			items : [{
    				xtype : 'box',
    				html : '<b>Basic Retirement Plan (TAS)</b>',
    				name : 'memberName',
    				margins : '0 5 2 0',
    				flex : 3
    			}, {
    				xtype : 'box',
    				//hideEmptyLabel : true,
    				name : 'memberName',
    				margins : '0 5 2 0',
    				flex : 1
    			}, {
    				xtype : 'box',
    				//hideEmptyLabel : true,
    				name : 'mdob',
    				margins : '0 5 2 0',
    				flex : 1
    			}]
    		}, {
    			layout : 'hbox',
    			xtype : 'container',
    			defaultType : 'textfield',
    			items : [{
    				xtype : 'box',
    				html : '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Value of Account',
    				//name : 'linea1',
    				name : 'memberName',
    				margins : '0 5 2 0',
    				flex : 3
    			}, {
    				hideEmptyLabel : true,
    				name : 'memberName',
    				margins : '0 5 2 0',
    				flex : 1
    			}, {
    				hideEmptyLabel : true,
    				name : 'mdob',
    				margins : '0 5 2 0',
    				flex : 1
    			}]
    		}, {
    			layout : 'hbox',
    			xtype : 'container',
    			defaultType : 'textfield',
    			items : [{
    				xtype : 'box',
    				html : '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i>Estimated Monthly Retirement Income*</i>',
    				//name : 'linea1',
    				name : 'memberName',
    				margins : '0 5 2 0',
    				flex : 3
    			}, {
    				hideEmptyLabel : true,
    				name : 'memberName',
    				margins : '0 5 2 0',
    				flex : 1
    			}, {
    				hideEmptyLabel : true,
    				name : 'mdob',
    				margins : '0 5 2 0',
    				flex : 1
    			}]
    		}]
    	});

    CHART (Basically right out of the examples)

    Code:
    	var chart = Ext.create('Ext.chart.Chart', {
    		//renderTo : Ext.getBody(),
    		margins : '10 10 10 10',
    		width : 200,
    		height : 200,
    		animate : true,
    		store : chartStore,
    		shadow : true,
    		legend : {
    			position : 'right'
    		},
    		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 : '18px Arial'
    			}
    		}]
    	});
    Attached Images

  2. I need to post more often because I seem to figure stuff out after I alert the World as to what a moron I am! I need to put all my ugly field into a container before trying to place them side-by-side with the chart.

  3. #2
    Sencha User
    Join Date
    Jan 2008
    Location
    Levittown, PA
    Posts
    316
    Answers
    2
    Vote Rating
    2
    mjhaston is on a distinguished road

      0  

    Default


    I need to post more often because I seem to figure stuff out after I alert the World as to what a moron I am! I need to put all my ugly field into a container before trying to place them side-by-side with the chart.
    Attached Images

  4. #3
    Sencha User
    Join Date
    Jan 2008
    Location
    Levittown, PA
    Posts
    316
    Answers
    2
    Vote Rating
    2
    mjhaston is on a distinguished road

      0  

    Default


    IE9 hates something in this code and it's not the chart! I can't get this tab to render at all and I've narrow it down to this code. I'm probably over-nesting containers. This works in Firefix, Opera, Chrome and Safari .... not in IE. As much as I hate it, I need to have it work in IE also.

    Does anything jump out at anyone? The attached image in an earlier post still applies to what it should look like.

    Now that I think of it ... maybe I should also look at the fieldset to the left of this one that also shares flex items.


    Code:
    	var retirementAccounts = Ext.create('Ext.form.FieldSet', {
    		xtype : 'fieldset',
    		title : 'RETIREMENT ACCOUNTS',
    		//layout : 'anchor',
    		//margins : '0 0 0 0',
    		flex : 5,
    		items : [{
    			xtype : 'container',
    			layout : 'hbox',
    			pack : 'end',
    			items : [{
    				xtype : 'container',
    				flex : 4,
    				items : [{
    					xtype : 'container',
    					layout : 'hbox',
    					items : [{
    						xtype : 'box',
    						margins : '0 5 5 0',
    						flex : 3
    					}, {
    						xtype : 'box',
    						id : 'valueBox',
    						html : '<i>Value of account as of today</i>',
    						margins : '0 5 5 0',
    						flex : 1
    					}, {
    						xtype : 'box',
    						id : 'estimateBox',
    						html : '<i>Est monthly payment as of today</i>',
    						margins : '0 5 5 0',
    						flex : 1
    					}]
    				}, {
    					layout : 'hbox',
    					xtype : 'container',
    					defaultType : 'textfield',
    					items : [{
    						xtype : 'box',
    						html : '<b>Comprehensive Retirement Plan</b>',
    						margins : '0 5 5 0',
    						flex : 3
    					}, {
    						hideEmptyLabel : true,
    						name : 'rpValue',
    						margins : '0 5 5 0',
    						flex : 1
    					}, {
    						hideEmptyLabel : true,
    						name : 'rpValue2',
    						margins : '0 5 5 0',
    						flex : 1
    					}]
    				}, {
    					layout : 'hbox',
    					xtype : 'container',
    					defaultType : 'textfield',
    					items : [{
    						xtype : 'box',
    						html : '<b>Tax Deferred Annuity (TDA)',
    						margins : '0 5 5 0',
    						flex : 3
    					}, {
    						hideEmptyLabel : true,
    						name : 'tdaValue',
    						margins : '0 5 5 0',
    						flex : 1
    					}, {
    						hideEmptyLabel : true,
    						name : 'tdaValue2',
    						margins : '0 5 5 0',
    						flex : 1
    					}]
    				}, {
    					layout : 'hbox',
    					xtype : 'container',
    					defaultType : 'textfield',
    					items : [{
    						xtype : 'box',
    						html : 'The Annuity Supplement (TAS)',
    						margins : '0 5 5 0',
    						flex : 3
    					}, {
    						hideEmptyLabel : true,
    						name : 'tasValue',
    						margins : '0 5 5 0',
    						flex : 1
    					}, {
    						hideEmptyLabel : true,
    						name : 'tasValue2',
    						margins : '0 5 5 0',
    						flex : 1
    					}]
    				}]
    			}, chart]
    		}]
    	});