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.config" xmlns:ec="exml:ext.config" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:exml="http://www.jangaroo.net/exml/0.8" >
  <xs:import namespace="http://www.jangaroo.net/exml/0.8"/>
  <xs:complexType name='ext.config.absolutelayout'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.anchorlayout'>
        <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='absolutelayout' type='ec:ext.config.absolutelayout' substitutionGroup='ec:anchorlayout'>
    <xs:annotation>
      <xs:documentation>
        This is a layout that inherits the anchoring of <b><a href="Ext.layout.AnchorLayout.html">Ext.layout.AnchorLayout</a></b> and adds the ability for x/y positioning using the standard x and y component config options. <p>This class is intended to be extended or created via the <tt><b><a href="output/Ext.Container.html#Ext.Container-layout">layout</a></b></tt> configuration property. See <tt><b><a href="output/Ext.Container.html#Ext.Container-layout">Ext.Container.layout</a></b></tt> for additional details.</p><p>Example usage:</p><pre><code>var form = new Ext.form.FormPanel({ title: 'Absolute Layout', layout:'absolute', layoutConfig: { // layout-specific configs go here extraCls: 'x-abs-layout-item', }, baseCls: 'x-plain', url:'save-form.php', defaultType: 'textfield', items: [{ x: 0, y: 5, xtype:'label', text: 'Send To:' },{ x: 60, y: 0, name: 'to', anchor:'100%' // anchor width by percentage },{ x: 0, y: 35, xtype:'label', text: 'Subject:' },{ x: 60, y: 30, name: 'subject', anchor: '100%' // anchor width by percentage },{ x:0, y: 60, xtype: 'textarea', name: 'msg', anchor: '100% 100%' // anchor width and height }] }); </code></pre> <p>This class serves as a typed config object for constructor of class AbsoluteLayout.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.layout.AbsoluteLayout
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.abstractselectionmodel'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.observable'>
        <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='abstractselectionmodel' type='ec:ext.config.abstractselectionmodel' substitutionGroup='ec:observable'>
    <xs:annotation>
      <xs:documentation>
        Abstract base class for grid SelectionModels. It provides the interface that should be implemented by descendant classes. This class should not be directly instantiated. <p>This class serves as a typed config object for constructor of class AbstractSelectionModel.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.grid.AbstractSelectionModel
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.accordionlayout'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.fitlayout'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:Boolean' name='activeOnTop'>
          <xs:annotation>
            <xs:documentation>
              True to swap the position of each panel as it is expanded so that it becomes the first item in the container, false to keep the panels in the rendered order. <b>This is NOT compatible with "animate:true"</b> (defaults to false).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='animate'>
          <xs:annotation>
            <xs:documentation>
              True to slide the contained panels open and closed during expand/collapse using animation, false to open and close directly with no animation (defaults to false). Note: to defer to the specific config setting of each contained panel for this property, set this to undefined at the layout level.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='autoWidth'>
          <xs:annotation>
            <xs:documentation>
              True to set each contained item's width to 'auto', false to use the item's current width (defaults to true). Note that some components, in particular the <a href="Ext.grid.GridPanel.html">grid</a>, will not function properly within layouts if they have auto width, so in such cases this config should be set to false.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='collapseFirst'>
          <xs:annotation>
            <xs:documentation>
              True to make sure the collapse/expand toggle button always renders first (to the left of) any other tools in the contained panels' title bars, false to render it last (defaults to false).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='fill'>
          <xs:annotation>
            <xs:documentation>
              True to adjust the active item's height to fill the available space in the container, false to use the item's current height, or auto height if not explicitly set (defaults to true).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='hideCollapseTool'>
          <xs:annotation>
            <xs:documentation>
              True to hide the contained panels' collapse/expand toggle buttons, false to display them (defaults to false). When set to true, <a href="output/Ext.layout.AccordionLayout.html#Ext.layout.AccordionLayout-titleCollapse">titleCollapse</a> should be true also.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='sequence'>
          <xs:annotation>
            <xs:documentation>
              <b>Experimental</b>. If animate is set to true, this will result in each animation running in sequence.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='titleCollapse'>
          <xs:annotation>
            <xs:documentation>
              True to allow expand/collapse of each contained panel by clicking anywhere on the title bar, false to allow expand/collapse only when the toggle tool button is clicked (defaults to true). When set to false, <a href="output/Ext.layout.AccordionLayout.html#Ext.layout.AccordionLayout-hideCollapseTool">hideCollapseTool</a> should be false also.
            </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='accordionlayout' type='ec:ext.config.accordionlayout' substitutionGroup='ec:fitlayout'>
    <xs:annotation>
      <xs:documentation>
        This is a layout that manages multiple Panels in an expandable accordion style such that only <b>one Panel can be expanded at any given time</b>. Each Panel has built-in support for expanding and collapsing. <p>Note: Only Ext.Panels <b>and all subclasses of Ext.Panel</b> may be used in an accordion layout Container.</p><p>This class is intended to be extended or created via the <tt><b><a href="output/Ext.Container.html#Ext.Container-layout">layout</a></b></tt> configuration property. See <tt><b><a href="output/Ext.Container.html#Ext.Container-layout">Ext.Container.layout</a></b></tt> for additional details.</p><p>Example usage:</p><pre><code>var accordion = new Ext.Panel({ title: 'Accordion Layout', layout:'accordion', defaults: { // applied to each contained panel bodyStyle: 'padding:15px' }, layoutConfig: { // layout-specific configs go here titleCollapse: false, animate: true, activeOnTop: true }, items: [{ title: 'Panel 1', html: '&lt;p&gt;Panel content!&lt;/p&gt;' },{ title: 'Panel 2', html: '&lt;p&gt;Panel content!&lt;/p&gt;' },{ title: 'Panel 3', html: '&lt;p&gt;Panel content!&lt;/p&gt;' }] }); </code></pre> <p>This class serves as a typed config object for constructor of class AccordionLayout.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.layout.AccordionLayout
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.action'>
    <xs:complexContent>
      <xs:extension base='exml:base'>
        <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 mixed="true">
                <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 mixed="true">
                <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:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='action' type='ec:ext.config.action'>
    <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='ext.config.actioncolumn'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.gridcolumn'>
        <xs:sequence>
            <xs:element name='getClass' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A function which returns the CSS class to apply to the icon image. The function is passed the following parameters:<div class="mdetail-params"><ul><li><b>v</b> : Object<p class="sub-desc">The value of the column's configured field (if any).</p></li><li><b>metadata</b> : Object<p class="sub-desc">An object in which you may set the following attributes:</p><ul><li><b>css</b> : String<p class="sub-desc">A CSS class name to add to the cell's TD element.</p></li><li><b>attr</b> : String<p class="sub-desc">An HTML attribute definition string to apply to the data container element <i>within</i> the table cell (e.g. 'style="color:red;"').</p></li></ul><br/><br/></li><li><b>r</b> : Ext.data.Record<p class="sub-desc">The Record providing the data.</p></li><li><b>rowIndex</b> : Number<p class="sub-desc">The row index..</p></li><li><b>colIndex</b> : Number<p class="sub-desc">The column index.</p></li><li><b>store</b> : Ext.data.Store<p class="sub-desc">The Store which is providing the data Model.</p></li></ul></div>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='handler' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A function called when the icon is clicked. The handler is passed the following parameters:<div class="mdetail-params"><ul><li><code>grid</code> : GridPanel<div class="sub-desc">The owning GridPanel.</div></li><li><code>rowIndex</code> : Number<div class="sub-desc">The row index clicked on.</div></li><li><code>colIndex</code> : Number<div class="sub-desc">The column index clicked on.</div></li><li><code>item</code> : Object<div class="sub-desc">The clicked item (or this Column if multiple <a href="output/Ext.grid.ActionColumn.html#Ext.grid.ActionColumn-items">items</a> were not configured).</div></li><li><code>e</code> : Event<div class="sub-desc">The click event.</div></li></ul></div>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <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 which may contain multiple icon definitions, each element of which may contain: <div class="mdetail-params"><ul><li><code>icon</code> : String<div class="sub-desc">The url of an image to display as the clickable element in the column.</div></li><li><code>iconCls</code> : String<div class="sub-desc">A CSS class to apply to the icon image. To determine the class dynamically, configure the item with a <code>getClass</code> function.</div></li><li><code>getClass</code> : Function<div class="sub-desc">A function which returns the CSS class to apply to the icon image. The function is passed the following parameters:<ul><li><b>v</b> : Object<p class="sub-desc">The value of the column's configured field (if any).</p></li><li><b>metadata</b> : Object<p class="sub-desc">An object in which you may set the following attributes:</p><ul><li><b>css</b> : String<p class="sub-desc">A CSS class name to add to the cell's TD element.</p></li><li><b>attr</b> : String<p class="sub-desc">An HTML attribute definition string to apply to the data container element <i>within</i> the table cell (e.g. 'style="color:red;"').</p></li></ul><br/><br/></li><li><b>r</b> : Ext.data.Record<p class="sub-desc">The Record providing the data.</p></li><li><b>rowIndex</b> : Number<p class="sub-desc">The row index..</p></li><li><b>colIndex</b> : Number<p class="sub-desc">The column index.</p></li><li><b>store</b> : Ext.data.Store<p class="sub-desc">The Store which is providing the data Model.</p></li></ul></div></li><li><code>handler</code> : Function<div class="sub-desc">A function called when the icon is clicked.</div></li><li><code>scope</code> : Scope<div class="sub-desc">The scope (<code><b>this</b></code> reference) in which the <code>handler</code> and <code>getClass</code> functions are executed. Fallback defaults are this Column's configured scope, then this Column.</div></li><li><code>tooltip</code> : String<div class="sub-desc">A tooltip message to be displayed on hover. <a href="output/Ext.QuickTips.html#Ext.QuickTips-init">Ext.QuickTips</a> must have been initialized.</div></li></ul></div>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <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='altText'>
          <xs:annotation>
            <xs:documentation>
              The alt text to use for the image element. Defaults to <tt>''</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='getClass'>
          <xs:annotation>
            <xs:documentation>
              A function which returns the CSS class to apply to the icon image. The function is passed the following parameters:<div class="mdetail-params"><ul><li><b>v</b> : Object<p class="sub-desc">The value of the column's configured field (if any).</p></li><li><b>metadata</b> : Object<p class="sub-desc">An object in which you may set the following attributes:</p><ul><li><b>css</b> : String<p class="sub-desc">A CSS class name to add to the cell's TD element.</p></li><li><b>attr</b> : String<p class="sub-desc">An HTML attribute definition string to apply to the data container element <i>within</i> the table cell (e.g. 'style="color:red;"').</p></li></ul><br/><br/></li><li><b>r</b> : Ext.data.Record<p class="sub-desc">The Record providing the data.</p></li><li><b>rowIndex</b> : Number<p class="sub-desc">The row index..</p></li><li><b>colIndex</b> : Number<p class="sub-desc">The column index.</p></li><li><b>store</b> : Ext.data.Store<p class="sub-desc">The Store which is providing the data Model.</p></li></ul></div>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='handler'>
          <xs:annotation>
            <xs:documentation>
              A function called when the icon is clicked. The handler is passed the following parameters:<div class="mdetail-params"><ul><li><code>grid</code> : GridPanel<div class="sub-desc">The owning GridPanel.</div></li><li><code>rowIndex</code> : Number<div class="sub-desc">The row index clicked on.</div></li><li><code>colIndex</code> : Number<div class="sub-desc">The column index clicked on.</div></li><li><code>item</code> : Object<div class="sub-desc">The clicked item (or this Column if multiple <a href="output/Ext.grid.ActionColumn.html#Ext.grid.ActionColumn-items">items</a> were not configured).</div></li><li><code>e</code> : Event<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 URL of an image to display as the clickable element in the column. Optional - defaults to <code><a href="output/Ext.html#Ext-BLANK_IMAGE_URL">Ext.BLANK_IMAGE_URL</a></code>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='iconCls'>
          <xs:annotation>
            <xs:documentation>
              A CSS class to apply to the icon image. To determine the class dynamically, configure the Column with a <code><a href="output/Ext.grid.ActionColumn.html#Ext.grid.ActionColumn-getClass">getClass</a></code> function.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='items'>
          <xs:annotation>
            <xs:documentation>
              An Array which may contain multiple icon definitions, each element of which may contain: <div class="mdetail-params"><ul><li><code>icon</code> : String<div class="sub-desc">The url of an image to display as the clickable element in the column.</div></li><li><code>iconCls</code> : String<div class="sub-desc">A CSS class to apply to the icon image. To determine the class dynamically, configure the item with a <code>getClass</code> function.</div></li><li><code>getClass</code> : Function<div class="sub-desc">A function which returns the CSS class to apply to the icon image. The function is passed the following parameters:<ul><li><b>v</b> : Object<p class="sub-desc">The value of the column's configured field (if any).</p></li><li><b>metadata</b> : Object<p class="sub-desc">An object in which you may set the following attributes:</p><ul><li><b>css</b> : String<p class="sub-desc">A CSS class name to add to the cell's TD element.</p></li><li><b>attr</b> : String<p class="sub-desc">An HTML attribute definition string to apply to the data container element <i>within</i> the table cell (e.g. 'style="color:red;"').</p></li></ul><br/><br/></li><li><b>r</b> : Ext.data.Record<p class="sub-desc">The Record providing the data.</p></li><li><b>rowIndex</b> : Number<p class="sub-desc">The row index..</p></li><li><b>colIndex</b> : Number<p class="sub-desc">The column index.</p></li><li><b>store</b> : Ext.data.Store<p class="sub-desc">The Store which is providing the data Model.</p></li></ul></div></li><li><code>handler</code> : Function<div class="sub-desc">A function called when the icon is clicked.</div></li><li><code>scope</code> : Scope<div class="sub-desc">The scope (<code><b>this</b></code> reference) in which the <code>handler</code> and <code>getClass</code> functions are executed. Fallback defaults are this Column's configured scope, then this Column.</div></li><li><code>tooltip</code> : String<div class="sub-desc">A tooltip message to be displayed on hover. <a href="output/Ext.QuickTips.html#Ext.QuickTips-init">Ext.QuickTips</a> must have been initialized.</div></li></ul></div>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='stopSelection'>
          <xs:annotation>
            <xs:documentation>
              Defaults to <code>true</code>. Prevent grid <i>row</i> selection upon mousedown.
            </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='actioncolumn' type='ec:ext.config.actioncolumn' substitutionGroup='ec:gridcolumn'>
    <xs:annotation>
      <xs:documentation>
        A Grid column type which renders an icon, or a series of icons in a grid cell, and offers a scoped click handler for each icon. Example usage: <pre><code>new Ext.grid.GridPanel({ store: myStore, columns: [ { xtype: 'actioncolumn', width: 50, items: [ { icon : 'sell.gif', // Use a URL in the icon config tooltip: 'Sell stock', handler: function(grid, rowIndex, colIndex) { var rec = store.getAt(rowIndex); alert("Sell " + rec.get('company')); } }, { getClass: function(v, meta, rec) { // Or return a class from a function if (rec.get('change') &lt; 0) { this.items[1].tooltip = 'Do not buy!'; return 'alert-col'; } else { this.items[1].tooltip = 'Buy stock'; return 'buy-col'; } }, handler: function(grid, rowIndex, colIndex) { var rec = store.getAt(rowIndex); alert("Buy " + rec.get('company')); } } ] } //any other columns here ] }); </code></pre><p>The action column can be at any index in the columns array, and a grid can have any number of action columns.</p> <p>This class serves as a typed config object for constructor of class ActionColumn.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.grid.ActionColumn
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.anchorlayout'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.containerlayout'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:String' name='anchor'>
          <xs:annotation>
            <xs:documentation>
              This configuration option is to be applied to <b>child <tt>items</tt></b> of a container managed by this layout (ie. configured with <tt>layout:'anchor'</tt>). <br/><p>This value is what tells the layout how an item should be anchored to the container. <tt>items</tt> added to an AnchorLayout accept an anchoring-specific config property of <b>anchor</b> which is a string containing two values: the horizontal anchor value and the vertical anchor value (for example, '100% 50%'). The following types of anchor values are supported:</p><div class="mdetail-params"><ul><li><b>Percentage</b> : Any value between 1 and 100, expressed as a percentage.<div class="sub-desc">The first anchor is the percentage width that the item should take up within the container, and the second is the percentage height. For example:<pre><code>// two values specified anchor: '100% 50%' // render item complete width of the container and // 1/2 height of the container // one value specified anchor: '100%' // the width value; the height will default to auto </code></pre></div></li><li><b>Offsets</b> : Any positive or negative integer value.<div class="sub-desc">This is a raw adjustment where the first anchor is the offset from the right edge of the container, and the second is the offset from the bottom edge. For example:<pre><code>// two values specified anchor: '-50 -100' // render item the complete width of the container // minus 50 pixels and // the complete height minus 100 pixels. // one value specified anchor: '-50' // anchor value is assumed to be the right offset value // bottom offset will default to 0 </code></pre></div></li><li><b>Sides</b> : Valid values are <tt>'right'</tt> (or <tt>'r'</tt>) and <tt>'bottom'</tt> (or <tt>'b'</tt>).<div class="sub-desc">Either the container must have a fixed size or an anchorSize config value defined at render time in order for these to have any effect.</div></li><li><b>Mixed</b> : <div class="sub-desc">Anchor values can also be mixed as needed. For example, to render the width offset from the container right edge by 50 pixels and 75% of the container's height use: <pre><code>anchor: '-50 75%' </code></pre></div></li></ul></div>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='defaultAnchor'>
          <xs:annotation>
            <xs:documentation>
              default anchor for all child container items applied if no anchor or specific width is set on the child item. Defaults to '100%'.
            </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='anchorlayout' type='ec:ext.config.anchorlayout' substitutionGroup='ec:containerlayout'>
    <xs:annotation>
      <xs:documentation>
        This is a layout that enables anchoring of contained elements relative to the container's dimensions. If the container is resized, all anchored items are automatically rerendered according to their <b><tt><a href="output/Ext.layout.AnchorLayout.html#Ext.layout.AnchorLayout-anchor">anchor</a></tt></b> rules. <p>This class is intended to be extended or created via the layout:'anchor' <a href="output/Ext.Container.html#Ext.Container-layout">Ext.Container.layout</a> config, and should generally not need to be created directly via the new keyword.</p><p>AnchorLayout does not have any direct config options (other than inherited ones). By default, AnchorLayout will calculate anchor measurements based on the size of the container itself. However, the container using the AnchorLayout can supply an anchoring-specific config property of <b>anchorSize</b>. If anchorSize is specified, the layout will use it as a virtual container for the purposes of calculating anchor measurements based on it instead, allowing the container to be sized independently of the anchoring logic if necessary. For example:</p><pre><code>var viewport = new Ext.Viewport({ layout:'anchor', anchorSize: {width:800, height:600}, items:[{ title:'Item 1', html:'Content 1', width:800, anchor:'right 20%' },{ title:'Item 2', html:'Content 2', width:300, anchor:'50% 30%' },{ title:'Item 3', html:'Content 3', width:600, anchor:'-100 50%' }] }); </code></pre> <p>This class serves as a typed config object for constructor of class AnchorLayout.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.layout.AnchorLayout
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.arrayreader'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.jsonreader'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:Number' name='id'>
          <xs:annotation>
            <xs:documentation>
              The subscript within row Array that provides an ID for the Record. Deprecated. Use <a href="output/Ext.data.ArrayReader.html#Ext.data.ArrayReader-idIndex">idIndex</a> instead.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='idIndex'>
          <xs:annotation>
            <xs:documentation>
              The subscript within row Array that provides an ID for the Record.
            </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='arrayreader' type='ec:ext.config.arrayreader' substitutionGroup='ec:jsonreader'>
    <xs:annotation>
      <xs:documentation>
        Data reader class to create an Array of <a href="Ext.data.Record.html">Ext.data.Record</a> objects from an Array. Each element of that Array represents a row of data fields. The fields are pulled into a Record object using as a subscript, the <code>mapping</code> property of the field definition if it exists, or the field's ordinal position in the definition. <p>Example code:</p><pre><code>var Employee = Ext.data.Record.create([ {name: 'name', mapping: 1}, // "mapping" only needed if an "id" field is present which {name: 'occupation', mapping: 2} // precludes using the ordinal position as the index. ]); var myReader = new Ext.data.ArrayReader({ <a href="output/Ext.data.ArrayReader.html#Ext.data.ArrayReader-idIndex">idIndex</a>: 0 }, Employee); </code></pre><p>This would consume an Array like this:</p><pre><code>[ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ] </code></pre> <p>This class serves as a typed config object for constructor of class ArrayReader.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.data.ArrayReader
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.arraystore'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.store'>
        <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='arraystore' type='ec:ext.config.arraystore' substitutionGroup='ec:store'>
    <xs:annotation>
      <xs:documentation>
        Formerly known as "SimpleStore". <p>Small helper class to make creating <a href="Ext.data.Store.html">Ext.data.Store</a>s from Array data easier. An ArrayStore will be automatically configured with a <a href="Ext.data.ArrayReader.html">Ext.data.ArrayReader</a>.</p><p>A store configuration would be something like:</p><pre><code>var store = new Ext.data.ArrayStore({ // store configs autoDestroy: true, storeId: 'myStore', // reader configs idIndex: 0, fields: [ 'company', {name: 'price', type: 'float'}, {name: 'change', type: 'float'}, {name: 'pctChange', type: 'float'}, {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'} ] }); </code></pre><br/><br/> <p>This store is configured to consume a returned object of the form:</p><pre><code>var myData = [ ['3m Co',71.72,0.02,0.03,'9/1 12:00am'], ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'], ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'], ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'], ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'] ]; </code></pre>An object literal of this form could also be used as the <a href="output/Ext.data.ArrayStore.html#Ext.data.ArrayStore-data">data</a> config option.<br/><br/> <p><b>&#42;Note:</b> Although not listed here, this class accepts all of the configuration options of <b><a href="Ext.data.ArrayReader.html">ArrayReader</a></b>.</p> <p>This class serves as a typed config object for constructor of class ArrayStore.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.data.ArrayStore
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.asynctreenode'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.treenode'>
        <xs:sequence>
            <xs:element name='loader' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A TreeLoader to be used by this node (defaults to the loader defined on the tree)
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='loader'>
          <xs:annotation>
            <xs:documentation>
              A TreeLoader to be used by this node (defaults to the loader defined on the tree)
            </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='asynctreenode' type='ec:ext.config.asynctreenode' substitutionGroup='ec:treenode'>
    <xs:annotation>
      <xs:documentation>
        <p>This class serves as a typed config object for constructor of class AsyncTreeNode.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.tree.AsyncTreeNode
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.barchart'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.cartesianchart'>
        <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='barchart' type='ec:ext.config.barchart' substitutionGroup='ec:cartesianchart'>
    <xs:annotation>
      <xs:documentation>
        <p>This class represents the xtype 'barchart' and serves as a typed config object for constructor of class BarChart.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.chart.BarChart
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.basicform'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.observable'>
        <xs:sequence>
            <xs:element name='api' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  If specified load and submit actions will be handled with <a href="Ext.form.Action.DirectLoad.html">Ext.form.Action.DirectLoad</a> and <a href="Ext.form.Action.DirectSubmit.html">Ext.form.Action.DirectSubmit</a>. Methods which have been imported by Ext.Direct can be specified here to load and submit forms. Such as the following:<pre><code>api: { load: App.ss.MyProfile.load, submit: App.ss.MyProfile.submit } </code></pre><p>Load actions can use <code><a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-paramOrder">paramOrder</a></code> or <code><a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-paramsAsHash">paramsAsHash</a></code> to customize how the load method is invoked. Submit actions will always use a standard form submit. The formHandler configuration must be set on the associated server-side method which has been imported by Ext.Direct</p>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='baseParams' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Parameters to pass with all requests. e.g. baseParams: {id: '123', foo: 'bar'}. <p>Parameters are encoded as standard HTTP parameters using <a href="output/Ext.html#Ext-urlEncode">Ext.urlEncode</a>.</p>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='errorReader' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  An Ext.data.DataReader (e.g. <a href="Ext.data.XmlReader.html">Ext.data.XmlReader</a>) to be used to read field error messages returned from 'submit' actions. This is optional as there is built-in support for processing JSON. <p>The Records which provide messages for the invalid Fields must use the Field name (or id) as the Record ID, and must contain a field called 'msg' which contains the error message.</p><p>The errorReader does not have to be a full-blown implementation of a DataReader. It simply needs to implement a <tt>read(xhr)</tt> function which returns an Array of Records in an object with the following structure:</p><pre><code>{ records: recordArray } </code></pre>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='paramOrder' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A list of params to be executed server side. Defaults to <tt>undefined</tt>. Only used for the <code><a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-api">api</a></code> <code>load</code> configuration. <br/><p>Specify the params in the order in which they must be executed on the server-side as either (1) an Array of String values, or (2) a String of params delimited by either whitespace, comma, or pipe. For example, any of the following would be acceptable:</p><pre><code>paramOrder: ['param1','param2','param3'] paramOrder: 'param1 param2 param3' paramOrder: 'param1,param2,param3' paramOrder: 'param1|param2|param' </code></pre>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='reader' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  An Ext.data.DataReader (e.g. <a href="Ext.data.XmlReader.html">Ext.data.XmlReader</a>) to be used to read data when executing 'load' actions. This is optional as there is built-in support for processing JSON. For additional information on using an XMLReader see the example provided in examples/form/xml-form.html.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='api'>
          <xs:annotation>
            <xs:documentation>
              If specified load and submit actions will be handled with <a href="Ext.form.Action.DirectLoad.html">Ext.form.Action.DirectLoad</a> and <a href="Ext.form.Action.DirectSubmit.html">Ext.form.Action.DirectSubmit</a>. Methods which have been imported by Ext.Direct can be specified here to load and submit forms. Such as the following:<pre><code>api: { load: App.ss.MyProfile.load, submit: App.ss.MyProfile.submit } </code></pre><p>Load actions can use <code><a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-paramOrder">paramOrder</a></code> or <code><a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-paramsAsHash">paramsAsHash</a></code> to customize how the load method is invoked. Submit actions will always use a standard form submit. The formHandler configuration must be set on the associated server-side method which has been imported by Ext.Direct</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='baseParams'>
          <xs:annotation>
            <xs:documentation>
              Parameters to pass with all requests. e.g. baseParams: {id: '123', foo: 'bar'}. <p>Parameters are encoded as standard HTTP parameters using <a href="output/Ext.html#Ext-urlEncode">Ext.urlEncode</a>.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='errorReader'>
          <xs:annotation>
            <xs:documentation>
              An Ext.data.DataReader (e.g. <a href="Ext.data.XmlReader.html">Ext.data.XmlReader</a>) to be used to read field error messages returned from 'submit' actions. This is optional as there is built-in support for processing JSON. <p>The Records which provide messages for the invalid Fields must use the Field name (or id) as the Record ID, and must contain a field called 'msg' which contains the error message.</p><p>The errorReader does not have to be a full-blown implementation of a DataReader. It simply needs to implement a <tt>read(xhr)</tt> function which returns an Array of Records in an object with the following structure:</p><pre><code>{ records: recordArray } </code></pre>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='fileUpload'>
          <xs:annotation>
            <xs:documentation>
              Set to true if this form is a file upload. <p>File uploads are not performed using normal 'Ajax' techniques, that is they are <b>not</b> performed using XMLHttpRequests. Instead the form is submitted in the standard manner with the DOM <tt>&lt;form&gt;</tt> element temporarily modified to have its <a href="http://www.w3.org/TR/REC-html40/present/frames.html#adef-target">target</a> set to refer to a dynamically generated, hidden <tt>&lt;iframe&gt;</tt> which is inserted into the document but removed after the return data has been gathered.</p><p>The server response is parsed by the browser to create the document for the IFRAME. If the server is using JSON to send the return object, then the <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.17">Content-Type</a> header must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.</p><p>Characters which are significant to an HTML parser must be sent as HTML entities, so encode "&lt;" as "&amp;lt;", "&amp;" as "&amp;amp;" etc.</p><p>The response text is retrieved from the document, and a fake XMLHttpRequest object is created containing a <tt>responseText</tt> property in order to conform to the requirements of event handlers and callbacks.</p><p>Be aware that file upload packets are sent with the content type <a href="http://www.faqs.org/rfcs/rfc2388.html">multipart/form</a> and some server technologies (notably JEE) may require some custom processing in order to retrieve parameter names and parameter values from the packet content.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='method'>
          <xs:annotation>
            <xs:documentation>
              The request method to use (GET or POST) for form actions if one isn't supplied in the action options.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='paramOrder'>
          <xs:annotation>
            <xs:documentation>
              A list of params to be executed server side. Defaults to <tt>undefined</tt>. Only used for the <code><a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-api">api</a></code> <code>load</code> configuration. <br/><p>Specify the params in the order in which they must be executed on the server-side as either (1) an Array of String values, or (2) a String of params delimited by either whitespace, comma, or pipe. For example, any of the following would be acceptable:</p><pre><code>paramOrder: ['param1','param2','param3'] paramOrder: 'param1 param2 param3' paramOrder: 'param1,param2,param3' paramOrder: 'param1|param2|param' </code></pre>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='paramsAsHash'>
          <xs:annotation>
            <xs:documentation>
              Only used for the <code><a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-api">api</a></code> <code>load</code> configuration. Send parameters as a collection of named arguments (defaults to <tt>false</tt>). Providing a <tt><a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-paramOrder">paramOrder</a></tt> nullifies this configuration.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='reader'>
          <xs:annotation>
            <xs:documentation>
              An Ext.data.DataReader (e.g. <a href="Ext.data.XmlReader.html">Ext.data.XmlReader</a>) to be used to read data when executing 'load' actions. This is optional as there is built-in support for processing JSON. For additional information on using an XMLReader see the example provided in examples/form/xml-form.html.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='standardSubmit'>
          <xs:annotation>
            <xs:documentation>
              If set to <tt>true</tt>, standard HTML form submits are used instead of XHR (Ajax) style form submissions. Defaults to <tt>false</tt>. <br/><p><b>Note:</b> When using <code>standardSubmit</code>, the <code>options</code> to <code><a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-submit">submit</a></code> are ignored because Ext's Ajax infrastructure is bypassed. To pass extra parameters (e.g. <code>baseParams</code> and <code>params</code>), utilize hidden fields to submit extra data, for example:</p><pre><code>new Ext.FormPanel({ standardSubmit: true, baseParams: { foo: 'bar' }, <a href="url.html">url</a>: 'myProcess.php', items: [{ xtype: 'textfield', name: 'userName' }], buttons: [{ text: 'Save', handler: function(){ var fp = this.ownerCt.ownerCt, form = fp.getForm(); if (form.isValid()) { // check if there are baseParams and if // hidden items have been added already if (fp.baseParams &amp;&amp; !fp.paramsAdded) { // add hidden items for all baseParams for (i in fp.baseParams) { fp.add({ xtype: 'hidden', name: i, value: fp.baseParams[i] }); } fp.doLayout(); // set a custom flag to prevent re-adding fp.paramsAdded = true; } form.<a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-submit">submit</a>(); } } }] }); </code></pre>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='timeout'>
          <xs:annotation>
            <xs:documentation>
              Timeout for form actions in seconds (default is 30 seconds).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='trackResetOnLoad'>
          <xs:annotation>
            <xs:documentation>
              If set to <tt>true</tt>, <a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-reset">reset</a>() resets to the last loaded or <a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-setValues">setValues</a>() data instead of when the form was first created. Defaults to <tt>false</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='url'>
          <xs:annotation>
            <xs:documentation>
              The URL to use for form actions if one isn't supplied in the <code><a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-doAction">doAction</a> options</code>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='waitTitle'>
          <xs:annotation>
            <xs:documentation>
              The default title to show for the waiting message box (defaults to <tt>'Please Wait...'</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='basicform' type='ec:ext.config.basicform' substitutionGroup='ec:observable'>
    <xs:annotation>
      <xs:documentation>
        Encapsulates the DOM &lt;form&gt; element at the heart of the <a href="Ext.form.FormPanel.html">FormPanel</a> class, and provides input field management, validation, submission, and form loading services. <p>By default, Ext Forms are submitted through Ajax, using an instance of <a href="Ext.form.Action.Submit.html">Ext.form.Action.Submit</a>. To enable normal browser submission of an Ext Form, use the <a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-standardSubmit">standardSubmit</a> config option.</p><p style="font-weight: bold"><u>File Uploads</u></p><p><a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-fileUpload">File uploads</a> are not performed using Ajax submission, that is they are <b>not</b> performed using XMLHttpRequests. Instead the form is submitted in the standard manner with the DOM <tt>&lt;form&gt;</tt> element temporarily modified to have its <a href="http://www.w3.org/TR/REC-html40/present/frames.html#adef-target">target</a> set to refer to a dynamically generated, hidden <tt>&lt;iframe&gt;</tt> which is inserted into the document but removed after the return data has been gathered.</p><p>The server response is parsed by the browser to create the document for the IFRAME. If the server is using JSON to send the return object, then the <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.17">Content-Type</a> header must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.</p><p>Characters which are significant to an HTML parser must be sent as HTML entities, so encode "&lt;" as "&amp;lt;", "&amp;" as "&amp;amp;" etc.</p><p>The response text is retrieved from the document, and a fake XMLHttpRequest object is created containing a <tt>responseText</tt> property in order to conform to the requirements of event handlers and callbacks.</p><p>Be aware that file upload packets are sent with the content type <a href="http://www.faqs.org/rfcs/rfc2388.html">multipart/form</a> and some server technologies (notably JEE) may require some custom processing in order to retrieve parameter names and parameter values from the packet content.</p> <p>This class serves as a typed config object for constructor of class BasicForm.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.form.BasicForm
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.booleancolumn'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.gridcolumn'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:String' name='falseText'>
          <xs:annotation>
            <xs:documentation>
              The string returned by the renderer when the column value is falsy (but not undefined) (defaults to <tt>'false'</tt>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='trueText'>
          <xs:annotation>
            <xs:documentation>
              The string returned by the renderer when the column value is not falsy (defaults to <tt>'true'</tt>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='undefinedText'>
          <xs:annotation>
            <xs:documentation>
              The string returned by the renderer when the column value is undefined (defaults to <tt>'&amp;#160;'</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='booleancolumn' type='ec:ext.config.booleancolumn' substitutionGroup='ec:gridcolumn'>
    <xs:annotation>
      <xs:documentation>
        A Column definition class which renders boolean data fields. See the <a href="output/Ext.grid.Column.html#Ext.grid.Column-xtype">xtype</a> config option of <a href="Ext.grid.Column.html">Ext.grid.Column</a> for more details. <p>This class represents the xtype 'booleancolumn' and serves as a typed config object for constructor of class BooleanColumn.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.grid.BooleanColumn
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.borderlayout'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.containerlayout'>
        <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='borderlayout' type='ec:ext.config.borderlayout' substitutionGroup='ec:containerlayout'>
    <xs:annotation>
      <xs:documentation>
        This is a multi-pane, application-oriented UI layout style that supports multiple nested panels, automatic <a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-split">split</a> bars between <a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-BorderLayout.Region">regions</a> and built-in <a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-collapsible">expanding and collapsing</a> of regions. <p>This class is intended to be extended or created via the <tt>layout:'border'</tt> <a href="output/Ext.Container.html#Ext.Container-layout">Ext.Container.layout</a> config, and should generally not need to be created directly via the new keyword.</p><p>BorderLayout does not have any direct config options (other than inherited ones). All configuration options available for customizing the BorderLayout are at the <a href="Ext.layout.BorderLayout.Region.html">Ext.layout.BorderLayout.Region</a> and <a href="Ext.layout.BorderLayout.SplitRegion.html">Ext.layout.BorderLayout.SplitRegion</a> levels.</p><p>Example usage:</p><pre><code>var myBorderPanel = new Ext.Panel({ <a href="output/Ext.Component.html#Ext.Component-renderTo">renderTo</a>: document.body, <a href="output/Ext.BoxComponent.html#Ext.BoxComponent-width">width</a>: 700, <a href="output/Ext.BoxComponent.html#Ext.BoxComponent-height">height</a>: 500, <a href="output/Ext.Panel.html#Ext.Panel-title">title</a>: 'Border Layout', <a href="output/Ext.Container.html#Ext.Container-layout">layout</a>: 'border', <a href="output/Ext.Container.html#Ext.Container-items">items</a>: [{ <a href="output/Ext.Panel.html#Ext.Panel-title">title</a>: 'South Region is resizable', <a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-BorderLayout.Region">region</a>: 'south', // position for region <a href="output/Ext.BoxComponent.html#Ext.BoxComponent-height">height</a>: 100, <a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-split">split</a>: true, // enable resizing <a href="output/Ext.SplitBar.html#Ext.SplitBar-minSize">minSize</a>: 75, // defaults to <a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-minHeight">50</a> <a href="output/Ext.SplitBar.html#Ext.SplitBar-maxSize">maxSize</a>: 150, <a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-margins">margins</a>: '0 5 5 5' },{ // xtype: 'panel' implied by default <a href="output/Ext.Panel.html#Ext.Panel-title">title</a>: 'West Region is collapsible', <a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-BorderLayout.Region">region</a>:'west', <a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-margins">margins</a>: '5 0 0 5', <a href="output/Ext.BoxComponent.html#Ext.BoxComponent-width">width</a>: 200, <a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-collapsible">collapsible</a>: true, // make collapsible <a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-cmargins">cmargins</a>: '5 5 0 5', // adjust top margin when collapsed <a href="output/Ext.Component.html#Ext.Component-id">id</a>: 'west-region-container', <a href="output/Ext.Container.html#Ext.Container-layout">layout</a>: 'fit', <a href="output/Ext.Panel.html#Ext.Panel-unstyled">unstyled</a>: true },{ <a href="output/Ext.Panel.html#Ext.Panel-title">title</a>: 'Center Region', <a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-BorderLayout.Region">region</a>: 'center', // center region is required, no width/height specified <a href="output/Ext.Component.html#Ext.Component-xtype">xtype</a>: 'container', <a href="output/Ext.Container.html#Ext.Container-layout">layout</a>: 'fit', <a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-margins">margins</a>: '5 5 0 0' }] }); </code></pre><p><b><u>Notes</u></b>:</p><div class="mdetail-params"><ul><li>Any container using the BorderLayout <b>must</b> have a child item with <tt>region:'center'</tt>. The child item in the center region will always be resized to fill the remaining space not used by the other regions in the layout.</li><li>Any child items with a region of <tt>west</tt> or <tt>east</tt> must have <tt>width</tt> defined (an integer representing the number of pixels that the region should take up).</li><li>Any child items with a region of <tt>north</tt> or <tt>south</tt> must have <tt>height</tt> defined.</li><li>The regions of a BorderLayout are <b>fixed at render time</b> and thereafter, its child Components may not be removed or added. To add/remove Components within a BorderLayout, have them wrapped by an additional Container which is directly managed by the BorderLayout. If the region is to be collapsible, the Container used directly by the BorderLayout manager should be a Panel. In the following example a Container (an Ext.Panel) is added to the west region: <div style="margin-left:16px"><pre><code>wrc = <a href="output/Ext.html#Ext-getCmp">Ext.getCmp</a>('west-region-container'); wrc.<a href="output/Ext.Panel.html#Ext.Panel-removeAll">removeAll</a>(); wrc.<a href="output/Ext.Container.html#Ext.Container-add">add</a>({ title: 'Added Panel', html: 'Some content' }); wrc.<a href="output/Ext.Container.html#Ext.Container-doLayout">doLayout</a>(); </code></pre></div></li><li>To reference a <a href="Ext.layout.BorderLayout.Region.html">Region</a>: <div style="margin-left:16px"><pre><code>wr = myBorderPanel.layout.west; </code></pre></div></li></ul></div> <p>This class serves as a typed config object for constructor of class BorderLayout.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.layout.BorderLayout
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.box'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.component'>
        <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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='box' type='ec:ext.config.box' substitutionGroup='ec: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='ext.config.boxlayout'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.containerlayout'>
        <xs:sequence>
            <xs:element name='defaultMargins' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  If the individual contained items do not have a <tt>margins</tt> property specified, the default margins from this property will be applied to each item. <br/><p>This property may be specified as an object containing margins to apply in the format:</p><pre><code>{ top: (top margin), right: (right margin), bottom: (bottom margin), left: (left margin) }</code></pre><p>This property may also be specified as a string containing space-separated, numeric margin values. The order of the sides associated with each value matches the way CSS processes margin values:</p><div class="mdetail-params"><ul><li>If there is only one value, it applies to all sides.</li><li>If there are two values, the top and bottom borders are set to the first value and the right and left are set to the second.</li><li>If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third.</li><li>If there are four values, they apply to the top, right, bottom, and left, respectively.</li></ul></div><p>Defaults to:</p><pre><code>{top:0, right:0, bottom:0, left:0} </code></pre>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='defaultMargins'>
          <xs:annotation>
            <xs:documentation>
              If the individual contained items do not have a <tt>margins</tt> property specified, the default margins from this property will be applied to each item. <br/><p>This property may be specified as an object containing margins to apply in the format:</p><pre><code>{ top: (top margin), right: (right margin), bottom: (bottom margin), left: (left margin) }</code></pre><p>This property may also be specified as a string containing space-separated, numeric margin values. The order of the sides associated with each value matches the way CSS processes margin values:</p><div class="mdetail-params"><ul><li>If there is only one value, it applies to all sides.</li><li>If there are two values, the top and bottom borders are set to the first value and the right and left are set to the second.</li><li>If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third.</li><li>If there are four values, they apply to the top, right, bottom, and left, respectively.</li></ul></div><p>Defaults to:</p><pre><code>{top:0, right:0, bottom:0, left:0} </code></pre>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='padding'>
          <xs:annotation>
            <xs:documentation>
              Sets the padding to be applied to all child items managed by this layout. <p>This property must be specified as a string containing space-separated, numeric padding values. The order of the sides associated with each value matches the way CSS processes padding values:</p><div class="mdetail-params"><ul><li>If there is only one value, it applies to all sides.</li><li>If there are two values, the top and bottom borders are set to the first value and the right and left are set to the second.</li><li>If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third.</li><li>If there are four values, they apply to the top, right, bottom, and left, respectively.</li></ul></div><p>Defaults to: <code>"0"</code></p>
            </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='boxlayout' type='ec:ext.config.boxlayout' substitutionGroup='ec:containerlayout'>
    <xs:annotation>
      <xs:documentation>
        Base Class for HBoxLayout and VBoxLayout Classes. Generally it should not need to be used directly. <p>This class serves as a typed config object for constructor of class BoxLayout.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.layout.BoxLayout
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.boxoverflowmenu'>
    <xs:complexContent>
      <xs:extension base='exml:base'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:String' name='afterCls'>
          <xs:annotation>
            <xs:documentation>
              CSS class added to the afterCt element. This is the element that holds any special items such as scrollers, which must always be present at the rightmost edge of the 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='boxoverflowmenu' type='ec:ext.config.boxoverflowmenu'>
    <xs:annotation>
      <xs:documentation>
        Description <p>This class represents the xtype 'boxoverflowmenu' and serves as a typed config object for constructor of class Menu.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.layout.boxoverflow.Menu
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.button'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.box'>
        <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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='ec:ext.config.button' substitutionGroup='ec:box'>
    <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='ext.config.buttongroup'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.panel'>
        <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='ec:ext.config.buttongroup' substitutionGroup='ec: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='ext.config.cardlayout'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.fitlayout'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:Boolean' name='deferredRender'>
          <xs:annotation>
            <xs:documentation>
              True to render each contained item at the time it becomes active, false to render all contained items as soon as the layout is rendered (defaults to false). If there is a significant amount of content or a lot of heavy controls being rendered into panels that are not displayed by default, setting this to true might improve performance.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='layoutOnCardChange'>
          <xs:annotation>
            <xs:documentation>
              True to force a layout of the active item when the active card is changed. 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='cardlayout' type='ec:ext.config.cardlayout' substitutionGroup='ec:fitlayout'>
    <xs:annotation>
      <xs:documentation>
        This layout manages multiple child Components, each fitted to the Container, where only a single child Component can be visible at any given time. This layout style is most commonly used for wizards, tab implementations, etc. This class is intended to be extended or created via the layout:'card' <a href="output/Ext.Container.html#Ext.Container-layout">Ext.Container.layout</a> config, and should generally not need to be created directly via the new keyword. <p>The CardLayout's focal method is <a href="output/Ext.layout.CardLayout.html#Ext.layout.CardLayout-setActiveItem">setActiveItem</a>. Since only one panel is displayed at a time, the only way to move from one Component to the next is by calling setActiveItem, passing the id or index of the next panel to display. The layout itself does not provide a user interface for handling this navigation, so that functionality must be provided by the developer.</p><p>In the following example, a simplistic wizard setup is demonstrated. A button bar is added to the footer of the containing panel to provide navigation buttons. The buttons will be handled by a common navigation routine -- for this example, the implementation of that routine has been omitted since it can be any type of custom logic. Note that other uses of a CardLayout (like a tab control) would require a completely different implementation. For serious implementations, a better approach would be to extend CardLayout to provide the custom functionality needed. Example usage:</p><pre><code>var navHandler = function(direction){ // This routine could contain business logic required to manage the navigation steps. // It would call setActiveItem as needed, manage navigation button state, handle any // branching logic that might be required, handle alternate actions like cancellation // or finalization, etc. A complete wizard implementation could get pretty // sophisticated depending on the complexity required, and should probably be // done as a subclass of CardLayout in a real-world implementation. }; var card = new Ext.Panel({ title: 'Example Wizard', layout:'card', activeItem: 0, // make sure the active item is set on the container config! bodyStyle: 'padding:15px', defaults: { // applied to each contained panel border:false }, // just an example of one possible navigation scheme, using buttons bbar: [ { id: 'move-prev', text: 'Back', handler: navHandler.createDelegate(this, [-1]), disabled: true }, '-&gt;', // greedy spacer so that the buttons are aligned to each side { id: 'move-next', text: 'Next', handler: navHandler.createDelegate(this, [1]) } ], // the panels (or "cards") within the layout items: [{ id: 'card-0', html: '&lt;h1&gt;Welcome to the Wizard!&lt;/h1&gt;&lt;p&gt;Step 1 of 3&lt;/p&gt;' },{ id: 'card-1', html: '&lt;p&gt;Step 2 of 3&lt;/p&gt;' },{ id: 'card-2', html: '&lt;h1&gt;Congratulations!&lt;/h1&gt;&lt;p&gt;Step 3 of 3 - Complete&lt;/p&gt;' }] }); </code></pre> <p>This class serves as a typed config object for constructor of class CardLayout.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.layout.CardLayout
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.cartesianchart'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.chart'>
        <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='cartesianchart' type='ec:ext.config.cartesianchart' substitutionGroup='ec:chart'>
    <xs:annotation>
      <xs:documentation>
        <p>This class represents the xtype 'cartesianchart' and serves as a typed config object for constructor of class CartesianChart.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.chart.CartesianChart
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.cellselectionmodel'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.abstractselectionmodel'>
        <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='cellselectionmodel' type='ec:ext.config.cellselectionmodel' substitutionGroup='ec:abstractselectionmodel'>
    <xs:annotation>
      <xs:documentation>
        This class provides the basic implementation for <i>single</i> <b>cell</b> selection in a grid. The object stored as the selection contains the following properties: <div class="mdetail-params"><ul><li><b>cell</b> : see <a href="output/Ext.grid.CellSelectionModel.html#Ext.grid.CellSelectionModel-getSelectedCell">getSelectedCell</a></li><li><b>record</b> : Ext.data.record The <a href="Ext.data.Record.html">Record</a> which provides the data for the row containing the selection</li></ul></div> <p>This class serves as a typed config object for constructor of class CellSelectionModel.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.grid.CellSelectionModel
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.chart'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.flash'>
        <xs:sequence>
            <xs:element name='chartStyle' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Sets styles for this chart. This contains default styling, so modifying this property will <b>override</b> the built in styles of the chart. Use <a href="output/Ext.chart.Chart.html#Ext.chart.Chart-extraStyle">extraStyle</a> to add customizations to the default styling.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='extraStyle' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Contains extra styles that will be added or overwritten to the default chartStyle. Defaults to <tt>null</tt>. For a detailed list of the options available, visit the YUI Charts site at <a href="http://developer.yahoo.com/yui/charts/#basicstyles">http://developer.yahoo.com/yui/charts/#basicstyles</a><br/>Some of the options available:<br/><ul style="padding:5px;padding-left:16px;list-style-type:inherit;"><li><b>padding</b> - The space around the edge of the chart's contents. Padding does not increase the size of the chart.</li><li><b>animationEnabled</b> - A Boolean value that specifies whether marker animations are enabled or not. Enabled by default.</li><li><b>font</b> - An Object defining the font style to be used in the chart. Defaults to <tt>{ name: 'Tahoma', color: 0x444444, size: 11 }</tt><br/><ul style="padding:5px;padding-left:26px;list-style-type:circle;"><li><b>name</b> - font name</li><li><b>color</b> - font color (hex code, ie: "#ff0000", "ff0000" or 0xff0000)</li><li><b>size</b> - font size in points (numeric portion only, ie: 11)</li><li><b>bold</b> - boolean</li><li><b>italic</b> - boolean</li><li><b>underline</b> - boolean</li></ul></li><li><b>border</b> - An object defining the border style around the chart. The chart itself will decrease in dimensions to accommodate the border.<br/><ul style="padding:5px;padding-left:26px;list-style-type:circle;"><li><b>color</b> - border color (hex code, ie: "#ff0000", "ff0000" or 0xff0000)</li><li><b>size</b> - border size in pixels (numeric portion only, ie: 1)</li></ul></li><li><b>background</b> - An object defining the background style of the chart.<br/><ul style="padding:5px;padding-left:26px;list-style-type:circle;"><li><b>color</b> - border color (hex code, ie: "#ff0000", "ff0000" or 0xff0000)</li><li><b>image</b> - an image URL. May be relative to the current document or absolute.</li></ul></li><li><b>legend</b> - An object defining the legend style<br/><ul style="padding:5px;padding-left:26px;list-style-type:circle;"><li><b>display</b> - location of the legend. Possible values are "none", "left", "right", "top", and "bottom".</li><li><b>spacing</b> - an image URL. May be relative to the current document or absolute.</li><li><b>padding, border, background, font</b> - same options as described above.</li></ul></li><li><b>dataTip</b> - An object defining the style of the data tip (tooltip).<br/><ul style="padding:5px;padding-left:26px;list-style-type:circle;"><li><b>padding, border, background, font</b> - same options as described above.</li></ul></li><li><b>xAxis and yAxis</b> - An object defining the style of the style of either axis.<br/><ul style="padding:5px;padding-left:26px;list-style-type:circle;"><li><b>color</b> - same option as described above.</li><li><b>size</b> - same option as described above.</li><li><b>showLabels</b> - boolean</li><li><b>labelRotation</b> - a value in degrees from -90 through 90. Default is zero.</li></ul></li><li><b>majorGridLines and minorGridLines</b> - An object defining the style of the style of the grid lines.<br/><ul style="padding:5px;padding-left:26px;list-style-type:circle;"><li><b>color, size</b> - same options as described above.</li></ul></li><li><b>zeroGridLine</b> - An object defining the style of the style of the zero grid line.<br/><ul style="padding:5px;padding-left:26px;list-style-type:circle;"><li><b>color, size</b> - same options as described above.</li></ul></li><li><b>majorTicks and minorTicks</b> - An object defining the style of the style of ticks in the chart.<br/><ul style="padding:5px;padding-left:26px;list-style-type:circle;"><li><b>color, size</b> - same options as described above.</li><li><b>length</b> - the length of each tick in pixels extending from the axis.</li><li><b>display</b> - how the ticks are drawn. Possible values are "none", "inside", "outside", and "cross".</li></ul></li></ul>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='seriesStyles' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Contains styles to apply to the series after a refresh. Defaults to <tt>null</tt>.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='chartStyle'>
          <xs:annotation>
            <xs:documentation>
              Sets styles for this chart. This contains default styling, so modifying this property will <b>override</b> the built in styles of the chart. Use <a href="output/Ext.chart.Chart.html#Ext.chart.Chart-extraStyle">extraStyle</a> to add customizations to the default styling.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='disableCaching'>
          <xs:annotation>
            <xs:documentation>
              True to add a "cache buster" to the end of the chart url. Defaults to true for Opera and IE.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='extraStyle'>
          <xs:annotation>
            <xs:documentation>
              Contains extra styles that will be added or overwritten to the default chartStyle. Defaults to <tt>null</tt>. For a detailed list of the options available, visit the YUI Charts site at <a href="http://developer.yahoo.com/yui/charts/#basicstyles">http://developer.yahoo.com/yui/charts/#basicstyles</a><br/>Some of the options available:<br/><ul style="padding:5px;padding-left:16px;list-style-type:inherit;"><li><b>padding</b> - The space around the edge of the chart's contents. Padding does not increase the size of the chart.</li><li><b>animationEnabled</b> - A Boolean value that specifies whether marker animations are enabled or not. Enabled by default.</li><li><b>font</b> - An Object defining the font style to be used in the chart. Defaults to <tt>{ name: 'Tahoma', color: 0x444444, size: 11 }</tt><br/><ul style="padding:5px;padding-left:26px;list-style-type:circle;"><li><b>name</b> - font name</li><li><b>color</b> - font color (hex code, ie: "#ff0000", "ff0000" or 0xff0000)</li><li><b>size</b> - font size in points (numeric portion only, ie: 11)</li><li><b>bold</b> - boolean</li><li><b>italic</b> - boolean</li><li><b>underline</b> - boolean</li></ul></li><li><b>border</b> - An object defining the border style around the chart. The chart itself will decrease in dimensions to accommodate the border.<br/><ul style="padding:5px;padding-left:26px;list-style-type:circle;"><li><b>color</b> - border color (hex code, ie: "#ff0000", "ff0000" or 0xff0000)</li><li><b>size</b> - border size in pixels (numeric portion only, ie: 1)</li></ul></li><li><b>background</b> - An object defining the background style of the chart.<br/><ul style="padding:5px;padding-left:26px;list-style-type:circle;"><li><b>color</b> - border color (hex code, ie: "#ff0000", "ff0000" or 0xff0000)</li><li><b>image</b> - an image URL. May be relative to the current document or absolute.</li></ul></li><li><b>legend</b> - An object defining the legend style<br/><ul style="padding:5px;padding-left:26px;list-style-type:circle;"><li><b>display</b> - location of the legend. Possible values are "none", "left", "right", "top", and "bottom".</li><li><b>spacing</b> - an image URL. May be relative to the current document or absolute.</li><li><b>padding, border, background, font</b> - same options as described above.</li></ul></li><li><b>dataTip</b> - An object defining the style of the data tip (tooltip).<br/><ul style="padding:5px;padding-left:26px;list-style-type:circle;"><li><b>padding, border, background, font</b> - same options as described above.</li></ul></li><li><b>xAxis and yAxis</b> - An object defining the style of the style of either axis.<br/><ul style="padding:5px;padding-left:26px;list-style-type:circle;"><li><b>color</b> - same option as described above.</li><li><b>size</b> - same option as described above.</li><li><b>showLabels</b> - boolean</li><li><b>labelRotation</b> - a value in degrees from -90 through 90. Default is zero.</li></ul></li><li><b>majorGridLines and minorGridLines</b> - An object defining the style of the style of the grid lines.<br/><ul style="padding:5px;padding-left:26px;list-style-type:circle;"><li><b>color, size</b> - same options as described above.</li></ul></li><li><b>zeroGridLine</b> - An object defining the style of the style of the zero grid line.<br/><ul style="padding:5px;padding-left:26px;list-style-type:circle;"><li><b>color, size</b> - same options as described above.</li></ul></li><li><b>majorTicks and minorTicks</b> - An object defining the style of the style of ticks in the chart.<br/><ul style="padding:5px;padding-left:26px;list-style-type:circle;"><li><b>color, size</b> - same options as described above.</li><li><b>length</b> - the length of each tick in pixels extending from the axis.</li><li><b>display</b> - how the ticks are drawn. Possible values are "none", "inside", "outside", and "cross".</li></ul></li></ul>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='seriesStyles'>
          <xs:annotation>
            <xs:documentation>
              Contains styles to apply to the series after a refresh. Defaults to <tt>null</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='chart' type='ec:ext.config.chart' substitutionGroup='ec:flash'>
    <xs:annotation>
      <xs:documentation>
        The Ext.chart package provides the capability to visualize data with flash based charting. Each chart binds directly to an Ext.data.Store enabling automatic updates of the chart. To change the look and feel of a chart, see the <a href="output/Ext.chart.Chart.html#Ext.chart.Chart-chartStyle">chartStyle</a> and <a href="output/Ext.chart.Chart.html#Ext.chart.Chart-extraStyle">extraStyle</a> config options. <p>This class represents the xtype 'chart' and serves as a typed config object for constructor of class Chart.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.chart.Chart
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.checkbox'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.field'>
        <xs:sequence>
            <xs:element name='handler' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A function called when the <a href="output/Ext.form.Checkbox.html#Ext.form.Checkbox-checked">checked</a> value changes (can be used instead of handling the check event). The handler is passed the following parameters: <div class="mdetail-params"><ul><li><b>checkbox</b> : Ext.form.Checkbox<div class="sub-desc">The Checkbox being toggled.</div></li><li><b>checked</b> : Boolean<div class="sub-desc">The new checked state of the checkbox.</div></li></ul></div>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <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>
                  An object to use as the scope ('this' reference) of the <a href="output/Ext.form.Checkbox.html#Ext.form.Checkbox-handler">handler</a> function (defaults to this Checkbox).
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='boxLabel'>
          <xs:annotation>
            <xs:documentation>
              The text that appears beside the checkbox
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='checked'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> if the checkbox should render initially checked (defaults to <tt>false</tt>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='handler'>
          <xs:annotation>
            <xs:documentation>
              A function called when the <a href="output/Ext.form.Checkbox.html#Ext.form.Checkbox-checked">checked</a> value changes (can be used instead of handling the check event). The handler is passed the following parameters: <div class="mdetail-params"><ul><li><b>checkbox</b> : Ext.form.Checkbox<div class="sub-desc">The Checkbox being toggled.</div></li><li><b>checked</b> : Boolean<div class="sub-desc">The new checked state of the checkbox.</div></li></ul></div>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='inputValue'>
          <xs:annotation>
            <xs:documentation>
              The value that should go into the generated input element's value attribute
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='scope'>
          <xs:annotation>
            <xs:documentation>
              An object to use as the scope ('this' reference) of the <a href="output/Ext.form.Checkbox.html#Ext.form.Checkbox-handler">handler</a> function (defaults to this Checkbox).
            </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='checkbox' type='ec:ext.config.checkbox' substitutionGroup='ec:field'>
    <xs:annotation>
      <xs:documentation>
        Single checkbox field. Can be used as a direct replacement for traditional checkbox fields. <p>This class represents the xtype 'checkbox' and serves as a typed config object for constructor of class Checkbox.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.form.Checkbox
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.checkboxgroup'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.field'>
        <xs:sequence>
            <xs:element name='columns' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Specifies the number of columns to use when displaying grouped checkbox/radio controls using automatic layout. This config can take several types of values: <ul><li><b>'auto'</b> : <p class="sub-desc">The controls will be rendered one per column on one row and the width of each column will be evenly distributed based on the width of the overall field container. This is the default.</p></li><li><b>Number</b> : <p class="sub-desc">If you specific a number (e.g., 3) that number of columns will be created and the contained controls will be automatically distributed based on the value of <a href="output/Ext.form.CheckboxGroup.html#Ext.form.CheckboxGroup-vertical">vertical</a>.</p></li><li><b>Array</b> : Object<p class="sub-desc">You can also specify an array of column widths, mixing integer (fixed width) and float (percentage width) values as needed (e.g., [100, .25, .75]). Any integer values will be rendered first, then any float values will be calculated as a percentage of the remaining space. Float values do not have to add up to 1 (100%) although if you want the controls to take up the entire field container you should do so.</p></li></ul>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <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.form.Checkbox.html">Checkbox</a>es or Checkbox config objects to arrange in the group.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <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='allowBlank'>
          <xs:annotation>
            <xs:documentation>
              False to validate that at least one item in the group is checked (defaults to true). If no items are selected at validation time, {&#64;link
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='blankText'>
          <xs:annotation>
            <xs:documentation>
              Error text to display if the <a href="output/Ext.form.CheckboxGroup.html#Ext.form.CheckboxGroup-allowBlank">allowBlank</a> validation fails (defaults to "You must select at least one item in this group")
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='columns'>
          <xs:annotation>
            <xs:documentation>
              Specifies the number of columns to use when displaying grouped checkbox/radio controls using automatic layout. This config can take several types of values: <ul><li><b>'auto'</b> : <p class="sub-desc">The controls will be rendered one per column on one row and the width of each column will be evenly distributed based on the width of the overall field container. This is the default.</p></li><li><b>Number</b> : <p class="sub-desc">If you specific a number (e.g., 3) that number of columns will be created and the contained controls will be automatically distributed based on the value of <a href="output/Ext.form.CheckboxGroup.html#Ext.form.CheckboxGroup-vertical">vertical</a>.</p></li><li><b>Array</b> : Object<p class="sub-desc">You can also specify an array of column widths, mixing integer (fixed width) and float (percentage width) values as needed (e.g., [100, .25, .75]). Any integer values will be rendered first, then any float values will be calculated as a percentage of the remaining space. Float values do not have to add up to 1 (100%) although if you want the controls to take up the entire field container you should do so.</p></li></ul>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='items'>
          <xs:annotation>
            <xs:documentation>
              An Array of <a href="Ext.form.Checkbox.html">Checkbox</a>es or Checkbox config objects to arrange in the group.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='vertical'>
          <xs:annotation>
            <xs:documentation>
              True to distribute contained controls across columns, completely filling each column top to bottom before starting on the next column. The number of controls in each column will be automatically calculated to keep columns as even as possible. The default value is false, so that controls will be added to columns one at a time, completely filling each row left to right before starting on the next row.
            </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='checkboxgroup' type='ec:ext.config.checkboxgroup' substitutionGroup='ec:field'>
    <xs:annotation>
      <xs:documentation>
        A grouping container for <a href="Ext.form.Checkbox.html">Ext.form.Checkbox</a> controls. <p>Sample usage:</p><pre><code>var myCheckboxGroup = new Ext.form.CheckboxGroup({ id:'myGroup', xtype: 'checkboxgroup', fieldLabel: 'Single Column', itemCls: 'x-check-group-alt', // Put all controls in a single column with width 100% columns: 1, items: [ {boxLabel: 'Item 1', name: 'cb-col-1'}, {boxLabel: 'Item 2', name: 'cb-col-2', checked: true}, {boxLabel: 'Item 3', name: 'cb-col-3'} ] }); </code></pre> <p>This class represents the xtype 'checkboxgroup' and serves as a typed config object for constructor of class CheckboxGroup.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.form.CheckboxGroup
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.checkboxselectionmodel'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.rowselectionmodel'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:Boolean' name='checkOnly'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> if rows can only be selected by clicking on the checkbox column (defaults to <tt>false</tt>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='header'>
          <xs:annotation>
            <xs:documentation>
              Any valid text or HTML fragment to display in the header cell for the checkbox column. Defaults to:<pre><code>'&lt;div class="x-grid3-hd-checker"&gt;&amp;#160;&lt;/div&gt;'</code> </pre>The default CSS class of <tt>'x-grid3-hd-checker'</tt> displays a checkbox in the header and provides support for automatic check all/none behavior on header click. This string can be replaced by any valid HTML fragment, including a simple text string (e.g., <tt>'Select Rows'</tt>), but the automatic check all/none behavior will only work if the <tt>'x-grid3-hd-checker'</tt> class is supplied.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='sortable'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> if the checkbox column is sortable (defaults to <tt>false</tt>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='width'>
          <xs:annotation>
            <xs:documentation>
              The default width in pixels of the checkbox column (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='checkboxselectionmodel' type='ec:ext.config.checkboxselectionmodel' substitutionGroup='ec:rowselectionmodel'>
    <xs:annotation>
      <xs:documentation>
        A custom selection model that renders a column of checkboxes that can be toggled to select or deselect rows. <p>This class serves as a typed config object for constructor of class CheckboxSelectionModel.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.grid.CheckboxSelectionModel
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.clickrepeater'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.observable'>
        <xs:sequence>
            <xs:element name='el' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The element to act as a button.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:Boolean' name='accelerate'>
          <xs:annotation>
            <xs:documentation>
              True if autorepeating should start slowly and accelerate. "interval" and "delay" are ignored.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='delay'>
          <xs:annotation>
            <xs:documentation>
              The initial delay before the repeating event begins firing. Similar to an autorepeat key delay.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='el'>
          <xs:annotation>
            <xs:documentation>
              The element to act as a button.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='interval'>
          <xs:annotation>
            <xs:documentation>
              The interval between firings of the "click" event. Default 20 ms.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='pressClass'>
          <xs:annotation>
            <xs:documentation>
              A CSS class name to be applied to the element while pressed.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='preventDefault'>
          <xs:annotation>
            <xs:documentation>
              True to prevent the default click event
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='stopDefault'>
          <xs:annotation>
            <xs:documentation>
              True to stop the default click event
            </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='clickrepeater' type='ec:ext.config.clickrepeater' substitutionGroup='ec:observable'>
    <xs:annotation>
      <xs:documentation>
        A wrapper class which can be applied to any element. Fires a "click" event while the mouse is pressed. The interval between firings may be specified in the config but defaults to 20 milliseconds. Optionally, a CSS class may be applied to the element during the time it is pressed. <p>This class serves as a typed config object for constructor of class ClickRepeater.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.util.ClickRepeater
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.colormenu'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.menu'>
        <xs:sequence>
            <xs:element name='handler' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A function that will handle the select event of this menu. 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.menu.ColorMenu.html#Ext.menu.ColorMenu-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 mixed="true">
                <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.menu.ColorMenu.html#Ext.menu.ColorMenu-handler">handler</a></code> function will be called. Defaults to this ColorMenu instance.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='handler'>
          <xs:annotation>
            <xs:documentation>
              A function that will handle the select event of this menu. 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.menu.ColorMenu.html#Ext.menu.ColorMenu-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:Boolean' name='hideOnClick'>
          <xs:annotation>
            <xs:documentation>
              False to continue showing the menu after a color is selected, defaults to true.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='paletteId'>
          <xs:annotation>
            <xs:documentation>
              An id to assign to the underlying color palette. Defaults to <tt>null</tt>.
            </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.menu.ColorMenu.html#Ext.menu.ColorMenu-handler">handler</a></code> function will be called. Defaults to this ColorMenu instance.
            </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='colormenu' type='ec:ext.config.colormenu' substitutionGroup='ec:menu'>
    <xs:annotation>
      <xs:documentation>
        A menu containing a <a href="Ext.ColorPalette.html">Ext.ColorPalette</a> Component. <p>Notes:</p><div class="mdetail-params"><ul><li>Although not listed here, the <b>constructor</b> for this class accepts all of the configuration options of <b><a href="Ext.ColorPalette.html">Ext.ColorPalette</a></b>.</li><li>If subclassing ColorMenu, any configuration options for the ColorPalette must be applied to the <tt><b>initialConfig</b></tt> property of the ColorMenu. Applying <a href="Ext.ColorPalette.html">ColorPalette</a> configuration settings to <b><tt>this</tt></b> will <b>not</b> affect the ColorPalette's configuration.</li></ul></div>&#42; <p>This class represents the xtype 'colormenu' and serves as a typed config object for constructor of class ColorMenu.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.menu.ColorMenu
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.colorpalette'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.component'>
        <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 mixed="true">
                <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 mixed="true">
                <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='ec:ext.config.colorpalette' substitutionGroup='ec: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='ext.config.columnchart'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.cartesianchart'>
        <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='columnchart' type='ec:ext.config.columnchart' substitutionGroup='ec:cartesianchart'>
    <xs:annotation>
      <xs:documentation>
        <p>This class represents the xtype 'columnchart' and serves as a typed config object for constructor of class ColumnChart.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.chart.ColumnChart
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.columnlayout'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.containerlayout'>
        <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='columnlayout' type='ec:ext.config.columnlayout' substitutionGroup='ec:containerlayout'>
    <xs:annotation>
      <xs:documentation>
        This is the layout style of choice for creating structural layouts in a multi-column format where the width of each column can be specified as a percentage or fixed width, but the height is allowed to vary based on the content. This class is intended to be extended or created via the layout:'column' <a href="output/Ext.Container.html#Ext.Container-layout">Ext.Container.layout</a> config, and should generally not need to be created directly via the new keyword. <p>ColumnLayout does not have any direct config options (other than inherited ones), but it does support a specific config property of <b><tt>columnWidth</tt></b> that can be included in the config of any panel added to it. The layout will use the columnWidth (if present) or width of each panel during layout to determine how to size each panel. If width or columnWidth is not specified for a given panel, its width will default to the panel's width (or auto).</p><p>The width property is always evaluated as pixels, and must be a number greater than or equal to 1. The columnWidth property is always evaluated as a percentage, and must be a decimal value greater than 0 and less than 1 (e.g., .25).</p><p>The basic rules for specifying column widths are pretty simple. The logic makes two passes through the set of contained panels. During the first layout pass, all panels that either have a fixed width or none specified (auto) are skipped, but their widths are subtracted from the overall container width. During the second pass, all panels with columnWidths are assigned pixel widths in proportion to their percentages based on the total <b>remaining</b> container width. In other words, percentage width panels are designed to fill the space left over by all the fixed-width and/or auto-width panels. Because of this, while you can specify any number of columns with different percentages, the columnWidths must always add up to 1 (or 100%) when added together, otherwise your layout may not render as expected. Example usage:</p><pre><code>// All columns are percentages -- they must add up to 1 var p = new Ext.Panel({ title: 'Column Layout - Percentage Only', layout:'column', items: [{ title: 'Column 1', columnWidth: .25 },{ title: 'Column 2', columnWidth: .6 },{ title: 'Column 3', columnWidth: .15 }] }); // Mix of width and columnWidth -- all columnWidth values must add up // to 1. The first column will take up exactly 120px, and the last two // columns will fill the remaining container width. var p = new Ext.Panel({ title: 'Column Layout - Mixed', layout:'column', items: [{ title: 'Column 1', width: 120 },{ title: 'Column 2', columnWidth: .8 },{ title: 'Column 3', columnWidth: .2 }] }); </code></pre> <p>This class serves as a typed config object for constructor of class ColumnLayout.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.layout.ColumnLayout
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.columnmodel'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.observable'>
        <xs:sequence>
            <xs:element name='columns' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  An Array of object literals. The config options defined by <b><a href="Ext.grid.Column.html">Ext.grid.Column</a></b> are the options which may appear in the object literal for each individual column definition.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <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='defaults' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Object literal which will be used to apply <a href="Ext.grid.Column.html">Ext.grid.Column</a> configuration options to all <tt><b><a href="output/Ext.grid.ColumnModel.html#Ext.grid.ColumnModel-columns">columns</a></b></tt>. Configuration options specified with individual <a href="Ext.grid.Column.html">column</a> configs will supersede these <tt><b><a href="output/Ext.grid.ColumnModel.html#Ext.grid.ColumnModel-defaults">defaults</a></b></tt>.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='columns'>
          <xs:annotation>
            <xs:documentation>
              An Array of object literals. The config options defined by <b><a href="Ext.grid.Column.html">Ext.grid.Column</a></b> are the options which may appear in the object literal for each individual column definition.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='defaultSortable'>
          <xs:annotation>
            <xs:documentation>
              Default sortable of columns which have no sortable specified (defaults to <tt>false</tt>). This property shall preferably be configured through the <tt><b><a href="output/Ext.grid.ColumnModel.html#Ext.grid.ColumnModel-defaults">defaults</a></b></tt> config property.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='defaultWidth'>
          <xs:annotation>
            <xs:documentation>
              The width of columns which have no <tt><a href="output/Ext.grid.ColumnModel.html#Ext.grid.ColumnModel-width">width</a></tt> specified (defaults to <tt>100</tt>). This property shall preferably be configured through the <tt><b><a href="output/Ext.grid.ColumnModel.html#Ext.grid.ColumnModel-defaults">defaults</a></b></tt> config property.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='defaults'>
          <xs:annotation>
            <xs:documentation>
              Object literal which will be used to apply <a href="Ext.grid.Column.html">Ext.grid.Column</a> configuration options to all <tt><b><a href="output/Ext.grid.ColumnModel.html#Ext.grid.ColumnModel-columns">columns</a></b></tt>. Configuration options specified with individual <a href="Ext.grid.Column.html">column</a> configs will supersede these <tt><b><a href="output/Ext.grid.ColumnModel.html#Ext.grid.ColumnModel-defaults">defaults</a></b></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='columnmodel' type='ec:ext.config.columnmodel' substitutionGroup='ec:observable'>
    <xs:annotation>
      <xs:documentation>
        After the data has been read into the client side cache (<b><a href="Ext.data.Store.html">Store</a></b>), the ColumnModel is used to configure how and what parts of that data will be displayed in the vertical slices (columns) of the grid. The Ext.grid.ColumnModel Class is the default implementation of a ColumnModel used by implementations of <a href="Ext.grid.GridPanel.html">GridPanel</a>. <p>Data is mapped into the store's records and then indexed into the ColumnModel using the <tt><a href="output/Ext.grid.Column.html#Ext.grid.Column-dataIndex">dataIndex</a></tt>:</p><pre><code>{data source} == mapping ==&gt; {data store} == <b><tt><a href="output/Ext.grid.Column.html#Ext.grid.Column-dataIndex">dataIndex</a></tt></b> ==&gt; {ColumnModel} </code></pre><p>Each <a href="Ext.grid.Column.html">Column</a> in the grid's ColumnModel is configured with a <tt><a href="output/Ext.grid.Column.html#Ext.grid.Column-dataIndex">dataIndex</a></tt> to specify how the data within each record in the store is indexed into the ColumnModel.</p><p>There are two ways to initialize the ColumnModel class:</p><p><u>Initialization Method 1: an Array</u></p><pre><code>var colModel = new Ext.grid.ColumnModel([ { header: "Ticker", width: 60, sortable: true}, { header: "Company Name", width: 150, sortable: true, id: 'company'}, { header: "Market Cap.", width: 100, sortable: true}, { header: "$ Sales", width: 100, sortable: true, renderer: money}, { header: "Employees", width: 100, sortable: true, resizable: false} ]); </code></pre><p>The ColumnModel may be initialized with an Array of <a href="Ext.grid.Column.html">Ext.grid.Column</a> column configuration objects to define the initial layout / display of the columns in the Grid. The order of each <a href="Ext.grid.Column.html">Ext.grid.Column</a> column configuration object within the specified Array defines the initial order of the column display. A Column's display may be initially hidden using the <tt><a href="output/Ext.grid.Column.html#Ext.grid.Column-hidden">hidden</a></tt> config property (and then shown using the column header menu). Fields that are not included in the ColumnModel will not be displayable at all.</p><p>How each column in the grid correlates (maps) to the <a href="Ext.data.Record.html">Ext.data.Record</a> field in the <a href="Ext.data.Store.html">Store</a> the column draws its data from is configured through the <b><tt><a href="output/Ext.grid.Column.html#Ext.grid.Column-dataIndex">dataIndex</a></tt></b>. If the <b><tt><a href="output/Ext.grid.Column.html#Ext.grid.Column-dataIndex">dataIndex</a></tt></b> is not explicitly defined (as shown in the example above) it will use the column configuration's index in the Array as the index.</p><p>See <b><tt><a href="Ext.grid.Column.html">Ext.grid.Column</a></tt></b> for additional configuration options for each column.</p><p><u>Initialization Method 2: an Object</u></p><p>In order to use configuration options from <tt>Ext.grid.ColumnModel</tt>, an Object may be used to initialize the ColumnModel. The column configuration Array will be specified in the <tt><b><a href="output/Ext.grid.ColumnModel.html#Ext.grid.ColumnModel-columns">columns</a></b></tt> config property. The <tt><b><a href="output/Ext.grid.ColumnModel.html#Ext.grid.ColumnModel-defaults">defaults</a></b></tt> config property can be used to apply defaults for all columns, e.g.:</p><pre><code>var colModel = new Ext.grid.ColumnModel({ columns: [ { header: "Ticker", width: 60, menuDisabled: false}, { header: "Company Name", width: 150, id: 'company'}, { header: "Market Cap."}, { header: "$ Sales", renderer: money}, { header: "Employees", resizable: false} ], defaults: { sortable: true, menuDisabled: true, width: 100 }, listeners: { <a href="output/Ext.grid.ColumnModel.html#Ext.grid.ColumnModel-hiddenchange">hiddenchange</a>: function(cm, colIndex, hidden) { saveConfig(colIndex, hidden); } } }); </code></pre><p>In both examples above, the ability to apply a CSS class to all cells in a column (including the header) is demonstrated through the use of the <b><tt><a href="output/Ext.grid.Column.html#Ext.grid.Column-id">id</a></tt></b> config option. This column could be styled by including the following css:</p><pre><code>//add this css &#42;after&#42; the core css is loaded .x-grid3-td-company { color: red; // entire column will have red font } // modify the header row only, adding an icon to the column header .x-grid3-hd-company { background: transparent url(../../resources/images/icons/silk/building.png) no-repeat 3px 3px ! important; padding-left:20px; } </code></pre>Note that the "Company Name" column could be specified as the <b><tt><a href="Ext.grid.GridPanel.html">Ext.grid.GridPanel</a>.<a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-autoExpandColumn">autoExpandColumn</a></tt></b>. <p>This class serves as a typed config object for constructor of class ColumnModel.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.grid.ColumnModel
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.columnresizer'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.observable'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:Number' name='minPct'>
          <xs:annotation>
            <xs:documentation>
              The minimum percentage to allot for any column (defaults to <tt>.05</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='columnresizer' type='ec:ext.config.columnresizer' substitutionGroup='ec:observable'>
    <xs:annotation>
      <xs:documentation>
        Supporting Class for Ext.list.ListView <p>This class serves as a typed config object for constructor of class ColumnResizer.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.list.ColumnResizer
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.combo'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.trigger'>
        <xs:sequence>
            <xs:element name='listAlign' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A valid anchor position value. See <tt><a href="output/Ext.Element.html#Ext.Element-alignTo">Ext.Element.alignTo</a></tt> for details on supported anchor positions and offsets. To specify x/y offsets as well, this value may be specified as an Array of <tt><a href="output/Ext.Element.html#Ext.Element-alignTo">Ext.Element.alignTo</a></tt> method arguments.<br/><br/> <pre><code>[ 'tl-bl?', [6,0] ]</code></pre>(defaults to <tt>'tl-bl?'</tt>)
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <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>
                  <tt>true</tt> or <tt>"sides"</tt> for the default effect, <tt>"frame"</tt> for 4-way shadow, and <tt>"drop"</tt> for bottom-right
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='store' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The data source to which this combo is bound (defaults to <tt>undefined</tt>). Acceptable values for this property are: <div class="mdetail-params"><ul><li><b>any <a href="Ext.data.Store.html">Store</a> subclass</b></li><li><b>an Array</b> : Arrays will be converted to a <a href="Ext.data.ArrayStore.html">Ext.data.ArrayStore</a> internally, automatically generating <a href="output/Ext.data.Field.html#Ext.data.Field-name">field names</a> to work with all data components. <div class="mdetail-params"><ul><li><b>1-dimensional array</b> : (e.g., <tt>['Foo','Bar']</tt>)<div class="sub-desc">A 1-dimensional array will automatically be expanded (each array item will be used for both the combo <a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-valueField">valueField</a> and <a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-displayField">displayField</a>)</div></li><li><b>2-dimensional array</b> : (e.g., <tt>[['f','Foo'],['b','Bar']]</tt>)<div class="sub-desc">For a multi-dimensional array, the value in index 0 of each item will be assumed to be the combo <a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-valueField">valueField</a>, while the value at index 1 is assumed to be the combo <a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-displayField">displayField</a>.</div></li></ul></div></li></ul></div><p>See also <tt><a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-mode">mode</a></tt>.</p>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='transform' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The id, DOM node or element of an existing HTML SELECT to convert to a ComboBox. Note that if you specify this and the combo is going to be in an <a href="Ext.form.BasicForm.html">Ext.form.BasicForm</a> or <a href="Ext.form.FormPanel.html">Ext.form.FormPanel</a>, you must also set <tt><a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-lazyRender">lazyRender</a> = true</tt>.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='allQuery'>
          <xs:annotation>
            <xs:documentation>
              The text query to send to the server to return all records for the list with no filtering (defaults to '')
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='autoSelect'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> to select the first result gathered by the data store (defaults to <tt>true</tt>). A false value would require a manual selection from the dropdown list to set the components value unless the value of (<a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-typeAheadDelay">typeAheadDelay</a>) were true.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='clearFilterOnReset'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> to clear any filters on the store (when in local mode) when reset is called (defaults to <tt>true</tt>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='displayField'>
          <xs:annotation>
            <xs:documentation>
              The underlying <a href="output/Ext.data.Field.html#Ext.data.Field-name">data field name</a> to bind to this ComboBox (defaults to undefined if <tt><a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-mode">mode</a> = 'remote'</tt> or <tt>'field1'</tt> if <a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-transform">transforming a select</a> or if the <a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-store">field name is autogenerated based on the store configuration</a>). <p>See also <tt><a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-valueField">valueField</a></tt>.</p><p><b>Note</b>: if using a ComboBox in an <a href="Ext.grid.EditorGridPanel.html">Editor Grid</a> a <a href="output/Ext.grid.Column.html#Ext.grid.Column-renderer">renderer</a> will be needed to show the displayField when the editor is not active.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='forceSelection'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> to restrict the selected value to one of the values in the list, <tt>false</tt> to allow the user to set arbitrary text into the field (defaults to <tt>false</tt>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='handleHeight'>
          <xs:annotation>
            <xs:documentation>
              The height in pixels of the dropdown list resize handle if <tt><a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-resizable">resizable</a> = true</tt> (defaults to <tt>8</tt>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='hiddenId'>
          <xs:annotation>
            <xs:documentation>
              If <tt><a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-hiddenName">hiddenName</a></tt> is specified, <tt>hiddenId</tt> can also be provided to give the hidden field a unique id. The <tt>hiddenId</tt> and combo <a href="output/Ext.Component.html#Ext.Component-id">id</a> should be different, since no two DOM nodes should share the same id.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='hiddenName'>
          <xs:annotation>
            <xs:documentation>
              If specified, a hidden form field with this name is dynamically generated to store the field's data value (defaults to the underlying DOM element's name). Required for the combo's value to automatically post during a form submission. See also <a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-valueField">valueField</a>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='hiddenValue'>
          <xs:annotation>
            <xs:documentation>
              Sets the initial value of the hidden field if <a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-hiddenName">hiddenName</a> is specified to contain the selected <a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-valueField">valueField</a>, from the Store. Defaults to the configured <tt><a href="output/Ext.form.Field.html#Ext.form.Field-value">value</a></tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='itemSelector'>
          <xs:annotation>
            <xs:documentation>
              A simple CSS selector (e.g. div.some-class or span:first-child) that will be used to determine what nodes the <a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-view">Ext.DataView</a> which handles the dropdown display will be working with. <p><b>Note</b>: this setting is <b>required</b> if a custom XTemplate has been specified in <a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-tpl">tpl</a> which assigns a class other than</p><pre>'x-combo-list-item'</pre>to dropdown list items
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='lazyInit'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> to not initialize the list for this combo until the field is focused (defaults to <tt>true</tt>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='lazyRender'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> to prevent the ComboBox from rendering until requested (should always be used when rendering into an <a href="Ext.Editor.html">Ext.Editor</a> (e.g. <a href="Ext.grid.EditorGridPanel.html">Grids</a>), defaults to <tt>false</tt>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='listAlign'>
          <xs:annotation>
            <xs:documentation>
              A valid anchor position value. See <tt><a href="output/Ext.Element.html#Ext.Element-alignTo">Ext.Element.alignTo</a></tt> for details on supported anchor positions and offsets. To specify x/y offsets as well, this value may be specified as an Array of <tt><a href="output/Ext.Element.html#Ext.Element-alignTo">Ext.Element.alignTo</a></tt> method arguments.<br/><br/> <pre><code>[ 'tl-bl?', [6,0] ]</code></pre>(defaults to <tt>'tl-bl?'</tt>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='listClass'>
          <xs:annotation>
            <xs:documentation>
              The CSS class to add to the predefined <tt>'x-combo-list'</tt> class applied the dropdown list element (defaults to '').
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='listEmptyText'>
          <xs:annotation>
            <xs:documentation>
              The empty text to display in the data view if no items are found. (defaults to '')
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='listWidth'>
          <xs:annotation>
            <xs:documentation>
              The width (used as a parameter to <a href="output/Ext.Element.html#Ext.Element-setWidth">Ext.Element.setWidth</a>) of the dropdown list (defaults to the width of the ComboBox field). See also <tt><a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-minListWidth">minListWidth</a></tt>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='loadingText'>
          <xs:annotation>
            <xs:documentation>
              The text to display in the dropdown list while data is loading. Only applies when <tt><a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-mode">mode</a> = 'remote'</tt> (defaults to <tt>'Loading...'</tt>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='maxHeight'>
          <xs:annotation>
            <xs:documentation>
              The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to <tt>300</tt>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='minChars'>
          <xs:annotation>
            <xs:documentation>
              The minimum number of characters the user must type before autocomplete and <a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-typeAhead">typeAhead</a> activate (defaults to <tt>4</tt> if <tt><a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-mode">mode</a> = 'remote'</tt> or <tt>0</tt> if <tt><a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-mode">mode</a> = 'local'</tt>, does not apply if <tt><a href="output/Ext.form.TriggerField.html#Ext.form.TriggerField-editable">editable</a> = false</tt>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='minHeight'>
          <xs:annotation>
            <xs:documentation>
              The minimum height in pixels of the dropdown list when the list is constrained by its distance to the viewport edges (defaults to <tt>90</tt>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='minListWidth'>
          <xs:annotation>
            <xs:documentation>
              The minimum width of the dropdown list in pixels (defaults to <tt>70</tt>, will be ignored if <tt><a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-listWidth">listWidth</a></tt> has a higher value)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='mode'>
          <xs:annotation>
            <xs:documentation>
              Acceptable values are: <div class="mdetail-params"><ul><li><b><tt>'remote'</tt></b> : <b>Default</b> <p class="sub-desc">Automatically loads the <tt><a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-store">store</a></tt> the <b>first</b> time the trigger is clicked. If you do not want the store to be automatically loaded the first time the trigger is clicked, set to <tt>'local'</tt> and manually load the store. To force a requery of the store <b>every</b> time the trigger is clicked see <tt><a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-lastQuery">lastQuery</a></tt>.</p></li><li><b><tt>'local'</tt></b> : <p class="sub-desc">ComboBox loads local data</p><pre><code>var combo = new Ext.form.ComboBox({ renderTo: document.body, mode: 'local', store: new Ext.data.ArrayStore({ id: 0, fields: [ 'myId', // numeric value is the key 'displayText' ], data: [[1, 'item1'], [2, 'item2']] // data is local }), valueField: 'myId', displayField: 'displayText', triggerAction: 'all' }); </code></pre></li></ul></div>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='pageSize'>
          <xs:annotation>
            <xs:documentation>
              If greater than <tt>0</tt>, a <a href="Ext.PagingToolbar.html">Ext.PagingToolbar</a> is displayed in the footer of the dropdown list and the <a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-doQuery">filter queries</a> will execute with page start and <a href="output/Ext.PagingToolbar.html#Ext.PagingToolbar-pageSize">limit</a> parameters. Only applies when <tt><a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-mode">mode</a> = 'remote'</tt> (defaults to <tt>0</tt>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='queryDelay'>
          <xs:annotation>
            <xs:documentation>
              The length of time in milliseconds to delay between the start of typing and sending the query to filter the dropdown list (defaults to <tt>500</tt> if <tt><a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-mode">mode</a> = 'remote'</tt> or <tt>10</tt> if <tt><a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-mode">mode</a> = 'local'</tt>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='queryParam'>
          <xs:annotation>
            <xs:documentation>
              Name of the query (<a href="output/Ext.data.Store.html#Ext.data.Store-baseParam">baseParam</a> name for the store) as it will be passed on the querystring (defaults to <tt>'query'</tt>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='resizable'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> to add a resize handle to the bottom of the dropdown list (creates an <a href="Ext.Resizable.html">Ext.Resizable</a> with 'se' <a href="output/Ext.Resizable.html#Ext.Resizable-pinned">pinned</a> handles). Defaults to <tt>false</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='selectedClass'>
          <xs:annotation>
            <xs:documentation>
              CSS class to apply to the selected item in the dropdown list (defaults to <tt>'x-combo-selected'</tt>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='shadow'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> or <tt>"sides"</tt> for the default effect, <tt>"frame"</tt> for 4-way shadow, and <tt>"drop"</tt> for bottom-right
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='store'>
          <xs:annotation>
            <xs:documentation>
              The data source to which this combo is bound (defaults to <tt>undefined</tt>). Acceptable values for this property are: <div class="mdetail-params"><ul><li><b>any <a href="Ext.data.Store.html">Store</a> subclass</b></li><li><b>an Array</b> : Arrays will be converted to a <a href="Ext.data.ArrayStore.html">Ext.data.ArrayStore</a> internally, automatically generating <a href="output/Ext.data.Field.html#Ext.data.Field-name">field names</a> to work with all data components. <div class="mdetail-params"><ul><li><b>1-dimensional array</b> : (e.g., <tt>['Foo','Bar']</tt>)<div class="sub-desc">A 1-dimensional array will automatically be expanded (each array item will be used for both the combo <a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-valueField">valueField</a> and <a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-displayField">displayField</a>)</div></li><li><b>2-dimensional array</b> : (e.g., <tt>[['f','Foo'],['b','Bar']]</tt>)<div class="sub-desc">For a multi-dimensional array, the value in index 0 of each item will be assumed to be the combo <a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-valueField">valueField</a>, while the value at index 1 is assumed to be the combo <a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-displayField">displayField</a>.</div></li></ul></div></li></ul></div><p>See also <tt><a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-mode">mode</a></tt>.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='title'>
          <xs:annotation>
            <xs:documentation>
              If supplied, a header element is created containing this text and added into the top of the dropdown list (defaults to undefined, with no header element)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='transform'>
          <xs:annotation>
            <xs:documentation>
              The id, DOM node or element of an existing HTML SELECT to convert to a ComboBox. Note that if you specify this and the combo is going to be in an <a href="Ext.form.BasicForm.html">Ext.form.BasicForm</a> or <a href="Ext.form.FormPanel.html">Ext.form.FormPanel</a>, you must also set <tt><a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-lazyRender">lazyRender</a> = true</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='triggerAction'>
          <xs:annotation>
            <xs:documentation>
              The action to execute when the trigger is clicked. <div class="mdetail-params"><ul><li><b><tt>'query'</tt></b> : <b>Default</b> <p class="sub-desc"><a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-doQuery">run the query</a> using the <a href="output/Ext.form.Field.html#Ext.form.Field-getRawValue">raw value</a>.</p></li><li><b><tt>'all'</tt></b> : <p class="sub-desc"><a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-doQuery">run the query</a> specified by the <tt><a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-allQuery">allQuery</a></tt> config option</p></li></ul></div><p>See also <code><a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-queryParam">queryParam</a></code>.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='typeAhead'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> to populate and autoselect the remainder of the text being typed after a configurable delay (<a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-typeAheadDelay">typeAheadDelay</a>) if it matches a known value (defaults to <tt>false</tt>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='typeAheadDelay'>
          <xs:annotation>
            <xs:documentation>
              The length of time in milliseconds to wait until the typeahead text is displayed if <tt><a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-typeAhead">typeAhead</a> = true</tt> (defaults to <tt>250</tt>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='valueField'>
          <xs:annotation>
            <xs:documentation>
              The underlying <a href="output/Ext.data.Field.html#Ext.data.Field-name">data value name</a> to bind to this ComboBox (defaults to undefined if <tt><a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-mode">mode</a> = 'remote'</tt> or <tt>'field2'</tt> if <a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-transform">transforming a select</a> or if the <a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-store">field name is autogenerated based on the store configuration</a>). <p><b>Note</b>: use of a <tt>valueField</tt> requires the user to make a selection in order for a value to be mapped. See also <tt><a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-hiddenName">hiddenName</a></tt>, <tt><a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-hiddenValue">hiddenValue</a></tt>, and <tt><a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-displayField">displayField</a></tt>.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='valueNotFoundText'>
          <xs:annotation>
            <xs:documentation>
              When using a name/value combo, if the value passed to setValue is not found in the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined). If this default text is used, it means there is no value set and no validation will occur on this field.
            </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='combo' type='ec:ext.config.combo' substitutionGroup='ec:trigger'>
    <xs:annotation>
      <xs:documentation>
        A combobox control with support for autocomplete, remote-loading, paging and many other features. <p>A ComboBox works in a similar manner to a traditional HTML &lt;select&gt; field. The difference is that to submit the <a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-valueField">valueField</a>, you must specify a <a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-hiddenName">hiddenName</a> to create a hidden input field to hold the value of the valueField. The <i><a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-displayField">displayField</a></i> is shown in the text field which is named according to the <a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-name">name</a>.</p><p style="font-weight: bold"><u>Events</u></p><p>To do something when something in ComboBox is selected, configure the select event:</p><pre><code>var cb = new Ext.form.ComboBox({ // all of your config options listeners:{ scope: yourScope, 'select': yourFunction } }); // Alternatively, you can assign events after the object is created: var cb = new Ext.form.ComboBox(yourOptions); cb.on('select', yourFunction, yourScope); </code></pre><br/><br/> <p style="font-weight: bold"><u>ComboBox in Grid</u></p><p>If using a ComboBox in an <a href="Ext.grid.EditorGridPanel.html">Editor Grid</a> a <a href="output/Ext.grid.Column.html#Ext.grid.Column-renderer">renderer</a> will be needed to show the displayField when the editor is not active. Set up the renderer manually, or implement a reusable render, for example:</p><pre><code>// create reusable renderer Ext.util.Format.comboRenderer = function(combo){ return function(value){ var record = combo.findRecord(combo.<a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-valueField">valueField</a>, value); return record ? record.get(combo.<a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-displayField">displayField</a>) : combo.<a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-valueNotFoundText">valueNotFoundText</a>; } } // create the combo instance var combo = new Ext.form.ComboBox({ <a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-typeAhead">typeAhead</a>: true, <a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-triggerAction">triggerAction</a>: 'all', <a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-lazyRender">lazyRender</a>:true, <a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-mode">mode</a>: 'local', <a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-store">store</a>: new Ext.data.ArrayStore({ id: 0, fields: [ 'myId', 'displayText' ], data: [[1, 'item1'], [2, 'item2']] }), <a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-valueField">valueField</a>: 'myId', <a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-displayField">displayField</a>: 'displayText' }); // snippet of column model used within grid var cm = new Ext.grid.ColumnModel([{ ... },{ header: "Some Header", dataIndex: 'whatever', width: 130, editor: combo, // specify reference to combo instance renderer: Ext.util.Format.comboRenderer(combo) // pass combo instance to reusable renderer }, ... ]); </code></pre><br/><br/> <p style="font-weight: bold"><u>Filtering</u></p><p>A ComboBox <a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-doQuery">uses filtering itself</a>, for information about filtering the ComboBox store manually see <tt><a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-lastQuery">lastQuery</a></tt>.</p> <p>This class represents the xtype 'combo' and serves as a typed config object for constructor of class ComboBox.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.form.ComboBox
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.component'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.observable'>
        <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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='ec:ext.config.component' substitutionGroup='ec: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='ext.config.compositefield'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.field'>
        <xs:sequence>
            <xs:element name='defaults' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Any default properties to assign to the child fields.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <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>
                  Items to include in composite field
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <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='defaults'>
          <xs:annotation>
            <xs:documentation>
              Any default properties to assign to the child fields.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='items'>
          <xs:annotation>
            <xs:documentation>
              Items to include in composite field
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='labelConnector'>
          <xs:annotation>
            <xs:documentation>
              The string to use when joining segments of the built label together (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='compositefield' type='ec:ext.config.compositefield' substitutionGroup='ec:field'>
    <xs:annotation>
      <xs:documentation>
        Composite field allowing a number of form Fields to be rendered on the same row. The fields are rendered using an hbox layout internally, so all of the normal HBox layout config items are available. Example usage: <pre>{ xtype: 'compositefield', labelWidth: 120 items: [ { xtype : 'textfield', fieldLabel: 'Title', width : 20 }, { xtype : 'textfield', fieldLabel: 'First', flex : 1 }, { xtype : 'textfield', fieldLabel: 'Last', flex : 1 } ] } </pre>In the example above the composite's fieldLabel will be set to 'Title, First, Last' as it groups the fieldLabels of each of its children. This can be overridden by setting a fieldLabel on the compositefield itself: <pre>{ xtype: 'compositefield', fieldLabel: 'Custom label', items: [...] } </pre>Any Ext.form.&#42; component can be placed inside a composite field. <p>This class serves as a typed config object for constructor of class CompositeField.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.form.CompositeField
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.connection'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.observable'>
        <xs:sequence>
            <xs:element name='defaultHeaders' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  An object containing request headers which are added to each request made by this object. (defaults to undefined)
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='extraParams' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  An object containing properties which are used as extra parameters to each request made by this object. (defaults to undefined)
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:Boolean' name='autoAbort'>
          <xs:annotation>
            <xs:documentation>
              Whether this request should abort any pending requests. (defaults to false)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='defaultHeaders'>
          <xs:annotation>
            <xs:documentation>
              An object containing request headers which are added to each request made by this object. (defaults to undefined)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='disableCaching'>
          <xs:annotation>
            <xs:documentation>
              True to add a unique cache-buster param to GET requests. (defaults to true)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='disableCachingParam'>
          <xs:annotation>
            <xs:documentation>
              Change the parameter which is sent went disabling caching through a cache buster. Defaults to '_dc'
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='extraParams'>
          <xs:annotation>
            <xs:documentation>
              An object containing properties which are used as extra parameters to each request made by this object. (defaults to undefined)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='method'>
          <xs:annotation>
            <xs:documentation>
              The default HTTP method to be used for requests. (defaults to undefined; if not set, but <a href="output/Ext.data.Connection.html#Ext.data.Connection-request">request</a> params are present, POST will be used; otherwise, GET will be used.)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='timeout'>
          <xs:annotation>
            <xs:documentation>
              The timeout in milliseconds to be used for requests. (defaults to 30000)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='url'>
          <xs:annotation>
            <xs:documentation>
              The default URL to be used for requests to the server. Defaults to undefined. <p>The <code>url</code> config may be a function which <i>returns</i> the URL to use for the Ajax request. The scope (<code><b>this</b></code> reference) of the function is the <code>scope</code> option passed to the <a href="output/Ext.data.Connection.html#Ext.data.Connection-request">request</a> method.</p>
            </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='connection' type='ec:ext.config.connection' substitutionGroup='ec:observable'>
    <xs:annotation>
      <xs:documentation>
        The class encapsulates a connection to the page's originating domain, allowing requests to be made either to a configured URL, or to a URL specified at request time. <p>Requests made by this class are asynchronous, and will return immediately. No data from the server will be available to the statement immediately following the <a href="output/Ext.data.Connection.html#Ext.data.Connection-request">request</a> call. To process returned data, use a <a href="#request-option-success">success callback</a> in the request options object, or an <a href="output/Ext.data.Connection.html#Ext.data.Connection-requestcomplete">event listener</a>.</p><h3>File Uploads</h3><a href="#request-option-isUpload">File uploads</a> are not performed using normal "Ajax" techniques, that is they are <b>not</b> performed using XMLHttpRequests. Instead the form is submitted in the standard manner with the DOM <tt>&lt;form&gt;</tt> element temporarily modified to have its <a href="http://www.w3.org/TR/REC-html40/present/frames.html#adef-target">target</a> set to refer to a dynamically generated, hidden <tt>&lt;iframe&gt;</tt> which is inserted into the document but removed after the return data has been gathered.<br/><br/> <p>The server response is parsed by the browser to create the document for the IFRAME. If the server is using JSON to send the return object, then the <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.17">Content-Type</a> header must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.</p><p>Characters which are significant to an HTML parser must be sent as HTML entities, so encode "&lt;" as "&amp;lt;", "&amp;" as "&amp;amp;" etc.</p><p>The response text is retrieved from the document, and a fake XMLHttpRequest object is created containing a <tt>responseText</tt> property in order to conform to the requirements of event handlers and callbacks.</p><p>Be aware that file upload packets are sent with the content type <a href="http://www.faqs.org/rfcs/rfc2388.html">multipart/form</a> and some server technologies (notably JEE) may require some custom processing in order to retrieve parameter names and parameter values from the packet content.</p><p>Also note that it's not possible to check the response code of the hidden iframe, so the success handler will ALWAYS fire.</p> <p>This class serves as a typed config object for constructor of class Connection.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.data.Connection
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.container'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.box'>
        <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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='ec:ext.config.container' substitutionGroup='ec:box'>
    <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='ext.config.containerlayout'>
    <xs:complexContent>
      <xs:extension base='exml:base'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:String' name='extraCls'>
          <xs:annotation>
            <xs:documentation>
              An optional extra CSS class that will be added to the container. This can be useful for adding customized styles to the container or any of its children using standard CSS rules. See <a href="Ext.Component.html">Ext.Component</a>.<a href="output/Ext.Component.html#Ext.Component-ctCls">ctCls</a> also. <p><b>Note</b>: <tt>extraCls</tt> defaults to <tt>''</tt> except for the following classes which assign a value by default:</p><div class="mdetail-params"><ul><li><a href="Ext.layout.AbsoluteLayout.html">Absolute Layout</a> : <tt>'x-abs-layout-item'</tt></li><li><a href="Ext.layout.Box.html">Box Layout</a> : <tt>'x-box-item'</tt></li><li><a href="Ext.layout.ColumnLayout.html">Column Layout</a> : <tt>'x-column'</tt></li></ul></div>To configure the above Classes with an extra CSS class append to the default. For example, for ColumnLayout:<pre><code>extraCls: 'x-column custom-class' </code></pre><br/><br/>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='renderHidden'>
          <xs:annotation>
            <xs:documentation>
              True to hide each contained item on render (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='containerlayout' type='ec:ext.config.containerlayout'>
    <xs:annotation>
      <xs:documentation>
        This class is intended to be extended or created via the <tt><b><a href="output/Ext.Container.html#Ext.Container-layout">layout</a></b></tt> configuration property. See <tt><b><a href="output/Ext.Container.html#Ext.Container-layout">Ext.Container.layout</a></b></tt> for additional details. <p>This class serves as a typed config object for constructor of class ContainerLayout.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.layout.ContainerLayout
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.cookieprovider'>
    <xs:complexContent>
      <xs:extension base='exml:base'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:String' name='domain'>
          <xs:annotation>
            <xs:documentation>
              The domain to save the cookie for. Note that you cannot specify a different domain than your page is on, but you can specify a sub-domain, or simply the domain itself like 'extjs.com' to include all sub-domains if you need to access cookies across different sub-domains (defaults to null which uses the same domain the page is running on including the 'www' like 'www.extjs.com')
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Date' name='expires'>
          <xs:annotation>
            <xs:documentation>
              The cookie expiration date (defaults to 7 days from now)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='path'>
          <xs:annotation>
            <xs:documentation>
              The path for which the cookie is active (defaults to root '/' which makes it active for all pages in the site)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='secure'>
          <xs:annotation>
            <xs:documentation>
              True if the site is using SSL (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='cookieprovider' type='ec:ext.config.cookieprovider'>
    <xs:annotation>
      <xs:documentation>
        The default Provider implementation which saves state via cookies. <br/>Usage: <pre><code> var cp = new Ext.state.CookieProvider({ path: "/cgi-bin/", expires: new Date(new Date().getTime()+(1000&#42;60&#42;60&#42;24&#42;30)), //30 days domain: "extjs.com" }); Ext.state.Manager.setProvider(cp); </code></pre> <p>This class serves as a typed config object for constructor of class CookieProvider.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.state.CookieProvider
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.cycle'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.splitbutton'>
        <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 mixed="true">
                <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 mixed="true">
                <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='cycle' type='ec:ext.config.cycle' substitutionGroup='ec: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='ext.config.datafield'>
    <xs:complexContent>
      <xs:extension base='exml:base'>
        <xs:sequence>
            <xs:element name='convert' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A function which converts the value provided by the Reader into an object that will be stored in the Record. It is passed the following parameters:<div class="mdetail-params"><ul><li><b>v</b> : Mixed<div class="sub-desc">The data value as read by the Reader, if undefined will use the configured <code><a href="output/Ext.data.Field.html#Ext.data.Field-defaultValue">defaultValue</a></code>.</div></li><li><b>rec</b> : Mixed<div class="sub-desc">The data object containing the row as read by the Reader. Depending on the Reader type, this could be an Array (<a href="Ext.data.ArrayReader.html">ArrayReader</a>), an object (<a href="Ext.data.JsonReader.html">JsonReader</a>), or an XML element (<a href="Ext.data.XMLReader.html">XMLReader</a>).</div></li></ul></div><pre><code>// example of convert function function fullName(v, record){ return record.name.last + ', ' + record.name.first; } function location(v, record){ return !record.city ? '' : (record.city + ', ' + record.state); } var Dude = Ext.data.Record.create([ {name: 'fullname', convert: fullName}, {name: 'firstname', mapping: 'name.first'}, {name: 'lastname', mapping: 'name.last'}, {name: 'city', defaultValue: 'homeless'}, 'state', {name: 'location', convert: location} ]); // create the data store var store = new Ext.data.Store({ reader: new Ext.data.JsonReader( { idProperty: 'key', root: 'daRoot', totalProperty: 'total' }, Dude // recordType ) }); var myData = [ { key: 1, name: { first: 'Fat', last: 'Albert' } // notice no city, state provided in data object }, { key: 2, name: { first: 'Barney', last: 'Rubble' }, city: 'Bedrock', state: 'Stoneridge' }, { key: 3, name: { first: 'Cliff', last: 'Claven' }, city: 'Boston', state: 'MA' } ]; </code></pre>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='defaultValue' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The default value used <b>when a Record is being created by a <a href="Ext.data.Reader.html">Reader</a></b> when the item referenced by the <code><a href="output/Ext.data.Field.html#Ext.data.Field-mapping">mapping</a></code> does not exist in the data object (i.e. undefined). (defaults to "")
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='mapping' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  (Optional) A path expression for use by the <a href="Ext.data.DataReader.html">Ext.data.DataReader</a> implementation that is creating the <a href="Ext.data.Record.html">Record</a> to extract the Field value from the data object. If the path expression is the same as the field name, the mapping may be omitted. <p>The form of the mapping expression depends on the Reader being used.</p><div class="mdetail-params"><ul><li><a href="Ext.data.JsonReader.html">Ext.data.JsonReader</a><div class="sub-desc">The mapping is a string containing the javascript expression to reference the data from an element of the data item's <a href="output/Ext.data.JsonReader.html#Ext.data.JsonReader-root">root</a> Array. Defaults to the field name.</div></li><li><a href="Ext.data.XmlReader.html">Ext.data.XmlReader</a><div class="sub-desc">The mapping is an <a href="Ext.DomQuery.html">Ext.DomQuery</a> path to the data item relative to the DOM element that represents the <a href="output/Ext.data.XmlReader.html#Ext.data.XmlReader-record">record</a>. Defaults to the field name.</div></li><li><a href="Ext.data.ArrayReader.html">Ext.data.ArrayReader</a><div class="sub-desc">The mapping is a number indicating the Array index of the field's value. Defaults to the field specification's Array position.</div></li></ul></div><p>If a more complex value extraction strategy is required, then configure the Field with a <a href="output/Ext.data.Field.html#Ext.data.Field-convert">convert</a> function. This is passed the whole row object, and may interrogate it in whatever way is necessary in order to return the desired data.</p>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='sortType' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A function which converts a Field's value to a comparable value in order to ensure correct sort ordering. Predefined functions are provided in <a href="Ext.data.SortTypes.html">Ext.data.SortTypes</a>. A custom sort example:<pre><code>// current sort after sort we want // +-+------+ +-+------+ // |1|First | |1|First | // |2|Last | |3|Second| // |3|Second| |2|Last | // +-+------+ +-+------+ sortType: function(value) { switch (value.toLowerCase()) // native toLowerCase(): { case 'first': return 1; case 'second': return 2; default: return 3; } } </code></pre>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='type' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The data type for automatic conversion from received data to the <i>stored</i> value if <code><a href="output/Ext.data.Field.html#Ext.data.Field-convert">convert</a></code> has not been specified. This may be specified as a string value. Possible values are <div class="mdetail-params"><ul><li>auto (Default, implies no conversion)</li><li>string</li><li>int</li><li>float</li><li>boolean</li><li>date</li></ul></div><p>This may also be specified by referencing a member of the <a href="Ext.data.Types.html">Ext.data.Types</a> class.</p><p>Developers may create their own application-specific data types by defining new members of the <a href="Ext.data.Types.html">Ext.data.Types</a> class.</p>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:Boolean' name='allowBlank'>
          <xs:annotation>
            <xs:documentation>
              Used for validating a <a href="Ext.data.Record.html">record</a>, defaults to <code>true</code>. An empty value here will cause <a href="Ext.data.Record.html">Ext.data.Record</a>.<a href="output/Ext.data.Record.html#Ext.data.Record-isValid">isValid</a> to evaluate to <code>false</code>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='convert'>
          <xs:annotation>
            <xs:documentation>
              A function which converts the value provided by the Reader into an object that will be stored in the Record. It is passed the following parameters:<div class="mdetail-params"><ul><li><b>v</b> : Mixed<div class="sub-desc">The data value as read by the Reader, if undefined will use the configured <code><a href="output/Ext.data.Field.html#Ext.data.Field-defaultValue">defaultValue</a></code>.</div></li><li><b>rec</b> : Mixed<div class="sub-desc">The data object containing the row as read by the Reader. Depending on the Reader type, this could be an Array (<a href="Ext.data.ArrayReader.html">ArrayReader</a>), an object (<a href="Ext.data.JsonReader.html">JsonReader</a>), or an XML element (<a href="Ext.data.XMLReader.html">XMLReader</a>).</div></li></ul></div><pre><code>// example of convert function function fullName(v, record){ return record.name.last + ', ' + record.name.first; } function location(v, record){ return !record.city ? '' : (record.city + ', ' + record.state); } var Dude = Ext.data.Record.create([ {name: 'fullname', convert: fullName}, {name: 'firstname', mapping: 'name.first'}, {name: 'lastname', mapping: 'name.last'}, {name: 'city', defaultValue: 'homeless'}, 'state', {name: 'location', convert: location} ]); // create the data store var store = new Ext.data.Store({ reader: new Ext.data.JsonReader( { idProperty: 'key', root: 'daRoot', totalProperty: 'total' }, Dude // recordType ) }); var myData = [ { key: 1, name: { first: 'Fat', last: 'Albert' } // notice no city, state provided in data object }, { key: 2, name: { first: 'Barney', last: 'Rubble' }, city: 'Bedrock', state: 'Stoneridge' }, { key: 3, name: { first: 'Cliff', last: 'Claven' }, city: 'Boston', state: 'MA' } ]; </code></pre>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='dateFormat'>
          <xs:annotation>
            <xs:documentation>
              (Optional) Used when converting received data into a Date when the <a href="output/Ext.data.Field.html#Ext.data.Field-type">type</a> is specified as <code>"date"</code>. <p>A format string for the <a href="output/Date.html#Date-parseDate">Date.parseDate</a> function, or "timestamp" if the value provided by the Reader is a UNIX timestamp, or "time" if the value provided by the Reader is a javascript millisecond timestamp. See <a href="Date.html">Date</a></p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='defaultValue'>
          <xs:annotation>
            <xs:documentation>
              The default value used <b>when a Record is being created by a <a href="Ext.data.Reader.html">Reader</a></b> when the item referenced by the <code><a href="output/Ext.data.Field.html#Ext.data.Field-mapping">mapping</a></code> does not exist in the data object (i.e. undefined). (defaults to "")
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='mapping'>
          <xs:annotation>
            <xs:documentation>
              (Optional) A path expression for use by the <a href="Ext.data.DataReader.html">Ext.data.DataReader</a> implementation that is creating the <a href="Ext.data.Record.html">Record</a> to extract the Field value from the data object. If the path expression is the same as the field name, the mapping may be omitted. <p>The form of the mapping expression depends on the Reader being used.</p><div class="mdetail-params"><ul><li><a href="Ext.data.JsonReader.html">Ext.data.JsonReader</a><div class="sub-desc">The mapping is a string containing the javascript expression to reference the data from an element of the data item's <a href="output/Ext.data.JsonReader.html#Ext.data.JsonReader-root">root</a> Array. Defaults to the field name.</div></li><li><a href="Ext.data.XmlReader.html">Ext.data.XmlReader</a><div class="sub-desc">The mapping is an <a href="Ext.DomQuery.html">Ext.DomQuery</a> path to the data item relative to the DOM element that represents the <a href="output/Ext.data.XmlReader.html#Ext.data.XmlReader-record">record</a>. Defaults to the field name.</div></li><li><a href="Ext.data.ArrayReader.html">Ext.data.ArrayReader</a><div class="sub-desc">The mapping is a number indicating the Array index of the field's value. Defaults to the field specification's Array position.</div></li></ul></div><p>If a more complex value extraction strategy is required, then configure the Field with a <a href="output/Ext.data.Field.html#Ext.data.Field-convert">convert</a> function. This is passed the whole row object, and may interrogate it in whatever way is necessary in order to return the desired data.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='name'>
          <xs:annotation>
            <xs:documentation>
              The name by which the field is referenced within the Record. This is referenced by, for example, the <code>dataIndex</code> property in column definition objects passed to <a href="Ext.grid.ColumnModel.html">Ext.grid.ColumnModel</a>. <p>Note: In the simplest case, if no properties other than <code>name</code> are required, a field definition may consist of just a String for the field name.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='sortDir'>
          <xs:annotation>
            <xs:documentation>
              Initial direction to sort (<code>"ASC"</code> or <code>"DESC"</code>). Defaults to <code>"ASC"</code>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='sortType'>
          <xs:annotation>
            <xs:documentation>
              A function which converts a Field's value to a comparable value in order to ensure correct sort ordering. Predefined functions are provided in <a href="Ext.data.SortTypes.html">Ext.data.SortTypes</a>. A custom sort example:<pre><code>// current sort after sort we want // +-+------+ +-+------+ // |1|First | |1|First | // |2|Last | |3|Second| // |3|Second| |2|Last | // +-+------+ +-+------+ sortType: function(value) { switch (value.toLowerCase()) // native toLowerCase(): { case 'first': return 1; case 'second': return 2; default: return 3; } } </code></pre>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='type'>
          <xs:annotation>
            <xs:documentation>
              The data type for automatic conversion from received data to the <i>stored</i> value if <code><a href="output/Ext.data.Field.html#Ext.data.Field-convert">convert</a></code> has not been specified. This may be specified as a string value. Possible values are <div class="mdetail-params"><ul><li>auto (Default, implies no conversion)</li><li>string</li><li>int</li><li>float</li><li>boolean</li><li>date</li></ul></div><p>This may also be specified by referencing a member of the <a href="Ext.data.Types.html">Ext.data.Types</a> class.</p><p>Developers may create their own application-specific data types by defining new members of the <a href="Ext.data.Types.html">Ext.data.Types</a> class.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='useNull'>
          <xs:annotation>
            <xs:documentation>
              (Optional) Use when converting received data into a Number type (either int or float). If the value cannot be parsed, null will be used if useNull is true, otherwise the value will be 0. Defaults to <tt>false</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='datafield' type='ec:ext.config.datafield'>
    <xs:annotation>
      <xs:documentation>
        This class encapsulates the field definition information specified in the field definition objects passed to <a href="output/Ext.data.Record.html#Ext.data.Record-create">Ext.data.Record.create</a>. <p>Developers do not need to instantiate this class. Instances are created by <a href="Ext.data.Record.create.html">Ext.data.Record.create</a> and cached in the <a href="output/Ext.data.Record.html#Ext.data.Record-fields">fields</a> property of the created Record constructor's <b>prototype.</b></p> <p>This class represents the xtype 'datafield' and serves as a typed config object for constructor of class Field.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.data.Field
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.dataproxy'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.observable'>
        <xs:sequence>
            <xs:element name='api' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Specific urls to call on CRUD action methods "read", "create", "update" and "destroy". Defaults to:<pre><code>api: { read : undefined, create : undefined, update : undefined, destroy : undefined } </code></pre><p>The url is built based upon the action being executed <tt>[load|create|save|destroy]</tt> using the commensurate <tt><a href="output/Ext.data.DataProxy.html#Ext.data.DataProxy-api">api</a></tt> property, or if undefined default to the configured <a href="Ext.data.Store.html">Ext.data.Store</a>.<a href="output/Ext.data.Store.html#Ext.data.Store-url">url</a>.</p><br/><p>For example:</p><pre><code>api: { load : '/controller/load', create : '/controller/new', // Server MUST return idProperty of new record save : '/controller/update', destroy : '/controller/destroy_action' } // Alternatively, one can use the object-form to specify each API-action api: { load: {url: 'read.php', method: 'GET'}, create: 'create.php', destroy: 'destroy.php', save: 'update.php' } </code></pre><p>If the specific URL for a given CRUD action is undefined, the CRUD action request will be directed to the configured <tt><a href="output/Ext.data.Connection.html#Ext.data.Connection-url">url</a></tt>.</p><br/><p><b>Note</b>: To modify the URL for an action dynamically the appropriate API property should be modified before the action is requested using the corresponding before action event. For example to modify the URL associated with the load action:</p><pre><code>// modify the url for the action myStore.on({ beforeload: { fn: function (store, options) { // use <tt><a href="output/Ext.data.HttpProxy.html#Ext.data.HttpProxy-setUrl">setUrl</a></tt> to change the URL for &#42;just&#42; this request. store.proxy.setUrl('changed1.php'); // set optional second parameter to true to make this URL change // permanent, applying this URL for all subsequent requests. store.proxy.setUrl('changed1.php', true); // Altering the proxy API should be done using the public // method <tt><a href="output/Ext.data.DataProxy.html#Ext.data.DataProxy-setApi">setApi</a></tt>. store.proxy.setApi('read', 'changed2.php'); // Or set the entire API with a config-object. // When using the config-object option, you must redefine the <b>entire</b> // API -- not just a specific action of it. store.proxy.setApi({ read : 'changed_read.php', create : 'changed_create.php', update : 'changed_update.php', destroy : 'changed_destroy.php' }); } } }); </code></pre><br/><br/>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='doRequest' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Abstract method that should be implemented in all subclasses. <b>Note:</b> Should only be used by custom-proxy developers. (e.g.: <a href="output/Ext.data.HttpProxy.html#Ext.data.HttpProxy-doRequest">HttpProxy.doRequest</a>, <a href="output/Ext.data.DirectProxy.html#Ext.data.DirectProxy-doRequest">DirectProxy.doRequest</a>).
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='onRead' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Abstract method that should be implemented in all subclasses. <b>Note:</b> Should only be used by custom-proxy developers. Callback for read <a href="output/Ext.data.Api.html#Ext.data.Api-actions">action</a>.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='onWrite' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Abstract method that should be implemented in all subclasses. <b>Note:</b> Should only be used by custom-proxy developers. Callback for <i>create, update and destroy</i> <a href="output/Ext.data.Api.html#Ext.data.Api-actions">actions</a>.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='api'>
          <xs:annotation>
            <xs:documentation>
              Specific urls to call on CRUD action methods "read", "create", "update" and "destroy". Defaults to:<pre><code>api: { read : undefined, create : undefined, update : undefined, destroy : undefined } </code></pre><p>The url is built based upon the action being executed <tt>[load|create|save|destroy]</tt> using the commensurate <tt><a href="output/Ext.data.DataProxy.html#Ext.data.DataProxy-api">api</a></tt> property, or if undefined default to the configured <a href="Ext.data.Store.html">Ext.data.Store</a>.<a href="output/Ext.data.Store.html#Ext.data.Store-url">url</a>.</p><br/><p>For example:</p><pre><code>api: { load : '/controller/load', create : '/controller/new', // Server MUST return idProperty of new record save : '/controller/update', destroy : '/controller/destroy_action' } // Alternatively, one can use the object-form to specify each API-action api: { load: {url: 'read.php', method: 'GET'}, create: 'create.php', destroy: 'destroy.php', save: 'update.php' } </code></pre><p>If the specific URL for a given CRUD action is undefined, the CRUD action request will be directed to the configured <tt><a href="output/Ext.data.Connection.html#Ext.data.Connection-url">url</a></tt>.</p><br/><p><b>Note</b>: To modify the URL for an action dynamically the appropriate API property should be modified before the action is requested using the corresponding before action event. For example to modify the URL associated with the load action:</p><pre><code>// modify the url for the action myStore.on({ beforeload: { fn: function (store, options) { // use <tt><a href="output/Ext.data.HttpProxy.html#Ext.data.HttpProxy-setUrl">setUrl</a></tt> to change the URL for &#42;just&#42; this request. store.proxy.setUrl('changed1.php'); // set optional second parameter to true to make this URL change // permanent, applying this URL for all subsequent requests. store.proxy.setUrl('changed1.php', true); // Altering the proxy API should be done using the public // method <tt><a href="output/Ext.data.DataProxy.html#Ext.data.DataProxy-setApi">setApi</a></tt>. store.proxy.setApi('read', 'changed2.php'); // Or set the entire API with a config-object. // When using the config-object option, you must redefine the <b>entire</b> // API -- not just a specific action of it. store.proxy.setApi({ read : 'changed_read.php', create : 'changed_create.php', update : 'changed_update.php', destroy : 'changed_destroy.php' }); } } }); </code></pre><br/><br/>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='doRequest'>
          <xs:annotation>
            <xs:documentation>
              Abstract method that should be implemented in all subclasses. <b>Note:</b> Should only be used by custom-proxy developers. (e.g.: <a href="output/Ext.data.HttpProxy.html#Ext.data.HttpProxy-doRequest">HttpProxy.doRequest</a>, <a href="output/Ext.data.DirectProxy.html#Ext.data.DirectProxy-doRequest">DirectProxy.doRequest</a>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='onRead'>
          <xs:annotation>
            <xs:documentation>
              Abstract method that should be implemented in all subclasses. <b>Note:</b> Should only be used by custom-proxy developers. Callback for read <a href="output/Ext.data.Api.html#Ext.data.Api-actions">action</a>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='onWrite'>
          <xs:annotation>
            <xs:documentation>
              Abstract method that should be implemented in all subclasses. <b>Note:</b> Should only be used by custom-proxy developers. Callback for <i>create, update and destroy</i> <a href="output/Ext.data.Api.html#Ext.data.Api-actions">actions</a>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='restful'>
          <xs:annotation>
            <xs:documentation>
              Defaults to <tt>false</tt>. Set to <tt>true</tt> to operate in a RESTful manner. <br/><p>Note: this parameter will automatically be set to <tt>true</tt> if the <a href="Ext.data.Store.html">Ext.data.Store</a> it is plugged into is set to <code>restful: true</code>. If the Store is RESTful, there is no need to set this option on the proxy.</p><br/><p>RESTful implementations enable the serverside framework to automatically route actions sent to one url based upon the HTTP method, for example:</p><pre><code>store: new Ext.data.Store({ restful: true, proxy: new Ext.data.HttpProxy({url:'/users'}); // all requests sent to /users ... )} </code></pre>If there is no <code><a href="output/Ext.data.DataProxy.html#Ext.data.DataProxy-api">api</a></code> specified in the configuration of the proxy, all requests will be marshalled to a single RESTful url (/users) so the serverside framework can inspect the HTTP Method and act accordingly: <pre><u>Method</u> <u>url</u> <u>action</u> POST /users create GET /users read PUT /users/23 update DESTROY /users/23 delete </pre><br/><br/> <p>If set to <tt>true</tt>, a <a href="output/Ext.data.Record.html#Ext.data.Record-phantom">non-phantom</a> record's <a href="output/Ext.data.Record.html#Ext.data.Record-id">id</a> will be appended to the url. Some MVC (e.g., Ruby on Rails, Merb and Django) support segment based urls where the segments in the URL follow the Model-View-Controller approach:</p><pre><code>someSite.com/controller/action/id </code></pre>Where the segments in the url are typically:<div class="mdetail-params"><ul><li>The first segment : represents the controller class that should be invoked.</li><li>The second segment : represents the class function, or method, that should be called.</li><li>The third segment : represents the ID (a variable typically passed to the method).</li></ul></div><br/><br/> <br/><p>Refer to <code><a href="output/Ext.data.DataProxy.html#Ext.data.DataProxy-api">Ext.data.DataProxy.api</a></code> for additional information.</p>
            </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='dataproxy' type='ec:ext.config.dataproxy' substitutionGroup='ec:observable'>
    <xs:annotation>
      <xs:documentation>
        Abstract base class for implementations which provide retrieval of unformatted data objects. This class is intended to be extended and should not be created directly. For existing implementations, see <a href="Ext.data.DirectProxy.html">Ext.data.DirectProxy</a>, <a href="Ext.data.HttpProxy.html">Ext.data.HttpProxy</a>, <a href="Ext.data.ScriptTagProxy.html">Ext.data.ScriptTagProxy</a> and <a href="Ext.data.MemoryProxy.html">Ext.data.MemoryProxy</a>. <p>DataProxy implementations are usually used in conjunction with an implementation of <a href="Ext.data.DataReader.html">Ext.data.DataReader</a> (of the appropriate type which knows how to parse the data object) to provide a block of <a href="Ext.data.Records.html">Ext.data.Records</a> to an <a href="Ext.data.Store.html">Ext.data.Store</a>.</p><p>The parameter to a DataProxy constructor may be an <a href="Ext.data.Connection.html">Ext.data.Connection</a> or can also be the config object to an <a href="Ext.data.Connection.html">Ext.data.Connection</a>.</p><p>Custom implementations must implement either the <code><b>doRequest</b></code> method (preferred) or the <code>load</code> method (deprecated). See <a href="Ext.data.HttpProxy.html">Ext.data.HttpProxy</a>.<a href="output/Ext.data.HttpProxy.html#Ext.data.HttpProxy-doRequest">doRequest</a> or <a href="Ext.data.HttpProxy.html">Ext.data.HttpProxy</a>.<a href="output/Ext.data.HttpProxy.html#Ext.data.HttpProxy-load">load</a> for additional details.</p><p style="font-weight: bold"><u>Example 1</u></p><pre><code>proxy: new Ext.data.ScriptTagProxy({ <a href="output/Ext.data.Connection.html#Ext.data.Connection-url">url</a>: 'http://extjs.com/forum/topics-remote.php' }), </code></pre><p style="font-weight: bold"><u>Example 2</u></p><pre><code>proxy : new Ext.data.HttpProxy({ <a href="output/Ext.data.Connection.html#Ext.data.Connection-method">method</a>: 'GET', <a href="output/Ext.data.HttpProxy.html#Ext.data.HttpProxy-prettyUrls">prettyUrls</a>: false, <a href="output/Ext.data.Connection.html#Ext.data.Connection-url">url</a>: 'local/default.php', // see options parameter for <a href="output/Ext.Ajax.html#Ext.Ajax-request">Ext.Ajax.request</a> <a href="output/Ext.data.DataProxy.html#Ext.data.DataProxy-api">api</a>: { // all actions except the following will use above url create : 'local/new.php', update : 'local/update.php' } }), </code></pre><p>And <b>new in Ext version 3</b>, attach centralized event-listeners upon the DataProxy class itself! This is a great place to implement a <i>messaging system</i> to centralize your application's user-feedback and error-handling.</p><pre><code>// Listen to all "beforewrite" event fired by all proxies. Ext.data.DataProxy.on('beforewrite', function(proxy, action) { console.log('beforewrite: ', action); }); // Listen to "write" event fired by all proxies Ext.data.DataProxy.on('write', function(proxy, action, data, res, rs) { console.info('write: ', action); }); // Listen to "exception" event fired by all proxies Ext.data.DataProxy.on('exception', function(proxy, type, action, exception) { console.error(type + action + ' exception); }); </code></pre><b>Note:</b> These three events are all fired with the signature of the corresponding <i>DataProxy instance</i> event <a href="output/Ext.data.DataProxy.html#Ext.data.DataProxy-beforewrite">beforewrite</a>, <a href="output/Ext.data.DataProxy.html#Ext.data.DataProxy-write">write</a> and <a href="output/Ext.data.DataProxy.html#Ext.data.DataProxy-exception">exception</a>. <p>This class serves as a typed config object for constructor of class DataProxy.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.data.DataProxy
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.datareader'>
    <xs:complexContent>
      <xs:extension base='exml:base'>
        <xs:sequence>
            <xs:element name='fields' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Either an Array of <a href="Ext.data.Field.html">Field</a> definition objects (which will be passed to <a href="output/Ext.data.Record.html#Ext.data.Record-create">Ext.data.Record.create</a>), or a <a href="Ext.data.Record.html">Record</a> constructor created from <a href="output/Ext.data.Record.html#Ext.data.Record-create">Ext.data.Record.create</a>.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='fields'>
          <xs:annotation>
            <xs:documentation>
              Either an Array of <a href="Ext.data.Field.html">Field</a> definition objects (which will be passed to <a href="output/Ext.data.Record.html#Ext.data.Record-create">Ext.data.Record.create</a>), or a <a href="Ext.data.Record.html">Record</a> constructor created from <a href="output/Ext.data.Record.html#Ext.data.Record-create">Ext.data.Record.create</a>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='messageProperty'>
          <xs:annotation>
            <xs:documentation>
              [undefined] Optional name of a property within a server-response that represents a user-feedback message.
            </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='datareader' type='ec:ext.config.datareader'>
    <xs:annotation>
      <xs:documentation>
        Abstract base class for reading structured data from a data source and converting it into an object containing <a href="Ext.data.Record.html">Ext.data.Record</a> objects and metadata for use by an <a href="Ext.data.Store.html">Ext.data.Store</a>. This class is intended to be extended and should not be created directly. For existing implementations, see <a href="Ext.data.ArrayReader.html">Ext.data.ArrayReader</a>, <a href="Ext.data.JsonReader.html">Ext.data.JsonReader</a> and <a href="Ext.data.XmlReader.html">Ext.data.XmlReader</a>. <p>This class serves as a typed config object for constructor of class DataReader.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.data.DataReader
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.dataview'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.box'>
        <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 mixed="true">
                <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='ec:ext.config.dataview' substitutionGroup='ec:box'>
    <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='ext.config.datawriter'>
    <xs:complexContent>
      <xs:extension base='exml:base'>
        <xs:sequence>
            <xs:element name='createRecord' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Abstract method that should be implemented in all subclasses (e.g.: <a href="output/Ext.data.JsonWriter.html#Ext.data.JsonWriter-createRecord">JsonWriter.createRecord</a>)
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='destroyRecord' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Abstract method that should be implemented in all subclasses (e.g.: <a href="output/Ext.data.JsonWriter.html#Ext.data.JsonWriter-destroyRecord">JsonWriter.destroyRecord</a>)
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='updateRecord' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Abstract method that should be implemented in all subclasses (e.g.: <a href="output/Ext.data.JsonWriter.html#Ext.data.JsonWriter-updateRecord">JsonWriter.updateRecord</a>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='createRecord'>
          <xs:annotation>
            <xs:documentation>
              Abstract method that should be implemented in all subclasses (e.g.: <a href="output/Ext.data.JsonWriter.html#Ext.data.JsonWriter-createRecord">JsonWriter.createRecord</a>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='destroyRecord'>
          <xs:annotation>
            <xs:documentation>
              Abstract method that should be implemented in all subclasses (e.g.: <a href="output/Ext.data.JsonWriter.html#Ext.data.JsonWriter-destroyRecord">JsonWriter.destroyRecord</a>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='listful'>
          <xs:annotation>
            <xs:documentation>
              <tt>false</tt> by default. Set <tt>true</tt> to have the DataWriter <b>always</b> write HTTP params as a list, even when acting upon a single record.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='updateRecord'>
          <xs:annotation>
            <xs:documentation>
              Abstract method that should be implemented in all subclasses (e.g.: <a href="output/Ext.data.JsonWriter.html#Ext.data.JsonWriter-updateRecord">JsonWriter.updateRecord</a>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='writeAllFields'>
          <xs:annotation>
            <xs:documentation>
              <tt>false</tt> by default. Set <tt>true</tt> to have DataWriter return ALL fields of a modified record -- not just those that changed. <tt>false</tt> to have DataWriter only request modified fields from a record.
            </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='datawriter' type='ec:ext.config.datawriter'>
    <xs:annotation>
      <xs:documentation>
        Ext.data.DataWriter facilitates create, update, and destroy actions between an Ext.data.Store and a server-side framework. A Writer enabled Store will automatically manage the Ajax requests to perform CRUD actions on a Store. <p>Ext.data.DataWriter is an abstract base class which is intended to be extended and should not be created directly. For existing implementations, see <a href="Ext.data.JsonWriter.html">Ext.data.JsonWriter</a>.</p><p>Creating a writer is simple:</p><pre><code>var writer = new Ext.data.JsonWriter({ encode: false // &lt;--- false causes data to be printed to jsonData config-property of Ext.Ajax#reqeust }); </code></pre><p>Same old JsonReader as Ext-2.x:</p><pre><code>var reader = new Ext.data.JsonReader({idProperty: 'id'}, [{name: 'first'}, {name: 'last'}, {name: 'email'}]); </code></pre><p>The proxy for a writer enabled store can be configured with a simple <code>url</code>:</p><pre><code>// Create a standard HttpProxy instance. var proxy = new Ext.data.HttpProxy({ url: 'app.php/users' // &lt;--- Supports "provides"-type urls, such as '/users.json', '/products.xml' (Hello Rails/Merb) }); </code></pre><p>For finer grained control, the proxy may also be configured with an <code>API</code>:</p><pre><code>// Maximum flexibility with the API-configuration var proxy = new Ext.data.HttpProxy({ api: { read : 'app.php/users/read', create : 'app.php/users/create', update : 'app.php/users/update', destroy : { // &lt;--- Supports object-syntax as well url: 'app.php/users/destroy', method: "DELETE" } } }); </code></pre><p>Pulling it all together into a Writer-enabled Store:</p><pre><code>var store = new Ext.data.Store({ proxy: proxy, reader: reader, writer: writer, autoLoad: true, autoSave: true // -- Cell-level updates. }); </code></pre><p>Initiating write-actions <b>automatically</b>, using the existing Ext2.0 Store/Record API:</p><pre><code>var rec = store.getAt(0); rec.set('email', 'foo&#64;bar.com'); // &lt;--- Immediately initiates an UPDATE action through configured proxy. store.remove(rec); // &lt;---- Immediately initiates a DESTROY action through configured proxy. </code></pre><p>For <b>record/batch</b> updates, use the Store-configuration <a href="output/Ext.data.Store.html#Ext.data.Store-autoSave">autoSave:false</a></p><pre><code>var store = new Ext.data.Store({ proxy: proxy, reader: reader, writer: writer, autoLoad: true, autoSave: false // -- disable cell-updates }); var urec = store.getAt(0); urec.set('email', 'foo&#64;bar.com'); var drec = store.getAt(1); store.remove(drec); // Push the button! store.save(); </code></pre> <p>This class serves as a typed config object for constructor of class DataWriter.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.data.DataWriter
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.datecolumn'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.gridcolumn'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:String' name='format'>
          <xs:annotation>
            <xs:documentation>
              A formatting string as used by <a href="output/Date.html#Date-format">Date.format</a> to format a Date for this Column (defaults to <tt>'m/d/Y'</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='datecolumn' type='ec:ext.config.datecolumn' substitutionGroup='ec:gridcolumn'>
    <xs:annotation>
      <xs:documentation>
        A Column definition class which renders a passed date according to the default locale, or a configured <a href="output/Ext.grid.DateColumn.html#Ext.grid.DateColumn-format">format</a>. See the <a href="output/Ext.grid.Column.html#Ext.grid.Column-xtype">xtype</a> config option of <a href="Ext.grid.Column.html">Ext.grid.Column</a> for more details. <p>This class represents the xtype 'datecolumn' and serves as a typed config object for constructor of class DateColumn.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.grid.DateColumn
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.datefield'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.trigger'>
        <xs:sequence>
            <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:<pre><code>// disable these exact dates: disabledDates: ["03/08/2003", "09/16/2003"] // disable these days for every year: disabledDates: ["03/08", "09/16"] // only match the beginning (useful if you are using short years): disabledDates: ["^03/08"] // disable every day in March 2006: disabledDates: ["03/../2006"] // disable every day in every March: disabledDates: ["^03"] </code></pre>Note that the format of the dates included in the array should exactly match the <a href="output/Ext.form.DateField.html#Ext.form.DateField-format">format</a> config. In order to support regular expressions, if you are using a <a href="output/Ext.form.DateField.html#Ext.form.DateField-format">date format</a> that has "." in it, you will have to escape the dot when restricting dates. For example: <tt>["03\\.08\\.03"]</tt>.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <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='disabledDays' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  An array of days to disable, 0 based (defaults to null). Some examples:<pre><code>// disable Sunday and Saturday: disabledDays: [0, 6] // disable weekdays: disabledDays: [1,2,3,4,5] </code></pre>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <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='maxValue' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The maximum allowed date. Can be either a Javascript date object or a string date in a valid format (defaults to null).
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='minValue' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The minimum allowed date. Can be either a Javascript date object or a string date in a valid format (defaults to null).
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='altFormats'>
          <xs:annotation>
            <xs:documentation>
              Multiple date formats separated by "<tt>|</tt>" to try when parsing a user input value and it does not match the defined format (defaults to <tt>'m/d/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d|n-j|n/j'</tt>).
            </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:<pre><code>// disable these exact dates: disabledDates: ["03/08/2003", "09/16/2003"] // disable these days for every year: disabledDates: ["03/08", "09/16"] // only match the beginning (useful if you are using short years): disabledDates: ["^03/08"] // disable every day in March 2006: disabledDates: ["03/../2006"] // disable every day in every March: disabledDates: ["^03"] </code></pre>Note that the format of the dates included in the array should exactly match the <a href="output/Ext.form.DateField.html#Ext.form.DateField-format">format</a> config. In order to support regular expressions, if you are using a <a href="output/Ext.form.DateField.html#Ext.form.DateField-format">date format</a> that has "." in it, you will have to escape the dot when restricting dates. For example: <tt>["03\\.08\\.03"]</tt>.
            </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 <tt>'Disabled'</tt>)
            </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 (defaults to null). Some examples:<pre><code>// disable Sunday and Saturday: disabledDays: [0, 6] // disable weekdays: disabledDays: [1,2,3,4,5] </code></pre>
            </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 <tt>'Disabled'</tt>)
            </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 <tt>'m/d/Y'</tt>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='maxText'>
          <xs:annotation>
            <xs:documentation>
              The error text to display when the date in the cell is after <tt><a href="output/Ext.form.DateField.html#Ext.form.DateField-maxValue">maxValue</a></tt> (defaults to <tt>'The date in this field must be before {maxValue}'</tt>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='maxValue'>
          <xs:annotation>
            <xs:documentation>
              The maximum allowed date. Can be either a Javascript date object or a string date in a valid format (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 when the date in the cell is before <tt><a href="output/Ext.form.DateField.html#Ext.form.DateField-minValue">minValue</a></tt> (defaults to <tt>'The date in this field must be after {minValue}'</tt>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='minValue'>
          <xs:annotation>
            <xs:documentation>
              The minimum allowed date. Can be either a Javascript date object or a string date in a valid format (defaults to null).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='showToday'>
          <xs:annotation>
            <xs:documentation>
              <tt>false</tt> to hide the footer area of the DatePicker containing the Today button and disable the keyboard handler for spacebar that selects the current date (defaults to <tt>true</tt>).
            </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:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='datefield' type='ec:ext.config.datefield' substitutionGroup='ec:trigger'>
    <xs:annotation>
      <xs:documentation>
        Provides a date input field with a <a href="Ext.DatePicker.html">Ext.DatePicker</a> dropdown and automatic date validation. <p>This class represents the xtype 'datefield' and serves as a typed config object for constructor of class DateField.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.form.DateField
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.datemenu'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.menu'>
        <xs:sequence>
            <xs:element name='handler' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A function that will handle the select event of this menu. The handler is passed the following parameters:<div class="mdetail-params"><ul><li><code>picker</code> : DatePicker<div class="sub-desc">The Ext.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 mixed="true">
                <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.menu.DateMenu.html#Ext.menu.DateMenu-handler">handler</a></code> function will be called. Defaults to this DateMenu instance.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='handler'>
          <xs:annotation>
            <xs:documentation>
              A function that will handle the select event of this menu. The handler is passed the following parameters:<div class="mdetail-params"><ul><li><code>picker</code> : DatePicker<div class="sub-desc">The Ext.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:Boolean' name='hideOnClick'>
          <xs:annotation>
            <xs:documentation>
              False to continue showing the menu after a date is selected, defaults to true.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='pickerId'>
          <xs:annotation>
            <xs:documentation>
              An id to assign to the underlying date picker. Defaults to <tt>null</tt>.
            </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.menu.DateMenu.html#Ext.menu.DateMenu-handler">handler</a></code> function will be called. Defaults to this DateMenu instance.
            </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='datemenu' type='ec:ext.config.datemenu' substitutionGroup='ec:menu'>
    <xs:annotation>
      <xs:documentation>
        A menu containing an <a href="Ext.DatePicker.html">Ext.DatePicker</a> Component. <p>Notes:</p><div class="mdetail-params"><ul><li>Although not listed here, the <b>constructor</b> for this class accepts all of the configuration options of <b><a href="Ext.DatePicker.html">Ext.DatePicker</a></b>.</li><li>If subclassing DateMenu, any configuration options for the DatePicker must be applied to the <tt><b>initialConfig</b></tt> property of the DateMenu. Applying <a href="Ext.DatePicker.html">DatePicker</a> configuration settings to <b><tt>this</tt></b> will <b>not</b> affect the DatePicker's configuration.</li></ul></div> <p>This class represents the xtype 'datemenu' and serves as a typed config object for constructor of class DateMenu.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.menu.DateMenu
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.datepicker'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.component'>
        <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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='ec:ext.config.datepicker' substitutionGroup='ec: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='ext.config.defaultselectionmodel'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.observable'>
        <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='defaultselectionmodel' type='ec:ext.config.defaultselectionmodel' substitutionGroup='ec:observable'>
    <xs:annotation>
      <xs:documentation>
        The default single selection for a TreePanel. <p>This class serves as a typed config object for constructor of class DefaultSelectionModel.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.tree.DefaultSelectionModel
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.directload'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.load'>
        <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='directload' type='ec:ext.config.directload' substitutionGroup='ec:load'>
    <xs:annotation>
      <xs:documentation>
        Provides Ext.direct support for loading form data. <p>This example illustrates usage of Ext.Direct to <b>load</b> a form through Ext.Direct.</p><pre><code>var myFormPanel = new Ext.form.FormPanel({ // configs for FormPanel title: 'Basic Information', renderTo: document.body, width: 300, height: 160, padding: 10, // configs apply to child items defaults: {anchor: '100%'}, defaultType: 'textfield', items: [{ fieldLabel: 'Name', name: 'name' },{ fieldLabel: 'Email', name: 'email' },{ fieldLabel: 'Company', name: 'company' }], // configs for BasicForm api: { // The server-side method to call for load() requests load: Profile.getBasicInfo, // The server-side must mark the submit handler as a 'formHandler' submit: Profile.updateBasicInfo }, // specify the order for the passed params paramOrder: ['uid', 'foo'] }); // load the form myFormPanel.getForm().load({ // pass 2 arguments to server side getBasicInfo method (len=2) params: { foo: 'bar', uid: 34 } }); </code></pre>The data packet sent to the server will resemble something like: <pre><code>[ { "action":"Profile","method":"getBasicInfo","type":"rpc","tid":2, "data":[34,"bar"] // note the order of the params } ] </code></pre>The form will process a data packet returned by the server that is similar to the following format: <pre><code>[ { "action":"Profile","method":"getBasicInfo","type":"rpc","tid":2, "result":{ "success":true, "data":{ "name":"Fred Flintstone", "company":"Slate Rock and Gravel", "email":"fred.flintstone&#64;slaterg.com" } } } ] </code></pre> <p>This class serves as a typed config object for constructor of class DirectLoad.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.form.action.DirectLoad
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.directproxy'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.dataproxy'>
        <xs:sequence>
            <xs:element name='directFn' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Function to call when executing a request. directFn is a simple alternative to defining the api configuration-parameter for Store's which will not implement a full CRUD api.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='paramOrder' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Defaults to <tt>undefined</tt>. A list of params to be executed server side. Specify the params in the order in which they must be executed on the server-side as either (1) an Array of String values, or (2) a String of params delimited by either whitespace, comma, or pipe. For example, any of the following would be acceptable:<pre><code>paramOrder: ['param1','param2','param3'] paramOrder: 'param1 param2 param3' paramOrder: 'param1,param2,param3' paramOrder: 'param1|param2|param' </code></pre>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='directFn'>
          <xs:annotation>
            <xs:documentation>
              Function to call when executing a request. directFn is a simple alternative to defining the api configuration-parameter for Store's which will not implement a full CRUD api.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='paramOrder'>
          <xs:annotation>
            <xs:documentation>
              Defaults to <tt>undefined</tt>. A list of params to be executed server side. Specify the params in the order in which they must be executed on the server-side as either (1) an Array of String values, or (2) a String of params delimited by either whitespace, comma, or pipe. For example, any of the following would be acceptable:<pre><code>paramOrder: ['param1','param2','param3'] paramOrder: 'param1 param2 param3' paramOrder: 'param1,param2,param3' paramOrder: 'param1|param2|param' </code></pre>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='paramsAsHash'>
          <xs:annotation>
            <xs:documentation>
              Send parameters as a collection of named arguments (defaults to <tt>true</tt>). Providing a <tt><a href="output/Ext.data.DirectProxy.html#Ext.data.DirectProxy-paramOrder">paramOrder</a></tt> nullifies this configuration.
            </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='directproxy' type='ec:ext.config.directproxy' substitutionGroup='ec:dataproxy'>
    <xs:annotation>
      <xs:documentation>
        <p>This class serves as a typed config object for constructor of class DirectProxy.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.data.DirectProxy
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.directstore'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.store'>
        <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='directstore' type='ec:ext.config.directstore' substitutionGroup='ec:store'>
    <xs:annotation>
      <xs:documentation>
        Small helper class to create an <a href="Ext.data.Store.html">Ext.data.Store</a> configured with an <a href="Ext.data.DirectProxy.html">Ext.data.DirectProxy</a> and <a href="Ext.data.JsonReader.html">Ext.data.JsonReader</a> to make interacting with an <a href="Ext.Direct.html">Ext.Direct</a> Server-side <a href="Ext.direct.Provider.html">Provider</a> easier. To create a different proxy/reader combination create a basic <a href="Ext.data.Store.html">Ext.data.Store</a> configured as needed. <p><b>&#42;Note:</b> Although they are not listed, this class inherits all of the config options of:</p><div><ul class="mdetail-params"><li><b><a href="Ext.data.Store.html">Store</a></b></li><li><b><a href="Ext.data.JsonReader.html">JsonReader</a></b></li><li style="list-style: none"><div class="sub-desc"><ul class="mdetail-params"><li><tt><b><a href="output/Ext.data.JsonReader.html#Ext.data.JsonReader-root">root</a></b></tt></li><li><tt><b><a href="output/Ext.data.JsonReader.html#Ext.data.JsonReader-idProperty">idProperty</a></b></tt></li><li><tt><b><a href="output/Ext.data.JsonReader.html#Ext.data.JsonReader-totalProperty">totalProperty</a></b></tt></li></ul></div></li><li><b><a href="Ext.data.DirectProxy.html">DirectProxy</a></b></li><li style="list-style: none"><div class="sub-desc"><ul class="mdetail-params"><li><tt><b><a href="output/Ext.data.DirectProxy.html#Ext.data.DirectProxy-directFn">directFn</a></b></tt></li><li><tt><b><a href="output/Ext.data.DirectProxy.html#Ext.data.DirectProxy-paramOrder">paramOrder</a></b></tt></li><li><tt><b><a href="output/Ext.data.DirectProxy.html#Ext.data.DirectProxy-paramsAsHash">paramsAsHash</a></b></tt></li></ul></div></li></ul></div> <p>This class serves as a typed config object for constructor of class DirectStore.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.data.DirectStore
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.directsubmit'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.submit'>
        <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='directsubmit' type='ec:ext.config.directsubmit' substitutionGroup='ec:submit'>
    <xs:annotation>
      <xs:documentation>
        Provides Ext.direct support for submitting form data. <p>This example illustrates usage of Ext.Direct to <b>submit</b> a form through Ext.Direct.</p><pre><code>var myFormPanel = new Ext.form.FormPanel({ // configs for FormPanel title: 'Basic Information', renderTo: document.body, width: 300, height: 160, padding: 10, buttons:[{ text: 'Submit', handler: function(){ myFormPanel.getForm().submit({ params: { foo: 'bar', uid: 34 } }); } }], // configs apply to child items defaults: {anchor: '100%'}, defaultType: 'textfield', items: [{ fieldLabel: 'Name', name: 'name' },{ fieldLabel: 'Email', name: 'email' },{ fieldLabel: 'Company', name: 'company' }], // configs for BasicForm api: { // The server-side method to call for load() requests load: Profile.getBasicInfo, // The server-side must mark the submit handler as a 'formHandler' submit: Profile.updateBasicInfo }, // specify the order for the passed params paramOrder: ['uid', 'foo'] }); </code></pre>The data packet sent to the server will resemble something like: <pre><code>{ "action":"Profile","method":"updateBasicInfo","type":"rpc","tid":"6", "result":{ "success":true, "id":{ "extAction":"Profile","extMethod":"updateBasicInfo", "extType":"rpc","extTID":"6","extUpload":"false", "name":"Aaron Conran","email":"aaron&#64;extjs.com","company":"Ext JS, LLC" } } } </code></pre>The form will process a data packet returned by the server that is similar to the following: <pre><code>// sample success packet (batched requests) [ { "action":"Profile","method":"updateBasicInfo","type":"rpc","tid":3, "result":{ "success":true } } ] // sample failure packet (one request) { "action":"Profile","method":"updateBasicInfo","type":"rpc","tid":"6", "result":{ "errors":{ "email":"already taken" }, "success":false, "foo":"bar" } } </code></pre>Also see the discussion in <a href="Ext.form.Action.DirectLoad.html">Ext.form.Action.DirectLoad</a>. <p>This class serves as a typed config object for constructor of class DirectSubmit.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.form.action.DirectSubmit
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.displayfield'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.field'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:Boolean' name='htmlEncode'>
          <xs:annotation>
            <xs:documentation>
              <tt>false</tt> to skip HTML-encoding the text when rendering it (defaults to <tt>false</tt>). This might be useful if you want to include tags in the field's innerHTML rather than rendering them as string literals per the default logic.
            </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='displayfield' type='ec:ext.config.displayfield' substitutionGroup='ec:field'>
    <xs:annotation>
      <xs:documentation>
        A display-only text field which is not validated and not submitted. <p>This class represents the xtype 'displayfield' and serves as a typed config object for constructor of class DisplayField.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.form.DisplayField
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.dragsource'>
    <xs:complexContent>
      <xs:extension base='exml:base'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:String' name='ddGroup'>
          <xs:annotation>
            <xs:documentation>
              A named drag drop group to which this object belongs. If a group is specified, then this object will only interact with other drag drop objects in the same group (defaults to undefined).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='dropAllowed'>
          <xs:annotation>
            <xs:documentation>
              The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='dropNotAllowed'>
          <xs:annotation>
            <xs:documentation>
              The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
            </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='dragsource' type='ec:ext.config.dragsource'>
    <xs:annotation>
      <xs:documentation>
        A simple class that provides the basic implementation needed to make any element draggable. <p>This class serves as a typed config object for constructor of class DragSource.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.dd.DragSource
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.dragtracker'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.observable'>
        <xs:sequence>
            <xs:element name='autoStart' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Defaults to <tt>false</tt>. Specify <tt>true</tt> to defer trigger start by 1000 ms. Specify a Number for the number of milliseconds to defer trigger start.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:Boolean' name='active'>
          <xs:annotation>
            <xs:documentation>
              Defaults to <tt>false</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='autoStart'>
          <xs:annotation>
            <xs:documentation>
              Defaults to <tt>false</tt>. Specify <tt>true</tt> to defer trigger start by 1000 ms. Specify a Number for the number of milliseconds to defer trigger start.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='tolerance'>
          <xs:annotation>
            <xs:documentation>
              Number of pixels the drag target must be moved before dragging is considered to have started. Defaults to <tt>5</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='dragtracker' type='ec:ext.config.dragtracker' substitutionGroup='ec:observable'>
    <xs:annotation>
      <xs:documentation>
        A DragTracker listens for drag events on an Element and fires events at the start and end of the drag, as well as during the drag. This is useful for components such as <a href="Ext.slider.MultiSlider.html">Ext.slider.MultiSlider</a>, where there is an element that can be dragged around to change the Slider's value. DragTracker provides a series of template methods that should be overridden to provide functionality in response to detected drag operations. These are onBeforeStart, onStart, onDrag and onEnd. See <a href="Ext.slider.MultiSlider.html">Ext.slider.MultiSlider</a>'s initEvents function for an example implementation. <p>This class serves as a typed config object for constructor of class DragTracker.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.dd.DragTracker
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.dragzone'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.dragsource'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:Boolean' name='containerScroll'>
          <xs:annotation>
            <xs:documentation>
              True to register this container with the Scrollmanager for auto scrolling during drag operations.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='hlColor'>
          <xs:annotation>
            <xs:documentation>
              The color to use when visually highlighting the drag source in the afterRepair method after a failed drop (defaults to "c3daf9" - light blue)
            </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='dragzone' type='ec:ext.config.dragzone' substitutionGroup='ec:dragsource'>
    <xs:annotation>
      <xs:documentation>
        This class provides a container DD instance that allows dragging of multiple child source nodes. <p>This class does not move the drag target nodes, but a proxy element which may contain any DOM structure you wish. The DOM element to show in the proxy is provided by either a provided implementation of <a href="output/Ext.dd.DragZone.html#Ext.dd.DragZone-getDragData">getDragData</a>, or by registered draggables registered with <a href="Ext.dd.Registry.html">Ext.dd.Registry</a></p><p>If you wish to provide draggability for an arbitrary number of DOM nodes, each of which represent some application object (For example nodes in a <a href="Ext.DataView.html">DataView</a>) then use of this class is the most efficient way to "activate" those nodes.</p><p>By default, this class requires that draggable child nodes are registered with <a href="Ext.dd.Registry.html">Ext.dd.Registry</a>. However a simpler way to allow a DragZone to manage any number of draggable elements is to configure the DragZone with an implementation of the <a href="output/Ext.dd.DragZone.html#Ext.dd.DragZone-getDragData">getDragData</a> method which interrogates the passed mouse event to see if it has taken place within an element, or class of elements. This is easily done by using the event's <a href="output/Ext.EventObject.html#Ext.EventObject-getTarget">getTarget</a> method to identify a node based on a <a href="Ext.DomQuery.html">Ext.DomQuery</a> selector. For example, to make the nodes of a DataView draggable, use the following technique. Knowledge of the use of the DataView is required:</p><pre><code>myDataView.on('render', function(v) { myDataView.dragZone = new Ext.dd.DragZone(v.getEl(), { // On receipt of a mousedown event, see if it is within a DataView node. // Return a drag data object if so. getDragData: function(e) { // Use the DataView's own itemSelector (a mandatory property) to // test if the mousedown is within one of the DataView's nodes. var sourceEl = e.getTarget(v.itemSelector, 10); // If the mousedown is within a DataView node, clone the node to produce // a ddel element for use by the drag proxy. Also add application data // to the returned data object. if (sourceEl) { d = sourceEl.cloneNode(true); d.id = Ext.id(); return { ddel: d, sourceEl: sourceEl, repairXY: Ext.fly(sourceEl).getXY(), sourceStore: v.store, draggedRecord: v.<a href="output/Ext.DataView.html#Ext.DataView-getRecord">getRecord</a>(sourceEl) } } }, // Provide coordinates for the proxy to slide back to on failed drag. // This is the original XY coordinates of the draggable element captured // in the getDragData method. getRepairXY: function() { return this.dragData.repairXY; } }); });</code></pre>See the <a href="Ext.dd.DropZone.html">DropZone</a> documentation for details about building a DropZone which cooperates with this DragZone. <p>This class serves as a typed config object for constructor of class DragZone.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.dd.DragZone
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.droptarget'>
    <xs:complexContent>
      <xs:extension base='exml:base'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:String' name='ddGroup'>
          <xs:annotation>
            <xs:documentation>
              A named drag drop group to which this object belongs. If a group is specified, then this object will only interact with other drag drop objects in the same group (defaults to undefined).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='dropAllowed'>
          <xs:annotation>
            <xs:documentation>
              The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='dropNotAllowed'>
          <xs:annotation>
            <xs:documentation>
              The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='overClass'>
          <xs:annotation>
            <xs:documentation>
              The CSS class applied to the drop target element while the drag source is over it (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='droptarget' type='ec:ext.config.droptarget'>
    <xs:annotation>
      <xs:documentation>
        A simple class that provides the basic implementation needed to make any element a drop target that can have draggable items dropped onto it. The drop has no effect until an implementation of notifyDrop is provided. <p>This class serves as a typed config object for constructor of class DropTarget.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.dd.DropTarget
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.dropzone'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.droptarget'>
        <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='dropzone' type='ec:ext.config.dropzone' substitutionGroup='ec:droptarget'>
    <xs:annotation>
      <xs:documentation>
        This class provides a container DD instance that allows dropping on multiple child target nodes. <p>By default, this class requires that child nodes accepting drop are registered with <a href="Ext.dd.Registry.html">Ext.dd.Registry</a>. However a simpler way to allow a DropZone to manage any number of target elements is to configure the DropZone with an implementation of <a href="output/Ext.dd.DropZone.html#Ext.dd.DropZone-getTargetFromEvent">getTargetFromEvent</a> which interrogates the passed mouse event to see if it has taken place within an element, or class of elements. This is easily done by using the event's <a href="output/Ext.EventObject.html#Ext.EventObject-getTarget">getTarget</a> method to identify a node based on a <a href="Ext.DomQuery.html">Ext.DomQuery</a> selector.</p><p>Once the DropZone has detected through calling getTargetFromEvent, that the mouse is over a drop target, that target is passed as the first parameter to <a href="output/Ext.dd.DropZone.html#Ext.dd.DropZone-onNodeEnter">onNodeEnter</a>, <a href="output/Ext.dd.DropZone.html#Ext.dd.DropZone-onNodeOver">onNodeOver</a>, <a href="output/Ext.dd.DropZone.html#Ext.dd.DropZone-onNodeOut">onNodeOut</a>, <a href="output/Ext.dd.DropZone.html#Ext.dd.DropZone-onNodeDrop">onNodeDrop</a>. You may configure the instance of DropZone with implementations of these methods to provide application-specific behaviour for these events to update both application state, and UI state.</p><p>For example to make a GridPanel a cooperating target with the example illustrated in <a href="Ext.dd.DragZone.html">DragZone</a>, the following technique might be used:</p><pre><code>myGridPanel.on('render', function() { myGridPanel.dropZone = new Ext.dd.DropZone(myGridPanel.getView().scroller, { // If the mouse is over a grid row, return that node. This is // provided as the "target" parameter in all "onNodeXXXX" node event handling functions getTargetFromEvent: function(e) { return e.getTarget(myGridPanel.getView().rowSelector); }, // On entry into a target node, highlight that node. onNodeEnter : function(target, dd, e, data){ Ext.fly(target).addClass('my-row-highlight-class'); }, // On exit from a target node, unhighlight that node. onNodeOut : function(target, dd, e, data){ Ext.fly(target).removeClass('my-row-highlight-class'); }, // While over a target node, return the default drop allowed class which // places a "tick" icon into the drag proxy. onNodeOver : function(target, dd, e, data){ return Ext.dd.DropZone.prototype.dropAllowed; }, // On node drop we can interrogate the target to find the underlying // application object that is the real target of the dragged data. // In this case, it is a Record in the GridPanel's Store. // We can use the data set up by the DragZone's getDragData method to read // any data we decided to attach in the DragZone's getDragData method. onNodeDrop : function(target, dd, e, data){ var rowIndex = myGridPanel.getView().findRowIndex(target); var r = myGridPanel.getStore().getAt(rowIndex); Ext.Msg.alert('Drop gesture', 'Dropped Record id ' + data.draggedRecord.id + ' on Record id ' + r.id); return true; } }); } </code></pre>See the <a href="Ext.dd.DragZone.html">DragZone</a> documentation for details about building a DragZone which cooperates with this DropZone. <p>This class serves as a typed config object for constructor of class DropZone.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.dd.DropZone
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.editor'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.component'>
        <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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='ec:ext.config.editor' substitutionGroup='ec: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='ext.config.editorgrid'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.grid'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:Boolean' name='autoEncode'>
          <xs:annotation>
            <xs:documentation>
              True to automatically HTML encode and decode values pre and post edit (defaults to false)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='clicksToEdit'>
          <xs:annotation>
            <xs:documentation>
              The number of clicks on a cell required to display the cell's editor (defaults to 2). <p>Setting this option to 'auto' means that mousedown <i>on the selected cell</i> starts editing that cell.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='forceValidation'>
          <xs:annotation>
            <xs:documentation>
              True to force validation even if the value is unmodified (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='editorgrid' type='ec:ext.config.editorgrid' substitutionGroup='ec:grid'>
    <xs:annotation>
      <xs:documentation>
        This class extends the <a href="Ext.grid.GridPanel.html">GridPanel Class</a> to provide cell editing on selected <a href="Ext.grid.Column.html">columns</a>. The editable columns are specified by providing an <a href="output/Ext.grid.ColumnModel.html#Ext.grid.ColumnModel-editor">editor</a> in the <a href="Ext.grid.Column.html">column configuration</a>. <p>Editability of columns may be controlled programmatically by inserting an implementation of <a href="output/Ext.grid.ColumnModel.html#Ext.grid.ColumnModel-isCellEditable">isCellEditable</a> into the <a href="Ext.grid.ColumnModel.html">ColumnModel</a>.</p><p>Editing is performed on the value of the <i>field</i> specified by the column's <tt><a href="output/Ext.grid.ColumnModel.html#Ext.grid.ColumnModel-dataIndex">dataIndex</a></tt> in the backing <a href="Ext.data.Store.html">Store</a> (so if you are using a <a href="output/Ext.grid.ColumnModel.html#Ext.grid.ColumnModel-setRenderer">renderer</a> in order to display transformed data, this must be accounted for).</p><p>If a value-to-description mapping is used to render a column, then a <a href="output/Ext.form.Field.html#Ext.form.Field-ComboBox">ComboBox</a> which uses the same <a href="output/Ext.form.Field.html#Ext.form.Field-valueField">value</a>-to-<a href="output/Ext.form.Field.html#Ext.form.Field-displayFieldField">description</a> mapping would be an appropriate editor.</p>If there is a more complex mismatch between the visible data in the grid, and the editable data in the <a href="Edt.data.Store.html">Store</a>, then code to transform the data both before and after editing can be injected using the <a href="output/Ext.grid.EditorGridPanel.html#Ext.grid.EditorGridPanel-beforeedit">beforeedit</a> and <a href="output/Ext.grid.EditorGridPanel.html#Ext.grid.EditorGridPanel-afteredit">afteredit</a> events. <p>This class represents the xtype 'editorgrid' and serves as a typed config object for constructor of class EditorGridPanel.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.grid.EditorGridPanel
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.field'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.box'>
        <xs:sequence>
            <xs:element name='autoCreate' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A <a href="Ext.DomHelper.html">DomHelper</a> element spec, or true for a default element spec. Used to create the <a href="output/Ext.Component.html#Ext.Component-getEl">Element</a> which will encapsulate this Component. See <tt><a href="output/Ext.Component.html#Ext.Component-autoEl">autoEl</a></tt> for details. Defaults to: <pre><code>{tag: 'input', type: 'text', size: '20', autocomplete: 'off'}</code></pre>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='validationEvent' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The event that should initiate field validation. Set to false to disable automatic validation (defaults to 'keyup').
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <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>
                  A value to initialize this field with (defaults to undefined).
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='autoCreate'>
          <xs:annotation>
            <xs:documentation>
              A <a href="Ext.DomHelper.html">DomHelper</a> element spec, or true for a default element spec. Used to create the <a href="output/Ext.Component.html#Ext.Component-getEl">Element</a> which will encapsulate this Component. See <tt><a href="output/Ext.Component.html#Ext.Component-autoEl">autoEl</a></tt> for details. Defaults to: <pre><code>{tag: 'input', type: 'text', size: '20', autocomplete: 'off'}</code></pre>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='fieldClass'>
          <xs:annotation>
            <xs:documentation>
              The default CSS class for the field (defaults to 'x-form-field')
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='focusClass'>
          <xs:annotation>
            <xs:documentation>
              The CSS class to use when the field receives focus (defaults to 'x-form-focus')
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='inputType'>
          <xs:annotation>
            <xs:documentation>
              The type attribute for input fields -- e.g. radio, text, password, file (defaults to 'text'). The types 'file' and 'password' must be used to render those field types currently -- there are no separate Ext components for those. Note that if you use <tt>inputType:'file'</tt>, <a href="output/Ext.form.Field.html#Ext.form.Field-emptyText">emptyText</a> is not supported and should be avoided.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='invalidClass'>
          <xs:annotation>
            <xs:documentation>
              The CSS class to use when marking a field invalid (defaults to 'x-form-invalid')
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='invalidText'>
          <xs:annotation>
            <xs:documentation>
              The error text to use when marking a field invalid and no message is provided (defaults to 'The value in this field is invalid')
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='msgFx'>
          <xs:annotation>
            <xs:documentation>
              <b>Experimental</b> The effect used when displaying a validation message under the field (defaults to 'normal').
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='msgTarget'>
          <xs:annotation>
            <xs:documentation>
              The location where the message text set through <a href="output/Ext.form.Field.html#Ext.form.Field-markInvalid">markInvalid</a> should display. Must be one of the following values: <div class="mdetail-params"><ul><li><code>qtip</code> Display a quick tip containing the message when the user hovers over the field. This is the default. <div style="font-weight: bold" class="subdesc"><a href="output/Ext.QuickTips.html#Ext.QuickTips-init">Ext.QuickTips.init</a> must have been called for this setting to work.</div></li><li><code>title</code> Display the message in a default browser title attribute popup.</li><li><code>under</code> Add a block div beneath the field containing the error message.</li><li><code>side</code> Add an error icon to the right of the field, displaying the message in a popup on hover.</li><li><code>[element id]</code> Add the error message directly to the innerHTML of the specified element.</li></ul></div>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='name'>
          <xs:annotation>
            <xs:documentation>
              The field's HTML name attribute (defaults to ''). <b>Note</b>: this property must be set if this field is to be automatically included with <a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-submit">form submit()</a>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='preventMark'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> to disable <a href="output/Ext.form.Field.html#Ext.form.Field-markInvalid">marking the field invalid</a>. Defaults to <tt>false</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='readOnly'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> to mark the field as readOnly in HTML (defaults to <tt>false</tt>). <br/><p><b>Note</b>: this only sets the element's readOnly DOM attribute. Setting <code>readOnly=true</code>, for example, will not disable triggering a ComboBox or DateField; it gives you the option of forcing the user to choose via the trigger without typing in the text box. To hide the trigger use <code><a href="output/Ext.form.TriggerField.html#Ext.form.TriggerField-hideTrigger">hideTrigger</a></code>.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='submitValue'>
          <xs:annotation>
            <xs:documentation>
              False to clear the name attribute on the field so that it is not submitted during a form post. Defaults to <tt>true</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='tabIndex'>
          <xs:annotation>
            <xs:documentation>
              The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='validateOnBlur'>
          <xs:annotation>
            <xs:documentation>
              Whether the field should validate when it loses focus (defaults to true).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='validationDelay'>
          <xs:annotation>
            <xs:documentation>
              The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='validationEvent'>
          <xs:annotation>
            <xs:documentation>
              The event that should initiate field validation. Set to false to disable automatic validation (defaults to 'keyup').
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='value'>
          <xs:annotation>
            <xs:documentation>
              A value to initialize this field with (defaults to undefined).
            </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='field' type='ec:ext.config.field' substitutionGroup='ec:box'>
    <xs:annotation>
      <xs:documentation>
        Base class for form fields that provides default event handling, sizing, value handling and other functionality. <p>This class represents the xtype 'field' and serves as a typed config object for constructor of class Field.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.form.Field
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.fieldset'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.panel'>
        <xs:sequence>
            <xs:element name='checkboxToggle' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  <tt>true</tt> to render a checkbox into the fieldset frame just in front of the legend to expand/collapse the fieldset when the checkbox is toggled. (defaults to <tt>false</tt>). <p>A <a href="Ext.DomHelper.html">DomHelper</a> element spec may also be specified to create the checkbox. If <tt>true</tt> is specified, the default DomHelper config object used to create the element is:</p><pre><code>{tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'} </code></pre>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='checkboxName'>
          <xs:annotation>
            <xs:documentation>
              The name to assign to the fieldset's checkbox if <tt><a href="output/Ext.form.FieldSet.html#Ext.form.FieldSet-checkboxToggle">checkboxToggle</a> = true</tt> (defaults to <tt>'[checkbox id]-checkbox'</tt>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='checkboxToggle'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> to render a checkbox into the fieldset frame just in front of the legend to expand/collapse the fieldset when the checkbox is toggled. (defaults to <tt>false</tt>). <p>A <a href="Ext.DomHelper.html">DomHelper</a> element spec may also be specified to create the checkbox. If <tt>true</tt> is specified, the default DomHelper config object used to create the element is:</p><pre><code>{tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'} </code></pre>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='labelWidth'>
          <xs:annotation>
            <xs:documentation>
              The width of labels. This property cascades to child containers.
            </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='fieldset' type='ec:ext.config.fieldset' substitutionGroup='ec:panel'>
    <xs:annotation>
      <xs:documentation>
        Standard container used for grouping items within a <a href="Ext.form.FormPanel.html">form</a>. <pre><code>var form = new Ext.FormPanel({ title: 'Simple Form with FieldSets', labelWidth: 75, // label settings here cascade unless overridden url: 'save-form.php', frame:true, bodyStyle:'padding:5px 5px 0', width: 700, renderTo: document.body, layout:'column', // arrange items in columns defaults: { // defaults applied to items layout: 'form', border: false, bodyStyle: 'padding:4px' }, items: [{ // Fieldset in Column 1 xtype:'fieldset', columnWidth: 0.5, title: 'Fieldset 1', collapsible: true, autoHeight:true, defaults: { anchor: '-20' // leave room for error icon }, defaultType: 'textfield', items :[{ fieldLabel: 'Field 1' }, { fieldLabel: 'Field 2' }, { fieldLabel: 'Field 3' } ] },{ // Fieldset in Column 2 - Panel inside xtype:'fieldset', title: 'Show Panel', // title, header, or checkboxToggle creates fieldset header autoHeight:true, columnWidth: 0.5, checkboxToggle: true, collapsed: true, // fieldset initially collapsed layout:'anchor', items :[{ xtype: 'panel', anchor: '100%', title: 'Panel inside a fieldset', frame: true, height: 100 }] }] }); </code></pre> <p>This class represents the xtype 'fieldset' and serves as a typed config object for constructor of class FieldSet.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.form.FieldSet
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.fitlayout'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.containerlayout'>
        <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='fitlayout' type='ec:ext.config.fitlayout' substitutionGroup='ec:containerlayout'>
    <xs:annotation>
      <xs:documentation>
        This is a base class for layouts that contain <b>a single item</b> that automatically expands to fill the layout's container. This class is intended to be extended or created via the <tt>layout:'fit'</tt> <a href="output/Ext.Container.html#Ext.Container-layout">Ext.Container.layout</a> config, and should generally not need to be created directly via the new keyword. <p>FitLayout does not have any direct config options (other than inherited ones). To fit a panel to a container using FitLayout, simply set layout:'fit' on the container and add a single panel to it. If the container has multiple panels, only the first one will be displayed. Example usage:</p><pre><code>var p = new Ext.Panel({ title: 'Fit Layout', layout:'fit', items: { title: 'Inner Panel', html: '&lt;p&gt;This is the inner panel content&lt;/p&gt;', border: false } }); </code></pre> <p>This class serves as a typed config object for constructor of class FitLayout.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.layout.FitLayout
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.flash'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.box'>
        <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 mixed="true">
                <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 mixed="true">
                <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='flash' type='ec:ext.config.flash' substitutionGroup='ec:box'>
    <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='ext.config.form'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.panel'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:String' name='formId'>
          <xs:annotation>
            <xs:documentation>
              The id of the FORM tag (defaults to an auto-generated id).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='hideLabels'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> to hide field labels by default (sets <tt>display:none</tt>). Defaults to <tt>false</tt>. <p>Also see <a href="Ext.Component.html">Ext.Component</a>.<tt><a href="output/Ext.Component.html#Ext.Component-hideLabel">hideLabel</a></tt>.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='labelAlign'>
          <xs:annotation>
            <xs:documentation>
              The label alignment value used for the <tt>text-align</tt> specification for the <b>container</b>. Valid values are <tt>"left</tt>", <tt>"top"</tt> or <tt>"right"</tt> (defaults to <tt>"left"</tt>). This property cascades to child <b>containers</b> and can be overridden on any child <b>container</b> (e.g., a fieldset can specify a different <tt>labelAlign</tt> for its fields).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='labelPad'>
          <xs:annotation>
            <xs:documentation>
              The default padding in pixels for field labels (defaults to <tt>5</tt>). <tt>labelPad</tt> only applies if <tt><a href="output/Ext.form.FormPanel.html#Ext.form.FormPanel-labelWidth">labelWidth</a></tt> is also specified, otherwise it will be ignored.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='labelWidth'>
          <xs:annotation>
            <xs:documentation>
              The width of labels in pixels. This property cascades to child containers and can be overridden on any child container (e.g., a fieldset can specify a different <tt>labelWidth</tt> for its fields) (defaults to <tt>100</tt>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='monitorPoll'>
          <xs:annotation>
            <xs:documentation>
              The milliseconds to poll valid state, ignored if monitorValid is not true (defaults to 200)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='monitorValid'>
          <xs:annotation>
            <xs:documentation>
              If <tt>true</tt>, the form monitors its valid state <b>client-side</b> and regularly fires the <a href="output/Ext.form.FormPanel.html#Ext.form.FormPanel-clientvalidation">clientvalidation</a> event passing that state.<br/><p>When monitoring valid state, the FormPanel enables/disables any of its configured <a href="output/Ext.form.FormPanel.html#Ext.form.FormPanel-buttons">buttons</a> which have been configured with <code>formBind: true</code> depending on whether the <a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-isValid">form is valid</a> or not. Defaults to <tt>false</tt></p>
            </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='form' type='ec:ext.config.form' substitutionGroup='ec:panel'>
    <xs:annotation>
      <xs:documentation>
        Standard form container. <p style="font-weight: bold"><u>Layout</u></p><p>By default, FormPanel is configured with <tt>layout:'form'</tt> to use an <a href="Ext.layout.FormLayout.html">Ext.layout.FormLayout</a> layout manager, which styles and renders fields and labels correctly. When nesting additional Containers within a FormPanel, you should ensure that any descendant Containers which host input Fields use the <a href="Ext.layout.FormLayout.html">Ext.layout.FormLayout</a> layout manager.</p><p style="font-weight: bold"><u>BasicForm</u></p><p>Although <b>not listed</b> as configuration options of FormPanel, the FormPanel class accepts all of the config options required to configure its internal <a href="Ext.form.BasicForm.html">Ext.form.BasicForm</a> for:</p><div class="mdetail-params"><ul><li><a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-fileUpload">file uploads</a></li><li>functionality for <a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-doAction">loading, validating and submitting</a> the form</li></ul></div><p><b>Note</b>: If subclassing FormPanel, any configuration options for the BasicForm must be applied to the <tt><b>initialConfig</b></tt> property of the FormPanel. Applying <a href="Ext.form.BasicForm.html">BasicForm</a> configuration settings to <b><tt>this</tt></b> will <b>not</b> affect the BasicForm's configuration.</p><p style="font-weight: bold"><u>Form Validation</u></p><p>For information on form validation see the following:</p><div class="mdetail-params"><ul><li><a href="Ext.form.TextField.html">Ext.form.TextField</a></li><li><a href="Ext.form.VTypes.html">Ext.form.VTypes</a></li><li><a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-doAction">BasicForm.doAction <b>clientValidation</b> notes</a></li><li><tt><a href="output/Ext.form.FormPanel.html#Ext.form.FormPanel-monitorValid">monitorValid</a></tt></li></ul></div><p style="font-weight: bold"><u>Form Submission</u></p><p>By default, Ext Forms are submitted through Ajax, using <a href="Ext.form.Action.html">Ext.form.Action</a>. To enable normal browser submission of the <a href="Ext.form.BasicForm.html">BasicForm</a> contained in this FormPanel, see the <tt><b><a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-standardSubmit">standardSubmit</a></b></tt> option.</p> <p>This class represents the xtype 'form' and serves as a typed config object for constructor of class FormPanel.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.form.FormPanel
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.formaction'>
    <xs:complexContent>
      <xs:extension base='exml:base'>
        <xs:sequence>
            <xs:element name='failure' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The function to call when a failure packet was recieved, or when an error ocurred in the Ajax communication. The function is passed the following parameters:<ul class="mdetail-params"><li><b>form</b> : Ext.form.BasicForm<div class="sub-desc">The form that requested the action</div></li><li><b>action</b> : Ext.form.Action<div class="sub-desc">The Action class. If an Ajax error ocurred, the failure type will be in <a href="output/Ext.form.Action.html#Ext.form.Action-failureType">failureType</a>. The <a href="output/Ext.form.Action.html#Ext.form.Action-result">result</a> property of this object may be examined to perform custom postprocessing.</div></li></ul>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='params' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Extra parameter values to pass. These are added to the Form's <a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-baseParams">Ext.form.BasicForm.baseParams</a> and passed to the specified URL along with the Form's input fields. <p>Parameters are encoded as standard HTTP parameters using <a href="output/Ext.html#Ext-urlEncode">Ext.urlEncode</a>.</p>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <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 in which to call the callback functions (The <tt>this</tt> reference for the callback functions).
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='success' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The function to call when a valid success return packet is recieved. The function is passed the following parameters:<ul class="mdetail-params"><li><b>form</b> : Ext.form.BasicForm<div class="sub-desc">The form that requested the action</div></li><li><b>action</b> : Ext.form.Action<div class="sub-desc">The Action class. The <a href="output/Ext.form.Action.html#Ext.form.Action-result">result</a> property of this object may be examined to perform custom postprocessing.</div></li></ul>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='failure'>
          <xs:annotation>
            <xs:documentation>
              The function to call when a failure packet was recieved, or when an error ocurred in the Ajax communication. The function is passed the following parameters:<ul class="mdetail-params"><li><b>form</b> : Ext.form.BasicForm<div class="sub-desc">The form that requested the action</div></li><li><b>action</b> : Ext.form.Action<div class="sub-desc">The Action class. If an Ajax error ocurred, the failure type will be in <a href="output/Ext.form.Action.html#Ext.form.Action-failureType">failureType</a>. The <a href="output/Ext.form.Action.html#Ext.form.Action-result">result</a> property of this object may be examined to perform custom postprocessing.</div></li></ul>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='method'>
          <xs:annotation>
            <xs:documentation>
              The HTTP method to use to access the requested URL. Defaults to the <a href="Ext.form.BasicForm.html">Ext.form.BasicForm</a>'s method, or if that is not specified, the underlying DOM form's method.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='params'>
          <xs:annotation>
            <xs:documentation>
              Extra parameter values to pass. These are added to the Form's <a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-baseParams">Ext.form.BasicForm.baseParams</a> and passed to the specified URL along with the Form's input fields. <p>Parameters are encoded as standard HTTP parameters using <a href="output/Ext.html#Ext-urlEncode">Ext.urlEncode</a>.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='reset'>
          <xs:annotation>
            <xs:documentation>
              When set to <tt><b>true</b></tt>, causes the Form to be <a href="Ext.form.BasicForm.reset.html">reset</a> on Action success. If specified, this happens <b>before</b> the <a href="output/Ext.form.Action.html#Ext.form.Action-success">success</a> callback is called and before the Form's <a href="Ext.form.BasicForm.actioncomplete.html">actioncomplete</a> event fires.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='scope'>
          <xs:annotation>
            <xs:documentation>
              The scope in which to call the callback functions (The <tt>this</tt> reference for the callback functions).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='submitEmptyText'>
          <xs:annotation>
            <xs:documentation>
              If set to <tt>true</tt>, the emptyText value will be sent with the form when it is submitted. Defaults to <tt>true</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='success'>
          <xs:annotation>
            <xs:documentation>
              The function to call when a valid success return packet is recieved. The function is passed the following parameters:<ul class="mdetail-params"><li><b>form</b> : Ext.form.BasicForm<div class="sub-desc">The form that requested the action</div></li><li><b>action</b> : Ext.form.Action<div class="sub-desc">The Action class. The <a href="output/Ext.form.Action.html#Ext.form.Action-result">result</a> property of this object may be examined to perform custom postprocessing.</div></li></ul>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='timeout'>
          <xs:annotation>
            <xs:documentation>
              The number of seconds to wait for a server response before failing with the <a href="output/Ext.form.Action.html#Ext.form.Action-failureType">failureType</a> as <a href="output/Ext.form.Action.html#Ext.form.Action-Action.CONNECT_FAILURE">Action.CONNECT_FAILURE</a>. If not specified, defaults to the configured <tt><a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-timeout">timeout</a></tt> of the <a href="Ext.form.BasicForm.html">form</a>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='url'>
          <xs:annotation>
            <xs:documentation>
              The URL that the Action is to invoke.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='waitMsg'>
          <xs:annotation>
            <xs:documentation>
              The message to be displayed by a call to <a href="output/Ext.MessageBox.html#Ext.MessageBox-wait">Ext.MessageBox.wait</a> during the time the action is being processed.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='waitTitle'>
          <xs:annotation>
            <xs:documentation>
              The title to be displayed by a call to <a href="output/Ext.MessageBox.html#Ext.MessageBox-wait">Ext.MessageBox.wait</a> during the time the action is being processed.
            </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='formaction' type='ec:ext.config.formaction'>
    <xs:annotation>
      <xs:documentation>
        The subclasses of this class provide actions to perform upon <a href="Ext.form.BasicForm.html">Form</a>s. <p>Instances of this class are only created by a <a href="Ext.form.BasicForm.html">Form</a> when the Form needs to perform an action such as submit or load. The Configuration options listed for this class are set through the Form's action methods: <a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-submit">submit</a>, <a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-load">load</a> and <a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-doAction">doAction</a></p><p>The instance of Action which performed the action is passed to the success and failure callbacks of the Form's action methods (<a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-submit">submit</a>, <a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-load">load</a> and <a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-doAction">doAction</a>), and to the <a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-actioncomplete">actioncomplete</a> and <a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-actionfailed">actionfailed</a> event handlers.</p> <p>This class represents the xtype 'formaction' and serves as a typed config object for constructor of class Action.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.form.Action
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.formlayout'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.anchorlayout'>
        <xs:sequence>
            <xs:element name='fieldTpl' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A <a href="output/Ext.Template.html#Ext.Template-compile">compile</a>d <a href="Ext.Template.html">Ext.Template</a> for rendering the fully wrapped, labeled and styled form Field. Defaults to:<br/><br/><pre><code>new Ext.Template( '&lt;div class="x-form-item {itemCls}" tabIndex="-1"&gt;', '&lt;label for="{id}" style="{labelStyle}" class="x-form-item-label"&gt;{label}{labelSeparator}&lt;/label&gt;', '&lt;div class="x-form-element" id="x-form-el-{id}" style="{elementStyle}"&gt;', '&lt;/div&gt;&lt;div class="{clearCls}"&gt;&lt;/div&gt;', '&lt;/div&gt;' ); </code></pre><p>This may be specified to produce a different DOM structure when rendering form Fields.</p><p>A description of the properties within the template follows:</p><div class="mdetail-params"><ul><li><b><tt>itemCls</tt></b> : String<div class="sub-desc">The CSS class applied to the outermost div wrapper that contains this field label and field element (the default class is <tt>'x-form-item'</tt> and <tt>itemCls</tt> will be added to that). If supplied, <tt>itemCls</tt> at the field level will override the default <tt>itemCls</tt> supplied at the container level.</div></li><li><b><tt>id</tt></b> : String<div class="sub-desc">The id of the Field</div></li><li><b><tt><a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-labelStyle">labelStyle</a></tt></b> : String<div class="sub-desc">A CSS style specification string to add to the field label for this field (defaults to <tt>''</tt> or the <a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-labelStyle">layout's value for <tt>labelStyle</tt></a>).</div></li><li><b><tt>label</tt></b> : String<div class="sub-desc">The text to display as the label for this field (defaults to <tt>''</tt>)</div></li><li><b><tt><a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-labelSeparator">labelSeparator</a></tt></b> : String<div class="sub-desc">The separator to display after the text of the label for this field (defaults to a colon <tt>':'</tt> or the <a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-labelSeparator">layout's value for labelSeparator</a>). To hide the separator use empty string ''.</div></li><li><b><tt>elementStyle</tt></b> : String<div class="sub-desc">The styles text for the input element's wrapper.</div></li><li><b><tt>clearCls</tt></b> : String<div class="sub-desc">The CSS class to apply to the special clearing div rendered directly after each form field wrapper (defaults to <tt>'x-form-clear-left'</tt>)</div></li></ul></div><p>Also see <tt><a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-getTemplateArgs">getTemplateArgs</a></tt></p>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='fieldTpl'>
          <xs:annotation>
            <xs:documentation>
              A <a href="output/Ext.Template.html#Ext.Template-compile">compile</a>d <a href="Ext.Template.html">Ext.Template</a> for rendering the fully wrapped, labeled and styled form Field. Defaults to:<br/><br/><pre><code>new Ext.Template( '&lt;div class="x-form-item {itemCls}" tabIndex="-1"&gt;', '&lt;label for="{id}" style="{labelStyle}" class="x-form-item-label"&gt;{label}{labelSeparator}&lt;/label&gt;', '&lt;div class="x-form-element" id="x-form-el-{id}" style="{elementStyle}"&gt;', '&lt;/div&gt;&lt;div class="{clearCls}"&gt;&lt;/div&gt;', '&lt;/div&gt;' ); </code></pre><p>This may be specified to produce a different DOM structure when rendering form Fields.</p><p>A description of the properties within the template follows:</p><div class="mdetail-params"><ul><li><b><tt>itemCls</tt></b> : String<div class="sub-desc">The CSS class applied to the outermost div wrapper that contains this field label and field element (the default class is <tt>'x-form-item'</tt> and <tt>itemCls</tt> will be added to that). If supplied, <tt>itemCls</tt> at the field level will override the default <tt>itemCls</tt> supplied at the container level.</div></li><li><b><tt>id</tt></b> : String<div class="sub-desc">The id of the Field</div></li><li><b><tt><a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-labelStyle">labelStyle</a></tt></b> : String<div class="sub-desc">A CSS style specification string to add to the field label for this field (defaults to <tt>''</tt> or the <a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-labelStyle">layout's value for <tt>labelStyle</tt></a>).</div></li><li><b><tt>label</tt></b> : String<div class="sub-desc">The text to display as the label for this field (defaults to <tt>''</tt>)</div></li><li><b><tt><a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-labelSeparator">labelSeparator</a></tt></b> : String<div class="sub-desc">The separator to display after the text of the label for this field (defaults to a colon <tt>':'</tt> or the <a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-labelSeparator">layout's value for labelSeparator</a>). To hide the separator use empty string ''.</div></li><li><b><tt>elementStyle</tt></b> : String<div class="sub-desc">The styles text for the input element's wrapper.</div></li><li><b><tt>clearCls</tt></b> : String<div class="sub-desc">The CSS class to apply to the special clearing div rendered directly after each form field wrapper (defaults to <tt>'x-form-clear-left'</tt>)</div></li></ul></div><p>Also see <tt><a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-getTemplateArgs">getTemplateArgs</a></tt></p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='labelSeparator'>
          <xs:annotation>
            <xs:documentation>
              See <a href="Ext.form.FormPanel.html">Ext.form.FormPanel</a>.<a href="output/Ext.form.FormPanel.html#Ext.form.FormPanel-labelSeparator">labelSeparator</a>. Configuration of this property at the <b>container</b> level takes precedence.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='trackLabels'>
          <xs:annotation>
            <xs:documentation>
              True to show/hide the field label when the field is hidden. Defaults to <tt>true</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='formlayout' type='ec:ext.config.formlayout' substitutionGroup='ec:anchorlayout'>
    <xs:annotation>
      <xs:documentation>
        This layout manager is specifically designed for rendering and managing child Components of <a href="Ext.form.FormPanel.html">forms</a>. It is responsible for rendering the labels of <a href="Ext.form.Field.html">Field</a>s. <p>This layout manager is used when a Container is configured with the <tt>layout:'form'</tt> <a href="output/Ext.Container.html#Ext.Container-layout">layout</a> config option, and should generally not need to be created directly via the new keyword. See <tt><b><a href="output/Ext.Container.html#Ext.Container-layout">Ext.Container.layout</a></b></tt> for additional details.</p><p>In an application, it will usually be preferable to use a <a href="Ext.form.FormPanel.html">FormPanel</a> (which is configured with FormLayout as its layout class by default) since it also provides built-in functionality for <a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-doAction">loading, validating and submitting</a> the form.</p><p>A <a href="Ext.Container.html">Container</a> <i>using</i> the FormLayout layout manager (e.g. <a href="Ext.form.FormPanel.html">Ext.form.FormPanel</a> or specifying <tt>layout:'form'</tt>) can also accept the following layout-specific config properties:</p><div class="mdetail-params"><ul><li><b><tt><a href="output/Ext.form.FormPanel.html#Ext.form.FormPanel-hideLabels">hideLabels</a></tt></b></li><li><b><tt><a href="output/Ext.form.FormPanel.html#Ext.form.FormPanel-labelAlign">labelAlign</a></tt></b></li><li><b><tt><a href="output/Ext.form.FormPanel.html#Ext.form.FormPanel-labelPad">labelPad</a></tt></b></li><li><b><tt><a href="output/Ext.form.FormPanel.html#Ext.form.FormPanel-labelSeparator">labelSeparator</a></tt></b></li><li><b><tt><a href="output/Ext.form.FormPanel.html#Ext.form.FormPanel-labelWidth">labelWidth</a></tt></b></li></ul></div><br/><br/> <p>Any Component (including Fields) managed by FormLayout accepts the following as a config option:</p><div class="mdetail-params"><ul><li><b><tt><a href="output/Ext.Component.html#Ext.Component-anchor">anchor</a></tt></b></li></ul></div><br/><br/> <p>Any Component managed by FormLayout may be rendered as a form field (with an associated label) by configuring it with a non-null <b><tt><a href="output/Ext.Component.html#Ext.Component-fieldLabel">fieldLabel</a></tt></b>. Components configured in this way may be configured with the following options which affect the way the FormLayout renders them:</p><div class="mdetail-params"><ul><li><b><tt><a href="output/Ext.Component.html#Ext.Component-clearCls">clearCls</a></tt></b></li><li><b><tt><a href="output/Ext.Component.html#Ext.Component-fieldLabel">fieldLabel</a></tt></b></li><li><b><tt><a href="output/Ext.Component.html#Ext.Component-hideLabel">hideLabel</a></tt></b></li><li><b><tt><a href="output/Ext.Component.html#Ext.Component-itemCls">itemCls</a></tt></b></li><li><b><tt><a href="output/Ext.Component.html#Ext.Component-labelSeparator">labelSeparator</a></tt></b></li><li><b><tt><a href="output/Ext.Component.html#Ext.Component-labelStyle">labelStyle</a></tt></b></li></ul></div><br/><br/> <p>Example usage:</p><pre><code>// Required if showing validation messages Ext.QuickTips.init(); // While you can create a basic Panel with layout:'form', practically // you should usually use a FormPanel to also get its form functionality // since it already creates a FormLayout internally. var form = new Ext.form.FormPanel({ title: 'Form Layout', bodyStyle: 'padding:15px', width: 350, defaultType: 'textfield', defaults: { // applied to each contained item width: 230, msgTarget: 'side' }, items: [{ fieldLabel: 'First Name', name: 'first', allowBlank: false, <a href="output/Ext.Component.html#Ext.Component-labelSeparator">labelSeparator</a>: ':' // override labelSeparator layout config },{ fieldLabel: 'Last Name', name: 'last' },{ fieldLabel: 'Email', name: 'email', vtype:'email' }, { xtype: 'textarea', hideLabel: true, // override hideLabels layout config name: 'msg', anchor: '100% -53' } ], buttons: [ {text: 'Save'}, {text: 'Cancel'} ], layoutConfig: { <a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-labelSeparator">labelSeparator</a>: '~' // superseded by assignment below }, // config options applicable to container when layout='form': hideLabels: false, labelAlign: 'left', // or 'right' or 'top' <a href="output/Ext.form.FormPanel.html#Ext.form.FormPanel-labelSeparator">labelSeparator</a>: '&gt;&gt;', // takes precedence over layoutConfig value labelWidth: 65, // defaults to 100 labelPad: 8 // defaults to 5, must specify labelWidth to be honored }); </code></pre> <p>This class serves as a typed config object for constructor of class FormLayout.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.layout.FormLayout
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.fx'>
    <xs:complexContent>
      <xs:extension base='exml:base'>
        <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='fx' type='ec:ext.config.fx'>
    <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='ext.config.grid'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.panel'>
        <xs:sequence>
            <xs:element name='cm' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Shorthand for <tt><a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-colModel">colModel</a></tt>.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='colModel' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The <a href="Ext.grid.ColumnModel.html">Ext.grid.ColumnModel</a> to use when rendering the grid (required).
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='columns' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  An array of <a href="Ext.grid.Column.html">columns</a> to auto create a <a href="Ext.grid.ColumnModel.html">Ext.grid.ColumnModel</a>. The ColumnModel may be explicitly created via the <tt><a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-colModel">colModel</a></tt> configuration property.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <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='loadMask' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  An <a href="Ext.LoadMask.html">Ext.LoadMask</a> config or true to mask the grid while loading. Defaults to <code>false</code>.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='selModel' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Any subclass of <a href="Ext.grid.AbstractSelectionModel.html">Ext.grid.AbstractSelectionModel</a> that will provide the selection model for the grid (defaults to <a href="Ext.grid.RowSelectionModel.html">Ext.grid.RowSelectionModel</a> if not specified).
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='sm' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Shorthand for <tt><a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-selModel">selModel</a></tt>.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='store' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The <a href="Ext.data.Store.html">Ext.data.Store</a> the grid should use as its data source (required).
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='view' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The <a href="Ext.grid.GridView.html">Ext.grid.GridView</a> used by the grid. This can be set before a call to <a href="output/Ext.Component.html#Ext.Component-render">render()</a>.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='viewConfig' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A config object that will be applied to the grid's UI view. Any of the config options available for <a href="Ext.grid.GridView.html">Ext.grid.GridView</a> can be specified here. This option is ignored if <tt><a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-view">view</a></tt> is specified.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='autoExpandColumn'>
          <xs:annotation>
            <xs:documentation>
              The <tt><a href="output/Ext.grid.Column.html#Ext.grid.Column-id">id</a></tt> of a <a href="Ext.grid.Column.html">column</a> in this grid that should expand to fill unused space. This value specified here can not be <tt>0</tt>. <br/><p><b>Note</b>: If the Grid's <a href="Ext.grid.GridView.html">view</a> is configured with <tt><a href="output/Ext.grid.GridView.html#Ext.grid.GridView-forceFit">forceFit</a>=true</tt> the <tt>autoExpandColumn</tt> is ignored. See <a href="Ext.grid.Column.html">Ext.grid.Column</a>.<tt><a href="output/Ext.grid.Column.html#Ext.grid.Column-width">width</a></tt> for additional details.</p><p>See <tt><a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-autoExpandMax">autoExpandMax</a></tt> and <tt><a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-autoExpandMin">autoExpandMin</a></tt> also.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='autoExpandMax'>
          <xs:annotation>
            <xs:documentation>
              The maximum width the <tt><a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-autoExpandColumn">autoExpandColumn</a></tt> can have (if enabled). Defaults to <tt>1000</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='autoExpandMin'>
          <xs:annotation>
            <xs:documentation>
              The minimum width the <tt><a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-autoExpandColumn">autoExpandColumn</a></tt> can have (if enabled). Defaults to <tt>50</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='cm'>
          <xs:annotation>
            <xs:documentation>
              Shorthand for <tt><a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-colModel">colModel</a></tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='colModel'>
          <xs:annotation>
            <xs:documentation>
              The <a href="Ext.grid.ColumnModel.html">Ext.grid.ColumnModel</a> to use when rendering the grid (required).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='columnLines'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> to add css for column separation lines. Default is <tt>false</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='columns'>
          <xs:annotation>
            <xs:documentation>
              An array of <a href="Ext.grid.Column.html">columns</a> to auto create a <a href="Ext.grid.ColumnModel.html">Ext.grid.ColumnModel</a>. The ColumnModel may be explicitly created via the <tt><a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-colModel">colModel</a></tt> configuration property.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='ddGroup'>
          <xs:annotation>
            <xs:documentation>
              The DD group this GridPanel belongs to. Defaults to <tt>'GridDD'</tt> if not specified.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='ddText'>
          <xs:annotation>
            <xs:documentation>
              Configures the text in the drag proxy. Defaults to: <pre><code>ddText : '{0} selected row{1}' </code></pre><tt>{0}</tt> is replaced with the number of selected rows.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='deferRowRender'>
          <xs:annotation>
            <xs:documentation>
              Defaults to <tt>true</tt> to enable deferred row rendering. <p>This allows the GridPanel to be initially rendered empty, with the expensive update of the row structure deferred so that layouts with GridPanels appear more quickly.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='disableSelection'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> to disable selections in the grid. Defaults to <tt>false</tt>. <p>Ignored if a <a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-selModel">SelectionModel</a> is specified.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='enableColumnHide'>
          <xs:annotation>
            <xs:documentation>
              Defaults to <tt>true</tt> to enable <a href="output/Ext.grid.Column.html#Ext.grid.Column-hidden">hiding of columns</a> with the <a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-enableHdMenu">header menu</a>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='enableColumnMove'>
          <xs:annotation>
            <xs:documentation>
              Defaults to <tt>true</tt> to enable drag and drop reorder of columns. <tt>false</tt> to turn off column reordering via drag drop.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='enableColumnResize'>
          <xs:annotation>
            <xs:documentation>
              <tt>false</tt> to turn off column resizing for the whole grid. Defaults to <tt>true</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='enableDragDrop'>
          <xs:annotation>
            <xs:documentation>
              Enables dragging of the selected rows of the GridPanel. Defaults to <tt>false</tt>. <p>Setting this to <b><tt>true</tt></b> causes this GridPanel's <a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-getView">GridView</a> to create an instance of <a href="Ext.grid.GridDragZone.html">Ext.grid.GridDragZone</a>. <b>Note</b>: this is available only <b>after</b> the Grid has been rendered as the GridView's <tt><a href="output/Ext.grid.GridView.html#Ext.grid.GridView-dragZone">dragZone</a></tt> property.</p><p>A cooperating <a href="Ext.dd.DropZone.html">DropZone</a> must be created who's implementations of <a href="output/Ext.dd.DropZone.html#Ext.dd.DropZone-onNodeEnter">onNodeEnter</a>, <a href="output/Ext.dd.DropZone.html#Ext.dd.DropZone-onNodeOver">onNodeOver</a>, <a href="output/Ext.dd.DropZone.html#Ext.dd.DropZone-onNodeOut">onNodeOut</a> and <a href="output/Ext.dd.DropZone.html#Ext.dd.DropZone-onNodeDrop">onNodeDrop</a> are able to process the <a href="output/Ext.grid.GridDragZone.html#Ext.grid.GridDragZone-getDragData">data</a> which is provided.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='enableHdMenu'>
          <xs:annotation>
            <xs:documentation>
              Defaults to <tt>true</tt> to enable the drop down button for menu in the headers.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='hideHeaders'>
          <xs:annotation>
            <xs:documentation>
              True to hide the grid's header. Defaults to <code>false</code>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='loadMask'>
          <xs:annotation>
            <xs:documentation>
              An <a href="Ext.LoadMask.html">Ext.LoadMask</a> config or true to mask the grid while loading. Defaults to <code>false</code>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='maxHeight'>
          <xs:annotation>
            <xs:documentation>
              Sets the maximum height of the grid - ignored if <tt>autoHeight</tt> is not on.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='minColumnWidth'>
          <xs:annotation>
            <xs:documentation>
              The minimum width a column can be resized to. Defaults to <tt>25</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='selModel'>
          <xs:annotation>
            <xs:documentation>
              Any subclass of <a href="Ext.grid.AbstractSelectionModel.html">Ext.grid.AbstractSelectionModel</a> that will provide the selection model for the grid (defaults to <a href="Ext.grid.RowSelectionModel.html">Ext.grid.RowSelectionModel</a> if not specified).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='sm'>
          <xs:annotation>
            <xs:documentation>
              Shorthand for <tt><a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-selModel">selModel</a></tt>.
            </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 grid should use as its data source (required).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='stripeRows'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> to stripe the rows. Default is <tt>false</tt>. <p>This causes the CSS class <tt><b>x-grid3-row-alt</b></tt> to be added to alternate rows of the grid. A default CSS rule is provided which sets a background colour, but you can override this with a rule which either overrides the <b>background-color</b> style using the '!important' modifier, or which uses a CSS selector of higher specificity.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='trackMouseOver'>
          <xs:annotation>
            <xs:documentation>
              True to highlight rows when the mouse is over. Default is <tt>true</tt> for GridPanel, but <tt>false</tt> for EditorGridPanel.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='view'>
          <xs:annotation>
            <xs:documentation>
              The <a href="Ext.grid.GridView.html">Ext.grid.GridView</a> used by the grid. This can be set before a call to <a href="output/Ext.Component.html#Ext.Component-render">render()</a>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='viewConfig'>
          <xs:annotation>
            <xs:documentation>
              A config object that will be applied to the grid's UI view. Any of the config options available for <a href="Ext.grid.GridView.html">Ext.grid.GridView</a> can be specified here. This option is ignored if <tt><a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-view">view</a></tt> is specified.
            </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='grid' type='ec:ext.config.grid' substitutionGroup='ec:panel'>
    <xs:annotation>
      <xs:documentation>
        This class represents the primary interface of a component based grid control to represent data in a tabular format of rows and columns. The GridPanel is composed of the following: <div class="mdetail-params"><ul><li><b><a href="Ext.data.Store.html">Store</a></b> : The Model holding the data records (rows)</li><li><b><a href="Ext.grid.ColumnModel.html">Column model</a></b> : Column makeup</li><li><b><a href="Ext.grid.GridView.html">View</a></b> : Encapsulates the user interface</li><li><b><a href="Ext.grid.AbstractSelectionModel.html">selection model</a></b> : Selection behavior</li></ul></div><p>Example usage:</p><pre><code>var grid = new Ext.grid.GridPanel({ <a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-store">store</a>: new <a href="Ext.data.Store.html">Ext.data.Store</a>({ <a href="output/Ext.data.Store.html#Ext.data.Store-autoDestroy">autoDestroy</a>: true, <a href="output/Ext.data.Store.html#Ext.data.Store-reader">reader</a>: reader, <a href="output/Ext.data.Store.html#Ext.data.Store-data">data</a>: xg.dummyData }), <a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-colModel">colModel</a>: new <a href="Ext.grid.ColumnModel.html">Ext.grid.ColumnModel</a>({ <a href="output/Ext.grid.ColumnModel.html#Ext.grid.ColumnModel-defaults">defaults</a>: { width: 120, sortable: true }, <a href="output/Ext.grid.ColumnModel.html#Ext.grid.ColumnModel-columns">columns</a>: [ {id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'}, {header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price'}, {header: 'Change', dataIndex: 'change'}, {header: '% Change', dataIndex: 'pctChange'}, // instead of specifying renderer: Ext.util.Format.dateRenderer('m/d/Y') use xtype { header: 'Last Updated', width: 135, dataIndex: 'lastChange', xtype: 'datecolumn', format: 'M d, Y' } ] }), <a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-viewConfig">viewConfig</a>: { <a href="output/Ext.grid.GridView.html#Ext.grid.GridView-forceFit">forceFit</a>: true, // Return CSS class to apply to rows depending upon data values <a href="output/Ext.grid.GridView.html#Ext.grid.GridView-getRowClass">getRowClass</a>: function(record, index) { var c = record.<a href="output/Ext.data.Record.html#Ext.data.Record-get">get</a>('change'); if (c &lt; 0) { return 'price-fall'; } else if (c &gt; 0) { return 'price-rise'; } } }, <a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-sm">sm</a>: new Ext.grid.RowSelectionModel({singleSelect:true}), width: 600, height: 300, frame: true, title: 'Framed with Row Selection and Horizontal Scrolling', iconCls: 'icon-grid' }); </code></pre><p style="font-weight: bold"><u>Notes:</u></p><div class="mdetail-params"><ul><li>Although this class inherits many configuration options from base classes, some of them (such as autoScroll, autoWidth, layout, items, etc) are not used by this class, and will have no effect.</li><li>A grid <b>requires</b> a width in which to scroll its columns, and a height in which to scroll its rows. These dimensions can either be set explicitly through the <tt><a href="output/Ext.BoxComponent.html#Ext.BoxComponent-height">height</a></tt> and <tt><a href="output/Ext.BoxComponent.html#Ext.BoxComponent-width">width</a></tt> configuration options or implicitly set by using the grid as a child item of a <a href="Ext.Container.html">Container</a> which will have a <a href="output/Ext.Container.html#Ext.Container-layout">layout manager</a> provide the sizing of its child items (for example the Container of the Grid may specify <tt><a href="output/Ext.Container.html#Ext.Container-layout">layout</a>:'fit'</tt>).</li><li>To access the data in a Grid, it is necessary to use the data model encapsulated by the <a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-store">Store</a>. See the <a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-cellclick">cellclick</a> event for more details.</li></ul></div> <p>This class represents the xtype 'grid' and serves as a typed config object for constructor of class GridPanel.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.grid.GridPanel
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.gridcolumn'>
    <xs:complexContent>
      <xs:extension base='exml:base'>
        <xs:sequence>
            <xs:element name='editor' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The <a href="Ext.form.Field.html">Ext.form.Field</a> to use when editing values in this column if editing is supported by the grid. See <tt><a href="output/Ext.grid.Column.html#Ext.grid.Column-editable">editable</a></tt> also.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='groupRenderer' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Optional. If the grid is being rendered by an <a href="Ext.grid.GroupingView.html">Ext.grid.GroupingView</a>, this option may be used to specify the function used to format the grouping field value for display in the group <a href="output/Ext.grid.Column.html#Ext.grid.Column-groupName">header</a>. If a <tt><b>groupRenderer</b></tt> is not specified, the configured <tt><b><a href="output/Ext.grid.Column.html#Ext.grid.Column-renderer">renderer</a></b></tt> will be called; if a <tt><b><a href="output/Ext.grid.Column.html#Ext.grid.Column-renderer">renderer</a></b></tt> is also not specified the new value of the group field will be used. <p>The called function (either the <tt><b>groupRenderer</b></tt> or <tt><b><a href="output/Ext.grid.Column.html#Ext.grid.Column-renderer">renderer</a></b></tt>) will be passed the following parameters:</p><div class="mdetail-params"><ul><li><b>v</b> : Object<p class="sub-desc">The new value of the group field.</p></li><li><b>unused</b> : undefined<p class="sub-desc">Unused parameter.</p></li><li><b>r</b> : Ext.data.Record<p class="sub-desc">The Record providing the data for the row which caused group change.</p></li><li><b>rowIndex</b> : Number<p class="sub-desc">The row index of the Record which caused group change.</p></li><li><b>colIndex</b> : Number<p class="sub-desc">The column index of the group field.</p></li><li><b>ds</b> : Ext.data.Store<p class="sub-desc">The Store which is providing the data Model.</p></li></ul></div><br/><br/> <p>The function should return a string value.</p>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='renderer' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  For an alternative to specifying a renderer see <code><a href="output/Ext.grid.Column.html#Ext.grid.Column-xtype">xtype</a></code> <p>Optional. A renderer is an 'interceptor' method which can be used transform data (value, appearance, etc.) before it is rendered). This may be specified in either of three ways:</p><div class="mdetail-params"><ul><li>A renderer function used to return HTML markup for a cell given the cell's data value.</li><li>A string which references a property name of the <a href="Ext.util.Format.html">Ext.util.Format</a> class which provides a renderer function.</li><li>An object specifying both the renderer function, and its execution scope (<tt><b>this</b></tt> reference) e.g.:<pre style="margin-left:1.2em"><code>{ fn: this.gridRenderer, scope: this } </code></pre></li></ul></div>If not specified, the default renderer uses the raw data value.<br/><br/> <p>For information about the renderer function (passed parameters, etc.), see <a href="output/Ext.grid.ColumnModel.html#Ext.grid.ColumnModel-setRenderer">Ext.grid.ColumnModel.setRenderer</a>. An example of specifying renderer function inline:</p><pre><code>var companyColumn = { header: 'Company Name', dataIndex: 'company', renderer: function(value, metaData, record, rowIndex, colIndex, store) { // provide the logic depending on business rules // name of your own choosing to manipulate the cell depending upon // the data in the underlying Record object. if (value == 'whatever') { //metaData.css : String : A CSS class name to add to the TD element of the cell. //metaData.attr : String : An html attribute definition string to apply to // the data container element within the table // cell (e.g. 'style="color:red;"'). metaData.css = 'name-of-css-class-you-will-define'; } return value; } } </code></pre>See also <a href="output/Ext.grid.Column.html#Ext.grid.Column-scope">scope</a>.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <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 to execute the renderer. Defaults to the Column configuration object.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='align'>
          <xs:annotation>
            <xs:documentation>
              Set the CSS text-align property of the column. Defaults to undefined.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='css'>
          <xs:annotation>
            <xs:documentation>
              An inline style definition string which is applied to all table cells in the column (excluding headers). Defaults to undefined.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='dataIndex'>
          <xs:annotation>
            <xs:documentation>
              <b>Required</b>. The name of the field in the grid's <a href="Ext.data.Store.html">Ext.data.Store</a>'s <a href="Ext.data.Record.html">Ext.data.Record</a> definition from which to draw the column's value.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='editable'>
          <xs:annotation>
            <xs:documentation>
              Defaults to <tt>true</tt>, enabling the configured <tt><a href="output/Ext.grid.Column.html#Ext.grid.Column-editor">editor</a></tt>. Set to <tt>false</tt> to initially disable editing on this column. The initial configuration may be dynamically altered using <a href="Ext.grid.ColumnModel.html">Ext.grid.ColumnModel</a>.<a href="output/Ext.grid.ColumnModel.html#Ext.grid.ColumnModel-setEditable">setEditable()</a>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='editor'>
          <xs:annotation>
            <xs:documentation>
              The <a href="Ext.form.Field.html">Ext.form.Field</a> to use when editing values in this column if editing is supported by the grid. See <tt><a href="output/Ext.grid.Column.html#Ext.grid.Column-editable">editable</a></tt> also.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='emptyGroupText'>
          <xs:annotation>
            <xs:documentation>
              If the grid is being rendered by an <a href="Ext.grid.GroupingView.html">Ext.grid.GroupingView</a>, this option may be used to specify the text to display when there is an empty group value. Defaults to the <a href="Ext.grid.GroupingView.html">Ext.grid.GroupingView</a>.<a href="output/Ext.grid.GroupingView.html#Ext.grid.GroupingView-emptyGroupText">emptyGroupText</a>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='fixed'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> if the column width cannot be changed. Defaults to <tt>false</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='groupName'>
          <xs:annotation>
            <xs:documentation>
              If the grid is being rendered by an <a href="Ext.grid.GroupingView.html">Ext.grid.GroupingView</a>, this option may be used to specify the text with which to prefix the group field value in the group header line. See also <a href="output/Ext.grid.Column.html#Ext.grid.Column-groupRenderer">groupRenderer</a> and <a href="Ext.grid.GroupingView.html">Ext.grid.GroupingView</a>.<a href="output/Ext.grid.GroupingView.html#Ext.grid.GroupingView-showGroupName">showGroupName</a>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='groupRenderer'>
          <xs:annotation>
            <xs:documentation>
              Optional. If the grid is being rendered by an <a href="Ext.grid.GroupingView.html">Ext.grid.GroupingView</a>, this option may be used to specify the function used to format the grouping field value for display in the group <a href="output/Ext.grid.Column.html#Ext.grid.Column-groupName">header</a>. If a <tt><b>groupRenderer</b></tt> is not specified, the configured <tt><b><a href="output/Ext.grid.Column.html#Ext.grid.Column-renderer">renderer</a></b></tt> will be called; if a <tt><b><a href="output/Ext.grid.Column.html#Ext.grid.Column-renderer">renderer</a></b></tt> is also not specified the new value of the group field will be used. <p>The called function (either the <tt><b>groupRenderer</b></tt> or <tt><b><a href="output/Ext.grid.Column.html#Ext.grid.Column-renderer">renderer</a></b></tt>) will be passed the following parameters:</p><div class="mdetail-params"><ul><li><b>v</b> : Object<p class="sub-desc">The new value of the group field.</p></li><li><b>unused</b> : undefined<p class="sub-desc">Unused parameter.</p></li><li><b>r</b> : Ext.data.Record<p class="sub-desc">The Record providing the data for the row which caused group change.</p></li><li><b>rowIndex</b> : Number<p class="sub-desc">The row index of the Record which caused group change.</p></li><li><b>colIndex</b> : Number<p class="sub-desc">The column index of the group field.</p></li><li><b>ds</b> : Ext.data.Store<p class="sub-desc">The Store which is providing the data Model.</p></li></ul></div><br/><br/> <p>The function should return a string value.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='groupable'>
          <xs:annotation>
            <xs:documentation>
              If the grid is being rendered by an <a href="Ext.grid.GroupingView.html">Ext.grid.GroupingView</a>, this option may be used to disable the header menu item to group by the column selected. Defaults to <tt>true</tt>, which enables the header menu group option. Set to <tt>false</tt> to disable (but still show) the group option in the header menu for the column. See also <code><a href="output/Ext.grid.Column.html#Ext.grid.Column-groupName">groupName</a></code>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='header'>
          <xs:annotation>
            <xs:documentation>
              The header text to be used as innerHTML (html tags are accepted) to display in the Grid view. <b>Note</b>: to have a clickable header with no text displayed use <tt>'&amp;#160;'</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='hidden'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> to initially hide this column. Defaults to <tt>false</tt>. A hidden column <a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-enableColumnHide">may be shown via the header row menu</a>. If a column is never to be shown, simply do not include this column in the Column Model at all.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='hideable'>
          <xs:annotation>
            <xs:documentation>
              Specify as <tt>false</tt> to prevent the user from hiding this column (defaults to true). To disallow column hiding globally for all columns in the grid, use <a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-enableColumnHide">Ext.grid.GridPanel.enableColumnHide</a> instead.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='id'>
          <xs:annotation>
            <xs:documentation>
              A name which identifies this column (defaults to the column's initial ordinal position.) The <tt>id</tt> is used to create a CSS <b>class</b> name which is applied to all table cells (including headers) in that column (in this context the <tt>id</tt> does not need to be unique). The class name takes the form of <pre>x-grid3-td-<b>id</b></pre>Header cells will also receive this class name, but will also have the class <pre>x-grid3-hd</pre>So, to target header cells, use CSS selectors such as:<pre>.x-grid3-hd-row .x-grid3-td-<b>id</b></pre>The <a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-autoExpandColumn">Ext.grid.GridPanel.autoExpandColumn</a> grid config option references the column via this unique identifier.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='isColumn'>
          <xs:annotation>
            <xs:documentation>
              Used by ColumnModel setConfig method to avoid reprocessing a Column if <code>isColumn</code> is not set ColumnModel will recreate a new Ext.grid.Column Defaults to true.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='menuDisabled'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> to disable the column menu. Defaults to <tt>false</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='renderer'>
          <xs:annotation>
            <xs:documentation>
              For an alternative to specifying a renderer see <code><a href="output/Ext.grid.Column.html#Ext.grid.Column-xtype">xtype</a></code> <p>Optional. A renderer is an 'interceptor' method which can be used transform data (value, appearance, etc.) before it is rendered). This may be specified in either of three ways:</p><div class="mdetail-params"><ul><li>A renderer function used to return HTML markup for a cell given the cell's data value.</li><li>A string which references a property name of the <a href="Ext.util.Format.html">Ext.util.Format</a> class which provides a renderer function.</li><li>An object specifying both the renderer function, and its execution scope (<tt><b>this</b></tt> reference) e.g.:<pre style="margin-left:1.2em"><code>{ fn: this.gridRenderer, scope: this } </code></pre></li></ul></div>If not specified, the default renderer uses the raw data value.<br/><br/> <p>For information about the renderer function (passed parameters, etc.), see <a href="output/Ext.grid.ColumnModel.html#Ext.grid.ColumnModel-setRenderer">Ext.grid.ColumnModel.setRenderer</a>. An example of specifying renderer function inline:</p><pre><code>var companyColumn = { header: 'Company Name', dataIndex: 'company', renderer: function(value, metaData, record, rowIndex, colIndex, store) { // provide the logic depending on business rules // name of your own choosing to manipulate the cell depending upon // the data in the underlying Record object. if (value == 'whatever') { //metaData.css : String : A CSS class name to add to the TD element of the cell. //metaData.attr : String : An html attribute definition string to apply to // the data container element within the table // cell (e.g. 'style="color:red;"'). metaData.css = 'name-of-css-class-you-will-define'; } return value; } } </code></pre>See also <a href="output/Ext.grid.Column.html#Ext.grid.Column-scope">scope</a>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='resizable'>
          <xs:annotation>
            <xs:documentation>
              <tt>false</tt> to disable column resizing. Defaults to <tt>true</tt>.
            </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 to execute the renderer. Defaults to the Column configuration object.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='sortable'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> if sorting is to be allowed on this column. Defaults to the value of the <code><a href="output/Ext.grid.ColumnModel.html#Ext.grid.ColumnModel-defaultSortable">Ext.grid.ColumnModel.defaultSortable</a></code> property. Whether local/remote sorting is used is specified in <code><a href="output/Ext.data.Store.html#Ext.data.Store-remoteSort">Ext.data.Store.remoteSort</a></code>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='tooltip'>
          <xs:annotation>
            <xs:documentation>
              A text string to use as the column header's tooltip. If Quicktips are enabled, this value will be used as the text of the quick tip, otherwise it will be set as the header's HTML title attribute. Defaults to ''.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='width'>
          <xs:annotation>
            <xs:documentation>
              The initial width in pixels of the column. The width of each column can also be affected if any of the following are configured: <div class="mdetail-params"><ul><li><a href="Ext.grid.GridPanel.html">Ext.grid.GridPanel</a>.<tt><a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-autoExpandColumn">autoExpandColumn</a></tt></li><li><a href="Ext.grid.GridView.html">Ext.grid.GridView</a>.<tt><a href="output/Ext.grid.GridView.html#Ext.grid.GridView-forceFit">forceFit</a></tt> <div class="sub-desc"><p>By specifying <tt>forceFit:true</tt>, <a href="output/Ext.grid.Column.html#Ext.grid.Column-fixed">non-fixed width</a> columns will be re-proportioned (based on the relative initial widths) to fill the width of the grid so that no horizontal scrollbar is shown.</p></div></li><li><a href="Ext.grid.GridView.html">Ext.grid.GridView</a>.<tt><a href="output/Ext.grid.GridView.html#Ext.grid.GridView-autoFill">autoFill</a></tt></li><li><a href="Ext.grid.GridPanel.html">Ext.grid.GridPanel</a>.<tt><a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-minColumnWidth">minColumnWidth</a></tt></li><li style="list-style: none"><br/><p><b>Note</b>: when the width of each column is determined, a space on the right side is reserved for the vertical scrollbar. The <a href="Ext.grid.GridView.html">Ext.grid.GridView</a>.<tt><a href="output/Ext.grid.GridView.html#Ext.grid.GridView-scrollOffset">scrollOffset</a></tt> can be modified to reduce or eliminate the reserved offset.</p></li></ul></div>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='xtype'>
          <xs:annotation>
            <xs:documentation>
              A String which references a predefined <a href="Ext.grid.Column.html">Ext.grid.Column</a> subclass type which is preconfigured with an appropriate <code><a href="output/Ext.grid.Column.html#Ext.grid.Column-renderer">renderer</a></code> to be easily configured into a ColumnModel. The predefined <a href="Ext.grid.Column.html">Ext.grid.Column</a> subclass types are: <div class="mdetail-params"><ul><li><b><tt>gridcolumn</tt></b> : <a href="Ext.grid.Column.html">Ext.grid.Column</a> (<b>Default</b>)</li><li><b><tt>booleancolumn</tt></b> : <a href="Ext.grid.BooleanColumn.html">Ext.grid.BooleanColumn</a></li><li><b><tt>numbercolumn</tt></b> : <a href="Ext.grid.NumberColumn.html">Ext.grid.NumberColumn</a></li><li><b><tt>datecolumn</tt></b> : <a href="Ext.grid.DateColumn.html">Ext.grid.DateColumn</a></li><li><b><tt>templatecolumn</tt></b> : <a href="Ext.grid.TemplateColumn.html">Ext.grid.TemplateColumn</a></li></ul></div><p>Configuration properties for the specified <code>xtype</code> may be specified with the Column configuration properties, for example:</p><pre><code>var grid = new Ext.grid.GridPanel({ ... columns: [{ header: 'Last Updated', dataIndex: 'lastChange', width: 85, sortable: true, //renderer: Ext.util.Format.dateRenderer('m/d/Y'), xtype: 'datecolumn', // use xtype instead of renderer format: 'M/d/Y' // configuration property for <a href="Ext.grid.DateColumn.html">Ext.grid.DateColumn</a> }, { ... }] }); </code></pre>
            </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='gridcolumn' type='ec:ext.config.gridcolumn'>
    <xs:annotation>
      <xs:documentation>
        This class encapsulates column configuration data to be used in the initialization of a <a href="Ext.grid.ColumnModel.html">ColumnModel</a>. <p>While subclasses are provided to render data in different ways, this class renders a passed data field unchanged and is usually used for textual columns.</p> <p>This class represents the xtype 'gridcolumn' and serves as a typed config object for constructor of class Column.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.grid.Column
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.griddragzone'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.dragzone'>
        <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='griddragzone' type='ec:ext.config.griddragzone' substitutionGroup='ec:dragzone'>
    <xs:annotation>
      <xs:documentation>
        A customized implementation of a <a href="Ext.dd.DragZone.html">DragZone</a> which provides default implementations of two of the template methods of DragZone to enable dragging of the selected rows of a GridPanel. <p>A cooperating <a href="Ext.dd.DropZone.html">DropZone</a> must be created who's template method implementations of <a href="output/Ext.dd.DropZone.html#Ext.dd.DropZone-onNodeEnter">onNodeEnter</a>, <a href="output/Ext.dd.DropZone.html#Ext.dd.DropZone-onNodeOver">onNodeOver</a>, <a href="output/Ext.dd.DropZone.html#Ext.dd.DropZone-onNodeOut">onNodeOut</a> and <a href="output/Ext.dd.DropZone.html#Ext.dd.DropZone-onNodeDrop">onNodeDrop</a></p>are able to process the <a href="output/Ext.grid.GridDragZone.html#Ext.grid.GridDragZone-getDragData">data</a> which is provided. <p>This class serves as a typed config object for constructor of class GridDragZone.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.grid.GridDragZone
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.gridview'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.observable'>
        <xs:sequence>
            <xs:element name='sortClasses' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The CSS classes applied to a header when it is sorted. (defaults to <tt>['sort-asc', 'sort-desc']</tt>)
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <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='autoFill'>
          <xs:annotation>
            <xs:documentation>
              Defaults to <tt>false</tt>. Specify <tt>true</tt> to have the column widths re-proportioned when the grid is <b>initially rendered</b>. The <a href="output/Ext.grid.Column.html#Ext.grid.Column-width">initially configured width</a> of each column will be adjusted to fit the grid width and prevent horizontal scrolling. If columns are later resized (manually or programmatically), the other columns in the grid will <b>not</b> be resized to fit the grid width. See <tt><a href="output/Ext.grid.GridView.html#Ext.grid.GridView-forceFit">forceFit</a></tt> also.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='cellSelector'>
          <xs:annotation>
            <xs:documentation>
              The selector used to find cells internally (defaults to <tt>'td.x-grid3-cell'</tt>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='cellSelectorDepth'>
          <xs:annotation>
            <xs:documentation>
              The number of levels to search for cells in event delegation (defaults to <tt>4</tt>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='columnsText'>
          <xs:annotation>
            <xs:documentation>
              The text displayed in the 'Columns' menu item (defaults to <tt>'Columns'</tt>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='deferEmptyText'>
          <xs:annotation>
            <xs:documentation>
              True to defer <tt><a href="output/Ext.grid.GridView.html#Ext.grid.GridView-emptyText">emptyText</a></tt> being applied until the store's first load (defaults to <tt>true</tt>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='emptyText'>
          <xs:annotation>
            <xs:documentation>
              Default text (html tags are accepted) to display in the grid body when no rows are available (defaults to ''). This value will be used to update the <tt><a href="output/Ext.grid.GridView.html#Ext.grid.GridView-mainBody">mainBody</a></tt>: <pre><code> this.mainBody.update('&lt;div class="x-grid-empty"&gt;' + this.emptyText + '&lt;/div&gt;'); </code></pre>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='enableRowBody'>
          <xs:annotation>
            <xs:documentation>
              True to add a second TR element per row that can be used to provide a row body that spans beneath the data row. Use the <a href="output/Ext.grid.GridView.html#Ext.grid.GridView-getRowClass">getRowClass</a> method's rowParams config to customize the row body.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='forceFit'>
          <xs:annotation>
            <xs:documentation>
              Defaults to <tt>false</tt>. Specify <tt>true</tt> to have the column widths re-proportioned at <b>all times</b>. <p>The <a href="output/Ext.grid.Column.html#Ext.grid.Column-width">initially configured width</a> of each column will be adjusted to fit the grid width and prevent horizontal scrolling. If columns are later resized (manually or programmatically), the other columns in the grid <b>will</b> be resized to fit the grid width.</p><p>Columns which are configured with <code>fixed: true</code> are omitted from being resized.</p><p>See <tt><a href="output/Ext.grid.GridView.html#Ext.grid.GridView-autoFill">autoFill</a></tt>.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='headerMenuOpenCls'>
          <xs:annotation>
            <xs:documentation>
              The CSS class to add to the header cell when its menu is visible. Defaults to 'x-grid3-hd-menu-open'
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='headersDisabled'>
          <xs:annotation>
            <xs:documentation>
              True to disable the grid column headers (defaults to <tt>false</tt>). Use the <a href="Ext.grid.ColumnModel.html">ColumnModel</a> <tt><a href="output/Ext.grid.ColumnModel.html#Ext.grid.ColumnModel-menuDisabled">menuDisabled</a></tt> config to disable the <i>menu</i> for individual columns. While this config is true the following will be disabled:<div class="mdetail-params"><ul><li>clicking on header to sort</li><li>the trigger to reveal the menu.</li></ul></div>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='markDirty'>
          <xs:annotation>
            <xs:documentation>
              True to show the dirty cell indicator when a cell has been modified. Defaults to <tt>true</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='rowBodySelector'>
          <xs:annotation>
            <xs:documentation>
              The selector used to find row bodies internally (defaults to <tt>'div.x-grid3-row'</tt>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='rowBodySelectorDepth'>
          <xs:annotation>
            <xs:documentation>
              The number of levels to search for row bodies in event delegation (defaults to <tt>10</tt>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='rowOverCls'>
          <xs:annotation>
            <xs:documentation>
              The CSS class added to each row when it is hovered over. Defaults to 'x-grid3-row-over'
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='rowSelector'>
          <xs:annotation>
            <xs:documentation>
              The selector used to find rows internally (defaults to <tt>'div.x-grid3-row'</tt>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='rowSelectorDepth'>
          <xs:annotation>
            <xs:documentation>
              The number of levels to search for rows in event delegation (defaults to <tt>10</tt>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='scrollOffset'>
          <xs:annotation>
            <xs:documentation>
              The amount of space to reserve for the vertical scrollbar (defaults to <tt>undefined</tt>). If an explicit value isn't specified, this will be automatically calculated.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='selectedRowClass'>
          <xs:annotation>
            <xs:documentation>
              The CSS class applied to a selected row (defaults to <tt>'x-grid3-row-selected'</tt>). An example overriding the default styling: <pre><code> .x-grid3-row-selected {background-color: yellow;} </code></pre>Note that this only controls the row, and will not do anything for the text inside it. To style inner facets (like text) use something like: <pre><code> .x-grid3-row-selected .x-grid3-cell-inner { color: #FFCC00; } </code></pre>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='sortAscText'>
          <xs:annotation>
            <xs:documentation>
              The text displayed in the 'Sort Ascending' menu item (defaults to <tt>'Sort Ascending'</tt>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='sortClasses'>
          <xs:annotation>
            <xs:documentation>
              The CSS classes applied to a header when it is sorted. (defaults to <tt>['sort-asc', 'sort-desc']</tt>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='sortDescText'>
          <xs:annotation>
            <xs:documentation>
              The text displayed in the 'Sort Descending' menu item (defaults to <tt>'Sort Descending'</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='gridview' type='ec:ext.config.gridview' substitutionGroup='ec:observable'>
    <xs:annotation>
      <xs:documentation>
        This class encapsulates the user interface of an <a href="Ext.grid.GridPanel.html">Ext.grid.GridPanel</a>. Methods of this class may be used to access user interface elements to enable special display effects. Do not change the DOM structure of the user interface. <p>This class does not provide ways to manipulate the underlying data. The data model of a Grid is held in an <a href="Ext.data.Store.html">Ext.data.Store</a>.</p> <p>This class serves as a typed config object for constructor of class GridView.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.grid.GridView
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.groupingstore'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.store'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:String' name='groupDir'>
          <xs:annotation>
            <xs:documentation>
              The direction to sort the groups. Defaults to <tt>'ASC'</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='groupField'>
          <xs:annotation>
            <xs:documentation>
              The field name by which to sort the store's data (defaults to '').
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='groupOnSort'>
          <xs:annotation>
            <xs:documentation>
              True to sort the data on the grouping field when a grouping operation occurs, false to sort based on the existing sort info (defaults to false).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='remoteGroup'>
          <xs:annotation>
            <xs:documentation>
              True if the grouping should apply on the server side, false if it is local only (defaults to false). If the grouping is local, it can be applied immediately to the data. If it is remote, then it will simply act as a helper, automatically sending the grouping field name as the 'groupBy' param with each XHR call.
            </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='groupingstore' type='ec:ext.config.groupingstore' substitutionGroup='ec:store'>
    <xs:annotation>
      <xs:documentation>
        A specialized store implementation that provides for grouping records by one of the available fields. This is usually used in conjunction with an <a href="Ext.grid.GroupingView.html">Ext.grid.GroupingView</a> to provide the data model for a grouped GridPanel. Internally, GroupingStore is simply a normal Store with multi sorting enabled from the start. The grouping field and direction are always injected as the first sorter pair. GroupingView picks up on the configured groupField and builds grid rows appropriately. <p>This class serves as a typed config object for constructor of class GroupingStore.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.data.GroupingStore
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.groupingview'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.gridview'>
        <xs:sequence>
            <xs:element name='groupRenderer' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  This property must be configured in the <a href="Ext.grid.Column.html">Ext.grid.Column</a> for each column.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:Boolean' name='cancelEditOnToggle'>
          <xs:annotation>
            <xs:documentation>
              True to cancel any editing when the group header is toggled. Defaults to <tt>true</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='emptyGroupText'>
          <xs:annotation>
            <xs:documentation>
              The text to display when there is an empty group value (defaults to <tt>'(None)'</tt>). May also be specified per column, see <a href="Ext.grid.Column.html">Ext.grid.Column</a>.<a href="output/Ext.grid.Column.html#Ext.grid.Column-emptyGroupText">emptyGroupText</a>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='enableGrouping'>
          <xs:annotation>
            <xs:documentation>
              <tt>false</tt> to disable grouping functionality (defaults to <tt>true</tt>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='enableGroupingMenu'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> to enable the grouping control in the column menu (defaults to <tt>true</tt>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='enableNoGroups'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> to allow the user to turn off grouping (defaults to <tt>true</tt>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='groupByText'>
          <xs:annotation>
            <xs:documentation>
              Text displayed in the grid header menu for grouping by a column (defaults to 'Group By This Field').
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='groupMode'>
          <xs:annotation>
            <xs:documentation>
              Indicates how to construct the group identifier. <tt>'value'</tt> constructs the id using raw value, <tt>'display'</tt> constructs the id using the rendered value. Defaults to <tt>'value'</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='groupRenderer'>
          <xs:annotation>
            <xs:documentation>
              This property must be configured in the <a href="Ext.grid.Column.html">Ext.grid.Column</a> for each column.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='groupTextTpl'>
          <xs:annotation>
            <xs:documentation>
              The template used to render the group header (defaults to <tt>'{text}'</tt>). This is used to format an object which contains the following properties: <div class="mdetail-params"><ul><li><b>group</b> : String<p class="sub-desc">The <i>rendered</i> value of the group field. By default this is the unchanged value of the group field. If a <tt><b><a href="output/Ext.grid.Column.html#Ext.grid.Column-groupRenderer">groupRenderer</a></b></tt> is specified, it is the result of a call to that function.</p></li><li><b>gvalue</b> : Object<p class="sub-desc">The <i>raw</i> value of the group field.</p></li><li><b>text</b> : String<p class="sub-desc">The configured header (as described in <tt><a href="output/Ext.grid.GroupingView.html#Ext.grid.GroupingView-showGroupName">showGroupName</a>)</tt> if <tt><a href="output/Ext.grid.GroupingView.html#Ext.grid.GroupingView-showGroupName">showGroupName</a></tt> is <tt>true</tt>) plus the <i>rendered</i> group field value.</p></li><li><b>groupId</b> : String<p class="sub-desc">A unique, generated ID which is applied to the View Element which contains the group.</p></li><li><b>startRow</b> : Number<p class="sub-desc">The row index of the Record which caused group change.</p></li><li><b>rs</b> : Array<p class="sub-desc">Contains a single element: The Record providing the data for the row which caused group change.</p></li><li><b>cls</b> : String<p class="sub-desc">The generated class name string to apply to the group header Element.</p></li><li><b>style</b> : String<p class="sub-desc">The inline style rules to apply to the group header Element.</p></li></ul></div><br/><br/> See <a href="Ext.XTemplate.html">Ext.XTemplate</a> for information on how to format data using a template. Possible usage:<pre><code>var grid = new Ext.grid.GridPanel({ ... view: new Ext.grid.GroupingView({ groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length &gt; 1 ? "Items" : "Item"]})' }), }); </code></pre>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='hideGroupedColumn'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> to hide the column that is currently grouped (defaults to <tt>false</tt>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='ignoreAdd'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> to skip refreshing the view when new rows are added (defaults to <tt>false</tt>)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='showGroupName'>
          <xs:annotation>
            <xs:documentation>
              If <tt>true</tt> will display a prefix plus a ': ' before the group field value in the group header line. The prefix will consist of the <tt><b><a href="output/Ext.grid.Column.html#Ext.grid.Column-groupName">groupName</a></b></tt> (or the configured <tt><b><a href="output/Ext.grid.Column.html#Ext.grid.Column-header">header</a></b></tt> if not provided) configured in the <a href="Ext.grid.Column.html">Ext.grid.Column</a> for each set of grouped rows (defaults to <tt>true</tt>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='showGroupsText'>
          <xs:annotation>
            <xs:documentation>
              Text displayed in the grid header for enabling/disabling grouping (defaults to 'Show in Groups').
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='startCollapsed'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> to start all groups collapsed (defaults to <tt>false</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='groupingview' type='ec:ext.config.groupingview' substitutionGroup='ec:gridview'>
    <xs:annotation>
      <xs:documentation>
        Adds the ability for single level grouping to the grid. A <a href="Ext.data.GroupingStore.html">GroupingStore</a> must be used to enable grouping. Some grouping characteristics may also be configured at the <a href="Ext.grid.Column.html">Column level</a><div class="mdetail-params"><ul><li><code><a href="output/Ext.grid.Column.html#Ext.grid.Column-emptyGroupText">emptyGroupText</a></code></li><li><code><a href="output/Ext.grid.Column.html#Ext.grid.Column-groupable">groupable</a></code></li><li><code><a href="output/Ext.grid.Column.html#Ext.grid.Column-groupName">groupName</a></code></li><li><code><a href="output/Ext.grid.Column.html#Ext.grid.Column-groupRender">groupRender</a></code></li></ul></div><p>Sample usage:</p><pre><code>var grid = new Ext.grid.GridPanel({ // A groupingStore is required for a GroupingView store: new <a href="Ext.data.GroupingStore.html">Ext.data.GroupingStore</a>({ autoDestroy: true, reader: reader, data: xg.dummyData, sortInfo: {field: 'company', direction: 'ASC'}, <a href="output/Ext.data.GroupingStore.html#Ext.data.GroupingStore-groupOnSort">groupOnSort</a>: true, <a href="output/Ext.data.GroupingStore.html#Ext.data.GroupingStore-remoteGroup">remoteGroup</a>: true, <a href="output/Ext.data.GroupingStore.html#Ext.data.GroupingStore-groupField">groupField</a>: 'industry' }), colModel: new <a href="Ext.grid.ColumnModel.html">Ext.grid.ColumnModel</a>({ columns:[ {id:'company',header: 'Company', width: 60, dataIndex: 'company'}, // <a href="output/Ext.grid.Column.html#Ext.grid.Column-groupable">groupable</a>, <a href="output/Ext.grid.Column.html#Ext.grid.Column-groupName">groupName</a>, <a href="output/Ext.grid.Column.html#Ext.grid.Column-groupRender">groupRender</a> are also configurable at column level {header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price', <a href="output/Ext.grid.Column.html#Ext.grid.Column-groupable">groupable</a>: false}, {header: 'Change', dataIndex: 'change', renderer: Ext.util.Format.usMoney}, {header: 'Industry', dataIndex: 'industry'}, {header: 'Last Updated', renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'} ], defaults: { sortable: true, menuDisabled: false, width: 20 } }), view: new Ext.grid.GroupingView({ <a href="output/Ext.grid.GridView.html#Ext.grid.GridView-forceFit">forceFit</a>: true, // custom grouping text template to display the number of items per group <a href="output/Ext.grid.GroupingView.html#Ext.grid.GroupingView-groupTextTpl">groupTextTpl</a>: '{text} ({[values.rs.length]} {[values.rs.length &gt; 1 ? "Items" : "Item"]})' }), frame:true, width: 700, height: 450, collapsible: true, animCollapse: false, title: 'Grouping Example', iconCls: 'icon-grid', renderTo: document.body }); </code></pre> <p>This class serves as a typed config object for constructor of class GroupingView.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.grid.GroupingView
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.hboxlayout'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.boxlayout'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:String' name='align'>
          <xs:annotation>
            <xs:documentation>
              Controls how the child items of the container are aligned. Acceptable configuration values for this property are: <div class="mdetail-params"><ul><li><b><tt>top</tt></b> : <b>Default</b><div class="sub-desc">child items are aligned vertically at the <b>top</b> of the container</div></li><li><b><tt>middle</tt></b> : <div class="sub-desc">child items are aligned vertically in the <b>middle</b> of the container</div></li><li><b><tt>stretch</tt></b> : <div class="sub-desc">child items are stretched vertically to fill the height of the container</div></li><li><b><tt>stretchmax</tt></b> : <div class="sub-desc">child items are stretched vertically to the height of the largest item.</div></li></ul></div>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='flex'>
          <xs:annotation>
            <xs:documentation>
              This configuation option is to be applied to <b>child <tt>items</tt></b> of the container managed by this layout. Each child item with a <tt>flex</tt> property will be flexed <b>horizontally</b> according to each item's <b>relative</b> <tt>flex</tt> value compared to the sum of all items with a <tt>flex</tt> value specified. Any child items that have either a <tt>flex = 0</tt> or <tt>flex = undefined</tt> will not be 'flexed' (the initial size will not be changed).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='pack'>
          <xs:annotation>
            <xs:documentation>
              Controls how the child items of the container are packed together. Acceptable configuration values for this property are: <div class="mdetail-params"><ul><li><b><tt>start</tt></b> : <b>Default</b><div class="sub-desc">child items are packed together at <b>left</b> side of container</div></li><li><b><tt>center</tt></b> : <div class="sub-desc">child items are packed together at <b>mid-width</b> of container</div></li><li><b><tt>end</tt></b> : <div class="sub-desc">child items are packed together at <b>right</b> side of container</div></li></ul></div>
            </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='hboxlayout' type='ec:ext.config.hboxlayout' substitutionGroup='ec:boxlayout'>
    <xs:annotation>
      <xs:documentation>
        A layout that arranges items horizontally across a Container. This layout optionally divides available horizontal space between child items containing a numeric <code>flex</code> configuration. This layout may also be used to set the heights of child items by configuring it with the <a href="output/Ext.layout.HBoxLayout.html#Ext.layout.HBoxLayout-align">align</a> option. <p>This class serves as a typed config object for constructor of class HBoxLayout.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.layout.HBoxLayout
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.hidden'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.field'>
        <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='hidden' type='ec:ext.config.hidden' substitutionGroup='ec:field'>
    <xs:annotation>
      <xs:documentation>
        A basic hidden field for storing hidden values in forms that need to be passed in the form submit. <p>This class represents the xtype 'hidden' and serves as a typed config object for constructor of class Hidden.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.form.Hidden
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.horizontalmenu'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.boxoverflowmenu'>
        <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='horizontalmenu' type='ec:ext.config.horizontalmenu' substitutionGroup='ec:boxoverflowmenu'>
    <xs:annotation>
      <xs:documentation>
        Description <p>This class serves as a typed config object for constructor of class HorizontalMenu.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.layout.boxoverflow.HorizontalMenu
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.horizontalscroller'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.scroller'>
        <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='horizontalscroller' type='ec:ext.config.horizontalscroller' substitutionGroup='ec:scroller'>
    <xs:annotation>
      <xs:documentation>
        Description <p>This class serves as a typed config object for constructor of class HorizontalScroller.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.layout.boxoverflow.HorizontalScroller
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.htmleditor'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.field'>
        <xs:sequence>
            <xs:element name='fontFamilies' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  An array of available font families
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <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='createLinkText'>
          <xs:annotation>
            <xs:documentation>
              The default text for the create link prompt
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='defaultLinkValue'>
          <xs:annotation>
            <xs:documentation>
              The default value for the create link prompt (defaults to http:/ /)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='defaultValue'>
          <xs:annotation>
            <xs:documentation>
              A default value to be put into the editor to resolve focus issues (defaults to   (Non-breaking space) in Opera and IE6, ​ (Zero-width space) in all other browsers).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='enableAlignments'>
          <xs:annotation>
            <xs:documentation>
              Enable the left, center, right alignment buttons (defaults to true)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='enableColors'>
          <xs:annotation>
            <xs:documentation>
              Enable the fore/highlight color buttons (defaults to true)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='enableFont'>
          <xs:annotation>
            <xs:documentation>
              Enable font selection. Not available in Safari. (defaults to true)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='enableFontSize'>
          <xs:annotation>
            <xs:documentation>
              Enable the increase/decrease font size buttons (defaults to true)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='enableFormat'>
          <xs:annotation>
            <xs:documentation>
              Enable the bold, italic and underline buttons (defaults to true)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='enableLinks'>
          <xs:annotation>
            <xs:documentation>
              Enable the create link button. Not available in Safari. (defaults to true)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='enableLists'>
          <xs:annotation>
            <xs:documentation>
              Enable the bullet and numbered list buttons. Not available in Safari. (defaults to true)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='enableSourceEdit'>
          <xs:annotation>
            <xs:documentation>
              Enable the switch to source edit button. Not available in Safari. (defaults to true)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='fontFamilies'>
          <xs:annotation>
            <xs:documentation>
              An array of available font families
            </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='htmleditor' type='ec:ext.config.htmleditor' substitutionGroup='ec:field'>
    <xs:annotation>
      <xs:documentation>
        Provides a lightweight HTML Editor component. Some toolbar features are not supported by Safari and will be automatically hidden when needed. These are noted in the config options where appropriate. <br/><br/>The editor's toolbar buttons have tooltips defined in the <a href="output/Ext.form.HtmlEditor.html#Ext.form.HtmlEditor-buttonTips">buttonTips</a> property, but they are not enabled by default unless the global <a href="Ext.QuickTips.html">Ext.QuickTips</a> singleton is <a href="output/Ext.QuickTips.html#Ext.QuickTips-init">initialized</a>. <br/><br/><b>Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT supported by this editor.</b> <br/><br/>An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within any element that has display set to 'none' can cause problems in Safari and Firefox due to their default iframe reloading bugs. <br/><br/>Example usage: <pre><code>// Simple example rendered with default options: Ext.QuickTips.init(); // enable tooltips new Ext.form.HtmlEditor({ renderTo: Ext.getBody(), width: 800, height: 300 }); // Passed via xtype into a container and with custom options: Ext.QuickTips.init(); // enable tooltips new Ext.Panel({ title: 'HTML Editor', renderTo: Ext.getBody(), width: 600, height: 300, frame: true, layout: 'fit', items: { xtype: 'htmleditor', enableColors: false, enableAlignments: false } }); </code></pre> <p>This class represents the xtype 'htmleditor' and serves as a typed config object for constructor of class HtmlEditor.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.form.HtmlEditor
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.httpproxy'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.dataproxy'>
        <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='httpproxy' type='ec:ext.config.httpproxy' substitutionGroup='ec:dataproxy'>
    <xs:annotation>
      <xs:documentation>
        An implementation of <a href="Ext.data.DataProxy.html">Ext.data.DataProxy</a> that processes data requests within the same domain of the originating page. <p><b>Note</b>: this class cannot be used to retrieve data from a domain other than the domain from which the running page was served. For cross-domain requests, use a <a href="Ext.data.ScriptTagProxy.html">ScriptTagProxy</a>.</p><p>Be aware that to enable the browser to parse an XML document, the server must set the Content-Type header in the HTTP response to "<tt>text/xml</tt>".</p> <p>This class serves as a typed config object for constructor of class HttpProxy.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.data.HttpProxy
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.jsonprovider'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.provider'>
        <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='jsonprovider' type='ec:ext.config.jsonprovider' substitutionGroup='ec:provider'>
    <xs:annotation>
      <xs:documentation>
        <p>This class serves as a typed config object for constructor of class JsonProvider.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.direct.JsonProvider
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.jsonreader'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.datareader'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:String' name='idProperty'>
          <xs:annotation>
            <xs:documentation>
              [id] Name of the property within a row object that contains a record identifier value. Defaults to <tt>id</tt>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='root'>
          <xs:annotation>
            <xs:documentation>
              [undefined] <b>Required</b>. The name of the property which contains the Array of row objects. Defaults to <tt>undefined</tt>. An exception will be thrown if the root property is undefined. The data packet value for this property should be an empty array to clear the data or show no data.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='successProperty'>
          <xs:annotation>
            <xs:documentation>
              [success] Name of the property from which to retrieve the success attribute. Defaults to <tt>success</tt>. See <a href="Ext.data.DataProxy.html">Ext.data.DataProxy</a>.<a href="output/Ext.data.DataProxy.html#Ext.data.DataProxy-exception">exception</a> for additional information.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='totalProperty'>
          <xs:annotation>
            <xs:documentation>
              [total] Name of the property from which to retrieve the total number of records in the dataset. This is only needed if the whole dataset is not passed in one go, but is being paged from the remote server. Defaults to <tt>total</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='jsonreader' type='ec:ext.config.jsonreader' substitutionGroup='ec:datareader'>
    <xs:annotation>
      <xs:documentation>
        Data reader class to create an Array of <a href="Ext.data.Record.html">Ext.data.Record</a> objects from a JSON packet based on mappings in a provided <a href="Ext.data.Record.html">Ext.data.Record</a> constructor. <p>Example code:</p><pre><code>var myReader = new Ext.data.JsonReader({ // metadata configuration options: <a href="output/Ext.data.JsonReader.html#Ext.data.JsonReader-idProperty">idProperty</a>: 'id' <a href="output/Ext.data.JsonReader.html#Ext.data.JsonReader-root">root</a>: 'rows', <a href="output/Ext.data.JsonReader.html#Ext.data.JsonReader-totalProperty">totalProperty</a>: 'results', <a href="output/Ext.data.DataReader.html#Ext.data.DataReader-messageProperty">Ext.data.DataReader.messageProperty</a>: "msg" // The element within the response that provides a user-feedback message (optional) // the fields config option will internally create an <a href="Ext.data.Record.html">Ext.data.Record</a> // constructor that provides mapping for reading the record data objects <a href="output/Ext.data.DataReader.html#Ext.data.DataReader-fields">fields</a>: [ // map Record's 'firstname' field to data object's key of same name {name: 'name', mapping: 'firstname'}, // map Record's 'job' field to data object's 'occupation' key {name: 'job', mapping: 'occupation'} ] }); </code></pre><p>This would consume a JSON data object of the form:</p><pre><code>{ results: 2000, // Reader's configured <a href="output/Ext.data.JsonReader.html#Ext.data.JsonReader-totalProperty">totalProperty</a> rows: [ // Reader's configured <a href="output/Ext.data.JsonReader.html#Ext.data.JsonReader-root">root</a> // record data objects: { <a href="output/Ext.data.JsonReader.html#Ext.data.JsonReader-idProperty">id</a>: 1, firstname: 'Bill', occupation: 'Gardener' }, { <a href="output/Ext.data.JsonReader.html#Ext.data.JsonReader-idProperty">id</a>: 2, firstname: 'Ben' , occupation: 'Horticulturalist' }, ... ] } </code></pre><p style="font-weight: bold"><u>Automatic configuration using metaData</u></p><p>It is possible to change a JsonReader's metadata at any time by including a <b><tt>metaData</tt></b> property in the JSON data object. If the JSON data object has a <b><tt>metaData</tt></b> property, a <a href="Ext.data.Store.html">Store</a> object using this Reader will reconfigure itself to use the newly provided field definition and fire its <a href="output/Ext.data.Store.html#Ext.data.Store-metachange">metachange</a> event. The metachange event handler may interrogate the <b><tt>metaData</tt></b> property to perform any configuration required.</p><p>Note that reconfiguring a Store potentially invalidates objects which may refer to Fields or Records which no longer exist.</p><p>To use this facility you would create the JsonReader like this:</p><pre><code>var myReader = new Ext.data.JsonReader(); </code></pre><p>The first data packet from the server would configure the reader by containing a <b><tt>metaData</tt></b> property <b>and</b> the data. For example, the JSON data object might take the form:</p><pre><code>{ metaData: { "<a href="output/Ext.data.JsonReader.html#Ext.data.JsonReader-idProperty">idProperty</a>": "id", "<a href="output/Ext.data.JsonReader.html#Ext.data.JsonReader-root">root</a>": "rows", "<a href="output/Ext.data.JsonReader.html#Ext.data.JsonReader-totalProperty">totalProperty</a>": "results" "<a href="output/Ext.data.JsonReader.html#Ext.data.JsonReader-successProperty">successProperty</a>": "success", "<a href="output/Ext.data.DataReader.html#Ext.data.DataReader-fields">fields</a>": [ {"name": "name"}, {"name": "job", "mapping": "occupation"} ], // used by store to set its sortInfo "sortInfo":{ "field": "name", "direction": "ASC" }, // <a href="Ext.PagingToolbar.html">paging data</a> (if applicable) "start": 0, "limit": 2, // custom property "foo": "bar" }, // Reader's configured <a href="output/Ext.data.JsonReader.html#Ext.data.JsonReader-successProperty">successProperty</a> "success": true, // Reader's configured <a href="output/Ext.data.JsonReader.html#Ext.data.JsonReader-totalProperty">totalProperty</a> "results": 2000, // Reader's configured <a href="output/Ext.data.JsonReader.html#Ext.data.JsonReader-root">root</a> // (this data simulates 2 results <a href="Ext.PagingToolbar.html">per page</a>) "rows": [ // <b>&#42;Note:</b> this must be an Array { "id": 1, "name": "Bill", "occupation": "Gardener" }, { "id": 2, "name": "Ben", "occupation": "Horticulturalist" } ] } </code></pre><p>The <b><tt>metaData</tt></b> property in the JSON data object should contain:</p><div class="mdetail-params"><ul><li>any of the configuration options for this class</li><li>a <b><tt><a href="output/Ext.data.Record.html#Ext.data.Record-fields">fields</a></tt></b> property which the JsonReader will use as an argument to the <a href="output/Ext.data.Record.html#Ext.data.Record-create">data Record create method</a> in order to configure the layout of the Records it will produce.</li><li>a <b><tt><a href="output/Ext.data.Store.html#Ext.data.Store-sortInfo">sortInfo</a></tt></b> property which the JsonReader will use to set the <a href="Ext.data.Store.html">Ext.data.Store</a>'s <a href="output/Ext.data.Store.html#Ext.data.Store-sortInfo">sortInfo</a> property</li><li>any custom properties needed</li></ul></div> <p>This class serves as a typed config object for constructor of class JsonReader.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.data.JsonReader
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.jsonstore'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.store'>
        <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='jsonstore' type='ec:ext.config.jsonstore' substitutionGroup='ec:store'>
    <xs:annotation>
      <xs:documentation>
        Small helper class to make creating <a href="Ext.data.Store.html">Ext.data.Store</a>s from JSON data easier. A JsonStore will be automatically configured with a <a href="Ext.data.JsonReader.html">Ext.data.JsonReader</a>. <p>A store configuration would be something like:</p><pre><code>var store = new Ext.data.JsonStore({ // store configs autoDestroy: true, url: 'get-images.php', storeId: 'myStore', // reader configs root: 'images', idProperty: 'name', fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}] }); </code></pre><br/><br/> <p>This store is configured to consume a returned object of the form:</p><pre><code>{ images: [ {name: 'Image one', url:'/GetImage.php?id=1', size:46.5, lastmod: new Date(2007, 10, 29)}, {name: 'Image Two', url:'/GetImage.php?id=2', size:43.2, lastmod: new Date(2007, 10, 30)} ] } </code></pre>An object literal of this form could also be used as the <a href="output/Ext.data.JsonStore.html#Ext.data.JsonStore-data">data</a> config option.<br/><br/> <p><b>&#42;Note:</b> Although not listed here, this class accepts all of the configuration options of <b><a href="Ext.data.JsonReader.html">JsonReader</a></b>.</p> <p>This class serves as a typed config object for constructor of class JsonStore.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.data.JsonStore
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.jsonwriter'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.datawriter'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:Boolean' name='encode'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> to <a href="output/Ext.util.JSON.html#Ext.util.JSON-encode">JSON encode</a> the <a href="output/Ext.data.DataWriter.html#Ext.data.DataWriter-toHash">hashed data</a> into a standard HTTP parameter named after this Reader's <code>meta.root</code> property which, by default is imported from the associated Reader. Defaults to <tt>true</tt>. <p>If set to <code>false</code>, the hashed data is <a href="output/Ext.util.JSON.html#Ext.util.JSON-encode">JSON encoded</a>, along with the associated <a href="Ext.data.Store.html">Ext.data.Store</a>'s <a href="output/Ext.data.Store.html#Ext.data.Store-baseParams">baseParams</a>, into the POST body.</p><p>When using <a href="Ext.data.DirectProxy.html">Ext.data.DirectProxy</a>, set this to <tt>false</tt> since Ext.Direct.JsonProvider will perform its own json-encoding. In addition, if you're using <a href="Ext.data.HttpProxy.html">Ext.data.HttpProxy</a>, setting to <tt>false</tt> will cause HttpProxy to transmit data using the <b>jsonData</b> configuration-params of <a href="output/Ext.Ajax.html#Ext.Ajax-request">Ext.Ajax.request</a> instead of <b>params</b>.</p><p>When using a <a href="output/Ext.data.Store.html#Ext.data.Store-restful">Ext.data.Store.restful</a> Store, some serverside frameworks are tuned to expect data through the jsonData mechanism. In those cases, one will want to set <b>encode: <tt>false</tt></b>, as in let the lower-level connection object (eg: Ext.Ajax) do the encoding.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='encodeDelete'>
          <xs:annotation>
            <xs:documentation>
              False to send only the id to the server on delete, true to encode it in an object literal, eg: <pre><code>{id: 1} </code></pre>Defaults to <tt>false</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='jsonwriter' type='ec:ext.config.jsonwriter' substitutionGroup='ec:datawriter'>
    <xs:annotation>
      <xs:documentation>
        DataWriter extension for writing an array or single <a href="Ext.data.Record.html">Ext.data.Record</a> object(s) in preparation for executing a remote CRUD action. <p>This class serves as a typed config object for constructor of class JsonWriter.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.data.JsonWriter
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.keynav'>
    <xs:complexContent>
      <xs:extension base='exml:base'>
        <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:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='keynav' type='ec:ext.config.keynav'>
    <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='ext.config.label'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.box'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:String' name='forId'>
          <xs:annotation>
            <xs:documentation>
              The id of the input element to which this label will be bound via the standard HTML 'for' attribute. If not specified, the attribute will not be added to the label.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='text'>
          <xs:annotation>
            <xs:documentation>
              The plain text to display within the label (defaults to ''). If you need to include HTML tags within the label's innerHTML, use the <a href="output/Ext.form.Label.html#Ext.form.Label-html">html</a> config instead.
            </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='label' type='ec:ext.config.label' substitutionGroup='ec:box'>
    <xs:annotation>
      <xs:documentation>
        Basic Label field. <p>This class represents the xtype 'label' and serves as a typed config object for constructor of class Label.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.form.Label
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.layer'>
    <xs:complexContent>
      <xs:extension base='exml:base'>
        <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 mixed="true">
                <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 mixed="true">
                <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:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='layer' type='ec:ext.config.layer'>
    <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='ext.config.linechart'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.cartesianchart'>
        <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='linechart' type='ec:ext.config.linechart' substitutionGroup='ec:cartesianchart'>
    <xs:annotation>
      <xs:documentation>
        <p>This class represents the xtype 'linechart' and serves as a typed config object for constructor of class LineChart.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.chart.LineChart
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.listview'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.dataview'>
        <xs:sequence>
            <xs:element name='columnResize' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Specify <tt>true</tt> or specify a configuration object for <a href="Ext.list.ListView.ColumnResizer.html">Ext.list.ListView.ColumnResizer</a> to enable the columns to be resizable (defaults to <tt>true</tt>).
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='columnSort' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Specify <tt>true</tt> or specify a configuration object for <a href="Ext.list.ListView.Sorter.html">Ext.list.ListView.Sorter</a> to enable the columns to be sortable (defaults to <tt>true</tt>).
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='columns' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  An array of column configuration objects, for example: <pre><code>{ align: 'right', dataIndex: 'size', header: 'Size', tpl: '{size:fileSize}', width: .35 } </code></pre>Acceptable properties for each column configuration object are: <div class="mdetail-params"><ul><li><b><tt>align</tt></b> : String<div class="sub-desc">Set the CSS text-align property of the column. Defaults to <tt>'left'</tt>.</div></li><li><b><tt>dataIndex</tt></b> : String<div class="sub-desc">See <a href="Ext.grid.Column.html">Ext.grid.Column</a>. <a href="output/Ext.grid.Column.html#Ext.grid.Column-dataIndex">dataIndex</a> for details.</div></li><li><b><tt>header</tt></b> : String<div class="sub-desc">See <a href="Ext.grid.Column.html">Ext.grid.Column</a>. <a href="output/Ext.grid.Column.html#Ext.grid.Column-header">header</a> for details.</div></li><li><b><tt>tpl</tt></b> : String<div class="sub-desc">Specify a string to pass as the configuration string for <a href="Ext.XTemplate.html">Ext.XTemplate</a>. By default an <a href="Ext.XTemplate.html">Ext.XTemplate</a> will be implicitly created using the <tt>dataIndex</tt>.</div></li><li><b><tt>width</tt></b> : Number<div class="sub-desc">Percentage of the container width this column should be allocated. Columns that have no width specified will be allocated with an equal percentage to fill 100% of the container width. To easily take advantage of the full container width, leave the width of at least one column undefined. Note that if you do not want to take up the full width of the container, the width of every column needs to be explicitly defined.</div></li></ul></div>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <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='internalTpl' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The template to be used for the header row. See <a href="output/Ext.list.ListView.html#Ext.list.ListView-tpl">tpl</a> for more details.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='columnResize'>
          <xs:annotation>
            <xs:documentation>
              Specify <tt>true</tt> or specify a configuration object for <a href="Ext.list.ListView.ColumnResizer.html">Ext.list.ListView.ColumnResizer</a> to enable the columns to be resizable (defaults to <tt>true</tt>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='columnSort'>
          <xs:annotation>
            <xs:documentation>
              Specify <tt>true</tt> or specify a configuration object for <a href="Ext.list.ListView.Sorter.html">Ext.list.ListView.Sorter</a> to enable the columns to be sortable (defaults to <tt>true</tt>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='columns'>
          <xs:annotation>
            <xs:documentation>
              An array of column configuration objects, for example: <pre><code>{ align: 'right', dataIndex: 'size', header: 'Size', tpl: '{size:fileSize}', width: .35 } </code></pre>Acceptable properties for each column configuration object are: <div class="mdetail-params"><ul><li><b><tt>align</tt></b> : String<div class="sub-desc">Set the CSS text-align property of the column. Defaults to <tt>'left'</tt>.</div></li><li><b><tt>dataIndex</tt></b> : String<div class="sub-desc">See <a href="Ext.grid.Column.html">Ext.grid.Column</a>. <a href="output/Ext.grid.Column.html#Ext.grid.Column-dataIndex">dataIndex</a> for details.</div></li><li><b><tt>header</tt></b> : String<div class="sub-desc">See <a href="Ext.grid.Column.html">Ext.grid.Column</a>. <a href="output/Ext.grid.Column.html#Ext.grid.Column-header">header</a> for details.</div></li><li><b><tt>tpl</tt></b> : String<div class="sub-desc">Specify a string to pass as the configuration string for <a href="Ext.XTemplate.html">Ext.XTemplate</a>. By default an <a href="Ext.XTemplate.html">Ext.XTemplate</a> will be implicitly created using the <tt>dataIndex</tt>.</div></li><li><b><tt>width</tt></b> : Number<div class="sub-desc">Percentage of the container width this column should be allocated. Columns that have no width specified will be allocated with an equal percentage to fill 100% of the container width. To easily take advantage of the full container width, leave the width of at least one column undefined. Note that if you do not want to take up the full width of the container, the width of every column needs to be explicitly defined.</div></li></ul></div>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='hideHeaders'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> to hide the <a href="output/Ext.list.ListView.html#Ext.list.ListView-internalTpl">header row</a> (defaults to <tt>false</tt> so the <a href="output/Ext.list.ListView.html#Ext.list.ListView-internalTpl">header row</a> will be shown).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='internalTpl'>
          <xs:annotation>
            <xs:documentation>
              The template to be used for the header row. See <a href="output/Ext.list.ListView.html#Ext.list.ListView-tpl">tpl</a> for more details.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='reserveScrollOffset'>
          <xs:annotation>
            <xs:documentation>
              By default will defer accounting for the configured <b><tt><a href="output/Ext.list.ListView.html#Ext.list.ListView-scrollOffset">scrollOffset</a></tt></b> for 10 milliseconds. Specify <tt>true</tt> to account for the configured <b><tt><a href="output/Ext.list.ListView.html#Ext.list.ListView-scrollOffset">scrollOffset</a></tt></b> immediately.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='scrollOffset'>
          <xs:annotation>
            <xs:documentation>
              The amount of space to reserve for the scrollbar (defaults to <tt>undefined</tt>). If an explicit value isn't specified, this will be automatically calculated.
            </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='listview' type='ec:ext.config.listview' substitutionGroup='ec:dataview'>
    <xs:annotation>
      <xs:documentation>
        Ext.list.ListView is a fast and light-weight implementation of a <a href="Ext.grid.GridPanel.html">Grid</a> like view. It has the following characteristics: <div class="mdetail-params"><ul><li>resizable columns</li><li>selectable</li><li>column widths are initially proportioned by percentage based on the container width and number of columns</li><li>uses templates to render the data in any required format</li><li>no horizontal scrolling</li><li>no editing</li></ul></div><p>Example usage:</p><pre><code>// consume JSON of this form: { "images":[ { "name":"dance_fever.jpg", "size":2067, "lastmod":1236974993000, "url":"images\/thumbs\/dance_fever.jpg" }, { "name":"zack_sink.jpg", "size":2303, "lastmod":1236974993000, "url":"images\/thumbs\/zack_sink.jpg" } ] } 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 listView = new Ext.list.ListView({ store: store, multiSelect: true, emptyText: 'No images to display', reserveScrollOffset: true, columns: [{ header: 'File', width: .5, dataIndex: 'name' },{ header: 'Last Modified', width: .35, dataIndex: 'lastmod', tpl: '{lastmod:date("m-d h:i a")}' },{ header: 'Size', dataIndex: 'size', tpl: '{size:fileSize}', // format using Ext.util.Format.fileSize() align: 'right' }] }); // put it in a Panel so it looks pretty var panel = new Ext.Panel({ id:'images-view', width:425, height:250, collapsible:true, layout:'fit', title:'Simple ListView <i>(0 items selected)</i>', items: listView }); panel.render(document.body); // little bit of feedback listView.on('selectionchange', function(view, nodes){ var l = nodes.length; var s = l != 1 ? 's' : ''; panel.setTitle('Simple ListView <i>('+l+' item'+s+' selected)</i>'); }); </code></pre> <p>This class represents the xtype 'listview' and serves as a typed config object for constructor of class ListView.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.list.ListView
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.load'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.formaction'>
        <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='load' type='ec:ext.config.load' substitutionGroup='ec:formaction'>
    <xs:annotation>
      <xs:documentation>
        A class which handles loading of data from a server into the Fields of an <a href="Ext.form.BasicForm.html">Ext.form.BasicForm</a>. <p>Instances of this class are only created by a <a href="Ext.form.BasicForm.html">Form</a> when <a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-load">load</a>ing.</p><p><u><b>Response Packet Criteria</b></u></p><p>A response packet <b>must</b> contain:</p><div class="mdetail-params"><ul><li><b><code>success</code></b> property : Boolean</li><li><b><code>data</code></b> property : Object</li><li style="list-style: none"><div class="sub-desc">The <code>data</code> property contains the values of Fields to load. The individual value object for each Field is passed to the Field's <a href="output/Ext.form.Field.html#Ext.form.Field-setValue">setValue</a> method.</div></li></ul></div><p><u><b>JSON Packets</b></u></p><p>By default, response packets are assumed to be JSON, so for the following form load call:</p><pre><code>var myFormPanel = new Ext.form.FormPanel({ title: 'Client and routing info', items: [{ fieldLabel: 'Client', name: 'clientName' }, { fieldLabel: 'Port of loading', name: 'portOfLoading' }, { fieldLabel: 'Port of discharge', name: 'portOfDischarge' }] }); myFormPanel.<a href="output/Ext.form.FormPanel.html#Ext.form.FormPanel-getForm">getForm</a>().<a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-load">load</a>({ url: '/getRoutingInfo.php', params: { consignmentRef: myConsignmentRef }, failure: function(form, action) { Ext.Msg.alert("Load failed", action.result.errorMessage); } }); </code></pre>a <b>success response</b> packet may look like this:<br/><br/><pre><code>{ success: true, data: { clientName: "Fred. Olsen Lines", portOfLoading: "FXT", portOfDischarge: "OSL" } }</code></pre>while a <b>failure response</b> packet may look like this:<br/><br/><pre><code>{ success: false, errorMessage: "Consignment reference not found" }</code></pre><p>Other data may be placed into the response for processing the <a href="Ext.form.BasicForm.html">Form</a>'s callback or event handler methods. The object decoded from this JSON is available in the <a href="output/Ext.form.Action.html#Ext.form.Action-result">result</a> property.</p> <p>This class serves as a typed config object for constructor of class Load.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.form.action.Load
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.loadmask'>
    <xs:complexContent>
      <xs:extension base='exml:base'>
        <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 mixed="true">
                <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:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='loadmask' type='ec:ext.config.loadmask'>
    <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='ext.config.lvbooleancolumn'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.lvcolumn'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:String' name='falseText'>
          <xs:annotation>
            <xs:documentation>
              The string returned by the renderer when the column value is falsey (but not undefined) (defaults to <tt>'false'</tt>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='trueText'>
          <xs:annotation>
            <xs:documentation>
              The string returned by the renderer when the column value is not falsey (defaults to <tt>'true'</tt>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='undefinedText'>
          <xs:annotation>
            <xs:documentation>
              The string returned by the renderer when the column value is undefined (defaults to <tt>'&amp;#160;'</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='lvbooleancolumn' type='ec:ext.config.lvbooleancolumn' substitutionGroup='ec:lvcolumn'>
    <xs:annotation>
      <xs:documentation>
        A Column definition class which renders boolean data fields. See the <a href="output/Ext.list.Column.html#Ext.list.Column-xtype">xtype</a> config option of <a href="Ext.list.Column.html">Ext.list.Column</a> for more details. <p>This class represents the xtype 'lvbooleancolumn' and serves as a typed config object for constructor of class BooleanColumn.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.list.BooleanColumn
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.lvcolumn'>
    <xs:complexContent>
      <xs:extension base='exml:base'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:String' name='align'>
          <xs:annotation>
            <xs:documentation>
              Set the CSS text-align property of the column. Defaults to <tt>'left'</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='cls'>
          <xs:annotation>
            <xs:documentation>
              This option can be used to add a CSS class to the cell of each row for this column.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='dataIndex'>
          <xs:annotation>
            <xs:documentation>
              <b>Required</b>. The name of the field in the ListViews's <a href="Ext.data.Store.html">Ext.data.Store</a>'s <a href="Ext.data.Record.html">Ext.data.Record</a> definition from which to draw the column's value.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='header'>
          <xs:annotation>
            <xs:documentation>
              The header text to be used as innerHTML (html tags are accepted) to display in the ListView. <b>Note</b>: to have a clickable header with no text displayed use <tt>' '</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='isColumn'>
          <xs:annotation>
            <xs:documentation>
              Used by ListView constructor method to avoid reprocessing a Column if <code>isColumn</code> is not set ListView will recreate a new Ext.list.Column Defaults to true.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='tpl'>
          <xs:annotation>
            <xs:documentation>
              Specify a string to pass as the configuration string for <a href="Ext.XTemplate.html">Ext.XTemplate</a>. By default an <a href="Ext.XTemplate.html">Ext.XTemplate</a> will be implicitly created using the <tt>dataIndex</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='width'>
          <xs:annotation>
            <xs:documentation>
              Percentage of the container width this column should be allocated. Columns that have no width specified will be allocated with an equal percentage to fill 100% of the container width. To easily take advantage of the full container width, leave the width of at least one column undefined. Note that if you do not want to take up the full width of the container, the width of every column needs to be explicitly defined.
            </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='lvcolumn' type='ec:ext.config.lvcolumn'>
    <xs:annotation>
      <xs:documentation>
        This class encapsulates column configuration data to be used in the initialization of a <a href="Ext.list.ListView.html">ListView</a>. <p>While subclasses are provided to render data in different ways, this class renders a passed data field unchanged and is usually used for textual columns.</p> <p>This class represents the xtype 'lvcolumn' and serves as a typed config object for constructor of class Column.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.list.Column
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.lvdatecolumn'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.lvcolumn'>
        <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='lvdatecolumn' type='ec:ext.config.lvdatecolumn' substitutionGroup='ec:lvcolumn'>
    <xs:annotation>
      <xs:documentation>
        A Column definition class which renders a passed date according to the default locale, or a configured <a href="output/Ext.list.DateColumn.html#Ext.list.DateColumn-format">format</a>. See the <a href="output/Ext.list.Column.html#Ext.list.Column-xtype">xtype</a> config option of <a href="Ext.list.Column.html">Ext.list.Column</a> for more details. <p>This class represents the xtype 'lvdatecolumn' and serves as a typed config object for constructor of class DateColumn.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.list.DateColumn
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.lvnumbercolumn'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.lvcolumn'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:String' name='format'>
          <xs:annotation>
            <xs:documentation>
              A formatting string as used by <a href="output/Ext.util.Format.html#Ext.util.Format-number">Ext.util.Format.number</a> to format a numeric value for this Column (defaults to <tt>'0,000.00'</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='lvnumbercolumn' type='ec:ext.config.lvnumbercolumn' substitutionGroup='ec:lvcolumn'>
    <xs:annotation>
      <xs:documentation>
        A Column definition class which renders a numeric data field according to a <a href="output/Ext.list.NumberColumn.html#Ext.list.NumberColumn-format">format</a> string. See the <a href="output/Ext.list.Column.html#Ext.list.Column-xtype">xtype</a> config option of <a href="Ext.list.Column.html">Ext.list.Column</a> for more details. <p>This class represents the xtype 'lvnumbercolumn' and serves as a typed config object for constructor of class NumberColumn.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.list.NumberColumn
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.menu'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.container'>
        <xs:sequence>
            <xs:element name='defaultOffsets' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  An array specifying the [x, y] offset in pixels by which to change the default Menu popup position after aligning according to the <a href="output/Ext.menu.Menu.html#Ext.menu.Menu-defaultAlign">defaultAlign</a> configuration. Defaults to <tt>[0, 0]</tt>.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <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>
                  True or 'sides' for the default effect, 'frame' for 4-way shadow, and 'drop' for bottom-right shadow (defaults to 'sides')
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:Boolean' name='allowOtherMenus'>
          <xs:annotation>
            <xs:documentation>
              True to allow multiple menus to be displayed at the same time (defaults to false)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='defaultAlign'>
          <xs:annotation>
            <xs:documentation>
              The default <a href="output/Ext.Element.html#Ext.Element-alignTo">Ext.Element.alignTo</a> anchor position value for this menu relative to its element of origin (defaults to 'tl-bl?')
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='defaultOffsets'>
          <xs:annotation>
            <xs:documentation>
              An array specifying the [x, y] offset in pixels by which to change the default Menu popup position after aligning according to the <a href="output/Ext.menu.Menu.html#Ext.menu.Menu-defaultAlign">defaultAlign</a> configuration. Defaults to <tt>[0, 0]</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='enableScrolling'>
          <xs:annotation>
            <xs:documentation>
              True to allow the menu container to have scroller controls if the menu is too long (defaults to true).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='floating'>
          <xs:annotation>
            <xs:documentation>
              By default, a Menu configured as <b><code>floating:true</code></b> will be rendered as an <a href="Ext.Layer.html">Ext.Layer</a> (an absolutely positioned, floating Component with zindex=15000). If configured as <b><code>floating:false</code></b>, the Menu may be used as child item of another Container instead of a free-floating <a href="Ext.Layer.html">Layer</a>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='ignoreParentClicks'>
          <xs:annotation>
            <xs:documentation>
              True to ignore clicks on any item in this menu that is a parent item (displays a submenu) so that the submenu is not dismissed when clicking the parent item (defaults to false).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='maxHeight'>
          <xs:annotation>
            <xs:documentation>
              The maximum height of the menu. Only applies when enableScrolling is set to True (defaults to null).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='minWidth'>
          <xs:annotation>
            <xs:documentation>
              The minimum width of the menu in pixels (defaults to 120)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='plain'>
          <xs:annotation>
            <xs:documentation>
              True to remove the incised line down the left side of the menu. Defaults to <tt>false</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='scrollIncrement'>
          <xs:annotation>
            <xs:documentation>
              The amount to scroll the menu. Only applies when enableScrolling is set to True (defaults to 24).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='shadow'>
          <xs:annotation>
            <xs:documentation>
              True or 'sides' for the default effect, 'frame' for 4-way shadow, and 'drop' for bottom-right shadow (defaults to 'sides')
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='showSeparator'>
          <xs:annotation>
            <xs:documentation>
              True to show the icon separator. (defaults to true).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='subMenuAlign'>
          <xs:annotation>
            <xs:documentation>
              The <a href="output/Ext.Element.html#Ext.Element-alignTo">Ext.Element.alignTo</a> anchor position value to use for submenus of this menu (defaults to 'tl-tr?')
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='zIndex'>
          <xs:annotation>
            <xs:documentation>
              zIndex to use when the menu is floating.
            </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='menu' type='ec:ext.config.menu' substitutionGroup='ec:container'>
    <xs:annotation>
      <xs:documentation>
        A menu object. This is the container to which you may add menu items. Menu can also serve as a base class when you want a specialized menu based off of another component (like <a href="Ext.menu.DateMenu.html">Ext.menu.DateMenu</a> for example). <p>Menus may contain either <a href="Ext.menu.Item.html">menu items</a>, or general <a href="Ext.Component.html">Component</a>s.</p><p>To make a contained general <a href="Ext.Component.html">Component</a> line up with other <a href="Ext.menu.Item.html">menu items</a> specify <tt>iconCls: 'no-icon'</tt>. This reserves a space for an icon, and indents the Component in line with the other menu items. See <a href="Ext.form.ComboBox.html">Ext.form.ComboBox</a>.<a href="output/Ext.form.ComboBox.html#Ext.form.ComboBox-getListParent">getListParent</a> for an example.</p><p>By default, Menus are absolutely positioned, floating Components. By configuring a Menu with <b><tt><a href="output/Ext.menu.Menu.html#Ext.menu.Menu-floating">floating</a>:false</tt></b>, a Menu may be used as child of a Container.</p> <p>This class represents the xtype 'menu' and serves as a typed config object for constructor of class Menu.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.menu.Menu
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.menubaseitem'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.component'>
        <xs:sequence>
            <xs:element name='handler' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A function that will handle the click event of this menu item (optional). The handler is passed the following parameters:<div class="mdetail-params"><ul><li><code>b</code> : Item<div class="sub-desc">This menu Item.</div></li><li><code>e</code> : EventObject<div class="sub-desc">The click event.</div></li></ul></div>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <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 handler function will be called.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='activeClass'>
          <xs:annotation>
            <xs:documentation>
              The CSS class to use when the item becomes activated (defaults to "x-menu-item-active")
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='canActivate'>
          <xs:annotation>
            <xs:documentation>
              True if this item can be visually activated (defaults to false)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='clickHideDelay'>
          <xs:annotation>
            <xs:documentation>
              Length of time in milliseconds to wait before hiding after a click (defaults to 1)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='handler'>
          <xs:annotation>
            <xs:documentation>
              A function that will handle the click event of this menu item (optional). The handler is passed the following parameters:<div class="mdetail-params"><ul><li><code>b</code> : Item<div class="sub-desc">This menu Item.</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:Boolean' name='hideOnClick'>
          <xs:annotation>
            <xs:documentation>
              True to hide the containing menu after this item is clicked (defaults to true)
            </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 handler function will be called.
            </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='menubaseitem' type='ec:ext.config.menubaseitem' substitutionGroup='ec:component'>
    <xs:annotation>
      <xs:documentation>
        The base class for all items that render into menus. BaseItem provides default rendering, activated state management and base configuration options shared by all menu components. <p>This class represents the xtype 'menubaseitem' and serves as a typed config object for constructor of class BaseItem.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.menu.BaseItem
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.menucheckitem'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.menuitem'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:Boolean' name='checked'>
          <xs:annotation>
            <xs:documentation>
              True to initialize this checkbox as checked (defaults to false). Note that if this checkbox is part of a radio group (group = true) only the first item in the group that is initialized with checked = true will be rendered as checked.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='group'>
          <xs:annotation>
            <xs:documentation>
              All check items with the same group name will automatically be grouped into a single-select radio button group (defaults to '')
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='groupClass'>
          <xs:annotation>
            <xs:documentation>
              The default CSS class to use for radio group check items (defaults to "x-menu-group-item")
            </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='menucheckitem' type='ec:ext.config.menucheckitem' substitutionGroup='ec:menuitem'>
    <xs:annotation>
      <xs:documentation>
        Adds a menu item that contains a checkbox by default, but can also be part of a radio group. <p>This class represents the xtype 'menucheckitem' and serves as a typed config object for constructor of class CheckItem.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.menu.CheckItem
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.menuitem'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.menubaseitem'>
        <xs:sequence>
            <xs:element name='menu' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Either an instance of <a href="Ext.menu.Menu.html">Ext.menu.Menu</a> or the config object for an <a href="Ext.menu.Menu.html">Ext.menu.Menu</a> which acts as the submenu when this item is activated.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='altText'>
          <xs:annotation>
            <xs:documentation>
              The altText to use for the icon, if it exists. Defaults to <tt>''</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='href'>
          <xs:annotation>
            <xs:documentation>
              The href attribute to use for the underlying anchor link (defaults to '#').
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='hrefTarget'>
          <xs:annotation>
            <xs:documentation>
              The target attribute to use for the underlying anchor link (defaults to '').
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='icon'>
          <xs:annotation>
            <xs:documentation>
              The path to an icon to display in this item (defaults to Ext.BLANK_IMAGE_URL). If icon is specified <a href="output/Ext.menu.Item.html#Ext.menu.Item-iconCls">iconCls</a> should not be.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='iconCls'>
          <xs:annotation>
            <xs:documentation>
              A CSS class that specifies a background image that will be used as the icon for this item (defaults to ''). If iconCls is specified <a href="output/Ext.menu.Item.html#Ext.menu.Item-icon">icon</a> should not be.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='menu'>
          <xs:annotation>
            <xs:documentation>
              Either an instance of <a href="Ext.menu.Menu.html">Ext.menu.Menu</a> or the config object for an <a href="Ext.menu.Menu.html">Ext.menu.Menu</a> which acts as the submenu when this item is activated.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='showDelay'>
          <xs:annotation>
            <xs:documentation>
              Length of time in milliseconds to wait before showing this item (defaults to 200)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='text'>
          <xs:annotation>
            <xs:documentation>
              The text to display in this item (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='menuitem' type='ec:ext.config.menuitem' substitutionGroup='ec:menubaseitem'>
    <xs:annotation>
      <xs:documentation>
        A base class for all menu items that require menu-related functionality (like sub-menus) and are not static display items. Item extends the base functionality of <a href="Ext.menu.BaseItem.html">Ext.menu.BaseItem</a> by adding menu-specific activation and click handling. <p>This class represents the xtype 'menuitem' and serves as a typed config object for constructor of class Item.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.menu.Item
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.menulayout'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.containerlayout'>
        <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='menulayout' type='ec:ext.config.menulayout' substitutionGroup='ec:containerlayout'>
    <xs:annotation>
      <xs:documentation>
        Layout manager used by <a href="Ext.menu.Menu.html">Ext.menu.Menu</a>. Generally this class should not need to be used directly. <p>This class serves as a typed config object for constructor of class MenuLayout.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.layout.MenuLayout
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.menuseparator'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.menubaseitem'>
        <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='menuseparator' type='ec:ext.config.menuseparator' substitutionGroup='ec:menubaseitem'>
    <xs:annotation>
      <xs:documentation>
        Adds a separator bar to a menu, used to divide logical groups of menu items. Generally you will add one of these by using "-" in you call to add() or in your items config rather than creating one directly. <p>This class represents the xtype 'menuseparator' and serves as a typed config object for constructor of class Separator.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.menu.Separator
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.menutextitem'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.menubaseitem'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:String' name='text'>
          <xs:annotation>
            <xs:documentation>
              The text to display for this item (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='menutextitem' type='ec:ext.config.menutextitem' substitutionGroup='ec:menubaseitem'>
    <xs:annotation>
      <xs:documentation>
        Adds a static text string to a menu, usually used as either a heading or group separator. <p>This class represents the xtype 'menutextitem' and serves as a typed config object for constructor of class TextItem.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.menu.TextItem
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.mixedcollection'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.observable'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:Boolean' name='allowFunctions'>
          <xs:annotation>
            <xs:documentation>
              Specify <tt>true</tt> if the <a href="output/Ext.util.MixedCollection.html#Ext.util.MixedCollection-addAll">addAll</a> function should add function references to the collection. Defaults to <tt>false</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='mixedcollection' type='ec:ext.config.mixedcollection' substitutionGroup='ec:observable'>
    <xs:annotation>
      <xs:documentation>
        A Collection class that maintains both numeric indexes and keys and exposes events. <p>This class serves as a typed config object for constructor of class MixedCollection.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.util.MixedCollection
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.multiselectionmodel'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.observable'>
        <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='multiselectionmodel' type='ec:ext.config.multiselectionmodel' substitutionGroup='ec:observable'>
    <xs:annotation>
      <xs:documentation>
        Multi selection for a TreePanel. <p>This class serves as a typed config object for constructor of class MultiSelectionModel.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.tree.MultiSelectionModel
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.multislider'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.box'>
        <xs:sequence>
            <xs:element name='decimalPrecision' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The number of decimal places to which to round the Slider's value. Defaults to 0. <p>To disable rounding, configure as <tt><b>false</b></tt>.</p>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <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>
              Turn on or off animation. Defaults to true
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='clickToChange'>
          <xs:annotation>
            <xs:documentation>
              Determines whether or not clicking on the Slider axis will change the slider. Defaults to true
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='constrainThumbs'>
          <xs:annotation>
            <xs:documentation>
              True to disallow thumbs from overlapping one another. Defaults to true
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='decimalPrecision'>
          <xs:annotation>
            <xs:documentation>
              The number of decimal places to which to round the Slider's value. Defaults to 0. <p>To disable rounding, configure as <tt><b>false</b></tt>.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='increment'>
          <xs:annotation>
            <xs:documentation>
              How many units to change the slider when adjusting by drag and drop. Use this option to enable 'snapping'.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='keyIncrement'>
          <xs:annotation>
            <xs:documentation>
              How many units to change the Slider when adjusting with keyboard navigation. Defaults to 1. If the increment config is larger, it will be used instead.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='maxValue'>
          <xs:annotation>
            <xs:documentation>
              The maximum value for the Slider. Defaults to 100.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='minValue'>
          <xs:annotation>
            <xs:documentation>
              The minimum value for the Slider. Defaults to 0.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='value'>
          <xs:annotation>
            <xs:documentation>
              The value to initialize the slider with. Defaults to minValue.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='vertical'>
          <xs:annotation>
            <xs:documentation>
              Orient the Slider vertically rather than horizontally, 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='multislider' type='ec:ext.config.multislider' substitutionGroup='ec:box'>
    <xs:annotation>
      <xs:documentation>
        Slider which supports vertical or horizontal orientation, keyboard adjustments, configurable snapping, axis clicking and animation. Can be added as an item to any container. Example usage: <pre>new Ext.Slider({ renderTo: Ext.getBody(), width: 200, value: 50, increment: 10, minValue: 0, maxValue: 100 }); </pre>Sliders can be created with more than one thumb handle by passing an array of values instead of a single one: <pre>new Ext.Slider({ renderTo: Ext.getBody(), width: 200, values: [25, 50, 75], minValue: 0, maxValue: 100, //this defaults to true, setting to false allows the thumbs to pass each other <a href="output/Ext.slider.MultiSlider.html#Ext.slider.MultiSlider-constrainThumbs">constrainThumbs</a>: false }); </pre> <p>This class serves as a typed config object for constructor of class MultiSlider.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.slider.MultiSlider
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.node'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.observable'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:String' name='id'>
          <xs:annotation>
            <xs:documentation>
              The id for this node. If one is not specified, one is generated.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='leaf'>
          <xs:annotation>
            <xs:documentation>
              true if this node is a leaf and does not have children
            </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='node' type='ec:ext.config.node' substitutionGroup='ec:observable'>
    <xs:annotation>
      <xs:documentation>
        <p>This class serves as a typed config object for constructor of class Node.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.data.Node
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.numbercolumn'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.gridcolumn'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:String' name='format'>
          <xs:annotation>
            <xs:documentation>
              A formatting string as used by <a href="output/Ext.util.Format.html#Ext.util.Format-number">Ext.util.Format.number</a> to format a numeric value for this Column (defaults to <tt>'0,000.00'</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='numbercolumn' type='ec:ext.config.numbercolumn' substitutionGroup='ec:gridcolumn'>
    <xs:annotation>
      <xs:documentation>
        A Column definition class which renders a numeric data field according to a <a href="output/Ext.grid.NumberColumn.html#Ext.grid.NumberColumn-format">format</a> string. See the <a href="output/Ext.grid.Column.html#Ext.grid.Column-xtype">xtype</a> config option of <a href="Ext.grid.Column.html">Ext.grid.Column</a> for more details. <p>This class represents the xtype 'numbercolumn' and serves as a typed config object for constructor of class NumberColumn.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.grid.NumberColumn
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.numberfield'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.textfield'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:Boolean' name='allowDecimals'>
          <xs:annotation>
            <xs:documentation>
              False to disallow decimal values (defaults to true)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='allowNegative'>
          <xs:annotation>
            <xs:documentation>
              False to prevent entering a negative sign (defaults to true)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='autoStripChars'>
          <xs:annotation>
            <xs:documentation>
              True to automatically strip not allowed characters from the field. Defaults to <tt>false</tt>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='baseChars'>
          <xs:annotation>
            <xs:documentation>
              The base set of characters to evaluate as valid numbers (defaults to '0123456789').
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='decimalPrecision'>
          <xs:annotation>
            <xs:documentation>
              The maximum precision to display after the decimal separator (defaults to 2)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='decimalSeparator'>
          <xs:annotation>
            <xs:documentation>
              Character(s) to allow as the decimal separator (defaults to '.')
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='maxText'>
          <xs:annotation>
            <xs:documentation>
              Error text to display if the maximum value validation fails (defaults to "The maximum value for this field is {maxValue}")
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='maxValue'>
          <xs:annotation>
            <xs:documentation>
              The maximum allowed value (defaults to Number.MAX_VALUE)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='minText'>
          <xs:annotation>
            <xs:documentation>
              Error text to display if the minimum value validation fails (defaults to "The minimum value for this field is {minValue}")
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='minValue'>
          <xs:annotation>
            <xs:documentation>
              The minimum allowed value (defaults to Number.NEGATIVE_INFINITY)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='nanText'>
          <xs:annotation>
            <xs:documentation>
              Error text to display if the value is not a valid number. For example, this can happen if a valid character like '.' or '-' is left in the field with no number (defaults to "{value} is not a valid number")
            </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='numberfield' type='ec:ext.config.numberfield' substitutionGroup='ec:textfield'>
    <xs:annotation>
      <xs:documentation>
        Numeric text field that provides automatic keystroke filtering and numeric validation. <p>This class represents the xtype 'numberfield' and serves as a typed config object for constructor of class NumberField.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.form.NumberField
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.observable'>
    <xs:complexContent>
      <xs:extension base='exml:base'>
        <xs:sequence>
            <xs:element name='listeners' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A config object containing one or more event handlers to be added to this object during initialization. This should be a valid listeners config object as specified in the <a href="output/Ext.util.Observable.html#Ext.util.Observable-addListener">addListener</a> example for attaching multiple handlers at once. <br/><p style="font-weight: bold"><u>DOM events from ExtJs <a href="Ext.Component.html">Components</a></u></p><br/><p>While <i>some</i> ExtJs Component classes export selected DOM events (e.g. "click", "mouseover" etc), this is usually only done when extra value can be added. For example the <a href="Ext.DataView.html">DataView</a>'s <b><code><a href="output/Ext.DataView.html#Ext.DataView-click">click</a></code></b> event passing the node clicked on. To access DOM events directly from a Component's HTMLElement, listeners must be added to the <i><a href="output/Ext.Component.html#Ext.Component-getEl">Element</a></i> after the Component has been rendered. A plugin can simplify this step:</p><pre><code>// Plugin is configured with a listeners config object. // The Component is appended to the argument list of all handler functions. Ext.DomObserver = Ext.extend(Object, { constructor: function(config) { this.listeners = config.listeners ? config.listeners : config; }, // Component passes itself into plugin's init method init: function(c) { var p, l = this.listeners; for (p in l) { if (Ext.isFunction(l[p])) { l[p] = this.createHandler(l[p], c); } else { l[p].fn = this.createHandler(l[p].fn, c); } } // Add the listeners to the Element immediately following the render call c.render = c.render.<a href="output/Function.html#Function-createSequence">createSequence</a>(function() { var e = c.getEl(); if (e) { e.on(l); } }); }, createHandler: function(fn, c) { return function(e) { fn.call(this, e, c); }; } }); var combo = new Ext.form.ComboBox({ // Collapse combo when its element is clicked on plugins: [ new Ext.DomObserver({ click: function(evt, comp) { comp.collapse(); } })], store: myStore, typeAhead: true, mode: 'local', triggerAction: 'all' }); </code></pre><br/><br/>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='listeners'>
          <xs:annotation>
            <xs:documentation>
              A config object containing one or more event handlers to be added to this object during initialization. This should be a valid listeners config object as specified in the <a href="output/Ext.util.Observable.html#Ext.util.Observable-addListener">addListener</a> example for attaching multiple handlers at once. <br/><p style="font-weight: bold"><u>DOM events from ExtJs <a href="Ext.Component.html">Components</a></u></p><br/><p>While <i>some</i> ExtJs Component classes export selected DOM events (e.g. "click", "mouseover" etc), this is usually only done when extra value can be added. For example the <a href="Ext.DataView.html">DataView</a>'s <b><code><a href="output/Ext.DataView.html#Ext.DataView-click">click</a></code></b> event passing the node clicked on. To access DOM events directly from a Component's HTMLElement, listeners must be added to the <i><a href="output/Ext.Component.html#Ext.Component-getEl">Element</a></i> after the Component has been rendered. A plugin can simplify this step:</p><pre><code>// Plugin is configured with a listeners config object. // The Component is appended to the argument list of all handler functions. Ext.DomObserver = Ext.extend(Object, { constructor: function(config) { this.listeners = config.listeners ? config.listeners : config; }, // Component passes itself into plugin's init method init: function(c) { var p, l = this.listeners; for (p in l) { if (Ext.isFunction(l[p])) { l[p] = this.createHandler(l[p], c); } else { l[p].fn = this.createHandler(l[p].fn, c); } } // Add the listeners to the Element immediately following the render call c.render = c.render.<a href="output/Function.html#Function-createSequence">createSequence</a>(function() { var e = c.getEl(); if (e) { e.on(l); } }); }, createHandler: function(fn, c) { return function(e) { fn.call(this, e, c); }; } }); var combo = new Ext.form.ComboBox({ // Collapse combo when its element is clicked on plugins: [ new Ext.DomObserver({ click: function(evt, comp) { comp.collapse(); } })], store: myStore, typeAhead: true, mode: 'local', triggerAction: 'all' }); </code></pre><br/><br/>
            </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='observable' type='ec:ext.config.observable'>
    <xs:annotation>
      <xs:documentation>
        Base class that provides a common interface for publishing events. Subclasses are expected to to have a property "events" with all the events defined, and, optionally, a property "listeners" with configured listeners defined.<br/>For example: <pre><code>Employee = Ext.extend(Ext.util.Observable, { constructor: function(config){ this.name = config.name; this.addEvents({ "fired" : true, "quit" : true }); // Copy configured listeners into &#42;this&#42; object so that the base class's // constructor will add them. this.listeners = config.listeners; // Call our superclass constructor to complete construction process. Employee.superclass.constructor.call(this, config) } }); </code></pre>This could then be used like this:<pre><code>var newEmployee = new Employee({ name: employeeName, listeners: { quit: function() { // By default, "this" will be the object that fired the event. alert(this.name + " has quit!"); } } }); </code></pre> <p>This class serves as a typed config object for constructor of class Observable.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.util.Observable
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.paging'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.toolbar'>
        <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 mixed="true">
                <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='paging' type='ec:ext.config.paging' substitutionGroup='ec: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='ext.config.panel'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.container'>
        <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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:attribute type='exml:String' name='tabCls'>
          <xs:annotation>
            <xs:documentation>
              <b>This config option is only used if this panel is a child of a TabPanel.</b> A CSS class name applied to the tab strip item corresponding to this panel, allowing special styling to be applied.
            </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='ec:ext.config.panel' substitutionGroup='ec: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='ext.config.panelproxy'>
    <xs:complexContent>
      <xs:extension base='exml:base'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:Boolean' name='insertProxy'>
          <xs:annotation>
            <xs:documentation>
              True to insert a placeholder proxy element while dragging the panel, false to drag with no proxy (defaults to true).
            </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='panelproxy' type='ec:ext.config.panelproxy'>
    <xs:annotation>
      <xs:documentation>
        A custom drag proxy implementation specific to <a href="Ext.Panel.html">Ext.Panel</a>s. This class is primarily used internally for the Panel's drag drop implementation, and should never need to be created directly. <p>This class serves as a typed config object for constructor of class PanelProxy.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.dd.PanelProxy
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.piechart'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.chart'>
        <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='piechart' type='ec:ext.config.piechart' substitutionGroup='ec:chart'>
    <xs:annotation>
      <xs:documentation>
        <p>This class represents the xtype 'piechart' and serves as a typed config object for constructor of class PieChart.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.chart.PieChart
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.pivotaxis'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.component'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:Number' name='defaultHeaderWidth'>
          <xs:annotation>
            <xs:documentation>
              The width to render each row header that does not have a width specified via <a href="output/Ext.grid.PivotAxis.html#Ext.grid.PivotAxis-getRowGroupHeaders">getRowGroupHeaders</a>. Defaults to 80.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='orientation'>
          <xs:annotation>
            <xs:documentation>
              One of 'vertical' or 'horizontal'. Defaults to horizontal
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='paddingWidth'>
          <xs:annotation>
            <xs:documentation>
              The amount of padding used by each cell. TODO: From 4.x onwards this can be removed as it won't be needed. For now it is used to account for the differences between the content box and border box measurement models
            </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='pivotaxis' type='ec:ext.config.pivotaxis' substitutionGroup='ec:component'>
    <xs:annotation>
      <xs:documentation>
        PivotAxis is a class that supports a <a href="Ext.grid.PivotGrid.html">Ext.grid.PivotGrid</a>. Each PivotGrid contains two PivotAxis instances - the left axis and the top axis. Each PivotAxis defines an ordered set of dimensions, each of which should correspond to a field in a Store's Record (see <a href="Ext.grid.PivotGrid.html">Ext.grid.PivotGrid</a> documentation for further explanation). <p>Developers should have little interaction with the PivotAxis instances directly as most of their management is performed by the PivotGrid. An exception is the dynamic reconfiguration of axes at run time - to achieve this we use PivotAxis's <a href="output/Ext.grid.PivotAxis.html#Ext.grid.PivotAxis-setDimensions">setDimensions</a> function and refresh the grid:</p><pre><code>var pivotGrid = new Ext.grid.PivotGrid({ //some PivotGrid config here }); //change the left axis dimensions pivotGrid.leftAxis.setDimensions([ { dataIndex: 'person', direction: 'DESC', width : 100 }, { dataIndex: 'product', direction: 'ASC', width : 80 } ]); pivotGrid.view.refresh(true); </code></pre>This clears the previous dimensions on the axis and redraws the grid with the new dimensions. <p>This class serves as a typed config object for constructor of class PivotAxis.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.grid.PivotAxis
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.pivotgrid'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.grid'>
        <xs:sequence>
            <xs:element name='aggregator' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The aggregation function to use to combine the measures extracted for each dimension combination. Can be any of the built-in aggregators (sum, count, avg, min, max). Can also be a function which accepts two arguments (an array of Records to aggregate, and the measure to aggregate them on) and should return a String.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='leftAxis' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Either and array of <a href="output/Ext.grid.PivotGrid.html#Ext.grid.PivotGrid-dimension">dimension</a> to use on the left axis, or a <a href="Ext.grid.PivotAxis.html">Ext.grid.PivotAxis</a> instance. If an array is passed, it is turned into a PivotAxis internally.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='renderer' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Optional renderer to pass values through before they are rendered to the dom. This gives an opportunity to modify cell contents after the value has been computed.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='topAxis' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Either and array of <a href="output/Ext.grid.PivotGrid.html#Ext.grid.PivotGrid-dimension">dimension</a> to use on the top axis, or a <a href="Ext.grid.PivotAxis.html">Ext.grid.PivotAxis</a> instance. If an array is passed, it is turned into a PivotAxis internally.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='aggregator'>
          <xs:annotation>
            <xs:documentation>
              The aggregation function to use to combine the measures extracted for each dimension combination. Can be any of the built-in aggregators (sum, count, avg, min, max). Can also be a function which accepts two arguments (an array of Records to aggregate, and the measure to aggregate them on) and should return a String.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='leftAxis'>
          <xs:annotation>
            <xs:documentation>
              Either and array of <a href="output/Ext.grid.PivotGrid.html#Ext.grid.PivotGrid-dimension">dimension</a> to use on the left axis, or a <a href="Ext.grid.PivotAxis.html">Ext.grid.PivotAxis</a> instance. If an array is passed, it is turned into a PivotAxis internally.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='measure'>
          <xs:annotation>
            <xs:documentation>
              The field to extract from each Record when pivoting around the two axes. See the class introduction docs for usage
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='renderer'>
          <xs:annotation>
            <xs:documentation>
              Optional renderer to pass values through before they are rendered to the dom. This gives an opportunity to modify cell contents after the value has been computed.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='topAxis'>
          <xs:annotation>
            <xs:documentation>
              Either and array of <a href="output/Ext.grid.PivotGrid.html#Ext.grid.PivotGrid-dimension">dimension</a> to use on the top axis, or a <a href="Ext.grid.PivotAxis.html">Ext.grid.PivotAxis</a> instance. If an array is passed, it is turned into a PivotAxis internally.
            </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='pivotgrid' type='ec:ext.config.pivotgrid' substitutionGroup='ec:grid'>
    <xs:annotation>
      <xs:documentation>
        The PivotGrid component enables rapid summarization of large data sets. It provides a way to reduce a large set of data down into a format where trends and insights become more apparent. A classic example is in sales data; a company will often have a record of all sales it makes for a given period - this will often encompass thousands of rows of data. The PivotGrid allows you to see how well each salesperson performed, which cities generate the most revenue, how products perform between cities and so on. <p>A PivotGrid is composed of two axes (left and top), one <a href="output/Ext.grid.PivotGrid.html#Ext.grid.PivotGrid-measure">measure</a> and one <a href="output/Ext.grid.PivotGrid.html#Ext.grid.PivotGrid-aggregator">aggregation</a> function. Each axis can contain one or more <a href="output/Ext.grid.PivotGrid.html#Ext.grid.PivotGrid-dimension">dimension</a>, which are ordered into a hierarchy. Dimensions on the left axis can also specify a width. Each dimension in each axis can specify its sort ordering, defaulting to "ASC", and must specify one of the fields in the <a href="Ext.data.Record.html">Record</a> used by the PivotGrid's <a href="Ext.data.Store.html">Store</a>.</p><pre><code>// This is the record representing a single sale var SaleRecord = Ext.data.Record.create([ {name: 'person', type: 'string'}, {name: 'product', type: 'string'}, {name: 'city', type: 'string'}, {name: 'state', type: 'string'}, {name: 'year', type: 'int'}, {name: 'value', type: 'int'} ]); // A simple store that loads SaleRecord data from a url var myStore = new Ext.data.Store({ url: 'data.json', autoLoad: true, reader: new Ext.data.JsonReader({ root: 'rows', idProperty: 'id' }, SaleRecord) }); // Create the PivotGrid itself, referencing the store var pivot = new Ext.grid.PivotGrid({ store : myStore, aggregator: 'sum', measure : 'value', leftAxis: [ { width: 60, dataIndex: 'product' }, { width: 120, dataIndex: 'person', direction: 'DESC' } ], topAxis: [ { dataIndex: 'year' } ] }); </code></pre><p>The specified <a href="output/Ext.grid.PivotGrid.html#Ext.grid.PivotGrid-measure">measure</a> is the field from SaleRecord that is extracted from each combination of product and person (on the left axis) and year on the top axis. There may be several SaleRecords in the data set that share this combination, so an array of measure fields is produced. This array is then aggregated using the <a href="output/Ext.grid.PivotGrid.html#Ext.grid.PivotGrid-aggregator">aggregator</a> function.</p><p>The default aggregator function is sum, which simply adds up all of the extracted measure values. Other built-in aggregator functions are count, avg, min and max. In addition, you can specify your own function. In this example we show the code used to sum the measures, but you can return any value you like. See <a href="output/Ext.grid.PivotGrid.html#Ext.grid.PivotGrid-aggregator">aggregator</a> for more details.</p><pre><code>new Ext.grid.PivotGrid({ aggregator: function(records, measure) { var length = records.length, total = 0, i; for (i = 0; i &lt; length; i++) { total += records[i].get(measure); } return total; }, renderer: function(value) { return Math.round(value); }, //your normal config here }); </code></pre><p><u>Renderers</u></p><p>PivotGrid optionally accepts a <a href="output/Ext.grid.PivotGrid.html#Ext.grid.PivotGrid-renderer">renderer</a> function which can modify the data in each cell before it is rendered. The renderer is passed the value that would usually be placed in the cell and is expected to return the new value. For example let's imagine we had height data expressed as a decimal - here's how we might use a renderer to display the data in feet and inches notation:</p><pre><code>new Ext.grid.PivotGrid({ //in each case the value is a decimal number of feet renderer : function(value) { var feet = Math.floor(value), inches = Math.round((value - feet) &#42; 12); return String.format("{0}' {1}\"", feet, inches); }, //normal config here }); </code></pre><p><u>Reconfiguring</u></p><p>All aspects PivotGrid's configuration can be updated at runtime. It is easy to change the <a href="output/Ext.grid.PivotGrid.html#Ext.grid.PivotGrid-setMeasure">measure</a>, <a href="output/Ext.grid.PivotGrid.html#Ext.grid.PivotGrid-setAggregator">aggregation function</a>, <a href="output/Ext.grid.PivotGrid.html#Ext.grid.PivotGrid-setLeftAxis">left</a> and <a href="output/Ext.grid.PivotGrid.html#Ext.grid.PivotGrid-setTopAxis">top</a> axes and refresh the grid.</p><p>In this case we reconfigure the PivotGrid to have city and year as the top axis dimensions, rendering the average sale value into the cells:</p><pre><code>//the left axis can also be changed pivot.topAxis.setDimensions([ {dataIndex: 'city', direction: 'DESC'}, {dataIndex: 'year', direction: 'ASC'} ]); pivot.setMeasure('value'); pivot.setAggregator('avg'); pivot.view.refresh(true); </code></pre><p>See the <a href="Ext.grid.PivotAxis.html">PivotAxis</a> documentation for further detail on reconfiguring axes.</p> <p>This class serves as a typed config object for constructor of class PivotGrid.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.grid.PivotGrid
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.pivotgridview'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.gridview'>
        <xs:sequence>
            <xs:element name='getCellCls' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Optional function which should return a CSS class name for each cell value. This is useful when color coding cells based on their value. Defaults to undefined.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='getCellCls'>
          <xs:annotation>
            <xs:documentation>
              Optional function which should return a CSS class name for each cell value. This is useful when color coding cells based on their value. Defaults to undefined.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='title'>
          <xs:annotation>
            <xs:documentation>
              Optional title to be placed in the top left corner of the PivotGrid. Defaults to an empty string.
            </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='pivotgridview' type='ec:ext.config.pivotgridview' substitutionGroup='ec:gridview'>
    <xs:annotation>
      <xs:documentation>
        Specialised GridView for rendering Pivot Grid components. Config can be passed to the PivotGridView via the PivotGrid constructor's viewConfig option: <pre><code>new Ext.grid.PivotGrid({ viewConfig: { title: 'My Pivot Grid', getCellCls: function(value) { return value &gt; 10 'red' : 'green'; } } }); </code></pre><p>Currently <a href="output/Ext.grid.PivotGridView.html#Ext.grid.PivotGridView-title">title</a> and <a href="output/Ext.grid.PivotGridView.html#Ext.grid.PivotGridView-getCellCls">getCellCls</a> are the only configuration options accepted by PivotGridView. All other interaction is performed via the <a href="Ext.grid.PivotGrid.html">PivotGrid</a> class.</p> <p>This class serves as a typed config object for constructor of class PivotGridView.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.grid.PivotGridView
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.plugin'>
    <xs:complexContent>
      <xs:extension base='exml:base'>
        <xs:sequence>
            <xs:element name='component' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The component this plugin is plugged in to, i.e. the component usually handed over in the Plugin#init() method. This allow a plugin written in EXML to access the component as if it would implement the init() method. It is recommended to define a local EXML variable that allows typed access to the component and/or its initial config.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='component'>
          <xs:annotation>
            <xs:documentation>
              The component this plugin is plugged in to, i.e. the component usually handed over in the Plugin#init() method. This allow a plugin written in EXML to access the component as if it would implement the init() method. It is recommended to define a local EXML variable that allows typed access to the component and/or its initial config.
            </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='plugin' type='ec:ext.config.plugin'>
    <xs:annotation>
      <xs:documentation>
        A Plugin provides custom functionality for a component declaring it in its <code>plugins</code> property. <p>When a component is created, for all plugins given as config objects, the component will add a reference to itself to their config object under the config option <code>component</code>. Each plugin can then call methods or respond to events on the component as needed to provide its functionality.</p> <p>Note that this is an Ext AS extension to Ext JS to support declarative EXML plugins. Usually, Ext JS only hands the component reference to the plugin's <code>init()</code> method, which is too late for the constructor code generated from EXML. </p> @see ext.config.component#plugins @see #component @see ext.Plugin#init()
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.pollingprovider'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.jsonprovider'>
        <xs:sequence>
            <xs:element name='baseParams' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  An object containing properties which are to be sent as parameters on every polling request
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='url' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The url which the PollingProvider should contact with each request. This can also be an imported Ext.Direct method which will accept the baseParams as its only argument.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='baseParams'>
          <xs:annotation>
            <xs:documentation>
              An object containing properties which are to be sent as parameters on every polling request
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='interval'>
          <xs:annotation>
            <xs:documentation>
              How often to poll the server-side in milliseconds (defaults to <tt>3000</tt> - every 3 seconds).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='url'>
          <xs:annotation>
            <xs:documentation>
              The url which the PollingProvider should contact with each request. This can also be an imported Ext.Direct method which will accept the baseParams as its only argument.
            </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='pollingprovider' type='ec:ext.config.pollingprovider' substitutionGroup='ec:jsonprovider'>
    <xs:annotation>
      <xs:documentation>
        Provides for repetitive polling of the server at distinct <a href="output/Ext.direct.PollingProvider.html#Ext.direct.PollingProvider-interval">intervals</a>. The initial request for data originates from the client, and then is responded to by the server. <p>All configurations for the PollingProvider should be generated by the server-side API portion of the Ext.Direct stack.</p><p>An instance of PollingProvider may be created directly via the new keyword or by simply specifying <tt>type = 'polling'</tt>. For example:</p><pre><code>var pollA = new Ext.direct.PollingProvider({ type:'polling', url: 'php/pollA.php', }); Ext.Direct.addProvider(pollA); pollA.disconnect(); Ext.Direct.addProvider( { type:'polling', url: 'php/pollB.php', id: 'pollB-provider' } ); var pollB = Ext.Direct.getProvider('pollB-provider'); </code></pre> <p>This class serves as a typed config object for constructor of class PollingProvider.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.direct.PollingProvider
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.progress'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.box'>
        <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 mixed="true">
                <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='progress' type='ec:ext.config.progress' substitutionGroup='ec:box'>
    <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='ext.config.propertycolumnmodel'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.columnmodel'>
        <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='propertycolumnmodel' type='ec:ext.config.propertycolumnmodel' substitutionGroup='ec:columnmodel'>
    <xs:annotation>
      <xs:documentation>
        A custom column model for the <a href="Ext.grid.PropertyGrid.html">Ext.grid.PropertyGrid</a>. Generally it should not need to be used directly. <p>This class serves as a typed config object for constructor of class PropertyColumnModel.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.grid.PropertyColumnModel
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.propertygrid'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.editorgrid'>
        <xs:sequence>
            <xs:element name='customEditors' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  An object containing name/value pairs of custom editor type definitions that allow the grid to support additional types of editable fields. By default, the grid supports strongly-typed editing of strings, dates, numbers and booleans using built-in form editors, but any custom type can be supported and associated with a custom input control by specifying a custom editor. The name of the editor type should correspond with the name of the property that will use the editor. Example usage: <pre><code>var grid = new Ext.grid.PropertyGrid({ ... customEditors: { 'Start Time': new Ext.grid.GridEditor(new Ext.form.TimeField({selectOnFocus:true})) }, source: { 'Start Time': '10:00 AM' } }); </code></pre>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='customRenderers' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  An object containing name/value pairs of custom renderer type definitions that allow the grid to support custom rendering of fields. By default, the grid supports strongly-typed rendering of strings, dates, numbers and booleans using built-in form editors, but any custom type can be supported and associated with the type of the value. The name of the renderer type should correspond with the name of the property that it will render. Example usage: <pre><code>var grid = new Ext.grid.PropertyGrid({ ... customRenderers: { Available: function(v){ if(v){ return '<span style="color: green;">Yes</span>'; }else{ return '<span style="color: red;">No</span>'; } } }, source: { Available: true } }); </code></pre>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='propertyNames' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  An object containing property name/display name pairs. If specified, the display name will be shown in the name column instead of the property name.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='source' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A data object to use as the data source of the grid (see <a href="output/Ext.grid.PropertyGrid.html#Ext.grid.PropertyGrid-setSource">setSource</a> for details).
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='customEditors'>
          <xs:annotation>
            <xs:documentation>
              An object containing name/value pairs of custom editor type definitions that allow the grid to support additional types of editable fields. By default, the grid supports strongly-typed editing of strings, dates, numbers and booleans using built-in form editors, but any custom type can be supported and associated with a custom input control by specifying a custom editor. The name of the editor type should correspond with the name of the property that will use the editor. Example usage: <pre><code>var grid = new Ext.grid.PropertyGrid({ ... customEditors: { 'Start Time': new Ext.grid.GridEditor(new Ext.form.TimeField({selectOnFocus:true})) }, source: { 'Start Time': '10:00 AM' } }); </code></pre>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='customRenderers'>
          <xs:annotation>
            <xs:documentation>
              An object containing name/value pairs of custom renderer type definitions that allow the grid to support custom rendering of fields. By default, the grid supports strongly-typed rendering of strings, dates, numbers and booleans using built-in form editors, but any custom type can be supported and associated with the type of the value. The name of the renderer type should correspond with the name of the property that it will render. Example usage: <pre><code>var grid = new Ext.grid.PropertyGrid({ ... customRenderers: { Available: function(v){ if(v){ return '<span style="color: green;">Yes</span>'; }else{ return '<span style="color: red;">No</span>'; } } }, source: { Available: true } }); </code></pre>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='propertyNames'>
          <xs:annotation>
            <xs:documentation>
              An object containing property name/display name pairs. If specified, the display name will be shown in the name column instead of the property name.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='source'>
          <xs:annotation>
            <xs:documentation>
              A data object to use as the data source of the grid (see <a href="output/Ext.grid.PropertyGrid.html#Ext.grid.PropertyGrid-setSource">setSource</a> for details).
            </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='propertygrid' type='ec:ext.config.propertygrid' substitutionGroup='ec:editorgrid'>
    <xs:annotation>
      <xs:documentation>
        A specialized grid implementation intended to mimic the traditional property grid as typically seen in development IDEs. Each row in the grid represents a property of some object, and the data is stored as a set of name/value pairs in <a href="Ext.grid.PropertyRecord.html">Ext.grid.PropertyRecord</a>s. Example usage: <pre><code>var grid = new Ext.grid.PropertyGrid({ title: 'Properties Grid', autoHeight: true, width: 300, renderTo: 'grid-ct', source: { "(name)": "My Object", "Created": new Date(Date.parse('10/15/2006')), "Available": false, "Version": .01, "Description": "A test object" } }); </code></pre> <p>This class serves as a typed config object for constructor of class PropertyGrid.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.grid.PropertyGrid
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.propertystore'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.observable'>
        <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='propertystore' type='ec:ext.config.propertystore' substitutionGroup='ec:observable'>
    <xs:annotation>
      <xs:documentation>
        A custom wrapper for the <a href="Ext.grid.PropertyGrid.html">Ext.grid.PropertyGrid</a>'s <a href="Ext.data.Store.html">Ext.data.Store</a>. This class handles the mapping between the custom data source objects supported by the grid and the <a href="Ext.grid.PropertyRecord.html">Ext.grid.PropertyRecord</a> format required for compatibility with the underlying store. Generally this class should not need to be used directly -- the grid's data should be accessed from the underlying store via the <a href="output/Ext.grid.PropertyStore.html#Ext.grid.PropertyStore-store">store</a> property. <p>This class serves as a typed config object for constructor of class PropertyStore.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.grid.PropertyStore
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.provider'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.observable'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:String' name='id'>
          <xs:annotation>
            <xs:documentation>
              The unique id of the provider (defaults to an <a href="output/Ext.html#Ext-id">auto-assigned id</a>). You should assign an id if you need to be able to access the provider later and you do not have an object reference available, for example: <pre><code>Ext.Direct.addProvider( { type: 'polling', url: 'php/poll.php', id: 'poll-provider' } ); var p = <a href="Ext.Direct.html">Ext.Direct</a>.<a href="output/Ext.Direct.html#Ext.Direct-getProvider">getProvider</a>('poll-provider'); p.disconnect(); </code></pre>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='priority'>
          <xs:annotation>
            <xs:documentation>
              Priority of the request. Lower is higher priority, <tt>0</tt> means "duplex" (always on). All Providers default to <tt>1</tt> except for PollingProvider which defaults to <tt>3</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='type'>
          <xs:annotation>
            <xs:documentation>
              <b>Required</b>, <tt>undefined</tt> by default. The <tt>type</tt> of provider specified to <a href="Ext.Direct.html">Ext.Direct</a>.<a href="output/Ext.Direct.html#Ext.Direct-addProvider">addProvider</a> to create a new Provider. Acceptable values by default are:<div class="mdetail-params"><ul><li><b><tt>polling</tt></b> : <a href="Ext.direct.PollingProvider.html">PollingProvider</a></li><li><b><tt>remoting</tt></b> : <a href="Ext.direct.RemotingProvider.html">RemotingProvider</a></li></ul></div>
            </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='provider' type='ec:ext.config.provider' substitutionGroup='ec:observable'>
    <xs:annotation>
      <xs:documentation>
        Ext.direct.Provider is an abstract class meant to be extended. <p>For example ExtJs implements the following subclasses:</p><pre><code>Provider | +---<a href="Ext.direct.JsonProvider.html">JsonProvider</a> | +---<a href="Ext.direct.PollingProvider.html">PollingProvider</a> | +---<a href="Ext.direct.RemotingProvider.html">RemotingProvider</a> </code></pre> <p>This class serves as a typed config object for constructor of class Provider.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.direct.Provider
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.quicktip'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.tooltip'>
        <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='ec:ext.config.quicktip' substitutionGroup='ec: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='ext.config.radio'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.checkbox'>
        <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='radio' type='ec:ext.config.radio' substitutionGroup='ec:checkbox'>
    <xs:annotation>
      <xs:documentation>
        Single radio field. Same as Checkbox, but provided as a convenience for automatically setting the input type. Radio grouping is handled automatically by the browser if you give each radio in a group the same name. <p>This class represents the xtype 'radio' and serves as a typed config object for constructor of class Radio.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.form.Radio
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.radiogroup'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.checkboxgroup'>
        <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='radiogroup' type='ec:ext.config.radiogroup' substitutionGroup='ec:checkboxgroup'>
    <xs:annotation>
      <xs:documentation>
        A grouping container for <a href="Ext.form.Radio.html">Ext.form.Radio</a> controls. <p>This class represents the xtype 'radiogroup' and serves as a typed config object for constructor of class RadioGroup.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.form.RadioGroup
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.region'>
    <xs:complexContent>
      <xs:extension base='exml:base'>
        <xs:sequence>
            <xs:element name='cmargins' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  An object containing margins to apply to the region when in the collapsed state in the format:<pre><code>{ top: (top margin), right: (right margin), bottom: (bottom margin), left: (left margin) }</code></pre><p>May also be a string containing space-separated, numeric margin values. The order of the sides associated with each value matches the way CSS processes margin values.</p><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><br/><br/>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <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>
                  An object containing margins to apply to the region when in the expanded state in the format:<pre><code>{ top: (top margin), right: (right margin), bottom: (bottom margin), left: (left margin) }</code></pre><p>May also be a string containing space-separated, numeric margin values. The order of the sides associated with each value matches the way CSS processes margin values:</p><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 mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:Boolean' name='animFloat'>
          <xs:annotation>
            <xs:documentation>
              When a collapsed region's bar is clicked, the region's panel will be displayed as a floated panel that will close again once the user mouses out of that panel (or clicks out if <tt><a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-autoHide">autoHide</a> = false</tt>). Setting <tt><a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-animFloat">animFloat</a> = false</tt> will prevent the open and close of these floated panels from being animated (defaults to <tt>true</tt>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='autoHide'>
          <xs:annotation>
            <xs:documentation>
              When a collapsed region's bar is clicked, the region's panel will be displayed as a floated panel. If <tt>autoHide = true</tt>, the panel will automatically hide after the user mouses out of the panel. If <tt>autoHide = false</tt>, the panel will continue to display until the user clicks outside of the panel (defaults to <tt>true</tt>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='cmargins'>
          <xs:annotation>
            <xs:documentation>
              An object containing margins to apply to the region when in the collapsed state in the format:<pre><code>{ top: (top margin), right: (right margin), bottom: (bottom margin), left: (left margin) }</code></pre><p>May also be a string containing space-separated, numeric margin values. The order of the sides associated with each value matches the way CSS processes margin values.</p><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><br/><br/>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='collapseMode'>
          <xs:annotation>
            <xs:documentation>
              <tt>collapseMode</tt> supports two configuration values:<div class="mdetail-params"><ul><li><b><tt>undefined</tt></b> (default)<div class="sub-desc">By default, <a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-collapsible">collapsible</a> regions are collapsed by clicking the expand/collapse tool button that renders into the region's title bar.</div></li><li><b><tt>'mini'</tt></b><div class="sub-desc">Optionally, when <tt>collapseMode</tt> is set to <tt>'mini'</tt> the region's split bar will also display a small collapse button in the center of the bar. In <tt>'mini'</tt> mode the region will collapse to a thinner bar than in normal mode.</div></li></ul></div><br/><br/> <p><b>Note</b>: if a collapsible region does not have a title bar, then set <tt>collapseMode = 'mini'</tt> and <tt><a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-split">split</a> = true</tt> in order for the region to be <a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-collapsible">collapsible</a> by the user as the expand/collapse tool button (that would go in the title bar) will not be rendered.</p><p>See also <tt><a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-cmargins">cmargins</a></tt>.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='collapsible'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> to allow the user to collapse this region (defaults to <tt>false</tt>). If <tt>true</tt>, an expand/collapse tool button will automatically be rendered into the title bar of the region, otherwise the button will not be shown. <p><b>Note</b>: that a title bar is required to display the collapse/expand toggle button -- if no <tt>title</tt> is specified for the region's panel, the region will only be collapsible if <tt><a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-collapseMode">collapseMode</a> = 'mini'</tt> and <tt><a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-split">split</a> = true</tt>.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='floatable'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> to allow clicking a collapsed region's bar to display the region's panel floated above the layout, <tt>false</tt> to force the user to fully expand a collapsed region by clicking the expand button to see it again (defaults to <tt>true</tt>).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='margins'>
          <xs:annotation>
            <xs:documentation>
              An object containing margins to apply to the region when in the expanded state in the format:<pre><code>{ top: (top margin), right: (right margin), bottom: (bottom margin), left: (left margin) }</code></pre><p>May also be a string containing space-separated, numeric margin values. The order of the sides associated with each value matches the way CSS processes margin values:</p><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='minHeight'>
          <xs:annotation>
            <xs:documentation>
              The minimum allowable height in pixels for this region (defaults to <tt>50</tt>) <tt>maxHeight</tt> may also be specified.<br/><br/><br/><p><b>Note</b>: setting the <tt><a href="output/Ext.SplitBar.html#Ext.SplitBar-minSize">minSize</a></tt> / <tt><a href="output/Ext.SplitBar.html#Ext.SplitBar-maxSize">maxSize</a></tt> supersedes any specified <tt>minHeight</tt> / <tt>maxHeight</tt>.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='minWidth'>
          <xs:annotation>
            <xs:documentation>
              The minimum allowable width in pixels for this region (defaults to <tt>50</tt>). <tt>maxWidth</tt> may also be specified. <br/><p><b>Note</b>: setting the <tt><a href="output/Ext.SplitBar.html#Ext.SplitBar-minSize">minSize</a></tt> / <tt><a href="output/Ext.SplitBar.html#Ext.SplitBar-maxSize">maxSize</a></tt> supersedes any specified <tt>minWidth</tt> / <tt>maxWidth</tt>.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='split'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> to create a <a href="Ext.layout.BorderLayout.SplitRegion.html">SplitRegion</a> and display a 5px wide <a href="Ext.SplitBar.html">Ext.SplitBar</a> between this region and its neighbor, allowing the user to resize the regions dynamically. Defaults to <tt>false</tt> creating a <a href="Ext.layout.BorderLayout.Region.html">Region</a>. <br/><p><b>Notes</b>:</p><div class="mdetail-params"><ul><li>this configuration option is ignored if <tt>region='center'</tt></li><li>when <tt>split == true</tt>, it is common to specify a <tt><a href="output/Ext.SplitBar.html#Ext.SplitBar-minSize">minSize</a></tt> and <tt><a href="output/Ext.SplitBar.html#Ext.SplitBar-maxSize">maxSize</a></tt> for the <a href="Ext.BoxComponent.html">BoxComponent</a> representing the region. These are not native configs of <a href="Ext.BoxComponent.html">BoxComponent</a>, and are used only by this class.</li><li>if <tt><a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-collapseMode">collapseMode</a> = 'mini'</tt> requires <tt>split = true</tt> to reserve space for the collapse tool</li></ul></div>
            </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='region' type='ec:ext.config.region'>
    <xs:annotation>
      <xs:documentation>
        This is a region of a <a href="Ext.layout.BorderLayout.html">BorderLayout</a> that acts as a subcontainer within the layout. Each region has its own <a href="Ext.layout.ContainerLayout.html">layout</a> that is independent of other regions and the containing BorderLayout, and can be any of the <a href="Ext.layout.ContainerLayout.html">valid Ext layout types</a>. <p>Region size is managed automatically and cannot be changed by the user -- for <a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-split">resizable regions</a>, see <a href="Ext.layout.BorderLayout.SplitRegion.html">Ext.layout.BorderLayout.SplitRegion</a>.</p> <p>This class serves as a typed config object for constructor of class Region.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.layout.borderlayout.Region
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.remotingprovider'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.jsonprovider'>
        <xs:sequence>
            <xs:element name='actions' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Object literal defining the server side actions and methods. For example, if the Provider is configured with: <pre><code>"actions":{ // each property within the 'actions' object represents a server side Class "TestAction":[ // array of methods within each server side Class to be { // stubbed out on client "name":"doEcho", "len":1 },{ "name":"multiply",// name of method "len":2 // The number of parameters that will be used to create an // array of data to send to the server side function. // Ensure the server sends back a Number, not a String. },{ "name":"doForm", "formHandler":true, // direct the client to use specialized form handling method "len":1 }] } </code></pre><p>Note that a Store is not required, a server method can be called at any time. In the following example a <b>client side</b> handler is used to call the server side method "multiply" in the server-side "TestAction" Class:</p><pre><code>TestAction.multiply( 2, 4, // pass two arguments to server, so specify len=2 // callback function after the server is called // result: the result returned by the server // e: Ext.Direct.RemotingEvent object function(result, e){ var t = e.getTransaction(); var action = t.action; // server side Class called var method = t.method; // server side method called if(e.status){ var answer = Ext.encode(result); // 8 }else{ var msg = e.message; // failure message } } ); </code></pre>In the example above, the server side "multiply" function will be passed two arguments (2 and 4). The "multiply" method should return the value 8 which will be available as the <tt>result</tt> in the example above.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='enableBuffer' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  <tt>true</tt> or <tt>false</tt> to enable or disable combining of method calls. If a number is specified this is the amount of time in milliseconds to wait before sending a batched request (defaults to <tt>10</tt>). <br/><p>Calls which are received within the specified timeframe will be concatenated together and sent in a single request, optimizing the application by reducing the amount of round trips that have to be made to the server.</p>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='namespace' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Namespace for the Remoting Provider (defaults to the browser global scope of <i>window</i>). Explicitly specify the namespace Object, or specify a String to have a <a href="output/Ext.html#Ext-namespace">namespace created</a> implicitly.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='actions'>
          <xs:annotation>
            <xs:documentation>
              Object literal defining the server side actions and methods. For example, if the Provider is configured with: <pre><code>"actions":{ // each property within the 'actions' object represents a server side Class "TestAction":[ // array of methods within each server side Class to be { // stubbed out on client "name":"doEcho", "len":1 },{ "name":"multiply",// name of method "len":2 // The number of parameters that will be used to create an // array of data to send to the server side function. // Ensure the server sends back a Number, not a String. },{ "name":"doForm", "formHandler":true, // direct the client to use specialized form handling method "len":1 }] } </code></pre><p>Note that a Store is not required, a server method can be called at any time. In the following example a <b>client side</b> handler is used to call the server side method "multiply" in the server-side "TestAction" Class:</p><pre><code>TestAction.multiply( 2, 4, // pass two arguments to server, so specify len=2 // callback function after the server is called // result: the result returned by the server // e: Ext.Direct.RemotingEvent object function(result, e){ var t = e.getTransaction(); var action = t.action; // server side Class called var method = t.method; // server side method called if(e.status){ var answer = Ext.encode(result); // 8 }else{ var msg = e.message; // failure message } } ); </code></pre>In the example above, the server side "multiply" function will be passed two arguments (2 and 4). The "multiply" method should return the value 8 which will be available as the <tt>result</tt> in the example above.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='enableBuffer'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> or <tt>false</tt> to enable or disable combining of method calls. If a number is specified this is the amount of time in milliseconds to wait before sending a batched request (defaults to <tt>10</tt>). <br/><p>Calls which are received within the specified timeframe will be concatenated together and sent in a single request, optimizing the application by reducing the amount of round trips that have to be made to the server.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='enableUrlEncode'>
          <xs:annotation>
            <xs:documentation>
              Specify which param will hold the arguments for the method. Defaults to <tt>'data'</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='maxRetries'>
          <xs:annotation>
            <xs:documentation>
              Number of times to re-attempt delivery on failure of a call. Defaults to <tt>1</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='namespace'>
          <xs:annotation>
            <xs:documentation>
              Namespace for the Remoting Provider (defaults to the browser global scope of <i>window</i>). Explicitly specify the namespace Object, or specify a String to have a <a href="output/Ext.html#Ext-namespace">namespace created</a> implicitly.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='timeout'>
          <xs:annotation>
            <xs:documentation>
              The timeout to use for each request. Defaults to <tt>undefined</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='url'>
          <xs:annotation>
            <xs:documentation>
              <b>Required</b>. The url to connect to the <a href="Ext.Direct.html">Ext.Direct</a> server-side router.
            </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='remotingprovider' type='ec:ext.config.remotingprovider' substitutionGroup='ec:jsonprovider'>
    <xs:annotation>
      <xs:documentation>
        The <a href="Ext.direct.RemotingProvider.html">RemotingProvider</a> exposes access to server side methods on the client (a remote procedure call (RPC) type of connection where the client can initiate a procedure on the server). <p>This allows for code to be organized in a fashion that is maintainable, while providing a clear path between client and server, something that is not always apparent when using URLs.</p><p>To accomplish this the server-side needs to describe what classes and methods are available on the client-side. This configuration will typically be outputted by the server-side Ext.Direct stack when the API description is built.</p> <p>This class serves as a typed config object for constructor of class RemotingProvider.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.direct.RemotingProvider
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.request'>
    <xs:complexContent>
      <xs:extension base='exml:base'>
        <xs:sequence>
            <xs:element name='callback' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The function to call when request is complete
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='params' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  HTTP request params
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='reader' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The DataReader instance which will parse the received response
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='rs' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The Store recordset associated with the request.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <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 of the callback function.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='action'>
          <xs:annotation>
            <xs:documentation>
              
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='callback'>
          <xs:annotation>
            <xs:documentation>
              The function to call when request is complete
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='params'>
          <xs:annotation>
            <xs:documentation>
              HTTP request params
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='reader'>
          <xs:annotation>
            <xs:documentation>
              The DataReader instance which will parse the received response
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='rs'>
          <xs:annotation>
            <xs:documentation>
              The Store recordset associated with the request.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='scope'>
          <xs:annotation>
            <xs:documentation>
              The scope of the callback function.
            </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='request' type='ec:ext.config.request'>
    <xs:annotation>
      <xs:documentation>
        A simple Request class used internally to the data package to provide more generalized remote-requests to a DataProxy. TODO Not yet implemented. Implement in Ext.data.Store#execute <p>This class serves as a typed config object for constructor of class Request.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.data.Request
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.resizable'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.observable'>
        <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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 mixed="true">
                <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='ec:ext.config.resizable' substitutionGroup='ec: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='ext.config.response'>
    <xs:complexContent>
      <xs:extension base='exml:base'>
        <xs:sequence>
            <xs:element name='data' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='raw' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The raw response returned from server-code
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='records' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  related to the Request action
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='action'>
          <xs:annotation>
            <xs:documentation>
              <a href="output/Ext.data.Api.html#Ext.data.Api-actions">Ext.data.Api.actions</a>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='data'>
          <xs:annotation>
            <xs:documentation>
              
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='message'>
          <xs:annotation>
            <xs:documentation>
              
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='raw'>
          <xs:annotation>
            <xs:documentation>
              The raw response returned from server-code
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='records'>
          <xs:annotation>
            <xs:documentation>
              related to the Request action
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='success'>
          <xs:annotation>
            <xs:documentation>
              
            </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='response' type='ec:ext.config.response'>
    <xs:annotation>
      <xs:documentation>
        A generic response class to normalize response-handling internally to the framework. <p>This class serves as a typed config object for constructor of class Response.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.data.Response
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.rownumberer'>
    <xs:complexContent>
      <xs:extension base='exml:base'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:String' name='header'>
          <xs:annotation>
            <xs:documentation>
              Any valid text or HTML fragment to display in the header cell for the row number column (defaults to '').
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='width'>
          <xs:annotation>
            <xs:documentation>
              The default width in pixels of the row number column (defaults to 23).
            </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='rownumberer' type='ec:ext.config.rownumberer'>
    <xs:annotation>
      <xs:documentation>
        This is a utility class that can be passed into a <a href="Ext.grid.ColumnModel.html">Ext.grid.ColumnModel</a> as a column config that provides an automatic row numbering column. <br/>Usage:<br/> <pre><code>// This is a typical column config with the first column providing row numbers var colModel = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), {header: "Name", width: 80, sortable: true}, {header: "Code", width: 50, sortable: true}, {header: "Description", width: 200, sortable: true} ]); </code></pre> <p>This class serves as a typed config object for constructor of class RowNumberer.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.grid.RowNumberer
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.rowselectionmodel'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.abstractselectionmodel'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:Boolean' name='moveEditorOnEnter'>
          <xs:annotation>
            <xs:documentation>
              <tt>false</tt> to turn off moving the editor to the next row down when the enter key is pressed or the next row up when shift + enter keys are pressed.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='singleSelect'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> to allow selection of only one row at a time (defaults to <tt>false</tt> allowing multiple selections)
            </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='rowselectionmodel' type='ec:ext.config.rowselectionmodel' substitutionGroup='ec:abstractselectionmodel'>
    <xs:annotation>
      <xs:documentation>
        The default SelectionModel used by <a href="Ext.grid.GridPanel.html">Ext.grid.GridPanel</a>. It supports multiple selections and keyboard selection/navigation. The objects stored as selections and returned by <a href="output/Ext.grid.RowSelectionModel.html#Ext.grid.RowSelectionModel-getSelected">getSelected</a>, and <a href="output/Ext.grid.RowSelectionModel.html#Ext.grid.RowSelectionModel-getSelections">getSelections</a> are the <a href="Ext.data.Record.html">Record</a>s which provide the data for the selected rows. <p>This class serves as a typed config object for constructor of class RowSelectionModel.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.grid.RowSelectionModel
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.scripttagproxy'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.dataproxy'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:String' name='callbackParam'>
          <xs:annotation>
            <xs:documentation>
              The name of the parameter to pass to the server which tells the server the name of the callback function set up by the load call to process the returned data object. Defaults to "callback".<p>The server-side processing must read this parameter value, and generate javascript output which calls this named function passing the data object as its only parameter.</p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='nocache'>
          <xs:annotation>
            <xs:documentation>
              Defaults to true. Disable caching by adding a unique parameter name to the request.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='timeout'>
          <xs:annotation>
            <xs:documentation>
              The number of milliseconds to wait for a response. Defaults to 30 seconds.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='url'>
          <xs:annotation>
            <xs:documentation>
              The URL from which to request the data object.
            </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='scripttagproxy' type='ec:ext.config.scripttagproxy' substitutionGroup='ec:dataproxy'>
    <xs:annotation>
      <xs:documentation>
        An implementation of Ext.data.DataProxy that reads a data object from a URL which may be in a domain other than the originating domain of the running page. <p><b>Note that if you are retrieving data from a page that is in a domain that is NOT the same as the originating domain of the running page, you must use this class, rather than HttpProxy.</b><br/></p><p>The content passed back from a server resource requested by a ScriptTagProxy <b>must</b> be executable JavaScript source code because it is used as the source inside a &lt;script&gt; tag.<br/></p><p>In order for the browser to process the returned data, the server must wrap the data object with a call to a callback function, the name of which is passed as a parameter by the ScriptTagProxy. Below is a Java example for a servlet which returns data for either a ScriptTagProxy, or an HttpProxy depending on whether the callback name was passed:</p><pre><code>boolean scriptTag = false; String cb = request.getParameter("callback"); if (cb != null) { scriptTag = true; response.setContentType("text/javascript"); } else { response.setContentType("application/x-json"); } Writer out = response.getWriter(); if (scriptTag) { out.write(cb + "("); } out.print(dataBlock.toJsonString()); if (scriptTag) { out.write(");"); } </code></pre><p>Below is a PHP example to do the same thing:</p><pre><code>$callback = $_REQUEST['callback']; // Create the output object. $output = array('a' =&gt; 'Apple', 'b' =&gt; 'Banana'); //start output if ($callback) { header('Content-Type: text/javascript'); echo $callback . '(' . json_encode($output) . ');'; } else { header('Content-Type: application/x-json'); echo json_encode($output); } </code></pre><p>Below is the ASP.Net code to do the same thing:</p><pre><code>String jsonString = "{success: true}"; String cb = Request.Params.Get("callback"); String responseString = ""; if (!String.IsNullOrEmpty(cb)) { responseString = cb + "(" + jsonString + ")"; } else { responseString = jsonString; } Response.Write(responseString); </code></pre> <p>This class serves as a typed config object for constructor of class ScriptTagProxy.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.data.ScriptTagProxy
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.scroller'>
    <xs:complexContent>
      <xs:extension base='exml:base'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:String' name='afterCls'>
          <xs:annotation>
            <xs:documentation>
              CSS class added to the afterCt element. This is the element that holds any special items such as scrollers, which must always be present at the rightmost edge of the Container
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='afterScrollerCls'>
          <xs:annotation>
            <xs:documentation>
              CSS class added to the right scroller element if enableScroll is used
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='animateScroll'>
          <xs:annotation>
            <xs:documentation>
              True to animate the scrolling of items within the layout (defaults to true, ignored if enableScroll is false)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='beforeCls'>
          <xs:annotation>
            <xs:documentation>
              CSS class added to the beforeCt element. This is the element that holds any special items such as scrollers, which must always be present at the leftmost edge of the Container
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='beforeScrollerCls'>
          <xs:annotation>
            <xs:documentation>
              CSS class added to the left scroller element if enableScroll is used
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='scrollDuration'>
          <xs:annotation>
            <xs:documentation>
              Number of seconds that each scroll animation lasts (defaults to 0.4)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='scrollIncrement'>
          <xs:annotation>
            <xs:documentation>
              The number of pixels to scroll by on scroller click (defaults to 100)
            </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 scroller button is held down (defaults to 400)
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='scrollerCls'>
          <xs:annotation>
            <xs:documentation>
              CSS class added to both scroller elements if enableScroll is used
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='wheelIncrement'>
          <xs:annotation>
            <xs:documentation>
              The number of pixels to increment on mouse wheel scrolling (defaults to <tt>3</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='scroller' type='ec:ext.config.scroller'>
    <xs:annotation>
      <xs:documentation>
        Description <p>This class serves as a typed config object for constructor of class Scroller.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.layout.boxoverflow.Scroller
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.shadow'>
    <xs:complexContent>
      <xs:extension base='exml:base'>
        <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:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='shadow' type='ec:ext.config.shadow'>
    <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='ext.config.singleslider'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.multislider'>
        <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='singleslider' type='ec:ext.config.singleslider' substitutionGroup='ec:multislider'>
    <xs:annotation>
      <xs:documentation>
        Slider which supports vertical or horizontal orientation, keyboard adjustments, configurable snapping, axis clicking and animation. Can be added as an item to any container. Example usage: <pre><code>new Ext.slider.SingleSlider({ renderTo: Ext.getBody(), width: 200, value: 50, increment: 10, minValue: 0, maxValue: 100 }); </code></pre>The class Ext.slider.SingleSlider is aliased to Ext.Slider for backwards compatibility. <p>This class serves as a typed config object for constructor of class SingleSlider.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.slider.SingleSlider
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.sliderfield'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.field'>
        <xs:sequence>
            <xs:element name='tipText' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A function used to display custom text for the slider tip. Defaults to <tt>null</tt>, which will use the default on the plugin.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='tipText'>
          <xs:annotation>
            <xs:documentation>
              A function used to display custom text for the slider tip. Defaults to <tt>null</tt>, which will use the default on the plugin.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='useTips'>
          <xs:annotation>
            <xs:documentation>
              True to use an Ext.slider.Tip to display tips for the value. Defaults to <tt>true</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='sliderfield' type='ec:ext.config.sliderfield' substitutionGroup='ec:field'>
    <xs:annotation>
      <xs:documentation>
        Wraps a <a href="Ext.slider.MultiSlider.html">Slider</a> so it can be used as a form field. <p>This class represents the xtype 'sliderfield' and serves as a typed config object for constructor of class SliderField.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.form.SliderField
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.slidertip'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.tip'>
        <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='slidertip' type='ec:ext.config.slidertip' substitutionGroup='ec:tip'>
    <xs:annotation>
      <xs:documentation>
        Simple plugin for using an Ext.Tip with a slider to show the slider value. Example usage: <pre> new Ext.Slider({ width: 214, minValue: 0, maxValue: 100, plugins: new Ext.slider.Tip() }); </pre> Optionally provide your own tip text by overriding getText: <pre> new Ext.Slider({ width: 214, minValue: 0, maxValue: 100, plugins: new Ext.slider.Tip({ getText: function(thumb){ return String.format('<b>{0}% complete</b>', thumb.value); } }) }); </pre> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.slider.Tip
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.sorter'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.observable'>
        <xs:sequence>
            <xs:element name='sortClasses' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  The CSS classes applied to a header when it is sorted. (defaults to <tt>["sort-asc", "sort-desc"]</tt>)
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <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='sortClasses'>
          <xs:annotation>
            <xs:documentation>
              The CSS classes applied to a header when it is sorted. (defaults to <tt>["sort-asc", "sort-desc"]</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='sorter' type='ec:ext.config.sorter' substitutionGroup='ec:observable'>
    <xs:annotation>
      <xs:documentation>
        Supporting Class for Ext.list.ListView <p>This class serves as a typed config object for constructor of class Sorter.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.list.Sorter
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.spacer'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.box'>
        <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='ec:ext.config.spacer' substitutionGroup='ec:box'>
    <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='ext.config.splitbar'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.observable'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:Boolean' name='animate'>
          <xs:annotation>
            <xs:documentation>
              Whether to animate the transition to the new size @see http://docs.sencha.com/ext-js/3-4/#!/api/Ext.SplitBar-property-animate Sencha Docs Ext JS 3.4
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='maxSize'>
          <xs:annotation>
            <xs:documentation>
              The maximum size of the resizing element. (Defaults to 2000) @see http://docs.sencha.com/ext-js/3-4/#!/api/Ext.SplitBar-property-maxSize Sencha Docs Ext JS 3.4
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='minSize'>
          <xs:annotation>
            <xs:documentation>
              The minimum size of the resizing element. (Defaults to 0) @see http://docs.sencha.com/ext-js/3-4/#!/api/Ext.SplitBar-property-minSize Sencha Docs Ext JS 3.4
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='tickSize'>
          <xs:annotation>
            <xs:documentation>
              The increment, in pixels by which to move this SplitBar. When <i>undefined</i>, the SplitBar moves smoothly. @see http://docs.sencha.com/ext-js/3-4/#!/api/Ext.SplitBar-property-tickSize Sencha Docs Ext JS 3.4
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='useShim'>
          <xs:annotation>
            <xs:documentation>
              Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes. @see http://docs.sencha.com/ext-js/3-4/#!/api/Ext.SplitBar-property-useShim Sencha Docs Ext JS 3.4
            </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='splitbar' type='ec:ext.config.splitbar' substitutionGroup='ec: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='ext.config.splitbutton'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.button'>
        <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 mixed="true">
                <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='ec:ext.config.splitbutton' substitutionGroup='ec: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='ext.config.splitregion'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.region'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:String' name='collapsibleSplitTip'>
          <xs:annotation>
            <xs:documentation>
              The tooltip to display when the user hovers over a <a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-collapsible">collapsible</a> region's split bar (defaults to "Drag to resize. Double click to hide."). Only applies if <tt><a href="output/Ext.layout.BorderLayout.SplitRegion.html#Ext.layout.BorderLayout.SplitRegion-useSplitTips">useSplitTips</a> = true</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='splitTip'>
          <xs:annotation>
            <xs:documentation>
              The tooltip to display when the user hovers over a <a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-collapsible">non-collapsible</a> region's split bar (defaults to <tt>"Drag to resize."</tt>). Only applies if <tt><a href="output/Ext.layout.BorderLayout.SplitRegion.html#Ext.layout.BorderLayout.SplitRegion-useSplitTips">useSplitTips</a> = true</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='tickSize'>
          <xs:annotation>
            <xs:documentation>
              The increment, in pixels by which to move this Region's <a href="Ext.SplitBar.html">SplitBar</a>. By default, the <a href="Ext.SplitBar.html">SplitBar</a> moves smoothly.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='useSplitTips'>
          <xs:annotation>
            <xs:documentation>
              <tt>true</tt> to display a tooltip when the user hovers over a region's split bar (defaults to <tt>false</tt>). The tooltip text will be the value of either <tt><a href="output/Ext.layout.BorderLayout.SplitRegion.html#Ext.layout.BorderLayout.SplitRegion-splitTip">splitTip</a></tt> or <tt><a href="output/Ext.layout.BorderLayout.SplitRegion.html#Ext.layout.BorderLayout.SplitRegion-collapsibleSplitTip">collapsibleSplitTip</a></tt> as appropriate.
            </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='splitregion' type='ec:ext.config.splitregion' substitutionGroup='ec:region'>
    <xs:annotation>
      <xs:documentation>
        This is a specialized type of <a href="Ext.layout.BorderLayout.Region.html">BorderLayout region</a> that has a built-in <a href="Ext.SplitBar.html">Ext.SplitBar</a> for user resizing of regions. The movement of the split bar is configurable to move either <a href="output/Ext.layout.BorderLayout.SplitRegion.html#Ext.layout.BorderLayout.SplitRegion-tickSize">smooth or incrementally</a>. <p>This class serves as a typed config object for constructor of class SplitRegion.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.layout.borderlayout.SplitRegion
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.stackedbarchart'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.cartesianchart'>
        <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='stackedbarchart' type='ec:ext.config.stackedbarchart' substitutionGroup='ec:cartesianchart'>
    <xs:annotation>
      <xs:documentation>
        <p>This class represents the xtype 'stackedbarchart' and serves as a typed config object for constructor of class StackedBarChart.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.chart.StackedBarChart
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.stackedcolumnchart'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.cartesianchart'>
        <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='stackedcolumnchart' type='ec:ext.config.stackedcolumnchart' substitutionGroup='ec:cartesianchart'>
    <xs:annotation>
      <xs:documentation>
        <p>This class represents the xtype 'stackedcolumnchart' and serves as a typed config object for constructor of class StackedColumnChart.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.chart.StackedColumnChart
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.statusproxy'>
    <xs:complexContent>
      <xs:extension base='exml:base'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:String' name='dropAllowed'>
          <xs:annotation>
            <xs:documentation>
              The CSS class to apply to the status element when drop is allowed (defaults to "x-dd-drop-ok").
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='dropNotAllowed'>
          <xs:annotation>
            <xs:documentation>
              The CSS class to apply to the status element when drop is not allowed (defaults to "x-dd-drop-nodrop").
            </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='statusproxy' type='ec:ext.config.statusproxy'>
    <xs:annotation>
      <xs:documentation>
        A specialized drag proxy that supports a drop status icon, <a href="Ext.Layer.html">Ext.Layer</a> styles and auto-repair. This is the default drag proxy used by all Ext.dd components. <p>This class serves as a typed config object for constructor of class StatusProxy.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.dd.StatusProxy
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ext.config.store'>
    <xs:complexContent>
      <xs:extension base='ec:ext.config.observable'>
        <xs:sequence>
            <xs:element name='autoLoad' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  If <tt><a href="output/Ext.data.Store.html#Ext.data.Store-data">data</a></tt> is not specified, and if <tt>autoLoad</tt> is <tt>true</tt> or an <tt>Object</tt>, this store's <a href="output/Ext.data.Store.html#Ext.data.Store-load">load</a> method is automatically called after creation. If the value of <tt>autoLoad</tt> is an <tt>Object</tt>, this <tt>Object</tt> will be passed to the store's <a href="output/Ext.data.Store.html#Ext.data.Store-load">load</a> method.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='baseParams' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  An object containing properties which are to be sent as parameters for <i>every</i> HTTP request. <p>Parameters are encoded as standard HTTP parameters using <a href="output/Ext.html#Ext-urlEncode">Ext.urlEncode</a>.</p><p><b>Note</b>: <code>baseParams</code> may be superseded by any <code>params</code> specified in a <code><a href="output/Ext.data.Store.html#Ext.data.Store-load">load</a></code> request, see <code><a href="output/Ext.data.Store.html#Ext.data.Store-load">load</a></code> for more details.</p>This property may be modified after creation using the <code><a href="output/Ext.data.Store.html#Ext.data.Store-setBaseParam">setBaseParam</a></code> method.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='data' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  An inline data object readable by the <code><a href="output/Ext.data.Store.html#Ext.data.Store-reader">reader</a></code>. Typically this option, or the <code><a href="output/Ext.data.Store.html#Ext.data.Store-url">url</a></code> option will be specified.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <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='defaultParamNames' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  Provides the default values for the <a href="output/Ext.data.Store.html#Ext.data.Store-paramNames">paramNames</a> property. To globally modify the parameters for all stores, this object should be changed on the store prototype.
                </xs:documentation>
              </xs:annotation>
              <xs:complexType mixed="true">
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
            <xs:element name='paramNames' minOccurs="