Provides a registry of all Components (instances of {@link Ext.Component} or any subclass + * thereof) on a page so that they can be easily accessed by {@link Ext.Component component} + * {@link Ext.Component#id id} (see {@link #get}, or the convenience method {@link Ext#getCmp Ext.getCmp}).
+ *This object also provides a registry of available Component classes + * indexed by a mnemonic code known as the Component's {@link Ext.Component#xtype xtype}. + * The {@link Ext.Component#xtype xtype} provides a way to avoid instantiating child Components + * when creating a full, nested config object for a complete Ext page.
+ *A child Component may be specified simply as a config object + * as long as the correct {@link Ext.Component#xtype xtype} is specified so that if and when the Component + * needs rendering, the correct type can be looked up for lazy instantiation.
+ *For a list of all available {@link Ext.Component#xtype xtypes}, see {@link Ext.Component}.
+ * @singleton + */ +Ext.ComponentMgr = function(){ + var all = new Ext.util.MixedCollection(); + var types = {}; + var ptypes = {}; + + return { + /** + * Registers a component. + * @param {Ext.Component} c The component + */ + register : function(c){ + all.add(c); + }, + + /** + * Unregisters a component. + * @param {Ext.Component} c The component + */ + unregister : function(c){ + all.remove(c); + }, + + /** + * Returns a component by {@link Ext.Component#id id}. + * For additional details see {@link Ext.util.MixedCollection#get}. + * @param {String} id The component {@link Ext.Component#id id} + * @return Ext.Component The Component, undefined if not found, or null if a + * Class was found. + */ + get : function(id){ + return all.get(id); + }, + + /** + * Registers a function that will be called when a specified component is added to ComponentMgr + * @param {String} id The component {@link Ext.Component#id id} + * @param {Function} fn The callback function + * @param {Object} scope The scope of the callback + */ + onAvailable : function(id, fn, scope){ + all.on("add", function(index, o){ + if(o.id == id){ + fn.call(scope || o, o); + all.un("add", fn, scope); + } + }); + }, + + /** + * The MixedCollection used internally for the component cache. An example usage may be subscribing to + * events on the MixedCollection to monitor addition or removal. Read-only. + * @type {MixedCollection} + */ + all : all, + + /** + * Checks if a Component type is registered. + * @param {Ext.Component} xtype The mnemonic string by which the Component class may be looked up + * @return {Boolean} Whether the type is registered. + */ + isRegistered : function(xtype){ + return types[xtype] !== undefined; + }, + + /** + *Registers a new Component constructor, keyed by a new + * {@link Ext.Component#xtype}.
+ *Use this method (or its alias {@link Ext#reg Ext.reg}) to register new + * subclasses of {@link Ext.Component} so that lazy instantiation may be used when specifying + * child Components. + * see {@link Ext.Container#items}
+ * @param {String} xtype The mnemonic string by which the Component class may be looked up. + * @param {Constructor} cls The new Component class. + */ + registerType : function(xtype, cls){ + types[xtype] = cls; + cls.xtype = xtype; + }, + + /** + * Creates a new Component from the specified config object using the + * config object's {@link Ext.component#xtype xtype} to determine the class to instantiate. + * @param {Object} config A configuration object for the Component you wish to create. + * @param {Constructor} defaultType The constructor to provide the default Component type if + * the config object does not contain a xtype. (Optional if the config contains a xtype). + * @return {Ext.Component} The newly instantiated Component. + */ + create : function(config, defaultType){ + return config.render ? config : new types[config.xtype || defaultType](config); + }, + + /** + *Registers a new Plugin constructor, keyed by a new + * {@link Ext.Component#ptype}.
+ *Use this method (or its alias {@link Ext#preg Ext.preg}) to register new + * plugins for {@link Ext.Component}s so that lazy instantiation may be used when specifying + * Plugins.
+ * @param {String} ptype The mnemonic string by which the Plugin class may be looked up. + * @param {Constructor} cls The new Plugin class. + */ + registerPlugin : function(ptype, cls){ + ptypes[ptype] = cls; + cls.ptype = ptype; + }, + + /** + * Creates a new Plugin from the specified config object using the + * config object's {@link Ext.component#ptype ptype} to determine the class to instantiate. + * @param {Object} config A configuration object for the Plugin you wish to create. + * @param {Constructor} defaultType The constructor to provide the default Plugin type if + * the config object does not contain a ptype. (Optional if the config contains a ptype). + * @return {Ext.Component} The newly instantiated Plugin. + */ + createPlugin : function(config, defaultType){ + return new ptypes[config.ptype || defaultType](config); + } + }; +}(); + +/** + * Shorthand for {@link Ext.ComponentMgr#registerType} + * @param {String} xtype The {@link Ext.component#xtype mnemonic string} by which the Component class + * may be looked up. + * @param {Constructor} cls The new Component class. + * @member Ext + * @method reg + */ +Ext.reg = Ext.ComponentMgr.registerType; // this will be called a lot internally, shorthand to keep the bytes down +/** + * Shorthand for {@link Ext.ComponentMgr#registerPlugin} + * @param {String} ptype The {@link Ext.component#ptype mnemonic string} by which the Plugin class + * may be looked up. + * @param {Constructor} cls The new Plugin class. + * @member Ext + * @method preg + */ +Ext.preg = Ext.ComponentMgr.registerPlugin; +Ext.create = Ext.ComponentMgr.create; +/** + * @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.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:
+ * it is set as the internal element and its id used as the component id
it is assumed to be the id of an existing element and is used as the component id
it is assumed to be a standard config object and is applied to the component
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); + } + + this.initComponent(); + + 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); + } + } + + if(this.stateful !== false){ + this.initState(config); + } + + 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:
+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 {@link #hideLabel} and
+ * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}.
+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: + *
Note: see the note for {@link #clearCls}.
Also see {@link #hideLabel} and + * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}.
+ * Example use:
+new Ext.FormPanel({
+ height: 100,
+ renderTo: Ext.getBody(),
+ layoutConfig: {
+ labelSeparator: '~' // layout config has lowest priority (defaults to ':')
+ },
+ {@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}.
+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} itemClsAn 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}.
+// 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'
+ }]
+});
+Note: this config is only used when this Component is rendered + * by a Container which has been configured to use an {@link Ext.layout.AnchorLayout AnchorLayout} + * based layout manager, for example:
layout: 'anchor' // or 'form', or 'absolute'See {@link Ext.layout.AnchorLayout}.{@link Ext.layout.AnchorLayout#anchor anchor} also.
+ */ + + /** + * @cfg {String} id + *The unique id of this component (defaults to an {@link #getId auto-assigned id}). + * You should assign an id if you need to be able to access the component later and you do + * not have an object reference available (e.g., using {@link Ext}.{@link Ext#getCmp getCmp}).
+ *Note that this id will also be used as the element id for the containing HTML element + * that is rendered to the page for this component. This allows you to write id-based CSS + * rules to style the specific instance of this component uniquely, and also to select + * sub-elements using this component's id as the parent.
+ *Note: to avoid complications imposed by a unique id also see
+ * {@link #itemId} and {@link #ref}.
Note: to access the container of an item see {@link #ownerCt}.
An itemId can be used as an alternative way to get a reference to a component
+ * when no object reference is available. Instead of using an {@link #id} with
+ * {@link Ext}.{@link Ext#getCmp getCmp}, use itemId with
+ * {@link Ext.Container}.{@link Ext.Container#getComponent getComponent} which will retrieve
+ * itemId's or {@link #id}'s. Since itemId's are an index to the
+ * container's internal MixedCollection, the itemId is scoped locally to the container --
+ * avoiding potential conflicts with {@link Ext.ComponentMgr} which requires a unique
+ * {@link #id}.
+var c = new Ext.Panel({ //
+ {@link Ext.BoxComponent#height height}: 300,
+ {@link #renderTo}: document.body,
+ {@link Ext.Container#layout layout}: 'auto',
+ {@link Ext.Container#items items}: [
+ {
+ itemId: 'p1',
+ {@link Ext.Panel#title title}: 'Panel 1',
+ {@link Ext.BoxComponent#height height}: 150
+ },
+ {
+ itemId: 'p2',
+ {@link Ext.Panel#title title}: 'Panel 2',
+ {@link Ext.BoxComponent#height height}: 150
+ }
+ ]
+})
+p1 = c.{@link Ext.Container#getComponent getComponent}('p1'); // not the same as {@link Ext#getCmp Ext.getCmp()}
+p2 = p1.{@link #ownerCt}.{@link Ext.Container#getComponent getComponent}('p2'); // reference via a sibling
+ * Also see {@link #id} and {@link #ref}.
Note: to access the container of an item see {@link #ownerCt}.
+ */ + /** + * @cfg {String} xtype + * The registered xtype to create. This config option is not used when passing + * a config object into a constructor. This config option is used only when + * lazy instantiation is being used, and a child item of a Container is being + * specified not as a fully instantiated Component, but as a Component config + * object. The xtype will be looked up at render time up to determine what + * type of child Component to create.
+new Ext.Panel({
+ title: 'Some Title',
+ renderTo: Ext.getBody(),
+ width: 400, height: 300,
+ layout: 'form',
+ items: [{
+ xtype: 'textarea',
+ style: {
+ width: '95%',
+ marginBottom: '10px'
+ }
+ },
+ 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: + *
+ * 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.
Specify the id of the element, a DOM element or an existing Element that this component + * will be rendered into.
See {@link #render} also.
+ */ + /** + * @cfg {Boolean} stateful + *A flag which causes the Component to attempt to restore the state of
+ * internal properties from a saved state on startup. The component must have
+ * either a {@link #stateId} or {@link #id} assigned
+ * for state to be managed. Auto-generated ids are not guaranteed to be stable
+ * across page loads and cannot be relied upon to save and restore the same
+ * state for a component.
+ *
For state saving to work, the state manager's provider must have been + * set to an implementation of {@link Ext.state.Provider} which overrides the + * {@link Ext.state.Provider#set set} and {@link Ext.state.Provider#get get} + * methods to save and recall name/value pairs. A built-in implementation, + * {@link Ext.state.CookieProvider} is available.
+ *To set the state provider for the current page:
+ *
+Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
+ expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
+}));
+ * A stateful Component attempts to save state when one of the events
+ * listed in the {@link #stateEvents} configuration fires.
To save state, a stateful Component first serializes its state by
+ * calling getState. By default, this function does
+ * nothing. The developer must provide an implementation which returns an
+ * object hash which represents the Component's restorable state.
The value yielded by getState is passed to {@link Ext.state.Manager#set}
+ * which uses the configured {@link Ext.state.Provider} to save the object
+ * keyed by the Component's {@link stateId}, or, if that is not
+ * specified, its {@link #id}.
During construction, a stateful Component attempts to restore
+ * its state by calling {@link Ext.state.Manager#get} passing the
+ * {@link #stateId}, or, if that is not specified, the
+ * {@link #id}.
The resulting object is passed to applyState.
+ * The default implementation of applyState simply copies
+ * properties into the object, but a developer may override this to support
+ * more behaviour.
You can perform extra processing on state save and restore by attaching + * handlers to the {@link #beforestaterestore}, {@link #staterestore}, + * {@link #beforestatesave} and {@link #statesave} events.
+ */ + /** + * @cfg {String} stateId + * The unique id for this component to use for state management purposes + * (defaults to the component id if one was set, otherwise null if the + * component is using a generated id). + *See {@link #stateful} for an explanation of saving and
+ * restoring Component state.
An array of events that, when fired, should trigger this component to
+ * save its state (defaults to none). stateEvents may be any type
+ * of event supported by this component, including browser or custom events
+ * (e.g., ['click', 'customerchange']).
See {@link #stateful} for an explanation of saving and
+ * restoring Component state.
A tag name or {@link Ext.DomHelper DomHelper} spec used to create the {@link #getEl Element} which will + * encapsulate this Component.
+ *You do not normally need to specify this. For the base classes {@link Ext.Component}, {@link Ext.BoxComponent}, + * and {@link Ext.Container}, this defaults to 'div'. The more complex Ext classes use a more complex + * DOM structure created by their own onRender methods.
+ *This is intended to allow the developer to create application-specific utility Components encapsulated by + * different DOM elements. Example usage:
+{
+ xtype: 'box',
+ autoEl: {
+ tag: 'img',
+ src: 'http://www.example.com/example.jpg'
+ }
+}, {
+ xtype: 'box',
+ autoEl: {
+ tag: 'blockquote',
+ html: 'autoEl is cool!'
+ }
+}, {
+ xtype: 'container',
+ autoEl: 'ul',
+ cls: 'ux-unordered-list',
+ items: {
+ xtype: 'box',
+ autoEl: 'li',
+ html: 'First list item'
+ }
+}
+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 + */ + /** + * The component's owner {@link Ext.Container} (defaults to undefined, and is set automatically when + * the 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 + */ + /** + * True if this component is disabled. Read-only. + * @type Boolean + * @property + */ + /** + * True if this component has been rendered. Read-only. + * @type Boolean + * @property + */ + rendered : false, + + // private + ctype : 'Ext.Component', + + // private + actionMode : 'el', + + // private + getActionEl : function(){ + return this[this.actionMode]; + }, + + 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; + }, + + /* // 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) + */ + 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); + this.afterRender(this.container); + 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); + } + + if(this.stateful !== false){ + this.initStateEvents(); + } + this.initRef(); + this.fireEvent('afterrender', this); + } + return this; + }, + + 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();
+ }
+ }
+});
+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}.
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();
+ },
+
+ /**
+ * 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)
+ * @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();
+ }
+ }
+ return this;
+ },
+
+ // private
+ blur : function(){
+ if(this.rendered){
+ this.el.blur();
+ }
+ return this;
+ },
+
+ /**
+ * Disable this component and fire the 'disable' event.
+ * @return {Ext.Component} this
+ */
+ disable : function(/* private */ silent){
+ if(this.rendered){
+ this.onDisable();
+ }
+ this.disabled = true;
+ if(silent !== true){
+ this.fireEvent('disable', this);
+ }
+ return this;
+ },
+
+ // private
+ onDisable : function(){
+ this.getActionEl().addClass(this.disabledClass);
+ this.el.dom.disabled = true;
+ },
+
+ /**
+ * Enable this component and fire the 'enable' event.
+ * @return {Ext.Component} this
+ */
+ enable : function(){
+ if(this.rendered){
+ this.onEnable();
+ }
+ this.disabled = false;
+ this.fireEvent('enable', this);
+ return this;
+ },
+
+ // private
+ onEnable : function(){
+ this.getActionEl().removeClass(this.disabledClass);
+ this.el.dom.disabled = false;
+ },
+
+ /**
+ * Convenience function for setting disabled/enabled by boolean.
+ * @param {Boolean} disabled
+ * @return {Ext.Component} this
+ */
+ setDisabled : function(disabled){
+ return this[disabled ? 'disable' : 'enable']();
+ },
+
+ /**
+ * 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();
+ }
+ this.fireEvent('show', this);
+ }
+ return this;
+ },
+
+ // private
+ onShow : function(){
+ this.getVisibiltyEl().removeClass('x-hide-' + this.hideMode);
+ },
+
+ /**
+ * 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}.
+ * @return {Ext.Component} this
+ */
+ hide : function(){
+ if(this.fireEvent('beforehide', this) !== false){
+ this.doHide();
+ this.fireEvent('hide', this);
+ }
+ return this;
+ },
+
+ // private
+ doHide: function(){
+ this.hidden = true;
+ if(this.rendered){
+ this.onHide();
+ }
+ },
+
+ // private
+ onHide : function(){
+ this.getVisibiltyEl().addClass('x-hide-' + this.hideMode);
+ },
+
+ // private
+ getVisibiltyEl : function(){
+ return this.hideParent ? this.container : this.getActionEl();
+ },
+
+ /**
+ * 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']();
+ },
+
+ /**
+ * Returns true if this component is visible.
+ * @return {Boolean} True if this component is visible, false otherwise.
+ */
+ isVisible : function(){
+ return this.rendered && this.getVisibiltyEl().isVisible();
+ },
+
+ /**
+ * 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){
+ 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);
+ },
+
+ /**
+ * 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'
+An Action is a piece of reusable functionality that can be abstracted out of any particular component so that it + * can be usefully shared among multiple components. Actions let you share handlers, configuration options and UI + * updates across any components that support the Action interface (primarily {@link Ext.Toolbar}, {@link Ext.Button} + * and {@link Ext.menu.Menu} components).
+ *Aside from supporting the config object interface, any component that needs to use Actions must also support + * the following method list, as these will be called as needed by the Action class: setText(string), setIconCls(string), + * setDisabled(boolean), setVisible(boolean) and setHandler(function).
+ * Example usage:
+// Define the shared action. Each component below will have the same
+// display text and icon, and will display the same message on click.
+var action = new Ext.Action({
+ {@link #text}: 'Do something',
+ {@link #handler}: function(){
+ Ext.Msg.alert('Click', 'You did something.');
+ },
+ {@link #iconCls}: 'do-something',
+ {@link #itemId}: 'myAction'
+});
+
+var panel = new Ext.Panel({
+ title: 'Actions',
+ width: 500,
+ height: 300,
+ tbar: [
+ // Add the action directly to a toolbar as a menu button
+ action,
+ {
+ text: 'Action Menu',
+ // Add the action to a menu as a text item
+ menu: [action]
+ }
+ ],
+ items: [
+ // Add the action to the panel body as a standard button
+ new Ext.Button(action)
+ ],
+ renderTo: Ext.getBody()
+});
+
+// Change the text for all components using the action
+action.setText('Something else');
+
+// Reference an action through a container using the itemId
+var btn = panel.getComponent('myAction');
+var aRef = btn.baseAction;
+aRef.setText('New text');
+An example of specifying a custom icon class would be something like: + *
+// specify the property in the config for the class:
+ ...
+ iconCls: 'do-something'
+
+// css class that specifies background image to be used as the icon image:
+.do-something { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; }
+{@link #hide} and {@link #show}.
+ * @param {Boolean} hidden True to hide the component, false to show it
+ */
+ setHidden : function(v){
+ this.initialConfig.hidden = v;
+ this.callEach('setVisible', [!v]);
+ },
+
+ /**
+ * Shows all components using this action.
+ */
+ show : function(){
+ this.setHidden(false);
+ },
+
+ /**
+ * Hides all components using this action.
+ */
+ hide : function(){
+ this.setHidden(true);
+ },
+
+ /**
+ * Returns true if the components using this action are currently hidden, else returns false.
+ */
+ isHidden : function(){
+ return this.initialConfig.hidden;
+ },
+
+ /**
+ * Sets the function that will be called by each component using this action when its primary event is triggered.
+ * @param {Function} fn The function that will be invoked by the action's components. The function
+ * will be called with no arguments.
+ * @param {Object} scope The scope in which the function will execute
+ */
+ setHandler : function(fn, scope){
+ this.initialConfig.handler = fn;
+ this.initialConfig.scope = scope;
+ this.callEach('setHandler', [fn, scope]);
+ },
+
+ /**
+ * Executes the specified function once for each component currently tied to this action. The function passed
+ * in should accept a single argument that will be an object that supports the basic Action config/method interface.
+ * @param {Function} fn The function to execute for each component
+ * @param {Object} scope The scope in which the function will execute
+ */
+ each : function(fn, scope){
+ Ext.each(this.items, fn, scope);
+ },
+
+ // private
+ callEach : function(fnName, args){
+ var cs = this.items;
+ for(var i = 0, len = cs.length; i < len; i++){
+ cs[i][fnName].apply(cs[i], args);
+ }
+ },
+
+ // private
+ addComponent : function(comp){
+ this.items.push(comp);
+ comp.on('destroy', this.removeComponent, this);
+ },
+
+ // private
+ removeComponent : function(comp){
+ this.items.remove(comp);
+ },
+
+ /**
+ * Executes this action manually using the handler function specified in the original config object
+ * or the handler function set with {@link #setHandler}. Any arguments passed to this
+ * function will be passed on to the handler function.
+ * @param {Mixed} arg1 (optional) Variable number of arguments passed to the handler function
+ * @param {Mixed} arg2 (optional)
+ * @param {Mixed} etc... (optional)
+ */
+ execute : function(){
+ this.initialConfig.handler.apply(this.initialConfig.scope || window, arguments);
+ }
+};
+/**
+ * @class Ext.Layer
+ * @extends Ext.Element
+ * An extended {@link Ext.Element} object that supports a shadow and shim, constrain to viewport and
+ * automatic maintaining of shadow/shim positions.
+ * @cfg {Boolean} shim False to disable the iframe shim in browsers which need one (defaults to true)
+ * @cfg {String/Boolean} shadow True to automatically create an {@link Ext.Shadow}, or a string indicating the
+ * shadow's display {@link Ext.Shadow#mode}. False to disable the shadow. (defaults to false)
+ * @cfg {Object} dh DomHelper object config to create element with (defaults to {tag: 'div', cls: 'x-layer'}).
+ * @cfg {Boolean} constrain False to disable constrain to viewport (defaults to true)
+ * @cfg {String} cls CSS class to add to the element
+ * @cfg {Number} zindex Starting z-index (defaults to 11000)
+ * @cfg {Number} shadowOffset Number of pixels to offset the shadow (defaults to 4)
+ * @cfg {Boolean} useDisplay
+ * Defaults to use css offsets to hide the Layer. Specify true
+ * to use css style 'display:none;' to hide the Layer.
+ * @constructor
+ * @param {Object} config An object with config options.
+ * @param {String/HTMLElement} existingEl (optional) Uses an existing DOM element. If the element is not found it creates it.
+ */
+(function(){
+Ext.Layer = function(config, existingEl){
+ config = config || {};
+ var dh = Ext.DomHelper;
+ var cp = config.parentEl, pel = cp ? Ext.getDom(cp) : document.body;
+ if(existingEl){
+ this.dom = Ext.getDom(existingEl);
+ }
+ if(!this.dom){
+ var o = config.dh || {tag: 'div', cls: 'x-layer'};
+ this.dom = dh.append(pel, o);
+ }
+ if(config.cls){
+ this.addClass(config.cls);
+ }
+ this.constrain = config.constrain !== false;
+ this.setVisibilityMode(Ext.Element.VISIBILITY);
+ if(config.id){
+ this.id = this.dom.id = config.id;
+ }else{
+ this.id = Ext.id(this.dom);
+ }
+ this.zindex = config.zindex || this.getZIndex();
+ this.position('absolute', this.zindex);
+ if(config.shadow){
+ this.shadowOffset = config.shadowOffset || 4;
+ this.shadow = new Ext.Shadow({
+ offset : this.shadowOffset,
+ mode : config.shadow
+ });
+ }else{
+ this.shadowOffset = 0;
+ }
+ this.useShim = config.shim !== false && Ext.useShims;
+ this.useDisplay = config.useDisplay;
+ this.hide();
+};
+
+var supr = Ext.Element.prototype;
+
+// shims are shared among layer to keep from having 100 iframes
+var shims = [];
+
+Ext.extend(Ext.Layer, Ext.Element, {
+
+ getZIndex : function(){
+ return this.zindex || parseInt((this.getShim() || this).getStyle('z-index'), 10) || 11000;
+ },
+
+ getShim : function(){
+ if(!this.useShim){
+ return null;
+ }
+ if(this.shim){
+ return this.shim;
+ }
+ var shim = shims.shift();
+ if(!shim){
+ shim = this.createShim();
+ shim.enableDisplayMode('block');
+ shim.dom.style.display = 'none';
+ shim.dom.style.visibility = 'visible';
+ }
+ var pn = this.dom.parentNode;
+ if(shim.dom.parentNode != pn){
+ pn.insertBefore(shim.dom, this.dom);
+ }
+ shim.setStyle('z-index', this.getZIndex()-2);
+ this.shim = shim;
+ return shim;
+ },
+
+ hideShim : function(){
+ if(this.shim){
+ this.shim.setDisplayed(false);
+ shims.push(this.shim);
+ delete this.shim;
+ }
+ },
+
+ disableShadow : function(){
+ if(this.shadow){
+ this.shadowDisabled = true;
+ this.shadow.hide();
+ this.lastShadowOffset = this.shadowOffset;
+ this.shadowOffset = 0;
+ }
+ },
+
+ enableShadow : function(show){
+ if(this.shadow){
+ this.shadowDisabled = false;
+ this.shadowOffset = this.lastShadowOffset;
+ delete this.lastShadowOffset;
+ if(show){
+ this.sync(true);
+ }
+ }
+ },
+
+ // private
+ // this code can execute repeatedly in milliseconds (i.e. during a drag) so
+ // code size was sacrificed for effeciency (e.g. no getBox/setBox, no XY calls)
+ sync : function(doShow){
+ var sw = this.shadow;
+ if(!this.updating && this.isVisible() && (sw || this.useShim)){
+ var sh = this.getShim();
+
+ var w = this.getWidth(),
+ h = this.getHeight();
+
+ var l = this.getLeft(true),
+ t = this.getTop(true);
+
+ if(sw && !this.shadowDisabled){
+ if(doShow && !sw.isVisible()){
+ sw.show(this);
+ }else{
+ sw.realign(l, t, w, h);
+ }
+ if(sh){
+ if(doShow){
+ sh.show();
+ }
+ // fit the shim behind the shadow, so it is shimmed too
+ var a = sw.adjusts, s = sh.dom.style;
+ s.left = (Math.min(l, l+a.l))+'px';
+ s.top = (Math.min(t, t+a.t))+'px';
+ s.width = (w+a.w)+'px';
+ s.height = (h+a.h)+'px';
+ }
+ }else if(sh){
+ if(doShow){
+ sh.show();
+ }
+ sh.setSize(w, h);
+ sh.setLeftTop(l, t);
+ }
+
+ }
+ },
+
+ // private
+ destroy : function(){
+ this.hideShim();
+ if(this.shadow){
+ this.shadow.hide();
+ }
+ this.removeAllListeners();
+ Ext.removeNode(this.dom);
+ Ext.Element.uncache(this.id);
+ },
+
+ remove : function(){
+ this.destroy();
+ },
+
+ // private
+ beginUpdate : function(){
+ this.updating = true;
+ },
+
+ // private
+ endUpdate : function(){
+ this.updating = false;
+ this.sync(true);
+ },
+
+ // private
+ hideUnders : function(negOffset){
+ if(this.shadow){
+ this.shadow.hide();
+ }
+ this.hideShim();
+ },
+
+ // private
+ constrainXY : function(){
+ if(this.constrain){
+ var vw = Ext.lib.Dom.getViewWidth(),
+ vh = Ext.lib.Dom.getViewHeight();
+ var s = Ext.getDoc().getScroll();
+
+ var xy = this.getXY();
+ var x = xy[0], y = xy[1];
+ var so = this.shadowOffset;
+ var w = this.dom.offsetWidth+so, h = this.dom.offsetHeight+so;
+ // only move it if it needs it
+ var moved = false;
+ // first validate right/bottom
+ if((x + w) > vw+s.left){
+ x = vw - w - so;
+ moved = true;
+ }
+ if((y + h) > vh+s.top){
+ y = vh - h - so;
+ moved = true;
+ }
+ // then make sure top/left isn't negative
+ if(x < s.left){
+ x = s.left;
+ moved = true;
+ }
+ if(y < s.top){
+ y = s.top;
+ moved = true;
+ }
+ if(moved){
+ if(this.avoidY){
+ var ay = this.avoidY;
+ if(y <= ay && (y+h) >= ay){
+ y = ay-h-5;
+ }
+ }
+ xy = [x, y];
+ this.storeXY(xy);
+ supr.setXY.call(this, xy);
+ this.sync();
+ }
+ }
+ return this;
+ },
+
+ isVisible : function(){
+ return this.visible;
+ },
+
+ // private
+ showAction : function(){
+ this.visible = true; // track visibility to prevent getStyle calls
+ if(this.useDisplay === true){
+ this.setDisplayed('');
+ }else if(this.lastXY){
+ supr.setXY.call(this, this.lastXY);
+ }else if(this.lastLT){
+ supr.setLeftTop.call(this, this.lastLT[0], this.lastLT[1]);
+ }
+ },
+
+ // private
+ hideAction : function(){
+ this.visible = false;
+ if(this.useDisplay === true){
+ this.setDisplayed(false);
+ }else{
+ this.setLeftTop(-10000,-10000);
+ }
+ },
+
+ // overridden Element method
+ setVisible : function(v, a, d, c, e){
+ if(v){
+ this.showAction();
+ }
+ if(a && v){
+ var cb = function(){
+ this.sync(true);
+ if(c){
+ c();
+ }
+ }.createDelegate(this);
+ supr.setVisible.call(this, true, true, d, cb, e);
+ }else{
+ if(!v){
+ this.hideUnders(true);
+ }
+ var cb = c;
+ if(a){
+ cb = function(){
+ this.hideAction();
+ if(c){
+ c();
+ }
+ }.createDelegate(this);
+ }
+ supr.setVisible.call(this, v, a, d, cb, e);
+ if(v){
+ this.sync(true);
+ }else if(!a){
+ this.hideAction();
+ }
+ }
+ return this;
+ },
+
+ storeXY : function(xy){
+ delete this.lastLT;
+ this.lastXY = xy;
+ },
+
+ storeLeftTop : function(left, top){
+ delete this.lastXY;
+ this.lastLT = [left, top];
+ },
+
+ // private
+ beforeFx : function(){
+ this.beforeAction();
+ return Ext.Layer.superclass.beforeFx.apply(this, arguments);
+ },
+
+ // private
+ afterFx : function(){
+ Ext.Layer.superclass.afterFx.apply(this, arguments);
+ this.sync(this.isVisible());
+ },
+
+ // private
+ beforeAction : function(){
+ if(!this.updating && this.shadow){
+ this.shadow.hide();
+ }
+ },
+
+ // overridden Element method
+ setLeft : function(left){
+ this.storeLeftTop(left, this.getTop(true));
+ supr.setLeft.apply(this, arguments);
+ this.sync();
+ return this;
+ },
+
+ setTop : function(top){
+ this.storeLeftTop(this.getLeft(true), top);
+ supr.setTop.apply(this, arguments);
+ this.sync();
+ return this;
+ },
+
+ setLeftTop : function(left, top){
+ this.storeLeftTop(left, top);
+ supr.setLeftTop.apply(this, arguments);
+ this.sync();
+ return this;
+ },
+
+ setXY : function(xy, a, d, c, e){
+ this.fixDisplay();
+ this.beforeAction();
+ this.storeXY(xy);
+ var cb = this.createCB(c);
+ supr.setXY.call(this, xy, a, d, cb, e);
+ if(!a){
+ cb();
+ }
+ return this;
+ },
+
+ // private
+ createCB : function(c){
+ var el = this;
+ return function(){
+ el.constrainXY();
+ el.sync(true);
+ if(c){
+ c();
+ }
+ };
+ },
+
+ // overridden Element method
+ setX : function(x, a, d, c, e){
+ this.setXY([x, this.getY()], a, d, c, e);
+ return this;
+ },
+
+ // overridden Element method
+ setY : function(y, a, d, c, e){
+ this.setXY([this.getX(), y], a, d, c, e);
+ return this;
+ },
+
+ // overridden Element method
+ setSize : function(w, h, a, d, c, e){
+ this.beforeAction();
+ var cb = this.createCB(c);
+ supr.setSize.call(this, w, h, a, d, cb, e);
+ if(!a){
+ cb();
+ }
+ return this;
+ },
+
+ // overridden Element method
+ setWidth : function(w, a, d, c, e){
+ this.beforeAction();
+ var cb = this.createCB(c);
+ supr.setWidth.call(this, w, a, d, cb, e);
+ if(!a){
+ cb();
+ }
+ return this;
+ },
+
+ // overridden Element method
+ setHeight : function(h, a, d, c, e){
+ this.beforeAction();
+ var cb = this.createCB(c);
+ supr.setHeight.call(this, h, a, d, cb, e);
+ if(!a){
+ cb();
+ }
+ return this;
+ },
+
+ // overridden Element method
+ setBounds : function(x, y, w, h, a, d, c, e){
+ this.beforeAction();
+ var cb = this.createCB(c);
+ if(!a){
+ this.storeXY([x, y]);
+ supr.setXY.call(this, [x, y]);
+ supr.setSize.call(this, w, h, a, d, cb, e);
+ cb();
+ }else{
+ supr.setBounds.call(this, x, y, w, h, a, d, cb, e);
+ }
+ return this;
+ },
+
+ /**
+ * Sets the z-index of this layer and adjusts any shadow and shim z-indexes. The layer z-index is automatically
+ * incremented by two more than the value passed in so that it always shows above any shadow or shim (the shadow
+ * element, if any, will be assigned z-index + 1, and the shim element, if any, will be assigned the unmodified z-index).
+ * @param {Number} zindex The new z-index to set
+ * @return {this} The Layer
+ */
+ setZIndex : function(zindex){
+ this.zindex = zindex;
+ this.setStyle('z-index', zindex + 2);
+ if(this.shadow){
+ this.shadow.setZIndex(zindex + 1);
+ }
+ if(this.shim){
+ this.shim.setStyle('z-index', zindex);
+ }
+ return this;
+ }
+});
+})();/**
+ * @class Ext.Shadow
+ * Simple class that can provide a shadow effect for any element. Note that the element MUST be absolutely positioned,
+ * and the shadow does not provide any shimming. This should be used only in simple cases -- for more advanced
+ * functionality that can also provide the same shadow effect, see the {@link Ext.Layer} class.
+ * @constructor
+ * Create a new Shadow
+ * @param {Object} config The config object
+ */
+Ext.Shadow = function(config){
+ Ext.apply(this, config);
+ if(typeof this.mode != "string"){
+ this.mode = this.defaultMode;
+ }
+ var o = this.offset, a = {h: 0};
+ var rad = Math.floor(this.offset/2);
+ switch(this.mode.toLowerCase()){ // all this hideous nonsense calculates the various offsets for shadows
+ case "drop":
+ a.w = 0;
+ a.l = a.t = o;
+ a.t -= 1;
+ if(Ext.isIE){
+ a.l -= this.offset + rad;
+ a.t -= this.offset + rad;
+ a.w -= rad;
+ a.h -= rad;
+ a.t += 1;
+ }
+ break;
+ case "sides":
+ a.w = (o*2);
+ a.l = -o;
+ a.t = o-1;
+ if(Ext.isIE){
+ a.l -= (this.offset - rad);
+ a.t -= this.offset + rad;
+ a.l += 1;
+ a.w -= (this.offset - rad)*2;
+ a.w -= rad + 1;
+ a.h -= 1;
+ }
+ break;
+ case "frame":
+ a.w = a.h = (o*2);
+ a.l = a.t = -o;
+ a.t += 1;
+ a.h -= 2;
+ if(Ext.isIE){
+ a.l -= (this.offset - rad);
+ a.t -= (this.offset - rad);
+ a.l += 1;
+ a.w -= (this.offset + rad + 1);
+ a.h -= (this.offset + rad);
+ a.h += 1;
+ }
+ break;
+ };
+
+ this.adjusts = a;
+};
+
+Ext.Shadow.prototype = {
+ /**
+ * @cfg {String} mode
+ * The shadow display mode. Supports the following options:Base class for any {@link Ext.Component Component} that is to be sized as a box, using width and height.
+ *BoxComponent provides automatic box model adjustments for sizing and positioning and will work correctly + * within the Component rendering model.
+ *A BoxComponent may be created as a custom Component which encapsulates any HTML element, either a pre-existing + * element, or one that is created to your specifications at render time. Usually, to participate in layouts, + * a Component will need to be a BoxComponent in order to have its width and height managed.
+ *To use a pre-existing element as a BoxComponent, configure it so that you preset the el property to the + * element to reference:
+var pageHeader = new Ext.BoxComponent({
+ el: 'my-header-div'
+});To create a BoxComponent based around a HTML element to be created at render time, use the + * {@link Ext.Component#autoEl autoEl} config option which takes the form of a + * {@link Ext.DomHelper DomHelper} specification:
+var myImage = new Ext.BoxComponent({
+ autoEl: {
+ tag: 'img',
+ src: '/images/my-image.jpg'
+ }
+});Note: this config is only used when this BoxComponent is rendered + * by a Container which has been configured to use the {@link Ext.layout.BorderLayout BorderLayout} + * layout manager (e.g. specifying layout:'border').
See {@link Ext.layout.BorderLayout} also.
+ */ + // margins config is used when a BoxComponent is rendered by BorderLayout or BoxLayout. + /** + * @cfg {Object} marginsNote: this config is only used when this BoxComponent is rendered + * by a Container which has been configured to use the {@link Ext.layout.BorderLayout BorderLayout} + * or one of the two {@link Ext.layout.BoxLayout BoxLayout} subclasses.
+ *An object containing margins to apply to this BoxComponent in the + * format:
+{
+ top: (top margin),
+ right: (right margin),
+ bottom: (bottom margin),
+ left: (left margin)
+}May also be a string containing space-separated, numeric margin values. The order of the + * sides associated with each value matches the way CSS processes margin values:
+ *Defaults to:
+ * {top:0, right:0, bottom:0, left:0}
+ * True to use height:'auto', false to use fixed height (or allow it to be managed by its parent + * Container's {@link Ext.Container#layout layout manager}. Defaults to false.
+ *Note: Although many components inherit this config option, not all will + * function as expected with a height of 'auto'. Setting autoHeight:true means that the + * browser will manage height based on the element's contents, and that Ext will not manage it at all.
+ *If the browser is managing the height, be aware that resizes performed by the browser in response + * to changes within the structure of the Component cannot be detected. Therefore changes to the height might + * result in elements needing to be synchronized with the new height. Example:
+var w = new Ext.Window({
+ title: 'Window',
+ width: 600,
+ autoHeight: true,
+ items: {
+ title: 'Collapse Me',
+ height: 400,
+ collapsible: true,
+ border: false,
+ listeners: {
+ beforecollapse: function() {
+ w.el.shadow.hide();
+ },
+ beforeexpand: function() {
+ w.el.shadow.hide();
+ },
+ collapse: function() {
+ w.syncShadow();
+ },
+ expand: function() {
+ w.syncShadow();
+ }
+ }
+ }
+}).show();
+True to use width:'auto', false to use fixed width (or allow it to be managed by its parent + * Container's {@link Ext.Container#layout layout manager}. Defaults to false.
+ *Note: Although many components inherit this config option, not all will + * function as expected with a width of 'auto'. Setting autoWidth:true means that the + * browser will manage width based on the element's contents, and that Ext will not manage it at all.
+ *If the browser is managing the width, be aware that resizes performed by the browser in response + * to changes within the structure of the Component cannot be detected. Therefore changes to the width might + * result in elements needing to be synchronized with the new width. For example, where the target element is:
+<div id='grid-container' style='margin-left:25%;width:50%'></div>
+
+var myPanel = new Ext.Panel({
+ renderTo: 'grid-container',
+ monitorResize: true, // relay on browser resize
+ title: 'Panel',
+ height: 400,
+ autoWidth: true,
+ layout: 'hbox',
+ layoutConfig: {
+ align: 'stretch'
+ },
+ defaults: {
+ flex: 1
+ },
+ items: [{
+ title: 'Box 1',
+ }, {
+ title: 'Box 2'
+ }, {
+ title: 'Box 3'
+ }],
+});
+{width:10, height:20}.
+ * @param {Mixed} width The new width to set. This may be one of:{width: widthValue, height: heightValue}.undefined to leave the width unchanged.undefined to leave the height unchanged.Returns the outermost Element of this Component which defines the Components overall size.
+ *Usually this will return the same Element as {@link #getEl},
+ * but in some cases, a Component may have some more wrapping Elements around its main
+ * active Element.
An example is a ComboBox. It is encased in a wrapping Element which
+ * contains both the <input> Element (which is what would be returned
+ * by its {@link #getEl} method, and the trigger button Element.
+ * This Element is returned as the resizeEl.
+ */
+ getResizeEl : function(){
+ return this.resizeEl || this.el;
+ },
+
+ // protected
+ getPositionEl : function(){
+ return this.positionEl || this.el;
+ },
+
+ /**
+ * 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
+ * @return {Ext.BoxComponent} this
+ */
+ setPosition : function(x, y){
+ if(x && typeof x[1] == 'number'){
+ y = x[1];
+ x = x[0];
+ }
+ this.x = x;
+ this.y = y;
+ if(!this.boxReady){
+ return this;
+ }
+ var adj = this.adjustPosition(x, y);
+ var ax = adj.x, ay = adj.y;
+
+ var el = this.getPositionEl();
+ if(ax !== undefined || ay !== undefined){
+ if(ax !== undefined && ay !== undefined){
+ el.setLeftTop(ax, ay);
+ }else if(ax !== undefined){
+ el.setLeft(ax);
+ }else if(ay !== undefined){
+ el.setTop(ay);
+ }
+ this.onPosition(ax, ay);
+ this.fireEvent('move', this, ax, ay);
+ }
+ return this;
+ },
+
+ /**
+ * 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
+ * @return {Ext.BoxComponent} this
+ */
+ setPagePosition : function(x, y){
+ if(x && typeof x[1] == 'number'){
+ y = x[1];
+ x = x[0];
+ }
+ this.pageX = x;
+ this.pageY = y;
+ if(!this.boxReady){
+ return;
+ }
+ if(x === undefined || y === undefined){ // cannot translate undefined points
+ return;
+ }
+ var p = this.getPositionEl().translatePoints(x, y);
+ this.setPosition(p.left, p.top);
+ return this;
+ },
+
+ // private
+ onRender : function(ct, position){
+ Ext.BoxComponent.superclass.onRender.call(this, ct, position);
+ if(this.resizeEl){
+ this.resizeEl = Ext.get(this.resizeEl);
+ }
+ if(this.positionEl){
+ this.positionEl = Ext.get(this.positionEl);
+ }
+ },
+
+ // private
+ afterRender : function(){
+ Ext.BoxComponent.superclass.afterRender.call(this);
+ this.boxReady = true;
+ this.setSize(this.width, this.height);
+ if(this.x || this.y){
+ this.setPosition(this.x, this.y);
+ }else if(this.pageX || this.pageY){
+ this.setPagePosition(this.pageX, this.pageY);
+ }
+ },
+
+ /**
+ * Force the component's size to recalculate based on the underlying element's current height and width.
+ * @return {Ext.BoxComponent} this
+ */
+ syncSize : function(){
+ delete this.lastSize;
+ this.setSize(this.autoWidth ? undefined : this.getResizeEl().getWidth(), this.autoHeight ? undefined : this.getResizeEl().getHeight());
+ return this;
+ },
+
+ /* // protected
+ * Called after the component is resized, this method is empty by default but can be implemented by any
+ * subclass that needs to perform custom logic after a resize occurs.
+ * @param {Number} adjWidth The box-adjusted width that was set
+ * @param {Number} adjHeight The box-adjusted height that was set
+ * @param {Number} rawWidth The width that was originally specified
+ * @param {Number} rawHeight The height that was originally specified
+ */
+ onResize : function(adjWidth, adjHeight, rawWidth, rawHeight){
+
+ },
+
+ /* // protected
+ * Called after the component is moved, this method is empty by default but can be implemented by any
+ * subclass that needs to perform custom logic after a move occurs.
+ * @param {Number} x The new x position
+ * @param {Number} y The new y position
+ */
+ onPosition : function(x, y){
+
+ },
+
+ // private
+ adjustSize : function(w, h){
+ if(this.autoWidth){
+ w = 'auto';
+ }
+ if(this.autoHeight){
+ h = 'auto';
+ }
+ return {width : w, height: h};
+ },
+
+ // private
+ adjustPosition : function(x, y){
+ return {x : x, y: y};
+ }
+});
+Ext.reg('box', Ext.BoxComponent);
+
+
+/**
+ * @class Ext.Spacer
+ * @extends Ext.BoxComponent
+ *
Used to provide a sizable space in a layout.
+ * @constructor + * @param {Object} config + */ +Ext.Spacer = Ext.extend(Ext.BoxComponent, { + autoEl:'div' +}); +Ext.reg('spacer', Ext.Spacer);/** + * @class Ext.SplitBar + * @extends Ext.util.Observable + * Creates draggable splitter bar functionality from two elements (element to be dragged and element to be resized). + *
+var split = new Ext.SplitBar("elementToDrag", "elementToSize",
+ Ext.SplitBar.HORIZONTAL, Ext.SplitBar.LEFT);
+split.setAdapter(new Ext.SplitBar.AbsoluteLayoutAdapter("container"));
+split.minSize = 100;
+split.maxSize = 600;
+split.animate = true;
+split.on('moved', splitterMoved);
+Base class for any {@link Ext.BoxComponent} that may contain other Components. Containers handle the + * basic behavior of containing items, namely adding, inserting and removing items.
+ * + *The most commonly used Container classes are {@link Ext.Panel}, {@link Ext.Window} and {@link Ext.TabPanel}. + * If you do not need the capabilities offered by the aforementioned classes you can create a lightweight + * Container to be encapsulated by an HTML element to your specifications by using the + * {@link Ext.Component#autoEl autoEl} config option. This is a useful technique when creating + * embedded {@link Ext.layout.ColumnLayout column} layouts inside {@link Ext.form.FormPanel FormPanels} + * for example.
+ * + *The code below illustrates both how to explicitly create a Container, and how to implicitly + * create one using the 'container' xtype:
+// explicitly create a Container
+var embeddedColumns = new Ext.Container({
+ autoEl: 'div', // This is the default
+ layout: 'column',
+ defaults: {
+ // implicitly create Container by specifying xtype
+ xtype: 'container',
+ autoEl: 'div', // This is the default.
+ layout: 'form',
+ columnWidth: 0.5,
+ style: {
+ padding: '10px'
+ }
+ },
+// The two items below will be Ext.Containers, each encapsulated by a <DIV> element.
+ items: [{
+ items: {
+ xtype: 'datefield',
+ name: 'startDate',
+ fieldLabel: 'Start date'
+ }
+ }, {
+ items: {
+ xtype: 'datefield',
+ name: 'endDate',
+ fieldLabel: 'End date'
+ }
+ }]
+});Layout
+ *Container classes delegate the rendering of child Components to a layout
+ * manager class which must be configured into the Container using the
+ * {@link #layout} configuration property.
When either specifying child {@link #items} of a Container,
+ * or dynamically {@link #add adding} Components to a Container, remember to
+ * consider how you wish the Container to arrange those child elements, and
+ * whether those child elements need to be sized using one of Ext's built-in
+ * {@link #layout} schemes. By default, Containers use the
+ * {@link Ext.layout.ContainerLayout ContainerLayout} scheme which only
+ * renders child components, appending them one after the other inside the
+ * Container, and does not apply any sizing at all.
A common mistake is when a developer neglects to specify a
+ * {@link #layout} (e.g. widgets like GridPanels or
+ * TreePanels are added to Containers for which no {@link #layout}
+ * has been specified). If a Container is left to use the default
+ * {@link Ext.layout.ContainerLayout ContainerLayout} scheme, none of its
+ * child components will be resized, or changed in any way when the Container
+ * is resized.
Certain layout managers allow dynamic addition of child components. + * Those that do include {@link Ext.layout.CardLayout}, + * {@link Ext.layout.AnchorLayout}, {@link Ext.layout.FormLayout}, and + * {@link Ext.layout.TableLayout}. For example:
+// Create the GridPanel.
+var myNewGrid = new Ext.grid.GridPanel({
+ store: myStore,
+ columns: myColumnModel,
+ title: 'Results', // the title becomes the title of the tab
+});
+
+myTabPanel.add(myNewGrid); // {@link Ext.TabPanel} implicitly uses {@link Ext.layout.CardLayout CardLayout}
+myTabPanel.{@link Ext.TabPanel#setActiveTab setActiveTab}(myNewGrid);
+ * The example above adds a newly created GridPanel to a TabPanel. Note that + * a TabPanel uses {@link Ext.layout.CardLayout} as its layout manager which + * means all its child items are sized to {@link Ext.layout.FitLayout fit} + * exactly into its client area. + *
Overnesting is a common problem. + * An example of overnesting occurs when a GridPanel is added to a TabPanel + * by wrapping the GridPanel inside a wrapping Panel (that has no + * {@link #layout} specified) and then add that wrapping Panel + * to the TabPanel. The point to realize is that a GridPanel is a + * Component which can be added directly to a Container. If the wrapping Panel + * has no {@link #layout} configuration, then the overnested + * GridPanel will not be sized as expected.
+ + * + *
Adding via remote configuration
+ * + *A server side script can be used to add Components which are generated dynamically on the server. + * An example of adding a GridPanel to a TabPanel where the GridPanel is generated by the server + * based on certain parameters: + *
+// execute an Ajax request to invoke server side script:
+Ext.Ajax.request({
+ url: 'gen-invoice-grid.php',
+ // send additional parameters to instruct server script
+ params: {
+ startDate: Ext.getCmp('start-date').getValue(),
+ endDate: Ext.getCmp('end-date').getValue()
+ },
+ // process the response object to add it to the TabPanel:
+ success: function(xhr) {
+ var newComponent = eval(xhr.responseText); // see discussion below
+ myTabPanel.add(newComponent); // add the component to the TabPanel
+ myTabPanel.setActiveTab(newComponent);
+ },
+ failure: function() {
+ Ext.Msg.alert("Grid create failed", "Server communication failure");
+ }
+});
+The server script needs to return an executable Javascript statement which, when processed + * using eval(), will return either a config object with an {@link Ext.Component#xtype xtype}, + * or an instantiated Component. The server might return this for example:
+(function() {
+ function formatDate(value){
+ return value ? value.dateFormat('M d, Y') : '';
+ };
+
+ var store = new Ext.data.Store({
+ url: 'get-invoice-data.php',
+ baseParams: {
+ startDate: '01/01/2008',
+ endDate: '01/31/2008'
+ },
+ reader: new Ext.data.JsonReader({
+ record: 'transaction',
+ idProperty: 'id',
+ totalRecords: 'total'
+ }, [
+ 'customer',
+ 'invNo',
+ {name: 'date', type: 'date', dateFormat: 'm/d/Y'},
+ {name: 'value', type: 'float'}
+ ])
+ });
+
+ var grid = new Ext.grid.GridPanel({
+ title: 'Invoice Report',
+ bbar: new Ext.PagingToolbar(store),
+ store: store,
+ columns: [
+ {header: "Customer", width: 250, dataIndex: 'customer', sortable: true},
+ {header: "Invoice Number", width: 120, dataIndex: 'invNo', sortable: true},
+ {header: "Invoice Date", width: 100, dataIndex: 'date', renderer: formatDate, sortable: true},
+ {header: "Value", width: 120, dataIndex: 'value', renderer: 'usMoney', sortable: true}
+ ],
+ });
+ store.load();
+ return grid; // return instantiated component
+})();
+When the above code fragment is passed through the eval function in the success handler + * of the Ajax request, the code is executed by the Javascript processor, and the anonymous function + * runs, and returns the instantiated grid component.
+ *Note: since the code above is generated by a server script, the baseParams for + * the Store, the metadata to allow generation of the Record layout, and the ColumnModel + * can all be generated into the code since these are all known on the server.
+ * + * @xtype container + */ +Ext.Container = Ext.extend(Ext.BoxComponent, { + /** + * @cfg {Boolean} monitorResize + * True to automatically monitor window resize events to handle anything that is sensitive to the current size + * of the viewport. This value is typically managed by the chosen{@link #layout} and should not need
+ * to be set manually.
+ */
+ /**
+ * @cfg {String/Object} layout
+ * When creating complex UIs, it is important to remember that sizing and
+ * positioning of child items is the responsibility of the Container's
+ * layout manager. If you expect child items to be sized in response to
+ * user interactions, you must specify a layout manager which
+ * creates and manages the type of layout you have in mind. For example:
+new Ext.Window({
+ width:300, height: 300,
+ layout: 'fit', // explicitly set layout manager: override the default (layout:'auto')
+ items: [{
+ title: 'Panel inside a Window'
+ }]
+}).show();
+ * Omitting the {@link #layout} config means that the + * {@link Ext.layout.ContainerLayout default layout manager} will be used which does + * nothing but render child components sequentially into the Container (no sizing or + * positioning will be performed in this situation).
+ *The layout manager class for this container may be specified as either as an + * Object or as a String:
+ *
+layout: {
+ type: 'vbox',
+ padding: '5',
+ align: 'left'
+}
+The layout type to be used for this container. If not specified, + * a default {@link Ext.layout.ContainerLayout} will be created and used.
+ *Valid layout type values are:
+ *Additional layout specific configuration properties may also be + * specified. For complete details regarding the valid config options for + * each layout type, see the layout class corresponding to the type + * specified.
+ * + *
+layout: 'vbox',
+layoutConfig: {
+ padding: '5',
+ align: 'left'
+}
+The layout type to be used for this container (see list + * of valid layout type values above).
Additional layout specific configuration properties. For complete + * details regarding the valid config options for each layout type, see the + * layout class corresponding to the layout specified.
+ *{@link #layout} if {@link #layout}
+ * has been specified as a string.
+ */
+ /**
+ * @cfg {Boolean/Number} bufferResize
+ * When set to true (100 milliseconds) or a number of milliseconds, the layout assigned for this container will buffer
+ * the frequency it calculates and does a re-layout of components. This is useful for heavy containers or containers
+ * with a large quantity of sub-components for which frequent layout calls would be expensive.
+ */
+ bufferResize: 100,
+
+ /**
+ * @cfg {String/Number} activeItem
+ * A string component id or the numeric index of the component that should be initially activated within the
+ * container's layout on render. For example, activeItem: 'item-1' or activeItem: 0 (index 0 = the first
+ * item in the container's collection). activeItem only applies to layout styles that can display
+ * items one at a time (like {@link Ext.layout.AccordionLayout}, {@link Ext.layout.CardLayout} and
+ * {@link Ext.layout.FitLayout}). Related to {@link Ext.layout.ContainerLayout#activeItem}.
+ */
+ /**
+ * @cfg {Object/Array} items
+ * ** IMPORTANT: be sure to specify a {@link #layout} ! **
+ * A single item, or an array of child Components to be added to this container, + * for example:
+ *
+// specifying a single item
+items: {...},
+layout: 'fit', // specify a layout!
+
+// specifying multiple items
+items: [{...}, {...}],
+layout: 'anchor', // specify a layout!
+ * Each item may be:
+ *{@link Ext.Component#xtype xtype}{@link Ext.Component#xtype xtype} is not explicitly
+ * specified, the {@link #defaultType} for that Container is used.Notes:
+ *{@link Ext.Panel#contentEl contentEl}/
+ * {@link Ext.Panel#html html} with items.A config object that will be applied to all components added to this container either via the {@link #items} + * config or via the {@link #add} or {@link #insert} methods. The defaults config can contain any + * number of name/value property pairs to be added to each item, and should be valid for the types of items + * being added to the container. For example, to automatically apply padding to the body of each of a set of + * contained {@link Ext.Panel} items, you could pass: defaults: {bodyStyle:'padding:15px'}.
Note: defaults will not be applied to config objects if the option is already specified. + * For example:
+defaults: { // defaults are applied to items, not the container
+ autoScroll:true
+},
+items: [
+ {
+ xtype: 'panel', // defaults do not have precedence over
+ id: 'panel1', // options in config objects, so the defaults
+ autoScroll: false // will not be applied here, panel1 will be autoScroll:false
+ },
+ new Ext.Panel({ // defaults do have precedence over options
+ id: 'panel2', // options in components, so the defaults
+ autoScroll: false // will be applied here, panel2 will be autoScroll:true.
+ })
+]
+ * The default {@link Ext.Component xtype} of child Components to create in this Container when + * a child item is specified as a raw configuration object, rather than as an instantiated Component.
+ *Defaults to 'panel', except {@link Ext.menu.Menu} which defaults to 'menuitem', + * and {@link Ext.Toolbar} and {@link Ext.ButtonGroup} which default to 'button'.
+ */ + defaultType : 'panel', + + // private + initComponent : function(){ + Ext.Container.superclass.initComponent.call(this); + + this.addEvents( + /** + * @event afterlayout + * Fires when the components in this container are arranged by the associated layout manager. + * @param {Ext.Container} this + * @param {ContainerLayout} layout The ContainerLayout implementation for this container + */ + 'afterlayout', + /** + * @event beforeadd + * Fires before any {@link Ext.Component} is added or inserted into the container. + * A handler can return false to cancel the add. + * @param {Ext.Container} this + * @param {Ext.Component} component The component being added + * @param {Number} index The index at which the component will be added to the container's items collection + */ + 'beforeadd', + /** + * @event beforeremove + * Fires before any {@link Ext.Component} is removed from the container. A handler can return + * false to cancel the remove. + * @param {Ext.Container} this + * @param {Ext.Component} component The component being removed + */ + 'beforeremove', + /** + * @event add + * @bubbles + * Fires after any {@link Ext.Component} is added or inserted into the container. + * @param {Ext.Container} this + * @param {Ext.Component} component The component that was added + * @param {Number} index The index at which the component was added to the container's items collection + */ + 'add', + /** + * @event remove + * @bubbles + * Fires after any {@link Ext.Component} is removed from the container. + * @param {Ext.Container} this + * @param {Ext.Component} component The component that was removed + */ + 'remove' + ); + + this.enableBubble('add', 'remove'); + + /** + * The collection of components in this container as a {@link Ext.util.MixedCollection} + * @type MixedCollection + * @property items + */ + var items = this.items; + if(items){ + delete this.items; + if(Ext.isArray(items) && items.length > 0){ + this.add.apply(this, items); + }else{ + this.add(items); + } + } + }, + + // private + initItems : function(){ + if(!this.items){ + this.items = new Ext.util.MixedCollection(false, this.getComponentId); + this.getLayout(); // initialize the layout + } + }, + + // private + setLayout : function(layout){ + if(this.layout && this.layout != layout){ + this.layout.setContainer(null); + } + this.initItems(); + this.layout = layout; + layout.setContainer(this); + }, + + // private + render : function(){ + Ext.Container.superclass.render.apply(this, arguments); + if(this.layout){ + if(Ext.isObject(this.layout) && !this.layout.layout){ + this.layoutConfig = this.layout; + this.layout = this.layoutConfig.type; + } + if(typeof this.layout == 'string'){ + this.layout = new Ext.Container.LAYOUTS[this.layout.toLowerCase()](this.layoutConfig); + } + this.setLayout(this.layout); + + if(this.activeItem !== undefined){ + var item = this.activeItem; + delete this.activeItem; + this.layout.setActiveItem(item); + } + } + if(!this.ownerCt){ + // force a layout if no ownerCt is set + this.doLayout(false, true); + } + if(this.monitorResize === true){ + Ext.EventManager.onWindowResize(this.doLayout, this, [false]); + } + }, + + /** + *Returns the Element to be used to contain the child Components of this Container.
+ *An implementation is provided which returns the Container's {@link #getEl Element}, but + * if there is a more complex structure to a Container, this may be overridden to return + * the element into which the {@link #layout layout} renders child Components.
+ * @return {Ext.Element} The Element to render child Components into. + */ + getLayoutTarget : function(){ + return this.el; + }, + + // private - used as the key lookup function for the items collection + getComponentId : function(comp){ + return comp.getItemId(); + }, + + /** + *Adds {@link Ext.Component Component}(s) to this Container.
+ *Description : + *
{@link #defaults} for details).Notes : + *
+var tb = new {@link Ext.Toolbar}();
+tb.render(document.body); // toolbar is rendered
+tb.add({text:'Button 1'}); // add multiple items ({@link #defaultType} for {@link Ext.Toolbar Toolbar} is 'button')
+tb.add({text:'Button 2'});
+tb.{@link #doLayout}(); // refresh the layout
+ * Either a single component or an Array of components to add. See
+ * {@link #items} for additional information.
{@link #items} property
+ * and gets a direct child component of this container.
+ * @param {String/Number} comp This parameter may be any of the following:
+ * {@link Ext.Component#itemId itemId}
+ * or {@link Ext.Component#id id} of the child component {@link #items} propertyFor additional information see {@link Ext.util.MixedCollection#get}. + * @return Ext.Component The component (if found). + */ + getComponent : function(comp){ + if(Ext.isObject(comp)){ + return comp; + } + return this.items.get(comp); + }, + + // private + lookupComponent : function(comp){ + if(typeof comp == 'string'){ + return Ext.ComponentMgr.get(comp); + }else if(!comp.events){ + return this.createComponent(comp); + } + return comp; + }, + + // private + createComponent : function(config){ + return Ext.create(config, this.defaultType); + }, + + /** + * Force this container's layout to be recalculated. A call to this function is required after adding a new component + * to an already rendered container, or possibly after changing sizing/position properties of child components. + * @param {Boolean} shallow (optional) True to only calc the layout of this component, and let child components auto + * calc layouts as required (defaults to false, which calls doLayout recursively for each subcontainer) + * @param {Boolean} force (optional) True to force a layout to occur, even if the item is hidden. + * @return {Ext.Container} this + */ + doLayout: function(shallow, force){ + var rendered = this.rendered, + forceLayout = this.forceLayout; + + if(!this.isVisible() || this.collapsed){ + this.deferLayout = this.deferLayout || !shallow; + if(!(force || forceLayout)){ + return; + } + shallow = shallow && !this.deferLayout; + } else { + delete this.deferLayout; + } + if(rendered && this.layout){ + this.layout.layout(); + } + if(shallow !== true && this.items){ + var cs = this.items.items; + for(var i = 0, len = cs.length; i < len; i++){ + var c = cs[i]; + if(c.doLayout){ + c.forceLayout = forceLayout; + c.doLayout(); + } + } + } + if(rendered){ + this.onLayout(shallow, force); + } + delete this.forceLayout; + }, + + //private + onLayout : Ext.emptyFn, + + onShow : function(){ + Ext.Container.superclass.onShow.call(this); + if(this.deferLayout !== undefined){ + this.doLayout(true); + } + }, + + /** + * Returns the layout currently in use by the container. If the container does not currently have a layout + * set, a default {@link Ext.layout.ContainerLayout} will be created and set as the container's layout. + * @return {ContainerLayout} layout The container's layout + */ + getLayout : function(){ + if(!this.layout){ + var layout = new Ext.layout.ContainerLayout(this.layoutConfig); + this.setLayout(layout); + } + return this.layout; + }, + + // private + beforeDestroy : function(){ + if(this.items){ + Ext.destroy.apply(Ext, this.items.items); + } + if(this.monitorResize){ + Ext.EventManager.removeResizeListener(this.doLayout, this); + } + Ext.destroy(this.layout); + Ext.Container.superclass.beforeDestroy.call(this); + }, + + /** + * Bubbles up the component/container heirarchy, calling the specified function with each component. The scope (this) of + * function call will be the scope provided or the current component. The arguments to the function + * will be the args provided or the current component. If the function returns false at any point, + * the bubble is stopped. + * @param {Function} fn The function to call + * @param {Object} scope (optional) The scope of the function (defaults to current node) + * @param {Array} args (optional) The args to call the function with (default to passing the current component) + * @return {Ext.Container} this + */ + bubble : function(fn, scope, args){ + var p = this; + while(p){ + if(fn.apply(scope || p, args || [p]) === false){ + break; + } + p = p.ownerCt; + } + return this; + }, + + /** + * Cascades down the component/container heirarchy from this component (called first), calling the specified function with + * each component. The scope (this) of + * function call will be the scope provided or the current component. The arguments to the function + * will be the args provided or the current component. If the function returns false at any point, + * the cascade is stopped on that branch. + * @param {Function} fn The function to call + * @param {Object} scope (optional) The scope of the function (defaults to current component) + * @param {Array} args (optional) The args to call the function with (defaults to passing the current component) + * @return {Ext.Container} this + */ + cascade : function(fn, scope, args){ + if(fn.apply(scope || this, args || [this]) !== false){ + if(this.items){ + var cs = this.items.items; + for(var i = 0, len = cs.length; i < len; i++){ + if(cs[i].cascade){ + cs[i].cascade(fn, scope, args); + }else{ + fn.apply(scope || cs[i], args || [cs[i]]); + } + } + } + } + return this; + }, + + /** + * Find a component under this container at any level by id + * @param {String} id + * @return Ext.Component + */ + findById : function(id){ + var m, ct = this; + this.cascade(function(c){ + if(ct != c && c.id === id){ + m = c; + return false; + } + }); + return m || null; + }, + + /** + * Find a component under this container at any level by xtype or class + * @param {String/Class} xtype The xtype string for a component, or the class of the component directly + * @param {Boolean} shallow (optional) False to check whether this Component is descended from the xtype (this is + * the default), or true to check whether this Component is directly of the specified xtype. + * @return {Array} Array of Ext.Components + */ + findByType : function(xtype, shallow){ + return this.findBy(function(c){ + return c.isXType(xtype, shallow); + }); + }, + + /** + * Find a component under this container at any level by property + * @param {String} prop + * @param {String} value + * @return {Array} Array of Ext.Components + */ + find : function(prop, value){ + return this.findBy(function(c){ + return c[prop] === value; + }); + }, + + /** + * Find a component under this container at any level by a custom function. If the passed function returns + * true, the component will be included in the results. The passed function is called with the arguments (component, this container). + * @param {Function} fn The function to call + * @param {Object} scope (optional) + * @return {Array} Array of Ext.Components + */ + findBy : function(fn, scope){ + var m = [], ct = this; + this.cascade(function(c){ + if(ct != c && fn.call(scope || c, c, ct) === true){ + m.push(c); + } + }); + return m; + }, + + /** + * Get a component contained by this container (alias for items.get(key)) + * @param {String/Number} key The index or id of the component + * @return {Ext.Component} Ext.Component + */ + get : function(key){ + return this.items.get(key); + } +}); + +Ext.Container.LAYOUTS = {}; +Ext.reg('container', Ext.Container); +/** + * @class Ext.layout.ContainerLayout + *
The ContainerLayout class is the default layout manager delegated by {@link Ext.Container} to + * render any child Components when no {@link Ext.Container#layout layout} is configured into + * a {@link Ext.Container Container}. ContainerLayout provides the basic foundation for all other layout + * classes in Ext. It simply renders all child Components into the Container, performing no sizing or + * positioning services. To utilize a layout that provides sizing and positioning of child Components, + * specify an appropriate {@link Ext.Container#layout layout}.
+ *This class is intended to be extended or created via the {@link Ext.Container#layout layout} + * configuration property. See {@link Ext.Container#layout} for additional details.
+ */ +Ext.layout.ContainerLayout = function(config){ + Ext.apply(this, config); +}; + +Ext.layout.ContainerLayout.prototype = { + /** + * @cfg {String} extraCls + *An optional extra CSS class that will be added to the container. This can be useful for adding + * customized styles to the container or any of its children using standard CSS rules. See + * {@link Ext.Component}.{@link Ext.Component#ctCls ctCls} also.
+ *Note: extraCls defaults to '' except for the following classes + * which assign a value by default: + *
+ * extraCls: 'x-column custom-class'
+ *
+ * if(myPanel.layout.activeItem.id == 'item-1') { ... }
+ * This is a base class for layouts that contain a single item that automatically expands to fill the layout's + * container. This class is intended to be extended or created via the layout:'fit' {@link Ext.Container#layout} + * config, and should generally not need to be created directly via the new keyword.
+ *FitLayout does not have any direct config options (other than inherited ones). To fit a panel to a container + * using FitLayout, simply set layout:'fit' on the container and add a single panel to it. If the container has + * multiple panels, only the first one will be displayed. Example usage:
+ *
+var p = new Ext.Panel({
+ title: 'Fit Layout',
+ layout:'fit',
+ items: {
+ title: 'Inner Panel',
+ html: '<p>This is the inner panel content</p>',
+ border: false
+ }
+});
+This layout manages multiple child Components, each fitted to the Container, where only a single child Component can be + * visible at any given time. This layout style is most commonly used for wizards, tab implementations, etc. + * This class is intended to be extended or created via the layout:'card' {@link Ext.Container#layout} config, + * and should generally not need to be created directly via the new keyword.
+ *The CardLayout's focal method is {@link #setActiveItem}. Since only one panel is displayed at a time, + * the only way to move from one Component to the next is by calling setActiveItem, passing the id or index of + * the next panel to display. The layout itself does not provide a user interface for handling this navigation, + * so that functionality must be provided by the developer.
+ *In the following example, a simplistic wizard setup is demonstrated. A button bar is added + * to the footer of the containing panel to provide navigation buttons. The buttons will be handled by a + * common navigation routine -- for this example, the implementation of that routine has been ommitted since + * it can be any type of custom logic. Note that other uses of a CardLayout (like a tab control) would require a + * completely different implementation. For serious implementations, a better approach would be to extend + * CardLayout to provide the custom functionality needed. Example usage:
+ *
+var navHandler = function(direction){
+ // This routine could contain business logic required to manage the navigation steps.
+ // It would call setActiveItem as needed, manage navigation button state, handle any
+ // branching logic that might be required, handle alternate actions like cancellation
+ // or finalization, etc. A complete wizard implementation could get pretty
+ // sophisticated depending on the complexity required, and should probably be
+ // done as a subclass of CardLayout in a real-world implementation.
+};
+
+var card = new Ext.Panel({
+ title: 'Example Wizard',
+ layout:'card',
+ activeItem: 0, // make sure the active item is set on the container config!
+ bodyStyle: 'padding:15px',
+ defaults: {
+ // applied to each contained panel
+ border:false
+ },
+ // just an example of one possible navigation scheme, using buttons
+ bbar: [
+ {
+ id: 'move-prev',
+ text: 'Back',
+ handler: navHandler.createDelegate(this, [-1]),
+ disabled: true
+ },
+ '->', // greedy spacer so that the buttons are aligned to each side
+ {
+ id: 'move-next',
+ text: 'Next',
+ handler: navHandler.createDelegate(this, [1])
+ }
+ ],
+ // the panels (or "cards") within the layout
+ items: [{
+ id: 'card-0',
+ html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
+ },{
+ id: 'card-1',
+ html: '<p>Step 2 of 3</p>'
+ },{
+ id: 'card-2',
+ html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
+ }]
+});
+This is a layout that enables anchoring of contained elements relative to the container's dimensions. + * If the container is resized, all anchored items are automatically rerendered according to their + * {@link #anchor} rules.
+ *This class is intended to be extended or created via the layout:'anchor' {@link Ext.Container#layout} + * config, and should generally not need to be created directly via the new keyword.
+ *AnchorLayout does not have any direct config options (other than inherited ones). By default, + * AnchorLayout will calculate anchor measurements based on the size of the container itself. However, the + * container using the AnchorLayout can supply an anchoring-specific config property of anchorSize. + * If anchorSize is specifed, the layout will use it as a virtual container for the purposes of calculating + * anchor measurements based on it instead, allowing the container to be sized independently of the anchoring + * logic if necessary. For example:
+ *
+var viewport = new Ext.Viewport({
+ layout:'anchor',
+ anchorSize: {width:800, height:600},
+ items:[{
+ title:'Item 1',
+ html:'Content 1',
+ width:800,
+ anchor:'right 20%'
+ },{
+ title:'Item 2',
+ html:'Content 2',
+ width:300,
+ anchor:'50% 30%'
+ },{
+ title:'Item 3',
+ html:'Content 3',
+ width:600,
+ anchor:'-100 50%'
+ }]
+});
+ * This configuation option is to be applied to child items of a container managed by + * this layout (ie. configured with layout:'anchor').
This value is what tells the layout how an item should be anchored to the container. items + * added to an AnchorLayout accept an anchoring-specific config property of anchor which is a string + * containing two values: the horizontal anchor value and the vertical anchor value (for example, '100% 50%'). + * The following types of anchor values are supported:
+// two values specified
+anchor: '100% 50%' // render item complete width of the container and
+ // 1/2 height of the container
+// one value specified
+anchor: '100%' // the width value; the height will default to auto
+ *
+// two values specified
+anchor: '-50 -100' // render item the complete width of the container
+ // minus 50 pixels and
+ // the complete height minus 100 pixels.
+// one value specified
+anchor: '-50' // anchor value is assumed to be the right offset value
+ // bottom offset will default to 0
+ *
+anchor: '-50 75%'
+ * This is the layout style of choice for creating structural layouts in a multi-column format where the width of + * each column can be specified as a percentage or fixed width, but the height is allowed to vary based on the content. + * This class is intended to be extended or created via the layout:'column' {@link Ext.Container#layout} config, + * and should generally not need to be created directly via the new keyword.
+ *ColumnLayout does not have any direct config options (other than inherited ones), but it does support a + * specific config property of columnWidth that can be included in the config of any panel added to it. The + * layout will use the columnWidth (if present) or width of each panel during layout to determine how to size each panel. + * If width or columnWidth is not specified for a given panel, its width will default to the panel's width (or auto).
+ *The width property is always evaluated as pixels, and must be a number greater than or equal to 1. + * The columnWidth property is always evaluated as a percentage, and must be a decimal value greater than 0 and + * less than 1 (e.g., .25).
+ *The basic rules for specifying column widths are pretty simple. The logic makes two passes through the + * set of contained panels. During the first layout pass, all panels that either have a fixed width or none + * specified (auto) are skipped, but their widths are subtracted from the overall container width. During the second + * pass, all panels with columnWidths are assigned pixel widths in proportion to their percentages based on + * the total remaining container width. In other words, percentage width panels are designed to fill the space + * left over by all the fixed-width and/or auto-width panels. Because of this, while you can specify any number of columns + * with different percentages, the columnWidths must always add up to 1 (or 100%) when added together, otherwise your + * layout may not render as expected. Example usage:
+ *
+// All columns are percentages -- they must add up to 1
+var p = new Ext.Panel({
+ title: 'Column Layout - Percentage Only',
+ layout:'column',
+ items: [{
+ title: 'Column 1',
+ columnWidth: .25
+ },{
+ title: 'Column 2',
+ columnWidth: .6
+ },{
+ title: 'Column 3',
+ columnWidth: .15
+ }]
+});
+
+// Mix of width and columnWidth -- all columnWidth values must add up
+// to 1. The first column will take up exactly 120px, and the last two
+// columns will fill the remaining container width.
+var p = new Ext.Panel({
+ title: 'Column Layout - Mixed',
+ layout:'column',
+ items: [{
+ title: 'Column 1',
+ width: 120
+ },{
+ title: 'Column 2',
+ columnWidth: .8
+ },{
+ title: 'Column 3',
+ columnWidth: .2
+ }]
+});
+This is a multi-pane, application-oriented UI layout style that supports multiple + * nested panels, automatic {@link Ext.layout.BorderLayout.Region#split split} bars between + * {@link Ext.layout.BorderLayout.Region#BorderLayout.Region regions} and built-in + * {@link Ext.layout.BorderLayout.Region#collapsible expanding and collapsing} of regions.
+ *This class is intended to be extended or created via the layout:'border' + * {@link Ext.Container#layout} config, and should generally not need to be created directly + * via the new keyword.
+ *BorderLayout does not have any direct config options (other than inherited ones). + * All configuration options available for customizing the BorderLayout are at the + * {@link Ext.layout.BorderLayout.Region} and {@link Ext.layout.BorderLayout.SplitRegion} + * levels.
+ *Example usage:
+ *
+var myBorderPanel = new Ext.Panel({
+ {@link Ext.Component#renderTo renderTo}: document.body,
+ {@link Ext.BoxComponent#width width}: 700,
+ {@link Ext.BoxComponent#height height}: 500,
+ {@link Ext.Panel#title title}: 'Border Layout',
+ {@link Ext.Container#layout layout}: 'border',
+ {@link Ext.Container#items items}: [{
+ {@link Ext.Panel#title title}: 'South Region is resizable',
+ {@link Ext.layout.BorderLayout.Region#BorderLayout.Region region}: 'south', // position for region
+ {@link Ext.BoxComponent#height height}: 100,
+ {@link Ext.layout.BorderLayout.Region#split split}: true, // enable resizing
+ {@link Ext.SplitBar#minSize minSize}: 75, // defaults to {@link Ext.layout.BorderLayout.Region#minHeight 50}
+ {@link Ext.SplitBar#maxSize maxSize}: 150,
+ {@link Ext.layout.BorderLayout.Region#margins margins}: '0 5 5 5'
+ },{
+ // xtype: 'panel' implied by default
+ {@link Ext.Panel#title title}: 'West Region is collapsible',
+ {@link Ext.layout.BorderLayout.Region#BorderLayout.Region region}:'west',
+ {@link Ext.layout.BorderLayout.Region#margins margins}: '5 0 0 5',
+ {@link Ext.BoxComponent#width width}: 200,
+ {@link Ext.layout.BorderLayout.Region#collapsible collapsible}: true, // make collapsible
+ {@link Ext.layout.BorderLayout.Region#cmargins cmargins}: '5 5 0 5', // adjust top margin when collapsed
+ {@link Ext.Component#id id}: 'west-region-container',
+ {@link Ext.Container#layout layout}: 'fit',
+ {@link Ext.Panel#unstyled unstyled}: true
+ },{
+ {@link Ext.Panel#title title}: 'Center Region',
+ {@link Ext.layout.BorderLayout.Region#BorderLayout.Region region}: 'center', // center region is required, no width/height specified
+ {@link Ext.Component#xtype xtype}: 'container',
+ {@link Ext.Container#layout layout}: 'fit',
+ {@link Ext.layout.BorderLayout.Region#margins margins}: '5 5 0 0'
+ }]
+});
+Notes:
+wrc = {@link Ext#getCmp Ext.getCmp}('west-region-container');
+wrc.{@link Ext.Panel#removeAll removeAll}();
+wrc.{@link Ext.Container#add add}({
+ title: 'Added Panel',
+ html: 'Some content'
+});
+wrc.{@link Ext.Container#doLayout doLayout}();
+ *
+wr = myBorderPanel.layout.west;
+ * This is a region of a {@link Ext.layout.BorderLayout BorderLayout} that acts as a subcontainer + * within the layout. Each region has its own {@link Ext.layout.ContainerLayout layout} that is + * independent of other regions and the containing BorderLayout, and can be any of the + * {@link Ext.layout.ContainerLayout valid Ext layout types}.
+ *Region size is managed automatically and cannot be changed by the user -- for + * {@link #split resizable regions}, see {@link Ext.layout.BorderLayout.SplitRegion}.
+ * @constructor + * Create a new Region. + * @param {Layout} layout The {@link Ext.layout.BorderLayout BorderLayout} instance that is managing this Region. + * @param {Object} config The configuration options + * @param {String} position The region position. Valid values are: north, south, + * east, west and center. Every {@link Ext.layout.BorderLayout BorderLayout} + * must have a center region for the primary content -- all other regions are optional. + */ +Ext.layout.BorderLayout.Region = function(layout, config, pos){ + Ext.apply(this, config); + this.layout = layout; + this.position = pos; + this.state = {}; + if(typeof this.margins == 'string'){ + this.margins = this.layout.parseMargins(this.margins); + } + this.margins = Ext.applyIf(this.margins || {}, this.defaultMargins); + if(this.collapsible){ + if(typeof this.cmargins == 'string'){ + this.cmargins = this.layout.parseMargins(this.cmargins); + } + if(this.collapseMode == 'mini' && !this.cmargins){ + this.cmargins = {left:0,top:0,right:0,bottom:0}; + }else{ + this.cmargins = Ext.applyIf(this.cmargins || {}, + pos == 'north' || pos == 'south' ? this.defaultNSCMargins : this.defaultEWCMargins); + } + } +}; + +Ext.layout.BorderLayout.Region.prototype = { + /** + * @cfg {Boolean} animFloat + * When a collapsed region's bar is clicked, the region's panel will be displayed as a floated + * panel that will close again once the user mouses out of that panel (or clicks out if + * {@link #autoHide} = false). Setting {@link #animFloat} = false will + * prevent the open and close of these floated panels from being animated (defaults to true). + */ + /** + * @cfg {Boolean} autoHide + * When a collapsed region's bar is clicked, the region's panel will be displayed as a floated + * panel. If autoHide = true, the panel will automatically hide after the user mouses + * out of the panel. If autoHide = false, the panel will continue to display until the + * user clicks outside of the panel (defaults to true). + */ + /** + * @cfg {String} collapseMode + * collapseMode supports two configuration values:Note: if a collapsible region does not have a title bar, then set collapseMode = + * 'mini' and {@link #split} = true in order for the region to be {@link #collapsible} + * by the user as the expand/collapse tool button (that would go in the title bar) will not be rendered.
+ *See also {@link #cmargins}.
+ */ + /** + * @cfg {Object} margins + * An object containing margins to apply to the region when in the expanded state in the + * format:
+{
+ top: (top margin),
+ right: (right margin),
+ bottom: (bottom margin),
+ left: (left margin)
+}May also be a string containing space-separated, numeric margin values. The order of the + * sides associated with each value matches the way CSS processes margin values:
+ *Defaults to:
+ * {top:0, right:0, bottom:0, left:0}
+ *
+{
+ top: (top margin),
+ right: (right margin),
+ bottom: (bottom margin),
+ left: (left margin)
+}May also be a string containing space-separated, numeric margin values. The order of the + * sides associated with each value matches the way CSS processes margin values.
+ *true to allow the user to collapse this region (defaults to false). If + * true, an expand/collapse tool button will automatically be rendered into the title + * bar of the region, otherwise the button will not be shown.
+ *Note: that a title bar is required to display the collapse/expand toggle button -- if + * no title is specified for the region's panel, the region will only be collapsible if + * {@link #collapseMode} = 'mini' and {@link #split} = true. + */ + collapsible : false, + /** + * @cfg {Boolean} split + *
true to create a {@link Ext.layout.BorderLayout.SplitRegion SplitRegion} and + * display a 5px wide {@link Ext.SplitBar} between this region and its neighbor, allowing the user to + * resize the regions dynamically. Defaults to false creating a + * {@link Ext.layout.BorderLayout.Region Region}.
Notes:
The minimum allowable width in pixels for this region (defaults to 50). + * maxWidth may also be specified.
Note: setting the {@link Ext.SplitBar#minSize minSize} / + * {@link Ext.SplitBar#maxSize maxSize} supersedes any specified + * minWidth / maxWidth.
+ */ + minWidth:50, + /** + * @cfg {Number} minHeight + * The minimum allowable height in pixels for this region (defaults to 50) + * maxHeight may also be specified.Note: setting the {@link Ext.SplitBar#minSize minSize} / + * {@link Ext.SplitBar#maxSize maxSize} supersedes any specified + * minHeight / maxHeight.
+ */ + minHeight:50, + + // private + defaultMargins : {left:0,top:0,right:0,bottom:0}, + // private + defaultNSCMargins : {left:5,top:5,right:5,bottom:5}, + // private + defaultEWCMargins : {left:5,top:0,right:5,bottom:0}, + floatingZIndex: 100, + + /** + * True if this region is collapsed. Read-only. + * @type Boolean + * @property + */ + isCollapsed : false, + + /** + * This region's panel. Read-only. + * @type Ext.Panel + * @property panel + */ + /** + * This region's layout. Read-only. + * @type Layout + * @property layout + */ + /** + * This region's layout position (north, south, east, west or center). Read-only. + * @type String + * @property position + */ + + // private + render : function(ct, p){ + this.panel = p; + p.el.enableDisplayMode(); + this.targetEl = ct; + this.el = p.el; + + var gs = p.getState, ps = this.position; + p.getState = function(){ + return Ext.apply(gs.call(p) || {}, this.state); + }.createDelegate(this); + + if(ps != 'center'){ + p.allowQueuedExpand = false; + p.on({ + beforecollapse: this.beforeCollapse, + collapse: this.onCollapse, + beforeexpand: this.beforeExpand, + expand: this.onExpand, + hide: this.onHide, + show: this.onShow, + scope: this + }); + if(this.collapsible || this.floatable){ + p.collapseEl = 'el'; + p.slideAnchor = this.getSlideAnchor(); + } + if(p.tools && p.tools.toggle){ + p.tools.toggle.addClass('x-tool-collapse-'+ps); + p.tools.toggle.addClassOnOver('x-tool-collapse-'+ps+'-over'); + } + } + }, + + // private + getCollapsedEl : function(){ + if(!this.collapsedEl){ + if(!this.toolTemplate){ + var tt = new Ext.Template( + 'This is a specialized type of {@link Ext.layout.BorderLayout.Region BorderLayout region} that + * has a built-in {@link Ext.SplitBar} for user resizing of regions. The movement of the split bar + * is configurable to move either {@link #tickSize smooth or incrementally}.
+ * @constructor + * Create a new SplitRegion. + * @param {Layout} layout The {@link Ext.layout.BorderLayout BorderLayout} instance that is managing this Region. + * @param {Object} config The configuration options + * @param {String} position The region position. Valid values are: north, south, east, west and center. Every + * BorderLayout must have a center region for the primary content -- all other regions are optional. + */ +Ext.layout.BorderLayout.SplitRegion = function(layout, config, pos){ + Ext.layout.BorderLayout.SplitRegion.superclass.constructor.call(this, layout, config, pos); + // prevent switch + this.applyLayout = this.applyFns[pos]; +}; + +Ext.extend(Ext.layout.BorderLayout.SplitRegion, Ext.layout.BorderLayout.Region, { + /** + * @cfg {Number} tickSize + * The increment, in pixels by which to move this Region's {@link Ext.SplitBar SplitBar}. + * By default, the {@link Ext.SplitBar SplitBar} moves smoothly. + */ + /** + * @cfg {String} splitTip + * The tooltip to display when the user hovers over a + * {@link Ext.layout.BorderLayout.Region#collapsible non-collapsible} region's split bar + * (defaults to "Drag to resize."). Only applies if + * {@link #useSplitTips} = true. + */ + splitTip : "Drag to resize.", + /** + * @cfg {String} collapsibleSplitTip + * The tooltip to display when the user hovers over a + * {@link Ext.layout.BorderLayout.Region#collapsible collapsible} region's split bar + * (defaults to "Drag to resize. Double click to hide."). Only applies if + * {@link #useSplitTips} = true. + */ + collapsibleSplitTip : "Drag to resize. Double click to hide.", + /** + * @cfg {Boolean} useSplitTips + * true to display a tooltip when the user hovers over a region's split bar + * (defaults to false). The tooltip text will be the value of either + * {@link #splitTip} or {@link #collapsibleSplitTip} as appropriate. + */ + useSplitTips : false, + + // private + splitSettings : { + north : { + orientation: Ext.SplitBar.VERTICAL, + placement: Ext.SplitBar.TOP, + maxFn : 'getVMaxSize', + minProp: 'minHeight', + maxProp: 'maxHeight' + }, + south : { + orientation: Ext.SplitBar.VERTICAL, + placement: Ext.SplitBar.BOTTOM, + maxFn : 'getVMaxSize', + minProp: 'minHeight', + maxProp: 'maxHeight' + }, + east : { + orientation: Ext.SplitBar.HORIZONTAL, + placement: Ext.SplitBar.RIGHT, + maxFn : 'getHMaxSize', + minProp: 'minWidth', + maxProp: 'maxWidth' + }, + west : { + orientation: Ext.SplitBar.HORIZONTAL, + placement: Ext.SplitBar.LEFT, + maxFn : 'getHMaxSize', + minProp: 'minWidth', + maxProp: 'maxWidth' + } + }, + + // private + applyFns : { + west : function(box){ + if(this.isCollapsed){ + return this.applyLayoutCollapsed(box); + } + var sd = this.splitEl.dom, s = sd.style; + this.panel.setPosition(box.x, box.y); + var sw = sd.offsetWidth; + s.left = (box.x+box.width-sw)+'px'; + s.top = (box.y)+'px'; + s.height = Math.max(0, box.height)+'px'; + this.panel.setSize(box.width-sw, box.height); + }, + east : function(box){ + if(this.isCollapsed){ + return this.applyLayoutCollapsed(box); + } + var sd = this.splitEl.dom, s = sd.style; + var sw = sd.offsetWidth; + this.panel.setPosition(box.x+sw, box.y); + s.left = (box.x)+'px'; + s.top = (box.y)+'px'; + s.height = Math.max(0, box.height)+'px'; + this.panel.setSize(box.width-sw, box.height); + }, + north : function(box){ + if(this.isCollapsed){ + return this.applyLayoutCollapsed(box); + } + var sd = this.splitEl.dom, s = sd.style; + var sh = sd.offsetHeight; + this.panel.setPosition(box.x, box.y); + s.left = (box.x)+'px'; + s.top = (box.y+box.height-sh)+'px'; + s.width = Math.max(0, box.width)+'px'; + this.panel.setSize(box.width, box.height-sh); + }, + south : function(box){ + if(this.isCollapsed){ + return this.applyLayoutCollapsed(box); + } + var sd = this.splitEl.dom, s = sd.style; + var sh = sd.offsetHeight; + this.panel.setPosition(box.x, box.y+sh); + s.left = (box.x)+'px'; + s.top = (box.y)+'px'; + s.width = Math.max(0, box.width)+'px'; + this.panel.setSize(box.width, box.height-sh); + } + }, + + // private + render : function(ct, p){ + Ext.layout.BorderLayout.SplitRegion.superclass.render.call(this, ct, p); + + var ps = this.position; + + this.splitEl = ct.createChild({ + cls: "x-layout-split x-layout-split-"+ps, html: " ", + id: this.panel.id + '-xsplit' + }); + + if(this.collapseMode == 'mini'){ + this.miniSplitEl = this.splitEl.createChild({ + cls: "x-layout-mini x-layout-mini-"+ps, html: " " + }); + this.miniSplitEl.addClassOnOver('x-layout-mini-over'); + this.miniSplitEl.on('click', this.onCollapseClick, this, {stopEvent:true}); + } + + var s = this.splitSettings[ps]; + + this.split = new Ext.SplitBar(this.splitEl.dom, p.el, s.orientation); + this.split.tickSize = this.tickSize; + this.split.placement = s.placement; + this.split.getMaximumSize = this[s.maxFn].createDelegate(this); + this.split.minSize = this.minSize || this[s.minProp]; + this.split.on("beforeapply", this.onSplitMove, this); + this.split.useShim = this.useShim === true; + this.maxSize = this.maxSize || this[s.maxProp]; + + if(p.hidden){ + this.splitEl.hide(); + } + + if(this.useSplitTips){ + this.splitEl.dom.title = this.collapsible ? this.collapsibleSplitTip : this.splitTip; + } + if(this.collapsible){ + this.splitEl.on("dblclick", this.onCollapseClick, this); + } + }, + + //docs inherit from superclass + getSize : function(){ + if(this.isCollapsed){ + return this.collapsedEl.getSize(); + } + var s = this.panel.getSize(); + if(this.position == 'north' || this.position == 'south'){ + s.height += this.splitEl.dom.offsetHeight; + }else{ + s.width += this.splitEl.dom.offsetWidth; + } + return s; + }, + + // private + getHMaxSize : function(){ + var cmax = this.maxSize || 10000; + var center = this.layout.center; + return Math.min(cmax, (this.el.getWidth()+center.el.getWidth())-center.getMinWidth()); + }, + + // private + getVMaxSize : function(){ + var cmax = this.maxSize || 10000; + var center = this.layout.center; + return Math.min(cmax, (this.el.getHeight()+center.el.getHeight())-center.getMinHeight()); + }, + + // private + onSplitMove : function(split, newSize){ + var s = this.panel.getSize(); + this.lastSplitSize = newSize; + if(this.position == 'north' || this.position == 'south'){ + this.panel.setSize(s.width, newSize); + this.state.height = newSize; + }else{ + this.panel.setSize(newSize, s.height); + this.state.width = newSize; + } + this.layout.layout(); + this.panel.saveState(); + return false; + }, + + /** + * Returns a reference to the split bar in use by this region. + * @return {Ext.SplitBar} The split bar + */ + getSplitBar : function(){ + return this.split; + }, + + // inherit docs + destroy : function() { + Ext.destroy( + this.miniSplitEl, + this.split, + this.splitEl + ); + } +}); + +Ext.Container.LAYOUTS['border'] = Ext.layout.BorderLayout;/** + * @class Ext.layout.FormLayout + * @extends Ext.layout.AnchorLayout + *This layout manager is specifically designed for rendering and managing child Components of + * {@link Ext.form.FormPanel forms}. It is responsible for rendering the labels of + * {@link Ext.form.Field Field}s.
+ * + *This layout manager is used when a Container is configured with the layout:'form' + * {@link Ext.Container#layout layout} config option, and should generally not need to be created directly + * via the new keyword. See {@link Ext.Container#layout} for additional details.
+ * + *In an application, it will usually be preferrable to use a {@link Ext.form.FormPanel FormPanel} + * (which is configured with FormLayout as its layout class by default) since it also provides built-in + * functionality for {@link Ext.form.BasicForm#doAction loading, validating and submitting} the form.
+ * + *A {@link Ext.Container Container} using the FormLayout layout manager (e.g. + * {@link Ext.form.FormPanel} or specifying layout:'form') can also accept the following + * layout-specific config properties:
Any Component (including Fields) managed by FormLayout accepts the following as a config option: + *
Any Component managed by FormLayout may be rendered as a form field (with an associated label) by + * configuring it with a non-null {@link Ext.Component#fieldLabel fieldLabel}. Components configured + * in this way may be configured with the following options which affect the way the FormLayout renders them: + *
Example usage:
+ *
+// Required if showing validation messages
+Ext.QuickTips.init();
+
+// While you can create a basic Panel with layout:'form', practically
+// you should usually use a FormPanel to also get its form functionality
+// since it already creates a FormLayout internally.
+var form = new Ext.form.FormPanel({
+ title: 'Form Layout',
+ bodyStyle: 'padding:15px',
+ width: 350,
+ defaultType: 'textfield',
+ defaults: {
+ // applied to each contained item
+ width: 230,
+ msgTarget: 'side'
+ },
+ items: [{
+ fieldLabel: 'First Name',
+ name: 'first',
+ allowBlank: false,
+ {@link Ext.Component#labelSeparator labelSeparator}: ':' // override labelSeparator layout config
+ },{
+ fieldLabel: 'Last Name',
+ name: 'last'
+ },{
+ fieldLabel: 'Email',
+ name: 'email',
+ vtype:'email'
+ }, {
+ xtype: 'textarea',
+ hideLabel: true, // override hideLabels layout config
+ name: 'msg',
+ anchor: '100% -53'
+ }
+ ],
+ buttons: [
+ {text: 'Save'},
+ {text: 'Cancel'}
+ ],
+ layoutConfig: {
+ {@link #labelSeparator}: '~' // superseded by assignment below
+ },
+ // config options applicable to container when layout='form':
+ hideLabels: false,
+ labelAlign: 'left', // or 'right' or 'top'
+ {@link Ext.form.FormPanel#labelSeparator labelSeparator}: '>>', // takes precedence over layoutConfig value
+ labelWidth: 65, // defaults to 100
+ labelPad: 8 // defaults to 5, must specify labelWidth to be honored
+});
+
+new Ext.Template(
+ '<div class="x-form-item {itemCls}" tabIndex="-1">',
+ '<label for="{id}" style="{labelStyle}" class="x-form-item-label">{label}{labelSeparator}</label>',
+ '<div class="x-form-element" id="x-form-el-{id}" style="{elementStyle}">',
+ '</div><div class="{clearCls}"></div>',
+ '</div>'
+);
+This may be specified to produce a different DOM structure when rendering form Fields.
+ *A description of the properties within the template follows:
Also see {@link #getTemplateArgs}
+ */ + + // private + renderItem : function(c, position, target){ + if(c && !c.rendered && (c.isFormField || c.fieldLabel) && c.inputType != 'hidden'){ + var args = this.getTemplateArgs(c); + if(typeof position == 'number'){ + position = target.dom.childNodes[position] || null; + } + if(position){ + this.fieldTpl.insertBefore(position, args); + }else{ + this.fieldTpl.append(target, args); + } + c.render('x-form-el-'+c.id); + }else { + Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments); + } + }, + + /** + *Provides template arguments for rendering the fully wrapped, labeled and styled form Field.
+ *This method returns an object hash containing properties used by the layout's {@link #fieldTpl} + * to create a correctly wrapped, labeled and styled form Field. This may be overriden to + * create custom layouts. The properties which must be returned are:
This is a layout that contains multiple panels in an expandable accordion style such that only + * one panel can be open at any given time. Each panel has built-in support for expanding and collapsing. + *
This class is intended to be extended or created via the {@link Ext.Container#layout layout} + * configuration property. See {@link Ext.Container#layout} for additional details.
+ *Example usage:
+ *
+var accordion = new Ext.Panel({
+ title: 'Accordion Layout',
+ layout:'accordion',
+ defaults: {
+ // applied to each contained panel
+ bodyStyle: 'padding:15px'
+ },
+ layoutConfig: {
+ // layout-specific configs go here
+ titleCollapse: false,
+ animate: true,
+ activeOnTop: true
+ },
+ items: [{
+ title: 'Panel 1',
+ html: '<p>Panel content!</p>'
+ },{
+ title: 'Panel 2',
+ html: '<p>Panel content!</p>'
+ },{
+ title: 'Panel 3',
+ html: '<p>Panel content!</p>'
+ }]
+});
+This layout allows you to easily render content into an HTML table. The total number of columns can be + * specified, and rowspan and colspan can be used to create complex layouts within the table. + * This class is intended to be extended or created via the layout:'table' {@link Ext.Container#layout} config, + * and should generally not need to be created directly via the new keyword.
+ *Note that when creating a layout via config, the layout-specific config properties must be passed in via + * the {@link Ext.Container#layoutConfig} object which will then be applied internally to the layout. In the + * case of TableLayout, the only valid layout config property is {@link #columns}. However, the items added to a + * TableLayout can supply the following table-specific config properties:
+ *The basic concept of building up a TableLayout is conceptually very similar to building up a standard + * HTML table. You simply add each panel (or "cell") that you want to include along with any span attributes + * specified as the special config properties of rowspan and colspan which work exactly like their HTML counterparts. + * Rather than explicitly creating and nesting rows and columns as you would in HTML, you simply specify the + * total column count in the layoutConfig and start adding panels in their natural order from left to right, + * top to bottom. The layout will automatically figure out, based on the column count, rowspans and colspans, + * how to position each panel within the table. Just like with HTML tables, your rowspans and colspans must add + * up correctly in your overall layout or you'll end up with missing and/or extra cells! Example usage:
+ *
+// This code will generate a layout table that is 3 columns by 2 rows
+// with some spanning included. The basic layout will be:
+// +--------+-----------------+
+// | A | B |
+// | |--------+--------|
+// | | C | D |
+// +--------+--------+--------+
+var table = new Ext.Panel({
+ title: 'Table Layout',
+ layout:'table',
+ defaults: {
+ // applied to each contained panel
+ bodyStyle:'padding:20px'
+ },
+ layoutConfig: {
+ // The total column count must be specified here
+ columns: 3
+ },
+ items: [{
+ html: '<p>Cell A content</p>',
+ rowspan: 2
+ },{
+ html: '<p>Cell B content</p>',
+ colspan: 2
+ },{
+ html: '<p>Cell C content</p>',
+ cellCls: 'highlight'
+ },{
+ html: '<p>Cell D content</p>'
+ }]
+});
+An object containing properties which are added to the {@link Ext.DomHelper DomHelper} specification + * used to create the layout's <table> element. Example:
+{
+ xtype: 'panel',
+ layout: 'table',
+ layoutConfig: {
+ tableAttrs: {
+ style: {
+ width: '100%'
+ }
+ },
+ columns: 3
+ }
+}This is a layout that inherits the anchoring of {@link Ext.layout.AnchorLayout} and adds the + * ability for x/y positioning using the standard x and y component config options.
+ *This class is intended to be extended or created via the {@link Ext.Container#layout layout} + * configuration property. See {@link Ext.Container#layout} for additional details.
+ *Example usage:
+ *
+var form = new Ext.form.FormPanel({
+ title: 'Absolute Layout',
+ layout:'absolute',
+ layoutConfig: {
+ // layout-specific configs go here
+ extraCls: 'x-abs-layout-item',
+ },
+ baseCls: 'x-plain',
+ url:'save-form.php',
+ defaultType: 'textfield',
+ items: [{
+ x: 0,
+ y: 5,
+ xtype:'label',
+ text: 'Send To:'
+ },{
+ x: 60,
+ y: 0,
+ name: 'to',
+ anchor:'100%' // anchor width by percentage
+ },{
+ x: 0,
+ y: 35,
+ xtype:'label',
+ text: 'Subject:'
+ },{
+ x: 60,
+ y: 30,
+ name: 'subject',
+ anchor: '100%' // anchor width by percentage
+ },{
+ x:0,
+ y: 60,
+ xtype: 'textarea',
+ name: 'msg',
+ anchor: '100% 100%' // anchor width and height
+ }]
+});
+Base Class for HBoxLayout and VBoxLayout Classes. Generally it should not need to be used directly.
+ */ +Ext.layout.BoxLayout = Ext.extend(Ext.layout.ContainerLayout, { + /** + * @cfg {Object} defaultMargins + *If the individual contained items do not have a margins + * property specified, the default margins from this property will be + * applied to each item.
+ *This property may be specified as an object containing margins + * to apply in the format:
+{
+ top: (top margin),
+ right: (right margin),
+ bottom: (bottom margin),
+ left: (left margin)
+}This property may also be specified as a string containing + * space-separated, numeric margin values. The order of the sides associated + * with each value matches the way CSS processes margin values:
+ *Defaults to:
+ * {top:0, right:0, bottom:0, left:0}
+ * A specialized container representing the viewable application area (the browser viewport).
+ *The Viewport renders itself to the document body, and automatically sizes itself to the size of + * the browser viewport and manages window resizing. There may only be one Viewport created + * in a page. Inner layouts are available by virtue of the fact that all {@link Ext.Panel Panel}s + * added to the Viewport, either through its {@link #items}, or through the items, or the {@link #add} + * method of any of its child Panels may themselves have a layout.
+ *The Viewport does not provide scrolling, so child Panels within the Viewport should provide + * for scrolling if needed using the {@link #autoScroll} config.
+ *An example showing a classic application border layout:
+new Ext.Viewport({
+ layout: 'border',
+ items: [{
+ region: 'north',
+ html: '<h1 class="x-panel-header">Page Title</h1>',
+ autoHeight: true,
+ border: false,
+ margins: '0 0 5 0'
+ }, {
+ region: 'west',
+ collapsible: true,
+ title: 'Navigation',
+ width: 200
+ // the west region might typically utilize a {@link Ext.tree.TreePanel TreePanel} or a Panel with {@link Ext.layout.AccordionLayout Accordion layout}
+ }, {
+ region: 'south',
+ title: 'Title for Panel',
+ collapsible: true,
+ html: 'Information goes here',
+ split: true,
+ height: 100,
+ minHeight: 100
+ }, {
+ region: 'east',
+ title: 'Title for the Grid Panel',
+ collapsible: true,
+ split: true,
+ width: 200,
+ xtype: 'grid',
+ // remaining grid configuration not shown ...
+ // notice that the GridPanel is added directly as the region
+ // it is not "overnested" inside another Panel
+ }, {
+ region: 'center',
+ xtype: 'tabpanel', // TabPanel itself has no title
+ items: {
+ title: 'Default Tab',
+ html: 'The first tab\'s content. Others may be added dynamically'
+ }
+ }]
+});
+Panel is a container that has specific functionality and structural components that make + * it the perfect building block for application-oriented user interfaces.
+ *Panels are, by virtue of their inheritance from {@link Ext.Container}, capable + * of being configured with a {@link Ext.Container#layout layout}, and containing child Components.
+ *When either specifying child {@link Ext.Component#items items} of a Panel, or dynamically {@link Ext.Container#add adding} Components + * to a Panel, remember to consider how you wish the Panel to arrange those child elements, and whether + * those child elements need to be sized using one of Ext's built-in {@link Ext.Container#layout layout} schemes. By + * default, Panels use the {@link Ext.layout.ContainerLayout ContainerLayout} scheme. This simply renders + * child components, appending them one after the other inside the Container, and does not apply any sizing + * at all.
+ *A Panel may also contain {@link #bbar bottom} and {@link #tbar top} toolbars, along with separate + * {@link #header}, {@link #footer} and {@link #body} sections (see {@link #frame} for additional + * information).
+ *Panel also provides built-in {@link #collapsible expandable and collapsible behavior}, along with + * a variety of {@link #tools prebuilt tool buttons} that can be wired up to provide other customized + * behavior. Panels can be easily dropped into any {@link Ext.Container Container} or layout, and the + * layout and rendering pipeline is {@link Ext.Container#add completely managed by the framework}.
+ * @constructor + * @param {Object} config The config object + * @xtype panel + */ +Ext.Panel = Ext.extend(Ext.Container, { + /** + * The Panel's header {@link Ext.Element Element}. Read-only. + *This Element is used to house the {@link #title} and {@link #tools}
+ *Note: see the Note for {@link Ext.Component#el el} also.
+ * @type Ext.Element + * @property header + */ + /** + * The Panel's body {@link Ext.Element Element} which may be used to contain HTML content. + * The content may be specified in the {@link #html} config, or it may be loaded using the + * {@link autoLoad} config, or through the Panel's {@link #getUpdater Updater}. Read-only. + *If this is used to load visible HTML elements in either way, then + * the Panel may not be used as a Layout for hosting nested Panels.
+ *If this Panel is intended to be used as the host of a Layout (See {@link #layout}
+ * then the body Element must not be loaded or changed - it is under the control
+ * of the Panel's Layout.
+ *
Note: see the Note for {@link Ext.Component#el el} also.
+ * @type Ext.Element + * @property body + */ + /** + * The Panel's bwrap {@link Ext.Element Element} used to contain other Panel elements + * (tbar, body, bbar, footer). See {@link #bodyCfg}. Read-only. + * @type Ext.Element + * @property bwrap + */ + /** + * True if this panel is collapsed. Read-only. + * @type Boolean + * @property collapsed + */ + /** + * @cfg {Object} bodyCfg + *A {@link Ext.DomHelper DomHelper} element specification object may be specified for any + * Panel Element.
+ *By default, the Default element in the table below will be used for the html markup to + * create a child element with the commensurate Default class name (baseCls will be + * replaced by {@link #baseCls}):
+ *
+ * Panel Default Default Custom Additional Additional
+ * Element element class element class style
+ * ======== ========================== ========= ============== ===========
+ * {@link #header} div {@link #baseCls}+'-header' {@link #headerCfg} headerCssClass headerStyle
+ * {@link #bwrap} div {@link #baseCls}+'-bwrap' {@link #bwrapCfg} bwrapCssClass bwrapStyle
+ * + tbar div {@link #baseCls}+'-tbar' {@link #tbarCfg} tbarCssClass tbarStyle
+ * + {@link #body} div {@link #baseCls}+'-body' {@link #bodyCfg} {@link #bodyCssClass} {@link #bodyStyle}
+ * + bbar div {@link #baseCls}+'-bbar' {@link #bbarCfg} bbarCssClass bbarStyle
+ * + {@link #footer} div {@link #baseCls}+'-footer' {@link #footerCfg} footerCssClass footerStyle
+ *
+ * Configuring a Custom element may be used, for example, to force the {@link #body} Element + * to use a different form of markup than is created by default. An example of this might be + * to {@link Ext.Element#createChild create a child} Panel containing a custom content, such as + * a header, or forcing centering of all Panel content by having the body be a <center> + * element:
+ *
+new Ext.Panel({
+ title: 'Message Title',
+ renderTo: Ext.getBody(),
+ width: 200, height: 130,
+ bodyCfg: {
+ tag: 'center',
+ cls: 'x-panel-body', // Default class not applied if Custom element specified
+ html: 'Message'
+ },
+ footerCfg: {
+ tag: 'h2',
+ cls: 'x-panel-footer' // same as the Default class
+ html: 'footer html'
+ },
+ footerCssClass: 'custom-footer', // additional css class, see {@link Ext.element#addClass addClass}
+ footerStyle: 'background-color:red' // see {@link #bodyStyle}
+});
+ * The example above also explicitly creates a {@link #footer} with custom markup and + * styling applied.
+ */ + /** + * @cfg {Object} headerCfg + *A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure + * of this Panel's {@link #header} Element. See {@link #bodyCfg} also.
+ */ + /** + * @cfg {Object} bwrapCfg + *A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure + * of this Panel's {@link #bwrap} Element. See {@link #bodyCfg} also.
+ */ + /** + * @cfg {Object} tbarCfg + *A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure + * of this Panel's {@link #tbar} Element. See {@link #bodyCfg} also.
+ */ + /** + * @cfg {Object} bbarCfg + *A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure + * of this Panel's {@link #bbar} Element. See {@link #bodyCfg} also.
+ */ + /** + * @cfg {Object} footerCfg + *A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure + * of this Panel's {@link #footer} Element. See {@link #bodyCfg} also.
+ */ + /** + * @cfg {Boolean} closable + * Panels themselves do not directly support being closed, but some Panel subclasses do (like + * {@link Ext.Window}) or a Panel Class within an {@link Ext.TabPanel}. Specify true + * to enable closing in such situations. Defaults to false. + */ + /** + * The Panel's footer {@link Ext.Element Element}. Read-only. + *This Element is used to house the Panel's {@link #buttons} or {@link #fbar}.
+ *Note: see the Note for {@link Ext.Component#el el} also.
+ * @type Ext.Element + * @property footer + */ + /** + * @cfg {Mixed} applyTo + *The id of the node, a DOM node or an existing Element corresponding to a DIV that is already present in + * the document that specifies some panel-specific structural markup. When applyTo is used, + * constituent parts of the panel can be specified by CSS class name within the main element, and the panel + * will automatically create those components from that markup. Any required components not specified in the + * markup will be autogenerated if necessary.
+ *The following class names are supported (baseCls will be replaced by {@link #baseCls}):
+ *Using this config, a call to render() is not required. If applyTo is specified, any value passed for + * {@link #renderTo} will be ignored and the target element's parent node will automatically be used as the + * panel's container.
+ */ + /** + * @cfg {Object/Array} tbar + *The top toolbar of the panel. This can be a {@link Ext.Toolbar} object, a toolbar config, or an array of + * buttons/button configs to be added to the toolbar. Note that this is not available as a property after render. + * To access the top toolbar after render, use {@link #getTopToolbar}.
+ *Note: Although a Toolbar may contain Field components, these will not be updated by a load + * of an ancestor FormPanel. A Panel's toolbars are not part of the standard Container->Component hierarchy, and + * so are not scanned to collect form items. However, the values will be submitted because form + * submission parameters are collected from the DOM tree.
+ */ + /** + * @cfg {Object/Array} bbar + *The bottom toolbar of the panel. This can be a {@link Ext.Toolbar} object, a toolbar config, or an array of + * buttons/button configs to be added to the toolbar. Note that this is not available as a property after render. + * To access the bottom toolbar after render, use {@link #getBottomToolbar}.
+ *Note: Although a Toolbar may contain Field components, these will not be updated by a load + * of an ancestor FormPanel. A Panel's toolbars are not part of the standard Container->Component hierarchy, and + * so are not scanned to collect form items. However, the values will be submitted because form + * submission parameters are collected from the DOM tree.
+ */ + /** @cfg {Object/Array} fbar + *A {@link Ext.Toolbar Toolbar} object, a Toolbar config, or an array of + * {@link Ext.Button Button}s/{@link Ext.Button Button} configs, describing a {@link Ext.Toolbar Toolbar} to be rendered into this Panel's footer element.
+ *After render, the fbar property will be an {@link Ext.Toolbar Toolbar} instance.
If {@link #buttons} are specified, they will supersede the fbar configuration property.
+ * The Panel's {@link #buttonAlign} configuration affects the layout of these items, for example: + *
+var w = new Ext.Window({
+ height: 250,
+ width: 500,
+ bbar: new Ext.Toolbar({
+ items: [{
+ text: 'bbar Left'
+ },'->',{
+ text: 'bbar Right'
+ }]
+ }),
+ {@link #buttonAlign}: 'left', // anything but 'center' or 'right' and you can use "-", and "->"
+ // to control the alignment of fbar items
+ fbar: [{
+ text: 'fbar Left'
+ },'->',{
+ text: 'fbar Right'
+ }]
+}).show();
+ * Note: Although a Toolbar may contain Field components, these will not be updated by a load + * of an ancestor FormPanel. A Panel's toolbars are not part of the standard Container->Component hierarchy, and + * so are not scanned to collect form items. However, the values will be submitted because form + * submission parameters are collected from the DOM tree.
+ */ + /** + * @cfg {Boolean} header + * true to create the Panel's header element explicitly, false to skip creating + * it. If a {@link #title} is set the header will be created automatically, otherwise it will not. + * If a {@link #title} is set but header is explicitly set to false, the header + * will not be rendered. + */ + /** + * @cfg {Boolean} footer + * true to create the footer element explicitly, false to skip creating it. The footer + * will be created automatically if {@link #buttons} or a {@link #fbar} have + * been configured. See {@link #bodyCfg} for an example. + */ + /** + * @cfg {String} title + * The title text to be used as innerHTML (html tags are accepted) to display in the panel + * {@link #header} (defaults to ''). When a title is specified the + * {@link #header} element will automatically be created and displayed unless + * {@link #header} is explicitly set to false. If you do not want to specify a + * title at config time, but you may want one later, you must either specify a non-empty + * title (a blank space ' ' will do) or header:true so that the container + * element will get created. + */ + /** + * @cfg {Array} buttons + * buttons will be used as {@link Ext.Container#items items} for the toolbar in + * the footer ({@link #fbar}). Typically the value of this configuration property will be + * an array of {@link Ext.Button}s or {@link Ext.Button} configuration objects. + * If an item is configured with minWidth or the Panel is configured with minButtonWidth, + * that width will be applied to the item. + */ + /** + * @cfg {Object/String/Function} autoLoad + * A valid url spec according to the Updater {@link Ext.Updater#update} method. + * If autoLoad is not null, the panel will attempt to load its contents + * immediately upon render.+ * The URL will become the default URL for this panel's {@link #body} element, + * so it may be {@link Ext.Element#refresh refresh}ed at any time.
+ */ + /** + * @cfg {Boolean} frame + * false by default to render with plain 1px square borders. true to render with + * 9 elements, complete with custom rounded corners (also see {@link Ext.Element#boxWrap}). + *The template generated for each condition is depicted below:
+ *
+// frame = false
+<div id="developer-specified-id-goes-here" class="x-panel">
+
+ <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:false)</span></div>
+
+ <div class="x-panel-bwrap">
+ <div class="x-panel-body"><p>html value goes here</p></div>
+ </div>
+</div>
+
+// frame = true (create 9 elements)
+<div id="developer-specified-id-goes-here" class="x-panel">
+ <div class="x-panel-tl"><div class="x-panel-tr"><div class="x-panel-tc">
+ <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:true)</span></div>
+ </div></div></div>
+
+ <div class="x-panel-bwrap">
+ <div class="x-panel-ml"><div class="x-panel-mr"><div class="x-panel-mc">
+ <div class="x-panel-body"><p>html value goes here</p></div>
+ </div></div></div>
+
+ <div class="x-panel-bl"><div class="x-panel-br"><div class="x-panel-bc"/>
+ </div></div></div>
+</div>
+ * An example of specifying a custom icon class would be something like: + *
+// specify the property in the config for the class:
+ ...
+ iconCls: 'my-icon'
+
+// css class that specifies background image to be used as the icon image:
+.my-icon { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; }
+Each tool config may contain the following properties: + *
Note that, apart from the toggle tool which is provided when a panel is collapsible, these + * tools only provide the visual button. Any required functionality must be provided by adding + * handlers that implement the necessary behavior.
+ *Example usage:
+ *
+tools:[{
+ id:'refresh',
+ qtip: 'Refresh form Data',
+ // hidden:true,
+ handler: function(event, toolEl, panel){
+ // refresh logic
+ }
+},
+{
+ id:'help',
+ qtip: 'Get Help',
+ handler: function(event, toolEl, panel){
+ // whatever
+ }
+}]
+For the custom id of 'help' define two relevant css classes with a link to + * a 15x15 image:
+ *
+.x-tool-help {background-image: url(images/help.png);}
+.x-tool-help-over {background-image: url(images/help_over.png);}
+// if using an image sprite:
+.x-tool-help {background-image: url(images/help.png) no-repeat 0 0;}
+.x-tool-help-over {background-position:-15px 0;}
+A Template used to create {@link #tools} in the {@link #header} Element. Defaults to:
+new Ext.Template('<div class="x-tool x-tool-{id}"> </div>')This may may be overridden to provide a custom DOM structure for tools based upon a more + * complex XTemplate. The template's data is a single tool configuration object (Not the entire Array) + * as specified in {@link #tools}. In the following example an <a> tag is used to provide a + * visual indication when hovering over the tool:
+var win = new Ext.Window({
+ tools: [{
+ id: 'download',
+ href: '/MyPdfDoc.pdf'
+ }],
+ toolTemplate: new Ext.XTemplate(
+ '<tpl if="id==\'download\'">',
+ '<a class="x-tool x-tool-pdf" href="{href}"></a>',
+ '</tpl>',
+ '<tpl if="id!=\'download\'">',
+ '<div class="x-tool x-tool-{id}"> </div>',
+ '</tpl>'
+ ),
+ width:500,
+ height:300,
+ closeAction:'hide'
+});Note that the CSS class "x-tool-pdf" should have an associated style rule which provides an + * appropriate background image, something like:
+
+ a.x-tool-pdf {background-image: url(../shared/extjs/images/pdf.gif)!important;}
+ {@link #collapsible} == true,
+ * false to display it (defaults to false).
+ */
+ /**
+ * @cfg {Boolean} titleCollapse
+ * true to allow expanding and collapsing the panel (when {@link #collapsible} = true)
+ * by clicking anywhere in the header bar, false) to allow it only by clicking to tool button
+ * (defaults to false)). If this panel is a child item of a border layout also see the
+ * {@link Ext.layout.BorderLayout.Region BorderLayout.Region}
+ * {@link Ext.layout.BorderLayout.Region#floatable floatable} config option.
+ */
+ /**
+ * @cfg {Boolean} autoScroll
+ * true to use overflow:'auto' on the panel's body element and show scroll bars automatically when
+ * necessary, false to clip any overflowing content (defaults to false).
+ */
+ /**
+ * @cfg {Mixed} floating
+ * This property is used to configure the underlying {@link Ext.Layer}. Acceptable values for this + * configuration property are:
Specify the id of an existing HTML node to use as the panel's body content + * (defaults to '').
true to enable dragging of this Panel (defaults to false).
+ *For custom drag/drop implementations, an Ext.Panel.DD config could also be passed + * in this config instead of true. Ext.Panel.DD is an internal, undocumented class which + * moves a proxy Element around in place of the Panel's element, but provides no other behaviour + * during dragging or on drop. It is a subclass of {@link Ext.dd.DragSource}, so behaviour may be + * added by implementing the interface methods of {@link Ext.dd.DragDrop} e.g.: + *
+new Ext.Panel({
+ title: 'Drag me',
+ x: 100,
+ y: 100,
+ renderTo: Ext.getBody(),
+ floating: true,
+ frame: true,
+ width: 400,
+ height: 200,
+ draggable: {
+// Config option of Ext.Panel.DD class.
+// It's a floating Panel, so do not show a placeholder proxy in the original position.
+ insertProxy: false,
+
+// Called for each mousemove event while dragging the DD object.
+ onDrag : function(e){
+// Record the x,y position of the drag proxy so that we can
+// position the Panel at end of drag.
+ var pel = this.proxy.getEl();
+ this.x = pel.getLeft(true);
+ this.y = pel.getTop(true);
+
+// Keep the Shadow aligned if there is one.
+ var s = this.panel.getEl().shadow;
+ if (s) {
+ s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
+ }
+ },
+
+// Called on the mouseup event.
+ endDrag : function(e){
+ this.panel.setPosition(this.x, this.y);
+ }
+ }
+}).show();
+
+new Ext.Panel({
+ ...
+ listeners: {
+ 'afterlayout': {
+ fn: function(p){
+ p.disable();
+ },
+ single: true // important, as many layouts can occur
+ }
+ }
+});
+Another option available by default is to specify 'x-plain' which strips all styling + * except for required attributes for Ext layouts to function (e.g. overflow:hidden). + * See {@link #unstyled} also.
+ */ + baseCls : 'x-panel', + /** + * @cfg {String} collapsedCls + * A CSS class to add to the panel's element after it has been collapsed (defaults to + * 'x-panel-collapsed'). + */ + collapsedCls : 'x-panel-collapsed', + /** + * @cfg {Boolean} maskDisabled + * true to mask the panel when it is {@link #disabled}, false to not mask it (defaults + * to true). Either way, the panel will always tell its contained elements to disable themselves + * when it is disabled, but masking the panel can provide an additional visual cue that the panel is + * disabled. + */ + maskDisabled : true, + /** + * @cfg {Boolean} animCollapse + * true to animate the transition when the panel is collapsed, false to skip the + * animation (defaults to true if the {@link Ext.Fx} class is available, otherwise false). + */ + animCollapse : Ext.enableFx, + /** + * @cfg {Boolean} headerAsText + * true to display the panel {@link #title} in the {@link #header}, + * false to hide it (defaults to true). + */ + headerAsText : true, + /** + * @cfg {String} buttonAlign + * The alignment of any {@link #buttons} added to this panel. Valid values are 'right', + * 'left' and 'center' (defaults to 'right'). + */ + buttonAlign : 'right', + /** + * @cfg {Boolean} collapsed + * true to render the panel collapsed, false to render it expanded (defaults to + * false). + */ + collapsed : false, + /** + * @cfg {Boolean} collapseFirst + * true to make sure the collapse/expand toggle button always renders first (to the left of) + * any other tools in the panel's title bar, false to render it last (defaults to true). + */ + collapseFirst : true, + /** + * @cfg {Number} minButtonWidth + * Minimum width in pixels of all {@link #buttons} in this panel (defaults to 75) + */ + minButtonWidth : 75, + /** + * @cfg {Boolean} unstyled + * Overrides the {@link #baseCls} setting to {@link #baseCls} = 'x-plain' which renders + * the panel unstyled except for required attributes for Ext layouts to function (e.g. overflow:hidden). + */ + /** + * @cfg {String} elements + * A comma-delimited list of panel elements to initialize when the panel is rendered. Normally, this list will be + * generated automatically based on the items added to the panel at config time, but sometimes it might be useful to + * make sure a structural element is rendered even if not specified at config time (for example, you may want + * to add a button or toolbar dynamically after the panel has been rendered). Adding those elements to this + * list will allocate the required placeholders in the panel when it is rendered. Valid values areIf this Panel is configured {@link #draggable}, this property will contain + * an instance of {@link Ext.dd.DragSource} which handles dragging the Panel.
+ * The developer must provide implementations of the abstract methods of {@link Ext.dd.DragSource} + * in order to supply behaviour for each stage of the drag/drop process. See {@link #draggable}. + * @type Ext.dd.DragSource. + * @property dd + */ + this.dd = new Ext.Panel.DD(this, typeof this.draggable == 'boolean' ? null : this.draggable); + }, + + // private + beforeEffect : function(){ + if(this.floating){ + this.el.beforeAction(); + } + this.el.addClass('x-panel-animated'); + }, + + // private + afterEffect : function(){ + this.syncShadow(); + this.el.removeClass('x-panel-animated'); + }, + + // private - wraps up an animation param with internal callbacks + createEffect : function(a, cb, scope){ + var o = { + scope:scope, + block:true + }; + if(a === true){ + o.callback = cb; + return o; + }else if(!a.callback){ + o.callback = cb; + }else { // wrap it up + o.callback = function(){ + cb.call(scope); + Ext.callback(a.callback, a.scope); + }; + } + return Ext.applyIf(o, a); + }, + + /** + * Collapses the panel body so that it becomes hidden. Fires the {@link #beforecollapse} event which will + * cancel the collapse action if it returns false. + * @param {Boolean} animate True to animate the transition, else false (defaults to the value of the + * {@link #animCollapse} panel config) + * @return {Ext.Panel} this + */ + collapse : function(animate){ + if(this.collapsed || this.el.hasFxBlock() || this.fireEvent('beforecollapse', this, animate) === false){ + return; + } + var doAnim = animate === true || (animate !== false && this.animCollapse); + this.beforeEffect(); + this.onCollapse(doAnim, animate); + return this; + }, + + // private + onCollapse : function(doAnim, animArg){ + if(doAnim){ + this[this.collapseEl].slideOut(this.slideAnchor, + Ext.apply(this.createEffect(animArg||true, this.afterCollapse, this), + this.collapseDefaults)); + }else{ + this[this.collapseEl].hide(); + this.afterCollapse(); + } + }, + + // private + afterCollapse : function(){ + this.collapsed = true; + this.el.addClass(this.collapsedCls); + this.afterEffect(); + this.fireEvent('collapse', this); + }, + + /** + * Expands the panel body so that it becomes visible. Fires the {@link #beforeexpand} event which will + * cancel the expand action if it returns false. + * @param {Boolean} animate True to animate the transition, else false (defaults to the value of the + * {@link #animCollapse} panel config) + * @return {Ext.Panel} this + */ + expand : function(animate){ + if(!this.collapsed || this.el.hasFxBlock() || this.fireEvent('beforeexpand', this, animate) === false){ + return; + } + var doAnim = animate === true || (animate !== false && this.animCollapse); + this.el.removeClass(this.collapsedCls); + this.beforeEffect(); + this.onExpand(doAnim, animate); + return this; + }, + + // private + onExpand : function(doAnim, animArg){ + if(doAnim){ + this[this.collapseEl].slideIn(this.slideAnchor, + Ext.apply(this.createEffect(animArg||true, this.afterExpand, this), + this.expandDefaults)); + }else{ + this[this.collapseEl].show(); + this.afterExpand(); + } + }, + + // private + afterExpand : function(){ + this.collapsed = false; + this.afterEffect(); + if(this.deferLayout !== undefined){ + this.doLayout(true); + } + this.fireEvent('expand', this); + }, + + /** + * Shortcut for performing an {@link #expand} or {@link #collapse} based on the current state of the panel. + * @param {Boolean} animate True to animate the transition, else false (defaults to the value of the + * {@link #animCollapse} panel config) + * @return {Ext.Panel} this + */ + toggleCollapse : function(animate){ + this[this.collapsed ? 'expand' : 'collapse'](animate); + return this; + }, + + // private + onDisable : function(){ + if(this.rendered && this.maskDisabled){ + this.el.mask(); + } + Ext.Panel.superclass.onDisable.call(this); + }, + + // private + onEnable : function(){ + if(this.rendered && this.maskDisabled){ + this.el.unmask(); + } + Ext.Panel.superclass.onEnable.call(this); + }, + + // private + onResize : function(w, h){ + if(w !== undefined || h !== undefined){ + if(!this.collapsed){ + if(typeof w == 'number'){ + w = this.adjustBodyWidth(w - this.getFrameWidth()); + if(this.tbar){ + this.tbar.setWidth(w); + if(this.topToolbar){ + this.topToolbar.setSize(w); + } + } + if(this.bbar){ + this.bbar.setWidth(w); + if(this.bottomToolbar){ + this.bottomToolbar.setSize(w); + } + } + if(this.fbar){ + var f = this.fbar, + fWidth = 1, + strict = Ext.isStrict; + if(this.buttonAlign == 'left'){ + fWidth = w - f.container.getFrameWidth('lr'); + }else{ + //center/right alignment off in webkit + if(Ext.isIE || Ext.isWebKit){ + //center alignment ok on webkit. + //right broken in both, center on IE + if(!(this.buttonAlign == 'center' && Ext.isWebKit) && (!strict || (!Ext.isIE8 && strict))){ + (function(){ + f.setWidth(f.getEl().child('.x-toolbar-ct').getWidth()); + }).defer(1); + }else{ + fWidth = 'auto'; + } + }else{ + fWidth = 'auto'; + } + } + f.setWidth(fWidth); + } + this.body.setWidth(w); + }else if(w == 'auto'){ + this.body.setWidth(w); + } + + if(typeof h == 'number'){ + h = Math.max(0, this.adjustBodyHeight(h - this.getFrameHeight())); + this.body.setHeight(h); + }else if(h == 'auto'){ + this.body.setHeight(h); + } + + if(this.disabled && this.el._mask){ + this.el._mask.setSize(this.el.dom.clientWidth, this.el.getHeight()); + } + }else{ + this.queuedBodySize = {width: w, height: h}; + if(!this.queuedExpand && this.allowQueuedExpand !== false){ + this.queuedExpand = true; + this.on('expand', function(){ + delete this.queuedExpand; + this.onResize(this.queuedBodySize.width, this.queuedBodySize.height); + this.doLayout(); + }, this, {single:true}); + } + } + this.fireEvent('bodyresize', this, w, h); + } + this.syncShadow(); + }, + + // private + adjustBodyHeight : function(h){ + return h; + }, + + // private + adjustBodyWidth : function(w){ + return w; + }, + + // private + onPosition : function(){ + this.syncShadow(); + }, + + /** + * Returns the width in pixels of the framing elements of this panel (not including the body width). To + * retrieve the body width see {@link #getInnerWidth}. + * @return {Number} The frame width + */ + getFrameWidth : function(){ + var w = this.el.getFrameWidth('lr')+this.bwrap.getFrameWidth('lr'); + + if(this.frame){ + var l = this.bwrap.dom.firstChild; + w += (Ext.fly(l).getFrameWidth('l') + Ext.fly(l.firstChild).getFrameWidth('r')); + var mc = this.bwrap.dom.firstChild.firstChild.firstChild; + w += Ext.fly(mc).getFrameWidth('lr'); + } + return w; + }, + + /** + * Returns the height in pixels of the framing elements of this panel (including any top and bottom bars and + * header and footer elements, but not including the body height). To retrieve the body height see {@link #getInnerHeight}. + * @return {Number} The frame height + */ + getFrameHeight : function(){ + var h = this.el.getFrameWidth('tb')+this.bwrap.getFrameWidth('tb'); + h += (this.tbar ? this.tbar.getHeight() : 0) + + (this.bbar ? this.bbar.getHeight() : 0); + + if(this.frame){ + var hd = this.el.dom.firstChild; + var ft = this.bwrap.dom.lastChild; + h += (hd.offsetHeight + ft.offsetHeight); + var mc = this.bwrap.dom.firstChild.firstChild.firstChild; + h += Ext.fly(mc).getFrameWidth('tb'); + }else{ + h += (this.header ? this.header.getHeight() : 0) + + (this.footer ? this.footer.getHeight() : 0); + } + return h; + }, + + /** + * Returns the width in pixels of the body element (not including the width of any framing elements). + * For the frame width see {@link #getFrameWidth}. + * @return {Number} The body width + */ + getInnerWidth : function(){ + return this.getSize().width - this.getFrameWidth(); + }, + + /** + * Returns the height in pixels of the body element (not including the height of any framing elements). + * For the frame height see {@link #getFrameHeight}. + * @return {Number} The body height + */ + getInnerHeight : function(){ + return this.getSize().height - this.getFrameHeight(); + }, + + // private + syncShadow : function(){ + if(this.floating){ + this.el.sync(true); + } + }, + + // private + getLayoutTarget : function(){ + return this.body; + }, + + /** + *Sets the title text for the panel and optionally the {@link #iconCls icon class}.
+ *In order to be able to set the title, a header element must have been created + * for the Panel. This is triggered either by configuring the Panel with a non-blank {@link #title}, + * or configuring it with {@link #header}: true.
+ * @param {String} title The title text to set + * @param {String} iconCls (optional) {@link #iconCls iconCls} A user-defined CSS class that provides the icon image for this panel + */ + setTitle : function(title, iconCls){ + this.title = title; + if(this.header && this.headerAsText){ + this.header.child('span').update(title); + } + if(iconCls){ + this.setIconClass(iconCls); + } + this.fireEvent('titlechange', this, title); + return this; + }, + + /** + * Get the {@link Ext.Updater} for this panel. Enables you to perform Ajax updates of this panel's body. + * @return {Ext.Updater} The Updater + */ + getUpdater : function(){ + return this.body.getUpdater(); + }, + + /** + * Loads this content panel immediately with content returned from an XHR call. + * @param {Object/String/Function} config A config object containing any of the following options: +
+panel.load({
+ url: "your-url.php",
+ params: {param1: "foo", param2: "bar"}, // or a URL encoded string
+ callback: yourFunction,
+ scope: yourObject, // optional scope for the callback
+ discardUrl: false,
+ nocache: false,
+ text: "Loading...",
+ timeout: 30,
+ scripts: false
+});
+
+var cp = new Ext.ColorPalette({value:'993300'}); // initial selected color
+cp.render('my-div');
+
+cp.on('select', function(palette, selColor){
+ // do something with selColor
+});
+An array of 6-digit color hex code strings (without the # symbol). This array can contain any number + * of colors, and each hex code should be unique. The width of the palette is controlled via CSS by adjusting + * the width property of the 'x-color-palette' class (or assigning a custom class), so you can balance the number + * of colors with the width setting until the box is symmetrical.
+ *You can override individual colors if needed:
+ *
+var cp = new Ext.ColorPalette();
+cp.colors[0] = "FF0000"; // change the first box to red
+
+var cp = new Ext.ColorPalette();
+cp.colors = ["000000", "993300", "333300"];
+| ', Date.getShortMonthName(i), ' | ', + '', Date.getShortMonthName(i + 6), ' | ', + i === 0 ? + '' + ); + } + buf.push( + ' | |
Example usage:
+ *
+// Basic mask:
+var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
+myMask.show();
+
+new Ext.Slider({
+ renderTo: Ext.getBody(),
+ width: 200,
+ value: 50,
+ increment: 10,
+ minValue: 0,
+ maxValue: 100
+});
+The number of decimal places to which to round the Slider's value. Defaults to 0.
+ *To disable rounding, configure as false.
+ */ + decimalPrecision: 0, + /** + * @cfg {Number} keyIncrement How many units to change the Slider when adjusting with keyboard navigation. Defaults to 1. If the increment config is larger, it will be used instead. + */ + keyIncrement: 1, + /** + * @cfg {Number} increment How many units to change the slider when adjusting by drag and drop. Use this option to enable 'snapping'. + */ + increment: 0, + // private + clickRange: [5,15], + /** + * @cfg {Boolean} clickToChange Determines whether or not clicking on the Slider axis will change the slider. Defaults to true + */ + clickToChange : true, + /** + * @cfg {Boolean} animate Turn on or off animation. Defaults to true + */ + animate: true, + + /** + * True while the thumb is in a drag operation + * @type boolean + */ + dragging: false, + + // private override + initComponent : function(){ + if(!Ext.isDefined(this.value)){ + this.value = this.minValue; + } + Ext.Slider.superclass.initComponent.call(this); + this.keyIncrement = Math.max(this.increment, this.keyIncrement); + this.addEvents( + /** + * @event beforechange + * Fires before the slider value is changed. By returning false from an event handler, + * you can cancel the event and prevent the slider from changing. + * @param {Ext.Slider} slider The slider + * @param {Number} newValue The new value which the slider is being changed to. + * @param {Number} oldValue The old value which the slider was previously. + */ + 'beforechange', + /** + * @event change + * Fires when the slider value is changed. + * @param {Ext.Slider} slider The slider + * @param {Number} newValue The new value which the slider has been changed to. + */ + 'change', + /** + * @event changecomplete + * Fires when the slider value is changed by the user and any drag operations have completed. + * @param {Ext.Slider} slider The slider + * @param {Number} newValue The new value which the slider has been changed to. + */ + 'changecomplete', + /** + * @event dragstart + * Fires after a drag operation has started. + * @param {Ext.Slider} slider The slider + * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker + */ + 'dragstart', + /** + * @event drag + * Fires continuously during the drag operation while the mouse is moving. + * @param {Ext.Slider} slider The slider + * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker + */ + 'drag', + /** + * @event dragend + * Fires after the drag operation has completed. + * @param {Ext.Slider} slider The slider + * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker + */ + 'dragend' + ); + + if(this.vertical){ + Ext.apply(this, Ext.Slider.Vertical); + } + }, + + // private override + onRender : function(){ + this.autoEl = { + cls: 'x-slider ' + (this.vertical ? 'x-slider-vert' : 'x-slider-horz'), + cn:{cls:'x-slider-end',cn:{cls:'x-slider-inner',cn:[{cls:'x-slider-thumb'},{tag:'a', cls:'x-slider-focus', href:"#", tabIndex: '-1', hidefocus:'on'}]}} + }; + Ext.Slider.superclass.onRender.apply(this, arguments); + this.endEl = this.el.first(); + this.innerEl = this.endEl.first(); + this.thumb = this.innerEl.first(); + this.halfThumb = (this.vertical ? this.thumb.getHeight() : this.thumb.getWidth())/2; + this.focusEl = this.thumb.next(); + this.initEvents(); + }, + + // private override + initEvents : function(){ + this.thumb.addClassOnOver('x-slider-thumb-over'); + this.mon(this.el, { + scope: this, + mousedown: this.onMouseDown, + keydown: this.onKeyDown + }); + + this.focusEl.swallowEvent("click", true); + + this.tracker = new Ext.dd.DragTracker({ + onBeforeStart: this.onBeforeDragStart.createDelegate(this), + onStart: this.onDragStart.createDelegate(this), + onDrag: this.onDrag.createDelegate(this), + onEnd: this.onDragEnd.createDelegate(this), + tolerance: 3, + autoStart: 300 + }); + this.tracker.initEl(this.thumb); + this.on('beforedestroy', this.tracker.destroy, this.tracker); + }, + + // private override + onMouseDown : function(e){ + if(this.disabled) {return;} + if(this.clickToChange && e.target != this.thumb.dom){ + var local = this.innerEl.translatePoints(e.getXY()); + this.onClickChange(local); + } + this.focus(); + }, + + // private + onClickChange : function(local){ + if(local.top > this.clickRange[0] && local.top < this.clickRange[1]){ + this.setValue(Ext.util.Format.round(this.reverseValue(local.left), this.decimalPrecision), undefined, true); + } + }, + + // private + onKeyDown : function(e){ + if(this.disabled){e.preventDefault();return;} + var k = e.getKey(); + switch(k){ + case e.UP: + case e.RIGHT: + e.stopEvent(); + if(e.ctrlKey){ + this.setValue(this.maxValue, undefined, true); + }else{ + this.setValue(this.value+this.keyIncrement, undefined, true); + } + break; + case e.DOWN: + case e.LEFT: + e.stopEvent(); + if(e.ctrlKey){ + this.setValue(this.minValue, undefined, true); + }else{ + this.setValue(this.value-this.keyIncrement, undefined, true); + } + break; + default: + e.preventDefault(); + } + }, + + // private + doSnap : function(value){ + if(!this.increment || this.increment == 1 || !value) { + return value; + } + var newValue = value, inc = this.increment; + var m = value % inc; + if(m != 0){ + newValue -= m; + if(m * 2 > inc){ + newValue += inc; + }else if(m * 2 < -inc){ + newValue -= inc; + } + } + return newValue.constrain(this.minValue, this.maxValue); + }, + + // private + afterRender : function(){ + Ext.Slider.superclass.afterRender.apply(this, arguments); + if(this.value !== undefined){ + var v = this.normalizeValue(this.value); + if(v !== this.value){ + delete this.value; + this.setValue(v, false); + }else{ + this.moveThumb(this.translateValue(v), false); + } + } + }, + + // private + getRatio : function(){ + var w = this.innerEl.getWidth(); + var v = this.maxValue - this.minValue; + return v == 0 ? w : (w/v); + }, + + // private + normalizeValue : function(v){ + v = this.doSnap(v); + v = Ext.util.Format.round(v, this.decimalPrecision); + v = v.constrain(this.minValue, this.maxValue); + return v; + }, + + /** + * Programmatically sets the value of the Slider. Ensures that the value is constrained within + * the minValue and maxValue. + * @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue) + * @param {Boolean} animate Turn on or off animation, defaults to true + */ + setValue : function(v, animate, changeComplete){ + v = this.normalizeValue(v); + if(v !== this.value && this.fireEvent('beforechange', this, v, this.value) !== false){ + this.value = v; + this.moveThumb(this.translateValue(v), animate !== false); + this.fireEvent('change', this, v); + if(changeComplete){ + this.fireEvent('changecomplete', this, v); + } + } + }, + + // private + translateValue : function(v){ + var ratio = this.getRatio(); + return (v * ratio)-(this.minValue * ratio)-this.halfThumb; + }, + + reverseValue : function(pos){ + var ratio = this.getRatio(); + return (pos+this.halfThumb+(this.minValue * ratio))/ratio; + }, + + // private + moveThumb: function(v, animate){ + if(!animate || this.animate === false){ + this.thumb.setLeft(v); + }else{ + this.thumb.shift({left: v, stopFx: true, duration:.35}); + } + }, + + // private + focus : function(){ + this.focusEl.focus(10); + }, + + // private + onBeforeDragStart : function(e){ + return !this.disabled; + }, + + // private + onDragStart: function(e){ + this.thumb.addClass('x-slider-thumb-drag'); + this.dragging = true; + this.dragStartValue = this.value; + this.fireEvent('dragstart', this, e); + }, + + // private + onDrag: function(e){ + var pos = this.innerEl.translatePoints(this.tracker.getXY()); + this.setValue(Ext.util.Format.round(this.reverseValue(pos.left), this.decimalPrecision), false); + this.fireEvent('drag', this, e); + }, + + // private + onDragEnd: function(e){ + this.thumb.removeClass('x-slider-thumb-drag'); + this.dragging = false; + this.fireEvent('dragend', this, e); + if(this.dragStartValue != this.value){ + this.fireEvent('changecomplete', this, this.value); + } + }, + + // private + onResize : function(w, h){ + this.innerEl.setWidth(w - (this.el.getPadding('l') + this.endEl.getPadding('r'))); + this.syncThumb(); + }, + + //private + onDisable: function(){ + Ext.Slider.superclass.onDisable.call(this); + this.thumb.addClass(this.disabledClass); + if(Ext.isIE){ + //IE breaks when using overflow visible and opacity other than 1. + //Create a place holder for the thumb and display it. + var xy = this.thumb.getXY(); + this.thumb.hide(); + this.innerEl.addClass(this.disabledClass).dom.disabled = true; + if (!this.thumbHolder){ + this.thumbHolder = this.endEl.createChild({cls: 'x-slider-thumb ' + this.disabledClass}); + } + this.thumbHolder.show().setXY(xy); + } + }, + + //private + onEnable: function(){ + Ext.Slider.superclass.onEnable.call(this); + this.thumb.removeClass(this.disabledClass); + if(Ext.isIE){ + this.innerEl.removeClass(this.disabledClass).dom.disabled = false; + if (this.thumbHolder){ + this.thumbHolder.hide(); + } + this.thumb.show(); + this.syncThumb(); + } + }, + + /** + * Synchronizes the thumb position to the proper proportion of the total component width based + * on the current slider {@link #value}. This will be called automatically when the Slider + * is resized by a layout, but if it is rendered auto width, this method can be called from + * another resize handler to sync the Slider if necessary. + */ + syncThumb : function(){ + if(this.rendered){ + this.moveThumb(this.translateValue(this.value)); + } + }, + + /** + * Returns the current value of the slider + * @return {Number} The current value of the slider + */ + getValue : function(){ + return this.value; + } +}); +Ext.reg('slider', Ext.Slider); + +// private class to support vertical sliders +Ext.Slider.Vertical = { + onResize : function(w, h){ + this.innerEl.setHeight(h - (this.el.getPadding('t') + this.endEl.getPadding('b'))); + this.syncThumb(); + }, + + getRatio : function(){ + var h = this.innerEl.getHeight(); + var v = this.maxValue - this.minValue; + return h/v; + }, + + moveThumb: function(v, animate){ + if(!animate || this.animate === false){ + this.thumb.setBottom(v); + }else{ + this.thumb.shift({bottom: v, stopFx: true, duration:.35}); + } + }, + + onDrag: function(e){ + var pos = this.innerEl.translatePoints(this.tracker.getXY()); + var bottom = this.innerEl.getHeight()-pos.top; + this.setValue(this.minValue + Ext.util.Format.round(bottom/this.getRatio(), this.decimalPrecision), false); + this.fireEvent('drag', this, e); + }, + + onClickChange : function(local){ + if(local.left > this.clickRange[0] && local.left < this.clickRange[1]){ + var bottom = this.innerEl.getHeight()-local.top; + this.setValue(this.minValue + Ext.util.Format.round(bottom/this.getRatio(), this.decimalPrecision), undefined, true); + } + } +};/** + * @class Ext.ProgressBar + * @extends Ext.BoxComponent + *An updateable progress bar component. The progress bar supports two different modes: manual and automatic.
+ *In manual mode, you are responsible for showing, updating (via {@link #updateProgress}) and clearing the + * progress bar as needed from your own code. This method is most appropriate when you want to show progress + * throughout an operation that has predictable points of interest at which you can update the control.
+ *In automatic mode, you simply call {@link #wait} and let the progress bar run indefinitely, only clearing it + * once the operation is complete. You can optionally have the progress bar wait for a specific amount of time + * and then clear itself. Automatic mode is most appropriate for timed operations or asynchronous operations in + * which you have no need for indicating intermediate progress.
+ * @cfg {Float} value A floating point value between 0 and 1 (e.g., .5, defaults to 0) + * @cfg {String} text The progress bar text (defaults to '') + * @cfg {Mixed} textEl The element to render the progress text to (defaults to the progress + * bar's internal text element) + * @cfg {String} id The progress bar element's id (defaults to an auto-generated id) + * @xtype progress + */ +Ext.ProgressBar = Ext.extend(Ext.BoxComponent, { + /** + * @cfg {String} baseCls + * The base CSS class to apply to the progress bar's wrapper element (defaults to 'x-progress') + */ + baseCls : 'x-progress', + + /** + * @cfg {Boolean} animate + * True to animate the progress bar during transitions (defaults to false) + */ + animate : false, + + // private + waitTimer : null, + + // private + initComponent : function(){ + Ext.ProgressBar.superclass.initComponent.call(this); + this.addEvents( + /** + * @event update + * Fires after each update interval + * @param {Ext.ProgressBar} this + * @param {Number} The current progress value + * @param {String} The current progress text + */ + "update" + ); + }, + + // private + onRender : function(ct, position){ + var tpl = new Ext.Template( + '+Property Type Description +---------- ------------ ---------------------------------------------------------------------- +duration Number The length of time in milliseconds that the progress bar should + run before resetting itself (defaults to undefined, in which case it + will run indefinitely until reset is called) +interval Number The length of time in milliseconds between each progress update + (defaults to 1000 ms) +animate Boolean Whether to animate the transition of the progress bar. If this value is + not specified, the default for the class is used. +increment Number The number of progress update segments to display within the progress + bar (defaults to 10). If the bar reaches the end and is still + updating, it will automatically wrap back to the beginning. +text String Optional text to display in the progress bar element (defaults to ''). +fn Function A callback function to execute after the progress bar finishes auto- + updating. The function will be called with no arguments. This function + will be ignored if duration is not specified since in that case the + progress bar can only be stopped programmatically, so any required function + should be called by the same code after it resets the progress bar. +scope Object The scope that is passed to the callback function (only applies when + duration and fn are both passed). ++ * + * Example usage: + *
+var p = new Ext.ProgressBar({
+ renderTo: 'my-el'
+});
+
+//Wait for 5 seconds, then update the status el (progress bar will auto-reset)
+p.wait({
+ interval: 100, //bar will move fast!
+ duration: 5000,
+ increment: 15,
+ text: 'Updating...',
+ scope: this,
+ fn: function(){
+ Ext.fly('status').update('Done!');
+ }
+});
+
+//Or update indefinitely until some async action completes, then reset manually
+p.wait();
+myAction.on('complete', function(){
+ p.reset();
+ Ext.fly('status').update('Done!');
+});
+