--- /dev/null
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+/**\r
+ * @class Ext.form.FieldSet\r
+ * @extends Ext.Panel\r
+ * Standard container used for grouping items within a {@link Ext.form.FormPanel form}.\r
+ * <pre><code>\r
+var form = new Ext.FormPanel({\r
+ title: 'Simple Form with FieldSets',\r
+ labelWidth: 75, // label settings here cascade unless overridden\r
+ url: 'save-form.php',\r
+ frame:true,\r
+ bodyStyle:'padding:5px 5px 0',\r
+ width: 700,\r
+ renderTo: document.body,\r
+ layout:'column', // arrange items in columns\r
+ defaults: { // defaults applied to items\r
+ layout: 'form',\r
+ border: false,\r
+ bodyStyle: 'padding:4px'\r
+ },\r
+ items: [{\r
+ // Fieldset in Column 1\r
+ xtype:'fieldset',\r
+ columnWidth: 0.5,\r
+ title: 'Fieldset 1',\r
+ collapsible: true,\r
+ autoHeight:true,\r
+ defaults: {\r
+ anchor: '-20' // leave room for error icon\r
+ },\r
+ defaultType: 'textfield',\r
+ items :[{\r
+ fieldLabel: 'Field 1'\r
+ }, {\r
+ fieldLabel: 'Field 2'\r
+ }, {\r
+ fieldLabel: 'Field 3'\r
+ }\r
+ ]\r
+ },{\r
+ // Fieldset in Column 2 - Panel inside\r
+ xtype:'fieldset',\r
+ title: 'Show Panel', // title, header, or checkboxToggle creates fieldset header\r
+ autoHeight:true,\r
+ columnWidth: 0.5,\r
+ checkboxToggle: true,\r
+ collapsed: true, // fieldset initially collapsed\r
+ layout:'anchor',\r
+ items :[{\r
+ xtype: 'panel',\r
+ anchor: '100%',\r
+ title: 'Panel inside a fieldset',\r
+ frame: true,\r
+ height: 100\r
+ }]\r
+ }]\r
+});\r
+ * </code></pre>\r
+ * @constructor\r
+ * @param {Object} config Configuration options\r
+ * @xtype fieldset\r
+ */\r
+Ext.form.FieldSet = Ext.extend(Ext.Panel, {\r
+ /**\r
+ * @cfg {Mixed} checkboxToggle <tt>true</tt> to render a checkbox into the fieldset frame just\r
+ * in front of the legend to expand/collapse the fieldset when the checkbox is toggled. (defaults\r
+ * to <tt>false</tt>).\r
+ * <p>A {@link Ext.DomHelper DomHelper} element spec may also be specified to create the checkbox.\r
+ * If <tt>true</tt> is specified, the default DomHelper config object used to create the element\r
+ * is:</p><pre><code>\r
+ * {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'}\r
+ * </code></pre> \r
+ */\r
+ /**\r
+ * @cfg {String} checkboxName The name to assign to the fieldset's checkbox if <tt>{@link #checkboxToggle} = true</tt>\r
+ * (defaults to <tt>'[checkbox id]-checkbox'</tt>).\r
+ */\r
+ /**\r
+ * @cfg {Boolean} collapsible\r
+ * <tt>true</tt> to make the fieldset collapsible and have the expand/collapse toggle button automatically\r
+ * rendered into the legend element, <tt>false</tt> to keep the fieldset statically sized with no collapse\r
+ * button (defaults to <tt>false</tt>). Another option is to configure <tt>{@link #checkboxToggle}</tt>.\r
+ */\r
+ /**\r
+ * @cfg {Number} labelWidth The width of labels. This property cascades to child containers.\r
+ */\r
+ /**\r
+ * @cfg {String} itemCls A css class to apply to the <tt>x-form-item</tt> of fields (see \r
+ * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl} for details).\r
+ * This property cascades to child containers.\r
+ */\r
+ /**\r
+ * @cfg {String} baseCls The base CSS class applied to the fieldset (defaults to <tt>'x-fieldset'</tt>).\r
+ */\r
+ baseCls : 'x-fieldset',\r
+ /**\r
+ * @cfg {String} layout The {@link Ext.Container#layout} to use inside the fieldset (defaults to <tt>'form'</tt>).\r
+ */\r
+ layout : 'form',\r
+ /**\r
+ * @cfg {Boolean} animCollapse\r
+ * <tt>true</tt> to animate the transition when the panel is collapsed, <tt>false</tt> to skip the\r
+ * animation (defaults to <tt>false</tt>).\r
+ */\r
+ animCollapse : false,\r
+\r
+ // private\r
+ onRender : function(ct, position){\r
+ if(!this.el){\r
+ this.el = document.createElement('fieldset');\r
+ this.el.id = this.id;\r
+ if (this.title || this.header || this.checkboxToggle) {\r
+ this.el.appendChild(document.createElement('legend')).className = 'x-fieldset-header';\r
+ }\r
+ }\r
+\r
+ Ext.form.FieldSet.superclass.onRender.call(this, ct, position);\r
+\r
+ if(this.checkboxToggle){\r
+ var o = typeof this.checkboxToggle == 'object' ?\r
+ this.checkboxToggle :\r
+ {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'};\r
+ this.checkbox = this.header.insertFirst(o);\r
+ this.checkbox.dom.checked = !this.collapsed;\r
+ this.mon(this.checkbox, 'click', this.onCheckClick, this);\r
+ }\r
+ },\r
+\r
+ // private\r
+ onCollapse : function(doAnim, animArg){\r
+ if(this.checkbox){\r
+ this.checkbox.dom.checked = false;\r
+ }\r
+ Ext.form.FieldSet.superclass.onCollapse.call(this, doAnim, animArg);\r
+\r
+ },\r
+\r
+ // private\r
+ onExpand : function(doAnim, animArg){\r
+ if(this.checkbox){\r
+ this.checkbox.dom.checked = true;\r
+ }\r
+ Ext.form.FieldSet.superclass.onExpand.call(this, doAnim, animArg);\r
+ },\r
+\r
+ /**\r
+ * This function is called by the fieldset's checkbox when it is toggled (only applies when\r
+ * checkboxToggle = true). This method should never be called externally, but can be\r
+ * overridden to provide custom behavior when the checkbox is toggled if needed.\r
+ */\r
+ onCheckClick : function(){\r
+ this[this.checkbox.dom.checked ? 'expand' : 'collapse']();\r
+ }\r
+\r
+ /**\r
+ * @cfg {String/Number} activeItem\r
+ * @hide\r
+ */\r
+ /**\r
+ * @cfg {Mixed} applyTo\r
+ * @hide\r
+ */\r
+ /**\r
+ * @cfg {Boolean} bodyBorder\r
+ * @hide\r
+ */\r
+ /**\r
+ * @cfg {Boolean} border\r
+ * @hide\r
+ */\r
+ /**\r
+ * @cfg {Boolean/Number} bufferResize\r
+ * @hide\r
+ */\r
+ /**\r
+ * @cfg {Boolean} collapseFirst\r
+ * @hide\r
+ */\r
+ /**\r
+ * @cfg {String} defaultType\r
+ * @hide\r
+ */\r
+ /**\r
+ * @cfg {String} disabledClass\r
+ * @hide\r
+ */\r
+ /**\r
+ * @cfg {String} elements\r
+ * @hide\r
+ */\r
+ /**\r
+ * @cfg {Boolean} floating\r
+ * @hide\r
+ */\r
+ /**\r
+ * @cfg {Boolean} footer\r
+ * @hide\r
+ */\r
+ /**\r
+ * @cfg {Boolean} frame\r
+ * @hide\r
+ */\r
+ /**\r
+ * @cfg {Boolean} header\r
+ * @hide\r
+ */\r
+ /**\r
+ * @cfg {Boolean} headerAsText\r
+ * @hide\r
+ */\r
+ /**\r
+ * @cfg {Boolean} hideCollapseTool\r
+ * @hide\r
+ */\r
+ /**\r
+ * @cfg {String} iconCls\r
+ * @hide\r
+ */\r
+ /**\r
+ * @cfg {Boolean/String} shadow\r
+ * @hide\r
+ */\r
+ /**\r
+ * @cfg {Number} shadowOffset\r
+ * @hide\r
+ */\r
+ /**\r
+ * @cfg {Boolean} shim\r
+ * @hide\r
+ */\r
+ /**\r
+ * @cfg {Object/Array} tbar\r
+ * @hide\r
+ */\r
+ /**\r
+ * @cfg {String} tabTip\r
+ * @hide\r
+ */\r
+ /**\r
+ * @cfg {Boolean} titleCollapse\r
+ * @hide\r
+ */\r
+ /**\r
+ * @cfg {Array} tools\r
+ * @hide\r
+ */\r
+ /**\r
+ * @cfg {Ext.Template/Ext.XTemplate} toolTemplate\r
+ * @hide\r
+ */\r
+ /**\r
+ * @cfg {String} xtype\r
+ * @hide\r
+ */\r
+ /**\r
+ * @property header\r
+ * @hide\r
+ */\r
+ /**\r
+ * @property footer\r
+ * @hide\r
+ */\r
+ /**\r
+ * @method focus\r
+ * @hide\r
+ */\r
+ /**\r
+ * @method getBottomToolbar\r
+ * @hide\r
+ */\r
+ /**\r
+ * @method getTopToolbar\r
+ * @hide\r
+ */\r
+ /**\r
+ * @method setIconClass\r
+ * @hide\r
+ */\r
+ /**\r
+ * @event activate\r
+ * @hide\r
+ */\r
+ /**\r
+ * @event beforeclose\r
+ * @hide\r
+ */\r
+ /**\r
+ * @event bodyresize\r
+ * @hide\r
+ */\r
+ /**\r
+ * @event close\r
+ * @hide\r
+ */\r
+ /**\r
+ * @event deactivate\r
+ * @hide\r
+ */\r
+});\r
+Ext.reg('fieldset', Ext.form.FieldSet);\r
git.ithinksw.org / extjs.git / blobdiff