/** - * @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}; + + + + +- *
- 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
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} fieldLabelThe 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:- */ - /** - * @cfg {String} labelStyle-new Ext.FormPanel({ - height: 100, - renderTo: Ext.getBody(), - items: [{ - xtype: 'textfield', - fieldLabel: 'Name' - }] -}); -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
- * Example use:{@link #hideLabel}and - *{@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}.- */ - /** - * @cfg {String} labelSeparator-new Ext.FormPanel({ - height: 100, - renderTo: Ext.getBody(), - items: [{ - xtype: 'textfield', - fieldLabel: 'Name', - labelStyle: 'font-weight:bold;' - }] -}); -The separator to display after the text of each - * {@link #fieldLabel}. This property may be configured at various levels. - * The order of precedence is: - *
- * To display no separator for this field's label specify empty string ''. - *- *
- field / component level
- *- container level
- *- {@link Ext.layout.FormLayout#labelSeparator layout level} (defaults to colon ':')
- *Note: see the note for {@link #clearCls}.
- *Also see {@link #hideLabel} and - * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}.
- * Example use:- */ - /** - * @cfg {Boolean} hideLabel-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 '=' - }] -}); -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:- */ - /** - * @cfg {String} clearCls-new Ext.FormPanel({ - height: 100, - renderTo: Ext.getBody(), - items: [{ - xtype: 'textfield' - hideLabel: true - }] -}); -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:- */ - /** - * @cfg {String} id - *-// 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' - }] -}); -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
- */ - /** - * @cfg {String} itemId - *{@link #ownerCt}.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}, useitemIdwith - * {@link Ext.Container}.{@link Ext.Container#getComponent getComponent} which will retrieve - *itemId's or {@link #id}'s. SinceitemId's are an index to the - * container's internal MixedCollection, theitemIdis 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}. - *- */ - /** - * @cfg {String} ctCls - *-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' - } - }) - ] -}); - *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: - *
- * To configure the above Class with an extra CSS class append to the default. For example, - * for BoxLayout (Hbox and Vbox):- *
- {@link Ext.layout.Box Box Layout} : 'x-box-layout-ct'
- *- * - */ - /** - * @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 - *- * ctCls: 'x-box-layout-ct custom-class' - *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.
- */ - /** - * @cfg {Mixed} renderTo - *- *
- 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.- *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 ofapplyStatesimply 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
- */ - /** - * @cfg {Array} stateEvents - *{@link #stateful}for an explanation of saving and - * restoring Component state.An array of events that, when fired, should trigger this component to - * save its state (defaults to none).
- *stateEventsmay be any type - * of event supported by this component, including browser or custom events - * (e.g., ['click', 'customerchange']).See
- */ - /** - * @cfg {Mixed} autoEl - *{@link #stateful}for an explanation of saving and - * restoring Component state.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:
- */ - 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 - *-{ - 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' - } -} -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
- *idof an existing HTML element to use as the content - * for this component.
{@link Ext.Container#layout layout}
- * scheme that the Component may use. It is just HTML. Layouts operate on child {@link Ext.Container#items items}.x-hidden or the x-hide-display CSS class to
- * prevent a brief flicker of the content before it is rendered to the panel.{@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
- });
- }
-}
-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.
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
- }
-});
-id of this component or automatically generates and
- * returns an id if an id is not defined yet:
- * 'ext-comp-' + (++Ext.Component.AUTO_ID)
- * {@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'
-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
-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'
-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
-});
-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
+});
+
+
+