X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..10a866c12701c0a0afd0ac85dcdcf32a421514ac:/docs/source/FormLayout.html?ds=inline
diff --git a/docs/source/FormLayout.html b/docs/source/FormLayout.html
index 56299397..ca055233 100644
--- a/docs/source/FormLayout.html
+++ b/docs/source/FormLayout.html
@@ -1,5 +1,6 @@
+
The source code
@@ -116,6 +117,34 @@ Ext.layout.FormLayout = Ext.extend(Ext.layout.AnchorLayout, {
* @property labelStyle
*/
+ /**
+ * @cfg {Boolean} trackLabels
+ * True to show/hide the field label when the field is hidden. Defaults to false.
+ */
+ trackLabels: false,
+
+
+ onRemove: function(c){
+ Ext.layout.FormLayout.superclass.onRemove.call(this, c);
+ if(this.trackLabels){
+ c.un('show', this.onFieldShow, this);
+ c.un('hide', this.onFieldHide, this);
+ }
+ // check for itemCt, since we may be removing a fieldset or something similar
+ var el = c.getPositionEl(),
+ ct = c.getItemCt && c.getItemCt();
+ if(c.rendered && ct){
+ if (el && el.dom) {
+ el.insertAfter(ct);
+ }
+ Ext.destroy(ct);
+ Ext.destroyMembers(c, 'label', 'itemCt');
+ if(c.customItemCt){
+ Ext.destroyMembers(c, 'getItemCt', 'customItemCt');
+ }
+ }
+ },
+
// private
setContainer : function(ct){
Ext.layout.FormLayout.superclass.setContainer.call(this, ct);
@@ -124,26 +153,45 @@ Ext.layout.FormLayout = Ext.extend(Ext.layout.AnchorLayout, {
}
if(ct.hideLabels){
- this.labelStyle = "display:none";
- this.elementStyle = "padding-left:0;";
- this.labelAdjust = 0;
+ Ext.apply(this, {
+ labelStyle: 'display:none',
+ elementStyle: 'padding-left:0;',
+ labelAdjust: 0
+ });
}else{
this.labelSeparator = ct.labelSeparator || this.labelSeparator;
ct.labelWidth = ct.labelWidth || 100;
- if(typeof ct.labelWidth == 'number'){
- var pad = (typeof ct.labelPad == 'number' ? ct.labelPad : 5);
- this.labelAdjust = ct.labelWidth+pad;
- this.labelStyle = "width:"+ct.labelWidth+"px;";
- this.elementStyle = "padding-left:"+(ct.labelWidth+pad)+'px';
+ if(Ext.isNumber(ct.labelWidth)){
+ var pad = Ext.isNumber(ct.labelPad) ? ct.labelPad : 5;
+ Ext.apply(this, {
+ labelAdjust: ct.labelWidth + pad,
+ labelStyle: 'width:' + ct.labelWidth + 'px;',
+ elementStyle: 'padding-left:' + (ct.labelWidth + pad) + 'px'
+ });
}
if(ct.labelAlign == 'top'){
- this.labelStyle = "width:auto;";
- this.labelAdjust = 0;
- this.elementStyle = "padding-left:0;";
+ Ext.apply(this, {
+ labelStyle: 'width:auto;',
+ labelAdjust: 0,
+ elementStyle: 'padding-left:0;'
+ });
}
}
},
+ // private
+ isHide: function(c){
+ return c.hideLabel || this.container.hideLabels;
+ },
+
+ onFieldShow: function(c){
+ c.getItemCt().removeClass('x-hide-' + c.hideMode);
+ },
+
+ onFieldHide: function(c){
+ c.getItemCt().addClass('x-hide-' + c.hideMode);
+ },
+
//private
getLabelStyle: function(s){
var ls = '', items = [this.labelStyle, s];
@@ -194,17 +242,43 @@ new Ext.Template(
// private
renderItem : function(c, position, target){
- if(c && !c.rendered && (c.isFormField || c.fieldLabel) && c.inputType != 'hidden'){
+ if(c && (c.isFormField || c.fieldLabel) && c.inputType != 'hidden'){
var args = this.getTemplateArgs(c);
- if(typeof position == 'number'){
+ if(Ext.isNumber(position)){
position = target.dom.childNodes[position] || null;
}
if(position){
- this.fieldTpl.insertBefore(position, args);
+ c.itemCt = this.fieldTpl.insertBefore(position, args, true);
}else{
- this.fieldTpl.append(target, args);
+ c.itemCt = this.fieldTpl.append(target, args, true);
+ }
+ if(!c.getItemCt){
+ // Non form fields don't have getItemCt, apply it here
+ // This will get cleaned up in onRemove
+ Ext.apply(c, {
+ getItemCt: function(){
+ return c.itemCt;
+ },
+ customItemCt: true
+ });
+ }
+ c.label = c.getItemCt().child('label.x-form-item-label');
+ if(!c.rendered){
+ c.render('x-form-el-' + c.id);
+ }else if(!this.isValidParent(c, target)){
+ Ext.fly('x-form-el-' + c.id).appendChild(c.getPositionEl());
}
- c.render('x-form-el-'+c.id);
+ if(this.trackLabels){
+ if(c.hidden){
+ this.onFieldHide(c);
+ }
+ c.on({
+ scope: this,
+ show: this.onFieldShow,
+ hide: this.onFieldHide
+ });
+ }
+ this.configureItem(c);
}else {
Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);
}
@@ -232,7 +306,7 @@ new Ext.Template(
* clearCls : StringThe CSS class to apply to the special clearing div
* rendered directly after each form field wrapper (defaults to 'x-form-clear-left')
*
- * @param field The {@link Field Ext.form.Field} being rendered.
+ * @param (Ext.form.Field} field The {@link Ext.form.Field Field} being rendered.
* @return An object hash containing the properties required to render the Field.
*/
getTemplateArgs: function(field) {
@@ -240,22 +314,33 @@ new Ext.Template(
return {
id: field.id,
label: field.fieldLabel,
- labelStyle: field.labelStyle||this.labelStyle||'',
+ labelStyle: this.getLabelStyle(field.labelStyle),
elementStyle: this.elementStyle||'',
- labelSeparator: noLabelSep ? '' : (typeof field.labelSeparator == 'undefined' ? this.labelSeparator : field.labelSeparator),
+ labelSeparator: noLabelSep ? '' : (Ext.isDefined(field.labelSeparator) ? field.labelSeparator : this.labelSeparator),
itemCls: (field.itemCls||this.container.itemCls||'') + (field.hideLabel ? ' x-hide-label' : ''),
clearCls: field.clearCls || 'x-form-clear-left'
};
},
// private
- adjustWidthAnchor : function(value, comp){
- return value - (comp.isFormField || comp.fieldLabel ? (comp.hideLabel ? 0 : this.labelAdjust) : 0);
+ adjustWidthAnchor: function(value, c){
+ if(c.label && !this.isHide(c) && (this.container.labelAlign != 'top')){
+ var adjust = Ext.isIE6 || (Ext.isIE && !Ext.isStrict);
+ return value - this.labelAdjust + (adjust ? -3 : 0);
+ }
+ return value;
+ },
+
+ adjustHeightAnchor : function(value, c){
+ if(c.label && !this.isHide(c) && (this.container.labelAlign == 'top')){
+ return value - c.label.getHeight();
+ }
+ return value;
},
// private
isValidParent : function(c, target){
- return true;
+ return target && this.container.getEl().contains(c.getPositionEl());
}
/**
@@ -264,6 +349,7 @@ new Ext.Template(
*/
});
-Ext.Container.LAYOUTS['form'] = Ext.layout.FormLayout;
+Ext.Container.LAYOUTS['form'] = Ext.layout.FormLayout;
+
\ No newline at end of file