Start line:  
End line:  

Snippet Preview

Snippet HTML Code

Stack Overflow Questions
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema attributeFormDefault="unqualified" elementFormDefault="qualified" targetNamespace="exml:ext" xmlns:e="exml:ext" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:exml="http://www.jangaroo.net/exml/0.8" xmlns:eu="exml:ext.util" >
  <xs:import namespace="http://www.jangaroo.net/exml/0.8"/>
  <xs:import namespace="exml:ext.util"/>
  <xs:complexType name='Action_TYPE'>
        <xs:sequence>
            <xs:element name='handler' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The function that will be invoked by each component tied to this action when the component's primary event is triggered (defaults to undefined).
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='scope' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The scope (<tt><b>this</b></tt> reference) in which the <code><a href="output/Ext.Action.html#Ext.Action-handler">handler</a></code> is executed. Defaults to this Button.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:Boolean' name='disabled'>
          <xs:annotation>
            <xs:documentation>
              True to disable all components using this action, false to enable them (defaults to false).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='handler'>
          <xs:annotation>
            <xs:documentation>
              The function that will be invoked by each component tied to this action when the component's primary event is triggered (defaults to undefined).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='hidden'>
          <xs:annotation>
            <xs:documentation>
              True to hide all components using this action, false to show them (defaults to false).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='iconCls'>
          <xs:annotation>
            <xs:documentation>
              The CSS class selector that specifies a background image to be used as the header icon for all components using this action (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: 'do-something' // css class that specifies background image to be used as the icon image: .do-something { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; } </code></pre>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='itemId'>
          <xs:annotation>
            <xs:documentation>
              See <a href="Ext.Component.html">Ext.Component</a>.<a href="output/Ext.Component.html#Ext.Component-itemId">itemId</a>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='scope'>
          <xs:annotation>
            <xs:documentation>
              The scope (<tt><b>this</b></tt> reference) in which the <code><a href="output/Ext.Action.html#Ext.Action-handler">handler</a></code> is executed. Defaults to this Button.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='text'>
          <xs:annotation>
            <xs:documentation>
              The text to set for all components using this action (defaults to '').
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
  </xs:complexType>
  <xs:element name='Action' type='e:Action_TYPE'>
    <xs:annotation>
      <xs:documentation>
        An Action is a piece of reusable functionality that can be abstracted out of any particular component so that it can be usefully shared among multiple components. Actions let you share handlers, configuration options and UI updates across any components that support the Action interface (primarily <a href="Ext.Toolbar.html">Ext.Toolbar</a>, <a href="Ext.Button.html">Ext.Button</a> and <a href="Ext.menu.Menu.html">Ext.menu.Menu</a> components). <p>Aside from supporting the config object interface, any component that needs to use Actions must also support the following method list, as these will be called as needed by the Action class: setText(string), setIconCls(string), setDisabled(boolean), setVisible(boolean) and setHandler(function).</p>Example usage:<br/><pre><code>// Define the shared action. Each component below will have the same // display text and icon, and will display the same message on click. var action = new Ext.Action({ <a href="output/Ext.Action.html#Ext.Action-text">text</a>: 'Do something', <a href="output/Ext.Action.html#Ext.Action-handler">handler</a>: function(){ Ext.Msg.alert('Click', 'You did something.'); }, <a href="output/Ext.Action.html#Ext.Action-iconCls">iconCls</a>: 'do-something', <a href="output/Ext.Action.html#Ext.Action-itemId">itemId</a>: 'myAction' }); var panel = new Ext.Panel({ title: 'Actions', width: 500, height: 300, tbar: [ // Add the action directly to a toolbar as a menu button action, { text: 'Action Menu', // Add the action to a menu as a text item menu: [action] } ], items: [ // Add the action to the panel body as a standard button new Ext.Button(action) ], renderTo: Ext.getBody() }); // Change the text for all components using the action action.setText('Something else'); // Reference an action through a container using the itemId var btn = panel.getComponent('myAction'); var aRef = btn.baseAction; aRef.setText('New text'); </code></pre> <p>This class serves as a typed config object for constructor of class Action.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.Action
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='BoxComponent_TYPE'>
    <xs:complexContent>
      <xs:extension base='e:Component_TYPE'>
        <xs:sequence>
            <xs:element name='height' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The height of this component in pixels (defaults to auto). <b>Note</b> to express this dimension as a percentage or offset see <a href="output/Ext.Component.html#Ext.Component-anchor">Ext.Component.anchor</a>.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='margins' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  <b>Note</b>: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the <b><a href="Ext.layout.BorderLayout.html">BorderLayout</a></b> or one of the two <b><a href="Ext.layout.BoxLayout.html">BoxLayout</a> subclasses.</b> <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><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><br/><br/> <p>Defaults to:</p><pre><code>{top:0, right:0, bottom:0, left:0} </code></pre>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='width' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The width of this component in pixels (defaults to auto). <b>Note</b> to express this dimension as a percentage or offset see <a href="output/Ext.Component.html#Ext.Component-anchor">Ext.Component.anchor</a>.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='anchor'>
          <xs:annotation>
            <xs:documentation>
              <b>Note</b>: this config is only used when this Component is rendered by a Container which has been configured to use an <b><a href="Ext.layout.AnchorLayout.html">AnchorLayout</a> (or subclass thereof).</b> based layout manager, for example: <div class="mdetail-params"><ul><li><a href="Ext.form.FormPanel.html">Ext.form.FormPanel</a></li><li>specifying <code>layout: 'anchor' // or 'form', or 'absolute'</code></li></ul></div><br/><br/> <p>See <a href="Ext.layout.AnchorLayout.html">Ext.layout.AnchorLayout</a>.<a href="output/Ext.layout.AnchorLayout.html#Ext.layout.AnchorLayout-anchor">anchor</a> also.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='autoHeight'>
          <xs:annotation>
            <xs:documentation>
              True to use height:'auto', false to use fixed height (or allow it to be managed by its parent Container's <a href="output/Ext.Container.html#Ext.Container-layout">layout manager</a>. Defaults to false. <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>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='autoScroll'>
          <xs:annotation>
            <xs:documentation>
              <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>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='autoWidth'>
          <xs:annotation>
            <xs:documentation>
              True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's <a href="output/Ext.Container.html#Ext.Container-layout">layout manager</a>. Defaults to false. <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%'&gt;&lt;/div&gt; </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>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='boxMaxHeight'>
          <xs:annotation>
            <xs:documentation>
              The maximum value in pixels which this BoxComponent will set its height to. <p><b>Warning:</b> This will override any size management applied by layout managers.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='boxMaxWidth'>
          <xs:annotation>
            <xs:documentation>
              The maximum value in pixels which this BoxComponent will set its width to. <p><b>Warning:</b> This will override any size management applied by layout managers.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='boxMinHeight'>
          <xs:annotation>
            <xs:documentation>
              The minimum value in pixels which this BoxComponent will set its height to. <p><b>Warning:</b> This will override any size management applied by layout managers.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='boxMinWidth'>
          <xs:annotation>
            <xs:documentation>
              The minimum value in pixels which this BoxComponent will set its width to. <p><b>Warning:</b> This will override any size management applied by layout managers.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='flex'>
          <xs:annotation>
            <xs:documentation>
              <b>Note</b>: this config is only used when this Component is rendered by a Container which has been configured to use a <b><a href="Ext.layout.BoxLayout.html">BoxLayout</a>.</b> Each child Component with a <code>flex</code> property will be flexed either vertically (by a VBoxLayout) or horizontally (by an HBoxLayout) according to the item's <b>relative</b> <code>flex</code> value compared to the sum of all Components with <code>flex value specified. Any child items that have either a</code> flex = 0 or <code>flex = undefined</code> will not be 'flexed' (the initial size will not be changed).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='height'>
          <xs:annotation>
            <xs:documentation>
              The height of this component in pixels (defaults to auto). <b>Note</b> to express this dimension as a percentage or offset see <a href="output/Ext.Component.html#Ext.Component-anchor">Ext.Component.anchor</a>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='margins'>
          <xs:annotation>
            <xs:documentation>
              <b>Note</b>: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the <b><a href="Ext.layout.BorderLayout.html">BorderLayout</a></b> or one of the two <b><a href="Ext.layout.BoxLayout.html">BoxLayout</a> subclasses.</b> <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><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><br/><br/> <p>Defaults to:</p><pre><code>{top:0, right:0, bottom:0, left:0} </code></pre>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='pageX'>
          <xs:annotation>
            <xs:documentation>
              The page level x coordinate for this component if contained within a positioning container.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='pageY'>
          <xs:annotation>
            <xs:documentation>
              The page level y coordinate for this component if contained within a positioning container.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='region'>
          <xs:annotation>
            <xs:documentation>
              <b>Note</b>: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the <b><a href="Ext.layout.BorderLayout.html">BorderLayout</a></b> layout manager (e.g. specifying <tt>layout:'border'</tt>). <br/><p>See <a href="Ext.layout.BorderLayout.html">Ext.layout.BorderLayout</a> also.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='tabTip'>
          <xs:annotation>
            <xs:documentation>
              <b>Note</b>: this config is only used when this BoxComponent is a child item of a TabPanel. A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over the associated tab selector element. <a href="Ext.QuickTips.html">Ext.QuickTips</a>.init() must be called in order for the tips to render.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='width'>
          <xs:annotation>
            <xs:documentation>
              The width of this component in pixels (defaults to auto). <b>Note</b> to express this dimension as a percentage or offset see <a href="output/Ext.Component.html#Ext.Component-anchor">Ext.Component.anchor</a>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='x'>
          <xs:annotation>
            <xs:documentation>
              The local x (left) coordinate for this component if contained within a positioning container.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='y'>
          <xs:annotation>
            <xs:documentation>
              The local y (top) coordinate for this component if contained within a positioning container.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='BoxComponent' type='e:BoxComponent_TYPE' substitutionGroup='e:Component'>
    <xs:annotation>
      <xs:documentation>
        Base class for any <a href="Ext.Component.html">Component</a> that is to be sized as a box, using width and height. <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:</p><pre><code>var pageHeader = new Ext.BoxComponent({ el: 'my-header-div' });</code></pre>This may then be <a href="output/Ext.Container.html#Ext.Container-add">added</a> to a <a href="Ext.Container.html">Container</a> as a child item.<br/><br/> <p>To create a BoxComponent based around a HTML element to be created at render time, use the <a href="output/Ext.Component.html#Ext.Component-autoEl">autoEl</a> config option which takes the form of a <a href="Ext.DomHelper.html">DomHelper</a> specification:</p><pre><code>var myImage = new Ext.BoxComponent({ autoEl: { tag: 'img', src: '/images/my-image.jpg' } });</code></pre><br/><br/> <p>This class represents the xtype 'box' and serves as a typed config object for constructor of class BoxComponent.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.BoxComponent
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='Button_TYPE'>
    <xs:complexContent>
      <xs:extension base='e:BoxComponent_TYPE'>
        <xs:sequence>
            <xs:element name='handler' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A function called when the button is clicked (can be used instead of click event). The handler is passed the following parameters:<div class="mdetail-params"><ul><li><code>b</code> : Button<div class="sub-desc">This Button.</div></li><li><code>e</code> : EventObject<div class="sub-desc">The click event.</div></li></ul></div>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='menu' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob (defaults to undefined).
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='repeat' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  True to repeat fire the click event while the mouse is down. This can also be a <a href="Ext.util.ClickRepeater.html">ClickRepeater</a> config object (defaults to false).
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='scope' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The scope (<tt><b>this</b></tt> reference) in which the <code><a href="output/Ext.Button.html#Ext.Button-handler">handler</a></code> and <code><a href="output/Ext.Button.html#Ext.Button-toggleHandler">toggleHandler</a></code> is executed. Defaults to this Button.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='template' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A <a href="Ext.Template.html">Template</a> used to create the Button's DOM structure. Instances, or subclasses which need a different DOM structure may provide a different template layout in conjunction with an implementation of <a href="output/Ext.Button.html#Ext.Button-getTemplateArgs">getTemplateArgs</a>.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='toggleHandler' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Function called when a Button with <a href="output/Ext.Button.html#Ext.Button-enableToggle">enableToggle</a> set to true is clicked. Two arguments are passed:<ul class="mdetail-params"><li><b>button</b> : Ext.Button<div class="sub-desc">this Button object</div></li><li><b>state</b> : Boolean<div class="sub-desc">The next state of the Button, true means pressed.</div></li></ul>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='tooltip' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The tooltip for the button - can be a string to be used as innerHTML (html tags are accepted) or QuickTips config object
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:Boolean' name='allowDepress'>
          <xs:annotation>
            <xs:documentation>
              False to not allow a pressed Button to be depressed (defaults to undefined). Only valid when <a href="output/Ext.Button.html#Ext.Button-enableToggle">enableToggle</a> is true.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='arrowAlign'>
          <xs:annotation>
            <xs:documentation>
              (Optional) The side of the Button box to render the arrow if the button has an associated <a href="output/Ext.Button.html#Ext.Button-menu">menu</a>. Two values are allowed: <ul class="mdetail-params"><li>'right'</li><li>'bottom'</li></ul><p>Defaults to <b><tt>'right'</tt></b>.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='buttonSelector'>
          <xs:annotation>
            <xs:documentation>
              (Optional) A <a href="Ext.DomQuery.html">DomQuery</a> selector which is used to extract the active, clickable element from the DOM structure created. <p>When a custom <a href="output/Ext.Button.html#Ext.Button-template">template</a> is used, you must ensure that this selector results in the selection of a focussable element.</p><p>Defaults to <b><tt>'button:first-child'</tt></b>.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='clickEvent'>
          <xs:annotation>
            <xs:documentation>
              The DOM event that will fire the handler of the button. This can be any valid event name (dblclick, contextmenu). Defaults to <tt>'click'</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='enableToggle'>
          <xs:annotation>
            <xs:documentation>
              True to enable pressed/not pressed toggling (defaults to false)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='handleMouseEvents'>
          <xs:annotation>
            <xs:documentation>
              False to disable visual cues on mouseover, mouseout and mousedown (defaults to true)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='handler'>
          <xs:annotation>
            <xs:documentation>
              A function called when the button is clicked (can be used instead of click event). The handler is passed the following parameters:<div class="mdetail-params"><ul><li><code>b</code> : Button<div class="sub-desc">This Button.</div></li><li><code>e</code> : EventObject<div class="sub-desc">The click event.</div></li></ul></div>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='icon'>
          <xs:annotation>
            <xs:documentation>
              The path to an image to display in the button (the image will be set as the background-image CSS property of the button by default, so if you want a mixed icon/text button, set cls:'x-btn-text-icon')
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='iconAlign'>
          <xs:annotation>
            <xs:documentation>
              (Optional) The side of the Button box to render the icon. Four values are allowed: <ul class="mdetail-params"><li>'top'</li><li>'right'</li><li>'bottom'</li><li>'left'</li></ul><p>Defaults to <b><tt>'left'</tt></b>.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='iconCls'>
          <xs:annotation>
            <xs:documentation>
              A css class which sets a background image to be used as the icon for this button
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='menu'>
          <xs:annotation>
            <xs:documentation>
              Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob (defaults to undefined).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='menuAlign'>
          <xs:annotation>
            <xs:documentation>
              The position to align the menu to (see <a href="output/Ext.Element.html#Ext.Element-alignTo">Ext.Element.alignTo</a> for more details, defaults to 'tl-bl?').
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='minWidth'>
          <xs:annotation>
            <xs:documentation>
              The minimum width for this button (used to give a set of buttons a common width). See also <a href="Ext.Panel.html">Ext.Panel</a>.<tt><a href="output/Ext.Panel.html#Ext.Panel-minButtonWidth">minButtonWidth</a></tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='overflowText'>
          <xs:annotation>
            <xs:documentation>
              If used in a <a href="Ext.Toolbar.html">Toolbar</a>, the text to be used if this item is shown in the overflow menu. See also <a href="Ext.Toolbar.Item.html">Ext.Toolbar.Item</a>.<code><a href="output/Ext.Toolbar.Item.html#Ext.Toolbar.Item-overflowText">overflowText</a></code>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='pressed'>
          <xs:annotation>
            <xs:documentation>
              True to start pressed (only if enableToggle = true)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='repeat'>
          <xs:annotation>
            <xs:documentation>
              True to repeat fire the click event while the mouse is down. This can also be a <a href="Ext.util.ClickRepeater.html">ClickRepeater</a> config object (defaults to false).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='scale'>
          <xs:annotation>
            <xs:documentation>
              (Optional) The size of the Button. Three values are allowed: <ul class="mdetail-params"><li>'small'<div class="sub-desc">Results in the button element being 16px high.</div></li><li>'medium'<div class="sub-desc">Results in the button element being 24px high.</div></li><li>'large'<div class="sub-desc">Results in the button element being 32px high.</div></li></ul><p>Defaults to <b><tt>'small'</tt></b>.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='scope'>
          <xs:annotation>
            <xs:documentation>
              The scope (<tt><b>this</b></tt> reference) in which the <code><a href="output/Ext.Button.html#Ext.Button-handler">handler</a></code> and <code><a href="output/Ext.Button.html#Ext.Button-toggleHandler">toggleHandler</a></code> is executed. Defaults to this Button.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='tabIndex'>
          <xs:annotation>
            <xs:documentation>
              Set a DOM tabIndex for this button (defaults to undefined)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='template'>
          <xs:annotation>
            <xs:documentation>
              A <a href="Ext.Template.html">Template</a> used to create the Button's DOM structure. Instances, or subclasses which need a different DOM structure may provide a different template layout in conjunction with an implementation of <a href="output/Ext.Button.html#Ext.Button-getTemplateArgs">getTemplateArgs</a>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='text'>
          <xs:annotation>
            <xs:documentation>
              The button text to be used as innerHTML (html tags are accepted)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='toggleGroup'>
          <xs:annotation>
            <xs:documentation>
              The group this toggle button is a member of (only 1 per group can be pressed)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='toggleHandler'>
          <xs:annotation>
            <xs:documentation>
              Function called when a Button with <a href="output/Ext.Button.html#Ext.Button-enableToggle">enableToggle</a> set to true is clicked. Two arguments are passed:<ul class="mdetail-params"><li><b>button</b> : Ext.Button<div class="sub-desc">this Button object</div></li><li><b>state</b> : Boolean<div class="sub-desc">The next state of the Button, true means pressed.</div></li></ul>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='tooltip'>
          <xs:annotation>
            <xs:documentation>
              The tooltip for the button - can be a string to be used as innerHTML (html tags are accepted) or QuickTips config object
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='tooltipType'>
          <xs:annotation>
            <xs:documentation>
              The type of tooltip to use. Either 'qtip' (default) for QuickTips or 'title' for title attribute.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='type'>
          <xs:annotation>
            <xs:documentation>
              submit, reset or button - defaults to 'button'
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='Button' type='e:Button_TYPE' substitutionGroup='e:BoxComponent'>
    <xs:annotation>
      <xs:documentation>
        Simple Button class <p>This class represents the xtype 'button' and serves as a typed config object for constructor of class Button.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.Button
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ButtonGroup_TYPE'>
    <xs:complexContent>
      <xs:extension base='e:Panel_TYPE'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:Number' name='columns'>
          <xs:annotation>
            <xs:documentation>
              The <tt>columns</tt> configuration property passed to the <a href="output/Ext.ButtonGroup.html#Ext.ButtonGroup-layout">configured layout manager</a>. See <a href="output/Ext.layout.TableLayout.html#Ext.layout.TableLayout-columns">Ext.layout.TableLayout.columns</a>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='ButtonGroup' type='e:ButtonGroup_TYPE' substitutionGroup='e:Panel'>
    <xs:annotation>
      <xs:documentation>
        Container for a group of buttons. Example usage: <pre><code>var p = new Ext.Panel({ title: 'Panel with Button Group', width: 300, height:200, renderTo: document.body, html: 'whatever', tbar: [{ xtype: 'buttongroup', <a href="output/Ext.ButtonGroup.html#Ext.ButtonGroup-columns">columns</a>: 3, title: 'Clipboard', items: [{ text: 'Paste', scale: 'large', rowspan: 3, iconCls: 'add', iconAlign: 'top', cls: 'x-btn-as-arrow' },{ xtype:'splitbutton', text: 'Menu Button', scale: 'large', rowspan: 3, iconCls: 'add', iconAlign: 'top', arrowAlign:'bottom', menu: [{text: 'Menu Item 1'}] },{ xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}] },{ text: 'Copy', iconCls: 'add16' },{ text: 'Format', iconCls: 'add16' }] }] }); </code></pre> <p>This class represents the xtype 'buttongroup' and serves as a typed config object for constructor of class ButtonGroup.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.ButtonGroup
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ColorPalette_TYPE'>
    <xs:complexContent>
      <xs:extension base='e:Component_TYPE'>
        <xs:sequence>
            <xs:element name='handler' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  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 <a href="output/Ext.ColorPalette.html#Ext.ColorPalette-palette">Ext.ColorPalette</a>.</div></li><li><code>color</code> : String<div class="sub-desc">The 6-digit color hex code (without the # symbol).</div></li></ul></div>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='scope' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The scope (<tt><b>this</b></tt> reference) in which the <code><a href="output/Ext.ColorPalette.html#Ext.ColorPalette-handler">handler</a></code> function will be called. Defaults to this ColorPalette instance.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:Boolean' name='allowReselect'>
          <xs:annotation>
            <xs:documentation>
              If set to true then reselecting a color that is already selected fires the <a href="output/Ext.ColorPalette.html#Ext.ColorPalette-select">select</a> event
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='clickEvent'>
          <xs:annotation>
            <xs:documentation>
              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>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='handler'>
          <xs:annotation>
            <xs:documentation>
              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 <a href="output/Ext.ColorPalette.html#Ext.ColorPalette-palette">Ext.ColorPalette</a>.</div></li><li><code>color</code> : String<div class="sub-desc">The 6-digit color hex code (without the # symbol).</div></li></ul></div>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='scope'>
          <xs:annotation>
            <xs:documentation>
              The scope (<tt><b>this</b></tt> reference) in which the <code><a href="output/Ext.ColorPalette.html#Ext.ColorPalette-handler">handler</a></code> function will be called. Defaults to this ColorPalette instance.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='value'>
          <xs:annotation>
            <xs:documentation>
              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.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='ColorPalette' type='e:ColorPalette_TYPE' substitutionGroup='e:Component'>
    <xs:annotation>
      <xs:documentation>
        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> <p>This class represents the xtype 'colorpalette' and serves as a typed config object for constructor of class ColorPalette.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.ColorPalette
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='Component_TYPE'>
    <xs:complexContent>
      <xs:extension base='eu:Observable_TYPE'>
        <xs:sequence>
            <xs:element name='applyTo' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  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. <div><ul><li><b>Description</b> : <div style="margin-left: 2em">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></li><li><b>Notes</b> : <div style="margin-left: 2em"><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 <a href="output/Ext.Component.html#Ext.Component-renderTo">renderTo</a> will be ignored and the target element's parent node will automatically be used as the component's container.</div></div></li></ul></div>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='autoEl' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A tag name or <a href="Ext.DomHelper.html">DomHelper</a> spec used to create the <a href="output/Ext.Component.html#Ext.Component-getEl">Element</a> which will encapsulate this Component. <p>You do not normally need to specify this. For the base classes <a href="Ext.Component.html">Ext.Component</a>, <a href="Ext.BoxComponent.html">Ext.BoxComponent</a>, and <a href="Ext.Container.html">Ext.Container</a>, 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>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='baseAction' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  <p>The action controlling this component, usually a button or menu item. If this property is set, all other component configuration attributes are ignored, as the component receives its configuration from the action.</p> <p>Aside from supporting the config object interface, any component that needs to use Actions must also support the following method list, as these will be called as needed by the Action class: <ul> <li>setText(string)</li> <li>setIconCls(string)</li> <li>setDisabled(boolean)</li> <li>setVisible(boolean)</li> <li>setHandler(function)</li></ul></p> @see Action
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='bubbleEvents' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  An array of events that, when fired, should be bubbled to any parent container. See <a href="output/Ext.util.Observable.html#Ext.util.Observable-enableBubble">Ext.util.Observable.enableBubble</a>. Defaults to <tt>[]</tt>.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
                <xs:attribute name="mode" type="exml:configMode"/>
              </xs:complexType>
            </xs:element>
            <xs:element name='data' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The initial set of data to apply to the <code><a href="output/Ext.Component.html#Ext.Component-tpl">tpl</a></code> to update the content area of the Component.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='html' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  An HTML fragment, or a <a href="Ext.DomHelper.html">DomHelper</a> 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 <a href="output/Ext.Component.html#Ext.Component-render">render</a> event is fired. This content is inserted into the body <i>before</i> any configured <a href="output/Ext.Component.html#Ext.Component-contentEl">contentEl</a> is appended.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='plugins' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  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.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
                <xs:attribute name="mode" type="exml:configMode"/>
              </xs:complexType>
            </xs:element>
            <xs:element name='renderTo' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Specify the id of the element, a DOM element or an existing Element that this component will be rendered into. <div><ul><li><b>Notes</b> : <div style="margin-left: 2em"><div class="sub-desc">Do <u>not</u> use this option if the Component is to be a child item of a <a href="Ext.Container.html">Container</a>. It is the responsibility of the <a href="Ext.Container.html">Container</a>'s <a href="output/Ext.Container.html#Ext.Container-layout">layout manager</a> to render and manage its child items.</div><div class="sub-desc">When using this config, a call to render() is not required.</div></div></li></ul></div><p>See <tt><a href="output/Ext.Component.html#Ext.Component-render">render</a></tt> also.</p>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='stateEvents' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  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>See <code><a href="output/Ext.Component.html#Ext.Component-stateful">stateful</a></code> for an explanation of saving and restoring Component state.</p>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
                <xs:attribute name="mode" type="exml:configMode"/>
              </xs:complexType>
            </xs:element>
            <xs:element name='tpl' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  An <a href="Ext.Template.html">Ext.Template</a>, <a href="Ext.XTemplate.html">Ext.XTemplate</a> or an array of strings to form an Ext.XTemplate. Used in conjunction with the <code><a href="output/Ext.Component.html#Ext.Component-data">data</a></code> and <code><a href="output/Ext.Component.html#Ext.Component-tplWriteMode">tplWriteMode</a></code> configurations.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:Boolean' name='allowDomMove'>
          <xs:annotation>
            <xs:documentation>
              Whether the component can move the Dom node when rendering (defaults to true).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='applyTo'>
          <xs:annotation>
            <xs:documentation>
              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. <div><ul><li><b>Description</b> : <div style="margin-left: 2em">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></li><li><b>Notes</b> : <div style="margin-left: 2em"><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 <a href="output/Ext.Component.html#Ext.Component-renderTo">renderTo</a> will be ignored and the target element's parent node will automatically be used as the component's container.</div></div></li></ul></div>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='autoEl'>
          <xs:annotation>
            <xs:documentation>
              A tag name or <a href="Ext.DomHelper.html">DomHelper</a> spec used to create the <a href="output/Ext.Component.html#Ext.Component-getEl">Element</a> which will encapsulate this Component. <p>You do not normally need to specify this. For the base classes <a href="Ext.Component.html">Ext.Component</a>, <a href="Ext.BoxComponent.html">Ext.BoxComponent</a>, and <a href="Ext.Container.html">Ext.Container</a>, 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>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='autoShow'>
          <xs:annotation>
            <xs:documentation>
              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).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='baseAction'>
          <xs:annotation>
            <xs:documentation>
              <p>The action controlling this component, usually a button or menu item. If this property is set, all other component configuration attributes are ignored, as the component receives its configuration from the action.</p> <p>Aside from supporting the config object interface, any component that needs to use Actions must also support the following method list, as these will be called as needed by the Action class: <ul> <li>setText(string)</li> <li>setIconCls(string)</li> <li>setDisabled(boolean)</li> <li>setVisible(boolean)</li> <li>setHandler(function)</li></ul></p> @see Action
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='bubbleEvents'>
          <xs:annotation>
            <xs:documentation>
              An array of events that, when fired, should be bubbled to any parent container. See <a href="output/Ext.util.Observable.html#Ext.util.Observable-enableBubble">Ext.util.Observable.enableBubble</a>. Defaults to <tt>[]</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='clearCls'>
          <xs:annotation>
            <xs:documentation>
              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>). <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><a href="Ext.layout.FormLayout.html">FormLayout</a></b> layout manager (e.g. <a href="Ext.form.FormPanel.html">Ext.form.FormPanel</a> or specifying <tt>layout:'form'</tt>) and either a <tt><a href="output/Ext.Component.html#Ext.Component-fieldLabel">fieldLabel</a></tt> is specified or <tt>isFormField=true</tt> is specified.</p><br/><p>See <a href="Ext.layout.FormLayout.html">Ext.layout.FormLayout</a>.<a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-fieldTpl">fieldTpl</a> also.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='cls'>
          <xs:annotation>
            <xs:documentation>
              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.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='contentEl'>
          <xs:annotation>
            <xs:documentation>
              Optional. Specify an existing HTML element, or the <code>id</code> of an existing HTML element to use as the content for this component. <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 <a href="output/Ext.Component.html#Ext.Component-html">HTML</a> has been inserted</i>, and so the document will not contain this element at the time the <a href="output/Ext.Component.html#Ext.Component-render">render</a> event is fired.</div><div class="sub-desc">The specified HTML element used will not participate in any <code><b><a href="output/Ext.Container.html#Ext.Container-layout">layout</a></b></code> scheme that the Component may use. It is just HTML. Layouts operate on child <code><b><a href="output/Ext.Container.html#Ext.Container-items">items</a></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>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='ctCls'>
          <xs:annotation>
            <xs:documentation>
              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 <a href="Ext.layout.ContainerLayout.html">Ext.layout.ContainerLayout</a>.<a href="output/Ext.layout.ContainerLayout.html#Ext.layout.ContainerLayout-extraCls">extraCls</a> also. <p><b>Note</b>: <tt>ctCls</tt> defaults to <tt>''</tt> except for the following class which assigns a value by default:</p><div class="mdetail-params"><ul><li><a href="Ext.layout.Box.html">Box Layout</a> : <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><br/><br/>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='data'>
          <xs:annotation>
            <xs:documentation>
              The initial set of data to apply to the <code><a href="output/Ext.Component.html#Ext.Component-tpl">tpl</a></code> to update the content area of the Component.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='disabled'>
          <xs:annotation>
            <xs:documentation>
              Render this component disabled (default is false).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='disabledClass'>
          <xs:annotation>
            <xs:documentation>
              CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='fieldLabel'>
          <xs:annotation>
            <xs:documentation>
              The label text to display next to this Component (defaults to ''). <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><a href="Ext.layout.FormLayout.html">FormLayout</a></b> layout manager (e.g. <a href="Ext.form.FormPanel.html">Ext.form.FormPanel</a> or specifying <tt>layout:'form'</tt>).</p><br/><p>Also see <tt><a href="output/Ext.Component.html#Ext.Component-hideLabel">hideLabel</a></tt> and <a href="Ext.layout.FormLayout.html">Ext.layout.FormLayout</a>.<a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-fieldTpl">fieldTpl</a>.</p>Example use:<pre><code>new Ext.FormPanel({ height: 100, renderTo: Ext.getBody(), items: [{ xtype: 'textfield', fieldLabel: 'Name' }] }); </code></pre>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='hidden'>
          <xs:annotation>
            <xs:documentation>
              Render this component hidden (default is false). If <tt>true</tt>, the <a href="output/Ext.Component.html#Ext.Component-hide">hide</a> method will be called internally.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='hideLabel'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> to completely hide the label element (<a href="output/Ext.Component.html#Ext.Component-fieldLabel">label</a> and <a href="output/Ext.Component.html#Ext.Component-labelSeparator">separator</a>). Defaults to <tt>false</tt>. By default, even if you do not specify a <tt><a href="output/Ext.Component.html#Ext.Component-fieldLabel">fieldLabel</a></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. <br/><p><b>Note</b>: see the note for <tt><a href="output/Ext.Component.html#Ext.Component-clearCls">clearCls</a></tt>.</p><br/>Example use:<pre><code>new Ext.FormPanel({ height: 100, renderTo: Ext.getBody(), items: [{ xtype: 'textfield' hideLabel: true }] }); </code></pre>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='hideMode'>
          <xs:annotation>
            <xs:documentation>
              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). <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>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='hideParent'>
          <xs:annotation>
            <xs:documentation>
              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.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='html'>
          <xs:annotation>
            <xs:documentation>
              An HTML fragment, or a <a href="Ext.DomHelper.html">DomHelper</a> 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 <a href="output/Ext.Component.html#Ext.Component-render">render</a> event is fired. This content is inserted into the body <i>before</i> any configured <a href="output/Ext.Component.html#Ext.Component-contentEl">contentEl</a> is appended.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='id'>
          <xs:annotation>
            <xs:documentation>
              The <b>unique</b> id of this component (defaults to an <a href="output/Ext.Component.html#Ext.Component-getId">auto-assigned id</a>). 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 <a href="Ext.html">Ext</a>.<a href="output/Ext.html#Ext-getCmp">getCmp</a>). <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><a href="output/Ext.Component.html#Ext.Component-itemId">itemId</a></code> and <code><a href="output/Ext.Component.html#Ext.Component-ref">ref</a></code>.</p><p><b>Note</b>: to access the container of an item see <code><a href="output/Ext.Component.html#Ext.Component-ownerCt">ownerCt</a></code>.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='itemCls'>
          <xs:annotation>
            <xs:documentation>
              <b>Note</b>: this config is only used when this Component is rendered by a Container which has been configured to use the <b><a href="Ext.layout.FormLayout.html">FormLayout</a></b> layout manager (e.g. <a href="Ext.form.FormPanel.html">Ext.form.FormPanel</a> or specifying <tt>layout:'form'</tt>). <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 <a href="Ext.layout.FormLayout.html">Ext.layout.FormLayout</a>.<a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-fieldTpl">fieldTpl</a>), 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><a href="output/Ext.Component.html#Ext.Component-fieldLabel">fieldLabel</a></tt>.</p><br/>Example use:<pre><code>// Apply a style to the field's label: &lt;style&gt; .required .x-form-item-label {font-weight:bold;color:red;} &lt;/style&gt; 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>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='itemId'>
          <xs:annotation>
            <xs:documentation>
              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><a href="output/Ext.Component.html#Ext.Component-id">id</a></code> with <a href="Ext.html">Ext</a>.<a href="output/Ext.html#Ext-getCmp">getCmp</a>, use <code>itemId</code> with <a href="Ext.Container.html">Ext.Container</a>.<a href="output/Ext.Container.html#Ext.Container-getComponent">getComponent</a> which will retrieve <code>itemId</code>'s or <tt><a href="output/Ext.Component.html#Ext.Component-id">id</a></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 <a href="Ext.ComponentMgr.html">Ext.ComponentMgr</a> which requires a <b>unique</b> <code><a href="output/Ext.Component.html#Ext.Component-id">id</a></code>. <pre><code>var c = new Ext.Panel({ // <a href="output/Ext.BoxComponent.html#Ext.BoxComponent-height">height</a>: 300, <a href="output/Ext.Component.html#Ext.Component-renderTo">renderTo</a>: document.body, <a href="output/Ext.Container.html#Ext.Container-layout">layout</a>: 'auto', <a href="output/Ext.Container.html#Ext.Container-items">items</a>: [ { itemId: 'p1', <a href="output/Ext.Panel.html#Ext.Panel-title">title</a>: 'Panel 1', <a href="output/Ext.BoxComponent.html#Ext.BoxComponent-height">height</a>: 150 }, { itemId: 'p2', <a href="output/Ext.Panel.html#Ext.Panel-title">title</a>: 'Panel 2', <a href="output/Ext.BoxComponent.html#Ext.BoxComponent-height">height</a>: 150 } ] }) p1 = c.<a href="output/Ext.Container.html#Ext.Container-getComponent">getComponent</a>('p1'); // not the same as <a href="output/Ext.html#Ext-getCmp">Ext.getCmp()</a> p2 = p1.<a href="output/Ext.Component.html#Ext.Component-ownerCt">ownerCt</a>.<a href="output/Ext.Container.html#Ext.Container-getComponent">getComponent</a>('p2'); // reference via a sibling </code></pre><p>Also see <tt><a href="output/Ext.Component.html#Ext.Component-id">id</a></tt> and <code><a href="output/Ext.Component.html#Ext.Component-ref">ref</a></code>.</p><p><b>Note</b>: to access the container of an item see <tt><a href="output/Ext.Component.html#Ext.Component-ownerCt">ownerCt</a></tt>.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='labelSeparator'>
          <xs:annotation>
            <xs:documentation>
              The separator to display after the text of each <tt><a href="output/Ext.Component.html#Ext.Component-fieldLabel">fieldLabel</a></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><a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-labelSeparator">layout level</a> (defaults to colon <tt>':'</tt>)</li></ul></div>To display no separator for this field's label specify empty string ''.<br/><br/> <br/><p><b>Note</b>: see the note for <tt><a href="output/Ext.Component.html#Ext.Component-clearCls">clearCls</a></tt>.</p><br/><p>Also see <tt><a href="output/Ext.Component.html#Ext.Component-hideLabel">hideLabel</a></tt> and <a href="Ext.layout.FormLayout.html">Ext.layout.FormLayout</a>.<a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-fieldTpl">fieldTpl</a>.</p>Example use:<pre><code>new Ext.FormPanel({ height: 100, renderTo: Ext.getBody(), layoutConfig: { labelSeparator: '~' // layout config has lowest priority (defaults to ':') }, <a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-labelSeparator">labelSeparator</a>: '&gt;&gt;', // 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>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='labelStyle'>
          <xs:annotation>
            <xs:documentation>
              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><a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-labelStyle">Ext.layout.FormLayout.labelStyle</a></tt> , or ''). <br/><p><b>Note</b>: see the note for <code><a href="output/Ext.Component.html#Ext.Component-clearCls">clearCls</a></code>.</p><br/><p>Also see <code><a href="output/Ext.Component.html#Ext.Component-hideLabel">hideLabel</a></code> and <code><a href="Ext.layout.FormLayout.html">Ext.layout.FormLayout</a>.<a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-fieldTpl">fieldTpl</a>.</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>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='overCls'>
          <xs:annotation>
            <xs:documentation>
              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.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='plugins'>
          <xs:annotation>
            <xs:documentation>
              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.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='ptype'>
          <xs:annotation>
            <xs:documentation>
              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 <a href="output/Ext.ComponentMgr.html#Ext.ComponentMgr-registerPlugin">Ext.ComponentMgr.registerPlugin</a> in order to be able to take advantage of lazy instantiation and rendering.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='ref'>
          <xs:annotation>
            <xs:documentation>
              A path specification, relative to the Component's <code><a href="output/Ext.Component.html#Ext.Component-ownerCt">ownerCt</a></code> specifying into which ancestor Container to place a named reference to this Component. <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><a href="output/Ext.Component.html#Ext.Component-ownerCt">ownerCt</a></code>.</p><p>Also see the <code><a href="output/Ext.Component.html#Ext.Component-added">added</a></code> and <code><a href="output/Ext.Component.html#Ext.Component-removed">removed</a></code> events.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='renderTo'>
          <xs:annotation>
            <xs:documentation>
              Specify the id of the element, a DOM element or an existing Element that this component will be rendered into. <div><ul><li><b>Notes</b> : <div style="margin-left: 2em"><div class="sub-desc">Do <u>not</u> use this option if the Component is to be a child item of a <a href="Ext.Container.html">Container</a>. It is the responsibility of the <a href="Ext.Container.html">Container</a>'s <a href="output/Ext.Container.html#Ext.Container-layout">layout manager</a> to render and manage its child items.</div><div class="sub-desc">When using this config, a call to render() is not required.</div></div></li></ul></div><p>See <tt><a href="output/Ext.Component.html#Ext.Component-render">render</a></tt> also.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='stateEvents'>
          <xs:annotation>
            <xs:documentation>
              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>See <code><a href="output/Ext.Component.html#Ext.Component-stateful">stateful</a></code> for an explanation of saving and restoring Component state.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='stateId'>
          <xs:annotation>
            <xs:documentation>
              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><a href="output/Ext.Component.html#Ext.Component-stateful">stateful</a></code> for an explanation of saving and restoring Component state.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='stateful'>
          <xs:annotation>
            <xs:documentation>
              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><a href="output/Ext.Component.html#Ext.Component-stateId">stateId</a></code> or <code><a href="output/Ext.Component.html#Ext.Component-id">id</a></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>For state saving to work, the state manager's provider must have been set to an implementation of <a href="Ext.state.Provider.html">Ext.state.Provider</a> which overrides the <a href="output/Ext.state.Provider.html#Ext.state.Provider-set">set</a> and <a href="output/Ext.state.Provider.html#Ext.state.Provider-get">get</a> methods to save and recall name/value pairs. A built-in implementation, <a href="Ext.state.CookieProvider.html">Ext.state.CookieProvider</a> 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&#42;60&#42;60&#42;24&#42;7)), //7 days from now })); </code></pre><p>A stateful Component attempts to save state when one of the events listed in the <code><a href="output/Ext.Component.html#Ext.Component-stateEvents">stateEvents</a></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 <a href="output/Ext.state.Manager.html#Ext.state.Manager-set">Ext.state.Manager.set</a> which uses the configured <a href="Ext.state.Provider.html">Ext.state.Provider</a> to save the object keyed by the Component's <code><a href="stateId.html">stateId</a></code>, or, if that is not specified, its <code><a href="output/Ext.Component.html#Ext.Component-id">id</a></code>.</p><p>During construction, a stateful Component attempts to <i>restore</i> its state by calling <a href="output/Ext.state.Manager.html#Ext.state.Manager-get">Ext.state.Manager.get</a> passing the <code><a href="output/Ext.Component.html#Ext.Component-stateId">stateId</a></code>, or, if that is not specified, the <code><a href="output/Ext.Component.html#Ext.Component-id">id</a></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 <a href="output/Ext.Component.html#Ext.Component-beforestaterestore">beforestaterestore</a>, <a href="output/Ext.Component.html#Ext.Component-staterestore">staterestore</a>, <a href="output/Ext.Component.html#Ext.Component-beforestatesave">beforestatesave</a> and <a href="output/Ext.Component.html#Ext.Component-statesave">statesave</a> events.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='style'>
          <xs:annotation>
            <xs:documentation>
              A custom style specification to be applied to this component's Element. Should be a valid argument to <a href="output/Ext.Element.html#Ext.Element-applyStyles">Ext.Element.applyStyles</a>. <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>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='tpl'>
          <xs:annotation>
            <xs:documentation>
              An <a href="Ext.Template.html">Ext.Template</a>, <a href="Ext.XTemplate.html">Ext.XTemplate</a> or an array of strings to form an Ext.XTemplate. Used in conjunction with the <code><a href="output/Ext.Component.html#Ext.Component-data">data</a></code> and <code><a href="output/Ext.Component.html#Ext.Component-tplWriteMode">tplWriteMode</a></code> configurations.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='tplWriteMode'>
          <xs:annotation>
            <xs:documentation>
              The Ext.(X)Template method to use when updating the content area of the Component. Defaults to <tt>'overwrite'</tt> (see <code><a href="output/Ext.XTemplate.html#Ext.XTemplate-overwrite">Ext.XTemplate.overwrite</a></code>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='xtype'>
          <xs:annotation>
            <xs:documentation>
              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 <a href="Ext.Component.html">here</a>. <br/><br/>If you subclass Components to create your own Components, you may register them using <a href="output/Ext.ComponentMgr.html#Ext.ComponentMgr-registerType">Ext.ComponentMgr.registerType</a> in order to be able to take advantage of lazy instantiation and rendering.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='Component' type='e:Component_TYPE' substitutionGroup='eu:Observable'>
    <xs:annotation>
      <xs:documentation>
        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 <a href="Ext.Container.html">Container</a> class. Components may be added to a Container through the <a href="output/Ext.Container.html#Ext.Container-items">items</a> config option at the time the Container is created, or they may be added dynamically via the <a href="output/Ext.Container.html#Ext.Container-add">add</a> method. <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 <a href="Ext.ComponentMgr.html">Ext.ComponentMgr</a> on construction so that they can be referenced at any time via <a href="output/Ext.html#Ext-getCmp">Ext.getCmp</a>, passing the <a href="output/Ext.Component.html#Ext.Component-id">id</a>.</p><p>All user-developed visual widgets that are required to participate in automated lifecycle and size management should subclass Component (or <a href="Ext.BoxComponent.html">Ext.BoxComponent</a> 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 <a href="output/Ext.Component.html#Ext.Component-getXType">getXType</a> and <a href="output/Ext.Component.html#Ext.Component-isXType">isXType</a>. This is the list of all valid xtypes:</p><pre>xtype Class ------------- ------------------ box <a href="Ext.BoxComponent.html">Ext.BoxComponent</a> button <a href="Ext.Button.html">Ext.Button</a> buttongroup <a href="Ext.ButtonGroup.html">Ext.ButtonGroup</a> colorpalette <a href="Ext.ColorPalette.html">Ext.ColorPalette</a> component <a href="Ext.Component.html">Ext.Component</a> container <a href="Ext.Container.html">Ext.Container</a> cycle <a href="Ext.CycleButton.html">Ext.CycleButton</a> dataview <a href="Ext.DataView.html">Ext.DataView</a> datepicker <a href="Ext.DatePicker.html">Ext.DatePicker</a> editor <a href="Ext.Editor.html">Ext.Editor</a> editorgrid <a href="Ext.grid.EditorGridPanel.html">Ext.grid.EditorGridPanel</a> flash <a href="Ext.FlashComponent.html">Ext.FlashComponent</a> grid <a href="Ext.grid.GridPanel.html">Ext.grid.GridPanel</a> listview <a href="Ext.ListView.html">Ext.ListView</a> multislider <a href="Ext.slider.MultiSlider.html">Ext.slider.MultiSlider</a> panel <a href="Ext.Panel.html">Ext.Panel</a> progress <a href="Ext.ProgressBar.html">Ext.ProgressBar</a> propertygrid <a href="Ext.grid.PropertyGrid.html">Ext.grid.PropertyGrid</a> slider <a href="Ext.slider.SingleSlider.html">Ext.slider.SingleSlider</a> spacer <a href="Ext.Spacer.html">Ext.Spacer</a> splitbutton <a href="Ext.SplitButton.html">Ext.SplitButton</a> tabpanel <a href="Ext.TabPanel.html">Ext.TabPanel</a> treepanel <a href="Ext.tree.TreePanel.html">Ext.tree.TreePanel</a> viewport <a href="Ext.ViewPort.html">Ext.ViewPort</a> window <a href="Ext.Window.html">Ext.Window</a> Toolbar components --------------------------------------- paging <a href="Ext.PagingToolbar.html">Ext.PagingToolbar</a> toolbar <a href="Ext.Toolbar.html">Ext.Toolbar</a> tbbutton <a href="Ext.Toolbar.Button.html">Ext.Toolbar.Button</a> (deprecated; use button) tbfill <a href="Ext.Toolbar.Fill.html">Ext.Toolbar.Fill</a> tbitem <a href="Ext.Toolbar.Item.html">Ext.Toolbar.Item</a> tbseparator <a href="Ext.Toolbar.Separator.html">Ext.Toolbar.Separator</a> tbspacer <a href="Ext.Toolbar.Spacer.html">Ext.Toolbar.Spacer</a> tbsplit <a href="Ext.Toolbar.SplitButton.html">Ext.Toolbar.SplitButton</a> (deprecated; use splitbutton) tbtext <a href="Ext.Toolbar.TextItem.html">Ext.Toolbar.TextItem</a> Menu components --------------------------------------- menu <a href="Ext.menu.Menu.html">Ext.menu.Menu</a> colormenu <a href="Ext.menu.ColorMenu.html">Ext.menu.ColorMenu</a> datemenu <a href="Ext.menu.DateMenu.html">Ext.menu.DateMenu</a> menubaseitem <a href="Ext.menu.BaseItem.html">Ext.menu.BaseItem</a> menucheckitem <a href="Ext.menu.CheckItem.html">Ext.menu.CheckItem</a> menuitem <a href="Ext.menu.Item.html">Ext.menu.Item</a> menuseparator <a href="Ext.menu.Separator.html">Ext.menu.Separator</a> menutextitem <a href="Ext.menu.TextItem.html">Ext.menu.TextItem</a> Form components --------------------------------------- form <a href="Ext.form.FormPanel.html">Ext.form.FormPanel</a> checkbox <a href="Ext.form.Checkbox.html">Ext.form.Checkbox</a> checkboxgroup <a href="Ext.form.CheckboxGroup.html">Ext.form.CheckboxGroup</a> combo <a href="Ext.form.ComboBox.html">Ext.form.ComboBox</a> compositefield <a href="Ext.form.CompositeField.html">Ext.form.CompositeField</a> datefield <a href="Ext.form.DateField.html">Ext.form.DateField</a> displayfield <a href="Ext.form.DisplayField.html">Ext.form.DisplayField</a> field <a href="Ext.form.Field.html">Ext.form.Field</a> fieldset <a href="Ext.form.FieldSet.html">Ext.form.FieldSet</a> hidden <a href="Ext.form.Hidden.html">Ext.form.Hidden</a> htmleditor <a href="Ext.form.HtmlEditor.html">Ext.form.HtmlEditor</a> label <a href="Ext.form.Label.html">Ext.form.Label</a> numberfield <a href="Ext.form.NumberField.html">Ext.form.NumberField</a> radio <a href="Ext.form.Radio.html">Ext.form.Radio</a> radiogroup <a href="Ext.form.RadioGroup.html">Ext.form.RadioGroup</a> textarea <a href="Ext.form.TextArea.html">Ext.form.TextArea</a> textfield <a href="Ext.form.TextField.html">Ext.form.TextField</a> timefield <a href="Ext.form.TimeField.html">Ext.form.TimeField</a> trigger <a href="Ext.form.TriggerField.html">Ext.form.TriggerField</a> Chart components --------------------------------------- chart <a href="Ext.chart.Chart.html">Ext.chart.Chart</a> barchart <a href="Ext.chart.BarChart.html">Ext.chart.BarChart</a> cartesianchart <a href="Ext.chart.CartesianChart.html">Ext.chart.CartesianChart</a> columnchart <a href="Ext.chart.ColumnChart.html">Ext.chart.ColumnChart</a> linechart <a href="Ext.chart.LineChart.html">Ext.chart.LineChart</a> piechart <a href="Ext.chart.PieChart.html">Ext.chart.PieChart</a> Store xtypes --------------------------------------- arraystore <a href="Ext.data.ArrayStore.html">Ext.data.ArrayStore</a> directstore <a href="Ext.data.DirectStore.html">Ext.data.DirectStore</a> groupingstore <a href="Ext.data.GroupingStore.html">Ext.data.GroupingStore</a> jsonstore <a href="Ext.data.JsonStore.html">Ext.data.JsonStore</a> simplestore <a href="Ext.data.SimpleStore.html">Ext.data.SimpleStore</a> (deprecated; use arraystore) store <a href="Ext.data.Store.html">Ext.data.Store</a> xmlstore <a href="Ext.data.XmlStore.html">Ext.data.XmlStore</a> </pre> <p>This class serves as a typed config object for constructor of class Component.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.Component
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='Container_TYPE'>
    <xs:complexContent>
      <xs:extension base='e:BoxComponent_TYPE'>
        <xs:sequence>
            <xs:element name='activeItem' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  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 <a href="Ext.layout.AccordionLayout.html">Ext.layout.AccordionLayout</a>, <a href="Ext.layout.CardLayout.html">Ext.layout.CardLayout</a> and <a href="Ext.layout.FitLayout.html">Ext.layout.FitLayout</a>). Related to <a href="output/Ext.layout.ContainerLayout.html#Ext.layout.ContainerLayout-activeItem">Ext.layout.ContainerLayout.activeItem</a>.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='bufferResize' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  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>.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='defaults' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  This option is a means of applying default settings to all added items whether added through the <a href="output/Ext.Container.html#Ext.Container-items">items</a> config or via the <a href="output/Ext.Container.html#Ext.Container-add">add</a> or <a href="output/Ext.Container.html#Ext.Container-insert">insert</a> methods. <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 <a href="Ext.Panel.html">Ext.Panel</a> 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>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='items' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  <pre><b>&#42;&#42; IMPORTANT</b>: be sure to <b><a href="output/Ext.Container.html#Ext.Container-layout">specify a <code>layout</code></a> if needed ! &#42;&#42;</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 <a href="Ext.Component.html">Ext.Component</a></li><li>a fully instanciated object or</li><li>an object literal that:</li><li style="list-style: none"><div><ul class="mdetail-params"><li>has a specified <code><a href="output/Ext.Component.html#Ext.Component-xtype">xtype</a></code></li><li>the <a href="output/Ext.Component.html#Ext.Component-xtype">Ext.Component.xtype</a> specified is associated with the Component desired and should be chosen from one of the available xtypes as listed in <a href="Ext.Component.html">Ext.Component</a>.</li><li>If an <code><a href="output/Ext.Component.html#Ext.Component-xtype">xtype</a></code> is not explicitly specified, the <a href="output/Ext.Container.html#Ext.Container-defaultType">defaultType</a> for that Container is used.</li><li>will be "lazily instanciated", avoiding the overhead of constructing a fully instanciated Component object</li></ul></div></li></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 <a href="output/Ext.Container.html#Ext.Container-doLayout">doLayout</a> call.</li><li>Do not specify <code><a href="output/Ext.Panel.html#Ext.Panel-contentEl">contentEl</a></code>/ <code><a href="output/Ext.Panel.html#Ext.Panel-html">html</a></code> with <code>items</code>.</li></ul></div>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
                <xs:attribute name="mode" type="exml:configMode"/>
              </xs:complexType>
            </xs:element>
            <xs:element name='layout' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  <b>&#42;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. <br/><p>The sizing and positioning of child <a href="items.html">items</a> 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 <a href="output/Ext.Container.html#Ext.Container-layout">layout</a> configuration is not explicitly specified for a general purpose container (e.g. Container or Panel) the <a href="Ext.layout.ContainerLayout.html">default layout manager</a> 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><li style="list-style: none"><div><ul class="mdetail-params"><li>Example usage:</li><li style="list-style: none"><pre><code>layout: { type: 'vbox', padding: '5', align: 'left' } </code></pre></li><li><code><b>type</b></code></li><li style="list-style: none"><br/><p>The layout type to be used for this container. If not specified, a default <a href="Ext.layout.ContainerLayout.html">Ext.layout.ContainerLayout</a> 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><a href="Ext.layout.AbsoluteLayout.html">absolute</a></b></code></li><li><code><b><a href="Ext.layout.AccordionLayout.html">accordion</a></b></code></li><li><code><b><a href="Ext.layout.AnchorLayout.html">anchor</a></b></code></li><li><code><b><a href="Ext.layout.ContainerLayout.html">auto</a></b></code>     <b>Default</b></li><li><code><b><a href="Ext.layout.BorderLayout.html">border</a></b></code></li><li><code><b><a href="Ext.layout.CardLayout.html">card</a></b></code></li><li><code><b><a href="Ext.layout.ColumnLayout.html">column</a></b></code></li><li><code><b><a href="Ext.layout.FitLayout.html">fit</a></b></code></li><li><code><b><a href="Ext.layout.FormLayout.html">form</a></b></code></li><li><code><b><a href="Ext.layout.HBoxLayout.html">hbox</a></b></code></li><li><code><b><a href="Ext.layout.MenuLayout.html">menu</a></b></code></li><li><code><b><a href="Ext.layout.TableLayout.html">table</a></b></code></li><li><code><b><a href="Ext.layout.ToolbarLayout.html">toolbar</a></b></code></li><li><code><b><a href="Ext.layout.VBoxLayout.html">vbox</a></b></code></li></ul></div></li><li>Layout specific configuration properties</li><li style="list-style: none"><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></li></ul></div></li><li><u>Specify as a String</u></li><li style="list-style: none"><div><ul class="mdetail-params"><li>Example usage:</li><li style="list-style: none"><pre><code>layout: 'vbox', layoutConfig: { padding: '5', align: 'left' } </code></pre></li><li><code><b>layout</b></code></li><li style="list-style: none"><br/><p>The layout <code>type</code> to be used for this container (see list of valid layout type values above).</p><br/></li><li><code><b><a href="output/Ext.Container.html#Ext.Container-layoutConfig">layoutConfig</a></b></code></li><li style="list-style: none"><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></li></ul></div></li></ul></div>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='layoutConfig' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  This is a config object containing properties specific to the chosen <b><code><a href="output/Ext.Container.html#Ext.Container-layout">layout</a></code></b> if <b><code><a href="output/Ext.Container.html#Ext.Container-layout">layout</a></code></b> has been specified as a <i>string</i>.<br/><br/>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='activeItem'>
          <xs:annotation>
            <xs:documentation>
              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 <a href="Ext.layout.AccordionLayout.html">Ext.layout.AccordionLayout</a>, <a href="Ext.layout.CardLayout.html">Ext.layout.CardLayout</a> and <a href="Ext.layout.FitLayout.html">Ext.layout.FitLayout</a>). Related to <a href="output/Ext.layout.ContainerLayout.html#Ext.layout.ContainerLayout-activeItem">Ext.layout.ContainerLayout.activeItem</a>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='autoDestroy'>
          <xs:annotation>
            <xs:documentation>
              If true the container will automatically destroy any contained component that is removed from it, else destruction must be handled manually (defaults to true).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='bufferResize'>
          <xs:annotation>
            <xs:documentation>
              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>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='defaultType'>
          <xs:annotation>
            <xs:documentation>
              The default <a href="Ext.Component.html">xtype</a> 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>Defaults to <code>'panel'</code>, except <a href="Ext.menu.Menu.html">Ext.menu.Menu</a> which defaults to <code>'menuitem'</code>, and <a href="Ext.Toolbar.html">Ext.Toolbar</a> and <a href="Ext.ButtonGroup.html">Ext.ButtonGroup</a> which default to <code>'button'</code>.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='defaults'>
          <xs:annotation>
            <xs:documentation>
              This option is a means of applying default settings to all added items whether added through the <a href="output/Ext.Container.html#Ext.Container-items">items</a> config or via the <a href="output/Ext.Container.html#Ext.Container-add">add</a> or <a href="output/Ext.Container.html#Ext.Container-insert">insert</a> methods. <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 <a href="Ext.Panel.html">Ext.Panel</a> 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>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='forceLayout'>
          <xs:annotation>
            <xs:documentation>
              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).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='hideBorders'>
          <xs:annotation>
            <xs:documentation>
              True to hide the borders of each contained component, false to defer to the component's existing border settings (defaults to false).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='items'>
          <xs:annotation>
            <xs:documentation>
              <pre><b>&#42;&#42; IMPORTANT</b>: be sure to <b><a href="output/Ext.Container.html#Ext.Container-layout">specify a <code>layout</code></a> if needed ! &#42;&#42;</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 <a href="Ext.Component.html">Ext.Component</a></li><li>a fully instanciated object or</li><li>an object literal that:</li><li style="list-style: none"><div><ul class="mdetail-params"><li>has a specified <code><a href="output/Ext.Component.html#Ext.Component-xtype">xtype</a></code></li><li>the <a href="output/Ext.Component.html#Ext.Component-xtype">Ext.Component.xtype</a> specified is associated with the Component desired and should be chosen from one of the available xtypes as listed in <a href="Ext.Component.html">Ext.Component</a>.</li><li>If an <code><a href="output/Ext.Component.html#Ext.Component-xtype">xtype</a></code> is not explicitly specified, the <a href="output/Ext.Container.html#Ext.Container-defaultType">defaultType</a> for that Container is used.</li><li>will be "lazily instanciated", avoiding the overhead of constructing a fully instanciated Component object</li></ul></div></li></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 <a href="output/Ext.Container.html#Ext.Container-doLayout">doLayout</a> call.</li><li>Do not specify <code><a href="output/Ext.Panel.html#Ext.Panel-contentEl">contentEl</a></code>/ <code><a href="output/Ext.Panel.html#Ext.Panel-html">html</a></code> with <code>items</code>.</li></ul></div>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='layout'>
          <xs:annotation>
            <xs:documentation>
              <b>&#42;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. <br/><p>The sizing and positioning of child <a href="items.html">items</a> 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 <a href="output/Ext.Container.html#Ext.Container-layout">layout</a> configuration is not explicitly specified for a general purpose container (e.g. Container or Panel) the <a href="Ext.layout.ContainerLayout.html">default layout manager</a> 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><li style="list-style: none"><div><ul class="mdetail-params"><li>Example usage:</li><li style="list-style: none"><pre><code>layout: { type: 'vbox', padding: '5', align: 'left' } </code></pre></li><li><code><b>type</b></code></li><li style="list-style: none"><br/><p>The layout type to be used for this container. If not specified, a default <a href="Ext.layout.ContainerLayout.html">Ext.layout.ContainerLayout</a> 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><a href="Ext.layout.AbsoluteLayout.html">absolute</a></b></code></li><li><code><b><a href="Ext.layout.AccordionLayout.html">accordion</a></b></code></li><li><code><b><a href="Ext.layout.AnchorLayout.html">anchor</a></b></code></li><li><code><b><a href="Ext.layout.ContainerLayout.html">auto</a></b></code>     <b>Default</b></li><li><code><b><a href="Ext.layout.BorderLayout.html">border</a></b></code></li><li><code><b><a href="Ext.layout.CardLayout.html">card</a></b></code></li><li><code><b><a href="Ext.layout.ColumnLayout.html">column</a></b></code></li><li><code><b><a href="Ext.layout.FitLayout.html">fit</a></b></code></li><li><code><b><a href="Ext.layout.FormLayout.html">form</a></b></code></li><li><code><b><a href="Ext.layout.HBoxLayout.html">hbox</a></b></code></li><li><code><b><a href="Ext.layout.MenuLayout.html">menu</a></b></code></li><li><code><b><a href="Ext.layout.TableLayout.html">table</a></b></code></li><li><code><b><a href="Ext.layout.ToolbarLayout.html">toolbar</a></b></code></li><li><code><b><a href="Ext.layout.VBoxLayout.html">vbox</a></b></code></li></ul></div></li><li>Layout specific configuration properties</li><li style="list-style: none"><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></li></ul></div></li><li><u>Specify as a String</u></li><li style="list-style: none"><div><ul class="mdetail-params"><li>Example usage:</li><li style="list-style: none"><pre><code>layout: 'vbox', layoutConfig: { padding: '5', align: 'left' } </code></pre></li><li><code><b>layout</b></code></li><li style="list-style: none"><br/><p>The layout <code>type</code> to be used for this container (see list of valid layout type values above).</p><br/></li><li><code><b><a href="output/Ext.Container.html#Ext.Container-layoutConfig">layoutConfig</a></b></code></li><li style="list-style: none"><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></li></ul></div></li></ul></div>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='layoutConfig'>
          <xs:annotation>
            <xs:documentation>
              This is a config object containing properties specific to the chosen <b><code><a href="output/Ext.Container.html#Ext.Container-layout">layout</a></code></b> if <b><code><a href="output/Ext.Container.html#Ext.Container-layout">layout</a></code></b> has been specified as a <i>string</i>.<br/><br/>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='monitorResize'>
          <xs:annotation>
            <xs:documentation>
              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><a href="output/Ext.Container.html#Ext.Container-layout">layout</a></code> and should not need to be set manually.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='resizeEvent'>
          <xs:annotation>
            <xs:documentation>
              The event to listen to for resizing in layouts. Defaults to <code>'resize'</code>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='Container' type='e:Container_TYPE' substitutionGroup='e:BoxComponent'>
    <xs:annotation>
      <xs:documentation>
        Base class for any <a href="Ext.BoxComponent.html">Ext.BoxComponent</a> that may contain other Components. Containers handle the basic behavior of containing items, namely adding, inserting and removing items. <p>The most commonly used Container classes are <a href="Ext.Panel.html">Ext.Panel</a>, <a href="Ext.Window.html">Ext.Window</a> and <a href="Ext.TabPanel.html">Ext.TabPanel</a>. 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><a href="output/Ext.Component.html#Ext.Component-autoEl">autoEl</a></b></code> config option. This is a useful technique when creating embedded <a href="Ext.layout.ColumnLayout.html">column</a> layouts inside <a href="Ext.form.FormPanel.html">FormPanels</a> 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:</p><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&gt; element. items: [{ items: { xtype: 'datefield', name: 'startDate', fieldLabel: 'Start date' } }, { items: { xtype: 'datefield', name: 'endDate', fieldLabel: 'End date' } }] });</code></pre><br/><br/> <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><a href="output/Ext.Container.html#Ext.Container-layout">layout</a></b></code> configuration property.</p><p>When either specifying child <code><a href="output/Ext.Container.html#Ext.Container-items">items</a></code> of a Container, or dynamically <a href="output/Ext.Container.html#Ext.Container-add">adding</a> 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><a href="output/Ext.Container.html#Ext.Container-layout">layout</a></code></b> schemes. By default, Containers use the <a href="Ext.layout.ContainerLayout.html">ContainerLayout</a> 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><a href="output/Ext.Container.html#Ext.Container-layout">layout</a></code></b> (e.g. widgets like GridPanels or TreePanels are added to Containers for which no <code><b><a href="output/Ext.Container.html#Ext.Container-layout">layout</a></b></code> has been specified). If a Container is left to use the default <a href="Ext.layout.ContainerLayout.html">ContainerLayout</a> 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 <a href="Ext.layout.CardLayout.html">Ext.layout.CardLayout</a>, <a href="Ext.layout.AnchorLayout.html">Ext.layout.AnchorLayout</a>, <a href="Ext.layout.FormLayout.html">Ext.layout.FormLayout</a>, and <a href="Ext.layout.TableLayout.html">Ext.layout.TableLayout</a>. For example:</p><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); // <a href="Ext.TabPanel.html">Ext.TabPanel</a> implicitly uses <a href="Ext.layout.CardLayout.html">CardLayout</a> myTabPanel.<a href="output/Ext.TabPanel.html#Ext.TabPanel-setActiveTab">setActiveTab</a>(myNewGrid); </code></pre><br/><br/> <p>The example above adds a newly created GridPanel to a TabPanel. Note that a TabPanel uses <a href="Ext.layout.CardLayout.html">Ext.layout.CardLayout</a> as its layout manager which means all its child items are sized to <a href="Ext.layout.FitLayout.html">fit</a> exactly into its client area.</p><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><a href="output/Ext.Container.html#Ext.Container-layout">layout</a></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><a href="output/Ext.Container.html#Ext.Container-layout">layout</a></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 <a href="output/Ext.Component.html#Ext.Component-xtype">xtype</a>, 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> <p>This class represents the xtype 'container' and serves as a typed config object for constructor of class Container.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.Container
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='CycleButton_TYPE'>
    <xs:complexContent>
      <xs:extension base='e:SplitButton_TYPE'>
        <xs:sequence>
            <xs:element name='changeHandler' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A callback function that will be invoked each time the active menu item in the button's menu has changed. If this callback is not supplied, the SplitButton will instead fire the <a href="output/Ext.CycleButton.html#Ext.CycleButton-change">change</a> event on active item change. The changeHandler function will be called with the following argument list: (SplitButton this, Ext.menu.CheckItem item)
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='items' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  An array of <a href="Ext.menu.CheckItem.html">Ext.menu.CheckItem</a> <b>config</b> objects to be used when creating the button's menu items (e.g., {text:'Foo', iconCls:'foo-icon'})
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
                <xs:attribute name="mode" type="exml:configMode"/>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='changeHandler'>
          <xs:annotation>
            <xs:documentation>
              A callback function that will be invoked each time the active menu item in the button's menu has changed. If this callback is not supplied, the SplitButton will instead fire the <a href="output/Ext.CycleButton.html#Ext.CycleButton-change">change</a> event on active item change. The changeHandler function will be called with the following argument list: (SplitButton this, Ext.menu.CheckItem item)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='forceIcon'>
          <xs:annotation>
            <xs:documentation>
              A css class which sets an image to be used as the static icon for this button. This icon will always be displayed regardless of which item is selected in the dropdown list. This overrides the default behavior of changing the button's icon to match the selected item's icon on change.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='items'>
          <xs:annotation>
            <xs:documentation>
              An array of <a href="Ext.menu.CheckItem.html">Ext.menu.CheckItem</a> <b>config</b> objects to be used when creating the button's menu items (e.g., {text:'Foo', iconCls:'foo-icon'})
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='prependText'>
          <xs:annotation>
            <xs:documentation>
              A static string to prepend before the active item's text when displayed as the button's text (only applies when showText = true, defaults to '')
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='showText'>
          <xs:annotation>
            <xs:documentation>
              True to display the active item's text as the button text (defaults to false)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='CycleButton' type='e:CycleButton_TYPE' substitutionGroup='e:SplitButton'>
    <xs:annotation>
      <xs:documentation>
        A specialized SplitButton that contains a menu of <a href="Ext.menu.CheckItem.html">Ext.menu.CheckItem</a> elements. The button automatically cycles through each menu item on click, raising the button's <a href="output/Ext.CycleButton.html#Ext.CycleButton-change">change</a> event (or calling the button's <a href="output/Ext.CycleButton.html#Ext.CycleButton-changeHandler">changeHandler</a> function, if supplied) for the active menu item. Clicking on the arrow section of the button displays the dropdown menu just like a normal SplitButton. Example usage: <pre><code>var btn = new Ext.CycleButton({ showText: true, prependText: 'View as ', items: [{ text:'text only', iconCls:'view-text', checked:true },{ text:'HTML', iconCls:'view-html' }], changeHandler:function(btn, item){ Ext.Msg.alert('Change View', item.text); } }); </code></pre> <p>This class represents the xtype 'cycle' and serves as a typed config object for constructor of class CycleButton.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.CycleButton
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='DataView_TYPE'>
    <xs:complexContent>
      <xs:extension base='e:BoxComponent_TYPE'>
        <xs:sequence>
            <xs:element name='store' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The <a href="Ext.data.Store.html">Ext.data.Store</a> to bind this DataView to.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:Boolean' name='blockRefresh'>
          <xs:annotation>
            <xs:documentation>
              Set this to true to ignore datachanged events on the bound store. This is useful if you wish to provide custom transition animations via a plugin (defaults to false)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='deferEmptyText'>
          <xs:annotation>
            <xs:documentation>
              True to defer emptyText being applied until the store's first load
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='emptyText'>
          <xs:annotation>
            <xs:documentation>
              The text to display in the view when there is no data to display (defaults to '').
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='itemSelector'>
          <xs:annotation>
            <xs:documentation>
              <b>This is a required setting</b>. A simple CSS selector (e.g. <tt>div.some-class</tt> or <tt>span:first-child</tt>) that will be used to determine what nodes this DataView will be working with.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='loadingText'>
          <xs:annotation>
            <xs:documentation>
              A string to display during data load operations (defaults to undefined). If specified, this text will be displayed in a loading div and the view's contents will be cleared while loading, otherwise the view's contents will continue to display normally until the new data is loaded and the contents are replaced.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='multiSelect'>
          <xs:annotation>
            <xs:documentation>
              True to allow selection of more than one item at a time, false to allow selection of only a single item at a time or no selection at all, depending on the value of <a href="output/Ext.DataView.html#Ext.DataView-singleSelect">singleSelect</a> (defaults to false).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='overClass'>
          <xs:annotation>
            <xs:documentation>
              A CSS class to apply to each item in the view on mouseover (defaults to undefined).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='selectedClass'>
          <xs:annotation>
            <xs:documentation>
              A CSS class to apply to each selected item in the view (defaults to 'x-view-selected').
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='simpleSelect'>
          <xs:annotation>
            <xs:documentation>
              True to enable multiselection by clicking on multiple items without requiring the user to hold Shift or Ctrl, false to force the user to hold Ctrl or Shift to select more than on item (defaults to false).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='singleSelect'>
          <xs:annotation>
            <xs:documentation>
              True to allow selection of exactly one item at a time, false to allow no selection at all (defaults to false). Note that if <a href="output/Ext.DataView.html#Ext.DataView-multiSelect">multiSelect</a> = true, this value will be ignored.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='store'>
          <xs:annotation>
            <xs:documentation>
              The <a href="Ext.data.Store.html">Ext.data.Store</a> to bind this DataView to.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='trackOver'>
          <xs:annotation>
            <xs:documentation>
              True to enable mouseenter and mouseleave events
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='DataView' type='e:DataView_TYPE' substitutionGroup='e:BoxComponent'>
    <xs:annotation>
      <xs:documentation>
        A mechanism for displaying data using custom layout templates and formatting. DataView uses an <a href="Ext.XTemplate.html">Ext.XTemplate</a> as its internal templating mechanism, and is bound to an <a href="Ext.data.Store.html">Ext.data.Store</a> so that as the data in the store changes the view is automatically updated to reflect the changes. The view also provides built-in behavior for many common events that can occur for its contained items including click, doubleclick, mouseover, mouseout, etc. as well as a built-in selection model. <b>In order to use these features, an <a href="output/Ext.DataView.html#Ext.DataView-itemSelector">itemSelector</a> config must be provided for the DataView to determine what nodes it will be working with.</b> <p>The example below binds a DataView to a <a href="Ext.data.Store.html">Ext.data.Store</a> and renders it into an <a href="Ext.Panel.html">Ext.Panel</a>.</p><pre><code>var store = new Ext.data.JsonStore({ url: 'get-images.php', root: 'images', fields: [ 'name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date', dateFormat:'timestamp'} ] }); store.load(); var tpl = new Ext.XTemplate( '&lt;tpl for="."&gt;', '&lt;div class="thumb-wrap" id="{name}"&gt;', '&lt;div class="thumb"&gt;&lt;img src="{url}" title="{name}"&gt;&lt;/div&gt;', '&lt;span class="x-editable"&gt;{shortName}&lt;/span&gt;&lt;/div&gt;', '&lt;/tpl&gt;', '&lt;div class="x-clear"&gt;&lt;/div&gt;' ); var panel = new Ext.Panel({ id:'images-view', frame:true, width:535, autoHeight:true, collapsible:true, layout:'fit', title:'Simple DataView', items: new Ext.DataView({ store: store, tpl: tpl, autoHeight:true, multiSelect: true, overClass:'x-view-over', itemSelector:'div.thumb-wrap', emptyText: 'No images to display' }) }); panel.render(document.body); </code></pre> <p>This class represents the xtype 'dataview' and serves as a typed config object for constructor of class DataView.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.DataView
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='DatePicker_TYPE'>
    <xs:complexContent>
      <xs:extension base='e:Component_TYPE'>
        <xs:sequence>
            <xs:element name='dayNames' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  An array of textual day names which can be overridden for localization support (defaults to Date.dayNames)
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
                <xs:attribute name="mode" type="exml:configMode"/>
              </xs:complexType>
            </xs:element>
            <xs:element name='disabledDates' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  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 <a href="output/Ext.DatePicker.html#Ext.DatePicker-format">format</a> 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'].
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
                <xs:attribute name="mode" type="exml:configMode"/>
              </xs:complexType>
            </xs:element>
            <xs:element name='disabledDatesRE' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  JavaScript regular expression used to disable a pattern of dates (defaults to null). The <a href="output/Ext.DatePicker.html#Ext.DatePicker-disabledDates">disabledDates</a> config will generate this regex internally, but if you specify disabledDatesRE it will take precedence over the disabledDates value.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='disabledDays' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
                <xs:attribute name="mode" type="exml:configMode"/>
              </xs:complexType>
            </xs:element>
            <xs:element name='handler' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  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>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='monthNames' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  An array of textual month names which can be overridden for localization support (defaults to Date.monthNames)
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
                <xs:attribute name="mode" type="exml:configMode"/>
              </xs:complexType>
            </xs:element>
            <xs:element name='scope' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The scope (<code><b>this</b></code> reference) in which the <code><a href="output/Ext.DatePicker.html#Ext.DatePicker-handler">handler</a></code> function will be called. Defaults to this DatePicker instance.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='cancelText'>
          <xs:annotation>
            <xs:documentation>
              The text to display on the cancel button (defaults to <code>'Cancel'</code>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='dayNames'>
          <xs:annotation>
            <xs:documentation>
              An array of textual day names which can be overridden for localization support (defaults to Date.dayNames)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='disabledDates'>
          <xs:annotation>
            <xs:documentation>
              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 <a href="output/Ext.DatePicker.html#Ext.DatePicker-format">format</a> 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'].
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='disabledDatesRE'>
          <xs:annotation>
            <xs:documentation>
              JavaScript regular expression used to disable a pattern of dates (defaults to null). The <a href="output/Ext.DatePicker.html#Ext.DatePicker-disabledDates">disabledDates</a> config will generate this regex internally, but if you specify disabledDatesRE it will take precedence over the disabledDates value.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='disabledDatesText'>
          <xs:annotation>
            <xs:documentation>
              The tooltip text to display when the date falls on a disabled date (defaults to <code>'Disabled'</code>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='disabledDays'>
          <xs:annotation>
            <xs:documentation>
              An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='disabledDaysText'>
          <xs:annotation>
            <xs:documentation>
              The tooltip to display when the date falls on a disabled day (defaults to <code>'Disabled'</code>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='format'>
          <xs:annotation>
            <xs:documentation>
              The default date format string which can be overridden for localization support. The format must be valid according to <a href="output/Date.html#Date-parseDate">Date.parseDate</a> (defaults to <code>'m/d/y'</code>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='handler'>
          <xs:annotation>
            <xs:documentation>
              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>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Date' name='maxDate'>
          <xs:annotation>
            <xs:documentation>
              Maximum allowable date (JavaScript date object, defaults to null)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='maxText'>
          <xs:annotation>
            <xs:documentation>
              The error text to display if the maxDate validation fails (defaults to <code>'This date is after the maximum date'</code>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Date' name='minDate'>
          <xs:annotation>
            <xs:documentation>
              Minimum allowable date (JavaScript date object, defaults to null)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='minText'>
          <xs:annotation>
            <xs:documentation>
              The error text to display if the minDate validation fails (defaults to <code>'This date is before the minimum date'</code>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='monthNames'>
          <xs:annotation>
            <xs:documentation>
              An array of textual month names which can be overridden for localization support (defaults to Date.monthNames)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='monthYearText'>
          <xs:annotation>
            <xs:documentation>
              The header month selector tooltip (defaults to <code>'Choose a month (Control+Up/Down to move years)'</code>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='nextText'>
          <xs:annotation>
            <xs:documentation>
              The next month navigation button tooltip (defaults to <code>'Next Month (Control+Right)'</code>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='okText'>
          <xs:annotation>
            <xs:documentation>
              The text to display on the ok button (defaults to <code>' OK '</code> to give the user extra clicking room)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='prevText'>
          <xs:annotation>
            <xs:documentation>
              The previous month navigation button tooltip (defaults to <code>'Previous Month (Control+Left)'</code>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='scope'>
          <xs:annotation>
            <xs:documentation>
              The scope (<code><b>this</b></code> reference) in which the <code><a href="output/Ext.DatePicker.html#Ext.DatePicker-handler">handler</a></code> function will be called. Defaults to this DatePicker instance.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='showToday'>
          <xs:annotation>
            <xs:documentation>
              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>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='startDay'>
          <xs:annotation>
            <xs:documentation>
              Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='todayText'>
          <xs:annotation>
            <xs:documentation>
              The text to display on the button that selects the current date (defaults to <code>'Today'</code>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='todayTip'>
          <xs:annotation>
            <xs:documentation>
              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.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='DatePicker' type='e:DatePicker_TYPE' substitutionGroup='e:Component'>
    <xs:annotation>
      <xs:documentation>
        A popup date picker. This class is used by the <a href="Ext.form.DateField.html">DateField</a> class to allow browsing and selection of valid dates. <p>All the string values documented below may be overridden by including an Ext locale file in your page.</p> <p>This class represents the xtype 'datepicker' and serves as a typed config object for constructor of class DatePicker.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.DatePicker
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='Editor_TYPE'>
    <xs:complexContent>
      <xs:extension base='e:Component_TYPE'>
        <xs:sequence>
            <xs:element name='autoSize' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  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)
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='field' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The Field object (or descendant) or config object for field
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='offsets' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The offsets to use when aligning (see <a href="output/Ext.Element.html#Ext.Element-alignTo">Ext.Element.alignTo</a> for more details. Defaults to <tt>[0, 0]</tt>.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
                <xs:attribute name="mode" type="exml:configMode"/>
              </xs:complexType>
            </xs:element>
            <xs:element name='shadow' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  "sides" for sides/bottom only, "frame" for 4-way shadow, and "drop" for bottom-right shadow (defaults to "frame")
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='value' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The data value of the underlying field (defaults to "")
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='alignment'>
          <xs:annotation>
            <xs:documentation>
              The position to align to (see <a href="output/Ext.Element.html#Ext.Element-alignTo">Ext.Element.alignTo</a> for more details, defaults to "c-c?").
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='allowBlur'>
          <xs:annotation>
            <xs:documentation>
              True to <a href="output/Ext.Editor.html#Ext.Editor-completeEdit">complete the editing process</a> if in edit mode when the field is blurred. Defaults to <tt>true</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='autoSize'>
          <xs:annotation>
            <xs:documentation>
              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)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='cancelOnEsc'>
          <xs:annotation>
            <xs:documentation>
              True to cancel the edit when the escape key is pressed. Defaults to <tt>true</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='completeOnEnter'>
          <xs:annotation>
            <xs:documentation>
              True to complete the edit when the enter key is pressed. Defaults to <tt>true</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='constrain'>
          <xs:annotation>
            <xs:documentation>
              True to constrain the editor to the viewport
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='field'>
          <xs:annotation>
            <xs:documentation>
              The Field object (or descendant) or config object for field
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='hideEl'>
          <xs:annotation>
            <xs:documentation>
              False to keep the bound element visible while the editor is displayed (defaults to true)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='ignoreNoChange'>
          <xs:annotation>
            <xs:documentation>
              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.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='offsets'>
          <xs:annotation>
            <xs:documentation>
              The offsets to use when aligning (see <a href="output/Ext.Element.html#Ext.Element-alignTo">Ext.Element.alignTo</a> for more details. Defaults to <tt>[0, 0]</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='revertInvalid'>
          <xs:annotation>
            <xs:documentation>
              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)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='shadow'>
          <xs:annotation>
            <xs:documentation>
              "sides" for sides/bottom only, "frame" for 4-way shadow, and "drop" for bottom-right shadow (defaults to "frame")
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='swallowKeys'>
          <xs:annotation>
            <xs:documentation>
              Handle the keydown/keypress events so they don't propagate (defaults to true)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='updateEl'>
          <xs:annotation>
            <xs:documentation>
              True to update the innerHTML of the bound element when the update completes (defaults to false)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='value'>
          <xs:annotation>
            <xs:documentation>
              The data value of the underlying field (defaults to "")
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='Editor' type='e:Editor_TYPE' substitutionGroup='e:Component'>
    <xs:annotation>
      <xs:documentation>
        A base editor field that handles displaying/hiding on demand and has some built-in sizing and event handling logic. <p>This class represents the xtype 'editor' and serves as a typed config object for constructor of class Editor.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.Editor
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='FlashComponent_TYPE'>
    <xs:complexContent>
      <xs:extension base='e:BoxComponent_TYPE'>
        <xs:sequence>
            <xs:element name='flashParams' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A set of key value pairs to be passed to the flash object as parameters. Possible parameters can be found here: http://kb2.adobe.com/cps/127/tn_12701.html Defaults to <tt>undefined</tt>.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='flashVars' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A set of key value pairs to be passed to the flash object as flash variables. Defaults to <tt>undefined</tt>.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='backgroundColor'>
          <xs:annotation>
            <xs:documentation>
              The background color of the chart. Defaults to <tt>'#ffffff'</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='expressInstall'>
          <xs:annotation>
            <xs:documentation>
              True to prompt the user to install flash if not installed. Note that this uses Ext.FlashComponent.EXPRESS_INSTALL_URL, which should be set to the local resource. Defaults to <tt>false</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='flashParams'>
          <xs:annotation>
            <xs:documentation>
              A set of key value pairs to be passed to the flash object as parameters. Possible parameters can be found here: http://kb2.adobe.com/cps/127/tn_12701.html Defaults to <tt>undefined</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='flashVars'>
          <xs:annotation>
            <xs:documentation>
              A set of key value pairs to be passed to the flash object as flash variables. Defaults to <tt>undefined</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='flashVersion'>
          <xs:annotation>
            <xs:documentation>
              Indicates the version the flash content was published for. Defaults to <tt>'9.0.115'</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='url'>
          <xs:annotation>
            <xs:documentation>
              The URL of the chart to include. Defaults to <tt>undefined</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='wmode'>
          <xs:annotation>
            <xs:documentation>
              The wmode of the flash object. This can be used to control layering. Defaults to <tt>'opaque'</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='FlashComponent' type='e:FlashComponent_TYPE' substitutionGroup='e:BoxComponent'>
    <xs:annotation>
      <xs:documentation>
        <p>This class represents the xtype 'flash' and serves as a typed config object for constructor of class FlashComponent.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.FlashComponent
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='Fx_TYPE'>
        <xs:sequence>
            <xs:element name='afterStyle' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A style specification string, e.g. <tt>"width:100px"</tt>, or an object in the form <tt>{width:"100px"}</tt>, or a function which returns such a specification that will be applied to the Element after the effect finishes.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='callback' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A function called when the effect is finished. Note that effects are queued internally by the Fx class, so a callback is not required to specify another effect -- effects can simply be chained together and called in sequence (see note for <b><u>Method Chaining</u></b> above), for example:<pre><code>el.slideIn().highlight(); </code></pre>The callback is intended for any additional code that should run once a particular effect has completed. The Element being operated upon is passed as the first parameter.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='scope' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The scope (<code>this</code> reference) in which the <tt><a href="output/Ext.Fx.html#Ext.Fx-callback">callback</a></tt> function is executed. Defaults to the browser window.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='afterCls'>
          <xs:annotation>
            <xs:documentation>
              A css class to apply after the effect
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='afterStyle'>
          <xs:annotation>
            <xs:documentation>
              A style specification string, e.g. <tt>"width:100px"</tt>, or an object in the form <tt>{width:"100px"}</tt>, or a function which returns such a specification that will be applied to the Element after the effect finishes.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='block'>
          <xs:annotation>
            <xs:documentation>
              Whether the effect should block other effects from queueing while it runs
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='callback'>
          <xs:annotation>
            <xs:documentation>
              A function called when the effect is finished. Note that effects are queued internally by the Fx class, so a callback is not required to specify another effect -- effects can simply be chained together and called in sequence (see note for <b><u>Method Chaining</u></b> above), for example:<pre><code>el.slideIn().highlight(); </code></pre>The callback is intended for any additional code that should run once a particular effect has completed. The Element being operated upon is passed as the first parameter.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='concurrent'>
          <xs:annotation>
            <xs:documentation>
              Whether to allow subsequently-queued effects to run at the same time as the current effect, or to ensure that they run in sequence
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='duration'>
          <xs:annotation>
            <xs:documentation>
              The length of time (in seconds) that the effect should last
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='easing'>
          <xs:annotation>
            <xs:documentation>
              A valid Ext.lib.Easing value for the effect:<br/><br/><div class="mdetail-params"><ul><li><b><tt>backBoth</tt></b></li><li><b><tt>backIn</tt></b></li><li><b><tt>backOut</tt></b></li><li><b><tt>bounceBoth</tt></b></li><li><b><tt>bounceIn</tt></b></li><li><b><tt>bounceOut</tt></b></li><li><b><tt>easeBoth</tt></b></li><li><b><tt>easeBothStrong</tt></b></li><li><b><tt>easeIn</tt></b></li><li><b><tt>easeInStrong</tt></b></li><li><b><tt>easeNone</tt></b></li><li><b><tt>easeOut</tt></b></li><li><b><tt>easeOutStrong</tt></b></li><li><b><tt>elasticBoth</tt></b></li><li><b><tt>elasticIn</tt></b></li><li><b><tt>elasticOut</tt></b></li></ul></div>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='endOpacity'>
          <xs:annotation>
            <xs:documentation>
              Only applicable for <a href="output/Ext.Fx.html#Ext.Fx-fadeIn">fadeIn</a> or <a href="output/Ext.Fx.html#Ext.Fx-fadeOut">fadeOut</a>, a number between <tt>0</tt> and <tt>1</tt> inclusive to configure the ending opacity value.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='remove'>
          <xs:annotation>
            <xs:documentation>
              Whether the Element should be removed from the DOM and destroyed after the effect finishes
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='scope'>
          <xs:annotation>
            <xs:documentation>
              The scope (<code>this</code> reference) in which the <tt><a href="output/Ext.Fx.html#Ext.Fx-callback">callback</a></tt> function is executed. Defaults to the browser window.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='stopFx'>
          <xs:annotation>
            <xs:documentation>
              Whether preceding effects should be stopped and removed before running current effect (only applies to non blocking effects)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='useDisplay'>
          <xs:annotation>
            <xs:documentation>
              Whether to use the <i>display</i> CSS property instead of <i>visibility</i> when hiding Elements (only applies to effects that end with the element being visually hidden, ignored otherwise)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
  </xs:complexType>
  <xs:element name='Fx' type='e:Fx_TYPE'>
    <xs:annotation>
      <xs:documentation>
        A class to provide basic animation and visual effects support. <b>Note:</b> This class is automatically applied to the <a href="Ext.Element.html">Ext.Element</a> interface when included, so all effects calls should be performed via <a href="Ext.Element.html">Ext.Element</a>. Conversely, since the effects are not actually defined in <a href="Ext.Element.html">Ext.Element</a>, Ext.Fx <b>must</b> be <a href="output/Ext.html#Ext-enableFx">included</a> in order for the Element effects to work. <br/><p style="font-weight: bold"><u>Method Chaining</u></p><p>It is important to note that although the Fx methods and many non-Fx Element methods support "method chaining" in that they return the Element object itself as the method return value, it is not always possible to mix the two in a single method chain. The Fx methods use an internal effects queue so that each effect can be properly timed and sequenced. Non-Fx methods, on the other hand, have no such internal queueing and will always execute immediately. For this reason, while it may be possible to mix certain Fx and non-Fx method calls in a single chain, it may not always provide the expected results and should be done with care. Also see <tt><a href="output/Ext.Fx.html#Ext.Fx-callback">callback</a></tt>.</p><br/><p style="font-weight: bold"><u>Anchor Options for Motion Effects</u></p><p>Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element that will serve as either the start or end point of the animation. Following are all of the supported anchor positions:</p><pre>Value Description ----- ----------------------------- tl The top left corner t The center of the top edge tr The top right corner l The center of the left edge r The center of the right edge bl The bottom left corner b The center of the bottom edge br The bottom right corner </pre><b>Note</b>: some Fx methods accept specific custom config parameters. The options shown in the Config Options section below are common options that can be passed to any Fx method unless otherwise noted. <p>This class serves as a typed config object for constructor of class Fx.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.Fx
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='KeyNav_TYPE'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:String' name='defaultEventAction'>
          <xs:annotation>
            <xs:documentation>
              The method to call on the <a href="Ext.EventObject.html">Ext.EventObject</a> after this KeyNav intercepts a key. Valid values are <a href="output/Ext.EventObject.html#Ext.EventObject-stopEvent">Ext.EventObject.stopEvent</a>, <a href="output/Ext.EventObject.html#Ext.EventObject-preventDefault">Ext.EventObject.preventDefault</a> and <a href="output/Ext.EventObject.html#Ext.EventObject-stopPropagation">Ext.EventObject.stopPropagation</a> (defaults to 'stopEvent')
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='disabled'>
          <xs:annotation>
            <xs:documentation>
              True to disable this KeyNav instance (defaults to false)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='forceKeyDown'>
          <xs:annotation>
            <xs:documentation>
              Handle the keydown event instead of keypress (defaults to false). KeyNav automatically does this for IE since IE does not propagate special keys on keypress, but setting this to true will force other browsers to also handle keydown instead of keypress.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
  </xs:complexType>
  <xs:element name='KeyNav' type='e:KeyNav_TYPE'>
    <xs:annotation>
      <xs:documentation>
        Provides a convenient wrapper for normalized keyboard navigation. KeyNav allows you to bind navigation keys to function calls that will get called when the keys are pressed, providing an easy way to implement custom navigation schemes for any UI component. <p>The following are all of the possible keys that can be implemented: enter, left, right, up, down, tab, esc, pageUp, pageDown, del, home, end. Usage:</p><pre><code>var nav = new Ext.KeyNav("my-element", { "left" : function(e){ this.moveLeft(e.ctrlKey); }, "right" : function(e){ this.moveRight(e.ctrlKey); }, "enter" : function(e){ this.save(); }, scope : this }); </code></pre> <p>This class serves as a typed config object for constructor of class KeyNav.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.KeyNav
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='Layer_TYPE'>
        <xs:sequence>
            <xs:element name='dh' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  DomHelper object config to create element with (defaults to {tag: 'div', cls: 'x-layer'}).
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='shadow' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  True to automatically create an <a href="Ext.Shadow.html">Ext.Shadow</a>, or a string indicating the shadow's display <a href="output/Ext.Shadow.html#Ext.Shadow-mode">Ext.Shadow.mode</a>. False to disable the shadow. (defaults to false)
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='cls'>
          <xs:annotation>
            <xs:documentation>
              CSS class to add to the element
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='constrain'>
          <xs:annotation>
            <xs:documentation>
              False to disable constrain to viewport (defaults to true)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='dh'>
          <xs:annotation>
            <xs:documentation>
              DomHelper object config to create element with (defaults to {tag: 'div', cls: 'x-layer'}).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='shadow'>
          <xs:annotation>
            <xs:documentation>
              True to automatically create an <a href="Ext.Shadow.html">Ext.Shadow</a>, or a string indicating the shadow's display <a href="output/Ext.Shadow.html#Ext.Shadow-mode">Ext.Shadow.mode</a>. False to disable the shadow. (defaults to false)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='shadowOffset'>
          <xs:annotation>
            <xs:documentation>
              Number of pixels to offset the shadow (defaults to 4)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='shim'>
          <xs:annotation>
            <xs:documentation>
              False to disable the iframe shim in browsers which need one (defaults to true)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='useDisplay'>
          <xs:annotation>
            <xs:documentation>
              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.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='zindex'>
          <xs:annotation>
            <xs:documentation>
              Starting z-index (defaults to 11000)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
  </xs:complexType>
  <xs:element name='Layer' type='e:Layer_TYPE'>
    <xs:annotation>
      <xs:documentation>
        An extended <a href="Ext.Element.html">Ext.Element</a> object that supports a shadow and shim, constrain to viewport and automatic maintaining of shadow/shim positions. <p>This class serves as a typed config object for constructor of class Layer.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.Layer
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='LoadMask_TYPE'>
        <xs:sequence>
            <xs:element name='store' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Optional Store to which the mask is bound. The mask is displayed when a load request is issued, and hidden on either load success, or load fail.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='msg'>
          <xs:annotation>
            <xs:documentation>
              The text to display in a centered loading message box (defaults to 'Loading...')
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='msgCls'>
          <xs:annotation>
            <xs:documentation>
              The CSS class to apply to the loading message element (defaults to "x-mask-loading")
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='removeMask'>
          <xs:annotation>
            <xs:documentation>
              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.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='store'>
          <xs:annotation>
            <xs:documentation>
              Optional Store to which the mask is bound. The mask is displayed when a load request is issued, and hidden on either load success, or load fail.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
  </xs:complexType>
  <xs:element name='LoadMask' type='e:LoadMask_TYPE'>
    <xs:annotation>
      <xs:documentation>
        A simple utility class for generically masking elements while loading data. If the <a href="output/Ext.LoadMask.html#Ext.LoadMask-store">store</a> 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> <p>This class serves as a typed config object for constructor of class LoadMask.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.LoadMask
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='PagingToolbar_TYPE'>
    <xs:complexContent>
      <xs:extension base='e:Toolbar_TYPE'>
        <xs:sequence>
            <xs:element name='store' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The <a href="Ext.data.Store.html">Ext.data.Store</a> the paging toolbar should use as its data source (required).
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='afterPageText'>
          <xs:annotation>
            <xs:documentation>
              Customizable piece of the default paging text (defaults to <tt>'of {0}'</tt>). Note that this string is formatted using <tt>{0}</tt> as a token that is replaced by the number of total pages. This token should be preserved when overriding this string if showing the total page count is desired.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='beforePageText'>
          <xs:annotation>
            <xs:documentation>
              The text displayed before the input item (defaults to <tt>'Page'</tt>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='displayInfo'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> to display the displayMsg (defaults to <tt>false</tt>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='displayMsg'>
          <xs:annotation>
            <xs:documentation>
              The paging status message to display (defaults to <tt>'Displaying {0} - {1} of {2}'</tt>). Note that this string is formatted using the braced numbers <tt>{0}-{2}</tt> as tokens that are replaced by the values for start, end and total respectively. These tokens should be preserved when overriding this string if showing those values is desired.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='emptyMsg'>
          <xs:annotation>
            <xs:documentation>
              The message to display when no records are found (defaults to 'No data to display')
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='firstText'>
          <xs:annotation>
            <xs:documentation>
              The quicktip text displayed for the first page button (defaults to <tt>'First Page'</tt>). <b>Note</b>: quick tips must be initialized for the quicktip to show.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='lastText'>
          <xs:annotation>
            <xs:documentation>
              The quicktip text displayed for the last page button (defaults to <tt>'Last Page'</tt>). <b>Note</b>: quick tips must be initialized for the quicktip to show.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='nextText'>
          <xs:annotation>
            <xs:documentation>
              The quicktip text displayed for the next page button (defaults to <tt>'Next Page'</tt>). <b>Note</b>: quick tips must be initialized for the quicktip to show.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='pageSize'>
          <xs:annotation>
            <xs:documentation>
              The number of records to display per page (defaults to <tt>20</tt>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='prependButtons'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> to insert any configured <tt>items</tt> <i>before</i> the paging buttons. Defaults to <tt>false</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='prevText'>
          <xs:annotation>
            <xs:documentation>
              The quicktip text displayed for the previous page button (defaults to <tt>'Previous Page'</tt>). <b>Note</b>: quick tips must be initialized for the quicktip to show.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='refreshText'>
          <xs:annotation>
            <xs:documentation>
              The quicktip text displayed for the Refresh button (defaults to <tt>'Refresh'</tt>). <b>Note</b>: quick tips must be initialized for the quicktip to show.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='store'>
          <xs:annotation>
            <xs:documentation>
              The <a href="Ext.data.Store.html">Ext.data.Store</a> the paging toolbar should use as its data source (required).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='PagingToolbar' type='e:PagingToolbar_TYPE' substitutionGroup='e:Toolbar'>
    <xs:annotation>
      <xs:documentation>
        As the amount of records increases, the time required for the browser to render them increases. Paging is used to reduce the amount of data exchanged with the client. Note: if there are more records/rows than can be viewed in the available screen area, vertical scrollbars will be added. <p>Paging is typically handled on the server side (see exception below). The client sends parameters to the server side, which the server needs to interpret and then respond with the approprate data.</p><p><b>Ext.PagingToolbar</b> is a specialized toolbar that is bound to a <a href="Ext.data.Store.html">Ext.data.Store</a> and provides automatic paging control. This Component <a href="output/Ext.data.Store.html#Ext.data.Store-load">load</a>s blocks of data into the <tt><a href="output/Ext.PagingToolbar.html#Ext.PagingToolbar-store">store</a></tt> by passing <a href="output/Ext.data.Store.html#Ext.data.Store-paramNames">paramNames</a> used for paging criteria.</p><p>PagingToolbar is typically used as one of the Grid's toolbars:</p><pre><code>Ext.QuickTips.init(); // to display button quicktips var myStore = new Ext.data.Store({ reader: new Ext.data.JsonReader({ <a href="output/Ext.data.JsonReader.html#Ext.data.JsonReader-totalProperty">totalProperty</a>: 'results', ... }), ... }); var myPageSize = 25; // server script should only send back 25 items at a time var grid = new Ext.grid.GridPanel({ ... store: myStore, bbar: new Ext.PagingToolbar({ <a href="output/Ext.PagingToolbar.html#Ext.PagingToolbar-store">store</a>: myStore, // grid and PagingToolbar using same store <a href="output/Ext.PagingToolbar.html#Ext.PagingToolbar-displayInfo">displayInfo</a>: true, <a href="output/Ext.PagingToolbar.html#Ext.PagingToolbar-pageSize">pageSize</a>: myPageSize, <a href="output/Ext.PagingToolbar.html#Ext.PagingToolbar-prependButtons">prependButtons</a>: true, items: [ 'text 1' ] }) }); </code></pre><p>To use paging, pass the paging requirements to the server when the store is first loaded.</p><pre><code>store.load({ params: { // specify params for the first page load if using paging start: 0, limit: myPageSize, // other params foo: 'bar' } }); </code></pre><p>If using <a href="output/Ext.data.Store.html#Ext.data.Store-autoLoad">store's autoLoad</a> configuration:</p><pre><code>var myStore = new Ext.data.Store({ <a href="output/Ext.data.Store.html#Ext.data.Store-autoLoad">autoLoad</a>: {params:{start: 0, limit: 25}}, ... }); </code></pre><p>The packet sent back from the server would have this form:</p><pre><code>{ "success": true, "results": 2000, "rows": [ // <b>&#42;Note:</b> this must be an Array { "id": 1, "name": "Bill", "occupation": "Gardener" }, { "id": 2, "name": "Ben", "occupation": "Horticulturalist" }, ... { "id": 25, "name": "Sue", "occupation": "Botanist" } ] } </code></pre><p><u>Paging with Local Data</u></p><p>Paging can also be accomplished with local data using extensions:</p><div class="mdetail-params"><ul><li><a href="http://extjs.com/forum/showthread.php?t=71532">Ext.ux.data.PagingStore</a></li><li>Paging Memory Proxy (examples/ux/PagingMemoryProxy.js)</li></ul></div> <p>This class represents the xtype 'paging' and serves as a typed config object for constructor of class PagingToolbar.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.PagingToolbar
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='Panel_TYPE'>
    <xs:complexContent>
      <xs:extension base='e:Container_TYPE'>
        <xs:sequence>
            <xs:element name='autoLoad' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A valid url spec according to the Updater <a href="output/Ext.Updater.html#Ext.Updater-update">Ext.Updater.update</a> 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 <a href="output/Ext.Panel.html#Ext.Panel-body">body</a> element, so it may be <a href="output/Ext.Element.html#Ext.Element-refresh">refresh</a>ed at any time.</p>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='bbar' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The bottom toolbar of the panel. This can be a <a href="Ext.Toolbar.html">Ext.Toolbar</a> 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 <a href="output/Ext.Panel.html#Ext.Panel-getBottomToolbar">getBottomToolbar</a>. <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-&gt;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>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='bbarCfg' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A <a href="Ext.DomHelper.html">DomHelper</a> element specification object specifying the element structure of this Panel's <a href="output/Ext.Panel.html#Ext.Panel-bbar">bbar</a> Element. See <code><a href="output/Ext.Panel.html#Ext.Panel-bodyCfg">bodyCfg</a></code> also.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='bodyCfg' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A <a href="Ext.DomHelper.html">DomHelper</a> element specification object may be specified for any Panel Element. <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><a href="output/Ext.Panel.html#Ext.Panel-baseCls">baseCls</a></code>):</p><pre>Panel Default Default Custom Additional Additional Element element class element class style ======== ========================== ========= ============== =========== <a href="output/Ext.Panel.html#Ext.Panel-header">header</a> div <a href="output/Ext.Panel.html#Ext.Panel-baseCls">baseCls</a>+'-header' <a href="output/Ext.Panel.html#Ext.Panel-headerCfg">headerCfg</a> headerCssClass headerStyle <a href="output/Ext.Panel.html#Ext.Panel-bwrap">bwrap</a> div <a href="output/Ext.Panel.html#Ext.Panel-baseCls">baseCls</a>+'-bwrap' <a href="output/Ext.Panel.html#Ext.Panel-bwrapCfg">bwrapCfg</a> bwrapCssClass bwrapStyle + tbar div <a href="output/Ext.Panel.html#Ext.Panel-baseCls">baseCls</a>+'-tbar' <a href="output/Ext.Panel.html#Ext.Panel-tbarCfg">tbarCfg</a> tbarCssClass tbarStyle + <a href="output/Ext.Panel.html#Ext.Panel-body">body</a> div <a href="output/Ext.Panel.html#Ext.Panel-baseCls">baseCls</a>+'-body' <a href="output/Ext.Panel.html#Ext.Panel-bodyCfg">bodyCfg</a> <a href="output/Ext.Panel.html#Ext.Panel-bodyCssClass">bodyCssClass</a> <a href="output/Ext.Panel.html#Ext.Panel-bodyStyle">bodyStyle</a> + bbar div <a href="output/Ext.Panel.html#Ext.Panel-baseCls">baseCls</a>+'-bbar' <a href="output/Ext.Panel.html#Ext.Panel-bbarCfg">bbarCfg</a> bbarCssClass bbarStyle + <a href="output/Ext.Panel.html#Ext.Panel-footer">footer</a> div <a href="output/Ext.Panel.html#Ext.Panel-baseCls">baseCls</a>+'-footer' <a href="output/Ext.Panel.html#Ext.Panel-footerCfg">footerCfg</a> footerCssClass footerStyle </pre><p>Configuring a Custom element may be used, for example, to force the <a href="output/Ext.Panel.html#Ext.Panel-body">body</a> Element to use a different form of markup than is created by default. An example of this might be to <a href="output/Ext.Element.html#Ext.Element-createChild">create a child</a> 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 <a href="output/Ext.element.html#Ext.element-addClass">addClass</a> footerStyle: 'background-color:red' // see <a href="output/Ext.Panel.html#Ext.Panel-bodyStyle">bodyStyle</a> }); </code></pre><p>The example above also explicitly creates a <code><a href="output/Ext.Panel.html#Ext.Panel-footer">footer</a></code> with custom markup and styling applied.</p>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='bodyCssClass' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Additional css class selector to be applied to the <a href="output/Ext.Panel.html#Ext.Panel-body">body</a> element in the format expected by <a href="output/Ext.Element.html#Ext.Element-addClass">Ext.Element.addClass</a> (defaults to null). See <a href="output/Ext.Panel.html#Ext.Panel-bodyCfg">bodyCfg</a>.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='bodyStyle' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Custom CSS styles to be applied to the <a href="output/Ext.Panel.html#Ext.Panel-body">body</a> element in the format expected by <a href="output/Ext.Element.html#Ext.Element-applyStyles">Ext.Element.applyStyles</a> (defaults to null). See <a href="output/Ext.Panel.html#Ext.Panel-bodyCfg">bodyCfg</a>.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='buttons' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  <code>buttons</code> will be used as <code><a href="output/Ext.Container.html#Ext.Container-items">items</a></code> for the toolbar in the footer (<code><a href="output/Ext.Panel.html#Ext.Panel-fbar">fbar</a></code>). Typically the value of this configuration property will be an array of <a href="Ext.Button.html">Ext.Button</a>s or <a href="Ext.Button.html">Ext.Button</a> 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.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
                <xs:attribute name="mode" type="exml:configMode"/>
              </xs:complexType>
            </xs:element>
            <xs:element name='bwrapCfg' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A <a href="Ext.DomHelper.html">DomHelper</a> element specification object specifying the element structure of this Panel's <a href="output/Ext.Panel.html#Ext.Panel-bwrap">bwrap</a> Element. See <code><a href="output/Ext.Panel.html#Ext.Panel-bodyCfg">bodyCfg</a></code> also.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='draggable' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  <code>true</code> to enable dragging of this Panel (defaults to <code>false</code>). <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 <a href="Ext.dd.DragSource.html">Ext.dd.DragSource</a>, so behaviour may be added by implementing the interface methods of <a href="Ext.dd.DragDrop.html">Ext.dd.DragDrop</a> e.g.:</p><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'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>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='fbar' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A <a href="Ext.Toolbar.html">Toolbar</a> object, a Toolbar config, or an array of <a href="Ext.Button.html">Button</a>s/<a href="Ext.Button.html">Button</a> configs, describing a <a href="Ext.Toolbar.html">Toolbar</a> to be rendered into this Panel's footer element. <p>After render, the <code>fbar</code> property will be an <a href="Ext.Toolbar.html">Toolbar</a> instance.</p><p>If <code><a href="output/Ext.Panel.html#Ext.Panel-buttons">buttons</a></code> are specified, they will supersede the <code>fbar</code> configuration property.</p>The Panel's <code><a href="output/Ext.Panel.html#Ext.Panel-buttonAlign">buttonAlign</a></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' },'-&gt;',{ text: 'bbar Right' }] }), <a href="output/Ext.Panel.html#Ext.Panel-buttonAlign">buttonAlign</a>: 'left', // anything but 'center' or 'right' and you can use '-', and '-&gt;' // to control the alignment of fbar items fbar: [{ text: 'fbar Left' },'-&gt;',{ 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-&gt;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>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='floating' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  This property is used to configure the underlying <a href="Ext.Layer.html">Ext.Layer</a>. Acceptable values for this configuration property are: <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).<div style="margin-left: 2em"><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></div></div></li><li><b><code><a href="Ext.Layer.html">object</a></code></b> : <div class="sub-desc">The specified object will be used as the configuration object for the <a href="Ext.Layer.html">Ext.Layer</a> that will be created.</div></li></ul></div>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='footerCfg' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A <a href="Ext.DomHelper.html">DomHelper</a> element specification object specifying the element structure of this Panel's <a href="output/Ext.Panel.html#Ext.Panel-footer">footer</a> Element. See <code><a href="output/Ext.Panel.html#Ext.Panel-bodyCfg">bodyCfg</a></code> also.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='headerCfg' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A <a href="Ext.DomHelper.html">DomHelper</a> element specification object specifying the element structure of this Panel's <a href="output/Ext.Panel.html#Ext.Panel-header">header</a> Element. See <code><a href="output/Ext.Panel.html#Ext.Panel-bodyCfg">bodyCfg</a></code> also.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='keys' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A <a href="Ext.KeyMap.html">Ext.KeyMap</a> config object (in the format expected by <a href="output/Ext.KeyMap.html#Ext.KeyMap-addBinding">Ext.KeyMap.addBinding</a> used to assign custom key handling to this panel (defaults to <code>null</code>).
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='padding' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  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>.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='shadow' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  <code>true</code> (or a valid Ext.Shadow <a href="output/Ext.Shadow.html#Ext.Shadow-mode">Ext.Shadow.mode</a> 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><a href="output/Ext.Panel.html#Ext.Panel-floating">floating</a> = true</code>.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='tbar' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The top toolbar of the panel. This can be a <a href="Ext.Toolbar.html">Ext.Toolbar</a> 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 <a href="output/Ext.Panel.html#Ext.Panel-getTopToolbar">getTopToolbar</a>. <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-&gt;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>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='tbarCfg' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A <a href="Ext.DomHelper.html">DomHelper</a> element specification object specifying the element structure of this Panel's <a href="output/Ext.Panel.html#Ext.Panel-tbar">tbar</a> Element. See <code><a href="output/Ext.Panel.html#Ext.Panel-bodyCfg">bodyCfg</a></code> also.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='toolTemplate' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A Template used to create <a href="output/Ext.Panel.html#Ext.Panel-tools">tools</a> in the <a href="output/Ext.Panel.html#Ext.Panel-header">header</a> Element. Defaults to: <pre><code>new Ext.Template('&lt;div class="x-tool x-tool-{id}"&gt;&amp;#160;&lt;/div&gt;')</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 <a href="output/Ext.Panel.html#Ext.Panel-tools">tools</a>. In the following example an &lt;a&gt; 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\'"&gt;', '&lt;a class="x-tool x-tool-pdf" href="{href}"&gt;&lt;/a&gt;', '&lt;/tpl&gt;', '&lt;tpl if="id!=\'download\'"&gt;', '&lt;div class="x-tool x-tool-{id}"&gt;&amp;#160;&lt;/div&gt;', '&lt;/tpl&gt;' ), 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>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='tools' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  An array of tool button configs to be added to the header tool area. When rendered, each tool is stored as an <a href="Ext.Element.html">Element</a> referenced by a public property called <code>tools.<i>&lt;tool-type&gt;</i></code> <p>Each tool config may contain the following properties:</p><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: <div style="margin-left: 2em"><div><code>toggle</code> (Created by default when <a href="output/Ext.Panel.html#Ext.Panel-collapsible">collapsible</a> is <code>true</code>)</div><div><code>close</code></div><div><code>minimize</code></div><div><code>maximize</code></div><div><code>restore</code></div><div><code>gear</code></div><div><code>pin</code></div><div><code>unpin</code></div><div><code>right</code></div><div><code>left</code></div><div><code>up</code></div><div><code>down</code></div><div><code>refresh</code></div><div><code>minus</code></div><div><code>plus</code></div><div><code>help</code></div><div><code>search</code></div><div><code>save</code></div><div><code>print</code></div></div></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 <a href="output/Ext.QuickTip.html#Ext.QuickTip-register">Ext.QuickTip.register</a></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 specifying event listeners in the format of an argument to <a href="output/Ext.Panel.html#Ext.Panel-addListener">addListener</a></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>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
                <xs:attribute name="mode" type="exml:configMode"/>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:Boolean' name='animCollapse'>
          <xs:annotation>
            <xs:documentation>
              <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 <a href="Ext.Fx.html">Ext.Fx</a> class is available, otherwise <code>false</code>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='autoLoad'>
          <xs:annotation>
            <xs:documentation>
              A valid url spec according to the Updater <a href="output/Ext.Updater.html#Ext.Updater-update">Ext.Updater.update</a> 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 <a href="output/Ext.Panel.html#Ext.Panel-body">body</a> element, so it may be <a href="output/Ext.Element.html#Ext.Element-refresh">refresh</a>ed at any time.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='baseCls'>
          <xs:annotation>
            <xs:documentation>
              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><a href="output/Ext.Panel.html#Ext.Panel-unstyled">unstyled</a></code> also.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='bbar'>
          <xs:annotation>
            <xs:documentation>
              The bottom toolbar of the panel. This can be a <a href="Ext.Toolbar.html">Ext.Toolbar</a> 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 <a href="output/Ext.Panel.html#Ext.Panel-getBottomToolbar">getBottomToolbar</a>. <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-&gt;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>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='bbarCfg'>
          <xs:annotation>
            <xs:documentation>
              A <a href="Ext.DomHelper.html">DomHelper</a> element specification object specifying the element structure of this Panel's <a href="output/Ext.Panel.html#Ext.Panel-bbar">bbar</a> Element. See <code><a href="output/Ext.Panel.html#Ext.Panel-bodyCfg">bodyCfg</a></code> also.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='bodyBorder'>
          <xs:annotation>
            <xs:documentation>
              True to display an interior border on the body element of the panel, false to hide it (defaults to true). This only applies when <a href="output/Ext.Panel.html#Ext.Panel-border">border</a> == 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.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='bodyCfg'>
          <xs:annotation>
            <xs:documentation>
              A <a href="Ext.DomHelper.html">DomHelper</a> element specification object may be specified for any Panel Element. <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><a href="output/Ext.Panel.html#Ext.Panel-baseCls">baseCls</a></code>):</p><pre>Panel Default Default Custom Additional Additional Element element class element class style ======== ========================== ========= ============== =========== <a href="output/Ext.Panel.html#Ext.Panel-header">header</a> div <a href="output/Ext.Panel.html#Ext.Panel-baseCls">baseCls</a>+'-header' <a href="output/Ext.Panel.html#Ext.Panel-headerCfg">headerCfg</a> headerCssClass headerStyle <a href="output/Ext.Panel.html#Ext.Panel-bwrap">bwrap</a> div <a href="output/Ext.Panel.html#Ext.Panel-baseCls">baseCls</a>+'-bwrap' <a href="output/Ext.Panel.html#Ext.Panel-bwrapCfg">bwrapCfg</a> bwrapCssClass bwrapStyle + tbar div <a href="output/Ext.Panel.html#Ext.Panel-baseCls">baseCls</a>+'-tbar' <a href="output/Ext.Panel.html#Ext.Panel-tbarCfg">tbarCfg</a> tbarCssClass tbarStyle + <a href="output/Ext.Panel.html#Ext.Panel-body">body</a> div <a href="output/Ext.Panel.html#Ext.Panel-baseCls">baseCls</a>+'-body' <a href="output/Ext.Panel.html#Ext.Panel-bodyCfg">bodyCfg</a> <a href="output/Ext.Panel.html#Ext.Panel-bodyCssClass">bodyCssClass</a> <a href="output/Ext.Panel.html#Ext.Panel-bodyStyle">bodyStyle</a> + bbar div <a href="output/Ext.Panel.html#Ext.Panel-baseCls">baseCls</a>+'-bbar' <a href="output/Ext.Panel.html#Ext.Panel-bbarCfg">bbarCfg</a> bbarCssClass bbarStyle + <a href="output/Ext.Panel.html#Ext.Panel-footer">footer</a> div <a href="output/Ext.Panel.html#Ext.Panel-baseCls">baseCls</a>+'-footer' <a href="output/Ext.Panel.html#Ext.Panel-footerCfg">footerCfg</a> footerCssClass footerStyle </pre><p>Configuring a Custom element may be used, for example, to force the <a href="output/Ext.Panel.html#Ext.Panel-body">body</a> Element to use a different form of markup than is created by default. An example of this might be to <a href="output/Ext.Element.html#Ext.Element-createChild">create a child</a> 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 <a href="output/Ext.element.html#Ext.element-addClass">addClass</a> footerStyle: 'background-color:red' // see <a href="output/Ext.Panel.html#Ext.Panel-bodyStyle">bodyStyle</a> }); </code></pre><p>The example above also explicitly creates a <code><a href="output/Ext.Panel.html#Ext.Panel-footer">footer</a></code> with custom markup and styling applied.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='bodyCssClass'>
          <xs:annotation>
            <xs:documentation>
              Additional css class selector to be applied to the <a href="output/Ext.Panel.html#Ext.Panel-body">body</a> element in the format expected by <a href="output/Ext.Element.html#Ext.Element-addClass">Ext.Element.addClass</a> (defaults to null). See <a href="output/Ext.Panel.html#Ext.Panel-bodyCfg">bodyCfg</a>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='bodyStyle'>
          <xs:annotation>
            <xs:documentation>
              Custom CSS styles to be applied to the <a href="output/Ext.Panel.html#Ext.Panel-body">body</a> element in the format expected by <a href="output/Ext.Element.html#Ext.Element-applyStyles">Ext.Element.applyStyles</a> (defaults to null). See <a href="output/Ext.Panel.html#Ext.Panel-bodyCfg">bodyCfg</a>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='border'>
          <xs:annotation>
            <xs:documentation>
              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 <a href="output/Ext.Panel.html#Ext.Panel-bodyBorder">bodyBorder</a> to false.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='buttonAlign'>
          <xs:annotation>
            <xs:documentation>
              The alignment of any <a href="output/Ext.Panel.html#Ext.Panel-buttons">buttons</a> added to this panel. Valid values are <code>'right'</code>, <code>'left'</code> and <code>'center'</code> (defaults to <code>'right'</code>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='buttons'>
          <xs:annotation>
            <xs:documentation>
              <code>buttons</code> will be used as <code><a href="output/Ext.Container.html#Ext.Container-items">items</a></code> for the toolbar in the footer (<code><a href="output/Ext.Panel.html#Ext.Panel-fbar">fbar</a></code>). Typically the value of this configuration property will be an array of <a href="Ext.Button.html">Ext.Button</a>s or <a href="Ext.Button.html">Ext.Button</a> 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.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='bwrapCfg'>
          <xs:annotation>
            <xs:documentation>
              A <a href="Ext.DomHelper.html">DomHelper</a> element specification object specifying the element structure of this Panel's <a href="output/Ext.Panel.html#Ext.Panel-bwrap">bwrap</a> Element. See <code><a href="output/Ext.Panel.html#Ext.Panel-bodyCfg">bodyCfg</a></code> also.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='closable'>
          <xs:annotation>
            <xs:documentation>
              Panels themselves do not directly support being closed, but some Panel subclasses do (like <a href="Ext.Window.html">Ext.Window</a>) or a Panel Class within an <a href="Ext.TabPanel.html">Ext.TabPanel</a>. Specify <code>true</code> to enable closing in such situations. Defaults to <code>false</code>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='collapseFirst'>
          <xs:annotation>
            <xs:documentation>
              <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>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='collapsed'>
          <xs:annotation>
            <xs:documentation>
              <code>true</code> to render the panel collapsed, <code>false</code> to render it expanded (defaults to <code>false</code>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='collapsedCls'>
          <xs:annotation>
            <xs:documentation>
              A CSS class to add to the panel's element after it has been collapsed (defaults to <code>'x-panel-collapsed'</code>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='collapsible'>
          <xs:annotation>
            <xs:documentation>
              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).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='draggable'>
          <xs:annotation>
            <xs:documentation>
              <code>true</code> to enable dragging of this Panel (defaults to <code>false</code>). <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 <a href="Ext.dd.DragSource.html">Ext.dd.DragSource</a>, so behaviour may be added by implementing the interface methods of <a href="Ext.dd.DragDrop.html">Ext.dd.DragDrop</a> e.g.:</p><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'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>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='elements'>
          <xs:annotation>
            <xs:documentation>
              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>'.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='fbar'>
          <xs:annotation>
            <xs:documentation>
              A <a href="Ext.Toolbar.html">Toolbar</a> object, a Toolbar config, or an array of <a href="Ext.Button.html">Button</a>s/<a href="Ext.Button.html">Button</a> configs, describing a <a href="Ext.Toolbar.html">Toolbar</a> to be rendered into this Panel's footer element. <p>After render, the <code>fbar</code> property will be an <a href="Ext.Toolbar.html">Toolbar</a> instance.</p><p>If <code><a href="output/Ext.Panel.html#Ext.Panel-buttons">buttons</a></code> are specified, they will supersede the <code>fbar</code> configuration property.</p>The Panel's <code><a href="output/Ext.Panel.html#Ext.Panel-buttonAlign">buttonAlign</a></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' },'-&gt;',{ text: 'bbar Right' }] }), <a href="output/Ext.Panel.html#Ext.Panel-buttonAlign">buttonAlign</a>: 'left', // anything but 'center' or 'right' and you can use '-', and '-&gt;' // to control the alignment of fbar items fbar: [{ text: 'fbar Left' },'-&gt;',{ 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-&gt;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>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='floating'>
          <xs:annotation>
            <xs:documentation>
              This property is used to configure the underlying <a href="Ext.Layer.html">Ext.Layer</a>. Acceptable values for this configuration property are: <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).<div style="margin-left: 2em"><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></div></div></li><li><b><code><a href="Ext.Layer.html">object</a></code></b> : <div class="sub-desc">The specified object will be used as the configuration object for the <a href="Ext.Layer.html">Ext.Layer</a> that will be created.</div></li></ul></div>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='footer'>
          <xs:annotation>
            <xs:documentation>
              <code>true</code> to create the footer element explicitly, false to skip creating it. The footer will be created automatically if <code><a href="output/Ext.Panel.html#Ext.Panel-buttons">buttons</a></code> or a <code><a href="output/Ext.Panel.html#Ext.Panel-fbar">fbar</a></code> have been configured. See <code><a href="output/Ext.Panel.html#Ext.Panel-bodyCfg">bodyCfg</a></code> for an example.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='footerCfg'>
          <xs:annotation>
            <xs:documentation>
              A <a href="Ext.DomHelper.html">DomHelper</a> element specification object specifying the element structure of this Panel's <a href="output/Ext.Panel.html#Ext.Panel-footer">footer</a> Element. See <code><a href="output/Ext.Panel.html#Ext.Panel-bodyCfg">bodyCfg</a></code> also.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='frame'>
          <xs:annotation>
            <xs:documentation>
              <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 <a href="output/Ext.Element.html#Ext.Element-boxWrap">Ext.Element.boxWrap</a>). <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"&gt; &lt;div class="x-panel-header"&gt;&lt;span class="x-panel-header-text"&gt;Title: (frame:false)&lt;/span&gt;&lt;/div&gt; &lt;div class="x-panel-bwrap"&gt; &lt;div class="x-panel-body"&gt;&lt;p&gt;html value goes here&lt;/p&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; // frame = true (create 9 elements) &lt;div id="developer-specified-id-goes-here" class="x-panel"&gt; &lt;div class="x-panel-tl"&gt;&lt;div class="x-panel-tr"&gt;&lt;div class="x-panel-tc"&gt; &lt;div class="x-panel-header"&gt;&lt;span class="x-panel-header-text"&gt;Title: (frame:true)&lt;/span&gt;&lt;/div&gt; &lt;/div&gt;&lt;/div&gt;&lt;/div&gt; &lt;div class="x-panel-bwrap"&gt; &lt;div class="x-panel-ml"&gt;&lt;div class="x-panel-mr"&gt;&lt;div class="x-panel-mc"&gt; &lt;div class="x-panel-body"&gt;&lt;p&gt;html value goes here&lt;/p&gt;&lt;/div&gt; &lt;/div&gt;&lt;/div&gt;&lt;/div&gt; &lt;div class="x-panel-bl"&gt;&lt;div class="x-panel-br"&gt;&lt;div class="x-panel-bc"/&gt; &lt;/div&gt;&lt;/div&gt;&lt;/div&gt; &lt;/div&gt; </code></pre>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='header'>
          <xs:annotation>
            <xs:documentation>
              <code>true</code> to create the Panel's header element explicitly, <code>false</code> to skip creating it. If a <code><a href="output/Ext.Panel.html#Ext.Panel-title">title</a></code> is set the header will be created automatically, otherwise it will not. If a <code><a href="output/Ext.Panel.html#Ext.Panel-title">title</a></code> is set but <code>header</code> is explicitly set to <code>false</code>, the header will not be rendered.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='headerAsText'>
          <xs:annotation>
            <xs:documentation>
              <code>true</code> to display the panel <code><a href="output/Ext.Panel.html#Ext.Panel-title">title</a></code> in the <code><a href="output/Ext.Panel.html#Ext.Panel-header">header</a></code>, <code>false</code> to hide it (defaults to <code>true</code>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='headerCfg'>
          <xs:annotation>
            <xs:documentation>
              A <a href="Ext.DomHelper.html">DomHelper</a> element specification object specifying the element structure of this Panel's <a href="output/Ext.Panel.html#Ext.Panel-header">header</a> Element. See <code><a href="output/Ext.Panel.html#Ext.Panel-bodyCfg">bodyCfg</a></code> also.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='hideCollapseTool'>
          <xs:annotation>
            <xs:documentation>
              <code>true</code> to hide the expand/collapse toggle button when <code><a href="output/Ext.Panel.html#Ext.Panel-collapsible">collapsible</a> == true</code>, <code>false</code> to display it (defaults to <code>false</code>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='iconCls'>
          <xs:annotation>
            <xs:documentation>
              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>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='keys'>
          <xs:annotation>
            <xs:documentation>
              A <a href="Ext.KeyMap.html">Ext.KeyMap</a> config object (in the format expected by <a href="output/Ext.KeyMap.html#Ext.KeyMap-addBinding">Ext.KeyMap.addBinding</a> used to assign custom key handling to this panel (defaults to <code>null</code>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='maskDisabled'>
          <xs:annotation>
            <xs:documentation>
              <code>true</code> to mask the panel when it is <a href="output/Ext.Panel.html#Ext.Panel-disabled">disabled</a>, <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.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='minButtonWidth'>
          <xs:annotation>
            <xs:documentation>
              Minimum width in pixels of all <a href="output/Ext.Panel.html#Ext.Panel-buttons">buttons</a> in this panel (defaults to <code>75</code>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='padding'>
          <xs:annotation>
            <xs:documentation>
              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>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='preventBodyReset'>
          <xs:annotation>
            <xs:documentation>
              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.).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='shadow'>
          <xs:annotation>
            <xs:documentation>
              <code>true</code> (or a valid Ext.Shadow <a href="output/Ext.Shadow.html#Ext.Shadow-mode">Ext.Shadow.mode</a> 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><a href="output/Ext.Panel.html#Ext.Panel-floating">floating</a> = true</code>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='shadowOffset'>
          <xs:annotation>
            <xs:documentation>
              The number of pixels to offset the shadow if displayed (defaults to <code>4</code>). Note that this option only applies when <code><a href="output/Ext.Panel.html#Ext.Panel-floating">floating</a> = true</code>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='shim'>
          <xs:annotation>
            <xs:documentation>
              <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><a href="output/Ext.Panel.html#Ext.Panel-floating">floating</a> = true</code>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='tbar'>
          <xs:annotation>
            <xs:documentation>
              The top toolbar of the panel. This can be a <a href="Ext.Toolbar.html">Ext.Toolbar</a> 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 <a href="output/Ext.Panel.html#Ext.Panel-getTopToolbar">getTopToolbar</a>. <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-&gt;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>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='tbarCfg'>
          <xs:annotation>
            <xs:documentation>
              A <a href="Ext.DomHelper.html">DomHelper</a> element specification object specifying the element structure of this Panel's <a href="output/Ext.Panel.html#Ext.Panel-tbar">tbar</a> Element. See <code><a href="output/Ext.Panel.html#Ext.Panel-bodyCfg">bodyCfg</a></code> also.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='title'>
          <xs:annotation>
            <xs:documentation>
              The title text to be used as innerHTML (html tags are accepted) to display in the panel <code><a href="output/Ext.Panel.html#Ext.Panel-header">header</a></code> (defaults to ''). When a <code>title</code> is specified the <code><a href="output/Ext.Panel.html#Ext.Panel-header">header</a></code> element will automatically be created and displayed unless <a href="output/Ext.Panel.html#Ext.Panel-header">header</a> 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.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='titleCollapse'>
          <xs:annotation>
            <xs:documentation>
              <code>true</code> to allow expanding and collapsing the panel (when <code><a href="output/Ext.Panel.html#Ext.Panel-collapsible">collapsible</a> = 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 <a href="Ext.layout.BorderLayout.Region.html">BorderLayout.Region</a> <code><a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-floatable">floatable</a></code> config option.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='toolTemplate'>
          <xs:annotation>
            <xs:documentation>
              A Template used to create <a href="output/Ext.Panel.html#Ext.Panel-tools">tools</a> in the <a href="output/Ext.Panel.html#Ext.Panel-header">header</a> Element. Defaults to: <pre><code>new Ext.Template('&lt;div class="x-tool x-tool-{id}"&gt;&amp;#160;&lt;/div&gt;')</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 <a href="output/Ext.Panel.html#Ext.Panel-tools">tools</a>. In the following example an &lt;a&gt; 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\'"&gt;', '&lt;a class="x-tool x-tool-pdf" href="{href}"&gt;&lt;/a&gt;', '&lt;/tpl&gt;', '&lt;tpl if="id!=\'download\'"&gt;', '&lt;div class="x-tool x-tool-{id}"&gt;&amp;#160;&lt;/div&gt;', '&lt;/tpl&gt;' ), 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>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='tools'>
          <xs:annotation>
            <xs:documentation>
              An array of tool button configs to be added to the header tool area. When rendered, each tool is stored as an <a href="Ext.Element.html">Element</a> referenced by a public property called <code>tools.<i>&lt;tool-type&gt;</i></code> <p>Each tool config may contain the following properties:</p><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: <div style="margin-left: 2em"><div><code>toggle</code> (Created by default when <a href="output/Ext.Panel.html#Ext.Panel-collapsible">collapsible</a> is <code>true</code>)</div><div><code>close</code></div><div><code>minimize</code></div><div><code>maximize</code></div><div><code>restore</code></div><div><code>gear</code></div><div><code>pin</code></div><div><code>unpin</code></div><div><code>right</code></div><div><code>left</code></div><div><code>up</code></div><div><code>down</code></div><div><code>refresh</code></div><div><code>minus</code></div><div><code>plus</code></div><div><code>help</code></div><div><code>search</code></div><div><code>save</code></div><div><code>print</code></div></div></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 <a href="output/Ext.QuickTip.html#Ext.QuickTip-register">Ext.QuickTip.register</a></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 specifying event listeners in the format of an argument to <a href="output/Ext.Panel.html#Ext.Panel-addListener">addListener</a></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>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='unstyled'>
          <xs:annotation>
            <xs:documentation>
              Overrides the <code><a href="output/Ext.Panel.html#Ext.Panel-baseCls">baseCls</a></code> setting to <code><a href="output/Ext.Panel.html#Ext.Panel-baseCls">baseCls</a> = 'x-plain'</code> which renders the panel unstyled except for required attributes for Ext layouts to function (e.g. overflow:hidden).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='Panel' type='e:Panel_TYPE' substitutionGroup='e:Container'>
    <xs:annotation>
      <xs:documentation>
        Panel is a container that has specific functionality and structural components that make it the perfect building block for application-oriented user interfaces. <p>Panels are, by virtue of their inheritance from <a href="Ext.Container.html">Ext.Container</a>, capable of being configured with a <a href="output/Ext.Container.html#Ext.Container-layout">layout</a>, and containing child Components.</p><p>When either specifying child <a href="output/Ext.Component.html#Ext.Component-items">items</a> of a Panel, or dynamically <a href="output/Ext.Container.html#Ext.Container-add">adding</a> 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><a href="output/Ext.Container.html#Ext.Container-layout">layout</a></b></code> schemes. By default, Panels use the <a href="Ext.layout.ContainerLayout.html">ContainerLayout</a> 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 <a href="output/Ext.Panel.html#Ext.Panel-bbar">bottom</a> and <a href="output/Ext.Panel.html#Ext.Panel-tbar">top</a> toolbars, along with separate <a href="output/Ext.Panel.html#Ext.Panel-header">header</a>, <a href="output/Ext.Panel.html#Ext.Panel-footer">footer</a> and <a href="output/Ext.Panel.html#Ext.Panel-body">body</a> sections (see <a href="output/Ext.Panel.html#Ext.Panel-frame">frame</a> for additional information).</p><p>Panel also provides built-in <a href="output/Ext.Panel.html#Ext.Panel-collapsible">expandable and collapsible behavior</a>, along with a variety of <a href="output/Ext.Panel.html#Ext.Panel-tools">prebuilt tool buttons</a> that can be wired up to provide other customized behavior. Panels can be easily dropped into any <a href="Ext.Container.html">Container</a> or layout, and the layout and rendering pipeline is <a href="output/Ext.Container.html#Ext.Container-add">completely managed by the framework</a>.</p> <p>This class represents the xtype 'panel' and serves as a typed config object for constructor of class Panel.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.Panel
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ProgressBar_TYPE'>
    <xs:complexContent>
      <xs:extension base='e:BoxComponent_TYPE'>
        <xs:sequence>
            <xs:element name='textEl' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The element to render the progress text to (defaults to the progress bar's internal text element)
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:Boolean' name='animate'>
          <xs:annotation>
            <xs:documentation>
              True to animate the progress bar during transitions (defaults to false)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='baseCls'>
          <xs:annotation>
            <xs:documentation>
              The base CSS class to apply to the progress bar's wrapper element (defaults to 'x-progress')
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='text'>
          <xs:annotation>
            <xs:documentation>
              The progress bar text (defaults to '')
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='textEl'>
          <xs:annotation>
            <xs:documentation>
              The element to render the progress text to (defaults to the progress bar's internal text element)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='value'>
          <xs:annotation>
            <xs:documentation>
              A floating point value between 0 and 1 (e.g., .5, defaults to 0)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='ProgressBar' type='e:ProgressBar_TYPE' substitutionGroup='e:BoxComponent'>
    <xs:annotation>
      <xs:documentation>
        An updateable progress bar component. The progress bar supports two different modes: manual and automatic. <p>In manual mode, you are responsible for showing, updating (via <a href="output/Ext.ProgressBar.html#Ext.ProgressBar-updateProgress">updateProgress</a>) and clearing the progress bar as needed from your own code. This method is most appropriate when you want to show progress throughout an operation that has predictable points of interest at which you can update the control.</p><p>In automatic mode, you simply call <a href="output/Ext.ProgressBar.html#Ext.ProgressBar-wait">wait</a> and let the progress bar run indefinitely, only clearing it once the operation is complete. You can optionally have the progress bar wait for a specific amount of time and then clear itself. Automatic mode is most appropriate for timed operations or asynchronous operations in which you have no need for indicating intermediate progress.</p> <p>This class represents the xtype 'progress' and serves as a typed config object for constructor of class ProgressBar.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.ProgressBar
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='QuickTip_TYPE'>
    <xs:complexContent>
      <xs:extension base='e:ToolTip_TYPE'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:Boolean' name='interceptTitles'>
          <xs:annotation>
            <xs:documentation>
              True to automatically use the element's DOM title value if available (defaults to false).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='QuickTip' type='e:QuickTip_TYPE' substitutionGroup='e:ToolTip'>
    <xs:annotation>
      <xs:documentation>
        nullA specialized tooltip class for tooltips that can be specified in markup and automatically managed by the global <a href="Ext.QuickTips.html">Ext.QuickTips</a> instance. See the QuickTips class header for additional usage details and examples. <p>This class represents the xtype 'quicktip' and serves as a typed config object for constructor of class QuickTip.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.QuickTip
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='Resizable_TYPE'>
    <xs:complexContent>
      <xs:extension base='eu:Observable_TYPE'>
        <xs:sequence>
            <xs:element name='adjustments' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  String 'auto' or an array [width, height] with values to be <b>added</b> to the resize operation's new size (defaults to <tt>[0, 0]</tt>)
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='constrainTo' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Constrain the resize to a particular element
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='resizeChild' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  True to resize the first child, or id/element to resize (defaults to false)
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='resizeRegion' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Constrain the resize to a particular region
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='adjustments'>
          <xs:annotation>
            <xs:documentation>
              String 'auto' or an array [width, height] with values to be <b>added</b> to the resize operation's new size (defaults to <tt>[0, 0]</tt>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='animate'>
          <xs:annotation>
            <xs:documentation>
              True to animate the resize (not compatible with dynamic sizing, defaults to false)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='constrainTo'>
          <xs:annotation>
            <xs:documentation>
              Constrain the resize to a particular element
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='disableTrackOver'>
          <xs:annotation>
            <xs:documentation>
              True to disable mouse tracking. This is only applied at config time. (defaults to false)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='draggable'>
          <xs:annotation>
            <xs:documentation>
              Convenience to initialize drag drop (defaults to false)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='duration'>
          <xs:annotation>
            <xs:documentation>
              Animation duration if animate = true (defaults to 0.35)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='dynamic'>
          <xs:annotation>
            <xs:documentation>
              True to resize the element while dragging instead of using a proxy (defaults to false)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='easing'>
          <xs:annotation>
            <xs:documentation>
              Animation easing if animate = true (defaults to <tt>'easingOutStrong'</tt>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='enabled'>
          <xs:annotation>
            <xs:documentation>
              False to disable resizing (defaults to true)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='handleCls'>
          <xs:annotation>
            <xs:documentation>
              A css class to add to each handle. Defaults to <tt>''</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='handles'>
          <xs:annotation>
            <xs:documentation>
              String consisting of the resize handles to display (defaults to undefined). Specify either <tt>'all'</tt> or any of <tt>'n s e w ne nw se sw'</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='height'>
          <xs:annotation>
            <xs:documentation>
              The height of the element in pixels (defaults to null)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='heightIncrement'>
          <xs:annotation>
            <xs:documentation>
              The increment to snap the height resize in pixels (only applies if <code><a href="output/Ext.Resizable.html#Ext.Resizable-dynamic">dynamic</a>==true</code>). Defaults to <tt>0</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='maxHeight'>
          <xs:annotation>
            <xs:documentation>
              The maximum height for the element (defaults to 10000)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='maxWidth'>
          <xs:annotation>
            <xs:documentation>
              The maximum width for the element (defaults to 10000)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='minHeight'>
          <xs:annotation>
            <xs:documentation>
              The minimum height for the element (defaults to 5)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='minWidth'>
          <xs:annotation>
            <xs:documentation>
              The minimum width for the element (defaults to 5)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='minX'>
          <xs:annotation>
            <xs:documentation>
              The minimum x for the element (defaults to 0)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='minY'>
          <xs:annotation>
            <xs:documentation>
              The minimum x for the element (defaults to 0)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='multiDirectional'>
          <xs:annotation>
            <xs:documentation>
              <b>Deprecated</b>. Deprecated style of adding multi-direction resize handles.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='pinned'>
          <xs:annotation>
            <xs:documentation>
              True to ensure that the resize handles are always visible, false to display them only when the user mouses over the resizable borders. This is only applied at config time. (defaults to false)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='preserveRatio'>
          <xs:annotation>
            <xs:documentation>
              True to preserve the original ratio between height and width during resize (defaults to false)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='resizeChild'>
          <xs:annotation>
            <xs:documentation>
              True to resize the first child, or id/element to resize (defaults to false)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='resizeRegion'>
          <xs:annotation>
            <xs:documentation>
              Constrain the resize to a particular region
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='transparent'>
          <xs:annotation>
            <xs:documentation>
              True for transparent handles. This is only applied at config time. (defaults to false)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='width'>
          <xs:annotation>
            <xs:documentation>
              The width of the element in pixels (defaults to null)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='widthIncrement'>
          <xs:annotation>
            <xs:documentation>
              The increment to snap the width resize in pixels (only applies if <code><a href="output/Ext.Resizable.html#Ext.Resizable-dynamic">dynamic</a>==true</code>). Defaults to <tt>0</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='wrap'>
          <xs:annotation>
            <xs:documentation>
              True to wrap an element with a div if needed (required for textareas and images, defaults to false) in favor of the handles config option (defaults to false)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='Resizable' type='e:Resizable_TYPE' substitutionGroup='eu:Observable'>
    <xs:annotation>
      <xs:documentation>
        Applies drag handles to an element to make it resizable. The drag handles are inserted into the element and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap the textarea in a div and set 'resizeChild' to true (or to the id of the element), <b>or</b> set wrap:true in your config and the element will be wrapped for you automatically. <p>Here is the list of valid resize handles:</p><pre>Value Description ------ ------------------- 'n' north 's' south 'e' east 'w' west 'nw' northwest 'sw' southwest 'se' southeast 'ne' northeast 'all' all </pre><p>Here's an example showing the creation of a typical Resizable:</p><pre><code>var resizer = new Ext.Resizable('element-id', { handles: 'all', minWidth: 200, minHeight: 100, maxWidth: 500, maxHeight: 400, pinned: true }); resizer.on('resize', myHandler); </code></pre><p>To hide a particular handle, set its display to none in CSS, or through script:<br/>resizer.east.setDisplayed(false);</p> <p>This class serves as a typed config object for constructor of class Resizable.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.Resizable
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='Shadow_TYPE'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:String' name='mode'>
          <xs:annotation>
            <xs:documentation>
              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>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='offset'>
          <xs:annotation>
            <xs:documentation>
              The number of pixels to offset the shadow from the element (defaults to <tt>4</tt>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
  </xs:complexType>
  <xs:element name='Shadow' type='e:Shadow_TYPE'>
    <xs:annotation>
      <xs:documentation>
        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 <a href="Ext.Layer.html">Ext.Layer</a> class. <p>This class serves as a typed config object for constructor of class Shadow.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.Shadow
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='Spacer_TYPE'>
    <xs:complexContent>
      <xs:extension base='e:BoxComponent_TYPE'>
        <xs:sequence>
        </xs:sequence>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='Spacer' type='e:Spacer_TYPE' substitutionGroup='e:BoxComponent'>
    <xs:annotation>
      <xs:documentation>
        Used to provide a sizable space in a layout. <p>This class represents the xtype 'spacer' and serves as a typed config object for constructor of class ext.Spacer.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.Spacer
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='SplitBar_TYPE'>
    <xs:complexContent>
      <xs:extension base='eu:Observable_TYPE'>
        <xs:sequence>
        </xs:sequence>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='SplitBar' type='e:SplitBar_TYPE' substitutionGroup='eu:Observable'>
    <xs:annotation>
      <xs:documentation>
        Creates draggable splitter bar functionality from two elements (element to be dragged and element to be resized). <br/><br/>Usage: <pre><code>var split = new Ext.SplitBar("elementToDrag", "elementToSize", Ext.SplitBar.HORIZONTAL, Ext.SplitBar.LEFT); split.setAdapter(new Ext.SplitBar.AbsoluteLayoutAdapter("container")); split.minSize = 100; split.maxSize = 600; split.animate = true; split.on('moved', splitterMoved); </code></pre> <p>This class serves as a typed config object for constructor of class SplitBar.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.SplitBar
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='SplitButton_TYPE'>
    <xs:complexContent>
      <xs:extension base='e:Button_TYPE'>
        <xs:sequence>
            <xs:element name='arrowHandler' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A function called when the arrow button is clicked (can be used instead of click event)
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='arrowHandler'>
          <xs:annotation>
            <xs:documentation>
              A function called when the arrow button is clicked (can be used instead of click event)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='arrowTooltip'>
          <xs:annotation>
            <xs:documentation>
              The title attribute of the arrow
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='SplitButton' type='e:SplitButton_TYPE' substitutionGroup='e:Button'>
    <xs:annotation>
      <xs:documentation>
        A split button that provides a built-in dropdown arrow that can fire an event separately from the default click event of the button. Typically this would be used to display a dropdown menu that provides additional options to the primary button action, but any custom handler can provide the arrowclick implementation. Example usage: <pre><code>// display a dropdown menu: new Ext.SplitButton({ renderTo: 'button-ct', // the container id text: 'Options', handler: optionsHandler, // handle a click on the button itself menu: new Ext.menu.Menu({ items: [ // these items will render as dropdown menu items when the arrow is clicked: {text: 'Item 1', handler: item1Handler}, {text: 'Item 2', handler: item2Handler} ] }) }); // Instead of showing a menu, you provide any type of custom // functionality you want when the dropdown arrow is clicked: new Ext.SplitButton({ renderTo: 'button-ct', text: 'Options', handler: optionsHandler, arrowHandler: myCustomHandler }); </code></pre> <p>This class represents the xtype 'splitbutton' and serves as a typed config object for constructor of class SplitButton.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.SplitButton
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='TabPanel_TYPE'>
    <xs:complexContent>
      <xs:extension base='e:Panel_TYPE'>
        <xs:sequence>
            <xs:element name='activeTab' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A string id or the numeric index of the tab that should be initially activated on render (defaults to undefined).
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='itemTpl' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  (Optional) A <a href="Ext.Template.html">Template</a> or <a href="Ext.XTemplate.html">XTemplate</a> which may be provided to process the data object returned from <tt><a href="output/Ext.TabPanel.html#Ext.TabPanel-getTemplateArgs">getTemplateArgs</a></tt> to produce a clickable selector element in the tab strip. <p>The main element created should be a <tt>&lt;li&gt;</tt> element. In order for a click event on a selector element to be connected to its item, it must take its <i>id</i> from the TabPanel's native <tt><a href="output/Ext.TabPanel.html#Ext.TabPanel-getTemplateArgs">getTemplateArgs</a></tt>.</p><p>The child element which contains the title text must be marked by the CSS class <tt>x-tab-strip-inner</tt>.</p><p>To enable closability, the created element should contain an element marked by the CSS class <tt>x-tab-strip-close</tt>.</p><p>If a custom <tt>itemTpl</tt> is supplied, it is the developer's responsibility to create CSS style rules to create the desired appearance.</p>Below is an example of how to create customized tab selector items:<pre><code>new Ext.TabPanel({ renderTo: document.body, minTabWidth: 115, tabWidth: 135, enableTabScroll: true, width: 600, height: 250, defaults: {autoScroll:true}, itemTpl: new Ext.XTemplate( '&lt;li class="{cls}" id="{id}" style="overflow:hidden"&gt;', '&lt;tpl if="closable"&gt;', '&lt;a class="x-tab-strip-close"&gt;&lt;/a&gt;', '&lt;/tpl&gt;', '&lt;a class="x-tab-right" href="#" style="padding-left:6px"&gt;', '&lt;em class="x-tab-left"&gt;', '&lt;span class="x-tab-strip-inner"&gt;', '&lt;img src="{src}" style="float:left;margin:3px 3px 0 0"&gt;', '&lt;span style="margin-left:20px" class="x-tab-strip-text {iconCls}"&gt;{text} {extra}&lt;/span&gt;', '&lt;/span&gt;', '&lt;/em&gt;', '&lt;/a&gt;', '&lt;/li&gt;' ), getTemplateArgs: function(item) { // Call the native method to collect the base data. Like the ID! var result = Ext.TabPanel.prototype.getTemplateArgs.call(this, item); // Add stuff used in our template return Ext.apply(result, { closable: item.closable, src: item.iconSrc, extra: item.extraText || '' }); }, items: [{ title: 'New Tab 1', iconSrc: '../shared/icons/fam/grid.png', html: 'Tab Body 1', closable: true }, { title: 'New Tab 2', iconSrc: '../shared/icons/fam/grid.png', html: 'Tab Body 2', extraText: 'Extra stuff in the tab button' }] }); </code></pre>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='activeTab'>
          <xs:annotation>
            <xs:documentation>
              A string id or the numeric index of the tab that should be initially activated on render (defaults to undefined).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='animScroll'>
          <xs:annotation>
            <xs:documentation>
              True to animate tab scrolling so that hidden tabs slide smoothly into view (defaults to <tt>true</tt>). Only applies when <tt><a href="output/Ext.TabPanel.html#Ext.TabPanel-enableTabScroll">enableTabScroll</a> = true</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='autoTabSelector'>
          <xs:annotation>
            <xs:documentation>
              The CSS selector used to search for tabs in existing markup when <tt><a href="output/Ext.TabPanel.html#Ext.TabPanel-autoTabs">autoTabs</a> = true</tt> (defaults to <tt>'div.x-tab'</tt>). This can be any valid selector supported by <a href="output/Ext.DomQuery.html#Ext.DomQuery-select">Ext.DomQuery.select</a>. Note that the query will be executed within the scope of this tab panel only (so that multiple tab panels from markup can be supported on a page).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='autoTabs'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> to query the DOM for any divs with a class of 'x-tab' to be automatically converted to tabs and added to this panel (defaults to <tt>false</tt>). Note that the query will be executed within the scope of the container element only (so that multiple tab panels from markup can be supported via this method). <p>This method is only possible when the markup is structured correctly as a container with nested divs containing the class <tt>'x-tab'</tt>. To create TabPanels without these limitations, or to pull tab content from other elements on the page, see the example at the top of the class for generating tabs from markup.</p><p>There are a couple of things to note when using this method:</p><ul><li>When using the <tt>autoTabs</tt> config (as opposed to passing individual tab configs in the TabPanel's <a href="output/Ext.TabPanel.html#Ext.TabPanel-items">items</a> collection), you must use <tt><a href="output/Ext.TabPanel.html#Ext.TabPanel-applyTo">applyTo</a></tt> to correctly use the specified <tt>id</tt> as the tab container. The <tt>autoTabs</tt> method <em>replaces</em> existing content with the TabPanel components.</li><li>Make sure that you set <tt><a href="output/Ext.TabPanel.html#Ext.TabPanel-deferredRender">deferredRender</a>: false</tt> so that the content elements for each tab will be rendered into the TabPanel immediately upon page load, otherwise they will not be transformed until each tab is activated and will be visible outside the TabPanel.</li></ul>Example usage:<br/><br/> <pre><code>var tabs = new Ext.TabPanel({ applyTo: 'my-tabs', activeTab: 0, deferredRender: false, autoTabs: true }); // This markup will be converted to a TabPanel from the code above &lt;div id="my-tabs"&gt; &lt;div class="x-tab" title="Tab 1"&gt;A simple tab&lt;/div&gt; &lt;div class="x-tab" title="Tab 2"&gt;Another one&lt;/div&gt; &lt;/div&gt; </code></pre>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='deferredRender'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> by default to defer the rendering of child <tt><a href="output/Ext.Container.html#Ext.Container-items">items</a></tt> to the browsers DOM until a tab is activated. <tt>false</tt> will render all contained <tt><a href="output/Ext.Container.html#Ext.Container-items">items</a></tt> as soon as the <a href="Ext.layout.CardLayout.html">layout</a> is rendered. If there is a significant amount of content or a lot of heavy controls being rendered into panels that are not displayed by default, setting this to <tt>true</tt> might improve performance. <br/><p>The <tt>deferredRender</tt> property is internally passed to the layout manager for TabPanels (<a href="Ext.layout.CardLayout.html">Ext.layout.CardLayout</a>) as its <a href="output/Ext.layout.CardLayout.html#Ext.layout.CardLayout-deferredRender">Ext.layout.CardLayout.deferredRender</a> configuration value.</p><br/><p><b>Note</b>: leaving <tt>deferredRender</tt> as <tt>true</tt> means that the content within an unactivated tab will not be available. For example, this means that if the TabPanel is within a <a href="Ext.form.FormPanel.html">form</a>, then until a tab is activated, any Fields within unactivated tabs will not be rendered, and will therefore not be submitted and will not be available to either <a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-getValues">getValues</a> or <a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-setValues">setValues</a>.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='enableTabScroll'>
          <xs:annotation>
            <xs:documentation>
              True to enable scrolling to tabs that may be invisible due to overflowing the overall TabPanel width. Only available with tabPosition:'top' (defaults to false).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='itemTpl'>
          <xs:annotation>
            <xs:documentation>
              (Optional) A <a href="Ext.Template.html">Template</a> or <a href="Ext.XTemplate.html">XTemplate</a> which may be provided to process the data object returned from <tt><a href="output/Ext.TabPanel.html#Ext.TabPanel-getTemplateArgs">getTemplateArgs</a></tt> to produce a clickable selector element in the tab strip. <p>The main element created should be a <tt>&lt;li&gt;</tt> element. In order for a click event on a selector element to be connected to its item, it must take its <i>id</i> from the TabPanel's native <tt><a href="output/Ext.TabPanel.html#Ext.TabPanel-getTemplateArgs">getTemplateArgs</a></tt>.</p><p>The child element which contains the title text must be marked by the CSS class <tt>x-tab-strip-inner</tt>.</p><p>To enable closability, the created element should contain an element marked by the CSS class <tt>x-tab-strip-close</tt>.</p><p>If a custom <tt>itemTpl</tt> is supplied, it is the developer's responsibility to create CSS style rules to create the desired appearance.</p>Below is an example of how to create customized tab selector items:<pre><code>new Ext.TabPanel({ renderTo: document.body, minTabWidth: 115, tabWidth: 135, enableTabScroll: true, width: 600, height: 250, defaults: {autoScroll:true}, itemTpl: new Ext.XTemplate( '&lt;li class="{cls}" id="{id}" style="overflow:hidden"&gt;', '&lt;tpl if="closable"&gt;', '&lt;a class="x-tab-strip-close"&gt;&lt;/a&gt;', '&lt;/tpl&gt;', '&lt;a class="x-tab-right" href="#" style="padding-left:6px"&gt;', '&lt;em class="x-tab-left"&gt;', '&lt;span class="x-tab-strip-inner"&gt;', '&lt;img src="{src}" style="float:left;margin:3px 3px 0 0"&gt;', '&lt;span style="margin-left:20px" class="x-tab-strip-text {iconCls}"&gt;{text} {extra}&lt;/span&gt;', '&lt;/span&gt;', '&lt;/em&gt;', '&lt;/a&gt;', '&lt;/li&gt;' ), getTemplateArgs: function(item) { // Call the native method to collect the base data. Like the ID! var result = Ext.TabPanel.prototype.getTemplateArgs.call(this, item); // Add stuff used in our template return Ext.apply(result, { closable: item.closable, src: item.iconSrc, extra: item.extraText || '' }); }, items: [{ title: 'New Tab 1', iconSrc: '../shared/icons/fam/grid.png', html: 'Tab Body 1', closable: true }, { title: 'New Tab 2', iconSrc: '../shared/icons/fam/grid.png', html: 'Tab Body 2', extraText: 'Extra stuff in the tab button' }] }); </code></pre>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='layoutOnTabChange'>
          <xs:annotation>
            <xs:documentation>
              Set to true to force a layout of the active tab when the tab is changed. Defaults to false. See <a href="Ext.layout.CardLayout.html">Ext.layout.CardLayout</a>.<code><a href="output/Ext.layout.CardLayout.html#Ext.layout.CardLayout-layoutOnCardChange">layoutOnCardChange</a></code>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='minTabWidth'>
          <xs:annotation>
            <xs:documentation>
              The minimum width in pixels for each tab when <a href="output/Ext.TabPanel.html#Ext.TabPanel-resizeTabs">resizeTabs</a> = true (defaults to 30).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='plain'>
          <xs:annotation>
            <xs:documentation>
              true to render the tab strip without a background container image (defaults to <tt>false</tt>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='resizeTabs'>
          <xs:annotation>
            <xs:documentation>
              True to automatically resize each tab so that the tabs will completely fill the tab strip (defaults to false). Setting this to true may cause specific widths that might be set per tab to be overridden in order to fit them all into view (although <a href="output/Ext.TabPanel.html#Ext.TabPanel-minTabWidth">minTabWidth</a> will always be honored).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='scrollDuration'>
          <xs:annotation>
            <xs:documentation>
              The number of milliseconds that each scroll animation should last (defaults to <tt>.35</tt>). Only applies when <tt><a href="output/Ext.TabPanel.html#Ext.TabPanel-animScroll">animScroll</a> = true</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='scrollIncrement'>
          <xs:annotation>
            <xs:documentation>
              The number of pixels to scroll each time a tab scroll button is pressed (defaults to <tt>100</tt>, or if <tt><a href="output/Ext.TabPanel.html#Ext.TabPanel-resizeTabs">resizeTabs</a> = true</tt>, the calculated tab width). Only applies when <tt><a href="output/Ext.TabPanel.html#Ext.TabPanel-enableTabScroll">enableTabScroll</a> = true</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='scrollRepeatInterval'>
          <xs:annotation>
            <xs:documentation>
              Number of milliseconds between each scroll while a tab scroll button is continuously pressed (defaults to <tt>400</tt>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='tabCls'>
          <xs:annotation>
            <xs:documentation>
              <b>This config option is used on <u>child Components</u> of ths TabPanel.</b> A CSS class name applied to the tab strip item representing the child Component, allowing special styling to be applied.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='tabMargin'>
          <xs:annotation>
            <xs:documentation>
              The number of pixels of space to calculate into the sizing and scrolling of tabs. If you change the margin in CSS, you will need to update this value so calculations are correct with either <tt><a href="output/Ext.TabPanel.html#Ext.TabPanel-resizeTabs">resizeTabs</a></tt> or scrolling tabs. (defaults to <tt>2</tt>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='tabPosition'>
          <xs:annotation>
            <xs:documentation>
              The position where the tab strip should be rendered (defaults to <tt>'top'</tt>). The only other supported value is <tt>'bottom'</tt>. <b>Note</b>: tab scrolling is only supported for <tt>tabPosition: 'top'</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='tabWidth'>
          <xs:annotation>
            <xs:documentation>
              The initial width in pixels of each new tab (defaults to 120).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='wheelIncrement'>
          <xs:annotation>
            <xs:documentation>
              For scrolling tabs, the number of pixels to increment on mouse wheel scrolling (defaults to <tt>20</tt>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='TabPanel' type='e:TabPanel_TYPE' substitutionGroup='e:Panel'>
    <xs:annotation>
      <xs:documentation>
        A basic tab container. TabPanels can be used exactly like a standard <a href="Ext.Panel.html">Ext.Panel</a> for layout purposes, but also have special support for containing child Components (<tt><a href="output/Ext.Container.html#Ext.Container-items">items</a></tt>) that are managed using a <a href="Ext.layout.CardLayout.html">CardLayout layout manager</a>, and displayed as separate tabs. <b>Note:</b> By default, a tab's close tool <i>destroys</i> the child tab Component and all its descendants. This makes the child tab Component, and all its descendants <b>unusable</b>. To enable re-use of a tab, configure the TabPanel with <b><code><a href="output/Ext.TabPanel.html#Ext.TabPanel-autoDestroy">autoDestroy: false</a></code></b>. <p style="font-weight: bold"><u>TabPanel header/footer elements</u></p><p>TabPanels use their <a href="output/Ext.Panel.html#Ext.Panel-header">header</a> or <a href="output/Ext.Panel.html#Ext.Panel-footer">footer</a> element (depending on the <a href="output/Ext.TabPanel.html#Ext.TabPanel-tabPosition">tabPosition</a> configuration) to accommodate the tab selector buttons. This means that a TabPanel will not display any configured title, and will not display any configured header <a href="output/Ext.Panel.html#Ext.Panel-tools">tools</a>.</p><p>To display a header, embed the TabPanel in a <a href="Ext.Panel.html">Panel</a> which uses <b><tt><a href="output/Ext.Container.html#Ext.Container-layout">layout:'fit'</a></tt></b>.</p><p style="font-weight: bold"><u>Tab Events</u></p><p>There is no actual tab class — each tab is simply a <a href="Ext.BoxComponent.html">Component</a> such as a <a href="Ext.Panel.html">Panel</a>. However, when rendered in a TabPanel, each child Component can fire additional events that only exist for tabs and are not available from other Components. These events are:</p><div><ul class="mdetail-params"><li><tt><b><a href="output/Ext.Panel.html#Ext.Panel-activate">activate</a></b></tt> : Fires when this Component becomes the active tab.</li><li><tt><b><a href="output/Ext.Panel.html#Ext.Panel-deactivate">deactivate</a></b></tt> : Fires when the Component that was the active tab becomes deactivated.</li><li><tt><b><a href="output/Ext.Panel.html#Ext.Panel-beforeclose">beforeclose</a></b></tt> : Fires when the user clicks on the close tool of a closeable tab. May be vetoed by returning <code>false</code> from a handler.</li><li><tt><b><a href="output/Ext.Panel.html#Ext.Panel-close">close</a></b></tt> : Fires a closeable tab has been closed by the user.</li></ul></div><p style="font-weight: bold"><u>Creating TabPanels from Code</u></p><p>TabPanels can be created and rendered completely in code, as in this example:</p><pre><code>var tabs = new Ext.TabPanel({ renderTo: Ext.getBody(), activeTab: 0, items: [{ title: 'Tab 1', html: 'A simple tab' },{ title: 'Tab 2', html: 'Another one' }] }); </code></pre><p style="font-weight: bold"><u>Creating TabPanels from Existing Markup</u></p><p>TabPanels can also be rendered from pre-existing markup in a couple of ways.</p><div><ul class="mdetail-params"><li>Pre-Structured Markup</li><li style="list-style: none"><div class="sub-desc"><p>A container div with one or more nested tab divs with class <tt>'x-tab'</tt> can be rendered entirely from existing markup (See the <a href="output/Ext.TabPanel.html#Ext.TabPanel-autoTabs">autoTabs</a> example).</p></div></li><li>Un-Structured Markup</li><li style="list-style: none"><div class="sub-desc"><p>A TabPanel can also be rendered from markup that is not strictly structured by simply specifying by id which elements should be the container and the tabs. Using this method tab content can be pulled from different elements within the page by id regardless of page structure. For example:</p><pre><code>var tabs = new Ext.TabPanel({ renderTo: 'my-tabs', activeTab: 0, items:[ {contentEl:'tab1', title:'Tab 1'}, {contentEl:'tab2', title:'Tab 2'} ] }); // Note that the tabs do not have to be nested within the container (although they can be) &lt;div id="my-tabs"&gt;&lt;/div&gt; &lt;div id="tab1" class="x-hide-display"&gt;A simple tab&lt;/div&gt; &lt;div id="tab2" class="x-hide-display"&gt;Another one&lt;/div&gt; </code></pre>Note that the tab divs in this example contain the class <tt>'x-hide-display'</tt> so that they can be rendered deferred without displaying outside the tabs. You could alternately set <tt><a href="output/Ext.TabPanel.html#Ext.TabPanel-deferredRender">deferredRender</a> = false</tt> to render all content tabs on page load.</div></li></ul></div> <p>This class represents the xtype 'tabpanel' and serves as a typed config object for constructor of class TabPanel.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.TabPanel
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='Template_TYPE'>
        <xs:sequence>
            <xs:element name='re' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The regular expression used to match template variables. Defaults to:<pre><code>re : /\{([\w\-]+)\}/g // for Ext Core re : /\{([\w\-]+)(?:\:([\w\.]&#42;)(?:\((.&#42;?)?\))?)?\}/g // for Ext JS </code></pre>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:Boolean' name='compiled'>
          <xs:annotation>
            <xs:documentation>
              Specify <tt>true</tt> to compile the template immediately (see <code><a href="output/Ext.Template.html#Ext.Template-compile">compile</a></code>). Defaults to <tt>false</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='disableFormats'>
          <xs:annotation>
            <xs:documentation>
              Specify <tt>true</tt> to disable format functions in the template. If the template does not contain <a href="Ext.util.Format.html">format functions</a>, setting <code>disableFormats</code> to true will reduce <code><a href="output/Ext.Template.html#Ext.Template-apply">apply</a></code> time. Defaults to <tt>false</tt>. <pre><code>var t = new Ext.Template( '&lt;div name="{id}"&gt;', '&lt;span class="{cls}"&gt;{name} {value}&lt;/span&gt;', '&lt;/div&gt;', { compiled: true, // <a href="output/Ext.Template.html#Ext.Template-compile">compile</a> immediately disableFormats: true // reduce</code> <a href="output/Ext.Template.html#Ext.Template-apply">apply</a> time since no formatting } ); </pre>For a list of available format functions, see <a href="Ext.util.Format.html">Ext.util.Format</a>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='re'>
          <xs:annotation>
            <xs:documentation>
              The regular expression used to match template variables. Defaults to:<pre><code>re : /\{([\w\-]+)\}/g // for Ext Core re : /\{([\w\-]+)(?:\:([\w\.]&#42;)(?:\((.&#42;?)?\))?)?\}/g // for Ext JS </code></pre>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
  </xs:complexType>
  <xs:element name='Template' type='e:Template_TYPE'>
    <xs:annotation>
      <xs:documentation>
        Represents an HTML fragment template. Templates may be <a href="output/Ext.Template.html#Ext.Template-compile">precompiled</a> for greater performance. <p>For example usage <a href="output/Ext.Template.html#Ext.Template-Template">see the constructor</a>.</p> <p>This class serves as a typed config object for constructor of class Template.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.Template
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='Tip_TYPE'>
    <xs:complexContent>
      <xs:extension base='e:Panel_TYPE'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:String' name='defaultAlign'>
          <xs:annotation>
            <xs:documentation>
              <b>Experimental</b>. The default <a href="output/Ext.Element.html#Ext.Element-alignTo">Ext.Element.alignTo</a> anchor position value for this tip relative to its element of origin (defaults to "tl-bl?").
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='maxWidth'>
          <xs:annotation>
            <xs:documentation>
              The maximum width of the tip in pixels (defaults to 300). The maximum supported value is 500.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='minWidth'>
          <xs:annotation>
            <xs:documentation>
              The minimum width of the tip in pixels (defaults to 40).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='Tip' type='e:Tip_TYPE' substitutionGroup='e:Panel'>
    <xs:annotation>
      <xs:documentation>
        nullThis is the base class for <a href="Ext.QuickTip.html">Ext.QuickTip</a> and <a href="Ext.Tooltip.html">Ext.Tooltip</a> that provides the basic layout and positioning that all tip-based classes require. This class can be used directly for simple, statically-positioned tips that are displayed programmatically, or it can be extended to provide custom tip implementations. <p>This class represents the xtype 'tip' and serves as a typed config object for constructor of class Tip.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.Tip
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ToolTip_TYPE'>
    <xs:complexContent>
      <xs:extension base='e:Tip_TYPE'>
        <xs:sequence>
            <xs:element name='mouseOffset' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  An XY offset from the mouse position where the tooltip should be shown (defaults to [15,18]).
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
                <xs:attribute name="mode" type="exml:configMode"/>
              </xs:complexType>
            </xs:element>
            <xs:element name='target' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The target HTMLElement, Ext.Element or id to monitor for mouseover events to trigger showing this ToolTip.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:Number' name='anchorOffset'>
          <xs:annotation>
            <xs:documentation>
              A numeric pixel value used to offset the default position of the anchor arrow (defaults to 0). When the anchor position is on the top or bottom of the tooltip, <code>anchorOffset</code> will be used as a horizontal offset. Likewise, when the anchor position is on the left or right side, <code>anchorOffset</code> will be used as a vertical offset.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='anchorToTarget'>
          <xs:annotation>
            <xs:documentation>
              True to anchor the tooltip to the target element, false to anchor it relative to the mouse coordinates (defaults to true). When <code>anchorToTarget</code> is true, use <code><a href="output/Ext.ToolTip.html#Ext.ToolTip-defaultAlign">defaultAlign</a></code> to control tooltip alignment to the target element. When <code>anchorToTarget</code> is false, use <code><a href="output/Ext.ToolTip.html#Ext.ToolTip-anchorPosition">anchorPosition</a></code> instead to control alignment.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='autoHide'>
          <xs:annotation>
            <xs:documentation>
              True to automatically hide the tooltip after the mouse exits the target element or after the <code><a href="output/Ext.ToolTip.html#Ext.ToolTip-dismissDelay">dismissDelay</a></code> has expired if set (defaults to true). If <code><a href="closable.html">closable</a> = true</code> a close tool button will be rendered into the tooltip header.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='delegate'>
          <xs:annotation>
            <xs:documentation>
              Optional. A <a href="Ext.DomQuery.html">DomQuery</a> selector which allows selection of individual elements within the <code><a href="output/Ext.ToolTip.html#Ext.ToolTip-target">target</a></code> element to trigger showing and hiding the ToolTip as the mouse moves within the target. <p>When specified, the child element of the target which caused a show event is placed into the <code><a href="output/Ext.ToolTip.html#Ext.ToolTip-triggerElement">triggerElement</a></code> property before the ToolTip is shown.</p><p>This may be useful when a Component has regular, repeating elements in it, each of which need a Tooltip which contains information specific to that element. For example:</p><pre><code>var myGrid = new Ext.grid.gridPanel(gridConfig); myGrid.on('render', function(grid) { var store = grid.getStore(); // Capture the Store. var view = grid.getView(); // Capture the GridView. myGrid.tip = new Ext.ToolTip({ target: view.mainBody, // The overall target element. delegate: '.x-grid3-row', // Each grid row causes its own seperate show and hide. trackMouse: true, // Moving within the row should not hide the tip. renderTo: document.body, // Render immediately so that tip.body can be // referenced prior to the first show. listeners: { // Change content dynamically depending on which element // triggered the show. beforeshow: function updateTipBody(tip) { var rowIndex = view.findRowIndex(tip.triggerElement); tip.body.dom.innerHTML = 'Over Record ID ' + store.getAt(rowIndex).id; } } }); }); </code></pre>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='dismissDelay'>
          <xs:annotation>
            <xs:documentation>
              Delay in milliseconds before the tooltip automatically hides (defaults to 5000). To disable automatic hiding, set dismissDelay = 0.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='hideDelay'>
          <xs:annotation>
            <xs:documentation>
              Delay in milliseconds after the mouse exits the target element but before the tooltip actually hides (defaults to 200). Set to 0 for the tooltip to hide immediately.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='mouseOffset'>
          <xs:annotation>
            <xs:documentation>
              An XY offset from the mouse position where the tooltip should be shown (defaults to [15,18]).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='showDelay'>
          <xs:annotation>
            <xs:documentation>
              Delay in milliseconds before the tooltip displays after the mouse enters the target element (defaults to 500)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='target'>
          <xs:annotation>
            <xs:documentation>
              The target HTMLElement, Ext.Element or id to monitor for mouseover events to trigger showing this ToolTip.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='trackMouse'>
          <xs:annotation>
            <xs:documentation>
              True to have the tooltip follow the mouse as it moves over the target element (defaults to false).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='ToolTip' type='e:ToolTip_TYPE' substitutionGroup='e:Tip'>
    <xs:annotation>
      <xs:documentation>
        A standard tooltip implementation for providing additional information when hovering over a target element. <p>This class represents the xtype 'tooltip' and serves as a typed config object for constructor of class ToolTip.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.ToolTip
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='Toolbar_TYPE'>
    <xs:complexContent>
      <xs:extension base='e:Container_TYPE'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:String' name='buttonAlign'>
          <xs:annotation>
            <xs:documentation>
              The default position at which to align child items. Defaults to <code>"left"</code> <p>May be specified as <code>"center"</code> to cause items added before a Fill (A <code>"-&gt;"</code>) item to be centered in the Toolbar. Items added after a Fill are still right-aligned.</p><p>Specify as <code>"right"</code> to right align all child items.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='enableOverflow'>
          <xs:annotation>
            <xs:documentation>
              Defaults to false. Configure <tt>true</tt> to make the toolbar provide a button which activates a dropdown Menu to show items which overflow the Toolbar's width.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='Toolbar' type='e:Toolbar_TYPE' substitutionGroup='e:Container'>
    <xs:annotation>
      <xs:documentation>
        Basic Toolbar class. Although the <tt><a href="output/Ext.Container.html#Ext.Container-defaultType">defaultType</a></tt> for Toolbar is <tt><a href="Ext.Button.html">button</a></tt>, Toolbar elements (child items for the Toolbar container) may be virtually any type of Component. Toolbar elements can be created explicitly via their constructors, or implicitly via their xtypes, and can be <tt><a href="output/Ext.Toolbar.html#Ext.Toolbar-add">add</a></tt>ed dynamically. <p>Some items have shortcut strings for creation:</p><pre><u>Shortcut</u> <u>xtype</u> <u>Class</u> <u>Description</u> '-&gt;' 'tbfill' <a href="Ext.Toolbar.Fill.html">Ext.Toolbar.Fill</a> begin using the right-justified button container '-' 'tbseparator' <a href="Ext.Toolbar.Separator.html">Ext.Toolbar.Separator</a> add a vertical separator bar between toolbar items ' ' 'tbspacer' <a href="Ext.Toolbar.Spacer.html">Ext.Toolbar.Spacer</a> add horiztonal space between elements </pre>Example usage of various elements: <pre><code>var tb = new Ext.Toolbar({ renderTo: document.body, width: 600, height: 100, items: [ { // xtype: 'button', // default for Toolbars, same as 'tbbutton' text: 'Button' }, { xtype: 'splitbutton', // same as 'tbsplitbutton' text: 'Split Button' }, // begin using the right-justified button container '-&gt;', // same as {xtype: 'tbfill'}, // Ext.Toolbar.Fill { xtype: 'textfield', name: 'field1', emptyText: 'enter search term' }, // add a vertical separator bar between toolbar items '-', // same as {xtype: 'tbseparator'} to create Ext.Toolbar.Separator 'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.Toolbar.TextItem {xtype: 'tbspacer'},// same as ' ' to create Ext.Toolbar.Spacer 'text 2', {xtype: 'tbspacer', width: 50}, // add a 50px space 'text 3' ] }); </code></pre>Example adding a ComboBox within a menu of a button: <pre><code>// ComboBox creation var combo = new Ext.form.ComboBox({ store: new Ext.data.ArrayStore({ autoDestroy: true, fields: ['initials', 'fullname'], data : [ ['FF', 'Fred Flintstone'], ['BR', 'Barney Rubble'] ] }), displayField: 'fullname', typeAhead: true, mode: 'local', forceSelection: true, triggerAction: 'all', emptyText: 'Select a name...', selectOnFocus: true, width: 135, getListParent: function() { return this.el.up('.x-menu'); }, iconCls: 'no-icon' //use iconCls if placing within menu to shift to right side of menu }); // put ComboBox in a Menu var menu = new Ext.menu.Menu({ id: 'mainMenu', items: [ combo // A Field in a Menu ] }); // add a Button with the menu tb.add({ text:'Button w/ Menu', menu: menu // assign menu by instance }); tb.doLayout(); </code></pre> <p>This class represents the xtype 'toolbar' and serves as a typed config object for constructor of class Toolbar.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.Toolbar
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='Updater_TYPE'>
    <xs:complexContent>
      <xs:extension base='eu:Observable_TYPE'>
        <xs:sequence>
        </xs:sequence>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='Updater' type='e:Updater_TYPE' substitutionGroup='eu:Observable'>
    <xs:annotation>
      <xs:documentation>
        Provides AJAX-style update capabilities for Element objects. Updater can be used to <a href="output/Ext.Updater.html#Ext.Updater-update">update</a> an <a href="Ext.Element.html">Ext.Element</a> once, or you can use <a href="output/Ext.Updater.html#Ext.Updater-startAutoRefresh">startAutoRefresh</a> to set up an auto-updating <a href="Ext.Element.html">Element</a> on a specific interval.<br/><br/>Usage:<br/><pre><code>var el = Ext.get("foo"); // Get Ext.Element object var mgr = el.getUpdater(); mgr.update({ url: "http://myserver.com/index.php", params: { param1: "foo", param2: "bar" } }); ... mgr.formUpdate("myFormId", "http://myserver.com/index.php"); <br/>// or directly (returns the same Updater instance) var mgr = new Ext.Updater("myElementId"); mgr.startAutoRefresh(60, "http://myserver.com/index.php"); mgr.on("update", myFcnNeedsToKnow); <br/>// short handed call directly from the element object Ext.get("foo").load({ url: "bar.php", scripts: true, params: "param1=foo&amp;param2=bar", text: "Loading Foo..." }); </code></pre> <p>This class serves as a typed config object for constructor of class Updater.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.Updater
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='Viewport_TYPE'>
    <xs:complexContent>
      <xs:extension base='e:Container_TYPE'>
        <xs:sequence>
        </xs:sequence>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='Viewport' type='e:Viewport_TYPE' substitutionGroup='e:Container'>
    <xs:annotation>
      <xs:documentation>
        A specialized container representing the viewable application area (the browser viewport). <p>The Viewport renders itself to the document body, and automatically sizes itself to the size of the browser viewport and manages window resizing. There may only be one Viewport created in a page. Inner layouts are available by virtue of the fact that all <a href="Ext.Panel.html">Panel</a>s added to the Viewport, either through its <a href="output/Ext.Viewport.html#Ext.Viewport-items">items</a>, or through the items, or the <a href="output/Ext.Viewport.html#Ext.Viewport-add">add</a> method of any of its child Panels may themselves have a layout.</p><p>The Viewport does not provide scrolling, so child Panels within the Viewport should provide for scrolling if needed using the <a href="output/Ext.Viewport.html#Ext.Viewport-autoScroll">autoScroll</a> config.</p><p>An example showing a classic application border layout:</p><pre><code>new Ext.Viewport({ layout: 'border', items: [{ region: 'north', html: '&lt;h1 class="x-panel-header"&gt;Page Title&lt;/h1&gt;', autoHeight: true, border: false, margins: '0 0 5 0' }, { region: 'west', collapsible: true, title: 'Navigation', width: 200 // the west region might typically utilize a <a href="Ext.tree.TreePanel.html">TreePanel</a> or a Panel with <a href="Ext.layout.AccordionLayout.html">Accordion layout</a> }, { region: 'south', title: 'Title for Panel', collapsible: true, html: 'Information goes here', split: true, height: 100, minHeight: 100 }, { region: 'east', title: 'Title for the Grid Panel', collapsible: true, split: true, width: 200, xtype: 'grid', // remaining grid configuration not shown ... // notice that the GridPanel is added directly as the region // it is not "overnested" inside another Panel }, { region: 'center', xtype: 'tabpanel', // TabPanel itself has no title items: { title: 'Default Tab', html: 'The first tab\'s content. Others may be added dynamically' } }] }); </code></pre> <p>This class represents the xtype 'viewport' and serves as a typed config object for constructor of class Viewport.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.Viewport
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='Window_TYPE'>
    <xs:complexContent>
      <xs:extension base='e:Panel_TYPE'>
        <xs:sequence>
            <xs:element name='animateTarget' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Id or element from which the window should animate while opening (defaults to null with no animation).
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='defaultButton' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Specifies a Component to receive focus when this Window is focused. <p>This may be one of:</p><div class="mdetail-params"><ul><li>The index of a footer Button.</li><li>The id of a Component.</li><li>A Component.</li></ul></div>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='manager' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A reference to the WindowGroup that should manage this window (defaults to <a href="Ext.WindowMgr.html">Ext.WindowMgr</a>).
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='onEsc' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Allows override of the built-in processing for the escape key. Default action is to close the Window (performing whatever action is specified in <a href="output/Ext.Window.html#Ext.Window-closeAction">closeAction</a>. To prevent the Window closing when the escape key is pressed, specify this as Ext.emptyFn (See <a href="output/Ext.html#Ext-emptyFn">Ext.emptyFn</a>).
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='animateTarget'>
          <xs:annotation>
            <xs:documentation>
              Id or element from which the window should animate while opening (defaults to null with no animation).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='closeAction'>
          <xs:annotation>
            <xs:documentation>
              The action to take when the close header tool is clicked: <div class="mdetail-params"><ul><li><b><code>'<a href="output/Ext.Window.html#Ext.Window-close">close</a>'</code></b> : <b>Default</b><div class="sub-desc"><a href="output/Ext.Window.html#Ext.Window-close">remove</a> the window from the DOM and <a href="output/Ext.Component.html#Ext.Component-destroy">destroy</a> it and all descendant Components. The window will <b>not</b> be available to be redisplayed via the <a href="output/Ext.Window.html#Ext.Window-show">show</a> method.</div></li><li><b><code>'<a href="output/Ext.Window.html#Ext.Window-hide">hide</a>'</code></b> : <div class="sub-desc"><a href="output/Ext.Window.html#Ext.Window-hide">hide</a> the window by setting visibility to hidden and applying negative offsets. The window will be available to be redisplayed via the <a href="output/Ext.Window.html#Ext.Window-show">show</a> method.</div></li></ul></div><p><b>Note:</b> This setting does not affect the <a href="output/Ext.Window.html#Ext.Window-close">close</a> method which will always <a href="output/Ext.Component.html#Ext.Component-destroy">destroy</a> the window. To programmatically <i>hide</i> a window, call <a href="output/Ext.Window.html#Ext.Window-hide">hide</a>.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='constrain'>
          <xs:annotation>
            <xs:documentation>
              True to constrain the window within its containing element, false to allow it to fall outside of its containing element. By default the window will be rendered to document.body. To render and constrain the window within another element specify <a href="output/Ext.Window.html#Ext.Window-renderTo">renderTo</a>. (defaults to false). Optionally the header only can be constrained using <a href="output/Ext.Window.html#Ext.Window-constrainHeader">constrainHeader</a>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='constrainHeader'>
          <xs:annotation>
            <xs:documentation>
              True to constrain the window header within its containing element (allowing the window body to fall outside of its containing element) or false to allow the header to fall outside its containing element (defaults to false). Optionally the entire window can be constrained using <a href="output/Ext.Window.html#Ext.Window-constrain">constrain</a>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='defaultButton'>
          <xs:annotation>
            <xs:documentation>
              Specifies a Component to receive focus when this Window is focused. <p>This may be one of:</p><div class="mdetail-params"><ul><li>The index of a footer Button.</li><li>The id of a Component.</li><li>A Component.</li></ul></div>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='expandOnShow'>
          <xs:annotation>
            <xs:documentation>
              True to always expand the window when it is displayed, false to keep it in its current state (which may be <a href="output/Ext.Window.html#Ext.Window-collapsed">collapsed</a>) when displayed (defaults to true).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='hideAnimDuration'>
          <xs:annotation>
            <xs:documentation>
              The number of seconds that the window hide animation takes if enabled. Defaults to 0.25
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='initHidden'>
          <xs:annotation>
            <xs:documentation>
              True to hide the window until show() is explicitly called (defaults to true).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='manager'>
          <xs:annotation>
            <xs:documentation>
              A reference to the WindowGroup that should manage this window (defaults to <a href="Ext.WindowMgr.html">Ext.WindowMgr</a>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='maximizable'>
          <xs:annotation>
            <xs:documentation>
              True to display the 'maximize' tool button and allow the user to maximize the window, false to hide the button and disallow maximizing the window (defaults to false). Note that when a window is maximized, the tool button will automatically change to a 'restore' button with the appropriate behavior already built-in that will restore the window to its previous size.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='maximized'>
          <xs:annotation>
            <xs:documentation>
              True to initially display the window in a maximized state. (Defaults to false).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='minHeight'>
          <xs:annotation>
            <xs:documentation>
              The minimum height in pixels allowed for this window (defaults to 100). Only applies when resizable = true.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='minWidth'>
          <xs:annotation>
            <xs:documentation>
              The minimum width in pixels allowed for this window (defaults to 200). Only applies when resizable = true.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='minimizable'>
          <xs:annotation>
            <xs:documentation>
              True to display the 'minimize' tool button and allow the user to minimize the window, false to hide the button and disallow minimizing the window (defaults to false). Note that this button provides no implementation -- the behavior of minimizing a window is implementation-specific, so the minimize event must be handled and a custom minimize behavior implemented for this option to be useful.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='modal'>
          <xs:annotation>
            <xs:documentation>
              True to make the window modal and mask everything behind it when displayed, false to display it without restricting access to other UI elements (defaults to false).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='onEsc'>
          <xs:annotation>
            <xs:documentation>
              Allows override of the built-in processing for the escape key. Default action is to close the Window (performing whatever action is specified in <a href="output/Ext.Window.html#Ext.Window-closeAction">closeAction</a>. To prevent the Window closing when the escape key is pressed, specify this as Ext.emptyFn (See <a href="output/Ext.html#Ext-emptyFn">Ext.emptyFn</a>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='plain'>
          <xs:annotation>
            <xs:documentation>
              True to render the window body with a transparent background so that it will blend into the framing elements, false to add a lighter background color to visually highlight the body element and separate it more distinctly from the surrounding frame (defaults to false).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='resizable'>
          <xs:annotation>
            <xs:documentation>
              True to allow user resizing at each edge and corner of the window, false to disable resizing (defaults to true).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='resizeHandles'>
          <xs:annotation>
            <xs:documentation>
              A valid <a href="Ext.Resizable.html">Ext.Resizable</a> handles config string (defaults to 'all'). Only applies when resizable = true.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='showAnimDuration'>
          <xs:annotation>
            <xs:documentation>
              The number of seconds that the window show animation takes if enabled. Defaults to 0.25
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='Window' type='e:Window_TYPE' substitutionGroup='e:Panel'>
    <xs:annotation>
      <xs:documentation>
        A specialized panel intended for use as an application window. Windows are floated, <a href="output/Ext.Window.html#Ext.Window-resizable">resizable</a>, and <a href="output/Ext.Window.html#Ext.Window-draggable">draggable</a> by default. Windows can be <a href="output/Ext.Window.html#Ext.Window-maximizable">maximized</a> to fill the viewport, restored to their prior size, and can be <a href="output/Ext.Window.html#Ext.Window-minimize">minimize</a>d. <p>Windows can also be linked to a <a href="Ext.WindowGroup.html">Ext.WindowGroup</a> or managed by the <a href="Ext.WindowMgr.html">Ext.WindowMgr</a> to provide grouping, activation, to front, to back and other application-specific behavior.</p><p>By default, Windows will be rendered to document.body. To <a href="output/Ext.Window.html#Ext.Window-constrain">constrain</a> a Window to another element specify <a href="output/Ext.Component.html#Ext.Component-renderTo">renderTo</a>.</p><p><b>Note:</b> By default, the <code><a href="output/Ext.Window.html#Ext.Window-closable">close</a></code> header tool <i>destroys</i> the Window resulting in destruction of any child Components. This makes the Window object, and all its descendants <b>unusable</b>. To enable re-use of a Window, use <b><code><a href="output/Ext.Window.html#Ext.Window-closeAction">closeAction: 'hide'</a></code></b>.</p> <p>This class represents the xtype 'window' and serves as a typed config object for constructor of class Window.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.Window
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='XTemplate_TYPE'>
    <xs:complexContent>
      <xs:extension base='e:Template_TYPE'>
        <xs:sequence>
        </xs:sequence>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='XTemplate' type='e:XTemplate_TYPE' substitutionGroup='e:Template'>
    <xs:annotation>
      <xs:documentation>
        A template class that supports advanced functionality. <div class="mdetail-params"><ul><li>Autofilling arrays using templates and sub-templates</li><li>Conditional processing with basic comparison operators</li><li>Basic math function support</li><li>Execute arbitrary inline code with special built-in template variables</li><li>Custom member functions</li><li>Many special tags and built-in operators that aren't defined as part of the API, but are supported in the templates that can be created</li></ul></div><p>XTemplate provides the templating mechanism built into:</p><div class="mdetail-params"><ul><li><a href="Ext.DataView.html">Ext.DataView</a></li><li><a href="Ext.ListView.html">Ext.ListView</a></li><li><a href="Ext.form.ComboBox.html">Ext.form.ComboBox</a></li><li><a href="Ext.grid.TemplateColumn.html">Ext.grid.TemplateColumn</a></li><li><a href="Ext.grid.GroupingView.html">Ext.grid.GroupingView</a></li><li><a href="Ext.menu.Item.html">Ext.menu.Item</a></li><li><a href="Ext.layout.MenuLayout.html">Ext.layout.MenuLayout</a></li><li><a href="Ext.ColorPalette.html">Ext.ColorPalette</a></li></ul></div><br/><br/> <p>For example usage <a href="output/Ext.XTemplate.html#Ext.XTemplate-XTemplate">see the constructor</a>.</p> <p>This class serves as a typed config object for constructor of class XTemplate.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.XTemplate
      </xs:documentation>
    </xs:annotation>
  </xs:element>
</xs:schema>
New to GrepCode? Check out our FAQ X