Upgrade to ExtJS 4.0.0 - Released 04/26/2011
[extjs.git] / pkgs / cmp-foundation-debug.js
diff --git a/pkgs/cmp-foundation-debug.js b/pkgs/cmp-foundation-debug.js
deleted file mode 100644 (file)
index b791522..0000000
+++ /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
- * <p>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}).</p>
- * <p>This object also provides a registry of available Component <i>classes</i>
- * indexed by a mnemonic code known as the Component's {@link Ext.Component#xtype xtype}.
- * The <code>{@link Ext.Component#xtype xtype}</code> provides a way to avoid instantiating child Components
- * when creating a full, nested config object for a complete Ext page.</p>
- * <p>A child Component may be specified simply as a <i>config object</i>
- * as long as the correct <code>{@link Ext.Component#xtype xtype}</code> is specified so that if and when the Component
- * needs rendering, the correct type can be looked up for lazy instantiation.</p>
- * <p>For a list of all available <code>{@link Ext.Component#xtype xtypes}</code>, see {@link Ext.Component}.</p>
- * @singleton
- */
-Ext.ComponentMgr = function(){
-    var all = new Ext.util.MixedCollection();
-    var types = {};
-    var ptypes = {};
-
-    return {
-        /**
-         * Registers a component.
-         * @param {Ext.Component} c The component
-         */
-        register : function(c){
-            all.add(c);
-        },
-
-        /**
-         * Unregisters a component.
-         * @param {Ext.Component} c The component
-         */
-        unregister : function(c){
-            all.remove(c);
-        },
-
-        /**
-         * Returns a component by {@link Ext.Component#id id}.
-         * For additional details see {@link Ext.util.MixedCollection#get}.
-         * @param {String} id The component {@link Ext.Component#id id}
-         * @return Ext.Component The Component, <code>undefined</code> if not found, or <code>null</code> 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 (<code>this</code> 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;    
-        },
-
-        /**
-         * <p>Registers a new Component constructor, keyed by a new
-         * {@link Ext.Component#xtype}.</p>
-         * <p>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}</p>
-         * @param {String} xtype The mnemonic string by which the Component class may be looked up.
-         * @param {Constructor} cls The new Component class.
-         */
-        registerType : function(xtype, cls){
-            types[xtype] = cls;
-            cls.xtype = xtype;
-        },
-
-        /**
-         * Creates a new Component from the specified config object using the
-         * config object's {@link Ext.component#xtype xtype} to determine the class to instantiate.
-         * @param {Object} config A configuration object for the Component you wish to create.
-         * @param {Constructor} defaultType The constructor to provide the default Component type if
-         * the config object does not contain a <code>xtype</code>. (Optional if the config contains a <code>xtype</code>).
-         * @return {Ext.Component} The newly instantiated Component.
-         */
-        create : function(config, defaultType){
-            return config.render ? config : new types[config.xtype || defaultType](config);
-        },
-
-        /**
-         * <p>Registers a new Plugin constructor, keyed by a new
-         * {@link Ext.Component#ptype}.</p>
-         * <p>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.</p>
-         * @param {String} ptype The mnemonic string by which the Plugin class may be looked up.
-         * @param {Constructor} cls The new Plugin class.
-         */
-        registerPlugin : function(ptype, cls){
-            ptypes[ptype] = cls;
-            cls.ptype = ptype;
-        },
-
-        /**
-         * Creates a new Plugin from the specified config object using the
-         * config object's {@link Ext.component#ptype ptype} to determine the class to instantiate.
-         * @param {Object} config A configuration object for the Plugin you wish to create.
-         * @param {Constructor} defaultType The constructor to provide the default Plugin type if
-         * the config object does not contain a <code>ptype</code>. (Optional if the config contains a <code>ptype</code>).
-         * @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 <code>xtype</code>. (Optional if the config contains a <code>xtype</code>).
- * @return {Ext.Component} The newly instantiated Component.
- * @member Ext
- * @method create
- */
-Ext.create = Ext.ComponentMgr.create;/**
- * @class Ext.Component
- * @extends Ext.util.Observable
- * <p>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.</p>
- * <p>The Component base class has built-in support for basic hide/show and enable/disable behavior.</p>
- * <p>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}.</p>
- * <p>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).</p>
- * <p>See the <a href="http://extjs.com/learn/Tutorial:Creating_new_UI_controls">Creating new UI controls</a> tutorial for details on how
- * and to either extend or augment ExtJs base classes to create custom Components.</p>
- * <p>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:</p>
- * <pre>
-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}
-</pre>
- * @constructor
- * @param {Ext.Element/String/Object} config The configuration options may be specified as either:
- * <div class="mdetail-params"><ul>
- * <li><b>an element</b> :
- * <p class="sub-desc">it is set as the internal element and its id used as the component id</p></li>
- * <li><b>a string</b> :
- * <p class="sub-desc">it is assumed to be the id of an existing element and is used as the component id</p></li>
- * <li><b>anything else</b> :
- * <p class="sub-desc">it is assumed to be a standard config object and is applied to the component</p></li>
- * </ul></div>
- */
-Ext.Component = function(config){
-    config = config || {};
-    if(config.initialConfig){
-        if(config.isAction){           // actions
-            this.baseAction = config;
-        }
-        config = config.initialConfig; // component cloning / action set up
-    }else if(config.tagName || config.dom || Ext.isString(config)){ // element object
-        config = {applyTo: config, id: config.id || config};
-    }
-
-    /**
-     * This Component's initial configuration specification. Read-only.
-     * @type Object
-     * @property initialConfig
-     */
-    this.initialConfig = config;
-
-    Ext.apply(this, config);
-    this.addEvents(
-        /**
-         * @event added
-         * Fires when a component is added to an Ext.Container
-         * @param {Ext.Component} this
-         * @param {Ext.Container} ownerCt Container which holds the component
-         * @param {number} index Position at which the component was added
-         */
-        'added',
-        /**
-         * @event disable
-         * Fires after the component is disabled.
-         * @param {Ext.Component} this
-         */
-        'disable',
-        /**
-         * @event enable
-         * Fires after the component is enabled.
-         * @param {Ext.Component} this
-         */
-        'enable',
-        /**
-         * @event beforeshow
-         * Fires before the component is shown by calling the {@link #show} method.
-         * Return false from an event handler to stop the show.
-         * @param {Ext.Component} this
-         */
-        'beforeshow',
-        /**
-         * @event show
-         * Fires after the component is shown when calling the {@link #show} method.
-         * @param {Ext.Component} this
-         */
-        'show',
-        /**
-         * @event beforehide
-         * Fires before the component is hidden by calling the {@link #hide} method.
-         * Return false from an event handler to stop the hide.
-         * @param {Ext.Component} this
-         */
-        'beforehide',
-        /**
-         * @event hide
-         * Fires after the component is hidden.
-         * Fires after the component is hidden when calling the {@link #hide} method.
-         * @param {Ext.Component} this
-         */
-        'hide',
-        /**
-         * @event removed
-         * Fires when a component is removed from an Ext.Container
-         * @param {Ext.Component} this
-         * @param {Ext.Container} ownerCt Container which holds the component
-         */
-        'removed',
-        /**
-         * @event beforerender
-         * Fires before the component is {@link #rendered}. Return false from an
-         * event handler to stop the {@link #render}.
-         * @param {Ext.Component} this
-         */
-        'beforerender',
-        /**
-         * @event render
-         * Fires after the component markup is {@link #rendered}.
-         * @param {Ext.Component} this
-         */
-        'render',
-        /**
-         * @event afterrender
-         * <p>Fires after the component rendering is finished.</p>
-         * <p>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.</p>
-         * @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 <b><tt>applyState</tt></b>. 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 <b><tt>applyState</tt></b>. 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
-         * <b><tt>getState()</tt></b> 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
-         * <b><tt>getState()</tt></b> 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} fieldLabel <p>The label text to display next to this Component (defaults to '').</p>
-     * <br><p><b>Note</b>: this config is only used when this Component is rendered by a Container which
-     * has been configured to use the <b>{@link Ext.layout.FormLayout FormLayout}</b> layout manager (e.g.
-     * {@link Ext.form.FormPanel} or specifying <tt>layout:'form'</tt>).</p><br>
-     * <p>Also see <tt>{@link #hideLabel}</tt> and
-     * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}.</p>
-     * Example use:<pre><code>
-new Ext.FormPanel({
-    height: 100,
-    renderTo: Ext.getBody(),
-    items: [{
-        xtype: 'textfield',
-        fieldLabel: 'Name'
-    }]
-});
-</code></pre>
-     */
-    /**
-     * @cfg {String} labelStyle <p>A CSS style specification string to apply directly to this field's
-     * label.  Defaults to the container's labelStyle value if set (e.g.,
-     * <tt>{@link Ext.layout.FormLayout#labelStyle}</tt> , or '').</p>
-     * <br><p><b>Note</b>: see the note for <code>{@link #clearCls}</code>.</p><br>
-     * <p>Also see <code>{@link #hideLabel}</code> and
-     * <code>{@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}.</code></p>
-     * Example use:<pre><code>
-new Ext.FormPanel({
-    height: 100,
-    renderTo: Ext.getBody(),
-    items: [{
-        xtype: 'textfield',
-        fieldLabel: 'Name',
-        labelStyle: 'font-weight:bold;'
-    }]
-});
-</code></pre>
-     */
-    /**
-     * @cfg {String} labelSeparator <p>The separator to display after the text of each
-     * <tt>{@link #fieldLabel}</tt>.  This property may be configured at various levels.
-     * The order of precedence is:
-     * <div class="mdetail-params"><ul>
-     * <li>field / component level</li>
-     * <li>container level</li>
-     * <li>{@link Ext.layout.FormLayout#labelSeparator layout level} (defaults to colon <tt>':'</tt>)</li>
-     * </ul></div>
-     * To display no separator for this field's label specify empty string ''.</p>
-     * <br><p><b>Note</b>: see the note for <tt>{@link #clearCls}</tt>.</p><br>
-     * <p>Also see <tt>{@link #hideLabel}</tt> and
-     * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}.</p>
-     * Example use:<pre><code>
-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 '='
-    }]
-});
-</code></pre>
-     */
-    /**
-     * @cfg {Boolean} hideLabel <p><tt>true</tt> to completely hide the label element
-     * ({@link #fieldLabel label} and {@link #labelSeparator separator}). Defaults to <tt>false</tt>.
-     * By default, even if you do not specify a <tt>{@link #fieldLabel}</tt> the space will still be
-     * reserved so that the field will line up with other fields that do have labels.
-     * Setting this to <tt>true</tt> will cause the field to not reserve that space.</p>
-     * <br><p><b>Note</b>: see the note for <tt>{@link #clearCls}</tt>.</p><br>
-     * Example use:<pre><code>
-new Ext.FormPanel({
-    height: 100,
-    renderTo: Ext.getBody(),
-    items: [{
-        xtype: 'textfield'
-        hideLabel: true
-    }]
-});
-</code></pre>
-     */
-    /**
-     * @cfg {String} clearCls <p>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
-     * <tt>'x-form-clear-left'</tt>).</p>
-     * <br><p><b>Note</b>: this config is only used when this Component is rendered by a Container
-     * which has been configured to use the <b>{@link Ext.layout.FormLayout FormLayout}</b> layout
-     * manager (e.g. {@link Ext.form.FormPanel} or specifying <tt>layout:'form'</tt>) and either a
-     * <tt>{@link #fieldLabel}</tt> is specified or <tt>isFormField=true</tt> is specified.</p><br>
-     * <p>See {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl} also.</p>
-     */
-    /**
-     * @cfg {String} itemCls
-     * <p><b>Note</b>: this config is only used when this Component is rendered by a Container which
-     * has been configured to use the <b>{@link Ext.layout.FormLayout FormLayout}</b> layout manager (e.g.
-     * {@link Ext.form.FormPanel} or specifying <tt>layout:'form'</tt>).</p><br>
-     * <p>An additional CSS class to apply to the div wrapping the form item
-     * element of this field.  If supplied, <tt>itemCls</tt> at the <b>field</b> level will override
-     * the default <tt>itemCls</tt> supplied at the <b>container</b> level. The value specified for
-     * <tt>itemCls</tt> will be added to the default class (<tt>'x-form-item'</tt>).</p>
-     * <p>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.</p>
-     * <br><p><b>Note</b>: see the note for <tt>{@link #fieldLabel}</tt>.</p><br>
-     * Example use:<pre><code>
-// Apply a style to the field&#39;s label:
-&lt;style>
-    .required .x-form-item-label {font-weight:bold;color:red;}
-&lt;/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'
-    }]
-});
-</code></pre>
-     */
-
-    // Configs below are used for all Components when rendered by AnchorLayout.
-    /**
-     * @cfg {String} anchor <p><b>Note</b>: this config is only used when this Component is rendered
-     * by a Container which has been configured to use an <b>{@link Ext.layout.AnchorLayout AnchorLayout}</b>
-     * based layout manager, for example:<div class="mdetail-params"><ul>
-     * <li>{@link Ext.form.FormPanel}</li>
-     * <li>specifying <code>layout: 'anchor' // or 'form', or 'absolute'</code></li>
-     * </ul></div></p>
-     * <p>See {@link Ext.layout.AnchorLayout}.{@link Ext.layout.AnchorLayout#anchor anchor} also.</p>
-     */
-
-    /**
-     * @cfg {String} id
-     * <p>The <b>unique</b> 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}).</p>
-     * <p>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.</p>
-     * <p><b>Note</b>: to avoid complications imposed by a unique <tt>id</tt> also see
-     * <code>{@link #itemId}</code> and <code>{@link #ref}</code>.</p>
-     * <p><b>Note</b>: to access the container of an item see <code>{@link #ownerCt}</code>.</p>
-     */
-    /**
-     * @cfg {String} itemId
-     * <p>An <tt>itemId</tt> can be used as an alternative way to get a reference to a component
-     * when no object reference is available.  Instead of using an <code>{@link #id}</code> with
-     * {@link Ext}.{@link Ext#getCmp getCmp}, use <code>itemId</code> with
-     * {@link Ext.Container}.{@link Ext.Container#getComponent getComponent} which will retrieve
-     * <code>itemId</code>'s or <tt>{@link #id}</tt>'s. Since <code>itemId</code>'s are an index to the
-     * container's internal MixedCollection, the <code>itemId</code> is scoped locally to the container --
-     * avoiding potential conflicts with {@link Ext.ComponentMgr} which requires a <b>unique</b>
-     * <code>{@link #id}</code>.</p>
-     * <pre><code>
-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
-     * </code></pre>
-     * <p>Also see <tt>{@link #id}</tt> and <code>{@link #ref}</code>.</p>
-     * <p><b>Note</b>: to access the container of an item see <tt>{@link #ownerCt}</tt>.</p>
-     */
-    /**
-     * @cfg {String} xtype
-     * The registered <tt>xtype</tt> 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 <i>Component config
-     * object</i>. The <tt>xtype</tt> will be looked up at render time up to determine what
-     * type of child Component to create.<br><br>
-     * The predefined xtypes are listed {@link Ext.Component here}.
-     * <br><br>
-     * If you subclass Components to create your own Components, you may register
-     * them using {@link Ext.ComponentMgr#registerType} in order to be able to
-     * take advantage of lazy instantiation and rendering.
-     */
-    /**
-     * @cfg {String} ptype
-     * The registered <tt>ptype</tt> to create. This config option is not used when passing
-     * a config object into a constructor. This config option is used only when
-     * lazy instantiation is being used, and a Plugin is being
-     * specified not as a fully instantiated Component, but as a <i>Component config
-     * object</i>. The <tt>ptype</tt> will be looked up at render time up to determine what
-     * type of Plugin to create.<br><br>
-     * If you create your own Plugins, you may register them using
-     * {@link Ext.ComponentMgr#registerPlugin} in order to be able to
-     * take advantage of lazy instantiation and rendering.
-     */
-    /**
-     * @cfg {String} cls
-     * An optional extra CSS class that will be added to this component's Element (defaults to '').  This can be
-     * useful for adding customized styles to the component or any of its children using standard CSS rules.
-     */
-    /**
-     * @cfg {String} overCls
-     * An optional extra CSS class that will be added to this component's Element when the mouse moves
-     * over the Element, and removed when the mouse moves out. (defaults to '').  This can be
-     * useful for adding customized 'active' or 'hover' styles to the component or any of its children using standard CSS rules.
-     */
-    /**
-     * @cfg {String} style
-     * A custom style specification to be applied to this component's Element.  Should be a valid argument to
-     * {@link Ext.Element#applyStyles}.
-     * <pre><code>
-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'
-            }
-        })
-    ]
-});
-     * </code></pre>
-     */
-    /**
-     * @cfg {String} ctCls
-     * <p>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.</p>
-     * <p><b>Note</b>: <tt>ctCls</tt> defaults to <tt>''</tt> except for the following class
-     * which assigns a value by default:
-     * <div class="mdetail-params"><ul>
-     * <li>{@link Ext.layout.Box Box Layout} : <tt>'x-box-layout-ct'</tt></li>
-     * </ul></div>
-     * To configure the above Class with an extra CSS class append to the default.  For example,
-     * for BoxLayout (Hbox and Vbox):<pre><code>
-     * ctCls: 'x-box-layout-ct custom-class'
-     * </code></pre>
-     * </p>
-     */
-    /**
-     * @cfg {Boolean} disabled
-     * Render this component disabled (default is false).
-     */
-    disabled : false,
-    /**
-     * @cfg {Boolean} hidden
-     * Render this component hidden (default is false). If <tt>true</tt>, 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
-     * <p>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.</p><div><ul>
-     * <li><b>Description</b> : <ul>
-     * <div class="sub-desc">When <tt>applyTo</tt> is used, constituent parts of the component can also be specified
-     * by id or CSS class name within the main element, and the component being created may attempt
-     * to create its subcomponents from that markup if applicable.</div>
-     * </ul></li>
-     * <li><b>Notes</b> : <ul>
-     * <div class="sub-desc">When using this config, a call to render() is not required.</div>
-     * <div class="sub-desc">If applyTo is specified, any value passed for {@link #renderTo} will be ignored and the target
-     * element's parent node will automatically be used as the component's container.</div>
-     * </ul></li>
-     * </ul></div>
-     */
-    /**
-     * @cfg {Mixed} renderTo
-     * <p>Specify the id of the element, a DOM element or an existing Element that this component
-     * will be rendered into.</p><div><ul>
-     * <li><b>Notes</b> : <ul>
-     * <div class="sub-desc">Do <u>not</u> use this option if the Component is to be a child item of
-     * a {@link Ext.Container Container}. It is the responsibility of the
-     * {@link Ext.Container Container}'s {@link Ext.Container#layout layout manager}
-     * to render and manage its child items.</div>
-     * <div class="sub-desc">When using this config, a call to render() is not required.</div>
-     * </ul></li>
-     * </ul></div>
-     * <p>See <tt>{@link #render}</tt> also.</p>
-     */
-    /**
-     * @cfg {Boolean} stateful
-     * <p>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 <code>{@link #stateId}</code> or <code>{@link #id}</code> 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.<p>
-     * <p>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.</p>
-     * <p>To set the state provider for the current page:</p>
-     * <pre><code>
-Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
-    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
-}));
-     * </code></pre>
-     * <p>A stateful Component attempts to save state when one of the events
-     * listed in the <code>{@link #stateEvents}</code> configuration fires.</p>
-     * <p>To save state, a stateful Component first serializes its state by
-     * calling <b><code>getState</code></b>. By default, this function does
-     * nothing. The developer must provide an implementation which returns an
-     * object hash which represents the Component's restorable state.</p>
-     * <p>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 <code>{@link stateId}</code>, or, if that is not
-     * specified, its <code>{@link #id}</code>.</p>
-     * <p>During construction, a stateful Component attempts to <i>restore</i>
-     * its state by calling {@link Ext.state.Manager#get} passing the
-     * <code>{@link #stateId}</code>, or, if that is not specified, the
-     * <code>{@link #id}</code>.</p>
-     * <p>The resulting object is passed to <b><code>applyState</code></b>.
-     * The default implementation of <code>applyState</code> simply copies
-     * properties into the object, but a developer may override this to support
-     * more behaviour.</p>
-     * <p>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.</p>
-     */
-    /**
-     * @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).
-     * <p>See <code>{@link #stateful}</code> for an explanation of saving and
-     * restoring Component state.</p>
-     */
-    /**
-     * @cfg {Array} stateEvents
-     * <p>An array of events that, when fired, should trigger this component to
-     * save its state (defaults to none). <code>stateEvents</code> may be any type
-     * of event supported by this component, including browser or custom events
-     * (e.g., <tt>['click', 'customerchange']</tt>).</p>
-     * <p>See <code>{@link #stateful}</code> for an explanation of saving and
-     * restoring Component state.</p>
-     */
-    /**
-     * @cfg {Mixed} autoEl
-     * <p>A tag name or {@link Ext.DomHelper DomHelper} spec used to create the {@link #getEl Element} which will
-     * encapsulate this Component.</p>
-     * <p>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 <b><tt>'div'</tt></b>. The more complex Ext classes use a more complex
-     * DOM structure created by their own onRender methods.</p>
-     * <p>This is intended to allow the developer to create application-specific utility Components encapsulated by
-     * different DOM elements. Example usage:</p><pre><code>
-{
-    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'
-    }
-}
-</code></pre>
-     */
-    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
-     * <p>How this component should be hidden. Supported values are <tt>'visibility'</tt>
-     * (css visibility), <tt>'offsets'</tt> (negative offset position) and <tt>'display'</tt>
-     * (css display).</p>
-     * <br><p><b>Note</b>: the default of <tt>'display'</tt> is generally preferred
-     * since items are automatically laid out when they are first shown (no sizing
-     * is done while hidden).</p>
-     */
-    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,
-    /**
-     * <p>The {@link Ext.Element} which encapsulates this Component. Read-only.</p>
-     * <p>This will <i>usually</i> be a &lt;DIV> element created by the class's onRender method, but
-     * that may be overridden using the <code>{@link #autoEl}</code> config.</p>
-     * <br><p><b>Note</b>: this element will not be available until this Component has been rendered.</p><br>
-     * <p>To add listeners for <b>DOM events</b> 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:</p><pre><code>
-new Ext.Panel({
-    title: 'The Clickable Panel',
-    listeners: {
-        render: function(p) {
-            // Append the Panel to the click handler&#39;s argument list.
-            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
-        },
-        single: true  // Remove the listener after first invocation
-    }
-});
-</code></pre>
-     * <p>See also <tt>{@link #getEl getEl}</p>
-     * @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.
-     * <p><b>Note</b>: to access items within the Container see <tt>{@link #itemId}</tt>.</p>
-     * @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
-     * <p>Optional. Specify an existing HTML element, or the <code>id</code> of an existing HTML element to use as the content
-     * for this component.</p>
-     * <ul>
-     * <li><b>Description</b> :
-     * <div class="sub-desc">This config option is used to take an existing HTML element and place it in the layout element
-     * of a new component (it simply moves the specified DOM element <i>after the Component is rendered</i> to use as the content.</div></li>
-     * <li><b>Notes</b> :
-     * <div class="sub-desc">The specified HTML element is appended to the layout element of the component <i>after any configured
-     * {@link #html HTML} has been inserted</i>, and so the document will not contain this element at the time the {@link #render} event is fired.</div>
-     * <div class="sub-desc">The specified HTML element used will not participate in any <code><b>{@link Ext.Container#layout layout}</b></code>
-     * scheme that the Component may use. It is just HTML. Layouts operate on child <code><b>{@link Ext.Container#items items}</b></code>.</div>
-     * <div class="sub-desc">Add either the <code>x-hidden</code> or the <code>x-hide-display</code> CSS class to
-     * prevent a brief flicker of the content before it is rendered to the panel.</div></li>
-     * </ul>
-     */
-    /**
-     * @cfg {String/Object} html
-     * An HTML fragment, or a {@link Ext.DomHelper DomHelper} specification to use as the layout element
-     * content (defaults to ''). The HTML content is added after the component is rendered,
-     * so the document will not contain this HTML at the time the {@link #render} event is fired.
-     * This content is inserted into the body <i>before</i> any configured {@link #contentEl} is appended.
-     */
-
-    /**
-     * @cfg {Mixed} tpl
-     * An <bold>{@link Ext.Template}</bold>, <bold>{@link Ext.XTemplate}</bold>
-     * or an array of strings to form an Ext.XTemplate.
-     * Used in conjunction with the <code>{@link #data}</code> and 
-     * <code>{@link #tplWriteMode}</code> configurations.
-     */
-
-    /**
-     * @cfg {String} tplWriteMode The Ext.(X)Template method to use when
-     * updating the content area of the Component. Defaults to <tt>'overwrite'</tt>
-     * (see <code>{@link Ext.XTemplate#overwrite}</code>).
-     */
-    tplWriteMode : 'overwrite',
-
-    /**
-     * @cfg {Mixed} data
-     * The initial set of data to apply to the <code>{@link #tpl}</code> 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).
-     * <pre><code>
-// 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
-        });
-    }
-}
-</code></pre>
-     */
-    initComponent : Ext.emptyFn,
-
-    /**
-     * <p>Render this Component into the passed HTML element.</p>
-     * <p><b>If you are using a {@link Ext.Container Container} object to house this Component, then
-     * do not use the render method.</b></p>
-     * <p>A Container's child Components are rendered by that Container's
-     * {@link Ext.Container#layout layout} manager when the Container is first rendered.</p>
-     * <p>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}.</p>
-     * <p>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.</p>
-     * <p>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.</p>
-     * <p><b>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.</b></p>
-     * @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 <b>before</b>
-     * 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
-         * <p>A path specification, relative to the Component's <code>{@link #ownerCt}</code>
-         * specifying into which ancestor Container to place a named reference to this Component.</p>
-         * <p>The ancestor axis can be traversed by using '/' characters in the path.
-         * For example, to put a reference to a Toolbar Button into <i>the Panel which owns the Toolbar</i>:</p><pre><code>
-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();
-        }
-    }
-});
-</code></pre>
-         * <p>In the code above, if the <code>ref</code> had been <code>'saveButton'</code>
-         * the reference would have been placed into the Toolbar. Each '/' in the <code>ref</code>
-         * moves up one level from the Component's <code>{@link #ownerCt}</code>.</p>
-         * <p>Also see the <code>{@link #added}</code> and <code>{@link #removed}</code> events.</p>
-         */
-        if(this.ref && !this.refOwner){
-            var levels = this.ref.split('/'),
-                last = levels.length, 
-                i = 0,
-                t = this;
-                
-            while(t && i < last){
-                t = t.ownerCt;
-                ++i;
-            }
-            if(t){
-                t[this.refName = levels[--i]] = this;
-                /**
-                 * @type Ext.Container
-                 * @property refOwner
-                 * The ancestor Container into which the {@link #ref} reference was inserted if this Component
-                 * is a child of a Container, and has been configured with a <code>ref</code>.
-                 */
-                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,
-
-    /**
-     * <p>Returns the {@link Ext.Element} which encapsulates this Component.</p>
-     * <p>This will <i>usually</i> be a &lt;DIV> element created by the class's onRender method, but
-     * that may be overridden using the {@link #autoEl} config.</p>
-     * <br><p><b>Note</b>: this element will not be available until this Component has been rendered.</p><br>
-     * <p>To add listeners for <b>DOM events</b> 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:</p><pre><code>
-new Ext.Panel({
-    title: 'The Clickable Panel',
-    listeners: {
-        render: function(p) {
-            // Append the Panel to the click handler&#39;s argument list.
-            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
-        },
-        single: true  // Remove the listener after first invocation
-    }
-});
-</code></pre>
-     * @return {Ext.Element} The Element which encapsulates this Component.
-     */
-    getEl : function(){
-        return this.el;
-    },
-
-    // private
-    getContentTarget : function(){
-        return this.el;
-    },
-
-    /**
-     * Returns the <code>id</code> of this component or automatically generates and
-     * returns an <code>id</code> if an <code>id</code> is not defined yet:<pre><code>
-     * 'ext-comp-' + (++Ext.Component.AUTO_ID)
-     * </code></pre>
-     * @return {String} id
-     */
-    getId : function(){
-        return this.id || (this.id = 'ext-comp-' + (++Ext.Component.AUTO_ID));
-    },
-
-    /**
-     * Returns the <code>{@link #itemId}</code> of this component.  If an
-     * <code>{@link #itemId}</code> was not assigned through configuration the
-     * <code>id</code> is returned using <code>{@link #getId}</code>.
-     * @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
-     * <tt>false</tt> 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
-     * <tt>false</tt> 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 <code>{@link #hidden}</code>.
-     * @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:
-     * <pre><code>
-var t = new Ext.form.TextField();
-alert(t.getXType());  // alerts 'textfield'
-</code></pre>
-     * @return {String} The xtype
-     */
-    getXType : function(){
-        return this.constructor.xtype;
-    },
-
-    /**
-     * <p>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).</p>
-     * <p><b>If using your own subclasses, be aware that a Component must register its own xtype
-     * to participate in determination of inherited xtypes.</b></p>
-     * <p>For a list of all available xtypes, see the {@link Ext.Component} header.</p>
-     * <p>Example usage:</p>
-     * <pre><code>
-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
-</code></pre>
-     * @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;
-    },
-
-    /**
-     * <p>Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
-     * available xtypes, see the {@link Ext.Component} header.</p>
-     * <p><b>If using your own subclasses, be aware that a Component must register its own xtype
-     * to participate in determination of inherited xtypes.</b></p>
-     * <p>Example usage:</p>
-     * <pre><code>
-var t = new Ext.form.TextField();
-alert(t.getXTypes());  // alerts 'component/box/field/textfield'
-</code></pre>
-     * @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});
-        }
-    },
-
-    /**
-     * <p>Adds listeners to any Observable object (or Elements) which are automatically removed when this Component
-     * is destroyed. Usage:</p><code><pre>
-myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
-</pre></code>
-     * <p>or:</p><code><pre>
-myGridPanel.mon(myGridPanel.getSelectionModel(), {
-    selectionchange: handleSelectionChange,
-    buffer: 50
-});
-</pre></code>
-     * @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 <code>ename</code> parameter was an event name, this
-     * is the handler function.
-     * @param {Object} scope Optional. If the <code>ename</code> parameter was an event name, this
-     * is the scope (<code>this</code> reference) in which the handler function is executed.
-     * @param {Object} opt Optional. If the <code>ename</code> 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 <code>ename</code> parameter was an event name, this
-     * is the handler function.
-     * @param {Object} scope Optional. If the <code>ename</code> parameter was an event name, this
-     * is the scope (<code>this</code> 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);/**\r
- * @class Ext.Action\r
- * <p>An Action is a piece of reusable functionality that can be abstracted out of any particular component so that it\r
- * can be usefully shared among multiple components.  Actions let you share handlers, configuration options and UI\r
- * updates across any components that support the Action interface (primarily {@link Ext.Toolbar}, {@link Ext.Button}\r
- * and {@link Ext.menu.Menu} components).</p>\r
- * <p>Aside from supporting the config object interface, any component that needs to use Actions must also support\r
- * the following method list, as these will be called as needed by the Action class: setText(string), setIconCls(string),\r
- * setDisabled(boolean), setVisible(boolean) and setHandler(function).</p>\r
- * Example usage:<br>\r
- * <pre><code>\r
-// Define the shared action.  Each component below will have the same\r
-// display text and icon, and will display the same message on click.\r
-var action = new Ext.Action({\r
-    {@link #text}: 'Do something',\r
-    {@link #handler}: function(){\r
-        Ext.Msg.alert('Click', 'You did something.');\r
-    },\r
-    {@link #iconCls}: 'do-something',\r
-    {@link #itemId}: 'myAction'\r
-});\r
-\r
-var panel = new Ext.Panel({\r
-    title: 'Actions',\r
-    width: 500,\r
-    height: 300,\r
-    tbar: [\r
-        // Add the action directly to a toolbar as a menu button\r
-        action,\r
-        {\r
-            text: 'Action Menu',\r
-            // Add the action to a menu as a text item\r
-            menu: [action]\r
-        }\r
-    ],\r
-    items: [\r
-        // Add the action to the panel body as a standard button\r
-        new Ext.Button(action)\r
-    ],\r
-    renderTo: Ext.getBody()\r
-});\r
-\r
-// Change the text for all components using the action\r
-action.setText('Something else');\r
-\r
-// Reference an action through a container using the itemId\r
-var btn = panel.getComponent('myAction');\r
-var aRef = btn.baseAction;\r
-aRef.setText('New text');\r
-</code></pre>\r
- * @constructor\r
- * @param {Object} config The configuration options\r
- */\r
-Ext.Action = Ext.extend(Object, {\r
-    /**\r
-     * @cfg {String} text The text to set for all components using this action (defaults to '').\r
-     */\r
-    /**\r
-     * @cfg {String} iconCls\r
-     * The CSS class selector that specifies a background image to be used as the header icon for\r
-     * all components using this action (defaults to '').\r
-     * <p>An example of specifying a custom icon class would be something like:\r
-     * </p><pre><code>\r
-// specify the property in the config for the class:\r
-     ...\r
-     iconCls: 'do-something'\r
-\r
-// css class that specifies background image to be used as the icon image:\r
-.do-something { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; }\r
-</code></pre>\r
-     */\r
-    /**\r
-     * @cfg {Boolean} disabled True to disable all components using this action, false to enable them (defaults to false).\r
-     */\r
-    /**\r
-     * @cfg {Boolean} hidden True to hide all components using this action, false to show them (defaults to false).\r
-     */\r
-    /**\r
-     * @cfg {Function} handler The function that will be invoked by each component tied to this action\r
-     * when the component's primary event is triggered (defaults to undefined).\r
-     */\r
-    /**\r
-     * @cfg {String} itemId\r
-     * See {@link Ext.Component}.{@link Ext.Component#itemId itemId}.\r
-     */\r
-    /**\r
-     * @cfg {Object} scope The scope (<tt><b>this</b></tt> reference) in which the\r
-     * <code>{@link #handler}</code> is executed. Defaults to this Button.\r
-     */\r
-\r
-    constructor : function(config){\r
-        this.initialConfig = config;\r
-        this.itemId = config.itemId = (config.itemId || config.id || Ext.id());\r
-        this.items = [];\r
-    },\r
-    \r
-    // private\r
-    isAction : true,\r
-\r
-    /**\r
-     * Sets the text to be displayed by all components using this action.\r
-     * @param {String} text The text to display\r
-     */\r
-    setText : function(text){\r
-        this.initialConfig.text = text;\r
-        this.callEach('setText', [text]);\r
-    },\r
-\r
-    /**\r
-     * Gets the text currently displayed by all components using this action.\r
-     */\r
-    getText : function(){\r
-        return this.initialConfig.text;\r
-    },\r
-\r
-    /**\r
-     * Sets the icon CSS class for all components using this action.  The class should supply\r
-     * a background image that will be used as the icon image.\r
-     * @param {String} cls The CSS class supplying the icon image\r
-     */\r
-    setIconClass : function(cls){\r
-        this.initialConfig.iconCls = cls;\r
-        this.callEach('setIconClass', [cls]);\r
-    },\r
-\r
-    /**\r
-     * Gets the icon CSS class currently used by all components using this action.\r
-     */\r
-    getIconClass : function(){\r
-        return this.initialConfig.iconCls;\r
-    },\r
-\r
-    /**\r
-     * Sets the disabled state of all components using this action.  Shortcut method\r
-     * for {@link #enable} and {@link #disable}.\r
-     * @param {Boolean} disabled True to disable the component, false to enable it\r
-     */\r
-    setDisabled : function(v){\r
-        this.initialConfig.disabled = v;\r
-        this.callEach('setDisabled', [v]);\r
-    },\r
-\r
-    /**\r
-     * Enables all components using this action.\r
-     */\r
-    enable : function(){\r
-        this.setDisabled(false);\r
-    },\r
-\r
-    /**\r
-     * Disables all components using this action.\r
-     */\r
-    disable : function(){\r
-        this.setDisabled(true);\r
-    },\r
-\r
-    /**\r
-     * Returns true if the components using this action are currently disabled, else returns false.  \r
-     */\r
-    isDisabled : function(){\r
-        return this.initialConfig.disabled;\r
-    },\r
-\r
-    /**\r
-     * Sets the hidden state of all components using this action.  Shortcut method\r
-     * for <code>{@link #hide}</code> and <code>{@link #show}</code>.\r
-     * @param {Boolean} hidden True to hide the component, false to show it\r
-     */\r
-    setHidden : function(v){\r
-        this.initialConfig.hidden = v;\r
-        this.callEach('setVisible', [!v]);\r
-    },\r
-\r
-    /**\r
-     * Shows all components using this action.\r
-     */\r
-    show : function(){\r
-        this.setHidden(false);\r
-    },\r
-\r
-    /**\r
-     * Hides all components using this action.\r
-     */\r
-    hide : function(){\r
-        this.setHidden(true);\r
-    },\r
-\r
-    /**\r
-     * Returns true if the components using this action are currently hidden, else returns false.  \r
-     */\r
-    isHidden : function(){\r
-        return this.initialConfig.hidden;\r
-    },\r
-\r
-    /**\r
-     * Sets the function that will be called by each Component using this action when its primary event is triggered.\r
-     * @param {Function} fn The function that will be invoked by the action's components.  The function\r
-     * will be called with no arguments.\r
-     * @param {Object} scope The scope (<code>this</code> reference) in which the function is executed. Defaults to the Component firing the event.\r
-     */\r
-    setHandler : function(fn, scope){\r
-        this.initialConfig.handler = fn;\r
-        this.initialConfig.scope = scope;\r
-        this.callEach('setHandler', [fn, scope]);\r
-    },\r
-\r
-    /**\r
-     * Executes the specified function once for each Component currently tied to this action.  The function passed\r
-     * in should accept a single argument that will be an object that supports the basic Action config/method interface.\r
-     * @param {Function} fn The function to execute for each component\r
-     * @param {Object} scope The scope (<code>this</code> reference) in which the function is executed.  Defaults to the Component.\r
-     */\r
-    each : function(fn, scope){\r
-        Ext.each(this.items, fn, scope);\r
-    },\r
-\r
-    // private\r
-    callEach : function(fnName, args){\r
-        var cs = this.items;\r
-        for(var i = 0, len = cs.length; i < len; i++){\r
-            cs[i][fnName].apply(cs[i], args);\r
-        }\r
-    },\r
-\r
-    // private\r
-    addComponent : function(comp){\r
-        this.items.push(comp);\r
-        comp.on('destroy', this.removeComponent, this);\r
-    },\r
-\r
-    // private\r
-    removeComponent : function(comp){\r
-        this.items.remove(comp);\r
-    },\r
-\r
-    /**\r
-     * Executes this action manually using the handler function specified in the original config object\r
-     * or the handler function set with <code>{@link #setHandler}</code>.  Any arguments passed to this\r
-     * function will be passed on to the handler function.\r
-     * @param {Mixed} arg1 (optional) Variable number of arguments passed to the handler function\r
-     * @param {Mixed} arg2 (optional)\r
-     * @param {Mixed} etc... (optional)\r
-     */\r
-    execute : function(){\r
-        this.initialConfig.handler.apply(this.initialConfig.scope || window, arguments);\r
-    }\r
-});\r
-/**
- * @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 <tt>true</tt>
- * to use css style <tt>'display:none;'</tt> 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:<div class="mdetail-params"><ul>
-     * <li><b><tt>sides</tt></b> : Shadow displays on both sides and bottom only</li>
-     * <li><b><tt>frame</tt></b> : Shadow displays equally on all four sides</li>
-     * <li><b><tt>drop</tt></b> : Traditional bottom-right drop shadow</li>
-     * </ul></div>
-     */
-    /**
-     * @cfg {String} offset
-     * The number of pixels to offset the shadow from the element (defaults to <tt>4</tt>)
-     */
-    offset: 4,
-
-    // private
-    defaultMode: "drop",
-
-    /**
-     * Displays the shadow under the target element
-     * @param {Mixed} targetEl The id or element under which the shadow should display
-     */
-    show : function(target){
-        target = Ext.get(target);
-        if(!this.el){
-            this.el = Ext.Shadow.Pool.pull();
-            if(this.el.dom.nextSibling != target.dom){
-                this.el.insertBefore(target);
-            }
-        }
-        this.el.setStyle("z-index", this.zIndex || parseInt(target.getStyle("z-index"), 10)-1);
-        if(Ext.isIE){
-            this.el.dom.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity=50) progid:DXImageTransform.Microsoft.Blur(pixelradius="+(this.offset)+")";
-        }
-        this.realign(
-            target.getLeft(true),
-            target.getTop(true),
-            target.getWidth(),
-            target.getHeight()
-        );
-        this.el.dom.style.display = "block";
-    },
-
-    /**
-     * Returns true if the shadow is visible, else false
-     */
-    isVisible : function(){
-        return this.el ? true : false;  
-    },
-
-    /**
-     * Direct alignment when values are already available. Show must be called at least once before
-     * calling this method to ensure it is initialized.
-     * @param {Number} left The target element left position
-     * @param {Number} top The target element top position
-     * @param {Number} width The target element width
-     * @param {Number} height The target element height
-     */
-    realign : function(l, t, w, h){
-        if(!this.el){
-            return;
-        }
-        var a = this.adjusts, d = this.el.dom, s = d.style;
-        var iea = 0;
-        s.left = (l+a.l)+"px";
-        s.top = (t+a.t)+"px";
-        var sw = (w+a.w), sh = (h+a.h), sws = sw +"px", shs = sh + "px";
-        if(s.width != sws || s.height != shs){
-            s.width = sws;
-            s.height = shs;
-            if(!Ext.isIE){
-                var cn = d.childNodes;
-                var sww = Math.max(0, (sw-12))+"px";
-                cn[0].childNodes[1].style.width = sww;
-                cn[1].childNodes[1].style.width = sww;
-                cn[2].childNodes[1].style.width = sww;
-                cn[1].style.height = Math.max(0, (sh-12))+"px";
-            }
-        }
-    },
-
-    /**
-     * Hides this shadow
-     */
-    hide : function(){
-        if(this.el){
-            this.el.dom.style.display = "none";
-            Ext.Shadow.Pool.push(this.el);
-            delete this.el;
-        }
-    },
-
-    /**
-     * Adjust the z-index of this shadow
-     * @param {Number} zindex The new z-index
-     */
-    setZIndex : function(z){
-        this.zIndex = z;
-        if(this.el){
-            this.el.setStyle("z-index", z);
-        }
-    }
-};
-
-// Private utility class that manages the internal Shadow cache
-Ext.Shadow.Pool = function(){
-    var p = [];
-    var markup = Ext.isIE ?
-                 '<div class="x-ie-shadow"></div>' :
-                 '<div class="x-shadow"><div class="xst"><div class="xstl"></div><div class="xstc"></div><div class="xstr"></div></div><div class="xsc"><div class="xsml"></div><div class="xsmc"></div><div class="xsmr"></div></div><div class="xsb"><div class="xsbl"></div><div class="xsbc"></div><div class="xsbr"></div></div></div>';
-    return {
-        pull : function(){
-            var sh = p.shift();
-            if(!sh){
-                sh = Ext.get(Ext.DomHelper.insertHtml("beforeBegin", document.body.firstChild, markup));
-                sh.autoBoxAdjust = false;
-            }
-            return sh;
-        },
-
-        push : function(sh){
-            p.push(sh);
-        }
-    };
-}();/**
- * @class Ext.BoxComponent
- * @extends Ext.Component
- * <p>Base class for any {@link Ext.Component Component} that is to be sized as a box, using width and height.</p>
- * <p>BoxComponent provides automatic box model adjustments for sizing and positioning and will work correctly
- * within the Component rendering model.</p>
- * <p>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 <b>Box</b>Component in order to have its width and height managed.</p>
- * <p>To use a pre-existing element as a BoxComponent, configure it so that you preset the <b>el</b> property to the
- * element to reference:<pre><code>
-var pageHeader = new Ext.BoxComponent({
-    el: 'my-header-div'
-});</code></pre>
- * This may then be {@link Ext.Container#add added} to a {@link Ext.Container Container} as a child item.</p>
- * <p>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:<pre><code>
-var myImage = new Ext.BoxComponent({
-    autoEl: {
-        tag: 'img',
-        src: '/images/my-image.jpg'
-    }
-});</code></pre></p>
- * @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
-     * <p><b>Note</b>: this config is only used when this BoxComponent is a child item of a TabPanel.</p>
-     * 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} region <p><b>Note</b>: this config is only used when this BoxComponent is rendered
-     * by a Container which has been configured to use the <b>{@link Ext.layout.BorderLayout BorderLayout}</b>
-     * layout manager (e.g. specifying <tt>layout:'border'</tt>).</p><br>
-     * <p>See {@link Ext.layout.BorderLayout} also.</p>
-     */
-    // margins config is used when a BoxComponent is rendered by BorderLayout or BoxLayout.
-    /**
-     * @cfg {Object} margins <p><b>Note</b>: this config is only used when this BoxComponent is rendered
-     * by a Container which has been configured to use the <b>{@link Ext.layout.BorderLayout BorderLayout}</b>
-     * or one of the two <b>{@link Ext.layout.BoxLayout BoxLayout} subclasses.</b></p>
-     * <p>An object containing margins to apply to this BoxComponent in the
-     * format:</p><pre><code>
-{
-    top: (top margin),
-    right: (right margin),
-    bottom: (bottom margin),
-    left: (left margin)
-}</code></pre>
-     * <p>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:</p>
-     * <p><div class="mdetail-params"><ul>
-     * <li>If there is only one value, it applies to all sides.</li>
-     * <li>If there are two values, the top and bottom borders are set to the first value and the
-     * right and left are set to the second.</li>
-     * <li>If there are three values, the top is set to the first value, the left and right are set
-     * to the second, and the bottom is set to the third.</li>
-     * <li>If there are four values, they apply to the top, right, bottom, and left, respectively.</li>
-     * </ul></div></p>
-     * <p>Defaults to:</p><pre><code>
-     * {top:0, right:0, bottom:0, left:0}
-     * </code></pre>
-     */
-    /**
-     * @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).
-     * <b>Note</b> 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).
-     * <b>Note</b> to express this dimension as a percentage or offset see {@link Ext.Component#anchor}.
-     */
-    /**
-     * @cfg {Number} boxMinHeight
-     * <p>The minimum value in pixels which this BoxComponent will set its height to.</p>
-     * <p><b>Warning:</b> This will override any size management applied by layout managers.</p>
-     */
-    /**
-     * @cfg {Number} boxMinWidth
-     * <p>The minimum value in pixels which this BoxComponent will set its width to.</p>
-     * <p><b>Warning:</b> This will override any size management applied by layout managers.</p>
-     */
-    /**
-     * @cfg {Number} boxMaxHeight
-     * <p>The maximum value in pixels which this BoxComponent will set its height to.</p>
-     * <p><b>Warning:</b> This will override any size management applied by layout managers.</p>
-     */
-    /**
-     * @cfg {Number} boxMaxWidth
-     * <p>The maximum value in pixels which this BoxComponent will set its width to.</p>
-     * <p><b>Warning:</b> This will override any size management applied by layout managers.</p>
-     */
-    /**
-     * @cfg {Boolean} autoHeight
-     * <p>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.</p>
-     * <p><b>Note</b>: 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.</p>
-     * <p>If the <i>browser</i> 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:</p><pre><code>
-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();
-</code></pre>
-     */
-    /**
-     * @cfg {Boolean} autoWidth
-     * <p>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.</p>
-     * <p><b>Note</b>: 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.</p>
-     * <p>If the <i>browser</i> 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:</p><pre><code>
-&lt;div id='grid-container' style='margin-left:25%;width:50%'>&lt;/div>
-</code></pre>
-     * 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:<pre><code>
-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'
-    }],
-});
-</code></pre>
-     */
-    /**
-     * @cfg {Boolean} autoScroll
-     * <code>true</code> to use overflow:'auto' on the components layout element and show scroll bars automatically when
-     * necessary, <code>false</code> to clip any overflowing content (defaults to <code>false</code>).
-     */
-
-    /* // 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 <code>{width:10, height:20}</code>.
-     * @param {Mixed} width The new width to set. This may be one of:<div class="mdetail-params"><ul>
-     * <li>A Number specifying the new width in the {@link #getEl Element}'s {@link Ext.Element#defaultUnit}s (by default, pixels).</li>
-     * <li>A String used to set the CSS width style.</li>
-     * <li>A size object in the format <code>{width: widthValue, height: heightValue}</code>.</li>
-     * <li><code>undefined</code> to leave the width unchanged.</li>
-     * </ul></div>
-     * @param {Mixed} height The new height to set (not required if a size object is passed as the first arg).
-     * This may be one of:<div class="mdetail-params"><ul>
-     * <li>A Number specifying the new height in the {@link #getEl Element}'s {@link Ext.Element#defaultUnit}s (by default, pixels).</li>
-     * <li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li>
-     * <li><code>undefined</code> to leave the height unchanged.</li>
-     * </ul></div>
-     * @return {Ext.BoxComponent} this
-     */
-    setSize : function(w, h){
-
-        // support for standard size objects
-        if(typeof w == 'object'){
-            h = w.height, w = w.width;
-        }
-        if (Ext.isDefined(w) && Ext.isDefined(this.boxMinWidth) && (w < this.boxMinWidth)) {
-            w = this.boxMinWidth;
-        }
-        if (Ext.isDefined(h) && Ext.isDefined(this.boxMinHeight) && (h < this.boxMinHeight)) {
-            h = this.boxMinHeight;
-        }
-        if (Ext.isDefined(w) && Ext.isDefined(this.boxMaxWidth) && (w > this.boxMaxWidth)) {
-            w = this.boxMaxWidth;
-        }
-        if (Ext.isDefined(h) && Ext.isDefined(this.boxMaxHeight) && (h > this.boxMaxHeight)) {
-            h = this.boxMaxHeight;
-        }
-        // not rendered
-        if(!this.boxReady){
-            this.width = w, this.height = h;
-            return this;
-        }
-
-        // prevent recalcs when not needed
-        if(this.cacheSizes !== false && this.lastSize && this.lastSize.width == w && this.lastSize.height == h){
-            return this;
-        }
-        this.lastSize = {width: w, height: h};
-        var adj = this.adjustSize(w, h),
-            aw = adj.width,
-            ah = adj.height,
-            rz;
-        if(aw !== undefined || ah !== undefined){ // this code is nasty but performs better with floaters
-            rz = this.getResizeEl();
-            if(!this.deferHeight && aw !== undefined && ah !== undefined){
-                rz.setSize(aw, ah);
-            }else if(!this.deferHeight && ah !== undefined){
-                rz.setHeight(ah);
-            }else if(aw !== undefined){
-                rz.setWidth(aw);
-            }
-            this.onResize(aw, ah, w, h);
-        }
-        return this;
-    },
-
-    /**
-     * Sets the width of the component.  This method fires the {@link #resize} event.
-     * @param {Number} width The new width to setThis may be one of:<div class="mdetail-params"><ul>
-     * <li>A Number specifying the new width in the {@link #getEl Element}'s {@link Ext.Element#defaultUnit}s (by default, pixels).</li>
-     * <li>A String used to set the CSS width style.</li>
-     * </ul></div>
-     * @return {Ext.BoxComponent} this
-     */
-    setWidth : function(width){
-        return this.setSize(width);
-    },
-
-    /**
-     * Sets the height of the component.  This method fires the {@link #resize} event.
-     * @param {Number} height The new height to set. This may be one of:<div class="mdetail-params"><ul>
-     * <li>A Number specifying the new height in the {@link #getEl Element}'s {@link Ext.Element#defaultUnit}s (by default, pixels).</li>
-     * <li>A String used to set the CSS height style.</li>
-     * <li><i>undefined</i> to leave the height unchanged.</li>
-     * </ul></div>
-     * @return {Ext.BoxComponent} this
-     */
-    setHeight : function(height){
-        return this.setSize(undefined, height);
-    },
-
-    /**
-     * Gets the current size of the component's underlying element.
-     * @return {Object} An object containing the element's size {width: (element width), height: (element height)}
-     */
-    getSize : function(){
-        return this.getResizeEl().getSize();
-    },
-
-    /**
-     * Gets the current width of the component's underlying element.
-     * @return {Number}
-     */
-    getWidth : function(){
-        return this.getResizeEl().getWidth();
-    },
-
-    /**
-     * Gets the current height of the component's underlying element.
-     * @return {Number}
-     */
-    getHeight : function(){
-        return this.getResizeEl().getHeight();
-    },
-
-    /**
-     * Gets the current size of the component's underlying element, including space taken by its margins.
-     * @return {Object} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
-     */
-    getOuterSize : function(){
-        var el = this.getResizeEl();
-        return {width: el.getWidth() + el.getMargins('lr'),
-                height: el.getHeight() + el.getMargins('tb')};
-    },
-
-    /**
-     * Gets the current XY position of the component's underlying element.
-     * @param {Boolean} local (optional) If true the element's left and top are returned instead of page XY (defaults to false)
-     * @return {Array} The XY position of the element (e.g., [100, 200])
-     */
-    getPosition : function(local){
-        var el = this.getPositionEl();
-        if(local === true){
-            return [el.getLeft(true), el.getTop(true)];
-        }
-        return this.xy || el.getXY();
-    },
-
-    /**
-     * Gets the current box measurements of the component's underlying element.
-     * @param {Boolean} local (optional) If true the element's left and top are returned instead of page XY (defaults to false)
-     * @return {Object} box An object in the format {x, y, width, height}
-     */
-    getBox : function(local){
-        var pos = this.getPosition(local);
-        var s = this.getSize();
-        s.x = pos[0];
-        s.y = pos[1];
-        return s;
-    },
-
-    /**
-     * Sets the current box measurements of the component's underlying element.
-     * @param {Object} box An object in the format {x, y, width, height}
-     * @return {Ext.BoxComponent} this
-     */
-    updateBox : function(box){
-        this.setSize(box.width, box.height);
-        this.setPagePosition(box.x, box.y);
-        return this;
-    },
-
-    /**
-     * <p>Returns the outermost Element of this Component which defines the Components overall size.</p>
-     * <p><i>Usually</i> this will return the same Element as <code>{@link #getEl}</code>,
-     * but in some cases, a Component may have some more wrapping Elements around its main
-     * active Element.</p>
-     * <p>An example is a ComboBox. It is encased in a <i>wrapping</i> Element which
-     * contains both the <code>&lt;input></code> Element (which is what would be returned
-     * by its <code>{@link #getEl}</code> method, <i>and</i> the trigger button Element.
-     * This Element is returned as the <code>resizeEl</code>.
-     * @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
- * <p>Used to provide a sizable space in a layout.</p>
- * @constructor
- * @param {Object} config
- */
-Ext.Spacer = Ext.extend(Ext.BoxComponent, {
-    autoEl:'div'
-});
-Ext.reg('spacer', Ext.Spacer);/**\r
- * @class Ext.SplitBar\r
- * @extends Ext.util.Observable\r
- * Creates draggable splitter bar functionality from two elements (element to be dragged and element to be resized).\r
- * <br><br>\r
- * Usage:\r
- * <pre><code>\r
-var split = new Ext.SplitBar("elementToDrag", "elementToSize",\r
-                   Ext.SplitBar.HORIZONTAL, Ext.SplitBar.LEFT);\r
-split.setAdapter(new Ext.SplitBar.AbsoluteLayoutAdapter("container"));\r
-split.minSize = 100;\r
-split.maxSize = 600;\r
-split.animate = true;\r
-split.on('moved', splitterMoved);\r
-</code></pre>\r
- * @constructor\r
- * Create a new SplitBar\r
- * @param {Mixed} dragElement The element to be dragged and act as the SplitBar.\r
- * @param {Mixed} resizingElement The element to be resized based on where the SplitBar element is dragged\r
- * @param {Number} orientation (optional) Either Ext.SplitBar.HORIZONTAL or Ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL)\r
- * @param {Number} placement (optional) Either Ext.SplitBar.LEFT or Ext.SplitBar.RIGHT for horizontal or\r
-                        Ext.SplitBar.TOP or Ext.SplitBar.BOTTOM for vertical. (By default, this is determined automatically by the initial\r
-                        position of the SplitBar).\r
- */\r
-Ext.SplitBar = function(dragElement, resizingElement, orientation, placement, existingProxy){\r
-\r
-    /** @private */\r
-    this.el = Ext.get(dragElement, true);\r
-    this.el.dom.unselectable = "on";\r
-    /** @private */\r
-    this.resizingEl = Ext.get(resizingElement, true);\r
-\r
-    /**\r
-     * @private\r
-     * The orientation of the split. Either Ext.SplitBar.HORIZONTAL or Ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL)\r
-     * Note: If this is changed after creating the SplitBar, the placement property must be manually updated\r
-     * @type Number\r
-     */\r
-    this.orientation = orientation || Ext.SplitBar.HORIZONTAL;\r
-\r
-    /**\r
-     * The increment, in pixels by which to move this SplitBar. When <i>undefined</i>, the SplitBar moves smoothly.\r
-     * @type Number\r
-     * @property tickSize\r
-     */\r
-    /**\r
-     * The minimum size of the resizing element. (Defaults to 0)\r
-     * @type Number\r
-     */\r
-    this.minSize = 0;\r
-\r
-    /**\r
-     * The maximum size of the resizing element. (Defaults to 2000)\r
-     * @type Number\r
-     */\r
-    this.maxSize = 2000;\r
-\r
-    /**\r
-     * Whether to animate the transition to the new size\r
-     * @type Boolean\r
-     */\r
-    this.animate = false;\r
-\r
-    /**\r
-     * Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes.\r
-     * @type Boolean\r
-     */\r
-    this.useShim = false;\r
-\r
-    /** @private */\r
-    this.shim = null;\r
-\r
-    if(!existingProxy){\r
-        /** @private */\r
-        this.proxy = Ext.SplitBar.createProxy(this.orientation);\r
-    }else{\r
-        this.proxy = Ext.get(existingProxy).dom;\r
-    }\r
-    /** @private */\r
-    this.dd = new Ext.dd.DDProxy(this.el.dom.id, "XSplitBars", {dragElId : this.proxy.id});\r
-\r
-    /** @private */\r
-    this.dd.b4StartDrag = this.onStartProxyDrag.createDelegate(this);\r
-\r
-    /** @private */\r
-    this.dd.endDrag = this.onEndProxyDrag.createDelegate(this);\r
-\r
-    /** @private */\r
-    this.dragSpecs = {};\r
-\r
-    /**\r
-     * @private The adapter to use to positon and resize elements\r
-     */\r
-    this.adapter = new Ext.SplitBar.BasicLayoutAdapter();\r
-    this.adapter.init(this);\r
-\r
-    if(this.orientation == Ext.SplitBar.HORIZONTAL){\r
-        /** @private */\r
-        this.placement = placement || (this.el.getX() > this.resizingEl.getX() ? Ext.SplitBar.LEFT : Ext.SplitBar.RIGHT);\r
-        this.el.addClass("x-splitbar-h");\r
-    }else{\r
-        /** @private */\r
-        this.placement = placement || (this.el.getY() > this.resizingEl.getY() ? Ext.SplitBar.TOP : Ext.SplitBar.BOTTOM);\r
-        this.el.addClass("x-splitbar-v");\r
-    }\r
-\r
-    this.addEvents(\r
-        /**\r
-         * @event resize\r
-         * Fires when the splitter is moved (alias for {@link #moved})\r
-         * @param {Ext.SplitBar} this\r
-         * @param {Number} newSize the new width or height\r
-         */\r
-        "resize",\r
-        /**\r
-         * @event moved\r
-         * Fires when the splitter is moved\r
-         * @param {Ext.SplitBar} this\r
-         * @param {Number} newSize the new width or height\r
-         */\r
-        "moved",\r
-        /**\r
-         * @event beforeresize\r
-         * Fires before the splitter is dragged\r
-         * @param {Ext.SplitBar} this\r
-         */\r
-        "beforeresize",\r
-\r
-        "beforeapply"\r
-    );\r
-\r
-    Ext.SplitBar.superclass.constructor.call(this);\r
-};\r
-\r
-Ext.extend(Ext.SplitBar, Ext.util.Observable, {\r
-    onStartProxyDrag : function(x, y){\r
-        this.fireEvent("beforeresize", this);\r
-        this.overlay =  Ext.DomHelper.append(document.body,  {cls: "x-drag-overlay", html: "&#160;"}, true);\r
-        this.overlay.unselectable();\r
-        this.overlay.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));\r
-        this.overlay.show();\r
-        Ext.get(this.proxy).setDisplayed("block");\r
-        var size = this.adapter.getElementSize(this);\r
-        this.activeMinSize = this.getMinimumSize();\r
-        this.activeMaxSize = this.getMaximumSize();\r
-        var c1 = size - this.activeMinSize;\r
-        var c2 = Math.max(this.activeMaxSize - size, 0);\r
-        if(this.orientation == Ext.SplitBar.HORIZONTAL){\r
-            this.dd.resetConstraints();\r
-            this.dd.setXConstraint(\r
-                this.placement == Ext.SplitBar.LEFT ? c1 : c2,\r
-                this.placement == Ext.SplitBar.LEFT ? c2 : c1,\r
-                this.tickSize\r
-            );\r
-            this.dd.setYConstraint(0, 0);\r
-        }else{\r
-            this.dd.resetConstraints();\r
-            this.dd.setXConstraint(0, 0);\r
-            this.dd.setYConstraint(\r
-                this.placement == Ext.SplitBar.TOP ? c1 : c2,\r
-                this.placement == Ext.SplitBar.TOP ? c2 : c1,\r
-                this.tickSize\r
-            );\r
-         }\r
-        this.dragSpecs.startSize = size;\r
-        this.dragSpecs.startPoint = [x, y];\r
-        Ext.dd.DDProxy.prototype.b4StartDrag.call(this.dd, x, y);\r
-    },\r
-\r
-    /**\r
-     * @private Called after the drag operation by the DDProxy\r
-     */\r
-    onEndProxyDrag : function(e){\r
-        Ext.get(this.proxy).setDisplayed(false);\r
-        var endPoint = Ext.lib.Event.getXY(e);\r
-        if(this.overlay){\r
-            Ext.destroy(this.overlay);\r
-            delete this.overlay;\r
-        }\r
-        var newSize;\r
-        if(this.orientation == Ext.SplitBar.HORIZONTAL){\r
-            newSize = this.dragSpecs.startSize +\r
-                (this.placement == Ext.SplitBar.LEFT ?\r
-                    endPoint[0] - this.dragSpecs.startPoint[0] :\r
-                    this.dragSpecs.startPoint[0] - endPoint[0]\r
-                );\r
-        }else{\r
-            newSize = this.dragSpecs.startSize +\r
-                (this.placement == Ext.SplitBar.TOP ?\r
-                    endPoint[1] - this.dragSpecs.startPoint[1] :\r
-                    this.dragSpecs.startPoint[1] - endPoint[1]\r
-                );\r
-        }\r
-        newSize = Math.min(Math.max(newSize, this.activeMinSize), this.activeMaxSize);\r
-        if(newSize != this.dragSpecs.startSize){\r
-            if(this.fireEvent('beforeapply', this, newSize) !== false){\r
-                this.adapter.setElementSize(this, newSize);\r
-                this.fireEvent("moved", this, newSize);\r
-                this.fireEvent("resize", this, newSize);\r
-            }\r
-        }\r
-    },\r
-\r
-    /**\r
-     * Get the adapter this SplitBar uses\r
-     * @return The adapter object\r
-     */\r
-    getAdapter : function(){\r
-        return this.adapter;\r
-    },\r
-\r
-    /**\r
-     * Set the adapter this SplitBar uses\r
-     * @param {Object} adapter A SplitBar adapter object\r
-     */\r
-    setAdapter : function(adapter){\r
-        this.adapter = adapter;\r
-        this.adapter.init(this);\r
-    },\r
-\r
-    /**\r
-     * Gets the minimum size for the resizing element\r
-     * @return {Number} The minimum size\r
-     */\r
-    getMinimumSize : function(){\r
-        return this.minSize;\r
-    },\r
-\r
-    /**\r
-     * Sets the minimum size for the resizing element\r
-     * @param {Number} minSize The minimum size\r
-     */\r
-    setMinimumSize : function(minSize){\r
-        this.minSize = minSize;\r
-    },\r
-\r
-    /**\r
-     * Gets the maximum size for the resizing element\r
-     * @return {Number} The maximum size\r
-     */\r
-    getMaximumSize : function(){\r
-        return this.maxSize;\r
-    },\r
-\r
-    /**\r
-     * Sets the maximum size for the resizing element\r
-     * @param {Number} maxSize The maximum size\r
-     */\r
-    setMaximumSize : function(maxSize){\r
-        this.maxSize = maxSize;\r
-    },\r
-\r
-    /**\r
-     * Sets the initialize size for the resizing element\r
-     * @param {Number} size The initial size\r
-     */\r
-    setCurrentSize : function(size){\r
-        var oldAnimate = this.animate;\r
-        this.animate = false;\r
-        this.adapter.setElementSize(this, size);\r
-        this.animate = oldAnimate;\r
-    },\r
-\r
-    /**\r
-     * Destroy this splitbar.\r
-     * @param {Boolean} removeEl True to remove the element\r
-     */\r
-    destroy : function(removeEl){\r
-        Ext.destroy(this.shim, Ext.get(this.proxy));\r
-        this.dd.unreg();\r
-        if(removeEl){\r
-            this.el.remove();\r
-        }\r
-        this.purgeListeners();\r
-    }\r
-});\r
-\r
-/**\r
- * @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.\r
- */\r
-Ext.SplitBar.createProxy = function(dir){\r
-    var proxy = new Ext.Element(document.createElement("div"));\r
-    document.body.appendChild(proxy.dom);\r
-    proxy.unselectable();\r
-    var cls = 'x-splitbar-proxy';\r
-    proxy.addClass(cls + ' ' + (dir == Ext.SplitBar.HORIZONTAL ? cls +'-h' : cls + '-v'));\r
-    return proxy.dom;\r
-};\r
-\r
-/**\r
- * @class Ext.SplitBar.BasicLayoutAdapter\r
- * Default Adapter. It assumes the splitter and resizing element are not positioned\r
- * elements and only gets/sets the width of the element. Generally used for table based layouts.\r
- */\r
-Ext.SplitBar.BasicLayoutAdapter = function(){\r
-};\r
-\r
-Ext.SplitBar.BasicLayoutAdapter.prototype = {\r
-    // do nothing for now\r
-    init : function(s){\r
-\r
-    },\r
-    /**\r
-     * Called before drag operations to get the current size of the resizing element.\r
-     * @param {Ext.SplitBar} s The SplitBar using this adapter\r
-     */\r
-     getElementSize : function(s){\r
-        if(s.orientation == Ext.SplitBar.HORIZONTAL){\r
-            return s.resizingEl.getWidth();\r
-        }else{\r
-            return s.resizingEl.getHeight();\r
-        }\r
-    },\r
-\r
-    /**\r
-     * Called after drag operations to set the size of the resizing element.\r
-     * @param {Ext.SplitBar} s The SplitBar using this adapter\r
-     * @param {Number} newSize The new size to set\r
-     * @param {Function} onComplete A function to be invoked when resizing is complete\r
-     */\r
-    setElementSize : function(s, newSize, onComplete){\r
-        if(s.orientation == Ext.SplitBar.HORIZONTAL){\r
-            if(!s.animate){\r
-                s.resizingEl.setWidth(newSize);\r
-                if(onComplete){\r
-                    onComplete(s, newSize);\r
-                }\r
-            }else{\r
-                s.resizingEl.setWidth(newSize, true, .1, onComplete, 'easeOut');\r
-            }\r
-        }else{\r
-\r
-            if(!s.animate){\r
-                s.resizingEl.setHeight(newSize);\r
-                if(onComplete){\r
-                    onComplete(s, newSize);\r
-                }\r
-            }else{\r
-                s.resizingEl.setHeight(newSize, true, .1, onComplete, 'easeOut');\r
-            }\r
-        }\r
-    }\r
-};\r
-\r
-/**\r
- *@class Ext.SplitBar.AbsoluteLayoutAdapter\r
- * @extends Ext.SplitBar.BasicLayoutAdapter\r
- * Adapter that  moves the splitter element to align with the resized sizing element.\r
- * Used with an absolute positioned SplitBar.\r
- * @param {Mixed} container The container that wraps around the absolute positioned content. If it's\r
- * document.body, make sure you assign an id to the body element.\r
- */\r
-Ext.SplitBar.AbsoluteLayoutAdapter = function(container){\r
-    this.basic = new Ext.SplitBar.BasicLayoutAdapter();\r
-    this.container = Ext.get(container);\r
-};\r
-\r
-Ext.SplitBar.AbsoluteLayoutAdapter.prototype = {\r
-    init : function(s){\r
-        this.basic.init(s);\r
-    },\r
-\r
-    getElementSize : function(s){\r
-        return this.basic.getElementSize(s);\r
-    },\r
-\r
-    setElementSize : function(s, newSize, onComplete){\r
-        this.basic.setElementSize(s, newSize, this.moveSplitter.createDelegate(this, [s]));\r
-    },\r
-\r
-    moveSplitter : function(s){\r
-        var yes = Ext.SplitBar;\r
-        switch(s.placement){\r
-            case yes.LEFT:\r
-                s.el.setX(s.resizingEl.getRight());\r
-                break;\r
-            case yes.RIGHT:\r
-                s.el.setStyle("right", (this.container.getWidth() - s.resizingEl.getLeft()) + "px");\r
-                break;\r
-            case yes.TOP:\r
-                s.el.setY(s.resizingEl.getBottom());\r
-                break;\r
-            case yes.BOTTOM:\r
-                s.el.setY(s.resizingEl.getTop() - s.el.getHeight());\r
-                break;\r
-        }\r
-    }\r
-};\r
-\r
-/**\r
- * Orientation constant - Create a vertical SplitBar\r
- * @static\r
- * @type Number\r
- */\r
-Ext.SplitBar.VERTICAL = 1;\r
-\r
-/**\r
- * Orientation constant - Create a horizontal SplitBar\r
- * @static\r
- * @type Number\r
- */\r
-Ext.SplitBar.HORIZONTAL = 2;\r
-\r
-/**\r
- * Placement constant - The resizing element is to the left of the splitter element\r
- * @static\r
- * @type Number\r
- */\r
-Ext.SplitBar.LEFT = 1;\r
-\r
-/**\r
- * Placement constant - The resizing element is to the right of the splitter element\r
- * @static\r
- * @type Number\r
- */\r
-Ext.SplitBar.RIGHT = 2;\r
-\r
-/**\r
- * Placement constant - The resizing element is positioned above the splitter element\r
- * @static\r
- * @type Number\r
- */\r
-Ext.SplitBar.TOP = 3;\r
-\r
-/**\r
- * Placement constant - The resizing element is positioned under splitter element\r
- * @static\r
- * @type Number\r
- */\r
-Ext.SplitBar.BOTTOM = 4;\r
-/**
- * @class Ext.Container
- * @extends Ext.BoxComponent
- * <p>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.</p>
- *
- * <p>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
- * <code><b>{@link Ext.Component#autoEl autoEl}</b></code> config option. This is a useful technique when creating
- * embedded {@link Ext.layout.ColumnLayout column} layouts inside {@link Ext.form.FormPanel FormPanels}
- * for example.</p>
- *
- * <p>The code below illustrates both how to explicitly create a Container, and how to implicitly
- * create one using the <b><code>'container'</code></b> xtype:<pre><code>
-// 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 &lt;DIV> element.
-    items: [{
-        items: {
-            xtype: 'datefield',
-            name: 'startDate',
-            fieldLabel: 'Start date'
-        }
-    }, {
-        items: {
-            xtype: 'datefield',
-            name: 'endDate',
-            fieldLabel: 'End date'
-        }
-    }]
-});</code></pre></p>
- *
- * <p><u><b>Layout</b></u></p>
- * <p>Container classes delegate the rendering of child Components to a layout
- * manager class which must be configured into the Container using the
- * <code><b>{@link #layout}</b></code> configuration property.</p>
- * <p>When either specifying child <code>{@link #items}</code> 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
- * <b><code>{@link #layout}</code></b> 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 <b>does not apply any sizing</b> at all.</p>
- * <p>A common mistake is when a developer neglects to specify a
- * <b><code>{@link #layout}</code></b> (e.g. widgets like GridPanels or
- * TreePanels are added to Containers for which no <code><b>{@link #layout}</b></code>
- * 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.</p>
- * <p>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:<pre><code>
-//  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);
- * </code></pre></p>
- * <p>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.
- * <p><b><u>Overnesting is a common problem</u></b>.
- * An example of overnesting occurs when a GridPanel is added to a TabPanel
- * by wrapping the GridPanel <i>inside</i> a wrapping Panel (that has no
- * <code><b>{@link #layout}</b></code> specified) and then add that wrapping Panel
- * to the TabPanel. The point to realize is that a GridPanel <b>is</b> a
- * Component which can be added directly to a Container. If the wrapping Panel
- * has no <code><b>{@link #layout}</b></code> configuration, then the overnested
- * GridPanel will not be sized as expected.<p>
- *
- * <p><u><b>Adding via remote configuration</b></u></p>
- *
- * <p>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:
- * </p><pre><code>
-// 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");
-    }
-});
-</code></pre>
- * <p>The server script needs to return an executable Javascript statement which, when processed
- * using <code>eval()</code>, will return either a config object with an {@link Ext.Component#xtype xtype},
- * or an instantiated Component. The server might return this for example:</p><pre><code>
-(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
-})();
-</code></pre>
- * <p>When the above code fragment is passed through the <code>eval</code> 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.</p>
- * <p>Note: since the code above is <i>generated</i> by a server script, the <code>baseParams</code> 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.</p>
- *
- * @xtype container
- */
-Ext.Container = Ext.extend(Ext.BoxComponent, {
-    /**
-     * @cfg {Boolean} monitorResize
-     * True to automatically monitor window resize events to handle anything that is sensitive to the current size
-     * of the viewport.  This value is typically managed by the chosen <code>{@link #layout}</code> and should not need
-     * to be set manually.
-     */
-    /**
-     * @cfg {String/Object} layout
-     * <p><b>*Important</b>: In order for child items to be correctly sized and
-     * positioned, typically a layout manager <b>must</b> be specified through
-     * the <code>layout</code> configuration option.</p>
-     * <br><p>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:</p><pre><code>
-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();
-     * </code></pre>
-     * <p>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 <code>layout:'form'</code>). Other specific
-     * purpose classes internally specify/manage their internal layout (e.g.
-     * GridPanel, TabPanel, TreePanel, Toolbar, Menu, etc.).</p>
-     * <br><p><b><code>layout</code></b> may be specified as either as an Object or
-     * as a String:</p><div><ul class="mdetail-params">
-     *
-     * <li><u>Specify as an Object</u></li>
-     * <div><ul class="mdetail-params">
-     * <li>Example usage:</li>
-<pre><code>
-layout: {
-    type: 'vbox',
-    padding: '5',
-    align: 'left'
-}
-</code></pre>
-     *
-     * <li><code><b>type</b></code></li>
-     * <br/><p>The layout type to be used for this container.  If not specified,
-     * a default {@link Ext.layout.ContainerLayout} will be created and used.</p>
-     * <br/><p>Valid layout <code>type</code> values are:</p>
-     * <div class="sub-desc"><ul class="mdetail-params">
-     * <li><code><b>{@link Ext.layout.AbsoluteLayout absolute}</b></code></li>
-     * <li><code><b>{@link Ext.layout.AccordionLayout accordion}</b></code></li>
-     * <li><code><b>{@link Ext.layout.AnchorLayout anchor}</b></code></li>
-     * <li><code><b>{@link Ext.layout.ContainerLayout auto}</b></code> &nbsp;&nbsp;&nbsp; <b>Default</b></li>
-     * <li><code><b>{@link Ext.layout.BorderLayout border}</b></code></li>
-     * <li><code><b>{@link Ext.layout.CardLayout card}</b></code></li>
-     * <li><code><b>{@link Ext.layout.ColumnLayout column}</b></code></li>
-     * <li><code><b>{@link Ext.layout.FitLayout fit}</b></code></li>
-     * <li><code><b>{@link Ext.layout.FormLayout form}</b></code></li>
-     * <li><code><b>{@link Ext.layout.HBoxLayout hbox}</b></code></li>
-     * <li><code><b>{@link Ext.layout.MenuLayout menu}</b></code></li>
-     * <li><code><b>{@link Ext.layout.TableLayout table}</b></code></li>
-     * <li><code><b>{@link Ext.layout.ToolbarLayout toolbar}</b></code></li>
-     * <li><code><b>{@link Ext.layout.VBoxLayout vbox}</b></code></li>
-     * </ul></div>
-     *
-     * <li>Layout specific configuration properties</li>
-     * <br/><p>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 <code>type</code>
-     * specified.</p>
-     *
-     * </ul></div>
-     *
-     * <li><u>Specify as a String</u></li>
-     * <div><ul class="mdetail-params">
-     * <li>Example usage:</li>
-<pre><code>
-layout: 'vbox',
-layoutConfig: {
-    padding: '5',
-    align: 'left'
-}
-</code></pre>
-     * <li><code><b>layout</b></code></li>
-     * <br/><p>The layout <code>type</code> to be used for this container (see list
-     * of valid layout type values above).</p><br/>
-     * <li><code><b>{@link #layoutConfig}</b></code></li>
-     * <br/><p>Additional layout specific configuration properties. For complete
-     * details regarding the valid config options for each layout type, see the
-     * layout class corresponding to the <code>layout</code> specified.</p>
-     * </ul></div></ul></div>
-     */
-    /**
-     * @cfg {Object} layoutConfig
-     * This is a config object containing properties specific to the chosen
-     * <b><code>{@link #layout}</code></b> if <b><code>{@link #layout}</code></b>
-     * has been specified as a <i>string</i>.</p>
-     */
-    /**
-     * @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 <code>50</code>.
-     */
-    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
-     * <pre><b>** IMPORTANT</b>: be sure to <b>{@link #layout specify a <code>layout</code>} if needed ! **</b></pre>
-     * <p>A single item, or an array of child Components to be added to this container,
-     * for example:</p>
-     * <pre><code>
-// specifying a single item
-items: {...},
-layout: 'fit',    // specify a layout!
-
-// specifying multiple items
-items: [{...}, {...}],
-layout: 'anchor', // specify a layout!
-     * </code></pre>
-     * <p>Each item may be:</p>
-     * <div><ul class="mdetail-params">
-     * <li>any type of object based on {@link Ext.Component}</li>
-     * <li>a fully instanciated object or</li>
-     * <li>an object literal that:</li>
-     * <div><ul class="mdetail-params">
-     * <li>has a specified <code>{@link Ext.Component#xtype xtype}</code></li>
-     * <li>the {@link Ext.Component#xtype} specified is associated with the Component
-     * desired and should be chosen from one of the available xtypes as listed
-     * in {@link Ext.Component}.</li>
-     * <li>If an <code>{@link Ext.Component#xtype xtype}</code> is not explicitly
-     * specified, the {@link #defaultType} for that Container is used.</li>
-     * <li>will be "lazily instanciated", avoiding the overhead of constructing a fully
-     * instanciated Component object</li>
-     * </ul></div></ul></div>
-     * <p><b>Notes</b>:</p>
-     * <div><ul class="mdetail-params">
-     * <li>Ext uses lazy rendering. Child Components will only be rendered
-     * should it become necessary. Items are automatically laid out when they are first
-     * shown (no sizing is done while hidden), or in response to a {@link #doLayout} call.</li>
-     * <li>Do not specify <code>{@link Ext.Panel#contentEl contentEl}</code>/
-     * <code>{@link Ext.Panel#html html}</code> with <code>items</code>.</li>
-     * </ul></div>
-     */
-    /**
-     * @cfg {Object|Function} defaults
-     * <p>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.</p>
-     * <p>If an added item is a config object, and <b>not</b> an instantiated Component, then the default properties are
-     * unconditionally applied. If the added item <b>is</b> an instantiated Component, then the default properties are
-     * applied conditionally so as not to override existing properties in the item.</p>
-     * <p>If the defaults option is specified as a function, then the function will be called using this Container as the
-     * scope (<code>this</code> 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.</p>
-     * <p>For example, to automatically apply padding to the body of each of a set of
-     * contained {@link Ext.Panel} items, you could pass: <code>defaults: {bodyStyle:'padding:15px'}</code>.</p>
-     * <p>Usage:</p><pre><code>
-defaults: {               // defaults are applied to items, not the container
-    autoScroll:true
-},
-items: [
-    {
-        xtype: 'panel',   // defaults <b>do not</b> 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 <b>do</b> have precedence over options
-        id: 'panel2',     // options in components, so the defaults
-        autoScroll: false // will be applied here, panel2 will be autoScroll:true.
-    })
-]
-     * </code></pre>
-     */
-
-
-    /** @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
-     * <p>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.</p>
-     * <p>Defaults to <code>'panel'</code>, except {@link Ext.menu.Menu} which defaults to <code>'menuitem'</code>,
-     * and {@link Ext.Toolbar} and {@link Ext.ButtonGroup} which default to <code>'button'</code>.</p>
-     */
-    defaultType : 'panel',
-
-    /** @cfg {String} resizeEvent
-     * The event to listen to for resizing in layouts. Defaults to <code>'resize'</code>.
-     */
-    resizeEvent: 'resize',
-
-    /**
-     * @cfg {Array} bubbleEvents
-     * <p>An array of events that, when fired, should be bubbled to any parent container.
-     * See {@link Ext.util.Observable#enableBubble}.
-     * Defaults to <code>['add', 'remove']</code>.
-     */
-    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]);
-        }
-    },
-
-    /**
-     * <p>Returns the Element to be used to contain the child Components of this Container.</p>
-     * <p>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.</p>
-     * @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();
-    },
-
-    /**
-     * <p>Adds {@link Ext.Component Component}(s) to this Container.</p>
-     * <br><p><b>Description</b></u> :
-     * <div><ul class="mdetail-params">
-     * <li>Fires the {@link #beforeadd} event before adding</li>
-     * <li>The Container's {@link #defaults default config values} will be applied
-     * accordingly (see <code>{@link #defaults}</code> for details).</li>
-     * <li>Fires the {@link #add} event after the component has been added.</li>
-     * </ul></div>
-     * <br><p><b>Notes</b></u> :
-     * <div><ul class="mdetail-params">
-     * <li>If the Container is <i>already rendered</i> when <code>add</code>
-     * 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
-     * <code>add</code> multiple child components if needed while only refreshing the layout
-     * once. For example:<pre><code>
-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
-     * </code></pre></li>
-     * <li><i>Warning:</i> Containers directly managed by the BorderLayout layout manager
-     * may not be removed or added.  See the Notes for {@link Ext.layout.BorderLayout BorderLayout}
-     * for more details.</li>
-     * </ul></div>
-     * @param {Object/Array} component
-     * <p>Either a single component or an Array of components to add.  See
-     * <code>{@link #items}</code> for additional information.</p>
-     * @param {Object} (Optional) component_2
-     * @param {Object} (Optional) component_n
-     * @return {Ext.Component} component The Component (or config object) that was added.
-     */
-    add : function(comp){
-        this.initItems();
-        var args = arguments.length > 1;
-        if(args || Ext.isArray(comp)){
-            var result = [];
-            Ext.each(args ? arguments : comp, function(c){
-                result.push(this.add(c));
-            }, this);
-            return result;
-        }
-        var c = this.lookupComponent(this.applyDefaults(comp));
-        var index = this.items.length;
-        if(this.fireEvent('beforeadd', this, c, index) !== false && this.onBeforeAdd(c) !== false){
-            this.items.add(c);
-            // *onAdded
-            c.onAdded(this, index);
-            this.onAdd(c);
-            this.fireEvent('add', this, c, index);
-        }
-        return c;
-    },
-
-    onAdd : function(c){
-        // Empty template method
-    },
-    
-    // private
-    onAdded : function(container, pos) {
-        //overridden here so we can cascade down, not worth creating a template method.
-        this.ownerCt = container;
-        this.initRef();
-        //initialize references for child items
-        this.cascade(function(c){
-            c.initRef();
-        });
-        this.fireEvent('added', this, container, pos);
-    },
-
-    /**
-     * Inserts a Component into this Container at a specified index. Fires the
-     * {@link #beforeadd} event before inserting, then fires the {@link #add} event after the
-     * Component has been inserted.
-     * @param {Number} index The index at which the Component will be inserted
-     * into the Container's items collection
-     * @param {Ext.Component} component The child Component to insert.<br><br>
-     * Ext uses lazy rendering, and will only render the inserted Component should
-     * it become necessary.<br><br>
-     * A Component config object may be passed in order to avoid the overhead of
-     * constructing a real Component object if lazy rendering might mean that the
-     * inserted Component will not be rendered immediately. To take advantage of
-     * this 'lazy instantiation', set the {@link Ext.Component#xtype} config
-     * property to the registered type of the Component wanted.<br><br>
-     * For a list of all available xtypes, see {@link Ext.Component}.
-     * @return {Ext.Component} component The Component (or config object) that was
-     * inserted with the Container's default config values applied.
-     */
-    insert : function(index, comp){
-        this.initItems();
-        var a = arguments, len = a.length;
-        if(len > 2){
-            var result = [];
-            for(var i = len-1; i >= 1; --i) {
-                result.push(this.insert(index, a[i]));
-            }
-            return result;
-        }
-        var c = this.lookupComponent(this.applyDefaults(comp));
-        index = Math.min(index, this.items.length);
-        if(this.fireEvent('beforeadd', this, c, index) !== false && this.onBeforeAdd(c) !== false){
-            if(c.ownerCt == this){
-                this.items.remove(c);
-            }
-            this.items.insert(index, c);
-            c.onAdded(this, index);
-            this.onAdd(c);
-            this.fireEvent('add', this, c, index);
-        }
-        return c;
-    },
-
-    // private
-    applyDefaults : function(c){
-        var d = this.defaults;
-        if(d){
-            if(Ext.isFunction(d)){
-                d = d.call(this, c);
-            }
-            if(Ext.isString(c)){
-                c = Ext.ComponentMgr.get(c);
-                Ext.apply(c, d);
-            }else if(!c.events){
-                Ext.applyIf(c, d);
-            }else{
-                Ext.apply(c, d);
-            }
-        }
-        return c;
-    },
-
-    // private
-    onBeforeAdd : function(item){
-        if(item.ownerCt){
-            item.ownerCt.remove(item, false);
-        }
-        if(this.hideBorders === true){
-            item.border = (item.border === true);
-        }
-    },
-
-    /**
-     * Removes a component from this container.  Fires the {@link #beforeremove} event before removing, then fires
-     * the {@link #remove} event after the component has been removed.
-     * @param {Component/String} component The component reference or id to remove.
-     * @param {Boolean} autoDestroy (optional) True to automatically invoke the removed Component's {@link Ext.Component#destroy} function.
-     * Defaults to the value of this Container's {@link #autoDestroy} config.
-     * @return {Ext.Component} component The Component that was removed.
-     */
-    remove : function(comp, autoDestroy){
-        this.initItems();
-        var c = this.getComponent(comp);
-        if(c && this.fireEvent('beforeremove', this, c) !== false){
-            this.doRemove(c, autoDestroy);
-            this.fireEvent('remove', this, c);
-        }
-        return c;
-    },
-
-    onRemove: function(c){
-        // Empty template method
-    },
-
-    // private
-    doRemove: function(c, autoDestroy){
-        if(this.layout && this.rendered){
-            this.layout.onRemove(c);
-        }
-        this.items.remove(c);
-        c.onRemoved();
-        this.onRemove(c);
-        if(autoDestroy === true || (autoDestroy !== false && this.autoDestroy)){
-            c.destroy();
-        }
-    },
-
-    /**
-     * Removes all components from this container.
-     * @param {Boolean} autoDestroy (optional) True to automatically invoke the removed Component's {@link Ext.Component#destroy} function.
-     * Defaults to the value of this Container's {@link #autoDestroy} config.
-     * @return {Array} Array of the destroyed components
-     */
-    removeAll: function(autoDestroy){
-        this.initItems();
-        var item, rem = [], items = [];
-        this.items.each(function(i){
-            rem.push(i);
-        });
-        for (var i = 0, len = rem.length; i < len; ++i){
-            item = rem[i];
-            this.remove(item, autoDestroy);
-            if(item.ownerCt !== this){
-                items.push(item);
-            }
-        }
-        return items;
-    },
-
-    /**
-     * Examines this container's <code>{@link #items}</code> <b>property</b>
-     * and gets a direct child component of this container.
-     * @param {String/Number} comp This parameter may be any of the following:
-     * <div><ul class="mdetail-params">
-     * <li>a <b><code>String</code></b> : representing the <code>{@link Ext.Component#itemId itemId}</code>
-     * or <code>{@link Ext.Component#id id}</code> of the child component </li>
-     * <li>a <b><code>Number</code></b> : representing the position of the child component
-     * within the <code>{@link #items}</code> <b>property</b></li>
-     * </ul></div>
-     * <p>For 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 (<i>this</i>) 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 (<i>this</i>) 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
- * <p>The ContainerLayout class is the default layout manager delegated by {@link Ext.Container} to
- * render any child Components when no <tt>{@link Ext.Container#layout layout}</tt> 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 <tt>{@link Ext.Container#layout layout}</tt>.</p>
- * <p>This class is intended to be extended or created via the <tt><b>{@link Ext.Container#layout layout}</b></tt>
- * configuration property.  See <tt><b>{@link Ext.Container#layout}</b></tt> for additional details.</p>
- */
-Ext.layout.ContainerLayout = Ext.extend(Object, {
-    /**
-     * @cfg {String} extraCls
-     * <p>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.</p>
-     * <p><b>Note</b>: <tt>extraCls</tt> defaults to <tt>''</tt> except for the following classes
-     * which assign a value by default:
-     * <div class="mdetail-params"><ul>
-     * <li>{@link Ext.layout.AbsoluteLayout Absolute Layout} : <tt>'x-abs-layout-item'</tt></li>
-     * <li>{@link Ext.layout.Box Box Layout} : <tt>'x-box-item'</tt></li>
-     * <li>{@link Ext.layout.ColumnLayout Column Layout} : <tt>'x-column'</tt></li>
-     * </ul></div>
-     * To configure the above Classes with an extra CSS class append to the default.  For example,
-     * for ColumnLayout:<pre><code>
-     * extraCls: 'x-column custom-class'
-     * </code></pre>
-     * </p>
-     */
-    /**
-     * @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, <pre><code>
-     * if(myPanel.layout.activeItem.id == 'item-1') { ... }
-     * </code></pre>
-     * <tt>activeItem</tt> 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(
-            '<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>'
-        );
-        t.disableFormats = true;
-        return t.compile();
-    })(),
-
-    /*
-     * Destroys this layout. This is a template method that is empty by default, but should be implemented
-     * by subclasses that require explicit destruction to purge event handlers or remove DOM nodes.
-     * @protected
-     */
-    destroy : function(){
-        if(!Ext.isEmpty(this.targetCls)){
-            var target = this.container.getLayoutTarget();
-            if(target){
-                target.removeClass(this.targetCls);
-            }
-        }
-    }
-});
-Ext.Container.LAYOUTS['auto'] = Ext.layout.ContainerLayout;
-/**\r
- * @class Ext.layout.FitLayout\r
- * @extends Ext.layout.ContainerLayout\r
- * <p>This is a base class for layouts that contain <b>a single item</b> that automatically expands to fill the layout's\r
- * container.  This class is intended to be extended or created via the <tt>layout:'fit'</tt> {@link Ext.Container#layout}\r
- * config, and should generally not need to be created directly via the new keyword.</p>\r
- * <p>FitLayout does not have any direct config options (other than inherited ones).  To fit a panel to a container\r
- * using FitLayout, simply set layout:'fit' on the container and add a single panel to it.  If the container has\r
- * multiple panels, only the first one will be displayed.  Example usage:</p>\r
- * <pre><code>\r
-var p = new Ext.Panel({\r
-    title: 'Fit Layout',\r
-    layout:'fit',\r
-    items: {\r
-        title: 'Inner Panel',\r
-        html: '&lt;p&gt;This is the inner panel content&lt;/p&gt;',\r
-        border: false\r
-    }\r
-});\r
-</code></pre>\r
- */\r
-Ext.layout.FitLayout = Ext.extend(Ext.layout.ContainerLayout, {\r
-    // private\r
-    monitorResize:true,\r
-\r
-    // private\r
-    onLayout : function(ct, target){\r
-        Ext.layout.FitLayout.superclass.onLayout.call(this, ct, target);\r
-        if(!this.container.collapsed){\r
-            this.setItemSize(this.activeItem || ct.items.itemAt(0), target.getViewSize(true));\r
-        }\r
-    },\r
-\r
-    // private\r
-    setItemSize : function(item, size){\r
-        if(item && size.height > 0){ // display none?\r
-            item.setSize(size);\r
-        }\r
-    }\r
-});\r
-Ext.Container.LAYOUTS['fit'] = Ext.layout.FitLayout;/**\r
- * @class Ext.layout.CardLayout\r
- * @extends Ext.layout.FitLayout\r
- * <p>This layout manages multiple child Components, each fitted to the Container, where only a single child Component can be\r
- * visible at any given time.  This layout style is most commonly used for wizards, tab implementations, etc.\r
- * This class is intended to be extended or created via the layout:'card' {@link Ext.Container#layout} config,\r
- * and should generally not need to be created directly via the new keyword.</p>\r
- * <p>The CardLayout's focal method is {@link #setActiveItem}.  Since only one panel is displayed at a time,\r
- * the only way to move from one Component to the next is by calling setActiveItem, passing the id or index of\r
- * the next panel to display.  The layout itself does not provide a user interface for handling this navigation,\r
- * so that functionality must be provided by the developer.</p>\r
- * <p>In the following example, a simplistic wizard setup is demonstrated.  A button bar is added\r
- * to the footer of the containing panel to provide navigation buttons.  The buttons will be handled by a\r
- * common navigation routine -- for this example, the implementation of that routine has been ommitted since\r
- * it can be any type of custom logic.  Note that other uses of a CardLayout (like a tab control) would require a\r
- * completely different implementation.  For serious implementations, a better approach would be to extend\r
- * CardLayout to provide the custom functionality needed.  Example usage:</p>\r
- * <pre><code>\r
-var navHandler = function(direction){\r
-    // This routine could contain business logic required to manage the navigation steps.\r
-    // It would call setActiveItem as needed, manage navigation button state, handle any\r
-    // branching logic that might be required, handle alternate actions like cancellation\r
-    // or finalization, etc.  A complete wizard implementation could get pretty\r
-    // sophisticated depending on the complexity required, and should probably be\r
-    // done as a subclass of CardLayout in a real-world implementation.\r
-};\r
-\r
-var card = new Ext.Panel({\r
-    title: 'Example Wizard',\r
-    layout:'card',\r
-    activeItem: 0, // make sure the active item is set on the container config!\r
-    bodyStyle: 'padding:15px',\r
-    defaults: {\r
-        // applied to each contained panel\r
-        border:false\r
-    },\r
-    // just an example of one possible navigation scheme, using buttons\r
-    bbar: [\r
-        {\r
-            id: 'move-prev',\r
-            text: 'Back',\r
-            handler: navHandler.createDelegate(this, [-1]),\r
-            disabled: true\r
-        },\r
-        '->', // greedy spacer so that the buttons are aligned to each side\r
-        {\r
-            id: 'move-next',\r
-            text: 'Next',\r
-            handler: navHandler.createDelegate(this, [1])\r
-        }\r
-    ],\r
-    // the panels (or "cards") within the layout\r
-    items: [{\r
-        id: 'card-0',\r
-        html: '&lt;h1&gt;Welcome to the Wizard!&lt;/h1&gt;&lt;p&gt;Step 1 of 3&lt;/p&gt;'\r
-    },{\r
-        id: 'card-1',\r
-        html: '&lt;p&gt;Step 2 of 3&lt;/p&gt;'\r
-    },{\r
-        id: 'card-2',\r
-        html: '&lt;h1&gt;Congratulations!&lt;/h1&gt;&lt;p&gt;Step 3 of 3 - Complete&lt;/p&gt;'\r
-    }]\r
-});\r
-</code></pre>\r
- */\r
-Ext.layout.CardLayout = Ext.extend(Ext.layout.FitLayout, {\r
-    /**\r
-     * @cfg {Boolean} deferredRender\r
-     * True to render each contained item at the time it becomes active, false to render all contained items\r
-     * as soon as the layout is rendered (defaults to false).  If there is a significant amount of content or\r
-     * a lot of heavy controls being rendered into panels that are not displayed by default, setting this to\r
-     * true might improve performance.\r
-     */\r
-    deferredRender : false,\r
-    \r
-    /**\r
-     * @cfg {Boolean} layoutOnCardChange\r
-     * True to force a layout of the active item when the active card is changed. Defaults to false.\r
-     */\r
-    layoutOnCardChange : false,\r
-\r
-    /**\r
-     * @cfg {Boolean} renderHidden @hide\r
-     */\r
-    // private\r
-    renderHidden : true,\r
-    \r
-    constructor: function(config){\r
-        Ext.layout.CardLayout.superclass.constructor.call(this, config);\r
-      //  this.forceLayout = (this.deferredRender === false);\r
-    },\r
-\r
-    /**\r
-     * Sets the active (visible) item in the layout.\r
-     * @param {String/Number} item The string component id or numeric index of the item to activate\r
-     */\r
-    setActiveItem : function(item){\r
-        var ai = this.activeItem;\r
-        item = this.container.getComponent(item);\r
-        if(ai != item){\r
-            if(ai){\r
-                ai.hide();\r
-                ai.fireEvent('deactivate', ai);\r
-            }\r
-            var layout = item.doLayout && (this.layoutOnCardChange || !item.rendered);\r
-            this.activeItem = item;\r
-            if(item){\r
-                item.show();\r
-            }\r
-            this.layout();\r
-            if(item && layout){\r
-                item.doLayout();\r
-            }\r
-            item.fireEvent('activate', item);\r
-        }\r
-    },\r
-\r
-    // private\r
-    renderAll : function(ct, target){\r
-        if(this.deferredRender){\r
-            this.renderItem(this.activeItem, undefined, target);\r
-        }else{\r
-            Ext.layout.CardLayout.superclass.renderAll.call(this, ct, target);\r
-        }\r
-    }\r
-});\r
-Ext.Container.LAYOUTS['card'] = Ext.layout.CardLayout;/**
- * @class Ext.layout.AnchorLayout
- * @extends Ext.layout.ContainerLayout
- * <p>This is a layout that enables anchoring of contained elements relative to the container's dimensions.
- * If the container is resized, all anchored items are automatically rerendered according to their
- * <b><tt>{@link #anchor}</tt></b> rules.</p>
- * <p>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.</p>
- * <p>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 <b>anchorSize</b>.
- * 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:</p>
- * <pre><code>
-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%'
-    }]
-});
- * </code></pre>
- */
-Ext.layout.AnchorLayout = Ext.extend(Ext.layout.ContainerLayout, {
-    /**
-     * @cfg {String} anchor
-     * <p>This configuation option is to be applied to <b>child <tt>items</tt></b> of a container managed by
-     * this layout (ie. configured with <tt>layout:'anchor'</tt>).</p><br/>
-     *
-     * <p>This value is what tells the layout how an item should be anchored to the container. <tt>items</tt>
-     * added to an AnchorLayout accept an anchoring-specific config property of <b>anchor</b> 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:<div class="mdetail-params"><ul>
-     *
-     * <li><b>Percentage</b> : Any value between 1 and 100, expressed as a percentage.<div class="sub-desc">
-     * The first anchor is the percentage width that the item should take up within the container, and the
-     * second is the percentage height.  For example:<pre><code>
-// 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
-     * </code></pre></div></li>
-     *
-     * <li><b>Offsets</b> : Any positive or negative integer value.<div class="sub-desc">
-     * This is a raw adjustment where the first anchor is the offset from the right edge of the container,
-     * and the second is the offset from the bottom edge. For example:<pre><code>
-// 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
-     * </code></pre></div></li>
-     *
-     * <li><b>Sides</b> : Valid values are <tt>'right'</tt> (or <tt>'r'</tt>) and <tt>'bottom'</tt>
-     * (or <tt>'b'</tt>).<div class="sub-desc">
-     * Either the container must have a fixed size or an anchorSize config value defined at render time in
-     * order for these to have any effect.</div></li>
-     *
-     * <li><b>Mixed</b> : <div class="sub-desc">
-     * Anchor values can also be mixed as needed.  For example, to render the width offset from the container
-     * right edge by 50 pixels and 75% of the container's height use:
-     * <pre><code>
-anchor: '-50 75%'
-     * </code></pre></div></li>
-     *
-     *
-     * </ul></div>
-     */
-
-    // private
-    monitorResize:true,
-
-    // private
-    // deprecate
-    getAnchorViewSize : function(ct, target){
-        return target.dom == document.body ?
-                   target.getViewSize(true) : target.getStyleSize();
-    },
-
-    // private
-    onLayout : function(ct, target){
-        Ext.layout.AnchorLayout.superclass.onLayout.call(this, ct, target);
-
-        var size = target.getViewSize(true);
-
-        var w = size.width, h = size.height;
-
-        if(w < 20 && h < 20){
-            return;
-        }
-
-        // find the container anchoring size
-        var aw, ah;
-        if(ct.anchorSize){
-            if(typeof ct.anchorSize == 'number'){
-                aw = ct.anchorSize;
-            }else{
-                aw = ct.anchorSize.width;
-                ah = ct.anchorSize.height;
-            }
-        }else{
-            aw = ct.initialConfig.width;
-            ah = ct.initialConfig.height;
-        }
-
-        var cs = ct.items.items, len = cs.length, i, c, a, cw, ch, el, vs;
-        for(i = 0; i < len; i++){
-            c = cs[i];
-            el = c.getPositionEl();
-            if(c.anchor){
-                a = c.anchorSpec;
-                if(!a){ // cache all anchor values
-                    vs = c.anchor.split(' ');
-                    c.anchorSpec = a = {
-                        right: this.parseAnchor(vs[0], c.initialConfig.width, aw),
-                        bottom: this.parseAnchor(vs[1], c.initialConfig.height, ah)
-                    };
-                }
-                cw = a.right ? this.adjustWidthAnchor(a.right(w) - el.getMargins('lr'), c) : undefined;
-                ch = a.bottom ? this.adjustHeightAnchor(a.bottom(h) - el.getMargins('tb'), c) : undefined;
-
-                if(cw || ch){
-                    c.setSize(cw || undefined, ch || undefined);
-                }
-            }
-        }
-    },
-
-    // private
-    parseAnchor : function(a, start, cstart){
-        if(a && a != 'none'){
-            var last;
-            if(/^(r|right|b|bottom)$/i.test(a)){   // standard anchor
-                var diff = cstart - start;
-                return function(v){
-                    if(v !== last){
-                        last = v;
-                        return v - diff;
-                    }
-                }
-            }else if(a.indexOf('%') != -1){
-                var ratio = parseFloat(a.replace('%', ''))*.01;   // percentage
-                return function(v){
-                    if(v !== last){
-                        last = v;
-                        return Math.floor(v*ratio);
-                    }
-                }
-            }else{
-                a = parseInt(a, 10);
-                if(!isNaN(a)){                            // simple offset adjustment
-                    return function(v){
-                        if(v !== last){
-                            last = v;
-                            return v + a;
-                        }
-                    }
-                }
-            }
-        }
-        return false;
-    },
-
-    // private
-    adjustWidthAnchor : function(value, comp){
-        return value;
-    },
-
-    // private
-    adjustHeightAnchor : function(value, comp){
-        return value;
-    }
-
-    /**
-     * @property activeItem
-     * @hide
-     */
-});
-Ext.Container.LAYOUTS['anchor'] = Ext.layout.AnchorLayout;
-/**\r
- * @class Ext.layout.ColumnLayout\r
- * @extends Ext.layout.ContainerLayout\r
- * <p>This is the layout style of choice for creating structural layouts in a multi-column format where the width of\r
- * each column can be specified as a percentage or fixed width, but the height is allowed to vary based on the content.\r
- * This class is intended to be extended or created via the layout:'column' {@link Ext.Container#layout} config,\r
- * and should generally not need to be created directly via the new keyword.</p>\r
- * <p>ColumnLayout does not have any direct config options (other than inherited ones), but it does support a\r
- * specific config property of <b><tt>columnWidth</tt></b> that can be included in the config of any panel added to it.  The\r
- * layout will use the columnWidth (if present) or width of each panel during layout to determine how to size each panel.\r
- * If width or columnWidth is not specified for a given panel, its width will default to the panel's width (or auto).</p>\r
- * <p>The width property is always evaluated as pixels, and must be a number greater than or equal to 1.\r
- * The columnWidth property is always evaluated as a percentage, and must be a decimal value greater than 0 and\r
- * less than 1 (e.g., .25).</p>\r
- * <p>The basic rules for specifying column widths are pretty simple.  The logic makes two passes through the\r
- * set of contained panels.  During the first layout pass, all panels that either have a fixed width or none\r
- * specified (auto) are skipped, but their widths are subtracted from the overall container width.  During the second\r
- * pass, all panels with columnWidths are assigned pixel widths in proportion to their percentages based on\r
- * the total <b>remaining</b> container width.  In other words, percentage width panels are designed to fill the space\r
- * left over by all the fixed-width and/or auto-width panels.  Because of this, while you can specify any number of columns\r
- * with different percentages, the columnWidths must always add up to 1 (or 100%) when added together, otherwise your\r
- * layout may not render as expected.  Example usage:</p>\r
- * <pre><code>\r
-// All columns are percentages -- they must add up to 1\r
-var p = new Ext.Panel({\r
-    title: 'Column Layout - Percentage Only',\r
-    layout:'column',\r
-    items: [{\r
-        title: 'Column 1',\r
-        columnWidth: .25\r
-    },{\r
-        title: 'Column 2',\r
-        columnWidth: .6\r
-    },{\r
-        title: 'Column 3',\r
-        columnWidth: .15\r
-    }]\r
-});\r
-\r
-// Mix of width and columnWidth -- all columnWidth values must add up\r
-// to 1. The first column will take up exactly 120px, and the last two\r
-// columns will fill the remaining container width.\r
-var p = new Ext.Panel({\r
-    title: 'Column Layout - Mixed',\r
-    layout:'column',\r
-    items: [{\r
-        title: 'Column 1',\r
-        width: 120\r
-    },{\r
-        title: 'Column 2',\r
-        columnWidth: .8\r
-    },{\r
-        title: 'Column 3',\r
-        columnWidth: .2\r
-    }]\r
-});\r
-</code></pre>\r
- */\r
-Ext.layout.ColumnLayout = Ext.extend(Ext.layout.ContainerLayout, {\r
-    // private\r
-    monitorResize:true,\r
-\r
-    extraCls: 'x-column',\r
-\r
-    scrollOffset : 0,\r
-\r
-    // private\r
-\r
-    targetCls: 'x-column-layout-ct',\r
-\r
-    isValidParent : function(c, target){\r
-        return c.getPositionEl().dom.parentNode == this.innerCt.dom;\r
-    },\r
-\r
-    // private\r
-    onLayout : function(ct, target){\r
-        var cs = ct.items.items, len = cs.length, c, i;\r
-\r
-        if(!this.innerCt){\r
-            // the innerCt prevents wrapping and shuffling while\r
-            // the container is resizing\r
-            this.innerCt = target.createChild({cls:'x-column-inner'});\r
-            this.innerCt.createChild({cls:'x-clear'});\r
-        }\r
-        this.renderAll(ct, this.innerCt);\r
-\r
-        var size = target.getViewSize(true);\r
-\r
-        if(size.width < 1 && size.height < 1){ // display none?\r
-            return;\r
-        }\r
-\r
-        var w = size.width - this.scrollOffset,\r
-            h = size.height,\r
-            pw = w;\r
-\r
-        this.innerCt.setWidth(w);\r
-\r
-        // some columns can be percentages while others are fixed\r
-        // so we need to make 2 passes\r
-\r
-        for(i = 0; i < len; i++){\r
-            c = cs[i];\r
-            if(!c.columnWidth){\r
-                pw -= (c.getSize().width + c.getPositionEl().getMargins('lr'));\r
-            }\r
-        }\r
-\r
-        pw = pw < 0 ? 0 : pw;\r
-\r
-        for(i = 0; i < len; i++){\r
-            c = cs[i];\r
-            if(c.columnWidth){\r
-                c.setSize(Math.floor(c.columnWidth * pw) - c.getPositionEl().getMargins('lr'));\r
-            }\r
-        }\r
-    }\r
-\r
-    /**\r
-     * @property activeItem\r
-     * @hide\r
-     */\r
-});\r
-\r
-Ext.Container.LAYOUTS['column'] = Ext.layout.ColumnLayout;/**
- * @class Ext.layout.BorderLayout
- * @extends Ext.layout.ContainerLayout
- * <p>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.</p>
- * <p>This class is intended to be extended or created via the <tt>layout:'border'</tt>
- * {@link Ext.Container#layout} config, and should generally not need to be created directly
- * via the new keyword.</p>
- * <p>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.</p>
- * <p>Example usage:</p>
- * <pre><code>
-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'
-    }]
-});
-</code></pre>
- * <p><b><u>Notes</u></b>:</p><div class="mdetail-params"><ul>
- * <li>Any container using the BorderLayout <b>must</b> have a child item with <tt>region:'center'</tt>.
- * The child item in the center region will always be resized to fill the remaining space not used by
- * the other regions in the layout.</li>
- * <li>Any child items with a region of <tt>west</tt> or <tt>east</tt> must have <tt>width</tt> defined
- * (an integer representing the number of pixels that the region should take up).</li>
- * <li>Any child items with a region of <tt>north</tt> or <tt>south</tt> must have <tt>height</tt> defined.</li>
- * <li>The regions of a BorderLayout are <b>fixed at render time</b> and thereafter, its child Components may not be removed or added</b>.  To add/remove
- * Components within a BorderLayout, have them wrapped by an additional Container which is directly
- * managed by the BorderLayout.  If the region is to be collapsible, the Container used directly
- * by the BorderLayout manager should be a Panel.  In the following example a Container (an Ext.Panel)
- * is added to the west region:
- * <div style="margin-left:16px"><pre><code>
-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}();
- * </code></pre></div>
- * </li>
- * <li> To reference a {@link Ext.layout.BorderLayout.Region Region}:
- * <div style="margin-left:16px"><pre><code>
-wr = myBorderPanel.layout.west;
- * </code></pre></div>
- * </li>
- * </ul></div>
- */
-Ext.layout.BorderLayout = Ext.extend(Ext.layout.ContainerLayout, {
-    // private
-    monitorResize:true,
-    // private
-    rendered : false,
-
-    targetCls: 'x-border-layout-ct',
-
-    // private
-    onLayout : function(ct, target){
-        var collapsed;
-        if(!this.rendered){
-            var items = ct.items.items;
-            collapsed = [];
-            for(var i = 0, len = items.length; i < len; i++) {
-                var c = items[i];
-                var pos = c.region;
-                if(c.collapsed){
-                    collapsed.push(c);
-                }
-                c.collapsed = false;
-                if(!c.rendered){
-                    c.render(target, i);
-                    c.getPositionEl().addClass('x-border-panel');
-                }
-                this[pos] = pos != 'center' && c.split ?
-                    new Ext.layout.BorderLayout.SplitRegion(this, c.initialConfig, pos) :
-                    new Ext.layout.BorderLayout.Region(this, c.initialConfig, pos);
-                this[pos].render(target, c);
-            }
-            this.rendered = true;
-        }
-
-        var size = target.getViewSize(false);
-        if(size.width < 20 || size.height < 20){ // display none?
-            if(collapsed){
-                this.restoreCollapsed = collapsed;
-            }
-            return;
-        }else if(this.restoreCollapsed){
-            collapsed = this.restoreCollapsed;
-            delete this.restoreCollapsed;
-        }
-
-        var w = size.width, h = size.height;
-        var centerW = w, centerH = h, centerY = 0, centerX = 0;
-
-        var n = this.north, s = this.south, west = this.west, e = this.east, c = this.center;
-        if(!c && Ext.layout.BorderLayout.WARN !== false){
-            throw 'No center region defined in BorderLayout ' + ct.id;
-        }
-
-        if(n && n.isVisible()){
-            var b = n.getSize();
-            var m = n.getMargins();
-            b.width = w - (m.left+m.right);
-            b.x = m.left;
-            b.y = m.top;
-            centerY = b.height + b.y + m.bottom;
-            centerH -= centerY;
-            n.applyLayout(b);
-        }
-        if(s && s.isVisible()){
-            var b = s.getSize();
-            var m = s.getMargins();
-            b.width = w - (m.left+m.right);
-            b.x = m.left;
-            var totalHeight = (b.height + m.top + m.bottom);
-            b.y = h - totalHeight + m.top;
-            centerH -= totalHeight;
-            s.applyLayout(b);
-        }
-        if(west && west.isVisible()){
-            var b = west.getSize();
-            var m = west.getMargins();
-            b.height = centerH - (m.top+m.bottom);
-            b.x = m.left;
-            b.y = centerY + m.top;
-            var totalWidth = (b.width + m.left + m.right);
-            centerX += totalWidth;
-            centerW -= totalWidth;
-            west.applyLayout(b);
-        }
-        if(e && e.isVisible()){
-            var b = e.getSize();
-            var m = e.getMargins();
-            b.height = centerH - (m.top+m.bottom);
-            var totalWidth = (b.width + m.left + m.right);
-            b.x = w - totalWidth + m.left;
-            b.y = centerY + m.top;
-            centerW -= totalWidth;
-            e.applyLayout(b);
-        }
-        if(c){
-            var m = c.getMargins();
-            var centerBox = {
-                x: centerX + m.left,
-                y: centerY + m.top,
-                width: centerW - (m.left+m.right),
-                height: centerH - (m.top+m.bottom)
-            };
-            c.applyLayout(centerBox);
-        }
-        if(collapsed){
-            for(var i = 0, len = collapsed.length; i < len; i++){
-                collapsed[i].collapse(false);
-            }
-        }
-        if(Ext.isIE && Ext.isStrict){ // workaround IE strict repainting issue
-            target.repaint();
-        }
-    },
-
-    destroy: function() {
-        var r = ['north', 'south', 'east', 'west'];
-        for (var i = 0; i < r.length; i++) {
-            var region = this[r[i]];
-            if(region){
-                if(region.destroy){
-                    region.destroy();
-                }else if (region.split){
-                    region.split.destroy(true);
-                }
-            }
-        }
-        Ext.layout.BorderLayout.superclass.destroy.call(this);
-    }
-
-    /**
-     * @property activeItem
-     * @hide
-     */
-});
-
-/**
- * @class Ext.layout.BorderLayout.Region
- * <p>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}.</p>
- * <p>Region size is managed automatically and cannot be changed by the user -- for
- * {@link #split resizable regions}, see {@link Ext.layout.BorderLayout.SplitRegion}.</p>
- * @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: <tt>north</tt>, <tt>south</tt>,
- * <tt>east</tt>, <tt>west</tt> and <tt>center</tt>.  Every {@link Ext.layout.BorderLayout BorderLayout}
- * <b>must have a center region</b> 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
-     * <tt>{@link #autoHide} = false</tt>).  Setting <tt>{@link #animFloat} = false</tt> will
-     * prevent the open and close of these floated panels from being animated (defaults to <tt>true</tt>).
-     */
-    /**
-     * @cfg {Boolean} autoHide
-     * When a collapsed region's bar is clicked, the region's panel will be displayed as a floated
-     * panel.  If <tt>autoHide = true</tt>, the panel will automatically hide after the user mouses
-     * out of the panel.  If <tt>autoHide = false</tt>, the panel will continue to display until the
-     * user clicks outside of the panel (defaults to <tt>true</tt>).
-     */
-    /**
-     * @cfg {String} collapseMode
-     * <tt>collapseMode</tt> supports two configuration values:<div class="mdetail-params"><ul>
-     * <li><b><tt>undefined</tt></b> (default)<div class="sub-desc">By default, {@link #collapsible}
-     * regions are collapsed by clicking the expand/collapse tool button that renders into the region's
-     * title bar.</div></li>
-     * <li><b><tt>'mini'</tt></b><div class="sub-desc">Optionally, when <tt>collapseMode</tt> is set to
-     * <tt>'mini'</tt> the region's split bar will also display a small collapse button in the center of
-     * the bar. In <tt>'mini'</tt> mode the region will collapse to a thinner bar than in normal mode.
-     * </div></li>
-     * </ul></div></p>
-     * <p><b>Note</b>: if a collapsible region does not have a title bar, then set <tt>collapseMode =
-     * 'mini'</tt> and <tt>{@link #split} = true</tt> 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.</p>
-     * <p>See also <tt>{@link #cmargins}</tt>.</p>
-     */
-    /**
-     * @cfg {Object} margins
-     * An object containing margins to apply to the region when in the expanded state in the
-     * format:<pre><code>
-{
-    top: (top margin),
-    right: (right margin),
-    bottom: (bottom margin),
-    left: (left margin)
-}</code></pre>
-     * <p>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:</p>
-     * <p><div class="mdetail-params"><ul>
-     * <li>If there is only one value, it applies to all sides.</li>
-     * <li>If there are two values, the top and bottom borders are set to the first value and the
-     * right and left are set to the second.</li>
-     * <li>If there are three values, the top is set to the first value, the left and right are set
-     * to the second, and the bottom is set to the third.</li>
-     * <li>If there are four values, they apply to the top, right, bottom, and left, respectively.</li>
-     * </ul></div></p>
-     * <p>Defaults to:</p><pre><code>
-     * {top:0, right:0, bottom:0, left:0}
-     * </code></pre>
-     */
-    /**
-     * @cfg {Object} cmargins
-     * An object containing margins to apply to the region when in the collapsed state in the
-     * format:<pre><code>
-{
-    top: (top margin),
-    right: (right margin),
-    bottom: (bottom margin),
-    left: (left margin)
-}</code></pre>
-     * <p>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.</p>
-     * <p><ul>
-     * <li>If there is only one value, it applies to all sides.</li>
-     * <li>If there are two values, the top and bottom borders are set to the first value and the
-     * right and left are set to the second.</li>
-     * <li>If there are three values, the top is set to the first value, the left and right are set
-     * to the second, and the bottom is set to the third.</li>
-     * <li>If there are four values, they apply to the top, right, bottom, and left, respectively.</li>
-     * </ul></p>
-     */
-    /**
-     * @cfg {Boolean} collapsible
-     * <p><tt>true</tt> to allow the user to collapse this region (defaults to <tt>false</tt>).  If
-     * <tt>true</tt>, an expand/collapse tool button will automatically be rendered into the title
-     * bar of the region, otherwise the button will not be shown.</p>
-     * <p><b>Note</b>: that a title bar is required to display the collapse/expand toggle button -- if
-     * no <tt>title</tt> is specified for the region's panel, the region will only be collapsible if
-     * <tt>{@link #collapseMode} = 'mini'</tt> and <tt>{@link #split} = true</tt>.
-     */
-    collapsible : false,
-    /**
-     * @cfg {Boolean} split
-     * <p><tt>true</tt> 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 <tt>false</tt> creating a
-     * {@link Ext.layout.BorderLayout.Region Region}.</p><br>
-     * <p><b>Notes</b>:</p><div class="mdetail-params"><ul>
-     * <li>this configuration option is ignored if <tt>region='center'</tt></li>
-     * <li>when <tt>split == true</tt>, it is common to specify a
-     * <tt>{@link Ext.SplitBar#minSize minSize}</tt> and <tt>{@link Ext.SplitBar#maxSize maxSize}</tt>
-     * for the {@link Ext.BoxComponent BoxComponent} representing the region. These are not native
-     * configs of {@link Ext.BoxComponent BoxComponent}, and are used only by this class.</li>
-     * <li>if <tt>{@link #collapseMode} = 'mini'</tt> requires <tt>split = true</tt> to reserve space
-     * for the collapse tool</tt></li>
-     * </ul></div>
-     */
-    split:false,
-    /**
-     * @cfg {Boolean} floatable
-     * <tt>true</tt> to allow clicking a collapsed region's bar to display the region's panel floated
-     * above the layout, <tt>false</tt> to force the user to fully expand a collapsed region by
-     * clicking the expand button to see it again (defaults to <tt>true</tt>).
-     */
-    floatable: true,
-    /**
-     * @cfg {Number} minWidth
-     * <p>The minimum allowable width in pixels for this region (defaults to <tt>50</tt>).
-     * <tt>maxWidth</tt> may also be specified.</p><br>
-     * <p><b>Note</b>: setting the <tt>{@link Ext.SplitBar#minSize minSize}</tt> /
-     * <tt>{@link Ext.SplitBar#maxSize maxSize}</tt> supersedes any specified
-     * <tt>minWidth</tt> / <tt>maxWidth</tt>.</p>
-     */
-    minWidth:50,
-    /**
-     * @cfg {Number} minHeight
-     * The minimum allowable height in pixels for this region (defaults to <tt>50</tt>)
-     * <tt>maxHeight</tt> may also be specified.</p><br>
-     * <p><b>Note</b>: setting the <tt>{@link Ext.SplitBar#minSize minSize}</tt> /
-     * <tt>{@link Ext.SplitBar#maxSize maxSize}</tt> supersedes any specified
-     * <tt>minHeight</tt> / <tt>maxHeight</tt>.</p>
-     */
-    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(
-                     '<div class="x-tool x-tool-{id}">&#160;</div>'
-                );
-                tt.disableFormats = true;
-                tt.compile();
-                Ext.layout.BorderLayout.Region.prototype.toolTemplate = tt;
-            }
-            this.collapsedEl = this.targetEl.createChild({
-                cls: "x-layout-collapsed x-layout-collapsed-"+this.position,
-                id: this.panel.id + '-xcollapsed'
-            });
-            this.collapsedEl.enableDisplayMode('block');
-
-            if(this.collapseMode == 'mini'){
-                this.collapsedEl.addClass('x-layout-cmini-'+this.position);
-                this.miniCollapsedEl = this.collapsedEl.createChild({
-                    cls: "x-layout-mini x-layout-mini-"+this.position, html: "&#160;"
-                });
-                this.miniCollapsedEl.addClassOnOver('x-layout-mini-over');
-                this.collapsedEl.addClassOnOver("x-layout-collapsed-over");
-                this.collapsedEl.on('click', this.onExpandClick, this, {stopEvent:true});
-            }else {
-                if(this.collapsible !== false && !this.hideCollapseTool) {
-                    var t = this.toolTemplate.append(
-                            this.collapsedEl.dom,
-                            {id:'expand-'+this.position}, true);
-                    t.addClassOnOver('x-tool-expand-'+this.position+'-over');
-                    t.on('click', this.onExpandClick, this, {stopEvent:true});
-                }
-                if(this.floatable !== false || this.titleCollapse){
-                   this.collapsedEl.addClassOnOver("x-layout-collapsed-over");
-                   this.collapsedEl.on("click", this[this.floatable ? 'collapseClick' : 'onExpandClick'], this);
-                }
-            }
-        }
-        return this.collapsedEl;
-    },
-
-    // private
-    onExpandClick : function(e){
-        if(this.isSlid){
-            this.panel.expand(false);
-        }else{
-            this.panel.expand();
-        }
-    },
-
-    // private
-    onCollapseClick : function(e){
-        this.panel.collapse();
-    },
-
-    // private
-    beforeCollapse : function(p, animate){
-        this.lastAnim = animate;
-        if(this.splitEl){
-            this.splitEl.hide();
-        }
-        this.getCollapsedEl().show();
-        var el = this.panel.getEl();
-        this.originalZIndex = el.getStyle('z-index');
-        el.setStyle('z-index', 100);
-        this.isCollapsed = true;
-        this.layout.layout();
-    },
-
-    // private
-    onCollapse : function(animate){
-        this.panel.el.setStyle('z-index', 1);
-        if(this.lastAnim === false || this.panel.animCollapse === false){
-            this.getCollapsedEl().dom.style.visibility = 'visible';
-        }else{
-            this.getCollapsedEl().slideIn(this.panel.slideAnchor, {duration:.2});
-        }
-        this.state.collapsed = true;
-        this.panel.saveState();
-    },
-
-    // private
-    beforeExpand : function(animate){
-        if(this.isSlid){
-            this.afterSlideIn();
-        }
-        var c = this.getCollapsedEl();
-        this.el.show();
-        if(this.position == 'east' || this.position == 'west'){
-            this.panel.setSize(undefined, c.getHeight());
-        }else{
-            this.panel.setSize(c.getWidth(), undefined);
-        }
-        c.hide();
-        c.dom.style.visibility = 'hidden';
-        this.panel.el.setStyle('z-index', this.floatingZIndex);
-    },
-
-    // private
-    onExpand : function(){
-        this.isCollapsed = false;
-        if(this.splitEl){
-            this.splitEl.show();
-        }
-        this.layout.layout();
-        this.panel.el.setStyle('z-index', this.originalZIndex);
-        this.state.collapsed = false;
-        this.panel.saveState();
-    },
-
-    // private
-    collapseClick : function(e){
-        if(this.isSlid){
-           e.stopPropagation();
-           this.slideIn();
-        }else{
-           e.stopPropagation();
-           this.slideOut();
-        }
-    },
-
-    // private
-    onHide : function(){
-        if(this.isCollapsed){
-            this.getCollapsedEl().hide();
-        }else if(this.splitEl){
-            this.splitEl.hide();
-        }
-    },
-
-    // private
-    onShow : function(){
-        if(this.isCollapsed){
-            this.getCollapsedEl().show();
-        }else if(this.splitEl){
-            this.splitEl.show();
-        }
-    },
-
-    /**
-     * True if this region is currently visible, else false.
-     * @return {Boolean}
-     */
-    isVisible : function(){
-        return !this.panel.hidden;
-    },
-
-    /**
-     * Returns the current margins for this region.  If the region is collapsed, the
-     * {@link #cmargins} (collapsed margins) value will be returned, otherwise the
-     * {@link #margins} value will be returned.
-     * @return {Object} An object containing the element's margins: <tt>{left: (left
-     * margin), top: (top margin), right: (right margin), bottom: (bottom margin)}</tt>
-     */
-    getMargins : function(){
-        return this.isCollapsed && this.cmargins ? this.cmargins : this.margins;
-    },
-
-    /**
-     * Returns the current size of this region.  If the region is collapsed, the size of the
-     * collapsedEl will be returned, otherwise the size of the region's panel will be returned.
-     * @return {Object} An object containing the element's size: <tt>{width: (element width),
-     * height: (element height)}</tt>
-     */
-    getSize : function(){
-        return this.isCollapsed ? this.getCollapsedEl().getSize() : this.panel.getSize();
-    },
-
-    /**
-     * Sets the specified panel as the container element for this region.
-     * @param {Ext.Panel} panel The new panel
-     */
-    setPanel : function(panel){
-        this.panel = panel;
-    },
-
-    /**
-     * Returns the minimum allowable width for this region.
-     * @return {Number} The minimum width
-     */
-    getMinWidth: function(){
-        return this.minWidth;
-    },
-
-    /**
-     * Returns the minimum allowable height for this region.
-     * @return {Number} The minimum height
-     */
-    getMinHeight: function(){
-        return this.minHeight;
-    },
-
-    // private
-    applyLayoutCollapsed : function(box){
-        var ce = this.getCollapsedEl();
-        ce.setLeftTop(box.x, box.y);
-        ce.setSize(box.width, box.height);
-    },
-
-    // private
-    applyLayout : function(box){
-        if(this.isCollapsed){
-            this.applyLayoutCollapsed(box);
-        }else{
-            this.panel.setPosition(box.x, box.y);
-            this.panel.setSize(box.width, box.height);
-        }
-    },
-
-    // private
-    beforeSlide: function(){
-        this.panel.beforeEffect();
-    },
-
-    // private
-    afterSlide : function(){
-        this.panel.afterEffect();
-    },
-
-    // private
-    initAutoHide : function(){
-        if(this.autoHide !== false){
-            if(!this.autoHideHd){
-                var st = new Ext.util.DelayedTask(this.slideIn, this);
-                this.autoHideHd = {
-                    "mouseout": function(e){
-                        if(!e.within(this.el, true)){
-                            st.delay(500);
-                        }
-                    },
-                    "mouseover" : function(e){
-                        st.cancel();
-                    },
-                    scope : this
-                };
-            }
-            this.el.on(this.autoHideHd);
-            this.collapsedEl.on(this.autoHideHd);
-        }
-    },
-
-    // private
-    clearAutoHide : function(){
-        if(this.autoHide !== false){
-            this.el.un("mouseout", this.autoHideHd.mouseout);
-            this.el.un("mouseover", this.autoHideHd.mouseover);
-            this.collapsedEl.un("mouseout", this.autoHideHd.mouseout);
-            this.collapsedEl.un("mouseover", this.autoHideHd.mouseover);
-        }
-    },
-
-    // private
-    clearMonitor : function(){
-        Ext.getDoc().un("click", this.slideInIf, this);
-    },
-
-    /**
-     * If this Region is {@link #floatable}, this method slides this Region into full visibility <i>over the top
-     * of the center Region</i> where it floats until either {@link #slideIn} is called, or other regions of the layout
-     * are clicked, or the mouse exits the Region.
-     */
-    slideOut : function(){
-        if(this.isSlid || this.el.hasActiveFx()){
-            return;
-        }
-        this.isSlid = true;
-        var ts = this.panel.tools;
-        if(ts && ts.toggle){
-            ts.toggle.hide();
-        }
-        this.el.show();
-        if(this.position == 'east' || this.position == 'west'){
-            this.panel.setSize(undefined, this.collapsedEl.getHeight());
-        }else{
-            this.panel.setSize(this.collapsedEl.getWidth(), undefined);
-        }
-        this.restoreLT = [this.el.dom.style.left, this.el.dom.style.top];
-        this.el.alignTo(this.collapsedEl, this.getCollapseAnchor());
-        this.el.setStyle("z-index", this.floatingZIndex+2);
-        this.panel.el.replaceClass('x-panel-collapsed', 'x-panel-floating');
-        if(this.animFloat !== false){
-            this.beforeSlide();
-            this.el.slideIn(this.getSlideAnchor(), {
-                callback: function(){
-                    this.afterSlide();
-                    this.initAutoHide();
-                    Ext.getDoc().on("click", this.slideInIf, this);
-                },
-                scope: this,
-                block: true
-            });
-        }else{
-            this.initAutoHide();
-             Ext.getDoc().on("click", this.slideInIf, this);
-        }
-    },
-
-    // private
-    afterSlideIn : function(){
-        this.clearAutoHide();
-        this.isSlid = false;
-        this.clearMonitor();
-        this.el.setStyle("z-index", "");
-        this.panel.el.replaceClass('x-panel-floating', 'x-panel-collapsed');
-        this.el.dom.style.left = this.restoreLT[0];
-        this.el.dom.style.top = this.restoreLT[1];
-
-        var ts = this.panel.tools;
-        if(ts && ts.toggle){
-            ts.toggle.show();
-        }
-    },
-
-    /**
-     * If this Region is {@link #floatable}, and this Region has been slid into floating visibility, then this method slides
-     * this region back into its collapsed state.
-     */
-    slideIn : function(cb){
-        if(!this.isSlid || this.el.hasActiveFx()){
-            Ext.callback(cb);
-            return;
-        }
-        this.isSlid = false;
-        if(this.animFloat !== false){
-            this.beforeSlide();
-            this.el.slideOut(this.getSlideAnchor(), {
-                callback: function(){
-                    this.el.hide();
-                    this.afterSlide();
-                    this.afterSlideIn();
-                    Ext.callback(cb);
-                },
-                scope: this,
-                block: true
-            });
-        }else{
-            this.el.hide();
-            this.afterSlideIn();
-        }
-    },
-
-    // private
-    slideInIf : function(e){
-        if(!e.within(this.el)){
-            this.slideIn();
-        }
-    },
-
-    // private
-    anchors : {
-        "west" : "left",
-        "east" : "right",
-        "north" : "top",
-        "south" : "bottom"
-    },
-
-    // private
-    sanchors : {
-        "west" : "l",
-        "east" : "r",
-        "north" : "t",
-        "south" : "b"
-    },
-
-    // private
-    canchors : {
-        "west" : "tl-tr",
-        "east" : "tr-tl",
-        "north" : "tl-bl",
-        "south" : "bl-tl"
-    },
-
-    // private
-    getAnchor : function(){
-        return this.anchors[this.position];
-    },
-
-    // private
-    getCollapseAnchor : function(){
-        return this.canchors[this.position];
-    },
-
-    // private
-    getSlideAnchor : function(){
-        return this.sanchors[this.position];
-    },
-
-    // private
-    getAlignAdj : function(){
-        var cm = this.cmargins;
-        switch(this.position){
-            case "west":
-                return [0, 0];
-            break;
-            case "east":
-                return [0, 0];
-            break;
-            case "north":
-                return [0, 0];
-            break;
-            case "south":
-                return [0, 0];
-            break;
-        }
-    },
-
-    // private
-    getExpandAdj : function(){
-        var c = this.collapsedEl, cm = this.cmargins;
-        switch(this.position){
-            case "west":
-                return [-(cm.right+c.getWidth()+cm.left), 0];
-            break;
-            case "east":
-                return [cm.right+c.getWidth()+cm.left, 0];
-            break;
-            case "north":
-                return [0, -(cm.top+cm.bottom+c.getHeight())];
-            break;
-            case "south":
-                return [0, cm.top+cm.bottom+c.getHeight()];
-            break;
-        }
-    },
-
-    destroy : function(){
-        Ext.destroy(this.miniCollapsedEl, this.collapsedEl);
-    }
-};
-
-/**
- * @class Ext.layout.BorderLayout.SplitRegion
- * @extends Ext.layout.BorderLayout.Region
- * <p>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}.</p>
- * @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 <tt>"Drag to resize."</tt>).  Only applies if
-     * <tt>{@link #useSplitTips} = true</tt>.
-     */
-    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
-     * <tt>{@link #useSplitTips} = true</tt>.
-     */
-    collapsibleSplitTip : "Drag to resize. Double click to hide.",
-    /**
-     * @cfg {Boolean} useSplitTips
-     * <tt>true</tt> to display a tooltip when the user hovers over a region's split bar
-     * (defaults to <tt>false</tt>).  The tooltip text will be the value of either
-     * <tt>{@link #splitTip}</tt> or <tt>{@link #collapsibleSplitTip}</tt> 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: "&#160;",
-            id: this.panel.id + '-xsplit'
-        });
-
-        if(this.collapseMode == 'mini'){
-            this.miniSplitEl = this.splitEl.createChild({
-                cls: "x-layout-mini x-layout-mini-"+ps, html: "&#160;"
-            });
-            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
- * <p>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.</p>
- *
- * <p>This layout manager is used when a Container is configured with the <tt>layout:'form'</tt>
- * {@link Ext.Container#layout layout} config option, and should generally not need to be created directly
- * via the new keyword. See <tt><b>{@link Ext.Container#layout}</b></tt> for additional details.</p>
- *
- * <p>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.</p>
- *
- * <p>A {@link Ext.Container Container} <i>using</i> the FormLayout layout manager (e.g.
- * {@link Ext.form.FormPanel} or specifying <tt>layout:'form'</tt>) can also accept the following
- * layout-specific config properties:<div class="mdetail-params"><ul>
- * <li><b><tt>{@link Ext.form.FormPanel#hideLabels hideLabels}</tt></b></li>
- * <li><b><tt>{@link Ext.form.FormPanel#labelAlign labelAlign}</tt></b></li>
- * <li><b><tt>{@link Ext.form.FormPanel#labelPad labelPad}</tt></b></li>
- * <li><b><tt>{@link Ext.form.FormPanel#labelSeparator labelSeparator}</tt></b></li>
- * <li><b><tt>{@link Ext.form.FormPanel#labelWidth labelWidth}</tt></b></li>
- * </ul></div></p>
- *
- * <p>Any Component (including Fields) managed by FormLayout accepts the following as a config option:
- * <div class="mdetail-params"><ul>
- * <li><b><tt>{@link Ext.Component#anchor anchor}</tt></b></li>
- * </ul></div></p>
- *
- * <p>Any Component managed by FormLayout may be rendered as a form field (with an associated label) by
- * configuring it with a non-null <b><tt>{@link Ext.Component#fieldLabel fieldLabel}</tt></b>. Components configured
- * in this way may be configured with the following options which affect the way the FormLayout renders them:
- * <div class="mdetail-params"><ul>
- * <li><b><tt>{@link Ext.Component#clearCls clearCls}</tt></b></li>
- * <li><b><tt>{@link Ext.Component#fieldLabel fieldLabel}</tt></b></li>
- * <li><b><tt>{@link Ext.Component#hideLabel hideLabel}</tt></b></li>
- * <li><b><tt>{@link Ext.Component#itemCls itemCls}</tt></b></li>
- * <li><b><tt>{@link Ext.Component#labelSeparator labelSeparator}</tt></b></li>
- * <li><b><tt>{@link Ext.Component#labelStyle labelStyle}</tt></b></li>
- * </ul></div></p>
- *
- * <p>Example usage:</p>
- * <pre><code>
-// 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
-});
-</code></pre>
- */
-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 <b>container</b> 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 <tt>false</tt>.
-     */
-    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:</p><pre><code>
-new Ext.Template(
-    &#39;&lt;div class="x-form-item {itemCls}" tabIndex="-1">&#39;,
-        &#39;&lt;&#108;abel for="{id}" style="{labelStyle}" class="x-form-item-&#108;abel">{&#108;abel}{labelSeparator}&lt;/&#108;abel>&#39;,
-        &#39;&lt;div class="x-form-element" id="x-form-el-{id}" style="{elementStyle}">&#39;,
-        &#39;&lt;/div>&lt;div class="{clearCls}">&lt;/div>&#39;,
-    '&lt;/div>'
-);
-</code></pre>
-     * <p>This may be specified to produce a different DOM structure when rendering form Fields.</p>
-     * <p>A description of the properties within the template follows:</p><div class="mdetail-params"><ul>
-     * <li><b><tt>itemCls</tt></b> : String<div class="sub-desc">The CSS class applied to the outermost div wrapper
-     * that contains this field label and field element (the default class is <tt>'x-form-item'</tt> and <tt>itemCls</tt>
-     * will be added to that). If supplied, <tt>itemCls</tt> at the field level will override the default <tt>itemCls</tt>
-     * supplied at the container level.</div></li>
-     * <li><b><tt>id</tt></b> : String<div class="sub-desc">The id of the Field</div></li>
-     * <li><b><tt>{@link #labelStyle}</tt></b> : String<div class="sub-desc">
-     * A CSS style specification string to add to the field label for this field (defaults to <tt>''</tt> or the
-     * {@link #labelStyle layout's value for <tt>labelStyle</tt>}).</div></li>
-     * <li><b><tt>label</tt></b> : String<div class="sub-desc">The text to display as the label for this
-     * field (defaults to <tt>''</tt>)</div></li>
-     * <li><b><tt>{@link #labelSeparator}</tt></b> : String<div class="sub-desc">The separator to display after
-     * the text of the label for this field (defaults to a colon <tt>':'</tt> or the
-     * {@link #labelSeparator layout's value for labelSeparator}). To hide the separator use empty string ''.</div></li>
-     * <li><b><tt>elementStyle</tt></b> : String<div class="sub-desc">The styles text for the input element's wrapper.</div></li>
-     * <li><b><tt>clearCls</tt></b> : String<div class="sub-desc">The CSS class to apply to the special clearing div
-     * rendered directly after each form field wrapper (defaults to <tt>'x-form-clear-left'</tt>)</div></li>
-     * </ul></div>
-     * <p>Also see <tt>{@link #getTemplateArgs}</tt></p>
-     */
-
-    // 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);
-        }
-    },
-
-    /**
-     * <p>Provides template arguments for rendering the fully wrapped, labeled and styled form Field.</p>
-     * <p>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:</p><div class="mdetail-params"><ul>
-     * <li><b><tt>itemCls</tt></b> : String<div class="sub-desc">The CSS class applied to the outermost div wrapper
-     * that contains this field label and field element (the default class is <tt>'x-form-item'</tt> and <tt>itemCls</tt>
-     * will be added to that). If supplied, <tt>itemCls</tt> at the field level will override the default <tt>itemCls</tt>
-     * supplied at the container level.</div></li>
-     * <li><b><tt>id</tt></b> : String<div class="sub-desc">The id of the Field</div></li>
-     * <li><b><tt>{@link #labelStyle}</tt></b> : String<div class="sub-desc">
-     * A CSS style specification string to add to the field label for this field (defaults to <tt>''</tt> or the
-     * {@link #labelStyle layout's value for <tt>labelStyle</tt>}).</div></li>
-     * <li><b><tt>label</tt></b> : String<div class="sub-desc">The text to display as the label for this
-     * field (defaults to <tt>''</tt>)</div></li>
-     * <li><b><tt>{@link #labelSeparator}</tt></b> : String<div class="sub-desc">The separator to display after
-     * the text of the label for this field (defaults to a colon <tt>':'</tt> or the
-     * {@link #labelSeparator layout's value for labelSeparator}). To hide the separator use empty string ''.</div></li>
-     * <li><b><tt>elementStyle</tt></b> : String<div class="sub-desc">The styles text for the input element's wrapper.</div></li>
-     * <li><b><tt>clearCls</tt></b> : String<div class="sub-desc">The CSS class to apply to the special clearing div
-     * rendered directly after each form field wrapper (defaults to <tt>'x-form-clear-left'</tt>)</div></li>
-     * </ul></div>
-     * @param (Ext.form.Field} field The {@link Ext.form.Field Field} being rendered.
-     * @return An object hash containing the properties required to render the Field.
-     */
-    getTemplateArgs: function(field) {
-        var noLabelSep = !field.fieldLabel || field.hideLabel;
-        return {
-            id: field.id,
-            label: field.fieldLabel,
-            labelStyle: this.getLabelStyle(field.labelStyle),
-            elementStyle: this.elementStyle||'',
-            labelSeparator: noLabelSep ? '' : (Ext.isDefined(field.labelSeparator) ? field.labelSeparator : this.labelSeparator),
-            itemCls: (field.itemCls||this.container.itemCls||'') + (field.hideLabel ? ' x-hide-label' : ''),
-            clearCls: field.clearCls || 'x-form-clear-left'
-        };
-    },
-
-    // private
-    adjustWidthAnchor: function(value, c){
-        if(c.label && !this.isHide(c) && (this.container.labelAlign != 'top')){
-            var adjust = Ext.isIE6 || (Ext.isIE && !Ext.isStrict);
-            return value - this.labelAdjust + (adjust ? -3 : 0);
-        }
-        return value;
-    },
-
-    adjustHeightAnchor : function(value, c){
-        if(c.label && !this.isHide(c) && (this.container.labelAlign == 'top')){
-            return value - c.label.getHeight();
-        }
-        return value;
-    },
-
-    // private
-    isValidParent : function(c, target){
-        return target && this.container.getEl().contains(c.getPositionEl());
-    }
-
-    /**
-     * @property activeItem
-     * @hide
-     */
-});
-
-Ext.Container.LAYOUTS['form'] = Ext.layout.FormLayout;
-/**\r
- * @class Ext.layout.AccordionLayout\r
- * @extends Ext.layout.FitLayout\r
- * <p>This is a layout that manages multiple Panels in an expandable accordion style such that only\r
- * <b>one Panel can be expanded at any given time</b>. Each Panel has built-in support for expanding and collapsing.</p>\r
- * <p>Note: Only Ext.Panels <b>and all subclasses of Ext.Panel</b> may be used in an accordion layout Container.</p>\r
- * <p>This class is intended to be extended or created via the <tt><b>{@link Ext.Container#layout layout}</b></tt>\r
- * configuration property.  See <tt><b>{@link Ext.Container#layout}</b></tt> for additional details.</p>\r
- * <p>Example usage:</p>\r
- * <pre><code>\r
-var accordion = new Ext.Panel({\r
-    title: 'Accordion Layout',\r
-    layout:'accordion',\r
-    defaults: {\r
-        // applied to each contained panel\r
-        bodyStyle: 'padding:15px'\r
-    },\r
-    layoutConfig: {\r
-        // layout-specific configs go here\r
-        titleCollapse: false,\r
-        animate: true,\r
-        activeOnTop: true\r
-    },\r
-    items: [{\r
-        title: 'Panel 1',\r
-        html: '&lt;p&gt;Panel content!&lt;/p&gt;'\r
-    },{\r
-        title: 'Panel 2',\r
-        html: '&lt;p&gt;Panel content!&lt;/p&gt;'\r
-    },{\r
-        title: 'Panel 3',\r
-        html: '&lt;p&gt;Panel content!&lt;/p&gt;'\r
-    }]\r
-});\r
-</code></pre>\r
- */\r
-Ext.layout.AccordionLayout = Ext.extend(Ext.layout.FitLayout, {\r
-    /**\r
-     * @cfg {Boolean} fill\r
-     * True to adjust the active item's height to fill the available space in the container, false to use the\r
-     * item's current height, or auto height if not explicitly set (defaults to true).\r
-     */\r
-    fill : true,\r
-    /**\r
-     * @cfg {Boolean} autoWidth\r
-     * True to set each contained item's width to 'auto', false to use the item's current width (defaults to true).\r
-     * Note that some components, in particular the {@link Ext.grid.GridPanel grid}, will not function properly within\r
-     * layouts if they have auto width, so in such cases this config should be set to false.\r
-     */\r
-    autoWidth : true,\r
-    /**\r
-     * @cfg {Boolean} titleCollapse\r
-     * True to allow expand/collapse of each contained panel by clicking anywhere on the title bar, false to allow\r
-     * expand/collapse only when the toggle tool button is clicked (defaults to true).  When set to false,\r
-     * {@link #hideCollapseTool} should be false also.\r
-     */\r
-    titleCollapse : true,\r
-    /**\r
-     * @cfg {Boolean} hideCollapseTool\r
-     * True to hide the contained panels' collapse/expand toggle buttons, false to display them (defaults to false).\r
-     * When set to true, {@link #titleCollapse} should be true also.\r
-     */\r
-    hideCollapseTool : false,\r
-    /**\r
-     * @cfg {Boolean} collapseFirst\r
-     * True to make sure the collapse/expand toggle button always renders first (to the left of) any other tools\r
-     * in the contained panels' title bars, false to render it last (defaults to false).\r
-     */\r
-    collapseFirst : false,\r
-    /**\r
-     * @cfg {Boolean} animate\r
-     * True to slide the contained panels open and closed during expand/collapse using animation, false to open and\r
-     * close directly with no animation (defaults to false).  Note: to defer to the specific config setting of each\r
-     * contained panel for this property, set this to undefined at the layout level.\r
-     */\r
-    animate : false,\r
-    /**\r
-     * @cfg {Boolean} sequence\r
-     * <b>Experimental</b>. If animate is set to true, this will result in each animation running in sequence.\r
-     */\r
-    sequence : false,\r
-    /**\r
-     * @cfg {Boolean} activeOnTop\r
-     * True to swap the position of each panel as it is expanded so that it becomes the first item in the container,\r
-     * false to keep the panels in the rendered order. <b>This is NOT compatible with "animate:true"</b> (defaults to false).\r
-     */\r
-    activeOnTop : false,\r
-\r
-    renderItem : function(c){\r
-        if(this.animate === false){\r
-            c.animCollapse = false;\r
-        }\r
-        c.collapsible = true;\r
-        if(this.autoWidth){\r
-            c.autoWidth = true;\r
-        }\r
-        if(this.titleCollapse){\r
-            c.titleCollapse = true;\r
-        }\r
-        if(this.hideCollapseTool){\r
-            c.hideCollapseTool = true;\r
-        }\r
-        if(this.collapseFirst !== undefined){\r
-            c.collapseFirst = this.collapseFirst;\r
-        }\r
-        if(!this.activeItem && !c.collapsed){\r
-            this.setActiveItem(c, true);\r
-        }else if(this.activeItem && this.activeItem != c){\r
-            c.collapsed = true;\r
-        }\r
-        Ext.layout.AccordionLayout.superclass.renderItem.apply(this, arguments);\r
-        c.header.addClass('x-accordion-hd');\r
-        c.on('beforeexpand', this.beforeExpand, this);\r
-    },\r
-    \r
-    onRemove: function(c){\r
-        Ext.layout.AccordionLayout.superclass.onRemove.call(this, c);\r
-        if(c.rendered){\r
-            c.header.removeClass('x-accordion-hd');\r
-        }\r
-        c.un('beforeexpand', this.beforeExpand, this);\r
-    },\r
-\r
-    // private\r
-    beforeExpand : function(p, anim){\r
-        var ai = this.activeItem;\r
-        if(ai){\r
-            if(this.sequence){\r
-                delete this.activeItem;\r
-                if (!ai.collapsed){\r
-                    ai.collapse({callback:function(){\r
-                        p.expand(anim || true);\r
-                    }, scope: this});\r
-                    return false;\r
-                }\r
-            }else{\r
-                ai.collapse(this.animate);\r
-            }\r
-        }\r
-        this.setActive(p);\r
-        if(this.activeOnTop){\r
-            p.el.dom.parentNode.insertBefore(p.el.dom, p.el.dom.parentNode.firstChild);\r
-        }\r
-        this.layout();\r
-    },\r
-\r
-    // private\r
-    setItemSize : function(item, size){\r
-        if(this.fill && item){\r
-            var hh = 0;\r
-            this.container.items.each(function(p){\r
-                if(p != item){\r
-                    hh += p.header.getHeight();\r
-                }    \r
-            });\r
-            size.height -= hh;\r
-            item.setSize(size);\r
-        }\r
-    },\r
-\r
-    /**\r
-     * Sets the active (expanded) item in the layout.\r
-     * @param {String/Number} item The string component id or numeric index of the item to activate\r
-     */\r
-    setActiveItem : function(item){\r
-        this.setActive(item, true);\r
-    },\r
-    \r
-    // private\r
-    setActive : function(item, expand){\r
-        var ai = this.activeItem;\r
-        item = this.container.getComponent(item);\r
-        if(ai != item){\r
-            if(item.rendered && item.collapsed && expand){\r
-                item.expand();\r
-            }else{\r
-                if(ai){\r
-                   ai.fireEvent('deactivate', ai);\r
-                }\r
-                this.activeItem = item;\r
-                item.fireEvent('activate', item);\r
-            }\r
-        }\r
-    }\r
-});\r
-Ext.Container.LAYOUTS.accordion = Ext.layout.AccordionLayout;\r
-\r
-//backwards compat\r
-Ext.layout.Accordion = Ext.layout.AccordionLayout;/**\r
- * @class Ext.layout.TableLayout\r
- * @extends Ext.layout.ContainerLayout\r
- * <p>This layout allows you to easily render content into an HTML table.  The total number of columns can be\r
- * specified, and rowspan and colspan can be used to create complex layouts within the table.\r
- * This class is intended to be extended or created via the layout:'table' {@link Ext.Container#layout} config,\r
- * and should generally not need to be created directly via the new keyword.</p>\r
- * <p>Note that when creating a layout via config, the layout-specific config properties must be passed in via\r
- * the {@link Ext.Container#layoutConfig} object which will then be applied internally to the layout.  In the\r
- * case of TableLayout, the only valid layout config property is {@link #columns}.  However, the items added to a\r
- * TableLayout can supply the following table-specific config properties:</p>\r
- * <ul>\r
- * <li><b>rowspan</b> Applied to the table cell containing the item.</li>\r
- * <li><b>colspan</b> Applied to the table cell containing the item.</li>\r
- * <li><b>cellId</b> An id applied to the table cell containing the item.</li>\r
- * <li><b>cellCls</b> A CSS class name added to the table cell containing the item.</li>\r
- * </ul>\r
- * <p>The basic concept of building up a TableLayout is conceptually very similar to building up a standard\r
- * HTML table.  You simply add each panel (or "cell") that you want to include along with any span attributes\r
- * specified as the special config properties of rowspan and colspan which work exactly like their HTML counterparts.\r
- * Rather than explicitly creating and nesting rows and columns as you would in HTML, you simply specify the\r
- * total column count in the layoutConfig and start adding panels in their natural order from left to right,\r
- * top to bottom.  The layout will automatically figure out, based on the column count, rowspans and colspans,\r
- * how to position each panel within the table.  Just like with HTML tables, your rowspans and colspans must add\r
- * up correctly in your overall layout or you'll end up with missing and/or extra cells!  Example usage:</p>\r
- * <pre><code>\r
-// This code will generate a layout table that is 3 columns by 2 rows\r
-// with some spanning included.  The basic layout will be:\r
-// +--------+-----------------+\r
-// |   A    |   B             |\r
-// |        |--------+--------|\r
-// |        |   C    |   D    |\r
-// +--------+--------+--------+\r
-var table = new Ext.Panel({\r
-    title: 'Table Layout',\r
-    layout:'table',\r
-    defaults: {\r
-        // applied to each contained panel\r
-        bodyStyle:'padding:20px'\r
-    },\r
-    layoutConfig: {\r
-        // The total column count must be specified here\r
-        columns: 3\r
-    },\r
-    items: [{\r
-        html: '&lt;p&gt;Cell A content&lt;/p&gt;',\r
-        rowspan: 2\r
-    },{\r
-        html: '&lt;p&gt;Cell B content&lt;/p&gt;',\r
-        colspan: 2\r
-    },{\r
-        html: '&lt;p&gt;Cell C content&lt;/p&gt;',\r
-        cellCls: 'highlight'\r
-    },{\r
-        html: '&lt;p&gt;Cell D content&lt;/p&gt;'\r
-    }]\r
-});\r
-</code></pre>\r
- */\r
-Ext.layout.TableLayout = Ext.extend(Ext.layout.ContainerLayout, {\r
-    /**\r
-     * @cfg {Number} columns\r
-     * The total number of columns to create in the table for this layout.  If not specified, all Components added to\r
-     * this layout will be rendered into a single row using one column per Component.\r
-     */\r
-\r
-    // private\r
-    monitorResize:false,\r
-    \r
-    targetCls: 'x-table-layout-ct',\r
-\r
-    /**\r
-     * @cfg {Object} tableAttrs\r
-     * <p>An object containing properties which are added to the {@link Ext.DomHelper DomHelper} specification\r
-     * used to create the layout's <tt>&lt;table&gt;</tt> element. Example:</p><pre><code>\r
-{\r
-    xtype: 'panel',\r
-    layout: 'table',\r
-    layoutConfig: {\r
-        tableAttrs: {\r
-               style: {\r
-                       width: '100%'\r
-               }\r
-        },\r
-        columns: 3\r
-    }\r
-}</code></pre>\r
-     */\r
-    tableAttrs:null,\r
-    \r
-    // private\r
-    setContainer : function(ct){\r
-        Ext.layout.TableLayout.superclass.setContainer.call(this, ct);\r
-\r
-        this.currentRow = 0;\r
-        this.currentColumn = 0;\r
-        this.cells = [];\r
-    },\r
-\r
-    // private\r
-    onLayout : function(ct, target){\r
-        var cs = ct.items.items, len = cs.length, c, i;\r
-\r
-        if(!this.table){\r
-            this.table = target.createChild(\r
-                Ext.apply({tag:'table', cls:'x-table-layout', cellspacing: 0, cn: {tag: 'tbody'}}, this.tableAttrs), null, true);\r
-        }\r
-        this.renderAll(ct, target);\r
-    },\r
-\r
-    // private\r
-    getRow : function(index){\r
-        var row = this.table.tBodies[0].childNodes[index];\r
-        if(!row){\r
-            row = document.createElement('tr');\r
-            this.table.tBodies[0].appendChild(row);\r
-        }\r
-        return row;\r
-    },\r
-\r
-    // private\r
-    getNextCell : function(c){\r
-        var cell = this.getNextNonSpan(this.currentColumn, this.currentRow);\r
-        var curCol = this.currentColumn = cell[0], curRow = this.currentRow = cell[1];\r
-        for(var rowIndex = curRow; rowIndex < curRow + (c.rowspan || 1); rowIndex++){\r
-            if(!this.cells[rowIndex]){\r
-                this.cells[rowIndex] = [];\r
-            }\r
-            for(var colIndex = curCol; colIndex < curCol + (c.colspan || 1); colIndex++){\r
-                this.cells[rowIndex][colIndex] = true;\r
-            }\r
-        }\r
-        var td = document.createElement('td');\r
-        if(c.cellId){\r
-            td.id = c.cellId;\r
-        }\r
-        var cls = 'x-table-layout-cell';\r
-        if(c.cellCls){\r
-            cls += ' ' + c.cellCls;\r
-        }\r
-        td.className = cls;\r
-        if(c.colspan){\r
-            td.colSpan = c.colspan;\r
-        }\r
-        if(c.rowspan){\r
-            td.rowSpan = c.rowspan;\r
-        }\r
-        this.getRow(curRow).appendChild(td);\r
-        return td;\r
-    },\r
-    \r
-    // private\r
-    getNextNonSpan: function(colIndex, rowIndex){\r
-        var cols = this.columns;\r
-        while((cols && colIndex >= cols) || (this.cells[rowIndex] && this.cells[rowIndex][colIndex])) {\r
-            if(cols && colIndex >= cols){\r
-                rowIndex++;\r
-                colIndex = 0;\r
-            }else{\r
-                colIndex++;\r
-            }\r
-        }\r
-        return [colIndex, rowIndex];\r
-    },\r
-\r
-    // private\r
-    renderItem : function(c, position, target){\r
-        if(c && !c.rendered){\r
-            c.render(this.getNextCell(c));\r
-            this.configureItem(c, position);\r
-        }else if(c && !this.isValidParent(c, target)){\r
-            var container = this.getNextCell(c);\r
-            container.insertBefore(c.getPositionEl().dom, null);\r
-            c.container = Ext.get(container);\r
-            this.configureItem(c, position);\r
-        }\r
-    },\r
-\r
-    // private\r
-    isValidParent : function(c, target){\r
-        return c.getPositionEl().up('table', 5).dom.parentNode === (target.dom || target);\r
-    }\r
-\r
-    /**\r
-     * @property activeItem\r
-     * @hide\r
-     */\r
-});\r
-\r
-Ext.Container.LAYOUTS['table'] = Ext.layout.TableLayout;/**\r
- * @class Ext.layout.AbsoluteLayout\r
- * @extends Ext.layout.AnchorLayout\r
- * <p>This is a layout that inherits the anchoring of <b>{@link Ext.layout.AnchorLayout}</b> and adds the\r
- * ability for x/y positioning using the standard x and y component config options.</p>\r
- * <p>This class is intended to be extended or created via the <tt><b>{@link Ext.Container#layout layout}</b></tt>\r
- * configuration property.  See <tt><b>{@link Ext.Container#layout}</b></tt> for additional details.</p>\r
- * <p>Example usage:</p>\r
- * <pre><code>\r
-var form = new Ext.form.FormPanel({\r
-    title: 'Absolute Layout',\r
-    layout:'absolute',\r
-    layoutConfig: {\r
-        // layout-specific configs go here\r
-        extraCls: 'x-abs-layout-item',\r
-    },\r
-    baseCls: 'x-plain',\r
-    url:'save-form.php',\r
-    defaultType: 'textfield',\r
-    items: [{\r
-        x: 0,\r
-        y: 5,\r
-        xtype:'label',\r
-        text: 'Send To:'\r
-    },{\r
-        x: 60,\r
-        y: 0,\r
-        name: 'to',\r
-        anchor:'100%'  // anchor width by percentage\r
-    },{\r
-        x: 0,\r
-        y: 35,\r
-        xtype:'label',\r
-        text: 'Subject:'\r
-    },{\r
-        x: 60,\r
-        y: 30,\r
-        name: 'subject',\r
-        anchor: '100%'  // anchor width by percentage\r
-    },{\r
-        x:0,\r
-        y: 60,\r
-        xtype: 'textarea',\r
-        name: 'msg',\r
-        anchor: '100% 100%'  // anchor width and height\r
-    }]\r
-});\r
-</code></pre>\r
- */\r
-Ext.layout.AbsoluteLayout = Ext.extend(Ext.layout.AnchorLayout, {\r
-\r
-    extraCls: 'x-abs-layout-item',\r
-\r
-    onLayout : function(ct, target){\r
-        target.position();\r
-        this.paddingLeft = target.getPadding('l');\r
-        this.paddingTop = target.getPadding('t');\r
-\r
-        Ext.layout.AbsoluteLayout.superclass.onLayout.call(this, ct, target);\r
-    },\r
-\r
-    // private\r
-    adjustWidthAnchor : function(value, comp){\r
-        return value ? value - comp.getPosition(true)[0] + this.paddingLeft : value;\r
-    },\r
-\r
-    // private\r
-    adjustHeightAnchor : function(value, comp){\r
-        return  value ? value - comp.getPosition(true)[1] + this.paddingTop : value;\r
-    }\r
-    /**\r
-     * @property activeItem\r
-     * @hide\r
-     */\r
-});\r
-Ext.Container.LAYOUTS['absolute'] = Ext.layout.AbsoluteLayout;
-/**
- * @class Ext.layout.BoxLayout
- * @extends Ext.layout.ContainerLayout
- * <p>Base Class for HBoxLayout and VBoxLayout Classes. Generally it should not need to be used directly.</p>
- */
-Ext.layout.BoxLayout = Ext.extend(Ext.layout.ContainerLayout, {
-    /**
-     * @cfg {Object} defaultMargins
-     * <p>If the individual contained items do not have a <tt>margins</tt>
-     * property specified, the default margins from this property will be
-     * applied to each item.</p>
-     * <br><p>This property may be specified as an object containing margins
-     * to apply in the format:</p><pre><code>
-{
-    top: (top margin),
-    right: (right margin),
-    bottom: (bottom margin),
-    left: (left margin)
-}</code></pre>
-     * <p>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:</p>
-     * <div class="mdetail-params"><ul>
-     * <li>If there is only one value, it applies to all sides.</li>
-     * <li>If there are two values, the top and bottom borders are set to the
-     * first value and the right and left are set to the second.</li>
-     * <li>If there are three values, the top is set to the first value, the left
-     * and right are set to the second, and the bottom is set to the third.</li>
-     * <li>If there are four values, they apply to the top, right, bottom, and
-     * left, respectively.</li>
-     * </ul></div>
-     * <p>Defaults to:</p><pre><code>
-     * {top:0, right:0, bottom:0, left:0}
-     * </code></pre>
-     */
-    defaultMargins : {left:0,top:0,right:0,bottom:0},
-    /**
-     * @cfg {String} padding
-     * <p>Sets the padding to be applied to all child items managed by this layout.</p>
-     * <p>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:</p>
-     * <div class="mdetail-params"><ul>
-     * <li>If there is only one value, it applies to all sides.</li>
-     * <li>If there are two values, the top and bottom borders are set to the
-     * first value and the right and left are set to the second.</li>
-     * <li>If there are three values, the top is set to the first value, the left
-     * and right are set to the second, and the bottom is set to the third.</li>
-     * <li>If there are four values, they apply to the top, right, bottom, and
-     * left, respectively.</li>
-     * </ul></div>
-     * <p>Defaults to: <code>"0"</code></p>
-     */
-    padding : '0',
-    // documented in subclasses
-    pack : 'start',
-
-    // private
-    monitorResize : true,
-    scrollOffset : 0,
-    extraCls : 'x-box-item',
-    targetCls : 'x-box-layout-ct',
-    innerCls : 'x-box-inner',
-
-    constructor : function(config){
-        Ext.layout.BoxLayout.superclass.constructor.call(this, config);
-        if(Ext.isString(this.defaultMargins)){
-            this.defaultMargins = this.parseMargins(this.defaultMargins);
-        }
-    },
-
-    // private
-    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, last = len-1, cm;
-
-        if(!this.innerCt){
-            // the innerCt prevents wrapping and shuffling while
-            // the container is resizing
-            this.innerCt = target.createChild({cls:this.innerCls});
-            this.padding = this.parseMargins(this.padding);
-        }
-        this.renderAll(ct, this.innerCt);
-    },
-
-    // private
-    renderItem : function(c){
-        if(Ext.isString(c.margins)){
-            c.margins = this.parseMargins(c.margins);
-        }else if(!c.margins){
-            c.margins = this.defaultMargins;
-        }
-        Ext.layout.BoxLayout.superclass.renderItem.apply(this, arguments);
-    },
-
-    // deprecate
-    getTargetSize : function(target){
-        return (Ext.isIE6 && Ext.isStrict && target.dom == document.body) ? target.getStyleSize() : target.getViewSize(true);
-    },
-
-    getItems: function(ct){
-        var items = [];
-        ct.items.each(function(c){
-            if(c.isVisible()){
-                items.push(c);
-            }
-        });
-        return items;
-    }
-});
-
-/**
- * @class Ext.layout.VBoxLayout
- * @extends Ext.layout.BoxLayout
- * <p>A layout that arranges items vertically down a Container. This layout optionally divides available vertical
- * space between child items containing a numeric <code>flex</code> configuration.</p>
- * This layout may also be used to set the widths of child items by configuring it with the {@link #align} option.
- */
-Ext.layout.VBoxLayout = Ext.extend(Ext.layout.BoxLayout, {
-    /**
-     * @cfg {String} align
-     * Controls how the child items of the container are aligned. Acceptable configuration values for this
-     * property are:
-     * <div class="mdetail-params"><ul>
-     * <li><b><tt>left</tt></b> : <b>Default</b><div class="sub-desc">child items are aligned horizontally
-     * at the <b>left</b> side of the container</div></li>
-     * <li><b><tt>center</tt></b> : <div class="sub-desc">child items are aligned horizontally at the
-     * <b>mid-width</b> of the container</div></li>
-     * <li><b><tt>stretch</tt></b> : <div class="sub-desc">child items are stretched horizontally to fill
-     * the width of the container</div></li>
-     * <li><b><tt>stretchmax</tt></b> : <div class="sub-desc">child items are stretched horizontally to
-     * the size of the largest item.</div></li>
-     * </ul></div>
-     */
-    align : 'left', // left, center, stretch, strechmax
-    /**
-     * @cfg {String} pack
-     * Controls how the child items of the container are packed together. Acceptable configuration values
-     * for this property are:
-     * <div class="mdetail-params"><ul>
-     * <li><b><tt>start</tt></b> : <b>Default</b><div class="sub-desc">child items are packed together at
-     * <b>top</b> side of container</div></li>
-     * <li><b><tt>center</tt></b> : <div class="sub-desc">child items are packed together at
-     * <b>mid-height</b> of container</div></li>
-     * <li><b><tt>end</tt></b> : <div class="sub-desc">child items are packed together at <b>bottom</b>
-     * side of container</div></li>
-     * </ul></div>
-     */
-    /**
-     * @cfg {Number} flex
-     * This configuation option is to be applied to <b>child <tt>items</tt></b> of the container managed
-     * by this layout. Each child item with a <tt>flex</tt> property will be flexed <b>vertically</b>
-     * according to each item's <b>relative</b> <tt>flex</tt> value compared to the sum of all items with
-     * a <tt>flex</tt> value specified.  Any child items that have either a <tt>flex = 0</tt> or
-     * <tt>flex = undefined</tt> will not be 'flexed' (the initial size will not be changed).
-     */
-
-    // private
-    onLayout : function(ct, target){
-        Ext.layout.VBoxLayout.superclass.onLayout.call(this, ct, target);
-
-        var cs = this.getItems(ct), cm, ch, margin, cl, diff, aw,
-            size = target.getViewSize(true),
-            w = size.width,
-            h = size.height - this.scrollOffset,
-            l = this.padding.left, t = this.padding.top,
-            isStart = this.pack == 'start',
-            stretchWidth = w - (this.padding.left + this.padding.right),
-            extraHeight = 0,
-            maxWidth = 0,
-            totalFlex = 0,
-            flexHeight = 0,
-            usedHeight = 0,
-            idx = 0,
-            heights = [],
-            restore = [],
-            c,
-            csLen = cs.length;
-
-        // Do only width calculations and apply those first, as they can affect height
-        for (i = 0 ; i < csLen; i++) {
-            c = cs[i];
-            cm = c.margins;
-            margin = cm.top + cm.bottom;
-            maxWidth = Math.max(maxWidth, c.getWidth() + cm.left + cm.right);
-        }
-
-        var innerCtWidth = maxWidth + this.padding.left + this.padding.right;
-        switch(this.align){
-            case 'stretch':
-                this.innerCt.setSize(w, h);
-                break;
-            case 'stretchmax':
-            case 'left':
-                this.innerCt.setSize(innerCtWidth, h);
-                break;
-            case 'center':
-                this.innerCt.setSize(w = Math.max(w, innerCtWidth), h);
-                break;
-        }
-
-        var availableWidth = Math.max(0, w - this.padding.left - this.padding.right);
-        // Apply widths
-        for (i = 0 ; i < csLen; i++) {
-            c = cs[i];
-            cm = c.margins;
-            if(this.align == 'stretch'){
-                c.setWidth((stretchWidth - (cm.left + cm.right)).constrain(
-                    c.minWidth || 0, c.maxWidth || 1000000));
-            }else if(this.align == 'stretchmax'){
-                c.setWidth((maxWidth - (cm.left + cm.right)).constrain(
-                    c.minWidth || 0, c.maxWidth || 1000000));
-            }else if(isStart && c.flex){
-                c.setWidth();
-            }
-
-        }
-
-        // Do height calculations
-        for (i = 0 ; i < csLen; i++) {
-            c = cs[i];
-            cm = c.margins;
-            totalFlex += c.flex || 0;
-            ch = c.getHeight();
-            margin = cm.top + cm.bottom;
-            extraHeight += ch + margin;
-            flexHeight += margin + (c.flex ? 0 : ch);
-        }
-        extraHeight = h - extraHeight - this.padding.top - this.padding.bottom;
-
-        var availHeight = Math.max(0, h - this.padding.top - this.padding.bottom - flexHeight),
-            leftOver = availHeight;
-        for (i = 0 ; i < csLen; i++) {
-            c = cs[i];
-            if(isStart && c.flex){
-                ch = Math.floor(availHeight * (c.flex / totalFlex));
-                leftOver -= ch;
-                heights.push(ch);
-            }
-        }
-        if(this.pack == 'center'){
-            t += extraHeight ? extraHeight / 2 : 0;
-        }else if(this.pack == 'end'){
-            t += extraHeight;
-        }
-        idx = 0;
-        // Apply heights
-        for (i = 0 ; i < csLen; i++) {
-            c = cs[i];
-            cm = c.margins;
-            t += cm.top;
-            aw = availableWidth;
-            cl = l + cm.left // default left pos
-
-//          Adjust left pos for centering
-            if(this.align == 'center'){
-                if((diff = availableWidth - (c.getWidth() + cm.left + cm.right)) > 0){
-                    cl += (diff/2);
-                    aw -= diff;
-                }
-            }
-
-            c.setPosition(cl, t);
-            if(isStart && c.flex){
-                ch = Math.max(0, heights[idx++] + (leftOver-- > 0 ? 1 : 0));
-                c.setSize(aw, ch);
-            }else{
-                ch = c.getHeight();
-            }
-            t += ch + cm.bottom;
-        }
-    }
-});
-
-Ext.Container.LAYOUTS.vbox = Ext.layout.VBoxLayout;
-
-/**
- * @class Ext.layout.HBoxLayout
- * @extends Ext.layout.BoxLayout
- * <p>A layout that arranges items horizontally across a Container. This layout optionally divides available horizontal
- * space between child items containing a numeric <code>flex</code> configuration.</p>
- * This layout may also be used to set the heights of child items by configuring it with the {@link #align} option.
- */
-Ext.layout.HBoxLayout = Ext.extend(Ext.layout.BoxLayout, {
-    /**
-     * @cfg {String} align
-     * Controls how the child items of the container are aligned. Acceptable configuration values for this
-     * property are:
-     * <div class="mdetail-params"><ul>
-     * <li><b><tt>top</tt></b> : <b>Default</b><div class="sub-desc">child items are aligned vertically
-     * at the <b>top</b> of the container</div></li>
-     * <li><b><tt>middle</tt></b> : <div class="sub-desc">child items are aligned vertically in the
-     * <b>middle</b> of the container</div></li>
-     * <li><b><tt>stretch</tt></b> : <div class="sub-desc">child items are stretched vertically to fill
-     * the height of the container</div></li>
-     * <li><b><tt>stretchmax</tt></b> : <div class="sub-desc">child items are stretched vertically to
-     * the height of the largest item.</div></li>
-     */
-    align : 'top', // top, middle, stretch, strechmax
-    /**
-     * @cfg {String} pack
-     * Controls how the child items of the container are packed together. Acceptable configuration values
-     * for this property are:
-     * <div class="mdetail-params"><ul>
-     * <li><b><tt>start</tt></b> : <b>Default</b><div class="sub-desc">child items are packed together at
-     * <b>left</b> side of container</div></li>
-     * <li><b><tt>center</tt></b> : <div class="sub-desc">child items are packed together at
-     * <b>mid-width</b> of container</div></li>
-     * <li><b><tt>end</tt></b> : <div class="sub-desc">child items are packed together at <b>right</b>
-     * side of container</div></li>
-     * </ul></div>
-     */
-    /**
-     * @cfg {Number} flex
-     * This configuation option is to be applied to <b>child <tt>items</tt></b> of the container managed
-     * by this layout. Each child item with a <tt>flex</tt> property will be flexed <b>horizontally</b>
-     * according to each item's <b>relative</b> <tt>flex</tt> value compared to the sum of all items with
-     * a <tt>flex</tt> value specified.  Any child items that have either a <tt>flex = 0</tt> or
-     * <tt>flex = undefined</tt> will not be 'flexed' (the initial size will not be changed).
-     */
-
-    // private
-    onLayout : function(ct, target){
-        Ext.layout.HBoxLayout.superclass.onLayout.call(this, ct, target);
-
-        var cs = this.getItems(ct), cm, cw, margin, ch, diff,
-            size = target.getViewSize(true),
-            w = size.width - this.scrollOffset,
-            h = size.height,
-            l = this.padding.left, t = this.padding.top,
-            isStart = this.pack == 'start',
-            isRestore = ['stretch', 'stretchmax'].indexOf(this.align) == -1,
-            stretchHeight = h - (this.padding.top + this.padding.bottom),
-            extraWidth = 0,
-            maxHeight = 0,
-            totalFlex = 0,
-            flexWidth = 0,
-            usedWidth = 0;
-
-        Ext.each(cs, function(c){
-            cm = c.margins;
-            totalFlex += c.flex || 0;
-            cw = c.getWidth();
-            margin = cm.left + cm.right;
-            extraWidth += cw + margin;
-            flexWidth += margin + (c.flex ? 0 : cw);
-            maxHeight = Math.max(maxHeight, c.getHeight() + cm.top + cm.bottom);
-        });
-        extraWidth = w - extraWidth - this.padding.left - this.padding.right;
-
-        var innerCtHeight = maxHeight + this.padding.top + this.padding.bottom;
-        switch(this.align){
-            case 'stretch':
-                this.innerCt.setSize(w, h);
-                break;
-            case 'stretchmax':
-            case 'top':
-                this.innerCt.setSize(w, innerCtHeight);
-                break;
-            case 'middle':
-                this.innerCt.setSize(w, h = Math.max(h, innerCtHeight));
-                break;
-        }
-
-
-        var availWidth = Math.max(0, w - this.padding.left - this.padding.right - flexWidth),
-            leftOver = availWidth,
-            widths = [],
-            restore = [],
-            idx = 0,
-            availableHeight = Math.max(0, h - this.padding.top - this.padding.bottom);
-
-
-        Ext.each(cs, function(c){
-            if(isStart && c.flex){
-                cw = Math.floor(availWidth * (c.flex / totalFlex));
-                leftOver -= cw;
-                widths.push(cw);
-            }
-        });
-
-        if(this.pack == 'center'){
-            l += extraWidth ? extraWidth / 2 : 0;
-        }else if(this.pack == 'end'){
-            l += extraWidth;
-        }
-        Ext.each(cs, function(c){
-            cm = c.margins;
-            l += cm.left;
-            c.setPosition(l, t + cm.top);
-            if(isStart && c.flex){
-                cw = Math.max(0, widths[idx++] + (leftOver-- > 0 ? 1 : 0));
-                if(isRestore){
-                    restore.push(c.getHeight());
-                }
-                c.setSize(cw, availableHeight);
-            }else{
-                cw = c.getWidth();
-            }
-            l += cw + cm.right;
-        });
-
-        idx = 0;
-        Ext.each(cs, function(c){
-            cm = c.margins;
-            ch = c.getHeight();
-            if(isStart && c.flex){
-                ch = restore[idx++];
-            }
-            if(this.align == 'stretch'){
-                c.setHeight((stretchHeight - (cm.top + cm.bottom)).constrain(
-                    c.minHeight || 0, c.maxHeight || 1000000));
-            }else if(this.align == 'stretchmax'){
-                c.setHeight((maxHeight - (cm.top + cm.bottom)).constrain(
-                    c.minHeight || 0, c.maxHeight || 1000000));
-            }else{
-                if(this.align == 'middle'){
-                    diff = availableHeight - (ch + cm.top + cm.bottom);
-                    ch = t + cm.top + (diff/2);
-                    if(diff > 0){
-                        c.setPosition(c.x, ch);
-                    }
-                }
-                if(isStart && c.flex){
-                    c.setHeight(ch);
-                }
-            }
-        }, this);
-    }
-});
-
-Ext.Container.LAYOUTS.hbox = Ext.layout.HBoxLayout;
-/**\r
- * @class Ext.Viewport\r
- * @extends Ext.Container\r
- * <p>A specialized container representing the viewable application area (the browser viewport).</p>\r
- * <p>The Viewport renders itself to the document body, and automatically sizes itself to the size of\r
- * the browser viewport and manages window resizing. There may only be one Viewport created\r
- * in a page. Inner layouts are available by virtue of the fact that all {@link Ext.Panel Panel}s\r
- * added to the Viewport, either through its {@link #items}, or through the items, or the {@link #add}\r
- * method of any of its child Panels may themselves have a layout.</p>\r
- * <p>The Viewport does not provide scrolling, so child Panels within the Viewport should provide\r
- * for scrolling if needed using the {@link #autoScroll} config.</p>\r
- * <p>An example showing a classic application border layout:</p><pre><code>\r
-new Ext.Viewport({\r
-    layout: 'border',\r
-    items: [{\r
-        region: 'north',\r
-        html: '&lt;h1 class="x-panel-header">Page Title&lt;/h1>',\r
-        autoHeight: true,\r
-        border: false,\r
-        margins: '0 0 5 0'\r
-    }, {\r
-        region: 'west',\r
-        collapsible: true,\r
-        title: 'Navigation',\r
-        width: 200\r
-        // the west region might typically utilize a {@link Ext.tree.TreePanel TreePanel} or a Panel with {@link Ext.layout.AccordionLayout Accordion layout}\r
-    }, {\r
-        region: 'south',\r
-        title: 'Title for Panel',\r
-        collapsible: true,\r
-        html: 'Information goes here',\r
-        split: true,\r
-        height: 100,\r
-        minHeight: 100\r
-    }, {\r
-        region: 'east',\r
-        title: 'Title for the Grid Panel',\r
-        collapsible: true,\r
-        split: true,\r
-        width: 200,\r
-        xtype: 'grid',\r
-        // remaining grid configuration not shown ...\r
-        // notice that the GridPanel is added directly as the region\r
-        // it is not "overnested" inside another Panel\r
-    }, {\r
-        region: 'center',\r
-        xtype: 'tabpanel', // TabPanel itself has no title\r
-        items: {\r
-            title: 'Default Tab',\r
-            html: 'The first tab\'s content. Others may be added dynamically'\r
-        }\r
-    }]\r
-});\r
-</code></pre>\r
- * @constructor\r
- * Create a new Viewport\r
- * @param {Object} config The config object\r
- * @xtype viewport\r
- */\r
-Ext.Viewport = Ext.extend(Ext.Container, {\r
-    /*\r
-     * Privatize config options which, if used, would interfere with the\r
-     * correct operation of the Viewport as the sole manager of the\r
-     * layout of the document body.\r
-     */\r
-    /**\r
-     * @cfg {Mixed} applyTo @hide\r
-     */\r
-    /**\r
-     * @cfg {Boolean} allowDomMove @hide\r
-     */\r
-    /**\r
-     * @cfg {Boolean} hideParent @hide\r
-     */\r
-    /**\r
-     * @cfg {Mixed} renderTo @hide\r
-     */\r
-    /**\r
-     * @cfg {Boolean} hideParent @hide\r
-     */\r
-    /**\r
-     * @cfg {Number} height @hide\r
-     */\r
-    /**\r
-     * @cfg {Number} width @hide\r
-     */\r
-    /**\r
-     * @cfg {Boolean} autoHeight @hide\r
-     */\r
-    /**\r
-     * @cfg {Boolean} autoWidth @hide\r
-     */\r
-    /**\r
-     * @cfg {Boolean} deferHeight @hide\r
-     */\r
-    /**\r
-     * @cfg {Boolean} monitorResize @hide\r
-     */\r
-\r
-    initComponent : function() {\r
-        Ext.Viewport.superclass.initComponent.call(this);\r
-        document.getElementsByTagName('html')[0].className += ' x-viewport';\r
-        this.el = Ext.getBody();\r
-        this.el.setHeight = Ext.emptyFn;\r
-        this.el.setWidth = Ext.emptyFn;\r
-        this.el.setSize = Ext.emptyFn;\r
-        this.el.dom.scroll = 'no';\r
-        this.allowDomMove = false;\r
-        this.autoWidth = true;\r
-        this.autoHeight = true;\r
-        Ext.EventManager.onWindowResize(this.fireResize, this);\r
-        this.renderTo = this.el;\r
-    },\r
-\r
-    fireResize : function(w, h){\r
-        this.onResize(w, h, w, h);\r
-    }\r
-});\r
-Ext.reg('viewport', Ext.Viewport);\r
-/**
- * @class Ext.Panel
- * @extends Ext.Container
- * <p>Panel is a container that has specific functionality and structural components that make
- * it the perfect building block for application-oriented user interfaces.</p>
- * <p>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.</p>
- * <p>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 <code><b>{@link Ext.Container#layout layout}</b></code> 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 <b>does not apply any sizing</b>
- * at all.</p>
- * <p>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).</p>
- * <p>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}.</p>
- * @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.
-     * <p>This Element is used to house the {@link #title} and {@link #tools}</p>
-     * <br><p><b>Note</b>: see the Note for <code>{@link Ext.Component#el el}</code> also.</p>
-     * @type Ext.Element
-     * @property header
-     */
-    /**
-     * The Panel's body {@link Ext.Element Element} which may be used to contain HTML content.
-     * The content may be specified in the {@link #html} config, or it may be loaded using the
-     * {@link autoLoad} config, or through the Panel's {@link #getUpdater Updater}. Read-only.
-     * <p>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.</p>
-     * <p>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.
-     * <br><p><b>Note</b>: see the Note for <code>{@link Ext.Component#el el}</code> also.</p>
-     * @type Ext.Element
-     * @property body
-     */
-    /**
-     * The Panel's bwrap {@link Ext.Element Element} used to contain other Panel elements
-     * (tbar, body, bbar, footer). See {@link #bodyCfg}. Read-only.
-     * @type Ext.Element
-     * @property bwrap
-     */
-    /**
-     * True if this panel is collapsed. Read-only.
-     * @type Boolean
-     * @property collapsed
-     */
-    /**
-     * @cfg {Object} bodyCfg
-     * <p>A {@link Ext.DomHelper DomHelper} element specification object may be specified for any
-     * Panel Element.</p>
-     * <p>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 (<code>baseCls</code> will be
-     * replaced by <code>{@link #baseCls}</code>):</p>
-     * <pre>
-     * 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
-     * </pre>
-     * <p>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 &lt;center&gt;
-     * element:</p>
-     * <pre><code>
-new Ext.Panel({
-    title: 'Message Title',
-    renderTo: Ext.getBody(),
-    width: 200, height: 130,
-    <b>bodyCfg</b>: {
-        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}
-});
-     * </code></pre>
-     * <p>The example above also explicitly creates a <code>{@link #footer}</code> with custom markup and
-     * styling applied.</p>
-     */
-    /**
-     * @cfg {Object} headerCfg
-     * <p>A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure
-     * of this Panel's {@link #header} Element.  See <code>{@link #bodyCfg}</code> also.</p>
-     */
-    /**
-     * @cfg {Object} bwrapCfg
-     * <p>A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure
-     * of this Panel's {@link #bwrap} Element.  See <code>{@link #bodyCfg}</code> also.</p>
-     */
-    /**
-     * @cfg {Object} tbarCfg
-     * <p>A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure
-     * of this Panel's {@link #tbar} Element.  See <code>{@link #bodyCfg}</code> also.</p>
-     */
-    /**
-     * @cfg {Object} bbarCfg
-     * <p>A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure
-     * of this Panel's {@link #bbar} Element.  See <code>{@link #bodyCfg}</code> also.</p>
-     */
-    /**
-     * @cfg {Object} footerCfg
-     * <p>A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure
-     * of this Panel's {@link #footer} Element.  See <code>{@link #bodyCfg}</code> also.</p>
-     */
-    /**
-     * @cfg {Boolean} closable
-     * Panels themselves do not directly support being closed, but some Panel subclasses do (like
-     * {@link Ext.Window}) or a Panel Class within an {@link Ext.TabPanel}.  Specify <code>true</code>
-     * to enable closing in such situations. Defaults to <code>false</code>.
-     */
-    /**
-     * The Panel's footer {@link Ext.Element Element}. Read-only.
-     * <p>This Element is used to house the Panel's <code>{@link #buttons}</code> or <code>{@link #fbar}</code>.</p>
-     * <br><p><b>Note</b>: see the Note for <code>{@link Ext.Component#el el}</code> also.</p>
-     * @type Ext.Element
-     * @property footer
-     */
-    /**
-     * @cfg {Mixed} applyTo
-     * <p>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 <code>applyTo</code> 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.</p>
-     * <p>The following class names are supported (baseCls will be replaced by {@link #baseCls}):</p>
-     * <ul><li>baseCls + '-header'</li>
-     * <li>baseCls + '-header-text'</li>
-     * <li>baseCls + '-bwrap'</li>
-     * <li>baseCls + '-tbar'</li>
-     * <li>baseCls + '-body'</li>
-     * <li>baseCls + '-bbar'</li>
-     * <li>baseCls + '-footer'</li></ul>
-     * <p>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.</p>
-     */
-    /**
-     * @cfg {Object/Array} tbar
-     * <p>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}.</p>
-     * <p><b>Note:</b> Although a Toolbar may contain Field components, these will <b>not</b> 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 <b>will</b> be submitted because form
-     * submission parameters are collected from the DOM tree.</p>
-     */
-    /**
-     * @cfg {Object/Array} bbar
-     * <p>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}.</p>
-     * <p><b>Note:</b> Although a Toolbar may contain Field components, these will <b>not</b> 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 <b>will</b> be submitted because form
-     * submission parameters are collected from the DOM tree.</p>
-     */
-    /** @cfg {Object/Array} fbar
-     * <p>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.</p>
-     * <p>After render, the <code>fbar</code> property will be an {@link Ext.Toolbar Toolbar} instance.</p>
-     * <p>If <code>{@link #buttons}</code> are specified, they will supersede the <code>fbar</code> configuration property.</p>
-     * The Panel's <code>{@link #buttonAlign}</code> configuration affects the layout of these items, for example:
-     * <pre><code>
-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();
-     * </code></pre>
-     * <p><b>Note:</b> Although a Toolbar may contain Field components, these will <b>not</b> 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 <b>will</b> be submitted because form
-     * submission parameters are collected from the DOM tree.</p>
-     */
-    /**
-     * @cfg {Boolean} header
-     * <code>true</code> to create the Panel's header element explicitly, <code>false</code> to skip creating
-     * it.  If a <code>{@link #title}</code> is set the header will be created automatically, otherwise it will not.
-     * If a <code>{@link #title}</code> is set but <code>header</code> is explicitly set to <code>false</code>, the header
-     * will not be rendered.
-     */
-    /**
-     * @cfg {Boolean} footer
-     * <code>true</code> to create the footer element explicitly, false to skip creating it. The footer
-     * will be created automatically if <code>{@link #buttons}</code> or a <code>{@link #fbar}</code> have
-     * been configured.  See <code>{@link #bodyCfg}</code> for an example.
-     */
-    /**
-     * @cfg {String} title
-     * The title text to be used as innerHTML (html tags are accepted) to display in the panel
-     * <code>{@link #header}</code> (defaults to ''). When a <code>title</code> is specified the
-     * <code>{@link #header}</code> element will automatically be created and displayed unless
-     * {@link #header} is explicitly set to <code>false</code>.  If you do not want to specify a
-     * <code>title</code> at config time, but you may want one later, you must either specify a non-empty
-     * <code>title</code> (a blank space ' ' will do) or <code>header:true</code> so that the container
-     * element will get created.
-     */
-    /**
-     * @cfg {Array} buttons
-     * <code>buttons</code> will be used as <code>{@link Ext.Container#items items}</code> for the toolbar in
-     * the footer (<code>{@link #fbar}</code>). 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 <code>minWidth</code> or the Panel is configured with <code>minButtonWidth</code>,
-     * 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.<p>
-     * 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.</p>
-     */
-    /**
-     * @cfg {Boolean} frame
-     * <code>false</code> by default to render with plain 1px square borders. <code>true</code> to render with
-     * 9 elements, complete with custom rounded corners (also see {@link Ext.Element#boxWrap}).
-     * <p>The template generated for each condition is depicted below:</p><pre><code>
-     *
-// frame = false
-&lt;div id="developer-specified-id-goes-here" class="x-panel">
-
-    &lt;div class="x-panel-header">&lt;span class="x-panel-header-text">Title: (frame:false)&lt;/span>&lt;/div>
-
-    &lt;div class="x-panel-bwrap">
-        &lt;div class="x-panel-body">&lt;p>html value goes here&lt;/p>&lt;/div>
-    &lt;/div>
-&lt;/div>
-
-// frame = true (create 9 elements)
-&lt;div id="developer-specified-id-goes-here" class="x-panel">
-    &lt;div class="x-panel-tl">&lt;div class="x-panel-tr">&lt;div class="x-panel-tc">
-        &lt;div class="x-panel-header">&lt;span class="x-panel-header-text">Title: (frame:true)&lt;/span>&lt;/div>
-    &lt;/div>&lt;/div>&lt;/div>
-
-    &lt;div class="x-panel-bwrap">
-        &lt;div class="x-panel-ml">&lt;div class="x-panel-mr">&lt;div class="x-panel-mc">
-            &lt;div class="x-panel-body">&lt;p>html value goes here&lt;/p>&lt;/div>
-        &lt;/div>&lt;/div>&lt;/div>
-
-        &lt;div class="x-panel-bl">&lt;div class="x-panel-br">&lt;div class="x-panel-bc"/>
-        &lt;/div>&lt;/div>&lt;/div>
-&lt;/div>
-     * </code></pre>
-     */
-    /**
-     * @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 '').
-     * <p>An example of specifying a custom icon class would be something like:
-     * </p><pre><code>
-// 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; }
-</code></pre>
-     */
-    /**
-     * @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 <code><b></b>tools.<i>&lt;tool-type&gt;</i></code>
-     * <p>Each tool config may contain the following properties:
-     * <div class="mdetail-params"><ul>
-     * <li><b>id</b> : String<div class="sub-desc"><b>Required.</b> The type
-     * of tool to create. By default, this assigns a CSS class of the form <code>x-tool-<i>&lt;tool-type&gt;</i></code> 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:
-     * <ul>
-     * <div class="x-tool x-tool-toggle" style="float:left; margin-right:5;"> </div><div><code> toggle</code> (Created by default when {@link #collapsible} is <code>true</code>)</div>
-     * <div class="x-tool x-tool-close" style="float:left; margin-right:5;"> </div><div><code> close</code></div>
-     * <div class="x-tool x-tool-minimize" style="float:left; margin-right:5;"> </div><div><code> minimize</code></div>
-     * <div class="x-tool x-tool-maximize" style="float:left; margin-right:5;"> </div><div><code> maximize</code></div>
-     * <div class="x-tool x-tool-restore" style="float:left; margin-right:5;"> </div><div><code> restore</code></div>
-     * <div class="x-tool x-tool-gear" style="float:left; margin-right:5;"> </div><div><code> gear</code></div>
-     * <div class="x-tool x-tool-pin" style="float:left; margin-right:5;"> </div><div><code> pin</code></div>
-     * <div class="x-tool x-tool-unpin" style="float:left; margin-right:5;"> </div><div><code> unpin</code></div>
-     * <div class="x-tool x-tool-right" style="float:left; margin-right:5;"> </div><div><code> right</code></div>
-     * <div class="x-tool x-tool-left" style="float:left; margin-right:5;"> </div><div><code> left</code></div>
-     * <div class="x-tool x-tool-up" style="float:left; margin-right:5;"> </div><div><code> up</code></div>
-     * <div class="x-tool x-tool-down" style="float:left; margin-right:5;"> </div><div><code> down</code></div>
-     * <div class="x-tool x-tool-refresh" style="float:left; margin-right:5;"> </div><div><code> refresh</code></div>
-     * <div class="x-tool x-tool-minus" style="float:left; margin-right:5;"> </div><div><code> minus</code></div>
-     * <div class="x-tool x-tool-plus" style="float:left; margin-right:5;"> </div><div><code> plus</code></div>
-     * <div class="x-tool x-tool-help" style="float:left; margin-right:5;"> </div><div><code> help</code></div>
-     * <div class="x-tool x-tool-search" style="float:left; margin-right:5;"> </div><div><code> search</code></div>
-     * <div class="x-tool x-tool-save" style="float:left; margin-right:5;"> </div><div><code> save</code></div>
-     * <div class="x-tool x-tool-print" style="float:left; margin-right:5;"> </div><div><code> print</code></div>
-     * </ul></div></li>
-     * <li><b>handler</b> : Function<div class="sub-desc"><b>Required.</b> The function to
-     * call when clicked. Arguments passed are:<ul>
-     * <li><b>event</b> : Ext.EventObject<div class="sub-desc">The click event.</div></li>
-     * <li><b>toolEl</b> : Ext.Element<div class="sub-desc">The tool Element.</div></li>
-     * <li><b>panel</b> : Ext.Panel<div class="sub-desc">The host Panel</div></li>
-     * <li><b>tc</b> : Object<div class="sub-desc">The tool configuration object</div></li>
-     * </ul></div></li>
-     * <li><b>stopEvent</b> : Boolean<div class="sub-desc">Defaults to true. Specify as false to allow click event to propagate.</div></li>
-     * <li><b>scope</b> : Object<div class="sub-desc">The scope in which to call the handler.</div></li>
-     * <li><b>qtip</b> : String/Object<div class="sub-desc">A tip string, or
-     * a config argument to {@link Ext.QuickTip#register}</div></li>
-     * <li><b>hidden</b> : Boolean<div class="sub-desc">True to initially render hidden.</div></li>
-     * <li><b>on</b> : Object<div class="sub-desc">A listener config object specifiying
-     * event listeners in the format of an argument to {@link #addListener}</div></li>
-     * </ul></div>
-     * <p>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.</p>
-     * <p>Example usage:</p>
-     * <pre><code>
-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
-    }
-}]
-</code></pre>
-     * <p>For the custom id of <code>'help'</code> define two relevant css classes with a link to
-     * a 15x15 image:</p>
-     * <pre><code>
-.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;}
-</code></pre>
-     */
-    /**
-     * @cfg {Ext.Template/Ext.XTemplate} toolTemplate
-     * <p>A Template used to create {@link #tools} in the {@link #header} Element. Defaults to:</p><pre><code>
-new Ext.Template('&lt;div class="x-tool x-tool-{id}">&amp;#160;&lt;/div>')</code></pre>
-     * <p>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 &lt;a> tag is used to provide a
-     * visual indication when hovering over the tool:</p><pre><code>
-var win = new Ext.Window({
-    tools: [{
-        id: 'download',
-        href: '/MyPdfDoc.pdf'
-    }],
-    toolTemplate: new Ext.XTemplate(
-        '&lt;tpl if="id==\'download\'">',
-            '&lt;a class="x-tool x-tool-pdf" href="{href}">&lt;/a>',
-        '&lt;/tpl>',
-        '&lt;tpl if="id!=\'download\'">',
-            '&lt;div class="x-tool x-tool-{id}">&amp;#160;&lt;/div>',
-        '&lt;/tpl>'
-    ),
-    width:500,
-    height:300,
-    closeAction:'hide'
-});</code></pre>
-     * <p>Note that the CSS class 'x-tool-pdf' should have an associated style rule which provides an
-     * appropriate background image, something like:</p>
-    <pre><code>
-    a.x-tool-pdf {background-image: url(../shared/extjs/images/pdf.gif)!important;}
-    </code></pre>
-     */
-    /**
-     * @cfg {Boolean} hideCollapseTool
-     * <code>true</code> to hide the expand/collapse toggle button when <code>{@link #collapsible} == true</code>,
-     * <code>false</code> to display it (defaults to <code>false</code>).
-     */
-    /**
-     * @cfg {Boolean} titleCollapse
-     * <code>true</code> to allow expanding and collapsing the panel (when <code>{@link #collapsible} = true</code>)
-     * by clicking anywhere in the header bar, <code>false</code>) to allow it only by clicking to tool button
-     * (defaults to <code>false</code>)). If this panel is a child item of a border layout also see the
-     * {@link Ext.layout.BorderLayout.Region BorderLayout.Region}
-     * <code>{@link Ext.layout.BorderLayout.Region#floatable floatable}</code> config option.
-     */
-
-    /**
-     * @cfg {Mixed} floating
-     * <p>This property is used to configure the underlying {@link Ext.Layer}. Acceptable values for this
-     * configuration property are:</p><div class="mdetail-params"><ul>
-     * <li><b><code>false</code></b> : <b>Default.</b><div class="sub-desc">Display the panel inline where it is
-     * rendered.</div></li>
-     * <li><b><code>true</code></b> : <div class="sub-desc">Float the panel (absolute position it with automatic
-     * shimming and shadow).<ul>
-     * <div class="sub-desc">Setting floating to true will create an Ext.Layer for this panel and display the
-     * panel at negative offsets so that it is hidden.</div>
-     * <div class="sub-desc">Since the panel will be absolute positioned, the position must be set explicitly
-     * <i>after</i> render (e.g., <code>myPanel.setPosition(100,100);</code>).</div>
-     * <div class="sub-desc"><b>Note</b>: when floating a panel you should always assign a fixed width,
-     * otherwise it will be auto width and will expand to fill to the right edge of the viewport.</div>
-     * </ul></div></li>
-     * <li><b><code>{@link Ext.Layer object}</code></b> : <div class="sub-desc">The specified object will be used
-     * as the configuration object for the {@link Ext.Layer} that will be created.</div></li>
-     * </ul></div>
-     */
-    /**
-     * @cfg {Boolean/String} shadow
-     * <code>true</code> (or a valid Ext.Shadow {@link Ext.Shadow#mode} value) to display a shadow behind the
-     * panel, <code>false</code> to display no shadow (defaults to <code>'sides'</code>).  Note that this option
-     * only applies when <code>{@link #floating} = true</code>.
-     */
-    /**
-     * @cfg {Number} shadowOffset
-     * The number of pixels to offset the shadow if displayed (defaults to <code>4</code>). Note that this
-     * option only applies when <code>{@link #floating} = true</code>.
-     */
-    /**
-     * @cfg {Boolean} shim
-     * <code>false</code> to disable the iframe shim in browsers which need one (defaults to <code>true</code>).
-     * Note that this option only applies when <code>{@link #floating} = true</code>.
-     */
-    /**
-     * @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 <code>null</code>).
-     */
-    /**
-     * @cfg {Boolean/Object} draggable
-     * <p><code>true</code> to enable dragging of this Panel (defaults to <code>false</code>).</p>
-     * <p>For custom drag/drop implementations, an <b>Ext.Panel.DD</b> config could also be passed
-     * in this config instead of <code>true</code>. 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.:
-     * <pre><code>
-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&#39;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();
-</code></pre>
-     */
-    /**
-     * @cfg {Boolean} disabled
-     * Render this panel disabled (default is <code>false</code>). 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:
-     * <pre><code>
-new Ext.Panel({
-    ...
-    listeners: {
-        'afterlayout': {
-            fn: function(p){
-                p.disable();
-            },
-            single: true // important, as many layouts can occur
-        }
-    }
-});
-</code></pre>
-     */
-    /**
-     * @cfg {Boolean} autoHeight
-     * <code>true</code> to use height:'auto', <code>false</code> to use fixed height (defaults to <code>false</code>).
-     * <b>Note</b>: Setting <code>autoHeight: true</code> 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 (<code>fit</code>, <code>border</code>, etc.) then setting <code>autoHeight: true</code>
-     * 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 <code>'x-panel'</code>).
-     * <p>Another option available by default is to specify <code>'x-plain'</code> which strips all styling
-     * except for required attributes for Ext layouts to function (e.g. overflow:hidden).
-     * See <code>{@link #unstyled}</code> also.</p>
-     */
-    baseCls : 'x-panel',
-    /**
-     * @cfg {String} collapsedCls
-     * A CSS class to add to the panel's element after it has been collapsed (defaults to
-     * <code>'x-panel-collapsed'</code>).
-     */
-    collapsedCls : 'x-panel-collapsed',
-    /**
-     * @cfg {Boolean} maskDisabled
-     * <code>true</code> to mask the panel when it is {@link #disabled}, <code>false</code> to not mask it (defaults
-     * to <code>true</code>).  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
-     * <code>true</code> to animate the transition when the panel is collapsed, <code>false</code> to skip the
-     * animation (defaults to <code>true</code> if the {@link Ext.Fx} class is available, otherwise <code>false</code>).
-     */
-    animCollapse : Ext.enableFx,
-    /**
-     * @cfg {Boolean} headerAsText
-     * <code>true</code> to display the panel <code>{@link #title}</code> in the <code>{@link #header}</code>,
-     * <code>false</code> to hide it (defaults to <code>true</code>).
-     */
-    headerAsText : true,
-    /**
-     * @cfg {String} buttonAlign
-     * The alignment of any {@link #buttons} added to this panel.  Valid values are <code>'right'</code>,
-     * <code>'left'</code> and <code>'center'</code> (defaults to <code>'right'</code>).
-     */
-    buttonAlign : 'right',
-    /**
-     * @cfg {Boolean} collapsed
-     * <code>true</code> to render the panel collapsed, <code>false</code> to render it expanded (defaults to
-     * <code>false</code>).
-     */
-    collapsed : false,
-    /**
-     * @cfg {Boolean} collapseFirst
-     * <code>true</code> to make sure the collapse/expand toggle button always renders first (to the left of)
-     * any other tools in the panel's title bar, <code>false</code> to render it last (defaults to <code>true</code>).
-     */
-    collapseFirst : true,
-    /**
-     * @cfg {Number} minButtonWidth
-     * Minimum width in pixels of all {@link #buttons} in this panel (defaults to <code>75</code>)
-     */
-    minButtonWidth : 75,
-    /**
-     * @cfg {Boolean} unstyled
-     * Overrides the <code>{@link #baseCls}</code> setting to <code>{@link #baseCls} = 'x-plain'</code> 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 are<div class="mdetail-params"><ul>
-     * <li><code>header</code></li>
-     * <li><code>tbar</code> (top bar)</li>
-     * <li><code>body</code></li>
-     * <li><code>bbar</code> (bottom bar)</li>
-     * <li><code>footer</code></li>
-     * </ul></div>
-     * Defaults to '<code>body</code>'.
-     */
-    elements : 'body',
-    /**
-     * @cfg {Boolean} preventBodyReset
-     * Defaults to <code>false</code>.  When set to <code>true</code>, an extra css class <code>'x-panel-normal'</code>
-     * 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 <b>body</b> 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 <tt>undefined</tt>.
-     *
-     */
-    padding: undefined,
-
-    /** @cfg {String} resizeEvent
-     * The event to listen to for resizing in layouts. Defaults to <tt>'bodyresize'</tt>.
-     */
-    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 <code>{@link #buttons}</code>
-         * 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 =
-                    '<span class="' + this.headerTextCls + '">'+this.header.dom.innerHTML+'</span>';
-
-                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 (<code>{@link #tbar}</code>) section of the panel.
-     * @return {Ext.Toolbar} The toolbar
-     */
-    getTopToolbar : function(){
-        return this.topToolbar;
-    },
-
-    /**
-     * Returns the {@link Ext.Toolbar toolbar} from the bottom (<code>{@link #bbar}</code>) 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 (<code>this</code> 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(
-                 '<div class="x-tool x-tool-{id}">&#160;</div>'
-            );
-            tt.disableFormats = true;
-            tt.compile();
-            Ext.Panel.prototype.toolTemplate = tt;
-        }
-        for(var i = 0, a = arguments, len = a.length; i < len; i++) {
-            var tc = a[i];
-            if(!this.tools[tc.id]){
-                var overCls = 'x-tool-'+tc.id+'-over';
-                var t = this.toolTemplate.insertFirst((tc.align !== 'left') ? this[this.toolTarget] : this[this.toolTarget].child('span'), tc, true);
-                this.tools[tc.id] = t;
-                t.enableDisplayMode('block');
-                this.mon(t, 'click',  this.createToolHandler(t, tc, overCls, this));
-                if(tc.on){
-                    this.mon(t, tc.on);
-                }
-                if(tc.hidden){
-                    t.hide();
-                }
-                if(tc.qtip){
-                    if(Ext.isObject(tc.qtip)){
-                        Ext.QuickTips.register(Ext.apply({
-                              target: t.id
-                        }, tc.qtip));
-                    } else {
-                        t.dom.qtip = tc.qtip;
-                    }
-                }
-                t.addClassOnOver(overCls);
-            }
-        }
-    },
-
-    onLayout : function(shallow, force){
-        if(this.hasLayout && this.toolbars.length > 0){
-            Ext.each(this.toolbars, function(tb){
-                tb.doLayout(undefined, force);
-            });
-            this.syncHeight();
-        }
-    },
-
-    syncHeight : function(){
-        var h = this.toolbarHeight,
-                bd = this.body,
-                lsh = this.lastSize.height,
-                sz;
-
-        if(this.autoHeight || !Ext.isDefined(lsh) || lsh == 'auto'){
-            return;
-        }
-
-
-        if(h != this.getToolbarHeight()){
-            h = Math.max(0, this.adjustBodyHeight(lsh - this.getFrameHeight()));
-            bd.setHeight(h);
-            sz = bd.getSize();
-            this.toolbarHeight = this.getToolbarHeight();
-            this.onBodyResize(sz.width, sz.height);
-        }
-    },
-
-    // private
-    onShow : function(){
-        if(this.floating){
-            return this.el.show();
-        }
-        Ext.Panel.superclass.onShow.call(this);
-    },
-
-    // private
-    onHide : function(){
-        if(this.floating){
-            return this.el.hide();
-        }
-        Ext.Panel.superclass.onHide.call(this);
-    },
-
-    // private
-    createToolHandler : function(t, tc, overCls, panel){
-        return function(e){
-            t.removeClass(overCls);
-            if(tc.stopEvent !== false){
-                e.stopEvent();
-            }
-            if(tc.handler){
-                tc.handler.call(tc.scope || t, e, t, panel, tc);
-            }
-        };
-    },
-
-    // private    
-    afterRender : function(){
-        if(this.floating && !this.hidden){
-            this.el.show();
-        }
-        if(this.title){
-            this.setTitle(this.title);
-        }
-        if(this.collapsed){
-            this.collapsed = false;
-            this.collapse(false);
-        }
-        Ext.Panel.superclass.afterRender.call(this); // do sizing calcs last
-        this.initEvents();
-    },    
-
-    // private
-    getKeyMap : function(){
-        if(!this.keyMap){
-            this.keyMap = new Ext.KeyMap(this.el, this.keys);
-        }
-        return this.keyMap;
-    },
-
-    // private
-    initEvents : function(){
-        if(this.keys){
-            this.getKeyMap();
-        }
-        if(this.draggable){
-            this.initDraggable();
-        }
-        if(this.toolbars.length > 0){
-            Ext.each(this.toolbars, function(tb){
-                tb.doLayout();
-                tb.on({
-                    scope: this,
-                    afterlayout: this.syncHeight,
-                    remove: this.syncHeight
-                });
-            }, this);
-            if(!this.ownerCt){
-                this.syncHeight();
-            }
-        }
-
-    },
-
-    // private
-    initDraggable : function(){
-        /**
-         * <p>If this Panel is configured {@link #draggable}, this property will contain
-         * an instance of {@link Ext.dd.DragSource} which handles dragging the Panel.</p>
-         * 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;
-    },
-
-    /**
-     * <p>Sets the title text for the panel and optionally the {@link #iconCls icon class}.</p>
-     * <p>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 <code>{@link #title}</code>,
-     * or configuring it with <code><b>{@link #header}: true</b></code>.</p>
-     * @param {String} title The title text to set
-     * @param {String} iconCls (optional) {@link #iconCls iconCls} A user-defined CSS class that provides the icon image for this panel
-     */
-    setTitle : function(title, iconCls){
-        this.title = title;
-        if(this.header && this.headerAsText){
-            this.header.child('span').update(title);
-        }
-        if(iconCls){
-            this.setIconClass(iconCls);
-        }
-        this.fireEvent('titlechange', this, title);
-        return this;
-    },
-
-    /**
-     * Get the {@link Ext.Updater} for this panel. Enables you to perform Ajax updates of this panel's body.
-     * @return {Ext.Updater} The Updater
-     */
-    getUpdater : function(){
-        return this.body.getUpdater();
-    },
-
-     /**
-     * Loads this content panel immediately with content returned from an XHR call.
-     * @param {Object/String/Function} config A config object containing any of the following options:
-<pre><code>
-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
-});
-</code></pre>
-     * 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 <tt>false</tt>.
-     */
-    /**
-     * @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 <tt>[0, 0]</tt>.
-     */
-    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 <tt>true</tt>.
-     */
-    completeOnEnter : true,
-    /**
-     * @cfg {Boolean} cancelOnEsc True to cancel the edit when the escape key is pressed. Defaults to <tt>true</tt>.
-     */
-    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.<br />
- * Here's an example of typical usage:
- * <pre><code>
-var cp = new Ext.ColorPalette({value:'993300'});  // initial selected color
-cp.render('my-div');
-
-cp.on('select', function(palette, selColor){
-    // do something with selColor
-});
-</code></pre>
- * @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 <tt>'click'</tt>.
-     */
-    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,
-
-    /**
-     * <p>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.</p>
-     * <p>You can override individual colors if needed:</p>
-     * <pre><code>
-var cp = new Ext.ColorPalette();
-cp.colors[0] = 'FF0000';  // change the first box to red
-</code></pre>
-
-Or you can provide a custom array of your own for complete control:
-<pre><code>
-var cp = new Ext.ColorPalette();
-cp.colors = ['000000', '993300', '333300'];
-</code></pre>
-     * @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:<div class="mdetail-params"><ul>
-     * <li><code>palette</code> : ColorPalette<div class="sub-desc">The {@link #palette Ext.ColorPalette}.</div></li>
-     * <li><code>color</code> : String<div class="sub-desc">The 6-digit color hex code (without the # symbol).</div></li>
-     * </ul></div>
-     */
-    /**
-     * @cfg {Object} scope
-     * The scope (<tt><b>this</b></tt> reference) in which the <code>{@link #handler}</code>
-     * 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(
-            '<tpl for="."><a href="#" class="color-{.}" hidefocus="on"><em><span style="background:#{.}" unselectable="on">&#160;</span></em></a></tpl>'
-        );
-        t.overwrite(this.el, this.colors);
-        this.mon(this.el, this.clickEvent, this.handleClick, this, {delegate: 'a'});
-        if(this.clickEvent != 'click'){
-               this.mon(this.el, 'click', Ext.emptyFn, this, {delegate: 'a', preventDefault: true});
-        }
-    },
-
-    // private
-    afterRender : function(){
-        Ext.ColorPalette.superclass.afterRender.call(this);
-        if(this.value){
-            var s = this.value;
-            this.value = null;
-            this.select(s);
-        }
-    },
-
-    // private
-    handleClick : function(e, t){
-        e.preventDefault();
-        if(!this.disabled){
-            var c = t.className.match(/(?:^|\s)color-(.{6})(?:\s|$)/)[1];
-            this.select(c.toUpperCase());
-        }
-    },
-
-    /**
-     * Selects the specified color in the palette (fires the {@link #select} event)
-     * @param {String} color A valid 6-digit color hex code (# will be stripped if included)
-     */
-    select : function(color){
-        color = color.replace('#', '');
-        if(color != this.value || this.allowReselect){
-            var el = this.el;
-            if(this.value){
-                el.child('a.color-'+this.value).removeClass('x-color-palette-sel');
-            }
-            el.child('a.color-'+color).addClass('x-color-palette-sel');
-            this.value = color;
-            this.fireEvent('select', this, color);
-        }
-    }
-
-    /**
-     * @cfg {String} autoEl @hide
-     */
-});
-Ext.reg('colorpalette', Ext.ColorPalette);
-/**
- * @class Ext.DatePicker
- * @extends Ext.Component
- * <p>A popup date picker. This class is used by the {@link Ext.form.DateField DateField} class
- * to allow browsing and selection of valid dates.</p>
- * <p>All the string values documented below may be overridden by including an Ext locale file in
- * your page.</p>
- * @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 <code>'Today'</code>)
-     */
-    todayText : 'Today',
-    /**
-     * @cfg {String} okText
-     * The text to display on the ok button (defaults to <code>'&#160;OK&#160;'</code> to give the user extra clicking room)
-     */
-    okText : '&#160;OK&#160;',
-    /**
-     * @cfg {String} cancelText
-     * The text to display on the cancel button (defaults to <code>'Cancel'</code>)
-     */
-    cancelText : 'Cancel',
-    /**
-     * @cfg {Function} handler
-     * Optional. A function that will handle the select event of this picker.
-     * The handler is passed the following parameters:<div class="mdetail-params"><ul>
-     * <li><code>picker</code> : DatePicker<div class="sub-desc">This DatePicker.</div></li>
-     * <li><code>date</code> : Date<div class="sub-desc">The selected date.</div></li>
-     * </ul></div>
-     */
-    /**
-     * @cfg {Object} scope
-     * The scope (<code><b>this</b></code> reference) in which the <code>{@link #handler}</code>
-     * 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 <code>'{0} (Spacebar)'</code> where
-     * the <code>{0}</code> 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 <code>'This date is before the minimum date'</code>)
-     */
-    minText : 'This date is before the minimum date',
-    /**
-     * @cfg {String} maxText
-     * The error text to display if the maxDate validation fails (defaults to <code>'This date is after the maximum date'</code>)
-     */
-    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 <code>'m/d/y'</code>).
-     */
-    format : 'm/d/y',
-    /**
-     * @cfg {String} disabledDaysText
-     * The tooltip to display when the date falls on a disabled day (defaults to <code>'Disabled'</code>)
-     */
-    disabledDaysText : 'Disabled',
-    /**
-     * @cfg {String} disabledDatesText
-     * The tooltip text to display when the date falls on a disabled date (defaults to <code>'Disabled'</code>)
-     */
-    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 <code>'Next Month (Control+Right)'</code>)
-     */
-    nextText : 'Next Month (Control+Right)',
-    /**
-     * @cfg {String} prevText
-     * The previous month navigation button tooltip (defaults to <code>'Previous Month (Control+Left)'</code>)
-     */
-    prevText : 'Previous Month (Control+Left)',
-    /**
-     * @cfg {String} monthYearText
-     * The header month selector tooltip (defaults to <code>'Choose a month (Control+Up/Down to move years)'</code>)
-     */
-    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 <code>true</code>).
-     */
-    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:
-     * <ul>
-     * <li>['03/08/2003', '09/16/2003'] would disable those exact dates</li>
-     * <li>['03/08', '09/16'] would disable those days for every year</li>
-     * <li>['^03/08'] would only match the beginning (useful if you are using short years)</li>
-     * <li>['03/../2006'] would disable every day in March 2006</li>
-     * <li>['^03'] would disable every day in every March</li>
-     * </ul>
-     * Note that the format of the dates included in the array should exactly match the {@link #format} config.
-     * In order to support regular expressions, if you are using a date format that has '.' in it, you will have to
-     * escape the dot when restricting dates. For example: ['03\\.08\\.03'].
-     */
-    
-    // private
-    // Set by other components to stop the picker focus being updated when the value changes.
-    focusOnSelect: true,
-
-    // private
-    initComponent : function(){
-        Ext.DatePicker.superclass.initComponent.call(this);
-
-        this.value = this.value ?
-                 this.value.clearTime(true) : new Date().clearTime();
-
-        this.addEvents(
-            /**
-             * @event select
-             * Fires when a date is selected
-             * @param {DatePicker} this DatePicker
-             * @param {Date} date The selected date
-             */
-            'select'
-        );
-
-        if(this.handler){
-            this.on('select', this.handler,  this.scope || this);
-        }
-
-        this.initDisabledDays();
-    },
-
-    // private
-    initDisabledDays : function(){
-        if(!this.disabledDatesRE && this.disabledDates){
-            var dd = this.disabledDates,
-                len = dd.length - 1,
-                re = '(?:';
-                
-            Ext.each(dd, function(d, i){
-                re += Ext.isDate(d) ? '^' + Ext.escapeRe(d.dateFormat(this.format)) + '$' : dd[i];
-                if(i != len){
-                    re += '|';
-                }
-            }, this);
-            this.disabledDatesRE = new RegExp(re + ')');
-        }
-    },
-
-    /**
-     * Replaces any existing disabled dates with new values and refreshes the DatePicker.
-     * @param {Array/RegExp} disabledDates An array of date strings (see the {@link #disabledDates} config
-     * for details on supported values), or a JavaScript regular expression used to disable a pattern of dates.
-     */
-    setDisabledDates : function(dd){
-        if(Ext.isArray(dd)){
-            this.disabledDates = dd;
-            this.disabledDatesRE = null;
-        }else{
-            this.disabledDatesRE = dd;
-        }
-        this.initDisabledDays();
-        this.update(this.value, true);
-    },
-
-    /**
-     * Replaces any existing disabled days (by index, 0-6) with new values and refreshes the DatePicker.
-     * @param {Array} disabledDays An array of disabled day indexes. See the {@link #disabledDays} config
-     * for details on supported values.
-     */
-    setDisabledDays : function(dd){
-        this.disabledDays = dd;
-        this.update(this.value, true);
-    },
-
-    /**
-     * Replaces any existing {@link #minDate} with the new value and refreshes the DatePicker.
-     * @param {Date} value The minimum date that can be selected
-     */
-    setMinDate : function(dt){
-        this.minDate = dt;
-        this.update(this.value, true);
-    },
-
-    /**
-     * Replaces any existing {@link #maxDate} with the new value and refreshes the DatePicker.
-     * @param {Date} value The maximum date that can be selected
-     */
-    setMaxDate : function(dt){
-        this.maxDate = dt;
-        this.update(this.value, true);
-    },
-
-    /**
-     * Sets the value of the date field
-     * @param {Date} value The date to set
-     */
-    setValue : function(value){
-        this.value = value.clearTime(true);
-        this.update(this.value);
-    },
-
-    /**
-     * Gets the current selected value of the date field
-     * @return {Date} The selected date
-     */
-    getValue : function(){
-        return this.value;
-    },
-
-    // private
-    focus : function(){
-        this.update(this.activeDate);
-    },
-    
-    // private
-    onEnable: function(initial){
-        Ext.DatePicker.superclass.onEnable.call(this);    
-        this.doDisabled(false);
-        this.update(initial ? this.value : this.activeDate);
-        if(Ext.isIE){
-            this.el.repaint();
-        }
-        
-    },
-    
-    // private
-    onDisable : function(){
-        Ext.DatePicker.superclass.onDisable.call(this);   
-        this.doDisabled(true);
-        if(Ext.isIE && !Ext.isIE8){
-            /* Really strange problem in IE6/7, when disabled, have to explicitly
-             * repaint each of the nodes to get them to display correctly, simply
-             * calling repaint on the main element doesn't appear to be enough.
-             */
-             Ext.each([].concat(this.textNodes, this.el.query('th span')), function(el){
-                 Ext.fly(el).repaint();
-             });
-        }
-    },
-    
-    // private
-    doDisabled : function(disabled){
-        this.keyNav.setDisabled(disabled);
-        this.prevRepeater.setDisabled(disabled);
-        this.nextRepeater.setDisabled(disabled);
-        if(this.showToday){
-            this.todayKeyListener.setDisabled(disabled);
-            this.todayBtn.setDisabled(disabled);
-        }
-    },
-
-    // private
-    onRender : function(container, position){
-        var m = [
-             '<table cellspacing="0">',
-                '<tr><td class="x-date-left"><a href="#" title="', this.prevText ,'">&#160;</a></td><td class="x-date-middle" align="center"></td><td class="x-date-right"><a href="#" title="', this.nextText ,'">&#160;</a></td></tr>',
-                '<tr><td colspan="3"><table class="x-date-inner" cellspacing="0"><thead><tr>'],
-                dn = this.dayNames,
-                i;
-        for(i = 0; i < 7; i++){
-            var d = this.startDay+i;
-            if(d > 6){
-                d = d-7;
-            }
-            m.push('<th><span>', dn[d].substr(0,1), '</span></th>');
-        }
-        m[m.length] = '</tr></thead><tbody><tr>';
-        for(i = 0; i < 42; i++) {
-            if(i % 7 === 0 && i !== 0){
-                m[m.length] = '</tr><tr>';
-            }
-            m[m.length] = '<td><a href="#" hidefocus="on" class="x-date-date" tabIndex="1"><em><span></span></em></a></td>';
-        }
-        m.push('</tr></tbody></table></td></tr>',
-                this.showToday ? '<tr><td colspan="3" class="x-date-bottom" align="center"></td></tr>' : '',
-                '</table><div class="x-date-mp"></div>');
-
-        var el = document.createElement('div');
-        el.className = 'x-date-picker';
-        el.innerHTML = m.join('');
-
-        container.dom.insertBefore(el, position);
-
-        this.el = Ext.get(el);
-        this.eventEl = Ext.get(el.firstChild);
-
-        this.prevRepeater = new Ext.util.ClickRepeater(this.el.child('td.x-date-left a'), {
-            handler: this.showPrevMonth,
-            scope: this,
-            preventDefault:true,
-            stopDefault:true
-        });
-
-        this.nextRepeater = new Ext.util.ClickRepeater(this.el.child('td.x-date-right a'), {
-            handler: this.showNextMonth,
-            scope: this,
-            preventDefault:true,
-            stopDefault:true
-        });
-
-        this.monthPicker = this.el.down('div.x-date-mp');
-        this.monthPicker.enableDisplayMode('block');
-
-        this.keyNav = new Ext.KeyNav(this.eventEl, {
-            'left' : function(e){
-                if(e.ctrlKey){
-                    this.showPrevMonth();
-                }else{
-                    this.update(this.activeDate.add('d', -1));    
-                }
-            },
-
-            'right' : function(e){
-                if(e.ctrlKey){
-                    this.showNextMonth();
-                }else{
-                    this.update(this.activeDate.add('d', 1));    
-                }
-            },
-
-            'up' : function(e){
-                if(e.ctrlKey){
-                    this.showNextYear();
-                }else{
-                    this.update(this.activeDate.add('d', -7));
-                }
-            },
-
-            'down' : function(e){
-                if(e.ctrlKey){
-                    this.showPrevYear();
-                }else{
-                    this.update(this.activeDate.add('d', 7));
-                }
-            },
-
-            'pageUp' : function(e){
-                this.showNextMonth();
-            },
-
-            'pageDown' : function(e){
-                this.showPrevMonth();
-            },
-
-            'enter' : function(e){
-                e.stopPropagation();
-                return true;
-            },
-
-            scope : this
-        });
-
-        this.el.unselectable();
-
-        this.cells = this.el.select('table.x-date-inner tbody td');
-        this.textNodes = this.el.query('table.x-date-inner tbody span');
-
-        this.mbtn = new Ext.Button({
-            text: '&#160;',
-            tooltip: this.monthYearText,
-            renderTo: this.el.child('td.x-date-middle', true)
-        });
-        this.mbtn.el.child('em').addClass('x-btn-arrow');
-
-        if(this.showToday){
-            this.todayKeyListener = this.eventEl.addKeyListener(Ext.EventObject.SPACE, this.selectToday,  this);
-            var today = (new Date()).dateFormat(this.format);
-            this.todayBtn = new Ext.Button({
-                renderTo: this.el.child('td.x-date-bottom', true),
-                text: String.format(this.todayText, today),
-                tooltip: String.format(this.todayTip, today),
-                handler: this.selectToday,
-                scope: this
-            });
-        }
-        this.mon(this.eventEl, 'mousewheel', this.handleMouseWheel, this);
-        this.mon(this.eventEl, 'click', this.handleDateClick,  this, {delegate: 'a.x-date-date'});
-        this.mon(this.mbtn, 'click', this.showMonthPicker, this);
-        this.onEnable(true);
-    },
-
-    // private
-    createMonthPicker : function(){
-        if(!this.monthPicker.dom.firstChild){
-            var buf = ['<table border="0" cellspacing="0">'];
-            for(var i = 0; i < 6; i++){
-                buf.push(
-                    '<tr><td class="x-date-mp-month"><a href="#">', Date.getShortMonthName(i), '</a></td>',
-                    '<td class="x-date-mp-month x-date-mp-sep"><a href="#">', Date.getShortMonthName(i + 6), '</a></td>',
-                    i === 0 ?
-                    '<td class="x-date-mp-ybtn" align="center"><a class="x-date-mp-prev"></a></td><td class="x-date-mp-ybtn" align="center"><a class="x-date-mp-next"></a></td></tr>' :
-                    '<td class="x-date-mp-year"><a href="#"></a></td><td class="x-date-mp-year"><a href="#"></a></td></tr>'
-                );
-            }
-            buf.push(
-                '<tr class="x-date-mp-btns"><td colspan="4"><button type="button" class="x-date-mp-ok">',
-                    this.okText,
-                    '</button><button type="button" class="x-date-mp-cancel">',
-                    this.cancelText,
-                    '</button></td></tr>',
-                '</table>'
-            );
-            this.monthPicker.update(buf.join(''));
-
-            this.mon(this.monthPicker, 'click', this.onMonthClick, this);
-            this.mon(this.monthPicker, 'dblclick', this.onMonthDblClick, this);
-
-            this.mpMonths = this.monthPicker.select('td.x-date-mp-month');
-            this.mpYears = this.monthPicker.select('td.x-date-mp-year');
-
-            this.mpMonths.each(function(m, a, i){
-                i += 1;
-                if((i%2) === 0){
-                    m.dom.xmonth = 5 + Math.round(i * 0.5);
-                }else{
-                    m.dom.xmonth = Math.round((i-1) * 0.5);
-                }
-            });
-        }
-    },
-
-    // private
-    showMonthPicker : function(){
-        if(!this.disabled){
-            this.createMonthPicker();
-            var size = this.el.getSize();
-            this.monthPicker.setSize(size);
-            this.monthPicker.child('table').setSize(size);
-
-            this.mpSelMonth = (this.activeDate || this.value).getMonth();
-            this.updateMPMonth(this.mpSelMonth);
-            this.mpSelYear = (this.activeDate || this.value).getFullYear();
-            this.updateMPYear(this.mpSelYear);
-
-            this.monthPicker.slideIn('t', {duration:0.2});
-        }
-    },
-
-    // private
-    updateMPYear : function(y){
-        this.mpyear = y;
-        var ys = this.mpYears.elements;
-        for(var i = 1; i <= 10; i++){
-            var td = ys[i-1], y2;
-            if((i%2) === 0){
-                y2 = y + Math.round(i * 0.5);
-                td.firstChild.innerHTML = y2;
-                td.xyear = y2;
-            }else{
-                y2 = y - (5-Math.round(i * 0.5));
-                td.firstChild.innerHTML = y2;
-                td.xyear = y2;
-            }
-            this.mpYears.item(i-1)[y2 == this.mpSelYear ? 'addClass' : 'removeClass']('x-date-mp-sel');
-        }
-    },
-
-    // private
-    updateMPMonth : function(sm){
-        this.mpMonths.each(function(m, a, i){
-            m[m.dom.xmonth == sm ? 'addClass' : 'removeClass']('x-date-mp-sel');
-        });
-    },
-
-    // private
-    selectMPMonth : function(m){
-
-    },
-
-    // private
-    onMonthClick : function(e, t){
-        e.stopEvent();
-        var el = new Ext.Element(t), pn;
-        if(el.is('button.x-date-mp-cancel')){
-            this.hideMonthPicker();
-        }
-        else if(el.is('button.x-date-mp-ok')){
-            var d = new Date(this.mpSelYear, this.mpSelMonth, (this.activeDate || this.value).getDate());
-            if(d.getMonth() != this.mpSelMonth){
-                // 'fix' the JS rolling date conversion if needed
-                d = new Date(this.mpSelYear, this.mpSelMonth, 1).getLastDateOfMonth();
-            }
-            this.update(d);
-            this.hideMonthPicker();
-        }
-        else if((pn = el.up('td.x-date-mp-month', 2))){
-            this.mpMonths.removeClass('x-date-mp-sel');
-            pn.addClass('x-date-mp-sel');
-            this.mpSelMonth = pn.dom.xmonth;
-        }
-        else if((pn = el.up('td.x-date-mp-year', 2))){
-            this.mpYears.removeClass('x-date-mp-sel');
-            pn.addClass('x-date-mp-sel');
-            this.mpSelYear = pn.dom.xyear;
-        }
-        else if(el.is('a.x-date-mp-prev')){
-            this.updateMPYear(this.mpyear-10);
-        }
-        else if(el.is('a.x-date-mp-next')){
-            this.updateMPYear(this.mpyear+10);
-        }
-    },
-
-    // private
-    onMonthDblClick : function(e, t){
-        e.stopEvent();
-        var el = new Ext.Element(t), pn;
-        if((pn = el.up('td.x-date-mp-month', 2))){
-            this.update(new Date(this.mpSelYear, pn.dom.xmonth, (this.activeDate || this.value).getDate()));
-            this.hideMonthPicker();
-        }
-        else if((pn = el.up('td.x-date-mp-year', 2))){
-            this.update(new Date(pn.dom.xyear, this.mpSelMonth, (this.activeDate || this.value).getDate()));
-            this.hideMonthPicker();
-        }
-    },
-
-    // private
-    hideMonthPicker : function(disableAnim){
-        if(this.monthPicker){
-            if(disableAnim === true){
-                this.monthPicker.hide();
-            }else{
-                this.monthPicker.slideOut('t', {duration:0.2});
-            }
-        }
-    },
-
-    // private
-    showPrevMonth : function(e){
-        this.update(this.activeDate.add('mo', -1));
-    },
-
-    // private
-    showNextMonth : function(e){
-        this.update(this.activeDate.add('mo', 1));
-    },
-
-    // private
-    showPrevYear : function(){
-        this.update(this.activeDate.add('y', -1));
-    },
-
-    // private
-    showNextYear : function(){
-        this.update(this.activeDate.add('y', 1));
-    },
-
-    // private
-    handleMouseWheel : function(e){
-        e.stopEvent();
-        if(!this.disabled){
-            var delta = e.getWheelDelta();
-            if(delta > 0){
-                this.showPrevMonth();
-            } else if(delta < 0){
-                this.showNextMonth();
-            }
-        }
-    },
-
-    // private
-    handleDateClick : function(e, t){
-        e.stopEvent();
-        if(!this.disabled && t.dateValue && !Ext.fly(t.parentNode).hasClass('x-date-disabled')){
-            this.cancelFocus = this.focusOnSelect === false;
-            this.setValue(new Date(t.dateValue));
-            delete this.cancelFocus;
-            this.fireEvent('select', this, this.value);
-        }
-    },
-
-    // private
-    selectToday : function(){
-        if(this.todayBtn && !this.todayBtn.disabled){
-            this.setValue(new Date().clearTime());
-            this.fireEvent('select', this, this.value);
-        }
-    },
-
-    // private
-    update : function(date, forceRefresh){
-        if(this.rendered){
-               var vd = this.activeDate, vis = this.isVisible();
-               this.activeDate = date;
-               if(!forceRefresh && vd && this.el){
-                   var t = date.getTime();
-                   if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
-                       this.cells.removeClass('x-date-selected');
-                       this.cells.each(function(c){
-                          if(c.dom.firstChild.dateValue == t){
-                              c.addClass('x-date-selected');
-                              if(vis && !this.cancelFocus){
-                                  Ext.fly(c.dom.firstChild).focus(50);
-                              }
-                              return false;
-                          }
-                       }, this);
-                       return;
-                   }
-               }
-               var days = date.getDaysInMonth(),
-                   firstOfMonth = date.getFirstDateOfMonth(),
-                   startingPos = firstOfMonth.getDay()-this.startDay;
-       
-               if(startingPos < 0){
-                   startingPos += 7;
-               }
-               days += startingPos;
-       
-               var pm = date.add('mo', -1),
-                   prevStart = pm.getDaysInMonth()-startingPos,
-                   cells = this.cells.elements,
-                   textEls = this.textNodes,
-                   // convert everything to numbers so it's fast
-                   day = 86400000,
-                   d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime(),
-                   today = new Date().clearTime().getTime(),
-                   sel = date.clearTime(true).getTime(),
-                   min = this.minDate ? this.minDate.clearTime(true) : Number.NEGATIVE_INFINITY,
-                   max = this.maxDate ? this.maxDate.clearTime(true) : Number.POSITIVE_INFINITY,
-                   ddMatch = this.disabledDatesRE,
-                   ddText = this.disabledDatesText,
-                   ddays = this.disabledDays ? this.disabledDays.join('') : false,
-                   ddaysText = this.disabledDaysText,
-                   format = this.format;
-       
-               if(this.showToday){
-                   var td = new Date().clearTime(),
-                       disable = (td < min || td > max ||
-                       (ddMatch && format && ddMatch.test(td.dateFormat(format))) ||
-                       (ddays && ddays.indexOf(td.getDay()) != -1));
-       
-                   if(!this.disabled){
-                       this.todayBtn.setDisabled(disable);
-                       this.todayKeyListener[disable ? 'disable' : 'enable']();
-                   }
-               }
-       
-               var setCellClass = function(cal, cell){
-                   cell.title = '';
-                   var t = d.getTime();
-                   cell.firstChild.dateValue = t;
-                   if(t == today){
-                       cell.className += ' x-date-today';
-                       cell.title = cal.todayText;
-                   }
-                   if(t == sel){
-                       cell.className += ' x-date-selected';
-                       if(vis){
-                           Ext.fly(cell.firstChild).focus(50);
-                       }
-                   }
-                   // disabling
-                   if(t < min) {
-                       cell.className = ' x-date-disabled';
-                       cell.title = cal.minText;
-                       return;
-                   }
-                   if(t > max) {
-                       cell.className = ' x-date-disabled';
-                       cell.title = cal.maxText;
-                       return;
-                   }
-                   if(ddays){
-                       if(ddays.indexOf(d.getDay()) != -1){
-                           cell.title = ddaysText;
-                           cell.className = ' x-date-disabled';
-                       }
-                   }
-                   if(ddMatch && format){
-                       var fvalue = d.dateFormat(format);
-                       if(ddMatch.test(fvalue)){
-                           cell.title = ddText.replace('%0', fvalue);
-                           cell.className = ' x-date-disabled';
-                       }
-                   }
-               };
-       
-               var i = 0;
-               for(; i < startingPos; i++) {
-                   textEls[i].innerHTML = (++prevStart);
-                   d.setDate(d.getDate()+1);
-                   cells[i].className = 'x-date-prevday';
-                   setCellClass(this, cells[i]);
-               }
-               for(; i < days; i++){
-                   var intDay = i - startingPos + 1;
-                   textEls[i].innerHTML = (intDay);
-                   d.setDate(d.getDate()+1);
-                   cells[i].className = 'x-date-active';
-                   setCellClass(this, cells[i]);
-               }
-               var extraDays = 0;
-               for(; i < 42; i++) {
-                    textEls[i].innerHTML = (++extraDays);
-                    d.setDate(d.getDate()+1);
-                    cells[i].className = 'x-date-nextday';
-                    setCellClass(this, cells[i]);
-               }
-       
-               this.mbtn.setText(this.monthNames[date.getMonth()] + ' ' + date.getFullYear());
-       
-               if(!this.internalRender){
-                   var main = this.el.dom.firstChild,
-                       w = main.offsetWidth;
-                   this.el.setWidth(w + this.el.getBorderWidth('lr'));
-                   Ext.fly(main).setWidth(w);
-                   this.internalRender = true;
-                   // opera does not respect the auto grow header center column
-                   // then, after it gets a width opera refuses to recalculate
-                   // without a second pass
-                   if(Ext.isOpera && !this.secondPass){
-                       main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + 'px';
-                       this.secondPass = true;
-                       this.update.defer(10, this, [date]);
-                   }
-               }
-        }
-    },
-
-    // private
-    beforeDestroy : function() {
-        if(this.rendered){
-            Ext.destroy(
-                this.keyNav,
-                this.monthPicker,
-                this.eventEl,
-                this.mbtn,
-                this.nextRepeater,
-                this.prevRepeater,
-                this.cells.el,
-                this.todayBtn
-            );
-            delete this.textNodes;
-            delete this.cells.elements;
-        }
-    }
-
-    /**
-     * @cfg {String} autoEl @hide
-     */
-});
-
-Ext.reg('datepicker', Ext.DatePicker);
-/**
- * @class Ext.LoadMask
- * A simple utility class for generically masking elements while loading data.  If the {@link #store}
- * config option is specified, the masking will be automatically synchronized with the store's loading
- * process and the mask element will be cached for reuse.  For all other elements, this mask will replace the
- * element's Updater load indicator and will be destroyed after the initial load.
- * <p>Example usage:</p>
- *<pre><code>
-// Basic mask:
-var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
-myMask.show();
-</code></pre>
- * @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);
-        }
-    }
-};/**\r
- * @class Ext.Slider\r
- * @extends Ext.BoxComponent\r
- * Slider which supports vertical or horizontal orientation, keyboard adjustments,\r
- * configurable snapping, axis clicking and animation. Can be added as an item to\r
- * any container. Example usage:\r
-<pre><code>\r
-new Ext.Slider({\r
-    renderTo: Ext.getBody(),\r
-    width: 200,\r
-    value: 50,\r
-    increment: 10,\r
-    minValue: 0,\r
-    maxValue: 100\r
-});\r
-</code></pre>\r
- */\r
-Ext.Slider = Ext.extend(Ext.BoxComponent, {\r
-       /**\r
-        * @cfg {Number} value The value to initialize the slider with. Defaults to minValue.\r
-        */\r
-       /**\r
-        * @cfg {Boolean} vertical Orient the Slider vertically rather than horizontally, defaults to false.\r
-        */\r
-    vertical: false,\r
-       /**\r
-        * @cfg {Number} minValue The minimum value for the Slider. Defaults to 0.\r
-        */\r
-    minValue: 0,\r
-       /**\r
-        * @cfg {Number} maxValue The maximum value for the Slider. Defaults to 100.\r
-        */\r
-    maxValue: 100,\r
-    /**\r
-     * @cfg {Number/Boolean} decimalPrecision.\r
-     * <p>The number of decimal places to which to round the Slider's value. Defaults to 0.</p>\r
-     * <p>To disable rounding, configure as <tt><b>false</b></tt>.</p>\r
-     */\r
-    decimalPrecision: 0,\r
-       /**\r
-        * @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.\r
-        */\r
-    keyIncrement: 1,\r
-       /**\r
-        * @cfg {Number} increment How many units to change the slider when adjusting by drag and drop. Use this option to enable 'snapping'.\r
-        */\r
-    increment: 0,\r
-       // private\r
-    clickRange: [5,15],\r
-       /**\r
-        * @cfg {Boolean} clickToChange Determines whether or not clicking on the Slider axis will change the slider. Defaults to true\r
-        */\r
-    clickToChange : true,\r
-       /**\r
-        * @cfg {Boolean} animate Turn on or off animation. Defaults to true\r
-        */\r
-    animate: true,\r
-\r
-    /**\r
-     * True while the thumb is in a drag operation\r
-     * @type boolean\r
-     */\r
-    dragging: false,\r
-\r
-    // private override\r
-    initComponent : function(){\r
-        if(!Ext.isDefined(this.value)){\r
-            this.value = this.minValue;\r
-        }\r
-        Ext.Slider.superclass.initComponent.call(this);\r
-        this.keyIncrement = Math.max(this.increment, this.keyIncrement);\r
-        this.addEvents(\r
-            /**\r
-             * @event beforechange\r
-             * Fires before the slider value is changed. By returning false from an event handler,\r
-             * you can cancel the event and prevent the slider from changing.\r
-                        * @param {Ext.Slider} slider The slider\r
-                        * @param {Number} newValue The new value which the slider is being changed to.\r
-                        * @param {Number} oldValue The old value which the slider was previously.\r
-             */\r
-                       'beforechange',\r
-                       /**\r
-                        * @event change\r
-                        * Fires when the slider value is changed.\r
-                        * @param {Ext.Slider} slider The slider\r
-                        * @param {Number} newValue The new value which the slider has been changed to.\r
-                        */\r
-                       'change',\r
-                       /**\r
-                        * @event changecomplete\r
-                        * Fires when the slider value is changed by the user and any drag operations have completed.\r
-                        * @param {Ext.Slider} slider The slider\r
-                        * @param {Number} newValue The new value which the slider has been changed to.\r
-                        */\r
-                       'changecomplete',\r
-                       /**\r
-                        * @event dragstart\r
-             * Fires after a drag operation has started.\r
-                        * @param {Ext.Slider} slider The slider\r
-                        * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker\r
-                        */\r
-                       'dragstart',\r
-                       /**\r
-                        * @event drag\r
-             * Fires continuously during the drag operation while the mouse is moving.\r
-                        * @param {Ext.Slider} slider The slider\r
-                        * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker\r
-                        */\r
-                       'drag',\r
-                       /**\r
-                        * @event dragend\r
-             * Fires after the drag operation has completed.\r
-                        * @param {Ext.Slider} slider The slider\r
-                        * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker\r
-                        */\r
-                       'dragend'\r
-               );\r
-\r
-        if(this.vertical){\r
-            Ext.apply(this, Ext.Slider.Vertical);\r
-        }\r
-    },\r
-\r
-       // private override\r
-    onRender : function(){\r
-        this.autoEl = {\r
-            cls: 'x-slider ' + (this.vertical ? 'x-slider-vert' : 'x-slider-horz'),\r
-            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'}]}}\r
-        };\r
-        Ext.Slider.superclass.onRender.apply(this, arguments);\r
-        this.endEl = this.el.first();\r
-        this.innerEl = this.endEl.first();\r
-        this.thumb = this.innerEl.first();\r
-        this.halfThumb = (this.vertical ? this.thumb.getHeight() : this.thumb.getWidth())/2;\r
-        this.focusEl = this.thumb.next();\r
-        this.initEvents();\r
-    },\r
-\r
-       // private override\r
-    initEvents : function(){\r
-        this.thumb.addClassOnOver('x-slider-thumb-over');\r
-        this.mon(this.el, {\r
-            scope: this,\r
-            mousedown: this.onMouseDown,\r
-            keydown: this.onKeyDown\r
-        });\r
-\r
-        this.focusEl.swallowEvent("click", true);\r
-\r
-        this.tracker = new Ext.dd.DragTracker({\r
-            onBeforeStart: this.onBeforeDragStart.createDelegate(this),\r
-            onStart: this.onDragStart.createDelegate(this),\r
-            onDrag: this.onDrag.createDelegate(this),\r
-            onEnd: this.onDragEnd.createDelegate(this),\r
-            tolerance: 3,\r
-            autoStart: 300\r
-        });\r
-        this.tracker.initEl(this.thumb);\r
-    },\r
-\r
-       // private override\r
-    onMouseDown : function(e){\r
-        if(this.disabled){\r
-            return;\r
-        }\r
-        if(this.clickToChange && e.target != this.thumb.dom){\r
-            var local = this.innerEl.translatePoints(e.getXY());\r
-            this.onClickChange(local);\r
-        }\r
-        this.focus();\r
-    },\r
-\r
-       // private\r
-    onClickChange : function(local){\r
-        if(local.top > this.clickRange[0] && local.top < this.clickRange[1]){\r
-            this.setValue(Ext.util.Format.round(this.reverseValue(local.left), this.decimalPrecision), undefined, true);\r
-        }\r
-    },\r
-\r
-       // private\r
-    onKeyDown : function(e){\r
-        if(this.disabled){e.preventDefault();return;}\r
-        var k = e.getKey();\r
-        switch(k){\r
-            case e.UP:\r
-            case e.RIGHT:\r
-                e.stopEvent();\r
-                if(e.ctrlKey){\r
-                    this.setValue(this.maxValue, undefined, true);\r
-                }else{\r
-                    this.setValue(this.value+this.keyIncrement, undefined, true);\r
-                }\r
-            break;\r
-            case e.DOWN:\r
-            case e.LEFT:\r
-                e.stopEvent();\r
-                if(e.ctrlKey){\r
-                    this.setValue(this.minValue, undefined, true);\r
-                }else{\r
-                    this.setValue(this.value-this.keyIncrement, undefined, true);\r
-                }\r
-            break;\r
-            default:\r
-                e.preventDefault();\r
-        }\r
-    },\r
-\r
-       // private\r
-    doSnap : function(value){\r
-        if(!(this.increment && value)){\r
-            return value;\r
-        }\r
-        var newValue = value, \r
-            inc = this.increment,\r
-            m = value % inc;\r
-        if(m != 0){\r
-            newValue -= m;\r
-            if(m * 2 > inc){\r
-                newValue += inc;\r
-            }else if(m * 2 < -inc){\r
-                newValue -= inc;\r
-            }\r
-        }\r
-        return newValue.constrain(this.minValue,  this.maxValue);\r
-    },\r
-\r
-       // private\r
-    afterRender : function(){\r
-        Ext.Slider.superclass.afterRender.apply(this, arguments);\r
-        if(this.value !== undefined){\r
-            var v = this.normalizeValue(this.value);\r
-            if(v !== this.value){\r
-                delete this.value;\r
-                this.setValue(v, false);\r
-            }else{\r
-                this.moveThumb(this.translateValue(v), false);\r
-            }\r
-        }\r
-    },\r
-\r
-       // private\r
-    getRatio : function(){\r
-        var w = this.innerEl.getWidth(),\r
-            v = this.maxValue - this.minValue;\r
-        return v == 0 ? w : (w/v);\r
-    },\r
-\r
-       // private\r
-    normalizeValue : function(v){\r
-        v = this.doSnap(v);\r
-        v = Ext.util.Format.round(v, this.decimalPrecision);\r
-        v = v.constrain(this.minValue, this.maxValue);\r
-        return v;\r
-    },\r
-\r
-       /**\r
-        * Programmatically sets the value of the Slider. Ensures that the value is constrained within\r
-        * the minValue and maxValue.\r
-        * @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue)\r
-        * @param {Boolean} animate Turn on or off animation, defaults to true\r
-        */\r
-    setValue : function(v, animate, changeComplete){\r
-        v = this.normalizeValue(v);\r
-        if(v !== this.value && this.fireEvent('beforechange', this, v, this.value) !== false){\r
-            this.value = v;\r
-            this.moveThumb(this.translateValue(v), animate !== false);\r
-            this.fireEvent('change', this, v);\r
-            if(changeComplete){\r
-                this.fireEvent('changecomplete', this, v);\r
-            }\r
-        }\r
-    },\r
-\r
-       // private\r
-    translateValue : function(v){\r
-        var ratio = this.getRatio();\r
-        return (v * ratio) - (this.minValue * ratio) - this.halfThumb;\r
-    },\r
-\r
-       reverseValue : function(pos){\r
-        var ratio = this.getRatio();\r
-        return (pos + this.halfThumb + (this.minValue * ratio)) / ratio;\r
-    },\r
-\r
-       // private\r
-    moveThumb: function(v, animate){\r
-        if(!animate || this.animate === false){\r
-            this.thumb.setLeft(v);\r
-        }else{\r
-            this.thumb.shift({left: v, stopFx: true, duration:.35});\r
-        }\r
-    },\r
-\r
-       // private\r
-    focus : function(){\r
-        this.focusEl.focus(10);\r
-    },\r
-\r
-       // private\r
-    onBeforeDragStart : function(e){\r
-        return !this.disabled;\r
-    },\r
-\r
-       // private\r
-    onDragStart: function(e){\r
-        this.thumb.addClass('x-slider-thumb-drag');\r
-        this.dragging = true;\r
-        this.dragStartValue = this.value;\r
-        this.fireEvent('dragstart', this, e);\r
-    },\r
-\r
-       // private\r
-    onDrag: function(e){\r
-        var pos = this.innerEl.translatePoints(this.tracker.getXY());\r
-        this.setValue(Ext.util.Format.round(this.reverseValue(pos.left), this.decimalPrecision), false);\r
-        this.fireEvent('drag', this, e);\r
-    },\r
-\r
-       // private\r
-    onDragEnd: function(e){\r
-        this.thumb.removeClass('x-slider-thumb-drag');\r
-        this.dragging = false;\r
-        this.fireEvent('dragend', this, e);\r
-        if(this.dragStartValue != this.value){\r
-            this.fireEvent('changecomplete', this, this.value);\r
-        }\r
-    },\r
-\r
-       // private\r
-    onResize : function(w, h){\r
-        this.innerEl.setWidth(w - (this.el.getPadding('l') + this.endEl.getPadding('r')));\r
-        this.syncThumb();\r
-    },\r
-    \r
-    //private\r
-    onDisable: function(){\r
-        Ext.Slider.superclass.onDisable.call(this);\r
-        this.thumb.addClass(this.disabledClass);\r
-        if(Ext.isIE){\r
-            //IE breaks when using overflow visible and opacity other than 1.\r
-            //Create a place holder for the thumb and display it.\r
-            var xy = this.thumb.getXY();\r
-            this.thumb.hide();\r
-            this.innerEl.addClass(this.disabledClass).dom.disabled = true;\r
-            if (!this.thumbHolder){\r
-                this.thumbHolder = this.endEl.createChild({cls: 'x-slider-thumb ' + this.disabledClass});    \r
-            }\r
-            this.thumbHolder.show().setXY(xy);\r
-        }\r
-    },\r
-    \r
-    //private\r
-    onEnable: function(){\r
-        Ext.Slider.superclass.onEnable.call(this);\r
-        this.thumb.removeClass(this.disabledClass);\r
-        if(Ext.isIE){\r
-            this.innerEl.removeClass(this.disabledClass).dom.disabled = false;\r
-            if(this.thumbHolder){\r
-                this.thumbHolder.hide();\r
-            }\r
-            this.thumb.show();\r
-            this.syncThumb();\r
-        }\r
-    },\r
-    \r
-    /**\r
-     * Synchronizes the thumb position to the proper proportion of the total component width based\r
-     * on the current slider {@link #value}.  This will be called automatically when the Slider\r
-     * is resized by a layout, but if it is rendered auto width, this method can be called from\r
-     * another resize handler to sync the Slider if necessary.\r
-     */\r
-    syncThumb : function(){\r
-        if(this.rendered){\r
-            this.moveThumb(this.translateValue(this.value));\r
-        }\r
-    },\r
-\r
-       /**\r
-        * Returns the current value of the slider\r
-        * @return {Number} The current value of the slider\r
-        */\r
-    getValue : function(){\r
-        return this.value;\r
-    },\r
-    \r
-    // private\r
-    beforeDestroy : function(){\r
-        Ext.destroyMembers(this, 'endEl', 'innerEl', 'thumb', 'halfThumb', 'focusEl', 'tracker', 'thumbHolder');\r
-        Ext.Slider.superclass.beforeDestroy.call(this);\r
-    }\r
-});\r
-Ext.reg('slider', Ext.Slider);\r
-\r
-// private class to support vertical sliders\r
-Ext.Slider.Vertical = {\r
-    onResize : function(w, h){\r
-        this.innerEl.setHeight(h - (this.el.getPadding('t') + this.endEl.getPadding('b')));\r
-        this.syncThumb();\r
-    },\r
-\r
-    getRatio : function(){\r
-        var h = this.innerEl.getHeight(),\r
-            v = this.maxValue - this.minValue;\r
-        return h/v;\r
-    },\r
-\r
-    moveThumb: function(v, animate){\r
-        if(!animate || this.animate === false){\r
-            this.thumb.setBottom(v);\r
-        }else{\r
-            this.thumb.shift({bottom: v, stopFx: true, duration:.35});\r
-        }\r
-    },\r
-\r
-    onDrag: function(e){\r
-        var pos = this.innerEl.translatePoints(this.tracker.getXY()),\r
-            bottom = this.innerEl.getHeight()-pos.top;\r
-        this.setValue(this.minValue + Ext.util.Format.round(bottom/this.getRatio(), this.decimalPrecision), false);\r
-        this.fireEvent('drag', this, e);\r
-    },\r
-\r
-    onClickChange : function(local){\r
-        if(local.left > this.clickRange[0] && local.left < this.clickRange[1]){\r
-            var bottom = this.innerEl.getHeight() - local.top;\r
-            this.setValue(this.minValue + Ext.util.Format.round(bottom/this.getRatio(), this.decimalPrecision), undefined, true);\r
-        }\r
-    }\r
-};/**\r
- * @class Ext.ProgressBar\r
- * @extends Ext.BoxComponent\r
- * <p>An updateable progress bar component.  The progress bar supports two different modes: manual and automatic.</p>\r
- * <p>In manual mode, you are responsible for showing, updating (via {@link #updateProgress}) and clearing the\r
- * progress bar as needed from your own code.  This method is most appropriate when you want to show progress\r
- * throughout an operation that has predictable points of interest at which you can update the control.</p>\r
- * <p>In automatic mode, you simply call {@link #wait} and let the progress bar run indefinitely, only clearing it\r
- * once the operation is complete.  You can optionally have the progress bar wait for a specific amount of time\r
- * and then clear itself.  Automatic mode is most appropriate for timed operations or asynchronous operations in\r
- * which you have no need for indicating intermediate progress.</p>\r
- * @cfg {Float} value A floating point value between 0 and 1 (e.g., .5, defaults to 0)\r
- * @cfg {String} text The progress bar text (defaults to '')\r
- * @cfg {Mixed} textEl The element to render the progress text to (defaults to the progress\r
- * bar's internal text element)\r
- * @cfg {String} id The progress bar element's id (defaults to an auto-generated id)\r
- * @xtype progress\r
- */\r
-Ext.ProgressBar = Ext.extend(Ext.BoxComponent, {\r
-   /**\r
-    * @cfg {String} baseCls\r
-    * The base CSS class to apply to the progress bar's wrapper element (defaults to 'x-progress')\r
-    */\r
-    baseCls : 'x-progress',\r
-    \r
-    /**\r
-    * @cfg {Boolean} animate\r
-    * True to animate the progress bar during transitions (defaults to false)\r
-    */\r
-    animate : false,\r
-\r
-    // private\r
-    waitTimer : null,\r
-\r
-    // private\r
-    initComponent : function(){\r
-        Ext.ProgressBar.superclass.initComponent.call(this);\r
-        this.addEvents(\r
-            /**\r
-             * @event update\r
-             * Fires after each update interval\r
-             * @param {Ext.ProgressBar} this\r
-             * @param {Number} The current progress value\r
-             * @param {String} The current progress text\r
-             */\r
-            "update"\r
-        );\r
-    },\r
-\r
-    // private\r
-    onRender : function(ct, position){\r
-        var tpl = new Ext.Template(\r
-            '<div class="{cls}-wrap">',\r
-                '<div class="{cls}-inner">',\r
-                    '<div class="{cls}-bar">',\r
-                        '<div class="{cls}-text">',\r
-                            '<div>&#160;</div>',\r
-                        '</div>',\r
-                    '</div>',\r
-                    '<div class="{cls}-text {cls}-text-back">',\r
-                        '<div>&#160;</div>',\r
-                    '</div>',\r
-                '</div>',\r
-            '</div>'\r
-        );\r
-\r
-        this.el = position ? tpl.insertBefore(position, {cls: this.baseCls}, true)\r
-               : tpl.append(ct, {cls: this.baseCls}, true);\r
-                       \r
-        if(this.id){\r
-            this.el.dom.id = this.id;\r
-        }\r
-        var inner = this.el.dom.firstChild;\r
-        this.progressBar = Ext.get(inner.firstChild);\r
-\r
-        if(this.textEl){\r
-            //use an external text el\r
-            this.textEl = Ext.get(this.textEl);\r
-            delete this.textTopEl;\r
-        }else{\r
-            //setup our internal layered text els\r
-            this.textTopEl = Ext.get(this.progressBar.dom.firstChild);\r
-            var textBackEl = Ext.get(inner.childNodes[1]);\r
-            this.textTopEl.setStyle("z-index", 99).addClass('x-hidden');\r
-            this.textEl = new Ext.CompositeElement([this.textTopEl.dom.firstChild, textBackEl.dom.firstChild]);\r
-            this.textEl.setWidth(inner.offsetWidth);\r
-        }\r
-        this.progressBar.setHeight(inner.offsetHeight);\r
-    },\r
-    \r
-    // private\r
-    afterRender : function(){\r
-        Ext.ProgressBar.superclass.afterRender.call(this);\r
-        if(this.value){\r
-            this.updateProgress(this.value, this.text);\r
-        }else{\r
-            this.updateText(this.text);\r
-        }\r
-    },\r
-\r
-    /**\r
-     * Updates the progress bar value, and optionally its text.  If the text argument is not specified,\r
-     * any existing text value will be unchanged.  To blank out existing text, pass ''.  Note that even\r
-     * if the progress bar value exceeds 1, it will never automatically reset -- you are responsible for\r
-     * determining when the progress is complete and calling {@link #reset} to clear and/or hide the control.\r
-     * @param {Float} value (optional) A floating point value between 0 and 1 (e.g., .5, defaults to 0)\r
-     * @param {String} text (optional) The string to display in the progress text element (defaults to '')\r
-     * @param {Boolean} animate (optional) Whether to animate the transition of the progress bar. If this value is\r
-     * not specified, the default for the class is used (default to false)\r
-     * @return {Ext.ProgressBar} this\r
-     */\r
-    updateProgress : function(value, text, animate){\r
-        this.value = value || 0;\r
-        if(text){\r
-            this.updateText(text);\r
-        }\r
-        if(this.rendered){\r
-            var w = Math.floor(value*this.el.dom.firstChild.offsetWidth);\r
-            this.progressBar.setWidth(w, animate === true || (animate !== false && this.animate));\r
-            if(this.textTopEl){\r
-                //textTopEl should be the same width as the bar so overflow will clip as the bar moves\r
-                this.textTopEl.removeClass('x-hidden').setWidth(w);\r
-            }\r
-        }\r
-        this.fireEvent('update', this, value, text);\r
-        return this;\r
-    },\r
-\r
-    /**\r
-     * Initiates an auto-updating progress bar.  A duration can be specified, in which case the progress\r
-     * bar will automatically reset after a fixed amount of time and optionally call a callback function\r
-     * if specified.  If no duration is passed in, then the progress bar will run indefinitely and must\r
-     * be manually cleared by calling {@link #reset}.  The wait method accepts a config object with\r
-     * the following properties:\r
-     * <pre>\r
-Property   Type          Description\r
----------- ------------  ----------------------------------------------------------------------\r
-duration   Number        The length of time in milliseconds that the progress bar should\r
-                         run before resetting itself (defaults to undefined, in which case it\r
-                         will run indefinitely until reset is called)\r
-interval   Number        The length of time in milliseconds between each progress update\r
-                         (defaults to 1000 ms)\r
-animate    Boolean       Whether to animate the transition of the progress bar. If this value is\r
-                         not specified, the default for the class is used.                                                   \r
-increment  Number        The number of progress update segments to display within the progress\r
-                         bar (defaults to 10).  If the bar reaches the end and is still\r
-                         updating, it will automatically wrap back to the beginning.\r
-text       String        Optional text to display in the progress bar element (defaults to '').\r
-fn         Function      A callback function to execute after the progress bar finishes auto-\r
-                         updating.  The function will be called with no arguments.  This function\r
-                         will be ignored if duration is not specified since in that case the\r
-                         progress bar can only be stopped programmatically, so any required function\r
-                         should be called by the same code after it resets the progress bar.\r
-scope      Object        The scope that is passed to the callback function (only applies when\r
-                         duration and fn are both passed).\r
-</pre>\r
-         *\r
-         * Example usage:\r
-         * <pre><code>\r
-var p = new Ext.ProgressBar({\r
-   renderTo: 'my-el'\r
-});\r
-\r
-//Wait for 5 seconds, then update the status el (progress bar will auto-reset)\r
-p.wait({\r
-   interval: 100, //bar will move fast!\r
-   duration: 5000,\r
-   increment: 15,\r
-   text: 'Updating...',\r
-   scope: this,\r
-   fn: function(){\r
-      Ext.fly('status').update('Done!');\r
-   }\r
-});\r
-\r
-//Or update indefinitely until some async action completes, then reset manually\r
-p.wait();\r
-myAction.on('complete', function(){\r
-    p.reset();\r
-    Ext.fly('status').update('Done!');\r
-});\r
-</code></pre>\r
-     * @param {Object} config (optional) Configuration options\r
-     * @return {Ext.ProgressBar} this\r
-     */\r
-    wait : function(o){\r
-        if(!this.waitTimer){\r
-            var scope = this;\r
-            o = o || {};\r
-            this.updateText(o.text);\r
-            this.waitTimer = Ext.TaskMgr.start({\r
-                run: function(i){\r
-                    var inc = o.increment || 10;\r
-                    i -= 1;\r
-                    this.updateProgress(((((i+inc)%inc)+1)*(100/inc))*0.01, null, o.animate);\r
-                },\r
-                interval: o.interval || 1000,\r
-                duration: o.duration,\r
-                onStop: function(){\r
-                    if(o.fn){\r
-                        o.fn.apply(o.scope || this);\r
-                    }\r
-                    this.reset();\r
-                },\r
-                scope: scope\r
-            });\r
-        }\r
-        return this;\r
-    },\r
-\r
-    /**\r
-     * Returns true if the progress bar is currently in a {@link #wait} operation\r
-     * @return {Boolean} True if waiting, else false\r
-     */\r
-    isWaiting : function(){\r
-        return this.waitTimer !== null;\r
-    },\r
-\r
-    /**\r
-     * Updates the progress bar text.  If specified, textEl will be updated, otherwise the progress\r
-     * bar itself will display the updated text.\r
-     * @param {String} text (optional) The string to display in the progress text element (defaults to '')\r
-     * @return {Ext.ProgressBar} this\r
-     */\r
-    updateText : function(text){\r
-        this.text = text || '&#160;';\r
-        if(this.rendered){\r
-            this.textEl.update(this.text);\r
-        }\r
-        return this;\r
-    },\r
-    \r
-    /**\r
-     * Synchronizes the inner bar width to the proper proportion of the total componet width based\r
-     * on the current progress {@link #value}.  This will be called automatically when the ProgressBar\r
-     * is resized by a layout, but if it is rendered auto width, this method can be called from\r
-     * another resize handler to sync the ProgressBar if necessary.\r
-     */\r
-    syncProgressBar : function(){\r
-        if(this.value){\r
-            this.updateProgress(this.value, this.text);\r
-        }\r
-        return this;\r
-    },\r
-\r
-    /**\r
-     * Sets the size of the progress bar.\r
-     * @param {Number} width The new width in pixels\r
-     * @param {Number} height The new height in pixels\r
-     * @return {Ext.ProgressBar} this\r
-     */\r
-    setSize : function(w, h){\r
-        Ext.ProgressBar.superclass.setSize.call(this, w, h);\r
-        if(this.textTopEl){\r
-            var inner = this.el.dom.firstChild;\r
-            this.textEl.setSize(inner.offsetWidth, inner.offsetHeight);\r
-        }\r
-        this.syncProgressBar();\r
-        return this;\r
-    },\r
-\r
-    /**\r
-     * Resets the progress bar value to 0 and text to empty string.  If hide = true, the progress\r
-     * bar will also be hidden (using the {@link #hideMode} property internally).\r
-     * @param {Boolean} hide (optional) True to hide the progress bar (defaults to false)\r
-     * @return {Ext.ProgressBar} this\r
-     */\r
-    reset : function(hide){\r
-        this.updateProgress(0);\r
-        if(this.textTopEl){\r
-            this.textTopEl.addClass('x-hidden');\r
-        }\r
-        if(this.waitTimer){\r
-            this.waitTimer.onStop = null; //prevent recursion\r
-            Ext.TaskMgr.stop(this.waitTimer);\r
-            this.waitTimer = null;\r
-        }\r
-        if(hide === true){\r
-            this.hide();\r
-        }\r
-        return this;\r
-    },\r
-    \r
-    onDestroy: function(){\r
-        if(this.rendered){\r
-            if(this.textEl.isComposite){\r
-                this.textEl.clear();\r
-            }\r
-            Ext.destroyMembers(this, 'textEl', 'progressBar', 'textTopEl');\r
-        }\r
-        Ext.ProgressBar.superclass.onDestroy.call(this);\r
-    }\r
-});\r
-Ext.reg('progress', Ext.ProgressBar);
\ No newline at end of file