-
- *
- A Number specifying the new width in the {@link #getEl Element}'s {@link Ext.Element#defaultUnit}s (by default, pixels). + * @param {Mixed} width The new width to set. This may be one of:
- A Number specifying the new width in the {@link #getEl Element}'s {@link Ext.Element#defaultUnit defaultUnit}s (by default, pixels). *
- A String used to set the CSS width style. *
- A Number specifying the new height in the {@link #getEl Element}'s {@link Ext.Element#defaultUnit}s (by default, pixels). + * @param {Mixed} height The new height to set. This may be one of:
- A Number specifying the new height in the {@link #getEl Element}'s {@link Ext.Element#defaultUnit defaultUnit}s (by default, pixels). *
- A String used to set the CSS height style. *
- undefined to leave the height unchanged. *
- Specify as an Object - *
- Example usage: -
- type - *
- {@link Ext.layout.AbsoluteLayout absolute} - *
- {@link Ext.layout.AccordionLayout accordion} - *
- {@link Ext.layout.AnchorLayout anchor} - *
- {@link Ext.layout.ContainerLayout auto} Default - *
- {@link Ext.layout.BorderLayout border} - *
- {@link Ext.layout.CardLayout card} - *
- {@link Ext.layout.ColumnLayout column} - *
- {@link Ext.layout.FitLayout fit} - *
- {@link Ext.layout.FormLayout form} - *
- {@link Ext.layout.HBoxLayout hbox} - *
- {@link Ext.layout.MenuLayout menu} - *
- {@link Ext.layout.TableLayout table} - *
- {@link Ext.layout.ToolbarLayout toolbar} - *
- {@link Ext.layout.VBoxLayout vbox} - *
- Layout specific configuration properties - *
- Specify as a String - *
- Example usage: -
- layout - *
- {@link #layoutConfig} - *
- any type of object based on {@link Ext.Component} - *
- a fully instanciated object or - *
- an object literal that: - *
- has a specified
{@link Ext.Component#xtype xtype}
- * - the {@link Ext.Component#xtype} specified is associated with the Component - * desired and should be chosen from one of the available xtypes as listed - * in {@link Ext.Component}. - *
- If an
{@link Ext.Component#xtype xtype}is not explicitly - * specified, the {@link #defaultType} for that Container is used.
- * - will be "lazily instanciated", avoiding the overhead of constructing a fully - * instanciated Component object - *
- Ext uses lazy rendering. Child Components will only be rendered - * should it become necessary. Items are automatically laid out when they are first - * shown (no sizing is done while hidden), or in response to a {@link #doLayout} call. - *
- Do not specify
{@link Ext.Panel#contentEl contentEl}/ - *{@link Ext.Panel#html html}withitems.
- * - Fires the {@link #beforeadd} event before adding - *
- The Container's {@link #defaults default config values} will be applied
- * accordingly (see
{@link #defaults}for details).
- * - Fires the {@link #add} event after the component has been added. - *
- If the Container is already rendered when add
- * is called, you may need to call {@link #doLayout} to refresh the view which causes
- * any unrendered child Components to be rendered. This is required so that you can
- * add multiple child components if needed while only refreshing the layout
- * once. For example:
-var tb = new {@link Ext.Toolbar}(); -tb.render(document.body); // toolbar is rendered -tb.add({text:'Button 1'}); // add multiple items ({@link #defaultType} for {@link Ext.Toolbar Toolbar} is 'button') -tb.add({text:'Button 2'}); -tb.{@link #doLayout}(); // refresh the layout - *
- * - Warning: Containers directly managed by the BorderLayout layout manager - * may not be removed or added. See the Notes for {@link Ext.layout.BorderLayout BorderLayout} - * for more details. - *
- a String : representing the
{@link Ext.Component#itemId itemId}- * or{@link Ext.Component#id id}of the child component
- * - a Number : representing the position of the child component
- * within the
{@link #items}property
- * - {@link Ext.layout.AbsoluteLayout Absolute Layout} : 'x-abs-layout-item' - *
- {@link Ext.layout.Box Box Layout} : 'x-box-item' - *
- {@link Ext.layout.ColumnLayout Column Layout} : 'x-column' - *
- Percentage : Any value between 1 and 100, expressed as a percentage.- * The first anchor is the percentage width that the item should take up within the container, and the - * second is the percentage height. For example:
-// two values specified -anchor: '100% 50%' // render item complete width of the container and - // 1/2 height of the container -// one value specified -anchor: '100%' // the width value; the height will default to auto - *
- *
- * - Offsets : Any positive or negative integer value.- * This is a raw adjustment where the first anchor is the offset from the right edge of the container, - * and the second is the offset from the bottom edge. For example:
-// two values specified -anchor: '-50 -100' // render item the complete width of the container - // minus 50 pixels and - // the complete height minus 100 pixels. -// one value specified -anchor: '-50' // anchor value is assumed to be the right offset value - // bottom offset will default to 0 - *
- *
- * - Sides : Valid values are 'right' (or 'r') and 'bottom'
- * (or 'b').- * Either the container must have a fixed size or an anchorSize config value defined at render time in - * order for these to have any effect.
- *
- *
- Mixed : - * Anchor values can also be mixed as needed. For example, to render the width offset from the container - * right edge by 50 pixels and 75% of the container's height use: - *
-anchor: '-50 75%' - *
- *
- *
- * - Any container using the BorderLayout must have a child item with region:'center'. - * The child item in the center region will always be resized to fill the remaining space not used by - * the other regions in the layout. - *
- Any child items with a region of west or east must have width defined - * (an integer representing the number of pixels that the region should take up). - *
- Any child items with a region of north or south must have height defined. - *
- The regions of a BorderLayout are fixed at render time and thereafter, its child Components may not be removed or added. To add/remove
- * Components within a BorderLayout, have them wrapped by an additional Container which is directly
- * managed by the BorderLayout. If the region is to be collapsible, the Container used directly
- * by the BorderLayout manager should be a Panel. In the following example a Container (an Ext.Panel)
- * is added to the west region:
- * - *
+ *-wrc = {@link Ext#getCmp Ext.getCmp}('west-region-container'); -wrc.{@link Ext.Panel#removeAll removeAll}(); -wrc.{@link Ext.Container#add add}({ - title: 'Added Panel', - html: 'Some content' + +myTabPanel.add(myNewGrid); // {@link Ext.TabPanel} implicitly uses {@link Ext.layout.CardLayout CardLayout} +myTabPanel.{@link Ext.TabPanel#setActiveTab setActiveTab}(myNewGrid); + *The example above adds a newly created GridPanel to a TabPanel. Note that + * a TabPanel uses {@link Ext.layout.CardLayout} as its layout manager which + * means all its child items are sized to {@link Ext.layout.FitLayout fit} + * exactly into its client area. + *
Overnesting is a common problem. + * An example of overnesting occurs when a GridPanel is added to a TabPanel + * by wrapping the GridPanel inside a wrapping Panel (that has no + *
{@link #layout}specified) and then add that wrapping Panel + * to the TabPanel. The point to realize is that a GridPanel is a + * Component which can be added directly to a Container. If the wrapping Panel + * has no{@link #layout}configuration, then the overnested + * GridPanel will not be sized as expected.+ * + *
Adding via remote configuration
+ * + *A server side script can be used to add Components which are generated dynamically on the server. + * An example of adding a GridPanel to a TabPanel where the GridPanel is generated by the server + * based on certain parameters: + *
+// execute an Ajax request to invoke server side script: +Ext.Ajax.request({ + url: 'gen-invoice-grid.php', + // send additional parameters to instruct server script + params: { + startDate: Ext.getCmp('start-date').getValue(), + endDate: Ext.getCmp('end-date').getValue() + }, + // process the response object to add it to the TabPanel: + success: function(xhr) { + var newComponent = eval(xhr.responseText); // see discussion below + myTabPanel.add(newComponent); // add the component to the TabPanel + myTabPanel.setActiveTab(newComponent); + }, + failure: function() { + Ext.Msg.alert("Grid create failed", "Server communication failure"); + } }); -wrc.{@link Ext.Container#doLayout doLayout}(); - *
- * - To reference a {@link Ext.layout.BorderLayout.Region Region}:
- * - *
-wr = myBorderPanel.layout.west; - *
- * - Specify as an Object + *
- Example usage: +
type
+ * {@link Ext.layout.AbsoluteLayout absolute}
+ * {@link Ext.layout.AccordionLayout accordion}
+ * {@link Ext.layout.AnchorLayout anchor}
+ * {@link Ext.layout.ContainerLayout auto}Default
+ * {@link Ext.layout.BorderLayout border}
+ * {@link Ext.layout.CardLayout card}
+ * {@link Ext.layout.ColumnLayout column}
+ * {@link Ext.layout.FitLayout fit}
+ * {@link Ext.layout.FormLayout form}
+ * {@link Ext.layout.HBoxLayout hbox}
+ * {@link Ext.layout.MenuLayout menu}
+ * {@link Ext.layout.TableLayout table}
+ * {@link Ext.layout.ToolbarLayout toolbar}
+ * {@link Ext.layout.VBoxLayout vbox}
+ * - Layout specific configuration properties + *
- Specify as a String + *
- Example usage: +
layout
+ * {@link #layoutConfig}
+ * - any type of object based on {@link Ext.Component} + *
- a fully instanciated object or + *
- an object literal that: + *
- has a specified
{@link Ext.Component#xtype xtype}
+ * - the {@link Ext.Component#xtype} specified is associated with the Component + * desired and should be chosen from one of the available xtypes as listed + * in {@link Ext.Component}. + *
- If an
{@link Ext.Component#xtype xtype}is not explicitly + * specified, the {@link #defaultType} for that Container is used.
+ * - will be "lazily instanciated", avoiding the overhead of constructing a fully + * instanciated Component object + *
- Ext uses lazy rendering. Child Components will only be rendered + * should it become necessary. Items are automatically laid out when they are first + * shown (no sizing is done while hidden), or in response to a {@link #doLayout} call. + *
- Do not specify
{@link Ext.Panel#contentEl contentEl}/ + *{@link Ext.Panel#html html}withitems.
+ * - Fires the {@link #beforeadd} event before adding + *
- The Container's {@link #defaults default config values} will be applied
+ * accordingly (see
{@link #defaults}for details).
+ * - Fires the {@link #add} event after the component has been added. + *
- If the Container is already rendered when
add+ * is called, you may need to call {@link #doLayout} to refresh the view which causes + * any unrendered child Components to be rendered. This is required so that you can + *addmultiple child components if needed while only refreshing the layout + * once. For example:+var tb = new {@link Ext.Toolbar}(); +tb.render(document.body); // toolbar is rendered +tb.add({text:'Button 1'}); // add multiple items ({@link #defaultType} for {@link Ext.Toolbar Toolbar} is 'button') +tb.add({text:'Button 2'}); +tb.{@link #doLayout}(); // refresh the layout + *
+ * - Warning: Containers directly managed by the BorderLayout layout manager + * may not be removed or added. See the Notes for {@link Ext.layout.BorderLayout BorderLayout} + * for more details. + *
- a
String: representing the{@link Ext.Component#itemId itemId}+ * or{@link Ext.Component#id id}of the child component
+ * - a
Number: representing the position of the child component + * within the{@link #items}property
+ * - undefined (default)By default, {@link #collapsible} - * regions are collapsed by clicking the expand/collapse tool button that renders into the region's - * title bar.
- *
- 'mini'Optionally, when collapseMode is set to - * 'mini' the region's split bar will also display a small collapse button in the center of - * the bar. In 'mini' mode the region will collapse to a thinner bar than in normal mode. - *
- *
- If there is only one value, it applies to all sides. - *
- If there are two values, the top and bottom borders are set to the first value and the - * right and left are set to the second. - *
- If there are three values, the top is set to the first value, the left and right are set - * to the second, and the bottom is set to the third. - *
- If there are four values, they apply to the top, right, bottom, and left, respectively. - *
- If there is only one value, it applies to all sides. - *
- If there are two values, the top and bottom borders are set to the first value and the - * right and left are set to the second. - *
- If there are three values, the top is set to the first value, the left and right are set - * to the second, and the bottom is set to the third. - *
- If there are four values, they apply to the top, right, bottom, and left, respectively. - *
- this configuration option is ignored if region='center' - *
- when split == true, it is common to specify a - * {@link Ext.SplitBar#minSize minSize} and {@link Ext.SplitBar#maxSize maxSize} - * for the {@link Ext.BoxComponent BoxComponent} representing the region. These are not native - * configs of {@link Ext.BoxComponent BoxComponent}, and are used only by this class. - *
- if {@link #collapseMode} = 'mini' requires split = true to reserve space - * for the collapse tool - *
- {@link Ext.layout.AbsoluteLayout Absolute Layout} : 'x-abs-layout-item' + *
- {@link Ext.layout.Box Box Layout} : 'x-box-item' + *
- {@link Ext.layout.ColumnLayout Column Layout} : 'x-column' + *
- Percentage : Any value between 1 and 100, expressed as a percentage.+ * The first anchor is the percentage width that the item should take up within the container, and the + * second is the percentage height. For example:
+// two values specified +anchor: '100% 50%' // render item complete width of the container and + // 1/2 height of the container +// one value specified +anchor: '100%' // the width value; the height will default to auto + *
+ *
+ * - Offsets : Any positive or negative integer value.+ * This is a raw adjustment where the first anchor is the offset from the right edge of the container, + * and the second is the offset from the bottom edge. For example:
+// two values specified +anchor: '-50 -100' // render item the complete width of the container + // minus 50 pixels and + // the complete height minus 100 pixels. +// one value specified +anchor: '-50' // anchor value is assumed to be the right offset value + // bottom offset will default to 0 + *
+ *
+ * - Sides : Valid values are 'right' (or 'r') and 'bottom'
+ * (or 'b').+ * Either the container must have a fixed size or an anchorSize config value defined at render time in + * order for these to have any effect.
+ *
+ *
- Mixed : + * Anchor values can also be mixed as needed. For example, to render the width offset from the container + * right edge by 50 pixels and 75% of the container's height use: + *
+anchor: '-50 75%' + *
+ *
+ *
+ * - Any container using the BorderLayout must have a child item with region:'center'. + * The child item in the center region will always be resized to fill the remaining space not used by + * the other regions in the layout. + *
- Any child items with a region of west or east must have width defined + * (an integer representing the number of pixels that the region should take up). + *
- Any child items with a region of north or south must have height defined. + *
- The regions of a BorderLayout are fixed at render time and thereafter, its child Components may not be removed or added. To add/remove
+ * Components within a BorderLayout, have them wrapped by an additional Container which is directly
+ * managed by the BorderLayout. If the region is to be collapsible, the Container used directly
+ * by the BorderLayout manager should be a Panel. In the following example a Container (an Ext.Panel)
+ * is added to the west region:
+ * + *
+wrc = {@link Ext#getCmp Ext.getCmp}('west-region-container'); +wrc.{@link Ext.Panel#removeAll removeAll}(); +wrc.{@link Ext.Container#add add}({ + title: 'Added Panel', + html: 'Some content' +}); +wrc.{@link Ext.Container#doLayout doLayout}(); + *
+ * - To reference a {@link Ext.layout.BorderLayout.Region Region}:
+ * + *
+wr = myBorderPanel.layout.west; + *
+ * - {@link Ext.form.FormPanel#hideLabels hideLabels} - *
- {@link Ext.form.FormPanel#labelAlign labelAlign} - *
- {@link Ext.form.FormPanel#labelPad labelPad} - *
- {@link Ext.form.FormPanel#labelSeparator labelSeparator} - *
- {@link Ext.form.FormPanel#labelWidth labelWidth} - *
- {@link Ext.Component#anchor anchor} - *
- {@link Ext.Component#clearCls clearCls} - *
- {@link Ext.Component#fieldLabel fieldLabel} - *
- {@link Ext.Component#hideLabel hideLabel} - *
- {@link Ext.Component#itemCls itemCls} - *
- {@link Ext.Component#labelSeparator labelSeparator} - *
- {@link Ext.Component#labelStyle labelStyle} - *
- undefined (default)By default, {@link #collapsible} + * regions are collapsed by clicking the expand/collapse tool button that renders into the region's + * title bar.
+ *
- 'mini'Optionally, when collapseMode is set to + * 'mini' the region's split bar will also display a small collapse button in the center of + * the bar. In 'mini' mode the region will collapse to a thinner bar than in normal mode. + *
+ *
- If there is only one value, it applies to all sides. + *
- If there are two values, the top and bottom borders are set to the first value and the + * right and left are set to the second. + *
- If there are three values, the top is set to the first value, the left and right are set + * to the second, and the bottom is set to the third. + *
- If there are four values, they apply to the top, right, bottom, and left, respectively. + *
- If there is only one value, it applies to all sides. + *
- If there are two values, the top and bottom borders are set to the first value and the + * right and left are set to the second. + *
- If there are three values, the top is set to the first value, the left and right are set + * to the second, and the bottom is set to the third. + *
- If there are four values, they apply to the top, right, bottom, and left, respectively. + *
- this configuration option is ignored if region='center' + *
- when split == true, it is common to specify a + * {@link Ext.SplitBar#minSize minSize} and {@link Ext.SplitBar#maxSize maxSize} + * for the {@link Ext.BoxComponent BoxComponent} representing the region. These are not native + * configs of {@link Ext.BoxComponent BoxComponent}, and are used only by this class. + *
- if {@link #collapseMode} = 'mini' requires split = true to reserve space + * for the collapse tool + *
- itemCls : StringThe CSS class applied to the outermost div wrapper - * that contains this field label and field element (the default class is 'x-form-item' and itemCls - * will be added to that). If supplied, itemCls at the field level will override the default itemCls - * supplied at the container level.
- *
- id : StringThe id of the Field
- *
- {@link #labelStyle} : String- * A CSS style specification string to add to the field label for this field (defaults to '' or the - * {@link #labelStyle layout's value for labelStyle}).
- *
- label : StringThe text to display as the label for this - * field (defaults to '')
- *
- {@link #labelSeparator} : StringThe separator to display after - * the text of the label for this field (defaults to a colon ':' or the - * {@link #labelSeparator layout's value for labelSeparator}). To hide the separator use empty string ''.
- *
- elementStyle : StringThe styles text for the input element's wrapper.
- *
- clearCls : StringThe CSS class to apply to the special clearing div - * rendered directly after each form field wrapper (defaults to 'x-form-clear-left')
- *
- itemCls : StringThe CSS class applied to the outermost div wrapper - * that contains this field label and field element (the default class is 'x-form-item' and itemCls - * will be added to that). If supplied, itemCls at the field level will override the default itemCls - * supplied at the container level.
- *
- id : StringThe id of the Field
- *
- {@link #labelStyle} : String- * A CSS style specification string to add to the field label for this field (defaults to '' or the - * {@link #labelStyle layout's value for labelStyle}).
- *
- label : StringThe text to display as the label for this - * field (defaults to '')
- *
- {@link #labelSeparator} : StringThe separator to display after - * the text of the label for this field (defaults to a colon ':' or the - * {@link #labelSeparator layout's value for labelSeparator}). To hide the separator use empty string ''.
- *
- elementStyle : StringThe styles text for the input element's wrapper.
- *
- clearCls : StringThe CSS class to apply to the special clearing div - * rendered directly after each form field wrapper (defaults to 'x-form-clear-left')
- *
- rowspan Applied to the table cell containing the item. - *
- colspan Applied to the table cell containing the item. - *
- cellId An id applied to the table cell containing the item. - *
- cellCls A CSS class name added to the table cell containing the item. - *
- If there is only one value, it applies to all sides. - *
- If there are two values, the top and bottom borders are set to the - * first value and the right and left are set to the second. - *
- If there are three values, the top is set to the first value, the left - * and right are set to the second, and the bottom is set to the third. - *
- If there are four values, they apply to the top, right, bottom, and - * left, respectively. - *
- If there is only one value, it applies to all sides. - *
- If there are two values, the top and bottom borders are set to the - * first value and the right and left are set to the second. - *
- If there are three values, the top is set to the first value, the left - * and right are set to the second, and the bottom is set to the third. - *
- If there are four values, they apply to the top, right, bottom, and - * left, respectively. - *
- left : Defaultchild items are aligned horizontally - * at the left side of the container
- *
- center : child items are aligned horizontally at the - * mid-width of the container
- *
- stretch : child items are stretched horizontally to fill - * the width of the container
- *
- stretchmax : child items are stretched horizontally to - * the size of the largest item.
- *
- start : Defaultchild items are packed together at - * top side of container
- *
- center : child items are packed together at - * mid-height of container
- *
- end : child items are packed together at bottom - * side of container
- *
- top : Defaultchild items are aligned vertically - * at the left side of the container
- *
- middle : child items are aligned vertically at the - * mid-height of the container
- *
- stretch : child items are stretched vertically to fill - * the height of the container
- *
- stretchmax : child items are stretched vertically to - * the size of the largest item.
- */
- align : 'top', // top, middle, stretch, strechmax
- /**
- * @cfg {String} pack
- * Controls how the child items of the container are packed together. Acceptable configuration values
- * for this property are:
- *
- start : Defaultchild items are packed together at - * left side of container
- *
- center : child items are packed together at - * mid-width of container
- *
- end : child items are packed together at right - * side of container
- *
- {@link Ext.form.FormPanel#hideLabels hideLabels} + *
- {@link Ext.form.FormPanel#labelAlign labelAlign} + *
- {@link Ext.form.FormPanel#labelPad labelPad} + *
- {@link Ext.form.FormPanel#labelSeparator labelSeparator} + *
- {@link Ext.form.FormPanel#labelWidth labelWidth} + *
- {@link Ext.Component#anchor anchor} + *
- {@link Ext.Component#clearCls clearCls} + *
- {@link Ext.Component#fieldLabel fieldLabel} + *
- {@link Ext.Component#hideLabel hideLabel} + *
- {@link Ext.Component#itemCls itemCls} + *
- {@link Ext.Component#labelSeparator labelSeparator} + *
- {@link Ext.Component#labelStyle labelStyle} + *
- itemCls : StringThe CSS class applied to the outermost div wrapper + * that contains this field label and field element (the default class is 'x-form-item' and itemCls + * will be added to that). If supplied, itemCls at the field level will override the default itemCls + * supplied at the container level.
+ *
- id : StringThe id of the Field
+ *
- {@link #labelStyle} : String+ * A CSS style specification string to add to the field label for this field (defaults to '' or the + * {@link #labelStyle layout's value for labelStyle}).
+ *
- label : StringThe text to display as the label for this + * field (defaults to '')
+ *
- {@link #labelSeparator} : StringThe separator to display after + * the text of the label for this field (defaults to a colon ':' or the + * {@link #labelSeparator layout's value for labelSeparator}). To hide the separator use empty string ''.
+ *
- elementStyle : StringThe styles text for the input element's wrapper.
+ *
- clearCls : StringThe CSS class to apply to the special clearing div + * rendered directly after each form field wrapper (defaults to 'x-form-clear-left')
+ *
- itemCls : StringThe CSS class applied to the outermost div wrapper + * that contains this field label and field element (the default class is 'x-form-item' and itemCls + * will be added to that). If supplied, itemCls at the field level will override the default itemCls + * supplied at the container level.
+ *
- id : StringThe id of the Field
+ *
- {@link #labelStyle} : String+ * A CSS style specification string to add to the field label for this field (defaults to '' or the + * {@link #labelStyle layout's value for labelStyle}).
+ *
- label : StringThe text to display as the label for this + * field (defaults to the field's configured fieldLabel property)
+ *
- {@link #labelSeparator} : StringThe separator to display after + * the text of the label for this field (defaults to a colon ':' or the + * {@link #labelSeparator layout's value for labelSeparator}). To hide the separator use empty string ''.
+ *
- elementStyle : StringThe styles text for the input element's wrapper.
+ *
- clearCls : StringThe CSS class to apply to the special clearing div + * rendered directly after each form field wrapper (defaults to 'x-form-clear-left')
+ *
- rowspan Applied to the table cell containing the item. + *
- colspan Applied to the table cell containing the item. + *
- cellId An id applied to the table cell containing the item. + *
- cellCls A CSS class name added to the table cell containing the item. + *
- If there is only one value, it applies to all sides. + *
- If there are two values, the top and bottom borders are set to the + * first value and the right and left are set to the second. + *
- If there are three values, the top is set to the first value, the left + * and right are set to the second, and the bottom is set to the third. + *
- If there are four values, they apply to the top, right, bottom, and + * left, respectively. + *
- If there is only one value, it applies to all sides. + *
- If there are two values, the top and bottom borders are set to the + * first value and the right and left are set to the second. + *
- If there are three values, the top is set to the first value, the left + * and right are set to the second, and the bottom is set to the third. + *
- If there are four values, they apply to the top, right, bottom, and + * left, respectively. + *
- left : Defaultchild items are aligned horizontally + * at the left side of the container
+ *
- center : child items are aligned horizontally at the + * mid-width of the container
+ *
- stretch : child items are stretched horizontally to fill + * the width of the container
+ *
- stretchmax : child items are stretched horizontally to + * the size of the largest item.
+ *
- start : Defaultchild items are packed together at + * top side of container
+ *
- center : child items are packed together at + * mid-height of container
+ *
- end : child items are packed together at bottom + * side of container
+ *
- top : Defaultchild items are aligned vertically + * at the top of the container
+ *
- middle : child items are aligned vertically in the + * middle of the container
+ *
- stretch : child items are stretched vertically to fill + * the height of the container
+ *
- stretchmax : child items are stretched vertically to + * the height of the largest item.
+ */
+ align: 'top', // top, middle, stretch, strechmax
+
+ type : 'hbox',
+
+ /**
+ * @private
+ * See parent documentation
+ */
+ updateInnerCtSize: function(tSize, calcs) {
+ var innerCtWidth = tSize.width,
+ innerCtHeight = calcs.meta.maxHeight + this.padding.top + this.padding.bottom;
+
+ if (this.align == 'stretch') {
+ innerCtHeight = tSize.height;
+ } else if (this.align == 'middle') {
+ innerCtHeight = Math.max(tSize.height, innerCtHeight);
+ }
+
+ this.innerCt.setSize(innerCtWidth || undefined, innerCtHeight || undefined);
+ },
+
+ /**
+ * @cfg {String} pack
+ * Controls how the child items of the container are packed together. Acceptable configuration values
+ * for this property are:
+ *
- start : Defaultchild items are packed together at + * left side of container
+ *
- center : child items are packed together at + * mid-width of container
+ *
- end : child items are packed together at right + * side of container
+ *
- ',
+ '
', + ' ', + '', + '
'
+ );
+ }
+
+ if(c && !c.rendered){
+ if(Ext.isNumber(position)){
+ position = target.dom.childNodes[position];
+ }
+ var a = this.getItemArgs(c);
+
+// The Component's positionEl is the - it is rendered into + c.render(c.positionEl = position ? + this.itemTpl.insertBefore(position, a, true) : + this.itemTpl.append(target, a, true)); + +// Link the containing
- to the item. + c.positionEl.menuItemId = c.getItemId(); + +// If rendering a regular Component, and it needs an icon, +// move the Component rightwards. + if (!a.isMenuItem && a.needsIcon) { + c.positionEl.addClass('x-menu-list-item-indent'); + } + this.configureItem(c, position); + }else if(c && !this.isValidParent(c, target)){ + if(Ext.isNumber(position)){ + position = target.dom.childNodes[position]; + } + target.dom.insertBefore(c.getActionEl().dom, position || null); + } + }, + + getItemArgs : function(c) { + var isMenuItem = c instanceof Ext.menu.Item; + return { + isMenuItem: isMenuItem, + needsIcon: !isMenuItem && (c.icon || c.iconCls), + icon: c.icon || Ext.BLANK_IMAGE_URL, + iconCls: 'x-menu-item-icon ' + (c.iconCls || ''), + itemId: 'x-menu-el-' + c.id, + itemCls: 'x-menu-list-item ' + }; + }, + + // Valid if the Component is in a
- which is part of our target
-
+ isValidParent : function(c, target) {
+ return c.el.up('li.x-menu-list-item', 5).dom.parentNode === (target.dom || target);
+ },
+
+ onLayout : function(ct, target){
+ Ext.layout.MenuLayout.superclass.onLayout.call(this, ct, target);
+ this.doAutoSize();
+ },
+
+ doAutoSize : function(){
+ var ct = this.container, w = ct.width;
+ if(ct.floating){
+ if(w){
+ ct.setWidth(w);
+ }else if(Ext.isIE){
+ ct.setWidth(Ext.isStrict && (Ext.isIE7 || Ext.isIE8) ? 'auto' : ct.minWidth);
+ var el = ct.getEl(), t = el.dom.offsetWidth; // force recalc
+ ct.setWidth(ct.getLayoutTarget().getWidth() + el.getFrameWidth('lr'));
+ }
+ }
+ }
+});
+Ext.Container.LAYOUTS['menu'] = Ext.layout.MenuLayout;
+/**
+ * @class Ext.Viewport
+ * @extends Ext.Container
+ *
A specialized container representing the viewable application area (the browser viewport).
+ *The Viewport renders itself to the document body, and automatically sizes itself to the size of + * the browser viewport and manages window resizing. There may only be one Viewport created + * in a page. Inner layouts are available by virtue of the fact that all {@link Ext.Panel Panel}s + * added to the Viewport, either through its {@link #items}, or through the items, or the {@link #add} + * method of any of its child Panels may themselves have a layout.
+ *The Viewport does not provide scrolling, so child Panels within the Viewport should provide + * for scrolling if needed using the {@link #autoScroll} config.
+ *An example showing a classic application border layout:
+ * @constructor + * Create a new Viewport + * @param {Object} config The config object + * @xtype viewport + */ +Ext.Viewport = Ext.extend(Ext.Container, { + /* + * Privatize config options which, if used, would interfere with the + * correct operation of the Viewport as the sole manager of the + * layout of the document body. + */ + /** + * @cfg {Mixed} applyTo @hide + */ + /** + * @cfg {Boolean} allowDomMove @hide + */ + /** + * @cfg {Boolean} hideParent @hide + */ + /** + * @cfg {Mixed} renderTo @hide + */ + /** + * @cfg {Boolean} hideParent @hide + */ + /** + * @cfg {Number} height @hide + */ + /** + * @cfg {Number} width @hide + */ + /** + * @cfg {Boolean} autoHeight @hide + */ + /** + * @cfg {Boolean} autoWidth @hide + */ + /** + * @cfg {Boolean} deferHeight @hide + */ + /** + * @cfg {Boolean} monitorResize @hide + */ + + initComponent : function() { + Ext.Viewport.superclass.initComponent.call(this); + document.getElementsByTagName('html')[0].className += ' x-viewport'; + this.el = Ext.getBody(); + this.el.setHeight = Ext.emptyFn; + this.el.setWidth = Ext.emptyFn; + this.el.setSize = Ext.emptyFn; + this.el.dom.scroll = 'no'; + this.allowDomMove = false; + this.autoWidth = true; + this.autoHeight = true; + Ext.EventManager.onWindowResize(this.fireResize, this); + this.renderTo = this.el; + }, + + fireResize : function(w, h){ + this.fireEvent('resize', this, w, h, w, h); + } +}); +Ext.reg('viewport', Ext.Viewport); +/** + * @class Ext.Panel + * @extends Ext.Container + *+new Ext.Viewport({ + layout: 'border', + items: [{ + region: 'north', + html: '<h1 class="x-panel-header">Page Title</h1>', + autoHeight: true, + border: false, + margins: '0 0 5 0' + }, { + region: 'west', + collapsible: true, + title: 'Navigation', + width: 200 + // the west region might typically utilize a {@link Ext.tree.TreePanel TreePanel} or a Panel with {@link Ext.layout.AccordionLayout Accordion layout} + }, { + region: 'south', + title: 'Title for Panel', + collapsible: true, + html: 'Information goes here', + split: true, + height: 100, + minHeight: 100 + }, { + region: 'east', + title: 'Title for the Grid Panel', + collapsible: true, + split: true, + width: 200, + xtype: 'grid', + // remaining grid configuration not shown ... + // notice that the GridPanel is added directly as the region + // it is not "overnested" inside another Panel + }, { + region: 'center', + xtype: 'tabpanel', // TabPanel itself has no title + items: { + title: 'Default Tab', + html: 'The first tab\'s content. Others may be added dynamically' + } + }] +}); +Panel is a container that has specific functionality and structural components that make + * it the perfect building block for application-oriented user interfaces.
+ *Panels are, by virtue of their inheritance from {@link Ext.Container}, capable + * of being configured with a {@link Ext.Container#layout layout}, and containing child Components.
+ *When either specifying child {@link Ext.Component#items items} of a Panel, or dynamically {@link Ext.Container#add adding} Components + * to a Panel, remember to consider how you wish the Panel to arrange those child elements, and whether + * those child elements need to be sized using one of Ext's built-in
+ *{@link Ext.Container#layout layout}schemes. By + * default, Panels use the {@link Ext.layout.ContainerLayout ContainerLayout} scheme. This simply renders + * child components, appending them one after the other inside the Container, and does not apply any sizing + * at all.A Panel may also contain {@link #bbar bottom} and {@link #tbar top} toolbars, along with separate + * {@link #header}, {@link #footer} and {@link #body} sections (see {@link #frame} for additional + * information).
+ *Panel also provides built-in {@link #collapsible expandable and collapsible behavior}, along with + * a variety of {@link #tools prebuilt tool buttons} that can be wired up to provide other customized + * behavior. Panels can be easily dropped into any {@link Ext.Container Container} or layout, and the + * layout and rendering pipeline is {@link Ext.Container#add completely managed by the framework}.
+ * @constructor + * @param {Object} config The config object + * @xtype panel + */ +Ext.Panel = Ext.extend(Ext.Container, { + /** + * The Panel's header {@link Ext.Element Element}. Read-only. + *This Element is used to house the {@link #title} and {@link #tools}
+ *Note: see the Note for
+ * @type Ext.Element + * @property header + */ + /** + * The Panel's body {@link Ext.Element Element} which may be used to contain HTML content. + * The content may be specified in the {@link #html} config, or it may be loaded using the + * {@link autoLoad} config, or through the Panel's {@link #getUpdater Updater}. Read-only. + *{@link Ext.Component#el el}also.If this is used to load visible HTML elements in either way, then + * the Panel may not be used as a Layout for hosting nested Panels.
+ *If this Panel is intended to be used as the host of a Layout (See {@link #layout} + * then the body Element must not be loaded or changed - it is under the control + * of the Panel's Layout. + *
Note: see the Note for
+ * @type Ext.Element + * @property body + */ + /** + * The Panel's bwrap {@link Ext.Element Element} used to contain other Panel elements + * (tbar, body, bbar, footer). See {@link #bodyCfg}. Read-only. + * @type Ext.Element + * @property bwrap + */ + /** + * True if this panel is collapsed. Read-only. + * @type Boolean + * @property collapsed + */ + /** + * @cfg {Object} bodyCfg + *{@link Ext.Component#el el}also.A {@link Ext.DomHelper DomHelper} element specification object may be specified for any + * Panel Element.
+ *By default, the Default element in the table below will be used for the html markup to + * create a child element with the commensurate Default class name (
+ *baseClswill be + * replaced by{@link #baseCls}):+ * Panel Default Default Custom Additional Additional + * Element element class element class style + * ======== ========================== ========= ============== =========== + * {@link #header} div {@link #baseCls}+'-header' {@link #headerCfg} headerCssClass headerStyle * {@link #bwrap} div {@link #baseCls}+'-bwrap' {@link #bwrapCfg} bwrapCssClass bwrapStyle * + tbar div {@link #baseCls}+'-tbar' {@link #tbarCfg} tbarCssClass tbarStyle * + {@link #body} div {@link #baseCls}+'-body' {@link #bodyCfg} {@link #bodyCssClass} {@link #bodyStyle} @@ -7710,3853 +9153,4457 @@ Ext.Panel = Ext.extend(Ext.Container, { * element: *
+ *new Ext.Panel({ - title: 'Message Title', + title: 'Message Title', + renderTo: Ext.getBody(), + width: 200, height: 130, + bodyCfg: { + tag: 'center', + cls: 'x-panel-body', // Default class not applied if Custom element specified + html: 'Message' + }, + footerCfg: { + tag: 'h2', + cls: 'x-panel-footer', // same as the Default class + html: 'footer html' + }, + footerCssClass: 'custom-footer', // additional css class, see {@link Ext.element#addClass addClass} + footerStyle: 'background-color:red' // see {@link #bodyStyle} +}); + *The example above also explicitly creates a
+ */ + /** + * @cfg {Object} headerCfg + *{@link #footer}with custom markup and + * styling applied.A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure + * of this Panel's {@link #header} Element. See
+ */ + /** + * @cfg {Object} bwrapCfg + *{@link #bodyCfg}also.A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure + * of this Panel's {@link #bwrap} Element. See
+ */ + /** + * @cfg {Object} tbarCfg + *{@link #bodyCfg}also.A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure + * of this Panel's {@link #tbar} Element. See
+ */ + /** + * @cfg {Object} bbarCfg + *{@link #bodyCfg}also.A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure + * of this Panel's {@link #bbar} Element. See
+ */ + /** + * @cfg {Object} footerCfg + *{@link #bodyCfg}also.A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure + * of this Panel's {@link #footer} Element. See
+ */ + /** + * @cfg {Boolean} closable + * Panels themselves do not directly support being closed, but some Panel subclasses do (like + * {@link Ext.Window}) or a Panel Class within an {@link Ext.TabPanel}. Specify{@link #bodyCfg}also.true+ * to enable closing in such situations. Defaults tofalse. + */ + /** + * The Panel's footer {@link Ext.Element Element}. Read-only. + *This Element is used to house the Panel's
+ *{@link #buttons}or{@link #fbar}.Note: see the Note for
+ * @type Ext.Element + * @property footer + */ + /** + * @cfg {Mixed} applyTo + *{@link Ext.Component#el el}also.The id of the node, a DOM node or an existing Element corresponding to a DIV that is already present in + * the document that specifies some panel-specific structural markup. When
+ *applyTois used, + * constituent parts of the panel can be specified by CSS class name within the main element, and the panel + * will automatically create those components from that markup. Any required components not specified in the + * markup will be autogenerated if necessary.The following class names are supported (baseCls will be replaced by {@link #baseCls}):
+ *- baseCls + '-header' + *
- baseCls + '-header-text' + *
- baseCls + '-bwrap' + *
- baseCls + '-tbar' + *
- baseCls + '-body' + *
- baseCls + '-bbar' + *
- baseCls + '-footer'
Using this config, a call to render() is not required. If applyTo is specified, any value passed for + * {@link #renderTo} will be ignored and the target element's parent node will automatically be used as the + * panel's container.
+ */ + /** + * @cfg {Object/Array} tbar + *The top toolbar of the panel. This can be a {@link Ext.Toolbar} object, a toolbar config, or an array of + * buttons/button configs to be added to the toolbar. Note that this is not available as a property after render. + * To access the top toolbar after render, use {@link #getTopToolbar}.
+ *Note: Although a Toolbar may contain Field components, these will not be updated by a load + * of an ancestor FormPanel. A Panel's toolbars are not part of the standard Container->Component hierarchy, and + * so are not scanned to collect form items. However, the values will be submitted because form + * submission parameters are collected from the DOM tree.
+ */ + /** + * @cfg {Object/Array} bbar + *The bottom toolbar of the panel. This can be a {@link Ext.Toolbar} object, a toolbar config, or an array of + * buttons/button configs to be added to the toolbar. Note that this is not available as a property after render. + * To access the bottom toolbar after render, use {@link #getBottomToolbar}.
+ *Note: Although a Toolbar may contain Field components, these will not be updated by a load + * of an ancestor FormPanel. A Panel's toolbars are not part of the standard Container->Component hierarchy, and + * so are not scanned to collect form items. However, the values will be submitted because form + * submission parameters are collected from the DOM tree.
+ */ + /** @cfg {Object/Array} fbar + *A {@link Ext.Toolbar Toolbar} object, a Toolbar config, or an array of + * {@link Ext.Button Button}s/{@link Ext.Button Button} configs, describing a {@link Ext.Toolbar Toolbar} to be rendered into this Panel's footer element.
+ *After render, the
+ *fbarproperty will be an {@link Ext.Toolbar Toolbar} instance.If
+ * The Panel's{@link #buttons}are specified, they will supersede thefbarconfiguration property.{@link #buttonAlign}configuration affects the layout of these items, for example: + *
+ *+var w = new Ext.Window({ + height: 250, + width: 500, + bbar: new Ext.Toolbar({ + items: [{ + text: 'bbar Left' + },'->',{ + text: 'bbar Right' + }] + }), + {@link #buttonAlign}: 'left', // anything but 'center' or 'right' and you can use '-', and '->' + // to control the alignment of fbar items + fbar: [{ + text: 'fbar Left' + },'->',{ + text: 'fbar Right' + }] +}).show(); + *Note: Although a Toolbar may contain Field components, these will not be updated by a load + * of an ancestor FormPanel. A Panel's toolbars are not part of the standard Container->Component hierarchy, and + * so are not scanned to collect form items. However, the values will be submitted because form + * submission parameters are collected from the DOM tree.
+ */ + /** + * @cfg {Boolean} header + *trueto create the Panel's header element explicitly,falseto skip creating + * it. If a{@link #title}is set the header will be created automatically, otherwise it will not. + * If a{@link #title}is set butheaderis explicitly set tofalse, the header + * will not be rendered. + */ + /** + * @cfg {Boolean} footer + *trueto create the footer element explicitly, false to skip creating it. The footer + * will be created automatically if{@link #buttons}or a{@link #fbar}have + * been configured. See{@link #bodyCfg}for an example. + */ + /** + * @cfg {String} title + * The title text to be used as innerHTML (html tags are accepted) to display in the panel + *{@link #header}(defaults to ''). When atitleis specified the + *{@link #header}element will automatically be created and displayed unless + * {@link #header} is explicitly set tofalse. If you do not want to specify a + *titleat config time, but you may want one later, you must either specify a non-empty + *title(a blank space ' ' will do) orheader:trueso that the container + * element will get created. + */ + /** + * @cfg {Array} buttons + *buttonswill be used as{@link Ext.Container#items items}for the toolbar in + * the footer ({@link #fbar}). Typically the value of this configuration property will be + * an array of {@link Ext.Button}s or {@link Ext.Button} configuration objects. + * If an item is configured withminWidthor the Panel is configured withminButtonWidth, + * that width will be applied to the item. + */ + /** + * @cfg {Object/String/Function} autoLoad + * A valid url spec according to the Updater {@link Ext.Updater#update} method. + * If autoLoad is not null, the panel will attempt to load its contents + * immediately upon render.+ * The URL will become the default URL for this panel's {@link #body} element, + * so it may be {@link Ext.Element#refresh refresh}ed at any time.
+ */ + /** + * @cfg {Boolean} frame + *falseby default to render with plain 1px square borders.trueto render with + * 9 elements, complete with custom rounded corners (also see {@link Ext.Element#boxWrap}). + *The template generated for each condition is depicted below:
+ */ + /** + * @cfg {Boolean} border + * True to display the borders of the panel's body element, false to hide them (defaults to true). By default, + * the border is a 2px wide inset border, but this can be further altered by setting {@link #bodyBorder} to false. + */ + /** + * @cfg {Boolean} bodyBorder + * True to display an interior border on the body element of the panel, false to hide it (defaults to true). + * This only applies when {@link #border} == true. If border == true and bodyBorder == false, the border will display + * as a 1px wide inset border, giving the entire body element an inset appearance. + */ + /** + * @cfg {String/Object/Function} bodyCssClass + * Additional css class selector to be applied to the {@link #body} element in the format expected by + * {@link Ext.Element#addClass} (defaults to null). See {@link #bodyCfg}. + */ + /** + * @cfg {String/Object/Function} bodyStyle + * Custom CSS styles to be applied to the {@link #body} element in the format expected by + * {@link Ext.Element#applyStyles} (defaults to null). See {@link #bodyCfg}. + */ + /** + * @cfg {String} iconCls + * The CSS class selector that specifies a background image to be used as the header icon (defaults to ''). + *+ * +// frame = false +<div id="developer-specified-id-goes-here" class="x-panel"> + + <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:false)</span></div> + + <div class="x-panel-bwrap"> + <div class="x-panel-body"><p>html value goes here</p></div> + </div> +</div> + +// frame = true (create 9 elements) +<div id="developer-specified-id-goes-here" class="x-panel"> + <div class="x-panel-tl"><div class="x-panel-tr"><div class="x-panel-tc"> + <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:true)</span></div> + </div></div></div> + + <div class="x-panel-bwrap"> + <div class="x-panel-ml"><div class="x-panel-mr"><div class="x-panel-mc"> + <div class="x-panel-body"><p>html value goes here</p></div> + </div></div></div> + + <div class="x-panel-bl"><div class="x-panel-br"><div class="x-panel-bc"/> + </div></div></div> +</div> + *An example of specifying a custom icon class would be something like: + *
+ */ + /** + * @cfg {Boolean} collapsible + * True to make the panel collapsible and have the expand/collapse toggle button automatically rendered into + * the header tool button area, false to keep the panel statically sized with no button (defaults to false). + */ + /** + * @cfg {Array} tools + * An array of tool button configs to be added to the header tool area. When rendered, each tool is + * stored as an {@link Ext.Element Element} referenced by a public property called+// specify the property in the config for the class: + ... + iconCls: 'my-icon' + +// css class that specifies background image to be used as the icon image: +.my-icon { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; } +tools.<tool-type>+ *Each tool config may contain the following properties: + *
+ *-
+ *
- id : StringRequired. The type + * of tool to create. By default, this assigns a CSS class of the form
x-tool-<tool-type>to the + * resulting tool Element. Ext provides CSS rules, and an icon sprite containing images for the tool types listed below. + * The developer may implement custom tools by supplying alternate CSS rules and background images: + *-
+ *
+ *toggle(Created by default when {@link #collapsible} istrue)+ *close+ *minimize+ *maximize+ *restore+ *gear+ *pin+ *unpin+ *right+ *left+ *up+ *down+ *refresh+ *minus+ *plus+ *help+ *search+ *save+ *print
+ * - handler : FunctionRequired. The function to + * call when clicked. Arguments passed are:
-
+ *
- event : Ext.EventObjectThe click event.
+ *
- toolEl : Ext.ElementThe tool Element.
+ *
- panel : Ext.PanelThe host Panel
+ *
- tc : ObjectThe tool configuration object
+ *
+ * - event : Ext.EventObject
- stopEvent : BooleanDefaults to true. Specify as false to allow click event to propagate.
+ *
- scope : ObjectThe scope in which to call the handler.
+ *
- qtip : String/ObjectA tip string, or + * a config argument to {@link Ext.QuickTip#register}
+ *
- hidden : BooleanTrue to initially render hidden.
+ *
- on : ObjectA listener config object specifiying + * event listeners in the format of an argument to {@link #addListener}
+ *
Note that, apart from the toggle tool which is provided when a panel is collapsible, these + * tools only provide the visual button. Any required functionality must be provided by adding + * handlers that implement the necessary behavior.
+ *Example usage:
+ *
+ *+tools:[{ + id:'refresh', + qtip: 'Refresh form Data', + // hidden:true, + handler: function(event, toolEl, panel){ + // refresh logic + } +}, +{ + id:'help', + qtip: 'Get Help', + handler: function(event, toolEl, panel){ + // whatever + } +}] +For the custom id of
+ *'help'define two relevant css classes with a link to + * a 15x15 image:
+ */ + /** + * @cfg {Ext.Template/Ext.XTemplate} toolTemplate + *+.x-tool-help {background-image: url(images/help.png);} +.x-tool-help-over {background-image: url(images/help_over.png);} +// if using an image sprite: +.x-tool-help {background-image: url(images/help.png) no-repeat 0 0;} +.x-tool-help-over {background-position:-15px 0;} +A Template used to create {@link #tools} in the {@link #header} Element. Defaults to:
+ *+new Ext.Template('<div class="x-tool x-tool-{id}"> </div>')This may may be overridden to provide a custom DOM structure for tools based upon a more + * complex XTemplate. The template's data is a single tool configuration object (Not the entire Array) + * as specified in {@link #tools}. In the following example an <a> tag is used to provide a + * visual indication when hovering over the tool:
+ *+var win = new Ext.Window({ + tools: [{ + id: 'download', + href: '/MyPdfDoc.pdf' + }], + toolTemplate: new Ext.XTemplate( + '<tpl if="id==\'download\'">', + '<a class="x-tool x-tool-pdf" href="{href}"></a>', + '</tpl>', + '<tpl if="id!=\'download\'">', + '<div class="x-tool x-tool-{id}"> </div>', + '</tpl>' + ), + width:500, + height:300, + closeAction:'hide' +});Note that the CSS class 'x-tool-pdf' should have an associated style rule which provides an + * appropriate background image, something like:
+
+ */ + /** + * @cfg {Boolean} hideCollapseTool + *+ a.x-tool-pdf {background-image: url(../shared/extjs/images/pdf.gif)!important;} +trueto hide the expand/collapse toggle button when{@link #collapsible} == true, + *falseto display it (defaults tofalse). + */ + /** + * @cfg {Boolean} titleCollapse + *trueto allow expanding and collapsing the panel (when{@link #collapsible} = true) + * by clicking anywhere in the header bar,false) to allow it only by clicking to tool button + * (defaults tofalse)). If this panel is a child item of a border layout also see the + * {@link Ext.layout.BorderLayout.Region BorderLayout.Region} + *{@link Ext.layout.BorderLayout.Region#floatable floatable}config option. + */ + + /** + * @cfg {Mixed} floating + *This property is used to configure the underlying {@link Ext.Layer}. Acceptable values for this + * configuration property are:
+ */ + /** + * @cfg {Boolean/String} shadow + *-
+ *
false: Default.Display the panel inline where it is + * rendered.
+ * true:Float the panel (absolute position it with automatic + * shimming and shadow).-
+ *
Setting floating to true will create an Ext.Layer for this panel and display the + * panel at negative offsets so that it is hidden.+ *Since the panel will be absolute positioned, the position must be set explicitly + * after render (e.g.,+ *myPanel.setPosition(100,100);).Note: when floating a panel you should always assign a fixed width, + * otherwise it will be auto width and will expand to fill to the right edge of the viewport.+ *
+ * {@link Ext.Layer object}:The specified object will be used + * as the configuration object for the {@link Ext.Layer} that will be created.
+ *
true(or a valid Ext.Shadow {@link Ext.Shadow#mode} value) to display a shadow behind the + * panel,falseto display no shadow (defaults to'sides'). Note that this option + * only applies when{@link #floating} = true. + */ + /** + * @cfg {Number} shadowOffset + * The number of pixels to offset the shadow if displayed (defaults to4). Note that this + * option only applies when{@link #floating} = true. + */ + /** + * @cfg {Boolean} shim + *falseto disable the iframe shim in browsers which need one (defaults totrue). + * Note that this option only applies when{@link #floating} = true. + */ + /** + * @cfg {Object/Array} keys + * A {@link Ext.KeyMap} config object (in the format expected by {@link Ext.KeyMap#addBinding} + * used to assign custom key handling to this panel (defaults tonull). + */ + /** + * @cfg {Boolean/Object} draggable + *
+ *trueto enable dragging of this Panel (defaults tofalse).For custom drag/drop implementations, an Ext.Panel.DD config could also be passed + * in this config instead of
true. Ext.Panel.DD is an internal, undocumented class which + * moves a proxy Element around in place of the Panel's element, but provides no other behaviour + * during dragging or on drop. It is a subclass of {@link Ext.dd.DragSource}, so behaviour may be + * added by implementing the interface methods of {@link Ext.dd.DragDrop} e.g.: + *
+ */ + /** + * @cfg {Boolean} disabled + * Render this panel disabled (default is+new Ext.Panel({ + title: 'Drag me', + x: 100, + y: 100, renderTo: Ext.getBody(), - width: 200, height: 130, - bodyCfg: { - tag: 'center', - cls: 'x-panel-body', // Default class not applied if Custom element specified - html: 'Message' + floating: true, + frame: true, + width: 400, + height: 200, + draggable: { +// Config option of Ext.Panel.DD class. +// It's a floating Panel, so do not show a placeholder proxy in the original position. + insertProxy: false, + +// Called for each mousemove event while dragging the DD object. + onDrag : function(e){ +// Record the x,y position of the drag proxy so that we can +// position the Panel at end of drag. + var pel = this.proxy.getEl(); + this.x = pel.getLeft(true); + this.y = pel.getTop(true); + +// Keep the Shadow aligned if there is one. + var s = this.panel.getEl().shadow; + if (s) { + s.realign(this.x, this.y, pel.getWidth(), pel.getHeight()); + } + }, + +// Called on the mouseup event. + endDrag : function(e){ + this.panel.setPosition(this.x, this.y); + } + } +}).show(); +false). An important note when using the disabled + * config on panels is that IE will often fail to initialize the disabled mask element correectly if + * the panel's layout has not yet completed by the time the Panel is disabled during the render process. + * If you experience this issue, you may need to instead use the {@link #afterlayout} event to initialize + * the disabled state: + *
+ */ + /** + * @cfg {Boolean} autoHeight + *+new Ext.Panel({ + ... + listeners: { + 'afterlayout': { + fn: function(p){ + p.disable(); + }, + single: true // important, as many layouts can occur + } + } +}); +trueto use height:'auto',falseto use fixed height (defaults tofalse). + * Note: SettingautoHeight: truemeans that the browser will manage the panel's height + * based on its contents, and that Ext will not manage it at all. If the panel is within a layout that + * manages dimensions (fit,border, etc.) then settingautoHeight: true+ * can cause issues with scrolling and will not generally work as expected since the panel will take + * on the height of its contents rather than the height required by the Ext layout. + */ + + + /** + * @cfg {String} baseCls + * The base CSS class to apply to this panel's element (defaults to'x-panel'). + *Another option available by default is to specify
+ */ + baseCls : 'x-panel', + /** + * @cfg {String} collapsedCls + * A CSS class to add to the panel's element after it has been collapsed (defaults to + *'x-plain'which strips all styling + * except for required attributes for Ext layouts to function (e.g. overflow:hidden). + * See{@link #unstyled}also.'x-panel-collapsed'). + */ + collapsedCls : 'x-panel-collapsed', + /** + * @cfg {Boolean} maskDisabled + *trueto mask the panel when it is {@link #disabled},falseto not mask it (defaults + * totrue). Either way, the panel will always tell its contained elements to disable themselves + * when it is disabled, but masking the panel can provide an additional visual cue that the panel is + * disabled. + */ + maskDisabled : true, + /** + * @cfg {Boolean} animCollapse + *trueto animate the transition when the panel is collapsed,falseto skip the + * animation (defaults totrueif the {@link Ext.Fx} class is available, otherwisefalse). + */ + animCollapse : Ext.enableFx, + /** + * @cfg {Boolean} headerAsText + *trueto display the panel{@link #title}in the{@link #header}, + *falseto hide it (defaults totrue). + */ + headerAsText : true, + /** + * @cfg {String} buttonAlign + * The alignment of any {@link #buttons} added to this panel. Valid values are'right', + *'left'and'center'(defaults to'right'). + */ + buttonAlign : 'right', + /** + * @cfg {Boolean} collapsed + *trueto render the panel collapsed,falseto render it expanded (defaults to + *false). + */ + collapsed : false, + /** + * @cfg {Boolean} collapseFirst + *trueto make sure the collapse/expand toggle button always renders first (to the left of) + * any other tools in the panel's title bar,falseto render it last (defaults totrue). + */ + collapseFirst : true, + /** + * @cfg {Number} minButtonWidth + * Minimum width in pixels of all {@link #buttons} in this panel (defaults to75) + */ + minButtonWidth : 75, + /** + * @cfg {Boolean} unstyled + * Overrides the{@link #baseCls}setting to{@link #baseCls} = 'x-plain'which renders + * the panel unstyled except for required attributes for Ext layouts to function (e.g. overflow:hidden). + */ + /** + * @cfg {String} elements + * A comma-delimited list of panel elements to initialize when the panel is rendered. Normally, this list will be + * generated automatically based on the items added to the panel at config time, but sometimes it might be useful to + * make sure a structural element is rendered even if not specified at config time (for example, you may want + * to add a button or toolbar dynamically after the panel has been rendered). Adding those elements to this + * list will allocate the required placeholders in the panel when it is rendered. Valid values are+ * Defaults to '-
+ *
header
+ * tbar(top bar)
+ * body
+ * bbar(bottom bar)
+ * footer
+ *
body'. + */ + elements : 'body', + /** + * @cfg {Boolean} preventBodyReset + * Defaults tofalse. When set totrue, an extra css class'x-panel-normal'+ * will be added to the panel's element, effectively applying css styles suggested by the W3C + * (see http://www.w3.org/TR/CSS21/sample.html) to the Panel's body element (not the header, + * footer, etc.). + */ + preventBodyReset : false, + + /** + * @cfg {Number/String} padding + * A shortcut for setting a padding style on the body element. The value can either be + * a number to be applied to all sides, or a normal css string describing padding. + * Defaults to undefined. + * + */ + padding: undefined, + + /** @cfg {String} resizeEvent + * The event to listen to for resizing in layouts. Defaults to 'bodyresize'. + */ + resizeEvent: 'bodyresize', + + // protected - these could be used to customize the behavior of the window, + // but changing them would not be useful without further mofifications and + // could lead to unexpected or undesirable results. + toolTarget : 'header', + collapseEl : 'bwrap', + slideAnchor : 't', + disabledClass : '', + + // private, notify box this class will handle heights + deferHeight : true, + // private + expandDefaults: { + duration : 0.25 + }, + // private + collapseDefaults : { + duration : 0.25 + }, + + // private + initComponent : function(){ + Ext.Panel.superclass.initComponent.call(this); + + this.addEvents( + /** + * @event bodyresize + * Fires after the Panel has been resized. + * @param {Ext.Panel} p the Panel which has been resized. + * @param {Number} width The Panel body's new width. + * @param {Number} height The Panel body's new height. + */ + 'bodyresize', + /** + * @event titlechange + * Fires after the Panel title has been {@link #title set} or {@link #setTitle changed}. + * @param {Ext.Panel} p the Panel which has had its title changed. + * @param {String} The new title. + */ + 'titlechange', + /** + * @event iconchange + * Fires after the Panel icon class has been {@link #iconCls set} or {@link #setIconClass changed}. + * @param {Ext.Panel} p the Panel which has had its {@link #iconCls icon class} changed. + * @param {String} The new icon class. + * @param {String} The old icon class. + */ + 'iconchange', + /** + * @event collapse + * Fires after the Panel has been collapsed. + * @param {Ext.Panel} p the Panel that has been collapsed. + */ + 'collapse', + /** + * @event expand + * Fires after the Panel has been expanded. + * @param {Ext.Panel} p The Panel that has been expanded. + */ + 'expand', + /** + * @event beforecollapse + * Fires before the Panel is collapsed. A handler can return false to cancel the collapse. + * @param {Ext.Panel} p the Panel being collapsed. + * @param {Boolean} animate True if the collapse is animated, else false. + */ + 'beforecollapse', + /** + * @event beforeexpand + * Fires before the Panel is expanded. A handler can return false to cancel the expand. + * @param {Ext.Panel} p The Panel being expanded. + * @param {Boolean} animate True if the expand is animated, else false. + */ + 'beforeexpand', + /** + * @event beforeclose + * Fires before the Panel is closed. Note that Panels do not directly support being closed, but some + * Panel subclasses do (like {@link Ext.Window}) or a Panel within a Ext.TabPanel. This event only + * applies to such subclasses. + * A handler can return false to cancel the close. + * @param {Ext.Panel} p The Panel being closed. + */ + 'beforeclose', + /** + * @event close + * Fires after the Panel is closed. Note that Panels do not directly support being closed, but some + * Panel subclasses do (like {@link Ext.Window}) or a Panel within a Ext.TabPanel. + * @param {Ext.Panel} p The Panel that has been closed. + */ + 'close', + /** + * @event activate + * Fires after the Panel has been visually activated. + * Note that Panels do not directly support being activated, but some Panel subclasses + * do (like {@link Ext.Window}). Panels which are child Components of a TabPanel fire the + * activate and deactivate events under the control of the TabPanel. + * @param {Ext.Panel} p The Panel that has been activated. + */ + 'activate', + /** + * @event deactivate + * Fires after the Panel has been visually deactivated. + * Note that Panels do not directly support being deactivated, but some Panel subclasses + * do (like {@link Ext.Window}). Panels which are child Components of a TabPanel fire the + * activate and deactivate events under the control of the TabPanel. + * @param {Ext.Panel} p The Panel that has been deactivated. + */ + 'deactivate' + ); + + if(this.unstyled){ + this.baseCls = 'x-plain'; + } + + + this.toolbars = []; + // shortcuts + if(this.tbar){ + this.elements += ',tbar'; + this.topToolbar = this.createToolbar(this.tbar); + this.tbar = null; + + } + if(this.bbar){ + this.elements += ',bbar'; + this.bottomToolbar = this.createToolbar(this.bbar); + this.bbar = null; + } + + if(this.header === true){ + this.elements += ',header'; + this.header = null; + }else if(this.headerCfg || (this.title && this.header !== false)){ + this.elements += ',header'; + } + + if(this.footerCfg || this.footer === true){ + this.elements += ',footer'; + this.footer = null; + } + + if(this.buttons){ + this.fbar = this.buttons; + this.buttons = null; + } + if(this.fbar){ + this.createFbar(this.fbar); + } + if(this.autoLoad){ + this.on('render', this.doAutoLoad, this, {delay:10}); + } + }, + + // private + createFbar : function(fbar){ + var min = this.minButtonWidth; + this.elements += ',footer'; + this.fbar = this.createToolbar(fbar, { + buttonAlign: this.buttonAlign, + toolbarCls: 'x-panel-fbar', + enableOverflow: false, + defaults: function(c){ + return { + minWidth: c.minWidth || min + }; + } + }); + // @compat addButton and buttons could possibly be removed + // @target 4.0 + /** + * This Panel's Array of buttons as created from the{@link #buttons}+ * config property. Read only. + * @type Array + * @property buttons + */ + this.fbar.items.each(function(c){ + c.minWidth = c.minWidth || this.minButtonWidth; + }, this); + this.buttons = this.fbar.items.items; + }, + + // private + createToolbar: function(tb, options){ + var result; + // Convert array to proper toolbar config + if(Ext.isArray(tb)){ + tb = { + items: tb + }; + } + result = tb.events ? Ext.apply(tb, options) : this.createComponent(Ext.apply({}, tb, options), 'toolbar'); + this.toolbars.push(result); + return result; + }, + + // private + createElement : function(name, pnode){ + if(this[name]){ + pnode.appendChild(this[name].dom); + return; + } + + if(name === 'bwrap' || this.elements.indexOf(name) != -1){ + if(this[name+'Cfg']){ + this[name] = Ext.fly(pnode).createChild(this[name+'Cfg']); + }else{ + var el = document.createElement('div'); + el.className = this[name+'Cls']; + this[name] = Ext.get(pnode.appendChild(el)); + } + if(this[name+'CssClass']){ + this[name].addClass(this[name+'CssClass']); + } + if(this[name+'Style']){ + this[name].applyStyles(this[name+'Style']); + } + } + }, + + // private + onRender : function(ct, position){ + Ext.Panel.superclass.onRender.call(this, ct, position); + this.createClasses(); + + var el = this.el, + d = el.dom, + bw, + ts; + + + if(this.collapsible && !this.hideCollapseTool){ + this.tools = this.tools ? this.tools.slice(0) : []; + this.tools[this.collapseFirst?'unshift':'push']({ + id: 'toggle', + handler : this.toggleCollapse, + scope: this + }); + } + + if(this.tools){ + ts = this.tools; + this.elements += (this.header !== false) ? ',header' : ''; + } + this.tools = {}; + + el.addClass(this.baseCls); + if(d.firstChild){ // existing markup + this.header = el.down('.'+this.headerCls); + this.bwrap = el.down('.'+this.bwrapCls); + var cp = this.bwrap ? this.bwrap : el; + this.tbar = cp.down('.'+this.tbarCls); + this.body = cp.down('.'+this.bodyCls); + this.bbar = cp.down('.'+this.bbarCls); + this.footer = cp.down('.'+this.footerCls); + this.fromMarkup = true; + } + if (this.preventBodyReset === true) { + el.addClass('x-panel-reset'); + } + if(this.cls){ + el.addClass(this.cls); + } + + if(this.buttons){ + this.elements += ',footer'; + } + + // This block allows for maximum flexibility and performance when using existing markup + + // framing requires special markup + if(this.frame){ + el.insertHtml('afterBegin', String.format(Ext.Element.boxMarkup, this.baseCls)); + + this.createElement('header', d.firstChild.firstChild.firstChild); + this.createElement('bwrap', d); + + // append the mid and bottom frame to the bwrap + bw = this.bwrap.dom; + var ml = d.childNodes[1], bl = d.childNodes[2]; + bw.appendChild(ml); + bw.appendChild(bl); + + var mc = bw.firstChild.firstChild.firstChild; + this.createElement('tbar', mc); + this.createElement('body', mc); + this.createElement('bbar', mc); + this.createElement('footer', bw.lastChild.firstChild.firstChild); + + if(!this.footer){ + this.bwrap.dom.lastChild.className += ' x-panel-nofooter'; + } + /* + * Store a reference to this element so: + * a) We aren't looking it up all the time + * b) The last element is reported incorrectly when using a loadmask + */ + this.ft = Ext.get(this.bwrap.dom.lastChild); + this.mc = Ext.get(mc); + }else{ + this.createElement('header', d); + this.createElement('bwrap', d); + + // append the mid and bottom frame to the bwrap + bw = this.bwrap.dom; + this.createElement('tbar', bw); + this.createElement('body', bw); + this.createElement('bbar', bw); + this.createElement('footer', bw); + + if(!this.header){ + this.body.addClass(this.bodyCls + '-noheader'); + if(this.tbar){ + this.tbar.addClass(this.tbarCls + '-noheader'); + } + } + } + + if(Ext.isDefined(this.padding)){ + this.body.setStyle('padding', this.body.addUnits(this.padding)); + } + + if(this.border === false){ + this.el.addClass(this.baseCls + '-noborder'); + this.body.addClass(this.bodyCls + '-noborder'); + if(this.header){ + this.header.addClass(this.headerCls + '-noborder'); + } + if(this.footer){ + this.footer.addClass(this.footerCls + '-noborder'); + } + if(this.tbar){ + this.tbar.addClass(this.tbarCls + '-noborder'); + } + if(this.bbar){ + this.bbar.addClass(this.bbarCls + '-noborder'); + } + } + + if(this.bodyBorder === false){ + this.body.addClass(this.bodyCls + '-noborder'); + } + + this.bwrap.enableDisplayMode('block'); + + if(this.header){ + this.header.unselectable(); + + // for tools, we need to wrap any existing header markup + if(this.headerAsText){ + this.header.dom.innerHTML = + ''+this.header.dom.innerHTML+''; + + if(this.iconCls){ + this.setIconClass(this.iconCls); + } + } + } + + if(this.floating){ + this.makeFloating(this.floating); + } + + if(this.collapsible && this.titleCollapse && this.header){ + this.mon(this.header, 'click', this.toggleCollapse, this); + this.header.setStyle('cursor', 'pointer'); + } + if(ts){ + this.addTool.apply(this, ts); + } + + // Render Toolbars. + if(this.fbar){ + this.footer.addClass('x-panel-btns'); + this.fbar.ownerCt = this; + this.fbar.render(this.footer); + this.footer.createChild({cls:'x-clear'}); + } + if(this.tbar && this.topToolbar){ + this.topToolbar.ownerCt = this; + this.topToolbar.render(this.tbar); + } + if(this.bbar && this.bottomToolbar){ + this.bottomToolbar.ownerCt = this; + this.bottomToolbar.render(this.bbar); + } + }, + + /** + * Sets the CSS class that provides the icon image for this panel. This method will replace any existing + * icon class if one has already been set and fire the {@link #iconchange} event after completion. + * @param {String} cls The new CSS class name + */ + setIconClass : function(cls){ + var old = this.iconCls; + this.iconCls = cls; + if(this.rendered && this.header){ + if(this.frame){ + this.header.addClass('x-panel-icon'); + this.header.replaceClass(old, this.iconCls); + }else{ + var hd = this.header, + img = hd.child('img.x-panel-inline-icon'); + if(img){ + Ext.fly(img).replaceClass(old, this.iconCls); + }else{ + var hdspan = hd.child('span.' + this.headerTextCls); + if (hdspan) { + Ext.DomHelper.insertBefore(hdspan.dom, { + tag:'img', src: Ext.BLANK_IMAGE_URL, cls:'x-panel-inline-icon '+this.iconCls + }); + } + } + } + } + this.fireEvent('iconchange', this, cls, old); + }, + + // private + makeFloating : function(cfg){ + this.floating = true; + this.el = new Ext.Layer(Ext.apply({}, cfg, { + shadow: Ext.isDefined(this.shadow) ? this.shadow : 'sides', + shadowOffset: this.shadowOffset, + constrain:false, + shim: this.shim === false ? false : undefined + }), this.el); + }, + + /** + * Returns the {@link Ext.Toolbar toolbar} from the top ({@link #tbar}) section of the panel. + * @return {Ext.Toolbar} The toolbar + */ + getTopToolbar : function(){ + return this.topToolbar; + }, + + /** + * Returns the {@link Ext.Toolbar toolbar} from the bottom ({@link #bbar}) section of the panel. + * @return {Ext.Toolbar} The toolbar + */ + getBottomToolbar : function(){ + return this.bottomToolbar; + }, + + /** + * Returns the {@link Ext.Toolbar toolbar} from the footer ({@link #fbar}) section of the panel. + * @return {Ext.Toolbar} The toolbar + */ + getFooterToolbar : function() { + return this.fbar; + }, + + /** + * Adds a button to this panel. Note that this method must be called prior to rendering. The preferred + * approach is to add buttons via the {@link #buttons} config. + * @param {String/Object} config A valid {@link Ext.Button} config. A string will become the text for a default + * button config, an object will be treated as a button config object. + * @param {Function} handler The function to be called on button {@link Ext.Button#click} + * @param {Object} scope The scope (thisreference) in which the button handler function is executed. Defaults to the Button. + * @return {Ext.Button} The button that was added + */ + addButton : function(config, handler, scope){ + if(!this.fbar){ + this.createFbar([]); + } + if(handler){ + if(Ext.isString(config)){ + config = {text: config}; + } + config = Ext.apply({ + handler: handler, + scope: scope + }, config); + } + return this.fbar.add(config); + }, + + // private + addTool : function(){ + if(!this.rendered){ + if(!this.tools){ + this.tools = []; + } + Ext.each(arguments, function(arg){ + this.tools.push(arg); + }, this); + return; + } + // nowhere to render tools! + if(!this[this.toolTarget]){ + return; + } + if(!this.toolTemplate){ + // initialize the global tool template on first use + var tt = new Ext.Template( + '' + ); + tt.disableFormats = true; + tt.compile(); + Ext.Panel.prototype.toolTemplate = tt; + } + for(var i = 0, a = arguments, len = a.length; i < len; i++) { + var tc = a[i]; + if(!this.tools[tc.id]){ + var overCls = 'x-tool-'+tc.id+'-over'; + var t = this.toolTemplate.insertFirst(this[this.toolTarget], tc, true); + this.tools[tc.id] = t; + t.enableDisplayMode('block'); + this.mon(t, 'click', this.createToolHandler(t, tc, overCls, this)); + if(tc.on){ + this.mon(t, tc.on); + } + if(tc.hidden){ + t.hide(); + } + if(tc.qtip){ + if(Ext.isObject(tc.qtip)){ + Ext.QuickTips.register(Ext.apply({ + target: t.id + }, tc.qtip)); + } else { + t.dom.qtip = tc.qtip; + } + } + t.addClassOnOver(overCls); + } + } + }, + + onLayout : function(shallow, force){ + Ext.Panel.superclass.onLayout.apply(this, arguments); + if(this.hasLayout && this.toolbars.length > 0){ + Ext.each(this.toolbars, function(tb){ + tb.doLayout(undefined, force); + }); + this.syncHeight(); + } + }, + + syncHeight : function(){ + var h = this.toolbarHeight, + bd = this.body, + lsh = this.lastSize.height, + sz; + + if(this.autoHeight || !Ext.isDefined(lsh) || lsh == 'auto'){ + return; + } + + + if(h != this.getToolbarHeight()){ + h = Math.max(0, lsh - this.getFrameHeight()); + bd.setHeight(h); + sz = bd.getSize(); + this.toolbarHeight = this.getToolbarHeight(); + this.onBodyResize(sz.width, sz.height); + } + }, + + // private + onShow : function(){ + if(this.floating){ + return this.el.show(); + } + Ext.Panel.superclass.onShow.call(this); + }, + + // private + onHide : function(){ + if(this.floating){ + return this.el.hide(); + } + Ext.Panel.superclass.onHide.call(this); + }, + + // private + createToolHandler : function(t, tc, overCls, panel){ + return function(e){ + t.removeClass(overCls); + if(tc.stopEvent !== false){ + e.stopEvent(); + } + if(tc.handler){ + tc.handler.call(tc.scope || t, e, t, panel, tc); + } + }; + }, + + // private + afterRender : function(){ + if(this.floating && !this.hidden){ + this.el.show(); + } + if(this.title){ + this.setTitle(this.title); + } + Ext.Panel.superclass.afterRender.call(this); // do sizing calcs last + if (this.collapsed) { + this.collapsed = false; + this.collapse(false); + } + this.initEvents(); + }, + + // private + getKeyMap : function(){ + if(!this.keyMap){ + this.keyMap = new Ext.KeyMap(this.el, this.keys); + } + return this.keyMap; + }, + + // private + initEvents : function(){ + if(this.keys){ + this.getKeyMap(); + } + if(this.draggable){ + this.initDraggable(); + } + if(this.toolbars.length > 0){ + Ext.each(this.toolbars, function(tb){ + tb.doLayout(); + tb.on({ + scope: this, + afterlayout: this.syncHeight, + remove: this.syncHeight + }); + }, this); + this.syncHeight(); + } + + }, + + // private + initDraggable : function(){ + /** + *If this Panel is configured {@link #draggable}, this property will contain + * an instance of {@link Ext.dd.DragSource} which handles dragging the Panel.
+ * The developer must provide implementations of the abstract methods of {@link Ext.dd.DragSource} + * in order to supply behaviour for each stage of the drag/drop process. See {@link #draggable}. + * @type Ext.dd.DragSource. + * @property dd + */ + this.dd = new Ext.Panel.DD(this, Ext.isBoolean(this.draggable) ? null : this.draggable); + }, + + // private + beforeEffect : function(anim){ + if(this.floating){ + this.el.beforeAction(); + } + if(anim !== false){ + this.el.addClass('x-panel-animated'); + } }, - footerCfg: { - tag: 'h2', - cls: 'x-panel-footer' // same as the Default class - html: 'footer html' + + // private + afterEffect : function(anim){ + this.syncShadow(); + this.el.removeClass('x-panel-animated'); }, - footerCssClass: 'custom-footer', // additional css class, see {@link Ext.element#addClass addClass} - footerStyle: 'background-color:red' // see {@link #bodyStyle} -}); - * - *The example above also explicitly creates a
- */ - /** - * @cfg {Object} headerCfg - *{@link #footer}with custom markup and - * styling applied.A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure - * of this Panel's {@link #header} Element. See
- */ - /** - * @cfg {Object} bwrapCfg - *{@link #bodyCfg}also.A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure - * of this Panel's {@link #bwrap} Element. See
- */ - /** - * @cfg {Object} tbarCfg - *{@link #bodyCfg}also.A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure - * of this Panel's {@link #tbar} Element. See
- */ - /** - * @cfg {Object} bbarCfg - *{@link #bodyCfg}also.A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure - * of this Panel's {@link #bbar} Element. See
- */ - /** - * @cfg {Object} footerCfg - *{@link #bodyCfg}also.A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure - * of this Panel's {@link #footer} Element. See
- */ - /** - * @cfg {Boolean} closable - * Panels themselves do not directly support being closed, but some Panel subclasses do (like - * {@link Ext.Window}) or a Panel Class within an {@link Ext.TabPanel}. Specify{@link #bodyCfg}also.true- * to enable closing in such situations. Defaults tofalse. - */ - /** - * The Panel's footer {@link Ext.Element Element}. Read-only. - *This Element is used to house the Panel's
- *{@link #buttons}or{@link #fbar}.Note: see the Note for
- * @type Ext.Element - * @property footer - */ - /** - * @cfg {Mixed} applyTo - *{@link Ext.Component#el el}also.The id of the node, a DOM node or an existing Element corresponding to a DIV that is already present in - * the document that specifies some panel-specific structural markup. When
- *applyTois used, - * constituent parts of the panel can be specified by CSS class name within the main element, and the panel - * will automatically create those components from that markup. Any required components not specified in the - * markup will be autogenerated if necessary.The following class names are supported (baseCls will be replaced by {@link #baseCls}):
- *- baseCls + '-header' - *
- baseCls + '-header-text' - *
- baseCls + '-bwrap' - *
- baseCls + '-tbar' - *
- baseCls + '-body' - *
- baseCls + '-bbar' - *
- baseCls + '-footer'
Using this config, a call to render() is not required. If applyTo is specified, any value passed for - * {@link #renderTo} will be ignored and the target element's parent node will automatically be used as the - * panel's container.
- */ - /** - * @cfg {Object/Array} tbar - *The top toolbar of the panel. This can be a {@link Ext.Toolbar} object, a toolbar config, or an array of - * buttons/button configs to be added to the toolbar. Note that this is not available as a property after render. - * To access the top toolbar after render, use {@link #getTopToolbar}.
- *Note: Although a Toolbar may contain Field components, these will not be updated by a load - * of an ancestor FormPanel. A Panel's toolbars are not part of the standard Container->Component hierarchy, and - * so are not scanned to collect form items. However, the values will be submitted because form - * submission parameters are collected from the DOM tree.
- */ - /** - * @cfg {Object/Array} bbar - *The bottom toolbar of the panel. This can be a {@link Ext.Toolbar} object, a toolbar config, or an array of - * buttons/button configs to be added to the toolbar. Note that this is not available as a property after render. - * To access the bottom toolbar after render, use {@link #getBottomToolbar}.
- *Note: Although a Toolbar may contain Field components, these will not be updated by a load - * of an ancestor FormPanel. A Panel's toolbars are not part of the standard Container->Component hierarchy, and - * so are not scanned to collect form items. However, the values will be submitted because form - * submission parameters are collected from the DOM tree.
- */ - /** @cfg {Object/Array} fbar - *A {@link Ext.Toolbar Toolbar} object, a Toolbar config, or an array of - * {@link Ext.Button Button}s/{@link Ext.Button Button} configs, describing a {@link Ext.Toolbar Toolbar} to be rendered into this Panel's footer element.
- *After render, the
- *fbarproperty will be an {@link Ext.Toolbar Toolbar} instance.If
- * The Panel's{@link #buttons}are specified, they will supersede thefbarconfiguration property.{@link #buttonAlign}configuration affects the layout of these items, for example: - *
- *-var w = new Ext.Window({ - height: 250, - width: 500, - bbar: new Ext.Toolbar({ - items: [{ - text: 'bbar Left' - },'->',{ - text: 'bbar Right' - }] - }), - {@link #buttonAlign}: 'left', // anything but 'center' or 'right' and you can use '-', and '->' - // to control the alignment of fbar items - fbar: [{ - text: 'fbar Left' - },'->',{ - text: 'fbar Right' - }] -}).show(); - *Note: Although a Toolbar may contain Field components, these will not be updated by a load - * of an ancestor FormPanel. A Panel's toolbars are not part of the standard Container->Component hierarchy, and - * so are not scanned to collect form items. However, the values will be submitted because form - * submission parameters are collected from the DOM tree.
- */ - /** - * @cfg {Boolean} header - *trueto create the Panel's header element explicitly,falseto skip creating - * it. If a{@link #title}is set the header will be created automatically, otherwise it will not. - * If a{@link #title}is set butheaderis explicitly set tofalse, the header - * will not be rendered. - */ - /** - * @cfg {Boolean} footer - *trueto create the footer element explicitly, false to skip creating it. The footer - * will be created automatically if{@link #buttons}or a{@link #fbar}have - * been configured. See{@link #bodyCfg}for an example. - */ - /** - * @cfg {String} title - * The title text to be used as innerHTML (html tags are accepted) to display in the panel - *{@link #header}(defaults to ''). When atitleis specified the - *{@link #header}element will automatically be created and displayed unless - * {@link #header} is explicitly set tofalse. If you do not want to specify a - *titleat config time, but you may want one later, you must either specify a non-empty - *title(a blank space ' ' will do) orheader:trueso that the container - * element will get created. - */ + + // private - wraps up an animation param with internal callbacks + createEffect : function(a, cb, scope){ + var o = { + scope:scope, + block:true + }; + if(a === true){ + o.callback = cb; + return o; + }else if(!a.callback){ + o.callback = cb; + }else { // wrap it up + o.callback = function(){ + cb.call(scope); + Ext.callback(a.callback, a.scope); + }; + } + return Ext.applyIf(o, a); + }, + /** - * @cfg {Array} buttons - *buttonswill be used as{@link Ext.Container#items items}for the toolbar in - * the footer ({@link #fbar}). Typically the value of this configuration property will be - * an array of {@link Ext.Button}s or {@link Ext.Button} configuration objects. - * If an item is configured withminWidthor the Panel is configured withminButtonWidth, - * that width will be applied to the item. + * Collapses the panel body so that it becomes hidden. Fires the {@link #beforecollapse} event which will + * cancel the collapse action if it returns false. + * @param {Boolean} animate True to animate the transition, else false (defaults to the value of the + * {@link #animCollapse} panel config) + * @return {Ext.Panel} this */ + collapse : function(animate){ + if(this.collapsed || this.el.hasFxBlock() || this.fireEvent('beforecollapse', this, animate) === false){ + return; + } + var doAnim = animate === true || (animate !== false && this.animCollapse); + this.beforeEffect(doAnim); + this.onCollapse(doAnim, animate); + return this; + }, + + // private + onCollapse : function(doAnim, animArg){ + if(doAnim){ + this[this.collapseEl].slideOut(this.slideAnchor, + Ext.apply(this.createEffect(animArg||true, this.afterCollapse, this), + this.collapseDefaults)); + }else{ + this[this.collapseEl].hide(this.hideMode); + this.afterCollapse(false); + } + }, + + // private + afterCollapse : function(anim){ + this.collapsed = true; + this.el.addClass(this.collapsedCls); + if(anim !== false){ + this[this.collapseEl].hide(this.hideMode); + } + this.afterEffect(anim); + + // Reset lastSize of all sub-components so they KNOW they are in a collapsed container + this.cascade(function(c) { + if (c.lastSize) { + c.lastSize = { width: undefined, height: undefined }; + } + }); + this.fireEvent('collapse', this); + }, + /** - * @cfg {Object/String/Function} autoLoad - * A valid url spec according to the Updater {@link Ext.Updater#update} method. - * If autoLoad is not null, the panel will attempt to load its contents - * immediately upon render.- * The URL will become the default URL for this panel's {@link #body} element, - * so it may be {@link Ext.Element#refresh refresh}ed at any time.
+ * Expands the panel body so that it becomes visible. Fires the {@link #beforeexpand} event which will + * cancel the expand action if it returns false. + * @param {Boolean} animate True to animate the transition, else false (defaults to the value of the + * {@link #animCollapse} panel config) + * @return {Ext.Panel} this */ + expand : function(animate){ + if(!this.collapsed || this.el.hasFxBlock() || this.fireEvent('beforeexpand', this, animate) === false){ + return; + } + var doAnim = animate === true || (animate !== false && this.animCollapse); + this.el.removeClass(this.collapsedCls); + this.beforeEffect(doAnim); + this.onExpand(doAnim, animate); + return this; + }, + + // private + onExpand : function(doAnim, animArg){ + if(doAnim){ + this[this.collapseEl].slideIn(this.slideAnchor, + Ext.apply(this.createEffect(animArg||true, this.afterExpand, this), + this.expandDefaults)); + }else{ + this[this.collapseEl].show(this.hideMode); + this.afterExpand(false); + } + }, + + // private + afterExpand : function(anim){ + this.collapsed = false; + if(anim !== false){ + this[this.collapseEl].show(this.hideMode); + } + this.afterEffect(anim); + if (this.deferLayout) { + delete this.deferLayout; + this.doLayout(true); + } + this.fireEvent('expand', this); + }, + /** - * @cfg {Boolean} frame - *falseby default to render with plain 1px square borders.trueto render with - * 9 elements, complete with custom rounded corners (also see {@link Ext.Element#boxWrap}). - *The template generated for each condition is depicted below:
- */ - /** - * @cfg {Boolean} border - * True to display the borders of the panel's body element, false to hide them (defaults to true). By default, - * the border is a 2px wide inset border, but this can be further altered by setting {@link #bodyBorder} to false. - */ - /** - * @cfg {Boolean} bodyBorder - * True to display an interior border on the body element of the panel, false to hide it (defaults to true). - * This only applies when {@link #border} == true. If border == true and bodyBorder == false, the border will display - * as a 1px wide inset border, giving the entire body element an inset appearance. - */ - /** - * @cfg {String/Object/Function} bodyCssClass - * Additional css class selector to be applied to the {@link #body} element in the format expected by - * {@link Ext.Element#addClass} (defaults to null). See {@link #bodyCfg}. - */ - /** - * @cfg {String/Object/Function} bodyStyle - * Custom CSS styles to be applied to the {@link #body} element in the format expected by - * {@link Ext.Element#applyStyles} (defaults to null). See {@link #bodyCfg}. - */ - /** - * @cfg {String} iconCls - * The CSS class selector that specifies a background image to be used as the header icon (defaults to ''). - *- * -// frame = false -<div id="developer-specified-id-goes-here" class="x-panel"> + * Shortcut for performing an {@link #expand} or {@link #collapse} based on the current state of the panel. + * @param {Boolean} animate True to animate the transition, else false (defaults to the value of the + * {@link #animCollapse} panel config) + * @return {Ext.Panel} this + */ + toggleCollapse : function(animate){ + this[this.collapsed ? 'expand' : 'collapse'](animate); + return this; + }, - <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:false)</span></div> + // private + onDisable : function(){ + if(this.rendered && this.maskDisabled){ + this.el.mask(); + } + Ext.Panel.superclass.onDisable.call(this); + }, - <div class="x-panel-bwrap"> - <div class="x-panel-body"><p>html value goes here</p></div> - </div> -</div> + // private + onEnable : function(){ + if(this.rendered && this.maskDisabled){ + this.el.unmask(); + } + Ext.Panel.superclass.onEnable.call(this); + }, -// frame = true (create 9 elements) -<div id="developer-specified-id-goes-here" class="x-panel"> - <div class="x-panel-tl"><div class="x-panel-tr"><div class="x-panel-tc"> - <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:true)</span></div> - </div></div></div> + // private + onResize : function(adjWidth, adjHeight, rawWidth, rawHeight){ + var w = adjWidth, + h = adjHeight; - <div class="x-panel-bwrap"> - <div class="x-panel-ml"><div class="x-panel-mr"><div class="x-panel-mc"> - <div class="x-panel-body"><p>html value goes here</p></div> - </div></div></div> + if(Ext.isDefined(w) || Ext.isDefined(h)){ + if(!this.collapsed){ + // First, set the the Panel's body width. + // If we have auto-widthed it, get the resulting full offset width so we can size the Toolbars to match + // The Toolbars must not buffer this resize operation because we need to know their heights. - <div class="x-panel-bl"><div class="x-panel-br"><div class="x-panel-bc"/> - </div></div></div> -</div> - *An example of specifying a custom icon class would be something like: - *
- */ - /** - * @cfg {Boolean} collapsible - * True to make the panel collapsible and have the expand/collapse toggle button automatically rendered into - * the header tool button area, false to keep the panel statically sized with no button (defaults to false). - */ - /** - * @cfg {Array} tools - * An array of tool button configs to be added to the header tool area. When rendered, each tool is - * stored as an {@link Ext.Element Element} referenced by a public property called-// specify the property in the config for the class: - ... - iconCls: 'my-icon' + if(Ext.isNumber(w)){ + this.body.setWidth(w = this.adjustBodyWidth(w - this.getFrameWidth())); + } else if (w == 'auto') { + w = this.body.setWidth('auto').dom.offsetWidth; + } else { + w = this.body.dom.offsetWidth; + } + + if(this.tbar){ + this.tbar.setWidth(w); + if(this.topToolbar){ + this.topToolbar.setSize(w); + } + } + if(this.bbar){ + this.bbar.setWidth(w); + if(this.bottomToolbar){ + this.bottomToolbar.setSize(w); + // The bbar does not move on resize without this. + if (Ext.isIE) { + this.bbar.setStyle('position', 'static'); + this.bbar.setStyle('position', ''); + } + } + } + if(this.footer){ + this.footer.setWidth(w); + if(this.fbar){ + this.fbar.setSize(Ext.isIE ? (w - this.footer.getFrameWidth('lr')) : 'auto'); + } + } + + // At this point, the Toolbars must be layed out for getFrameHeight to find a result. + if(Ext.isNumber(h)){ + h = Math.max(0, h - this.getFrameHeight()); + //h = Math.max(0, h - (this.getHeight() - this.body.getHeight())); + this.body.setHeight(h); + }else if(h == 'auto'){ + this.body.setHeight(h); + } + + if(this.disabled && this.el._mask){ + this.el._mask.setSize(this.el.dom.clientWidth, this.el.getHeight()); + } + }else{ + // Adds an event to set the correct height afterExpand. This accounts for the deferHeight flag in panel + this.queuedBodySize = {width: w, height: h}; + if(!this.queuedExpand && this.allowQueuedExpand !== false){ + this.queuedExpand = true; + this.on('expand', function(){ + delete this.queuedExpand; + this.onResize(this.queuedBodySize.width, this.queuedBodySize.height); + }, this, {single:true}); + } + } + this.onBodyResize(w, h); + } + this.syncShadow(); + Ext.Panel.superclass.onResize.call(this, adjWidth, adjHeight, rawWidth, rawHeight); + + }, + + // private + onBodyResize: function(w, h){ + this.fireEvent('bodyresize', this, w, h); + }, + + // private + getToolbarHeight: function(){ + var h = 0; + if(this.rendered){ + Ext.each(this.toolbars, function(tb){ + h += tb.getHeight(); + }, this); + } + return h; + }, + + // deprecate + adjustBodyHeight : function(h){ + return h; + }, + + // private + adjustBodyWidth : function(w){ + return w; + }, + + // private + onPosition : function(){ + this.syncShadow(); + }, -// css class that specifies background image to be used as the icon image: -.my-icon { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; } -tools.<tool-type>- *Each tool config may contain the following properties: - *
- *-
- *
- id : StringRequired. The type - * of tool to create. By default, this assigns a CSS class of the form
x-tool-<tool-type>to the - * resulting tool Element. Ext provides CSS rules, and an icon sprite containing images for the tool types listed below. - * The developer may implement custom tools by supplying alternate CSS rules and background images: - *-
- *
- *toggle(Created by default when {@link #collapsible} istrue)- *close- *minimize- *maximize- *restore- *gear- *pin- *unpin- *right- *left- *up- *down- *refresh- *minus- *plus- *help- *search- *save- *print
- * - handler : FunctionRequired. The function to - * call when clicked. Arguments passed are:
-
- *
- event : Ext.EventObjectThe click event.
- *
- toolEl : Ext.ElementThe tool Element.
- *
- panel : Ext.PanelThe host Panel
- *
- tc : Ext.PanelThe tool configuration object
- *
- * - event : Ext.EventObject
- stopEvent : BooleanDefaults to true. Specify as false to allow click event to propagate.
- *
- scope : ObjectThe scope in which to call the handler.
- *
- qtip : String/ObjectA tip string, or - * a config argument to {@link Ext.QuickTip#register}
- *
- hidden : BooleanTrue to initially render hidden.
- *
- on : ObjectA listener config object specifiying - * event listeners in the format of an argument to {@link #addListener}
- *
Note that, apart from the toggle tool which is provided when a panel is collapsible, these - * tools only provide the visual button. Any required functionality must be provided by adding - * handlers that implement the necessary behavior.
- *Example usage:
- *
- *-tools:[{ - id:'refresh', - qtip: 'Refresh form Data', - // hidden:true, - handler: function(event, toolEl, panel){ - // refresh logic - } -}, -{ - id:'help', - qtip: 'Get Help', - handler: function(event, toolEl, panel){ - // whatever - } -}] -For the custom id of
- *'help'define two relevant css classes with a link to - * a 15x15 image:
- */ - /** - * @cfg {Ext.Template/Ext.XTemplate} toolTemplate - *-.x-tool-help {background-image: url(images/help.png);} -.x-tool-help-over {background-image: url(images/help_over.png);} -// if using an image sprite: -.x-tool-help {background-image: url(images/help.png) no-repeat 0 0;} -.x-tool-help-over {background-position:-15px 0;} -A Template used to create {@link #tools} in the {@link #header} Element. Defaults to:
- *-new Ext.Template('<div class="x-tool x-tool-{id}"> </div>')This may may be overridden to provide a custom DOM structure for tools based upon a more - * complex XTemplate. The template's data is a single tool configuration object (Not the entire Array) - * as specified in {@link #tools}. In the following example an <a> tag is used to provide a - * visual indication when hovering over the tool:
- *-var win = new Ext.Window({ - tools: [{ - id: 'download', - href: '/MyPdfDoc.pdf' - }], - toolTemplate: new Ext.XTemplate( - '<tpl if="id==\'download\'">', - '<a class="x-tool x-tool-pdf" href="{href}"></a>', - '</tpl>', - '<tpl if="id!=\'download\'">', - '<div class="x-tool x-tool-{id}"> </div>', - '</tpl>' - ), - width:500, - height:300, - closeAction:'hide' -});Note that the CSS class 'x-tool-pdf' should have an associated style rule which provides an - * appropriate background image, something like:
-
- */ - /** - * @cfg {Boolean} hideCollapseTool - *- a.x-tool-pdf {background-image: url(../shared/extjs/images/pdf.gif)!important;} -trueto hide the expand/collapse toggle button when{@link #collapsible} == true, - *falseto display it (defaults tofalse). - */ - /** - * @cfg {Boolean} titleCollapse - *trueto allow expanding and collapsing the panel (when{@link #collapsible} = true) - * by clicking anywhere in the header bar,false) to allow it only by clicking to tool button - * (defaults tofalse)). If this panel is a child item of a border layout also see the - * {@link Ext.layout.BorderLayout.Region BorderLayout.Region} - *{@link Ext.layout.BorderLayout.Region#floatable floatable}config option. - */ - /** - * @cfg {Boolean} autoScroll - *trueto use overflow:'auto' on the panel's body element and show scroll bars automatically when - * necessary,falseto clip any overflowing content (defaults tofalse). - */ - /** - * @cfg {Mixed} floating - *This property is used to configure the underlying {@link Ext.Layer}. Acceptable values for this - * configuration property are:
- */ /** - * @cfg {Boolean/String} shadow - *-
- *
false: Default.Display the panel inline where it is - * rendered.
- * true:Float the panel (absolute position it with automatic - * shimming and shadow).-
- *
Setting floating to true will create an Ext.Layer for this panel and display the - * panel at negative offsets so that it is hidden.- *Since the panel will be absolute positioned, the position must be set explicitly - * after render (e.g.,- *myPanel.setPosition(100,100);).Note: when floating a panel you should always assign a fixed width, - * otherwise it will be auto width and will expand to fill to the right edge of the viewport.- *
- * {@link Ext.Layer object}:The specified object will be used - * as the configuration object for the {@link Ext.Layer} that will be created.
- *
true(or a valid Ext.Shadow {@link Ext.Shadow#mode} value) to display a shadow behind the - * panel,falseto display no shadow (defaults to'sides'). Note that this option - * only applies when{@link #floating} = true. + * Returns the width in pixels of the framing elements of this panel (not including the body width). To + * retrieve the body width see {@link #getInnerWidth}. + * @return {Number} The frame width */ + getFrameWidth : function(){ + var w = this.el.getFrameWidth('lr') + this.bwrap.getFrameWidth('lr'); + + if(this.frame){ + var l = this.bwrap.dom.firstChild; + w += (Ext.fly(l).getFrameWidth('l') + Ext.fly(l.firstChild).getFrameWidth('r')); + w += this.mc.getFrameWidth('lr'); + } + return w; + }, + /** - * @cfg {Number} shadowOffset - * The number of pixels to offset the shadow if displayed (defaults to4). Note that this - * option only applies when{@link #floating} = true. + * Returns the height in pixels of the framing elements of this panel (including any top and bottom bars and + * header and footer elements, but not including the body height). To retrieve the body height see {@link #getInnerHeight}. + * @return {Number} The frame height */ + getFrameHeight : function() { + var h = Math.max(0, this.getHeight() - this.body.getHeight()); + + if (isNaN(h)) { + h = 0; + } + return h; + + /* Deprecate + var h = this.el.getFrameWidth('tb') + this.bwrap.getFrameWidth('tb'); + h += (this.tbar ? this.tbar.getHeight() : 0) + + (this.bbar ? this.bbar.getHeight() : 0); + + if(this.frame){ + h += this.el.dom.firstChild.offsetHeight + this.ft.dom.offsetHeight + this.mc.getFrameWidth('tb'); + }else{ + h += (this.header ? this.header.getHeight() : 0) + + (this.footer ? this.footer.getHeight() : 0); + } + return h; + */ + }, + /** - * @cfg {Boolean} shim - *falseto disable the iframe shim in browsers which need one (defaults totrue). - * Note that this option only applies when{@link #floating} = true. + * Returns the width in pixels of the body element (not including the width of any framing elements). + * For the frame width see {@link #getFrameWidth}. + * @return {Number} The body width */ + getInnerWidth : function(){ + return this.getSize().width - this.getFrameWidth(); + }, + /** - * @cfg {String/Object} html - * An HTML fragment, or a {@link Ext.DomHelper DomHelper} specification to use as the panel's body - * content (defaults to ''). The HTML content is added by the Panel's {@link #afterRender} method, - * and so the document will not contain this HTML at the time the {@link #render} event is fired. - * This content is inserted into the body before any configured {@link #contentEl} is appended. + * Returns the height in pixels of the body element (not including the height of any framing elements). + * For the frame height see {@link #getFrameHeight}. + * @return {Number} The body height */ + getInnerHeight : function(){ + return this.body.getHeight(); + /* Deprecate + return this.getSize().height - this.getFrameHeight(); + */ + }, + + // private + syncShadow : function(){ + if(this.floating){ + this.el.sync(true); + } + }, + + // private + getLayoutTarget : function(){ + return this.body; + }, + + // private + getContentTarget : function(){ + return this.body; + }, + /** - * @cfg {String} contentEl - *Optional. Specify an existing HTML element, or the
- *idof an existing HTML element to use as this Panel's - *{@link #body}content.-
- *
- Description :
- * This config option is used to take an existing HTML element and place it in the body - * of a new panel (it simply moves the specified DOM element into the body element of the Panel - * after the Panel is rendered to use as the content (it is not going to be the actual panel itself).
- *
- Notes :
- * The specified HTML element is appended to the Panel's {@link #body} Element by the - * Panel's- *
afterRendermethod after any configured {@link #html HTML} has - * been inserted, and so the document will not contain this element at the time the - * {@link #render} event is fired.The specified HTML element used will not participate in any- *{@link Ext.Container#layout layout}- * scheme that the Panel may use. It is just HTML. Layouts operate on child{@link Ext.Container#items items}.Add either thex-hiddenor thex-hide-displayCSS class to - * prevent a brief flicker of the content before it is rendered to the panel.
- *
Sets the title text for the panel and optionally the {@link #iconCls icon class}.
+ *In order to be able to set the title, a header element must have been created + * for the Panel. This is triggered either by configuring the Panel with a non-blank
+ * @param {String} title The title text to set + * @param {String} iconCls (optional) {@link #iconCls iconCls} A user-defined CSS class that provides the icon image for this panel */ + setTitle : function(title, iconCls){ + this.title = title; + if(this.header && this.headerAsText){ + this.header.child('span').update(title); + } + if(iconCls){ + this.setIconClass(iconCls); + } + this.fireEvent('titlechange', this, title); + return this; + }, + /** - * @cfg {Object/Array} keys - * A {@link Ext.KeyMap} config object (in the format expected by {@link Ext.KeyMap#addBinding} - * used to assign custom key handling to this panel (defaults to{@link #title}, + * or configuring it with{@link #header}: true.null). + * Get the {@link Ext.Updater} for this panel. Enables you to perform Ajax updates of this panel's body. + * @return {Ext.Updater} The Updater */ - /** - * @cfg {Boolean/Object} draggable - *
- *trueto enable dragging of this Panel (defaults tofalse).For custom drag/drop implementations, an Ext.Panel.DD config could also be passed - * in this config instead of
true. Ext.Panel.DD is an internal, undocumented class which - * moves a proxy Element around in place of the Panel's element, but provides no other behaviour - * during dragging or on drop. It is a subclass of {@link Ext.dd.DragSource}, so behaviour may be - * added by implementing the interface methods of {@link Ext.dd.DragDrop} e.g.: - *
- */ + u.update(Ext.isObject(this.autoLoad) ? this.autoLoad : {url: this.autoLoad}); + }, + /** - * @cfg {Boolean} disabled - * Render this panel disabled (default is-new Ext.Panel({ - title: 'Drag me', - x: 100, - y: 100, - renderTo: Ext.getBody(), - floating: true, - frame: true, - width: 400, - height: 200, - draggable: { -// Config option of Ext.Panel.DD class. -// It's a floating Panel, so do not show a placeholder proxy in the original position. - insertProxy: false, + getUpdater : function(){ + return this.body.getUpdater(); + }, -// Called for each mousemove event while dragging the DD object. - onDrag : function(e){ -// Record the x,y position of the drag proxy so that we can -// position the Panel at end of drag. - var pel = this.proxy.getEl(); - this.x = pel.getLeft(true); - this.y = pel.getTop(true); + /** + * Loads this content panel immediately with content returned from an XHR call. + * @param {Object/String/Function} config A config object containing any of the following options: +
+ * The only required property is url. The optional properties nocache, text and scripts + * are shorthand for disableCaching, indicatorText and loadScripts and are used to set their + * associated property on this panel Updater instance. + * @return {Ext.Panel} this + */ + load : function(){ + var um = this.body.getUpdater(); + um.update.apply(um, arguments); + return this; + }, -// Keep the Shadow aligned if there is one. - var s = this.panel.getEl().shadow; - if (s) { - s.realign(this.x, this.y, pel.getWidth(), pel.getHeight()); + // private + beforeDestroy : function(){ + Ext.Panel.superclass.beforeDestroy.call(this); + if(this.header){ + this.header.removeAllListeners(); + } + if(this.tools){ + for(var k in this.tools){ + Ext.destroy(this.tools[k]); } - }, + } + if(this.toolbars.length > 0){ + Ext.each(this.toolbars, function(tb){ + tb.un('afterlayout', this.syncHeight, this); + tb.un('remove', this.syncHeight, this); + }, this); + } + if(Ext.isArray(this.buttons)){ + while(this.buttons.length) { + Ext.destroy(this.buttons[0]); + } + } + if(this.rendered){ + Ext.destroy( + this.ft, + this.header, + this.footer, + this.tbar, + this.bbar, + this.body, + this.mc, + this.bwrap, + this.dd + ); + if (this.fbar) { + Ext.destroy( + this.fbar, + this.fbar.el + ); + } + } + Ext.destroy(this.toolbars); + }, + + // private + createClasses : function(){ + this.headerCls = this.baseCls + '-header'; + this.headerTextCls = this.baseCls + '-header-text'; + this.bwrapCls = this.baseCls + '-bwrap'; + this.tbarCls = this.baseCls + '-tbar'; + this.bodyCls = this.baseCls + '-body'; + this.bbarCls = this.baseCls + '-bbar'; + this.footerCls = this.baseCls + '-footer'; + }, + + // private + createGhost : function(cls, useShim, appendTo){ + var el = document.createElement('div'); + el.className = 'x-panel-ghost ' + (cls ? cls : ''); + if(this.header){ + el.appendChild(this.el.dom.firstChild.cloneNode(true)); + } + Ext.fly(el.appendChild(document.createElement('ul'))).setHeight(this.bwrap.getHeight()); + el.style.width = this.el.dom.offsetWidth + 'px';; + if(!appendTo){ + this.container.dom.appendChild(el); + }else{ + Ext.getDom(appendTo).appendChild(el); + } + if(useShim !== false && this.el.useShim !== false){ + var layer = new Ext.Layer({shadow:false, useDisplay:true, constrain:false}, el); + layer.show(); + return layer; + }else{ + return new Ext.Element(el); + } + }, -// Called on the mouseup event. - endDrag : function(e){ - this.panel.setPosition(this.x, this.y); + // private + doAutoLoad : function(){ + var u = this.body.getUpdater(); + if(this.renderer){ + u.setRenderer(this.renderer); } - } -}).show(); -+panel.load({ + url: 'your-url.php', + params: {param1: 'foo', param2: 'bar'}, // or a URL encoded string + callback: yourFunction, + scope: yourObject, // optional scope for the callback + discardUrl: false, + nocache: false, + text: 'Loading...', + timeout: 30, + scripts: false +}); +false). An important note when using the disabled - * config on panels is that IE will often fail to initialize the disabled mask element correectly if - * the panel's layout has not yet completed by the time the Panel is disabled during the render process. - * If you experience this issue, you may need to instead use the {@link #afterlayout} event to initialize - * the disabled state: - *
- */ +Ext.reg('panel', Ext.Panel); +/** + * @class Ext.Editor + * @extends Ext.Component + * A base editor field that handles displaying/hiding on demand and has some built-in sizing and event handling logic. + * @constructor + * Create a new Editor + * @param {Object} config The config object + * @xtype editor + */ +Ext.Editor = function(field, config){ + if(field.field){ + this.field = Ext.create(field.field, 'textfield'); + config = Ext.apply({}, field); // copy so we don't disturb original config + delete config.field; + }else{ + this.field = field; + } + Ext.Editor.superclass.constructor.call(this, config); +}; + +Ext.extend(Ext.Editor, Ext.Component, { /** - * @cfg {Boolean} autoHeight - *-new Ext.Panel({ - ... - listeners: { - 'afterlayout': { - fn: function(p){ - p.disable(); - }, - single: true // important, as many layouts can occur - } + * Retrieve a tool by id. + * @param {String} id + * @return {Object} tool + */ + getTool : function(id) { + return this.tools[id]; } + +/** + * @cfg {String} autoEl @hide + */ }); -trueto use height:'auto',falseto use fixed height (defaults tofalse). - * Note: SettingautoHeight: truemeans that the browser will manage the panel's height - * based on its contents, and that Ext will not manage it at all. If the panel is within a layout that - * manages dimensions (fit,border, etc.) then settingautoHeight: true- * can cause issues with scrolling and will not generally work as expected since the panel will take - * on the height of its contents rather than the height required by the Ext layout. + * @cfg {Ext.form.Field} field + * The Field object (or descendant) or config object for field + */ + /** + * @cfg {Boolean} allowBlur + * True to {@link #completeEdit complete the editing process} if in edit mode when the + * field is blurred. Defaults to true. */ - - + allowBlur: true, /** - * @cfg {String} baseCls - * The base CSS class to apply to this panel's element (defaults to'x-panel'). - *Another option available by default is to specify
+ * @cfg {Boolean/String} autoSize + * True for the editor to automatically adopt the size of the underlying field, "width" to adopt the width only, + * or "height" to adopt the height only, "none" to always use the field dimensions. (defaults to false) */ - baseCls : 'x-panel', /** - * @cfg {String} collapsedCls - * A CSS class to add to the panel's element after it has been collapsed (defaults to - *'x-plain'which strips all styling - * except for required attributes for Ext layouts to function (e.g. overflow:hidden). - * See{@link #unstyled}also.'x-panel-collapsed'). + * @cfg {Boolean} revertInvalid + * True to automatically revert the field value and cancel the edit when the user completes an edit and the field + * validation fails (defaults to true) */ - collapsedCls : 'x-panel-collapsed', /** - * @cfg {Boolean} maskDisabled - *trueto mask the panel when it is {@link #disabled},falseto not mask it (defaults - * totrue). Either way, the panel will always tell its contained elements to disable themselves - * when it is disabled, but masking the panel can provide an additional visual cue that the panel is - * disabled. + * @cfg {Boolean} ignoreNoChange + * True to skip the edit completion process (no save, no events fired) if the user completes an edit and + * the value has not changed (defaults to false). Applies only to string values - edits for other data types + * will never be ignored. */ - maskDisabled : true, /** - * @cfg {Boolean} animCollapse - *trueto animate the transition when the panel is collapsed,falseto skip the - * animation (defaults totrueif the {@link Ext.Fx} class is available, otherwisefalse). + * @cfg {Boolean} hideEl + * False to keep the bound element visible while the editor is displayed (defaults to true) */ - animCollapse : Ext.enableFx, /** - * @cfg {Boolean} headerAsText - *trueto display the panel{@link #title}in the{@link #header}, - *falseto hide it (defaults totrue). + * @cfg {Mixed} value + * The data value of the underlying field (defaults to "") */ - headerAsText : true, + value : "", /** - * @cfg {String} buttonAlign - * The alignment of any {@link #buttons} added to this panel. Valid values are'right', - *'left'and'center'(defaults to'right'). + * @cfg {String} alignment + * The position to align to (see {@link Ext.Element#alignTo} for more details, defaults to "c-c?"). */ - buttonAlign : 'right', + alignment: "c-c?", /** - * @cfg {Boolean} collapsed - *trueto render the panel collapsed,falseto render it expanded (defaults to - *false). + * @cfg {Array} offsets + * The offsets to use when aligning (see {@link Ext.Element#alignTo} for more details. Defaults to [0, 0]. */ - collapsed : false, + offsets: [0, 0], /** - * @cfg {Boolean} collapseFirst - *trueto make sure the collapse/expand toggle button always renders first (to the left of) - * any other tools in the panel's title bar,falseto render it last (defaults totrue). + * @cfg {Boolean/String} shadow "sides" for sides/bottom only, "frame" for 4-way shadow, and "drop" + * for bottom-right shadow (defaults to "frame") */ - collapseFirst : true, + shadow : "frame", /** - * @cfg {Number} minButtonWidth - * Minimum width in pixels of all {@link #buttons} in this panel (defaults to75) + * @cfg {Boolean} constrain True to constrain the editor to the viewport */ - minButtonWidth : 75, + constrain : false, /** - * @cfg {Boolean} unstyled - * Overrides the{@link #baseCls}setting to{@link #baseCls} = 'x-plain'which renders - * the panel unstyled except for required attributes for Ext layouts to function (e.g. overflow:hidden). + * @cfg {Boolean} swallowKeys Handle the keydown/keypress events so they don't propagate (defaults to true) */ + swallowKeys : true, /** - * @cfg {String} elements - * A comma-delimited list of panel elements to initialize when the panel is rendered. Normally, this list will be - * generated automatically based on the items added to the panel at config time, but sometimes it might be useful to - * make sure a structural element is rendered even if not specified at config time (for example, you may want - * to add a button or toolbar dynamically after the panel has been rendered). Adding those elements to this - * list will allocate the required placeholders in the panel when it is rendered. Valid values are- * Defaults to '-
- *
header
- * tbar(top bar)
- * body
- * bbar(bottom bar)
- * footer
- *
body'. + * @cfg {Boolean} completeOnEnter True to complete the edit when the enter key is pressed. Defaults to true. */ - elements : 'body', + completeOnEnter : true, /** - * @cfg {Boolean} preventBodyReset - * Defaults tofalse. When set totrue, an extra css class'x-panel-normal'- * will be added to the panel's element, effectively applying css styles suggested by the W3C - * (see http://www.w3.org/TR/CSS21/sample.html) to the Panel's body element (not the header, - * footer, etc.). + * @cfg {Boolean} cancelOnEsc True to cancel the edit when the escape key is pressed. Defaults to true. */ - preventBodyReset : false, - - /** @cfg {String} resizeEvent - * The event to listen to for resizing in layouts. Defaults to 'bodyresize'. + cancelOnEsc : true, + /** + * @cfg {Boolean} updateEl True to update the innerHTML of the bound element when the update completes (defaults to false) */ - resizeEvent: 'bodyresize', - - // protected - these could be used to customize the behavior of the window, - // but changing them would not be useful without further mofifications and - // could lead to unexpected or undesirable results. - toolTarget : 'header', - collapseEl : 'bwrap', - slideAnchor : 't', - disabledClass : '', - - // private, notify box this class will handle heights - deferHeight : true, - // private - expandDefaults: { - duration : 0.25 - }, - // private - collapseDefaults : { - duration : 0.25 - }, + updateEl : false, - // private initComponent : function(){ - Ext.Panel.superclass.initComponent.call(this); - + Ext.Editor.superclass.initComponent.call(this); this.addEvents( /** - * @event bodyresize - * Fires after the Panel has been resized. - * @param {Ext.Panel} p the Panel which has been resized. - * @param {Number} width The Panel's new width. - * @param {Number} height The Panel's new height. - */ - 'bodyresize', - /** - * @event titlechange - * Fires after the Panel title has been {@link #title set} or {@link #setTitle changed}. - * @param {Ext.Panel} p the Panel which has had its title changed. - * @param {String} The new title. - */ - 'titlechange', - /** - * @event iconchange - * Fires after the Panel icon class has been {@link #iconCls set} or {@link #setIconClass changed}. - * @param {Ext.Panel} p the Panel which has had its {@link #iconCls icon class} changed. - * @param {String} The new icon class. - * @param {String} The old icon class. - */ - 'iconchange', - /** - * @event collapse - * Fires after the Panel has been collapsed. - * @param {Ext.Panel} p the Panel that has been collapsed. - */ - 'collapse', - /** - * @event expand - * Fires after the Panel has been expanded. - * @param {Ext.Panel} p The Panel that has been expanded. - */ - 'expand', - /** - * @event beforecollapse - * Fires before the Panel is collapsed. A handler can return false to cancel the collapse. - * @param {Ext.Panel} p the Panel being collapsed. - * @param {Boolean} animate True if the collapse is animated, else false. + * @event beforestartedit + * Fires when editing is initiated, but before the value changes. Editing can be canceled by returning + * false from the handler of this event. + * @param {Editor} this + * @param {Ext.Element} boundEl The underlying element bound to this editor + * @param {Mixed} value The field value being set */ - 'beforecollapse', + "beforestartedit", /** - * @event beforeexpand - * Fires before the Panel is expanded. A handler can return false to cancel the expand. - * @param {Ext.Panel} p The Panel being expanded. - * @param {Boolean} animate True if the expand is animated, else false. + * @event startedit + * Fires when this editor is displayed + * @param {Ext.Element} boundEl The underlying element bound to this editor + * @param {Mixed} value The starting field value */ - 'beforeexpand', + "startedit", /** - * @event beforeclose - * Fires before the Panel is closed. Note that Panels do not directly support being closed, but some - * Panel subclasses do (like {@link Ext.Window}) or a Panel within a Ext.TabPanel. This event only - * applies to such subclasses. - * A handler can return false to cancel the close. - * @param {Ext.Panel} p The Panel being closed. + * @event beforecomplete + * Fires after a change has been made to the field, but before the change is reflected in the underlying + * field. Saving the change to the field can be canceled by returning false from the handler of this event. + * Note that if the value has not changed and ignoreNoChange = true, the editing will still end but this + * event will not fire since no edit actually occurred. + * @param {Editor} this + * @param {Mixed} value The current field value + * @param {Mixed} startValue The original field value */ - 'beforeclose', + "beforecomplete", /** - * @event close - * Fires after the Panel is closed. Note that Panels do not directly support being closed, but some - * Panel subclasses do (like {@link Ext.Window}) or a Panel within a Ext.TabPanel. - * @param {Ext.Panel} p The Panel that has been closed. + * @event complete + * Fires after editing is complete and any changed value has been written to the underlying field. + * @param {Editor} this + * @param {Mixed} value The current field value + * @param {Mixed} startValue The original field value */ - 'close', + "complete", /** - * @event activate - * Fires after the Panel has been visually activated. - * Note that Panels do not directly support being activated, but some Panel subclasses - * do (like {@link Ext.Window}). Panels which are child Components of a TabPanel fire the - * activate and deactivate events under the control of the TabPanel. - * @param {Ext.Panel} p The Panel that has been activated. + * @event canceledit + * Fires after editing has been canceled and the editor's value has been reset. + * @param {Editor} this + * @param {Mixed} value The user-entered field value that was discarded + * @param {Mixed} startValue The original field value that was set back into the editor after cancel */ - 'activate', + "canceledit", /** - * @event deactivate - * Fires after the Panel has been visually deactivated. - * Note that Panels do not directly support being deactivated, but some Panel subclasses - * do (like {@link Ext.Window}). Panels which are child Components of a TabPanel fire the - * activate and deactivate events under the control of the TabPanel. - * @param {Ext.Panel} p The Panel that has been deactivated. + * @event specialkey + * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check + * {@link Ext.EventObject#getKey} to determine which key was pressed. + * @param {Ext.form.Field} this + * @param {Ext.EventObject} e The event object */ - 'deactivate' + "specialkey" ); + }, - if(this.unstyled){ - this.baseCls = 'x-plain'; + // private + onRender : function(ct, position){ + this.el = new Ext.Layer({ + shadow: this.shadow, + cls: "x-editor", + parentEl : ct, + shim : this.shim, + shadowOffset: this.shadowOffset || 4, + id: this.id, + constrain: this.constrain + }); + if(this.zIndex){ + this.el.setZIndex(this.zIndex); + } + this.el.setStyle("overflow", Ext.isGecko ? "auto" : "hidden"); + if(this.field.msgTarget != 'title'){ + this.field.msgTarget = 'qtip'; + } + this.field.inEditor = true; + this.mon(this.field, { + scope: this, + blur: this.onBlur, + specialkey: this.onSpecialKey + }); + if(this.field.grow){ + this.mon(this.field, "autosize", this.el.sync, this.el, {delay:1}); + } + this.field.render(this.el).show(); + this.field.getEl().dom.name = ''; + if(this.swallowKeys){ + this.field.el.swallowEvent([ + 'keypress', // *** Opera + 'keydown' // *** all other browsers + ]); } + }, - // shortcuts - if(this.tbar){ - this.elements += ',tbar'; - if(Ext.isObject(this.tbar)){ - this.topToolbar = this.tbar; + // private + onSpecialKey : function(field, e){ + var key = e.getKey(), + complete = this.completeOnEnter && key == e.ENTER, + cancel = this.cancelOnEsc && key == e.ESC; + if(complete || cancel){ + e.stopEvent(); + if(complete){ + this.completeEdit(); + }else{ + this.cancelEdit(); + } + if(field.triggerBlur){ + field.triggerBlur(); } - delete this.tbar; } - if(this.bbar){ - this.elements += ',bbar'; - if(Ext.isObject(this.bbar)){ - this.bottomToolbar = this.bbar; + this.fireEvent('specialkey', field, e); + }, + + /** + * Starts the editing process and shows the editor. + * @param {Mixed} el The element to edit + * @param {String} value (optional) A value to initialize the editor with. If a value is not provided, it defaults + * to the innerHTML of el. + */ + startEdit : function(el, value){ + if(this.editing){ + this.completeEdit(); + } + this.boundEl = Ext.get(el); + var v = value !== undefined ? value : this.boundEl.dom.innerHTML; + if(!this.rendered){ + this.render(this.parentEl || document.body); + } + if(this.fireEvent("beforestartedit", this, this.boundEl, v) !== false){ + this.startValue = v; + this.field.reset(); + this.field.setValue(v); + this.realign(true); + this.editing = true; + this.show(); + } + }, + + // private + doAutoSize : function(){ + if(this.autoSize){ + var sz = this.boundEl.getSize(), + fs = this.field.getSize(); + + switch(this.autoSize){ + case "width": + this.setSize(sz.width, fs.height); + break; + case "height": + this.setSize(fs.width, sz.height); + break; + case "none": + this.setSize(fs.width, fs.height); + break; + default: + this.setSize(sz.width, sz.height); } - delete this.bbar; } + }, - if(this.header === true){ - this.elements += ',header'; - delete this.header; - }else if(this.headerCfg || (this.title && this.header !== false)){ - this.elements += ',header'; + /** + * Sets the height and width of this editor. + * @param {Number} width The new width + * @param {Number} height The new height + */ + setSize : function(w, h){ + delete this.field.lastSize; + this.field.setSize(w, h); + if(this.el){ + // IE7 in strict mode doesn't size properly. + if(Ext.isGecko2 || Ext.isOpera || (Ext.isIE7 && Ext.isStrict)){ + // prevent layer scrollbars + this.el.setSize(w, h); + } + this.el.sync(); } + }, - if(this.footerCfg || this.footer === true){ - this.elements += ',footer'; - delete this.footer; + /** + * Realigns the editor to the bound field based on the current alignment config value. + * @param {Boolean} autoSize (optional) True to size the field to the dimensions of the bound element. + */ + realign : function(autoSize){ + if(autoSize === true){ + this.doAutoSize(); } + this.el.alignTo(this.boundEl, this.alignment, this.offsets); + }, - if(this.buttons){ - this.elements += ',footer'; - var btns = this.buttons; - /** - * This Panel's Array of buttons as created from the{@link #buttons}- * config property. Read only. - * @type Array - * @property buttons - */ - this.buttons = []; - Ext.each(btns, function(btn){ - if(btn.render){ // button instance - this.buttons.push(btn); - }else if(btn.xtype){ - this.buttons.push(Ext.create(btn, 'button')); - }else{ - this.addButton(btn); - } - }, this); + /** + * Ends the editing process, persists the changed value to the underlying field, and hides the editor. + * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after edit (defaults to false) + */ + completeEdit : function(remainVisible){ + if(!this.editing){ + return; } - if(this.fbar){ - this.elements += ',footer'; + // Assert combo values first + if (this.field.assertValue) { + this.field.assertValue(); } - if(this.autoLoad){ - this.on('render', this.doAutoLoad, this, {delay:10}); + var v = this.getValue(); + if(!this.field.isValid()){ + if(this.revertInvalid !== false){ + this.cancelEdit(remainVisible); + } + return; + } + if(String(v) === String(this.startValue) && this.ignoreNoChange){ + this.hideEdit(remainVisible); + return; + } + if(this.fireEvent("beforecomplete", this, v, this.startValue) !== false){ + v = this.getValue(); + if(this.updateEl && this.boundEl){ + this.boundEl.update(v); + } + this.hideEdit(remainVisible); + this.fireEvent("complete", this, v, this.startValue); } }, // private - createElement : function(name, pnode){ - if(this[name]){ - pnode.appendChild(this[name].dom); - return; + onShow : function(){ + this.el.show(); + if(this.hideEl !== false){ + this.boundEl.hide(); } + this.field.show().focus(false, true); + this.fireEvent("startedit", this.boundEl, this.startValue); + }, - if(name === 'bwrap' || this.elements.indexOf(name) != -1){ - if(this[name+'Cfg']){ - this[name] = Ext.fly(pnode).createChild(this[name+'Cfg']); - }else{ - var el = document.createElement('div'); - el.className = this[name+'Cls']; - this[name] = Ext.get(pnode.appendChild(el)); - } - if(this[name+'CssClass']){ - this[name].addClass(this[name+'CssClass']); - } - if(this[name+'Style']){ - this[name].applyStyles(this[name+'Style']); - } + /** + * Cancels the editing process and hides the editor without persisting any changes. The field value will be + * reverted to the original starting value. + * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after + * cancel (defaults to false) + */ + cancelEdit : function(remainVisible){ + if(this.editing){ + var v = this.getValue(); + this.setValue(this.startValue); + this.hideEdit(remainVisible); + this.fireEvent("canceledit", this, v, this.startValue); } }, // private - onRender : function(ct, position){ - Ext.Panel.superclass.onRender.call(this, ct, position); - this.createClasses(); - - var el = this.el, - d = el.dom, - bw, - ts; - - - if(this.collapsible && !this.hideCollapseTool){ - this.tools = this.tools ? this.tools.slice(0) : []; - this.tools[this.collapseFirst?'unshift':'push']({ - id: 'toggle', - handler : this.toggleCollapse, - scope: this - }); + hideEdit: function(remainVisible){ + if(remainVisible !== true){ + this.editing = false; + this.hide(); } - - if(this.tools){ - ts = this.tools; - this.elements += (this.header !== false) ? ',header' : ''; + }, + + // private + onBlur : function(){ + // selectSameEditor flag allows the same editor to be started without onBlur firing on itself + if(this.allowBlur === true && this.editing && this.selectSameEditor !== true){ + this.completeEdit(); } - this.tools = {}; - - el.addClass(this.baseCls); - if(d.firstChild){ // existing markup - this.header = el.down('.'+this.headerCls); - this.bwrap = el.down('.'+this.bwrapCls); - var cp = this.bwrap ? this.bwrap : el; - this.tbar = cp.down('.'+this.tbarCls); - this.body = cp.down('.'+this.bodyCls); - this.bbar = cp.down('.'+this.bbarCls); - this.footer = cp.down('.'+this.footerCls); - this.fromMarkup = true; + }, + + // private + onHide : function(){ + if(this.editing){ + this.completeEdit(); + return; } - if (this.preventBodyReset === true) { - el.addClass('x-panel-reset'); + this.field.blur(); + if(this.field.collapse){ + this.field.collapse(); } - if(this.cls){ - el.addClass(this.cls); + this.el.hide(); + if(this.hideEl !== false){ + this.boundEl.show(); } + }, - if(this.buttons){ - this.elements += ',footer'; - } + /** + * Sets the data value of the editor + * @param {Mixed} value Any valid value supported by the underlying field + */ + setValue : function(v){ + this.field.setValue(v); + }, - // This block allows for maximum flexibility and performance when using existing markup + /** + * Gets the data value of the editor + * @return {Mixed} The data value + */ + getValue : function(){ + return this.field.getValue(); + }, - // framing requires special markup - if(this.frame){ - el.insertHtml('afterBegin', String.format(Ext.Element.boxMarkup, this.baseCls)); + beforeDestroy : function(){ + Ext.destroyMembers(this, 'field'); - this.createElement('header', d.firstChild.firstChild.firstChild); - this.createElement('bwrap', d); + delete this.parentEl; + delete this.boundEl; + } +}); +Ext.reg('editor', Ext.Editor); +/** + * @class Ext.ColorPalette + * @extends Ext.Component + * Simple color palette class for choosing colors. The palette can be rendered to any container.
+ * Here's an example of typical usage: + *
+ * @constructor + * Create a new ColorPalette + * @param {Object} config The config object + * @xtype colorpalette + */ +Ext.ColorPalette = Ext.extend(Ext.Component, { + /** + * @cfg {String} tpl An existing XTemplate instance to be used in place of the default template for rendering the component. + */ + /** + * @cfg {String} itemCls + * The CSS class to apply to the containing element (defaults to 'x-color-palette') + */ + itemCls : 'x-color-palette', + /** + * @cfg {String} value + * The initial color to highlight (should be a valid 6-digit color hex code without the # symbol). Note that + * the hex codes are case-sensitive. + */ + value : null, + /** + * @cfg {String} clickEvent + * The DOM event that will cause a color to be selected. This can be any valid event name (dblclick, contextmenu). + * Defaults to 'click'. + */ + clickEvent :'click', + // private + ctype : 'Ext.ColorPalette', - var mc = bw.firstChild.firstChild.firstChild; - this.createElement('tbar', mc); - this.createElement('body', mc); - this.createElement('bbar', mc); - this.createElement('footer', bw.lastChild.firstChild.firstChild); + /** + * @cfg {Boolean} allowReselect If set to true then reselecting a color that is already selected fires the {@link #select} event + */ + allowReselect : false, - if(!this.footer){ - this.bwrap.dom.lastChild.className += ' x-panel-nofooter'; - } - /* - * Store a reference to this element so: - * a) We aren't looking it up all the time - * b) The last element is reported incorrectly when using a loadmask + /** + *+var cp = new Ext.ColorPalette({value:'993300'}); // initial selected color +cp.render('my-div'); - // append the mid and bottom frame to the bwrap - bw = this.bwrap.dom; - var ml = d.childNodes[1], bl = d.childNodes[2]; - bw.appendChild(ml); - bw.appendChild(bl); +cp.on('select', function(palette, selColor){ + // do something with selColor +}); +An array of 6-digit color hex code strings (without the # symbol). This array can contain any number + * of colors, and each hex code should be unique. The width of the palette is controlled via CSS by adjusting + * the width property of the 'x-color-palette' class (or assigning a custom class), so you can balance the number + * of colors with the width setting until the box is symmetrical.
+ *You can override individual colors if needed:
+ *
+ +Or you can provide a custom array of your own for complete control: ++var cp = new Ext.ColorPalette(); +cp.colors[0] = 'FF0000'; // change the first box to red +
+ * @type Array + */ + colors : [ + '000000', '993300', '333300', '003300', '003366', '000080', '333399', '333333', + '800000', 'FF6600', '808000', '008000', '008080', '0000FF', '666699', '808080', + 'FF0000', 'FF9900', '99CC00', '339966', '33CCCC', '3366FF', '800080', '969696', + 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0', + 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', '99CCFF', 'CC99FF', 'FFFFFF' + ], + + /** + * @cfg {Function} handler + * Optional. A function that will handle the select event of this palette. + * The handler is passed the following parameters:+var cp = new Ext.ColorPalette(); +cp.colors = ['000000', '993300', '333300']; ++ */ + /** + * @cfg {Object} scope + * The scope (this reference) in which the-
+ *
palette: ColorPaletteThe {@link #palette Ext.ColorPalette}.
+ * color: StringThe 6-digit color hex code (without the # symbol).
+ *
{@link #handler}+ * function will be called. Defaults to this ColorPalette instance. + */ + + // private + initComponent : function(){ + Ext.ColorPalette.superclass.initComponent.call(this); + this.addEvents( + /** + * @event select + * Fires when a color is selected + * @param {ColorPalette} this + * @param {String} color The 6-digit color hex code (without the # symbol) */ - this.ft = Ext.get(this.bwrap.dom.lastChild); - this.mc = Ext.get(this.bwrap.dom.firstChild.firstChild.firstChild); - }else{ - this.createElement('header', d); - this.createElement('bwrap', d); + 'select' + ); - // append the mid and bottom frame to the bwrap - bw = this.bwrap.dom; - this.createElement('tbar', bw); - this.createElement('body', bw); - this.createElement('bbar', bw); - this.createElement('footer', bw); + if(this.handler){ + this.on('select', this.handler, this.scope, true); + } + }, - if(!this.header){ - this.body.addClass(this.bodyCls + '-noheader'); - if(this.tbar){ - this.tbar.addClass(this.tbarCls + '-noheader'); - } - } + // private + onRender : function(container, position){ + this.autoEl = { + tag: 'div', + cls: this.itemCls + }; + Ext.ColorPalette.superclass.onRender.call(this, container, position); + var t = this.tpl || new Ext.XTemplate( + 'A popup date picker. This class is used by the {@link Ext.form.DateField DateField} class + * to allow browsing and selection of valid dates.
+ *All the string values documented below may be overridden by including an Ext locale file in + * your page.
+ * @constructor + * Create a new DatePicker + * @param {Object} config The config object + * @xtype datepicker + */ +Ext.DatePicker = Ext.extend(Ext.BoxComponent, { + /** + * @cfg {String} todayText + * The text to display on the button that selects the current date (defaults to'Today') + */ + todayText : 'Today', + /** + * @cfg {String} okText + * The text to display on the ok button (defaults to' OK 'to give the user extra clicking room) + */ + okText : ' OK ', + /** + * @cfg {String} cancelText + * The text to display on the cancel button (defaults to'Cancel') + */ + cancelText : 'Cancel', + /** + * @cfg {Function} handler + * Optional. A function that will handle the select event of this picker. + * The handler is passed the following parameters:+ */ + /** + * @cfg {Object} scope + * The scope (-
+ *
picker: DatePickerThis DatePicker.
+ * date: DateThe selected date.
+ *
thisreference) in which the{@link #handler}+ * function will be called. Defaults to this DatePicker instance. + */ + /** + * @cfg {String} todayTip + * A string used to format the message for displaying in a tooltip over the button that + * selects the current date. Defaults to'{0} (Spacebar)'where + * the{0}token is replaced by today's date. + */ + todayTip : '{0} (Spacebar)', + /** + * @cfg {String} minText + * The error text to display if the minDate validation fails (defaults to'This date is before the minimum date') + */ + minText : 'This date is before the minimum date', + /** + * @cfg {String} maxText + * The error text to display if the maxDate validation fails (defaults to'This date is after the maximum date') + */ + maxText : 'This date is after the maximum date', + /** + * @cfg {String} format + * The default date format string which can be overriden for localization support. The format must be + * valid according to {@link Date#parseDate} (defaults to'm/d/y'). + */ + format : 'm/d/y', + /** + * @cfg {String} disabledDaysText + * The tooltip to display when the date falls on a disabled day (defaults to'Disabled') + */ + disabledDaysText : 'Disabled', + /** + * @cfg {String} disabledDatesText + * The tooltip text to display when the date falls on a disabled date (defaults to'Disabled') + */ + disabledDatesText : 'Disabled', + /** + * @cfg {Array} monthNames + * An array of textual month names which can be overriden for localization support (defaults to Date.monthNames) + */ + monthNames : Date.monthNames, + /** + * @cfg {Array} dayNames + * An array of textual day names which can be overriden for localization support (defaults to Date.dayNames) + */ + dayNames : Date.dayNames, + /** + * @cfg {String} nextText + * The next month navigation button tooltip (defaults to'Next Month (Control+Right)') + */ + nextText : 'Next Month (Control+Right)', + /** + * @cfg {String} prevText + * The previous month navigation button tooltip (defaults to'Previous Month (Control+Left)') + */ + prevText : 'Previous Month (Control+Left)', + /** + * @cfg {String} monthYearText + * The header month selector tooltip (defaults to'Choose a month (Control+Up/Down to move years)') + */ + monthYearText : 'Choose a month (Control+Up/Down to move years)', + /** + * @cfg {Number} startDay + * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday) + */ + startDay : 0, + /** + * @cfg {Boolean} showToday + * False to hide the footer area containing the Today button and disable the keyboard handler for spacebar + * that selects the current date (defaults totrue). + */ + showToday : true, + /** + * @cfg {Date} minDate + * Minimum allowable date (JavaScript date object, defaults to null) + */ + /** + * @cfg {Date} maxDate + * Maximum allowable date (JavaScript date object, defaults to null) + */ + /** + * @cfg {Array} disabledDays + * An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday (defaults to null). + */ + /** + * @cfg {RegExp} disabledDatesRE + * JavaScript regular expression used to disable a pattern of dates (defaults to null). The {@link #disabledDates} + * config will generate this regex internally, but if you specify disabledDatesRE it will take precedence over the + * disabledDates value. + */ + /** + * @cfg {Array} disabledDates + * An array of 'dates' to disable, as strings. These strings will be used to build a dynamic regular + * expression so they are very powerful. Some examples: + *-
+ *
- ['03/08/2003', '09/16/2003'] would disable those exact dates + *
- ['03/08', '09/16'] would disable those days for every year + *
- ['^03/08'] would only match the beginning (useful if you are using short years) + *
- ['03/../2006'] would disable every day in March 2006 + *
- ['^03'] would disable every day in every March + *
{@link #tbar}) section of the panel. - * @return {Ext.Toolbar} The toolbar + * Replaces any existing {@link #minDate} with the new value and refreshes the DatePicker. + * @param {Date} value The minimum date that can be selected */ - getTopToolbar : function(){ - return this.topToolbar; + setMinDate : function(dt){ + this.minDate = dt; + this.update(this.value, true); }, /** - * Returns the {@link Ext.Toolbar toolbar} from the bottom ({@link #bbar}) section of the panel. - * @return {Ext.Toolbar} The toolbar + * Replaces any existing {@link #maxDate} with the new value and refreshes the DatePicker. + * @param {Date} value The maximum date that can be selected */ - getBottomToolbar : function(){ - return this.bottomToolbar; + setMaxDate : function(dt){ + this.maxDate = dt; + this.update(this.value, true); }, /** - * Adds a button to this panel. Note that this method must be called prior to rendering. The preferred - * approach is to add buttons via the {@link #buttons} config. - * @param {String/Object} config A valid {@link Ext.Button} config. A string will become the text for a default - * button config, an object will be treated as a button config object. - * @param {Function} handler The function to be called on button {@link Ext.Button#click} - * @param {Object} scope The scope to use for the button handler function - * @return {Ext.Button} The button that was added + * Sets the value of the date field + * @param {Date} value The date to set */ - addButton : function(config, handler, scope){ - var bc = { - handler: handler, - scope: scope, - minWidth: this.minButtonWidth, - hideParent:true - }; - if(Ext.isString(config)){ - bc.text = config; - }else{ - Ext.apply(bc, config); + setValue : function(value){ + this.value = value.clearTime(true); + this.update(this.value); + }, + + /** + * Gets the current selected value of the date field + * @return {Date} The selected date + */ + getValue : function(){ + return this.value; + }, + + // private + focus : function(){ + this.update(this.activeDate); + }, + + // private + onEnable: function(initial){ + Ext.DatePicker.superclass.onEnable.call(this); + this.doDisabled(false); + this.update(initial ? this.value : this.activeDate); + if(Ext.isIE){ + this.el.repaint(); } - var btn = new Ext.Button(bc); - if(!this.buttons){ - this.buttons = []; + + }, + + // private + onDisable : function(){ + Ext.DatePicker.superclass.onDisable.call(this); + this.doDisabled(true); + if(Ext.isIE && !Ext.isIE8){ + /* Really strange problem in IE6/7, when disabled, have to explicitly + * repaint each of the nodes to get them to display correctly, simply + * calling repaint on the main element doesn't appear to be enough. + */ + Ext.each([].concat(this.textNodes, this.el.query('th span')), function(el){ + Ext.fly(el).repaint(); + }); } - this.buttons.push(btn); - return btn; }, // private - addTool : function(){ - if(!this.rendered){ - if(!this.tools){ - this.tools = []; - } - Ext.each(arguments, function(arg){ - this.tools.push(arg) - }, this); - return; + doDisabled : function(disabled){ + this.keyNav.setDisabled(disabled); + this.prevRepeater.setDisabled(disabled); + this.nextRepeater.setDisabled(disabled); + if(this.showToday){ + this.todayKeyListener.setDisabled(disabled); + this.todayBtn.setDisabled(disabled); } - // nowhere to render tools! - if(!this[this.toolTarget]){ - return; + }, + + // private + onRender : function(container, position){ + var m = [ + '']; + for(var i = 0; i < 6; i++){ + buf.push( + '
' + ); + this.monthPicker.update(buf.join('')); + + this.mon(this.monthPicker, 'click', this.onMonthClick, this); + this.mon(this.monthPicker, 'dblclick', this.onMonthDblClick, this); + + this.mpMonths = this.monthPicker.select('td.x-date-mp-month'); + this.mpYears = this.monthPicker.select('td.x-date-mp-year'); + + this.mpMonths.each(function(m, a, i){ + i += 1; + if((i%2) === 0){ + m.dom.xmonth = 5 + Math.round(i * 0.5); + }else{ + m.dom.xmonth = Math.round((i-1) * 0.5); + } }); - this.syncHeight(); } }, - syncHeight : function(){ - var h = this.toolbarHeight, - bd = this.body, - lsh = this.lastSize.height; - - if(this.autoHeight || !Ext.isDefined(lsh) || lsh == 'auto'){ - return; - } - - - if(h != this.getToolbarHeight()){ - h = Math.max(0, this.adjustBodyHeight(lsh - this.getFrameHeight())); - bd.setHeight(h); - sz = bd.getSize(); - this.toolbarHeight = this.getToolbarHeight(); - this.onBodyResize(sz.width, sz.height); + // private + showMonthPicker : function(){ + if(!this.disabled){ + this.createMonthPicker(); + var size = this.el.getSize(); + this.monthPicker.setSize(size); + this.monthPicker.child('table').setSize(size); + + this.mpSelMonth = (this.activeDate || this.value).getMonth(); + this.updateMPMonth(this.mpSelMonth); + this.mpSelYear = (this.activeDate || this.value).getFullYear(); + this.updateMPYear(this.mpSelYear); + + this.monthPicker.slideIn('t', {duration:0.2}); } }, // private - onShow : function(){ - if(this.floating){ - return this.el.show(); + updateMPYear : function(y){ + this.mpyear = y; + var ys = this.mpYears.elements; + for(var i = 1; i <= 10; i++){ + var td = ys[i-1], y2; + if((i%2) === 0){ + y2 = y + Math.round(i * 0.5); + td.firstChild.innerHTML = y2; + td.xyear = y2; + }else{ + y2 = y - (5-Math.round(i * 0.5)); + td.firstChild.innerHTML = y2; + td.xyear = y2; + } + this.mpYears.item(i-1)[y2 == this.mpSelYear ? 'addClass' : 'removeClass']('x-date-mp-sel'); } - Ext.Panel.superclass.onShow.call(this); }, // private - onHide : function(){ - if(this.floating){ - return this.el.hide(); - } - Ext.Panel.superclass.onHide.call(this); + updateMPMonth : function(sm){ + this.mpMonths.each(function(m, a, i){ + m[m.dom.xmonth == sm ? 'addClass' : 'removeClass']('x-date-mp-sel'); + }); }, // private - createToolHandler : function(t, tc, overCls, panel){ - return function(e){ - t.removeClass(overCls); - if(tc.stopEvent !== false){ - e.stopEvent(); - } - if(tc.handler){ - tc.handler.call(tc.scope || t, e, t, panel, tc); - } - }; + selectMPMonth : function(m){ + }, // private - afterRender : function(){ - if(this.floating && !this.hidden){ - this.el.show(); + onMonthClick : function(e, t){ + e.stopEvent(); + var el = new Ext.Element(t), pn; + if(el.is('button.x-date-mp-cancel')){ + this.hideMonthPicker(); } - if(this.title){ - this.setTitle(this.title); + else if(el.is('button.x-date-mp-ok')){ + var d = new Date(this.mpSelYear, this.mpSelMonth, (this.activeDate || this.value).getDate()); + if(d.getMonth() != this.mpSelMonth){ + // 'fix' the JS rolling date conversion if needed + d = new Date(this.mpSelYear, this.mpSelMonth, 1).getLastDateOfMonth(); + } + this.update(d); + this.hideMonthPicker(); } - this.setAutoScroll(); - if(this.html){ - this.body.update(Ext.isObject(this.html) ? - Ext.DomHelper.markup(this.html) : - this.html); - delete this.html; + else if((pn = el.up('td.x-date-mp-month', 2))){ + this.mpMonths.removeClass('x-date-mp-sel'); + pn.addClass('x-date-mp-sel'); + this.mpSelMonth = pn.dom.xmonth; } - if(this.contentEl){ - var ce = Ext.getDom(this.contentEl); - Ext.fly(ce).removeClass(['x-hidden', 'x-hide-display']); - this.body.dom.appendChild(ce); + else if((pn = el.up('td.x-date-mp-year', 2))){ + this.mpYears.removeClass('x-date-mp-sel'); + pn.addClass('x-date-mp-sel'); + this.mpSelYear = pn.dom.xyear; } - if(this.collapsed){ - this.collapsed = false; - this.collapse(false); + else if(el.is('a.x-date-mp-prev')){ + this.updateMPYear(this.mpyear-10); } - Ext.Panel.superclass.afterRender.call(this); // do sizing calcs last - this.initEvents(); - }, - - // private - setAutoScroll : function(){ - if(this.rendered && this.autoScroll){ - var el = this.body || this.el; - if(el){ - el.setOverflow('auto'); - } + else if(el.is('a.x-date-mp-next')){ + this.updateMPYear(this.mpyear+10); } }, // private - getKeyMap : function(){ - if(!this.keyMap){ - this.keyMap = new Ext.KeyMap(this.el, this.keys); + onMonthDblClick : function(e, t){ + e.stopEvent(); + var el = new Ext.Element(t), pn; + if((pn = el.up('td.x-date-mp-month', 2))){ + this.update(new Date(this.mpSelYear, pn.dom.xmonth, (this.activeDate || this.value).getDate())); + this.hideMonthPicker(); + } + else if((pn = el.up('td.x-date-mp-year', 2))){ + this.update(new Date(pn.dom.xyear, this.mpSelMonth, (this.activeDate || this.value).getDate())); + this.hideMonthPicker(); } - return this.keyMap; }, // private - initEvents : function(){ - if(this.keys){ - this.getKeyMap(); - } - if(this.draggable){ - this.initDraggable(); - } - if(this.toolbars.length > 0){ - Ext.each(this.toolbars, function(tb){ - tb.doLayout(); - tb.on({ - scope: this, - afterlayout: this.syncHeight, - remove: this.syncHeight - }); - }, this); - if(!this.ownerCt){ - this.syncHeight(); + hideMonthPicker : function(disableAnim){ + if(this.monthPicker){ + if(disableAnim === true){ + this.monthPicker.hide(); + }else{ + this.monthPicker.slideOut('t', {duration:0.2}); } } }, // private - initDraggable : function(){ - /** - *', Date.getShortMonthName(i), ' ', + '', Date.getShortMonthName(i + 6), ' ', + i === 0 ? + '' + ); + } + buf.push( + ' If this Panel is configured {@link #draggable}, this property will contain - * an instance of {@link Ext.dd.DragSource} which handles dragging the Panel.
- * The developer must provide implementations of the abstract methods of {@link Ext.dd.DragSource} - * in order to supply behaviour for each stage of the drag/drop process. See {@link #draggable}. - * @type Ext.dd.DragSource. - * @property dd - */ - this.dd = new Ext.Panel.DD(this, Ext.isBoolean(this.draggable) ? null : this.draggable); + showPrevMonth : function(e){ + this.update(this.activeDate.add('mo', -1)); }, // private - beforeEffect : function(anim){ - if(this.floating){ - this.el.beforeAction(); - } - if(anim !== false){ - this.el.addClass('x-panel-animated'); - } + showNextMonth : function(e){ + this.update(this.activeDate.add('mo', 1)); }, // private - afterEffect : function(anim){ - this.syncShadow(); - if(anim !== false){ - this.el.removeClass('x-panel-animated'); - } - }, - - // private - wraps up an animation param with internal callbacks - createEffect : function(a, cb, scope){ - var o = { - scope:scope, - block:true - }; - if(a === true){ - o.callback = cb; - return o; - }else if(!a.callback){ - o.callback = cb; - }else { // wrap it up - o.callback = function(){ - cb.call(scope); - Ext.callback(a.callback, a.scope); - }; - } - return Ext.applyIf(o, a); - }, - - /** - * Collapses the panel body so that it becomes hidden. Fires the {@link #beforecollapse} event which will - * cancel the collapse action if it returns false. - * @param {Boolean} animate True to animate the transition, else false (defaults to the value of the - * {@link #animCollapse} panel config) - * @return {Ext.Panel} this - */ - collapse : function(animate){ - if(this.collapsed || this.el.hasFxBlock() || this.fireEvent('beforecollapse', this, animate) === false){ - return; - } - var doAnim = animate === true || (animate !== false && this.animCollapse); - this.beforeEffect(doAnim); - this.onCollapse(doAnim, animate); - return this; + showPrevYear : function(){ + this.update(this.activeDate.add('y', -1)); }, // private - onCollapse : function(doAnim, animArg){ - if(doAnim){ - this[this.collapseEl].slideOut(this.slideAnchor, - Ext.apply(this.createEffect(animArg||true, this.afterCollapse, this), - this.collapseDefaults)); - }else{ - this[this.collapseEl].hide(); - this.afterCollapse(false); - } + showNextYear : function(){ + this.update(this.activeDate.add('y', 1)); }, // private - afterCollapse : function(anim){ - this.collapsed = true; - this.el.addClass(this.collapsedCls); - this.afterEffect(anim); - this.fireEvent('collapse', this); - }, - - /** - * Expands the panel body so that it becomes visible. Fires the {@link #beforeexpand} event which will - * cancel the expand action if it returns false. - * @param {Boolean} animate True to animate the transition, else false (defaults to the value of the - * {@link #animCollapse} panel config) - * @return {Ext.Panel} this - */ - expand : function(animate){ - if(!this.collapsed || this.el.hasFxBlock() || this.fireEvent('beforeexpand', this, animate) === false){ - return; + handleMouseWheel : function(e){ + e.stopEvent(); + if(!this.disabled){ + var delta = e.getWheelDelta(); + if(delta > 0){ + this.showPrevMonth(); + } else if(delta < 0){ + this.showNextMonth(); + } } - var doAnim = animate === true || (animate !== false && this.animCollapse); - this.el.removeClass(this.collapsedCls); - this.beforeEffect(doAnim); - this.onExpand(doAnim, animate); - return this; }, // private - onExpand : function(doAnim, animArg){ - if(doAnim){ - this[this.collapseEl].slideIn(this.slideAnchor, - Ext.apply(this.createEffect(animArg||true, this.afterExpand, this), - this.expandDefaults)); - }else{ - this[this.collapseEl].show(); - this.afterExpand(false); + handleDateClick : function(e, t){ + e.stopEvent(); + if(!this.disabled && t.dateValue && !Ext.fly(t.parentNode).hasClass('x-date-disabled')){ + this.cancelFocus = this.focusOnSelect === false; + this.setValue(new Date(t.dateValue)); + delete this.cancelFocus; + this.fireEvent('select', this, this.value); } }, // private - afterExpand : function(anim){ - this.collapsed = false; - this.afterEffect(anim); - if(Ext.isDefined(this.deferLayout)){ - this.doLayout(true); + selectToday : function(){ + if(this.todayBtn && !this.todayBtn.disabled){ + this.setValue(new Date().clearTime()); + this.fireEvent('select', this, this.value); } - this.fireEvent('expand', this); - }, - - /** - * Shortcut for performing an {@link #expand} or {@link #collapse} based on the current state of the panel. - * @param {Boolean} animate True to animate the transition, else false (defaults to the value of the - * {@link #animCollapse} panel config) - * @return {Ext.Panel} this - */ - toggleCollapse : function(animate){ - this[this.collapsed ? 'expand' : 'collapse'](animate); - return this; }, // private - onDisable : function(){ - if(this.rendered && this.maskDisabled){ - this.el.mask(); - } - Ext.Panel.superclass.onDisable.call(this); - }, + update : function(date, forceRefresh){ + if(this.rendered){ + var vd = this.activeDate, vis = this.isVisible(); + this.activeDate = date; + if(!forceRefresh && vd && this.el){ + var t = date.getTime(); + if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){ + this.cells.removeClass('x-date-selected'); + this.cells.each(function(c){ + if(c.dom.firstChild.dateValue == t){ + c.addClass('x-date-selected'); + if(vis && !this.cancelFocus){ + Ext.fly(c.dom.firstChild).focus(50); + } + return false; + } + }, this); + return; + } + } + var days = date.getDaysInMonth(), + firstOfMonth = date.getFirstDateOfMonth(), + startingPos = firstOfMonth.getDay()-this.startDay; - // private - onEnable : function(){ - if(this.rendered && this.maskDisabled){ - this.el.unmask(); - } - Ext.Panel.superclass.onEnable.call(this); - }, + if(startingPos < 0){ + startingPos += 7; + } + days += startingPos; + + var pm = date.add('mo', -1), + prevStart = pm.getDaysInMonth()-startingPos, + cells = this.cells.elements, + textEls = this.textNodes, + // convert everything to numbers so it's fast + d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart, this.initHour)), + today = new Date().clearTime().getTime(), + sel = date.clearTime(true).getTime(), + min = this.minDate ? this.minDate.clearTime(true) : Number.NEGATIVE_INFINITY, + max = this.maxDate ? this.maxDate.clearTime(true) : Number.POSITIVE_INFINITY, + ddMatch = this.disabledDatesRE, + ddText = this.disabledDatesText, + ddays = this.disabledDays ? this.disabledDays.join('') : false, + ddaysText = this.disabledDaysText, + format = this.format; + + if(this.showToday){ + var td = new Date().clearTime(), + disable = (td < min || td > max || + (ddMatch && format && ddMatch.test(td.dateFormat(format))) || + (ddays && ddays.indexOf(td.getDay()) != -1)); + + if(!this.disabled){ + this.todayBtn.setDisabled(disable); + this.todayKeyListener[disable ? 'disable' : 'enable'](); + } + } - // private - onResize : function(w, h){ - if(Ext.isDefined(w) || Ext.isDefined(h)){ - if(!this.collapsed){ - if(Ext.isNumber(w)){ - w = this.adjustBodyWidth(w - this.getFrameWidth()); - if(this.tbar){ - this.tbar.setWidth(w); - if(this.topToolbar){ - this.topToolbar.setSize(w); - } + var setCellClass = function(cal, cell){ + cell.title = ''; + var t = d.clearTime(true).getTime(); + cell.firstChild.dateValue = t; + if(t == today){ + cell.className += ' x-date-today'; + cell.title = cal.todayText; + } + if(t == sel){ + cell.className += ' x-date-selected'; + if(vis){ + Ext.fly(cell.firstChild).focus(50); } - if(this.bbar){ - this.bbar.setWidth(w); - if(this.bottomToolbar){ - this.bottomToolbar.setSize(w); - } + } + // disabling + if(t < min) { + cell.className = ' x-date-disabled'; + cell.title = cal.minText; + return; + } + if(t > max) { + cell.className = ' x-date-disabled'; + cell.title = cal.maxText; + return; + } + if(ddays){ + if(ddays.indexOf(d.getDay()) != -1){ + cell.title = ddaysText; + cell.className = ' x-date-disabled'; } - if(this.fbar){ - var f = this.fbar, - fWidth = 1, - strict = Ext.isStrict; - if(this.buttonAlign == 'left'){ - fWidth = w - f.container.getFrameWidth('lr'); - }else{ - //center/right alignment off in webkit - if(Ext.isIE || Ext.isWebKit){ - //center alignment ok on webkit. - //right broken in both, center on IE - if(!(this.buttonAlign == 'center' && Ext.isWebKit) && (!strict || (!Ext.isIE8 && strict))){ - (function(){ - f.setWidth(f.getEl().child('.x-toolbar-ct').getWidth()); - }).defer(1); - }else{ - fWidth = 'auto'; - } - }else{ - fWidth = 'auto'; - } - } - f.setWidth(fWidth); + } + if(ddMatch && format){ + var fvalue = d.dateFormat(format); + if(ddMatch.test(fvalue)){ + cell.title = ddText.replace('%0', fvalue); + cell.className = ' x-date-disabled'; } - this.body.setWidth(w); - }else if(w == 'auto'){ - this.body.setWidth(w); } + }; - if(Ext.isNumber(h)){ - h = Math.max(0, this.adjustBodyHeight(h - this.getFrameHeight())); - this.body.setHeight(h); - }else if(h == 'auto'){ - this.body.setHeight(h); - } + var i = 0; + for(; i < startingPos; i++) { + textEls[i].innerHTML = (++prevStart); + d.setDate(d.getDate()+1); + cells[i].className = 'x-date-prevday'; + setCellClass(this, cells[i]); + } + for(; i < days; i++){ + var intDay = i - startingPos + 1; + textEls[i].innerHTML = (intDay); + d.setDate(d.getDate()+1); + cells[i].className = 'x-date-active'; + setCellClass(this, cells[i]); + } + var extraDays = 0; + for(; i < 42; i++) { + textEls[i].innerHTML = (++extraDays); + d.setDate(d.getDate()+1); + cells[i].className = 'x-date-nextday'; + setCellClass(this, cells[i]); + } - if(this.disabled && this.el._mask){ - this.el._mask.setSize(this.el.dom.clientWidth, this.el.getHeight()); - } - }else{ - this.queuedBodySize = {width: w, height: h}; - if(!this.queuedExpand && this.allowQueuedExpand !== false){ - this.queuedExpand = true; - this.on('expand', function(){ - delete this.queuedExpand; - this.onResize(this.queuedBodySize.width, this.queuedBodySize.height); - this.doLayout(); - }, this, {single:true}); + this.mbtn.setText(this.monthNames[date.getMonth()] + ' ' + date.getFullYear()); + + if(!this.internalRender){ + var main = this.el.dom.firstChild, + w = main.offsetWidth; + this.el.setWidth(w + this.el.getBorderWidth('lr')); + Ext.fly(main).setWidth(w); + this.internalRender = true; + // opera does not respect the auto grow header center column + // then, after it gets a width opera refuses to recalculate + // without a second pass + if(Ext.isOpera && !this.secondPass){ + main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + 'px'; + this.secondPass = true; + this.update.defer(10, this, [date]); } } - this.onBodyResize(w, h); } - this.syncShadow(); - }, - - // private - onBodyResize: function(w, h){ - this.fireEvent('bodyresize', this, w, h); }, - + // private - getToolbarHeight: function(){ - var h = 0; + beforeDestroy : function() { if(this.rendered){ - Ext.each(this.toolbars, function(tb){ - h += tb.getHeight(); - }, this); + Ext.destroy( + this.keyNav, + this.monthPicker, + this.eventEl, + this.mbtn, + this.nextRepeater, + this.prevRepeater, + this.cells.el, + this.todayBtn + ); + delete this.textNodes; + delete this.cells.elements; } - return h; - }, + } - // private - adjustBodyHeight : function(h){ - return h; - }, + /** + * @cfg {String} autoEl @hide + */ +}); - // private - adjustBodyWidth : function(w){ - return w; - }, +Ext.reg('datepicker', Ext.DatePicker); +/** + * @class Ext.LoadMask + * A simple utility class for generically masking elements while loading data. If the {@link #store} + * config option is specified, the masking will be automatically synchronized with the store's loading + * process and the mask element will be cached for reuse. For all other elements, this mask will replace the + * element's Updater load indicator and will be destroyed after the initial load. + *Example usage:
+ *
+ * @constructor + * Create a new LoadMask + * @param {Mixed} el The element or DOM node, or its id + * @param {Object} config The config object + */ +Ext.LoadMask = function(el, config){ + this.el = Ext.get(el); + Ext.apply(this, config); + if(this.store){ + this.store.on({ + scope: this, + beforeload: this.onBeforeLoad, + load: this.onLoad, + exception: this.onLoad + }); + this.removeMask = Ext.value(this.removeMask, false); + }else{ + var um = this.el.getUpdater(); + um.showLoadIndicator = false; // disable the default indicator + um.on({ + scope: this, + beforeupdate: this.onBeforeLoad, + update: this.onLoad, + failure: this.onLoad + }); + this.removeMask = Ext.value(this.removeMask, true); + } +}; - // private - onPosition : function(){ - this.syncShadow(); - }, +Ext.LoadMask.prototype = { + /** + * @cfg {Ext.data.Store} store + * Optional Store to which the mask is bound. The mask is displayed when a load request is issued, and + * hidden on either load sucess, or load fail. + */ + /** + * @cfg {Boolean} removeMask + * True to create a single-use mask that is automatically destroyed after loading (useful for page loads), + * False to persist the mask element reference for multiple uses (e.g., for paged data widgets). Defaults to false. + */ + /** + * @cfg {String} msg + * The text to display in a centered loading message box (defaults to 'Loading...') + */ + msg : 'Loading...', + /** + * @cfg {String} msgCls + * The CSS class to apply to the loading message element (defaults to "x-mask-loading") + */ + msgCls : 'x-mask-loading', /** - * Returns the width in pixels of the framing elements of this panel (not including the body width). To - * retrieve the body width see {@link #getInnerWidth}. - * @return {Number} The frame width + * Read-only. True if the mask is currently disabled so that it will not be displayed (defaults to false) + * @type Boolean */ - getFrameWidth : function(){ - var w = this.el.getFrameWidth('lr') + this.bwrap.getFrameWidth('lr'); + disabled: false, - if(this.frame){ - var l = this.bwrap.dom.firstChild; - w += (Ext.fly(l).getFrameWidth('l') + Ext.fly(l.firstChild).getFrameWidth('r')); - w += this.mc.getFrameWidth('lr'); - } - return w; + /** + * Disables the mask to prevent it from being displayed + */ + disable : function(){ + this.disabled = true; }, /** - * Returns the height in pixels of the framing elements of this panel (including any top and bottom bars and - * header and footer elements, but not including the body height). To retrieve the body height see {@link #getInnerHeight}. - * @return {Number} The frame height + * Enables the mask so that it can be displayed */ - getFrameHeight : function(){ - var h = this.el.getFrameWidth('tb') + this.bwrap.getFrameWidth('tb'); - h += (this.tbar ? this.tbar.getHeight() : 0) + - (this.bbar ? this.bbar.getHeight() : 0); + enable : function(){ + this.disabled = false; + }, - if(this.frame){ - h += this.el.dom.firstChild.offsetHeight + this.ft.dom.offsetHeight + this.mc.getFrameWidth('tb'); - }else{ - h += (this.header ? this.header.getHeight() : 0) + - (this.footer ? this.footer.getHeight() : 0); + // private + onLoad : function(){ + this.el.unmask(this.removeMask); + }, + + // private + onBeforeLoad : function(){ + if(!this.disabled){ + this.el.mask(this.msg, this.msgCls); } - return h; }, /** - * Returns the width in pixels of the body element (not including the width of any framing elements). - * For the frame width see {@link #getFrameWidth}. - * @return {Number} The body width + * Show this LoadMask over the configured Element. */ - getInnerWidth : function(){ - return this.getSize().width - this.getFrameWidth(); + show: function(){ + this.onBeforeLoad(); }, /** - * Returns the height in pixels of the body element (not including the height of any framing elements). - * For the frame height see {@link #getFrameHeight}. - * @return {Number} The body height + * Hide this LoadMask. */ - getInnerHeight : function(){ - return this.getSize().height - this.getFrameHeight(); + hide: function(){ + this.onLoad(); }, // private - syncShadow : function(){ - if(this.floating){ - this.el.sync(true); + destroy : function(){ + if(this.store){ + this.store.un('beforeload', this.onBeforeLoad, this); + this.store.un('load', this.onLoad, this); + this.store.un('exception', this.onLoad, this); + }else{ + var um = this.el.getUpdater(); + um.un('beforeupdate', this.onBeforeLoad, this); + um.un('update', this.onLoad, this); + um.un('failure', this.onLoad, this); + } + } +};Ext.ns('Ext.slider'); + +/** + * @class Ext.slider.Thumb + * @extends Object + * Represents a single thumb element on a Slider. This would not usually be created manually and would instead + * be created internally by an {@link Ext.slider.MultiSlider Ext.Slider}. + */ +Ext.slider.Thumb = Ext.extend(Object, { + + /** + * @constructor + * @cfg {Ext.slider.MultiSlider} slider The Slider to render to (required) + */ + constructor: function(config) { + /** + * @property slider + * @type Ext.slider.MultiSlider + * The slider this thumb is contained within + */ + Ext.apply(this, config || {}, { + cls: 'x-slider-thumb', + + /** + * @cfg {Boolean} constrain True to constrain the thumb so that it cannot overlap its siblings + */ + constrain: false + }); + + Ext.slider.Thumb.superclass.constructor.call(this, config); + + if (this.slider.vertical) { + Ext.apply(this, Ext.slider.Thumb.Vertical); } }, - // private - getLayoutTarget : function(){ - return this.body; + /** + * Renders the thumb into a slider + */ + render: function() { + this.el = this.slider.innerEl.insertFirst({cls: this.cls}); + + this.initEvents(); }, /** - *+// Basic mask: +var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."}); +myMask.show(); +Sets the title text for the panel and optionally the {@link #iconCls icon class}.
- *In order to be able to set the title, a header element must have been created - * for the Panel. This is triggered either by configuring the Panel with a non-blank
- * @param {String} title The title text to set - * @param {String} iconCls (optional) {@link #iconCls iconCls} A user-defined CSS class that provides the icon image for this panel + * Enables the thumb if it is currently disabled */ - setTitle : function(title, iconCls){ - this.title = title; - if(this.header && this.headerAsText){ - this.header.child('span').update(title); - } - if(iconCls){ - this.setIconClass(iconCls); - } - this.fireEvent('titlechange', this, title); - return this; + enable: function() { + this.disabled = false; + this.el.removeClass(this.slider.disabledClass); }, /** - * Get the {@link Ext.Updater} for this panel. Enables you to perform Ajax updates of this panel's body. - * @return {Ext.Updater} The Updater + * Disables the thumb if it is currently enabled */ - getUpdater : function(){ - return this.body.getUpdater(); + disable: function() { + this.disabled = true; + this.el.addClass(this.slider.disabledClass); }, - /** - * Loads this content panel immediately with content returned from an XHR call. - * @param {Object/String/Function} config A config object containing any of the following options: -{@link #title}, - * or configuring it with{@link #header}: true.
- * The only required property is url. The optional properties nocache, text and scripts - * are shorthand for disableCaching, indicatorText and loadScripts and are used to set their - * associated property on this panel Updater instance. - * @return {Ext.Panel} this + /** + * Sets up an Ext.dd.DragTracker for this thumb */ - load : function(){ - var um = this.body.getUpdater(); - um.update.apply(um, arguments); - return this; + initEvents: function() { + var el = this.el; + + el.addClassOnOver('x-slider-thumb-over'); + + this.tracker = new Ext.dd.DragTracker({ + onBeforeStart: this.onBeforeDragStart.createDelegate(this), + onStart : this.onDragStart.createDelegate(this), + onDrag : this.onDrag.createDelegate(this), + onEnd : this.onDragEnd.createDelegate(this), + tolerance : 3, + autoStart : 300 + }); + + this.tracker.initEl(el); }, - // private - beforeDestroy : function(){ - if(this.header){ - this.header.removeAllListeners(); - if(this.headerAsText){ - Ext.Element.uncache(this.header.child('span')); - } - } - Ext.Element.uncache( - this.ft, - this.mc, - this.header, - this.tbar, - this.bbar, - this.footer, - this.body, - this.bwrap - ); - if(this.tools){ - for(var k in this.tools){ - Ext.destroy(this.tools[k]); - } - } - if(this.buttons){ - for(var b in this.buttons){ - Ext.destroy(this.buttons[b]); - } - } - if(this.rendered){ - Ext.destroy(this.toolbars); - }else{ - Ext.destroy(this.topToolbar, this.bottomToolbar); + /** + * @private + * This is tied into the internal Ext.dd.DragTracker. If the slider is currently disabled, + * this returns false to disable the DragTracker too. + * @return {Boolean} False if the slider is currently disabled + */ + onBeforeDragStart : function(e) { + if (this.disabled) { + return false; + } else { + this.slider.promoteThumb(this); + return true; } - Ext.Panel.superclass.beforeDestroy.call(this); }, - // private - createClasses : function(){ - this.headerCls = this.baseCls + '-header'; - this.headerTextCls = this.baseCls + '-header-text'; - this.bwrapCls = this.baseCls + '-bwrap'; - this.tbarCls = this.baseCls + '-tbar'; - this.bodyCls = this.baseCls + '-body'; - this.bbarCls = this.baseCls + '-bbar'; - this.footerCls = this.baseCls + '-footer'; + /** + * @private + * This is tied into the internal Ext.dd.DragTracker's onStart template method. Adds the drag CSS class + * to the thumb and fires the 'dragstart' event + */ + onDragStart: function(e){ + this.el.addClass('x-slider-thumb-drag'); + this.dragging = true; + this.dragStartValue = this.value; + + this.slider.fireEvent('dragstart', this.slider, e, this); }, - // private - createGhost : function(cls, useShim, appendTo){ - var el = document.createElement('div'); - el.className = 'x-panel-ghost ' + (cls ? cls : ''); - if(this.header){ - el.appendChild(this.el.dom.firstChild.cloneNode(true)); - } - Ext.fly(el.appendChild(document.createElement('ul'))).setHeight(this.bwrap.getHeight()); - el.style.width = this.el.dom.offsetWidth + 'px';; - if(!appendTo){ - this.container.dom.appendChild(el); - }else{ - Ext.getDom(appendTo).appendChild(el); - } - if(useShim !== false && this.el.useShim !== false){ - var layer = new Ext.Layer({shadow:false, useDisplay:true, constrain:false}, el); - layer.show(); - return layer; - }else{ - return new Ext.Element(el); + /** + * @private + * This is tied into the internal Ext.dd.DragTracker's onDrag template method. This is called every time + * the DragTracker detects a drag movement. It updates the Slider's value using the position of the drag + */ + onDrag: function(e) { + var slider = this.slider, + index = this.index, + newValue = this.getNewValue(); + + if (this.constrain) { + var above = slider.thumbs[index + 1], + below = slider.thumbs[index - 1]; + + if (below != undefined && newValue <= below.value) newValue = below.value; + if (above != undefined && newValue >= above.value) newValue = above.value; } + + slider.setValue(index, newValue, false); + slider.fireEvent('drag', slider, e, this); }, - // private - doAutoLoad : function(){ - var u = this.body.getUpdater(); - if(this.renderer){ - u.setRenderer(this.renderer); - } - u.update(Ext.isObject(this.autoLoad) ? this.autoLoad : {url: this.autoLoad}); + getNewValue: function() { + var slider = this.slider, + pos = slider.innerEl.translatePoints(this.tracker.getXY()); + + return Ext.util.Format.round(slider.reverseValue(pos.left), slider.decimalPrecision); }, /** - * Retrieve a tool by id. - * @param {String} id - * @return {Object} tool + * @private + * This is tied to the internal Ext.dd.DragTracker's onEnd template method. Removes the drag CSS class and + * fires the 'changecomplete' event with the new value */ - getTool : function(id) { - return this.tools[id]; + onDragEnd: function(e) { + var slider = this.slider, + value = this.value; + + this.el.removeClass('x-slider-thumb-drag'); + + this.dragging = false; + slider.fireEvent('dragend', slider, e); + + if (this.dragStartValue != value) { + slider.fireEvent('changecomplete', slider, value, this); + } + }, + + /** + * @private + * Destroys the thumb + */ + destroy: function(){ + Ext.destroyMembers(this, 'tracker', 'el'); } +}); /** - * @cfg {String} autoEl @hide - */ + * @class Ext.slider.MultiSlider + * @extends Ext.BoxComponent + * Slider which supports vertical or horizontal orientation, keyboard adjustments, configurable snapping, axis clicking and animation. Can be added as an item to any container. Example usage: +-panel.load({ - url: 'your-url.php', - params: {param1: 'foo', param2: 'bar'}, // or a URL encoded string - callback: yourFunction, - scope: yourObject, // optional scope for the callback - discardUrl: false, - nocache: false, - text: 'Loading...', - timeout: 30, - scripts: false -}); -+new Ext.Slider({ + renderTo: Ext.getBody(), + width: 200, + value: 50, + increment: 10, + minValue: 0, + maxValue: 100 }); -Ext.reg('panel', Ext.Panel); -/** - * @class Ext.Editor - * @extends Ext.Component - * A base editor field that handles displaying/hiding on demand and has some built-in sizing and event handling logic. - * @constructor - * Create a new Editor - * @param {Object} config The config object - * @xtype editor - */ -Ext.Editor = function(field, config){ - if(field.field){ - this.field = Ext.create(field.field, 'textfield'); - config = Ext.apply({}, field); // copy so we don't disturb original config - delete config.field; - }else{ - this.field = field; - } - Ext.Editor.superclass.constructor.call(this, config); -}; ++ * Sliders can be created with more than one thumb handle by passing an array of values instead of a single one: ++new Ext.Slider({ + renderTo: Ext.getBody(), + width: 200, + values: [25, 50, 75], + minValue: 0, + maxValue: 100, -Ext.extend(Ext.Editor, Ext.Component, { - /** - * @cfg {Ext.form.Field} field - * The Field object (or descendant) or config object for field - */ + //this defaults to true, setting to false allows the thumbs to pass each other + {@link #constrainThumbs}: false +}); ++ */ +Ext.slider.MultiSlider = Ext.extend(Ext.BoxComponent, { /** - * @cfg {Boolean} allowBlur - * True to {@link #completeEdit complete the editing process} if in edit mode when the - * field is blurred. Defaults to false. + * @cfg {Number} value The value to initialize the slider with. Defaults to minValue. */ /** - * @cfg {Boolean/String} autoSize - * True for the editor to automatically adopt the size of the underlying field, "width" to adopt the width only, - * or "height" to adopt the height only, "none" to always use the field dimensions. (defaults to false) + * @cfg {Boolean} vertical Orient the Slider vertically rather than horizontally, defaults to false. */ + vertical: false, /** - * @cfg {Boolean} revertInvalid - * True to automatically revert the field value and cancel the edit when the user completes an edit and the field - * validation fails (defaults to true) + * @cfg {Number} minValue The minimum value for the Slider. Defaults to 0. */ + minValue: 0, /** - * @cfg {Boolean} ignoreNoChange - * True to skip the edit completion process (no save, no events fired) if the user completes an edit and - * the value has not changed (defaults to false). Applies only to string values - edits for other data types - * will never be ignored. + * @cfg {Number} maxValue The maximum value for the Slider. Defaults to 100. */ + maxValue: 100, /** - * @cfg {Boolean} hideEl - * False to keep the bound element visible while the editor is displayed (defaults to true) + * @cfg {Number/Boolean} decimalPrecision. + *The number of decimal places to which to round the Slider's value. Defaults to 0.
+ *To disable rounding, configure as false.
*/ + decimalPrecision: 0, /** - * @cfg {Mixed} value - * The data value of the underlying field (defaults to "") + * @cfg {Number} keyIncrement How many units to change the Slider when adjusting with keyboard navigation. Defaults to 1. If the increment config is larger, it will be used instead. */ - value : "", + keyIncrement: 1, /** - * @cfg {String} alignment - * The position to align to (see {@link Ext.Element#alignTo} for more details, defaults to "c-c?"). + * @cfg {Number} increment How many units to change the slider when adjusting by drag and drop. Use this option to enable 'snapping'. */ - alignment: "c-c?", + increment: 0, + /** - * @cfg {Boolean/String} shadow "sides" for sides/bottom only, "frame" for 4-way shadow, and "drop" - * for bottom-right shadow (defaults to "frame") + * @private + * @property clickRange + * @type Array + * Determines whether or not a click to the slider component is considered to be a user request to change the value. Specified as an array of [top, bottom], + * the click event's 'top' property is compared to these numbers and the click only considered a change request if it falls within them. e.g. if the 'top' + * value of the click event is 4 or 16, the click is not considered a change request as it falls outside of the [5, 15] range */ - shadow : "frame", + clickRange: [5,15], + /** - * @cfg {Boolean} constrain True to constrain the editor to the viewport + * @cfg {Boolean} clickToChange Determines whether or not clicking on the Slider axis will change the slider. Defaults to true */ - constrain : false, + clickToChange : true, /** - * @cfg {Boolean} swallowKeys Handle the keydown/keypress events so they don't propagate (defaults to true) + * @cfg {Boolean} animate Turn on or off animation. Defaults to true */ - swallowKeys : true, + animate: true, + /** - * @cfg {Boolean} completeOnEnter True to complete the edit when the enter key is pressed. Defaults to true. + * True while the thumb is in a drag operation + * @type Boolean */ - completeOnEnter : true, + dragging: false, + /** - * @cfg {Boolean} cancelOnEsc True to cancel the edit when the escape key is pressed. Defaults to true. + * @cfg {Boolean} constrainThumbs True to disallow thumbs from overlapping one another. Defaults to true */ - cancelOnEsc : true, + constrainThumbs: true, + /** - * @cfg {Boolean} updateEl True to update the innerHTML of the bound element when the update completes (defaults to false) + * @private + * @property topThumbZIndex + * @type Number + * The number used internally to set the z index of the top thumb (see promoteThumb for details) */ - updateEl : false, + topThumbZIndex: 10000, + // private override initComponent : function(){ - Ext.Editor.superclass.initComponent.call(this); + if(!Ext.isDefined(this.value)){ + this.value = this.minValue; + } + + /** + * @property thumbs + * @type Array + * Array containing references to each thumb + */ + this.thumbs = []; + + Ext.slider.MultiSlider.superclass.initComponent.call(this); + + this.keyIncrement = Math.max(this.increment, this.keyIncrement); this.addEvents( /** - * @event beforestartedit - * Fires when editing is initiated, but before the value changes. Editing can be canceled by returning - * false from the handler of this event. - * @param {Editor} this - * @param {Ext.Element} boundEl The underlying element bound to this editor - * @param {Mixed} value The field value being set + * @event beforechange + * Fires before the slider value is changed. By returning false from an event handler, + * you can cancel the event and prevent the slider from changing. + * @param {Ext.Slider} slider The slider + * @param {Number} newValue The new value which the slider is being changed to. + * @param {Number} oldValue The old value which the slider was previously. */ - "beforestartedit", + 'beforechange', + /** - * @event startedit - * Fires when this editor is displayed - * @param {Ext.Element} boundEl The underlying element bound to this editor - * @param {Mixed} value The starting field value + * @event change + * Fires when the slider value is changed. + * @param {Ext.Slider} slider The slider + * @param {Number} newValue The new value which the slider has been changed to. + * @param {Ext.slider.Thumb} thumb The thumb that was changed */ - "startedit", + 'change', + /** - * @event beforecomplete - * Fires after a change has been made to the field, but before the change is reflected in the underlying - * field. Saving the change to the field can be canceled by returning false from the handler of this event. - * Note that if the value has not changed and ignoreNoChange = true, the editing will still end but this - * event will not fire since no edit actually occurred. - * @param {Editor} this - * @param {Mixed} value The current field value - * @param {Mixed} startValue The original field value + * @event changecomplete + * Fires when the slider value is changed by the user and any drag operations have completed. + * @param {Ext.Slider} slider The slider + * @param {Number} newValue The new value which the slider has been changed to. + * @param {Ext.slider.Thumb} thumb The thumb that was changed */ - "beforecomplete", + 'changecomplete', + /** - * @event complete - * Fires after editing is complete and any changed value has been written to the underlying field. - * @param {Editor} this - * @param {Mixed} value The current field value - * @param {Mixed} startValue The original field value + * @event dragstart + * Fires after a drag operation has started. + * @param {Ext.Slider} slider The slider + * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker */ - "complete", + 'dragstart', + /** - * @event canceledit - * Fires after editing has been canceled and the editor's value has been reset. - * @param {Editor} this - * @param {Mixed} value The user-entered field value that was discarded - * @param {Mixed} startValue The original field value that was set back into the editor after cancel + * @event drag + * Fires continuously during the drag operation while the mouse is moving. + * @param {Ext.Slider} slider The slider + * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker */ - "canceledit", + 'drag', + /** - * @event specialkey - * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check - * {@link Ext.EventObject#getKey} to determine which key was pressed. - * @param {Ext.form.Field} this - * @param {Ext.EventObject} e The event object + * @event dragend + * Fires after the drag operation has completed. + * @param {Ext.Slider} slider The slider + * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker */ - "specialkey" + 'dragend' ); - }, - // private - onRender : function(ct, position){ - this.el = new Ext.Layer({ - shadow: this.shadow, - cls: "x-editor", - parentEl : ct, - shim : this.shim, - shadowOffset: this.shadowOffset || 4, - id: this.id, - constrain: this.constrain - }); - if(this.zIndex){ - this.el.setZIndex(this.zIndex); - } - this.el.setStyle("overflow", Ext.isGecko ? "auto" : "hidden"); - if(this.field.msgTarget != 'title'){ - this.field.msgTarget = 'qtip'; - } - this.field.inEditor = true; - this.mon(this.field, { - scope: this, - blur: this.onBlur, - specialkey: this.onSpecialKey - }); - if(this.field.grow){ - this.mon(this.field, "autosize", this.el.sync, this.el, {delay:1}); - } - this.field.render(this.el).show(); - this.field.getEl().dom.name = ''; - if(this.swallowKeys){ - this.field.el.swallowEvent([ - 'keypress', // *** Opera - 'keydown' // *** all other browsers - ]); - } - }, + /** + * @property values + * @type Array + * Array of values to initalize the thumbs with + */ + if (this.values == undefined || Ext.isEmpty(this.values)) this.values = [0]; - // private - onSpecialKey : function(field, e){ - var key = e.getKey(), - complete = this.completeOnEnter && key == e.ENTER, - cancel = this.cancelOnEsc && key == e.ESC; - if(complete || cancel){ - e.stopEvent(); - if(complete){ - this.completeEdit(); - }else{ - this.cancelEdit(); - } - if(field.triggerBlur){ - field.triggerBlur(); - } - } - this.fireEvent('specialkey', field, e); - }, + var values = this.values; - /** - * Starts the editing process and shows the editor. - * @param {Mixed} el The element to edit - * @param {String} value (optional) A value to initialize the editor with. If a value is not provided, it defaults - * to the innerHTML of el. - */ - startEdit : function(el, value){ - if(this.editing){ - this.completeEdit(); - } - this.boundEl = Ext.get(el); - var v = value !== undefined ? value : this.boundEl.dom.innerHTML; - if(!this.rendered){ - this.render(this.parentEl || document.body); + for (var i=0; i < values.length; i++) { + this.addThumb(values[i]); } - if(this.fireEvent("beforestartedit", this, this.boundEl, v) !== false){ - this.startValue = v; - this.field.setValue(v); - this.doAutoSize(); - this.el.alignTo(this.boundEl, this.alignment); - this.editing = true; - this.show(); + + if(this.vertical){ + Ext.apply(this, Ext.slider.Vertical); } }, - // private - doAutoSize : function(){ - if(this.autoSize){ - var sz = this.boundEl.getSize(), - fs = this.field.getSize(); + /** + * Creates a new thumb and adds it to the slider + * @param {Number} value The initial value to set on the thumb. Defaults to 0 + */ + addThumb: function(value) { + var thumb = new Ext.slider.Thumb({ + value : value, + slider : this, + index : this.thumbs.length, + constrain: this.constrainThumbs + }); + this.thumbs.push(thumb); - switch(this.autoSize){ - case "width": - this.setSize(sz.width, fs.height); - break; - case "height": - this.setSize(fs.width, sz.height); - break; - case "none": - this.setSize(fs.width, fs.height); - break; - default: - this.setSize(sz.width, sz.height); - } - } + //render the thumb now if needed + if (this.rendered) thumb.render(); }, /** - * Sets the height and width of this editor. - * @param {Number} width The new width - * @param {Number} height The new height + * @private + * Moves the given thumb above all other by increasing its z-index. This is called when as drag + * any thumb, so that the thumb that was just dragged is always at the highest z-index. This is + * required when the thumbs are stacked on top of each other at one of the ends of the slider's + * range, which can result in the user not being able to move any of them. + * @param {Ext.slider.Thumb} topThumb The thumb to move to the top */ - setSize : function(w, h){ - delete this.field.lastSize; - this.field.setSize(w, h); - if(this.el){ - if(Ext.isGecko2 || Ext.isOpera){ - // prevent layer scrollbars - this.el.setSize(w, h); + promoteThumb: function(topThumb) { + var thumbs = this.thumbs, + zIndex, thumb; + + for (var i = 0, j = thumbs.length; i < j; i++) { + thumb = thumbs[i]; + + if (thumb == topThumb) { + zIndex = this.topThumbZIndex; + } else { + zIndex = ''; } - this.el.sync(); + + thumb.el.setStyle('zIndex', zIndex); + } + }, + + // private override + onRender : function() { + this.autoEl = { + cls: 'x-slider ' + (this.vertical ? 'x-slider-vert' : 'x-slider-horz'), + cn : { + cls: 'x-slider-end', + cn : { + cls:'x-slider-inner', + cn : [{tag:'a', cls:'x-slider-focus', href:"#", tabIndex: '-1', hidefocus:'on'}] + } + } + }; + + Ext.slider.MultiSlider.superclass.onRender.apply(this, arguments); + + this.endEl = this.el.first(); + this.innerEl = this.endEl.first(); + this.focusEl = this.innerEl.child('.x-slider-focus'); + + //render each thumb + for (var i=0; i < this.thumbs.length; i++) { + this.thumbs[i].render(); } + + //calculate the size of half a thumb + var thumb = this.innerEl.child('.x-slider-thumb'); + this.halfThumb = (this.vertical ? thumb.getHeight() : thumb.getWidth()) / 2; + + this.initEvents(); }, /** - * Realigns the editor to the bound field based on the current alignment config value. + * @private + * Adds keyboard and mouse listeners on this.el. Ignores click events on the internal focus element. + * Creates a new DragTracker which is used to control what happens when the user drags the thumb around. */ - realign : function(){ - this.el.alignTo(this.boundEl, this.alignment); + initEvents : function(){ + this.mon(this.el, { + scope : this, + mousedown: this.onMouseDown, + keydown : this.onKeyDown + }); + + this.focusEl.swallowEvent("click", true); }, /** - * Ends the editing process, persists the changed value to the underlying field, and hides the editor. - * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after edit (defaults to false) + * @private + * Mousedown handler for the slider. If the clickToChange is enabled and the click was not on the draggable 'thumb', + * this calculates the new value of the slider and tells the implementation (Horizontal or Vertical) to move the thumb + * @param {Ext.EventObject} e The click event */ - completeEdit : function(remainVisible){ - if(!this.editing){ - return; - } - var v = this.getValue(); - if(!this.field.isValid()){ - if(this.revertInvalid !== false){ - this.cancelEdit(remainVisible); - } + onMouseDown : function(e){ + if(this.disabled){ return; } - if(String(v) === String(this.startValue) && this.ignoreNoChange){ - this.hideEdit(remainVisible); - return; + + //see if the click was on any of the thumbs + var thumbClicked = false; + for (var i=0; i < this.thumbs.length; i++) { + thumbClicked = thumbClicked || e.target == this.thumbs[i].el.dom; } - if(this.fireEvent("beforecomplete", this, v, this.startValue) !== false){ - v = this.getValue(); - if(this.updateEl && this.boundEl){ - this.boundEl.update(v); - } - this.hideEdit(remainVisible); - this.fireEvent("complete", this, v, this.startValue); + + if (this.clickToChange && !thumbClicked) { + var local = this.innerEl.translatePoints(e.getXY()); + this.onClickChange(local); } + this.focus(); }, - // private - onShow : function(){ - this.el.show(); - if(this.hideEl !== false){ - this.boundEl.hide(); + /** + * @private + * Moves the thumb to the indicated position. Note that a Vertical implementation is provided in Ext.slider.Vertical. + * Only changes the value if the click was within this.clickRange. + * @param {Object} local Object containing top and left values for the click event. + */ + onClickChange : function(local) { + if (local.top > this.clickRange[0] && local.top < this.clickRange[1]) { + //find the nearest thumb to the click event + var thumb = this.getNearest(local, 'left'), + index = thumb.index; + + this.setValue(index, Ext.util.Format.round(this.reverseValue(local.left), this.decimalPrecision), undefined, true); } - this.field.show().focus(false, true); - this.fireEvent("startedit", this.boundEl, this.startValue); }, /** - * Cancels the editing process and hides the editor without persisting any changes. The field value will be - * reverted to the original starting value. - * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after - * cancel (defaults to false) + * @private + * Returns the nearest thumb to a click event, along with its distance + * @param {Object} local Object containing top and left values from a click event + * @param {String} prop The property of local to compare on. Use 'left' for horizontal sliders, 'top' for vertical ones + * @return {Object} The closest thumb object and its distance from the click event */ - cancelEdit : function(remainVisible){ - if(this.editing){ - var v = this.getValue(); - this.setValue(this.startValue); - this.hideEdit(remainVisible); - this.fireEvent("canceledit", this, v, this.startValue); + getNearest: function(local, prop) { + var localValue = prop == 'top' ? this.innerEl.getHeight() - local[prop] : local[prop], + clickValue = this.reverseValue(localValue), + nearestDistance = (this.maxValue - this.minValue) + 5, //add a small fudge for the end of the slider + index = 0, + nearest = null; + + for (var i=0; i < this.thumbs.length; i++) { + var thumb = this.thumbs[i], + value = thumb.value, + dist = Math.abs(value - clickValue); + + if (Math.abs(dist <= nearestDistance)) { + nearest = thumb; + index = i; + nearestDistance = dist; + } } + return nearest; }, - - // private - hideEdit: function(remainVisible){ - if(remainVisible !== true){ - this.editing = false; - this.hide(); + + /** + * @private + * Handler for any keypresses captured by the slider. If the key is UP or RIGHT, the thumb is moved along to the right + * by this.keyIncrement. If DOWN or LEFT it is moved left. Pressing CTRL moves the slider to the end in either direction + * @param {Ext.EventObject} e The Event object + */ + onKeyDown : function(e){ + /* + * The behaviour for keyboard handling with multiple thumbs is currently undefined. + * There's no real sane default for it, so leave it like this until we come up + * with a better way of doing it. + */ + if(this.disabled || this.thumbs.length !== 1){ + e.preventDefault(); + return; + } + var k = e.getKey(), + val; + switch(k){ + case e.UP: + case e.RIGHT: + e.stopEvent(); + val = e.ctrlKey ? this.maxValue : this.getValue(0) + this.keyIncrement; + this.setValue(0, val, undefined, true); + break; + case e.DOWN: + case e.LEFT: + e.stopEvent(); + val = e.ctrlKey ? this.minValue : this.getValue(0) - this.keyIncrement; + this.setValue(0, val, undefined, true); + break; + default: + e.preventDefault(); } }, - // private - onBlur : function(){ - if(this.allowBlur !== true && this.editing){ - this.completeEdit(); + /** + * @private + * If using snapping, this takes a desired new value and returns the closest snapped + * value to it + * @param {Number} value The unsnapped value + * @return {Number} The value of the nearest snap target + */ + doSnap : function(value){ + if (!(this.increment && value)) { + return value; + } + var newValue = value, + inc = this.increment, + m = value % inc; + if (m != 0) { + newValue -= m; + if (m * 2 >= inc) { + newValue += inc; + } else if (m * 2 < -inc) { + newValue -= inc; + } } + return newValue.constrain(this.minValue, this.maxValue); }, // private - onHide : function(){ - if(this.editing){ - this.completeEdit(); - return; - } - this.field.blur(); - if(this.field.collapse){ - this.field.collapse(); - } - this.el.hide(); - if(this.hideEl !== false){ - this.boundEl.show(); - } + afterRender : function(){ + Ext.slider.MultiSlider.superclass.afterRender.apply(this, arguments); + + for (var i=0; i < this.thumbs.length; i++) { + var thumb = this.thumbs[i]; + + if (thumb.value !== undefined) { + var v = this.normalizeValue(thumb.value); + + if (v !== thumb.value) { + // delete this.value; + this.setValue(i, v, false); + } else { + this.moveThumb(i, this.translateValue(v), false); + } + } + }; }, /** - * Sets the data value of the editor - * @param {Mixed} value Any valid value supported by the underlying field + * @private + * Returns the ratio of pixels to mapped values. e.g. if the slider is 200px wide and maxValue - minValue is 100, + * the ratio is 2 + * @return {Number} The ratio of pixels to mapped values */ - setValue : function(v){ - this.field.setValue(v); + getRatio : function(){ + var w = this.innerEl.getWidth(), + v = this.maxValue - this.minValue; + return v == 0 ? w : (w/v); }, /** - * Gets the data value of the editor - * @return {Mixed} The data value + * @private + * Returns a snapped, constrained value when given a desired value + * @param {Number} value Raw number value + * @return {Number} The raw value rounded to the correct d.p. and constrained within the set max and min values */ - getValue : function(){ - return this.field.getValue(); + normalizeValue : function(v){ + v = this.doSnap(v); + v = Ext.util.Format.round(v, this.decimalPrecision); + v = v.constrain(this.minValue, this.maxValue); + return v; }, - beforeDestroy : function(){ - Ext.destroy(this.field); - this.field = null; - } -}); -Ext.reg('editor', Ext.Editor);/** - * @class Ext.ColorPalette - * @extends Ext.Component - * Simple color palette class for choosing colors. The palette can be rendered to any container.
- * Here's an example of typical usage: - *
- * @constructor - * Create a new ColorPalette - * @param {Object} config The config object - * @xtype colorpalette - */ -Ext.ColorPalette = function(config){ - Ext.ColorPalette.superclass.constructor.call(this, config); - this.addEvents( - /** - * @event select - * Fires when a color is selected - * @param {ColorPalette} this - * @param {String} color The 6-digit color hex code (without the # symbol) - */ - 'select' - ); - - if(this.handler){ - this.on('select', this.handler, this.scope, true); - } -}; -Ext.extend(Ext.ColorPalette, Ext.Component, { - /** - * @cfg {String} tpl An existing XTemplate instance to be used in place of the default template for rendering the component. - */ /** - * @cfg {String} itemCls - * The CSS class to apply to the containing element (defaults to 'x-color-palette') + * Sets the minimum value for the slider instance. If the current value is less than the + * minimum value, the current value will be changed. + * @param {Number} val The new minimum value */ - itemCls : 'x-color-palette', + setMinValue : function(val){ + this.minValue = val; + var i = 0, + thumbs = this.thumbs, + len = thumbs.length, + t; + + for(; i < len; ++i){ + t = thumbs[i]; + t.value = t.value < val ? val : t.value; + } + this.syncThumb(); + }, + /** - * @cfg {String} value - * The initial color to highlight (should be a valid 6-digit color hex code without the # symbol). Note that - * the hex codes are case-sensitive. + * Sets the maximum value for the slider instance. If the current value is more than the + * maximum value, the current value will be changed. + * @param {Number} val The new maximum value */ - value : null, - clickEvent :'click', - // private - ctype : 'Ext.ColorPalette', + setMaxValue : function(val){ + this.maxValue = val; + var i = 0, + thumbs = this.thumbs, + len = thumbs.length, + t; + + for(; i < len; ++i){ + t = thumbs[i]; + t.value = t.value > val ? val : t.value; + } + this.syncThumb(); + }, /** - * @cfg {Boolean} allowReselect If set to true then reselecting a color that is already selected fires the {@link #select} event + * Programmatically sets the value of the Slider. Ensures that the value is constrained within + * the minValue and maxValue. + * @param {Number} index Index of the thumb to move + * @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue) + * @param {Boolean} animate Turn on or off animation, defaults to true */ - allowReselect : false, + setValue : function(index, v, animate, changeComplete) { + var thumb = this.thumbs[index], + el = thumb.el; - /** - *-var cp = new Ext.ColorPalette({value:'993300'}); // initial selected color -cp.render('my-div'); - -cp.on('select', function(palette, selColor){ - // do something with selColor -}); -An array of 6-digit color hex code strings (without the # symbol). This array can contain any number - * of colors, and each hex code should be unique. The width of the palette is controlled via CSS by adjusting - * the width property of the 'x-color-palette' class (or assigning a custom class), so you can balance the number - * of colors with the width setting until the box is symmetrical.
- *You can override individual colors if needed:
- *
+ v = this.normalizeValue(v); -Or you can provide a custom array of your own for complete control: --var cp = new Ext.ColorPalette(); -cp.colors[0] = 'FF0000'; // change the first box to red -
- * @type Array + if (v !== thumb.value && this.fireEvent('beforechange', this, v, thumb.value, thumb) !== false) { + thumb.value = v; + if(this.rendered){ + this.moveThumb(index, this.translateValue(v), animate !== false); + this.fireEvent('change', this, v, thumb); + if(changeComplete){ + this.fireEvent('changecomplete', this, v, thumb); + } + } + } + }, + + /** + * @private */ - colors : [ - '000000', '993300', '333300', '003300', '003366', '000080', '333399', '333333', - '800000', 'FF6600', '808000', '008000', '008080', '0000FF', '666699', '808080', - 'FF0000', 'FF9900', '99CC00', '339966', '33CCCC', '3366FF', '800080', '969696', - 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0', - 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', '99CCFF', 'CC99FF', 'FFFFFF' - ], + translateValue : function(v) { + var ratio = this.getRatio(); + return (v * ratio) - (this.minValue * ratio) - this.halfThumb; + }, /** - * @cfg {Function} handler - * Optional. A function that will handle the select event of this palette. - * The handler is passed the following parameters:-var cp = new Ext.ColorPalette(); -cp.colors = ['000000', '993300', '333300']; -+ * @private + * Given a pixel location along the slider, returns the mapped slider value for that pixel. + * E.g. if we have a slider 200px wide with minValue = 100 and maxValue = 500, reverseValue(50) + * returns 200 + * @param {Number} pos The position along the slider to return a mapped value for + * @return {Number} The mapped value for the given position */ + reverseValue : function(pos){ + var ratio = this.getRatio(); + return (pos + (this.minValue * ratio)) / ratio; + }, + /** - * @cfg {Object} scope - * The scope (this reference) in which the-
- *
palette: ColorPaletteThe {@link #palette Ext.ColorPalette}.
- * color: StringThe 6-digit color hex code (without the # symbol).
- *
{@link #handler}- * function will be called. Defaults to this ColorPalette instance. + * @private + * @param {Number} index Index of the thumb to move */ + moveThumb: function(index, v, animate){ + var thumb = this.thumbs[index].el; - // private - onRender : function(container, position){ - var t = this.tpl || new Ext.XTemplate( - '-
- *
picker: DatePickerThe Ext.DatePicker.
- * date: DateThe selected date.
- *
{@link #handler}- * function will be called. Defaults to this DatePicker instance. - */ - /** - * @cfg {String} todayTip - * The tooltip to display for the button that selects the current date (defaults to '{current date} (Spacebar)') - */ - todayTip : '{0} (Spacebar)', - /** - * @cfg {String} minText - * The error text to display if the minDate validation fails (defaults to 'This date is before the minimum date') - */ - minText : 'This date is before the minimum date', - /** - * @cfg {String} maxText - * The error text to display if the maxDate validation fails (defaults to 'This date is after the maximum date') - */ - maxText : 'This date is after the maximum date', - /** - * @cfg {String} format - * The default date format string which can be overriden for localization support. The format must be - * valid according to {@link Date#parseDate} (defaults to 'm/d/y'). - */ - format : 'm/d/y', - /** - * @cfg {String} disabledDaysText - * The tooltip to display when the date falls on a disabled day (defaults to 'Disabled') - */ - disabledDaysText : 'Disabled', - /** - * @cfg {String} disabledDatesText - * The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled') - */ - disabledDatesText : 'Disabled', - /** - * @cfg {Array} monthNames - * An array of textual month names which can be overriden for localization support (defaults to Date.monthNames) - */ - monthNames : Date.monthNames, - /** - * @cfg {Array} dayNames - * An array of textual day names which can be overriden for localization support (defaults to Date.dayNames) - */ - dayNames : Date.dayNames, - /** - * @cfg {String} nextText - * The next month navigation button tooltip (defaults to 'Next Month (Control+Right)') - */ - nextText : 'Next Month (Control+Right)', - /** - * @cfg {String} prevText - * The previous month navigation button tooltip (defaults to 'Previous Month (Control+Left)') - */ - prevText : 'Previous Month (Control+Left)', - /** - * @cfg {String} monthYearText - * The header month selector tooltip (defaults to 'Choose a month (Control+Up/Down to move years)') - */ - monthYearText : 'Choose a month (Control+Up/Down to move years)', - /** - * @cfg {Number} startDay - * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday) - */ - startDay : 0, - /** - * @cfg {Boolean} showToday - * False to hide the footer area containing the Today button and disable the keyboard handler for spacebar - * that selects the current date (defaults to true). - */ - showToday : true, - /** - * @cfg {Date} minDate - * Minimum allowable date (JavaScript date object, defaults to null) - */ - /** - * @cfg {Date} maxDate - * Maximum allowable date (JavaScript date object, defaults to null) - */ - /** - * @cfg {Array} disabledDays - * An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday (defaults to null). - */ - /** - * @cfg {RegExp} disabledDatesRE - * JavaScript regular expression used to disable a pattern of dates (defaults to null). The {@link #disabledDates} - * config will generate this regex internally, but if you specify disabledDatesRE it will take precedence over the - * disabledDates value. - */ - /** - * @cfg {Array} disabledDates - * An array of 'dates' to disable, as strings. These strings will be used to build a dynamic regular - * expression so they are very powerful. Some examples: - *-
- *
- ['03/08/2003', '09/16/2003'] would disable those exact dates - *
- ['03/08', '09/16'] would disable those days for every year - *
- ['^03/08'] would only match the beginning (useful if you are using short years) - *
- ['03/../2006'] would disable every day in March 2006 - *
- ['^03'] would disable every day in every March - *
', - '
'); - - var el = document.createElement('div'); - el.className = 'x-date-picker'; - el.innerHTML = m.join(''); - - container.dom.insertBefore(el, position); - - this.el = Ext.get(el); - this.eventEl = Ext.get(el.firstChild); - - this.prevRepeater = new Ext.util.ClickRepeater(this.el.child('td.x-date-left a'), { - handler: this.showPrevMonth, - scope: this, - preventDefault:true, - stopDefault:true - }); - - this.nextRepeater = new Ext.util.ClickRepeater(this.el.child('td.x-date-right a'), { - handler: this.showNextMonth, - scope: this, - preventDefault:true, - stopDefault:true - }); - - this.monthPicker = this.el.down('div.x-date-mp'); - this.monthPicker.enableDisplayMode('block'); - - this.keyNav = new Ext.KeyNav(this.eventEl, { - 'left' : function(e){ - if(e.ctrlKey){ - this.showPrevMonth(); - }else{ - this.update(this.activeDate.add('d', -1)); - } - }, - - 'right' : function(e){ - if(e.ctrlKey){ - this.showNextMonth(); - }else{ - this.update(this.activeDate.add('d', 1)); - } - }, - - 'up' : function(e){ - if(e.ctrlKey){ - this.showNextYear(); - }else{ - this.update(this.activeDate.add('d', -7)); - } - }, - - 'down' : function(e){ - if(e.ctrlKey){ - this.showPrevYear(); - }else{ - this.update(this.activeDate.add('d', 7)); - } - }, - - 'pageUp' : function(e){ - this.showNextMonth(); - }, - - 'pageDown' : function(e){ - this.showPrevMonth(); - }, - - 'enter' : function(e){ - e.stopPropagation(); - return true; - }, - - scope : this - }); - - this.el.unselectable(); - - this.cells = this.el.select('table.x-date-inner tbody td'); - this.textNodes = this.el.query('table.x-date-inner tbody span'); - - this.mbtn = new Ext.Button({ - text: ' ', - tooltip: this.monthYearText, - renderTo: this.el.child('td.x-date-middle', true) - }); - this.mbtn.el.child('em').addClass('x-btn-arrow'); - - if(this.showToday){ - this.todayKeyListener = this.eventEl.addKeyListener(Ext.EventObject.SPACE, this.selectToday, this); - var today = (new Date()).dateFormat(this.format); - this.todayBtn = new Ext.Button({ - renderTo: this.el.child('td.x-date-bottom', true), - text: String.format(this.todayText, today), - tooltip: String.format(this.todayTip, today), - handler: this.selectToday, - scope: this - }); - } - this.mon(this.eventEl, 'mousewheel', this.handleMouseWheel, this); - this.mon(this.eventEl, 'click', this.handleDateClick, this, {delegate: 'a.x-date-date'}); - this.mon(this.mbtn, 'click', this.showMonthPicker, this); - this.onEnable(true); - }, - - // private - createMonthPicker : function(){ - if(!this.monthPicker.dom.firstChild){ - var buf = [''], - dn = this.dayNames, - i; - for(i = 0; i < 7; i++){ - var d = this.startDay+i; - if(d > 6){ - d = d-7; - } - m.push(' ', dn[d].substr(0,1), ' '); - } - m[m.length] = ''; - for(i = 0; i < 42; i++) { - if(i % 7 === 0 && i !== 0){ - m[m.length] = ' '; - } - m[m.length] = ' '; - } - m.push(' ']; - for(var i = 0; i < 6; i++){ - buf.push( - '
' - ); - this.monthPicker.update(buf.join('')); - - this.mon(this.monthPicker, 'click', this.onMonthClick, this); - this.mon(this.monthPicker, 'dblclick', this.onMonthDblClick, this); - - this.mpMonths = this.monthPicker.select('td.x-date-mp-month'); - this.mpYears = this.monthPicker.select('td.x-date-mp-year'); - - this.mpMonths.each(function(m, a, i){ - i += 1; - if((i%2) === 0){ - m.dom.xmonth = 5 + Math.round(i * 0.5); - }else{ - m.dom.xmonth = Math.round((i-1) * 0.5); - } - }); - } - }, - - // private - showMonthPicker : function(){ - if(!this.disabled){ - this.createMonthPicker(); - var size = this.el.getSize(); - this.monthPicker.setSize(size); - this.monthPicker.child('table').setSize(size); - - this.mpSelMonth = (this.activeDate || this.value).getMonth(); - this.updateMPMonth(this.mpSelMonth); - this.mpSelYear = (this.activeDate || this.value).getFullYear(); - this.updateMPYear(this.mpSelYear); - - this.monthPicker.slideIn('t', {duration:0.2}); - } - }, - - // private - updateMPYear : function(y){ - this.mpyear = y; - var ys = this.mpYears.elements; - for(var i = 1; i <= 10; i++){ - var td = ys[i-1], y2; - if((i%2) === 0){ - y2 = y + Math.round(i * 0.5); - td.firstChild.innerHTML = y2; - td.xyear = y2; - }else{ - y2 = y - (5-Math.round(i * 0.5)); - td.firstChild.innerHTML = y2; - td.xyear = y2; - } - this.mpYears.item(i-1)[y2 == this.mpSelYear ? 'addClass' : 'removeClass']('x-date-mp-sel'); - } - }, - - // private - updateMPMonth : function(sm){ - this.mpMonths.each(function(m, a, i){ - m[m.dom.xmonth == sm ? 'addClass' : 'removeClass']('x-date-mp-sel'); - }); - }, - - // private - selectMPMonth : function(m){ - - }, - - // private - onMonthClick : function(e, t){ - e.stopEvent(); - var el = new Ext.Element(t), pn; - if(el.is('button.x-date-mp-cancel')){ - this.hideMonthPicker(); - } - else if(el.is('button.x-date-mp-ok')){ - var d = new Date(this.mpSelYear, this.mpSelMonth, (this.activeDate || this.value).getDate()); - if(d.getMonth() != this.mpSelMonth){ - // 'fix' the JS rolling date conversion if needed - d = new Date(this.mpSelYear, this.mpSelMonth, 1).getLastDateOfMonth(); - } - this.update(d); - this.hideMonthPicker(); - } - else if((pn = el.up('td.x-date-mp-month', 2))){ - this.mpMonths.removeClass('x-date-mp-sel'); - pn.addClass('x-date-mp-sel'); - this.mpSelMonth = pn.dom.xmonth; - } - else if((pn = el.up('td.x-date-mp-year', 2))){ - this.mpYears.removeClass('x-date-mp-sel'); - pn.addClass('x-date-mp-sel'); - this.mpSelYear = pn.dom.xyear; - } - else if(el.is('a.x-date-mp-prev')){ - this.updateMPYear(this.mpyear-10); - } - else if(el.is('a.x-date-mp-next')){ - this.updateMPYear(this.mpyear+10); - } - }, - - // private - onMonthDblClick : function(e, t){ - e.stopEvent(); - var el = new Ext.Element(t), pn; - if((pn = el.up('td.x-date-mp-month', 2))){ - this.update(new Date(this.mpSelYear, pn.dom.xmonth, (this.activeDate || this.value).getDate())); - this.hideMonthPicker(); - } - else if((pn = el.up('td.x-date-mp-year', 2))){ - this.update(new Date(pn.dom.xyear, this.mpSelMonth, (this.activeDate || this.value).getDate())); - this.hideMonthPicker(); - } - }, - - // private - hideMonthPicker : function(disableAnim){ - if(this.monthPicker){ - if(disableAnim === true){ - this.monthPicker.hide(); - }else{ - this.monthPicker.slideOut('t', {duration:0.2}); - } - } - }, - - // private - showPrevMonth : function(e){ - this.update(this.activeDate.add('mo', -1)); - }, - - // private - showNextMonth : function(e){ - this.update(this.activeDate.add('mo', 1)); - }, - - // private - showPrevYear : function(){ - this.update(this.activeDate.add('y', -1)); - }, - - // private - showNextYear : function(){ - this.update(this.activeDate.add('y', 1)); - }, - - // private - handleMouseWheel : function(e){ - e.stopEvent(); - if(!this.disabled){ - var delta = e.getWheelDelta(); - if(delta > 0){ - this.showPrevMonth(); - } else if(delta < 0){ - this.showNextMonth(); - } - } - }, - - // private - handleDateClick : function(e, t){ - e.stopEvent(); - if(!this.disabled && t.dateValue && !Ext.fly(t.parentNode).hasClass('x-date-disabled')){ - this.setValue(new Date(t.dateValue)); - this.fireEvent('select', this, this.value); - } - }, - - // private - selectToday : function(){ - if(this.todayBtn && !this.todayBtn.disabled){ - this.setValue(new Date().clearTime()); - this.fireEvent('select', this, this.value); - } - }, - - // private - update : function(date, forceRefresh){ - if(this.rendered){ - var vd = this.activeDate, vis = this.isVisible(); - this.activeDate = date; - if(!forceRefresh && vd && this.el){ - var t = date.getTime(); - if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){ - this.cells.removeClass('x-date-selected'); - this.cells.each(function(c){ - if(c.dom.firstChild.dateValue == t){ - c.addClass('x-date-selected'); - if(vis){ - Ext.fly(c.dom.firstChild).focus(50); - } - return false; - } - }); - return; - } - } - var days = date.getDaysInMonth(), - firstOfMonth = date.getFirstDateOfMonth(), - startingPos = firstOfMonth.getDay()-this.startDay; - - if(startingPos < 0){ - startingPos += 7; - } - days += startingPos; - - var pm = date.add('mo', -1), - prevStart = pm.getDaysInMonth()-startingPos, - cells = this.cells.elements, - textEls = this.textNodes, - // convert everything to numbers so it's fast - day = 86400000, - d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime(), - today = new Date().clearTime().getTime(), - sel = date.clearTime(true).getTime(), - min = this.minDate ? this.minDate.clearTime(true) : Number.NEGATIVE_INFINITY, - max = this.maxDate ? this.maxDate.clearTime(true) : Number.POSITIVE_INFINITY, - ddMatch = this.disabledDatesRE, - ddText = this.disabledDatesText, - ddays = this.disabledDays ? this.disabledDays.join('') : false, - ddaysText = this.disabledDaysText, - format = this.format; - - if(this.showToday){ - var td = new Date().clearTime(), - disable = (td < min || td > max || - (ddMatch && format && ddMatch.test(td.dateFormat(format))) || - (ddays && ddays.indexOf(td.getDay()) != -1)); - - if(!this.disabled){ - this.todayBtn.setDisabled(disable); - this.todayKeyListener[disable ? 'disable' : 'enable'](); - } - } - - var setCellClass = function(cal, cell){ - cell.title = ''; - var t = d.getTime(); - cell.firstChild.dateValue = t; - if(t == today){ - cell.className += ' x-date-today'; - cell.title = cal.todayText; - } - if(t == sel){ - cell.className += ' x-date-selected'; - if(vis){ - Ext.fly(cell.firstChild).focus(50); - } - } - // disabling - if(t < min) { - cell.className = ' x-date-disabled'; - cell.title = cal.minText; - return; - } - if(t > max) { - cell.className = ' x-date-disabled'; - cell.title = cal.maxText; - return; - } - if(ddays){ - if(ddays.indexOf(d.getDay()) != -1){ - cell.title = ddaysText; - cell.className = ' x-date-disabled'; - } - } - if(ddMatch && format){ - var fvalue = d.dateFormat(format); - if(ddMatch.test(fvalue)){ - cell.title = ddText.replace('%0', fvalue); - cell.className = ' x-date-disabled'; - } - } - }; - - var i = 0; - for(; i < startingPos; i++) { - textEls[i].innerHTML = (++prevStart); - d.setDate(d.getDate()+1); - cells[i].className = 'x-date-prevday'; - setCellClass(this, cells[i]); - } - for(; i < days; i++){ - var intDay = i - startingPos + 1; - textEls[i].innerHTML = (intDay); - d.setDate(d.getDate()+1); - cells[i].className = 'x-date-active'; - setCellClass(this, cells[i]); - } - var extraDays = 0; - for(; i < 42; i++) { - textEls[i].innerHTML = (++extraDays); - d.setDate(d.getDate()+1); - cells[i].className = 'x-date-nextday'; - setCellClass(this, cells[i]); - } - - this.mbtn.setText(this.monthNames[date.getMonth()] + ' ' + date.getFullYear()); - - if(!this.internalRender){ - var main = this.el.dom.firstChild, - w = main.offsetWidth; - this.el.setWidth(w + this.el.getBorderWidth('lr')); - Ext.fly(main).setWidth(w); - this.internalRender = true; - // opera does not respect the auto grow header center column - // then, after it gets a width opera refuses to recalculate - // without a second pass - if(Ext.isOpera && !this.secondPass){ - main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + 'px'; - this.secondPass = true; - this.update.defer(10, this, [date]); - } - } - } - }, - - // private - beforeDestroy : function() { - if(this.rendered){ - this.keyNav.disable(); - this.keyNav = null; - Ext.destroy( - this.leftClickRpt, - this.rightClickRpt, - this.monthPicker, - this.eventEl, - this.mbtn, - this.todayBtn - ); - } - } - - /** - * @cfg {String} autoEl @hide - */ -}); - -Ext.reg('datepicker', Ext.DatePicker); + +Ext.reg('multislider', Ext.slider.MultiSlider); + /** - * @class Ext.LoadMask - * A simple utility class for generically masking elements while loading data. If the {@link #store} - * config option is specified, the masking will be automatically synchronized with the store's loading - * process and the mask element will be cached for reuse. For all other elements, this mask will replace the - * element's Updater load indicator and will be destroyed after the initial load. - *', Date.getShortMonthName(i), ' ', - '', Date.getShortMonthName(i + 6), ' ', - i === 0 ? - '' - ); - } - buf.push( - ' Example usage:
- *-// Basic mask: -var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."}); -myMask.show(); + * @class Ext.slider.SingleSlider + * @extends Ext.slider.MultiSlider + * Slider which supports vertical or horizontal orientation, keyboard adjustments, + * configurable snapping, axis clicking and animation. Can be added as an item to + * any container. Example usage: +
- * @constructor - * Create a new LoadMask - * @param {Mixed} el The element or DOM node, or its id - * @param {Object} config The config object + * The class Ext.slider.SingleSlider is aliased to Ext.Slider for backwards compatibility. */ -Ext.LoadMask = function(el, config){ - this.el = Ext.get(el); - Ext.apply(this, config); - if(this.store){ - this.store.on('beforeload', this.onBeforeLoad, this); - this.store.on('load', this.onLoad, this); - this.store.on('exception', this.onLoad, this); - this.removeMask = Ext.value(this.removeMask, false); - }else{ - var um = this.el.getUpdater(); - um.showLoadIndicator = false; // disable the default indicator - um.on('beforeupdate', this.onBeforeLoad, this); - um.on('update', this.onLoad, this); - um.on('failure', this.onLoad, this); - this.removeMask = Ext.value(this.removeMask, true); - } -}; +Ext.slider.SingleSlider = Ext.extend(Ext.slider.MultiSlider, { + constructor: function(config) { + config = config || {}; + + Ext.applyIf(config, { + values: [config.value || 0] + }); + + Ext.slider.SingleSlider.superclass.constructor.call(this, config); + }, -Ext.LoadMask.prototype = { /** - * @cfg {Ext.data.Store} store - * Optional Store to which the mask is bound. The mask is displayed when a load request is issued, and - * hidden on either load sucess, or load fail. + * Returns the current value of the slider + * @return {Number} The current value of the slider */ + getValue: function() { + //just returns the value of the first thumb, which should be the only one in a single slider + return Ext.slider.SingleSlider.superclass.getValue.call(this, 0); + }, + /** - * @cfg {Boolean} removeMask - * True to create a single-use mask that is automatically destroyed after loading (useful for page loads), - * False to persist the mask element reference for multiple uses (e.g., for paged data widgets). Defaults to false. + * Programmatically sets the value of the Slider. Ensures that the value is constrained within + * the minValue and maxValue. + * @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue) + * @param {Boolean} animate Turn on or off animation, defaults to true */ + setValue: function(value, animate) { + var args = Ext.toArray(arguments), + len = args.length; + + //this is to maintain backwards compatiblity for sliders with only one thunb. Usually you must pass the thumb + //index to setValue, but if we only have one thumb we inject the index here first if given the multi-slider + //signature without the required index. The index will always be 0 for a single slider + if (len == 1 || (len <= 3 && typeof arguments[1] != 'number')) { + args.unshift(0); + } + + return Ext.slider.SingleSlider.superclass.setValue.apply(this, args); + }, + /** - * @cfg {String} msg - * The text to display in a centered loading message box (defaults to 'Loading...') + * Synchronizes the thumb position to the proper proportion of the total component width based + * on the current slider {@link #value}. This will be called automatically when the Slider + * is resized by a layout, but if it is rendered auto width, this method can be called from + * another resize handler to sync the Slider if necessary. */ - msg : 'Loading...', + syncThumb : function() { + return Ext.slider.SingleSlider.superclass.syncThumb.apply(this, [0].concat(arguments)); + }, + + // private + getNearest : function(){ + // Since there's only 1 thumb, it's always the nearest + return this.thumbs[0]; + } +}); + +//backwards compatibility +Ext.Slider = Ext.slider.SingleSlider; + +Ext.reg('slider', Ext.slider.SingleSlider); + +// private class to support vertical sliders +Ext.slider.Vertical = { + onResize : function(w, h){ + this.innerEl.setHeight(h - (this.el.getPadding('t') + this.endEl.getPadding('b'))); + this.syncThumb(); + }, + + getRatio : function(){ + var h = this.innerEl.getHeight(), + v = this.maxValue - this.minValue; + return h/v; + }, + + moveThumb: function(index, v, animate) { + var thumb = this.thumbs[index], + el = thumb.el; + + if (!animate || this.animate === false) { + el.setBottom(v); + } else { + el.shift({bottom: v, stopFx: true, duration:.35}); + } + }, + + onClickChange : function(local) { + if (local.left > this.clickRange[0] && local.left < this.clickRange[1]) { + var thumb = this.getNearest(local, 'top'), + index = thumb.index, + value = this.minValue + this.reverseValue(this.innerEl.getHeight() - local.top); + + this.setValue(index, Ext.util.Format.round(value, this.decimalPrecision), undefined, true); + } + } +}; + +//private class to support vertical dragging of thumbs within a slider +Ext.slider.Thumb.Vertical = { + getNewValue: function() { + var slider = this.slider, + innerEl = slider.innerEl, + pos = innerEl.translatePoints(this.tracker.getXY()), + bottom = innerEl.getHeight() - pos.top; + + return slider.minValue + Ext.util.Format.round(bottom / slider.getRatio(), slider.decimalPrecision); + } +}; +/** + * @class Ext.ProgressBar + * @extends Ext.BoxComponent + *+new Ext.slider.SingleSlider({ + renderTo: Ext.getBody(), + width: 200, + value: 50, + increment: 10, + minValue: 0, + maxValue: 100 +});An updateable progress bar component. The progress bar supports two different modes: manual and automatic.
+ *In manual mode, you are responsible for showing, updating (via {@link #updateProgress}) and clearing the + * progress bar as needed from your own code. This method is most appropriate when you want to show progress + * throughout an operation that has predictable points of interest at which you can update the control.
+ *In automatic mode, you simply call {@link #wait} and let the progress bar run indefinitely, only clearing it + * once the operation is complete. You can optionally have the progress bar wait for a specific amount of time + * and then clear itself. Automatic mode is most appropriate for timed operations or asynchronous operations in + * which you have no need for indicating intermediate progress.
+ * @cfg {Float} value A floating point value between 0 and 1 (e.g., .5, defaults to 0) + * @cfg {String} text The progress bar text (defaults to '') + * @cfg {Mixed} textEl The element to render the progress text to (defaults to the progress + * bar's internal text element) + * @cfg {String} id The progress bar element's id (defaults to an auto-generated id) + * @xtype progress + */ +Ext.ProgressBar = Ext.extend(Ext.BoxComponent, { + /** + * @cfg {String} baseCls + * The base CSS class to apply to the progress bar's wrapper element (defaults to 'x-progress') + */ + baseCls : 'x-progress', + /** - * @cfg {String} msgCls - * The CSS class to apply to the loading message element (defaults to "x-mask-loading") - */ - msgCls : 'x-mask-loading', + * @cfg {Boolean} animate + * True to animate the progress bar during transitions (defaults to false) + */ + animate : false, + + // private + waitTimer : null, + + // private + initComponent : function(){ + Ext.ProgressBar.superclass.initComponent.call(this); + this.addEvents( + /** + * @event update + * Fires after each update interval + * @param {Ext.ProgressBar} this + * @param {Number} The current progress value + * @param {String} The current progress text + */ + "update" + ); + }, + + // private + onRender : function(ct, position){ + var tpl = new Ext.Template( + '', + '' + ); + + this.el = position ? tpl.insertBefore(position, {cls: this.baseCls}, true) + : tpl.append(ct, {cls: this.baseCls}, true); + + if(this.id){ + this.el.dom.id = this.id; + } + var inner = this.el.dom.firstChild; + this.progressBar = Ext.get(inner.firstChild); + + if(this.textEl){ + //use an external text el + this.textEl = Ext.get(this.textEl); + delete this.textTopEl; + }else{ + //setup our internal layered text els + this.textTopEl = Ext.get(this.progressBar.dom.firstChild); + var textBackEl = Ext.get(inner.childNodes[1]); + this.textTopEl.setStyle("z-index", 99).addClass('x-hidden'); + this.textEl = new Ext.CompositeElement([this.textTopEl.dom.firstChild, textBackEl.dom.firstChild]); + this.textEl.setWidth(inner.offsetWidth); + } + this.progressBar.setHeight(inner.offsetHeight); + }, + + // private + afterRender : function(){ + Ext.ProgressBar.superclass.afterRender.call(this); + if(this.value){ + this.updateProgress(this.value, this.text); + }else{ + this.updateText(this.text); + } + }, /** - * Read-only. True if the mask is currently disabled so that it will not be displayed (defaults to false) - * @type Boolean + * Updates the progress bar value, and optionally its text. If the text argument is not specified, + * any existing text value will be unchanged. To blank out existing text, pass ''. Note that even + * if the progress bar value exceeds 1, it will never automatically reset -- you are responsible for + * determining when the progress is complete and calling {@link #reset} to clear and/or hide the control. + * @param {Float} value (optional) A floating point value between 0 and 1 (e.g., .5, defaults to 0) + * @param {String} text (optional) The string to display in the progress text element (defaults to '') + * @param {Boolean} animate (optional) Whether to animate the transition of the progress bar. If this value is + * not specified, the default for the class is used (default to false) + * @return {Ext.ProgressBar} this */ - disabled: false, + updateProgress : function(value, text, animate){ + this.value = value || 0; + if(text){ + this.updateText(text); + } + if(this.rendered && !this.isDestroyed){ + var w = Math.floor(value*this.el.dom.firstChild.offsetWidth); + this.progressBar.setWidth(w, animate === true || (animate !== false && this.animate)); + if(this.textTopEl){ + //textTopEl should be the same width as the bar so overflow will clip as the bar moves + this.textTopEl.removeClass('x-hidden').setWidth(w); + } + } + this.fireEvent('update', this, value, text); + return this; + }, /** - * Disables the mask to prevent it from being displayed - */ - disable : function(){ - this.disabled = true; + * Initiates an auto-updating progress bar. A duration can be specified, in which case the progress + * bar will automatically reset after a fixed amount of time and optionally call a callback function + * if specified. If no duration is passed in, then the progress bar will run indefinitely and must + * be manually cleared by calling {@link #reset}. The wait method accepts a config object with + * the following properties: + *', + '', + '', + '', + '', + '', + '+Property Type Description +---------- ------------ ---------------------------------------------------------------------- +duration Number The length of time in milliseconds that the progress bar should + run before resetting itself (defaults to undefined, in which case it + will run indefinitely until reset is called) +interval Number The length of time in milliseconds between each progress update + (defaults to 1000 ms) +animate Boolean Whether to animate the transition of the progress bar. If this value is + not specified, the default for the class is used. +increment Number The number of progress update segments to display within the progress + bar (defaults to 10). If the bar reaches the end and is still + updating, it will automatically wrap back to the beginning. +text String Optional text to display in the progress bar element (defaults to ''). +fn Function A callback function to execute after the progress bar finishes auto- + updating. The function will be called with no arguments. This function + will be ignored if duration is not specified since in that case the + progress bar can only be stopped programmatically, so any required function + should be called by the same code after it resets the progress bar. +scope Object The scope that is passed to the callback function (only applies when + duration and fn are both passed). +
+ * + * Example usage: + *
+ * @param {Object} config (optional) Configuration options + * @return {Ext.ProgressBar} this + */ + wait : function(o){ + if(!this.waitTimer){ + var scope = this; + o = o || {}; + this.updateText(o.text); + this.waitTimer = Ext.TaskMgr.start({ + run: function(i){ + var inc = o.increment || 10; + i -= 1; + this.updateProgress(((((i+inc)%inc)+1)*(100/inc))*0.01, null, o.animate); + }, + interval: o.interval || 1000, + duration: o.duration, + onStop: function(){ + if(o.fn){ + o.fn.apply(o.scope || this); + } + this.reset(); + }, + scope: scope + }); + } + return this; }, /** - * Enables the mask so that it can be displayed + * Returns true if the progress bar is currently in a {@link #wait} operation + * @return {Boolean} True if waiting, else false */ - enable : function(){ - this.disabled = false; + isWaiting : function(){ + return this.waitTimer !== null; }, - // private - onLoad : function(){ - this.el.unmask(this.removeMask); + /** + * Updates the progress bar text. If specified, textEl will be updated, otherwise the progress + * bar itself will display the updated text. + * @param {String} text (optional) The string to display in the progress text element (defaults to '') + * @return {Ext.ProgressBar} this + */ + updateText : function(text){ + this.text = text || ' '; + if(this.rendered){ + this.textEl.update(this.text); + } + return this; }, - - // private - onBeforeLoad : function(){ - if(!this.disabled){ - this.el.mask(this.msg, this.msgCls); + + /** + * Synchronizes the inner bar width to the proper proportion of the total componet width based + * on the current progress {@link #value}. This will be called automatically when the ProgressBar + * is resized by a layout, but if it is rendered auto width, this method can be called from + * another resize handler to sync the ProgressBar if necessary. + */ + syncProgressBar : function(){ + if(this.value){ + this.updateProgress(this.value, this.text); } + return this; }, /** - * Show this LoadMask over the configured Element. + * Sets the size of the progress bar. + * @param {Number} width The new width in pixels + * @param {Number} height The new height in pixels + * @return {Ext.ProgressBar} this */ - show: function(){ - this.onBeforeLoad(); + setSize : function(w, h){ + Ext.ProgressBar.superclass.setSize.call(this, w, h); + if(this.textTopEl){ + var inner = this.el.dom.firstChild; + this.textEl.setSize(inner.offsetWidth, inner.offsetHeight); + } + this.syncProgressBar(); + return this; }, /** - * Hide this LoadMask. + * Resets the progress bar value to 0 and text to empty string. If hide = true, the progress + * bar will also be hidden (using the {@link #hideMode} property internally). + * @param {Boolean} hide (optional) True to hide the progress bar (defaults to false) + * @return {Ext.ProgressBar} this */ - hide: function(){ - this.onLoad(); + reset : function(hide){ + this.updateProgress(0); + if(this.textTopEl){ + this.textTopEl.addClass('x-hidden'); + } + this.clearTimer(); + if(hide === true){ + this.hide(); + } + return this; }, - + // private - destroy : function(){ - if(this.store){ - this.store.un('beforeload', this.onBeforeLoad, this); - this.store.un('load', this.onLoad, this); - this.store.un('exception', this.onLoad, this); - }else{ - var um = this.el.getUpdater(); - um.un('beforeupdate', this.onBeforeLoad, this); - um.un('update', this.onLoad, this); - um.un('failure', this.onLoad, this); + clearTimer : function(){ + if(this.waitTimer){ + this.waitTimer.onStop = null; //prevent recursion + Ext.TaskMgr.stop(this.waitTimer); + this.waitTimer = null; + } + }, + + onDestroy: function(){ + this.clearTimer(); + if(this.rendered){ + if(this.textEl.isComposite){ + this.textEl.clear(); + } + Ext.destroyMembers(this, 'textEl', 'progressBar', 'textTopEl'); } + Ext.ProgressBar.superclass.onDestroy.call(this); } -};/** - * @class Ext.Slider - * @extends Ext.BoxComponent - * Slider which supports vertical or horizontal orientation, keyboard adjustments, - * configurable snapping, axis clicking and animation. Can be added as an item to - * any container. Example usage: -+var p = new Ext.ProgressBar({ + renderTo: 'my-el' +}); + +//Wait for 5 seconds, then update the status el (progress bar will auto-reset) +p.wait({ + interval: 100, //bar will move fast! + duration: 5000, + increment: 15, + text: 'Updating...', + scope: this, + fn: function(){ + Ext.fly('status').update('Done!'); + } +}); + +//Or update indefinitely until some async action completes, then reset manually +p.wait(); +myAction.on('complete', function(){ + p.reset(); + Ext.fly('status').update('Done!'); +}); +
- */ -Ext.Slider = Ext.extend(Ext.BoxComponent, { - /** - * @cfg {Number} value The value to initialize the slider with. Defaults to minValue. - */ - /** - * @cfg {Boolean} vertical Orient the Slider vertically rather than horizontally, defaults to false. - */ - vertical: false, - /** - * @cfg {Number} minValue The minimum value for the Slider. Defaults to 0. - */ - minValue: 0, - /** - * @cfg {Number} maxValue The maximum value for the Slider. Defaults to 100. - */ - maxValue: 100, - /** - * @cfg {Number/Boolean} decimalPrecision. - *-new Ext.Slider({ - renderTo: Ext.getBody(), - width: 200, - value: 50, - increment: 10, - minValue: 0, - maxValue: 100 -}); -The number of decimal places to which to round the Slider's value. Defaults to 0.
- *To disable rounding, configure as false.
- */ - decimalPrecision: 0, - /** - * @cfg {Number} keyIncrement How many units to change the Slider when adjusting with keyboard navigation. Defaults to 1. If the increment config is larger, it will be used instead. - */ - keyIncrement: 1, - /** - * @cfg {Number} increment How many units to change the slider when adjusting by drag and drop. Use this option to enable 'snapping'. - */ - increment: 0, - // private - clickRange: [5,15], - /** - * @cfg {Boolean} clickToChange Determines whether or not clicking on the Slider axis will change the slider. Defaults to true - */ - clickToChange : true, - /** - * @cfg {Boolean} animate Turn on or off animation. Defaults to true - */ - animate: true, - - /** - * True while the thumb is in a drag operation - * @type boolean - */ - dragging: false, - - // private override - initComponent : function(){ - if(!Ext.isDefined(this.value)){ - this.value = this.minValue; - } - Ext.Slider.superclass.initComponent.call(this); - this.keyIncrement = Math.max(this.increment, this.keyIncrement); - this.addEvents( - /** - * @event beforechange - * Fires before the slider value is changed. By returning false from an event handler, - * you can cancel the event and prevent the slider from changing. - * @param {Ext.Slider} slider The slider - * @param {Number} newValue The new value which the slider is being changed to. - * @param {Number} oldValue The old value which the slider was previously. - */ - 'beforechange', - /** - * @event change - * Fires when the slider value is changed. - * @param {Ext.Slider} slider The slider - * @param {Number} newValue The new value which the slider has been changed to. - */ - 'change', - /** - * @event changecomplete - * Fires when the slider value is changed by the user and any drag operations have completed. - * @param {Ext.Slider} slider The slider - * @param {Number} newValue The new value which the slider has been changed to. - */ - 'changecomplete', - /** - * @event dragstart - * Fires after a drag operation has started. - * @param {Ext.Slider} slider The slider - * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker - */ - 'dragstart', - /** - * @event drag - * Fires continuously during the drag operation while the mouse is moving. - * @param {Ext.Slider} slider The slider - * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker - */ - 'drag', - /** - * @event dragend - * Fires after the drag operation has completed. - * @param {Ext.Slider} slider The slider - * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker - */ - 'dragend' - ); - - if(this.vertical){ - Ext.apply(this, Ext.Slider.Vertical); - } - }, - - // private override - onRender : function(){ - this.autoEl = { - cls: 'x-slider ' + (this.vertical ? 'x-slider-vert' : 'x-slider-horz'), - cn:{cls:'x-slider-end',cn:{cls:'x-slider-inner',cn:[{cls:'x-slider-thumb'},{tag:'a', cls:'x-slider-focus', href:"#", tabIndex: '-1', hidefocus:'on'}]}} - }; - Ext.Slider.superclass.onRender.apply(this, arguments); - this.endEl = this.el.first(); - this.innerEl = this.endEl.first(); - this.thumb = this.innerEl.first(); - this.halfThumb = (this.vertical ? this.thumb.getHeight() : this.thumb.getWidth())/2; - this.focusEl = this.thumb.next(); - this.initEvents(); - }, - - // private override - initEvents : function(){ - this.thumb.addClassOnOver('x-slider-thumb-over'); - this.mon(this.el, { - scope: this, - mousedown: this.onMouseDown, - keydown: this.onKeyDown - }); - - this.focusEl.swallowEvent("click", true); - - this.tracker = new Ext.dd.DragTracker({ - onBeforeStart: this.onBeforeDragStart.createDelegate(this), - onStart: this.onDragStart.createDelegate(this), - onDrag: this.onDrag.createDelegate(this), - onEnd: this.onDragEnd.createDelegate(this), - tolerance: 3, - autoStart: 300 - }); - this.tracker.initEl(this.thumb); - this.on('beforedestroy', this.tracker.destroy, this.tracker); - }, - - // private override - onMouseDown : function(e){ - if(this.disabled) {return;} - if(this.clickToChange && e.target != this.thumb.dom){ - var local = this.innerEl.translatePoints(e.getXY()); - this.onClickChange(local); - } - this.focus(); - }, - - // private - onClickChange : function(local){ - if(local.top > this.clickRange[0] && local.top < this.clickRange[1]){ - this.setValue(Ext.util.Format.round(this.reverseValue(local.left), this.decimalPrecision), undefined, true); - } - }, - - // private - onKeyDown : function(e){ - if(this.disabled){e.preventDefault();return;} - var k = e.getKey(); - switch(k){ - case e.UP: - case e.RIGHT: - e.stopEvent(); - if(e.ctrlKey){ - this.setValue(this.maxValue, undefined, true); - }else{ - this.setValue(this.value+this.keyIncrement, undefined, true); - } - break; - case e.DOWN: - case e.LEFT: - e.stopEvent(); - if(e.ctrlKey){ - this.setValue(this.minValue, undefined, true); - }else{ - this.setValue(this.value-this.keyIncrement, undefined, true); - } - break; - default: - e.preventDefault(); - } - }, - - // private - doSnap : function(value){ - if(!this.increment || this.increment == 1 || !value) { - return value; - } - var newValue = value, inc = this.increment; - var m = value % inc; - if(m != 0){ - newValue -= m; - if(m * 2 > inc){ - newValue += inc; - }else if(m * 2 < -inc){ - newValue -= inc; - } - } - return newValue.constrain(this.minValue, this.maxValue); - }, - - // private - afterRender : function(){ - Ext.Slider.superclass.afterRender.apply(this, arguments); - if(this.value !== undefined){ - var v = this.normalizeValue(this.value); - if(v !== this.value){ - delete this.value; - this.setValue(v, false); - }else{ - this.moveThumb(this.translateValue(v), false); - } - } - }, - - // private - getRatio : function(){ - var w = this.innerEl.getWidth(); - var v = this.maxValue - this.minValue; - return v == 0 ? w : (w/v); - }, - - // private - normalizeValue : function(v){ - v = this.doSnap(v); - v = Ext.util.Format.round(v, this.decimalPrecision); - v = v.constrain(this.minValue, this.maxValue); - return v; - }, - - /** - * Programmatically sets the value of the Slider. Ensures that the value is constrained within - * the minValue and maxValue. - * @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue) - * @param {Boolean} animate Turn on or off animation, defaults to true - */ - setValue : function(v, animate, changeComplete){ - v = this.normalizeValue(v); - if(v !== this.value && this.fireEvent('beforechange', this, v, this.value) !== false){ - this.value = v; - this.moveThumb(this.translateValue(v), animate !== false); - this.fireEvent('change', this, v); - if(changeComplete){ - this.fireEvent('changecomplete', this, v); - } - } - }, - - // private - translateValue : function(v){ - var ratio = this.getRatio(); - return (v * ratio)-(this.minValue * ratio)-this.halfThumb; - }, - - reverseValue : function(pos){ - var ratio = this.getRatio(); - return (pos+this.halfThumb+(this.minValue * ratio))/ratio; - }, - - // private - moveThumb: function(v, animate){ - if(!animate || this.animate === false){ - this.thumb.setLeft(v); - }else{ - this.thumb.shift({left: v, stopFx: true, duration:.35}); - } - }, - - // private - focus : function(){ - this.focusEl.focus(10); - }, - - // private - onBeforeDragStart : function(e){ - return !this.disabled; - }, - - // private - onDragStart: function(e){ - this.thumb.addClass('x-slider-thumb-drag'); - this.dragging = true; - this.dragStartValue = this.value; - this.fireEvent('dragstart', this, e); - }, - - // private - onDrag: function(e){ - var pos = this.innerEl.translatePoints(this.tracker.getXY()); - this.setValue(Ext.util.Format.round(this.reverseValue(pos.left), this.decimalPrecision), false); - this.fireEvent('drag', this, e); - }, - - // private - onDragEnd: function(e){ - this.thumb.removeClass('x-slider-thumb-drag'); - this.dragging = false; - this.fireEvent('dragend', this, e); - if(this.dragStartValue != this.value){ - this.fireEvent('changecomplete', this, this.value); - } - }, - - // private - onResize : function(w, h){ - this.innerEl.setWidth(w - (this.el.getPadding('l') + this.endEl.getPadding('r'))); - this.syncThumb(); - }, - - //private - onDisable: function(){ - Ext.Slider.superclass.onDisable.call(this); - this.thumb.addClass(this.disabledClass); - if(Ext.isIE){ - //IE breaks when using overflow visible and opacity other than 1. - //Create a place holder for the thumb and display it. - var xy = this.thumb.getXY(); - this.thumb.hide(); - this.innerEl.addClass(this.disabledClass).dom.disabled = true; - if (!this.thumbHolder){ - this.thumbHolder = this.endEl.createChild({cls: 'x-slider-thumb ' + this.disabledClass}); - } - this.thumbHolder.show().setXY(xy); - } - }, - - //private - onEnable: function(){ - Ext.Slider.superclass.onEnable.call(this); - this.thumb.removeClass(this.disabledClass); - if(Ext.isIE){ - this.innerEl.removeClass(this.disabledClass).dom.disabled = false; - if (this.thumbHolder){ - this.thumbHolder.hide(); - } - this.thumb.show(); - this.syncThumb(); - } - }, - - /** - * Synchronizes the thumb position to the proper proportion of the total component width based - * on the current slider {@link #value}. This will be called automatically when the Slider - * is resized by a layout, but if it is rendered auto width, this method can be called from - * another resize handler to sync the Slider if necessary. - */ - syncThumb : function(){ - if(this.rendered){ - this.moveThumb(this.translateValue(this.value)); - } - }, - - /** - * Returns the current value of the slider - * @return {Number} The current value of the slider - */ - getValue : function(){ - return this.value; - } -}); -Ext.reg('slider', Ext.Slider); - -// private class to support vertical sliders -Ext.Slider.Vertical = { - onResize : function(w, h){ - this.innerEl.setHeight(h - (this.el.getPadding('t') + this.endEl.getPadding('b'))); - this.syncThumb(); - }, - - getRatio : function(){ - var h = this.innerEl.getHeight(); - var v = this.maxValue - this.minValue; - return h/v; - }, - - moveThumb: function(v, animate){ - if(!animate || this.animate === false){ - this.thumb.setBottom(v); - }else{ - this.thumb.shift({bottom: v, stopFx: true, duration:.35}); - } - }, - - onDrag: function(e){ - var pos = this.innerEl.translatePoints(this.tracker.getXY()); - var bottom = this.innerEl.getHeight()-pos.top; - this.setValue(this.minValue + Ext.util.Format.round(bottom/this.getRatio(), this.decimalPrecision), false); - this.fireEvent('drag', this, e); - }, - - onClickChange : function(local){ - if(local.left > this.clickRange[0] && local.left < this.clickRange[1]){ - var bottom = this.innerEl.getHeight()-local.top; - this.setValue(this.minValue + Ext.util.Format.round(bottom/this.getRatio(), this.decimalPrecision), undefined, true); - } - } -};/** - * @class Ext.ProgressBar - * @extends Ext.BoxComponent - *An updateable progress bar component. The progress bar supports two different modes: manual and automatic.
- *In manual mode, you are responsible for showing, updating (via {@link #updateProgress}) and clearing the - * progress bar as needed from your own code. This method is most appropriate when you want to show progress - * throughout an operation that has predictable points of interest at which you can update the control.
- *In automatic mode, you simply call {@link #wait} and let the progress bar run indefinitely, only clearing it - * once the operation is complete. You can optionally have the progress bar wait for a specific amount of time - * and then clear itself. Automatic mode is most appropriate for timed operations or asynchronous operations in - * which you have no need for indicating intermediate progress.
- * @cfg {Float} value A floating point value between 0 and 1 (e.g., .5, defaults to 0) - * @cfg {String} text The progress bar text (defaults to '') - * @cfg {Mixed} textEl The element to render the progress text to (defaults to the progress - * bar's internal text element) - * @cfg {String} id The progress bar element's id (defaults to an auto-generated id) - * @xtype progress - */ -Ext.ProgressBar = Ext.extend(Ext.BoxComponent, { - /** - * @cfg {String} baseCls - * The base CSS class to apply to the progress bar's wrapper element (defaults to 'x-progress') - */ - baseCls : 'x-progress', - - /** - * @cfg {Boolean} animate - * True to animate the progress bar during transitions (defaults to false) - */ - animate : false, - - // private - waitTimer : null, - - // private - initComponent : function(){ - Ext.ProgressBar.superclass.initComponent.call(this); - this.addEvents( - /** - * @event update - * Fires after each update interval - * @param {Ext.ProgressBar} this - * @param {Number} The current progress value - * @param {String} The current progress text - */ - "update" - ); - }, - - // private - onRender : function(ct, position){ - var tpl = new Ext.Template( - '', - '' - ); - - this.el = position ? tpl.insertBefore(position, {cls: this.baseCls}, true) - : tpl.append(ct, {cls: this.baseCls}, true); - - if(this.id){ - this.el.dom.id = this.id; - } - var inner = this.el.dom.firstChild; - this.progressBar = Ext.get(inner.firstChild); - - if(this.textEl){ - //use an external text el - this.textEl = Ext.get(this.textEl); - delete this.textTopEl; - }else{ - //setup our internal layered text els - this.textTopEl = Ext.get(this.progressBar.dom.firstChild); - var textBackEl = Ext.get(inner.childNodes[1]); - this.textTopEl.setStyle("z-index", 99).addClass('x-hidden'); - this.textEl = new Ext.CompositeElement([this.textTopEl.dom.firstChild, textBackEl.dom.firstChild]); - this.textEl.setWidth(inner.offsetWidth); - } - this.progressBar.setHeight(inner.offsetHeight); - }, - - // private - afterRender : function(){ - Ext.ProgressBar.superclass.afterRender.call(this); - if(this.value){ - this.updateProgress(this.value, this.text); - }else{ - this.updateText(this.text); - } - }, - - /** - * Updates the progress bar value, and optionally its text. If the text argument is not specified, - * any existing text value will be unchanged. To blank out existing text, pass ''. Note that even - * if the progress bar value exceeds 1, it will never automatically reset -- you are responsible for - * determining when the progress is complete and calling {@link #reset} to clear and/or hide the control. - * @param {Float} value (optional) A floating point value between 0 and 1 (e.g., .5, defaults to 0) - * @param {String} text (optional) The string to display in the progress text element (defaults to '') - * @param {Boolean} animate (optional) Whether to animate the transition of the progress bar. If this value is - * not specified, the default for the class is used (default to false) - * @return {Ext.ProgressBar} this - */ - updateProgress : function(value, text, animate){ - this.value = value || 0; - if(text){ - this.updateText(text); - } - if(this.rendered){ - var w = Math.floor(value*this.el.dom.firstChild.offsetWidth); - this.progressBar.setWidth(w, animate === true || (animate !== false && this.animate)); - if(this.textTopEl){ - //textTopEl should be the same width as the bar so overflow will clip as the bar moves - this.textTopEl.removeClass('x-hidden').setWidth(w); - } - } - this.fireEvent('update', this, value, text); - return this; - }, - - /** - * Initiates an auto-updating progress bar. A duration can be specified, in which case the progress - * bar will automatically reset after a fixed amount of time and optionally call a callback function - * if specified. If no duration is passed in, then the progress bar will run indefinitely and must - * be manually cleared by calling {@link #reset}. The wait method accepts a config object with - * the following properties: - *', - '', - '', - '', - '', - '', - '-Property Type Description ----------- ------------ ---------------------------------------------------------------------- -duration Number The length of time in milliseconds that the progress bar should - run before resetting itself (defaults to undefined, in which case it - will run indefinitely until reset is called) -interval Number The length of time in milliseconds between each progress update - (defaults to 1000 ms) -animate Boolean Whether to animate the transition of the progress bar. If this value is - not specified, the default for the class is used. -increment Number The number of progress update segments to display within the progress - bar (defaults to 10). If the bar reaches the end and is still - updating, it will automatically wrap back to the beginning. -text String Optional text to display in the progress bar element (defaults to ''). -fn Function A callback function to execute after the progress bar finishes auto- - updating. The function will be called with no arguments. This function - will be ignored if duration is not specified since in that case the - progress bar can only be stopped programmatically, so any required function - should be called by the same code after it resets the progress bar. -scope Object The scope that is passed to the callback function (only applies when - duration and fn are both passed). -
- * - * Example usage: - *
- * @param {Object} config (optional) Configuration options - * @return {Ext.ProgressBar} this - */ - wait : function(o){ - if(!this.waitTimer){ - var scope = this; - o = o || {}; - this.updateText(o.text); - this.waitTimer = Ext.TaskMgr.start({ - run: function(i){ - var inc = o.increment || 10; - i -= 1; - this.updateProgress(((((i+inc)%inc)+1)*(100/inc))*0.01, null, o.animate); - }, - interval: o.interval || 1000, - duration: o.duration, - onStop: function(){ - if(o.fn){ - o.fn.apply(o.scope || this); - } - this.reset(); - }, - scope: scope - }); - } - return this; - }, - - /** - * Returns true if the progress bar is currently in a {@link #wait} operation - * @return {Boolean} True if waiting, else false - */ - isWaiting : function(){ - return this.waitTimer !== null; - }, - - /** - * Updates the progress bar text. If specified, textEl will be updated, otherwise the progress - * bar itself will display the updated text. - * @param {String} text (optional) The string to display in the progress text element (defaults to '') - * @return {Ext.ProgressBar} this - */ - updateText : function(text){ - this.text = text || ' '; - if(this.rendered){ - this.textEl.update(this.text); - } - return this; - }, - - /** - * Synchronizes the inner bar width to the proper proportion of the total componet width based - * on the current progress {@link #value}. This will be called automatically when the ProgressBar - * is resized by a layout, but if it is rendered auto width, this method can be called from - * another resize handler to sync the ProgressBar if necessary. - */ - syncProgressBar : function(){ - if(this.value){ - this.updateProgress(this.value, this.text); - } - return this; - }, - - /** - * Sets the size of the progress bar. - * @param {Number} width The new width in pixels - * @param {Number} height The new height in pixels - * @return {Ext.ProgressBar} this - */ - setSize : function(w, h){ - Ext.ProgressBar.superclass.setSize.call(this, w, h); - if(this.textTopEl){ - var inner = this.el.dom.firstChild; - this.textEl.setSize(inner.offsetWidth, inner.offsetHeight); - } - this.syncProgressBar(); - return this; - }, - - /** - * Resets the progress bar value to 0 and text to empty string. If hide = true, the progress - * bar will also be hidden (using the {@link #hideMode} property internally). - * @param {Boolean} hide (optional) True to hide the progress bar (defaults to false) - * @return {Ext.ProgressBar} this - */ - reset : function(hide){ - this.updateProgress(0); - if(this.textTopEl){ - this.textTopEl.addClass('x-hidden'); - } - if(this.waitTimer){ - this.waitTimer.onStop = null; //prevent recursion - Ext.TaskMgr.stop(this.waitTimer); - this.waitTimer = null; - } - if(hide === true){ - this.hide(); - } - return this; - } -}); +}); Ext.reg('progress', Ext.ProgressBar); \ No newline at end of file-var p = new Ext.ProgressBar({ - renderTo: 'my-el' -}); - -//Wait for 5 seconds, then update the status el (progress bar will auto-reset) -p.wait({ - interval: 100, //bar will move fast! - duration: 5000, - increment: 15, - text: 'Updating...', - scope: this, - fn: function(){ - Ext.fly('status').update('Done!'); - } -}); - -//Or update indefinitely until some async action completes, then reset manually -p.wait(); -myAction.on('complete', function(){ - p.reset(); - Ext.fly('status').update('Done!'); -}); -
-
+ *
-
- *
-
+ *
<input> Element (which is what would be returned
* by its {@link #getEl} method, and the trigger button Element.
* This Element is returned as the resizeEl.
+ * @return {Ext.Element} The Element which is to be resized by size managing layouts.
*/
getResizeEl : function(){
return this.resizeEl || this.el;
},
- // protected
- getPositionEl : function(){
- return this.positionEl || this.el;
+ /**
+ * Sets the overflow on the content element of the component.
+ * @param {Boolean} scroll True to allow the Component to auto scroll.
+ * @return {Ext.BoxComponent} this
+ */
+ setAutoScroll : function(scroll){
+ if(this.rendered){
+ this.getContentTarget().setOverflow(scroll ? 'auto' : '');
+ }
+ this.autoScroll = scroll;
+ return this;
},
/**
@@ -3048,6 +3368,7 @@ var myPanel = new Ext.Panel({
this.positionEl = Ext.get(this.positionEl);
}
this.boxReady = true;
+ Ext.isDefined(this.autoScroll) && this.setAutoScroll(this.autoScroll);
this.setSize(this.width, this.height);
if(this.x || this.y){
this.setPosition(this.x, this.y);
@@ -3075,7 +3396,6 @@ var myPanel = new Ext.Panel({
* @param {Number} rawHeight The height that was originally specified
*/
onResize : function(adjWidth, adjHeight, rawWidth, rawHeight){
-
},
/* // protected
@@ -3117,4586 +3437,5709 @@ Ext.reg('box', Ext.BoxComponent);
Ext.Spacer = Ext.extend(Ext.BoxComponent, {
autoEl:'div'
});
-Ext.reg('spacer', Ext.Spacer);/**
- * @class Ext.SplitBar
- * @extends Ext.util.Observable
- * Creates draggable splitter bar functionality from two elements (element to be dragged and element to be resized).
- * - * Usage: - *
-var split = new Ext.SplitBar("elementToDrag", "elementToSize",
- Ext.SplitBar.HORIZONTAL, Ext.SplitBar.LEFT);
-split.setAdapter(new Ext.SplitBar.AbsoluteLayoutAdapter("container"));
-split.minSize = 100;
-split.maxSize = 600;
-split.animate = true;
-split.on('moved', splitterMoved);
-Base class for any {@link Ext.BoxComponent} that may contain other Components. Containers handle the - * basic behavior of containing items, namely adding, inserting and removing items.
- * - *The most commonly used Container classes are {@link Ext.Panel}, {@link Ext.Window} and {@link Ext.TabPanel}. - * If you do not need the capabilities offered by the aforementioned classes you can create a lightweight - * Container to be encapsulated by an HTML element to your specifications by using the - * {@link Ext.Component#autoEl autoEl} config option. This is a useful technique when creating - * embedded {@link Ext.layout.ColumnLayout column} layouts inside {@link Ext.form.FormPanel FormPanels} - * for example.
- * - *The code below illustrates both how to explicitly create a Container, and how to implicitly - * create one using the 'container' xtype:
-// explicitly create a Container
-var embeddedColumns = new Ext.Container({
- autoEl: 'div', // This is the default
- layout: 'column',
- defaults: {
- // implicitly create Container by specifying xtype
- xtype: 'container',
- autoEl: 'div', // This is the default.
- layout: 'form',
- columnWidth: 0.5,
- style: {
- padding: '10px'
- }
- },
-// The two items below will be Ext.Containers, each encapsulated by a <DIV> element.
- items: [{
- items: {
- xtype: 'datefield',
- name: 'startDate',
- fieldLabel: 'Start date'
- }
- }, {
- items: {
- xtype: 'datefield',
- name: 'endDate',
- fieldLabel: 'End date'
- }
- }]
-});Layout
- *Container classes delegate the rendering of child Components to a layout
- * manager class which must be configured into the Container using the
- * {@link #layout} configuration property.
When either specifying child {@link #items} of a Container,
- * or dynamically {@link #add adding} Components to a Container, remember to
- * consider how you wish the Container to arrange those child elements, and
- * whether those child elements need to be sized using one of Ext's built-in
- * {@link #layout} schemes. By default, Containers use the
- * {@link Ext.layout.ContainerLayout ContainerLayout} scheme which only
- * renders child components, appending them one after the other inside the
- * Container, and does not apply any sizing at all.
A common mistake is when a developer neglects to specify a
- * {@link #layout} (e.g. widgets like GridPanels or
- * TreePanels are added to Containers for which no {@link #layout}
- * has been specified). If a Container is left to use the default
- * {@link Ext.layout.ContainerLayout ContainerLayout} scheme, none of its
- * child components will be resized, or changed in any way when the Container
- * is resized.
Certain layout managers allow dynamic addition of child components. - * Those that do include {@link Ext.layout.CardLayout}, - * {@link Ext.layout.AnchorLayout}, {@link Ext.layout.FormLayout}, and - * {@link Ext.layout.TableLayout}. For example:
-// Create the GridPanel.
-var myNewGrid = new Ext.grid.GridPanel({
- store: myStore,
- columns: myColumnModel,
- title: 'Results', // the title becomes the title of the tab
-});
-
-myTabPanel.add(myNewGrid); // {@link Ext.TabPanel} implicitly uses {@link Ext.layout.CardLayout CardLayout}
-myTabPanel.{@link Ext.TabPanel#setActiveTab setActiveTab}(myNewGrid);
- * The example above adds a newly created GridPanel to a TabPanel. Note that - * a TabPanel uses {@link Ext.layout.CardLayout} as its layout manager which - * means all its child items are sized to {@link Ext.layout.FitLayout fit} - * exactly into its client area. - *
Overnesting is a common problem. - * An example of overnesting occurs when a GridPanel is added to a TabPanel - * by wrapping the GridPanel inside a wrapping Panel (that has no - * {@link #layout} specified) and then add that wrapping Panel - * to the TabPanel. The point to realize is that a GridPanel is a - * Component which can be added directly to a Container. If the wrapping Panel - * has no {@link #layout} configuration, then the overnested - * GridPanel will not be sized as expected.
- * - *
Adding via remote configuration
- * - *A server side script can be used to add Components which are generated dynamically on the server. - * An example of adding a GridPanel to a TabPanel where the GridPanel is generated by the server - * based on certain parameters: - *
-// execute an Ajax request to invoke server side script:
-Ext.Ajax.request({
- url: 'gen-invoice-grid.php',
- // send additional parameters to instruct server script
- params: {
- startDate: Ext.getCmp('start-date').getValue(),
- endDate: Ext.getCmp('end-date').getValue()
- },
- // process the response object to add it to the TabPanel:
- success: function(xhr) {
- var newComponent = eval(xhr.responseText); // see discussion below
- myTabPanel.add(newComponent); // add the component to the TabPanel
- myTabPanel.setActiveTab(newComponent);
- },
- failure: function() {
- Ext.Msg.alert("Grid create failed", "Server communication failure");
- }
-});
-The server script needs to return an executable Javascript statement which, when processed - * using eval(), will return either a config object with an {@link Ext.Component#xtype xtype}, - * or an instantiated Component. The server might return this for example:
-(function() {
- function formatDate(value){
- return value ? value.dateFormat('M d, Y') : '';
- };
-
- var store = new Ext.data.Store({
- url: 'get-invoice-data.php',
- baseParams: {
- startDate: '01/01/2008',
- endDate: '01/31/2008'
- },
- reader: new Ext.data.JsonReader({
- record: 'transaction',
- idProperty: 'id',
- totalRecords: 'total'
- }, [
- 'customer',
- 'invNo',
- {name: 'date', type: 'date', dateFormat: 'm/d/Y'},
- {name: 'value', type: 'float'}
- ])
- });
-
- var grid = new Ext.grid.GridPanel({
- title: 'Invoice Report',
- bbar: new Ext.PagingToolbar(store),
- store: store,
- columns: [
- {header: "Customer", width: 250, dataIndex: 'customer', sortable: true},
- {header: "Invoice Number", width: 120, dataIndex: 'invNo', sortable: true},
- {header: "Invoice Date", width: 100, dataIndex: 'date', renderer: formatDate, sortable: true},
- {header: "Value", width: 120, dataIndex: 'value', renderer: 'usMoney', sortable: true}
- ],
- });
- store.load();
- return grid; // return instantiated component
-})();
-When the above code fragment is passed through the eval function in the success handler - * of the Ajax request, the code is executed by the Javascript processor, and the anonymous function - * runs, and returns the instantiated grid component.
- *Note: since the code above is generated by a server script, the baseParams for - * the Store, the metadata to allow generation of the Record layout, and the ColumnModel - * can all be generated into the code since these are all known on the server.
- * - * @xtype container - */ -Ext.Container = Ext.extend(Ext.BoxComponent, { - /** - * @cfg {Boolean} monitorResize - * True to automatically monitor window resize events to handle anything that is sensitive to the current size - * of the viewport. This value is typically managed by the chosen{@link #layout} and should not need
- * to be set manually.
- */
- /**
- * @cfg {String/Object} layout
- * *Important: In order for child items to be correctly sized and
- * positioned, typically a layout manager must be specified through
- * the layout configuration option.
The sizing and positioning of child {@link items} is the responsibility of - * the Container's layout manager which creates and manages the type of layout - * you have in mind. For example:
-new Ext.Window({
- width:300, height: 300,
- layout: 'fit', // explicitly set layout manager: override the default (layout:'auto')
- items: [{
- title: 'Panel inside a Window'
- }]
-}).show();
- * If the {@link #layout} configuration is not explicitly specified for
- * a general purpose container (e.g. Container or Panel) the
- * {@link Ext.layout.ContainerLayout default layout manager} will be used
- * which does nothing but render child components sequentially into the
- * Container (no sizing or positioning will be performed in this situation).
- * Some container classes implicitly specify a default layout
- * (e.g. FormPanel specifies layout:'form'). Other specific
- * purpose classes internally specify/manage their internal layout (e.g.
- * GridPanel, TabPanel, TreePanel, Toolbar, Menu, etc.).
layout may be specified as either as an Object or
- * as a String:
-
- *
- *
-
- *
-layout: {
- type: 'vbox',
- padding: '5',
- align: 'left'
-}
-The layout type to be used for this container. If not specified, - * a default {@link Ext.layout.ContainerLayout} will be created and used.
- *Valid layout type values are:
- *-
- *
Additional layout specific configuration properties may also be - * specified. For complete details regarding the valid config options for - * each layout type, see the layout class corresponding to the type - * specified.
- * - *-
- *
-layout: 'vbox',
-layoutConfig: {
- padding: '5',
- align: 'left'
-}
-The layout type to be used for this container (see list - * of valid layout type values above).
- *
Additional layout specific configuration properties. For complete - * details regarding the valid config options for each layout type, see the - * layout class corresponding to the layout specified.
- *{@link #layout} if {@link #layout}
- * has been specified as a string.
- */
- /**
- * @cfg {Boolean/Number} bufferResize
- * When set to true (50 milliseconds) or a number of milliseconds, the layout assigned for this container will buffer
- * the frequency it calculates and does a re-layout of components. This is useful for heavy containers or containers
- * with a large quantity of sub-components for which frequent layout calls would be expensive. Defaults to 50.
- */
- bufferResize: 50,
-
- /**
- * @cfg {String/Number} activeItem
- * A string component id or the numeric index of the component that should be initially activated within the
- * container's layout on render. For example, activeItem: 'item-1' or activeItem: 0 (index 0 = the first
- * item in the container's collection). activeItem only applies to layout styles that can display
- * items one at a time (like {@link Ext.layout.AccordionLayout}, {@link Ext.layout.CardLayout} and
- * {@link Ext.layout.FitLayout}). Related to {@link Ext.layout.ContainerLayout#activeItem}.
- */
- /**
- * @cfg {Object/Array} items
- * ** IMPORTANT: be sure to {@link #layout specify a layout} if needed ! **
- * A single item, or an array of child Components to be added to this container, - * for example:
- *
-// specifying a single item
-items: {...},
-layout: 'fit', // specify a layout!
-
-// specifying multiple items
-items: [{...}, {...}],
-layout: 'anchor', // specify a layout!
- * Each item may be:
- *-
- *
-
- *
Notes:
- *-
- *
A config object that will be applied to all components added to this container either via the {@link #items} - * config or via the {@link #add} or {@link #insert} methods. The defaults config can contain any - * number of name/value property pairs to be added to each item, and should be valid for the types of items - * being added to the container. For example, to automatically apply padding to the body of each of a set of - * contained {@link Ext.Panel} items, you could pass: defaults: {bodyStyle:'padding:15px'}.
- *
Note: defaults will not be applied to config objects if the option is already specified. - * For example:
-defaults: { // defaults are applied to items, not the container
- autoScroll:true
-},
-items: [
- {
- xtype: 'panel', // defaults do not have precedence over
- id: 'panel1', // options in config objects, so the defaults
- autoScroll: false // will not be applied here, panel1 will be autoScroll:false
- },
- new Ext.Panel({ // defaults do have precedence over options
- id: 'panel2', // options in components, so the defaults
- autoScroll: false // will be applied here, panel2 will be autoScroll:true.
- })
-]
- * The default {@link Ext.Component xtype} of child Components to create in this Container when - * a child item is specified as a raw configuration object, rather than as an instantiated Component.
- *Defaults to 'panel', except {@link Ext.menu.Menu} which defaults to 'menuitem', - * and {@link Ext.Toolbar} and {@link Ext.ButtonGroup} which default to 'button'.
- */ - defaultType : 'panel', - - /** @cfg {String} resizeEvent - * The event to listen to for resizing in layouts. Defaults to 'resize'. - */ - resizeEvent: 'resize', - - /** - * @cfg {Array} bubbleEvents - *An array of events that, when fired, should be bubbled to any parent container. - * Defaults to ['add', 'remove']. - */ - bubbleEvents: ['add', 'remove'], - - // private - initComponent : function(){ - Ext.Container.superclass.initComponent.call(this); - - this.addEvents( - /** - * @event afterlayout - * Fires when the components in this container are arranged by the associated layout manager. - * @param {Ext.Container} this - * @param {ContainerLayout} layout The ContainerLayout implementation for this container - */ - 'afterlayout', - /** - * @event beforeadd - * Fires before any {@link Ext.Component} is added or inserted into the container. - * A handler can return false to cancel the add. - * @param {Ext.Container} this - * @param {Ext.Component} component The component being added - * @param {Number} index The index at which the component will be added to the container's items collection - */ - 'beforeadd', - /** - * @event beforeremove - * Fires before any {@link Ext.Component} is removed from the container. A handler can return - * false to cancel the remove. - * @param {Ext.Container} this - * @param {Ext.Component} component The component being removed - */ - 'beforeremove', - /** - * @event add - * @bubbles - * Fires after any {@link Ext.Component} is added or inserted into the container. - * @param {Ext.Container} this - * @param {Ext.Component} component The component that was added - * @param {Number} index The index at which the component was added to the container's items collection - */ - 'add', - /** - * @event remove - * @bubbles - * Fires after any {@link Ext.Component} is removed from the container. - * @param {Ext.Container} this - * @param {Ext.Component} component The component that was removed - */ - 'remove' - ); - - this.enableBubble(this.bubbleEvents); - - /** - * The collection of components in this container as a {@link Ext.util.MixedCollection} - * @type MixedCollection - * @property items - */ - var items = this.items; - if(items){ - delete this.items; - this.add(items); - } - }, - - // private - initItems : function(){ - if(!this.items){ - this.items = new Ext.util.MixedCollection(false, this.getComponentId); - this.getLayout(); // initialize the layout - } - }, - - // private - setLayout : function(layout){ - if(this.layout && this.layout != layout){ - this.layout.setContainer(null); - } - this.initItems(); - this.layout = layout; - layout.setContainer(this); - }, - - afterRender: function(){ - Ext.Container.superclass.afterRender.call(this); - if(!this.layout){ - this.layout = 'auto'; - } - if(Ext.isObject(this.layout) && !this.layout.layout){ - this.layoutConfig = this.layout; - this.layout = this.layoutConfig.type; - } - if(Ext.isString(this.layout)){ - this.layout = new Ext.Container.LAYOUTS[this.layout.toLowerCase()](this.layoutConfig); - } - this.setLayout(this.layout); - - if(this.activeItem !== undefined){ - var item = this.activeItem; - delete this.activeItem; - this.layout.setActiveItem(item); - } - if(!this.ownerCt){ - // force a layout if no ownerCt is set - this.doLayout(false, true); - } - if(this.monitorResize === true){ - Ext.EventManager.onWindowResize(this.doLayout, this, [false]); - } - }, - - /** - *
Returns the Element to be used to contain the child Components of this Container.
- *An implementation is provided which returns the Container's {@link #getEl Element}, but - * if there is a more complex structure to a Container, this may be overridden to return - * the element into which the {@link #layout layout} renders child Components.
- * @return {Ext.Element} The Element to render child Components into. - */ - getLayoutTarget : function(){ - return this.el; - }, - - // private - used as the key lookup function for the items collection - getComponentId : function(comp){ - return comp.getItemId(); - }, - - /** - *Adds {@link Ext.Component Component}(s) to this Container.
- *Description : - *
-
- *
Notes : - *
-
- *
Either a single component or an Array of components to add. See
- * {@link #items} for additional information.
- * Ext uses lazy rendering, and will only render the inserted Component should - * it become necessary.
- * A Component config object may be passed in order to avoid the overhead of - * constructing a real Component object if lazy rendering might mean that the - * inserted Component will not be rendered immediately. To take advantage of - * this 'lazy instantiation', set the {@link Ext.Component#xtype} config - * property to the registered type of the Component wanted.
- * For a list of all available xtypes, see {@link Ext.Component}. - * @return {Ext.Component} component The Component (or config object) that was - * inserted with the Container's default config values applied. - */ - insert : function(index, comp){ - this.initItems(); - var a = arguments, len = a.length; - if(len > 2){ - for(var i = len-1; i >= 1; --i) { - this.insert(index, a[i]); - } - return; - } - var c = this.lookupComponent(this.applyDefaults(comp)); - index = Math.min(index, this.items.length); - if(this.fireEvent('beforeadd', this, c, index) !== false && this.onBeforeAdd(c) !== false){ - if(c.ownerCt == this){ - this.items.remove(c); - } - this.items.insert(index, c); - c.ownerCt = this; - this.onAdd(c); - this.fireEvent('add', this, c, index); - } - return c; - }, - - // private - applyDefaults : function(c){ - if(this.defaults){ - if(Ext.isString(c)){ - c = Ext.ComponentMgr.get(c); - Ext.apply(c, this.defaults); - }else if(!c.events){ - Ext.applyIf(c, this.defaults); - }else{ - Ext.apply(c, this.defaults); - } - } - return c; - }, - - // private - onBeforeAdd : function(item){ - if(item.ownerCt){ - item.ownerCt.remove(item, false); - } - if(this.hideBorders === true){ - item.border = (item.border === true); - } - }, - - /** - * Removes a component from this container. Fires the {@link #beforeremove} event before removing, then fires - * the {@link #remove} event after the component has been removed. - * @param {Component/String} component The component reference or id to remove. - * @param {Boolean} autoDestroy (optional) True to automatically invoke the removed Component's {@link Ext.Component#destroy} function. - * Defaults to the value of this Container's {@link #autoDestroy} config. - * @return {Ext.Component} component The Component that was removed. - */ - remove : function(comp, autoDestroy){ - this.initItems(); - var c = this.getComponent(comp); - if(c && this.fireEvent('beforeremove', this, c) !== false){ - delete c.ownerCt; - if(this.layout && this.rendered){ - this.layout.onRemove(c); - } - this.onRemove(c); - this.items.remove(c); - if(autoDestroy === true || (autoDestroy !== false && this.autoDestroy)){ - c.destroy(); - } - this.fireEvent('remove', this, c); - } - return c; - }, - - onRemove: function(c){ - // Empty template method - }, - - /** - * Removes all components from this container. - * @param {Boolean} autoDestroy (optional) True to automatically invoke the removed Component's {@link Ext.Component#destroy} function. - * Defaults to the value of this Container's {@link #autoDestroy} config. - * @return {Array} Array of the destroyed components - */ - removeAll: function(autoDestroy){ - this.initItems(); - var item, rem = [], items = []; - this.items.each(function(i){ - rem.push(i); - }); - for (var i = 0, len = rem.length; i < len; ++i){ - item = rem[i]; - this.remove(item, autoDestroy); - if(item.ownerCt !== this){ - items.push(item); - } - } - return items; - }, - - /** - * Examines this container's
{@link #items} property
- * and gets a direct child component of this container.
- * @param {String/Number} comp This parameter may be any of the following:
- * -
- *
For additional information see {@link Ext.util.MixedCollection#get}. - * @return Ext.Component The component (if found). - */ - getComponent : function(comp){ - if(Ext.isObject(comp)){ - comp = comp.getItemId(); - } - return this.items.get(comp); - }, - - // private - lookupComponent : function(comp){ - if(Ext.isString(comp)){ - return Ext.ComponentMgr.get(comp); - }else if(!comp.events){ - return this.createComponent(comp); - } - return comp; - }, - - // private - createComponent : function(config){ - return Ext.create(config, this.defaultType); - }, - - // private - canLayout: function() { - var el = this.getVisibilityEl(); - return el && !el.isStyle("display", "none"); - }, - - - /** - * Force this container's layout to be recalculated. A call to this function is required after adding a new component - * to an already rendered container, or possibly after changing sizing/position properties of child components. - * @param {Boolean} shallow (optional) True to only calc the layout of this component, and let child components auto - * calc layouts as required (defaults to false, which calls doLayout recursively for each subcontainer) - * @param {Boolean} force (optional) True to force a layout to occur, even if the item is hidden. - * @return {Ext.Container} this - */ - doLayout: function(shallow, force){ - var rendered = this.rendered; - forceLayout = force || this.forceLayout; - - if(!this.canLayout() || this.collapsed){ - this.deferLayout = this.deferLayout || !shallow; - if(!forceLayout){ - return; - } - shallow = shallow && !this.deferLayout; - } else { - delete this.deferLayout; - } - if(rendered && this.layout){ - this.layout.layout(); - } - if(shallow !== true && this.items){ - var cs = this.items.items; - for(var i = 0, len = cs.length; i < len; i++){ - var c = cs[i]; - if(c.doLayout){ - c.doLayout(false, forceLayout); - } - } - } - if(rendered){ - this.onLayout(shallow, forceLayout); - } - // Initial layout completed - this.hasLayout = true; - delete this.forceLayout; - }, - - //private - onLayout : Ext.emptyFn, - - // private - shouldBufferLayout: function(){ - /* - * Returns true if the container should buffer a layout. - * This is true only if the container has previously been laid out - * and has a parent container that is pending a layout. - */ - var hl = this.hasLayout; - if(this.ownerCt){ - // Only ever buffer if we've laid out the first time and we have one pending. - return hl ? !this.hasLayoutPending() : false; - } - // Never buffer initial layout - return hl; - }, - - // private - hasLayoutPending: function(){ - // Traverse hierarchy to see if any parent container has a pending layout. - var pending = false; - this.ownerCt.bubble(function(c){ - if(c.layoutPending){ - pending = true; - return false; - } - }); - return pending; - }, - - onShow : function(){ - Ext.Container.superclass.onShow.call(this); - if(this.deferLayout !== undefined){ - this.doLayout(true); - } - }, - - /** - * Returns the layout currently in use by the container. If the container does not currently have a layout - * set, a default {@link Ext.layout.ContainerLayout} will be created and set as the container's layout. - * @return {ContainerLayout} layout The container's layout - */ - getLayout : function(){ - if(!this.layout){ - var layout = new Ext.layout.ContainerLayout(this.layoutConfig); - this.setLayout(layout); - } - return this.layout; - }, - - // private - beforeDestroy : function(){ - if(this.items){ - Ext.destroy.apply(Ext, this.items.items); - } - if(this.monitorResize){ - Ext.EventManager.removeResizeListener(this.doLayout, this); - } - Ext.destroy(this.layout); - Ext.Container.superclass.beforeDestroy.call(this); - }, - - /** - * Bubbles up the component/container heirarchy, calling the specified function with each component. The scope (this) of - * function call will be the scope provided or the current component. The arguments to the function - * will be the args provided or the current component. If the function returns false at any point, - * the bubble is stopped. - * @param {Function} fn The function to call - * @param {Object} scope (optional) The scope of the function (defaults to current node) - * @param {Array} args (optional) The args to call the function with (default to passing the current component) - * @return {Ext.Container} this - */ - bubble : function(fn, scope, args){ - var p = this; - while(p){ - if(fn.apply(scope || p, args || [p]) === false){ - break; - } - p = p.ownerCt; - } - return this; - }, - - /** - * Cascades down the component/container heirarchy from this component (called first), calling the specified function with - * each component. The scope (this) of - * function call will be the scope provided or the current component. The arguments to the function - * will be the args provided or the current component. If the function returns false at any point, - * the cascade is stopped on that branch. - * @param {Function} fn The function to call - * @param {Object} scope (optional) The scope of the function (defaults to current component) - * @param {Array} args (optional) The args to call the function with (defaults to passing the current component) - * @return {Ext.Container} this - */ - cascade : function(fn, scope, args){ - if(fn.apply(scope || this, args || [this]) !== false){ - if(this.items){ - var cs = this.items.items; - for(var i = 0, len = cs.length; i < len; i++){ - if(cs[i].cascade){ - cs[i].cascade(fn, scope, args); - }else{ - fn.apply(scope || cs[i], args || [cs[i]]); - } - } - } - } - return this; - }, - - /** - * Find a component under this container at any level by id - * @param {String} id - * @return Ext.Component - */ - findById : function(id){ - var m, ct = this; - this.cascade(function(c){ - if(ct != c && c.id === id){ - m = c; - return false; - } - }); - return m || null; - }, - - /** - * Find a component under this container at any level by xtype or class - * @param {String/Class} xtype The xtype string for a component, or the class of the component directly - * @param {Boolean} shallow (optional) False to check whether this Component is descended from the xtype (this is - * the default), or true to check whether this Component is directly of the specified xtype. - * @return {Array} Array of Ext.Components - */ - findByType : function(xtype, shallow){ - return this.findBy(function(c){ - return c.isXType(xtype, shallow); - }); - }, - - /** - * Find a component under this container at any level by property - * @param {String} prop - * @param {String} value - * @return {Array} Array of Ext.Components - */ - find : function(prop, value){ - return this.findBy(function(c){ - return c[prop] === value; - }); - }, - - /** - * Find a component under this container at any level by a custom function. If the passed function returns - * true, the component will be included in the results. The passed function is called with the arguments (component, this container). - * @param {Function} fn The function to call - * @param {Object} scope (optional) - * @return {Array} Array of Ext.Components - */ - findBy : function(fn, scope){ - var m = [], ct = this; - this.cascade(function(c){ - if(ct != c && fn.call(scope || c, c, ct) === true){ - m.push(c); - } - }); - return m; - }, - - /** - * Get a component contained by this container (alias for items.get(key)) - * @param {String/Number} key The index or id of the component - * @return {Ext.Component} Ext.Component - */ - get : function(key){ - return this.items.get(key); - } -}); - -Ext.Container.LAYOUTS = {}; -Ext.reg('container', Ext.Container); -/** - * @class Ext.layout.ContainerLayout - *
The ContainerLayout class is the default layout manager delegated by {@link Ext.Container} to - * render any child Components when no {@link Ext.Container#layout layout} is configured into - * a {@link Ext.Container Container}. ContainerLayout provides the basic foundation for all other layout - * classes in Ext. It simply renders all child Components into the Container, performing no sizing or - * positioning services. To utilize a layout that provides sizing and positioning of child Components, - * specify an appropriate {@link Ext.Container#layout layout}.
- *This class is intended to be extended or created via the {@link Ext.Container#layout layout} - * configuration property. See {@link Ext.Container#layout} for additional details.
+Ext.reg('spacer', Ext.Spacer);/** + * @class Ext.SplitBar + * @extends Ext.util.Observable + * Creates draggable splitter bar functionality from two elements (element to be dragged and element to be resized). + *+ * Usage: + *
+var split = new Ext.SplitBar("elementToDrag", "elementToSize",
+ Ext.SplitBar.HORIZONTAL, Ext.SplitBar.LEFT);
+split.setAdapter(new Ext.SplitBar.AbsoluteLayoutAdapter("container"));
+split.minSize = 100;
+split.maxSize = 600;
+split.animate = true;
+split.on('moved', splitterMoved);
+An optional extra CSS class that will be added to the container. This can be useful for adding - * customized styles to the container or any of its children using standard CSS rules. See - * {@link Ext.Component}.{@link Ext.Component#ctCls ctCls} also.
- *Note: extraCls defaults to '' except for the following classes - * which assign a value by default: - *
-
- *
- * extraCls: 'x-column custom-class'
- *
- * if(myPanel.layout.activeItem.id == 'item-1') { ... }
- * ',
- '',
- '
'
- );
- t.disableFormats = true;
- return t.compile();
- })(),
-
- /*
- * Destroys this layout. This is a template method that is empty by default, but should be implemented
- * by subclasses that require explicit destruction to purge event handlers or remove DOM nodes.
- * @protected
- */
- destroy : Ext.emptyFn
-};
-Ext.Container.LAYOUTS['auto'] = Ext.layout.ContainerLayout;/**
- * @class Ext.layout.FitLayout
- * @extends Ext.layout.ContainerLayout
- * ',
- '
',
- 'This is a base class for layouts that contain a single item that automatically expands to fill the layout's - * container. This class is intended to be extended or created via the layout:'fit' {@link Ext.Container#layout} - * config, and should generally not need to be created directly via the new keyword.
- *FitLayout does not have any direct config options (other than inherited ones). To fit a panel to a container - * using FitLayout, simply set layout:'fit' on the container and add a single panel to it. If the container has - * multiple panels, only the first one will be displayed. Example usage:
- *
-var p = new Ext.Panel({
- title: 'Fit Layout',
- layout:'fit',
- items: {
- title: 'Inner Panel',
- html: '<p>This is the inner panel content</p>',
- border: false
- }
-});
-This layout manages multiple child Components, each fitted to the Container, where only a single child Component can be - * visible at any given time. This layout style is most commonly used for wizards, tab implementations, etc. - * This class is intended to be extended or created via the layout:'card' {@link Ext.Container#layout} config, - * and should generally not need to be created directly via the new keyword.
- *The CardLayout's focal method is {@link #setActiveItem}. Since only one panel is displayed at a time, - * the only way to move from one Component to the next is by calling setActiveItem, passing the id or index of - * the next panel to display. The layout itself does not provide a user interface for handling this navigation, - * so that functionality must be provided by the developer.
- *In the following example, a simplistic wizard setup is demonstrated. A button bar is added - * to the footer of the containing panel to provide navigation buttons. The buttons will be handled by a - * common navigation routine -- for this example, the implementation of that routine has been ommitted since - * it can be any type of custom logic. Note that other uses of a CardLayout (like a tab control) would require a - * completely different implementation. For serious implementations, a better approach would be to extend - * CardLayout to provide the custom functionality needed. Example usage:
- *
-var navHandler = function(direction){
- // This routine could contain business logic required to manage the navigation steps.
- // It would call setActiveItem as needed, manage navigation button state, handle any
- // branching logic that might be required, handle alternate actions like cancellation
- // or finalization, etc. A complete wizard implementation could get pretty
- // sophisticated depending on the complexity required, and should probably be
- // done as a subclass of CardLayout in a real-world implementation.
-};
-
-var card = new Ext.Panel({
- title: 'Example Wizard',
- layout:'card',
- activeItem: 0, // make sure the active item is set on the container config!
- bodyStyle: 'padding:15px',
- defaults: {
- // applied to each contained panel
- border:false
- },
- // just an example of one possible navigation scheme, using buttons
- bbar: [
- {
- id: 'move-prev',
- text: 'Back',
- handler: navHandler.createDelegate(this, [-1]),
- disabled: true
- },
- '->', // greedy spacer so that the buttons are aligned to each side
- {
- id: 'move-next',
- text: 'Next',
- handler: navHandler.createDelegate(this, [1])
- }
- ],
- // the panels (or "cards") within the layout
- items: [{
- id: 'card-0',
- html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
- },{
- id: 'card-1',
- html: '<p>Step 2 of 3</p>'
- },{
- id: 'card-2',
- html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
- }]
-});
-This is a layout that enables anchoring of contained elements relative to the container's dimensions. - * If the container is resized, all anchored items are automatically rerendered according to their - * {@link #anchor} rules.
- *This class is intended to be extended or created via the layout:'anchor' {@link Ext.Container#layout} - * config, and should generally not need to be created directly via the new keyword.
- *AnchorLayout does not have any direct config options (other than inherited ones). By default, - * AnchorLayout will calculate anchor measurements based on the size of the container itself. However, the - * container using the AnchorLayout can supply an anchoring-specific config property of anchorSize. - * If anchorSize is specifed, the layout will use it as a virtual container for the purposes of calculating - * anchor measurements based on it instead, allowing the container to be sized independently of the anchoring - * logic if necessary. For example:
- *
-var viewport = new Ext.Viewport({
- layout:'anchor',
- anchorSize: {width:800, height:600},
- items:[{
- title:'Item 1',
- html:'Content 1',
- width:800,
- anchor:'right 20%'
- },{
- title:'Item 2',
- html:'Content 2',
- width:300,
- anchor:'50% 30%'
- },{
- title:'Item 3',
- html:'Content 3',
- width:600,
- anchor:'-100 50%'
- }]
-});
- * This configuation option is to be applied to child items of a container managed by - * this layout (ie. configured with layout:'anchor').
- * - *
This value is what tells the layout how an item should be anchored to the container. items - * added to an AnchorLayout accept an anchoring-specific config property of anchor which is a string - * containing two values: the horizontal anchor value and the vertical anchor value (for example, '100% 50%'). - * The following types of anchor values are supported:
-
- *
- *
This is the layout style of choice for creating structural layouts in a multi-column format where the width of - * each column can be specified as a percentage or fixed width, but the height is allowed to vary based on the content. - * This class is intended to be extended or created via the layout:'column' {@link Ext.Container#layout} config, - * and should generally not need to be created directly via the new keyword.
- *ColumnLayout does not have any direct config options (other than inherited ones), but it does support a - * specific config property of columnWidth that can be included in the config of any panel added to it. The - * layout will use the columnWidth (if present) or width of each panel during layout to determine how to size each panel. - * If width or columnWidth is not specified for a given panel, its width will default to the panel's width (or auto).
- *The width property is always evaluated as pixels, and must be a number greater than or equal to 1. - * The columnWidth property is always evaluated as a percentage, and must be a decimal value greater than 0 and - * less than 1 (e.g., .25).
- *The basic rules for specifying column widths are pretty simple. The logic makes two passes through the - * set of contained panels. During the first layout pass, all panels that either have a fixed width or none - * specified (auto) are skipped, but their widths are subtracted from the overall container width. During the second - * pass, all panels with columnWidths are assigned pixel widths in proportion to their percentages based on - * the total remaining container width. In other words, percentage width panels are designed to fill the space - * left over by all the fixed-width and/or auto-width panels. Because of this, while you can specify any number of columns - * with different percentages, the columnWidths must always add up to 1 (or 100%) when added together, otherwise your - * layout may not render as expected. Example usage:
- *
-// All columns are percentages -- they must add up to 1
-var p = new Ext.Panel({
- title: 'Column Layout - Percentage Only',
- layout:'column',
- items: [{
- title: 'Column 1',
- columnWidth: .25
- },{
- title: 'Column 2',
- columnWidth: .6
- },{
- title: 'Column 3',
- columnWidth: .15
- }]
-});
-
-// Mix of width and columnWidth -- all columnWidth values must add up
-// to 1. The first column will take up exactly 120px, and the last two
-// columns will fill the remaining container width.
-var p = new Ext.Panel({
- title: 'Column Layout - Mixed',
- layout:'column',
- items: [{
- title: 'Column 1',
- width: 120
- },{
- title: 'Column 2',
- columnWidth: .8
- },{
- title: 'Column 3',
- columnWidth: .2
- }]
-});
-This is a multi-pane, application-oriented UI layout style that supports multiple - * nested panels, automatic {@link Ext.layout.BorderLayout.Region#split split} bars between - * {@link Ext.layout.BorderLayout.Region#BorderLayout.Region regions} and built-in - * {@link Ext.layout.BorderLayout.Region#collapsible expanding and collapsing} of regions.
- *This class is intended to be extended or created via the layout:'border' - * {@link Ext.Container#layout} config, and should generally not need to be created directly - * via the new keyword.
- *BorderLayout does not have any direct config options (other than inherited ones). - * All configuration options available for customizing the BorderLayout are at the - * {@link Ext.layout.BorderLayout.Region} and {@link Ext.layout.BorderLayout.SplitRegion} - * levels.
- *Example usage:
- *
-var myBorderPanel = new Ext.Panel({
- {@link Ext.Component#renderTo renderTo}: document.body,
- {@link Ext.BoxComponent#width width}: 700,
- {@link Ext.BoxComponent#height height}: 500,
- {@link Ext.Panel#title title}: 'Border Layout',
- {@link Ext.Container#layout layout}: 'border',
- {@link Ext.Container#items items}: [{
- {@link Ext.Panel#title title}: 'South Region is resizable',
- {@link Ext.layout.BorderLayout.Region#BorderLayout.Region region}: 'south', // position for region
- {@link Ext.BoxComponent#height height}: 100,
- {@link Ext.layout.BorderLayout.Region#split split}: true, // enable resizing
- {@link Ext.SplitBar#minSize minSize}: 75, // defaults to {@link Ext.layout.BorderLayout.Region#minHeight 50}
- {@link Ext.SplitBar#maxSize maxSize}: 150,
- {@link Ext.layout.BorderLayout.Region#margins margins}: '0 5 5 5'
- },{
- // xtype: 'panel' implied by default
- {@link Ext.Panel#title title}: 'West Region is collapsible',
- {@link Ext.layout.BorderLayout.Region#BorderLayout.Region region}:'west',
- {@link Ext.layout.BorderLayout.Region#margins margins}: '5 0 0 5',
- {@link Ext.BoxComponent#width width}: 200,
- {@link Ext.layout.BorderLayout.Region#collapsible collapsible}: true, // make collapsible
- {@link Ext.layout.BorderLayout.Region#cmargins cmargins}: '5 5 0 5', // adjust top margin when collapsed
- {@link Ext.Component#id id}: 'west-region-container',
- {@link Ext.Container#layout layout}: 'fit',
- {@link Ext.Panel#unstyled unstyled}: true
- },{
- {@link Ext.Panel#title title}: 'Center Region',
- {@link Ext.layout.BorderLayout.Region#BorderLayout.Region region}: 'center', // center region is required, no width/height specified
- {@link Ext.Component#xtype xtype}: 'container',
- {@link Ext.Container#layout layout}: 'fit',
- {@link Ext.layout.BorderLayout.Region#margins margins}: '5 5 0 0'
+/**
+ * Orientation constant - Create a vertical SplitBar
+ * @static
+ * @type Number
+ */
+Ext.SplitBar.VERTICAL = 1;
+
+/**
+ * Orientation constant - Create a horizontal SplitBar
+ * @static
+ * @type Number
+ */
+Ext.SplitBar.HORIZONTAL = 2;
+
+/**
+ * Placement constant - The resizing element is to the left of the splitter element
+ * @static
+ * @type Number
+ */
+Ext.SplitBar.LEFT = 1;
+
+/**
+ * Placement constant - The resizing element is to the right of the splitter element
+ * @static
+ * @type Number
+ */
+Ext.SplitBar.RIGHT = 2;
+
+/**
+ * Placement constant - The resizing element is positioned above the splitter element
+ * @static
+ * @type Number
+ */
+Ext.SplitBar.TOP = 3;
+
+/**
+ * Placement constant - The resizing element is positioned under splitter element
+ * @static
+ * @type Number
+ */
+Ext.SplitBar.BOTTOM = 4;
+/**
+ * @class Ext.Container
+ * @extends Ext.BoxComponent
+ * Base class for any {@link Ext.BoxComponent} that may contain other Components. Containers handle the
+ * basic behavior of containing items, namely adding, inserting and removing items.
+ *
+ * The most commonly used Container classes are {@link Ext.Panel}, {@link Ext.Window} and {@link Ext.TabPanel}.
+ * If you do not need the capabilities offered by the aforementioned classes you can create a lightweight
+ * Container to be encapsulated by an HTML element to your specifications by using the
+ * {@link Ext.Component#autoEl autoEl} config option. This is a useful technique when creating
+ * embedded {@link Ext.layout.ColumnLayout column} layouts inside {@link Ext.form.FormPanel FormPanels}
+ * for example.
+ *
+ * The code below illustrates both how to explicitly create a Container, and how to implicitly
+ * create one using the 'container' xtype:
+// explicitly create a Container
+var embeddedColumns = new Ext.Container({
+ autoEl: 'div', // This is the default
+ layout: 'column',
+ defaults: {
+ // implicitly create Container by specifying xtype
+ xtype: 'container',
+ autoEl: 'div', // This is the default.
+ layout: 'form',
+ columnWidth: 0.5,
+ style: {
+ padding: '10px'
+ }
+ },
+// The two items below will be Ext.Containers, each encapsulated by a <DIV> element.
+ items: [{
+ items: {
+ xtype: 'datefield',
+ name: 'startDate',
+ fieldLabel: 'Start date'
+ }
+ }, {
+ items: {
+ xtype: 'datefield',
+ name: 'endDate',
+ fieldLabel: 'End date'
+ }
}]
+});
+ *
+ * Layout
+ * Container classes delegate the rendering of child Components to a layout
+ * manager class which must be configured into the Container using the
+ * {@link #layout} configuration property.
+ * When either specifying child {@link #items} of a Container,
+ * or dynamically {@link #add adding} Components to a Container, remember to
+ * consider how you wish the Container to arrange those child elements, and
+ * whether those child elements need to be sized using one of Ext's built-in
+ * {@link #layout} schemes. By default, Containers use the
+ * {@link Ext.layout.ContainerLayout ContainerLayout} scheme which only
+ * renders child components, appending them one after the other inside the
+ * Container, and does not apply any sizing at all.
+ * A common mistake is when a developer neglects to specify a
+ * {@link #layout} (e.g. widgets like GridPanels or
+ * TreePanels are added to Containers for which no {@link #layout}
+ * has been specified). If a Container is left to use the default
+ * {@link Ext.layout.ContainerLayout ContainerLayout} scheme, none of its
+ * child components will be resized, or changed in any way when the Container
+ * is resized.
+ * Certain layout managers allow dynamic addition of child components.
+ * Those that do include {@link Ext.layout.CardLayout},
+ * {@link Ext.layout.AnchorLayout}, {@link Ext.layout.FormLayout}, and
+ * {@link Ext.layout.TableLayout}. For example:
+// Create the GridPanel.
+var myNewGrid = new Ext.grid.GridPanel({
+ store: myStore,
+ columns: myColumnModel,
+ title: 'Results', // the title becomes the title of the tab
});
-
- * Notes:
- *
+The server script needs to return an executable Javascript statement which, when processed
+ * using eval(), will return either a config object with an {@link Ext.Component#xtype xtype},
+ * or an instantiated Component. The server might return this for example:
+(function() {
+ function formatDate(value){
+ return value ? value.dateFormat('M d, Y') : '';
+ };
+
+ var store = new Ext.data.Store({
+ url: 'get-invoice-data.php',
+ baseParams: {
+ startDate: '01/01/2008',
+ endDate: '01/31/2008'
+ },
+ reader: new Ext.data.JsonReader({
+ record: 'transaction',
+ idProperty: 'id',
+ totalRecords: 'total'
+ }, [
+ 'customer',
+ 'invNo',
+ {name: 'date', type: 'date', dateFormat: 'm/d/Y'},
+ {name: 'value', type: 'float'}
+ ])
+ });
+
+ var grid = new Ext.grid.GridPanel({
+ title: 'Invoice Report',
+ bbar: new Ext.PagingToolbar(store),
+ store: store,
+ columns: [
+ {header: "Customer", width: 250, dataIndex: 'customer', sortable: true},
+ {header: "Invoice Number", width: 120, dataIndex: 'invNo', sortable: true},
+ {header: "Invoice Date", width: 100, dataIndex: 'date', renderer: formatDate, sortable: true},
+ {header: "Value", width: 120, dataIndex: 'value', renderer: 'usMoney', sortable: true}
+ ],
+ });
+ store.load();
+ return grid; // return instantiated component
+})();
+When the above code fragment is passed through the eval function in the success handler
+ * of the Ajax request, the code is executed by the Javascript processor, and the anonymous function
+ * runs, and returns the instantiated grid component.
Note: since the code above is generated by a server script, the baseParams for
+ * the Store, the metadata to allow generation of the Record layout, and the ColumnModel
+ * can all be generated into the code since these are all known on the server.
{@link #layout} and should not need
+ * to be set manually.
+ */
+ /**
+ * @cfg {String/Object} layout
+ * *Important: In order for child items to be correctly sized and
+ * positioned, typically a layout manager must be specified through
+ * the layout configuration option.
The sizing and positioning of child {@link items} is the responsibility of + * the Container's layout manager which creates and manages the type of layout + * you have in mind. For example:
+new Ext.Window({
+ width:300, height: 300,
+ layout: 'fit', // explicitly set layout manager: override the default (layout:'auto')
+ items: [{
+ title: 'Panel inside a Window'
+ }]
+}).show();
+ * If the {@link #layout} configuration is not explicitly specified for
+ * a general purpose container (e.g. Container or Panel) the
+ * {@link Ext.layout.ContainerLayout default layout manager} will be used
+ * which does nothing but render child components sequentially into the
+ * Container (no sizing or positioning will be performed in this situation).
+ * Some container classes implicitly specify a default layout
+ * (e.g. FormPanel specifies layout:'form'). Other specific
+ * purpose classes internally specify/manage their internal layout (e.g.
+ * GridPanel, TabPanel, TreePanel, Toolbar, Menu, etc.).
layout may be specified as either as an Object or
+ * as a String:
-
+ *
+ *
-
+ *
+layout: {
+ type: 'vbox',
+ padding: '5',
+ align: 'left'
+}
+The layout type to be used for this container. If not specified, + * a default {@link Ext.layout.ContainerLayout} will be created and used.
+ *Valid layout type values are:
-
+ *
Additional layout specific configuration properties may also be
+ * specified. For complete details regarding the valid config options for
+ * each layout type, see the layout class corresponding to the type
+ * specified.
-
+ *
+layout: 'vbox',
+layoutConfig: {
+ padding: '5',
+ align: 'left'
+}
+The layout type to be used for this container (see list
+ * of valid layout type values above).
+ *
Additional layout specific configuration properties. For complete
+ * details regarding the valid config options for each layout type, see the
+ * layout class corresponding to the layout specified.
{@link #layout} if {@link #layout}
+ * has been specified as a string.
+ */
+ /**
+ * @cfg {Boolean/Number} bufferResize
+ * When set to true (50 milliseconds) or a number of milliseconds, the layout assigned for this container will buffer
+ * the frequency it calculates and does a re-layout of components. This is useful for heavy containers or containers
+ * with a large quantity of sub-components for which frequent layout calls would be expensive. Defaults to 50.
+ */
+ bufferResize: 50,
+
+ /**
+ * @cfg {String/Number} activeItem
+ * A string component id or the numeric index of the component that should be initially activated within the
+ * container's layout on render. For example, activeItem: 'item-1' or activeItem: 0 (index 0 = the first
+ * item in the container's collection). activeItem only applies to layout styles that can display
+ * items one at a time (like {@link Ext.layout.AccordionLayout}, {@link Ext.layout.CardLayout} and
+ * {@link Ext.layout.FitLayout}). Related to {@link Ext.layout.ContainerLayout#activeItem}.
+ */
+ /**
+ * @cfg {Object/Array} items
+ * ** IMPORTANT: be sure to {@link #layout specify a layout} if needed ! **
+ * A single item, or an array of child Components to be added to this container, + * for example:
+ *
+// specifying a single item
+items: {...},
+layout: 'fit', // specify a layout!
+
+// specifying multiple items
+items: [{...}, {...}],
+layout: 'anchor', // specify a layout!
+ * Each item may be:
+ *-
+ *
-
+ *
Notes:
+ *-
+ *
This option is a means of applying default settings to all added items whether added through the {@link #items} + * config or via the {@link #add} or {@link #insert} methods.
+ *If an added item is a config object, and not an instantiated Component, then the default properties are + * unconditionally applied. If the added item is an instantiated Component, then the default properties are + * applied conditionally so as not to override existing properties in the item.
+ *If the defaults option is specified as a function, then the function will be called using this Container as the
+ * scope (this reference) and passing the added item as the first parameter. Any resulting object
+ * from that call is then applied to the item as default properties.
For example, to automatically apply padding to the body of each of a set of
+ * contained {@link Ext.Panel} items, you could pass: defaults: {bodyStyle:'padding:15px'}.
Usage:
+defaults: { // defaults are applied to items, not the container
+ autoScroll:true
+},
+items: [
+ {
+ xtype: 'panel', // defaults do not have precedence over
+ id: 'panel1', // options in config objects, so the defaults
+ autoScroll: false // will not be applied here, panel1 will be autoScroll:false
+ },
+ new Ext.Panel({ // defaults do have precedence over options
+ id: 'panel2', // options in components, so the defaults
+ autoScroll: false // will be applied here, panel2 will be autoScroll:true.
+ })
+]
+ * The default {@link Ext.Component xtype} of child Components to create in this Container when + * a child item is specified as a raw configuration object, rather than as an instantiated Component.
+ *Defaults to 'panel', except {@link Ext.menu.Menu} which defaults to 'menuitem',
+ * and {@link Ext.Toolbar} and {@link Ext.ButtonGroup} which default to 'button'.
'resize'.
+ */
+ resizeEvent: 'resize',
+
+ /**
+ * @cfg {Array} bubbleEvents
+ * An array of events that, when fired, should be bubbled to any parent container.
+ * See {@link Ext.util.Observable#enableBubble}.
+ * Defaults to ['add', 'remove'].
+ */
+ bubbleEvents: ['add', 'remove'],
+
// private
- monitorResize:true,
+ initComponent : function(){
+ Ext.Container.superclass.initComponent.call(this);
+
+ this.addEvents(
+ /**
+ * @event afterlayout
+ * Fires when the components in this container are arranged by the associated layout manager.
+ * @param {Ext.Container} this
+ * @param {ContainerLayout} layout The ContainerLayout implementation for this container
+ */
+ 'afterlayout',
+ /**
+ * @event beforeadd
+ * Fires before any {@link Ext.Component} is added or inserted into the container.
+ * A handler can return false to cancel the add.
+ * @param {Ext.Container} this
+ * @param {Ext.Component} component The component being added
+ * @param {Number} index The index at which the component will be added to the container's items collection
+ */
+ 'beforeadd',
+ /**
+ * @event beforeremove
+ * Fires before any {@link Ext.Component} is removed from the container. A handler can return
+ * false to cancel the remove.
+ * @param {Ext.Container} this
+ * @param {Ext.Component} component The component being removed
+ */
+ 'beforeremove',
+ /**
+ * @event add
+ * @bubbles
+ * Fires after any {@link Ext.Component} is added or inserted into the container.
+ * @param {Ext.Container} this
+ * @param {Ext.Component} component The component that was added
+ * @param {Number} index The index at which the component was added to the container's items collection
+ */
+ 'add',
+ /**
+ * @event remove
+ * @bubbles
+ * Fires after any {@link Ext.Component} is removed from the container.
+ * @param {Ext.Container} this
+ * @param {Ext.Component} component The component that was removed
+ */
+ 'remove'
+ );
+
+ /**
+ * The collection of components in this container as a {@link Ext.util.MixedCollection}
+ * @type MixedCollection
+ * @property items
+ */
+ var items = this.items;
+ if(items){
+ delete this.items;
+ this.add(items);
+ }
+ },
+
// private
- rendered : false,
+ initItems : function(){
+ if(!this.items){
+ this.items = new Ext.util.MixedCollection(false, this.getComponentId);
+ this.getLayout(); // initialize the layout
+ }
+ },
// private
- onLayout : function(ct, target){
- var collapsed;
- if(!this.rendered){
- target.addClass('x-border-layout-ct');
- var items = ct.items.items;
- collapsed = [];
- for(var i = 0, len = items.length; i < len; i++) {
- var c = items[i];
- var pos = c.region;
- if(c.collapsed){
- collapsed.push(c);
- }
- c.collapsed = false;
- if(!c.rendered){
- c.render(target, i);
- c.getDomPositionEl().addClass('x-border-panel');
- }
- this[pos] = pos != 'center' && c.split ?
- new Ext.layout.BorderLayout.SplitRegion(this, c.initialConfig, pos) :
- new Ext.layout.BorderLayout.Region(this, c.initialConfig, pos);
- this[pos].render(target, c);
- }
- this.rendered = true;
+ setLayout : function(layout){
+ if(this.layout && this.layout != layout){
+ this.layout.setContainer(null);
}
+ this.layout = layout;
+ this.initItems();
+ layout.setContainer(this);
+ },
- var size = target.getViewSize();
- if(size.width < 20 || size.height < 20){ // display none?
- if(collapsed){
- this.restoreCollapsed = collapsed;
- }
- return;
- }else if(this.restoreCollapsed){
- collapsed = this.restoreCollapsed;
- delete this.restoreCollapsed;
+ afterRender: function(){
+ // Render this Container, this should be done before setLayout is called which
+ // will hook onResize
+ Ext.Container.superclass.afterRender.call(this);
+ if(!this.layout){
+ this.layout = 'auto';
+ }
+ if(Ext.isObject(this.layout) && !this.layout.layout){
+ this.layoutConfig = this.layout;
+ this.layout = this.layoutConfig.type;
+ }
+ if(Ext.isString(this.layout)){
+ this.layout = new Ext.Container.LAYOUTS[this.layout.toLowerCase()](this.layoutConfig);
}
+ this.setLayout(this.layout);
- var w = size.width, h = size.height;
- var centerW = w, centerH = h, centerY = 0, centerX = 0;
+ // If a CardLayout, the active item set
+ if(this.activeItem !== undefined){
+ var item = this.activeItem;
+ delete this.activeItem;
+ this.layout.setActiveItem(item);
+ }
- var n = this.north, s = this.south, west = this.west, e = this.east, c = this.center;
- if(!c && Ext.layout.BorderLayout.WARN !== false){
- throw 'No center region defined in BorderLayout ' + ct.id;
+ // If we have no ownerCt, render and size all children
+ if(!this.ownerCt){
+ this.doLayout(false, true);
}
- if(n && n.isVisible()){
- var b = n.getSize();
- var m = n.getMargins();
- b.width = w - (m.left+m.right);
- b.x = m.left;
- b.y = m.top;
- centerY = b.height + b.y + m.bottom;
- centerH -= centerY;
- n.applyLayout(b);
+ // This is a manually configured flag set by users in conjunction with renderTo.
+ // Not to be confused with the flag by the same name used in Layouts.
+ if(this.monitorResize === true){
+ Ext.EventManager.onWindowResize(this.doLayout, this, [false]);
}
- if(s && s.isVisible()){
- var b = s.getSize();
- var m = s.getMargins();
- b.width = w - (m.left+m.right);
- b.x = m.left;
- var totalHeight = (b.height + m.top + m.bottom);
- b.y = h - totalHeight + m.top;
- centerH -= totalHeight;
- s.applyLayout(b);
- }
- if(west && west.isVisible()){
- var b = west.getSize();
- var m = west.getMargins();
- b.height = centerH - (m.top+m.bottom);
- b.x = m.left;
- b.y = centerY + m.top;
- var totalWidth = (b.width + m.left + m.right);
- centerX += totalWidth;
- centerW -= totalWidth;
- west.applyLayout(b);
- }
- if(e && e.isVisible()){
- var b = e.getSize();
- var m = e.getMargins();
- b.height = centerH - (m.top+m.bottom);
- var totalWidth = (b.width + m.left + m.right);
- b.x = w - totalWidth + m.left;
- b.y = centerY + m.top;
- centerW -= totalWidth;
- e.applyLayout(b);
+ },
+
+ /**
+ *
Returns the Element to be used to contain the child Components of this Container.
+ *An implementation is provided which returns the Container's {@link #getEl Element}, but + * if there is a more complex structure to a Container, this may be overridden to return + * the element into which the {@link #layout layout} renders child Components.
+ * @return {Ext.Element} The Element to render child Components into. + */ + getLayoutTarget : function(){ + return this.el; + }, + + // private - used as the key lookup function for the items collection + getComponentId : function(comp){ + return comp.getItemId(); + }, + + /** + *Adds {@link Ext.Component Component}(s) to this Container.
+ *Description : + *
-
+ *
Notes : + *
-
+ *
Either one or more Components to add or an Array of Components to add. See
+ * {@link #items} for additional information.
+ * Ext uses lazy rendering, and will only render the inserted Component should + * it become necessary.
+ * A Component config object may be passed in order to avoid the overhead of + * constructing a real Component object if lazy rendering might mean that the + * inserted Component will not be rendered immediately. To take advantage of + * this 'lazy instantiation', set the {@link Ext.Component#xtype} config + * property to the registered type of the Component wanted.
+ * For a list of all available xtypes, see {@link Ext.Component}. + * @return {Ext.Component} component The Component (or config object) that was + * inserted with the Container's default config values applied. + */ + insert : function(index, comp){ + this.initItems(); + var a = arguments, len = a.length; + if(len > 2){ + var result = []; + for(var i = len-1; i >= 1; --i) { + result.push(this.insert(index, a[i])); } + return result; } - if(Ext.isIE && Ext.isStrict){ // workaround IE strict repainting issue - target.repaint(); + var c = this.lookupComponent(this.applyDefaults(comp)); + index = Math.min(index, this.items.length); + if(this.fireEvent('beforeadd', this, c, index) !== false && this.onBeforeAdd(c) !== false){ + if(c.ownerCt == this){ + this.items.remove(c); + } + this.items.insert(index, c); + c.onAdded(this, index); + this.onAdd(c); + this.fireEvent('add', this, c, index); } + return c; }, - destroy: function() { - var r = ['north', 'south', 'east', 'west']; - for (var i = 0; i < r.length; i++) { - var region = this[r[i]]; - if(region){ - if(region.destroy){ - region.destroy(); - }else if (region.split){ - region.split.destroy(true); - } + // private + applyDefaults : function(c){ + var d = this.defaults; + if(d){ + if(Ext.isFunction(d)){ + d = d.call(this, c); + } + if(Ext.isString(c)){ + c = Ext.ComponentMgr.get(c); + Ext.apply(c, d); + }else if(!c.events){ + Ext.applyIf(c, d); + }else{ + Ext.apply(c, d); } } - Ext.layout.BorderLayout.superclass.destroy.call(this); - } + return c; + }, + + // private + onBeforeAdd : function(item){ + if(item.ownerCt){ + item.ownerCt.remove(item, false); + } + if(this.hideBorders === true){ + item.border = (item.border === true); + } + }, /** - * @property activeItem - * @hide + * Removes a component from this container. Fires the {@link #beforeremove} event before removing, then fires + * the {@link #remove} event after the component has been removed. + * @param {Component/String} component The component reference or id to remove. + * @param {Boolean} autoDestroy (optional) True to automatically invoke the removed Component's {@link Ext.Component#destroy} function. + * Defaults to the value of this Container's {@link #autoDestroy} config. + * @return {Ext.Component} component The Component that was removed. */ -}); + remove : function(comp, autoDestroy){ + this.initItems(); + var c = this.getComponent(comp); + if(c && this.fireEvent('beforeremove', this, c) !== false){ + this.doRemove(c, autoDestroy); + this.fireEvent('remove', this, c); + } + return c; + }, -/** - * @class Ext.layout.BorderLayout.Region - *
This is a region of a {@link Ext.layout.BorderLayout BorderLayout} that acts as a subcontainer - * within the layout. Each region has its own {@link Ext.layout.ContainerLayout layout} that is - * independent of other regions and the containing BorderLayout, and can be any of the - * {@link Ext.layout.ContainerLayout valid Ext layout types}.
- *Region size is managed automatically and cannot be changed by the user -- for - * {@link #split resizable regions}, see {@link Ext.layout.BorderLayout.SplitRegion}.
- * @constructor - * Create a new Region. - * @param {Layout} layout The {@link Ext.layout.BorderLayout BorderLayout} instance that is managing this Region. - * @param {Object} config The configuration options - * @param {String} position The region position. Valid values are: north, south, - * east, west and center. Every {@link Ext.layout.BorderLayout BorderLayout} - * must have a center region for the primary content -- all other regions are optional. - */ -Ext.layout.BorderLayout.Region = function(layout, config, pos){ - Ext.apply(this, config); - this.layout = layout; - this.position = pos; - this.state = {}; - if(typeof this.margins == 'string'){ - this.margins = this.layout.parseMargins(this.margins); - } - this.margins = Ext.applyIf(this.margins || {}, this.defaultMargins); - if(this.collapsible){ - if(typeof this.cmargins == 'string'){ - this.cmargins = this.layout.parseMargins(this.cmargins); + onRemove: function(c){ + // Empty template method + }, + + // private + doRemove: function(c, autoDestroy){ + var l = this.layout, + hasLayout = l && this.rendered; + + if(hasLayout){ + l.onRemove(c); } - if(this.collapseMode == 'mini' && !this.cmargins){ - this.cmargins = {left:0,top:0,right:0,bottom:0}; - }else{ - this.cmargins = Ext.applyIf(this.cmargins || {}, - pos == 'north' || pos == 'south' ? this.defaultNSCMargins : this.defaultEWCMargins); + this.items.remove(c); + c.onRemoved(); + this.onRemove(c); + if(autoDestroy === true || (autoDestroy !== false && this.autoDestroy)){ + c.destroy(); } - } -}; + if(hasLayout){ + l.afterRemove(c); + } + }, -Ext.layout.BorderLayout.Region.prototype = { /** - * @cfg {Boolean} animFloat - * When a collapsed region's bar is clicked, the region's panel will be displayed as a floated - * panel that will close again once the user mouses out of that panel (or clicks out if - * {@link #autoHide} = false). Setting {@link #animFloat} = false will - * prevent the open and close of these floated panels from being animated (defaults to true). + * Removes all components from this container. + * @param {Boolean} autoDestroy (optional) True to automatically invoke the removed Component's {@link Ext.Component#destroy} function. + * Defaults to the value of this Container's {@link #autoDestroy} config. + * @return {Array} Array of the destroyed components */ + removeAll: function(autoDestroy){ + this.initItems(); + var item, rem = [], items = []; + this.items.each(function(i){ + rem.push(i); + }); + for (var i = 0, len = rem.length; i < len; ++i){ + item = rem[i]; + this.remove(item, autoDestroy); + if(item.ownerCt !== this){ + items.push(item); + } + } + return items; + }, + /** - * @cfg {Boolean} autoHide - * When a collapsed region's bar is clicked, the region's panel will be displayed as a floated - * panel. If autoHide = true, the panel will automatically hide after the user mouses - * out of the panel. If autoHide = false, the panel will continue to display until the - * user clicks outside of the panel (defaults to true). + * Examines this container's{@link #items} property
+ * and gets a direct child component of this container.
+ * @param {String/Number} comp This parameter may be any of the following:
+ * -
+ *
For additional information see {@link Ext.util.MixedCollection#get}. + * @return Ext.Component The component (if found). */ + getComponent : function(comp){ + if(Ext.isObject(comp)){ + comp = comp.getItemId(); + } + return this.items.get(comp); + }, + + // private + lookupComponent : function(comp){ + if(Ext.isString(comp)){ + return Ext.ComponentMgr.get(comp); + }else if(!comp.events){ + return this.createComponent(comp); + } + return comp; + }, + + // private + createComponent : function(config, defaultType){ + if (config.render) { + return config; + } + // add in ownerCt at creation time but then immediately + // remove so that onBeforeAdd can handle it + var c = Ext.create(Ext.apply({ + ownerCt: this + }, config), defaultType || this.defaultType); + delete c.initialConfig.ownerCt; + delete c.ownerCt; + return c; + }, + /** - * @cfg {String} collapseMode - * collapseMode supports two configuration values:
-
- *
Note: if a collapsible region does not have a title bar, then set collapseMode = - * 'mini' and {@link #split} = true in order for the region to be {@link #collapsible} - * by the user as the expand/collapse tool button (that would go in the title bar) will not be rendered.
- *See also {@link #cmargins}.
+ * @private + * We can only lay out if there is a view area in which to layout. + * display:none on the layout target, *or any of its parent elements* will mean it has no view area. */ + canLayout : function() { + var el = this.getVisibilityEl(); + return el && el.dom && !el.isStyle("display", "none"); + }, + /** - * @cfg {Object} margins - * An object containing margins to apply to the region when in the expanded state in the - * format:
-{
- top: (top margin),
- right: (right margin),
- bottom: (bottom margin),
- left: (left margin)
-}May also be a string containing space-separated, numeric margin values. The order of the - * sides associated with each value matches the way CSS processes margin values:
- *-
- *
Defaults to:
- * {top:0, right:0, bottom:0, left:0}
- *
-{
- top: (top margin),
- right: (right margin),
- bottom: (bottom margin),
- left: (left margin)
-}May also be a string containing space-separated, numeric margin values. The order of the - * sides associated with each value matches the way CSS processes margin values.
- *-
- *
true to allow the user to collapse this region (defaults to false). If - * true, an expand/collapse tool button will automatically be rendered into the title - * bar of the region, otherwise the button will not be shown.
- *Note: that a title bar is required to display the collapse/expand toggle button -- if - * no title is specified for the region's panel, the region will only be collapsible if - * {@link #collapseMode} = 'mini' and {@link #split} = true. + * Bubbles up the component/container heirarchy, calling the specified function with each component. The scope (this) of + * function call will be the scope provided or the current component. The arguments to the function + * will be the args provided or the current component. If the function returns false at any point, + * the bubble is stopped. + * @param {Function} fn The function to call + * @param {Object} scope (optional) The scope of the function (defaults to current node) + * @param {Array} args (optional) The args to call the function with (default to passing the current component) + * @return {Ext.Container} this */ - collapsible : false, + bubble : function(fn, scope, args){ + var p = this; + while(p){ + if(fn.apply(scope || p, args || [p]) === false){ + break; + } + p = p.ownerCt; + } + return this; + }, + /** - * @cfg {Boolean} split - *
true to create a {@link Ext.layout.BorderLayout.SplitRegion SplitRegion} and - * display a 5px wide {@link Ext.SplitBar} between this region and its neighbor, allowing the user to - * resize the regions dynamically. Defaults to false creating a - * {@link Ext.layout.BorderLayout.Region Region}.
- *
Notes:
-
- *
The minimum allowable width in pixels for this region (defaults to 50). - * maxWidth may also be specified.
- *
Note: setting the {@link Ext.SplitBar#minSize minSize} / - * {@link Ext.SplitBar#maxSize maxSize} supersedes any specified - * minWidth / maxWidth.
+ * Find a component under this container at any level by xtype or class + * @param {String/Class} xtype The xtype string for a component, or the class of the component directly + * @param {Boolean} shallow (optional) False to check whether this Component is descended from the xtype (this is + * the default), or true to check whether this Component is directly of the specified xtype. + * @return {Array} Array of Ext.Components */ - minWidth:50, + findByType : function(xtype, shallow){ + return this.findBy(function(c){ + return c.isXType(xtype, shallow); + }); + }, + /** - * @cfg {Number} minHeight - * The minimum allowable height in pixels for this region (defaults to 50) - * maxHeight may also be specified.- *
Note: setting the {@link Ext.SplitBar#minSize minSize} / - * {@link Ext.SplitBar#maxSize maxSize} supersedes any specified - * minHeight / maxHeight.
+ * Find a component under this container at any level by property + * @param {String} prop + * @param {String} value + * @return {Array} Array of Ext.Components */ - minHeight:50, + find : function(prop, value){ + return this.findBy(function(c){ + return c[prop] === value; + }); + }, - // private - defaultMargins : {left:0,top:0,right:0,bottom:0}, - // private - defaultNSCMargins : {left:5,top:5,right:5,bottom:5}, - // private - defaultEWCMargins : {left:5,top:0,right:5,bottom:0}, - floatingZIndex: 100, + /** + * Find a component under this container at any level by a custom function. If the passed function returns + * true, the component will be included in the results. The passed function is called with the arguments (component, this container). + * @param {Function} fn The function to call + * @param {Object} scope (optional) + * @return {Array} Array of Ext.Components + */ + findBy : function(fn, scope){ + var m = [], ct = this; + this.cascade(function(c){ + if(ct != c && fn.call(scope || c, c, ct) === true){ + m.push(c); + } + }); + return m; + }, /** - * True if this region is collapsed. Read-only. - * @type Boolean - * @property + * Get a component contained by this container (alias for items.get(key)) + * @param {String/Number} key The index or id of the component + * @return {Ext.Component} Ext.Component */ - isCollapsed : false, + get : function(key){ + return this.items.get(key); + } +}); +Ext.Container.LAYOUTS = {}; +Ext.reg('container', Ext.Container); +/** + * @class Ext.layout.ContainerLayout + *This class is intended to be extended or created via the {@link Ext.Container#layout layout} + * configuration property. See {@link Ext.Container#layout} for additional details.
+ */ +Ext.layout.ContainerLayout = Ext.extend(Object, { /** - * This region's panel. Read-only. - * @type Ext.Panel - * @property panel + * @cfg {String} extraCls + *An optional extra CSS class that will be added to the container. This can be useful for adding + * customized styles to the container or any of its children using standard CSS rules. See + * {@link Ext.Component}.{@link Ext.Component#ctCls ctCls} also.
+ *Note: extraCls defaults to '' except for the following classes + * which assign a value by default: + *
-
+ *
+ * extraCls: 'x-column custom-class'
+ *
+ * if(myPanel.layout.activeItem.id == 'item-1') { ... }
+ * ',
+ '',
+ '
'
+ );
+ t.disableFormats = true;
+ return t.compile();
+ })(),
+
+ /*
+ * Destroys this layout. This is a template method that is empty by default, but should be implemented
+ * by subclasses that require explicit destruction to purge event handlers or remove DOM nodes.
+ * @protected
+ */
+ destroy : function(){
+ // Stop any buffered layout tasks
+ if(this.resizeTask && this.resizeTask.cancel){
+ this.resizeTask.cancel();
+ }
+ if(!Ext.isEmpty(this.targetCls)){
+ var target = this.container.getLayoutTarget();
+ if(target){
+ target.removeClass(this.targetCls);
+ }
+ }
+ }
+});/**
+ * @class Ext.layout.AutoLayout
+ * ',
+ '
',
+ 'The AutoLayout is the default layout manager delegated by {@link Ext.Container} to + * render any child Components when no {@link Ext.Container#layout layout} is configured into + * a {@link Ext.Container Container}.. AutoLayout provides only a passthrough of any layout calls + * to any child containers.
+ */ +Ext.layout.AutoLayout = Ext.extend(Ext.layout.ContainerLayout, { + type: 'auto', + + monitorResize: true, + + onLayout : function(ct, target){ + Ext.layout.AutoLayout.superclass.onLayout.call(this, ct, target); + var cs = this.getRenderedItems(ct), len = cs.length, i, c; + for(i = 0; i < len; i++){ + c = cs[i]; + if (c.doLayout){ + // Shallow layout children + c.doLayout(true); + } + } + } +}); + +Ext.Container.LAYOUTS['auto'] = Ext.layout.AutoLayout; +/** + * @class Ext.layout.FitLayout + * @extends Ext.layout.ContainerLayout + *This is a base class for layouts that contain a single item that automatically expands to fill the layout's + * container. This class is intended to be extended or created via the layout:'fit' {@link Ext.Container#layout} + * config, and should generally not need to be created directly via the new keyword.
+ *FitLayout does not have any direct config options (other than inherited ones). To fit a panel to a container + * using FitLayout, simply set layout:'fit' on the container and add a single panel to it. If the container has + * multiple panels, only the first one will be displayed. Example usage:
+ *
+var p = new Ext.Panel({
+ title: 'Fit Layout',
+ layout:'fit',
+ items: {
+ title: 'Inner Panel',
+ html: '<p>This is the inner panel content</p>',
+ border: false
+ }
+});
+This layout manages multiple child Components, each fitted to the Container, where only a single child Component can be + * visible at any given time. This layout style is most commonly used for wizards, tab implementations, etc. + * This class is intended to be extended or created via the layout:'card' {@link Ext.Container#layout} config, + * and should generally not need to be created directly via the new keyword.
+ *The CardLayout's focal method is {@link #setActiveItem}. Since only one panel is displayed at a time, + * the only way to move from one Component to the next is by calling setActiveItem, passing the id or index of + * the next panel to display. The layout itself does not provide a user interface for handling this navigation, + * so that functionality must be provided by the developer.
+ *In the following example, a simplistic wizard setup is demonstrated. A button bar is added + * to the footer of the containing panel to provide navigation buttons. The buttons will be handled by a + * common navigation routine -- for this example, the implementation of that routine has been ommitted since + * it can be any type of custom logic. Note that other uses of a CardLayout (like a tab control) would require a + * completely different implementation. For serious implementations, a better approach would be to extend + * CardLayout to provide the custom functionality needed. Example usage:
+ *
+var navHandler = function(direction){
+ // This routine could contain business logic required to manage the navigation steps.
+ // It would call setActiveItem as needed, manage navigation button state, handle any
+ // branching logic that might be required, handle alternate actions like cancellation
+ // or finalization, etc. A complete wizard implementation could get pretty
+ // sophisticated depending on the complexity required, and should probably be
+ // done as a subclass of CardLayout in a real-world implementation.
+};
+
+var card = new Ext.Panel({
+ title: 'Example Wizard',
+ layout:'card',
+ activeItem: 0, // make sure the active item is set on the container config!
+ bodyStyle: 'padding:15px',
+ defaults: {
+ // applied to each contained panel
+ border:false
+ },
+ // just an example of one possible navigation scheme, using buttons
+ bbar: [
+ {
+ id: 'move-prev',
+ text: 'Back',
+ handler: navHandler.createDelegate(this, [-1]),
+ disabled: true
+ },
+ '->', // greedy spacer so that the buttons are aligned to each side
+ {
+ id: 'move-next',
+ text: 'Next',
+ handler: navHandler.createDelegate(this, [1])
+ }
+ ],
+ // the panels (or "cards") within the layout
+ items: [{
+ id: 'card-0',
+ html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
+ },{
+ id: 'card-1',
+ html: '<p>Step 2 of 3</p>'
+ },{
+ id: 'card-2',
+ html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
+ }]
+});
+This is a layout that enables anchoring of contained elements relative to the container's dimensions. + * If the container is resized, all anchored items are automatically rerendered according to their + * {@link #anchor} rules.
+ *This class is intended to be extended or created via the layout:'anchor' {@link Ext.Container#layout} + * config, and should generally not need to be created directly via the new keyword.
+ *AnchorLayout does not have any direct config options (other than inherited ones). By default, + * AnchorLayout will calculate anchor measurements based on the size of the container itself. However, the + * container using the AnchorLayout can supply an anchoring-specific config property of anchorSize. + * If anchorSize is specifed, the layout will use it as a virtual container for the purposes of calculating + * anchor measurements based on it instead, allowing the container to be sized independently of the anchoring + * logic if necessary. For example:
+ *
+var viewport = new Ext.Viewport({
+ layout:'anchor',
+ anchorSize: {width:800, height:600},
+ items:[{
+ title:'Item 1',
+ html:'Content 1',
+ width:800,
+ anchor:'right 20%'
+ },{
+ title:'Item 2',
+ html:'Content 2',
+ width:300,
+ anchor:'50% 30%'
+ },{
+ title:'Item 3',
+ html:'Content 3',
+ width:600,
+ anchor:'-100 50%'
+ }]
+});
+ * This configuation option is to be applied to child items of a container managed by + * this layout (ie. configured with layout:'anchor').
+ * + *
This value is what tells the layout how an item should be anchored to the container. items + * added to an AnchorLayout accept an anchoring-specific config property of anchor which is a string + * containing two values: the horizontal anchor value and the vertical anchor value (for example, '100% 50%'). + * The following types of anchor values are supported:
-
+ *
+ *
This is the layout style of choice for creating structural layouts in a multi-column format where the width of + * each column can be specified as a percentage or fixed width, but the height is allowed to vary based on the content. + * This class is intended to be extended or created via the layout:'column' {@link Ext.Container#layout} config, + * and should generally not need to be created directly via the new keyword.
+ *ColumnLayout does not have any direct config options (other than inherited ones), but it does support a + * specific config property of columnWidth that can be included in the config of any panel added to it. The + * layout will use the columnWidth (if present) or width of each panel during layout to determine how to size each panel. + * If width or columnWidth is not specified for a given panel, its width will default to the panel's width (or auto).
+ *The width property is always evaluated as pixels, and must be a number greater than or equal to 1. + * The columnWidth property is always evaluated as a percentage, and must be a decimal value greater than 0 and + * less than 1 (e.g., .25).
+ *The basic rules for specifying column widths are pretty simple. The logic makes two passes through the + * set of contained panels. During the first layout pass, all panels that either have a fixed width or none + * specified (auto) are skipped, but their widths are subtracted from the overall container width. During the second + * pass, all panels with columnWidths are assigned pixel widths in proportion to their percentages based on + * the total remaining container width. In other words, percentage width panels are designed to fill the space + * left over by all the fixed-width and/or auto-width panels. Because of this, while you can specify any number of columns + * with different percentages, the columnWidths must always add up to 1 (or 100%) when added together, otherwise your + * layout may not render as expected. Example usage:
+ *
+// All columns are percentages -- they must add up to 1
+var p = new Ext.Panel({
+ title: 'Column Layout - Percentage Only',
+ layout:'column',
+ items: [{
+ title: 'Column 1',
+ columnWidth: .25
+ },{
+ title: 'Column 2',
+ columnWidth: .6
+ },{
+ title: 'Column 3',
+ columnWidth: .15
+ }]
+});
+// Mix of width and columnWidth -- all columnWidth values must add up
+// to 1. The first column will take up exactly 120px, and the last two
+// columns will fill the remaining container width.
+var p = new Ext.Panel({
+ title: 'Column Layout - Mixed',
+ layout:'column',
+ items: [{
+ title: 'Column 1',
+ width: 120
+ },{
+ title: 'Column 2',
+ columnWidth: .8
+ },{
+ title: 'Column 3',
+ columnWidth: .2
+ }]
+});
+This is a specialized type of {@link Ext.layout.BorderLayout.Region BorderLayout region} that - * has a built-in {@link Ext.SplitBar} for user resizing of regions. The movement of the split bar - * is configurable to move either {@link #tickSize smooth or incrementally}.
- * @constructor - * Create a new SplitRegion. - * @param {Layout} layout The {@link Ext.layout.BorderLayout BorderLayout} instance that is managing this Region. - * @param {Object} config The configuration options - * @param {String} position The region position. Valid values are: north, south, east, west and center. Every - * BorderLayout must have a center region for the primary content -- all other regions are optional. - */ -Ext.layout.BorderLayout.SplitRegion = function(layout, config, pos){ - Ext.layout.BorderLayout.SplitRegion.superclass.constructor.call(this, layout, config, pos); - // prevent switch - this.applyLayout = this.applyFns[pos]; -}; + var w = size.width - this.scrollOffset, + h = size.height, + pw = w; + + this.innerCt.setWidth(w); + + // some columns can be percentages while others are fixed + // so we need to make 2 passes + + for(i = 0; i < len; i++){ + c = cs[i]; + m = c.getPositionEl().getMargins('lr'); + margins[i] = m; + if(!c.columnWidth){ + pw -= (c.getWidth() + m); + } + } + + pw = pw < 0 ? 0 : pw; + + for(i = 0; i < len; i++){ + c = cs[i]; + m = margins[i]; + if(c.columnWidth){ + c.setSize(Math.floor(c.columnWidth * pw) - m); + } + } + + // Browsers differ as to when they account for scrollbars. We need to re-measure to see if the scrollbar + // spaces were accounted for properly. If not, re-layout. + if (Ext.isIE) { + if (i = target.getStyle('overflow') && i != 'hidden' && !this.adjustmentPass) { + var ts = this.getLayoutTargetSize(); + if (ts.width != size.width){ + this.adjustmentPass = true; + this.onLayout(ct, target); + } + } + } + delete this.adjustmentPass; + } -Ext.extend(Ext.layout.BorderLayout.SplitRegion, Ext.layout.BorderLayout.Region, { - /** - * @cfg {Number} tickSize - * The increment, in pixels by which to move this Region's {@link Ext.SplitBar SplitBar}. - * By default, the {@link Ext.SplitBar SplitBar} moves smoothly. - */ - /** - * @cfg {String} splitTip - * The tooltip to display when the user hovers over a - * {@link Ext.layout.BorderLayout.Region#collapsible non-collapsible} region's split bar - * (defaults to "Drag to resize."). Only applies if - * {@link #useSplitTips} = true. - */ - splitTip : "Drag to resize.", - /** - * @cfg {String} collapsibleSplitTip - * The tooltip to display when the user hovers over a - * {@link Ext.layout.BorderLayout.Region#collapsible collapsible} region's split bar - * (defaults to "Drag to resize. Double click to hide."). Only applies if - * {@link #useSplitTips} = true. - */ - collapsibleSplitTip : "Drag to resize. Double click to hide.", /** - * @cfg {Boolean} useSplitTips - * true to display a tooltip when the user hovers over a region's split bar - * (defaults to false). The tooltip text will be the value of either - * {@link #splitTip} or {@link #collapsibleSplitTip} as appropriate. + * @property activeItem + * @hide */ - useSplitTips : false, - - // private - splitSettings : { - north : { - orientation: Ext.SplitBar.VERTICAL, - placement: Ext.SplitBar.TOP, - maxFn : 'getVMaxSize', - minProp: 'minHeight', - maxProp: 'maxHeight' - }, - south : { - orientation: Ext.SplitBar.VERTICAL, - placement: Ext.SplitBar.BOTTOM, - maxFn : 'getVMaxSize', - minProp: 'minHeight', - maxProp: 'maxHeight' - }, - east : { - orientation: Ext.SplitBar.HORIZONTAL, - placement: Ext.SplitBar.RIGHT, - maxFn : 'getHMaxSize', - minProp: 'minWidth', - maxProp: 'maxWidth' - }, - west : { - orientation: Ext.SplitBar.HORIZONTAL, - placement: Ext.SplitBar.LEFT, - maxFn : 'getHMaxSize', - minProp: 'minWidth', - maxProp: 'maxWidth' - } - }, +}); +Ext.Container.LAYOUTS['column'] = Ext.layout.ColumnLayout; +/** + * @class Ext.layout.BorderLayout + * @extends Ext.layout.ContainerLayout + *This is a multi-pane, application-oriented UI layout style that supports multiple + * nested panels, automatic {@link Ext.layout.BorderLayout.Region#split split} bars between + * {@link Ext.layout.BorderLayout.Region#BorderLayout.Region regions} and built-in + * {@link Ext.layout.BorderLayout.Region#collapsible expanding and collapsing} of regions.
+ *This class is intended to be extended or created via the layout:'border' + * {@link Ext.Container#layout} config, and should generally not need to be created directly + * via the new keyword.
+ *BorderLayout does not have any direct config options (other than inherited ones). + * All configuration options available for customizing the BorderLayout are at the + * {@link Ext.layout.BorderLayout.Region} and {@link Ext.layout.BorderLayout.SplitRegion} + * levels.
+ *Example usage:
+ *
+var myBorderPanel = new Ext.Panel({
+ {@link Ext.Component#renderTo renderTo}: document.body,
+ {@link Ext.BoxComponent#width width}: 700,
+ {@link Ext.BoxComponent#height height}: 500,
+ {@link Ext.Panel#title title}: 'Border Layout',
+ {@link Ext.Container#layout layout}: 'border',
+ {@link Ext.Container#items items}: [{
+ {@link Ext.Panel#title title}: 'South Region is resizable',
+ {@link Ext.layout.BorderLayout.Region#BorderLayout.Region region}: 'south', // position for region
+ {@link Ext.BoxComponent#height height}: 100,
+ {@link Ext.layout.BorderLayout.Region#split split}: true, // enable resizing
+ {@link Ext.SplitBar#minSize minSize}: 75, // defaults to {@link Ext.layout.BorderLayout.Region#minHeight 50}
+ {@link Ext.SplitBar#maxSize maxSize}: 150,
+ {@link Ext.layout.BorderLayout.Region#margins margins}: '0 5 5 5'
+ },{
+ // xtype: 'panel' implied by default
+ {@link Ext.Panel#title title}: 'West Region is collapsible',
+ {@link Ext.layout.BorderLayout.Region#BorderLayout.Region region}:'west',
+ {@link Ext.layout.BorderLayout.Region#margins margins}: '5 0 0 5',
+ {@link Ext.BoxComponent#width width}: 200,
+ {@link Ext.layout.BorderLayout.Region#collapsible collapsible}: true, // make collapsible
+ {@link Ext.layout.BorderLayout.Region#cmargins cmargins}: '5 5 0 5', // adjust top margin when collapsed
+ {@link Ext.Component#id id}: 'west-region-container',
+ {@link Ext.Container#layout layout}: 'fit',
+ {@link Ext.Panel#unstyled unstyled}: true
+ },{
+ {@link Ext.Panel#title title}: 'Center Region',
+ {@link Ext.layout.BorderLayout.Region#BorderLayout.Region region}: 'center', // center region is required, no width/height specified
+ {@link Ext.Component#xtype xtype}: 'container',
+ {@link Ext.Container#layout layout}: 'fit',
+ {@link Ext.layout.BorderLayout.Region#margins margins}: '5 5 0 0'
+ }]
+});
+Notes:
-
+ *
This layout manager is specifically designed for rendering and managing child Components of - * {@link Ext.form.FormPanel forms}. It is responsible for rendering the labels of - * {@link Ext.form.Field Field}s.
- * - *This layout manager is used when a Container is configured with the layout:'form' - * {@link Ext.Container#layout layout} config option, and should generally not need to be created directly - * via the new keyword. See {@link Ext.Container#layout} for additional details.
- * - *In an application, it will usually be preferrable to use a {@link Ext.form.FormPanel FormPanel} - * (which is configured with FormLayout as its layout class by default) since it also provides built-in - * functionality for {@link Ext.form.BasicForm#doAction loading, validating and submitting} the form.
- * - *A {@link Ext.Container Container} using the FormLayout layout manager (e.g. - * {@link Ext.form.FormPanel} or specifying layout:'form') can also accept the following - * layout-specific config properties:
-
- *
Any Component (including Fields) managed by FormLayout accepts the following as a config option: - *
-
- *
Any Component managed by FormLayout may be rendered as a form field (with an associated label) by - * configuring it with a non-null {@link Ext.Component#fieldLabel fieldLabel}. Components configured - * in this way may be configured with the following options which affect the way the FormLayout renders them: - *
-
- *
Example usage:
- *
-// Required if showing validation messages
-Ext.QuickTips.init();
-
-// While you can create a basic Panel with layout:'form', practically
-// you should usually use a FormPanel to also get its form functionality
-// since it already creates a FormLayout internally.
-var form = new Ext.form.FormPanel({
- title: 'Form Layout',
- bodyStyle: 'padding:15px',
- width: 350,
- defaultType: 'textfield',
- defaults: {
- // applied to each contained item
- width: 230,
- msgTarget: 'side'
- },
- items: [{
- fieldLabel: 'First Name',
- name: 'first',
- allowBlank: false,
- {@link Ext.Component#labelSeparator labelSeparator}: ':' // override labelSeparator layout config
- },{
- fieldLabel: 'Last Name',
- name: 'last'
- },{
- fieldLabel: 'Email',
- name: 'email',
- vtype:'email'
- }, {
- xtype: 'textarea',
- hideLabel: true, // override hideLabels layout config
- name: 'msg',
- anchor: '100% -53'
- }
- ],
- buttons: [
- {text: 'Save'},
- {text: 'Cancel'}
- ],
- layoutConfig: {
- {@link #labelSeparator}: '~' // superseded by assignment below
- },
- // config options applicable to container when layout='form':
- hideLabels: false,
- labelAlign: 'left', // or 'right' or 'top'
- {@link Ext.form.FormPanel#labelSeparator labelSeparator}: '>>', // takes precedence over layoutConfig value
- labelWidth: 65, // defaults to 100
- labelPad: 8 // defaults to 5, must specify labelWidth to be honored
-});
-This is a region of a {@link Ext.layout.BorderLayout BorderLayout} that acts as a subcontainer + * within the layout. Each region has its own {@link Ext.layout.ContainerLayout layout} that is + * independent of other regions and the containing BorderLayout, and can be any of the + * {@link Ext.layout.ContainerLayout valid Ext layout types}.
+ *Region size is managed automatically and cannot be changed by the user -- for + * {@link #split resizable regions}, see {@link Ext.layout.BorderLayout.SplitRegion}.
+ * @constructor + * Create a new Region. + * @param {Layout} layout The {@link Ext.layout.BorderLayout BorderLayout} instance that is managing this Region. + * @param {Object} config The configuration options + * @param {String} position The region position. Valid values are: north, south, + * east, west and center. Every {@link Ext.layout.BorderLayout BorderLayout} + * must have a center region for the primary content -- all other regions are optional. */ -Ext.layout.FormLayout = Ext.extend(Ext.layout.AnchorLayout, { +Ext.layout.BorderLayout.Region = function(layout, config, pos){ + Ext.apply(this, config); + this.layout = layout; + this.position = pos; + this.state = {}; + if(typeof this.margins == 'string'){ + this.margins = this.layout.parseMargins(this.margins); + } + this.margins = Ext.applyIf(this.margins || {}, this.defaultMargins); + if(this.collapsible){ + if(typeof this.cmargins == 'string'){ + this.cmargins = this.layout.parseMargins(this.cmargins); + } + if(this.collapseMode == 'mini' && !this.cmargins){ + this.cmargins = {left:0,top:0,right:0,bottom:0}; + }else{ + this.cmargins = Ext.applyIf(this.cmargins || {}, + pos == 'north' || pos == 'south' ? this.defaultNSCMargins : this.defaultEWCMargins); + } + } +}; +Ext.layout.BorderLayout.Region.prototype = { /** - * @cfg {String} labelSeparator - * See {@link Ext.form.FormPanel}.{@link Ext.form.FormPanel#labelSeparator labelSeparator}. Configuration - * of this property at the container level takes precedence. + * @cfg {Boolean} animFloat + * When a collapsed region's bar is clicked, the region's panel will be displayed as a floated + * panel that will close again once the user mouses out of that panel (or clicks out if + * {@link #autoHide} = false). Setting {@link #animFloat} = false will + * prevent the open and close of these floated panels from being animated (defaults to true). */ - labelSeparator : ':', - /** - * Read only. The CSS style specification string added to field labels in this layout if not - * otherwise {@link Ext.Component#labelStyle specified by each contained field}. - * @type String - * @property labelStyle + * @cfg {Boolean} autoHide + * When a collapsed region's bar is clicked, the region's panel will be displayed as a floated + * panel. If autoHide = true, the panel will automatically hide after the user mouses + * out of the panel. If autoHide = false, the panel will continue to display until the + * user clicks outside of the panel (defaults to true). */ - /** - * @cfg {Boolean} trackLabels - * True to show/hide the field label when the field is hidden. Defaults to false. + * @cfg {String} collapseMode + * collapseMode supports two configuration values:-
+ *
Note: if a collapsible region does not have a title bar, then set collapseMode = + * 'mini' and {@link #split} = true in order for the region to be {@link #collapsible} + * by the user as the expand/collapse tool button (that would go in the title bar) will not be rendered.
+ *See also {@link #cmargins}.
*/ - trackLabels: false, - - - onRemove: function(c){ - Ext.layout.FormLayout.superclass.onRemove.call(this, c); - if(this.trackLabels && !this.isHide(c)){ - 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){ - 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); - if(ct.labelAlign){ - ct.addClass('x-form-label-'+ct.labelAlign); - } + /** + * @cfg {Object} margins + * An object containing margins to apply to the region when in the expanded state in the + * format:
+{
+ top: (top margin),
+ right: (right margin),
+ bottom: (bottom margin),
+ left: (left margin)
+}May also be a string containing space-separated, numeric margin values. The order of the + * sides associated with each value matches the way CSS processes margin values:
+ *-
+ *
Defaults to:
+ * {top:0, right:0, bottom:0, left:0}
+ *
+{
+ top: (top margin),
+ right: (right margin),
+ bottom: (bottom margin),
+ left: (left margin)
+}May also be a string containing space-separated, numeric margin values. The order of the + * sides associated with each value matches the way CSS processes margin values.
+ *-
+ *
true to allow the user to collapse this region (defaults to false). If + * true, an expand/collapse tool button will automatically be rendered into the title + * bar of the region, otherwise the button will not be shown.
+ *Note: that a title bar is required to display the collapse/expand toggle button -- if + * no title is specified for the region's panel, the region will only be collapsible if + * {@link #collapseMode} = 'mini' and {@link #split} = true. + */ + collapsible : false, + /** + * @cfg {Boolean} split + *
true to create a {@link Ext.layout.BorderLayout.SplitRegion SplitRegion} and + * display a 5px wide {@link Ext.SplitBar} between this region and its neighbor, allowing the user to + * resize the regions dynamically. Defaults to false creating a + * {@link Ext.layout.BorderLayout.Region Region}.
+ *
Notes:
-
+ *
The minimum allowable width in pixels for this region (defaults to 50). + * maxWidth may also be specified.
+ *
Note: setting the {@link Ext.SplitBar#minSize minSize} / + * {@link Ext.SplitBar#maxSize maxSize} supersedes any specified + * minWidth / maxWidth.
+ */ + minWidth:50, + /** + * @cfg {Number} minHeight + * The minimum allowable height in pixels for this region (defaults to 50) + * maxHeight may also be specified.+ *
Note: setting the {@link Ext.SplitBar#minSize minSize} / + * {@link Ext.SplitBar#maxSize maxSize} supersedes any specified + * minHeight / maxHeight.
+ */ + minHeight:50, - if(ct.hideLabels){ - Ext.apply(this, { - labelStyle: 'display:none', - elementStyle: 'padding-left:0;', - labelAdjust: 0 + // private + defaultMargins : {left:0,top:0,right:0,bottom:0}, + // private + defaultNSCMargins : {left:5,top:5,right:5,bottom:5}, + // private + defaultEWCMargins : {left:5,top:0,right:5,bottom:0}, + floatingZIndex: 100, + + /** + * True if this region is collapsed. Read-only. + * @type Boolean + * @property + */ + isCollapsed : false, + + /** + * This region's panel. Read-only. + * @type Ext.Panel + * @property panel + */ + /** + * This region's layout. Read-only. + * @type Layout + * @property layout + */ + /** + * This region's layout position (north, south, east, west or center). Read-only. + * @type String + * @property position + */ + + // private + render : function(ct, p){ + this.panel = p; + p.el.enableDisplayMode(); + this.targetEl = ct; + this.el = p.el; + + var gs = p.getState, ps = this.position; + p.getState = function(){ + return Ext.apply(gs.call(p) || {}, this.state); + }.createDelegate(this); + + if(ps != 'center'){ + p.allowQueuedExpand = false; + p.on({ + beforecollapse: this.beforeCollapse, + collapse: this.onCollapse, + beforeexpand: this.beforeExpand, + expand: this.onExpand, + hide: this.onHide, + show: this.onShow, + scope: this }); - }else{ - this.labelSeparator = ct.labelSeparator || this.labelSeparator; - ct.labelWidth = ct.labelWidth || 100; - 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(this.collapsible || this.floatable){ + p.collapseEl = 'el'; + p.slideAnchor = this.getSlideAnchor(); } - if(ct.labelAlign == 'top'){ - Ext.apply(this, { - labelStyle: 'width:auto;', - labelAdjust: 0, - elementStyle: 'padding-left:0;' - }); + if(p.tools && p.tools.toggle){ + p.tools.toggle.addClass('x-tool-collapse-'+ps); + p.tools.toggle.addClassOnOver('x-tool-collapse-'+ps+'-over'); } } }, - - isHide: function(c){ - return c.hideLabel || this.container.hideLabels; + + // private + getCollapsedEl : function(){ + if(!this.collapsedEl){ + if(!this.toolTemplate){ + var tt = new Ext.Template( + '
-new Ext.Template(
- '<div class="x-form-item {itemCls}" tabIndex="-1">',
- '<label for="{id}" style="{labelStyle}" class="x-form-item-label">{label}{labelSeparator}</label>',
- '<div class="x-form-element" id="x-form-el-{id}" style="{elementStyle}">',
- '</div><div class="{clearCls}"></div>',
- '</div>'
-);
-This may be specified to produce a different DOM structure when rendering form Fields.
- *A description of the properties within the template follows:
-
- *
Also see {@link #getTemplateArgs}
- */ + // private + onCollapse : function(animate){ + this.panel.el.setStyle('z-index', 1); + if(this.lastAnim === false || this.panel.animCollapse === false){ + this.getCollapsedEl().dom.style.visibility = 'visible'; + }else{ + this.getCollapsedEl().slideIn(this.panel.slideAnchor, {duration:.2}); + } + this.state.collapsed = true; + this.panel.saveState(); + }, // private - renderItem : function(c, position, target){ - if(c && (c.isFormField || c.fieldLabel) && c.inputType != 'hidden'){ - var args = this.getTemplateArgs(c); - if(Ext.isNumber(position)){ - position = target.dom.childNodes[position] || null; - } - if(position){ - c.itemCt = this.fieldTpl.insertBefore(position, args, true); - }else{ - c.itemCt = this.fieldTpl.append(target, args, true); - } - 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()); - } - 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(this.trackLabels && !this.isHide(c)){ - 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); + beforeExpand : function(animate){ + if(this.isSlid){ + this.afterSlideIn(); } + var c = this.getCollapsedEl(); + this.el.show(); + if(this.position == 'east' || this.position == 'west'){ + this.panel.setSize(undefined, c.getHeight()); + }else{ + this.panel.setSize(c.getWidth(), undefined); + } + c.hide(); + c.dom.style.visibility = 'hidden'; + this.panel.el.setStyle('z-index', this.floatingZIndex); }, - /** - *Provides template arguments for rendering the fully wrapped, labeled and styled form Field.
- *This method returns an object hash containing properties used by the layout's {@link #fieldTpl} - * to create a correctly wrapped, labeled and styled form Field. This may be overriden to - * create custom layouts. The properties which must be returned are:
-
- *
This is a layout that manages multiple Panels in an expandable accordion style such that only - * one Panel can be expanded at any given time. Each Panel has built-in support for expanding and collapsing.
- *Note: Only Ext.Panels and all subclasses of Ext.Panel may be used in an accordion layout Container.
- *This class is intended to be extended or created via the {@link Ext.Container#layout layout} - * configuration property. See {@link Ext.Container#layout} for additional details.
- *Example usage:
- *
-var accordion = new Ext.Panel({
- title: 'Accordion Layout',
- layout:'accordion',
- defaults: {
- // applied to each contained panel
- bodyStyle: 'padding:15px'
- },
- layoutConfig: {
- // layout-specific configs go here
- titleCollapse: false,
- animate: true,
- activeOnTop: true
- },
- items: [{
- title: 'Panel 1',
- html: '<p>Panel content!</p>'
- },{
- title: 'Panel 2',
- html: '<p>Panel content!</p>'
- },{
- title: 'Panel 3',
- html: '<p>Panel content!</p>'
- }]
-});
-This layout allows you to easily render content into an HTML table. The total number of columns can be - * specified, and rowspan and colspan can be used to create complex layouts within the table. - * This class is intended to be extended or created via the layout:'table' {@link Ext.Container#layout} config, - * and should generally not need to be created directly via the new keyword.
- *Note that when creating a layout via config, the layout-specific config properties must be passed in via - * the {@link Ext.Container#layoutConfig} object which will then be applied internally to the layout. In the - * case of TableLayout, the only valid layout config property is {@link #columns}. However, the items added to a - * TableLayout can supply the following table-specific config properties:
- *-
- *
The basic concept of building up a TableLayout is conceptually very similar to building up a standard - * HTML table. You simply add each panel (or "cell") that you want to include along with any span attributes - * specified as the special config properties of rowspan and colspan which work exactly like their HTML counterparts. - * Rather than explicitly creating and nesting rows and columns as you would in HTML, you simply specify the - * total column count in the layoutConfig and start adding panels in their natural order from left to right, - * top to bottom. The layout will automatically figure out, based on the column count, rowspans and colspans, - * how to position each panel within the table. Just like with HTML tables, your rowspans and colspans must add - * up correctly in your overall layout or you'll end up with missing and/or extra cells! Example usage:
- *
-// This code will generate a layout table that is 3 columns by 2 rows
-// with some spanning included. The basic layout will be:
-// +--------+-----------------+
-// | A | B |
-// | |--------+--------|
-// | | C | D |
-// +--------+--------+--------+
-var table = new Ext.Panel({
- title: 'Table Layout',
- layout:'table',
- defaults: {
- // applied to each contained panel
- bodyStyle:'padding:20px'
- },
- layoutConfig: {
- // The total column count must be specified here
- columns: 3
- },
- items: [{
- html: '<p>Cell A content</p>',
- rowspan: 2
- },{
- html: '<p>Cell B content</p>',
- colspan: 2
- },{
- html: '<p>Cell C content</p>',
- cellCls: 'highlight'
- },{
- html: '<p>Cell D content</p>'
- }]
-});
-An object containing properties which are added to the {@link Ext.DomHelper DomHelper} specification - * used to create the layout's <table> element. Example:
-{
- xtype: 'panel',
- layout: 'table',
- layoutConfig: {
- tableAttrs: {
- style: {
- width: '100%'
- }
- },
- columns: 3
- }
-}This is a layout that inherits the anchoring of {@link Ext.layout.AnchorLayout} and adds the - * ability for x/y positioning using the standard x and y component config options.
- *This class is intended to be extended or created via the {@link Ext.Container#layout layout} - * configuration property. See {@link Ext.Container#layout} for additional details.
- *Example usage:
- *
-var form = new Ext.form.FormPanel({
- title: 'Absolute Layout',
- layout:'absolute',
- layoutConfig: {
- // layout-specific configs go here
- extraCls: 'x-abs-layout-item',
- },
- baseCls: 'x-plain',
- url:'save-form.php',
- defaultType: 'textfield',
- items: [{
- x: 0,
- y: 5,
- xtype:'label',
- text: 'Send To:'
- },{
- x: 60,
- y: 0,
- name: 'to',
- anchor:'100%' // anchor width by percentage
- },{
- x: 0,
- y: 35,
- xtype:'label',
- text: 'Subject:'
- },{
- x: 60,
- y: 30,
- name: 'subject',
- anchor: '100%' // anchor width by percentage
- },{
- x:0,
- y: 60,
- xtype: 'textarea',
- name: 'msg',
- anchor: '100% 100%' // anchor width and height
- }]
-});
-Base Class for HBoxLayout and VBoxLayout Classes. Generally it should not need to be used directly.
- */ -Ext.layout.BoxLayout = Ext.extend(Ext.layout.ContainerLayout, { - /** - * @cfg {Object} defaultMargins - *If the individual contained items do not have a margins - * property specified, the default margins from this property will be - * applied to each item.
- *This property may be specified as an object containing margins - * to apply in the format:
-{
- top: (top margin),
- right: (right margin),
- bottom: (bottom margin),
- left: (left margin)
-}This property may also be specified as a string containing - * space-separated, numeric margin values. The order of the sides associated - * with each value matches the way CSS processes margin values:
- *-
- *
Defaults to:
- * {top:0, right:0, bottom:0, left:0}
- * Sets the padding to be applied to all child items managed by this layout.
- *This property must be specified as a string containing - * space-separated, numeric padding values. The order of the sides associated - * with each value matches the way CSS processes padding values:
- *-
- *
Defaults to: "0"
A layout that arranges items vertically down a Container. This layout optionally divides available vertical
- * space between child items containing a numeric flex configuration.
-
- *
-
- *
A layout that arranges items horizontally across a Container. This layout optionally divides available horizontal
- * space between child items containing a numeric flex configuration.
-
- *
-
- *
A specialized container representing the viewable application area (the browser viewport).
- *The Viewport renders itself to the document body, and automatically sizes itself to the size of - * the browser viewport and manages window resizing. There may only be one Viewport created - * in a page. Inner layouts are available by virtue of the fact that all {@link Ext.Panel Panel}s - * added to the Viewport, either through its {@link #items}, or through the items, or the {@link #add} - * method of any of its child Panels may themselves have a layout.
- *The Viewport does not provide scrolling, so child Panels within the Viewport should provide - * for scrolling if needed using the {@link #autoScroll} config.
- *An example showing a classic application border layout:
-new Ext.Viewport({
- layout: 'border',
- items: [{
- region: 'north',
- html: '<h1 class="x-panel-header">Page Title</h1>',
- autoHeight: true,
- border: false,
- margins: '0 0 5 0'
- }, {
- region: 'west',
- collapsible: true,
- title: 'Navigation',
- width: 200
- // the west region might typically utilize a {@link Ext.tree.TreePanel TreePanel} or a Panel with {@link Ext.layout.AccordionLayout Accordion layout}
- }, {
- region: 'south',
- title: 'Title for Panel',
- collapsible: true,
- html: 'Information goes here',
- split: true,
- height: 100,
- minHeight: 100
- }, {
- region: 'east',
- title: 'Title for the Grid Panel',
- collapsible: true,
- split: true,
- width: 200,
- xtype: 'grid',
- // remaining grid configuration not shown ...
- // notice that the GridPanel is added directly as the region
- // it is not "overnested" inside another Panel
- }, {
- region: 'center',
- xtype: 'tabpanel', // TabPanel itself has no title
- items: {
- title: 'Default Tab',
- html: 'The first tab\'s content. Others may be added dynamically'
- }
- }]
-});
-Panel is a container that has specific functionality and structural components that make - * it the perfect building block for application-oriented user interfaces.
- *Panels are, by virtue of their inheritance from {@link Ext.Container}, capable - * of being configured with a {@link Ext.Container#layout layout}, and containing child Components.
- *When either specifying child {@link Ext.Component#items items} of a Panel, or dynamically {@link Ext.Container#add adding} Components
- * to a Panel, remember to consider how you wish the Panel to arrange those child elements, and whether
- * those child elements need to be sized using one of Ext's built-in {@link Ext.Container#layout layout} schemes. By
- * default, Panels use the {@link Ext.layout.ContainerLayout ContainerLayout} scheme. This simply renders
- * child components, appending them one after the other inside the Container, and does not apply any sizing
- * at all.
A Panel may also contain {@link #bbar bottom} and {@link #tbar top} toolbars, along with separate - * {@link #header}, {@link #footer} and {@link #body} sections (see {@link #frame} for additional - * information).
- *Panel also provides built-in {@link #collapsible expandable and collapsible behavior}, along with - * a variety of {@link #tools prebuilt tool buttons} that can be wired up to provide other customized - * behavior. Panels can be easily dropped into any {@link Ext.Container Container} or layout, and the - * layout and rendering pipeline is {@link Ext.Container#add completely managed by the framework}.
- * @constructor - * @param {Object} config The config object - * @xtype panel - */ -Ext.Panel = Ext.extend(Ext.Container, { /** - * The Panel's header {@link Ext.Element Element}. Read-only. - *This Element is used to house the {@link #title} and {@link #tools}
- *Note: see the Note for {@link Ext.Component#el el} also.
If this is used to load visible HTML elements in either way, then - * the Panel may not be used as a Layout for hosting nested Panels.
- *If this Panel is intended to be used as the host of a Layout (See {@link #layout}
- * then the body Element must not be loaded or changed - it is under the control
- * of the Panel's Layout.
- *
Note: see the Note for {@link Ext.Component#el el} also.
A {@link Ext.DomHelper DomHelper} element specification object may be specified for any - * Panel Element.
- *By default, the Default element in the table below will be used for the html markup to
- * create a child element with the commensurate Default class name (baseCls will be
- * replaced by {@link #baseCls}):
- * Panel Default Default Custom Additional Additional
- * Element element class element class style
- * ======== ========================== ========= ============== ===========
- * {@link #header} div {@link #baseCls}+'-header' {@link #headerCfg} headerCssClass headerStyle
+ * Returns the minimum allowable height for this region.
+ * @return {Number} The minimum height
+ */
+ getMinHeight: function(){
+ return this.minHeight;
+ },
+
+ // private
+ applyLayoutCollapsed : function(box){
+ var ce = this.getCollapsedEl();
+ ce.setLeftTop(box.x, box.y);
+ ce.setSize(box.width, box.height);
+ },
+
+ // private
+ applyLayout : function(box){
+ if(this.isCollapsed){
+ this.applyLayoutCollapsed(box);
+ }else{
+ this.panel.setPosition(box.x, box.y);
+ this.panel.setSize(box.width, box.height);
+ }
+ },
+
+ // private
+ beforeSlide: function(){
+ this.panel.beforeEffect();
+ },
+
+ // private
+ afterSlide : function(){
+ this.panel.afterEffect();
+ },
+
+ // private
+ initAutoHide : function(){
+ if(this.autoHide !== false){
+ if(!this.autoHideHd){
+ this.autoHideSlideTask = new Ext.util.DelayedTask(this.slideIn, this);
+ this.autoHideHd = {
+ "mouseout": function(e){
+ if(!e.within(this.el, true)){
+ this.autoHideSlideTask.delay(500);
+ }
+ },
+ "mouseover" : function(e){
+ this.autoHideSlideTask.cancel();
+ },
+ scope : this
+ };
+ }
+ this.el.on(this.autoHideHd);
+ this.collapsedEl.on(this.autoHideHd);
+ }
+ },
+
+ // private
+ clearAutoHide : function(){
+ if(this.autoHide !== false){
+ this.el.un("mouseout", this.autoHideHd.mouseout);
+ this.el.un("mouseover", this.autoHideHd.mouseover);
+ this.collapsedEl.un("mouseout", this.autoHideHd.mouseout);
+ this.collapsedEl.un("mouseover", this.autoHideHd.mouseover);
+ }
+ },
+
+ // private
+ clearMonitor : function(){
+ Ext.getDoc().un("click", this.slideInIf, this);
+ },
+
+ /**
+ * If this Region is {@link #floatable}, this method slides this Region into full visibility over the top
+ * of the center Region where it floats until either {@link #slideIn} is called, or other regions of the layout
+ * are clicked, or the mouse exits the Region.
+ */
+ slideOut : function(){
+ if(this.isSlid || this.el.hasActiveFx()){
+ return;
+ }
+ this.isSlid = true;
+ var ts = this.panel.tools, dh, pc;
+ if(ts && ts.toggle){
+ ts.toggle.hide();
+ }
+ this.el.show();
+
+ // Temporarily clear the collapsed flag so we can onResize the panel on the slide
+ pc = this.panel.collapsed;
+ this.panel.collapsed = false;
+
+ if(this.position == 'east' || this.position == 'west'){
+ // Temporarily clear the deferHeight flag so we can size the height on the slide
+ dh = this.panel.deferHeight;
+ this.panel.deferHeight = false;
+
+ this.panel.setSize(undefined, this.collapsedEl.getHeight());
+
+ // Put the deferHeight flag back after setSize
+ this.panel.deferHeight = dh;
+ }else{
+ this.panel.setSize(this.collapsedEl.getWidth(), undefined);
+ }
+
+ // Put the collapsed flag back after onResize
+ this.panel.collapsed = pc;
+
+ this.restoreLT = [this.el.dom.style.left, this.el.dom.style.top];
+ this.el.alignTo(this.collapsedEl, this.getCollapseAnchor());
+ this.el.setStyle("z-index", this.floatingZIndex+2);
+ this.panel.el.replaceClass('x-panel-collapsed', 'x-panel-floating');
+ if(this.animFloat !== false){
+ this.beforeSlide();
+ this.el.slideIn(this.getSlideAnchor(), {
+ callback: function(){
+ this.afterSlide();
+ this.initAutoHide();
+ Ext.getDoc().on("click", this.slideInIf, this);
+ },
+ scope: this,
+ block: true
+ });
+ }else{
+ this.initAutoHide();
+ Ext.getDoc().on("click", this.slideInIf, this);
+ }
+ },
+
+ // private
+ afterSlideIn : function(){
+ this.clearAutoHide();
+ this.isSlid = false;
+ this.clearMonitor();
+ this.el.setStyle("z-index", "");
+ this.panel.el.replaceClass('x-panel-floating', 'x-panel-collapsed');
+ this.el.dom.style.left = this.restoreLT[0];
+ this.el.dom.style.top = this.restoreLT[1];
+
+ var ts = this.panel.tools;
+ if(ts && ts.toggle){
+ ts.toggle.show();
+ }
+ },
+
+ /**
+ * If this Region is {@link #floatable}, and this Region has been slid into floating visibility, then this method slides
+ * this region back into its collapsed state.
+ */
+ slideIn : function(cb){
+ if(!this.isSlid || this.el.hasActiveFx()){
+ Ext.callback(cb);
+ return;
+ }
+ this.isSlid = false;
+ if(this.animFloat !== false){
+ this.beforeSlide();
+ this.el.slideOut(this.getSlideAnchor(), {
+ callback: function(){
+ this.el.hide();
+ this.afterSlide();
+ this.afterSlideIn();
+ Ext.callback(cb);
+ },
+ scope: this,
+ block: true
+ });
+ }else{
+ this.el.hide();
+ this.afterSlideIn();
+ }
+ },
+
+ // private
+ slideInIf : function(e){
+ if(!e.within(this.el)){
+ this.slideIn();
+ }
+ },
+
+ // private
+ anchors : {
+ "west" : "left",
+ "east" : "right",
+ "north" : "top",
+ "south" : "bottom"
+ },
+
+ // private
+ sanchors : {
+ "west" : "l",
+ "east" : "r",
+ "north" : "t",
+ "south" : "b"
+ },
+
+ // private
+ canchors : {
+ "west" : "tl-tr",
+ "east" : "tr-tl",
+ "north" : "tl-bl",
+ "south" : "bl-tl"
+ },
+
+ // private
+ getAnchor : function(){
+ return this.anchors[this.position];
+ },
+
+ // private
+ getCollapseAnchor : function(){
+ return this.canchors[this.position];
+ },
+
+ // private
+ getSlideAnchor : function(){
+ return this.sanchors[this.position];
+ },
+
+ // private
+ getAlignAdj : function(){
+ var cm = this.cmargins;
+ switch(this.position){
+ case "west":
+ return [0, 0];
+ break;
+ case "east":
+ return [0, 0];
+ break;
+ case "north":
+ return [0, 0];
+ break;
+ case "south":
+ return [0, 0];
+ break;
+ }
+ },
+
+ // private
+ getExpandAdj : function(){
+ var c = this.collapsedEl, cm = this.cmargins;
+ switch(this.position){
+ case "west":
+ return [-(cm.right+c.getWidth()+cm.left), 0];
+ break;
+ case "east":
+ return [cm.right+c.getWidth()+cm.left, 0];
+ break;
+ case "north":
+ return [0, -(cm.top+cm.bottom+c.getHeight())];
+ break;
+ case "south":
+ return [0, cm.top+cm.bottom+c.getHeight()];
+ break;
+ }
+ },
+
+ destroy : function(){
+ if (this.autoHideSlideTask && this.autoHideSlideTask.cancel){
+ this.autoHideSlideTask.cancel();
+ }
+ Ext.destroyMembers(this, 'miniCollapsedEl', 'collapsedEl', 'expandToolEl');
+ }
+};
+
+/**
+ * @class Ext.layout.BorderLayout.SplitRegion
+ * @extends Ext.layout.BorderLayout.Region
+ * This is a specialized type of {@link Ext.layout.BorderLayout.Region BorderLayout region} that
+ * has a built-in {@link Ext.SplitBar} for user resizing of regions. The movement of the split bar
+ * is configurable to move either {@link #tickSize smooth or incrementally}.
+ * @constructor
+ * Create a new SplitRegion.
+ * @param {Layout} layout The {@link Ext.layout.BorderLayout BorderLayout} instance that is managing this Region.
+ * @param {Object} config The configuration options
+ * @param {String} position The region position. Valid values are: north, south, east, west and center. Every
+ * BorderLayout must have a center region for the primary content -- all other regions are optional.
+ */
+Ext.layout.BorderLayout.SplitRegion = function(layout, config, pos){
+ Ext.layout.BorderLayout.SplitRegion.superclass.constructor.call(this, layout, config, pos);
+ // prevent switch
+ this.applyLayout = this.applyFns[pos];
+};
+
+Ext.extend(Ext.layout.BorderLayout.SplitRegion, Ext.layout.BorderLayout.Region, {
+ /**
+ * @cfg {Number} tickSize
+ * The increment, in pixels by which to move this Region's {@link Ext.SplitBar SplitBar}.
+ * By default, the {@link Ext.SplitBar SplitBar} moves smoothly.
+ */
+ /**
+ * @cfg {String} splitTip
+ * The tooltip to display when the user hovers over a
+ * {@link Ext.layout.BorderLayout.Region#collapsible non-collapsible} region's split bar
+ * (defaults to "Drag to resize."). Only applies if
+ * {@link #useSplitTips} = true.
+ */
+ splitTip : "Drag to resize.",
+ /**
+ * @cfg {String} collapsibleSplitTip
+ * The tooltip to display when the user hovers over a
+ * {@link Ext.layout.BorderLayout.Region#collapsible collapsible} region's split bar
+ * (defaults to "Drag to resize. Double click to hide."). Only applies if
+ * {@link #useSplitTips} = true.
+ */
+ collapsibleSplitTip : "Drag to resize. Double click to hide.",
+ /**
+ * @cfg {Boolean} useSplitTips
+ * true to display a tooltip when the user hovers over a region's split bar
+ * (defaults to false). The tooltip text will be the value of either
+ * {@link #splitTip} or {@link #collapsibleSplitTip} as appropriate.
+ */
+ useSplitTips : false,
+
+ // private
+ splitSettings : {
+ north : {
+ orientation: Ext.SplitBar.VERTICAL,
+ placement: Ext.SplitBar.TOP,
+ maxFn : 'getVMaxSize',
+ minProp: 'minHeight',
+ maxProp: 'maxHeight'
+ },
+ south : {
+ orientation: Ext.SplitBar.VERTICAL,
+ placement: Ext.SplitBar.BOTTOM,
+ maxFn : 'getVMaxSize',
+ minProp: 'minHeight',
+ maxProp: 'maxHeight'
+ },
+ east : {
+ orientation: Ext.SplitBar.HORIZONTAL,
+ placement: Ext.SplitBar.RIGHT,
+ maxFn : 'getHMaxSize',
+ minProp: 'minWidth',
+ maxProp: 'maxWidth'
+ },
+ west : {
+ orientation: Ext.SplitBar.HORIZONTAL,
+ placement: Ext.SplitBar.LEFT,
+ maxFn : 'getHMaxSize',
+ minProp: 'minWidth',
+ maxProp: 'maxWidth'
+ }
+ },
+
+ // private
+ applyFns : {
+ west : function(box){
+ if(this.isCollapsed){
+ return this.applyLayoutCollapsed(box);
+ }
+ var sd = this.splitEl.dom, s = sd.style;
+ this.panel.setPosition(box.x, box.y);
+ var sw = sd.offsetWidth;
+ s.left = (box.x+box.width-sw)+'px';
+ s.top = (box.y)+'px';
+ s.height = Math.max(0, box.height)+'px';
+ this.panel.setSize(box.width-sw, box.height);
+ },
+ east : function(box){
+ if(this.isCollapsed){
+ return this.applyLayoutCollapsed(box);
+ }
+ var sd = this.splitEl.dom, s = sd.style;
+ var sw = sd.offsetWidth;
+ this.panel.setPosition(box.x+sw, box.y);
+ s.left = (box.x)+'px';
+ s.top = (box.y)+'px';
+ s.height = Math.max(0, box.height)+'px';
+ this.panel.setSize(box.width-sw, box.height);
+ },
+ north : function(box){
+ if(this.isCollapsed){
+ return this.applyLayoutCollapsed(box);
+ }
+ var sd = this.splitEl.dom, s = sd.style;
+ var sh = sd.offsetHeight;
+ this.panel.setPosition(box.x, box.y);
+ s.left = (box.x)+'px';
+ s.top = (box.y+box.height-sh)+'px';
+ s.width = Math.max(0, box.width)+'px';
+ this.panel.setSize(box.width, box.height-sh);
+ },
+ south : function(box){
+ if(this.isCollapsed){
+ return this.applyLayoutCollapsed(box);
+ }
+ var sd = this.splitEl.dom, s = sd.style;
+ var sh = sd.offsetHeight;
+ this.panel.setPosition(box.x, box.y+sh);
+ s.left = (box.x)+'px';
+ s.top = (box.y)+'px';
+ s.width = Math.max(0, box.width)+'px';
+ this.panel.setSize(box.width, box.height-sh);
+ }
+ },
+
+ // private
+ render : function(ct, p){
+ Ext.layout.BorderLayout.SplitRegion.superclass.render.call(this, ct, p);
+
+ var ps = this.position;
+
+ this.splitEl = ct.createChild({
+ cls: "x-layout-split x-layout-split-"+ps, html: " ",
+ id: this.panel.id + '-xsplit'
+ });
+
+ if(this.collapseMode == 'mini'){
+ this.miniSplitEl = this.splitEl.createChild({
+ cls: "x-layout-mini x-layout-mini-"+ps, html: " "
+ });
+ this.miniSplitEl.addClassOnOver('x-layout-mini-over');
+ this.miniSplitEl.on('click', this.onCollapseClick, this, {stopEvent:true});
+ }
+
+ var s = this.splitSettings[ps];
+
+ this.split = new Ext.SplitBar(this.splitEl.dom, p.el, s.orientation);
+ this.split.tickSize = this.tickSize;
+ this.split.placement = s.placement;
+ this.split.getMaximumSize = this[s.maxFn].createDelegate(this);
+ this.split.minSize = this.minSize || this[s.minProp];
+ this.split.on("beforeapply", this.onSplitMove, this);
+ this.split.useShim = this.useShim === true;
+ this.maxSize = this.maxSize || this[s.maxProp];
+
+ if(p.hidden){
+ this.splitEl.hide();
+ }
+
+ if(this.useSplitTips){
+ this.splitEl.dom.title = this.collapsible ? this.collapsibleSplitTip : this.splitTip;
+ }
+ if(this.collapsible){
+ this.splitEl.on("dblclick", this.onCollapseClick, this);
+ }
+ },
+
+ //docs inherit from superclass
+ getSize : function(){
+ if(this.isCollapsed){
+ return this.collapsedEl.getSize();
+ }
+ var s = this.panel.getSize();
+ if(this.position == 'north' || this.position == 'south'){
+ s.height += this.splitEl.dom.offsetHeight;
+ }else{
+ s.width += this.splitEl.dom.offsetWidth;
+ }
+ return s;
+ },
+
+ // private
+ getHMaxSize : function(){
+ var cmax = this.maxSize || 10000;
+ var center = this.layout.center;
+ return Math.min(cmax, (this.el.getWidth()+center.el.getWidth())-center.getMinWidth());
+ },
+
+ // private
+ getVMaxSize : function(){
+ var cmax = this.maxSize || 10000;
+ var center = this.layout.center;
+ return Math.min(cmax, (this.el.getHeight()+center.el.getHeight())-center.getMinHeight());
+ },
+
+ // private
+ onSplitMove : function(split, newSize){
+ var s = this.panel.getSize();
+ this.lastSplitSize = newSize;
+ if(this.position == 'north' || this.position == 'south'){
+ this.panel.setSize(s.width, newSize);
+ this.state.height = newSize;
+ }else{
+ this.panel.setSize(newSize, s.height);
+ this.state.width = newSize;
+ }
+ this.layout.layout();
+ this.panel.saveState();
+ return false;
+ },
+
+ /**
+ * Returns a reference to the split bar in use by this region.
+ * @return {Ext.SplitBar} The split bar
+ */
+ getSplitBar : function(){
+ return this.split;
+ },
+
+ // inherit docs
+ destroy : function() {
+ Ext.destroy(this.miniSplitEl, this.split, this.splitEl);
+ Ext.layout.BorderLayout.SplitRegion.superclass.destroy.call(this);
+ }
+});
+
+Ext.Container.LAYOUTS['border'] = Ext.layout.BorderLayout;
+/**
+ * @class Ext.layout.FormLayout
+ * @extends Ext.layout.AnchorLayout
+ * This layout manager is specifically designed for rendering and managing child Components of
+ * {@link Ext.form.FormPanel forms}. It is responsible for rendering the labels of
+ * {@link Ext.form.Field Field}s.
+ *
+ * This layout manager is used when a Container is configured with the layout:'form'
+ * {@link Ext.Container#layout layout} config option, and should generally not need to be created directly
+ * via the new keyword. See {@link Ext.Container#layout} for additional details.
+ *
+ * In an application, it will usually be preferrable to use a {@link Ext.form.FormPanel FormPanel}
+ * (which is configured with FormLayout as its layout class by default) since it also provides built-in
+ * functionality for {@link Ext.form.BasicForm#doAction loading, validating and submitting} the form.
+ *
+ * A {@link Ext.Container Container} using the FormLayout layout manager (e.g.
+ * {@link Ext.form.FormPanel} or specifying layout:'form') can also accept the following
+ * layout-specific config properties:
+ *
+ *
+ * Any Component (including Fields) managed by FormLayout accepts the following as a config option:
+ *
+ *
+ *
+ * Any Component managed by FormLayout may be rendered as a form field (with an associated label) by
+ * configuring it with a non-null {@link Ext.Component#fieldLabel fieldLabel}. Components configured
+ * in this way may be configured with the following options which affect the way the FormLayout renders them:
+ *
+ *
+ *
+ * Example usage:
+ *
+// Required if showing validation messages
+Ext.QuickTips.init();
+
+// While you can create a basic Panel with layout:'form', practically
+// you should usually use a FormPanel to also get its form functionality
+// since it already creates a FormLayout internally.
+var form = new Ext.form.FormPanel({
+ title: 'Form Layout',
+ bodyStyle: 'padding:15px',
+ width: 350,
+ defaultType: 'textfield',
+ defaults: {
+ // applied to each contained item
+ width: 230,
+ msgTarget: 'side'
+ },
+ items: [{
+ fieldLabel: 'First Name',
+ name: 'first',
+ allowBlank: false,
+ {@link Ext.Component#labelSeparator labelSeparator}: ':' // override labelSeparator layout config
+ },{
+ fieldLabel: 'Last Name',
+ name: 'last'
+ },{
+ fieldLabel: 'Email',
+ name: 'email',
+ vtype:'email'
+ }, {
+ xtype: 'textarea',
+ hideLabel: true, // override hideLabels layout config
+ name: 'msg',
+ anchor: '100% -53'
+ }
+ ],
+ buttons: [
+ {text: 'Save'},
+ {text: 'Cancel'}
+ ],
+ layoutConfig: {
+ {@link #labelSeparator}: '~' // superseded by assignment below
+ },
+ // config options applicable to container when layout='form':
+ hideLabels: false,
+ labelAlign: 'left', // or 'right' or 'top'
+ {@link Ext.form.FormPanel#labelSeparator labelSeparator}: '>>', // takes precedence over layoutConfig value
+ labelWidth: 65, // defaults to 100
+ labelPad: 8 // defaults to 5, must specify labelWidth to be honored
+});
+
+ */
+Ext.layout.FormLayout = Ext.extend(Ext.layout.AnchorLayout, {
+
+ /**
+ * @cfg {String} labelSeparator
+ * See {@link Ext.form.FormPanel}.{@link Ext.form.FormPanel#labelSeparator labelSeparator}. Configuration
+ * of this property at the container level takes precedence.
+ */
+ labelSeparator : ':',
+
+ /**
+ * Read only. The CSS style specification string added to field labels in this layout if not
+ * otherwise {@link Ext.Component#labelStyle specified by each contained field}.
+ * @type String
+ * @property labelStyle
+ */
+
+ /**
+ * @cfg {Boolean} trackLabels
+ * True to show/hide the field label when the field is hidden. Defaults to false.
+ */
+ trackLabels: false,
+
+ type: 'form',
+
+ 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);
+ if(ct.labelAlign){
+ ct.addClass('x-form-label-'+ct.labelAlign);
+ }
+
+ if(ct.hideLabels){
+ Ext.apply(this, {
+ labelStyle: 'display:none',
+ elementStyle: 'padding-left:0;',
+ labelAdjust: 0
+ });
+ }else{
+ this.labelSeparator = Ext.isDefined(ct.labelSeparator) ? ct.labelSeparator : this.labelSeparator;
+ ct.labelWidth = ct.labelWidth || 100;
+ 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'){
+ 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);
+
+ // Composite fields will need to layout after the container is made visible
+ if (c.isComposite) {
+ c.doLayout();
+ }
+ },
+
+ onFieldHide: function(c){
+ c.getItemCt().addClass('x-hide-' + c.hideMode);
+ },
+
+ //private
+ getLabelStyle: function(s){
+ var ls = '', items = [this.labelStyle, s];
+ for (var i = 0, len = items.length; i < len; ++i){
+ if (items[i]){
+ ls += items[i];
+ if (ls.substr(-1, 1) != ';'){
+ ls += ';';
+ }
+ }
+ }
+ return ls;
+ },
+
+ /**
+ * @cfg {Ext.Template} fieldTpl
+ * A {@link Ext.Template#compile compile}d {@link Ext.Template} for rendering
+ * the fully wrapped, labeled and styled form Field. Defaults to:
+new Ext.Template(
+ '<div class="x-form-item {itemCls}" tabIndex="-1">',
+ '<label for="{id}" style="{labelStyle}" class="x-form-item-label">{label}{labelSeparator}</label>',
+ '<div class="x-form-element" id="x-form-el-{id}" style="{elementStyle}">',
+ '</div><div class="{clearCls}"></div>',
+ '</div>'
+);
+
+ * This may be specified to produce a different DOM structure when rendering form Fields.
+ * A description of the properties within the template follows:
+ *
+ * Also see {@link #getTemplateArgs}
+ */
+
+ /**
+ * @private
+ *
+ */
+ renderItem : function(c, position, target){
+ if(c && (c.isFormField || c.fieldLabel) && c.inputType != 'hidden'){
+ var args = this.getTemplateArgs(c);
+ if(Ext.isNumber(position)){
+ position = target.dom.childNodes[position] || null;
+ }
+ if(position){
+ c.itemCt = this.fieldTpl.insertBefore(position, args, true);
+ }else{
+ 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());
+ }
+ 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);
+ }
+ },
+
+ /**
+ * Provides template arguments for rendering the fully wrapped, labeled and styled form Field.
+ * This method returns an object hash containing properties used by the layout's {@link #fieldTpl}
+ * to create a correctly wrapped, labeled and styled form Field. This may be overriden to
+ * create custom layouts. The properties which must be returned are:
+ *
+ * @param (Ext.form.Field} field The {@link Ext.form.Field Field} being rendered.
+ * @return {Object} An object hash containing the properties required to render the Field.
+ */
+ getTemplateArgs: function(field) {
+ var noLabelSep = !field.fieldLabel || field.hideLabel;
+
+ return {
+ id : field.id,
+ label : field.fieldLabel,
+ itemCls : (field.itemCls || this.container.itemCls || '') + (field.hideLabel ? ' x-hide-label' : ''),
+ clearCls : field.clearCls || 'x-form-clear-left',
+ labelStyle : this.getLabelStyle(field.labelStyle),
+ elementStyle : this.elementStyle || '',
+ labelSeparator: noLabelSep ? '' : (Ext.isDefined(field.labelSeparator) ? field.labelSeparator : this.labelSeparator)
+ };
+ },
+
+ // private
+ 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 target && this.container.getEl().contains(c.getPositionEl());
+ }
+
+ /**
+ * @property activeItem
+ * @hide
+ */
+});
+
+Ext.Container.LAYOUTS['form'] = Ext.layout.FormLayout;
+/**
+ * @class Ext.layout.AccordionLayout
+ * @extends Ext.layout.FitLayout
+ * This is a layout that manages multiple Panels in an expandable accordion style such that only
+ * one Panel can be expanded at any given time. Each Panel has built-in support for expanding and collapsing.
+ * Note: Only Ext.Panels and all subclasses of Ext.Panel may be used in an accordion layout Container.
+ * This class is intended to be extended or created via the {@link Ext.Container#layout layout}
+ * configuration property. See {@link Ext.Container#layout} for additional details.
+ * Example usage:
+ *
+var accordion = new Ext.Panel({
+ title: 'Accordion Layout',
+ layout:'accordion',
+ defaults: {
+ // applied to each contained panel
+ bodyStyle: 'padding:15px'
+ },
+ layoutConfig: {
+ // layout-specific configs go here
+ titleCollapse: false,
+ animate: true,
+ activeOnTop: true
+ },
+ items: [{
+ title: 'Panel 1',
+ html: '<p>Panel content!</p>'
+ },{
+ title: 'Panel 2',
+ html: '<p>Panel content!</p>'
+ },{
+ title: 'Panel 3',
+ html: '<p>Panel content!</p>'
+ }]
+});
+
+ */
+Ext.layout.AccordionLayout = Ext.extend(Ext.layout.FitLayout, {
+ /**
+ * @cfg {Boolean} fill
+ * True to adjust the active item's height to fill the available space in the container, false to use the
+ * item's current height, or auto height if not explicitly set (defaults to true).
+ */
+ fill : true,
+ /**
+ * @cfg {Boolean} autoWidth
+ * True to set each contained item's width to 'auto', false to use the item's current width (defaults to true).
+ * Note that some components, in particular the {@link Ext.grid.GridPanel grid}, will not function properly within
+ * layouts if they have auto width, so in such cases this config should be set to false.
+ */
+ autoWidth : true,
+ /**
+ * @cfg {Boolean} titleCollapse
+ * True to allow expand/collapse of each contained panel by clicking anywhere on the title bar, false to allow
+ * expand/collapse only when the toggle tool button is clicked (defaults to true). When set to false,
+ * {@link #hideCollapseTool} should be false also.
+ */
+ titleCollapse : true,
+ /**
+ * @cfg {Boolean} hideCollapseTool
+ * True to hide the contained panels' collapse/expand toggle buttons, false to display them (defaults to false).
+ * When set to true, {@link #titleCollapse} should be true also.
+ */
+ hideCollapseTool : false,
+ /**
+ * @cfg {Boolean} collapseFirst
+ * True to make sure the collapse/expand toggle button always renders first (to the left of) any other tools
+ * in the contained panels' title bars, false to render it last (defaults to false).
+ */
+ collapseFirst : false,
+ /**
+ * @cfg {Boolean} animate
+ * True to slide the contained panels open and closed during expand/collapse using animation, false to open and
+ * close directly with no animation (defaults to false). Note: to defer to the specific config setting of each
+ * contained panel for this property, set this to undefined at the layout level.
+ */
+ animate : false,
+ /**
+ * @cfg {Boolean} sequence
+ * Experimental. If animate is set to true, this will result in each animation running in sequence.
+ */
+ sequence : false,
+ /**
+ * @cfg {Boolean} activeOnTop
+ * True to swap the position of each panel as it is expanded so that it becomes the first item in the container,
+ * false to keep the panels in the rendered order. This is NOT compatible with "animate:true" (defaults to false).
+ */
+ activeOnTop : false,
+
+ type: 'accordion',
+
+ renderItem : function(c){
+ if(this.animate === false){
+ c.animCollapse = false;
+ }
+ c.collapsible = true;
+ if(this.autoWidth){
+ c.autoWidth = true;
+ }
+ if(this.titleCollapse){
+ c.titleCollapse = true;
+ }
+ if(this.hideCollapseTool){
+ c.hideCollapseTool = true;
+ }
+ if(this.collapseFirst !== undefined){
+ c.collapseFirst = this.collapseFirst;
+ }
+ if(!this.activeItem && !c.collapsed){
+ this.setActiveItem(c, true);
+ }else if(this.activeItem && this.activeItem != c){
+ c.collapsed = true;
+ }
+ Ext.layout.AccordionLayout.superclass.renderItem.apply(this, arguments);
+ c.header.addClass('x-accordion-hd');
+ c.on('beforeexpand', this.beforeExpand, this);
+ },
+
+ onRemove: function(c){
+ Ext.layout.AccordionLayout.superclass.onRemove.call(this, c);
+ if(c.rendered){
+ c.header.removeClass('x-accordion-hd');
+ }
+ c.un('beforeexpand', this.beforeExpand, this);
+ },
+
+ // private
+ beforeExpand : function(p, anim){
+ var ai = this.activeItem;
+ if(ai){
+ if(this.sequence){
+ delete this.activeItem;
+ if (!ai.collapsed){
+ ai.collapse({callback:function(){
+ p.expand(anim || true);
+ }, scope: this});
+ return false;
+ }
+ }else{
+ ai.collapse(this.animate);
+ }
+ }
+ this.setActive(p);
+ if(this.activeOnTop){
+ p.el.dom.parentNode.insertBefore(p.el.dom, p.el.dom.parentNode.firstChild);
+ }
+ // Items have been hidden an possibly rearranged, we need to get the container size again.
+ this.layout();
+ },
+
+ // private
+ setItemSize : function(item, size){
+ if(this.fill && item){
+ var hh = 0, i, ct = this.getRenderedItems(this.container), len = ct.length, p;
+ // Add up all the header heights
+ for (i = 0; i < len; i++) {
+ if((p = ct[i]) != item && !p.hidden){
+ hh += p.header.getHeight();
+ }
+ };
+ // Subtract the header heights from the container size
+ size.height -= hh;
+ // Call setSize on the container to set the correct height. For Panels, deferedHeight
+ // will simply store this size for when the expansion is done.
+ item.setSize(size);
+ }
+ },
+
+ /**
+ * Sets the active (expanded) item in the layout.
+ * @param {String/Number} item The string component id or numeric index of the item to activate
+ */
+ setActiveItem : function(item){
+ this.setActive(item, true);
+ },
+
+ // private
+ setActive : function(item, expand){
+ var ai = this.activeItem;
+ item = this.container.getComponent(item);
+ if(ai != item){
+ if(item.rendered && item.collapsed && expand){
+ item.expand();
+ }else{
+ if(ai){
+ ai.fireEvent('deactivate', ai);
+ }
+ this.activeItem = item;
+ item.fireEvent('activate', item);
+ }
+ }
+ }
+});
+Ext.Container.LAYOUTS.accordion = Ext.layout.AccordionLayout;
+
+//backwards compat
+Ext.layout.Accordion = Ext.layout.AccordionLayout;/**
+ * @class Ext.layout.TableLayout
+ * @extends Ext.layout.ContainerLayout
+ * This layout allows you to easily render content into an HTML table. The total number of columns can be
+ * specified, and rowspan and colspan can be used to create complex layouts within the table.
+ * This class is intended to be extended or created via the layout:'table' {@link Ext.Container#layout} config,
+ * and should generally not need to be created directly via the new keyword.
+ * Note that when creating a layout via config, the layout-specific config properties must be passed in via
+ * the {@link Ext.Container#layoutConfig} object which will then be applied internally to the layout. In the
+ * case of TableLayout, the only valid layout config property is {@link #columns}. However, the items added to a
+ * TableLayout can supply the following table-specific config properties:
+ * -
+ *
The basic concept of building up a TableLayout is conceptually very similar to building up a standard + * HTML table. You simply add each panel (or "cell") that you want to include along with any span attributes + * specified as the special config properties of rowspan and colspan which work exactly like their HTML counterparts. + * Rather than explicitly creating and nesting rows and columns as you would in HTML, you simply specify the + * total column count in the layoutConfig and start adding panels in their natural order from left to right, + * top to bottom. The layout will automatically figure out, based on the column count, rowspans and colspans, + * how to position each panel within the table. Just like with HTML tables, your rowspans and colspans must add + * up correctly in your overall layout or you'll end up with missing and/or extra cells! Example usage:
+ *
+// This code will generate a layout table that is 3 columns by 2 rows
+// with some spanning included. The basic layout will be:
+// +--------+-----------------+
+// | A | B |
+// | |--------+--------|
+// | | C | D |
+// +--------+--------+--------+
+var table = new Ext.Panel({
+ title: 'Table Layout',
+ layout:'table',
+ defaults: {
+ // applied to each contained panel
+ bodyStyle:'padding:20px'
+ },
+ layoutConfig: {
+ // The total column count must be specified here
+ columns: 3
+ },
+ items: [{
+ html: '<p>Cell A content</p>',
+ rowspan: 2
+ },{
+ html: '<p>Cell B content</p>',
+ colspan: 2
+ },{
+ html: '<p>Cell C content</p>',
+ cellCls: 'highlight'
+ },{
+ html: '<p>Cell D content</p>'
+ }]
+});
+An object containing properties which are added to the {@link Ext.DomHelper DomHelper} specification + * used to create the layout's <table> element. Example:
+{
+ xtype: 'panel',
+ layout: 'table',
+ layoutConfig: {
+ tableAttrs: {
+ style: {
+ width: '100%'
+ }
+ },
+ columns: 3
+ }
+}This is a layout that inherits the anchoring of {@link Ext.layout.AnchorLayout} and adds the + * ability for x/y positioning using the standard x and y component config options.
+ *This class is intended to be extended or created via the {@link Ext.Container#layout layout} + * configuration property. See {@link Ext.Container#layout} for additional details.
+ *Example usage:
+ *
+var form = new Ext.form.FormPanel({
+ title: 'Absolute Layout',
+ layout:'absolute',
+ layoutConfig: {
+ // layout-specific configs go here
+ extraCls: 'x-abs-layout-item',
+ },
+ baseCls: 'x-plain',
+ url:'save-form.php',
+ defaultType: 'textfield',
+ items: [{
+ x: 0,
+ y: 5,
+ xtype:'label',
+ text: 'Send To:'
+ },{
+ x: 60,
+ y: 0,
+ name: 'to',
+ anchor:'100%' // anchor width by percentage
+ },{
+ x: 0,
+ y: 35,
+ xtype:'label',
+ text: 'Subject:'
+ },{
+ x: 60,
+ y: 30,
+ name: 'subject',
+ anchor: '100%' // anchor width by percentage
+ },{
+ x:0,
+ y: 60,
+ xtype: 'textarea',
+ name: 'msg',
+ anchor: '100% 100%' // anchor width and height
+ }]
+});
+Base Class for HBoxLayout and VBoxLayout Classes. Generally it should not need to be used directly.
+ */ +Ext.layout.BoxLayout = Ext.extend(Ext.layout.ContainerLayout, { + /** + * @cfg {Object} defaultMargins + *If the individual contained items do not have a margins + * property specified, the default margins from this property will be + * applied to each item.
+ *This property may be specified as an object containing margins + * to apply in the format:
+{
+ top: (top margin),
+ right: (right margin),
+ bottom: (bottom margin),
+ left: (left margin)
+}This property may also be specified as a string containing + * space-separated, numeric margin values. The order of the sides associated + * with each value matches the way CSS processes margin values:
+ *-
+ *
Defaults to:
+ * {top:0, right:0, bottom:0, left:0}
+ * Sets the padding to be applied to all child items managed by this layout.
+ *This property must be specified as a string containing + * space-separated, numeric padding values. The order of the sides associated + * with each value matches the way CSS processes padding values:
+ *-
+ *
Defaults to: "0"
A layout that arranges items vertically down a Container. This layout optionally divides available vertical
+ * space between child items containing a numeric flex configuration.
-
+ *
-
+ *
A layout that arranges items horizontally across a Container. This layout optionally divides available horizontal
+ * space between child items containing a numeric flex configuration.
-
+ *
-
+ *
| ',
+ ' | ',
+ '',
+ '
| ',
+ '