-<div id="cls-Ext.form.FieldSet"></div>/**\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
- <div id="cfg-Ext.form.FieldSet-checkboxToggle"></div>/**\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
- <div id="cfg-Ext.form.FieldSet-checkboxName"></div>/**\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
- <div id="cfg-Ext.form.FieldSet-collapsible"></div>/**\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
- <div id="cfg-Ext.form.FieldSet-labelWidth"></div>/**\r
- * @cfg {Number} labelWidth The width of labels. This property cascades to child containers.\r
- */\r
- <div id="cfg-Ext.form.FieldSet-itemCls"></div>/**\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
- <div id="cfg-Ext.form.FieldSet-baseCls"></div>/**\r
- * @cfg {String} baseCls The base CSS class applied to the fieldset (defaults to <tt>'x-fieldset'</tt>).\r
- */\r
- baseCls : 'x-fieldset',\r
- <div id="cfg-Ext.form.FieldSet-layout"></div>/**\r
- * @cfg {String} layout The {@link Ext.Container#layout} to use inside the fieldset (defaults to <tt>'form'</tt>).\r
- */\r
- layout : 'form',\r
- <div id="cfg-Ext.form.FieldSet-animCollapse"></div>/**\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
- <div id="method-Ext.form.FieldSet-onCheckClick"></div>/**\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
- <div id="cfg-Ext.form.FieldSet-activeItem"></div>/**\r
- * @cfg {String/Number} activeItem\r
- * @hide\r
- */\r
- <div id="cfg-Ext.form.FieldSet-applyTo"></div>/**\r
- * @cfg {Mixed} applyTo\r
- * @hide\r
- */\r
- <div id="cfg-Ext.form.FieldSet-bodyBorder"></div>/**\r
- * @cfg {Boolean} bodyBorder\r
- * @hide\r
- */\r
- <div id="cfg-Ext.form.FieldSet-border"></div>/**\r
- * @cfg {Boolean} border\r
- * @hide\r
- */\r
- <div id="cfg-Ext.form.FieldSet-bufferResize"></div>/**\r
- * @cfg {Boolean/Number} bufferResize\r
- * @hide\r
- */\r
- <div id="cfg-Ext.form.FieldSet-collapseFirst"></div>/**\r
- * @cfg {Boolean} collapseFirst\r
- * @hide\r
- */\r
- <div id="cfg-Ext.form.FieldSet-defaultType"></div>/**\r
- * @cfg {String} defaultType\r
- * @hide\r
- */\r
- <div id="cfg-Ext.form.FieldSet-disabledClass"></div>/**\r
- * @cfg {String} disabledClass\r
- * @hide\r
- */\r
- <div id="cfg-Ext.form.FieldSet-elements"></div>/**\r
- * @cfg {String} elements\r
- * @hide\r
- */\r
- <div id="cfg-Ext.form.FieldSet-floating"></div>/**\r
- * @cfg {Boolean} floating\r
- * @hide\r
- */\r
- <div id="cfg-Ext.form.FieldSet-footer"></div>/**\r
- * @cfg {Boolean} footer\r
- * @hide\r
- */\r
- <div id="cfg-Ext.form.FieldSet-frame"></div>/**\r
- * @cfg {Boolean} frame\r
- * @hide\r
- */\r
- <div id="cfg-Ext.form.FieldSet-header"></div>/**\r
- * @cfg {Boolean} header\r
- * @hide\r
- */\r
- <div id="cfg-Ext.form.FieldSet-headerAsText"></div>/**\r
- * @cfg {Boolean} headerAsText\r
- * @hide\r
- */\r
- <div id="cfg-Ext.form.FieldSet-hideCollapseTool"></div>/**\r
- * @cfg {Boolean} hideCollapseTool\r
- * @hide\r
- */\r
- <div id="cfg-Ext.form.FieldSet-iconCls"></div>/**\r
- * @cfg {String} iconCls\r
- * @hide\r
- */\r
- <div id="cfg-Ext.form.FieldSet-shadow"></div>/**\r
- * @cfg {Boolean/String} shadow\r
- * @hide\r
- */\r
- <div id="cfg-Ext.form.FieldSet-shadowOffset"></div>/**\r
- * @cfg {Number} shadowOffset\r
- * @hide\r
- */\r
- <div id="cfg-Ext.form.FieldSet-shim"></div>/**\r
- * @cfg {Boolean} shim\r
- * @hide\r
- */\r
- <div id="cfg-Ext.form.FieldSet-tbar"></div>/**\r
- * @cfg {Object/Array} tbar\r
- * @hide\r
- */\r
- <div id="cfg-Ext.form.FieldSet-tools"></div>/**\r
- * @cfg {Array} tools\r
- * @hide\r
- */\r
- <div id="cfg-Ext.form.FieldSet-toolTemplate"></div>/**\r
- * @cfg {Ext.Template/Ext.XTemplate} toolTemplate\r
- * @hide\r
- */\r
- <div id="cfg-Ext.form.FieldSet-xtype"></div>/**\r
- * @cfg {String} xtype\r
- * @hide\r
- */\r
- <div id="prop-Ext.form.FieldSet-header"></div>/**\r
- * @property header\r
- * @hide\r
- */\r
- <div id="prop-Ext.form.FieldSet-footer"></div>/**\r
- * @property footer\r
- * @hide\r
- */\r
- <div id="method-Ext.form.FieldSet-focus"></div>/**\r
- * @method focus\r
- * @hide\r
- */\r
- <div id="method-Ext.form.FieldSet-getBottomToolbar"></div>/**\r
- * @method getBottomToolbar\r
- * @hide\r
- */\r
- <div id="method-Ext.form.FieldSet-getTopToolbar"></div>/**\r
- * @method getTopToolbar\r
- * @hide\r
- */\r
- <div id="method-Ext.form.FieldSet-setIconClass"></div>/**\r
- * @method setIconClass\r
- * @hide\r
- */\r
- <div id="event-Ext.form.FieldSet-activate"></div>/**\r
- * @event activate\r
- * @hide\r
- */\r
- <div id="event-Ext.form.FieldSet-beforeclose"></div>/**\r
- * @event beforeclose\r
- * @hide\r
- */\r
- <div id="event-Ext.form.FieldSet-bodyresize"></div>/**\r
- * @event bodyresize\r
- * @hide\r
- */\r
- <div id="event-Ext.form.FieldSet-close"></div>/**\r
- * @event close\r
- * @hide\r
- */\r
- <div id="event-Ext.form.FieldSet-deactivate"></div>/**\r
- * @event deactivate\r
- * @hide\r
- */\r
-});\r
-Ext.reg('fieldset', Ext.form.FieldSet);\r
-</pre>
+<div id="cls-Ext.form.FieldSet"></div>/**
+ * @class Ext.form.FieldSet
+ * @extends Ext.Panel
+ * Standard container used for grouping items within a {@link Ext.form.FormPanel form}.
+ * <pre><code>
+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
+ }]
+ }]
+});
+ * </code></pre>
+ * @constructor
+ * @param {Object} config Configuration options
+ * @xtype fieldset
+ */
+Ext.form.FieldSet = Ext.extend(Ext.Panel, {
+ <div id="cfg-Ext.form.FieldSet-checkboxToggle"></div>/**
+ * @cfg {Mixed} checkboxToggle <tt>true</tt> 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 <tt>false</tt>).
+ * <p>A {@link Ext.DomHelper DomHelper} element spec may also be specified to create the checkbox.
+ * If <tt>true</tt> is specified, the default DomHelper config object used to create the element
+ * is:</p><pre><code>
+ * {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'}
+ * </code></pre>
+ */
+ <div id="cfg-Ext.form.FieldSet-checkboxName"></div>/**
+ * @cfg {String} checkboxName The name to assign to the fieldset's checkbox if <tt>{@link #checkboxToggle} = true</tt>
+ * (defaults to <tt>'[checkbox id]-checkbox'</tt>).
+ */
+ <div id="cfg-Ext.form.FieldSet-collapsible"></div>/**
+ * @cfg {Boolean} collapsible
+ * <tt>true</tt> to make the fieldset collapsible and have the expand/collapse toggle button automatically
+ * rendered into the legend element, <tt>false</tt> to keep the fieldset statically sized with no collapse
+ * button (defaults to <tt>false</tt>). Another option is to configure <tt>{@link #checkboxToggle}</tt>.
+ */
+ <div id="cfg-Ext.form.FieldSet-labelWidth"></div>/**
+ * @cfg {Number} labelWidth The width of labels. This property cascades to child containers.
+ */
+ <div id="cfg-Ext.form.FieldSet-itemCls"></div>/**
+ * @cfg {String} itemCls A css class to apply to the <tt>x-form-item</tt> of fields (see
+ * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl} for details).
+ * This property cascades to child containers.
+ */
+ <div id="cfg-Ext.form.FieldSet-baseCls"></div>/**
+ * @cfg {String} baseCls The base CSS class applied to the fieldset (defaults to <tt>'x-fieldset'</tt>).
+ */
+ baseCls : 'x-fieldset',
+ <div id="cfg-Ext.form.FieldSet-layout"></div>/**
+ * @cfg {String} layout The {@link Ext.Container#layout} to use inside the fieldset (defaults to <tt>'form'</tt>).
+ */
+ layout : 'form',
+ <div id="cfg-Ext.form.FieldSet-animCollapse"></div>/**
+ * @cfg {Boolean} animCollapse
+ * <tt>true</tt> to animate the transition when the panel is collapsed, <tt>false</tt> to skip the
+ * animation (defaults to <tt>false</tt>).
+ */
+ 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);
+ },
+
+ <div id="method-Ext.form.FieldSet-onCheckClick"></div>/**
+ * 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']();
+ }
+
+ <div id="cfg-Ext.form.FieldSet-activeItem"></div>/**
+ * @cfg {String/Number} activeItem
+ * @hide
+ */
+ <div id="cfg-Ext.form.FieldSet-applyTo"></div>/**
+ * @cfg {Mixed} applyTo
+ * @hide
+ */
+ <div id="cfg-Ext.form.FieldSet-bodyBorder"></div>/**
+ * @cfg {Boolean} bodyBorder
+ * @hide
+ */
+ <div id="cfg-Ext.form.FieldSet-border"></div>/**
+ * @cfg {Boolean} border
+ * @hide
+ */
+ <div id="cfg-Ext.form.FieldSet-bufferResize"></div>/**
+ * @cfg {Boolean/Number} bufferResize
+ * @hide
+ */
+ <div id="cfg-Ext.form.FieldSet-collapseFirst"></div>/**
+ * @cfg {Boolean} collapseFirst
+ * @hide
+ */
+ <div id="cfg-Ext.form.FieldSet-defaultType"></div>/**
+ * @cfg {String} defaultType
+ * @hide
+ */
+ <div id="cfg-Ext.form.FieldSet-disabledClass"></div>/**
+ * @cfg {String} disabledClass
+ * @hide
+ */
+ <div id="cfg-Ext.form.FieldSet-elements"></div>/**
+ * @cfg {String} elements
+ * @hide
+ */
+ <div id="cfg-Ext.form.FieldSet-floating"></div>/**
+ * @cfg {Boolean} floating
+ * @hide
+ */
+ <div id="cfg-Ext.form.FieldSet-footer"></div>/**
+ * @cfg {Boolean} footer
+ * @hide
+ */
+ <div id="cfg-Ext.form.FieldSet-frame"></div>/**
+ * @cfg {Boolean} frame
+ * @hide
+ */
+ <div id="cfg-Ext.form.FieldSet-header"></div>/**
+ * @cfg {Boolean} header
+ * @hide
+ */
+ <div id="cfg-Ext.form.FieldSet-headerAsText"></div>/**
+ * @cfg {Boolean} headerAsText
+ * @hide
+ */
+ <div id="cfg-Ext.form.FieldSet-hideCollapseTool"></div>/**
+ * @cfg {Boolean} hideCollapseTool
+ * @hide
+ */
+ <div id="cfg-Ext.form.FieldSet-iconCls"></div>/**
+ * @cfg {String} iconCls
+ * @hide
+ */
+ <div id="cfg-Ext.form.FieldSet-shadow"></div>/**
+ * @cfg {Boolean/String} shadow
+ * @hide
+ */
+ <div id="cfg-Ext.form.FieldSet-shadowOffset"></div>/**
+ * @cfg {Number} shadowOffset
+ * @hide
+ */
+ <div id="cfg-Ext.form.FieldSet-shim"></div>/**
+ * @cfg {Boolean} shim
+ * @hide
+ */
+ <div id="cfg-Ext.form.FieldSet-tbar"></div>/**
+ * @cfg {Object/Array} tbar
+ * @hide
+ */
+ <div id="cfg-Ext.form.FieldSet-tools"></div>/**
+ * @cfg {Array} tools
+ * @hide
+ */
+ <div id="cfg-Ext.form.FieldSet-toolTemplate"></div>/**
+ * @cfg {Ext.Template/Ext.XTemplate} toolTemplate
+ * @hide
+ */
+ <div id="cfg-Ext.form.FieldSet-xtype"></div>/**
+ * @cfg {String} xtype
+ * @hide
+ */
+ <div id="prop-Ext.form.FieldSet-header"></div>/**
+ * @property header
+ * @hide
+ */
+ <div id="prop-Ext.form.FieldSet-footer"></div>/**
+ * @property footer
+ * @hide
+ */
+ <div id="method-Ext.form.FieldSet-focus"></div>/**
+ * @method focus
+ * @hide
+ */
+ <div id="method-Ext.form.FieldSet-getBottomToolbar"></div>/**
+ * @method getBottomToolbar
+ * @hide
+ */
+ <div id="method-Ext.form.FieldSet-getTopToolbar"></div>/**
+ * @method getTopToolbar
+ * @hide
+ */
+ <div id="method-Ext.form.FieldSet-setIconClass"></div>/**
+ * @method setIconClass
+ * @hide
+ */
+ <div id="event-Ext.form.FieldSet-activate"></div>/**
+ * @event activate
+ * @hide
+ */
+ <div id="event-Ext.form.FieldSet-beforeclose"></div>/**
+ * @event beforeclose
+ * @hide
+ */
+ <div id="event-Ext.form.FieldSet-bodyresize"></div>/**
+ * @event bodyresize
+ * @hide
+ */
+ <div id="event-Ext.form.FieldSet-close"></div>/**
+ * @event close
+ * @hide
+ */
+ <div id="event-Ext.form.FieldSet-deactivate"></div>/**
+ * @event deactivate
+ * @hide
+ */
+});
+Ext.reg('fieldset', Ext.form.FieldSet);</pre>
git.ithinksw.org / extjs.git / blobdiff