X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/2e847cf21b8ab9d15fa167b315ca5b2fa92638fc..refs/heads/master:/docs/source/Component.html diff --git a/docs/source/Component.html b/docs/source/Component.html index 37ac1609..1afc88a7 100644 --- a/docs/source/Component.html +++ b/docs/source/Component.html @@ -1,1749 +1,1173 @@ - - - - The source code - - - - -
/** - * @class Ext.Component - * @extends Ext.util.Observable - *

Base class for all Ext components. All subclasses of Component may participate in the automated - * Ext component lifecycle of creation, rendering and destruction which is provided by the {@link Ext.Container Container} class. - * Components may be added to a Container through the {@link Ext.Container#items items} config option at the time the Container is created, - * or they may be added dynamically via the {@link Ext.Container#add add} method.

- *

The Component base class has built-in support for basic hide/show and enable/disable behavior.

- *

All Components are registered with the {@link Ext.ComponentMgr} on construction so that they can be referenced at any time via - * {@link Ext#getCmp}, passing the {@link #id}.

- *

All user-developed visual widgets that are required to participate in automated lifecycle and size management should subclass Component (or - * {@link Ext.BoxComponent} if managed box model handling is required, ie height and width management).

- *

See the Creating new UI controls tutorial for details on how - * and to either extend or augment ExtJs base classes to create custom Components.

- *

Every component has a specific xtype, which is its Ext-specific type name, along with methods for checking the - * xtype like {@link #getXType} and {@link #isXType}. This is the list of all valid xtypes:

- *
-xtype            Class
--------------    ------------------
-box              {@link Ext.BoxComponent}
-button           {@link Ext.Button}
-buttongroup      {@link Ext.ButtonGroup}
-colorpalette     {@link Ext.ColorPalette}
-component        {@link Ext.Component}
-container        {@link Ext.Container}
-cycle            {@link Ext.CycleButton}
-dataview         {@link Ext.DataView}
-datepicker       {@link Ext.DatePicker}
-editor           {@link Ext.Editor}
-editorgrid       {@link Ext.grid.EditorGridPanel}
-flash            {@link Ext.FlashComponent}
-grid             {@link Ext.grid.GridPanel}
-listview         {@link Ext.ListView}
-panel            {@link Ext.Panel}
-progress         {@link Ext.ProgressBar}
-propertygrid     {@link Ext.grid.PropertyGrid}
-slider           {@link Ext.Slider}
-spacer           {@link Ext.Spacer}
-splitbutton      {@link Ext.SplitButton}
-tabpanel         {@link Ext.TabPanel}
-treepanel        {@link Ext.tree.TreePanel}
-viewport         {@link Ext.ViewPort}
-window           {@link Ext.Window}
-
-Toolbar components
----------------------------------------
-paging           {@link Ext.PagingToolbar}
-toolbar          {@link Ext.Toolbar}
-tbbutton         {@link Ext.Toolbar.Button}        (deprecated; use button)
-tbfill           {@link Ext.Toolbar.Fill}
-tbitem           {@link Ext.Toolbar.Item}
-tbseparator      {@link Ext.Toolbar.Separator}
-tbspacer         {@link Ext.Toolbar.Spacer}
-tbsplit          {@link Ext.Toolbar.SplitButton}   (deprecated; use splitbutton)
-tbtext           {@link Ext.Toolbar.TextItem}
-
-Menu components
----------------------------------------
-menu             {@link Ext.menu.Menu}
-colormenu        {@link Ext.menu.ColorMenu}
-datemenu         {@link Ext.menu.DateMenu}
-menubaseitem     {@link Ext.menu.BaseItem}
-menucheckitem    {@link Ext.menu.CheckItem}
-menuitem         {@link Ext.menu.Item}
-menuseparator    {@link Ext.menu.Separator}
-menutextitem     {@link Ext.menu.TextItem}
-
-Form components
----------------------------------------
-form             {@link Ext.form.FormPanel}
-checkbox         {@link Ext.form.Checkbox}
-checkboxgroup    {@link Ext.form.CheckboxGroup}
-combo            {@link Ext.form.ComboBox}
-datefield        {@link Ext.form.DateField}
-displayfield     {@link Ext.form.DisplayField}
-field            {@link Ext.form.Field}
-fieldset         {@link Ext.form.FieldSet}
-hidden           {@link Ext.form.Hidden}
-htmleditor       {@link Ext.form.HtmlEditor}
-label            {@link Ext.form.Label}
-numberfield      {@link Ext.form.NumberField}
-radio            {@link Ext.form.Radio}
-radiogroup       {@link Ext.form.RadioGroup}
-textarea         {@link Ext.form.TextArea}
-textfield        {@link Ext.form.TextField}
-timefield        {@link Ext.form.TimeField}
-trigger          {@link Ext.form.TriggerField}
-
-Chart components
----------------------------------------
-chart            {@link Ext.chart.Chart}
-barchart         {@link Ext.chart.BarChart}
-cartesianchart   {@link Ext.chart.CartesianChart}
-columnchart      {@link Ext.chart.ColumnChart}
-linechart        {@link Ext.chart.LineChart}
-piechart         {@link Ext.chart.PieChart}
-
-Store xtypes
----------------------------------------
-arraystore       {@link Ext.data.ArrayStore}
-directstore      {@link Ext.data.DirectStore}
-groupingstore    {@link Ext.data.GroupingStore}
-jsonstore        {@link Ext.data.JsonStore}
-simplestore      {@link Ext.data.SimpleStore}      (deprecated; use arraystore)
-store            {@link Ext.data.Store}
-xmlstore         {@link Ext.data.XmlStore}
-
- * @constructor - * @param {Ext.Element/String/Object} config The configuration options may be specified as either: - *
- */ -Ext.Component = function(config){ - config = config || {}; - if(config.initialConfig){ - if(config.isAction){ // actions - this.baseAction = config; - } - config = config.initialConfig; // component cloning / action set up - }else if(config.tagName || config.dom || Ext.isString(config)){ // element object - config = {applyTo: config, id: config.id || config}; + + + + + The source code + + + + + + +
/**
+ * Base class for all Ext components. All subclasses of Component may participate in the automated Ext component
+ * lifecycle of creation, rendering and destruction which is provided by the {@link Ext.container.Container Container}
+ * class. Components may be added to a Container through the {@link Ext.container.Container#items items} config option
+ * at the time the Container is created, or they may be added dynamically via the
+ * {@link Ext.container.Container#add add} method.
+ *
+ * The Component base class has built-in support for basic hide/show and enable/disable and size control behavior.
+ *
+ * All Components are registered with the {@link Ext.ComponentManager} on construction so that they can be referenced at
+ * any time via {@link Ext#getCmp Ext.getCmp}, passing the {@link #id}.
+ *
+ * All user-developed visual widgets that are required to participate in automated lifecycle and size management should
+ * subclass Component.
+ *
+ * See the [Creating new UI controls][1] tutorial for details on how and to either extend or augment ExtJs base classes
+ * to create custom Components.
+ *
+ * Every component has a specific xtype, which is its Ext-specific type name, along with methods for checking the xtype
+ * like {@link #getXType} and {@link #isXType}. See the [Component Guide][2] for more information on xtypes and the
+ * Component hierarchy.
+ *
+ * This is the list of all valid xtypes:
+ *
+ *     xtype            Class
+ *     -------------    ------------------
+ *     button           {@link Ext.button.Button}
+ *     buttongroup      {@link Ext.container.ButtonGroup}
+ *     colorpalette     {@link Ext.picker.Color}
+ *     component        {@link Ext.Component}
+ *     container        {@link Ext.container.Container}
+ *     cycle            {@link Ext.button.Cycle}
+ *     dataview         {@link Ext.view.View}
+ *     datepicker       {@link Ext.picker.Date}
+ *     editor           {@link Ext.Editor}
+ *     editorgrid       {@link Ext.grid.plugin.Editing}
+ *     grid             {@link Ext.grid.Panel}
+ *     multislider      {@link Ext.slider.Multi}
+ *     panel            {@link Ext.panel.Panel}
+ *     progressbar      {@link Ext.ProgressBar}
+ *     slider           {@link Ext.slider.Single}
+ *     splitbutton      {@link Ext.button.Split}
+ *     tabpanel         {@link Ext.tab.Panel}
+ *     treepanel        {@link Ext.tree.Panel}
+ *     viewport         {@link Ext.container.Viewport}
+ *     window           {@link Ext.window.Window}
+ *
+ *     Toolbar components
+ *     ---------------------------------------
+ *     pagingtoolbar    {@link Ext.toolbar.Paging}
+ *     toolbar          {@link Ext.toolbar.Toolbar}
+ *     tbfill           {@link Ext.toolbar.Fill}
+ *     tbitem           {@link Ext.toolbar.Item}
+ *     tbseparator      {@link Ext.toolbar.Separator}
+ *     tbspacer         {@link Ext.toolbar.Spacer}
+ *     tbtext           {@link Ext.toolbar.TextItem}
+ *
+ *     Menu components
+ *     ---------------------------------------
+ *     menu             {@link Ext.menu.Menu}
+ *     menucheckitem    {@link Ext.menu.CheckItem}
+ *     menuitem         {@link Ext.menu.Item}
+ *     menuseparator    {@link Ext.menu.Separator}
+ *     menutextitem     {@link Ext.menu.Item}
+ *
+ *     Form components
+ *     ---------------------------------------
+ *     form             {@link Ext.form.Panel}
+ *     checkbox         {@link Ext.form.field.Checkbox}
+ *     combo            {@link Ext.form.field.ComboBox}
+ *     datefield        {@link Ext.form.field.Date}
+ *     displayfield     {@link Ext.form.field.Display}
+ *     field            {@link Ext.form.field.Base}
+ *     fieldset         {@link Ext.form.FieldSet}
+ *     hidden           {@link Ext.form.field.Hidden}
+ *     htmleditor       {@link Ext.form.field.HtmlEditor}
+ *     label            {@link Ext.form.Label}
+ *     numberfield      {@link Ext.form.field.Number}
+ *     radio            {@link Ext.form.field.Radio}
+ *     radiogroup       {@link Ext.form.RadioGroup}
+ *     textarea         {@link Ext.form.field.TextArea}
+ *     textfield        {@link Ext.form.field.Text}
+ *     timefield        {@link Ext.form.field.Time}
+ *     trigger          {@link Ext.form.field.Trigger}
+ *
+ *     Chart components
+ *     ---------------------------------------
+ *     chart            {@link Ext.chart.Chart}
+ *     barchart         {@link Ext.chart.series.Bar}
+ *     columnchart      {@link Ext.chart.series.Column}
+ *     linechart        {@link Ext.chart.series.Line}
+ *     piechart         {@link Ext.chart.series.Pie}
+ *
+ * It should not usually be necessary to instantiate a Component because there are provided subclasses which implement
+ * specialized Component use cases which cover most application needs. However it is possible to instantiate a base
+ * Component, and it will be renderable, or will particpate in layouts as the child item of a Container:
+ *
+ *     @example
+ *     Ext.create('Ext.Component', {
+ *         html: 'Hello world!',
+ *         width: 300,
+ *         height: 200,
+ *         padding: 20,
+ *         style: {
+ *             color: '#FFFFFF',
+ *             backgroundColor:'#000000'
+ *         },
+ *         renderTo: Ext.getBody()
+ *     });
+ *
+ * The Component above creates its encapsulating `div` upon render, and use the configured HTML as content. More complex
+ * internal structure may be created using the {@link #renderTpl} configuration, although to display database-derived
+ * mass data, it is recommended that an ExtJS data-backed Component such as a {@link Ext.view.View View}, or {@link
+ * Ext.grid.Panel GridPanel}, or {@link Ext.tree.Panel TreePanel} be used.
+ *
+ * [1]: http://sencha.com/learn/Tutorial:Creating_new_UI_controls
+ */
+Ext.define('Ext.Component', {
 
-    
/** - * This Component's initial configuration specification. Read-only. - * @type Object - * @property initialConfig - */ - this.initialConfig = config; - - Ext.apply(this, config); - this.addEvents( -
/** - * @event added - * Fires when a component is added to an Ext.Container - * @param {Ext.Component} this - * @param {Ext.Container} ownerCt Container which holds the component - * @param {number} index Position at which the component was added - */ - 'added', -
/** - * @event disable - * Fires after the component is disabled. - * @param {Ext.Component} this - */ - 'disable', -
/** - * @event enable - * Fires after the component is enabled. - * @param {Ext.Component} this - */ - 'enable', -
/** - * @event beforeshow - * Fires before the component is shown by calling the {@link #show} method. - * Return false from an event handler to stop the show. - * @param {Ext.Component} this - */ - 'beforeshow', -
/** - * @event show - * Fires after the component is shown when calling the {@link #show} method. - * @param {Ext.Component} this - */ - 'show', -
/** - * @event beforehide - * Fires before the component is hidden by calling the {@link #hide} method. - * Return false from an event handler to stop the hide. - * @param {Ext.Component} this - */ - 'beforehide', -
/** - * @event hide - * Fires after the component is hidden. - * Fires after the component is hidden when calling the {@link #hide} method. - * @param {Ext.Component} this - */ - 'hide', -
/** - * @event removed - * Fires when a component is removed from an Ext.Container - * @param {Ext.Component} this - * @param {Ext.Container} ownerCt Container which holds the component - */ - 'removed', -
/** - * @event beforerender - * Fires before the component is {@link #rendered}. Return false from an - * event handler to stop the {@link #render}. - * @param {Ext.Component} this - */ - 'beforerender', -
/** - * @event render - * Fires after the component markup is {@link #rendered}. - * @param {Ext.Component} this - */ - 'render', -
/** - * @event afterrender - *

Fires after the component rendering is finished.

- *

The afterrender event is fired after this Component has been {@link #rendered}, been postprocesed - * by any afterRender method defined for the Component, and, if {@link #stateful}, after state - * has been restored.

- * @param {Ext.Component} this - */ - 'afterrender', -
/** - * @event beforedestroy - * Fires before the component is {@link #destroy}ed. Return false from an event handler to stop the {@link #destroy}. - * @param {Ext.Component} this - */ - 'beforedestroy', -
/** - * @event destroy - * Fires after the component is {@link #destroy}ed. - * @param {Ext.Component} this - */ - 'destroy', -
/** - * @event beforestaterestore - * Fires before the state of the component is restored. Return false from an event handler to stop the restore. - * @param {Ext.Component} this - * @param {Object} state The hash of state values returned from the StateProvider. If this - * event is not vetoed, then the state object is passed to applyState. By default, - * that simply copies property values into this Component. The method maybe overriden to - * provide custom state restoration. - */ - 'beforestaterestore', -
/** - * @event staterestore - * Fires after the state of the component is restored. - * @param {Ext.Component} this - * @param {Object} state The hash of state values returned from the StateProvider. This is passed - * to applyState. By default, that simply copies property values into this - * Component. The method maybe overriden to provide custom state restoration. - */ - 'staterestore', -
/** - * @event beforestatesave - * Fires before the state of the component is saved to the configured state provider. Return false to stop the save. - * @param {Ext.Component} this - * @param {Object} state The hash of state values. This is determined by calling - * getState() on the Component. This method must be provided by the - * developer to return whetever representation of state is required, by default, Ext.Component - * has a null implementation. - */ - 'beforestatesave', -
/** - * @event statesave - * Fires after the state of the component is saved to the configured state provider. - * @param {Ext.Component} this - * @param {Object} state The hash of state values. This is determined by calling - * getState() on the Component. This method must be provided by the - * developer to return whetever representation of state is required, by default, Ext.Component - * has a null implementation. - */ - 'statesave' - ); - this.getId(); - Ext.ComponentMgr.register(this); - Ext.Component.superclass.constructor.call(this); - - if(this.baseAction){ - this.baseAction.addComponent(this); - } + /* Begin Definitions */ - this.initComponent(); + alias: ['widget.component', 'widget.box'], - if(this.plugins){ - if(Ext.isArray(this.plugins)){ - for(var i = 0, len = this.plugins.length; i < len; i++){ - this.plugins[i] = this.initPlugin(this.plugins[i]); - } - }else{ - this.plugins = this.initPlugin(this.plugins); - } - } + extend: 'Ext.AbstractComponent', - if(this.stateful !== false){ - this.initState(); - } + requires: [ + 'Ext.util.DelayedTask' + ], - if(this.applyTo){ - this.applyToMarkup(this.applyTo); - delete this.applyTo; - }else if(this.renderTo){ - this.render(this.renderTo); - delete this.renderTo; - } -}; - -// private -Ext.Component.AUTO_ID = 1000; - -Ext.extend(Ext.Component, Ext.util.Observable, { - // Configs below are used for all Components when rendered by FormLayout. -
/** - * @cfg {String} fieldLabel

The label text to display next to this Component (defaults to '').

- *

Note: this config is only used when this Component is rendered by a Container which - * has been configured to use the {@link Ext.layout.FormLayout FormLayout} layout manager (e.g. - * {@link Ext.form.FormPanel} or specifying layout:'form').


- *

Also see {@link #hideLabel} and - * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}.

- * Example use:

-new Ext.FormPanel({
-    height: 100,
-    renderTo: Ext.getBody(),
-    items: [{
-        xtype: 'textfield',
-        fieldLabel: 'Name'
-    }]
-});
-
- */ -
/** - * @cfg {String} labelStyle

A CSS style specification string to apply directly to this field's - * label. Defaults to the container's labelStyle value if set (e.g., - * {@link Ext.layout.FormLayout#labelStyle} , or '').

- *

Note: see the note for {@link #clearCls}.


- *

Also see {@link #hideLabel} and - * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}.

- * Example use:

-new Ext.FormPanel({
-    height: 100,
-    renderTo: Ext.getBody(),
-    items: [{
-        xtype: 'textfield',
-        fieldLabel: 'Name',
-        labelStyle: 'font-weight:bold;'
-    }]
-});
-
- */ -
/** - * @cfg {String} labelSeparator

The separator to display after the text of each - * {@link #fieldLabel}. This property may be configured at various levels. - * The order of precedence is: - *

    - *
  • field / component level
  • - *
  • container level
  • - *
  • {@link Ext.layout.FormLayout#labelSeparator layout level} (defaults to colon ':')
  • - *
- * To display no separator for this field's label specify empty string ''.

- *

Note: see the note for {@link #clearCls}.


- *

Also see {@link #hideLabel} and - * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}.

- * Example use:

-new Ext.FormPanel({
-    height: 100,
-    renderTo: Ext.getBody(),
-    layoutConfig: {
-        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
+    uses: [
+        'Ext.Layer',
+        'Ext.resizer.Resizer',
+        'Ext.util.ComponentDragger'
+    ],
+
+    mixins: {
+        floating: 'Ext.util.Floating'
     },
-    {@link Ext.layout.FormLayout#labelSeparator labelSeparator}: '>>',     // config at container level
-    items: [{
-        xtype: 'textfield',
-        fieldLabel: 'Field 1',
-        labelSeparator: '...' // field/component level config supersedes others
-    },{
-        xtype: 'textfield',
-        fieldLabel: 'Field 2' // labelSeparator will be '='
-    }]
-});
-
- */ -
/** - * @cfg {Boolean} hideLabel

true to completely hide the label element - * ({@link #fieldLabel label} and {@link #labelSeparator separator}). Defaults to false. - * By default, even if you do not specify a {@link #fieldLabel} the space will still be - * reserved so that the field will line up with other fields that do have labels. - * Setting this to true will cause the field to not reserve that space.

- *

Note: see the note for {@link #clearCls}.


- * Example use:

-new Ext.FormPanel({
-    height: 100,
-    renderTo: Ext.getBody(),
-    items: [{
-        xtype: 'textfield'
-        hideLabel: true
-    }]
-});
-
- */ -
/** - * @cfg {String} clearCls

The CSS class used to to apply to the special clearing div rendered - * directly after each form field wrapper to provide field clearing (defaults to - * 'x-form-clear-left').

- *

Note: this config is only used when this Component is rendered by a Container - * which has been configured to use the {@link Ext.layout.FormLayout FormLayout} layout - * manager (e.g. {@link Ext.form.FormPanel} or specifying layout:'form') and either a - * {@link #fieldLabel} is specified or isFormField=true is specified.


- *

See {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl} also.

- */ -
/** - * @cfg {String} itemCls - *

Note: this config is only used when this Component is rendered by a Container which - * has been configured to use the {@link Ext.layout.FormLayout FormLayout} layout manager (e.g. - * {@link Ext.form.FormPanel} or specifying layout:'form').


- *

An additional CSS class to apply to the div wrapping the form item - * element of this field. If supplied, itemCls at the field level will override - * the default itemCls supplied at the container level. The value specified for - * itemCls will be added to the default class ('x-form-item').

- *

Since it is applied to the item wrapper (see - * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}), it allows - * you to write standard CSS rules that can apply to the field, the label (if specified), or - * any other element within the markup for the field.

- *

Note: see the note for {@link #fieldLabel}.


- * Example use:

-// Apply a style to the field's label:
-<style>
-    .required .x-form-item-label {font-weight:bold;color:red;}
-</style>
-
-new Ext.FormPanel({
-    height: 100,
-    renderTo: Ext.getBody(),
-    items: [{
-        xtype: 'textfield',
-        fieldLabel: 'Name',
-        itemCls: 'required' //this label will be styled
-    },{
-        xtype: 'textfield',
-        fieldLabel: 'Favorite Color'
-    }]
-});
-
- */ -
/** - * @cfg {String} id - *

The unique id of this component (defaults to an {@link #getId auto-assigned id}). - * You should assign an id if you need to be able to access the component later and you do - * not have an object reference available (e.g., using {@link Ext}.{@link Ext#getCmp getCmp}).

- *

Note that this id will also be used as the element id for the containing HTML element - * that is rendered to the page for this component. This allows you to write id-based CSS - * rules to style the specific instance of this component uniquely, and also to select - * sub-elements using this component's id as the parent.

- *

Note: to avoid complications imposed by a unique id also see - * {@link #itemId} and {@link #ref}.

- *

Note: to access the container of an item see {@link #ownerCt}.

- */ -
/** - * @cfg {String} itemId - *

An itemId can be used as an alternative way to get a reference to a component - * when no object reference is available. Instead of using an {@link #id} with - * {@link Ext}.{@link Ext#getCmp getCmp}, use itemId with - * {@link Ext.Container}.{@link Ext.Container#getComponent getComponent} which will retrieve - * itemId's or {@link #id}'s. Since itemId's are an index to the - * container's internal MixedCollection, the itemId is scoped locally to the container -- - * avoiding potential conflicts with {@link Ext.ComponentMgr} which requires a unique - * {@link #id}.

- *

-var c = new Ext.Panel({ //
-    {@link Ext.BoxComponent#height height}: 300,
-    {@link #renderTo}: document.body,
-    {@link Ext.Container#layout layout}: 'auto',
-    {@link Ext.Container#items items}: [
-        {
-            itemId: 'p1',
-            {@link Ext.Panel#title title}: 'Panel 1',
-            {@link Ext.BoxComponent#height height}: 150
-        },
-        {
-            itemId: 'p2',
-            {@link Ext.Panel#title title}: 'Panel 2',
-            {@link Ext.BoxComponent#height height}: 150
-        }
-    ]
-})
-p1 = c.{@link Ext.Container#getComponent getComponent}('p1'); // not the same as {@link Ext#getCmp Ext.getCmp()}
-p2 = p1.{@link #ownerCt}.{@link Ext.Container#getComponent getComponent}('p2'); // reference via a sibling
-     * 
- *

Also see {@link #id} and {@link #ref}.

- *

Note: to access the container of an item see {@link #ownerCt}.

- */ -
/** - * @cfg {String} xtype - * The registered xtype to create. This config option is not used when passing - * a config object into a constructor. This config option is used only when - * lazy instantiation is being used, and a child item of a Container is being - * specified not as a fully instantiated Component, but as a Component config - * object. The xtype will be looked up at render time up to determine what - * type of child Component to create.

- * The predefined xtypes are listed {@link Ext.Component here}. - *

- * If you subclass Components to create your own Components, you may register - * them using {@link Ext.ComponentMgr#registerType} in order to be able to - * take advantage of lazy instantiation and rendering. - */ -
/** - * @cfg {String} ptype - * The registered ptype to create. This config option is not used when passing - * a config object into a constructor. This config option is used only when - * lazy instantiation is being used, and a Plugin is being - * specified not as a fully instantiated Component, but as a Component config - * object. The ptype will be looked up at render time up to determine what - * type of Plugin to create.

- * If you create your own Plugins, you may register them using - * {@link Ext.ComponentMgr#registerPlugin} in order to be able to - * take advantage of lazy instantiation and rendering. - */ -
/** - * @cfg {String} cls - * An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be - * useful for adding customized styles to the component or any of its children using standard CSS rules. - */ -
/** - * @cfg {String} overCls - * An optional extra CSS class that will be added to this component's Element when the mouse moves - * over the Element, and removed when the mouse moves out. (defaults to ''). This can be - * useful for adding customized 'active' or 'hover' styles to the component or any of its children using standard CSS rules. - */ -
/** - * @cfg {String} style - * A custom style specification to be applied to this component's Element. Should be a valid argument to - * {@link Ext.Element#applyStyles}. - *

-new Ext.Panel({
-    title: 'Some Title',
-    renderTo: Ext.getBody(),
-    width: 400, height: 300,
-    layout: 'form',
-    items: [{
-        xtype: 'textarea',
-        style: {
-            width: '95%',
-            marginBottom: '10px'
-        }
+    statics: {
+        // Collapse/expand directions
+        DIRECTION_TOP: 'top',
+        DIRECTION_RIGHT: 'right',
+        DIRECTION_BOTTOM: 'bottom',
+        DIRECTION_LEFT: 'left',
+
+        VERTICAL_DIRECTION_Re: /^(?:top|bottom)$/,
+
+        // RegExp whih specifies characters in an xtype which must be translated to '-' when generating auto IDs.
+        // This includes dot, comma and whitespace
+        INVALID_ID_CHARS_Re: /[\.,\s]/g
     },
-        new Ext.Button({
-            text: 'Send',
-            minWidth: '100',
-            style: {
-                marginBottom: '10px'
-            }
-        })
-    ]
-});
-     * 
- */ -
/** - * @cfg {String} ctCls - *

An optional extra CSS class that will be added to this component's container. This can be useful for - * adding customized styles to the container or any of its children using standard CSS rules. See - * {@link Ext.layout.ContainerLayout}.{@link Ext.layout.ContainerLayout#extraCls extraCls} also.

- *

Note: ctCls defaults to '' except for the following class - * which assigns a value by default: - *

    - *
  • {@link Ext.layout.Box Box Layout} : 'x-box-layout-ct'
  • - *
- * To configure the above Class with an extra CSS class append to the default. For example, - * for BoxLayout (Hbox and Vbox):

-     * ctCls: 'x-box-layout-ct custom-class'
-     * 
- *

- */ -
/** - * @cfg {Boolean} disabled - * Render this component disabled (default is false). - */ - disabled : false, -
/** - * @cfg {Boolean} hidden - * Render this component hidden (default is false). If true, the - * {@link #hide} method will be called internally. - */ - hidden : false, -
/** - * @cfg {Object/Array} plugins - * An object or array of objects that will provide custom functionality for this component. The only - * requirement for a valid plugin is that it contain an init method that accepts a reference of type Ext.Component. - * When a component is created, if any plugins are available, the component will call the init method on each - * plugin, passing a reference to itself. Each plugin can then call methods or respond to events on the - * component as needed to provide its functionality. - */ -
/** - * @cfg {Mixed} applyTo - *

Specify the id of the element, a DOM element or an existing Element corresponding to a DIV - * that is already present in the document that specifies some structural markup for this - * component.

    - *
  • Description :
      - *
      When applyTo is used, constituent parts of the component can also be specified - * by id or CSS class name within the main element, and the component being created may attempt - * to create its subcomponents from that markup if applicable.
      - *
  • - *
  • Notes :
      - *
      When 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 component's container.
      - *
  • - *
- */ -
/** - * @cfg {Mixed} renderTo - *

Specify the id of the element, a DOM element or an existing Element that this component - * will be rendered into.

    - *
  • Notes :
      - *
      Do not use this option if the Component is to be a child item of - * a {@link Ext.Container Container}. It is the responsibility of the - * {@link Ext.Container Container}'s {@link Ext.Container#layout layout manager} - * to render and manage its child items.
      - *
      When using this config, a call to render() is not required.
      - *
  • - *
- *

See {@link #render} also.

- */ -
/** - * @cfg {Boolean} stateful - *

A flag which causes the Component to attempt to restore the state of - * internal properties from a saved state on startup. The component must have - * either a {@link #stateId} or {@link #id} assigned - * for state to be managed. Auto-generated ids are not guaranteed to be stable - * across page loads and cannot be relied upon to save and restore the same - * state for a component.

- *

For state saving to work, the state manager's provider must have been - * set to an implementation of {@link Ext.state.Provider} which overrides the - * {@link Ext.state.Provider#set set} and {@link Ext.state.Provider#get get} - * methods to save and recall name/value pairs. A built-in implementation, - * {@link Ext.state.CookieProvider} is available.

- *

To set the state provider for the current page:

- *

-Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
-    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
-}));
-     * 
- *

A stateful Component attempts to save state when one of the events - * listed in the {@link #stateEvents} configuration fires.

- *

To save state, a stateful Component first serializes its state by - * calling getState. By default, this function does - * nothing. The developer must provide an implementation which returns an - * object hash which represents the Component's restorable state.

- *

The value yielded by getState is passed to {@link Ext.state.Manager#set} - * which uses the configured {@link Ext.state.Provider} to save the object - * keyed by the Component's {@link stateId}, or, if that is not - * specified, its {@link #id}.

- *

During construction, a stateful Component attempts to restore - * its state by calling {@link Ext.state.Manager#get} passing the - * {@link #stateId}, or, if that is not specified, the - * {@link #id}.

- *

The resulting object is passed to applyState. - * The default implementation of applyState simply copies - * properties into the object, but a developer may override this to support - * more behaviour.

- *

You can perform extra processing on state save and restore by attaching - * handlers to the {@link #beforestaterestore}, {@link #staterestore}, - * {@link #beforestatesave} and {@link #statesave} events.

- */ -
/** - * @cfg {String} stateId - * The unique id for this component to use for state management purposes - * (defaults to the component id if one was set, otherwise null if the - * component is using a generated id). - *

See {@link #stateful} for an explanation of saving and - * restoring Component state.

- */ -
/** - * @cfg {Array} stateEvents - *

An array of events that, when fired, should trigger this component to - * save its state (defaults to none). stateEvents may be any type - * of event supported by this component, including browser or custom events - * (e.g., ['click', 'customerchange']).

- *

See {@link #stateful} for an explanation of saving and - * restoring Component state.

- */ -
/** - * @cfg {Mixed} autoEl - *

A tag name or {@link Ext.DomHelper DomHelper} spec used to create the {@link #getEl Element} which will - * encapsulate this Component.

- *

You do not normally need to specify this. For the base classes {@link Ext.Component}, {@link Ext.BoxComponent}, - * and {@link Ext.Container}, this defaults to 'div'. The more complex Ext classes use a more complex - * DOM structure created by their own onRender methods.

- *

This is intended to allow the developer to create application-specific utility Components encapsulated by - * different DOM elements. Example usage:


-{
-    xtype: 'box',
-    autoEl: {
-        tag: 'img',
-        src: 'http://www.example.com/example.jpg'
-    }
-}, {
-    xtype: 'box',
-    autoEl: {
-        tag: 'blockquote',
-        html: 'autoEl is cool!'
-    }
-}, {
-    xtype: 'container',
-    autoEl: 'ul',
-    cls: 'ux-unordered-list',
-    items: {
-        xtype: 'box',
-        autoEl: 'li',
-        html: 'First list item'
-    }
-}
-
- */ - autoEl : 'div', -
/** - * @cfg {String} disabledClass - * CSS class added to the component when it is disabled (defaults to 'x-item-disabled'). - */ - disabledClass : 'x-item-disabled', -
/** - * @cfg {Boolean} allowDomMove - * Whether the component can move the Dom node when rendering (defaults to true). - */ - allowDomMove : true, -
/** - * @cfg {Boolean} autoShow - * True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove - * them on render (defaults to false). - */ - autoShow : false, -
/** - * @cfg {String} hideMode - *

How this component should be hidden. Supported values are 'visibility' - * (css visibility), 'offsets' (negative offset position) and 'display' - * (css display).

- *

Note: the default of 'display' is generally preferred - * since items are automatically laid out when they are first shown (no sizing - * is done while hidden).

- */ - hideMode : 'display', -
/** - * @cfg {Boolean} hideParent - * True to hide and show the component's container when hide/show is called on the component, false to hide - * and show the component itself (defaults to false). For example, this can be used as a shortcut for a hide - * button on a window by setting hide:true on the button when adding it to its parent container. - */ - hideParent : false, -
/** - *

The {@link Ext.Element} which encapsulates this Component. Read-only.

- *

This will usually be a <DIV> element created by the class's onRender method, but - * that may be overridden using the {@link #autoEl} config.

- *

Note: this element will not be available until this Component has been rendered.


- *

To add listeners for DOM events to this Component (as opposed to listeners - * for this Component's own Observable events), see the {@link Ext.util.Observable#listeners listeners} - * config for a suggestion, or use a render listener directly:


-new Ext.Panel({
-    title: 'The Clickable Panel',
-    listeners: {
-        render: function(p) {
-            // Append the Panel to the click handler's argument list.
-            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
-        },
-        single: true  // Remove the listener after first invocation
-    }
-});
-
- *

See also {@link #getEl getEl}

- * @type Ext.Element - * @property el - */ -
/** - * This Component's owner {@link Ext.Container Container} (defaults to undefined, and is set automatically when - * this Component is added to a Container). Read-only. - *

Note: to access items within the Container see {@link #itemId}.

- * @type Ext.Container - * @property ownerCt - */ -
/** - * True if this component is hidden. Read-only. - * @type Boolean - * @property hidden + /* End Definitions */ + + /** + * @cfg {Boolean/Object} resizable + * Specify as `true` to apply a {@link Ext.resizer.Resizer Resizer} to this Component after rendering. + * + * May also be specified as a config object to be passed to the constructor of {@link Ext.resizer.Resizer Resizer} + * to override any defaults. By default the Component passes its minimum and maximum size, and uses + * `{@link Ext.resizer.Resizer#dynamic}: false` */ -
/** - * True if this component is disabled. Read-only. - * @type Boolean - * @property disabled + + /** + * @cfg {String} resizeHandles + * A valid {@link Ext.resizer.Resizer} handles config string. Only applies when resizable = true. */ -
/** - * True if this component has been rendered. Read-only. - * @type Boolean - * @property rendered + resizeHandles: 'all', + + /** + * @cfg {Boolean} [autoScroll=false] + * `true` to use overflow:'auto' on the components layout element and show scroll bars automatically when necessary, + * `false` to clip any overflowing content. */ - rendered : false, - -
/** - * @cfg {String} contentEl - *

Optional. Specify an existing HTML element, or the id of an existing HTML element to use as the content - * for this component.

- *
    - *
  • Description : - *
    This config option is used to take an existing HTML element and place it in the layout element - * of a new component (it simply moves the specified DOM element after the Component is rendered to use as the content.
  • - *
  • Notes : - *
    The specified HTML element is appended to the layout element of the component 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 Component may use. It is just HTML. Layouts operate on child {@link Ext.Container#items items}.
    - *
    Add either the x-hidden or the x-hide-display CSS class to - * prevent a brief flicker of the content before it is rendered to the panel.
  • - *
+ + /** + * @cfg {Boolean} floating + * Specify as true to float the Component outside of the document flow using CSS absolute positioning. + * + * Components such as {@link Ext.window.Window Window}s and {@link Ext.menu.Menu Menu}s are floating by default. + * + * Floating Components that are programatically {@link Ext.Component#render rendered} will register themselves with + * the global {@link Ext.WindowManager ZIndexManager} + * + * ### Floating Components as child items of a Container + * + * A floating Component may be used as a child item of a Container. This just allows the floating Component to seek + * a ZIndexManager by examining the ownerCt chain. + * + * When configured as floating, Components acquire, at render time, a {@link Ext.ZIndexManager ZIndexManager} which + * manages a stack of related floating Components. The ZIndexManager brings a single floating Component to the top + * of its stack when the Component's {@link #toFront} method is called. + * + * The ZIndexManager is found by traversing up the {@link #ownerCt} chain to find an ancestor which itself is + * floating. This is so that descendant floating Components of floating _Containers_ (Such as a ComboBox dropdown + * within a Window) can have its zIndex managed relative to any siblings, but always **above** that floating + * ancestor Container. + * + * If no floating ancestor is found, a floating Component registers itself with the default {@link Ext.WindowManager + * ZIndexManager}. + * + * Floating components _do not participate in the Container's layout_. Because of this, they are not rendered until + * you explicitly {@link #show} them. + * + * After rendering, the ownerCt reference is deleted, and the {@link #floatParent} property is set to the found + * floating ancestor Container. If no floating ancestor Container was found the {@link #floatParent} property will + * not be set. */ -
/** - * @cfg {String/Object} html - * An HTML fragment, or a {@link Ext.DomHelper DomHelper} specification to use as the layout element - * content (defaults to ''). The HTML content is added after the component is rendered, - * 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. + floating: false, + + /** + * @cfg {Boolean} toFrontOnShow + * True to automatically call {@link #toFront} when the {@link #show} method is called on an already visible, + * floating component. */ + toFrontOnShow: true, -
/** - * @cfg {Mixed} tpl - * An {@link Ext.Template}, {@link Ext.XTemplate} - * or an array of strings to form an Ext.XTemplate. - * Used in conjunction with the {@link #data} and - * {@link #tplWriteMode} configurations. + /** + * @property {Ext.ZIndexManager} zIndexManager + * Only present for {@link #floating} Components after they have been rendered. + * + * A reference to the ZIndexManager which is managing this Component's z-index. + * + * The {@link Ext.ZIndexManager ZIndexManager} maintains a stack of floating Component z-indices, and also provides + * a single modal mask which is insert just beneath the topmost visible modal floating Component. + * + * Floating Components may be {@link #toFront brought to the front} or {@link #toBack sent to the back} of the + * z-index stack. + * + * This defaults to the global {@link Ext.WindowManager ZIndexManager} for floating Components that are + * programatically {@link Ext.Component#render rendered}. + * + * For {@link #floating} Components which are added to a Container, the ZIndexManager is acquired from the first + * ancestor Container found which is floating, or if not found the global {@link Ext.WindowManager ZIndexManager} is + * used. + * + * See {@link #floating} and {@link #floatParent} */ -
/** - * @cfg {String} tplWriteMode The Ext.(X)Template method to use when - * updating the content area of the Component. Defaults to 'overwrite' - * (see {@link Ext.XTemplate#overwrite}). + /** + * @property {Ext.Container} floatParent + * Only present for {@link #floating} Components which were inserted as descendant items of floating Containers. + * + * Floating Components that are programatically {@link Ext.Component#render rendered} will not have a `floatParent` + * property. + * + * For {@link #floating} Components which are child items of a Container, the floatParent will be the floating + * ancestor Container which is responsible for the base z-index value of all its floating descendants. It provides + * a {@link Ext.ZIndexManager ZIndexManager} which provides z-indexing services for all its descendant floating + * Components. + * + * For example, the dropdown {@link Ext.view.BoundList BoundList} of a ComboBox which is in a Window will have the + * Window as its `floatParent` + * + * See {@link #floating} and {@link #zIndexManager} */ - tplWriteMode : 'overwrite', -
/** - * @cfg {Mixed} data - * The initial set of data to apply to the {@link #tpl} to - * update the content area of the Component. + /** + * @cfg {Boolean/Object} [draggable=false] + * Specify as true to make a {@link #floating} Component draggable using the Component's encapsulating element as + * the drag handle. + * + * This may also be specified as a config object for the {@link Ext.util.ComponentDragger ComponentDragger} which is + * instantiated to perform dragging. + * + * For example to create a Component which may only be dragged around using a certain internal element as the drag + * handle, use the delegate option: + * + * new Ext.Component({ + * constrain: true, + * floating: true, + * style: { + * backgroundColor: '#fff', + * border: '1px solid black' + * }, + * html: '<h1 style="cursor:move">The title</h1><p>The content</p>', + * draggable: { + * delegate: 'h1' + * } + * }).show(); + */ + + /** + * @cfg {Boolean} [maintainFlex=false] + * **Only valid when a sibling element of a {@link Ext.resizer.Splitter Splitter} within a + * {@link Ext.layout.container.VBox VBox} or {@link Ext.layout.container.HBox HBox} layout.** + * + * Specifies that if an immediate sibling Splitter is moved, the Component on the *other* side is resized, and this + * Component maintains its configured {@link Ext.layout.container.Box#flex flex} value. */ + hideMode: 'display', + // Deprecate 5.0 + hideParent: false, - // private - ctype : 'Ext.Component', + ariaRole: 'presentation', - // private - actionMode : 'el', + bubbleEvents: [], - // private - getActionEl : function(){ - return this[this.actionMode]; - }, + actionMode: 'el', + monPropRe: /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/, - initPlugin : function(p){ - if(p.ptype && !Ext.isFunction(p.init)){ - p = Ext.ComponentMgr.createPlugin(p); - }else if(Ext.isString(p)){ - p = Ext.ComponentMgr.createPlugin({ - ptype: p - }); - } - p.init(this); - return p; - }, + //renderTpl: new Ext.XTemplate( + // '<div id="{id}" class="{baseCls} {cls} {cmpCls}<tpl if="typeof ui !== \'undefined\'"> {uiBase}-{ui}</tpl>"<tpl if="typeof style !== \'undefined\'"> style="{style}"</tpl>></div>', { + // compiled: true, + // disableFormats: true + // } + //), - /* // protected - * Function to be implemented by Component subclasses to be part of standard component initialization flow (it is empty by default). - *

-// Traditional constructor:
-Ext.Foo = function(config){
-    // call superclass constructor:
-    Ext.Foo.superclass.constructor.call(this, config);
-
-    this.addEvents({
-        // add events
-    });
-};
-Ext.extend(Ext.Foo, Ext.Bar, {
-   // class body
-}
-
-// initComponent replaces the constructor:
-Ext.Foo = Ext.extend(Ext.Bar, {
-    initComponent : function(){
-        // call superclass initComponent
-        Ext.Container.superclass.initComponent.call(this);
-
-        this.addEvents({
-            // add events
-        });
-    }
-}
-
- */ - initComponent : Ext.emptyFn, - -
/** - *

Render this Component into the passed HTML element.

- *

If you are using a {@link Ext.Container Container} object to house this Component, then - * do not use the render method.

- *

A Container's child Components are rendered by that Container's - * {@link Ext.Container#layout layout} manager when the Container is first rendered.

- *

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}, {@link Ext.layout.TableLayout}.

- *

If the Container is already rendered when a new child Component is added, you may need to call - * the Container's {@link Ext.Container#doLayout 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.

- *

When creating complex UIs, it is important to remember that sizing and positioning - * of child items is the responsibility of the Container's {@link Ext.Container#layout layout} manager. - * If you expect child items to be sized in response to user interactions, you must - * configure the Container with a layout manager which creates and manages the type of layout you - * have in mind.

- *

Omitting the Container's {@link Ext.Container#layout layout} config means that a basic - * layout manager is used which does nothing but render child components sequentially into the - * Container. No sizing or positioning will be performed in this situation.

- * @param {Element/HTMLElement/String} container (optional) The element this Component should be - * rendered into. If it is being created from existing markup, this should be omitted. - * @param {String/Number} position (optional) The element ID or DOM node index within the container before - * which this component will be inserted (defaults to appending to the end of the container) + /** + * Creates new Component. + * @param {Ext.Element/String/Object} config The configuration options may be specified as either: + * + * - **an element** : it is set as the internal element and its id used as the component id + * - **a string** : it is assumed to be the id of an existing element and is used as the component id + * - **anything else** : it is assumed to be a standard config object and is applied to the component */ - render : function(container, position){ - if(!this.rendered && this.fireEvent('beforerender', this) !== false){ - if(!container && this.el){ - this.el = Ext.get(this.el); - container = this.el.dom.parentNode; - this.allowDomMove = false; - } - this.container = Ext.get(container); - if(this.ctCls){ - this.container.addClass(this.ctCls); - } - this.rendered = true; - if(position !== undefined){ - if(Ext.isNumber(position)){ - position = this.container.dom.childNodes[position]; - }else{ - position = Ext.getDom(position); - } - } - this.onRender(this.container, position || null); - if(this.autoShow){ - this.el.removeClass(['x-hidden','x-hide-' + this.hideMode]); - } - if(this.cls){ - this.el.addClass(this.cls); - delete this.cls; - } - if(this.style){ - this.el.applyStyles(this.style); - delete this.style; - } - if(this.overCls){ - this.el.addClassOnOver(this.overCls); - } - this.fireEvent('render', this); + constructor: function(config) { + var me = this; + config = config || {}; + if (config.initialConfig) { - // Populate content of the component with html, contentEl or - // a tpl. - var contentTarget = this.getContentTarget(); - if (this.html){ - contentTarget.update(Ext.DomHelper.markup(this.html)); - delete this.html; - } - if (this.contentEl){ - var ce = Ext.getDom(this.contentEl); - Ext.fly(ce).removeClass(['x-hidden', 'x-hide-display']); - contentTarget.appendChild(ce); + // Being initialized from an Ext.Action instance... + if (config.isAction) { + me.baseAction = config; } - if (this.tpl) { - if (!this.tpl.compile) { - this.tpl = new Ext.XTemplate(this.tpl); - } - if (this.data) { - this.tpl[this.tplWriteMode](contentTarget, this.data); - delete this.data; - } - } - this.afterRender(this.container); - + config = config.initialConfig; + // component cloning / action set up + } + else if (config.tagName || config.dom || Ext.isString(config)) { + // element object + config = { + applyTo: config, + id: config.id || config + }; + } - if(this.hidden){ - // call this so we don't fire initial hide events. - this.doHide(); - } - if(this.disabled){ - // pass silent so the event doesn't fire the first time. - this.disable(true); - } + me.callParent([config]); - if(this.stateful !== false){ - this.initStateEvents(); - } - this.fireEvent('afterrender', this); + // If we were configured from an instance of Ext.Action, (or configured with a baseAction option), + // register this Component as one of its items + if (me.baseAction){ + me.baseAction.addComponent(me); } - return this; }, - -
/** - * Update the content area of a component. - * @param {Mixed} htmlOrData - * If this component has been configured with a template via the tpl config - * then it will use this argument as data to populate the template. - * If this component was not configured with a template, the components - * content area will be updated via Ext.Element update - * @param {Boolean} loadScripts - * (optional) Only legitimate when using the html configuration. Defaults to false - * @param {Function} callback - * (optional) Only legitimate when using the html configuration. Callback to execute when scripts have finished loading + /** + * The initComponent template method is an important initialization step for a Component. It is intended to be + * implemented by each subclass of Ext.Component to provide any needed constructor logic. The + * initComponent method of the class being created is called first, with each initComponent method + * up the hierarchy to Ext.Component being called thereafter. This makes it easy to implement and, + * if needed, override the constructor logic of the Component at any step in the hierarchy. + * + * The initComponent method **must** contain a call to {@link Ext.Base#callParent callParent} in order + * to ensure that the parent class' initComponent method is also called. + * + * The following example demonstrates using a dynamic string for the text of a button at the time of + * instantiation of the class. + * + * Ext.define('DynamicButtonText', { + * extend: 'Ext.button.Button', + * + * initComponent: function() { + * this.text = new Date(); + * this.renderTo = Ext.getBody(); + * this.callParent(); + * } + * }); + * + * Ext.onReady(function() { + * Ext.create('DynamicButtonText'); + * }); + * + * @template */ - update: function(htmlOrData, loadScripts, cb) { - var contentTarget = this.getContentTarget(); - if (this.tpl && typeof htmlOrData !== "string") { - this.tpl[this.tplWriteMode](contentTarget, htmlOrData || {}); - } else { - var html = Ext.isObject(htmlOrData) ? Ext.DomHelper.markup(htmlOrData) : htmlOrData; - contentTarget.update(html, loadScripts, cb); + initComponent: function() { + var me = this; + + me.callParent(); + + if (me.listeners) { + me.on(me.listeners); + delete me.listeners; } + me.enableBubble(me.bubbleEvents); + me.mons = []; }, + // private + afterRender: function() { + var me = this, + resizable = me.resizable; - /** - * @private - * Method to manage awareness of when components are added to their - * respective Container, firing an added event. - * References are established at add time rather than at render time. - * @param {Ext.Container} container Container which holds the component - * @param {number} pos Position at which the component was added - */ - onAdded : function(container, pos) { - this.ownerCt = container; - this.initRef(); - this.fireEvent('added', this, container, pos); - }, + if (me.floating) { + me.makeFloating(me.floating); + } else { + me.el.setVisibilityMode(Ext.Element[me.hideMode.toUpperCase()]); + } - /** - * @private - * Method to manage awareness of when components are removed from their - * respective Container, firing an removed event. References are properly - * cleaned up after removing a component from its owning container. - */ - onRemoved : function() { - this.removeRef(); - this.fireEvent('removed', this, this.ownerCt); - delete this.ownerCt; - }, + if (Ext.isDefined(me.autoScroll)) { + me.setAutoScroll(me.autoScroll); + } + me.callParent(); - /** - * @private - * Method to establish a reference to a component. - */ - initRef : function() { -
/** - * @cfg {String} ref - *

A path specification, relative to the Component's {@link #ownerCt} - * specifying into which ancestor Container to place a named reference to this Component.

- *

The ancestor axis can be traversed by using '/' characters in the path. - * For example, to put a reference to a Toolbar Button into the Panel which owns the Toolbar:


-var myGrid = new Ext.grid.EditorGridPanel({
-    title: 'My EditorGridPanel',
-    store: myStore,
-    colModel: myColModel,
-    tbar: [{
-        text: 'Save',
-        handler: saveChanges,
-        disabled: true,
-        ref: '../saveButton'
-    }],
-    listeners: {
-        afteredit: function() {
-//          The button reference is in the GridPanel
-            myGrid.saveButton.enable();
+        if (!(me.x && me.y) && (me.pageX || me.pageY)) {
+            me.setPagePosition(me.pageX, me.pageY);
         }
-    }
-});
-
- *

In the code above, if the ref had been 'saveButton' - * the reference would have been placed into the Toolbar. Each '/' in the ref - * moves up one level from the Component's {@link #ownerCt}.

- *

Also see the {@link #added} and {@link #removed} events.

- */ - if(this.ref && !this.refOwner){ - var levels = this.ref.split('/'), - last = levels.length, - i = 0, - t = this; - - while(t && i < last){ - t = t.ownerCt; - ++i; - } - if(t){ - t[this.refName = levels[--i]] = this; -
/** - * @type Ext.Container - * @property refOwner - * The ancestor Container into which the {@link #ref} reference was inserted if this Component - * is a child of a Container, and has been configured with a ref. - */ - this.refOwner = t; - } + + if (resizable) { + me.initResizable(resizable); + } + + if (me.draggable) { + me.initDraggable(); } + + me.initAria(); }, - removeRef : function() { - if (this.refOwner && this.refName) { - delete this.refOwner[this.refName]; - delete this.refOwner; + initAria: function() { + var actionEl = this.getActionEl(), + role = this.ariaRole; + if (role) { + actionEl.dom.setAttribute('role', role); } }, - // private - initState : function(){ - if(Ext.state.Manager){ - var id = this.getStateId(); - if(id){ - var state = Ext.state.Manager.get(id); - if(state){ - if(this.fireEvent('beforestaterestore', this, state) !== false){ - this.applyState(Ext.apply({}, state)); - this.fireEvent('staterestore', this, state); - } - } + /** + * Sets the overflow on the content element of the component. + * @param {Boolean} scroll True to allow the Component to auto scroll. + * @return {Ext.Component} this + */ + setAutoScroll : function(scroll){ + var me = this, + targetEl; + scroll = !!scroll; + if (me.rendered) { + targetEl = me.getTargetEl(); + targetEl.setStyle('overflow', scroll ? 'auto' : ''); + if (scroll && (Ext.isIE6 || Ext.isIE7)) { + // The scrollable container element must be non-statically positioned or IE6/7 will make + // positioned children stay in place rather than scrolling with the rest of the content + targetEl.position(); } } + me.autoScroll = scroll; + return me; }, // private - getStateId : function(){ - return this.stateId || ((/^(ext-comp-|ext-gen)/).test(String(this.id)) ? null : this.id); + makeFloating : function(cfg){ + this.mixins.floating.constructor.call(this, cfg); }, - // private - initStateEvents : function(){ - if(this.stateEvents){ - for(var i = 0, e; e = this.stateEvents[i]; i++){ - this.on(e, this.saveState, this, {delay:100}); - } - } + initResizable: function(resizable) { + var me = this; + + resizable = Ext.apply({ + target: me, + dynamic: false, + constrainTo: me.constrainTo || (me.floatParent ? me.floatParent.getTargetEl() : me.el.getScopeParent()), + handles: me.resizeHandles + }, resizable); + resizable.target = me; + me.resizer = Ext.create('Ext.resizer.Resizer', resizable); }, - // private - applyState : function(state){ - if(state){ - Ext.apply(this, state); - } + getDragEl: function() { + return this.el; }, - // private - getState : function(){ - return null; + initDraggable: function() { + var me = this, + ddConfig = Ext.applyIf({ + el: me.getDragEl(), + constrainTo: me.constrain ? (me.constrainTo || (me.floatParent ? me.floatParent.getTargetEl() : me.el.getScopeParent())) : undefined + }, me.draggable); + + // Add extra configs if Component is specified to be constrained + if (me.constrain || me.constrainDelegate) { + ddConfig.constrain = me.constrain; + ddConfig.constrainDelegate = me.constrainDelegate; + } + + me.dd = Ext.create('Ext.util.ComponentDragger', me, ddConfig); }, - // private - saveState : function(){ - if(Ext.state.Manager && this.stateful !== false){ - var id = this.getStateId(); - if(id){ - var state = this.getState(); - if(this.fireEvent('beforestatesave', this, state) !== false){ - Ext.state.Manager.set(id, state); - this.fireEvent('statesave', this, state); + /** + * Sets the left and top of the component. To set the page XY position instead, use {@link #setPagePosition}. This + * method fires the {@link #move} event. + * @param {Number} left The new left + * @param {Number} top The new top + * @param {Boolean/Object} [animate] If true, the Component is _animated_ into its new position. You may also pass an + * animation configuration. + * @return {Ext.Component} this + */ + setPosition: function(x, y, animate) { + var me = this, + el = me.el, + to = {}, + adj, adjX, adjY, xIsNumber, yIsNumber; + + if (Ext.isArray(x)) { + animate = y; + y = x[1]; + x = x[0]; + } + me.x = x; + me.y = y; + + if (!me.rendered) { + return me; + } + + adj = me.adjustPosition(x, y); + adjX = adj.x; + adjY = adj.y; + xIsNumber = Ext.isNumber(adjX); + yIsNumber = Ext.isNumber(adjY); + + if (xIsNumber || yIsNumber) { + if (animate) { + if (xIsNumber) { + to.left = adjX; } + if (yIsNumber) { + to.top = adjY; + } + + me.stopAnimation(); + me.animate(Ext.apply({ + duration: 1000, + listeners: { + afteranimate: Ext.Function.bind(me.afterSetPosition, me, [adjX, adjY]) + }, + to: to + }, animate)); + } + else { + if (!xIsNumber) { + el.setTop(adjY); + } + else if (!yIsNumber) { + el.setLeft(adjX); + } + else { + el.setLeftTop(adjX, adjY); + } + me.afterSetPosition(adjX, adjY); } } + return me; }, -
/** - * Apply this component to existing markup that is valid. With this function, no call to render() is required. - * @param {String/HTMLElement} el + /** + * @private + * @template + * Template method called after a Component has been positioned. */ - applyToMarkup : function(el){ - this.allowDomMove = false; - this.el = Ext.get(el); - this.render(this.el.dom.parentNode); + afterSetPosition: function(ax, ay) { + this.onPosition(ax, ay); + this.fireEvent('move', this, ax, ay); }, -
/** - * Adds a CSS class to the component's underlying element. - * @param {string} cls The CSS class name to add - * @return {Ext.Component} this + /** + * Displays component at specific xy position. + * A floating component (like a menu) is positioned relative to its ownerCt if any. + * Useful for popping up a context menu: + * + * listeners: { + * itemcontextmenu: function(view, record, item, index, event, options) { + * Ext.create('Ext.menu.Menu', { + * width: 100, + * height: 100, + * margin: '0 0 10 0', + * items: [{ + * text: 'regular item 1' + * },{ + * text: 'regular item 2' + * },{ + * text: 'regular item 3' + * }] + * }).showAt(event.getXY()); + * } + * } + * + * @param {Number} x The new x position + * @param {Number} y The new y position + * @param {Boolean/Object} [animate] True to animate the Component into its new position. You may also pass an + * animation configuration. */ - addClass : function(cls){ - if(this.el){ - this.el.addClass(cls); - }else{ - this.cls = this.cls ? this.cls + ' ' + cls : cls; + showAt: function(x, y, animate) { + var me = this; + + if (me.floating) { + me.setPosition(x, y, animate); + } else { + me.setPagePosition(x, y, animate); } - return this; + me.show(); }, -
/** - * Removes a CSS class from the component's underlying element. - * @param {string} cls The CSS class name to remove + /** + * Sets the page XY position of the component. To set the left and top instead, use {@link #setPosition}. + * This method fires the {@link #move} event. + * @param {Number} x The new x position + * @param {Number} y The new y position + * @param {Boolean/Object} [animate] True to animate the Component into its new position. You may also pass an + * animation configuration. * @return {Ext.Component} this */ - removeClass : function(cls){ - if(this.el){ - this.el.removeClass(cls); - }else if(this.cls){ - this.cls = this.cls.split(' ').remove(cls).join(' '); - } - return this; - }, + setPagePosition: function(x, y, animate) { + var me = this, + p; - // private - // default function is not really useful - onRender : function(ct, position){ - if(!this.el && this.autoEl){ - if(Ext.isString(this.autoEl)){ - this.el = document.createElement(this.autoEl); - }else{ - var div = document.createElement('div'); - Ext.DomHelper.overwrite(div, this.autoEl); - this.el = div.firstChild; + if (Ext.isArray(x)) { + y = x[1]; + x = x[0]; + } + me.pageX = x; + me.pageY = y; + if (me.floating && me.floatParent) { + // Floating Components being positioned in their ownerCt have to be made absolute + p = me.floatParent.getTargetEl().getViewRegion(); + if (Ext.isNumber(x) && Ext.isNumber(p.left)) { + x -= p.left; } - if (!this.el.id) { - this.el.id = this.getId(); + if (Ext.isNumber(y) && Ext.isNumber(p.top)) { + y -= p.top; } + me.setPosition(x, y, animate); } - if(this.el){ - this.el = Ext.get(this.el); - if(this.allowDomMove !== false){ - ct.dom.insertBefore(this.el.dom, position); - if (div) { - Ext.removeNode(div); - div = null; - } - } + else { + p = me.el.translatePoints(x, y); + me.setPosition(p.left, p.top, animate); } + return me; }, - // private - getAutoCreate : function(){ - var cfg = Ext.isObject(this.autoCreate) ? - this.autoCreate : Ext.apply({}, this.defaultAutoCreate); - if(this.id && !cfg.id){ - cfg.id = this.id; - } - return cfg; - }, + /** + * Gets the current box measurements of the component's underlying element. + * @param {Boolean} [local=false] If true the element's left and top are returned instead of page XY. + * @return {Object} box An object in the format {x, y, width, height} + */ + getBox : function(local){ + var pos = this.getPosition(local), + size = this.getSize(); - // private - afterRender : Ext.emptyFn, + size.x = pos[0]; + size.y = pos[1]; + return size; + }, -
/** - * Destroys this component by purging any event listeners, removing the component's element from the DOM, - * removing the component from its {@link Ext.Container} (if applicable) and unregistering it from - * {@link Ext.ComponentMgr}. Destruction is generally handled automatically by the framework and this method - * should usually not need to be called directly. - * + /** + * Sets the current box measurements of the component's underlying element. + * @param {Object} box An object in the format {x, y, width, height} + * @return {Ext.Component} this */ - destroy : function(){ - if(!this.isDestroyed){ - if(this.fireEvent('beforedestroy', this) !== false){ - this.destroying = true; - this.beforeDestroy(); - if(this.ownerCt && this.ownerCt.remove){ - this.ownerCt.remove(this, false); - } - if(this.rendered){ - this.el.remove(); - if(this.actionMode == 'container' || this.removeMode == 'container'){ - this.container.remove(); - } - } - this.onDestroy(); - Ext.ComponentMgr.unregister(this); - this.fireEvent('destroy', this); - this.purgeListeners(); - this.destroying = false; - this.isDestroyed = true; - } - } + updateBox : function(box){ + this.setSize(box.width, box.height); + this.setPagePosition(box.x, box.y); + return this; }, - deleteMembers : function(){ - var args = arguments; - for(var i = 0, len = args.length; i < len; ++i){ - delete this[args[i]]; - } + // Include margins + getOuterSize: function() { + var el = this.el; + return { + width: el.getWidth() + el.getMargin('lr'), + height: el.getHeight() + el.getMargin('tb') + }; }, // private - beforeDestroy : Ext.emptyFn, + adjustPosition: function(x, y) { - // private - onDestroy : Ext.emptyFn, - -
/** - *

Returns the {@link Ext.Element} which encapsulates this Component.

- *

This will usually be a <DIV> element created by the class's onRender method, but - * that may be overridden using the {@link #autoEl} config.

- *

Note: this element will not be available until this Component has been rendered.


- *

To add listeners for DOM events to this Component (as opposed to listeners - * for this Component's own Observable events), see the {@link #listeners} config for a suggestion, - * or use a render listener directly:


-new Ext.Panel({
-    title: 'The Clickable Panel',
-    listeners: {
-        render: function(p) {
-            // Append the Panel to the click handler's argument list.
-            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
-        },
-        single: true  // Remove the listener after first invocation
-    }
-});
-
- * @return {Ext.Element} The Element which encapsulates this Component. + // Floating Components being positioned in their ownerCt have to be made absolute + if (this.floating && this.floatParent) { + var o = this.floatParent.getTargetEl().getViewRegion(); + x += o.left; + y += o.top; + } + + return { + x: x, + y: y + }; + }, + + /** + * Gets the current XY position of the component's underlying element. + * @param {Boolean} [local=false] If true the element's left and top are returned instead of page XY. + * @return {Number[]} The XY position of the element (e.g., [100, 200]) */ - getEl : function(){ - return this.el; + getPosition: function(local) { + var me = this, + el = me.el, + xy, + o; + + // Floating Components which were just rendered with no ownerCt return local position. + if ((local === true) || (me.floating && !me.floatParent)) { + return [el.getLeft(true), el.getTop(true)]; + } + xy = me.xy || el.getXY(); + + // Floating Components in an ownerCt have to have their positions made relative + if (me.floating) { + o = me.floatParent.getTargetEl().getViewRegion(); + xy[0] -= o.left; + xy[1] -= o.top; + } + return xy; }, - // private - getContentTarget : function(){ - return this.el; + getId: function() { + var me = this, + xtype; + + if (!me.id) { + xtype = me.getXType(); + xtype = xtype ? xtype.replace(Ext.Component.INVALID_ID_CHARS_Re, '-') : 'ext-comp'; + me.id = xtype + '-' + me.getAutoId(); + } + return me.id; }, -
/** - * Returns the id of this component or automatically generates and - * returns an id if an id is not defined yet:

-     * 'ext-comp-' + (++Ext.Component.AUTO_ID)
-     * 
- * @return {String} id - */ - getId : function(){ - return this.id || (this.id = 'ext-comp-' + (++Ext.Component.AUTO_ID)); + onEnable: function() { + var actionEl = this.getActionEl(); + actionEl.dom.removeAttribute('aria-disabled'); + actionEl.dom.disabled = false; + this.callParent(); }, -
/** - * Returns the {@link #itemId} of this component. If an - * {@link #itemId} was not assigned through configuration the - * id is returned using {@link #getId}. - * @return {String} - */ - getItemId : function(){ - return this.itemId || this.getId(); + onDisable: function() { + var actionEl = this.getActionEl(); + actionEl.dom.setAttribute('aria-disabled', true); + actionEl.dom.disabled = true; + this.callParent(); }, -
/** - * Try to focus this component. - * @param {Boolean} selectText (optional) If applicable, true to also select the text in this component - * @param {Boolean/Number} delay (optional) Delay the focus this number of milliseconds (true for 10 milliseconds) + /** + * Shows this Component, rendering it first if {@link #autoRender} or {@link #floating} are `true`. + * + * After being shown, a {@link #floating} Component (such as a {@link Ext.window.Window}), is activated it and + * brought to the front of its {@link #zIndexManager z-index stack}. + * + * @param {String/Ext.Element} [animateTarget=null] **only valid for {@link #floating} Components such as {@link + * Ext.window.Window Window}s or {@link Ext.tip.ToolTip ToolTip}s, or regular Components which have been configured + * with `floating: true`.** The target from which the Component should animate from while opening. + * @param {Function} [callback] A callback function to call after the Component is displayed. + * Only necessary if animation was specified. + * @param {Object} [scope] The scope (`this` reference) in which the callback is executed. + * Defaults to this Component. * @return {Ext.Component} this */ - focus : function(selectText, delay){ - if(delay){ - this.focus.defer(Ext.isNumber(delay) ? delay : 10, this, [selectText, false]); - return; - } - if(this.rendered){ - this.el.focus(); - if(selectText === true){ - this.el.dom.select(); + show: function(animateTarget, cb, scope) { + var me = this; + + if (me.rendered && me.isVisible()) { + if (me.toFrontOnShow && me.floating) { + me.toFront(); + } + } else if (me.fireEvent('beforeshow', me) !== false) { + me.hidden = false; + + // Render on first show if there is an autoRender config, or if this is a floater (Window, Menu, BoundList etc). + if (!me.rendered && (me.autoRender || me.floating)) { + me.doAutoRender(); + } + if (me.rendered) { + me.beforeShow(); + me.onShow.apply(me, arguments); + + // Notify any owning Container unless it's suspended. + // Floating Components do not participate in layouts. + if (me.ownerCt && !me.floating && !(me.ownerCt.suspendLayout || me.ownerCt.layout.layoutBusy)) { + me.ownerCt.doLayout(); + } + me.afterShow.apply(me, arguments); } } - return this; + return me; }, - // private - blur : function(){ - if(this.rendered){ - this.el.blur(); + beforeShow: Ext.emptyFn, + + // Private. Override in subclasses where more complex behaviour is needed. + onShow: function() { + var me = this; + + me.el.show(); + me.callParent(arguments); + if (me.floating && me.constrain) { + me.doConstrain(); } - return this; }, -
/** - * Disable this component and fire the 'disable' event. - * @return {Ext.Component} this - */ - disable : function(/* private */ silent){ - if(this.rendered){ - this.onDisable(); + afterShow: function(animateTarget, cb, scope) { + var me = this, + fromBox, + toBox, + ghostPanel; + + // Default to configured animate target if none passed + animateTarget = animateTarget || me.animateTarget; + + // Need to be able to ghost the Component + if (!me.ghost) { + animateTarget = null; } - this.disabled = true; - if(silent !== true){ - this.fireEvent('disable', this); + // If we're animating, kick of an animation of the ghost from the target to the *Element* current box + if (animateTarget) { + animateTarget = animateTarget.el ? animateTarget.el : Ext.get(animateTarget); + toBox = me.el.getBox(); + fromBox = animateTarget.getBox(); + me.el.addCls(Ext.baseCSSPrefix + 'hide-offsets'); + ghostPanel = me.ghost(); + ghostPanel.el.stopAnimation(); + + // Shunting it offscreen immediately, *before* the Animation class grabs it ensure no flicker. + ghostPanel.el.setX(-10000); + + ghostPanel.el.animate({ + from: fromBox, + to: toBox, + listeners: { + afteranimate: function() { + delete ghostPanel.componentLayout.lastComponentSize; + me.unghost(); + me.el.removeCls(Ext.baseCSSPrefix + 'hide-offsets'); + me.onShowComplete(cb, scope); + } + } + }); + } + else { + me.onShowComplete(cb, scope); } - return this; }, - // private - onDisable : function(){ - this.getActionEl().addClass(this.disabledClass); - this.el.dom.disabled = true; + onShowComplete: function(cb, scope) { + var me = this; + if (me.floating) { + me.toFront(); + } + Ext.callback(cb, scope || me); + me.fireEvent('show', me); }, -
/** - * Enable this component and fire the 'enable' event. + /** + * Hides this Component, setting it to invisible using the configured {@link #hideMode}. + * @param {String/Ext.Element/Ext.Component} [animateTarget=null] **only valid for {@link #floating} Components + * such as {@link Ext.window.Window Window}s or {@link Ext.tip.ToolTip ToolTip}s, or regular Components which have + * been configured with `floating: true`.**. The target to which the Component should animate while hiding. + * @param {Function} [callback] A callback function to call after the Component is hidden. + * @param {Object} [scope] The scope (`this` reference) in which the callback is executed. + * Defaults to this Component. * @return {Ext.Component} this */ - enable : function(){ - if(this.rendered){ - this.onEnable(); + hide: function() { + var me = this; + + // Clear the flag which is set if a floatParent was hidden while this is visible. + // If a hide operation was subsequently called, that pending show must be hidden. + me.showOnParentShow = false; + + if (!(me.rendered && !me.isVisible()) && me.fireEvent('beforehide', me) !== false) { + me.hidden = true; + if (me.rendered) { + me.onHide.apply(me, arguments); + + // Notify any owning Container unless it's suspended. + // Floating Components do not participate in layouts. + if (me.ownerCt && !me.floating && !(me.ownerCt.suspendLayout || me.ownerCt.layout.layoutBusy)) { + me.ownerCt.doLayout(); + } + } } - this.disabled = false; - this.fireEvent('enable', this); - return this; + return me; }, - // private - onEnable : function(){ - this.getActionEl().removeClass(this.disabledClass); - this.el.dom.disabled = false; + // Possibly animate down to a target element. + onHide: function(animateTarget, cb, scope) { + var me = this, + ghostPanel, + toBox; + + // Default to configured animate target if none passed + animateTarget = animateTarget || me.animateTarget; + + // Need to be able to ghost the Component + if (!me.ghost) { + animateTarget = null; + } + // If we're animating, kick off an animation of the ghost down to the target + if (animateTarget) { + animateTarget = animateTarget.el ? animateTarget.el : Ext.get(animateTarget); + ghostPanel = me.ghost(); + ghostPanel.el.stopAnimation(); + toBox = animateTarget.getBox(); + toBox.width += 'px'; + toBox.height += 'px'; + ghostPanel.el.animate({ + to: toBox, + listeners: { + afteranimate: function() { + delete ghostPanel.componentLayout.lastComponentSize; + ghostPanel.el.hide(); + me.afterHide(cb, scope); + } + } + }); + } + me.el.hide(); + if (!animateTarget) { + me.afterHide(cb, scope); + } }, -
/** - * Convenience function for setting disabled/enabled by boolean. - * @param {Boolean} disabled - * @return {Ext.Component} this - */ - setDisabled : function(disabled){ - return this[disabled ? 'disable' : 'enable'](); + afterHide: function(cb, scope) { + Ext.callback(cb, scope || this); + this.fireEvent('hide', this); }, -
/** - * Show this component. Listen to the '{@link #beforeshow}' event and return - * false to cancel showing the component. Fires the '{@link #show}' - * event after showing the component. - * @return {Ext.Component} this - */ - show : function(){ - if(this.fireEvent('beforeshow', this) !== false){ - this.hidden = false; - if(this.autoRender){ - this.render(Ext.isBoolean(this.autoRender) ? Ext.getBody() : this.autoRender); - } - if(this.rendered){ - this.onShow(); + /** + * @private + * @template + * Template method to contribute functionality at destroy time. + */ + onDestroy: function() { + var me = this; + + // Ensure that any ancillary components are destroyed. + if (me.rendered) { + Ext.destroy( + me.proxy, + me.proxyWrap, + me.resizer + ); + // Different from AbstractComponent + if (me.actionMode == 'container' || me.removeMode == 'container') { + me.container.remove(); } - this.fireEvent('show', this); } - return this; + delete me.focusTask; + me.callParent(); }, - // private - onShow : function(){ - this.getVisibilityEl().removeClass('x-hide-' + this.hideMode); + deleteMembers: function() { + var args = arguments, + len = args.length, + i = 0; + for (; i < len; ++i) { + delete this[args[i]]; + } }, -
/** - * Hide this component. Listen to the '{@link #beforehide}' event and return - * false to cancel hiding the component. Fires the '{@link #hide}' - * event after hiding the component. Note this method is called internally if - * the component is configured to be {@link #hidden}. + /** + * Try to focus this component. + * @param {Boolean} [selectText] If applicable, true to also select the text in this component + * @param {Boolean/Number} [delay] Delay the focus this number of milliseconds (true for 10 milliseconds). * @return {Ext.Component} this */ - hide : function(){ - if(this.fireEvent('beforehide', this) !== false){ - this.doHide(); - this.fireEvent('hide', this); + focus: function(selectText, delay) { + var me = this, + focusEl; + + if (delay) { + if (!me.focusTask) { + me.focusTask = Ext.create('Ext.util.DelayedTask', me.focus); + } + me.focusTask.delay(Ext.isNumber(delay) ? delay : 10, null, me, [selectText, false]); + return me; } - return this; + + if (me.rendered && !me.isDestroyed) { + // getFocusEl could return a Component. + focusEl = me.getFocusEl(); + focusEl.focus(); + if (focusEl.dom && selectText === true) { + focusEl.dom.select(); + } + + // Focusing a floating Component brings it to the front of its stack. + // this is performed by its zIndexManager. Pass preventFocus true to avoid recursion. + if (me.floating) { + me.toFront(true); + } + } + return me; + }, + + /** + * @private + * Returns the focus holder element associated with this Component. By default, this is the Component's encapsulating + * element. Subclasses which use embedded focusable elements (such as Window and Button) should override this for use + * by the {@link #focus} method. + * @returns {Ext.Element} the focus holing element. + */ + getFocusEl: function() { + return this.el; }, // private - doHide: function(){ - this.hidden = true; - if(this.rendered){ - this.onHide(); + blur: function() { + if (this.rendered) { + this.getFocusEl().blur(); } + return this; }, - // private - onHide : function(){ - this.getVisibilityEl().addClass('x-hide-' + this.hideMode); + getEl: function() { + return this.el; }, - // private - getVisibilityEl : function(){ - return this.hideParent ? this.container : this.getActionEl(); + // Deprecate 5.0 + getResizeEl: function() { + return this.el; }, -
/** - * Convenience function to hide or show this component by boolean. - * @param {Boolean} visible True to show, false to hide - * @return {Ext.Component} this - */ - setVisible : function(visible){ - return this[visible ? 'show' : 'hide'](); + // Deprecate 5.0 + getPositionEl: function() { + return this.el; }, -
/** - * Returns true if this component is visible. - * @return {Boolean} True if this component is visible, false otherwise. - */ - isVisible : function(){ - return this.rendered && this.getVisibilityEl().isVisible(); + // Deprecate 5.0 + getActionEl: function() { + return this.el; + }, + + // Deprecate 5.0 + getVisibilityEl: function() { + return this.el; + }, + + // Deprecate 5.0 + onResize: Ext.emptyFn, + + // private + getBubbleTarget: function() { + return this.ownerCt; + }, + + // private + getContentTarget: function() { + return this.el; }, -
/** - * Clone the current component using the original config values passed into this instance by default. + /** + * Clone the current component using the original config values passed into this instance by default. * @param {Object} overrides A new config containing any properties to override in the cloned version. * An id property can be passed on this object, otherwise one will be generated to avoid duplicates. * @return {Ext.Component} clone The cloned copy of this component */ - cloneConfig : function(overrides){ + cloneConfig: function(overrides) { overrides = overrides || {}; - var id = overrides.id || Ext.id(); - var cfg = Ext.applyIf(overrides, this.initialConfig); - cfg.id = id; // prevent dup id - return new this.constructor(cfg); - }, + var id = overrides.id || Ext.id(), + cfg = Ext.applyIf(overrides, this.initialConfig), + self; -
/** - * Gets the xtype for this component as registered with {@link Ext.ComponentMgr}. For a list of all - * available xtypes, see the {@link Ext.Component} header. Example usage: - *

-var t = new Ext.form.TextField();
-alert(t.getXType());  // alerts 'textfield'
-
- * @return {String} The xtype - */ - getXType : function(){ - return this.constructor.xtype; - }, + cfg.id = id; -
/** - *

Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended - * from the xtype (default) or whether it is directly of the xtype specified (shallow = true).

- *

If using your own subclasses, be aware that a Component must register its own xtype - * to participate in determination of inherited xtypes.

- *

For a list of all available xtypes, see the {@link Ext.Component} header.

- *

Example usage:

- *

-var t = new Ext.form.TextField();
-var isText = t.isXType('textfield');        // true
-var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
-var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
-
- * @param {String} xtype The xtype to check for this Component - * @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 {Boolean} True if this component descends from the specified xtype, false otherwise. - */ - isXType : function(xtype, shallow){ - //assume a string by default - if (Ext.isFunction(xtype)){ - xtype = xtype.xtype; //handle being passed the class, e.g. Ext.Component - }else if (Ext.isObject(xtype)){ - xtype = xtype.constructor.xtype; //handle being passed an instance - } + self = Ext.getClass(this); - return !shallow ? ('/' + this.getXTypes() + '/').indexOf('/' + xtype + '/') != -1 : this.constructor.xtype == xtype; + // prevent dup id + return new self(cfg); }, -
/** - *

Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all - * available xtypes, see the {@link Ext.Component} header.

- *

If using your own subclasses, be aware that a Component must register its own xtype - * to participate in determination of inherited xtypes.

- *

Example usage:

- *

-var t = new Ext.form.TextField();
-alert(t.getXTypes());  // alerts 'component/box/field/textfield'
-
- * @return {String} The xtype hierarchy string + /** + * Gets the xtype for this component as registered with {@link Ext.ComponentManager}. For a list of all available + * xtypes, see the {@link Ext.Component} header. Example usage: + * + * var t = new Ext.form.field.Text(); + * alert(t.getXType()); // alerts 'textfield' + * + * @return {String} The xtype */ - getXTypes : function(){ - var tc = this.constructor; - if(!tc.xtypes){ - var c = [], sc = this; - while(sc && sc.constructor.xtype){ - c.unshift(sc.constructor.xtype); - sc = sc.constructor.superclass; - } - tc.xtypeChain = c; - tc.xtypes = c.join('/'); - } - return tc.xtypes; + getXType: function() { + return this.self.xtype; }, -
/** - * Find a container above this component at any level by a custom function. If the passed function returns - * true, the container will be returned. + /** + * Find a container above this component at any level by a custom function. If the passed function returns true, the + * container will be returned. * @param {Function} fn The custom function to call with the arguments (container, this component). - * @return {Ext.Container} The first Container for which the custom function returns true + * @return {Ext.container.Container} The first Container for which the custom function returns true */ - findParentBy : function(fn) { - for (var p = this.ownerCt; (p != null) && !fn(p, this); p = p.ownerCt); + findParentBy: function(fn) { + var p; + + // Iterate up the ownerCt chain until there's no ownerCt, or we find an ancestor which matches using the selector function. + for (p = this.ownerCt; p && !fn(p, this); p = p.ownerCt); return p || null; }, -
/** - * Find a container above this component at any level by xtype or class - * @param {String/Class} xtype The xtype string for a component, or the class of the component directly - * @return {Ext.Container} The first Container which matches the given xtype or class + /** + * Find a container above this component at any level by xtype or class + * + * See also the {@link Ext.Component#up up} method. + * + * @param {String/Ext.Class} xtype The xtype string for a component, or the class of the component directly + * @return {Ext.container.Container} The first Container which matches the given xtype or class */ - findParentByType : function(xtype) { + findParentByType: function(xtype) { return Ext.isFunction(xtype) ? - this.findParentBy(function(p){ + this.findParentBy(function(p) { return p.constructor === xtype; - }) : - this.findParentBy(function(p){ - return p.constructor.xtype === xtype; - }); - }, - - // protected - getPositionEl : function(){ - return this.positionEl || this.el; - }, - - // private - purgeListeners : function(){ - Ext.Component.superclass.purgeListeners.call(this); - if(this.mons){ - this.on('beforedestroy', this.clearMons, this, {single: true}); - } - }, - - // private - clearMons : function(){ - Ext.each(this.mons, function(m){ - m.item.un(m.ename, m.fn, m.scope); - }, this); - this.mons = []; - }, - - // private - createMons: function(){ - if(!this.mons){ - this.mons = []; - this.on('beforedestroy', this.clearMons, this, {single: true}); - } - }, - -
/** - *

Adds listeners to any Observable object (or Elements) which are automatically removed when this Component - * is destroyed. Usage:

-myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
-
- *

or:

-myGridPanel.mon(myGridPanel.getSelectionModel(), {
-    selectionchange: handleSelectionChange,
-    buffer: 50
-});
-
- * @param {Observable|Element} item The item to which to add a listener/listeners. - * @param {Object|String} ename The event name, or an object containing event name properties. - * @param {Function} fn Optional. If the ename parameter was an event name, this - * is the handler function. - * @param {Object} scope Optional. If the ename parameter was an event name, this - * is the scope (this reference) in which the handler function is executed. - * @param {Object} opt Optional. If the ename parameter was an event name, this - * is the {@link Ext.util.Observable#addListener addListener} options. - */ - mon : function(item, ename, fn, scope, opt){ - this.createMons(); - if(Ext.isObject(ename)){ - var propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/; - - var o = ename; - for(var e in o){ - if(propRe.test(e)){ - continue; - } - if(Ext.isFunction(o[e])){ - // shared options - this.mons.push({ - item: item, ename: e, fn: o[e], scope: o.scope - }); - item.on(e, o[e], o.scope, o); - }else{ - // individual options - this.mons.push({ - item: item, ename: e, fn: o[e], scope: o.scope - }); - item.on(e, o[e]); - } - } - return; - } - - this.mons.push({ - item: item, ename: ename, fn: fn, scope: scope - }); - item.on(ename, fn, scope, opt); + }) + : + this.up(xtype); }, -
/** - * Removes listeners that were added by the {@link #mon} method. - * @param {Observable|Element} item The item from which to remove a listener/listeners. - * @param {Object|String} ename The event name, or an object containing event name properties. - * @param {Function} fn Optional. If the ename parameter was an event name, this - * is the handler function. - * @param {Object} scope Optional. If the ename parameter was an event name, this - * is the scope (this reference) in which the handler function is executed. + /** + * 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] The scope of the function. Defaults to current node. + * @param {Array} [args] The args to call the function with. Defaults to passing the current component. + * @return {Ext.Component} this */ - mun : function(item, ename, fn, scope){ - var found, mon; - this.createMons(); - for(var i = 0, len = this.mons.length; i < len; ++i){ - mon = this.mons[i]; - if(item === mon.item && ename == mon.ename && fn === mon.fn && scope === mon.scope){ - this.mons.splice(i, 1); - item.un(ename, fn, scope); - found = true; + bubble: function(fn, scope, args) { + var p = this; + while (p) { + if (fn.apply(scope || p, args || [p]) === false) { break; } + p = p.ownerCt; } - return found; + return this; }, -
/** - * Returns the next component in the owning container - * @return Ext.Component - */ - nextSibling : function(){ - if(this.ownerCt){ - var index = this.ownerCt.items.indexOf(this); - if(index != -1 && index+1 < this.ownerCt.items.getCount()){ - return this.ownerCt.items.itemAt(index+1); - } - } - return null; - }, + getProxy: function() { + var me = this, + target; -
/** - * Returns the previous component in the owning container - * @return Ext.Component - */ - previousSibling : function(){ - if(this.ownerCt){ - var index = this.ownerCt.items.indexOf(this); - if(index > 0){ - return this.ownerCt.items.itemAt(index-1); + if (!me.proxy) { + target = Ext.getBody(); + if (Ext.scopeResetCSS) { + me.proxyWrap = target = Ext.getBody().createChild({ + cls: Ext.baseCSSPrefix + 'reset' + }); } + me.proxy = me.el.createProxy(Ext.baseCSSPrefix + 'proxy-el', target, true); } - return null; - }, - -
/** - * Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy. - * @return {Ext.Container} the Container which owns this Component. - */ - getBubbleTarget : function(){ - return this.ownerCt; + return me.proxy; } -}); -Ext.reg('component', Ext.Component);
- - \ No newline at end of file +}); +
+ +