X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6e39d509471fe9b4e2660e0d1631b350d0c66f40..b37ceabb82336ee82757cd32efe353cfab8ec267:/src/widgets/form/FieldSet.js?ds=sidebyside diff --git a/src/widgets/form/FieldSet.js b/src/widgets/form/FieldSet.js index e2a9b86c..1ab26a8a 100644 --- a/src/widgets/form/FieldSet.js +++ b/src/widgets/form/FieldSet.js @@ -1,297 +1,297 @@ /*! - * Ext JS Library 3.1.0 - * Copyright(c) 2006-2009 Ext JS, LLC + * Ext JS Library 3.2.2 + * Copyright(c) 2006-2010 Ext JS, Inc. * licensing@extjs.com * http://www.extjs.com/license */ -/** - * @class Ext.form.FieldSet - * @extends Ext.Panel - * Standard container used for grouping items within a {@link Ext.form.FormPanel form}. - *

-var form = new Ext.FormPanel({
-    title: 'Simple Form with FieldSets',
-    labelWidth: 75, // label settings here cascade unless overridden
-    url: 'save-form.php',
-    frame:true,
-    bodyStyle:'padding:5px 5px 0',
-    width: 700,
-    renderTo: document.body,
-    layout:'column', // arrange items in columns
-    defaults: {      // defaults applied to items
-        layout: 'form',
-        border: false,
-        bodyStyle: 'padding:4px'
-    },
-    items: [{
-        // Fieldset in Column 1
-        xtype:'fieldset',
-        columnWidth: 0.5,
-        title: 'Fieldset 1',
-        collapsible: true,
-        autoHeight:true,
-        defaults: {
-            anchor: '-20' // leave room for error icon
-        },
-        defaultType: 'textfield',
-        items :[{
-                fieldLabel: 'Field 1'
-            }, {
-                fieldLabel: 'Field 2'
-            }, {
-                fieldLabel: 'Field 3'
-            }
-        ]
-    },{
-        // Fieldset in Column 2 - Panel inside
-        xtype:'fieldset',
-        title: 'Show Panel', // title, header, or checkboxToggle creates fieldset header
-        autoHeight:true,
-        columnWidth: 0.5,
-        checkboxToggle: true,
-        collapsed: true, // fieldset initially collapsed
-        layout:'anchor',
-        items :[{
-            xtype: 'panel',
-            anchor: '100%',
-            title: 'Panel inside a fieldset',
-            frame: true,
-            height: 100
-        }]
-    }]
-});
- * 
- * @constructor - * @param {Object} config Configuration options - * @xtype fieldset - */ -Ext.form.FieldSet = Ext.extend(Ext.Panel, { - /** - * @cfg {Mixed} checkboxToggle true to render a checkbox into the fieldset frame just - * in front of the legend to expand/collapse the fieldset when the checkbox is toggled. (defaults - * to false). - *

A {@link Ext.DomHelper DomHelper} element spec may also be specified to create the checkbox. - * If true is specified, the default DomHelper config object used to create the element - * is:


-     * {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'}
-     * 
- */ - /** - * @cfg {String} checkboxName The name to assign to the fieldset's checkbox if {@link #checkboxToggle} = true - * (defaults to '[checkbox id]-checkbox'). - */ - /** - * @cfg {Boolean} collapsible - * true to make the fieldset collapsible and have the expand/collapse toggle button automatically - * rendered into the legend element, false to keep the fieldset statically sized with no collapse - * button (defaults to false). Another option is to configure {@link #checkboxToggle}. - */ - /** - * @cfg {Number} labelWidth The width of labels. This property cascades to child containers. - */ - /** - * @cfg {String} itemCls A css class to apply to the x-form-item of fields (see - * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl} for details). - * This property cascades to child containers. - */ - /** - * @cfg {String} baseCls The base CSS class applied to the fieldset (defaults to 'x-fieldset'). - */ - baseCls : 'x-fieldset', - /** - * @cfg {String} layout The {@link Ext.Container#layout} to use inside the fieldset (defaults to 'form'). - */ - layout : 'form', - /** - * @cfg {Boolean} animCollapse - * true to animate the transition when the panel is collapsed, false to skip the - * animation (defaults to false). - */ - animCollapse : false, - - // private - onRender : function(ct, position){ - if(!this.el){ - this.el = document.createElement('fieldset'); - this.el.id = this.id; - if (this.title || this.header || this.checkboxToggle) { - this.el.appendChild(document.createElement('legend')).className = 'x-fieldset-header'; - } - } - - Ext.form.FieldSet.superclass.onRender.call(this, ct, position); - - if(this.checkboxToggle){ - var o = typeof this.checkboxToggle == 'object' ? - this.checkboxToggle : - {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'}; - this.checkbox = this.header.insertFirst(o); - this.checkbox.dom.checked = !this.collapsed; - this.mon(this.checkbox, 'click', this.onCheckClick, this); - } - }, - - // private - onCollapse : function(doAnim, animArg){ - if(this.checkbox){ - this.checkbox.dom.checked = false; - } - Ext.form.FieldSet.superclass.onCollapse.call(this, doAnim, animArg); - - }, - - // private - onExpand : function(doAnim, animArg){ - if(this.checkbox){ - this.checkbox.dom.checked = true; - } - Ext.form.FieldSet.superclass.onExpand.call(this, doAnim, animArg); - }, - - /** - * This function is called by the fieldset's checkbox when it is toggled (only applies when - * checkboxToggle = true). This method should never be called externally, but can be - * overridden to provide custom behavior when the checkbox is toggled if needed. - */ - onCheckClick : function(){ - this[this.checkbox.dom.checked ? 'expand' : 'collapse'](); - } - - /** - * @cfg {String/Number} activeItem - * @hide - */ - /** - * @cfg {Mixed} applyTo - * @hide - */ - /** - * @cfg {Boolean} bodyBorder - * @hide - */ - /** - * @cfg {Boolean} border - * @hide - */ - /** - * @cfg {Boolean/Number} bufferResize - * @hide - */ - /** - * @cfg {Boolean} collapseFirst - * @hide - */ - /** - * @cfg {String} defaultType - * @hide - */ - /** - * @cfg {String} disabledClass - * @hide - */ - /** - * @cfg {String} elements - * @hide - */ - /** - * @cfg {Boolean} floating - * @hide - */ - /** - * @cfg {Boolean} footer - * @hide - */ - /** - * @cfg {Boolean} frame - * @hide - */ - /** - * @cfg {Boolean} header - * @hide - */ - /** - * @cfg {Boolean} headerAsText - * @hide - */ - /** - * @cfg {Boolean} hideCollapseTool - * @hide - */ - /** - * @cfg {String} iconCls - * @hide - */ - /** - * @cfg {Boolean/String} shadow - * @hide - */ - /** - * @cfg {Number} shadowOffset - * @hide - */ - /** - * @cfg {Boolean} shim - * @hide - */ - /** - * @cfg {Object/Array} tbar - * @hide - */ - /** - * @cfg {Array} tools - * @hide - */ - /** - * @cfg {Ext.Template/Ext.XTemplate} toolTemplate - * @hide - */ - /** - * @cfg {String} xtype - * @hide - */ - /** - * @property header - * @hide - */ - /** - * @property footer - * @hide - */ - /** - * @method focus - * @hide - */ - /** - * @method getBottomToolbar - * @hide - */ - /** - * @method getTopToolbar - * @hide - */ - /** - * @method setIconClass - * @hide - */ - /** - * @event activate - * @hide - */ - /** - * @event beforeclose - * @hide - */ - /** - * @event bodyresize - * @hide - */ - /** - * @event close - * @hide - */ - /** - * @event deactivate - * @hide - */ -}); -Ext.reg('fieldset', Ext.form.FieldSet); +/** + * @class Ext.form.FieldSet + * @extends Ext.Panel + * Standard container used for grouping items within a {@link Ext.form.FormPanel form}. + *

+var form = new Ext.FormPanel({
+    title: 'Simple Form with FieldSets',
+    labelWidth: 75, // label settings here cascade unless overridden
+    url: 'save-form.php',
+    frame:true,
+    bodyStyle:'padding:5px 5px 0',
+    width: 700,
+    renderTo: document.body,
+    layout:'column', // arrange items in columns
+    defaults: {      // defaults applied to items
+        layout: 'form',
+        border: false,
+        bodyStyle: 'padding:4px'
+    },
+    items: [{
+        // Fieldset in Column 1
+        xtype:'fieldset',
+        columnWidth: 0.5,
+        title: 'Fieldset 1',
+        collapsible: true,
+        autoHeight:true,
+        defaults: {
+            anchor: '-20' // leave room for error icon
+        },
+        defaultType: 'textfield',
+        items :[{
+                fieldLabel: 'Field 1'
+            }, {
+                fieldLabel: 'Field 2'
+            }, {
+                fieldLabel: 'Field 3'
+            }
+        ]
+    },{
+        // Fieldset in Column 2 - Panel inside
+        xtype:'fieldset',
+        title: 'Show Panel', // title, header, or checkboxToggle creates fieldset header
+        autoHeight:true,
+        columnWidth: 0.5,
+        checkboxToggle: true,
+        collapsed: true, // fieldset initially collapsed
+        layout:'anchor',
+        items :[{
+            xtype: 'panel',
+            anchor: '100%',
+            title: 'Panel inside a fieldset',
+            frame: true,
+            height: 100
+        }]
+    }]
+});
+ * 
+ * @constructor + * @param {Object} config Configuration options + * @xtype fieldset + */ +Ext.form.FieldSet = Ext.extend(Ext.Panel, { + /** + * @cfg {Mixed} checkboxToggle true to render a checkbox into the fieldset frame just + * in front of the legend to expand/collapse the fieldset when the checkbox is toggled. (defaults + * to false). + *

A {@link Ext.DomHelper DomHelper} element spec may also be specified to create the checkbox. + * If true is specified, the default DomHelper config object used to create the element + * is:


+     * {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'}
+     * 
+ */ + /** + * @cfg {String} checkboxName The name to assign to the fieldset's checkbox if {@link #checkboxToggle} = true + * (defaults to '[checkbox id]-checkbox'). + */ + /** + * @cfg {Boolean} collapsible + * true to make the fieldset collapsible and have the expand/collapse toggle button automatically + * rendered into the legend element, false to keep the fieldset statically sized with no collapse + * button (defaults to false). Another option is to configure {@link #checkboxToggle}. + */ + /** + * @cfg {Number} labelWidth The width of labels. This property cascades to child containers. + */ + /** + * @cfg {String} itemCls A css class to apply to the x-form-item of fields (see + * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl} for details). + * This property cascades to child containers. + */ + /** + * @cfg {String} baseCls The base CSS class applied to the fieldset (defaults to 'x-fieldset'). + */ + baseCls : 'x-fieldset', + /** + * @cfg {String} layout The {@link Ext.Container#layout} to use inside the fieldset (defaults to 'form'). + */ + layout : 'form', + /** + * @cfg {Boolean} animCollapse + * true to animate the transition when the panel is collapsed, false to skip the + * animation (defaults to false). + */ + animCollapse : false, + + // private + onRender : function(ct, position){ + if(!this.el){ + this.el = document.createElement('fieldset'); + this.el.id = this.id; + if (this.title || this.header || this.checkboxToggle) { + this.el.appendChild(document.createElement('legend')).className = this.baseCls + '-header'; + } + } + + Ext.form.FieldSet.superclass.onRender.call(this, ct, position); + + if(this.checkboxToggle){ + var o = typeof this.checkboxToggle == 'object' ? + this.checkboxToggle : + {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'}; + this.checkbox = this.header.insertFirst(o); + this.checkbox.dom.checked = !this.collapsed; + this.mon(this.checkbox, 'click', this.onCheckClick, this); + } + }, + + // private + onCollapse : function(doAnim, animArg){ + if(this.checkbox){ + this.checkbox.dom.checked = false; + } + Ext.form.FieldSet.superclass.onCollapse.call(this, doAnim, animArg); + + }, + + // private + onExpand : function(doAnim, animArg){ + if(this.checkbox){ + this.checkbox.dom.checked = true; + } + Ext.form.FieldSet.superclass.onExpand.call(this, doAnim, animArg); + }, + + /** + * This function is called by the fieldset's checkbox when it is toggled (only applies when + * checkboxToggle = true). This method should never be called externally, but can be + * overridden to provide custom behavior when the checkbox is toggled if needed. + */ + onCheckClick : function(){ + this[this.checkbox.dom.checked ? 'expand' : 'collapse'](); + } + + /** + * @cfg {String/Number} activeItem + * @hide + */ + /** + * @cfg {Mixed} applyTo + * @hide + */ + /** + * @cfg {Boolean} bodyBorder + * @hide + */ + /** + * @cfg {Boolean} border + * @hide + */ + /** + * @cfg {Boolean/Number} bufferResize + * @hide + */ + /** + * @cfg {Boolean} collapseFirst + * @hide + */ + /** + * @cfg {String} defaultType + * @hide + */ + /** + * @cfg {String} disabledClass + * @hide + */ + /** + * @cfg {String} elements + * @hide + */ + /** + * @cfg {Boolean} floating + * @hide + */ + /** + * @cfg {Boolean} footer + * @hide + */ + /** + * @cfg {Boolean} frame + * @hide + */ + /** + * @cfg {Boolean} header + * @hide + */ + /** + * @cfg {Boolean} headerAsText + * @hide + */ + /** + * @cfg {Boolean} hideCollapseTool + * @hide + */ + /** + * @cfg {String} iconCls + * @hide + */ + /** + * @cfg {Boolean/String} shadow + * @hide + */ + /** + * @cfg {Number} shadowOffset + * @hide + */ + /** + * @cfg {Boolean} shim + * @hide + */ + /** + * @cfg {Object/Array} tbar + * @hide + */ + /** + * @cfg {Array} tools + * @hide + */ + /** + * @cfg {Ext.Template/Ext.XTemplate} toolTemplate + * @hide + */ + /** + * @cfg {String} xtype + * @hide + */ + /** + * @property header + * @hide + */ + /** + * @property footer + * @hide + */ + /** + * @method focus + * @hide + */ + /** + * @method getBottomToolbar + * @hide + */ + /** + * @method getTopToolbar + * @hide + */ + /** + * @method setIconClass + * @hide + */ + /** + * @event activate + * @hide + */ + /** + * @event beforeclose + * @hide + */ + /** + * @event bodyresize + * @hide + */ + /** + * @event close + * @hide + */ + /** + * @event deactivate + * @hide + */ +}); +Ext.reg('fieldset', Ext.form.FieldSet); \ No newline at end of file