+++ /dev/null
-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
-\r
-/**\r
- * @class Ext.Component\r
- * @extends Ext.util.Observable\r
- * <p>Base class for all Ext components. All subclasses of Component can automatically participate in the standard\r
- * Ext component lifecycle of creation, rendering and destruction. They also have automatic support for basic hide/show\r
- * and enable/disable behavior. Component allows any subclass to be lazy-rendered into any {@link Ext.Container} and\r
- * to be automatically registered with the {@link Ext.ComponentMgr} so that it can be referenced at any time via\r
- * {@link Ext#getCmp}. All visual widgets that require rendering into a layout should subclass Component (or\r
- * {@link Ext.BoxComponent} if managed box model handling is required).</p>\r
- * <p>Every component has a specific xtype, which is its Ext-specific type name, along with methods for checking the\r
- * xtype like {@link #getXType} and {@link #isXType}. This is the list of all valid xtypes:</p>\r
- * <pre>\r
-xtype Class\r
-------------- ------------------\r
-box Ext.BoxComponent\r
-button Ext.Button\r
-colorpalette Ext.ColorPalette\r
-component Ext.Component\r
-container Ext.Container\r
-cycle Ext.CycleButton\r
-dataview Ext.DataView\r
-datepicker Ext.DatePicker\r
-editor Ext.Editor\r
-editorgrid Ext.grid.EditorGridPanel\r
-grid Ext.grid.GridPanel\r
-paging Ext.PagingToolbar\r
-panel Ext.Panel\r
-progress Ext.ProgressBar\r
-propertygrid Ext.grid.PropertyGrid\r
-slider Ext.Slider\r
-splitbutton Ext.SplitButton\r
-statusbar Ext.StatusBar\r
-tabpanel Ext.TabPanel\r
-treepanel Ext.tree.TreePanel\r
-viewport Ext.Viewport\r
-window Ext.Window\r
-\r
-Toolbar components\r
----------------------------------------\r
-toolbar Ext.Toolbar\r
-tbbutton Ext.Toolbar.Button\r
-tbfill Ext.Toolbar.Fill\r
-tbitem Ext.Toolbar.Item\r
-tbseparator Ext.Toolbar.Separator\r
-tbspacer Ext.Toolbar.Spacer\r
-tbsplit Ext.Toolbar.SplitButton\r
-tbtext Ext.Toolbar.TextItem\r
-\r
-Form components\r
----------------------------------------\r
-form Ext.FormPanel\r
-checkbox Ext.form.Checkbox\r
-combo Ext.form.ComboBox\r
-datefield Ext.form.DateField\r
-field Ext.form.Field\r
-fieldset Ext.form.FieldSet\r
-hidden Ext.form.Hidden\r
-htmleditor Ext.form.HtmlEditor\r
-label Ext.form.Label\r
-numberfield Ext.form.NumberField\r
-radio Ext.form.Radio\r
-textarea Ext.form.TextArea\r
-textfield Ext.form.TextField\r
-timefield Ext.form.TimeField\r
-trigger Ext.form.TriggerField\r
-</pre>\r
- * @constructor\r
- * @param {Ext.Element/String/Object} config The configuration options. If an element is passed, it is set as the internal\r
- * element and its id used as the component id. If a string is passed, it is assumed to be the id of an existing element\r
- * and is used as the component id. Otherwise, it is assumed to be a standard config object and is applied to the component.\r
- */\r
-Ext.Component = function(config){\r
- config = config || {};\r
- if(config.initialConfig){\r
- if(config.isAction){ // actions\r
- this.baseAction = config;\r
- }\r
- config = config.initialConfig; // component cloning / action set up\r
- }else if(config.tagName || config.dom || typeof config == "string"){ // element object\r
- config = {applyTo: config, id: config.id || config};\r
- }\r
-\r
- /**\r
- * This Component's initial configuration specification. Read-only.\r
- * @type Object\r
- * @property initialConfig\r
- */\r
- this.initialConfig = config;\r
-\r
- Ext.apply(this, config);\r
- this.addEvents(\r
- /**\r
- * @event disable\r
- * Fires after the component is disabled.\r
- * @param {Ext.Component} this\r
- */\r
- 'disable',\r
- /**\r
- * @event enable\r
- * Fires after the component is enabled.\r
- * @param {Ext.Component} this\r
- */\r
- 'enable',\r
- /**\r
- * @event beforeshow\r
- * Fires before the component is shown. Return false to stop the show.\r
- * @param {Ext.Component} this\r
- */\r
- 'beforeshow',\r
- /**\r
- * @event show\r
- * Fires after the component is shown.\r
- * @param {Ext.Component} this\r
- */\r
- 'show',\r
- /**\r
- * @event beforehide\r
- * Fires before the component is hidden. Return false to stop the hide.\r
- * @param {Ext.Component} this\r
- */\r
- 'beforehide',\r
- /**\r
- * @event hide\r
- * Fires after the component is hidden.\r
- * @param {Ext.Component} this\r
- */\r
- 'hide',\r
- /**\r
- * @event beforerender\r
- * Fires before the component is rendered. Return false to stop the render.\r
- * @param {Ext.Component} this\r
- */\r
- 'beforerender',\r
- /**\r
- * @event render\r
- * Fires after the component is rendered.\r
- * @param {Ext.Component} this\r
- */\r
- 'render',\r
- /**\r
- * @event beforedestroy\r
- * Fires before the component is destroyed. Return false to stop the destroy.\r
- * @param {Ext.Component} this\r
- */\r
- 'beforedestroy',\r
- /**\r
- * @event destroy\r
- * Fires after the component is destroyed.\r
- * @param {Ext.Component} this\r
- */\r
- 'destroy',\r
- /**\r
- * @event beforestaterestore\r
- * Fires before the state of the component is restored. Return false to stop the restore.\r
- * @param {Ext.Component} this\r
- * @param {Object} state The hash of state values\r
- */\r
- 'beforestaterestore',\r
- /**\r
- * @event staterestore\r
- * Fires after the state of the component is restored.\r
- * @param {Ext.Component} this\r
- * @param {Object} state The hash of state values\r
- */\r
- 'staterestore',\r
- /**\r
- * @event beforestatesave\r
- * Fires before the state of the component is saved to the configured state provider. Return false to stop the save.\r
- * @param {Ext.Component} this\r
- * @param {Object} state The hash of state values\r
- */\r
- 'beforestatesave',\r
- /**\r
- * @event statesave\r
- * Fires after the state of the component is saved to the configured state provider.\r
- * @param {Ext.Component} this\r
- * @param {Object} state The hash of state values\r
- */\r
- 'statesave'\r
- );\r
- this.getId();\r
- Ext.ComponentMgr.register(this);\r
- Ext.Component.superclass.constructor.call(this);\r
-\r
- if(this.baseAction){\r
- this.baseAction.addComponent(this);\r
- }\r
-\r
- this.initComponent();\r
-\r
- if(this.plugins){\r
- if(Ext.isArray(this.plugins)){\r
- for(var i = 0, len = this.plugins.length; i < len; i++){\r
- this.plugins[i] = this.initPlugin(this.plugins[i]);\r
- }\r
- }else{\r
- this.plugins = this.initPlugin(this.plugins);\r
- }\r
- }\r
-\r
- if(this.stateful !== false){\r
- this.initState(config);\r
- }\r
-\r
- if(this.applyTo){\r
- this.applyToMarkup(this.applyTo);\r
- delete this.applyTo;\r
- }else if(this.renderTo){\r
- this.render(this.renderTo);\r
- delete this.renderTo;\r
- }\r
-};\r
-\r
-// private\r
-Ext.Component.AUTO_ID = 1000;\r
-\r
-Ext.extend(Ext.Component, Ext.util.Observable, {\r
- // Configs below are used for all Components when rendered by FormLayout.\r
- /**\r
- * @cfg {String} fieldLabel The label text to display next to this Component (defaults to '')\r
- * <p><b>This config is only used when this Component is rendered by a Container which has been\r
- * configured to use the {@link Ext.form.FormLayout FormLayout} layout manager.</b></p>\r
- * Example use:<pre><code>\r
-new Ext.FormPanel({\r
- height: 100,\r
- renderTo: Ext.getBody(),\r
- items: [{\r
- xtype: 'textfield',\r
- fieldLabel: 'Name'\r
- }]\r
-});\r
-</code></pre>\r
- */\r
- /**\r
- * @cfg {String} labelStyle A CSS style specification to apply directly to this field's label (defaults to the\r
- * container's labelStyle value if set, or '').<code></code>.\r
- * <p><b>This config is only used when this Component is rendered by a Container which has been\r
- * configured to use the {@link Ext.form.FormLayout FormLayout} layout manager.</b></p>\r
- * Example use:<pre><code>\r
-new Ext.FormPanel({\r
- height: 100,\r
- renderTo: Ext.getBody(),\r
- items: [{\r
- xtype: 'textfield',\r
- fieldLabel: 'Name',\r
- labelStyle: 'font-weight:bold;'\r
- }]\r
-});\r
-</code></pre>\r
- */\r
- /**\r
- * @cfg {String} labelSeparator The standard separator to display after the text of each form label (defaults\r
- * to the value of {@link Ext.layout.FormLayout#labelSeparator}, which is a colon ':' by default). To display\r
- * no separator for this field's label specify empty string ''.\r
- * <p><b>This config is only used when this Component is rendered by a Container which has been\r
- * configured to use the {@link Ext.form.FormLayout FormLayout} layout manager.</b></p>\r
- * Example use:<pre><code>\r
-new Ext.FormPanel({\r
- height: 100,\r
- renderTo: Ext.getBody(),\r
- items: [{\r
- xtype: 'textfield',\r
- fieldLabel: 'Name',\r
- labelSeparator: '...'\r
- }]\r
-});\r
-</code></pre>\r
- */\r
- /**\r
- * @cfg {Boolean} hideLabel True to completely hide the label element (defaults to false). By default, even if\r
- * you do not specify a {@link fieldLabel} the space will still be reserved so that the field will line up with\r
- * other fields that do have labels. Setting this to true will cause the field to not reserve that space.\r
- * <p><b>This config is only used when this Component is rendered by a Container which has been\r
- * configured to use the {@link Ext.form.FormLayout FormLayout} layout manager.</b></p>\r
- * Example use:<pre><code>\r
-new Ext.FormPanel({\r
- height: 100,\r
- renderTo: Ext.getBody(),\r
- items: [{\r
- xtype: 'textfield'\r
- hideLabel: true\r
- }]\r
-});\r
-</code></pre>\r
- */\r
- /**\r
- * @cfg {String} clearCls The CSS class used to provide field clearing (defaults to 'x-form-clear-left').\r
- * <p><b>This config is only used when this Component is rendered by a Container which has been\r
- * configured to use the {@link Ext.form.FormLayout FormLayout} layout manager.</b></p>\r
- */\r
- /**\r
- * @cfg {String} itemCls An additional CSS class to apply to the wrapper's form item element of this field (defaults\r
- * to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, it allows you to write\r
- * standard CSS rules that can apply to the field, the label (if specified) or any other element within the markup for\r
- * the field.\r
- * <p><b>This config is only used when this Component is rendered by a Container which has been\r
- * configured to use the {@link Ext.form.FormLayout FormLayout} layout manager.</b></p>\r
- * Example use:<pre><code>\r
-// Apply a style to the field's label:\r
-<style>\r
- .required .x-form-item-label {font-weight:bold;color:red;}\r
-</style>\r
-\r
-new Ext.FormPanel({\r
- height: 100,\r
- renderTo: Ext.getBody(),\r
- items: [{\r
- xtype: 'textfield',\r
- fieldLabel: 'Name',\r
- itemCls: 'required' //this label will be styled\r
- },{\r
- xtype: 'textfield',\r
- fieldLabel: 'Favorite Color'\r
- }]\r
-});\r
-</code></pre>\r
- */\r
-\r
- /**\r
- * @cfg {String} id\r
- * The unique id of this component (defaults to an auto-assigned id). You should assign an id if you need to\r
- * be able to access the component later and you do not have an object reference available (e.g., using\r
- * {@link Ext.ComponentMgr#getCmp}). Note that this id will also be used as the element id for the containing\r
- * HTML element that is rendered to the page for this component. This allows you to write id-based CSS rules to\r
- * style the specific instance of this component uniquely, and also to select sub-elements using this\r
- * component's id as the parent.\r
- */\r
- /**\r
- * @cfg {String/Object} autoEl\r
- * A tag name or DomHelper spec to create an element with. This is intended to create shorthand\r
- * utility components inline via JSON. It should not be used for higher level components which already create\r
- * their own elements. Example usage:\r
- * <pre><code>\r
-{xtype:'box', autoEl: 'div', cls:'my-class'}\r
-{xtype:'box', autoEl: {tag:'blockquote', html:'autoEl is cool!'}} // with DomHelper\r
-</code></pre>\r
- */\r
- /**\r
- * @cfg {String} xtype\r
- * The registered xtype to create. This config option is not used when passing\r
- * a config object into a constructor. This config option is used only when\r
- * lazy instantiation is being used, and a child item of a Container is being\r
- * specified not as a fully instantiated Component, but as a <i>Component config\r
- * object</i>. The xtype will be looked up at render time up to determine what\r
- * type of child Component to create.<br><br>\r
- * The predefined xtypes are listed {@link Ext.Component here}.\r
- * <br><br>\r
- * If you subclass Components to create your own Components, you may register\r
- * them using {@link Ext.ComponentMgr#registerType} in order to be able to\r
- * take advantage of lazy instantiation and rendering.\r
- */\r
- /**\r
- * @cfg {String} cls\r
- * An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be\r
- * useful for adding customized styles to the component or any of its children using standard CSS rules.\r
- */\r
- /**\r
- * @cfg {String} overCls\r
- * An optional extra CSS class that will be added to this component's Element when the mouse moves\r
- * over the Element, and removed when the mouse moves out. (defaults to ''). This can be\r
- * useful for adding customized "active" or "hover" styles to the component or any of its children using standard CSS rules.\r
- */\r
- /**\r
- * @cfg {String} style\r
- * A custom style specification to be applied to this component's Element. Should be a valid argument to\r
- * {@link Ext.Element#applyStyles}.\r
- */\r
- /**\r
- * @cfg {String} ctCls\r
- * An optional extra CSS class that will be added to this component's container (defaults to ''). This can be\r
- * useful for adding customized styles to the container or any of its children using standard CSS rules.\r
- */\r
- /**\r
- * @cfg {Boolean} disabled\r
- * Render this component disabled (default is false).\r
- */\r
- /**\r
- * @cfg {Boolean} hidden\r
- * Render this component hidden (default is false).\r
- */\r
- /**\r
- * @cfg {Object/Array} plugins\r
- * An object or array of objects that will provide custom functionality for this component. The only\r
- * requirement for a valid plugin is that it contain an init method that accepts a reference of type Ext.Component.\r
- * When a component is created, if any plugins are available, the component will call the init method on each\r
- * plugin, passing a reference to itself. Each plugin can then call methods or respond to events on the\r
- * component as needed to provide its functionality.\r
- */\r
- /**\r
- * @cfg {Mixed} applyTo\r
- * The id of the node, a DOM node or an existing Element corresponding to a DIV that is already present in\r
- * the document that specifies some structural markup for this component. When applyTo is used, constituent parts of\r
- * the component can also be specified by id or CSS class name within the main element, and the component being created\r
- * may attempt to create its subcomponents from that markup if applicable. Using this config, a call to render() is\r
- * not required. If applyTo is specified, any value passed for {@link #renderTo} will be ignored and the target\r
- * element's parent node will automatically be used as the component's container.\r
- */\r
- /**\r
- * @cfg {Mixed} renderTo\r
- * The id of the node, a DOM node or an existing Element that will be the container to render this component into.\r
- * Using this config, a call to render() is not required.\r
- */\r
-\r
- /**\r
- * @cfg {Boolean} stateful\r
- * <p>A flag which causes the Component to attempt to restore the state of internal properties\r
- * from a saved state on startup. The component must have either a {@link #stateId} or {@link #id}\r
- * assigned for state to be managed. Auto-generated ids are not guaranteed to be stable across page\r
- * loads and cannot be relied upon to save and restore the same state for a component.<p>\r
- * For state saving to work, the state manager's provider must have been set to an implementation\r
- * of {@link Ext.state.Provider} which overrides the {@link Ext.state.Provider#set set}\r
- * and {@link Ext.state.Provider#get get} methods to save and recall name/value pairs.\r
- * A built-in implementation, {@link Ext.state.CookieProvider} is available.</p>\r
- * <p>To set the state provider for the current page:</p>\r
- * <pre><code>\r
-Ext.state.Manager.setProvider(new Ext.state.CookieProvider());\r
-</code></pre>\r
- * <p>Components attempt to save state when one of the events listed in the {@link #stateEvents}\r
- * configuration fires.</p>\r
- * <p>You can perform extra processing on state save and restore by attaching handlers to the\r
- * {@link #beforestaterestore}, {@link #staterestore}, {@link #beforestatesave} and {@link #statesave} events</p>\r
- */\r
- /**\r
- * @cfg {String} stateId\r
- * The unique id for this component to use for state management purposes (defaults to the component id if one was\r
- * set, otherwise null if the component is using a generated id).\r
- * <p>See {@link #stateful} for an explanation of saving and restoring Component state.</p>\r
- */\r
- /* //internal - to be set by subclasses\r
- * @cfg {Array} stateEvents\r
- * An array of events that, when fired, should trigger this component to save its state (defaults to none).\r
- * These can be any types of events supported by this component, including browser or custom events (e.g.,\r
- * ['click', 'customerchange']).\r
- * <p>See {@link #stateful} for an explanation of saving and restoring Component state.</p>\r
- */\r
-\r
- /**\r
- * @cfg {String} disabledClass\r
- * CSS class added to the component when it is disabled (defaults to "x-item-disabled").\r
- */\r
- disabledClass : "x-item-disabled",\r
- /**\r
- * @cfg {Boolean} allowDomMove\r
- * Whether the component can move the Dom node when rendering (defaults to true).\r
- */\r
- allowDomMove : true,\r
- /**\r
- * @cfg {Boolean} autoShow\r
- * True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove\r
- * them on render (defaults to false).\r
- */\r
- autoShow : false,\r
- /**\r
- * @cfg {String} hideMode\r
- * <p>How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative\r
- * offset position) and "display" (css display) - defaults to "display".</p>\r
- * <p>For Containers which may be hidden and shown as part of a {@link Ext.layout.CardLayout card layout} Container such as a\r
- * {@link Ext.TabPanel TabPanel}, it is recommended that hideMode is configured as "offsets". This ensures\r
- * that hidden Components still have height and width so that layout managers can perform measurements when\r
- * calculating layouts.</p>\r
- */\r
- hideMode: 'display',\r
- /**\r
- * @cfg {Boolean} hideParent\r
- * True to hide and show the component's container when hide/show is called on the component, false to hide\r
- * and show the component itself (defaults to false). For example, this can be used as a shortcut for a hide\r
- * button on a window by setting hide:true on the button when adding it to its parent container.\r
- */\r
- hideParent: false,\r
-\r
- /**\r
- * The component's owner {@link Ext.Container} (defaults to undefined, and is set automatically when\r
- * the component is added to a container). Read-only.\r
- * @type Ext.Container\r
- * @property ownerCt\r
- */\r
- /**\r
- * True if this component is hidden. Read-only.\r
- * @type Boolean\r
- * @property\r
- */\r
- hidden : false,\r
- /**\r
- * True if this component is disabled. Read-only.\r
- * @type Boolean\r
- * @property\r
- */\r
- disabled : false,\r
- /**\r
- * True if this component has been rendered. Read-only.\r
- * @type Boolean\r
- * @property\r
- */\r
- rendered : false,\r
-\r
- // private\r
- ctype : "Ext.Component",\r
-\r
- // private\r
- actionMode : "el",\r
-\r
- // private\r
- getActionEl : function(){\r
- return this[this.actionMode];\r
- },\r
-\r
- initPlugin : function(p){\r
- p.init(this);\r
- return p;\r
- },\r
-\r
- /* // protected\r
- * Function to be implemented by Component subclasses to be part of standard component initialization flow (it is empty by default).\r
- * <pre><code>\r
-// Traditional constructor:\r
-Ext.Foo = function(config){\r
- // call superclass constructor:\r
- Ext.Foo.superclass.constructor.call(this, config);\r
-\r
- this.addEvents({\r
- // add events\r
- });\r
-};\r
-Ext.extend(Ext.Foo, Ext.Bar, {\r
- // class body\r
-}\r
-\r
-// initComponent replaces the constructor:\r
-Ext.Foo = Ext.extend(Ext.Bar, {\r
- initComponent : function(){\r
- // call superclass initComponent\r
- Ext.Container.superclass.initComponent.call(this);\r
-\r
- this.addEvents({\r
- // add events\r
- });\r
- }\r
-}\r
-</code></pre>\r
- */\r
- initComponent : Ext.emptyFn,\r
-\r
- /**\r
- * <p>Render this Component into the passed HTML element.</p>\r
- * <p><b>If you are using a {@link Ext.Container Container} object to house this Component, then\r
- * do not use the render method.</b></p>\r
- * <p>A Container's child Components are rendered by that Container's\r
- * {@link Ext.Container#layout layout} manager when the Container is first rendered.</p>\r
- * <p>Certain layout managers allow dynamic addition of child components. Those that do\r
- * include {@link Ext.layout.CardLayout}, {@link Ext.layout.AnchorLayout},\r
- * {@link Ext.layout.FormLayout}, {@link Ext.layout.TableLayout}.</p>\r
- * <p>If the Container is already rendered when a new child Component is added, you may need to call\r
- * the Container's {@link Ext.Container#doLayout doLayout} to refresh the view which causes any\r
- * unrendered child Components to be rendered. This is required so that you can add multiple\r
- * child components if needed while only refreshing the layout once.</p>\r
- * <p>When creating complex UIs, it is important to remember that sizing and positioning\r
- * of child items is the responsibility of the Container's {@link Ext.Container#layout layout} manager.\r
- * If you expect child items to be sized in response to user interactions, you must\r
- * configure the Container with a layout manager which creates and manages the type of layout you\r
- * have in mind.</p>\r
- * <p><b>Omitting the Container's {@link Ext.Container#layout layout} config means that a basic\r
- * layout manager is used which does nothing but render child components sequentially into the\r
- * Container. No sizing or positioning will be performed in this situation.</b></p>\r
- * @param {Element/HTMLElement/String} container (optional) The element this Component should be\r
- * rendered into. If it is being created from existing markup, this should be omitted.\r
- * @param {String/Number} position (optional) The element ID or DOM node index within the container <b>before</b>\r
- * which this component will be inserted (defaults to appending to the end of the container)\r
- */\r
- render : function(container, position){\r
- if(!this.rendered && this.fireEvent("beforerender", this) !== false){\r
- if(!container && this.el){\r
- this.el = Ext.get(this.el);\r
- container = this.el.dom.parentNode;\r
- this.allowDomMove = false;\r
- }\r
- this.container = Ext.get(container);\r
- if(this.ctCls){\r
- this.container.addClass(this.ctCls);\r
- }\r
- this.rendered = true;\r
- if(position !== undefined){\r
- if(typeof position == 'number'){\r
- position = this.container.dom.childNodes[position];\r
- }else{\r
- position = Ext.getDom(position);\r
- }\r
- }\r
- this.onRender(this.container, position || null);\r
- if(this.autoShow){\r
- this.el.removeClass(['x-hidden','x-hide-' + this.hideMode]);\r
- }\r
- if(this.cls){\r
- this.el.addClass(this.cls);\r
- delete this.cls;\r
- }\r
- if(this.style){\r
- this.el.applyStyles(this.style);\r
- delete this.style;\r
- }\r
- if(this.overCls){\r
- this.el.addClassOnOver(this.overCls);\r
- }\r
- this.fireEvent("render", this);\r
- this.afterRender(this.container);\r
- if(this.hidden){\r
- this.hide();\r
- }\r
- if(this.disabled){\r
- this.disable();\r
- }\r
-\r
- if(this.stateful !== false){\r
- this.initStateEvents();\r
- }\r
- }\r
- return this;\r
- },\r
-\r
- // private\r
- initState : function(config){\r
- if(Ext.state.Manager){\r
- var id = this.getStateId();\r
- if(id){\r
- var state = Ext.state.Manager.get(id);\r
- if(state){\r
- if(this.fireEvent('beforestaterestore', this, state) !== false){\r
- this.applyState(state);\r
- this.fireEvent('staterestore', this, state);\r
- }\r
- }\r
- }\r
- }\r
- },\r
-\r
- // private\r
- getStateId : function(){\r
- return this.stateId || ((this.id.indexOf('ext-comp-') == 0 || this.id.indexOf('ext-gen') == 0) ? null : this.id);\r
- },\r
-\r
- // private\r
- initStateEvents : function(){\r
- if(this.stateEvents){\r
- for(var i = 0, e; e = this.stateEvents[i]; i++){\r
- this.on(e, this.saveState, this, {delay:100});\r
- }\r
- }\r
- },\r
-\r
- // private\r
- applyState : function(state, config){\r
- if(state){\r
- Ext.apply(this, state);\r
- }\r
- },\r
-\r
- // private\r
- getState : function(){\r
- return null;\r
- },\r
-\r
- // private\r
- saveState : function(){\r
- if(Ext.state.Manager){\r
- var id = this.getStateId();\r
- if(id){\r
- var state = this.getState();\r
- if(this.fireEvent('beforestatesave', this, state) !== false){\r
- Ext.state.Manager.set(id, state);\r
- this.fireEvent('statesave', this, state);\r
- }\r
- }\r
- }\r
- },\r
-\r
- /**\r
- * Apply this component to existing markup that is valid. With this function, no call to render() is required.\r
- * @param {String/HTMLElement} el\r
- */\r
- applyToMarkup : function(el){\r
- this.allowDomMove = false;\r
- this.el = Ext.get(el);\r
- this.render(this.el.dom.parentNode);\r
- },\r
-\r
- /**\r
- * Adds a CSS class to the component's underlying element.\r
- * @param {string} cls The CSS class name to add\r
- */\r
- addClass : function(cls){\r
- if(this.el){\r
- this.el.addClass(cls);\r
- }else{\r
- this.cls = this.cls ? this.cls + ' ' + cls : cls;\r
- }\r
- },\r
-\r
- /**\r
- * Removes a CSS class from the component's underlying element.\r
- * @param {string} cls The CSS class name to remove\r
- */\r
- removeClass : function(cls){\r
- if(this.el){\r
- this.el.removeClass(cls);\r
- }else if(this.cls){\r
- this.cls = this.cls.split(' ').remove(cls).join(' ');\r
- }\r
- },\r
-\r
- // private\r
- // default function is not really useful\r
- onRender : function(ct, position){\r
- if(this.autoEl){\r
- if(typeof this.autoEl == 'string'){\r
- this.el = document.createElement(this.autoEl);\r
- }else{\r
- var div = document.createElement('div');\r
- Ext.DomHelper.overwrite(div, this.autoEl);\r
- this.el = div.firstChild;\r
- }\r
- if (!this.el.id) {\r
- this.el.id = this.getId();\r
- }\r
- }\r
- if(this.el){\r
- this.el = Ext.get(this.el);\r
- if(this.allowDomMove !== false){\r
- ct.dom.insertBefore(this.el.dom, position);\r
- }\r
- }\r
- },\r
-\r
- // private\r
- getAutoCreate : function(){\r
- var cfg = typeof this.autoCreate == "object" ?\r
- this.autoCreate : Ext.apply({}, this.defaultAutoCreate);\r
- if(this.id && !cfg.id){\r
- cfg.id = this.id;\r
- }\r
- return cfg;\r
- },\r
-\r
- // private\r
- afterRender : Ext.emptyFn,\r
-\r
- /**\r
- * Destroys this component by purging any event listeners, removing the component's element from the DOM,\r
- * removing the component from its {@link Ext.Container} (if applicable) and unregistering it from\r
- * {@link Ext.ComponentMgr}. Destruction is generally handled automatically by the framework and this method\r
- * should usually not need to be called directly.\r
- */\r
- destroy : function(){\r
- if(this.fireEvent("beforedestroy", this) !== false){\r
- this.beforeDestroy();\r
- if(this.rendered){\r
- this.el.removeAllListeners();\r
- this.el.remove();\r
- if(this.actionMode == "container"){\r
- this.container.remove();\r
- }\r
- }\r
- this.onDestroy();\r
- Ext.ComponentMgr.unregister(this);\r
- this.fireEvent("destroy", this);\r
- this.purgeListeners();\r
- }\r
- },\r
-\r
- // private\r
- beforeDestroy : Ext.emptyFn,\r
-\r
- // private\r
- onDestroy : Ext.emptyFn,\r
-\r
- /**\r
- * Returns the underlying {@link Ext.Element}.\r
- * @return {Ext.Element} The element\r
- */\r
- getEl : function(){\r
- return this.el;\r
- },\r
-\r
- /**\r
- * Returns the id of this component.\r
- * @return {String}\r
- */\r
- getId : function(){\r
- return this.id || (this.id = "ext-comp-" + (++Ext.Component.AUTO_ID));\r
- },\r
-\r
- /**\r
- * Returns the item id of this component.\r
- * @return {String}\r
- */\r
- getItemId : function(){\r
- return this.itemId || this.getId();\r
- },\r
-\r
- /**\r
- * Try to focus this component.\r
- * @param {Boolean} selectText (optional) If applicable, true to also select the text in this component\r
- * @param {Boolean/Number} delay (optional) Delay the focus this number of milliseconds (true for 10 milliseconds)\r
- * @return {Ext.Component} this\r
- */\r
- focus : function(selectText, delay){\r
- if(delay){\r
- this.focus.defer(typeof delay == 'number' ? delay : 10, this, [selectText, false]);\r
- return;\r
- }\r
- if(this.rendered){\r
- this.el.focus();\r
- if(selectText === true){\r
- this.el.dom.select();\r
- }\r
- }\r
- return this;\r
- },\r
-\r
- // private\r
- blur : function(){\r
- if(this.rendered){\r
- this.el.blur();\r
- }\r
- return this;\r
- },\r
-\r
- /**\r
- * Disable this component.\r
- * @return {Ext.Component} this\r
- */\r
- disable : function(){\r
- if(this.rendered){\r
- this.onDisable();\r
- }\r
- this.disabled = true;\r
- this.fireEvent("disable", this);\r
- return this;\r
- },\r
-\r
- // private\r
- onDisable : function(){\r
- this.getActionEl().addClass(this.disabledClass);\r
- this.el.dom.disabled = true;\r
- },\r
-\r
- /**\r
- * Enable this component.\r
- * @return {Ext.Component} this\r
- */\r
- enable : function(){\r
- if(this.rendered){\r
- this.onEnable();\r
- }\r
- this.disabled = false;\r
- this.fireEvent("enable", this);\r
- return this;\r
- },\r
-\r
- // private\r
- onEnable : function(){\r
- this.getActionEl().removeClass(this.disabledClass);\r
- this.el.dom.disabled = false;\r
- },\r
-\r
- /**\r
- * Convenience function for setting disabled/enabled by boolean.\r
- * @param {Boolean} disabled\r
- */\r
- setDisabled : function(disabled){\r
- this[disabled ? "disable" : "enable"]();\r
- },\r
-\r
- /**\r
- * Show this component.\r
- * @return {Ext.Component} this\r
- */\r
- show: function(){\r
- if(this.fireEvent("beforeshow", this) !== false){\r
- this.hidden = false;\r
- if(this.autoRender){\r
- this.render(typeof this.autoRender == 'boolean' ? Ext.getBody() : this.autoRender);\r
- }\r
- if(this.rendered){\r
- this.onShow();\r
- }\r
- this.fireEvent("show", this);\r
- }\r
- return this;\r
- },\r
-\r
- // private\r
- onShow : function(){\r
- if(this.hideParent){\r
- this.container.removeClass('x-hide-' + this.hideMode);\r
- }else{\r
- this.getActionEl().removeClass('x-hide-' + this.hideMode);\r
- }\r
-\r
- },\r
-\r
- /**\r
- * Hide this component.\r
- * @return {Ext.Component} this\r
- */\r
- hide: function(){\r
- if(this.fireEvent("beforehide", this) !== false){\r
- this.hidden = true;\r
- if(this.rendered){\r
- this.onHide();\r
- }\r
- this.fireEvent("hide", this);\r
- }\r
- return this;\r
- },\r
-\r
- // private\r
- onHide : function(){\r
- if(this.hideParent){\r
- this.container.addClass('x-hide-' + this.hideMode);\r
- }else{\r
- this.getActionEl().addClass('x-hide-' + this.hideMode);\r
- }\r
- },\r
-\r
- /**\r
- * Convenience function to hide or show this component by boolean.\r
- * @param {Boolean} visible True to show, false to hide\r
- * @return {Ext.Component} this\r
- */\r
- setVisible: function(visible){\r
- if(visible) {\r
- this.show();\r
- }else{\r
- this.hide();\r
- }\r
- return this;\r
- },\r
-\r
- /**\r
- * Returns true if this component is visible.\r
- */\r
- isVisible : function(){\r
- return this.rendered && this.getActionEl().isVisible();\r
- },\r
-\r
- /**\r
- * Clone the current component using the original config values passed into this instance by default.\r
- * @param {Object} overrides A new config containing any properties to override in the cloned version.\r
- * An id property can be passed on this object, otherwise one will be generated to avoid duplicates.\r
- * @return {Ext.Component} clone The cloned copy of this component\r
- */\r
- cloneConfig : function(overrides){\r
- overrides = overrides || {};\r
- var id = overrides.id || Ext.id();\r
- var cfg = Ext.applyIf(overrides, this.initialConfig);\r
- cfg.id = id; // prevent dup id\r
- return new this.constructor(cfg);\r
- },\r
-\r
- /**\r
- * Gets the xtype for this component as registered with {@link Ext.ComponentMgr}. For a list of all\r
- * available xtypes, see the {@link Ext.Component} header. Example usage:\r
- * <pre><code>\r
-var t = new Ext.form.TextField();\r
-alert(t.getXType()); // alerts 'textfield'\r
-</code></pre>\r
- * @return {String} The xtype\r
- */\r
- getXType : function(){\r
- return this.constructor.xtype;\r
- },\r
-\r
- /**\r
- * <p>Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended\r
- * from the xtype (default) or whether it is directly of the xtype specified (shallow = true).</p>\r
- * <p><b>If using your own subclasses, be aware that a Component must register its own xtype\r
- * to participate in determination of inherited xtypes.</b></p>\r
- * <p>For a list of all available xtypes, see the {@link Ext.Component} header.</p>\r
- * <p>Example usage:</p>\r
- * <pre><code>\r
-var t = new Ext.form.TextField();\r
-var isText = t.isXType('textfield'); // true\r
-var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent\r
-var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance\r
-</code></pre>\r
- * @param {String} xtype The xtype to check for this Component\r
- * @param {Boolean} shallow (optional) False to check whether this Component is descended from the xtype (this is\r
- * the default), or true to check whether this Component is directly of the specified xtype.\r
- */\r
- isXType : function(xtype, shallow){\r
- //assume a string by default\r
- if (typeof xtype == 'function'){\r
- xtype = xtype.xtype; //handle being passed the class, eg. Ext.Component\r
- }else if (typeof xtype == 'object'){\r
- xtype = xtype.constructor.xtype; //handle being passed an instance\r
- }\r
- \r
- return !shallow ? ('/' + this.getXTypes() + '/').indexOf('/' + xtype + '/') != -1 : this.constructor.xtype == xtype;\r
- },\r
-\r
- /**\r
- * <p>Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all\r
- * available xtypes, see the {@link Ext.Component} header.</p>\r
- * <p><b>If using your own subclasses, be aware that a Component must register its own xtype\r
- * to participate in determination of inherited xtypes.</b></p>\r
- * <p>Example usage:</p>\r
- * <pre><code>\r
-var t = new Ext.form.TextField();\r
-alert(t.getXTypes()); // alerts 'component/box/field/textfield'\r
-</pre></code>\r
- * @return {String} The xtype hierarchy string\r
- */\r
- getXTypes : function(){\r
- var tc = this.constructor;\r
- if(!tc.xtypes){\r
- var c = [], sc = this;\r
- while(sc && sc.constructor.xtype){\r
- c.unshift(sc.constructor.xtype);\r
- sc = sc.constructor.superclass;\r
- }\r
- tc.xtypeChain = c;\r
- tc.xtypes = c.join('/');\r
- }\r
- return tc.xtypes;\r
- },\r
-\r
- /**\r
- * Find a container above this component at any level by a custom function. If the passed function returns\r
- * true, the container will be returned. The passed function is called with the arguments (container, this component).\r
- * @param {Function} fcn\r
- * @param {Object} scope (optional)\r
- * @return {Ext.Container} The first Container for which the custom function returns true\r
- */\r
- findParentBy: function(fn) {\r
- for (var p = this.ownerCt; (p != null) && !fn(p, this); p = p.ownerCt);\r
- return p || null;\r
- },\r
-\r
- /**\r
- * Find a container above this component at any level by xtype or class\r
- * @param {String/Class} xtype The xtype string for a component, or the class of the component directly\r
- * @return {Ext.Container} The first Container which matches the given xtype or class\r
- */\r
- findParentByType: function(xtype) {\r
- return typeof xtype == 'function' ?\r
- this.findParentBy(function(p){\r
- return p.constructor === xtype;\r
- }) :\r
- this.findParentBy(function(p){\r
- return p.constructor.xtype === xtype;\r
- });\r
- },\r
-\r
- // internal function for auto removal of assigned event handlers on destruction\r
- mon : function(item, ename, fn, scope, opt){\r
- if(!this.mons){\r
- this.mons = [];\r
- this.on('beforedestroy', function(){\r
- for(var i= 0, len = this.mons.length; i < len; i++){\r
- var m = this.mons[i];\r
- m.item.un(m.ename, m.fn, m.scope);\r
- }\r
- }, this);\r
- }\r
- this.mons.push({\r
- item: item, ename: ename, fn: fn, scope: scope\r
- });\r
- item.on(ename, fn, scope, opt);\r
- }\r
-});\r
-\r
-Ext.reg('component', Ext.Component);\r
git.ithinksw.org / extjs.git / blobdiff