PDA

View Full Version : textfield causing fieldset to overlap



Stripeman
15 Oct 2009, 6:54 AM
Howdy. I don't know why but the fieldsets are being overlapped by one of the xtypes 'textfield' when i change one of them to fieldset its fine.. I don't understand what I am doing wrong.

Any help is appreciated


<html>
<head>
<title>Column Layout</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../../ext-all.js"></script>

<script type="text/javascript">

Ext.namespace('p_viewCase');

var p_viewCase = function() {

var panelsMainPage;
var viewCaseWindow;

return {

init : function() {

},
viewWin : function() {


var nameInformation = {
xtype : 'fieldset',
title : 'Applicant Name',
layout:'column',
items : [{
columnWidth:'.33',
layout: 'form',
items: [{
xtype : 'textfield',
name : 'FamilyName',
fieldLabel : 'Family Name',
anchor:'95%'

},{
xtype : 'textfield',
fieldLabel : 'Divorced/Widow Name',
name : 'DivorcedWidowedName',
anchor:'95%'
}]
},{
columnWidth:'.33',
layout: 'form',
items: [{
xtype : 'textfield',
name : 'FirstName',
fieldLabel : 'First Name',
anchor:'95%'
}]
},{
columnWidth:'.33',
layout: 'form',
items: [{
xtype : 'textfield', //<---------- Changed to fieldset and width of container changes
name : 'MiddleNameAlias',
fieldLabel : 'Middle',
anchor:'95%'
}
]
}]

};

var statusInformation = {
xtype : 'fieldset',
title : 'Status',
layout:'column',
items :[{
columnWidth:.33,
layout: 'form',
items: [{
xtype : 'combo',//<---------- Changed to fieldset and width of container changes
fieldLabel : 'Case Status',
name : 'CaseStatus',
anchor : '95%'
}]
},{
columnWidth:.33,
layout: 'form',
items: [{
xtype : 'textfield', //<---------- Changed to fieldset and width of container changes
name : 'CASENUM',
fieldLabel : 'Record ID',
anchor:'95%'
}]
},{
columnWidth:.33,
layout: 'form',
items: [{
xtype : 'combo',
fieldLabel : 'Case Status',
name : 'CaseStatus',
anchor : '95%'
}]
}]
};

var outerForm = {
layout:'column',
id: 'pos_grp_outer',
items : [{
layout: 'form',
columnWidth:'.50',
items : nameInformation


},{
layout: 'form',
columnWidth:'.50',
items: statusInformation

}]
};


// combine all that into one huge form
var gernalInformationTab = {
xtype : 'form',
height : 600,
labelAlign: 'top',
title : 'General Information',
id : 'viewCaseDetails',
frame : true,
items : [
outerForm
]
};



var tabPanel = new Ext.TabPanel({
activeTab : 0,
title : 'Form ABCDa: ' ,
height : 700,
items : [
gernalInformationTab
]
});

viewCaseWindow = new Ext.Panel({
applyTo : Ext.getBody(),
border : true,
title : 'Editing Case ID/Number',
width : 750
});

viewCaseWindow.add(tabPanel);
viewCaseWindow.doLayout();



}
};
}();

p_viewCase.viewWin();




</script>
</head>
<body>

</body>
</html>

carol.ext
15 Oct 2009, 2:58 PM
overlap fixed for me in Firefox 3.5.3 with change from form to fit layout in code snippet below. Not tested in other browsers. If using fit layout, seems like you could get rid of that level of nesting and put the columnWidth on the fieldsets. Hope that helps.


var outerForm = {
layout: 'column',
id: 'pos_grp_outer',
items: [{
layout: 'fit', <--- changed from form
columnWidth: '.50',
items: nameInformation

},
{
layout: 'fit', <--- changed from form
columnWidth: '.50',
items: statusInformation

}]
};

carol.ext
16 Oct 2009, 6:18 AM
In IE7, page would not load...needs to be called from Ext.onReady. After that the fieldset layout looks OK.


Ext.onReady( p_viewCase.viewWin);