X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6e39d509471fe9b4e2660e0d1631b350d0c66f40..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/pkgs/cmp-foundation-debug.js diff --git a/pkgs/cmp-foundation-debug.js b/pkgs/cmp-foundation-debug.js deleted file mode 100644 index b791522b..00000000 --- a/pkgs/cmp-foundation-debug.js +++ /dev/null @@ -1,11937 +0,0 @@ -/*! - * Ext JS Library 3.1.0 - * Copyright(c) 2006-2009 Ext JS, LLC - * licensing@extjs.com - * http://www.extjs.com/license - */ -/** - * @class Ext.ComponentMgr - *
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}.
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 Component with the specified id is added to ComponentMgr. This will happen on instantiation.
- * @param {String} id The component {@link Ext.Component#id id}
- * @param {Function} fn The callback function
- * @param {Object} scope The scope (this
reference) in which the callback is executed. Defaults to the Component.
- */
- 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 axtype
. (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 aptype
. (Optional if the config contains a ptype
).
- * @return {Ext.Component} The newly instantiated Plugin.
- */
- createPlugin : function(config, defaultType){
- var PluginCls = ptypes[config.ptype || defaultType];
- if (PluginCls.init) {
- return PluginCls;
- } else {
- return new PluginCls(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;
-/**
- * Shorthand for {@link Ext.ComponentMgr#create}
- * 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.
- * @member Ext
- * @method create
- */
-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.form.FormPanel} -checkbox {@link Ext.form.Checkbox} -checkboxgroup {@link Ext.form.CheckboxGroup} -combo {@link Ext.form.ComboBox} -datefield {@link Ext.form.DateField} -displayfield {@link Ext.form.DisplayField} -field {@link Ext.form.Field} -fieldset {@link Ext.form.FieldSet} -hidden {@link Ext.form.Hidden} -htmleditor {@link Ext.form.HtmlEditor} -label {@link Ext.form.Label} -numberfield {@link Ext.form.NumberField} -radio {@link Ext.form.Radio} -radiogroup {@link Ext.form.RadioGroup} -textarea {@link Ext.form.TextArea} -textfield {@link Ext.form.TextField} -timefield {@link Ext.form.TimeField} -trigger {@link Ext.form.TriggerField} - -Chart components ---------------------------------------- -chart {@link Ext.chart.Chart} -barchart {@link Ext.chart.BarChart} -cartesianchart {@link Ext.chart.CartesianChart} -columnchart {@link Ext.chart.ColumnChart} -linechart {@link Ext.chart.LineChart} -piechart {@link Ext.chart.PieChart} - -Store xtypes ---------------------------------------- -arraystore {@link Ext.data.ArrayStore} -directstore {@link Ext.data.DirectStore} -groupingstore {@link Ext.data.GroupingStore} -jsonstore {@link Ext.data.JsonStore} -simplestore {@link Ext.data.SimpleStore} (deprecated; use arraystore) -store {@link Ext.data.Store} -xmlstore {@link Ext.data.XmlStore} -- * @constructor - * @param {Ext.Element/String/Object} config The configuration options may be specified as either: - *
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(); - } - - 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'
- }]
-});
-
- */
- /**
- * @cfg {String} labelStyle A CSS style specification string to apply directly to this field's - * label. Defaults to the container's labelStyle value if set (e.g., - * {@link Ext.layout.FormLayout#labelStyle} , or '').
- *Note: see the note for {@link #clearCls}
.
Also see {@link #hideLabel}
and
- * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}.
-new Ext.FormPanel({
- height: 100,
- renderTo: Ext.getBody(),
- items: [{
- xtype: 'textfield',
- fieldLabel: 'Name',
- labelStyle: 'font-weight:bold;'
- }]
-});
-
- */
- /**
- * @cfg {String} labelSeparator The separator to display after the text of each - * {@link #fieldLabel}. This property may be configured at various levels. - * The order of precedence is: - *
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 '='
- }]
-});
-
- */
- /**
- * @cfg {Boolean} hideLabel true to completely hide the label element - * ({@link #fieldLabel label} and {@link #labelSeparator separator}). Defaults to false. - * By default, even if you do not specify a {@link #fieldLabel} the space will still be - * reserved so that the field will line up with other fields that do have labels. - * Setting this to true will cause the field to not reserve that space.
- *Note: see the note for {@link #clearCls}.
-new Ext.FormPanel({
- height: 100,
- renderTo: Ext.getBody(),
- items: [{
- xtype: 'textfield'
- hideLabel: true
- }]
-});
-
- */
- /**
- * @cfg {String} clearCls The CSS class used to to apply to the special clearing div rendered - * directly after each form field wrapper to provide field clearing (defaults to - * 'x-form-clear-left').
- *Note: this config is only used when this Component is rendered by a Container - * which has been configured to use the {@link Ext.layout.FormLayout FormLayout} layout - * manager (e.g. {@link Ext.form.FormPanel} or specifying layout:'form') and either a - * {@link #fieldLabel} is specified or isFormField=true is specified.
See {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl} also.
- */ - /** - * @cfg {String} itemCls - *Note: this config is only used when this Component is rendered by a Container which - * has been configured to use the {@link Ext.layout.FormLayout FormLayout} layout manager (e.g. - * {@link Ext.form.FormPanel} or specifying layout:'form').
An additional CSS class to apply to the div wrapping the form item - * element of this field. If supplied, itemCls at the field level will override - * the default itemCls supplied at the container level. The value specified for - * itemCls will be added to the default class ('x-form-item').
- *Since it is applied to the item wrapper (see - * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}), it allows - * you to write standard CSS rules that can apply to the field, the label (if specified), or - * any other element within the markup for the field.
- *Note: see the note for {@link #fieldLabel}.
-// 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'
- }]
-});
-
- */
-
- // Configs below are used for all Components when rendered by AnchorLayout.
- /**
- * @cfg {String} anchor 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'
- }
- })
- ]
-});
- *
- */
- /**
- * @cfg {String} ctCls
- * An optional extra CSS class that will be added to this component's container. This can be useful for - * adding customized styles to the container or any of its children using standard CSS rules. See - * {@link Ext.layout.ContainerLayout}.{@link Ext.layout.ContainerLayout#extraCls extraCls} also.
- *Note: ctCls defaults to '' except for the following class - * which assigns a value by default: - *
- * ctCls: 'x-box-layout-ct custom-class'
- *
- *
- */
- /**
- * @cfg {Boolean} disabled
- * Render this component disabled (default is false).
- */
- disabled : false,
- /**
- * @cfg {Boolean} hidden
- * Render this component hidden (default is false). If true, the
- * {@link #hide} method will be called internally.
- */
- hidden : false,
- /**
- * @cfg {Object/Array} plugins
- * An object or array of objects that will provide custom functionality for this component. The only
- * requirement for a valid plugin is that it contain an init method that accepts a reference of type Ext.Component.
- * When a component is created, if any plugins are available, the component will call the init method on each
- * plugin, passing a reference to itself. Each plugin can then call methods or respond to events on the
- * component as needed to provide its functionality.
- */
- /**
- * @cfg {Mixed} applyTo
- * Specify the id of the element, a DOM element or an existing Element corresponding to a DIV - * that is already present in the document that specifies some structural markup for this - * component.
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'
- }
-}
-
- */
- autoEl : 'div',
-
- /**
- * @cfg {String} disabledClass
- * CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
- */
- disabledClass : 'x-item-disabled',
- /**
- * @cfg {Boolean} allowDomMove
- * Whether the component can move the Dom node when rendering (defaults to true).
- */
- allowDomMove : true,
- /**
- * @cfg {Boolean} autoShow
- * True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove
- * them on render (defaults to false).
- */
- autoShow : false,
- /**
- * @cfg {String} hideMode
- * How this component should be hidden. Supported values are 'visibility' - * (css visibility), 'offsets' (negative offset position) and 'display' - * (css display).
- *Note: the default of 'display' is generally preferred - * since items are automatically laid out when they are first shown (no sizing - * is done while hidden).
- */ - hideMode : 'display', - /** - * @cfg {Boolean} hideParent - * True to hide and show the component's container when hide/show is called on the component, false to hide - * and show the component itself (defaults to false). For example, this can be used as a shortcut for a hide - * button on a window by setting hide:true on the button when adding it to its parent container. - */ - hideParent : false, - /** - *The {@link Ext.Element} which encapsulates this Component. Read-only.
- *This will usually be a <DIV> element created by the class's onRender method, but
- * that may be overridden using the {@link #autoEl}
config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners - * for this Component's own Observable events), see the {@link Ext.util.Observable#listeners listeners} - * config for a suggestion, or use a render listener directly:
-new Ext.Panel({
- title: 'The Clickable Panel',
- listeners: {
- render: function(p) {
- // Append the Panel to the click handler's argument list.
- p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
- },
- single: true // Remove the listener after first invocation
- }
-});
-
- * See also {@link #getEl getEl}
- * @type Ext.Element - * @property el - */ - /** - * This Component's owner {@link Ext.Container Container} (defaults to undefined, and is set automatically when - * this Component is added to a Container). Read-only. - *Note: to access items within the Container see {@link #itemId}.
- * @type Ext.Container - * @property ownerCt - */ - /** - * True if this component is hidden. Read-only. - * @type Boolean - * @property hidden - */ - /** - * True if this component is disabled. Read-only. - * @type Boolean - * @property disabled - */ - /** - * True if this component has been rendered. Read-only. - * @type Boolean - * @property rendered - */ - rendered : false, - - /** - * @cfg {String} contentEl - *Optional. Specify an existing HTML element, or the id
of an existing HTML element to use as the content
- * for this component.
{@link Ext.Container#layout layout}
- * scheme that the Component may use. It is just HTML. Layouts operate on child {@link Ext.Container#items items}
.x-hidden
or the x-hide-display
CSS class to
- * prevent a brief flicker of the content before it is rendered to the panel.{@link #data}
and
- * {@link #tplWriteMode}
configurations.
- */
-
- /**
- * @cfg {String} tplWriteMode The Ext.(X)Template method to use when
- * updating the content area of the Component. Defaults to 'overwrite'
- * (see {@link Ext.XTemplate#overwrite}
).
- */
- tplWriteMode : 'overwrite',
-
- /**
- * @cfg {Mixed} data
- * The initial set of data to apply to the {@link #tpl}
to
- * update the content area of the Component.
- */
-
-
- // 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
- });
- }
-}
-
- */
- initComponent : Ext.emptyFn,
-
- /**
- * Render this Component into the passed HTML element.
- *If you are using a {@link Ext.Container Container} object to house this Component, then - * do not use the render method.
- *A Container's child Components are rendered by that Container's - * {@link Ext.Container#layout layout} manager when the Container is first rendered.
- *Certain layout managers allow dynamic addition of child components. Those that do - * include {@link Ext.layout.CardLayout}, {@link Ext.layout.AnchorLayout}, - * {@link Ext.layout.FormLayout}, {@link Ext.layout.TableLayout}.
- *If the Container is already rendered when a new child Component is added, you may need to call - * the Container's {@link Ext.Container#doLayout doLayout} to refresh the view which causes any - * unrendered child Components to be rendered. This is required so that you can add multiple - * child components if needed while only refreshing the layout once.
- *When creating complex UIs, it is important to remember that sizing and positioning - * of child items is the responsibility of the Container's {@link Ext.Container#layout layout} manager. - * If you expect child items to be sized in response to user interactions, you must - * configure the Container with a layout manager which creates and manages the type of layout you - * have in mind.
- *Omitting the Container's {@link Ext.Container#layout layout} config means that a basic - * layout manager is used which does nothing but render child components sequentially into the - * Container. No sizing or positioning will be performed in this situation.
- * @param {Element/HTMLElement/String} container (optional) The element this Component should be - * rendered into. If it is being created from existing markup, this should be omitted. - * @param {String/Number} position (optional) The element ID or DOM node index within the container before - * which this component will be inserted (defaults to appending to the end of the container) - */ - 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); - - - // Populate content of the component with html, contentEl or - // a tpl. - var contentTarget = this.getContentTarget(); - if (this.html){ - contentTarget.update(Ext.DomHelper.markup(this.html)); - delete this.html; - } - if (this.contentEl){ - var ce = Ext.getDom(this.contentEl); - Ext.fly(ce).removeClass(['x-hidden', 'x-hide-display']); - contentTarget.appendChild(ce); - } - if (this.tpl) { - if (!this.tpl.compile) { - this.tpl = new Ext.XTemplate(this.tpl); - } - if (this.data) { - this.tpl[this.tplWriteMode](contentTarget, this.data); - delete this.data; - } - } - this.afterRender(this.container); - - - 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.fireEvent('afterrender', this); - } - return this; - }, - - - /** - * Update the content area of a component. - * @param {Mixed} htmlOrData - * If this component has been configured with a template via the tpl config - * then it will use this argument as data to populate the template. - * If this component was not configured with a template, the components - * content area will be updated via Ext.Element update - * @param {Boolean} loadScripts - * (optional) Only legitimate when using the html configuration. Defaults to false - * @param {Function} callback - * (optional) Only legitimate when using the html configuration. Callback to execute when scripts have finished loading - */ - update: function(htmlOrData, loadScripts, cb) { - var contentTarget = this.getContentTarget(); - if (this.tpl && typeof htmlOrData !== "string") { - this.tpl[this.tplWriteMode](contentTarget, htmlOrData || {}); - } else { - var html = Ext.isObject(htmlOrData) ? Ext.DomHelper.markup(htmlOrData) : htmlOrData; - contentTarget.update(html, loadScripts, cb); - } - }, - - - /** - * @private - * Method to manage awareness of when components are added to their - * respective Container, firing an added event. - * References are established at add time rather than at render time. - * @param {Ext.Container} container Container which holds the component - * @param {number} pos Position at which the component was added - */ - onAdded : function(container, pos) { - this.ownerCt = container; - this.initRef(); - this.fireEvent('added', this, container, pos); - }, - - /** - * @private - * Method to manage awareness of when components are removed from their - * respective Container, firing an removed event. References are properly - * cleaned up after removing a component from its owning container. - */ - onRemoved : function() { - this.removeRef(); - this.fireEvent('removed', this, this.ownerCt); - delete this.ownerCt; - }, - - /** - * @private - * Method to establish a reference to a component. - */ - initRef : function() { - /** - * @cfg {String} ref - *A path specification, relative to the Component's {@link #ownerCt}
- * specifying into which ancestor Container to place a named reference to this Component.
The ancestor axis can be traversed by using '/' characters in the path. - * For example, to put a reference to a Toolbar Button into the Panel which owns the Toolbar:
-var myGrid = new Ext.grid.EditorGridPanel({
- title: 'My EditorGridPanel',
- store: myStore,
- colModel: myColModel,
- tbar: [{
- text: 'Save',
- handler: saveChanges,
- disabled: true,
- ref: '../saveButton'
- }],
- listeners: {
- afteredit: function() {
-// The button reference is in the GridPanel
- myGrid.saveButton.enable();
- }
- }
-});
-
- * In the code above, if the ref
had been 'saveButton'
- * the reference would have been placed into the Toolbar. Each '/' in the ref
- * moves up one level from the Component's {@link #ownerCt}
.
Also see the {@link #added}
and {@link #removed}
events.
ref
.
- */
- this.refOwner = t;
- }
- }
- },
-
- removeRef : function() {
- if (this.refOwner && this.refName) {
- delete this.refOwner[this.refName];
- delete this.refOwner;
- }
- },
-
- // private
- initState : function(){
- if(Ext.state.Manager){
- var id = this.getStateId();
- if(id){
- var state = Ext.state.Manager.get(id);
- if(state){
- if(this.fireEvent('beforestaterestore', this, state) !== false){
- this.applyState(Ext.apply({}, state));
- this.fireEvent('staterestore', this, state);
- }
- }
- }
- }
- },
-
- // private
- getStateId : function(){
- return this.stateId || ((this.id.indexOf('ext-comp-') == 0 || this.id.indexOf('ext-gen') == 0) ? null : this.id);
- },
-
- // private
- initStateEvents : function(){
- if(this.stateEvents){
- for(var i = 0, e; e = this.stateEvents[i]; i++){
- this.on(e, this.saveState, this, {delay:100});
- }
- }
- },
-
- // private
- applyState : function(state){
- if(state){
- Ext.apply(this, state);
- }
- },
-
- // private
- getState : function(){
- return null;
- },
-
- // private
- saveState : function(){
- if(Ext.state.Manager && this.stateful !== false){
- var id = this.getStateId();
- if(id){
- var state = this.getState();
- if(this.fireEvent('beforestatesave', this, state) !== false){
- Ext.state.Manager.set(id, state);
- this.fireEvent('statesave', this, state);
- }
- }
- }
- },
-
- /**
- * Apply this component to existing markup that is valid. With this function, no call to render() is required.
- * @param {String/HTMLElement} el
- */
- applyToMarkup : function(el){
- this.allowDomMove = false;
- this.el = Ext.get(el);
- this.render(this.el.dom.parentNode);
- },
-
- /**
- * Adds a CSS class to the component's underlying element.
- * @param {string} cls The CSS class name to add
- * @return {Ext.Component} this
- */
- addClass : function(cls){
- if(this.el){
- this.el.addClass(cls);
- }else{
- this.cls = this.cls ? this.cls + ' ' + cls : cls;
- }
- return this;
- },
-
- /**
- * Removes a CSS class from the component's underlying element.
- * @param {string} cls The CSS class name to remove
- * @return {Ext.Component} this
- */
- removeClass : function(cls){
- if(this.el){
- this.el.removeClass(cls);
- }else if(this.cls){
- this.cls = this.cls.split(' ').remove(cls).join(' ');
- }
- return this;
- },
-
- // private
- // default function is not really useful
- onRender : function(ct, position){
- if(!this.el && this.autoEl){
- if(Ext.isString(this.autoEl)){
- this.el = document.createElement(this.autoEl);
- }else{
- var div = document.createElement('div');
- Ext.DomHelper.overwrite(div, this.autoEl);
- this.el = div.firstChild;
- }
- if (!this.el.id) {
- this.el.id = this.getId();
- }
- }
- if(this.el){
- this.el = Ext.get(this.el);
- if(this.allowDomMove !== false){
- ct.dom.insertBefore(this.el.dom, position);
- if (div) {
- Ext.removeNode(div);
- div = null;
- }
- }
- }
- },
-
- // private
- getAutoCreate : function(){
- var cfg = Ext.isObject(this.autoCreate) ?
- this.autoCreate : Ext.apply({}, this.defaultAutoCreate);
- if(this.id && !cfg.id){
- cfg.id = this.id;
- }
- return cfg;
- },
-
- // private
- afterRender : Ext.emptyFn,
-
- /**
- * Destroys this component by purging any event listeners, removing the component's element from the DOM,
- * removing the component from its {@link Ext.Container} (if applicable) and unregistering it from
- * {@link Ext.ComponentMgr}. Destruction is generally handled automatically by the framework and this method
- * should usually not need to be called directly.
- *
- */
- destroy : function(){
- if(!this.isDestroyed){
- if(this.fireEvent('beforedestroy', this) !== false){
- this.destroying = true;
- this.beforeDestroy();
- if(this.ownerCt && this.ownerCt.remove){
- this.ownerCt.remove(this, false);
- }
- if(this.rendered){
- this.el.remove();
- if(this.actionMode == 'container' || this.removeMode == 'container'){
- this.container.remove();
- }
- }
- this.onDestroy();
- Ext.ComponentMgr.unregister(this);
- this.fireEvent('destroy', this);
- this.purgeListeners();
- this.destroying = false;
- this.isDestroyed = true;
- }
- }
- },
-
- deleteMembers : function(){
- var args = arguments;
- for(var i = 0, len = args.length; i < len; ++i){
- delete this[args[i]];
- }
- },
-
- // private
- beforeDestroy : Ext.emptyFn,
-
- // private
- onDestroy : Ext.emptyFn,
-
- /**
- * Returns the {@link Ext.Element} which encapsulates this Component.
- *This will usually be a <DIV> element created by the class's onRender method, but - * that may be overridden using the {@link #autoEl} config.
- *Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners - * for this Component's own Observable events), see the {@link #listeners} config for a suggestion, - * or use a render listener directly:
-new Ext.Panel({
- title: 'The Clickable Panel',
- listeners: {
- render: function(p) {
- // Append the Panel to the click handler's argument list.
- p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
- },
- single: true // Remove the listener after first invocation
- }
-});
-
- * @return {Ext.Element} The Element which encapsulates this Component.
- */
- getEl : function(){
- return this.el;
- },
-
- // private
- getContentTarget : function(){
- return this.el;
- },
-
- /**
- * Returns the id
of this component or automatically generates and
- * returns an id
if an id
is not defined yet:
- * 'ext-comp-' + (++Ext.Component.AUTO_ID)
- *
- * @return {String} id
- */
- getId : function(){
- return this.id || (this.id = 'ext-comp-' + (++Ext.Component.AUTO_ID));
- },
-
- /**
- * Returns the {@link #itemId}
of this component. If an
- * {@link #itemId}
was not assigned through configuration the
- * id
is returned using {@link #getId}
.
- * @return {String}
- */
- getItemId : function(){
- return this.itemId || this.getId();
- },
-
- /**
- * 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.getVisibilityEl().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.getVisibilityEl().addClass('x-hide-' + this.hideMode);
- },
-
- // private
- getVisibilityEl : 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.getVisibilityEl().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'
-
- * @return {String} The xtype
- */
- getXType : function(){
- return this.constructor.xtype;
- },
-
- /**
- * Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended - * from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
- *If using your own subclasses, be aware that a Component must register its own xtype - * to participate in determination of inherited xtypes.
- *For a list of all available xtypes, see the {@link Ext.Component} header.
- *Example usage:
- *
-var t = new Ext.form.TextField();
-var isText = t.isXType('textfield'); // true
-var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
-var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
-
- * @param {String} xtype The xtype to check for this Component
- * @param {Boolean} shallow (optional) False to check whether this Component is descended from the xtype (this is
- * the default), or true to check whether this Component is directly of the specified xtype.
- * @return {Boolean} True if this component descends from the specified xtype, false otherwise.
- */
- isXType : function(xtype, shallow){
- //assume a string by default
- if (Ext.isFunction(xtype)){
- xtype = xtype.xtype; //handle being passed the class, e.g. Ext.Component
- }else if (Ext.isObject(xtype)){
- xtype = xtype.constructor.xtype; //handle being passed an instance
- }
-
- return !shallow ? ('/' + this.getXTypes() + '/').indexOf('/' + xtype + '/') != -1 : this.constructor.xtype == xtype;
- },
-
- /**
- * Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all - * available xtypes, see the {@link Ext.Component} header.
- *If using your own subclasses, be aware that a Component must register its own xtype - * to participate in determination of inherited xtypes.
- *Example usage:
- *
-var t = new Ext.form.TextField();
-alert(t.getXTypes()); // alerts 'component/box/field/textfield'
-
- * @return {String} The xtype hierarchy string
- */
- getXTypes : function(){
- var tc = this.constructor;
- if(!tc.xtypes){
- var c = [], sc = this;
- while(sc && sc.constructor.xtype){
- c.unshift(sc.constructor.xtype);
- sc = sc.constructor.superclass;
- }
- tc.xtypeChain = c;
- tc.xtypes = c.join('/');
- }
- return tc.xtypes;
- },
-
- /**
- * Find a container above this component at any level by a custom function. If the passed function returns
- * true, the container will be returned.
- * @param {Function} fn The custom function to call with the arguments (container, this component).
- * @return {Ext.Container} The first Container for which the custom function returns true
- */
- findParentBy : function(fn) {
- for (var p = this.ownerCt; (p != null) && !fn(p, this); p = p.ownerCt);
- return p || null;
- },
-
- /**
- * Find a container above this component at any level by xtype or class
- * @param {String/Class} xtype The xtype string for a component, or the class of the component directly
- * @return {Ext.Container} The first Container which matches the given xtype or class
- */
- findParentByType : function(xtype) {
- return Ext.isFunction(xtype) ?
- this.findParentBy(function(p){
- return p.constructor === xtype;
- }) :
- this.findParentBy(function(p){
- return p.constructor.xtype === xtype;
- });
- },
-
- // protected
- getPositionEl : function(){
- return this.positionEl || this.el;
- },
-
- // private
- purgeListeners : function(){
- Ext.Component.superclass.purgeListeners.call(this);
- if(this.mons){
- this.on('beforedestroy', this.clearMons, this, {single: true});
- }
- },
-
- // private
- clearMons : function(){
- Ext.each(this.mons, function(m){
- m.item.un(m.ename, m.fn, m.scope);
- }, this);
- this.mons = [];
- },
-
- // private
- createMons: function(){
- if(!this.mons){
- this.mons = [];
- this.on('beforedestroy', this.clearMons, this, {single: true});
- }
- },
-
- /**
- * Adds listeners to any Observable object (or Elements) which are automatically removed when this Component - * is destroyed. Usage:
-myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
-
- * or:
-myGridPanel.mon(myGridPanel.getSelectionModel(), {
- selectionchange: handleSelectionChange,
- buffer: 50
-});
-
- * @param {Observable|Element} item The item to which to add a listener/listeners.
- * @param {Object|String} ename The event name, or an object containing event name properties.
- * @param {Function} fn Optional. If the ename
parameter was an event name, this
- * is the handler function.
- * @param {Object} scope Optional. If the ename
parameter was an event name, this
- * is the scope (this
reference) in which the handler function is executed.
- * @param {Object} opt Optional. If the ename
parameter was an event name, this
- * is the {@link Ext.util.Observable#addListener addListener} options.
- */
- mon : function(item, ename, fn, scope, opt){
- this.createMons();
- if(Ext.isObject(ename)){
- var propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/;
-
- var o = ename;
- for(var e in o){
- if(propRe.test(e)){
- continue;
- }
- if(Ext.isFunction(o[e])){
- // shared options
- this.mons.push({
- item: item, ename: e, fn: o[e], scope: o.scope
- });
- item.on(e, o[e], o.scope, o);
- }else{
- // individual options
- this.mons.push({
- item: item, ename: e, fn: o[e], scope: o.scope
- });
- item.on(e, o[e]);
- }
- }
- return;
- }
-
- this.mons.push({
- item: item, ename: ename, fn: fn, scope: scope
- });
- item.on(ename, fn, scope, opt);
- },
-
- /**
- * Removes listeners that were added by the {@link #mon} method.
- * @param {Observable|Element} item The item from which to remove a listener/listeners.
- * @param {Object|String} ename The event name, or an object containing event name properties.
- * @param {Function} fn Optional. If the ename
parameter was an event name, this
- * is the handler function.
- * @param {Object} scope Optional. If the ename
parameter was an event name, this
- * is the scope (this
reference) in which the handler function is executed.
- */
- mun : function(item, ename, fn, scope){
- var found, mon;
- this.createMons();
- for(var i = 0, len = this.mons.length; i < len; ++i){
- mon = this.mons[i];
- if(item === mon.item && ename == mon.ename && fn === mon.fn && scope === mon.scope){
- this.mons.splice(i, 1);
- item.un(ename, fn, scope);
- found = true;
- break;
- }
- }
- return found;
- },
-
- /**
- * Returns the next component in the owning container
- * @return Ext.Component
- */
- nextSibling : function(){
- if(this.ownerCt){
- var index = this.ownerCt.items.indexOf(this);
- if(index != -1 && index+1 < this.ownerCt.items.getCount()){
- return this.ownerCt.items.itemAt(index+1);
- }
- }
- return null;
- },
-
- /**
- * Returns the previous component in the owning container
- * @return Ext.Component
- */
- previousSibling : function(){
- if(this.ownerCt){
- var index = this.ownerCt.items.indexOf(this);
- if(index > 0){
- return this.ownerCt.items.itemAt(index-1);
- }
- }
- return null;
- },
-
- /**
- * Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
- * @return {Ext.Container} the Container which owns this Component.
- */
- getBubbleTarget : function(){
- return this.ownerCt;
- }
-});
-
-Ext.reg('component', Ext.Component);/**
- * @class Ext.Action
- * 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');
-
- * @constructor
- * @param {Object} config The configuration options
- */
-Ext.Action = Ext.extend(Object, {
- /**
- * @cfg {String} text The text to set for all components using this action (defaults to '').
- */
- /**
- * @cfg {String} iconCls
- * The CSS class selector that specifies a background image to be used as the header icon for
- * all components using this action (defaults to '').
- * 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; }
-
- */
- /**
- * @cfg {Boolean} disabled True to disable all components using this action, false to enable them (defaults to false).
- */
- /**
- * @cfg {Boolean} hidden True to hide all components using this action, false to show them (defaults to false).
- */
- /**
- * @cfg {Function} handler The function that will be invoked by each component tied to this action
- * when the component's primary event is triggered (defaults to undefined).
- */
- /**
- * @cfg {String} itemId
- * See {@link Ext.Component}.{@link Ext.Component#itemId itemId}.
- */
- /**
- * @cfg {Object} scope The scope (this reference) in which the
- * {@link #handler}
is executed. Defaults to this Button.
- */
-
- constructor : function(config){
- this.initialConfig = config;
- this.itemId = config.itemId = (config.itemId || config.id || Ext.id());
- this.items = [];
- },
-
- // private
- isAction : true,
-
- /**
- * Sets the text to be displayed by all components using this action.
- * @param {String} text The text to display
- */
- setText : function(text){
- this.initialConfig.text = text;
- this.callEach('setText', [text]);
- },
-
- /**
- * Gets the text currently displayed by all components using this action.
- */
- getText : function(){
- return this.initialConfig.text;
- },
-
- /**
- * Sets the icon CSS class for all components using this action. The class should supply
- * a background image that will be used as the icon image.
- * @param {String} cls The CSS class supplying the icon image
- */
- setIconClass : function(cls){
- this.initialConfig.iconCls = cls;
- this.callEach('setIconClass', [cls]);
- },
-
- /**
- * Gets the icon CSS class currently used by all components using this action.
- */
- getIconClass : function(){
- return this.initialConfig.iconCls;
- },
-
- /**
- * Sets the disabled state of all components using this action. Shortcut method
- * for {@link #enable} and {@link #disable}.
- * @param {Boolean} disabled True to disable the component, false to enable it
- */
- setDisabled : function(v){
- this.initialConfig.disabled = v;
- this.callEach('setDisabled', [v]);
- },
-
- /**
- * Enables all components using this action.
- */
- enable : function(){
- this.setDisabled(false);
- },
-
- /**
- * Disables all components using this action.
- */
- disable : function(){
- this.setDisabled(true);
- },
-
- /**
- * Returns true if the components using this action are currently disabled, else returns false.
- */
- isDisabled : function(){
- return this.initialConfig.disabled;
- },
-
- /**
- * Sets the hidden state of all components using this action. Shortcut method
- * for {@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 (this
reference) in which the function is executed. Defaults to the Component firing the event.
- */
- 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 (this
reference) in which the function is executed. Defaults to the Component.
- */
- 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);
- delete this.dom;
- },
-
- 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'
-});
- * This may then be {@link Ext.Container#add added} to a {@link Ext.Container Container} as a child item.
- * 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'
- }
-});
- * @constructor
- * @param {Ext.Element/String/Object} config The configuration options.
- * @xtype box
- */
-Ext.BoxComponent = Ext.extend(Ext.Component, {
-
- // tabTip config is used when a BoxComponent is a child of a TabPanel
- /**
- * @cfg {String} tabTip
- * Note: this config is only used when this BoxComponent is a child item of a TabPanel.
- * A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over - * the associated tab selector element. {@link Ext.QuickTips}.init() - * must be called in order for the tips to render. - */ - // Configs below are used for all Components when rendered by BorderLayout. - /** - * @cfg {String} regionNote: 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}
- *
- */
- /**
- * @cfg {Number} x
- * The local x (left) coordinate for this component if contained within a positioning container.
- */
- /**
- * @cfg {Number} y
- * The local y (top) coordinate for this component if contained within a positioning container.
- */
- /**
- * @cfg {Number} pageX
- * The page level x coordinate for this component if contained within a positioning container.
- */
- /**
- * @cfg {Number} pageY
- * The page level y coordinate for this component if contained within a positioning container.
- */
- /**
- * @cfg {Number} height
- * The height of this component in pixels (defaults to auto).
- * Note to express this dimension as a percentage or offset see {@link Ext.Component#anchor}.
- */
- /**
- * @cfg {Number} width
- * The width of this component in pixels (defaults to auto).
- * Note to express this dimension as a percentage or offset see {@link Ext.Component#anchor}.
- */
- /**
- * @cfg {Number} boxMinHeight
- * The minimum value in pixels which this BoxComponent will set its height to.
- *Warning: This will override any size management applied by layout managers.
- */ - /** - * @cfg {Number} boxMinWidth - *The minimum value in pixels which this BoxComponent will set its width to.
- *Warning: This will override any size management applied by layout managers.
- */ - /** - * @cfg {Number} boxMaxHeight - *The maximum value in pixels which this BoxComponent will set its height to.
- *Warning: This will override any size management applied by layout managers.
- */ - /** - * @cfg {Number} boxMaxWidth - *The maximum value in pixels which this BoxComponent will set its width to.
- *Warning: This will override any size management applied by layout managers.
- */ - /** - * @cfg {Boolean} autoHeight - *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();
-
- */
- /**
- * @cfg {Boolean} autoWidth
- * 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>
-
- * A Panel rendered into that target element must listen for browser window resize in order to relay its
- * child items when the browser changes its width:
-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'
- }],
-});
-
- */
- /**
- * @cfg {Boolean} autoScroll
- * true
to use overflow:'auto' on the components layout element and show scroll bars automatically when
- * necessary, false
to clip any overflowing content (defaults to false
).
- */
-
- /* // private internal config
- * {Boolean} deferHeight
- * True to defer height calculations to an external component, false to allow this component to set its own
- * height (defaults to false).
- */
-
- // private
- initComponent : function(){
- Ext.BoxComponent.superclass.initComponent.call(this);
- this.addEvents(
- /**
- * @event resize
- * Fires after the component is resized.
- * @param {Ext.Component} this
- * @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
- */
- 'resize',
- /**
- * @event move
- * Fires after the component is moved.
- * @param {Ext.Component} this
- * @param {Number} x The new x position
- * @param {Number} y The new y position
- */
- 'move'
- );
- },
-
- // private, set in afterRender to signify that the component has been rendered
- boxReady : false,
- // private, used to defer height settings to subclasses
- deferHeight: false,
-
- /**
- * Sets the width and height of this BoxComponent. This method fires the {@link #resize} event. This method can accept
- * either width and height as separate arguments, or you can pass a size object like {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
.
- * @return {Ext.Element} The Element which is to be resized by size managing layouts.
- */
- getResizeEl : function(){
- return this.resizeEl || this.el;
- },
-
- /**
- * Sets the overflow on the content element of the component.
- * @param {Boolean} scroll True to allow the Component to auto scroll.
- * @return {Ext.BoxComponent} this
- */
- setAutoScroll : function(scroll){
- if(this.rendered){
- this.getContentTarget().setOverflow(scroll ? 'auto' : '');
- }
- this.autoScroll = scroll;
- return this;
- },
-
- /**
- * 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
- afterRender : function(){
- Ext.BoxComponent.superclass.afterRender.call(this);
- if(this.resizeEl){
- this.resizeEl = Ext.get(this.resizeEl);
- }
- if(this.positionEl){
- this.positionEl = Ext.get(this.positionEl);
- }
- this.boxReady = true;
- this.setAutoScroll(this.autoScroll);
- 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){
- this.fireEvent('resize', this, 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);
-
- * @constructor
- * Create a new SplitBar
- * @param {Mixed} dragElement The element to be dragged and act as the SplitBar.
- * @param {Mixed} resizingElement The element to be resized based on where the SplitBar element is dragged
- * @param {Number} orientation (optional) Either Ext.SplitBar.HORIZONTAL or Ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
- * @param {Number} placement (optional) Either Ext.SplitBar.LEFT or Ext.SplitBar.RIGHT for horizontal or
- Ext.SplitBar.TOP or Ext.SplitBar.BOTTOM for vertical. (By default, this is determined automatically by the initial
- position of the SplitBar).
- */
-Ext.SplitBar = function(dragElement, resizingElement, orientation, placement, existingProxy){
-
- /** @private */
- this.el = Ext.get(dragElement, true);
- this.el.dom.unselectable = "on";
- /** @private */
- this.resizingEl = Ext.get(resizingElement, true);
-
- /**
- * @private
- * The orientation of the split. Either Ext.SplitBar.HORIZONTAL or Ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
- * Note: If this is changed after creating the SplitBar, the placement property must be manually updated
- * @type Number
- */
- this.orientation = orientation || Ext.SplitBar.HORIZONTAL;
-
- /**
- * The increment, in pixels by which to move this SplitBar. When undefined, the SplitBar moves smoothly.
- * @type Number
- * @property tickSize
- */
- /**
- * The minimum size of the resizing element. (Defaults to 0)
- * @type Number
- */
- this.minSize = 0;
-
- /**
- * The maximum size of the resizing element. (Defaults to 2000)
- * @type Number
- */
- this.maxSize = 2000;
-
- /**
- * Whether to animate the transition to the new size
- * @type Boolean
- */
- this.animate = false;
-
- /**
- * Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes.
- * @type Boolean
- */
- this.useShim = false;
-
- /** @private */
- this.shim = null;
-
- if(!existingProxy){
- /** @private */
- this.proxy = Ext.SplitBar.createProxy(this.orientation);
- }else{
- this.proxy = Ext.get(existingProxy).dom;
- }
- /** @private */
- this.dd = new Ext.dd.DDProxy(this.el.dom.id, "XSplitBars", {dragElId : this.proxy.id});
-
- /** @private */
- this.dd.b4StartDrag = this.onStartProxyDrag.createDelegate(this);
-
- /** @private */
- this.dd.endDrag = this.onEndProxyDrag.createDelegate(this);
-
- /** @private */
- this.dragSpecs = {};
-
- /**
- * @private The adapter to use to positon and resize elements
- */
- this.adapter = new Ext.SplitBar.BasicLayoutAdapter();
- this.adapter.init(this);
-
- if(this.orientation == Ext.SplitBar.HORIZONTAL){
- /** @private */
- this.placement = placement || (this.el.getX() > this.resizingEl.getX() ? Ext.SplitBar.LEFT : Ext.SplitBar.RIGHT);
- this.el.addClass("x-splitbar-h");
- }else{
- /** @private */
- this.placement = placement || (this.el.getY() > this.resizingEl.getY() ? Ext.SplitBar.TOP : Ext.SplitBar.BOTTOM);
- this.el.addClass("x-splitbar-v");
- }
-
- this.addEvents(
- /**
- * @event resize
- * Fires when the splitter is moved (alias for {@link #moved})
- * @param {Ext.SplitBar} this
- * @param {Number} newSize the new width or height
- */
- "resize",
- /**
- * @event moved
- * Fires when the splitter is moved
- * @param {Ext.SplitBar} this
- * @param {Number} newSize the new width or height
- */
- "moved",
- /**
- * @event beforeresize
- * Fires before the splitter is dragged
- * @param {Ext.SplitBar} this
- */
- "beforeresize",
-
- "beforeapply"
- );
-
- Ext.SplitBar.superclass.constructor.call(this);
-};
-
-Ext.extend(Ext.SplitBar, Ext.util.Observable, {
- onStartProxyDrag : function(x, y){
- this.fireEvent("beforeresize", this);
- this.overlay = Ext.DomHelper.append(document.body, {cls: "x-drag-overlay", html: " "}, true);
- this.overlay.unselectable();
- this.overlay.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
- this.overlay.show();
- Ext.get(this.proxy).setDisplayed("block");
- var size = this.adapter.getElementSize(this);
- this.activeMinSize = this.getMinimumSize();
- this.activeMaxSize = this.getMaximumSize();
- var c1 = size - this.activeMinSize;
- var c2 = Math.max(this.activeMaxSize - size, 0);
- if(this.orientation == Ext.SplitBar.HORIZONTAL){
- this.dd.resetConstraints();
- this.dd.setXConstraint(
- this.placement == Ext.SplitBar.LEFT ? c1 : c2,
- this.placement == Ext.SplitBar.LEFT ? c2 : c1,
- this.tickSize
- );
- this.dd.setYConstraint(0, 0);
- }else{
- this.dd.resetConstraints();
- this.dd.setXConstraint(0, 0);
- this.dd.setYConstraint(
- this.placement == Ext.SplitBar.TOP ? c1 : c2,
- this.placement == Ext.SplitBar.TOP ? c2 : c1,
- this.tickSize
- );
- }
- this.dragSpecs.startSize = size;
- this.dragSpecs.startPoint = [x, y];
- Ext.dd.DDProxy.prototype.b4StartDrag.call(this.dd, x, y);
- },
-
- /**
- * @private Called after the drag operation by the DDProxy
- */
- onEndProxyDrag : function(e){
- Ext.get(this.proxy).setDisplayed(false);
- var endPoint = Ext.lib.Event.getXY(e);
- if(this.overlay){
- Ext.destroy(this.overlay);
- delete this.overlay;
- }
- var newSize;
- if(this.orientation == Ext.SplitBar.HORIZONTAL){
- newSize = this.dragSpecs.startSize +
- (this.placement == Ext.SplitBar.LEFT ?
- endPoint[0] - this.dragSpecs.startPoint[0] :
- this.dragSpecs.startPoint[0] - endPoint[0]
- );
- }else{
- newSize = this.dragSpecs.startSize +
- (this.placement == Ext.SplitBar.TOP ?
- endPoint[1] - this.dragSpecs.startPoint[1] :
- this.dragSpecs.startPoint[1] - endPoint[1]
- );
- }
- newSize = Math.min(Math.max(newSize, this.activeMinSize), this.activeMaxSize);
- if(newSize != this.dragSpecs.startSize){
- if(this.fireEvent('beforeapply', this, newSize) !== false){
- this.adapter.setElementSize(this, newSize);
- this.fireEvent("moved", this, newSize);
- this.fireEvent("resize", this, newSize);
- }
- }
- },
-
- /**
- * Get the adapter this SplitBar uses
- * @return The adapter object
- */
- getAdapter : function(){
- return this.adapter;
- },
-
- /**
- * Set the adapter this SplitBar uses
- * @param {Object} adapter A SplitBar adapter object
- */
- setAdapter : function(adapter){
- this.adapter = adapter;
- this.adapter.init(this);
- },
-
- /**
- * Gets the minimum size for the resizing element
- * @return {Number} The minimum size
- */
- getMinimumSize : function(){
- return this.minSize;
- },
-
- /**
- * Sets the minimum size for the resizing element
- * @param {Number} minSize The minimum size
- */
- setMinimumSize : function(minSize){
- this.minSize = minSize;
- },
-
- /**
- * Gets the maximum size for the resizing element
- * @return {Number} The maximum size
- */
- getMaximumSize : function(){
- return this.maxSize;
- },
-
- /**
- * Sets the maximum size for the resizing element
- * @param {Number} maxSize The maximum size
- */
- setMaximumSize : function(maxSize){
- this.maxSize = maxSize;
- },
-
- /**
- * Sets the initialize size for the resizing element
- * @param {Number} size The initial size
- */
- setCurrentSize : function(size){
- var oldAnimate = this.animate;
- this.animate = false;
- this.adapter.setElementSize(this, size);
- this.animate = oldAnimate;
- },
-
- /**
- * Destroy this splitbar.
- * @param {Boolean} removeEl True to remove the element
- */
- destroy : function(removeEl){
- Ext.destroy(this.shim, Ext.get(this.proxy));
- this.dd.unreg();
- if(removeEl){
- this.el.remove();
- }
- this.purgeListeners();
- }
-});
-
-/**
- * @private static Create our own proxy element element. So it will be the same same size on all browsers, we won't use borders. Instead we use a background color.
- */
-Ext.SplitBar.createProxy = function(dir){
- var proxy = new Ext.Element(document.createElement("div"));
- document.body.appendChild(proxy.dom);
- proxy.unselectable();
- var cls = 'x-splitbar-proxy';
- proxy.addClass(cls + ' ' + (dir == Ext.SplitBar.HORIZONTAL ? cls +'-h' : cls + '-v'));
- return proxy.dom;
-};
-
-/**
- * @class Ext.SplitBar.BasicLayoutAdapter
- * Default Adapter. It assumes the splitter and resizing element are not positioned
- * elements and only gets/sets the width of the element. Generally used for table based layouts.
- */
-Ext.SplitBar.BasicLayoutAdapter = function(){
-};
-
-Ext.SplitBar.BasicLayoutAdapter.prototype = {
- // do nothing for now
- init : function(s){
-
- },
- /**
- * Called before drag operations to get the current size of the resizing element.
- * @param {Ext.SplitBar} s The SplitBar using this adapter
- */
- getElementSize : function(s){
- if(s.orientation == Ext.SplitBar.HORIZONTAL){
- return s.resizingEl.getWidth();
- }else{
- return s.resizingEl.getHeight();
- }
- },
-
- /**
- * Called after drag operations to set the size of the resizing element.
- * @param {Ext.SplitBar} s The SplitBar using this adapter
- * @param {Number} newSize The new size to set
- * @param {Function} onComplete A function to be invoked when resizing is complete
- */
- setElementSize : function(s, newSize, onComplete){
- if(s.orientation == Ext.SplitBar.HORIZONTAL){
- if(!s.animate){
- s.resizingEl.setWidth(newSize);
- if(onComplete){
- onComplete(s, newSize);
- }
- }else{
- s.resizingEl.setWidth(newSize, true, .1, onComplete, 'easeOut');
- }
- }else{
-
- if(!s.animate){
- s.resizingEl.setHeight(newSize);
- if(onComplete){
- onComplete(s, newSize);
- }
- }else{
- s.resizingEl.setHeight(newSize, true, .1, onComplete, 'easeOut');
- }
- }
- }
-};
-
-/**
- *@class Ext.SplitBar.AbsoluteLayoutAdapter
- * @extends Ext.SplitBar.BasicLayoutAdapter
- * Adapter that moves the splitter element to align with the resized sizing element.
- * Used with an absolute positioned SplitBar.
- * @param {Mixed} container The container that wraps around the absolute positioned content. If it's
- * document.body, make sure you assign an id to the body element.
- */
-Ext.SplitBar.AbsoluteLayoutAdapter = function(container){
- this.basic = new Ext.SplitBar.BasicLayoutAdapter();
- this.container = Ext.get(container);
-};
-
-Ext.SplitBar.AbsoluteLayoutAdapter.prototype = {
- init : function(s){
- this.basic.init(s);
- },
-
- getElementSize : function(s){
- return this.basic.getElementSize(s);
- },
-
- setElementSize : function(s, newSize, onComplete){
- this.basic.setElementSize(s, newSize, this.moveSplitter.createDelegate(this, [s]));
- },
-
- moveSplitter : function(s){
- var yes = Ext.SplitBar;
- switch(s.placement){
- case yes.LEFT:
- s.el.setX(s.resizingEl.getRight());
- break;
- case yes.RIGHT:
- s.el.setStyle("right", (this.container.getWidth() - s.resizingEl.getLeft()) + "px");
- break;
- case yes.TOP:
- s.el.setY(s.resizingEl.getBottom());
- break;
- case yes.BOTTOM:
- s.el.setY(s.resizingEl.getTop() - s.el.getHeight());
- break;
- }
- }
-};
-
-/**
- * Orientation constant - Create a vertical SplitBar
- * @static
- * @type Number
- */
-Ext.SplitBar.VERTICAL = 1;
-
-/**
- * Orientation constant - Create a horizontal SplitBar
- * @static
- * @type Number
- */
-Ext.SplitBar.HORIZONTAL = 2;
-
-/**
- * Placement constant - The resizing element is to the left of the splitter element
- * @static
- * @type Number
- */
-Ext.SplitBar.LEFT = 1;
-
-/**
- * Placement constant - The resizing element is to the right of the splitter element
- * @static
- * @type Number
- */
-Ext.SplitBar.RIGHT = 2;
-
-/**
- * Placement constant - The resizing element is positioned above the splitter element
- * @static
- * @type Number
- */
-Ext.SplitBar.TOP = 3;
-
-/**
- * Placement constant - The resizing element is positioned under splitter element
- * @static
- * @type Number
- */
-Ext.SplitBar.BOTTOM = 4;
-/**
- * @class Ext.Container
- * @extends Ext.BoxComponent
- * Base class for any {@link Ext.BoxComponent} that may contain other Components. Containers handle the - * basic behavior of containing items, namely adding, inserting and removing items.
- * - *The most commonly used Container classes are {@link Ext.Panel}, {@link Ext.Window} and {@link Ext.TabPanel}.
- * If you do not need the capabilities offered by the aforementioned classes you can create a lightweight
- * Container to be encapsulated by an HTML element to your specifications by using the
- * {@link Ext.Component#autoEl autoEl}
config option. This is a useful technique when creating
- * embedded {@link Ext.layout.ColumnLayout column} layouts inside {@link Ext.form.FormPanel FormPanels}
- * for example.
The code below illustrates both how to explicitly create a Container, and how to implicitly
- * create one using the 'container'
xtype:
-// explicitly create a Container
-var embeddedColumns = new Ext.Container({
- autoEl: 'div', // This is the default
- layout: 'column',
- defaults: {
- // implicitly create Container by specifying xtype
- xtype: 'container',
- autoEl: 'div', // This is the default.
- layout: 'form',
- columnWidth: 0.5,
- style: {
- padding: '10px'
- }
- },
-// The two items below will be Ext.Containers, each encapsulated by a <DIV> element.
- items: [{
- items: {
- xtype: 'datefield',
- name: 'startDate',
- fieldLabel: 'Start date'
- }
- }, {
- items: {
- xtype: 'datefield',
- name: 'endDate',
- fieldLabel: 'End date'
- }
- }]
-});
- *
- * Layout
- *Container classes delegate the rendering of child Components to a layout
- * manager class which must be configured into the Container using the
- * {@link #layout}
configuration property.
When either specifying child {@link #items}
of a Container,
- * or dynamically {@link #add adding} Components to a Container, remember to
- * consider how you wish the Container to arrange those child elements, and
- * whether those child elements need to be sized using one of Ext's built-in
- * {@link #layout}
schemes. By default, Containers use the
- * {@link Ext.layout.ContainerLayout ContainerLayout} scheme which only
- * renders child components, appending them one after the other inside the
- * Container, and does not apply any sizing at all.
A common mistake is when a developer neglects to specify a
- * {@link #layout}
(e.g. widgets like GridPanels or
- * TreePanels are added to Containers for which no {@link #layout}
- * has been specified). If a Container is left to use the default
- * {@link Ext.layout.ContainerLayout ContainerLayout} scheme, none of its
- * child components will be resized, or changed in any way when the Container
- * is resized.
Certain layout managers allow dynamic addition of child components. - * Those that do include {@link Ext.layout.CardLayout}, - * {@link Ext.layout.AnchorLayout}, {@link Ext.layout.FormLayout}, and - * {@link Ext.layout.TableLayout}. For example:
-// Create the GridPanel.
-var myNewGrid = new Ext.grid.GridPanel({
- store: myStore,
- columns: myColumnModel,
- title: 'Results', // the title becomes the title of the tab
-});
-
-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.
{@link #layout}
and should not need
- * to be set manually.
- */
- /**
- * @cfg {String/Object} layout
- * *Important: In order for child items to be correctly sized and
- * positioned, typically a layout manager must be specified through
- * the layout
configuration option.
The sizing and positioning of child {@link items} is the responsibility of - * the Container's layout manager which creates and manages the type of layout - * you have in mind. For example:
-new Ext.Window({
- width:300, height: 300,
- layout: 'fit', // explicitly set layout manager: override the default (layout:'auto')
- items: [{
- title: 'Panel inside a Window'
- }]
-}).show();
- *
- * If the {@link #layout} configuration is not explicitly specified for
- * a general purpose container (e.g. Container or Panel) the
- * {@link Ext.layout.ContainerLayout default layout manager} will be used
- * which does nothing but render child components sequentially into the
- * Container (no sizing or positioning will be performed in this situation).
- * Some container classes implicitly specify a default layout
- * (e.g. FormPanel specifies layout:'form'
). Other specific
- * purpose classes internally specify/manage their internal layout (e.g.
- * GridPanel, TabPanel, TreePanel, Toolbar, Menu, etc.).
layout
may be specified as either as an Object or
- * as a String:
-layout: {
- type: 'vbox',
- padding: '5',
- align: 'left'
-}
-
- *
- * type
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:
{@link Ext.layout.AbsoluteLayout absolute}
{@link Ext.layout.AccordionLayout accordion}
{@link Ext.layout.AnchorLayout anchor}
{@link Ext.layout.ContainerLayout auto}
Default{@link Ext.layout.BorderLayout border}
{@link Ext.layout.CardLayout card}
{@link Ext.layout.ColumnLayout column}
{@link Ext.layout.FitLayout fit}
{@link Ext.layout.FormLayout form}
{@link Ext.layout.HBoxLayout hbox}
{@link Ext.layout.MenuLayout menu}
{@link Ext.layout.TableLayout table}
{@link Ext.layout.ToolbarLayout toolbar}
{@link Ext.layout.VBoxLayout vbox}
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'
-}
-
- * layout
The layout type
to be used for this container (see list
- * of valid layout type values above).
{@link #layoutConfig}
Additional layout specific configuration properties. For complete
- * details regarding the valid config options for each layout type, see the
- * layout class corresponding to the layout
specified.
{@link #layout}
if {@link #layout}
- * has been specified as a string.
- */
- /**
- * @cfg {Boolean/Number} bufferResize
- * When set to true (50 milliseconds) or a number of milliseconds, the layout assigned for this container will buffer
- * the frequency it calculates and does a re-layout of components. This is useful for heavy containers or containers
- * with a large quantity of sub-components for which frequent layout calls would be expensive. Defaults to 50
.
- */
- bufferResize: 50,
-
- /**
- * @cfg {String/Number} activeItem
- * A string component id or the numeric index of the component that should be initially activated within the
- * container's layout on render. For example, activeItem: 'item-1' or activeItem: 0 (index 0 = the first
- * item in the container's collection). activeItem only applies to layout styles that can display
- * items one at a time (like {@link Ext.layout.AccordionLayout}, {@link Ext.layout.CardLayout} and
- * {@link Ext.layout.FitLayout}). Related to {@link Ext.layout.ContainerLayout#activeItem}.
- */
- /**
- * @cfg {Object/Array} items
- * ** IMPORTANT: be sure to {@link #layout specify a layout
} if needed ! **
- * A single item, or an array of child Components to be added to this container, - * for example:
- *
-// specifying a single item
-items: {...},
-layout: 'fit', // specify a layout!
-
-// specifying multiple items
-items: [{...}, {...}],
-layout: 'anchor', // specify a layout!
- *
- * Each item may be:
- *{@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
.This option is a means of applying default settings to all added items whether added through the {@link #items} - * config or via the {@link #add} or {@link #insert} methods.
- *If an added item is a config object, and not an instantiated Component, then the default properties are - * unconditionally applied. If the added item is an instantiated Component, then the default properties are - * applied conditionally so as not to override existing properties in the item.
- *If the defaults option is specified as a function, then the function will be called using this Container as the
- * scope (this
reference) and passing the added item as the first parameter. Any resulting object
- * from that call is then applied to the item as default properties.
For example, to automatically apply padding to the body of each of a set of
- * contained {@link Ext.Panel} items, you could pass: defaults: {bodyStyle:'padding:15px'}
.
Usage:
-defaults: { // defaults are applied to items, not the container
- autoScroll:true
-},
-items: [
- {
- xtype: 'panel', // defaults do not have precedence over
- id: 'panel1', // options in config objects, so the defaults
- autoScroll: false // will not be applied here, panel1 will be autoScroll:false
- },
- new Ext.Panel({ // defaults do have precedence over options
- id: 'panel2', // options in components, so the defaults
- autoScroll: false // will be applied here, panel2 will be autoScroll:true.
- })
-]
- *
- */
-
-
- /** @cfg {Boolean} autoDestroy
- * If true the container will automatically destroy any contained component that is removed from it, else
- * destruction must be handled manually (defaults to true).
- */
- autoDestroy : true,
-
- /** @cfg {Boolean} forceLayout
- * If true the container will force a layout initially even if hidden or collapsed. This option
- * is useful for forcing forms to render in collapsed or hidden containers. (defaults to false).
- */
- forceLayout: false,
-
- /** @cfg {Boolean} hideBorders
- * True to hide the borders of each contained component, false to defer to the component's existing
- * border settings (defaults to false).
- */
- /** @cfg {String} defaultType
- * The default {@link Ext.Component xtype} of child Components to create in this Container when - * a child item is specified as a raw configuration object, rather than as an instantiated Component.
- *Defaults to 'panel'
, except {@link Ext.menu.Menu} which defaults to 'menuitem'
,
- * and {@link Ext.Toolbar} and {@link Ext.ButtonGroup} which default to 'button'
.
'resize'
.
- */
- resizeEvent: 'resize',
-
- /**
- * @cfg {Array} bubbleEvents
- * An array of events that, when fired, should be bubbled to any parent container.
- * See {@link Ext.util.Observable#enableBubble}.
- * Defaults to ['add', 'remove']
.
- */
- bubbleEvents: ['add', 'remove'],
-
- // private
- initComponent : function(){
- Ext.Container.superclass.initComponent.call(this);
-
- this.addEvents(
- /**
- * @event afterlayout
- * Fires when the components in this container are arranged by the associated layout manager.
- * @param {Ext.Container} this
- * @param {ContainerLayout} layout The ContainerLayout implementation for this container
- */
- 'afterlayout',
- /**
- * @event beforeadd
- * Fires before any {@link Ext.Component} is added or inserted into the container.
- * A handler can return false to cancel the add.
- * @param {Ext.Container} this
- * @param {Ext.Component} component The component being added
- * @param {Number} index The index at which the component will be added to the container's items collection
- */
- 'beforeadd',
- /**
- * @event beforeremove
- * Fires before any {@link Ext.Component} is removed from the container. A handler can return
- * false to cancel the remove.
- * @param {Ext.Container} this
- * @param {Ext.Component} component The component being removed
- */
- 'beforeremove',
- /**
- * @event add
- * @bubbles
- * Fires after any {@link Ext.Component} is added or inserted into the container.
- * @param {Ext.Container} this
- * @param {Ext.Component} component The component that was added
- * @param {Number} index The index at which the component was added to the container's items collection
- */
- 'add',
- /**
- * @event remove
- * @bubbles
- * Fires after any {@link Ext.Component} is removed from the container.
- * @param {Ext.Container} this
- * @param {Ext.Component} component The component that was removed
- */
- 'remove'
- );
-
- this.enableBubble(this.bubbleEvents);
-
- /**
- * The collection of components in this container as a {@link Ext.util.MixedCollection}
- * @type MixedCollection
- * @property items
- */
- var items = this.items;
- if(items){
- delete this.items;
- this.add(items);
- }
- },
-
- // private
- initItems : function(){
- if(!this.items){
- this.items = new Ext.util.MixedCollection(false, this.getComponentId);
- this.getLayout(); // initialize the layout
- }
- },
-
- // private
- setLayout : function(layout){
- if(this.layout && this.layout != layout){
- this.layout.setContainer(null);
- }
- this.initItems();
- this.layout = layout;
- layout.setContainer(this);
- },
-
- afterRender: function(){
- this.layoutDone = false;
- if(!this.layout){
- this.layout = 'auto';
- }
- if(Ext.isObject(this.layout) && !this.layout.layout){
- this.layoutConfig = this.layout;
- this.layout = this.layoutConfig.type;
- }
- if(Ext.isString(this.layout)){
- this.layout = new Ext.Container.LAYOUTS[this.layout.toLowerCase()](this.layoutConfig);
- }
- this.setLayout(this.layout);
-
- // BoxComponent's afterRender will set the size.
- // This will will trigger a layout if the layout is configured to monitor resize
- Ext.Container.superclass.afterRender.call(this);
-
- if(Ext.isDefined(this.activeItem)){
- var item = this.activeItem;
- delete this.activeItem;
- this.layout.setActiveItem(item);
- }
-
- // If we have no ownerCt and the BoxComponent's sizing did not trigger a layout, force a layout
- if(!this.ownerCt && !this.layoutDone){
- 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 : - *
add
- * is called, you may need to call {@link #doLayout} to refresh the view which causes
- * any unrendered child Components to be rendered. This is required so that you can
- * add
multiple child components if needed while only refreshing the layout
- * once. For example:
-var tb = new {@link Ext.Toolbar}();
-tb.render(document.body); // toolbar is rendered
-tb.add({text:'Button 1'}); // add multiple items ({@link #defaultType} for {@link Ext.Toolbar Toolbar} is 'button')
-tb.add({text:'Button 2'});
-tb.{@link #doLayout}(); // refresh the layout
- *
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:
- * String
: representing the {@link Ext.Component#itemId itemId}
- * or {@link Ext.Component#id id}
of the child component Number
: representing the position of the child component
- * within the {@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)){ - comp = comp.getItemId(); - } - return this.items.get(comp); - }, - - // private - lookupComponent : function(comp){ - if(Ext.isString(comp)){ - return Ext.ComponentMgr.get(comp); - }else if(!comp.events){ - return this.createComponent(comp); - } - return comp; - }, - - // private - createComponent : function(config, defaultType){ - // add in ownerCt at creation time but then immediately - // remove so that onBeforeAdd can handle it - var c = config.render ? config : Ext.create(Ext.apply({ - ownerCt: this - }, config), defaultType || this.defaultType); - delete c.ownerCt; - return c; - }, - - /** - * We can only lay out if there is a view area in which to layout. - * display:none on the layout target, *or any of its parent elements* will mean it has no view area. - */ - canLayout: function() { - var el = this.getLayoutTarget(), vs; - return !!(el && (vs = el.dom.offsetWidth || el.dom.offsetHeight)); - }, - - /** - * Force this container's layout to be recalculated. A call to this function is required after adding a new component - * to an already rendered container, or possibly after changing sizing/position properties of child components. - * @param {Boolean} shallow (optional) True to only calc the layout of this component, and let child components auto - * calc layouts as required (defaults to false, which calls doLayout recursively for each subcontainer) - * @param {Boolean} force (optional) True to force a layout to occur, even if the item is hidden. - * @return {Ext.Container} this - */ - doLayout: function(shallow, force){ - var rendered = this.rendered, - forceLayout = force || this.forceLayout, - cs, i, len, c; - - this.layoutDone = true; - if(!this.canLayout() || this.collapsed){ - this.deferLayout = this.deferLayout || !shallow; - if(!forceLayout){ - return; - } - shallow = shallow && !this.deferLayout; - } else { - delete this.deferLayout; - } - - cs = (shallow !== true && this.items) ? this.items.items : []; - -// Inhibit child Containers from relaying on resize since we are about to to explicitly call doLayout on them all! - for(i = 0, len = cs.length; i < len; i++){ - if ((c = cs[i]).layout) { - c.suspendLayoutResize = true; - } - } - -// Tell the layout manager to ensure all child items are rendered, and sized according to their rules. -// Will not cause the child items to relayout. - if(rendered && this.layout){ - this.layout.layout(); - } - -// Explicitly lay out all child items - for(i = 0; i < len; i++){ - if((c = cs[i]).doLayout){ - c.doLayout(false, forceLayout); - } - } - if(rendered){ - this.onLayout(shallow, forceLayout); - } - // Initial layout completed - this.hasLayout = true; - delete this.forceLayout; - -// Re-enable child layouts relaying on resize. - for(i = 0; i < len; i++){ - if ((c = cs[i]).layout) { - delete c.suspendLayoutResize; - } - } - }, - - //private - onLayout : Ext.emptyFn, - - onResize: function(adjWidth, adjHeight, rawWidth, rawHeight){ - Ext.Container.superclass.onResize.apply(this, arguments); - if ((this.rendered && this.layout && this.layout.monitorResize) && !this.suspendLayoutResize) { - this.layout.onResize(); - } - }, - - // private - hasLayoutPending: function(){ - // Traverse hierarchy to see if any parent container has a pending layout. - var pending = this.layoutPending; - this.ownerCt.bubble(function(c){ - return !(pending = c.layoutPending); - }); - return pending; - - }, - - onShow : function(){ - Ext.Container.superclass.onShow.call(this); - if(Ext.isDefined(this.deferLayout)){ - 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(){ - var c; - if(this.items){ - while(c = this.items.first()){ - this.doRemove(c, true); - } - } - 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 = Ext.extend(Object, { - /** - * @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'
- *
- *
- */
- /**
- * @cfg {Boolean} renderHidden
- * True to hide each contained item on render (defaults to false).
- */
-
- /**
- * A reference to the {@link Ext.Component} that is active. For example,
- * if(myPanel.layout.activeItem.id == 'item-1') { ... }
- *
- * 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}). Read-only. Related to {@link Ext.Container#activeItem}.
- * @type {Ext.Component}
- * @property activeItem
- */
-
- // private
- monitorResize:false,
- // private
- activeItem : null,
-
- constructor : function(config){
- Ext.apply(this, config);
- },
-
- // private
- layout : function(){
- var target = this.container.getLayoutTarget();
- if(!(this.hasLayout || Ext.isEmpty(this.targetCls))){
- target.addClass(this.targetCls)
- }
- this.onLayout(this.container, target);
- this.container.fireEvent('afterlayout', this.container, this);
- this.hasLayout = true;
- },
-
- // private
- onLayout : function(ct, target){
- this.renderAll(ct, target);
- },
-
- // private
- isValidParent : function(c, target){
- return target && c.getPositionEl().dom.parentNode == (target.dom || target);
- },
-
- // private
- renderAll : function(ct, target){
- var items = ct.items.items;
- for(var i = 0, len = items.length; i < len; i++) {
- var c = items[i];
- if(c && (!c.rendered || !this.isValidParent(c, target))){
- this.renderItem(c, i, target);
- }
- }
- },
-
- // private
- renderItem : function(c, position, target){
- if(c && !c.rendered){
- c.render(target, position);
- this.configureItem(c, position);
- }else if(c && !this.isValidParent(c, target)){
- if(Ext.isNumber(position)){
- position = target.dom.childNodes[position];
- }
- target.dom.insertBefore(c.getPositionEl().dom, position || null);
- c.container = target;
- this.configureItem(c, position);
- }
- },
-
- // private
- configureItem: function(c, position){
- if(this.extraCls){
- var t = c.getPositionEl ? c.getPositionEl() : c;
- t.addClass(this.extraCls);
- }
- // If we are forcing a layout, do so *before* we hide so elements have height/width
- if(c.doLayout && this.forceLayout){
- c.doLayout(false, true);
- }
- if (this.renderHidden && c != this.activeItem) {
- c.hide();
- }
- },
-
- onRemove: function(c){
- if(this.activeItem == c){
- delete this.activeItem;
- }
- if(c.rendered && this.extraCls){
- var t = c.getPositionEl ? c.getPositionEl() : c;
- t.removeClass(this.extraCls);
- }
- },
-
- // private
- onResize: function(){
- var ct = this.container,
- b = ct.bufferResize;
-
- if (ct.collapsed){
- return;
- }
-
- // Not having an ownerCt negates the buffering: floating and top level
- // Containers (Viewport, Window, ToolTip, Menu) need to lay out ASAP.
- if (b && ct.ownerCt) {
- // If we do NOT already have a layout pending from an ancestor, schedule one.
- // If there is a layout pending, we do nothing here.
- // buffering to be deprecated soon
- if (!ct.hasLayoutPending()){
- if(!this.resizeTask){
- this.resizeTask = new Ext.util.DelayedTask(this.runLayout, this);
- this.resizeBuffer = Ext.isNumber(b) ? b : 50;
- }
- ct.layoutPending = true;
- this.resizeTask.delay(this.resizeBuffer);
- }
- }else{
- ct.doLayout(false, this.forceLayout);
- }
- },
-
- // private
- runLayout: function(){
- var ct = this.container;
- ct.doLayout();
- delete ct.layoutPending;
- },
-
- // private
- setContainer : function(ct){
- // No longer use events to handle resize. Instead this will be handled through a direct function call.
- /*
- if(this.monitorResize && ct != this.container){
- var old = this.container;
- if(old){
- old.un(old.resizeEvent, this.onResize, this);
- }
- if(ct){
- ct.on(ct.resizeEvent, this.onResize, this);
- }
- }
- */
- this.container = ct;
- },
-
- // private
- parseMargins : function(v){
- if(Ext.isNumber(v)){
- v = v.toString();
- }
- var ms = v.split(' ');
- var len = ms.length;
- if(len == 1){
- ms[1] = ms[0];
- ms[2] = ms[0];
- ms[3] = ms[0];
- }
- if(len == 2){
- ms[2] = ms[0];
- ms[3] = ms[1];
- }
- if(len == 3){
- ms[3] = ms[1];
- }
- return {
- top:parseInt(ms[0], 10) || 0,
- right:parseInt(ms[1], 10) || 0,
- bottom:parseInt(ms[2], 10) || 0,
- left:parseInt(ms[3], 10) || 0
- };
- },
-
- /**
- * The {@link Ext.Template Ext.Template} used by Field rendering layout classes (such as
- * {@link Ext.layout.FormLayout}) to create the DOM structure of a fully wrapped,
- * labeled and styled form Field. A default Template is supplied, but this may be
- * overriden to create custom field structures. The template processes values returned from
- * {@link Ext.layout.FormLayout#getTemplateArgs}.
- * @property fieldTpl
- * @type Ext.Template
- */
- fieldTpl: (function() {
- var t = new Ext.Template(
- '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
- }
-});
-
- */
-Ext.layout.FitLayout = Ext.extend(Ext.layout.ContainerLayout, {
- // private
- monitorResize:true,
-
- // private
- onLayout : function(ct, target){
- Ext.layout.FitLayout.superclass.onLayout.call(this, ct, target);
- if(!this.container.collapsed){
- this.setItemSize(this.activeItem || ct.items.itemAt(0), target.getViewSize(true));
- }
- },
-
- // private
- setItemSize : function(item, size){
- if(item && size.height > 0){ // display none?
- item.setSize(size);
- }
- }
-});
-Ext.Container.LAYOUTS['fit'] = Ext.layout.FitLayout;/**
- * @class Ext.layout.CardLayout
- * @extends Ext.layout.FitLayout
- * 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>'
- }]
-});
-
- */
-Ext.layout.CardLayout = Ext.extend(Ext.layout.FitLayout, {
- /**
- * @cfg {Boolean} deferredRender
- * True to render each contained item at the time it becomes active, false to render all contained items
- * as soon as the layout is rendered (defaults to false). If there is a significant amount of content or
- * a lot of heavy controls being rendered into panels that are not displayed by default, setting this to
- * true might improve performance.
- */
- deferredRender : false,
-
- /**
- * @cfg {Boolean} layoutOnCardChange
- * True to force a layout of the active item when the active card is changed. Defaults to false.
- */
- layoutOnCardChange : false,
-
- /**
- * @cfg {Boolean} renderHidden @hide
- */
- // private
- renderHidden : true,
-
- constructor: function(config){
- Ext.layout.CardLayout.superclass.constructor.call(this, config);
- // this.forceLayout = (this.deferredRender === false);
- },
-
- /**
- * Sets the active (visible) item in the layout.
- * @param {String/Number} item The string component id or numeric index of the item to activate
- */
- setActiveItem : function(item){
- var ai = this.activeItem;
- item = this.container.getComponent(item);
- if(ai != item){
- if(ai){
- ai.hide();
- ai.fireEvent('deactivate', ai);
- }
- var layout = item.doLayout && (this.layoutOnCardChange || !item.rendered);
- this.activeItem = item;
- if(item){
- item.show();
- }
- this.layout();
- if(item && layout){
- item.doLayout();
- }
- item.fireEvent('activate', item);
- }
- },
-
- // private
- renderAll : function(ct, target){
- if(this.deferredRender){
- this.renderItem(this.activeItem, undefined, target);
- }else{
- Ext.layout.CardLayout.superclass.renderAll.call(this, ct, target);
- }
- }
-});
-Ext.Container.LAYOUTS['card'] = Ext.layout.CardLayout;/**
- * @class Ext.layout.AnchorLayout
- * @extends Ext.layout.ContainerLayout
- * 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%'
- }]
-});
- *
- */
-Ext.layout.AnchorLayout = Ext.extend(Ext.layout.ContainerLayout, {
- /**
- * @cfg {String} anchor
- * 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
- }]
-});
-
- */
-Ext.layout.ColumnLayout = Ext.extend(Ext.layout.ContainerLayout, {
- // private
- monitorResize:true,
-
- extraCls: 'x-column',
-
- scrollOffset : 0,
-
- // private
-
- targetCls: 'x-column-layout-ct',
-
- isValidParent : function(c, target){
- return c.getPositionEl().dom.parentNode == this.innerCt.dom;
- },
-
- // private
- onLayout : function(ct, target){
- var cs = ct.items.items, len = cs.length, c, i;
-
- if(!this.innerCt){
- // the innerCt prevents wrapping and shuffling while
- // the container is resizing
- this.innerCt = target.createChild({cls:'x-column-inner'});
- this.innerCt.createChild({cls:'x-clear'});
- }
- this.renderAll(ct, this.innerCt);
-
- var size = target.getViewSize(true);
-
- if(size.width < 1 && size.height < 1){ // display none?
- return;
- }
-
- var w = size.width - this.scrollOffset,
- h = size.height,
- pw = w;
-
- this.innerCt.setWidth(w);
-
- // some columns can be percentages while others are fixed
- // so we need to make 2 passes
-
- for(i = 0; i < len; i++){
- c = cs[i];
- if(!c.columnWidth){
- pw -= (c.getSize().width + c.getPositionEl().getMargins('lr'));
- }
- }
-
- pw = pw < 0 ? 0 : pw;
-
- for(i = 0; i < len; i++){
- c = cs[i];
- if(c.columnWidth){
- c.setSize(Math.floor(c.columnWidth * pw) - c.getPositionEl().getMargins('lr'));
- }
- }
- }
-
- /**
- * @property activeItem
- * @hide
- */
-});
-
-Ext.Container.LAYOUTS['column'] = Ext.layout.ColumnLayout;/**
- * @class Ext.layout.BorderLayout
- * @extends Ext.layout.ContainerLayout
- * This is a multi-pane, application-oriented UI layout style that supports multiple - * nested panels, automatic {@link Ext.layout.BorderLayout.Region#split split} bars between - * {@link Ext.layout.BorderLayout.Region#BorderLayout.Region regions} and built-in - * {@link Ext.layout.BorderLayout.Region#collapsible expanding and collapsing} of regions.
- *This class is intended to be extended or created via the layout:'border' - * {@link Ext.Container#layout} config, and should generally not need to be created directly - * via the new keyword.
- *BorderLayout does not have any direct config options (other than inherited ones). - * All configuration options available for customizing the BorderLayout are at the - * {@link Ext.layout.BorderLayout.Region} and {@link Ext.layout.BorderLayout.SplitRegion} - * levels.
- *Example usage:
- *
-var myBorderPanel = new Ext.Panel({
- {@link Ext.Component#renderTo renderTo}: document.body,
- {@link Ext.BoxComponent#width width}: 700,
- {@link Ext.BoxComponent#height height}: 500,
- {@link Ext.Panel#title title}: 'Border Layout',
- {@link Ext.Container#layout layout}: 'border',
- {@link Ext.Container#items items}: [{
- {@link Ext.Panel#title title}: 'South Region is resizable',
- {@link Ext.layout.BorderLayout.Region#BorderLayout.Region region}: 'south', // position for region
- {@link Ext.BoxComponent#height height}: 100,
- {@link Ext.layout.BorderLayout.Region#split split}: true, // enable resizing
- {@link Ext.SplitBar#minSize minSize}: 75, // defaults to {@link Ext.layout.BorderLayout.Region#minHeight 50}
- {@link Ext.SplitBar#maxSize maxSize}: 150,
- {@link Ext.layout.BorderLayout.Region#margins margins}: '0 5 5 5'
- },{
- // xtype: 'panel' implied by default
- {@link Ext.Panel#title title}: 'West Region is collapsible',
- {@link Ext.layout.BorderLayout.Region#BorderLayout.Region region}:'west',
- {@link Ext.layout.BorderLayout.Region#margins margins}: '5 0 0 5',
- {@link Ext.BoxComponent#width width}: 200,
- {@link Ext.layout.BorderLayout.Region#collapsible collapsible}: true, // make collapsible
- {@link Ext.layout.BorderLayout.Region#cmargins cmargins}: '5 5 0 5', // adjust top margin when collapsed
- {@link Ext.Component#id id}: 'west-region-container',
- {@link Ext.Container#layout layout}: 'fit',
- {@link Ext.Panel#unstyled unstyled}: true
- },{
- {@link Ext.Panel#title title}: 'Center Region',
- {@link Ext.layout.BorderLayout.Region#BorderLayout.Region region}: 'center', // center region is required, no width/height specified
- {@link Ext.Component#xtype xtype}: 'container',
- {@link Ext.Container#layout layout}: 'fit',
- {@link Ext.layout.BorderLayout.Region#margins margins}: '5 5 0 0'
- }]
-});
-
- * Notes:
-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}
- *
- */
- /**
- * @cfg {Object} cmargins
- * An object containing margins to apply to the region when in the collapsed 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.
- *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.layout.BorderLayout.SplitRegion.superclass.destroy.call(this); - } -}); - -Ext.Container.LAYOUTS['border'] = Ext.layout.BorderLayout;/** - * @class Ext.layout.FormLayout - * @extends Ext.layout.AnchorLayout - *This layout manager is specifically designed for rendering and managing child Components of - * {@link Ext.form.FormPanel forms}. It is responsible for rendering the labels of - * {@link Ext.form.Field Field}s.
- * - *This layout manager is used when a Container is configured with the layout:'form' - * {@link Ext.Container#layout layout} config option, and should generally not need to be created directly - * via the new keyword. See {@link Ext.Container#layout} for additional details.
- * - *In an application, it will usually be preferrable to use a {@link Ext.form.FormPanel FormPanel} - * (which is configured with FormLayout as its layout class by default) since it also provides built-in - * functionality for {@link Ext.form.BasicForm#doAction loading, validating and submitting} the form.
- * - *A {@link Ext.Container Container} using the FormLayout layout manager (e.g. - * {@link Ext.form.FormPanel} or specifying layout:'form') can also accept the following - * layout-specific config properties:
Any Component (including Fields) managed by FormLayout accepts the following as a config option: - *
Any Component managed by FormLayout may be rendered as a form field (with an associated label) by - * configuring it with a non-null {@link Ext.Component#fieldLabel fieldLabel}. Components configured - * in this way may be configured with the following options which affect the way the FormLayout renders them: - *
Example usage:
- *
-// Required if showing validation messages
-Ext.QuickTips.init();
-
-// While you can create a basic Panel with layout:'form', practically
-// you should usually use a FormPanel to also get its form functionality
-// since it already creates a FormLayout internally.
-var form = new Ext.form.FormPanel({
- title: 'Form Layout',
- bodyStyle: 'padding:15px',
- width: 350,
- defaultType: 'textfield',
- defaults: {
- // applied to each contained item
- width: 230,
- msgTarget: 'side'
- },
- items: [{
- fieldLabel: 'First Name',
- name: 'first',
- allowBlank: false,
- {@link Ext.Component#labelSeparator labelSeparator}: ':' // override labelSeparator layout config
- },{
- fieldLabel: 'Last Name',
- name: 'last'
- },{
- fieldLabel: 'Email',
- name: 'email',
- vtype:'email'
- }, {
- xtype: 'textarea',
- hideLabel: true, // override hideLabels layout config
- name: 'msg',
- anchor: '100% -53'
- }
- ],
- buttons: [
- {text: 'Save'},
- {text: 'Cancel'}
- ],
- layoutConfig: {
- {@link #labelSeparator}: '~' // superseded by assignment below
- },
- // config options applicable to container when layout='form':
- hideLabels: false,
- labelAlign: 'left', // or 'right' or 'top'
- {@link Ext.form.FormPanel#labelSeparator labelSeparator}: '>>', // takes precedence over layoutConfig value
- labelWidth: 65, // defaults to 100
- labelPad: 8 // defaults to 5, must specify labelWidth to be honored
-});
-
- */
-Ext.layout.FormLayout = Ext.extend(Ext.layout.AnchorLayout, {
-
- /**
- * @cfg {String} labelSeparator
- * See {@link Ext.form.FormPanel}.{@link Ext.form.FormPanel#labelSeparator labelSeparator}. Configuration
- * of this property at the container level takes precedence.
- */
- labelSeparator : ':',
-
- /**
- * Read only. The CSS style specification string added to field labels in this layout if not
- * otherwise {@link Ext.Component#labelStyle specified by each contained field}.
- * @type String
- * @property labelStyle
- */
-
- /**
- * @cfg {Boolean} trackLabels
- * True to show/hide the field label when the field is hidden. Defaults to false.
- */
- trackLabels: false,
-
-
- onRemove: function(c){
- Ext.layout.FormLayout.superclass.onRemove.call(this, c);
- if(this.trackLabels){
- c.un('show', this.onFieldShow, this);
- c.un('hide', this.onFieldHide, this);
- }
- // check for itemCt, since we may be removing a fieldset or something similar
- var el = c.getPositionEl(),
- ct = c.getItemCt && c.getItemCt();
- if(c.rendered && ct){
- if (el && el.dom) {
- el.insertAfter(ct);
- }
- Ext.destroy(ct);
- Ext.destroyMembers(c, 'label', 'itemCt');
- if(c.customItemCt){
- Ext.destroyMembers(c, 'getItemCt', 'customItemCt');
- }
- }
- },
-
- // private
- setContainer : function(ct){
- Ext.layout.FormLayout.superclass.setContainer.call(this, ct);
- if(ct.labelAlign){
- ct.addClass('x-form-label-'+ct.labelAlign);
- }
-
- if(ct.hideLabels){
- Ext.apply(this, {
- labelStyle: 'display:none',
- elementStyle: 'padding-left:0;',
- labelAdjust: 0
- });
- }else{
- this.labelSeparator = ct.labelSeparator || this.labelSeparator;
- ct.labelWidth = ct.labelWidth || 100;
- if(Ext.isNumber(ct.labelWidth)){
- var pad = Ext.isNumber(ct.labelPad) ? ct.labelPad : 5;
- Ext.apply(this, {
- labelAdjust: ct.labelWidth + pad,
- labelStyle: 'width:' + ct.labelWidth + 'px;',
- elementStyle: 'padding-left:' + (ct.labelWidth + pad) + 'px'
- });
- }
- if(ct.labelAlign == 'top'){
- Ext.apply(this, {
- labelStyle: 'width:auto;',
- labelAdjust: 0,
- elementStyle: 'padding-left:0;'
- });
- }
- }
- },
-
- // private
- isHide: function(c){
- return c.hideLabel || this.container.hideLabels;
- },
-
- onFieldShow: function(c){
- c.getItemCt().removeClass('x-hide-' + c.hideMode);
- },
-
- onFieldHide: function(c){
- c.getItemCt().addClass('x-hide-' + c.hideMode);
- },
-
- //private
- getLabelStyle: function(s){
- var ls = '', items = [this.labelStyle, s];
- for (var i = 0, len = items.length; i < len; ++i){
- if (items[i]){
- ls += items[i];
- if (ls.substr(-1, 1) != ';'){
- ls += ';'
- }
- }
- }
- return ls;
- },
-
- /**
- * @cfg {Ext.Template} fieldTpl
- * A {@link Ext.Template#compile compile}d {@link Ext.Template} for rendering
- * the fully wrapped, labeled and styled form Field. Defaults to:
-new Ext.Template(
- '<div class="x-form-item {itemCls}" tabIndex="-1">',
- '<label for="{id}" style="{labelStyle}" class="x-form-item-label">{label}{labelSeparator}</label>',
- '<div class="x-form-element" id="x-form-el-{id}" style="{elementStyle}">',
- '</div><div class="{clearCls}"></div>',
- '</div>'
-);
-
- * This may be specified to produce a different DOM structure when rendering form Fields.
- *A description of the properties within the template follows:
Also see {@link #getTemplateArgs}
- */ - - // private - renderItem : function(c, position, target){ - if(c && (c.isFormField || c.fieldLabel) && c.inputType != 'hidden'){ - var args = this.getTemplateArgs(c); - if(Ext.isNumber(position)){ - position = target.dom.childNodes[position] || null; - } - if(position){ - c.itemCt = this.fieldTpl.insertBefore(position, args, true); - }else{ - c.itemCt = this.fieldTpl.append(target, args, true); - } - if(!c.getItemCt){ - // Non form fields don't have getItemCt, apply it here - // This will get cleaned up in onRemove - Ext.apply(c, { - getItemCt: function(){ - return c.itemCt; - }, - customItemCt: true - }); - } - c.label = c.getItemCt().child('label.x-form-item-label'); - if(!c.rendered){ - c.render('x-form-el-' + c.id); - }else if(!this.isValidParent(c, target)){ - Ext.fly('x-form-el-' + c.id).appendChild(c.getPositionEl()); - } - if(this.trackLabels){ - if(c.hidden){ - this.onFieldHide(c); - } - c.on({ - scope: this, - show: this.onFieldShow, - hide: this.onFieldHide - }); - } - this.configureItem(c); - }else { - Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments); - } - }, - - /** - *Provides template arguments for rendering the fully wrapped, labeled and styled form Field.
- *This method returns an object hash containing properties used by the layout's {@link #fieldTpl} - * to create a correctly wrapped, labeled and styled form Field. This may be overriden to - * create custom layouts. The properties which must be returned are:
This is a layout that manages multiple Panels in an expandable accordion style such that only - * one Panel can be expanded at any given time. Each Panel has built-in support for expanding and collapsing.
- *Note: Only Ext.Panels and all subclasses of Ext.Panel may be used in an accordion layout Container.
- *This class is intended to be extended or created via the {@link Ext.Container#layout layout} - * configuration property. See {@link Ext.Container#layout} for additional details.
- *Example usage:
- *
-var accordion = new Ext.Panel({
- title: 'Accordion Layout',
- layout:'accordion',
- defaults: {
- // applied to each contained panel
- bodyStyle: 'padding:15px'
- },
- layoutConfig: {
- // layout-specific configs go here
- titleCollapse: false,
- animate: true,
- activeOnTop: true
- },
- items: [{
- title: 'Panel 1',
- html: '<p>Panel content!</p>'
- },{
- title: 'Panel 2',
- html: '<p>Panel content!</p>'
- },{
- title: 'Panel 3',
- html: '<p>Panel content!</p>'
- }]
-});
-
- */
-Ext.layout.AccordionLayout = Ext.extend(Ext.layout.FitLayout, {
- /**
- * @cfg {Boolean} fill
- * True to adjust the active item's height to fill the available space in the container, false to use the
- * item's current height, or auto height if not explicitly set (defaults to true).
- */
- fill : true,
- /**
- * @cfg {Boolean} autoWidth
- * True to set each contained item's width to 'auto', false to use the item's current width (defaults to true).
- * Note that some components, in particular the {@link Ext.grid.GridPanel grid}, will not function properly within
- * layouts if they have auto width, so in such cases this config should be set to false.
- */
- autoWidth : true,
- /**
- * @cfg {Boolean} titleCollapse
- * True to allow expand/collapse of each contained panel by clicking anywhere on the title bar, false to allow
- * expand/collapse only when the toggle tool button is clicked (defaults to true). When set to false,
- * {@link #hideCollapseTool} should be false also.
- */
- titleCollapse : true,
- /**
- * @cfg {Boolean} hideCollapseTool
- * True to hide the contained panels' collapse/expand toggle buttons, false to display them (defaults to false).
- * When set to true, {@link #titleCollapse} should be true also.
- */
- hideCollapseTool : false,
- /**
- * @cfg {Boolean} collapseFirst
- * True to make sure the collapse/expand toggle button always renders first (to the left of) any other tools
- * in the contained panels' title bars, false to render it last (defaults to false).
- */
- collapseFirst : false,
- /**
- * @cfg {Boolean} animate
- * True to slide the contained panels open and closed during expand/collapse using animation, false to open and
- * close directly with no animation (defaults to false). Note: to defer to the specific config setting of each
- * contained panel for this property, set this to undefined at the layout level.
- */
- animate : false,
- /**
- * @cfg {Boolean} sequence
- * Experimental. If animate is set to true, this will result in each animation running in sequence.
- */
- sequence : false,
- /**
- * @cfg {Boolean} activeOnTop
- * True to swap the position of each panel as it is expanded so that it becomes the first item in the container,
- * false to keep the panels in the rendered order. This is NOT compatible with "animate:true" (defaults to false).
- */
- activeOnTop : false,
-
- renderItem : function(c){
- if(this.animate === false){
- c.animCollapse = false;
- }
- c.collapsible = true;
- if(this.autoWidth){
- c.autoWidth = true;
- }
- if(this.titleCollapse){
- c.titleCollapse = true;
- }
- if(this.hideCollapseTool){
- c.hideCollapseTool = true;
- }
- if(this.collapseFirst !== undefined){
- c.collapseFirst = this.collapseFirst;
- }
- if(!this.activeItem && !c.collapsed){
- this.setActiveItem(c, true);
- }else if(this.activeItem && this.activeItem != c){
- c.collapsed = true;
- }
- Ext.layout.AccordionLayout.superclass.renderItem.apply(this, arguments);
- c.header.addClass('x-accordion-hd');
- c.on('beforeexpand', this.beforeExpand, this);
- },
-
- onRemove: function(c){
- Ext.layout.AccordionLayout.superclass.onRemove.call(this, c);
- if(c.rendered){
- c.header.removeClass('x-accordion-hd');
- }
- c.un('beforeexpand', this.beforeExpand, this);
- },
-
- // private
- beforeExpand : function(p, anim){
- var ai = this.activeItem;
- if(ai){
- if(this.sequence){
- delete this.activeItem;
- if (!ai.collapsed){
- ai.collapse({callback:function(){
- p.expand(anim || true);
- }, scope: this});
- return false;
- }
- }else{
- ai.collapse(this.animate);
- }
- }
- this.setActive(p);
- if(this.activeOnTop){
- p.el.dom.parentNode.insertBefore(p.el.dom, p.el.dom.parentNode.firstChild);
- }
- this.layout();
- },
-
- // private
- setItemSize : function(item, size){
- if(this.fill && item){
- var hh = 0;
- this.container.items.each(function(p){
- if(p != item){
- hh += p.header.getHeight();
- }
- });
- size.height -= hh;
- item.setSize(size);
- }
- },
-
- /**
- * Sets the active (expanded) item in the layout.
- * @param {String/Number} item The string component id or numeric index of the item to activate
- */
- setActiveItem : function(item){
- this.setActive(item, true);
- },
-
- // private
- setActive : function(item, expand){
- var ai = this.activeItem;
- item = this.container.getComponent(item);
- if(ai != item){
- if(item.rendered && item.collapsed && expand){
- item.expand();
- }else{
- if(ai){
- ai.fireEvent('deactivate', ai);
- }
- this.activeItem = item;
- item.fireEvent('activate', item);
- }
- }
- }
-});
-Ext.Container.LAYOUTS.accordion = Ext.layout.AccordionLayout;
-
-//backwards compat
-Ext.layout.Accordion = Ext.layout.AccordionLayout;/**
- * @class Ext.layout.TableLayout
- * @extends Ext.layout.ContainerLayout
- * This layout allows you to easily render content into an HTML table. The total number of columns can be - * specified, and rowspan and colspan can be used to create complex layouts within the table. - * This class is intended to be extended or created via the layout:'table' {@link Ext.Container#layout} config, - * and should generally not need to be created directly via the new keyword.
- *Note that when creating a layout via config, the layout-specific config properties must be passed in via - * the {@link Ext.Container#layoutConfig} object which will then be applied internally to the layout. In the - * case of TableLayout, the only valid layout config property is {@link #columns}. However, the items added to a - * TableLayout can supply the following table-specific config properties:
- *The basic concept of building up a TableLayout is conceptually very similar to building up a standard - * HTML table. You simply add each panel (or "cell") that you want to include along with any span attributes - * specified as the special config properties of rowspan and colspan which work exactly like their HTML counterparts. - * Rather than explicitly creating and nesting rows and columns as you would in HTML, you simply specify the - * total column count in the layoutConfig and start adding panels in their natural order from left to right, - * top to bottom. The layout will automatically figure out, based on the column count, rowspans and colspans, - * how to position each panel within the table. Just like with HTML tables, your rowspans and colspans must add - * up correctly in your overall layout or you'll end up with missing and/or extra cells! Example usage:
- *
-// This code will generate a layout table that is 3 columns by 2 rows
-// with some spanning included. The basic layout will be:
-// +--------+-----------------+
-// | A | B |
-// | |--------+--------|
-// | | C | D |
-// +--------+--------+--------+
-var table = new Ext.Panel({
- title: 'Table Layout',
- layout:'table',
- defaults: {
- // applied to each contained panel
- bodyStyle:'padding:20px'
- },
- layoutConfig: {
- // The total column count must be specified here
- columns: 3
- },
- items: [{
- html: '<p>Cell A content</p>',
- rowspan: 2
- },{
- html: '<p>Cell B content</p>',
- colspan: 2
- },{
- html: '<p>Cell C content</p>',
- cellCls: 'highlight'
- },{
- html: '<p>Cell D content</p>'
- }]
-});
-
- */
-Ext.layout.TableLayout = Ext.extend(Ext.layout.ContainerLayout, {
- /**
- * @cfg {Number} columns
- * The total number of columns to create in the table for this layout. If not specified, all Components added to
- * this layout will be rendered into a single row using one column per Component.
- */
-
- // private
- monitorResize:false,
-
- targetCls: 'x-table-layout-ct',
-
- /**
- * @cfg {Object} tableAttrs
- * 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
- }
-}
- */
- tableAttrs:null,
-
- // private
- setContainer : function(ct){
- Ext.layout.TableLayout.superclass.setContainer.call(this, ct);
-
- this.currentRow = 0;
- this.currentColumn = 0;
- this.cells = [];
- },
-
- // private
- onLayout : function(ct, target){
- var cs = ct.items.items, len = cs.length, c, i;
-
- if(!this.table){
- this.table = target.createChild(
- Ext.apply({tag:'table', cls:'x-table-layout', cellspacing: 0, cn: {tag: 'tbody'}}, this.tableAttrs), null, true);
- }
- this.renderAll(ct, target);
- },
-
- // private
- getRow : function(index){
- var row = this.table.tBodies[0].childNodes[index];
- if(!row){
- row = document.createElement('tr');
- this.table.tBodies[0].appendChild(row);
- }
- return row;
- },
-
- // private
- getNextCell : function(c){
- var cell = this.getNextNonSpan(this.currentColumn, this.currentRow);
- var curCol = this.currentColumn = cell[0], curRow = this.currentRow = cell[1];
- for(var rowIndex = curRow; rowIndex < curRow + (c.rowspan || 1); rowIndex++){
- if(!this.cells[rowIndex]){
- this.cells[rowIndex] = [];
- }
- for(var colIndex = curCol; colIndex < curCol + (c.colspan || 1); colIndex++){
- this.cells[rowIndex][colIndex] = true;
- }
- }
- var td = document.createElement('td');
- if(c.cellId){
- td.id = c.cellId;
- }
- var cls = 'x-table-layout-cell';
- if(c.cellCls){
- cls += ' ' + c.cellCls;
- }
- td.className = cls;
- if(c.colspan){
- td.colSpan = c.colspan;
- }
- if(c.rowspan){
- td.rowSpan = c.rowspan;
- }
- this.getRow(curRow).appendChild(td);
- return td;
- },
-
- // private
- getNextNonSpan: function(colIndex, rowIndex){
- var cols = this.columns;
- while((cols && colIndex >= cols) || (this.cells[rowIndex] && this.cells[rowIndex][colIndex])) {
- if(cols && colIndex >= cols){
- rowIndex++;
- colIndex = 0;
- }else{
- colIndex++;
- }
- }
- return [colIndex, rowIndex];
- },
-
- // private
- renderItem : function(c, position, target){
- if(c && !c.rendered){
- c.render(this.getNextCell(c));
- this.configureItem(c, position);
- }else if(c && !this.isValidParent(c, target)){
- var container = this.getNextCell(c);
- container.insertBefore(c.getPositionEl().dom, null);
- c.container = Ext.get(container);
- this.configureItem(c, position);
- }
- },
-
- // private
- isValidParent : function(c, target){
- return c.getPositionEl().up('table', 5).dom.parentNode === (target.dom || target);
- }
-
- /**
- * @property activeItem
- * @hide
- */
-});
-
-Ext.Container.LAYOUTS['table'] = Ext.layout.TableLayout;/**
- * @class Ext.layout.AbsoluteLayout
- * @extends Ext.layout.AnchorLayout
- * 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
- }]
-});
-
- */
-Ext.layout.AbsoluteLayout = Ext.extend(Ext.layout.AnchorLayout, {
-
- extraCls: 'x-abs-layout-item',
-
- onLayout : function(ct, target){
- target.position();
- this.paddingLeft = target.getPadding('l');
- this.paddingTop = target.getPadding('t');
-
- Ext.layout.AbsoluteLayout.superclass.onLayout.call(this, ct, target);
- },
-
- // private
- adjustWidthAnchor : function(value, comp){
- return value ? value - comp.getPosition(true)[0] + this.paddingLeft : value;
- },
-
- // private
- adjustHeightAnchor : function(value, comp){
- return value ? value - comp.getPosition(true)[1] + this.paddingTop : value;
- }
- /**
- * @property activeItem
- * @hide
- */
-});
-Ext.Container.LAYOUTS['absolute'] = Ext.layout.AbsoluteLayout;
-/**
- * @class Ext.layout.BoxLayout
- * @extends Ext.layout.ContainerLayout
- * 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}
- *
- */
- defaultMargins : {left:0,top:0,right:0,bottom:0},
- /**
- * @cfg {String} padding
- * Sets the padding to be applied to all child items managed by this layout.
- *This property must be specified as a string containing - * space-separated, numeric padding values. The order of the sides associated - * with each value matches the way CSS processes padding values:
- *Defaults to: "0"
A layout that arranges items vertically down a Container. This layout optionally divides available vertical
- * space between child items containing a numeric flex
configuration.
A layout that arranges items horizontally across a Container. This layout optionally divides available horizontal
- * space between child items containing a numeric flex
configuration.
A specialized container representing the viewable application area (the browser viewport).
- *The Viewport renders itself to the document body, and automatically sizes itself to the size of - * the browser viewport and manages window resizing. There may only be one Viewport created - * in a page. Inner layouts are available by virtue of the fact that all {@link Ext.Panel Panel}s - * added to the Viewport, either through its {@link #items}, or through the items, or the {@link #add} - * method of any of its child Panels may themselves have a layout.
- *The Viewport does not provide scrolling, so child Panels within the Viewport should provide - * for scrolling if needed using the {@link #autoScroll} config.
- *An example showing a classic application border layout:
-new Ext.Viewport({
- layout: 'border',
- items: [{
- region: 'north',
- html: '<h1 class="x-panel-header">Page Title</h1>',
- autoHeight: true,
- border: false,
- margins: '0 0 5 0'
- }, {
- region: 'west',
- collapsible: true,
- title: 'Navigation',
- width: 200
- // the west region might typically utilize a {@link Ext.tree.TreePanel TreePanel} or a Panel with {@link Ext.layout.AccordionLayout Accordion layout}
- }, {
- region: 'south',
- title: 'Title for Panel',
- collapsible: true,
- html: 'Information goes here',
- split: true,
- height: 100,
- minHeight: 100
- }, {
- region: 'east',
- title: 'Title for the Grid Panel',
- collapsible: true,
- split: true,
- width: 200,
- xtype: 'grid',
- // remaining grid configuration not shown ...
- // notice that the GridPanel is added directly as the region
- // it is not "overnested" inside another Panel
- }, {
- region: 'center',
- xtype: 'tabpanel', // TabPanel itself has no title
- items: {
- title: 'Default Tab',
- html: 'The first tab\'s content. Others may be added dynamically'
- }
- }]
-});
-
- * @constructor
- * Create a new Viewport
- * @param {Object} config The config object
- * @xtype viewport
- */
-Ext.Viewport = Ext.extend(Ext.Container, {
- /*
- * Privatize config options which, if used, would interfere with the
- * correct operation of the Viewport as the sole manager of the
- * layout of the document body.
- */
- /**
- * @cfg {Mixed} applyTo @hide
- */
- /**
- * @cfg {Boolean} allowDomMove @hide
- */
- /**
- * @cfg {Boolean} hideParent @hide
- */
- /**
- * @cfg {Mixed} renderTo @hide
- */
- /**
- * @cfg {Boolean} hideParent @hide
- */
- /**
- * @cfg {Number} height @hide
- */
- /**
- * @cfg {Number} width @hide
- */
- /**
- * @cfg {Boolean} autoHeight @hide
- */
- /**
- * @cfg {Boolean} autoWidth @hide
- */
- /**
- * @cfg {Boolean} deferHeight @hide
- */
- /**
- * @cfg {Boolean} monitorResize @hide
- */
-
- initComponent : function() {
- Ext.Viewport.superclass.initComponent.call(this);
- document.getElementsByTagName('html')[0].className += ' x-viewport';
- this.el = Ext.getBody();
- this.el.setHeight = Ext.emptyFn;
- this.el.setWidth = Ext.emptyFn;
- this.el.setSize = Ext.emptyFn;
- this.el.dom.scroll = 'no';
- this.allowDomMove = false;
- this.autoWidth = true;
- this.autoHeight = true;
- Ext.EventManager.onWindowResize(this.fireResize, this);
- this.renderTo = this.el;
- },
-
- fireResize : function(w, h){
- this.onResize(w, h, w, h);
- }
-});
-Ext.reg('viewport', Ext.Viewport);
-/**
- * @class Ext.Panel
- * @extends Ext.Container
- * Panel is a container that has specific functionality and structural components that make - * it the perfect building block for application-oriented user interfaces.
- *Panels are, by virtue of their inheritance from {@link Ext.Container}, capable - * of being configured with a {@link Ext.Container#layout layout}, and containing child Components.
- *When either specifying child {@link Ext.Component#items items} of a Panel, or dynamically {@link Ext.Container#add adding} Components
- * to a Panel, remember to consider how you wish the Panel to arrange those child elements, and whether
- * those child elements need to be sized using one of Ext's built-in {@link Ext.Container#layout layout}
schemes. By
- * default, Panels use the {@link Ext.layout.ContainerLayout ContainerLayout} scheme. This simply renders
- * child components, appending them one after the other inside the Container, and does not apply any sizing
- * at all.
A Panel may also contain {@link #bbar bottom} and {@link #tbar top} toolbars, along with separate - * {@link #header}, {@link #footer} and {@link #body} sections (see {@link #frame} for additional - * information).
- *Panel also provides built-in {@link #collapsible expandable and collapsible behavior}, along with - * a variety of {@link #tools prebuilt tool buttons} that can be wired up to provide other customized - * behavior. Panels can be easily dropped into any {@link Ext.Container Container} or layout, and the - * layout and rendering pipeline is {@link Ext.Container#add completely managed by the framework}.
- * @constructor - * @param {Object} config The config object - * @xtype panel - */ -Ext.Panel = Ext.extend(Ext.Container, { - /** - * The Panel's header {@link Ext.Element Element}. Read-only. - *This Element is used to house the {@link #title} and {@link #tools}
- *Note: see the Note for {@link Ext.Component#el el}
also.
If this is used to load visible HTML elements in either way, then - * the Panel may not be used as a Layout for hosting nested Panels.
- *If this Panel is intended to be used as the host of a Layout (See {@link #layout}
- * then the body Element must not be loaded or changed - it is under the control
- * of the Panel's Layout.
- *
Note: see the Note for {@link Ext.Component#el el}
also.
A {@link Ext.DomHelper DomHelper} element specification object may be specified for any - * Panel Element.
- *By default, the Default element in the table below will be used for the html markup to
- * create a child element with the commensurate Default class name (baseCls
will be
- * replaced by {@link #baseCls}
):
- * Panel Default Default Custom Additional Additional - * Element element class element class style - * ======== ========================== ========= ============== =========== - * {@link #header} div {@link #baseCls}+'-header' {@link #headerCfg} headerCssClass headerStyle - * {@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.
A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure
- * of this Panel's {@link #header} Element. See {@link #bodyCfg}
also.
A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure
- * of this Panel's {@link #bwrap} Element. See {@link #bodyCfg}
also.
A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure
- * of this Panel's {@link #tbar} Element. See {@link #bodyCfg}
also.
A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure
- * of this Panel's {@link #bbar} Element. See {@link #bodyCfg}
also.
A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure
- * of this Panel's {@link #footer} Element. See {@link #bodyCfg}
also.
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.
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.
{@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>
- *
- */
- /**
- * @cfg {Boolean} border
- * True to display the borders of the panel's body element, false to hide them (defaults to true). By default,
- * the border is a 2px wide inset border, but this can be further altered by setting {@link #bodyBorder} to false.
- */
- /**
- * @cfg {Boolean} bodyBorder
- * True to display an interior border on the body element of the panel, false to hide it (defaults to true).
- * This only applies when {@link #border} == true. If border == true and bodyBorder == false, the border will display
- * as a 1px wide inset border, giving the entire body element an inset appearance.
- */
- /**
- * @cfg {String/Object/Function} bodyCssClass
- * Additional css class selector to be applied to the {@link #body} element in the format expected by
- * {@link Ext.Element#addClass} (defaults to null). See {@link #bodyCfg}.
- */
- /**
- * @cfg {String/Object/Function} bodyStyle
- * Custom CSS styles to be applied to the {@link #body} element in the format expected by
- * {@link Ext.Element#applyStyles} (defaults to null). See {@link #bodyCfg}.
- */
- /**
- * @cfg {String} iconCls
- * The CSS class selector that specifies a background image to be used as the header icon (defaults to '').
- * 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; }
-
- */
- /**
- * @cfg {Boolean} collapsible
- * True to make the panel collapsible and have the expand/collapse toggle button automatically rendered into
- * the header tool button area, false to keep the panel statically sized with no button (defaults to false).
- */
- /**
- * @cfg {Array} tools
- * An array of tool button configs to be added to the header tool area. When rendered, each tool is
- * stored as an {@link Ext.Element Element} referenced by a public property called tools.<tool-type>
- * Each tool config may contain the following properties: - *
x-tool-<tool-type>
to the
- * resulting tool Element. Ext provides CSS rules, and an icon sprite containing images for the tool types listed below.
- * The developer may implement custom tools by supplying alternate CSS rules and background images:
- * toggle
(Created by default when {@link #collapsible} is true
) close
minimize
maximize
restore
gear
pin
unpin
right
left
up
down
refresh
minus
plus
help
search
save
print
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;}
-
- */
- /**
- * @cfg {Ext.Template/Ext.XTemplate} toolTemplate
- * 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;}
-
- */
- /**
- * @cfg {Boolean} hideCollapseTool
- * true
to hide the expand/collapse toggle button when {@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 {Mixed} floating
- * This property is used to configure the underlying {@link Ext.Layer}. Acceptable values for this - * configuration property are:
false
: Default.true
: myPanel.setPosition(100,100);
).{@link Ext.Layer object}
: true
(or a valid Ext.Shadow {@link Ext.Shadow#mode} value) to display a shadow behind the
- * panel, false
to display no shadow (defaults to 'sides'
). Note that this option
- * only applies when {@link #floating} = true
.
- */
- /**
- * @cfg {Number} shadowOffset
- * The number of pixels to offset the shadow if displayed (defaults to 4
). Note that this
- * option only applies when {@link #floating} = true
.
- */
- /**
- * @cfg {Boolean} shim
- * false
to disable the iframe shim in browsers which need one (defaults to true
).
- * Note that this option only applies when {@link #floating} = true
.
- */
- /**
- * @cfg {Object/Array} keys
- * A {@link Ext.KeyMap} config object (in the format expected by {@link Ext.KeyMap#addBinding}
- * used to assign custom key handling to this panel (defaults to null
).
- */
- /**
- * @cfg {Boolean/Object} draggable
- * 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();
-
- */
- /**
- * @cfg {Boolean} disabled
- * Render this panel disabled (default is false
). An important note when using the disabled
- * config on panels is that IE will often fail to initialize the disabled mask element correectly if
- * the panel's layout has not yet completed by the time the Panel is disabled during the render process.
- * If you experience this issue, you may need to instead use the {@link #afterlayout} event to initialize
- * the disabled state:
- *
-new Ext.Panel({
- ...
- listeners: {
- 'afterlayout': {
- fn: function(p){
- p.disable();
- },
- single: true // important, as many layouts can occur
- }
- }
-});
-
- */
- /**
- * @cfg {Boolean} autoHeight
- * true
to use height:'auto', false
to use fixed height (defaults to false
).
- * Note: Setting autoHeight: true
means that the browser will manage the panel's height
- * based on its contents, and that Ext will not manage it at all. If the panel is within a layout that
- * manages dimensions (fit
, border
, etc.) then setting autoHeight: true
- * can cause issues with scrolling and will not generally work as expected since the panel will take
- * on the height of its contents rather than the height required by the Ext layout.
- */
-
-
- /**
- * @cfg {String} baseCls
- * The base CSS class to apply to this panel's element (defaults to 'x-panel'
).
- * Another option available by default is to specify 'x-plain'
which strips all styling
- * except for required attributes for Ext layouts to function (e.g. overflow:hidden).
- * See {@link #unstyled}
also.
'x-panel-collapsed'
).
- */
- collapsedCls : 'x-panel-collapsed',
- /**
- * @cfg {Boolean} maskDisabled
- * 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 areheader
tbar
(top bar)body
bbar
(bottom bar)footer
body
'.
- */
- elements : 'body',
- /**
- * @cfg {Boolean} preventBodyReset
- * Defaults to false
. When set to true
, an extra css class 'x-panel-normal'
- * will be added to the panel's element, effectively applying css styles suggested by the W3C
- * (see http://www.w3.org/TR/CSS21/sample.html) to the Panel's body element (not the header,
- * footer, etc.).
- */
- preventBodyReset : false,
-
- /**
- * @cfg {Number/String} padding
- * A shortcut for setting a padding style on the body element. The value can either be
- * a number to be applied to all sides, or a normal css string describing padding.
- * Defaults to undefined.
- *
- */
- padding: undefined,
-
- /** @cfg {String} resizeEvent
- * The event to listen to for resizing in layouts. Defaults to 'bodyresize'.
- */
- resizeEvent: 'bodyresize',
-
- // protected - these could be used to customize the behavior of the window,
- // but changing them would not be useful without further mofifications and
- // could lead to unexpected or undesirable results.
- toolTarget : 'header',
- collapseEl : 'bwrap',
- slideAnchor : 't',
- disabledClass : '',
-
- // private, notify box this class will handle heights
- deferHeight : true,
- // private
- expandDefaults: {
- duration : 0.25
- },
- // private
- collapseDefaults : {
- duration : 0.25
- },
-
- // private
- initComponent : function(){
- Ext.Panel.superclass.initComponent.call(this);
-
- this.addEvents(
- /**
- * @event bodyresize
- * Fires after the Panel has been resized.
- * @param {Ext.Panel} p the Panel which has been resized.
- * @param {Number} width The Panel's new width.
- * @param {Number} height The Panel's new height.
- */
- 'bodyresize',
- /**
- * @event titlechange
- * Fires after the Panel title has been {@link #title set} or {@link #setTitle changed}.
- * @param {Ext.Panel} p the Panel which has had its title changed.
- * @param {String} The new title.
- */
- 'titlechange',
- /**
- * @event iconchange
- * Fires after the Panel icon class has been {@link #iconCls set} or {@link #setIconClass changed}.
- * @param {Ext.Panel} p the Panel which has had its {@link #iconCls icon class} changed.
- * @param {String} The new icon class.
- * @param {String} The old icon class.
- */
- 'iconchange',
- /**
- * @event collapse
- * Fires after the Panel has been collapsed.
- * @param {Ext.Panel} p the Panel that has been collapsed.
- */
- 'collapse',
- /**
- * @event expand
- * Fires after the Panel has been expanded.
- * @param {Ext.Panel} p The Panel that has been expanded.
- */
- 'expand',
- /**
- * @event beforecollapse
- * Fires before the Panel is collapsed. A handler can return false to cancel the collapse.
- * @param {Ext.Panel} p the Panel being collapsed.
- * @param {Boolean} animate True if the collapse is animated, else false.
- */
- 'beforecollapse',
- /**
- * @event beforeexpand
- * Fires before the Panel is expanded. A handler can return false to cancel the expand.
- * @param {Ext.Panel} p The Panel being expanded.
- * @param {Boolean} animate True if the expand is animated, else false.
- */
- 'beforeexpand',
- /**
- * @event beforeclose
- * Fires before the Panel is closed. Note that Panels do not directly support being closed, but some
- * Panel subclasses do (like {@link Ext.Window}) or a Panel within a Ext.TabPanel. This event only
- * applies to such subclasses.
- * A handler can return false to cancel the close.
- * @param {Ext.Panel} p The Panel being closed.
- */
- 'beforeclose',
- /**
- * @event close
- * Fires after the Panel is closed. Note that Panels do not directly support being closed, but some
- * Panel subclasses do (like {@link Ext.Window}) or a Panel within a Ext.TabPanel.
- * @param {Ext.Panel} p The Panel that has been closed.
- */
- 'close',
- /**
- * @event activate
- * Fires after the Panel has been visually activated.
- * Note that Panels do not directly support being activated, but some Panel subclasses
- * do (like {@link Ext.Window}). Panels which are child Components of a TabPanel fire the
- * activate and deactivate events under the control of the TabPanel.
- * @param {Ext.Panel} p The Panel that has been activated.
- */
- 'activate',
- /**
- * @event deactivate
- * Fires after the Panel has been visually deactivated.
- * Note that Panels do not directly support being deactivated, but some Panel subclasses
- * do (like {@link Ext.Window}). Panels which are child Components of a TabPanel fire the
- * activate and deactivate events under the control of the TabPanel.
- * @param {Ext.Panel} p The Panel that has been deactivated.
- */
- 'deactivate'
- );
-
- if(this.unstyled){
- this.baseCls = 'x-plain';
- }
-
-
- this.toolbars = [];
- // shortcuts
- if(this.tbar){
- this.elements += ',tbar';
- this.topToolbar = this.createToolbar(this.tbar);
- delete this.tbar;
-
- }
- if(this.bbar){
- this.elements += ',bbar';
- this.bottomToolbar = this.createToolbar(this.bbar);
- delete this.bbar;
- }
-
- if(this.header === true){
- this.elements += ',header';
- delete this.header;
- }else if(this.headerCfg || (this.title && this.header !== false)){
- this.elements += ',header';
- }
-
- if(this.footerCfg || this.footer === true){
- this.elements += ',footer';
- delete this.footer;
- }
-
- if(this.buttons){
- this.fbar = this.buttons;
- delete this.buttons;
- }
- if(this.fbar){
- this.createFbar(this.fbar);
- }
- if(this.autoLoad){
- this.on('render', this.doAutoLoad, this, {delay:10});
- }
- },
-
- // private
- createFbar : function(fbar){
- var min = this.minButtonWidth;
- this.elements += ',footer';
- this.fbar = this.createToolbar(fbar, {
- buttonAlign: this.buttonAlign,
- toolbarCls: 'x-panel-fbar',
- enableOverflow: false,
- defaults: function(c){
- return {
- minWidth: c.minWidth || min
- };
- }
- });
- //@compat addButton and buttons could possibly be removed
- //@target 4.0
- /**
- * This Panel's Array of buttons as created from the {@link #buttons}
- * config property. Read only.
- * @type Array
- * @property buttons
- */
- this.fbar.items.each(function(c){
- c.minWidth = c.minWidth || this.minButtonWidth;
- }, this);
- this.buttons = this.fbar.items.items;
- },
-
- // private
- createToolbar: function(tb, options){
- var result;
- // Convert array to proper toolbar config
- if(Ext.isArray(tb)){
- tb = {
- items: tb
- };
- }
- result = tb.events ? Ext.apply(tb, options) : this.createComponent(Ext.apply({}, tb, options), 'toolbar');
- result.ownerCt = this;
- result.bufferResize = false;
- this.toolbars.push(result);
- return result;
- },
-
- // private
- createElement : function(name, pnode){
- if(this[name]){
- pnode.appendChild(this[name].dom);
- return;
- }
-
- if(name === 'bwrap' || this.elements.indexOf(name) != -1){
- if(this[name+'Cfg']){
- this[name] = Ext.fly(pnode).createChild(this[name+'Cfg']);
- }else{
- var el = document.createElement('div');
- el.className = this[name+'Cls'];
- this[name] = Ext.get(pnode.appendChild(el));
- }
- if(this[name+'CssClass']){
- this[name].addClass(this[name+'CssClass']);
- }
- if(this[name+'Style']){
- this[name].applyStyles(this[name+'Style']);
- }
- }
- },
-
- // private
- onRender : function(ct, position){
- Ext.Panel.superclass.onRender.call(this, ct, position);
- this.createClasses();
-
- var el = this.el,
- d = el.dom,
- bw,
- ts;
-
-
- if(this.collapsible && !this.hideCollapseTool){
- this.tools = this.tools ? this.tools.slice(0) : [];
- this.tools[this.collapseFirst?'unshift':'push']({
- id: 'toggle',
- handler : this.toggleCollapse,
- scope: this
- });
- }
-
- if(this.tools){
- ts = this.tools;
- this.elements += (this.header !== false) ? ',header' : '';
- }
- this.tools = {};
-
- el.addClass(this.baseCls);
- if(d.firstChild){ // existing markup
- this.header = el.down('.'+this.headerCls);
- this.bwrap = el.down('.'+this.bwrapCls);
- var cp = this.bwrap ? this.bwrap : el;
- this.tbar = cp.down('.'+this.tbarCls);
- this.body = cp.down('.'+this.bodyCls);
- this.bbar = cp.down('.'+this.bbarCls);
- this.footer = cp.down('.'+this.footerCls);
- this.fromMarkup = true;
- }
- if (this.preventBodyReset === true) {
- el.addClass('x-panel-reset');
- }
- if(this.cls){
- el.addClass(this.cls);
- }
-
- if(this.buttons){
- this.elements += ',footer';
- }
-
- // This block allows for maximum flexibility and performance when using existing markup
-
- // framing requires special markup
- if(this.frame){
- el.insertHtml('afterBegin', String.format(Ext.Element.boxMarkup, this.baseCls));
-
- this.createElement('header', d.firstChild.firstChild.firstChild);
- this.createElement('bwrap', d);
-
- // append the mid and bottom frame to the bwrap
- bw = this.bwrap.dom;
- var ml = d.childNodes[1], bl = d.childNodes[2];
- bw.appendChild(ml);
- bw.appendChild(bl);
-
- var mc = bw.firstChild.firstChild.firstChild;
- this.createElement('tbar', mc);
- this.createElement('body', mc);
- this.createElement('bbar', mc);
- this.createElement('footer', bw.lastChild.firstChild.firstChild);
-
- if(!this.footer){
- this.bwrap.dom.lastChild.className += ' x-panel-nofooter';
- }
- /*
- * Store a reference to this element so:
- * a) We aren't looking it up all the time
- * b) The last element is reported incorrectly when using a loadmask
- */
- this.ft = Ext.get(this.bwrap.dom.lastChild);
- this.mc = Ext.get(mc);
- }else{
- this.createElement('header', d);
- this.createElement('bwrap', d);
-
- // append the mid and bottom frame to the bwrap
- bw = this.bwrap.dom;
- this.createElement('tbar', bw);
- this.createElement('body', bw);
- this.createElement('bbar', bw);
- this.createElement('footer', bw);
-
- if(!this.header){
- this.body.addClass(this.bodyCls + '-noheader');
- if(this.tbar){
- this.tbar.addClass(this.tbarCls + '-noheader');
- }
- }
- }
-
- if(Ext.isDefined(this.padding)){
- this.body.setStyle('padding', this.body.addUnits(this.padding));
- }
-
- if(this.border === false){
- this.el.addClass(this.baseCls + '-noborder');
- this.body.addClass(this.bodyCls + '-noborder');
- if(this.header){
- this.header.addClass(this.headerCls + '-noborder');
- }
- if(this.footer){
- this.footer.addClass(this.footerCls + '-noborder');
- }
- if(this.tbar){
- this.tbar.addClass(this.tbarCls + '-noborder');
- }
- if(this.bbar){
- this.bbar.addClass(this.bbarCls + '-noborder');
- }
- }
-
- if(this.bodyBorder === false){
- this.body.addClass(this.bodyCls + '-noborder');
- }
-
- this.bwrap.enableDisplayMode('block');
-
- if(this.header){
- this.header.unselectable();
-
- // for tools, we need to wrap any existing header markup
- if(this.headerAsText){
- this.header.dom.innerHTML =
- ''+this.header.dom.innerHTML+'';
-
- if(this.iconCls){
- this.setIconClass(this.iconCls);
- }
- }
- }
-
- if(this.floating){
- this.makeFloating(this.floating);
- }
-
- if(this.collapsible && this.titleCollapse && this.header){
- this.mon(this.header, 'click', this.toggleCollapse, this);
- this.header.setStyle('cursor', 'pointer');
- }
- if(ts){
- this.addTool.apply(this, ts);
- }
- if(this.fbar){
- this.footer.addClass('x-panel-btns');
- this.fbar.render(this.footer);
- this.footer.createChild({cls:'x-clear'});
- }
-
- if(this.tbar && this.topToolbar){
- this.topToolbar.render(this.tbar);
- }
- if(this.bbar && this.bottomToolbar){
- this.bottomToolbar.render(this.bbar);
-
- }
- },
-
- /**
- * Sets the CSS class that provides the icon image for this panel. This method will replace any existing
- * icon class if one has already been set and fire the {@link #iconchange} event after completion.
- * @param {String} cls The new CSS class name
- */
- setIconClass : function(cls){
- var old = this.iconCls;
- this.iconCls = cls;
- if(this.rendered && this.header){
- if(this.frame){
- this.header.addClass('x-panel-icon');
- this.header.replaceClass(old, this.iconCls);
- }else{
- var hd = this.header,
- img = hd.child('img.x-panel-inline-icon');
- if(img){
- Ext.fly(img).replaceClass(old, this.iconCls);
- }else{
- Ext.DomHelper.insertBefore(hd.dom.firstChild, {
- tag:'img', src: Ext.BLANK_IMAGE_URL, cls:'x-panel-inline-icon '+this.iconCls
- });
- }
- }
- }
- this.fireEvent('iconchange', this, cls, old);
- },
-
- // private
- makeFloating : function(cfg){
- this.floating = true;
- this.el = new Ext.Layer(Ext.apply({}, cfg, {
- shadow: Ext.isDefined(this.shadow) ? this.shadow : 'sides',
- shadowOffset: this.shadowOffset,
- constrain:false,
- shim: this.shim === false ? false : undefined
- }), this.el);
- },
-
- /**
- * Returns the {@link Ext.Toolbar toolbar} from the top ({@link #tbar}
) section of the panel.
- * @return {Ext.Toolbar} The toolbar
- */
- getTopToolbar : function(){
- return this.topToolbar;
- },
-
- /**
- * Returns the {@link Ext.Toolbar toolbar} from the bottom ({@link #bbar}
) section of the panel.
- * @return {Ext.Toolbar} The toolbar
- */
- getBottomToolbar : function(){
- return this.bottomToolbar;
- },
-
- /**
- * Adds a button to this panel. Note that this method must be called prior to rendering. The preferred
- * approach is to add buttons via the {@link #buttons} config.
- * @param {String/Object} config A valid {@link Ext.Button} config. A string will become the text for a default
- * button config, an object will be treated as a button config object.
- * @param {Function} handler The function to be called on button {@link Ext.Button#click}
- * @param {Object} scope The scope (this
reference) in which the button handler function is executed. Defaults to the Button.
- * @return {Ext.Button} The button that was added
- */
- addButton : function(config, handler, scope){
- if(!this.fbar){
- this.createFbar([]);
- }
- if(handler){
- if(Ext.isString(config)){
- config = {text: config};
- }
- config = Ext.apply({
- handler: handler,
- scope: scope
- }, config)
- }
- return this.fbar.add(config);
- },
-
- // private
- addTool : function(){
- if(!this.rendered){
- if(!this.tools){
- this.tools = [];
- }
- Ext.each(arguments, function(arg){
- this.tools.push(arg)
- }, this);
- return;
- }
- // nowhere to render tools!
- if(!this[this.toolTarget]){
- return;
- }
- if(!this.toolTemplate){
- // initialize the global tool template on first use
- var tt = new Ext.Template(
- 'If this Panel is configured {@link #draggable}, this property will contain - * an instance of {@link Ext.dd.DragSource} which handles dragging the Panel.
- * The developer must provide implementations of the abstract methods of {@link Ext.dd.DragSource} - * in order to supply behaviour for each stage of the drag/drop process. See {@link #draggable}. - * @type Ext.dd.DragSource. - * @property dd - */ - this.dd = new Ext.Panel.DD(this, Ext.isBoolean(this.draggable) ? null : this.draggable); - }, - - // private - beforeEffect : function(anim){ - if(this.floating){ - this.el.beforeAction(); - } - if(anim !== false){ - this.el.addClass('x-panel-animated'); - } - }, - - // private - afterEffect : function(anim){ - this.syncShadow(); - if(anim !== false){ - this.el.removeClass('x-panel-animated'); - } - }, - - // private - wraps up an animation param with internal callbacks - createEffect : function(a, cb, scope){ - var o = { - scope:scope, - block:true - }; - if(a === true){ - o.callback = cb; - return o; - }else if(!a.callback){ - o.callback = cb; - }else { // wrap it up - o.callback = function(){ - cb.call(scope); - Ext.callback(a.callback, a.scope); - }; - } - return Ext.applyIf(o, a); - }, - - /** - * Collapses the panel body so that it becomes hidden. Fires the {@link #beforecollapse} event which will - * cancel the collapse action if it returns false. - * @param {Boolean} animate True to animate the transition, else false (defaults to the value of the - * {@link #animCollapse} panel config) - * @return {Ext.Panel} this - */ - collapse : function(animate){ - if(this.collapsed || this.el.hasFxBlock() || this.fireEvent('beforecollapse', this, animate) === false){ - return; - } - var doAnim = animate === true || (animate !== false && this.animCollapse); - this.beforeEffect(doAnim); - this.onCollapse(doAnim, animate); - return this; - }, - - // private - onCollapse : function(doAnim, animArg){ - if(doAnim){ - this[this.collapseEl].slideOut(this.slideAnchor, - Ext.apply(this.createEffect(animArg||true, this.afterCollapse, this), - this.collapseDefaults)); - }else{ - this[this.collapseEl].hide(); - this.afterCollapse(false); - } - }, - - // private - afterCollapse : function(anim){ - this.collapsed = true; - this.el.addClass(this.collapsedCls); - this.afterEffect(anim); - this.fireEvent('collapse', this); - }, - - /** - * Expands the panel body so that it becomes visible. Fires the {@link #beforeexpand} event which will - * cancel the expand action if it returns false. - * @param {Boolean} animate True to animate the transition, else false (defaults to the value of the - * {@link #animCollapse} panel config) - * @return {Ext.Panel} this - */ - expand : function(animate){ - if(!this.collapsed || this.el.hasFxBlock() || this.fireEvent('beforeexpand', this, animate) === false){ - return; - } - var doAnim = animate === true || (animate !== false && this.animCollapse); - this.el.removeClass(this.collapsedCls); - this.beforeEffect(doAnim); - this.onExpand(doAnim, animate); - return this; - }, - - // private - onExpand : function(doAnim, animArg){ - if(doAnim){ - this[this.collapseEl].slideIn(this.slideAnchor, - Ext.apply(this.createEffect(animArg||true, this.afterExpand, this), - this.expandDefaults)); - }else{ - this[this.collapseEl].show(); - this.afterExpand(false); - } - }, - - // private - afterExpand : function(anim){ - this.collapsed = false; - this.afterEffect(anim); - if(Ext.isDefined(this.deferLayout)){ - 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(Ext.isDefined(w) || Ext.isDefined(h)){ - if(!this.collapsed){ - // First, set the the Panel's body width. - // If we have auto-widthed it, get the resulting full offset width so we can size the Toolbars to match - // The Toolbars must not buffer this resize operation because we need to know their heights. - - if(Ext.isNumber(w)){ - this.body.setWidth(w = this.adjustBodyWidth(w - this.getFrameWidth())); - } else if (w == 'auto') { - w = this.body.setWidth('auto').dom.offsetWidth; - } else { - w = this.body.dom.offsetWidth; - } - - if(this.tbar){ - this.tbar.setWidth(w); - if(this.topToolbar){ - this.topToolbar.setSize(w); - } - } - if(this.bbar){ - this.bbar.setWidth(w); - if(this.bottomToolbar){ - this.bottomToolbar.setSize(w); - // The bbar does not move on resize without this. - if (Ext.isIE) { - this.bbar.setStyle('position', 'static'); - this.bbar.setStyle('position', ''); - } - } - } - if(this.footer){ - this.footer.setWidth(w); - if(this.fbar){ - this.fbar.setSize(Ext.isIE ? (w - this.footer.getFrameWidth('lr')) : 'auto'); - } - } - - // At this point, the Toolbars must be layed out for getFrameHeight to find a result. - if(Ext.isNumber(h)){ - h = Math.max(0, 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, {single:true}); - } - } - this.onBodyResize(w, h); - } - this.syncShadow(); - Ext.Panel.superclass.onResize.call(this); - }, - - // private - onBodyResize: function(w, h){ - this.fireEvent('bodyresize', this, w, h); - }, - - // private - getToolbarHeight: function(){ - var h = 0; - if(this.rendered){ - Ext.each(this.toolbars, function(tb){ - h += tb.getHeight(); - }, this); - } - return h; - }, - - // 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')); - w += this.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){ - h += this.el.dom.firstChild.offsetHeight + this.ft.dom.offsetHeight + this.mc.getFrameWidth('tb'); - }else{ - h += (this.header ? this.header.getHeight() : 0) + - (this.footer ? this.footer.getHeight() : 0); - } - return h; - }, - - /** - * 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; - }, - - // private - getContentTarget : 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
.
-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
-});
-
- * The only required property is url. The optional properties nocache, text and scripts
- * are shorthand for disableCaching, indicatorText and loadScripts and are used to set their
- * associated property on this panel Updater instance.
- * @return {Ext.Panel} this
- */
- load : function(){
- var um = this.body.getUpdater();
- um.update.apply(um, arguments);
- return this;
- },
-
- // private
- beforeDestroy : function(){
- Ext.Panel.superclass.beforeDestroy.call(this);
- if(this.header){
- this.header.removeAllListeners();
- }
- if(this.tools){
- for(var k in this.tools){
- Ext.destroy(this.tools[k]);
- }
- }
- if(Ext.isArray(this.buttons)){
- while(this.buttons.length) {
- Ext.destroy(this.buttons[0]);
- }
- }
- if(this.rendered){
- Ext.destroy(
- this.ft,
- this.header,
- this.footer,
- this.toolbars,
- this.tbar,
- this.bbar,
- this.body,
- this.mc,
- this.bwrap
- );
- if (this.fbar) {
- Ext.destroy(
- this.fbar,
- this.fbar.el
- );
- }
- }else{
- Ext.destroy(
- this.topToolbar,
- this.bottomToolbar
- );
- }
- },
-
- // private
- createClasses : function(){
- this.headerCls = this.baseCls + '-header';
- this.headerTextCls = this.baseCls + '-header-text';
- this.bwrapCls = this.baseCls + '-bwrap';
- this.tbarCls = this.baseCls + '-tbar';
- this.bodyCls = this.baseCls + '-body';
- this.bbarCls = this.baseCls + '-bbar';
- this.footerCls = this.baseCls + '-footer';
- },
-
- // private
- createGhost : function(cls, useShim, appendTo){
- var el = document.createElement('div');
- el.className = 'x-panel-ghost ' + (cls ? cls : '');
- if(this.header){
- el.appendChild(this.el.dom.firstChild.cloneNode(true));
- }
- Ext.fly(el.appendChild(document.createElement('ul'))).setHeight(this.bwrap.getHeight());
- el.style.width = this.el.dom.offsetWidth + 'px';;
- if(!appendTo){
- this.container.dom.appendChild(el);
- }else{
- Ext.getDom(appendTo).appendChild(el);
- }
- if(useShim !== false && this.el.useShim !== false){
- var layer = new Ext.Layer({shadow:false, useDisplay:true, constrain:false}, el);
- layer.show();
- return layer;
- }else{
- return new Ext.Element(el);
- }
- },
-
- // private
- doAutoLoad : function(){
- var u = this.body.getUpdater();
- if(this.renderer){
- u.setRenderer(this.renderer);
- }
- u.update(Ext.isObject(this.autoLoad) ? this.autoLoad : {url: this.autoLoad});
- },
-
- /**
- * Retrieve a tool by id.
- * @param {String} id
- * @return {Object} tool
- */
- getTool : function(id) {
- return this.tools[id];
- }
-
-/**
- * @cfg {String} autoEl @hide
- */
-});
-Ext.reg('panel', Ext.Panel);
-/**
- * @class Ext.Editor
- * @extends Ext.Component
- * A base editor field that handles displaying/hiding on demand and has some built-in sizing and event handling logic.
- * @constructor
- * Create a new Editor
- * @param {Object} config The config object
- * @xtype editor
- */
-Ext.Editor = function(field, config){
- if(field.field){
- this.field = Ext.create(field.field, 'textfield');
- config = Ext.apply({}, field); // copy so we don't disturb original config
- delete config.field;
- }else{
- this.field = field;
- }
- Ext.Editor.superclass.constructor.call(this, config);
-};
-
-Ext.extend(Ext.Editor, Ext.Component, {
- /**
- * @cfg {Ext.form.Field} field
- * The Field object (or descendant) or config object for field
- */
- /**
- * @cfg {Boolean} allowBlur
- * True to {@link #completeEdit complete the editing process} if in edit mode when the
- * field is blurred. Defaults to false.
- */
- /**
- * @cfg {Boolean/String} autoSize
- * True for the editor to automatically adopt the size of the underlying field, "width" to adopt the width only,
- * or "height" to adopt the height only, "none" to always use the field dimensions. (defaults to false)
- */
- /**
- * @cfg {Boolean} revertInvalid
- * True to automatically revert the field value and cancel the edit when the user completes an edit and the field
- * validation fails (defaults to true)
- */
- /**
- * @cfg {Boolean} ignoreNoChange
- * True to skip the edit completion process (no save, no events fired) if the user completes an edit and
- * the value has not changed (defaults to false). Applies only to string values - edits for other data types
- * will never be ignored.
- */
- /**
- * @cfg {Boolean} hideEl
- * False to keep the bound element visible while the editor is displayed (defaults to true)
- */
- /**
- * @cfg {Mixed} value
- * The data value of the underlying field (defaults to "")
- */
- value : "",
- /**
- * @cfg {String} alignment
- * The position to align to (see {@link Ext.Element#alignTo} for more details, defaults to "c-c?").
- */
- alignment: "c-c?",
- /**
- * @cfg {Array} offsets
- * The offsets to use when aligning (see {@link Ext.Element#alignTo} for more details. Defaults to [0, 0].
- */
- offsets: [0, 0],
- /**
- * @cfg {Boolean/String} shadow "sides" for sides/bottom only, "frame" for 4-way shadow, and "drop"
- * for bottom-right shadow (defaults to "frame")
- */
- shadow : "frame",
- /**
- * @cfg {Boolean} constrain True to constrain the editor to the viewport
- */
- constrain : false,
- /**
- * @cfg {Boolean} swallowKeys Handle the keydown/keypress events so they don't propagate (defaults to true)
- */
- swallowKeys : true,
- /**
- * @cfg {Boolean} completeOnEnter True to complete the edit when the enter key is pressed. Defaults to true.
- */
- completeOnEnter : true,
- /**
- * @cfg {Boolean} cancelOnEsc True to cancel the edit when the escape key is pressed. Defaults to true.
- */
- cancelOnEsc : true,
- /**
- * @cfg {Boolean} updateEl True to update the innerHTML of the bound element when the update completes (defaults to false)
- */
- updateEl : false,
-
- initComponent : function(){
- Ext.Editor.superclass.initComponent.call(this);
- this.addEvents(
- /**
- * @event beforestartedit
- * Fires when editing is initiated, but before the value changes. Editing can be canceled by returning
- * false from the handler of this event.
- * @param {Editor} this
- * @param {Ext.Element} boundEl The underlying element bound to this editor
- * @param {Mixed} value The field value being set
- */
- "beforestartedit",
- /**
- * @event startedit
- * Fires when this editor is displayed
- * @param {Ext.Element} boundEl The underlying element bound to this editor
- * @param {Mixed} value The starting field value
- */
- "startedit",
- /**
- * @event beforecomplete
- * Fires after a change has been made to the field, but before the change is reflected in the underlying
- * field. Saving the change to the field can be canceled by returning false from the handler of this event.
- * Note that if the value has not changed and ignoreNoChange = true, the editing will still end but this
- * event will not fire since no edit actually occurred.
- * @param {Editor} this
- * @param {Mixed} value The current field value
- * @param {Mixed} startValue The original field value
- */
- "beforecomplete",
- /**
- * @event complete
- * Fires after editing is complete and any changed value has been written to the underlying field.
- * @param {Editor} this
- * @param {Mixed} value The current field value
- * @param {Mixed} startValue The original field value
- */
- "complete",
- /**
- * @event canceledit
- * Fires after editing has been canceled and the editor's value has been reset.
- * @param {Editor} this
- * @param {Mixed} value The user-entered field value that was discarded
- * @param {Mixed} startValue The original field value that was set back into the editor after cancel
- */
- "canceledit",
- /**
- * @event specialkey
- * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check
- * {@link Ext.EventObject#getKey} to determine which key was pressed.
- * @param {Ext.form.Field} this
- * @param {Ext.EventObject} e The event object
- */
- "specialkey"
- );
- },
-
- // private
- onRender : function(ct, position){
- this.el = new Ext.Layer({
- shadow: this.shadow,
- cls: "x-editor",
- parentEl : ct,
- shim : this.shim,
- shadowOffset: this.shadowOffset || 4,
- id: this.id,
- constrain: this.constrain
- });
- if(this.zIndex){
- this.el.setZIndex(this.zIndex);
- }
- this.el.setStyle("overflow", Ext.isGecko ? "auto" : "hidden");
- if(this.field.msgTarget != 'title'){
- this.field.msgTarget = 'qtip';
- }
- this.field.inEditor = true;
- this.mon(this.field, {
- scope: this,
- blur: this.onBlur,
- specialkey: this.onSpecialKey
- });
- if(this.field.grow){
- this.mon(this.field, "autosize", this.el.sync, this.el, {delay:1});
- }
- this.field.render(this.el).show();
- this.field.getEl().dom.name = '';
- if(this.swallowKeys){
- this.field.el.swallowEvent([
- 'keypress', // *** Opera
- 'keydown' // *** all other browsers
- ]);
- }
- },
-
- // private
- onSpecialKey : function(field, e){
- var key = e.getKey(),
- complete = this.completeOnEnter && key == e.ENTER,
- cancel = this.cancelOnEsc && key == e.ESC;
- if(complete || cancel){
- e.stopEvent();
- if(complete){
- this.completeEdit();
- }else{
- this.cancelEdit();
- }
- if(field.triggerBlur){
- field.triggerBlur();
- }
- }
- this.fireEvent('specialkey', field, e);
- },
-
- /**
- * Starts the editing process and shows the editor.
- * @param {Mixed} el The element to edit
- * @param {String} value (optional) A value to initialize the editor with. If a value is not provided, it defaults
- * to the innerHTML of el.
- */
- startEdit : function(el, value){
- if(this.editing){
- this.completeEdit();
- }
- this.boundEl = Ext.get(el);
- var v = value !== undefined ? value : this.boundEl.dom.innerHTML;
- if(!this.rendered){
- this.render(this.parentEl || document.body);
- }
- if(this.fireEvent("beforestartedit", this, this.boundEl, v) !== false){
- this.startValue = v;
- this.field.reset();
- this.field.setValue(v);
- this.realign(true);
- this.editing = true;
- this.show();
- }
- },
-
- // private
- doAutoSize : function(){
- if(this.autoSize){
- var sz = this.boundEl.getSize(),
- fs = this.field.getSize();
-
- switch(this.autoSize){
- case "width":
- this.setSize(sz.width, fs.height);
- break;
- case "height":
- this.setSize(fs.width, sz.height);
- break;
- case "none":
- this.setSize(fs.width, fs.height);
- break;
- default:
- this.setSize(sz.width, sz.height);
- }
- }
- },
-
- /**
- * Sets the height and width of this editor.
- * @param {Number} width The new width
- * @param {Number} height The new height
- */
- setSize : function(w, h){
- delete this.field.lastSize;
- this.field.setSize(w, h);
- if(this.el){
- if(Ext.isGecko2 || Ext.isOpera){
- // prevent layer scrollbars
- this.el.setSize(w, h);
- }
- this.el.sync();
- }
- },
-
- /**
- * Realigns the editor to the bound field based on the current alignment config value.
- * @param {Boolean} autoSize (optional) True to size the field to the dimensions of the bound element.
- */
- realign : function(autoSize){
- if(autoSize === true){
- this.doAutoSize();
- }
- this.el.alignTo(this.boundEl, this.alignment, this.offsets);
- },
-
- /**
- * Ends the editing process, persists the changed value to the underlying field, and hides the editor.
- * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after edit (defaults to false)
- */
- completeEdit : function(remainVisible){
- if(!this.editing){
- return;
- }
- var v = this.getValue();
- if(!this.field.isValid()){
- if(this.revertInvalid !== false){
- this.cancelEdit(remainVisible);
- }
- return;
- }
- if(String(v) === String(this.startValue) && this.ignoreNoChange){
- this.hideEdit(remainVisible);
- return;
- }
- if(this.fireEvent("beforecomplete", this, v, this.startValue) !== false){
- v = this.getValue();
- if(this.updateEl && this.boundEl){
- this.boundEl.update(v);
- }
- this.hideEdit(remainVisible);
- this.fireEvent("complete", this, v, this.startValue);
- }
- },
-
- // private
- onShow : function(){
- this.el.show();
- if(this.hideEl !== false){
- this.boundEl.hide();
- }
- this.field.show().focus(false, true);
- this.fireEvent("startedit", this.boundEl, this.startValue);
- },
-
- /**
- * Cancels the editing process and hides the editor without persisting any changes. The field value will be
- * reverted to the original starting value.
- * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after
- * cancel (defaults to false)
- */
- cancelEdit : function(remainVisible){
- if(this.editing){
- var v = this.getValue();
- this.setValue(this.startValue);
- this.hideEdit(remainVisible);
- this.fireEvent("canceledit", this, v, this.startValue);
- }
- },
-
- // private
- hideEdit: function(remainVisible){
- if(remainVisible !== true){
- this.editing = false;
- this.hide();
- }
- },
-
- // private
- onBlur : function(){
- if(this.allowBlur !== true && this.editing){
- this.completeEdit();
- }
- },
-
- // private
- onHide : function(){
- if(this.editing){
- this.completeEdit();
- return;
- }
- this.field.blur();
- if(this.field.collapse){
- this.field.collapse();
- }
- this.el.hide();
- if(this.hideEl !== false){
- this.boundEl.show();
- }
- },
-
- /**
- * Sets the data value of the editor
- * @param {Mixed} value Any valid value supported by the underlying field
- */
- setValue : function(v){
- this.field.setValue(v);
- },
-
- /**
- * Gets the data value of the editor
- * @return {Mixed} The data value
- */
- getValue : function(){
- return this.field.getValue();
- },
-
- beforeDestroy : function(){
- Ext.destroyMembers(this, 'field');
-
- delete this.parentEl;
- delete this.boundEl;
- }
-});
-Ext.reg('editor', Ext.Editor);
-/**
- * @class Ext.ColorPalette
- * @extends Ext.Component
- * Simple color palette class for choosing colors. The palette can be rendered to any container.
-var cp = new Ext.ColorPalette({value:'993300'}); // initial selected color
-cp.render('my-div');
-
-cp.on('select', function(palette, selColor){
- // do something with selColor
-});
-
- * @constructor
- * Create a new ColorPalette
- * @param {Object} config The config object
- * @xtype colorpalette
- */
-Ext.ColorPalette = Ext.extend(Ext.Component, {
- /**
- * @cfg {String} tpl An existing XTemplate instance to be used in place of the default template for rendering the component.
- */
- /**
- * @cfg {String} itemCls
- * The CSS class to apply to the containing element (defaults to 'x-color-palette')
- */
- itemCls : 'x-color-palette',
- /**
- * @cfg {String} value
- * The initial color to highlight (should be a valid 6-digit color hex code without the # symbol). Note that
- * the hex codes are case-sensitive.
- */
- value : null,
- /**
- * @cfg {String} clickEvent
- * The DOM event that will cause a color to be selected. This can be any valid event name (dblclick, contextmenu).
- * Defaults to 'click'.
- */
- clickEvent :'click',
- // private
- ctype : 'Ext.ColorPalette',
-
- /**
- * @cfg {Boolean} allowReselect If set to true then reselecting a color that is already selected fires the {@link #select} event
- */
- allowReselect : false,
-
- /**
- * 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
-
-
-Or you can provide a custom array of your own for complete control:
-
-var cp = new Ext.ColorPalette();
-cp.colors = ['000000', '993300', '333300'];
-
- * @type Array
- */
- colors : [
- '000000', '993300', '333300', '003300', '003366', '000080', '333399', '333333',
- '800000', 'FF6600', '808000', '008000', '008080', '0000FF', '666699', '808080',
- 'FF0000', 'FF9900', '99CC00', '339966', '33CCCC', '3366FF', '800080', '969696',
- 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0',
- 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', '99CCFF', 'CC99FF', 'FFFFFF'
- ],
-
- /**
- * @cfg {Function} handler
- * Optional. A function that will handle the select event of this palette.
- * The handler is passed the following parameters:palette
: ColorPalettecolor
: String{@link #handler}
- * function will be called. Defaults to this ColorPalette instance.
- */
-
- // private
- initComponent : function(){
- Ext.ColorPalette.superclass.initComponent.call(this);
- this.addEvents(
- /**
- * @event select
- * Fires when a color is selected
- * @param {ColorPalette} this
- * @param {String} color The 6-digit color hex code (without the # symbol)
- */
- 'select'
- );
-
- if(this.handler){
- this.on('select', this.handler, this.scope, true);
- }
- },
-
- // private
- onRender : function(container, position){
- this.autoEl = {
- tag: 'div',
- cls: this.itemCls
- };
- Ext.ColorPalette.superclass.onRender.call(this, container, position);
- var t = this.tpl || new Ext.XTemplate(
- 'A popup date picker. This class is used by the {@link Ext.form.DateField DateField} class - * to allow browsing and selection of valid dates.
- *All the string values documented below may be overridden by including an Ext locale file in - * your page.
- * @constructor - * Create a new DatePicker - * @param {Object} config The config object - * @xtype datepicker - */ -Ext.DatePicker = Ext.extend(Ext.BoxComponent, { - /** - * @cfg {String} todayText - * The text to display on the button that selects the current date (defaults to'Today'
)
- */
- todayText : 'Today',
- /**
- * @cfg {String} okText
- * The text to display on the ok button (defaults to ' OK '
to give the user extra clicking room)
- */
- okText : ' OK ',
- /**
- * @cfg {String} cancelText
- * The text to display on the cancel button (defaults to 'Cancel'
)
- */
- cancelText : 'Cancel',
- /**
- * @cfg {Function} handler
- * Optional. A function that will handle the select event of this picker.
- * The handler is passed the following parameters:picker
: DatePickerdate
: Datethis
reference) in which the {@link #handler}
- * function will be called. Defaults to this DatePicker instance.
- */
- /**
- * @cfg {String} todayTip
- * A string used to format the message for displaying in a tooltip over the button that
- * selects the current date. Defaults to '{0} (Spacebar)'
where
- * the {0}
token is replaced by today's date.
- */
- todayTip : '{0} (Spacebar)',
- /**
- * @cfg {String} minText
- * The error text to display if the minDate validation fails (defaults to 'This date is before the minimum date'
)
- */
- minText : 'This date is before the minimum date',
- /**
- * @cfg {String} maxText
- * The error text to display if the maxDate validation fails (defaults to 'This date is after the maximum date'
)
- */
- maxText : 'This date is after the maximum date',
- /**
- * @cfg {String} format
- * The default date format string which can be overriden for localization support. The format must be
- * valid according to {@link Date#parseDate} (defaults to 'm/d/y'
).
- */
- format : 'm/d/y',
- /**
- * @cfg {String} disabledDaysText
- * The tooltip to display when the date falls on a disabled day (defaults to 'Disabled'
)
- */
- disabledDaysText : 'Disabled',
- /**
- * @cfg {String} disabledDatesText
- * The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled'
)
- */
- disabledDatesText : 'Disabled',
- /**
- * @cfg {Array} monthNames
- * An array of textual month names which can be overriden for localization support (defaults to Date.monthNames)
- */
- monthNames : Date.monthNames,
- /**
- * @cfg {Array} dayNames
- * An array of textual day names which can be overriden for localization support (defaults to Date.dayNames)
- */
- dayNames : Date.dayNames,
- /**
- * @cfg {String} nextText
- * The next month navigation button tooltip (defaults to 'Next Month (Control+Right)'
)
- */
- nextText : 'Next Month (Control+Right)',
- /**
- * @cfg {String} prevText
- * The previous month navigation button tooltip (defaults to 'Previous Month (Control+Left)'
)
- */
- prevText : 'Previous Month (Control+Left)',
- /**
- * @cfg {String} monthYearText
- * The header month selector tooltip (defaults to 'Choose a month (Control+Up/Down to move years)'
)
- */
- monthYearText : 'Choose a month (Control+Up/Down to move years)',
- /**
- * @cfg {Number} startDay
- * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
- */
- startDay : 0,
- /**
- * @cfg {Boolean} showToday
- * False to hide the footer area containing the Today button and disable the keyboard handler for spacebar
- * that selects the current date (defaults to true
).
- */
- showToday : true,
- /**
- * @cfg {Date} minDate
- * Minimum allowable date (JavaScript date object, defaults to null)
- */
- /**
- * @cfg {Date} maxDate
- * Maximum allowable date (JavaScript date object, defaults to null)
- */
- /**
- * @cfg {Array} disabledDays
- * An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
- */
- /**
- * @cfg {RegExp} disabledDatesRE
- * JavaScript regular expression used to disable a pattern of dates (defaults to null). The {@link #disabledDates}
- * config will generate this regex internally, but if you specify disabledDatesRE it will take precedence over the
- * disabledDates value.
- */
- /**
- * @cfg {Array} disabledDates
- * An array of 'dates' to disable, as strings. These strings will be used to build a dynamic regular
- * expression so they are very powerful. Some examples:
- * ', 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();
-
- * @constructor
- * Create a new LoadMask
- * @param {Mixed} el The element or DOM node, or its id
- * @param {Object} config The config object
- */
-Ext.LoadMask = function(el, config){
- this.el = Ext.get(el);
- Ext.apply(this, config);
- if(this.store){
- this.store.on({
- scope: this,
- beforeload: this.onBeforeLoad,
- load: this.onLoad,
- exception: this.onLoad
- });
- this.removeMask = Ext.value(this.removeMask, false);
- }else{
- var um = this.el.getUpdater();
- um.showLoadIndicator = false; // disable the default indicator
- um.on({
- scope: this,
- beforeupdate: this.onBeforeLoad,
- update: this.onLoad,
- failure: this.onLoad
- });
- this.removeMask = Ext.value(this.removeMask, true);
- }
-};
-
-Ext.LoadMask.prototype = {
- /**
- * @cfg {Ext.data.Store} store
- * Optional Store to which the mask is bound. The mask is displayed when a load request is issued, and
- * hidden on either load sucess, or load fail.
- */
- /**
- * @cfg {Boolean} removeMask
- * True to create a single-use mask that is automatically destroyed after loading (useful for page loads),
- * False to persist the mask element reference for multiple uses (e.g., for paged data widgets). Defaults to false.
- */
- /**
- * @cfg {String} msg
- * The text to display in a centered loading message box (defaults to 'Loading...')
- */
- msg : 'Loading...',
- /**
- * @cfg {String} msgCls
- * The CSS class to apply to the loading message element (defaults to "x-mask-loading")
- */
- msgCls : 'x-mask-loading',
-
- /**
- * Read-only. True if the mask is currently disabled so that it will not be displayed (defaults to false)
- * @type Boolean
- */
- disabled: false,
-
- /**
- * Disables the mask to prevent it from being displayed
- */
- disable : function(){
- this.disabled = true;
- },
-
- /**
- * Enables the mask so that it can be displayed
- */
- enable : function(){
- this.disabled = false;
- },
-
- // private
- onLoad : function(){
- this.el.unmask(this.removeMask);
- },
-
- // private
- onBeforeLoad : function(){
- if(!this.disabled){
- this.el.mask(this.msg, this.msgCls);
- }
- },
-
- /**
- * Show this LoadMask over the configured Element.
- */
- show: function(){
- this.onBeforeLoad();
- },
-
- /**
- * Hide this LoadMask.
- */
- hide: function(){
- this.onLoad();
- },
-
- // private
- destroy : function(){
- if(this.store){
- this.store.un('beforeload', this.onBeforeLoad, this);
- this.store.un('load', this.onLoad, this);
- this.store.un('exception', this.onLoad, this);
- }else{
- var um = this.el.getUpdater();
- um.un('beforeupdate', this.onBeforeLoad, this);
- um.un('update', this.onLoad, this);
- um.un('failure', this.onLoad, this);
- }
- }
-};/**
- * @class Ext.Slider
- * @extends Ext.BoxComponent
- * Slider which supports vertical or horizontal orientation, keyboard adjustments,
- * configurable snapping, axis clicking and animation. Can be added as an item to
- * any container. Example usage:
-
-new Ext.Slider({
- renderTo: Ext.getBody(),
- width: 200,
- value: 50,
- increment: 10,
- minValue: 0,
- maxValue: 100
-});
-
- */
-Ext.Slider = Ext.extend(Ext.BoxComponent, {
- /**
- * @cfg {Number} value The value to initialize the slider with. Defaults to minValue.
- */
- /**
- * @cfg {Boolean} vertical Orient the Slider vertically rather than horizontally, defaults to false.
- */
- vertical: false,
- /**
- * @cfg {Number} minValue The minimum value for the Slider. Defaults to 0.
- */
- minValue: 0,
- /**
- * @cfg {Number} maxValue The maximum value for the Slider. Defaults to 100.
- */
- maxValue: 100,
- /**
- * @cfg {Number/Boolean} decimalPrecision.
- * 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); - }, - - // 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 && value)){ - return value; - } - var newValue = value, - inc = this.increment, - m = value % inc; - if(m != 0){ - newValue -= m; - if(m * 2 > inc){ - newValue += inc; - }else if(m * 2 < -inc){ - newValue -= inc; - } - } - return newValue.constrain(this.minValue, this.maxValue); - }, - - // private - 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(), - 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; - }, - - // private - beforeDestroy : function(){ - Ext.destroyMembers(this, 'endEl', 'innerEl', 'thumb', 'halfThumb', 'focusEl', 'tracker', 'thumbHolder'); - Ext.Slider.superclass.beforeDestroy.call(this); - } -}); -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(), - 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()), - 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!');
-});
-
- * @param {Object} config (optional) Configuration options
- * @return {Ext.ProgressBar} this
- */
- wait : function(o){
- if(!this.waitTimer){
- var scope = this;
- o = o || {};
- this.updateText(o.text);
- this.waitTimer = Ext.TaskMgr.start({
- run: function(i){
- var inc = o.increment || 10;
- i -= 1;
- this.updateProgress(((((i+inc)%inc)+1)*(100/inc))*0.01, null, o.animate);
- },
- interval: o.interval || 1000,
- duration: o.duration,
- onStop: function(){
- if(o.fn){
- o.fn.apply(o.scope || this);
- }
- this.reset();
- },
- scope: scope
- });
- }
- return this;
- },
-
- /**
- * Returns true if the progress bar is currently in a {@link #wait} operation
- * @return {Boolean} True if waiting, else false
- */
- isWaiting : function(){
- return this.waitTimer !== null;
- },
-
- /**
- * Updates the progress bar text. If specified, textEl will be updated, otherwise the progress
- * bar itself will display the updated text.
- * @param {String} text (optional) The string to display in the progress text element (defaults to '')
- * @return {Ext.ProgressBar} this
- */
- updateText : function(text){
- this.text = text || ' ';
- if(this.rendered){
- this.textEl.update(this.text);
- }
- return this;
- },
-
- /**
- * Synchronizes the inner bar width to the proper proportion of the total componet width based
- * on the current progress {@link #value}. This will be called automatically when the ProgressBar
- * is resized by a layout, but if it is rendered auto width, this method can be called from
- * another resize handler to sync the ProgressBar if necessary.
- */
- syncProgressBar : function(){
- if(this.value){
- this.updateProgress(this.value, this.text);
- }
- return this;
- },
-
- /**
- * Sets the size of the progress bar.
- * @param {Number} width The new width in pixels
- * @param {Number} height The new height in pixels
- * @return {Ext.ProgressBar} this
- */
- setSize : function(w, h){
- Ext.ProgressBar.superclass.setSize.call(this, w, h);
- if(this.textTopEl){
- var inner = this.el.dom.firstChild;
- this.textEl.setSize(inner.offsetWidth, inner.offsetHeight);
- }
- this.syncProgressBar();
- return this;
- },
-
- /**
- * Resets the progress bar value to 0 and text to empty string. If hide = true, the progress
- * bar will also be hidden (using the {@link #hideMode} property internally).
- * @param {Boolean} hide (optional) True to hide the progress bar (defaults to false)
- * @return {Ext.ProgressBar} this
- */
- reset : function(hide){
- this.updateProgress(0);
- if(this.textTopEl){
- this.textTopEl.addClass('x-hidden');
- }
- if(this.waitTimer){
- this.waitTimer.onStop = null; //prevent recursion
- Ext.TaskMgr.stop(this.waitTimer);
- this.waitTimer = null;
- }
- if(hide === true){
- this.hide();
- }
- return this;
- },
-
- onDestroy: function(){
- if(this.rendered){
- if(this.textEl.isComposite){
- this.textEl.clear();
- }
- Ext.destroyMembers(this, 'textEl', 'progressBar', 'textTopEl');
- }
- Ext.ProgressBar.superclass.onDestroy.call(this);
- }
-});
-Ext.reg('progress', Ext.ProgressBar);
\ No newline at end of file