(function(mod) {
  if (typeof exports == "object" && typeof module == "object") // CommonJS
    return mod(require("tern/lib/infer"), require("tern/lib/tern"));
  if (typeof define == "function" && define.amd) // AMD
    return define([ "tern/lib/infer", "tern/lib/tern" ], mod);
  mod(tern, tern);
})(function(infer, tern) {
  "use strict";

  tern.registerPlugin("extjs_4.2.1", function(server, options) {
    server.on("completion", findCompletions);
    server.addDefs(defs);
  });

  function findCompletions(file, query) {
    var wordEnd = tern.resolvePos(file, query.end);
    var expressionsAround = {
      expr: infer.findExpressionAround(file.ast, null, wordEnd, file.scope),
      callExpr: infer.findExpressionAround(file.ast, null, wordEnd, file.scope, 'CallExpression'),
      propExpr: infer.findExpressionAround(file.ast, null, wordEnd, file.scope, 'Property')
    };
    // probably worth to make modules at some point
    return (
      findCompletionsForXtypeStrings(file, query, wordEnd, expressionsAround) ||
      findCompletionsForXtypeObjectProperties(file, query, wordEnd, expressionsAround) ||
      findCompletionsForExtDefine(file, query, wordEnd, expressionsAround)
    );
  }

  // **************************************************
  // Utils
  // **************************************************

  function getPropertyNameToComplete(propExpr) {
    return propExpr ? propExpr.node.key.name : '';
  }

  function extractPropertyValue(objExpr, propName) {
    var className;
    var properties = objExpr.node.properties;
    if (!properties) {
      return;
    }
    properties.some(function (node) {
      if (node.key.name === propName) {
        var val = node.value;
        if (val.type === 'Literal' && val.value) {
          className = val.value;
        }
        return true;
      }
      return false;
    });
    return className;
  }

  function getConfigDefForClass(className) {
    var classConfigDef;
    var cx = infer.cx();
    if (className) {
      var parentDefinitionName = className.replace(/\./g, '_') + '_cfg';
      classConfigDef = cx.definitions.extjs[parentDefinitionName];
    } else {
      configDef = cx.definitions.Ext_cfg;
    }
    return classConfigDef;
  }

  function getConfigCompletionsFor(query, propNameToComplete, curProto) {
    var completions = [];
    var depth = 0;
    for (; curProto; curProto = curProto.proto) {
      for (var name in curProto.props) {
        if (name.lastIndexOf(propNameToComplete, 0) === 0) {
          tern.addCompletion(query, completions, name, curProto.props[name], depth);
        }
      }
      depth++;
    }
    return completions;
  }

  function isObjParentOf(parentExpr, childExpr) {
    var properties = parentExpr.node.properties;
    return properties && properties.indexOf(childExpr.node) !== -1;
  }

  function getAliases() {
    var extDefs = null;
    infer.cx().parent.defs.some(function (curDefs) {
      if (curDefs['!name'] === 'extjs') {
        extDefs = curDefs;
        return true;
      }
    });
    return extDefs && extDefs['!data'] && extDefs['!data'].aliases;
  }


  // **************************************************
  // xtypes
  // **************************************************

  function findCompletionsForXtypeObjectProperties(file, query, wordEnd, expressionsAround) {
    var objExpr = expressionsAround.expr;
    var propExpr = expressionsAround.propExpr;
    if (!objExpr || !objExpr.node.type === 'ObjectExpression' || !propExpr) {
      return;
    }
    if (!isObjParentOf(objExpr, propExpr)) {
      return;
    }
    var propNode = propExpr.node;

    var xtype = extractPropertyValue(objExpr, 'xtype');
    if (!xtype) {
      return;
    }
    var classDef = getConfigClassDefForXtype(xtype, propExpr);
    var propNameToComplete = getPropertyNameToComplete(propExpr);
    var completions = getConfigCompletionsFor(query, propNameToComplete, classDef);

    var propNode = propExpr && propExpr.node;
    var start = propNode ? propNode.start : wordEnd;
    var end = propNode ? propNode.end : wordEnd;
    return {
      start: tern.outputPos(query, file, start),
      end: tern.outputPos(query, file, end),
      isProperty: true,
      isObjectKey: true,
      completions: completions
    };
  }

  function findCompletionsForXtypeStrings(file, query, wordEnd, expressionsAround) {
    var thisExpr = expressionsAround.expr;
    var propExpr = expressionsAround.propExpr;
    if (!thisExpr || thisExpr.node.type !== 'Literal' || !propExpr ) {
      return;
    }
    var propNode = propExpr.node;
    if (propNode.value !== thisExpr.node || propNode.key.name !== 'xtype') {
      return;
    }
    var aliases = getAliases();
    if (!aliases || !aliases.widget) {
      return;
    }
    var start = thisExpr.start;
    var end = thisExpr.end;
    return {
      start: tern.outputPos(query, file, start),
      end: tern.outputPos(query, file, end),
      isProperty: false,
      isObjectKey: false,
      completions: Object.keys(aliases.widget).reduce(function (completions, xtype) {
        if (xtype.lastIndexOf(thisExpr.node.value, 0) === 0) {
          completions.push({
            origin: 'extjs',
            name: xtype
          });
        }
        return completions;
      }, [])
    };

  }

  function getConfigClassDefForXtype(xtype, propExpr) {
    var aliases = getAliases();
    if (!aliases || !aliases.widget) {
      return;
    }
    var widgets = aliases.widget;
    var className = widgets[xtype];
    if (!className) {
      return;
    }
    return getConfigDefForClass(className);
  }

  // **************************************************
  // Ext.define
  // **************************************************

  function findCompletionsForExtDefine(file, query, wordEnd, expressionsAround) {
    var callExpr = expressionsAround.callExpr;
    var objExpr = expressionsAround.expr;
    if (!objExpr || !objExpr.node.type === 'ObjectExpression') {
      return;
    }
    var propExpr = expressionsAround.propExpr;
    if (!isExtDefineCallExpression(callExpr, objExpr)) {
      return;
    }

    // Is the object expression the parent of the property being auto-completed?
    if (propExpr && !isObjParentOf(objExpr, propExpr)) {
      return;
    }

    var parentDef = getParentClassConfigDefinition(objExpr);
    var propNameToComplete = getPropertyNameToComplete(propExpr);
    var completions = getConfigCompletionsFor(query, propNameToComplete, parentDef);

    var propNode = propExpr && propExpr.node;
    var start = propNode ? propNode.start : wordEnd;
    var end = propNode ? propNode.end : wordEnd;
    return {
      start: tern.outputPos(query, file, start),
      end: tern.outputPos(query, file, end),
      isProperty: true,
      isObjectKey: true,
      completions: completions
    };
  }

  function getParentClassConfigDefinition(objExpr) {
    var parentClass = extractPropertyValue(objExpr, 'extend');
    return getConfigDefForClass(parentClass);
  }

  function isExtDefineCallExpression(callExpr, objExpr) {
    // check we're going to autocomplete direct properties
    if (!callExpr) {
      return false;
    }
    var callee = callExpr.node.callee;
    if (!callee || !callee.object.name === 'Ext' || !callee.property.name === 'define') {
      return false;
    }
    if (callExpr.node.arguments[1] !== objExpr.node) {
      return false;
    }
    return true;
  }

  var defs = {"!name":"extjs","!define":{"Ext_AbstractComponent_cfg":{"!proto":"Ext_Base_cfg","autoEl":{"!type":"string|?","!doc":"<p>A tag name or <a href=\"#!/api/Ext.DomHelper\" rel=\"Ext.DomHelper\" class=\"docClass\">DomHelper</a> spec used to create the <a href=\"#!/api/Ext.AbstractComponent-method-getEl\" rel=\"Ext.AbstractComponent-method-getEl\" class=\"docClass\">Element</a> which will\nencapsulate this Component.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong>'div'</strong>. The more complex Sencha classes use a more\ncomplex DOM structure specified by their own <a href=\"#!/api/Ext.AbstractComponent-cfg-renderTpl\" rel=\"Ext.AbstractComponent-cfg-renderTpl\" class=\"docClass\">renderTpl</a>s.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components encapsulated by\ndifferent DOM elements. Example usage:</p>\n\n<pre><code>{\n    xtype: 'component',\n    autoEl: {\n        tag: 'img',\n        src: 'http://www.example.com/example.jpg'\n    }\n}, {\n    xtype: 'component',\n    autoEl: {\n        tag: 'blockquote',\n        html: 'autoEl is cool!'\n    }\n}, {\n    xtype: 'container',\n    autoEl: 'ul',\n    cls: 'ux-unordered-list',\n    items: {\n        xtype: 'component',\n        autoEl: 'li',\n        html: 'First list item'\n    }\n}\n</code></pre>\n"},"autoLoad":{"!type":"+Ext.ComponentLoader|?|string|bool","!doc":"<p>An alias for <a href=\"#!/api/Ext.AbstractComponent-cfg-loader\" rel=\"Ext.AbstractComponent-cfg-loader\" class=\"docClass\">loader</a> config which also allows to specify just a string which will be\nused as the url that's automatically loaded:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>', {\n    autoLoad: 'content.html',\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n\n<p>The above is the same as:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>', {\n    loader: {\n        url: 'content.html',\n        autoLoad: true\n    },\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n\n<p>Don't use it together with <a href=\"#!/api/Ext.AbstractComponent-cfg-loader\" rel=\"Ext.AbstractComponent-cfg-loader\" class=\"docClass\">loader</a> config.</p>\n"},"autoRender":{"!type":"bool|string|+HTMLElement|+Ext.Element","!doc":"<p>This config is intended mainly for non-<a href=\"#!/api/Ext.AbstractComponent-cfg-floating\" rel=\"Ext.AbstractComponent-cfg-floating\" class=\"docClass\">floating</a> Components which may or may not be shown. Instead of using\n<a href=\"#!/api/Ext.AbstractComponent-cfg-renderTo\" rel=\"Ext.AbstractComponent-cfg-renderTo\" class=\"docClass\">renderTo</a> in the configuration, and rendering upon construction, this allows a Component to render itself\nupon first <em><a href=\"#!/api/Ext.Component-method-show\" rel=\"Ext.Component-method-show\" class=\"docClass\">show</a></em>. If <a href=\"#!/api/Ext.AbstractComponent-cfg-floating\" rel=\"Ext.AbstractComponent-cfg-floating\" class=\"docClass\">floating</a> is <code>true</code>, the value of this config is omitted as if it is <code>true</code>.</p>\n\n<p>Specify as <code>true</code> to have this Component render to the document body upon first show.</p>\n\n<p>Specify as an element, or the ID of an element to have this Component render to a specific element upon first\nshow.</p>\n"},"autoShow":{"!type":"bool","!doc":"<p><code>true</code> to automatically show the component upon creation. This config option may only be used for\n<a href=\"#!/api/Ext.AbstractComponent-cfg-floating\" rel=\"Ext.AbstractComponent-cfg-floating\" class=\"docClass\">floating</a> components or components that use <a href=\"#!/api/Ext.AbstractComponent-cfg-autoRender\" rel=\"Ext.AbstractComponent-cfg-autoRender\" class=\"docClass\">autoRender</a>.</p>\n"},"baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this component's element. This will also be prepended to elements within this\ncomponent like Panel's body will get a class <code>x-panel-body</code>. This means that if you create a subclass of Panel, and\nyou want it to get all the Panels styling for the element and the body, you leave the <code>baseCls</code> <code>x-panel</code> and use\n<code>componentCls</code> to add specific styling for this component.</p>\n"},"border":{"!type":"number|string|bool","!doc":"<p>Specifies the border size for this component. The border can be a single numeric value to apply to all sides or it can\nbe a CSS style specification for each style, for example: '10 5 3 10' (top, right, bottom, left).</p>\n\n<p>For components that have no border by default, setting this won't make the border appear by itself.\nYou also need to specify border color and style:</p>\n\n<pre><code>border: 5,\nstyle: {\n    borderColor: 'red',\n    borderStyle: 'solid'\n}\n</code></pre>\n\n<p>To turn off the border, use <code>border: false</code>.</p>\n"},"childEls":{"!type":"[?]","!doc":"<p>An array describing the child elements of the Component. Each member of the array\nis an object with these properties:</p>\n\n<ul>\n<li><code>name</code> - The property name on the Component for the child element.</li>\n<li><code>itemId</code> - The id to combine with the Component's id that is the id of the child element.</li>\n<li><code>id</code> - The id of the child element.</li>\n</ul>\n\n\n<p>If the array member is a string, it is equivalent to <code>{ name: m, itemId: m }</code>.</p>\n\n<p>For example, a Component which renders a title and body text:</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>', {\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    renderTpl: [\n        '&lt;h1 id=\"{id}-title\"&gt;{title}&lt;/h1&gt;',\n        '&lt;p&gt;{msg}&lt;/p&gt;',\n    ],\n    renderData: {\n        title: \"Error\",\n        msg: \"Something went wrong\"\n    },\n    childEls: [\"title\"],\n    listeners: {\n        afterrender: function(cmp){\n            // After rendering the component will have a title property\n            cmp.title.setStyle({color: \"red\"});\n        }\n    }\n});\n</code></pre>\n\n<p>A more flexible, but somewhat slower, approach is <a href=\"#!/api/Ext.AbstractComponent-cfg-renderSelectors\" rel=\"Ext.AbstractComponent-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a>.</p>\n"},"cls":{"!type":"string","!doc":"<p>An optional extra CSS class that will be added to this component's Element. This can be useful\nfor adding customized styles to the component or any of its children using standard CSS rules.</p>\n"},"componentCls":{"!type":"string","!doc":"<p>CSS Class to be added to a components root level element to give distinction to it via styling.</p>\n"},"componentLayout":{"!type":"string|?","!doc":"<p>The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout\nmanager which sizes a Component's internal structure in response to the Component being sized.</p>\n\n<p>Generally, developers will not use this configuration as all provided Components which need their internal\nelements sizing (Such as <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">input fields</a>) come with their own componentLayout managers.</p>\n\n<p>The <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used on instances of the base <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\nclass which simply sizes the Component's encapsulating element to the height and width specified in the\n<a href=\"#!/api/Ext.AbstractComponent-method-setSize\" rel=\"Ext.AbstractComponent-method-setSize\" class=\"docClass\">setSize</a> method.</p>\n"},"contentEl":{"!type":"string","!doc":"<p>Specify an existing HTML element, or the <code>id</code> of an existing HTML element to use as the content for this component.</p>\n\n<p>This config option is used to take an existing HTML element and place it in the layout element of a new component\n(it simply moves the specified DOM element <em>after the Component is rendered</em> to use as the content.</p>\n\n<p><strong>Notes:</strong></p>\n\n<p>The specified HTML element is appended to the layout element of the component <em>after any configured\n<a href=\"#!/api/Ext.AbstractComponent-cfg-html\" rel=\"Ext.AbstractComponent-cfg-html\" class=\"docClass\">HTML</a> has been inserted</em>, and so the document will not contain this element at the time\nthe <a href=\"#!/api/Ext.AbstractComponent-event-render\" rel=\"Ext.AbstractComponent-event-render\" class=\"docClass\">render</a> event is fired.</p>\n\n<p>The specified HTML element used will not participate in any <strong><code><a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">layout</a></code></strong>\nscheme that the Component may use. It is just HTML. Layouts operate on child\n<strong><code><a href=\"#!/api/Ext.container.Container-cfg-items\" rel=\"Ext.container.Container-cfg-items\" class=\"docClass\">items</a></code></strong>.</p>\n\n<p>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\nis rendered to the panel.</p>\n"},"data":{"!type":"?","!doc":"<p>The initial set of data to apply to the <code><a href=\"#!/api/Ext.AbstractComponent-cfg-tpl\" rel=\"Ext.AbstractComponent-cfg-tpl\" class=\"docClass\">tpl</a></code> to update the content area of the Component.</p>\n"},"disabled":{"!type":"bool","!doc":"<p><code>true</code> to disable the component.</p>\n"},"disabledCls":{"!type":"string","!doc":"<p>CSS class to add when the Component is disabled.</p>\n"},"draggable":{"!type":"bool","!doc":"<p>Allows the component to be dragged.</p>\n"},"floating":{"!type":"bool","!doc":"<p>Create the Component as a floating and use absolute positioning.</p>\n\n<p>The z-index of floating Components is handled by a ZIndexManager. If you simply render a floating Component into the DOM, it will be managed\nby the global <a href=\"#!/api/Ext.WindowManager\" rel=\"Ext.WindowManager\" class=\"docClass\">WindowManager</a>.</p>\n\n<p>If you include a floating Component as a child item of a Container, then upon render, Ext JS will seek an ancestor floating Component to house a new\nZIndexManager instance to manage its descendant floaters. If no floating ancestor can be found, the global WindowManager will be used.</p>\n\n<p>When a floating Component which has a ZindexManager managing descendant floaters is destroyed, those descendant floaters will also be destroyed.</p>\n"},"frame":{"!type":"bool","!doc":"<p>Specify as <code>true</code> to have the Component inject framing elements within the Component at render time to provide a\ngraphical rounded frame around the Component content.</p>\n\n<p>This is only necessary when running on outdated, or non standard-compliant browsers such as Microsoft's Internet\nExplorer prior to version 9 which do not support rounded corners natively.</p>\n\n<p>The extra space taken up by this framing is available from the read only property <a href=\"#!/api/Ext.AbstractComponent-property-frameSize\" rel=\"Ext.AbstractComponent-property-frameSize\" class=\"docClass\">frameSize</a>.</p>\n"},"height":{"!type":"number","!doc":"<p>The height of this component in pixels.</p>\n"},"hidden":{"!type":"bool","!doc":"<p><code>true</code> to hide the component.</p>\n"},"hideMode":{"!type":"string","!doc":"<p>A String which specifies how this Component's encapsulating DOM element will be hidden. Values may be:</p>\n\n<ul>\n<li><code>'display'</code> : The Component will be hidden using the <code>display: none</code> style.</li>\n<li><code>'visibility'</code> : The Component will be hidden using the <code>visibility: hidden</code> style.</li>\n<li><code>'offsets'</code> : The Component will be hidden by absolutely positioning it out of the visible area of the document.\nThis is useful when a hidden Component must maintain measurable dimensions. Hiding using <code>display</code> results in a\nComponent having zero dimensions.</li>\n</ul>\n\n"},"html":{"!type":"string|?","!doc":"<p>An HTML fragment, or a <a href=\"#!/api/Ext.DomHelper\" rel=\"Ext.DomHelper\" class=\"docClass\">DomHelper</a> specification to use as the layout element content.\nThe HTML content is added after the component is rendered, so the document will not contain this HTML at the time\nthe <a href=\"#!/api/Ext.AbstractComponent-event-render\" rel=\"Ext.AbstractComponent-event-render\" class=\"docClass\">render</a> event is fired. This content is inserted into the body <em>before</em> any configured <a href=\"#!/api/Ext.AbstractComponent-cfg-contentEl\" rel=\"Ext.AbstractComponent-cfg-contentEl\" class=\"docClass\">contentEl</a>\nis appended.</p>\n"},"id":{"!type":"string","!doc":"<p>The <strong>unique id of this component instance.</strong></p>\n\n<p>It should not be necessary to use this configuration except for singleton objects in your application. Components\ncreated with an <code>id</code> may be accessed globally using <a href=\"#!/api/Ext-method-getCmp\" rel=\"Ext-method-getCmp\" class=\"docClass\">Ext.getCmp</a>.</p>\n\n<p>Instead of using assigned ids, use the <a href=\"#!/api/Ext.AbstractComponent-cfg-itemId\" rel=\"Ext.AbstractComponent-cfg-itemId\" class=\"docClass\">itemId</a> config, and <a href=\"#!/api/Ext.ComponentQuery\" rel=\"Ext.ComponentQuery\" class=\"docClass\">ComponentQuery</a>\nwhich provides selector-based searching for Sencha Components analogous to DOM querying. The <a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Container</a> class contains <a href=\"#!/api/Ext.container.Container-method-down\" rel=\"Ext.container.Container-method-down\" class=\"docClass\">shortcut methods</a> to query\nits descendant Components by selector.</p>\n\n<p>Note that this <code>id</code> will also be used as the element id for the containing HTML element that is rendered to the\npage for this component. This allows you to write id-based CSS rules to style the specific instance of this\ncomponent uniquely, and also to select sub-elements using this component's <code>id</code> as the parent.</p>\n\n<p><strong>Note:</strong> To avoid complications imposed by a unique <code>id</code> also see <code><a href=\"#!/api/Ext.AbstractComponent-cfg-itemId\" rel=\"Ext.AbstractComponent-cfg-itemId\" class=\"docClass\">itemId</a></code>.</p>\n\n<p><strong>Note:</strong> To access the container of a Component see <code><a href=\"#!/api/Ext.AbstractComponent-property-ownerCt\" rel=\"Ext.AbstractComponent-property-ownerCt\" class=\"docClass\">ownerCt</a></code>.</p>\n\n<p>Defaults to an <a href=\"#!/api/Ext.AbstractComponent-method-getId\" rel=\"Ext.AbstractComponent-method-getId\" class=\"docClass\">auto-assigned id</a>.</p>\n"},"itemId":{"!type":"string","!doc":"<p>An <code>itemId</code> can be used as an alternative way to get a reference to a component when no object reference is\navailable. Instead of using an <code><a href=\"#!/api/Ext.AbstractComponent-cfg-id\" rel=\"Ext.AbstractComponent-cfg-id\" class=\"docClass\">id</a></code> with <a href=\"#!/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a>.<a href=\"#!/api/Ext-method-getCmp\" rel=\"Ext-method-getCmp\" class=\"docClass\">getCmp</a>, use <code>itemId</code> with\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>.<a href=\"#!/api/Ext.container.Container-method-getComponent\" rel=\"Ext.container.Container-method-getComponent\" class=\"docClass\">getComponent</a> which will retrieve\n<code>itemId</code>'s or <a href=\"#!/api/Ext.AbstractComponent-cfg-id\" rel=\"Ext.AbstractComponent-cfg-id\" class=\"docClass\">id</a>'s. Since <code>itemId</code>'s are an index to the container's internal MixedCollection, the\n<code>itemId</code> is scoped locally to the container -- avoiding potential conflicts with <a href=\"#!/api/Ext.ComponentManager\" rel=\"Ext.ComponentManager\" class=\"docClass\">Ext.ComponentManager</a>\nwhich requires a <strong>unique</strong> <code><a href=\"#!/api/Ext.AbstractComponent-cfg-id\" rel=\"Ext.AbstractComponent-cfg-id\" class=\"docClass\">id</a></code>.</p>\n\n<pre><code>var c = new <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>({ //\n    <a href=\"#!/api/Ext.Component-cfg-height\" rel=\"Ext.Component-cfg-height\" class=\"docClass\">height</a>: 300,\n    <a href=\"#!/api/Ext.AbstractComponent-cfg-renderTo\" rel=\"Ext.AbstractComponent-cfg-renderTo\" class=\"docClass\">renderTo</a>: document.body,\n    <a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">layout</a>: 'auto',\n    <a href=\"#!/api/Ext.container.Container-cfg-items\" rel=\"Ext.container.Container-cfg-items\" class=\"docClass\">items</a>: [\n        {\n            itemId: 'p1',\n            <a href=\"#!/api/Ext.panel.Panel-cfg-title\" rel=\"Ext.panel.Panel-cfg-title\" class=\"docClass\">title</a>: 'Panel 1',\n            <a href=\"#!/api/Ext.Component-cfg-height\" rel=\"Ext.Component-cfg-height\" class=\"docClass\">height</a>: 150\n        },\n        {\n            itemId: 'p2',\n            <a href=\"#!/api/Ext.panel.Panel-cfg-title\" rel=\"Ext.panel.Panel-cfg-title\" class=\"docClass\">title</a>: 'Panel 2',\n            <a href=\"#!/api/Ext.Component-cfg-height\" rel=\"Ext.Component-cfg-height\" class=\"docClass\">height</a>: 150\n        }\n    ]\n})\np1 = c.<a href=\"#!/api/Ext.container.Container-method-getComponent\" rel=\"Ext.container.Container-method-getComponent\" class=\"docClass\">getComponent</a>('p1'); // not the same as <a href=\"#!/api/Ext-method-getCmp\" rel=\"Ext-method-getCmp\" class=\"docClass\">Ext.getCmp()</a>\np2 = p1.<a href=\"#!/api/Ext.AbstractComponent-property-ownerCt\" rel=\"Ext.AbstractComponent-property-ownerCt\" class=\"docClass\">ownerCt</a>.<a href=\"#!/api/Ext.container.Container-method-getComponent\" rel=\"Ext.container.Container-method-getComponent\" class=\"docClass\">getComponent</a>('p2'); // reference via a sibling\n</code></pre>\n\n<p>Also see <a href=\"#!/api/Ext.AbstractComponent-cfg-id\" rel=\"Ext.AbstractComponent-cfg-id\" class=\"docClass\">id</a>, <code><a href=\"#!/api/Ext.container.Container-method-query\" rel=\"Ext.container.Container-method-query\" class=\"docClass\">Ext.container.Container.query</a></code>, <code><a href=\"#!/api/Ext.container.Container-method-down\" rel=\"Ext.container.Container-method-down\" class=\"docClass\">Ext.container.Container.down</a></code> and\n<code><a href=\"#!/api/Ext.container.Container-method-child\" rel=\"Ext.container.Container-method-child\" class=\"docClass\">Ext.container.Container.child</a></code>.</p>\n\n<p><strong>Note</strong>: to access the container of an item see <a href=\"#!/api/Ext.AbstractComponent-property-ownerCt\" rel=\"Ext.AbstractComponent-property-ownerCt\" class=\"docClass\">ownerCt</a>.</p>\n"},"listeners":{"!type":"?","!doc":"<p>A config object containing one or more event handlers to be added to this object during initialization. This\nshould be a valid listeners config object as specified in the <a href=\"#!/api/Ext.util.Observable-method-addListener\" rel=\"Ext.util.Observable-method-addListener\" class=\"docClass\">addListener</a> example for attaching multiple\nhandlers at once.</p>\n\n<p><strong>DOM events from Ext JS <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Components</a></strong></p>\n\n<p>While <em>some</em> Ext JS Component classes export selected DOM events (e.g. \"click\", \"mouseover\" etc), this is usually\nonly done when extra value can be added. For example the <a href=\"#!/api/Ext.view.View\" rel=\"Ext.view.View\" class=\"docClass\">DataView</a>'s <strong><code><a href=\"#!/api/Ext.view.View-event-itemclick\" rel=\"Ext.view.View-event-itemclick\" class=\"docClass\">itemclick</a></code></strong> event passing the node clicked on. To access DOM events directly from a\nchild element of a Component, we need to specify the <code>element</code> option to identify the Component property to add a\nDOM listener to:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>({\n    width: 400,\n    height: 200,\n    dockedItems: [{\n        xtype: 'toolbar'\n    }],\n    listeners: {\n        click: {\n            element: 'el', //bind to the underlying el property on the panel\n            fn: function(){ console.log('click el'); }\n        },\n        dblclick: {\n            element: 'body', //bind to the underlying body property on the panel\n            fn: function(){ console.log('dblclick body'); }\n        }\n    }\n});\n</code></pre>\n"},"loader":{"!type":"+Ext.ComponentLoader|?","!doc":"<p>A configuration object or an instance of a <a href=\"#!/api/Ext.ComponentLoader\" rel=\"Ext.ComponentLoader\" class=\"docClass\">Ext.ComponentLoader</a> to load remote content\nfor this Component.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>', {\n    loader: {\n        url: 'content.html',\n        autoLoad: true\n    },\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n"},"margin":{"!type":"number|string","!doc":"<p>Specifies the margin for this component. The margin can be a single numeric value to apply to all sides or it can\nbe a CSS style specification for each style, for example: '10 5 3 10' (top, right, bottom, left).</p>\n"},"maxHeight":{"!type":"number","!doc":"<p>The maximum value in pixels which this Component will set its height to.</p>\n\n<p><strong>Warning:</strong> This will override any size management applied by layout managers.</p>\n"},"maxWidth":{"!type":"number","!doc":"<p>The maximum value in pixels which this Component will set its width to.</p>\n\n<p><strong>Warning:</strong> This will override any size management applied by layout managers.</p>\n"},"minHeight":{"!type":"number","!doc":"<p>The minimum value in pixels which this Component will set its height to.</p>\n\n<p><strong>Warning:</strong> This will override any size management applied by layout managers.</p>\n"},"minWidth":{"!type":"number","!doc":"<p>The minimum value in pixels which this Component will set its width to.</p>\n\n<p><strong>Warning:</strong> This will override any size management applied by layout managers.</p>\n"},"overCls":{"!type":"string","!doc":"<p>An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element,\nand removed when the mouse moves out. This can be useful for adding customized 'active' or 'hover' styles to the\ncomponent or any of its children using standard CSS rules.</p>\n"},"padding":{"!type":"number|string","!doc":"<p>Specifies the padding for this component. The padding can be a single numeric value to apply to all sides or it\ncan be a CSS style specification for each style, for example: '10 5 3 10' (top, right, bottom, left).</p>\n"},"plugins":{"!type":"[+Ext.AbstractPlugin]|+Ext.AbstractPlugin|[?]|?|[+Ext.enums.Plugin]|+Ext.enums.Plugin","!doc":"<p>An array of plugins to be added to this component. Can also be just a single plugin instead of array.</p>\n\n<p>Plugins provide custom functionality for a component. The only requirement for\na valid plugin is that it contain an <code>init</code> method that accepts a reference of type <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>. When a component\nis created, if any plugins are available, the component will call the init method on each plugin, passing a\nreference to itself. Each plugin can then call methods or respond to events on the component as needed to provide\nits functionality.</p>\n\n<p>Plugins can be added to component by either directly referencing the plugin instance:</p>\n\n<pre><code>plugins: [<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.plugin.CellEditing\" rel=\"Ext.grid.plugin.CellEditing\" class=\"docClass\">Ext.grid.plugin.CellEditing</a>', {clicksToEdit: 1})],\n</code></pre>\n\n<p>By using config object with ptype:</p>\n\n<pre><code>plugins: [{ptype: 'cellediting', clicksToEdit: 1}],\n</code></pre>\n\n<p>Or with just a ptype:</p>\n\n<pre><code>plugins: ['cellediting', 'gridviewdragdrop'],\n</code></pre>\n\n<p>See <a href=\"#!/api/Ext.enums.Plugin\" rel=\"Ext.enums.Plugin\" class=\"docClass\">Ext.enums.Plugin</a> for list of all ptypes.</p>\n"},"renderData":{"!type":"?","!doc":"<p>The data used by <a href=\"#!/api/Ext.AbstractComponent-cfg-renderTpl\" rel=\"Ext.AbstractComponent-cfg-renderTpl\" class=\"docClass\">renderTpl</a> in addition to the following property values of the component:</p>\n\n<ul>\n<li>id</li>\n<li>ui</li>\n<li>uiCls</li>\n<li>baseCls</li>\n<li>componentCls</li>\n<li>frame</li>\n</ul>\n\n\n<p>See <a href=\"#!/api/Ext.AbstractComponent-cfg-renderSelectors\" rel=\"Ext.AbstractComponent-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.AbstractComponent-cfg-childEls\" rel=\"Ext.AbstractComponent-cfg-childEls\" class=\"docClass\">childEls</a> for usage examples.</p>\n"},"renderSelectors":{"!type":"?","!doc":"<p>An object containing properties specifying <a href=\"#!/api/Ext.dom.Query\" rel=\"Ext.dom.Query\" class=\"docClass\">DomQuery</a> selectors which identify child elements\ncreated by the render process.</p>\n\n<p>After the Component's internal structure is rendered according to the <a href=\"#!/api/Ext.AbstractComponent-cfg-renderTpl\" rel=\"Ext.AbstractComponent-cfg-renderTpl\" class=\"docClass\">renderTpl</a>, this object is iterated through,\nand the found Elements are added as properties to the Component using the <code>renderSelector</code> property name.</p>\n\n<p>For example, a Component which renders a title and description into its element:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>', {\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    renderTpl: [\n        '&lt;h1 class=\"title\"&gt;{title}&lt;/h1&gt;',\n        '&lt;p&gt;{desc}&lt;/p&gt;'\n    ],\n    renderData: {\n        title: \"Error\",\n        desc: \"Something went wrong\"\n    },\n    renderSelectors: {\n        titleEl: 'h1.title',\n        descEl: 'p'\n    },\n    listeners: {\n        afterrender: function(cmp){\n            // After rendering the component will have a titleEl and descEl properties\n            cmp.titleEl.setStyle({color: \"red\"});\n        }\n    }\n});\n</code></pre>\n\n<p>For a faster, but less flexible, alternative that achieves the same end result (properties for child elements on the\nComponent after render), see <a href=\"#!/api/Ext.AbstractComponent-cfg-childEls\" rel=\"Ext.AbstractComponent-cfg-childEls\" class=\"docClass\">childEls</a> and <a href=\"#!/api/Ext.AbstractComponent-method-addChildEls\" rel=\"Ext.AbstractComponent-method-addChildEls\" class=\"docClass\">addChildEls</a>.</p>\n"},"renderTo":{"!type":"string|+HTMLElement|+Ext.Element","!doc":"<p>Specify the <code>id</code> of the element, a DOM element or an existing Element that this component will be rendered into.</p>\n\n<p><strong>Notes:</strong></p>\n\n<p>Do <em>not</em> use this option if the Component is to be a child item of a <a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Container</a>.\nIt is the responsibility of the <a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Container</a>'s\n<a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">layout manager</a> to render and manage its child items.</p>\n\n<p>When using this config, a call to <code>render()</code> is not required.</p>\n\n<p>See also: <a href=\"#!/api/Ext.AbstractComponent-method-render\" rel=\"Ext.AbstractComponent-method-render\" class=\"docClass\">render</a>.</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.AbstractComponent-method-getEl\" rel=\"Ext.AbstractComponent-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.AbstractComponent-method-getEl\" rel=\"Ext.AbstractComponent-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.AbstractComponent-cfg-renderSelectors\" rel=\"Ext.AbstractComponent-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.AbstractComponent-cfg-childEls\" rel=\"Ext.AbstractComponent-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"},"rtl":{"!type":"bool","!doc":"<p>True to layout this component and its descendants in \"rtl\" (right-to-left) mode.\nCan be explicitly set to false to override a true value inherited from an ancestor.</p>\n\n<p><strong>Defined in override Ext.rtl.AbstractComponent.</strong></p>\n"},"saveDelay":{"!type":"number","!doc":"<p>A buffer to be applied if many state events are fired within a short period.</p>\n"},"shrinkWrap":{"!type":"bool|number","!doc":"<p>If this property is a number, it is interpreted as follows:</p>\n\n<ul>\n<li>0: Neither width nor height depend on content. This is equivalent to <code>false</code>.</li>\n<li>1: Width depends on content (shrink wraps), but height does not.</li>\n<li>2: Height depends on content (shrink wraps), but width does not. The default.</li>\n<li>3: Both width and height depend on content (shrink wrap). This is equivalent to <code>true</code>.</li>\n</ul>\n\n\n<p>In CSS terms, shrink-wrap width is analogous to an inline-block element as opposed\nto a block-level element. Some container layouts always shrink-wrap their children,\neffectively ignoring this property (e.g., <a href=\"#!/api/Ext.layout.container.HBox\" rel=\"Ext.layout.container.HBox\" class=\"docClass\">Ext.layout.container.HBox</a>,\n<a href=\"#!/api/Ext.layout.container.VBox\" rel=\"Ext.layout.container.VBox\" class=\"docClass\">Ext.layout.container.VBox</a>, <a href=\"#!/api/Ext.layout.component.Dock\" rel=\"Ext.layout.component.Dock\" class=\"docClass\">Ext.layout.component.Dock</a>).</p>\n"},"stateEvents":{"!type":"[string]","!doc":"<p>An array of events that, when fired, should trigger this object to\nsave its state. Defaults to none. <code>stateEvents</code> may be any type\nof event supported by this object, including browser or custom events\n(e.g., <tt>['click', 'customerchange']</tt>).</p>\n\n\n<p>See <code><a href=\"#!/api/Ext.state.Stateful-cfg-stateful\" rel=\"Ext.state.Stateful-cfg-stateful\" class=\"docClass\">stateful</a></code> for an explanation of saving and\nrestoring object state.</p>\n\n"},"stateId":{"!type":"string","!doc":"<p>The unique id for this object to use for state management purposes.</p>\n\n<p>See <a href=\"#!/api/Ext.state.Stateful-cfg-stateful\" rel=\"Ext.state.Stateful-cfg-stateful\" class=\"docClass\">stateful</a> for an explanation of saving and restoring state.</p>\n\n"},"stateful":{"!type":"bool","!doc":"<p>A flag which causes the object to attempt to restore the state of\ninternal properties from a saved state on startup. The object must have\na <a href=\"#!/api/Ext.state.Stateful-cfg-stateId\" rel=\"Ext.state.Stateful-cfg-stateId\" class=\"docClass\">stateId</a> for state to be managed.</p>\n\n<p>Auto-generated ids are not guaranteed to be stable across page loads and\ncannot be relied upon to save and restore the same state for a object.</p>\n\n<p>For state saving to work, the state manager's provider must have been\nset to an implementation of <a href=\"#!/api/Ext.state.Provider\" rel=\"Ext.state.Provider\" class=\"docClass\">Ext.state.Provider</a> which overrides the\n<a href=\"#!/api/Ext.state.Provider-method-set\" rel=\"Ext.state.Provider-method-set\" class=\"docClass\">set</a> and <a href=\"#!/api/Ext.state.Provider-method-get\" rel=\"Ext.state.Provider-method-get\" class=\"docClass\">get</a>\nmethods to save and recall name/value pairs. A built-in implementation,\n<a href=\"#!/api/Ext.state.CookieProvider\" rel=\"Ext.state.CookieProvider\" class=\"docClass\">Ext.state.CookieProvider</a> is available.</p>\n\n<p>To set the state provider for the current page:</p>\n\n<p>   <a href=\"#!/api/Ext.state.Manager-method-setProvider\" rel=\"Ext.state.Manager-method-setProvider\" class=\"docClass\">Ext.state.Manager.setProvider</a>(new <a href=\"#!/api/Ext.state.CookieProvider\" rel=\"Ext.state.CookieProvider\" class=\"docClass\">Ext.state.CookieProvider</a>({\n       expires: new Date(new Date().getTime()+(1000<em>60</em>60<em>24</em>7)), //7 days from now\n   }));</p>\n\n<p>A stateful object attempts to save state when one of the events\nlisted in the <a href=\"#!/api/Ext.state.Stateful-cfg-stateEvents\" rel=\"Ext.state.Stateful-cfg-stateEvents\" class=\"docClass\">stateEvents</a> configuration fires.</p>\n\n<p>To save state, a stateful object first serializes its state by\ncalling <em><a href=\"#!/api/Ext.state.Stateful-method-getState\" rel=\"Ext.state.Stateful-method-getState\" class=\"docClass\">getState</a></em>.</p>\n\n<p>The Component base class implements <a href=\"#!/api/Ext.state.Stateful-method-getState\" rel=\"Ext.state.Stateful-method-getState\" class=\"docClass\">getState</a> to save its width and height within the state\nonly if they were initially configured, and have changed from the configured value.</p>\n\n<p>The Panel class saves its collapsed state in addition to that.</p>\n\n<p>The Grid class saves its column state in addition to its superclass state.</p>\n\n<p>If there is more application state to be save, the developer must provide an implementation which\nfirst calls the superclass method to inherit the above behaviour, and then injects new properties\ninto the returned object.</p>\n\n<p>The value yielded by getState is passed to <a href=\"#!/api/Ext.state.Manager-method-set\" rel=\"Ext.state.Manager-method-set\" class=\"docClass\">Ext.state.Manager.set</a>\nwhich uses the configured <a href=\"#!/api/Ext.state.Provider\" rel=\"Ext.state.Provider\" class=\"docClass\">Ext.state.Provider</a> to save the object\nkeyed by the <a href=\"#!/api/Ext.state.Stateful-cfg-stateId\" rel=\"Ext.state.Stateful-cfg-stateId\" class=\"docClass\">stateId</a>.</p>\n\n<p>During construction, a stateful object attempts to <em>restore</em> its state by calling\n<a href=\"#!/api/Ext.state.Manager-method-get\" rel=\"Ext.state.Manager-method-get\" class=\"docClass\">Ext.state.Manager.get</a> passing the <a href=\"#!/api/Ext.state.Stateful-cfg-stateId\" rel=\"Ext.state.Stateful-cfg-stateId\" class=\"docClass\">stateId</a></p>\n\n<p>The resulting object is passed to <a href=\"#!/api/Ext.state.Stateful-method-applyState\" rel=\"Ext.state.Stateful-method-applyState\" class=\"docClass\">applyState</a>*. The default implementation of\n<a href=\"#!/api/Ext.state.Stateful-method-applyState\" rel=\"Ext.state.Stateful-method-applyState\" class=\"docClass\">applyState</a> simply copies properties into the object, but a developer may\noverride this to support restoration of more complex application state.</p>\n\n<p>You can perform extra processing on state save and restore by attaching\nhandlers to the <a href=\"#!/api/Ext.state.Stateful-event-beforestaterestore\" rel=\"Ext.state.Stateful-event-beforestaterestore\" class=\"docClass\">beforestaterestore</a>, <a href=\"#!/api/Ext.state.Stateful-event-staterestore\" rel=\"Ext.state.Stateful-event-staterestore\" class=\"docClass\">staterestore</a>,\n<a href=\"#!/api/Ext.state.Stateful-event-beforestatesave\" rel=\"Ext.state.Stateful-event-beforestatesave\" class=\"docClass\">beforestatesave</a> and <a href=\"#!/api/Ext.state.Stateful-event-statesave\" rel=\"Ext.state.Stateful-event-statesave\" class=\"docClass\">statesave</a> events.</p>\n"},"style":{"!type":"string|?","!doc":"<p>A custom style specification to be applied to this component's Element. Should be a valid argument to\n<a href=\"#!/api/Ext.dom.Element-method-applyStyles\" rel=\"Ext.dom.Element-method-applyStyles\" class=\"docClass\">Ext.Element.applyStyles</a>.</p>\n\n<pre><code>new <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>({\n    title: 'Some Title',\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    width: 400, height: 300,\n    layout: 'form',\n    items: [{\n        xtype: 'textarea',\n        style: {\n            width: '95%',\n            marginBottom: '10px'\n        }\n    },\n    new <a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>({\n        text: 'Send',\n        minWidth: '100',\n        style: {\n            marginBottom: '10px'\n        }\n    })\n    ]\n});\n</code></pre>\n"},"tpl":{"!type":"+Ext.XTemplate|+Ext.Template|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.Template\" rel=\"Ext.Template\" class=\"docClass\">Ext.Template</a>, <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">Ext.XTemplate</a> or an array of strings to form an <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">Ext.XTemplate</a>. Used in\nconjunction with the <code><a href=\"#!/api/Ext.AbstractComponent-cfg-data\" rel=\"Ext.AbstractComponent-cfg-data\" class=\"docClass\">data</a></code> and <code><a href=\"#!/api/Ext.AbstractComponent-cfg-tplWriteMode\" rel=\"Ext.AbstractComponent-cfg-tplWriteMode\" class=\"docClass\">tplWriteMode</a></code> configurations.</p>\n"},"tplWriteMode":{"!type":"string","!doc":"<p>The Ext.(X)Template method to use when updating the content area of the Component.\nSee <code><a href=\"#!/api/Ext.XTemplate-method-overwrite\" rel=\"Ext.XTemplate-method-overwrite\" class=\"docClass\">Ext.XTemplate.overwrite</a></code> for information on default mode.</p>\n"},"ui":{"!type":"string","!doc":"<p>A UI style for a component.</p>\n"},"uiCls":{"!type":"[string]","!doc":"<p>An array of of <code>classNames</code> which are currently applied to this component.</p>\n"},"width":{"!type":"number","!doc":"<p>The width of this component in pixels.</p>\n"},"xtype":{"!type":"+Ext.enums.Widget","!doc":"<p>This property provides a shorter alternative to creating objects than using a full\nclass name. Using <code>xtype</code> is the most common way to define component instances,\nespecially in a container. For example, the items in a form containing text fields\ncould be created explicitly like so:</p>\n\n<pre><code> items: [\n     <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.field.Text\" rel=\"Ext.form.field.Text\" class=\"docClass\">Ext.form.field.Text</a>', {\n         fieldLabel: 'Foo'\n     }),\n     <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.field.Text\" rel=\"Ext.form.field.Text\" class=\"docClass\">Ext.form.field.Text</a>', {\n         fieldLabel: 'Bar'\n     }),\n     <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.field.Number\" rel=\"Ext.form.field.Number\" class=\"docClass\">Ext.form.field.Number</a>', {\n         fieldLabel: 'Num'\n     })\n ]\n</code></pre>\n\n<p>But by using <code>xtype</code>, the above becomes:</p>\n\n<pre><code> items: [\n     {\n         xtype: 'textfield',\n         fieldLabel: 'Foo'\n     },\n     {\n         xtype: 'textfield',\n         fieldLabel: 'Bar'\n     },\n     {\n         xtype: 'numberfield',\n         fieldLabel: 'Num'\n     }\n ]\n</code></pre>\n\n<p>When the <code>xtype</code> is common to many items, <a href=\"#!/api/Ext.container.AbstractContainer-cfg-defaultType\" rel=\"Ext.container.AbstractContainer-cfg-defaultType\" class=\"docClass\">Ext.container.AbstractContainer.defaultType</a>\nis another way to specify the <code>xtype</code> for all items that don't have an explicit <code>xtype</code>:</p>\n\n<pre><code> defaultType: 'textfield',\n items: [\n     { fieldLabel: 'Foo' },\n     { fieldLabel: 'Bar' },\n     { fieldLabel: 'Num', xtype: 'numberfield' }\n ]\n</code></pre>\n\n<p>Each member of the <code>items</code> array is now just a \"configuration object\". These objects\nare used to create and configure component instances. A configuration object can be\nmanually used to instantiate a component using <a href=\"#!/api/Ext-method-widget\" rel=\"Ext-method-widget\" class=\"docClass\">Ext.widget</a>:</p>\n\n<pre><code> var text1 = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.field.Text\" rel=\"Ext.form.field.Text\" class=\"docClass\">Ext.form.field.Text</a>', {\n     fieldLabel: 'Foo'\n });\n\n // or alternatively:\n\n var text1 = <a href=\"#!/api/Ext-method-widget\" rel=\"Ext-method-widget\" class=\"docClass\">Ext.widget</a>({\n     xtype: 'textfield',\n     fieldLabel: 'Foo'\n });\n</code></pre>\n\n<p>This conversion of configuration objects into instantiated components is done when\na container is created as part of its {<a href=\"#!/api/Ext.container.AbstractContainer-method-initComponent\" rel=\"Ext.container.AbstractContainer-method-initComponent\" class=\"docClass\">Ext.container.AbstractContainer.initComponent</a>}\nprocess. As part of the same process, the <code>items</code> array is converted from its raw\narray form into a <a href=\"#!/api/Ext.util.MixedCollection\" rel=\"Ext.util.MixedCollection\" class=\"docClass\">Ext.util.MixedCollection</a> instance.</p>\n\n<p>You can define your own <code>xtype</code> on a custom <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">component</a> by specifying\nthe <code>xtype</code> property in <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>. For example:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('MyApp.PressMeButton', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n    xtype: 'pressmebutton',\n    text: 'Press Me'\n});\n</code></pre>\n\n<p>Care should be taken when naming an <code>xtype</code> in a custom component because there is\na single, shared scope for all xtypes. Third part components should consider using\na prefix to avoid collisions.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Foo.form.CoolButton', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n    xtype: 'ux-coolbutton',\n    text: 'Cool!'\n});\n</code></pre>\n\n<p>See <a href=\"#!/api/Ext.enums.Widget\" rel=\"Ext.enums.Widget\" class=\"docClass\">Ext.enums.Widget</a> for list of all available xtypes.</p>\n"}},"Ext_AbstractManager_cfg":{"!proto":"Ext_Base_cfg"},"Ext_AbstractPlugin_cfg":{"!proto":"Ext_Base_cfg","pluginId":{"!type":"string","!doc":"<p>A name for the plugin that can be set at creation time to then retrieve the plugin\nthrough <a href=\"#!/api/Ext.AbstractComponent-method-getPlugin\" rel=\"Ext.AbstractComponent-method-getPlugin\" class=\"docClass\">getPlugin</a> method.  For example:</p>\n\n<pre><code>var grid = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Ext.grid.Panel</a>', {\n    plugins: [{\n        ptype: 'cellediting',\n        clicksToEdit: 2,\n        pluginId: 'cellplugin'\n    }]\n});\n\n// later on:\nvar plugin = grid.getPlugin('cellplugin');\n</code></pre>\n"}},"Ext_Action_cfg":{"!proto":"Ext_Base_cfg","disabled":{"!type":"bool","!doc":"<p>True to disable all components configured by this Action, false to enable them.</p>\n"},"handler":{"!type":"fn()","!doc":"<p>The function that will be invoked by each component tied to this Action\nwhen the component's primary event is triggered.</p>\n"},"hidden":{"!type":"bool","!doc":"<p>True to hide all components configured by this Action, false to show them.</p>\n"},"iconCls":{"!type":"string","!doc":"<p>The CSS class selector that specifies a background image to be used as the header icon for\nall components configured by this Action.</p>\n\n<p>An example of specifying a custom icon class would be something like:</p>\n\n<pre><code>// specify the property in the config for the class:\n     ...\n     iconCls: 'do-something'\n\n// css class that specifies background image to be used as the icon image:\n.do-something { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; }\n</code></pre>\n"},"itemId":{"!type":"string","!doc":"<p>See <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>.<a href=\"#!/api/Ext.Component-cfg-itemId\" rel=\"Ext.Component-cfg-itemId\" class=\"docClass\">itemId</a>.</p>\n"},"scope":{"!type":"?","!doc":"<p>The scope (this reference) in which the <a href=\"#!/api/Ext.Action-cfg-handler\" rel=\"Ext.Action-cfg-handler\" class=\"docClass\">handler</a> is executed.\nDefaults to the browser window.</p>\n"},"text":{"!type":"string","!doc":"<p>The text to set for all components configured by this Action.</p>\n"}},"Ext_Ajax_cfg":{"!proto":"Ext_data_Connection_cfg"},"Ext_Component_cfg":{"!proto":"Ext_AbstractComponent_cfg","autoScroll":{"!type":"bool","!doc":"<p><code>true</code> to use overflow:'auto' on the components layout element and show scroll bars automatically when necessary,\n<code>false</code> to clip any overflowing content.\nThis should not be combined with <a href=\"#!/api/Ext.Component-cfg-overflowX\" rel=\"Ext.Component-cfg-overflowX\" class=\"docClass\">overflowX</a> or  <a href=\"#!/api/Ext.Component-cfg-overflowY\" rel=\"Ext.Component-cfg-overflowY\" class=\"docClass\">overflowY</a>.</p>\n"},"columnWidth":{"!type":"number|string","!doc":"<p>Defines the column width inside <a href=\"#!/api/Ext.layout.container.Column\" rel=\"Ext.layout.container.Column\" class=\"docClass\">column layout</a>.</p>\n\n<p>Can be specified as a number or as a percentage.</p>\n"},"constrain":{"!type":"bool","!doc":"<p>True to constrain this Components within its containing element, false to allow it to fall outside of its containing\nelement. By default this Component will be rendered to <code>document.body</code>. To render and constrain this Component within\nanother element specify <a href=\"#!/api/Ext.AbstractComponent-cfg-renderTo\" rel=\"Ext.AbstractComponent-cfg-renderTo\" class=\"docClass\">renderTo</a>.</p>\n"},"constrainTo":{"!type":"+Ext.util.Region|+Ext.Element","!doc":"<p>A <a href=\"#!/api/Ext.util.Region\" rel=\"Ext.util.Region\" class=\"docClass\">Region</a> (or an element from which a Region measurement will be read) which is used\nto constrain the component. Only applies when the component is floating.</p>\n"},"constraintInsets":{"!type":"?|string","!doc":"<p>An object or a string (in TRBL order) specifying insets from the configured <a href=\"#!/api/Ext.Component-cfg-constrainTo\" rel=\"Ext.Component-cfg-constrainTo\" class=\"docClass\">constrain region</a>\nwithin which this component must be constrained when positioning or sizing.\nexample:</p>\n\n<p>   constraintInsets: '10 10 10 10' // Constrain with 10px insets from parent</p>\n"},"defaultAlign":{"!type":"string","!doc":"<p>The default <a href=\"#!/api/Ext.util.Positionable-method-getAlignToXY\" rel=\"Ext.util.Positionable-method-getAlignToXY\" class=\"docClass\">Ext.Element#getAlignToXY</a> anchor position value for this menu\nrelative to its element of origin. Used in conjunction with <a href=\"#!/api/Ext.Component-method-showBy\" rel=\"Ext.Component-method-showBy\" class=\"docClass\">showBy</a>.</p>\n"},"draggable":{"!type":"bool|?","!doc":"<p>Specify as true to make a <a href=\"#!/api/Ext.Component-cfg-floating\" rel=\"Ext.Component-cfg-floating\" class=\"docClass\">floating</a> Component draggable using the Component's encapsulating element as\nthe drag handle.</p>\n\n<p>This may also be specified as a config object for the <a href=\"#!/api/Ext.util.ComponentDragger\" rel=\"Ext.util.ComponentDragger\" class=\"docClass\">ComponentDragger</a> which is\ninstantiated to perform dragging.</p>\n\n<p>For example to create a Component which may only be dragged around using a certain internal element as the drag\nhandle, use the delegate option:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>({\n    constrain: true,\n    floating: true,\n    style: {\n        backgroundColor: '#fff',\n        border: '1px solid black'\n    },\n    html: '&lt;h1 style=\"cursor:move\"&gt;The title&lt;/h1&gt;&lt;p&gt;The content&lt;/p&gt;',\n    draggable: {\n        delegate: 'h1'\n    }\n}).show();\n</code></pre>\n"},"fixed":{"!type":"bool","!doc":"<p>Configure as <code>true</code> to have this Component fixed at its <code>X, Y</code> coordinates in the browser viewport, immune\nto scrolling the document.</p>\n\n<p><em>Only in browsers that support <code>position:fixed</code></em></p>\n\n<p><em>IE6 and IE7, 8 and 9 quirks do not support <code>position: fixed</code></em></p>\n"},"floating":{"!type":"bool","!doc":"<p>Specify as true to float the Component outside of the document flow using CSS absolute positioning.</p>\n\n<p>Components such as <a href=\"#!/api/Ext.window.Window\" rel=\"Ext.window.Window\" class=\"docClass\">Window</a>s and <a href=\"#!/api/Ext.menu.Menu\" rel=\"Ext.menu.Menu\" class=\"docClass\">Menu</a>s are floating by default.</p>\n\n<p>Floating Components that are programatically <a href=\"#!/api/Ext.Component-method-render\" rel=\"Ext.Component-method-render\" class=\"docClass\">rendered</a> will register\nthemselves with the global <a href=\"#!/api/Ext.WindowManager\" rel=\"Ext.WindowManager\" class=\"docClass\">ZIndexManager</a></p>\n\n<h3>Floating Components as child items of a Container</h3>\n\n<p>A floating Component may be used as a child item of a Container. This just allows the floating Component to seek\na ZIndexManager by examining the ownerCt chain.</p>\n\n<p>When configured as floating, Components acquire, at render time, a <a href=\"#!/api/Ext.ZIndexManager\" rel=\"Ext.ZIndexManager\" class=\"docClass\">ZIndexManager</a> which\nmanages a stack of related floating Components. The ZIndexManager brings a single floating Component to the top\nof its stack when the Component's <a href=\"#!/api/Ext.Component-method-toFront\" rel=\"Ext.Component-method-toFront\" class=\"docClass\">toFront</a> method is called.</p>\n\n<p>The ZIndexManager is found by traversing up the <a href=\"#!/api/Ext.Component-property-ownerCt\" rel=\"Ext.Component-property-ownerCt\" class=\"docClass\">ownerCt</a> chain to find an ancestor which itself is\nfloating. This is so that descendant floating Components of floating <em>Containers</em> (Such as a ComboBox dropdown\nwithin a Window) can have its zIndex managed relative to any siblings, but always <strong>above</strong> that floating\nancestor Container.</p>\n\n<p>If no floating ancestor is found, a floating Component registers itself with the default <a href=\"#!/api/Ext.WindowManager\" rel=\"Ext.WindowManager\" class=\"docClass\">ZIndexManager</a>.</p>\n\n<p>Floating components <em>do not participate in the Container's layout</em>. Because of this, they are not rendered until\nyou explicitly <a href=\"#!/api/Ext.Component-method-show\" rel=\"Ext.Component-method-show\" class=\"docClass\">show</a> them.</p>\n\n<p>After rendering, the ownerCt reference is deleted, and the <a href=\"#!/api/Ext.Component-property-floatParent\" rel=\"Ext.Component-property-floatParent\" class=\"docClass\">floatParent</a> property is set to the found\nfloating ancestor Container. If no floating ancestor Container was found the <a href=\"#!/api/Ext.Component-property-floatParent\" rel=\"Ext.Component-property-floatParent\" class=\"docClass\">floatParent</a> property will\nnot be set.</p>\n"},"focusOnToFront":{"!type":"bool","!doc":"<p>Specifies whether the floated component should be automatically <a href=\"#!/api/Ext.Component-method-focus\" rel=\"Ext.Component-method-focus\" class=\"docClass\">focused</a> when\nit is <a href=\"#!/api/Ext.util.Floating-method-toFront\" rel=\"Ext.util.Floating-method-toFront\" class=\"docClass\">brought to the front</a>.</p>\n"},"formBind":{"!type":"bool","!doc":"<p>When inside FormPanel, any component configured with <code>formBind: true</code> will\nbe enabled/disabled depending on the validity state of the form.\nSee <a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a> for more information and example.</p>\n"},"overflowX":{"!type":"string","!doc":"<p>Possible values are:\n * <code>'auto'</code> to enable automatic horizontal scrollbar (overflow-x: 'auto').\n * <code>'scroll'</code> to always enable horizontal scrollbar (overflow-x: 'scroll').\nThe default is overflow-x: 'hidden'. This should not be combined with <a href=\"#!/api/Ext.Component-cfg-autoScroll\" rel=\"Ext.Component-cfg-autoScroll\" class=\"docClass\">autoScroll</a>.</p>\n"},"overflowY":{"!type":"string","!doc":"<p>Possible values are:\n * <code>'auto'</code> to enable automatic vertical scrollbar (overflow-y: 'auto').\n * <code>'scroll'</code> to always enable vertical scrollbar (overflow-y: 'scroll').\nThe default is overflow-y: 'hidden'. This should not be combined with <a href=\"#!/api/Ext.Component-cfg-autoScroll\" rel=\"Ext.Component-cfg-autoScroll\" class=\"docClass\">autoScroll</a>.</p>\n"},"region":{"!type":"string|string|string|string|string","!doc":"<p>Defines the region inside <a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">border layout</a>.</p>\n\n<p>Possible values:</p>\n\n<ul>\n<li>north - Positions component at top.</li>\n<li>south - Positions component at bottom.</li>\n<li>east - Positions component at right.</li>\n<li>west - Positions component at left.</li>\n<li>center - Positions component at the remaining space.\nThere <strong>must</strong> be a component with <code>region: \"center\"</code> in every border layout.</li>\n</ul>\n\n"},"resizable":{"!type":"bool|?","!doc":"<p>Specify as <code>true</code> to apply a <a href=\"#!/api/Ext.resizer.Resizer\" rel=\"Ext.resizer.Resizer\" class=\"docClass\">Resizer</a> to this Component after rendering.</p>\n\n<p>May also be specified as a config object to be passed to the constructor of <a href=\"#!/api/Ext.resizer.Resizer\" rel=\"Ext.resizer.Resizer\" class=\"docClass\">Resizer</a>\nto override any defaults. By default the Component passes its minimum and maximum size, and uses\n<code><a href=\"#!/api/Ext.resizer.Resizer-cfg-dynamic\" rel=\"Ext.resizer.Resizer-cfg-dynamic\" class=\"docClass\">Ext.resizer.Resizer.dynamic</a>: false</code></p>\n"},"resizeHandles":{"!type":"string","!doc":"<p>A valid <a href=\"#!/api/Ext.resizer.Resizer\" rel=\"Ext.resizer.Resizer\" class=\"docClass\">Ext.resizer.Resizer</a> handles config string. Only applies when resizable = true.</p>\n"},"shadow":{"!type":"string|bool","!doc":"<p>Specifies whether the floating component should be given a shadow. Set to true to automatically create an\n<a href=\"#!/api/Ext.Shadow\" rel=\"Ext.Shadow\" class=\"docClass\">Ext.Shadow</a>, or a string indicating the shadow's display <a href=\"#!/api/Ext.Shadow-cfg-mode\" rel=\"Ext.Shadow-cfg-mode\" class=\"docClass\">Ext.Shadow.mode</a>. Set to false to\ndisable the shadow.</p>\n"},"shadowOffset":{"!type":"number","!doc":"<p>Number of pixels to offset the shadow.</p>\n"},"toFrontOnShow":{"!type":"bool","!doc":"<p>True to automatically call <a href=\"#!/api/Ext.Component-method-toFront\" rel=\"Ext.Component-method-toFront\" class=\"docClass\">toFront</a> when the <a href=\"#!/api/Ext.Component-method-show\" rel=\"Ext.Component-method-show\" class=\"docClass\">show</a> method is called on an already visible,\nfloating component.</p>\n"}},"Ext_ComponentLoader_cfg":{"!proto":"Ext_ElementLoader_cfg","loadMask":{"!type":"bool|?","!doc":"<p>True or a <a href=\"#!/api/Ext.LoadMask\" rel=\"Ext.LoadMask\" class=\"docClass\">Ext.LoadMask</a> configuration to enable masking during loading.</p>\n"},"renderer":{"!type":"string|fn()","!doc":"<p>The type of content that is to be loaded into, which can be one of 3 types:</p>\n\n<ul>\n<li><strong>html</strong> : Loads raw html content, see <a href=\"#!/api/Ext.Component-cfg-html\" rel=\"Ext.Component-cfg-html\" class=\"docClass\">Ext.Component.html</a></li>\n<li><strong>data</strong> : Loads raw html content, see <a href=\"#!/api/Ext.Component-cfg-data\" rel=\"Ext.Component-cfg-data\" class=\"docClass\">Ext.Component.data</a></li>\n<li><strong>component</strong> : Loads child {<a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>} instances. This option is only valid when used with a Container.</li>\n</ul>\n\n\n<p>Alternatively, you can pass a function which is called with the following parameters.</p>\n\n<ul>\n<li>loader - Loader instance</li>\n<li>response - The server response</li>\n<li>active - The active request</li>\n</ul>\n\n\n<p>The function must return false is loading is not successful. Below is a sample of using a custom renderer:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>({\n    loader: {\n        url: 'myPage.php',\n        renderer: function(loader, response, active) {\n            var text = response.responseText;\n            loader.getTarget().update('The response is ' + text);\n            return true;\n        }\n    }\n});\n</code></pre>\n"},"scripts":{"!type":"bool","!doc":"<p>True to parse any inline script tags in the response. This only used when using the html\n<a href=\"#!/api/Ext.ComponentLoader-cfg-renderer\" rel=\"Ext.ComponentLoader-cfg-renderer\" class=\"docClass\">renderer</a>.</p>\n"},"target":{"!type":"+Ext.Component|string","!doc":"<p>The target <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> for the loader.\nIf a string is passed it will be looked up via the id.</p>\n"}},"Ext_ComponentManager_cfg":{"!proto":"Ext_AbstractManager_cfg"},"Ext_Editor_cfg":{"!proto":"Ext_container_Container_cfg","alignment":{"!type":"string","!doc":"<p>The position to align to (see <a href=\"#!/api/Ext.util.Positionable-method-alignTo\" rel=\"Ext.util.Positionable-method-alignTo\" class=\"docClass\">Ext.util.Positionable.alignTo</a> for more details).</p>\n"},"allowBlur":{"!type":"bool","!doc":"<p>True to <a href=\"#!/api/Ext.Editor-method-completeEdit\" rel=\"Ext.Editor-method-completeEdit\" class=\"docClass\">complete the editing process</a> if in edit mode when the\nfield is blurred.</p>\n"},"autoSize":{"!type":"bool|?","!doc":"<p>True for the editor to automatically adopt the size of the underlying field. Otherwise, an object\ncan be passed to indicate where to get each dimension. The available properties are 'boundEl' and\n'field'. If a dimension is not specified, it will use the underlying height/width specified on\nthe editor object.\nExamples:</p>\n\n<pre><code>autoSize: true // The editor will be sized to the height/width of the field\n\nheight: 21,\nautoSize: {\n    width: 'boundEl' // The width will be determined by the width of the boundEl, the height from the editor (21)\n}\n\nautoSize: {\n    width: 'field', // Width from the field\n    height: 'boundEl' // Height from the boundEl\n}\n</code></pre>\n"},"baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this component's element. This will also be prepended to elements within this\ncomponent like Panel's body will get a class <code>x-panel-body</code>. This means that if you create a subclass of Panel, and\nyou want it to get all the Panels styling for the element and the body, you leave the <code>baseCls</code> <code>x-panel</code> and use\n<code>componentCls</code> to add specific styling for this component.</p>\n"},"cancelOnEsc":{"!type":"bool","!doc":"<p>True to cancel the edit when the escape key is pressed.</p>\n"},"completeOnEnter":{"!type":"bool","!doc":"<p>True to complete the edit when the enter key is pressed.</p>\n"},"constrain":{"!type":"bool","!doc":"<p>True to constrain the editor to the viewport</p>\n"},"field":{"!type":"+Ext.form.field.Field","!doc":"<p>The Field object (or descendant) or config object for field</p>\n"},"focusOnToFront":{"!type":"bool","!doc":"<p>Do not participate in the ZIndexManager's focus switching operations.\nWhen an editor is hidden, the ZIndexManager will not automatically activate\nthe last visible floater on the stack.</p>\n"},"hidden":{"!type":"bool","!doc":"<p>private overrides</p>\n"},"hideEl":{"!type":"bool","!doc":"<p>False to keep the bound element visible while the editor is displayed</p>\n"},"ignoreNoChange":{"!type":"bool","!doc":"<p>True to skip the edit completion process (no save, no events fired) if the user completes an edit and\nthe value has not changed.  Applies only to string values - edits for other data types\nwill never be ignored.</p>\n"},"layout":{"!type":"+Ext.enums.Layout|?","!doc":"<p>End Definitions</p>\n"},"offsets":{"!type":"[number]","!doc":"<p>The offsets to use when aligning (see <a href=\"#!/api/Ext.util.Positionable-method-alignTo\" rel=\"Ext.util.Positionable-method-alignTo\" class=\"docClass\">Ext.util.Positionable.alignTo</a> for more details.</p>\n"},"parentEl":{"!type":"string|+HTMLElement|+Ext.Element","!doc":"<p>An element to render to.</p>\n"},"revertInvalid":{"!type":"bool","!doc":"<p>True to automatically revert the field value and cancel the edit when the user completes an edit and the field\nvalidation fails</p>\n"},"shadow":{"!type":"bool|string","!doc":"<p>\"sides\" for sides/bottom only, \"frame\" for 4-way shadow, and \"drop\" for bottom-right shadow.</p>\n"},"swallowKeys":{"!type":"bool","!doc":"<p>Handle the keydown/keypress events so they don't propagate</p>\n"},"updateEl":{"!type":"bool","!doc":"<p>True to update the innerHTML of the bound element when the update completes</p>\n"},"value":{"!type":"?","!doc":"<p>The data value of the underlying field</p>\n"}},"Ext_ElementLoader_cfg":{"!proto":"Ext_Base_cfg","ajaxOptions":{"!type":"?","!doc":"<p>Any additional options to be passed to the request, for example timeout or headers.</p>\n"},"autoLoad":{"!type":"bool|?","!doc":"<p>True to have the loader make a request as soon as it is created.\nThis argument can also be a set of options that will be passed to <a href=\"#!/api/Ext.ElementLoader-method-load\" rel=\"Ext.ElementLoader-method-load\" class=\"docClass\">load</a> is called.</p>\n"},"baseParams":{"!type":"?","!doc":"<p>Params that will be attached to every request. These parameters\nwill not be overridden by any params in the load options.</p>\n"},"callback":{"!type":"fn()","!doc":"<p>A function to be called when a load request finishes.\nWill be called with the following config parameters:</p>\n\n<ul>\n<li>this - The ElementLoader instance.</li>\n<li>success - True if successful request.</li>\n<li>response - The response object.</li>\n<li>options - Ajax options.</li>\n</ul>\n\n"},"failure":{"!type":"fn()","!doc":"<p>A function to be called when a load request fails.\nWill be called with the following config parameters:</p>\n\n<ul>\n<li>this - The ElementLoader instance.</li>\n<li>response - The response object.</li>\n<li>options - Ajax options.</li>\n</ul>\n\n"},"listeners":{"!type":"?","!doc":"<p>A config object containing one or more event handlers to be added to this object during initialization. This\nshould be a valid listeners config object as specified in the <a href=\"#!/api/Ext.util.Observable-method-addListener\" rel=\"Ext.util.Observable-method-addListener\" class=\"docClass\">addListener</a> example for attaching multiple\nhandlers at once.</p>\n\n<p><strong>DOM events from Ext JS <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Components</a></strong></p>\n\n<p>While <em>some</em> Ext JS Component classes export selected DOM events (e.g. \"click\", \"mouseover\" etc), this is usually\nonly done when extra value can be added. For example the <a href=\"#!/api/Ext.view.View\" rel=\"Ext.view.View\" class=\"docClass\">DataView</a>'s <strong><code><a href=\"#!/api/Ext.view.View-event-itemclick\" rel=\"Ext.view.View-event-itemclick\" class=\"docClass\">itemclick</a></code></strong> event passing the node clicked on. To access DOM events directly from a\nchild element of a Component, we need to specify the <code>element</code> option to identify the Component property to add a\nDOM listener to:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>({\n    width: 400,\n    height: 200,\n    dockedItems: [{\n        xtype: 'toolbar'\n    }],\n    listeners: {\n        click: {\n            element: 'el', //bind to the underlying el property on the panel\n            fn: function(){ console.log('click el'); }\n        },\n        dblclick: {\n            element: 'body', //bind to the underlying body property on the panel\n            fn: function(){ console.log('dblclick body'); }\n        }\n    }\n});\n</code></pre>\n"},"loadMask":{"!type":"bool|string","!doc":"<p>True or a string to show when the element is loading.</p>\n"},"params":{"!type":"?","!doc":"<p>Any params to be attached to the Ajax request. These parameters will\nbe overridden by any params in the load options.</p>\n"},"renderer":{"!type":"fn()","!doc":"<p>A custom function to render the content to the element. The function should\nreturn false if the renderer could not be applied. The passed parameters are:</p>\n\n<ul>\n<li>The loader</li>\n<li>The response</li>\n<li>The active request</li>\n</ul>\n\n"},"scope":{"!type":"?","!doc":"<p>The scope to execute the <a href=\"#!/api/Ext.ElementLoader-cfg-success\" rel=\"Ext.ElementLoader-cfg-success\" class=\"docClass\">success</a> and <a href=\"#!/api/Ext.ElementLoader-cfg-failure\" rel=\"Ext.ElementLoader-cfg-failure\" class=\"docClass\">failure</a> functions in.</p>\n"},"scripts":{"!type":"bool","!doc":"<p>True to parse any inline script tags in the response.</p>\n"},"success":{"!type":"fn()","!doc":"<p>A function to be called when a load request is successful.\nWill be called with the following config parameters:</p>\n\n<ul>\n<li>this - The ElementLoader instance.</li>\n<li>response - The response object.</li>\n<li>options - Ajax options.</li>\n</ul>\n\n"},"target":{"!type":"+HTMLElement|+Ext.Element|string","!doc":"<p>The target element for the loader. It can be the DOM element, the id or an <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a>.</p>\n"},"url":{"!type":"string","!doc":"<p>The url to retrieve the content from.</p>\n"}},"Ext_Error_cfg":{"!proto":"Error_cfg"},"Ext_FocusManager_cfg":{"!proto":"Ext_Base_cfg","listeners":{"!type":"?","!doc":"<p>A config object containing one or more event handlers to be added to this object during initialization. This\nshould be a valid listeners config object as specified in the <a href=\"#!/api/Ext.util.Observable-method-addListener\" rel=\"Ext.util.Observable-method-addListener\" class=\"docClass\">addListener</a> example for attaching multiple\nhandlers at once.</p>\n\n<p><strong>DOM events from Ext JS <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Components</a></strong></p>\n\n<p>While <em>some</em> Ext JS Component classes export selected DOM events (e.g. \"click\", \"mouseover\" etc), this is usually\nonly done when extra value can be added. For example the <a href=\"#!/api/Ext.view.View\" rel=\"Ext.view.View\" class=\"docClass\">DataView</a>'s <strong><code><a href=\"#!/api/Ext.view.View-event-itemclick\" rel=\"Ext.view.View-event-itemclick\" class=\"docClass\">itemclick</a></code></strong> event passing the node clicked on. To access DOM events directly from a\nchild element of a Component, we need to specify the <code>element</code> option to identify the Component property to add a\nDOM listener to:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>({\n    width: 400,\n    height: 200,\n    dockedItems: [{\n        xtype: 'toolbar'\n    }],\n    listeners: {\n        click: {\n            element: 'el', //bind to the underlying el property on the panel\n            fn: function(){ console.log('click el'); }\n        },\n        dblclick: {\n            element: 'body', //bind to the underlying body property on the panel\n            fn: function(){ console.log('dblclick body'); }\n        }\n    }\n});\n</code></pre>\n"}},"Ext_Img_cfg":{"!proto":"Ext_Component_cfg","alt":{"!type":"string","!doc":"<p>The descriptive text for non-visual UI description.</p>\n"},"autoEl":{"!type":"string|?","!doc":"<p>A tag name or <a href=\"#!/api/Ext.DomHelper\" rel=\"Ext.DomHelper\" class=\"docClass\">DomHelper</a> spec used to create the <a href=\"#!/api/Ext.Img-method-getEl\" rel=\"Ext.Img-method-getEl\" class=\"docClass\">Element</a> which will\nencapsulate this Component.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong>'div'</strong>. The more complex Sencha classes use a more\ncomplex DOM structure specified by their own <a href=\"#!/api/Ext.Img-cfg-renderTpl\" rel=\"Ext.Img-cfg-renderTpl\" class=\"docClass\">renderTpl</a>s.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components encapsulated by\ndifferent DOM elements. Example usage:</p>\n\n<pre><code>{\n    xtype: 'component',\n    autoEl: {\n        tag: 'img',\n        src: 'http://www.example.com/example.jpg'\n    }\n}, {\n    xtype: 'component',\n    autoEl: {\n        tag: 'blockquote',\n        html: 'autoEl is cool!'\n    }\n}, {\n    xtype: 'container',\n    autoEl: 'ul',\n    cls: 'ux-unordered-list',\n    items: {\n        xtype: 'component',\n        autoEl: 'li',\n        html: 'First list item'\n    }\n}\n</code></pre>\n"},"baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this component's element. This will also be prepended to elements within this\ncomponent like Panel's body will get a class <code>x-panel-body</code>. This means that if you create a subclass of Panel, and\nyou want it to get all the Panels styling for the element and the body, you leave the <code>baseCls</code> <code>x-panel</code> and use\n<code>componentCls</code> to add specific styling for this component.</p>\n"},"glyph":{"!type":"number|string","!doc":"<p>A numeric unicode character code to serve as the image.  If this option is used\nThe image will be rendered using a div with innerHTML set to the html entity\nfor the given character code.  The default font-family for glyphs can be set\nglobally using <a href=\"#!/api/Ext-method-setGlyphFontFamily\" rel=\"Ext-method-setGlyphFontFamily\" class=\"docClass\">Ext.setGlyphFontFamily()</a>. Alternatively,\nthis config option accepts a string with the charCode and font-family separated by\nthe <code>@</code> symbol. For example '65@My Font Family'.</p>\n"},"imgCls":{"!type":"string","!doc":"<p>Optional CSS classes to add to the img element.</p>\n"},"src":{"!type":"string","!doc":"<p>The image src.</p>\n"},"title":{"!type":"string","!doc":"<p>Specifies addtional information about the image.</p>\n"}},"Ext_LoadMask_cfg":{"!proto":"Ext_Component_cfg","baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this component's element. This will also be prepended to elements within this\ncomponent like Panel's body will get a class <code>x-panel-body</code>. This means that if you create a subclass of Panel, and\nyou want it to get all the Panels styling for the element and the body, you leave the <code>baseCls</code> <code>x-panel</code> and use\n<code>componentCls</code> to add specific styling for this component.</p>\n"},"constrain":{"!type":"bool","!doc":"<p>True to constrain this Components within its containing element, false to allow it to fall outside of its containing\nelement. By default this Component will be rendered to <code>document.body</code>. To render and constrain this Component within\nanother element specify <a href=\"#!/api/Ext.AbstractComponent-cfg-renderTo\" rel=\"Ext.AbstractComponent-cfg-renderTo\" class=\"docClass\">renderTo</a>.</p>\n"},"fixed":{"!type":"bool","!doc":"<p>Configure as <code>true</code> to have this Component fixed at its <code>X, Y</code> coordinates in the browser viewport, immune\nto scrolling the document.</p>\n\n<p><em>Only in browsers that support <code>position:fixed</code></em></p>\n\n<p><em>IE6 and IE7, 8 and 9 quirks do not support <code>position: fixed</code></em></p>\n"},"floating":{"!type":"bool","!doc":"<p>Obviously, it's floating.</p>\n"},"focusOnToFront":{"!type":"bool","!doc":"<p>Masks are not focusable</p>\n"},"maskCls":{"!type":"string","!doc":"<p>The CSS class to apply to the mask element</p>\n"},"msg":{"!type":"string","!doc":"<p>The text to display in a centered loading message box.</p>\n"},"msgCls":{"!type":"string","!doc":"<p>The CSS class to apply to the loading message element.</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.LoadMask-method-getEl\" rel=\"Ext.LoadMask-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.LoadMask-method-getEl\" rel=\"Ext.LoadMask-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.LoadMask-cfg-renderSelectors\" rel=\"Ext.LoadMask-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.LoadMask-cfg-childEls\" rel=\"Ext.LoadMask-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"},"shadow":{"!type":"string|bool","!doc":"<p>Specifies whether the floating component should be given a shadow. Set to true to automatically create an\n<a href=\"#!/api/Ext.Shadow\" rel=\"Ext.Shadow\" class=\"docClass\">Ext.Shadow</a>, or a string indicating the shadow's display <a href=\"#!/api/Ext.Shadow-cfg-mode\" rel=\"Ext.Shadow-cfg-mode\" class=\"docClass\">Ext.Shadow.mode</a>. Set to false to\ndisable the shadow.</p>\n"},"shadowOffset":{"!type":"number","!doc":"<p>Number of pixels to offset the shadow.</p>\n"},"store":{"!type":"+Ext.data.Store","!doc":"<p>Optional Store to which the mask is bound. The mask is displayed when a load request is issued, and\nhidden on either load success, or load fail.</p>\n"},"target":{"!type":"+Ext.Component","!doc":"<p>The Component you wish to mask. The the mask will be automatically sized\nupon Component resize, and the message box will be kept centered.</p>\n"},"useMsg":{"!type":"bool","!doc":"<p>Whether or not to use a loading message class or simply mask the bound element.</p>\n"},"useTargetEl":{"!type":"bool","!doc":"<p>True to mask the <a href=\"#!/api/Ext.Component-method-getTargetEl\" rel=\"Ext.Component-method-getTargetEl\" class=\"docClass\">targetEl</a> of the bound Component. By default,\nthe <a href=\"#!/api/Ext.Component-method-getEl\" rel=\"Ext.Component-method-getEl\" class=\"docClass\">el</a> will be masked.</p>\n"}},"Ext_ModelManager_cfg":{"!proto":"Ext_AbstractManager_cfg"},"Ext_PluginManager_cfg":{"!proto":"Ext_AbstractManager_cfg"},"Ext_ProgressBar_cfg":{"!proto":"Ext_Component_cfg","animate":{"!type":"bool|?","!doc":"<p>True to animate the progress bar during transitions, or an animation configuration\n(see the <a href=\"#!/api/Ext.ProgressBar-method-animate\" rel=\"Ext.ProgressBar-method-animate\" class=\"docClass\">animate</a> method for details).</p>\n"},"baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to the progress bar's wrapper element.</p>\n"},"componentLayout":{"!type":"string|?","!doc":"<p>The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout\nmanager which sizes a Component's internal structure in response to the Component being sized.</p>\n\n<p>Generally, developers will not use this configuration as all provided Components which need their internal\nelements sizing (Such as <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">input fields</a>) come with their own componentLayout managers.</p>\n\n<p>The <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used on instances of the base <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\nclass which simply sizes the Component's encapsulating element to the height and width specified in the\n<a href=\"#!/api/Ext.ProgressBar-method-setSize\" rel=\"Ext.ProgressBar-method-setSize\" class=\"docClass\">setSize</a> method.</p>\n"},"id":{"!type":"string","!doc":"<p>The progress bar element's id (defaults to an auto-generated id)</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.ProgressBar-method-getEl\" rel=\"Ext.ProgressBar-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.ProgressBar-method-getEl\" rel=\"Ext.ProgressBar-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.ProgressBar-cfg-renderSelectors\" rel=\"Ext.ProgressBar-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.ProgressBar-cfg-childEls\" rel=\"Ext.ProgressBar-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"},"text":{"!type":"string","!doc":"<p>The text shown in the progress bar.</p>\n"},"textEl":{"!type":"string|+HTMLElement|+Ext.Element","!doc":"<p>The element to render the progress text to (defaults to the progress bar's internal text element)</p>\n"},"value":{"!type":"number","!doc":"<p>A floating point value between 0 and 1 (e.g., .5)</p>\n"}},"Ext_Shadow_cfg":{"!proto":"Ext_Base_cfg","mode":{"!type":"string","!doc":"<p>The shadow display mode.  Supports the following options:</p>\n\n<ul>\n<li>sides : Shadow displays on both sides and bottom only</li>\n<li>frame : Shadow displays equally on all four sides</li>\n<li>drop : Traditional bottom-right drop shadow</li>\n</ul>\n\n"},"offset":{"!type":"number","!doc":"<p>The number of pixels to offset the shadow from the element</p>\n"}},"Ext_Template_cfg":{"!proto":"Ext_Base_cfg","compiled":{"!type":"bool","!doc":"<p>True to immediately compile the template. Defaults to false.</p>\n"},"disableFormats":{"!type":"bool","!doc":"<p>True to disable format functions in the template. If the template doesn't contain\nformat functions, setting disableFormats to true will reduce apply time. Defaults to false.</p>\n"}},"Ext_XTemplate_cfg":{"!proto":"Ext_Template_cfg","definitions":{"!type":"string|[?]","!doc":"<p>Optional. A statement, or array of statements which set up <code>var</code>s which may then\nbe accessed within the scope of the generated function.</p>\n"}},"Ext_XTemplateCompiler_cfg":{"!proto":"Ext_XTemplateParser_cfg"},"Ext_XTemplateParser_cfg":{"!proto":"Ext_Base_cfg"},"Ext_app_Application_cfg":{"!proto":"Ext_app_Controller_cfg","appFolder":{"!type":"string","!doc":"<p>The path to the directory which contains all application's classes.\nThis path will be registered via <a href=\"#!/api/Ext.Loader-method-setPath\" rel=\"Ext.Loader-method-setPath\" class=\"docClass\">Ext.Loader.setPath</a> for the namespace specified\nin the <a href=\"#!/api/Ext.app.Application-cfg-name\" rel=\"Ext.app.Application-cfg-name\" class=\"docClass\">name</a> config.</p>\n"},"appProperty":{"!type":"string","!doc":"<p>The name of a property to be assigned to the main namespace to gain a reference to\nthis application. Can be set to an empty value to prevent the reference from\nbeing created</p>\n\n<pre><code><a href=\"#!/api/Ext-method-application\" rel=\"Ext-method-application\" class=\"docClass\">Ext.application</a>({\n    name: 'MyApp',\n    appProperty: 'myProp',\n\n    launch: function() {\n        console.log(MyApp.myProp === this);\n    }\n});\n</code></pre>\n"},"autoCreateViewport":{"!type":"bool","!doc":"<p>True to automatically load and instantiate AppName.view.Viewport before firing the launch\nfunction.</p>\n"},"controllers":{"!type":"string|[string]","!doc":"<p>Names of controllers that the app uses.</p>\n"},"enableQuickTips":{"!type":"bool","!doc":"<p>True to automatically set up <a href=\"#!/api/Ext.tip.QuickTip\" rel=\"Ext.tip.QuickTip\" class=\"docClass\">Ext.tip.QuickTip</a> support.</p>\n"},"name":{"!type":"string","!doc":"<p>The name of your application. This will also be the namespace for your views, controllers\nmodels and stores. Don't use spaces or special characters in the name. <strong>Application name\nis mandatory</strong>.</p>\n"},"namespaces":{"!type":"string|[string]","!doc":"<p>The list of namespace prefixes used in the application to resolve dependencies\nlike Views and Stores:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-application\" rel=\"Ext-method-application\" class=\"docClass\">Ext.application</a>({\n     name: 'MyApp',\n\n     namespaces: ['Common.code'],\n\n     controllers: [ 'Common.code.controller.Foo', 'Bar' ]\n });\n\n <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Common.code.controller.Foo', {\n     extend: '<a href=\"#!/api/Ext.app.Controller\" rel=\"Ext.app.Controller\" class=\"docClass\">Ext.app.Controller</a>',\n\n     models: ['Foo'],    // Loads Common.code.model.Foo\n     views:  ['Bar']     // Loads Common.code.view.Bar\n });\n\n <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('MyApp.controller.Bar', {\n     extend: '<a href=\"#!/api/Ext.app.Controller\" rel=\"Ext.app.Controller\" class=\"docClass\">Ext.app.Controller</a>',\n\n     models: ['Foo'],    // Loads MyApp.model.Foo\n     views:  ['Bar']     // Loads MyApp.view.Bar\n });\n</code></pre>\n\n<p>You don't need to include main namespace (MyApp), it will be added to the list\nautomatically.</p>\n"},"paths":{"!type":"?","!doc":"<p>Additional load paths to add to <a href=\"#!/api/Ext.Loader\" rel=\"Ext.Loader\" class=\"docClass\">Ext.Loader</a>.\nSee <a href=\"#!/api/Ext.Loader-cfg-paths\" rel=\"Ext.Loader-cfg-paths\" class=\"docClass\">Ext.Loader.paths</a> config for more details.</p>\n"},"scope":{"!type":"?","!doc":"<p>The scope to execute the <a href=\"#!/api/Ext.app.Application-method-launch\" rel=\"Ext.app.Application-method-launch\" class=\"docClass\">launch</a> function in. Defaults to the Application instance.</p>\n"}},"Ext_app_Controller_cfg":{"!proto":"Ext_Base_cfg","id":{"!type":"string","!doc":"<p>The id of this controller. You can use this id when dispatching.</p>\n"},"listeners":{"!type":"?","!doc":"<p>A config object containing one or more event handlers to be added to this object during initialization. This\nshould be a valid listeners config object as specified in the <a href=\"#!/api/Ext.util.Observable-method-addListener\" rel=\"Ext.util.Observable-method-addListener\" class=\"docClass\">addListener</a> example for attaching multiple\nhandlers at once.</p>\n\n<p><strong>DOM events from Ext JS <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Components</a></strong></p>\n\n<p>While <em>some</em> Ext JS Component classes export selected DOM events (e.g. \"click\", \"mouseover\" etc), this is usually\nonly done when extra value can be added. For example the <a href=\"#!/api/Ext.view.View\" rel=\"Ext.view.View\" class=\"docClass\">DataView</a>'s <strong><code><a href=\"#!/api/Ext.view.View-event-itemclick\" rel=\"Ext.view.View-event-itemclick\" class=\"docClass\">itemclick</a></code></strong> event passing the node clicked on. To access DOM events directly from a\nchild element of a Component, we need to specify the <code>element</code> option to identify the Component property to add a\nDOM listener to:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>({\n    width: 400,\n    height: 200,\n    dockedItems: [{\n        xtype: 'toolbar'\n    }],\n    listeners: {\n        click: {\n            element: 'el', //bind to the underlying el property on the panel\n            fn: function(){ console.log('click el'); }\n        },\n        dblclick: {\n            element: 'body', //bind to the underlying body property on the panel\n            fn: function(){ console.log('dblclick body'); }\n        }\n    }\n});\n</code></pre>\n"},"models":{"!type":"string|[string]","!doc":"<p>Array of models to require from AppName.model namespace. For example:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>(\"MyApp.controller.Foo\", {\n     extend: \"<a href=\"#!/api/Ext.app.Controller\" rel=\"Ext.app.Controller\" class=\"docClass\">Ext.app.Controller</a>\",\n     models: ['User', 'Vehicle']\n });\n</code></pre>\n\n<p>This is equivalent of:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>(\"MyApp.controller.Foo\", {\n     extend: \"<a href=\"#!/api/Ext.app.Controller\" rel=\"Ext.app.Controller\" class=\"docClass\">Ext.app.Controller</a>\",\n     requires: ['MyApp.model.User', 'MyApp.model.Vehicle'],\n\n     getUserModel: function() {\n         return this.getModel(\"User\");\n     },\n\n     getVehicleModel: function() {\n         return this.getModel(\"Vehicle\");\n     }\n });\n</code></pre>\n"},"refs":{"!type":"[?]","!doc":"<p>Array of configs to build up references to views on page. For example:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>(\"MyApp.controller.Foo\", {\n     extend: \"<a href=\"#!/api/Ext.app.Controller\" rel=\"Ext.app.Controller\" class=\"docClass\">Ext.app.Controller</a>\",\n\n     refs: [{\n         ref: 'list',\n         selector: 'grid'\n     }],\n });\n</code></pre>\n\n<p>This will add method <code>getList</code> to the controller which will internally use\n<a href=\"#!/api/Ext.ComponentQuery\" rel=\"Ext.ComponentQuery\" class=\"docClass\">Ext.ComponentQuery</a> to reference the grid component on page.</p>\n\n<p>The following fields can be used in ref definition:</p>\n\n<ul>\n<li><code>ref</code> - name of the reference.</li>\n<li><code>selector</code> - <a href=\"#!/api/Ext.ComponentQuery\" rel=\"Ext.ComponentQuery\" class=\"docClass\">Ext.ComponentQuery</a> selector to access the component.</li>\n<li><code>autoCreate</code> - True to create the component automatically if not found on page.</li>\n<li><code>forceCreate</code> - Forces the creation of the component every time reference is accessed\n(when <code>get&lt;REFNAME&gt;</code> is called).</li>\n<li><code>xtype</code> - Used to create component by its xtype with autoCreate or forceCreate. If\nyou don't provide xtype, an <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> instance will be created.</li>\n</ul>\n\n"},"stores":{"!type":"string|[string]","!doc":"<p>Array of stores to require from AppName.store namespace and to generate getter methods for.\nFor example:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>(\"MyApp.controller.Foo\", {\n     extend: \"<a href=\"#!/api/Ext.app.Controller\" rel=\"Ext.app.Controller\" class=\"docClass\">Ext.app.Controller</a>\",\n     stores: ['Users', 'Vehicles']\n });\n</code></pre>\n\n<p>This is equivalent to:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>(\"MyApp.controller.Foo\", {\n     extend: \"<a href=\"#!/api/Ext.app.Controller\" rel=\"Ext.app.Controller\" class=\"docClass\">Ext.app.Controller</a>\",\n\n     requires: [\n         'MyApp.store.Users',\n         'MyApp.store.Vehicles'\n     ]\n\n     getUsersStore: function() {\n         return this.getStore(\"Users\");\n     },\n\n     getVehiclesStore: function() {\n         return this.getStore(\"Vehicles\");\n     }\n });\n</code></pre>\n"},"views":{"!type":"string|[string]","!doc":"<p>Array of views to require from AppName.view namespace and to generate getter methods for.\nFor example:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>(\"MyApp.controller.Foo\", {\n     extend: \"<a href=\"#!/api/Ext.app.Controller\" rel=\"Ext.app.Controller\" class=\"docClass\">Ext.app.Controller</a>\",\n     views: ['List', 'Detail']\n });\n</code></pre>\n\n<p>This is equivalent of:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>(\"MyApp.controller.Foo\", {\n     extend: \"<a href=\"#!/api/Ext.app.Controller\" rel=\"Ext.app.Controller\" class=\"docClass\">Ext.app.Controller</a>\",\n     requires: ['MyApp.view.List', 'MyApp.view.Detail'],\n\n     getListView: function() {\n         return this.getView(\"List\");\n     },\n\n     getDetailView: function() {\n         return this.getView(\"Detail\");\n     }\n });\n</code></pre>\n"}},"Ext_button_Button_cfg":{"!proto":"Ext_Component_cfg","allowDepress":{"!type":"bool","!doc":"<p>False to not allow a pressed Button to be depressed. Only valid when <a href=\"#!/api/Ext.button.Button-cfg-enableToggle\" rel=\"Ext.button.Button-cfg-enableToggle\" class=\"docClass\">enableToggle</a> is true.</p>\n"},"arrowAlign":{"!type":"string","!doc":"<p>The side of the Button box to render the arrow if the button has an associated <a href=\"#!/api/Ext.button.Button-cfg-menu\" rel=\"Ext.button.Button-cfg-menu\" class=\"docClass\">menu</a>. Two\nvalues are allowed:</p>\n\n<ul>\n<li>'right'</li>\n<li>'bottom'</li>\n</ul>\n\n"},"arrowCls":{"!type":"string","!doc":"<p>The className used for the inner arrow element if the button has a menu.</p>\n"},"baseCls":{"!type":"string","!doc":"<p>The base CSS class to add to all buttons.</p>\n"},"baseParams":{"!type":"?","!doc":"<p>An object literal of parameters to pass to the url when the <a href=\"#!/api/Ext.button.Button-cfg-href\" rel=\"Ext.button.Button-cfg-href\" class=\"docClass\">href</a> property is specified.</p>\n"},"clickEvent":{"!type":"string","!doc":"<p>The DOM event that will fire the handler of the button. This can be any valid event name (dblclick, contextmenu).</p>\n"},"cls":{"!type":"string","!doc":"<p>A CSS class string to apply to the button's main element.</p>\n"},"componentLayout":{"!type":"string|?","!doc":"<p>The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout\nmanager which sizes a Component's internal structure in response to the Component being sized.</p>\n\n<p>Generally, developers will not use this configuration as all provided Components which need their internal\nelements sizing (Such as <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">input fields</a>) come with their own componentLayout managers.</p>\n\n<p>The <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used on instances of the base <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\nclass which simply sizes the Component's encapsulating element to the height and width specified in the\n<a href=\"#!/api/Ext.button.Button-method-setSize\" rel=\"Ext.button.Button-method-setSize\" class=\"docClass\">setSize</a> method.</p>\n"},"destroyMenu":{"!type":"bool","!doc":"<p>Whether or not to destroy any associated menu when this button is destroyed. The menu\nwill be destroyed unless this is explicitly set to false.</p>\n"},"disabled":{"!type":"bool","!doc":"<p>True to start disabled.</p>\n"},"enableToggle":{"!type":"bool","!doc":"<p>True to enable pressed/not pressed toggling. If a <a href=\"#!/api/Ext.button.Button-cfg-toggleGroup\" rel=\"Ext.button.Button-cfg-toggleGroup\" class=\"docClass\">toggleGroup</a> is specified, this\noption will be set to true.</p>\n"},"focusCls":{"!type":"string","!doc":"<p>The CSS class to add to a button when it is in the focussed state.</p>\n"},"frame":{"!type":"bool","!doc":"<p>Specify as <code>true</code> to have the Component inject framing elements within the Component at render time to provide a\ngraphical rounded frame around the Component content.</p>\n\n<p>This is only necessary when running on outdated, or non standard-compliant browsers such as Microsoft's Internet\nExplorer prior to version 9 which do not support rounded corners natively.</p>\n\n<p>The extra space taken up by this framing is available from the read only property <a href=\"#!/api/Ext.button.Button-property-frameSize\" rel=\"Ext.button.Button-property-frameSize\" class=\"docClass\">frameSize</a>.</p>\n"},"glyph":{"!type":"number|string","!doc":"<p>A numeric unicode character code to use as the icon for this button. The default\nfont-family for glyphs can be set globally using\n<a href=\"#!/api/Ext-method-setGlyphFontFamily\" rel=\"Ext-method-setGlyphFontFamily\" class=\"docClass\">Ext.setGlyphFontFamily()</a>. Alternatively, this\nconfig option accepts a string with the charCode and font-family separated by the\n<code>@</code> symbol. For example '65@My Font Family'.</p>\n"},"handleMouseEvents":{"!type":"bool","!doc":"<p>False to disable visual cues on mouseover, mouseout and mousedown.</p>\n"},"handler":{"!type":"fn()","!doc":"<p>A function called when the button is clicked (can be used instead of click event).</p>\n"},"hidden":{"!type":"bool","!doc":"<p>True to start hidden.</p>\n"},"href":{"!type":"string","!doc":"<p>The URL to open when the button is clicked. Specifying this config causes the Button to be\nrendered with the specified URL as the <code>href</code> attribute of its <code>&lt;a&gt;</code> Element.</p>\n\n<p>This is better than specifying a click handler of</p>\n\n<pre><code>function() { window.location = \"http://www.sencha.com\" }\n</code></pre>\n\n<p>because the UI will provide meaningful hints to the user as to what to expect upon clicking\nthe button, and will also allow the user to open in a new tab or window, bookmark or drag the URL, or directly save\nthe URL stream to disk.</p>\n\n<p>See also the <a href=\"#!/api/Ext.button.Button-cfg-hrefTarget\" rel=\"Ext.button.Button-cfg-hrefTarget\" class=\"docClass\">hrefTarget</a> config.</p>\n"},"hrefTarget":{"!type":"string","!doc":"<p>The target attribute to use for the underlying anchor. Only used if the <a href=\"#!/api/Ext.button.Button-cfg-href\" rel=\"Ext.button.Button-cfg-href\" class=\"docClass\">href</a>\nproperty is specified.</p>\n"},"icon":{"!type":"string","!doc":"<p>The path to an image to display in the button.</p>\n"},"iconAlign":{"!type":"string","!doc":"<p>The side of the Button box to render the icon. Four values are allowed:</p>\n\n<ul>\n<li>'top'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'left'</li>\n</ul>\n\n"},"iconCls":{"!type":"string","!doc":"<p>A css class which sets a background image to be used as the icon for this button.</p>\n"},"menu":{"!type":"+Ext.menu.Menu|string|?","!doc":"<p>Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob.</p>\n"},"menuActiveCls":{"!type":"string","!doc":"<p>The CSS class to add to a button when it's menu is active.</p>\n"},"menuAlign":{"!type":"string","!doc":"<p>The position to align the menu to (see <a href=\"#!/api/Ext.util.Positionable-method-alignTo\" rel=\"Ext.util.Positionable-method-alignTo\" class=\"docClass\">Ext.util.Positionable.alignTo</a> for more details).</p>\n"},"minWidth":{"!type":"number","!doc":"<p>The minimum width for this button (used to give a set of buttons a common width).\nSee also <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>.<a href=\"#!/api/Ext.panel.Panel-cfg-minButtonWidth\" rel=\"Ext.panel.Panel-cfg-minButtonWidth\" class=\"docClass\">minButtonWidth</a>.</p>\n"},"overCls":{"!type":"string","!doc":"<p>The CSS class to add to a button when it is in the over (hovered) state.</p>\n"},"overflowText":{"!type":"string","!doc":"<p>If used in a <a href=\"#!/api/Ext.toolbar.Toolbar\" rel=\"Ext.toolbar.Toolbar\" class=\"docClass\">Toolbar</a>, the text to be used if this item is shown in the overflow menu.\nSee also <a href=\"#!/api/Ext.toolbar.Item\" rel=\"Ext.toolbar.Item\" class=\"docClass\">Ext.toolbar.Item</a>.<code><a href=\"#!/api/Ext.toolbar.Item-cfg-overflowText\" rel=\"Ext.toolbar.Item-cfg-overflowText\" class=\"docClass\">overflowText</a></code>.</p>\n"},"params":{"!type":"?","!doc":"<p>An object literal of parameters to pass to the url when the <a href=\"#!/api/Ext.button.Button-cfg-href\" rel=\"Ext.button.Button-cfg-href\" class=\"docClass\">href</a> property is specified. Any params\noverride <a href=\"#!/api/Ext.button.Button-cfg-baseParams\" rel=\"Ext.button.Button-cfg-baseParams\" class=\"docClass\">baseParams</a>. New params can be set using the <a href=\"#!/api/Ext.button.Button-method-setParams\" rel=\"Ext.button.Button-method-setParams\" class=\"docClass\">setParams</a> method.</p>\n"},"pressed":{"!type":"bool","!doc":"<p>True to start pressed (only if enableToggle = true)</p>\n"},"pressedCls":{"!type":"string","!doc":"<p>The CSS class to add to a button when it is in the pressed state.</p>\n"},"preventDefault":{"!type":"bool","!doc":"<p>True to prevent the default action when the <a href=\"#!/api/Ext.button.Button-cfg-clickEvent\" rel=\"Ext.button.Button-cfg-clickEvent\" class=\"docClass\">clickEvent</a> is processed.</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>We have to keep \"unselectable\" attribute on all elements because it's not inheritable.\nWithout it, clicking anywhere on a button disrupts current selection and cursor position\nin HtmlEditor.</p>\n"},"repeat":{"!type":"bool|?","!doc":"<p>True to repeat fire the click event while the mouse is down. This can also be a\n<a href=\"#!/api/Ext.util.ClickRepeater\" rel=\"Ext.util.ClickRepeater\" class=\"docClass\">ClickRepeater</a> config object.</p>\n"},"scale":{"!type":"string|string|string","!doc":"<p>The size of the Button. Three values are allowed:</p>\n\n<ul>\n<li>'small' - Results in the button element being 16px high.</li>\n<li>'medium' - Results in the button element being 24px high.</li>\n<li>'large' - Results in the button element being 32px high.</li>\n</ul>\n\n"},"scope":{"!type":"?","!doc":"<p>The scope (<strong>this</strong> reference) in which the <code><a href=\"#!/api/Ext.button.Button-cfg-handler\" rel=\"Ext.button.Button-cfg-handler\" class=\"docClass\">handler</a></code> and <code><a href=\"#!/api/Ext.button.Button-cfg-toggleHandler\" rel=\"Ext.button.Button-cfg-toggleHandler\" class=\"docClass\">toggleHandler</a></code> is executed.\nDefaults to this Button.</p>\n"},"showEmptyMenu":{"!type":"bool","!doc":"<p>True to force an attached <a href=\"#!/api/Ext.button.Button-cfg-menu\" rel=\"Ext.button.Button-cfg-menu\" class=\"docClass\">menu</a> with no items to be shown when clicking\nthis button. By default, the menu will not show if it is empty.</p>\n"},"shrinkWrap":{"!type":"bool|number","!doc":"<p>If this property is a number, it is interpreted as follows:</p>\n\n<ul>\n<li>0: Neither width nor height depend on content. This is equivalent to <code>false</code>.</li>\n<li>1: Width depends on content (shrink wraps), but height does not.</li>\n<li>2: Height depends on content (shrink wraps), but width does not. The default.</li>\n<li>3: Both width and height depend on content (shrink wrap). This is equivalent to <code>true</code>.</li>\n</ul>\n\n\n<p>In CSS terms, shrink-wrap width is analogous to an inline-block element as opposed\nto a block-level element. Some container layouts always shrink-wrap their children,\neffectively ignoring this property (e.g., <a href=\"#!/api/Ext.layout.container.HBox\" rel=\"Ext.layout.container.HBox\" class=\"docClass\">Ext.layout.container.HBox</a>,\n<a href=\"#!/api/Ext.layout.container.VBox\" rel=\"Ext.layout.container.VBox\" class=\"docClass\">Ext.layout.container.VBox</a>, <a href=\"#!/api/Ext.layout.component.Dock\" rel=\"Ext.layout.component.Dock\" class=\"docClass\">Ext.layout.component.Dock</a>).</p>\n"},"tabIndex":{"!type":"number","!doc":"<p>Set a DOM tabIndex for this button.</p>\n"},"text":{"!type":"string","!doc":"<p>The button text to be used as innerHTML (html tags are accepted).</p>\n"},"textAlign":{"!type":"string","!doc":"<p>The text alignment for this button (center, left, right).</p>\n"},"toggleGroup":{"!type":"string","!doc":"<p>The group this toggle button is a member of (only 1 per group can be pressed). If a toggleGroup\nis specified, the <a href=\"#!/api/Ext.button.Button-cfg-enableToggle\" rel=\"Ext.button.Button-cfg-enableToggle\" class=\"docClass\">enableToggle</a> configuration will automatically be set to true.</p>\n"},"toggleHandler":{"!type":"fn()","!doc":"<p>Function called when a Button with <a href=\"#!/api/Ext.button.Button-cfg-enableToggle\" rel=\"Ext.button.Button-cfg-enableToggle\" class=\"docClass\">enableToggle</a> set to true is clicked.</p>\n"},"tooltip":{"!type":"string|?","!doc":"<p>The tooltip for the button - can be a string to be used as innerHTML (html tags are accepted) or\nQuickTips config object.</p>\n"},"tooltipType":{"!type":"string","!doc":"<p>The type of tooltip to use. Either 'qtip' for QuickTips or 'title' for title attribute.</p>\n"}},"Ext_button_Cycle_cfg":{"!proto":"Ext_button_Split_cfg","changeHandler":{"!type":"fn()","!doc":"<p>A callback function that will be invoked each time the active menu item in the button's menu has changed. If this\ncallback is not supplied, the SplitButton will instead fire the <a href=\"#!/api/Ext.button.Cycle-event-change\" rel=\"Ext.button.Cycle-event-change\" class=\"docClass\">change</a> event on active item change. The\nchangeHandler function will be called with the following argument list: (SplitButton this, <a href=\"#!/api/Ext.menu.CheckItem\" rel=\"Ext.menu.CheckItem\" class=\"docClass\">Ext.menu.CheckItem</a>\nitem)</p>\n"},"forceGlyph":{"!type":"number|string","!doc":"<p>The charCode to be used as the static icon for this button.  This icon will always be\ndisplayed regardless of which item is selected in the dropdown list. This override\nthe default behavior of changing the button's icon to match the selected item's icon\non change. This property expects a format consistent with that of <a href=\"#!/api/Ext.button.Cycle-cfg-glyph\" rel=\"Ext.button.Cycle-cfg-glyph\" class=\"docClass\">glyph</a></p>\n"},"forceIcon":{"!type":"string","!doc":"<p>A css class which sets an image to be used as the static icon for this button. This icon will always be displayed\nregardless of which item is selected in the dropdown list. This overrides the default behavior of changing the\nbutton's icon to match the selected item's icon on change.</p>\n"},"items":{"!type":"[?]","!doc":"<p>An array of <a href=\"#!/api/Ext.menu.CheckItem\" rel=\"Ext.menu.CheckItem\" class=\"docClass\">Ext.menu.CheckItem</a> <strong>config</strong> objects to be used when creating the button's menu items (e.g.,\n<code>{text:'Foo', iconCls:'foo-icon'}</code>)</p>\n"},"prependText":{"!type":"string","!doc":"<p>A static string to prepend before the active item's text when displayed as the button's text (only applies when\nshowText = true).</p>\n"},"showText":{"!type":"bool","!doc":"<p>True to display the active item's text as the button text. The Button will show its\nconfigured <a href=\"#!/api/Ext.button.Cycle-cfg-text\" rel=\"Ext.button.Cycle-cfg-text\" class=\"docClass\">text</a> if this config is omitted.</p>\n"}},"Ext_button_Split_cfg":{"!proto":"Ext_button_Button_cfg","arrowCls":{"!type":"string","!doc":"<p>The className used for the inner arrow element if the button has a menu.</p>\n"},"arrowHandler":{"!type":"fn()","!doc":"<p>A function called when the arrow button is clicked (can be used instead of click event)</p>\n"},"arrowTooltip":{"!type":"string","!doc":"<p>The title attribute of the arrow.</p>\n"}},"Ext_chart_Callout_cfg":{"!proto":"Ext_Base_cfg"},"Ext_chart_Chart_cfg":{"!proto":"Ext_draw_Component_cfg","animate":{"!type":"bool|?","!doc":"<p>True for the default animation (easing: 'ease' and duration: 500) or a standard animation config\nobject to be used for default chart animations. Defaults to false.</p>\n"},"axes":{"!type":"[+Ext.chart.axis.Axis]","!doc":"<p>Array of <a href=\"#!/api/Ext.chart.axis.Axis\" rel=\"Ext.chart.axis.Axis\" class=\"docClass\">Axis</a> instances or config objects.  For example:</p>\n\n<pre><code>axes: [{\n    type: 'Numeric',\n    position: 'left',\n    fields: ['data1'],\n    title: 'Number of Hits',\n    minimum: 0,\n    //one minor tick between two major ticks\n    minorTickSteps: 1\n}, {\n    type: 'Category',\n    position: 'bottom',\n    fields: ['name'],\n    title: 'Month of the Year'\n}]\n</code></pre>\n"},"background":{"!type":"?|bool","!doc":"<p>The chart background. This can be a gradient object, image, or color. Defaults to false for no\nbackground. For example, if <code>background</code> were to be a color we could set the object as</p>\n\n<pre><code>background: {\n    //color string\n    fill: '#ccc'\n}\n</code></pre>\n\n<p>You can specify an image by using:</p>\n\n<pre><code>background: {\n    image: 'http://path.to.image/'\n}\n</code></pre>\n\n<p>Also you can specify a gradient by using the gradient object syntax:</p>\n\n<pre><code>background: {\n    gradient: {\n        id: 'gradientId',\n        angle: 45,\n        stops: {\n            0: {\n                color: '#555'\n            }\n            100: {\n                color: '#ddd'\n            }\n        }\n    }\n}\n</code></pre>\n"},"gradients":{"!type":"[?]","!doc":"<p>Define a set of gradients that can be used as <code>fill</code> property in sprites. The gradients array is an\narray of objects with the following properties:</p>\n\n<ul>\n<li><strong>id</strong> - string - The unique name of the gradient.</li>\n<li><strong>angle</strong> - number, optional - The angle of the gradient in degrees.</li>\n<li><strong>stops</strong> - object - An object with numbers as keys (from 0 to 100) and style objects as values</li>\n</ul>\n\n\n<p>For example:</p>\n\n<pre><code>gradients: [{\n    id: 'gradientId',\n    angle: 45,\n    stops: {\n        0: {\n            color: '#555'\n        },\n        100: {\n            color: '#ddd'\n        }\n    }\n}, {\n    id: 'gradientId2',\n    angle: 0,\n    stops: {\n        0: {\n            color: '#590'\n        },\n        20: {\n            color: '#599'\n        },\n        100: {\n            color: '#ddd'\n        }\n    }\n}]\n</code></pre>\n\n<p>Then the sprites can use <code>gradientId</code> and <code>gradientId2</code> by setting the fill attributes to those ids, for example:</p>\n\n<pre><code>sprite.setAttributes({\n    fill: 'url(#gradientId)'\n}, true);\n</code></pre>\n"},"insetPadding":{"!type":"number","!doc":"<p>The amount of inset padding in pixels for the chart. Defaults to 10.</p>\n"},"legend":{"!type":"bool|?","!doc":"<p>True for the default legend display or a legend config object. Defaults to false.</p>\n"},"listeners":{"!type":"?","!doc":"<p>A config object containing one or more event handlers to be added to this object during initialization. This\nshould be a valid listeners config object as specified in the <a href=\"#!/api/Ext.util.Observable-method-addListener\" rel=\"Ext.util.Observable-method-addListener\" class=\"docClass\">addListener</a> example for attaching multiple\nhandlers at once.</p>\n\n<p><strong>DOM events from Ext JS <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Components</a></strong></p>\n\n<p>While <em>some</em> Ext JS Component classes export selected DOM events (e.g. \"click\", \"mouseover\" etc), this is usually\nonly done when extra value can be added. For example the <a href=\"#!/api/Ext.view.View\" rel=\"Ext.view.View\" class=\"docClass\">DataView</a>'s <strong><code><a href=\"#!/api/Ext.view.View-event-itemclick\" rel=\"Ext.view.View-event-itemclick\" class=\"docClass\">itemclick</a></code></strong> event passing the node clicked on. To access DOM events directly from a\nchild element of a Component, we need to specify the <code>element</code> option to identify the Component property to add a\nDOM listener to:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>({\n    width: 400,\n    height: 200,\n    dockedItems: [{\n        xtype: 'toolbar'\n    }],\n    listeners: {\n        click: {\n            element: 'el', //bind to the underlying el property on the panel\n            fn: function(){ console.log('click el'); }\n        },\n        dblclick: {\n            element: 'body', //bind to the underlying body property on the panel\n            fn: function(){ console.log('dblclick body'); }\n        }\n    }\n});\n</code></pre>\n"},"mask":{"!type":"bool|string","!doc":"<p>Enables selecting a region on chart. True to enable any selection,\n'horizontal' or 'vertical' to restrict the selection to X or Y axis.</p>\n\n<p>The mask in itself will do nothing but fire 'select' event.\nSee <a href=\"#!/api/Ext.chart.Mask\" rel=\"Ext.chart.Mask\" class=\"docClass\">Ext.chart.Mask</a> for example.</p>\n"},"series":{"!type":"[+Ext.chart.series.Series]","!doc":"<p>Array of <a href=\"#!/api/Ext.chart.series.Series\" rel=\"Ext.chart.series.Series\" class=\"docClass\">Series</a> instances or config objects.  For example:</p>\n\n<pre><code>series: [{\n    type: 'column',\n    axis: 'left',\n    listeners: {\n        'afterrender': function() {\n            console('afterrender');\n        }\n    },\n    xField: 'category',\n    yField: 'data1'\n}]\n</code></pre>\n"},"store":{"!type":"+Ext.data.Store","!doc":"<p>The store that supplies data to this chart.</p>\n"},"theme":{"!type":"string","!doc":"<p>The name of the theme to be used. A theme defines the colors and other visual displays of tick marks\non axis, text, title text, line colors, marker colors and styles, etc. Possible theme values are 'Base', 'Green',\n'Sky', 'Red', 'Purple', 'Blue', 'Yellow' and also six category themes 'Category1' to 'Category6'. Default value\nis 'Base'.</p>\n"},"viewBox":{"!type":"bool","!doc":"<p>Turn on view box support which will scale and position items in the draw component to fit to the component while\nmaintaining aspect ratio. Note that this scaling can override other sizing settings on your items.</p>\n"}},"Ext_chart_Highlight_cfg":{"!proto":"Ext_Base_cfg","highlight":{"!type":"bool|?","!doc":"<p>Set to <code>true</code> to enable highlighting using the <a href=\"#!/api/Ext.chart.Highlight-property-highlightCfg\" rel=\"Ext.chart.Highlight-property-highlightCfg\" class=\"docClass\">default highlight attributes</a>.</p>\n\n<p>Can also be an object with style properties (i.e fill, stroke, stroke-width, radius) which are may override the <a href=\"#!/api/Ext.chart.Highlight-property-highlightCfg\" rel=\"Ext.chart.Highlight-property-highlightCfg\" class=\"docClass\">default highlight attributes</a>.</p>\n"}},"Ext_chart_Label_cfg":{"!proto":"Ext_Base_cfg","label":{"!type":"?","!doc":"<p>Object with the following properties:</p>\n"}},"Ext_chart_Legend_cfg":{"!proto":"Ext_Base_cfg","boxFill":{"!type":"string","!doc":"<p>Fill style for the legend box</p>\n"},"boxStroke":{"!type":"string","!doc":"<p>Style of the stroke for the legend box</p>\n"},"boxStrokeWidth":{"!type":"string","!doc":"<p>Width of the stroke for the legend box</p>\n"},"boxZIndex":{"!type":"number","!doc":"<p>Sets the z-index for the legend. Defaults to 100.</p>\n"},"itemSpacing":{"!type":"number","!doc":"<p>Amount of space between legend items</p>\n"},"labelColor":{"!type":"string","!doc":"<p>Color to be used for the legend labels, eg '#000'</p>\n"},"labelFont":{"!type":"string","!doc":"<p>Font to be used for the legend labels, eg '12px Helvetica'</p>\n"},"padding":{"!type":"number","!doc":"<p>Amount of padding between the legend box's border and its items</p>\n"},"position":{"!type":"string","!doc":"<p>The position of the legend in relation to the chart. One of: \"top\",\n\"bottom\", \"left\", \"right\", or \"float\". If set to \"float\", then the legend\nbox will be positioned at the point denoted by the x and y parameters.</p>\n"},"update":{"!type":"bool","!doc":"<p>If set to true the legend will be refreshed when the chart is.\nThis is useful to update the legend items if series are\nadded/removed/updated from the chart. Default is true.</p>\n"},"visible":{"!type":"bool","!doc":"<p>Whether or not the legend should be displayed.</p>\n"},"x":{"!type":"number","!doc":"<p>X-position of the legend box. Used directly if position is set to \"float\", otherwise\nit will be calculated dynamically.</p>\n"},"y":{"!type":"number","!doc":"<p>Y-position of the legend box. Used directly if position is set to \"float\", otherwise\nit will be calculated dynamically.</p>\n"}},"Ext_chart_LegendItem_cfg":{"!proto":"Ext_draw_CompositeSprite_cfg"},"Ext_chart_Mask_cfg":{"!proto":"Ext_Base_cfg","mask":{"!type":"bool|string","!doc":"<p>Enables selecting a region on chart. True to enable any selection,\n'horizontal' or 'vertical' to restrict the selection to X or Y axis.</p>\n\n<p>The mask in itself will do nothing but fire 'select' event.\nSee <a href=\"#!/api/Ext.chart.Mask\" rel=\"Ext.chart.Mask\" class=\"docClass\">Ext.chart.Mask</a> for example.</p>\n"}},"Ext_chart_MaskLayer_cfg":{"!proto":"Ext_Component_cfg"},"Ext_chart_Tip_cfg":{"!proto":"Ext_Base_cfg"},"Ext_chart_TipSurface_cfg":{"!proto":"Ext_draw_Component_cfg"},"Ext_chart_axis_Abstract_cfg":{"!proto":"Ext_Base_cfg","fields":{"!type":"[string]","!doc":"<p>The fields of model to bind to this axis.</p>\n\n<p>For example if you have a data set of lap times per car, each having the fields:\n<code>'carName'</code>, <code>'avgSpeed'</code>, <code>'maxSpeed'</code>. Then you might want to show the data on chart\nwith <code>['carName']</code> on Name axis and <code>['avgSpeed', 'maxSpeed']</code> on Speed axis.</p>\n"},"label":{"!type":"+Ext.chart.Label","!doc":"<p>The config for chart label.</p>\n"}},"Ext_chart_axis_Axis_cfg":{"!proto":"Ext_chart_axis_Abstract_cfg","adjustEnd":{"!type":"bool","!doc":"<p>Whether to adjust the label at the end of the axis.</p>\n"},"dashSize":{"!type":"number","!doc":"<p>The size of the dash marker. Default's 3.</p>\n"},"grid":{"!type":"bool|?","!doc":"<p>The grid configuration enables you to set a background grid for an axis.\nIf set to <em>true</em> on a vertical axis, vertical lines will be drawn.\nIf set to <em>true</em> on a horizontal axis, horizontal lines will be drawn.\nIf both are set, a proper grid with horizontal and vertical lines will be drawn.</p>\n\n<p>You can set specific options for the grid configuration for odd and/or even lines/rows.\nSince the rows being drawn are rectangle sprites, you can set to an odd or even property\nall styles that apply to <a href=\"#!/api/Ext.draw.Sprite\" rel=\"Ext.draw.Sprite\" class=\"docClass\">Ext.draw.Sprite</a>. For more information on all the style\nproperties you can set please take a look at <a href=\"#!/api/Ext.draw.Sprite\" rel=\"Ext.draw.Sprite\" class=\"docClass\">Ext.draw.Sprite</a>. Some useful style\nproperties are <code>opacity</code>, <code>fill</code>, <code>stroke</code>, <code>stroke-width</code>, etc.</p>\n\n<p>The possible values for a grid option are then <em>true</em>, <em>false</em>, or an object with <code>{ odd, even }</code> properties\nwhere each property contains a sprite style descriptor object that is defined in <a href=\"#!/api/Ext.draw.Sprite\" rel=\"Ext.draw.Sprite\" class=\"docClass\">Ext.draw.Sprite</a>.</p>\n\n<p>For example:</p>\n\n<pre><code>axes: [{\n    type: 'Numeric',\n    position: 'left',\n    fields: ['data1', 'data2', 'data3'],\n    title: 'Number of Hits',\n    grid: {\n        odd: {\n            opacity: 1,\n            fill: '#ddd',\n            stroke: '#bbb',\n            'stroke-width': 1\n        }\n    }\n}, {\n    type: 'Category',\n    position: 'bottom',\n    fields: ['name'],\n    title: 'Month of the Year',\n    grid: true\n}]\n</code></pre>\n"},"hidden":{"!type":"bool","!doc":"<p><code>true</code> to hide the axis.</p>\n"},"length":{"!type":"number","!doc":"<p>Offset axis position. Default's 0.</p>\n"},"majorTickSteps":{"!type":"number","!doc":"<p>If <code>minimum</code> and <code>maximum</code> are specified it forces the number of major ticks to the specified value.\nIf a number of major ticks is forced, it wont search for pretty numbers at the ticks.</p>\n"},"minorTickSteps":{"!type":"number","!doc":"<p>The number of small ticks between two major ticks. Default is zero.</p>\n"},"position":{"!type":"string","!doc":"<p>Where to set the axis. Available options are <code>left</code>, <code>bottom</code>, <code>right</code>, <code>top</code>. Default's <code>bottom</code>.</p>\n"},"title":{"!type":"string","!doc":"<p>The title for the Axis</p>\n"},"width":{"!type":"number","!doc":"<p>Offset axis width. Default's 0.</p>\n"}},"Ext_chart_axis_Category_cfg":{"!proto":"Ext_chart_axis_Axis_cfg","calculateCategoryCount":{"!type":"bool","!doc":"<p>Indicates whether or not to calculate the number of categories (ticks and\nlabels) when there is not enough room to display all labels on the axis.\nIf set to true, the axis will determine the number of categories to plot.\nIf not, all categories will be plotted.</p>\n"},"categoryNames":{"!type":"string","!doc":"<p>A list of category names to display along this axis.</p>\n"}},"Ext_chart_axis_Gauge_cfg":{"!proto":"Ext_chart_axis_Abstract_cfg","margin":{"!type":"number","!doc":"<p>The offset positioning of the tick marks and labels in pixels.</p>\n"},"maximum":{"!type":"number","!doc":"<p>The maximum value of the interval to be displayed in the axis.</p>\n"},"minimum":{"!type":"number","!doc":"<p>The minimum value of the interval to be displayed in the axis.</p>\n"},"steps":{"!type":"number","!doc":"<p>The number of steps and tick marks to add to the interval.</p>\n"},"title":{"!type":"string","!doc":"<p>The title for the Axis.</p>\n"}},"Ext_chart_axis_Numeric_cfg":{"!proto":"Ext_chart_axis_Axis_cfg","adjustMaximumByMajorUnit":{"!type":"bool","!doc":"<p>Indicates whether to extend maximum beyond data's maximum to the nearest\nmajorUnit.</p>\n"},"adjustMinimumByMajorUnit":{"!type":"bool","!doc":"<p>Indicates whether to extend the minimum beyond data's minimum to the\nnearest majorUnit.</p>\n"},"constrain":{"!type":"bool","!doc":"<p>If true, the values of the chart will be rendered only if they belong between minimum and maximum.\nIf false, all values of the chart will be rendered, regardless of whether they belong between minimum and maximum or not.\nDefault's true if maximum and minimum is specified. It is ignored for stacked charts.</p>\n"},"decimals":{"!type":"number","!doc":"<p>The number of decimals to round the value to.</p>\n"},"maximum":{"!type":"number","!doc":"<p>The maximum value drawn by the axis. If not set explicitly, the axis\nmaximum will be calculated automatically. It is ignored for stacked charts.</p>\n"},"minimum":{"!type":"number","!doc":"<p>The minimum value drawn by the axis. If not set explicitly, the axis\nminimum will be calculated automatically. It is ignored for stacked charts.</p>\n"},"position":{"!type":"string","!doc":"<p>Indicates the position of the axis relative to the chart</p>\n"},"scale":{"!type":"string","!doc":"<p>The scaling algorithm to use on this axis. May be \"linear\" or\n\"logarithmic\".  Currently only linear scale is implemented.</p>\n"}},"Ext_chart_axis_Radial_cfg":{"!proto":"Ext_chart_axis_Numeric_cfg","maximum":{"!type":"number","!doc":"<p>The maximum value drawn by the axis. If not set explicitly, the axis\nmaximum will be calculated automatically.</p>\n"},"position":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"steps":{"!type":"number","!doc":"<p>The number of circles to draw outward from the center.</p>\n"}},"Ext_chart_axis_Time_cfg":{"!proto":"Ext_chart_axis_Numeric_cfg","constrain":{"!type":"bool","!doc":"<p>If true, the values of the chart will be rendered only if they belong between the fromDate and toDate.\nIf false, the time axis will adapt to the new values by adding/removing steps.</p>\n"},"dateFormat":{"!type":"string|bool","!doc":"<p>Indicates the format the date will be rendered on.\nFor example: 'M d' will render the dates as 'Jan 30', etc.\nFor a list of possible format strings see <a href=\"#!/api/Ext.Date\" rel=\"Ext.Date\" class=\"docClass\">Date</a></p>\n"},"fromDate":{"!type":"+Date","!doc":"<p>The starting date for the time axis.</p>\n"},"step":{"!type":"[?]","!doc":"<p>An array with two components: The first is the unit of the step (day, month, year, etc). The second one is a number.\nIf the number is an integer, it represents the number of units for the step ([<a href=\"#!/api/Ext.Date-property-DAY\" rel=\"Ext.Date-property-DAY\" class=\"docClass\">Ext.Date.DAY</a>, 2] means \"Every other day\").\nIf the number is a fraction, it represents the number of steps per unit ([<a href=\"#!/api/Ext.Date-property-DAY\" rel=\"Ext.Date-property-DAY\" class=\"docClass\">Ext.Date.DAY</a>, 1/2] means \"Twice a day\").\nIf the unit is the month, the steps may be adjusted depending on the month. For instance [<a href=\"#!/api/Ext.Date-property-MONTH\" rel=\"Ext.Date-property-MONTH\" class=\"docClass\">Ext.Date.MONTH</a>, 1/3], which means \"Three times a month\",\ngenerates steps on the 1st, the 10th and the 20th of every month regardless of whether a month has 28 days or 31 days. The steps are generated\nas follows:\n- [<a href=\"#!/api/Ext.Date-property-MONTH\" rel=\"Ext.Date-property-MONTH\" class=\"docClass\">Ext.Date.MONTH</a>, n]: on the current date every 'n' months, maxed to the number of days in the month.\n- [<a href=\"#!/api/Ext.Date-property-MONTH\" rel=\"Ext.Date-property-MONTH\" class=\"docClass\">Ext.Date.MONTH</a>, 1/2]: on the 1st and 15th of every month.\n- [<a href=\"#!/api/Ext.Date-property-MONTH\" rel=\"Ext.Date-property-MONTH\" class=\"docClass\">Ext.Date.MONTH</a>, 1/3]: on the 1st, 10th and 20th of every month.\n- [<a href=\"#!/api/Ext.Date-property-MONTH\" rel=\"Ext.Date-property-MONTH\" class=\"docClass\">Ext.Date.MONTH</a>, 1/4]: on the 1st, 8th, 15th and 22nd of every month.</p>\n\n<p>Defaults to: [<a href=\"#!/api/Ext.Date-property-DAY\" rel=\"Ext.Date-property-DAY\" class=\"docClass\">Ext.Date.DAY</a>, 1].</p>\n"},"toDate":{"!type":"+Date","!doc":"<p>The ending date for the time axis.</p>\n"}},"Ext_chart_series_Area_cfg":{"!proto":"Ext_chart_series_Cartesian_cfg","style":{"!type":"?","!doc":"<p>Append styling properties to this object for it to override theme properties.</p>\n"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"}},"Ext_chart_series_Bar_cfg":{"!proto":"Ext_chart_series_Cartesian_cfg","column":{"!type":"bool","!doc":"<p>Whether to set the visualization as column chart or horizontal bar chart.</p>\n"},"groupGutter":{"!type":"number","!doc":"<p>The gutter space between groups of bars, as a percentage of the bar width</p>\n"},"gutter":{"!type":"number","!doc":"<p>The gutter space between single bars, as a percentage of the bar width</p>\n"},"stacked":{"!type":"bool","!doc":"<p>If set to <code>true</code> then bars for multiple <code>yField</code> values will be rendered stacked on top of one another.\nOtherwise, they will be rendered side-by-side. Defaults to <code>false</code>.</p>\n"},"style":{"!type":"?","!doc":"<p>Style properties that will override the theming series styles.</p>\n"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"xPadding":{"!type":"number|?","!doc":"<p>Padding between the left/right axes and the bars.\nThe possible values are a number (the number of pixels for both left and right padding)\nor an object with <code>{ left, right }</code> properties.</p>\n"},"yPadding":{"!type":"number|?","!doc":"<p>Padding between the top/bottom axes and the bars.\nThe possible values are a number (the number of pixels for both top and bottom padding)\nor an object with <code>{ top, bottom }</code> properties.</p>\n"}},"Ext_chart_series_Cartesian_cfg":{"!proto":"Ext_chart_series_Series_cfg","axis":{"!type":"string|[string]","!doc":"<p>The position of the axis to bind the values to. Possible values are 'left', 'bottom', 'top' and 'right'.\nYou must explicitly set this value to bind the values of the line series to the ones in the axis, otherwise a\nrelative scale will be used. For example, if you're using a Scatter or Line series and you'd like to have the\nvalues in the chart relative to the bottom and left axes then <code>axis</code> should be <code>['left', 'bottom']</code>.</p>\n"},"xField":{"!type":"string","!doc":"<p>The name of the data Model field corresponding to the x-axis value.</p>\n"},"yField":{"!type":"string|[string]","!doc":"<p>The name(s) of the data Model field(s) corresponding to the y-axis value(s).</p>\n"}},"Ext_chart_series_Column_cfg":{"!proto":"Ext_chart_series_Bar_cfg","axis":{"!type":"string","!doc":"<p>The position of the axis to bind the values to. Possible values are 'left', 'bottom', 'top' and 'right'.\nYou must explicitly set this value to bind the values of the column series to the ones in the axis, otherwise a\nrelative scale will be used.</p>\n"},"column":{"!type":"bool","!doc":"<p>Whether to set the visualization as column chart or horizontal bar chart.</p>\n"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"xPadding":{"!type":"number|?","!doc":"<p>Padding between the left/right axes and the bars.\nThe possible values are a number (the number of pixels for both left and right padding)\nor an object with <code>{ left, right }</code> properties.</p>\n"},"yPadding":{"!type":"number|?","!doc":"<p>Padding between the top/bottom axes and the bars.\nThe possible values are a number (the number of pixels for both top and bottom padding)\nor an object with <code>{ top, bottom }</code> properties.</p>\n"}},"Ext_chart_series_Gauge_cfg":{"!proto":"Ext_chart_series_Series_cfg","angleField":{"!type":"string","!doc":"<p>The store record field name to be used for the pie angles.\nThe values bound to this field name must be positive real numbers.</p>\n"},"donut":{"!type":"bool|number","!doc":"<p>Use the entire disk or just a fraction of it for the gauge. Default's false.</p>\n"},"highlightDuration":{"!type":"number","!doc":"<p>The duration for the pie slice highlight effect.</p>\n"},"needle":{"!type":"bool","!doc":"<p>Use the Gauge Series as an area series or add a needle to it. Default's false.</p>\n"},"showInLegend":{"!type":"bool","!doc":"<p>Whether to add the pie chart elements as legend items. Default's false.</p>\n"},"style":{"!type":"?","!doc":"<p>An object containing styles for overriding series styles from Theming.</p>\n"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"}},"Ext_chart_series_Line_cfg":{"!proto":"Ext_chart_series_Cartesian_cfg","fill":{"!type":"bool","!doc":"<p>If true, the area below the line will be filled in using the <a href=\"#!/api/Ext.chart.series.Line-cfg-style\" rel=\"Ext.chart.series.Line-cfg-style\" class=\"docClass\">eefill</a> and\n<a href=\"#!/api/Ext.chart.series.Line-cfg-style\" rel=\"Ext.chart.series.Line-cfg-style\" class=\"docClass\">opacity</a> config properties. Defaults to false.</p>\n"},"markerConfig":{"!type":"?","!doc":"<p>The display style for the markers. Only used if <a href=\"#!/api/Ext.chart.series.Line-cfg-showMarkers\" rel=\"Ext.chart.series.Line-cfg-showMarkers\" class=\"docClass\">showMarkers</a> is true.\nThe markerConfig is a configuration object containing the same set of properties defined in\nthe Sprite class. For example, if we were to set red circles as markers to the line series we could\npass the object:</p>\n\n<pre><code>        markerConfig: {\n            type: 'circle',\n            radius: 4,\n            'fill': '#f00'\n        }\n     </code></pre>\n\n"},"selectionTolerance":{"!type":"number","!doc":"<p>The offset distance from the cursor position to the line series to trigger events (then used for highlighting series, etc).</p>\n"},"showMarkers":{"!type":"bool","!doc":"<p>Whether markers should be displayed at the data points along the line. If true,\nthen the <a href=\"#!/api/Ext.chart.series.Line-cfg-markerConfig\" rel=\"Ext.chart.series.Line-cfg-markerConfig\" class=\"docClass\">markerConfig</a> config item will determine the markers' styling.</p>\n"},"smooth":{"!type":"bool|number","!doc":"<p>If set to <code>true</code> or a non-zero number, the line will be smoothed/rounded around its points; otherwise\nstraight line segments will be drawn.</p>\n\n<p>A numeric value is interpreted as a divisor of the horizontal distance between consecutive points in\nthe line; larger numbers result in sharper curves while smaller numbers result in smoother curves.</p>\n\n<p>If set to <code>true</code> then a default numeric value of 3 will be used. Defaults to <code>false</code>.</p>\n"},"style":{"!type":"?","!doc":"<p>An object containing style properties for the visualization lines and fill.\nThese styles will override the theme styles.  The following are valid style properties:</p>\n\n<ul>\n<li><code>stroke</code> - an rgb or hex color string for the background color of the line</li>\n<li><code>stroke-width</code> - the width of the stroke (integer)</li>\n<li><code>fill</code> - the background fill color string (hex or rgb), only works if <a href=\"#!/api/Ext.chart.series.Line-cfg-fill\" rel=\"Ext.chart.series.Line-cfg-fill\" class=\"docClass\">fill</a> is <code>true</code></li>\n<li><code>opacity</code> - the opacity of the line and the fill color (decimal)</li>\n</ul>\n\n\n<p>Example usage:</p>\n\n<pre><code>style: {\n    stroke: '#00ff00',\n    'stroke-width': 10,\n    fill: '#80A080',\n    opacity: 0.2\n}\n</code></pre>\n"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"}},"Ext_chart_series_Pie_cfg":{"!proto":"Ext_chart_series_Series_cfg","angleField":{"!type":"string","!doc":"<p>The store record field name to be used for the pie angles.\nThe values bound to this field name must be positive real numbers.</p>\n"},"colorSet":{"!type":"[?]","!doc":"<p>An array of color values which will be used, in order, as the pie slice fill colors.</p>\n"},"donut":{"!type":"bool|number","!doc":"<p>Whether to set the pie chart as donut chart.\nDefault's false. Can be set to a particular percentage to set the radius\nof the donut chart.</p>\n"},"field":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.chart.series.Pie-cfg-angleField\" rel=\"Ext.chart.series.Pie-cfg-angleField\" class=\"docClass\">angleField</a>.</p>\n"},"highlightDuration":{"!type":"number","!doc":"<p>The duration for the pie slice highlight effect.</p>\n"},"lengthField":{"!type":"string","!doc":"<p>The store record field name to be used for the pie slice lengths.\nThe values bound to this field name must be positive real numbers.</p>\n"},"showInLegend":{"!type":"bool","!doc":"<p>Whether to add the pie chart elements as legend items. Default's false.</p>\n"},"style":{"!type":"?","!doc":"<p>An object containing styles for overriding series styles from Theming.</p>\n"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"xField":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.chart.series.Pie-cfg-angleField\" rel=\"Ext.chart.series.Pie-cfg-angleField\" class=\"docClass\">angleField</a>.</p>\n"}},"Ext_chart_series_Radar_cfg":{"!proto":"Ext_chart_series_Series_cfg","markerConfig":{"!type":"?","!doc":"<p>The display style for the markers. Only used if <a href=\"#!/api/Ext.chart.series.Radar-cfg-showMarkers\" rel=\"Ext.chart.series.Radar-cfg-showMarkers\" class=\"docClass\">showMarkers</a> is true.\nThe markerConfig is a configuration object containing the same set of properties defined in\nthe Sprite class. For example, if we were to set red circles as markers to the series we could\npass the object:</p>\n\n<pre class='inline-example '><code>markerConfig: {\n    type: 'circle',\n    radius: 4,\n    'fill': '#f00'\n}\n</code></pre>\n"},"showInLegend":{"!type":"bool","!doc":"<p>Whether to show this series in the legend.</p>\n"},"showMarkers":{"!type":"bool","!doc":"<p>Whether markers should be displayed at the data points of the series. If true,\nthen the <a href=\"#!/api/Ext.chart.series.Radar-cfg-markerConfig\" rel=\"Ext.chart.series.Radar-cfg-markerConfig\" class=\"docClass\">markerConfig</a> config item will determine the markers' styling.</p>\n"},"style":{"!type":"?","!doc":"<p>An object containing styles for overriding series styles from Theming.</p>\n"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"xField":{"!type":"string","!doc":"<p>The name of the data Model field corresponding to the x-axis (angle) value.</p>\n"},"yField":{"!type":"string","!doc":"<p>The name of the data Model field corresponding to the y-axis (radius) value.</p>\n"}},"Ext_chart_series_Scatter_cfg":{"!proto":"Ext_chart_series_Cartesian_cfg","markerConfig":{"!type":"?","!doc":"<p>The display style for the scatter series markers.</p>\n"},"style":{"!type":"?","!doc":"<p>Append styling properties to this object for it to override theme properties.</p>\n"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"}},"Ext_chart_series_Series_cfg":{"!proto":"Ext_Base_cfg","highlight":{"!type":"bool|?","!doc":"<p>If set to <code>true</code> it will highlight the markers or the series when hovering\nwith the mouse. This parameter can also be an object with the same style\nproperties you would apply to a <a href=\"#!/api/Ext.draw.Sprite\" rel=\"Ext.draw.Sprite\" class=\"docClass\">Ext.draw.Sprite</a> to apply custom\nstyles to markers and series.</p>\n"},"label":{"!type":"?","!doc":"<p>Object with the following properties:</p>\n"},"listeners":{"!type":"?","!doc":"<p>An (optional) object with event callbacks. All event callbacks get the target <em>item</em> as first parameter. The callback functions are:</p>\n\n<ul>\n<li>itemclick</li>\n<li>itemmouseover</li>\n<li>itemmouseout</li>\n<li>itemmousedown</li>\n<li>itemmouseup</li>\n</ul>\n\n"},"renderer":{"!type":"fn()","!doc":"<p>A function that can be overridden to set custom styling properties to each rendered element.\nPasses in (sprite, record, attributes, index, store) to the function.</p>\n"},"shadowAttributes":{"!type":"[?]","!doc":"<p>An array with shadow attributes</p>\n"},"showInLegend":{"!type":"bool","!doc":"<p>Whether to show this series in the legend.</p>\n"},"tips":{"!type":"?","!doc":"<p>Add tooltips to the visualization's markers. The options for the tips are the\nsame configuration used with <a href=\"#!/api/Ext.tip.ToolTip\" rel=\"Ext.tip.ToolTip\" class=\"docClass\">Ext.tip.ToolTip</a>. For example:</p>\n\n<pre><code>tips: {\n  trackMouse: true,\n  width: 140,\n  height: 28,\n  renderer: function(storeItem, item) {\n    this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' views');\n  }\n},\n</code></pre>\n"},"title":{"!type":"string","!doc":"<p>The human-readable name of the series.</p>\n"},"type":{"!type":"string","!doc":"<p>The type of series. Set in subclasses.</p>\n"}},"Ext_chart_theme_Base_cfg":{"!proto":"Ext_Base_cfg"},"Ext_container_AbstractContainer_cfg":{"!proto":"Ext_Component_cfg","activeItem":{"!type":"string|number","!doc":"<p>A string component id or the numeric index of the component that should be\ninitially activated within the container's layout on render.  For example,\nactiveItem: 'item-1' or activeItem: 0 (index 0 = the first item in the\ncontainer's collection).  activeItem only applies to layout styles that can\ndisplay items one at a time (like <a href=\"#!/api/Ext.layout.container.Card\" rel=\"Ext.layout.container.Card\" class=\"docClass\">Ext.layout.container.Card</a> and\n<a href=\"#!/api/Ext.layout.container.Fit\" rel=\"Ext.layout.container.Fit\" class=\"docClass\">Ext.layout.container.Fit</a>).</p>\n"},"autoDestroy":{"!type":"bool","!doc":"<p>If true the container will automatically destroy any contained component that is removed\nfrom it, else destruction must be handled manually.</p>\n"},"baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this component's element. This will also be prepended to elements within this\ncomponent like Panel's body will get a class <code>x-panel-body</code>. This means that if you create a subclass of Panel, and\nyou want it to get all the Panels styling for the element and the body, you leave the <code>baseCls</code> <code>x-panel</code> and use\n<code>componentCls</code> to add specific styling for this component.</p>\n"},"bubbleEvents":{"!type":"[string]","!doc":"<p>An array of events that, when fired, should be bubbled to any parent container.\nSee <a href=\"#!/api/Ext.util.Observable-method-enableBubble\" rel=\"Ext.util.Observable-method-enableBubble\" class=\"docClass\">Ext.util.Observable.enableBubble</a>.</p>\n"},"defaultType":{"!type":"string","!doc":"<p>The default <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">xtype</a> of child Components to create in this Container when\na child item is specified as a raw configuration object, rather than as an instantiated Component.</p>\n"},"defaults":{"!type":"?|fn()","!doc":"<p>This option is a means of applying default settings to all added items whether added\nthrough the <a href=\"#!/api/Ext.container.AbstractContainer-cfg-items\" rel=\"Ext.container.AbstractContainer-cfg-items\" class=\"docClass\">items</a> config or via the <a href=\"#!/api/Ext.container.AbstractContainer-method-add\" rel=\"Ext.container.AbstractContainer-method-add\" class=\"docClass\">add</a> or <a href=\"#!/api/Ext.container.AbstractContainer-method-insert\" rel=\"Ext.container.AbstractContainer-method-insert\" class=\"docClass\">insert</a> methods.</p>\n\n<p>Defaults are applied to both config objects and instantiated components conditionally\nso as not to override existing properties in the item (see <a href=\"#!/api/Ext-method-applyIf\" rel=\"Ext-method-applyIf\" class=\"docClass\">Ext.applyIf</a>).</p>\n\n<p>If the defaults option is specified as a function, then the function will be called\nusing this Container as the scope (<code>this</code> reference) and passing the added item as\nthe first parameter. Any resulting object from that call is then applied to the item\nas default properties.</p>\n\n<p>For example, to automatically apply padding to the body of each of a set of\ncontained <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a> items, you could pass:\n<code>defaults: {bodyStyle:'padding:15px'}</code>.</p>\n\n<p>Usage:</p>\n\n<pre><code>defaults: { // defaults are applied to items, not the container\n    autoScroll: true\n},\nitems: [\n    // default will not be applied here, panel1 will be autoScroll: false\n    {\n        xtype: 'panel',\n        id: 'panel1',\n        autoScroll: false\n    },\n    // this component will have autoScroll: true\n    new <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>({\n        id: 'panel2'\n    })\n]\n</code></pre>\n"},"detachOnRemove":{"!type":"bool","!doc":"<p>True to move any component to the <a href=\"#!/api/Ext-method-getDetachedBody\" rel=\"Ext-method-getDetachedBody\" class=\"docClass\">detachedBody</a> when the component is\nremoved from this container. This option is only applicable when the component is not destroyed while\nbeing removed, see <a href=\"#!/api/Ext.container.AbstractContainer-cfg-autoDestroy\" rel=\"Ext.container.AbstractContainer-cfg-autoDestroy\" class=\"docClass\">autoDestroy</a> and <a href=\"#!/api/Ext.container.AbstractContainer-method-remove\" rel=\"Ext.container.AbstractContainer-method-remove\" class=\"docClass\">remove</a>. If this option is set to false, the DOM\nof the component will remain in the current place until it is explicitly moved.</p>\n"},"items":{"!type":"?|[?]","!doc":"<p>A single item, or an array of child Components to be added to this container</p>\n\n<p><strong>Unless configured with a <a href=\"#!/api/Ext.container.AbstractContainer-cfg-layout\" rel=\"Ext.container.AbstractContainer-cfg-layout\" class=\"docClass\">layout</a>, a Container simply renders child\nComponents serially into its encapsulating element and performs no sizing or\npositioning upon them.</strong></p>\n\n<p>Example:</p>\n\n<pre><code>// specifying a single item\nitems: {...},\nlayout: 'fit',    // The single items is sized to fit\n\n// specifying multiple items\nitems: [{...}, {...}],\nlayout: 'hbox', // The items are arranged horizontally\n</code></pre>\n\n<p>Each item may be:</p>\n\n<ul>\n<li>A <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Component</a></li>\n<li>A Component configuration object</li>\n</ul>\n\n\n<p>If a configuration object is specified, the actual type of Component to be\ninstantiated my be indicated by using the <a href=\"#!/api/Ext.Component-cfg-xtype\" rel=\"Ext.Component-cfg-xtype\" class=\"docClass\">xtype</a> option.</p>\n\n<p>Every Component class has its own <a href=\"#!/api/Ext.Component-cfg-xtype\" rel=\"Ext.Component-cfg-xtype\" class=\"docClass\">xtype</a>.</p>\n\n<p>If an <a href=\"#!/api/Ext.Component-cfg-xtype\" rel=\"Ext.Component-cfg-xtype\" class=\"docClass\">xtype</a> is not explicitly specified, the\n<a href=\"#!/api/Ext.container.AbstractContainer-cfg-defaultType\" rel=\"Ext.container.AbstractContainer-cfg-defaultType\" class=\"docClass\">defaultType</a> for the Container is used, which by default is usually <code>panel</code>.</p>\n\n<h1>Notes:</h1>\n\n<p>Ext uses lazy rendering. Child Components will only be rendered\nshould it become necessary. Items are automatically laid out when they are first\nshown (no sizing is done while hidden), or in response to a <a href=\"#!/api/Ext.container.AbstractContainer-method-doLayout\" rel=\"Ext.container.AbstractContainer-method-doLayout\" class=\"docClass\">doLayout</a> call.</p>\n\n<p>Do not specify <a href=\"#!/api/Ext.panel.Panel-cfg-contentEl\" rel=\"Ext.panel.Panel-cfg-contentEl\" class=\"docClass\">contentEl</a> or\n<a href=\"#!/api/Ext.panel.Panel-cfg-html\" rel=\"Ext.panel.Panel-cfg-html\" class=\"docClass\">html</a> with <code>items</code>.</p>\n"},"layout":{"!type":"+Ext.enums.Layout|?","!doc":"<p><strong>Important</strong>: In order for child items to be correctly sized and\npositioned, typically a layout manager <strong>must</strong> be specified through\nthe <code>layout</code> configuration option.</p>\n\n<p>The sizing and positioning of child <a href=\"#!/api/Ext.container.AbstractContainer-cfg-items\" rel=\"Ext.container.AbstractContainer-cfg-items\" class=\"docClass\">items</a> is the responsibility of\nthe Container's layout manager which creates and manages the type of layout\nyou have in mind.  For example:</p>\n\n<p>If the layout configuration is not explicitly specified for\na general purpose container (e.g. Container or Panel) the\n<a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used\nwhich does nothing but render child components sequentially into the\nContainer (no sizing or positioning will be performed in this situation).</p>\n\n<p><strong>layout</strong> may be specified as either as an Object or as a String:</p>\n\n<h2>Specify as an Object</h2>\n\n<p>Example usage:</p>\n\n<pre><code>layout: {\n    type: 'vbox',\n    align: 'left'\n}\n</code></pre>\n\n<ul>\n<li><p><strong>type</strong></p>\n\n<p>The layout type to be used for this container.  If not specified,\na default <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">Ext.layout.container.Auto</a> will be created and used.</p>\n\n<p>Valid layout <code>type</code> values are listed in <a href=\"#!/api/Ext.enums.Layout\" rel=\"Ext.enums.Layout\" class=\"docClass\">Ext.enums.Layout</a>.</p></li>\n<li><p>Layout specific configuration properties</p>\n\n<p>Additional layout specific configuration properties may also be\nspecified. For complete details regarding the valid config options for\neach layout type, see the layout class corresponding to the <code>type</code>\nspecified.</p></li>\n</ul>\n\n\n<h2>Specify as a String</h2>\n\n<p>Example usage:</p>\n\n<pre><code>layout: 'vbox'\n</code></pre>\n\n<ul>\n<li><p><strong>layout</strong></p>\n\n<p>The layout <code>type</code> to be used for this container (see <a href=\"#!/api/Ext.enums.Layout\" rel=\"Ext.enums.Layout\" class=\"docClass\">Ext.enums.Layout</a>\nfor list of valid values).</p>\n\n<p>Additional layout specific configuration properties. For complete\ndetails regarding the valid config options for each layout type, see the\nlayout class corresponding to the <code>layout</code> specified.</p></li>\n</ul>\n\n\n<h2>Configuring the default layout type</h2>\n\n<p>If a certain Container class has a default layout (For example a <a href=\"#!/api/Ext.toolbar.Toolbar\" rel=\"Ext.toolbar.Toolbar\" class=\"docClass\">Toolbar</a>\nwith a default <code>Box</code> layout), then to simply configure the default layout,\nuse an object, but without the <code>type</code> property:</p>\n\n<pre><code>xtype: 'toolbar',\nlayout: {\n    pack: 'center'\n}\n</code></pre>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>End Definitions</p>\n"},"suspendLayout":{"!type":"bool","!doc":"<p>If true, suspend calls to doLayout. Useful when batching multiple adds to a container\nand not passing them as multiple arguments or an array.</p>\n"}},"Ext_container_ButtonGroup_cfg":{"!proto":"Ext_panel_Panel_cfg","animCollapse":{"!type":"bool"},"baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this panel's element.</p>\n"},"closable":{"!type":"bool"},"collapseMode":{"!type":"bool"},"collapsible":{"!type":"bool"},"columns":{"!type":"number","!doc":"<p>The <code>columns</code> configuration property passed to the <a href=\"#!/api/Ext.container.ButtonGroup-cfg-layout\" rel=\"Ext.container.ButtonGroup-cfg-layout\" class=\"docClass\">configured layout manager</a>.\nSee <a href=\"#!/api/Ext.layout.container.Table-cfg-columns\" rel=\"Ext.layout.container.Table-cfg-columns\" class=\"docClass\">Ext.layout.container.Table.columns</a>.</p>\n"},"defaultButtonUI":{"!type":"string","!doc":"<p>A default <a href=\"#!/api/Ext.Component-cfg-ui\" rel=\"Ext.Component-cfg-ui\" class=\"docClass\">ui</a> to use for <a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Button</a> items</p>\n"},"defaultType":{"!type":"string","!doc":"<p>The default <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">xtype</a> of child Components to create in this Container when\na child item is specified as a raw configuration object, rather than as an instantiated Component.</p>\n"},"frame":{"!type":"bool","!doc":"<p>True to apply a frame to the panel.</p>\n"},"layout":{"!type":"+Ext.enums.Layout|?","!doc":"<p><strong>Important</strong>: In order for child items to be correctly sized and\npositioned, typically a layout manager <strong>must</strong> be specified through\nthe <code>layout</code> configuration option.</p>\n\n<p>The sizing and positioning of child <a href=\"#!/api/Ext.container.ButtonGroup-cfg-items\" rel=\"Ext.container.ButtonGroup-cfg-items\" class=\"docClass\">items</a> is the responsibility of\nthe Container's layout manager which creates and manages the type of layout\nyou have in mind.  For example:</p>\n\n<p>If the layout configuration is not explicitly specified for\na general purpose container (e.g. Container or Panel) the\n<a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used\nwhich does nothing but render child components sequentially into the\nContainer (no sizing or positioning will be performed in this situation).</p>\n\n<p><strong>layout</strong> may be specified as either as an Object or as a String:</p>\n\n<h2>Specify as an Object</h2>\n\n<p>Example usage:</p>\n\n<pre><code>layout: {\n    type: 'vbox',\n    align: 'left'\n}\n</code></pre>\n\n<ul>\n<li><p><strong>type</strong></p>\n\n<p>The layout type to be used for this container.  If not specified,\na default <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">Ext.layout.container.Auto</a> will be created and used.</p>\n\n<p>Valid layout <code>type</code> values are listed in <a href=\"#!/api/Ext.enums.Layout\" rel=\"Ext.enums.Layout\" class=\"docClass\">Ext.enums.Layout</a>.</p></li>\n<li><p>Layout specific configuration properties</p>\n\n<p>Additional layout specific configuration properties may also be\nspecified. For complete details regarding the valid config options for\neach layout type, see the layout class corresponding to the <code>type</code>\nspecified.</p></li>\n</ul>\n\n\n<h2>Specify as a String</h2>\n\n<p>Example usage:</p>\n\n<pre><code>layout: 'vbox'\n</code></pre>\n\n<ul>\n<li><p><strong>layout</strong></p>\n\n<p>The layout <code>type</code> to be used for this container (see <a href=\"#!/api/Ext.enums.Layout\" rel=\"Ext.enums.Layout\" class=\"docClass\">Ext.enums.Layout</a>\nfor list of valid values).</p>\n\n<p>Additional layout specific configuration properties. For complete\ndetails regarding the valid config options for each layout type, see the\nlayout class corresponding to the <code>layout</code> specified.</p></li>\n</ul>\n\n\n<h2>Configuring the default layout type</h2>\n\n<p>If a certain Container class has a default layout (For example a <a href=\"#!/api/Ext.toolbar.Toolbar\" rel=\"Ext.toolbar.Toolbar\" class=\"docClass\">Toolbar</a>\nwith a default <code>Box</code> layout), then to simply configure the default layout,\nuse an object, but without the <code>type</code> property:</p>\n\n<pre><code>xtype: 'toolbar',\nlayout: {\n    pack: 'center'\n}\n</code></pre>\n"},"titleAlign":{"!type":"string","!doc":"<p>The alignment of the title text within the available space between the\nicon and the tools.</p>\n\n<p>May be <code>\"left\"</code>, <code>\"right\"</code> or <code>\"center\"</code>. Defaults to the browser's natural\nbehavior depending on the css direction property - <code>\"left\"</code> when direction\nis ltr and <code>\"right\"</code> when direction is rtl\n(see <a href=\"#!/api/Ext.AbstractComponent-cfg-rtl\" rel=\"Ext.AbstractComponent-cfg-rtl\" class=\"docClass\">Ext.AbstractComponent.rtl</a>).</p>\n"},"tools":{"!type":"[?]"}},"Ext_container_Container_cfg":{"!proto":"Ext_container_AbstractContainer_cfg","anchorSize":{"!type":"number|?","!doc":"<p>Defines the anchoring size of container.\nEither a number to define the width of the container or an object with <code>width</code> and <code>height</code> fields.</p>\n"}},"Ext_container_Monitor_cfg":{"!proto":"Ext_Base_cfg"},"Ext_container_Viewport_cfg":{"!proto":"Ext_container_Container_cfg","allowDomMove":{"!type":"bool"},"applyTo":{"!type":"string|+HTMLElement|+Ext.Element"},"height":{"!type":"number","!doc":"<p>Sets itself to viewport width.</p>\n"},"renderTo":{"!type":"string|+HTMLElement|+Ext.Element","!doc":"<p>Always renders to document body.</p>\n"},"width":{"!type":"number","!doc":"<p>Sets itself to viewport height.</p>\n"}},"Ext_data_AbstractStore_cfg":{"!proto":"Ext_Base_cfg","autoLoad":{"!type":"bool|?","!doc":"<p>If data is not specified, and if autoLoad is true or an Object, this store's load method is automatically called\nafter creation. If the value of autoLoad is an Object, this Object will be passed to the store's load method.</p>\n"},"autoSync":{"!type":"bool","!doc":"<p>True to automatically sync the Store with its Proxy after every edit to one of its Records. Defaults to false.</p>\n"},"batchUpdateMode":{"!type":"string","!doc":"<p>Sets the updating behavior based on batch synchronization. 'operation' (the default) will update the Store's\ninternal representation of the data after each operation of the batch has completed, 'complete' will wait until\nthe entire batch has been completed before updating the Store's data. 'complete' is a good choice for local\nstorage proxies, 'operation' is better for remote proxies, where there is a comparatively high latency.</p>\n"},"defaultSortDirection":{"!type":"string","!doc":"<p>The default sort direction to use if one is not specified.</p>\n"},"fields":{"!type":"[?]","!doc":"<p>This may be used in place of specifying a <a href=\"#!/api/Ext.data.AbstractStore-cfg-model\" rel=\"Ext.data.AbstractStore-cfg-model\" class=\"docClass\">model</a> configuration. The fields should be a\nset of <a href=\"#!/api/Ext.data.Field\" rel=\"Ext.data.Field\" class=\"docClass\">Ext.data.Field</a> configuration objects. The store will automatically create a <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>\nwith these fields. In general this configuration option should only be used for simple stores like\na two-field store of ComboBox. For anything more complicated, such as specifying a particular id property or\nassociations, a <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a> should be defined and specified for the <a href=\"#!/api/Ext.data.AbstractStore-cfg-model\" rel=\"Ext.data.AbstractStore-cfg-model\" class=\"docClass\">model</a>\nconfig.</p>\n"},"filterOnLoad":{"!type":"bool","!doc":"<p>If true, any filters attached to this Store will be run after loading data, before the datachanged event is fired.\nDefaults to true, ignored if <a href=\"#!/api/Ext.data.Store-cfg-remoteFilter\" rel=\"Ext.data.Store-cfg-remoteFilter\" class=\"docClass\">remoteFilter</a> is true</p>\n"},"filters":{"!type":"[?]|[fn()]","!doc":"<p>Array of <a href=\"#!/api/Ext.util.Filter\" rel=\"Ext.util.Filter\" class=\"docClass\">Filters</a> for this store. Can also be passed array of\nfunctions which will be used as the <a href=\"#!/api/Ext.util.Filter-cfg-filterFn\" rel=\"Ext.util.Filter-cfg-filterFn\" class=\"docClass\">filterFn</a> config\nfor filters:</p>\n\n<pre><code>filters: [\n    function(item) {\n        return item.weight &gt; 0;\n    }\n]\n</code></pre>\n\n<p>To filter after the grid is loaded use the <a href=\"#!/api/Ext.data.Store-method-filterBy\" rel=\"Ext.data.Store-method-filterBy\" class=\"docClass\">filterBy</a> function.</p>\n"},"listeners":{"!type":"?","!doc":"<p>A config object containing one or more event handlers to be added to this object during initialization. This\nshould be a valid listeners config object as specified in the <a href=\"#!/api/Ext.util.Observable-method-addListener\" rel=\"Ext.util.Observable-method-addListener\" class=\"docClass\">addListener</a> example for attaching multiple\nhandlers at once.</p>\n\n<p><strong>DOM events from Ext JS <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Components</a></strong></p>\n\n<p>While <em>some</em> Ext JS Component classes export selected DOM events (e.g. \"click\", \"mouseover\" etc), this is usually\nonly done when extra value can be added. For example the <a href=\"#!/api/Ext.view.View\" rel=\"Ext.view.View\" class=\"docClass\">DataView</a>'s <strong><code><a href=\"#!/api/Ext.view.View-event-itemclick\" rel=\"Ext.view.View-event-itemclick\" class=\"docClass\">itemclick</a></code></strong> event passing the node clicked on. To access DOM events directly from a\nchild element of a Component, we need to specify the <code>element</code> option to identify the Component property to add a\nDOM listener to:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>({\n    width: 400,\n    height: 200,\n    dockedItems: [{\n        xtype: 'toolbar'\n    }],\n    listeners: {\n        click: {\n            element: 'el', //bind to the underlying el property on the panel\n            fn: function(){ console.log('click el'); }\n        },\n        dblclick: {\n            element: 'body', //bind to the underlying body property on the panel\n            fn: function(){ console.log('dblclick body'); }\n        }\n    }\n});\n</code></pre>\n"},"model":{"!type":"string","!doc":"<p>Name of the <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Model</a> associated with this store.\nThe string is used as an argument for <a href=\"#!/api/Ext.ModelManager-method-getModel\" rel=\"Ext.ModelManager-method-getModel\" class=\"docClass\">Ext.ModelManager.getModel</a>.</p>\n"},"proxy":{"!type":"string|+Ext.data.proxy.Proxy|?","!doc":"<p>The Proxy to use for this Store. This can be either a string, a config object or a Proxy instance -\nsee <a href=\"#!/api/Ext.data.AbstractStore-method-setProxy\" rel=\"Ext.data.AbstractStore-method-setProxy\" class=\"docClass\">setProxy</a> for details.</p>\n"},"remoteFilter":{"!type":"bool","!doc":"<p>True to defer any filtering operation to the server. If false, filtering is done locally on the client.</p>\n"},"remoteSort":{"!type":"bool","!doc":"<p>True to defer any sorting operation to the server. If false, sorting is done locally on the client.</p>\n"},"sortOnLoad":{"!type":"bool","!doc":"<p>If true, any sorters attached to this Store will be run after loading data, before the datachanged event is fired.\nDefaults to true, igored if <a href=\"#!/api/Ext.data.Store-cfg-remoteSort\" rel=\"Ext.data.Store-cfg-remoteSort\" class=\"docClass\">remoteSort</a> is true</p>\n"},"sortRoot":{"!type":"string","!doc":"<p>The property in each item that contains the data to sort.</p>\n"},"sorters":{"!type":"[+Ext.util.Sorter]|[?]","!doc":"<p>The initial set of <a href=\"#!/api/Ext.util.Sorter\" rel=\"Ext.util.Sorter\" class=\"docClass\">Sorters</a></p>\n"},"statefulFilters":{"!type":"bool","!doc":"<p>Configure as <code>true</code> to have the filters saved when a client <a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">grid</a> saves its state.</p>\n"},"storeId":{"!type":"string","!doc":"<p>Unique identifier for this store. If present, this Store will be registered with the <a href=\"#!/api/Ext.data.StoreManager\" rel=\"Ext.data.StoreManager\" class=\"docClass\">Ext.data.StoreManager</a>,\nmaking it easy to reuse elsewhere.</p>\n\n<p>Note that when store is instatiated by Controller, the storeId will be overridden by the name of the store.</p>\n"}},"Ext_data_ArrayStore_cfg":{"!proto":"Ext_data_Store_cfg"},"Ext_data_Batch_cfg":{"!proto":"Ext_Base_cfg","autoStart":{"!type":"bool","!doc":"<p>True to immediately start processing the batch as soon as it is constructed (defaults to false)</p>\n"},"listeners":{"!type":"?","!doc":"<p>A config object containing one or more event handlers to be added to this object during initialization. This\nshould be a valid listeners config object as specified in the <a href=\"#!/api/Ext.util.Observable-method-addListener\" rel=\"Ext.util.Observable-method-addListener\" class=\"docClass\">addListener</a> example for attaching multiple\nhandlers at once.</p>\n\n<p><strong>DOM events from Ext JS <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Components</a></strong></p>\n\n<p>While <em>some</em> Ext JS Component classes export selected DOM events (e.g. \"click\", \"mouseover\" etc), this is usually\nonly done when extra value can be added. For example the <a href=\"#!/api/Ext.view.View\" rel=\"Ext.view.View\" class=\"docClass\">DataView</a>'s <strong><code><a href=\"#!/api/Ext.view.View-event-itemclick\" rel=\"Ext.view.View-event-itemclick\" class=\"docClass\">itemclick</a></code></strong> event passing the node clicked on. To access DOM events directly from a\nchild element of a Component, we need to specify the <code>element</code> option to identify the Component property to add a\nDOM listener to:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>({\n    width: 400,\n    height: 200,\n    dockedItems: [{\n        xtype: 'toolbar'\n    }],\n    listeners: {\n        click: {\n            element: 'el', //bind to the underlying el property on the panel\n            fn: function(){ console.log('click el'); }\n        },\n        dblclick: {\n            element: 'body', //bind to the underlying body property on the panel\n            fn: function(){ console.log('dblclick body'); }\n        }\n    }\n});\n</code></pre>\n"},"pauseOnException":{"!type":"bool","!doc":"<p>True to pause the execution of the batch if any operation encounters an exception\n(defaults to false). If you set this to true you are responsible for implementing the appropriate\nhandling logic and restarting or discarding the batch as needed. There are different ways you could\ndo this, e.g. by handling the batch's <a href=\"#!/api/Ext.data.Batch-event-exception\" rel=\"Ext.data.Batch-event-exception\" class=\"docClass\">exception</a> event directly, or perhaps by overriding\n<a href=\"#!/api/Ext.data.AbstractStore-method-onBatchException\" rel=\"Ext.data.AbstractStore-method-onBatchException\" class=\"docClass\">onBatchException</a> at the store level. If you do pause\nand attempt to handle the exception you can call <a href=\"#!/api/Ext.data.Batch-method-retry\" rel=\"Ext.data.Batch-method-retry\" class=\"docClass\">retry</a> to process the same operation again.</p>\n\n<p>Note that <a href=\"#!/api/Ext.data.Operation\" rel=\"Ext.data.Operation\" class=\"docClass\">operations</a> are atomic, so any operations that may have succeeded\nprior to an exception (and up until pausing the batch) will be finalized at the server level and will\nnot be automatically reversible. Any transactional / rollback behavior that might be desired would have\nto be implemented at the application level. Pausing on exception will likely be most beneficial when\nused in coordination with such a scheme, where an exception might actually affect subsequent operations\nin the same batch and so should be handled before continuing with the next operation.</p>\n\n<p>If you have not implemented transactional operation handling then this option should typically be left\nto the default of false (e.g. process as many operations as possible, and handle any exceptions\nasynchronously without holding up the rest of the batch).</p>\n"}},"Ext_data_Connection_cfg":{"!proto":"Ext_Base_cfg","autoAbort":{"!type":"bool","!doc":"<p>Whether this request should abort any pending requests.</p>\n"},"binary":{"!type":"bool","!doc":"<p>True if the response should be treated as binary data.  If true, the binary\ndata will be accessible as a \"responseBytes\" property on the response object.</p>\n"},"cors":{"!type":"bool","!doc":"<p>True to enable CORS support on the XHR object. Currently the only effect of this option\nis to use the XDomainRequest object instead of XMLHttpRequest if the browser is IE8 or above.</p>\n"},"defaultHeaders":{"!type":"?","!doc":"<p>An object containing request headers which are added to each request made by this object.</p>\n"},"disableCaching":{"!type":"bool","!doc":"<p>True to add a unique cache-buster param to GET requests.</p>\n"},"disableCachingParam":{"!type":"string","!doc":"<p>Change the parameter which is sent went disabling caching through a cache buster.</p>\n"},"extraParams":{"!type":"?","!doc":"<p>Any parameters to be appended to the request.</p>\n"},"listeners":{"!type":"?","!doc":"<p>A config object containing one or more event handlers to be added to this object during initialization. This\nshould be a valid listeners config object as specified in the <a href=\"#!/api/Ext.util.Observable-method-addListener\" rel=\"Ext.util.Observable-method-addListener\" class=\"docClass\">addListener</a> example for attaching multiple\nhandlers at once.</p>\n\n<p><strong>DOM events from Ext JS <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Components</a></strong></p>\n\n<p>While <em>some</em> Ext JS Component classes export selected DOM events (e.g. \"click\", \"mouseover\" etc), this is usually\nonly done when extra value can be added. For example the <a href=\"#!/api/Ext.view.View\" rel=\"Ext.view.View\" class=\"docClass\">DataView</a>'s <strong><code><a href=\"#!/api/Ext.view.View-event-itemclick\" rel=\"Ext.view.View-event-itemclick\" class=\"docClass\">itemclick</a></code></strong> event passing the node clicked on. To access DOM events directly from a\nchild element of a Component, we need to specify the <code>element</code> option to identify the Component property to add a\nDOM listener to:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>({\n    width: 400,\n    height: 200,\n    dockedItems: [{\n        xtype: 'toolbar'\n    }],\n    listeners: {\n        click: {\n            element: 'el', //bind to the underlying el property on the panel\n            fn: function(){ console.log('click el'); }\n        },\n        dblclick: {\n            element: 'body', //bind to the underlying body property on the panel\n            fn: function(){ console.log('dblclick body'); }\n        }\n    }\n});\n</code></pre>\n"},"method":{"!type":"string","!doc":"<p>The default HTTP method to be used for requests.</p>\n\n<p>If not set, but <a href=\"#!/api/Ext.data.Connection-method-request\" rel=\"Ext.data.Connection-method-request\" class=\"docClass\">request</a> params are present, POST will be used;\notherwise, GET will be used.</p>\n"},"timeout":{"!type":"number","!doc":"<p>The timeout in milliseconds to be used for requests.</p>\n"},"withCredentials":{"!type":"bool","!doc":"<p>True to set <code>withCredentials = true</code> on the XHR object</p>\n"}},"Ext_data_DirectStore_cfg":{"!proto":"Ext_data_Store_cfg"},"Ext_data_Errors_cfg":{"!proto":"Ext_util_MixedCollection_cfg"},"Ext_data_Field_cfg":{"!proto":"Ext_Base_cfg","allowBlank":{"!type":"bool","!doc":"<p>Used for validating a <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">model</a>. Defaults to true. An empty value here will cause\n<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>.<a href=\"#!/api/Ext.data.Model-method-isValid\" rel=\"Ext.data.Model-method-isValid\" class=\"docClass\">isValid</a> to evaluate to false.</p>\n"},"convert":{"!type":"fn()","!doc":"<p>A function which converts the value provided by the Reader into an object that will be stored in the Model.</p>\n\n<p>If configured as <code>null</code>, then no conversion will be applied to the raw data property when this Field\nis read. This will increase performance. but you must ensure that the data is of the correct type and does\nnot <em>need</em> converting.</p>\n\n<p>It is passed the following parameters:</p>\n\n<ul>\n<li><p><strong>v</strong> : Mixed</p>\n\n<p>The data value as read by the Reader, if undefined will use the configured <code><a href=\"#!/api/Ext.data.Field-cfg-defaultValue\" rel=\"Ext.data.Field-cfg-defaultValue\" class=\"docClass\">defaultValue</a></code>.</p></li>\n<li><p><strong>rec</strong> : <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a></p>\n\n<p>The data object containing the Model as read so far by the Reader. Note that the Model may not be fully populated\nat this point as the fields are read in the order that they are defined in your\n<a href=\"#!/api/Ext.data.Model-cfg-fields\" rel=\"Ext.data.Model-cfg-fields\" class=\"docClass\">fields</a> array.</p></li>\n</ul>\n\n\n<p>Example of convert functions:</p>\n\n<pre><code>function fullName(v, record){\n    return record.data.last + ', ' + record.data.first;\n}\n\nfunction location(v, record){\n    return !record.data.city ? '' : (record.data.city + ', ' + record.data.state);\n}\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Dude', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: [\n        {name: 'fullname',  convert: fullName},\n        {name: 'firstname', mapping: 'name.first'},\n        {name: 'lastname',  mapping: 'name.last'},\n        {name: 'city', defaultValue: 'homeless'},\n        'state',\n        {name: 'location',  convert: location}\n    ]\n});\n\n// create the data store\nvar store = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    reader: {\n        type: 'json',\n        model: 'Dude',\n        idProperty: 'key',\n        root: 'daRoot',\n        totalProperty: 'total'\n    }\n});\n\nvar myData = [\n    { key: 1,\n      name: { first: 'Fat',    last:  'Albert' }\n      // notice no city, state provided in data object\n    },\n    { key: 2,\n      name: { first: 'Barney', last:  'Rubble' },\n      city: 'Bedrock', state: 'Stoneridge'\n    },\n    { key: 3,\n      name: { first: 'Cliff',  last:  'Claven' },\n      city: 'Boston',  state: 'MA'\n    }\n];\n</code></pre>\n"},"dateFormat":{"!type":"string","!doc":"<p>Serves as a default for the <a href=\"#!/api/Ext.data.Field-cfg-dateReadFormat\" rel=\"Ext.data.Field-cfg-dateReadFormat\" class=\"docClass\">dateReadFormat</a> and <a href=\"#!/api/Ext.data.Field-cfg-dateWriteFormat\" rel=\"Ext.data.Field-cfg-dateWriteFormat\" class=\"docClass\">dateWriteFormat</a> config options. This\nwill be used in place of those other configurations if not specified.</p>\n\n<p>A format string for the <a href=\"#!/api/Ext.Date-method-parse\" rel=\"Ext.Date-method-parse\" class=\"docClass\">Ext.Date.parse</a> function, or \"timestamp\" if the value provided by\nthe Reader is a UNIX timestamp, or \"time\" if the value provided by the Reader is a javascript millisecond\ntimestamp. See <a href=\"#!/api/Ext.Date\" rel=\"Ext.Date\" class=\"docClass\">Ext.Date</a>.</p>\n\n<p>It is quite important to note that while this config is optional, it will default to using the base\nJavaScript Date object's <code>parse</code> function if not specified, rather than <a href=\"#!/api/Ext.Date-method-parse\" rel=\"Ext.Date-method-parse\" class=\"docClass\">Ext.Date.parse</a>.\nThis can cause unexpected issues, especially when converting between timezones, or when converting dates that\ndo not have a timezone specified. The behavior of the native <code>Date.parse</code> is implementation-specific, and\ndepending on the value of the date string, it might return the UTC date or the local date. <strong>For this reason\nit is strongly recommended that you always specify an explicit date format when parsing dates.</strong></p>\n"},"dateReadFormat":{"!type":"string","!doc":"<p>Used when converting received data into a Date when the <a href=\"#!/api/Ext.data.Field-cfg-type\" rel=\"Ext.data.Field-cfg-type\" class=\"docClass\">type</a> is specified as <code>\"date\"</code>.\nThis configuration takes precedence over <a href=\"#!/api/Ext.data.Field-cfg-dateFormat\" rel=\"Ext.data.Field-cfg-dateFormat\" class=\"docClass\">dateFormat</a>.\nSee <a href=\"#!/api/Ext.data.Field-cfg-dateFormat\" rel=\"Ext.data.Field-cfg-dateFormat\" class=\"docClass\">dateFormat</a> for more information.</p>\n"},"dateWriteFormat":{"!type":"string","!doc":"<p>Used to provide a custom format when serializing dates with a <a href=\"#!/api/Ext.data.writer.Writer\" rel=\"Ext.data.writer.Writer\" class=\"docClass\">Ext.data.writer.Writer</a>.\nIf this is not specified, the <a href=\"#!/api/Ext.data.Field-cfg-dateFormat\" rel=\"Ext.data.Field-cfg-dateFormat\" class=\"docClass\">dateFormat</a> will be used. See the <a href=\"#!/api/Ext.data.writer.Writer\" rel=\"Ext.data.writer.Writer\" class=\"docClass\">Ext.data.writer.Writer</a>\ndocs for more information on writing dates.</p>\n\n<p><strong>Note that to use a <a href=\"#!/api/Ext.data.writer.Json\" rel=\"Ext.data.writer.Json\" class=\"docClass\">JsonWriter</a> to send Microsoft format \"JSON\" dates, which are in fact\ninvalid JSON, it is not possible to use the standard date serialization pathway or\n<a href=\"#!/api/Ext-property-USE_NATIVE_JSON\" rel=\"Ext-property-USE_NATIVE_JSON\" class=\"docClass\">native browser JSON production</a>.</strong></p>\n\n<p>To use a <a href=\"#!/api/Ext.data.writer.Json\" rel=\"Ext.data.writer.Json\" class=\"docClass\">JsonWriter</a> to write dates in a JSON packet in the form <code>\"\\/Date(1357372800000)\\/\"</code>\nconfigure the field like this:</p>\n\n<p>   {\n       type: 'date',\n       dateFormat: 'MS',             // To parse incoming dates from server correctly\n       serialize: <a href=\"#!/api/Ext-method-identityFn\" rel=\"Ext-method-identityFn\" class=\"docClass\">Ext.identityFn</a>     // An ExtJS-supplied function which returns the arg unchanged\n   }</p>\n\n<p>Then override ExtJS's JSON date serialize function:</p>\n\n<p>   <a href=\"#!/api/Ext.JSON-method-encodeDate\" rel=\"Ext.JSON-method-encodeDate\" class=\"docClass\">Ext.JSON.encodeDate</a> = function (d) {\n       return '\"' + <a href=\"#!/api/Ext.Date-method-format\" rel=\"Ext.Date-method-format\" class=\"docClass\">Ext.Date.format</a>(d, 'MS') + '\"';\n   };</p>\n"},"defaultValue":{"!type":"?","!doc":"<p>The default value used when the creating an instance from a raw data object, and the property referenced by the\n<code><a href=\"#!/api/Ext.data.Field-cfg-mapping\" rel=\"Ext.data.Field-cfg-mapping\" class=\"docClass\">mapping</a></code> does not exist in that data object.</p>\n\n<p>May be specified as <code>undefined</code> to prevent defaulting in a value.</p>\n"},"mapping":{"!type":"string|number","!doc":"<p>(Optional) A path expression for use by the <a href=\"#!/api/Ext.data.reader.Reader\" rel=\"Ext.data.reader.Reader\" class=\"docClass\">Ext.data.reader.Reader</a> implementation that is creating the\n<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Model</a> to extract the Field value from the data object. If the path expression is the same\nas the field name, the mapping may be omitted.</p>\n\n<p>The form of the mapping expression depends on the Reader being used.</p>\n\n<ul>\n<li><p><a href=\"#!/api/Ext.data.reader.Json\" rel=\"Ext.data.reader.Json\" class=\"docClass\">Ext.data.reader.Json</a></p>\n\n<p>The mapping is a string containing the javascript expression to reference the data from an element of the data\nitem's <a href=\"#!/api/Ext.data.reader.Json-cfg-root\" rel=\"Ext.data.reader.Json-cfg-root\" class=\"docClass\">root</a> Array. Defaults to the field name.</p></li>\n<li><p><a href=\"#!/api/Ext.data.reader.Xml\" rel=\"Ext.data.reader.Xml\" class=\"docClass\">Ext.data.reader.Xml</a></p>\n\n<p>The mapping is an <a href=\"#!/api/Ext.dom.Query\" rel=\"Ext.dom.Query\" class=\"docClass\">Ext.DomQuery</a> path to the data item relative to the DOM element that represents the\n<a href=\"#!/api/Ext.data.reader.Xml-cfg-record\" rel=\"Ext.data.reader.Xml-cfg-record\" class=\"docClass\">record</a>. Defaults to the field name.</p></li>\n<li><p><a href=\"#!/api/Ext.data.reader.Array\" rel=\"Ext.data.reader.Array\" class=\"docClass\">Ext.data.reader.Array</a></p>\n\n<p>The mapping is a number indicating the Array index of the field's value. Defaults to the field specification's\nArray position.</p></li>\n</ul>\n\n\n<p>If a more complex value extraction strategy is required, then configure the Field with a <a href=\"#!/api/Ext.data.Field-cfg-convert\" rel=\"Ext.data.Field-cfg-convert\" class=\"docClass\">convert</a>\nfunction. This is passed the whole row object, and may interrogate it in whatever way is necessary in order to\nreturn the desired data.</p>\n"},"name":{"!type":"string","!doc":"<p>The name by which the field is referenced within the Model. This is referenced by, for example, the <code>dataIndex</code>\nproperty in column definition objects passed to <a href=\"#!/api/Ext.grid.property.HeaderContainer\" rel=\"Ext.grid.property.HeaderContainer\" class=\"docClass\">Ext.grid.property.HeaderContainer</a>.</p>\n\n<p>Note: In the simplest case, if no properties other than <code>name</code> are required, a field definition may consist of\njust a String for the field name.</p>\n"},"persist":{"!type":"bool","!doc":"<p>False to exclude this field from the <a href=\"#!/api/Ext.data.Model-property-modified\" rel=\"Ext.data.Model-property-modified\" class=\"docClass\">Ext.data.Model.modified</a> fields in a model. This will also exclude\nthe field from being written using a <a href=\"#!/api/Ext.data.writer.Writer\" rel=\"Ext.data.writer.Writer\" class=\"docClass\">Ext.data.writer.Writer</a>. This option is useful when model fields are\nused to keep state on the client but do not need to be persisted to the server. Defaults to true.</p>\n"},"serialize":{"!type":"fn()","!doc":"<p>A function which converts the Model's value for this Field into a form which can be used by whatever <a href=\"#!/api/Ext.data.writer.Writer\" rel=\"Ext.data.writer.Writer\" class=\"docClass\">Writer</a>\nis being used to sync data with the server.</p>\n\n<p>The function should return a string which represents the Field's value.</p>\n\n<p>It is passed the following parameters:</p>\n\n<ul>\n<li><p><strong>v</strong> : Mixed</p>\n\n<p>The Field's value - the value to be serialized.</p></li>\n<li><p><strong>rec</strong> : <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a></p>\n\n<p>The record being serialized.</p></li>\n</ul>\n\n"},"sortDir":{"!type":"string","!doc":"<p>Initial direction to sort (<code>\"ASC\"</code> or <code>\"DESC\"</code>). Defaults to <code>\"ASC\"</code>.</p>\n"},"sortType":{"!type":"string|fn()","!doc":"<p>A function which converts a Field's value to a comparable value in order to ensure correct sort ordering.\nPredefined functions are provided in <a href=\"#!/api/Ext.data.SortTypes\" rel=\"Ext.data.SortTypes\" class=\"docClass\">Ext.data.SortTypes</a>. A custom sort example:</p>\n\n<pre><code>// current sort     after sort we want\n// +-+------+          +-+------+\n// |1|First |          |1|First |\n// |2|Last  |          |3|Second|\n// |3|Second|          |2|Last  |\n// +-+------+          +-+------+\n\nsortType: function(value) {\n   switch (value.toLowerCase()) // native toLowerCase():\n   {\n      case 'first': return 1;\n      case 'second': return 2;\n      default: return 3;\n   }\n}\n</code></pre>\n\n<p>May also be set to a String value, corresponding to one of the named sort types in <a href=\"#!/api/Ext.data.SortTypes\" rel=\"Ext.data.SortTypes\" class=\"docClass\">Ext.data.SortTypes</a>.</p>\n"},"type":{"!type":"string|?","!doc":"<p>The data type for automatic conversion from received data to the <em>stored</em> value if\n<code><a href=\"#!/api/Ext.data.Field-cfg-convert\" rel=\"Ext.data.Field-cfg-convert\" class=\"docClass\">convert</a></code> has not been specified. This may be specified as a string value.\nPossible values are</p>\n\n<ul>\n<li>auto (Default, implies no conversion)</li>\n<li>string</li>\n<li>int</li>\n<li>float</li>\n<li>boolean</li>\n<li>date</li>\n</ul>\n\n\n<p>This may also be specified by referencing a member of the <a href=\"#!/api/Ext.data.Types\" rel=\"Ext.data.Types\" class=\"docClass\">Ext.data.Types</a> class.</p>\n\n<p>Developers may create their own application-specific data types by defining new members of the <a href=\"#!/api/Ext.data.Types\" rel=\"Ext.data.Types\" class=\"docClass\">Ext.data.Types</a> class.</p>\n"},"useNull":{"!type":"bool","!doc":"<p>Use when converting received data into a INT, FLOAT, BOOL or STRING type. If the value cannot be\nparsed, <code>null</code> will be used if useNull is true, otherwise a default value for that type will be used:</p>\n\n<ul>\n<li>for INT and FLOAT - <code>0</code>.</li>\n<li>for STRING - <code>\"\"</code>.</li>\n<li>for BOOL - <code>false</code>.</li>\n</ul>\n\n\n<p>Note that when parsing of DATE type fails, the value will be <code>null</code> regardless of this setting.</p>\n"}},"Ext_data_IdGenerator_cfg":{"!proto":"Ext_Base_cfg","id":{"!type":"string","!doc":"<p>The id by which to register a new instance. This instance can be found using the\n<a href=\"#!/api/Ext.data.IdGenerator-static-method-get\" rel=\"Ext.data.IdGenerator-static-method-get\" class=\"docClass\">get</a> static method.</p>\n"}},"Ext_data_JsonPStore_cfg":{"!proto":"Ext_data_Store_cfg"},"Ext_data_JsonStore_cfg":{"!proto":"Ext_data_Store_cfg"},"Ext_data_NodeStore_cfg":{"!proto":"Ext_data_Store_cfg","node":{"!type":"+Ext.data.Model","!doc":"<p>The Record you want to bind this Store to. Note that\nthis record will be decorated with the <a href=\"#!/api/Ext.data.NodeInterface\" rel=\"Ext.data.NodeInterface\" class=\"docClass\">Ext.data.NodeInterface</a> if this is not the\ncase yet.</p>\n"},"recursive":{"!type":"bool","!doc":"<p>Set this to true if you want this NodeStore to represent\nall the descendents of the node in its flat data collection. This is useful for\nrendering a tree structure to a DataView and is being used internally by\nthe TreeView. Any records that are moved, removed, inserted or appended to the\nnode at any depth below the node this store is bound to will be automatically\nupdated in this Store's internal flat data structure.</p>\n"},"rootVisible":{"!type":"bool","!doc":"<p>False to not include the root node in this Stores collection.</p>\n"},"treeStore":{"!type":"+Ext.data.TreeStore","!doc":"<p>The TreeStore that is used by this NodeStore's <a href=\"#!/api/Ext.tree.View\" rel=\"Ext.tree.View\" class=\"docClass\">Ext.tree.View</a>.</p>\n"}},"Ext_data_Operation_cfg":{"!proto":"Ext_Base_cfg","action":{"!type":"string","!doc":"<p>The action being performed by this Operation. Should be one of 'create', 'read', 'update' or 'destroy'.</p>\n"},"batch":{"!type":"+Ext.data.Batch","!doc":"<p>The batch that this Operation is a part of.</p>\n"},"callback":{"!type":"fn()","!doc":"<p>Function to execute when operation completed.</p>\n"},"filters":{"!type":"[+Ext.util.Filter]","!doc":"<p>Optional array of filter objects. Only applies to 'read' actions.</p>\n"},"groupers":{"!type":"[+Ext.util.Grouper]","!doc":"<p>Optional grouping configuration. Only applies to 'read' actions where grouping is desired.</p>\n"},"limit":{"!type":"number","!doc":"<p>The number of records to load. Used on 'read' actions when paging is being used.</p>\n"},"params":{"!type":"?","!doc":"<p>Parameters to pass along with the request when performing the operation.</p>\n"},"scope":{"!type":"?","!doc":"<p>Scope for the <a href=\"#!/api/Ext.data.Operation-cfg-callback\" rel=\"Ext.data.Operation-cfg-callback\" class=\"docClass\">callback</a> function.</p>\n"},"sorters":{"!type":"[+Ext.util.Sorter]","!doc":"<p>Optional array of sorter objects. Only applies to 'read' actions.</p>\n"},"start":{"!type":"number","!doc":"<p>The start index (offset), used in paging when running a 'read' action.</p>\n"},"synchronous":{"!type":"bool","!doc":"<p>True if this Operation is to be executed synchronously. This property is inspected by a\n<a href=\"#!/api/Ext.data.Batch\" rel=\"Ext.data.Batch\" class=\"docClass\">Batch</a> to see if a series of Operations can be executed in parallel or not.</p>\n"}},"Ext_data_PageMap_cfg":{"!proto":"Ext_util_LruCache_cfg"},"Ext_data_Request_cfg":{"!proto":"Ext_Base_cfg","action":{"!type":"string","!doc":"<p>The name of the action this Request represents. Usually one of 'create', 'read', 'update' or 'destroy'.</p>\n"},"method":{"!type":"string","!doc":"<p>The HTTP method to use on this Request. Should be one of 'GET', 'POST', 'PUT' or 'DELETE'.</p>\n"},"params":{"!type":"?","!doc":"<p>HTTP request params. The Proxy and its Writer have access to and can modify this object.</p>\n"},"url":{"!type":"string","!doc":"<p>The url to access on this Request</p>\n"}},"Ext_data_ResultSet_cfg":{"!proto":"Ext_Base_cfg","count":{"!type":"number","!doc":"<p>The number of records in this ResultSet. Note that total may differ from this number.</p>\n"},"loaded":{"!type":"bool","!doc":"<p>True if the records have already been loaded. This is only meaningful when dealing with\nSQL-backed proxies.</p>\n"},"records":{"!type":"[+Ext.data.Model]","!doc":"<p>The array of record instances.</p>\n"},"success":{"!type":"bool","!doc":"<p>True if the ResultSet loaded successfully, false if any errors were encountered.</p>\n"},"total":{"!type":"number","!doc":"<p>The total number of records reported by the data source. This ResultSet may form a subset of\nthose records (see <a href=\"#!/api/Ext.data.ResultSet-cfg-count\" rel=\"Ext.data.ResultSet-cfg-count\" class=\"docClass\">count</a>).</p>\n"}},"Ext_data_Store_cfg":{"!proto":"Ext_data_AbstractStore_cfg","autoDestroy":{"!type":"bool","!doc":"<p>When a Store is used by only one <a href=\"#!/api/Ext.view.View\" rel=\"Ext.view.View\" class=\"docClass\">DataView</a>, and should only exist for the lifetime of that view, then\nconfigure the autoDestroy flag as <code>true</code>. This causes the destruction of the view to trigger the destruction of its Store.</p>\n"},"buffered":{"!type":"bool","!doc":"<p>Allows the Store to prefetch and cache in a <strong>page cache</strong>, pages of Records, and to then satisfy\nloading requirements from this page cache.</p>\n\n<p>To use buffered Stores, initiate the process by loading the first page. The number of rows rendered are\ndetermined automatically, and the range of pages needed to keep the cache primed for scrolling is\nrequested and cached.\nExample:</p>\n\n<pre><code>myStore.loadPage(1); // Load page 1\n</code></pre>\n\n<p>A <a href=\"#!/api/Ext.grid.plugin.BufferedRenderer\" rel=\"Ext.grid.plugin.BufferedRenderer\" class=\"docClass\">BufferedRenderer</a> is instantiated which will monitor the scrolling in the grid, and\nrefresh the view's rows from the page cache as needed. It will also pull new data into the page\ncache when scrolling of the view draws upon data near either end of the prefetched data.</p>\n\n<p>The margins which trigger view refreshing from the prefetched data are <a href=\"#!/api/Ext.grid.plugin.BufferedRenderer-cfg-numFromEdge\" rel=\"Ext.grid.plugin.BufferedRenderer-cfg-numFromEdge\" class=\"docClass\">Ext.grid.plugin.BufferedRenderer.numFromEdge</a>,\n<a href=\"#!/api/Ext.grid.plugin.BufferedRenderer-cfg-leadingBufferZone\" rel=\"Ext.grid.plugin.BufferedRenderer-cfg-leadingBufferZone\" class=\"docClass\">Ext.grid.plugin.BufferedRenderer.leadingBufferZone</a> and <a href=\"#!/api/Ext.grid.plugin.BufferedRenderer-cfg-trailingBufferZone\" rel=\"Ext.grid.plugin.BufferedRenderer-cfg-trailingBufferZone\" class=\"docClass\">Ext.grid.plugin.BufferedRenderer.trailingBufferZone</a>.</p>\n\n<p>The margins which trigger loading more data into the page cache are, <a href=\"#!/api/Ext.data.Store-cfg-leadingBufferZone\" rel=\"Ext.data.Store-cfg-leadingBufferZone\" class=\"docClass\">leadingBufferZone</a> and\n<a href=\"#!/api/Ext.data.Store-cfg-trailingBufferZone\" rel=\"Ext.data.Store-cfg-trailingBufferZone\" class=\"docClass\">trailingBufferZone</a>.</p>\n\n<p>By default, only 5 pages of data are cached in the page cache, with pages \"scrolling\" out of the buffer\nas the view moves down through the dataset.\nSetting this value to zero means that no pages are <em>ever</em> scrolled out of the page cache, and\nthat eventually the whole dataset may become present in the page cache. This is sometimes desirable\nas long as datasets do not reach astronomical proportions.</p>\n\n<p>Selection state may be maintained across page boundaries by configuring the SelectionModel not to discard\nrecords from its collection when those Records cycle out of the Store's primary collection. This is done\nby configuring the SelectionModel like this:</p>\n\n<pre><code>selModel: {\n    pruneRemoved: false\n}\n</code></pre>\n"},"clearOnPageLoad":{"!type":"bool","!doc":"<p>True to empty the store when loading another page via <a href=\"#!/api/Ext.data.Store-method-loadPage\" rel=\"Ext.data.Store-method-loadPage\" class=\"docClass\">loadPage</a>,\n<a href=\"#!/api/Ext.data.Store-method-nextPage\" rel=\"Ext.data.Store-method-nextPage\" class=\"docClass\">nextPage</a> or <a href=\"#!/api/Ext.data.Store-method-previousPage\" rel=\"Ext.data.Store-method-previousPage\" class=\"docClass\">previousPage</a>. Setting to false keeps existing records, allowing\nlarge data sets to be loaded one page at a time but rendered all together.</p>\n"},"clearRemovedOnLoad":{"!type":"bool","!doc":"<p><code>true</code> to clear anything in the <a href=\"#!/api/Ext.data.Store-property-removed\" rel=\"Ext.data.Store-property-removed\" class=\"docClass\">removed</a> record collection when the store loads.</p>\n"},"data":{"!type":"[?]|[+Ext.data.Model]","!doc":"<p>Array of Model instances or data objects to load locally. See \"Inline data\" above for details.</p>\n"},"groupDir":{"!type":"string","!doc":"<p>The direction in which sorting should be applied when grouping. Supported values are \"ASC\" and \"DESC\".</p>\n"},"groupField":{"!type":"string","!doc":"<p>The field by which to group data in the store. Internally, grouping is very similar to sorting - the\ngroupField and <a href=\"#!/api/Ext.data.Store-cfg-groupDir\" rel=\"Ext.data.Store-cfg-groupDir\" class=\"docClass\">groupDir</a> are injected as the first sorter (see <a href=\"#!/api/Ext.data.Store-method-sort\" rel=\"Ext.data.Store-method-sort\" class=\"docClass\">sort</a>). Stores support a single\nlevel of grouping, and groups can be fetched via the <a href=\"#!/api/Ext.data.Store-method-getGroups\" rel=\"Ext.data.Store-method-getGroups\" class=\"docClass\">getGroups</a> method.</p>\n"},"groupers":{"!type":"+Ext.util.MixedCollection","!doc":"<p>The collection of <a href=\"#!/api/Ext.util.Grouper\" rel=\"Ext.util.Grouper\" class=\"docClass\">Groupers</a> currently applied to this Store.</p>\n"},"leadingBufferZone":{"!type":"number","!doc":"<p>When <a href=\"#!/api/Ext.data.Store-cfg-buffered\" rel=\"Ext.data.Store-cfg-buffered\" class=\"docClass\">buffered</a>, the number of extra rows to keep cached on the leading side of scrolling buffer\nas scrolling proceeds. A larger number means fewer replenishments from the server.</p>\n"},"pageSize":{"!type":"number","!doc":"<p>The number of records considered to form a 'page'. This is used to power the built-in\npaging using the nextPage and previousPage functions when the grid is paged using a\n<a href=\"#!/api/Ext.toolbar.Paging\" rel=\"Ext.toolbar.Paging\" class=\"docClass\">PagingToolbar</a> Defaults to 25.</p>\n\n<p>If this Store is <a href=\"#!/api/Ext.data.Store-cfg-buffered\" rel=\"Ext.data.Store-cfg-buffered\" class=\"docClass\">buffered</a>, pages are loaded into a page cache before the Store's\ndata is updated from the cache. The pageSize is the number of rows loaded into the cache in one request.\nThis will not affect the rendering of a buffered grid, but a larger page size will mean fewer loads.</p>\n\n<p>In a buffered grid, scrolling is monitored, and the page cache is kept primed with data ahead of the\ndirection of scroll to provide rapid access to data when scrolling causes it to be required. Several pages\nin advance may be requested depending on various parameters.</p>\n\n<p>It is recommended to tune the <a href=\"#!/api/Ext.data.Store-cfg-pageSize\" rel=\"Ext.data.Store-cfg-pageSize\" class=\"docClass\">pageSize</a>, <a href=\"#!/api/Ext.data.Store-cfg-trailingBufferZone\" rel=\"Ext.data.Store-cfg-trailingBufferZone\" class=\"docClass\">trailingBufferZone</a> and\n<a href=\"#!/api/Ext.data.Store-cfg-leadingBufferZone\" rel=\"Ext.data.Store-cfg-leadingBufferZone\" class=\"docClass\">leadingBufferZone</a> configurations based upon the conditions pertaining in your deployed application.</p>\n\n<p>The provided SDK example <code>examples/grid/infinite-scroll-grid-tuner.html</code> can be used to experiment with\ndifferent settings including simulating Ajax latency.</p>\n"},"proxy":{"!type":"string|+Ext.data.proxy.Proxy|?","!doc":"<p>The Proxy to use for this Store. This can be either a string, a config object or a Proxy instance -\nsee <a href=\"#!/api/Ext.data.Store-method-setProxy\" rel=\"Ext.data.Store-method-setProxy\" class=\"docClass\">setProxy</a> for details.</p>\n"},"purgePageCount":{"!type":"number","!doc":"<p><em>Valid only when used with a <a href=\"#!/api/Ext.data.Store-cfg-buffered\" rel=\"Ext.data.Store-cfg-buffered\" class=\"docClass\">buffered</a> Store.</em></p>\n\n<p>The number of pages <em>additional to the required buffered range</em> to keep in the prefetch cache before purging least recently used records.</p>\n\n<p>For example, if the height of the view area and the configured <a href=\"#!/api/Ext.data.Store-cfg-trailingBufferZone\" rel=\"Ext.data.Store-cfg-trailingBufferZone\" class=\"docClass\">trailingBufferZone</a> and <a href=\"#!/api/Ext.data.Store-cfg-leadingBufferZone\" rel=\"Ext.data.Store-cfg-leadingBufferZone\" class=\"docClass\">leadingBufferZone</a> require that there\nare three pages in the cache, then a <code>purgePageCount</code> of 5 ensures that up to 8 pages can be in the page cache any any one time.</p>\n\n<p>A value of 0 indicates to never purge the prefetched data.</p>\n"},"remoteFilter":{"!type":"bool","!doc":"<p><code>true</code> if the grouping should be performed on the server side, false if it is local only.</p>\n\n<p><a href=\"#!/api/Ext.data.Store-cfg-buffered\" rel=\"Ext.data.Store-cfg-buffered\" class=\"docClass\">Buffered</a> stores automatically set this to <code>true</code>. Buffered stores contain an abitrary\nsubset of the full dataset which depends upon various configurations and which pages have been requested\nfor rendering. Such <em>sparse</em> datasets are ineligible for local filtering.</p>\n"},"remoteGroup":{"!type":"bool","!doc":"<p><code>true</code> if the grouping should apply on the server side, false if it is local only.  If the\ngrouping is local, it can be applied immediately to the data.  If it is remote, then it will simply act as a\nhelper, automatically sending the grouping information to the server.</p>\n\n<p><a href=\"#!/api/Ext.data.Store-cfg-buffered\" rel=\"Ext.data.Store-cfg-buffered\" class=\"docClass\">Buffered</a> stores automatically set this to <code>true</code>. Buffered stores contain an abitrary\nsubset of the full dataset which depends upon various configurations and which pages have been requested\nfor rendering. Such <em>sparse</em> datasets are ineligible for local grouping.</p>\n"},"remoteSort":{"!type":"bool","!doc":"<p><code>true</code> if the sorting should be performed on the server side, false if it is local only.</p>\n\n<p><a href=\"#!/api/Ext.data.Store-cfg-buffered\" rel=\"Ext.data.Store-cfg-buffered\" class=\"docClass\">Buffered</a> stores automatically set this to <code>true</code>. Buffered stores contain an abitrary\nsubset of the full dataset which depends upon various configurations and which pages have been requested\nfor rendering. Such <em>sparse</em> datasets are ineligible for local sorting.</p>\n"},"sortOnFilter":{"!type":"bool","!doc":"<p>For local filtering only, causes <a href=\"#!/api/Ext.data.Store-method-sort\" rel=\"Ext.data.Store-method-sort\" class=\"docClass\">sort</a> to be called whenever <a href=\"#!/api/Ext.data.Store-method-filter\" rel=\"Ext.data.Store-method-filter\" class=\"docClass\">filter</a> is called,\ncausing the sorters to be reapplied after filtering.</p>\n"},"trailingBufferZone":{"!type":"number","!doc":"<p>When <a href=\"#!/api/Ext.data.Store-cfg-buffered\" rel=\"Ext.data.Store-cfg-buffered\" class=\"docClass\">buffered</a>, the number of extra records to keep cached on the trailing side of scrolling buffer\nas scrolling proceeds. A larger number means fewer replenishments from the server.</p>\n"}},"Ext_data_StoreManager_cfg":{"!proto":"Ext_util_MixedCollection_cfg","listeners":{"!type":"?"}},"Ext_data_TreeStore_cfg":{"!proto":"Ext_data_AbstractStore_cfg","clearOnLoad":{"!type":"bool","!doc":"<p>Remove previously existing child nodes before loading.</p>\n"},"clearRemovedOnLoad":{"!type":"bool","!doc":"<p>If <code>true</code>, when a node is reloaded, any records in the <a href=\"#!/api/Ext.data.TreeStore-property-removed\" rel=\"Ext.data.TreeStore-property-removed\" class=\"docClass\">removed</a> record collection that were previously descendants of the node being reloaded will be cleared from the <a href=\"#!/api/Ext.data.TreeStore-property-removed\" rel=\"Ext.data.TreeStore-property-removed\" class=\"docClass\">removed</a> collection.\nOnly applicable if <a href=\"#!/api/Ext.data.TreeStore-cfg-clearOnLoad\" rel=\"Ext.data.TreeStore-cfg-clearOnLoad\" class=\"docClass\">clearOnLoad</a> is <code>true</code>.</p>\n"},"defaultRootId":{"!type":"string","!doc":"<p>The default root id.</p>\n"},"defaultRootProperty":{"!type":"string","!doc":"<p>The root property to specify on the reader if one is not explicitly defined.</p>\n"},"defaultRootText":{"!type":"string","!doc":"<p>The default root text (if not specified)/</p>\n"},"folderSort":{"!type":"bool","!doc":"<p>Set to true to automatically prepend a leaf sorter.</p>\n"},"nodeParam":{"!type":"string","!doc":"<p>The name of the parameter sent to the server which contains the identifier of the node.</p>\n"},"root":{"!type":"+Ext.data.Model|+Ext.data.NodeInterface|?","!doc":"<p>The root node for this store. For example:</p>\n\n<pre><code>root: {\n    expanded: true,\n    text: \"My Root\",\n    children: [\n        { text: \"Child 1\", leaf: true },\n        { text: \"Child 2\", expanded: true, children: [\n            { text: \"GrandChild\", leaf: true }\n        ] }\n    ]\n}\n</code></pre>\n\n<p>Setting the <code>root</code> config option is the same as calling <a href=\"#!/api/Ext.data.TreeStore-method-setRootNode\" rel=\"Ext.data.TreeStore-method-setRootNode\" class=\"docClass\">setRootNode</a>.</p>\n"}},"Ext_data_UuidGenerator_cfg":{"!proto":"Ext_data_IdGenerator_cfg","version":{"!type":"number","!doc":"<p>The Version of UUID. Supported values are:</p>\n\n<ul>\n<li>1 : Time-based, \"sequential\" UUID.</li>\n<li>4 : Pseudo-random UUID.</li>\n</ul>\n\n\n<p>The default is 4.</p>\n"}},"Ext_data_XmlStore_cfg":{"!proto":"Ext_data_Store_cfg"},"Ext_data_association_Association_cfg":{"!proto":"Ext_Base_cfg","associatedModel":{"!type":"string","!doc":"<p>The string name of the model that is being associated with.</p>\n\n<p><strong>NB!</strong> This config is required when instantiating the Association directly.\nWhen defining the association as a config object inside Model, the <a href=\"#!/api/Ext.data.association.Association-cfg-model\" rel=\"Ext.data.association.Association-cfg-model\" class=\"docClass\">model</a>\nconfiguration will shadow this config.</p>\n"},"associationKey":{"!type":"string","!doc":"<p>The name of the property in the data to read the association from. Defaults to the name of the associated model.</p>\n"},"model":{"!type":"string","!doc":"<p>The string name of the model that is being associated with.</p>\n\n<p>This config option is to be used when defining the association as a config\nobject within Model.  The value is then mapped to <a href=\"#!/api/Ext.data.association.Association-cfg-associatedModel\" rel=\"Ext.data.association.Association-cfg-associatedModel\" class=\"docClass\">associatedModel</a> when\nAssociation is instantiated inside Model.</p>\n"},"ownerModel":{"!type":"string","!doc":"<p>The string name of the model that owns the association.</p>\n\n<p><strong>NB!</strong> This config is required when instantiating the Association directly.\nHowever, it cannot be used at all when defining the association as a config\nobject inside Model, because the name of the model itself will be supplied\nautomatically as the value of this config.</p>\n"},"primaryKey":{"!type":"string","!doc":"<p>The name of the primary key on the associated model. In general this will be the\n<a href=\"#!/api/Ext.data.Model-cfg-idProperty\" rel=\"Ext.data.Model-cfg-idProperty\" class=\"docClass\">Ext.data.Model.idProperty</a> of the Model.</p>\n"},"reader":{"!type":"+Ext.data.reader.Reader","!doc":"<p>A special reader to read associated data</p>\n"}},"Ext_data_association_BelongsTo_cfg":{"!proto":"Ext_data_association_Association_cfg","foreignKey":{"!type":"string","!doc":"<p>The name of the foreign key on the owner model that links it to the associated\nmodel. Defaults to the lowercased name of the associated model plus \"_id\", e.g. an association with a\nmodel called Product would set up a product_id foreign key.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Order', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['id', 'date'],\n    hasMany: 'Product'\n});\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Product', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['id', 'name', 'order_id'], // refers to the id of the order that this product belongs to\n    belongsTo: 'Order'\n});\nvar product = new Product({\n    id: 1,\n    name: 'Product 1',\n    order_id: 22\n}, 1);\nproduct.getOrder(); // Will make a call to the server asking for order_id 22\n</code></pre>\n"},"getterName":{"!type":"string","!doc":"<p>The name of the getter function that will be added to the local model's prototype.\nDefaults to 'get' + the name of the foreign model, e.g. getCategory</p>\n"},"setterName":{"!type":"string","!doc":"<p>The name of the setter function that will be added to the local model's prototype.\nDefaults to 'set' + the name of the foreign model, e.g. setCategory</p>\n"},"type":{"!type":"string","!doc":"<p>The type configuration can be used when creating associations using a configuration object.\nUse 'belongsTo' to create a BelongsTo association.</p>\n\n<pre><code>associations: [{\n    type: 'belongsTo',\n    model: 'User'\n}]\n</code></pre>\n"}},"Ext_data_association_HasMany_cfg":{"!proto":"Ext_data_association_Association_cfg","autoLoad":{"!type":"bool","!doc":"<p>True to automatically load the related store from a remote source when instantiated.\nDefaults to <tt>false</tt>.</p>\n"},"filterProperty":{"!type":"string","!doc":"<p>Optionally overrides the default filter that is set up on the associated Store. If\nthis is not set, a filter is automatically created which filters the association based on the configured\n<a href=\"#!/api/Ext.data.association.HasMany-cfg-foreignKey\" rel=\"Ext.data.association.HasMany-cfg-foreignKey\" class=\"docClass\">foreignKey</a>. See intro docs for more details. Defaults to undefined</p>\n"},"foreignKey":{"!type":"string","!doc":"<p>The name of the foreign key on the associated model that links it to the owner\nmodel. Defaults to the lowercased name of the owner model plus \"_id\", e.g. an association with a where a\nmodel called Group hasMany Users would create 'group_id' as the foreign key. When the remote store is loaded,\nthe store is automatically filtered so that only records with a matching foreign key are included in the\nresulting child store. This can be overridden by specifying the <a href=\"#!/api/Ext.data.association.HasMany-cfg-filterProperty\" rel=\"Ext.data.association.HasMany-cfg-filterProperty\" class=\"docClass\">filterProperty</a>.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Group', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['id', 'name'],\n    hasMany: 'User'\n});\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('User', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['id', 'name', 'group_id'], // refers to the id of the group that this user belongs to\n    belongsTo: 'Group'\n});\n</code></pre>\n\n"},"name":{"!type":"string","!doc":"<p>The name of the function to create on the owner model to retrieve the child store.\nIf not specified, the pluralized name of the child model is used.</p>\n\n<pre><code>// This will create a users() method on any Group model instance\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Group', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['id', 'name'],\n    hasMany: 'User'\n});\nvar group = new Group();\nconsole.log(group.users());\n\n// The method to retrieve the users will now be getUserList\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Group', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['id', 'name'],\n    hasMany: {model: 'User', name: 'getUserList'}\n});\nvar group = new Group();\nconsole.log(group.getUserList());\n</code></pre>\n\n"},"storeConfig":{"!type":"?","!doc":"<p>Optional configuration object that will be passed to the generated Store. Defaults to\nundefined.</p>\n"},"type":{"!type":"string","!doc":"<p>The type configuration can be used when creating associations using a configuration object.\nUse 'hasMany' to create a HasMany association</p>\n\n<pre><code>associations: [{\n    type: 'hasMany',\n    model: 'User'\n}]\n</code></pre>\n\n"}},"Ext_data_association_HasOne_cfg":{"!proto":"Ext_data_association_Association_cfg","foreignKey":{"!type":"string","!doc":"<p>The name of the foreign key on the owner model that links it to the associated\nmodel. Defaults to the lowercased name of the associated model plus \"_id\", e.g. an association with a\nmodel called Person would set up a address_id foreign key.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Person', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['id', 'name', 'address_id'], // refers to the id of the address object\n    hasOne: 'Address'\n});\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Address', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['id', 'number', 'street', 'city', 'zip'], \n    belongsTo: 'Person'\n});\nvar Person = new Person({\n    id: 1,\n    name: 'John Smith',\n    address_id: 13\n}, 1);\nperson.getAddress(); // Will make a call to the server asking for address_id 13\n</code></pre>\n"},"getterName":{"!type":"string","!doc":"<p>The name of the getter function that will be added to the local model's prototype.\nDefaults to 'get' + the name of the foreign model, e.g. getAddress</p>\n"},"setterName":{"!type":"string","!doc":"<p>The name of the setter function that will be added to the local model's prototype.\nDefaults to 'set' + the name of the foreign model, e.g. setAddress</p>\n"},"type":{"!type":"string","!doc":"<p>The type configuration can be used when creating associations using a configuration object.\nUse 'hasOne' to create a HasOne association.</p>\n\n<pre><code>associations: [{\n    type: 'hasOne',\n    model: 'Address'\n}]\n</code></pre>\n"}},"Ext_data_flash_BinaryXhr_cfg":{"!proto":"Ext_Base_cfg"},"Ext_data_proxy_Ajax_cfg":{"!proto":"Ext_data_proxy_Server_cfg","binary":{"!type":"bool","!doc":"<p>True to request binary data from the server.  This feature requires\nthe use of a binary reader such as AMF Reader</p>\n"},"headers":{"!type":"?","!doc":"<p>Any headers to add to the Ajax request. Defaults to undefined.</p>\n"}},"Ext_data_proxy_Client_cfg":{"!proto":"Ext_data_proxy_Proxy_cfg"},"Ext_data_proxy_Direct_cfg":{"!proto":"Ext_data_proxy_Server_cfg","api":{"!type":"?","!doc":"<p>The same as <a href=\"#!/api/Ext.data.proxy.Server-cfg-api\" rel=\"Ext.data.proxy.Server-cfg-api\" class=\"docClass\">Ext.data.proxy.Server.api</a>, however instead of providing urls, you should provide a direct\nfunction call. See <a href=\"#!/api/Ext.data.proxy.Direct-cfg-directFn\" rel=\"Ext.data.proxy.Direct-cfg-directFn\" class=\"docClass\">directFn</a>.</p>\n"},"directFn":{"!type":"string|fn()","!doc":"<p>Function to call when executing a request. directFn is a simple alternative to defining the api configuration-parameter\nfor Store's which will not implement a full CRUD api. The directFn may also be a string reference to the fully qualified\nname of the function, for example: 'MyApp.company.GetProfile'. This can be useful when using dynamic loading. The string\nwill be looked up when the proxy is created.</p>\n"},"extraParams":{"!type":"?","!doc":"<p>Extra parameters that will be included on every read request. Individual requests with params\nof the same name will override these params when they are in conflict.</p>\n"},"paramOrder":{"!type":"string|[string]","!doc":"<p>Defaults to undefined. A list of params to be executed server side.  Specify the params in the order in\nwhich they must be executed on the server-side as either (1) an Array of String values, or (2) a String\nof params delimited by either whitespace, comma, or pipe. For example, any of the following would be\nacceptable:</p>\n\n<pre><code>paramOrder: ['param1','param2','param3']\nparamOrder: 'param1 param2 param3'\nparamOrder: 'param1,param2,param3'\nparamOrder: 'param1|param2|param'\n</code></pre>\n"},"paramsAsHash":{"!type":"bool","!doc":"<p>Send parameters as a collection of named arguments.\nProviding a <a href=\"#!/api/Ext.data.proxy.Direct-cfg-paramOrder\" rel=\"Ext.data.proxy.Direct-cfg-paramOrder\" class=\"docClass\">paramOrder</a> nullifies this configuration.</p>\n"}},"Ext_data_proxy_LocalStorage_cfg":{"!proto":"Ext_data_proxy_WebStorage_cfg"},"Ext_data_proxy_Memory_cfg":{"!proto":"Ext_data_proxy_Client_cfg","data":{"!type":"?","!doc":"<p>Optional data to pass to configured Reader.</p>\n"},"enablePaging":{"!type":"bool","!doc":"<p>Configure as <code>true</code> to enable this MemoryProxy to honour a read operation's <code>start</code> and <code>limit</code> options.</p>\n\n<p>When <code>true</code>, read operations will be able to read <em>pages</em> of records from the data object.</p>\n"}},"Ext_data_proxy_Proxy_cfg":{"!proto":"Ext_Base_cfg","batchActions":{"!type":"bool","!doc":"<p>True to batch actions of a particular type when synchronizing the store. Defaults to true.</p>\n"},"batchOrder":{"!type":"string","!doc":"<p>Comma-separated ordering 'create', 'update' and 'destroy' actions when batching. Override this to set a different\norder for the batched CRUD actions to be executed in. Defaults to 'create,update,destroy'.</p>\n"},"defaultReaderType":{"!type":"string","!doc":"<p>The default registered reader type. Defaults to 'json'.</p>\n"},"defaultWriterType":{"!type":"string","!doc":"<p>The default registered writer type. Defaults to 'json'.</p>\n"},"listeners":{"!type":"?","!doc":"<p>A config object containing one or more event handlers to be added to this object during initialization. This\nshould be a valid listeners config object as specified in the <a href=\"#!/api/Ext.util.Observable-method-addListener\" rel=\"Ext.util.Observable-method-addListener\" class=\"docClass\">addListener</a> example for attaching multiple\nhandlers at once.</p>\n\n<p><strong>DOM events from Ext JS <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Components</a></strong></p>\n\n<p>While <em>some</em> Ext JS Component classes export selected DOM events (e.g. \"click\", \"mouseover\" etc), this is usually\nonly done when extra value can be added. For example the <a href=\"#!/api/Ext.view.View\" rel=\"Ext.view.View\" class=\"docClass\">DataView</a>'s <strong><code><a href=\"#!/api/Ext.view.View-event-itemclick\" rel=\"Ext.view.View-event-itemclick\" class=\"docClass\">itemclick</a></code></strong> event passing the node clicked on. To access DOM events directly from a\nchild element of a Component, we need to specify the <code>element</code> option to identify the Component property to add a\nDOM listener to:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>({\n    width: 400,\n    height: 200,\n    dockedItems: [{\n        xtype: 'toolbar'\n    }],\n    listeners: {\n        click: {\n            element: 'el', //bind to the underlying el property on the panel\n            fn: function(){ console.log('click el'); }\n        },\n        dblclick: {\n            element: 'body', //bind to the underlying body property on the panel\n            fn: function(){ console.log('dblclick body'); }\n        }\n    }\n});\n</code></pre>\n"},"model":{"!type":"string|+Ext.data.Model","!doc":"<p>The name of the Model to tie to this Proxy. Can be either the string name of the Model, or a reference to the\nModel constructor. Required.</p>\n"},"reader":{"!type":"?|string|+Ext.data.reader.Reader","!doc":"<p>The <a href=\"#!/api/Ext.data.reader.Reader\" rel=\"Ext.data.reader.Reader\" class=\"docClass\">Ext.data.reader.Reader</a> to use to decode the server's response or data read from client. This can either be a\nReader instance, a config object or just a valid Reader type name (e.g. 'json', 'xml').</p>\n"},"writer":{"!type":"?|string|+Ext.data.writer.Writer","!doc":"<p>The <a href=\"#!/api/Ext.data.writer.Writer\" rel=\"Ext.data.writer.Writer\" class=\"docClass\">Ext.data.writer.Writer</a> to use to encode any request sent to the server or saved to client. This can either be\na Writer instance, a config object or just a valid Writer type name (e.g. 'json', 'xml').</p>\n"}},"Ext_data_proxy_Rest_cfg":{"!proto":"Ext_data_proxy_Ajax_cfg","appendId":{"!type":"bool","!doc":"<p>True to automatically append the ID of a Model instance when performing a request based on that single instance.\nSee Rest proxy intro docs for more details. Defaults to true.</p>\n"},"batchActions":{"!type":"bool","!doc":"<p>True to batch actions of a particular type when synchronizing the store. Defaults to false.</p>\n"},"format":{"!type":"string","!doc":"<p>Optional data format to send to the server when making any request (e.g. 'json'). See the Rest proxy intro docs\nfor full details. Defaults to undefined.</p>\n"}},"Ext_data_proxy_Server_cfg":{"!proto":"Ext_data_proxy_Proxy_cfg","api":{"!type":"?","!doc":"<p>Specific urls to call on CRUD action methods \"create\", \"read\", \"update\" and \"destroy\". Defaults to:</p>\n\n<pre><code>api: {\n    create  : undefined,\n    read    : undefined,\n    update  : undefined,\n    destroy : undefined\n}\n</code></pre>\n\n<p>The url is built based upon the action being executed [create|read|update|destroy] using the commensurate\n<a href=\"#!/api/Ext.data.proxy.Server-cfg-api\" rel=\"Ext.data.proxy.Server-cfg-api\" class=\"docClass\">api</a> property, or if undefined default to the configured\n<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>.<a href=\"#!/api/Ext.data.proxy.Server-cfg-url\" rel=\"Ext.data.proxy.Server-cfg-url\" class=\"docClass\">url</a>.</p>\n\n<p>For example:</p>\n\n<pre><code>api: {\n    create  : '/controller/new',\n    read    : '/controller/load',\n    update  : '/controller/update',\n    destroy : '/controller/destroy_action'\n}\n</code></pre>\n\n<p>If the specific URL for a given CRUD action is undefined, the CRUD action request will be directed to the\nconfigured <a href=\"#!/api/Ext.data.proxy.Server-cfg-url\" rel=\"Ext.data.proxy.Server-cfg-url\" class=\"docClass\">url</a>.</p>\n"},"cacheString":{"!type":"string","!doc":"<p>The name of the cache param added to the url when using noCache. Defaults to \"_dc\".</p>\n"},"directionParam":{"!type":"string","!doc":"<p>The name of the direction parameter to send in a request. <strong>This is only used when simpleSortMode is set to\ntrue.</strong></p>\n"},"extraParams":{"!type":"?","!doc":"<p>Extra parameters that will be included on every request. Individual requests with params of the same name\nwill override these params when they are in conflict.</p>\n"},"filterParam":{"!type":"string","!doc":"<p>The name of the 'filter' parameter to send in a request. Defaults to 'filter'. Set this to undefined if you don't\nwant to send a filter parameter.</p>\n"},"groupDirectionParam":{"!type":"string","!doc":"<p>The name of the direction parameter to send in a request. <strong>This is only used when simpleGroupMode is set to\ntrue.</strong></p>\n"},"groupParam":{"!type":"string","!doc":"<p>The name of the 'group' parameter to send in a request. Defaults to 'group'. Set this to undefined if you don't\nwant to send a group parameter.</p>\n"},"idParam":{"!type":"string","!doc":"<p>The name of the parameter which carries the id of the entity being operated upon.</p>\n"},"limitParam":{"!type":"string","!doc":"<p>The name of the 'limit' parameter to send in a request. Defaults to 'limit'. Set this to undefined if you don't\nwant to send a limit parameter.</p>\n"},"noCache":{"!type":"bool","!doc":"<p>Disable caching by adding a unique parameter name to the request. Set to false to allow caching. Defaults to true.</p>\n"},"pageParam":{"!type":"string","!doc":"<p>The name of the 'page' parameter to send in a request. Defaults to 'page'. Set this to undefined if you don't\nwant to send a page parameter.</p>\n"},"simpleGroupMode":{"!type":"bool","!doc":"<p>Enabling simpleGroupMode in conjunction with remoteGroup will only send one group property and a direction when a\nremote group is requested. The <a href=\"#!/api/Ext.data.proxy.Server-cfg-groupDirectionParam\" rel=\"Ext.data.proxy.Server-cfg-groupDirectionParam\" class=\"docClass\">groupDirectionParam</a> and <a href=\"#!/api/Ext.data.proxy.Server-cfg-groupParam\" rel=\"Ext.data.proxy.Server-cfg-groupParam\" class=\"docClass\">groupParam</a> will be sent with the property name and either 'ASC'\nor 'DESC'.</p>\n"},"simpleSortMode":{"!type":"bool","!doc":"<p>Enabling simpleSortMode in conjunction with remoteSort will only send one sort property and a direction when a\nremote sort is requested. The <a href=\"#!/api/Ext.data.proxy.Server-cfg-directionParam\" rel=\"Ext.data.proxy.Server-cfg-directionParam\" class=\"docClass\">directionParam</a> and <a href=\"#!/api/Ext.data.proxy.Server-cfg-sortParam\" rel=\"Ext.data.proxy.Server-cfg-sortParam\" class=\"docClass\">sortParam</a> will be sent with the property name\nand either 'ASC' or 'DESC'.</p>\n"},"sortParam":{"!type":"string","!doc":"<p>The name of the 'sort' parameter to send in a request. Defaults to 'sort'. Set this to undefined if you don't\nwant to send a sort parameter.</p>\n"},"startParam":{"!type":"string","!doc":"<p>The name of the 'start' parameter to send in a request. Defaults to 'start'. Set this to undefined if you don't\nwant to send a start parameter.</p>\n"},"timeout":{"!type":"number","!doc":"<p>The number of milliseconds to wait for a response. Defaults to 30000 milliseconds (30 seconds).</p>\n"},"url":{"!type":"string","!doc":"<p>The URL from which to request the data object.</p>\n"}},"Ext_data_proxy_SessionStorage_cfg":{"!proto":"Ext_data_proxy_WebStorage_cfg"},"Ext_data_proxy_WebStorage_cfg":{"!proto":"Ext_data_proxy_Client_cfg","id":{"!type":"string","!doc":"<p>The unique ID used as the key in which all record data are stored in the local storage object.</p>\n"}},"Ext_data_reader_Json_cfg":{"!proto":"Ext_data_reader_Reader_cfg","metaProperty":{"!type":"string","!doc":"<p>Name of the property from which to retrieve the <code>metaData</code> attribute. See <a href=\"#!/api/Ext.data.reader.Json-property-metaData\" rel=\"Ext.data.reader.Json-property-metaData\" class=\"docClass\">metaData</a>.</p>\n"},"record":{"!type":"string","!doc":"<p>The optional location within the JSON response that the record data itself can be found at.\nSee the JsonReader intro docs for more details. This is not often needed.</p>\n"},"root":{"!type":"string","!doc":"<p>The name of the property which contains the data items corresponding to the Model(s) for which this\nReader is configured.  For JSON reader it's a property name (or a dot-separated list of property names\nif the root is nested).  For XML reader it's a CSS selector.  For Array reader the root is not applicable\nsince the data is assumed to be a single-level array of arrays.</p>\n\n<p>By default the natural root of the data will be used: the root JSON array, the root XML element, or the array.</p>\n\n<p>The data packet value for this property should be an empty array to clear the data or show no data.</p>\n"},"useSimpleAccessors":{"!type":"bool","!doc":"<p>True to ensure that field names/mappings are treated as literals when\nreading values.</p>\n\n<p>For example, by default, using the mapping \"foo.bar.baz\" will try and read a property foo from the root, then a property bar\nfrom foo, then a property baz from bar. Setting the simple accessors to true will read the property with the name\n\"foo.bar.baz\" direct from the root object.</p>\n"}},"Ext_data_reader_Reader_cfg":{"!proto":"Ext_Base_cfg","idProperty":{"!type":"string","!doc":"<p>Name of the property within a row object that contains a record identifier value. Defaults to the id of the\nmodel. If an idProperty is explicitly specified it will take precedence over idProperty defined on the model.</p>\n"},"implicitIncludes":{"!type":"bool","!doc":"<p>True to automatically parse models nested within other models in a response object. See the\n<a href=\"#!/api/Ext.data.reader.Reader\" rel=\"Ext.data.reader.Reader\" class=\"docClass\">Ext.data.reader.Reader</a> intro docs for full explanation.</p>\n"},"listeners":{"!type":"?","!doc":"<p>A config object containing one or more event handlers to be added to this object during initialization. This\nshould be a valid listeners config object as specified in the <a href=\"#!/api/Ext.util.Observable-method-addListener\" rel=\"Ext.util.Observable-method-addListener\" class=\"docClass\">addListener</a> example for attaching multiple\nhandlers at once.</p>\n\n<p><strong>DOM events from Ext JS <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Components</a></strong></p>\n\n<p>While <em>some</em> Ext JS Component classes export selected DOM events (e.g. \"click\", \"mouseover\" etc), this is usually\nonly done when extra value can be added. For example the <a href=\"#!/api/Ext.view.View\" rel=\"Ext.view.View\" class=\"docClass\">DataView</a>'s <strong><code><a href=\"#!/api/Ext.view.View-event-itemclick\" rel=\"Ext.view.View-event-itemclick\" class=\"docClass\">itemclick</a></code></strong> event passing the node clicked on. To access DOM events directly from a\nchild element of a Component, we need to specify the <code>element</code> option to identify the Component property to add a\nDOM listener to:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>({\n    width: 400,\n    height: 200,\n    dockedItems: [{\n        xtype: 'toolbar'\n    }],\n    listeners: {\n        click: {\n            element: 'el', //bind to the underlying el property on the panel\n            fn: function(){ console.log('click el'); }\n        },\n        dblclick: {\n            element: 'body', //bind to the underlying body property on the panel\n            fn: function(){ console.log('dblclick body'); }\n        }\n    }\n});\n</code></pre>\n"},"messageProperty":{"!type":"string","!doc":"<p>The name of the property which contains a response message. This property is optional.</p>\n"},"readRecordsOnFailure":{"!type":"bool","!doc":"<p>True to extract the records from a data packet even if the <a href=\"#!/api/Ext.data.reader.Reader-cfg-successProperty\" rel=\"Ext.data.reader.Reader-cfg-successProperty\" class=\"docClass\">successProperty</a> returns false.</p>\n"},"root":{"!type":"string","!doc":"<p>The name of the property which contains the data items corresponding to the Model(s) for which this\nReader is configured.  For JSON reader it's a property name (or a dot-separated list of property names\nif the root is nested).  For XML reader it's a CSS selector.  For Array reader the root is not applicable\nsince the data is assumed to be a single-level array of arrays.</p>\n\n<p>By default the natural root of the data will be used: the root JSON array, the root XML element, or the array.</p>\n\n<p>The data packet value for this property should be an empty array to clear the data or show no data.</p>\n"},"successProperty":{"!type":"string","!doc":"<p>Name of the property from which to retrieve the <code>success</code> attribute, the value of which indicates\nwhether a given request succeeded or failed (typically a boolean or 'true'|'false'). See\n<a href=\"#!/api/Ext.data.proxy.Server\" rel=\"Ext.data.proxy.Server\" class=\"docClass\">Ext.data.proxy.Server</a>.<a href=\"#!/api/Ext.data.proxy.Server-event-exception\" rel=\"Ext.data.proxy.Server-event-exception\" class=\"docClass\">exception</a> for additional information.</p>\n"},"totalProperty":{"!type":"string","!doc":"<p>Name of the property from which to retrieve the total number of records in the dataset. This is only needed if\nthe whole dataset is not passed in one go, but is being paged from the remote server.</p>\n"}},"Ext_data_reader_Xml_cfg":{"!proto":"Ext_data_reader_Reader_cfg","namespace":{"!type":"string","!doc":"<p>A namespace prefix that will be prepended to the field name when reading a\nfield from an XML node.  Take, for example, the following Model:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Foo', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['bar', 'baz']\n});\n</code></pre>\n\n<p>The reader would need to be configured with a namespace of 'n' in order to read XML\ndata in the following format:</p>\n\n<pre><code>&lt;foo&gt;\n    &lt;n:bar&gt;bar&lt;/n:bar&gt;\n    &lt;n:baz&gt;baz&lt;/n:baz&gt;\n&lt;/foo&gt;\n</code></pre>\n"},"record":{"!type":"string","!doc":"<p>The DomQuery path to the repeated element which contains record information.</p>\n\n<p>By default, the elements which match the selector may be nested at any level below the <a href=\"#!/api/Ext.data.reader.Xml-cfg-root\" rel=\"Ext.data.reader.Xml-cfg-root\" class=\"docClass\">root</a></p>\n\n<p>If this Reader is being used by a <a href=\"#!/api/Ext.data.TreeStore\" rel=\"Ext.data.TreeStore\" class=\"docClass\">TreeStore</a> to read tree-structured data,\nthen only first generation child nodes of the root element must be selected, so the record selector must be\nspecified with a more specific selector which will not select all descendants. For example:</p>\n\n<p>   record: '>node'</p>\n"}},"Ext_data_writer_Json_cfg":{"!proto":"Ext_data_writer_Writer_cfg","allowSingle":{"!type":"bool","!doc":"<p>Configure with <code>false</code> to ensure that records are always wrapped in an array, even if there is only\none record being sent. When there is more than one record, they will always be encoded into an array.</p>\n"},"encode":{"!type":"bool","!doc":"<p>Configure <code>true</code> to send record data (all record fields if <a href=\"#!/api/Ext.data.writer.Json-cfg-writeAllFields\" rel=\"Ext.data.writer.Json-cfg-writeAllFields\" class=\"docClass\">writeAllFields</a> is <code>true</code>)\nas a JSON encoded HTTP parameter named by the <a href=\"#!/api/Ext.data.writer.Json-cfg-root\" rel=\"Ext.data.writer.Json-cfg-root\" class=\"docClass\">root</a> configuration.</p>\n\n<p>The encode option should only be set to true when a <a href=\"#!/api/Ext.data.writer.Json-cfg-root\" rel=\"Ext.data.writer.Json-cfg-root\" class=\"docClass\">root</a> is defined, because the values will be\nsent as part of the request parameters as opposed to a raw post. The root will be the name of the parameter\nsent to the server.</p>\n"},"expandData":{"!type":"bool","!doc":"<p>By default, when dot-delimited field <a href=\"#!/api/Ext.data.writer.Json-cfg-nameProperty\" rel=\"Ext.data.writer.Json-cfg-nameProperty\" class=\"docClass\">mappings</a> are\nused (e.g. <code>name: 'myProperty', mapping: 'my.nested.property'</code>) the writer will simply output a flat data\nobject containing the mapping string literal as the property name (e.g. <code>{ 'my.nested.property': 'foo' }</code>).</p>\n\n<p>Mappings are used to map incoming nested JSON to flat Ext models. In many case, the data output by the\nwriter should preferrably match the original nested data format. Setting this config to <code>true</code> will ensure\nthat the output will instead look like <code>{ my: { nested: { property: 'foo' }}}</code>. The output is generated\nby <a href=\"#!/api/Ext.data.writer.Json-method-getExpandedData\" rel=\"Ext.data.writer.Json-method-getExpandedData\" class=\"docClass\">getExpandedData</a>, which can optionally be overridden to apply more customized logic.</p>\n"},"root":{"!type":"string","!doc":"<p>The HTTP parameter name by which JSON encoded records will be passed to the server if the\n<a href=\"#!/api/Ext.data.writer.Json-cfg-encode\" rel=\"Ext.data.writer.Json-cfg-encode\" class=\"docClass\">encode</a> option is <code>true</code>.</p>\n"}},"Ext_data_writer_Writer_cfg":{"!proto":"Ext_Base_cfg","dateFormat":{"!type":"string","!doc":"<p>This is used for each field of type date in the model to format the value before\nit is sent to the server.</p>\n"},"nameProperty":{"!type":"string","!doc":"<p>This property is used to read the key for each value that will be sent to the server. For example:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Person', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: [{\n        name: 'first',\n        mapping: 'firstName'\n    }, {\n        name: 'last',\n        mapping: 'lastName'\n    }, {\n        name: 'age'\n    }]\n});\nnew <a href=\"#!/api/Ext.data.writer.Writer\" rel=\"Ext.data.writer.Writer\" class=\"docClass\">Ext.data.writer.Writer</a>({\n    writeAllFields: true,\n    nameProperty: 'mapping'\n});\n\n// This will be sent to the server\n{\n    firstName: 'first name value',\n    lastName: 'last name value',\n    age: 1\n}\n</code></pre>\n\n<p>If the value is not present, the field name will always be used.</p>\n"},"writeAllFields":{"!type":"bool","!doc":"<p>True to write all fields from the record to the server. If set to false it will only send the fields that were\nmodified. Note that any fields that have <a href=\"#!/api/Ext.data.Field-cfg-persist\" rel=\"Ext.data.Field-cfg-persist\" class=\"docClass\">Ext.data.Field.persist</a> set to false will still be ignored.</p>\n"},"writeRecordId":{"!type":"bool","!doc":"<p>By default, each record's id is always included in the output for non-phantom records since in most\ncases the id will be required on the server to process the record action. This is helpful since the id\nwill normally not be modified, and so would not be sent to the server unless <a href=\"#!/api/Ext.data.writer.Writer-cfg-writeAllFields\" rel=\"Ext.data.writer.Writer-cfg-writeAllFields\" class=\"docClass\">writeAllFields</a>\nwas explicitly enabled.</p>\n\n<p>However, there are cases where it is not desirable for the record id to be passed in the data directly.\nFor example, when using a RESTful API the record id would typically be appended to the url instead.</p>\n"}},"Ext_data_writer_Xml_cfg":{"!proto":"Ext_data_writer_Writer_cfg","defaultDocumentRoot":{"!type":"string","!doc":"<p>The root to be used if <a href=\"#!/api/Ext.data.writer.Xml-cfg-documentRoot\" rel=\"Ext.data.writer.Xml-cfg-documentRoot\" class=\"docClass\">documentRoot</a> is empty and a root is required\nto form a valid XML document.</p>\n"},"documentRoot":{"!type":"string","!doc":"<p>The name of the root element of the document. Defaults to <tt>'xmlData'</tt>.\nIf there is more than 1 record and the root is not specified, the default document root will still be used\nto ensure a valid XML document is created.</p>\n"},"header":{"!type":"string","!doc":"<p>A header to use in the XML document (such as setting the encoding or version).\nDefaults to <tt>''</tt>.</p>\n"},"record":{"!type":"string","!doc":"<p>The name of the node to use for each record. Defaults to <tt>'record'</tt>.</p>\n"}},"Ext_dd_DD_cfg":{"!proto":"Ext_dd_DragDrop_cfg"},"Ext_dd_DDProxy_cfg":{"!proto":"Ext_dd_DD_cfg"},"Ext_dd_DDTarget_cfg":{"!proto":"Ext_dd_DragDrop_cfg"},"Ext_dd_DragDrop_cfg":{"!proto":"Ext_Base_cfg"},"Ext_dd_DragSource_cfg":{"!proto":"Ext_dd_DDProxy_cfg","animRepair":{"!type":"bool","!doc":"<p>If true, animates the proxy element back to the position of the handle element used to trigger the drag.</p>\n"},"ddGroup":{"!type":"string","!doc":"<p>A named drag drop group to which this object belongs.  If a group is specified, then this object will only\ninteract with other drag drop objects in the same group.</p>\n"},"dropAllowed":{"!type":"string","!doc":"<p>The CSS class returned to the drag source when drop is allowed.</p>\n"},"dropNotAllowed":{"!type":"string","!doc":"<p>The CSS class returned to the drag source when drop is not allowed.</p>\n"},"repairHighlightColor":{"!type":"string","!doc":"<p>The color to use when visually highlighting the drag source in the afterRepair\nmethod after a failed drop (defaults to light blue). The color must be a 6 digit hex value, without\na preceding '#'.</p>\n"}},"Ext_dd_DragZone_cfg":{"!proto":"Ext_dd_DragSource_cfg","containerScroll":{"!type":"?|bool","!doc":"<p>True to register this container with the Scrollmanager for auto scrolling during drag operations.\nA <a href=\"#!/api/Ext.dd.ScrollManager\" rel=\"Ext.dd.ScrollManager\" class=\"docClass\">Ext.dd.ScrollManager</a> configuration may also be passed.</p>\n"},"scrollEl":{"!type":"string|+HTMLElement|+Ext.dom.Element","!doc":"<p>An element to register with the ScrollManager if <a href=\"#!/api/Ext.dd.DragZone-cfg-containerScroll\" rel=\"Ext.dd.DragZone-cfg-containerScroll\" class=\"docClass\">containerScroll</a>\nis set. Defaults to the drag element.</p>\n"}},"Ext_dd_DropTarget_cfg":{"!proto":"Ext_dd_DDTarget_cfg","ddGroup":{"!type":"string","!doc":"<p>A named drag drop group to which this object belongs.  If a group is specified, then this object will only\ninteract with other drag drop objects in the same group.</p>\n"},"dropAllowed":{"!type":"string","!doc":"<p>The CSS class returned to the drag source when drop is allowed.</p>\n"},"dropNotAllowed":{"!type":"string","!doc":"<p>The CSS class returned to the drag source when drop is not allowed.</p>\n"},"overClass":{"!type":"string","!doc":"<p>The CSS class applied to the drop target element while the drag source is over it.</p>\n"}},"Ext_dd_DropZone_cfg":{"!proto":"Ext_dd_DropTarget_cfg"},"Ext_dd_StatusProxy_cfg":{"!proto":"Ext_Component_cfg","dropAllowed":{"!type":"string","!doc":"<p>The CSS class to apply to the status element when drop is allowed.</p>\n"},"dropNotAllowed":{"!type":"string","!doc":"<p>The CSS class to apply to the status element when drop is not allowed.</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.dd.StatusProxy-method-getEl\" rel=\"Ext.dd.StatusProxy-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.dd.StatusProxy-method-getEl\" rel=\"Ext.dd.StatusProxy-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.dd.StatusProxy-cfg-renderSelectors\" rel=\"Ext.dd.StatusProxy-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.dd.StatusProxy-cfg-childEls\" rel=\"Ext.dd.StatusProxy-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"}},"Ext_direct_Event_cfg":{"!proto":"Ext_Base_cfg"},"Ext_direct_ExceptionEvent_cfg":{"!proto":"Ext_direct_RemotingEvent_cfg"},"Ext_direct_RemotingEvent_cfg":{"!proto":"Ext_direct_Event_cfg"},"Ext_direct_RemotingMethod_cfg":{"!proto":"Ext_Base_cfg"},"Ext_direct_Transaction_cfg":{"!proto":"Ext_Base_cfg","provider":{"!type":"+Ext.direct.Provider","!doc":"<p>Provider to use with this Transaction.</p>\n"}},"Ext_dom_Layer_cfg":{"!proto":"Ext_Element_cfg","cls":{"!type":"string","!doc":"<p>CSS class to add to the element</p>\n"},"constrain":{"!type":"bool","!doc":"<p>False to disable constrain to viewport.</p>\n"},"dh":{"!type":"?","!doc":"<p>DomHelper object config to create element with.</p>\n"},"hideMode":{"!type":"string","!doc":"<p>A String which specifies how this Layer will be hidden.\nValues may be:</p>\n\n<ul>\n<li><code>'display'</code> : The Component will be hidden using the <code>display: none</code> style.</li>\n<li><code>'visibility'</code> : The Component will be hidden using the <code>visibility: hidden</code> style.</li>\n<li><code>'offsets'</code> : The Component will be hidden by absolutely positioning it out of the visible area\nof the document. This is useful when a hidden Component must maintain measurable dimensions.\nHiding using <code>display</code> results in a Component having zero dimensions.</li>\n</ul>\n\n"},"shadow":{"!type":"string|bool","!doc":"<p>True to automatically create an <a href=\"#!/api/Ext.Shadow\" rel=\"Ext.Shadow\" class=\"docClass\">Ext.Shadow</a>, or a string indicating the\nshadow's display <a href=\"#!/api/Ext.Shadow-cfg-mode\" rel=\"Ext.Shadow-cfg-mode\" class=\"docClass\">Ext.Shadow.mode</a>. False to disable the shadow.</p>\n"},"shadowOffset":{"!type":"number","!doc":"<p>Number of pixels to offset the shadow</p>\n"},"shim":{"!type":"bool","!doc":"<p>False to disable the iframe shim in browsers which need one.</p>\n"},"useDisplay":{"!type":"bool","!doc":"<p>Defaults to use css offsets to hide the Layer. Specify <tt>true</tt>\nto use css style <tt>'display:none;'</tt> to hide the Layer.</p>\n"},"visibilityCls":{"!type":"string","!doc":"<p>The CSS class name to add in order to hide this Layer if this layer\nis configured with <code><a href=\"#!/api/Ext.dom.Layer-cfg-hideMode\" rel=\"Ext.dom.Layer-cfg-hideMode\" class=\"docClass\">hideMode</a>: 'asclass'</code></p>\n"},"zindex":{"!type":"number","!doc":"<p>Starting z-index.</p>\n"}},"Ext_draw_Component_cfg":{"!proto":"Ext_Component_cfg","autoSize":{"!type":"bool","!doc":"<p>Turn on autoSize support which will set the bounding div's size to the natural size of the contents.</p>\n"},"baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this component's element. This will also be prepended to elements within this\ncomponent like Panel's body will get a class <code>x-panel-body</code>. This means that if you create a subclass of Panel, and\nyou want it to get all the Panels styling for the element and the body, you leave the <code>baseCls</code> <code>x-panel</code> and use\n<code>componentCls</code> to add specific styling for this component.</p>\n"},"componentLayout":{"!type":"string|?","!doc":"<p>The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout\nmanager which sizes a Component's internal structure in response to the Component being sized.</p>\n\n<p>Generally, developers will not use this configuration as all provided Components which need their internal\nelements sizing (Such as <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">input fields</a>) come with their own componentLayout managers.</p>\n\n<p>The <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used on instances of the base <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\nclass which simply sizes the Component's encapsulating element to the height and width specified in the\n<a href=\"#!/api/Ext.draw.Component-method-setSize\" rel=\"Ext.draw.Component-method-setSize\" class=\"docClass\">setSize</a> method.</p>\n"},"enginePriority":{"!type":"[string]","!doc":"<p>Defines the priority order for which Surface implementation to use. The first\none supported by the current environment will be used.</p>\n"},"gradients":{"!type":"[?]","!doc":"<p>(optional) Define a set of gradients that can be used as <code>fill</code> property in sprites.\nThe gradients array is an array of objects with the following properties:</p>\n\n<ul>\n<li><code>id</code> - string - The unique name of the gradient.</li>\n<li><code>angle</code> - number, optional - The angle of the gradient in degrees.</li>\n<li><code>stops</code> - object - An object with numbers as keys (from 0 to 100) and style objects as values</li>\n</ul>\n\n\n<h2>Example</h2>\n\n<pre><code>gradients: [{\n    id: 'gradientId',\n    angle: 45,\n    stops: {\n        0: {\n            color: '#555'\n        },\n        100: {\n            color: '#ddd'\n        }\n    }\n}, {\n    id: 'gradientId2',\n    angle: 0,\n    stops: {\n        0: {\n            color: '#590'\n        },\n        20: {\n            color: '#599'\n        },\n        100: {\n            color: '#ddd'\n        }\n    }\n}]\n</code></pre>\n\n<p>Then the sprites can use <code>gradientId</code> and <code>gradientId2</code> by setting the fill attributes to those ids, for example:</p>\n\n<pre><code>sprite.setAttributes({\n    fill: 'url(#gradientId)'\n}, true);\n</code></pre>\n"},"items":{"!type":"[+Ext.draw.Sprite]","!doc":"<p>Array of sprites or sprite config objects to add initially to the surface.</p>\n"},"shrinkWrap":{"!type":"bool|number","!doc":"<p>If this property is a number, it is interpreted as follows:</p>\n\n<ul>\n<li>0: Neither width nor height depend on content. This is equivalent to <code>false</code>.</li>\n<li>1: Width depends on content (shrink wraps), but height does not.</li>\n<li>2: Height depends on content (shrink wraps), but width does not. The default.</li>\n<li>3: Both width and height depend on content (shrink wrap). This is equivalent to <code>true</code>.</li>\n</ul>\n\n\n<p>In CSS terms, shrink-wrap width is analogous to an inline-block element as opposed\nto a block-level element. Some container layouts always shrink-wrap their children,\neffectively ignoring this property (e.g., <a href=\"#!/api/Ext.layout.container.HBox\" rel=\"Ext.layout.container.HBox\" class=\"docClass\">Ext.layout.container.HBox</a>,\n<a href=\"#!/api/Ext.layout.container.VBox\" rel=\"Ext.layout.container.VBox\" class=\"docClass\">Ext.layout.container.VBox</a>, <a href=\"#!/api/Ext.layout.component.Dock\" rel=\"Ext.layout.component.Dock\" class=\"docClass\">Ext.layout.component.Dock</a>).</p>\n"},"viewBox":{"!type":"bool","!doc":"<p>Turn on view box support which will scale and position items in the draw component to fit to the component while\nmaintaining aspect ratio. Note that this scaling can override other sizing settings on your items.</p>\n"}},"Ext_draw_CompositeSprite_cfg":{"!proto":"Ext_util_MixedCollection_cfg"},"Ext_draw_Sprite_cfg":{"!proto":"Ext_Base_cfg","draggable":{"!type":"bool","!doc":"<p>True to make the sprite draggable.</p>\n"},"fill":{"!type":"string","!doc":"<p>The fill color.</p>\n"},"font":{"!type":"string","!doc":"<p>Used with text type sprites. The full font description.\nUses the same syntax as the CSS font parameter</p>\n"},"group":{"!type":"string|[string]","!doc":"<p>The group that this sprite belongs to, or an array of groups.\nOnly relevant when added to a <a href=\"#!/api/Ext.draw.Surface\" rel=\"Ext.draw.Surface\" class=\"docClass\">Surface</a>.</p>\n"},"height":{"!type":"number","!doc":"<p>The height of the rect or image sprite.</p>\n"},"listeners":{"!type":"?","!doc":"<p>A config object containing one or more event handlers to be added to this object during initialization. This\nshould be a valid listeners config object as specified in the <a href=\"#!/api/Ext.util.Observable-method-addListener\" rel=\"Ext.util.Observable-method-addListener\" class=\"docClass\">addListener</a> example for attaching multiple\nhandlers at once.</p>\n\n<p><strong>DOM events from Ext JS <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Components</a></strong></p>\n\n<p>While <em>some</em> Ext JS Component classes export selected DOM events (e.g. \"click\", \"mouseover\" etc), this is usually\nonly done when extra value can be added. For example the <a href=\"#!/api/Ext.view.View\" rel=\"Ext.view.View\" class=\"docClass\">DataView</a>'s <strong><code><a href=\"#!/api/Ext.view.View-event-itemclick\" rel=\"Ext.view.View-event-itemclick\" class=\"docClass\">itemclick</a></code></strong> event passing the node clicked on. To access DOM events directly from a\nchild element of a Component, we need to specify the <code>element</code> option to identify the Component property to add a\nDOM listener to:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>({\n    width: 400,\n    height: 200,\n    dockedItems: [{\n        xtype: 'toolbar'\n    }],\n    listeners: {\n        click: {\n            element: 'el', //bind to the underlying el property on the panel\n            fn: function(){ console.log('click el'); }\n        },\n        dblclick: {\n            element: 'body', //bind to the underlying body property on the panel\n            fn: function(){ console.log('dblclick body'); }\n        }\n    }\n});\n</code></pre>\n"},"opacity":{"!type":"number","!doc":"<p>The opacity of the sprite. A number between 0 and 1.</p>\n"},"path":{"!type":"string","!doc":"<p>The path of the path sprite written in SVG-like path syntax.</p>\n"},"radius":{"!type":"number","!doc":"<p>The radius of the circle sprite. Or in case of rect sprite, the border radius.</p>\n"},"radiusX":{"!type":"number","!doc":"<p>The radius of the ellipse sprite along x-axis.</p>\n"},"radiusY":{"!type":"number","!doc":"<p>The radius of the ellipse sprite along y-axis.</p>\n"},"src":{"!type":"string","!doc":"<p>Path to the image to show in image sprites.</p>\n"},"stroke":{"!type":"string","!doc":"<p>The stroke color.</p>\n"},"stroke-width":{"!type":"number","!doc":"<p>The width of the stroke.</p>\n\n<p>Note that this attribute needs to be quoted when used.  Like so:</p>\n\n<pre><code>\"stroke-width\": 12,\n</code></pre>\n"},"text":{"!type":"string","!doc":"<p>The actual text to render in text sprites.</p>\n"},"type":{"!type":"string","!doc":"<p>The type of the sprite.\nPossible options are 'circle', 'ellipse', 'path', 'rect', 'text', 'image'.</p>\n\n<p>See <a href=\"#!/api/Ext.draw.Sprite\" rel=\"Ext.draw.Sprite\" class=\"docClass\">Ext.draw.Sprite</a> class documentation for examples of all types.</p>\n"},"width":{"!type":"number","!doc":"<p>The width of the rect or image sprite.</p>\n"},"x":{"!type":"number","!doc":"<p>Sprite position along the x-axis.</p>\n"},"y":{"!type":"number","!doc":"<p>Sprite position along the y-axis.</p>\n"}},"Ext_draw_Surface_cfg":{"!proto":"Ext_Base_cfg","height":{"!type":"number","!doc":"<p>The height of this component in pixels (defaults to auto).</p>\n"},"items":{"!type":"[+Ext.draw.Sprite]","!doc":"<p>Array of sprites or sprite config objects to add initially to the surface.</p>\n"},"listeners":{"!type":"?","!doc":"<p>A config object containing one or more event handlers to be added to this object during initialization. This\nshould be a valid listeners config object as specified in the <a href=\"#!/api/Ext.util.Observable-method-addListener\" rel=\"Ext.util.Observable-method-addListener\" class=\"docClass\">addListener</a> example for attaching multiple\nhandlers at once.</p>\n\n<p><strong>DOM events from Ext JS <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Components</a></strong></p>\n\n<p>While <em>some</em> Ext JS Component classes export selected DOM events (e.g. \"click\", \"mouseover\" etc), this is usually\nonly done when extra value can be added. For example the <a href=\"#!/api/Ext.view.View\" rel=\"Ext.view.View\" class=\"docClass\">DataView</a>'s <strong><code><a href=\"#!/api/Ext.view.View-event-itemclick\" rel=\"Ext.view.View-event-itemclick\" class=\"docClass\">itemclick</a></code></strong> event passing the node clicked on. To access DOM events directly from a\nchild element of a Component, we need to specify the <code>element</code> option to identify the Component property to add a\nDOM listener to:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>({\n    width: 400,\n    height: 200,\n    dockedItems: [{\n        xtype: 'toolbar'\n    }],\n    listeners: {\n        click: {\n            element: 'el', //bind to the underlying el property on the panel\n            fn: function(){ console.log('click el'); }\n        },\n        dblclick: {\n            element: 'body', //bind to the underlying body property on the panel\n            fn: function(){ console.log('dblclick body'); }\n        }\n    }\n});\n</code></pre>\n"},"width":{"!type":"number","!doc":"<p>The width of this component in pixels (defaults to auto).</p>\n"}},"Ext_draw_engine_Svg_cfg":{"!proto":"Ext_draw_Surface_cfg"},"Ext_draw_engine_Vml_cfg":{"!proto":"Ext_draw_Surface_cfg"},"Ext_flash_Component_cfg":{"!proto":"Ext_Component_cfg","backgroundColor":{"!type":"string","!doc":"<p>The background color of the SWF movie.</p>\n"},"expressInstall":{"!type":"bool","!doc":"<p>True to prompt the user to install flash if not installed. Note that this uses\n<a href=\"#!/api/Ext.flash.Component-static-property-EXPRESS_INSTALL_URL\" rel=\"Ext.flash.Component-static-property-EXPRESS_INSTALL_URL\" class=\"docClass\">Ext.FlashComponent.EXPRESS_INSTALL_URL</a>, which should be set to the local resource.</p>\n"},"flashAttributes":{"!type":"?","!doc":"<p>A set of key value pairs to be passed to the flash object as attributes.</p>\n"},"flashParams":{"!type":"?","!doc":"<p>A set of key value pairs to be passed to the flash object as parameters. Possible parameters can be found here:\nhttp://kb2.adobe.com/cps/127/tn_12701.html</p>\n"},"flashVars":{"!type":"?","!doc":"<p>A set of key value pairs to be passed to the flash object as flash variables.</p>\n"},"flashVersion":{"!type":"string","!doc":"<p>Indicates the version the flash content was published for.</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>Have to create a placeholder div with the swfId, which SWFObject will replace with the object/embed element.</p>\n"},"swfHeight":{"!type":"string|number","!doc":"<p>The height of the embedded SWF movie inside the component.</p>\n\n<p>Defaults to \"100%\" so that the movie matches the height of the component.</p>\n"},"swfWidth":{"!type":"string|number","!doc":"<p>The width of the embedded SWF movie inside the component.</p>\n\n<p>Defaults to \"100%\" so that the movie matches the width of the component.</p>\n"},"url":{"!type":"string","!doc":"<p>The URL of the SWF file to include.</p>\n"},"wmode":{"!type":"string","!doc":"<p>The wmode of the flash object. This can be used to control layering.\nSet to 'transparent' to ignore the <a href=\"#!/api/Ext.flash.Component-cfg-backgroundColor\" rel=\"Ext.flash.Component-cfg-backgroundColor\" class=\"docClass\">backgroundColor</a> and make the background of the Flash\nmovie transparent.</p>\n"}},"Ext_form_Basic_cfg":{"!proto":"Ext_util_Observable_cfg","api":{"!type":"?","!doc":"<p>If specified, load and submit actions will be handled with <a href=\"#!/api/Ext.form.action.DirectLoad\" rel=\"Ext.form.action.DirectLoad\" class=\"docClass\">DirectLoad</a>\nand <a href=\"#!/api/Ext.form.action.DirectSubmit\" rel=\"Ext.form.action.DirectSubmit\" class=\"docClass\">DirectSubmit</a>.  Methods which have been imported by\n<a href=\"#!/api/Ext.direct.Manager\" rel=\"Ext.direct.Manager\" class=\"docClass\">Ext.direct.Manager</a> can be specified here to load and submit forms. API methods may also be\nspecified as strings. See <a href=\"#!/api/Ext.data.proxy.Direct-cfg-directFn\" rel=\"Ext.data.proxy.Direct-cfg-directFn\" class=\"docClass\">Ext.data.proxy.Direct.directFn</a>.  Such as the following:</p>\n\n<pre><code>api: {\n    load: App.ss.MyProfile.load,\n    submit: App.ss.MyProfile.submit\n}\n</code></pre>\n\n<p>Load actions can use <a href=\"#!/api/Ext.form.Basic-cfg-paramOrder\" rel=\"Ext.form.Basic-cfg-paramOrder\" class=\"docClass\">paramOrder</a> or <a href=\"#!/api/Ext.form.Basic-cfg-paramsAsHash\" rel=\"Ext.form.Basic-cfg-paramsAsHash\" class=\"docClass\">paramsAsHash</a> to customize how the load method\nis invoked.  Submit actions will always use a standard form submit. The <code>formHandler</code> configuration\n(see Ext.direct.RemotingProvider#action) must be set on the associated server-side method which has\nbeen imported by <a href=\"#!/api/Ext.direct.Manager\" rel=\"Ext.direct.Manager\" class=\"docClass\">Ext.direct.Manager</a>.</p>\n"},"baseParams":{"!type":"?","!doc":"<p>Parameters to pass with all requests. e.g. baseParams: <code>{id: '123', foo: 'bar'}</code>.</p>\n\n<p>Parameters are encoded as standard HTTP parameters using <a href=\"#!/api/Ext.Object-method-toQueryString\" rel=\"Ext.Object-method-toQueryString\" class=\"docClass\">Ext.Object.toQueryString</a>.</p>\n"},"errorReader":{"!type":"?|+Ext.data.reader.Reader","!doc":"<p>An <a href=\"#!/api/Ext.data.reader.Reader\" rel=\"Ext.data.reader.Reader\" class=\"docClass\">Ext.data.reader.Reader</a> (e.g. <a href=\"#!/api/Ext.data.reader.Xml\" rel=\"Ext.data.reader.Xml\" class=\"docClass\">Ext.data.reader.Xml</a>) instance or\nconfiguration to be used to read field error messages returned from 'submit' actions.\nThis is optional as there is built-in support for processing JSON responses.</p>\n\n<p>The Records which provide messages for the invalid Fields must use the\nField name (or id) as the Record ID, and must contain a field called 'msg'\nwhich contains the error message.</p>\n\n<p>The errorReader does not have to be a full-blown implementation of a\nReader. It simply needs to implement a <code>read(xhr)</code> function\nwhich returns an Array of Records in an object with the following\nstructure:</p>\n\n<pre><code>{\n    records: recordArray\n}\n</code></pre>\n"},"jsonSubmit":{"!type":"bool","!doc":"<p>If set to true, the field values are sent as JSON in the request body.\nAll of the field values, plus any additional params configured via <a href=\"#!/api/Ext.form.Basic-cfg-baseParams\" rel=\"Ext.form.Basic-cfg-baseParams\" class=\"docClass\">baseParams</a>\nand/or the <code>options</code> to <a href=\"#!/api/Ext.form.Basic-method-submit\" rel=\"Ext.form.Basic-method-submit\" class=\"docClass\">submit</a>, will be included in the values POSTed in the body of the request.</p>\n"},"method":{"!type":"string","!doc":"<p>The request method to use (GET or POST) for form actions if one isn't supplied in the action options.</p>\n"},"paramOrder":{"!type":"string|[string]","!doc":"<p>A list of params to be executed server side. Only used for the <a href=\"#!/api/Ext.form.Basic-cfg-api\" rel=\"Ext.form.Basic-cfg-api\" class=\"docClass\">api</a> <code>load</code>\nconfiguration.</p>\n\n<p>Specify the params in the order in which they must be executed on the\nserver-side as either (1) an Array of String values, or (2) a String of params\ndelimited by either whitespace, comma, or pipe. For example,\nany of the following would be acceptable:</p>\n\n<pre><code>paramOrder: ['param1','param2','param3']\nparamOrder: 'param1 param2 param3'\nparamOrder: 'param1,param2,param3'\nparamOrder: 'param1|param2|param'\n</code></pre>\n"},"paramsAsHash":{"!type":"bool","!doc":"<p>Only used for the <a href=\"#!/api/Ext.form.Basic-cfg-api\" rel=\"Ext.form.Basic-cfg-api\" class=\"docClass\">api</a> <code>load</code> configuration. If true, parameters will be sent as a\nsingle hash collection of named arguments. Providing a <a href=\"#!/api/Ext.form.Basic-cfg-paramOrder\" rel=\"Ext.form.Basic-cfg-paramOrder\" class=\"docClass\">paramOrder</a> nullifies this\nconfiguration.</p>\n"},"reader":{"!type":"?|+Ext.data.reader.Reader","!doc":"<p>An <a href=\"#!/api/Ext.data.reader.Reader\" rel=\"Ext.data.reader.Reader\" class=\"docClass\">Ext.data.reader.Reader</a> (e.g. <a href=\"#!/api/Ext.data.reader.Xml\" rel=\"Ext.data.reader.Xml\" class=\"docClass\">Ext.data.reader.Xml</a>) instance or\nconfiguration to be used to read data when executing 'load' actions. This\nis optional as there is built-in support for processing JSON responses.</p>\n"},"standardSubmit":{"!type":"bool","!doc":"<p>If set to true, a standard HTML form submit is used instead of a XHR (Ajax) style form submission.\nAll of the field values, plus any additional params configured via <a href=\"#!/api/Ext.form.Basic-cfg-baseParams\" rel=\"Ext.form.Basic-cfg-baseParams\" class=\"docClass\">baseParams</a>\nand/or the <code>options</code> to <a href=\"#!/api/Ext.form.Basic-method-submit\" rel=\"Ext.form.Basic-method-submit\" class=\"docClass\">submit</a>, will be included in the values submitted in the form.</p>\n"},"timeout":{"!type":"number","!doc":"<p>Timeout for form actions in seconds.</p>\n"},"trackResetOnLoad":{"!type":"bool","!doc":"<p>If set to true, <a href=\"#!/api/Ext.form.Basic-method-reset\" rel=\"Ext.form.Basic-method-reset\" class=\"docClass\">reset</a>() resets to the last loaded or <a href=\"#!/api/Ext.form.Basic-method-setValues\" rel=\"Ext.form.Basic-method-setValues\" class=\"docClass\">setValues</a>() data instead of\nwhen the form was first created.</p>\n"},"url":{"!type":"string","!doc":"<p>The URL to use for form actions if one isn't supplied in the\n<a href=\"#!/api/Ext.form.Basic-method-doAction\" rel=\"Ext.form.Basic-method-doAction\" class=\"docClass\">doAction</a> options.</p>\n"},"waitMsgTarget":{"!type":"string|+HTMLElement|+Ext.Element","!doc":"<p>By default wait messages are displayed with <a href=\"#!/api/Ext.MessageBox-method-wait\" rel=\"Ext.MessageBox-method-wait\" class=\"docClass\">Ext.MessageBox.wait</a>. You can target a specific\nelement by passing it or its id or mask the form itself by passing in true.</p>\n"},"waitTitle":{"!type":"string","!doc":"<p>The default title to show for the waiting message box</p>\n"}},"Ext_form_CheckboxGroup_cfg":{"!proto":"Ext_form_FieldContainer_cfg","allowBlank":{"!type":"bool","!doc":"<p>False to validate that at least one item in the group is checked. If no items are selected at\nvalidation time, <a href=\"#!/api/Ext.form.CheckboxGroup-cfg-blankText\" rel=\"Ext.form.CheckboxGroup-cfg-blankText\" class=\"docClass\">blankText</a> will be used as the error text.</p>\n"},"blankText":{"!type":"string","!doc":"<p>Error text to display if the <a href=\"#!/api/Ext.form.CheckboxGroup-cfg-allowBlank\" rel=\"Ext.form.CheckboxGroup-cfg-allowBlank\" class=\"docClass\">allowBlank</a> validation fails</p>\n"},"columns":{"!type":"string|number|[number]","!doc":"<p>Specifies the number of columns to use when displaying grouped checkbox/radio controls using automatic layout.\nThis config can take several types of values:</p>\n\n<ul>\n<li>'auto' - The controls will be rendered one per column on one row and the width of each column will be evenly\ndistributed based on the width of the overall field container. This is the default.</li>\n<li>Number - If you specific a number (e.g., 3) that number of columns will be created and the contained controls\nwill be automatically distributed based on the value of <a href=\"#!/api/Ext.form.CheckboxGroup-cfg-vertical\" rel=\"Ext.form.CheckboxGroup-cfg-vertical\" class=\"docClass\">vertical</a>.</li>\n<li>Array - You can also specify an array of column widths, mixing integer (fixed width) and float (percentage\nwidth) values as needed (e.g., [100, .25, .75]). Any integer values will be rendered first, then any float\nvalues will be calculated as a percentage of the remaining space. Float values do not have to add up to 1\n(100%) although if you want the controls to take up the entire field container you should do so.</li>\n</ul>\n\n"},"componentCls":{"!type":"string","!doc":"<p>CSS Class to be added to a components root level element to give distinction to it via styling.</p>\n"},"defaultType":{"!type":"string","!doc":"<p>private</p>\n"},"disabled":{"!type":"bool","!doc":"<p>True to disable the field. Disabled Fields will not be <a href=\"#!/api/Ext.form.Basic-method-submit\" rel=\"Ext.form.Basic-method-submit\" class=\"docClass\">submitted</a>.</p>\n"},"items":{"!type":"[+Ext.form.field.Checkbox]|[?]","!doc":"<p>An Array of <a href=\"#!/api/Ext.form.field.Checkbox\" rel=\"Ext.form.field.Checkbox\" class=\"docClass\">Checkbox</a>es or Checkbox config objects to arrange in the group.</p>\n"},"layout":{"!type":"+Ext.enums.Layout|?","!doc":"<p>private</p>\n"},"name":{"!type":"string"},"submitValue":{"!type":"bool","!doc":"<p>Setting this to false will prevent the field from being <a href=\"#!/api/Ext.form.Basic-method-submit\" rel=\"Ext.form.Basic-method-submit\" class=\"docClass\">submitted</a> even when it is\nnot disabled.</p>\n"},"validateOnChange":{"!type":"bool","!doc":"<p>Specifies whether this field should be validated immediately whenever a change in its value is detected.\nIf the validation results in a change in the field's validity, a <a href=\"#!/api/Ext.form.field.Field-event-validitychange\" rel=\"Ext.form.field.Field-event-validitychange\" class=\"docClass\">validitychange</a> event will be\nfired. This allows the field to show feedback about the validity of its contents immediately as the user is\ntyping.</p>\n\n<p>When set to false, feedback will not be immediate. However the form will still be validated before submitting if\nthe clientValidation option to <a href=\"#!/api/Ext.form.Basic-method-doAction\" rel=\"Ext.form.Basic-method-doAction\" class=\"docClass\">Ext.form.Basic.doAction</a> is enabled, or if the field or form are validated\nmanually.</p>\n\n<p>See also <a href=\"#!/api/Ext.form.field.Base-cfg-checkChangeEvents\" rel=\"Ext.form.field.Base-cfg-checkChangeEvents\" class=\"docClass\">Ext.form.field.Base.checkChangeEvents</a> for controlling how changes to the field's value are\ndetected.</p>\n"},"value":{"!type":"?","!doc":"<p>A value to initialize this field with.</p>\n"},"vertical":{"!type":"bool","!doc":"<p>True to distribute contained controls across columns, completely filling each column top to bottom before\nstarting on the next column. The number of controls in each column will be automatically calculated to keep\ncolumns as even as possible. The default value is false, so that controls will be added to columns one at a time,\ncompletely filling each row left to right before starting on the next row.</p>\n"}},"Ext_form_CheckboxManager_cfg":{"!proto":"Ext_util_MixedCollection_cfg"},"Ext_form_FieldContainer_cfg":{"!proto":"Ext_container_Container_cfg","activeError":{"!type":"string","!doc":"<p>If specified, then the component will be displayed with this value as its active error when first rendered. Use\n<a href=\"#!/api/Ext.form.Labelable-method-setActiveError\" rel=\"Ext.form.Labelable-method-setActiveError\" class=\"docClass\">setActiveError</a> or <a href=\"#!/api/Ext.form.Labelable-method-unsetActiveError\" rel=\"Ext.form.Labelable-method-unsetActiveError\" class=\"docClass\">unsetActiveError</a> to change it after component creation.</p>\n"},"activeErrorsTpl":{"!type":"string|[string]|+Ext.XTemplate","!doc":"<p>The template used to format the Array of error messages passed to <a href=\"#!/api/Ext.form.Labelable-method-setActiveErrors\" rel=\"Ext.form.Labelable-method-setActiveErrors\" class=\"docClass\">setActiveErrors</a> into a single HTML\nstring. if the <a href=\"#!/api/Ext.form.Labelable-cfg-msgTarget\" rel=\"Ext.form.Labelable-cfg-msgTarget\" class=\"docClass\">msgTarget</a> is title, it defaults to a list separated by new lines. Otherwise, it\nrenders each message as an item in an unordered list.</p>\n"},"afterBodyEl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nat the end of the input containing element. If an <code>XTemplate</code> is used, the component's <a href=\"#!/api/Ext.AbstractComponent-cfg-renderData\" rel=\"Ext.AbstractComponent-cfg-renderData\" class=\"docClass\">render data</a>\nserves as the context.</p>\n"},"afterLabelTextTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nafter the label text. If an <code>XTemplate</code> is used, the component's <a href=\"#!/api/Ext.AbstractComponent-cfg-renderData\" rel=\"Ext.AbstractComponent-cfg-renderData\" class=\"docClass\">render data</a>\nserves as the context.</p>\n"},"afterLabelTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nafter the label element. If an <code>XTemplate</code> is used, the component's <a href=\"#!/api/Ext.AbstractComponent-cfg-renderData\" rel=\"Ext.AbstractComponent-cfg-renderData\" class=\"docClass\">render data</a>\nserves as the context.</p>\n"},"afterSubTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nafter the <a href=\"#!/api/Ext.form.Labelable-method-getSubTplMarkup\" rel=\"Ext.form.Labelable-method-getSubTplMarkup\" class=\"docClass\">subTpl markup</a>. If an <code>XTemplate</code> is used, the\ncomponent's <a href=\"#!/api/Ext.AbstractComponent-cfg-renderData\" rel=\"Ext.AbstractComponent-cfg-renderData\" class=\"docClass\">render data</a> serves as the context.</p>\n"},"autoFitErrors":{"!type":"bool","!doc":"<p>Whether to adjust the component's body area to make room for 'side' or 'under' <a href=\"#!/api/Ext.form.Labelable-cfg-msgTarget\" rel=\"Ext.form.Labelable-cfg-msgTarget\" class=\"docClass\">error messages</a>.</p>\n"},"baseBodyCls":{"!type":"string","!doc":"<p>The CSS class to be applied to the body content element.</p>\n"},"beforeBodyEl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nat the beginning of the input containing element. If an <code>XTemplate</code> is used, the component's <a href=\"#!/api/Ext.AbstractComponent-cfg-renderData\" rel=\"Ext.AbstractComponent-cfg-renderData\" class=\"docClass\">render data</a>\nserves as the context.</p>\n"},"beforeLabelTextTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nbefore the label text. If an <code>XTemplate</code> is used, the component's <a href=\"#!/api/Ext.AbstractComponent-cfg-renderData\" rel=\"Ext.AbstractComponent-cfg-renderData\" class=\"docClass\">render data</a>\nserves as the context.</p>\n"},"beforeLabelTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nbefore the label element. If an <code>XTemplate</code> is used, the component's <a href=\"#!/api/Ext.AbstractComponent-cfg-renderData\" rel=\"Ext.AbstractComponent-cfg-renderData\" class=\"docClass\">render data</a>\nserves as the context.</p>\n"},"beforeSubTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nbefore the <a href=\"#!/api/Ext.form.Labelable-method-getSubTplMarkup\" rel=\"Ext.form.Labelable-method-getSubTplMarkup\" class=\"docClass\">subTpl markup</a>. If an <code>XTemplate</code> is used, the\ncomponent's <a href=\"#!/api/Ext.AbstractComponent-cfg-renderData\" rel=\"Ext.AbstractComponent-cfg-renderData\" class=\"docClass\">render data</a> serves as the context.</p>\n"},"clearCls":{"!type":"string","!doc":"<p>The CSS class to be applied to the special clearing div rendered directly after the field contents wrapper to\nprovide field clearing.</p>\n"},"combineErrors":{"!type":"bool","!doc":"<p>If set to true, the field container will automatically combine and display the validation errors from\nall the fields it contains as a single error on the container, according to the configured\n<a href=\"#!/api/Ext.form.FieldContainer-cfg-msgTarget\" rel=\"Ext.form.FieldContainer-cfg-msgTarget\" class=\"docClass\">msgTarget</a>. Defaults to false.</p>\n"},"combineLabels":{"!type":"bool","!doc":"<p>If set to true, and there is no defined <a href=\"#!/api/Ext.form.FieldContainer-cfg-fieldLabel\" rel=\"Ext.form.FieldContainer-cfg-fieldLabel\" class=\"docClass\">fieldLabel</a>, the field container will automatically\ngenerate its label by combining the labels of all the fields it contains. Defaults to false.</p>\n"},"componentCls":{"!type":"string","!doc":"<p>CSS Class to be added to a components root level element to give distinction to it via styling.</p>\n"},"componentLayout":{"!type":"string|?","!doc":"<p>The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout\nmanager which sizes a Component's internal structure in response to the Component being sized.</p>\n\n<p>Generally, developers will not use this configuration as all provided Components which need their internal\nelements sizing (Such as <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">input fields</a>) come with their own componentLayout managers.</p>\n\n<p>The <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used on instances of the base <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\nclass which simply sizes the Component's encapsulating element to the height and width specified in the\n<a href=\"#!/api/Ext.form.FieldContainer-method-setSize\" rel=\"Ext.form.FieldContainer-method-setSize\" class=\"docClass\">setSize</a> method.</p>\n"},"errorMsgCls":{"!type":"string","!doc":"<p>The CSS class to be applied to the error message element.</p>\n"},"fieldBodyCls":{"!type":"string","!doc":"<p>An extra CSS class to be applied to the body content element in addition to <a href=\"#!/api/Ext.form.Labelable-cfg-baseBodyCls\" rel=\"Ext.form.Labelable-cfg-baseBodyCls\" class=\"docClass\">baseBodyCls</a>.</p>\n"},"fieldDefaults":{"!type":"?","!doc":"<p>If specified, the properties in this object are used as default config values for each <a href=\"#!/api/Ext.form.Labelable\" rel=\"Ext.form.Labelable\" class=\"docClass\">Ext.form.Labelable</a>\ninstance (e.g. <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">Ext.form.field.Base</a> or <a href=\"#!/api/Ext.form.FieldContainer\" rel=\"Ext.form.FieldContainer\" class=\"docClass\">Ext.form.FieldContainer</a>) that is added as a descendant of\nthis container. Corresponding values specified in an individual field's own configuration, or from the <a href=\"#!/api/Ext.container.Container-cfg-defaults\" rel=\"Ext.container.Container-cfg-defaults\" class=\"docClass\">defaults config</a> of its parent container, will take precedence. See the\ndocumentation for <a href=\"#!/api/Ext.form.Labelable\" rel=\"Ext.form.Labelable\" class=\"docClass\">Ext.form.Labelable</a> to see what config options may be specified in the fieldDefaults.</p>\n\n<p>Example:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>({\n    fieldDefaults: {\n        labelAlign: 'left',\n        labelWidth: 100\n    },\n    items: [{\n        xtype: 'fieldset',\n        defaults: {\n            labelAlign: 'top'\n        },\n        items: [{\n            name: 'field1'\n        }, {\n            name: 'field2'\n        }]\n    }, {\n        xtype: 'fieldset',\n        items: [{\n            name: 'field3',\n            labelWidth: 150\n        }, {\n            name: 'field4'\n        }]\n    }]\n});\n</code></pre>\n\n<p>In this example, field1 and field2 will get labelAlign:'top' (from the fieldset's defaults) and labelWidth:100\n(from fieldDefaults), field3 and field4 will both get labelAlign:'left' (from fieldDefaults and field3 will use\nthe labelWidth:150 from its own config.</p>\n"},"fieldLabel":{"!type":"string","!doc":"<p>The label for the field. It gets appended with the <a href=\"#!/api/Ext.form.Labelable-cfg-labelSeparator\" rel=\"Ext.form.Labelable-cfg-labelSeparator\" class=\"docClass\">labelSeparator</a>, and its position and sizing is\ndetermined by the <a href=\"#!/api/Ext.form.Labelable-cfg-labelAlign\" rel=\"Ext.form.Labelable-cfg-labelAlign\" class=\"docClass\">labelAlign</a>, <a href=\"#!/api/Ext.form.Labelable-cfg-labelWidth\" rel=\"Ext.form.Labelable-cfg-labelWidth\" class=\"docClass\">labelWidth</a>, and <a href=\"#!/api/Ext.form.Labelable-cfg-labelPad\" rel=\"Ext.form.Labelable-cfg-labelPad\" class=\"docClass\">labelPad</a> configs.</p>\n"},"formItemCls":{"!type":"string","!doc":"<p>A CSS class to be applied to the outermost element to denote that it is participating in the form field layout.</p>\n"},"hideEmptyLabel":{"!type":"bool","!doc":"<p>When set to true, the label element (<a href=\"#!/api/Ext.form.Labelable-cfg-fieldLabel\" rel=\"Ext.form.Labelable-cfg-fieldLabel\" class=\"docClass\">fieldLabel</a> and <a href=\"#!/api/Ext.form.Labelable-cfg-labelSeparator\" rel=\"Ext.form.Labelable-cfg-labelSeparator\" class=\"docClass\">labelSeparator</a>) will be automatically\nhidden if the <a href=\"#!/api/Ext.form.Labelable-cfg-fieldLabel\" rel=\"Ext.form.Labelable-cfg-fieldLabel\" class=\"docClass\">fieldLabel</a> is empty. Setting this to false will cause the empty label element to be\nrendered and space to be reserved for it; this is useful if you want a field without a label to line up with\nother labeled fields in the same form.</p>\n\n<p>If you wish to unconditionall hide the label even if a non-empty fieldLabel is configured, then set the\n<a href=\"#!/api/Ext.form.Labelable-cfg-hideLabel\" rel=\"Ext.form.Labelable-cfg-hideLabel\" class=\"docClass\">hideLabel</a> config to true.</p>\n"},"hideLabel":{"!type":"bool","!doc":"<p>Set to true to completely hide the label element (<a href=\"#!/api/Ext.form.Labelable-cfg-fieldLabel\" rel=\"Ext.form.Labelable-cfg-fieldLabel\" class=\"docClass\">fieldLabel</a> and <a href=\"#!/api/Ext.form.Labelable-cfg-labelSeparator\" rel=\"Ext.form.Labelable-cfg-labelSeparator\" class=\"docClass\">labelSeparator</a>). Also see\n<a href=\"#!/api/Ext.form.Labelable-cfg-hideEmptyLabel\" rel=\"Ext.form.Labelable-cfg-hideEmptyLabel\" class=\"docClass\">hideEmptyLabel</a>, which controls whether space will be reserved for an empty fieldLabel.</p>\n"},"invalidCls":{"!type":"string","!doc":"<p>If we allow this to mark with the invalidCls it will cascade to all\nchild fields, let them handle themselves</p>\n"},"labelAlign":{"!type":"string","!doc":"<p>Controls the position and alignment of the <a href=\"#!/api/Ext.form.Labelable-cfg-fieldLabel\" rel=\"Ext.form.Labelable-cfg-fieldLabel\" class=\"docClass\">fieldLabel</a>. Valid values are:</p>\n\n<ul>\n<li>\"left\" (the default) - The label is positioned to the left of the field, with its text aligned to the left.\nIts width is determined by the <a href=\"#!/api/Ext.form.Labelable-cfg-labelWidth\" rel=\"Ext.form.Labelable-cfg-labelWidth\" class=\"docClass\">labelWidth</a> config.</li>\n<li>\"top\" - The label is positioned above the field.</li>\n<li>\"right\" - The label is positioned to the left of the field, with its text aligned to the right.\nIts width is determined by the <a href=\"#!/api/Ext.form.Labelable-cfg-labelWidth\" rel=\"Ext.form.Labelable-cfg-labelWidth\" class=\"docClass\">labelWidth</a> config.</li>\n</ul>\n\n"},"labelAttrTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\ninside the label element (as attributes). If an <code>XTemplate</code> is used, the component's\n<a href=\"#!/api/Ext.AbstractComponent-cfg-renderData\" rel=\"Ext.AbstractComponent-cfg-renderData\" class=\"docClass\">render data</a> serves as the context.</p>\n"},"labelCls":{"!type":"string","!doc":"<p>The CSS class to be applied to the label element. This (single) CSS class is used to formulate the renderSelector\nand drives the field layout where it is concatenated with a hyphen ('-') and <a href=\"#!/api/Ext.form.Labelable-cfg-labelAlign\" rel=\"Ext.form.Labelable-cfg-labelAlign\" class=\"docClass\">labelAlign</a>. To add\nadditional classes, use <a href=\"#!/api/Ext.form.Labelable-cfg-labelClsExtra\" rel=\"Ext.form.Labelable-cfg-labelClsExtra\" class=\"docClass\">labelClsExtra</a>.</p>\n"},"labelClsExtra":{"!type":"string","!doc":"<p>An optional string of one or more additional CSS classes to add to the label element. Defaults to empty.</p>\n"},"labelConnector":{"!type":"string","!doc":"<p>The string to use when joining the labels of individual sub-fields, when <a href=\"#!/api/Ext.form.FieldContainer-cfg-combineLabels\" rel=\"Ext.form.FieldContainer-cfg-combineLabels\" class=\"docClass\">combineLabels</a> is\nset to true. Defaults to ', '.</p>\n"},"labelPad":{"!type":"number","!doc":"<p>The amount of space in pixels between the <a href=\"#!/api/Ext.form.Labelable-cfg-fieldLabel\" rel=\"Ext.form.Labelable-cfg-fieldLabel\" class=\"docClass\">fieldLabel</a> and the input field.</p>\n"},"labelSeparator":{"!type":"string","!doc":"<p>Character(s) to be inserted at the end of the <a href=\"#!/api/Ext.form.Labelable-cfg-fieldLabel\" rel=\"Ext.form.Labelable-cfg-fieldLabel\" class=\"docClass\">label text</a>.</p>\n\n<p>Set to empty string to hide the separator completely.</p>\n"},"labelStyle":{"!type":"string","!doc":"<p>A CSS style specification string to apply directly to this field's label.</p>\n"},"labelWidth":{"!type":"number","!doc":"<p>The width of the <a href=\"#!/api/Ext.form.Labelable-cfg-fieldLabel\" rel=\"Ext.form.Labelable-cfg-fieldLabel\" class=\"docClass\">fieldLabel</a> in pixels. Only applicable if the <a href=\"#!/api/Ext.form.Labelable-cfg-labelAlign\" rel=\"Ext.form.Labelable-cfg-labelAlign\" class=\"docClass\">labelAlign</a> is set to \"left\" or\n\"right\".</p>\n"},"labelableRenderTpl":{"!type":"string|[string]|+Ext.XTemplate","!doc":"<p>The rendering template for the field decorations. Component classes using this mixin\nshould include logic to use this as their <a href=\"#!/api/Ext.AbstractComponent-cfg-renderTpl\" rel=\"Ext.AbstractComponent-cfg-renderTpl\" class=\"docClass\">renderTpl</a>,\nand implement the <a href=\"#!/api/Ext.form.Labelable-method-getSubTplMarkup\" rel=\"Ext.form.Labelable-method-getSubTplMarkup\" class=\"docClass\">getSubTplMarkup</a> method to generate the field body content.</p>\n\n<p>The structure of a field is a table as follows:</p>\n\n<p>If <code>labelAlign: 'left',</code>msgTarget: 'side'`</p>\n\n<pre><code> +----------------------+----------------------+-------------+\n | Label:               | InputField           | sideErrorEl |\n +----------------------+----------------------+-------------+\n</code></pre>\n\n<p>If <code>labelAlign: 'left',</code>msgTarget: 'under'`</p>\n\n<pre><code> +----------------------+------------------------------------+\n | Label:               | InputField      (colspan=2)        |\n |                      | underErrorEl                       |\n +----------------------+------------------------------------+\n</code></pre>\n\n<p>If <code>labelAlign: 'top',</code>msgTarget: 'side'`</p>\n\n<pre><code> +---------------------------------------------+-------------+\n | label                                       |             |\n | InputField                                  | sideErrorEl |\n +---------------------------------------------+-------------+\n</code></pre>\n\n<p>If <code>labelAlign: 'top',</code>msgTarget: 'under'`</p>\n\n<pre><code> +-----------------------------------------------------------+\n | label                                                     |\n | InputField                      (colspan=2)               |\n | underErrorEl                                              |\n +-----------------------------------------------------------+\n</code></pre>\n\n<p>The total columns always the same for fields with each setting of <a href=\"#!/api/Ext.form.Labelable-cfg-labelAlign\" rel=\"Ext.form.Labelable-cfg-labelAlign\" class=\"docClass\">labelAlign</a> because when\nrendered into a <a href=\"#!/api/Ext.layout.container.Form\" rel=\"Ext.layout.container.Form\" class=\"docClass\">Ext.layout.container.Form</a> layout, just the <code>TR</code> of the table\nwill be placed into the form's main <code>TABLE</code>, and the columns of all the siblings\nmust match so that they all line up. In a <a href=\"#!/api/Ext.layout.container.Form\" rel=\"Ext.layout.container.Form\" class=\"docClass\">Ext.layout.container.Form</a> layout, different\nsettings of <a href=\"#!/api/Ext.form.Labelable-cfg-labelAlign\" rel=\"Ext.form.Labelable-cfg-labelAlign\" class=\"docClass\">labelAlign</a> are not supported because of the incompatible column structure.</p>\n\n<p>When the triggerCell or side error cell are hidden or shown, the input cell's colspan\nis recalculated to maintain the correct 3 visible column count.</p>\n"},"msgTarget":{"!type":"string","!doc":"<p>The location where the error message text should display. Must be one of the following values:</p>\n\n<ul>\n<li><p><code>qtip</code> Display a quick tip containing the message when the user hovers over the field.\nThis is the default.</p>\n\n<p><strong><a href=\"#!/api/Ext.tip.QuickTipManager-method-init\" rel=\"Ext.tip.QuickTipManager-method-init\" class=\"docClass\">Ext.tip.QuickTipManager.init</a> must have been called for this setting to work.</strong></p></li>\n<li><p><code>title</code> Display the message in a default browser title attribute popup.</p></li>\n<li><code>under</code> Add a block div beneath the field containing the error message.</li>\n<li><code>side</code> Add an error icon to the right of the field, displaying the message in a popup on hover.</li>\n<li><code>none</code> Don't display any error message. This might be useful if you are implementing custom error display.</li>\n<li><code>[element id]</code> Add the error message directly to the innerHTML of the specified element.</li>\n</ul>\n\n"},"preventMark":{"!type":"bool","!doc":"<p>true to disable displaying any <a href=\"#!/api/Ext.form.Labelable-method-setActiveError\" rel=\"Ext.form.Labelable-method-setActiveError\" class=\"docClass\">error message</a> set on this object.</p>\n"}},"Ext_form_FieldSet_cfg":{"!proto":"Ext_container_Container_cfg","autoEl":{"!type":"string|?","!doc":"<p>A tag name or <a href=\"#!/api/Ext.DomHelper\" rel=\"Ext.DomHelper\" class=\"docClass\">DomHelper</a> spec used to create the <a href=\"#!/api/Ext.form.FieldSet-method-getEl\" rel=\"Ext.form.FieldSet-method-getEl\" class=\"docClass\">Element</a> which will\nencapsulate this Component.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong>'div'</strong>. The more complex Sencha classes use a more\ncomplex DOM structure specified by their own <a href=\"#!/api/Ext.form.FieldSet-cfg-renderTpl\" rel=\"Ext.form.FieldSet-cfg-renderTpl\" class=\"docClass\">renderTpl</a>s.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components encapsulated by\ndifferent DOM elements. Example usage:</p>\n\n<pre><code>{\n    xtype: 'component',\n    autoEl: {\n        tag: 'img',\n        src: 'http://www.example.com/example.jpg'\n    }\n}, {\n    xtype: 'component',\n    autoEl: {\n        tag: 'blockquote',\n        html: 'autoEl is cool!'\n    }\n}, {\n    xtype: 'container',\n    autoEl: 'ul',\n    cls: 'ux-unordered-list',\n    items: {\n        xtype: 'component',\n        autoEl: 'li',\n        html: 'First list item'\n    }\n}\n</code></pre>\n"},"baseCls":{"!type":"string","!doc":"<p>The base CSS class applied to the fieldset.</p>\n"},"checkboxName":{"!type":"string","!doc":"<p>The name to assign to the fieldset's checkbox if <a href=\"#!/api/Ext.form.FieldSet-cfg-checkboxToggle\" rel=\"Ext.form.FieldSet-cfg-checkboxToggle\" class=\"docClass\">checkboxToggle</a> = true\n(defaults to '[fieldset id]-checkbox').</p>\n"},"checkboxToggle":{"!type":"bool","!doc":"<p>Set to true to render a checkbox into the fieldset frame just in front of the legend to expand/collapse the\nfieldset when the checkbox is toggled.. This checkbox will be included in form submits using\nthe <a href=\"#!/api/Ext.form.FieldSet-cfg-checkboxName\" rel=\"Ext.form.FieldSet-cfg-checkboxName\" class=\"docClass\">checkboxName</a>.</p>\n"},"collapsed":{"!type":"bool","!doc":"<p>Set to true to render the fieldset as collapsed by default. If <a href=\"#!/api/Ext.form.FieldSet-cfg-checkboxToggle\" rel=\"Ext.form.FieldSet-cfg-checkboxToggle\" class=\"docClass\">checkboxToggle</a> is specified, the checkbox\nwill also be unchecked by default.</p>\n"},"collapsible":{"!type":"bool","!doc":"<p>Set to true to make the fieldset collapsible and have the expand/collapse toggle button automatically rendered\ninto the legend element, false to keep the fieldset statically sized with no collapse button.\nAnother option is to configure <a href=\"#!/api/Ext.form.FieldSet-cfg-checkboxToggle\" rel=\"Ext.form.FieldSet-cfg-checkboxToggle\" class=\"docClass\">checkboxToggle</a>. Use the <a href=\"#!/api/Ext.form.FieldSet-cfg-collapsed\" rel=\"Ext.form.FieldSet-cfg-collapsed\" class=\"docClass\">collapsed</a> config to collapse the\nfieldset by default.</p>\n"},"componentLayout":{"!type":"string|?","!doc":"<p>The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout\nmanager which sizes a Component's internal structure in response to the Component being sized.</p>\n\n<p>Generally, developers will not use this configuration as all provided Components which need their internal\nelements sizing (Such as <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">input fields</a>) come with their own componentLayout managers.</p>\n\n<p>The <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used on instances of the base <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\nclass which simply sizes the Component's encapsulating element to the height and width specified in the\n<a href=\"#!/api/Ext.form.FieldSet-method-setSize\" rel=\"Ext.form.FieldSet-method-setSize\" class=\"docClass\">setSize</a> method.</p>\n"},"fieldDefaults":{"!type":"?","!doc":"<p>If specified, the properties in this object are used as default config values for each <a href=\"#!/api/Ext.form.Labelable\" rel=\"Ext.form.Labelable\" class=\"docClass\">Ext.form.Labelable</a>\ninstance (e.g. <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">Ext.form.field.Base</a> or <a href=\"#!/api/Ext.form.FieldContainer\" rel=\"Ext.form.FieldContainer\" class=\"docClass\">Ext.form.FieldContainer</a>) that is added as a descendant of\nthis container. Corresponding values specified in an individual field's own configuration, or from the <a href=\"#!/api/Ext.container.Container-cfg-defaults\" rel=\"Ext.container.Container-cfg-defaults\" class=\"docClass\">defaults config</a> of its parent container, will take precedence. See the\ndocumentation for <a href=\"#!/api/Ext.form.Labelable\" rel=\"Ext.form.Labelable\" class=\"docClass\">Ext.form.Labelable</a> to see what config options may be specified in the fieldDefaults.</p>\n\n<p>Example:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>({\n    fieldDefaults: {\n        labelAlign: 'left',\n        labelWidth: 100\n    },\n    items: [{\n        xtype: 'fieldset',\n        defaults: {\n            labelAlign: 'top'\n        },\n        items: [{\n            name: 'field1'\n        }, {\n            name: 'field2'\n        }]\n    }, {\n        xtype: 'fieldset',\n        items: [{\n            name: 'field3',\n            labelWidth: 150\n        }, {\n            name: 'field4'\n        }]\n    }]\n});\n</code></pre>\n\n<p>In this example, field1 and field2 will get labelAlign:'top' (from the fieldset's defaults) and labelWidth:100\n(from fieldDefaults), field3 and field4 will both get labelAlign:'left' (from fieldDefaults and field3 will use\nthe labelWidth:150 from its own config.</p>\n"},"layout":{"!type":"+Ext.enums.Layout|?","!doc":"<p>The <a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">Ext.container.Container.layout</a> for the fieldset's immediate child items.</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.form.FieldSet-method-getEl\" rel=\"Ext.form.FieldSet-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.form.FieldSet-method-getEl\" rel=\"Ext.form.FieldSet-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.form.FieldSet-cfg-renderSelectors\" rel=\"Ext.form.FieldSet-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.form.FieldSet-cfg-childEls\" rel=\"Ext.form.FieldSet-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"},"stateEvents":{"!type":"[string]","!doc":"<p>An array of events that, when fired, should trigger this object to\nsave its state. Defaults to none. <code>stateEvents</code> may be any type\nof event supported by this object, including browser or custom events\n(e.g., <tt>['click', 'customerchange']</tt>).</p>\n\n\n<p>See <code><a href=\"#!/api/Ext.form.FieldSet-cfg-stateful\" rel=\"Ext.form.FieldSet-cfg-stateful\" class=\"docClass\">stateful</a></code> for an explanation of saving and\nrestoring object state.</p>\n\n"},"title":{"!type":"string","!doc":"<p>A title to be displayed in the fieldset's legend. May contain HTML markup.</p>\n"},"toggleOnTitleClick":{"!type":"bool","!doc":"<p>Set to true will add a listener to the titleCmp property for the click event which will execute the\n<a href=\"#!/api/Ext.form.FieldSet-method-toggle\" rel=\"Ext.form.FieldSet-method-toggle\" class=\"docClass\">toggle</a> method. This option is only used when the <a href=\"#!/api/Ext.form.FieldSet-cfg-collapsible\" rel=\"Ext.form.FieldSet-cfg-collapsible\" class=\"docClass\">collapsible</a> property is set to true.</p>\n"}},"Ext_form_Label_cfg":{"!proto":"Ext_Component_cfg","autoEl":{"!type":"string|?","!doc":"<p>A tag name or <a href=\"#!/api/Ext.DomHelper\" rel=\"Ext.DomHelper\" class=\"docClass\">DomHelper</a> spec used to create the <a href=\"#!/api/Ext.form.Label-method-getEl\" rel=\"Ext.form.Label-method-getEl\" class=\"docClass\">Element</a> which will\nencapsulate this Component.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong>'div'</strong>. The more complex Sencha classes use a more\ncomplex DOM structure specified by their own <a href=\"#!/api/Ext.form.Label-cfg-renderTpl\" rel=\"Ext.form.Label-cfg-renderTpl\" class=\"docClass\">renderTpl</a>s.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components encapsulated by\ndifferent DOM elements. Example usage:</p>\n\n<pre><code>{\n    xtype: 'component',\n    autoEl: {\n        tag: 'img',\n        src: 'http://www.example.com/example.jpg'\n    }\n}, {\n    xtype: 'component',\n    autoEl: {\n        tag: 'blockquote',\n        html: 'autoEl is cool!'\n    }\n}, {\n    xtype: 'container',\n    autoEl: 'ul',\n    cls: 'ux-unordered-list',\n    items: {\n        xtype: 'component',\n        autoEl: 'li',\n        html: 'First list item'\n    }\n}\n</code></pre>\n"},"forId":{"!type":"string","!doc":"<p>The id of the input element to which this label will be bound via the standard HTML 'for'\nattribute. If not specified, the attribute will not be added to the label. In most cases you will be\nassociating the label with a <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">Ext.form.field.Base</a> component, so you should make sure this matches\nthe <a href=\"#!/api/Ext.form.field.Base-cfg-inputId\" rel=\"Ext.form.field.Base-cfg-inputId\" class=\"docClass\">inputId</a> of that field.</p>\n"},"html":{"!type":"string","!doc":"<p>An HTML fragment that will be used as the label's innerHTML.\nNote that if <a href=\"#!/api/Ext.form.Label-cfg-text\" rel=\"Ext.form.Label-cfg-text\" class=\"docClass\">text</a> is specified it will take precedence and this value will be ignored.</p>\n"},"text":{"!type":"string","!doc":"<p>The plain text to display within the label. If you need to include HTML\ntags within the label's innerHTML, use the <a href=\"#!/api/Ext.form.Label-cfg-html\" rel=\"Ext.form.Label-cfg-html\" class=\"docClass\">html</a> config instead.</p>\n"}},"Ext_form_Panel_cfg":{"!proto":"Ext_panel_Panel_cfg","fieldDefaults":{"!type":"?","!doc":"<p>If specified, the properties in this object are used as default config values for each <a href=\"#!/api/Ext.form.Labelable\" rel=\"Ext.form.Labelable\" class=\"docClass\">Ext.form.Labelable</a>\ninstance (e.g. <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">Ext.form.field.Base</a> or <a href=\"#!/api/Ext.form.FieldContainer\" rel=\"Ext.form.FieldContainer\" class=\"docClass\">Ext.form.FieldContainer</a>) that is added as a descendant of\nthis container. Corresponding values specified in an individual field's own configuration, or from the <a href=\"#!/api/Ext.container.Container-cfg-defaults\" rel=\"Ext.container.Container-cfg-defaults\" class=\"docClass\">defaults config</a> of its parent container, will take precedence. See the\ndocumentation for <a href=\"#!/api/Ext.form.Labelable\" rel=\"Ext.form.Labelable\" class=\"docClass\">Ext.form.Labelable</a> to see what config options may be specified in the fieldDefaults.</p>\n\n<p>Example:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>({\n    fieldDefaults: {\n        labelAlign: 'left',\n        labelWidth: 100\n    },\n    items: [{\n        xtype: 'fieldset',\n        defaults: {\n            labelAlign: 'top'\n        },\n        items: [{\n            name: 'field1'\n        }, {\n            name: 'field2'\n        }]\n    }, {\n        xtype: 'fieldset',\n        items: [{\n            name: 'field3',\n            labelWidth: 150\n        }, {\n            name: 'field4'\n        }]\n    }]\n});\n</code></pre>\n\n<p>In this example, field1 and field2 will get labelAlign:'top' (from the fieldset's defaults) and labelWidth:100\n(from fieldDefaults), field3 and field4 will both get labelAlign:'left' (from fieldDefaults and field3 will use\nthe labelWidth:150 from its own config.</p>\n"},"layout":{"!type":"+Ext.enums.Layout|?","!doc":"<p>The <a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">Ext.container.Container.layout</a> for the form panel's immediate child items.</p>\n"},"pollForChanges":{"!type":"bool","!doc":"<p>If set to <code>true</code>, sets up an interval task (using the <a href=\"#!/api/Ext.form.Panel-cfg-pollInterval\" rel=\"Ext.form.Panel-cfg-pollInterval\" class=\"docClass\">pollInterval</a>) in which the\npanel's fields are repeatedly checked for changes in their values. This is in addition to the normal detection\neach field does on its own input element, and is not needed in most cases. It does, however, provide a\nmeans to absolutely guarantee detection of all changes including some edge cases in some browsers which\ndo not fire native events. Defaults to <code>false</code>.</p>\n"},"pollInterval":{"!type":"number","!doc":"<p>Interval in milliseconds at which the form's fields are checked for value changes. Only used if\nthe <a href=\"#!/api/Ext.form.Panel-cfg-pollForChanges\" rel=\"Ext.form.Panel-cfg-pollForChanges\" class=\"docClass\">pollForChanges</a> option is set to <code>true</code>. Defaults to 500 milliseconds.</p>\n"}},"Ext_form_RadioGroup_cfg":{"!proto":"Ext_form_CheckboxGroup_cfg","allowBlank":{"!type":"bool","!doc":"<p>True to allow every item in the group to be blank.\nIf allowBlank = false and no items are selected at validation time, <a href=\"#!/api/Ext.form.RadioGroup-cfg-blankText\" rel=\"Ext.form.RadioGroup-cfg-blankText\" class=\"docClass\">blankText</a> will\nbe used as the error text.</p>\n"},"blankText":{"!type":"string","!doc":"<p>Error text to display if the <a href=\"#!/api/Ext.form.RadioGroup-cfg-allowBlank\" rel=\"Ext.form.RadioGroup-cfg-allowBlank\" class=\"docClass\">allowBlank</a> validation fails</p>\n"},"defaultType":{"!type":"string","!doc":"<p>private</p>\n"},"items":{"!type":"[+Ext.form.field.Radio]|[?]","!doc":"<p>An Array of <a href=\"#!/api/Ext.form.field.Radio\" rel=\"Ext.form.field.Radio\" class=\"docClass\">Radio</a>s or Radio config objects to arrange in the group.</p>\n"}},"Ext_form_RadioManager_cfg":{"!proto":"Ext_util_MixedCollection_cfg"},"Ext_form_action_Action_cfg":{"!proto":"Ext_Base_cfg","failure":{"!type":"fn()","!doc":"<p>The function to call when a failure packet was received, or when an error ocurred in the Ajax communication.</p>\n"},"form":{"!type":"+Ext.form.Basic","!doc":"<p>The <a href=\"#!/api/Ext.form.Basic\" rel=\"Ext.form.Basic\" class=\"docClass\">BasicForm</a> instance that is invoking this Action. Required.</p>\n"},"headers":{"!type":"?","!doc":"<p>Extra headers to be sent in the AJAX request for submit and load actions.\nSee <a href=\"#!/api/Ext.data.proxy.Ajax-cfg-headers\" rel=\"Ext.data.proxy.Ajax-cfg-headers\" class=\"docClass\">Ext.data.proxy.Ajax.headers</a>.</p>\n\n<p><strong>Note:</strong> Headers are not sent during file upload.</p>\n"},"method":{"!type":"string","!doc":"<p>The HTTP method to use to access the requested URL.\nDefaults to the <a href=\"#!/api/Ext.form.Basic-cfg-method\" rel=\"Ext.form.Basic-cfg-method\" class=\"docClass\">BasicForm's method</a>, or 'POST' if not specified.</p>\n"},"params":{"!type":"?|string","!doc":"<p>Extra parameter values to pass. These are added to the Form's <a href=\"#!/api/Ext.form.Basic-cfg-baseParams\" rel=\"Ext.form.Basic-cfg-baseParams\" class=\"docClass\">Ext.form.Basic.baseParams</a> and passed to the\nspecified URL along with the Form's input fields.</p>\n\n<p>Parameters are encoded as standard HTTP parameters using <a href=\"#!/api/Ext-method-urlEncode\" rel=\"Ext-method-urlEncode\" class=\"docClass\">Ext.Object.toQueryString</a>.</p>\n"},"reset":{"!type":"bool","!doc":"<p>When set to <strong>true</strong>, causes the Form to be <a href=\"#!/api/Ext.form.Basic-method-reset\" rel=\"Ext.form.Basic-method-reset\" class=\"docClass\">reset</a> on Action success. If specified,\nthis happens before the <a href=\"#!/api/Ext.form.action.Action-cfg-success\" rel=\"Ext.form.action.Action-cfg-success\" class=\"docClass\">success</a> callback is called and before the Form's\n<a href=\"#!/api/Ext.form.Basic-event-actioncomplete\" rel=\"Ext.form.Basic-event-actioncomplete\" class=\"docClass\">actioncomplete</a> event fires.</p>\n"},"scope":{"!type":"?","!doc":"<p>The scope in which to call the configured <a href=\"#!/api/Ext.form.action.Action-cfg-success\" rel=\"Ext.form.action.Action-cfg-success\" class=\"docClass\">success</a> and <a href=\"#!/api/Ext.form.action.Action-cfg-failure\" rel=\"Ext.form.action.Action-cfg-failure\" class=\"docClass\">failure</a> callback functions\n(the <code>this</code> reference for the callback functions).</p>\n"},"submitEmptyText":{"!type":"bool","!doc":"<p>If set to true, the emptyText value will be sent with the form when it is submitted.</p>\n"},"success":{"!type":"fn()","!doc":"<p>The function to call when a valid success return packet is received.</p>\n"},"timeout":{"!type":"number","!doc":"<p>The number of seconds to wait for a server response before failing with the <a href=\"#!/api/Ext.form.action.Action-property-failureType\" rel=\"Ext.form.action.Action-property-failureType\" class=\"docClass\">failureType</a> as\n<a href=\"#!/api/Ext.form.action.Action-static-property-CONNECT_FAILURE\" rel=\"Ext.form.action.Action-static-property-CONNECT_FAILURE\" class=\"docClass\">CONNECT_FAILURE</a>. If not specified, defaults to the configured\n<a href=\"#!/api/Ext.form.Basic-cfg-timeout\" rel=\"Ext.form.Basic-cfg-timeout\" class=\"docClass\">timeout</a> of the <a href=\"#!/api/Ext.form.action.Action-cfg-form\" rel=\"Ext.form.action.Action-cfg-form\" class=\"docClass\">form</a>.</p>\n"},"url":{"!type":"string","!doc":"<p>The URL that the Action is to invoke. Will default to the <a href=\"#!/api/Ext.form.Basic-cfg-url\" rel=\"Ext.form.Basic-cfg-url\" class=\"docClass\">url</a> configured on the\n<a href=\"#!/api/Ext.form.action.Action-cfg-form\" rel=\"Ext.form.action.Action-cfg-form\" class=\"docClass\">form</a>.</p>\n"},"waitMsg":{"!type":"string","!doc":"<p>The message to be displayed by a call to <a href=\"#!/api/Ext.window.MessageBox-method-wait\" rel=\"Ext.window.MessageBox-method-wait\" class=\"docClass\">Ext.window.MessageBox.wait</a> during the time the action is being\nprocessed.</p>\n"},"waitTitle":{"!type":"string","!doc":"<p>The title to be displayed by a call to <a href=\"#!/api/Ext.window.MessageBox-method-wait\" rel=\"Ext.window.MessageBox-method-wait\" class=\"docClass\">Ext.window.MessageBox.wait</a> during the time the action is being\nprocessed.</p>\n"}},"Ext_form_action_DirectLoad_cfg":{"!proto":"Ext_form_action_Load_cfg"},"Ext_form_action_DirectSubmit_cfg":{"!proto":"Ext_form_action_Submit_cfg"},"Ext_form_action_Load_cfg":{"!proto":"Ext_form_action_Action_cfg"},"Ext_form_action_StandardSubmit_cfg":{"!proto":"Ext_form_action_Submit_cfg","target":{"!type":"string","!doc":"<p>Optional target attribute to be used for the form when submitting.</p>\n\n<p>Defaults to the current window/frame.</p>\n"}},"Ext_form_action_Submit_cfg":{"!proto":"Ext_form_action_Action_cfg","clientValidation":{"!type":"bool","!doc":"<p>Determines whether a Form's fields are validated in a final call to <a href=\"#!/api/Ext.form.Basic-method-isValid\" rel=\"Ext.form.Basic-method-isValid\" class=\"docClass\">isValid</a> prior\nto submission. Pass false in the Form's submit options to prevent this.</p>\n"}},"Ext_form_field_Base_cfg":{"!proto":"Ext_Component_cfg","activeError":{"!type":"string","!doc":"<p>If specified, then the component will be displayed with this value as its active error when first rendered. Use\n<a href=\"#!/api/Ext.form.Labelable-method-setActiveError\" rel=\"Ext.form.Labelable-method-setActiveError\" class=\"docClass\">setActiveError</a> or <a href=\"#!/api/Ext.form.Labelable-method-unsetActiveError\" rel=\"Ext.form.Labelable-method-unsetActiveError\" class=\"docClass\">unsetActiveError</a> to change it after component creation.</p>\n"},"activeErrorsTpl":{"!type":"string|[string]|+Ext.XTemplate","!doc":"<p>The template used to format the Array of error messages passed to <a href=\"#!/api/Ext.form.Labelable-method-setActiveErrors\" rel=\"Ext.form.Labelable-method-setActiveErrors\" class=\"docClass\">setActiveErrors</a> into a single HTML\nstring. if the <a href=\"#!/api/Ext.form.Labelable-cfg-msgTarget\" rel=\"Ext.form.Labelable-cfg-msgTarget\" class=\"docClass\">msgTarget</a> is title, it defaults to a list separated by new lines. Otherwise, it\nrenders each message as an item in an unordered list.</p>\n"},"afterBodyEl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nat the end of the input containing element. If an <code>XTemplate</code> is used, the component's <a href=\"#!/api/Ext.AbstractComponent-cfg-renderData\" rel=\"Ext.AbstractComponent-cfg-renderData\" class=\"docClass\">render data</a>\nserves as the context.</p>\n"},"afterLabelTextTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nafter the label text. If an <code>XTemplate</code> is used, the component's <a href=\"#!/api/Ext.AbstractComponent-cfg-renderData\" rel=\"Ext.AbstractComponent-cfg-renderData\" class=\"docClass\">render data</a>\nserves as the context.</p>\n"},"afterLabelTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nafter the label element. If an <code>XTemplate</code> is used, the component's <a href=\"#!/api/Ext.AbstractComponent-cfg-renderData\" rel=\"Ext.AbstractComponent-cfg-renderData\" class=\"docClass\">render data</a>\nserves as the context.</p>\n"},"afterSubTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nafter the <a href=\"#!/api/Ext.form.Labelable-method-getSubTplMarkup\" rel=\"Ext.form.Labelable-method-getSubTplMarkup\" class=\"docClass\">subTpl markup</a>. If an <code>XTemplate</code> is used, the\ncomponent's <a href=\"#!/api/Ext.AbstractComponent-cfg-renderData\" rel=\"Ext.AbstractComponent-cfg-renderData\" class=\"docClass\">render data</a> serves as the context.</p>\n"},"autoFitErrors":{"!type":"bool","!doc":"<p>Whether to adjust the component's body area to make room for 'side' or 'under' <a href=\"#!/api/Ext.form.Labelable-cfg-msgTarget\" rel=\"Ext.form.Labelable-cfg-msgTarget\" class=\"docClass\">error messages</a>.</p>\n"},"baseBodyCls":{"!type":"string","!doc":"<p>The CSS class to be applied to the body content element.</p>\n"},"baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this component's element. This will also be prepended to elements within this\ncomponent like Panel's body will get a class <code>x-panel-body</code>. This means that if you create a subclass of Panel, and\nyou want it to get all the Panels styling for the element and the body, you leave the <code>baseCls</code> <code>x-panel</code> and use\n<code>componentCls</code> to add specific styling for this component.</p>\n"},"beforeBodyEl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nat the beginning of the input containing element. If an <code>XTemplate</code> is used, the component's <a href=\"#!/api/Ext.AbstractComponent-cfg-renderData\" rel=\"Ext.AbstractComponent-cfg-renderData\" class=\"docClass\">render data</a>\nserves as the context.</p>\n"},"beforeLabelTextTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nbefore the label text. If an <code>XTemplate</code> is used, the component's <a href=\"#!/api/Ext.AbstractComponent-cfg-renderData\" rel=\"Ext.AbstractComponent-cfg-renderData\" class=\"docClass\">render data</a>\nserves as the context.</p>\n"},"beforeLabelTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nbefore the label element. If an <code>XTemplate</code> is used, the component's <a href=\"#!/api/Ext.AbstractComponent-cfg-renderData\" rel=\"Ext.AbstractComponent-cfg-renderData\" class=\"docClass\">render data</a>\nserves as the context.</p>\n"},"beforeSubTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nbefore the <a href=\"#!/api/Ext.form.Labelable-method-getSubTplMarkup\" rel=\"Ext.form.Labelable-method-getSubTplMarkup\" class=\"docClass\">subTpl markup</a>. If an <code>XTemplate</code> is used, the\ncomponent's <a href=\"#!/api/Ext.AbstractComponent-cfg-renderData\" rel=\"Ext.AbstractComponent-cfg-renderData\" class=\"docClass\">render data</a> serves as the context.</p>\n"},"checkChangeBuffer":{"!type":"number","!doc":"<p>Defines a timeout in milliseconds for buffering <a href=\"#!/api/Ext.form.field.Base-cfg-checkChangeEvents\" rel=\"Ext.form.field.Base-cfg-checkChangeEvents\" class=\"docClass\">checkChangeEvents</a> that fire in rapid succession.\nDefaults to 50 milliseconds.</p>\n"},"checkChangeEvents":{"!type":"[string]","!doc":"<p>A list of event names that will be listened for on the field's <a href=\"#!/api/Ext.form.field.Base-property-inputEl\" rel=\"Ext.form.field.Base-property-inputEl\" class=\"docClass\">input element</a>, which will cause\nthe field's value to be checked for changes. If a change is detected, the <a href=\"#!/api/Ext.form.field.Base-event-change\" rel=\"Ext.form.field.Base-event-change\" class=\"docClass\">change event</a> will be\nfired, followed by validation if the <a href=\"#!/api/Ext.form.field.Base-cfg-validateOnChange\" rel=\"Ext.form.field.Base-cfg-validateOnChange\" class=\"docClass\">validateOnChange</a> option is enabled.</p>\n\n<p>Defaults to ['change', 'propertychange', 'keyup'] in Internet Explorer, and ['change', 'input', 'textInput', 'keyup',\n'dragdrop'] in other browsers. This catches all the ways that field values can be changed in most supported\nbrowsers; the only known exceptions at the time of writing are:</p>\n\n<ul>\n<li>Safari 3.2 and older: cut/paste in textareas via the context menu, and dragging text into textareas</li>\n<li>Opera 10 and 11: dragging text into text fields and textareas, and cut via the context menu in text fields\nand textareas</li>\n<li>Opera 9: Same as Opera 10 and 11, plus paste from context menu in text fields and textareas</li>\n</ul>\n\n\n<p>If you need to guarantee on-the-fly change notifications including these edge cases, you can call the\n<a href=\"#!/api/Ext.form.field.Base-method-checkChange\" rel=\"Ext.form.field.Base-method-checkChange\" class=\"docClass\">checkChange</a> method on a repeating interval, e.g. using <a href=\"#!/api/Ext.util.TaskManager\" rel=\"Ext.util.TaskManager\" class=\"docClass\">Ext.TaskManager</a>, or if the field is within\na <a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>, you can use the FormPanel's <a href=\"#!/api/Ext.form.Panel-cfg-pollForChanges\" rel=\"Ext.form.Panel-cfg-pollForChanges\" class=\"docClass\">Ext.form.Panel.pollForChanges</a> configuration to set up\nsuch a task automatically.</p>\n"},"clearCls":{"!type":"string","!doc":"<p>The CSS class to be applied to the special clearing div rendered directly after the field contents wrapper to\nprovide field clearing.</p>\n"},"componentLayout":{"!type":"string|?","!doc":"<p>The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout\nmanager which sizes a Component's internal structure in response to the Component being sized.</p>\n\n<p>Generally, developers will not use this configuration as all provided Components which need their internal\nelements sizing (Such as <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">input fields</a>) come with their own componentLayout managers.</p>\n\n<p>The <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used on instances of the base <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\nclass which simply sizes the Component's encapsulating element to the height and width specified in the\n<a href=\"#!/api/Ext.form.field.Base-method-setSize\" rel=\"Ext.form.field.Base-method-setSize\" class=\"docClass\">setSize</a> method.</p>\n"},"dirtyCls":{"!type":"string","!doc":"<p>The CSS class to use when the field value <a href=\"#!/api/Ext.form.field.Base-method-isDirty\" rel=\"Ext.form.field.Base-method-isDirty\" class=\"docClass\">is dirty</a>.</p>\n"},"disabled":{"!type":"bool","!doc":"<p>True to disable the field. Disabled Fields will not be <a href=\"#!/api/Ext.form.Basic-method-submit\" rel=\"Ext.form.Basic-method-submit\" class=\"docClass\">submitted</a>.</p>\n"},"errorMsgCls":{"!type":"string","!doc":"<p>The CSS class to be applied to the error message element.</p>\n"},"fieldBodyCls":{"!type":"string","!doc":"<p>An extra CSS class to be applied to the body content element in addition to <a href=\"#!/api/Ext.form.Labelable-cfg-baseBodyCls\" rel=\"Ext.form.Labelable-cfg-baseBodyCls\" class=\"docClass\">baseBodyCls</a>.</p>\n"},"fieldCls":{"!type":"string","!doc":"<p>The default CSS class for the field input</p>\n"},"fieldLabel":{"!type":"string","!doc":"<p>The label for the field. It gets appended with the <a href=\"#!/api/Ext.form.Labelable-cfg-labelSeparator\" rel=\"Ext.form.Labelable-cfg-labelSeparator\" class=\"docClass\">labelSeparator</a>, and its position and sizing is\ndetermined by the <a href=\"#!/api/Ext.form.Labelable-cfg-labelAlign\" rel=\"Ext.form.Labelable-cfg-labelAlign\" class=\"docClass\">labelAlign</a>, <a href=\"#!/api/Ext.form.Labelable-cfg-labelWidth\" rel=\"Ext.form.Labelable-cfg-labelWidth\" class=\"docClass\">labelWidth</a>, and <a href=\"#!/api/Ext.form.Labelable-cfg-labelPad\" rel=\"Ext.form.Labelable-cfg-labelPad\" class=\"docClass\">labelPad</a> configs.</p>\n"},"fieldStyle":{"!type":"string","!doc":"<p>Optional CSS style(s) to be applied to the <a href=\"#!/api/Ext.form.field.Base-property-inputEl\" rel=\"Ext.form.field.Base-property-inputEl\" class=\"docClass\">field input element</a>. Should be a valid argument to\n<a href=\"#!/api/Ext.dom.Element-method-applyStyles\" rel=\"Ext.dom.Element-method-applyStyles\" class=\"docClass\">Ext.Element.applyStyles</a>. Defaults to undefined. See also the <a href=\"#!/api/Ext.form.field.Base-method-setFieldStyle\" rel=\"Ext.form.field.Base-method-setFieldStyle\" class=\"docClass\">setFieldStyle</a> method for changing\nthe style after initialization.</p>\n"},"fieldSubTpl":{"!type":"+Ext.XTemplate","!doc":"<p>The content of the field body is defined by this config option.</p>\n"},"focusCls":{"!type":"string","!doc":"<p>The CSS class to use when the field receives focus</p>\n"},"formItemCls":{"!type":"string","!doc":"<p>A CSS class to be applied to the outermost element to denote that it is participating in the form field layout.</p>\n"},"hideEmptyLabel":{"!type":"bool","!doc":"<p>When set to true, the label element (<a href=\"#!/api/Ext.form.Labelable-cfg-fieldLabel\" rel=\"Ext.form.Labelable-cfg-fieldLabel\" class=\"docClass\">fieldLabel</a> and <a href=\"#!/api/Ext.form.Labelable-cfg-labelSeparator\" rel=\"Ext.form.Labelable-cfg-labelSeparator\" class=\"docClass\">labelSeparator</a>) will be automatically\nhidden if the <a href=\"#!/api/Ext.form.Labelable-cfg-fieldLabel\" rel=\"Ext.form.Labelable-cfg-fieldLabel\" class=\"docClass\">fieldLabel</a> is empty. Setting this to false will cause the empty label element to be\nrendered and space to be reserved for it; this is useful if you want a field without a label to line up with\nother labeled fields in the same form.</p>\n\n<p>If you wish to unconditionall hide the label even if a non-empty fieldLabel is configured, then set the\n<a href=\"#!/api/Ext.form.Labelable-cfg-hideLabel\" rel=\"Ext.form.Labelable-cfg-hideLabel\" class=\"docClass\">hideLabel</a> config to true.</p>\n"},"hideLabel":{"!type":"bool","!doc":"<p>Set to true to completely hide the label element (<a href=\"#!/api/Ext.form.Labelable-cfg-fieldLabel\" rel=\"Ext.form.Labelable-cfg-fieldLabel\" class=\"docClass\">fieldLabel</a> and <a href=\"#!/api/Ext.form.Labelable-cfg-labelSeparator\" rel=\"Ext.form.Labelable-cfg-labelSeparator\" class=\"docClass\">labelSeparator</a>). Also see\n<a href=\"#!/api/Ext.form.Labelable-cfg-hideEmptyLabel\" rel=\"Ext.form.Labelable-cfg-hideEmptyLabel\" class=\"docClass\">hideEmptyLabel</a>, which controls whether space will be reserved for an empty fieldLabel.</p>\n"},"inputAttrTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\ninside the input element (as attributes). If an <code>XTemplate</code> is used, the component's\n<a href=\"#!/api/Ext.form.field.Base-method-getSubTplData\" rel=\"Ext.form.field.Base-method-getSubTplData\" class=\"docClass\">subTpl data</a> serves as the context.</p>\n"},"inputId":{"!type":"string","!doc":"<p>The id that will be given to the generated input DOM element. Defaults to an automatically generated id. If you\nconfigure this manually, you must make sure it is unique in the document.</p>\n"},"inputType":{"!type":"string","!doc":"<p>The type attribute for input fields -- e.g. radio, text, password, file. The extended types\nsupported by HTML5 inputs (url, email, etc.) may also be used, though using them will cause older browsers to\nfall back to 'text'.</p>\n\n<p>The type 'password' must be used to render that field type currently -- there is no separate Ext component for\nthat. You can use <a href=\"#!/api/Ext.form.field.File\" rel=\"Ext.form.field.File\" class=\"docClass\">Ext.form.field.File</a> which creates a custom-rendered file upload field, but if you want\na plain unstyled file input you can use a Base with inputType:'file'.</p>\n"},"invalidCls":{"!type":"string","!doc":"<p>The CSS class to use when marking the component invalid.</p>\n"},"invalidText":{"!type":"string","!doc":"<p>The error text to use when marking a field invalid and no message is provided</p>\n"},"labelAlign":{"!type":"string","!doc":"<p>Controls the position and alignment of the <a href=\"#!/api/Ext.form.Labelable-cfg-fieldLabel\" rel=\"Ext.form.Labelable-cfg-fieldLabel\" class=\"docClass\">fieldLabel</a>. Valid values are:</p>\n\n<ul>\n<li>\"left\" (the default) - The label is positioned to the left of the field, with its text aligned to the left.\nIts width is determined by the <a href=\"#!/api/Ext.form.Labelable-cfg-labelWidth\" rel=\"Ext.form.Labelable-cfg-labelWidth\" class=\"docClass\">labelWidth</a> config.</li>\n<li>\"top\" - The label is positioned above the field.</li>\n<li>\"right\" - The label is positioned to the left of the field, with its text aligned to the right.\nIts width is determined by the <a href=\"#!/api/Ext.form.Labelable-cfg-labelWidth\" rel=\"Ext.form.Labelable-cfg-labelWidth\" class=\"docClass\">labelWidth</a> config.</li>\n</ul>\n\n"},"labelAttrTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\ninside the label element (as attributes). If an <code>XTemplate</code> is used, the component's\n<a href=\"#!/api/Ext.AbstractComponent-cfg-renderData\" rel=\"Ext.AbstractComponent-cfg-renderData\" class=\"docClass\">render data</a> serves as the context.</p>\n"},"labelCls":{"!type":"string","!doc":"<p>The CSS class to be applied to the label element. This (single) CSS class is used to formulate the renderSelector\nand drives the field layout where it is concatenated with a hyphen ('-') and <a href=\"#!/api/Ext.form.Labelable-cfg-labelAlign\" rel=\"Ext.form.Labelable-cfg-labelAlign\" class=\"docClass\">labelAlign</a>. To add\nadditional classes, use <a href=\"#!/api/Ext.form.Labelable-cfg-labelClsExtra\" rel=\"Ext.form.Labelable-cfg-labelClsExtra\" class=\"docClass\">labelClsExtra</a>.</p>\n"},"labelClsExtra":{"!type":"string","!doc":"<p>An optional string of one or more additional CSS classes to add to the label element. Defaults to empty.</p>\n"},"labelPad":{"!type":"number","!doc":"<p>The amount of space in pixels between the <a href=\"#!/api/Ext.form.Labelable-cfg-fieldLabel\" rel=\"Ext.form.Labelable-cfg-fieldLabel\" class=\"docClass\">fieldLabel</a> and the input field.</p>\n"},"labelSeparator":{"!type":"string","!doc":"<p>Character(s) to be inserted at the end of the <a href=\"#!/api/Ext.form.Labelable-cfg-fieldLabel\" rel=\"Ext.form.Labelable-cfg-fieldLabel\" class=\"docClass\">label text</a>.</p>\n\n<p>Set to empty string to hide the separator completely.</p>\n"},"labelStyle":{"!type":"string","!doc":"<p>A CSS style specification string to apply directly to this field's label.</p>\n"},"labelWidth":{"!type":"number","!doc":"<p>The width of the <a href=\"#!/api/Ext.form.Labelable-cfg-fieldLabel\" rel=\"Ext.form.Labelable-cfg-fieldLabel\" class=\"docClass\">fieldLabel</a> in pixels. Only applicable if the <a href=\"#!/api/Ext.form.Labelable-cfg-labelAlign\" rel=\"Ext.form.Labelable-cfg-labelAlign\" class=\"docClass\">labelAlign</a> is set to \"left\" or\n\"right\".</p>\n"},"labelableRenderTpl":{"!type":"string|[string]|+Ext.XTemplate","!doc":"<p>The rendering template for the field decorations. Component classes using this mixin\nshould include logic to use this as their <a href=\"#!/api/Ext.AbstractComponent-cfg-renderTpl\" rel=\"Ext.AbstractComponent-cfg-renderTpl\" class=\"docClass\">renderTpl</a>,\nand implement the <a href=\"#!/api/Ext.form.Labelable-method-getSubTplMarkup\" rel=\"Ext.form.Labelable-method-getSubTplMarkup\" class=\"docClass\">getSubTplMarkup</a> method to generate the field body content.</p>\n\n<p>The structure of a field is a table as follows:</p>\n\n<p>If <code>labelAlign: 'left',</code>msgTarget: 'side'`</p>\n\n<pre><code> +----------------------+----------------------+-------------+\n | Label:               | InputField           | sideErrorEl |\n +----------------------+----------------------+-------------+\n</code></pre>\n\n<p>If <code>labelAlign: 'left',</code>msgTarget: 'under'`</p>\n\n<pre><code> +----------------------+------------------------------------+\n | Label:               | InputField      (colspan=2)        |\n |                      | underErrorEl                       |\n +----------------------+------------------------------------+\n</code></pre>\n\n<p>If <code>labelAlign: 'top',</code>msgTarget: 'side'`</p>\n\n<pre><code> +---------------------------------------------+-------------+\n | label                                       |             |\n | InputField                                  | sideErrorEl |\n +---------------------------------------------+-------------+\n</code></pre>\n\n<p>If <code>labelAlign: 'top',</code>msgTarget: 'under'`</p>\n\n<pre><code> +-----------------------------------------------------------+\n | label                                                     |\n | InputField                      (colspan=2)               |\n | underErrorEl                                              |\n +-----------------------------------------------------------+\n</code></pre>\n\n<p>The total columns always the same for fields with each setting of <a href=\"#!/api/Ext.form.Labelable-cfg-labelAlign\" rel=\"Ext.form.Labelable-cfg-labelAlign\" class=\"docClass\">labelAlign</a> because when\nrendered into a <a href=\"#!/api/Ext.layout.container.Form\" rel=\"Ext.layout.container.Form\" class=\"docClass\">Ext.layout.container.Form</a> layout, just the <code>TR</code> of the table\nwill be placed into the form's main <code>TABLE</code>, and the columns of all the siblings\nmust match so that they all line up. In a <a href=\"#!/api/Ext.layout.container.Form\" rel=\"Ext.layout.container.Form\" class=\"docClass\">Ext.layout.container.Form</a> layout, different\nsettings of <a href=\"#!/api/Ext.form.Labelable-cfg-labelAlign\" rel=\"Ext.form.Labelable-cfg-labelAlign\" class=\"docClass\">labelAlign</a> are not supported because of the incompatible column structure.</p>\n\n<p>When the triggerCell or side error cell are hidden or shown, the input cell's colspan\nis recalculated to maintain the correct 3 visible column count.</p>\n"},"msgTarget":{"!type":"string","!doc":"<p>The location where the error message text should display. Must be one of the following values:</p>\n\n<ul>\n<li><p><code>qtip</code> Display a quick tip containing the message when the user hovers over the field.\nThis is the default.</p>\n\n<p><strong><a href=\"#!/api/Ext.tip.QuickTipManager-method-init\" rel=\"Ext.tip.QuickTipManager-method-init\" class=\"docClass\">Ext.tip.QuickTipManager.init</a> must have been called for this setting to work.</strong></p></li>\n<li><p><code>title</code> Display the message in a default browser title attribute popup.</p></li>\n<li><code>under</code> Add a block div beneath the field containing the error message.</li>\n<li><code>side</code> Add an error icon to the right of the field, displaying the message in a popup on hover.</li>\n<li><code>none</code> Don't display any error message. This might be useful if you are implementing custom error display.</li>\n<li><code>[element id]</code> Add the error message directly to the innerHTML of the specified element.</li>\n</ul>\n\n"},"name":{"!type":"string","!doc":"<p>The name of the field. This is used as the parameter name when including the field value\nin a <a href=\"#!/api/Ext.form.Basic-method-submit\" rel=\"Ext.form.Basic-method-submit\" class=\"docClass\">form submit()</a>. If no name is configured, it falls back to the <a href=\"#!/api/Ext.form.field.Base-cfg-inputId\" rel=\"Ext.form.field.Base-cfg-inputId\" class=\"docClass\">inputId</a>.\nTo prevent the field from being included in the form submit, set <a href=\"#!/api/Ext.form.field.Base-cfg-submitValue\" rel=\"Ext.form.field.Base-cfg-submitValue\" class=\"docClass\">submitValue</a> to false.</p>\n"},"preventMark":{"!type":"bool","!doc":"<p>true to disable displaying any <a href=\"#!/api/Ext.form.Labelable-method-setActiveError\" rel=\"Ext.form.Labelable-method-setActiveError\" class=\"docClass\">error message</a> set on this object.</p>\n"},"readOnly":{"!type":"bool","!doc":"<p>true to mark the field as readOnly in HTML.</p>\n\n<p><strong>Note</strong>: this only sets the element's readOnly DOM attribute. Setting <code>readOnly=true</code>, for example, will not\ndisable triggering a ComboBox or Date; it gives you the option of forcing the user to choose via the trigger\nwithout typing in the text box. To hide the trigger use <code><a href=\"#!/api/Ext.form.field.Trigger-cfg-hideTrigger\" rel=\"Ext.form.field.Trigger-cfg-hideTrigger\" class=\"docClass\">hideTrigger</a></code>.</p>\n"},"readOnlyCls":{"!type":"string","!doc":"<p>The CSS class applied to the component's main element when it is <a href=\"#!/api/Ext.form.field.Base-cfg-readOnly\" rel=\"Ext.form.field.Base-cfg-readOnly\" class=\"docClass\">readOnly</a>.</p>\n"},"submitValue":{"!type":"bool","!doc":"<p>Setting this to false will prevent the field from being <a href=\"#!/api/Ext.form.Basic-method-submit\" rel=\"Ext.form.Basic-method-submit\" class=\"docClass\">submitted</a> even when it is\nnot disabled.</p>\n"},"tabIndex":{"!type":"number","!doc":"<p>The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via\napplyTo</p>\n"},"validateOnBlur":{"!type":"bool","!doc":"<p>Whether the field should validate when it loses focus. This will cause fields to be validated\nas the user steps through the fields in the form regardless of whether they are making changes to those fields\nalong the way. See also <a href=\"#!/api/Ext.form.field.Base-cfg-validateOnChange\" rel=\"Ext.form.field.Base-cfg-validateOnChange\" class=\"docClass\">validateOnChange</a>.</p>\n"},"validateOnChange":{"!type":"bool","!doc":"<p>Specifies whether this field should be validated immediately whenever a change in its value is detected.\nIf the validation results in a change in the field's validity, a <a href=\"#!/api/Ext.form.field.Field-event-validitychange\" rel=\"Ext.form.field.Field-event-validitychange\" class=\"docClass\">validitychange</a> event will be\nfired. This allows the field to show feedback about the validity of its contents immediately as the user is\ntyping.</p>\n\n<p>When set to false, feedback will not be immediate. However the form will still be validated before submitting if\nthe clientValidation option to <a href=\"#!/api/Ext.form.Basic-method-doAction\" rel=\"Ext.form.Basic-method-doAction\" class=\"docClass\">Ext.form.Basic.doAction</a> is enabled, or if the field or form are validated\nmanually.</p>\n\n<p>See also <a href=\"#!/api/Ext.form.field.Base-cfg-checkChangeEvents\" rel=\"Ext.form.field.Base-cfg-checkChangeEvents\" class=\"docClass\">Ext.form.field.Base.checkChangeEvents</a> for controlling how changes to the field's value are\ndetected.</p>\n"},"value":{"!type":"?","!doc":"<p>A value to initialize this field with.</p>\n"}},"Ext_form_field_Checkbox_cfg":{"!proto":"Ext_form_field_Base_cfg","afterBoxLabelTextTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nafter the box label text. If an <code>XTemplate</code> is used, the component's\n<a href=\"#!/api/Ext.form.field.Base-method-getSubTplData\" rel=\"Ext.form.field.Base-method-getSubTplData\" class=\"docClass\">subTpl data</a> serves as the context.</p>\n"},"afterBoxLabelTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nafter the box label element. If an <code>XTemplate</code> is used, the component's\n<a href=\"#!/api/Ext.form.field.Base-method-getSubTplData\" rel=\"Ext.form.field.Base-method-getSubTplData\" class=\"docClass\">subTpl data</a> serves as the context.</p>\n"},"beforeBoxLabelTextTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nbefore the box label text. If an <code>XTemplate</code> is used, the component's\n<a href=\"#!/api/Ext.form.field.Base-method-getSubTplData\" rel=\"Ext.form.field.Base-method-getSubTplData\" class=\"docClass\">subTpl data</a> serves as the context.</p>\n"},"beforeBoxLabelTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nbefore the box label element. If an <code>XTemplate</code> is used, the component's\n<a href=\"#!/api/Ext.form.field.Base-method-getSubTplData\" rel=\"Ext.form.field.Base-method-getSubTplData\" class=\"docClass\">subTpl data</a> serves as the context.</p>\n"},"boxLabel":{"!type":"string","!doc":"<p>An optional text label that will appear next to the checkbox. Whether it appears before or after the checkbox is\ndetermined by the <a href=\"#!/api/Ext.form.field.Checkbox-cfg-boxLabelAlign\" rel=\"Ext.form.field.Checkbox-cfg-boxLabelAlign\" class=\"docClass\">boxLabelAlign</a> config.</p>\n"},"boxLabelAlign":{"!type":"string","!doc":"<p>The position relative to the checkbox where the <a href=\"#!/api/Ext.form.field.Checkbox-cfg-boxLabel\" rel=\"Ext.form.field.Checkbox-cfg-boxLabel\" class=\"docClass\">boxLabel</a> should appear. Recognized values are 'before'\nand 'after'.</p>\n"},"boxLabelAttrTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\ninside the box label element (as attributes). If an <code>XTemplate</code> is used, the component's\n<a href=\"#!/api/Ext.form.field.Base-method-getSubTplData\" rel=\"Ext.form.field.Base-method-getSubTplData\" class=\"docClass\">subTpl data</a> serves as the context.</p>\n"},"boxLabelCls":{"!type":"string","!doc":"<p>The CSS class to be applied to the <a href=\"#!/api/Ext.form.field.Checkbox-cfg-boxLabel\" rel=\"Ext.form.field.Checkbox-cfg-boxLabel\" class=\"docClass\">boxLabel</a> element</p>\n"},"checkChangeEvents":{"!type":"[string]","!doc":"<p>private overrides</p>\n"},"checked":{"!type":"bool","!doc":"<p>true if the checkbox should render initially checked</p>\n"},"checkedCls":{"!type":"string","!doc":"<p>The CSS class(es) added to the component's main element when it is in the checked state.\nYou can add your own class (checkedCls='myClass x-form-cb-checked') or replace the default\nclass altogether (checkedCls='myClass').</p>\n"},"componentLayout":{"!type":"string|?","!doc":"<p>The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout\nmanager which sizes a Component's internal structure in response to the Component being sized.</p>\n\n<p>Generally, developers will not use this configuration as all provided Components which need their internal\nelements sizing (Such as <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">input fields</a>) come with their own componentLayout managers.</p>\n\n<p>The <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used on instances of the base <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\nclass which simply sizes the Component's encapsulating element to the height and width specified in the\n<a href=\"#!/api/Ext.form.field.Checkbox-method-setSize\" rel=\"Ext.form.field.Checkbox-method-setSize\" class=\"docClass\">setSize</a> method.</p>\n"},"fieldCls":{"!type":"string","!doc":"<p>The default CSS class for the checkbox</p>\n"},"fieldSubTpl":{"!type":"+Ext.XTemplate","!doc":"<p>note: {id} here is really {inputId}, but {cmpId} is available</p>\n"},"focusCls":{"!type":"string","!doc":"<p>The CSS class to use when the checkbox receives focus</p>\n"},"handler":{"!type":"fn()","!doc":"<p>A function called when the <a href=\"#!/api/Ext.form.field.Checkbox-cfg-checked\" rel=\"Ext.form.field.Checkbox-cfg-checked\" class=\"docClass\">checked</a> value changes (can be used instead of handling the <a href=\"#!/api/Ext.form.field.Checkbox-event-change\" rel=\"Ext.form.field.Checkbox-event-change\" class=\"docClass\">change event</a>).</p>\n"},"inputType":{"!type":"string","!doc":"<p>The type attribute for input fields -- e.g. radio, text, password, file. The extended types\nsupported by HTML5 inputs (url, email, etc.) may also be used, though using them will cause older browsers to\nfall back to 'text'.</p>\n\n<p>The type 'password' must be used to render that field type currently -- there is no separate Ext component for\nthat. You can use <a href=\"#!/api/Ext.form.field.File\" rel=\"Ext.form.field.File\" class=\"docClass\">Ext.form.field.File</a> which creates a custom-rendered file upload field, but if you want\na plain unstyled file input you can use a Base with inputType:'file'.</p>\n"},"inputValue":{"!type":"string","!doc":"<p>The value that should go into the generated input element's value attribute and should be used as the parameter\nvalue when submitting as part of a form.</p>\n"},"scope":{"!type":"?","!doc":"<p>An object to use as the scope ('this' reference) of the <a href=\"#!/api/Ext.form.field.Checkbox-cfg-handler\" rel=\"Ext.form.field.Checkbox-cfg-handler\" class=\"docClass\">handler</a> function.</p>\n\n<p>Defaults to this Checkbox.</p>\n"},"uncheckedValue":{"!type":"string","!doc":"<p>If configured, this will be submitted as the checkbox's value during form submit if the checkbox is unchecked. By\ndefault this is undefined, which results in nothing being submitted for the checkbox field when the form is\nsubmitted (the default behavior of HTML checkboxes).</p>\n"}},"Ext_form_field_ComboBox_cfg":{"!proto":"Ext_form_field_Picker_cfg","allQuery":{"!type":"string","!doc":"<p>The text query to send to the server to return all records for the list with no filtering</p>\n"},"anyMatch":{"!type":"bool","!doc":"<p>Configure as <code>true</code> to allow match the typed characters at any position in the <a href=\"#!/api/Ext.form.field.ComboBox-cfg-valueField\" rel=\"Ext.form.field.ComboBox-cfg-valueField\" class=\"docClass\">valueField</a>'s value.</p>\n"},"autoSelect":{"!type":"bool","!doc":"<p><code>true</code> to automatically highlight the first result gathered by the data store in the dropdown list when it is\nopened. A false value would cause nothing in the list to be highlighted automatically, so\nthe user would have to manually highlight an item before pressing the enter or <a href=\"#!/api/Ext.form.field.ComboBox-cfg-selectOnTab\" rel=\"Ext.form.field.ComboBox-cfg-selectOnTab\" class=\"docClass\">tab</a> key to\nselect it (unless the value of (<a href=\"#!/api/Ext.form.field.ComboBox-cfg-typeAhead\" rel=\"Ext.form.field.ComboBox-cfg-typeAhead\" class=\"docClass\">typeAhead</a>) were true), or use the mouse to select a value.</p>\n"},"caseSensitive":{"!type":"bool","!doc":"<p>Configure as <code>true</code> to make the filtering match with exact case matching</p>\n"},"componentLayout":{"!type":"string|?","!doc":"<p>The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout\nmanager which sizes a Component's internal structure in response to the Component being sized.</p>\n\n<p>Generally, developers will not use this configuration as all provided Components which need their internal\nelements sizing (Such as <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">input fields</a>) come with their own componentLayout managers.</p>\n\n<p>The <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used on instances of the base <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\nclass which simply sizes the Component's encapsulating element to the height and width specified in the\n<a href=\"#!/api/Ext.form.field.ComboBox-method-setSize\" rel=\"Ext.form.field.ComboBox-method-setSize\" class=\"docClass\">setSize</a> method.</p>\n"},"defaultListConfig":{"!type":"?","!doc":"<p>Set of options that will be used as defaults for the user-configured <a href=\"#!/api/Ext.form.field.ComboBox-cfg-listConfig\" rel=\"Ext.form.field.ComboBox-cfg-listConfig\" class=\"docClass\">listConfig</a> object.</p>\n"},"delimiter":{"!type":"string","!doc":"<p>The character(s) used to separate the <a href=\"#!/api/Ext.form.field.ComboBox-cfg-displayField\" rel=\"Ext.form.field.ComboBox-cfg-displayField\" class=\"docClass\">display values</a> of multiple selected items when\n<code><a href=\"#!/api/Ext.form.field.ComboBox-cfg-multiSelect\" rel=\"Ext.form.field.ComboBox-cfg-multiSelect\" class=\"docClass\">multiSelect</a> = true</code>.</p>\n"},"displayField":{"!type":"string","!doc":"<p>The underlying <a href=\"#!/api/Ext.data.Field-cfg-name\" rel=\"Ext.data.Field-cfg-name\" class=\"docClass\">data field name</a> to bind to this ComboBox.</p>\n\n<p>See also <code><a href=\"#!/api/Ext.form.field.ComboBox-cfg-valueField\" rel=\"Ext.form.field.ComboBox-cfg-valueField\" class=\"docClass\">valueField</a></code>.</p>\n"},"enableRegEx":{"!type":"bool","!doc":"<p><em>When <a href=\"#!/api/Ext.form.field.ComboBox-cfg-queryMode\" rel=\"Ext.form.field.ComboBox-cfg-queryMode\" class=\"docClass\">queryMode</a> is <code>'local'</code> only</em></p>\n\n<p>Set to <code>true</code> to have the ComboBox use the typed value as a RegExp source to filter the store to get possible matches.</p>\n"},"fieldSubTpl":{"!type":"+Ext.XTemplate","!doc":"<p>The content of the field body is defined by this config option.</p>\n"},"forceSelection":{"!type":"bool","!doc":"<p><code>true</code> to restrict the selected value to one of the values in the list, <code>false</code> to allow the user to set\narbitrary text into the field.</p>\n"},"growToLongestValue":{"!type":"bool","!doc":"<p><code>false</code> to not allow the component to resize itself when its data changes\n(and its <a href=\"#!/api/Ext.form.field.ComboBox-cfg-grow\" rel=\"Ext.form.field.ComboBox-cfg-grow\" class=\"docClass\">grow</a> property is <code>true</code>)</p>\n"},"hiddenDataCls":{"!type":"string","!doc":"<p>CSS class used to find the <a href=\"#!/api/Ext.form.field.ComboBox-property-hiddenDataEl\" rel=\"Ext.form.field.ComboBox-property-hiddenDataEl\" class=\"docClass\">hiddenDataEl</a></p>\n"},"hiddenName":{"!type":"string","!doc":"<p>The name of an underlying hidden field which will be synchronized with the underlying value of the combo.\nThis option is useful if the combo is part of a form element doing a regular form post. The hidden field\nwill not be created unless a hiddenName is specified.</p>\n"},"listConfig":{"!type":"?","!doc":"<p>An optional set of configuration properties that will be passed to the <a href=\"#!/api/Ext.view.BoundList\" rel=\"Ext.view.BoundList\" class=\"docClass\">Ext.view.BoundList</a>'s constructor.\nAny configuration that is valid for BoundList can be included. Some of the more useful ones are:</p>\n\n<ul>\n<li><a href=\"#!/api/Ext.view.BoundList-cfg-cls\" rel=\"Ext.view.BoundList-cfg-cls\" class=\"docClass\">cls</a> - defaults to empty</li>\n<li><a href=\"#!/api/Ext.view.BoundList-cfg-emptyText\" rel=\"Ext.view.BoundList-cfg-emptyText\" class=\"docClass\">emptyText</a> - defaults to empty string</li>\n<li><a href=\"#!/api/Ext.view.BoundList-cfg-itemSelector\" rel=\"Ext.view.BoundList-cfg-itemSelector\" class=\"docClass\">itemSelector</a> - defaults to the value defined in BoundList</li>\n<li><a href=\"#!/api/Ext.view.BoundList-cfg-loadingText\" rel=\"Ext.view.BoundList-cfg-loadingText\" class=\"docClass\">loadingText</a> - defaults to <code>'Loading...'</code></li>\n<li><a href=\"#!/api/Ext.view.BoundList-cfg-minWidth\" rel=\"Ext.view.BoundList-cfg-minWidth\" class=\"docClass\">minWidth</a> - defaults to <code>70</code></li>\n<li><a href=\"#!/api/Ext.view.BoundList-cfg-maxWidth\" rel=\"Ext.view.BoundList-cfg-maxWidth\" class=\"docClass\">maxWidth</a> - defaults to <code>undefined</code></li>\n<li><a href=\"#!/api/Ext.view.BoundList-cfg-maxHeight\" rel=\"Ext.view.BoundList-cfg-maxHeight\" class=\"docClass\">maxHeight</a> - defaults to <code>300</code></li>\n<li><a href=\"#!/api/Ext.view.BoundList-cfg-resizable\" rel=\"Ext.view.BoundList-cfg-resizable\" class=\"docClass\">resizable</a> - defaults to <code>false</code></li>\n<li><a href=\"#!/api/Ext.view.BoundList-cfg-shadow\" rel=\"Ext.view.BoundList-cfg-shadow\" class=\"docClass\">shadow</a> - defaults to <code>'sides'</code></li>\n<li><p><a href=\"#!/api/Ext.view.BoundList-cfg-width\" rel=\"Ext.view.BoundList-cfg-width\" class=\"docClass\">width</a> - defaults to <code>undefined</code> (automatically set to the width of the ComboBox\nfield if <a href=\"#!/api/Ext.form.field.ComboBox-cfg-matchFieldWidth\" rel=\"Ext.form.field.ComboBox-cfg-matchFieldWidth\" class=\"docClass\">matchFieldWidth</a> is true)\n<a href=\"#!/api/Ext.view.BoundList-method-getInnerTpl\" rel=\"Ext.view.BoundList-method-getInnerTpl\" class=\"docClass\">getInnerTpl</a> A function which returns a template string which renders\nthe ComboBox's <a href=\"#!/api/Ext.form.field.ComboBox-cfg-displayField\" rel=\"Ext.form.field.ComboBox-cfg-displayField\" class=\"docClass\">displayField</a> value in the dropdown. This defaults to just outputting the raw value,\nbut may use any <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> methods to produce output.</p>\n\n<p>The running template is configured with some extra properties that provide some context:</p>\n\n<pre><code>- field <a href=\"#!/api/Ext.form.field.ComboBox\" rel=\"Ext.form.field.ComboBox\" class=\"docClass\">ComboBox</a> This combobox\n- store <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Store</a> This combobox's data store\n</code></pre></li>\n</ul>\n\n"},"minChars":{"!type":"number","!doc":"<p>The minimum number of characters the user must type before autocomplete and <a href=\"#!/api/Ext.form.field.ComboBox-cfg-typeAhead\" rel=\"Ext.form.field.ComboBox-cfg-typeAhead\" class=\"docClass\">typeAhead</a> activate.</p>\n\n<p>Defaults to <code>4</code> if <code><a href=\"#!/api/Ext.form.field.ComboBox-cfg-queryMode\" rel=\"Ext.form.field.ComboBox-cfg-queryMode\" class=\"docClass\">queryMode</a> = 'remote'</code> or <code>0</code> if <code><a href=\"#!/api/Ext.form.field.ComboBox-cfg-queryMode\" rel=\"Ext.form.field.ComboBox-cfg-queryMode\" class=\"docClass\">queryMode</a> = 'local'</code>,\ndoes not apply if <code><a href=\"#!/api/Ext.form.field.Trigger-cfg-editable\" rel=\"Ext.form.field.Trigger-cfg-editable\" class=\"docClass\">editable</a> = false</code>.</p>\n"},"multiSelect":{"!type":"bool","!doc":"<p>If set to <code>true</code>, allows the combo field to hold more than one value at a time, and allows selecting multiple\nitems from the dropdown list. The combo's text field will show all selected values separated by the\n<a href=\"#!/api/Ext.form.field.ComboBox-cfg-delimiter\" rel=\"Ext.form.field.ComboBox-cfg-delimiter\" class=\"docClass\">delimiter</a>.</p>\n"},"pageSize":{"!type":"number","!doc":"<p>If greater than <code>0</code>, a <a href=\"#!/api/Ext.toolbar.Paging\" rel=\"Ext.toolbar.Paging\" class=\"docClass\">Ext.toolbar.Paging</a> is displayed in the footer of the dropdown list and the\n<a href=\"#!/api/Ext.form.field.ComboBox-method-doQuery\" rel=\"Ext.form.field.ComboBox-method-doQuery\" class=\"docClass\">filter queries</a> will execute with page start and <a href=\"#!/api/Ext.view.BoundList-cfg-pageSize\" rel=\"Ext.view.BoundList-cfg-pageSize\" class=\"docClass\">limit</a>\nparameters. Only applies when <code><a href=\"#!/api/Ext.form.field.ComboBox-cfg-queryMode\" rel=\"Ext.form.field.ComboBox-cfg-queryMode\" class=\"docClass\">queryMode</a> = 'remote'</code>.</p>\n"},"queryCaching":{"!type":"bool","!doc":"<p>When true, this prevents the combo from re-querying (either locally or remotely) when the current query\nis the same as the previous query.</p>\n"},"queryDelay":{"!type":"number","!doc":"<p>The length of time in milliseconds to delay between the start of typing and sending the query to filter the\ndropdown list.</p>\n\n<p>Defaults to <code>500</code> if <code><a href=\"#!/api/Ext.form.field.ComboBox-cfg-queryMode\" rel=\"Ext.form.field.ComboBox-cfg-queryMode\" class=\"docClass\">queryMode</a> = 'remote'</code> or <code>10</code> if <code><a href=\"#!/api/Ext.form.field.ComboBox-cfg-queryMode\" rel=\"Ext.form.field.ComboBox-cfg-queryMode\" class=\"docClass\">queryMode</a> = 'local'</code></p>\n"},"queryMode":{"!type":"string","!doc":"<p>The mode in which the ComboBox uses the configured Store. Acceptable values are:</p>\n\n<ul>\n<li><p><strong><code>'remote'</code></strong> :</p>\n\n<p>In <code>queryMode: 'remote'</code>, the ComboBox loads its Store dynamically based upon user interaction.</p>\n\n<p>This is typically used for \"autocomplete\" type inputs, and after the user finishes typing, the Store is <a href=\"#!/api/Ext.data.Store-method-load\" rel=\"Ext.data.Store-method-load\" class=\"docClass\">load</a>ed.</p>\n\n<p>A parameter containing the typed string is sent in the load request. The default parameter name for the input\nstring is <code>query</code>, but this can be configured using the <a href=\"#!/api/Ext.form.field.ComboBox-cfg-queryParam\" rel=\"Ext.form.field.ComboBox-cfg-queryParam\" class=\"docClass\">queryParam</a> config.</p>\n\n<p>In <code>queryMode: 'remote'</code>, the Store may be configured with <code><a href=\"#!/api/Ext.data.Store-cfg-remoteFilter\" rel=\"Ext.data.Store-cfg-remoteFilter\" class=\"docClass\">remoteFilter</a>:\ntrue</code>, and further filters may be <em>programatically</em> added to the Store which are then passed with every load\nrequest which allows the server to further refine the returned dataset.</p>\n\n<p>Typically, in an autocomplete situation, <a href=\"#!/api/Ext.form.field.ComboBox-cfg-hideTrigger\" rel=\"Ext.form.field.ComboBox-cfg-hideTrigger\" class=\"docClass\">hideTrigger</a> is configured <code>true</code> because it has no meaning for\nautocomplete.</p></li>\n<li><p><strong><code>'local'</code></strong> :</p>\n\n<p>ComboBox loads local data</p>\n\n<pre><code>var combo = new <a href=\"#!/api/Ext.form.field.ComboBox\" rel=\"Ext.form.field.ComboBox\" class=\"docClass\">Ext.form.field.ComboBox</a>({\n    renderTo: document.body,\n    queryMode: 'local',\n    store: new <a href=\"#!/api/Ext.data.ArrayStore\" rel=\"Ext.data.ArrayStore\" class=\"docClass\">Ext.data.ArrayStore</a>({\n        id: 0,\n        fields: [\n            'myId',  // numeric value is the key\n            'displayText'\n        ],\n        data: [[1, 'item1'], [2, 'item2']]  // data is local\n    }),\n    valueField: 'myId',\n    displayField: 'displayText',\n    triggerAction: 'all'\n});\n</code></pre></li>\n</ul>\n\n"},"queryParam":{"!type":"string","!doc":"<p>Name of the parameter used by the Store to pass the typed string when the ComboBox is configured with\n<code><a href=\"#!/api/Ext.form.field.ComboBox-cfg-queryMode\" rel=\"Ext.form.field.ComboBox-cfg-queryMode\" class=\"docClass\">queryMode</a>: 'remote'</code>. If explicitly set to a falsy value it will not be sent.</p>\n"},"selectOnTab":{"!type":"bool","!doc":"<p>Whether the Tab key should select the currently highlighted item.</p>\n"},"store":{"!type":"+Ext.data.Store|string|[?]","!doc":"<p>The data source to which this combo is bound. Acceptable values for this property are:</p>\n\n<ul>\n<li><strong>any <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Store</a> subclass</strong></li>\n<li><strong>an <a href=\"#!/api/Ext.data.Store-cfg-storeId\" rel=\"Ext.data.Store-cfg-storeId\" class=\"docClass\">ID of a store</a></strong></li>\n<li><p><strong>an Array</strong> : Arrays will be converted to a <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a> internally, automatically generating\n<a href=\"#!/api/Ext.data.Field-cfg-name\" rel=\"Ext.data.Field-cfg-name\" class=\"docClass\">field names</a> to work with all data components.</p>\n\n<ul>\n<li><p><strong>1-dimensional array</strong> : (e.g., <code>['Foo','Bar']</code>)</p>\n\n<p>A 1-dimensional array will automatically be expanded (each array item will be used for both the combo\n<a href=\"#!/api/Ext.form.field.ComboBox-cfg-valueField\" rel=\"Ext.form.field.ComboBox-cfg-valueField\" class=\"docClass\">valueField</a> and <a href=\"#!/api/Ext.form.field.ComboBox-cfg-displayField\" rel=\"Ext.form.field.ComboBox-cfg-displayField\" class=\"docClass\">displayField</a>)</p></li>\n<li><p><strong>2-dimensional array</strong> : (e.g., <code>[['f','Foo'],['b','Bar']]</code>)</p>\n\n<p>For a multi-dimensional array, the value in index 0 of each item will be assumed to be the combo\n<a href=\"#!/api/Ext.form.field.ComboBox-cfg-valueField\" rel=\"Ext.form.field.ComboBox-cfg-valueField\" class=\"docClass\">valueField</a>, while the value at index 1 is assumed to be the combo <a href=\"#!/api/Ext.form.field.ComboBox-cfg-displayField\" rel=\"Ext.form.field.ComboBox-cfg-displayField\" class=\"docClass\">displayField</a>.</p></li>\n</ul>\n</li>\n</ul>\n\n\n<p>See also <a href=\"#!/api/Ext.form.field.ComboBox-cfg-queryMode\" rel=\"Ext.form.field.ComboBox-cfg-queryMode\" class=\"docClass\">queryMode</a>.</p>\n"},"transform":{"!type":"string|+HTMLElement|+Ext.Element","!doc":"<p>The id, DOM node or <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a> of an existing HTML <code>&lt;select&gt;</code> element to convert into a ComboBox. The\ntarget select's options will be used to build the options in the ComboBox dropdown; a configured <a href=\"#!/api/Ext.form.field.ComboBox-cfg-store\" rel=\"Ext.form.field.ComboBox-cfg-store\" class=\"docClass\">store</a>\nwill take precedence over this.</p>\n"},"triggerAction":{"!type":"string","!doc":"<p>The action to execute when the trigger is clicked.</p>\n\n<ul>\n<li><p><strong><code>'all'</code></strong> :</p>\n\n<p><a href=\"#!/api/Ext.form.field.ComboBox-method-doQuery\" rel=\"Ext.form.field.ComboBox-method-doQuery\" class=\"docClass\">run the query</a> specified by the <code><a href=\"#!/api/Ext.form.field.ComboBox-cfg-allQuery\" rel=\"Ext.form.field.ComboBox-cfg-allQuery\" class=\"docClass\">allQuery</a></code> config option</p></li>\n<li><p><strong><code>'last'</code></strong> :</p>\n\n<p><a href=\"#!/api/Ext.form.field.ComboBox-method-doQuery\" rel=\"Ext.form.field.ComboBox-method-doQuery\" class=\"docClass\">run the query</a> using the <code><a href=\"#!/api/Ext.form.field.ComboBox-property-lastQuery\" rel=\"Ext.form.field.ComboBox-property-lastQuery\" class=\"docClass\">last query value</a></code>.</p></li>\n<li><p><strong><code>'query'</code></strong> :</p>\n\n<p><a href=\"#!/api/Ext.form.field.ComboBox-method-doQuery\" rel=\"Ext.form.field.ComboBox-method-doQuery\" class=\"docClass\">run the query</a> using the <a href=\"#!/api/Ext.form.field.Base-method-getRawValue\" rel=\"Ext.form.field.Base-method-getRawValue\" class=\"docClass\">raw value</a>.</p></li>\n</ul>\n\n\n<p>See also <code><a href=\"#!/api/Ext.form.field.ComboBox-cfg-queryParam\" rel=\"Ext.form.field.ComboBox-cfg-queryParam\" class=\"docClass\">queryParam</a></code>.</p>\n"},"triggerCls":{"!type":"string","!doc":"<p>An additional CSS class used to style the trigger button. The trigger will always get the <a href=\"#!/api/Ext.form.field.ComboBox-cfg-triggerBaseCls\" rel=\"Ext.form.field.ComboBox-cfg-triggerBaseCls\" class=\"docClass\">triggerBaseCls</a>\nby default and <code>triggerCls</code> will be <strong>appended</strong> if specified.</p>\n"},"typeAhead":{"!type":"bool","!doc":"<p><code>true</code> to populate and autoselect the remainder of the text being typed after a configurable delay\n(<a href=\"#!/api/Ext.form.field.ComboBox-cfg-typeAheadDelay\" rel=\"Ext.form.field.ComboBox-cfg-typeAheadDelay\" class=\"docClass\">typeAheadDelay</a>) if it matches a known value.</p>\n"},"typeAheadDelay":{"!type":"number","!doc":"<p>The length of time in milliseconds to wait until the typeahead text is displayed if <code><a href=\"#!/api/Ext.form.field.ComboBox-cfg-typeAhead\" rel=\"Ext.form.field.ComboBox-cfg-typeAhead\" class=\"docClass\">typeAhead</a> = true</code></p>\n"},"valueField":{"!type":"string","!doc":"<p>The underlying <a href=\"#!/api/Ext.data.Field-cfg-name\" rel=\"Ext.data.Field-cfg-name\" class=\"docClass\">data value name</a> to bind to this ComboBox.</p>\n\n<p><strong>Note</strong>: use of a <code>valueField</code> requires the user to make a selection in order for a value to be mapped. See also\n<code><a href=\"#!/api/Ext.form.field.ComboBox-cfg-displayField\" rel=\"Ext.form.field.ComboBox-cfg-displayField\" class=\"docClass\">displayField</a></code>.</p>\n\n<p>Defaults to match the value of the <a href=\"#!/api/Ext.form.field.ComboBox-cfg-displayField\" rel=\"Ext.form.field.ComboBox-cfg-displayField\" class=\"docClass\">displayField</a> config.</p>\n"},"valueNotFoundText":{"!type":"string","!doc":"<p>When using a name/value combo, if the value passed to setValue is not found in the store, valueNotFoundText will\nbe displayed as the field text if defined. If this default text is used, it means there\nis no value set and no validation will occur on this field.</p>\n"}},"Ext_form_field_Date_cfg":{"!proto":"Ext_form_field_Picker_cfg","altFormats":{"!type":"string","!doc":"<p>Multiple date formats separated by \"|\" to try when parsing a user input value and it does not match the defined\nformat.</p>\n"},"disabledDates":{"!type":"[string]","!doc":"<p>An array of \"dates\" to disable, as strings. These strings will be used to build a dynamic regular expression so\nthey are very powerful. Some examples:</p>\n\n<pre><code>// disable these exact dates:\ndisabledDates: [\"03/08/2003\", \"09/16/2003\"]\n// disable these days for every year:\ndisabledDates: [\"03/08\", \"09/16\"]\n// only match the beginning (useful if you are using short years):\ndisabledDates: [\"^03/08\"]\n// disable every day in March 2006:\ndisabledDates: [\"03/../2006\"]\n// disable every day in every March:\ndisabledDates: [\"^03\"]\n</code></pre>\n\n<p>Note that the format of the dates included in the array should exactly match the <a href=\"#!/api/Ext.form.field.Date-cfg-format\" rel=\"Ext.form.field.Date-cfg-format\" class=\"docClass\">format</a> config. In order\nto support regular expressions, if you are using a <a href=\"#!/api/Ext.form.field.Date-cfg-format\" rel=\"Ext.form.field.Date-cfg-format\" class=\"docClass\">date format</a> that has \".\" in it, you will have\nto escape the dot when restricting dates. For example: <code>[\"03\\\\.08\\\\.03\"]</code>.</p>\n"},"disabledDatesText":{"!type":"string","!doc":"<p>The tooltip text to display when the date falls on a disabled date.</p>\n"},"disabledDays":{"!type":"[number]","!doc":"<p>An array of days to disable, 0 based. Some examples:</p>\n\n<pre><code>// disable Sunday and Saturday:\ndisabledDays:  [0, 6]\n// disable weekdays:\ndisabledDays: [1,2,3,4,5]\n</code></pre>\n"},"disabledDaysText":{"!type":"string","!doc":"<p>The tooltip to display when the date falls on a disabled day.</p>\n"},"format":{"!type":"string","!doc":"<p>The default date format string which can be overriden for localization support. The format must be valid\naccording to <a href=\"#!/api/Ext.Date-method-parse\" rel=\"Ext.Date-method-parse\" class=\"docClass\">Ext.Date.parse</a>.</p>\n"},"grow":{"!type":"bool"},"growMax":{"!type":"number"},"growMin":{"!type":"number"},"invalidText":{"!type":"string","!doc":"<p>The error text to display when the date in the field is invalid.</p>\n"},"matchFieldWidth":{"!type":"bool","!doc":"<p>Whether the picker dropdown's width should be explicitly set to match the width of the field. Defaults to true.</p>\n"},"maxText":{"!type":"string","!doc":"<p>The error text to display when the date in the cell is after <a href=\"#!/api/Ext.form.field.Date-cfg-maxValue\" rel=\"Ext.form.field.Date-cfg-maxValue\" class=\"docClass\">maxValue</a>.</p>\n"},"maxValue":{"!type":"+Date|string","!doc":"<p>The maximum allowed date. Can be either a Javascript date object or a string date in a valid format.</p>\n"},"minText":{"!type":"string","!doc":"<p>The error text to display when the date in the cell is before <a href=\"#!/api/Ext.form.field.Date-cfg-minValue\" rel=\"Ext.form.field.Date-cfg-minValue\" class=\"docClass\">minValue</a>.</p>\n"},"minValue":{"!type":"+Date|string","!doc":"<p>The minimum allowed date. Can be either a Javascript date object or a string date in a valid format.</p>\n"},"showToday":{"!type":"bool","!doc":"<p>false to hide the footer area of the Date picker containing the Today button and disable the keyboard handler for\nspacebar that selects the current date.</p>\n"},"startDay":{"!type":"number","!doc":"<p>Day index at which the week should begin, 0-based.</p>\n\n<p>Defaults to <code>0</code> (Sunday).</p>\n"},"submitFormat":{"!type":"string","!doc":"<p>The date format string which will be submitted to the server. The format must be valid according to\n<a href=\"#!/api/Ext.Date-method-parse\" rel=\"Ext.Date-method-parse\" class=\"docClass\">Ext.Date.parse</a>.</p>\n\n<p>Defaults to <a href=\"#!/api/Ext.form.field.Date-cfg-format\" rel=\"Ext.form.field.Date-cfg-format\" class=\"docClass\">format</a>.</p>\n"},"triggerCls":{"!type":"string","!doc":"<p>An additional CSS class used to style the trigger button. The trigger will always get the class 'x-form-trigger'\nand triggerCls will be <strong>appended</strong> if specified (default class displays a calendar icon).</p>\n"},"useStrict":{"!type":"bool","!doc":"<p>True to enforce strict date parsing to prevent the default Javascript \"date rollover\".\nDefaults to the useStrict parameter set on <a href=\"#!/api/Ext.Date\" rel=\"Ext.Date\" class=\"docClass\">Ext.Date</a>\nSee <a href=\"#!/api/Ext.Date-method-parse\" rel=\"Ext.Date-method-parse\" class=\"docClass\">Ext.Date.parse</a>.</p>\n"}},"Ext_form_field_Display_cfg":{"!proto":"Ext_form_field_Base_cfg","checkChangeBuffer":{"!type":"number"},"checkChangeEvents":{"!type":"number"},"disabled":{"!type":"bool"},"fieldBodyCls":{"!type":"string","!doc":"<p>An extra CSS class to be applied to the body content element in addition to <a href=\"#!/api/Ext.form.field.Display-cfg-baseBodyCls\" rel=\"Ext.form.field.Display-cfg-baseBodyCls\" class=\"docClass\">baseBodyCls</a>.</p>\n"},"fieldCls":{"!type":"string","!doc":"<p>The default CSS class for the field.</p>\n"},"fieldSubTpl":{"!type":"+Ext.XTemplate","!doc":"<p>The content of the field body is defined by this config option.</p>\n"},"htmlEncode":{"!type":"bool","!doc":"<p>True to escape HTML in text when rendering it.</p>\n"},"inputType":{"!type":"string"},"readOnly":{"!type":"bool"},"renderer":{"!type":"fn()","!doc":"<p>A function to transform the raw value for display in the field. The function will receive 2 arguments, the raw value\nand the <a href=\"#!/api/Ext.form.field.Display\" rel=\"Ext.form.field.Display\" class=\"docClass\">Ext.form.field.Display</a> object.</p>\n"},"scope":{"!type":"?","!doc":"<p>The scope to execute the <a href=\"#!/api/Ext.form.field.Display-cfg-renderer\" rel=\"Ext.form.field.Display-cfg-renderer\" class=\"docClass\">renderer</a> function. Defaults to this.</p>\n"},"submitValue":{"!type":"bool","!doc":"<p>Setting this to false will prevent the field from being <a href=\"#!/api/Ext.form.Basic-method-submit\" rel=\"Ext.form.Basic-method-submit\" class=\"docClass\">submitted</a> even when it is\nnot disabled.</p>\n"},"validateOnChange":{"!type":"bool"}},"Ext_form_field_File_cfg":{"!proto":"Ext_form_field_Trigger_cfg","buttonConfig":{"!type":"?","!doc":"<p>A standard <a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a> config object.</p>\n"},"buttonMargin":{"!type":"number","!doc":"<p>The number of pixels of space reserved between the button and the text field. Note that this only\napplies if <a href=\"#!/api/Ext.form.field.File-cfg-buttonOnly\" rel=\"Ext.form.field.File-cfg-buttonOnly\" class=\"docClass\">buttonOnly</a> = false.</p>\n"},"buttonOnly":{"!type":"bool","!doc":"<p>True to display the file upload field as a button with no visible text field. If true, all\ninherited Text members will still be available.</p>\n"},"buttonText":{"!type":"string","!doc":"<p>The button text to display on the upload button. Note that if you supply a value for\n<a href=\"#!/api/Ext.form.field.File-cfg-buttonConfig\" rel=\"Ext.form.field.File-cfg-buttonConfig\" class=\"docClass\">buttonConfig</a>, the buttonConfig.text value will be used instead if available.</p>\n"},"clearOnSubmit":{"!type":"bool","!doc":"<p>True to clear the selected file value when the form this field belongs to\nis submitted to the server.</p>\n"},"componentLayout":{"!type":"string|?","!doc":"<p>private</p>\n"},"readOnly":{"!type":"bool","!doc":"<p>Unlike with other form fields, the readOnly config defaults to true in File field.</p>\n"}},"Ext_form_field_FileButton_cfg":{"!proto":"Ext_button_Button_cfg","cls":{"!type":"string","!doc":"<p>A CSS class string to apply to the button's main element.</p>\n"},"preventDefault":{"!type":"bool","!doc":"<p>True to prevent the default action when the <a href=\"#!/api/Ext.form.field.FileButton-cfg-clickEvent\" rel=\"Ext.form.field.FileButton-cfg-clickEvent\" class=\"docClass\">clickEvent</a> is processed.</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.form.field.FileButton-method-getEl\" rel=\"Ext.form.field.FileButton-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.form.field.FileButton-method-getEl\" rel=\"Ext.form.field.FileButton-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.form.field.FileButton-cfg-renderSelectors\" rel=\"Ext.form.field.FileButton-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.form.field.FileButton-cfg-childEls\" rel=\"Ext.form.field.FileButton-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"}},"Ext_form_field_Hidden_cfg":{"!proto":"Ext_form_field_Base_cfg","hidden":{"!type":"bool","!doc":"<p><code>true</code> to hide the component.</p>\n"},"hideLabel":{"!type":"bool","!doc":"<p>Set to true to completely hide the label element (<a href=\"#!/api/Ext.form.field.Hidden-cfg-fieldLabel\" rel=\"Ext.form.field.Hidden-cfg-fieldLabel\" class=\"docClass\">fieldLabel</a> and <a href=\"#!/api/Ext.form.field.Hidden-cfg-labelSeparator\" rel=\"Ext.form.field.Hidden-cfg-labelSeparator\" class=\"docClass\">labelSeparator</a>). Also see\n<a href=\"#!/api/Ext.form.field.Hidden-cfg-hideEmptyLabel\" rel=\"Ext.form.field.Hidden-cfg-hideEmptyLabel\" class=\"docClass\">hideEmptyLabel</a>, which controls whether space will be reserved for an empty fieldLabel.</p>\n"},"inputType":{"!type":"string","!doc":"<p>private</p>\n"}},"Ext_form_field_HtmlEditor_cfg":{"!proto":"Ext_form_FieldContainer_cfg","afterIFrameTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nafter the iframe element. If an <code>XTemplate</code> is used, the component's\n<a href=\"#!/api/Ext.form.field.Base-method-getSubTplData\" rel=\"Ext.form.field.Base-method-getSubTplData\" class=\"docClass\">subTpl data</a> serves as the context.</p>\n"},"afterTextAreaTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nafter the textarea element. If an <code>XTemplate</code> is used, the component's\n<a href=\"#!/api/Ext.form.field.Base-method-getSubTplData\" rel=\"Ext.form.field.Base-method-getSubTplData\" class=\"docClass\">subTpl data</a> serves as the context.</p>\n"},"allowDomMove":{"!type":"bool"},"applyTo":{"!type":"string"},"autoCreate":{"!type":"string"},"beforeIFrameTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nbefore the iframe element. If an <code>XTemplate</code> is used, the component's\n<a href=\"#!/api/Ext.form.field.Base-method-getSubTplData\" rel=\"Ext.form.field.Base-method-getSubTplData\" class=\"docClass\">subTpl data</a> serves as the context.</p>\n"},"beforeTextAreaTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nbefore the textarea element. If an <code>XTemplate</code> is used, the component's\n<a href=\"#!/api/Ext.form.field.Base-method-getSubTplData\" rel=\"Ext.form.field.Base-method-getSubTplData\" class=\"docClass\">subTpl data</a> serves as the context.</p>\n"},"componentLayout":{"!type":"string|?","!doc":"<p>The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout\nmanager which sizes a Component's internal structure in response to the Component being sized.</p>\n\n<p>Generally, developers will not use this configuration as all provided Components which need their internal\nelements sizing (Such as <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">input fields</a>) come with their own componentLayout managers.</p>\n\n<p>The <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used on instances of the base <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\nclass which simply sizes the Component's encapsulating element to the height and width specified in the\n<a href=\"#!/api/Ext.form.field.HtmlEditor-method-setSize\" rel=\"Ext.form.field.HtmlEditor-method-setSize\" class=\"docClass\">setSize</a> method.</p>\n"},"createLinkText":{"!type":"string","!doc":"<p>The default text for the create link prompt</p>\n"},"defaultButtonUI":{"!type":"string","!doc":"<p>A default <a href=\"#!/api/Ext.Component-cfg-ui\" rel=\"Ext.Component-cfg-ui\" class=\"docClass\">ui</a> to use for the HtmlEditor's toolbar\n<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Buttons</a></p>\n"},"defaultLinkValue":{"!type":"string","!doc":"<p>The default value for the create link prompt</p>\n"},"defaultValue":{"!type":"string","!doc":"<p>A default value to be put into the editor to resolve focus issues.</p>\n\n<p>Defaults to (Non-breaking space) in Opera and IE6,\n(Zero-width space) in all other browsers.</p>\n"},"disabled":{"!type":"bool","!doc":"<p>True to disable the field. Disabled Fields will not be <a href=\"#!/api/Ext.form.Basic-method-submit\" rel=\"Ext.form.Basic-method-submit\" class=\"docClass\">submitted</a>.</p>\n"},"enableAlignments":{"!type":"bool","!doc":"<p>Enable the left, center, right alignment buttons</p>\n"},"enableColors":{"!type":"bool","!doc":"<p>Enable the fore/highlight color buttons</p>\n"},"enableFont":{"!type":"bool","!doc":"<p>Enable font selection. Not available in Safari 2.</p>\n"},"enableFontSize":{"!type":"bool","!doc":"<p>Enable the increase/decrease font size buttons</p>\n"},"enableFormat":{"!type":"bool","!doc":"<p>Enable the bold, italic and underline buttons</p>\n"},"enableLinks":{"!type":"bool","!doc":"<p>Enable the create link button. Not available in Safari 2.</p>\n"},"enableLists":{"!type":"bool","!doc":"<p>Enable the bullet and numbered list buttons. Not available in Safari 2.</p>\n"},"enableSourceEdit":{"!type":"bool","!doc":"<p>Enable the switch to source edit button. Not available in Safari 2.</p>\n"},"fieldCls":{"!type":"string"},"focusCls":{"!type":"string"},"fontFamilies":{"!type":"[string]","!doc":"<p>An array of available font families</p>\n"},"hideMode":{"!type":"string","!doc":"<p>A String which specifies how this Component's encapsulating DOM element will be hidden. Values may be:</p>\n\n<ul>\n<li><code>'display'</code> : The Component will be hidden using the <code>display: none</code> style.</li>\n<li><code>'visibility'</code> : The Component will be hidden using the <code>visibility: hidden</code> style.</li>\n<li><code>'offsets'</code> : The Component will be hidden by absolutely positioning it out of the visible area of the document.\nThis is useful when a hidden Component must maintain measurable dimensions. Hiding using <code>display</code> results in a\nComponent having zero dimensions.</li>\n</ul>\n\n"},"iframeAttrTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\ninside the iframe element (as attributes). If an <code>XTemplate</code> is used, the component's\n<a href=\"#!/api/Ext.form.field.Base-method-getSubTplData\" rel=\"Ext.form.field.Base-method-getSubTplData\" class=\"docClass\">subTpl data</a> serves as the context.</p>\n"},"inputType":{"!type":"string"},"invalidCls":{"!type":"string"},"invalidText":{"!type":"string"},"msgFx":{"!type":"string"},"name":{"!type":"string","!doc":"<p>The name of the field. By default this is used as the parameter name when including the\n<a href=\"#!/api/Ext.form.field.Field-method-getSubmitData\" rel=\"Ext.form.field.Field-method-getSubmitData\" class=\"docClass\">field value</a> in a <a href=\"#!/api/Ext.form.Basic-method-submit\" rel=\"Ext.form.Basic-method-submit\" class=\"docClass\">form submit()</a>. To prevent the field from\nbeing included in the form submit, set <a href=\"#!/api/Ext.form.field.Field-cfg-submitValue\" rel=\"Ext.form.field.Field-cfg-submitValue\" class=\"docClass\">submitValue</a> to false.</p>\n"},"readOnly":{"!type":"string"},"submitValue":{"!type":"bool","!doc":"<p>Setting this to false will prevent the field from being <a href=\"#!/api/Ext.form.Basic-method-submit\" rel=\"Ext.form.Basic-method-submit\" class=\"docClass\">submitted</a> even when it is\nnot disabled.</p>\n"},"tabIndex":{"!type":"string"},"validateOnChange":{"!type":"bool","!doc":"<p>Specifies whether this field should be validated immediately whenever a change in its value is detected.\nIf the validation results in a change in the field's validity, a <a href=\"#!/api/Ext.form.field.Field-event-validitychange\" rel=\"Ext.form.field.Field-event-validitychange\" class=\"docClass\">validitychange</a> event will be\nfired. This allows the field to show feedback about the validity of its contents immediately as the user is\ntyping.</p>\n\n<p>When set to false, feedback will not be immediate. However the form will still be validated before submitting if\nthe clientValidation option to <a href=\"#!/api/Ext.form.Basic-method-doAction\" rel=\"Ext.form.Basic-method-doAction\" class=\"docClass\">Ext.form.Basic.doAction</a> is enabled, or if the field or form are validated\nmanually.</p>\n\n<p>See also <a href=\"#!/api/Ext.form.field.Base-cfg-checkChangeEvents\" rel=\"Ext.form.field.Base-cfg-checkChangeEvents\" class=\"docClass\">Ext.form.field.Base.checkChangeEvents</a> for controlling how changes to the field's value are\ndetected.</p>\n"},"value":{"!type":"?","!doc":"<p>A value to initialize this field with.</p>\n"}},"Ext_form_field_Number_cfg":{"!proto":"Ext_form_field_Spinner_cfg","allowDecimals":{"!type":"bool","!doc":"<p>False to disallow decimal values</p>\n"},"allowExponential":{"!type":"bool","!doc":"<p>Set to <code>false</code> to disallow Exponential number notation</p>\n"},"autoStripChars":{"!type":"bool","!doc":"<p>True to automatically strip not allowed characters from the field.</p>\n"},"baseChars":{"!type":"string","!doc":"<p>The base set of characters to evaluate as valid numbers.</p>\n"},"decimalPrecision":{"!type":"number","!doc":"<p>The maximum precision to display after the decimal separator</p>\n"},"decimalSeparator":{"!type":"string","!doc":"<p>Character(s) to allow as the decimal separator</p>\n"},"maskRe":{"!type":"+RegExp"},"maxText":{"!type":"string","!doc":"<p>Error text to display if the maximum value validation fails.</p>\n"},"maxValue":{"!type":"number","!doc":"<p>The maximum allowed value. Will be used by the field's validation logic, and for\n<a href=\"#!/api/Ext.form.field.Spinner-method-setSpinUpEnabled\" rel=\"Ext.form.field.Spinner-method-setSpinUpEnabled\" class=\"docClass\">enabling/disabling the up spinner button</a>.</p>\n\n<p>Defaults to Number.MAX_VALUE.</p>\n"},"minText":{"!type":"string","!doc":"<p>Error text to display if the minimum value validation fails.</p>\n"},"minValue":{"!type":"number","!doc":"<p>The minimum allowed value. Will be used by the field's validation logic,\nand for <a href=\"#!/api/Ext.form.field.Spinner-method-setSpinUpEnabled\" rel=\"Ext.form.field.Spinner-method-setSpinUpEnabled\" class=\"docClass\">enabling/disabling the down spinner button</a>.</p>\n\n<p>Defaults to Number.NEGATIVE_INFINITY.</p>\n"},"nanText":{"!type":"string","!doc":"<p>Error text to display if the value is not a valid number. For example, this can happen if a valid character like\n'.' or '-' is left in the field with no number.</p>\n"},"negativeText":{"!type":"string","!doc":"<p>Error text to display if the value is negative and <a href=\"#!/api/Ext.form.field.Number-cfg-minValue\" rel=\"Ext.form.field.Number-cfg-minValue\" class=\"docClass\">minValue</a> is set to 0. This is used instead of the\n<a href=\"#!/api/Ext.form.field.Number-cfg-minText\" rel=\"Ext.form.field.Number-cfg-minText\" class=\"docClass\">minText</a> in that circumstance only.</p>\n"},"step":{"!type":"number","!doc":"<p>Specifies a numeric interval by which the field's value will be incremented or decremented when the user invokes\nthe spinner.</p>\n"},"stripCharsRe":{"!type":"+RegExp"},"submitLocaleSeparator":{"!type":"bool","!doc":"<p>False to ensure that the <a href=\"#!/api/Ext.form.field.Number-method-getSubmitValue\" rel=\"Ext.form.field.Number-method-getSubmitValue\" class=\"docClass\">getSubmitValue</a> method strips\nalways uses <code>.</code> as the separator, regardless of the <a href=\"#!/api/Ext.form.field.Number-cfg-decimalSeparator\" rel=\"Ext.form.field.Number-cfg-decimalSeparator\" class=\"docClass\">decimalSeparator</a>\nconfiguration.</p>\n"}},"Ext_form_field_Picker_cfg":{"!proto":"Ext_form_field_Trigger_cfg","editable":{"!type":"bool","!doc":"<p>False to prevent the user from typing text directly into the field; the field can only have its value set via\nselecting a value from the picker. In this state, the picker can also be opened by clicking directly on the input\nfield itself.</p>\n"},"matchFieldWidth":{"!type":"bool","!doc":"<p>Whether the picker dropdown's width should be explicitly set to match the width of the field. Defaults to true.</p>\n"},"openCls":{"!type":"string","!doc":"<p>A class to be added to the field's <a href=\"#!/api/Ext.form.field.Picker-property-bodyEl\" rel=\"Ext.form.field.Picker-property-bodyEl\" class=\"docClass\">bodyEl</a> element when the picker is opened.</p>\n"},"pickerAlign":{"!type":"string","!doc":"<p>The <a href=\"#!/api/Ext.util.Positionable-method-alignTo\" rel=\"Ext.util.Positionable-method-alignTo\" class=\"docClass\">alignment position</a> with which to align the picker. Defaults to \"tl-bl?\"</p>\n"},"pickerOffset":{"!type":"[number]","!doc":"<p>An offset [x,y] to use in addition to the <a href=\"#!/api/Ext.form.field.Picker-cfg-pickerAlign\" rel=\"Ext.form.field.Picker-cfg-pickerAlign\" class=\"docClass\">pickerAlign</a> when positioning the picker.\nDefaults to undefined.</p>\n"}},"Ext_form_field_Radio_cfg":{"!proto":"Ext_form_field_Checkbox_cfg","focusCls":{"!type":"string","!doc":"<p>The CSS class to use when the radio field receives focus</p>\n"},"inputType":{"!type":"string","!doc":"<p>private</p>\n"},"uncheckedValue":{"!type":"string"}},"Ext_form_field_Spinner_cfg":{"!proto":"Ext_form_field_Trigger_cfg","keyNavEnabled":{"!type":"bool","!doc":"<p>Specifies whether the up and down arrow keys should trigger spinning up and down. Defaults to true.</p>\n"},"mouseWheelEnabled":{"!type":"bool","!doc":"<p>Specifies whether the mouse wheel should trigger spinning up and down while the field has focus.\nDefaults to true.</p>\n"},"repeatTriggerClick":{"!type":"bool","!doc":"<p>Whether a <a href=\"#!/api/Ext.util.ClickRepeater\" rel=\"Ext.util.ClickRepeater\" class=\"docClass\">click repeater</a> should be attached to the spinner buttons.\nDefaults to true.</p>\n"},"spinDownEnabled":{"!type":"bool","!doc":"<p>Specifies whether the down spinner button is enabled. Defaults to true. To change this after the component is\ncreated, use the <a href=\"#!/api/Ext.form.field.Spinner-method-setSpinDownEnabled\" rel=\"Ext.form.field.Spinner-method-setSpinDownEnabled\" class=\"docClass\">setSpinDownEnabled</a> method.</p>\n"},"spinUpEnabled":{"!type":"bool","!doc":"<p>Specifies whether the up spinner button is enabled. Defaults to true. To change this after the component is\ncreated, use the <a href=\"#!/api/Ext.form.field.Spinner-method-setSpinUpEnabled\" rel=\"Ext.form.field.Spinner-method-setSpinUpEnabled\" class=\"docClass\">setSpinUpEnabled</a> method.</p>\n"}},"Ext_form_field_Text_cfg":{"!proto":"Ext_form_field_Base_cfg","allowBlank":{"!type":"bool","!doc":"<p>Specify false to validate that the value's length must be > 0. If <code>true</code>, then a blank value is <strong>always</strong> taken to be valid regardless of any <a href=\"#!/api/Ext.form.field.Text-cfg-vtype\" rel=\"Ext.form.field.Text-cfg-vtype\" class=\"docClass\">vtype</a>\nvalidation that may be applied.</p>\n\n<p>If <a href=\"#!/api/Ext.form.field.Text-cfg-vtype\" rel=\"Ext.form.field.Text-cfg-vtype\" class=\"docClass\">vtype</a> validation must still be applied to blank values, configure <a href=\"#!/api/Ext.form.field.Text-cfg-validateBlank\" rel=\"Ext.form.field.Text-cfg-validateBlank\" class=\"docClass\">validateBlank</a> as <code>true</code>;</p>\n"},"allowOnlyWhitespace":{"!type":"bool","!doc":"<p>Specify false to automatically trim the value before validating\nthe whether the value is blank. Setting this to false automatically\nsets <a href=\"#!/api/Ext.form.field.Text-cfg-allowBlank\" rel=\"Ext.form.field.Text-cfg-allowBlank\" class=\"docClass\">allowBlank</a> to false.</p>\n"},"blankText":{"!type":"string","!doc":"<p>The error text to display if the <strong><a href=\"#!/api/Ext.form.field.Text-cfg-allowBlank\" rel=\"Ext.form.field.Text-cfg-allowBlank\" class=\"docClass\">allowBlank</a></strong> validation fails</p>\n"},"disableKeyFilter":{"!type":"bool","!doc":"<p>Specify true to disable input keystroke filtering</p>\n"},"emptyCls":{"!type":"string","!doc":"<p>The CSS class to apply to an empty field to style the <strong><a href=\"#!/api/Ext.form.field.Text-cfg-emptyText\" rel=\"Ext.form.field.Text-cfg-emptyText\" class=\"docClass\">emptyText</a></strong>.\nThis class is automatically added and removed as needed depending on the current field value.</p>\n"},"emptyText":{"!type":"string","!doc":"<p>The default text to place into an empty field.</p>\n\n<p>Note that normally this value will be submitted to the server if this field is enabled; to prevent this you can\nset the <a href=\"#!/api/Ext.form.action.Action-cfg-submitEmptyText\" rel=\"Ext.form.action.Action-cfg-submitEmptyText\" class=\"docClass\">submitEmptyText</a> option of <a href=\"#!/api/Ext.form.Basic-method-submit\" rel=\"Ext.form.Basic-method-submit\" class=\"docClass\">Ext.form.Basic.submit</a> to\nfalse.</p>\n\n<p>Also note that if you use <a href=\"#!/api/Ext.form.field.Text-cfg-inputType\" rel=\"Ext.form.field.Text-cfg-inputType\" class=\"docClass\">inputType</a>:'file', <a href=\"#!/api/Ext.form.field.Text-cfg-emptyText\" rel=\"Ext.form.field.Text-cfg-emptyText\" class=\"docClass\">emptyText</a> is not supported and should be\navoided.</p>\n\n<p>Note that for browsers that support it, setting this property will use the HTML 5 placeholder attribute, and for\nolder browsers that don't support the HTML 5 placeholder attribute the value will be placed directly into the input\nelement itself as the raw value. This means that older browsers will obfuscate the <a href=\"#!/api/Ext.form.field.Text-cfg-emptyText\" rel=\"Ext.form.field.Text-cfg-emptyText\" class=\"docClass\">emptyText</a> value for\npassword input fields.</p>\n"},"enableKeyEvents":{"!type":"bool","!doc":"<p>true to enable the proxying of key events for the HTML input field</p>\n"},"enforceMaxLength":{"!type":"bool","!doc":"<p>True to set the maxLength property on the underlying input field. Defaults to false</p>\n"},"grow":{"!type":"bool","!doc":"<p>true if this field should automatically grow and shrink to its content</p>\n"},"growAppend":{"!type":"string","!doc":"<p>A string that will be appended to the field's current value for the purposes of calculating the target field\nsize. Only used when the <a href=\"#!/api/Ext.form.field.Text-cfg-grow\" rel=\"Ext.form.field.Text-cfg-grow\" class=\"docClass\">grow</a> config is true. Defaults to a single capital \"W\" (the widest character in\ncommon fonts) to leave enough space for the next typed character and avoid the field value shifting before the\nwidth is adjusted.</p>\n"},"growMax":{"!type":"number","!doc":"<p>The maximum width to allow when <code><a href=\"#!/api/Ext.form.field.Text-cfg-grow\" rel=\"Ext.form.field.Text-cfg-grow\" class=\"docClass\">grow</a> = true</code></p>\n"},"growMin":{"!type":"number","!doc":"<p>The minimum width to allow when <code><a href=\"#!/api/Ext.form.field.Text-cfg-grow\" rel=\"Ext.form.field.Text-cfg-grow\" class=\"docClass\">grow</a> = true</code></p>\n"},"maskRe":{"!type":"+RegExp","!doc":"<p>An input mask regular expression that will be used to filter keystrokes (character being\ntyped) that do not match.\nNote: It does not filter characters already in the input.</p>\n"},"maxLength":{"!type":"number","!doc":"<p>Maximum input field length allowed by validation. This behavior is intended to\nprovide instant feedback to the user by improving usability to allow pasting and editing or overtyping and back\ntracking. To restrict the maximum number of characters that can be entered into the field use the\n<strong><a href=\"#!/api/Ext.form.field.Text-cfg-enforceMaxLength\" rel=\"Ext.form.field.Text-cfg-enforceMaxLength\" class=\"docClass\">enforceMaxLength</a></strong> option.</p>\n\n<p>Defaults to Number.MAX_VALUE.</p>\n"},"maxLengthText":{"!type":"string","!doc":"<p>Error text to display if the <strong><a href=\"#!/api/Ext.form.field.Text-cfg-maxLength\" rel=\"Ext.form.field.Text-cfg-maxLength\" class=\"docClass\">maximum length</a></strong> validation fails</p>\n"},"minLength":{"!type":"number","!doc":"<p>Minimum input field length required</p>\n"},"minLengthText":{"!type":"string","!doc":"<p>Error text to display if the <strong><a href=\"#!/api/Ext.form.field.Text-cfg-minLength\" rel=\"Ext.form.field.Text-cfg-minLength\" class=\"docClass\">minimum length</a></strong> validation fails.</p>\n"},"regex":{"!type":"+RegExp","!doc":"<p>A JavaScript RegExp object to be tested against the field value during validation.\nIf the test fails, the field will be marked invalid using\neither <strong><a href=\"#!/api/Ext.form.field.Text-cfg-regexText\" rel=\"Ext.form.field.Text-cfg-regexText\" class=\"docClass\">regexText</a></strong> or <strong><a href=\"#!/api/Ext.form.field.Text-cfg-invalidText\" rel=\"Ext.form.field.Text-cfg-invalidText\" class=\"docClass\">invalidText</a></strong>.</p>\n"},"regexText":{"!type":"string","!doc":"<p>The error text to display if <strong><a href=\"#!/api/Ext.form.field.Text-cfg-regex\" rel=\"Ext.form.field.Text-cfg-regex\" class=\"docClass\">regex</a></strong> is used and the test fails during validation</p>\n"},"requiredCls":{"!type":"string","!doc":"<p>The CSS class to apply to a required field, i.e. a field where <strong><a href=\"#!/api/Ext.form.field.Text-cfg-allowBlank\" rel=\"Ext.form.field.Text-cfg-allowBlank\" class=\"docClass\">allowBlank</a></strong> is false.</p>\n"},"selectOnFocus":{"!type":"bool","!doc":"<p>true to automatically select any existing field text when the field receives input focus</p>\n"},"size":{"!type":"number","!doc":"<p>An initial value for the 'size' attribute on the text input element. This is only used if the field has no\nconfigured <a href=\"#!/api/Ext.form.field.Text-cfg-width\" rel=\"Ext.form.field.Text-cfg-width\" class=\"docClass\">width</a> and is not given a width by its container's layout. Defaults to 20.</p>\n"},"stripCharsRe":{"!type":"+RegExp","!doc":"<p>A JavaScript RegExp object used to strip unwanted content from the value\nduring input. If <code>stripCharsRe</code> is specified,\nevery <em>character sequence</em> matching <code>stripCharsRe</code> will be removed.</p>\n"},"validateBlank":{"!type":"bool","!doc":"<p>Specify as <code>true</code> to modify the behaviour of <a href=\"#!/api/Ext.form.field.Text-cfg-allowBlank\" rel=\"Ext.form.field.Text-cfg-allowBlank\" class=\"docClass\">allowBlank</a> so that blank values are not passed as valid, but are subject to any configure <a href=\"#!/api/Ext.form.field.Text-cfg-vtype\" rel=\"Ext.form.field.Text-cfg-vtype\" class=\"docClass\">vtype</a> validation.</p>\n"},"validator":{"!type":"fn()","!doc":"<p>A custom validation function to be called during field validation (<a href=\"#!/api/Ext.form.field.Text-method-getErrors\" rel=\"Ext.form.field.Text-method-getErrors\" class=\"docClass\">getErrors</a>).\nIf specified, this function will be called first, allowing the developer to override the default validation\nprocess.</p>\n\n<p>This function will be passed the following parameters:</p>\n"},"vtype":{"!type":"string","!doc":"<p>A validation type name as defined in <a href=\"#!/api/Ext.form.field.VTypes\" rel=\"Ext.form.field.VTypes\" class=\"docClass\">Ext.form.field.VTypes</a></p>\n"},"vtypeText":{"!type":"string","!doc":"<p>A custom error message to display in place of the default message provided for the <strong><code><a href=\"#!/api/Ext.form.field.Text-cfg-vtype\" rel=\"Ext.form.field.Text-cfg-vtype\" class=\"docClass\">vtype</a></code></strong> currently\nset for this field. <strong>Note</strong>: only applies if <strong><code><a href=\"#!/api/Ext.form.field.Text-cfg-vtype\" rel=\"Ext.form.field.Text-cfg-vtype\" class=\"docClass\">vtype</a></code></strong> is set, else ignored.</p>\n"}},"Ext_form_field_TextArea_cfg":{"!proto":"Ext_form_field_Text_cfg","cols":{"!type":"number","!doc":"<p>An initial value for the 'cols' attribute on the textarea element. This is only used if the component has no\nconfigured <a href=\"#!/api/Ext.form.field.TextArea-cfg-width\" rel=\"Ext.form.field.TextArea-cfg-width\" class=\"docClass\">width</a> and is not given a width by its container's layout.</p>\n"},"componentLayout":{"!type":"string|?","!doc":"<p>private</p>\n"},"enterIsSpecial":{"!type":"bool","!doc":"<p>True if you want the ENTER key to be classed as a special key and the <a href=\"#!/api/Ext.form.field.TextArea-event-specialkey\" rel=\"Ext.form.field.TextArea-event-specialkey\" class=\"docClass\">specialkey</a> event to be fired\nwhen ENTER is pressed.</p>\n"},"fieldSubTpl":{"!type":"+Ext.XTemplate","!doc":"<p>This template includes a <code>\\n</code> after <code>&lt;textarea&gt;</code> opening tag so that an\ninitial value starting with <code>\\n</code> does not lose its first character when\nthe markup is parsed. Both textareas below have the same value:</p>\n\n<pre><code>&lt;textarea&gt;initial value&lt;/textarea&gt;\n\n&lt;textarea&gt;\ninitial value\n&lt;/textarea&gt;\n</code></pre>\n"},"growAppend":{"!type":"string","!doc":"<p>A string that will be appended to the field's current value for the purposes of calculating the target field\nsize. Only used when the <a href=\"#!/api/Ext.form.field.TextArea-cfg-grow\" rel=\"Ext.form.field.TextArea-cfg-grow\" class=\"docClass\">grow</a> config is true. Defaults to a newline for TextArea to ensure there is\nalways a space below the current line.</p>\n"},"growMax":{"!type":"number","!doc":"<p>The maximum height to allow when <a href=\"#!/api/Ext.form.field.TextArea-cfg-grow\" rel=\"Ext.form.field.TextArea-cfg-grow\" class=\"docClass\">grow</a>=true</p>\n"},"growMin":{"!type":"number","!doc":"<p>The minimum height to allow when <a href=\"#!/api/Ext.form.field.TextArea-cfg-grow\" rel=\"Ext.form.field.TextArea-cfg-grow\" class=\"docClass\">grow</a>=true</p>\n"},"preventScrollbars":{"!type":"bool","!doc":"<p>true to prevent scrollbars from appearing regardless of how much text is in the field. This option is only\nrelevant when <a href=\"#!/api/Ext.form.field.TextArea-cfg-grow\" rel=\"Ext.form.field.TextArea-cfg-grow\" class=\"docClass\">grow</a> is true. Equivalent to setting overflow: hidden.</p>\n"},"rows":{"!type":"number","!doc":"<p>An initial value for the 'rows' attribute on the textarea element. This is only used if the component has no\nconfigured <a href=\"#!/api/Ext.form.field.TextArea-cfg-height\" rel=\"Ext.form.field.TextArea-cfg-height\" class=\"docClass\">height</a> and is not given a height by its container's layout. Defaults to 4.</p>\n"}},"Ext_form_field_Time_cfg":{"!proto":"Ext_form_field_ComboBox_cfg","altFormats":{"!type":"string","!doc":"<p>Multiple date formats separated by \"|\" to try when parsing a user input value and it doesn't match the defined\nformat.</p>\n"},"displayField":{"!type":"string","!doc":"<p>The underlying <a href=\"#!/api/Ext.data.Field-cfg-name\" rel=\"Ext.data.Field-cfg-name\" class=\"docClass\">data field name</a> to bind to this ComboBox.</p>\n\n<p>See also <code><a href=\"#!/api/Ext.form.field.Time-cfg-valueField\" rel=\"Ext.form.field.Time-cfg-valueField\" class=\"docClass\">valueField</a></code>.</p>\n"},"format":{"!type":"string","!doc":"<p>The default time format string which can be overriden for localization support. The format must be valid\naccording to <a href=\"#!/api/Ext.Date-method-parse\" rel=\"Ext.Date-method-parse\" class=\"docClass\">Ext.Date.parse</a>.</p>\n\n<p>Defaults to <code>'g:i A'</code>, e.g., <code>'3:15 PM'</code>. For 24-hour time format try <code>'H:i'</code> instead.</p>\n"},"increment":{"!type":"number","!doc":"<p>The number of minutes between each time value in the list.</p>\n"},"invalidText":{"!type":"string","!doc":"<p>The error text to display when the time in the field is invalid.</p>\n"},"maxText":{"!type":"string","!doc":"<p>The error text to display when the entered time is after <a href=\"#!/api/Ext.form.field.Time-cfg-maxValue\" rel=\"Ext.form.field.Time-cfg-maxValue\" class=\"docClass\">maxValue</a>.</p>\n"},"maxValue":{"!type":"+Date|string","!doc":"<p>The maximum allowed time. Can be either a Javascript date object with a valid time value or a string time in a\nvalid format -- see <a href=\"#!/api/Ext.form.field.Time-cfg-format\" rel=\"Ext.form.field.Time-cfg-format\" class=\"docClass\">format</a> and <a href=\"#!/api/Ext.form.field.Time-cfg-altFormats\" rel=\"Ext.form.field.Time-cfg-altFormats\" class=\"docClass\">altFormats</a>.</p>\n"},"minText":{"!type":"string","!doc":"<p>The error text to display when the entered time is before <a href=\"#!/api/Ext.form.field.Time-cfg-minValue\" rel=\"Ext.form.field.Time-cfg-minValue\" class=\"docClass\">minValue</a>.</p>\n"},"minValue":{"!type":"+Date|string","!doc":"<p>The minimum allowed time. Can be either a Javascript date object with a valid time value or a string time in a\nvalid format -- see <a href=\"#!/api/Ext.form.field.Time-cfg-format\" rel=\"Ext.form.field.Time-cfg-format\" class=\"docClass\">format</a> and <a href=\"#!/api/Ext.form.field.Time-cfg-altFormats\" rel=\"Ext.form.field.Time-cfg-altFormats\" class=\"docClass\">altFormats</a>.</p>\n"},"pickerMaxHeight":{"!type":"number","!doc":"<p>The maximum height of the <a href=\"#!/api/Ext.picker.Time\" rel=\"Ext.picker.Time\" class=\"docClass\">Ext.picker.Time</a> dropdown.</p>\n"},"queryMode":{"!type":"string","!doc":"<p>The mode in which the ComboBox uses the configured Store. Acceptable values are:</p>\n\n<ul>\n<li><p><strong><code>'remote'</code></strong> :</p>\n\n<p>In <code>queryMode: 'remote'</code>, the ComboBox loads its Store dynamically based upon user interaction.</p>\n\n<p>This is typically used for \"autocomplete\" type inputs, and after the user finishes typing, the Store is <a href=\"#!/api/Ext.data.Store-method-load\" rel=\"Ext.data.Store-method-load\" class=\"docClass\">load</a>ed.</p>\n\n<p>A parameter containing the typed string is sent in the load request. The default parameter name for the input\nstring is <code>query</code>, but this can be configured using the <a href=\"#!/api/Ext.form.field.Time-cfg-queryParam\" rel=\"Ext.form.field.Time-cfg-queryParam\" class=\"docClass\">queryParam</a> config.</p>\n\n<p>In <code>queryMode: 'remote'</code>, the Store may be configured with <code><a href=\"#!/api/Ext.data.Store-cfg-remoteFilter\" rel=\"Ext.data.Store-cfg-remoteFilter\" class=\"docClass\">remoteFilter</a>:\ntrue</code>, and further filters may be <em>programatically</em> added to the Store which are then passed with every load\nrequest which allows the server to further refine the returned dataset.</p>\n\n<p>Typically, in an autocomplete situation, <a href=\"#!/api/Ext.form.field.Time-cfg-hideTrigger\" rel=\"Ext.form.field.Time-cfg-hideTrigger\" class=\"docClass\">hideTrigger</a> is configured <code>true</code> because it has no meaning for\nautocomplete.</p></li>\n<li><p><strong><code>'local'</code></strong> :</p>\n\n<p>ComboBox loads local data</p>\n\n<pre><code>var combo = new <a href=\"#!/api/Ext.form.field.ComboBox\" rel=\"Ext.form.field.ComboBox\" class=\"docClass\">Ext.form.field.ComboBox</a>({\n    renderTo: document.body,\n    queryMode: 'local',\n    store: new <a href=\"#!/api/Ext.data.ArrayStore\" rel=\"Ext.data.ArrayStore\" class=\"docClass\">Ext.data.ArrayStore</a>({\n        id: 0,\n        fields: [\n            'myId',  // numeric value is the key\n            'displayText'\n        ],\n        data: [[1, 'item1'], [2, 'item2']]  // data is local\n    }),\n    valueField: 'myId',\n    displayField: 'displayText',\n    triggerAction: 'all'\n});\n</code></pre></li>\n</ul>\n\n"},"selectOnTab":{"!type":"bool","!doc":"<p>Whether the Tab key should select the currently highlighted item.</p>\n"},"snapToIncrement":{"!type":"bool","!doc":"<p>Specify as <code>true</code> to enforce that only values on the <a href=\"#!/api/Ext.form.field.Time-cfg-increment\" rel=\"Ext.form.field.Time-cfg-increment\" class=\"docClass\">increment</a> boundary are accepted.</p>\n"},"submitFormat":{"!type":"string","!doc":"<p>The date format string which will be submitted to the server. The format must be valid according to\n<a href=\"#!/api/Ext.Date-method-parse\" rel=\"Ext.Date-method-parse\" class=\"docClass\">Ext.Date.parse</a>.</p>\n\n<p>Defaults to <a href=\"#!/api/Ext.form.field.Time-cfg-format\" rel=\"Ext.form.field.Time-cfg-format\" class=\"docClass\">format</a>.</p>\n"},"triggerCls":{"!type":"string","!doc":"<p>An additional CSS class used to style the trigger button. The trigger will always get the <a href=\"#!/api/Ext.form.field.Time-cfg-triggerBaseCls\" rel=\"Ext.form.field.Time-cfg-triggerBaseCls\" class=\"docClass\">triggerBaseCls</a>\nby default and triggerCls will be <strong>appended</strong> if specified.</p>\n"},"valueField":{"!type":"string","!doc":"<p>The underlying <a href=\"#!/api/Ext.data.Field-cfg-name\" rel=\"Ext.data.Field-cfg-name\" class=\"docClass\">data value name</a> to bind to this ComboBox.</p>\n\n<p><strong>Note</strong>: use of a <code>valueField</code> requires the user to make a selection in order for a value to be mapped. See also\n<code><a href=\"#!/api/Ext.form.field.Time-cfg-displayField\" rel=\"Ext.form.field.Time-cfg-displayField\" class=\"docClass\">displayField</a></code>.</p>\n\n<p>Defaults to match the value of the <a href=\"#!/api/Ext.form.field.Time-cfg-displayField\" rel=\"Ext.form.field.Time-cfg-displayField\" class=\"docClass\">displayField</a> config.</p>\n"}},"Ext_form_field_Trigger_cfg":{"!proto":"Ext_form_field_Text_cfg","componentLayout":{"!type":"string|?","!doc":"<p>The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout\nmanager which sizes a Component's internal structure in response to the Component being sized.</p>\n\n<p>Generally, developers will not use this configuration as all provided Components which need their internal\nelements sizing (Such as <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">input fields</a>) come with their own componentLayout managers.</p>\n\n<p>The <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used on instances of the base <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\nclass which simply sizes the Component's encapsulating element to the height and width specified in the\n<a href=\"#!/api/Ext.form.field.Trigger-method-setSize\" rel=\"Ext.form.field.Trigger-method-setSize\" class=\"docClass\">setSize</a> method.</p>\n"},"editable":{"!type":"bool","!doc":"<p>false to prevent the user from typing text directly into the field; the field can only have its value set via an\naction invoked by the trigger.</p>\n"},"grow":{"!type":"bool"},"growMax":{"!type":"number"},"growMin":{"!type":"number"},"hideTrigger":{"!type":"bool","!doc":"<p>true to hide the trigger element and display only the base text field</p>\n"},"readOnly":{"!type":"bool","!doc":"<p>true to prevent the user from changing the field, and hides the trigger. Supercedes the editable and hideTrigger\noptions if the value is true.</p>\n"},"repeatTriggerClick":{"!type":"bool","!doc":"<p>true to attach a <a href=\"#!/api/Ext.util.ClickRepeater\" rel=\"Ext.util.ClickRepeater\" class=\"docClass\">click repeater</a> to the trigger.</p>\n"},"selectOnFocus":{"!type":"bool","!doc":"<p>true to select any existing text in the field immediately on focus. Only applies when\n<a href=\"#!/api/Ext.form.field.Trigger-cfg-editable\" rel=\"Ext.form.field.Trigger-cfg-editable\" class=\"docClass\">editable</a> = true</p>\n"},"triggerBaseCls":{"!type":"string","!doc":"<p>The base CSS class that is always added to the trigger button. The <a href=\"#!/api/Ext.form.field.Trigger-cfg-triggerCls\" rel=\"Ext.form.field.Trigger-cfg-triggerCls\" class=\"docClass\">triggerCls</a> will be appended in\naddition to this class.</p>\n"},"triggerCls":{"!type":"string","!doc":"<p>An additional CSS class used to style the trigger button. The trigger will always get the <a href=\"#!/api/Ext.form.field.Trigger-cfg-triggerBaseCls\" rel=\"Ext.form.field.Trigger-cfg-triggerBaseCls\" class=\"docClass\">triggerBaseCls</a>\nby default and triggerCls will be <strong>appended</strong> if specified.</p>\n"},"triggerNoEditCls":{"!type":"string","!doc":"<p>The CSS class that is added to the text field when component is read-only or not editable.</p>\n"},"triggerWrapCls":{"!type":"string","!doc":"<p>The CSS class that is added to the div wrapping the trigger button(s).</p>\n"}},"Ext_fx_Anim_cfg":{"!proto":"Ext_Base_cfg","alternate":{"!type":"bool","!doc":"<p>Used in conjunction with iterations to reverse the animation each time an iteration completes.</p>\n"},"callback":{"!type":"fn()","!doc":"<p>A function to be run after the animation has completed.</p>\n"},"delay":{"!type":"number","!doc":"<p>Time to delay before starting the animation.</p>\n"},"duration":{"!type":"number","!doc":"<p>Time in milliseconds for a single animation to last. If the <a href=\"#!/api/Ext.fx.Anim-cfg-iterations\" rel=\"Ext.fx.Anim-cfg-iterations\" class=\"docClass\">iterations</a> property is\nspecified, then each animate will take the same duration for each iteration.</p>\n"},"dynamic":{"!type":"bool","!doc":"<p>Currently only for Component Animation: Only set a component's outer element size bypassing layouts.\nSet to true to do full layouts for every frame of the animation.</p>\n"},"easing":{"!type":"string","!doc":"<p>This describes how the intermediate values used during a transition will be calculated.\nIt allows for a transition to change speed over its duration.</p>\n\n<ul>\n<li>backIn</li>\n<li>backOut</li>\n<li>bounceIn</li>\n<li>bounceOut</li>\n<li>ease</li>\n<li>easeIn</li>\n<li>easeOut</li>\n<li>easeInOut</li>\n<li>elasticIn</li>\n<li>elasticOut</li>\n<li>cubic-bezier(x1, y1, x2, y2)</li>\n</ul>\n\n\n<p>Note that cubic-bezier will create a custom easing curve following the CSS3 <a href=\"http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag\">transition-timing-function</a>\nspecification.  The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2). All values must\nbe in the range [0, 1] or the definition is invalid.</p>\n"},"from":{"!type":"?","!doc":"<p>An object containing property/value pairs for the beginning of the animation.  If not specified, the current state of the\nExt.fx.target will be used. For example:</p>\n\n<pre><code>from: {\n    opacity: 0,       // Transparent\n    color: '#ffffff', // White\n    left: 0\n}\n</code></pre>\n"},"iterations":{"!type":"number","!doc":"<p>Number of times to execute the animation.</p>\n"},"keyframes":{"!type":"?","!doc":"<p>Animation keyframes follow the CSS3 Animation configuration pattern. 'from' is always considered '0%' and 'to'\nis considered '100%'. <strong>Every keyframe declaration must have a keyframe rule for 0% and 100%, possibly defined using\n\"from\" or \"to\".</strong>  A keyframe declaration without these keyframe selectors is invalid and will not be available for\nanimation.  The keyframe declaration for a keyframe rule consists of properties and values. Properties that are unable to\nbe animated are ignored in these rules, with the exception of 'easing' which can be changed at each keyframe. For example:</p>\n\n<pre><code>keyframes : {\n    '0%': {\n        left: 100\n    },\n    '40%': {\n        left: 150\n    },\n    '60%': {\n        left: 75\n    },\n    '100%': {\n        left: 100\n    }\n}\n</code></pre>\n"},"listeners":{"!type":"?","!doc":"<p>A config object containing one or more event handlers to be added to this object during initialization. This\nshould be a valid listeners config object as specified in the <a href=\"#!/api/Ext.util.Observable-method-addListener\" rel=\"Ext.util.Observable-method-addListener\" class=\"docClass\">addListener</a> example for attaching multiple\nhandlers at once.</p>\n\n<p><strong>DOM events from Ext JS <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Components</a></strong></p>\n\n<p>While <em>some</em> Ext JS Component classes export selected DOM events (e.g. \"click\", \"mouseover\" etc), this is usually\nonly done when extra value can be added. For example the <a href=\"#!/api/Ext.view.View\" rel=\"Ext.view.View\" class=\"docClass\">DataView</a>'s <strong><code><a href=\"#!/api/Ext.view.View-event-itemclick\" rel=\"Ext.view.View-event-itemclick\" class=\"docClass\">itemclick</a></code></strong> event passing the node clicked on. To access DOM events directly from a\nchild element of a Component, we need to specify the <code>element</code> option to identify the Component property to add a\nDOM listener to:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>({\n    width: 400,\n    height: 200,\n    dockedItems: [{\n        xtype: 'toolbar'\n    }],\n    listeners: {\n        click: {\n            element: 'el', //bind to the underlying el property on the panel\n            fn: function(){ console.log('click el'); }\n        },\n        dblclick: {\n            element: 'body', //bind to the underlying body property on the panel\n            fn: function(){ console.log('dblclick body'); }\n        }\n    }\n});\n</code></pre>\n"},"reverse":{"!type":"bool","!doc":"<p>Run the animation from the end to the beginning\nDefaults to false.</p>\n"},"scope":{"!type":"fn()","!doc":"<p>The scope that the <a href=\"#!/api/Ext.fx.Anim-cfg-callback\" rel=\"Ext.fx.Anim-cfg-callback\" class=\"docClass\">callback</a> function will be called with</p>\n"},"target":{"!type":"string|?","!doc":"<p>The <a href=\"#!/api/Ext.fx.target.Target\" rel=\"Ext.fx.target.Target\" class=\"docClass\">Ext.fx.target.Target</a> to apply the animation to.  This should only be specified when creating an <a href=\"#!/api/Ext.fx.Anim\" rel=\"Ext.fx.Anim\" class=\"docClass\">Ext.fx.Anim</a> directly.\nThe target does not need to be a <a href=\"#!/api/Ext.fx.target.Target\" rel=\"Ext.fx.target.Target\" class=\"docClass\">Ext.fx.target.Target</a> instance, it can be the underlying object. For example, you can\npass a Component, Element or Sprite as the target and the Anim will create the appropriate <a href=\"#!/api/Ext.fx.target.Target\" rel=\"Ext.fx.target.Target\" class=\"docClass\">Ext.fx.target.Target</a> object\nautomatically.</p>\n"},"to":{"!type":"?","!doc":"<p>An object containing property/value pairs for the end of the animation. For example:</p>\n\n<pre><code>to: {\n    opacity: 1,       // Opaque\n    color: '#00ff00', // Green\n    left: 500\n}\n</code></pre>\n"}},"Ext_grid_CellEditor_cfg":{"!proto":"Ext_Editor_cfg","alignment":{"!type":"string","!doc":"<p>The position to align to (see <a href=\"#!/api/Ext.util.Positionable-method-alignTo\" rel=\"Ext.util.Positionable-method-alignTo\" class=\"docClass\">Ext.util.Positionable.alignTo</a> for more details).</p>\n"},"cls":{"!type":"string","!doc":"<p>An optional extra CSS class that will be added to this component's Element. This can be useful\nfor adding customized styles to the component or any of its children using standard CSS rules.</p>\n"},"hideEl":{"!type":"bool","!doc":"<p>False to keep the bound element visible while the editor is displayed</p>\n"},"shadow":{"!type":"bool|string","!doc":"<p>\"sides\" for sides/bottom only, \"frame\" for 4-way shadow, and \"drop\" for bottom-right shadow.</p>\n"}},"Ext_grid_ColumnComponentLayout_cfg":{"!proto":"Ext_layout_component_Auto_cfg","setWidthInDom":{"!type":"bool","!doc":"<p>When publishing width of an auto Component, it is usually not written to the DOM.\nSetting this to <code>true</code> overrides this behaviour.</p>\n"}},"Ext_grid_ColumnLayout_cfg":{"!proto":"Ext_layout_container_HBox_cfg"},"Ext_grid_Panel_cfg":{"!proto":"Ext_panel_Table_cfg","columns":{"!type":"[+Ext.grid.column.Column]|?","!doc":"<p>An array of <a href=\"#!/api/Ext.grid.column.Column\" rel=\"Ext.grid.column.Column\" class=\"docClass\">column</a> definition objects which define all columns that appear in this\ngrid. Each column definition provides the header text for the column, and a definition of where the data for that\ncolumn comes from.</p>\n\n<p>This can also be a configuration object for a {<a href=\"#!/api/Ext.grid.header.Container\" rel=\"Ext.grid.header.Container\" class=\"docClass\">Ext.grid.header.Container</a> HeaderContainer} which may override\ncertain default configurations if necessary. For example, the special layout may be overridden to use a simpler\nlayout, or one can set default values shared by all columns:</p>\n\n<pre><code>columns: {\n    items: [\n        {\n            text: \"Column A\"\n            dataIndex: \"field_A\"\n        },{\n            text: \"Column B\",\n            dataIndex: \"field_B\"\n        }, \n        ...\n    ],\n    defaults: {\n        flex: 1\n    }\n}\n</code></pre>\n"},"rowLines":{"!type":"bool","!doc":"<p>False to remove row line styling</p>\n"},"viewType":{"!type":"string","!doc":"<p>An xtype of view to use. This is automatically set to 'gridview' by <a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Grid</a>\nand to 'treeview' by <a href=\"#!/api/Ext.tree.Panel\" rel=\"Ext.tree.Panel\" class=\"docClass\">Tree</a>.</p>\n"}},"Ext_grid_RowEditor_cfg":{"!proto":"Ext_form_Panel_cfg","border":{"!type":"number|string|bool","!doc":"<p>Specifies the border size for this component. The border can be a single numeric value to apply to all sides or it can\nbe a CSS style specification for each style, for example: '10 5 3 10' (top, right, bottom, left).</p>\n\n<p>For components that have no border by default, setting this won't make the border appear by itself.\nYou also need to specify border color and style:</p>\n\n<pre><code>border: 5,\nstyle: {\n    borderColor: 'red',\n    borderStyle: 'solid'\n}\n</code></pre>\n\n<p>To turn off the border, use <code>border: false</code>.</p>\n"},"hideMode":{"!type":"string","!doc":"<p>Change the hideMode to offsets so that we get accurate measurements when\nthe roweditor is hidden for laying out things like a TriggerField.</p>\n"}},"Ext_grid_RowEditorButtons_cfg":{"!proto":"Ext_container_Container_cfg","frame":{"!type":"bool","!doc":"<p>Specify as <code>true</code> to have the Component inject framing elements within the Component at render time to provide a\ngraphical rounded frame around the Component content.</p>\n\n<p>This is only necessary when running on outdated, or non standard-compliant browsers such as Microsoft's Internet\nExplorer prior to version 9 which do not support rounded corners natively.</p>\n\n<p>The extra space taken up by this framing is available from the read only property <a href=\"#!/api/Ext.grid.RowEditorButtons-property-frameSize\" rel=\"Ext.grid.RowEditorButtons-property-frameSize\" class=\"docClass\">frameSize</a>.</p>\n"},"shrinkWrap":{"!type":"bool|number","!doc":"<p>If this property is a number, it is interpreted as follows:</p>\n\n<ul>\n<li>0: Neither width nor height depend on content. This is equivalent to <code>false</code>.</li>\n<li>1: Width depends on content (shrink wraps), but height does not.</li>\n<li>2: Height depends on content (shrink wraps), but width does not. The default.</li>\n<li>3: Both width and height depend on content (shrink wrap). This is equivalent to <code>true</code>.</li>\n</ul>\n\n\n<p>In CSS terms, shrink-wrap width is analogous to an inline-block element as opposed\nto a block-level element. Some container layouts always shrink-wrap their children,\neffectively ignoring this property (e.g., <a href=\"#!/api/Ext.layout.container.HBox\" rel=\"Ext.layout.container.HBox\" class=\"docClass\">Ext.layout.container.HBox</a>,\n<a href=\"#!/api/Ext.layout.container.VBox\" rel=\"Ext.layout.container.VBox\" class=\"docClass\">Ext.layout.container.VBox</a>, <a href=\"#!/api/Ext.layout.component.Dock\" rel=\"Ext.layout.component.Dock\" class=\"docClass\">Ext.layout.component.Dock</a>).</p>\n"}},"Ext_grid_View_cfg":{"!proto":"Ext_view_Table_cfg","autoScroll":{"!type":"bool","!doc":"<p><code>true</code> to use overflow:'auto' on the components layout element and show scroll bars automatically when necessary,\n<code>false</code> to clip any overflowing content.\nThis should not be combined with <a href=\"#!/api/Ext.grid.View-cfg-overflowX\" rel=\"Ext.grid.View-cfg-overflowX\" class=\"docClass\">overflowX</a> or  <a href=\"#!/api/Ext.grid.View-cfg-overflowY\" rel=\"Ext.grid.View-cfg-overflowY\" class=\"docClass\">overflowY</a>.</p>\n"},"stripeRows":{"!type":"bool","!doc":"<p>True to stripe the rows.</p>\n\n<p>This causes the CSS class <strong><code>x-grid-row-alt</code></strong> to be added to alternate rows of the grid. A default CSS rule is\nprovided which sets a background color, but you can override this with a rule which either overrides the\n<strong>background-color</strong> style using the <code>!important</code> modifier, or which uses a CSS selector of higher specificity.</p>\n"}},"Ext_grid_ViewDropZone_cfg":{"!proto":"Ext_view_DropZone_cfg"},"Ext_grid_column_Action_cfg":{"!proto":"Ext_grid_column_Column_cfg","altText":{"!type":"string","!doc":"<p>The alt text to use for the image element.</p>\n"},"disabled":{"!type":"bool","!doc":"<p>If true, the action will not respond to click events, and will be displayed semi-opaque.</p>\n\n<p>This Column may also be disabled on a row by row basis by configuring a <a href=\"#!/api/Ext.grid.column.Action-cfg-isDisabled\" rel=\"Ext.grid.column.Action-cfg-isDisabled\" class=\"docClass\">isDisabled</a> method.</p>\n"},"getClass":{"!type":"fn()","!doc":"<p>A function which returns the CSS class to apply to the icon image.</p>\n"},"getTip":{"!type":"fn()","!doc":"<p>A function which returns the tooltip string for any row.</p>\n"},"handler":{"!type":"fn()","!doc":"<p>A function called when the icon is clicked.</p>\n"},"icon":{"!type":"string","!doc":"<p>The URL of an image to display as the clickable element in the column.</p>\n\n<p>Defaults to <code><a href=\"#!/api/Ext-property-BLANK_IMAGE_URL\" rel=\"Ext-property-BLANK_IMAGE_URL\" class=\"docClass\">Ext.BLANK_IMAGE_URL</a></code>.</p>\n"},"iconCls":{"!type":"string","!doc":"<p>A CSS class to apply to the icon image. To determine the class dynamically, configure the Column with\na <code><a href=\"#!/api/Ext.grid.column.Action-cfg-getClass\" rel=\"Ext.grid.column.Action-cfg-getClass\" class=\"docClass\">getClass</a></code> function.</p>\n"},"isDisabled":{"!type":"fn()","!doc":"<p>A function which determines whether the action item for any row is disabled and returns <code>true</code> or <code>false</code>.</p>\n"},"items":{"!type":"[?]","!doc":"<p>An Array which may contain multiple icon definitions, each element of which may contain:</p>\n"},"menuText":{"!type":"string","!doc":"<p>Text to display in this column's menu item if no <a href=\"#!/api/Ext.grid.column.Action-cfg-text\" rel=\"Ext.grid.column.Action-cfg-text\" class=\"docClass\">text</a> was specified as a header.</p>\n"},"scope":{"!type":"?","!doc":"<p>The scope (<code>this</code> reference) in which the <code><a href=\"#!/api/Ext.grid.column.Action-cfg-handler\" rel=\"Ext.grid.column.Action-cfg-handler\" class=\"docClass\">handler</a></code>, <code><a href=\"#!/api/Ext.grid.column.Action-cfg-getClass\" rel=\"Ext.grid.column.Action-cfg-getClass\" class=\"docClass\">getClass</a></code>, <code><a href=\"#!/api/Ext.grid.column.Action-cfg-isDisabled\" rel=\"Ext.grid.column.Action-cfg-isDisabled\" class=\"docClass\">isDisabled</a></code> and <code><a href=\"#!/api/Ext.grid.column.Action-cfg-getTip\" rel=\"Ext.grid.column.Action-cfg-getTip\" class=\"docClass\">getTip</a></code> fuctions are executed.\nDefaults to this Column.</p>\n"},"sortable":{"!type":"bool","!doc":"<p>False to disable sorting of this column. Whether local/remote sorting is used is specified in\n<code><a href=\"#!/api/Ext.data.Store-cfg-remoteSort\" rel=\"Ext.data.Store-cfg-remoteSort\" class=\"docClass\">Ext.data.Store.remoteSort</a></code>.</p>\n"},"stopSelection":{"!type":"bool","!doc":"<p>Prevent grid selection upon mousedown.</p>\n"},"tooltip":{"!type":"string","!doc":"<p>A tooltip message to be displayed on hover. <a href=\"#!/api/Ext.tip.QuickTipManager-method-init\" rel=\"Ext.tip.QuickTipManager-method-init\" class=\"docClass\">Ext.tip.QuickTipManager</a> must\nhave been initialized.</p>\n\n<p>The tooltip may also be determined on a row by row basis by configuring a <a href=\"#!/api/Ext.grid.column.Action-cfg-getTip\" rel=\"Ext.grid.column.Action-cfg-getTip\" class=\"docClass\">getTip</a> method.</p>\n"}},"Ext_grid_column_Boolean_cfg":{"!proto":"Ext_grid_column_Column_cfg","falseText":{"!type":"string","!doc":"<p>The string returned by the renderer when the column value is falsey (but not undefined).</p>\n"},"trueText":{"!type":"string","!doc":"<p>The string returned by the renderer when the column value is not falsey.</p>\n"},"undefinedText":{"!type":"string","!doc":"<p>The string returned by the renderer when the column value is undefined.</p>\n"}},"Ext_grid_column_Column_cfg":{"!proto":"Ext_grid_header_Container_cfg","align":{"!type":"string","!doc":"<p>Sets the alignment of the header and rendered columns.\nPossible values are: <code>'left'</code>, <code>'center'</code>, and <code>'right'</code>.</p>\n"},"baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this component's element. This will also be prepended to elements within this\ncomponent like Panel's body will get a class <code>x-panel-body</code>. This means that if you create a subclass of Panel, and\nyou want it to get all the Panels styling for the element and the body, you leave the <code>baseCls</code> <code>x-panel</code> and use\n<code>componentCls</code> to add specific styling for this component.</p>\n"},"columns":{"!type":"[?]","!doc":"<p>An optional array of sub-column definitions. This column becomes a group, and houses the columns defined in the\n<code>columns</code> config.</p>\n\n<p>Group columns may not be sortable. But they may be hideable and moveable. And you may move headers into and out\nof a group. Note that if all sub columns are dragged out of a group, the group is destroyed.</p>\n"},"componentLayout":{"!type":"string|?","!doc":"<p>The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout\nmanager which sizes a Component's internal structure in response to the Component being sized.</p>\n\n<p>Generally, developers will not use this configuration as all provided Components which need their internal\nelements sizing (Such as <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">input fields</a>) come with their own componentLayout managers.</p>\n\n<p>The <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used on instances of the base <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\nclass which simply sizes the Component's encapsulating element to the height and width specified in the\n<a href=\"#!/api/Ext.grid.column.Column-method-setSize\" rel=\"Ext.grid.column.Column-method-setSize\" class=\"docClass\">setSize</a> method.</p>\n"},"dataIndex":{"!type":"string","!doc":"<p>The name of the field in the grid's <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>'s <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a> definition from\nwhich to draw the column's value. <strong>Required.</strong></p>\n"},"detachOnRemove":{"!type":"bool","!doc":"<p>So that when removing from group headers which are then empty and then get destroyed, there's no child DOM left</p>\n"},"draggable":{"!type":"bool","!doc":"<p>False to disable drag-drop reordering of this column.</p>\n"},"editRenderer":{"!type":"fn()","!doc":"<p>A renderer to be used in conjunction with <a href=\"#!/api/Ext.grid.plugin.RowEditing\" rel=\"Ext.grid.plugin.RowEditing\" class=\"docClass\">RowEditing</a>. This renderer is used to\ndisplay a custom value for non-editable fields.</p>\n"},"editor":{"!type":"?|string","!doc":"<p>An optional xtype or config object for a <a href=\"#!/api/Ext.form.field.Field\" rel=\"Ext.form.field.Field\" class=\"docClass\">Field</a> to use for editing.\nOnly applicable if the grid is using an <a href=\"#!/api/Ext.grid.plugin.Editing\" rel=\"Ext.grid.plugin.Editing\" class=\"docClass\">Editing</a> plugin.</p>\n"},"emptyCellText":{"!type":"string","!doc":"<p>The text to diplay in empty cells (cells with a value of <code>undefined</code>, <code>null</code>, or <code>''</code>).</p>\n\n<p>Defaults to <code>&amp;#160;</code> aka <code>&amp;nbsp;</code>.</p>\n"},"field":{"!type":"?|string","!doc":"<p>Alias for <a href=\"#!/api/Ext.grid.column.Column-cfg-editor\" rel=\"Ext.grid.column.Column-cfg-editor\" class=\"docClass\">editor</a>.</p>\n"},"fixed":{"!type":"bool","!doc":"<p>True to prevent the column from being resizable.</p>\n"},"groupable":{"!type":"bool","!doc":"<p>If the grid uses a <a href=\"#!/api/Ext.grid.feature.Grouping\" rel=\"Ext.grid.feature.Grouping\" class=\"docClass\">Ext.grid.feature.Grouping</a>, this option may be used to disable the header menu\nitem to group by the column selected. By default, the header menu group option is enabled. Set to false to\ndisable (but still show) the group option in the header menu for the column.</p>\n"},"header":{"!type":"string","!doc":"<p>The header text.</p>\n"},"hideable":{"!type":"bool","!doc":"<p>False to prevent the user from hiding this column.</p>\n"},"lockable":{"!type":"bool","!doc":"<p>If the grid is configured with <a href=\"#!/api/Ext.panel.Table-cfg-enableLocking\" rel=\"Ext.panel.Table-cfg-enableLocking\" class=\"docClass\">enableLocking</a>, or has columns which are\nconfigured with a <a href=\"#!/api/Ext.grid.column.Column-cfg-locked\" rel=\"Ext.grid.column.Column-cfg-locked\" class=\"docClass\">locked</a> value, this option may be used to disable user-driven locking or unlocking\nof this column. This column will remain in the side into which its own <a href=\"#!/api/Ext.grid.column.Column-cfg-locked\" rel=\"Ext.grid.column.Column-cfg-locked\" class=\"docClass\">locked</a> configuration placed it.</p>\n"},"locked":{"!type":"bool","!doc":"<p>True to lock this column in place.  Implicitly enables locking on the grid.\nSee also <a href=\"#!/api/Ext.grid.Panel-cfg-enableLocking\" rel=\"Ext.grid.Panel-cfg-enableLocking\" class=\"docClass\">Ext.grid.Panel.enableLocking</a>.</p>\n"},"menuDisabled":{"!type":"bool","!doc":"<p>True to disable the column header menu containing sort/hide options.</p>\n"},"menuText":{"!type":"string","!doc":"<p>The text to render in the column visibility selection menu for this column.  If not\nspecified, will default to the text value.</p>\n"},"noWrap":{"!type":"bool","!doc":"<p>The default setting indicates that external CSS rules dictate that the title is <code>white-space: nowrap</code> and\ntherefore, width cannot affect the measured height by causing text wrapping. This is what the Sencha-supplied\nstyles set. If you change those styles to allow text wrapping, you must set this to <code>false</code>.</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.grid.column.Column-method-getEl\" rel=\"Ext.grid.column.Column-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.grid.column.Column-method-getEl\" rel=\"Ext.grid.column.Column-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.grid.column.Column-cfg-renderSelectors\" rel=\"Ext.grid.column.Column-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.grid.column.Column-cfg-childEls\" rel=\"Ext.grid.column.Column-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"},"renderer":{"!type":"string|fn()","!doc":"<p>A renderer is an 'interceptor' method which can be used to transform data (value, appearance, etc.)\nbefore it is rendered. Example:</p>\n\n<pre><code>{\n    renderer: function(value){\n        if (value === 1) {\n            return '1 person';\n        }\n        return value + ' people';\n    }\n}\n</code></pre>\n\n<p>Additionally a string naming an <a href=\"#!/api/Ext.util.Format\" rel=\"Ext.util.Format\" class=\"docClass\">Ext.util.Format</a> method can be passed:</p>\n\n<pre><code>{\n    renderer: 'uppercase'\n}\n</code></pre>\n"},"resizable":{"!type":"bool","!doc":"<p>False to prevent the column from being resizable.</p>\n"},"scope":{"!type":"?","!doc":"<p>The scope to use when calling the <a href=\"#!/api/Ext.grid.column.Column-cfg-renderer\" rel=\"Ext.grid.column.Column-cfg-renderer\" class=\"docClass\">renderer</a> function.</p>\n"},"sortable":{"!type":"bool","!doc":"<p>False to disable sorting of this column. Whether local/remote sorting is used is specified in\n<code><a href=\"#!/api/Ext.data.Store-cfg-remoteSort\" rel=\"Ext.data.Store-cfg-remoteSort\" class=\"docClass\">Ext.data.Store.remoteSort</a></code>.</p>\n"},"stateId":{"!type":"string","!doc":"<p>An identifier which identifies this column uniquely within the owning grid's <a href=\"#!/api/Ext.grid.column.Column-cfg-stateful\" rel=\"Ext.grid.column.Column-cfg-stateful\" class=\"docClass\">state</a>.</p>\n\n<p>This does not have to be <em>globally</em> unique. A column's state is not saved standalone. It is encapsulated within\nthe owning grid's state.</p>\n"},"tdCls":{"!type":"string","!doc":"<p>A CSS class names to apply to the table cells for this column.</p>\n"},"text":{"!type":"string","!doc":"<p>The header text to be used as innerHTML (html tags are accepted) to display in the Grid.\n<strong>Note</strong>: to have a clickable header with no text displayed you can use the default of <code>&amp;#160;</code> aka <code>&amp;nbsp;</code>.</p>\n"},"tooltip":{"!type":"string","!doc":"<p>A tooltip to display for this column header</p>\n"},"tooltipType":{"!type":"string","!doc":"<p>The type of <a href=\"#!/api/Ext.grid.column.Column-cfg-tooltip\" rel=\"Ext.grid.column.Column-cfg-tooltip\" class=\"docClass\">tooltip</a> to use. Either 'qtip' for QuickTips or 'title' for title attribute.</p>\n"}},"Ext_grid_column_Date_cfg":{"!proto":"Ext_grid_column_Column_cfg","format":{"!type":"string","!doc":"<p>A formatting string as used by <a href=\"#!/api/Ext.Date-method-format\" rel=\"Ext.Date-method-format\" class=\"docClass\">Ext.Date.format</a> to format a Date for this Column.</p>\n\n<p>Defaults to the default date from <a href=\"#!/api/Ext.Date-property-defaultFormat\" rel=\"Ext.Date-property-defaultFormat\" class=\"docClass\">Ext.Date.defaultFormat</a> which itself my be overridden\nin a locale file.</p>\n"}},"Ext_grid_column_Number_cfg":{"!proto":"Ext_grid_column_Column_cfg","format":{"!type":"string","!doc":"<p>A formatting string as used by <a href=\"#!/api/Ext.util.Format-method-number\" rel=\"Ext.util.Format-method-number\" class=\"docClass\">Ext.util.Format.number</a> to format a numeric value for this Column.</p>\n"}},"Ext_grid_column_RowNumberer_cfg":{"!proto":"Ext_grid_column_Column_cfg","align":{"!type":"string","!doc":"<p>Sets the alignment of the header and rendered columns.\nPossible values are: <code>'left'</code>, <code>'center'</code>, and <code>'right'</code>.</p>\n"},"cls":{"!type":"string","!doc":"<p>An optional extra CSS class that will be added to this component's Element. This can be useful\nfor adding customized styles to the component or any of its children using standard CSS rules.</p>\n"},"dataIndex":{"!type":"string","!doc":"<p>The name of the field in the grid's <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>'s <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a> definition from\nwhich to draw the column's value. <strong>Required.</strong></p>\n"},"draggable":{"!type":"bool","!doc":"<p>False to disable drag-drop reordering of this column.</p>\n"},"hideable":{"!type":"bool","!doc":"<p>False to prevent the user from hiding this column.</p>\n"},"lockable":{"!type":"bool","!doc":"<p>May not be moved from its preferred locked side when grid is enableLocking:true</p>\n"},"menuDisabled":{"!type":"bool","!doc":"<p>True to disable the column header menu containing sort/hide options.</p>\n"},"resizable":{"!type":"bool","!doc":"<p>private</p>\n"},"tdCls":{"!type":"string","!doc":"<p>A CSS class names to apply to the table cells for this column.</p>\n"},"text":{"!type":"string","!doc":"<p>Any valid text or HTML fragment to display in the header cell for the row number column.</p>\n"},"width":{"!type":"number","!doc":"<p>The default width in pixels of the row number column.</p>\n"}},"Ext_grid_column_Template_cfg":{"!proto":"Ext_grid_column_Column_cfg","tpl":{"!type":"string|+Ext.XTemplate","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a>, or an XTemplate <em>definition string</em> to use to process a\n<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Model</a>'s <a href=\"#!/api/Ext.data.Model-cfg-persistenceProperty\" rel=\"Ext.data.Model-cfg-persistenceProperty\" class=\"docClass\">data</a> to produce a\ncolumn's rendered value.</p>\n"}},"Ext_grid_feature_AbstractSummary_cfg":{"!proto":"Ext_grid_feature_Feature_cfg","remoteRoot":{"!type":"string","!doc":"<p>The name of the property which contains the Array of summary objects.\nIt allows to use server-side calculated summaries.</p>\n"},"showSummaryRow":{"!type":"bool","!doc":"<p>True to show the summary row.</p>\n"}},"Ext_grid_feature_Feature_cfg":{"!proto":"Ext_util_Observable_cfg"},"Ext_grid_feature_RowBody_cfg":{"!proto":"Ext_grid_feature_Feature_cfg"},"Ext_grid_feature_RowWrap_cfg":{"!proto":"Ext_grid_feature_Feature_cfg"},"Ext_grid_feature_Summary_cfg":{"!proto":"Ext_grid_feature_AbstractSummary_cfg","dock":{"!type":"string","!doc":"<p>Configure <code>'top'</code> or <code>'bottom'</code> top create a fixed summary row either above or below the scrollable table.</p>\n"}},"Ext_grid_header_Container_cfg":{"!proto":"Ext_container_Container_cfg","baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this component's element. This will also be prepended to elements within this\ncomponent like Panel's body will get a class <code>x-panel-body</code>. This means that if you create a subclass of Panel, and\nyou want it to get all the Panels styling for the element and the body, you leave the <code>baseCls</code> <code>x-panel</code> and use\n<code>componentCls</code> to add specific styling for this component.</p>\n"},"border":{"!type":"number|string|bool","!doc":"<p>Specifies the border size for this component. The border can be a single numeric value to apply to all sides or it can\nbe a CSS style specification for each style, for example: '10 5 3 10' (top, right, bottom, left).</p>\n\n<p>For components that have no border by default, setting this won't make the border appear by itself.\nYou also need to specify border color and style:</p>\n\n<pre><code>border: 5,\nstyle: {\n    borderColor: 'red',\n    borderStyle: 'solid'\n}\n</code></pre>\n\n<p>To turn off the border, use <code>border: false</code>.</p>\n"},"defaultType":{"!type":"string","!doc":"<p>The default <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">xtype</a> of child Components to create in this Container when\na child item is specified as a raw configuration object, rather than as an instantiated Component.</p>\n"},"defaultWidth":{"!type":"number","!doc":"<p>Width of the header if no width or flex is specified.</p>\n"},"detachOnRemove":{"!type":"bool","!doc":"<p>True to move any component to the <a href=\"#!/api/Ext-method-getDetachedBody\" rel=\"Ext-method-getDetachedBody\" class=\"docClass\">detachedBody</a> when the component is\nremoved from this container. This option is only applicable when the component is not destroyed while\nbeing removed, see <a href=\"#!/api/Ext.grid.header.Container-cfg-autoDestroy\" rel=\"Ext.grid.header.Container-cfg-autoDestroy\" class=\"docClass\">autoDestroy</a> and <a href=\"#!/api/Ext.grid.header.Container-method-remove\" rel=\"Ext.grid.header.Container-method-remove\" class=\"docClass\">remove</a>. If this option is set to false, the DOM\nof the component will remain in the current place until it is explicitly moved.</p>\n"},"enableColumnHide":{"!type":"bool","!doc":"<p>False to disable column hiding within this grid.</p>\n"},"sealed":{"!type":"bool","!doc":"<p>Specify as <code>true</code> to constrain column dragging so that a column cannot be dragged into or out of this column.</p>\n\n<p><strong>Note that this config is only valid for column headers which contain child column headers, eg:</strong>\n    {\n        sealed: true\n        text: 'ExtJS',\n        columns: [{\n            text: '3.0.4',\n            dataIndex: 'ext304'\n        }, {\n            text: '4.1.0',\n            dataIndex: 'ext410'\n        }\n    }</p>\n"},"sortable":{"!type":"bool","!doc":"<p>Provides the default sortable state for all Headers within this HeaderContainer.\nAlso turns on or off the menus in the HeaderContainer. Note that the menu is\nshared across every header and therefore turning it off will remove the menu\nitems for every header.</p>\n"},"weight":{"!type":"number","!doc":"<p>HeaderContainer overrides the default weight of 0 for all docked items to 100.\nThis is so that it has more priority over things like toolbars.</p>\n"}},"Ext_grid_locking_View_cfg":{"!proto":"Ext_Base_cfg","listeners":{"!type":"?","!doc":"<p>A config object containing one or more event handlers to be added to this object during initialization. This\nshould be a valid listeners config object as specified in the <a href=\"#!/api/Ext.util.Observable-method-addListener\" rel=\"Ext.util.Observable-method-addListener\" class=\"docClass\">addListener</a> example for attaching multiple\nhandlers at once.</p>\n\n<p><strong>DOM events from Ext JS <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Components</a></strong></p>\n\n<p>While <em>some</em> Ext JS Component classes export selected DOM events (e.g. \"click\", \"mouseover\" etc), this is usually\nonly done when extra value can be added. For example the <a href=\"#!/api/Ext.view.View\" rel=\"Ext.view.View\" class=\"docClass\">DataView</a>'s <strong><code><a href=\"#!/api/Ext.view.View-event-itemclick\" rel=\"Ext.view.View-event-itemclick\" class=\"docClass\">itemclick</a></code></strong> event passing the node clicked on. To access DOM events directly from a\nchild element of a Component, we need to specify the <code>element</code> option to identify the Component property to add a\nDOM listener to:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>({\n    width: 400,\n    height: 200,\n    dockedItems: [{\n        xtype: 'toolbar'\n    }],\n    listeners: {\n        click: {\n            element: 'el', //bind to the underlying el property on the panel\n            fn: function(){ console.log('click el'); }\n        },\n        dblclick: {\n            element: 'body', //bind to the underlying body property on the panel\n            fn: function(){ console.log('dblclick body'); }\n        }\n    }\n});\n</code></pre>\n"}},"Ext_grid_plugin_BufferedRenderer_cfg":{"!proto":"Ext_AbstractPlugin_cfg","leadingBufferZone":{"!type":"number","!doc":"<p>The number of extra rows to render on the leading side of scrolling\n<strong>outside the <a href=\"#!/api/Ext.grid.plugin.BufferedRenderer-cfg-numFromEdge\" rel=\"Ext.grid.plugin.BufferedRenderer-cfg-numFromEdge\" class=\"docClass\">numFromEdge</a></strong> buffer as scrolling proceeds.</p>\n"},"numFromEdge":{"!type":"number","!doc":"<p>The zone which causes new rows to be appended to the view. As soon as the edge\nof the rendered grid is this number of rows from the edge of the viewport, the view is moved.</p>\n"},"percentageFromEdge":{"!type":"number"},"scrollToLoadBuffer":{"!type":"number","!doc":"<p>This is the time in milliseconds to buffer load requests when scrolling the PagingScrollbar.</p>\n"},"synchronousRender":{"!type":"bool","!doc":"<p>By default, on detection of a scroll event which brings the end of the rendered table within\n<code><a href=\"#!/api/Ext.grid.plugin.BufferedRenderer-cfg-numFromEdge\" rel=\"Ext.grid.plugin.BufferedRenderer-cfg-numFromEdge\" class=\"docClass\">numFromEdge</a></code> rows of the grid viewport, if the required rows are available in the Store,\nthe BufferedRenderer will render rows from the Store <em>immediately</em> before returning from the event handler.\nThis setting helps avoid the impression of whitespace appearing during scrolling.</p>\n\n<p>Set this to <code>true</code> to defer the render until the scroll event handler exits. This allows for faster\nscrolling, but also allows whitespace to be more easily scrolled into view.</p>\n"},"trailingBufferZone":{"!type":"number","!doc":"<p>The number of extra rows to render on the trailing side of scrolling\n<strong>outside the <a href=\"#!/api/Ext.grid.plugin.BufferedRenderer-cfg-numFromEdge\" rel=\"Ext.grid.plugin.BufferedRenderer-cfg-numFromEdge\" class=\"docClass\">numFromEdge</a></strong> buffer as scrolling proceeds.</p>\n"},"variableRowHeight":{"!type":"bool","!doc":"<p>Configure as <code>true</code> if the row heights are not all the same height as the first row. Only configure this is needed - this will be if the\nrows contain unpredictably sized data, or you have changed the cell's text overflow stype to <code>'wrap'</code>.</p>\n"}},"Ext_grid_plugin_CellEditing_cfg":{"!proto":"Ext_grid_plugin_Editing_cfg"},"Ext_grid_plugin_DragDrop_cfg":{"!proto":"Ext_AbstractPlugin_cfg","containerScroll":{"!type":"?|bool","!doc":"<p><code>true</code> to register this container with the Scrollmanager for auto scrolling during drag operations.\nA <a href=\"#!/api/Ext.dd.ScrollManager\" rel=\"Ext.dd.ScrollManager\" class=\"docClass\">Ext.dd.ScrollManager</a> configuration may also be passed.</p>\n"},"ddGroup":{"!type":"string","!doc":"<p>A named drag drop group to which this object belongs. If a group is specified, then both the DragZones and\nDropZone used by this plugin will only interact with other drag drop objects in the same group.</p>\n"},"dragGroup":{"!type":"string","!doc":"<p>The <a href=\"#!/api/Ext.grid.plugin.DragDrop-cfg-ddGroup\" rel=\"Ext.grid.plugin.DragDrop-cfg-ddGroup\" class=\"docClass\">ddGroup</a> to which the DragZone will belong.</p>\n\n<p>This defines which other DropZones the DragZone will interact with. Drag/DropZones only interact with other\nDrag/DropZones which are members of the same <a href=\"#!/api/Ext.grid.plugin.DragDrop-cfg-ddGroup\" rel=\"Ext.grid.plugin.DragDrop-cfg-ddGroup\" class=\"docClass\">ddGroup</a>.</p>\n"},"dragText":{"!type":"string","!doc":"<p>The text to show while dragging.</p>\n\n<p>Two placeholders can be used in the text:</p>\n\n<ul>\n<li><code>{0}</code> The number of selected items.</li>\n<li><code>{1}</code> 's' when more than 1 items (only useful for English).</li>\n</ul>\n\n"},"dropGroup":{"!type":"string","!doc":"<p>The <a href=\"#!/api/Ext.grid.plugin.DragDrop-cfg-ddGroup\" rel=\"Ext.grid.plugin.DragDrop-cfg-ddGroup\" class=\"docClass\">ddGroup</a> to which the DropZone will belong.</p>\n\n<p>This defines which other DragZones the DropZone will interact with. Drag/DropZones only interact with other\nDrag/DropZones which are members of the same <a href=\"#!/api/Ext.grid.plugin.DragDrop-cfg-ddGroup\" rel=\"Ext.grid.plugin.DragDrop-cfg-ddGroup\" class=\"docClass\">ddGroup</a>.</p>\n"},"enableDrag":{"!type":"bool","!doc":"<p><code>false</code> to disallow dragging items from the View.</p>\n"},"enableDrop":{"!type":"bool","!doc":"<p><code>false</code> to disallow the View from accepting drop gestures.</p>\n"}},"Ext_grid_plugin_Editing_cfg":{"!proto":"Ext_AbstractPlugin_cfg","clicksToEdit":{"!type":"number","!doc":"<p>The number of clicks on a grid required to display the editor.\nThe only accepted values are <strong>1</strong> and <strong>2</strong>.</p>\n"},"listeners":{"!type":"?","!doc":"<p>A config object containing one or more event handlers to be added to this object during initialization. This\nshould be a valid listeners config object as specified in the <a href=\"#!/api/Ext.util.Observable-method-addListener\" rel=\"Ext.util.Observable-method-addListener\" class=\"docClass\">addListener</a> example for attaching multiple\nhandlers at once.</p>\n\n<p><strong>DOM events from Ext JS <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Components</a></strong></p>\n\n<p>While <em>some</em> Ext JS Component classes export selected DOM events (e.g. \"click\", \"mouseover\" etc), this is usually\nonly done when extra value can be added. For example the <a href=\"#!/api/Ext.view.View\" rel=\"Ext.view.View\" class=\"docClass\">DataView</a>'s <strong><code><a href=\"#!/api/Ext.view.View-event-itemclick\" rel=\"Ext.view.View-event-itemclick\" class=\"docClass\">itemclick</a></code></strong> event passing the node clicked on. To access DOM events directly from a\nchild element of a Component, we need to specify the <code>element</code> option to identify the Component property to add a\nDOM listener to:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>({\n    width: 400,\n    height: 200,\n    dockedItems: [{\n        xtype: 'toolbar'\n    }],\n    listeners: {\n        click: {\n            element: 'el', //bind to the underlying el property on the panel\n            fn: function(){ console.log('click el'); }\n        },\n        dblclick: {\n            element: 'body', //bind to the underlying body property on the panel\n            fn: function(){ console.log('dblclick body'); }\n        }\n    }\n});\n</code></pre>\n"},"triggerEvent":{"!type":"string","!doc":"<p>The event which triggers editing. Supercedes the <a href=\"#!/api/Ext.grid.plugin.Editing-cfg-clicksToEdit\" rel=\"Ext.grid.plugin.Editing-cfg-clicksToEdit\" class=\"docClass\">clicksToEdit</a> configuration. Maybe one of:</p>\n\n<ul>\n<li>cellclick</li>\n<li>celldblclick</li>\n<li>cellfocus</li>\n<li>rowfocus</li>\n</ul>\n\n"}},"Ext_grid_plugin_HeaderReorderer_cfg":{"!proto":"Ext_AbstractPlugin_cfg"},"Ext_grid_plugin_HeaderResizer_cfg":{"!proto":"Ext_AbstractPlugin_cfg","dynamic":{"!type":"bool","!doc":"<p>True to resize on the fly rather than using a proxy marker.</p>\n"}},"Ext_grid_plugin_RowExpander_cfg":{"!proto":"Ext_AbstractPlugin_cfg","expandOnDblClick":{"!type":"bool","!doc":"<p><tt>true</tt> to toggle a row between expanded/collapsed when double clicked\n(defaults to <tt>true</tt>).</p>\n"},"expandOnEnter":{"!type":"bool","!doc":"<p><tt>true</tt> to toggle selected row(s) between expanded/collapsed when the enter\nkey is pressed (defaults to <tt>true</tt>).</p>\n"},"selectRowOnExpand":{"!type":"bool","!doc":"<p><tt>true</tt> to select a row when clicking on the expander icon\n(defaults to <tt>false</tt>).</p>\n"}},"Ext_grid_property_Grid_cfg":{"!proto":"Ext_grid_Panel_cfg","columnLines":{"!type":"bool","!doc":"<p>Adds column line styling</p>\n"},"columns":{"!type":"?"},"customEditors":{"!type":"?","!doc":"<p>An object containing name/value pairs of custom editor type definitions that allow\nthe grid to support additional types of editable fields.  By default, the grid supports strongly-typed editing\nof strings, dates, numbers and booleans using built-in form editors, but any custom type can be supported and\nassociated with a custom input control by specifying a custom editor.  The name of the editor\ntype should correspond with the name of the property that will use the editor.  Example usage:</p>\n\n<pre><code>var grid = new <a href=\"#!/api/Ext.grid.property.Grid\" rel=\"Ext.grid.property.Grid\" class=\"docClass\">Ext.grid.property.Grid</a>({\n\n    // Custom editors for certain property names\n    customEditors: {\n        evtStart: <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.field.Time\" rel=\"Ext.form.field.Time\" class=\"docClass\">Ext.form.TimeField</a>', {selectOnFocus: true})\n    },\n\n    // Displayed name for property names in the source\n    propertyNames: {\n        evtStart: 'Start Time'\n    },\n\n    // Data object containing properties to edit\n    source: {\n        evtStart: '10:00 AM'\n    }\n});\n</code></pre>\n"},"customRenderers":{"!type":"?","!doc":"<p>An object containing name/value pairs of custom renderer type definitions that allow\nthe grid to support custom rendering of fields.  By default, the grid supports strongly-typed rendering\nof strings, dates, numbers and booleans using built-in form editors, but any custom type can be supported and\nassociated with the type of the value.  The name of the renderer type should correspond with the name of the property\nthat it will render.  Example usage:</p>\n\n<pre><code>var grid = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.property.Grid\" rel=\"Ext.grid.property.Grid\" class=\"docClass\">Ext.grid.property.Grid</a>', {\n    customRenderers: {\n        Available: function(v){\n            if (v) {\n                return '&lt;span style=\"color: green;\"&gt;Yes&lt;/span&gt;';\n            } else {\n                return '&lt;span style=\"color: red;\"&gt;No&lt;/span&gt;';\n            }\n        }\n    },\n    source: {\n        Available: true\n    }\n});\n</code></pre>\n"},"enableColumnMove":{"!type":"bool","!doc":"<p>private config overrides</p>\n"},"inferTypes":{"!type":"bool","!doc":"<p>True to automatically infer the <a href=\"#!/api/Ext.grid.property.Grid-cfg-sourceConfig\" rel=\"Ext.grid.property.Grid-cfg-sourceConfig\" class=\"docClass\">type</a> based on the initial value passed\nfor each field. This ensures the editor remains the correct type even if the value is blanked\nand becomes empty.</p>\n"},"nameColumnWidth":{"!type":"number|string","!doc":"<p>Specify the width for the name column. The value column will take any remaining space.</p>\n"},"nameField":{"!type":"string","!doc":"<p>The name of the field from the property store to use as the property field name.\nThis may be useful if you do not configure the property Grid from an object, but use your own store configuration.</p>\n"},"propertyNames":{"!type":"?","!doc":"<p>An object containing custom property name/display name pairs.\nIf specified, the display name will be shown in the name column instead of the property name.</p>\n"},"source":{"!type":"?","!doc":"<p>A data object to use as the data source of the grid (see <a href=\"#!/api/Ext.grid.property.Grid-method-setSource\" rel=\"Ext.grid.property.Grid-method-setSource\" class=\"docClass\">setSource</a> for details).</p>\n"},"sourceConfig":{"!type":"?","!doc":"<p>This option allows various configurations to be set for each field in the property grid.\nNone of these configurations are required</p>\n\n<h4>displayName</h4>\n\n<p>A custom name to appear as label for this field. If specified, the display name will be shown\nin the name column instead of the property name. Example usage:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.grid.property.Grid\" rel=\"Ext.grid.property.Grid\" class=\"docClass\">Ext.grid.property.Grid</a>({\n    source: {\n        clientIsAvailable: true\n    },\n    sourceConfig: {\n        clientIsAvailable: {\n            // Custom name different to the field\n            displayName: 'Available'\n        }\n    }\n});\n</code></pre>\n\n<h4>renderer</h4>\n\n<p>A function used to transform the underlying value before it is displayed in the grid.\nBy default, the grid supports strongly-typed rendering of strings, dates, numbers and booleans using built-in form editors,\nbut any custom type can be supported and associated with the type of the value. Example usage:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.grid.property.Grid\" rel=\"Ext.grid.property.Grid\" class=\"docClass\">Ext.grid.property.Grid</a>({\n    source: {\n        clientIsAvailable: true\n    },\n    sourceConfig: {\n        clientIsAvailable: {\n            // Custom renderer to change the color based on the value\n            renderer: function(v){\n                var color = v ? 'green' : 'red';\n                return '&lt;span style=\"color: ' + color + ';\"&gt;' + v + '&lt;/span&gt;';\n            }\n        }\n    }\n});\n</code></pre>\n\n<h4>type</h4>\n\n<p>Used to explicitly specify the editor type for a particular value. By default, the type is\nautomatically inferred from the value. See <a href=\"#!/api/Ext.grid.property.Grid-cfg-inferTypes\" rel=\"Ext.grid.property.Grid-cfg-inferTypes\" class=\"docClass\">inferTypes</a>. Accepted values are:</p>\n\n<ul>\n<li>'date'</li>\n<li>'boolean'</li>\n<li>'number'</li>\n<li>'string'</li>\n</ul>\n\n\n<p>For more advanced control an editor configuration can be passed (see the next section).\nExample usage:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.grid.property.Grid\" rel=\"Ext.grid.property.Grid\" class=\"docClass\">Ext.grid.property.Grid</a>({\n    source: {\n        attending: null\n    },\n    sourceConfig: {\n        attending: {\n            // Force the type to be a numberfield, a null value would otherwise default to a textfield\n            type: 'number'\n        }\n    }\n});\n</code></pre>\n\n<h4>editor</h4>\n\n<p>Allows the grid to support additional types of editable fields.  By default, the grid supports strongly-typed editing\nof strings, dates, numbers and booleans using built-in form editors, but any custom type can be supported and\nassociated with a custom input control by specifying a custom editor. Example usage</p>\n\n<pre><code>new <a href=\"#!/api/Ext.grid.property.Grid\" rel=\"Ext.grid.property.Grid\" class=\"docClass\">Ext.grid.property.Grid</a>({\n    // Data object containing properties to edit\n    source: {\n        evtStart: '10:00 AM'\n    },\n\n    sourceConfig: {\n        evtStart: {\n            editor: <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.field.Time\" rel=\"Ext.form.field.Time\" class=\"docClass\">Ext.form.field.Time</a>', {selectOnFocus: true}),\n            displayName: 'Start Time'\n        }\n    }\n});\n</code></pre>\n"},"store":{"!type":"?"},"valueField":{"!type":"string","!doc":"<p>The name of the field from the property store to use as the value field name.\nThis may be useful if you do not configure the property Grid from an object, but use your own store configuration.</p>\n"}},"Ext_grid_property_Property_cfg":{"!proto":"Ext_data_Model_cfg","idProperty":{"!type":"string|?|+Ext.data.Field","!doc":"<p>The name of the field treated as this Model's unique id. Defaults to 'id'.</p>\n\n<p>This may also be specified as a Field config object. This means that the identifying field can be calculated\nusing a <a href=\"#!/api/Ext.data.Field-cfg-convert\" rel=\"Ext.data.Field-cfg-convert\" class=\"docClass\">convert</a> function which might aggregate several values from the\nraw data object to use as an identifier.</p>\n\n<p>The resulting <a href=\"#!/api/Ext.data.Field\" rel=\"Ext.data.Field\" class=\"docClass\">Field</a> is added to the Model's field collection unless there is already\na configured field with a mapping that reads the same property.</p>\n\n<p>If defining an <strong>abstract</strong> base Model class, the <code>idProperty</code> may be configured as <code>null</code> which will mean that\nno identifying field will be generated.</p>\n"}},"Ext_layout_Context_cfg":{"!proto":"Ext_Base_cfg"},"Ext_layout_ContextItem_cfg":{"!proto":"Ext_Base_cfg"},"Ext_layout_Layout_cfg":{"!proto":"Ext_Base_cfg"},"Ext_layout_SizeModel_cfg":{"!proto":"Ext_Base_cfg"},"Ext_layout_component_Auto_cfg":{"!proto":"Ext_layout_component_Component_cfg","setHeightInDom":{"!type":"bool","!doc":"<p>When publishing height of an auto Component, it is usually not written to the DOM.\nSetting this to <code>true</code> overrides this behaviour.</p>\n"},"setWidthInDom":{"!type":"bool","!doc":"<p>When publishing width of an auto Component, it is usually not written to the DOM.\nSetting this to <code>true</code> overrides this behaviour.</p>\n"}},"Ext_layout_component_Body_cfg":{"!proto":"Ext_layout_component_Auto_cfg"},"Ext_layout_component_BoundList_cfg":{"!proto":"Ext_layout_component_Auto_cfg"},"Ext_layout_component_Button_cfg":{"!proto":"Ext_layout_component_Auto_cfg"},"Ext_layout_component_Component_cfg":{"!proto":"Ext_layout_Layout_cfg"},"Ext_layout_component_Dock_cfg":{"!proto":"Ext_layout_component_Component_cfg"},"Ext_layout_component_Draw_cfg":{"!proto":"Ext_layout_component_Auto_cfg","setHeightInDom":{"!type":"bool","!doc":"<p>When publishing height of an auto Component, it is usually not written to the DOM.\nSetting this to <code>true</code> overrides this behaviour.</p>\n"},"setWidthInDom":{"!type":"bool","!doc":"<p>When publishing width of an auto Component, it is usually not written to the DOM.\nSetting this to <code>true</code> overrides this behaviour.</p>\n"}},"Ext_layout_component_FieldSet_cfg":{"!proto":"Ext_layout_component_Body_cfg"},"Ext_layout_component_ProgressBar_cfg":{"!proto":"Ext_layout_component_Auto_cfg"},"Ext_layout_component_field_ComboBox_cfg":{"!proto":"Ext_layout_component_field_Trigger_cfg"},"Ext_layout_component_field_Field_cfg":{"!proto":"Ext_layout_component_Auto_cfg"},"Ext_layout_component_field_FieldContainer_cfg":{"!proto":"Ext_layout_component_field_Field_cfg"},"Ext_layout_component_field_HtmlEditor_cfg":{"!proto":"Ext_layout_component_field_FieldContainer_cfg"},"Ext_layout_component_field_Slider_cfg":{"!proto":"Ext_layout_component_field_Field_cfg"},"Ext_layout_component_field_Text_cfg":{"!proto":"Ext_layout_component_field_Field_cfg"},"Ext_layout_component_field_TextArea_cfg":{"!proto":"Ext_layout_component_field_Text_cfg"},"Ext_layout_component_field_Trigger_cfg":{"!proto":"Ext_layout_component_field_Field_cfg"},"Ext_layout_container_Box_cfg":{"!proto":"Ext_layout_container_Container_cfg","defaultMargins":{"!type":"?","!doc":"<p>If the individual contained items do not have a margins property specified or margin specified via CSS, the\ndefault margins from this property will be applied to each item.</p>\n\n<p>This property may be specified as an object containing margins to apply in the format:</p>\n\n<pre><code>{\n    top: (top margin),\n    right: (right margin),\n    bottom: (bottom margin),\n    left: (left margin)\n}\n</code></pre>\n\n<p>This property may also be specified as a string containing space-separated, numeric margin values. The order of\nthe sides associated with each value matches the way CSS processes margin values:</p>\n\n<ul>\n<li>If there is only one value, it applies to all sides.</li>\n<li>If there are two values, the top and bottom borders are set to the first value and the right and left are\nset to the second.</li>\n<li>If there are three values, the top is set to the first value, the left and right are set to the second,\nand the bottom is set to the third.</li>\n<li>If there are four values, they apply to the top, right, bottom, and left, respectively.</li>\n</ul>\n\n"},"flex":{"!type":"number","!doc":"<p>This configuration option is to be applied to <strong>child items</strong> of the container managed by this layout. Each child\nitem with a flex property will be flexed (horizontally in <code>hbox</code>, vertically in <code>vbox</code>) according to each item's\n<strong>relative</strong> flex value compared to the sum of all items with a flex value specified. Any child items that have\neither a <code>flex = 0</code> or <code>flex = undefined</code> will not be 'flexed' (the initial size will not be changed).</p>\n"},"itemCls":{"!type":"string","!doc":"<p>An optional extra CSS class that will be added to the container. This can be useful for\nadding customized styles to the container or any of its children using standard CSS\nrules. See <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>.<a href=\"#!/api/Ext.Component-cfg-componentCls\" rel=\"Ext.Component-cfg-componentCls\" class=\"docClass\">componentCls</a> also.</p>\n"},"pack":{"!type":"string","!doc":"<p>Controls how the child items of the container are packed together. Acceptable configuration values for this\nproperty are:</p>\n\n<ul>\n<li><strong>start</strong> - child items are packed together at <strong>left</strong> (HBox) or <strong>top</strong> (VBox) side of container (*default**)</li>\n<li><strong>center</strong> - child items are packed together at <strong>mid-width</strong> (HBox) or <strong>mid-height</strong> (VBox) of container</li>\n<li><strong>end</strong> - child items are packed together at <strong>right</strong> (HBox) or <strong>bottom</strong> (VBox) side of container</li>\n</ul>\n\n"},"padding":{"!type":"string","!doc":"<p>Sets the padding to be applied to all child items managed by this layout.</p>\n\n<p>This property must be specified as a string containing space-separated, numeric padding values. The order of the\nsides associated with each value matches the way CSS processes padding values:</p>\n\n<ul>\n<li>If there is only one value, it applies to all sides.</li>\n<li>If there are two values, the top and bottom borders are set to the first value and the right and left are\nset to the second.</li>\n<li>If there are three values, the top is set to the first value, the left and right are set to the second,\nand the bottom is set to the third.</li>\n<li>If there are four values, they apply to the top, right, bottom, and left, respectively.</li>\n</ul>\n\n"},"stretchMaxPartner":{"!type":"string|+Ext.Component","!doc":"<p>Allows stretchMax calculation to take into account the max perpendicular size (height for HBox layout and width\nfor VBox layout) of another Box layout when calculating its maximum perpendicular child size.</p>\n\n<p>If specified as a string, this may be either a known Container ID, or a ComponentQuery selector which is rooted\nat this layout's Container (ie, to find a sibling, use <code>\"^&gt;#siblingItemId</code>).</p>\n"}},"Ext_layout_container_HBox_cfg":{"!proto":"Ext_layout_container_Box_cfg","align":{"!type":"string","!doc":"<p>Controls how the child items of the container are aligned. Acceptable configuration values for this property are:</p>\n\n<ul>\n<li><strong>top</strong> : <strong>Default</strong> child items are aligned vertically at the <strong>top</strong> of the container.</li>\n<li><strong>middle</strong> : child items are aligned vertically in the <strong>middle</strong> of the container.</li>\n<li><strong>bottom</strong> : child items are aligned vertically at the <strong>bottom</strong> of the container.</li>\n<li><strong>stretch</strong> : child items are stretched vertically to fill the height of the container.</li>\n<li><strong>stretchmax</strong> : child items are stretched vertically to the height of the largest item.</li>\n</ul>\n\n"},"alignRoundingMethod":{"!type":"string|string|string","!doc":"<p>The Math method to use\nfor rounding fractional pixels when <code><a href=\"#!/api/Ext.layout.container.HBox-cfg-align\" rel=\"Ext.layout.container.HBox-cfg-align\" class=\"docClass\">align</a>:middle</code> is used.</p>\n"},"constrainAlign":{"!type":"bool","!doc":"<p>Limits the size of <a href=\"#!/api/Ext.layout.container.HBox-cfg-align\" rel=\"Ext.layout.container.HBox-cfg-align\" class=\"docClass\">aligned</a> components to the size of the container under certain circumstances.\nFirstly, the container height must not be determined by the height of the child components. Secondly, the child\ncomponents must have their height <a href=\"#!/api/Ext.AbstractComponent-cfg-shrinkWrap\" rel=\"Ext.AbstractComponent-cfg-shrinkWrap\" class=\"docClass\">shrinkwrapped</a>.</p>\n"}},"Ext_layout_container_VBox_cfg":{"!proto":"Ext_layout_container_Box_cfg","align":{"!type":"string","!doc":"<p>Controls how the child items of the container are aligned. Acceptable configuration values for this property are:</p>\n\n<ul>\n<li><strong>left</strong> : <strong>Default</strong> child items are aligned horizontally at the <strong>left</strong> side of the container.</li>\n<li><strong>center</strong> : child items are aligned horizontally at the <strong>mid-width</strong> of the container.</li>\n<li><strong>right</strong> : child items are aligned horizontally at the <strong>right</strong> of the container.</li>\n<li><strong>stretch</strong> : child items are stretched horizontally to fill the width of the container.</li>\n<li><strong>stretchmax</strong> : child items are stretched horizontally to the size of the largest item.</li>\n</ul>\n\n"},"alignRoundingMethod":{"!type":"string|string|string","!doc":"<p>The Math method to use\nfor rounding fractional pixels when <code><a href=\"#!/api/Ext.layout.container.VBox-cfg-align\" rel=\"Ext.layout.container.VBox-cfg-align\" class=\"docClass\">align</a>:center</code> is used.</p>\n"},"constrainAlign":{"!type":"bool","!doc":"<p>Limits the size of <a href=\"#!/api/Ext.layout.container.VBox-cfg-align\" rel=\"Ext.layout.container.VBox-cfg-align\" class=\"docClass\">aligned</a> components to the size of the container under certain circumstances.\nFirstly, the container width must not be determined by the width of the child components. Secondly, the child\ncomponents must have their width <a href=\"#!/api/Ext.AbstractComponent-cfg-shrinkWrap\" rel=\"Ext.AbstractComponent-cfg-shrinkWrap\" class=\"docClass\">shrinkwrapped</a>.</p>\n"}},"Ext_layout_container_boxOverflow_None_cfg":{"!proto":"Ext_Base_cfg"},"Ext_layout_container_boxOverflow_Scroller_cfg":{"!proto":"Ext_layout_container_boxOverflow_None_cfg","afterCtCls":{"!type":"string","!doc":"<p>CSS class added to the afterCt element. This is the element that holds any special items such as scrollers,\nwhich must always be present at the rightmost edge of the Container</p>\n"},"afterScrollerCls":{"!type":"string","!doc":"<p>CSS class added to the right scroller element if enableScroll is used</p>\n"},"animateScroll":{"!type":"bool","!doc":"<p>True to animate the scrolling of items within the layout (ignored if enableScroll is false)</p>\n"},"beforeCtCls":{"!type":"string","!doc":"<p>CSS class added to the beforeCt element. This is the element that holds any special items such as scrollers,\nwhich must always be present at the leftmost edge of the Container</p>\n"},"beforeScrollerCls":{"!type":"string","!doc":"<p>CSS class added to the left scroller element if enableScroll is used</p>\n"},"listeners":{"!type":"?","!doc":"<p>A config object containing one or more event handlers to be added to this object during initialization. This\nshould be a valid listeners config object as specified in the <a href=\"#!/api/Ext.util.Observable-method-addListener\" rel=\"Ext.util.Observable-method-addListener\" class=\"docClass\">addListener</a> example for attaching multiple\nhandlers at once.</p>\n\n<p><strong>DOM events from Ext JS <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Components</a></strong></p>\n\n<p>While <em>some</em> Ext JS Component classes export selected DOM events (e.g. \"click\", \"mouseover\" etc), this is usually\nonly done when extra value can be added. For example the <a href=\"#!/api/Ext.view.View\" rel=\"Ext.view.View\" class=\"docClass\">DataView</a>'s <strong><code><a href=\"#!/api/Ext.view.View-event-itemclick\" rel=\"Ext.view.View-event-itemclick\" class=\"docClass\">itemclick</a></code></strong> event passing the node clicked on. To access DOM events directly from a\nchild element of a Component, we need to specify the <code>element</code> option to identify the Component property to add a\nDOM listener to:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>({\n    width: 400,\n    height: 200,\n    dockedItems: [{\n        xtype: 'toolbar'\n    }],\n    listeners: {\n        click: {\n            element: 'el', //bind to the underlying el property on the panel\n            fn: function(){ console.log('click el'); }\n        },\n        dblclick: {\n            element: 'body', //bind to the underlying body property on the panel\n            fn: function(){ console.log('dblclick body'); }\n        }\n    }\n});\n</code></pre>\n"},"scrollDuration":{"!type":"number","!doc":"<p>Number of milliseconds that each scroll animation lasts</p>\n"},"scrollIncrement":{"!type":"number","!doc":"<p>The number of pixels to scroll by on scroller click</p>\n"},"scrollRepeatInterval":{"!type":"number","!doc":"<p>Number of milliseconds between each scroll while a scroller button is held down</p>\n"},"scrollerCls":{"!type":"string","!doc":"<p>CSS class added to both scroller elements if enableScroll is used</p>\n"},"wheelIncrement":{"!type":"number","!doc":"<p>The number of pixels to increment on mouse wheel scrolling.</p>\n"}},"Ext_menu_CheckItem_cfg":{"!proto":"Ext_menu_Item_cfg","checkChangeDisabled":{"!type":"bool","!doc":"<p>True to prevent the checked item from being toggled. Any submenu will still be accessible.</p>\n"},"checkHandler":{"!type":"fn()","!doc":"<p>Alternative for the <a href=\"#!/api/Ext.menu.CheckItem-event-checkchange\" rel=\"Ext.menu.CheckItem-event-checkchange\" class=\"docClass\">checkchange</a> event.  Gets called with the same parameters.</p>\n"},"checked":{"!type":"bool","!doc":"<p>True to render the menuitem initially checked.</p>\n"},"checkedCls":{"!type":"string","!doc":"<p>The CSS class used by <a href=\"#!/api/Ext.menu.CheckItem-cfg-cls\" rel=\"Ext.menu.CheckItem-cfg-cls\" class=\"docClass\">cls</a> to show the checked state.\nDefaults to <code>Ext.baseCSSPrefix + 'menu-item-checked'</code>.</p>\n"},"group":{"!type":"string","!doc":"<p>Name of a radio group that the item belongs.</p>\n\n<p>Specifying this option will turn check item into a radio item.</p>\n\n<p>Note that the group name must be globally unique.</p>\n"},"groupCls":{"!type":"string","!doc":"<p>The CSS class applied to this item's icon image to denote being a part of a radio group.\nDefaults to <code>Ext.baseCSSClass + 'menu-group-icon'</code>.\nAny specified <a href=\"#!/api/Ext.menu.CheckItem-cfg-iconCls\" rel=\"Ext.menu.CheckItem-cfg-iconCls\" class=\"docClass\">iconCls</a> overrides this.</p>\n"},"hideOnClick":{"!type":"bool","!doc":"<p>Whether to not to hide the owning menu when this item is clicked.\nDefaults to <code>false</code> for checkbox items, and to <code>true</code> for radio group items.</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.menu.CheckItem-method-getEl\" rel=\"Ext.menu.CheckItem-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.menu.CheckItem-method-getEl\" rel=\"Ext.menu.CheckItem-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.menu.CheckItem-cfg-renderSelectors\" rel=\"Ext.menu.CheckItem-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.menu.CheckItem-cfg-childEls\" rel=\"Ext.menu.CheckItem-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"},"scope":{"!type":"?","!doc":"<p>Scope for the <a href=\"#!/api/Ext.menu.CheckItem-cfg-checkHandler\" rel=\"Ext.menu.CheckItem-cfg-checkHandler\" class=\"docClass\">checkHandler</a> callback.</p>\n"},"uncheckedCls":{"!type":"string","!doc":"<p>The CSS class used by <a href=\"#!/api/Ext.menu.CheckItem-cfg-cls\" rel=\"Ext.menu.CheckItem-cfg-cls\" class=\"docClass\">cls</a> to show the unchecked state.\nDefaults to <code>Ext.baseCSSPrefix + 'menu-item-unchecked'</code>.</p>\n"}},"Ext_menu_ColorPicker_cfg":{"!proto":"Ext_menu_Menu_cfg","hideOnClick":{"!type":"bool","!doc":"<p>False to continue showing the menu after a color is selected.</p>\n"},"maxHeight":{"!type":"number"},"pickerId":{"!type":"string","!doc":"<p>An id to assign to the underlying color picker.</p>\n"}},"Ext_menu_DatePicker_cfg":{"!proto":"Ext_menu_Menu_cfg","hideOnClick":{"!type":"bool","!doc":"<p>False to continue showing the menu after a date is selected.</p>\n"},"maxHeight":{"!type":"number"},"pickerId":{"!type":"string","!doc":"<p>An id to assign to the underlying date picker.</p>\n"}},"Ext_menu_Item_cfg":{"!proto":"Ext_Component_cfg","activeCls":{"!type":"string","!doc":"<p>The CSS class added to the menu item when the item is activated (focused/mouseover).</p>\n"},"ariaRole":{"!type":"string"},"canActivate":{"!type":"bool","!doc":"<p>Whether or not this menu item can be activated when focused/mouseovered.</p>\n"},"clickHideDelay":{"!type":"number","!doc":"<p>The delay in milliseconds to wait before hiding the menu after clicking the menu item.\nThis only has an effect when <code>hideOnClick: true</code>.</p>\n"},"destroyMenu":{"!type":"bool","!doc":"<p>Whether or not to destroy any associated sub-menu when this item is destroyed.</p>\n"},"disabledCls":{"!type":"string","!doc":"<p>The CSS class added to the menu item when the item is disabled.</p>\n"},"glyph":{"!type":"number|string","!doc":"<p>A numeric unicode character code to use as the icon for this item. The default\nfont-family for glyphs can be set globally using\n<a href=\"#!/api/Ext-method-setGlyphFontFamily\" rel=\"Ext-method-setGlyphFontFamily\" class=\"docClass\">Ext.setGlyphFontFamily()</a>. Alternatively, this\nconfig option accepts a string with the charCode and font-family separated by the\n<code>@</code> symbol. For example '65@My Font Family'.</p>\n"},"handler":{"!type":"fn()","!doc":"<p>A function called when the menu item is clicked (can be used instead of <a href=\"#!/api/Ext.menu.Item-event-click\" rel=\"Ext.menu.Item-event-click\" class=\"docClass\">click</a> event).</p>\n"},"hideOnClick":{"!type":"bool","!doc":"<p>Whether to not to hide the owning menu when this item is clicked.</p>\n"},"href":{"!type":"string","!doc":"<p>The href attribute to use for the underlying anchor link.</p>\n"},"hrefTarget":{"!type":"string","!doc":"<p>The target attribute to use for the underlying anchor link.</p>\n"},"icon":{"!type":"string","!doc":"<p>The path to an icon to display in this item.</p>\n\n<p>Defaults to <code><a href=\"#!/api/Ext-property-BLANK_IMAGE_URL\" rel=\"Ext-property-BLANK_IMAGE_URL\" class=\"docClass\">Ext.BLANK_IMAGE_URL</a></code>.</p>\n"},"iconCls":{"!type":"string","!doc":"<p>A CSS class that specifies a <code>background-image</code> to use as the icon for this item.</p>\n"},"menu":{"!type":"+Ext.menu.Menu|?","!doc":"<p>Either an instance of <a href=\"#!/api/Ext.menu.Menu\" rel=\"Ext.menu.Menu\" class=\"docClass\">Ext.menu.Menu</a> or a config object for an <a href=\"#!/api/Ext.menu.Menu\" rel=\"Ext.menu.Menu\" class=\"docClass\">Ext.menu.Menu</a>\nwhich will act as a sub-menu to this item.</p>\n"},"menuAlign":{"!type":"string","!doc":"<p>The default <a href=\"#!/api/Ext.util.Positionable-method-getAlignToXY\" rel=\"Ext.util.Positionable-method-getAlignToXY\" class=\"docClass\">Ext.util.Positionable.getAlignToXY</a> anchor position value for this\nitem's sub-menu relative to this item's position.</p>\n"},"menuExpandDelay":{"!type":"number","!doc":"<p>The delay in milliseconds before this item's sub-menu expands after this item is moused over.</p>\n"},"menuHideDelay":{"!type":"number","!doc":"<p>The delay in milliseconds before this item's sub-menu hides after this item is moused out.</p>\n"},"plain":{"!type":"bool","!doc":"<p>Whether or not this item is plain text/html with no icon or visual activation.</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.menu.Item-method-getEl\" rel=\"Ext.menu.Item-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.menu.Item-method-getEl\" rel=\"Ext.menu.Item-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.menu.Item-cfg-renderSelectors\" rel=\"Ext.menu.Item-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.menu.Item-cfg-childEls\" rel=\"Ext.menu.Item-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"},"text":{"!type":"string","!doc":"<p>The text/html to display in this item.</p>\n"},"tooltip":{"!type":"string|?","!doc":"<p>The tooltip for the button - can be a string to be used as innerHTML (html tags are accepted) or\nQuickTips config object.</p>\n"},"tooltipType":{"!type":"string","!doc":"<p>The type of tooltip to use. Either 'qtip' for QuickTips or 'title' for title attribute.</p>\n"}},"Ext_menu_KeyNav_cfg":{"!proto":"Ext_util_KeyNav_cfg"},"Ext_menu_Menu_cfg":{"!proto":"Ext_panel_Panel_cfg","allowOtherMenus":{"!type":"bool","!doc":"<p>True to allow multiple menus to be displayed at the same time.</p>\n"},"ariaRole":{"!type":"string"},"autoRender":{"!type":"bool","!doc":"<p>Floating is true, so autoRender always happens.</p>\n"},"constrain":{"!type":"bool","!doc":"<p>Menus are constrained to the document body by default.</p>\n"},"enableKeyNav":{"!type":"bool","!doc":"<p>True to enable keyboard navigation for controlling the menu.\nThis option should generally be disabled when form fields are\nbeing used inside the menu.</p>\n"},"floating":{"!type":"bool","!doc":"<p>A Menu configured as <code>floating: true</code> (the default) will be rendered as an absolutely positioned,\n<a href=\"#!/api/Ext.Component-cfg-floating\" rel=\"Ext.Component-cfg-floating\" class=\"docClass\">floating</a> <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Component</a>. If configured as <code>floating: false</code>, the Menu may be\nused as a child item of another <a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Container</a>.</p>\n"},"hidden":{"!type":"bool","!doc":"<p>True to initially render the Menu as hidden, requiring to be shown manually.</p>\n\n<p>Defaults to <code>true</code> when <code>floating: true</code>, and defaults to <code>false</code> when <code>floating: false</code>.</p>\n"},"hideMode":{"!type":"string","!doc":"<p>A String which specifies how this Component's encapsulating DOM element will be hidden. Values may be:</p>\n\n<ul>\n<li><code>'display'</code> : The Component will be hidden using the <code>display: none</code> style.</li>\n<li><code>'visibility'</code> : The Component will be hidden using the <code>visibility: hidden</code> style.</li>\n<li><code>'offsets'</code> : The Component will be hidden by absolutely positioning it out of the visible area of the document.\nThis is useful when a hidden Component must maintain measurable dimensions. Hiding using <code>display</code> results in a\nComponent having zero dimensions.</li>\n</ul>\n\n"},"ignoreParentClicks":{"!type":"bool","!doc":"<p>True to ignore clicks on any item in this menu that is a parent item (displays a submenu)\nso that the submenu is not dismissed when clicking the parent item.</p>\n"},"layout":{"!type":"+Ext.enums.Layout|?"},"minWidth":{"!type":"number","!doc":"<p>The minimum width of the Menu. The default minWidth only applies when the <a href=\"#!/api/Ext.menu.Menu-cfg-floating\" rel=\"Ext.menu.Menu-cfg-floating\" class=\"docClass\">floating</a> config is true.</p>\n"},"plain":{"!type":"bool","!doc":"<p>True to remove the incised line down the left side of the menu and to not indent general Component items.</p>\n\n<p><a href=\"#!/api/Ext.menu.Item\" rel=\"Ext.menu.Item\" class=\"docClass\">MenuItem</a>s will <em>always</em> have space at their start for an icon. With the <code>plain</code> setting,\nnon <a href=\"#!/api/Ext.menu.Item\" rel=\"Ext.menu.Item\" class=\"docClass\">MenuItem</a> child components will not be indented to line up.</p>\n\n<p>Basically, <code>plain:true</code> makes a Menu behave more like a regular <a href=\"#!/api/Ext.layout.container.HBox\" rel=\"Ext.layout.container.HBox\" class=\"docClass\">HBox layout</a>\n<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Panel</a> which just has the same background as a Menu.</p>\n\n<p>See also the <a href=\"#!/api/Ext.menu.Menu-cfg-showSeparator\" rel=\"Ext.menu.Menu-cfg-showSeparator\" class=\"docClass\">showSeparator</a> config.</p>\n"},"showSeparator":{"!type":"bool","!doc":"<p>True to show the icon separator.</p>\n"}},"Ext_menu_Separator_cfg":{"!proto":"Ext_menu_Item_cfg","activeCls":{"!type":"string"},"canActivate":{"!type":"bool"},"clickHideDelay":{"!type":"bool"},"destroyMenu":{"!type":"bool"},"disabledCls":{"!type":"bool"},"hideOnClick":{"!type":"bool"},"href":{"!type":"string"},"hrefTarget":{"!type":"string"},"icon":{"!type":"string"},"iconCls":{"!type":"string"},"menu":{"!type":"?"},"menuAlign":{"!type":"string"},"menuExpandDelay":{"!type":"number"},"menuHideDelay":{"!type":"number"},"plain":{"!type":"bool"},"separatorCls":{"!type":"string","!doc":"<p>The CSS class used by the separator item to show the incised line.</p>\n"},"text":{"!type":"string"}},"Ext_panel_AbstractPanel_cfg":{"!proto":"Ext_container_Container_cfg","baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this panel's element.</p>\n"},"bodyBorder":{"!type":"bool","!doc":"<p>A shortcut to add or remove the border on the body of a panel. In the classic theme\nthis only applies to a panel which has the <a href=\"#!/api/Ext.panel.AbstractPanel-cfg-frame\" rel=\"Ext.panel.AbstractPanel-cfg-frame\" class=\"docClass\">frame</a> configuration set to <code>true</code>.</p>\n"},"bodyCls":{"!type":"string|[string]","!doc":"<p>A CSS class, space-delimited string of classes, or array of classes to be applied to the panel's body element.\nThe following examples are all valid:</p>\n\n<pre><code>bodyCls: 'foo'\nbodyCls: 'foo bar'\nbodyCls: ['foo', 'bar']\n</code></pre>\n\n"},"bodyPadding":{"!type":"number|string","!doc":"<p>A shortcut for setting a padding style on the body element. The value can either be\na number to be applied to all sides, or a normal css string describing padding.\nDefaults to <code>undefined</code>.</p>\n"},"bodyStyle":{"!type":"string|?|fn()","!doc":"<p>Custom CSS styles to be applied to the panel's body element, which can be supplied as a valid CSS style string,\nan object containing style property name/value pairs or a function that returns such a string or object.\nFor example, these two formats are interpreted to be equivalent:</p>\n\n<pre><code>bodyStyle: 'background:#ffc; padding:10px;'\n\nbodyStyle: {\n    background: '#ffc',\n    padding: '10px'\n}\n</code></pre>\n\n"},"border":{"!type":"number|string|bool","!doc":"<p>Specifies the border size for this component. The border can be a single numeric value to apply to all sides or it can\nbe a CSS style specification for each style, for example: '10 5 3 10' (top, right, bottom, left).</p>\n\n<p>For components that have no border by default, setting this won't make the border appear by itself.\nYou also need to specify border color and style:</p>\n\n<pre><code>border: 5,\nstyle: {\n    borderColor: 'red',\n    borderStyle: 'solid'\n}\n</code></pre>\n\n<p>To turn off the border, use <code>border: false</code>.</p>\n"},"componentLayout":{"!type":"string|?","!doc":"<p>The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout\nmanager which sizes a Component's internal structure in response to the Component being sized.</p>\n\n<p>Generally, developers will not use this configuration as all provided Components which need their internal\nelements sizing (Such as <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">input fields</a>) come with their own componentLayout managers.</p>\n\n<p>The <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used on instances of the base <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\nclass which simply sizes the Component's encapsulating element to the height and width specified in the\n<a href=\"#!/api/Ext.panel.AbstractPanel-method-setSize\" rel=\"Ext.panel.AbstractPanel-method-setSize\" class=\"docClass\">setSize</a> method.</p>\n"},"defaultDockWeights":{"!type":"?","!doc":"<p>This object holds the default weights applied to dockedItems that have no weight. These start with a\nweight of 1, to allow negative weights to insert before top items and are odd numbers\nso that even weights can be used to get between different dock orders.</p>\n\n<p>To make default docking order match border layout, do this:</p>\n\n<pre><code> Ext.panel.AbstractPanel.prototype.defaultDockWeights = { top: 1, bottom: 3, left: 5, right: 7 };\n</code></pre>\n\n<p>Changing these defaults as above or individually on this object will effect all Panels.\nTo change the defaults on a single panel, you should replace the entire object:</p>\n\n<pre><code> initComponent: function () {\n     // NOTE: Don't change members of defaultDockWeights since the object is shared.\n     this.defaultDockWeights = { top: 1, bottom: 3, left: 5, right: 7 };\n\n     this.callParent();\n }\n</code></pre>\n\n<p>To change only one of the default values, you do this:</p>\n\n<pre><code> initComponent: function () {\n     // NOTE: Don't change members of defaultDockWeights since the object is shared.\n     this.defaultDockWeights = <a href=\"#!/api/Ext-method-applyIf\" rel=\"Ext-method-applyIf\" class=\"docClass\">Ext.applyIf</a>({ top: 10 }, this.defaultDockWeights);\n\n     this.callParent();\n }\n</code></pre>\n"},"dockedItems":{"!type":"?|[?]","!doc":"<p>A component or series of components to be added as docked items to this panel.\nThe docked items can be docked to either the top, right, left or bottom of a panel.\nThis is typically used for things like toolbars or tab bars:</p>\n\n<pre><code>var panel = new <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>({\n    fullscreen: true,\n    dockedItems: [{\n        xtype: 'toolbar',\n        dock: 'top',\n        items: [{\n            text: 'Docked to the top'\n        }]\n    }]\n});</code></pre>\n\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.panel.AbstractPanel-method-getEl\" rel=\"Ext.panel.AbstractPanel-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.panel.AbstractPanel-method-getEl\" rel=\"Ext.panel.AbstractPanel-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.panel.AbstractPanel-cfg-renderSelectors\" rel=\"Ext.panel.AbstractPanel-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.panel.AbstractPanel-cfg-childEls\" rel=\"Ext.panel.AbstractPanel-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"},"shrinkWrapDock":{"!type":"bool|number","!doc":"<p>Allows for this panel to include the <a href=\"#!/api/Ext.panel.AbstractPanel-cfg-dockedItems\" rel=\"Ext.panel.AbstractPanel-cfg-dockedItems\" class=\"docClass\">dockedItems</a> when trying to determine the overall\nsize of the panel. This option is only applicable when this panel is also shrink wrapping in the\nsame dimensions. See <a href=\"#!/api/Ext.AbstractComponent-cfg-shrinkWrap\" rel=\"Ext.AbstractComponent-cfg-shrinkWrap\" class=\"docClass\">Ext.AbstractComponent.shrinkWrap</a> for an explanation of the configuration options.</p>\n"}},"Ext_panel_Header_cfg":{"!proto":"Ext_container_Container_cfg","componentLayout":{"!type":"string|?","!doc":"<p>The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout\nmanager which sizes a Component's internal structure in response to the Component being sized.</p>\n\n<p>Generally, developers will not use this configuration as all provided Components which need their internal\nelements sizing (Such as <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">input fields</a>) come with their own componentLayout managers.</p>\n\n<p>The <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used on instances of the base <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\nclass which simply sizes the Component's encapsulating element to the height and width specified in the\n<a href=\"#!/api/Ext.panel.Header-method-setSize\" rel=\"Ext.panel.Header-method-setSize\" class=\"docClass\">setSize</a> method.</p>\n"},"defaultType":{"!type":"string","!doc":"<p>The default <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">xtype</a> of child Components to create in this Container when\na child item is specified as a raw configuration object, rather than as an instantiated Component.</p>\n"},"glyph":{"!type":"number|string","!doc":"<p>A numeric unicode character code to use as the icon for the panel header. The\ndefault font-family for glyphs can be set globally using\n<a href=\"#!/api/Ext-method-setGlyphFontFamily\" rel=\"Ext-method-setGlyphFontFamily\" class=\"docClass\">Ext.setGlyphFontFamily()</a>. Alternatively, this\nconfig option accepts a string with the charCode and font-family separated by the\n<code>@</code> symbol. For example '65@My Font Family'.</p>\n"},"icon":{"!type":"string","!doc":"<p>Path to image for an icon in the header. Used for displaying an icon to the left of a title.</p>\n"},"iconCls":{"!type":"string","!doc":"<p>CSS class for an icon in the header. Used for displaying an icon to the left of a title.</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.panel.Header-method-getEl\" rel=\"Ext.panel.Header-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.panel.Header-method-getEl\" rel=\"Ext.panel.Header-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.panel.Header-cfg-renderSelectors\" rel=\"Ext.panel.Header-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.panel.Header-cfg-childEls\" rel=\"Ext.panel.Header-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"},"shrinkWrap":{"!type":"bool|number","!doc":"<p>If this property is a number, it is interpreted as follows:</p>\n\n<ul>\n<li>0: Neither width nor height depend on content. This is equivalent to <code>false</code>.</li>\n<li>1: Width depends on content (shrink wraps), but height does not.</li>\n<li>2: Height depends on content (shrink wraps), but width does not. The default.</li>\n<li>3: Both width and height depend on content (shrink wrap). This is equivalent to <code>true</code>.</li>\n</ul>\n\n\n<p>In CSS terms, shrink-wrap width is analogous to an inline-block element as opposed\nto a block-level element. Some container layouts always shrink-wrap their children,\neffectively ignoring this property (e.g., <a href=\"#!/api/Ext.layout.container.HBox\" rel=\"Ext.layout.container.HBox\" class=\"docClass\">Ext.layout.container.HBox</a>,\n<a href=\"#!/api/Ext.layout.container.VBox\" rel=\"Ext.layout.container.VBox\" class=\"docClass\">Ext.layout.container.VBox</a>, <a href=\"#!/api/Ext.layout.component.Dock\" rel=\"Ext.layout.component.Dock\" class=\"docClass\">Ext.layout.component.Dock</a>).</p>\n"},"title":{"!type":"string","!doc":"<p>The title text to display.</p>\n"},"titleAlign":{"!type":"string","!doc":"<p>The alignment of the title text within the available space between the\nicon and the tools.</p>\n\n<p>May be <code>\"left\"</code>, <code>\"right\"</code> or <code>\"center\"</code>. Defaults to the browser's natural\nbehavior depending on the css direction property - <code>\"left\"</code> when direction\nis ltr  and <code>\"right\"</code> when direction is rtl\n(see <a href=\"#!/api/Ext.AbstractComponent-cfg-rtl\" rel=\"Ext.AbstractComponent-cfg-rtl\" class=\"docClass\">Ext.AbstractComponent.rtl</a>).</p>\n"},"titlePosition":{"!type":"number","!doc":"<p>The ordinal position among the header items (tools and other components specified using the <a href=\"#!/api/Ext.panel.Header-cfg-items\" rel=\"Ext.panel.Header-cfg-items\" class=\"docClass\">items</a> config)\nat which the title component is inserted. See <a href=\"#!/api/Ext.panel.Panel-cfg-header\" rel=\"Ext.panel.Panel-cfg-header\" class=\"docClass\">Panel's header config</a>.</p>\n\n<p>If not specified, the title is inserted after any <a href=\"#!/api/Ext.panel.Header-cfg-items\" rel=\"Ext.panel.Header-cfg-items\" class=\"docClass\">items</a>, but <em>before</em> any <a href=\"#!/api/Ext.panel.Panel-cfg-tools\" rel=\"Ext.panel.Panel-cfg-tools\" class=\"docClass\">Ext.panel.Panel.tools</a>.</p>\n\n<p>Note that if an <a href=\"#!/api/Ext.panel.Header-cfg-icon\" rel=\"Ext.panel.Header-cfg-icon\" class=\"docClass\">icon</a> or <a href=\"#!/api/Ext.panel.Header-cfg-iconCls\" rel=\"Ext.panel.Header-cfg-iconCls\" class=\"docClass\">iconCls</a> has been configured, then the icon component will be the\nfirst item before all specified tools or <a href=\"#!/api/Ext.panel.Header-cfg-items\" rel=\"Ext.panel.Header-cfg-items\" class=\"docClass\">items</a>. This configuration does not include the icon.</p>\n"}},"Ext_panel_Panel_cfg":{"!proto":"Ext_panel_AbstractPanel_cfg","animCollapse":{"!type":"bool","!doc":"<p><code>true</code> to animate the transition when the panel is collapsed, <code>false</code> to skip the animation (defaults to <code>true</code>\nif the <a href=\"#!/api/Ext.fx.Anim\" rel=\"Ext.fx.Anim\" class=\"docClass\">Ext.fx.Anim</a> class is available, otherwise <code>false</code>). May also be specified as the animation\nduration in milliseconds.</p>\n"},"bbar":{"!type":"?|[?]","!doc":"<p>Convenience config. Short for 'Bottom Bar'.</p>\n\n<pre><code>bbar: [\n  { xtype: 'button', text: 'Button 1' }\n]\n</code></pre>\n\n<p>is equivalent to</p>\n\n<pre><code>dockedItems: [{\n    xtype: 'toolbar',\n    dock: 'bottom',\n    items: [\n        { xtype: 'button', text: 'Button 1' }\n    ]\n}]\n</code></pre>\n"},"buttonAlign":{"!type":"string","!doc":"<p>The alignment of any buttons added to this panel. Valid values are 'right', 'left' and 'center' (defaults to\n'right' for buttons/fbar, 'left' for other toolbar types).</p>\n\n<p><strong>NOTE:</strong> The prefered way to specify toolbars is to use the dockedItems config. Instead of buttonAlign you\nwould add the layout: { pack: 'start' | 'center' | 'end' } option to the dockedItem config.</p>\n"},"buttons":{"!type":"?|[?]","!doc":"<p>Convenience config used for adding buttons docked to the bottom of the panel. This is a\nsynonym for the <a href=\"#!/api/Ext.panel.Panel-cfg-fbar\" rel=\"Ext.panel.Panel-cfg-fbar\" class=\"docClass\">fbar</a> config.</p>\n\n<pre><code>buttons: [\n  { text: 'Button 1' }\n]\n</code></pre>\n\n<p>is equivalent to</p>\n\n<pre><code>dockedItems: [{\n    xtype: 'toolbar',\n    dock: 'bottom',\n    ui: 'footer',\n    defaults: {minWidth: <a href=\"#!/api/Ext.panel.Panel-cfg-minButtonWidth\" rel=\"Ext.panel.Panel-cfg-minButtonWidth\" class=\"docClass\">minButtonWidth</a>},\n    items: [\n        { xtype: 'component', flex: 1 },\n        { xtype: 'button', text: 'Button 1' }\n    ]\n}]\n</code></pre>\n\n<p>The <a href=\"#!/api/Ext.panel.Panel-cfg-minButtonWidth\" rel=\"Ext.panel.Panel-cfg-minButtonWidth\" class=\"docClass\">minButtonWidth</a> is used as the default <a href=\"#!/api/Ext.button.Button-cfg-minWidth\" rel=\"Ext.button.Button-cfg-minWidth\" class=\"docClass\">minWidth</a> for\neach of the buttons in the buttons toolbar.</p>\n"},"closable":{"!type":"bool","!doc":"<p>True to display the 'close' tool button and allow the user to close the window, false to hide the button and\ndisallow closing the window.</p>\n\n<p>By default, when close is requested by clicking the close button in the header, the <a href=\"#!/api/Ext.panel.Panel-method-close\" rel=\"Ext.panel.Panel-method-close\" class=\"docClass\">close</a> method will be\ncalled. This will <em><a href=\"#!/api/Ext.Component-method-destroy\" rel=\"Ext.Component-method-destroy\" class=\"docClass\">destroy</a></em> the Panel and its content meaning that it may not be\nreused.</p>\n\n<p>To make closing a Panel <em>hide</em> the Panel so that it may be reused, set <a href=\"#!/api/Ext.panel.Panel-cfg-closeAction\" rel=\"Ext.panel.Panel-cfg-closeAction\" class=\"docClass\">closeAction</a> to 'hide'.</p>\n"},"closeAction":{"!type":"string","!doc":"<p>The action to take when the close header tool is clicked:</p>\n\n<ul>\n<li><p><strong><code>'<a href=\"#!/api/Ext.panel.Panel-method-destroy\" rel=\"Ext.panel.Panel-method-destroy\" class=\"docClass\">destroy</a>'</code></strong> :</p>\n\n<p><a href=\"#!/api/Ext.panel.Panel-method-remove\" rel=\"Ext.panel.Panel-method-remove\" class=\"docClass\">remove</a> the window from the DOM and <a href=\"#!/api/Ext.Component-method-destroy\" rel=\"Ext.Component-method-destroy\" class=\"docClass\">destroy</a> it and all descendant\nComponents. The window will <strong>not</strong> be available to be redisplayed via the <a href=\"#!/api/Ext.panel.Panel-method-show\" rel=\"Ext.panel.Panel-method-show\" class=\"docClass\">show</a> method.</p></li>\n<li><p><strong><code>'<a href=\"#!/api/Ext.panel.Panel-method-hide\" rel=\"Ext.panel.Panel-method-hide\" class=\"docClass\">hide</a>'</code></strong> :</p>\n\n<p><a href=\"#!/api/Ext.panel.Panel-method-hide\" rel=\"Ext.panel.Panel-method-hide\" class=\"docClass\">hide</a> the window by setting visibility to hidden and applying negative offsets. The window will be\navailable to be redisplayed via the <a href=\"#!/api/Ext.panel.Panel-method-show\" rel=\"Ext.panel.Panel-method-show\" class=\"docClass\">show</a> method.</p></li>\n</ul>\n\n\n<p><strong>Note:</strong> This behavior has changed! setting <em>does</em> affect the <a href=\"#!/api/Ext.panel.Panel-method-close\" rel=\"Ext.panel.Panel-method-close\" class=\"docClass\">close</a> method which will invoke the\napproriate closeAction.</p>\n"},"collapseDirection":{"!type":"string","!doc":"<p>The direction to collapse the Panel when the toggle button is clicked.</p>\n\n<p>Defaults to the <a href=\"#!/api/Ext.panel.Panel-cfg-headerPosition\" rel=\"Ext.panel.Panel-cfg-headerPosition\" class=\"docClass\">headerPosition</a></p>\n\n<p><strong>Important: This config is <em>ignored</em> for <a href=\"#!/api/Ext.panel.Panel-cfg-collapsible\" rel=\"Ext.panel.Panel-cfg-collapsible\" class=\"docClass\">collapsible</a> Panels which are direct child items of a <a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">border layout</a>.</strong></p>\n\n<p>Specify as <code>'top'</code>, <code>'bottom'</code>, <code>'left'</code> or <code>'right'</code>.</p>\n"},"collapseFirst":{"!type":"bool","!doc":"<p><code>true</code> to make sure the collapse/expand toggle button always renders first (to the left of) any other tools in\nthe panel's title bar, <code>false</code> to render it last.</p>\n"},"collapseMode":{"!type":"string","!doc":"<p><strong>Important: this config is only effective for <a href=\"#!/api/Ext.panel.Panel-cfg-collapsible\" rel=\"Ext.panel.Panel-cfg-collapsible\" class=\"docClass\">collapsible</a> Panels which are direct child items of a\n<a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">border layout</a>.</strong></p>\n\n<p>When <em>not</em> a direct child item of a <a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">border layout</a>, then the Panel's header\nremains visible, and the body is collapsed to zero dimensions. If the Panel has no header, then a new header\n(orientated correctly depending on the <a href=\"#!/api/Ext.panel.Panel-cfg-collapseDirection\" rel=\"Ext.panel.Panel-cfg-collapseDirection\" class=\"docClass\">collapseDirection</a>) will be inserted to show a the title and a re-\nexpand tool.</p>\n\n<p>When a child item of a <a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">border layout</a>, this config has three possible values:</p>\n\n<ul>\n<li><p><code>undefined</code> - When collapsed, a placeholder <a href=\"#!/api/Ext.panel.Header\" rel=\"Ext.panel.Header\" class=\"docClass\">Header</a> is injected into the layout to\nrepresent the Panel and to provide a UI with a Tool to allow the user to re-expand the Panel.</p></li>\n<li><p><code>\"header\"</code> - The Panel collapses to leave its header visible as when not inside a\n<a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">border layout</a>.</p></li>\n<li><p><code>\"mini\"</code> - The Panel collapses without a visible header.</p></li>\n</ul>\n\n"},"collapsed":{"!type":"bool","!doc":"<p><code>true</code> to render the panel collapsed, <code>false</code> to render it expanded.</p>\n"},"collapsedCls":{"!type":"string","!doc":"<p>A CSS class to add to the panel's element after it has been collapsed.</p>\n"},"collapsible":{"!type":"bool","!doc":"<p>True to make the panel collapsible and have an expand/collapse toggle Tool added into the header tool button\narea. False to keep the panel sized either statically, or by an owning layout manager, with no toggle Tool.\nWhen a panel is used in a <a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">border layout</a>, the <a href=\"#!/api/Ext.panel.Panel-cfg-floatable\" rel=\"Ext.panel.Panel-cfg-floatable\" class=\"docClass\">floatable</a> option\ncan influence the behavior of collapsing.\nSee <a href=\"#!/api/Ext.panel.Panel-cfg-collapseMode\" rel=\"Ext.panel.Panel-cfg-collapseMode\" class=\"docClass\">collapseMode</a> and <a href=\"#!/api/Ext.panel.Panel-cfg-collapseDirection\" rel=\"Ext.panel.Panel-cfg-collapseDirection\" class=\"docClass\">collapseDirection</a></p>\n"},"constrain":{"!type":"bool","!doc":"<p>True to constrain the panel within its containing element, false to allow it to fall outside of its containing\nelement. By default floating components such as Windows will be rendered to <code>document.body</code>. To render and constrain the window within\nanother element specify <a href=\"#!/api/Ext.panel.Panel-cfg-renderTo\" rel=\"Ext.panel.Panel-cfg-renderTo\" class=\"docClass\">renderTo</a>. Optionally the header only can be constrained\nusing <a href=\"#!/api/Ext.panel.Panel-cfg-constrainHeader\" rel=\"Ext.panel.Panel-cfg-constrainHeader\" class=\"docClass\">constrainHeader</a>.</p>\n"},"constrainHeader":{"!type":"bool","!doc":"<p>True to constrain the panel header within its containing element (allowing the panel body to fall outside of\nits containing element) or false to allow the header to fall outside its containing element.\nOptionally the entire panel can be constrained using <a href=\"#!/api/Ext.panel.Panel-cfg-constrain\" rel=\"Ext.panel.Panel-cfg-constrain\" class=\"docClass\">constrain</a>.</p>\n"},"dockedItems":{"!type":"?|[?]","!doc":"<p>A component or series of components to be added as docked items to this panel. The docked items can be docked to\neither the top, right, left or bottom of a panel. This is typically used for things like toolbars or tab bars:</p>\n\n<pre><code>var panel = new <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>({\n    dockedItems: [{\n        xtype: 'toolbar',\n        dock: 'top',\n        items: [{\n            text: 'Docked to the top'\n        }]\n    }]\n});\n</code></pre>\n"},"fbar":{"!type":"?|[?]","!doc":"<p>Convenience config used for adding items to the bottom of the panel. Short for Footer Bar.</p>\n\n<pre><code>fbar: [\n  { type: 'button', text: 'Button 1' }\n]\n</code></pre>\n\n<p>is equivalent to</p>\n\n<pre><code>dockedItems: [{\n    xtype: 'toolbar',\n    dock: 'bottom',\n    ui: 'footer',\n    defaults: {minWidth: <a href=\"#!/api/Ext.panel.Panel-cfg-minButtonWidth\" rel=\"Ext.panel.Panel-cfg-minButtonWidth\" class=\"docClass\">minButtonWidth</a>},\n    items: [\n        { xtype: 'component', flex: 1 },\n        { xtype: 'button', text: 'Button 1' }\n    ]\n}]\n</code></pre>\n\n<p>The <a href=\"#!/api/Ext.panel.Panel-cfg-minButtonWidth\" rel=\"Ext.panel.Panel-cfg-minButtonWidth\" class=\"docClass\">minButtonWidth</a> is used as the default <a href=\"#!/api/Ext.button.Button-cfg-minWidth\" rel=\"Ext.button.Button-cfg-minWidth\" class=\"docClass\">minWidth</a> for\neach of the buttons in the fbar.</p>\n"},"floatable":{"!type":"bool","!doc":"<p><strong>Important: This config is only effective for <a href=\"#!/api/Ext.panel.Panel-cfg-collapsible\" rel=\"Ext.panel.Panel-cfg-collapsible\" class=\"docClass\">collapsible</a> Panels which are direct child items of a\n<a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">border layout</a>.</strong></p>\n\n<p>true to allow clicking a collapsed Panel's <a href=\"#!/api/Ext.panel.Panel-cfg-placeholder\" rel=\"Ext.panel.Panel-cfg-placeholder\" class=\"docClass\">placeholder</a> to display the Panel floated above the layout,\nfalse to force the user to fully expand a collapsed region by clicking the expand button to see it again.</p>\n"},"frame":{"!type":"bool","!doc":"<p>True to apply a frame to the panel.</p>\n"},"frameHeader":{"!type":"bool","!doc":"<p>True to apply a frame to the panel panels header (if 'frame' is true).</p>\n"},"glyph":{"!type":"number|string","!doc":"<p>A numeric unicode character code to use as the icon for the panel header. The\ndefault font-family for glyphs can be set globally using\n<a href=\"#!/api/Ext-method-setGlyphFontFamily\" rel=\"Ext-method-setGlyphFontFamily\" class=\"docClass\">Ext.setGlyphFontFamily()</a>. Alternatively, this\nconfig option accepts a string with the charCode and font-family separated by the\n<code>@</code> symbol. For example '65@My Font Family'.</p>\n"},"header":{"!type":"bool|?","!doc":"<p>Pass as <code>false</code> to prevent a Header from being created and shown.</p>\n\n<p>Pass as a config object (optionally containing an <code>xtype</code>) to custom-configure this Panel's header.</p>\n\n<p>See <a href=\"#!/api/Ext.panel.Header\" rel=\"Ext.panel.Header\" class=\"docClass\">Ext.panel.Header</a> for all the options that may be specified here.</p>\n\n<p>A <a href=\"#!/api/Ext.panel.Header\" rel=\"Ext.panel.Header\" class=\"docClass\">panel header</a> is a <a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a> which contains the Panel's <a href=\"#!/api/Ext.panel.Panel-cfg-title\" rel=\"Ext.panel.Panel-cfg-title\" class=\"docClass\">title</a> and <a href=\"#!/api/Ext.panel.Panel-cfg-tools\" rel=\"Ext.panel.Panel-cfg-tools\" class=\"docClass\">tools</a>.\nYou may also configure the Panel's <code>header</code> option with its own child items which go <em>before</em> the <a href=\"#!/api/Ext.panel.Panel-cfg-tools\" rel=\"Ext.panel.Panel-cfg-tools\" class=\"docClass\">tools</a></p>\n\n<p>By default the panel <a href=\"#!/api/Ext.panel.Panel-cfg-title\" rel=\"Ext.panel.Panel-cfg-title\" class=\"docClass\">title</a> is inserted after items configured in this config, but before any tools.\nTo insert the title at any point in the full array, specify the <a href=\"#!/api/Ext.panel.Header\" rel=\"Ext.panel.Header\" class=\"docClass\">#titlePosition</a> config:</p>\n\n<p>   new <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>({\n       title: 'Test',\n       tools: [{\n           type: 'refresh\n       }, {\n           type: 'help'\n       }],\n       titlePosition: 2 // Title will come AFTER the two tools\n       ...\n   });</p>\n"},"headerOverCls":{"!type":"string","!doc":"<p>Optional CSS class to apply to the header element on mouseover</p>\n"},"headerPosition":{"!type":"string","!doc":"<p>Specify as <code>'top'</code>, <code>'bottom'</code>, <code>'left'</code> or <code>'right'</code>.</p>\n"},"hideCollapseTool":{"!type":"bool","!doc":"<p><code>true</code> to hide the expand/collapse toggle button when <code><a href=\"#!/api/Ext.panel.Panel-cfg-collapsible\" rel=\"Ext.panel.Panel-cfg-collapsible\" class=\"docClass\">collapsible</a> == true</code>, <code>false</code> to display it.</p>\n"},"icon":{"!type":"string","!doc":"<p>Path to image for an icon in the header. Used for displaying an icon to the left of a title.</p>\n"},"iconCls":{"!type":"string","!doc":"<p>CSS class for an icon in the header. Used for displaying an icon to the left of a title.</p>\n"},"lbar":{"!type":"?|[?]","!doc":"<p>Convenience config. Short for 'Left Bar' (left-docked, vertical toolbar).</p>\n\n<pre><code>lbar: [\n  { xtype: 'button', text: 'Button 1' }\n]\n</code></pre>\n\n<p>is equivalent to</p>\n\n<pre><code>dockedItems: [{\n    xtype: 'toolbar',\n    dock: 'left',\n    items: [\n        { xtype: 'button', text: 'Button 1' }\n    ]\n}]\n</code></pre>\n"},"manageHeight":{"!type":"bool","!doc":"<p>When true, the dock component layout writes\nheight information to the panel's DOM elements based on its shrink wrap height\ncalculation. This ensures that the browser respects the calculated height.\nWhen false, the dock component layout will not write heights on the panel or its\nbody element. In some simple layout cases, not writing the heights to the DOM may\nbe desired because this allows the browser to respond to direct DOM manipulations\n(like animations).</p>\n"},"minButtonWidth":{"!type":"number","!doc":"<p>Minimum width of all footer toolbar buttons in pixels. If set, this will be used as the default\nvalue for the <a href=\"#!/api/Ext.button.Button-cfg-minWidth\" rel=\"Ext.button.Button-cfg-minWidth\" class=\"docClass\">Ext.button.Button.minWidth</a> config of each Button added to the <strong>footer toolbar</strong> via the\n<a href=\"#!/api/Ext.panel.Panel-cfg-fbar\" rel=\"Ext.panel.Panel-cfg-fbar\" class=\"docClass\">fbar</a> or <a href=\"#!/api/Ext.panel.Panel-cfg-buttons\" rel=\"Ext.panel.Panel-cfg-buttons\" class=\"docClass\">buttons</a> configurations. It will be ignored for buttons that have a minWidth configured\nsome other way, e.g. in their own config object or via the <a href=\"#!/api/Ext.container.Container-cfg-defaults\" rel=\"Ext.container.Container-cfg-defaults\" class=\"docClass\">defaults</a> of\ntheir parent container.</p>\n"},"overlapHeader":{"!type":"bool","!doc":"<p>True to overlap the header in a panel over the framing of the panel itself. This is needed when frame:true (and\nis done automatically for you). Otherwise it is undefined. If you manually add rounded corners to a panel header\nwhich does not have frame:true, this will need to be set to true.</p>\n"},"placeholder":{"!type":"+Ext.Component|?","!doc":"<p><strong>Important: This config is only effective for <a href=\"#!/api/Ext.panel.Panel-cfg-collapsible\" rel=\"Ext.panel.Panel-cfg-collapsible\" class=\"docClass\">collapsible</a> Panels which are direct child items of a\n<a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">border layout</a> when not using the <code>'header'</code> <a href=\"#!/api/Ext.panel.Panel-cfg-collapseMode\" rel=\"Ext.panel.Panel-cfg-collapseMode\" class=\"docClass\">collapseMode</a>.</strong></p>\n\n<p><strong>Optional.</strong> A Component (or config object for a Component) to show in place of this Panel when this Panel is\ncollapsed by a <a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">border layout</a>. Defaults to a generated <a href=\"#!/api/Ext.panel.Header\" rel=\"Ext.panel.Header\" class=\"docClass\">Header</a> containing a <a href=\"#!/api/Ext.panel.Tool\" rel=\"Ext.panel.Tool\" class=\"docClass\">Tool</a> to re-expand the Panel.</p>\n"},"placeholderCollapseHideMode":{"!type":"number","!doc":"<p>The <a href=\"#!/api/Ext.dom.Element-method-setVisibilityMode\" rel=\"Ext.dom.Element-method-setVisibilityMode\" class=\"docClass\">mode</a> for hiding collapsed panels when\nusing <a href=\"#!/api/Ext.panel.Panel-cfg-collapseMode\" rel=\"Ext.panel.Panel-cfg-collapseMode\" class=\"docClass\">collapseMode</a> \"placeholder\".</p>\n"},"preventHeader":{"!type":"bool"},"rbar":{"!type":"?|[?]","!doc":"<p>Convenience config. Short for 'Right Bar' (right-docked, vertical toolbar).</p>\n\n<pre><code>rbar: [\n  { xtype: 'button', text: 'Button 1' }\n]\n</code></pre>\n\n<p>is equivalent to</p>\n\n<pre><code>dockedItems: [{\n    xtype: 'toolbar',\n    dock: 'right',\n    items: [\n        { xtype: 'button', text: 'Button 1' }\n    ]\n}]\n</code></pre>\n"},"simpleDrag":{"!type":"bool","!doc":"<p>When <a href=\"#!/api/Ext.panel.Panel-cfg-draggable\" rel=\"Ext.panel.Panel-cfg-draggable\" class=\"docClass\">draggable</a> is <code>true</code>, Specify this as <code>true</code> to  cause the <code>draggable</code> config\nto work the same as it does in <a href=\"#!/api/Ext.window.Window\" rel=\"Ext.window.Window\" class=\"docClass\">Window</a>. This Panel\njust becomes movable. No DragDrop instances receive any notifications.\nFor example:</p>\n\n<pre class='inline-example '><code>var win = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('widget.window', {\n    height: 300,\n    width: 300,\n    title: 'Constraining Window',\n    closable: false,\n    items: {\n        title: \"Floating Panel\",\n        width: 100,\n        height: 100,\n        floating: true,\n        draggable: true,\n        constrain: true,\n        simpleDrag: true\n    }\n});\nwin.show();\n// Floating components begin life hidden\nwin.child('[title=Floating Panel]').show();\n</code></pre>\n"},"tbar":{"!type":"?|[?]","!doc":"<p>Convenience config. Short for 'Top Bar'.</p>\n\n<pre><code>tbar: [\n  { xtype: 'button', text: 'Button 1' }\n]\n</code></pre>\n\n<p>is equivalent to</p>\n\n<pre><code>dockedItems: [{\n    xtype: 'toolbar',\n    dock: 'top',\n    items: [\n        { xtype: 'button', text: 'Button 1' }\n    ]\n}]\n</code></pre>\n"},"title":{"!type":"string","!doc":"<p>The title text to be used to display in the <a href=\"#!/api/Ext.panel.Header\" rel=\"Ext.panel.Header\" class=\"docClass\">panel header</a>. When a\n<code>title</code> is specified the <a href=\"#!/api/Ext.panel.Header\" rel=\"Ext.panel.Header\" class=\"docClass\">Ext.panel.Header</a> will automatically be created and displayed unless\n<a href=\"#!/api/Ext.panel.Panel-cfg-header\" rel=\"Ext.panel.Panel-cfg-header\" class=\"docClass\">header</a> is set to <code>false</code>.</p>\n"},"titleAlign":{"!type":"string","!doc":"<p>The alignment of the title text within the available space between the\nicon and the tools.</p>\n\n<p>May be <code>\"left\"</code>, <code>\"right\"</code> or <code>\"center\"</code>. Defaults to the browser's natural\nbehavior depending on the css direction property - <code>\"left\"</code> when direction\nis ltr and <code>\"right\"</code> when direction is rtl\n(see <a href=\"#!/api/Ext.AbstractComponent-cfg-rtl\" rel=\"Ext.AbstractComponent-cfg-rtl\" class=\"docClass\">Ext.AbstractComponent.rtl</a>).</p>\n"},"titleCollapse":{"!type":"bool","!doc":"<p><code>true</code> to allow expanding and collapsing the panel (when <code><a href=\"#!/api/Ext.panel.Panel-cfg-collapsible\" rel=\"Ext.panel.Panel-cfg-collapsible\" class=\"docClass\">collapsible</a> = true</code>) by clicking anywhere in\nthe header bar, <code>false</code>) to allow it only by clicking to tool button). When a panel is used in a\n<a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">border layout</a>, the <a href=\"#!/api/Ext.panel.Panel-cfg-floatable\" rel=\"Ext.panel.Panel-cfg-floatable\" class=\"docClass\">floatable</a> option can influence the behavior of collapsing.</p>\n"},"tools":{"!type":"[?]|[+Ext.panel.Tool]","!doc":"<p>An array of <a href=\"#!/api/Ext.panel.Tool\" rel=\"Ext.panel.Tool\" class=\"docClass\">Ext.panel.Tool</a> configs/instances to be added to the header tool area. The tools are stored as\nchild components of the header container. They can be accessed using <a href=\"#!/api/Ext.panel.Panel-method-down\" rel=\"Ext.panel.Panel-method-down\" class=\"docClass\">down</a> and {<a href=\"#!/api/Ext.panel.Panel-method-query\" rel=\"Ext.panel.Panel-method-query\" class=\"docClass\">query</a>}, as well as the\nother component methods. The toggle tool is automatically created if <a href=\"#!/api/Ext.panel.Panel-cfg-collapsible\" rel=\"Ext.panel.Panel-cfg-collapsible\" class=\"docClass\">collapsible</a> is set to true.</p>\n\n<p>Note that, apart from the toggle tool which is provided when a panel is collapsible, these tools only provide the\nvisual button. Any required functionality must be provided by adding handlers that implement the necessary\nbehavior.</p>\n\n<p>Example usage:</p>\n\n<pre><code>tools:[{\n    type:'refresh',\n    tooltip: 'Refresh form Data',\n    // hidden:true,\n    handler: function(event, toolEl, panelHeader) {\n        // refresh logic\n    }\n},\n{\n    type:'help',\n    tooltip: 'Get Help',\n    callback: function(panel, tool, event) {\n        // show help here\n    }\n}]\n</code></pre>\n\n<p>The difference between <code>handler</code> and <code>callback</code> is the signature. For details on\nthe distinction, see <a href=\"#!/api/Ext.panel.Tool\" rel=\"Ext.panel.Tool\" class=\"docClass\">Ext.panel.Tool</a>.</p>\n"}},"Ext_panel_Proxy_cfg":{"!proto":"Ext_Base_cfg","insertProxy":{"!type":"bool","!doc":"<p>True to insert a placeholder proxy element while dragging the panel, false to drag with no proxy.\nMost Panels are not absolute positioned and therefore we need to reserve this space.</p>\n"},"moveOnDrag":{"!type":"bool","!doc":"<p>True to move the panel to the dragged position when dropped</p>\n"}},"Ext_panel_Table_cfg":{"!proto":"Ext_panel_Panel_cfg","allowDeselect":{"!type":"bool","!doc":"<p>True to allow deselecting a record. This config is forwarded to <a href=\"#!/api/Ext.selection.Model-cfg-allowDeselect\" rel=\"Ext.selection.Model-cfg-allowDeselect\" class=\"docClass\">Ext.selection.Model.allowDeselect</a>.</p>\n"},"columnLines":{"!type":"bool","!doc":"<p>Adds column line styling</p>\n"},"columns":{"!type":"[+Ext.grid.column.Column]|?","!doc":"<p>An array of <a href=\"#!/api/Ext.grid.column.Column\" rel=\"Ext.grid.column.Column\" class=\"docClass\">column</a> definition objects which define all columns that appear in this\ngrid. Each column definition provides the header text for the column, and a definition of where the data for that\ncolumn comes from.</p>\n\n<p>This can also be a configuration object for a {<a href=\"#!/api/Ext.grid.header.Container\" rel=\"Ext.grid.header.Container\" class=\"docClass\">Ext.grid.header.Container</a> HeaderContainer} which may override\ncertain default configurations if necessary. For example, the special layout may be overridden to use a simpler\nlayout, or one can set default values shared by all columns:</p>\n\n<pre><code>columns: {\n    items: [\n        {\n            text: \"Column A\"\n            dataIndex: \"field_A\"\n        },{\n            text: \"Column B\",\n            dataIndex: \"field_B\"\n        }, \n        ...\n    ],\n    defaults: {\n        flex: 1\n    }\n}\n</code></pre>\n"},"deferRowRender":{"!type":"bool","!doc":"<p>Defaults to true to enable deferred row rendering.</p>\n\n<p>This allows the View to execute a refresh quickly, with the expensive update of the row structure deferred so\nthat layouts with GridPanels appear, and lay out more quickly.</p>\n"},"disableSelection":{"!type":"bool","!doc":"<p>True to disable selection model.</p>\n"},"emptyText":{"!type":"string","!doc":"<p>Default text (html tags are accepted) to display in the Panel body when the Store\nis empty. When specified, and the Store is empty, the text will be rendered inside a DIV with the CSS class \"x-grid-empty\".</p>\n"},"enableColumnHide":{"!type":"bool","!doc":"<p>False to disable column hiding within this grid.</p>\n"},"enableColumnMove":{"!type":"bool","!doc":"<p>False to disable column dragging within this grid.</p>\n"},"enableColumnResize":{"!type":"bool","!doc":"<p>False to disable column resizing within this grid.</p>\n"},"enableLocking":{"!type":"bool","!doc":"<p>Configure as <code>true</code> to enable locking support for this grid. Alternatively, locking will also be automatically\nenabled if any of the columns in the <a href=\"#!/api/Ext.panel.Table-cfg-columns\" rel=\"Ext.panel.Table-cfg-columns\" class=\"docClass\">columns</a> configuration contain a <a href=\"#!/api/Ext.grid.column.Column-cfg-locked\" rel=\"Ext.grid.column.Column-cfg-locked\" class=\"docClass\">locked</a> config option.</p>\n\n<p>A locking grid is processed in a special way. The configuration options are cloned and <em>two</em> grids are created to be the locked (left) side\nand the normal (right) side. This Panel becomes merely a <a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">container</a> which arranges both in an <a href=\"#!/api/Ext.layout.container.HBox\" rel=\"Ext.layout.container.HBox\" class=\"docClass\">HBox</a> layout.</p>\n\n<p><a href=\"#!/api/Ext.panel.Table-cfg-plugins\" rel=\"Ext.panel.Table-cfg-plugins\" class=\"docClass\">Plugins</a> may be targeted at either locked, or unlocked grid, or, both, in which case the plugin is cloned and used on both sides.</p>\n\n<p>Plugins may also be targeted at the containing locking Panel.</p>\n\n<p>This is configured by specifying a <code>lockableScope</code> property in your plugin which may have the following values:</p>\n\n<ul>\n<li><code>\"both\"</code> (the default) - The plugin is added to both grids</li>\n<li><code>\"top\"</code> - The plugin is added to the containing Panel</li>\n<li><code>\"locked\"</code> - The plugin is added to the locked (left) grid</li>\n<li><code>\"normal\"</code> - The plugin is added to the normal (right) grid</li>\n</ul>\n\n\n<p>If <code>both</code> is specified, then each copy of the plugin gains a property <code>lockingPartner</code> which references its sibling on the other side so that they\ncan synchronize operations is necessary.</p>\n\n<p><a href=\"#!/api/Ext.panel.Table-cfg-features\" rel=\"Ext.panel.Table-cfg-features\" class=\"docClass\">Features</a> may also be configured with <code>lockableScope</code> and may target the locked grid, the normal grid or both grids. Features\nalso get a <code>lockingPartner</code> reference injected.</p>\n"},"features":{"!type":"[+Ext.grid.feature.Feature]|[?]|[+Ext.enums.Feature]","!doc":"<p>An array of grid Features to be added to this grid. Can also be just a single feature instead of array.</p>\n\n<p>Features config behaves much like <a href=\"#!/api/Ext.panel.Table-cfg-plugins\" rel=\"Ext.panel.Table-cfg-plugins\" class=\"docClass\">plugins</a>.\nA feature can be added by either directly referencing the instance:</p>\n\n<pre><code>features: [<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.feature.GroupingSummary\" rel=\"Ext.grid.feature.GroupingSummary\" class=\"docClass\">Ext.grid.feature.GroupingSummary</a>', {groupHeaderTpl: 'Subject: {name}'})],\n</code></pre>\n\n<p>By using config object with ftype:</p>\n\n<pre><code>features: [{ftype: 'groupingsummary', groupHeaderTpl: 'Subject: {name}'}],\n</code></pre>\n\n<p>Or with just a ftype:</p>\n\n<pre><code>features: ['grouping', 'groupingsummary'],\n</code></pre>\n\n<p>See <a href=\"#!/api/Ext.enums.Feature\" rel=\"Ext.enums.Feature\" class=\"docClass\">Ext.enums.Feature</a> for list of all ftypes.</p>\n"},"forceFit":{"!type":"bool","!doc":"<p>True to force the columns to fit into the available width. Headers are first sized according to configuration,\nwhether that be a specific width, or flex. Then they are all proportionally changed in width so that the entire\ncontent width is used. For more accurate control, it is more optimal to specify a flex setting on the columns\nthat are to be stretched &amp; explicit widths on columns that are not.</p>\n"},"hideHeaders":{"!type":"bool","!doc":"<p>True to hide column headers.</p>\n"},"layout":{"!type":"+Ext.enums.Layout|?","!doc":"<p><strong>Important</strong>: In order for child items to be correctly sized and\npositioned, typically a layout manager <strong>must</strong> be specified through\nthe <code>layout</code> configuration option.</p>\n\n<p>The sizing and positioning of child <a href=\"#!/api/Ext.panel.Table-cfg-items\" rel=\"Ext.panel.Table-cfg-items\" class=\"docClass\">items</a> is the responsibility of\nthe Container's layout manager which creates and manages the type of layout\nyou have in mind.  For example:</p>\n\n<p>If the layout configuration is not explicitly specified for\na general purpose container (e.g. Container or Panel) the\n<a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used\nwhich does nothing but render child components sequentially into the\nContainer (no sizing or positioning will be performed in this situation).</p>\n\n<p><strong>layout</strong> may be specified as either as an Object or as a String:</p>\n\n<h2>Specify as an Object</h2>\n\n<p>Example usage:</p>\n\n<pre><code>layout: {\n    type: 'vbox',\n    align: 'left'\n}\n</code></pre>\n\n<ul>\n<li><p><strong>type</strong></p>\n\n<p>The layout type to be used for this container.  If not specified,\na default <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">Ext.layout.container.Auto</a> will be created and used.</p>\n\n<p>Valid layout <code>type</code> values are listed in <a href=\"#!/api/Ext.enums.Layout\" rel=\"Ext.enums.Layout\" class=\"docClass\">Ext.enums.Layout</a>.</p></li>\n<li><p>Layout specific configuration properties</p>\n\n<p>Additional layout specific configuration properties may also be\nspecified. For complete details regarding the valid config options for\neach layout type, see the layout class corresponding to the <code>type</code>\nspecified.</p></li>\n</ul>\n\n\n<h2>Specify as a String</h2>\n\n<p>Example usage:</p>\n\n<pre><code>layout: 'vbox'\n</code></pre>\n\n<ul>\n<li><p><strong>layout</strong></p>\n\n<p>The layout <code>type</code> to be used for this container (see <a href=\"#!/api/Ext.enums.Layout\" rel=\"Ext.enums.Layout\" class=\"docClass\">Ext.enums.Layout</a>\nfor list of valid values).</p>\n\n<p>Additional layout specific configuration properties. For complete\ndetails regarding the valid config options for each layout type, see the\nlayout class corresponding to the <code>layout</code> specified.</p></li>\n</ul>\n\n\n<h2>Configuring the default layout type</h2>\n\n<p>If a certain Container class has a default layout (For example a <a href=\"#!/api/Ext.toolbar.Toolbar\" rel=\"Ext.toolbar.Toolbar\" class=\"docClass\">Toolbar</a>\nwith a default <code>Box</code> layout), then to simply configure the default layout,\nuse an object, but without the <code>type</code> property:</p>\n\n<pre><code>xtype: 'toolbar',\nlayout: {\n    pack: 'center'\n}\n</code></pre>\n"},"lockedGridConfig":{"!type":"?","!doc":"<p>Any special configuration options for the locked part of the grid</p>\n"},"lockedViewConfig":{"!type":"?","!doc":"<p>A view configuration to be applied to the\nlocked side of the grid. Any conflicting configurations between lockedViewConfig\nand viewConfig will be overwritten by the lockedViewConfig.</p>\n"},"multiSelect":{"!type":"bool","!doc":"<p>True to enable 'MULTI' selection mode on selection model.</p>\n"},"normalGridConfig":{"!type":"?","!doc":"<p>Any special configuration options for the normal part of the grid</p>\n"},"normalViewConfig":{"!type":"?","!doc":"<p>A view configuration to be applied to the\nnormal/unlocked side of the grid. Any conflicting configurations between normalViewConfig\nand viewConfig will be overwritten by the normalViewConfig.</p>\n"},"rowLines":{"!type":"bool","!doc":"<p>Adds row line styling</p>\n"},"scroll":{"!type":"string|bool","!doc":"<p>Scrollers configuration. Valid values are 'both', 'horizontal' or 'vertical'.\nTrue implies 'both'. False implies 'none'.</p>\n"},"scrollDelta":{"!type":"number","!doc":"<p>Number of pixels to scroll when scrolling the locked section with mousewheel.</p>\n"},"sealedColumns":{"!type":"bool","!doc":"<p>True to constrain column dragging so that a column cannot be dragged in or out of it's\ncurrent group. Only relevant while <a href=\"#!/api/Ext.panel.Table-cfg-enableColumnMove\" rel=\"Ext.panel.Table-cfg-enableColumnMove\" class=\"docClass\">enableColumnMove</a> is enabled.</p>\n"},"selModel":{"!type":"+Ext.selection.Model|?","!doc":"<p>A <a href=\"#!/api/Ext.selection.Model\" rel=\"Ext.selection.Model\" class=\"docClass\">selection model</a> instance or config object.  In latter case the <a href=\"#!/api/Ext.panel.Table-cfg-selType\" rel=\"Ext.panel.Table-cfg-selType\" class=\"docClass\">selType</a>\nconfig option determines to which type of selection model this config is applied.</p>\n"},"selType":{"!type":"string","!doc":"<p>An xtype of selection model to use. Defaults to 'rowmodel'. This is used to create selection model if just\na config object or nothing at all given in <a href=\"#!/api/Ext.panel.Table-cfg-selModel\" rel=\"Ext.panel.Table-cfg-selModel\" class=\"docClass\">selModel</a> config.</p>\n"},"simpleSelect":{"!type":"bool","!doc":"<p>True to enable 'SIMPLE' selection mode on selection model.</p>\n"},"sortableColumns":{"!type":"bool","!doc":"<p>False to disable column sorting via clicking the header and via the Sorting menu items.</p>\n"},"store":{"!type":"+Ext.data.Store","!doc":"<p>The <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Store</a> the grid should use as its data source.</p>\n"},"subGridXType":{"!type":"string","!doc":"<p>The xtype of the subgrid to specify. If this is\nnot specified lockable will determine the subgrid xtype to create by the\nfollowing rule. Use the superclasses xtype if the superclass is NOT\ntablepanel, otherwise use the xtype itself.</p>\n"},"syncRowHeight":{"!type":"bool","!doc":"<p>Synchronize rowHeight between the normal and\nlocked grid view. This is turned on by default. If your grid is guaranteed\nto have rows of all the same height, you should set this to false to\noptimize performance.</p>\n"},"verticalScroller":{"!type":"?","!doc":"<p>A config object to be used when configuring the <a href=\"#!/api/Ext.grid.plugin.BufferedRenderer\" rel=\"Ext.grid.plugin.BufferedRenderer\" class=\"docClass\">scroll monitor</a> to control\nrefreshing of data in an \"infinite grid\".</p>\n\n<p>Configurations of this object allow fine tuning of data caching which can improve performance and usability\nof the infinite grid.</p>\n"},"view":{"!type":"+Ext.view.Table","!doc":"<p>The <a href=\"#!/api/Ext.view.Table\" rel=\"Ext.view.Table\" class=\"docClass\">Ext.view.Table</a> used by the grid. Use <a href=\"#!/api/Ext.panel.Table-cfg-viewConfig\" rel=\"Ext.panel.Table-cfg-viewConfig\" class=\"docClass\">viewConfig</a> to just supply some config options to\nview (instead of creating an entire View instance).</p>\n"},"viewConfig":{"!type":"?","!doc":"<p>A config object that will be applied to the grid's UI view. Any of the config options available for\n<a href=\"#!/api/Ext.view.Table\" rel=\"Ext.view.Table\" class=\"docClass\">Ext.view.Table</a> can be specified here. This option is ignored if <a href=\"#!/api/Ext.panel.Table-cfg-view\" rel=\"Ext.panel.Table-cfg-view\" class=\"docClass\">view</a> is specified.</p>\n"},"viewType":{"!type":"string","!doc":"<p>An xtype of view to use. This is automatically set to 'gridview' by <a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Grid</a>\nand to 'treeview' by <a href=\"#!/api/Ext.tree.Panel\" rel=\"Ext.tree.Panel\" class=\"docClass\">Tree</a>.</p>\n"}},"Ext_panel_Tool_cfg":{"!proto":"Ext_Component_cfg","baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this component's element. This will also be prepended to elements within this\ncomponent like Panel's body will get a class <code>x-panel-body</code>. This means that if you create a subclass of Panel, and\nyou want it to get all the Panels styling for the element and the body, you leave the <code>baseCls</code> <code>x-panel</code> and use\n<code>componentCls</code> to add specific styling for this component.</p>\n"},"callback":{"!type":"fn()","!doc":"<p>A function to execute when the tool is clicked.</p>\n"},"disabledCls":{"!type":"string","!doc":"<p>CSS class to add when the Component is disabled.</p>\n"},"handler":{"!type":"fn()","!doc":"<p>A function to execute when the tool is clicked. Arguments passed are:</p>\n\n<ul>\n<li><strong>event</strong> : <a href=\"#!/api/Ext.EventObject\" rel=\"Ext.EventObject\" class=\"docClass\">Ext.EventObject</a> - The click event.</li>\n<li><strong>toolEl</strong> : <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a> - The tool Element.</li>\n<li><strong>owner</strong> : <a href=\"#!/api/Ext.panel.Header\" rel=\"Ext.panel.Header\" class=\"docClass\">Ext.panel.Header</a> - The host panel header.</li>\n<li><strong>tool</strong> : <a href=\"#!/api/Ext.panel.Tool\" rel=\"Ext.panel.Tool\" class=\"docClass\">Ext.panel.Tool</a> - The tool object</li>\n</ul>\n\n"},"height":{"!type":"number","!doc":"<p>Tool size is fixed so that Box layout can avoid measurements.</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.panel.Tool-method-getEl\" rel=\"Ext.panel.Tool-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.panel.Tool-method-getEl\" rel=\"Ext.panel.Tool-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.panel.Tool-cfg-renderSelectors\" rel=\"Ext.panel.Tool-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.panel.Tool-cfg-childEls\" rel=\"Ext.panel.Tool-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"},"scope":{"!type":"?","!doc":"<p>The scope to execute the <a href=\"#!/api/Ext.panel.Tool-cfg-callback\" rel=\"Ext.panel.Tool-cfg-callback\" class=\"docClass\">callback</a> or <a href=\"#!/api/Ext.panel.Tool-cfg-handler\" rel=\"Ext.panel.Tool-cfg-handler\" class=\"docClass\">handler</a> function. Defaults\nto the tool.</p>\n"},"stopEvent":{"!type":"bool","!doc":"<p>Specify as false to allow click event to propagate.</p>\n"},"toolOverCls":{"!type":"string"},"toolOwner":{"!type":"+Ext.Component","!doc":"<p>The owner to report to the <code>callback</code> method. Default is <code>null</code> for the <code>ownerCt</code>.</p>\n"},"toolPressedCls":{"!type":"string"},"tooltip":{"!type":"string|?","!doc":"<p>The tooltip for the tool - can be a string to be used as innerHTML (html tags are accepted) or QuickTips config\nobject</p>\n"},"tooltipType":{"!type":"string","!doc":"<p>The type of tooltip to use. Either 'qtip' (default) for QuickTips or 'title' for title attribute.</p>\n"},"type":{"!type":"string","!doc":"<p>The type of tool to render. The following types are available:</p>\n\n<ul>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-close\"></span> close</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-minimize\"></span> minimize</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-maximize\"></span> maximize</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-restore\"></span> restore</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-toggle\"></span> toggle</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-gear\"></span> gear</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-prev\"></span> prev</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-next\"></span> next</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-pin\"></span> pin</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-unpin\"></span> unpin</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-right\"></span> right</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-left\"></span> left</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-down\"></span> down</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-up\"></span> up</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-refresh\"></span> refresh</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-plus\"></span> plus</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-minus\"></span> minus</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-search\"></span> search</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-save\"></span> save</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-help\"></span> help</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-print\"></span> print</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-expand\"></span> expand</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-collapse\"></span> collapse</li>\n</ul>\n\n"},"width":{"!type":"number","!doc":"<p>The width of this component in pixels.</p>\n"}},"Ext_picker_Color_cfg":{"!proto":"Ext_Component_cfg","allowReselect":{"!type":"bool","!doc":"<p>If set to true then reselecting a color that is already selected fires the <a href=\"#!/api/Ext.picker.Color-event-select\" rel=\"Ext.picker.Color-event-select\" class=\"docClass\">select</a> event</p>\n"},"clickEvent":{"!type":"string","!doc":"<p>The DOM event that will cause a color to be selected. This can be any valid event name (dblclick, contextmenu).</p>\n"},"componentCls":{"!type":"string","!doc":"<p>The CSS class to apply to the containing element.</p>\n"},"handler":{"!type":"fn()","!doc":"<p>A function that will handle the select event of this picker. The handler is passed the following parameters:</p>\n\n<ul>\n<li><p><code>picker</code> : ColorPicker</p>\n\n<p>The <a href=\"#!/api/Ext.picker.Color\" rel=\"Ext.picker.Color\" class=\"docClass\">picker</a>.</p></li>\n<li><p><code>color</code> : String</p>\n\n<p>The 6-digit color hex code (without the # symbol).</p></li>\n</ul>\n\n"},"itemCls":{"!type":"string","!doc":"<p>The CSS class to apply to the color picker's items</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.picker.Color-method-getEl\" rel=\"Ext.picker.Color-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.picker.Color-method-getEl\" rel=\"Ext.picker.Color-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.picker.Color-cfg-renderSelectors\" rel=\"Ext.picker.Color-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.picker.Color-cfg-childEls\" rel=\"Ext.picker.Color-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"},"scope":{"!type":"?","!doc":"<p>The scope (<code>this</code> reference) in which the <code><a href=\"#!/api/Ext.picker.Color-cfg-handler\" rel=\"Ext.picker.Color-cfg-handler\" class=\"docClass\">handler</a></code> function will be called.</p>\n\n<p>Defaults to this Color picker instance.</p>\n"},"selectedCls":{"!type":"string","!doc":"<p>The CSS class to apply to the selected element</p>\n"},"value":{"!type":"string","!doc":"<p>The initial color to highlight (should be a valid 6-digit color hex code without the # symbol). Note that the hex\ncodes are case-sensitive.</p>\n"}},"Ext_picker_Date_cfg":{"!proto":"Ext_Component_cfg","ariaTitle":{"!type":"string","!doc":"<p>The text to display for the aria title</p>\n"},"ariaTitleDateFormat":{"!type":"string","!doc":"<p>The date format to display for the current value in the <a href=\"#!/api/Ext.picker.Date-cfg-ariaTitle\" rel=\"Ext.picker.Date-cfg-ariaTitle\" class=\"docClass\">ariaTitle</a></p>\n"},"baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this components element.</p>\n"},"border":{"!type":"number|string|bool","!doc":"<p>Specifies the border size for this component. The border can be a single numeric value to apply to all sides or it can\nbe a CSS style specification for each style, for example: '10 5 3 10' (top, right, bottom, left).</p>\n\n<p>For components that have no border by default, setting this won't make the border appear by itself.\nYou also need to specify border color and style:</p>\n\n<pre><code>border: 5,\nstyle: {\n    borderColor: 'red',\n    borderStyle: 'solid'\n}\n</code></pre>\n\n<p>To turn off the border, use <code>border: false</code>.</p>\n"},"dayNames":{"!type":"[string]","!doc":"<p>An array of textual day names which can be overriden for localization support (defaults to <a href=\"#!/api/Ext.Date-property-dayNames\" rel=\"Ext.Date-property-dayNames\" class=\"docClass\">Ext.Date.dayNames</a>)</p>\n"},"disableAnim":{"!type":"bool","!doc":"<p>True to disable animations when showing the month picker.</p>\n"},"disabledCellCls":{"!type":"string","!doc":"<p>The class to apply to disabled cells.</p>\n"},"disabledDates":{"!type":"[string]","!doc":"<p>An array of 'dates' to disable, as strings. These strings will be used to build a dynamic regular expression so\nthey are very powerful. Some examples:</p>\n\n<ul>\n<li>['03/08/2003', '09/16/2003'] would disable those exact dates</li>\n<li>['03/08', '09/16'] would disable those days for every year</li>\n<li>['^03/08'] would only match the beginning (useful if you are using short years)</li>\n<li>['03/../2006'] would disable every day in March 2006</li>\n<li>['^03'] would disable every day in every March</li>\n</ul>\n\n\n<p>Note that the format of the dates included in the array should exactly match the <a href=\"#!/api/Ext.picker.Date-cfg-format\" rel=\"Ext.picker.Date-cfg-format\" class=\"docClass\">format</a> config. In order\nto support regular expressions, if you are using a date format that has '.' in it, you will have to escape the\ndot when restricting dates. For example: ['03\\.08\\.03'].</p>\n"},"disabledDatesRE":{"!type":"+RegExp","!doc":"<p>JavaScript regular expression used to disable a pattern of dates. The <a href=\"#!/api/Ext.picker.Date-cfg-disabledDates\" rel=\"Ext.picker.Date-cfg-disabledDates\" class=\"docClass\">disabledDates</a>\nconfig will generate this regex internally, but if you specify disabledDatesRE it will take precedence over the\ndisabledDates value.</p>\n"},"disabledDatesText":{"!type":"string","!doc":"<p>The tooltip text to display when the date falls on a disabled date.</p>\n"},"disabledDays":{"!type":"[number]","!doc":"<p>An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday.</p>\n"},"disabledDaysText":{"!type":"string","!doc":"<p>The tooltip to display when the date falls on a disabled day.</p>\n"},"focusOnShow":{"!type":"bool","!doc":"<p>True to automatically focus the picker on show.</p>\n"},"format":{"!type":"string","!doc":"<p>The default date format string which can be overriden for localization support. The format must be valid\naccording to <a href=\"#!/api/Ext.Date-method-parse\" rel=\"Ext.Date-method-parse\" class=\"docClass\">Ext.Date.parse</a> (defaults to <a href=\"#!/api/Ext.Date-property-defaultFormat\" rel=\"Ext.Date-property-defaultFormat\" class=\"docClass\">Ext.Date.defaultFormat</a>).</p>\n"},"handler":{"!type":"fn()","!doc":"<p>Optional. A function that will handle the select event of this picker. The handler is passed the following\nparameters:</p>\n\n<ul>\n<li><code>picker</code> : <a href=\"#!/api/Ext.picker.Date\" rel=\"Ext.picker.Date\" class=\"docClass\">Ext.picker.Date</a></li>\n</ul>\n\n\n<p>This Date picker.</p>\n\n<ul>\n<li><code>date</code> : Date</li>\n</ul>\n\n\n<p>The selected date.</p>\n"},"keyNavConfig":{"!type":"?","!doc":"<p>Specifies optional custom key event handlers for the <a href=\"#!/api/Ext.util.KeyNav\" rel=\"Ext.util.KeyNav\" class=\"docClass\">Ext.util.KeyNav</a> attached to this date picker. Must\nconform to the config format recognized by the <a href=\"#!/api/Ext.util.KeyNav\" rel=\"Ext.util.KeyNav\" class=\"docClass\">Ext.util.KeyNav</a> constructor. Handlers specified in this\nobject will replace default handlers of the same name.</p>\n"},"longDayFormat":{"!type":"string","!doc":"<p>The format for displaying a date in a longer format.</p>\n"},"maxDate":{"!type":"+Date","!doc":"<p>Maximum allowable date (JavaScript date object)</p>\n"},"maxText":{"!type":"string","!doc":"<p>The error text to display if the maxDate validation fails.</p>\n"},"minDate":{"!type":"+Date","!doc":"<p>Minimum allowable date (JavaScript date object)</p>\n"},"minText":{"!type":"string","!doc":"<p>The error text to display if the minDate validation fails.</p>\n"},"monthNames":{"!type":"[string]","!doc":"<p>An array of textual month names which can be overriden for localization support (defaults to <a href=\"#!/api/Ext.Date-property-monthNames\" rel=\"Ext.Date-property-monthNames\" class=\"docClass\">Ext.Date.monthNames</a>)</p>\n"},"monthYearFormat":{"!type":"string","!doc":"<p>The date format for the header month</p>\n"},"monthYearText":{"!type":"string","!doc":"<p>The header month selector tooltip</p>\n"},"nextText":{"!type":"string","!doc":"<p>The next month navigation button tooltip</p>\n"},"prevText":{"!type":"string","!doc":"<p>The previous month navigation button tooltip</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.picker.Date-method-getEl\" rel=\"Ext.picker.Date-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.picker.Date-method-getEl\" rel=\"Ext.picker.Date-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.picker.Date-cfg-renderSelectors\" rel=\"Ext.picker.Date-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.picker.Date-cfg-childEls\" rel=\"Ext.picker.Date-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"},"scope":{"!type":"?","!doc":"<p>The scope (<code>this</code> reference) in which the <code><a href=\"#!/api/Ext.picker.Date-cfg-handler\" rel=\"Ext.picker.Date-cfg-handler\" class=\"docClass\">handler</a></code> function will be called.</p>\n\n<p>Defaults to this DatePicker instance.</p>\n"},"selectedCls":{"!type":"string","!doc":"<p>The class to apply to the selected cell.</p>\n"},"showToday":{"!type":"bool","!doc":"<p>False to hide the footer area containing the Today button and disable the keyboard handler for spacebar that\nselects the current date.</p>\n"},"startDay":{"!type":"number","!doc":"<p>Day index at which the week should begin, 0-based.</p>\n\n<p>Defaults to <code>0</code> (Sunday).</p>\n"},"todayText":{"!type":"string","!doc":"<p>The text to display on the button that selects the current date</p>\n"},"todayTip":{"!type":"string","!doc":"<p>A string used to format the message for displaying in a tooltip over the button that selects the current date.\nThe <code>{0}</code> token in string is replaced by today's date.</p>\n"}},"Ext_picker_Month_cfg":{"!proto":"Ext_Component_cfg","baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to the picker element.</p>\n"},"cancelText":{"!type":"string","!doc":"<p>The text to display on the cancel button.</p>\n"},"okText":{"!type":"string","!doc":"<p>The text to display on the ok button.</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.picker.Month-method-getEl\" rel=\"Ext.picker.Month-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.picker.Month-method-getEl\" rel=\"Ext.picker.Month-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.picker.Month-cfg-renderSelectors\" rel=\"Ext.picker.Month-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.picker.Month-cfg-childEls\" rel=\"Ext.picker.Month-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"},"selectedCls":{"!type":"string","!doc":"<p>The class to be added to selected items in the picker.</p>\n"},"showButtons":{"!type":"bool","!doc":"<p>True to show ok and cancel buttons below the picker.</p>\n"},"value":{"!type":"+Date|[number]","!doc":"<p>The default value to set. See <a href=\"#!/api/Ext.picker.Month-method-setValue\" rel=\"Ext.picker.Month-method-setValue\" class=\"docClass\">setValue</a></p>\n"}},"Ext_picker_Time_cfg":{"!proto":"Ext_view_BoundList_cfg","componentCls":{"!type":"string","!doc":"<p>CSS Class to be added to a components root level element to give distinction to it via styling.</p>\n"},"format":{"!type":"string","!doc":"<p>The default time format string which can be overriden for localization support. The format must be valid\naccording to <a href=\"#!/api/Ext.Date-method-parse\" rel=\"Ext.Date-method-parse\" class=\"docClass\">Ext.Date.parse</a>.</p>\n\n<p>Defaults to <code>'g:i A'</code>, e.g., <code>'3:15 PM'</code>. For 24-hour time format try <code>'H:i'</code> instead.</p>\n"},"increment":{"!type":"number","!doc":"<p>The number of minutes between each time value in the list.</p>\n"},"loadMask":{"!type":"bool"},"maxValue":{"!type":"+Date","!doc":"<p>The maximum time to be shown in the list of times. This must be a Date object (only the time fields will be\nused); no parsing of String values will be done.</p>\n"},"minValue":{"!type":"+Date","!doc":"<p>The minimum time to be shown in the list of times. This must be a Date object (only the time fields will be\nused); no parsing of String values will be done.</p>\n"}},"Ext_resizer_BorderSplitter_cfg":{"!proto":"Ext_resizer_Splitter_cfg","collapseTarget":{"!type":"string|+Ext.panel.Panel","!doc":"<p>must be configured in by the border layout:</p>\n"}},"Ext_resizer_Handle_cfg":{"!proto":"Ext_Component_cfg","region":{"!type":"string|string|string|string|string","!doc":"<p>Ext.resizer.Resizer.prototype.possiblePositions define the regions\nwhich will be passed in as a region configuration.</p>\n"}},"Ext_resizer_ResizeTracker_cfg":{"!proto":"Ext_dd_DragTracker_cfg","constrainTo":{"!type":"+Ext.util.Region|+Ext.Element","!doc":"<p>Default to no constraint</p>\n"}},"Ext_resizer_Splitter_cfg":{"!proto":"Ext_Component_cfg","baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this component's element. This will also be prepended to elements within this\ncomponent like Panel's body will get a class <code>x-panel-body</code>. This means that if you create a subclass of Panel, and\nyou want it to get all the Panels styling for the element and the body, you leave the <code>baseCls</code> <code>x-panel</code> and use\n<code>componentCls</code> to add specific styling for this component.</p>\n"},"collapseOnDblClick":{"!type":"bool","!doc":"<p>True to enable dblclick to toggle expand and collapse on the <a href=\"#!/api/Ext.resizer.Splitter-cfg-collapseTarget\" rel=\"Ext.resizer.Splitter-cfg-collapseTarget\" class=\"docClass\">collapseTarget</a> Panel.</p>\n"},"collapseTarget":{"!type":"string|+Ext.panel.Panel","!doc":"<p>A string describing the relative position of the immediate sibling Panel to collapse. May be 'prev' or 'next'.</p>\n\n<p>Or the immediate sibling Panel to collapse.</p>\n\n<p>The orientation of the mini-collapse tool will be inferred from this setting.</p>\n\n<p><strong>Note that only Panels may be collapsed.</strong></p>\n"},"collapsedCls":{"!type":"string","!doc":"<p>A class to add to the splitter when it is collapsed. See <a href=\"#!/api/Ext.resizer.Splitter-cfg-collapsible\" rel=\"Ext.resizer.Splitter-cfg-collapsible\" class=\"docClass\">collapsible</a>.</p>\n"},"collapsible":{"!type":"bool","!doc":"<p>True to show a mini-collapse tool in the Splitter to toggle expand and collapse on the <a href=\"#!/api/Ext.resizer.Splitter-cfg-collapseTarget\" rel=\"Ext.resizer.Splitter-cfg-collapseTarget\" class=\"docClass\">collapseTarget</a> Panel.\nDefaults to the <a href=\"#!/api/Ext.panel.Panel-cfg-collapsible\" rel=\"Ext.panel.Panel-cfg-collapsible\" class=\"docClass\">collapsible</a> setting of the Panel.</p>\n"},"defaultSplitMax":{"!type":"number","!doc":"<p>Provides a default maximum width or height for the two components\nthat the splitter is between.</p>\n"},"defaultSplitMin":{"!type":"number","!doc":"<p>Provides a default minimum width or height for the two components\nthat the splitter is between.</p>\n"},"performCollapse":{"!type":"bool","!doc":"<p>Set to false to prevent this Splitter's mini-collapse tool from managing the collapse\nstate of the <a href=\"#!/api/Ext.resizer.Splitter-cfg-collapseTarget\" rel=\"Ext.resizer.Splitter-cfg-collapseTarget\" class=\"docClass\">collapseTarget</a>.</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.resizer.Splitter-method-getEl\" rel=\"Ext.resizer.Splitter-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.resizer.Splitter-method-getEl\" rel=\"Ext.resizer.Splitter-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.resizer.Splitter-cfg-renderSelectors\" rel=\"Ext.resizer.Splitter-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.resizer.Splitter-cfg-childEls\" rel=\"Ext.resizer.Splitter-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"},"size":{"!type":"number","!doc":"<p>The size of the splitter. This becomes the height for vertical splitters and\nwidth for horizontal splitters.</p>\n"}},"Ext_slider_Multi_cfg":{"!proto":"Ext_form_field_Base_cfg","animate":{"!type":"bool","!doc":"<p>Turn on or off animation.</p>\n"},"clickToChange":{"!type":"bool","!doc":"<p>Determines whether or not clicking on the Slider axis will change the slider.</p>\n"},"componentLayout":{"!type":"string|?","!doc":"<p>The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout\nmanager which sizes a Component's internal structure in response to the Component being sized.</p>\n\n<p>Generally, developers will not use this configuration as all provided Components which need their internal\nelements sizing (Such as <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">input fields</a>) come with their own componentLayout managers.</p>\n\n<p>The <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used on instances of the base <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\nclass which simply sizes the Component's encapsulating element to the height and width specified in the\n<a href=\"#!/api/Ext.slider.Multi-method-setSize\" rel=\"Ext.slider.Multi-method-setSize\" class=\"docClass\">setSize</a> method.</p>\n"},"constrainThumbs":{"!type":"bool","!doc":"<p>True to disallow thumbs from overlapping one another.</p>\n"},"decimalPrecision":{"!type":"number|bool","!doc":"<p>The number of decimal places to which to round the Slider's value.</p>\n\n<p>To disable rounding, configure as <strong>false</strong>.</p>\n"},"fieldSubTpl":{"!type":"+Ext.XTemplate","!doc":"<p>note: {id} here is really {inputId}, but {cmpId} is available</p>\n"},"increment":{"!type":"number","!doc":"<p>How many units to change the slider when adjusting by drag and drop. Use this option to enable 'snapping'.</p>\n"},"keyIncrement":{"!type":"number","!doc":"<p>How many units to change the Slider when adjusting with keyboard navigation. If the increment\nconfig is larger, it will be used instead.</p>\n"},"maxValue":{"!type":"number","!doc":"<p>The maximum value for the Slider.</p>\n"},"minValue":{"!type":"number","!doc":"<p>The minimum value for the Slider.</p>\n"},"tipText":{"!type":"fn()","!doc":"<p>A function used to display custom text for the slider tip.</p>\n\n<p>Defaults to null, which will use the default on the plugin.</p>\n"},"useTips":{"!type":"?|bool","!doc":"<p>True to use an <a href=\"#!/api/Ext.slider.Tip\" rel=\"Ext.slider.Tip\" class=\"docClass\">Ext.slider.Tip</a> to display tips for the value. This option may also\nprovide a configuration object for an <a href=\"#!/api/Ext.slider.Tip\" rel=\"Ext.slider.Tip\" class=\"docClass\">Ext.slider.Tip</a>.</p>\n"},"value":{"!type":"number","!doc":"<p>A value with which to initialize the slider. Setting this will only result in the creation\nof a single slider thumb; if you want multiple thumbs then use the <a href=\"#!/api/Ext.slider.Multi-cfg-values\" rel=\"Ext.slider.Multi-cfg-values\" class=\"docClass\">values</a> config instead.</p>\n\n<p>Defaults to <a href=\"#!/api/Ext.slider.Multi-cfg-minValue\" rel=\"Ext.slider.Multi-cfg-minValue\" class=\"docClass\">minValue</a>.</p>\n"},"values":{"!type":"[number]","!doc":"<p>Array of Number values with which to initalize the slider. A separate slider thumb will be created for each value\nin this array. This will take precedence over the single <a href=\"#!/api/Ext.slider.Multi-cfg-value\" rel=\"Ext.slider.Multi-cfg-value\" class=\"docClass\">value</a> config.</p>\n"},"vertical":{"!type":"bool","!doc":"<p>Orient the Slider vertically rather than horizontally.</p>\n"},"zeroBasedSnapping":{"!type":"bool","!doc":"<p>Set to <code>true</code> to calculate snap points based on <a href=\"#!/api/Ext.slider.Multi-cfg-increment\" rel=\"Ext.slider.Multi-cfg-increment\" class=\"docClass\">increment</a>s from zero as opposed to\nfrom this Slider's <a href=\"#!/api/Ext.slider.Multi-cfg-minValue\" rel=\"Ext.slider.Multi-cfg-minValue\" class=\"docClass\">minValue</a>.</p>\n\n<p>By Default, valid snap points are calculated starting <a href=\"#!/api/Ext.slider.Multi-cfg-increment\" rel=\"Ext.slider.Multi-cfg-increment\" class=\"docClass\">increment</a>s from the <a href=\"#!/api/Ext.slider.Multi-cfg-minValue\" rel=\"Ext.slider.Multi-cfg-minValue\" class=\"docClass\">minValue</a></p>\n"}},"Ext_slider_Single_cfg":{"!proto":"Ext_slider_Multi_cfg"},"Ext_slider_Thumb_cfg":{"!proto":"Ext_Base_cfg","constrain":{"!type":"bool","!doc":"<p>True to constrain the thumb so that it cannot overlap its siblings</p>\n"},"slider":{"!type":"+Ext.slider.MultiSlider","!doc":"<p>The Slider to render to.</p>\n"}},"Ext_slider_Tip_cfg":{"!proto":"Ext_tip_Tip_cfg","align":{"!type":"string","!doc":"<p>Alignment configuration for the tip to the slider. See <a href=\"#!/api/Ext.util.Positionable-method-alignTo\" rel=\"Ext.util.Positionable-method-alignTo\" class=\"docClass\">Ext.util.Positionable.alignTo</a>. Default\nvalues for alignment are provided by specifying the <a href=\"#!/api/Ext.slider.Tip-cfg-position\" rel=\"Ext.slider.Tip-cfg-position\" class=\"docClass\">position</a> config.</p>\n"},"minWidth":{"!type":"number","!doc":"<p>The minimum width of the tip in pixels.</p>\n"},"offsets":{"!type":"[?]","!doc":"<p>Offsets for aligning the tip to the slider. See <a href=\"#!/api/Ext.util.Positionable-method-alignTo\" rel=\"Ext.util.Positionable-method-alignTo\" class=\"docClass\">Ext.util.Positionable.alignTo</a>. Default values\nfor offsets are provided by specifying the <a href=\"#!/api/Ext.slider.Tip-cfg-position\" rel=\"Ext.slider.Tip-cfg-position\" class=\"docClass\">position</a> config.</p>\n"},"position":{"!type":"string","!doc":"<p>Sets the position for where the tip will be displayed related to the thumb. This sets\ndefaults for <a href=\"#!/api/Ext.slider.Tip-cfg-align\" rel=\"Ext.slider.Tip-cfg-align\" class=\"docClass\">align</a> and <a href=\"#!/api/Ext.slider.Tip-cfg-offsets\" rel=\"Ext.slider.Tip-cfg-offsets\" class=\"docClass\">offsets</a> configurations. If <a href=\"#!/api/Ext.slider.Tip-cfg-align\" rel=\"Ext.slider.Tip-cfg-align\" class=\"docClass\">align</a> or\n<a href=\"#!/api/Ext.slider.Tip-cfg-offsets\" rel=\"Ext.slider.Tip-cfg-offsets\" class=\"docClass\">offsets</a> configurations are specified, they will override the defaults defined\nby position.</p>\n"}},"Ext_state_CookieProvider_cfg":{"!proto":"Ext_state_Provider_cfg","domain":{"!type":"string","!doc":"<p>The domain to save the cookie for. Note that you cannot specify a different domain than your page is on, but you can\nspecify a sub-domain, or simply the domain itself like 'sencha.com' to include all sub-domains if you need to access\ncookies across different sub-domains. Defaults to null which uses the same domain the page is running on including\nthe 'www' like 'www.sencha.com'.</p>\n"},"expires":{"!type":"+Date","!doc":"<p>The cookie expiration date. Defaults to 7 days from now.</p>\n"},"path":{"!type":"string","!doc":"<p>The path for which the cookie is active. Defaults to root '/' which makes it active for all pages in the site.</p>\n"},"secure":{"!type":"bool","!doc":"<p>True if the site is using SSL</p>\n"}},"Ext_state_Provider_cfg":{"!proto":"Ext_Base_cfg","listeners":{"!type":"?","!doc":"<p>A config object containing one or more event handlers to be added to this object during initialization. This\nshould be a valid listeners config object as specified in the <a href=\"#!/api/Ext.util.Observable-method-addListener\" rel=\"Ext.util.Observable-method-addListener\" class=\"docClass\">addListener</a> example for attaching multiple\nhandlers at once.</p>\n\n<p><strong>DOM events from Ext JS <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Components</a></strong></p>\n\n<p>While <em>some</em> Ext JS Component classes export selected DOM events (e.g. \"click\", \"mouseover\" etc), this is usually\nonly done when extra value can be added. For example the <a href=\"#!/api/Ext.view.View\" rel=\"Ext.view.View\" class=\"docClass\">DataView</a>'s <strong><code><a href=\"#!/api/Ext.view.View-event-itemclick\" rel=\"Ext.view.View-event-itemclick\" class=\"docClass\">itemclick</a></code></strong> event passing the node clicked on. To access DOM events directly from a\nchild element of a Component, we need to specify the <code>element</code> option to identify the Component property to add a\nDOM listener to:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>({\n    width: 400,\n    height: 200,\n    dockedItems: [{\n        xtype: 'toolbar'\n    }],\n    listeners: {\n        click: {\n            element: 'el', //bind to the underlying el property on the panel\n            fn: function(){ console.log('click el'); }\n        },\n        dblclick: {\n            element: 'body', //bind to the underlying body property on the panel\n            fn: function(){ console.log('dblclick body'); }\n        }\n    }\n});\n</code></pre>\n"},"prefix":{"!type":"string","!doc":"<p>A string to prefix to items stored in the underlying state store.\nDefaults to <tt>'ext-'</tt></p>\n"}},"Ext_state_Stateful_cfg":{"!proto":"Ext_Base_cfg","listeners":{"!type":"?","!doc":"<p>A config object containing one or more event handlers to be added to this object during initialization. This\nshould be a valid listeners config object as specified in the <a href=\"#!/api/Ext.util.Observable-method-addListener\" rel=\"Ext.util.Observable-method-addListener\" class=\"docClass\">addListener</a> example for attaching multiple\nhandlers at once.</p>\n\n<p><strong>DOM events from Ext JS <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Components</a></strong></p>\n\n<p>While <em>some</em> Ext JS Component classes export selected DOM events (e.g. \"click\", \"mouseover\" etc), this is usually\nonly done when extra value can be added. For example the <a href=\"#!/api/Ext.view.View\" rel=\"Ext.view.View\" class=\"docClass\">DataView</a>'s <strong><code><a href=\"#!/api/Ext.view.View-event-itemclick\" rel=\"Ext.view.View-event-itemclick\" class=\"docClass\">itemclick</a></code></strong> event passing the node clicked on. To access DOM events directly from a\nchild element of a Component, we need to specify the <code>element</code> option to identify the Component property to add a\nDOM listener to:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>({\n    width: 400,\n    height: 200,\n    dockedItems: [{\n        xtype: 'toolbar'\n    }],\n    listeners: {\n        click: {\n            element: 'el', //bind to the underlying el property on the panel\n            fn: function(){ console.log('click el'); }\n        },\n        dblclick: {\n            element: 'body', //bind to the underlying body property on the panel\n            fn: function(){ console.log('dblclick body'); }\n        }\n    }\n});\n</code></pre>\n"},"saveDelay":{"!type":"number","!doc":"<p>A buffer to be applied if many state events are fired within a short period.</p>\n"},"stateEvents":{"!type":"[string]","!doc":"<p>An array of events that, when fired, should trigger this object to\nsave its state. Defaults to none. <code>stateEvents</code> may be any type\nof event supported by this object, including browser or custom events\n(e.g., <tt>['click', 'customerchange']</tt>).</p>\n\n\n<p>See <code><a href=\"#!/api/Ext.state.Stateful-cfg-stateful\" rel=\"Ext.state.Stateful-cfg-stateful\" class=\"docClass\">stateful</a></code> for an explanation of saving and\nrestoring object state.</p>\n\n"},"stateId":{"!type":"string","!doc":"<p>The unique id for this object to use for state management purposes.</p>\n\n<p>See <a href=\"#!/api/Ext.state.Stateful-cfg-stateful\" rel=\"Ext.state.Stateful-cfg-stateful\" class=\"docClass\">stateful</a> for an explanation of saving and restoring state.</p>\n\n"},"stateful":{"!type":"bool","!doc":"<p>A flag which causes the object to attempt to restore the state of\ninternal properties from a saved state on startup. The object must have\na <a href=\"#!/api/Ext.state.Stateful-cfg-stateId\" rel=\"Ext.state.Stateful-cfg-stateId\" class=\"docClass\">stateId</a> for state to be managed.</p>\n\n<p>Auto-generated ids are not guaranteed to be stable across page loads and\ncannot be relied upon to save and restore the same state for a object.</p>\n\n<p>For state saving to work, the state manager's provider must have been\nset to an implementation of <a href=\"#!/api/Ext.state.Provider\" rel=\"Ext.state.Provider\" class=\"docClass\">Ext.state.Provider</a> which overrides the\n<a href=\"#!/api/Ext.state.Provider-method-set\" rel=\"Ext.state.Provider-method-set\" class=\"docClass\">set</a> and <a href=\"#!/api/Ext.state.Provider-method-get\" rel=\"Ext.state.Provider-method-get\" class=\"docClass\">get</a>\nmethods to save and recall name/value pairs. A built-in implementation,\n<a href=\"#!/api/Ext.state.CookieProvider\" rel=\"Ext.state.CookieProvider\" class=\"docClass\">Ext.state.CookieProvider</a> is available.</p>\n\n<p>To set the state provider for the current page:</p>\n\n<p>   <a href=\"#!/api/Ext.state.Manager-method-setProvider\" rel=\"Ext.state.Manager-method-setProvider\" class=\"docClass\">Ext.state.Manager.setProvider</a>(new <a href=\"#!/api/Ext.state.CookieProvider\" rel=\"Ext.state.CookieProvider\" class=\"docClass\">Ext.state.CookieProvider</a>({\n       expires: new Date(new Date().getTime()+(1000<em>60</em>60<em>24</em>7)), //7 days from now\n   }));</p>\n\n<p>A stateful object attempts to save state when one of the events\nlisted in the <a href=\"#!/api/Ext.state.Stateful-cfg-stateEvents\" rel=\"Ext.state.Stateful-cfg-stateEvents\" class=\"docClass\">stateEvents</a> configuration fires.</p>\n\n<p>To save state, a stateful object first serializes its state by\ncalling <em><a href=\"#!/api/Ext.state.Stateful-method-getState\" rel=\"Ext.state.Stateful-method-getState\" class=\"docClass\">getState</a></em>.</p>\n\n<p>The Component base class implements <a href=\"#!/api/Ext.state.Stateful-method-getState\" rel=\"Ext.state.Stateful-method-getState\" class=\"docClass\">getState</a> to save its width and height within the state\nonly if they were initially configured, and have changed from the configured value.</p>\n\n<p>The Panel class saves its collapsed state in addition to that.</p>\n\n<p>The Grid class saves its column state in addition to its superclass state.</p>\n\n<p>If there is more application state to be save, the developer must provide an implementation which\nfirst calls the superclass method to inherit the above behaviour, and then injects new properties\ninto the returned object.</p>\n\n<p>The value yielded by getState is passed to <a href=\"#!/api/Ext.state.Manager-method-set\" rel=\"Ext.state.Manager-method-set\" class=\"docClass\">Ext.state.Manager.set</a>\nwhich uses the configured <a href=\"#!/api/Ext.state.Provider\" rel=\"Ext.state.Provider\" class=\"docClass\">Ext.state.Provider</a> to save the object\nkeyed by the <a href=\"#!/api/Ext.state.Stateful-cfg-stateId\" rel=\"Ext.state.Stateful-cfg-stateId\" class=\"docClass\">stateId</a>.</p>\n\n<p>During construction, a stateful object attempts to <em>restore</em> its state by calling\n<a href=\"#!/api/Ext.state.Manager-method-get\" rel=\"Ext.state.Manager-method-get\" class=\"docClass\">Ext.state.Manager.get</a> passing the <a href=\"#!/api/Ext.state.Stateful-cfg-stateId\" rel=\"Ext.state.Stateful-cfg-stateId\" class=\"docClass\">stateId</a></p>\n\n<p>The resulting object is passed to <a href=\"#!/api/Ext.state.Stateful-method-applyState\" rel=\"Ext.state.Stateful-method-applyState\" class=\"docClass\">applyState</a>*. The default implementation of\n<a href=\"#!/api/Ext.state.Stateful-method-applyState\" rel=\"Ext.state.Stateful-method-applyState\" class=\"docClass\">applyState</a> simply copies properties into the object, but a developer may\noverride this to support restoration of more complex application state.</p>\n\n<p>You can perform extra processing on state save and restore by attaching\nhandlers to the <a href=\"#!/api/Ext.state.Stateful-event-beforestaterestore\" rel=\"Ext.state.Stateful-event-beforestaterestore\" class=\"docClass\">beforestaterestore</a>, <a href=\"#!/api/Ext.state.Stateful-event-staterestore\" rel=\"Ext.state.Stateful-event-staterestore\" class=\"docClass\">staterestore</a>,\n<a href=\"#!/api/Ext.state.Stateful-event-beforestatesave\" rel=\"Ext.state.Stateful-event-beforestatesave\" class=\"docClass\">beforestatesave</a> and <a href=\"#!/api/Ext.state.Stateful-event-statesave\" rel=\"Ext.state.Stateful-event-statesave\" class=\"docClass\">statesave</a> events.</p>\n"}},"Ext_tab_Bar_cfg":{"!proto":"Ext_panel_Header_cfg","baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this component's element. This will also be prepended to elements within this\ncomponent like Panel's body will get a class <code>x-panel-body</code>. This means that if you create a subclass of Panel, and\nyou want it to get all the Panels styling for the element and the body, you leave the <code>baseCls</code> <code>x-panel</code> and use\n<code>componentCls</code> to add specific styling for this component.</p>\n"},"defaultType":{"!type":"string","!doc":"<p>The default <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">xtype</a> of child Components to create in this Container when\na child item is specified as a raw configuration object, rather than as an instantiated Component.</p>\n"},"maxTabWidth":{"!type":"number","!doc":"<p>The maximum width for a tab in this tab Bar. Defaults to the tab Panel's <a href=\"#!/api/Ext.tab.Panel-cfg-maxTabWidth\" rel=\"Ext.tab.Panel-cfg-maxTabWidth\" class=\"docClass\">maxTabWidth</a> value.</p>\n"},"minTabWidth":{"!type":"number","!doc":"<p>The minimum width for a tab in this tab Bar. Defaults to the tab Panel's <a href=\"#!/api/Ext.tab.Panel-cfg-minTabWidth\" rel=\"Ext.tab.Panel-cfg-minTabWidth\" class=\"docClass\">minTabWidth</a> value.</p>\n"},"plain":{"!type":"bool","!doc":"<p>True to not show the full background on the tabbar</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.tab.Bar-method-getEl\" rel=\"Ext.tab.Bar-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.tab.Bar-method-getEl\" rel=\"Ext.tab.Bar-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.tab.Bar-cfg-renderSelectors\" rel=\"Ext.tab.Bar-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.tab.Bar-cfg-childEls\" rel=\"Ext.tab.Bar-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"}},"Ext_tab_Panel_cfg":{"!proto":"Ext_panel_Panel_cfg","activeItem":{"!type":"string|number","!doc":"<p>Doesn't apply for <a href=\"#!/api/Ext.tab.Panel\" rel=\"Ext.tab.Panel\" class=\"docClass\">TabPanel</a>, use <a href=\"#!/api/Ext.tab.Panel-cfg-activeTab\" rel=\"Ext.tab.Panel-cfg-activeTab\" class=\"docClass\">activeTab</a> instead.</p>\n"},"activeTab":{"!type":"string|number|+Ext.Component","!doc":"<p>The tab to activate initially. Either an ID, index or the tab component itself.</p>\n"},"deferredRender":{"!type":"bool","!doc":"<p>True by default to defer the rendering of child <a href=\"#!/api/Ext.container.Container-cfg-items\" rel=\"Ext.container.Container-cfg-items\" class=\"docClass\">items</a> to the browsers DOM\nuntil a tab is activated. False will render all contained <a href=\"#!/api/Ext.container.Container-cfg-items\" rel=\"Ext.container.Container-cfg-items\" class=\"docClass\">items</a> as soon as\nthe <a href=\"#!/api/Ext.layout.container.Card\" rel=\"Ext.layout.container.Card\" class=\"docClass\">layout</a> is rendered. If there is a significant amount of content or a lot of\nheavy controls being rendered into panels that are not displayed by default, setting this to true might improve\nperformance.</p>\n\n<p>The deferredRender property is internally passed to the layout manager for TabPanels (<a href=\"#!/api/Ext.layout.container.Card\" rel=\"Ext.layout.container.Card\" class=\"docClass\">Ext.layout.container.Card</a>) as its <a href=\"#!/api/Ext.layout.container.Card-cfg-deferredRender\" rel=\"Ext.layout.container.Card-cfg-deferredRender\" class=\"docClass\">Ext.layout.container.Card.deferredRender</a> configuration value.</p>\n\n<p><strong>Note</strong>: leaving deferredRender as true means that the content within an unactivated tab will not be available</p>\n"},"itemCls":{"!type":"string","!doc":"<p>The class added to each child item of this TabPanel.</p>\n"},"layout":{"!type":"+Ext.enums.Layout|?","!doc":"<p>Optional configuration object for the internal <a href=\"#!/api/Ext.layout.container.Card\" rel=\"Ext.layout.container.Card\" class=\"docClass\">card layout</a>.\nIf present, this is passed straight through to the layout's constructor</p>\n"},"maxTabWidth":{"!type":"number","!doc":"<p>The maximum width for each tab.</p>\n"},"minTabWidth":{"!type":"number","!doc":"<p>The minimum width for a tab in the <a href=\"#!/api/Ext.tab.Panel-cfg-tabBar\" rel=\"Ext.tab.Panel-cfg-tabBar\" class=\"docClass\">tabBar</a>.</p>\n"},"plain":{"!type":"bool","!doc":"<p>True to not show the full background on the TabBar.</p>\n"},"removePanelHeader":{"!type":"bool","!doc":"<p>True to instruct each Panel added to the TabContainer to not render its header element.\nThis is to ensure that the title of the panel does not appear twice.</p>\n"},"tabBar":{"!type":"?","!doc":"<p>Optional configuration object for the internal <a href=\"#!/api/Ext.tab.Bar\" rel=\"Ext.tab.Bar\" class=\"docClass\">Ext.tab.Bar</a>.\nIf present, this is passed straight through to the TabBar's constructor</p>\n"},"tabPosition":{"!type":"string|string|string|string","!doc":"<p>The position where the tab strip should be rendered. Can be <code>top</code>, <code>bottom</code>,\n<code>left</code> or <code>right</code></p>\n"}},"Ext_tab_Tab_cfg":{"!proto":"Ext_button_Button_cfg","activeCls":{"!type":"string","!doc":"<p>The CSS class to be applied to a Tab when it is active.\nProviding your own CSS for this class enables you to customize the active state.</p>\n"},"baseCls":{"!type":"string","!doc":"<p>The base CSS class to add to all buttons.</p>\n"},"closable":{"!type":"bool","!doc":"<p>True to make the Tab start closable (the close icon will be visible).</p>\n"},"closableCls":{"!type":"string","!doc":"<p>The CSS class which is added to the tab when it is closable</p>\n"},"closeText":{"!type":"string","!doc":"<p>The accessible text label for the close button link; only used when <a href=\"#!/api/Ext.tab.Tab-cfg-closable\" rel=\"Ext.tab.Tab-cfg-closable\" class=\"docClass\">closable</a> = true.</p>\n"},"disabledCls":{"!type":"string","!doc":"<p>The CSS class to be applied to a Tab when it is disabled.</p>\n"},"scale":{"!type":"string|string|string","!doc":"<p>The size of the Button. Three values are allowed:</p>\n\n<ul>\n<li>'small' - Results in the button element being 16px high.</li>\n<li>'medium' - Results in the button element being 24px high.</li>\n<li>'large' - Results in the button element being 32px high.</li>\n</ul>\n\n"}},"Ext_tip_QuickTip_cfg":{"!proto":"Ext_tip_ToolTip_cfg","interceptTitles":{"!type":"bool","!doc":"<p><code>true</code> to automatically use the element's DOM title value if available.</p>\n"},"target":{"!type":"string|+HTMLElement|+Ext.Element","!doc":"<p>The target HTMLElement, <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a> or id to associate with this Quicktip.</p>\n\n<p>Defaults to the document.</p>\n"},"title":{"!type":"string","!doc":"<p>Force creation of header Component</p>\n"}},"Ext_tip_Tip_cfg":{"!proto":"Ext_panel_Panel_cfg","autoRender":{"!type":"bool|string|+HTMLElement|+Ext.Element","!doc":"<p>private panel overrides</p>\n"},"baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this panel's element.</p>\n"},"closable":{"!type":"bool","!doc":"<p>True to render a close tool button into the tooltip header.</p>\n"},"closeAction":{"!type":"string","!doc":"<p>The action to take when the close header tool is clicked:</p>\n\n<ul>\n<li><p><strong><a href=\"#!/api/Ext.tip.Tip-method-destroy\" rel=\"Ext.tip.Tip-method-destroy\" class=\"docClass\">destroy</a></strong> : <a href=\"#!/api/Ext.tip.Tip-method-remove\" rel=\"Ext.tip.Tip-method-remove\" class=\"docClass\">remove</a> the window from the DOM and\n<a href=\"#!/api/Ext.Component-method-destroy\" rel=\"Ext.Component-method-destroy\" class=\"docClass\">destroy</a> it and all descendant Components. The\nwindow will <strong>not</strong> be available to be redisplayed via the <a href=\"#!/api/Ext.tip.Tip-method-show\" rel=\"Ext.tip.Tip-method-show\" class=\"docClass\">show</a> method.</p></li>\n<li><p><strong><a href=\"#!/api/Ext.tip.Tip-method-hide\" rel=\"Ext.tip.Tip-method-hide\" class=\"docClass\">hide</a></strong> : <strong>Default.</strong> <a href=\"#!/api/Ext.tip.Tip-method-hide\" rel=\"Ext.tip.Tip-method-hide\" class=\"docClass\">hide</a> the window by setting visibility\nto hidden and applying negative offsets. The window will be available to be\nredisplayed via the <a href=\"#!/api/Ext.tip.Tip-method-show\" rel=\"Ext.tip.Tip-method-show\" class=\"docClass\">show</a> method.</p></li>\n</ul>\n\n\n<p><strong>Note:</strong> This behavior has changed! setting <em>does</em> affect the <a href=\"#!/api/Ext.tip.Tip-method-close\" rel=\"Ext.tip.Tip-method-close\" class=\"docClass\">close</a> method\nwhich will invoke the approriate closeAction.</p>\n"},"constrainPosition":{"!type":"bool","!doc":"<p>If <code>true</code>, then the tooltip will be automatically constrained to stay within\nthe browser viewport.</p>\n"},"defaultAlign":{"!type":"string","!doc":"<p><strong>Experimental</strong>. The default <a href=\"#!/api/Ext.util.Positionable-method-alignTo\" rel=\"Ext.util.Positionable-method-alignTo\" class=\"docClass\">Ext.util.Positionable.alignTo</a> anchor position value\nfor this tip relative to its element of origin.</p>\n"},"floating":{"!type":"bool","!doc":"<p>Specify as true to float the Component outside of the document flow using CSS absolute positioning.</p>\n\n<p>Components such as <a href=\"#!/api/Ext.window.Window\" rel=\"Ext.window.Window\" class=\"docClass\">Window</a>s and <a href=\"#!/api/Ext.menu.Menu\" rel=\"Ext.menu.Menu\" class=\"docClass\">Menu</a>s are floating by default.</p>\n\n<p>Floating Components that are programatically <a href=\"#!/api/Ext.Component-method-render\" rel=\"Ext.Component-method-render\" class=\"docClass\">rendered</a> will register\nthemselves with the global <a href=\"#!/api/Ext.WindowManager\" rel=\"Ext.WindowManager\" class=\"docClass\">ZIndexManager</a></p>\n\n<h3>Floating Components as child items of a Container</h3>\n\n<p>A floating Component may be used as a child item of a Container. This just allows the floating Component to seek\na ZIndexManager by examining the ownerCt chain.</p>\n\n<p>When configured as floating, Components acquire, at render time, a <a href=\"#!/api/Ext.ZIndexManager\" rel=\"Ext.ZIndexManager\" class=\"docClass\">ZIndexManager</a> which\nmanages a stack of related floating Components. The ZIndexManager brings a single floating Component to the top\nof its stack when the Component's <a href=\"#!/api/Ext.tip.Tip-method-toFront\" rel=\"Ext.tip.Tip-method-toFront\" class=\"docClass\">toFront</a> method is called.</p>\n\n<p>The ZIndexManager is found by traversing up the <a href=\"#!/api/Ext.tip.Tip-property-ownerCt\" rel=\"Ext.tip.Tip-property-ownerCt\" class=\"docClass\">ownerCt</a> chain to find an ancestor which itself is\nfloating. This is so that descendant floating Components of floating <em>Containers</em> (Such as a ComboBox dropdown\nwithin a Window) can have its zIndex managed relative to any siblings, but always <strong>above</strong> that floating\nancestor Container.</p>\n\n<p>If no floating ancestor is found, a floating Component registers itself with the default <a href=\"#!/api/Ext.WindowManager\" rel=\"Ext.WindowManager\" class=\"docClass\">ZIndexManager</a>.</p>\n\n<p>Floating components <em>do not participate in the Container's layout</em>. Because of this, they are not rendered until\nyou explicitly <a href=\"#!/api/Ext.tip.Tip-method-show\" rel=\"Ext.tip.Tip-method-show\" class=\"docClass\">show</a> them.</p>\n\n<p>After rendering, the ownerCt reference is deleted, and the <a href=\"#!/api/Ext.tip.Tip-property-floatParent\" rel=\"Ext.tip.Tip-property-floatParent\" class=\"docClass\">floatParent</a> property is set to the found\nfloating ancestor Container. If no floating ancestor Container was found the <a href=\"#!/api/Ext.tip.Tip-property-floatParent\" rel=\"Ext.tip.Tip-property-floatParent\" class=\"docClass\">floatParent</a> property will\nnot be set.</p>\n"},"focusOnToFront":{"!type":"bool","!doc":"<p>Specifies whether the floated component should be automatically <a href=\"#!/api/Ext.Component-method-focus\" rel=\"Ext.Component-method-focus\" class=\"docClass\">focused</a> when\nit is <a href=\"#!/api/Ext.tip.Tip-method-toFront\" rel=\"Ext.tip.Tip-method-toFront\" class=\"docClass\">brought to the front</a>.</p>\n"},"frameHeader":{"!type":"bool","!doc":"<p>True to apply a frame to the panel panels header (if 'frame' is true).</p>\n"},"hidden":{"!type":"bool","!doc":"<p><code>true</code> to hide the component.</p>\n"},"maxWidth":{"!type":"number","!doc":"<p>The maximum width of the tip in pixels.  The maximum supported value is 500.</p>\n"},"minWidth":{"!type":"number","!doc":"<p>The minimum width of the tip in pixels.</p>\n"},"shadow":{"!type":"bool|string","!doc":"<p><code>true</code> or \"sides\" for the default effect, \"frame\" for 4-way shadow, and \"drop\"\nfor bottom-right shadow.</p>\n"},"width":{"!type":"number","!doc":"<p>Width in pixels of the tip.  Width will be ignored if it\nexceeds the bounds of <a href=\"#!/api/Ext.tip.Tip-cfg-minWidth\" rel=\"Ext.tip.Tip-cfg-minWidth\" class=\"docClass\">minWidth</a> or <a href=\"#!/api/Ext.tip.Tip-cfg-maxWidth\" rel=\"Ext.tip.Tip-cfg-maxWidth\" class=\"docClass\">maxWidth</a>.</p>\n"}},"Ext_tip_ToolTip_cfg":{"!proto":"Ext_tip_Tip_cfg","anchor":{"!type":"string","!doc":"<p>If specified, indicates that the tip should be anchored to a\nparticular side of the target element or mouse pointer (\"top\", \"right\", \"bottom\",\nor \"left\"), with an arrow pointing back at the target or mouse pointer. If\n<a href=\"#!/api/Ext.tip.ToolTip-cfg-constrainPosition\" rel=\"Ext.tip.ToolTip-cfg-constrainPosition\" class=\"docClass\">constrainPosition</a> is enabled, this will be used as a preferred value\nonly and may be flipped as needed.</p>\n"},"anchorOffset":{"!type":"number","!doc":"<p>A numeric pixel value used to offset the default position of the anchor arrow.  When the anchor\nposition is on the top or bottom of the tooltip, <code>anchorOffset</code> will be used as a horizontal offset.\nLikewise, when the anchor position is on the left or right side, <code>anchorOffset</code> will be used as\na vertical offset.</p>\n"},"anchorToTarget":{"!type":"bool","!doc":"<p>True to anchor the tooltip to the target element, false to anchor it relative to the mouse coordinates.\nWhen <code>anchorToTarget</code> is true, use <code><a href=\"#!/api/Ext.tip.ToolTip-cfg-defaultAlign\" rel=\"Ext.tip.ToolTip-cfg-defaultAlign\" class=\"docClass\">defaultAlign</a></code> to control tooltip alignment to the\ntarget element.  When <code>anchorToTarget</code> is false, use <code><a href=\"#!/api/Ext.tip.ToolTip-cfg-anchor\" rel=\"Ext.tip.ToolTip-cfg-anchor\" class=\"docClass\">anchor</a></code> instead to control alignment.</p>\n"},"autoHide":{"!type":"bool","!doc":"<p>True to automatically hide the tooltip after the\nmouse exits the target element or after the <code><a href=\"#!/api/Ext.tip.ToolTip-cfg-dismissDelay\" rel=\"Ext.tip.ToolTip-cfg-dismissDelay\" class=\"docClass\">dismissDelay</a></code>\nhas expired if set.  If <code><a href=\"#!/api/Ext.tip.ToolTip-cfg-closable\" rel=\"Ext.tip.ToolTip-cfg-closable\" class=\"docClass\">closable</a> = true</code>\na close tool button will be rendered into the tooltip header.</p>\n"},"delegate":{"!type":"string","!doc":"<p>A <a href=\"#!/api/Ext.dom.Query\" rel=\"Ext.dom.Query\" class=\"docClass\">DomQuery</a> selector which allows selection of individual elements within the\n<code><a href=\"#!/api/Ext.tip.ToolTip-cfg-target\" rel=\"Ext.tip.ToolTip-cfg-target\" class=\"docClass\">target</a></code> element to trigger showing and hiding the ToolTip as the mouse moves within the\ntarget.</p>\n\n<p>When specified, the child element of the target which caused a show event is placed into the\n<code><a href=\"#!/api/Ext.tip.ToolTip-property-triggerElement\" rel=\"Ext.tip.ToolTip-property-triggerElement\" class=\"docClass\">triggerElement</a></code> property before the ToolTip is shown.</p>\n\n<p>This may be useful when a Component has regular, repeating elements in it, each of which need a\nToolTip which contains information specific to that element.</p>\n\n<p>See the delegate example in class documentation of <a href=\"#!/api/Ext.tip.ToolTip\" rel=\"Ext.tip.ToolTip\" class=\"docClass\">Ext.tip.ToolTip</a>.</p>\n"},"dismissDelay":{"!type":"number","!doc":"<p>Delay in milliseconds before the tooltip automatically hides. To disable automatic hiding, set\ndismissDelay = 0.</p>\n"},"hideDelay":{"!type":"number","!doc":"<p>Delay in milliseconds after the mouse exits the target element but before the tooltip actually hides.\nSet to 0 for the tooltip to hide immediately.</p>\n"},"mouseOffset":{"!type":"[number]","!doc":"<p>An XY offset from the mouse position where the tooltip should be shown.</p>\n"},"showDelay":{"!type":"number","!doc":"<p>Delay in milliseconds before the tooltip displays after the mouse enters the target element.</p>\n"},"target":{"!type":"+HTMLElement|+Ext.Element|string","!doc":"<p>The target element or string id to monitor for mouseover events to trigger\nshowing this ToolTip.</p>\n"},"trackMouse":{"!type":"bool","!doc":"<p>True to have the tooltip follow the mouse as it moves over the target element.</p>\n"}},"Ext_toolbar_Fill_cfg":{"!proto":"Ext_Component_cfg"},"Ext_toolbar_Item_cfg":{"!proto":"Ext_Component_cfg","overflowText":{"!type":"string","!doc":"<p>Text to be used for the menu if the item is overflowed.</p>\n"}},"Ext_toolbar_Paging_cfg":{"!proto":"Ext_toolbar_Toolbar_cfg","afterPageText":{"!type":"string","!doc":"<p>Customizable piece of the default paging text. Note that this string is formatted using\n{0} as a token that is replaced by the number of total pages. This token should be preserved when overriding this\nstring if showing the total page count is desired.</p>\n"},"beforePageText":{"!type":"string","!doc":"<p>The text displayed before the input item.</p>\n"},"displayInfo":{"!type":"bool","!doc":"<p>true to display the displayMsg</p>\n"},"displayMsg":{"!type":"string","!doc":"<p>The paging status message to display. Note that this string is\nformatted using the braced numbers {0}-{2} as tokens that are replaced by the values for start, end and total\nrespectively. These tokens should be preserved when overriding this string if showing those values is desired.</p>\n"},"emptyMsg":{"!type":"string","!doc":"<p>The message to display when no records are found.</p>\n"},"firstText":{"!type":"string","!doc":"<p>The quicktip text displayed for the first page button.\n<strong>Note</strong>: quick tips must be initialized for the quicktip to show.</p>\n"},"inputItemWidth":{"!type":"number","!doc":"<p>The width in pixels of the input field used to display and change the current page number.</p>\n"},"lastText":{"!type":"string","!doc":"<p>The quicktip text displayed for the last page button.\n<strong>Note</strong>: quick tips must be initialized for the quicktip to show.</p>\n"},"nextText":{"!type":"string","!doc":"<p>The quicktip text displayed for the next page button.\n<strong>Note</strong>: quick tips must be initialized for the quicktip to show.</p>\n"},"prependButtons":{"!type":"bool","!doc":"<p>true to insert any configured items <em>before</em> the paging buttons.</p>\n"},"prevText":{"!type":"string","!doc":"<p>The quicktip text displayed for the previous page button.\n<strong>Note</strong>: quick tips must be initialized for the quicktip to show.</p>\n"},"refreshText":{"!type":"string","!doc":"<p>The quicktip text displayed for the Refresh button.\n<strong>Note</strong>: quick tips must be initialized for the quicktip to show.</p>\n"},"store":{"!type":"+Ext.data.Store","!doc":"<p>The <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a> the paging toolbar should use as its data source.</p>\n"}},"Ext_toolbar_Separator_cfg":{"!proto":"Ext_toolbar_Item_cfg","baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this component's element. This will also be prepended to elements within this\ncomponent like Panel's body will get a class <code>x-panel-body</code>. This means that if you create a subclass of Panel, and\nyou want it to get all the Panels styling for the element and the body, you leave the <code>baseCls</code> <code>x-panel</code> and use\n<code>componentCls</code> to add specific styling for this component.</p>\n"}},"Ext_toolbar_Spacer_cfg":{"!proto":"Ext_Component_cfg","baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this component's element. This will also be prepended to elements within this\ncomponent like Panel's body will get a class <code>x-panel-body</code>. This means that if you create a subclass of Panel, and\nyou want it to get all the Panels styling for the element and the body, you leave the <code>baseCls</code> <code>x-panel</code> and use\n<code>componentCls</code> to add specific styling for this component.</p>\n"}},"Ext_toolbar_Toolbar_cfg":{"!proto":"Ext_container_Container_cfg","baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this component's element. This will also be prepended to elements within this\ncomponent like Panel's body will get a class <code>x-panel-body</code>. This means that if you create a subclass of Panel, and\nyou want it to get all the Panels styling for the element and the body, you leave the <code>baseCls</code> <code>x-panel</code> and use\n<code>componentCls</code> to add specific styling for this component.</p>\n"},"defaultButtonUI":{"!type":"string","!doc":"<p>A default <a href=\"#!/api/Ext.Component-cfg-ui\" rel=\"Ext.Component-cfg-ui\" class=\"docClass\">ui</a> to use for <a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Button</a> items</p>\n"},"defaultType":{"!type":"string","!doc":"<p>The default <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">xtype</a> of child Components to create in this Container when\na child item is specified as a raw configuration object, rather than as an instantiated Component.</p>\n"},"enableOverflow":{"!type":"bool","!doc":"<p>Configure true to make the toolbar provide a button which activates a dropdown Menu to show\nitems which overflow the Toolbar's width.</p>\n"},"layout":{"!type":"+Ext.enums.Layout|?","!doc":"<p>This class assigns a default layout (<code>layout: 'hbox'</code>).\nDevelopers <em>may</em> override this configuration option if another layout\nis required (the constructor must be passed a configuration object in this\ncase instead of an array).\nSee <a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">Ext.container.Container.layout</a> for additional information.</p>\n"},"menuTriggerCls":{"!type":"string","!doc":"<p>Configure the icon class of the overflow button.</p>\n"},"vertical":{"!type":"bool","!doc":"<p>Set to <code>true</code> to make the toolbar vertical. The layout will become a <code>vbox</code>.</p>\n"}},"Ext_tree_Column_cfg":{"!proto":"Ext_grid_column_Column_cfg","hideable":{"!type":"bool","!doc":"<p>False to prevent the user from hiding this column.</p>\n"},"lockable":{"!type":"bool","!doc":"<p>If the grid is configured with <a href=\"#!/api/Ext.panel.Table-cfg-enableLocking\" rel=\"Ext.panel.Table-cfg-enableLocking\" class=\"docClass\">enableLocking</a>, or has columns which are\nconfigured with a <a href=\"#!/api/Ext.tree.Column-cfg-locked\" rel=\"Ext.tree.Column-cfg-locked\" class=\"docClass\">locked</a> value, this option may be used to disable user-driven locking or unlocking\nof this column. This column will remain in the side into which its own <a href=\"#!/api/Ext.tree.Column-cfg-locked\" rel=\"Ext.tree.Column-cfg-locked\" class=\"docClass\">locked</a> configuration placed it.</p>\n"},"tdCls":{"!type":"string","!doc":"<p>A CSS class names to apply to the table cells for this column.</p>\n"}},"Ext_tree_Panel_cfg":{"!proto":"Ext_panel_Table_cfg","animate":{"!type":"bool","!doc":"<p>True to enable animated expand/collapse. Defaults to the value of <a href=\"#!/api/Ext-property-enableFx\" rel=\"Ext-property-enableFx\" class=\"docClass\">Ext.enableFx</a>.</p>\n"},"deferRowRender":{"!type":"bool","!doc":"<p>Defaults to true to enable deferred row rendering.</p>\n\n<p>This allows the View to execute a refresh quickly, with the expensive update of the row structure deferred so\nthat layouts with GridPanels appear, and lay out more quickly.</p>\n"},"displayField":{"!type":"string","!doc":"<p>The field inside the model that will be used as the node's text.</p>\n"},"folderSort":{"!type":"bool","!doc":"<p>True to automatically prepend a leaf sorter to the store.</p>\n"},"hideHeaders":{"!type":"bool","!doc":"<p>True to hide the headers.</p>\n"},"lines":{"!type":"bool","!doc":"<p>False to disable tree lines.</p>\n"},"root":{"!type":"+Ext.data.Model|+Ext.data.NodeInterface|?","!doc":"<p>Allows you to not specify a store on this TreePanel. This is useful for creating a simple tree with preloaded\ndata without having to specify a TreeStore and Model. A store and model will be created and root will be passed\nto that store. For example:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.tree.Panel\" rel=\"Ext.tree.Panel\" class=\"docClass\">Ext.tree.Panel</a>', {\n    title: 'Simple Tree',\n    root: {\n        text: \"Root node\",\n        expanded: true,\n        children: [\n            { text: \"Child 1\", leaf: true },\n            { text: \"Child 2\", leaf: true }\n        ]\n    },\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n"},"rootVisible":{"!type":"bool","!doc":"<p>False to hide the root node.</p>\n"},"rowLines":{"!type":"bool","!doc":"<p>False so that rows are not separated by lines.</p>\n"},"selType":{"!type":"string","!doc":"<p>An xtype of selection model to use. Defaults to 'rowmodel'. This is used to create selection model if just\na config object or nothing at all given in <a href=\"#!/api/Ext.tree.Panel-cfg-selModel\" rel=\"Ext.tree.Panel-cfg-selModel\" class=\"docClass\">selModel</a> config.</p>\n"},"singleExpand":{"!type":"bool","!doc":"<p>True if only 1 node per branch may be expanded.</p>\n"},"store":{"!type":"+Ext.data.TreeStore","!doc":"<p>The <a href=\"#!/api/Ext.data.TreeStore\" rel=\"Ext.data.TreeStore\" class=\"docClass\">Store</a> the tree should use as its data source.</p>\n"},"useArrows":{"!type":"bool","!doc":"<p>True to use Vista-style arrows in the tree.</p>\n"},"viewType":{"!type":"string","!doc":"<p>An xtype of view to use. This is automatically set to 'gridview' by <a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Grid</a>\nand to 'treeview' by <a href=\"#!/api/Ext.tree.Panel\" rel=\"Ext.tree.Panel\" class=\"docClass\">Tree</a>.</p>\n"}},"Ext_tree_View_cfg":{"!proto":"Ext_view_Table_cfg","animate":{"!type":"bool","!doc":"<p>True to enable animated expand/collapse (defaults to the value of <a href=\"#!/api/Ext-property-enableFx\" rel=\"Ext-property-enableFx\" class=\"docClass\">Ext.enableFx</a>)</p>\n"},"blockRefresh":{"!type":"bool","!doc":"<p>Set this to true to ignore refresh events on the bound store. This is useful if\nyou wish to provide custom transition animations via a plugin</p>\n"},"deferInitialRefresh":{"!type":"bool","!doc":"<p>Must be false for Tree Views because the root node must be rendered in order to be updated with its child nodes.</p>\n"},"loadMask":{"!type":"bool","!doc":"<p>False to disable a load mask from displaying while the view is loading. This can also be a\n<a href=\"#!/api/Ext.LoadMask\" rel=\"Ext.LoadMask\" class=\"docClass\">Ext.LoadMask</a> configuration object.</p>\n"},"loadingCls":{"!type":"string","!doc":"<p>The CSS class to apply to the loading message element. Defaults to Ext.LoadMask.prototype.msgCls \"x-mask-loading\".</p>\n"},"rootVisible":{"!type":"bool","!doc":"<p>False to hide the root node.</p>\n"},"stripeRows":{"!type":"bool","!doc":"<p>True to stripe the rows.</p>\n\n<p>This causes the CSS class <strong><code>x-grid-row-alt</code></strong> to be added to alternate rows of\nthe grid. A default CSS rule is provided which sets a background color, but you can override this\nwith a rule which either overrides the <strong>background-color</strong> style using the <code>!important</code>\nmodifier, or which uses a CSS selector of higher specificity.</p>\n"}},"Ext_tree_ViewDragZone_cfg":{"!proto":"Ext_view_DragZone_cfg"},"Ext_tree_ViewDropZone_cfg":{"!proto":"Ext_view_DropZone_cfg","allowContainerDrop":{"!type":"bool","!doc":"<p>True if drops on the tree container (outside of a specific tree node) are allowed.</p>\n"},"allowParentInserts":{"!type":"bool","!doc":"<p>Allow inserting a dragged node between an expanded parent node and its first child that will become a\nsibling of the parent when dropped.</p>\n"},"appendOnly":{"!type":"bool","!doc":"<p>True if the tree should only allow append drops (use for trees which are sorted).</p>\n"},"expandDelay":{"!type":"number","!doc":"<p>The delay in milliseconds to wait before expanding a target tree node while dragging a droppable node\nover the target.</p>\n"}},"Ext_tree_plugin_TreeViewDragDrop_cfg":{"!proto":"Ext_AbstractPlugin_cfg","allowContainerDrops":{"!type":"bool","!doc":"<p>True if drops on the tree container (outside of a specific tree node) are allowed.</p>\n"},"allowParentInserts":{"!type":"bool","!doc":"<p>Allow inserting a dragged node between an expanded parent node and its first child that will become a sibling of\nthe parent when dropped.</p>\n"},"appendOnly":{"!type":"bool","!doc":"<p>True if the tree should only allow append drops (use for trees which are sorted).</p>\n"},"containerScroll":{"!type":"?|bool","!doc":"<p>True to register this container with the Scrollmanager for auto scrolling during drag operations.\nA <a href=\"#!/api/Ext.dd.ScrollManager\" rel=\"Ext.dd.ScrollManager\" class=\"docClass\">Ext.dd.ScrollManager</a> configuration may also be passed.</p>\n"},"ddGroup":{"!type":"string","!doc":"<p>A named drag drop group to which this object belongs. If a group is specified, then both the DragZones and\nDropZone used by this plugin will only interact with other drag drop objects in the same group.</p>\n"},"displayField":{"!type":"string","!doc":"<p>The name of the model field that is used to display the text for the nodes</p>\n"},"dragGroup":{"!type":"string","!doc":"<p>The ddGroup to which the DragZone will belong.</p>\n\n<p>This defines which other DropZones the DragZone will interact with. Drag/DropZones only interact with other\nDrag/DropZones which are members of the same ddGroup.</p>\n"},"dragText":{"!type":"string","!doc":"<p>The text to show while dragging.</p>\n\n<p>Two placeholders can be used in the text:</p>\n\n<ul>\n<li><code>{0}</code> The number of selected items.</li>\n<li><code>{1}</code> 's' when more than 1 items (only useful for English).</li>\n</ul>\n\n"},"dropGroup":{"!type":"string","!doc":"<p>The ddGroup to which the DropZone will belong.</p>\n\n<p>This defines which other DragZones the DropZone will interact with. Drag/DropZones only interact with other\nDrag/DropZones which are members of the same ddGroup.</p>\n"},"enableDrag":{"!type":"bool","!doc":"<p>Set to <code>false</code> to disallow dragging items from the View.</p>\n"},"enableDrop":{"!type":"bool","!doc":"<p>Set to <code>false</code> to disallow the View from accepting drop gestures.</p>\n"},"expandDelay":{"!type":"number","!doc":"<p>The delay in milliseconds to wait before expanding a target tree node while dragging a droppable node over the\ntarget.</p>\n"},"nodeHighlightColor":{"!type":"string","!doc":"<p>The color to use when visually highlighting the dragged or dropped node (default value is light blue).\nThe color must be a 6 digit hex value, without a preceding '#'. See also <a href=\"#!/api/Ext.tree.plugin.TreeViewDragDrop-cfg-nodeHighlightOnDrop\" rel=\"Ext.tree.plugin.TreeViewDragDrop-cfg-nodeHighlightOnDrop\" class=\"docClass\">nodeHighlightOnDrop</a> and\n<a href=\"#!/api/Ext.tree.plugin.TreeViewDragDrop-cfg-nodeHighlightOnRepair\" rel=\"Ext.tree.plugin.TreeViewDragDrop-cfg-nodeHighlightOnRepair\" class=\"docClass\">nodeHighlightOnRepair</a>.</p>\n"},"nodeHighlightOnDrop":{"!type":"bool","!doc":"<p>Whether or not to highlight any nodes after they are\nsuccessfully dropped on their target. Defaults to the value of <code><a href=\"#!/api/Ext-property-enableFx\" rel=\"Ext-property-enableFx\" class=\"docClass\">Ext.enableFx</a></code>.\nSee also <a href=\"#!/api/Ext.tree.plugin.TreeViewDragDrop-cfg-nodeHighlightColor\" rel=\"Ext.tree.plugin.TreeViewDragDrop-cfg-nodeHighlightColor\" class=\"docClass\">nodeHighlightColor</a> and <a href=\"#!/api/Ext.tree.plugin.TreeViewDragDrop-cfg-nodeHighlightOnRepair\" rel=\"Ext.tree.plugin.TreeViewDragDrop-cfg-nodeHighlightOnRepair\" class=\"docClass\">nodeHighlightOnRepair</a>.</p>\n"},"nodeHighlightOnRepair":{"!type":"bool","!doc":"<p>Whether or not to highlight any nodes after they are\nrepaired from an unsuccessful drag/drop. Defaults to the value of <code><a href=\"#!/api/Ext-property-enableFx\" rel=\"Ext-property-enableFx\" class=\"docClass\">Ext.enableFx</a></code>.\nSee also <a href=\"#!/api/Ext.tree.plugin.TreeViewDragDrop-cfg-nodeHighlightColor\" rel=\"Ext.tree.plugin.TreeViewDragDrop-cfg-nodeHighlightColor\" class=\"docClass\">nodeHighlightColor</a> and <a href=\"#!/api/Ext.tree.plugin.TreeViewDragDrop-cfg-nodeHighlightOnDrop\" rel=\"Ext.tree.plugin.TreeViewDragDrop-cfg-nodeHighlightOnDrop\" class=\"docClass\">nodeHighlightOnDrop</a>.</p>\n"},"sortOnDrop":{"!type":"bool","!doc":"<p>Configure as <code>true</code> to sort the target node into the current tree sort order after the dropped node is added.</p>\n"}},"Ext_util_ClickRepeater_cfg":{"!proto":"Ext_util_Observable_cfg","accelerate":{"!type":"bool","!doc":"<p>True if autorepeating should start slowly and accelerate.\n\"interval\" and \"delay\" are ignored.</p>\n"},"delay":{"!type":"number","!doc":"<p>The initial delay before the repeating event begins firing.\nSimilar to an autorepeat key delay.</p>\n"},"el":{"!type":"string|+HTMLElement|+Ext.Element","!doc":"<p>The element to act as a button.</p>\n"},"interval":{"!type":"number","!doc":"<p>The interval between firings of the \"click\" event (in milliseconds).</p>\n"},"pressedCls":{"!type":"string","!doc":"<p>A CSS class name to be applied to the element while pressed.</p>\n"},"preventDefault":{"!type":"bool","!doc":"<p>True to prevent the default click event</p>\n"},"stopDefault":{"!type":"bool","!doc":"<p>True to stop the default click event</p>\n"}},"Ext_util_ComponentDragger_cfg":{"!proto":"Ext_dd_DragTracker_cfg","constrain":{"!type":"bool","!doc":"<p>Specify as <code>true</code> to constrain the Component to within the bounds of the <a href=\"#!/api/Ext.util.ComponentDragger-cfg-constrainTo\" rel=\"Ext.util.ComponentDragger-cfg-constrainTo\" class=\"docClass\">constrainTo</a> region.</p>\n"},"constrainDelegate":{"!type":"bool","!doc":"<p>Specify as <code>true</code> to constrain the drag handles within the <a href=\"#!/api/Ext.util.ComponentDragger-cfg-constrainTo\" rel=\"Ext.util.ComponentDragger-cfg-constrainTo\" class=\"docClass\">constrainTo</a> region.</p>\n"},"delegate":{"!type":"string|+Ext.Element","!doc":"<p>A <a href=\"#!/api/Ext.dom.Query\" rel=\"Ext.dom.Query\" class=\"docClass\">DomQuery</a> selector which identifies child elements within the Component's encapsulating\nElement which are the drag handles. This limits dragging to only begin when the matching elements are\nmousedowned.</p>\n\n<p>This may also be a specific child element within the Component's encapsulating element to use as the drag handle.</p>\n"}},"Ext_util_Filter_cfg":{"!proto":"Ext_Base_cfg","anyMatch":{"!type":"bool","!doc":"<p>True to allow any match - no regex start/end line anchors will be added.</p>\n"},"caseSensitive":{"!type":"bool","!doc":"<p>True to make the regex case sensitive (adds 'i' switch to regex).</p>\n"},"exactMatch":{"!type":"bool","!doc":"<p>True to force exact match (^ and $ characters added to the regex). Ignored if anyMatch is true.</p>\n"},"filterFn":{"!type":"fn()","!doc":"<p>A custom filter function which is passed each item in the <a href=\"#!/api/Ext.util.MixedCollection\" rel=\"Ext.util.MixedCollection\" class=\"docClass\">Ext.util.MixedCollection</a> in turn. Should return\n<code>true</code> to accept each item or <code>false</code> to reject it.</p>\n"},"id":{"!type":"string","!doc":"<p>An identifier by which this Filter is indexed in a <a href=\"#!/api/Ext.data.Store-property-filters\" rel=\"Ext.data.Store-property-filters\" class=\"docClass\">Store's filters collection</a></p>\n\n<p>Identified Filters may be individually removed from a Store's filter set by using <a href=\"#!/api/Ext.data.Store-method-removeFilter\" rel=\"Ext.data.Store-method-removeFilter\" class=\"docClass\">Ext.data.Store.removeFilter</a>.</p>\n\n<p>Anonymous Filters may be removed en masse by passing <code>null</code> to <a href=\"#!/api/Ext.data.Store-method-removeFilter\" rel=\"Ext.data.Store-method-removeFilter\" class=\"docClass\">Ext.data.Store.removeFilter</a>.</p>\n"},"operator":{"!type":"string","!doc":"<p>The operator to use to compare the <a href=\"#!/api/Ext.util.Filter-cfg-property\" rel=\"Ext.util.Filter-cfg-property\" class=\"docClass\">property</a> to this Filter's <a href=\"#!/api/Ext.util.Filter-cfg-value\" rel=\"Ext.util.Filter-cfg-value\" class=\"docClass\">value</a></p>\n\n<p>Possible values are:\n   * &lt;\n   * &lt;=\n   * =\n   * >=\n   * >\n   * !=</p>\n"},"property":{"!type":"string","!doc":"<p>The property to filter on. Required unless a <a href=\"#!/api/Ext.util.Filter-cfg-filterFn\" rel=\"Ext.util.Filter-cfg-filterFn\" class=\"docClass\">filterFn</a> is passed</p>\n"},"root":{"!type":"string","!doc":"<p>Optional root property. This is mostly useful when filtering a Store, in which case we set the root to 'data' to\nmake the filter pull the <a href=\"#!/api/Ext.util.Filter-cfg-property\" rel=\"Ext.util.Filter-cfg-property\" class=\"docClass\">property</a> out of the data object of each item</p>\n"},"value":{"!type":"+Mixed","!doc":"<p>The value to filter on. Required unless a <a href=\"#!/api/Ext.util.Filter-cfg-filterFn\" rel=\"Ext.util.Filter-cfg-filterFn\" class=\"docClass\">filterFn</a> is passed.</p>\n"}},"Ext_util_Grouper_cfg":{"!proto":"Ext_util_Sorter_cfg"},"Ext_util_HashMap_cfg":{"!proto":"Ext_Base_cfg","keyFn":{"!type":"fn()","!doc":"<p>A function that is used to retrieve a default key for a passed object.\nA default is provided that returns the <code>id</code> property on the object. This function is only used\nif the <code>add</code> method is called with a single argument.</p>\n"},"listeners":{"!type":"?","!doc":"<p>A config object containing one or more event handlers to be added to this object during initialization. This\nshould be a valid listeners config object as specified in the <a href=\"#!/api/Ext.util.Observable-method-addListener\" rel=\"Ext.util.Observable-method-addListener\" class=\"docClass\">addListener</a> example for attaching multiple\nhandlers at once.</p>\n\n<p><strong>DOM events from Ext JS <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Components</a></strong></p>\n\n<p>While <em>some</em> Ext JS Component classes export selected DOM events (e.g. \"click\", \"mouseover\" etc), this is usually\nonly done when extra value can be added. For example the <a href=\"#!/api/Ext.view.View\" rel=\"Ext.view.View\" class=\"docClass\">DataView</a>'s <strong><code><a href=\"#!/api/Ext.view.View-event-itemclick\" rel=\"Ext.view.View-event-itemclick\" class=\"docClass\">itemclick</a></code></strong> event passing the node clicked on. To access DOM events directly from a\nchild element of a Component, we need to specify the <code>element</code> option to identify the Component property to add a\nDOM listener to:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>({\n    width: 400,\n    height: 200,\n    dockedItems: [{\n        xtype: 'toolbar'\n    }],\n    listeners: {\n        click: {\n            element: 'el', //bind to the underlying el property on the panel\n            fn: function(){ console.log('click el'); }\n        },\n        dblclick: {\n            element: 'body', //bind to the underlying body property on the panel\n            fn: function(){ console.log('dblclick body'); }\n        }\n    }\n});\n</code></pre>\n"}},"Ext_util_KeyMap_cfg":{"!proto":"Ext_Base_cfg","binding":{"!type":"?|[[?]]","!doc":"<p>Either a single object describing a handling function for s specified key (or set of keys), or\nan array of such objects.</p>\n"},"eventName":{"!type":"string","!doc":"<p>The event to listen for to pick up key events.</p>\n"},"ignoreInputFields":{"!type":"bool","!doc":"<p>Configure this as <code>true</code> if there are any input fields within the <a href=\"#!/api/Ext.util.KeyMap-cfg-target\" rel=\"Ext.util.KeyMap-cfg-target\" class=\"docClass\">target</a>, and this KeyNav\nshould not process events from input fields, (<code>&amp;lt;input&gt;, &amp;lt;textarea&gt; and elements with</code>contentEditable=\"true\"`)</p>\n"},"processEvent":{"!type":"fn()","!doc":"<p>An optional event processor function which accepts the argument list provided by the\n<a href=\"#!/api/Ext.util.KeyMap-cfg-eventName\" rel=\"Ext.util.KeyMap-cfg-eventName\" class=\"docClass\">configured event</a> of the <a href=\"#!/api/Ext.util.KeyMap-cfg-target\" rel=\"Ext.util.KeyMap-cfg-target\" class=\"docClass\">target</a>, and returns a keyEvent for processing by the KeyMap.</p>\n\n<p>This may be useful when the <a href=\"#!/api/Ext.util.KeyMap-cfg-target\" rel=\"Ext.util.KeyMap-cfg-target\" class=\"docClass\">target</a> is a Component with s complex event signature, where the event is not\nthe first parameter. Extra information from the event arguments may be injected into the event for use by the handler\nfunctions before returning it.</p>\n"},"processEventScope":{"!type":"?","!doc":"<p>The scope (<code>this</code> context) in which the <a href=\"#!/api/Ext.util.KeyMap-cfg-processEvent\" rel=\"Ext.util.KeyMap-cfg-processEvent\" class=\"docClass\">processEvent</a> method is executed.</p>\n"},"target":{"!type":"+Ext.Component|+Ext.Element|+HTMLElement|string","!doc":"<p>The object on which to listen for the event specified by the <a href=\"#!/api/Ext.util.KeyMap-cfg-eventName\" rel=\"Ext.util.KeyMap-cfg-eventName\" class=\"docClass\">eventName</a> config option.</p>\n"}},"Ext_util_KeyNav_cfg":{"!proto":"Ext_Base_cfg","defaultEventAction":{"!type":"string","!doc":"<p>The method to call on the <a href=\"#!/api/Ext.EventObject\" rel=\"Ext.EventObject\" class=\"docClass\">Ext.EventObject</a> after this KeyNav intercepts a key. Valid values are <a href=\"#!/api/Ext.EventObject-method-stopEvent\" rel=\"Ext.EventObject-method-stopEvent\" class=\"docClass\">Ext.EventObject.stopEvent</a>, <a href=\"#!/api/Ext.EventObject-method-preventDefault\" rel=\"Ext.EventObject-method-preventDefault\" class=\"docClass\">Ext.EventObject.preventDefault</a> and <a href=\"#!/api/Ext.EventObject-method-stopPropagation\" rel=\"Ext.EventObject-method-stopPropagation\" class=\"docClass\">Ext.EventObject.stopPropagation</a>.</p>\n\n<p>If a falsy value is specified, no method is called on the key event.</p>\n"},"disabled":{"!type":"bool","!doc":"<p>True to disable this KeyNav instance.</p>\n"},"eventName":{"!type":"string","!doc":"<p>The event to listen for to pick up key events.</p>\n"},"forceKeyDown":{"!type":"bool","!doc":"<p>Handle the keydown event instead of keypress. KeyNav automatically does this for IE since IE does not propagate\nspecial keys on keypress, but setting this to true will force other browsers to also handle keydown instead of\nkeypress.</p>\n"},"ignoreInputFields":{"!type":"bool","!doc":"<p>Configure this as <code>true</code> if there are any input fields within the <a href=\"#!/api/Ext.util.KeyNav-cfg-target\" rel=\"Ext.util.KeyNav-cfg-target\" class=\"docClass\">target</a>, and this KeyNav\nshould not process events from input fields, (<code>&amp;lt;input&gt;, &amp;lt;textarea&gt; and elements with</code>contentEditable=\"true\"`)</p>\n"},"keyMap":{"!type":"+Ext.util.KeyMap","!doc":"<p>An optional pre-existing <a href=\"#!/api/Ext.util.KeyMap\" rel=\"Ext.util.KeyMap\" class=\"docClass\">KeyMap</a> to use to listen for key events. If not specified,\none is created.</p>\n"},"processEvent":{"!type":"fn()","!doc":"<p>An optional event processor function which accepts the argument list provided by the <a href=\"#!/api/Ext.util.KeyNav-cfg-eventName\" rel=\"Ext.util.KeyNav-cfg-eventName\" class=\"docClass\">configured\nevent</a> of the <a href=\"#!/api/Ext.util.KeyNav-cfg-target\" rel=\"Ext.util.KeyNav-cfg-target\" class=\"docClass\">target</a>, and returns a keyEvent for processing by the KeyMap.</p>\n\n<p>This may be useful when the <a href=\"#!/api/Ext.util.KeyNav-cfg-target\" rel=\"Ext.util.KeyNav-cfg-target\" class=\"docClass\">target</a> is a Component with s complex event signature. Extra information from\nthe event arguments may be injected into the event for use by the handler functions before returning it.</p>\n"},"processEventScope":{"!type":"?","!doc":"<p>The scope (<code>this</code> context) in which the <a href=\"#!/api/Ext.util.KeyNav-cfg-processEvent\" rel=\"Ext.util.KeyNav-cfg-processEvent\" class=\"docClass\">processEvent</a> method is executed.</p>\n"},"target":{"!type":"+Ext.Component|+Ext.Element|+HTMLElement|string","!doc":"<p>The object on which to listen for the event specified by the <a href=\"#!/api/Ext.util.KeyNav-cfg-eventName\" rel=\"Ext.util.KeyNav-cfg-eventName\" class=\"docClass\">eventName</a> config option.</p>\n"}},"Ext_util_LruCache_cfg":{"!proto":"Ext_util_HashMap_cfg","maxSize":{"!type":"number","!doc":"<p>The maximum size the cache is allowed to grow to before further additions cause\nremoval of the least recently used entry.</p>\n"}},"Ext_util_MixedCollection_cfg":{"!proto":"Ext_util_AbstractMixedCollection_cfg","allowFunctions":{"!type":"bool","!doc":"<p>Configure as <code>true</code> if the <a href=\"#!/api/Ext.util.MixedCollection-method-addAll\" rel=\"Ext.util.MixedCollection-method-addAll\" class=\"docClass\">addAll</a> function should add function references to the collection.</p>\n"},"defaultSortDirection":{"!type":"string","!doc":"<p>The default sort direction to use if one is not specified.</p>\n"},"sortRoot":{"!type":"string","!doc":"<p>The property in each item that contains the data to sort.</p>\n"},"sorters":{"!type":"[+Ext.util.Sorter]|[?]","!doc":"<p>The initial set of <a href=\"#!/api/Ext.util.Sorter\" rel=\"Ext.util.Sorter\" class=\"docClass\">Sorters</a></p>\n"}},"Ext_util_Sorter_cfg":{"!proto":"Ext_Base_cfg","direction":{"!type":"string","!doc":"<p>The direction to sort by.</p>\n"},"property":{"!type":"string","!doc":"<p>The property to sort by. Required unless <a href=\"#!/api/Ext.util.Sorter-cfg-sorterFn\" rel=\"Ext.util.Sorter-cfg-sorterFn\" class=\"docClass\">sorterFn</a> is provided. The property is extracted from the object\ndirectly and compared for sorting using the built in comparison operators.</p>\n"},"root":{"!type":"string","!doc":"<p>Optional root property. This is mostly useful when sorting a Store, in which case we set the root to 'data' to\nmake the filter pull the <a href=\"#!/api/Ext.util.Sorter-cfg-property\" rel=\"Ext.util.Sorter-cfg-property\" class=\"docClass\">property</a> out of the data object of each item</p>\n"},"sorterFn":{"!type":"fn()","!doc":"<p>A specific sorter function to execute. Can be passed instead of <a href=\"#!/api/Ext.util.Sorter-cfg-property\" rel=\"Ext.util.Sorter-cfg-property\" class=\"docClass\">property</a>. This sorter function allows\nfor any kind of custom/complex comparisons. The sorterFn receives two arguments, the objects being compared. The\nfunction should return:</p>\n\n<ul>\n<li>-1 if o1 is \"less than\" o2</li>\n<li>0 if o1 is \"equal\" to o2</li>\n<li>1 if o1 is \"greater than\" o2</li>\n</ul>\n\n"},"transform":{"!type":"fn()","!doc":"<p>A function that will be run on each value before it is compared in the sorter. The function will receive a single\nargument, the value.</p>\n"}},"Ext_view_AbstractView_cfg":{"!proto":"Ext_Component_cfg","blockRefresh":{"!type":"bool","!doc":"<p>Set this to true to ignore refresh events on the bound store. This is useful if\nyou wish to provide custom transition animations via a plugin</p>\n"},"deferEmptyText":{"!type":"bool","!doc":"<p>True to defer emptyText being applied until the store's first load.</p>\n"},"deferInitialRefresh":{"!type":"bool","!doc":"<p>Defaults to <code>true</code> to defer the initial refresh of the view.</p>\n\n\n<p>This allows the View to execute its render and initial layout more quickly because the process will not be encumbered\nby the expensive update of the view structure.</p>\n\n\n<p><b>Important: </b>Be aware that this will mean that the View's item elements will not be available immediately upon render, so\n<i>selection</i> may not take place at render time. To access a View's item elements as soon as possible, use the <a href=\"#!/api/Ext.view.AbstractView-event-viewready\" rel=\"Ext.view.AbstractView-event-viewready\" class=\"docClass\">viewready</a> event.\nOr set <code>deferInitialrefresh</code> to false, but this will be at the cost of slower rendering.</p>\n\n"},"disableSelection":{"!type":"bool","!doc":"<p>True to disable selection within the DataView. This configuration will lock the selection model\nthat the DataView uses.</p>\n"},"emptyText":{"!type":"string","!doc":"<p>The text to display in the view when there is no data to display.\nNote that when using local data the emptyText will not be displayed unless you set\nthe <a href=\"#!/api/Ext.view.AbstractView-cfg-deferEmptyText\" rel=\"Ext.view.AbstractView-cfg-deferEmptyText\" class=\"docClass\">deferEmptyText</a> option to false.</p>\n"},"itemCls":{"!type":"string","!doc":"<p>Specifies the class to be assigned to each element in the view when used in conjunction with the\n<a href=\"#!/api/Ext.view.AbstractView-cfg-itemTpl\" rel=\"Ext.view.AbstractView-cfg-itemTpl\" class=\"docClass\">itemTpl</a> configuration.</p>\n"},"itemSelector":{"!type":"string","!doc":"<p><b>This is a required setting</b>. A simple CSS selector (e.g. <tt>div.some-class</tt> or\n<tt>span:first-child</tt>) that will be used to determine what nodes this DataView will be\nworking with. The itemSelector is used to map DOM nodes to records. As such, there should\nonly be one root level element that matches the selector for each record.</p>\n"},"itemTpl":{"!type":"string|[string]|+Ext.XTemplate","!doc":"<p>The inner portion of the item template to be rendered. Follows an XTemplate\nstructure and will be placed inside of a tpl.</p>\n"},"loadMask":{"!type":"bool|?","!doc":"<p>False to disable a load mask from displaying while the view is loading. This can also be a\n<a href=\"#!/api/Ext.LoadMask\" rel=\"Ext.LoadMask\" class=\"docClass\">Ext.LoadMask</a> configuration object.</p>\n"},"loadingCls":{"!type":"string","!doc":"<p>The CSS class to apply to the loading message element. Defaults to Ext.LoadMask.prototype.msgCls \"x-mask-loading\".</p>\n"},"loadingHeight":{"!type":"number","!doc":"<p>If specified, gives an explicit height for the data view when it is showing the <a href=\"#!/api/Ext.view.AbstractView-cfg-loadingText\" rel=\"Ext.view.AbstractView-cfg-loadingText\" class=\"docClass\">loadingText</a>,\nif that is specified. This is useful to prevent the view's height from collapsing to zero when the\nloading mask is applied and there are no other contents in the data view.</p>\n"},"loadingText":{"!type":"string","!doc":"<p>A string to display during data load operations.  If specified, this text will be\ndisplayed in a loading div and the view's contents will be cleared while loading, otherwise the view's\ncontents will continue to display normally until the new data is loaded and the contents are replaced.</p>\n"},"loadingUseMsg":{"!type":"bool","!doc":"<p>Whether or not to use the loading message.</p>\n"},"multiSelect":{"!type":"bool","!doc":"<p>True to allow selection of more than one item at a time, false to allow selection of only a single item\nat a time or no selection at all, depending on the value of <a href=\"#!/api/Ext.view.AbstractView-cfg-singleSelect\" rel=\"Ext.view.AbstractView-cfg-singleSelect\" class=\"docClass\">singleSelect</a>.</p>\n"},"overItemCls":{"!type":"string","!doc":"<p>A CSS class to apply to each item in the view on mouseover.\nSetting this will automatically set <a href=\"#!/api/Ext.view.AbstractView-cfg-trackOver\" rel=\"Ext.view.AbstractView-cfg-trackOver\" class=\"docClass\">trackOver</a> to <code>true</code>.</p>\n"},"preserveScrollOnRefresh":{"!type":"bool","!doc":"<p>True to preserve scroll position across refresh operations.</p>\n"},"selectedItemCls":{"!type":"string","!doc":"<p>A CSS class to apply to each selected item in the view.</p>\n"},"simpleSelect":{"!type":"bool","!doc":"<p>True to enable multiselection by clicking on multiple items without requiring the user to hold Shift or Ctrl,\nfalse to force the user to hold Ctrl or Shift to select more than on item.</p>\n"},"singleSelect":{"!type":"bool","!doc":"<p>Allows selection of exactly one item at a time. As this is the default selection mode anyway, this config\nis completely ignored.</p>\n"},"store":{"!type":"+Ext.data.Store","!doc":"<p>The <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a> to bind this DataView to.</p>\n"},"tpl":{"!type":"string|[string]|+Ext.XTemplate","!doc":"<p>The HTML fragment or an array of fragments that will make up the template used by this DataView.  This should\nbe specified in the same format expected by the constructor of <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">Ext.XTemplate</a>.</p>\n"},"trackOver":{"!type":"bool","!doc":"<p>When <code>true</code> the <a href=\"#!/api/Ext.view.AbstractView-cfg-overItemCls\" rel=\"Ext.view.AbstractView-cfg-overItemCls\" class=\"docClass\">overItemCls</a> will be applied to rows when hovered over.\nThis in return will also cause <a href=\"#!/api/Ext.view.View-event-highlightitem\" rel=\"Ext.view.View-event-highlightitem\" class=\"docClass\">highlightitem</a> and\n<a href=\"#!/api/Ext.view.View-event-unhighlightitem\" rel=\"Ext.view.View-event-unhighlightitem\" class=\"docClass\">unhighlightitem</a> events to be fired.</p>\n\n<p>Enabled automatically when the <a href=\"#!/api/Ext.view.AbstractView-cfg-overItemCls\" rel=\"Ext.view.AbstractView-cfg-overItemCls\" class=\"docClass\">overItemCls</a> config is set.</p>\n"}},"Ext_view_BoundList_cfg":{"!proto":"Ext_view_View_cfg","baseCls":{"!type":"string","!doc":"<p>private overrides</p>\n"},"componentLayout":{"!type":"string|?","!doc":"<p>The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout\nmanager which sizes a Component's internal structure in response to the Component being sized.</p>\n\n<p>Generally, developers will not use this configuration as all provided Components which need their internal\nelements sizing (Such as <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">input fields</a>) come with their own componentLayout managers.</p>\n\n<p>The <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used on instances of the base <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\nclass which simply sizes the Component's encapsulating element to the height and width specified in the\n<a href=\"#!/api/Ext.view.BoundList-method-setSize\" rel=\"Ext.view.BoundList-method-setSize\" class=\"docClass\">setSize</a> method.</p>\n"},"deferInitialRefresh":{"!type":"bool","!doc":"<p>This Component is used as a popup, not part of a complex layout. Display data immediately.</p>\n"},"displayField":{"!type":"string","!doc":"<p>The field from the store to show in the view.</p>\n"},"itemCls":{"!type":"string","!doc":"<p>Specifies the class to be assigned to each element in the view when used in conjunction with the\n<a href=\"#!/api/Ext.view.BoundList-cfg-itemTpl\" rel=\"Ext.view.BoundList-cfg-itemTpl\" class=\"docClass\">itemTpl</a> configuration.</p>\n"},"pageSize":{"!type":"number","!doc":"<p>If greater than <code>0</code>, a <a href=\"#!/api/Ext.toolbar.Paging\" rel=\"Ext.toolbar.Paging\" class=\"docClass\">Ext.toolbar.Paging</a> is displayed at the bottom of the list and store\nqueries will execute with page <a href=\"#!/api/Ext.data.Operation-cfg-start\" rel=\"Ext.data.Operation-cfg-start\" class=\"docClass\">start</a> and\n<a href=\"#!/api/Ext.data.Operation-cfg-limit\" rel=\"Ext.data.Operation-cfg-limit\" class=\"docClass\">limit</a> parameters.</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.view.BoundList-method-getEl\" rel=\"Ext.view.BoundList-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.view.BoundList-method-getEl\" rel=\"Ext.view.BoundList-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.view.BoundList-cfg-renderSelectors\" rel=\"Ext.view.BoundList-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.view.BoundList-cfg-childEls\" rel=\"Ext.view.BoundList-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"},"shadow":{"!type":"string|bool","!doc":"<p>Specifies whether the floating component should be given a shadow. Set to true to automatically create an\n<a href=\"#!/api/Ext.Shadow\" rel=\"Ext.Shadow\" class=\"docClass\">Ext.Shadow</a>, or a string indicating the shadow's display <a href=\"#!/api/Ext.Shadow-cfg-mode\" rel=\"Ext.Shadow-cfg-mode\" class=\"docClass\">Ext.Shadow.mode</a>. Set to false to\ndisable the shadow.</p>\n"},"tpl":{"!type":"string|+Ext.XTemplate","!doc":"<p>A String or <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">Ext.XTemplate</a> instance to apply to inner template.</p>\n\n<p><a href=\"#!/api/Ext.view.BoundList\" rel=\"Ext.view.BoundList\" class=\"docClass\">Ext.view.BoundList</a> is used for the dropdown list of <a href=\"#!/api/Ext.form.field.ComboBox\" rel=\"Ext.form.field.ComboBox\" class=\"docClass\">Ext.form.field.ComboBox</a>.\nTo customize the template you can do this:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.field.ComboBox\" rel=\"Ext.form.field.ComboBox\" class=\"docClass\">Ext.form.field.ComboBox</a>', {\n    fieldLabel   : 'State',\n    queryMode    : 'local',\n    displayField : 'text',\n    valueField   : 'abbr',\n    store        : <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('StateStore', {\n        fields : ['abbr', 'text'],\n        data   : [\n            {\"abbr\":\"AL\", \"name\":\"Alabama\"},\n            {\"abbr\":\"AK\", \"name\":\"Alaska\"},\n            {\"abbr\":\"AZ\", \"name\":\"Arizona\"}\n            //...\n        ]\n    }),\n    listConfig : {\n        tpl : '&lt;tpl for=\".\"&gt;&lt;div class=\"x-boundlist-item\"&gt;{abbr}&lt;/div&gt;&lt;/tpl&gt;'\n    }\n});\n</code></pre>\n\n<p>Defaults to:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">Ext.XTemplate</a>',\n    '&lt;ul&gt;&lt;tpl for=\".\"&gt;',\n        '&lt;li role=\"option\" class=\"' + itemCls + '\"&gt;' + me.getInnerTpl(me.displayField) + '&lt;/li&gt;',\n    '&lt;/tpl&gt;&lt;/ul&gt;'\n);\n</code></pre>\n"},"trackOver":{"!type":"bool","!doc":"<p>When <code>true</code> the <a href=\"#!/api/Ext.view.BoundList-cfg-overItemCls\" rel=\"Ext.view.BoundList-cfg-overItemCls\" class=\"docClass\">overItemCls</a> will be applied to rows when hovered over.\nThis in return will also cause <a href=\"#!/api/Ext.view.View-event-highlightitem\" rel=\"Ext.view.View-event-highlightitem\" class=\"docClass\">highlightitem</a> and\n<a href=\"#!/api/Ext.view.View-event-unhighlightitem\" rel=\"Ext.view.View-event-unhighlightitem\" class=\"docClass\">unhighlightitem</a> events to be fired.</p>\n\n<p>Enabled automatically when the <a href=\"#!/api/Ext.view.BoundList-cfg-overItemCls\" rel=\"Ext.view.BoundList-cfg-overItemCls\" class=\"docClass\">overItemCls</a> config is set.</p>\n"}},"Ext_view_BoundListKeyNav_cfg":{"!proto":"Ext_util_KeyNav_cfg","boundList":{"!type":"+Ext.view.BoundList","!doc":"<p>The <a href=\"#!/api/Ext.view.BoundList\" rel=\"Ext.view.BoundList\" class=\"docClass\">Ext.view.BoundList</a> instance for which key navigation will be managed.</p>\n"}},"Ext_view_DragZone_cfg":{"!proto":"Ext_dd_DragZone_cfg","containerScroll":{"!type":"?|bool","!doc":"<p>True to register this container with the Scrollmanager for auto scrolling during drag operations.\nA <a href=\"#!/api/Ext.dd.ScrollManager\" rel=\"Ext.dd.ScrollManager\" class=\"docClass\">Ext.dd.ScrollManager</a> configuration may also be passed.</p>\n"}},"Ext_view_DropZone_cfg":{"!proto":"Ext_dd_DropZone_cfg"},"Ext_view_Table_cfg":{"!proto":"Ext_view_View_cfg","baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this component's element. This will also be prepended to elements within this\ncomponent like Panel's body will get a class <code>x-panel-body</code>. This means that if you create a subclass of Panel, and\nyou want it to get all the Panels styling for the element and the body, you leave the <code>baseCls</code> <code>x-panel</code> and use\n<code>componentCls</code> to add specific styling for this component.</p>\n"},"componentLayout":{"!type":"string|?","!doc":"<p>The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout\nmanager which sizes a Component's internal structure in response to the Component being sized.</p>\n\n<p>Generally, developers will not use this configuration as all provided Components which need their internal\nelements sizing (Such as <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">input fields</a>) come with their own componentLayout managers.</p>\n\n<p>The <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used on instances of the base <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\nclass which simply sizes the Component's encapsulating element to the height and width specified in the\n<a href=\"#!/api/Ext.view.Table-method-setSize\" rel=\"Ext.view.Table-method-setSize\" class=\"docClass\">setSize</a> method.</p>\n"},"enableTextSelection":{"!type":"bool","!doc":"<p>True to enable text selections.</p>\n"},"firstCls":{"!type":"string","!doc":"<p>A CSS class to add to the <em>first</em> cell in every row to enable special styling for the first column.\nIf no styling is needed on the first column, this may be configured as <code>null</code>.</p>\n"},"itemSelector":{"!type":"string","!doc":"<p>view item (may be a wrapper)</p>\n"},"lastCls":{"!type":"string","!doc":"<p>A CSS class to add to the <em>last</em> cell in every row to enable special styling for the last column.\nIf no styling is needed on the last column, this may be configured as <code>null</code>.</p>\n"},"markDirty":{"!type":"bool","!doc":"<p>True to show the dirty cell indicator when a cell has been modified.</p>\n"},"overItemCls":{"!type":"string","!doc":"<p>A CSS class to apply to each item in the view on mouseover.\nSetting this will automatically set <a href=\"#!/api/Ext.view.Table-cfg-trackOver\" rel=\"Ext.view.Table-cfg-trackOver\" class=\"docClass\">trackOver</a> to <code>true</code>.</p>\n"},"selectedItemCls":{"!type":"string","!doc":"<p>A CSS class to apply to each selected item in the view.</p>\n"},"stripeRows":{"!type":"bool","!doc":"<p>True to stripe the rows.</p>\n\n<p>This causes the CSS class <strong><code>x-grid-row-alt</code></strong> to be added to alternate rows of\nthe grid. A default CSS rule is provided which sets a background color, but you can override this\nwith a rule which either overrides the <strong>background-color</strong> style using the <code>!important</code>\nmodifier, or which uses a CSS selector of higher specificity.</p>\n"},"trackOver":{"!type":"bool","!doc":"<p>cfg docs inherited</p>\n"}},"Ext_view_TableLayout_cfg":{"!proto":"Ext_layout_component_Auto_cfg"},"Ext_view_View_cfg":{"!proto":"Ext_view_AbstractView_cfg","mouseOverOutBuffer":{"!type":"number","!doc":"<p>The number of milliseconds to buffer mouseover and mouseout event handling on view items.</p>\n\n<p>Configure this as <code>false</code> to process mouseover and mouseout events immediately.</p>\n"}},"Ext_window_Window_cfg":{"!proto":"Ext_panel_Panel_cfg","animateTarget":{"!type":"string|+Ext.Element","!doc":"<p>Id or element from which the window should animate while opening.</p>\n"},"autoRender":{"!type":"bool","!doc":"<p>Windows render to the body on first show.</p>\n"},"baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this panel's element.</p>\n"},"closable":{"!type":"bool","!doc":"<p>True to display the 'close' tool button and allow the user to close the window, false to hide the button and\ndisallow closing the window.</p>\n\n<p>By default, when close is requested by either clicking the close button in the header or pressing ESC when the\nWindow has focus, the <a href=\"#!/api/Ext.window.Window-method-close\" rel=\"Ext.window.Window-method-close\" class=\"docClass\">close</a> method will be called. This will <em><a href=\"#!/api/Ext.Component-method-destroy\" rel=\"Ext.Component-method-destroy\" class=\"docClass\">destroy</a></em> the\nWindow and its content meaning that it may not be reused.</p>\n\n<p>To make closing a Window <em>hide</em> the Window so that it may be reused, set <a href=\"#!/api/Ext.window.Window-cfg-closeAction\" rel=\"Ext.window.Window-cfg-closeAction\" class=\"docClass\">closeAction</a> to 'hide'.</p>\n"},"collapsed":{"!type":"bool","!doc":"<p>True to render the window collapsed, false to render it expanded. Note that if <a href=\"#!/api/Ext.window.Window-cfg-expandOnShow\" rel=\"Ext.window.Window-cfg-expandOnShow\" class=\"docClass\">expandOnShow</a>\nis true (the default) it will override the <code>collapsed</code> config and the window will always be\nexpanded when shown.</p>\n"},"collapsible":{"!type":"bool","!doc":"<p>inherited docs, same default</p>\n"},"constrain":{"!type":"bool","!doc":"<p>True to constrain the window within its containing element, false to allow it to fall outside of its containing\nelement. By default the window will be rendered to <code>document.body</code>. To render and constrain the window within\nanother element specify <a href=\"#!/api/Ext.window.Window-cfg-renderTo\" rel=\"Ext.window.Window-cfg-renderTo\" class=\"docClass\">renderTo</a>. Optionally the header only can be constrained\nusing <a href=\"#!/api/Ext.window.Window-cfg-constrainHeader\" rel=\"Ext.window.Window-cfg-constrainHeader\" class=\"docClass\">constrainHeader</a>.</p>\n"},"constrainHeader":{"!type":"bool","!doc":"<p>True to constrain the window header within its containing element (allowing the window body to fall outside of\nits containing element) or false to allow the header to fall outside its containing element.\nOptionally the entire window can be constrained using <a href=\"#!/api/Ext.window.Window-cfg-constrain\" rel=\"Ext.window.Window-cfg-constrain\" class=\"docClass\">constrain</a>.</p>\n"},"defaultFocus":{"!type":"string|number|+Ext.Component","!doc":"<p>Specifies a Component to receive focus when this Window is focused.</p>\n\n<p>This may be one of:</p>\n\n<ul>\n<li>The index of a footer Button.</li>\n<li>The id or <a href=\"#!/api/Ext.AbstractComponent-cfg-itemId\" rel=\"Ext.AbstractComponent-cfg-itemId\" class=\"docClass\">Ext.AbstractComponent.itemId</a> of a descendant Component.</li>\n<li>A Component.</li>\n</ul>\n\n"},"draggable":{"!type":"bool","!doc":"<p>True to allow the window to be dragged by the header bar, false to disable dragging. Note that\nby default the window will be centered in the viewport, so if dragging is disabled the window may need to be\npositioned programmatically after render (e.g., <code>myWindow.setPosition(100, 100);</code>).</p>\n"},"expandOnShow":{"!type":"bool","!doc":"<p>True to always expand the window when it is displayed, false to keep it in its current state (which may be\n<a href=\"#!/api/Ext.window.Window-cfg-collapsed\" rel=\"Ext.window.Window-cfg-collapsed\" class=\"docClass\">collapsed</a>) when displayed.</p>\n"},"ghost":{"!type":"bool|fn()","!doc":"<p>Set to false to disable the ghost panel during dragging the window.\nDo note that you should not set this to true, by default it is a function.</p>\n"},"hidden":{"!type":"bool","!doc":"<p>Render this Window hidden. If <code>true</code>, the <a href=\"#!/api/Ext.window.Window-method-hide\" rel=\"Ext.window.Window-method-hide\" class=\"docClass\">hide</a> method will be called internally.</p>\n"},"hideMode":{"!type":"string","!doc":"<p>Windows hide using offsets in order to preserve the scroll positions of their descendants.</p>\n"},"hideShadowOnDeactivate":{"!type":"bool","!doc":"<p>True to hide this Window's shadow when another floating item in the same z-index stack is activated.</p>\n"},"maximizable":{"!type":"bool","!doc":"<p>True to display the 'maximize' tool button and allow the user to maximize the window, false to hide the button\nand disallow maximizing the window. Note that when a window is maximized, the tool button\nwill automatically change to a 'restore' button with the appropriate behavior already built-in that will restore\nthe window to its previous size.</p>\n"},"maximized":{"!type":"bool","!doc":"<p>True to initially display the window in a maximized state.</p>\n"},"minHeight":{"!type":"number","!doc":"<p>inherit docs</p>\n"},"minWidth":{"!type":"number","!doc":"<p>inherit docs</p>\n"},"minimizable":{"!type":"bool","!doc":"<p>True to display the 'minimize' tool button and allow the user to minimize the window, false to hide the button\nand disallow minimizing the window. Note that this button provides no implementation -- the\nbehavior of minimizing a window is implementation-specific, so the minimize event must be handled and a custom\nminimize behavior implemented for this option to be useful.</p>\n"},"modal":{"!type":"bool","!doc":"<p>True to make the window modal and mask everything behind it when displayed, false to display it without\nrestricting access to other UI elements.</p>\n"},"onEsc":{"!type":"fn()","!doc":"<p>Allows override of the built-in processing for the escape key. Default action is to close the Window (performing\nwhatever action is specified in <a href=\"#!/api/Ext.window.Window-cfg-closeAction\" rel=\"Ext.window.Window-cfg-closeAction\" class=\"docClass\">closeAction</a>. To prevent the Window closing when the escape key is\npressed, specify this as <a href=\"#!/api/Ext-property-emptyFn\" rel=\"Ext-property-emptyFn\" class=\"docClass\">Ext.emptyFn</a>.</p>\n"},"overlapHeader":{"!type":"bool","!doc":"<p>True to overlap the header in a panel over the framing of the panel itself. This is needed when frame:true (and\nis done automatically for you). Otherwise it is undefined. If you manually add rounded corners to a panel header\nwhich does not have frame:true, this will need to be set to true.</p>\n"},"plain":{"!type":"bool","!doc":"<p>True to render the window body with a transparent background so that it will blend into the framing elements,\nfalse to add a lighter background color to visually highlight the body element and separate it more distinctly\nfrom the surrounding frame.</p>\n"},"resizable":{"!type":"bool|?","!doc":"<p>Specify as <code>true</code> to allow user resizing at each edge and corner of the window, false to disable resizing.</p>\n\n<p>This may also be specified as a config object to <a href=\"#!/api/Ext.resizer.Resizer\" rel=\"Ext.resizer.Resizer\" class=\"docClass\">Ext.resizer.Resizer</a></p>\n"},"x":{"!type":"number","!doc":"<p>The X position of the left edge of the window on initial showing. Defaults to centering the Window within the\nwidth of the Window's container <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Element</a> (The Element that the Window is rendered to).</p>\n"},"y":{"!type":"number","!doc":"<p>The Y position of the top edge of the window on initial showing. Defaults to centering the Window within the\nheight of the Window's container <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Element</a> (The Element that the Window is rendered to).</p>\n"}}},"!data":{"aliases":{"widget":{"component":"Ext.Component","box":"Ext.Component","editor":"Ext.Editor","image":"Ext.Img","imagecomponent":"Ext.Img","loadmask":"Ext.LoadMask","progressbar":"Ext.ProgressBar","button":"Ext.button.Button","cycle":"Ext.button.Cycle","splitbutton":"Ext.button.Split","chart":"Ext.chart.Chart","buttongroup":"Ext.container.ButtonGroup","container":"Ext.container.Container","viewport":"Ext.container.Viewport","jsonpstore":"Ext.data.JsonPStore","draw":"Ext.draw.Component","text":"Ext.draw.Text","flash":"Ext.flash.Component","checkboxgroup":"Ext.form.CheckboxGroup","fieldcontainer":"Ext.form.FieldContainer","fieldset":"Ext.form.FieldSet","label":"Ext.form.Label","form":"Ext.form.Panel","radiogroup":"Ext.form.RadioGroup","field":"Ext.form.field.Base","checkboxfield":"Ext.form.field.Checkbox","checkbox":"Ext.form.field.Checkbox","combobox":"Ext.form.field.ComboBox","combo":"Ext.form.field.ComboBox","datefield":"Ext.form.field.Date","displayfield":"Ext.form.field.Display","filefield":"Ext.form.field.File","fileuploadfield":"Ext.form.field.File","filebutton":"Ext.form.field.FileButton","hiddenfield":"Ext.form.field.Hidden","hidden":"Ext.form.field.Hidden","htmleditor":"Ext.form.field.HtmlEditor","numberfield":"Ext.form.field.Number","pickerfield":"Ext.form.field.Picker","radiofield":"Ext.form.field.Radio","radio":"Ext.form.field.Radio","spinnerfield":"Ext.form.field.Spinner","textfield":"Ext.form.field.Text","textareafield":"Ext.form.field.TextArea","textarea":"Ext.form.field.TextArea","timefield":"Ext.form.field.Time","triggerfield":"Ext.form.field.Trigger","trigger":"Ext.form.field.Trigger","gridpanel":"Ext.grid.Panel","grid":"Ext.grid.Panel","roweditor":"Ext.grid.RowEditor","roweditorbuttons":"Ext.grid.RowEditorButtons","gridview":"Ext.grid.View","actioncolumn":"Ext.grid.column.Action","booleancolumn":"Ext.grid.column.Boolean","checkcolumn":"Ext.grid.column.CheckColumn","gridcolumn":"Ext.grid.column.Column","datecolumn":"Ext.grid.column.Date","numbercolumn":"Ext.grid.column.Number","rownumberer":"Ext.grid.column.RowNumberer","templatecolumn":"Ext.grid.column.Template","headercontainer":"Ext.grid.header.Container","propertygrid":"Ext.grid.property.Grid","menucheckitem":"Ext.menu.CheckItem","colormenu":"Ext.menu.ColorPicker","datemenu":"Ext.menu.DatePicker","menuitem":"Ext.menu.Item","menu":"Ext.menu.Menu","menuseparator":"Ext.menu.Separator","header":"Ext.panel.Header","panel":"Ext.panel.Panel","tablepanel":"Ext.panel.Table","tool":"Ext.panel.Tool","colorpicker":"Ext.picker.Color","datepicker":"Ext.picker.Date","monthpicker":"Ext.picker.Month","timepicker":"Ext.picker.Time","bordersplitter":"Ext.resizer.BorderSplitter","splitter":"Ext.resizer.Splitter","multislider":"Ext.slider.Multi","slider":"Ext.slider.Single","sliderfield":"Ext.slider.Single","slidertip":"Ext.slider.Tip","tabbar":"Ext.tab.Bar","tabpanel":"Ext.tab.Panel","tab":"Ext.tab.Tab","quicktip":"Ext.tip.QuickTip","tip":"Ext.tip.Tip","tooltip":"Ext.tip.ToolTip","tbfill":"Ext.toolbar.Fill","tbitem":"Ext.toolbar.Item","pagingtoolbar":"Ext.toolbar.Paging","tbseparator":"Ext.toolbar.Separator","tbspacer":"Ext.toolbar.Spacer","tbtext":"Ext.toolbar.TextItem","toolbar":"Ext.toolbar.Toolbar","treecolumn":"Ext.tree.Column","treepanel":"Ext.tree.Panel","treeview":"Ext.tree.View","boundlist":"Ext.view.BoundList","tableview":"Ext.view.Table","dataview":"Ext.view.View","messagebox":"Ext.window.MessageBox","window":"Ext.window.Window"},"axis":{"category":"Ext.chart.axis.Category","gauge":"Ext.chart.axis.Gauge","numeric":"Ext.chart.axis.Numeric","radial":"Ext.chart.axis.Radial","time":"Ext.chart.axis.Time"},"series":{"area":"Ext.chart.series.Area","bar":"Ext.chart.series.Bar","column":"Ext.chart.series.Column","gauge":"Ext.chart.series.Gauge","line":"Ext.chart.series.Line","pie":"Ext.chart.series.Pie","radar":"Ext.chart.series.Radar","scatter":"Ext.chart.series.Scatter"},"store":{"array":"Ext.data.ArrayStore","buffer":"Ext.data.BufferStore","direct":"Ext.data.DirectStore","json":"Ext.data.JsonStore","node":"Ext.data.NodeStore","store":"Ext.data.Store","tree":"Ext.data.TreeStore","xml":"Ext.data.XmlStore"},"data":{"field":"Ext.data.Field","tree":"Ext.data.Tree"},"idgen":{"sequential":"Ext.data.SequentialIdGenerator"},"association":{"belongsto":"Ext.data.association.BelongsTo","hasmany":"Ext.data.association.HasMany","hasone":"Ext.data.association.HasOne"},"proxy":{"ajax":"Ext.data.proxy.Ajax","direct":"Ext.data.proxy.Direct","jsonp":"Ext.data.proxy.JsonP","scripttag":"Ext.data.proxy.JsonP","localstorage":"Ext.data.proxy.LocalStorage","memory":"Ext.data.proxy.Memory","proxy":"Ext.data.proxy.Proxy","rest":"Ext.data.proxy.Rest","server":"Ext.data.proxy.Server","sessionstorage":"Ext.data.proxy.SessionStorage"},"reader":{"array":"Ext.data.reader.Array","json":"Ext.data.reader.Json","xml":"Ext.data.reader.Xml"},"writer":{"json":"Ext.data.writer.Json","base":"Ext.data.writer.Writer","xml":"Ext.data.writer.Xml"},"direct":{"event":"Ext.direct.Event","exception":"Ext.direct.ExceptionEvent","rpc":"Ext.direct.RemotingEvent","transaction":"Ext.direct.Transaction"},"formaction":{"directload":"Ext.form.action.DirectLoad","directsubmit":"Ext.form.action.DirectSubmit","load":"Ext.form.action.Load","standardsubmit":"Ext.form.action.StandardSubmit","submit":"Ext.form.action.Submit"},"layout":{"columncomponent":"Ext.grid.ColumnComponentLayout","gridcolumn":"Ext.grid.ColumnLayout","autocomponent":"Ext.layout.component.Auto","body":"Ext.layout.component.Body","boundlist":"Ext.layout.component.BoundList","button":"Ext.layout.component.Button","dock":"Ext.layout.component.Dock","draw":"Ext.layout.component.Draw","fieldset":"Ext.layout.component.FieldSet","progressbar":"Ext.layout.component.ProgressBar","combobox":"Ext.layout.component.field.ComboBox","field":"Ext.layout.component.field.Field","fieldcontainer":"Ext.layout.component.field.FieldContainer","htmleditor":"Ext.layout.component.field.HtmlEditor","sliderfield":"Ext.layout.component.field.Slider","textfield":"Ext.layout.component.field.Text","textareafield":"Ext.layout.component.field.TextArea","triggerfield":"Ext.layout.component.field.Trigger","absolute":"Ext.layout.container.Absolute","accordion":"Ext.layout.container.Accordion","anchor":"Ext.layout.container.Anchor","auto":"Ext.layout.container.Auto","autocontainer":"Ext.layout.container.Auto","border":"Ext.layout.container.Border","box":"Ext.layout.container.Box","card":"Ext.layout.container.Card","checkboxgroup":"Ext.layout.container.CheckboxGroup","column":"Ext.layout.container.Column","container":"Ext.layout.container.Container","editor":"Ext.layout.container.Editor","fit":"Ext.layout.container.Fit","form":"Ext.layout.container.Form","hbox":"Ext.layout.container.HBox","table":"Ext.layout.container.Table","vbox":"Ext.layout.container.VBox","tableview":"Ext.view.TableLayout"},"feature":{"abstractsummary":"Ext.grid.feature.AbstractSummary","feature":"Ext.grid.feature.Feature","grouping":"Ext.grid.feature.Grouping","groupingsummary":"Ext.grid.feature.GroupingSummary","rowbody":"Ext.grid.feature.RowBody","rowwrap":"Ext.grid.feature.RowWrap","summary":"Ext.grid.feature.Summary"},"plugin":{"bufferedrenderer":"Ext.grid.plugin.BufferedRenderer","cellediting":"Ext.grid.plugin.CellEditing","gridviewdragdrop":"Ext.grid.plugin.DragDrop","gridheaderreorderer":"Ext.grid.plugin.HeaderReorderer","gridheaderresizer":"Ext.grid.plugin.HeaderResizer","rowediting":"Ext.grid.plugin.RowEditing","rowexpander":"Ext.grid.plugin.RowExpander","treeviewdragdrop":"Ext.tree.plugin.TreeViewDragDrop"},"editing":{"editing":"Ext.grid.plugin.Editing"},"selection":{"cellmodel":"Ext.selection.CellModel","checkboxmodel":"Ext.selection.CheckboxModel","rowmodel":"Ext.selection.RowModel","treemodel":"Ext.selection.TreeModel"},"state":{"localstorage":"Ext.state.LocalStorageProvider"}}},"Ext":{"AbstractComponent":{"!doc":"<p>An abstract base class which provides shared methods for Components across the Sencha product line.</p>\n\n<p>Please refer to sub class's documentation.</p>\n\n<p><strong>From override Ext.rtl.AbstractComponent:</strong> This override adds RTL support and the <code>rtl</code> config option to AbstactComponent.</p>\n","!type":"fn(config?: Ext_AbstractComponent_cfg)","prototype":{"!proto":"Ext.Base.prototype","autoEl":{"!type":"string|?","!doc":"<p>A tag name or <a href=\"#!/api/Ext.DomHelper\" rel=\"Ext.DomHelper\" class=\"docClass\">DomHelper</a> spec used to create the <a href=\"#!/api/Ext.AbstractComponent-method-getEl\" rel=\"Ext.AbstractComponent-method-getEl\" class=\"docClass\">Element</a> which will\nencapsulate this Component.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong>'div'</strong>. The more complex Sencha classes use a more\ncomplex DOM structure specified by their own <a href=\"#!/api/Ext.AbstractComponent-cfg-renderTpl\" rel=\"Ext.AbstractComponent-cfg-renderTpl\" class=\"docClass\">renderTpl</a>s.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components encapsulated by\ndifferent DOM elements. Example usage:</p>\n\n<pre><code>{\n    xtype: 'component',\n    autoEl: {\n        tag: 'img',\n        src: 'http://www.example.com/example.jpg'\n    }\n}, {\n    xtype: 'component',\n    autoEl: {\n        tag: 'blockquote',\n        html: 'autoEl is cool!'\n    }\n}, {\n    xtype: 'container',\n    autoEl: 'ul',\n    cls: 'ux-unordered-list',\n    items: {\n        xtype: 'component',\n        autoEl: 'li',\n        html: 'First list item'\n    }\n}\n</code></pre>\n"},"autoLoad":{"!type":"+Ext.ComponentLoader|?|string|bool","!doc":"<p>An alias for <a href=\"#!/api/Ext.AbstractComponent-cfg-loader\" rel=\"Ext.AbstractComponent-cfg-loader\" class=\"docClass\">loader</a> config which also allows to specify just a string which will be\nused as the url that's automatically loaded:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>', {\n    autoLoad: 'content.html',\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n\n<p>The above is the same as:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>', {\n    loader: {\n        url: 'content.html',\n        autoLoad: true\n    },\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n\n<p>Don't use it together with <a href=\"#!/api/Ext.AbstractComponent-cfg-loader\" rel=\"Ext.AbstractComponent-cfg-loader\" class=\"docClass\">loader</a> config.</p>\n"},"autoRender":{"!type":"bool|string|+HTMLElement|+Ext.Element","!doc":"<p>This config is intended mainly for non-<a href=\"#!/api/Ext.AbstractComponent-cfg-floating\" rel=\"Ext.AbstractComponent-cfg-floating\" class=\"docClass\">floating</a> Components which may or may not be shown. Instead of using\n<a href=\"#!/api/Ext.AbstractComponent-cfg-renderTo\" rel=\"Ext.AbstractComponent-cfg-renderTo\" class=\"docClass\">renderTo</a> in the configuration, and rendering upon construction, this allows a Component to render itself\nupon first <em><a href=\"#!/api/Ext.Component-method-show\" rel=\"Ext.Component-method-show\" class=\"docClass\">show</a></em>. If <a href=\"#!/api/Ext.AbstractComponent-cfg-floating\" rel=\"Ext.AbstractComponent-cfg-floating\" class=\"docClass\">floating</a> is <code>true</code>, the value of this config is omitted as if it is <code>true</code>.</p>\n\n<p>Specify as <code>true</code> to have this Component render to the document body upon first show.</p>\n\n<p>Specify as an element, or the ID of an element to have this Component render to a specific element upon first\nshow.</p>\n"},"autoShow":{"!type":"bool","!doc":"<p><code>true</code> to automatically show the component upon creation. This config option may only be used for\n<a href=\"#!/api/Ext.AbstractComponent-cfg-floating\" rel=\"Ext.AbstractComponent-cfg-floating\" class=\"docClass\">floating</a> components or components that use <a href=\"#!/api/Ext.AbstractComponent-cfg-autoRender\" rel=\"Ext.AbstractComponent-cfg-autoRender\" class=\"docClass\">autoRender</a>.</p>\n"},"baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this component's element. This will also be prepended to elements within this\ncomponent like Panel's body will get a class <code>x-panel-body</code>. This means that if you create a subclass of Panel, and\nyou want it to get all the Panels styling for the element and the body, you leave the <code>baseCls</code> <code>x-panel</code> and use\n<code>componentCls</code> to add specific styling for this component.</p>\n"},"border":{"!type":"number|string|bool","!doc":"<p>Specifies the border size for this component. The border can be a single numeric value to apply to all sides or it can\nbe a CSS style specification for each style, for example: '10 5 3 10' (top, right, bottom, left).</p>\n\n<p>For components that have no border by default, setting this won't make the border appear by itself.\nYou also need to specify border color and style:</p>\n\n<pre><code>border: 5,\nstyle: {\n    borderColor: 'red',\n    borderStyle: 'solid'\n}\n</code></pre>\n\n<p>To turn off the border, use <code>border: false</code>.</p>\n"},"childEls":{"!type":"[?]","!doc":"<p>An array describing the child elements of the Component. Each member of the array\nis an object with these properties:</p>\n\n<ul>\n<li><code>name</code> - The property name on the Component for the child element.</li>\n<li><code>itemId</code> - The id to combine with the Component's id that is the id of the child element.</li>\n<li><code>id</code> - The id of the child element.</li>\n</ul>\n\n\n<p>If the array member is a string, it is equivalent to <code>{ name: m, itemId: m }</code>.</p>\n\n<p>For example, a Component which renders a title and body text:</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>', {\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    renderTpl: [\n        '&lt;h1 id=\"{id}-title\"&gt;{title}&lt;/h1&gt;',\n        '&lt;p&gt;{msg}&lt;/p&gt;',\n    ],\n    renderData: {\n        title: \"Error\",\n        msg: \"Something went wrong\"\n    },\n    childEls: [\"title\"],\n    listeners: {\n        afterrender: function(cmp){\n            // After rendering the component will have a title property\n            cmp.title.setStyle({color: \"red\"});\n        }\n    }\n});\n</code></pre>\n\n<p>A more flexible, but somewhat slower, approach is <a href=\"#!/api/Ext.AbstractComponent-cfg-renderSelectors\" rel=\"Ext.AbstractComponent-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a>.</p>\n"},"cls":{"!type":"string","!doc":"<p>An optional extra CSS class that will be added to this component's Element. This can be useful\nfor adding customized styles to the component or any of its children using standard CSS rules.</p>\n"},"componentCls":{"!type":"string","!doc":"<p>CSS Class to be added to a components root level element to give distinction to it via styling.</p>\n"},"componentLayout":{"!type":"string|?","!doc":"<p>The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout\nmanager which sizes a Component's internal structure in response to the Component being sized.</p>\n\n<p>Generally, developers will not use this configuration as all provided Components which need their internal\nelements sizing (Such as <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">input fields</a>) come with their own componentLayout managers.</p>\n\n<p>The <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used on instances of the base <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\nclass which simply sizes the Component's encapsulating element to the height and width specified in the\n<a href=\"#!/api/Ext.AbstractComponent-method-setSize\" rel=\"Ext.AbstractComponent-method-setSize\" class=\"docClass\">setSize</a> method.</p>\n"},"contentEl":{"!type":"string","!doc":"<p>Specify an existing HTML element, or the <code>id</code> of an existing HTML element to use as the content for this component.</p>\n\n<p>This config option is used to take an existing HTML element and place it in the layout element of a new component\n(it simply moves the specified DOM element <em>after the Component is rendered</em> to use as the content.</p>\n\n<p><strong>Notes:</strong></p>\n\n<p>The specified HTML element is appended to the layout element of the component <em>after any configured\n<a href=\"#!/api/Ext.AbstractComponent-cfg-html\" rel=\"Ext.AbstractComponent-cfg-html\" class=\"docClass\">HTML</a> has been inserted</em>, and so the document will not contain this element at the time\nthe <a href=\"#!/api/Ext.AbstractComponent-event-render\" rel=\"Ext.AbstractComponent-event-render\" class=\"docClass\">render</a> event is fired.</p>\n\n<p>The specified HTML element used will not participate in any <strong><code><a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">layout</a></code></strong>\nscheme that the Component may use. It is just HTML. Layouts operate on child\n<strong><code><a href=\"#!/api/Ext.container.Container-cfg-items\" rel=\"Ext.container.Container-cfg-items\" class=\"docClass\">items</a></code></strong>.</p>\n\n<p>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\nis rendered to the panel.</p>\n"},"data":{"!type":"?","!doc":"<p>The initial set of data to apply to the <code><a href=\"#!/api/Ext.AbstractComponent-cfg-tpl\" rel=\"Ext.AbstractComponent-cfg-tpl\" class=\"docClass\">tpl</a></code> to update the content area of the Component.</p>\n"},"disabled":{"!type":"bool","!doc":"<p><code>true</code> to disable the component.</p>\n"},"disabledCls":{"!type":"string","!doc":"<p>CSS class to add when the Component is disabled.</p>\n"},"draggable":{"!type":"bool","!doc":"<p>Indicates whether or not the component can be dragged.</p>\n"},"floating":{"!type":"bool","!doc":"<p>Create the Component as a floating and use absolute positioning.</p>\n\n<p>The z-index of floating Components is handled by a ZIndexManager. If you simply render a floating Component into the DOM, it will be managed\nby the global <a href=\"#!/api/Ext.WindowManager\" rel=\"Ext.WindowManager\" class=\"docClass\">WindowManager</a>.</p>\n\n<p>If you include a floating Component as a child item of a Container, then upon render, Ext JS will seek an ancestor floating Component to house a new\nZIndexManager instance to manage its descendant floaters. If no floating ancestor can be found, the global WindowManager will be used.</p>\n\n<p>When a floating Component which has a ZindexManager managing descendant floaters is destroyed, those descendant floaters will also be destroyed.</p>\n"},"frame":{"!type":"bool","!doc":"<p>Specify as <code>true</code> to have the Component inject framing elements within the Component at render time to provide a\ngraphical rounded frame around the Component content.</p>\n\n<p>This is only necessary when running on outdated, or non standard-compliant browsers such as Microsoft's Internet\nExplorer prior to version 9 which do not support rounded corners natively.</p>\n\n<p>The extra space taken up by this framing is available from the read only property <a href=\"#!/api/Ext.AbstractComponent-property-frameSize\" rel=\"Ext.AbstractComponent-property-frameSize\" class=\"docClass\">frameSize</a>.</p>\n"},"height":{"!type":"number","!doc":"<p>The height of this component in pixels.</p>\n"},"hidden":{"!type":"bool","!doc":"<p><code>true</code> to hide the component.</p>\n"},"hideMode":{"!type":"string","!doc":"<p>A String which specifies how this Component's encapsulating DOM element will be hidden. Values may be:</p>\n\n<ul>\n<li><code>'display'</code> : The Component will be hidden using the <code>display: none</code> style.</li>\n<li><code>'visibility'</code> : The Component will be hidden using the <code>visibility: hidden</code> style.</li>\n<li><code>'offsets'</code> : The Component will be hidden by absolutely positioning it out of the visible area of the document.\nThis is useful when a hidden Component must maintain measurable dimensions. Hiding using <code>display</code> results in a\nComponent having zero dimensions.</li>\n</ul>\n\n"},"html":{"!type":"string|?","!doc":"<p>An HTML fragment, or a <a href=\"#!/api/Ext.DomHelper\" rel=\"Ext.DomHelper\" class=\"docClass\">DomHelper</a> specification to use as the layout element content.\nThe HTML content is added after the component is rendered, so the document will not contain this HTML at the time\nthe <a href=\"#!/api/Ext.AbstractComponent-event-render\" rel=\"Ext.AbstractComponent-event-render\" class=\"docClass\">render</a> event is fired. This content is inserted into the body <em>before</em> any configured <a href=\"#!/api/Ext.AbstractComponent-cfg-contentEl\" rel=\"Ext.AbstractComponent-cfg-contentEl\" class=\"docClass\">contentEl</a>\nis appended.</p>\n"},"id":{"!type":"string","!doc":"<p>The <strong>unique id of this component instance.</strong></p>\n\n<p>It should not be necessary to use this configuration except for singleton objects in your application. Components\ncreated with an <code>id</code> may be accessed globally using <a href=\"#!/api/Ext-method-getCmp\" rel=\"Ext-method-getCmp\" class=\"docClass\">Ext.getCmp</a>.</p>\n\n<p>Instead of using assigned ids, use the <a href=\"#!/api/Ext.AbstractComponent-cfg-itemId\" rel=\"Ext.AbstractComponent-cfg-itemId\" class=\"docClass\">itemId</a> config, and <a href=\"#!/api/Ext.ComponentQuery\" rel=\"Ext.ComponentQuery\" class=\"docClass\">ComponentQuery</a>\nwhich provides selector-based searching for Sencha Components analogous to DOM querying. The <a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Container</a> class contains <a href=\"#!/api/Ext.container.Container-method-down\" rel=\"Ext.container.Container-method-down\" class=\"docClass\">shortcut methods</a> to query\nits descendant Components by selector.</p>\n\n<p>Note that this <code>id</code> will also be used as the element id for the containing HTML element that is rendered to the\npage for this component. This allows you to write id-based CSS rules to style the specific instance of this\ncomponent uniquely, and also to select sub-elements using this component's <code>id</code> as the parent.</p>\n\n<p><strong>Note:</strong> To avoid complications imposed by a unique <code>id</code> also see <code><a href=\"#!/api/Ext.AbstractComponent-cfg-itemId\" rel=\"Ext.AbstractComponent-cfg-itemId\" class=\"docClass\">itemId</a></code>.</p>\n\n<p><strong>Note:</strong> To access the container of a Component see <code><a href=\"#!/api/Ext.AbstractComponent-property-ownerCt\" rel=\"Ext.AbstractComponent-property-ownerCt\" class=\"docClass\">ownerCt</a></code>.</p>\n\n<p>Defaults to an <a href=\"#!/api/Ext.AbstractComponent-method-getId\" rel=\"Ext.AbstractComponent-method-getId\" class=\"docClass\">auto-assigned id</a>.</p>\n"},"itemId":{"!type":"string","!doc":"<p>An <code>itemId</code> can be used as an alternative way to get a reference to a component when no object reference is\navailable. Instead of using an <code><a href=\"#!/api/Ext.AbstractComponent-cfg-id\" rel=\"Ext.AbstractComponent-cfg-id\" class=\"docClass\">id</a></code> with <a href=\"#!/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a>.<a href=\"#!/api/Ext-method-getCmp\" rel=\"Ext-method-getCmp\" class=\"docClass\">getCmp</a>, use <code>itemId</code> with\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>.<a href=\"#!/api/Ext.container.Container-method-getComponent\" rel=\"Ext.container.Container-method-getComponent\" class=\"docClass\">getComponent</a> which will retrieve\n<code>itemId</code>'s or <a href=\"#!/api/Ext.AbstractComponent-cfg-id\" rel=\"Ext.AbstractComponent-cfg-id\" class=\"docClass\">id</a>'s. Since <code>itemId</code>'s are an index to the container's internal MixedCollection, the\n<code>itemId</code> is scoped locally to the container -- avoiding potential conflicts with <a href=\"#!/api/Ext.ComponentManager\" rel=\"Ext.ComponentManager\" class=\"docClass\">Ext.ComponentManager</a>\nwhich requires a <strong>unique</strong> <code><a href=\"#!/api/Ext.AbstractComponent-cfg-id\" rel=\"Ext.AbstractComponent-cfg-id\" class=\"docClass\">id</a></code>.</p>\n\n<pre><code>var c = new <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>({ //\n    <a href=\"#!/api/Ext.Component-cfg-height\" rel=\"Ext.Component-cfg-height\" class=\"docClass\">height</a>: 300,\n    <a href=\"#!/api/Ext.AbstractComponent-cfg-renderTo\" rel=\"Ext.AbstractComponent-cfg-renderTo\" class=\"docClass\">renderTo</a>: document.body,\n    <a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">layout</a>: 'auto',\n    <a href=\"#!/api/Ext.container.Container-cfg-items\" rel=\"Ext.container.Container-cfg-items\" class=\"docClass\">items</a>: [\n        {\n            itemId: 'p1',\n            <a href=\"#!/api/Ext.panel.Panel-cfg-title\" rel=\"Ext.panel.Panel-cfg-title\" class=\"docClass\">title</a>: 'Panel 1',\n            <a href=\"#!/api/Ext.Component-cfg-height\" rel=\"Ext.Component-cfg-height\" class=\"docClass\">height</a>: 150\n        },\n        {\n            itemId: 'p2',\n            <a href=\"#!/api/Ext.panel.Panel-cfg-title\" rel=\"Ext.panel.Panel-cfg-title\" class=\"docClass\">title</a>: 'Panel 2',\n            <a href=\"#!/api/Ext.Component-cfg-height\" rel=\"Ext.Component-cfg-height\" class=\"docClass\">height</a>: 150\n        }\n    ]\n})\np1 = c.<a href=\"#!/api/Ext.container.Container-method-getComponent\" rel=\"Ext.container.Container-method-getComponent\" class=\"docClass\">getComponent</a>('p1'); // not the same as <a href=\"#!/api/Ext-method-getCmp\" rel=\"Ext-method-getCmp\" class=\"docClass\">Ext.getCmp()</a>\np2 = p1.<a href=\"#!/api/Ext.AbstractComponent-property-ownerCt\" rel=\"Ext.AbstractComponent-property-ownerCt\" class=\"docClass\">ownerCt</a>.<a href=\"#!/api/Ext.container.Container-method-getComponent\" rel=\"Ext.container.Container-method-getComponent\" class=\"docClass\">getComponent</a>('p2'); // reference via a sibling\n</code></pre>\n\n<p>Also see <a href=\"#!/api/Ext.AbstractComponent-cfg-id\" rel=\"Ext.AbstractComponent-cfg-id\" class=\"docClass\">id</a>, <code><a href=\"#!/api/Ext.container.Container-method-query\" rel=\"Ext.container.Container-method-query\" class=\"docClass\">Ext.container.Container.query</a></code>, <code><a href=\"#!/api/Ext.container.Container-method-down\" rel=\"Ext.container.Container-method-down\" class=\"docClass\">Ext.container.Container.down</a></code> and\n<code><a href=\"#!/api/Ext.container.Container-method-child\" rel=\"Ext.container.Container-method-child\" class=\"docClass\">Ext.container.Container.child</a></code>.</p>\n\n<p><strong>Note</strong>: to access the container of an item see <a href=\"#!/api/Ext.AbstractComponent-property-ownerCt\" rel=\"Ext.AbstractComponent-property-ownerCt\" class=\"docClass\">ownerCt</a>.</p>\n"},"loader":{"!type":"+Ext.ComponentLoader|?","!doc":"<p>A configuration object or an instance of a <a href=\"#!/api/Ext.ComponentLoader\" rel=\"Ext.ComponentLoader\" class=\"docClass\">Ext.ComponentLoader</a> to load remote content\nfor this Component.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>', {\n    loader: {\n        url: 'content.html',\n        autoLoad: true\n    },\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n"},"margin":{"!type":"number|string","!doc":"<p>Specifies the margin for this component. The margin can be a single numeric value to apply to all sides or it can\nbe a CSS style specification for each style, for example: '10 5 3 10' (top, right, bottom, left).</p>\n"},"maxHeight":{"!type":"number","!doc":"<p>The maximum value in pixels which this Component will set its height to.</p>\n\n<p><strong>Warning:</strong> This will override any size management applied by layout managers.</p>\n"},"maxWidth":{"!type":"number","!doc":"<p>The maximum value in pixels which this Component will set its width to.</p>\n\n<p><strong>Warning:</strong> This will override any size management applied by layout managers.</p>\n"},"minHeight":{"!type":"number","!doc":"<p>The minimum value in pixels which this Component will set its height to.</p>\n\n<p><strong>Warning:</strong> This will override any size management applied by layout managers.</p>\n"},"minWidth":{"!type":"number","!doc":"<p>The minimum value in pixels which this Component will set its width to.</p>\n\n<p><strong>Warning:</strong> This will override any size management applied by layout managers.</p>\n"},"overCls":{"!type":"string","!doc":"<p>An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element,\nand removed when the mouse moves out. This can be useful for adding customized 'active' or 'hover' styles to the\ncomponent or any of its children using standard CSS rules.</p>\n"},"padding":{"!type":"number|string","!doc":"<p>Specifies the padding for this component. The padding can be a single numeric value to apply to all sides or it\ncan be a CSS style specification for each style, for example: '10 5 3 10' (top, right, bottom, left).</p>\n"},"plugins":{"!type":"[+Ext.AbstractPlugin]|+Ext.AbstractPlugin|[?]|?|[+Ext.enums.Plugin]|+Ext.enums.Plugin","!doc":"<p>An array of plugins to be added to this component. Can also be just a single plugin instead of array.</p>\n\n<p>Plugins provide custom functionality for a component. The only requirement for\na valid plugin is that it contain an <code>init</code> method that accepts a reference of type <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>. When a component\nis created, if any plugins are available, the component will call the init method on each plugin, passing a\nreference to itself. Each plugin can then call methods or respond to events on the component as needed to provide\nits functionality.</p>\n\n<p>Plugins can be added to component by either directly referencing the plugin instance:</p>\n\n<pre><code>plugins: [<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.plugin.CellEditing\" rel=\"Ext.grid.plugin.CellEditing\" class=\"docClass\">Ext.grid.plugin.CellEditing</a>', {clicksToEdit: 1})],\n</code></pre>\n\n<p>By using config object with ptype:</p>\n\n<pre><code>plugins: [{ptype: 'cellediting', clicksToEdit: 1}],\n</code></pre>\n\n<p>Or with just a ptype:</p>\n\n<pre><code>plugins: ['cellediting', 'gridviewdragdrop'],\n</code></pre>\n\n<p>See <a href=\"#!/api/Ext.enums.Plugin\" rel=\"Ext.enums.Plugin\" class=\"docClass\">Ext.enums.Plugin</a> for list of all ptypes.</p>\n"},"renderData":{"!type":"?","!doc":"<p>The data used by <a href=\"#!/api/Ext.AbstractComponent-cfg-renderTpl\" rel=\"Ext.AbstractComponent-cfg-renderTpl\" class=\"docClass\">renderTpl</a> in addition to the following property values of the component:</p>\n\n<ul>\n<li>id</li>\n<li>ui</li>\n<li>uiCls</li>\n<li>baseCls</li>\n<li>componentCls</li>\n<li>frame</li>\n</ul>\n\n\n<p>See <a href=\"#!/api/Ext.AbstractComponent-cfg-renderSelectors\" rel=\"Ext.AbstractComponent-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.AbstractComponent-cfg-childEls\" rel=\"Ext.AbstractComponent-cfg-childEls\" class=\"docClass\">childEls</a> for usage examples.</p>\n"},"renderSelectors":{"!type":"?","!doc":"<p>An object containing properties specifying <a href=\"#!/api/Ext.dom.Query\" rel=\"Ext.dom.Query\" class=\"docClass\">DomQuery</a> selectors which identify child elements\ncreated by the render process.</p>\n\n<p>After the Component's internal structure is rendered according to the <a href=\"#!/api/Ext.AbstractComponent-cfg-renderTpl\" rel=\"Ext.AbstractComponent-cfg-renderTpl\" class=\"docClass\">renderTpl</a>, this object is iterated through,\nand the found Elements are added as properties to the Component using the <code>renderSelector</code> property name.</p>\n\n<p>For example, a Component which renders a title and description into its element:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>', {\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    renderTpl: [\n        '&lt;h1 class=\"title\"&gt;{title}&lt;/h1&gt;',\n        '&lt;p&gt;{desc}&lt;/p&gt;'\n    ],\n    renderData: {\n        title: \"Error\",\n        desc: \"Something went wrong\"\n    },\n    renderSelectors: {\n        titleEl: 'h1.title',\n        descEl: 'p'\n    },\n    listeners: {\n        afterrender: function(cmp){\n            // After rendering the component will have a titleEl and descEl properties\n            cmp.titleEl.setStyle({color: \"red\"});\n        }\n    }\n});\n</code></pre>\n\n<p>For a faster, but less flexible, alternative that achieves the same end result (properties for child elements on the\nComponent after render), see <a href=\"#!/api/Ext.AbstractComponent-cfg-childEls\" rel=\"Ext.AbstractComponent-cfg-childEls\" class=\"docClass\">childEls</a> and <a href=\"#!/api/Ext.AbstractComponent-method-addChildEls\" rel=\"Ext.AbstractComponent-method-addChildEls\" class=\"docClass\">addChildEls</a>.</p>\n"},"renderTo":{"!type":"string|+HTMLElement|+Ext.Element","!doc":"<p>Specify the <code>id</code> of the element, a DOM element or an existing Element that this component will be rendered into.</p>\n\n<p><strong>Notes:</strong></p>\n\n<p>Do <em>not</em> use this option if the Component is to be a child item of a <a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Container</a>.\nIt is the responsibility of the <a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Container</a>'s\n<a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">layout manager</a> to render and manage its child items.</p>\n\n<p>When using this config, a call to <code>render()</code> is not required.</p>\n\n<p>See also: <a href=\"#!/api/Ext.AbstractComponent-method-render\" rel=\"Ext.AbstractComponent-method-render\" class=\"docClass\">render</a>.</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.AbstractComponent-method-getEl\" rel=\"Ext.AbstractComponent-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.AbstractComponent-method-getEl\" rel=\"Ext.AbstractComponent-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.AbstractComponent-cfg-renderSelectors\" rel=\"Ext.AbstractComponent-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.AbstractComponent-cfg-childEls\" rel=\"Ext.AbstractComponent-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"},"rtl":{"!type":"bool","!doc":"<p>True to layout this component and its descendants in \"rtl\" (right-to-left) mode.\nCan be explicitly set to false to override a true value inherited from an ancestor.</p>\n\n<p><strong>Defined in override Ext.rtl.AbstractComponent.</strong></p>\n"},"shrinkWrap":{"!type":"bool|number","!doc":"<p>If this property is a number, it is interpreted as follows:</p>\n\n<ul>\n<li>0: Neither width nor height depend on content. This is equivalent to <code>false</code>.</li>\n<li>1: Width depends on content (shrink wraps), but height does not.</li>\n<li>2: Height depends on content (shrink wraps), but width does not. The default.</li>\n<li>3: Both width and height depend on content (shrink wrap). This is equivalent to <code>true</code>.</li>\n</ul>\n\n\n<p>In CSS terms, shrink-wrap width is analogous to an inline-block element as opposed\nto a block-level element. Some container layouts always shrink-wrap their children,\neffectively ignoring this property (e.g., <a href=\"#!/api/Ext.layout.container.HBox\" rel=\"Ext.layout.container.HBox\" class=\"docClass\">Ext.layout.container.HBox</a>,\n<a href=\"#!/api/Ext.layout.container.VBox\" rel=\"Ext.layout.container.VBox\" class=\"docClass\">Ext.layout.container.VBox</a>, <a href=\"#!/api/Ext.layout.component.Dock\" rel=\"Ext.layout.component.Dock\" class=\"docClass\">Ext.layout.component.Dock</a>).</p>\n"},"style":{"!type":"string|?","!doc":"<p>A custom style specification to be applied to this component's Element. Should be a valid argument to\n<a href=\"#!/api/Ext.dom.Element-method-applyStyles\" rel=\"Ext.dom.Element-method-applyStyles\" class=\"docClass\">Ext.Element.applyStyles</a>.</p>\n\n<pre><code>new <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>({\n    title: 'Some Title',\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    width: 400, height: 300,\n    layout: 'form',\n    items: [{\n        xtype: 'textarea',\n        style: {\n            width: '95%',\n            marginBottom: '10px'\n        }\n    },\n    new <a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>({\n        text: 'Send',\n        minWidth: '100',\n        style: {\n            marginBottom: '10px'\n        }\n    })\n    ]\n});\n</code></pre>\n"},"tpl":{"!type":"+Ext.XTemplate|+Ext.Template|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.Template\" rel=\"Ext.Template\" class=\"docClass\">Ext.Template</a>, <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">Ext.XTemplate</a> or an array of strings to form an <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">Ext.XTemplate</a>. Used in\nconjunction with the <code><a href=\"#!/api/Ext.AbstractComponent-cfg-data\" rel=\"Ext.AbstractComponent-cfg-data\" class=\"docClass\">data</a></code> and <code><a href=\"#!/api/Ext.AbstractComponent-cfg-tplWriteMode\" rel=\"Ext.AbstractComponent-cfg-tplWriteMode\" class=\"docClass\">tplWriteMode</a></code> configurations.</p>\n"},"tplWriteMode":{"!type":"string","!doc":"<p>The Ext.(X)Template method to use when updating the content area of the Component.\nSee <code><a href=\"#!/api/Ext.XTemplate-method-overwrite\" rel=\"Ext.XTemplate-method-overwrite\" class=\"docClass\">Ext.XTemplate.overwrite</a></code> for information on default mode.</p>\n"},"ui":{"!type":"string","!doc":"<p>A UI style for a component.</p>\n"},"uiCls":{"!type":"[string]","!doc":"<p>An array of of <code>classNames</code> which are currently applied to this component.</p>\n"},"width":{"!type":"number","!doc":"<p>The width of this component in pixels.</p>\n"},"xtype":{"!type":"+Ext.enums.Widget","!doc":"<p>This property provides a shorter alternative to creating objects than using a full\nclass name. Using <code>xtype</code> is the most common way to define component instances,\nespecially in a container. For example, the items in a form containing text fields\ncould be created explicitly like so:</p>\n\n<pre><code> items: [\n     <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.field.Text\" rel=\"Ext.form.field.Text\" class=\"docClass\">Ext.form.field.Text</a>', {\n         fieldLabel: 'Foo'\n     }),\n     <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.field.Text\" rel=\"Ext.form.field.Text\" class=\"docClass\">Ext.form.field.Text</a>', {\n         fieldLabel: 'Bar'\n     }),\n     <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.field.Number\" rel=\"Ext.form.field.Number\" class=\"docClass\">Ext.form.field.Number</a>', {\n         fieldLabel: 'Num'\n     })\n ]\n</code></pre>\n\n<p>But by using <code>xtype</code>, the above becomes:</p>\n\n<pre><code> items: [\n     {\n         xtype: 'textfield',\n         fieldLabel: 'Foo'\n     },\n     {\n         xtype: 'textfield',\n         fieldLabel: 'Bar'\n     },\n     {\n         xtype: 'numberfield',\n         fieldLabel: 'Num'\n     }\n ]\n</code></pre>\n\n<p>When the <code>xtype</code> is common to many items, <a href=\"#!/api/Ext.container.AbstractContainer-cfg-defaultType\" rel=\"Ext.container.AbstractContainer-cfg-defaultType\" class=\"docClass\">Ext.container.AbstractContainer.defaultType</a>\nis another way to specify the <code>xtype</code> for all items that don't have an explicit <code>xtype</code>:</p>\n\n<pre><code> defaultType: 'textfield',\n items: [\n     { fieldLabel: 'Foo' },\n     { fieldLabel: 'Bar' },\n     { fieldLabel: 'Num', xtype: 'numberfield' }\n ]\n</code></pre>\n\n<p>Each member of the <code>items</code> array is now just a \"configuration object\". These objects\nare used to create and configure component instances. A configuration object can be\nmanually used to instantiate a component using <a href=\"#!/api/Ext-method-widget\" rel=\"Ext-method-widget\" class=\"docClass\">Ext.widget</a>:</p>\n\n<pre><code> var text1 = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.field.Text\" rel=\"Ext.form.field.Text\" class=\"docClass\">Ext.form.field.Text</a>', {\n     fieldLabel: 'Foo'\n });\n\n // or alternatively:\n\n var text1 = <a href=\"#!/api/Ext-method-widget\" rel=\"Ext-method-widget\" class=\"docClass\">Ext.widget</a>({\n     xtype: 'textfield',\n     fieldLabel: 'Foo'\n });\n</code></pre>\n\n<p>This conversion of configuration objects into instantiated components is done when\na container is created as part of its {<a href=\"#!/api/Ext.container.AbstractContainer-method-initComponent\" rel=\"Ext.container.AbstractContainer-method-initComponent\" class=\"docClass\">Ext.container.AbstractContainer.initComponent</a>}\nprocess. As part of the same process, the <code>items</code> array is converted from its raw\narray form into a <a href=\"#!/api/Ext.util.MixedCollection\" rel=\"Ext.util.MixedCollection\" class=\"docClass\">Ext.util.MixedCollection</a> instance.</p>\n\n<p>You can define your own <code>xtype</code> on a custom <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">component</a> by specifying\nthe <code>xtype</code> property in <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>. For example:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('MyApp.PressMeButton', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n    xtype: 'pressmebutton',\n    text: 'Press Me'\n});\n</code></pre>\n\n<p>Care should be taken when naming an <code>xtype</code> in a custom component because there is\na single, shared scope for all xtypes. Third part components should consider using\na prefix to avoid collisions.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Foo.form.CoolButton', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n    xtype: 'ux-coolbutton',\n    text: 'Cool!'\n});\n</code></pre>\n\n<p>See <a href=\"#!/api/Ext.enums.Widget\" rel=\"Ext.enums.Widget\" class=\"docClass\">Ext.enums.Widget</a> for list of all available xtypes.</p>\n"},"_isLayoutRoot":{"!type":"bool","!doc":"<p>Setting this property to <code>true</code> causes the <a href=\"#!/api/Ext.AbstractComponent-method-isLayoutRoot\" rel=\"Ext.AbstractComponent-method-isLayoutRoot\" class=\"docClass\">isLayoutRoot</a> method to return\n<code>true</code> and stop the search for the top-most component for a layout.</p>\n"},"allowDomMove":{"!type":"bool"},"autoGenId":{"!type":"bool","!doc":"<p><code>true</code> indicates an <code>id</code> was auto-generated rather than provided by configuration.</p>\n"},"borderBoxCls":{"!type":"string","!doc":"<p>private</p>\n"},"componentLayoutCounter":{"!type":"number","!doc":"<p>The number of component layout calls made on this object.</p>\n"},"contentPaddingProperty":{"!type":"string","!doc":"<p>The name of the padding property that is used by the layout to manage\npadding.  See <a href=\"#!/api/Ext.layout.container.Auto-property-managePadding\" rel=\"Ext.layout.container.Auto-property-managePadding\" class=\"docClass\">managePadding</a></p>\n"},"deferLayouts":{"!type":"bool"},"frameElementsArray":{"!type":"[?]"},"frameSize":{"!type":"?","!doc":"<p>Indicates the width of any framing elements which were added within the encapsulating\nelement to provide graphical, rounded borders. See the <a href=\"#!/api/Ext.AbstractComponent-cfg-frame\" rel=\"Ext.AbstractComponent-cfg-frame\" class=\"docClass\">frame</a> config. This\nproperty is <code>null</code> if the component is not framed.</p>\n\n<p>This is an object containing the frame width in pixels for all four sides of the\nComponent containing the following properties:</p>\n"},"horizontalPosProp":{"!type":"string"},"isComponent":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated Component, or subclass thereof.</p>\n"},"layoutSuspendCount":{"!type":"number"},"maskOnDisable":{"!type":"bool","!doc":"<p>This is an internal flag that you use when creating custom components. By default this is set to <code>true</code> which means\nthat every component gets a mask when it's disabled. Components like FieldContainer, FieldSet, Field, Button, Tab\noverride this property to <code>false</code> since they want to implement custom disable logic.</p>\n"},"ownerCt":{"!type":"+Ext.Container","!doc":"<p>This Component's owner <a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Container</a> (is set automatically\nwhen this Component is added to a Container).</p>\n\n<p><em>Important.</em> This is not a universal upwards navigation pointer. It indicates the Container which owns and manages\nthis Component if any. There are other similar relationships such as the <a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">button</a> which activates a <a href=\"#!/api/Ext.button.Button-cfg-menu\" rel=\"Ext.button.Button-cfg-menu\" class=\"docClass\">menu</a>, or the\n<a href=\"#!/api/Ext.menu.Item\" rel=\"Ext.menu.Item\" class=\"docClass\">menu item</a> which activated a <a href=\"#!/api/Ext.menu.Item-cfg-menu\" rel=\"Ext.menu.Item-cfg-menu\" class=\"docClass\">submenu</a>, or the\n<a href=\"#!/api/Ext.grid.column.Column\" rel=\"Ext.grid.column.Column\" class=\"docClass\">column header</a> which activated the column menu.</p>\n\n<p>These differences are abstracted away by the <a href=\"#!/api/Ext.AbstractComponent-method-up\" rel=\"Ext.AbstractComponent-method-up\" class=\"docClass\">up</a> method.</p>\n\n<p><strong>Note</strong>: to access items within the Container see <a href=\"#!/api/Ext.AbstractComponent-cfg-itemId\" rel=\"Ext.AbstractComponent-cfg-itemId\" class=\"docClass\">itemId</a>.</p>\n"},"rendered":{"!type":"bool","!doc":"<p>Indicates whether or not the component has been rendered.</p>\n"},"weight":{"!type":"number"},"addClass":{"!type":"fn(cls: string|[string]) -> +Ext.Component","!doc":"<p>Adds a CSS class to the top level element representing this component.</p>\n"},"addCls":{"!type":"fn(cls: string|[string]) -> +Ext.Component","!doc":"<p>Adds a CSS class to the top level element representing this component.</p>\n"},"addClsWithUI":{"!type":"fn(classes: string|[string], skip: ?) -> !this","!doc":"<p>Adds a <code>cls</code> to the <code>uiCls</code> array, which will also call <a href=\"#!/api/Ext.AbstractComponent-method-addUIClsToElement\" rel=\"Ext.AbstractComponent-method-addUIClsToElement\" class=\"docClass\">addUIClsToElement</a> and adds to all elements of this\ncomponent.</p>\n"},"addFocusListener":{"!type":"fn() -> !this","!doc":"<p>Sets up the focus listener on this Component's <a href=\"#!/api/Ext.AbstractComponent-method-getFocusEl\" rel=\"Ext.AbstractComponent-method-getFocusEl\" class=\"docClass\">focusEl</a> if it has one.</p>\n\n<p>Form Components which must implicitly participate in tabbing order usually have a naturally focusable\nelement as their <a href=\"#!/api/Ext.AbstractComponent-method-getFocusEl\" rel=\"Ext.AbstractComponent-method-getFocusEl\" class=\"docClass\">focusEl</a>, and it is the DOM event of that receiving focus which drives\nthe Component's <code>onFocus</code> handling, and the DOM event of it being blurred which drives the <code>onBlur</code> handling.</p>\n\n<p>If the <a href=\"#!/api/Ext.AbstractComponent-method-getFocusEl\" rel=\"Ext.AbstractComponent-method-getFocusEl\" class=\"docClass\">focusEl</a> is <strong>not</strong> naturally focusable, then the listeners are only added\nif the <a href=\"#!/api/Ext.FocusManager\" rel=\"Ext.FocusManager\" class=\"docClass\">FocusManager</a> is enabled.</p>\n"},"addListener":{"!type":"fn(element: ?, listeners: ?, scope: ?, options: ?) -> ?","!doc":"<p>Appends an event handler to this object.  For example:</p>\n\n<pre><code>myGridPanel.on(\"mouseover\", this.onMouseOver, this);\n</code></pre>\n\n<p>The method also allows for a single argument to be passed which is a config object\ncontaining properties which specify multiple events. For example:</p>\n\n<pre><code>myGridPanel.on({\n    cellClick: this.onCellClick,\n    mouseover: this.onMouseOver,\n    mouseout: this.onMouseOut,\n    scope: this // Important. Ensure \"this\" is correct during handler execution\n});\n</code></pre>\n\n<p>One can also specify options for each event handler separately:</p>\n\n<pre><code>myGridPanel.on({\n    cellClick: {fn: this.onCellClick, scope: this, single: true},\n    mouseover: {fn: panel.onMouseOver, scope: panel}\n});\n</code></pre>\n\n<p><em>Names</em> of methods in a specified scope may also be used. Note that\n<code>scope</code> MUST be specified to use this option:</p>\n\n<pre><code>myGridPanel.on({\n    cellClick: {fn: 'onCellClick', scope: this, single: true},\n    mouseover: {fn: 'onMouseOver', scope: panel}\n});\n</code></pre>\n"},"addOverCls":{"!type":"fn() -> !this","!doc":"<p></p>\n"},"addPlugin":{"!type":"fn(plugin: ?) -> !this","!doc":"<p>Adds a plugin. May be called at any time in the component's lifecycle.</p>\n"},"addPropertyToState":{"!type":"fn(state: ?, propName: string, value?: string) -> bool","!doc":"<p>Save a property to the given state object if it is not its default or configured\nvalue.</p>\n"},"addUIClsToElement":{"!type":"fn(ui: string) -> !this","!doc":"<p>Method which adds a specified UI + <code>uiCls</code> to the components element. Can be overridden to remove the UI from more\nthan just the components element.</p>\n"},"addUIToElement":{"!type":"fn() -> !this","!doc":"<p>Method which adds a specified UI to the components element.</p>\n"},"afterComponentLayout":{"!type":"fn(width: number, height: number, oldWidth: number|+undefined, oldHeight: number|+undefined) -> !this","!doc":"<p>Called by the layout system after the Component has been laid out.</p>\n"},"afterSetPosition":{"!type":"fn(x: number, y: number) -> !this","!doc":"<p>Template method called after a Component has been positioned.</p>\n"},"animate":{"!type":"fn(animObj: ?) -> ?","!doc":"<p>Performs custom animation on this object.</p>\n\n<p>This method is applicable to both the <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Component</a> class and the <a href=\"#!/api/Ext.draw.Sprite\" rel=\"Ext.draw.Sprite\" class=\"docClass\">Sprite</a>\nclass. It performs animated transitions of certain properties of this object over a specified timeline.</p>\n\n<h3>Animating a <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Component</a></h3>\n\n<p>When animating a Component, the following properties may be specified in <code>from</code>, <code>to</code>, and <code>keyframe</code> objects:</p>\n\n<ul>\n<li><p><code>x</code> - The Component's page X position in pixels.</p></li>\n<li><p><code>y</code> - The Component's page Y position in pixels</p></li>\n<li><p><code>left</code> - The Component's <code>left</code> value in pixels.</p></li>\n<li><p><code>top</code> - The Component's <code>top</code> value in pixels.</p></li>\n<li><p><code>width</code> - The Component's <code>width</code> value in pixels.</p></li>\n<li><p><code>height</code> - The Component's <code>height</code> value in pixels.</p></li>\n<li><p><code>dynamic</code> - Specify as true to update the Component's layout (if it is a Container) at every frame of the animation.\n<em>Use sparingly as laying out on every intermediate size change is an expensive operation.</em></p></li>\n</ul>\n\n\n<p>For example, to animate a Window to a new size, ensuring that its internal layout and any shadow is correct:</p>\n\n<pre><code>myWindow = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.window.Window\" rel=\"Ext.window.Window\" class=\"docClass\">Ext.window.Window</a>', {\n    title: 'Test Component animation',\n    width: 500,\n    height: 300,\n    layout: {\n        type: 'hbox',\n        align: 'stretch'\n    },\n    items: [{\n        title: 'Left: 33%',\n        margins: '5 0 5 5',\n        flex: 1\n    }, {\n        title: 'Left: 66%',\n        margins: '5 5 5 5',\n        flex: 2\n    }]\n});\nmyWindow.show();\nmyWindow.header.el.on('click', function() {\n    myWindow.animate({\n        to: {\n            width: (myWindow.getWidth() == 500) ? 700 : 500,\n            height: (myWindow.getHeight() == 300) ? 400 : 300\n        }\n    });\n});\n</code></pre>\n\n<p>For performance reasons, by default, the internal layout is only updated when the Window reaches its final <code>\"to\"</code>\nsize. If dynamic updating of the Window's child Components is required, then configure the animation with\n<code>dynamic: true</code> and the two child items will maintain their proportions during the animation.</p>\n"},"beforeBlur":{"!type":"fn(e: +Ext.EventObject) -> !this","!doc":"<p>Template method to do any pre-blur processing.</p>\n"},"beforeComponentLayout":{"!type":"fn(adjWidth: number, adjHeight: number) -> !this","!doc":"<p>Occurs before <code>componentLayout</code> is run. Returning <code>false</code> from this method will prevent the <code>componentLayout</code> from\nbeing executed.</p>\n"},"beforeDestroy":{"!type":"fn() -> !this","!doc":"<p>Invoked before the Component is destroyed.</p>\n"},"beforeFocus":{"!type":"fn(e: +Ext.EventObject) -> !this","!doc":"<p>Template method to do any pre-focus processing.</p>\n"},"beforeLayout":{"!type":"fn() -> !this","!doc":"<p>Occurs before componentLayout is run. In previous releases, this method could\nreturn <code>false</code> to prevent its layout but that is not supported in Ext JS 4.1 or\nhigher. This method is simply a notification of the impending layout to give the\ncomponent a chance to adjust the DOM. Ideally, DOM reads should be avoided at this\ntime to reduce expensive document reflows.</p>\n"},"beforeSetPosition":{"!type":"fn(x: ?, y: ?, animate: ?) -> !this","!doc":"<p>Template method called before a Component is positioned.</p>\n\n<p>Ensures that the position is adjusted so that the Component is constrained if so configured.</p>\n"},"constructPlugin":{"!type":"fn(ptype: string|?) -> !this"},"constructPlugins":{"!type":"fn() -> !this","!doc":"<p>Returns an array of fully constructed plugin instances. This converts any configs into their\nappropriate instances.</p>\n\n<p>It does not mutate the plugins array. It creates a new array.</p>\n"},"convertPositionSpec":{"!type":"fn(posSpec: ?) -> !this","!doc":"<p><strong>Defined in override Ext.rtl.AbstractComponent.</strong></p>\n"},"destroy":{"!type":"fn(this: +Ext.Component, eOpts: ?)","!doc":"<p>Fires after the component is <a href=\"#!/api/Ext.AbstractComponent-method-destroy\" rel=\"Ext.AbstractComponent-method-destroy\" class=\"docClass\">destroy</a>ed.</p>\n"},"disable":{"!type":"fn(this: +Ext.Component, eOpts: ?)","!doc":"<p>Fires after the component is disabled.</p>\n"},"doComponentLayout":{"!type":"fn() -> +Ext.container.Container","!doc":"<p>This method needs to be called whenever you change something on this component that requires the Component's\nlayout to be recalculated.</p>\n"},"enable":{"!type":"fn(this: +Ext.Component, eOpts: ?)","!doc":"<p>Fires after the component is enabled.</p>\n"},"findPlugin":{"!type":"fn(ptype: string) -> +Ext.AbstractPlugin","!doc":"<p>Retrieves plugin from this component's collection by its <code>ptype</code>.</p>\n"},"forceComponentLayout":{"!type":"fn() -> !this","!doc":"<p>Forces this component to redo its componentLayout.</p>\n"},"getAnchorToXY":{"!type":"fn(el: +Ext.dom.Element, anchor?: string, local?: bool, size?: ?) -> [number]","!doc":"<hr />\n\n<p> Begin Positionable methods</p>\n\n<hr />\n\n<p><strong>Overridden in Ext.rtl.AbstractComponent.</strong></p>\n"},"getAutoId":{"!type":"fn() -> !this"},"getBorderPadding":{"!type":"fn() -> ?","!doc":"<p><strong>Overridden in Ext.rtl.AbstractComponent.</strong></p>\n"},"getBubbleTarget":{"!type":"fn() -> +Ext.container.Container","!doc":"<p>Provides the link for Observable's <code>fireEvent</code> method to bubble up the ownership hierarchy.</p>\n"},"getComponentLayout":{"!type":"fn() -> !this"},"getEl":{"!type":"fn() -> +Ext.dom.Element","!doc":"<p>Retrieves the top level element representing this component.</p>\n"},"getFocusEl":{"!type":"fn() -> +undefined","!doc":"<p>Returns the focus holder element associated with this Component. At the Component base class level, this function returns <code>undefined</code>.</p>\n\n<p>Subclasses which use embedded focusable elements (such as Window, Field and Button) should override this\nfor use by the <a href=\"#!/api/Ext.Component-method-focus\" rel=\"Ext.Component-method-focus\" class=\"docClass\">focus</a> method.</p>\n\n<p>Containers which need to participate in the <a href=\"#!/api/Ext.FocusManager\" rel=\"Ext.FocusManager\" class=\"docClass\">FocusManager</a>'s navigation and Container focusing scheme also\nneed to return a <code>focusEl</code>, although focus is only listened for in this case if the <a href=\"#!/api/Ext.FocusManager\" rel=\"Ext.FocusManager\" class=\"docClass\">FocusManager</a> is <a href=\"#!/api/Ext.FocusManager-method-enable\" rel=\"Ext.FocusManager-method-enable\" class=\"docClass\">enable</a>d.</p>\n"},"getHeight":{"!type":"fn() -> number","!doc":"<p>Gets the current height of the component's underlying element.</p>\n"},"getHierarchyState":{"!type":"fn(inner: ?) -> !this","!doc":"<p>A component's hierarchyState is used to keep track of aspects of a component's\nstate that affect its descendants hierarchically like \"collapsed\" and \"hidden\".\nFor example, if this.hierarchyState.hidden == true, it means that either this\ncomponent, or one of its ancestors is hidden.</p>\n\n<p>Hierarchical state management is implemented by chaining each component's\nhierarchyState property to its parent container's hierarchyState property via the\nprototype. The result is such that if a component's hierarchyState does not have\nit's own property, it inherits the property from the nearest ancestor that does.</p>\n\n<p>To set a hierarchical \"hidden\" value:</p>\n\n<pre><code>this.getHierarchyState().hidden = true;\n</code></pre>\n\n<p>It is important to remember when unsetting hierarchyState properties to delete\nthem instead of just setting them to a falsy value.  This ensures that the\nhierarchyState returns to a state of inheriting the value instead of overriding it\nTo unset the hierarchical \"hidden\" value:</p>\n\n<pre><code>delete this.getHierarchyState().hidden;\n</code></pre>\n\n<p>IMPORTANT! ALWAYS access hierarchyState using this method, not by accessing\nthis.hierarchyState directly.  The hierarchyState property does not exist until\nthe first time getHierarchyState() is called.  At that point getHierarchyState()\nwalks up the component tree to establish the hierarchyState prototype chain.\nAdditionally the hierarchyState property should NOT be relied upon even after\nthe initial call to getHierarchyState() because  it is possible for the\nhierarchyState to be invalidated. Invalidation typically happens when a component\nis moved to a new container. In such a case the hierarchy state remains invalid\nuntil the next time getHierarchyState() is called on the component or one of its\ndescendants.</p>\n"},"getId":{"!type":"fn() -> string","!doc":"<p>Retrieves the <code>id</code> of this component. Will auto-generate an <code>id</code> if one has not already been set.</p>\n"},"getItemId":{"!type":"fn() -> string","!doc":"<p>Returns the value of <a href=\"#!/api/Ext.AbstractComponent-cfg-itemId\" rel=\"Ext.AbstractComponent-cfg-itemId\" class=\"docClass\">itemId</a> assigned to this component, or when that\nis not set, returns the value of <a href=\"#!/api/Ext.AbstractComponent-cfg-id\" rel=\"Ext.AbstractComponent-cfg-id\" class=\"docClass\">id</a>.</p>\n"},"getLoader":{"!type":"fn() -> +Ext.ComponentLoader","!doc":"<p>Gets the <a href=\"#!/api/Ext.ComponentLoader\" rel=\"Ext.ComponentLoader\" class=\"docClass\">Ext.ComponentLoader</a> for this Component.</p>\n"},"getLocalX":{"!type":"fn() -> number","!doc":"<p><strong>Overridden in Ext.rtl.AbstractComponent.</strong></p>\n"},"getLocalXY":{"!type":"fn() -> [number]","!doc":"<p><strong>Overridden in Ext.rtl.AbstractComponent.</strong></p>\n"},"getLocalY":{"!type":"fn() -> number","!doc":"<p>Returns the y coordinate of this element reletive to its <code>offsetParent</code>.</p>\n"},"getMaskTarget":{"!type":"fn() -> !this"},"getOverflowEl":{"!type":"fn() -> !this","!doc":"<p>Get an el for overflowing, defaults to the target el</p>\n"},"getOverflowStyle":{"!type":"fn() -> !this","!doc":"<p>Returns the CSS style object which will set the Component's scroll styles. This must be applied\nto the <a href=\"#!/api/Ext.AbstractComponent-method-getTargetEl\" rel=\"Ext.AbstractComponent-method-getTargetEl\" class=\"docClass\">target element</a>.</p>\n"},"getPlugin":{"!type":"fn(pluginId: string) -> +Ext.AbstractPlugin","!doc":"<p>Retrieves a plugin from this component's collection by its <code>pluginId</code>.</p>\n"},"getSize":{"!type":"fn() -> ?","!doc":"<p>Gets the current size of the component's underlying element.</p>\n"},"getSizeModel":{"!type":"fn(ownerCtSizeModel: ?) -> ?","!doc":"<p>Returns an object that describes how this component's width and height are managed.\nAll of these objects are shared and should not be modified.</p>\n"},"getState":{"!type":"fn() -> ?","!doc":"<p>The supplied default state gathering method for the AbstractComponent class.</p>\n\n<p>This method returns dimension settings such as <code>flex</code>, <code>anchor</code>, <code>width</code> and <code>height</code> along with <code>collapsed</code>\nstate.</p>\n\n<p>Subclasses which implement more complex state should call the superclass's implementation, and apply their state\nto the result if this basic state is to be saved.</p>\n\n<p>Note that Component state will only be saved if the Component has a <a href=\"#!/api/Ext.AbstractComponent-cfg-stateId\" rel=\"Ext.AbstractComponent-cfg-stateId\" class=\"docClass\">stateId</a> and there as a StateProvider\nconfigured for the document.</p>\n"},"getTargetEl":{"!type":"fn() -> !this","!doc":"<p>This is used to determine where to insert the 'html', 'contentEl' and 'items' in this component.</p>\n"},"getTpl":{"!type":"fn(name: ?) -> !this"},"getWidth":{"!type":"fn() -> number","!doc":"<p>Gets the current width of the component's underlying element.</p>\n"},"getX":{"!type":"fn() -> number","!doc":"<p>Gets the current X position of the DOM element based on page coordinates.</p>\n"},"getXTypes":{"!type":"fn() -> string","!doc":"<p>Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the\n<a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> header.</p>\n\n<p><strong>If using your own subclasses, be aware that a Component must register its own xtype to participate in\ndetermination of inherited xtypes.</strong></p>\n\n<p>Example usage:</p>\n\n<pre class='inline-example '><code>var t = new <a href=\"#!/api/Ext.form.field.Text\" rel=\"Ext.form.field.Text\" class=\"docClass\">Ext.form.field.Text</a>();\nalert(t.getXTypes());  // alerts 'component/field/textfield'\n</code></pre>\n"},"getXY":{"!type":"fn() -> [number]","!doc":"<p>Gets the current position of the DOM element based on page coordinates.</p>\n"},"getY":{"!type":"fn() -> number","!doc":"<p>Gets the current Y position of the DOM element based on page coordinates.</p>\n"},"hasCls":{"!type":"fn(className: string) -> bool","!doc":"<p>Checks if the specified CSS class exists on this element's DOM node.</p>\n"},"hasUICls":{"!type":"fn(cls: string) -> !this","!doc":"<p>Checks if there is currently a specified <code>uiCls</code>.</p>\n"},"initCls":{"!type":"fn() -> !this"},"initComponent":{"!type":"fn() -> !this"},"initEvents":{"!type":"fn() -> !this","!doc":"<p>Initialize any events on this component</p>\n"},"initHierarchyState":{"!type":"fn(hierarchyState: ?) -> !this","!doc":"<p>Called by <a href=\"#!/api/Ext.AbstractComponent-method-getHierarchyState\" rel=\"Ext.AbstractComponent-method-getHierarchyState\" class=\"docClass\">getHierarchyState</a> to initialize the hierarchyState the first\ntime it is requested.</p>\n\n<p><strong>Overridden in Ext.rtl.AbstractComponent.</strong></p>\n"},"initPadding":{"!type":"fn(targetEl: ?) -> !this","!doc":"<p>Initializes padding by applying it to the target element, or if the layout manages\npadding ensures that the padding on the target element is \"0\".</p>\n"},"initPlugin":{"!type":"fn(plugin: ?) -> !this"},"initStyles":{"!type":"fn(targetEl: ?) -> !this","!doc":"<p>Applies padding, margin, border, top, left, height, and width configs to the\nappropriate elements.</p>\n"},"is":{"!type":"fn(selector: string) -> bool","!doc":"<p>Tests whether this Component matches the selector string.</p>\n"},"isDescendant":{"!type":"fn(ancestor: ?) -> !this"},"isDescendantOf":{"!type":"fn(container: +Ext.Container) -> bool","!doc":"<p>Determines whether this component is the descendant of a particular container.</p>\n"},"isDisabled":{"!type":"fn() -> bool","!doc":"<p>Method to determine whether this Component is currently disabled.</p>\n"},"isDraggable":{"!type":"fn() -> bool","!doc":"<p>Method to determine whether this Component is draggable.</p>\n"},"isDroppable":{"!type":"fn() -> bool","!doc":"<p>Method to determine whether this Component is droppable.</p>\n"},"isFloating":{"!type":"fn() -> bool","!doc":"<p>Method to determine whether this Component is floating.</p>\n"},"isFocusable":{"!type":"fn() -> !this"},"isHidden":{"!type":"fn() -> bool","!doc":"<p>Method to determine whether this Component is currently set to hidden.</p>\n"},"isHierarchicallyHidden":{"!type":"fn() -> !this"},"isLayoutRoot":{"!type":"fn() -> !this","!doc":"<p>Determines whether this Component is the root of a layout. This returns <code>true</code> if\nthis component can run its layout without assistance from or impact on its owner.\nIf this component cannot run its layout given these restrictions, <code>false</code> is returned\nand its owner will be considered as the next candidate for the layout root.</p>\n\n<p>Setting the <a href=\"#!/api/Ext.AbstractComponent-property-_isLayoutRoot\" rel=\"Ext.AbstractComponent-property-_isLayoutRoot\" class=\"docClass\">_isLayoutRoot</a> property to <code>true</code> causes this method to always\nreturn <code>true</code>. This may be useful when updating a layout of a Container which shrink\nwraps content, and you know that it will not change size, and so can safely be the\ntopmost participant in the layout run.</p>\n"},"isLayoutSuspended":{"!type":"fn() -> bool","!doc":"<p>Returns <code>true</code> if layout is suspended for this component. This can come from direct\nsuspension of this component's layout activity (<a href=\"#!/api/Ext.container.Container-cfg-suspendLayout\" rel=\"Ext.container.Container-cfg-suspendLayout\" class=\"docClass\">Ext.Container.suspendLayout</a>) or if one\nof this component's containers is suspended.</p>\n"},"isLocalRtl":{"!type":"fn() -> bool","!doc":"<p>Returns true if this component's local coordinate system is rtl. For normal\ncomponents this equates to the value of isParentRtl().  Floaters are a bit different\nbecause a floater's element can be a childNode of something other than its\nparent component's element.  For floaters we have to read the dom to see if the\ncomponent's element's parentNode has a css direction value of \"rtl\".</p>\n\n<p><strong>Defined in override Ext.rtl.AbstractComponent.</strong></p>\n"},"isOppositeRootDirection":{"!type":"fn() -> !this","!doc":"<p><strong>Defined in override Ext.rtl.AbstractComponent.</strong></p>\n"},"isParentRtl":{"!type":"fn() -> bool","!doc":"<p>Returns true if this component's parent container is rtl. Used by rtl positioning\nmethods to determine if the component should be positioned using a right-to-left\ncoordinate system.</p>\n\n<p><strong>Defined in override Ext.rtl.AbstractComponent.</strong></p>\n"},"isVisible":{"!type":"fn(deep?: bool) -> bool","!doc":"<p>Returns <code>true</code> if this component is visible.</p>\n"},"isXType":{"!type":"fn(xtype: string, shallow?: bool) -> bool","!doc":"<p>Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended\nfrom the xtype (default) or whether it is directly of the xtype specified (<code>shallow = true</code>).</p>\n\n<p><strong>If using your own subclasses, be aware that a Component must register its own xtype to participate in\ndetermination of inherited xtypes.</strong></p>\n\n<p>For a list of all available xtypes, see the <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> header.</p>\n\n<p>Example usage:</p>\n\n<pre class='inline-example '><code>var t = new <a href=\"#!/api/Ext.form.field.Text\" rel=\"Ext.form.field.Text\" class=\"docClass\">Ext.form.field.Text</a>();\nvar isText = t.isXType('textfield');        // true\nvar isBoxSubclass = t.isXType('field');       // true, descended from <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">Ext.form.field.Base</a>\nvar isBoxInstance = t.isXType('field', true); // false, not a direct <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">Ext.form.field.Base</a> instance\n</code></pre>\n"},"mask":{"!type":"fn() -> !this"},"nextNode":{"!type":"fn(selector?: string) -> +Ext.Component","!doc":"<p>Returns the next node in the Component tree in tree traversal order.</p>\n\n<p>Note that this is not limited to siblings, and if invoked upon a node with no matching siblings, will walk the\ntree to attempt to find a match. Contrast with <a href=\"#!/api/Ext.AbstractComponent-method-nextSibling\" rel=\"Ext.AbstractComponent-method-nextSibling\" class=\"docClass\">nextSibling</a>.</p>\n"},"nextSibling":{"!type":"fn(selector?: string) -> +Ext.Component","!doc":"<p>Returns the next sibling of this Component.</p>\n\n<p>Optionally selects the next sibling which matches the passed <a href=\"#!/api/Ext.ComponentQuery\" rel=\"Ext.ComponentQuery\" class=\"docClass\">ComponentQuery</a> selector.</p>\n\n<p>May also be referred to as <strong><code>next()</code></strong></p>\n\n<p>Note that this is limited to siblings, and if no siblings of the item match, <code>null</code> is returned. Contrast with\n<a href=\"#!/api/Ext.AbstractComponent-method-nextNode\" rel=\"Ext.AbstractComponent-method-nextNode\" class=\"docClass\">nextNode</a></p>\n"},"onAdded":{"!type":"fn(container: +Ext.container.Container, pos: number) -> !this","!doc":"<p>Method to manage awareness of when components are added to their\nrespective Container, firing an <a href=\"#!/api/Ext.AbstractComponent-event-added\" rel=\"Ext.AbstractComponent-event-added\" class=\"docClass\">added</a> event. References are\nestablished at add time rather than at render time.</p>\n\n<p>Allows addition of behavior when a Component is added to a\nContainer. At this stage, the Component is in the parent\nContainer's collection of child items. After calling the\nsuperclass's <code>onAdded</code>, the <code>ownerCt</code> reference will be present,\nand if configured with a ref, the <code>refOwner</code> will be set.</p>\n"},"onBlur":{"!type":"fn(e: ?) -> !this","!doc":"<p>private</p>\n"},"onBoxReady":{"!type":"fn(width: ?, height: ?) -> !this"},"onDestroy":{"!type":"fn() -> !this"},"onDisable":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the disable operation.\nAfter calling the superclass's <code>onDisable</code>, the Component will be disabled.</p>\n"},"onEnable":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the enable operation.\nAfter calling the superclass's <code>onEnable</code>, the Component will be enabled.</p>\n"},"onFocus":{"!type":"fn(e: ?) -> !this","!doc":"<p>private</p>\n"},"onHide":{"!type":"fn() -> !this"},"onPosition":{"!type":"fn(x: number, y: number) -> !this","!doc":"<p>Called after the component is moved, this method is empty by default but can be implemented by any\nsubclass that needs to perform custom logic after a move occurs.</p>\n"},"onRemoved":{"!type":"fn(destroying: bool) -> !this","!doc":"<p>Method to manage awareness of when components are removed from their\nrespective Container, firing a <a href=\"#!/api/Ext.AbstractComponent-event-removed\" rel=\"Ext.AbstractComponent-event-removed\" class=\"docClass\">removed</a> event. References are properly\ncleaned up after removing a component from its owning container.</p>\n\n<p>Allows addition of behavior when a Component is removed from\nits parent Container. At this stage, the Component has been\nremoved from its parent Container's collection of child items,\nbut has not been destroyed (It will be destroyed if the parent\nContainer's <code>autoDestroy</code> is <code>true</code>, or if the remove call was\npassed a truthy second parameter). After calling the\nsuperclass's <code>onRemoved</code>, the <code>ownerCt</code> and the <code>refOwner</code> will not\nbe present.</p>\n"},"onResize":{"!type":"fn(width: ?, height: ?, oldWidth: ?, oldHeight: ?) -> !this","!doc":"<p>Allows addition of behavior to the resize operation.</p>\n\n<p>Called when Ext.resizer.Resizer#drag event is fired.</p>\n"},"onShow":{"!type":"fn() -> !this"},"parseBox":{"!type":"fn(box: ?) -> !this","!doc":"<p><strong>Overridden in Ext.rtl.AbstractComponent.</strong></p>\n"},"postBlur":{"!type":"fn(e: +Ext.EventObject) -> !this","!doc":"<p>Template method to do any post-blur processing.</p>\n"},"previousNode":{"!type":"fn(selector?: string) -> +Ext.Component","!doc":"<p>Returns the previous node in the Component tree in tree traversal order.</p>\n\n<p>Note that this is not limited to siblings, and if invoked upon a node with no matching siblings, will walk the\ntree in reverse order to attempt to find a match. Contrast with <a href=\"#!/api/Ext.AbstractComponent-method-previousSibling\" rel=\"Ext.AbstractComponent-method-previousSibling\" class=\"docClass\">previousSibling</a>.</p>\n"},"previousSibling":{"!type":"fn(selector?: string) -> +Ext.Component","!doc":"<p>Returns the previous sibling of this Component.</p>\n\n<p>Optionally selects the previous sibling which matches the passed <a href=\"#!/api/Ext.ComponentQuery\" rel=\"Ext.ComponentQuery\" class=\"docClass\">ComponentQuery</a>\nselector.</p>\n\n<p>May also be referred to as <strong><code>prev()</code></strong></p>\n\n<p>Note that this is limited to siblings, and if no siblings of the item match, <code>null</code> is returned. Contrast with\n<a href=\"#!/api/Ext.AbstractComponent-method-previousNode\" rel=\"Ext.AbstractComponent-method-previousNode\" class=\"docClass\">previousNode</a></p>\n"},"registerFloatingItem":{"!type":"fn(cmp: ?) -> !this","!doc":"<p>Called by Component#doAutoRender</p>\n\n<p>Register a Container configured <code>floating: true</code> with this Component's <a href=\"#!/api/Ext.ZIndexManager\" rel=\"Ext.ZIndexManager\" class=\"docClass\">ZIndexManager</a>.</p>\n\n<p>Components added in this way will not participate in any layout, but will be rendered\nupon first show in the way that <a href=\"#!/api/Ext.window.Window\" rel=\"Ext.window.Window\" class=\"docClass\">Window</a>s are.</p>\n"},"removeClass":{"!type":"fn() -> !this","!doc":"<p><debug></debug></p>\n"},"removeCls":{"!type":"fn(cls: string|[string]) -> +Ext.Component","!doc":"<p>Removes a CSS class from the top level element representing this component.</p>\n"},"removeClsWithUI":{"!type":"fn(cls: string|[string]) -> !this","!doc":"<p>Removes a <code>cls</code> to the <code>uiCls</code> array, which will also call <a href=\"#!/api/Ext.AbstractComponent-method-removeUIClsFromElement\" rel=\"Ext.AbstractComponent-method-removeUIClsFromElement\" class=\"docClass\">removeUIClsFromElement</a> and removes it from all\nelements of this component.</p>\n"},"removeManagedListenerItem":{"!type":"fn(isClear: bool, managedListener: ?) -> !this","!doc":"<p>inherit docs</p>\n"},"removeOverCls":{"!type":"fn() -> !this"},"removePlugin":{"!type":"fn(plugin: ?) -> !this"},"removeUIClsFromElement":{"!type":"fn(ui: string) -> !this","!doc":"<p>Method which removes a specified UI + <code>uiCls</code> from the components element. The <code>cls</code> which is added to the element\nwill be: <code>this.baseCls + '-' + ui</code>.</p>\n"},"removeUIFromElement":{"!type":"fn() -> !this","!doc":"<p>Method which removes a specified UI from the components element.</p>\n"},"resumeLayouts":{"!type":"fn(flushOptions: ?) -> !this"},"setBorder":{"!type":"fn(border: string|number) -> !this"},"setComponentLayout":{"!type":"fn(layout: ?) -> !this"},"setDisabled":{"!type":"fn(disabled: bool) -> !this","!doc":"<p>Enable or disable the component.</p>\n"},"setDocked":{"!type":"fn(dock: ?, layoutParent?: bool) -> +Ext.Component","!doc":"<p>Sets the dock position of this component in its parent panel. Note that this only has effect if this item is part\nof the <code>dockedItems</code> collection of a parent that has a DockLayout (note that any Panel has a DockLayout by default)</p>\n"},"setHeight":{"!type":"fn(height: number) -> +Ext.Component","!doc":"<p>Sets the height of the component. This method fires the <a href=\"#!/api/Ext.AbstractComponent-event-resize\" rel=\"Ext.AbstractComponent-event-resize\" class=\"docClass\">resize</a> event.</p>\n"},"setHiddenState":{"!type":"fn(hidden: ?) -> !this"},"setLocalX":{"!type":"fn(x: ?) -> +Ext.util.Positionable","!doc":"<p><strong>Overridden in Ext.rtl.AbstractComponent.</strong></p>\n"},"setLocalXY":{"!type":"fn(x: ?, y: ?) -> +Ext.util.Positionable","!doc":"<p><strong>Overridden in Ext.rtl.AbstractComponent.</strong></p>\n"},"setLocalY":{"!type":"fn(y: ?) -> +Ext.util.Positionable","!doc":"<p>Sets the local y coordinate of this element using CSS style. When used on an\nabsolute positioned element this method is symmetrical with <a href=\"#!/api/Ext.AbstractComponent-method-getLocalY\" rel=\"Ext.AbstractComponent-method-getLocalY\" class=\"docClass\">getLocalY</a>, but\nmay not be symmetrical when used on a relatively positioned element.</p>\n"},"setMargin":{"!type":"fn(margin: number|string) -> !this","!doc":"<p>Sets the margin on the target element.</p>\n"},"setSize":{"!type":"fn(width: number|string|?, height: number|string) -> +Ext.Component","!doc":"<p>Sets the width and height of this Component. This method fires the <a href=\"#!/api/Ext.AbstractComponent-event-resize\" rel=\"Ext.AbstractComponent-event-resize\" class=\"docClass\">resize</a> event. This method can accept\neither width and height as separate arguments, or you can pass a size object like <code>{width:10, height:20}</code>.</p>\n"},"setUI":{"!type":"fn(ui: string) -> !this","!doc":"<p>Sets the UI for the component. This will remove any existing UIs on the component. It will also loop through any\n<code>uiCls</code> set on the component and rename them so they include the new UI.</p>\n"},"setVisible":{"!type":"fn(visible: bool) -> +Ext.Component","!doc":"<p>Convenience function to hide or show this component by Boolean.</p>\n"},"setWidth":{"!type":"fn(width: number) -> +Ext.Component","!doc":"<p>Sets the width of the component. This method fires the <a href=\"#!/api/Ext.AbstractComponent-event-resize\" rel=\"Ext.AbstractComponent-event-resize\" class=\"docClass\">resize</a> event.</p>\n"},"setX":{"!type":"fn(x: ?, animate: ?) -> +Ext.util.Positionable","!doc":"<p>Sets the X position of the DOM element based on page coordinates.</p>\n"},"setXY":{"!type":"fn(xy: ?, animate: ?) -> +Ext.util.Positionable","!doc":"<p>Sets the position of the DOM element in page coordinates.</p>\n"},"setY":{"!type":"fn(y: ?, animate: ?) -> +Ext.util.Positionable","!doc":"<p>Sets the Y position of the DOM element based on page coordinates.</p>\n"},"setupProtoEl":{"!type":"fn() -> !this"},"show":{"!type":"fn(this: +Ext.Component, eOpts: ?)","!doc":"<p>Fires after the component is shown when calling the <a href=\"#!/api/Ext.Component-method-show\" rel=\"Ext.Component-method-show\" class=\"docClass\">show</a> method.</p>\n"},"suspendLayouts":{"!type":"fn() -> !this"},"unitizeBox":{"!type":"fn(box: ?) -> !this","!doc":"<p><strong>Overridden in Ext.rtl.AbstractComponent.</strong></p>\n"},"unmask":{"!type":"fn() -> !this"},"unregisterFloatingItem":{"!type":"fn(cmp: ?) -> !this"},"up":{"!type":"fn(selector?: string|+Ext.Component, limit?: string|number|+Ext.Component) -> +Ext.container.Container","!doc":"<p>Navigates up the ownership hierarchy searching for an ancestor Container which matches any passed simple selector or component.</p>\n\n<p><em>Important.</em> There is not a universal upwards navigation pointer. There are several upwards relationships\nsuch as the <a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">button</a> which activates a <a href=\"#!/api/Ext.button.Button-cfg-menu\" rel=\"Ext.button.Button-cfg-menu\" class=\"docClass\">menu</a>, or the\n<a href=\"#!/api/Ext.menu.Item\" rel=\"Ext.menu.Item\" class=\"docClass\">menu item</a> which activated a <a href=\"#!/api/Ext.menu.Item-cfg-menu\" rel=\"Ext.menu.Item-cfg-menu\" class=\"docClass\">submenu</a>, or the\n<a href=\"#!/api/Ext.grid.column.Column\" rel=\"Ext.grid.column.Column\" class=\"docClass\">column header</a> which activated the column menu.</p>\n\n<p>These differences are abstracted away by this method.</p>\n\n<p>Example:</p>\n\n<pre><code>var owningTabPanel = grid.up('tabpanel');\n</code></pre>\n"},"update":{"!type":"fn(htmlOrData: string|?, loadScripts?: bool, callback?: fn()) -> !this","!doc":"<p>Update the content area of a component.</p>\n"},"updateAria":{"!type":"fn() -> !this","!doc":"<p>Injected as an override by Ext.Aria.initialize</p>\n"},"updateLayout":{"!type":"fn(options?: ?) -> !this","!doc":"<p>Updates this component's layout. If this update affects this components <a href=\"#!/api/Ext.AbstractComponent-property-ownerCt\" rel=\"Ext.AbstractComponent-property-ownerCt\" class=\"docClass\">ownerCt</a>,\nthat component's <code>updateLayout</code> method will be called to perform the layout instead.\nOtherwise, just this component (and its child items) will layout.</p>\n"},"activate":{"!type":"fn(this: +Ext.Component, eOpts: ?)","!doc":"<p>Fires after a Component has been visually activated.</p>\n"},"added":{"!type":"fn(this: +Ext.Component, container: +Ext.container.Container, pos: number, eOpts: ?)","!doc":"<p>Fires after a Component had been added to a Container.</p>\n"},"afterrender":{"!type":"fn(this: +Ext.Component, eOpts: ?)","!doc":"<p>Fires after the component rendering is finished.</p>\n\n<p>The <code>afterrender</code> event is fired after this Component has been <a href=\"#!/api/Ext.AbstractComponent-property-rendered\" rel=\"Ext.AbstractComponent-property-rendered\" class=\"docClass\">rendered</a>, been postprocessed by any\n<code>afterRender</code> method defined for the Component.</p>\n"},"beforeactivate":{"!type":"fn(this: +Ext.Component, eOpts: ?)","!doc":"<p>Fires before a Component has been visually activated. Returning <code>false</code> from an event listener can prevent\nthe activate from occurring.</p>\n"},"beforedeactivate":{"!type":"fn(this: +Ext.Component, eOpts: ?)","!doc":"<p>Fires before a Component has been visually deactivated. Returning <code>false</code> from an event listener can\nprevent the deactivate from occurring.</p>\n"},"beforedestroy":{"!type":"fn(this: +Ext.Component, eOpts: ?)","!doc":"<p>Fires before the component is <a href=\"#!/api/Ext.AbstractComponent-method-destroy\" rel=\"Ext.AbstractComponent-method-destroy\" class=\"docClass\">destroy</a>ed. Return <code>false</code> from an event handler to stop the\n<a href=\"#!/api/Ext.AbstractComponent-method-destroy\" rel=\"Ext.AbstractComponent-method-destroy\" class=\"docClass\">destroy</a>.</p>\n"},"beforehide":{"!type":"fn(this: +Ext.Component, eOpts: ?)","!doc":"<p>Fires before the component is hidden when calling the <a href=\"#!/api/Ext.Component-method-hide\" rel=\"Ext.Component-method-hide\" class=\"docClass\">hide</a> method. Return <code>false</code> from an event\nhandler to stop the hide.</p>\n"},"beforerender":{"!type":"fn(this: +Ext.Component, eOpts: ?)","!doc":"<p>Fires before the component is <a href=\"#!/api/Ext.AbstractComponent-property-rendered\" rel=\"Ext.AbstractComponent-property-rendered\" class=\"docClass\">rendered</a>. Return <code>false</code> from an event handler to stop the\n<a href=\"#!/api/Ext.AbstractComponent-method-render\" rel=\"Ext.AbstractComponent-method-render\" class=\"docClass\">render</a>.</p>\n"},"beforeshow":{"!type":"fn(this: +Ext.Component, eOpts: ?)","!doc":"<p>Fires before the component is shown when calling the <a href=\"#!/api/Ext.Component-method-show\" rel=\"Ext.Component-method-show\" class=\"docClass\">show</a> method. Return <code>false</code> from an event\nhandler to stop the show.</p>\n"},"blur":{"!type":"fn(this: +Ext.Component, The: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when this Component loses focus.</p>\n"},"boxready":{"!type":"fn(this: +Ext.Component, width: number, height: number, eOpts: ?)","!doc":"<p>Fires <em>one time</em> - after the component has been laid out for the first time at its initial size.</p>\n"},"deactivate":{"!type":"fn(this: +Ext.Component, eOpts: ?)","!doc":"<p>Fires after a Component has been visually deactivated.</p>\n"},"focus":{"!type":"fn(this: +Ext.Component, The: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when this Component receives focus.</p>\n"},"hide":{"!type":"fn(this: +Ext.Component, eOpts: ?)","!doc":"<p>Fires after the component is hidden. Fires after the component is hidden when calling the <a href=\"#!/api/Ext.Component-method-hide\" rel=\"Ext.Component-method-hide\" class=\"docClass\">hide</a>\nmethod.</p>\n"},"move":{"!type":"fn(this: +Ext.Component, x: number, y: number, eOpts: ?)","!doc":"<p>Fires after the component is moved.</p>\n"},"removed":{"!type":"fn(this: +Ext.Component, ownerCt: +Ext.container.Container, eOpts: ?)","!doc":"<p>Fires when a component is removed from an <a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a></p>\n"},"render":{"!type":"fn(this: +Ext.Component, eOpts: ?)","!doc":"<p>Fires after the component markup is <a href=\"#!/api/Ext.AbstractComponent-property-rendered\" rel=\"Ext.AbstractComponent-property-rendered\" class=\"docClass\">rendered</a>.</p>\n"},"resize":{"!type":"fn(this: +Ext.Component, width: number, height: number, oldWidth: number, oldHeight: number, eOpts: ?)","!doc":"<p>Fires after the component is resized. Note that this does <em>not</em> fire when the component is first laid out at its initial\nsize. To hook that point in the life cycle, use the <a href=\"#!/api/Ext.AbstractComponent-event-boxready\" rel=\"Ext.AbstractComponent-event-boxready\" class=\"docClass\">boxready</a> event.</p>\n"}},"AUTO_ID":{"!type":"number"},"layoutSuspendCount":{"!type":"number"},"pendingLayouts":{"!type":"?"},"cancelLayout":{"!type":"fn(comp: +Ext.Component) -> !this","!doc":"<p>Cancels layout of a component.</p>\n"},"flushLayouts":{"!type":"fn() -> !this","!doc":"<p>Performs all pending layouts that were scheduled while\n<a href=\"#!/api/Ext.AbstractComponent-method-suspendLayouts\" rel=\"Ext.AbstractComponent-method-suspendLayouts\" class=\"docClass\">suspendLayouts</a> was in effect.</p>\n"},"resumeLayouts":{"!type":"fn(flush?: bool) -> !this","!doc":"<p>Resumes layout activity in the whole framework.</p>\n\n<p><a href=\"#!/api/Ext-method-suspendLayouts\" rel=\"Ext-method-suspendLayouts\" class=\"docClass\">Ext.suspendLayouts</a> is alias of <a href=\"#!/api/Ext.AbstractComponent-method-suspendLayouts\" rel=\"Ext.AbstractComponent-method-suspendLayouts\" class=\"docClass\">suspendLayouts</a>.</p>\n"},"suspendLayouts":{"!type":"fn() -> !this","!doc":"<p>Stops layouts from happening in the whole framework.</p>\n\n<p>It's useful to suspend the layout activity while updating multiple components and\ncontainers:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-suspendLayouts\" rel=\"Ext-method-suspendLayouts\" class=\"docClass\">Ext.suspendLayouts</a>();\n// batch of updates...\n<a href=\"#!/api/Ext-method-resumeLayouts\" rel=\"Ext-method-resumeLayouts\" class=\"docClass\">Ext.resumeLayouts</a>(true);\n</code></pre>\n\n<p><a href=\"#!/api/Ext-method-suspendLayouts\" rel=\"Ext-method-suspendLayouts\" class=\"docClass\">Ext.suspendLayouts</a> is alias of <a href=\"#!/api/Ext.AbstractComponent-method-suspendLayouts\" rel=\"Ext.AbstractComponent-method-suspendLayouts\" class=\"docClass\">suspendLayouts</a>.</p>\n\n<p>See also <a href=\"#!/api/Ext-method-batchLayouts\" rel=\"Ext-method-batchLayouts\" class=\"docClass\">Ext.batchLayouts</a> for more abstract way of doing this.</p>\n"},"updateLayout":{"!type":"fn(comp: +Ext.Component, defer?: bool) -> !this","!doc":"<p>Updates layout of a component.</p>\n"}},"util":{"Observable":{"prototype":{"listeners":{"!type":"?","!doc":"<p>A config object containing one or more event handlers to be added to this object during initialization. This\nshould be a valid listeners config object as specified in the <a href=\"#!/api/Ext.util.Observable-method-addListener\" rel=\"Ext.util.Observable-method-addListener\" class=\"docClass\">addListener</a> example for attaching multiple\nhandlers at once.</p>\n\n<p><strong>DOM events from Ext JS <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Components</a></strong></p>\n\n<p>While <em>some</em> Ext JS Component classes export selected DOM events (e.g. \"click\", \"mouseover\" etc), this is usually\nonly done when extra value can be added. For example the <a href=\"#!/api/Ext.view.View\" rel=\"Ext.view.View\" class=\"docClass\">DataView</a>'s <strong><code><a href=\"#!/api/Ext.view.View-event-itemclick\" rel=\"Ext.view.View-event-itemclick\" class=\"docClass\">itemclick</a></code></strong> event passing the node clicked on. To access DOM events directly from a\nchild element of a Component, we need to specify the <code>element</code> option to identify the Component property to add a\nDOM listener to:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>({\n    width: 400,\n    height: 200,\n    dockedItems: [{\n        xtype: 'toolbar'\n    }],\n    listeners: {\n        click: {\n            element: 'el', //bind to the underlying el property on the panel\n            fn: function(){ console.log('click el'); }\n        },\n        dblclick: {\n            element: 'body', //bind to the underlying body property on the panel\n            fn: function(){ console.log('dblclick body'); }\n        }\n    }\n});\n</code></pre>\n"},"eventsSuspended":{"!type":"number","!doc":"<p>Initial suspended call count. Incremented when <a href=\"#!/api/Ext.util.Observable-method-suspendEvents\" rel=\"Ext.util.Observable-method-suspendEvents\" class=\"docClass\">suspendEvents</a> is called, decremented when <a href=\"#!/api/Ext.util.Observable-method-resumeEvents\" rel=\"Ext.util.Observable-method-resumeEvents\" class=\"docClass\">resumeEvents</a> is called.</p>\n"},"hasListeners":{"!type":"?","!doc":"<p>This object holds a key for any event that has a listener. The listener may be set\ndirectly on the instance, or on its class or a super class (via <a href=\"#!/api/Ext.util.Observable-static-method-observe\" rel=\"Ext.util.Observable-static-method-observe\" class=\"docClass\">observe</a>) or\non the <a href=\"#!/api/Ext.app.EventBus\" rel=\"Ext.app.EventBus\" class=\"docClass\">MVC EventBus</a>. The values of this object are truthy\n(a non-zero number) and falsy (0 or undefined). They do not represent an exact count\nof listeners. The value for an event is truthy if the event must be fired and is\nfalsy if there is no need to fire the event.</p>\n\n<p>The intended use of this property is to avoid the expense of fireEvent calls when\nthere are no listeners. This can be particularly helpful when one would otherwise\nhave to call fireEvent hundreds or thousands of times. It is used like this:</p>\n\n<pre><code> if (this.hasListeners.foo) {\n     this.fireEvent('foo', this, arg1);\n }\n</code></pre>\n"},"isObservable":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated Observable, or subclass thereof.</p>\n"},"addEvents":{"!type":"fn(eventNames: ?|string) -> !this","!doc":"<p>Adds the specified events to the list of events which this Observable may fire.</p>\n"},"addManagedListener":{"!type":"fn(item: +Ext.util.Observable|+Ext.Element, ename: ?|string, fn?: fn(), scope?: ?, options?: ?) -> ?","!doc":"<p>Adds listeners to any Observable object (or <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a>) which are automatically removed when this Component is\ndestroyed.</p>\n"},"captureArgs":{"!type":"fn(o: ?, fn: ?, scope: ?) -> !this"},"clearListeners":{"!type":"fn() -> !this","!doc":"<p>Removes all listeners for this object including the managed listeners</p>\n"},"clearManagedListeners":{"!type":"fn() -> !this","!doc":"<p>Removes all managed listeners for this object.</p>\n"},"continueFireEvent":{"!type":"fn(eventName: string, args: [?], bubbles: bool) -> !this","!doc":"<p>Continue to fire event.</p>\n"},"createRelayer":{"!type":"fn(newName: string, beginEnd?: [?]) -> fn()","!doc":"<p>Creates an event handling function which refires the event from this object as the passed event name.</p>\n"},"enableBubble":{"!type":"fn(eventNames: string|[string]) -> !this","!doc":"<p>Enables events fired by this Observable to bubble up an owner hierarchy by calling <code>this.getBubbleTarget()</code> if\npresent. There is no implementation in the Observable base class.</p>\n\n<p>This is commonly used by Ext.Components to bubble events to owner Containers.\nSee <a href=\"#!/api/Ext.Component-method-getBubbleTarget\" rel=\"Ext.Component-method-getBubbleTarget\" class=\"docClass\">Ext.Component.getBubbleTarget</a>. The default implementation in <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> returns the\nComponent's immediate owner. But if a known target is required, this can be overridden to access the\nrequired target more quickly.</p>\n\n<p>Example:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Ext.overrides.form.field.Base', {\n    override: '<a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">Ext.form.field.Base</a>',\n\n    //  Add functionality to Field's initComponent to enable the change event to bubble\n    initComponent: function () {\n        this.callParent();\n        this.enableBubble('change');\n    }\n});\n\nvar myForm = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>', {\n    title: 'User Details',\n    items: [{\n        ...\n    }],\n    listeners: {\n        change: function() {\n            // Title goes red if form has been modified.\n            myForm.header.setStyle('color', 'red');\n        }\n    }\n});\n</code></pre>\n"},"fireEvent":{"!type":"fn(eventName: string, args: ?) -> bool","!doc":"<p>Fires the specified event with the passed parameters (minus the event name, plus the <code>options</code> object passed\nto <a href=\"#!/api/Ext.util.Observable-method-addListener\" rel=\"Ext.util.Observable-method-addListener\" class=\"docClass\">addListener</a>).</p>\n\n<p>An event may be set to bubble up an Observable parent hierarchy (See <a href=\"#!/api/Ext.Component-method-getBubbleTarget\" rel=\"Ext.Component-method-getBubbleTarget\" class=\"docClass\">Ext.Component.getBubbleTarget</a>) by\ncalling <a href=\"#!/api/Ext.util.Observable-method-enableBubble\" rel=\"Ext.util.Observable-method-enableBubble\" class=\"docClass\">enableBubble</a>.</p>\n"},"fireEventArgs":{"!type":"fn(eventName: string, args: [?]) -> bool","!doc":"<p>Fires the specified event with the passed parameter list.</p>\n\n<p>An event may be set to bubble up an Observable parent hierarchy (See <a href=\"#!/api/Ext.Component-method-getBubbleTarget\" rel=\"Ext.Component-method-getBubbleTarget\" class=\"docClass\">Ext.Component.getBubbleTarget</a>) by\ncalling <a href=\"#!/api/Ext.util.Observable-method-enableBubble\" rel=\"Ext.util.Observable-method-enableBubble\" class=\"docClass\">enableBubble</a>.</p>\n"},"getBubbleParent":{"!type":"fn() -> +Ext.util.Observable","!doc":"<p>Gets the bubbling parent for an Observable</p>\n"},"hasListener":{"!type":"fn(eventName: string) -> bool","!doc":"<p>Checks to see if this object has any listeners for a specified event, or whether the event bubbles. The answer\nindicates whether the event needs firing or not.</p>\n"},"mon":{"!type":"fn(item: +Ext.util.Observable|+Ext.Element, ename: ?|string, fn?: fn(), scope?: ?, options?: ?) -> ?","!doc":"<p>Shorthand for <a href=\"#!/api/Ext.util.Observable-method-addManagedListener\" rel=\"Ext.util.Observable-method-addManagedListener\" class=\"docClass\">addManagedListener</a>.</p>\n"},"mun":{"!type":"fn(item: +Ext.util.Observable|+Ext.Element, ename: ?|string, fn?: fn(), scope?: ?) -> !this","!doc":"<p>Shorthand for <a href=\"#!/api/Ext.util.Observable-method-removeManagedListener\" rel=\"Ext.util.Observable-method-removeManagedListener\" class=\"docClass\">removeManagedListener</a>.</p>\n"},"on":{"!type":"fn(eventName: string|?, fn?: fn(), scope?: ?, options?: ?) -> ?","!doc":"<p>Shorthand for <a href=\"#!/api/Ext.util.Observable-method-addListener\" rel=\"Ext.util.Observable-method-addListener\" class=\"docClass\">addListener</a>.</p>\n"},"prepareClass":{"!type":"fn(T: fn()) -> !this","!doc":"<p>Prepares a given class for observable instances. This method is called when a\nclass derives from this class or uses this class as a mixin.</p>\n"},"relayEvents":{"!type":"fn(origin: ?, events: [string], prefix?: string) -> ?","!doc":"<p>Relays selected events from the specified Observable as if the events were fired by <code>this</code>.</p>\n\n<p>For example if you are extending Grid, you might decide to forward some events from store.\nSo you can do this inside your initComponent:</p>\n\n<pre><code>this.relayEvents(this.getStore(), ['load']);\n</code></pre>\n\n<p>The grid instance will then have an observable 'load' event which will be passed the\nparameters of the store's load event and any function fired with the grid's load event\nwould have access to the grid using the <code>this</code> keyword.</p>\n"},"removeListener":{"!type":"fn(eventName: string, fn: fn(), scope?: ?) -> !this","!doc":"<p>Removes an event handler.</p>\n"},"removeManagedListener":{"!type":"fn(item: +Ext.util.Observable|+Ext.Element, ename: ?|string, fn?: fn(), scope?: ?) -> !this","!doc":"<p>Removes listeners that were added by the <a href=\"#!/api/Ext.util.Observable-method-mon\" rel=\"Ext.util.Observable-method-mon\" class=\"docClass\">mon</a> method.</p>\n"},"resumeEvent":{"!type":"fn(eventName: string) -> !this","!doc":"<p>Resumes firing of the named event(s).</p>\n\n<p>After calling this method to resume events, the events will fire when requested to fire.</p>\n\n<p><strong>Note that if the <a href=\"#!/api/Ext.util.Observable-method-suspendEvent\" rel=\"Ext.util.Observable-method-suspendEvent\" class=\"docClass\">suspendEvent</a> method is called multiple times for a certain event,\nthis converse method will have to be called the same number of times for it to resume firing.</strong></p>\n"},"resumeEvents":{"!type":"fn() -> !this","!doc":"<p>Resumes firing events (see <a href=\"#!/api/Ext.util.Observable-method-suspendEvents\" rel=\"Ext.util.Observable-method-suspendEvents\" class=\"docClass\">suspendEvents</a>).</p>\n\n<p>If events were suspended using the <code>queueSuspended</code> parameter, then all events fired\nduring event suspension will be sent to any listeners now.</p>\n"},"suspendEvent":{"!type":"fn(eventName: string) -> !this","!doc":"<p>Suspends firing of the named event(s).</p>\n\n<p>After calling this method to suspend events, the events will no longer fire when requested to fire.</p>\n\n<p><strong>Note that if this is called multiple times for a certain event, the converse method\n<a href=\"#!/api/Ext.util.Observable-method-resumeEvent\" rel=\"Ext.util.Observable-method-resumeEvent\" class=\"docClass\">resumeEvent</a> will have to be called the same number of times for it to resume firing.</strong></p>\n"},"suspendEvents":{"!type":"fn(queueSuspended: bool) -> !this","!doc":"<p>Suspends the firing of all events. (see <a href=\"#!/api/Ext.util.Observable-method-resumeEvents\" rel=\"Ext.util.Observable-method-resumeEvents\" class=\"docClass\">resumeEvents</a>)</p>\n"},"un":{"!type":"fn(eventName: string, fn: fn(), scope?: ?) -> !this","!doc":"<p>Shorthand for <a href=\"#!/api/Ext.util.Observable-method-removeListener\" rel=\"Ext.util.Observable-method-removeListener\" class=\"docClass\">removeListener</a>.</p>\n"},"addListener":{"!type":"fn(eventName: string|?, fn?: fn(), scope?: ?, options?: ?) -> ?","!doc":"<p>Appends an event handler to this object.  For example:</p>\n\n<pre><code>myGridPanel.on(\"mouseover\", this.onMouseOver, this);\n</code></pre>\n\n<p>The method also allows for a single argument to be passed which is a config object\ncontaining properties which specify multiple events. For example:</p>\n\n<pre><code>myGridPanel.on({\n    cellClick: this.onCellClick,\n    mouseover: this.onMouseOver,\n    mouseout: this.onMouseOut,\n    scope: this // Important. Ensure \"this\" is correct during handler execution\n});\n</code></pre>\n\n<p>One can also specify options for each event handler separately:</p>\n\n<pre><code>myGridPanel.on({\n    cellClick: {fn: this.onCellClick, scope: this, single: true},\n    mouseover: {fn: panel.onMouseOver, scope: panel}\n});\n</code></pre>\n\n<p><em>Names</em> of methods in a specified scope may also be used. Note that\n<code>scope</code> MUST be specified to use this option:</p>\n\n<pre><code>myGridPanel.on({\n    cellClick: {fn: 'onCellClick', scope: this, single: true},\n    mouseover: {fn: 'onMouseOver', scope: panel}\n});\n</code></pre>\n"},"removeManagedListenerItem":{"!type":"fn(isClear: bool, managedListener: ?) -> !this","!doc":"<p>Remove a single managed listener item</p>\n"}},"listeners":{"!type":"?","!doc":"<p>A config object containing one or more event handlers to be added to this object during initialization. This\nshould be a valid listeners config object as specified in the <a href=\"#!/api/Ext.util.Observable-method-addListener\" rel=\"Ext.util.Observable-method-addListener\" class=\"docClass\">addListener</a> example for attaching multiple\nhandlers at once.</p>\n\n<p><strong>DOM events from Ext JS <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Components</a></strong></p>\n\n<p>While <em>some</em> Ext JS Component classes export selected DOM events (e.g. \"click\", \"mouseover\" etc), this is usually\nonly done when extra value can be added. For example the <a href=\"#!/api/Ext.view.View\" rel=\"Ext.view.View\" class=\"docClass\">DataView</a>'s <strong><code><a href=\"#!/api/Ext.view.View-event-itemclick\" rel=\"Ext.view.View-event-itemclick\" class=\"docClass\">itemclick</a></code></strong> event passing the node clicked on. To access DOM events directly from a\nchild element of a Component, we need to specify the <code>element</code> option to identify the Component property to add a\nDOM listener to:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>({\n    width: 400,\n    height: 200,\n    dockedItems: [{\n        xtype: 'toolbar'\n    }],\n    listeners: {\n        click: {\n            element: 'el', //bind to the underlying el property on the panel\n            fn: function(){ console.log('click el'); }\n        },\n        dblclick: {\n            element: 'body', //bind to the underlying body property on the panel\n            fn: function(){ console.log('dblclick body'); }\n        }\n    }\n});\n</code></pre>\n"},"eventsSuspended":{"!type":"number","!doc":"<p>Initial suspended call count. Incremented when <a href=\"#!/api/Ext.util.Observable-method-suspendEvents\" rel=\"Ext.util.Observable-method-suspendEvents\" class=\"docClass\">suspendEvents</a> is called, decremented when <a href=\"#!/api/Ext.util.Observable-method-resumeEvents\" rel=\"Ext.util.Observable-method-resumeEvents\" class=\"docClass\">resumeEvents</a> is called.</p>\n"},"hasListeners":{"!type":"?","!doc":"<p>This object holds a key for any event that has a listener. The listener may be set\ndirectly on the instance, or on its class or a super class (via <a href=\"#!/api/Ext.util.Observable-static-method-observe\" rel=\"Ext.util.Observable-static-method-observe\" class=\"docClass\">observe</a>) or\non the <a href=\"#!/api/Ext.app.EventBus\" rel=\"Ext.app.EventBus\" class=\"docClass\">MVC EventBus</a>. The values of this object are truthy\n(a non-zero number) and falsy (0 or undefined). They do not represent an exact count\nof listeners. The value for an event is truthy if the event must be fired and is\nfalsy if there is no need to fire the event.</p>\n\n<p>The intended use of this property is to avoid the expense of fireEvent calls when\nthere are no listeners. This can be particularly helpful when one would otherwise\nhave to call fireEvent hundreds or thousands of times. It is used like this:</p>\n\n<pre><code> if (this.hasListeners.foo) {\n     this.fireEvent('foo', this, arg1);\n }\n</code></pre>\n"},"isObservable":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated Observable, or subclass thereof.</p>\n"},"addEvents":{"!type":"fn(eventNames: ?|string) -> !this","!doc":"<p>Adds the specified events to the list of events which this Observable may fire.</p>\n"},"addListener":{"!type":"fn(eventName: string|?, fn?: fn(), scope?: ?, options?: ?) -> ?","!doc":"<p>Appends an event handler to this object.  For example:</p>\n\n<pre><code>myGridPanel.on(\"mouseover\", this.onMouseOver, this);\n</code></pre>\n\n<p>The method also allows for a single argument to be passed which is a config object\ncontaining properties which specify multiple events. For example:</p>\n\n<pre><code>myGridPanel.on({\n    cellClick: this.onCellClick,\n    mouseover: this.onMouseOver,\n    mouseout: this.onMouseOut,\n    scope: this // Important. Ensure \"this\" is correct during handler execution\n});\n</code></pre>\n\n<p>One can also specify options for each event handler separately:</p>\n\n<pre><code>myGridPanel.on({\n    cellClick: {fn: this.onCellClick, scope: this, single: true},\n    mouseover: {fn: panel.onMouseOver, scope: panel}\n});\n</code></pre>\n\n<p><em>Names</em> of methods in a specified scope may also be used. Note that\n<code>scope</code> MUST be specified to use this option:</p>\n\n<pre><code>myGridPanel.on({\n    cellClick: {fn: 'onCellClick', scope: this, single: true},\n    mouseover: {fn: 'onMouseOver', scope: panel}\n});\n</code></pre>\n"},"addManagedListener":{"!type":"fn(item: +Ext.util.Observable|+Ext.Element, ename: ?|string, fn?: fn(), scope?: ?, options?: ?) -> ?","!doc":"<p>Adds listeners to any Observable object (or <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a>) which are automatically removed when this Component is\ndestroyed.</p>\n"},"captureArgs":{"!type":"fn(o: ?, fn: ?, scope: ?) -> !this"},"clearListeners":{"!type":"fn() -> !this","!doc":"<p>Removes all listeners for this object including the managed listeners</p>\n"},"clearManagedListeners":{"!type":"fn() -> !this","!doc":"<p>Removes all managed listeners for this object.</p>\n"},"continueFireEvent":{"!type":"fn(eventName: string, args: [?], bubbles: bool) -> !this","!doc":"<p>Continue to fire event.</p>\n"},"createRelayer":{"!type":"fn(newName: string, beginEnd?: [?]) -> fn()","!doc":"<p>Creates an event handling function which refires the event from this object as the passed event name.</p>\n"},"enableBubble":{"!type":"fn(eventNames: string|[string]) -> !this","!doc":"<p>Enables events fired by this Observable to bubble up an owner hierarchy by calling <code>this.getBubbleTarget()</code> if\npresent. There is no implementation in the Observable base class.</p>\n\n<p>This is commonly used by Ext.Components to bubble events to owner Containers.\nSee <a href=\"#!/api/Ext.Component-method-getBubbleTarget\" rel=\"Ext.Component-method-getBubbleTarget\" class=\"docClass\">Ext.Component.getBubbleTarget</a>. The default implementation in <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> returns the\nComponent's immediate owner. But if a known target is required, this can be overridden to access the\nrequired target more quickly.</p>\n\n<p>Example:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Ext.overrides.form.field.Base', {\n    override: '<a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">Ext.form.field.Base</a>',\n\n    //  Add functionality to Field's initComponent to enable the change event to bubble\n    initComponent: function () {\n        this.callParent();\n        this.enableBubble('change');\n    }\n});\n\nvar myForm = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>', {\n    title: 'User Details',\n    items: [{\n        ...\n    }],\n    listeners: {\n        change: function() {\n            // Title goes red if form has been modified.\n            myForm.header.setStyle('color', 'red');\n        }\n    }\n});\n</code></pre>\n"},"fireEvent":{"!type":"fn(eventName: string, args: ?) -> bool","!doc":"<p>Fires the specified event with the passed parameters (minus the event name, plus the <code>options</code> object passed\nto <a href=\"#!/api/Ext.util.Observable-method-addListener\" rel=\"Ext.util.Observable-method-addListener\" class=\"docClass\">addListener</a>).</p>\n\n<p>An event may be set to bubble up an Observable parent hierarchy (See <a href=\"#!/api/Ext.Component-method-getBubbleTarget\" rel=\"Ext.Component-method-getBubbleTarget\" class=\"docClass\">Ext.Component.getBubbleTarget</a>) by\ncalling <a href=\"#!/api/Ext.util.Observable-method-enableBubble\" rel=\"Ext.util.Observable-method-enableBubble\" class=\"docClass\">enableBubble</a>.</p>\n"},"fireEventArgs":{"!type":"fn(eventName: string, args: [?]) -> bool","!doc":"<p>Fires the specified event with the passed parameter list.</p>\n\n<p>An event may be set to bubble up an Observable parent hierarchy (See <a href=\"#!/api/Ext.Component-method-getBubbleTarget\" rel=\"Ext.Component-method-getBubbleTarget\" class=\"docClass\">Ext.Component.getBubbleTarget</a>) by\ncalling <a href=\"#!/api/Ext.util.Observable-method-enableBubble\" rel=\"Ext.util.Observable-method-enableBubble\" class=\"docClass\">enableBubble</a>.</p>\n"},"getBubbleParent":{"!type":"fn() -> +Ext.util.Observable","!doc":"<p>Gets the bubbling parent for an Observable</p>\n"},"hasListener":{"!type":"fn(eventName: string) -> bool","!doc":"<p>Checks to see if this object has any listeners for a specified event, or whether the event bubbles. The answer\nindicates whether the event needs firing or not.</p>\n"},"mon":{"!type":"fn(item: +Ext.util.Observable|+Ext.Element, ename: ?|string, fn?: fn(), scope?: ?, options?: ?) -> ?","!doc":"<p>Shorthand for <a href=\"#!/api/Ext.util.Observable-method-addManagedListener\" rel=\"Ext.util.Observable-method-addManagedListener\" class=\"docClass\">addManagedListener</a>.</p>\n"},"mun":{"!type":"fn(item: +Ext.util.Observable|+Ext.Element, ename: ?|string, fn?: fn(), scope?: ?) -> !this","!doc":"<p>Shorthand for <a href=\"#!/api/Ext.util.Observable-method-removeManagedListener\" rel=\"Ext.util.Observable-method-removeManagedListener\" class=\"docClass\">removeManagedListener</a>.</p>\n"},"on":{"!type":"fn(eventName: string|?, fn?: fn(), scope?: ?, options?: ?) -> ?","!doc":"<p>Shorthand for <a href=\"#!/api/Ext.util.Observable-method-addListener\" rel=\"Ext.util.Observable-method-addListener\" class=\"docClass\">addListener</a>.</p>\n"},"prepareClass":{"!type":"fn(T: fn()) -> !this","!doc":"<p>Prepares a given class for observable instances. This method is called when a\nclass derives from this class or uses this class as a mixin.</p>\n"},"relayEvents":{"!type":"fn(origin: ?, events: [string], prefix?: string) -> ?","!doc":"<p>Relays selected events from the specified Observable as if the events were fired by <code>this</code>.</p>\n\n<p>For example if you are extending Grid, you might decide to forward some events from store.\nSo you can do this inside your initComponent:</p>\n\n<pre><code>this.relayEvents(this.getStore(), ['load']);\n</code></pre>\n\n<p>The grid instance will then have an observable 'load' event which will be passed the\nparameters of the store's load event and any function fired with the grid's load event\nwould have access to the grid using the <code>this</code> keyword.</p>\n"},"removeListener":{"!type":"fn(eventName: string, fn: fn(), scope?: ?) -> !this","!doc":"<p>Removes an event handler.</p>\n"},"removeManagedListener":{"!type":"fn(item: +Ext.util.Observable|+Ext.Element, ename: ?|string, fn?: fn(), scope?: ?) -> !this","!doc":"<p>Removes listeners that were added by the <a href=\"#!/api/Ext.util.Observable-method-mon\" rel=\"Ext.util.Observable-method-mon\" class=\"docClass\">mon</a> method.</p>\n"},"removeManagedListenerItem":{"!type":"fn(isClear: bool, managedListener: ?) -> !this","!doc":"<p>Remove a single managed listener item</p>\n"},"resumeEvent":{"!type":"fn(eventName: string) -> !this","!doc":"<p>Resumes firing of the named event(s).</p>\n\n<p>After calling this method to resume events, the events will fire when requested to fire.</p>\n\n<p><strong>Note that if the <a href=\"#!/api/Ext.util.Observable-method-suspendEvent\" rel=\"Ext.util.Observable-method-suspendEvent\" class=\"docClass\">suspendEvent</a> method is called multiple times for a certain event,\nthis converse method will have to be called the same number of times for it to resume firing.</strong></p>\n"},"resumeEvents":{"!type":"fn() -> !this","!doc":"<p>Resumes firing events (see <a href=\"#!/api/Ext.util.Observable-method-suspendEvents\" rel=\"Ext.util.Observable-method-suspendEvents\" class=\"docClass\">suspendEvents</a>).</p>\n\n<p>If events were suspended using the <code>queueSuspended</code> parameter, then all events fired\nduring event suspension will be sent to any listeners now.</p>\n"},"suspendEvent":{"!type":"fn(eventName: string) -> !this","!doc":"<p>Suspends firing of the named event(s).</p>\n\n<p>After calling this method to suspend events, the events will no longer fire when requested to fire.</p>\n\n<p><strong>Note that if this is called multiple times for a certain event, the converse method\n<a href=\"#!/api/Ext.util.Observable-method-resumeEvent\" rel=\"Ext.util.Observable-method-resumeEvent\" class=\"docClass\">resumeEvent</a> will have to be called the same number of times for it to resume firing.</strong></p>\n"},"suspendEvents":{"!type":"fn(queueSuspended: bool) -> !this","!doc":"<p>Suspends the firing of all events. (see <a href=\"#!/api/Ext.util.Observable-method-resumeEvents\" rel=\"Ext.util.Observable-method-resumeEvents\" class=\"docClass\">resumeEvents</a>)</p>\n"},"un":{"!type":"fn(eventName: string, fn: fn(), scope?: ?) -> !this","!doc":"<p>Shorthand for <a href=\"#!/api/Ext.util.Observable-method-removeListener\" rel=\"Ext.util.Observable-method-removeListener\" class=\"docClass\">removeListener</a>.</p>\n"},"!doc":"<p>Base class that provides a common interface for publishing events. Subclasses are expected to to have a property\n\"events\" with all the events defined, and, optionally, a property \"listeners\" with configured listeners defined.</p>\n\n<p>For example:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Employee', {\n    mixins: {\n        observable: '<a href=\"#!/api/Ext.util.Observable\" rel=\"Ext.util.Observable\" class=\"docClass\">Ext.util.Observable</a>'\n    },\n\n    constructor: function (config) {\n        // The Observable constructor copies all of the properties of `config` on\n        // to `this` using <a href=\"#!/api/Ext-method-apply\" rel=\"Ext-method-apply\" class=\"docClass\">Ext.apply</a>. Further, the `listeners` property is\n        // processed to add listeners.\n        //\n        this.mixins.observable.constructor.call(this, config);\n\n        this.addEvents(\n            'fired',\n            'quit'\n        );\n    }\n});\n</code></pre>\n\n<p>This could then be used like this:</p>\n\n<pre><code>var newEmployee = new Employee({\n    name: employeeName,\n    listeners: {\n        quit: function() {\n            // By default, \"this\" will be the object that fired the event.\n            alert(this.name + \" has quit!\");\n        }\n    }\n});\n</code></pre>\n","capture":{"!type":"fn(o: +Ext.util.Observable, fn: fn(), scope?: ?) -> !this","!doc":"<p>Starts capture on the specified Observable. All events will be passed to the supplied function with the event\nname + standard signature of the event <strong>before</strong> the event is fired. If the supplied function returns false,\nthe event will not fire.</p>\n"},"observe":{"!type":"fn(c: fn(), listeners: ?) -> !this","!doc":"<p>Sets observability on the passed class constructor.</p>\n\n<p>This makes any event fired on any instance of the passed class also fire a single event through\nthe <strong>class</strong> allowing for central handling of events on many instances at once.</p>\n\n<p>Usage:</p>\n\n<pre><code><a href=\"#!/api/Ext.util.Observable-static-method-observe\" rel=\"Ext.util.Observable-static-method-observe\" class=\"docClass\">Ext.util.Observable.observe</a>(<a href=\"#!/api/Ext.data.Connection\" rel=\"Ext.data.Connection\" class=\"docClass\">Ext.data.Connection</a>);\n<a href=\"#!/api/Ext.data.Connection-method-on\" rel=\"Ext.data.Connection-method-on\" class=\"docClass\">Ext.data.Connection.on</a>('beforerequest', function(con, options) {\n    console.log('Ajax request made to ' + options.url);\n});\n</code></pre>\n"},"releaseCapture":{"!type":"fn(o: +Ext.util.Observable) -> !this","!doc":"<p>Removes <strong>all</strong> added captures from the Observable.</p>\n"}},"Positionable":{"prototype":{"_alignRe":{"!type":"+RegExp"},"_positionTopLeft":{"!type":"[?]"},"convertPositionSpec":{"!type":"?","!doc":"<p>By default this method does nothing but return the position spec passed to it. In\nrtl mode it is overridden to convert \"l\" to \"r\" and vice versa when required.</p>\n"},"adjustForConstraints":{"!type":"fn(xy: ?, parent: ?) -> !this","!doc":"<p>private ==>  used outside of core\nTODO: currently only used by ToolTip. does this method belong here?</p>\n"},"alignTo":{"!type":"fn(element: +Ext.util.Positionable|+HTMLElement|string, position?: string, offsets?: [number], animate?: bool|?) -> +Ext.util.Positionable","!doc":"<p>Aligns the element with another element relative to the specified anchor points. If\nthe other element is the document it aligns it to the viewport. The position\nparameter is optional, and can be specified in any one of the following formats:</p>\n\n<ul>\n<li><strong>Blank</strong>: Defaults to aligning the element's top-left corner to the target's\nbottom-left corner (\"tl-bl\").</li>\n<li><strong>One anchor (deprecated)</strong>: The passed anchor position is used as the target\nelement's anchor point.  The element being aligned will position its top-left\ncorner (tl) to that point. <em>This method has been deprecated in favor of the newer\ntwo anchor syntax below</em>.</li>\n<li><strong>Two anchors</strong>: If two values from the table below are passed separated by a dash,\nthe first value is used as the element's anchor point, and the second value is\nused as the target's anchor point.</li>\n</ul>\n\n\n<p>In addition to the anchor points, the position parameter also supports the \"?\"\ncharacter. If \"?\" is passed at the end of the position string, the element will\nattempt to align as specified, but the position will be adjusted to constrain to\nthe viewport if necessary. Note that the element being aligned might be swapped to\nalign to a different position than that specified in order to enforce the viewport\nconstraints. Following are all of the supported anchor positions:</p>\n\n<pre>Value  Description\n-----  -----------------------------\ntl     The top left corner (default)\nt      The center of the top edge\ntr     The top right corner\nl      The center of the left edge\nc      In the center of the element\nr      The center of the right edge\nbl     The bottom left corner\nb      The center of the bottom edge\nbr     The bottom right corner\n</pre>\n\n\n<p>Example Usage:</p>\n\n<pre><code>// align el to other-el using the default positioning\n// (\"tl-bl\", non-constrained)\nel.alignTo(\"other-el\");\n\n// align the top left corner of el with the top right corner of other-el\n// (constrained to viewport)\nel.alignTo(\"other-el\", \"tr?\");\n\n// align the bottom right corner of el with the center left edge of other-el\nel.alignTo(\"other-el\", \"br-l?\");\n\n// align the center of el with the bottom left corner of other-el and\n// adjust the x position by -6 pixels (and the y position by 0)\nel.alignTo(\"other-el\", \"c-bl\", [-6, 0]);\n</code></pre>\n"},"anchorTo":{"!type":"fn(element: +Ext.util.Positionable|+HTMLElement|string, position?: string, offsets?: [number], animate?: bool|?, monitorScroll?: bool|number, callback?: fn()) -> +Ext.util.Positionable","!doc":"<p>Anchors an element to another element and realigns it when the window is resized.</p>\n"},"calculateAnchorXY":{"!type":"fn(anchor?: string, extraX?: number, extraY?: number, size?: ?) -> [number]","!doc":"<p>Calculates x,y coordinates specified by the anchor position on the element, adding\nextraX and extraY values.</p>\n"},"calculateConstrainedPosition":{"!type":"fn(constrainTo?: string|+HTMLElement|+Ext.Element|+Ext.util.Region, proposedPosition?: [number], local?: bool, proposedSize?: [number]) -> [number]","!doc":"<p>Calculates the new [x,y] position to move this Positionable into a constrain region.</p>\n\n<p>By default, this Positionable is constrained to be within the container it was added to, or the element it was\nrendered to.</p>\n\n<p>Priority is given to constraining the top and left within the constraint.</p>\n\n<p>An alternative constraint may be passed.</p>\n"},"getAlignToXY":{"!type":"fn(element: +Ext.util.Positionable|+HTMLElement|string, position?: string, offsets?: [number]) -> [number]","!doc":"<p>Gets the x,y coordinates to align this element with another element. See\n<a href=\"#!/api/Ext.util.Positionable-method-alignTo\" rel=\"Ext.util.Positionable-method-alignTo\" class=\"docClass\">alignTo</a> for more info on the supported position values.</p>\n"},"getAnchor":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"getAnchorXY":{"!type":"fn(anchor?: string, local?: bool, size?: ?) -> [number]","!doc":"<p>Gets the x,y coordinates specified by the anchor position on the element.</p>\n"},"getBox":{"!type":"fn(contentBox?: bool, local?: bool) -> ?","!doc":"<p>Return an object defining the area of this Element which can be passed to\n<a href=\"#!/api/Ext.util.Positionable-method-setBox\" rel=\"Ext.util.Positionable-method-setBox\" class=\"docClass\">setBox</a> to set another Element's size/location to match this element.</p>\n"},"getConstrainVector":{"!type":"fn(constrainTo?: +Ext.util.Positionable|+HTMLElement|string|+Ext.util.Region, proposedPosition?: [number], proposedSize?: [number]) -> [number]|bool","!doc":"<p>Returns the <code>[X, Y]</code> vector by which this Positionable's element must be translated to make a best\nattempt to constrain within the passed constraint. Returns <code>false</code> if the element\ndoes not need to be moved.</p>\n\n<p>Priority is given to constraining the top and left within the constraint.</p>\n\n<p>The constraint may either be an existing element into which the element is to be\nconstrained, or a <a href=\"#!/api/Ext.util.Region\" rel=\"Ext.util.Region\" class=\"docClass\">Region</a> into which this element is to be\nconstrained.</p>\n\n<p>By default, any extra shadow around the element is <strong>not</strong> included in the constrain calculations - the edges\nof the element are used as the element bounds. To constrain the shadow within the constrain region, set the\n<code>constrainShadow</code> property on this element to <code>true</code>.</p>\n"},"getOffsetsTo":{"!type":"fn(offsetsTo: +Ext.util.Positionable|+HTMLElement|string) -> [number]","!doc":"<p>Returns the offsets of this element from the passed element. The element must both\nbe part of the DOM tree and not have display:none to have page coordinates.</p>\n"},"getRegion":{"!type":"fn() -> +Ext.util.Region","!doc":"<p>Returns a region object that defines the area of this element.</p>\n"},"getViewRegion":{"!type":"fn() -> +Ext.util.Region","!doc":"<p>Returns the <strong>content</strong> region of this element. That is the region within the borders\nand padding.</p>\n"},"move":{"!type":"fn(direction: string, distance: number, animate?: bool|?) -> !this","!doc":"<p>Move the element relative to its current position.</p>\n"},"removeAnchor":{"!type":"fn() -> +Ext.util.Positionable","!doc":"<p>Remove any anchor to this element. See <a href=\"#!/api/Ext.util.Positionable-method-anchorTo\" rel=\"Ext.util.Positionable-method-anchorTo\" class=\"docClass\">anchorTo</a>.</p>\n"},"setBox":{"!type":"fn(box: ?, animate?: bool|?) -> +Ext.util.Positionable","!doc":"<p>Sets the element's box. If animate is true then x, y, width, and height will be\nanimated concurrently.</p>\n"},"setRegion":{"!type":"fn(region: +Ext.util.Region, animate?: bool|?) -> +Ext.util.Positionable","!doc":"<p>Sets the element's position and size to the specified region. If animation is true\nthen width, height, x and y will be animated concurrently.</p>\n"},"translatePoints":{"!type":"fn(x: number|[?], y?: number) -> ?","!doc":"<p>Translates the passed page coordinates into left/top css values for the element</p>\n"},"translateXY":{"!type":"fn(x: number|[?], y?: number) -> ?","!doc":"<p>Translates the passed page coordinates into x and y css values for the element</p>\n"},"afterSetPosition":{"!type":"fn() -> !this","!doc":"<p>Stub implementation called after positioning.\nMay be implemented in subclasses. AbstractComponent has an implementation.</p>\n"},"getAnchorToXY":{"!type":"fn(el: +Ext.dom.Element, anchor?: string, local?: bool, size?: ?) -> [number]","!doc":"<p>Gets the x,y coordinates of an element specified by the anchor position on the\nelement.</p>\n"},"getBorderPadding":{"!type":"fn() -> ?","!doc":"<p>Returns the size of the element's borders and padding.</p>\n"},"getLocalX":{"!type":"fn() -> number","!doc":"<p>Returns the x coordinate of this element reletive to its <code>offsetParent</code>.</p>\n"},"getLocalXY":{"!type":"fn() -> [number]","!doc":"<p>Returns the x and y coordinates of this element relative to its <code>offsetParent</code>.</p>\n"},"getLocalY":{"!type":"fn() -> number","!doc":"<p>Returns the y coordinate of this element reletive to its <code>offsetParent</code>.</p>\n"},"getX":{"!type":"fn() -> number","!doc":"<p>Gets the current X position of the DOM element based on page coordinates.</p>\n"},"getXY":{"!type":"fn() -> [number]","!doc":"<p>Gets the current position of the DOM element based on page coordinates.</p>\n"},"getY":{"!type":"fn() -> number","!doc":"<p>Gets the current Y position of the DOM element based on page coordinates.</p>\n"},"setLocalX":{"!type":"fn(x: number) -> +Ext.util.Positionable","!doc":"<p>Sets the local x coordinate of this element using CSS style. When used on an\nabsolute positioned element this method is symmetrical with <a href=\"#!/api/Ext.util.Positionable-method-getLocalX\" rel=\"Ext.util.Positionable-method-getLocalX\" class=\"docClass\">getLocalX</a>, but\nmay not be symmetrical when used on a relatively positioned element.</p>\n"},"setLocalXY":{"!type":"fn(x: number|[?], y?: number) -> +Ext.util.Positionable","!doc":"<p>Sets the local x and y coordinates of this element using CSS style. When used on an\nabsolute positioned element this method is symmetrical with <a href=\"#!/api/Ext.util.Positionable-method-getLocalXY\" rel=\"Ext.util.Positionable-method-getLocalXY\" class=\"docClass\">getLocalXY</a>, but\nmay not be symmetrical when used on a relatively positioned element.</p>\n"},"setLocalY":{"!type":"fn(y: number) -> +Ext.util.Positionable","!doc":"<p>Sets the local y coordinate of this element using CSS style. When used on an\nabsolute positioned element this method is symmetrical with <a href=\"#!/api/Ext.util.Positionable-method-getLocalY\" rel=\"Ext.util.Positionable-method-getLocalY\" class=\"docClass\">getLocalY</a>, but\nmay not be symmetrical when used on a relatively positioned element.</p>\n"},"setX":{"!type":"fn(The: number, animate?: bool|?) -> +Ext.util.Positionable","!doc":"<p>Sets the X position of the DOM element based on page coordinates.</p>\n"},"setXY":{"!type":"fn(pos: [number], animate?: bool|?) -> +Ext.util.Positionable","!doc":"<p>Sets the position of the DOM element in page coordinates.</p>\n"},"setY":{"!type":"fn(The: number, animate?: bool|?) -> +Ext.util.Positionable","!doc":"<p>Sets the Y position of the DOM element based on page coordinates.</p>\n"}},"!doc":"<p>This mixin provides a common interface for objects that can be positioned, e.g.\n<a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Components</a> and <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Elements</a></p>\n"},"ElementContainer":{"prototype":{"!proto":"Ext.Base.prototype","childEls":{"!type":"[?]"},"addChildEls":{"!type":"fn() -> !this","!doc":"<p>Adds each argument passed to this method to the <a href=\"#!/api/Ext.AbstractComponent-cfg-childEls\" rel=\"Ext.AbstractComponent-cfg-childEls\" class=\"docClass\">childEls</a> array.</p>\n"},"applyChildEls":{"!type":"fn(el: ?, id: ?) -> !this","!doc":"<p>Sets references to elements inside the component.</p>\n"},"destroy":{"!type":"fn() -> !this"},"getChildEls":{"!type":"fn() -> !this"},"getClassChildEls":{"!type":"fn(cls: ?) -> !this"},"prune":{"!type":"fn(childEls: ?, shared: ?) -> !this"},"removeChildEls":{"!type":"fn(testFn: fn()) -> !this","!doc":"<p>Removes items in the childEls array based on the return value of a supplied test\nfunction. The function is called with a entry in childEls and if the test function\nreturn true, that entry is removed. If false, that entry is kept.</p>\n"}},"!doc":"<p>This mixin enables classes to declare relationships to child elements and provides the\nmechanics for acquiring the <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">elements</a> and storing them on an object\ninstance as properties.</p>\n\n<p>This class is used by <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">components</a> and <a href=\"#!/api/Ext.layout.container.Container\" rel=\"Ext.layout.container.Container\" class=\"docClass\">container layouts</a> to\nmanage their child elements.</p>\n\n<p>A typical component that uses these features might look something like this:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Ext.ux.SomeComponent', {\n     extend: '<a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>',\n\n     childEls: [\n         'bodyEl'\n     ],\n\n     renderTpl: [\n         '&lt;div id=\"{id}-bodyEl\"&gt;&lt;/div&gt;'\n     ],\n\n     // ...\n });\n</code></pre>\n\n<p>The <code>childEls</code> array lists one or more relationships to child elements managed by the\ncomponent. The items in this array can be either of the following types:</p>\n\n<ul>\n<li>String: the id suffix and property name in one. For example, \"bodyEl\" in the above\nexample means a \"bodyEl\" property will be added to the instance with the result of\n<a href=\"#!/api/Ext-method-get\" rel=\"Ext-method-get\" class=\"docClass\">Ext.get</a> given \"componentId-bodyEl\" where \"componentId\" is the component instance's\nid.</li>\n<li>Object: with a <code>name</code> property that names the instance property for the element, and\none of the following additional properties:\n\n<ul>\n<li> <code>id</code>: The full id of the child element.</li>\n<li> <code>itemId</code>: The suffix part of the id to which \"componentId-\" is prepended.</li>\n<li> <code>select</code>: A selector that will be passed to <a href=\"#!/api/Ext-method-select\" rel=\"Ext-method-select\" class=\"docClass\">Ext.select</a>.</li>\n<li> <code>selectNode</code>: A selector that will be passed to <a href=\"#!/api/Ext.dom.Query-method-selectNode\" rel=\"Ext.dom.Query-method-selectNode\" class=\"docClass\">Ext.DomQuery.selectNode</a>.</li>\n</ul>\n</li>\n</ul>\n\n\n<p>The example above could have used this instead to achieve the same result:</p>\n\n<pre><code> childEls: [\n     { name: 'bodyEl', itemId: 'bodyEl' }\n ]\n</code></pre>\n\n<p>When using <code>select</code>, the property will be an instance of <a href=\"#!/api/Ext.dom.CompositeElement\" rel=\"Ext.dom.CompositeElement\" class=\"docClass\">Ext.CompositeElement</a>. In\nall other cases, the property will be an <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a> or <code>null</code> if not found.</p>\n\n<p>Care should be taken when using <code>select</code> or <code>selectNode</code> to find child elements. The\nfollowing issues should be considered:</p>\n\n<ul>\n<li>Performance: using selectors can be slower than id lookup by a factor 10x or more.</li>\n<li>Over-selecting: selectors are applied after the DOM elements for all children have\nbeen rendered, so selectors can match elements from child components (including nested\nversions of the same component) accidentally.</li>\n</ul>\n\n\n<p>This above issues are most important when using <code>select</code> since it returns multiple\nelements.</p>\n\n<p><strong>IMPORTANT</strong>\nUnlike a <code>renderTpl</code> where there is a single value for an instance, <code>childEls</code> are aggregated\nup the class hierarchy so that they are effectively inherited. In other words, if a\nclass where to derive from <code>Ext.ux.SomeComponent</code> in the example above, it could also\nhave a <code>childEls</code> property in the same way as <code>Ext.ux.SomeComponent</code>.</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Ext.ux.AnotherComponent', {\n     extend: 'Ext.ux.SomeComponent',\n\n     childEls: [\n         // 'bodyEl' is inherited\n         'innerEl'\n     ],\n\n     renderTpl: [\n         '&lt;div id=\"{id}-bodyEl\"&gt;'\n             '&lt;div id=\"{id}-innerEl\"&gt;&lt;/div&gt;'\n         '&lt;/div&gt;'\n     ],\n\n     // ...\n });\n</code></pre>\n\n<p>The <code>renderTpl</code> contains both child elements and unites them in the desired markup, but\nthe <code>childEls</code> only contains the new child element. The <a href=\"#!/api/Ext.util.ElementContainer-method-applyChildEls\" rel=\"Ext.util.ElementContainer-method-applyChildEls\" class=\"docClass\">applyChildEls</a> method\ntakes care of looking up all <code>childEls</code> for an instance and considers <code>childEls</code>\nproperties on all the super classes and mixins.</p>\n","!type":"fn()"},"Renderable":{"prototype":{"frameCls":{"!type":"string"},"frameElNames":{"!type":"[?]"},"frameIdRegex":{"!type":"+RegExp"},"frameInfoCache":{"!type":"?","!doc":"<p>Cache the frame information object so as not to cause style recalculations</p>\n"},"frameTableTpl":{"!type":"?"},"frameTpl":{"!type":"[?]"},"afterFirstLayout":{"!type":"fn(width: ?, height: ?) -> !this"},"afterRender":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior after rendering is complete. At this stage the Component’s Element\nwill have been styled according to the configuration, will have had any configured CSS class\nnames added, and will be in the configured visibility and the configured enable state.</p>\n"},"applyRenderSelectors":{"!type":"fn() -> !this","!doc":"<p>Sets references to elements inside the component. This applies <a href=\"#!/api/Ext.AbstractComponent-cfg-renderSelectors\" rel=\"Ext.AbstractComponent-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a>\nas well as <a href=\"#!/api/Ext.AbstractComponent-cfg-childEls\" rel=\"Ext.AbstractComponent-cfg-childEls\" class=\"docClass\">childEls</a>.</p>\n"},"beforeRender":{"!type":"fn() -> !this"},"doApplyRenderTpl":{"!type":"fn(out: ?, values: ?) -> !this","!doc":"<p>Called from the selected frame generation template to insert this Component's inner structure inside the framing structure.</p>\n\n<p>When framing is used, a selected frame generation template is used as the primary template of the <a href=\"#!/api/Ext.util.Renderable-method-getElConfig\" rel=\"Ext.util.Renderable-method-getElConfig\" class=\"docClass\">getElConfig</a> instead\nof the configured <a href=\"#!/api/Ext.AbstractComponent-cfg-renderTpl\" rel=\"Ext.AbstractComponent-cfg-renderTpl\" class=\"docClass\">renderTpl</a>. The renderTpl is invoked by this method which is injected into the framing template.</p>\n"},"doAutoRender":{"!type":"fn() -> !this","!doc":"<p>Handles autoRender.\nFloating Components may have an ownerCt. If they are asking to be constrained, constrain them within that\nownerCt, and have their z-index managed locally. Floating Components are always rendered to document.body</p>\n"},"doRenderContent":{"!type":"fn(out: ?, renderData: ?) -> !this"},"doRenderFramingDockedItems":{"!type":"fn(out: ?, renderData: ?, after: ?) -> !this"},"ensureAttachedToBody":{"!type":"fn(runLayout?: bool) -> !this","!doc":"<p>Ensures that this component is attached to <code>document.body</code>. If the component was\nrendered to <a href=\"#!/api/Ext-method-getDetachedBody\" rel=\"Ext-method-getDetachedBody\" class=\"docClass\">Ext.getDetachedBody</a>, then it will be appended to <code>document.body</code>.\nAny configured position is also restored.</p>\n"},"finishRender":{"!type":"fn(containerIdx: number) -> !this","!doc":"<p>This method visits the rendered component tree in a \"top-down\" order. That is, this\ncode runs on a parent component before running on a child. This method calls the\n<a href=\"#!/api/Ext.util.Renderable-method-onRender\" rel=\"Ext.util.Renderable-method-onRender\" class=\"docClass\">onRender</a> method of each component.</p>\n"},"finishRenderChildren":{"!type":"fn() -> !this"},"getElConfig":{"!type":"fn() -> !this"},"getFrameInfo":{"!type":"fn() -> !this","!doc":"<p>On render, reads an encoded style attribute, \"filter\" from the style of this Component's element.\nThis information is memoized based upon the CSS class name of this Component's element.\nBecause child Components are rendered as textual HTML as part of the topmost Container, a dummy div is inserted\ninto the document to receive the document element's CSS class name, and therefore style attributes.</p>\n"},"getFrameRenderData":{"!type":"fn() -> !this"},"getFrameTpl":{"!type":"fn(table: ?) -> !this"},"getFramingInfoCls":{"!type":"fn() -> !this"},"getInsertPosition":{"!type":"fn(position: string|number|+Ext.dom.Element|+HTMLElement) -> +HTMLElement","!doc":"<p>This function takes the position argument passed to onRender and returns a\nDOM element that you can use in the insertBefore.</p>\n"},"getRenderTree":{"!type":"fn() -> !this"},"getStyleProxy":{"!type":"fn(cls: ?) -> !this","!doc":"<p>Returns an offscreen div with the same class name as the element this is being rendered.\nThis is because child item rendering takes place in a detached div which, being not\npart of the document, has no styling.</p>\n"},"initContainer":{"!type":"fn(container: ?) -> !this"},"initFrame":{"!type":"fn() -> !this"},"initFramingTpl":{"!type":"fn(table: ?) -> !this","!doc":"<p>Create the framingTpl from the string.\nPoke in a reference to applyRenderTpl(frameInfo, out)</p>\n"},"initRenderData":{"!type":"fn() -> ?","!doc":"<p>Initialized the renderData to be used when rendering the renderTpl.</p>\n"},"initRenderTpl":{"!type":"fn() -> +Ext.XTemplate","!doc":"<p>Initializes the renderTpl.</p>\n"},"onRender":{"!type":"fn(parentNode: +Ext.core.Element, containerIdx: number) -> !this","!doc":"<p>Template method called when this Component's DOM structure is created.</p>\n\n<p>At this point, this Component's (and all descendants') DOM structure <em>exists</em> but it has not\nbeen layed out (positioned and sized).</p>\n\n<p>Subclasses which override this to gain access to the structure at render time should\ncall the parent class's method before attempting to access any child elements of the Component.</p>\n"},"render":{"!type":"fn(container?: +Ext.Element|+HTMLElement|string, position?: string|number) -> !this","!doc":"<p>Renders the Component into the passed HTML element.</p>\n\n<p><strong>If you are using a <a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Container</a> object to house this\nComponent, then do not use the render method.</strong></p>\n\n<p>A Container's child Components are rendered by that Container's\n<a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">layout</a> manager when the Container is first rendered.</p>\n\n<p>If the Container is already rendered when a new child Component is added, you may need to call\nthe Container's <a href=\"#!/api/Ext.container.Container-method-doLayout\" rel=\"Ext.container.Container-method-doLayout\" class=\"docClass\">doLayout</a> to refresh the view which\ncauses any unrendered child Components to be rendered. This is required so that you can add\nmultiple child components if needed while only refreshing the layout once.</p>\n\n<p>When creating complex UIs, it is important to remember that sizing and positioning\nof child items is the responsibility of the Container's <a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">layout</a>\nmanager.  If you expect child items to be sized in response to user interactions, you must\nconfigure the Container with a layout manager which creates and manages the type of layout you\nhave in mind.</p>\n\n<p><strong>Omitting the Container's <a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">layout</a> config means that a basic\nlayout manager is used which does nothing but render child components sequentially into the\nContainer. No sizing or positioning will be performed in this situation.</strong></p>\n"},"setupFramingTpl":{"!type":"fn(frameTpl: ?) -> !this","!doc":"<p>Inject a reference to the function which applies the render template into the framing template. The framing template\nwraps the content.</p>\n"},"setupRenderTpl":{"!type":"fn(renderTpl: ?) -> !this"},"updateFrame":{"!type":"fn() -> !this"},"wrapPrimaryEl":{"!type":"fn(dom: ?) -> !this"}},"!doc":"<p>Given a component hierarchy of this:</p>\n\n<pre><code> {\n     xtype: 'panel',\n     id: 'ContainerA',\n     layout: 'hbox',\n     renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n     items: [\n         {\n             id: 'ContainerB',\n             xtype: 'container',\n             items: [\n                 { id: 'ComponentA' }\n             ]\n         }\n     ]\n }\n</code></pre>\n\n<p>The rendering of the above proceeds roughly like this:</p>\n\n<ul>\n<li>ContainerA's initComponent calls <a href=\"#!/api/Ext.util.Renderable-method-render\" rel=\"Ext.util.Renderable-method-render\" class=\"docClass\">render</a> passing the <code>renderTo</code> property as the\ncontainer argument.</li>\n<li><code>render</code> calls the <code>getRenderTree</code> method to get a complete <a href=\"#!/api/Ext.DomHelper\" rel=\"Ext.DomHelper\" class=\"docClass\">Ext.DomHelper</a> spec.</li>\n<li><code>getRenderTree</code> fires the \"beforerender\" event and calls the <a href=\"#!/api/Ext.util.Renderable-method-beforeRender\" rel=\"Ext.util.Renderable-method-beforeRender\" class=\"docClass\">beforeRender</a>\nmethod. Its result is obtained by calling <a href=\"#!/api/Ext.util.Renderable-method-getElConfig\" rel=\"Ext.util.Renderable-method-getElConfig\" class=\"docClass\">getElConfig</a>.</li>\n<li>The <a href=\"#!/api/Ext.util.Renderable-method-getElConfig\" rel=\"Ext.util.Renderable-method-getElConfig\" class=\"docClass\">getElConfig</a> method uses the <code>renderTpl</code> and its render data as the content\nof the <code>autoEl</code> described element.</li>\n<li>The result of <code>getRenderTree</code> is passed to <a href=\"#!/api/Ext.DomHelper-method-append\" rel=\"Ext.DomHelper-method-append\" class=\"docClass\">Ext.DomHelper.append</a>.</li>\n<li>The <code>renderTpl</code> contains calls to render things like docked items, container items\nand raw markup (such as the <code>html</code> or <code>tpl</code> config properties). These calls are to\nmethods added to the <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">Ext.XTemplate</a> instance by <a href=\"#!/api/Ext.util.Renderable-method-setupRenderTpl\" rel=\"Ext.util.Renderable-method-setupRenderTpl\" class=\"docClass\">setupRenderTpl</a>.</li>\n<li>The <a href=\"#!/api/Ext.util.Renderable-method-setupRenderTpl\" rel=\"Ext.util.Renderable-method-setupRenderTpl\" class=\"docClass\">setupRenderTpl</a> method adds methods such as <code>renderItems</code>, <code>renderContent</code>, etc.\nto the template. These are directed to \"doRenderItems\", \"doRenderContent\" etc..</li>\n<li>The <a href=\"#!/api/Ext.util.Renderable-method-setupRenderTpl\" rel=\"Ext.util.Renderable-method-setupRenderTpl\" class=\"docClass\">setupRenderTpl</a> calls traverse from components to their <a href=\"#!/api/Ext.layout.Layout\" rel=\"Ext.layout.Layout\" class=\"docClass\">Ext.layout.Layout</a>\nobject.</li>\n<li>When a container is rendered, it also has a <code>renderTpl</code>. This is processed when the\n<code>renderContainer</code> method is called in the component's <code>renderTpl</code>. This call goes to\n<a href=\"#!/api/Ext.layout.container.Container-method-doRenderContainer\" rel=\"Ext.layout.container.Container-method-doRenderContainer\" class=\"docClass\">Ext.layout.container.Container.doRenderContainer</a>. This method repeats this\nprocess for all components in the container.</li>\n<li>After the top-most component's markup is generated and placed in to the DOM, the next\nstep is to link elements to their components and finish calling the component methods\n<code>onRender</code> and <code>afterRender</code> as well as fire the corresponding events.</li>\n<li>The first step in this is to call <a href=\"#!/api/Ext.util.Renderable-method-finishRender\" rel=\"Ext.util.Renderable-method-finishRender\" class=\"docClass\">finishRender</a>. This method descends the\ncomponent hierarchy and calls <code>onRender</code> and fires the <code>render</code> event. These calls\nare delivered top-down to approximate the timing of these calls/events from previous\nversions.</li>\n<li>During the pass, the component's <code>el</code> is set. Likewise, the <code>renderSelectors</code> and\n<code>childEls</code> are applied to capture references to the component's elements.</li>\n<li>These calls are also made on the <a href=\"#!/api/Ext.layout.container.Container\" rel=\"Ext.layout.container.Container\" class=\"docClass\">Ext.layout.container.Container</a> layout to\ncapture its elements. Both of these classes use <a href=\"#!/api/Ext.util.ElementContainer\" rel=\"Ext.util.ElementContainer\" class=\"docClass\">Ext.util.ElementContainer</a> to\nhandle <code>childEls</code> processing.</li>\n<li>Once this is complete, a similar pass is made by calling #finishAfterRender.\nThis call also descends the component hierarchy, but this time the calls are made in\na bottom-up order to <code>afterRender</code>.</li>\n</ul>\n\n"},"Animate":{"prototype":{"isAnimate":{"!type":"bool"},"anim":{"!type":"fn(config: ?) -> !this","!doc":"<ul>\n<li>process the passed fx configuration.</li>\n</ul>\n\n"},"getActiveAnimation":{"!type":"fn() -> +Ext.fx.Anim|bool","!doc":"<p>Returns the current animation if this object has any effects actively running or queued, else returns false.</p>\n"},"hasActiveFx":{"!type":"fn() -> +Ext.fx.Anim|bool","!doc":"<p>Returns the current animation if this object has any effects actively running or queued, else returns false.</p>\n"},"sequenceFx":{"!type":"fn() -> ?","!doc":"<p>Ensures that all effects queued after sequenceFx is called on this object are run in sequence. This is the\nopposite of <a href=\"#!/api/Ext.util.Animate-method-syncFx\" rel=\"Ext.util.Animate-method-syncFx\" class=\"docClass\">syncFx</a>.</p>\n"},"stopAnimation":{"!type":"fn() -> +Ext.Element","!doc":"<p>Stops any running effects and clears this object's internal effects queue if it contains any additional effects\nthat haven't started yet.</p>\n"},"stopFx":{"!type":"fn() -> +Ext.Element","!doc":"<p>Stops any running effects and clears this object's internal effects queue if it contains any additional effects\nthat haven't started yet.</p>\n"},"syncFx":{"!type":"fn() -> ?","!doc":"<p>Ensures that all effects queued after syncFx is called on this object are run concurrently. This is the opposite\nof <a href=\"#!/api/Ext.util.Animate-method-sequenceFx\" rel=\"Ext.util.Animate-method-sequenceFx\" class=\"docClass\">sequenceFx</a>.</p>\n"},"animate":{"!type":"fn(config: ?) -> ?","!doc":"<p>Performs custom animation on this object.</p>\n\n<p>This method is applicable to both the <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Component</a> class and the <a href=\"#!/api/Ext.draw.Sprite\" rel=\"Ext.draw.Sprite\" class=\"docClass\">Sprite</a>\nclass. It performs animated transitions of certain properties of this object over a specified timeline.</p>\n\n<h3>Animating a <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Component</a></h3>\n\n<p>When animating a Component, the following properties may be specified in <code>from</code>, <code>to</code>, and <code>keyframe</code> objects:</p>\n\n<ul>\n<li><p><code>x</code> - The Component's page X position in pixels.</p></li>\n<li><p><code>y</code> - The Component's page Y position in pixels</p></li>\n<li><p><code>left</code> - The Component's <code>left</code> value in pixels.</p></li>\n<li><p><code>top</code> - The Component's <code>top</code> value in pixels.</p></li>\n<li><p><code>width</code> - The Component's <code>width</code> value in pixels.</p></li>\n<li><p><code>height</code> - The Component's <code>height</code> value in pixels.</p></li>\n<li><p><code>dynamic</code> - Specify as true to update the Component's layout (if it is a Container) at every frame of the animation.\n<em>Use sparingly as laying out on every intermediate size change is an expensive operation.</em></p></li>\n</ul>\n\n\n<p>For example, to animate a Window to a new size, ensuring that its internal layout and any shadow is correct:</p>\n\n<pre><code>myWindow = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.window.Window\" rel=\"Ext.window.Window\" class=\"docClass\">Ext.window.Window</a>', {\n    title: 'Test Component animation',\n    width: 500,\n    height: 300,\n    layout: {\n        type: 'hbox',\n        align: 'stretch'\n    },\n    items: [{\n        title: 'Left: 33%',\n        margins: '5 0 5 5',\n        flex: 1\n    }, {\n        title: 'Left: 66%',\n        margins: '5 5 5 5',\n        flex: 2\n    }]\n});\nmyWindow.show();\nmyWindow.header.el.on('click', function() {\n    myWindow.animate({\n        to: {\n            width: (myWindow.getWidth() == 500) ? 700 : 500,\n            height: (myWindow.getHeight() == 300) ? 400 : 300\n        }\n    });\n});\n</code></pre>\n\n<p>For performance reasons, by default, the internal layout is only updated when the Window reaches its final <code>\"to\"</code>\nsize. If dynamic updating of the Window's child Components is required, then configure the animation with\n<code>dynamic: true</code> and the two child items will maintain their proportions during the animation.</p>\n"}},"!doc":"<p>This animation class is a mixin.</p>\n\n<p><a href=\"#!/api/Ext.util.Animate\" rel=\"Ext.util.Animate\" class=\"docClass\">Ext.util.Animate</a> provides an API for the creation of animated transitions of properties and styles.\nThis class is used as a mixin and currently applied to <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a>, <a href=\"#!/api/Ext.dom.CompositeElement\" rel=\"Ext.dom.CompositeElement\" class=\"docClass\">Ext.CompositeElement</a>,\n<a href=\"#!/api/Ext.draw.Sprite\" rel=\"Ext.draw.Sprite\" class=\"docClass\">Ext.draw.Sprite</a>, <a href=\"#!/api/Ext.draw.CompositeSprite\" rel=\"Ext.draw.CompositeSprite\" class=\"docClass\">Ext.draw.CompositeSprite</a>, and <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>.  Note that Components\nhave a limited subset of what attributes can be animated such as top, left, x, y, height, width, and\nopacity (color, paddings, and margins can not be animated).</p>\n\n<h2>Animation Basics</h2>\n\n<p>All animations require three things - <code>easing</code>, <code>duration</code>, and <code>to</code> (the final end value for each property)\nyou wish to animate. Easing and duration are defaulted values specified below.\nEasing describes how the intermediate values used during a transition will be calculated.\n<a href=\"#!/api/Ext.fx.Anim-cfg-easing\" rel=\"Ext.fx.Anim-cfg-easing\" class=\"docClass\">Easing</a> allows for a transition to change speed over its duration.\nYou may use the defaults for easing and duration, but you must always set a\n<a href=\"#!/api/Ext.fx.Anim-cfg-to\" rel=\"Ext.fx.Anim-cfg-to\" class=\"docClass\">to</a> property which is the end value for all animations.</p>\n\n<p>Popular element 'to' configurations are:</p>\n\n<ul>\n<li>opacity</li>\n<li>x</li>\n<li>y</li>\n<li>color</li>\n<li>height</li>\n<li>width</li>\n</ul>\n\n\n<p>Popular sprite 'to' configurations are:</p>\n\n<ul>\n<li>translation</li>\n<li>path</li>\n<li>scale</li>\n<li>stroke</li>\n<li>rotation</li>\n</ul>\n\n\n<p>The default duration for animations is 250 (which is a 1/4 of a second).  Duration is denoted in\nmilliseconds.  Therefore 1 second is 1000, 1 minute would be 60000, and so on. The default easing curve\nused for all animations is 'ease'.  Popular easing functions are included and can be found in <a href=\"#!/api/Ext.fx.Anim-cfg-easing\" rel=\"Ext.fx.Anim-cfg-easing\" class=\"docClass\">Easing</a>.</p>\n\n<p>For example, a simple animation to fade out an element with a default easing and duration:</p>\n\n<pre><code>var p1 = <a href=\"#!/api/Ext-method-get\" rel=\"Ext-method-get\" class=\"docClass\">Ext.get</a>('myElementId');\n\np1.animate({\n    to: {\n        opacity: 0\n    }\n});\n</code></pre>\n\n<p>To make this animation fade out in a tenth of a second:</p>\n\n<pre><code>var p1 = <a href=\"#!/api/Ext-method-get\" rel=\"Ext-method-get\" class=\"docClass\">Ext.get</a>('myElementId');\n\np1.animate({\n   duration: 100,\n    to: {\n        opacity: 0\n    }\n});\n</code></pre>\n\n<h2>Animation Queues</h2>\n\n<p>By default all animations are added to a queue which allows for animation via a chain-style API.\nFor example, the following code will queue 4 animations which occur sequentially (one right after the other):</p>\n\n<pre><code>p1.animate({\n    to: {\n        x: 500\n    }\n}).animate({\n    to: {\n        y: 150\n    }\n}).animate({\n    to: {\n        backgroundColor: '#f00'  //red\n    }\n}).animate({\n    to: {\n        opacity: 0\n    }\n});\n</code></pre>\n\n<p>You can change this behavior by calling the <a href=\"#!/api/Ext.util.Animate-method-syncFx\" rel=\"Ext.util.Animate-method-syncFx\" class=\"docClass\">syncFx</a> method and all\nsubsequent animations for the specified target will be run concurrently (at the same time).</p>\n\n<pre><code>p1.syncFx();  //this will make all animations run at the same time\n\np1.animate({\n    to: {\n        x: 500\n    }\n}).animate({\n    to: {\n        y: 150\n    }\n}).animate({\n    to: {\n        backgroundColor: '#f00'  //red\n    }\n}).animate({\n    to: {\n        opacity: 0\n    }\n});\n</code></pre>\n\n<p>This works the same as:</p>\n\n<pre><code>p1.animate({\n    to: {\n        x: 500,\n        y: 150,\n        backgroundColor: '#f00'  //red\n        opacity: 0\n    }\n});\n</code></pre>\n\n<p>The <a href=\"#!/api/Ext.util.Animate-method-stopAnimation\" rel=\"Ext.util.Animate-method-stopAnimation\" class=\"docClass\">stopAnimation</a> method can be used to stop any\ncurrently running animations and clear any queued animations.</p>\n\n<h2>Animation Keyframes</h2>\n\n<p>You can also set up complex animations with <a href=\"#!/api/Ext.fx.Anim-cfg-keyframes\" rel=\"Ext.fx.Anim-cfg-keyframes\" class=\"docClass\">keyframes</a> which follow the\nCSS3 Animation configuration pattern. Note rotation, translation, and scaling can only be done for sprites.\nThe previous example can be written with the following syntax:</p>\n\n<pre><code>p1.animate({\n    duration: 1000,  //one second total\n    keyframes: {\n        25: {     //from 0 to 250ms (25%)\n            x: 0\n        },\n        50: {   //from 250ms to 500ms (50%)\n            y: 0\n        },\n        75: {  //from 500ms to 750ms (75%)\n            backgroundColor: '#f00'  //red\n        },\n        100: {  //from 750ms to 1sec\n            opacity: 0\n        }\n    }\n});\n</code></pre>\n\n<h2>Animation Events</h2>\n\n<p>Each animation you create has events for <a href=\"#!/api/Ext.fx.Anim-event-beforeanimate\" rel=\"Ext.fx.Anim-event-beforeanimate\" class=\"docClass\">beforeanimate</a>,\n<a href=\"#!/api/Ext.fx.Anim-event-afteranimate\" rel=\"Ext.fx.Anim-event-afteranimate\" class=\"docClass\">afteranimate</a>, and <a href=\"#!/api/Ext.fx.Anim-event-lastframe\" rel=\"Ext.fx.Anim-event-lastframe\" class=\"docClass\">lastframe</a>.\nKeyframed animations adds an additional <a href=\"#!/api/Ext.fx.Animator-event-keyframe\" rel=\"Ext.fx.Animator-event-keyframe\" class=\"docClass\">keyframe</a> event which\nfires for each keyframe in your animation.</p>\n\n<p>All animations support the <a href=\"#!/api/Ext.util.Observable-cfg-listeners\" rel=\"Ext.util.Observable-cfg-listeners\" class=\"docClass\">listeners</a> configuration to attact functions to these events.</p>\n\n<pre><code>startAnimate: function() {\n    var p1 = <a href=\"#!/api/Ext-method-get\" rel=\"Ext-method-get\" class=\"docClass\">Ext.get</a>('myElementId');\n    p1.animate({\n       duration: 100,\n        to: {\n            opacity: 0\n        },\n        listeners: {\n            beforeanimate:  function() {\n                // Execute my custom method before the animation\n                this.myBeforeAnimateFn();\n            },\n            afteranimate: function() {\n                // Execute my custom method after the animation\n                this.myAfterAnimateFn();\n            },\n            scope: this\n    });\n},\nmyBeforeAnimateFn: function() {\n  // My custom logic\n},\nmyAfterAnimateFn: function() {\n  // My custom logic\n}\n</code></pre>\n\n<p>Due to the fact that animations run asynchronously, you can determine if an animation is currently\nrunning on any target by using the <a href=\"#!/api/Ext.util.Animate-method-getActiveAnimation\" rel=\"Ext.util.Animate-method-getActiveAnimation\" class=\"docClass\">getActiveAnimation</a>\nmethod.  This method will return false if there are no active animations or return the currently\nrunning <a href=\"#!/api/Ext.fx.Anim\" rel=\"Ext.fx.Anim\" class=\"docClass\">Ext.fx.Anim</a> instance.</p>\n\n<p>In this example, we're going to wait for the current animation to finish, then stop any other\nqueued animations before we fade our element's opacity to 0:</p>\n\n<pre><code>var curAnim = p1.getActiveAnimation();\nif (curAnim) {\n    curAnim.on('afteranimate', function() {\n        p1.stopAnimation();\n        p1.animate({\n            to: {\n                opacity: 0\n            }\n        });\n    });\n}\n</code></pre>\n"},"Floating":{"prototype":{"constrain":{"!type":"bool","!doc":"<p>True to constrain this Components within its containing element, false to allow it to fall outside of its containing\nelement. By default this Component will be rendered to <code>document.body</code>. To render and constrain this Component within\nanother element specify <a href=\"#!/api/Ext.AbstractComponent-cfg-renderTo\" rel=\"Ext.AbstractComponent-cfg-renderTo\" class=\"docClass\">renderTo</a>.</p>\n"},"fixed":{"!type":"bool","!doc":"<p>Configure as <code>true</code> to have this Component fixed at its <code>X, Y</code> coordinates in the browser viewport, immune\nto scrolling the document.</p>\n\n<p><em>Only in browsers that support <code>position:fixed</code></em></p>\n\n<p><em>IE6 and IE7, 8 and 9 quirks do not support <code>position: fixed</code></em></p>\n"},"focusOnToFront":{"!type":"bool","!doc":"<p>Specifies whether the floated component should be automatically <a href=\"#!/api/Ext.Component-method-focus\" rel=\"Ext.Component-method-focus\" class=\"docClass\">focused</a> when\nit is <a href=\"#!/api/Ext.util.Floating-method-toFront\" rel=\"Ext.util.Floating-method-toFront\" class=\"docClass\">brought to the front</a>.</p>\n"},"shadow":{"!type":"string|bool","!doc":"<p>Specifies whether the floating component should be given a shadow. Set to true to automatically create an\n<a href=\"#!/api/Ext.Shadow\" rel=\"Ext.Shadow\" class=\"docClass\">Ext.Shadow</a>, or a string indicating the shadow's display <a href=\"#!/api/Ext.Shadow-cfg-mode\" rel=\"Ext.Shadow-cfg-mode\" class=\"docClass\">Ext.Shadow.mode</a>. Set to false to\ndisable the shadow.</p>\n"},"shadowOffset":{"!type":"number","!doc":"<p>Number of pixels to offset the shadow.</p>\n"},"center":{"!type":"fn() -> +Ext.Component","!doc":"<p>Center this Component in its container.</p>\n"},"doConstrain":{"!type":"fn(constrainTo?: string|+HTMLElement|+Ext.Element|+Ext.util.Region) -> !this","!doc":"<p>Moves this floating Component into a constrain region.</p>\n\n<p>By default, this Component is constrained to be within the container it was added to, or the element it was\nrendered to.</p>\n\n<p>An alternative constraint may be passed.</p>\n"},"fitContainer":{"!type":"fn(animate: ?) -> !this"},"initHierarchyEvents":{"!type":"fn() -> !this"},"onAfterFloatLayout":{"!type":"fn() -> !this"},"onBeforeFloatLayout":{"!type":"fn() -> !this"},"onFloatShow":{"!type":"fn() -> !this"},"onKeyDown":{"!type":"fn(e: ?) -> !this","!doc":"<p>Listen for TAB events and wrap round if tabbing of either end of the Floater</p>\n"},"onMouseDown":{"!type":"fn(e: ?) -> !this","!doc":"<p>Mousedown brings to front, and programatically grabs focus <em>unless the mousedown was on a focusable element</em></p>\n"},"registerWithOwnerCt":{"!type":"fn() -> !this"},"setActive":{"!type":"fn(active?: bool, newActive?: +Ext.Component) -> !this","!doc":"<p>This method is called internally by <a href=\"#!/api/Ext.ZIndexManager\" rel=\"Ext.ZIndexManager\" class=\"docClass\">Ext.ZIndexManager</a> to signal that a floating Component has either been\nmoved to the top of its zIndex stack, or pushed from the top of its zIndex stack.</p>\n\n<p>If a <em>Window</em> is superceded by another Window, deactivating it hides its shadow.</p>\n\n<p>This method also fires the <a href=\"#!/api/Ext.Component-event-activate\" rel=\"Ext.Component-event-activate\" class=\"docClass\">activate</a> or\n<a href=\"#!/api/Ext.Component-event-deactivate\" rel=\"Ext.Component-event-deactivate\" class=\"docClass\">deactivate</a> event depending on which action occurred.</p>\n"},"setFloatParent":{"!type":"fn(floatParent: ?) -> !this"},"setZIndex":{"!type":"fn(index: ?) -> !this","!doc":"<p>z-index is managed by the zIndexManager and may be overwritten at any time.\nReturns the next z-index to be used.\nIf this is a Container, then it will have rebased any managed floating Components,\nand so the next available z-index will be approximately 10000 above that.</p>\n"},"syncHidden":{"!type":"fn() -> !this","!doc":"<p>synchronizes the hidden state of this component with the state of its hierarchy</p>\n"},"syncShadow":{"!type":"fn() -> !this"},"toBack":{"!type":"fn() -> +Ext.Component","!doc":"<p>Sends this Component to the back of (lower z-index than) any other visible windows</p>\n"},"toFront":{"!type":"fn(preventFocus?: bool) -> +Ext.Component","!doc":"<p>Brings this floating Component to the front of any other visible, floating Components managed by the same\n<a href=\"#!/api/Ext.ZIndexManager\" rel=\"Ext.ZIndexManager\" class=\"docClass\">ZIndexManager</a></p>\n\n<p>If this Component is modal, inserts the modal mask just below this Component in the z-index stack.</p>\n"}},"!doc":"<p>A mixin to add floating capability to a Component.</p>\n"},"Bindable":{"prototype":{"bindStoreListeners":{"!type":"fn(store: +Ext.data.AbstractStore) -> !this","!doc":"<p>Binds listeners for this component to the store. By default it will add\nanything bound by the getStoreListeners method, however it can be overridden\nin a subclass to provide any more complicated handling.</p>\n"},"getStore":{"!type":"fn() -> +Ext.data.AbstractStore","!doc":"<p>Gets the current store instance.</p>\n"},"onBindStore":{"!type":"fn(store: +Ext.data.AbstractStore, initial: bool) -> !this","!doc":"<p>Template method, it is called when a new store is bound\nto the current instance.</p>\n"},"onUnbindStore":{"!type":"fn(store: +Ext.data.AbstractStore, initial: bool) -> !this","!doc":"<p>Template method, it is called when an existing store is unbound\nfrom the current instance.</p>\n"},"unbindStoreListeners":{"!type":"fn(store: +Ext.data.AbstractStore) -> !this","!doc":"<p>Unbinds listeners from this component to the store. By default it will remove\nanything bound by the bindStoreListeners method, however it can be overridden\nin a subclass to provide any more complicated handling.</p>\n"},"bindStore":{"!type":"fn(store?: +Ext.data.AbstractStore|string) -> !this","!doc":"<p>Binds a store to this instance.</p>\n"},"getStoreListeners":{"!type":"fn(store: +Ext.data.Store) -> ?","!doc":"<p>Gets the listeners to bind to a new store.</p>\n"}},"!doc":"<p>This class is used as a mixin.</p>\n\n<p>This class is to be used to provide basic methods for binding/unbinding stores to other\nclasses. In general it will not be used directly.</p>\n"},"Sortable":{"prototype":{"defaultSortDirection":{"!type":"string","!doc":"<p>The default sort direction to use if one is not specified.</p>\n"},"sortRoot":{"!type":"string","!doc":"<p>The property in each item that contains the data to sort.</p>\n"},"sorters":{"!type":"+Ext.util.MixedCollection","!doc":"<p>The collection of <a href=\"#!/api/Ext.util.Sorter\" rel=\"Ext.util.Sorter\" class=\"docClass\">Sorters</a> currently applied to this Store</p>\n"},"isSortable":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated Sortable, or subclass thereof.</p>\n"},"decodeSorters":{"!type":"fn(sorters: [?]) -> [+Ext.util.Sorter]","!doc":"<p>Normalizes an array of sorter objects, ensuring that they are all <a href=\"#!/api/Ext.util.Sorter\" rel=\"Ext.util.Sorter\" class=\"docClass\">Ext.util.Sorter</a> instances</p>\n"},"emptyComparator":{"!type":"fn() -> !this"},"generateComparator":{"!type":"fn() -> !this","!doc":"<p>Returns a comparator function which compares two items and returns -1, 0, or 1 depending\non the currently defined set of <a href=\"#!/api/Ext.util.Sortable-cfg-sorters\" rel=\"Ext.util.Sortable-cfg-sorters\" class=\"docClass\">sorters</a>.</p>\n\n<p>If there are no <a href=\"#!/api/Ext.util.Sortable-cfg-sorters\" rel=\"Ext.util.Sortable-cfg-sorters\" class=\"docClass\">sorters</a> defined, it returns a function which returns <code>0</code> meaning\nthat no sorting will occur.</p>\n"},"getFirstSorter":{"!type":"fn() -> +Ext.util.Sorter","!doc":"<p>Gets the first sorter from the sorters collection, excluding\nany groupers that may be in place</p>\n"},"getSorters":{"!type":"fn() -> !this"},"initSortable":{"!type":"fn() -> !this","!doc":"<p>Performs initialization of this mixin. Component classes using this mixin should call this method during their\nown initialization.</p>\n"},"onBeforeSort":{"!type":"fn() -> !this"},"sort":{"!type":"fn(sorters?: string|[+Ext.util.Sorter], direction?: string) -> [+Ext.util.Sorter]","!doc":"<p>Sorts the data in the Store by one or more of its properties. Example usage:</p>\n\n<pre><code>//sort by a single field\nmyStore.sort('myField', 'DESC');\n\n//sorting by multiple fields\nmyStore.sort([\n    {\n        property : 'age',\n        direction: 'ASC'\n    },\n    {\n        property : 'name',\n        direction: 'DESC'\n    }\n]);\n</code></pre>\n\n<p>Internally, Store converts the passed arguments into an array of <a href=\"#!/api/Ext.util.Sorter\" rel=\"Ext.util.Sorter\" class=\"docClass\">Ext.util.Sorter</a> instances, and delegates\nthe actual sorting to its internal <a href=\"#!/api/Ext.util.MixedCollection\" rel=\"Ext.util.MixedCollection\" class=\"docClass\">Ext.util.MixedCollection</a>.</p>\n\n<p>When passing a single string argument to sort, Store maintains a ASC/DESC toggler per field, so this code:</p>\n\n<pre><code>store.sort('myField');\nstore.sort('myField');\n</code></pre>\n\n<p>Is equivalent to this code, because Store handles the toggling automatically:</p>\n\n<pre><code>store.sort('myField', 'ASC');\nstore.sort('myField', 'DESC');\n</code></pre>\n"}},"!doc":"<p>A mixin which allows a data component to be sorted. This is used by e.g. <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a> and <a href=\"#!/api/Ext.data.TreeStore\" rel=\"Ext.data.TreeStore\" class=\"docClass\">Ext.data.TreeStore</a>.</p>\n\n<p><strong>NOTE</strong>: This mixin is mainly for internal use and most users should not need to use it directly. It\nis more likely you will want to use one of the component classes that import this mixin, such as\n<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a> or <a href=\"#!/api/Ext.data.TreeStore\" rel=\"Ext.data.TreeStore\" class=\"docClass\">Ext.data.TreeStore</a>.</p>\n","createComparator":{"!type":"fn(sorters: [+Ext.util.Sorter]) -> fn()","!doc":"<p>Creates a single comparator function which encapsulates the passed Sorter array.</p>\n"}},"AbstractMixedCollection":{"!type":"fn(allowFunctions: ?, keyFn: ?)","prototype":{"!proto":"Ext.Base.prototype","allowFunctions":{"!type":"bool","!doc":"<p>Specify <code>true</code> if the <a href=\"#!/api/Ext.util.AbstractMixedCollection-method-addAll\" rel=\"Ext.util.AbstractMixedCollection-method-addAll\" class=\"docClass\">addAll</a>\nfunction should add function references to the collection. Defaults to\n<code>false</code>.</p>\n"},"generation":{"!type":"number","!doc":"<p>Mutation counter which is incremented upon add and remove.</p>\n"},"indexGeneration":{"!type":"number","!doc":"<p>Mutation counter for the index map which is synchronized with the collection's mutation counter\nwhen the index map is interrogated and found to be out of sync and needed a rebuild.</p>\n"},"isMixedCollection":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated MixedCollection, or subclass thereof.</p>\n"},"add":{"!type":"fn(index: number, o: ?, key: string, eOpts: ?)","!doc":"<p>Fires when an item is added to the collection.</p>\n"},"addAll":{"!type":"fn(objs: ?|[?]) -> !this","!doc":"<p>Adds all elements of an Array or an Object to the collection.</p>\n"},"clear":{"!type":"fn(eOpts: ?)","!doc":"<p>Fires when the collection is cleared.</p>\n"},"clone":{"!type":"fn() -> +Ext.util.MixedCollection","!doc":"<p>Creates a shallow copy of this collection</p>\n"},"collect":{"!type":"fn(property: string, root?: string, allowBlank?: bool) -> [?]","!doc":"<p>Collects unique values of a particular property in this MixedCollection</p>\n"},"contains":{"!type":"fn(o: ?) -> bool","!doc":"<p>Returns true if the collection contains the passed Object as an item.</p>\n"},"containsKey":{"!type":"fn(key: string) -> bool","!doc":"<p>Returns true if the collection contains the passed Object as a key.</p>\n"},"createValueMatcher":{"!type":"fn(value: string, anyMatch: bool, caseSensitive: bool, exactMatch: bool) -> !this","!doc":"<p>Returns a regular expression based on the given value and matching options. This is used internally for finding and filtering,\nand by <a href=\"#!/api/Ext.data.Store-method-filter\" rel=\"Ext.data.Store-method-filter\" class=\"docClass\">Ext.data.Store.filter</a></p>\n"},"doInsert":{"!type":"fn(index: ?, keys: ?, objects: ?) -> !this","!doc":"<p>Private multi insert implementation.</p>\n"},"each":{"!type":"fn(fn: fn(), scope?: ?) -> !this","!doc":"<p>Executes the specified function once for every item in the collection.\nThe function should return a boolean value.\nReturning false from the function will stop the iteration.</p>\n"},"eachKey":{"!type":"fn(fn: fn(), scope?: ?) -> !this","!doc":"<p>Executes the specified function once for every key in the collection, passing each\nkey, and its associated item as the first two parameters.</p>\n"},"extractValues":{"!type":"fn(property: string, root?: string) -> [?]","!doc":"<p>Extracts all of the given property values from the items in the MC. Mainly used as a supporting method for\nfunctions like sum and collect.</p>\n"},"filter":{"!type":"fn(property: [+Ext.util.Filter]|string, value: string|+RegExp, anyMatch?: bool, caseSensitive?: bool) -> +Ext.util.MixedCollection","!doc":"<p>Filters the objects in this collection by a set of <a href=\"#!/api/Ext.util.Filter\" rel=\"Ext.util.Filter\" class=\"docClass\">Filter</a>s, or by a single\nproperty/value pair with optional parameters for substring matching and case sensitivity. See\n<a href=\"#!/api/Ext.util.Filter\" rel=\"Ext.util.Filter\" class=\"docClass\">Filter</a> for an example of using Filter objects (preferred). Alternatively,\nMixedCollection can be easily filtered by property like this:</p>\n\n\n<p>   //create a simple store with a few people defined\n   var people = new <a href=\"#!/api/Ext.util.MixedCollection\" rel=\"Ext.util.MixedCollection\" class=\"docClass\">Ext.util.MixedCollection</a>();\n   people.addAll([\n       {id: 1, age: 25, name: 'Ed'},\n       {id: 2, age: 24, name: 'Tommy'},\n       {id: 3, age: 24, name: 'Arne'},\n       {id: 4, age: 26, name: 'Aaron'}\n   ]);</p>\n\n<p>   //a new MixedCollection containing only the items where age == 24\n   var middleAged = people.filter('age', 24);</p>\n"},"filterBy":{"!type":"fn(fn: fn(), scope?: ?) -> +Ext.util.MixedCollection","!doc":"<p>Filter by a function. Returns a <i>new</i> collection that has been filtered.\nThe passed function will be called with each object in the collection.\nIf the function returns true, the value is included otherwise it is filtered.</p>\n"},"find":{"!type":"fn() -> !this","!doc":"<p>Returns the first item in the collection which elicits a true return value from the passed selection function.</p>\n"},"findBy":{"!type":"fn(fn: fn(), scope?: ?) -> ?","!doc":"<p>Returns the first item in the collection which elicits a true return value from the\npassed selection function.</p>\n"},"findIndex":{"!type":"fn(property: string, value: string|+RegExp, start?: number, anyMatch?: bool, caseSensitive?: bool) -> number","!doc":"<p>Finds the index of the first matching object in this collection by a specific property/value.</p>\n"},"findIndexBy":{"!type":"fn(fn: fn(), scope?: ?, start?: number) -> number","!doc":"<p>Find the index of the first matching object in this collection by a function.\nIf the function returns <i>true</i> it is considered a match.</p>\n"},"first":{"!type":"fn() -> ?","!doc":"<p>Returns the first item in the collection.</p>\n"},"get":{"!type":"fn(key: string|number) -> ?","!doc":"<p>Returns the item associated with the passed key OR index.\nKey has priority over index.  This is the equivalent\nof calling <a href=\"#!/api/Ext.util.AbstractMixedCollection-method-getByKey\" rel=\"Ext.util.AbstractMixedCollection-method-getByKey\" class=\"docClass\">getByKey</a> first, then if nothing matched calling <a href=\"#!/api/Ext.util.AbstractMixedCollection-method-getAt\" rel=\"Ext.util.AbstractMixedCollection-method-getAt\" class=\"docClass\">getAt</a>.</p>\n"},"getAt":{"!type":"fn(index: number) -> ?","!doc":"<p>Returns the item at the specified index.</p>\n"},"getByKey":{"!type":"fn(key: string|number) -> ?","!doc":"<p>Returns the item associated with the passed key.</p>\n"},"getCount":{"!type":"fn() -> number","!doc":"<p>Returns the number of items in the collection.</p>\n"},"getKey":{"!type":"fn(item: ?) -> ?","!doc":"<p>A function which will be called, passing a newly added object\nwhen the object is added without a separate id.  The function\nshould yield the key by which that object will be indexed.</p>\n\n<p>If no key is yielded, then the object will be added, but it\ncannot be accessed or removed quickly. Finding it in this\ncollection for interrogation or removal will require a linear\nscan of this collection's items.</p>\n\n<p>The default implementation simply returns <code>item.id</code> but you can\nprovide your own implementation to return a different value as\nin the following examples:</p>\n\n<pre><code>// normal way\nvar mc = new <a href=\"#!/api/Ext.util.MixedCollection\" rel=\"Ext.util.MixedCollection\" class=\"docClass\">Ext.util.MixedCollection</a>();\nmc.add(someEl.dom.id, someEl);\nmc.add(otherEl.dom.id, otherEl);\n//and so on\n\n// using getKey\nvar mc = new <a href=\"#!/api/Ext.util.MixedCollection\" rel=\"Ext.util.MixedCollection\" class=\"docClass\">Ext.util.MixedCollection</a>({\n    getKey: function(el){\n        return el.dom.id;\n    }\n});\nmc.add(someEl);\nmc.add(otherEl);\n</code></pre>\n"},"getRange":{"!type":"fn(startIndex?: number, endIndex?: number) -> [?]","!doc":"<p>Returns a range of items in this collection</p>\n"},"hasRange":{"!type":"fn(start: ?, end: ?) -> !this","!doc":"<p>For API parity with Store's PageMap class. Buffered rendering checks if the Store has the range\nrequired to render. The Store delegates this question to its backing data object which may be an instance\nof its private PageMap class, or a MixedCollection.</p>\n"},"indexOf":{"!type":"fn(o: ?) -> number","!doc":"<p>Returns index within the collection of the passed Object.</p>\n"},"indexOfKey":{"!type":"fn(key: string) -> number","!doc":"<p>Returns index within the collection of the passed key.</p>\n"},"insert":{"!type":"fn(index: number, key: string|?|[string]|[?], o?: ?|[?]) -> ?","!doc":"<p>Inserts an item at the specified index in the collection. Fires the <a href=\"#!/api/Ext.util.AbstractMixedCollection-event-add\" rel=\"Ext.util.AbstractMixedCollection-event-add\" class=\"docClass\">add</a> event when complete.</p>\n"},"last":{"!type":"fn() -> ?","!doc":"<p>Returns the last item in the collection.</p>\n"},"rebuildIndexMap":{"!type":"fn() -> !this"},"remove":{"!type":"fn(o: ?, key?: string, eOpts: ?)","!doc":"<p>Fires when an item is removed from the collection.</p>\n"},"removeAll":{"!type":"fn(items?: [?]) -> +Ext.util.MixedCollection","!doc":"<p>Remove all items in the collection. Can also be used\nto remove only the items in the passed array.</p>\n"},"removeAt":{"!type":"fn(index: number) -> ?","!doc":"<p>Remove an item from a specified index in the collection. Fires the <a href=\"#!/api/Ext.util.AbstractMixedCollection-event-remove\" rel=\"Ext.util.AbstractMixedCollection-event-remove\" class=\"docClass\">remove</a> event when complete.</p>\n"},"removeAtKey":{"!type":"fn(key: string) -> ?","!doc":"<p>Removes an item associated with the passed key fom the collection.</p>\n"},"removeRange":{"!type":"fn(index: number, removeCount?: number) -> ?","!doc":"<p>Remove a range of items starting at a specified index in the collection.\nDoes not fire the remove event.</p>\n"},"replace":{"!type":"fn(key: string, old: ?, new: ?, eOpts: ?)","!doc":"<p>Fires when an item is replaced in the collection.</p>\n"},"sum":{"!type":"fn(property: string, root?: string, start?: number, end?: number) -> number","!doc":"<p>Collects all of the values of the given property and returns their sum</p>\n"},"updateKey":{"!type":"fn(oldKey: ?, newKey: ?) -> !this","!doc":"<p>Change the key for an existing item in the collection. If the old key\ndoes not exist this is a no-op.</p>\n"}}},"CSS":{"!doc":"<p>Utility class for manipulating CSS rules</p>\n","createRule":{"!type":"fn(styleSheet: +CSSStyleSheet, selector: string, property: string) -> +CSSStyleRule","!doc":"<p>Creates a rule.</p>\n"},"createStyleSheet":{"!type":"fn(cssText: string, id: string) -> +CSSStyleSheet","!doc":"<p>Creates a stylesheet from a text blob of rules.\nThese rules will be wrapped in a STYLE tag and appended to the HEAD of the document.</p>\n"},"getRule":{"!type":"fn(selector: string|[string], refreshCache: bool) -> +CSSStyleRule","!doc":"<p>Gets an an individual CSS rule by selector(s)</p>\n"},"getRules":{"!type":"fn(refreshCache: bool) -> ?","!doc":"<p>Gets all css rules for the document</p>\n"},"refreshCache":{"!type":"fn() -> ?","!doc":"<p>Refresh the rule cache if you have dynamically added stylesheets</p>\n"},"removeStyleSheet":{"!type":"fn(id: string) -> !this","!doc":"<p>Removes a style or link tag by id</p>\n"},"swapStyleSheet":{"!type":"fn(id: string, url: string) -> !this","!doc":"<p>Dynamically swaps an existing stylesheet reference for a new one</p>\n"},"updateRule":{"!type":"fn(selector: string|[string], property: string, value: string) -> bool","!doc":"<p>Updates a rule property</p>\n"}},"ClickRepeater":{"!doc":"<p>A wrapper class which can be applied to any element. Fires a \"click\" event while the\nmouse is pressed. The interval between firings may be specified in the config but\ndefaults to 20 milliseconds.</p>\n\n<p>Optionally, a CSS class may be applied to the element during the time it is pressed.</p>\n","!type":"fn(el: string|+HTMLElement|+Ext.Element, config?: Ext_util_ClickRepeater_cfg)","prototype":{"!proto":"Ext.util.Observable.prototype","accelerate":{"!type":"bool","!doc":"<p>True if autorepeating should start slowly and accelerate.\n\"interval\" and \"delay\" are ignored.</p>\n"},"delay":{"!type":"number","!doc":"<p>The initial delay before the repeating event begins firing.\nSimilar to an autorepeat key delay.</p>\n"},"el":{"!type":"string|+HTMLElement|+Ext.Element","!doc":"<p>The element to act as a button.</p>\n"},"interval":{"!type":"number","!doc":"<p>The interval between firings of the \"click\" event (in milliseconds).</p>\n"},"pressedCls":{"!type":"string","!doc":"<p>A CSS class name to be applied to the element while pressed.</p>\n"},"preventDefault":{"!type":"bool","!doc":"<p>True to prevent the default click event</p>\n"},"stopDefault":{"!type":"bool","!doc":"<p>True to stop the default click event</p>\n"},"timer":{"!type":"number"},"click":{"!type":"fn(this: +Ext.util.ClickRepeater, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires on a specified interval during the time the element is pressed.</p>\n"},"destroy":{"!type":"fn() -> !this"},"disable":{"!type":"fn(force: ?) -> !this","!doc":"<p>Disables the repeater and stops events from firing.</p>\n"},"easeOutExpo":{"!type":"fn(t: ?, b: ?, c: ?, d: ?) -> !this"},"enable":{"!type":"fn() -> !this","!doc":"<p>Enables the repeater and allows events to fire.</p>\n"},"eventOptions":{"!type":"fn(e: ?) -> !this"},"handleDblClick":{"!type":"fn(e: ?) -> !this"},"handleMouseDown":{"!type":"fn(e: ?) -> !this"},"handleMouseOut":{"!type":"fn() -> !this"},"handleMouseReturn":{"!type":"fn() -> !this"},"handleMouseUp":{"!type":"fn(e: ?) -> !this"},"setDisabled":{"!type":"fn(disabled: bool) -> !this","!doc":"<p>Convenience function for setting disabled/enabled by boolean.</p>\n"},"mousedown":{"!type":"fn(this: +Ext.util.ClickRepeater, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when the mouse button is depressed.</p>\n"},"mouseup":{"!type":"fn(this: +Ext.util.ClickRepeater, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when the mouse key is released.</p>\n"}}},"ComponentDragger":{"!doc":"<p>A subclass of <a href=\"#!/api/Ext.dd.DragTracker\" rel=\"Ext.dd.DragTracker\" class=\"docClass\">Ext.dd.DragTracker</a> which handles dragging any Component.</p>\n\n<p>This is configured with a Component to be made draggable, and a config object for the <a href=\"#!/api/Ext.dd.DragTracker\" rel=\"Ext.dd.DragTracker\" class=\"docClass\">Ext.dd.DragTracker</a>\nclass.</p>\n\n<p>A <a href=\"#!/api/Ext.util.ComponentDragger-cfg-delegate\" rel=\"Ext.util.ComponentDragger-cfg-delegate\" class=\"docClass\">delegate</a> may be provided which may be either the element to use as the mousedown target or a <a href=\"#!/api/Ext.dom.Query\" rel=\"Ext.dom.Query\" class=\"docClass\">Ext.DomQuery</a> selector to activate multiple mousedown targets.</p>\n\n<p>When the Component begins to be dragged, its <code>beginDrag</code> method will be called if implemented.</p>\n\n<p>When the drag ends, its <code>endDrag</code> method will be called if implemented.</p>\n","!type":"fn(comp: ?, config?: Ext_util_ComponentDragger_cfg)","prototype":{"!proto":"Ext.dd.DragTracker.prototype","constrain":{"!type":"bool","!doc":"<p>Specify as <code>true</code> to constrain the Component to within the bounds of the <a href=\"#!/api/Ext.util.ComponentDragger-cfg-constrainTo\" rel=\"Ext.util.ComponentDragger-cfg-constrainTo\" class=\"docClass\">constrainTo</a> region.</p>\n"},"constrainDelegate":{"!type":"bool","!doc":"<p>Specify as <code>true</code> to constrain the drag handles within the <a href=\"#!/api/Ext.util.ComponentDragger-cfg-constrainTo\" rel=\"Ext.util.ComponentDragger-cfg-constrainTo\" class=\"docClass\">constrainTo</a> region.</p>\n"},"delegate":{"!type":"string|+Ext.Element","!doc":"<p>A <a href=\"#!/api/Ext.dom.Query\" rel=\"Ext.dom.Query\" class=\"docClass\">DomQuery</a> selector which identifies child elements within the Component's encapsulating\nElement which are the drag handles. This limits dragging to only begin when the matching elements are\nmousedowned.</p>\n\n<p>This may also be a specific child element within the Component's encapsulating element to use as the drag handle.</p>\n"},"calculateConstrainRegion":{"!type":"fn() -> !this"},"onDrag":{"!type":"fn(e: ?) -> !this","!doc":"<p>Move either the ghost Component or the target Component to its new position on drag</p>\n"},"onEnd":{"!type":"fn(e: ?) -> !this","!doc":"<p>Template method which should be overridden by each DragTracker instance. Called when a drag operation has been completed\n(e.g. the user clicked and held the mouse down, dragged the element and then released the mouse button)</p>\n"},"onStart":{"!type":"fn(e: ?) -> !this","!doc":"<p>Template method which should be overridden by each DragTracker instance. Called when a drag operation starts\n(e.g. the user has moved the tracked element beyond the specified tolerance)</p>\n"}}},"Cookies":{"!doc":"<p>Utility class for setting/reading values from browser cookies.\nValues can be written using the <a href=\"#!/api/Ext.util.Cookies-method-set\" rel=\"Ext.util.Cookies-method-set\" class=\"docClass\">set</a> method.\nValues can be read using the <a href=\"#!/api/Ext.util.Cookies-method-get\" rel=\"Ext.util.Cookies-method-get\" class=\"docClass\">get</a> method.\nA cookie can be invalidated on the client machine using the <a href=\"#!/api/Ext.util.Cookies-method-clear\" rel=\"Ext.util.Cookies-method-clear\" class=\"docClass\">clear</a> method.</p>\n","clear":{"!type":"fn(name: string, path?: string) -> !this","!doc":"<p>Removes a cookie with the provided name from the browser\nif found by setting its expiration date to sometime in the past.</p>\n"},"get":{"!type":"fn(name: string) -> ?","!doc":"<p>Retrieves cookies that are accessible by the current page. If a cookie does not exist, <code>get()</code> returns null. The\nfollowing example retrieves the cookie called \"valid\" and stores the String value in the variable validStatus.</p>\n\n<pre><code>var validStatus = <a href=\"#!/api/Ext.util.Cookies-method-get\" rel=\"Ext.util.Cookies-method-get\" class=\"docClass\">Ext.util.Cookies.get</a>(\"valid\");\n</code></pre>\n"},"getCookieVal":{"!type":"fn(offset: ?) -> !this"},"set":{"!type":"fn(name: string, value: ?, expires?: ?, path?: string, domain?: string, secure?: bool) -> !this","!doc":"<p>Creates a cookie with the specified name and value. Additional settings for the cookie may be optionally specified\n(for example: expiration, access restriction, SSL).</p>\n"}},"DelayedTask":{"!doc":"<p>The DelayedTask class provides a convenient way to \"buffer\" the execution of a method,\nperforming setTimeout where a new timeout cancels the old timeout. When called, the\ntask will wait the specified time period before executing. If durng that time period,\nthe task is called again, the original call will be cancelled. This continues so that\nthe function is only called a single time for each iteration.</p>\n\n<p>This method is especially useful for things like detecting whether a user has finished\ntyping in a text field. An example would be performing validation on a keypress. You can\nuse this class to buffer the keypress events for a certain number of milliseconds, and\nperform only if they stop for that amount of time.</p>\n\n<h2>Usage</h2>\n\n<pre><code>var task = new <a href=\"#!/api/Ext.util.DelayedTask\" rel=\"Ext.util.DelayedTask\" class=\"docClass\">Ext.util.DelayedTask</a>(function(){\n    alert(<a href=\"#!/api/Ext-method-getDom\" rel=\"Ext-method-getDom\" class=\"docClass\">Ext.getDom</a>('myInputField').value.length);\n});\n\n// Wait 500ms before calling our function. If the user presses another key\n// during that 500ms, it will be cancelled and we'll wait another 500ms.\n<a href=\"#!/api/Ext-method-get\" rel=\"Ext-method-get\" class=\"docClass\">Ext.get</a>('myInputField').on('keypress', function() {\n    task.<a href=\"#!/api/Ext.util.DelayedTask-method-delay\" rel=\"Ext.util.DelayedTask-method-delay\" class=\"docClass\">delay</a>(500);\n});\n</code></pre>\n\n<p>Note that we are using a DelayedTask here to illustrate a point. The configuration\noption <code>buffer</code> for <a href=\"#!/api/Ext.util.Observable-method-addListener\" rel=\"Ext.util.Observable-method-addListener\" class=\"docClass\">addListener/on</a> will\nalso setup a delayed task for you to buffer events.</p>\n","!type":"fn(fn?: fn(), scope?: ?, args?: [?], cancelOnDelay?: bool)","prototype":{"id":{"!type":"number","!doc":"<p>The id of the currently pending invocation.  Will be set to <code>null</code> if there is no\ninvocation pending.</p>\n"},"cancel":{"!type":"fn() -> !this","!doc":"<p>Cancel the last queued timeout</p>\n"},"delay":{"!type":"fn(newDelay: number, newFn?: fn(), newScope?: ?, newArgs?: [?]) -> !this","!doc":"<p>By default, cancels any pending timeout and queues a new one.</p>\n\n<p>If the <code>cancelOnDelay</code> parameter was specified as <code>false</code> in the constructor, this does not cancel and\nreschedule, but just updates the call settings, <code>newDelay</code>, <code>newFn</code>, <code>newScope</code> or <code>newArgs</code>, whichever are passed.</p>\n"}}},"Event":{"!doc":"<p>Represents single event type that an Observable object listens to.\nAll actual listeners are tracked inside here.  When the event fires,\nit calls all the registered listener functions.</p>\n","prototype":{"isEvent":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated Event, or subclass thereof.</p>\n"}}},"Filter":{"!doc":"<p>Represents a filter that can be applied to a <a href=\"#!/api/Ext.util.MixedCollection\" rel=\"Ext.util.MixedCollection\" class=\"docClass\">MixedCollection</a>. Can either simply\nfilter on a property/value pair or pass in a filter function with custom logic. Filters are always used in the\ncontext of MixedCollections, though <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Store</a>s frequently create them when filtering and searching\non their records. Example usage:</p>\n\n<pre><code>//set up a fictional MixedCollection containing a few people to filter on\nvar allNames = new <a href=\"#!/api/Ext.util.MixedCollection\" rel=\"Ext.util.MixedCollection\" class=\"docClass\">Ext.util.MixedCollection</a>();\nallNames.addAll([\n    {id: 1, name: 'Ed',    age: 25},\n    {id: 2, name: 'Jamie', age: 37},\n    {id: 3, name: 'Abe',   age: 32},\n    {id: 4, name: 'Aaron', age: 26},\n    {id: 5, name: 'David', age: 32}\n]);\n\nvar ageFilter = new <a href=\"#!/api/Ext.util.Filter\" rel=\"Ext.util.Filter\" class=\"docClass\">Ext.util.Filter</a>({\n    property: 'age',\n    value   : 32\n});\n\nvar longNameFilter = new <a href=\"#!/api/Ext.util.Filter\" rel=\"Ext.util.Filter\" class=\"docClass\">Ext.util.Filter</a>({\n    filterFn: function(item) {\n        return item.name.length &gt; 4;\n    }\n});\n\n//a new MixedCollection with the 3 names longer than 4 characters\nvar longNames = allNames.filter(longNameFilter);\n\n//a new MixedCollection with the 2 people of age 32:\nvar youngFolk = allNames.filter(ageFilter);\n</code></pre>\n","!type":"fn(config?: Ext_util_Filter_cfg)","prototype":{"!proto":"Ext.Base.prototype","anyMatch":{"!type":"bool","!doc":"<p>True to allow any match - no regex start/end line anchors will be added.</p>\n"},"caseSensitive":{"!type":"bool","!doc":"<p>True to make the regex case sensitive (adds 'i' switch to regex).</p>\n"},"exactMatch":{"!type":"bool","!doc":"<p>True to force exact match (^ and $ characters added to the regex). Ignored if anyMatch is true.</p>\n"},"filterFn":{"!type":"fn()","!doc":"<p>A custom filter function which is passed each item in the <a href=\"#!/api/Ext.util.MixedCollection\" rel=\"Ext.util.MixedCollection\" class=\"docClass\">Ext.util.MixedCollection</a> in turn. Should return\n<code>true</code> to accept each item or <code>false</code> to reject it.</p>\n"},"id":{"!type":"string","!doc":"<p>An identifier by which this Filter is indexed in a <a href=\"#!/api/Ext.data.Store-property-filters\" rel=\"Ext.data.Store-property-filters\" class=\"docClass\">Store's filters collection</a></p>\n\n<p>Identified Filters may be individually removed from a Store's filter set by using <a href=\"#!/api/Ext.data.Store-method-removeFilter\" rel=\"Ext.data.Store-method-removeFilter\" class=\"docClass\">Ext.data.Store.removeFilter</a>.</p>\n\n<p>Anonymous Filters may be removed en masse by passing <code>null</code> to <a href=\"#!/api/Ext.data.Store-method-removeFilter\" rel=\"Ext.data.Store-method-removeFilter\" class=\"docClass\">Ext.data.Store.removeFilter</a>.</p>\n"},"operator":{"!type":"string","!doc":"<p>The operator to use to compare the <a href=\"#!/api/Ext.util.Filter-cfg-property\" rel=\"Ext.util.Filter-cfg-property\" class=\"docClass\">property</a> to this Filter's <a href=\"#!/api/Ext.util.Filter-cfg-value\" rel=\"Ext.util.Filter-cfg-value\" class=\"docClass\">value</a></p>\n\n<p>Possible values are:\n   * &lt;\n   * &lt;=\n   * =\n   * >=\n   * >\n   * !=</p>\n"},"property":{"!type":"string","!doc":"<p>The property to filter on. Required unless a <a href=\"#!/api/Ext.util.Filter-cfg-filterFn\" rel=\"Ext.util.Filter-cfg-filterFn\" class=\"docClass\">filterFn</a> is passed</p>\n"},"root":{"!type":"string","!doc":"<p>Optional root property. This is mostly useful when filtering a Store, in which case we set the root to 'data' to\nmake the filter pull the <a href=\"#!/api/Ext.util.Filter-cfg-property\" rel=\"Ext.util.Filter-cfg-property\" class=\"docClass\">property</a> out of the data object of each item</p>\n"},"value":{"!type":"+Mixed","!doc":"<p>The value to filter on. Required unless a <a href=\"#!/api/Ext.util.Filter-cfg-filterFn\" rel=\"Ext.util.Filter-cfg-filterFn\" class=\"docClass\">filterFn</a> is passed.</p>\n"},"disabled":{"!type":"bool","!doc":"<p>Setting this property to <code>true</code> disables this individual Filter so that it no longer contributes to a <a href=\"#!/api/Ext.data.Store-property-filters\" rel=\"Ext.data.Store-property-filters\" class=\"docClass\">Store's filter set</a></p>\n\n<p>When disabled, the next time the store is filtered, the Filter plays no part in filtering and records eliminated by it may rejoin the dataset.</p>\n"},"operatorFns":{"!type":"?"},"createFilterFn":{"!type":"fn() -> !this","!doc":"<p>Creates a filter function for the configured property/value/anyMatch/caseSensitive options for this Filter</p>\n"},"createValueMatcher":{"!type":"fn() -> !this","!doc":"<p>Returns a regular expression based on the given value and matching options</p>\n"},"getRoot":{"!type":"fn(item: ?) -> ?","!doc":"<p>Returns the root property of the given item, based on the configured <a href=\"#!/api/Ext.util.Filter-cfg-root\" rel=\"Ext.util.Filter-cfg-root\" class=\"docClass\">root</a> property</p>\n"},"serialize":{"!type":"fn() -> !this"},"setFilterFn":{"!type":"fn(filterFn: fn()) -> !this","!doc":"<p>Changes the filtering function which this Filter uses to choose items to include.</p>\n\n<p>This replaces any configured <a href=\"#!/api/Ext.util.Filter-cfg-filterFn\" rel=\"Ext.util.Filter-cfg-filterFn\" class=\"docClass\">filterFn</a> and overrides any <a href=\"#!/api/Ext.util.Filter-cfg-property\" rel=\"Ext.util.Filter-cfg-property\" class=\"docClass\">property</a> and {@link #cfg-value) settings.</p>\n"},"setValue":{"!type":"fn(value: +Mixed) -> !this","!doc":"<p>Changes the value that this filter tests its configured (@link #cfg-property} with.</p>\n"}},"createFilterFn":{"!type":"fn(filters: [+Ext.util.Filter]) -> fn()","!doc":"<p>Creates a single filter function which encapsulates the passed Filter array.</p>\n"}},"Format":{"!doc":"<p>This class is a centralized place for formatting functions. It includes\nfunctions to format various different types of data, such as text, dates and numeric values.</p>\n\n<h2>Localization</h2>\n\n<p>This class contains several options for localization. These can be set once the library has loaded,\nall calls to the functions from that point will use the locale settings that were specified.</p>\n\n<p>Options include:</p>\n\n<ul>\n<li>thousandSeparator</li>\n<li>decimalSeparator</li>\n<li>currenyPrecision</li>\n<li>currencySign</li>\n<li>currencyAtEnd</li>\n</ul>\n\n\n<p>This class also uses the default date format defined here: <a href=\"#!/api/Ext.Date-property-defaultFormat\" rel=\"Ext.Date-property-defaultFormat\" class=\"docClass\">Ext.Date.defaultFormat</a>.</p>\n\n<h2>Using with renderers</h2>\n\n<p>There are two helper functions that return a new function that can be used in conjunction with\ngrid renderers:</p>\n\n<pre><code>columns: [{\n    dataIndex: 'date',\n    renderer: <a href=\"#!/api/Ext.util.Format-method-dateRenderer\" rel=\"Ext.util.Format-method-dateRenderer\" class=\"docClass\">Ext.util.Format.dateRenderer</a>('Y-m-d')\n}, {\n    dataIndex: 'time',\n    renderer: <a href=\"#!/api/Ext.util.Format-method-numberRenderer\" rel=\"Ext.util.Format-method-numberRenderer\" class=\"docClass\">Ext.util.Format.numberRenderer</a>('0.000')\n}]\n</code></pre>\n\n<p>Functions that only take a single argument can also be passed directly:</p>\n\n<pre><code>columns: [{\n    dataIndex: 'cost',\n    renderer: <a href=\"#!/api/Ext.util.Format-method-usMoney\" rel=\"Ext.util.Format-method-usMoney\" class=\"docClass\">Ext.util.Format.usMoney</a>\n}, {\n    dataIndex: 'productCode',\n    renderer: <a href=\"#!/api/Ext.util.Format-method-uppercase\" rel=\"Ext.util.Format-method-uppercase\" class=\"docClass\">Ext.util.Format.uppercase</a>\n}]\n</code></pre>\n\n<h2>Using with XTemplates</h2>\n\n<p>XTemplates can also directly use <a href=\"#!/api/Ext.util.Format\" rel=\"Ext.util.Format\" class=\"docClass\">Ext.util.Format</a> functions:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">Ext.XTemplate</a>([\n    'Date: {startDate:date(\"Y-m-d\")}',\n    'Cost: {cost:usMoney}'\n]);\n</code></pre>\n","currencyAtEnd":{"!type":"bool","!doc":"<p>This may be set to <code>true</code> to make the <a href=\"#!/api/Ext.util.Format-method-currency\" rel=\"Ext.util.Format-method-currency\" class=\"docClass\">currency</a> function\nappend the currency sign to the formatted value.</p>\n\n<p>This may be overridden in a locale file.</p>\n"},"currencyPrecision":{"!type":"number","!doc":"<p>The number of decimal places that the <a href=\"#!/api/Ext.util.Format-method-currency\" rel=\"Ext.util.Format-method-currency\" class=\"docClass\">currency</a> function displays.</p>\n\n<p>This may be overridden in a locale file.</p>\n"},"currencySign":{"!type":"string","!doc":"<p>The currency sign that the <a href=\"#!/api/Ext.util.Format-method-currency\" rel=\"Ext.util.Format-method-currency\" class=\"docClass\">currency</a> function displays.</p>\n\n<p>This may be overridden in a locale file.</p>\n"},"decimalSeparator":{"!type":"string","!doc":"<p>The character that the <a href=\"#!/api/Ext.util.Format-method-number\" rel=\"Ext.util.Format-method-number\" class=\"docClass\">number</a> function uses as a decimal point.</p>\n\n<p>This may be overridden in a locale file.</p>\n"},"thousandSeparator":{"!type":"string","!doc":"<p>The character that the <a href=\"#!/api/Ext.util.Format-method-number\" rel=\"Ext.util.Format-method-number\" class=\"docClass\">number</a> function uses as a thousand separator.</p>\n\n<p>This may be overridden in a locale file.</p>\n"},"attributes":{"!type":"fn(attributes: ?) -> !this","!doc":"<p>Formats an object of name value properties as HTML element attribute values suitable for using when creating textual markup.</p>\n"},"capitalize":{"!type":"fn(string: string) -> string","!doc":"<p>Alias for <a href=\"#!/api/Ext.String-method-capitalize\" rel=\"Ext.String-method-capitalize\" class=\"docClass\">Ext.String.capitalize</a>.</p>\n"},"currency":{"!type":"fn(value: number|string, sign?: string, decimals?: number, end?: bool) -> string","!doc":"<p>Format a number as a currency.</p>\n"},"date":{"!type":"fn(value: string|+Date, format?: string) -> string","!doc":"<p>Formats the passed date using the specified format pattern.</p>\n"},"dateRenderer":{"!type":"fn(format: string) -> fn()","!doc":"<p>Returns a date rendering function that can be reused to apply a date format multiple times efficiently.</p>\n"},"defaultValue":{"!type":"fn(value: ?, defaultValue?: string) -> string","!doc":"<p>Checks a reference and converts it to the default value if it's empty.</p>\n"},"ellipsis":{"!type":"fn(value: string, length: number, word?: bool) -> string","!doc":"<p>Alias for <a href=\"#!/api/Ext.String-method-ellipsis\" rel=\"Ext.String-method-ellipsis\" class=\"docClass\">Ext.String.ellipsis</a>.</p>\n"},"escapeRegex":{"!type":"fn(str: string) -> string","!doc":"<p>Escapes the passed string for use in a regular expression.</p>\n"},"fileSize":{"!type":"fn(size: number|string) -> string","!doc":"<p>Simple format for a file size (xxx bytes, xxx KB, xxx MB).</p>\n"},"format":{"!type":"fn(string: string, values: +Mixed) -> string","!doc":"<p>Alias for <a href=\"#!/api/Ext.String-method-format\" rel=\"Ext.String-method-format\" class=\"docClass\">Ext.String.format</a>.</p>\n"},"htmlDecode":{"!type":"fn(value: string) -> string","!doc":"<p>Alias for <a href=\"#!/api/Ext.String-method-htmlDecode\" rel=\"Ext.String-method-htmlDecode\" class=\"docClass\">Ext.String.htmlDecode</a>.</p>\n"},"htmlEncode":{"!type":"fn(value: string) -> string","!doc":"<p>Alias for <a href=\"#!/api/Ext.String-method-htmlEncode\" rel=\"Ext.String-method-htmlEncode\" class=\"docClass\">Ext.String.htmlEncode</a>.</p>\n"},"leftPad":{"!type":"fn(string: string, size: number, character?: string) -> string","!doc":"<p>Alias for <a href=\"#!/api/Ext.String-method-leftPad\" rel=\"Ext.String-method-leftPad\" class=\"docClass\">Ext.String.leftPad</a>.</p>\n"},"lowercase":{"!type":"fn(value: string) -> string","!doc":"<p>Converts a string to all lower case letters.</p>\n"},"math":{"!type":"fn() -> fn()","!doc":"<p>It does simple math for use in a template, for example:</p>\n\n<pre><code>var tpl = new <a href=\"#!/api/Ext.Template\" rel=\"Ext.Template\" class=\"docClass\">Ext.Template</a>('{value} * 10 = {value:math(\"* 10\")}');\n</code></pre>\n"},"nl2br":{"!type":"fn(v: string) -> string","!doc":"<p>Converts newline characters to the HTML tag <code>&lt;br/&gt;</code></p>\n"},"number":{"!type":"fn(v: number, format: string) -> string","!doc":"<p>Formats the passed number according to the passed format string.</p>\n\n<p>The number of digits after the decimal separator character specifies the number of\ndecimal places in the resulting string. The <em>local-specific</em> decimal character is\nused in the result.</p>\n\n<p>The <em>presence</em> of a thousand separator character in the format string specifies that\nthe <em>locale-specific</em> thousand separator (if any) is inserted separating thousand groups.</p>\n\n<p>By default, \",\" is expected as the thousand separator, and \".\" is expected as the decimal separator.</p>\n\n<h2>New to Ext JS 4</h2>\n\n<p>Locale-specific characters are always used in the formatted output when inserting\nthousand and decimal separators.</p>\n\n<p>The format string must specify separator characters according to US/UK conventions (\",\" as the\nthousand separator, and \".\" as the decimal separator)</p>\n\n<p>To allow specification of format strings according to local conventions for separator characters, add\nthe string <code>/i</code> to the end of the format string.</p>\n\n<p>examples (123456.789):</p>\n\n<ul>\n<li><code>0</code> - (123456) show only digits, no precision</li>\n<li><code>0.00</code> - (123456.78) show only digits, 2 precision</li>\n<li><code>0.0000</code> - (123456.7890) show only digits, 4 precision</li>\n<li><code>0,000</code> - (123,456) show comma and digits, no precision</li>\n<li><code>0,000.00</code> - (123,456.78) show comma and digits, 2 precision</li>\n<li><code>0,0.00</code> - (123,456.78) shortcut method, show comma and digits, 2 precision</li>\n<li><code>0.####</code> - (123,456,789) Allow maximum 4 decimal places, but do not right pad with zeroes</li>\n</ul>\n\n"},"numberRenderer":{"!type":"fn(format: string) -> fn()","!doc":"<p>Returns a number rendering function that can be reused to apply a number format multiple\ntimes efficiently.</p>\n"},"parseBox":{"!type":"fn(v: number|string) -> ?","!doc":"<p>Parses a number or string representing margin sizes into an object.\nSupports CSS-style margin declarations (e.g. 10, \"10\", \"10 10\", \"10 10 10\" and\n\"10 10 10 10\" are all valid options and would return the same result).</p>\n"},"plural":{"!type":"fn(value: number, singular: string, plural?: string) -> !this","!doc":"<p>Selectively do a plural form of a word based on a numeric value. For example, in a template,\n<code>{commentCount:plural(\"Comment\")}</code>  would result in <code>\"1 Comment\"</code> if commentCount was 1 or\nwould be <code>\"x Comments\"</code> if the value is 0 or greater than 1.</p>\n"},"round":{"!type":"fn(value: number|string, precision: number) -> number","!doc":"<p>Rounds the passed number to the required decimal precision.</p>\n"},"stripScripts":{"!type":"fn(value: ?) -> string","!doc":"<p>Strips all script tags.</p>\n"},"stripTags":{"!type":"fn(value: ?) -> string","!doc":"<p>Strips all HTML tags.</p>\n"},"substr":{"!type":"fn(value: string, start: number, length: number) -> string","!doc":"<p>Returns a substring from within an original string.</p>\n"},"trim":{"!type":"fn(string: string) -> string","!doc":"<p>Alias for <a href=\"#!/api/Ext.String-method-trim\" rel=\"Ext.String-method-trim\" class=\"docClass\">Ext.String.trim</a>.</p>\n"},"undef":{"!type":"fn(value: ?) -> ?","!doc":"<p>Checks a reference and converts it to empty string if it is undefined.</p>\n"},"uppercase":{"!type":"fn(value: string) -> string","!doc":"<p>Converts a string to all upper case letters.</p>\n"},"usMoney":{"!type":"fn(value: number|string) -> string","!doc":"<p>Format a number as US currency.</p>\n"}},"Grouper":{"!doc":"<p>Represents a single grouper that can be applied to a Store. The grouper works\nin the same fashion as the <a href=\"#!/api/Ext.util.Sorter\" rel=\"Ext.util.Sorter\" class=\"docClass\">Ext.util.Sorter</a>.</p>\n","!type":"fn(config: Ext_util_Grouper_cfg)","prototype":{"!proto":"Ext.util.Sorter.prototype","isGrouper":{"!type":"bool","!doc":"<p>End Definitions</p>\n"},"getGroupString":{"!type":"fn(instance: +Ext.data.Model) -> string","!doc":"<p>Returns the value for grouping to be used.</p>\n"}}},"HashMap":{"!doc":"<p>Represents a collection of a set of key and value pairs. Each key in the HashMap\nmust be unique, the same key cannot exist twice. Access to items is provided via\nthe key only. Sample usage:</p>\n\n<pre><code>var map = new <a href=\"#!/api/Ext.util.HashMap\" rel=\"Ext.util.HashMap\" class=\"docClass\">Ext.util.HashMap</a>();\nmap.add('key1', 1);\nmap.add('key2', 2);\nmap.add('key3', 3);\n\nmap.each(function(key, value, length){\n    console.log(key, value, length);\n});\n</code></pre>\n\n<p>The HashMap is an unordered class,\nthere is no guarantee when iterating over the items that they will be in any particular\norder. If this is required, then use a <a href=\"#!/api/Ext.util.MixedCollection\" rel=\"Ext.util.MixedCollection\" class=\"docClass\">Ext.util.MixedCollection</a>.</p>\n","!type":"fn(config?: Ext_util_HashMap_cfg)","prototype":{"!proto":"Ext.Base.prototype","keyFn":{"!type":"fn()","!doc":"<p>A function that is used to retrieve a default key for a passed object.\nA default is provided that returns the <code>id</code> property on the object. This function is only used\nif the <code>add</code> method is called with a single argument.</p>\n"},"generation":{"!type":"number","!doc":"<p>Mutation counter which is incremented upon add and remove.</p>\n"},"add":{"!type":"fn(this: +Ext.util.HashMap, key: string, value: ?, eOpts: ?)","!doc":"<p>Fires when a new item is added to the hash.</p>\n"},"clear":{"!type":"fn(this: +Ext.util.HashMap, eOpts: ?)","!doc":"<p>Fires when the hash is cleared.</p>\n"},"clone":{"!type":"fn() -> +Ext.util.HashMap","!doc":"<p>Performs a shallow copy on this hash.</p>\n"},"contains":{"!type":"fn(value: ?) -> bool","!doc":"<p>Checks whether a value exists in the hash.</p>\n"},"containsKey":{"!type":"fn(key: string) -> bool","!doc":"<p>Checks whether a key exists in the hash.</p>\n"},"each":{"!type":"fn(fn: fn(), scope?: ?) -> +Ext.util.HashMap","!doc":"<p>Executes the specified function once for each item in the hash.\nReturning false from the function will cease iteration.</p>\n"},"findKey":{"!type":"fn(value: ?) -> ?","!doc":"<p>Find the key for a value.</p>\n"},"get":{"!type":"fn(key: string) -> ?","!doc":"<p>Retrieves an item with a particular key.</p>\n"},"getArray":{"!type":"fn(isKey: bool) -> [?]","!doc":"<p>Gets either the keys/values in an array from the hash.</p>\n"},"getCount":{"!type":"fn() -> number","!doc":"<p>Gets the number of items in the hash.</p>\n"},"getData":{"!type":"fn(key: string, value: ?) -> [?]","!doc":"<p>Implementation for being able to extract the key from an object if only\na single argument is passed.</p>\n"},"getKey":{"!type":"fn(o: ?) -> string","!doc":"<p>Extracts the key from an object. This is a default implementation, it may be overridden</p>\n"},"getKeys":{"!type":"fn() -> [?]","!doc":"<p>Return all of the keys in the hash.</p>\n"},"getValues":{"!type":"fn() -> [?]","!doc":"<p>Return all of the values in the hash.</p>\n"},"remove":{"!type":"fn(this: +Ext.util.HashMap, key: string, value: ?, eOpts: ?)","!doc":"<p>Fires when an item is removed from the hash.</p>\n"},"removeAtKey":{"!type":"fn(key: string) -> bool","!doc":"<p>Remove an item from the hash.</p>\n"},"replace":{"!type":"fn(this: +Ext.util.HashMap, key: string, value: ?, old: ?, eOpts: ?)","!doc":"<p>Fires when an item is replaced in the hash.</p>\n"}}},"History":{"!doc":"<p>History management component that allows you to register arbitrary tokens that signify application\nhistory state on navigation actions.  You can then handle the history <a href=\"#!/api/Ext.util.History-event-change\" rel=\"Ext.util.History-event-change\" class=\"docClass\">change</a> event in order\nto reset your application UI to the appropriate state when the user navigates forward or backward through\nthe browser history stack.</p>\n\n<h2>Initializing</h2>\n\n<p>The <a href=\"#!/api/Ext.util.History-method-init\" rel=\"Ext.util.History-method-init\" class=\"docClass\">init</a> method of the History object must be called before using History. This sets up the internal\nstate and must be the first thing called before using History.</p>\n","!type":"fn()","prototype":{"!proto":"Ext.Base.prototype"},"fieldId":{"!type":"string","!doc":"<p>The id of the hidden field required for storing the current history token.</p>\n"},"iframeId":{"!type":"string","!doc":"<p>The id of the iframe required by IE to manage the history stack.</p>\n"},"useTopWindow":{"!type":"bool","!doc":"<p>True to use <code>window.top.location.hash</code> or false to use <code>window.location.hash</code>.</p>\n"},"add":{"!type":"fn(token: string, preventDuplicates?: bool) -> !this","!doc":"<p>Add a new token to the history stack. This can be any arbitrary value, although it would\ncommonly be the concatenation of a component id and another id marking the specific history\nstate of that component. Example usage:</p>\n\n<pre><code>// Handle tab changes on a TabPanel\ntabPanel.on('tabchange', function(tabPanel, tab){\n     <a href=\"#!/api/Ext.util.History-method-add\" rel=\"Ext.util.History-method-add\" class=\"docClass\">Ext.History.add</a>(tabPanel.id + ':' + tab.id);\n});\n</code></pre>\n"},"back":{"!type":"fn() -> !this","!doc":"<p>Programmatically steps back one step in browser history (equivalent to the user pressing the Back button).</p>\n"},"checkIFrame":{"!type":"fn() -> !this"},"doSave":{"!type":"fn() -> !this"},"forward":{"!type":"fn() -> !this","!doc":"<p>Programmatically steps forward one step in browser history (equivalent to the user pressing the Forward button).</p>\n"},"getHash":{"!type":"fn() -> !this"},"getToken":{"!type":"fn() -> string","!doc":"<p>Retrieves the currently-active history token.</p>\n"},"handleStateChange":{"!type":"fn(token: ?) -> !this"},"init":{"!type":"fn(onReady?: fn(), scope?: ?) -> !this","!doc":"<p>Initializes the global History instance.</p>\n"},"setHash":{"!type":"fn(hash: ?) -> !this"},"startUp":{"!type":"fn() -> !this"},"updateIFrame":{"!type":"fn(token: ?) -> !this"},"change":{"!type":"fn(token: string, eOpts: ?)","!doc":"<p>Fires when navigation back or forwards within the local page's history occurs.</p>\n"},"ready":{"!type":"fn(The: +Ext.util.History, eOpts: ?)","!doc":"<p>Fires when the <a href=\"#!/api/Ext.util.History\" rel=\"Ext.util.History\" class=\"docClass\">Ext.util.History</a> singleton has been initialized and is ready for use.</p>\n"}},"Inflector":{"!doc":"<p>General purpose inflector class that <a href=\"#!/api/Ext.util.Inflector-method-pluralize\" rel=\"Ext.util.Inflector-method-pluralize\" class=\"docClass\">pluralizes</a>, <a href=\"#!/api/Ext.util.Inflector-method-singularize\" rel=\"Ext.util.Inflector-method-singularize\" class=\"docClass\">singularizes</a> and\n<a href=\"#!/api/Ext.util.Inflector-method-ordinalize\" rel=\"Ext.util.Inflector-method-ordinalize\" class=\"docClass\">ordinalizes</a> words. Sample usage:</p>\n\n<pre><code>//turning singular words into plurals\n<a href=\"#!/api/Ext.util.Inflector-method-pluralize\" rel=\"Ext.util.Inflector-method-pluralize\" class=\"docClass\">Ext.util.Inflector.pluralize</a>('word'); //'words'\n<a href=\"#!/api/Ext.util.Inflector-method-pluralize\" rel=\"Ext.util.Inflector-method-pluralize\" class=\"docClass\">Ext.util.Inflector.pluralize</a>('person'); //'people'\n<a href=\"#!/api/Ext.util.Inflector-method-pluralize\" rel=\"Ext.util.Inflector-method-pluralize\" class=\"docClass\">Ext.util.Inflector.pluralize</a>('sheep'); //'sheep'\n\n//turning plurals into singulars\n<a href=\"#!/api/Ext.util.Inflector-method-singularize\" rel=\"Ext.util.Inflector-method-singularize\" class=\"docClass\">Ext.util.Inflector.singularize</a>('words'); //'word'\n<a href=\"#!/api/Ext.util.Inflector-method-singularize\" rel=\"Ext.util.Inflector-method-singularize\" class=\"docClass\">Ext.util.Inflector.singularize</a>('people'); //'person'\n<a href=\"#!/api/Ext.util.Inflector-method-singularize\" rel=\"Ext.util.Inflector-method-singularize\" class=\"docClass\">Ext.util.Inflector.singularize</a>('sheep'); //'sheep'\n\n//ordinalizing numbers\n<a href=\"#!/api/Ext.util.Inflector-method-ordinalize\" rel=\"Ext.util.Inflector-method-ordinalize\" class=\"docClass\">Ext.util.Inflector.ordinalize</a>(11); //\"11th\"\n<a href=\"#!/api/Ext.util.Inflector-method-ordinalize\" rel=\"Ext.util.Inflector-method-ordinalize\" class=\"docClass\">Ext.util.Inflector.ordinalize</a>(21); //\"21st\"\n<a href=\"#!/api/Ext.util.Inflector-method-ordinalize\" rel=\"Ext.util.Inflector-method-ordinalize\" class=\"docClass\">Ext.util.Inflector.ordinalize</a>(1043); //\"1043rd\"\n</code></pre>\n\n<h1>Customization</h1>\n\n<p>The Inflector comes with a default set of US English pluralization rules. These can be augmented with additional\nrules if the default rules do not meet your application's requirements, or swapped out entirely for other languages.\nHere is how we might add a rule that pluralizes \"ox\" to \"oxen\":</p>\n\n<pre><code><a href=\"#!/api/Ext.util.Inflector-method-plural\" rel=\"Ext.util.Inflector-method-plural\" class=\"docClass\">Ext.util.Inflector.plural</a>(/^(ox)$/i, \"$1en\");\n</code></pre>\n\n<p>Each rule consists of two items - a regular expression that matches one or more rules, and a replacement string. In\nthis case, the regular expression will only match the string \"ox\", and will replace that match with \"oxen\". Here's\nhow we could add the inverse rule:</p>\n\n<pre><code><a href=\"#!/api/Ext.util.Inflector-method-singular\" rel=\"Ext.util.Inflector-method-singular\" class=\"docClass\">Ext.util.Inflector.singular</a>(/^(ox)en$/i, \"$1\");\n</code></pre>\n\n<p>Note that the ox/oxen rules are present by default.</p>\n","plurals":{"!type":"[?]","!doc":"<p>The registered plural tuples. Each item in the array should contain two items - the first must be a regular\nexpression that matchers the singular form of a word, the second must be a String that replaces the matched\npart of the regular expression. This is managed by the <a href=\"#!/api/Ext.util.Inflector-method-plural\" rel=\"Ext.util.Inflector-method-plural\" class=\"docClass\">plural</a> method.</p>\n"},"singulars":{"!type":"[?]","!doc":"<p>The set of registered singular matchers. Each item in the array should contain two items - the first must be a\nregular expression that matches the plural form of a word, the second must be a String that replaces the\nmatched part of the regular expression. This is managed by the <a href=\"#!/api/Ext.util.Inflector-method-singular\" rel=\"Ext.util.Inflector-method-singular\" class=\"docClass\">singular</a> method.</p>\n"},"uncountable":{"!type":"[string]","!doc":"<p>The registered uncountable words</p>\n"},"classify":{"!type":"fn(word: string) -> string","!doc":"<p>Returns the correct <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Model</a> name for a given string. Mostly used internally by the data\npackage</p>\n"},"clearPlurals":{"!type":"fn() -> !this","!doc":"<p>Removes all registered pluralization rules</p>\n"},"clearSingulars":{"!type":"fn() -> !this","!doc":"<p>Removes all registered singularization rules</p>\n"},"isTransnumeral":{"!type":"fn(word: string) -> bool","!doc":"<p>Returns true if the given word is transnumeral (the word is its own singular and plural form - e.g. sheep, fish)</p>\n"},"ordinalize":{"!type":"fn(number: number) -> string","!doc":"<p>Ordinalizes a given number by adding a prefix such as 'st', 'nd', 'rd' or 'th' based on the last digit of the\nnumber. 21 -> 21st, 22 -> 22nd, 23 -> 23rd, 24 -> 24th etc</p>\n"},"plural":{"!type":"fn(matcher: +RegExp, replacer: string) -> !this","!doc":"<p>Adds a new pluralization rule to the Inflector. See the intro docs for more information</p>\n"},"pluralize":{"!type":"fn(word: string) -> string","!doc":"<p>Returns the pluralized form of a word (e.g. <a href=\"#!/api/Ext.util.Inflector-method-pluralize\" rel=\"Ext.util.Inflector-method-pluralize\" class=\"docClass\">Ext.util.Inflector.pluralize</a>('word') returns 'words')</p>\n"},"singular":{"!type":"fn(matcher: +RegExp, replacer: string) -> !this","!doc":"<p>Adds a new singularization rule to the Inflector. See the intro docs for more information</p>\n"},"singularize":{"!type":"fn(word: string) -> string","!doc":"<p>Returns the singularized form of a word (e.g. <a href=\"#!/api/Ext.util.Inflector-method-singularize\" rel=\"Ext.util.Inflector-method-singularize\" class=\"docClass\">Ext.util.Inflector.singularize</a>('words') returns 'word')</p>\n"}},"KeyMap":{"!doc":"<p>Handles mapping key events to handling functions for an element or a Component. One KeyMap can be used for multiple\nactions.</p>\n\n<p>A KeyMap must be configured with a <a href=\"#!/api/Ext.util.KeyMap-cfg-target\" rel=\"Ext.util.KeyMap-cfg-target\" class=\"docClass\">target</a> as an event source which may be an Element or a Component.</p>\n\n<p>If the target is an element, then the <code>keydown</code> event will trigger the invocation of <a href=\"#!/api/Ext.util.KeyMap-cfg-binding\" rel=\"Ext.util.KeyMap-cfg-binding\" class=\"docClass\">binding</a>s.</p>\n\n<p>It is possible to configure the KeyMap with a custom <a href=\"#!/api/Ext.util.KeyMap-cfg-eventName\" rel=\"Ext.util.KeyMap-cfg-eventName\" class=\"docClass\">eventName</a> to listen for. This may be useful when the\n<a href=\"#!/api/Ext.util.KeyMap-cfg-target\" rel=\"Ext.util.KeyMap-cfg-target\" class=\"docClass\">target</a> is a Component.</p>\n\n<p>The KeyMap's event handling requires that the first parameter passed is a key event. So if the Component's event\nsignature is different, specify a <a href=\"#!/api/Ext.util.KeyMap-cfg-processEvent\" rel=\"Ext.util.KeyMap-cfg-processEvent\" class=\"docClass\">processEvent</a> configuration which accepts the event's parameters and\nreturns a key event.</p>\n\n<p>Functions specified in <a href=\"#!/api/Ext.util.KeyMap-cfg-binding\" rel=\"Ext.util.KeyMap-cfg-binding\" class=\"docClass\">binding</a>s are called with this signature : <code>(String key, <a href=\"#!/api/Ext.EventObject\" rel=\"Ext.EventObject\" class=\"docClass\">Ext.EventObject</a> e)</code> (if the\nmatch is a multi-key combination the callback will still be called only once). A KeyMap can also handle a string\nrepresentation of keys. By default KeyMap starts enabled.</p>\n\n<p>Usage:</p>\n\n<pre><code>// map one key by key code\nvar map = new <a href=\"#!/api/Ext.util.KeyMap\" rel=\"Ext.util.KeyMap\" class=\"docClass\">Ext.util.KeyMap</a>({\n    target: \"my-element\",\n    key: 13, // or <a href=\"#!/api/Ext.EventObject-property-ENTER\" rel=\"Ext.EventObject-property-ENTER\" class=\"docClass\">Ext.EventObject.ENTER</a>\n    fn: myHandler,\n    scope: myObject\n});\n\n// map multiple keys to one action by string\nvar map = new <a href=\"#!/api/Ext.util.KeyMap\" rel=\"Ext.util.KeyMap\" class=\"docClass\">Ext.util.KeyMap</a>({\n    target: \"my-element\",\n    key: \"a\\r\\n\\t\",\n    fn: myHandler,\n    scope: myObject\n});\n\n// map multiple keys to multiple actions by strings and array of codes\nvar map = new <a href=\"#!/api/Ext.util.KeyMap\" rel=\"Ext.util.KeyMap\" class=\"docClass\">Ext.util.KeyMap</a>({\n    target: \"my-element\",\n    binding: [{\n        key: [10,13],\n        fn: function(){ alert(\"Return was pressed\"); }\n    }, {\n        key: \"abc\",\n        fn: function(){ alert('a, b or c was pressed'); }\n    }, {\n        key: \"\\t\",\n        ctrl:true,\n        shift:true,\n        fn: function(){ alert('Control + shift + tab was pressed.'); }\n    }]\n});\n</code></pre>\n\n<p>Since 4.1.0, KeyMaps can bind to Components and process key-based events fired by Components.</p>\n\n<p>To bind to a Component, use the single parameter form of constructor and include the Component event name\nto listen for, and a <code>processEvent</code> implementation which returns the key event for further processing by\nthe KeyMap:</p>\n\n<pre><code>var map = new <a href=\"#!/api/Ext.util.KeyMap\" rel=\"Ext.util.KeyMap\" class=\"docClass\">Ext.util.KeyMap</a>({\n    target: myGridView,\n    eventName: 'itemkeydown',\n    processEvent: function(view, record, node, index, event) {\n\n        // Load the event with the extra information needed by the mappings\n        event.view = view;\n        event.store = view.getStore();\n        event.record = record;\n        event.index = index;\n        return event;\n    },\n    binding: {\n        key: <a href=\"#!/api/Ext.EventObject-property-DELETE\" rel=\"Ext.EventObject-property-DELETE\" class=\"docClass\">Ext.EventObject.DELETE</a>,\n        fn: function(keyCode, e) {\n            e.store.remove(e.record);\n\n            // Attempt to select the record that's now in its place\n            e.view.getSelectionModel().select(e.index);\n            e.view.el.focus();\n        }\n    }\n});\n</code></pre>\n","!type":"fn(config: Ext_util_KeyMap_cfg)","prototype":{"!proto":"Ext.Base.prototype","binding":{"!type":"?|[[?]]","!doc":"<p>Either a single object describing a handling function for s specified key (or set of keys), or\nan array of such objects.</p>\n"},"eventName":{"!type":"string","!doc":"<p>The event to listen for to pick up key events.</p>\n"},"ignoreInputFields":{"!type":"bool","!doc":"<p>Configure this as <code>true</code> if there are any input fields within the <a href=\"#!/api/Ext.util.KeyMap-cfg-target\" rel=\"Ext.util.KeyMap-cfg-target\" class=\"docClass\">target</a>, and this KeyNav\nshould not process events from input fields, (<code>&amp;lt;input&gt;, &amp;lt;textarea&gt; and elements with</code>contentEditable=\"true\"`)</p>\n"},"processEvent":{"!type":"fn()","!doc":"<p>An optional event processor function which accepts the argument list provided by the\n<a href=\"#!/api/Ext.util.KeyMap-cfg-eventName\" rel=\"Ext.util.KeyMap-cfg-eventName\" class=\"docClass\">configured event</a> of the <a href=\"#!/api/Ext.util.KeyMap-cfg-target\" rel=\"Ext.util.KeyMap-cfg-target\" class=\"docClass\">target</a>, and returns a keyEvent for processing by the KeyMap.</p>\n\n<p>This may be useful when the <a href=\"#!/api/Ext.util.KeyMap-cfg-target\" rel=\"Ext.util.KeyMap-cfg-target\" class=\"docClass\">target</a> is a Component with s complex event signature, where the event is not\nthe first parameter. Extra information from the event arguments may be injected into the event for use by the handler\nfunctions before returning it.</p>\n"},"processEventScope":{"!type":"?","!doc":"<p>The scope (<code>this</code> context) in which the <a href=\"#!/api/Ext.util.KeyMap-cfg-processEvent\" rel=\"Ext.util.KeyMap-cfg-processEvent\" class=\"docClass\">processEvent</a> method is executed.</p>\n"},"target":{"!type":"+Ext.Component|+Ext.Element|+HTMLElement|string","!doc":"<p>The object on which to listen for the event specified by the <a href=\"#!/api/Ext.util.KeyMap-cfg-eventName\" rel=\"Ext.util.KeyMap-cfg-eventName\" class=\"docClass\">eventName</a> config option.</p>\n"},"addBinding":{"!type":"fn(binding: ?|[?]) -> !this","!doc":"<p>Add a new binding to this KeyMap.</p>\n\n<p>Usage:</p>\n\n<pre><code>// Create a KeyMap\nvar map = new <a href=\"#!/api/Ext.util.KeyMap\" rel=\"Ext.util.KeyMap\" class=\"docClass\">Ext.util.KeyMap</a>(document, {\n    key: <a href=\"#!/api/Ext.EventObject-property-ENTER\" rel=\"Ext.EventObject-property-ENTER\" class=\"docClass\">Ext.EventObject.ENTER</a>,\n    fn: handleKey,\n    scope: this\n});\n\n//Add a new binding to the existing KeyMap later\nmap.addBinding({\n    key: 'abc',\n    shift: true,\n    fn: handleKey,\n    scope: this\n});\n</code></pre>\n"},"checkModifiers":{"!type":"fn(binding: ?, event: +Ext.EventObject) -> bool","!doc":"<p>Check if the modifiers on the event match those on the binding</p>\n"},"destroy":{"!type":"fn(removeTarget: bool) -> !this","!doc":"<p>Destroys the KeyMap instance and removes all handlers.</p>\n"},"disable":{"!type":"fn() -> !this","!doc":"<p>Disable this KeyMap</p>\n"},"enable":{"!type":"fn() -> !this","!doc":"<p>Enables this KeyMap</p>\n"},"handleTargetEvent":{"!type":"fn(event: +Ext.EventObject) -> !this","!doc":"<p>Process the <a href=\"#!/api/Ext.util.KeyMap-cfg-eventName\" rel=\"Ext.util.KeyMap-cfg-eventName\" class=\"docClass\">event</a> from the <a href=\"#!/api/Ext.util.KeyMap-cfg-target\" rel=\"Ext.util.KeyMap-cfg-target\" class=\"docClass\">target</a>.</p>\n"},"isEnabled":{"!type":"fn() -> bool","!doc":"<p>Returns true if this KeyMap is enabled</p>\n"},"legacyConstructor":{"!type":"fn(el: string|+HTMLElement|+Ext.Element|+Ext.Component, binding: ?, eventName?: string) -> !this","!doc":"<p>Old constructor signature</p>\n"},"on":{"!type":"fn(key: number|[number]|?, fn: fn(), scope?: ?) -> !this","!doc":"<p>Shorthand for adding a single key listener.</p>\n"},"processBinding":{"!type":"fn(binding: ?, event: +Ext.EventObject) -> !this","!doc":"<p>Process a particular binding and fire the handler if necessary.</p>\n"},"processKeys":{"!type":"fn(keyCode: ?) -> !this"},"removeBinding":{"!type":"fn(binding: ?) -> !this","!doc":"<p>Remove a binding from this KeyMap.</p>\n"},"setDisabled":{"!type":"fn(disabled: bool) -> !this","!doc":"<p>Convenience function for setting disabled/enabled by boolean.</p>\n"},"un":{"!type":"fn(key: number|[number]|?, fn: fn(), scope?: ?) -> !this","!doc":"<p>Shorthand for removing a single key listener.</p>\n"}}},"KeyNav":{"!doc":"<p>Provides a convenient wrapper for normalized keyboard navigation. KeyNav allows you to bind navigation keys to\nfunction calls that will get called when the keys are pressed, providing an easy way to implement custom navigation\nschemes for any UI component.</p>\n\n<p>The following are all of the possible keys that can be implemented: enter, space, left, right, up, down, tab, esc,\npageUp, pageDown, del, backspace, home, end.</p>\n\n<p>Usage:</p>\n\n<pre><code>var nav = new <a href=\"#!/api/Ext.util.KeyNav\" rel=\"Ext.util.KeyNav\" class=\"docClass\">Ext.util.KeyNav</a>({\n    target : \"my-element\",\n    left   : function(e){\n        this.moveLeft(e.ctrlKey);\n    },\n    right  : function(e){\n        this.moveRight(e.ctrlKey);\n    },\n    enter  : function(e){\n        this.save();\n    },\n\n    // Binding may be a function specifiying fn, scope and defaultAction\n    esc: {\n        fn: this.onEsc,\n        defaultEventAction: false\n    },\n    scope : this\n});\n</code></pre>\n","!type":"fn(config: Ext_util_KeyNav_cfg)","prototype":{"!proto":"Ext.Base.prototype","defaultEventAction":{"!type":"string","!doc":"<p>The method to call on the <a href=\"#!/api/Ext.EventObject\" rel=\"Ext.EventObject\" class=\"docClass\">Ext.EventObject</a> after this KeyNav intercepts a key. Valid values are <a href=\"#!/api/Ext.EventObject-method-stopEvent\" rel=\"Ext.EventObject-method-stopEvent\" class=\"docClass\">Ext.EventObject.stopEvent</a>, <a href=\"#!/api/Ext.EventObject-method-preventDefault\" rel=\"Ext.EventObject-method-preventDefault\" class=\"docClass\">Ext.EventObject.preventDefault</a> and <a href=\"#!/api/Ext.EventObject-method-stopPropagation\" rel=\"Ext.EventObject-method-stopPropagation\" class=\"docClass\">Ext.EventObject.stopPropagation</a>.</p>\n\n<p>If a falsy value is specified, no method is called on the key event.</p>\n"},"disabled":{"!type":"bool","!doc":"<p>True to disable this KeyNav instance.</p>\n"},"eventName":{"!type":"string","!doc":"<p>The event to listen for to pick up key events.</p>\n"},"forceKeyDown":{"!type":"bool","!doc":"<p>Handle the keydown event instead of keypress. KeyNav automatically does this for IE since IE does not propagate\nspecial keys on keypress, but setting this to true will force other browsers to also handle keydown instead of\nkeypress.</p>\n"},"ignoreInputFields":{"!type":"bool","!doc":"<p>Configure this as <code>true</code> if there are any input fields within the <a href=\"#!/api/Ext.util.KeyNav-cfg-target\" rel=\"Ext.util.KeyNav-cfg-target\" class=\"docClass\">target</a>, and this KeyNav\nshould not process events from input fields, (<code>&amp;lt;input&gt;, &amp;lt;textarea&gt; and elements with</code>contentEditable=\"true\"`)</p>\n"},"keyMap":{"!type":"+Ext.util.KeyMap","!doc":"<p>An optional pre-existing <a href=\"#!/api/Ext.util.KeyMap\" rel=\"Ext.util.KeyMap\" class=\"docClass\">KeyMap</a> to use to listen for key events. If not specified,\none is created.</p>\n"},"processEvent":{"!type":"fn()","!doc":"<p>An optional event processor function which accepts the argument list provided by the <a href=\"#!/api/Ext.util.KeyNav-cfg-eventName\" rel=\"Ext.util.KeyNav-cfg-eventName\" class=\"docClass\">configured\nevent</a> of the <a href=\"#!/api/Ext.util.KeyNav-cfg-target\" rel=\"Ext.util.KeyNav-cfg-target\" class=\"docClass\">target</a>, and returns a keyEvent for processing by the KeyMap.</p>\n\n<p>This may be useful when the <a href=\"#!/api/Ext.util.KeyNav-cfg-target\" rel=\"Ext.util.KeyNav-cfg-target\" class=\"docClass\">target</a> is a Component with s complex event signature. Extra information from\nthe event arguments may be injected into the event for use by the handler functions before returning it.</p>\n"},"processEventScope":{"!type":"?","!doc":"<p>The scope (<code>this</code> context) in which the <a href=\"#!/api/Ext.util.KeyNav-cfg-processEvent\" rel=\"Ext.util.KeyNav-cfg-processEvent\" class=\"docClass\">processEvent</a> method is executed.</p>\n"},"target":{"!type":"+Ext.Component|+Ext.Element|+HTMLElement|string","!doc":"<p>The object on which to listen for the event specified by the <a href=\"#!/api/Ext.util.KeyNav-cfg-eventName\" rel=\"Ext.util.KeyNav-cfg-eventName\" class=\"docClass\">eventName</a> config option.</p>\n"},"destroy":{"!type":"fn(removeEl: bool) -> !this","!doc":"<p>Destroy this KeyNav.</p>\n"},"disable":{"!type":"fn() -> !this","!doc":"<p>Disables this KeyNav.</p>\n"},"enable":{"!type":"fn() -> !this","!doc":"<p>Enables this KeyNav.</p>\n"},"getKeyEvent":{"!type":"fn(forceKeyDown: ?, configuredEventName: ?) -> string","!doc":"<p>Determines the event to bind to listen for keys. Defaults to the <a href=\"#!/api/Ext.util.KeyNav-cfg-eventName\" rel=\"Ext.util.KeyNav-cfg-eventName\" class=\"docClass\">eventName</a> value, but\nmay be overridden the <a href=\"#!/api/Ext.util.KeyNav-cfg-forceKeyDown\" rel=\"Ext.util.KeyNav-cfg-forceKeyDown\" class=\"docClass\">forceKeyDown</a> setting.</p>\n\n<p>The useKeyDown option on the EventManager modifies the default <a href=\"#!/api/Ext.util.KeyNav-cfg-eventName\" rel=\"Ext.util.KeyNav-cfg-eventName\" class=\"docClass\">eventName</a> to be <code>keydown</code>,\nbut a configured <a href=\"#!/api/Ext.util.KeyNav-cfg-eventName\" rel=\"Ext.util.KeyNav-cfg-eventName\" class=\"docClass\">eventName</a> takes priority over this.</p>\n"},"handleEvent":{"!type":"fn(keyCode: number, event: +Ext.EventObject, options: ?) -> !this","!doc":"<p>Method for filtering out the map argument</p>\n"},"legacyConstructor":{"!type":"fn(el: string|+HTMLElement|+Ext.Element, config: ?) -> !this","!doc":"<p>Old constructor signature.</p>\n"},"setConfig":{"!type":"fn(config: ?) -> !this","!doc":"<p>Sets up a configuration for the KeyNav.</p>\n"},"setDisabled":{"!type":"fn(disabled: bool) -> !this","!doc":"<p>Convenience function for setting disabled/enabled by boolean.</p>\n"}},"keyOptions":{"!type":"?"}},"LruCache":{"!doc":"<p>A linked <a href=\"#!/api/Ext.util.HashMap\" rel=\"Ext.util.HashMap\" class=\"docClass\">HashMap</a> implementation which maintains most recently accessed\nitems at the end of the list, and purges the cache down to the most recently accessed <a href=\"#!/api/Ext.util.LruCache-cfg-maxSize\" rel=\"Ext.util.LruCache-cfg-maxSize\" class=\"docClass\">maxSize</a> items\nupon add.</p>\n","!type":"fn(config?: Ext_util_LruCache_cfg)","prototype":{"!proto":"Ext.util.HashMap.prototype","maxSize":{"!type":"number","!doc":"<p>The maximum size the cache is allowed to grow to before further additions cause\nremoval of the least recently used entry.</p>\n"},"add":{"!type":"fn(key: ?, newValue: ?) -> ?","!doc":"<p>Adds an item to the collection. Fires the <a href=\"#!/api/Ext.util.LruCache-event-add\" rel=\"Ext.util.LruCache-event-add\" class=\"docClass\">add</a> event when complete.</p>\n"},"clear":{"!type":"fn(initial: ?) -> +Ext.util.HashMap","!doc":"<p>Removes all items from the hash.</p>\n"},"clone":{"!type":"fn() -> +Ext.util.HashMap","!doc":"<p>Performs a shallow copy on this haLruCachesh.</p>\n"},"contains":{"!type":"fn()"},"containsKey":{"!type":"fn()"},"each":{"!type":"fn(fn: fn(), scope: ?, reverse?: bool) -> +Ext.util.LruCache","!doc":"<p>Executes the specified function once for each item in the cache.\nReturning false from the function will cease iteration.</p>\n\n<p>By default, iteration is from least recently used to most recent.</p>\n\n<p>The paramaters passed to the function are:</p>\n\n<div class=\"mdetail-params\"><ul>\n<li><b>key</b> : String<p class=\"sub-desc\">The key of the item</p></li>\n<li><b>value</b> : Number<p class=\"sub-desc\">The value of the item</p></li>\n<li><b>length</b> : Number<p class=\"sub-desc\">The total number of items in the hash</p></li>\n</ul></div>\n\n"},"findKey":{"!type":"fn(value: ?) -> !this"},"get":{"!type":"fn(key: ?) -> ?","!doc":"<p>Retrieves an item with a particular key.</p>\n"},"getArray":{"!type":"fn(isKey: bool) -> [?]","!doc":"<p>Gets either the keys/values in an array from the hash.</p>\n"},"getKeys":{"!type":"fn()"},"getValues":{"!type":"fn()"},"insertBefore":{"!type":"fn(key: ?, newValue: ?, sibling: ?) -> !this"},"moveToEnd":{"!type":"fn(entry: ?) -> !this","!doc":"<p>private. Only used by internal methods.</p>\n"},"prune":{"!type":"fn() -> !this","!doc":"<p>Purge the least recently used entries if the maxSize has been exceeded.</p>\n"},"removeAtKey":{"!type":"fn(key: ?) -> bool","!doc":"<p>Remove an item from the hash.</p>\n"},"unlinkEntry":{"!type":"fn(entry: ?) -> !this","!doc":"<p>private. Only used by internal methods.</p>\n"}}},"Memento":{"!doc":"<p>This class manages a set of captured properties from an object. These captured properties\ncan later be restored to an object.</p>\n","!type":"fn(target: ?, props: string|[string])","prototype":{"!proto":"Ext.Base.prototype","data":{"!type":"?","!doc":"<p>The collection of captured properties.</p>\n"},"target":{"!type":"?","!doc":"<p>The default target object for capture/restore (passed to the constructor).</p>\n"},"capture":{"!type":"fn(props: string|[string], target: ?) -> !this","!doc":"<p>Captures the specified properties from the target object in this memento.</p>\n"},"remove":{"!type":"fn(props: string|[string]) -> !this","!doc":"<p>Removes the specified properties from this memento. These properties will not be\nrestored later without re-capturing their values.</p>\n"},"restore":{"!type":"fn(props: string|[string], clear: bool, target: ?) -> !this","!doc":"<p>Restores the specified properties from this memento to the target object.</p>\n"},"restoreAll":{"!type":"fn(clear: bool, target: ?) -> !this","!doc":"<p>Restores all captured properties in this memento to the target object.</p>\n"}}},"MixedCollection":{"!doc":"<p>Represents a collection of a set of key and value pairs. Each key in the MixedCollection\nmust be unique, the same key cannot exist twice. This collection is ordered, items in the\ncollection can be accessed by index  or via the key. Newly added items are added to\nthe end of the collection. This class is similar to <a href=\"#!/api/Ext.util.HashMap\" rel=\"Ext.util.HashMap\" class=\"docClass\">Ext.util.HashMap</a> however it\nis heavier and provides more functionality. Sample usage:</p>\n\n<pre><code>var coll = new <a href=\"#!/api/Ext.util.MixedCollection\" rel=\"Ext.util.MixedCollection\" class=\"docClass\">Ext.util.MixedCollection</a>();\ncoll.add('key1', 'val1');\ncoll.add('key2', 'val2');\ncoll.add('key3', 'val3');\n\nconsole.log(coll.get('key1')); // prints 'val1'\nconsole.log(coll.indexOfKey('key3')); // prints 2\n</code></pre>\n\n<p>The MixedCollection also has support for sorting and filtering of the values in the collection.</p>\n\n<pre><code>var coll = new <a href=\"#!/api/Ext.util.MixedCollection\" rel=\"Ext.util.MixedCollection\" class=\"docClass\">Ext.util.MixedCollection</a>();\ncoll.add('key1', 100);\ncoll.add('key2', -100);\ncoll.add('key3', 17);\ncoll.add('key4', 0);\nvar biggerThanZero = coll.filterBy(function(value){\n    return value &gt; 0;\n});\nconsole.log(biggerThanZero.getCount()); // prints 2\n</code></pre>\n","!type":"fn(config: Ext_util_MixedCollection_cfg)","prototype":{"!proto":"Ext.util.AbstractMixedCollection.prototype","allowFunctions":{"!type":"bool","!doc":"<p>Configure as <code>true</code> if the <a href=\"#!/api/Ext.util.MixedCollection-method-addAll\" rel=\"Ext.util.MixedCollection-method-addAll\" class=\"docClass\">addAll</a> function should add function references to the collection.</p>\n"},"_sort":{"!type":"fn(property: string, dir?: string, fn?: fn()) -> !this","!doc":"<p>Performs the actual sorting based on a direction and a sorting function. Internally,\nthis creates a temporary array of all items in the MixedCollection, sorts it and then writes\nthe sorted array data back into this.items and this.keys</p>\n"},"doSort":{"!type":"fn(sorterFn: ?) -> !this"},"findInsertionIndex":{"!type":"fn(newItem: ?, sorterFn?: fn()) -> number","!doc":"<p>Calculates the insertion index of the new item based upon the comparison function passed, or the current sort order.</p>\n"},"reorder":{"!type":"fn(mapping: ?) -> !this","!doc":"<p>Reorders each of the items based on a mapping from old index to new index. Internally this\njust translates into a sort. The 'sort' event is fired whenever reordering has occured.</p>\n"},"sortBy":{"!type":"fn(sorterFn: fn()) -> !this","!doc":"<p>Sorts the collection by a single sorter function</p>\n"},"sortByKey":{"!type":"fn(direction?: string, fn?: fn()) -> !this","!doc":"<p>Sorts this collection by <b>key</b>s.</p>\n"}}},"Offset":{"!type":"fn(x: ?, y: ?)","prototype":{"!proto":"Ext.Base.prototype","copy":{"!type":"fn() -> !this"},"copyFrom":{"!type":"fn(p: ?) -> !this"},"equals":{"!type":"fn(offset: ?) -> !this"},"isZero":{"!type":"fn() -> !this"},"round":{"!type":"fn(to: ?) -> !this"},"toString":{"!type":"fn() -> !this"}},"fromObject":{"!type":"fn(obj: ?) -> !this"}},"Point":{"!doc":"<p>Represents a 2D point with x and y properties, useful for comparison and instantiation\nfrom an event:</p>\n\n<pre><code>var point = <a href=\"#!/api/Ext.util.Point-static-method-fromEvent\" rel=\"Ext.util.Point-static-method-fromEvent\" class=\"docClass\">Ext.util.Point.fromEvent</a>(e);\n</code></pre>\n","!type":"fn(x: number, y: number)","prototype":{"!proto":"Ext.util.Region.prototype","equals":{"!type":"fn(p: +Ext.util.Point|?) -> bool","!doc":"<p>Compare this point and another point</p>\n"},"isContainedBy":{"!type":"fn(region: +Ext.util.Region|+Ext.Component|+Ext.dom.Element|+HTMLElement) -> bool","!doc":"<p>Determins whether this Point contained by the passed Region, Component or element.</p>\n"},"isWithin":{"!type":"fn(p: +Ext.util.Point|?, threshold: ?|number) -> bool","!doc":"<p>Whether the given point is not away from this point within the given threshold amount.</p>\n"},"roundedEquals":{"!type":"fn(p: +Ext.util.Point|?) -> bool","!doc":"<p>Compare this point with another point when the x and y values of both points are rounded. E.g:\n[100.3,199.8] will equals to [100, 200]</p>\n"},"toString":{"!type":"fn() -> string","!doc":"<p>Returns a human-eye-friendly string that represents this point,\nuseful for debugging</p>\n"},"translate":{"!type":"fn(x: +Ext.util.Offset|?, y: number) -> +Ext.util.Region","!doc":"<p>Alias for <a href=\"#!/api/Ext.util.Point-method-translateBy\" rel=\"Ext.util.Point-method-translateBy\" class=\"docClass\">translateBy</a></p>\n"}},"fromEvent":{"!type":"fn(e: +Ext.EventObject|+Event) -> +Ext.util.Point","!doc":"<p>Returns a new instance of <a href=\"#!/api/Ext.util.Point\" rel=\"Ext.util.Point\" class=\"docClass\">Ext.util.Point</a> base on the pageX / pageY values of the given event</p>\n"}},"ProtoElement":{"!doc":"<p>Manages certain element-like data prior to rendering. These values are passed\non to the render process. This is currently used to manage the \"class\" and \"style\" attributes\nof a component's primary el as well as the bodyEl of panels. This allows things like\naddBodyCls in Panel to share logic with addCls in AbstractComponent.</p>\n","prototype":{"clsProp":{"!type":"string","!doc":"<p>The property name for the className on the data object passed to <a href=\"#!/api/Ext.util.ProtoElement-method-writeTo\" rel=\"Ext.util.ProtoElement-method-writeTo\" class=\"docClass\">writeTo</a>.</p>\n"},"removedProp":{"!type":"string","!doc":"<p>The property name for the removed classes on the data object passed to <a href=\"#!/api/Ext.util.ProtoElement-method-writeTo\" rel=\"Ext.util.ProtoElement-method-writeTo\" class=\"docClass\">writeTo</a>.</p>\n"},"styleIsText":{"!type":"bool","!doc":"<p>True if the style must be converted to text during <a href=\"#!/api/Ext.util.ProtoElement-method-writeTo\" rel=\"Ext.util.ProtoElement-method-writeTo\" class=\"docClass\">writeTo</a>. When used to\npopulate tpl data, this will be true. When used to populate <a href=\"#!/api/Ext.DomHelper\" rel=\"Ext.DomHelper\" class=\"docClass\">Ext.DomHelper</a>\nspecs, this will be false (the default).</p>\n"},"styleProp":{"!type":"string","!doc":"<p>The property name for the style on the data object passed to <a href=\"#!/api/Ext.util.ProtoElement-method-writeTo\" rel=\"Ext.util.ProtoElement-method-writeTo\" class=\"docClass\">writeTo</a>.</p>\n"},"addCls":{"!type":"fn(cls: string) -> +Ext.util.ProtoElement","!doc":"<p>Adds class to the element.</p>\n"},"flush":{"!type":"fn() -> !this","!doc":"<p>Indicates that the current state of the object has been flushed to the DOM, so we need\nto track any subsequent changes</p>\n"},"hasCls":{"!type":"fn(cls: string) -> bool","!doc":"<p>True if the element has given class.</p>\n"},"removeCls":{"!type":"fn(cls: string) -> +Ext.util.ProtoElement","!doc":"<p>Removes class from the element.</p>\n"},"setStyle":{"!type":"fn(prop: string|?, value?: string) -> +Ext.util.ProtoElement","!doc":"<p>Adds styles to the element.</p>\n"},"writeTo":{"!type":"fn(to: ?) -> ?","!doc":"<p>Writes style and class properties to given object.\nStyles will be written to <a href=\"#!/api/Ext.util.ProtoElement-property-styleProp\" rel=\"Ext.util.ProtoElement-property-styleProp\" class=\"docClass\">styleProp</a> and class names to <a href=\"#!/api/Ext.util.ProtoElement-property-clsProp\" rel=\"Ext.util.ProtoElement-property-clsProp\" class=\"docClass\">clsProp</a>.</p>\n"}}},"Queue":{"!doc":"<p>An internal Queue class.</p>\n","!type":"fn()","prototype":{"!proto":"Ext.Base.prototype","add":{"!type":"fn(obj: ?) -> !this"},"clear":{"!type":"fn() -> !this","!doc":"<p>Removes all items from the collection.</p>\n"},"contains":{"!type":"fn(obj: ?) -> !this"},"getCount":{"!type":"fn() -> number","!doc":"<p>Returns the number of items in the collection.</p>\n"},"getKey":{"!type":"fn(obj: ?) -> !this"},"remove":{"!type":"fn(obj: ?) -> ?","!doc":"<p>Remove an item from the collection.</p>\n"}}},"Region":{"!doc":"<p>This class represents a rectangular region in X,Y space, and performs geometric\ntransformations or tests upon the region.</p>\n\n<p>This class may be used to compare the document regions occupied by elements.</p>\n","!type":"fn(top: number, right: number, bottom: number, left: number)","prototype":{"!proto":"Ext.Base.prototype","adjust":{"!type":"fn(top: number, right: number, bottom: number, left: number) -> +Ext.util.Region","!doc":"<p>Modifies the current region to be adjusted by offsets.</p>\n"},"constrainTo":{"!type":"fn(targetRegion: +Ext.util.Region) -> +Ext.util.Region","!doc":"<p>Modifies the current region to be constrained to the targetRegion.</p>\n"},"contains":{"!type":"fn(region: +Ext.util.Region) -> bool","!doc":"<p>Checks if this region completely contains the region that is passed in.</p>\n"},"copy":{"!type":"fn() -> +Ext.util.Region","!doc":"<p>Create a copy of this Region.</p>\n"},"copyFrom":{"!type":"fn(p: +Ext.util.Region) -> +Ext.util.Region","!doc":"<p>Copy the values of another Region to this Region</p>\n"},"equals":{"!type":"fn(region: +Ext.util.Region) -> bool","!doc":"<p>Check whether this region is equivalent to the given region</p>\n"},"getOutOfBoundOffset":{"!type":"fn(axis?: string, p?: +Ext.util.Point) -> +Ext.util.Offset","!doc":"<p>Get the offset amount of a point outside the region</p>\n"},"getOutOfBoundOffsetX":{"!type":"fn(p: number) -> number","!doc":"<p>Get the offset amount on the x-axis</p>\n"},"getOutOfBoundOffsetY":{"!type":"fn(p: number) -> number","!doc":"<p>Get the offset amount on the y-axis</p>\n"},"getSize":{"!type":"fn() -> ?","!doc":"<p>Get the width / height of this region</p>\n"},"intersect":{"!type":"fn(region: +Ext.util.Region) -> +Ext.util.Region|bool","!doc":"<p>Checks if this region intersects the region passed in.</p>\n"},"isOutOfBound":{"!type":"fn(axis?: string, p?: +Ext.util.Point|number) -> bool","!doc":"<p>Check whether the point / offset is out of bound</p>\n"},"isOutOfBoundX":{"!type":"fn(p: number) -> bool","!doc":"<p>Check whether the offset is out of bound in the x-axis</p>\n"},"isOutOfBoundY":{"!type":"fn(p: number) -> bool","!doc":"<p>Check whether the offset is out of bound in the y-axis</p>\n"},"restrict":{"!type":"fn(axis?: string, p?: +Ext.util.Point|+Ext.util.Offset|?, factor?: number) -> +Ext.util.Point|+Ext.util.Offset|?|number","!doc":"<p>Restrict a point within the region by a certain factor.</p>\n"},"restrictX":{"!type":"fn(p: number, factor?: number) -> number","!doc":"<p>Restrict an offset within the region by a certain factor, on the x-axis</p>\n"},"restrictY":{"!type":"fn(p: number, factor?: number) -> number","!doc":"<p>Restrict an offset within the region by a certain factor, on the y-axis</p>\n"},"round":{"!type":"fn() -> +Ext.util.Region","!doc":"<p>Round all the properties of this region</p>\n"},"toString":{"!type":"fn() -> string","!doc":"<p>Dump this to an eye-friendly string, great for debugging</p>\n"},"translateBy":{"!type":"fn(x: +Ext.util.Offset|?, y: number) -> +Ext.util.Region","!doc":"<p>Translate this region by the given offset amount</p>\n"},"union":{"!type":"fn(region: +Ext.util.Region) -> +Ext.util.Region","!doc":"<p>Returns the smallest region that contains the current AND targetRegion.</p>\n"}},"from":{"!type":"fn(o: ?) -> +Ext.util.Region","!doc":"<p>Creates a Region from a \"box\" Object which contains four numeric properties <code>top</code>, <code>right</code>, <code>bottom</code> and <code>left</code>.</p>\n"},"getRegion":{"!type":"fn(el: string|+HTMLElement|+Ext.Element) -> +Ext.util.Region","!doc":"<p>Retrieves an <a href=\"#!/api/Ext.util.Region\" rel=\"Ext.util.Region\" class=\"docClass\">Ext.util.Region</a> for a particular element.</p>\n"}},"Sorter":{"!doc":"<p>Represents a single sorter that can be applied to a Store. The sorter is used\nto compare two values against each other for the purpose of ordering them. Ordering\nis achieved by specifying either:</p>\n\n<ul>\n<li><a href=\"#!/api/Ext.util.Sorter-cfg-property\" rel=\"Ext.util.Sorter-cfg-property\" class=\"docClass\">A sorting property</a></li>\n<li><a href=\"#!/api/Ext.util.Sorter-cfg-sorterFn\" rel=\"Ext.util.Sorter-cfg-sorterFn\" class=\"docClass\">A sorting function</a></li>\n</ul>\n\n\n<p>As a contrived example, we can specify a custom sorter that sorts by rank:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Person', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['name', 'rank']\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    model: 'Person',\n    proxy: 'memory',\n    sorters: [{\n        sorterFn: function(o1, o2){\n            var getRank = function(o){\n                var name = o.get('rank');\n                if (name === 'first') {\n                    return 1;\n                } else if (name === 'second') {\n                    return 2;\n                } else {\n                    return 3;\n                }\n            },\n            rank1 = getRank(o1),\n            rank2 = getRank(o2);\n\n            if (rank1 === rank2) {\n                return 0;\n            }\n\n            return rank1 &lt; rank2 ? -1 : 1;\n        }\n    }],\n    data: [{\n        name: 'Person1',\n        rank: 'second'\n    }, {\n        name: 'Person2',\n        rank: 'third'\n    }, {\n        name: 'Person3',\n        rank: 'first'\n    }]\n});\n</code></pre>\n","!type":"fn(config: Ext_util_Sorter_cfg)","prototype":{"!proto":"Ext.Base.prototype","direction":{"!type":"string","!doc":"<p>The direction to sort by.</p>\n"},"property":{"!type":"string","!doc":"<p>The property to sort by. Required unless <a href=\"#!/api/Ext.util.Sorter-cfg-sorterFn\" rel=\"Ext.util.Sorter-cfg-sorterFn\" class=\"docClass\">sorterFn</a> is provided. The property is extracted from the object\ndirectly and compared for sorting using the built in comparison operators.</p>\n"},"root":{"!type":"string","!doc":"<p>Optional root property. This is mostly useful when sorting a Store, in which case we set the root to 'data' to\nmake the filter pull the <a href=\"#!/api/Ext.util.Sorter-cfg-property\" rel=\"Ext.util.Sorter-cfg-property\" class=\"docClass\">property</a> out of the data object of each item</p>\n"},"sorterFn":{"!type":"fn()","!doc":"<p>A specific sorter function to execute. Can be passed instead of <a href=\"#!/api/Ext.util.Sorter-cfg-property\" rel=\"Ext.util.Sorter-cfg-property\" class=\"docClass\">property</a>. This sorter function allows\nfor any kind of custom/complex comparisons. The sorterFn receives two arguments, the objects being compared. The\nfunction should return:</p>\n\n<ul>\n<li>-1 if o1 is \"less than\" o2</li>\n<li>0 if o1 is \"equal\" to o2</li>\n<li>1 if o1 is \"greater than\" o2</li>\n</ul>\n\n"},"transform":{"!type":"fn()","!doc":"<p>A function that will be run on each value before it is compared in the sorter. The function will receive a single\nargument, the value.</p>\n"},"createSortFunction":{"!type":"fn(sorterFn: ?) -> fn()","!doc":"<p>Creates and returns a function which sorts an array by the given property and direction</p>\n"},"defaultSorterFn":{"!type":"fn(o1: ?, o2: ?) -> !this","!doc":"<p>Basic default sorter function that just compares the defined property of each object</p>\n"},"getRoot":{"!type":"fn(item: ?) -> ?","!doc":"<p>Returns the root property of the given item, based on the configured <a href=\"#!/api/Ext.util.Sorter-cfg-root\" rel=\"Ext.util.Sorter-cfg-root\" class=\"docClass\">root</a> property</p>\n"},"serialize":{"!type":"fn() -> !this"},"setDirection":{"!type":"fn(direction: string) -> !this","!doc":"<p>Set the sorting direction for this sorter.</p>\n"},"toggle":{"!type":"fn() -> !this","!doc":"<p>Toggles the sorting direction for this sorter.</p>\n"},"updateSortFunction":{"!type":"fn(fn?: fn()) -> !this","!doc":"<p>Update the sort function for this sorter.</p>\n"}}},"TaskManager":{"!doc":"<p>A static <a href=\"#!/api/Ext.util.TaskRunner\" rel=\"Ext.util.TaskRunner\" class=\"docClass\">Ext.util.TaskRunner</a> instance that can be used to start and stop\narbitrary tasks. See <a href=\"#!/api/Ext.util.TaskRunner\" rel=\"Ext.util.TaskRunner\" class=\"docClass\">Ext.util.TaskRunner</a> for supported methods and task\nconfig properties.</p>\n\n<p>   // Start a simple clock task that updates a div once per second\n   var task = {\n      run: function(){\n          <a href=\"#!/api/Ext-method-fly\" rel=\"Ext-method-fly\" class=\"docClass\">Ext.fly</a>('clock').update(new Date().format('g:i:s A'));\n      },\n      interval: 1000 //1 second\n   }</p>\n\n<p>   <a href=\"#!/api/Ext.util.TaskManager-method-start\" rel=\"Ext.util.TaskManager-method-start\" class=\"docClass\">Ext.TaskManager.start</a>(task);</p>\n\n<p>See the <a href=\"#!/api/Ext.util.TaskManager-method-start\" rel=\"Ext.util.TaskManager-method-start\" class=\"docClass\">start</a> method for details about how to configure a task object.</p>\n","!type":"fn(interval?: number|?)","prototype":{"!proto":"Ext.util.TaskRunner.prototype"}},"TaskRunner":{"Task":{"!doc":"<p>Instances of this class are created by <a href=\"#!/api/Ext.util.TaskRunner-method-newTask\" rel=\"Ext.util.TaskRunner-method-newTask\" class=\"docClass\">Ext.util.TaskRunner.newTask</a> method.</p>\n\n<p>For details on config properties, see <a href=\"#!/api/Ext.util.TaskRunner-method-start\" rel=\"Ext.util.TaskRunner-method-start\" class=\"docClass\">Ext.util.TaskRunner.start</a>.</p>\n","prototype":{"fireOnStart":{"!type":"bool","!doc":"<p>Override default behavior</p>\n"},"stopped":{"!type":"bool","!doc":"<p>This flag is set to <code>true</code> by <a href=\"#!/api/Ext.util.TaskRunner.Task-method-stop\" rel=\"Ext.util.TaskRunner.Task-method-stop\" class=\"docClass\">stop</a>.</p>\n"},"destroy":{"!type":"fn() -> !this","!doc":"<p>Destroys this instance, stopping this task's execution.</p>\n"},"restart":{"!type":"fn(interval?: number) -> !this","!doc":"<p>Restarts this task, clearing it duration, expiration and run count.</p>\n"},"start":{"!type":"fn(interval?: number) -> !this","!doc":"<p>Starts this task if it is not already started.</p>\n"},"stop":{"!type":"fn() -> !this","!doc":"<p>Stops this task.</p>\n"}}},"!doc":"<p>Provides the ability to execute one or more arbitrary tasks in a asynchronous manner.\nGenerally, you can use the singleton <a href=\"#!/api/Ext.util.TaskManager\" rel=\"Ext.util.TaskManager\" class=\"docClass\">Ext.TaskManager</a> instead, but if needed,\nyou can create separate instances of TaskRunner. Any number of separate tasks can be\nstarted at any time and will run independently of each other.</p>\n\n<p>Example usage:</p>\n\n<pre><code> // Start a simple clock task that updates a div once per second\n var updateClock = function () {\n     <a href=\"#!/api/Ext-method-fly\" rel=\"Ext-method-fly\" class=\"docClass\">Ext.fly</a>('clock').update(new Date().format('g:i:s A'));\n }\n\n var runner = new <a href=\"#!/api/Ext.util.TaskRunner\" rel=\"Ext.util.TaskRunner\" class=\"docClass\">Ext.util.TaskRunner</a>();\n var task = runner.start({\n     run: updateClock,\n     interval: 1000\n }\n</code></pre>\n\n<p>The equivalent using TaskManager:</p>\n\n<pre><code> var task = <a href=\"#!/api/Ext.util.TaskManager-method-start\" rel=\"Ext.util.TaskManager-method-start\" class=\"docClass\">Ext.TaskManager.start</a>({\n     run: updateClock,\n     interval: 1000\n });\n</code></pre>\n\n<p>To end a running task:</p>\n\n<pre><code> task.destroy();\n</code></pre>\n\n<p>If a task needs to be started and stopped repeated over time, you can create a\n<a href=\"#!/api/Ext.util.TaskRunner.Task\" rel=\"Ext.util.TaskRunner.Task\" class=\"docClass\">Task</a> instance.</p>\n\n<pre><code> var task = runner.newTask({\n     run: function () {\n         // useful code\n     },\n     interval: 1000\n });\n\n task.start();\n\n // ...\n\n task.stop();\n\n // ...\n\n task.start();\n</code></pre>\n\n<p>A re-usable, one-shot task can be managed similar to the above:</p>\n\n<pre><code> var task = runner.newTask({\n     run: function () {\n         // useful code to run once\n     },\n     repeat: 1\n });\n\n task.start();\n\n // ...\n\n task.start();\n</code></pre>\n\n<p>See the <a href=\"#!/api/Ext.util.TaskRunner-method-start\" rel=\"Ext.util.TaskRunner-method-start\" class=\"docClass\">start</a> method for details about how to configure a task object.</p>\n\n<p>Also see <a href=\"#!/api/Ext.util.DelayedTask\" rel=\"Ext.util.DelayedTask\" class=\"docClass\">Ext.util.DelayedTask</a>.</p>\n","!type":"fn(interval?: number|?)","prototype":{"!proto":"Ext.Base.prototype","fireIdleEvent":{"!type":"bool","!doc":"<p>This may be configured <code>false</code> to inhibit firing of the <a href=\"#!/api/Ext.EventManager-property-idleEvent\" rel=\"Ext.EventManager-property-idleEvent\" class=\"docClass\">idle event</a> after task invocation.</p>\n"},"interval":{"!type":"number","!doc":"<p>The timer resolution.</p>\n"},"firing":{"!type":"bool","!doc":"<hr />\n"},"nextExpires":{"!type":"number"},"timerId":{"!type":"?","!doc":"<p>The id of the current timer.</p>\n"},"destroy":{"!type":"fn() -> !this","!doc":"<p>Destroys this instance, stopping all tasks that are currently running.</p>\n"},"newTask":{"!type":"fn(config: ?) -> !this","!doc":"<p>Creates a new <a href=\"#!/api/Ext.util.TaskRunner.Task\" rel=\"Ext.util.TaskRunner.Task\" class=\"docClass\">Task</a> instance. These instances can\nbe easily started and stopped.</p>\n"},"onTick":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"start":{"!type":"fn(task: ?) -> ?","!doc":"<p>Starts a new task.</p>\n\n<p>Before each invocation, Ext injects the property <code>taskRunCount</code> into the task object\nso that calculations based on the repeat count can be performed.</p>\n\n<p>The returned task will contain a <code>destroy</code> method that can be used to destroy the\ntask and cancel further calls. This is equivalent to the <a href=\"#!/api/Ext.util.TaskRunner-method-stop\" rel=\"Ext.util.TaskRunner-method-stop\" class=\"docClass\">stop</a> method.</p>\n"},"startTimer":{"!type":"fn(timeout: ?, now: ?) -> !this","!doc":"<p>private</p>\n"},"stop":{"!type":"fn(task: ?) -> ?","!doc":"<p>Stops an existing running task.</p>\n"},"stopAll":{"!type":"fn() -> !this","!doc":"<p>Stops all tasks that are currently running.</p>\n"}}},"TextMetrics":{"!doc":"<p>Provides precise pixel measurements for blocks of text so that you can determine exactly how high and\nwide, in pixels, a given block of text will be. Note that when measuring text, it should be plain text and\nshould not contain any HTML, otherwise it may not be measured correctly.</p>\n\n<p>The measurement works by copying the relevant CSS styles that can affect the font related display,\nthen checking the size of an element that is auto-sized. Note that if the text is multi-lined, you must\nprovide a <strong>fixed width</strong> when doing the measurement.</p>\n\n<p>If multiple measurements are being done on the same element, you create a new instance to initialize\nto avoid the overhead of copying the styles to the element repeatedly.</p>\n","!type":"fn(bindTo: string|+HTMLElement|+Ext.Element, fixedWidth?: number)","prototype":{"!proto":"Ext.Base.prototype","bind":{"!type":"fn(el: string|+HTMLElement|+Ext.Element) -> !this","!doc":"<p>Binds this TextMetrics instance to a new element</p>\n"},"destroy":{"!type":"fn() -> !this","!doc":"<p>Destroy this instance</p>\n"},"getHeight":{"!type":"fn(text: string) -> number","!doc":"<p>Returns the measured height of the specified text</p>\n"},"getSize":{"!type":"fn(text: string) -> ?","!doc":"<p>Returns the size of the specified text based on the internal element's style and width properties</p>\n"},"getWidth":{"!type":"fn(text: string) -> number","!doc":"<p>Returns the measured width of the specified text</p>\n"},"setFixedWidth":{"!type":"fn(width: number) -> !this","!doc":"<p>Sets a fixed width on the internal measurement element.  If the text will be multiline, you have\nto set a fixed width in order to accurately measure the text height.</p>\n"}},"shared":{"!type":"?"},"destroy":{"!type":"fn() -> !this","!doc":"<p>Destroy the TextMetrics instance created by <a href=\"#!/api/Ext.util.TextMetrics-static-method-measure\" rel=\"Ext.util.TextMetrics-static-method-measure\" class=\"docClass\">measure</a>.</p>\n"},"measure":{"!type":"fn(el: string|+HTMLElement, text: string, fixedWidth?: number) -> ?","!doc":"<p>Measures the size of the specified text</p>\n"}}},"state":{"Stateful":{"prototype":{"!proto":"Ext.Base.prototype","saveDelay":{"!type":"number","!doc":"<p>A buffer to be applied if many state events are fired within a short period.</p>\n"},"stateEvents":{"!type":"[string]","!doc":"<p>An array of events that, when fired, should trigger this object to\nsave its state. Defaults to none. <code>stateEvents</code> may be any type\nof event supported by this object, including browser or custom events\n(e.g., <tt>['click', 'customerchange']</tt>).</p>\n\n\n<p>See <code><a href=\"#!/api/Ext.state.Stateful-cfg-stateful\" rel=\"Ext.state.Stateful-cfg-stateful\" class=\"docClass\">stateful</a></code> for an explanation of saving and\nrestoring object state.</p>\n\n"},"stateId":{"!type":"string","!doc":"<p>The unique id for this object to use for state management purposes.</p>\n\n<p>See <a href=\"#!/api/Ext.state.Stateful-cfg-stateful\" rel=\"Ext.state.Stateful-cfg-stateful\" class=\"docClass\">stateful</a> for an explanation of saving and restoring state.</p>\n\n"},"stateful":{"!type":"bool","!doc":"<p>A flag which causes the object to attempt to restore the state of\ninternal properties from a saved state on startup. The object must have\na <a href=\"#!/api/Ext.state.Stateful-cfg-stateId\" rel=\"Ext.state.Stateful-cfg-stateId\" class=\"docClass\">stateId</a> for state to be managed.</p>\n\n<p>Auto-generated ids are not guaranteed to be stable across page loads and\ncannot be relied upon to save and restore the same state for a object.</p>\n\n<p>For state saving to work, the state manager's provider must have been\nset to an implementation of <a href=\"#!/api/Ext.state.Provider\" rel=\"Ext.state.Provider\" class=\"docClass\">Ext.state.Provider</a> which overrides the\n<a href=\"#!/api/Ext.state.Provider-method-set\" rel=\"Ext.state.Provider-method-set\" class=\"docClass\">set</a> and <a href=\"#!/api/Ext.state.Provider-method-get\" rel=\"Ext.state.Provider-method-get\" class=\"docClass\">get</a>\nmethods to save and recall name/value pairs. A built-in implementation,\n<a href=\"#!/api/Ext.state.CookieProvider\" rel=\"Ext.state.CookieProvider\" class=\"docClass\">Ext.state.CookieProvider</a> is available.</p>\n\n<p>To set the state provider for the current page:</p>\n\n<p>   <a href=\"#!/api/Ext.state.Manager-method-setProvider\" rel=\"Ext.state.Manager-method-setProvider\" class=\"docClass\">Ext.state.Manager.setProvider</a>(new <a href=\"#!/api/Ext.state.CookieProvider\" rel=\"Ext.state.CookieProvider\" class=\"docClass\">Ext.state.CookieProvider</a>({\n       expires: new Date(new Date().getTime()+(1000<em>60</em>60<em>24</em>7)), //7 days from now\n   }));</p>\n\n<p>A stateful object attempts to save state when one of the events\nlisted in the <a href=\"#!/api/Ext.state.Stateful-cfg-stateEvents\" rel=\"Ext.state.Stateful-cfg-stateEvents\" class=\"docClass\">stateEvents</a> configuration fires.</p>\n\n<p>To save state, a stateful object first serializes its state by\ncalling <em><a href=\"#!/api/Ext.state.Stateful-method-getState\" rel=\"Ext.state.Stateful-method-getState\" class=\"docClass\">getState</a></em>.</p>\n\n<p>The Component base class implements <a href=\"#!/api/Ext.state.Stateful-method-getState\" rel=\"Ext.state.Stateful-method-getState\" class=\"docClass\">getState</a> to save its width and height within the state\nonly if they were initially configured, and have changed from the configured value.</p>\n\n<p>The Panel class saves its collapsed state in addition to that.</p>\n\n<p>The Grid class saves its column state in addition to its superclass state.</p>\n\n<p>If there is more application state to be save, the developer must provide an implementation which\nfirst calls the superclass method to inherit the above behaviour, and then injects new properties\ninto the returned object.</p>\n\n<p>The value yielded by getState is passed to <a href=\"#!/api/Ext.state.Manager-method-set\" rel=\"Ext.state.Manager-method-set\" class=\"docClass\">Ext.state.Manager.set</a>\nwhich uses the configured <a href=\"#!/api/Ext.state.Provider\" rel=\"Ext.state.Provider\" class=\"docClass\">Ext.state.Provider</a> to save the object\nkeyed by the <a href=\"#!/api/Ext.state.Stateful-cfg-stateId\" rel=\"Ext.state.Stateful-cfg-stateId\" class=\"docClass\">stateId</a>.</p>\n\n<p>During construction, a stateful object attempts to <em>restore</em> its state by calling\n<a href=\"#!/api/Ext.state.Manager-method-get\" rel=\"Ext.state.Manager-method-get\" class=\"docClass\">Ext.state.Manager.get</a> passing the <a href=\"#!/api/Ext.state.Stateful-cfg-stateId\" rel=\"Ext.state.Stateful-cfg-stateId\" class=\"docClass\">stateId</a></p>\n\n<p>The resulting object is passed to <a href=\"#!/api/Ext.state.Stateful-method-applyState\" rel=\"Ext.state.Stateful-method-applyState\" class=\"docClass\">applyState</a>*. The default implementation of\n<a href=\"#!/api/Ext.state.Stateful-method-applyState\" rel=\"Ext.state.Stateful-method-applyState\" class=\"docClass\">applyState</a> simply copies properties into the object, but a developer may\noverride this to support restoration of more complex application state.</p>\n\n<p>You can perform extra processing on state save and restore by attaching\nhandlers to the <a href=\"#!/api/Ext.state.Stateful-event-beforestaterestore\" rel=\"Ext.state.Stateful-event-beforestaterestore\" class=\"docClass\">beforestaterestore</a>, <a href=\"#!/api/Ext.state.Stateful-event-staterestore\" rel=\"Ext.state.Stateful-event-staterestore\" class=\"docClass\">staterestore</a>,\n<a href=\"#!/api/Ext.state.Stateful-event-beforestatesave\" rel=\"Ext.state.Stateful-event-beforestatesave\" class=\"docClass\">beforestatesave</a> and <a href=\"#!/api/Ext.state.Stateful-event-statesave\" rel=\"Ext.state.Stateful-event-statesave\" class=\"docClass\">statesave</a> events.</p>\n"},"addStateEvents":{"!type":"fn(events: string|[string]) -> !this","!doc":"<p>Add events that will trigger the state to be saved. If the first argument is an\narray, each element of that array is the name of a state event. Otherwise, each\nargument passed to this method is the name of a state event.</p>\n"},"applyState":{"!type":"fn(state: ?) -> !this","!doc":"<p>Applies the state to the object. This should be overridden in subclasses to do\nmore complex state operations. By default it applies the state properties onto\nthe current object.</p>\n"},"destroy":{"!type":"fn() -> !this","!doc":"<p>Destroys this stateful object.</p>\n"},"getState":{"!type":"fn() -> ?","!doc":"<p>Gets the current state of the object. By default this function returns null,\nit should be overridden in subclasses to implement methods for getting the state.</p>\n"},"getStateId":{"!type":"fn() -> string","!doc":"<p>Gets the state id for this object.</p>\n"},"initState":{"!type":"fn() -> !this","!doc":"<p>Initializes the state of the object upon construction.</p>\n"},"onStateChange":{"!type":"fn() -> !this","!doc":"<p>This method is called when any of the <a href=\"#!/api/Ext.state.Stateful-cfg-stateEvents\" rel=\"Ext.state.Stateful-cfg-stateEvents\" class=\"docClass\">stateEvents</a> are fired.</p>\n"},"savePropToState":{"!type":"fn(propName: string, state: ?, stateName?: string) -> bool","!doc":"<p>Conditionally saves a single property from this object to the given state object.\nThe idea is to only save state which has changed from the initial state so that\ncurrent software settings do not override future software settings. Only those\nvalues that are user-changed state should be saved.</p>\n"},"savePropsToState":{"!type":"fn(propNames: string|[string], state: ?) -> ?","!doc":"<p>Gathers additional named properties of the instance and adds their current values\nto the passed state object.</p>\n"},"saveState":{"!type":"fn() -> !this","!doc":"<p>Saves the state of the object to the persistence store.</p>\n"},"beforestaterestore":{"!type":"fn(this: +Ext.state.Stateful, state: ?, eOpts: ?)","!doc":"<p>Fires before the state of the object is restored. Return false from an event handler to stop the restore.</p>\n"},"beforestatesave":{"!type":"fn(this: +Ext.state.Stateful, state: ?, eOpts: ?)","!doc":"<p>Fires before the state of the object is saved to the configured state provider. Return false to stop the save.</p>\n"},"staterestore":{"!type":"fn(this: +Ext.state.Stateful, state: ?, eOpts: ?)","!doc":"<p>Fires after the state of the object is restored.</p>\n"},"statesave":{"!type":"fn(this: +Ext.state.Stateful, state: ?, eOpts: ?)","!doc":"<p>Fires after the state of the object is saved to the configured state provider.</p>\n"}},"!doc":"<p>A mixin for being able to save the state of an object to an underlying\n<a href=\"#!/api/Ext.state.Provider\" rel=\"Ext.state.Provider\" class=\"docClass\">Ext.state.Provider</a>.</p>\n","!type":"fn(config: Ext_state_Stateful_cfg)"},"CookieProvider":{"!doc":"<p>A Provider implementation which saves and retrieves state via cookies. The CookieProvider supports the usual cookie\noptions, such as:</p>\n\n<ul>\n<li><a href=\"#!/api/Ext.state.CookieProvider-cfg-path\" rel=\"Ext.state.CookieProvider-cfg-path\" class=\"docClass\">path</a></li>\n<li><a href=\"#!/api/Ext.state.CookieProvider-cfg-expires\" rel=\"Ext.state.CookieProvider-cfg-expires\" class=\"docClass\">expires</a></li>\n<li><a href=\"#!/api/Ext.state.CookieProvider-cfg-domain\" rel=\"Ext.state.CookieProvider-cfg-domain\" class=\"docClass\">domain</a></li>\n<li><a href=\"#!/api/Ext.state.CookieProvider-cfg-secure\" rel=\"Ext.state.CookieProvider-cfg-secure\" class=\"docClass\">secure</a></li>\n</ul>\n\n\n<p>Example:</p>\n\n<pre><code>var cp = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.state.CookieProvider\" rel=\"Ext.state.CookieProvider\" class=\"docClass\">Ext.state.CookieProvider</a>', {\n    path: \"/cgi-bin/\",\n    expires: new Date(new Date().getTime()+(1000*60*60*24*30)), //30 days\n    domain: \"sencha.com\"\n});\n\n<a href=\"#!/api/Ext.state.Manager-method-setProvider\" rel=\"Ext.state.Manager-method-setProvider\" class=\"docClass\">Ext.state.Manager.setProvider</a>(cp);\n</code></pre>\n","!type":"fn(config?: Ext_state_CookieProvider_cfg)","prototype":{"!proto":"Ext.state.Provider.prototype","domain":{"!type":"string","!doc":"<p>The domain to save the cookie for. Note that you cannot specify a different domain than your page is on, but you can\nspecify a sub-domain, or simply the domain itself like 'sencha.com' to include all sub-domains if you need to access\ncookies across different sub-domains. Defaults to null which uses the same domain the page is running on including\nthe 'www' like 'www.sencha.com'.</p>\n"},"expires":{"!type":"+Date","!doc":"<p>The cookie expiration date. Defaults to 7 days from now.</p>\n"},"path":{"!type":"string","!doc":"<p>The path for which the cookie is active. Defaults to root '/' which makes it active for all pages in the site.</p>\n"},"secure":{"!type":"bool","!doc":"<p>True if the site is using SSL</p>\n"},"clear":{"!type":"fn(name: ?) -> !this","!doc":"<p>private</p>\n"},"clearCookie":{"!type":"fn(name: ?) -> !this","!doc":"<p>private</p>\n"},"readCookies":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"set":{"!type":"fn(name: ?, value: ?) -> !this","!doc":"<p>private</p>\n"},"setCookie":{"!type":"fn(name: ?, value: ?) -> !this","!doc":"<p>private</p>\n"}}},"LocalStorageProvider":{"!doc":"<p>A Provider implementation which saves and retrieves state via the HTML5 localStorage object.\nIf the browser does not support local storage, there will be no attempt to read the state.\nBefore creating this class, a check should be made to <a href=\"#!/api/Ext.supports-property-LocalStorage\" rel=\"Ext.supports-property-LocalStorage\" class=\"docClass\">Ext.supports.LocalStorage</a>.</p>\n","!type":"fn()","prototype":{"!proto":"Ext.state.Provider.prototype","clear":{"!type":"fn(name: ?) -> !this","!doc":"<p>private</p>\n"},"getStorageObject":{"!type":"fn() -> !this"},"readLocalStorage":{"!type":"fn() -> !this"},"set":{"!type":"fn(name: ?, value: ?) -> !this","!doc":"<p>Sets the value for a key</p>\n"}}},"Manager":{"!doc":"<p>This is the global state manager. By default all components that are \"state aware\" check this class\nfor state information if you don't pass them a custom state provider. In order for this class\nto be useful, it must be initialized with a provider when your application initializes. Example usage:</p>\n\n<pre><code>// in your initialization function\ninit : function(){\n   <a href=\"#!/api/Ext.state.Manager-method-setProvider\" rel=\"Ext.state.Manager-method-setProvider\" class=\"docClass\">Ext.state.Manager.setProvider</a>(new <a href=\"#!/api/Ext.state.CookieProvider\" rel=\"Ext.state.CookieProvider\" class=\"docClass\">Ext.state.CookieProvider</a>());\n}\n </code></pre>\n\n\n<p>This class passes on calls from components to the underlying <a href=\"#!/api/Ext.state.Provider\" rel=\"Ext.state.Provider\" class=\"docClass\">Ext.state.Provider</a> so that\nthere is a common interface that can be used without needing to refer to a specific provider instance\nin every component.</p>\n","!type":"fn()","prototype":{"!proto":"Ext.Base.prototype"},"clear":{"!type":"fn(name: string) -> !this","!doc":"<p>Clears a value from the state</p>\n"},"get":{"!type":"fn(name: string, defaultValue: ?) -> ?","!doc":"<p>Returns the current value for a key</p>\n"},"getProvider":{"!type":"fn() -> +Ext.state.Provider","!doc":"<p>Gets the currently configured state provider</p>\n"},"set":{"!type":"fn(name: string, value: ?) -> !this","!doc":"<p>Sets the value for a key</p>\n"},"setProvider":{"!type":"fn(stateProvider: +Ext.state.Provider) -> !this","!doc":"<p>Configures the default state provider for your application</p>\n"}},"Provider":{"!doc":"<p>Abstract base class for state provider implementations. The provider is responsible\nfor setting values  and extracting values to/from the underlying storage source. The \nstorage source can vary and the details should be implemented in a subclass. For example\na provider could use a server side database or the browser localstorage where supported.</p>\n\n\n\n\n<p>This class provides methods for encoding and decoding <b>typed</b> variables including \ndates and defines the Provider interface. By default these methods put the value and the\ntype information into a delimited string that can be stored. These should be overridden in \na subclass if you want to change the format of the encoded value and subsequent decoding.</p>\n\n","!type":"fn(config: Ext_state_Provider_cfg)","prototype":{"!proto":"Ext.Base.prototype","prefix":{"!type":"string","!doc":"<p>A string to prefix to items stored in the underlying state store.\nDefaults to <tt>'ext-'</tt></p>\n"},"clear":{"!type":"fn(name: string) -> !this","!doc":"<p>Clears a value from the state</p>\n"},"decodeValue":{"!type":"fn(value: string) -> ?","!doc":"<p>Decodes a string previously encoded with <a href=\"#!/api/Ext.state.Provider-method-encodeValue\" rel=\"Ext.state.Provider-method-encodeValue\" class=\"docClass\">encodeValue</a>.</p>\n"},"encodeValue":{"!type":"fn(value: ?) -> string","!doc":"<p>Encodes a value including type information.  Decode with <a href=\"#!/api/Ext.state.Provider-method-decodeValue\" rel=\"Ext.state.Provider-method-decodeValue\" class=\"docClass\">decodeValue</a>.</p>\n"},"get":{"!type":"fn(name: string, defaultValue: ?) -> ?","!doc":"<p>Returns the current value for a key</p>\n"},"set":{"!type":"fn(name: string, value: ?) -> !this","!doc":"<p>Sets the value for a key</p>\n"},"statechange":{"!type":"fn(this: +Ext.state.Provider, key: string, value: string, eOpts: ?)","!doc":"<p>Fires when a state change occurs.</p>\n"}}}},"AbstractManager":{"!doc":"<p>Base Manager class</p>\n","!type":"fn(config: Ext_AbstractManager_cfg)","prototype":{"!proto":"Ext.Base.prototype","all":{"!type":"+Ext.util.HashMap","!doc":"<p>Contains all of the items currently managed</p>\n"},"typeName":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"create":{"!type":"fn(config: ?, defaultType: string) -> ?","!doc":"<p>Creates and returns an instance of whatever this manager manages, based on the supplied type and\nconfig object.</p>\n"},"each":{"!type":"fn(fn: fn(), scope: ?) -> !this","!doc":"<p>Executes the specified function once for each item in the collection.</p>\n"},"get":{"!type":"fn(id: string) -> ?","!doc":"<p>Returns an item by id.\nFor additional details see <a href=\"#!/api/Ext.util.HashMap-method-get\" rel=\"Ext.util.HashMap-method-get\" class=\"docClass\">Ext.util.HashMap.get</a>.</p>\n"},"getCount":{"!type":"fn() -> number","!doc":"<p>Gets the number of items in the collection.</p>\n"},"isRegistered":{"!type":"fn(type: string) -> bool","!doc":"<p>Checks if an item type is registered.</p>\n"},"onAvailable":{"!type":"fn(id: string, fn: fn(), scope: ?) -> !this","!doc":"<p>Registers a function that will be called when an item with the specified id is added to the manager.\nThis will happen on instantiation.</p>\n"},"register":{"!type":"fn(item: ?) -> !this","!doc":"<p>Registers an item to be managed</p>\n"},"registerType":{"!type":"fn(type: string, cls: fn()) -> !this","!doc":"<p>Registers a new item constructor, keyed by a type key.</p>\n"},"unregister":{"!type":"fn(item: ?) -> !this","!doc":"<p>Unregisters an item by removing it from this manager</p>\n"}}},"AbstractPlugin":{"!doc":"<p>The AbstractPlugin class is the base class from which user-implemented plugins should inherit.</p>\n\n<p>This class defines the essential API of plugins as used by Components by defining the following methods:</p>\n\n<ul>\n<li><p><code>init</code> : The plugin initialization method which the owning Component calls at Component initialization time.</p>\n\n<p>The Component passes itself as the sole parameter.</p>\n\n<p>Subclasses should set up bidirectional links between the plugin and its client Component here.</p></li>\n<li><p><code>destroy</code> : The plugin cleanup method which the owning Component calls at Component destruction time.</p>\n\n<p>Use this method to break links between the plugin and the Component and to free any allocated resources.</p></li>\n<li><p><code>enable</code> : The base implementation just sets the plugin's <code>disabled</code> flag to <code>false</code></p></li>\n<li><p><code>disable</code> : The base implementation just sets the plugin's <code>disabled</code> flag to <code>true</code></p></li>\n</ul>\n\n","!type":"fn(config?: Ext_AbstractPlugin_cfg)","prototype":{"!proto":"Ext.Base.prototype","pluginId":{"!type":"string","!doc":"<p>A name for the plugin that can be set at creation time to then retrieve the plugin\nthrough <a href=\"#!/api/Ext.AbstractComponent-method-getPlugin\" rel=\"Ext.AbstractComponent-method-getPlugin\" class=\"docClass\">getPlugin</a> method.  For example:</p>\n\n<pre><code>var grid = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Ext.grid.Panel</a>', {\n    plugins: [{\n        ptype: 'cellediting',\n        clicksToEdit: 2,\n        pluginId: 'cellplugin'\n    }]\n});\n\n// later on:\nvar plugin = grid.getPlugin('cellplugin');\n</code></pre>\n"},"disabled":{"!type":"bool"},"isPlugin":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated Plugin, or subclass thereof.</p>\n"},"clonePlugin":{"!type":"fn(overrideCfg?: ?) -> !this","!doc":"<p>Creates clone of the plugin.</p>\n"},"destroy":{"!type":"fn() -> !this","!doc":"<p>The destroy method is invoked by the owning Component at the time the Component is being destroyed.</p>\n\n<p>The supplied implementation is empty. Subclasses should perform plugin cleanup in their own implementation of\nthis method.</p>\n"},"disable":{"!type":"fn() -> !this","!doc":"<p>The base implementation just sets the plugin's <code>disabled</code> flag to <code>true</code></p>\n\n<p>Plugin subclasses which need more complex processing may implement an overriding implementation.</p>\n"},"enable":{"!type":"fn() -> !this","!doc":"<p>The base implementation just sets the plugin's <code>disabled</code> flag to <code>false</code></p>\n\n<p>Plugin subclasses which need more complex processing may implement an overriding implementation.</p>\n"},"getCmp":{"!type":"fn() -> +Ext.Component","!doc":"<p>Returns the component to which this plugin is attached.</p>\n"},"init":{"!type":"fn(client: +Ext.Component) -> !this","!doc":"<p>The init method is invoked after initComponent method has been run for the client Component.</p>\n\n<p>The supplied implementation is empty. Subclasses should perform plugin initialization, and set up bidirectional\nlinks between the plugin and its client Component in their own implementation of this method.</p>\n"},"onClassExtended":{"!type":"fn(cls: ?, data: ?, hooks: ?) -> !this","!doc":"<p>Private.\nInject a ptype property so that AbstractComponent.findPlugin(ptype) works.</p>\n"},"setCmp":{"!type":"fn(cmp: +Ext.Component) -> !this","!doc":"<p>Sets the component to which this plugin is attached.</p>\n"}}},"Action":{"!doc":"<p>An Action is a piece of reusable functionality that can be abstracted out of any particular component so that it\ncan be usefully shared among multiple components.  Actions let you share handlers, configuration options and UI\nupdates across any components that support the Action interface (primarily <a href=\"#!/api/Ext.toolbar.Toolbar\" rel=\"Ext.toolbar.Toolbar\" class=\"docClass\">Ext.toolbar.Toolbar</a>,\n<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a> and <a href=\"#!/api/Ext.menu.Menu\" rel=\"Ext.menu.Menu\" class=\"docClass\">Ext.menu.Menu</a> components).</p>\n\n<p>Use a single Action instance as the config object for any number of UI Components which share the same configuration. The\nAction not only supplies the configuration, but allows all Components based upon it to have a common set of methods\ncalled at once through a single call to the Action.</p>\n\n<p>Any Component that is to be configured with an Action must also support\nthe following methods:</p>\n\n<ul>\n<li>setText(string)</li>\n<li>setIconCls(string)</li>\n<li>setDisabled(boolean)</li>\n<li>setVisible(boolean)</li>\n<li>setHandler(function)</li>\n</ul>\n\n\n<p>This allows the Action to control its associated Components.</p>\n\n<p>Example usage:</p>\n\n<pre><code>// Define the shared Action.  Each Component below will have the same\n// display text and icon, and will display the same message on click.\nvar action = new <a href=\"#!/api/Ext.Action\" rel=\"Ext.Action\" class=\"docClass\">Ext.Action</a>({\n    <a href=\"#!/api/Ext.Action-cfg-text\" rel=\"Ext.Action-cfg-text\" class=\"docClass\">text</a>: 'Do something',\n    <a href=\"#!/api/Ext.Action-cfg-handler\" rel=\"Ext.Action-cfg-handler\" class=\"docClass\">handler</a>: function(){\n        <a href=\"#!/api/Ext.MessageBox-method-alert\" rel=\"Ext.MessageBox-method-alert\" class=\"docClass\">Ext.Msg.alert</a>('Click', 'You did something.');\n    },\n    <a href=\"#!/api/Ext.Action-cfg-iconCls\" rel=\"Ext.Action-cfg-iconCls\" class=\"docClass\">iconCls</a>: 'do-something',\n    <a href=\"#!/api/Ext.Action-cfg-itemId\" rel=\"Ext.Action-cfg-itemId\" class=\"docClass\">itemId</a>: 'myAction'\n});\n\nvar panel = new <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>({\n    title: 'Actions',\n    width: 500,\n    height: 300,\n    tbar: [\n        // Add the Action directly to a toolbar as a menu button\n        action,\n        {\n            text: 'Action Menu',\n            // Add the Action to a menu as a text item\n            menu: [action]\n        }\n    ],\n    items: [\n        // Add the Action to the panel body as a standard button\n        new <a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>(action)\n    ],\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n\n// Change the text for all components using the Action\naction.setText('Something else');\n\n// Reference an Action through a container using the itemId\nvar btn = panel.getComponent('myAction');\nvar aRef = btn.baseAction;\naRef.setText('New text');\n</code></pre>\n","!type":"fn(config: Ext_Action_cfg)","prototype":{"!proto":"Ext.Base.prototype","disabled":{"!type":"bool","!doc":"<p>True to disable all components configured by this Action, false to enable them.</p>\n"},"handler":{"!type":"fn()","!doc":"<p>The function that will be invoked by each component tied to this Action\nwhen the component's primary event is triggered.</p>\n"},"hidden":{"!type":"bool","!doc":"<p>True to hide all components configured by this Action, false to show them.</p>\n"},"iconCls":{"!type":"string","!doc":"<p>The CSS class selector that specifies a background image to be used as the header icon for\nall components configured by this Action.</p>\n\n<p>An example of specifying a custom icon class would be something like:</p>\n\n<pre><code>// specify the property in the config for the class:\n     ...\n     iconCls: 'do-something'\n\n// css class that specifies background image to be used as the icon image:\n.do-something { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; }\n</code></pre>\n"},"itemId":{"!type":"string","!doc":"<p>See <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>.<a href=\"#!/api/Ext.Component-cfg-itemId\" rel=\"Ext.Component-cfg-itemId\" class=\"docClass\">itemId</a>.</p>\n"},"scope":{"!type":"?","!doc":"<p>The scope (this reference) in which the <a href=\"#!/api/Ext.Action-cfg-handler\" rel=\"Ext.Action-cfg-handler\" class=\"docClass\">handler</a> is executed.\nDefaults to the browser window.</p>\n"},"text":{"!type":"string","!doc":"<p>The text to set for all components configured by this Action.</p>\n"},"isAction":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated Action, or subclass thereof.</p>\n"},"addComponent":{"!type":"fn(comp: ?) -> !this"},"callEach":{"!type":"fn(fnName: ?, args: ?) -> !this"},"disable":{"!type":"fn() -> !this","!doc":"<p>Disables all components configured by this Action.</p>\n"},"each":{"!type":"fn(fn: fn(), scope: ?) -> !this","!doc":"<p>Executes the specified function once for each Component currently tied to this Action.  The function passed\nin should accept a single argument that will be an object that supports the basic Action config/method interface.</p>\n"},"enable":{"!type":"fn() -> !this","!doc":"<p>Enables all components configured by this Action.</p>\n"},"execute":{"!type":"fn(args: ?) -> !this","!doc":"<p>Executes this Action manually using the handler function specified in the original config object\nor the handler function set with <a href=\"#!/api/Ext.Action-method-setHandler\" rel=\"Ext.Action-method-setHandler\" class=\"docClass\">setHandler</a>.  Any arguments passed to this\nfunction will be passed on to the handler function.</p>\n"},"getIconCls":{"!type":"fn() -> !this","!doc":"<p>Gets the icon CSS class currently used by all components configured by this Action.</p>\n"},"getText":{"!type":"fn() -> !this","!doc":"<p>Gets the text currently displayed by all components configured by this Action.</p>\n"},"hide":{"!type":"fn() -> !this","!doc":"<p>Hides all components configured by this Action.</p>\n"},"isDisabled":{"!type":"fn() -> !this","!doc":"<p>Returns true if the components using this Action are currently disabled, else returns false.</p>\n"},"isHidden":{"!type":"fn() -> !this","!doc":"<p>Returns true if the components configured by this Action are currently hidden, else returns false.</p>\n"},"removeComponent":{"!type":"fn(comp: ?) -> !this"},"setDisabled":{"!type":"fn(disabled: bool) -> !this","!doc":"<p>Sets the disabled state of all components configured by this Action.  Shortcut method\nfor <a href=\"#!/api/Ext.Action-method-enable\" rel=\"Ext.Action-method-enable\" class=\"docClass\">enable</a> and <a href=\"#!/api/Ext.Action-method-disable\" rel=\"Ext.Action-method-disable\" class=\"docClass\">disable</a>.</p>\n"},"setHandler":{"!type":"fn(fn: fn(), scope: ?) -> !this","!doc":"<p>Sets the function that will be called by each Component using this action when its primary event is triggered.</p>\n"},"setHidden":{"!type":"fn(hidden: bool) -> !this","!doc":"<p>Sets the hidden state of all components configured by this Action.  Shortcut method\nfor <code><a href=\"#!/api/Ext.Action-method-hide\" rel=\"Ext.Action-method-hide\" class=\"docClass\">hide</a></code> and <code><a href=\"#!/api/Ext.Action-method-show\" rel=\"Ext.Action-method-show\" class=\"docClass\">show</a></code>.</p>\n"},"setIconCls":{"!type":"fn(cls: string) -> !this","!doc":"<p>Sets the icon CSS class for all components configured by this Action.  The class should supply\na background image that will be used as the icon image.</p>\n"},"setText":{"!type":"fn(text: string) -> !this","!doc":"<p>Sets the text to be displayed by all components configured by this Action.</p>\n"},"show":{"!type":"fn() -> !this","!doc":"<p>Shows all components configured by this Action.</p>\n"}}},"Ajax":{"!doc":"<p>A singleton instance of an <a href=\"#!/api/Ext.data.Connection\" rel=\"Ext.data.Connection\" class=\"docClass\">Ext.data.Connection</a>. This class\nis used to communicate with your server side code. It can be used as follows:</p>\n\n<pre><code><a href=\"#!/api/Ext.Ajax-method-request\" rel=\"Ext.Ajax-method-request\" class=\"docClass\">Ext.Ajax.request</a>({\n    url: 'page.php',\n    params: {\n        id: 1\n    },\n    success: function(response){\n        var text = response.responseText;\n        // process server response here\n    }\n});\n</code></pre>\n\n<p>Default options for all requests can be set by changing a property on the <a href=\"#!/api/Ext.Ajax\" rel=\"Ext.Ajax\" class=\"docClass\">Ext.Ajax</a> class:</p>\n\n<pre><code><a href=\"#!/api/Ext.Ajax-property-timeout\" rel=\"Ext.Ajax-property-timeout\" class=\"docClass\">Ext.Ajax.timeout</a> = 60000; // 60 seconds\n</code></pre>\n\n<p>Any options specified in the request method for the Ajax request will override any\ndefaults set on the <a href=\"#!/api/Ext.Ajax\" rel=\"Ext.Ajax\" class=\"docClass\">Ext.Ajax</a> class. In the code sample below, the timeout for the\nrequest will be 60 seconds.</p>\n\n<pre><code><a href=\"#!/api/Ext.Ajax-property-timeout\" rel=\"Ext.Ajax-property-timeout\" class=\"docClass\">Ext.Ajax.timeout</a> = 120000; // 120 seconds\n<a href=\"#!/api/Ext.Ajax-method-request\" rel=\"Ext.Ajax-method-request\" class=\"docClass\">Ext.Ajax.request</a>({\n    url: 'page.aspx',\n    timeout: 60000\n});\n</code></pre>\n\n<p>In general, this class will be used for all Ajax requests in your application.\nThe main reason for creating a separate <a href=\"#!/api/Ext.data.Connection\" rel=\"Ext.data.Connection\" class=\"docClass\">Ext.data.Connection</a> is for a\nseries of requests that share common settings that are different to all other\nrequests in the application.</p>\n","!type":"fn(config: Ext_Ajax_cfg)","prototype":{"!proto":"Ext.data.Connection.prototype"},"autoAbort":{"!type":"bool","!doc":"<p>Whether a new request should abort any pending requests.</p>\n"},"defaultHeaders":{"!type":"?","!doc":"<p>An object containing request headers which are added to each request made by this object.</p>\n"},"disableCaching":{"!type":"bool","!doc":"<p>True to add a unique cache-buster param to GET requests. Defaults to true.</p>\n"},"extraParams":{"!type":"?","!doc":"<p>An object containing properties which are used as extra parameters to each request made\nby this object. Session information and other data that you need\nto pass with each request are commonly put here.</p>\n"},"method":{"!type":"string","!doc":"<p>The default HTTP method to be used for requests. Note that this is case-sensitive and\nshould be all caps (if not set but params are present will use\n<tt>\"POST\"</tt>, otherwise will use <tt>\"GET\"</tt>.)</p>\n"},"timeout":{"!type":"number","!doc":"<p>The timeout in milliseconds to be used for requests. Defaults to 30000.</p>\n"},"url":{"!type":"string","!doc":"<p>The default URL to be used for requests to the server.\nIf the server receives all requests through one URL, setting this once is easier than\nentering it on every request.</p>\n"}},"Array":{"!doc":"<p>A set of useful static methods to deal with arrays; provide missing methods for older browsers.</p>\n","clean":{"!type":"fn(array: [?]) -> [?]","!doc":"<p>Filter through an array and remove empty item as defined in <a href=\"#!/api/Ext-method-isEmpty\" rel=\"Ext-method-isEmpty\" class=\"docClass\">Ext.isEmpty</a></p>\n\n<p>See <a href=\"#!/api/Ext.Array-method-filter\" rel=\"Ext.Array-method-filter\" class=\"docClass\">filter</a></p>\n"},"clone":{"!type":"fn(array: [?]) -> [?]","!doc":"<p>Clone a flat array without referencing the previous one. Note that this is different\nfrom <a href=\"#!/api/Ext-method-clone\" rel=\"Ext-method-clone\" class=\"docClass\">Ext.clone</a> since it doesn't handle recursive cloning. It's simply a convenient, easy-to-remember method\nfor Array.prototype.slice.call(array)</p>\n"},"contains":{"!type":"fn(array: [?], item: ?) -> bool","!doc":"<p>Checks whether or not the given <code>array</code> contains the specified <code>item</code></p>\n"},"difference":{"!type":"fn(arrayA: [?], arrayB: [?]) -> [?]","!doc":"<p>Perform a set difference A-B by subtracting all items in array B from array A.</p>\n"},"each":{"!type":"fn(iterable: [?]|+NodeList|?, fn: fn(), scope?: ?, reverse?: bool) -> bool","!doc":"<p>Iterates an array or an iterable value and invoke the given callback function for each item.</p>\n\n<pre><code>var countries = ['Vietnam', 'Singapore', 'United States', 'Russia'];\n\n<a href=\"#!/api/Ext.Array-method-each\" rel=\"Ext.Array-method-each\" class=\"docClass\">Ext.Array.each</a>(countries, function(name, index, countriesItSelf) {\n    console.log(name);\n});\n\nvar sum = function() {\n    var sum = 0;\n\n    <a href=\"#!/api/Ext.Array-method-each\" rel=\"Ext.Array-method-each\" class=\"docClass\">Ext.Array.each</a>(arguments, function(value) {\n        sum += value;\n    });\n\n    return sum;\n};\n\nsum(1, 2, 3); // returns 6\n</code></pre>\n\n<p>The iteration can be stopped by returning false in the function callback.</p>\n\n<pre><code><a href=\"#!/api/Ext.Array-method-each\" rel=\"Ext.Array-method-each\" class=\"docClass\">Ext.Array.each</a>(countries, function(name, index, countriesItSelf) {\n    if (name === 'Singapore') {\n        return false; // break here\n    }\n});\n</code></pre>\n\n<p><a href=\"#!/api/Ext-method-each\" rel=\"Ext-method-each\" class=\"docClass\">Ext.each</a> is alias for <a href=\"#!/api/Ext.Array-method-each\" rel=\"Ext.Array-method-each\" class=\"docClass\">Ext.Array.each</a></p>\n"},"equals":{"!type":"fn(array1: [?], array2: [?]) -> bool","!doc":"<p>Shallow compares the contents of 2 arrays using strict equality.</p>\n"},"erase":{"!type":"fn(array: [?], index: number, removeCount: number) -> [?]","!doc":"<p>Removes items from an array. This is functionally equivalent to the splice method\nof Array, but works around bugs in IE8's splice method and does not copy the\nremoved elements in order to return them (because very often they are ignored).</p>\n"},"every":{"!type":"fn(array: [?], fn: fn(), scope: ?) -> bool","!doc":"<p>Executes the specified function for each array element until the function returns a falsy value.\nIf such an item is found, the function will return false immediately.\nOtherwise, it will return true.</p>\n"},"filter":{"!type":"fn(array: [?], fn: fn(), scope: ?) -> [?]","!doc":"<p>Creates a new array with all of the elements of this array for which\nthe provided filtering function returns true.</p>\n"},"findBy":{"!type":"fn(array: [?], fn: fn(), scope?: ?) -> ?","!doc":"<p>Returns the first item in the array which elicits a true return value from the\npassed selection function.</p>\n"},"flatten":{"!type":"fn(array: [?]) -> [?]","!doc":"<p>Recursively flattens into 1-d Array. Injects Arrays inline.</p>\n"},"forEach":{"!type":"fn(array: [?], fn: fn(), scope?: ?) -> !this","!doc":"<p>Iterates an array and invoke the given callback function for each item. Note that this will simply\ndelegate to the native Array.prototype.forEach method if supported. It doesn't support stopping the\niteration by returning false in the callback function like <a href=\"#!/api/Ext.Array-method-each\" rel=\"Ext.Array-method-each\" class=\"docClass\">each</a>. However, performance\ncould be much better in modern browsers comparing with <a href=\"#!/api/Ext.Array-method-each\" rel=\"Ext.Array-method-each\" class=\"docClass\">each</a></p>\n"},"from":{"!type":"fn(value: ?, newReference?: bool) -> [?]","!doc":"<p>Converts a value to an array if it's not already an array; returns:</p>\n\n<ul>\n<li>An empty array if given value is <code>undefined</code> or <code>null</code></li>\n<li>Itself if given value is already an array</li>\n<li>An array copy if given value is <a href=\"#!/api/Ext-method-isIterable\" rel=\"Ext-method-isIterable\" class=\"docClass\">iterable</a> (arguments, NodeList and alike)</li>\n<li>An array with one item which is the given value, otherwise</li>\n</ul>\n\n"},"include":{"!type":"fn(array: [?], item: ?) -> !this","!doc":"<p>Push an item into the array only if the array doesn't contain it yet</p>\n"},"indexOf":{"!type":"fn(array: [?], item: ?, from?: number) -> number","!doc":"<p>Get the index of the provided <code>item</code> in the given <code>array</code>, a supplement for the\nmissing arrayPrototype.indexOf in Internet Explorer.</p>\n"},"insert":{"!type":"fn(array: [?], index: number, items: [?]) -> [?]","!doc":"<p>Inserts items in to an array.</p>\n"},"intersect":{"!type":"fn(array1: [?], array2: [?], etc: [?]) -> [?]","!doc":"<p>Merge multiple arrays into one with unique items that exist in all of the arrays.</p>\n"},"map":{"!type":"fn(array: [?], fn: fn(), scope?: ?) -> [?]","!doc":"<p>Creates a new array with the results of calling a provided function on every element in this array.</p>\n"},"max":{"!type":"fn(array: [?]|+NodeList, comparisonFn?: fn()) -> ?","!doc":"<p>Returns the maximum value in the Array.</p>\n"},"mean":{"!type":"fn(array: [?]) -> number","!doc":"<p>Calculates the mean of all items in the array.</p>\n"},"merge":{"!type":"fn(array1: [?], array2: [?], etc: [?]) -> [?]","!doc":"<p>Merge multiple arrays into one with unique items.</p>\n\n<p><a href=\"#!/api/Ext.Array-method-union\" rel=\"Ext.Array-method-union\" class=\"docClass\">union</a> is alias for <a href=\"#!/api/Ext.Array-method-merge\" rel=\"Ext.Array-method-merge\" class=\"docClass\">merge</a></p>\n"},"min":{"!type":"fn(array: [?]|+NodeList, comparisonFn?: fn()) -> ?","!doc":"<p>Returns the minimum value in the Array.</p>\n"},"pluck":{"!type":"fn(array: [?]|+NodeList, propertyName: string) -> [?]","!doc":"<p>Plucks the value of a property from each item in the Array. Example:</p>\n\n<pre><code><a href=\"#!/api/Ext.Array-method-pluck\" rel=\"Ext.Array-method-pluck\" class=\"docClass\">Ext.Array.pluck</a>(<a href=\"#!/api/Ext-method-query\" rel=\"Ext-method-query\" class=\"docClass\">Ext.query</a>(\"p\"), \"className\"); // [el1.className, el2.className, ..., elN.className]\n</code></pre>\n"},"push":{"!type":"fn(target: [?], elements: ?) -> [?]","!doc":"<p>Pushes new items onto the end of an Array.</p>\n\n<p>Passed parameters may be single items, or arrays of items. If an Array is found in the argument list, all its\nelements are pushed into the end of the target Array.</p>\n"},"remove":{"!type":"fn(array: [?], item: ?) -> [?]","!doc":"<p>Removes the specified item from the array if it exists</p>\n"},"replace":{"!type":"fn(array: [?], index: number, removeCount: number, insert?: [?]) -> [?]","!doc":"<p>Replaces items in an array. This is functionally equivalent to the splice method\nof Array, but works around bugs in IE8's splice method and is often more convenient\nto call because it accepts an array of items to insert rather than use a variadic\nargument list.</p>\n"},"slice":{"!type":"fn(array: [?], begin: number, end: number) -> [?]","!doc":"<p>Returns a shallow copy of a part of an array. This is equivalent to the native\ncall \"Array.prototype.slice.call(array, begin, end)\". This is often used when \"array\"\nis \"arguments\" since the arguments object does not supply a slice method but can\nbe the context object to Array.prototype.slice.</p>\n"},"some":{"!type":"fn(array: [?], fn: fn(), scope: ?) -> bool","!doc":"<p>Executes the specified function for each array element until the function returns a truthy value.\nIf such an item is found, the function will return true immediately. Otherwise, it will return false.</p>\n"},"sort":{"!type":"fn(array: [?], sortFn?: fn()) -> [?]","!doc":"<p>Sorts the elements of an Array.\nBy default, this method sorts the elements alphabetically and ascending.</p>\n"},"splice":{"!type":"fn(array: [?], index: number, removeCount: number, elements: ?) -> [?]","!doc":"<p>Replaces items in an array. This is equivalent to the splice method of Array, but\nworks around bugs in IE8's splice method. The signature is exactly the same as the\nsplice method except that the array is the first argument. All arguments following\nremoveCount are inserted in the array at index.</p>\n"},"sum":{"!type":"fn(array: [?]) -> number","!doc":"<p>Calculates the sum of all items in the given array.</p>\n"},"toArray":{"!type":"fn(iterable: ?, start?: number, end?: number) -> [?]","!doc":"<p>Converts any iterable (numeric indices and a length property) into a true array.</p>\n\n<pre><code>function test() {\n    var args = <a href=\"#!/api/Ext.Array-method-toArray\" rel=\"Ext.Array-method-toArray\" class=\"docClass\">Ext.Array.toArray</a>(arguments),\n        fromSecondToLastArgs = <a href=\"#!/api/Ext.Array-method-toArray\" rel=\"Ext.Array-method-toArray\" class=\"docClass\">Ext.Array.toArray</a>(arguments, 1);\n\n    alert(args.join(' '));\n    alert(fromSecondToLastArgs.join(' '));\n}\n\ntest('just', 'testing', 'here'); // alerts 'just testing here';\n                                 // alerts 'testing here';\n\n<a href=\"#!/api/Ext.Array-method-toArray\" rel=\"Ext.Array-method-toArray\" class=\"docClass\">Ext.Array.toArray</a>(document.getElementsByTagName('div')); // will convert the NodeList into an array\n<a href=\"#!/api/Ext.Array-method-toArray\" rel=\"Ext.Array-method-toArray\" class=\"docClass\">Ext.Array.toArray</a>('splitted'); // returns ['s', 'p', 'l', 'i', 't', 't', 'e', 'd']\n<a href=\"#!/api/Ext.Array-method-toArray\" rel=\"Ext.Array-method-toArray\" class=\"docClass\">Ext.Array.toArray</a>('splitted', 0, 3); // returns ['s', 'p', 'l']\n</code></pre>\n\n<p><a href=\"#!/api/Ext-method-toArray\" rel=\"Ext-method-toArray\" class=\"docClass\">Ext.toArray</a> is alias for <a href=\"#!/api/Ext.Array-method-toArray\" rel=\"Ext.Array-method-toArray\" class=\"docClass\">Ext.Array.toArray</a></p>\n"},"toMap":{"!type":"fn(array: [?], getKey?: string|fn(), scope?: ?) -> ?","!doc":"<p>Creates a map (object) keyed by the elements of the given array. The values in\nthe map are the index+1 of the array element. For example:</p>\n\n<pre><code> var map = <a href=\"#!/api/Ext.Array-method-toMap\" rel=\"Ext.Array-method-toMap\" class=\"docClass\">Ext.Array.toMap</a>(['a','b','c']);\n\n // map = { a: 1, b: 2, c: 3 };\n</code></pre>\n\n<p>Or a key property can be specified:</p>\n\n<pre><code> var map = <a href=\"#!/api/Ext.Array-method-toMap\" rel=\"Ext.Array-method-toMap\" class=\"docClass\">Ext.Array.toMap</a>([\n         { name: 'a' },\n         { name: 'b' },\n         { name: 'c' }\n     ], 'name');\n\n // map = { a: 1, b: 2, c: 3 };\n</code></pre>\n\n<p>Lastly, a key extractor can be provided:</p>\n\n<pre><code> var map = <a href=\"#!/api/Ext.Array-method-toMap\" rel=\"Ext.Array-method-toMap\" class=\"docClass\">Ext.Array.toMap</a>([\n         { name: 'a' },\n         { name: 'b' },\n         { name: 'c' }\n     ], function (obj) { return obj.name.toUpperCase(); });\n\n // map = { A: 1, B: 2, C: 3 };\n</code></pre>\n"},"toValueMap":{"!type":"fn(array: [?], getKey?: string|fn(), scope?: ?) -> ?","!doc":"<p>Creates a map (object) keyed by a property of elements of the given array. The values in\nthe map are the array element. For example:</p>\n\n<pre><code> var map = <a href=\"#!/api/Ext.Array-method-toMap\" rel=\"Ext.Array-method-toMap\" class=\"docClass\">Ext.Array.toMap</a>(['a','b','c']);\n\n // map = { a: 'a', b: 'b', c: 'c' };\n</code></pre>\n\n<p>Or a key property can be specified:</p>\n\n<pre><code> var map = <a href=\"#!/api/Ext.Array-method-toMap\" rel=\"Ext.Array-method-toMap\" class=\"docClass\">Ext.Array.toMap</a>([\n         { name: 'a' },\n         { name: 'b' },\n         { name: 'c' }\n     ], 'name');\n\n // map = { a: {name: 'a'}, b: {name: 'b'}, c: {name: 'c'} };\n</code></pre>\n\n<p>Lastly, a key extractor can be provided:</p>\n\n<pre><code> var map = <a href=\"#!/api/Ext.Array-method-toMap\" rel=\"Ext.Array-method-toMap\" class=\"docClass\">Ext.Array.toMap</a>([\n         { name: 'a' },\n         { name: 'b' },\n         { name: 'c' }\n     ], function (obj) { return obj.name.toUpperCase(); });\n\n // map = { A: {name: 'a'}, B: {name: 'b'}, C: {name: 'c'} };\n</code></pre>\n"},"union":{"!type":"fn(array1: [?], array2: [?], etc: [?]) -> [?]","!doc":"<p>Merge multiple arrays into one with unique items.</p>\n\n<p><a href=\"#!/api/Ext.Array-method-union\" rel=\"Ext.Array-method-union\" class=\"docClass\">union</a> is alias for <a href=\"#!/api/Ext.Array-method-merge\" rel=\"Ext.Array-method-merge\" class=\"docClass\">merge</a></p>\n"},"unique":{"!type":"fn(array: [?]) -> [?]","!doc":"<p>Returns a new array with unique items</p>\n"}},"Base":{"!doc":"<p>The root of all classes created with <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>.</p>\n\n<p><a href=\"#!/api/Ext.Base\" rel=\"Ext.Base\" class=\"docClass\">Ext.Base</a> is the building block of all Ext classes. All classes in Ext inherit from <a href=\"#!/api/Ext.Base\" rel=\"Ext.Base\" class=\"docClass\">Ext.Base</a>.\nAll prototype and static members of this class are inherited by all other classes.</p>\n","prototype":{"$className":{"!type":"string"},"configMap":{"!type":"?"},"initConfigList":{"!type":"[?]"},"initConfigMap":{"!type":"?"},"isInstance":{"!type":"bool"},"self":{"!type":"+Ext.Class","!doc":"<p>Get the reference to the current class from which this object was instantiated. Unlike <a href=\"#!/api/Ext.Base-method-statics\" rel=\"Ext.Base-method-statics\" class=\"docClass\">statics</a>,\n<code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href=\"#!/api/Ext.Base-method-statics\" rel=\"Ext.Base-method-statics\" class=\"docClass\">statics</a>\nfor a detailed comparison</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.Cat', {\n    statics: {\n        speciesName: 'Cat' // My.Cat.speciesName = 'Cat'\n    },\n\n    constructor: function() {\n        alert(this.self.speciesName); // dependent on 'this'\n    },\n\n    clone: function() {\n        return new this.self();\n    }\n});\n\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.SnowLeopard', {\n    extend: 'My.Cat',\n    statics: {\n        speciesName: 'Snow Leopard'         // My.SnowLeopard.speciesName = 'Snow Leopard'\n    }\n});\n\nvar cat = new My.Cat();                     // alerts 'Cat'\nvar snowLeopard = new My.SnowLeopard();     // alerts 'Snow Leopard'\n\nvar clone = snowLeopard.clone();\nalert(<a href=\"#!/api/Ext-method-getClassName\" rel=\"Ext-method-getClassName\" class=\"docClass\">Ext.getClassName</a>(clone));             // alerts 'My.SnowLeopard'\n</code></pre>\n"},"callOverridden":{"!type":"fn(args: [?]|+Arguments) -> ?","!doc":"<p>Call the original method that was previously overridden with <a href=\"#!/api/Ext.Base-static-method-override\" rel=\"Ext.Base-static-method-override\" class=\"docClass\">override</a></p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.Cat', {\n    constructor: function() {\n        alert(\"I'm a cat!\");\n    }\n});\n\nMy.Cat.override({\n    constructor: function() {\n        alert(\"I'm going to be a cat!\");\n\n        this.callOverridden();\n\n        alert(\"Meeeeoooowwww\");\n    }\n});\n\nvar kitty = new My.Cat(); // alerts \"I'm going to be a cat!\"\n                          // alerts \"I'm a cat!\"\n                          // alerts \"Meeeeoooowwww\"\n</code></pre>\n"},"callParent":{"!type":"fn(args: [?]|+Arguments) -> ?","!doc":"<p>Call the \"parent\" method of the current method. That is the method previously\noverridden by derivation or by an override (see <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>).</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.Base', {\n     constructor: function (x) {\n         this.x = x;\n     },\n\n     statics: {\n         method: function (x) {\n             return x;\n         }\n     }\n });\n\n <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.Derived', {\n     extend: 'My.Base',\n\n     constructor: function () {\n         this.callParent([21]);\n     }\n });\n\n var obj = new My.Derived();\n\n alert(obj.x);  // alerts 21\n</code></pre>\n\n<p>This can be used with an override as follows:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.DerivedOverride', {\n     override: 'My.Derived',\n\n     constructor: function (x) {\n         this.callParent([x*2]); // calls original My.Derived constructor\n     }\n });\n\n var obj = new My.Derived();\n\n alert(obj.x);  // now alerts 42\n</code></pre>\n\n<p>This also works with static methods.</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.Derived2', {\n     extend: 'My.Base',\n\n     statics: {\n         method: function (x) {\n             return this.callParent([x*2]); // calls My.Base.method\n         }\n     }\n });\n\n alert(My.Base.method(10);     // alerts 10\n alert(My.Derived2.method(10); // alerts 20\n</code></pre>\n\n<p>Lastly, it also works with overridden static methods.</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.Derived2Override', {\n     override: 'My.Derived2',\n\n     statics: {\n         method: function (x) {\n             return this.callParent([x*2]); // calls My.Derived2.method\n         }\n     }\n });\n\n alert(My.Derived2.method(10); // now alerts 40\n</code></pre>\n\n<p>To override a method and replace it and also call the superclass method, use\n<a href=\"#!/api/Ext.Base-method-callSuper\" rel=\"Ext.Base-method-callSuper\" class=\"docClass\">callSuper</a>. This is often done to patch a method to fix a bug.</p>\n"},"callSuper":{"!type":"fn(args: [?]|+Arguments) -> ?","!doc":"<p>This method is used by an override to call the superclass method but bypass any\noverridden method. This is often done to \"patch\" a method that contains a bug\nbut for whatever reason cannot be fixed directly.</p>\n\n<p>Consider:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Ext.some.Class', {\n     method: function () {\n         console.log('Good');\n     }\n });\n\n <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Ext.some.DerivedClass', {\n     method: function () {\n         console.log('Bad');\n\n         // ... logic but with a bug ...\n\n         this.callParent();\n     }\n });\n</code></pre>\n\n<p>To patch the bug in <code>DerivedClass.method</code>, the typical solution is to create an\noverride:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('App.paches.DerivedClass', {\n     override: 'Ext.some.DerivedClass',\n\n     method: function () {\n         console.log('Fixed');\n\n         // ... logic but with bug fixed ...\n\n         this.callSuper();\n     }\n });\n</code></pre>\n\n<p>The patch method cannot use <code>callParent</code> to call the superclass <code>method</code> since\nthat would call the overridden method containing the bug. In other words, the\nabove patch would only produce \"Fixed\" then \"Good\" in the console log, whereas,\nusing <code>callParent</code> would produce \"Fixed\" then \"Bad\" then \"Good\".</p>\n"},"configClass":{"!type":"fn() -> !this"},"destroy":{"!type":"fn() -> !this"},"getConfig":{"!type":"fn(name: ?) -> !this"},"getInitialConfig":{"!type":"fn(name?: string) -> ?|+Mixed","!doc":"<p>Returns the initial configuration passed to constructor when instantiating\nthis class.</p>\n"},"hasConfig":{"!type":"fn(config: ?) -> !this"},"initConfig":{"!type":"fn(config: ?) -> +Ext.Base","!doc":"<p>Initialize configuration for this class. a typical example:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.awesome.Class', {\n    // The default config\n    config: {\n        name: 'Awesome',\n        isAwesome: true\n    },\n\n    constructor: function(config) {\n        this.initConfig(config);\n    }\n});\n\nvar awesome = new My.awesome.Class({\n    name: 'Super Awesome'\n});\n\nalert(awesome.getName()); // 'Super Awesome'\n</code></pre>\n"},"onConfigUpdate":{"!type":"fn(names: ?, callback: ?, scope: ?) -> !this"},"setConfig":{"!type":"fn(config: ?, applyIfNotSet: ?) -> +Ext.Base"},"statics":{"!type":"fn() -> +Ext.Class","!doc":"<p>Get the reference to the class from which this object was instantiated. Note that unlike <a href=\"#!/api/Ext.Base-property-self\" rel=\"Ext.Base-property-self\" class=\"docClass\">self</a>,\n<code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what\n<code>this</code> points to during run-time</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.Cat', {\n    statics: {\n        totalCreated: 0,\n        speciesName: 'Cat' // My.Cat.speciesName = 'Cat'\n    },\n\n    constructor: function() {\n        var statics = this.statics();\n\n        alert(statics.speciesName);     // always equals to 'Cat' no matter what 'this' refers to\n                                        // equivalent to: My.Cat.speciesName\n\n        alert(this.self.speciesName);   // dependent on 'this'\n\n        statics.totalCreated++;\n    },\n\n    clone: function() {\n        var cloned = new this.self;                      // dependent on 'this'\n\n        cloned.groupName = this.statics().speciesName;   // equivalent to: My.Cat.speciesName\n\n        return cloned;\n    }\n});\n\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.SnowLeopard', {\n    extend: 'My.Cat',\n\n    statics: {\n        speciesName: 'Snow Leopard'     // My.SnowLeopard.speciesName = 'Snow Leopard'\n    },\n\n    constructor: function() {\n        this.callParent();\n    }\n});\n\nvar cat = new My.Cat();                 // alerts 'Cat', then alerts 'Cat'\n\nvar snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard'\n\nvar clone = snowLeopard.clone();\nalert(<a href=\"#!/api/Ext-method-getClassName\" rel=\"Ext-method-getClassName\" class=\"docClass\">Ext.getClassName</a>(clone));         // alerts 'My.SnowLeopard'\nalert(clone.groupName);                 // alerts 'Cat'\n\nalert(My.Cat.totalCreated);             // alerts 3\n</code></pre>\n"}},"$onExtended":{"!type":"[?]"},"addConfig":{"!type":"fn(config: ?) -> !this"},"addInheritableStatics":{"!type":"fn(members: ?) -> !this"},"addMember":{"!type":"fn(name: ?, member: ?) -> !this"},"addMembers":{"!type":"fn(members: ?) -> !this","!doc":"<p>Add methods / properties to the prototype of this class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.awesome.Cat', {\n    constructor: function() {\n        ...\n    }\n});\n\n My.awesome.Cat.addMembers({\n     meow: function() {\n        alert('Meowww...');\n     }\n });\n\n var kitty = new My.awesome.Cat;\n kitty.meow();\n</code></pre>\n"},"addStatics":{"!type":"fn(members: ?) -> +Ext.Base","!doc":"<p>Add / override static properties of this class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.cool.Class', {\n    ...\n});\n\nMy.cool.Class.addStatics({\n    someProperty: 'someValue',      // My.cool.Class.someProperty = 'someValue'\n    method1: function() { ... },    // My.cool.Class.method1 = function() { ... };\n    method2: function() { ... }     // My.cool.Class.method2 = function() { ... };\n});\n</code></pre>\n"},"addXtype":{"!type":"fn(xtype: ?) -> !this"},"borrow":{"!type":"fn(fromClass: +Ext.Base, members: [?]|string) -> +Ext.Base","!doc":"<p>Borrow another class' members to the prototype of this class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Bank', {\n    money: '$$$',\n    printMoney: function() {\n        alert('$$$$$$$');\n    }\n});\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Thief', {\n    ...\n});\n\nThief.borrow(Bank, ['money', 'printMoney']);\n\nvar steve = new Thief();\n\nalert(steve.money); // alerts '$$$'\nsteve.printMoney(); // alerts '$$$$$$$'\n</code></pre>\n"},"create":{"!type":"fn() -> ?","!doc":"<p>Create a new instance of this Class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.cool.Class', {\n    ...\n});\n\nMy.cool.Class.create({\n    someConfig: true\n});\n</code></pre>\n\n<p>All parameters are passed to the constructor of the class.</p>\n"},"createAlias":{"!type":"fn(alias: string|?, origin: string|?) -> !this","!doc":"<p>Create aliases for existing prototype methods. Example:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.cool.Class', {\n    method1: function() { ... },\n    method2: function() { ... }\n});\n\nvar test = new My.cool.Class();\n\nMy.cool.Class.createAlias({\n    method3: 'method1',\n    method4: 'method2'\n});\n\ntest.method3(); // test.method1()\n\nMy.cool.Class.createAlias('method5', 'method3');\n\ntest.method5(); // test.method3() -&gt; test.method1()\n</code></pre>\n"},"extend":{"!type":"fn(config: ?) -> !this"},"getName":{"!type":"fn() -> string","!doc":"<p>Get the current class' name in string format.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.cool.Class', {\n    constructor: function() {\n        alert(this.self.getName()); // alerts 'My.cool.Class'\n    }\n});\n\nMy.cool.Class.getName(); // 'My.cool.Class'\n</code></pre>\n"},"implement":{"!type":"fn() -> !this","!doc":"<p>Adds members to class.</p>\n"},"mixin":{"!type":"fn(name: ?, mixinClass: ?) -> !this","!doc":"<p>Used internally by the mixins pre-processor</p>\n"},"onExtended":{"!type":"fn(fn: ?, scope: ?) -> !this"},"override":{"!type":"fn(members: ?) -> +Ext.Base","!doc":"<p>Override members of this class. Overridden methods can be invoked via\n<a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a>.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.Cat', {\n    constructor: function() {\n        alert(\"I'm a cat!\");\n    }\n});\n\nMy.Cat.override({\n    constructor: function() {\n        alert(\"I'm going to be a cat!\");\n\n        this.callParent(arguments);\n\n        alert(\"Meeeeoooowwww\");\n    }\n});\n\nvar kitty = new My.Cat(); // alerts \"I'm going to be a cat!\"\n                          // alerts \"I'm a cat!\"\n                          // alerts \"Meeeeoooowwww\"\n</code></pre>\n\n<p>As of 4.1, direct use of this method is deprecated. Use <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>\ninstead:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.CatOverride', {\n    override: 'My.Cat',\n    constructor: function() {\n        alert(\"I'm going to be a cat!\");\n\n        this.callParent(arguments);\n\n        alert(\"Meeeeoooowwww\");\n    }\n});\n</code></pre>\n\n<p>The above accomplishes the same result but can be managed by the <a href=\"#!/api/Ext.Loader\" rel=\"Ext.Loader\" class=\"docClass\">Ext.Loader</a>\nwhich can properly order the override and its target class and the build process\ncan determine whether the override is needed based on the required state of the\ntarget class (My.Cat).</p>\n"},"triggerExtended":{"!type":"fn() -> !this"}},"Class":{"!doc":"<p>Handles class creation throughout the framework. This is a low level factory that is used by <a href=\"#!/api/Ext.ClassManager\" rel=\"Ext.ClassManager\" class=\"docClass\">Ext.ClassManager</a> and generally\nshould not be used directly. If you choose to use <a href=\"#!/api/Ext.Class\" rel=\"Ext.Class\" class=\"docClass\">Ext.Class</a> you will lose out on the namespace, aliasing and depency loading\nfeatures made available by <a href=\"#!/api/Ext.ClassManager\" rel=\"Ext.ClassManager\" class=\"docClass\">Ext.ClassManager</a>. The only time you would use <a href=\"#!/api/Ext.Class\" rel=\"Ext.Class\" class=\"docClass\">Ext.Class</a> directly is to create an anonymous class.</p>\n\n<p>If you wish to create a class you should use <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a> which aliases\n<a href=\"#!/api/Ext.ClassManager-method-create\" rel=\"Ext.ClassManager-method-create\" class=\"docClass\">Ext.ClassManager.create</a> to enable namespacing and dynamic dependency resolution.</p>\n\n<p><a href=\"#!/api/Ext.Class\" rel=\"Ext.Class\" class=\"docClass\">Ext.Class</a> is the factory and <strong>not</strong> the superclass of everything. For the base class that <strong>all</strong> Ext classes inherit\nfrom, see <a href=\"#!/api/Ext.Base\" rel=\"Ext.Base\" class=\"docClass\">Ext.Base</a>.</p>\n","!type":"fn(data: ?, onCreated: fn())","prototype":{"alias":{"!type":"[string]","!doc":"<p>List of short aliases for class names.  Most useful for defining xtypes for widgets:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('MyApp.CoolPanel', {\n    extend: '<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>',\n    alias: ['widget.coolpanel'],\n    title: 'Yeah!'\n});\n\n// Using <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('widget.coolpanel');\n\n// Using the shorthand for defining widgets by xtype\n<a href=\"#!/api/Ext-method-widget\" rel=\"Ext-method-widget\" class=\"docClass\">Ext.widget</a>('panel', {\n    items: [\n        {xtype: 'coolpanel', html: 'Foo'},\n        {xtype: 'coolpanel', html: 'Bar'}\n    ]\n});\n</code></pre>\n\n<p>Besides \"widget\" for xtype there are alias namespaces like \"feature\" for ftype and \"plugin\" for ptype.</p>\n"},"alternateClassName":{"!type":"string|[string]","!doc":"<p>Defines alternate names for this class.  For example:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Developer', {\n    alternateClassName: ['Coder', 'Hacker'],\n    code: function(msg) {\n        alert('Typing... ' + msg);\n    }\n});\n\nvar joe = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('Developer');\njoe.code('stackoverflow');\n\nvar rms = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('Hacker');\nrms.code('hack hack');\n</code></pre>\n"},"config":{"!type":"?","!doc":"<p>List of configuration options with their default values, for which automatically\naccessor methods are generated.  For example:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('SmartPhone', {\n     config: {\n         hasTouchScreen: false,\n         operatingSystem: 'Other',\n         price: 500\n     },\n     constructor: function(cfg) {\n         this.initConfig(cfg);\n     }\n});\n\nvar iPhone = new SmartPhone({\n     hasTouchScreen: true,\n     operatingSystem: 'iOS'\n});\n\niPhone.getPrice(); // 500;\niPhone.getOperatingSystem(); // 'iOS'\niPhone.getHasTouchScreen(); // true;\n</code></pre>\n\n<p>NOTE for when configs are reference types, the getter and setter methods do not make copies.</p>\n\n<p>For example, when a config value is set, the reference is stored on the instance. All instances that set\nthe same reference type will share it.</p>\n\n<p>In the case of the getter, the value with either come from the prototype if the setter was never called or from\nthe instance as the last value passed to the setter.</p>\n\n<p>For some config properties, the value passed to the setter is transformed prior to being stored on the instance.</p>\n"},"extend":{"!type":"string","!doc":"<p>The parent class that this class extends. For example:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Person', {\n    say: function(text) { alert(text); }\n});\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Developer', {\n    extend: 'Person',\n    say: function(text) { this.callParent([\"print \"+text]); }\n});\n</code></pre>\n"},"inheritableStatics":{"!type":"?","!doc":"<p>List of inheritable static methods for this class.\nOtherwise just like <a href=\"#!/api/Ext.Class-cfg-statics\" rel=\"Ext.Class-cfg-statics\" class=\"docClass\">statics</a> but subclasses inherit these methods.</p>\n"},"mixins":{"!type":"[string]|?","!doc":"<p>List of classes to mix into this class. For example:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('CanSing', {\n     sing: function() {\n         alert(\"I'm on the highway to hell...\")\n     }\n});\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Musician', {\n     mixins: ['CanSing']\n})\n</code></pre>\n\n<p>In this case the Musician class will get a <code>sing</code> method from CanSing mixin.</p>\n\n<p>But what if the Musician already has a <code>sing</code> method? Or you want to mix\nin two classes, both of which define <code>sing</code>?  In such a cases it's good\nto define mixins as an object, where you assign a name to each mixin:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Musician', {\n     mixins: {\n         canSing: 'CanSing'\n     },\n\n     sing: function() {\n         // delegate singing operation to mixin\n         this.mixins.canSing.sing.call(this);\n     }\n})\n</code></pre>\n\n<p>In this case the <code>sing</code> method of Musician will overwrite the\nmixed in <code>sing</code> method. But you can access the original mixed in method\nthrough special <code>mixins</code> property.</p>\n"},"requires":{"!type":"[string]","!doc":"<p>List of classes that have to be loaded before instantiating this class.\nFor example:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Mother', {\n    requires: ['Child'],\n    giveBirth: function() {\n        // we can be sure that child class is available.\n        return new Child();\n    }\n});\n</code></pre>\n"},"singleton":{"!type":"bool","!doc":"<p>When set to true, the class will be instantiated as singleton.  For example:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Logger', {\n    singleton: true,\n    log: function(msg) {\n        console.log(msg);\n    }\n});\n\nLogger.log('Hello');\n</code></pre>\n"},"statics":{"!type":"?","!doc":"<p>List of static methods for this class. For example:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Computer', {\n     statics: {\n         factory: function(brand) {\n             // 'this' in static methods refer to the class itself\n             return new this(brand);\n         }\n     },\n\n     constructor: function() { ... }\n});\n\nvar dellComputer = Computer.factory('Dell');\n</code></pre>\n"},"uses":{"!type":"[string]","!doc":"<p>List of optional classes to load together with this class. These aren't neccessarily loaded before\nthis class is created, but are guaranteed to be available before <a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a> listeners are\ninvoked. For example:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Mother', {\n    uses: ['Child'],\n    giveBirth: function() {\n        // This code might, or might not work:\n        // return new Child();\n\n        // Instead use <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>() to load the class at the spot if not loaded already:\n        return <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('Child');\n    }\n});\n</code></pre>\n"},"defaultPreprocessors":{"!type":"[?]"},"preprocessors":{"!type":"?"},"create":{"!type":"fn(Class: ?, data: ?) -> !this"},"getPreprocessors":{"!type":"fn() -> !this"},"onBeforeCreated":{"!type":"fn(Class: ?, data: ?, hooks: ?) -> !this"},"process":{"!type":"fn(Class: ?, data: ?, onCreated: ?) -> !this"}},"getDefaultPreprocessors":{"!type":"fn() -> [fn()]","!doc":"<p>Retrieve the array stack of default pre-processors</p>\n"},"getPreprocessor":{"!type":"fn(name: string) -> fn()","!doc":"<p>Retrieve a pre-processor callback function by its name, which has been registered before</p>\n"},"registerPreprocessor":{"!type":"fn(name: string, fn: fn()) -> +Ext.Class","!doc":"<p>Register a new pre-processor to be used during the class creation process</p>\n"},"setDefaultPreprocessorPosition":{"!type":"fn(name: string, offset: string, relativeName: string) -> +Ext.Class","!doc":"<p>Insert this pre-processor at a specific position in the stack, optionally relative to\nany existing pre-processor. For example:</p>\n\n<pre><code><a href=\"#!/api/Ext.Class-static-method-registerPreprocessor\" rel=\"Ext.Class-static-method-registerPreprocessor\" class=\"docClass\">Ext.Class.registerPreprocessor</a>('debug', function(cls, data, fn) {\n    // Your code here\n\n    if (fn) {\n        fn.call(this, cls, data);\n    }\n}).setDefaultPreprocessorPosition('debug', 'last');\n</code></pre>\n"},"setDefaultPreprocessors":{"!type":"fn(preprocessors: [?]) -> +Ext.Class","!doc":"<p>Set the default array stack of default pre-processors</p>\n"}},"ClassManager":{"!doc":"<p><a href=\"#!/api/Ext.ClassManager\" rel=\"Ext.ClassManager\" class=\"docClass\">Ext.ClassManager</a> manages all classes and handles mapping from string class name to\nactual class objects throughout the whole framework. It is not generally accessed directly, rather through\nthese convenient shorthands:</p>\n\n<ul>\n<li><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a></li>\n<li><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a></li>\n<li><a href=\"#!/api/Ext-method-widget\" rel=\"Ext-method-widget\" class=\"docClass\">Ext.widget</a></li>\n<li><a href=\"#!/api/Ext-method-getClass\" rel=\"Ext-method-getClass\" class=\"docClass\">Ext.getClass</a></li>\n<li><a href=\"#!/api/Ext-method-getClassName\" rel=\"Ext-method-getClassName\" class=\"docClass\">Ext.getClassName</a></li>\n</ul>\n\n\n<h1>Basic syntax:</h1>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>(className, properties);\n</code></pre>\n\n<p>in which <code>properties</code> is an object represent a collection of properties that apply to the class. See\n<a href=\"#!/api/Ext.ClassManager-method-create\" rel=\"Ext.ClassManager-method-create\" class=\"docClass\">create</a> for more detailed instructions.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Person', {\n     name: 'Unknown',\n\n     constructor: function(name) {\n         if (name) {\n             this.name = name;\n         }\n     },\n\n     eat: function(foodType) {\n         alert(\"I'm eating: \" + foodType);\n\n         return this;\n     }\n});\n\nvar aaron = new Person(\"Aaron\");\naaron.eat(\"Sandwich\"); // alert(\"I'm eating: Sandwich\");\n</code></pre>\n\n<p><a href=\"#!/api/Ext.Class\" rel=\"Ext.Class\" class=\"docClass\">Ext.Class</a> has a powerful set of extensible <a href=\"#!/api/Ext.Class-static-method-registerPreprocessor\" rel=\"Ext.Class-static-method-registerPreprocessor\" class=\"docClass\">pre-processors</a> which takes care of\neverything related to class creation, including but not limited to inheritance, mixins, configuration, statics, etc.</p>\n\n<h1>Inheritance:</h1>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Developer', {\n     extend: 'Person',\n\n     constructor: function(name, isGeek) {\n         this.isGeek = isGeek;\n\n         // Apply a method from the parent class' prototype\n         this.callParent([name]);\n     },\n\n     code: function(language) {\n         alert(\"I'm coding in: \" + language);\n\n         this.eat(\"Bugs\");\n\n         return this;\n     }\n});\n\nvar jacky = new Developer(\"Jacky\", true);\njacky.code(\"JavaScript\"); // alert(\"I'm coding in: JavaScript\");\n                          // alert(\"I'm eating: Bugs\");\n</code></pre>\n\n<p>See <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">Ext.Base.callParent</a> for more details on calling superclass' methods</p>\n\n<h1>Mixins:</h1>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('CanPlayGuitar', {\n     playGuitar: function() {\n        alert(\"F#...G...D...A\");\n     }\n});\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('CanComposeSongs', {\n     composeSongs: function() { ... }\n});\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('CanSing', {\n     sing: function() {\n         alert(\"I'm on the highway to hell...\")\n     }\n});\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Musician', {\n     extend: 'Person',\n\n     mixins: {\n         canPlayGuitar: 'CanPlayGuitar',\n         canComposeSongs: 'CanComposeSongs',\n         canSing: 'CanSing'\n     }\n})\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('CoolPerson', {\n     extend: 'Person',\n\n     mixins: {\n         canPlayGuitar: 'CanPlayGuitar',\n         canSing: 'CanSing'\n     },\n\n     sing: function() {\n         alert(\"Ahem....\");\n\n         this.mixins.canSing.sing.call(this);\n\n         alert(\"[Playing guitar at the same time...]\");\n\n         this.playGuitar();\n     }\n});\n\nvar me = new CoolPerson(\"Jacky\");\n\nme.sing(); // alert(\"Ahem...\");\n           // alert(\"I'm on the highway to hell...\");\n           // alert(\"[Playing guitar at the same time...]\");\n           // alert(\"F#...G...D...A\");\n</code></pre>\n\n<h1>Config:</h1>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('SmartPhone', {\n     config: {\n         hasTouchScreen: false,\n         operatingSystem: 'Other',\n         price: 500\n     },\n\n     isExpensive: false,\n\n     constructor: function(config) {\n         this.initConfig(config);\n     },\n\n     applyPrice: function(price) {\n         this.isExpensive = (price &gt; 500);\n\n         return price;\n     },\n\n     applyOperatingSystem: function(operatingSystem) {\n         if (!(/^(iOS|Android|BlackBerry)$/i).test(operatingSystem)) {\n             return 'Other';\n         }\n\n         return operatingSystem;\n     }\n});\n\nvar iPhone = new SmartPhone({\n     hasTouchScreen: true,\n     operatingSystem: 'iOS'\n});\n\niPhone.getPrice(); // 500;\niPhone.getOperatingSystem(); // 'iOS'\niPhone.getHasTouchScreen(); // true;\niPhone.hasTouchScreen(); // true\n\niPhone.isExpensive; // false;\niPhone.setPrice(600);\niPhone.getPrice(); // 600\niPhone.isExpensive; // true;\n\niPhone.setOperatingSystem('AlienOS');\niPhone.getOperatingSystem(); // 'Other'\n</code></pre>\n\n<h1>Statics:</h1>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Computer', {\n     statics: {\n         factory: function(brand) {\n            // 'this' in static methods refer to the class itself\n             return new this(brand);\n         }\n     },\n\n     constructor: function() { ... }\n});\n\nvar dellComputer = Computer.factory('Dell');\n</code></pre>\n\n<p>Also see <a href=\"#!/api/Ext.Base-method-statics\" rel=\"Ext.Base-method-statics\" class=\"docClass\">Ext.Base.statics</a> and <a href=\"#!/api/Ext.Base-property-self\" rel=\"Ext.Base-property-self\" class=\"docClass\">Ext.Base.self</a> for more details on accessing\nstatic properties within class methods</p>\n","classes":{"!type":"?","!doc":"<p>All classes which were defined through the ClassManager. Keys are the\nname of the classes and the values are references to the classes.</p>\n"},"createdListeners":{"!type":"[?]"},"defaultPostprocessors":{"!type":"[?]"},"enableNamespaceParseCache":{"!type":"bool"},"existCache":{"!type":"?"},"instantiators":{"!type":"[?]"},"maps":{"!type":"?"},"nameCreatedListeners":{"!type":"?"},"namespaceParseCache":{"!type":"?"},"namespaceRewrites":{"!type":"?"},"postprocessors":{"!type":"?"},"addNameAliasMappings":{"!type":"fn(aliases: ?) -> +Ext.ClassManager","!doc":"<p>Adds a batch of class name to alias mappings</p>\n"},"addNameAlternateMappings":{"!type":"fn(alternates: ?) -> +Ext.ClassManager"},"create":{"!type":"fn(className: ?, data: ?, createdFn: ?) -> !this","!doc":"<p>Defines a class.</p>\n"},"createNamespaces":{"!type":"fn() -> !this","!doc":"<p>The new <a href=\"#!/api/Ext-method-ns\" rel=\"Ext-method-ns\" class=\"docClass\">Ext.ns</a>, supports namespace rewriting</p>\n"},"dynInstantiate":{"!type":"fn(name: ?, args: ?) -> !this"},"get":{"!type":"fn(name: string) -> +Ext.Class","!doc":"<p>Retrieve a class by its name.</p>\n"},"getAliasesByName":{"!type":"fn(name: string) -> [?]","!doc":"<p>Get the aliases of a class by the class name</p>\n"},"getByAlias":{"!type":"fn(alias: string) -> +Ext.Class","!doc":"<p>Get a reference to the class by its alias.</p>\n"},"getClass":{"!type":"fn(object: ?) -> +Ext.Class","!doc":"<p>Get the class of the provided object; returns null if it's not an instance\nof any class created with <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>.</p>\n\n<p><a href=\"#!/api/Ext.ClassManager-method-getClass\" rel=\"Ext.ClassManager-method-getClass\" class=\"docClass\">getClass</a> is usually invoked by the shorthand <a href=\"#!/api/Ext-method-getClass\" rel=\"Ext-method-getClass\" class=\"docClass\">Ext.getClass</a>.</p>\n\n<pre><code>var component = new <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>();\n\n<a href=\"#!/api/Ext-method-getClass\" rel=\"Ext-method-getClass\" class=\"docClass\">Ext.getClass</a>(component); // returns <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\n</code></pre>\n"},"getDisplayName":{"!type":"fn(object: ?) -> string","!doc":"<p>Returns the displayName property or className or object. When all else fails, returns \"Anonymous\".</p>\n"},"getInstantiator":{"!type":"fn(length: ?) -> !this"},"getName":{"!type":"fn(object: +Ext.Class|?) -> string","!doc":"<p>Get the name of the class by its reference or its instance;</p>\n\n<p><a href=\"#!/api/Ext.ClassManager-method-getName\" rel=\"Ext.ClassManager-method-getName\" class=\"docClass\">getName</a> is usually invoked by the shorthand <a href=\"#!/api/Ext-method-getClassName\" rel=\"Ext-method-getClassName\" class=\"docClass\">Ext.getClassName</a>.</p>\n\n<pre><code>Ext.getName(<a href=\"#!/api/Ext.Action\" rel=\"Ext.Action\" class=\"docClass\">Ext.Action</a>); // returns \"<a href=\"#!/api/Ext.Action\" rel=\"Ext.Action\" class=\"docClass\">Ext.Action</a>\"\n</code></pre>\n"},"getNameByAlias":{"!type":"fn(alias: string) -> string","!doc":"<p>Get the name of a class by its alias.</p>\n"},"getNameByAlternate":{"!type":"fn(alternate: string) -> string","!doc":"<p>Get the name of a class by its alternate name.</p>\n"},"getNamesByExpression":{"!type":"fn(expression: string) -> [string]","!doc":"<p>Converts a string expression to an array of matching class names. An expression can either refers to class aliases\nor class names. Expressions support wildcards:</p>\n\n<pre><code> // returns ['<a href=\"#!/api/Ext.window.Window\" rel=\"Ext.window.Window\" class=\"docClass\">Ext.window.Window</a>']\nvar window = <a href=\"#!/api/Ext.ClassManager-method-getNamesByExpression\" rel=\"Ext.ClassManager-method-getNamesByExpression\" class=\"docClass\">Ext.ClassManager.getNamesByExpression</a>('widget.window');\n\n// returns ['widget.panel', 'widget.window', ...]\nvar allWidgets = <a href=\"#!/api/Ext.ClassManager-method-getNamesByExpression\" rel=\"Ext.ClassManager-method-getNamesByExpression\" class=\"docClass\">Ext.ClassManager.getNamesByExpression</a>('widget.*');\n\n// returns ['<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', 'Ext.data.ArrayProxy', ...]\nvar allData = <a href=\"#!/api/Ext.ClassManager-method-getNamesByExpression\" rel=\"Ext.ClassManager-method-getNamesByExpression\" class=\"docClass\">Ext.ClassManager.getNamesByExpression</a>('Ext.data.*');\n</code></pre>\n"},"instantiate":{"!type":"fn() -> !this"},"instantiateByAlias":{"!type":"fn(alias: string, args: ?) -> ?","!doc":"<p>Instantiate a class by its alias.</p>\n\n<p><a href=\"#!/api/Ext.ClassManager-method-instantiateByAlias\" rel=\"Ext.ClassManager-method-instantiateByAlias\" class=\"docClass\">instantiateByAlias</a> is usually invoked by the shorthand <a href=\"#!/api/Ext-method-createByAlias\" rel=\"Ext-method-createByAlias\" class=\"docClass\">Ext.createByAlias</a>.</p>\n\n<p>If <a href=\"#!/api/Ext.Loader\" rel=\"Ext.Loader\" class=\"docClass\">Ext.Loader</a> is <a href=\"#!/api/Ext.Loader-method-setConfig\" rel=\"Ext.Loader-method-setConfig\" class=\"docClass\">enabled</a> and the class has not been defined yet, it will\nattempt to load the class via synchronous loading.</p>\n\n<pre><code>var window = <a href=\"#!/api/Ext-method-createByAlias\" rel=\"Ext-method-createByAlias\" class=\"docClass\">Ext.createByAlias</a>('widget.window', { width: 600, height: 800, ... });\n</code></pre>\n"},"isCreated":{"!type":"fn(className: string) -> bool","!doc":"<p>Checks if a class has already been created.</p>\n"},"onCreated":{"!type":"fn(fn: ?, scope: ?, className: ?) -> !this"},"parseNamespace":{"!type":"fn(namespace: ?) -> !this","!doc":"<p>Supports namespace rewriting</p>\n"},"registerPostprocessor":{"!type":"fn(name: string, postprocessor: fn()) -> +Ext.ClassManager","!doc":"<p>Register a post-processor function.</p>\n"},"set":{"!type":"fn(name: string, value: ?) -> +Ext.ClassManager","!doc":"<p>Sets a name reference to a class.</p>\n"},"setAlias":{"!type":"fn(cls: +Ext.Class|string, alias: string) -> +Ext.ClassManager","!doc":"<p>Register the alias for a class.</p>\n"},"setDefaultPostprocessorPosition":{"!type":"fn(name: string, offset: string, relativeName: string) -> +Ext.ClassManager","!doc":"<p>Insert this post-processor at a specific position in the stack, optionally relative to\nany existing post-processor</p>\n"},"setDefaultPostprocessors":{"!type":"fn(postprocessors: string|[?]) -> +Ext.ClassManager","!doc":"<p>Set the default post processors array stack which are applied to every class.</p>\n"},"setNamespace":{"!type":"fn(name: string, value: ?) -> !this","!doc":"<p>Creates a namespace and assign the <code>value</code> to the created object</p>\n\n<pre><code><a href=\"#!/api/Ext.ClassManager-method-setNamespace\" rel=\"Ext.ClassManager-method-setNamespace\" class=\"docClass\">Ext.ClassManager.setNamespace</a>('MyCompany.pkg.Example', someObject);\n\nalert(MyCompany.pkg.Example === someObject); // alerts true\n</code></pre>\n"},"triggerCreated":{"!type":"fn(className: ?) -> !this"},"undefine":{"!type":"fn(className: string) -> !this","!doc":"<p>Undefines a class defined using the #define method. Typically used\nfor unit testing where setting up and tearing down a class multiple\ntimes is required.  For example:</p>\n\n<pre><code>// define a class\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Foo', {\n   ...\n});\n\n// run test\n\n// undefine the class\nExt.undefine('Foo');\n</code></pre>\n"}},"Component":{"!doc":"<p>Base class for all Ext components.</p>\n\n<p>The Component base class has built-in support for basic hide/show and enable/disable and size control behavior.</p>\n\n<h2>xtypes</h2>\n\n<p>Every component has a specific xtype, which is its Ext-specific type name, along with methods for checking the xtype\nlike <a href=\"#!/api/Ext.Component-method-getXType\" rel=\"Ext.Component-method-getXType\" class=\"docClass\">getXType</a> and <a href=\"#!/api/Ext.Component-method-isXType\" rel=\"Ext.Component-method-isXType\" class=\"docClass\">isXType</a>. See the <a href=\"#!/guide/components\">Component Guide</a> for more information on xtypes and the\nComponent hierarchy.</p>\n\n<h2>Finding components</h2>\n\n<p>All Components are registered with the <a href=\"#!/api/Ext.ComponentManager\" rel=\"Ext.ComponentManager\" class=\"docClass\">Ext.ComponentManager</a> on construction so that they can be referenced at\nany time via <a href=\"#!/api/Ext-method-getCmp\" rel=\"Ext-method-getCmp\" class=\"docClass\">Ext.getCmp</a>, passing the <a href=\"#!/api/Ext.Component-cfg-id\" rel=\"Ext.Component-cfg-id\" class=\"docClass\">id</a>.</p>\n\n<p>Additionally the <a href=\"#!/api/Ext.ComponentQuery\" rel=\"Ext.ComponentQuery\" class=\"docClass\">Ext.ComponentQuery</a> provides a CSS-selectors-like way to look up components by their xtype\nand many other attributes.  For example the following code will find all textfield components inside component with\n<code>id: 'myform'</code>:</p>\n\n<pre><code><a href=\"#!/api/Ext.ComponentQuery-method-query\" rel=\"Ext.ComponentQuery-method-query\" class=\"docClass\">Ext.ComponentQuery.query</a>('#myform textfield');\n</code></pre>\n\n<h2>Extending <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a></h2>\n\n<p>All subclasses of Component may participate in the automated Ext component\nlifecycle of creation, rendering and destruction which is provided by the <a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Container</a>\nclass. Components may be added to a Container through the <a href=\"#!/api/Ext.container.Container-cfg-items\" rel=\"Ext.container.Container-cfg-items\" class=\"docClass\">items</a> config option\nat the time the Container is created, or they may be added dynamically via the\n<a href=\"#!/api/Ext.container.Container-method-add\" rel=\"Ext.container.Container-method-add\" class=\"docClass\">add</a> method.</p>\n\n<p>All user-developed visual widgets that are required to participate in automated lifecycle and size management should\nsubclass Component.</p>\n\n<p>See the Creating new UI controls chapter in <a href=\"#!/guide/components\">Component Guide</a> for details on how and to either extend\nor augment Ext JS base classes to create custom Components.</p>\n\n<h2>The <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> class by itself</h2>\n\n<p>Usually one doesn't need to instantiate the <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> class. There are subclasses which implement\nspecialized use cases, covering most application needs. However it is possible to instantiate a base\nComponent, and it can be rendered to document, or handled by layouts as the child item of a Container:</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>', {\n    html: 'Hello world!',\n    width: 300,\n    height: 200,\n    padding: 20,\n    style: {\n        color: '#FFFFFF',\n        backgroundColor:'#000000'\n    },\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n\n<p>The Component above creates its encapsulating <code>div</code> upon render, and use the configured HTML as content. More complex\ninternal structure may be created using the <a href=\"#!/api/Ext.Component-cfg-renderTpl\" rel=\"Ext.Component-cfg-renderTpl\" class=\"docClass\">renderTpl</a> configuration, although to display database-derived\nmass data, it is recommended that an ExtJS data-backed Component such as a <a href=\"#!/api/Ext.view.View\" rel=\"Ext.view.View\" class=\"docClass\">View</a>,\n<a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">GridPanel</a>, or <a href=\"#!/api/Ext.tree.Panel\" rel=\"Ext.tree.Panel\" class=\"docClass\">TreePanel</a> be used.</p>\n\n<p><strong>From override Ext.layout.container.border.Region:</strong> This override provides extra, border layout specific methods for <code><a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a></code>. The\n<code><a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">Ext.layout.container.Border</a></code> class requires this override so that the added functions\nare only included in a build when <code>border</code> layout is used.</p>\n","!type":"fn(config: +Ext.Element|string|Ext_Component_cfg)","prototype":{"!proto":"Ext.AbstractComponent.prototype","autoScroll":{"!type":"bool","!doc":"<p><code>true</code> to use overflow:'auto' on the components layout element and show scroll bars automatically when necessary,\n<code>false</code> to clip any overflowing content.\nThis should not be combined with <a href=\"#!/api/Ext.Component-cfg-overflowX\" rel=\"Ext.Component-cfg-overflowX\" class=\"docClass\">overflowX</a> or  <a href=\"#!/api/Ext.Component-cfg-overflowY\" rel=\"Ext.Component-cfg-overflowY\" class=\"docClass\">overflowY</a>.</p>\n"},"columnWidth":{"!type":"number|string","!doc":"<p>Defines the column width inside <a href=\"#!/api/Ext.layout.container.Column\" rel=\"Ext.layout.container.Column\" class=\"docClass\">column layout</a>.</p>\n\n<p>Can be specified as a number or as a percentage.</p>\n"},"constrainTo":{"!type":"+Ext.util.Region|+Ext.Element","!doc":"<p>A <a href=\"#!/api/Ext.util.Region\" rel=\"Ext.util.Region\" class=\"docClass\">Region</a> (or an element from which a Region measurement will be read) which is used\nto constrain the component. Only applies when the component is floating.</p>\n"},"constraintInsets":{"!type":"?|string","!doc":"<p>An object or a string (in TRBL order) specifying insets from the configured <a href=\"#!/api/Ext.Component-cfg-constrainTo\" rel=\"Ext.Component-cfg-constrainTo\" class=\"docClass\">constrain region</a>\nwithin which this component must be constrained when positioning or sizing.\nexample:</p>\n\n<p>   constraintInsets: '10 10 10 10' // Constrain with 10px insets from parent</p>\n"},"defaultAlign":{"!type":"string","!doc":"<p>The default <a href=\"#!/api/Ext.util.Positionable-method-getAlignToXY\" rel=\"Ext.util.Positionable-method-getAlignToXY\" class=\"docClass\">Ext.Element#getAlignToXY</a> anchor position value for this menu\nrelative to its element of origin. Used in conjunction with <a href=\"#!/api/Ext.Component-method-showBy\" rel=\"Ext.Component-method-showBy\" class=\"docClass\">showBy</a>.</p>\n"},"draggable":{"!type":"bool|?","!doc":"<p>Specify as true to make a <a href=\"#!/api/Ext.Component-cfg-floating\" rel=\"Ext.Component-cfg-floating\" class=\"docClass\">floating</a> Component draggable using the Component's encapsulating element as\nthe drag handle.</p>\n\n<p>This may also be specified as a config object for the <a href=\"#!/api/Ext.util.ComponentDragger\" rel=\"Ext.util.ComponentDragger\" class=\"docClass\">ComponentDragger</a> which is\ninstantiated to perform dragging.</p>\n\n<p>For example to create a Component which may only be dragged around using a certain internal element as the drag\nhandle, use the delegate option:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>({\n    constrain: true,\n    floating: true,\n    style: {\n        backgroundColor: '#fff',\n        border: '1px solid black'\n    },\n    html: '&lt;h1 style=\"cursor:move\"&gt;The title&lt;/h1&gt;&lt;p&gt;The content&lt;/p&gt;',\n    draggable: {\n        delegate: 'h1'\n    }\n}).show();\n</code></pre>\n"},"floating":{"!type":"bool","!doc":"<p>Specify as true to float the Component outside of the document flow using CSS absolute positioning.</p>\n\n<p>Components such as <a href=\"#!/api/Ext.window.Window\" rel=\"Ext.window.Window\" class=\"docClass\">Window</a>s and <a href=\"#!/api/Ext.menu.Menu\" rel=\"Ext.menu.Menu\" class=\"docClass\">Menu</a>s are floating by default.</p>\n\n<p>Floating Components that are programatically <a href=\"#!/api/Ext.Component-method-render\" rel=\"Ext.Component-method-render\" class=\"docClass\">rendered</a> will register\nthemselves with the global <a href=\"#!/api/Ext.WindowManager\" rel=\"Ext.WindowManager\" class=\"docClass\">ZIndexManager</a></p>\n\n<h3>Floating Components as child items of a Container</h3>\n\n<p>A floating Component may be used as a child item of a Container. This just allows the floating Component to seek\na ZIndexManager by examining the ownerCt chain.</p>\n\n<p>When configured as floating, Components acquire, at render time, a <a href=\"#!/api/Ext.ZIndexManager\" rel=\"Ext.ZIndexManager\" class=\"docClass\">ZIndexManager</a> which\nmanages a stack of related floating Components. The ZIndexManager brings a single floating Component to the top\nof its stack when the Component's <a href=\"#!/api/Ext.Component-method-toFront\" rel=\"Ext.Component-method-toFront\" class=\"docClass\">toFront</a> method is called.</p>\n\n<p>The ZIndexManager is found by traversing up the <a href=\"#!/api/Ext.Component-property-ownerCt\" rel=\"Ext.Component-property-ownerCt\" class=\"docClass\">ownerCt</a> chain to find an ancestor which itself is\nfloating. This is so that descendant floating Components of floating <em>Containers</em> (Such as a ComboBox dropdown\nwithin a Window) can have its zIndex managed relative to any siblings, but always <strong>above</strong> that floating\nancestor Container.</p>\n\n<p>If no floating ancestor is found, a floating Component registers itself with the default <a href=\"#!/api/Ext.WindowManager\" rel=\"Ext.WindowManager\" class=\"docClass\">ZIndexManager</a>.</p>\n\n<p>Floating components <em>do not participate in the Container's layout</em>. Because of this, they are not rendered until\nyou explicitly <a href=\"#!/api/Ext.Component-method-show\" rel=\"Ext.Component-method-show\" class=\"docClass\">show</a> them.</p>\n\n<p>After rendering, the ownerCt reference is deleted, and the <a href=\"#!/api/Ext.Component-property-floatParent\" rel=\"Ext.Component-property-floatParent\" class=\"docClass\">floatParent</a> property is set to the found\nfloating ancestor Container. If no floating ancestor Container was found the <a href=\"#!/api/Ext.Component-property-floatParent\" rel=\"Ext.Component-property-floatParent\" class=\"docClass\">floatParent</a> property will\nnot be set.</p>\n"},"formBind":{"!type":"bool","!doc":"<p>When inside FormPanel, any component configured with <code>formBind: true</code> will\nbe enabled/disabled depending on the validity state of the form.\nSee <a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a> for more information and example.</p>\n"},"overflowX":{"!type":"string","!doc":"<p>Possible values are:\n * <code>'auto'</code> to enable automatic horizontal scrollbar (overflow-x: 'auto').\n * <code>'scroll'</code> to always enable horizontal scrollbar (overflow-x: 'scroll').\nThe default is overflow-x: 'hidden'. This should not be combined with <a href=\"#!/api/Ext.Component-cfg-autoScroll\" rel=\"Ext.Component-cfg-autoScroll\" class=\"docClass\">autoScroll</a>.</p>\n"},"overflowY":{"!type":"string","!doc":"<p>Possible values are:\n * <code>'auto'</code> to enable automatic vertical scrollbar (overflow-y: 'auto').\n * <code>'scroll'</code> to always enable vertical scrollbar (overflow-y: 'scroll').\nThe default is overflow-y: 'hidden'. This should not be combined with <a href=\"#!/api/Ext.Component-cfg-autoScroll\" rel=\"Ext.Component-cfg-autoScroll\" class=\"docClass\">autoScroll</a>.</p>\n"},"region":{"!type":"string|string|string|string|string","!doc":"<p>Defines the region inside <a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">border layout</a>.</p>\n\n<p>Possible values:</p>\n\n<ul>\n<li>north - Positions component at top.</li>\n<li>south - Positions component at bottom.</li>\n<li>east - Positions component at right.</li>\n<li>west - Positions component at left.</li>\n<li>center - Positions component at the remaining space.\nThere <strong>must</strong> be a component with <code>region: \"center\"</code> in every border layout.</li>\n</ul>\n\n"},"resizable":{"!type":"bool|?","!doc":"<p>Specify as <code>true</code> to apply a <a href=\"#!/api/Ext.resizer.Resizer\" rel=\"Ext.resizer.Resizer\" class=\"docClass\">Resizer</a> to this Component after rendering.</p>\n\n<p>May also be specified as a config object to be passed to the constructor of <a href=\"#!/api/Ext.resizer.Resizer\" rel=\"Ext.resizer.Resizer\" class=\"docClass\">Resizer</a>\nto override any defaults. By default the Component passes its minimum and maximum size, and uses\n<code><a href=\"#!/api/Ext.resizer.Resizer-cfg-dynamic\" rel=\"Ext.resizer.Resizer-cfg-dynamic\" class=\"docClass\">Ext.resizer.Resizer.dynamic</a>: false</code></p>\n"},"resizeHandles":{"!type":"string","!doc":"<p>A valid <a href=\"#!/api/Ext.resizer.Resizer\" rel=\"Ext.resizer.Resizer\" class=\"docClass\">Ext.resizer.Resizer</a> handles config string. Only applies when resizable = true.</p>\n"},"toFrontOnShow":{"!type":"bool","!doc":"<p>True to automatically call <a href=\"#!/api/Ext.Component-method-toFront\" rel=\"Ext.Component-method-toFront\" class=\"docClass\">toFront</a> when the <a href=\"#!/api/Ext.Component-method-show\" rel=\"Ext.Component-method-show\" class=\"docClass\">show</a> method is called on an already visible,\nfloating component.</p>\n"},"bubbleEvents":{"!type":"[?]"},"defaultComponentLayoutType":{"!type":"string"},"floatParent":{"!type":"+Ext.Container","!doc":"<p><strong>Only present for <a href=\"#!/api/Ext.Component-cfg-floating\" rel=\"Ext.Component-cfg-floating\" class=\"docClass\">floating</a> Components which were inserted as child items of Containers.</strong></p>\n\n<p>There are other similar relationships such as the <a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">button</a> which activates a <a href=\"#!/api/Ext.button.Button-cfg-menu\" rel=\"Ext.button.Button-cfg-menu\" class=\"docClass\">menu</a>, or the\n<a href=\"#!/api/Ext.menu.Item\" rel=\"Ext.menu.Item\" class=\"docClass\">menu item</a> which activated a <a href=\"#!/api/Ext.menu.Item-cfg-menu\" rel=\"Ext.menu.Item-cfg-menu\" class=\"docClass\">submenu</a>, or the\n<a href=\"#!/api/Ext.grid.column.Column\" rel=\"Ext.grid.column.Column\" class=\"docClass\">column header</a> which activated the column menu.</p>\n\n<p>These differences are abstracted away by the <a href=\"#!/api/Ext.Component-method-up\" rel=\"Ext.Component-method-up\" class=\"docClass\">up</a> method.</p>\n\n<p>Floating Components that are programatically <a href=\"#!/api/Ext.Component-method-render\" rel=\"Ext.Component-method-render\" class=\"docClass\">rendered</a> will not have a <code>floatParent</code>\nproperty.</p>\n\n<p>See <a href=\"#!/api/Ext.Component-cfg-floating\" rel=\"Ext.Component-cfg-floating\" class=\"docClass\">floating</a> and <a href=\"#!/api/Ext.Component-property-zIndexManager\" rel=\"Ext.Component-property-zIndexManager\" class=\"docClass\">zIndexManager</a></p>\n"},"offsetsCls":{"!type":"string"},"scrollFlags":{"!type":"?","!doc":"<p>An object property which provides unified information as to which dimensions are scrollable based upon\nthe <a href=\"#!/api/Ext.Component-cfg-autoScroll\" rel=\"Ext.Component-cfg-autoScroll\" class=\"docClass\">autoScroll</a>, <a href=\"#!/api/Ext.Component-cfg-overflowX\" rel=\"Ext.Component-cfg-overflowX\" class=\"docClass\">overflowX</a> and <a href=\"#!/api/Ext.Component-cfg-overflowY\" rel=\"Ext.Component-cfg-overflowY\" class=\"docClass\">overflowY</a> settings (And for <em>views</em> of trees and grids, the owning panel's <a href=\"#!/api/Ext.panel.Table-cfg-scroll\" rel=\"Ext.panel.Table-cfg-scroll\" class=\"docClass\">scroll</a> setting).</p>\n\n<p>Note that if you set overflow styles using the <a href=\"#!/api/Ext.Component-cfg-style\" rel=\"Ext.Component-cfg-style\" class=\"docClass\">style</a> config or <a href=\"#!/api/Ext.panel.Panel-cfg-bodyStyle\" rel=\"Ext.panel.Panel-cfg-bodyStyle\" class=\"docClass\">bodyStyle</a> config, this object does not include that information;\nit is best to use <a href=\"#!/api/Ext.Component-cfg-autoScroll\" rel=\"Ext.Component-cfg-autoScroll\" class=\"docClass\">autoScroll</a>, <a href=\"#!/api/Ext.Component-cfg-overflowX\" rel=\"Ext.Component-cfg-overflowX\" class=\"docClass\">overflowX</a> and <a href=\"#!/api/Ext.Component-cfg-overflowY\" rel=\"Ext.Component-cfg-overflowY\" class=\"docClass\">overflowY</a> if you need to access these flags.</p>\n\n<p>This object has the following properties:</p>\n"},"zIndexManager":{"!type":"+Ext.ZIndexManager","!doc":"<p>Only present for <a href=\"#!/api/Ext.Component-cfg-floating\" rel=\"Ext.Component-cfg-floating\" class=\"docClass\">floating</a> Components after they have been rendered.</p>\n\n<p>A reference to the ZIndexManager which is managing this Component's z-index.</p>\n\n<p>The <a href=\"#!/api/Ext.ZIndexManager\" rel=\"Ext.ZIndexManager\" class=\"docClass\">ZIndexManager</a> maintains a stack of floating Component z-indices, and also provides\na single modal mask which is insert just beneath the topmost visible modal floating Component.</p>\n\n<p>Floating Components may be <a href=\"#!/api/Ext.Component-method-toFront\" rel=\"Ext.Component-method-toFront\" class=\"docClass\">brought to the front</a> or <a href=\"#!/api/Ext.Component-method-toBack\" rel=\"Ext.Component-method-toBack\" class=\"docClass\">sent to the back</a> of the\nz-index stack.</p>\n\n<p>This defaults to the global <a href=\"#!/api/Ext.WindowManager\" rel=\"Ext.WindowManager\" class=\"docClass\">ZIndexManager</a> for floating Components that are\nprogramatically <a href=\"#!/api/Ext.Component-method-render\" rel=\"Ext.Component-method-render\" class=\"docClass\">rendered</a>.</p>\n\n<p>For <a href=\"#!/api/Ext.Component-cfg-floating\" rel=\"Ext.Component-cfg-floating\" class=\"docClass\">floating</a> Components which are added to a Container, the ZIndexManager is acquired from the first\nancestor Container found which is floating. If no floating ancestor is found, the global <a href=\"#!/api/Ext.WindowManager\" rel=\"Ext.WindowManager\" class=\"docClass\">ZIndexManager</a> is\nused.</p>\n\n<p>See <a href=\"#!/api/Ext.Component-cfg-floating\" rel=\"Ext.Component-cfg-floating\" class=\"docClass\">floating</a> and <a href=\"#!/api/Ext.Component-property-zIndexParent\" rel=\"Ext.Component-property-zIndexParent\" class=\"docClass\">zIndexParent</a></p>\n"},"zIndexParent":{"!type":"+Ext.Container","!doc":"<p>Only present for <a href=\"#!/api/Ext.Component-cfg-floating\" rel=\"Ext.Component-cfg-floating\" class=\"docClass\">floating</a> Components which were inserted as child items of Containers, and which have a floating\nContainer in their containment ancestry.</p>\n\n<p>For <a href=\"#!/api/Ext.Component-cfg-floating\" rel=\"Ext.Component-cfg-floating\" class=\"docClass\">floating</a> Components which are child items of a Container, the zIndexParent will be a floating\nancestor Container which is responsible for the base z-index value of all its floating descendants. It provides\na <a href=\"#!/api/Ext.ZIndexManager\" rel=\"Ext.ZIndexManager\" class=\"docClass\">ZIndexManager</a> which provides z-indexing services for all its descendant floating\nComponents.</p>\n\n<p>Floating Components that are programatically <a href=\"#!/api/Ext.Component-method-render\" rel=\"Ext.Component-method-render\" class=\"docClass\">rendered</a> will not have a <code>zIndexParent</code>\nproperty.</p>\n\n<p>For example, the dropdown <a href=\"#!/api/Ext.view.BoundList\" rel=\"Ext.view.BoundList\" class=\"docClass\">BoundList</a> of a ComboBox which is in a Window will have the\nWindow as its <code>zIndexParent</code>, and will always show above that Window, wherever the Window is placed in the z-index stack.</p>\n\n<p>See <a href=\"#!/api/Ext.Component-cfg-floating\" rel=\"Ext.Component-cfg-floating\" class=\"docClass\">floating</a> and <a href=\"#!/api/Ext.Component-property-zIndexManager\" rel=\"Ext.Component-property-zIndexManager\" class=\"docClass\">zIndexManager</a></p>\n"},"adjustPosition":{"!type":"fn(x: ?, y: ?) -> !this"},"afterComponentLayout":{"!type":"fn() -> !this","!doc":"<p>Called by the layout system after the Component has been laid out.</p>\n"},"afterHide":{"!type":"fn(callback?: fn(), scope?: ?) -> !this","!doc":"<p>Invoked after the Component has been hidden.</p>\n\n<p>Gets passed the same <code>callback</code> and <code>scope</code> parameters that <a href=\"#!/api/Ext.Component-method-onHide\" rel=\"Ext.Component-method-onHide\" class=\"docClass\">onHide</a> received.</p>\n"},"afterRender":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior after rendering is complete. At this stage the Component’s Element\nwill have been styled according to the configuration, will have had any configured CSS class\nnames added, and will be in the configured visibility and the configured enable state.</p>\n"},"afterSetPosition":{"!type":"fn(ax: ?, ay: ?) -> !this","!doc":"<p>Template method called after a Component has been positioned.</p>\n"},"afterShow":{"!type":"fn(animateTarget?: string|+Ext.Element, callback?: fn(), scope?: ?) -> !this","!doc":"<p>Invoked after the Component is shown (after <a href=\"#!/api/Ext.Component-method-onShow\" rel=\"Ext.Component-method-onShow\" class=\"docClass\">onShow</a> is called).</p>\n\n<p>Gets passed the same parameters as <a href=\"#!/api/Ext.Component-method-show\" rel=\"Ext.Component-method-show\" class=\"docClass\">show</a>.</p>\n"},"beforeLayout":{"!type":"fn() -> !this","!doc":"<p>Occurs before componentLayout is run. In previous releases, this method could\nreturn <code>false</code> to prevent its layout but that is not supported in Ext JS 4.1 or\nhigher. This method is simply a notification of the impending layout to give the\ncomponent a chance to adjust the DOM. Ideally, DOM reads should be avoided at this\ntime to reduce expensive document reflows.</p>\n"},"beforeRender":{"!type":"fn() -> !this"},"beforeSetPosition":{"!type":"fn() -> !this","!doc":"<p>Template method called before a Component is positioned.</p>\n\n<p>Ensures that the position is adjusted so that the Component is constrained if so configured.</p>\n"},"beforeShow":{"!type":"fn() -> !this","!doc":"<p>Invoked before the Component is shown.</p>\n"},"blur":{"!type":"fn() -> +Ext.Component"},"bubble":{"!type":"fn(fn: fn(), scope?: ?, args?: [?]) -> +Ext.Component","!doc":"<p>Bubbles up the component/container heirarchy, calling the specified function with each component. The scope\n(<em>this</em>) of function call will be the scope provided or the current component. The arguments to the function will\nbe the args provided or the current component. If the function returns false at any point, the bubble is stopped.</p>\n"},"cancelFocus":{"!type":"fn() -> !this","!doc":"<p>Cancel any deferred focus on this component</p>\n"},"cloneConfig":{"!type":"fn(overrides: ?) -> +Ext.Component","!doc":"<p>Clone the current component using the original config values passed into this instance by default.</p>\n"},"deleteMembers":{"!type":"fn() -> !this"},"findParentBy":{"!type":"fn(fn: fn()) -> +Ext.container.Container","!doc":"<p>Find a container above this component at any level by a custom function. If the passed function returns true, the\ncontainer will be returned.</p>\n\n<p>See also the <a href=\"#!/api/Ext.Component-method-up\" rel=\"Ext.Component-method-up\" class=\"docClass\">up</a> method.</p>\n"},"findParentByType":{"!type":"fn(xtype: string|+Ext.Class) -> +Ext.container.Container","!doc":"<p>Find a container above this component at any level by xtype or class</p>\n\n<p>See also the <a href=\"#!/api/Ext.Component-method-up\" rel=\"Ext.Component-method-up\" class=\"docClass\">up</a> method.</p>\n"},"fireHierarchyEvent":{"!type":"fn(ename: ?) -> !this","!doc":"<p>For more information on the hierarchy events, see the note for the\nhierarchyEventSource observer defined in the onClassCreated callback.</p>\n\n<p>This functionality is contained in Component (as opposed to Container)\nbecause a Component can be the ownerCt for a floating component (loadmask),\nand the loadmask needs to know when its owner is shown/hidden via the\nhierarchyEventSource so that its hidden state can be synchronized.</p>\n\n<p>TODO: merge this functionality with <a href=\"#!/api/Ext-property-globalEvents\" rel=\"Ext-property-globalEvents\" class=\"docClass\">Ext.globalEvents</a></p>\n"},"focus":{"!type":"fn(selectText?: bool, delay?: bool|number, callback?: fn(), scope?: fn()) -> +Ext.Component","!doc":"<p>Try to focus this component.</p>\n"},"getActionEl":{"!type":"fn() -> !this","!doc":"<p>Deprecate 5.0</p>\n"},"getAnimateTarget":{"!type":"fn(target: ?) -> !this"},"getBubbleTarget":{"!type":"fn() -> !this","!doc":"<p>Implements an upward event bubbling policy. By default a Component bubbles events up to its <a href=\"#!/api/Ext.Component-method-getRefOwner\" rel=\"Ext.Component-method-getRefOwner\" class=\"docClass\">reference owner</a>.</p>\n\n<p>Component subclasses may implement a different bubbling strategy by overriding this method.</p>\n"},"getContentTarget":{"!type":"fn() -> !this"},"getDragEl":{"!type":"fn() -> !this"},"getEl":{"!type":"fn() -> +Ext.dom.Element","!doc":"<p>Retrieves the top level element representing this component.</p>\n"},"getId":{"!type":"fn() -> string","!doc":"<p>Retrieves the <code>id</code> of this component. Will auto-generate an <code>id</code> if one has not already been set.</p>\n"},"getOuterSize":{"!type":"fn() -> !this","!doc":"<p>Include margins</p>\n"},"getOwningBorderContainer":{"!type":"fn() -> +Ext.container.Container","!doc":"<p>Returns the owning container if that container uses <code>border</code> layout. Otherwise\nthis method returns <code>null</code>.</p>\n\n<p><strong>Defined in override Ext.layout.container.border.Region.</strong></p>\n"},"getOwningBorderLayout":{"!type":"fn() -> +Ext.layout.container.Border","!doc":"<p>Returns the owning <code>border</code> (<code><a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">Ext.layout.container.Border</a></code>) instance if there is\none. Otherwise this method returns <code>null</code>.</p>\n\n<p><strong>Defined in override Ext.layout.container.border.Region.</strong></p>\n"},"getPosition":{"!type":"fn(local?: bool) -> [number]","!doc":"<p>Gets the current XY position of the component's underlying element.</p>\n"},"getPositionEl":{"!type":"fn() -> !this","!doc":"<p>Deprecate 5.0</p>\n"},"getProxy":{"!type":"fn() -> !this"},"getRefOwner":{"!type":"fn() -> !this","!doc":"<p>Used by <a href=\"#!/api/Ext.ComponentQuery\" rel=\"Ext.ComponentQuery\" class=\"docClass\">ComponentQuery</a>, and the <a href=\"#!/api/Ext.AbstractComponent-method-up\" rel=\"Ext.AbstractComponent-method-up\" class=\"docClass\">up</a> method to find the\nowning Component in the linkage hierarchy.</p>\n\n<p>By default this returns the Container which contains this Component.</p>\n\n<p>This may be overriden by Component authors who implement ownership hierarchies which are not\nbased upon ownerCt, such as BoundLists being owned by Fields or Menus being owned by Buttons.</p>\n"},"getResizeEl":{"!type":"fn() -> !this","!doc":"<p>Deprecate 5.0</p>\n"},"getVisibilityEl":{"!type":"fn() -> !this","!doc":"<p>Deprecate 5.0</p>\n"},"getXType":{"!type":"fn() -> string","!doc":"<p>Gets the xtype for this component as registered with <a href=\"#!/api/Ext.ComponentManager\" rel=\"Ext.ComponentManager\" class=\"docClass\">Ext.ComponentManager</a>. For a list of all available\nxtypes, see the <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> header. Example usage:</p>\n\n<pre><code>var t = new <a href=\"#!/api/Ext.form.field.Text\" rel=\"Ext.form.field.Text\" class=\"docClass\">Ext.form.field.Text</a>();\nalert(t.getXType());  // alerts 'textfield'\n</code></pre>\n"},"hide":{"!type":"fn(animateTarget?: string|+Ext.Element|+Ext.Component, callback?: fn(), scope?: ?) -> +Ext.Component","!doc":"<p>Hides this Component, setting it to invisible using the configured <a href=\"#!/api/Ext.Component-cfg-hideMode\" rel=\"Ext.Component-cfg-hideMode\" class=\"docClass\">hideMode</a>.</p>\n"},"initBorderRegion":{"!type":"fn() -> !this","!doc":"<p>This method is called by the <code><a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">Ext.layout.container.Border</a></code> class when instances are\nadded as regions to the layout. Since it is valid to add any component to a border\nlayout as a region, this method must be added to <code><a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a></code> but is only ever\ncalled when that component is owned by a <code>border</code> layout.</p>\n\n<p><strong>Defined in override Ext.layout.container.border.Region.</strong></p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>The initComponent template method is an important initialization step for a Component. It is intended to be\nimplemented by each subclass of <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> to provide any needed constructor logic. The\ninitComponent method of the class being created is called first, with each initComponent method\nup the hierarchy to <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> being called thereafter. This makes it easy to implement and,\nif needed, override the constructor logic of the Component at any step in the hierarchy.</p>\n\n<p>The initComponent method <strong>must</strong> contain a call to <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a> in order\nto ensure that the parent class' initComponent method is also called.</p>\n\n<p>All config options passed to the constructor are applied to <code>this</code> before initComponent is called,\nso you can simply access them with <code>this.someOption</code>.</p>\n\n<p>The following example demonstrates using a dynamic string for the text of a button at the time of\ninstantiation of the class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('DynamicButtonText', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n\n    initComponent: function() {\n        this.text = new Date();\n        this.renderTo = <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>();\n        this.callParent();\n    }\n});\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function() {\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('DynamicButtonText');\n});\n</code></pre>\n"},"initDraggable":{"!type":"fn() -> !this"},"initResizable":{"!type":"fn(resizable: ?) -> !this"},"isContainedFloater":{"!type":"fn() -> !this","!doc":"<p>Utility method to determine if a Component is floating, and has an owning Container whose coordinate system\nit must be positioned in when using setPosition.</p>\n"},"makeFloating":{"!type":"fn(dom: ?) -> !this"},"onAdded":{"!type":"fn() -> !this","!doc":"<p>Method to manage awareness of when components are added to their\nrespective Container, firing an <a href=\"#!/api/Ext.Component-event-added\" rel=\"Ext.Component-event-added\" class=\"docClass\">added</a> event. References are\nestablished at add time rather than at render time.</p>\n\n<p>Allows addition of behavior when a Component is added to a\nContainer. At this stage, the Component is in the parent\nContainer's collection of child items. After calling the\nsuperclass's <code>onAdded</code>, the <code>ownerCt</code> reference will be present,\nand if configured with a ref, the <code>refOwner</code> will be set.</p>\n"},"onDestroy":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the destroy operation.\nAfter calling the superclass's onDestroy, the Component will be destroyed.</p>\n"},"onHide":{"!type":"fn(animateTarget?: string|+Ext.Element|+Ext.Component, callback?: fn(), scope?: ?) -> !this","!doc":"<p>Possibly animates down to a target element.</p>\n\n<p>Allows addition of behavior to the hide operation. After\ncalling the superclass’s onHide, the Component will be hidden.</p>\n\n<p>Gets passed the same parameters as <a href=\"#!/api/Ext.Component-event-hide\" rel=\"Ext.Component-event-hide\" class=\"docClass\">hide</a>.</p>\n"},"onShow":{"!type":"fn(animateTarget?: string|+Ext.Element, callback?: fn(), scope?: ?) -> !this","!doc":"<p>Allows addition of behavior to the show operation. After\ncalling the superclass's onShow, the Component will be visible.</p>\n\n<p>Override in subclasses where more complex behaviour is needed.</p>\n\n<p>Gets passed the same parameters as <a href=\"#!/api/Ext.Component-method-show\" rel=\"Ext.Component-method-show\" class=\"docClass\">show</a>.</p>\n"},"onShowComplete":{"!type":"fn(callback?: fn(), scope?: ?) -> !this","!doc":"<p>Invoked after the <a href=\"#!/api/Ext.Component-method-afterShow\" rel=\"Ext.Component-method-afterShow\" class=\"docClass\">afterShow</a> method is complete.</p>\n\n<p>Gets passed the same <code>callback</code> and <code>scope</code> parameters that <a href=\"#!/api/Ext.Component-method-afterShow\" rel=\"Ext.Component-method-afterShow\" class=\"docClass\">afterShow</a> received.</p>\n"},"onShowVeto":{"!type":"fn() -> !this"},"scrollBy":{"!type":"fn(deltaX: number|[number]|?, deltaY: number|bool|?, animate: bool|?) -> !this","!doc":"<p>Scrolls this Component's <a href=\"#!/api/Ext.Component-method-getTargetEl\" rel=\"Ext.Component-method-getTargetEl\" class=\"docClass\">target element</a> by the passed delta values, optionally animating.</p>\n\n<p>All of the following are equivalent:</p>\n\n<pre><code> comp.scrollBy(10, 10, true);\n comp.scrollBy([10, 10], true);\n comp.scrollBy({ x: 10, y: 10 }, true);\n</code></pre>\n"},"setAutoScroll":{"!type":"fn(scroll: bool) -> +Ext.Component","!doc":"<p>Sets the overflow on the content element of the component.</p>\n"},"setBorderRegion":{"!type":"fn(region: string) -> string","!doc":"<p>This method changes the <code>region</code> config property for this border region. This is\nonly valid if this component is in a <code>border</code> layout (<code><a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">Ext.layout.container.Border</a></code>).</p>\n\n<p><strong>Defined in override Ext.layout.container.border.Region.</strong></p>\n"},"setLoading":{"!type":"fn(load: bool|?|string, targetEl?: bool) -> +Ext.LoadMask","!doc":"<p>This method allows you to show or hide a LoadMask on top of this component.</p>\n"},"setOverflowXY":{"!type":"fn(overflowX: string, overflowY: string) -> +Ext.Component","!doc":"<p>Sets the overflow x/y on the content element of the component. The x/y overflow\nvalues can be any valid CSS overflow (e.g., 'auto' or 'scroll'). By default, the\nvalue is 'hidden'. Passing null for one of the values will erase the inline style.\nPassing <code>undefined</code> will preserve the current value.</p>\n"},"setPagePosition":{"!type":"fn(x: number|[number], y?: number, animate?: bool|?) -> +Ext.Component","!doc":"<p>Sets the page XY position of the component. To set the left and top instead, use <a href=\"#!/api/Ext.Component-method-setPosition\" rel=\"Ext.Component-method-setPosition\" class=\"docClass\">setPosition</a>.\nThis method fires the <a href=\"#!/api/Ext.Component-event-move\" rel=\"Ext.Component-event-move\" class=\"docClass\">move</a> event.</p>\n"},"setPosition":{"!type":"fn(x: number|[number]|?, y?: number, animate?: bool|?) -> +Ext.Component","!doc":"<p>Sets the left and top of the component. To set the page XY position instead, use <a href=\"#!/api/Ext.Component-method-setPagePosition\" rel=\"Ext.Component-method-setPagePosition\" class=\"docClass\">setPagePosition</a>. This\nmethod fires the <a href=\"#!/api/Ext.Component-event-move\" rel=\"Ext.Component-event-move\" class=\"docClass\">move</a> event.</p>\n"},"setRegionWeight":{"!type":"fn(weight: number) -> number","!doc":"<p>Sets the <code>weight</code> config property for this component. This is only valid if this\ncomponent is in a <code>border</code> layout (<code><a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">Ext.layout.container.Border</a></code>).</p>\n\n<p><strong>Defined in override Ext.layout.container.border.Region.</strong></p>\n"},"show":{"!type":"fn(animateTarget?: string|+Ext.Element, callback?: fn(), scope?: ?) -> +Ext.Component","!doc":"<p>Shows this Component, rendering it first if <a href=\"#!/api/Ext.Component-cfg-autoRender\" rel=\"Ext.Component-cfg-autoRender\" class=\"docClass\">autoRender</a> or <a href=\"#!/api/Ext.Component-cfg-floating\" rel=\"Ext.Component-cfg-floating\" class=\"docClass\">floating</a> are <code>true</code>.</p>\n\n<p>After being shown, a <a href=\"#!/api/Ext.Component-cfg-floating\" rel=\"Ext.Component-cfg-floating\" class=\"docClass\">floating</a> Component (such as a <a href=\"#!/api/Ext.window.Window\" rel=\"Ext.window.Window\" class=\"docClass\">Ext.window.Window</a>), is activated it and\nbrought to the front of its <a href=\"#!/api/Ext.Component-property-zIndexManager\" rel=\"Ext.Component-property-zIndexManager\" class=\"docClass\">z-index stack</a>.</p>\n"},"showAt":{"!type":"fn(x: number|[number], y?: number, animate?: bool|?) -> +Ext.Component","!doc":"<p>Displays component at specific xy position.\nA floating component (like a menu) is positioned relative to its ownerCt if any.\nUseful for popping up a context menu:</p>\n\n<pre><code>listeners: {\n    itemcontextmenu: function(view, record, item, index, event, options) {\n        <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.menu.Menu\" rel=\"Ext.menu.Menu\" class=\"docClass\">Ext.menu.Menu</a>', {\n            width: 100,\n            height: 100,\n            margin: '0 0 10 0',\n            items: [{\n                text: 'regular item 1'\n            },{\n                text: 'regular item 2'\n            },{\n                text: 'regular item 3'\n            }]\n        }).showAt(event.getXY());\n    }\n}\n</code></pre>\n"},"showBy":{"!type":"fn(component: +Ext.Component|+Ext.dom.Element, position?: string, offsets?: [number]) -> +Ext.Component","!doc":"<p>Shows this component by the specified <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Component</a> or <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Element</a>.\nUsed when this component is <a href=\"#!/api/Ext.Component-cfg-floating\" rel=\"Ext.Component-cfg-floating\" class=\"docClass\">floating</a>.</p>\n"},"updateBox":{"!type":"fn(box: ?) -> +Ext.Component","!doc":"<p>Sets the current box measurements of the component's underlying element.</p>\n"},"wrapPrimaryEl":{"!type":"fn(dom: ?) -> !this"}},"DIRECTION_BOTTOM":{"!type":"string"},"DIRECTION_LEFT":{"!type":"string"},"DIRECTION_RIGHT":{"!type":"string"},"DIRECTION_TOP":{"!type":"string","!doc":"<p>Collapse/expand directions</p>\n"},"INVALID_ID_CHARS_Re":{"!type":"+RegExp","!doc":"<p>RegExp whih specifies characters in an xtype which must be translated to '-' when generating auto IDs.\nThis includes dot, comma and whitespace</p>\n"},"VERTICAL_DIRECTION_Re":{"!type":"+RegExp"}},"ComponentLoader":{"!doc":"<p>This class is used to load content via Ajax into a <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>. In general\nthis class will not be instanced directly, rather a loader configuration will be passed to the\nconstructor of the <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>.</p>\n\n<h2>HTML Renderer</h2>\n\n<p>By default, the content loaded will be processed as raw html. The response text\nfrom the request is taken and added to the component. This can be used in\nconjunction with the <a href=\"#!/api/Ext.ComponentLoader-cfg-scripts\" rel=\"Ext.ComponentLoader-cfg-scripts\" class=\"docClass\">scripts</a> option to execute any inline scripts in\nthe resulting content. Using this renderer has the same effect as passing the\n<a href=\"#!/api/Ext.Component-cfg-html\" rel=\"Ext.Component-cfg-html\" class=\"docClass\">Ext.Component.html</a> configuration option.</p>\n\n<h2>Data Renderer</h2>\n\n<p>This renderer allows content to be added by using JSON data and a <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">Ext.XTemplate</a>.\nThe content received from the response is passed to the <a href=\"#!/api/Ext.Component-method-update\" rel=\"Ext.Component-method-update\" class=\"docClass\">Ext.Component.update</a> method.\nThis content is run through the attached <a href=\"#!/api/Ext.Component-cfg-tpl\" rel=\"Ext.Component-cfg-tpl\" class=\"docClass\">Ext.Component.tpl</a> and the data is added to\nthe Component. Using this renderer has the same effect as using the <a href=\"#!/api/Ext.Component-cfg-data\" rel=\"Ext.Component-cfg-data\" class=\"docClass\">Ext.Component.data</a>\nconfiguration in conjunction with a <a href=\"#!/api/Ext.Component-cfg-tpl\" rel=\"Ext.Component-cfg-tpl\" class=\"docClass\">Ext.Component.tpl</a>.</p>\n\n<h2>Component Renderer</h2>\n\n<p>This renderer can only be used with a <a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a> and subclasses. It allows for\nComponents to be loaded remotely into a Container. The response is expected to be a single/series of\n<a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> configuration objects. When the response is received, the data is decoded\nand then passed to <a href=\"#!/api/Ext.container.Container-method-add\" rel=\"Ext.container.Container-method-add\" class=\"docClass\">Ext.container.Container.add</a>. Using this renderer has the same effect as specifying\nthe <a href=\"#!/api/Ext.container.Container-cfg-items\" rel=\"Ext.container.Container-cfg-items\" class=\"docClass\">Ext.container.Container.items</a> configuration on a Container.</p>\n\n<h2>Custom Renderer</h2>\n\n<p>A custom function can be passed to handle any other special case, see the <a href=\"#!/api/Ext.ComponentLoader-cfg-renderer\" rel=\"Ext.ComponentLoader-cfg-renderer\" class=\"docClass\">renderer</a> option.</p>\n\n<h2>Example Usage</h2>\n\n<pre><code>var cmp = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>', {\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    tpl: '{firstName} - {lastName}',\n    loader: {\n        url: 'myPage.php',\n        renderer: 'data',\n        params: {\n            userId: 1\n        }\n    }\n});\n\n// call the loader manually (or use autoLoad:true instead)\ncmp.getLoader().load();\n</code></pre>\n","!type":"fn(config: Ext_ComponentLoader_cfg)","prototype":{"!proto":"Ext.ElementLoader.prototype","loadMask":{"!type":"bool|?","!doc":"<p>True or a <a href=\"#!/api/Ext.LoadMask\" rel=\"Ext.LoadMask\" class=\"docClass\">Ext.LoadMask</a> configuration to enable masking during loading.</p>\n"},"renderer":{"!type":"string|fn()","!doc":"<p>The type of content that is to be loaded into, which can be one of 3 types:</p>\n\n<ul>\n<li><strong>html</strong> : Loads raw html content, see <a href=\"#!/api/Ext.Component-cfg-html\" rel=\"Ext.Component-cfg-html\" class=\"docClass\">Ext.Component.html</a></li>\n<li><strong>data</strong> : Loads raw html content, see <a href=\"#!/api/Ext.Component-cfg-data\" rel=\"Ext.Component-cfg-data\" class=\"docClass\">Ext.Component.data</a></li>\n<li><strong>component</strong> : Loads child {<a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>} instances. This option is only valid when used with a Container.</li>\n</ul>\n\n\n<p>Alternatively, you can pass a function which is called with the following parameters.</p>\n\n<ul>\n<li>loader - Loader instance</li>\n<li>response - The server response</li>\n<li>active - The active request</li>\n</ul>\n\n\n<p>The function must return false is loading is not successful. Below is a sample of using a custom renderer:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>({\n    loader: {\n        url: 'myPage.php',\n        renderer: function(loader, response, active) {\n            var text = response.responseText;\n            loader.getTarget().update('The response is ' + text);\n            return true;\n        }\n    }\n});\n</code></pre>\n"},"scripts":{"!type":"bool","!doc":"<p>True to parse any inline script tags in the response. This only used when using the html\n<a href=\"#!/api/Ext.ComponentLoader-cfg-renderer\" rel=\"Ext.ComponentLoader-cfg-renderer\" class=\"docClass\">renderer</a>.</p>\n"},"target":{"!type":"+Ext.Component|string","!doc":"<p>The target <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> for the loader.\nIf a string is passed it will be looked up via the id.</p>\n"},"addMask":{"!type":"fn(mask: bool|?) -> !this","!doc":"<p>Add the mask on the target</p>\n"},"getRenderer":{"!type":"fn(renderer: string|fn()) -> fn()","!doc":"<p>Gets the renderer to use</p>\n"},"removeMask":{"!type":"fn() -> !this","!doc":"<p>inherit docs</p>\n"},"setOptions":{"!type":"fn(active: ?, options: ?) -> !this","!doc":"<p>Sets any additional options on the active request</p>\n"},"setTarget":{"!type":"fn(target: string|+Ext.Component) -> !this","!doc":"<p>Set a {<a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>} as the target of this loader. Note that if the target is changed,\nany active requests will be aborted.</p>\n"}},"Renderer":{"!type":"?"}},"ComponentManager":{"!doc":"<p>Provides a registry of all Components (instances of <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> or any subclass\nthereof) on a page so that they can be easily accessed by <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">component</a>\n<a href=\"#!/api/Ext.Component-cfg-id\" rel=\"Ext.Component-cfg-id\" class=\"docClass\">id</a> (see <a href=\"#!/api/Ext.ComponentManager-method-get\" rel=\"Ext.ComponentManager-method-get\" class=\"docClass\">get</a>, or the convenience method <a href=\"#!/api/Ext-method-getCmp\" rel=\"Ext-method-getCmp\" class=\"docClass\">Ext.getCmp</a>).</p>\n\n\n<p>This object also provides a registry of available Component <i>classes</i>\nindexed by a mnemonic code known as the Component's <a href=\"#!/api/Ext.Component-cfg-xtype\" rel=\"Ext.Component-cfg-xtype\" class=\"docClass\">xtype</a>.\nThe <code>xtype</code> provides a way to avoid instantiating child Components\nwhen creating a full, nested config object for a complete Ext page.</p>\n\n\n<p>A child Component may be specified simply as a <i>config object</i>\nas long as the correct <code><a href=\"#!/api/Ext.Component-cfg-xtype\" rel=\"Ext.Component-cfg-xtype\" class=\"docClass\">xtype</a></code> is specified so that if and when the Component\nneeds rendering, the correct type can be looked up for lazy instantiation.</p>\n\n\n<p>For a list of all available <code><a href=\"#!/api/Ext.Component-cfg-xtype\" rel=\"Ext.Component-cfg-xtype\" class=\"docClass\">xtypes</a></code>, see <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>.</p>\n\n","!type":"fn(config: Ext_ComponentManager_cfg)","prototype":{"!proto":"Ext.AbstractManager.prototype"},"typeName":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"create":{"!type":"fn(config: ?, defaultType?: string) -> +Ext.Component","!doc":"<p>Creates a new Component from the specified config object using the\nconfig object's xtype to determine the class to instantiate.</p>\n"},"registerType":{"!type":"fn(type: ?, cls: ?) -> !this","!doc":"<p>Registers a new item constructor, keyed by a type key.</p>\n"}},"ComponentQuery":{"!doc":"<p>Provides searching of Components within <a href=\"#!/api/Ext.ComponentManager\" rel=\"Ext.ComponentManager\" class=\"docClass\">Ext.ComponentManager</a> (globally) or a specific\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a> on the document with a similar syntax to a CSS selector.\nReturns Array of matching Components, or empty Array.</p>\n\n<h2>Basic Component lookup</h2>\n\n<p>Components can be retrieved by using their <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">xtype</a>:</p>\n\n<ul>\n<li><code>component</code></li>\n<li><code>gridpanel</code></li>\n</ul>\n\n\n<p>Matching by <code>xtype</code> matches inherited types, so in the following code, the previous field\n<em>of any type which inherits from <code>TextField</code></em> will be found:</p>\n\n<pre><code>prevField = myField.previousNode('textfield');\n</code></pre>\n\n<p>To match only the exact type, pass the \"shallow\" flag by adding <code>(true)</code> to xtype\n(See AbstractComponent's <a href=\"#!/api/Ext.AbstractComponent-method-isXType\" rel=\"Ext.AbstractComponent-method-isXType\" class=\"docClass\">isXType</a> method):</p>\n\n<pre><code>prevTextField = myField.previousNode('textfield(true)');\n</code></pre>\n\n<p>You can search Components by their <code>id</code> or <code>itemId</code> property, prefixed with a #:</p>\n\n<pre><code>#myContainer\n</code></pre>\n\n<p>Component <code>xtype</code> and <code>id</code> or <code>itemId</code> can be used together to avoid possible\nid collisions between Components of different types:</p>\n\n<pre><code>panel#myPanel\n</code></pre>\n\n<h2>Traversing Component tree</h2>\n\n<p>Components can be found by their relation to other Components. There are several\nrelationship operators, mostly taken from CSS selectors:</p>\n\n<ul>\n<li><strong><code>E F</code></strong> All descendant Components of E that match F</li>\n<li><strong><code>E &gt; F</code></strong> All direct children Components of E that match F</li>\n<li><strong><code>E ^ F</code></strong> All parent Components of E that match F</li>\n</ul>\n\n\n<p>Expressions between relationship operators are matched left to right, i.e. leftmost\nselector is applied first, then if one or more matches are found, relationship operator\nitself is applied, then next selector expression, etc. It is possible to combine\nrelationship operators in complex selectors:</p>\n\n<pre><code>window[title=\"Input form\"] textfield[name=login] ^ form &gt; button[action=submit]\n</code></pre>\n\n<p>That selector can be read this way: Find a window with title \"Input form\", in that\nwindow find a TextField with name \"login\" at any depth (including subpanels and/or\nFieldSets), then find an <code><a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a></code> that is a parent of the TextField, and in\nthat form find a direct child that is a button with custom property <code>action</code> set to\nvalue \"submit\".</p>\n\n<p>Whitespace on both sides of <code>^</code> and <code>&gt;</code> operators is non-significant, i.e. can be\nomitted, but usually is used for clarity.</p>\n\n<h2>Searching by Component attributes</h2>\n\n<p>Components can be searched by their object property values (attributes). To do that,\nuse attribute matching expression in square brackets:</p>\n\n<ul>\n<li><code>component[autoScroll]</code> - matches any Component that has <code>autoScroll</code> property with\nany truthy (non-empty, not <code>false</code>) value.</li>\n<li><code>panel[title=\"Test\"]</code> - matches any Component that has <code>title</code> property set to\n\"Test\". Note that if the value does not contain spaces, the quotes are optional.</li>\n</ul>\n\n\n<p>Attributes can use any of the operators in <a href=\"#!/api/Ext.dom.Query\" rel=\"Ext.dom.Query\" class=\"docClass\">DomQuery</a>'s\n<a href=\"#!/api/Ext.dom.Query-property-operators\" rel=\"Ext.dom.Query-property-operators\" class=\"docClass\">operators</a> to compare values.</p>\n\n<p>Prefixing the attribute name with an at sign <code>@</code> means that the property must be\nthe object's <code>ownProperty</code>, not a property from the prototype chain.</p>\n\n<p>Specifications like <code>[propName]</code> check that the property is a truthy value. To check\nthat the object has an <code>ownProperty</code> of a certain name, regardless of the value use\nthe form <code>[?propName]</code>.</p>\n\n<p>The specified value is coerced to match the type of the property found in the\ncandidate Component using <a href=\"#!/api/Ext-method-coerce\" rel=\"Ext-method-coerce\" class=\"docClass\">Ext.coerce</a>.</p>\n\n<p>If you need to find Components by their <code>itemId</code> property, use <code>#id</code> form; it will\ndo the same but is easier to read.</p>\n\n<h2>Attribute matching operators</h2>\n\n<p>The '=' operator will return the results that <strong>exactly</strong> match the\nspecified object property (attribute):</p>\n\n<pre><code><a href=\"#!/api/Ext.ComponentQuery-method-query\" rel=\"Ext.ComponentQuery-method-query\" class=\"docClass\">Ext.ComponentQuery.query</a>('panel[cls=my-cls]');\n</code></pre>\n\n<p>Will match the following Component:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.window.Window\" rel=\"Ext.window.Window\" class=\"docClass\">Ext.window.Window</a>', {\n    cls: 'my-cls'\n});\n</code></pre>\n\n<p>But will not match the following Component, because 'my-cls' is one value\namong others:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>', {\n     cls: 'foo-cls my-cls bar-cls'\n });\n</code></pre>\n\n<p>You can use the '~=' operator instead, it will return Components with\nthe property that <strong>exactly</strong> matches one of the whitespace-separated\nvalues. This is also true for properties that only have <em>one</em> value:</p>\n\n<pre><code><a href=\"#!/api/Ext.ComponentQuery-method-query\" rel=\"Ext.ComponentQuery-method-query\" class=\"docClass\">Ext.ComponentQuery.query</a>('panel[cls~=my-cls]');\n</code></pre>\n\n<p>Will match both Components:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>', {\n    cls: 'foo-cls my-cls bar-cls'\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.window.Window\" rel=\"Ext.window.Window\" class=\"docClass\">Ext.window.Window</a>', {\n    cls: 'my-cls'\n});\n</code></pre>\n\n<p>Generally, '=' operator is more suited for object properties other than\nCSS classes, while '~=' operator will work best with properties that\nhold lists of whitespace-separated CSS classes.</p>\n\n<p>The '^=' operator will return Components with specified attribute that\nstart with the passed value:</p>\n\n<pre><code><a href=\"#!/api/Ext.ComponentQuery-method-query\" rel=\"Ext.ComponentQuery-method-query\" class=\"docClass\">Ext.ComponentQuery.query</a>('panel[title^=Sales]');\n</code></pre>\n\n<p>Will match the following Component:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>', {\n    title: 'Sales estimate for Q4'\n});\n</code></pre>\n\n<p>The '$=' operator will return Components with specified properties that\nend with the passed value:</p>\n\n<pre><code><a href=\"#!/api/Ext.ComponentQuery-method-query\" rel=\"Ext.ComponentQuery-method-query\" class=\"docClass\">Ext.ComponentQuery.query</a>('field[fieldLabel$=name]');\n</code></pre>\n\n<p>Will match the following Component:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.field.Text\" rel=\"Ext.form.field.Text\" class=\"docClass\">Ext.form.field.Text</a>', {\n    fieldLabel: 'Enter your name'\n});\n</code></pre>\n\n<p>The following test will find panels with their <code>ownProperty</code> collapsed being equal to\n<code>false</code>. It will <strong>not</strong> match a collapsed property from the prototype chain.</p>\n\n<pre><code><a href=\"#!/api/Ext.ComponentQuery-method-query\" rel=\"Ext.ComponentQuery-method-query\" class=\"docClass\">Ext.ComponentQuery.query</a>('panel[@collapsed=false]');\n</code></pre>\n\n<p>Member expressions from candidate Components may be tested. If the expression returns\na <em>truthy</em> value, the candidate Component will be included in the query:</p>\n\n<pre><code>var disabledFields = myFormPanel.query(\"{isDisabled()}\");\n</code></pre>\n\n<p>Such expressions are executed in Component's context, and the above expression is\nsimilar to running this snippet for every Component in your application:</p>\n\n<pre><code> if (component.isDisabled()) {\n     matches.push(component);\n }\n</code></pre>\n\n<p>It is important to use only methods that are available in <strong>every</strong> Component instance\nto avoid run time exceptions. If you need to match your Components with a custom\ncondition formula, you can augment <code><a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a></code> to provide custom matcher that\nwill return <code>false</code> by default, and override it in your custom classes:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.Component', {\n     override: '<a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>',\n     myMatcher: function() { return false; }\n });\n\n <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.Panel', {\n     extend: '<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>',\n     requires: ['My.Component'],     // Ensure that Component override is applied\n     myMatcher: function(selector) {\n         return selector === 'myPanel';\n     }\n });\n</code></pre>\n\n<p>After that you can use a selector with your custom matcher to find all instances\nof <code>My.Panel</code>:</p>\n\n<pre><code> <a href=\"#!/api/Ext.ComponentQuery-method-query\" rel=\"Ext.ComponentQuery-method-query\" class=\"docClass\">Ext.ComponentQuery.query</a>(\"{myMatcher('myPanel')}\");\n</code></pre>\n\n<p>However if you really need to use a custom matcher, you may find it easier to implement\na custom Pseudo class instead (see below).</p>\n\n<h2>Conditional matching</h2>\n\n<p>Attribute matchers can be combined to select only Components that match <strong>all</strong>\nconditions (logical AND operator):</p>\n\n<pre><code><a href=\"#!/api/Ext.ComponentQuery-method-query\" rel=\"Ext.ComponentQuery-method-query\" class=\"docClass\">Ext.ComponentQuery.query</a>('panel[cls~=my-cls][floating=true][title$=\"sales data\"]');\n</code></pre>\n\n<p>E.g., the query above will match only a Panel-descended Component that has 'my-cls'\nCSS class <em>and</em> is floating <em>and</em> with a title that ends with \"sales data\".</p>\n\n<p>Expressions separated with commas will match any Component that satisfies\n<em>either</em> expression (logical OR operator):</p>\n\n<pre><code><a href=\"#!/api/Ext.ComponentQuery-method-query\" rel=\"Ext.ComponentQuery-method-query\" class=\"docClass\">Ext.ComponentQuery.query</a>('field[fieldLabel^=User], field[fieldLabel*=password]');\n</code></pre>\n\n<p>E.g., the query above will match any field with field label starting with \"User\",\n<em>or</em> any field that has \"password\" in its label.</p>\n\n<h2>Pseudo classes</h2>\n\n<p>Pseudo classes may be used to filter results in the same way as in\n<a href=\"#!/api/Ext.dom.Query\" rel=\"Ext.dom.Query\" class=\"docClass\">Ext.dom.Query</a>. There are five default pseudo classes:</p>\n\n<ul>\n<li><code>not</code> Negates a selector.</li>\n<li><code>first</code> Filters out all except the first matching item for a selector.</li>\n<li><code>last</code> Filters out all except the last matching item for a selector.</li>\n<li><code>focusable</code> Filters out all except Components which are currently able to recieve\nfocus.</li>\n<li><code>nth-child</code> Filters Components by ordinal position in the selection.</li>\n</ul>\n\n\n<p>These pseudo classes can be used with other matchers or without them:</p>\n\n<pre><code> // Select first direct child button in any panel\n <a href=\"#!/api/Ext.ComponentQuery-method-query\" rel=\"Ext.ComponentQuery-method-query\" class=\"docClass\">Ext.ComponentQuery.query</a>('panel &gt; button:first');\n\n // Select last field in Profile form\n <a href=\"#!/api/Ext.ComponentQuery-method-query\" rel=\"Ext.ComponentQuery-method-query\" class=\"docClass\">Ext.ComponentQuery.query</a>('form[title=Profile] field:last');\n\n // Find first focusable Component in a panel and focus it\n panel.down(':focusable').focus();\n\n // Select any field that is not hidden in a form\n form.query('field:not(hiddenfield)');\n</code></pre>\n\n<p>Pseudo class <code>nth-child</code> can be used to find any child Component by its\nposition relative to its siblings. This class' handler takes one argument\nthat specifies the selection formula as <code>Xn</code> or <code>Xn+Y</code>:</p>\n\n<pre><code> // Find every odd field in a form\n form.query('field:nth-child(2n+1)'); // or use shortcut: :nth-child(odd)\n\n // Find every even field in a form\n form.query('field:nth-child(2n)');   // or use shortcut: :nth-child(even)\n\n // Find every 3rd field in a form\n form.query('field:nth-child(3n)');\n</code></pre>\n\n<p>Pseudo classes can be combined to further filter the results, e.g., in the\nform example above we can modify the query to exclude hidden fields:</p>\n\n<pre><code> // Find every 3rd non-hidden field in a form\n form.query('field:not(hiddenfield):nth-child(3n)');\n</code></pre>\n\n<p>Note that when combining pseudo classes, whitespace is significant, i.e.\nthere should be no spaces between pseudo classes. This is a common mistake;\nif you accidentally type a space between <code>field</code> and <code>:not</code>, the query\nwill not return any result because it will mean \"find <em>field's children\nComponents</em> that are not hidden fields...\".</p>\n\n<h2>Custom pseudo classes</h2>\n\n<p>It is possible to define your own custom pseudo classes. In fact, a\npseudo class is just a property in <code>Ext.ComponentQuery.pseudos</code> object\nthat defines pseudo class name (property name) and pseudo class handler\n(property value):</p>\n\n<pre><code>// Function receives array and returns a filtered array.\nExt.ComponentQuery.pseudos.invalid = function(items) {\n    var i = 0, l = items.length, c, result = [];\n    for (; i &lt; l; i++) {\n        if (!(c = items[i]).isValid()) {\n            result.push(c);\n        }\n    }\n    return result;\n};\n\nvar invalidFields = myFormPanel.query('field:invalid');\nif (invalidFields.length) {\n    invalidFields[0].getEl().scrollIntoView(myFormPanel.body);\n    for (var i = 0, l = invalidFields.length; i &lt; l; i++) {\n        invalidFields[i].getEl().frame(\"red\");\n    }\n}\n</code></pre>\n\n<p>Pseudo class handlers can be even more flexible, with a selector\nargument used to define the logic:</p>\n\n<pre><code> // Handler receives array of itmes and selector in parentheses\n Ext.ComponentQuery.pseudos.titleRegex = function(components, selector) {\n     var i = 0, l = components.length, c, result = [], regex = new RegExp(selector);\n     for (; i &lt; l; i++) {\n         c = components[i];\n         if (c.title &amp;&amp; regex.test(c.title)) {\n             result.push(c);\n         }\n     }\n     return result;\n }\n\n var salesTabs = tabPanel.query('panel:titleRegex(\"sales\\\\s+for\\\\s+201[123]\")');\n</code></pre>\n\n<p>Be careful when using custom pseudo classes with MVC Controllers: when\nyou use a pseudo class in Controller's <code>control</code> or <code>listen</code> component\nselectors, the pseudo class' handler function will be called very often\nand may slow down your application significantly. A good rule of thumb\nis to always specify Component xtype with the pseudo class so that the\nhandlers are only called on Components that you need, and try to make\nthe condition checks as cheap in terms of execution time as possible.\nNote how in the example above, handler function checks that Component\n<em>has</em> a title first, before running regex test on it.</p>\n\n<h2>Query examples</h2>\n\n<p>Queries return an array of Components. Here are some example queries:</p>\n\n<pre><code>// retrieve all Ext.Panels in the document by xtype\nvar panelsArray = <a href=\"#!/api/Ext.ComponentQuery-method-query\" rel=\"Ext.ComponentQuery-method-query\" class=\"docClass\">Ext.ComponentQuery.query</a>('panel');\n\n// retrieve all Ext.Panels within the container with an id myCt\nvar panelsWithinmyCt = <a href=\"#!/api/Ext.ComponentQuery-method-query\" rel=\"Ext.ComponentQuery-method-query\" class=\"docClass\">Ext.ComponentQuery.query</a>('#myCt panel');\n\n// retrieve all direct children which are Ext.Panels within myCt\nvar directChildPanel = <a href=\"#!/api/Ext.ComponentQuery-method-query\" rel=\"Ext.ComponentQuery-method-query\" class=\"docClass\">Ext.ComponentQuery.query</a>('#myCt &gt; panel');\n\n// retrieve all grids or trees\nvar gridsAndTrees = <a href=\"#!/api/Ext.ComponentQuery-method-query\" rel=\"Ext.ComponentQuery-method-query\" class=\"docClass\">Ext.ComponentQuery.query</a>('gridpanel, treepanel');\n\n// Focus first Component\nmyFormPanel.child(':focusable').focus();\n\n// Retrieve every odd text field in a form\nmyFormPanel.query('textfield:nth-child(odd)');\n\n// Retrieve every even field in a form, excluding hidden fields\nmyFormPanel.query('field:not(hiddenfield):nth-child(even)');\n</code></pre>\n\n<p>For easy access to queries based from a particular Container see the\n<a href=\"#!/api/Ext.container.Container-method-query\" rel=\"Ext.container.Container-method-query\" class=\"docClass\">Ext.container.Container.query</a>, <a href=\"#!/api/Ext.container.Container-method-down\" rel=\"Ext.container.Container-method-down\" class=\"docClass\">Ext.container.Container.down</a> and\n<a href=\"#!/api/Ext.container.Container-method-child\" rel=\"Ext.container.Container-method-child\" class=\"docClass\">Ext.container.Container.child</a> methods. Also see\n<a href=\"#!/api/Ext.Component-method-up\" rel=\"Ext.Component-method-up\" class=\"docClass\">Ext.Component.up</a>.</p>\n","is":{"!type":"fn(component: +Ext.Component, selector: string) -> bool","!doc":"<p>Tests whether the passed Component matches the selector string.</p>\n"},"query":{"!type":"fn(selector: string, root?: +Ext.container.Container) -> [+Ext.Component]","!doc":"<p>Returns an array of matched Components from within the passed root object.</p>\n\n<p>This method filters returned Components in a similar way to how CSS selector based DOM\nqueries work using a textual selector string.</p>\n\n<p>See class summary for details.</p>\n"}},"Date":{"!doc":"<p>A set of useful static methods to deal with date\nNote that if <a href=\"#!/api/Ext.Date\" rel=\"Ext.Date\" class=\"docClass\">Ext.Date</a> is required and loaded, it will copy all methods / properties to\nthis object for convenience</p>\n\n<p>The date parsing and formatting syntax contains a subset of\n<a href=\"http://www.php.net/date\">PHP's <code>date()</code> function</a>, and the formats that are\nsupported will provide results equivalent to their PHP versions.</p>\n\n<p>The following is a list of all currently supported formats:</p>\n\n<pre class=\"\">\nFormat      Description                                                               Example returned values\n------      -----------------------------------------------------------------------   -----------------------\n  d         Day of the month, 2 digits with leading zeros                             01 to 31\n  D         A short textual representation of the day of the week                     Mon to Sun\n  j         Day of the month without leading zeros                                    1 to 31\n  l         A full textual representation of the day of the week                      Sunday to Saturday\n  N         ISO-8601 numeric representation of the day of the week                    1 (for Monday) through 7 (for Sunday)\n  S         English ordinal suffix for the day of the month, 2 characters             st, nd, rd or th. Works well with j\n  w         Numeric representation of the day of the week                             0 (for Sunday) to 6 (for Saturday)\n  z         The day of the year (starting from 0)                                     0 to 364 (365 in leap years)\n  W         ISO-8601 week number of year, weeks starting on Monday                    01 to 53\n  F         A full textual representation of a month, such as January or March        January to December\n  m         Numeric representation of a month, with leading zeros                     01 to 12\n  M         A short textual representation of a month                                 Jan to Dec\n  n         Numeric representation of a month, without leading zeros                  1 to 12\n  t         Number of days in the given month                                         28 to 31\n  L         Whether it&#39;s a leap year                                                  1 if it is a leap year, 0 otherwise.\n  o         ISO-8601 year number (identical to (Y), but if the ISO week number (W)    Examples: 1998 or 2004\n            belongs to the previous or next year, that year is used instead)\n  Y         A full numeric representation of a year, 4 digits                         Examples: 1999 or 2003\n  y         A two digit representation of a year                                      Examples: 99 or 03\n  a         Lowercase Ante meridiem and Post meridiem                                 am or pm\n  A         Uppercase Ante meridiem and Post meridiem                                 AM or PM\n  g         12-hour format of an hour without leading zeros                           1 to 12\n  G         24-hour format of an hour without leading zeros                           0 to 23\n  h         12-hour format of an hour with leading zeros                              01 to 12\n  H         24-hour format of an hour with leading zeros                              00 to 23\n  i         Minutes, with leading zeros                                               00 to 59\n  s         Seconds, with leading zeros                                               00 to 59\n  u         Decimal fraction of a second                                              Examples:\n            (minimum 1 digit, arbitrary number of digits allowed)                     001 (i.e. 0.001s) or\n                                                                                      100 (i.e. 0.100s) or\n                                                                                      999 (i.e. 0.999s) or\n                                                                                      999876543210 (i.e. 0.999876543210s)\n  O         Difference to Greenwich time (GMT) in hours and minutes                   Example: +1030\n  P         Difference to Greenwich time (GMT) with colon between hours and minutes   Example: -08:00\n  T         Timezone abbreviation of the machine running the code                     Examples: EST, MDT, PDT ...\n  Z         Timezone offset in seconds (negative if west of UTC, positive if east)    -43200 to 50400\n  c         ISO 8601 date\n            Notes:                                                                    Examples:\n            1) If unspecified, the month / day defaults to the current month / day,   1991 or\n               the time defaults to midnight, while the timezone defaults to the      1992-10 or\n               browser's timezone. If a time is specified, it must include both hours 1993-09-20 or\n               and minutes. The \"T\" delimiter, seconds, milliseconds and timezone     1994-08-19T16:20+01:00 or\n               are optional.                                                          1995-07-18T17:21:28-02:00 or\n            2) The decimal fraction of a second, if specified, must contain at        1996-06-17T18:22:29.98765+03:00 or\n               least 1 digit (there is no limit to the maximum number                 1997-05-16T19:23:30,12345-0400 or\n               of digits allowed), and may be delimited by either a '.' or a ','      1998-04-15T20:24:31.2468Z or\n            Refer to the examples on the right for the various levels of              1999-03-14T20:24:32Z or\n            date-time granularity which are supported, or see                         2000-02-13T21:25:33\n            http://www.w3.org/TR/NOTE-datetime for more info.                         2001-01-12 22:26:34\n  U         Seconds since the Unix Epoch (January 1 1970 00:00:00 GMT)                1193432466 or -2138434463\n  MS        Microsoft AJAX serialized dates                                           \\/Date(1238606590509)\\/ (i.e. UTC milliseconds since epoch) or\n                                                                                      \\/Date(1238606590509+0800)\\/\n  time      A javascript millisecond timestamp                                        1350024476440\n  timestamp A UNIX timestamp (same as U)                                              1350024866            \n</pre>\n\n\n<p>Example usage (note that you must escape format specifiers with '\\' to render them as character literals):</p>\n\n<pre><code>// Sample date:\n// 'Wed Jan 10 2007 15:05:01 GMT-0600 (Central Standard Time)'\n\nvar dt = new Date('1/10/2007 03:05:01 PM GMT-0600');\nconsole.log(<a href=\"#!/api/Ext.Date-method-format\" rel=\"Ext.Date-method-format\" class=\"docClass\">Ext.Date.format</a>(dt, 'Y-m-d'));                          // 2007-01-10\nconsole.log(<a href=\"#!/api/Ext.Date-method-format\" rel=\"Ext.Date-method-format\" class=\"docClass\">Ext.Date.format</a>(dt, 'F j, Y, g:i a'));                  // January 10, 2007, 3:05 pm\nconsole.log(<a href=\"#!/api/Ext.Date-method-format\" rel=\"Ext.Date-method-format\" class=\"docClass\">Ext.Date.format</a>(dt, 'l, \\\\t\\\\he jS \\\\of F Y h:i:s A')); // Wednesday, the 10th of January 2007 03:05:01 PM\n</code></pre>\n\n<p>Here are some standard date/time patterns that you might find helpful.  They\nare not part of the source of <a href=\"#!/api/Ext.Date\" rel=\"Ext.Date\" class=\"docClass\">Ext.Date</a>, but to use them you can simply copy this\nblock of code into any script that is included after <a href=\"#!/api/Ext.Date\" rel=\"Ext.Date\" class=\"docClass\">Ext.Date</a> and they will also become\nglobally available on the Date object.  Feel free to add or remove patterns as needed in your code.</p>\n\n<pre><code>Ext.Date.patterns = {\n    ISO8601Long:\"Y-m-d H:i:s\",\n    ISO8601Short:\"Y-m-d\",\n    ShortDate: \"n/j/Y\",\n    LongDate: \"l, F d, Y\",\n    FullDateTime: \"l, F d, Y g:i:s A\",\n    MonthDay: \"F d\",\n    ShortTime: \"g:i A\",\n    LongTime: \"g:i:s A\",\n    SortableDateTime: \"Y-m-d\\\\TH:i:s\",\n    UniversalSortableDateTime: \"Y-m-d H:i:sO\",\n    YearMonth: \"F, Y\"\n};\n</code></pre>\n\n<p>Example usage:</p>\n\n<pre><code>var dt = new Date();\nconsole.log(<a href=\"#!/api/Ext.Date-method-format\" rel=\"Ext.Date-method-format\" class=\"docClass\">Ext.Date.format</a>(dt, Ext.Date.patterns.ShortDate));\n</code></pre>\n\n<p>Developer-written, custom formats may be used by supplying both a formatting and a parsing function\nwhich perform to specialized requirements. The functions are stored in <a href=\"#!/api/Ext.Date-property-parseFunctions\" rel=\"Ext.Date-property-parseFunctions\" class=\"docClass\">parseFunctions</a> and <a href=\"#!/api/Ext.Date-property-formatFunctions\" rel=\"Ext.Date-property-formatFunctions\" class=\"docClass\">formatFunctions</a>.</p>\n","DAY":{"!type":"string","!doc":"<p>Date interval constant</p>\n"},"HOUR":{"!type":"string","!doc":"<p>Date interval constant</p>\n"},"MILLI":{"!type":"string","!doc":"<p>Date interval constant</p>\n"},"MINUTE":{"!type":"string","!doc":"<p>Date interval constant</p>\n"},"MONTH":{"!type":"string","!doc":"<p>Date interval constant</p>\n"},"SECOND":{"!type":"string","!doc":"<p>Date interval constant</p>\n"},"YEAR":{"!type":"string","!doc":"<p>Date interval constant</p>\n"},"dayNames":{"!type":"[string]","!doc":"<p>An array of textual day names.\nOverride these values for international dates.</p>\n\n<p>Example:</p>\n\n<pre><code><a href=\"#!/api/Ext.Date-property-dayNames\" rel=\"Ext.Date-property-dayNames\" class=\"docClass\">Ext.Date.dayNames</a> = [\n    'SundayInYourLang',\n    'MondayInYourLang'\n    // ...\n];\n</code></pre>\n"},"defaultFormat":{"!type":"string","!doc":"<p>The date format string that the <a href=\"#!/api/Ext.util.Format-method-dateRenderer\" rel=\"Ext.util.Format-method-dateRenderer\" class=\"docClass\">Ext.util.Format.dateRenderer</a>\nand <a href=\"#!/api/Ext.util.Format-method-date\" rel=\"Ext.util.Format-method-date\" class=\"docClass\">Ext.util.Format.date</a> functions use.  See <a href=\"#!/api/Ext.Date\" rel=\"Ext.Date\" class=\"docClass\">Ext.Date</a> for details.</p>\n\n<p>This may be overridden in a locale file.</p>\n"},"defaults":{"!type":"?","!doc":"<p>An object hash containing default date values used during date parsing.</p>\n\n<p>The following properties are available:<div class=\"mdetail-params\"><ul>\n<li><code>y</code> : Number<div class=\"sub-desc\">The default year value. (defaults to undefined)</div></li>\n<li><code>m</code> : Number<div class=\"sub-desc\">The default 1-based month value. (defaults to undefined)</div></li>\n<li><code>d</code> : Number<div class=\"sub-desc\">The default day value. (defaults to undefined)</div></li>\n<li><code>h</code> : Number<div class=\"sub-desc\">The default hour value. (defaults to undefined)</div></li>\n<li><code>i</code> : Number<div class=\"sub-desc\">The default minute value. (defaults to undefined)</div></li>\n<li><code>s</code> : Number<div class=\"sub-desc\">The default second value. (defaults to undefined)</div></li>\n<li><code>ms</code> : Number<div class=\"sub-desc\">The default millisecond value. (defaults to undefined)</div></li>\n</ul></div></p>\n\n<p>Override these properties to customize the default date values used by the <a href=\"#!/api/Ext.Date-method-parse\" rel=\"Ext.Date-method-parse\" class=\"docClass\">parse</a> method.</p>\n\n<p><strong>Note:</strong> In countries which experience Daylight Saving Time (i.e. DST), the <code>h</code>, <code>i</code>, <code>s</code>\nand <code>ms</code> properties may coincide with the exact time in which DST takes effect.\nIt is the responsibility of the developer to account for this.</p>\n\n<p>Example Usage:</p>\n\n<pre><code>// set default day value to the first day of the month\nExt.Date.defaults.d = 1;\n\n// parse a February date string containing only year and month values.\n// setting the default day value to 1 prevents weird date rollover issues\n// when attempting to parse the following date string on, for example, March 31st 2009.\n<a href=\"#!/api/Ext.Date-method-parse\" rel=\"Ext.Date-method-parse\" class=\"docClass\">Ext.Date.parse</a>('2009-02', 'Y-m'); // returns a Date object representing February 1st 2009\n</code></pre>\n"},"formatCodes":{"!type":"?","!doc":"<p>The base format-code to formatting-function hashmap used by the <a href=\"#!/api/Ext.Date-method-format\" rel=\"Ext.Date-method-format\" class=\"docClass\">format</a> method.\nFormatting functions are strings (or functions which return strings) which\nwill return the appropriate value when evaluated in the context of the Date object\nfrom which the <a href=\"#!/api/Ext.Date-method-format\" rel=\"Ext.Date-method-format\" class=\"docClass\">format</a> method is called.\nAdd to / override these mappings for custom date formatting.</p>\n\n<p><strong>Note:</strong> <a href=\"#!/api/Ext.Date-method-format\" rel=\"Ext.Date-method-format\" class=\"docClass\">Ext.Date.format</a>() treats characters as literals if an appropriate mapping cannot be found.</p>\n\n<p>Example:</p>\n\n<pre><code>Ext.Date.formatCodes.x = \"<a href=\"#!/api/Ext.util.Format-method-leftPad\" rel=\"Ext.util.Format-method-leftPad\" class=\"docClass\">Ext.util.Format.leftPad</a>(this.getDate(), 2, '0')\";\nconsole.log(<a href=\"#!/api/Ext.Date-method-format\" rel=\"Ext.Date-method-format\" class=\"docClass\">Ext.Date.format</a>(new Date(), 'X'); // returns the current day of the month\n</code></pre>\n"},"formatFunctions":{"!type":"?","!doc":"<p>An object hash in which each property is a date formatting function. The property name is the\nformat string which corresponds to the produced formatted date string.</p>\n\n<p>This object is automatically populated with date formatting functions as\ndate formats are requested for Ext standard formatting strings.</p>\n\n<p>Custom formatting functions may be inserted into this object, keyed by a name which from then on\nmay be used as a format string to <a href=\"#!/api/Ext.Date-method-format\" rel=\"Ext.Date-method-format\" class=\"docClass\">format</a>.</p>\n\n<p>Example:</p>\n\n<pre><code><a href=\"#!/api/Ext.Date-property-formatFunctions\" rel=\"Ext.Date-property-formatFunctions\" class=\"docClass\">Ext.Date.formatFunctions</a>['x-date-format'] = myDateFormatter;\n</code></pre>\n\n<p>A formatting function should return a string representation of the passed Date object, and is passed the following parameters:<div class=\"mdetail-params\"><ul>\n<li><code>date</code> : Date<div class=\"sub-desc\">The Date to format.</div></li>\n</ul></div></p>\n\n<p>To enable date strings to also be <em>parsed</em> according to that format, a corresponding\nparsing function must be placed into the <a href=\"#!/api/Ext.Date-property-parseFunctions\" rel=\"Ext.Date-property-parseFunctions\" class=\"docClass\">parseFunctions</a> property.</p>\n"},"monthNames":{"!type":"[string]","!doc":"<p>An array of textual month names.\nOverride these values for international dates.</p>\n\n<p>Example:</p>\n\n<pre><code><a href=\"#!/api/Ext.Date-property-monthNames\" rel=\"Ext.Date-property-monthNames\" class=\"docClass\">Ext.Date.monthNames</a> = [\n    'JanInYourLang',\n    'FebInYourLang'\n    // ...\n];\n</code></pre>\n"},"monthNumbers":{"!type":"?","!doc":"<p>An object hash of zero-based JavaScript month numbers (with short month names as keys. <strong>Note:</strong> keys are case-sensitive).\nOverride these values for international dates.</p>\n\n<p>Example:</p>\n\n<pre><code><a href=\"#!/api/Ext.Date-property-monthNumbers\" rel=\"Ext.Date-property-monthNumbers\" class=\"docClass\">Ext.Date.monthNumbers</a> = {\n    'LongJanNameInYourLang': 0,\n    'ShortJanNameInYourLang':0,\n    'LongFebNameInYourLang':1,\n    'ShortFebNameInYourLang':1\n    // ...\n};\n</code></pre>\n"},"parseFunctions":{"!type":"?","!doc":"<p>An object hash in which each property is a date parsing function. The property name is the\nformat string which that function parses.</p>\n\n<p>This object is automatically populated with date parsing functions as\ndate formats are requested for Ext standard formatting strings.</p>\n\n<p>Custom parsing functions may be inserted into this object, keyed by a name which from then on\nmay be used as a format string to <a href=\"#!/api/Ext.Date-method-parse\" rel=\"Ext.Date-method-parse\" class=\"docClass\">parse</a>.</p>\n\n<p>Example:</p>\n\n<pre><code><a href=\"#!/api/Ext.Date-property-parseFunctions\" rel=\"Ext.Date-property-parseFunctions\" class=\"docClass\">Ext.Date.parseFunctions</a>['x-date-format'] = myDateParser;\n</code></pre>\n\n<p>A parsing function should return a Date object, and is passed the following parameters:<div class=\"mdetail-params\"><ul>\n<li><code>date</code> : String<div class=\"sub-desc\">The date string to parse.</div></li>\n<li><code>strict</code> : Boolean<div class=\"sub-desc\">True to validate date strings while parsing\n(i.e. prevent JavaScript Date \"rollover\") (The default must be <code>false</code>).\nInvalid date strings should return <code>null</code> when parsed.</div></li>\n</ul></div></p>\n\n<p>To enable Dates to also be <em>formatted</em> according to that format, a corresponding\nformatting function must be placed into the <a href=\"#!/api/Ext.Date-property-formatFunctions\" rel=\"Ext.Date-property-formatFunctions\" class=\"docClass\">formatFunctions</a> property.</p>\n"},"useStrict":{"!type":"bool","!doc":"<p>Global flag which determines if strict date parsing should be used.\nStrict date parsing will not roll-over invalid dates, which is the\ndefault behavior of JavaScript Date objects.\n(see <a href=\"#!/api/Ext.Date-method-parse\" rel=\"Ext.Date-method-parse\" class=\"docClass\">parse</a> for more information)</p>\n"},"add":{"!type":"fn(date: +Date, interval: string, value: number) -> +Date","!doc":"<p>Provides a convenient method for performing basic date arithmetic. This method\ndoes not modify the Date instance being called - it creates and returns\na new Date instance containing the resulting date value.</p>\n\n<p>Examples:</p>\n\n<pre><code>// Basic usage:\nvar dt = <a href=\"#!/api/Ext.Date-method-add\" rel=\"Ext.Date-method-add\" class=\"docClass\">Ext.Date.add</a>(new Date('10/29/2006'), <a href=\"#!/api/Ext.Date-property-DAY\" rel=\"Ext.Date-property-DAY\" class=\"docClass\">Ext.Date.DAY</a>, 5);\nconsole.log(dt); // returns 'Fri Nov 03 2006 00:00:00'\n\n// Negative values will be subtracted:\nvar dt2 = <a href=\"#!/api/Ext.Date-method-add\" rel=\"Ext.Date-method-add\" class=\"docClass\">Ext.Date.add</a>(new Date('10/1/2006'), <a href=\"#!/api/Ext.Date-property-DAY\" rel=\"Ext.Date-property-DAY\" class=\"docClass\">Ext.Date.DAY</a>, -5);\nconsole.log(dt2); // returns 'Tue Sep 26 2006 00:00:00'\n\n // Decimal values can be used:\nvar dt3 = <a href=\"#!/api/Ext.Date-method-add\" rel=\"Ext.Date-method-add\" class=\"docClass\">Ext.Date.add</a>(new Date('10/1/2006'), <a href=\"#!/api/Ext.Date-property-DAY\" rel=\"Ext.Date-property-DAY\" class=\"docClass\">Ext.Date.DAY</a>, 1.25);\nconsole.log(dt3); // returns 'Mon Oct 02 2006 06:00:00'\n</code></pre>\n"},"between":{"!type":"fn(date: +Date, start: +Date, end: +Date) -> bool","!doc":"<p>Checks if a date falls on or between the given start and end dates.</p>\n"},"clearTime":{"!type":"fn(date: +Date, clone?: bool) -> +Date","!doc":"<p>Attempts to clear all time information from this Date by setting the time to midnight of the same day,\nautomatically adjusting for Daylight Saving Time (DST) where applicable.</p>\n\n<p><strong>Note:</strong> DST timezone information for the browser's host operating system is assumed to be up-to-date.</p>\n"},"clone":{"!type":"fn(date: +Date) -> +Date","!doc":"<p>Creates and returns a new Date instance with the exact same date value as the called instance.\nDates are copied and passed by reference, so if a copied date variable is modified later, the original\nvariable will also be changed.  When the intention is to create a new variable that will not\nmodify the original instance, you should create a clone.</p>\n\n<p>Example of correctly cloning a date:</p>\n\n<pre><code>//wrong way:\nvar orig = new Date('10/1/2006');\nvar copy = orig;\ncopy.setDate(5);\nconsole.log(orig);  // returns 'Thu Oct 05 2006'!\n\n//correct way:\nvar orig = new Date('10/1/2006'),\n    copy = <a href=\"#!/api/Ext.Date-method-clone\" rel=\"Ext.Date-method-clone\" class=\"docClass\">Ext.Date.clone</a>(orig);\ncopy.setDate(5);\nconsole.log(orig);  // returns 'Thu Oct 01 2006'\n</code></pre>\n"},"format":{"!type":"fn(date: +Date, format: string) -> string","!doc":"<p>Formats a date given the supplied format string.</p>\n"},"formatContainsDateInfo":{"!type":"fn(format: string) -> bool","!doc":"<p>Checks if the specified format contains information about\nanything other than the time.</p>\n"},"formatContainsHourInfo":{"!type":"fn(format: string) -> bool","!doc":"<p>Checks if the specified format contains hour information</p>\n"},"getDayOfYear":{"!type":"fn(date: +Date) -> number","!doc":"<p>Get the numeric day number of the year, adjusted for leap year.</p>\n"},"getDaysInMonth":{"!type":"fn(date: +Date) -> number","!doc":"<p>Get the number of days in the current month, adjusted for leap year.</p>\n"},"getElapsed":{"!type":"fn(dateA: +Date, dateB?: +Date) -> number","!doc":"<p>Returns the number of milliseconds between two dates.</p>\n"},"getFirstDateOfMonth":{"!type":"fn(date: +Date) -> +Date","!doc":"<p>Get the date of the first day of the month in which this date resides.</p>\n"},"getFirstDayOfMonth":{"!type":"fn(date: +Date) -> number","!doc":"<p>Get the first day of the current month, adjusted for leap year.  The returned value\nis the numeric day index within the week (0-6) which can be used in conjunction with\nthe <a href=\"#!/api/Ext.Date-property-monthNames\" rel=\"Ext.Date-property-monthNames\" class=\"docClass\">monthNames</a> array to retrieve the textual day name.</p>\n\n<p>Example:</p>\n\n<pre><code>var dt = new Date('1/10/2007'),\n    firstDay = <a href=\"#!/api/Ext.Date-method-getFirstDayOfMonth\" rel=\"Ext.Date-method-getFirstDayOfMonth\" class=\"docClass\">Ext.Date.getFirstDayOfMonth</a>(dt);\nconsole.log(<a href=\"#!/api/Ext.Date-property-dayNames\" rel=\"Ext.Date-property-dayNames\" class=\"docClass\">Ext.Date.dayNames</a>[firstDay]); // output: 'Monday'\n</code></pre>\n"},"getGMTOffset":{"!type":"fn(date: +Date, colon?: bool) -> string","!doc":"<p>Get the offset from GMT of the current date (equivalent to the format specifier 'O').</p>\n"},"getLastDateOfMonth":{"!type":"fn(date: +Date) -> +Date","!doc":"<p>Get the date of the last day of the month in which this date resides.</p>\n"},"getLastDayOfMonth":{"!type":"fn(date: +Date) -> number","!doc":"<p>Get the last day of the current month, adjusted for leap year.  The returned value\nis the numeric day index within the week (0-6) which can be used in conjunction with\nthe <a href=\"#!/api/Ext.Date-property-monthNames\" rel=\"Ext.Date-property-monthNames\" class=\"docClass\">monthNames</a> array to retrieve the textual day name.</p>\n\n<p>Example:</p>\n\n<pre><code>var dt = new Date('1/10/2007'),\n    lastDay = <a href=\"#!/api/Ext.Date-method-getLastDayOfMonth\" rel=\"Ext.Date-method-getLastDayOfMonth\" class=\"docClass\">Ext.Date.getLastDayOfMonth</a>(dt);\nconsole.log(<a href=\"#!/api/Ext.Date-property-dayNames\" rel=\"Ext.Date-property-dayNames\" class=\"docClass\">Ext.Date.dayNames</a>[lastDay]); // output: 'Wednesday'\n</code></pre>\n"},"getMonthNumber":{"!type":"fn(name: string) -> number","!doc":"<p>Get the zero-based JavaScript month number for the given short/full month name.\nOverride this function for international dates.</p>\n"},"getShortDayName":{"!type":"fn(day: number) -> string","!doc":"<p>Get the short day name for the given day number.\nOverride this function for international dates.</p>\n"},"getShortMonthName":{"!type":"fn(month: number) -> string","!doc":"<p>Get the short month name for the given month number.\nOverride this function for international dates.</p>\n"},"getSuffix":{"!type":"fn(date: +Date) -> string","!doc":"<p>Get the English ordinal suffix of the current day (equivalent to the format specifier 'S').</p>\n"},"getTimezone":{"!type":"fn(date: +Date) -> string","!doc":"<p>Get the timezone abbreviation of the current date (equivalent to the format specifier 'T').</p>\n\n<p><strong>Note:</strong> The date string returned by the JavaScript Date object's <code>toString()</code> method varies\nbetween browsers (e.g. FF vs IE) and system region settings (e.g. IE in Asia vs IE in America).\nFor a given date string e.g. \"Thu Oct 25 2007 22:55:35 GMT+0800 (Malay Peninsula Standard Time)\",\ngetTimezone() first tries to get the timezone abbreviation from between a pair of parentheses\n(which may or may not be present), failing which it proceeds to get the timezone abbreviation\nfrom the GMT offset portion of the date string.</p>\n"},"getWeekOfYear":{"!type":"fn(date: +Date) -> number","!doc":"<p>Get the numeric ISO-8601 week number of the year.\n(equivalent to the format specifier 'W', but without a leading zero).</p>\n"},"isDST":{"!type":"fn(date: +Date) -> bool","!doc":"<p>Checks if the current date is affected by Daylight Saving Time (DST).</p>\n"},"isEqual":{"!type":"fn(date1: +Date, date2: +Date) -> bool","!doc":"<p>Compares if two dates are equal by comparing their values.</p>\n"},"isLeapYear":{"!type":"fn(date: +Date) -> bool","!doc":"<p>Checks if the current date falls within a leap year.</p>\n"},"isValid":{"!type":"fn(year: number, month: number, day: number, hour?: number, minute?: number, second?: number, millisecond?: number) -> bool","!doc":"<p>Checks if the passed Date parameters will cause a JavaScript Date \"rollover\".</p>\n"},"now":{"!type":"fn() -> number","!doc":"<p>Returns the current timestamp.</p>\n"},"parse":{"!type":"fn(input: string, format: string, strict?: bool) -> +Date","!doc":"<p>Parses the passed string using the specified date format.\nNote that this function expects normal calendar dates, meaning that months are 1-based (i.e. 1 = January).\nThe <a href=\"#!/api/Ext.Date-property-defaults\" rel=\"Ext.Date-property-defaults\" class=\"docClass\">defaults</a> hash will be used for any date value (i.e. year, month, day, hour, minute, second or millisecond)\nwhich cannot be found in the passed string. If a corresponding default date value has not been specified in the <a href=\"#!/api/Ext.Date-property-defaults\" rel=\"Ext.Date-property-defaults\" class=\"docClass\">defaults</a> hash,\nthe current date's year, month, day or DST-adjusted zero-hour time value will be used instead.\nKeep in mind that the input date string must precisely match the specified format string\nin order for the parse operation to be successful (failed parse operations return a null value).</p>\n\n<p>Example:</p>\n\n<pre><code>//dt = Fri May 25 2007 (current date)\nvar dt = new Date();\n\n//dt = Thu May 25 2006 (today&amp;#39;s month/day in 2006)\ndt = <a href=\"#!/api/Ext.Date-method-parse\" rel=\"Ext.Date-method-parse\" class=\"docClass\">Ext.Date.parse</a>(\"2006\", \"Y\");\n\n//dt = Sun Jan 15 2006 (all date parts specified)\ndt = <a href=\"#!/api/Ext.Date-method-parse\" rel=\"Ext.Date-method-parse\" class=\"docClass\">Ext.Date.parse</a>(\"2006-01-15\", \"Y-m-d\");\n\n//dt = Sun Jan 15 2006 15:20:01\ndt = <a href=\"#!/api/Ext.Date-method-parse\" rel=\"Ext.Date-method-parse\" class=\"docClass\">Ext.Date.parse</a>(\"2006-01-15 3:20:01 PM\", \"Y-m-d g:i:s A\");\n\n// attempt to parse Sun Feb 29 2006 03:20:01 in strict mode\ndt = <a href=\"#!/api/Ext.Date-method-parse\" rel=\"Ext.Date-method-parse\" class=\"docClass\">Ext.Date.parse</a>(\"2006-02-29 03:20:01\", \"Y-m-d H:i:s\", true); // returns null\n</code></pre>\n"},"subtract":{"!type":"fn(date: +Date, interval: string, value: number) -> +Date","!doc":"<p>Provides a convenient method for performing basic date arithmetic. This method\ndoes not modify the Date instance being called - it creates and returns\na new Date instance containing the resulting date value.</p>\n\n<p>Examples:</p>\n\n<pre><code>// Basic usage:\nvar dt = <a href=\"#!/api/Ext.Date-method-subtract\" rel=\"Ext.Date-method-subtract\" class=\"docClass\">Ext.Date.subtract</a>(new Date('10/29/2006'), <a href=\"#!/api/Ext.Date-property-DAY\" rel=\"Ext.Date-property-DAY\" class=\"docClass\">Ext.Date.DAY</a>, 5);\nconsole.log(dt); // returns 'Tue Oct 24 2006 00:00:00'\n\n// Negative values will be added:\nvar dt2 = <a href=\"#!/api/Ext.Date-method-subtract\" rel=\"Ext.Date-method-subtract\" class=\"docClass\">Ext.Date.subtract</a>(new Date('10/1/2006'), <a href=\"#!/api/Ext.Date-property-DAY\" rel=\"Ext.Date-property-DAY\" class=\"docClass\">Ext.Date.DAY</a>, -5);\nconsole.log(dt2); // returns 'Fri Oct 6 2006 00:00:00'\n\n // Decimal values can be used:\nvar dt3 = <a href=\"#!/api/Ext.Date-method-subtract\" rel=\"Ext.Date-method-subtract\" class=\"docClass\">Ext.Date.subtract</a>(new Date('10/1/2006'), <a href=\"#!/api/Ext.Date-property-DAY\" rel=\"Ext.Date-property-DAY\" class=\"docClass\">Ext.Date.DAY</a>, 1.25);\nconsole.log(dt3); // returns 'Fri Sep 29 2006 06:00:00'\n</code></pre>\n"},"toString":{"!type":"fn(date: ?) -> !this","!doc":"<p>Private for now</p>\n"},"unescapeFormat":{"!type":"fn(format: string) -> string","!doc":"<p>Removes all escaping for a date format string. In date formats,\nusing a '\\' can be used to escape special characters.</p>\n"}},"DomHelper":{"!doc":"<p>The DomHelper class provides a layer of abstraction from DOM and transparently supports creating elements via DOM or\nusing HTML fragments. It also has the ability to create HTML fragment templates from your DOM building code.</p>\n\n<h1>DomHelper element specification object</h1>\n\n<p>A specification object is used when creating elements. Attributes of this object are assumed to be element\nattributes, except for 4 special attributes:</p>\n\n<ul>\n<li><strong>tag</strong> - The tag name of the element.</li>\n<li><strong>children</strong> or <strong>cn</strong> - An array of the same kind of element definition objects to be created and appended.\nThese can be nested as deep as you want.</li>\n<li><strong>cls</strong> - The class attribute of the element. This will end up being either the \"class\" attribute on a HTML\nfragment or className for a DOM node, depending on whether DomHelper is using fragments or DOM.</li>\n<li><strong>html</strong> - The innerHTML for the element.</li>\n</ul>\n\n\n<p><strong>NOTE:</strong> For other arbitrary attributes, the value will currently <strong>not</strong> be automatically HTML-escaped prior to\nbuilding the element's HTML string. This means that if your attribute value contains special characters that would\nnot normally be allowed in a double-quoted attribute value, you <strong>must</strong> manually HTML-encode it beforehand (see\n<a href=\"#!/api/Ext.String-method-htmlEncode\" rel=\"Ext.String-method-htmlEncode\" class=\"docClass\">Ext.String.htmlEncode</a>) or risk malformed HTML being created. This behavior may change in a future release.</p>\n\n<h1>Insertion methods</h1>\n\n<p>Commonly used insertion methods:</p>\n\n<ul>\n<li><strong><a href=\"#!/api/Ext.DomHelper-method-append\" rel=\"Ext.DomHelper-method-append\" class=\"docClass\">append</a></strong></li>\n<li><strong><a href=\"#!/api/Ext.DomHelper-method-insertBefore\" rel=\"Ext.DomHelper-method-insertBefore\" class=\"docClass\">insertBefore</a></strong></li>\n<li><strong><a href=\"#!/api/Ext.DomHelper-method-insertAfter\" rel=\"Ext.DomHelper-method-insertAfter\" class=\"docClass\">insertAfter</a></strong></li>\n<li><strong><a href=\"#!/api/Ext.DomHelper-method-overwrite\" rel=\"Ext.DomHelper-method-overwrite\" class=\"docClass\">overwrite</a></strong></li>\n<li><strong><a href=\"#!/api/Ext.DomHelper-method-createTemplate\" rel=\"Ext.DomHelper-method-createTemplate\" class=\"docClass\">createTemplate</a></strong></li>\n<li><strong><a href=\"#!/api/Ext.DomHelper-method-insertHtml\" rel=\"Ext.DomHelper-method-insertHtml\" class=\"docClass\">insertHtml</a></strong></li>\n</ul>\n\n\n<h1>Example</h1>\n\n<p>This is an example, where an unordered list with 3 children items is appended to an existing element with\nid 'my-div':</p>\n\n<pre><code>var dh = <a href=\"#!/api/Ext.DomHelper\" rel=\"Ext.DomHelper\" class=\"docClass\">Ext.DomHelper</a>; // create shorthand alias\n// specification object\nvar spec = {\n    id: 'my-ul',\n    tag: 'ul',\n    cls: 'my-list',\n    // append children after creating\n    children: [     // may also specify 'cn' instead of 'children'\n        {tag: 'li', id: 'item0', html: 'List Item 0'},\n        {tag: 'li', id: 'item1', html: 'List Item 1'},\n        {tag: 'li', id: 'item2', html: 'List Item 2'}\n    ]\n};\nvar list = dh.append(\n    'my-div', // the context element 'my-div' can either be the id or the actual node\n    spec      // the specification object\n);\n</code></pre>\n\n<p>Element creation specification parameters in this class may also be passed as an Array of specification objects. This\ncan be used to insert multiple sibling nodes into an existing container very efficiently. For example, to add more\nlist items to the example above:</p>\n\n<pre><code>dh.append('my-ul', [\n    {tag: 'li', id: 'item3', html: 'List Item 3'},\n    {tag: 'li', id: 'item4', html: 'List Item 4'}\n]);\n</code></pre>\n\n<h1>Templating</h1>\n\n<p>The real power is in the built-in templating. Instead of creating or appending any elements, <a href=\"#!/api/Ext.DomHelper-method-createTemplate\" rel=\"Ext.DomHelper-method-createTemplate\" class=\"docClass\">createTemplate</a>\nreturns a Template object which can be used over and over to insert new elements. Revisiting the example above, we\ncould utilize templating this time:</p>\n\n<pre><code>// create the node\nvar list = dh.append('my-div', {tag: 'ul', cls: 'my-list'});\n// get template\nvar tpl = dh.createTemplate({tag: 'li', id: 'item{0}', html: 'List Item {0}'});\n\nfor(var i = 0; i &lt; 5, i++){\n    tpl.append(list, [i]); // use template to append to the actual node\n}\n</code></pre>\n\n<p>An example using a template:</p>\n\n<pre><code>var html = '&lt;a id=\"{0}\" href=\"{1}\" class=\"nav\"&gt;{2}&lt;/a&gt;';\n\nvar tpl = new <a href=\"#!/api/Ext.DomHelper-method-createTemplate\" rel=\"Ext.DomHelper-method-createTemplate\" class=\"docClass\">Ext.DomHelper.createTemplate</a>(html);\ntpl.append('blog-roll', ['link1', 'http://www.edspencer.net/', \"Ed's Site\"]);\ntpl.append('blog-roll', ['link2', 'http://www.dustindiaz.com/', \"Dustin's Site\"]);\n</code></pre>\n\n<p>The same example using named parameters:</p>\n\n<pre><code>var html = '&lt;a id=\"{id}\" href=\"{url}\" class=\"nav\"&gt;{text}&lt;/a&gt;';\n\nvar tpl = new <a href=\"#!/api/Ext.DomHelper-method-createTemplate\" rel=\"Ext.DomHelper-method-createTemplate\" class=\"docClass\">Ext.DomHelper.createTemplate</a>(html);\ntpl.append('blog-roll', {\n    id: 'link1',\n    url: 'http://www.edspencer.net/',\n    text: \"Ed's Site\"\n});\ntpl.append('blog-roll', {\n    id: 'link2',\n    url: 'http://www.dustindiaz.com/',\n    text: \"Dustin's Site\"\n});\n</code></pre>\n\n<h1>Compiling Templates</h1>\n\n<p>Templates are applied using regular expressions. The performance is great, but if you are adding a bunch of DOM\nelements using the same template, you can increase performance even further by <a href=\"#!/api/Ext.Template-method-compile\" rel=\"Ext.Template-method-compile\" class=\"docClass\">&quot;compiling&quot;</a> the template. The way \"<a href=\"#!/api/Ext.Template-method-compile\" rel=\"Ext.Template-method-compile\" class=\"docClass\">compile()</a>\" works is the template is parsed and\nbroken up at the different variable points and a dynamic function is created and eval'ed. The generated function\nperforms string concatenation of these parts and the passed variables instead of using regular expressions.</p>\n\n<pre><code>var html = '&lt;a id=\"{id}\" href=\"{url}\" class=\"nav\"&gt;{text}&lt;/a&gt;';\n\nvar tpl = new <a href=\"#!/api/Ext.DomHelper-method-createTemplate\" rel=\"Ext.DomHelper-method-createTemplate\" class=\"docClass\">Ext.DomHelper.createTemplate</a>(html);\ntpl.compile();\n\n//... use template like normal\n</code></pre>\n\n<h1>Performance Boost</h1>\n\n<p>DomHelper will transparently create HTML fragments when it can. Using HTML fragments instead of DOM can significantly\nboost performance.</p>\n\n<p>Element creation specification parameters may also be strings. If <a href=\"#!/api/Ext.DomHelper-property-useDom\" rel=\"Ext.DomHelper-property-useDom\" class=\"docClass\">useDom</a> is false, then the string is used\nas innerHTML. If <a href=\"#!/api/Ext.DomHelper-property-useDom\" rel=\"Ext.DomHelper-property-useDom\" class=\"docClass\">useDom</a> is true, a string specification results in the creation of a text node. Usage:</p>\n\n<pre><code><a href=\"#!/api/Ext.DomHelper-property-useDom\" rel=\"Ext.DomHelper-property-useDom\" class=\"docClass\">Ext.DomHelper.useDom</a> = true; // force it to use DOM; reduces performance\n</code></pre>\n"},"Editor":{"!doc":"<p>The Editor class is used to provide inline editing for elements on the page. The editor\nis backed by a <a href=\"#!/api/Ext.form.field.Field\" rel=\"Ext.form.field.Field\" class=\"docClass\">Ext.form.field.Field</a> that will be displayed to edit the underlying content.\nThe editor is a floating Component, when the editor is shown it is automatically aligned to\ndisplay over the top of the bound element it is editing. The Editor contains several options\nfor how to handle key presses:</p>\n\n<ul>\n<li><a href=\"#!/api/Ext.Editor-cfg-completeOnEnter\" rel=\"Ext.Editor-cfg-completeOnEnter\" class=\"docClass\">completeOnEnter</a></li>\n<li><a href=\"#!/api/Ext.Editor-cfg-cancelOnEsc\" rel=\"Ext.Editor-cfg-cancelOnEsc\" class=\"docClass\">cancelOnEsc</a></li>\n<li><a href=\"#!/api/Ext.Editor-cfg-swallowKeys\" rel=\"Ext.Editor-cfg-swallowKeys\" class=\"docClass\">swallowKeys</a></li>\n</ul>\n\n\n<p>It also has options for how to use the value once the editor has been activated:</p>\n\n<ul>\n<li><a href=\"#!/api/Ext.Editor-cfg-revertInvalid\" rel=\"Ext.Editor-cfg-revertInvalid\" class=\"docClass\">revertInvalid</a></li>\n<li><a href=\"#!/api/Ext.Editor-cfg-ignoreNoChange\" rel=\"Ext.Editor-cfg-ignoreNoChange\" class=\"docClass\">ignoreNoChange</a></li>\n<li><a href=\"#!/api/Ext.Editor-cfg-updateEl\" rel=\"Ext.Editor-cfg-updateEl\" class=\"docClass\">updateEl</a></li>\n</ul>\n\n\n<p>Sample usage:</p>\n\n<pre><code>var editor = new <a href=\"#!/api/Ext.Editor\" rel=\"Ext.Editor\" class=\"docClass\">Ext.Editor</a>({\n    updateEl: true, // update the innerHTML of the bound element when editing completes\n    field: {\n        xtype: 'textfield'\n    }\n});\nvar el = <a href=\"#!/api/Ext-method-get\" rel=\"Ext-method-get\" class=\"docClass\">Ext.get</a>('my-text'); // The element to 'edit'\neditor.startEdit(el); // The value of the field will be taken as the innerHTML of the element.\n</code></pre>\n\n<p><p><img src=\"\" alt=\"Ext.Editor component\" width=\"\" height=\"\"></p></p>\n","!type":"fn(config: +Ext.Element|string|Ext_Editor_cfg)","prototype":{"!proto":"Ext.container.Container.prototype","alignment":{"!type":"string","!doc":"<p>The position to align to (see <a href=\"#!/api/Ext.util.Positionable-method-alignTo\" rel=\"Ext.util.Positionable-method-alignTo\" class=\"docClass\">Ext.util.Positionable.alignTo</a> for more details).</p>\n"},"allowBlur":{"!type":"bool","!doc":"<p>True to <a href=\"#!/api/Ext.Editor-method-completeEdit\" rel=\"Ext.Editor-method-completeEdit\" class=\"docClass\">complete the editing process</a> if in edit mode when the\nfield is blurred.</p>\n"},"autoSize":{"!type":"bool|?","!doc":"<p>True for the editor to automatically adopt the size of the underlying field. Otherwise, an object\ncan be passed to indicate where to get each dimension. The available properties are 'boundEl' and\n'field'. If a dimension is not specified, it will use the underlying height/width specified on\nthe editor object.\nExamples:</p>\n\n<pre><code>autoSize: true // The editor will be sized to the height/width of the field\n\nheight: 21,\nautoSize: {\n    width: 'boundEl' // The width will be determined by the width of the boundEl, the height from the editor (21)\n}\n\nautoSize: {\n    width: 'field', // Width from the field\n    height: 'boundEl' // Height from the boundEl\n}\n</code></pre>\n"},"baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this component's element. This will also be prepended to elements within this\ncomponent like Panel's body will get a class <code>x-panel-body</code>. This means that if you create a subclass of Panel, and\nyou want it to get all the Panels styling for the element and the body, you leave the <code>baseCls</code> <code>x-panel</code> and use\n<code>componentCls</code> to add specific styling for this component.</p>\n"},"cancelOnEsc":{"!type":"bool","!doc":"<p>True to cancel the edit when the escape key is pressed.</p>\n"},"completeOnEnter":{"!type":"bool","!doc":"<p>True to complete the edit when the enter key is pressed.</p>\n"},"constrain":{"!type":"bool","!doc":"<p>True to constrain the editor to the viewport</p>\n"},"field":{"!type":"+Ext.form.field.Field","!doc":"<p>The Field object (or descendant) or config object for field</p>\n"},"focusOnToFront":{"!type":"bool","!doc":"<p>Do not participate in the ZIndexManager's focus switching operations.\nWhen an editor is hidden, the ZIndexManager will not automatically activate\nthe last visible floater on the stack.</p>\n"},"hidden":{"!type":"bool","!doc":"<p>private overrides</p>\n"},"hideEl":{"!type":"bool","!doc":"<p>False to keep the bound element visible while the editor is displayed</p>\n"},"ignoreNoChange":{"!type":"bool","!doc":"<p>True to skip the edit completion process (no save, no events fired) if the user completes an edit and\nthe value has not changed.  Applies only to string values - edits for other data types\nwill never be ignored.</p>\n"},"layout":{"!type":"+Ext.enums.Layout|?","!doc":"<p>End Definitions</p>\n"},"offsets":{"!type":"[number]","!doc":"<p>The offsets to use when aligning (see <a href=\"#!/api/Ext.util.Positionable-method-alignTo\" rel=\"Ext.util.Positionable-method-alignTo\" class=\"docClass\">Ext.util.Positionable.alignTo</a> for more details.</p>\n"},"parentEl":{"!type":"string|+HTMLElement|+Ext.Element","!doc":"<p>An element to render to.</p>\n"},"revertInvalid":{"!type":"bool","!doc":"<p>True to automatically revert the field value and cancel the edit when the user completes an edit and the field\nvalidation fails</p>\n"},"shadow":{"!type":"bool|string","!doc":"<p>\"sides\" for sides/bottom only, \"frame\" for 4-way shadow, and \"drop\" for bottom-right shadow.</p>\n"},"swallowKeys":{"!type":"bool","!doc":"<p>Handle the keydown/keypress events so they don't propagate</p>\n"},"updateEl":{"!type":"bool","!doc":"<p>True to update the innerHTML of the bound element when the update completes</p>\n"},"value":{"!type":"?","!doc":"<p>The data value of the underlying field</p>\n"},"afterRender":{"!type":"fn(ct: ?, position: ?) -> !this","!doc":"<p>private</p>\n"},"beforeDestroy":{"!type":"fn() -> !this","!doc":"<p>Invoked before the Component is destroyed.</p>\n"},"cancelEdit":{"!type":"fn(remainVisible?: bool) -> !this","!doc":"<p>Cancels the editing process and hides the editor without persisting any changes.  The field value will be\nreverted to the original starting value.</p>\n"},"completeEdit":{"!type":"fn(remainVisible?: bool) -> !this","!doc":"<p>Ends the editing process, persists the changed value to the underlying field, and hides the editor.</p>\n"},"getValue":{"!type":"fn() -> ?","!doc":"<p>Gets the data value of the editor</p>\n"},"hideEdit":{"!type":"fn(remainVisible: ?) -> !this","!doc":"<p>private</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>The initComponent template method is an important initialization step for a Component. It is intended to be\nimplemented by each subclass of <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> to provide any needed constructor logic. The\ninitComponent method of the class being created is called first, with each initComponent method\nup the hierarchy to <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> being called thereafter. This makes it easy to implement and,\nif needed, override the constructor logic of the Component at any step in the hierarchy.</p>\n\n<p>The initComponent method <strong>must</strong> contain a call to <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a> in order\nto ensure that the parent class' initComponent method is also called.</p>\n\n<p>All config options passed to the constructor are applied to <code>this</code> before initComponent is called,\nso you can simply access them with <code>this.someOption</code>.</p>\n\n<p>The following example demonstrates using a dynamic string for the text of a button at the time of\ninstantiation of the class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('DynamicButtonText', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n\n    initComponent: function() {\n        this.text = new Date();\n        this.renderTo = <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>();\n        this.callParent();\n    }\n});\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function() {\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('DynamicButtonText');\n});\n</code></pre>\n"},"onFieldAutosize":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"onFieldBlur":{"!type":"fn(field: ?, e: ?) -> !this","!doc":"<p>private</p>\n"},"onHide":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"onShow":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"onSpecialKey":{"!type":"fn(field: ?, event: ?) -> !this","!doc":"<p>private</p>\n"},"realign":{"!type":"fn(autoSize?: bool) -> !this","!doc":"<p>Realigns the editor to the bound field based on the current alignment config value.</p>\n"},"setValue":{"!type":"fn(value: ?) -> !this","!doc":"<p>Sets the data value of the editor</p>\n"},"startEdit":{"!type":"fn(el: string|+HTMLElement|+Ext.Element, value?: string) -> !this","!doc":"<p>Starts the editing process and shows the editor.</p>\n"},"beforecomplete":{"!type":"fn(this: +Ext.Editor, value: ?, startValue: ?, eOpts: ?)","!doc":"<p>Fires after a change has been made to the field, but before the change is reflected in the underlying\nfield.  Saving the change to the field can be canceled by returning false from the handler of this event.\nNote that if the value has not changed and ignoreNoChange = true, the editing will still end but this\nevent will not fire since no edit actually occurred.</p>\n"},"beforestartedit":{"!type":"fn(this: +Ext.Editor, boundEl: +Ext.Element, value: ?, eOpts: ?)","!doc":"<p>Fires when editing is initiated, but before the value changes.  Editing can be canceled by returning\nfalse from the handler of this event.</p>\n"},"canceledit":{"!type":"fn(this: +Ext.Editor, value: ?, startValue: ?, eOpts: ?)","!doc":"<p>Fires after editing has been canceled and the editor's value has been reset.</p>\n"},"complete":{"!type":"fn(this: +Ext.Editor, value: ?, startValue: ?, eOpts: ?)","!doc":"<p>Fires after editing is complete and any changed value has been written to the underlying field.</p>\n"},"specialkey":{"!type":"fn(this: +Ext.Editor, field: +Ext.form.field.Field, event: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed.  You can check\n<a href=\"#!/api/Ext.EventObject-method-getKey\" rel=\"Ext.EventObject-method-getKey\" class=\"docClass\">Ext.EventObject.getKey</a> to determine which key was pressed.</p>\n"},"startedit":{"!type":"fn(this: +Ext.Editor, boundEl: +Ext.Element, value: ?, eOpts: ?)","!doc":"<p>Fires when this editor is displayed</p>\n"}}},"ElementLoader":{"!doc":"<p>A class used to load remote content to an Element. Sample usage:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-get\" rel=\"Ext-method-get\" class=\"docClass\">Ext.get</a>('el').load({\n    url: 'myPage.php',\n    scripts: true,\n    params: {\n        id: 1\n    }\n});\n</code></pre>\n\n<p>In general this class will not be instanced directly, rather the <a href=\"#!/api/Ext.dom.Element-method-load\" rel=\"Ext.dom.Element-method-load\" class=\"docClass\">Ext.Element.load</a> method\nwill be used.</p>\n","!type":"fn(config: Ext_ElementLoader_cfg)","prototype":{"!proto":"Ext.Base.prototype","ajaxOptions":{"!type":"?","!doc":"<p>Any additional options to be passed to the request, for example timeout or headers.</p>\n"},"autoLoad":{"!type":"bool|?","!doc":"<p>True to have the loader make a request as soon as it is created.\nThis argument can also be a set of options that will be passed to <a href=\"#!/api/Ext.ElementLoader-method-load\" rel=\"Ext.ElementLoader-method-load\" class=\"docClass\">load</a> is called.</p>\n"},"baseParams":{"!type":"?","!doc":"<p>Params that will be attached to every request. These parameters\nwill not be overridden by any params in the load options.</p>\n"},"callback":{"!type":"fn()","!doc":"<p>A function to be called when a load request finishes.\nWill be called with the following config parameters:</p>\n\n<ul>\n<li>this - The ElementLoader instance.</li>\n<li>success - True if successful request.</li>\n<li>response - The response object.</li>\n<li>options - Ajax options.</li>\n</ul>\n\n"},"failure":{"!type":"fn()","!doc":"<p>A function to be called when a load request fails.\nWill be called with the following config parameters:</p>\n\n<ul>\n<li>this - The ElementLoader instance.</li>\n<li>response - The response object.</li>\n<li>options - Ajax options.</li>\n</ul>\n\n"},"loadMask":{"!type":"bool|string","!doc":"<p>True or a string to show when the element is loading.</p>\n"},"params":{"!type":"?","!doc":"<p>Any params to be attached to the Ajax request. These parameters will\nbe overridden by any params in the load options.</p>\n"},"renderer":{"!type":"fn()","!doc":"<p>A custom function to render the content to the element. The function should\nreturn false if the renderer could not be applied. The passed parameters are:</p>\n\n<ul>\n<li>The loader</li>\n<li>The response</li>\n<li>The active request</li>\n</ul>\n\n"},"scope":{"!type":"?","!doc":"<p>The scope to execute the <a href=\"#!/api/Ext.ElementLoader-cfg-success\" rel=\"Ext.ElementLoader-cfg-success\" class=\"docClass\">success</a> and <a href=\"#!/api/Ext.ElementLoader-cfg-failure\" rel=\"Ext.ElementLoader-cfg-failure\" class=\"docClass\">failure</a> functions in.</p>\n"},"scripts":{"!type":"bool","!doc":"<p>True to parse any inline script tags in the response.</p>\n"},"success":{"!type":"fn()","!doc":"<p>A function to be called when a load request is successful.\nWill be called with the following config parameters:</p>\n\n<ul>\n<li>this - The ElementLoader instance.</li>\n<li>response - The response object.</li>\n<li>options - Ajax options.</li>\n</ul>\n\n"},"target":{"!type":"+HTMLElement|+Ext.Element|string","!doc":"<p>The target element for the loader. It can be the DOM element, the id or an <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a>.</p>\n"},"url":{"!type":"string","!doc":"<p>The url to retrieve the content from.</p>\n"},"isLoader":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated ElementLoader, or subclass thereof.</p>\n"},"abort":{"!type":"fn() -> !this","!doc":"<p>Aborts the active load request</p>\n"},"addMask":{"!type":"fn(mask: bool|?) -> !this","!doc":"<p>Adds the mask on the target</p>\n"},"destroy":{"!type":"fn() -> !this","!doc":"<p>Destroys the loader. Any active requests will be aborted.</p>\n"},"getRenderer":{"!type":"fn(renderer: string|fn()) -> fn()","!doc":"<p>Gets the renderer to use</p>\n"},"getTarget":{"!type":"fn() -> +Ext.Component","!doc":"<p>Returns the target of this loader.</p>\n"},"isAutoRefreshing":{"!type":"fn() -> bool","!doc":"<p>Checks whether the loader is automatically refreshing. See <a href=\"#!/api/Ext.ElementLoader-method-startAutoRefresh\" rel=\"Ext.ElementLoader-method-startAutoRefresh\" class=\"docClass\">startAutoRefresh</a>.</p>\n"},"load":{"!type":"fn(this: +Ext.ElementLoader, response: ?, options: ?, eOpts: ?)","!doc":"<p>Fires after a successful load.</p>\n"},"onComplete":{"!type":"fn(options: ?, success: bool, response: ?) -> !this","!doc":"<p>Parses the response after the request completes</p>\n"},"removeMask":{"!type":"fn() -> !this","!doc":"<p>Removes the mask on the target</p>\n"},"setOptions":{"!type":"fn(active: ?, options: ?) -> !this","!doc":"<p>Sets any additional options on the active request</p>\n"},"setTarget":{"!type":"fn(target: string|+HTMLElement|+Ext.Element) -> !this","!doc":"<p>Sets an <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a> as the target of this loader.\nNote that if the target is changed, any active requests will be aborted.</p>\n"},"startAutoRefresh":{"!type":"fn(interval: number, options?: ?) -> !this","!doc":"<p>Automatically refreshes the content over a specified period.</p>\n"},"stopAutoRefresh":{"!type":"fn() -> !this","!doc":"<p>Clears any auto refresh. See <a href=\"#!/api/Ext.ElementLoader-method-startAutoRefresh\" rel=\"Ext.ElementLoader-method-startAutoRefresh\" class=\"docClass\">startAutoRefresh</a>.</p>\n"},"beforeload":{"!type":"fn(this: +Ext.ElementLoader, options: ?, eOpts: ?)","!doc":"<p>Fires before a load request is made to the server.\nReturning false from an event listener can prevent the load\nfrom occurring.</p>\n"},"exception":{"!type":"fn(this: +Ext.ElementLoader, response: ?, options: ?, eOpts: ?)","!doc":"<p>Fires after an unsuccessful load.</p>\n"}},"Renderer":{"!type":"?"}},"Error":{"!doc":"<p>A wrapper class for the native JavaScript Error object that adds a few useful capabilities for handling\nerrors in an Ext application. When you use <a href=\"#!/api/Ext.Error\" rel=\"Ext.Error\" class=\"docClass\">Ext.Error</a> to <a href=\"#!/api/Ext.Error-static-method-raise\" rel=\"Ext.Error-static-method-raise\" class=\"docClass\">raise</a> an error from within any class that\nuses the Ext 4 class system, the Error class can automatically add the source class and method from which\nthe error was raised. It also includes logic to automatically log the error to the console, if available,\nwith additional metadata about the error. In all cases, the error will always be thrown at the end so that\nexecution will halt.</p>\n\n<p><a href=\"#!/api/Ext.Error\" rel=\"Ext.Error\" class=\"docClass\">Ext.Error</a> also offers a global error <a href=\"#!/api/Ext.Error-static-method-handle\" rel=\"Ext.Error-static-method-handle\" class=\"docClass\">handling</a> method that can be overridden in order to\nhandle application-wide errors in a single spot. You can optionally <a href=\"#!/api/Ext.Error-static-property-ignore\" rel=\"Ext.Error-static-property-ignore\" class=\"docClass\">ignore</a> errors altogether,\nalthough in a real application it's usually a better idea to override the handling function and perform\nlogging or some other method of reporting the errors in a way that is meaningful to the application.</p>\n\n<p>At its simplest you can simply raise an error as a simple string from within any code:</p>\n\n<p>Example usage:</p>\n\n<pre><code><a href=\"#!/api/Ext.Error-static-method-raise\" rel=\"Ext.Error-static-method-raise\" class=\"docClass\">Ext.Error.raise</a>('Something bad happened!');\n</code></pre>\n\n<p>If raised from plain JavaScript code, the error will be logged to the console (if available) and the message\ndisplayed. In most cases however you'll be raising errors from within a class, and it may often be useful to add\nadditional metadata about the error being raised.  The <a href=\"#!/api/Ext.Error-static-method-raise\" rel=\"Ext.Error-static-method-raise\" class=\"docClass\">raise</a> method can also take a config object.\nIn this form the <code>msg</code> attribute becomes the error description, and any other data added to the config gets\nadded to the error object and, if the console is available, logged to the console for inspection.</p>\n\n<p>Example usage:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Ext.Foo', {\n    doSomething: function(option){\n        if (someCondition === false) {\n            <a href=\"#!/api/Ext.Error-static-method-raise\" rel=\"Ext.Error-static-method-raise\" class=\"docClass\">Ext.Error.raise</a>({\n                msg: 'You cannot do that!',\n                option: option,   // whatever was passed into the method\n                'error code': 100 // other arbitrary info\n            });\n        }\n    }\n});\n</code></pre>\n\n<p>If a console is available (that supports the <code>console.dir</code> function) you'll see console output like:</p>\n\n<pre><code>An error was raised with the following data:\noption:         Object { foo: \"bar\"}\n    foo:        \"bar\"\nerror code:     100\nmsg:            \"You cannot do that!\"\nsourceClass:   \"Ext.Foo\"\nsourceMethod:  \"doSomething\"\n\nuncaught exception: You cannot do that!\n</code></pre>\n\n<p>As you can see, the error will report exactly where it was raised and will include as much information as the\nraising code can usefully provide.</p>\n\n<p>If you want to handle all application errors globally you can simply override the static <a href=\"#!/api/Ext.Error-static-method-handle\" rel=\"Ext.Error-static-method-handle\" class=\"docClass\">handle</a> method\nand provide whatever handling logic you need. If the method returns true then the error is considered handled\nand will not be thrown to the browser. If anything but true is returned then the error will be thrown normally.</p>\n\n<p>Example usage:</p>\n\n<pre><code><a href=\"#!/api/Ext.Error-static-method-handle\" rel=\"Ext.Error-static-method-handle\" class=\"docClass\">Ext.Error.handle</a> = function(err) {\n    if (err.someProperty == 'NotReallyAnError') {\n        // maybe log something to the application here if applicable\n        return true;\n    }\n    // any non-true return value (including none) will cause the error to be thrown\n}\n</code></pre>\n","!type":"fn(config: string|Ext_Error_cfg)","prototype":{"!proto":"Error.prototype","name":{"!type":"string","!doc":"<p>This is the standard property that is the name of the constructor.</p>\n"},"statics":{"!type":"?"},"toString":{"!type":"fn() -> string","!doc":"<p>Provides a custom string representation of the error object. This is an override of the base JavaScript\n<code>Object.toString</code> method, which is useful so that when logged to the browser console, an error object will\nbe displayed with a useful message instead of <code>[object Object]</code>, the default <code>toString</code> result.</p>\n\n<p>The default implementation will include the error message along with the raising class and method, if available,\nbut this can be overridden with a custom implementation either at the prototype level (for all errors) or on\na particular error instance, if you want to provide a custom description that will show up in the console.</p>\n"}},"ignore":{"!type":"bool","!doc":"<p>Static flag that can be used to globally disable error reporting to the browser if set to true\n(defaults to false). Note that if you ignore Ext errors it's likely that some other code may fail\nand throw a native JavaScript error thereafter, so use with caution. In most cases it will probably\nbe preferable to supply a custom error <a href=\"#!/api/Ext.Error-static-method-handle\" rel=\"Ext.Error-static-method-handle\" class=\"docClass\">handling</a> function instead.</p>\n\n<p>Example usage:</p>\n\n<pre><code><a href=\"#!/api/Ext.Error-static-property-ignore\" rel=\"Ext.Error-static-property-ignore\" class=\"docClass\">Ext.Error.ignore</a> = true;\n</code></pre>\n"},"notify":{"!type":"bool","!doc":"<p>Static flag that can be used to globally control error notification to the user. Unlike\nEx.Error.ignore, this does not effect exceptions. They are still thrown. This value can be\nset to false to disable the alert notification (default is true for IE6 and IE7).</p>\n\n<p>Only the first error will generate an alert. Internally this flag is set to false when the\nfirst error occurs prior to displaying the alert.</p>\n\n<p>This flag is not used in a release build.</p>\n\n<p>Example usage:</p>\n\n<pre><code><a href=\"#!/api/Ext.Error-static-property-notify\" rel=\"Ext.Error-static-property-notify\" class=\"docClass\">Ext.Error.notify</a> = false;\n</code></pre>\n"},"handle":{"!type":"fn(err: +Ext.Error) -> !this","!doc":"<p>Globally handle any Ext errors that may be raised, optionally providing custom logic to\nhandle different errors individually. Return true from the function to bypass throwing the\nerror to the browser, otherwise the error will be thrown and execution will halt.</p>\n\n<p>Example usage:</p>\n\n<pre><code><a href=\"#!/api/Ext.Error-static-method-handle\" rel=\"Ext.Error-static-method-handle\" class=\"docClass\">Ext.Error.handle</a> = function(err) {\n    if (err.someProperty == 'NotReallyAnError') {\n        // maybe log something to the application here if applicable\n        return true;\n    }\n    // any non-true return value (including none) will cause the error to be thrown\n}\n</code></pre>\n"},"raise":{"!type":"fn(err: string|?) -> !this","!doc":"<p>Raise an error that can include additional data and supports automatic console logging if available.\nYou can pass a string error message or an object with the <code>msg</code> attribute which will be used as the\nerror message. The object can contain any other name-value attributes (or objects) to be logged\nalong with the error.</p>\n\n<p>Note that after displaying the error message a JavaScript error will ultimately be thrown so that\nexecution will halt.</p>\n\n<p>Example usage:</p>\n\n<pre><code><a href=\"#!/api/Ext.Error-static-method-raise\" rel=\"Ext.Error-static-method-raise\" class=\"docClass\">Ext.Error.raise</a>('A simple string error message');\n\n// or...\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Ext.Foo', {\n    doSomething: function(option){\n        if (someCondition === false) {\n            <a href=\"#!/api/Ext.Error-static-method-raise\" rel=\"Ext.Error-static-method-raise\" class=\"docClass\">Ext.Error.raise</a>({\n                msg: 'You cannot do that!',\n                option: option,   // whatever was passed into the method\n                'error code': 100 // other arbitrary info\n            });\n        }\n    }\n});\n</code></pre>\n"}},"EventManager":{"!doc":"<p>Registers event handlers that want to receive a normalized EventObject instead of the standard browser event and provides\nseveral useful events directly.</p>\n\n<p>See <a href=\"#!/api/Ext.EventObject\" rel=\"Ext.EventObject\" class=\"docClass\">Ext.EventObject</a> for more details on normalized event objects.</p>\n","deferReadyEvent":{"!type":"number","!doc":"<p>Additionally, allow the 'DOM' listener thread to complete (usually desirable with mobWebkit, Gecko)\nbefore firing the entire onReady chain (high stack load on Loader) by specifying a delay value.\nDefaults to 1ms.</p>\n"},"hasBoundOnReady":{"!type":"bool","!doc":"<p>Check if we have bound our global onReady listener</p>\n"},"hasFiredReady":{"!type":"bool","!doc":"<p>Check if fireDocReady has been called</p>\n"},"idleEvent":{"!type":"?","!doc":"<p>Fires when an event handler finishes its run, just before returning to browser control.</p>\n\n<p>This includes DOM event handlers, Ajax (including JSONP) event handlers, and <a href=\"#!/api/Ext.util.TaskRunner\" rel=\"Ext.util.TaskRunner\" class=\"docClass\">TaskRunners</a></p>\n\n<p>This can be useful for performing cleanup, or update tasks which need to happen only\nafter all code in an event handler has been run, but which should not be executed in a timer\ndue to the intervening browser reflow/repaint which would take place.</p>\n"},"propRe":{"!type":"+RegExp","!doc":"<p>Options to parse for the 4th argument to addListener.</p>\n"},"readyEvent":{"!type":"?","!doc":"<p>Holds references to any onReady functions</p>\n"},"scrollTimeout":{"!type":"?","!doc":"<p>Timer for doScroll polling</p>\n"},"stoppedMouseDownEvent":{"!type":"?","!doc":"<p>Contains a list of all document mouse downs, so we can ensure they fire even when stopEvent is called.</p>\n"},"useKeyDown":{"!type":"?","!doc":"<p>note 1: IE fires ONLY the keydown event on specialkey autorepeat\nnote 2: Safari &lt; 3.1, Gecko (Mac/Linux) &amp; Opera fire only the keypress event on specialkey autorepeat\n(research done by Jan Wolter at http://unixpapa.com/js/key.html)</p>\n"},"addListener":{"!type":"fn(el: string|+Ext.Element|+HTMLElement|+Window, eventName: string, handler: string|fn(), scope?: ?, options?: ?) -> !this","!doc":"<p>Appends an event handler to an element.  The shorthand version <a href=\"#!/api/Ext.EventManager-method-on\" rel=\"Ext.EventManager-method-on\" class=\"docClass\">on</a> is equivalent.\nTypically you will use <a href=\"#!/api/Ext.dom.Element-method-addListener\" rel=\"Ext.dom.Element-method-addListener\" class=\"docClass\">Ext.Element.addListener</a> directly on an Element in favor of\ncalling this version.</p>\n\n<p><a href=\"#!/api/Ext.EventManager-method-on\" rel=\"Ext.EventManager-method-on\" class=\"docClass\">on</a> is an alias for <a href=\"#!/api/Ext.EventManager-method-addListener\" rel=\"Ext.EventManager-method-addListener\" class=\"docClass\">addListener</a>.</p>\n"},"bindReadyEvent":{"!type":"fn() -> !this","!doc":"<p>Binds the appropriate browser event for checking if the DOM has loaded.</p>\n"},"cloneEventListenerCache":{"!type":"fn(element: +HTMLElement, eventName: ?) -> [?]","!doc":"<p>Clones the event cache for a particular element for a particular event</p>\n"},"contains":{"!type":"fn(event: ?) -> !this","!doc":"<p>Checks whether the event's relatedTarget is contained inside (or <b>is</b>) the element.</p>\n"},"createListenerWrap":{"!type":"fn(dom: +HTMLElement, ename: string, fn: fn(), scope: ?, options: ?) -> fn()","!doc":"<p>Create the wrapper function for the event</p>\n"},"fireDocReady":{"!type":"fn() -> !this","!doc":"<p>We know the document is loaded, so trigger any onReady events.</p>\n"},"fireReadyEvent":{"!type":"fn() -> !this","!doc":"<p>Fires the ready event</p>\n"},"fireResize":{"!type":"fn() -> !this","!doc":"<p>Fire the resize event.</p>\n"},"fireUnload":{"!type":"fn() -> !this","!doc":"<p>Fires the unload event for items bound with onWindowUnload</p>\n"},"getEventCache":{"!type":"fn(element: +HTMLElement) -> ?","!doc":"<p>Gets the event cache object for a particular element</p>\n"},"getEventListenerCache":{"!type":"fn(element: +HTMLElement, eventName: ?) -> [?]","!doc":"<p>Get the event cache for a particular element for a particular event</p>\n"},"getId":{"!type":"fn(element: +HTMLElement|+Ext.Element) -> string","!doc":"<p>Get the id of the element. If one has not been assigned, automatically assign it.</p>\n"},"getKeyEvent":{"!type":"fn() -> string","!doc":"<p>Indicates which event to use for getting key presses.</p>\n"},"getPageX":{"!type":"fn(event: ?) -> number","!doc":"<p>Gets the x coordinate from the event</p>\n"},"getPageXY":{"!type":"fn(event: ?) -> [number]","!doc":"<p>Gets the x &amp; y coordinate from the event</p>\n"},"getPageY":{"!type":"fn(event: ?) -> number","!doc":"<p>Gets the y coordinate from the event</p>\n"},"getRelatedTarget":{"!type":"fn(event: ?) -> +HTMLElement","!doc":"<p>Gets the related target from the event.</p>\n"},"getTarget":{"!type":"fn(event: ?) -> +HTMLElement","!doc":"<p>Gets the target of the event.</p>\n"},"isReadyPaused":{"!type":"fn() -> !this","!doc":"<p>detects whether the EventManager has been placed in a paused state for synchronization\nwith external debugging / perf tools (PageAnalyzer)</p>\n"},"normalizeEvent":{"!type":"fn(eventName: ?, fn: ?) -> ?","!doc":"<p>Normalize cross browser event differences</p>\n"},"on":{"!type":"fn(el: string|+Ext.Element|+HTMLElement|+Window, eventName: string, handler: string|fn(), scope?: ?, options?: ?) -> !this","!doc":"<p>Appends an event handler to an element.  The shorthand version <a href=\"#!/api/Ext.EventManager-method-on\" rel=\"Ext.EventManager-method-on\" class=\"docClass\">on</a> is equivalent.\nTypically you will use <a href=\"#!/api/Ext.dom.Element-method-addListener\" rel=\"Ext.dom.Element-method-addListener\" class=\"docClass\">Ext.Element.addListener</a> directly on an Element in favor of\ncalling this version.</p>\n\n<p><a href=\"#!/api/Ext.EventManager-method-on\" rel=\"Ext.EventManager-method-on\" class=\"docClass\">on</a> is an alias for <a href=\"#!/api/Ext.EventManager-method-addListener\" rel=\"Ext.EventManager-method-addListener\" class=\"docClass\">addListener</a>.</p>\n"},"onDocumentReady":{"!type":"fn(fn: fn(), scope?: ?, options?: ?) -> !this","!doc":"<p>Adds a listener to be notified when the document is ready (before onload and before images are loaded).</p>\n\n<p><a href=\"#!/api/Ext-method-onDocumentReady\" rel=\"Ext-method-onDocumentReady\" class=\"docClass\">Ext.onDocumentReady</a> is an alias for <a href=\"#!/api/Ext.EventManager-method-onDocumentReady\" rel=\"Ext.EventManager-method-onDocumentReady\" class=\"docClass\">onDocumentReady</a>.</p>\n"},"onWindowResize":{"!type":"fn(fn: fn(), scope: ?, options?: bool) -> !this","!doc":"<p>Adds a listener to be notified when the browser window is resized and provides resize event buffering (100 milliseconds),\npasses new viewport width and height to handlers.</p>\n"},"onWindowUnload":{"!type":"fn(fn: fn(), scope: ?, options: bool) -> !this","!doc":"<p>Adds a listener to be notified when the browser window is unloaded.</p>\n"},"pollScroll":{"!type":"fn() -> !this","!doc":"<p>This strategy has minimal benefits for Sencha solutions that build themselves (ie. minimal initial page markup).\nHowever, progressively-enhanced pages (with image content and/or embedded frames) will benefit the most from it.\nBrowser timer resolution is too poor to ensure a doScroll check more than once on a page loaded with minimal\nassets (the readystatechange event 'complete' usually beats the doScroll timer on a 'lightly-loaded' initial document).</p>\n"},"prepareListenerConfig":{"!type":"fn(element: ?, event: ?, isRemove: ?) -> !this","!doc":"<p>Convert a \"config style\" listener into a set of flat arguments so they can be passed to addListener</p>\n"},"preventDefault":{"!type":"fn(event: +Event) -> !this","!doc":"<p>Prevents the browsers default handling of the event.</p>\n"},"purgeElement":{"!type":"fn(el: string|+Ext.Element|+HTMLElement|+Window, eventName?: string) -> !this","!doc":"<p>Recursively removes all previous added listeners from an element and its children. Typically you will use <a href=\"#!/api/Ext.dom.Element-method-purgeAllListeners\" rel=\"Ext.dom.Element-method-purgeAllListeners\" class=\"docClass\">Ext.Element.purgeAllListeners</a>\ndirectly on an Element in favor of calling this version.</p>\n"},"removeAll":{"!type":"fn(el: string|+Ext.Element|+HTMLElement|+Window) -> !this","!doc":"<p>Removes all event handers from an element.  Typically you will use <a href=\"#!/api/Ext.dom.Element-method-removeAllListeners\" rel=\"Ext.dom.Element-method-removeAllListeners\" class=\"docClass\">Ext.Element.removeAllListeners</a>\ndirectly on an Element in favor of calling this version.</p>\n"},"removeListener":{"!type":"fn(el: string|+Ext.Element|+HTMLElement|+Window, eventName: string, fn: fn(), scope: ?) -> !this","!doc":"<p>Removes an event handler from an element.  The shorthand version <a href=\"#!/api/Ext.EventManager-method-un\" rel=\"Ext.EventManager-method-un\" class=\"docClass\">un</a> is equivalent.  Typically\nyou will use <a href=\"#!/api/Ext.dom.Element-method-removeListener\" rel=\"Ext.dom.Element-method-removeListener\" class=\"docClass\">Ext.Element.removeListener</a> directly on an Element in favor of calling this version.</p>\n\n<p><a href=\"#!/api/Ext.EventManager-method-on\" rel=\"Ext.EventManager-method-on\" class=\"docClass\">on</a> is an alias for <a href=\"#!/api/Ext.EventManager-method-addListener\" rel=\"Ext.EventManager-method-addListener\" class=\"docClass\">addListener</a>.</p>\n"},"removeResizeListener":{"!type":"fn(fn: fn(), scope: ?) -> !this","!doc":"<p>Removes the passed window resize listener.</p>\n"},"removeUnloadListener":{"!type":"fn(fn: fn(), scope: ?) -> !this","!doc":"<p>Removes the passed window unload listener.</p>\n"},"resolveTextNode":{"!type":"fn(node: +HTMLElement) -> +HTMLElement","!doc":"<p>Resolve any text nodes accounting for browser differences.</p>\n"},"stopEvent":{"!type":"fn(event: +Event) -> !this","!doc":"<p>Stop the event (preventDefault and stopPropagation)</p>\n"},"stopPropagation":{"!type":"fn(event: +Event) -> !this","!doc":"<p>Cancels bubbling of the event.</p>\n"},"un":{"!type":"fn(el: string|+Ext.Element|+HTMLElement|+Window, eventName: string, fn: fn(), scope: ?) -> !this","!doc":"<p>Removes an event handler from an element.  The shorthand version <a href=\"#!/api/Ext.EventManager-method-un\" rel=\"Ext.EventManager-method-un\" class=\"docClass\">un</a> is equivalent.  Typically\nyou will use <a href=\"#!/api/Ext.dom.Element-method-removeListener\" rel=\"Ext.dom.Element-method-removeListener\" class=\"docClass\">Ext.Element.removeListener</a> directly on an Element in favor of calling this version.</p>\n\n<p><a href=\"#!/api/Ext.EventManager-method-on\" rel=\"Ext.EventManager-method-on\" class=\"docClass\">on</a> is an alias for <a href=\"#!/api/Ext.EventManager-method-addListener\" rel=\"Ext.EventManager-method-addListener\" class=\"docClass\">addListener</a>.</p>\n"}},"EventObject":{"!doc":"<p>Just as <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a> wraps around a native DOM node, <a href=\"#!/api/Ext.EventObject\" rel=\"Ext.EventObject\" class=\"docClass\">Ext.EventObject</a>\nwraps the browser's native event-object normalizing cross-browser differences,\nsuch as which mouse button is clicked, keys pressed, mechanisms to stop\nevent-propagation along with a method to prevent default actions from taking place.</p>\n\n<p>For example:</p>\n\n<pre><code>function handleClick(e, t){ // e is not a standard event object, it is a <a href=\"#!/api/Ext.EventObject\" rel=\"Ext.EventObject\" class=\"docClass\">Ext.EventObject</a>\n    e.preventDefault();\n    var target = e.getTarget(); // same as t (the target HTMLElement)\n    ...\n}\n\nvar myDiv = <a href=\"#!/api/Ext-method-get\" rel=\"Ext-method-get\" class=\"docClass\">Ext.get</a>(\"myDiv\");  // get reference to an <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a>\nmyDiv.on(         // 'on' is shorthand for addListener\n    \"click\",      // perform an action on click of myDiv\n    handleClick   // reference to the action handler\n);\n\n// other methods to do the same:\n<a href=\"#!/api/Ext.EventManager-method-on\" rel=\"Ext.EventManager-method-on\" class=\"docClass\">Ext.EventManager.on</a>(\"myDiv\", 'click', handleClick);\n<a href=\"#!/api/Ext.EventManager-method-addListener\" rel=\"Ext.EventManager-method-addListener\" class=\"docClass\">Ext.EventManager.addListener</a>(\"myDiv\", 'click', handleClick);\n</code></pre>\n","A":{"!type":"number","!doc":"<p>Key constant</p>\n"},"ALT":{"!type":"number","!doc":"<p>Key constant</p>\n"},"B":{"!type":"number","!doc":"<p>Key constant</p>\n"},"BACKSPACE":{"!type":"number","!doc":"<p>Key constant</p>\n"},"C":{"!type":"number","!doc":"<p>Key constant</p>\n"},"CAPS_LOCK":{"!type":"number","!doc":"<p>Key constant</p>\n"},"CONTEXT_MENU":{"!type":"number","!doc":"<p>Key constant</p>\n"},"CTRL":{"!type":"number","!doc":"<p>Key constant</p>\n"},"D":{"!type":"number","!doc":"<p>Key constant</p>\n"},"DELETE":{"!type":"number","!doc":"<p>Key constant</p>\n"},"DOWN":{"!type":"number","!doc":"<p>Key constant</p>\n"},"E":{"!type":"number","!doc":"<p>Key constant</p>\n"},"EIGHT":{"!type":"number","!doc":"<p>Key constant</p>\n"},"END":{"!type":"number","!doc":"<p>Key constant</p>\n"},"ENTER":{"!type":"number","!doc":"<p>Key constant</p>\n"},"ESC":{"!type":"number","!doc":"<p>Key constant</p>\n"},"F":{"!type":"number","!doc":"<p>Key constant</p>\n"},"F1":{"!type":"number","!doc":"<p>Key constant</p>\n"},"F10":{"!type":"number","!doc":"<p>Key constant</p>\n"},"F11":{"!type":"number","!doc":"<p>Key constant</p>\n"},"F12":{"!type":"number","!doc":"<p>Key constant</p>\n"},"F2":{"!type":"number","!doc":"<p>Key constant</p>\n"},"F3":{"!type":"number","!doc":"<p>Key constant</p>\n"},"F4":{"!type":"number","!doc":"<p>Key constant</p>\n"},"F5":{"!type":"number","!doc":"<p>Key constant</p>\n"},"F6":{"!type":"number","!doc":"<p>Key constant</p>\n"},"F7":{"!type":"number","!doc":"<p>Key constant</p>\n"},"F8":{"!type":"number","!doc":"<p>Key constant</p>\n"},"F9":{"!type":"number","!doc":"<p>Key constant</p>\n"},"FIVE":{"!type":"number","!doc":"<p>Key constant</p>\n"},"FOUR":{"!type":"number","!doc":"<p>Key constant</p>\n"},"G":{"!type":"number","!doc":"<p>Key constant</p>\n"},"H":{"!type":"number","!doc":"<p>Key constant</p>\n"},"HOME":{"!type":"number","!doc":"<p>Key constant</p>\n"},"I":{"!type":"number","!doc":"<p>Key constant</p>\n"},"INSERT":{"!type":"number","!doc":"<p>Key constant</p>\n"},"J":{"!type":"number","!doc":"<p>Key constant</p>\n"},"K":{"!type":"number","!doc":"<p>Key constant</p>\n"},"L":{"!type":"number","!doc":"<p>Key constant</p>\n"},"LEFT":{"!type":"number","!doc":"<p>Key constant</p>\n"},"M":{"!type":"number","!doc":"<p>Key constant</p>\n"},"N":{"!type":"number","!doc":"<p>Key constant</p>\n"},"NINE":{"!type":"number","!doc":"<p>Key constant</p>\n"},"NUM_CENTER":{"!type":"number","!doc":"<p>Key constant</p>\n"},"NUM_DIVISION":{"!type":"number","!doc":"<p>Key constant</p>\n"},"NUM_EIGHT":{"!type":"number","!doc":"<p>Key constant</p>\n"},"NUM_FIVE":{"!type":"number","!doc":"<p>Key constant</p>\n"},"NUM_FOUR":{"!type":"number","!doc":"<p>Key constant</p>\n"},"NUM_MINUS":{"!type":"number","!doc":"<p>Key constant</p>\n"},"NUM_MULTIPLY":{"!type":"number","!doc":"<p>Key constant</p>\n"},"NUM_NINE":{"!type":"number","!doc":"<p>Key constant</p>\n"},"NUM_ONE":{"!type":"number","!doc":"<p>Key constant</p>\n"},"NUM_PERIOD":{"!type":"number","!doc":"<p>Key constant</p>\n"},"NUM_PLUS":{"!type":"number","!doc":"<p>Key constant</p>\n"},"NUM_SEVEN":{"!type":"number","!doc":"<p>Key constant</p>\n"},"NUM_SIX":{"!type":"number","!doc":"<p>Key constant</p>\n"},"NUM_THREE":{"!type":"number","!doc":"<p>Key constant</p>\n"},"NUM_TWO":{"!type":"number","!doc":"<p>Key constant</p>\n"},"NUM_ZERO":{"!type":"number","!doc":"<p>Key constant</p>\n"},"O":{"!type":"number","!doc":"<p>Key constant</p>\n"},"ONE":{"!type":"number","!doc":"<p>Key constant</p>\n"},"P":{"!type":"number","!doc":"<p>Key constant</p>\n"},"PAGE_DOWN":{"!type":"number","!doc":"<p>Key constant</p>\n"},"PAGE_UP":{"!type":"number","!doc":"<p>Key constant</p>\n"},"PAUSE":{"!type":"number","!doc":"<p>Key constant</p>\n"},"PRINT_SCREEN":{"!type":"number","!doc":"<p>Key constant</p>\n"},"Q":{"!type":"number","!doc":"<p>Key constant</p>\n"},"R":{"!type":"number","!doc":"<p>Key constant</p>\n"},"RETURN":{"!type":"number","!doc":"<p>Key constant</p>\n"},"RIGHT":{"!type":"number","!doc":"<p>Key constant</p>\n"},"S":{"!type":"number","!doc":"<p>Key constant</p>\n"},"SEVEN":{"!type":"number","!doc":"<p>Key constant</p>\n"},"SHIFT":{"!type":"number","!doc":"<p>Key constant</p>\n"},"SIX":{"!type":"number","!doc":"<p>Key constant</p>\n"},"SPACE":{"!type":"number","!doc":"<p>Key constant</p>\n"},"T":{"!type":"number","!doc":"<p>Key constant</p>\n"},"TAB":{"!type":"number","!doc":"<p>Key constant</p>\n"},"THREE":{"!type":"number","!doc":"<p>Key constant</p>\n"},"TWO":{"!type":"number","!doc":"<p>Key constant</p>\n"},"U":{"!type":"number","!doc":"<p>Key constant</p>\n"},"UP":{"!type":"number","!doc":"<p>Key constant</p>\n"},"V":{"!type":"number","!doc":"<p>Key constant</p>\n"},"W":{"!type":"number","!doc":"<p>Key constant</p>\n"},"WHEEL_SCALE":{"!type":"number","!doc":"<p>The mouse wheel delta scaling factor. This value depends on browser version and OS and\nattempts to produce a similar scrolling experience across all platforms and browsers.</p>\n\n<p>To change this value:</p>\n\n<pre><code> Ext.EventObjectImpl.prototype.WHEEL_SCALE = 72;\n</code></pre>\n"},"X":{"!type":"number","!doc":"<p>Key constant</p>\n"},"Y":{"!type":"number","!doc":"<p>Key constant</p>\n"},"Z":{"!type":"number","!doc":"<p>Key constant</p>\n"},"ZERO":{"!type":"number","!doc":"<p>Key constant</p>\n"},"altKey":{"!type":"bool","!doc":"<p>True if the alt key was down during the event.</p>\n"},"btnMap":{"!type":"?","!doc":"<p>normalize button clicks, don't see any way to feature detect this.</p>\n"},"clickRe":{"!type":"+RegExp","!doc":"<p>Simple click regex</p>\n"},"ctrlKey":{"!type":"bool","!doc":"<p>True if the control key was down during the event.\nIn Mac this will also be true when meta key was down.</p>\n"},"safariKeys":{"!type":"?","!doc":"<p>safari keypress events for special keys return bad keycodes</p>\n"},"shiftKey":{"!type":"bool","!doc":"<p>True if the shift key was down during the event.</p>\n"},"correctWheelDelta":{"!type":"fn(delta: number) -> !this","!doc":"<p>Correctly scales a given wheel delta.</p>\n"},"getCharCode":{"!type":"fn() -> number","!doc":"<p>Gets the character code for the event.</p>\n"},"getKey":{"!type":"fn() -> number","!doc":"<p>Returns a normalized keyCode for the event.</p>\n"},"getPageX":{"!type":"fn() -> number","!doc":"<p>Gets the x coordinate of the event.</p>\n"},"getPageY":{"!type":"fn() -> number","!doc":"<p>Gets the y coordinate of the event.</p>\n"},"getPoint":{"!type":"fn() -> +Ext.util.Point","!doc":"<p>Returns a point object that consists of the object coordinates.</p>\n"},"getRelatedTarget":{"!type":"fn(selector?: string, maxDepth?: number|+HTMLElement, returnEl?: bool) -> +HTMLElement","!doc":"<p>Gets the related target.</p>\n"},"getTarget":{"!type":"fn(selector?: string, maxDepth?: number|+HTMLElement, returnEl?: bool) -> +HTMLElement","!doc":"<p>Gets the target for the event.</p>\n"},"getWheelDelta":{"!type":"fn() -> number","!doc":"<p>Normalizes mouse wheel y-delta across browsers. To get x-delta information, use\n<a href=\"#!/api/Ext.EventObject-method-getWheelDeltas\" rel=\"Ext.EventObject-method-getWheelDeltas\" class=\"docClass\">getWheelDeltas</a> instead.</p>\n"},"getWheelDeltas":{"!type":"fn() -> ?","!doc":"<p>Returns the mouse wheel deltas for this event.</p>\n"},"getX":{"!type":"fn() -> number","!doc":"<p>Gets the x coordinate of the event.</p>\n"},"getXY":{"!type":"fn() -> [number]","!doc":"<p>Gets the page coordinates of the event.</p>\n"},"getY":{"!type":"fn() -> number","!doc":"<p>Gets the y coordinate of the event.</p>\n"},"hasModifier":{"!type":"fn() -> bool","!doc":"<p>Returns true if the control, meta, shift or alt key was pressed during this event.</p>\n"},"injectEvent":{"!type":"fn(target?: +Ext.Element|+HTMLElement) -> !this","!doc":"<p>Injects a DOM event using the data in this object and (optionally) a new target.\nThis is a low-level technique and not likely to be used by application code. The\ncurrently supported event types are:</p>\n\n<p><b>HTMLEvents</b></p>\n\n\n<ul>\n<li>load</li>\n<li>unload</li>\n<li>select</li>\n<li>change</li>\n<li>submit</li>\n<li>reset</li>\n<li>resize</li>\n<li>scroll</li>\n</ul>\n\n\n<p><b>MouseEvents</b></p>\n\n\n<ul>\n<li>click</li>\n<li>dblclick</li>\n<li>mousedown</li>\n<li>mouseup</li>\n<li>mouseover</li>\n<li>mousemove</li>\n<li>mouseout</li>\n</ul>\n\n\n<p><b>UIEvents</b></p>\n\n\n<ul>\n<li>focusin</li>\n<li>focusout</li>\n<li>activate</li>\n<li>focus</li>\n<li>blur</li>\n</ul>\n\n"},"isNavKeyPress":{"!type":"fn() -> bool","!doc":"<p>Checks if the key pressed was a \"navigation\" key</p>\n"},"isSpecialKey":{"!type":"fn() -> bool","!doc":"<p>Checks if the key pressed was a \"special\" key</p>\n"},"normalizeKey":{"!type":"fn(key: number) -> number","!doc":"<p>Normalize key codes across browsers</p>\n"},"preventDefault":{"!type":"fn() -> !this","!doc":"<p>Prevents the browsers default handling of the event.</p>\n"},"setEvent":{"!type":"fn(event: ?, freezeEvent: ?) -> !this"},"stopEvent":{"!type":"fn() -> !this","!doc":"<p>Stop the event (preventDefault and stopPropagation)</p>\n"},"stopPropagation":{"!type":"fn() -> !this","!doc":"<p>Cancels bubbling of the event.</p>\n"},"within":{"!type":"fn(el: string|+HTMLElement|+Ext.Element, related?: bool, allowEl?: bool) -> bool","!doc":"<p>Returns true if the target of this event is a child of el.  Unless the allowEl parameter is set, it will return false if if the target is el.\nExample usage:</p>\n\n<pre><code>// Handle click on any child of an element\n<a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>().on('click', function(e){\n    if(e.within('some-el')){\n        alert('Clicked on a child of some-el!');\n    }\n});\n\n// Handle click directly on an element, ignoring clicks on child nodes\n<a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>().on('click', function(e,t){\n    if((t.id == 'some-el') && !e.within(t, true)){\n        alert('Clicked directly on some-el!');\n    }\n});\n</code></pre>\n\n"}},"FocusManager":{"!doc":"<p>The FocusManager is responsible for globally:</p>\n\n<ol>\n<li>Managing component focus</li>\n<li>Providing basic keyboard navigation</li>\n<li>(optional) Provide a visual cue for focused components, in the form of a focus ring/frame.</li>\n</ol>\n\n\n<p>To activate the FocusManager, simply call <code><a href=\"#!/api/Ext.FocusManager-event-enable\" rel=\"Ext.FocusManager-event-enable\" class=\"docClass\">Ext.FocusManager.enable</a>();</code>. In turn, you may\ndeactivate the FocusManager by subsequently calling <code><a href=\"#!/api/Ext.FocusManager-event-disable\" rel=\"Ext.FocusManager-event-disable\" class=\"docClass\">Ext.FocusManager.disable</a>();</code>.  The\nFocusManager is disabled by default.</p>\n\n<p>To enable the optional focus frame, pass <code>true</code> or <code>{focusFrame: true}</code> to <a href=\"#!/api/Ext.FocusManager-method-enable\" rel=\"Ext.FocusManager-method-enable\" class=\"docClass\">enable</a>.</p>\n\n<p>Another feature of the FocusManager is to provide basic keyboard focus navigation scoped to any <a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>\nthat would like to have navigation between its child <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>'s.</p>\n","!type":"fn(config: Ext_FocusManager_cfg)","prototype":{"!proto":"Ext.Base.prototype"},"enabled":{"!type":"bool","!doc":"<p>Whether or not the FocusManager is currently enabled</p>\n"},"focusFrameCls":{"!type":"string"},"focusedCmp":{"!type":"+Ext.Component","!doc":"<p>The currently focused component.</p>\n"},"whitelist":{"!type":"[string]","!doc":"<p>A list of xtypes that should ignore certain navigation input keys and\nallow for the default browser event/behavior. These input keys include:</p>\n\n<ol>\n<li>Backspace</li>\n<li>Delete</li>\n<li>Left</li>\n<li>Right</li>\n<li>Up</li>\n<li>Down</li>\n</ol>\n\n\n<p>The FocusManager will not attempt to navigate when a component is an xtype (or descendents thereof)\nthat belongs to this whitelist. E.g., an <a href=\"#!/api/Ext.form.field.Text\" rel=\"Ext.form.field.Text\" class=\"docClass\">Ext.form.field.Text</a> should allow\nthe user to move the input cursor left and right, and to delete characters, etc.</p>\n"},"addXTypeToWhitelist":{"!type":"fn(xtype: string|[string]) -> !this","!doc":"<p>Adds the specified xtype to the <a href=\"#!/api/Ext.FocusManager-property-whitelist\" rel=\"Ext.FocusManager-property-whitelist\" class=\"docClass\">whitelist</a>.</p>\n"},"clearComponent":{"!type":"fn(cmp: ?) -> !this"},"disable":{"!type":"fn(fm: +Ext.FocusManager, eOpts: ?)","!doc":"<p>Fires when the FocusManager is disabled</p>\n"},"enable":{"!type":"fn(fm: +Ext.FocusManager, eOpts: ?)","!doc":"<p>Fires when the FocusManager is enabled</p>\n"},"focusLast":{"!type":"fn(e: ?) -> !this"},"getRootComponents":{"!type":"fn() -> !this"},"handleComponentFocus":{"!type":"fn(cmp: ?, focusEl: ?) -> !this"},"initDOM":{"!type":"fn(options: ?) -> !this"},"isWhitelisted":{"!type":"fn(cmp: ?) -> !this"},"navigateIn":{"!type":"fn(e: ?) -> !this"},"navigateOut":{"!type":"fn(e: ?) -> !this"},"navigateSiblings":{"!type":"fn(e: ?, source: ?, parent: ?) -> !this"},"onComponentBlur":{"!type":"fn(cmp: ?, e: ?) -> !this"},"onComponentDestroy":{"!type":"fn() -> !this"},"onComponentFocus":{"!type":"fn(cmp: ?, e: ?) -> !this"},"onComponentHide":{"!type":"fn(cmp: ?) -> !this"},"removeDOM":{"!type":"fn() -> !this"},"removeXTypeFromWhitelist":{"!type":"fn(xtype: string|[string]) -> !this","!doc":"<p>Removes the specified xtype from the <a href=\"#!/api/Ext.FocusManager-property-whitelist\" rel=\"Ext.FocusManager-property-whitelist\" class=\"docClass\">whitelist</a>.</p>\n"},"setupSubscriberKeys":{"!type":"fn(container: ?, keys: ?) -> !this"},"shouldShowFocusFrame":{"!type":"fn(cmp: ?) -> !this"},"beforecomponentfocus":{"!type":"fn(fm: +Ext.FocusManager, cmp: +Ext.Component, previousCmp: +Ext.Component, eOpts: ?)","!doc":"<p>Fires before a component becomes focused. Return <code>false</code> to prevent\nthe component from gaining focus.</p>\n"},"componentfocus":{"!type":"fn(fm: +Ext.FocusManager, cmp: +Ext.Component, previousCmp: +Ext.Component, eOpts: ?)","!doc":"<p>Fires after a component becomes focused.</p>\n"}},"Function":{"!doc":"<p>A collection of useful static methods to deal with function callbacks</p>\n","alias":{"!type":"fn(object: ?|fn(), methodName: string) -> fn()","!doc":"<p>Create an alias to the provided method property with name <code>methodName</code> of <code>object</code>.\nNote that the execution scope will still be bound to the provided <code>object</code> itself.</p>\n"},"bind":{"!type":"fn(fn: fn(), scope?: ?, args?: [?], appendArgs?: bool|number) -> fn()","!doc":"<p>Create a new function from the provided <code>fn</code>, change <code>this</code> to the provided scope, optionally\noverrides arguments for the call. (Defaults to the arguments passed by the caller)</p>\n\n<p><a href=\"#!/api/Ext-method-bind\" rel=\"Ext-method-bind\" class=\"docClass\">Ext.bind</a> is alias for <a href=\"#!/api/Ext.Function-method-bind\" rel=\"Ext.Function-method-bind\" class=\"docClass\">Ext.Function.bind</a></p>\n"},"clone":{"!type":"fn(method: fn()) -> fn()","!doc":"<p>Create a \"clone\" of the provided method. The returned method will call the given\nmethod passing along all arguments and the \"this\" pointer and return its result.</p>\n"},"createBuffered":{"!type":"fn(fn: fn(), buffer: number, scope?: ?, args?: [?]) -> fn()","!doc":"<p>Creates a delegate function, optionally with a bound scope which, when called, buffers\nthe execution of the passed function for the configured number of milliseconds.\nIf called again within that period, the impending invocation will be canceled, and the\ntimeout period will begin again.</p>\n"},"createDelayed":{"!type":"fn(fn: fn(), delay: number, scope?: ?, args?: [?], appendArgs?: bool|number) -> fn()","!doc":"<p>Creates a delegate (callback) which, when called, executes after a specific delay.</p>\n"},"createInterceptor":{"!type":"fn(origFn: fn(), newFn: fn(), scope?: ?, returnValue?: ?) -> fn()","!doc":"<p>Creates an interceptor function. The passed function is called before the original one. If it returns false,\nthe original one is not called. The resulting function returns the results of the original function.\nThe passed function is called with the parameters of the original function. Example usage:</p>\n\n<pre><code>var sayHi = function(name){\n    alert('Hi, ' + name);\n}\n\nsayHi('Fred'); // alerts \"Hi, Fred\"\n\n// create a new function that validates input without\n// directly modifying the original function:\nvar sayHiToFriend = <a href=\"#!/api/Ext.Function-method-createInterceptor\" rel=\"Ext.Function-method-createInterceptor\" class=\"docClass\">Ext.Function.createInterceptor</a>(sayHi, function(name){\n    return name == 'Brian';\n});\n\nsayHiToFriend('Fred');  // no alert\nsayHiToFriend('Brian'); // alerts \"Hi, Brian\"\n</code></pre>\n"},"createSequence":{"!type":"fn(originalFn: fn(), newFn: fn(), scope?: ?) -> fn()","!doc":"<p>Create a combined function call sequence of the original function + the passed function.\nThe resulting function returns the results of the original function.\nThe passed function is called with the parameters of the original function. Example usage:</p>\n\n<pre><code>var sayHi = function(name){\n    alert('Hi, ' + name);\n}\n\nsayHi('Fred'); // alerts \"Hi, Fred\"\n\nvar sayGoodbye = <a href=\"#!/api/Ext.Function-method-createSequence\" rel=\"Ext.Function-method-createSequence\" class=\"docClass\">Ext.Function.createSequence</a>(sayHi, function(name){\n    alert('Bye, ' + name);\n});\n\nsayGoodbye('Fred'); // both alerts show\n</code></pre>\n"},"createThrottled":{"!type":"fn(fn: fn(), interval: number, scope?: ?) -> fn()","!doc":"<p>Creates a throttled version of the passed function which, when called repeatedly and\nrapidly, invokes the passed function only after a certain interval has elapsed since the\nprevious invocation.</p>\n\n<p>This is useful for wrapping functions which may be called repeatedly, such as\na handler of a mouse move event when the processing is expensive.</p>\n"},"defer":{"!type":"fn(fn: fn(), millis: number, scope?: ?, args?: [?], appendArgs?: bool|number) -> number","!doc":"<p>Calls this function after the number of millseconds specified, optionally in a specific scope. Example usage:</p>\n\n<pre><code>var sayHi = function(name){\n    alert('Hi, ' + name);\n}\n\n// executes immediately:\nsayHi('Fred');\n\n// executes after 2 seconds:\n<a href=\"#!/api/Ext.Function-method-defer\" rel=\"Ext.Function-method-defer\" class=\"docClass\">Ext.Function.defer</a>(sayHi, 2000, this, ['Fred']);\n\n// this syntax is sometimes useful for deferring\n// execution of an anonymous function:\n<a href=\"#!/api/Ext.Function-method-defer\" rel=\"Ext.Function-method-defer\" class=\"docClass\">Ext.Function.defer</a>(function(){\n    alert('Anonymous');\n}, 100);\n</code></pre>\n\n<p><a href=\"#!/api/Ext-method-defer\" rel=\"Ext-method-defer\" class=\"docClass\">Ext.defer</a> is alias for <a href=\"#!/api/Ext.Function-method-defer\" rel=\"Ext.Function-method-defer\" class=\"docClass\">Ext.Function.defer</a></p>\n"},"flexSetter":{"!type":"fn(setter: fn()) -> fn()","!doc":"<p>A very commonly used method throughout the framework. It acts as a wrapper around another method\nwhich originally accepts 2 arguments for <code>name</code> and <code>value</code>.\nThe wrapped function then allows \"flexible\" value setting of either:</p>\n\n<ul>\n<li><code>name</code> and <code>value</code> as 2 arguments</li>\n<li>one single object argument with multiple key - value pairs</li>\n</ul>\n\n\n<p>For example:</p>\n\n<pre><code>var setValue = <a href=\"#!/api/Ext.Function-method-flexSetter\" rel=\"Ext.Function-method-flexSetter\" class=\"docClass\">Ext.Function.flexSetter</a>(function(name, value) {\n    this[name] = value;\n});\n\n// Afterwards\n// Setting a single name - value\nsetValue('name1', 'value1');\n\n// Settings multiple name - value pairs\nsetValue({\n    name1: 'value1',\n    name2: 'value2',\n    name3: 'value3'\n});\n</code></pre>\n"},"interceptAfter":{"!type":"fn(object: ?, methodName: string, fn: fn(), scope?: ?) -> fn()","!doc":"<p>Adds behavior to an existing method that is executed after the\noriginal behavior of the function.  For example:</p>\n\n<pre><code>var soup = {\n    contents: [],\n    add: function(ingredient) {\n        this.contents.push(ingredient);\n    }\n};\n<a href=\"#!/api/Ext.Function-method-interceptAfter\" rel=\"Ext.Function-method-interceptAfter\" class=\"docClass\">Ext.Function.interceptAfter</a>(soup, \"add\", function(ingredient){\n    // Always add a bit of extra salt\n    this.contents.push(\"salt\");\n});\nsoup.add(\"water\");\nsoup.add(\"onions\");\nsoup.contents; // will contain: water, salt, onions, salt\n</code></pre>\n"},"interceptBefore":{"!type":"fn(object: ?, methodName: string, fn: fn(), scope?: ?) -> fn()","!doc":"<p>Adds behavior to an existing method that is executed before the\noriginal behavior of the function.  For example:</p>\n\n<pre><code>var soup = {\n    contents: [],\n    add: function(ingredient) {\n        this.contents.push(ingredient);\n    }\n};\n<a href=\"#!/api/Ext.Function-method-interceptBefore\" rel=\"Ext.Function-method-interceptBefore\" class=\"docClass\">Ext.Function.interceptBefore</a>(soup, \"add\", function(ingredient){\n    if (!this.contents.length &amp;&amp; ingredient !== \"water\") {\n        // Always add water to start with\n        this.contents.push(\"water\");\n    }\n});\nsoup.add(\"onions\");\nsoup.add(\"salt\");\nsoup.contents; // will contain: water, onions, salt\n</code></pre>\n"},"pass":{"!type":"fn(fn: fn(), args: [?], scope?: ?) -> fn()","!doc":"<p>Create a new function from the provided <code>fn</code>, the arguments of which are pre-set to <code>args</code>.\nNew arguments passed to the newly created callback when it's invoked are appended after the pre-set ones.\nThis is especially useful when creating callbacks.</p>\n\n<p>For example:</p>\n\n<pre><code>var originalFunction = function(){\n    alert(<a href=\"#!/api/Ext.Array-method-from\" rel=\"Ext.Array-method-from\" class=\"docClass\">Ext.Array.from</a>(arguments).join(' '));\n};\n\nvar callback = <a href=\"#!/api/Ext.Function-method-pass\" rel=\"Ext.Function-method-pass\" class=\"docClass\">Ext.Function.pass</a>(originalFunction, ['Hello', 'World']);\n\ncallback(); // alerts 'Hello World'\ncallback('by Me'); // alerts 'Hello World by Me'\n</code></pre>\n\n<p><a href=\"#!/api/Ext-method-pass\" rel=\"Ext-method-pass\" class=\"docClass\">Ext.pass</a> is alias for <a href=\"#!/api/Ext.Function-method-pass\" rel=\"Ext.Function-method-pass\" class=\"docClass\">Ext.Function.pass</a></p>\n"}},"Img":{"!doc":"<p>Simple helper class for easily creating image components. This renders an image tag to\nthe DOM with the configured src.</p>\n\n<p><p><img src=\"\" alt=\"Ext.Img component\" width=\"\" height=\"\"></p></p>\n\n<h2>Example usage:</h2>\n\n<pre><code>var changingImage = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.Img\" rel=\"Ext.Img\" class=\"docClass\">Ext.Img</a>', {\n    src: 'http://www.sencha.com/img/20110215-feat-html5.png',\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n\n// change the src of the image programmatically\nchangingImage.setSrc('http://www.sencha.com/img/20110215-feat-perf.png');\n</code></pre>\n\n<p>By default, only an img element is rendered and that is this component's primary\n<a href=\"#!/api/Ext.AbstractComponent-method-getEl\" rel=\"Ext.AbstractComponent-method-getEl\" class=\"docClass\">element</a>. If the <a href=\"#!/api/Ext.AbstractComponent-cfg-autoEl\" rel=\"Ext.AbstractComponent-cfg-autoEl\" class=\"docClass\">Ext.AbstractComponent.autoEl</a> property\nis other than 'img' (the default), the a child img element will be added to the primary\nelement. This can be used to create a wrapper element around the img.</p>\n\n<h2>Wrapping the img in a div:</h2>\n\n<pre><code>var wrappedImage = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.Img\" rel=\"Ext.Img\" class=\"docClass\">Ext.Img</a>', {\n    src: 'http://www.sencha.com/img/20110215-feat-html5.png',\n    autoEl: 'div', // wrap in a div\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_Img_cfg)","prototype":{"!proto":"Ext.Component.prototype","alt":{"!type":"string","!doc":"<p>The descriptive text for non-visual UI description.</p>\n"},"autoEl":{"!type":"string|?","!doc":"<p>A tag name or <a href=\"#!/api/Ext.DomHelper\" rel=\"Ext.DomHelper\" class=\"docClass\">DomHelper</a> spec used to create the <a href=\"#!/api/Ext.Img-method-getEl\" rel=\"Ext.Img-method-getEl\" class=\"docClass\">Element</a> which will\nencapsulate this Component.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong>'div'</strong>. The more complex Sencha classes use a more\ncomplex DOM structure specified by their own <a href=\"#!/api/Ext.Img-cfg-renderTpl\" rel=\"Ext.Img-cfg-renderTpl\" class=\"docClass\">renderTpl</a>s.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components encapsulated by\ndifferent DOM elements. Example usage:</p>\n\n<pre><code>{\n    xtype: 'component',\n    autoEl: {\n        tag: 'img',\n        src: 'http://www.example.com/example.jpg'\n    }\n}, {\n    xtype: 'component',\n    autoEl: {\n        tag: 'blockquote',\n        html: 'autoEl is cool!'\n    }\n}, {\n    xtype: 'container',\n    autoEl: 'ul',\n    cls: 'ux-unordered-list',\n    items: {\n        xtype: 'component',\n        autoEl: 'li',\n        html: 'First list item'\n    }\n}\n</code></pre>\n"},"baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this component's element. This will also be prepended to elements within this\ncomponent like Panel's body will get a class <code>x-panel-body</code>. This means that if you create a subclass of Panel, and\nyou want it to get all the Panels styling for the element and the body, you leave the <code>baseCls</code> <code>x-panel</code> and use\n<code>componentCls</code> to add specific styling for this component.</p>\n"},"glyph":{"!type":"number|string","!doc":"<p>A numeric unicode character code to serve as the image.  If this option is used\nThe image will be rendered using a div with innerHTML set to the html entity\nfor the given character code.  The default font-family for glyphs can be set\nglobally using <a href=\"#!/api/Ext-method-setGlyphFontFamily\" rel=\"Ext-method-setGlyphFontFamily\" class=\"docClass\">Ext.setGlyphFontFamily()</a>. Alternatively,\nthis config option accepts a string with the charCode and font-family separated by\nthe <code>@</code> symbol. For example '65@My Font Family'.</p>\n"},"imgCls":{"!type":"string","!doc":"<p>Optional CSS classes to add to the img element.</p>\n"},"src":{"!type":"string","!doc":"<p>The image src.</p>\n"},"title":{"!type":"string","!doc":"<p>Specifies addtional information about the image.</p>\n"},"getElConfig":{"!type":"fn() -> !this"},"onDestroy":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the destroy operation.\nAfter calling the superclass's onDestroy, the Component will be destroyed.</p>\n"},"onRender":{"!type":"fn() -> !this","!doc":"<p>Template method called when this Component's DOM structure is created.</p>\n\n<p>At this point, this Component's (and all descendants') DOM structure <em>exists</em> but it has not\nbeen layed out (positioned and sized).</p>\n\n<p>Subclasses which override this to gain access to the structure at render time should\ncall the parent class's method before attempting to access any child elements of the Component.</p>\n"},"setGlyph":{"!type":"fn(glyph: ?) -> !this"},"setSrc":{"!type":"fn(src: string) -> !this","!doc":"<p>Updates the <a href=\"#!/api/Ext.Img-cfg-src\" rel=\"Ext.Img-cfg-src\" class=\"docClass\">src</a> of the image.</p>\n"}}},"JSON":{"!doc":"<p>Modified version of <a href=\"http://www.json.org/js.html\">Douglas Crockford's JSON.js</a> that doesn't\nmess with the Object prototype.</p>\n","decode":{"!type":"fn(json: string, safe?: bool) -> ?","!doc":"<p>Decodes (parses) a JSON string to an object. If the JSON is invalid, this function throws\na SyntaxError unless the safe option is set.</p>\n"},"encode":{"!type":"fn(o: ?) -> string","!doc":"<p>Encodes an Object, Array or other value.</p>\n\n<p>If the environment's native JSON encoding is not being used (<a href=\"#!/api/Ext-property-USE_NATIVE_JSON\" rel=\"Ext-property-USE_NATIVE_JSON\" class=\"docClass\">Ext.USE_NATIVE_JSON</a> is not set,\nor the environment does not support it), then ExtJS's encoding will be used. This allows the developer\nto add a <code>toJSON</code> method to their classes which need serializing to return a valid JSON representation\nof the object.</p>\n"},"encodeDate":{"!type":"fn(d: +Date) -> string","!doc":"<p>Encodes a Date. This returns the actual string which is inserted into the JSON string as the literal\nexpression. <strong>The returned value includes enclosing double quotation marks.</strong></p>\n\n<p>The default return format is <code>\"yyyy-mm-ddThh:mm:ss\"</code>.</p>\n\n<p>To override this:</p>\n\n<pre><code><a href=\"#!/api/Ext.JSON-method-encodeDate\" rel=\"Ext.JSON-method-encodeDate\" class=\"docClass\">Ext.JSON.encodeDate</a> = function(d) {\n    return <a href=\"#!/api/Ext.Date-method-format\" rel=\"Ext.Date-method-format\" class=\"docClass\">Ext.Date.format</a>(d, '\"Y-m-d\"');\n};\n</code></pre>\n"},"encodeString":{"!type":"fn(s: string) -> string","!doc":"<p>Encodes a String. This returns the actual string which is inserted into the JSON string as the literal\nexpression. <strong>The returned value includes enclosing double quotation marks.</strong></p>\n\n<p>To override this:</p>\n\n<pre><code><a href=\"#!/api/Ext.JSON-method-encodeString\" rel=\"Ext.JSON-method-encodeString\" class=\"docClass\">Ext.JSON.encodeString</a> = function(s) {\n    return 'Foo' + s;\n};\n</code></pre>\n"},"encodeValue":{"!type":"fn(o: ?) -> string","!doc":"<p>The function which <a href=\"#!/api/Ext.JSON-method-encode\" rel=\"Ext.JSON-method-encode\" class=\"docClass\">encode</a> uses to encode all javascript values to their JSON representations\nwhen <a href=\"#!/api/Ext-property-USE_NATIVE_JSON\" rel=\"Ext-property-USE_NATIVE_JSON\" class=\"docClass\">Ext.USE_NATIVE_JSON</a> is <code>false</code>.</p>\n\n<p>This is made public so that it can be replaced with a custom implementation.</p>\n"}},"LoadMask":{"!doc":"<p>A modal, floating Component which may be shown above a specified <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Component</a> while loading data.\nWhen shown, the configured owning Component will be covered with a modality mask, and the LoadMask's <a href=\"#!/api/Ext.LoadMask-cfg-msg\" rel=\"Ext.LoadMask-cfg-msg\" class=\"docClass\">msg</a> will be\ndisplayed centered, accompanied by a spinner image.</p>\n\n<p>If the <a href=\"#!/api/Ext.LoadMask-cfg-store\" rel=\"Ext.LoadMask-cfg-store\" class=\"docClass\">store</a> config option is specified, the masking will be automatically shown and then hidden synchronized with\nthe Store's loading process.</p>\n\n<p>Because this is a floating Component, its z-index will be managed by the global <a href=\"#!/api/Ext.WindowManager\" rel=\"Ext.WindowManager\" class=\"docClass\">ZIndexManager</a>\nobject, and upon show, it will place itsef at the top of the hierarchy.</p>\n\n<p>Example usage:</p>\n\n<pre><code>// Basic mask:\nvar myMask = new <a href=\"#!/api/Ext.LoadMask\" rel=\"Ext.LoadMask\" class=\"docClass\">Ext.LoadMask</a>(myPanel, {msg:\"Please wait...\"});\nmyMask.show();\n</code></pre>\n","!type":"fn(config?: Ext_LoadMask_cfg)","prototype":{"!proto":"Ext.Component.prototype","baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this component's element. This will also be prepended to elements within this\ncomponent like Panel's body will get a class <code>x-panel-body</code>. This means that if you create a subclass of Panel, and\nyou want it to get all the Panels styling for the element and the body, you leave the <code>baseCls</code> <code>x-panel</code> and use\n<code>componentCls</code> to add specific styling for this component.</p>\n"},"floating":{"!type":"bool","!doc":"<p>Obviously, it's floating.</p>\n"},"focusOnToFront":{"!type":"bool","!doc":"<p>Masks are not focusable</p>\n"},"maskCls":{"!type":"string","!doc":"<p>The CSS class to apply to the mask element</p>\n"},"msg":{"!type":"string","!doc":"<p>The text to display in a centered loading message box.</p>\n"},"msgCls":{"!type":"string","!doc":"<p>The CSS class to apply to the loading message element.</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.LoadMask-method-getEl\" rel=\"Ext.LoadMask-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.LoadMask-method-getEl\" rel=\"Ext.LoadMask-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.LoadMask-cfg-renderSelectors\" rel=\"Ext.LoadMask-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.LoadMask-cfg-childEls\" rel=\"Ext.LoadMask-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"},"store":{"!type":"+Ext.data.Store","!doc":"<p>Optional Store to which the mask is bound. The mask is displayed when a load request is issued, and\nhidden on either load success, or load fail.</p>\n"},"target":{"!type":"+Ext.Component","!doc":"<p>The Component you wish to mask. The the mask will be automatically sized\nupon Component resize, and the message box will be kept centered.</p>\n"},"useMsg":{"!type":"bool","!doc":"<p>Whether or not to use a loading message class or simply mask the bound element.</p>\n"},"useTargetEl":{"!type":"bool","!doc":"<p>True to mask the <a href=\"#!/api/Ext.Component-method-getTargetEl\" rel=\"Ext.Component-method-getTargetEl\" class=\"docClass\">targetEl</a> of the bound Component. By default,\nthe <a href=\"#!/api/Ext.Component-method-getEl\" rel=\"Ext.Component-method-getEl\" class=\"docClass\">el</a> will be masked.</p>\n"},"bringParentToFront":{"!type":"bool","!doc":"<p>When we put the load mask to the front of it's owner, we generally don't want to also bring the owning\ncomponent to the front.</p>\n"},"childEls":{"!type":"[?]"},"afterRender":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior after rendering is complete. At this stage the Component’s Element\nwill have been styled according to the configuration, will have had any configured CSS class\nnames added, and will be in the configured visibility and the configured enable state.</p>\n"},"afterShow":{"!type":"fn() -> !this","!doc":"<p>Invoked after the Component is shown (after <a href=\"#!/api/Ext.LoadMask-method-onShow\" rel=\"Ext.LoadMask-method-onShow\" class=\"docClass\">onShow</a> is called).</p>\n\n<p>Gets passed the same parameters as <a href=\"#!/api/Ext.LoadMask-method-show\" rel=\"Ext.LoadMask-method-show\" class=\"docClass\">show</a>.</p>\n"},"bindComponent":{"!type":"fn(comp: ?) -> !this"},"bindStore":{"!type":"fn(store: +Ext.data.Store) -> !this","!doc":"<p>Changes the data store bound to this LoadMask.</p>\n"},"getMaskEl":{"!type":"fn() -> !this"},"getMaskTarget":{"!type":"fn() -> !this"},"getOwner":{"!type":"fn() -> !this"},"getStoreListeners":{"!type":"fn(store: ?) -> ?","!doc":"<p>Gets the listeners to bind to a new store.</p>\n"},"hide":{"!type":"fn() -> +Ext.Component","!doc":"<p>Hides this Component, setting it to invisible using the configured <a href=\"#!/api/Ext.LoadMask-cfg-hideMode\" rel=\"Ext.LoadMask-cfg-hideMode\" class=\"docClass\">hideMode</a>.</p>\n"},"isActiveContainer":{"!type":"fn(container: ?) -> !this"},"maybeShow":{"!type":"fn() -> !this"},"onBeforeLoad":{"!type":"fn() -> !this"},"onComponentAdded":{"!type":"fn(owner: ?) -> !this"},"onComponentHide":{"!type":"fn() -> !this"},"onComponentRemoved":{"!type":"fn(owner: ?) -> !this"},"onComponentShow":{"!type":"fn() -> !this"},"onContainerCollapse":{"!type":"fn(container: ?) -> !this"},"onContainerExpand":{"!type":"fn(container: ?) -> !this"},"onContainerHide":{"!type":"fn(container: ?) -> !this"},"onContainerShow":{"!type":"fn(container: ?) -> !this"},"onDestroy":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the destroy operation.\nAfter calling the superclass's onDestroy, the Component will be destroyed.</p>\n"},"onDisable":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the disable operation.\nAfter calling the superclass's <code>onDisable</code>, the Component will be disabled.</p>\n"},"onHide":{"!type":"fn() -> !this","!doc":"<p>Possibly animates down to a target element.</p>\n\n<p>Allows addition of behavior to the hide operation. After\ncalling the superclass’s onHide, the Component will be hidden.</p>\n\n<p>Gets passed the same parameters as <a href=\"#!/api/Ext.LoadMask-event-hide\" rel=\"Ext.LoadMask-event-hide\" class=\"docClass\">hide</a>.</p>\n"},"onLoad":{"!type":"fn() -> !this"},"onShow":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the show operation. After\ncalling the superclass's onShow, the Component will be visible.</p>\n\n<p>Override in subclasses where more complex behaviour is needed.</p>\n\n<p>Gets passed the same parameters as <a href=\"#!/api/Ext.LoadMask-method-show\" rel=\"Ext.LoadMask-method-show\" class=\"docClass\">show</a>.</p>\n"},"setZIndex":{"!type":"fn(index: ?) -> !this","!doc":"<p>z-index is managed by the zIndexManager and may be overwritten at any time.\nReturns the next z-index to be used.\nIf this is a Container, then it will have rebased any managed floating Components,\nand so the next available z-index will be approximately 10000 above that.</p>\n"},"show":{"!type":"fn() -> +Ext.Component","!doc":"<p>Shows this Component, rendering it first if <a href=\"#!/api/Ext.LoadMask-cfg-autoRender\" rel=\"Ext.LoadMask-cfg-autoRender\" class=\"docClass\">autoRender</a> or <a href=\"#!/api/Ext.LoadMask-cfg-floating\" rel=\"Ext.LoadMask-cfg-floating\" class=\"docClass\">floating</a> are <code>true</code>.</p>\n\n<p>After being shown, a <a href=\"#!/api/Ext.LoadMask-cfg-floating\" rel=\"Ext.LoadMask-cfg-floating\" class=\"docClass\">floating</a> Component (such as a <a href=\"#!/api/Ext.window.Window\" rel=\"Ext.window.Window\" class=\"docClass\">Ext.window.Window</a>), is activated it and\nbrought to the front of its <a href=\"#!/api/Ext.LoadMask-property-zIndexManager\" rel=\"Ext.LoadMask-property-zIndexManager\" class=\"docClass\">z-index stack</a>.</p>\n"},"sizeMask":{"!type":"fn() -> !this","!doc":"<p>Called when this LoadMask's Component is resized. The toFront method rebases and resizes the modal mask.</p>\n"}}},"Loader":{"!doc":"<p><a href=\"#!/api/Ext.Loader\" rel=\"Ext.Loader\" class=\"docClass\">Ext.Loader</a> is the heart of the new dynamic dependency loading capability in Ext JS 4+. It is most commonly used\nvia the <a href=\"#!/api/Ext-method-require\" rel=\"Ext-method-require\" class=\"docClass\">Ext.require</a> shorthand. <a href=\"#!/api/Ext.Loader\" rel=\"Ext.Loader\" class=\"docClass\">Ext.Loader</a> supports both asynchronous and synchronous loading\napproaches, and leverage their advantages for the best development flow. We'll discuss about the pros and cons of each approach:</p>\n\n<h1>Asynchronous Loading</h1>\n\n<ul>\n<li><p>Advantages:</p>\n\n<ul>\n<li>Cross-domain</li>\n<li>No web server needed: you can run the application via the file system protocol (i.e: <code>file://path/to/your/index\n.html</code>)</li>\n<li>Best possible debugging experience: error messages come with the exact file name and line number</li>\n</ul>\n</li>\n<li><p>Disadvantages:</p>\n\n<ul>\n<li>Dependencies need to be specified before-hand</li>\n</ul>\n</li>\n</ul>\n\n\n<h3>Method 1: Explicitly include what you need:</h3>\n\n<pre><code>// Syntax\n<a href=\"#!/api/Ext-method-require\" rel=\"Ext-method-require\" class=\"docClass\">Ext.require</a>({String/Array} expressions);\n\n// Example: Single alias\n<a href=\"#!/api/Ext-method-require\" rel=\"Ext-method-require\" class=\"docClass\">Ext.require</a>('widget.window');\n\n// Example: Single class name\n<a href=\"#!/api/Ext-method-require\" rel=\"Ext-method-require\" class=\"docClass\">Ext.require</a>('<a href=\"#!/api/Ext.window.Window\" rel=\"Ext.window.Window\" class=\"docClass\">Ext.window.Window</a>');\n\n// Example: Multiple aliases / class names mix\n<a href=\"#!/api/Ext-method-require\" rel=\"Ext-method-require\" class=\"docClass\">Ext.require</a>(['widget.window', 'layout.border', '<a href=\"#!/api/Ext.data.Connection\" rel=\"Ext.data.Connection\" class=\"docClass\">Ext.data.Connection</a>']);\n\n// Wildcards\n<a href=\"#!/api/Ext-method-require\" rel=\"Ext-method-require\" class=\"docClass\">Ext.require</a>(['widget.*', 'layout.*', 'Ext.data.*']);\n</code></pre>\n\n<h3>Method 2: Explicitly exclude what you don't need:</h3>\n\n<pre><code>// Syntax: Note that it must be in this chaining format.\n<a href=\"#!/api/Ext-method-exclude\" rel=\"Ext-method-exclude\" class=\"docClass\">Ext.exclude</a>({String/Array} expressions)\n   .require({String/Array} expressions);\n\n// Include everything except Ext.data.*\n<a href=\"#!/api/Ext-method-exclude\" rel=\"Ext-method-exclude\" class=\"docClass\">Ext.exclude</a>('Ext.data.*').require('*');\n\n// Include all widgets except widget.checkbox*,\n// which will match widget.checkbox, widget.checkboxfield, widget.checkboxgroup, etc.\n<a href=\"#!/api/Ext-method-exclude\" rel=\"Ext-method-exclude\" class=\"docClass\">Ext.exclude</a>('widget.checkbox*').require('widget.*');\n</code></pre>\n\n<h1>Synchronous Loading on Demand</h1>\n\n<ul>\n<li><p>Advantages:</p>\n\n<ul>\n<li>There's no need to specify dependencies before-hand, which is always the convenience of including ext-all.js\nbefore</li>\n</ul>\n</li>\n<li><p>Disadvantages:</p>\n\n<ul>\n<li>Not as good debugging experience since file name won't be shown (except in Firebug at the moment)</li>\n<li>Must be from the same domain due to XHR restriction</li>\n<li>Need a web server, same reason as above</li>\n</ul>\n</li>\n</ul>\n\n\n<p>There's one simple rule to follow: Instantiate everything with <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a> instead of the <code>new</code> keyword</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('widget.window', { ... }); // Instead of new <a href=\"#!/api/Ext.window.Window\" rel=\"Ext.window.Window\" class=\"docClass\">Ext.window.Window</a>({...});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.window.Window\" rel=\"Ext.window.Window\" class=\"docClass\">Ext.window.Window</a>', {}); // Same as above, using full class name instead of alias\n\n<a href=\"#!/api/Ext-method-widget\" rel=\"Ext-method-widget\" class=\"docClass\">Ext.widget</a>('window', {}); // Same as above, all you need is the traditional `xtype`\n</code></pre>\n\n<p>Behind the scene, <a href=\"#!/api/Ext.ClassManager\" rel=\"Ext.ClassManager\" class=\"docClass\">Ext.ClassManager</a> will automatically check whether the given class name / alias has already\n existed on the page. If it's not, <a href=\"#!/api/Ext.Loader\" rel=\"Ext.Loader\" class=\"docClass\">Ext.Loader</a> will immediately switch itself to synchronous mode and automatic load the given\n class and all its dependencies.</p>\n\n<h1>Hybrid Loading - The Best of Both Worlds</h1>\n\n<p>It has all the advantages combined from asynchronous and synchronous loading. The development flow is simple:</p>\n\n<h3>Step 1: Start writing your application using synchronous approach.</h3>\n\n<p><a href=\"#!/api/Ext.Loader\" rel=\"Ext.Loader\" class=\"docClass\">Ext.Loader</a> will automatically fetch all dependencies on demand as they're needed during run-time. For example:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function(){\n    var window = <a href=\"#!/api/Ext-method-widget\" rel=\"Ext-method-widget\" class=\"docClass\">Ext.widget</a>('window', {\n        width: 500,\n        height: 300,\n        layout: {\n            type: 'border',\n            padding: 5\n        },\n        title: 'Hello Dialog',\n        items: [{\n            title: 'Navigation',\n            collapsible: true,\n            region: 'west',\n            width: 200,\n            html: 'Hello',\n            split: true\n        }, {\n            title: 'TabPanel',\n            region: 'center'\n        }]\n    });\n\n    window.show();\n})\n</code></pre>\n\n<h3>Step 2: Along the way, when you need better debugging ability, watch the console for warnings like these:</h3>\n\n<pre><code>[<a href=\"#!/api/Ext.Loader\" rel=\"Ext.Loader\" class=\"docClass\">Ext.Loader</a>] Synchronously loading '<a href=\"#!/api/Ext.window.Window\" rel=\"Ext.window.Window\" class=\"docClass\">Ext.window.Window</a>'; consider adding <a href=\"#!/api/Ext-method-require\" rel=\"Ext-method-require\" class=\"docClass\">Ext.require</a>('<a href=\"#!/api/Ext.window.Window\" rel=\"Ext.window.Window\" class=\"docClass\">Ext.window.Window</a>') before your application's code\nClassManager.js:432\n[<a href=\"#!/api/Ext.Loader\" rel=\"Ext.Loader\" class=\"docClass\">Ext.Loader</a>] Synchronously loading '<a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">Ext.layout.container.Border</a>'; consider adding <a href=\"#!/api/Ext-method-require\" rel=\"Ext-method-require\" class=\"docClass\">Ext.require</a>('<a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">Ext.layout.container.Border</a>') before your application's code\n</code></pre>\n\n<p>Simply copy and paste the suggested code above <code><a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a></code>, i.e:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-require\" rel=\"Ext-method-require\" class=\"docClass\">Ext.require</a>('<a href=\"#!/api/Ext.window.Window\" rel=\"Ext.window.Window\" class=\"docClass\">Ext.window.Window</a>');\n<a href=\"#!/api/Ext-method-require\" rel=\"Ext-method-require\" class=\"docClass\">Ext.require</a>('<a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">Ext.layout.container.Border</a>');\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(...);\n</code></pre>\n\n<p>Everything should now load via asynchronous mode.</p>\n\n<h1>Deployment</h1>\n\n<p>It's important to note that dynamic loading should only be used during development on your local machines.\nDuring production, all dependencies should be combined into one single JavaScript file. <a href=\"#!/api/Ext.Loader\" rel=\"Ext.Loader\" class=\"docClass\">Ext.Loader</a> makes\nthe whole process of transitioning from / to between development / maintenance and production as easy as\npossible. Internally <a href=\"#!/api/Ext.Loader-property-history\" rel=\"Ext.Loader-property-history\" class=\"docClass\">Ext.Loader.history</a> maintains the list of all dependencies your application\nneeds in the exact loading sequence. It's as simple as concatenating all files in this array into one,\nthen include it on top of your application.</p>\n\n<p>This process will be automated with Sencha Command, to be released and documented towards Ext JS 4 Final.</p>\n","disableCaching":{"!type":"bool","!doc":"<p>Appends current timestamp to script files to prevent caching.</p>\n"},"disableCachingParam":{"!type":"string","!doc":"<p>The get parameter name for the cache buster's timestamp.</p>\n"},"enabled":{"!type":"bool","!doc":"<p>Whether or not to enable the dynamic dependency loading feature.</p>\n"},"garbageCollect":{"!type":"bool","!doc":"<p>True to prepare an asynchronous script tag for garbage collection (effective only\nif <a href=\"#!/api/Ext.Loader-cfg-preserveScripts\" rel=\"Ext.Loader-cfg-preserveScripts\" class=\"docClass\">preserveScripts</a> is false)</p>\n"},"paths":{"!type":"?","!doc":"<p>The mapping from namespaces to file paths</p>\n\n<pre><code>{\n    'Ext': '.', // This is set by default, <a href=\"#!/api/Ext.layout.container.Container\" rel=\"Ext.layout.container.Container\" class=\"docClass\">Ext.layout.container.Container</a> will be\n                // loaded from ./layout/Container.js\n\n    'My': './src/my_own_folder' // My.layout.Container will be loaded from\n                                // ./src/my_own_folder/layout/Container.js\n}\n</code></pre>\n\n<p>Note that all relative paths are relative to the current HTML document.\nIf not being specified, for example, <code>Other.awesome.Class</code>\nwill simply be loaded from <code>./Other/awesome/Class.js</code></p>\n"},"preserveScripts":{"!type":"bool","!doc":"<p>False to remove and optionally <a href=\"#!/api/Ext.Loader-cfg-garbageCollect\" rel=\"Ext.Loader-cfg-garbageCollect\" class=\"docClass\">garbage-collect</a> asynchronously loaded scripts,\nTrue to retain script element for browser debugger compatibility and improved load performance.</p>\n"},"scriptChainDelay":{"!type":"bool","!doc":"<p>millisecond delay between asynchronous script injection (prevents stack overflow on some user agents)\n'false' disables delay but potentially increases stack load.</p>\n"},"scriptCharset":{"!type":"string","!doc":"<p>Optional charset to specify encoding of dynamic script content.</p>\n"},"classNameToFilePathMap":{"!type":"?"},"config":{"!type":"?","!doc":"<p>Configuration</p>\n"},"documentHead":{"!type":"?"},"hasFileLoadError":{"!type":"bool"},"history":{"!type":"[?]","!doc":"<p>An array of class names to keep track of the dependency loading order.\nThis is not guaranteed to be the same everytime due to the asynchronous\nnature of the Loader.</p>\n"},"isClassFileLoaded":{"!type":"?","!doc":"<p>Maintain the list of files that have already been handled so that they never get double-loaded</p>\n"},"isFileLoaded":{"!type":"?"},"isInHistory":{"!type":"?"},"isLoading":{"!type":"bool","!doc":"<p>Flag indicating whether there are still files being loaded</p>\n"},"numLoadedFiles":{"!type":"number"},"numPendingFiles":{"!type":"number"},"optionalRequires":{"!type":"?","!doc":"<p>Contains classes referenced in <code>uses</code> properties.</p>\n"},"queue":{"!type":"?","!doc":"<p>Maintain the queue for all dependencies. Each item in the array is an object of the format:</p>\n\n<pre><code>{\n     requires: [...], // The required classes for this queue item\n     callback: function() { ... } // The function to execute when all classes specified in requires exist\n}\n</code></pre>\n"},"readyListeners":{"!type":"?","!doc":"<p>Maintain the list of listeners to execute when all required scripts are fully loaded</p>\n"},"requiresMap":{"!type":"?","!doc":"<p>Map of fully qualified class names to an array of dependent classes.</p>\n"},"scriptsLoading":{"!type":"number","!doc":"<p>The number of scripts loading via loadScript.</p>\n"},"syncModeEnabled":{"!type":"bool"},"addClassPathMappings":{"!type":"fn(paths: ?) -> +Ext.Loader","!doc":"<p>Sets a batch of path entries</p>\n"},"addUsedClasses":{"!type":"fn(classes: ?) -> !this","!doc":"<p>Ensure that any classes referenced in the <code>uses</code> property are loaded.</p>\n"},"cleanupScriptElement":{"!type":"fn(script: ?, remove: ?, collect: ?) -> !this"},"disableCacheBuster":{"!type":"fn(disable: bool, path?: string) -> !this","!doc":"<p>Turns on or off the \"cache buster\" applied to dynamically loaded scripts. Normally\ndynamically loaded scripts have an extra query parameter appended to avoid stale\ncached scripts. This method can be used to disable this mechanism, and is primarily\nuseful for testing. This is done using a cookie.</p>\n"},"exclude":{"!type":"fn(excludes: [?]) -> ?","!doc":"<p>Explicitly exclude files from being loaded. Useful when used in conjunction with a broad include expression.\nCan be chained with more <code>require</code> and <code>exclude</code> methods, eg:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-exclude\" rel=\"Ext-method-exclude\" class=\"docClass\">Ext.exclude</a>('Ext.data.*').require('*');\n\n<a href=\"#!/api/Ext-method-exclude\" rel=\"Ext-method-exclude\" class=\"docClass\">Ext.exclude</a>('widget.button*').require('widget.*');\n</code></pre>\n\n<p><a href=\"#!/api/Ext-method-exclude\" rel=\"Ext-method-exclude\" class=\"docClass\">Ext.exclude</a> is alias for <a href=\"#!/api/Ext.Loader-method-exclude\" rel=\"Ext.Loader-method-exclude\" class=\"docClass\">exclude</a>.</p>\n"},"getConfig":{"!type":"fn(name: string) -> ?","!doc":"<p>Get the config value corresponding to the specified name. If no name is given, will return the config object</p>\n"},"getPath":{"!type":"fn(className: string) -> string","!doc":"<p>Translates a className to a file path by adding the\nthe proper prefix and converting the .'s to /'s. For example:</p>\n\n<pre><code><a href=\"#!/api/Ext.Loader-method-setPath\" rel=\"Ext.Loader-method-setPath\" class=\"docClass\">Ext.Loader.setPath</a>('My', '/path/to/My');\n\nalert(<a href=\"#!/api/Ext.Loader-method-getPath\" rel=\"Ext.Loader-method-getPath\" class=\"docClass\">Ext.Loader.getPath</a>('My.awesome.Class')); // alerts '/path/to/My/awesome/Class.js'\n</code></pre>\n\n<p>Note that the deeper namespace levels, if explicitly set, are always resolved first. For example:</p>\n\n<pre><code><a href=\"#!/api/Ext.Loader-method-setPath\" rel=\"Ext.Loader-method-setPath\" class=\"docClass\">Ext.Loader.setPath</a>({\n    'My': '/path/to/lib',\n    'My.awesome': '/other/path/for/awesome/stuff',\n    'My.awesome.more': '/more/awesome/path'\n});\n\nalert(<a href=\"#!/api/Ext.Loader-method-getPath\" rel=\"Ext.Loader-method-getPath\" class=\"docClass\">Ext.Loader.getPath</a>('My.awesome.Class')); // alerts '/other/path/for/awesome/stuff/Class.js'\n\nalert(<a href=\"#!/api/Ext.Loader-method-getPath\" rel=\"Ext.Loader-method-getPath\" class=\"docClass\">Ext.Loader.getPath</a>('My.awesome.more.Class')); // alerts '/more/awesome/path/Class.js'\n\nalert(<a href=\"#!/api/Ext.Loader-method-getPath\" rel=\"Ext.Loader-method-getPath\" class=\"docClass\">Ext.Loader.getPath</a>('My.cool.Class')); // alerts '/path/to/lib/cool/Class.js'\n\nalert(<a href=\"#!/api/Ext.Loader-method-getPath\" rel=\"Ext.Loader-method-getPath\" class=\"docClass\">Ext.Loader.getPath</a>('Unknown.strange.Stuff')); // alerts 'Unknown/strange/Stuff.js'\n</code></pre>\n"},"getPrefix":{"!type":"fn(className: string) -> !this"},"historyPush":{"!type":"fn(className: string) -> !this"},"injectScriptElement":{"!type":"fn(url: ?, onLoad: ?, onError: ?, scope: ?, charset: ?) -> !this","!doc":"<p>Inject a script element to document's head, call onLoad and onError accordingly</p>\n"},"isAClassNameWithAKnownPrefix":{"!type":"fn(className: string) -> !this"},"loadScript":{"!type":"fn(options: ?|string) -> !this","!doc":"<p>Loads the specified script URL and calls the supplied callbacks. If this method\nis called before <a href=\"#!/api/Ext-property-isReady\" rel=\"Ext-property-isReady\" class=\"docClass\">Ext.isReady</a>, the script's load will delay the transition\nto ready. This can be used to load arbitrary scripts that may contain further\n<a href=\"#!/api/Ext-method-require\" rel=\"Ext-method-require\" class=\"docClass\">Ext.require</a> calls.</p>\n"},"loadScriptFile":{"!type":"fn(url: ?, onLoad: ?, onError: ?, scope: ?, synchronous: ?) -> !this","!doc":"<p>Load a script file, supports both asynchronous and synchronous approaches</p>\n"},"onFileLoadError":{"!type":"fn(className: ?, filePath: ?, errorMessage: ?, isSynchronous: ?) -> !this"},"onFileLoaded":{"!type":"fn(className: string, filePath: string) -> !this"},"onReady":{"!type":"fn(fn: fn(), scope: ?, withDomReady: bool) -> !this","!doc":"<p>Add a new listener to be executed when all required scripts are fully loaded</p>\n"},"refreshQueue":{"!type":"fn() -> !this","!doc":"<p>Refresh all items in the queue. If all dependencies for an item exist during looping,\nit will execute the callback and call refreshQueue again. Triggers onReady when the queue is\nempty</p>\n"},"removeScriptElement":{"!type":"fn(url: ?) -> !this"},"require":{"!type":"fn(expressions: string|[?], fn?: fn(), scope?: ?, excludes?: string|[?]) -> !this","!doc":"<p>Loads all classes by the given names and all their direct dependencies; optionally executes\nthe given callback function when finishes, within the optional scope.</p>\n\n<p><a href=\"#!/api/Ext-method-require\" rel=\"Ext-method-require\" class=\"docClass\">Ext.require</a> is alias for <a href=\"#!/api/Ext.Loader-method-require\" rel=\"Ext.Loader-method-require\" class=\"docClass\">require</a>.</p>\n"},"setConfig":{"!type":"fn(config: ?) -> +Ext.Loader","!doc":"<p>Set the configuration for the loader. This should be called right after ext-(debug).js\nis included in the page, and before <a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>. i.e:</p>\n\n<pre><code>&lt;script type=\"text/javascript\" src=\"ext-core-debug.js\"&gt;&lt;/script&gt;\n&lt;script type=\"text/javascript\"&gt;\n    <a href=\"#!/api/Ext.Loader-method-setConfig\" rel=\"Ext.Loader-method-setConfig\" class=\"docClass\">Ext.Loader.setConfig</a>({\n      enabled: true,\n      paths: {\n          'My': 'my_own_path'\n      }\n    });\n&lt;/script&gt;\n&lt;script type=\"text/javascript\"&gt;\n    <a href=\"#!/api/Ext-method-require\" rel=\"Ext-method-require\" class=\"docClass\">Ext.require</a>(...);\n\n    <a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function() {\n      // application code here\n    });\n&lt;/script&gt;\n</code></pre>\n\n<p>Refer to config options of <a href=\"#!/api/Ext.Loader\" rel=\"Ext.Loader\" class=\"docClass\">Ext.Loader</a> for the list of possible properties</p>\n"},"setPath":{"!type":"fn(name: string|?, path?: string) -> +Ext.Loader","!doc":"<p>Sets the path of a namespace.\nFor Example:</p>\n\n<pre><code><a href=\"#!/api/Ext.Loader-method-setPath\" rel=\"Ext.Loader-method-setPath\" class=\"docClass\">Ext.Loader.setPath</a>('Ext', '.');\n</code></pre>\n"},"syncRequire":{"!type":"fn(expressions: string|[?], fn?: fn(), scope?: ?, excludes?: string|[?]) -> !this","!doc":"<p>Synchronously loads all classes by the given names and all their direct dependencies; optionally\nexecutes the given callback function when finishes, within the optional scope.</p>\n\n<p><a href=\"#!/api/Ext-method-syncRequire\" rel=\"Ext-method-syncRequire\" class=\"docClass\">Ext.syncRequire</a> is alias for <a href=\"#!/api/Ext.Loader-method-syncRequire\" rel=\"Ext.Loader-method-syncRequire\" class=\"docClass\">syncRequire</a>.</p>\n"},"triggerReady":{"!type":"fn() -> !this"}},"MessageBox":{"!doc":"<p>Singleton instance of <a href=\"#!/api/Ext.window.MessageBox\" rel=\"Ext.window.MessageBox\" class=\"docClass\">Ext.window.MessageBox</a>.</p>\n","!type":"fn(cfg: ?)","prototype":{"!proto":"Ext.window.MessageBox.prototype"}},"ModelManager":{"!doc":"<p>The ModelManager keeps track of all <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a> types defined in your application.</p>\n\n<p><strong>Creating Model Instances</strong></p>\n\n<p>Model instances can be created by using the <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a> method. <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a> replaces\nthe deprecated <a href=\"#!/api/Ext.ModelManager-method-create\" rel=\"Ext.ModelManager-method-create\" class=\"docClass\">Ext.ModelManager.create</a> method. It is also possible to create a model instance\nthis by using the Model type directly. The following 3 snippets are equivalent:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('User', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['first', 'last']\n});\n\n// method 1, create using <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a> (recommended)\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('User', {\n    first: 'Ed',\n    last: 'Spencer'\n});\n\n// method 2, create through the manager (deprecated)\n<a href=\"#!/api/Ext.ModelManager-method-create\" rel=\"Ext.ModelManager-method-create\" class=\"docClass\">Ext.ModelManager.create</a>({\n    first: 'Ed',\n    last: 'Spencer'\n}, 'User');\n\n// method 3, create on the type directly\nnew User({\n    first: 'Ed',\n    last: 'Spencer'\n});\n</code></pre>\n\n<p><strong>Accessing Model Types</strong></p>\n\n<p>A reference to a Model type can be obtained by using the <a href=\"#!/api/Ext.ModelManager-method-getModel\" rel=\"Ext.ModelManager-method-getModel\" class=\"docClass\">getModel</a> function. Since models types\nare normal classes, you can access the type directly. The following snippets are equivalent:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('User', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['first', 'last']\n});\n\n// method 1, access model type through the manager\nvar UserType = <a href=\"#!/api/Ext.ModelManager-method-getModel\" rel=\"Ext.ModelManager-method-getModel\" class=\"docClass\">Ext.ModelManager.getModel</a>('User');\n\n// method 2, reference the type directly\nvar UserType = User;\n</code></pre>\n","!type":"fn(config: Ext_ModelManager_cfg)","prototype":{"!proto":"Ext.AbstractManager.prototype"},"associationStack":{"!type":"[+Ext.data.association.Association]","!doc":"<p>Private stack of associations that must be created once their associated model has been defined</p>\n"},"typeName":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"create":{"!type":"fn(data: ?, name: string, id?: number) -> !this","!doc":"<p>Creates a new instance of a Model using the given data. Deprecated, instead use <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('User', {\n    first: 'Ed',\n    last: 'Spencer'\n});\n</code></pre>\n"},"getModel":{"!type":"fn(id: string|?) -> +Ext.data.Model","!doc":"<p>Returns the <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a> class for a given model name</p>\n"},"onModelDefined":{"!type":"fn(model: fn()) -> !this","!doc":"<p>Private callback called whenever a model has just been defined. This sets up any associations\nthat were waiting for the given model to be defined</p>\n"},"registerDeferredAssociation":{"!type":"fn(association: +Ext.data.association.Association) -> !this","!doc":"<p>Registers an association where one of the models defined doesn't exist yet.\nThe ModelManager will check when new models are registered if it can link them\ntogether</p>\n"},"registerType":{"!type":"fn(name: ?, config: ?) -> !this","!doc":"<p>Registers a model definition. All model plugins marked with isDefault: true are bootstrapped\nimmediately, as are any addition plugins defined in the model config.</p>\n"},"unregisterType":{"!type":"fn(name: ?) -> !this","!doc":"<p>Unregisters a model definition. Generally used by stores with implicit model classes.</p>\n"}},"Number":{"!doc":"<p>A collection of useful static methods to deal with numbers</p>\n","constrain":{"!type":"fn(number: number, min: number, max: number) -> number","!doc":"<p>Checks whether or not the passed number is within a desired range.  If the number is already within the\nrange it is returned, otherwise the min or max value is returned depending on which side of the range is\nexceeded. Note that this method returns the constrained value but does not change the current number.</p>\n"},"correctFloat":{"!type":"fn(The: number) -> number","!doc":"<p>Corrects floating point numbers that overflow to a non-precise\nvalue because of their floating nature, for example <code>0.1 + 0.2</code></p>\n"},"from":{"!type":"fn(value: ?, defaultValue: number) -> number","!doc":"<p>Validate that a value is numeric and convert it to a number if necessary. Returns the specified default value if\nit is not.</p>\n\n<pre><code><a href=\"#!/api/Ext.Number-method-from\" rel=\"Ext.Number-method-from\" class=\"docClass\">Ext.Number.from</a>('1.23', 1); // returns 1.23\n<a href=\"#!/api/Ext.Number-method-from\" rel=\"Ext.Number-method-from\" class=\"docClass\">Ext.Number.from</a>('abc', 1); // returns 1\n</code></pre>\n"},"randomInt":{"!type":"fn(from: number, to: number) -> number","!doc":"<p>Returns a random integer between the specified range (inclusive)</p>\n"},"snap":{"!type":"fn(value: number, increment: number, minValue: number, maxValue: number) -> number","!doc":"<p>Snaps the passed number between stopping points based upon a passed increment value.</p>\n\n<p>The difference between this and <a href=\"#!/api/Ext.Number-method-snapInRange\" rel=\"Ext.Number-method-snapInRange\" class=\"docClass\">snapInRange</a> is that <a href=\"#!/api/Ext.Number-method-snapInRange\" rel=\"Ext.Number-method-snapInRange\" class=\"docClass\">snapInRange</a> uses the minValue\nwhen calculating snap points:</p>\n\n<pre><code>r = <a href=\"#!/api/Ext.Number-method-snap\" rel=\"Ext.Number-method-snap\" class=\"docClass\">Ext.Number.snap</a>(56, 2, 55, 65);        // Returns 56 - snap points are zero based\n\nr = <a href=\"#!/api/Ext.Number-method-snapInRange\" rel=\"Ext.Number-method-snapInRange\" class=\"docClass\">Ext.Number.snapInRange</a>(56, 2, 55, 65); // Returns 57 - snap points are based from minValue\n</code></pre>\n"},"snapInRange":{"!type":"fn(value: number, increment: number, minValue?: number, maxValue?: number) -> number","!doc":"<p>Snaps the passed number between stopping points based upon a passed increment value.</p>\n\n<p>The difference between this and <a href=\"#!/api/Ext.Number-method-snap\" rel=\"Ext.Number-method-snap\" class=\"docClass\">snap</a> is that <a href=\"#!/api/Ext.Number-method-snap\" rel=\"Ext.Number-method-snap\" class=\"docClass\">snap</a> does not use the minValue\nwhen calculating snap points:</p>\n\n<pre><code>r = <a href=\"#!/api/Ext.Number-method-snap\" rel=\"Ext.Number-method-snap\" class=\"docClass\">Ext.Number.snap</a>(56, 2, 55, 65);        // Returns 56 - snap points are zero based\n\nr = <a href=\"#!/api/Ext.Number-method-snapInRange\" rel=\"Ext.Number-method-snapInRange\" class=\"docClass\">Ext.Number.snapInRange</a>(56, 2, 55, 65); // Returns 57 - snap points are based from minValue\n</code></pre>\n"},"toFixed":{"!type":"fn(value: number, precision: number) -> !this","!doc":"<p>Formats a number using fixed-point notation</p>\n"}},"Object":{"!doc":"<p>A collection of useful static methods to deal with objects.</p>\n","chain":{"!type":"fn(object: ?) -> !this","!doc":"<p>Returns a new object with the given object as the prototype chain. This method is\ndesigned to mimic the ECMA standard <code>Object.create</code> method and is assigned to that\nfunction when it is available.</p>\n\n<p><strong>NOTE</strong> This method does not support the property definitions capability of the\n<code>Object.create</code> method. Only the first argument is supported.</p>\n"},"classify":{"!type":"fn(object: ?) -> !this"},"each":{"!type":"fn(object: ?, fn: fn(), scope?: ?) -> !this","!doc":"<p>Iterates through an object and invokes the given callback function for each iteration.\nThe iteration can be stopped by returning <code>false</code> in the callback function. For example:</p>\n\n<pre><code>var person = {\n    name: 'Jacky'\n    hairColor: 'black'\n    loves: ['food', 'sleeping', 'wife']\n};\n\n<a href=\"#!/api/Ext.Object-method-each\" rel=\"Ext.Object-method-each\" class=\"docClass\">Ext.Object.each</a>(person, function(key, value, myself) {\n    console.log(key + \":\" + value);\n\n    if (key === 'hairColor') {\n        return false; // stop the iteration\n    }\n});\n</code></pre>\n"},"equals":{"!type":"fn(object1: ?, object2: ?) -> bool","!doc":"<p>Shallow compares the contents of 2 objects using strict equality. Objects are\nconsidered equal if they both have the same set of properties and the\nvalue for those properties equals the other in the corresponding object.</p>\n\n<pre><code>// Returns true\n<a href=\"#!/api/Ext.Object-method-equals\" rel=\"Ext.Object-method-equals\" class=\"docClass\">Ext.Object.equals</a>({\n    foo: 1,\n    bar: 2\n}, {\n    foo: 1,\n    bar: 2\n});\n</code></pre>\n"},"fromQueryString":{"!type":"fn(queryString: string, recursive?: bool) -> ?","!doc":"<p>Converts a query string back into an object.</p>\n\n<p>Non-recursive:</p>\n\n<pre><code><a href=\"#!/api/Ext.Object-method-fromQueryString\" rel=\"Ext.Object-method-fromQueryString\" class=\"docClass\">Ext.Object.fromQueryString</a>(\"foo=1&amp;bar=2\"); // returns {foo: '1', bar: '2'}\n<a href=\"#!/api/Ext.Object-method-fromQueryString\" rel=\"Ext.Object-method-fromQueryString\" class=\"docClass\">Ext.Object.fromQueryString</a>(\"foo=&amp;bar=2\"); // returns {foo: null, bar: '2'}\n<a href=\"#!/api/Ext.Object-method-fromQueryString\" rel=\"Ext.Object-method-fromQueryString\" class=\"docClass\">Ext.Object.fromQueryString</a>(\"some%20price=%24300\"); // returns {'some price': '$300'}\n<a href=\"#!/api/Ext.Object-method-fromQueryString\" rel=\"Ext.Object-method-fromQueryString\" class=\"docClass\">Ext.Object.fromQueryString</a>(\"colors=red&amp;colors=green&amp;colors=blue\"); // returns {colors: ['red', 'green', 'blue']}\n</code></pre>\n\n<p>Recursive:</p>\n\n<pre><code><a href=\"#!/api/Ext.Object-method-fromQueryString\" rel=\"Ext.Object-method-fromQueryString\" class=\"docClass\">Ext.Object.fromQueryString</a>(\n    \"username=Jacky&amp;\"+\n    \"dateOfBirth[day]=1&amp;dateOfBirth[month]=2&amp;dateOfBirth[year]=1911&amp;\"+\n    \"hobbies[0]=coding&amp;hobbies[1]=eating&amp;hobbies[2]=sleeping&amp;\"+\n    \"hobbies[3][0]=nested&amp;hobbies[3][1]=stuff\", true);\n\n// returns\n{\n    username: 'Jacky',\n    dateOfBirth: {\n        day: '1',\n        month: '2',\n        year: '1911'\n    },\n    hobbies: ['coding', 'eating', 'sleeping', ['nested', 'stuff']]\n}\n</code></pre>\n"},"getKey":{"!type":"fn(object: ?, value: ?) -> !this","!doc":"<p>Returns the first matching key corresponding to the given value.\nIf no matching value is found, null is returned.</p>\n\n<pre><code>var person = {\n    name: 'Jacky',\n    loves: 'food'\n};\n\nalert(<a href=\"#!/api/Ext.Object-method-getKey\" rel=\"Ext.Object-method-getKey\" class=\"docClass\">Ext.Object.getKey</a>(person, 'food')); // alerts 'loves'\n</code></pre>\n"},"getKeys":{"!type":"fn(object: ?) -> [string]","!doc":"<p>Gets all keys of the given object as an array.</p>\n\n<pre><code>var values = <a href=\"#!/api/Ext.Object-method-getKeys\" rel=\"Ext.Object-method-getKeys\" class=\"docClass\">Ext.Object.getKeys</a>({\n    name: 'Jacky',\n    loves: 'food'\n}); // ['name', 'loves']\n</code></pre>\n"},"getSize":{"!type":"fn(object: ?) -> number","!doc":"<p>Gets the total number of this object's own properties</p>\n\n<pre><code>var size = <a href=\"#!/api/Ext.Object-method-getSize\" rel=\"Ext.Object-method-getSize\" class=\"docClass\">Ext.Object.getSize</a>({\n    name: 'Jacky',\n    loves: 'food'\n}); // size equals 2\n</code></pre>\n"},"getValues":{"!type":"fn(object: ?) -> [?]","!doc":"<p>Gets all values of the given object as an array.</p>\n\n<pre><code>var values = <a href=\"#!/api/Ext.Object-method-getValues\" rel=\"Ext.Object-method-getValues\" class=\"docClass\">Ext.Object.getValues</a>({\n    name: 'Jacky',\n    loves: 'food'\n}); // ['Jacky', 'food']\n</code></pre>\n"},"isEmpty":{"!type":"fn(object: ?) -> bool","!doc":"<p>Checks if there are any properties on this object.</p>\n"},"merge":{"!type":"fn(destination: ?, object: ?) -> ?","!doc":"<p>Merges any number of objects recursively without referencing them or their children.</p>\n\n<pre><code>var extjs = {\n    companyName: 'Ext JS',\n    products: ['Ext JS', 'Ext GWT', 'Ext Designer'],\n    isSuperCool: true,\n    office: {\n        size: 2000,\n        location: 'Palo Alto',\n        isFun: true\n    }\n};\n\nvar newStuff = {\n    companyName: 'Sencha Inc.',\n    products: ['Ext JS', 'Ext GWT', 'Ext Designer', 'Sencha Touch', 'Sencha Animator'],\n    office: {\n        size: 40000,\n        location: 'Redwood City'\n    }\n};\n\nvar sencha = <a href=\"#!/api/Ext.Object-method-merge\" rel=\"Ext.Object-method-merge\" class=\"docClass\">Ext.Object.merge</a>(extjs, newStuff);\n\n// extjs and sencha then equals to\n{\n    companyName: 'Sencha Inc.',\n    products: ['Ext JS', 'Ext GWT', 'Ext Designer', 'Sencha Touch', 'Sencha Animator'],\n    isSuperCool: true,\n    office: {\n        size: 40000,\n        location: 'Redwood City',\n        isFun: true\n    }\n}\n</code></pre>\n"},"mergeIf":{"!type":"fn(destination: ?) -> !this"},"toQueryObjects":{"!type":"fn(name: string, value: ?|[?], recursive?: bool) -> [?]","!doc":"<p>Converts a <code>name</code> - <code>value</code> pair to an array of objects with support for nested structures. Useful to construct\nquery strings. For example:</p>\n\n<pre><code>var objects = <a href=\"#!/api/Ext.Object-method-toQueryObjects\" rel=\"Ext.Object-method-toQueryObjects\" class=\"docClass\">Ext.Object.toQueryObjects</a>('hobbies', ['reading', 'cooking', 'swimming']);\n\n// objects then equals:\n[\n    { name: 'hobbies', value: 'reading' },\n    { name: 'hobbies', value: 'cooking' },\n    { name: 'hobbies', value: 'swimming' },\n];\n\nvar objects = <a href=\"#!/api/Ext.Object-method-toQueryObjects\" rel=\"Ext.Object-method-toQueryObjects\" class=\"docClass\">Ext.Object.toQueryObjects</a>('dateOfBirth', {\n    day: 3,\n    month: 8,\n    year: 1987,\n    extra: {\n        hour: 4\n        minute: 30\n    }\n}, true); // Recursive\n\n// objects then equals:\n[\n    { name: 'dateOfBirth[day]', value: 3 },\n    { name: 'dateOfBirth[month]', value: 8 },\n    { name: 'dateOfBirth[year]', value: 1987 },\n    { name: 'dateOfBirth[extra][hour]', value: 4 },\n    { name: 'dateOfBirth[extra][minute]', value: 30 },\n];\n</code></pre>\n"},"toQueryString":{"!type":"fn(object: ?, recursive?: bool) -> string","!doc":"<p>Takes an object and converts it to an encoded query string.</p>\n\n<p>Non-recursive:</p>\n\n<pre><code><a href=\"#!/api/Ext.Object-method-toQueryString\" rel=\"Ext.Object-method-toQueryString\" class=\"docClass\">Ext.Object.toQueryString</a>({foo: 1, bar: 2}); // returns \"foo=1&amp;bar=2\"\n<a href=\"#!/api/Ext.Object-method-toQueryString\" rel=\"Ext.Object-method-toQueryString\" class=\"docClass\">Ext.Object.toQueryString</a>({foo: null, bar: 2}); // returns \"foo=&amp;bar=2\"\n<a href=\"#!/api/Ext.Object-method-toQueryString\" rel=\"Ext.Object-method-toQueryString\" class=\"docClass\">Ext.Object.toQueryString</a>({'some price': '$300'}); // returns \"some%20price=%24300\"\n<a href=\"#!/api/Ext.Object-method-toQueryString\" rel=\"Ext.Object-method-toQueryString\" class=\"docClass\">Ext.Object.toQueryString</a>({date: new Date(2011, 0, 1)}); // returns \"date=%222011-01-01T00%3A00%3A00%22\"\n<a href=\"#!/api/Ext.Object-method-toQueryString\" rel=\"Ext.Object-method-toQueryString\" class=\"docClass\">Ext.Object.toQueryString</a>({colors: ['red', 'green', 'blue']}); // returns \"colors=red&amp;colors=green&amp;colors=blue\"\n</code></pre>\n\n<p>Recursive:</p>\n\n<pre><code><a href=\"#!/api/Ext.Object-method-toQueryString\" rel=\"Ext.Object-method-toQueryString\" class=\"docClass\">Ext.Object.toQueryString</a>({\n    username: 'Jacky',\n    dateOfBirth: {\n        day: 1,\n        month: 2,\n        year: 1911\n    },\n    hobbies: ['coding', 'eating', 'sleeping', ['nested', 'stuff']]\n}, true); // returns the following string (broken down and url-decoded for ease of reading purpose):\n// username=Jacky\n//    &amp;dateOfBirth[day]=1&amp;dateOfBirth[month]=2&amp;dateOfBirth[year]=1911\n//    &amp;hobbies[0]=coding&amp;hobbies[1]=eating&amp;hobbies[2]=sleeping&amp;hobbies[3][0]=nested&amp;hobbies[3][1]=stuff\n</code></pre>\n"}},"PluginManager":{"!doc":"<p>Provides a registry of available Plugin classes indexed by a mnemonic code known as the Plugin's ptype.</p>\n\n<p>A plugin may be specified simply as a <em>config object</em> as long as the correct <code>ptype</code> is specified:</p>\n\n<pre><code>{\n    ptype: 'gridviewdragdrop',\n    dragText: 'Drag and drop to reorganize'\n}\n</code></pre>\n\n<p>Or just use the ptype on its own:</p>\n\n<pre><code>'gridviewdragdrop'\n</code></pre>\n\n<p>Alternatively you can instantiate the plugin with <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.plugin.DragDrop\" rel=\"Ext.grid.plugin.DragDrop\" class=\"docClass\">Ext.grid.plugin.DragDrop</a>', {\n    dragText: 'Drag and drop to reorganize'\n})\n</code></pre>\n","!type":"fn(config: Ext_PluginManager_cfg)","prototype":{"!proto":"Ext.AbstractManager.prototype"},"typeName":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"create":{"!type":"fn(config: ?, defaultType?: fn()) -> +Ext.Component","!doc":"<p>Creates a new Plugin from the specified config object using the config object's ptype to determine the class to\ninstantiate.</p>\n"},"findByType":{"!type":"fn(type: string, defaultsOnly: bool) -> [+Ext.AbstractPlugin]","!doc":"<p>Returns all plugins registered with the given type. Here, 'type' refers to the type of plugin, not its ptype.</p>\n"}},"ProgressBar":{"!doc":"<p>An updateable progress bar component. The progress bar supports two different modes: manual and automatic.</p>\n\n<p>In manual mode, you are responsible for showing, updating (via <a href=\"#!/api/Ext.ProgressBar-method-updateProgress\" rel=\"Ext.ProgressBar-method-updateProgress\" class=\"docClass\">updateProgress</a>) and clearing the progress bar\nas needed from your own code. This method is most appropriate when you want to show progress throughout an operation\nthat has predictable points of interest at which you can update the control.</p>\n\n<p>In automatic mode, you simply call <a href=\"#!/api/Ext.ProgressBar-method-wait\" rel=\"Ext.ProgressBar-method-wait\" class=\"docClass\">wait</a> and let the progress bar run indefinitely, only clearing it once the\noperation is complete. You can optionally have the progress bar wait for a specific amount of time and then clear\nitself. Automatic mode is most appropriate for timed operations or asynchronous operations in which you have no need\nfor indicating intermediate progress.</p>\n\n<pre class='inline-example '><code>var p = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.ProgressBar\" rel=\"Ext.ProgressBar\" class=\"docClass\">Ext.ProgressBar</a>', {\n   renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n   width: 300\n});\n\n// Wait for 5 seconds, then update the status el (progress bar will auto-reset)\np.wait({\n    interval: 500, //bar will move fast!\n    duration: 50000,\n    increment: 15,\n    text: 'Updating...',\n    scope: this,\n    fn: function(){\n        p.updateText('Done!');\n    }\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_ProgressBar_cfg)","prototype":{"!proto":"Ext.Component.prototype","animate":{"!type":"bool|?","!doc":"<p>True to animate the progress bar during transitions, or an animation configuration\n(see the <a href=\"#!/api/Ext.ProgressBar-method-animate\" rel=\"Ext.ProgressBar-method-animate\" class=\"docClass\">animate</a> method for details).</p>\n"},"baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to the progress bar's wrapper element.</p>\n"},"componentLayout":{"!type":"string|?","!doc":"<p>The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout\nmanager which sizes a Component's internal structure in response to the Component being sized.</p>\n\n<p>Generally, developers will not use this configuration as all provided Components which need their internal\nelements sizing (Such as <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">input fields</a>) come with their own componentLayout managers.</p>\n\n<p>The <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used on instances of the base <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\nclass which simply sizes the Component's encapsulating element to the height and width specified in the\n<a href=\"#!/api/Ext.ProgressBar-method-setSize\" rel=\"Ext.ProgressBar-method-setSize\" class=\"docClass\">setSize</a> method.</p>\n"},"id":{"!type":"string","!doc":"<p>The progress bar element's id (defaults to an auto-generated id)</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.ProgressBar-method-getEl\" rel=\"Ext.ProgressBar-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.ProgressBar-method-getEl\" rel=\"Ext.ProgressBar-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.ProgressBar-cfg-renderSelectors\" rel=\"Ext.ProgressBar-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.ProgressBar-cfg-childEls\" rel=\"Ext.ProgressBar-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"},"text":{"!type":"string","!doc":"<p>The text shown in the progress bar.</p>\n"},"textEl":{"!type":"string|+HTMLElement|+Ext.Element","!doc":"<p>The element to render the progress text to (defaults to the progress bar's internal text element)</p>\n"},"value":{"!type":"number","!doc":"<p>A floating point value between 0 and 1 (e.g., .5)</p>\n"},"childEls":{"!type":"[?]"},"waitTimer":{"!type":"?","!doc":"<p>private</p>\n"},"applyText":{"!type":"fn(text: ?) -> !this"},"clearTimer":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"getText":{"!type":"fn() -> !this"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"initRenderData":{"!type":"fn() -> ?","!doc":"<p>Initialized the renderData to be used when rendering the renderTpl.</p>\n"},"isWaiting":{"!type":"fn() -> bool","!doc":"<p>Returns true if the progress bar is currently in a <a href=\"#!/api/Ext.ProgressBar-method-wait\" rel=\"Ext.ProgressBar-method-wait\" class=\"docClass\">wait</a> operation</p>\n"},"onDestroy":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the destroy operation.\nAfter calling the superclass's onDestroy, the Component will be destroyed.</p>\n"},"onRender":{"!type":"fn() -> !this","!doc":"<p>Template method called when this Component's DOM structure is created.</p>\n\n<p>At this point, this Component's (and all descendants') DOM structure <em>exists</em> but it has not\nbeen layed out (positioned and sized).</p>\n\n<p>Subclasses which override this to gain access to the structure at render time should\ncall the parent class's method before attempting to access any child elements of the Component.</p>\n"},"reset":{"!type":"fn(hide?: bool) -> +Ext.ProgressBar","!doc":"<p>Resets the progress bar value to 0 and text to empty string. If hide = true, the progress bar will also be hidden\n(using the <a href=\"#!/api/Ext.ProgressBar-cfg-hideMode\" rel=\"Ext.ProgressBar-cfg-hideMode\" class=\"docClass\">hideMode</a> property internally).</p>\n"},"updateProgress":{"!type":"fn(value?: number, text?: string, animate?: bool) -> +Ext.ProgressBar","!doc":"<p>Updates the progress bar value, and optionally its text. If the text argument is not specified, any existing text\nvalue will be unchanged. To blank out existing text, pass ''. Note that even if the progress bar value exceeds 1,\nit will never automatically reset -- you are responsible for determining when the progress is complete and\ncalling <a href=\"#!/api/Ext.ProgressBar-method-reset\" rel=\"Ext.ProgressBar-method-reset\" class=\"docClass\">reset</a> to clear and/or hide the control.</p>\n"},"updateText":{"!type":"fn(text?: string) -> +Ext.ProgressBar","!doc":"<p>Updates the progress bar text. If specified, textEl will be updated, otherwise the progress bar itself will\ndisplay the updated text.</p>\n"},"wait":{"!type":"fn(config?: ?) -> +Ext.ProgressBar","!doc":"<p>Initiates an auto-updating progress bar. A duration can be specified, in which case the progress bar will\nautomatically reset after a fixed amount of time and optionally call a callback function if specified. If no\nduration is passed in, then the progress bar will run indefinitely and must be manually cleared by calling\n<a href=\"#!/api/Ext.ProgressBar-method-reset\" rel=\"Ext.ProgressBar-method-reset\" class=\"docClass\">reset</a>.</p>\n\n<p>Example usage:</p>\n\n<pre><code>var p = new <a href=\"#!/api/Ext.ProgressBar\" rel=\"Ext.ProgressBar\" class=\"docClass\">Ext.ProgressBar</a>({\n   renderTo: 'my-el'\n});\n\n//Wait for 5 seconds, then update the status el (progress bar will auto-reset)\nvar p = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.ProgressBar\" rel=\"Ext.ProgressBar\" class=\"docClass\">Ext.ProgressBar</a>', {\n   renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n   width: 300\n});\n\n//Wait for 5 seconds, then update the status el (progress bar will auto-reset)\np.wait({\n   interval: 500, //bar will move fast!\n   duration: 50000,\n   increment: 15,\n   text: 'Updating...',\n   scope: this,\n   fn: function(){\n      p.updateText('Done!');\n   }\n});\n\n//Or update indefinitely until some async action completes, then reset manually\np.wait();\nmyAction.on('complete', function(){\n    p.reset();\n    p.updateText('Done!');\n});\n</code></pre>\n"},"update":{"!type":"fn(this: +Ext.ProgressBar, value: number, text: string, eOpts: ?)","!doc":"<p>Fires after each update interval</p>\n"}}},"Queryable":{"!doc":"<p>A mixin for providing query related methods for <a href=\"#!/api/Ext.ComponentQuery\" rel=\"Ext.ComponentQuery\" class=\"docClass\">Ext.ComponentQuery</a> for components that\nimplement getRefItems.</p>\n","prototype":{"isQueryable":{"!type":"bool"},"child":{"!type":"fn(selector?: string|+Ext.Component) -> ?","!doc":"<p>Retrieves the first direct child of this container which matches the passed selector or component.\nThe passed in selector must comply with an <a href=\"#!/api/Ext.ComponentQuery\" rel=\"Ext.ComponentQuery\" class=\"docClass\">Ext.ComponentQuery</a> selector, or it can be an actual <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>.</p>\n"},"down":{"!type":"fn(selector?: string|+Ext.Component) -> ?","!doc":"<p>Retrieves the first descendant of this container which matches the passed selector.\nThe passed in selector must comply with an <a href=\"#!/api/Ext.ComponentQuery\" rel=\"Ext.ComponentQuery\" class=\"docClass\">Ext.ComponentQuery</a> selector, or it can be an actual <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>.</p>\n"},"getRefItems":{"!type":"fn() -> !this"},"query":{"!type":"fn(selector?: string) -> [+Ext.Component]","!doc":"<p>Retrieves all descendant components which match the passed selector.\nExecutes an <a href=\"#!/api/Ext.ComponentQuery-method-query\" rel=\"Ext.ComponentQuery-method-query\" class=\"docClass\">Ext.ComponentQuery.query</a> using this container as its root.</p>\n"},"queryBy":{"!type":"fn(fn: fn(), scope?: ?) -> [+Ext.Component]","!doc":"<p>Retrieves all descendant components which match the passed function.\nThe function should return false for components that are to be\nexcluded from the selection.</p>\n"},"queryById":{"!type":"fn(id: string) -> +Ext.Component","!doc":"<p>Finds a component at any level under this container matching the id/itemId.\nThis is a shorthand for calling ct.down('#' + id);</p>\n"}}},"Shadow":{"!doc":"<p>Simple class that can provide a shadow effect for any element.  Note that the element\nMUST be absolutely positioned, and the shadow does not provide any shimming.  This\nshould be used only in simple cases - for more advanced functionality that can also\nprovide the same shadow effect, see the <a href=\"#!/api/Ext.dom.Layer\" rel=\"Ext.dom.Layer\" class=\"docClass\">Ext.Layer</a> class.</p>\n","!type":"fn(config?: Ext_Shadow_cfg)","prototype":{"!proto":"Ext.Base.prototype","mode":{"!type":"string","!doc":"<p>The shadow display mode.  Supports the following options:</p>\n\n<ul>\n<li>sides : Shadow displays on both sides and bottom only</li>\n<li>frame : Shadow displays equally on all four sides</li>\n<li>drop : Traditional bottom-right drop shadow</li>\n</ul>\n\n"},"offset":{"!type":"number","!doc":"<p>The number of pixels to offset the shadow from the element</p>\n"},"boxShadowProperty":{"!type":"?","!doc":"<p>private - CSS property to use to set the box shadow</p>\n"},"defaultMode":{"!type":"string","!doc":"<p>private</p>\n"},"localXYNames":{"!type":"?"},"getShadowSize":{"!type":"fn() -> [number]","!doc":"<p>Returns the shadow size on each side of the element in standard CSS order: top, right, bottom, left;</p>\n"},"hide":{"!type":"fn() -> !this","!doc":"<p>Hides this shadow</p>\n"},"isVisible":{"!type":"fn() -> !this","!doc":"<p>Returns true if the shadow is visible, else false</p>\n"},"realign":{"!type":"fn(left: number, top: number, width: number, height: number) -> !this","!doc":"<p>Direct alignment when values are already available. Show must be called at least once before\ncalling this method to ensure it is initialized.</p>\n"},"setOpacity":{"!type":"fn(opacity: number) -> !this","!doc":"<p>Sets the opacity of the shadow</p>\n"},"setZIndex":{"!type":"fn(zindex: number) -> !this","!doc":"<p>Adjust the z-index of this shadow</p>\n"},"show":{"!type":"fn(targetEl: string|+HTMLElement|+Ext.Element) -> !this","!doc":"<p>Displays the shadow under the target element</p>\n"}}},"ShadowPool":{"!doc":"<p>Private utility class that manages the internal Shadow cache.</p>\n","markup":{"!type":"?"},"shadows":{"!type":"[?]"},"pull":{"!type":"fn() -> !this"},"push":{"!type":"fn(sh: ?) -> !this"},"reset":{"!type":"fn() -> !this"}},"String":{"!doc":"<p>A collection of useful static methods to deal with strings.</p>\n","addCharacterEntities":{"!type":"fn(entities: ?) -> !this","!doc":"<p>Adds a set of character entity definitions to the set used by\n<a href=\"#!/api/Ext.String-method-htmlEncode\" rel=\"Ext.String-method-htmlEncode\" class=\"docClass\">htmlEncode</a> and <a href=\"#!/api/Ext.String-method-htmlDecode\" rel=\"Ext.String-method-htmlDecode\" class=\"docClass\">htmlDecode</a>.</p>\n\n<p>This object should be keyed by the entity name sequence,\nwith the value being the textual representation of the entity.</p>\n\n<pre><code> <a href=\"#!/api/Ext.String-method-addCharacterEntities\" rel=\"Ext.String-method-addCharacterEntities\" class=\"docClass\">Ext.String.addCharacterEntities</a>({\n     '&amp;amp;Uuml;':'Ü',\n     '&amp;amp;ccedil;':'ç',\n     '&amp;amp;ntilde;':'ñ',\n     '&amp;amp;egrave;':'è'\n });\n var s = <a href=\"#!/api/Ext.String-method-htmlEncode\" rel=\"Ext.String-method-htmlEncode\" class=\"docClass\">Ext.String.htmlEncode</a>(\"A string with entities: èÜçñ\");\n</code></pre>\n\n<p><strong>Note:</strong> the values of the character entities defined on this object are expected\nto be single character values.  As such, the actual values represented by the\ncharacters are sensitive to the character encoding of the JavaScript source\nfile when defined in string literal form. Script tags referencing server\nresources with character entities must ensure that the 'charset' attribute\nof the script node is consistent with the actual character encoding of the\nserver resource.</p>\n\n<p>The set of character entities may be reset back to the default state by using\nthe <a href=\"#!/api/Ext.String-method-resetCharacterEntities\" rel=\"Ext.String-method-resetCharacterEntities\" class=\"docClass\">resetCharacterEntities</a> method</p>\n"},"capitalize":{"!type":"fn(string: string) -> string","!doc":"<p>Capitalize the given string</p>\n"},"createVarName":{"!type":"fn(s: string) -> string","!doc":"<p>Converts a string of characters into a legal, parse-able JavaScript <code>var</code> name as long as the passed\nstring contains at least one alphabetic character. Non alphanumeric characters, and <em>leading</em> non alphabetic\ncharacters will be removed.</p>\n"},"ellipsis":{"!type":"fn(value: string, length: number, word?: bool) -> string","!doc":"<p>Truncate a string and add an ellipsis ('...') to the end if it exceeds the specified length.</p>\n"},"endsWith":{"!type":"fn(s: string, start: string, ignoreCase?: bool) -> !this","!doc":"<p>Checks if a string ends with a substring</p>\n"},"escape":{"!type":"fn(string: string) -> string","!doc":"<p>Escapes the passed string for ' and \\</p>\n"},"escapeRegex":{"!type":"fn(string: string) -> string","!doc":"<p>Escapes the passed string for use in a regular expression.</p>\n"},"format":{"!type":"fn(string: string, values: +Mixed) -> string","!doc":"<p>Allows you to define a tokenized string and pass an arbitrary number of arguments to replace the tokens.  Each\ntoken must be unique, and must increment in the format {0}, {1}, etc.  Example usage:</p>\n\n<pre><code>var cls = 'my-class',\n    text = 'Some text';\nvar s = <a href=\"#!/api/Ext.String-method-format\" rel=\"Ext.String-method-format\" class=\"docClass\">Ext.String.format</a>('&lt;div class=\"{0}\"&gt;{1}&lt;/div&gt;', cls, text);\n// s now contains the string: '&lt;div class=\"my-class\"&gt;Some text&lt;/div&gt;'\n</code></pre>\n"},"htmlDecode":{"!type":"fn(value: string) -> string","!doc":"<p>Convert certain characters (&amp;, &lt;, >, ', and \") from their HTML character equivalents.</p>\n"},"htmlEncode":{"!type":"fn(value: string) -> string","!doc":"<p>Convert certain characters (&amp;, &lt;, >, ', and \") to their HTML character equivalents for literal display in web pages.</p>\n"},"insert":{"!type":"fn(s: string, value: string, index: number) -> string","!doc":"<p>Inserts a substring into a string.</p>\n"},"leftPad":{"!type":"fn(string: string, size: number, character?: string) -> string","!doc":"<p>Pads the left side of a string with a specified character.  This is especially useful\nfor normalizing number and date strings.  Example usage:</p>\n\n<pre><code>var s = <a href=\"#!/api/Ext.String-method-leftPad\" rel=\"Ext.String-method-leftPad\" class=\"docClass\">Ext.String.leftPad</a>('123', 5, '0');\n// s now contains the string: '00123'\n</code></pre>\n"},"repeat":{"!type":"fn(pattern: string, count: number, sep: string) -> !this","!doc":"<p>Returns a string with a specified number of repetitions a given string pattern.\nThe pattern be separated by a different string.</p>\n\n<pre><code> var s = <a href=\"#!/api/Ext.String-method-repeat\" rel=\"Ext.String-method-repeat\" class=\"docClass\">Ext.String.repeat</a>('---', 4); // = '------------'\n var t = <a href=\"#!/api/Ext.String-method-repeat\" rel=\"Ext.String-method-repeat\" class=\"docClass\">Ext.String.repeat</a>('--', 3, '/'); // = '--/--/--'\n</code></pre>\n"},"resetCharacterEntities":{"!type":"fn() -> !this","!doc":"<p>Resets the set of character entity definitions used by\n<a href=\"#!/api/Ext.String-method-htmlEncode\" rel=\"Ext.String-method-htmlEncode\" class=\"docClass\">htmlEncode</a> and <a href=\"#!/api/Ext.String-method-htmlDecode\" rel=\"Ext.String-method-htmlDecode\" class=\"docClass\">htmlDecode</a> back to the\ndefault state.</p>\n"},"splitWords":{"!type":"fn(words: string|[?]) -> !this","!doc":"<p>Splits a string of space separated words into an array, trimming as needed. If the\nwords are already an array, it is returned.</p>\n"},"startsWith":{"!type":"fn(s: string, start: string, ignoreCase?: bool) -> !this","!doc":"<p>Checks if a string starts with a substring</p>\n"},"toggle":{"!type":"fn(string: string, value: string, other: string) -> string","!doc":"<p>Utility function that allows you to easily switch a string between two alternating values.  The passed value\nis compared to the current string, and if they are equal, the other value that was passed in is returned.  If\nthey are already different, the first value passed in is returned.  Note that this method returns the new value\nbut does not change the current string.</p>\n\n<pre><code>// alternate sort directions\nsort = <a href=\"#!/api/Ext.String-method-toggle\" rel=\"Ext.String-method-toggle\" class=\"docClass\">Ext.String.toggle</a>(sort, 'ASC', 'DESC');\n\n// instead of conditional logic:\nsort = (sort === 'ASC' ? 'DESC' : 'ASC');\n</code></pre>\n"},"trim":{"!type":"fn(string: string) -> string","!doc":"<p>Trims whitespace from either end of a string, leaving spaces within the string intact.  Example:</p>\n\n<pre><code>var s = '  foo bar  ';\nalert('-' + s + '-');                   //alerts \"- foo bar -\"\nalert('-' + <a href=\"#!/api/Ext.String-method-trim\" rel=\"Ext.String-method-trim\" class=\"docClass\">Ext.String.trim</a>(s) + '-');  //alerts \"-foo bar-\"\n</code></pre>\n"},"uncapitalize":{"!type":"fn(string: string) -> string","!doc":"<p>Uncapitalize the given string.</p>\n"},"urlAppend":{"!type":"fn(url: string, string: string) -> string","!doc":"<p>Appends content to the query string of a URL, handling logic for whether to place\na question mark or ampersand.</p>\n"}},"Template":{"!doc":"<p>Represents an HTML fragment template. Templates may be <a href=\"#!/api/Ext.Template-method-compile\" rel=\"Ext.Template-method-compile\" class=\"docClass\">precompiled</a> for greater performance.</p>\n\n<p>An instance of this class may be created by passing to the constructor either a single argument, or multiple\narguments:</p>\n\n<h1>Single argument: String/Array</h1>\n\n<p>The single argument may be either a String or an Array:</p>\n\n<ul>\n<li><p>String:</p>\n\n<pre><code>var t = new <a href=\"#!/api/Ext.Template\" rel=\"Ext.Template\" class=\"docClass\">Ext.Template</a>(\"&lt;div&gt;Hello {0}.&lt;/div&gt;\");\nt.<a href=\"#!/api/Ext.Template-method-append\" rel=\"Ext.Template-method-append\" class=\"docClass\">append</a>('some-element', ['foo']);\n</code></pre></li>\n<li><p>Array:</p>\n\n<p>An Array will be combined with <code>join('')</code>.</p>\n\n<pre><code>var t = new <a href=\"#!/api/Ext.Template\" rel=\"Ext.Template\" class=\"docClass\">Ext.Template</a>([\n    '&lt;div name=\"{id}\"&gt;',\n        '&lt;span class=\"{cls}\"&gt;{name:trim} {value:ellipsis(10)}&lt;/span&gt;',\n    '&lt;/div&gt;',\n]);\nt.<a href=\"#!/api/Ext.Template-method-compile\" rel=\"Ext.Template-method-compile\" class=\"docClass\">compile</a>();\nt.<a href=\"#!/api/Ext.Template-method-append\" rel=\"Ext.Template-method-append\" class=\"docClass\">append</a>('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});\n</code></pre></li>\n</ul>\n\n\n<h1>Multiple arguments: String, Object, Array, ...</h1>\n\n<p>Multiple arguments will be combined with <code>join('')</code>.</p>\n\n<pre><code>var t = new <a href=\"#!/api/Ext.Template\" rel=\"Ext.Template\" class=\"docClass\">Ext.Template</a>(\n    '&lt;div name=\"{id}\"&gt;',\n        '&lt;span class=\"{cls}\"&gt;{name} {value}&lt;/span&gt;',\n    '&lt;/div&gt;',\n    // a configuration object:\n    {\n        compiled: true,      // <a href=\"#!/api/Ext.Template-method-compile\" rel=\"Ext.Template-method-compile\" class=\"docClass\">compile</a> immediately\n    }\n);\n</code></pre>\n\n<h1>Notes</h1>\n\n<ul>\n<li>For a list of available format functions, see <a href=\"#!/api/Ext.util.Format\" rel=\"Ext.util.Format\" class=\"docClass\">Ext.util.Format</a>.</li>\n<li><code>disableFormats</code> reduces <code><a href=\"#!/api/Ext.Template-method-apply\" rel=\"Ext.Template-method-apply\" class=\"docClass\">apply</a></code> time when no formatting is required.</li>\n</ul>\n\n","!type":"fn(html: string, config?: Ext_Template_cfg)","prototype":{"!proto":"Ext.Base.prototype","compiled":{"!type":"bool","!doc":"<p>True to immediately compile the template. Defaults to false.</p>\n"},"disableFormats":{"!type":"bool","!doc":"<p>True to disable format functions in the template. If the template doesn't contain\nformat functions, setting disableFormats to true will reduce apply time. Defaults to false.</p>\n"},"compileARe":{"!type":"+RegExp"},"compileBRe":{"!type":"+RegExp"},"compileCRe":{"!type":"+RegExp"},"isTemplate":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated Template, or subclass thereof.</p>\n"},"re":{"!type":"+RegExp"},"append":{"!type":"fn(el: string|+HTMLElement|+Ext.Element, values: ?|[?], returnElement?: bool) -> +HTMLElement|+Ext.Element","!doc":"<p>Applies the supplied <code>values</code> to the template and appends the new node(s) to the specified <code>el</code>.</p>\n\n<p>For example usage see <a href=\"#!/api/Ext.Template\" rel=\"Ext.Template\" class=\"docClass\">Ext.Template class docs</a>.</p>\n"},"apply":{"!type":"fn(values: ?|[?]) -> string","!doc":"<p>Returns an HTML fragment of this template with the specified values applied.</p>\n"},"applyOut":{"!type":"fn(values: ?|[?], out: [?]) -> [?]","!doc":"<p>Appends the result of this template to the provided output array.</p>\n"},"applyTemplate":{"!type":"fn(values: ?|[?]) -> string","!doc":"<p>Alias for <a href=\"#!/api/Ext.Template-method-apply\" rel=\"Ext.Template-method-apply\" class=\"docClass\">apply</a>.</p>\n"},"compile":{"!type":"fn() -> +Ext.Template","!doc":"<p>Compiles the template into an internal function, eliminating the RegEx overhead.</p>\n"},"doInsert":{"!type":"fn(where: ?, el: ?, values: ?, returnElement: ?) -> !this"},"insertAfter":{"!type":"fn(el: string|+HTMLElement|+Ext.Element, values: ?|[?], returnElement?: bool) -> +HTMLElement|+Ext.Element","!doc":"<p>Applies the supplied values to the template and inserts the new node(s) after el.</p>\n"},"insertBefore":{"!type":"fn(el: string|+HTMLElement|+Ext.Element, values: ?|[?], returnElement?: bool) -> +HTMLElement|+Ext.Element","!doc":"<p>Applies the supplied values to the template and inserts the new node(s) before el.</p>\n"},"insertFirst":{"!type":"fn(el: string|+HTMLElement|+Ext.Element, values: ?|[?], returnElement?: bool) -> +HTMLElement|+Ext.Element","!doc":"<p>Applies the supplied values to the template and inserts the new node(s) as the first child of el.</p>\n"},"overwrite":{"!type":"fn(el: string|+HTMLElement|+Ext.Element, values: ?|[?], returnElement?: bool) -> +HTMLElement|+Ext.Element","!doc":"<p>Applies the supplied values to the template and overwrites the content of el with the new node(s).</p>\n"},"set":{"!type":"fn(html: string, compile?: bool) -> +Ext.Template","!doc":"<p>Sets the HTML used as the template and optionally compiles it.</p>\n"}},"from":{"!type":"fn(el: string|+HTMLElement, config?: ?) -> +Ext.Template","!doc":"<p>Creates a template from the passed element's value (<em>display:none</em> textarea, preferred) or innerHTML.</p>\n"}},"Version":{"!doc":"<p>A utility class that wrap around a string version number and provide convenient\nmethod to perform comparison. See also: <a href=\"#!/api/Ext.Version-static-method-compare\" rel=\"Ext.Version-static-method-compare\" class=\"docClass\">compare</a>. Example:</p>\n\n<pre><code>var version = new <a href=\"#!/api/Ext.Version\" rel=\"Ext.Version\" class=\"docClass\">Ext.Version</a>('1.0.2beta');\nconsole.log(\"Version is \" + version); // Version is 1.0.2beta\n\nconsole.log(version.getMajor()); // 1\nconsole.log(version.getMinor()); // 0\nconsole.log(version.getPatch()); // 2\nconsole.log(version.getBuild()); // 0\nconsole.log(version.getRelease()); // beta\n\nconsole.log(version.isGreaterThan('1.0.1')); // True\nconsole.log(version.isGreaterThan('1.0.2alpha')); // True\nconsole.log(version.isGreaterThan('1.0.2RC')); // False\nconsole.log(version.isGreaterThan('1.0.2')); // False\nconsole.log(version.isLessThan('1.0.2')); // True\n\nconsole.log(version.match(1.0)); // True\nconsole.log(version.match('1.0.2')); // True\n</code></pre>\n","!type":"fn(version: string|number)","prototype":{"equals":{"!type":"fn(target: string|number) -> bool","!doc":"<p>Returns whether this version equals to the supplied argument</p>\n"},"getBuild":{"!type":"fn() -> number","!doc":"<p>Returns the build component value</p>\n"},"getMajor":{"!type":"fn() -> number","!doc":"<p>Returns the major component value</p>\n"},"getMinor":{"!type":"fn() -> number","!doc":"<p>Returns the minor component value</p>\n"},"getPatch":{"!type":"fn() -> number","!doc":"<p>Returns the patch component value</p>\n"},"getRelease":{"!type":"fn() -> number","!doc":"<p>Returns the release component value</p>\n"},"getShortVersion":{"!type":"fn() -> string","!doc":"<p>Returns shortVersion version without dots and release</p>\n"},"gt":{"!type":"fn(target: string|number) -> bool","!doc":"<p>Convenient alias to <a href=\"#!/api/Ext.Version-method-isGreaterThan\" rel=\"Ext.Version-method-isGreaterThan\" class=\"docClass\">isGreaterThan</a></p>\n"},"gtEq":{"!type":"fn(target: string|number) -> bool","!doc":"<p>Convenient alias to <a href=\"#!/api/Ext.Version-method-isGreaterThanOrEqual\" rel=\"Ext.Version-method-isGreaterThanOrEqual\" class=\"docClass\">isGreaterThanOrEqual</a></p>\n"},"isGreaterThan":{"!type":"fn(target: string|number) -> bool","!doc":"<p>Returns whether this version if greater than the supplied argument</p>\n"},"isGreaterThanOrEqual":{"!type":"fn(target: string|number) -> bool","!doc":"<p>Returns whether this version if greater than or equal to the supplied argument</p>\n"},"isLessThan":{"!type":"fn(target: string|number) -> bool","!doc":"<p>Returns whether this version if smaller than the supplied argument</p>\n"},"isLessThanOrEqual":{"!type":"fn(target: string|number) -> bool","!doc":"<p>Returns whether this version if less than or equal to the supplied argument</p>\n"},"lt":{"!type":"fn(target: string|number) -> bool","!doc":"<p>Convenient alias to <a href=\"#!/api/Ext.Version-method-isLessThan\" rel=\"Ext.Version-method-isLessThan\" class=\"docClass\">isLessThan</a></p>\n"},"ltEq":{"!type":"fn(target: string|number) -> bool","!doc":"<p>Convenient alias to <a href=\"#!/api/Ext.Version-method-isLessThanOrEqual\" rel=\"Ext.Version-method-isLessThanOrEqual\" class=\"docClass\">isLessThanOrEqual</a></p>\n"},"match":{"!type":"fn(target: string|number) -> bool","!doc":"<p>Returns whether this version matches the supplied argument. Example:</p>\n\n<pre><code>var version = new <a href=\"#!/api/Ext.Version\" rel=\"Ext.Version\" class=\"docClass\">Ext.Version</a>('1.0.2beta');\nconsole.log(version.match(1)); // True\nconsole.log(version.match(1.0)); // True\nconsole.log(version.match('1.0.2')); // True\nconsole.log(version.match('1.0.2RC')); // False\n</code></pre>\n"},"toArray":{"!type":"fn() -> [number]","!doc":"<p>Returns this format: [major, minor, patch, build, release]. Useful for comparison</p>\n"},"toString":{"!type":"fn() -> string","!doc":"<p>Override the native toString method</p>\n"},"valueOf":{"!type":"fn() -> string","!doc":"<p>Override the native valueOf method</p>\n"}},"compare":{"!type":"fn(current: string, target: string) -> number","!doc":"<p>Compare 2 specified versions, starting from left to right. If a part contains special version strings,\nthey are handled in the following order:\n'dev' &lt; 'alpha' = 'a' &lt; 'beta' = 'b' &lt; 'RC' = 'rc' &lt; '#' &lt; 'pl' = 'p' &lt; 'anything else'</p>\n"},"getComponentValue":{"!type":"fn(value: ?) -> ?","!doc":"<p>Converts a version component to a comparable value</p>\n"}},"WindowManager":{"!doc":"<p>The default global floating Component group that is available automatically.</p>\n\n<p>This manages instances of floating Components which were rendered programatically without\nbeing added to a <a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Container</a>, and for floating Components\nwhich were added into non-floating Containers.</p>\n\n<p><em>Floating</em> Containers create their own instance of ZIndexManager, and floating Components\nadded at any depth below there are managed by that ZIndexManager.</p>\n","!type":"fn(container: ?)","prototype":{"!proto":"Ext.ZIndexManager.prototype"}},"XTemplate":{"!doc":"<p>A template class that supports advanced functionality like:</p>\n\n<ul>\n<li>Autofilling arrays using templates and sub-templates</li>\n<li>Conditional processing with basic comparison operators</li>\n<li>Basic math function support</li>\n<li>Execute arbitrary inline code with special built-in template variables</li>\n<li>Custom member functions</li>\n<li>Many special tags and built-in operators that aren't defined as part of the API, but are supported in the templates that can be created</li>\n</ul>\n\n\n<p>XTemplate provides the templating mechanism built into <a href=\"#!/api/Ext.view.View\" rel=\"Ext.view.View\" class=\"docClass\">Ext.view.View</a>.</p>\n\n<p>The <a href=\"#!/api/Ext.Template\" rel=\"Ext.Template\" class=\"docClass\">Ext.Template</a> describes the acceptable parameters to pass to the constructor. The following examples\ndemonstrate all of the supported features.</p>\n\n<h1>Sample Data</h1>\n\n<p>This is the data object used for reference in each code example:</p>\n\n<pre><code>var data = {\n    name: 'Don Griffin',\n    title: 'Senior Technomage',\n    company: 'Sencha Inc.',\n    drinks: ['Coffee', 'Water', 'More Coffee'],\n    kids: [\n        { name: 'Aubrey',  age: 17 },\n        { name: 'Joshua',  age: 13 },\n        { name: 'Cale',    age: 10 },\n        { name: 'Nikol',   age: 5 },\n        { name: 'Solomon', age: 0 }\n    ]\n};\n</code></pre>\n\n<h1>Auto filling of arrays</h1>\n\n<p>The <strong>tpl</strong> tag and the <strong>for</strong> operator are used to process the provided data object:</p>\n\n<ul>\n<li>If the value specified in for is an array, it will auto-fill, repeating the template block inside the tpl\ntag for each item in the array.</li>\n<li>If for=\".\" is specified, the data object provided is examined.</li>\n<li>If between=\"...\" is specified, the provided value will be inserted between the items.\nThis is also supported in the \"foreach\" looping template.</li>\n<li>While processing an array, the special variable {#} will provide the current array index + 1 (starts at 1, not 0).</li>\n</ul>\n\n\n<p>Examples:</p>\n\n<pre><code>&lt;tpl for=\".\"&gt;...&lt;/tpl&gt;       // loop through array at root node\n&lt;tpl for=\"foo\"&gt;...&lt;/tpl&gt;     // loop through array at foo node\n&lt;tpl for=\"foo.bar\"&gt;...&lt;/tpl&gt; // loop through array at foo.bar node\n&lt;tpl for=\".\" between=\",\"&gt;...&lt;/tpl&gt; // loop through array at root node and insert ',' between each item\n</code></pre>\n\n<p>Using the sample data above:</p>\n\n<pre><code>var tpl = new <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">Ext.XTemplate</a>(\n    '&lt;p&gt;Kids: ',\n    '&lt;tpl for=\".\"&gt;',       // process the data.kids node\n        '&lt;p&gt;{#}. {name}&lt;/p&gt;',  // use current array index to autonumber\n    '&lt;/tpl&gt;&lt;/p&gt;'\n);\ntpl.overwrite(panel.body, data.kids); // pass the kids property of the data object\n</code></pre>\n\n<p>An example illustrating how the <strong>for</strong> property can be leveraged to access specified members of the provided data\nobject to populate the template:</p>\n\n<pre><code>var tpl = new <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">Ext.XTemplate</a>(\n    '&lt;p&gt;Name: {name}&lt;/p&gt;',\n    '&lt;p&gt;Title: {title}&lt;/p&gt;',\n    '&lt;p&gt;Company: {company}&lt;/p&gt;',\n    '&lt;p&gt;Kids: ',\n    '&lt;tpl for=\"kids\"&gt;',     // interrogate the kids property within the data\n        '&lt;p&gt;{name}&lt;/p&gt;',\n    '&lt;/tpl&gt;&lt;/p&gt;'\n);\ntpl.overwrite(panel.body, data);  // pass the root node of the data object\n</code></pre>\n\n<p>Flat arrays that contain values (and not objects) can be auto-rendered using the special <strong><code>{.}</code></strong> variable inside a\nloop. This variable will represent the value of the array at the current index:</p>\n\n<pre><code>var tpl = new <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">Ext.XTemplate</a>(\n    '&lt;p&gt;{name}\\'s favorite beverages:&lt;/p&gt;',\n    '&lt;tpl for=\"drinks\"&gt;',\n        '&lt;div&gt; - {.}&lt;/div&gt;',\n    '&lt;/tpl&gt;'\n);\ntpl.overwrite(panel.body, data);\n</code></pre>\n\n<p>When processing a sub-template, for example while looping through a child array, you can access the parent object's\nmembers via the <strong>parent</strong> object:</p>\n\n<pre><code>var tpl = new <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">Ext.XTemplate</a>(\n    '&lt;p&gt;Name: {name}&lt;/p&gt;',\n    '&lt;p&gt;Kids: ',\n    '&lt;tpl for=\"kids\"&gt;',\n        '&lt;tpl if=\"age &amp;gt; 1\"&gt;',\n            '&lt;p&gt;{name}&lt;/p&gt;',\n            '&lt;p&gt;Dad: {parent.name}&lt;/p&gt;',\n        '&lt;/tpl&gt;',\n    '&lt;/tpl&gt;&lt;/p&gt;'\n);\ntpl.overwrite(panel.body, data);\n</code></pre>\n\n<p>The <strong>foreach</strong> operator is used to loop over an object's properties.  The following\nexample demonstrates looping over the main data object's properties:</p>\n\n<pre><code>var tpl = new <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">Ext.XTemplate</a>(\n    '&lt;dl&gt;',\n        '&lt;tpl foreach=\".\"&gt;',\n            '&lt;dt&gt;{$}&lt;/dt&gt;', // the special **`{$}`** variable contains the property name\n            '&lt;dd&gt;{.}&lt;/dd&gt;', // within the loop, the **`{.}`** variable is set to the property value\n        '&lt;/tpl&gt;',\n    '&lt;/dl&gt;'\n);\ntpl.overwrite(panel.body, data);\n</code></pre>\n\n<h1>Conditional processing with basic comparison operators</h1>\n\n<p>The <strong>tpl</strong> tag and the <strong>if</strong> operator are used to provide conditional checks for deciding whether or not to render\nspecific parts of the template.</p>\n\n<p>Using the sample data above:</p>\n\n<pre><code>var tpl = new <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">Ext.XTemplate</a>(\n    '&lt;p&gt;Name: {name}&lt;/p&gt;',\n    '&lt;p&gt;Kids: ',\n    '&lt;tpl for=\"kids\"&gt;',\n        '&lt;tpl if=\"age &amp;gt; 1\"&gt;',\n            '&lt;p&gt;{name}&lt;/p&gt;',\n        '&lt;/tpl&gt;',\n    '&lt;/tpl&gt;&lt;/p&gt;'\n);\ntpl.overwrite(panel.body, data);\n</code></pre>\n\n<p>More advanced conditionals are also supported:</p>\n\n<pre><code>var tpl = new <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">Ext.XTemplate</a>(\n    '&lt;p&gt;Name: {name}&lt;/p&gt;',\n    '&lt;p&gt;Kids: ',\n    '&lt;tpl for=\"kids\"&gt;',\n        '&lt;p&gt;{name} is a ',\n        '&lt;tpl if=\"age &amp;gt;= 13\"&gt;',\n            '&lt;p&gt;teenager&lt;/p&gt;',\n        '&lt;tpl elseif=\"age &amp;gt;= 2\"&gt;',\n            '&lt;p&gt;kid&lt;/p&gt;',\n        '&lt;tpl else&gt;',\n            '&lt;p&gt;baby&lt;/p&gt;',\n        '&lt;/tpl&gt;',\n    '&lt;/tpl&gt;&lt;/p&gt;'\n);\n\nvar tpl = new <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">Ext.XTemplate</a>(\n    '&lt;p&gt;Name: {name}&lt;/p&gt;',\n    '&lt;p&gt;Kids: ',\n    '&lt;tpl for=\"kids\"&gt;',\n        '&lt;p&gt;{name} is a ',\n        '&lt;tpl switch=\"name\"&gt;',\n            '&lt;tpl case=\"Aubrey\" case=\"Nikol\"&gt;',\n                '&lt;p&gt;girl&lt;/p&gt;',\n            '&lt;tpl default&gt;',\n                '&lt;p&gt;boy&lt;/p&gt;',\n        '&lt;/tpl&gt;',\n    '&lt;/tpl&gt;&lt;/p&gt;'\n);\n</code></pre>\n\n<p>A <code>break</code> is implied between each case and default, however, multiple cases can be listed\nin a single &lt;tpl&gt; tag.</p>\n\n<h1>Using double quotes</h1>\n\n<p>Examples:</p>\n\n<pre><code>var tpl = new <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">Ext.XTemplate</a>(\n    \"&lt;tpl if='age &amp;gt; 1 &amp;&amp; age &amp;lt; 10'&gt;Child&lt;/tpl&gt;\",\n    \"&lt;tpl if='age &amp;gt;= 10 &amp;&amp; age &amp;lt; 18'&gt;Teenager&lt;/tpl&gt;\",\n    \"&lt;tpl if='this.isGirl(name)'&gt;...&lt;/tpl&gt;\",\n    '&lt;tpl if=\"id == \\'download\\'\"&gt;...&lt;/tpl&gt;',\n    \"&lt;tpl if='needsIcon'&gt;&lt;img src='{icon}' class='{iconCls}'/&gt;&lt;/tpl&gt;\",\n    \"&lt;tpl if='name == \\\"Don\\\"'&gt;Hello&lt;/tpl&gt;\"\n);\n</code></pre>\n\n<h1>Basic math support</h1>\n\n<p>The following basic math operators may be applied directly on numeric data values:</p>\n\n<pre><code>+ - * /\n</code></pre>\n\n<p>For example:</p>\n\n<pre><code>var tpl = new <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">Ext.XTemplate</a>(\n    '&lt;p&gt;Name: {name}&lt;/p&gt;',\n    '&lt;p&gt;Kids: ',\n    '&lt;tpl for=\"kids\"&gt;',\n        '&lt;tpl if=\"age &amp;gt; 1\"&gt;',  // &lt;-- Note that the &gt; is encoded\n            '&lt;p&gt;{#}: {name}&lt;/p&gt;',  // &lt;-- Auto-number each item\n            '&lt;p&gt;In 5 Years: {age+5}&lt;/p&gt;',  // &lt;-- Basic math\n            '&lt;p&gt;Dad: {parent.name}&lt;/p&gt;',\n        '&lt;/tpl&gt;',\n    '&lt;/tpl&gt;&lt;/p&gt;'\n);\ntpl.overwrite(panel.body, data);\n</code></pre>\n\n<h1>Execute arbitrary inline code with special built-in template variables</h1>\n\n<p>Anything between <code>{[ ... ]}</code> is considered code to be executed in the scope of the template.\nThe expression is evaluated and the result is included in the generated result. There are\nsome special variables available in that code:</p>\n\n<ul>\n<li><strong>out</strong>: The output array into which the template is being appended (using <code>push</code> to later\n<code>join</code>).</li>\n<li><strong>values</strong>: The values in the current scope. If you are using scope changing sub-templates,\nyou can change what values is.</li>\n<li><strong>parent</strong>: The scope (values) of the ancestor template.</li>\n<li><strong>xindex</strong>: If you are in a \"for\" or \"foreach\" looping template, the index of the loop you are in (1-based).</li>\n<li><strong>xcount</strong>: If you are in a \"for\" looping template, the total length of the array you are looping.</li>\n<li><strong>xkey</strong>: If you are in a \"foreach\" looping template, the key of the current property\nbeing examined.</li>\n</ul>\n\n\n<p>This example demonstrates basic row striping using an inline code block and the xindex variable:</p>\n\n<pre><code>var tpl = new <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">Ext.XTemplate</a>(\n    '&lt;p&gt;Name: {name}&lt;/p&gt;',\n    '&lt;p&gt;Company: {[values.company.toUpperCase() + \", \" + values.title]}&lt;/p&gt;',\n    '&lt;p&gt;Kids: ',\n    '&lt;tpl for=\"kids\"&gt;',\n        '&lt;div class=\"{[xindex % 2 === 0 ? \"even\" : \"odd\"]}\"&gt;',\n        '{name}',\n        '&lt;/div&gt;',\n    '&lt;/tpl&gt;&lt;/p&gt;'\n );\n</code></pre>\n\n<p>Any code contained in \"verbatim\" blocks (using \"{% ... %}\") will be inserted directly in\nthe generated code for the template. These blocks are not included in the output. This\ncan be used for simple things like break/continue in a loop, or control structures or\nmethod calls (when they don't produce output). The <code>this</code> references the template instance.</p>\n\n<pre><code>var tpl = new <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">Ext.XTemplate</a>(\n    '&lt;p&gt;Name: {name}&lt;/p&gt;',\n    '&lt;p&gt;Company: {[values.company.toUpperCase() + \", \" + values.title]}&lt;/p&gt;',\n    '&lt;p&gt;Kids: ',\n    '&lt;tpl for=\"kids\"&gt;',\n        '{% if (xindex % 2 === 0) continue; %}',\n        '{name}',\n        '{% if (xindex &gt; 100) break; %}',\n        '&lt;/div&gt;',\n    '&lt;/tpl&gt;&lt;/p&gt;'\n );\n</code></pre>\n\n<h1>Template member functions</h1>\n\n<p>One or more member functions can be specified in a configuration object passed into the XTemplate constructor for\nmore complex processing:</p>\n\n<pre><code>var tpl = new <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">Ext.XTemplate</a>(\n    '&lt;p&gt;Name: {name}&lt;/p&gt;',\n    '&lt;p&gt;Kids: ',\n    '&lt;tpl for=\"kids\"&gt;',\n        '&lt;tpl if=\"this.isGirl(name)\"&gt;',\n            '&lt;p&gt;Girl: {name} - {age}&lt;/p&gt;',\n        '&lt;tpl else&gt;',\n            '&lt;p&gt;Boy: {name} - {age}&lt;/p&gt;',\n        '&lt;/tpl&gt;',\n        '&lt;tpl if=\"this.isBaby(age)\"&gt;',\n            '&lt;p&gt;{name} is a baby!&lt;/p&gt;',\n        '&lt;/tpl&gt;',\n    '&lt;/tpl&gt;&lt;/p&gt;',\n    {\n        // XTemplate configuration:\n        disableFormats: true,\n        // member functions:\n        isGirl: function(name){\n           return name == 'Aubrey' || name == 'Nikol';\n        },\n        isBaby: function(age){\n           return age &lt; 1;\n        }\n    }\n);\ntpl.overwrite(panel.body, data);\n</code></pre>\n","!type":"fn(html: string, config?: Ext_XTemplate_cfg)","prototype":{"!proto":"Ext.Template.prototype","definitions":{"!type":"string|[?]","!doc":"<p>Optional. A statement, or array of statements which set up <code>var</code>s which may then\nbe accessed within the scope of the generated function.</p>\n"},"emptyObj":{"!type":"?"},"applyOut":{"!type":"fn(values: ?, out: ?, parent: ?) -> [?]","!doc":"<p>Appends the result of this template to the provided output array.</p>\n"},"compile":{"!type":"fn() -> +Ext.XTemplate","!doc":"<p>Does nothing. XTemplates are compiled automatically, so this function simply returns this.</p>\n"}},"getTpl":{"!type":"fn(instance: ?, name: string) -> +Ext.XTemplate","!doc":"<p>Gets an <code>XTemplate</code> from an object (an instance of an <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>'d class).\nMany times, templates are configured high in the class hierarchy and are to be\nshared by all classes that derive from that base. To further complicate matters,\nthese templates are seldom actual instances but are rather configurations. For\nexample:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('MyApp.Class', {\n     extraCls: 'extra-class',\n\n     someTpl: [\n         '&lt;div class=\"{%this.emitClass(out)%}\"&gt;&lt;/div&gt;',\n     {\n         // Member fn - outputs the owing class's extra CSS class\n         emitClass: function(out) {\n             out.push(this.owner.extraCls);\n         }\n     }]\n });\n</code></pre>\n\n<p>The goal being to share that template definition with all instances and even\ninstances of derived classes, until <code>someTpl</code> is overridden. This method will\n\"upgrade\" these configurations to be real <code>XTemplate</code> instances <em>in place</em> (to\navoid creating one instance per object).</p>\n\n<p>The resulting XTemplate will have an <code>owner</code> reference injected which refers back\nto the owning object whether that is an object which has an <em>own instance</em>, or a\nclass prototype. Through this link, XTemplate member functions will be able to access\nprototype properties of its owning class.</p>\n"}},"XTemplateCompiler":{"!doc":"<p>This class compiles the XTemplate syntax into a function object. The function is used\nlike so:</p>\n\n<pre><code> function (out, values, parent, xindex, xcount) {\n     // out is the output array to store results\n     // values, parent, xindex and xcount have their historical meaning\n }\n</code></pre>\n","!type":"fn(config: Ext_XTemplateCompiler_cfg)","prototype":{"!proto":"Ext.XTemplateParser.prototype","aposRe":{"!type":"+RegExp"},"createArrayTest":{"!type":"?"},"intRe":{"!type":"+RegExp"},"newLineRe":{"!type":"+RegExp"},"propNameRe":{"!type":"+RegExp"},"tagRe":{"!type":"+RegExp"},"useEval":{"!type":"?","!doc":"<p>Chrome really likes \"new Function\" to realize the code block (as in it is\n2x-3x faster to call it than using eval), but Firefox chokes on it badly.\nIE and Opera are also fine with the \"new Function\" technique.</p>\n"},"useFormat":{"!type":"bool"},"useIndex":{"!type":"?","!doc":"<p>See http://jsperf.com/nige-array-append for quickest way to append to an array of unknown length\n(Due to arbitrary code execution inside a template, we cannot easily track the length in  var)\nOn IE6 to 8, myArray[myArray.length]='foo' is better. On other browsers myArray.push('foo') is better.</p>\n"},"addFn":{"!type":"fn(body: ?) -> !this","!doc":"<hr />\n\n<p> Internal</p>\n"},"compile":{"!type":"fn(tpl: ?) -> !this"},"doCase":{"!type":"fn(action: ?) -> !this","!doc":"<p>This method is called to process <code>&lt;tpl case=\"action\"&gt;</code>. If there are other attributes,\nthese are passed in the actions object.</p>\n"},"doDefault":{"!type":"fn() -> !this","!doc":"<p>This method is called to process <code>&lt;tpl default&gt;</code>.</p>\n"},"doElse":{"!type":"fn() -> !this","!doc":"<p>This method is called to process <code>&lt;tpl else&gt;</code>.</p>\n"},"doElseIf":{"!type":"fn(action: ?, actions: ?) -> !this","!doc":"<p>This method is called to process <code>&lt;tpl elseif=\"action\"&gt;</code>. If there are other attributes,\nthese are passed in the actions object.</p>\n"},"doEnd":{"!type":"fn(type: ?, actions: ?) -> !this","!doc":"<p>This method is called to process <code>&lt;/tpl&gt;</code>. It is given the action type that started\nthe tpl and the set of additional actions.</p>\n"},"doEval":{"!type":"fn(text: ?) -> !this","!doc":"<p>This method is called to process <code>{% text %}</code>.</p>\n"},"doExec":{"!type":"fn(action: ?, actions: ?) -> !this","!doc":"<p>This method is called to process <code>&lt;tpl exec=\"action\"&gt;</code>. If there are other attributes,\nthese are passed in the actions object.</p>\n"},"doExpr":{"!type":"fn(expr: ?) -> !this","!doc":"<p>This method is called to process expressions (like <code>{[expr]}</code>).</p>\n"},"doFor":{"!type":"fn(action: ?, actions: ?) -> !this","!doc":"<p>This method is called to process <code>&lt;tpl for=\"action\"&gt;</code>. If there are other attributes,\nthese are passed in the actions object.</p>\n"},"doForEach":{"!type":"fn(action: ?, actions: ?) -> !this","!doc":"<p>This method is called to process <code>&lt;tpl foreach=\"action\"&gt;</code>. If there are other\nattributes, these are passed in the actions object.</p>\n"},"doIf":{"!type":"fn(action: ?, actions: ?) -> !this","!doc":"<p>This method is called to process <code>&lt;tpl if=\"action\"&gt;</code>. If there are other attributes,\nthese are passed in the actions object.</p>\n"},"doSwitch":{"!type":"fn(action: ?) -> !this","!doc":"<p>This method is called to process <code>&lt;tpl switch=\"action\"&gt;</code>. If there are other attributes,\nthese are passed in the actions object.</p>\n"},"doTag":{"!type":"fn(tag: ?) -> !this","!doc":"<p>This method is called to process simple tags (like <code>{tag}</code>).</p>\n"},"doText":{"!type":"fn(text: ?) -> !this","!doc":"<hr />\n\n<p> XTemplateParser callouts</p>\n"},"evalTpl":{"!type":"fn($: ?) -> !this"},"generate":{"!type":"fn(tpl: ?) -> !this"},"parseTag":{"!type":"fn(tag: ?) -> !this"}}},"XTemplateParser":{"!doc":"<p>This class parses the XTemplate syntax and calls abstract methods to process the parts.</p>\n","!type":"fn(config: Ext_XTemplateParser_cfg)","prototype":{"!proto":"Ext.Base.prototype","actionsRe":{"!type":"+RegExp"},"defaultRe":{"!type":"+RegExp"},"elseRe":{"!type":"+RegExp"},"level":{"!type":"number","!doc":"<p>The 'for' or 'foreach' loop context level. This is adjusted\nup by one prior to calling <a href=\"#!/api/Ext.XTemplateParser-method-doFor\" rel=\"Ext.XTemplateParser-method-doFor\" class=\"docClass\">doFor</a> or <a href=\"#!/api/Ext.XTemplateParser-method-doForEach\" rel=\"Ext.XTemplateParser-method-doForEach\" class=\"docClass\">doForEach</a> and down by one after\ncalling the corresponding <a href=\"#!/api/Ext.XTemplateParser-method-doEnd\" rel=\"Ext.XTemplateParser-method-doEnd\" class=\"docClass\">doEnd</a> that closes the loop. This will be 1 on the\nfirst <a href=\"#!/api/Ext.XTemplateParser-method-doFor\" rel=\"Ext.XTemplateParser-method-doFor\" class=\"docClass\">doFor</a> or <a href=\"#!/api/Ext.XTemplateParser-method-doForEach\" rel=\"Ext.XTemplateParser-method-doForEach\" class=\"docClass\">doForEach</a> call.</p>\n"},"propRe":{"!type":"+RegExp"},"topRe":{"!type":"+RegExp","!doc":"<p>Internal regexes</p>\n"},"doCase":{"!type":"fn(action: string, actions: ?)","!doc":"<p>This method is called to process <code>&lt;tpl case=\"action\"&gt;</code>. If there are other attributes,\nthese are passed in the actions object.</p>\n"},"doDefault":{"!type":"fn()","!doc":"<p>This method is called to process <code>&lt;tpl default&gt;</code>.</p>\n"},"doElse":{"!type":"fn()","!doc":"<p>This method is called to process <code>&lt;tpl else&gt;</code>.</p>\n"},"doElseIf":{"!type":"fn(action: string, actions: ?)","!doc":"<p>This method is called to process <code>&lt;tpl elseif=\"action\"&gt;</code>. If there are other attributes,\nthese are passed in the actions object.</p>\n"},"doEnd":{"!type":"fn(type: string, actions: ?)","!doc":"<p>This method is called to process <code>&lt;/tpl&gt;</code>. It is given the action type that started\nthe tpl and the set of additional actions.</p>\n"},"doEval":{"!type":"fn(text: string)","!doc":"<p>This method is called to process <code>{% text %}</code>.</p>\n"},"doExec":{"!type":"fn(action: string, actions: ?)","!doc":"<p>This method is called to process <code>&lt;tpl exec=\"action\"&gt;</code>. If there are other attributes,\nthese are passed in the actions object.</p>\n"},"doExpr":{"!type":"fn(expr: string)","!doc":"<p>This method is called to process expressions (like <code>{[expr]}</code>).</p>\n"},"doFor":{"!type":"fn(action: string, actions: ?)","!doc":"<p>This method is called to process <code>&lt;tpl for=\"action\"&gt;</code>. If there are other attributes,\nthese are passed in the actions object.</p>\n"},"doForEach":{"!type":"fn(action: string, actions: ?)","!doc":"<p>This method is called to process <code>&lt;tpl foreach=\"action\"&gt;</code>. If there are other\nattributes, these are passed in the actions object.</p>\n"},"doIf":{"!type":"fn(action: string, actions: ?)","!doc":"<p>This method is called to process <code>&lt;tpl if=\"action\"&gt;</code>. If there are other attributes,\nthese are passed in the actions object.</p>\n"},"doSwitch":{"!type":"fn(action: string, actions: ?)","!doc":"<p>This method is called to process <code>&lt;tpl switch=\"action\"&gt;</code>. If there are other attributes,\nthese are passed in the actions object.</p>\n"},"doTag":{"!type":"fn()","!doc":"<p>This method is called to process simple tags (like <code>{tag}</code>).</p>\n"},"doText":{"!type":"fn(text: string)","!doc":"<p>This method is called to process a piece of raw text from the tpl.</p>\n"},"doTpl":{"!type":"fn() -> !this","!doc":"<p>This method is called to process an empty <code>&lt;tpl&gt;</code>. This is unlikely to need to be\nimplemented, so a default (do nothing) version is provided.</p>\n"},"parse":{"!type":"fn(str: ?) -> !this"}}},"ZIndexManager":{"!doc":"<p>A class that manages a group of <a href=\"#!/api/Ext.Component-cfg-floating\" rel=\"Ext.Component-cfg-floating\" class=\"docClass\">Ext.Component.floating</a> Components and provides z-order management,\nand Component activation behavior, including masking below the active (topmost) Component.</p>\n\n<p><a href=\"#!/api/Ext.Component-cfg-floating\" rel=\"Ext.Component-cfg-floating\" class=\"docClass\">Floating</a> Components which are rendered directly into the document (such as\n<a href=\"#!/api/Ext.window.Window\" rel=\"Ext.window.Window\" class=\"docClass\">Window</a>s) which are <a href=\"#!/api/Ext.Component-method-show\" rel=\"Ext.Component-method-show\" class=\"docClass\">show</a>n are managed by a\n<a href=\"#!/api/Ext.WindowManager\" rel=\"Ext.WindowManager\" class=\"docClass\">global instance</a>.</p>\n\n<p><a href=\"#!/api/Ext.Component-cfg-floating\" rel=\"Ext.Component-cfg-floating\" class=\"docClass\">Floating</a> Components which are descendants of <a href=\"#!/api/Ext.Component-cfg-floating\" rel=\"Ext.Component-cfg-floating\" class=\"docClass\">floating</a>\n<em>Containers</em> (for example a <a href=\"#!/api/Ext.view.BoundList\" rel=\"Ext.view.BoundList\" class=\"docClass\">BoundList</a> within an <a href=\"#!/api/Ext.window.Window\" rel=\"Ext.window.Window\" class=\"docClass\">Window</a>,\nor a <a href=\"#!/api/Ext.menu.Menu\" rel=\"Ext.menu.Menu\" class=\"docClass\">Menu</a>), are managed by a ZIndexManager owned by that floating Container. Therefore\nComboBox dropdowns within Windows will have managed z-indices guaranteed to be correct, relative to the Window.</p>\n","!type":"fn(container: ?)","prototype":{"!proto":"Ext.Base.prototype","_activateLast":{"!type":"fn() -> !this"},"_hideModalMask":{"!type":"fn() -> !this"},"_onContainerResize":{"!type":"fn() -> !this"},"_onMaskClick":{"!type":"fn() -> !this"},"_setActiveChild":{"!type":"fn(comp: ?, oldFront: ?) -> !this"},"_showModalMask":{"!type":"fn(comp: ?) -> !this"},"assignZIndices":{"!type":"fn() -> !this"},"bringToFront":{"!type":"fn(comp: string|?) -> bool","!doc":"<p>Brings the specified Component to the front of any other active Components in this ZIndexManager.</p>\n"},"destroy":{"!type":"fn() -> !this"},"each":{"!type":"fn(fn: fn(), scope?: ?) -> !this","!doc":"<p>Executes the specified function once for every Component in this ZIndexManager, passing each\nComponent as the only parameter. Returning false from the function will stop the iteration.</p>\n"},"eachBottomUp":{"!type":"fn(fn: fn(), scope?: ?) -> !this","!doc":"<p>Executes the specified function once for every Component in this ZIndexManager, passing each\nComponent as the only parameter. Returning false from the function will stop the iteration.\nThe components are passed to the function starting at the bottom and proceeding to the top.</p>\n"},"eachTopDown":{"!type":"fn(fn: fn(), scope?: ?) -> !this","!doc":"<p>Executes the specified function once for every Component in this ZIndexManager, passing each\nComponent as the only parameter. Returning false from the function will stop the iteration.\nThe components are passed to the function starting at the top and proceeding to the bottom.</p>\n"},"get":{"!type":"fn(id: string|?) -> +Ext.Component","!doc":"<p>Gets a registered Component by id.</p>\n"},"getActive":{"!type":"fn() -> +Ext.Component","!doc":"<p>Gets the currently-active Component in this ZIndexManager.</p>\n"},"getBy":{"!type":"fn(fn: fn(), scope?: ?) -> [?]","!doc":"<p>Returns zero or more Components in this ZIndexManager using the custom search function passed to this method.\nThe function should accept a single <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> reference as its only argument and should\nreturn true if the Component matches the search criteria, otherwise it should return false.</p>\n"},"getMaskBox":{"!type":"fn() -> !this"},"getNextZSeed":{"!type":"fn() -> !this"},"hide":{"!type":"fn() -> !this","!doc":"<p>Temporarily hides all currently visible managed Components. This is for when\ndragging a Window which may manage a set of floating descendants in its ZIndexManager;\nthey should all be hidden just for the duration of the drag.</p>\n"},"hideAll":{"!type":"fn() -> !this","!doc":"<p>Hides all Components managed by this ZIndexManager.</p>\n"},"onComponentHide":{"!type":"fn(comp: ?) -> !this"},"register":{"!type":"fn(comp: +Ext.Component) -> !this","!doc":"<p>Registers a floating <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> with this ZIndexManager. This should not\nneed to be called under normal circumstances. Floating Components (such as Windows,\nBoundLists and Menus) are automatically registered with a\n<a href=\"#!/api/Ext.Component-property-zIndexManager\" rel=\"Ext.Component-property-zIndexManager\" class=\"docClass\">zIndexManager</a> at render time.</p>\n\n<p>Where this may be useful is moving Windows between two ZIndexManagers. For example,\nto bring the <a href=\"#!/api/Ext.MessageBox\" rel=\"Ext.MessageBox\" class=\"docClass\">Ext.MessageBox</a> dialog under the same manager as the Desktop's\nZIndexManager in the desktop sample app:</p>\n\n<pre><code>MyDesktop.getDesktop().getManager().register(<a href=\"#!/api/Ext.MessageBox\" rel=\"Ext.MessageBox\" class=\"docClass\">Ext.MessageBox</a>);\n</code></pre>\n"},"sendToBack":{"!type":"fn(comp: string|?) -> +Ext.Component","!doc":"<p>Sends the specified Component to the back of other active Components in this ZIndexManager.</p>\n"},"setBase":{"!type":"fn(baseZIndex: ?) -> !this"},"show":{"!type":"fn() -> !this","!doc":"<p>Restores temporarily hidden managed Components to visibility.</p>\n"},"unregister":{"!type":"fn(comp: +Ext.Component) -> !this","!doc":"<p>Unregisters a <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> from this ZIndexManager. This should not\nneed to be called. Components are automatically unregistered upon destruction.\nSee <a href=\"#!/api/Ext.ZIndexManager-method-register\" rel=\"Ext.ZIndexManager-method-register\" class=\"docClass\">register</a>.</p>\n"}},"zBase":{"!type":"number"}},"app":{"Application":{"!doc":"<p>Represents an Ext JS 4 application, which is typically a single page app using a <a href=\"#!/api/Ext.container.Viewport\" rel=\"Ext.container.Viewport\" class=\"docClass\">Viewport</a>.\nA typical <a href=\"#!/api/Ext.app.Application\" rel=\"Ext.app.Application\" class=\"docClass\">Ext.app.Application</a> might look like this:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-application\" rel=\"Ext-method-application\" class=\"docClass\">Ext.application</a>({\n    name: 'MyApp',\n    launch: function() {\n        <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.container.Viewport\" rel=\"Ext.container.Viewport\" class=\"docClass\">Ext.container.Viewport</a>', {\n            items: {\n                html: 'My App'\n            }\n        });\n    }\n});\n</code></pre>\n\n<p>This does several things. First it creates a global variable called 'MyApp' - all of your Application's classes (such\nas its Models, Views and Controllers) will reside under this single namespace, which drastically lowers the chances\nof colliding global variables. The MyApp global will also have a getApplication method to get a reference to\nthe current application:</p>\n\n<pre><code>var app = MyApp.getApplication();\n</code></pre>\n\n<p>When the page is ready and all of your JavaScript has loaded, your Application's <a href=\"#!/api/Ext.app.Application-method-launch\" rel=\"Ext.app.Application-method-launch\" class=\"docClass\">launch</a> function is called,\nat which time you can run the code that starts your app. Usually this consists of creating a Viewport, as we do in\nthe example above.</p>\n\n<h1>Telling Application about the rest of the app</h1>\n\n<p>Because an <a href=\"#!/api/Ext.app.Application\" rel=\"Ext.app.Application\" class=\"docClass\">Ext.app.Application</a> represents an entire app, we should tell it about the other parts of the app - namely\nthe Models, Views and Controllers that are bundled with the application. Let's say we have a blog management app; we\nmight have Models and Controllers for Posts and Comments, and Views for listing, adding and editing Posts and Comments.\nHere's how we'd tell our Application about all these things:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-application\" rel=\"Ext-method-application\" class=\"docClass\">Ext.application</a>({\n    name: 'Blog',\n    models: ['Post', 'Comment'],\n    controllers: ['Posts', 'Comments'],\n\n    launch: function() {\n        ...\n    }\n});\n</code></pre>\n\n<p>Note that we didn't actually list the Views directly in the Application itself. This is because Views are managed by\nControllers, so it makes sense to keep those dependencies there. The Application will load each of the specified\nControllers using the pathing conventions laid out in the <a href=\"#/guide/application_architecture\">application architecture guide</a> - in this case\nexpecting the controllers to reside in app/controller/Posts.js and app/controller/Comments.js. In turn, each\nController simply needs to list the Views it uses and they will be automatically loaded. Here's how our Posts\ncontroller like be defined:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('MyApp.controller.Posts', {\n    extend: '<a href=\"#!/api/Ext.app.Controller\" rel=\"Ext.app.Controller\" class=\"docClass\">Ext.app.Controller</a>',\n    views: ['posts.List', 'posts.Edit'],\n\n    //the rest of the Controller here\n});\n</code></pre>\n\n<p>Because we told our Application about our Models and Controllers, and our Controllers about their Views, Ext JS will\nautomatically load all of our app files for us. This means we don't have to manually add script tags into our html\nfiles whenever we add a new class, but more importantly it enables us to create a minimized build of our entire\napplication using Sencha Cmd.</p>\n\n<h1>Deriving from <a href=\"#!/api/Ext.app.Application\" rel=\"Ext.app.Application\" class=\"docClass\">Ext.app.Application</a></h1>\n\n<p>Typically, applications do not derive directly from <a href=\"#!/api/Ext.app.Application\" rel=\"Ext.app.Application\" class=\"docClass\">Ext.app.Application</a>. Rather, the\nconfiguration passed to <code><a href=\"#!/api/Ext-method-application\" rel=\"Ext-method-application\" class=\"docClass\">Ext.application</a></code> mimics what you might do in a derived class.\nIn some cases, however, it can be desirable to share logic by using a derived class\nfrom <code><a href=\"#!/api/Ext.app.Application\" rel=\"Ext.app.Application\" class=\"docClass\">Ext.app.Application</a></code>.</p>\n\n<p>Derivation works as you would expect, but using the derived class should still be the\njob of the <code><a href=\"#!/api/Ext-method-application\" rel=\"Ext-method-application\" class=\"docClass\">Ext.application</a></code> method.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('MyApp.app.Application', {\n    extend: '<a href=\"#!/api/Ext.app.Application\" rel=\"Ext.app.Application\" class=\"docClass\">Ext.app.Application</a>',\n    name: 'MyApp',\n    ...\n});\n\n<a href=\"#!/api/Ext-method-application\" rel=\"Ext-method-application\" class=\"docClass\">Ext.application</a>('MyApp.app.Application');\n</code></pre>\n\n<p>For more information about writing Ext JS 4 applications, please see the <a href=\"#/guide/application_architecture\">application architecture guide</a>.</p>\n","!type":"fn(config?: Ext_app_Application_cfg)","prototype":{"!proto":"Ext.app.Controller.prototype","appFolder":{"!type":"string","!doc":"<p>The path to the directory which contains all application's classes.\nThis path will be registered via <a href=\"#!/api/Ext.Loader-method-setPath\" rel=\"Ext.Loader-method-setPath\" class=\"docClass\">Ext.Loader.setPath</a> for the namespace specified\nin the <a href=\"#!/api/Ext.app.Application-cfg-name\" rel=\"Ext.app.Application-cfg-name\" class=\"docClass\">name</a> config.</p>\n"},"appProperty":{"!type":"string","!doc":"<p>The name of a property to be assigned to the main namespace to gain a reference to\nthis application. Can be set to an empty value to prevent the reference from\nbeing created</p>\n\n<pre><code><a href=\"#!/api/Ext-method-application\" rel=\"Ext-method-application\" class=\"docClass\">Ext.application</a>({\n    name: 'MyApp',\n    appProperty: 'myProp',\n\n    launch: function() {\n        console.log(MyApp.myProp === this);\n    }\n});\n</code></pre>\n"},"autoCreateViewport":{"!type":"bool","!doc":"<p>True to automatically load and instantiate AppName.view.Viewport before firing the launch\nfunction.</p>\n"},"controllers":{"!type":"string|[string]","!doc":"<p>Names of controllers that the app uses.</p>\n"},"enableQuickTips":{"!type":"bool","!doc":"<p>True to automatically set up <a href=\"#!/api/Ext.tip.QuickTip\" rel=\"Ext.tip.QuickTip\" class=\"docClass\">Ext.tip.QuickTip</a> support.</p>\n"},"name":{"!type":"string","!doc":"<p>The name of your application. This will also be the namespace for your views, controllers\nmodels and stores. Don't use spaces or special characters in the name. <strong>Application name\nis mandatory</strong>.</p>\n"},"namespaces":{"!type":"string|[string]","!doc":"<p>The list of namespace prefixes used in the application to resolve dependencies\nlike Views and Stores:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-application\" rel=\"Ext-method-application\" class=\"docClass\">Ext.application</a>({\n     name: 'MyApp',\n\n     namespaces: ['Common.code'],\n\n     controllers: [ 'Common.code.controller.Foo', 'Bar' ]\n });\n\n <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Common.code.controller.Foo', {\n     extend: '<a href=\"#!/api/Ext.app.Controller\" rel=\"Ext.app.Controller\" class=\"docClass\">Ext.app.Controller</a>',\n\n     models: ['Foo'],    // Loads Common.code.model.Foo\n     views:  ['Bar']     // Loads Common.code.view.Bar\n });\n\n <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('MyApp.controller.Bar', {\n     extend: '<a href=\"#!/api/Ext.app.Controller\" rel=\"Ext.app.Controller\" class=\"docClass\">Ext.app.Controller</a>',\n\n     models: ['Foo'],    // Loads MyApp.model.Foo\n     views:  ['Bar']     // Loads MyApp.view.Bar\n });\n</code></pre>\n\n<p>You don't need to include main namespace (MyApp), it will be added to the list\nautomatically.</p>\n"},"paths":{"!type":"?","!doc":"<p>Additional load paths to add to <a href=\"#!/api/Ext.Loader\" rel=\"Ext.Loader\" class=\"docClass\">Ext.Loader</a>.\nSee <a href=\"#!/api/Ext.Loader-cfg-paths\" rel=\"Ext.Loader-cfg-paths\" class=\"docClass\">Ext.Loader.paths</a> config for more details.</p>\n"},"scope":{"!type":"?","!doc":"<p>The scope to execute the <a href=\"#!/api/Ext.app.Application-method-launch\" rel=\"Ext.app.Application-method-launch\" class=\"docClass\">launch</a> function in. Defaults to the Application instance.</p>\n"},"finishInitControllers":{"!type":"fn() -> !this"},"getApplication":{"!type":"fn() -> +Ext.app.Application","!doc":"<p>Returns the base <a href=\"#!/api/Ext.app.Application\" rel=\"Ext.app.Application\" class=\"docClass\">Ext.app.Application</a> for this controller.</p>\n"},"getController":{"!type":"fn(name: ?) -> +Ext.app.Controller","!doc":"<p>Returns instance of a <a href=\"#!/api/Ext.app.Controller\" rel=\"Ext.app.Controller\" class=\"docClass\">Controller</a> with the given id.\nWhen controller doesn't exist yet, it's created. Note that this method depends\non Application instance and will return undefined when Application is not\naccessible. The only exception is when this Controller instance's id is requested;\nin that case we always return the instance even if Application is no available.</p>\n"},"getModuleClassName":{"!type":"fn(name: ?, kind: ?) -> !this"},"initControllers":{"!type":"fn() -> !this"},"initNamespace":{"!type":"fn() -> !this"},"initQuickTips":{"!type":"fn() -> !this"},"initViewport":{"!type":"fn() -> !this"},"launch":{"!type":"fn(profile: string) -> bool","!doc":"<p>Called automatically when the page has completely loaded. This is an empty function that should be\noverridden by each application that needs to take action on page load.</p>\n"},"onBeforeLaunch":{"!type":"fn() -> !this"},"onClassExtended":{"!type":"fn(cls: ?, data: ?, hooks: ?) -> !this"}}},"Controller":{"!doc":"<p>Controllers are the glue that binds an application together. All they really do is listen for events (usually from\nviews) and take some action. Here's how we might create a Controller to manage Users:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('MyApp.controller.Users', {\n     extend: '<a href=\"#!/api/Ext.app.Controller\" rel=\"Ext.app.Controller\" class=\"docClass\">Ext.app.Controller</a>',\n\n     init: function() {\n         console.log('Initialized Users! This happens before ' +\n                     'the Application launch() function is called');\n     }\n });\n</code></pre>\n\n<p>The init function is a special method that is called when your application boots. It is called before the\n<a href=\"#!/api/Ext.app.Application\" rel=\"Ext.app.Application\" class=\"docClass\">Application</a>'s launch function is executed so gives a hook point to run any code before\nyour Viewport is created.</p>\n\n<p>The init function is a great place to set up how your controller interacts with the view, and is usually used in\nconjunction with another Controller function - <a href=\"#!/api/Ext.app.Controller-method-control\" rel=\"Ext.app.Controller-method-control\" class=\"docClass\">control</a>. The control function\nmakes it easy to listen to events on your view classes and take some action with a handler function. Let's update\nour Users controller to tell us when the panel is rendered:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('MyApp.controller.Users', {\n     extend: '<a href=\"#!/api/Ext.app.Controller\" rel=\"Ext.app.Controller\" class=\"docClass\">Ext.app.Controller</a>',\n\n     init: function() {\n         this.control({\n             'viewport &gt; panel': {\n                 render: this.onPanelRendered\n             }\n         });\n     },\n\n     onPanelRendered: function() {\n         console.log('The panel was rendered');\n     }\n });\n</code></pre>\n\n<p>We've updated the init function to use <a href=\"#!/api/Ext.app.Controller-method-control\" rel=\"Ext.app.Controller-method-control\" class=\"docClass\">control method</a> to set up listeners on views\nin our application. The control method uses the ComponentQuery engine to quickly and easily get references to components\non the page. If you are not familiar with ComponentQuery yet, be sure to check out the\n<a href=\"#!/api/Ext.ComponentQuery\" rel=\"Ext.ComponentQuery\" class=\"docClass\">documentation</a>. In brief though, it allows us to pass a CSS-like selector that will find\nevery matching component on the page.</p>\n\n<p>In our init function above we supplied 'viewport > panel', which translates to \"find me every Panel that is a direct\nchild of a Viewport\". We then supplied an object that maps event names (just 'render' in this case) to handler\nfunctions. The overall effect is that whenever any component that matches our selector fires a 'render' event, our\nonPanelRendered function is called.</p>\n\n<h2>Event domains</h2>\n\n<p>In Ext JS 4.2, we introduced the concept of event domains. In terms of MVC, an event domain\nis one or more base classes that fire events to which a Controller wants to listen. Besides\nComponent event domain that encompass <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>-descended Views, Controllers now\ncan listen to events from data Stores, <a href=\"#!/api/Ext.direct.Manager\" rel=\"Ext.direct.Manager\" class=\"docClass\">Ext.Direct</a> Providers, other Controllers, and <a href=\"#!/api/Ext-property-globalEvents\" rel=\"Ext-property-globalEvents\" class=\"docClass\">Ext.globalEvents</a>.\nThis feature provides a way to communicate between parts of the whole application without the need\nto bind controllers together tightly, and allows to develop and test application parts in isolation.</p>\n\n<p>See usage examples in <a href=\"#!/api/Ext.app.Controller-method-listen\" rel=\"Ext.app.Controller-method-listen\" class=\"docClass\">listen</a> method documentation.</p>\n\n<h2>Using refs</h2>\n\n<p>One of the most useful parts of Controllers is the ref system. These use the <a href=\"#!/api/Ext.ComponentQuery\" rel=\"Ext.ComponentQuery\" class=\"docClass\">Ext.ComponentQuery</a> to\nmake it really easy to get references to Views on your page. Let's look at an example of this now:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('MyApp.controller.Users', {\n     extend: '<a href=\"#!/api/Ext.app.Controller\" rel=\"Ext.app.Controller\" class=\"docClass\">Ext.app.Controller</a>',\n\n     refs: [{\n         ref: 'list',\n         selector: 'grid'\n     }],\n\n     init: function() {\n         this.control({\n             'button': {\n                 click: this.refreshGrid\n             }\n         });\n     },\n\n     refreshGrid: function() {\n         this.getList().store.load();\n     }\n });\n</code></pre>\n\n<p>This example assumes the existence of a <a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Grid</a> on the page, which contains a single button to\nrefresh the Grid when clicked. In our refs array, we set up a reference to the grid. There are two parts to this -\nthe 'selector', which is a <a href=\"#!/api/Ext.ComponentQuery\" rel=\"Ext.ComponentQuery\" class=\"docClass\">ComponentQuery</a> selector which finds any grid on the page and\nassigns it to the reference 'list'.</p>\n\n<p>By giving the reference a name, we get a number of things for free. The first is the getList function that we use in\nthe refreshGrid method above. This is generated automatically by the Controller based on the name of our ref, which\nwas capitalized and prepended with get to go from 'list' to 'getList'.</p>\n\n<p>The way this works is that the first time getList is called by your code, the ComponentQuery selector is run and the\nfirst component that matches the selector ('grid' in this case) will be returned. All future calls to getList will\nuse a cached reference to that grid. Usually it is advised to use a specific ComponentQuery selector that will only\nmatch a single View in your application (in the case above our selector will match any grid on the page).</p>\n\n<p>Bringing it all together, our init function is called when the application boots, at which time we call this.control\nto listen to any click on a <a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">button</a> and call our refreshGrid function (again, this will\nmatch any button on the page so we advise a more specific selector than just 'button', but have left it this way for\nsimplicity). When the button is clicked we use out getList function to refresh the grid.</p>\n\n<p>You can create any number of refs and control any number of components this way, simply adding more functions to\nyour Controller as you go. For an example of real-world usage of Controllers see the Feed Viewer example in the\nexamples/app/feed-viewer folder in the SDK download.</p>\n\n<h2>Generated getter methods</h2>\n\n<p>Refs aren't the only thing that generate convenient getter methods. Controllers often have to deal with Models and\nStores so the framework offers a couple of easy ways to get access to those too. Let's look at another example:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('MyApp.controller.Users', {\n     extend: '<a href=\"#!/api/Ext.app.Controller\" rel=\"Ext.app.Controller\" class=\"docClass\">Ext.app.Controller</a>',\n\n     models: ['User'],\n     stores: ['AllUsers', 'AdminUsers'],\n\n     init: function() {\n         var User, allUsers, ed;\n\n         User = this.getUserModel();\n         allUsers = this.getAllUsersStore();\n\n         ed = new User({ name: 'Ed' });\n         allUsers.add(ed);\n     }\n });\n</code></pre>\n\n<p>By specifying Models and Stores that the Controller cares about, it again dynamically loads them from the appropriate\nlocations (app/model/User.js, app/store/AllUsers.js and app/store/AdminUsers.js in this case) and creates getter\nfunctions for them all. The example above will create a new User model instance and add it to the AllUsers Store.\nOf course, you could do anything in this function but in this case we just did something simple to demonstrate the\nfunctionality.</p>\n\n<h2>Further Reading</h2>\n\n<p>For more information about writing Ext JS 4 applications, please see the\n<a href=\"#/guide/application_architecture\">application architecture guide</a>. Also see the <a href=\"#!/api/Ext.app.Application\" rel=\"Ext.app.Application\" class=\"docClass\">Ext.app.Application</a>\ndocumentation.</p>\n","!type":"fn(config?: Ext_app_Controller_cfg)","prototype":{"!proto":"Ext.Base.prototype","id":{"!type":"string","!doc":"<p>The id of this controller. You can use this id when dispatching.</p>\n"},"models":{"!type":"string|[string]","!doc":"<p>Array of models to require from AppName.model namespace. For example:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>(\"MyApp.controller.Foo\", {\n     extend: \"<a href=\"#!/api/Ext.app.Controller\" rel=\"Ext.app.Controller\" class=\"docClass\">Ext.app.Controller</a>\",\n     models: ['User', 'Vehicle']\n });\n</code></pre>\n\n<p>This is equivalent of:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>(\"MyApp.controller.Foo\", {\n     extend: \"<a href=\"#!/api/Ext.app.Controller\" rel=\"Ext.app.Controller\" class=\"docClass\">Ext.app.Controller</a>\",\n     requires: ['MyApp.model.User', 'MyApp.model.Vehicle'],\n\n     getUserModel: function() {\n         return this.getModel(\"User\");\n     },\n\n     getVehicleModel: function() {\n         return this.getModel(\"Vehicle\");\n     }\n });\n</code></pre>\n"},"refs":{"!type":"[?]","!doc":"<p>Array of configs to build up references to views on page. For example:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>(\"MyApp.controller.Foo\", {\n     extend: \"<a href=\"#!/api/Ext.app.Controller\" rel=\"Ext.app.Controller\" class=\"docClass\">Ext.app.Controller</a>\",\n\n     refs: [{\n         ref: 'list',\n         selector: 'grid'\n     }],\n });\n</code></pre>\n\n<p>This will add method <code>getList</code> to the controller which will internally use\n<a href=\"#!/api/Ext.ComponentQuery\" rel=\"Ext.ComponentQuery\" class=\"docClass\">Ext.ComponentQuery</a> to reference the grid component on page.</p>\n\n<p>The following fields can be used in ref definition:</p>\n\n<ul>\n<li><code>ref</code> - name of the reference.</li>\n<li><code>selector</code> - <a href=\"#!/api/Ext.ComponentQuery\" rel=\"Ext.ComponentQuery\" class=\"docClass\">Ext.ComponentQuery</a> selector to access the component.</li>\n<li><code>autoCreate</code> - True to create the component automatically if not found on page.</li>\n<li><code>forceCreate</code> - Forces the creation of the component every time reference is accessed\n(when <code>get&lt;REFNAME&gt;</code> is called).</li>\n<li><code>xtype</code> - Used to create component by its xtype with autoCreate or forceCreate. If\nyou don't provide xtype, an <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> instance will be created.</li>\n</ul>\n\n"},"stores":{"!type":"string|[string]","!doc":"<p>Array of stores to require from AppName.store namespace and to generate getter methods for.\nFor example:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>(\"MyApp.controller.Foo\", {\n     extend: \"<a href=\"#!/api/Ext.app.Controller\" rel=\"Ext.app.Controller\" class=\"docClass\">Ext.app.Controller</a>\",\n     stores: ['Users', 'Vehicles']\n });\n</code></pre>\n\n<p>This is equivalent to:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>(\"MyApp.controller.Foo\", {\n     extend: \"<a href=\"#!/api/Ext.app.Controller\" rel=\"Ext.app.Controller\" class=\"docClass\">Ext.app.Controller</a>\",\n\n     requires: [\n         'MyApp.store.Users',\n         'MyApp.store.Vehicles'\n     ]\n\n     getUsersStore: function() {\n         return this.getStore(\"Users\");\n     },\n\n     getVehiclesStore: function() {\n         return this.getStore(\"Vehicles\");\n     }\n });\n</code></pre>\n"},"views":{"!type":"string|[string]","!doc":"<p>Array of views to require from AppName.view namespace and to generate getter methods for.\nFor example:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>(\"MyApp.controller.Foo\", {\n     extend: \"<a href=\"#!/api/Ext.app.Controller\" rel=\"Ext.app.Controller\" class=\"docClass\">Ext.app.Controller</a>\",\n     views: ['List', 'Detail']\n });\n</code></pre>\n\n<p>This is equivalent of:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>(\"MyApp.controller.Foo\", {\n     extend: \"<a href=\"#!/api/Ext.app.Controller\" rel=\"Ext.app.Controller\" class=\"docClass\">Ext.app.Controller</a>\",\n     requires: ['MyApp.view.List', 'MyApp.view.Detail'],\n\n     getListView: function() {\n         return this.getView(\"List\");\n     },\n\n     getDetailView: function() {\n         return this.getView(\"Detail\");\n     }\n });\n</code></pre>\n"},"application":{"!type":"+Ext.app.Application","!doc":"<p>The <a href=\"#!/api/Ext.app.Application\" rel=\"Ext.app.Application\" class=\"docClass\">Ext.app.Application</a> for this controller.</p>\n"},"addRef":{"!type":"fn(refs: ?|[?]) -> !this","!doc":"<p>Registers one or more <a href=\"#!/api/Ext.app.Controller-cfg-refs\" rel=\"Ext.app.Controller-cfg-refs\" class=\"docClass\">references</a>.</p>\n"},"control":{"!type":"fn(selectors: string|?, listeners?: ?) -> !this","!doc":"<p>Adds listeners to components selected via <a href=\"#!/api/Ext.ComponentQuery\" rel=\"Ext.ComponentQuery\" class=\"docClass\">Ext.ComponentQuery</a>. Accepts an\nobject containing component paths mapped to a hash of listener functions.</p>\n\n<p>In the following example the <code>updateUser</code> function is mapped to to the <code>click</code>\nevent on a button component, which is a child of the <code>useredit</code> component.</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('AM.controller.Users', {\n     init: function() {\n         this.control({\n             'useredit button[action=save]': {\n                 click: this.updateUser\n             }\n         });\n     },\n\n     updateUser: function(button) {\n         console.log('clicked the Save button');\n     }\n });\n</code></pre>\n\n<p>Or alternatively one call <code>control</code> with two arguments:</p>\n\n<pre><code> this.control('useredit button[action=save]', {\n     click: this.updateUser\n });\n</code></pre>\n\n<p>See <a href=\"#!/api/Ext.ComponentQuery\" rel=\"Ext.ComponentQuery\" class=\"docClass\">Ext.ComponentQuery</a> for more information on component selectors.</p>\n"},"doInit":{"!type":"fn(app: ?) -> !this"},"finishInit":{"!type":"fn(app: ?) -> !this"},"getApplication":{"!type":"fn() -> +Ext.app.Application","!doc":"<p>Returns the base <a href=\"#!/api/Ext.app.Application\" rel=\"Ext.app.Application\" class=\"docClass\">Ext.app.Application</a> for this controller.</p>\n"},"getController":{"!type":"fn(id: string) -> +Ext.app.Controller","!doc":"<p>Returns instance of a <a href=\"#!/api/Ext.app.Controller\" rel=\"Ext.app.Controller\" class=\"docClass\">Controller</a> with the given id.\nWhen controller doesn't exist yet, it's created. Note that this method depends\non Application instance and will return undefined when Application is not\naccessible. The only exception is when this Controller instance's id is requested;\nin that case we always return the instance even if Application is no available.</p>\n"},"getModel":{"!type":"fn(name: string) -> +Ext.data.Model","!doc":"<p>Returns a <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Model</a> class with the given name.\nA shorthand for using <a href=\"#!/api/Ext.ModelManager-method-getModel\" rel=\"Ext.ModelManager-method-getModel\" class=\"docClass\">Ext.ModelManager.getModel</a>.</p>\n"},"getRef":{"!type":"fn(ref: ?, info: ?, config: ?) -> !this"},"getStore":{"!type":"fn(name: string) -> +Ext.data.Store","!doc":"<p>Returns instance of a <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Store</a> with the given name.\nWhen store doesn't exist yet, it's created.</p>\n"},"getView":{"!type":"fn(name: string) -> +Ext.Base","!doc":"<p>Returns a View class with the given name.  To create an instance of the view,\nyou can use it like it's used by Application to create the Viewport:</p>\n\n<pre><code>this.getView('Viewport').create();\n</code></pre>\n"},"hasRef":{"!type":"fn(ref: ?) -> bool","!doc":"<p>Returns <code>true</code> if a <a href=\"#!/api/Ext.app.Controller-cfg-refs\" rel=\"Ext.app.Controller-cfg-refs\" class=\"docClass\">reference</a> is registered.</p>\n"},"init":{"!type":"fn(application: +Ext.app.Application) -> !this","!doc":"<p>A template method that is called when your application boots. It is called before the\n<a href=\"#!/api/Ext.app.Application\" rel=\"Ext.app.Application\" class=\"docClass\">Application</a>'s launch function is executed so gives a hook point\nto run any code before your Viewport is created.</p>\n"},"initAutoGetters":{"!type":"fn() -> !this"},"listen":{"!type":"fn(to: ?) -> !this","!doc":"<p>Adds listeners to different event sources (also called \"event domains\"). The\nprimary event domain is that of components, but there are also other event domains:\n<a href=\"#!/api/Ext.app.domain.Global\" rel=\"Ext.app.domain.Global\" class=\"docClass\">Global</a> domain that intercepts events fired from\n<a href=\"#!/api/Ext-property-globalEvents\" rel=\"Ext-property-globalEvents\" class=\"docClass\">Ext.globalEvents</a> Observable instance, <a href=\"#!/api/Ext.app.domain.Controller\" rel=\"Ext.app.domain.Controller\" class=\"docClass\">Controller</a>\ndomain can be used to listen to events fired by other Controllers,\n<a href=\"#!/api/Ext.app.domain.Store\" rel=\"Ext.app.domain.Store\" class=\"docClass\">Store</a> domain gives access to Store events, and\n<a href=\"#!/api/Ext.app.domain.Direct\" rel=\"Ext.app.domain.Direct\" class=\"docClass\">Direct</a> domain can be used with <a href=\"#!/api/Ext.direct.Manager\" rel=\"Ext.direct.Manager\" class=\"docClass\">Ext.Direct</a> Providers\nto listen to their events.</p>\n\n<p>To listen to \"bar\" events fired by a controller with id=\"foo\":</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('AM.controller.Users', {\n     init: function() {\n         this.listen({\n             controller: {\n                 '#foo': {\n                    bar: this.onFooBar\n                 }\n             }\n         });\n     },\n     ...\n });\n</code></pre>\n\n<p>To listen to \"bar\" events fired by any controller, and \"baz\" events\nfired by Store with storeId=\"baz\":</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('AM.controller.Users', {\n     init: function() {\n         this.listen({\n             controller: {\n                 '*': {\n                    bar: this.onAnyControllerBar\n                 }\n             },\n             store: {\n                 '#baz': {\n                     baz: this.onStoreBaz\n                 }\n             }\n         });\n     },\n     ...\n });\n</code></pre>\n\n<p>To listen to \"idle\" events fired by <a href=\"#!/api/Ext-property-globalEvents\" rel=\"Ext-property-globalEvents\" class=\"docClass\">Ext.globalEvents</a> when other event\nprocessing is complete and Ext JS is about to return control to the browser:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('AM.controller.Users', {\n     init: function() {\n         this.listen({\n             global: {               // Global events are always fired\n                 idle: this.onIdle   // from the same object, so there\n             }                       // are no selectors\n         });\n     }\n });\n</code></pre>\n\n<p>As this relates to components, the following example:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('AM.controller.Users', {\n     init: function() {\n         this.listen({\n             component: {\n                 'useredit button[action=save]': {\n                    click: this.updateUser\n                 }\n             }\n         });\n     },\n     ...\n });\n</code></pre>\n\n<p>Is equivalent to:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('AM.controller.Users', {\n     init: function() {\n         this.control({\n             'useredit button[action=save]': {\n                click: this.updateUser\n             }\n         });\n     },\n     ...\n });\n</code></pre>\n\n<p>Of course, these can all be combined in a single call and used instead of\n<code>control</code>, like so:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('AM.controller.Users', {\n     init: function() {\n         this.listen({\n             global: {\n                 idle: this.onIdle\n             },\n             controller: {\n                 '*': {\n                    foobar: this.onAnyFooBar\n                 },\n                 '#foo': {\n                    bar: this.onFooBar\n                 }\n             },\n             component: {\n                 'useredit button[action=save]': {\n                    click: this.updateUser\n                 }\n             },\n             store: {\n                 '#qux': {\n                     load: this.onQuxLoad\n                 }\n             }\n         });\n     },\n     ...\n });\n</code></pre>\n"},"onLaunch":{"!type":"fn(application: +Ext.app.Application) -> !this","!doc":"<p>A template method like <a href=\"#!/api/Ext.app.Controller-method-init\" rel=\"Ext.app.Controller-method-init\" class=\"docClass\">init</a>, but called after the viewport is created.\nThis is called after the <a href=\"#!/api/Ext.app.Application-method-launch\" rel=\"Ext.app.Application-method-launch\" class=\"docClass\">launch</a> method of Application\nis executed.</p>\n"},"ref":{"!type":"fn(refs: ?) -> !this"}},"controllerRegex":{"!type":"+RegExp"},"strings":{"!type":"?"},"createGetter":{"!type":"fn(baseGetter: ?, name: ?) -> !this"},"getFullName":{"!type":"fn(name: ?, kind: ?, namespace: ?) -> !this"},"getGetterName":{"!type":"fn(name: ?, kindUpper: ?) -> !this"},"processDependencies":{"!type":"fn(cls: ?, requires: ?, namespace: ?, kind: ?, names: ?) -> !this","!doc":"<p>This method is called like so:</p>\n\n<pre><code> <a href=\"#!/api/Ext.app.Controller-static-method-processDependencies\" rel=\"Ext.app.Controller-static-method-processDependencies\" class=\"docClass\">Ext.app.Controller.processDependencies</a>(proto, requiresArray, 'MyApp', 'model', [\n     'User',\n     'Item',\n     'Foo@Common.model',\n     'Bar.Baz@Common.model'\n ]);\n</code></pre>\n\n<p>Required dependencies are added to requiresArray.</p>\n"}},"EventBus":{"!doc":"<p>This class manages event dispatching for Controllers. The details of connecting classes\nto this dispatching mechanism is delegated to <a href=\"#!/api/Ext.app.EventDomain\" rel=\"Ext.app.EventDomain\" class=\"docClass\">Ext.app.EventDomain</a> instances.</p>\n","!type":"fn()","prototype":{"!proto":"Ext.Base.prototype"},"control":{"!type":"fn(selectors: ?, controller: +Ext.app.Controller) -> !this","!doc":"<p>Adds a set of component event listeners for a controller. To work with event domains\nother than component, see <a href=\"#!/api/Ext.app.EventBus-method-listen\" rel=\"Ext.app.EventBus-method-listen\" class=\"docClass\">listen</a>.</p>\n"},"listen":{"!type":"fn(to: ?, controller: +Ext.app.Controller) -> !this","!doc":"<p>Adds a set of event domain listeners for a controller. For more information on event\ndomains, see <a href=\"#!/api/Ext.app.EventDomain\" rel=\"Ext.app.EventDomain\" class=\"docClass\">Ext.app.EventDomain</a> and <a href=\"#!/api/Ext.app.Controller\" rel=\"Ext.app.Controller\" class=\"docClass\">Ext.app.Controller</a>.</p>\n"},"unlisten":{"!type":"fn(controllerId: string) -> !this","!doc":"<p>Removes all of a controller's attached listeners.</p>\n"}},"EventDomain":{"!doc":"<p>This class is a base class for an event domain. In the context of MVC, an \"event domain\"\nis one or more base classes that fire events to which a Controller wants to listen. A\ncontroller listens to events by describing the selectors for events of interest to it.</p>\n\n<p>Matching selectors to the firer of an event is one key aspect that defines an event\ndomain. All event domain instances must provide a <code>match</code> method that tests selectors\nagainst the event firer.</p>\n\n<p>When an event domain instance is created (typically as a <code>singleton</code>), its <code>type</code>\nproperty is used to catalog the domain in the\n<a href=\"#!/api/Ext.app.EventDomain-static-property-instances\" rel=\"Ext.app.EventDomain-static-property-instances\" class=\"docClass\">Ext.app.EventDomain.instances</a> map.</p>\n\n<p>There are five event domains provided by default:</p>\n\n<ul>\n<li><a href=\"#!/api/Ext.app.domain.Component\" rel=\"Ext.app.domain.Component\" class=\"docClass\">Component domain</a>. This is the primary event domain that\nhas been available since Ext JS MVC was introduced. This domain is defined as any class that\nextends <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>, where the selectors use\n<a href=\"#!/api/Ext.ComponentQuery-method-query\" rel=\"Ext.ComponentQuery-method-query\" class=\"docClass\">Ext.ComponentQuery</a>.</li>\n<li><a href=\"#!/api/Ext.app.domain.Global\" rel=\"Ext.app.domain.Global\" class=\"docClass\">Global domain</a>. This domain provides Controllers with access\nto events fired from <a href=\"#!/api/Ext-property-globalEvents\" rel=\"Ext-property-globalEvents\" class=\"docClass\">Ext.globalEvents</a> Observable instance. These events represent\nthe state of the application as a whole, and are always anonymous. Because of this, Global\ndomain does not provide selectors at all.</li>\n<li><a href=\"#!/api/Ext.app.domain.Controller\" rel=\"Ext.app.domain.Controller\" class=\"docClass\">Controller domain</a>. This domain includes all classes\nthat extend <a href=\"#!/api/Ext.app.Controller\" rel=\"Ext.app.Controller\" class=\"docClass\">Ext.app.Controller</a>. Events fired by Controllers will be available\nwithin this domain; selectors are either Controller's <a href=\"#!/api/Ext.app.Controller-cfg-id\" rel=\"Ext.app.Controller-cfg-id\" class=\"docClass\">id</a> or\n'*' wildcard for any Controller.</li>\n<li><a href=\"#!/api/Ext.app.domain.Store\" rel=\"Ext.app.domain.Store\" class=\"docClass\">Store domain</a>. This domain is for classes extending\n<a href=\"#!/api/Ext.data.AbstractStore\" rel=\"Ext.data.AbstractStore\" class=\"docClass\">Ext.data.AbstractStore</a>. Selectors are either Store's\n<a href=\"#!/api/Ext.data.AbstractStore-cfg-storeId\" rel=\"Ext.data.AbstractStore-cfg-storeId\" class=\"docClass\">storeId</a> or '*' wildcard for any Store.</li>\n<li><a href=\"#!/api/Ext.app.domain.Direct\" rel=\"Ext.app.domain.Direct\" class=\"docClass\">Direct domain</a>. This domain includes all classes that extend\n<a href=\"#!/api/Ext.direct.Provider\" rel=\"Ext.direct.Provider\" class=\"docClass\">Ext.direct.Provider</a>. Selectors are either Provider's <a href=\"#!/api/Ext.direct.Provider-cfg-id\" rel=\"Ext.direct.Provider-cfg-id\" class=\"docClass\">id</a>\nor '*' wildcard for any Provider. This domain is optional and will be loaded only if\n<a href=\"#!/api/Ext.direct.Manager\" rel=\"Ext.direct.Manager\" class=\"docClass\">Ext.direct.Manager</a> singleton is required in your application.</li>\n</ul>\n\n","!type":"fn()","prototype":{"!proto":"Ext.Base.prototype","idProperty":{"!type":"string","!doc":"<p>Name of the identifier property for this event domain.</p>\n"},"dispatch":{"!type":"fn(target: ?, ev: string, args: [?]) -> bool","!doc":"<p>This method dispatches an event fired by an object monitored by this domain. This\nis not called directly but is called by interceptors injected by the <code>monitor</code> method.</p>\n"},"listen":{"!type":"fn(selectors: ?) -> !this","!doc":"<p>This method adds listeners on behalf of a controller. This method is passed an\nobject that is keyed by selectors. The value of these is also an object but now\nkeyed by event name. For example:</p>\n\n<pre><code> domain.listen({\n     'some[selector]': {\n         click: function() { ... }\n     },\n\n     'other selector': {\n         change: {\n             fn: function() { ... },\n             delay: 10\n         }\n     }\n\n }, controller);\n</code></pre>\n"},"match":{"!type":"fn(target: ?, selector: string) -> bool","!doc":"<p>This method matches the firer of the event (the <code>target</code>) to the given <code>selector</code>.\nDefault matching is very simple: a match is true when selector equals target's\n<a href=\"#!/api/Ext.app.EventDomain-cfg-idProperty\" rel=\"Ext.app.EventDomain-cfg-idProperty\" class=\"docClass\">idProperty</a>, or when selector is '*' wildcard to match any\ntarget.</p>\n"},"monitor":{"!type":"fn(observable: +Ext.Class) -> !this","!doc":"<p>This method is called by the derived class to monitor <code>fireEvent</code> calls. Any call\nto <code>fireEvent</code> on the target Observable will be intercepted and dispatched to any\nlistening Controllers. Assuming the original <code>fireEvent</code> method does not return\n<code>false</code>, the event is passed to the <code>dispatch</code> method of this object.</p>\n\n<p>This is typically called in the <code>constructor</code> of derived classes.</p>\n"},"unlisten":{"!type":"fn(controllerId: string) -> !this","!doc":"<p>Removes all of a controller's attached listeners.</p>\n"}},"instances":{"!type":"?","!doc":"<p>An object map containing <code><a href=\"#!/api/Ext.app.EventDomain\" rel=\"Ext.app.EventDomain\" class=\"docClass\">Ext.app.EventDomain</a></code> instances keyed by the value\nof their <code>type</code> property.</p>\n"}},"domain":{"Component":{"!doc":"<p>This class implements the component event domain. All classes extending from\n<a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> are included in this domain. The matching criteria uses\n<a href=\"#!/api/Ext.ComponentQuery\" rel=\"Ext.ComponentQuery\" class=\"docClass\">Ext.ComponentQuery</a>.</p>\n","!type":"fn()","prototype":{"!proto":"Ext.app.EventDomain.prototype"},"type":{"!type":"string"},"match":{"!type":"fn(target: ?, selector: ?) -> bool","!doc":"<p>This method matches the firer of the event (the <code>target</code>) to the given <code>selector</code>.\nDefault matching is very simple: a match is true when selector equals target's\n<a href=\"#!/api/Ext.app.domain.Component-cfg-idProperty\" rel=\"Ext.app.domain.Component-cfg-idProperty\" class=\"docClass\">idProperty</a>, or when selector is '*' wildcard to match any\ntarget.</p>\n"}},"Controller":{"!doc":"<p>This class implements the controller event domain. All classes extending from\n<a href=\"#!/api/Ext.app.Controller\" rel=\"Ext.app.Controller\" class=\"docClass\">Ext.app.Controller</a> are included in this domain. The selectors are simply id's or the\nwildcard \"*\" to match any controller.</p>\n","!type":"fn()","prototype":{"!proto":"Ext.app.EventDomain.prototype"},"idProperty":{"!type":"string","!doc":"<p>Name of the identifier property for this event domain.</p>\n"},"type":{"!type":"string"}},"Direct":{"!doc":"<p>This class implements the <a href=\"#!/api/Ext.direct.Manager\" rel=\"Ext.direct.Manager\" class=\"docClass\">Ext.Direct</a> event domain. All classes extending from\n<a href=\"#!/api/Ext.direct.Provider\" rel=\"Ext.direct.Provider\" class=\"docClass\">Ext.direct.Provider</a> are included in this domain. The selectors are simply provider\nid's or the wildcard \"*\" to match any provider.</p>\n","!type":"fn()","prototype":{"!proto":"Ext.app.EventDomain.prototype"},"idProperty":{"!type":"string","!doc":"<p>Name of the identifier property for this event domain.</p>\n"},"type":{"!type":"string"}},"Global":{"!doc":"<p>This class implements the global event domain. This domain represents event fired from\n<a href=\"#!/api/Ext-property-globalEvents\" rel=\"Ext-property-globalEvents\" class=\"docClass\">Ext.globalEvents</a> Observable instance. No selectors are supported for this domain.</p>\n","!type":"fn()","prototype":{"!proto":"Ext.app.EventDomain.prototype"},"type":{"!type":"string"},"listen":{"!type":"fn(listeners: ?) -> !this","!doc":"<p>This method adds listeners on behalf of a controller. Since Global domain does not\nsupport selectors, we skip this layer and just accept an object keyed by events.\nFor example:</p>\n\n<pre><code> domain.listen({\n     idle: function() { ... },\n     afterlayout: {\n         fn: function() { ... },\n         delay: 10\n     }\n });\n</code></pre>\n"},"match":{"!type":"fn() -> bool","!doc":"<p>This method matches the firer of the event (the <code>target</code>) to the given <code>selector</code>.\nDefault matching is very simple: a match is true when selector equals target's\n<a href=\"#!/api/Ext.app.domain.Global-cfg-idProperty\" rel=\"Ext.app.domain.Global-cfg-idProperty\" class=\"docClass\">idProperty</a>, or when selector is '*' wildcard to match any\ntarget.</p>\n"}},"Store":{"!doc":"<p>This class implements the data store event domain. All classes extending from\n<a href=\"#!/api/Ext.data.AbstractStore\" rel=\"Ext.data.AbstractStore\" class=\"docClass\">Ext.data.AbstractStore</a> are included in this domain. The selectors are simply\nstore id's or the wildcard \"*\" to match any store.</p>\n","!type":"fn()","prototype":{"!proto":"Ext.app.EventDomain.prototype"},"idProperty":{"!type":"string","!doc":"<p>Name of the identifier property for this event domain.</p>\n"},"type":{"!type":"string"}}}},"button":{"Button":{"!doc":"<p>Create simple buttons with this component. Customisations include <a href=\"#!/api/Ext.button.Button-cfg-iconAlign\" rel=\"Ext.button.Button-cfg-iconAlign\" class=\"docClass\">aligned</a>\n<a href=\"#!/api/Ext.button.Button-cfg-iconCls\" rel=\"Ext.button.Button-cfg-iconCls\" class=\"docClass\">icons</a>, <a href=\"#!/api/Ext.button.Button-cfg-menu\" rel=\"Ext.button.Button-cfg-menu\" class=\"docClass\">dropdown menus</a>, <a href=\"#!/api/Ext.button.Button-cfg-tooltip\" rel=\"Ext.button.Button-cfg-tooltip\" class=\"docClass\">tooltips</a>\nand <a href=\"#!/api/Ext.button.Button-cfg-scale\" rel=\"Ext.button.Button-cfg-scale\" class=\"docClass\">sizing options</a>. Specify a <a href=\"#!/api/Ext.button.Button-cfg-handler\" rel=\"Ext.button.Button-cfg-handler\" class=\"docClass\">handler</a> to run code when\na user clicks the button, or use <a href=\"#!/api/Ext.button.Button-cfg-listeners\" rel=\"Ext.button.Button-cfg-listeners\" class=\"docClass\">listeners</a> for other events such as\n<a href=\"#!/api/Ext.button.Button-event-mouseover\" rel=\"Ext.button.Button-event-mouseover\" class=\"docClass\">mouseover</a>. Example usage:</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.Button</a>', {\n    text: 'Click me',\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    handler: function() {\n        alert('You clicked the button!');\n    }\n});\n</code></pre>\n\n<p>The <a href=\"#!/api/Ext.button.Button-cfg-handler\" rel=\"Ext.button.Button-cfg-handler\" class=\"docClass\">handler</a> configuration can also be updated dynamically using the <a href=\"#!/api/Ext.button.Button-method-setHandler\" rel=\"Ext.button.Button-method-setHandler\" class=\"docClass\">setHandler</a>\nmethod.  Example usage:</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.Button</a>', {\n    text    : 'Dynamic Handler Button',\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    handler : function() {\n        // this button will spit out a different number every time you click it.\n        // so firstly we must check if that number is already set:\n        if (this.clickCount) {\n            // looks like the property is already set, so lets just add 1 to that number and alert the user\n            this.clickCount++;\n            alert('You have clicked the button \"' + this.clickCount + '\" times.\\n\\nTry clicking it again..');\n        } else {\n            // if the clickCount property is not set, we will set it and alert the user\n            this.clickCount = 1;\n            alert('You just clicked the button for the first time!\\n\\nTry pressing it again..');\n        }\n    }\n});\n</code></pre>\n\n<p>A button within a container:</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.Container</a>', {\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    items   : [\n        {\n            xtype: 'button',\n            text : 'My Button'\n        }\n    ]\n});\n</code></pre>\n\n<p>A useful option of Button is the <a href=\"#!/api/Ext.button.Button-cfg-scale\" rel=\"Ext.button.Button-cfg-scale\" class=\"docClass\">scale</a> configuration. This configuration has three different options:</p>\n\n<ul>\n<li><code>'small'</code></li>\n<li><code>'medium'</code></li>\n<li><code>'large'</code></li>\n</ul>\n\n\n<p>Example usage:</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.Button</a>', {\n    renderTo: document.body,\n    text    : 'Click me',\n    scale   : 'large'\n});\n</code></pre>\n\n<p>Buttons can also be toggled. To enable this, you simple set the <a href=\"#!/api/Ext.button.Button-cfg-enableToggle\" rel=\"Ext.button.Button-cfg-enableToggle\" class=\"docClass\">enableToggle</a> property to <code>true</code>.\nExample usage:</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.Button</a>', {\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    text: 'Click Me',\n    enableToggle: true\n});\n</code></pre>\n\n<p>You can assign a menu to a button by using the <a href=\"#!/api/Ext.button.Button-cfg-menu\" rel=\"Ext.button.Button-cfg-menu\" class=\"docClass\">menu</a> configuration. This standard configuration\ncan either be a reference to a <a href=\"#!/api/Ext.menu.Menu\" rel=\"Ext.menu.Menu\" class=\"docClass\">menu</a> object, a <a href=\"#!/api/Ext.menu.Menu\" rel=\"Ext.menu.Menu\" class=\"docClass\">menu</a> id or a\n<a href=\"#!/api/Ext.menu.Menu\" rel=\"Ext.menu.Menu\" class=\"docClass\">menu</a> config blob. When assigning a menu to a button, an arrow is automatically\nadded to the button.  You can change the alignment of the arrow using the <a href=\"#!/api/Ext.button.Button-cfg-arrowAlign\" rel=\"Ext.button.Button-cfg-arrowAlign\" class=\"docClass\">arrowAlign</a> configuration\non button.  Example usage:</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.Button</a>', {\n    text      : 'Menu button',\n    renderTo  : <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    arrowAlign: 'bottom',\n    menu      : [\n        {text: 'Item 1'},\n        {text: 'Item 2'},\n        {text: 'Item 3'},\n        {text: 'Item 4'}\n    ]\n});\n</code></pre>\n\n<p>Using listeners, you can easily listen to events fired by any component, using the <a href=\"#!/api/Ext.button.Button-cfg-listeners\" rel=\"Ext.button.Button-cfg-listeners\" class=\"docClass\">listeners</a>\nconfiguration or using the <a href=\"#!/api/Ext.button.Button-method-addListener\" rel=\"Ext.button.Button-method-addListener\" class=\"docClass\">addListener</a> method.  Button has a variety of different listeners:</p>\n\n<ul>\n<li><code>click</code></li>\n<li><code>toggle</code></li>\n<li><code>mouseover</code></li>\n<li><code>mouseout</code></li>\n<li><code>mouseshow</code></li>\n<li><code>menuhide</code></li>\n<li><code>menutriggerover</code></li>\n<li><code>menutriggerout</code></li>\n</ul>\n\n\n<p>Example usage:</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.Button</a>', {\n    text     : 'Button',\n    renderTo : <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    listeners: {\n        click: function() {\n            // this == the button, as we are in the local scope\n            this.setText('I was clicked!');\n        },\n        mouseover: function() {\n            // set a new config which says we moused over, if not already set\n            if (!this.mousedOver) {\n                this.mousedOver = true;\n                alert('You moused over a button!\\n\\nI wont do this again.');\n            }\n        }\n    }\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_button_Button_cfg)","prototype":{"!proto":"Ext.Component.prototype","allowDepress":{"!type":"bool","!doc":"<p>False to not allow a pressed Button to be depressed. Only valid when <a href=\"#!/api/Ext.button.Button-cfg-enableToggle\" rel=\"Ext.button.Button-cfg-enableToggle\" class=\"docClass\">enableToggle</a> is true.</p>\n"},"arrowAlign":{"!type":"string","!doc":"<p>The side of the Button box to render the arrow if the button has an associated <a href=\"#!/api/Ext.button.Button-cfg-menu\" rel=\"Ext.button.Button-cfg-menu\" class=\"docClass\">menu</a>. Two\nvalues are allowed:</p>\n\n<ul>\n<li>'right'</li>\n<li>'bottom'</li>\n</ul>\n\n"},"arrowCls":{"!type":"string","!doc":"<p>The className used for the inner arrow element if the button has a menu.</p>\n"},"baseCls":{"!type":"string","!doc":"<p>The base CSS class to add to all buttons.</p>\n"},"baseParams":{"!type":"?","!doc":"<p>An object literal of parameters to pass to the url when the <a href=\"#!/api/Ext.button.Button-cfg-href\" rel=\"Ext.button.Button-cfg-href\" class=\"docClass\">href</a> property is specified.</p>\n"},"clickEvent":{"!type":"string","!doc":"<p>The DOM event that will fire the handler of the button. This can be any valid event name (dblclick, contextmenu).</p>\n"},"cls":{"!type":"string","!doc":"<p>A CSS class string to apply to the button's main element.</p>\n"},"componentLayout":{"!type":"string|?","!doc":"<p>The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout\nmanager which sizes a Component's internal structure in response to the Component being sized.</p>\n\n<p>Generally, developers will not use this configuration as all provided Components which need their internal\nelements sizing (Such as <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">input fields</a>) come with their own componentLayout managers.</p>\n\n<p>The <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used on instances of the base <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\nclass which simply sizes the Component's encapsulating element to the height and width specified in the\n<a href=\"#!/api/Ext.button.Button-method-setSize\" rel=\"Ext.button.Button-method-setSize\" class=\"docClass\">setSize</a> method.</p>\n"},"destroyMenu":{"!type":"bool","!doc":"<p>Whether or not to destroy any associated menu when this button is destroyed. The menu\nwill be destroyed unless this is explicitly set to false.</p>\n"},"disabled":{"!type":"bool","!doc":"<p>True if this button is disabled.</p>\n"},"enableToggle":{"!type":"bool","!doc":"<p>True to enable pressed/not pressed toggling. If a <a href=\"#!/api/Ext.button.Button-cfg-toggleGroup\" rel=\"Ext.button.Button-cfg-toggleGroup\" class=\"docClass\">toggleGroup</a> is specified, this\noption will be set to true.</p>\n"},"focusCls":{"!type":"string","!doc":"<p>The CSS class to add to a button when it is in the focussed state.</p>\n"},"frame":{"!type":"bool","!doc":"<p>Specify as <code>true</code> to have the Component inject framing elements within the Component at render time to provide a\ngraphical rounded frame around the Component content.</p>\n\n<p>This is only necessary when running on outdated, or non standard-compliant browsers such as Microsoft's Internet\nExplorer prior to version 9 which do not support rounded corners natively.</p>\n\n<p>The extra space taken up by this framing is available from the read only property <a href=\"#!/api/Ext.button.Button-property-frameSize\" rel=\"Ext.button.Button-property-frameSize\" class=\"docClass\">frameSize</a>.</p>\n"},"glyph":{"!type":"number|string","!doc":"<p>A numeric unicode character code to use as the icon for this button. The default\nfont-family for glyphs can be set globally using\n<a href=\"#!/api/Ext-method-setGlyphFontFamily\" rel=\"Ext-method-setGlyphFontFamily\" class=\"docClass\">Ext.setGlyphFontFamily()</a>. Alternatively, this\nconfig option accepts a string with the charCode and font-family separated by the\n<code>@</code> symbol. For example '65@My Font Family'.</p>\n"},"handleMouseEvents":{"!type":"bool","!doc":"<p>False to disable visual cues on mouseover, mouseout and mousedown.</p>\n"},"handler":{"!type":"fn()","!doc":"<p>A function called when the button is clicked (can be used instead of click event).</p>\n"},"hidden":{"!type":"bool","!doc":"<p>True if this button is hidden.</p>\n"},"href":{"!type":"string","!doc":"<p>The URL to open when the button is clicked. Specifying this config causes the Button to be\nrendered with the specified URL as the <code>href</code> attribute of its <code>&lt;a&gt;</code> Element.</p>\n\n<p>This is better than specifying a click handler of</p>\n\n<pre><code>function() { window.location = \"http://www.sencha.com\" }\n</code></pre>\n\n<p>because the UI will provide meaningful hints to the user as to what to expect upon clicking\nthe button, and will also allow the user to open in a new tab or window, bookmark or drag the URL, or directly save\nthe URL stream to disk.</p>\n\n<p>See also the <a href=\"#!/api/Ext.button.Button-cfg-hrefTarget\" rel=\"Ext.button.Button-cfg-hrefTarget\" class=\"docClass\">hrefTarget</a> config.</p>\n"},"hrefTarget":{"!type":"string","!doc":"<p>The target attribute to use for the underlying anchor. Only used if the <a href=\"#!/api/Ext.button.Button-cfg-href\" rel=\"Ext.button.Button-cfg-href\" class=\"docClass\">href</a>\nproperty is specified.</p>\n"},"icon":{"!type":"string","!doc":"<p>The path to an image to display in the button.</p>\n"},"iconAlign":{"!type":"string","!doc":"<p>The side of the Button box to render the icon. Four values are allowed:</p>\n\n<ul>\n<li>'top'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'left'</li>\n</ul>\n\n"},"iconCls":{"!type":"string","!doc":"<p>A css class which sets a background image to be used as the icon for this button.</p>\n"},"menu":{"!type":"+Ext.menu.Menu","!doc":"<p>The <a href=\"#!/api/Ext.menu.Menu\" rel=\"Ext.menu.Menu\" class=\"docClass\">Menu</a> object associated with this Button when configured with the <a href=\"#!/api/Ext.button.Button-cfg-menu\" rel=\"Ext.button.Button-cfg-menu\" class=\"docClass\">menu</a> config\noption.</p>\n"},"menuActiveCls":{"!type":"string","!doc":"<p>The CSS class to add to a button when it's menu is active.</p>\n"},"menuAlign":{"!type":"string","!doc":"<p>The position to align the menu to (see <a href=\"#!/api/Ext.util.Positionable-method-alignTo\" rel=\"Ext.util.Positionable-method-alignTo\" class=\"docClass\">Ext.util.Positionable.alignTo</a> for more details).</p>\n"},"minWidth":{"!type":"number","!doc":"<p>The minimum width for this button (used to give a set of buttons a common width).\nSee also <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>.<a href=\"#!/api/Ext.panel.Panel-cfg-minButtonWidth\" rel=\"Ext.panel.Panel-cfg-minButtonWidth\" class=\"docClass\">minButtonWidth</a>.</p>\n"},"overCls":{"!type":"string","!doc":"<p>The CSS class to add to a button when it is in the over (hovered) state.</p>\n"},"overflowText":{"!type":"string","!doc":"<p>If used in a <a href=\"#!/api/Ext.toolbar.Toolbar\" rel=\"Ext.toolbar.Toolbar\" class=\"docClass\">Toolbar</a>, the text to be used if this item is shown in the overflow menu.\nSee also <a href=\"#!/api/Ext.toolbar.Item\" rel=\"Ext.toolbar.Item\" class=\"docClass\">Ext.toolbar.Item</a>.<code><a href=\"#!/api/Ext.toolbar.Item-cfg-overflowText\" rel=\"Ext.toolbar.Item-cfg-overflowText\" class=\"docClass\">overflowText</a></code>.</p>\n"},"params":{"!type":"?","!doc":"<p>An object literal of parameters to pass to the url when the <a href=\"#!/api/Ext.button.Button-cfg-href\" rel=\"Ext.button.Button-cfg-href\" class=\"docClass\">href</a> property is specified. Any params\noverride <a href=\"#!/api/Ext.button.Button-cfg-baseParams\" rel=\"Ext.button.Button-cfg-baseParams\" class=\"docClass\">baseParams</a>. New params can be set using the <a href=\"#!/api/Ext.button.Button-method-setParams\" rel=\"Ext.button.Button-method-setParams\" class=\"docClass\">setParams</a> method.</p>\n"},"pressed":{"!type":"bool","!doc":"<p>True if this button is pressed (only if enableToggle = true).</p>\n"},"pressedCls":{"!type":"string","!doc":"<p>The CSS class to add to a button when it is in the pressed state.</p>\n"},"preventDefault":{"!type":"bool","!doc":"<p>True to prevent the default action when the <a href=\"#!/api/Ext.button.Button-cfg-clickEvent\" rel=\"Ext.button.Button-cfg-clickEvent\" class=\"docClass\">clickEvent</a> is processed.</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>We have to keep \"unselectable\" attribute on all elements because it's not inheritable.\nWithout it, clicking anywhere on a button disrupts current selection and cursor position\nin HtmlEditor.</p>\n"},"repeat":{"!type":"bool|?","!doc":"<p>True to repeat fire the click event while the mouse is down. This can also be a\n<a href=\"#!/api/Ext.util.ClickRepeater\" rel=\"Ext.util.ClickRepeater\" class=\"docClass\">ClickRepeater</a> config object.</p>\n"},"scale":{"!type":"string|string|string","!doc":"<p>The size of the Button. Three values are allowed:</p>\n\n<ul>\n<li>'small' - Results in the button element being 16px high.</li>\n<li>'medium' - Results in the button element being 24px high.</li>\n<li>'large' - Results in the button element being 32px high.</li>\n</ul>\n\n"},"scope":{"!type":"?","!doc":"<p>The scope (<strong>this</strong> reference) in which the <code><a href=\"#!/api/Ext.button.Button-cfg-handler\" rel=\"Ext.button.Button-cfg-handler\" class=\"docClass\">handler</a></code> and <code><a href=\"#!/api/Ext.button.Button-cfg-toggleHandler\" rel=\"Ext.button.Button-cfg-toggleHandler\" class=\"docClass\">toggleHandler</a></code> is executed.\nDefaults to this Button.</p>\n"},"showEmptyMenu":{"!type":"bool","!doc":"<p>True to force an attached <a href=\"#!/api/Ext.button.Button-cfg-menu\" rel=\"Ext.button.Button-cfg-menu\" class=\"docClass\">menu</a> with no items to be shown when clicking\nthis button. By default, the menu will not show if it is empty.</p>\n"},"shrinkWrap":{"!type":"bool|number","!doc":"<p>If this property is a number, it is interpreted as follows:</p>\n\n<ul>\n<li>0: Neither width nor height depend on content. This is equivalent to <code>false</code>.</li>\n<li>1: Width depends on content (shrink wraps), but height does not.</li>\n<li>2: Height depends on content (shrink wraps), but width does not. The default.</li>\n<li>3: Both width and height depend on content (shrink wrap). This is equivalent to <code>true</code>.</li>\n</ul>\n\n\n<p>In CSS terms, shrink-wrap width is analogous to an inline-block element as opposed\nto a block-level element. Some container layouts always shrink-wrap their children,\neffectively ignoring this property (e.g., <a href=\"#!/api/Ext.layout.container.HBox\" rel=\"Ext.layout.container.HBox\" class=\"docClass\">Ext.layout.container.HBox</a>,\n<a href=\"#!/api/Ext.layout.container.VBox\" rel=\"Ext.layout.container.VBox\" class=\"docClass\">Ext.layout.container.VBox</a>, <a href=\"#!/api/Ext.layout.component.Dock\" rel=\"Ext.layout.component.Dock\" class=\"docClass\">Ext.layout.component.Dock</a>).</p>\n"},"tabIndex":{"!type":"number","!doc":"<p>Set a DOM tabIndex for this button.</p>\n"},"text":{"!type":"string","!doc":"<p>The button text to be used as innerHTML (html tags are accepted).</p>\n"},"textAlign":{"!type":"string","!doc":"<p>The text alignment for this button (center, left, right).</p>\n"},"toggleGroup":{"!type":"string","!doc":"<p>The group this toggle button is a member of (only 1 per group can be pressed). If a toggleGroup\nis specified, the <a href=\"#!/api/Ext.button.Button-cfg-enableToggle\" rel=\"Ext.button.Button-cfg-enableToggle\" class=\"docClass\">enableToggle</a> configuration will automatically be set to true.</p>\n"},"toggleHandler":{"!type":"fn()","!doc":"<p>Function called when a Button with <a href=\"#!/api/Ext.button.Button-cfg-enableToggle\" rel=\"Ext.button.Button-cfg-enableToggle\" class=\"docClass\">enableToggle</a> set to true is clicked.</p>\n"},"tooltip":{"!type":"string|?","!doc":"<p>The tooltip for the button - can be a string to be used as innerHTML (html tags are accepted) or\nQuickTips config object.</p>\n"},"tooltipType":{"!type":"string","!doc":"<p>The type of tooltip to use. Either 'qtip' for QuickTips or 'title' for title attribute.</p>\n"},"_triggerRegion":{"!type":"?","!doc":"<p>A reusable object used by getTriggerRegion to avoid excessive object creation.</p>\n"},"allowedScales":{"!type":"[?]","!doc":"<p>An array of allowed scales.</p>\n"},"isAction":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated Button, or subclass thereof.</p>\n"},"template":{"!type":"+Ext.Template","!doc":"<p>A <a href=\"#!/api/Ext.Template\" rel=\"Ext.Template\" class=\"docClass\">Template</a> used to create the Button's DOM structure.</p>\n\n<p>Instances, or subclasses which need a different DOM structure may provide a different template layout in\nconjunction with an implementation of <a href=\"#!/api/Ext.button.Button-method-getTemplateArgs\" rel=\"Ext.button.Button-method-getTemplateArgs\" class=\"docClass\">getTemplateArgs</a>.</p>\n"},"addOverCls":{"!type":"fn() -> !this","!doc":"<p></p>\n"},"beforeDestroy":{"!type":"fn() -> !this","!doc":"<p>Invoked before the Component is destroyed.</p>\n"},"beforeRender":{"!type":"fn() -> !this"},"clearTip":{"!type":"fn() -> !this"},"didIconStateChange":{"!type":"fn(old: string, current: string) -> bool","!doc":"<p>Checks if the icon/iconCls changed from being empty to having a value, or having a value to being empty.</p>\n"},"disable":{"!type":"fn(silent: ?) -> !this","!doc":"<p>inherit docs</p>\n"},"doToggle":{"!type":"fn() -> !this"},"enable":{"!type":"fn(silent: ?) -> !this","!doc":"<p>inherit docs</p>\n"},"fireHandler":{"!type":"fn(e: ?) -> !this"},"getActionEl":{"!type":"fn() -> !this","!doc":"<p>inherit docs</p>\n"},"getBtnWrapFrameWidth":{"!type":"fn(side: ?) -> !this"},"getComponentCls":{"!type":"fn() -> !this"},"getFocusEl":{"!type":"fn() -> +undefined","!doc":"<p>inherit docs</p>\n"},"getHref":{"!type":"fn() -> string|bool","!doc":"<p>If there is a configured href for this Button, returns the href with parameters appended.</p>\n"},"getInnerCls":{"!type":"fn() -> !this"},"getRefItems":{"!type":"fn(deep: ?) -> !this"},"getSplitCls":{"!type":"fn() -> !this"},"getTemplateArgs":{"!type":"fn() -> ?","!doc":"<p>This method returns an object which provides substitution parameters for the <a href=\"#!/api/Ext.button.Button-cfg-renderTpl\" rel=\"Ext.button.Button-cfg-renderTpl\" class=\"docClass\">XTemplate</a> used to\ncreate this Button's DOM structure.</p>\n\n<p>Instances or subclasses which use a different Template to create a different DOM structure may need to provide\ntheir own implementation of this method.</p>\n"},"getText":{"!type":"fn() -> string","!doc":"<p>Gets the text for this Button</p>\n"},"getTipAttr":{"!type":"fn() -> !this"},"getTriggerRegion":{"!type":"fn() -> ?","!doc":"<p>Returns an object containing <code>begin</code> and <code>end</code> properties that indicate the\nleft/right bounds of a right trigger or the top/bottom bounds of a bottom trigger.</p>\n"},"getTriggerSize":{"!type":"fn() -> !this","!doc":"<p>Measures the size of the trigger area for menu and split buttons. Will be a width for\na right-aligned trigger and a height for a bottom-aligned trigger. Cached after first measurement.</p>\n"},"hasVisibleMenu":{"!type":"fn() -> bool","!doc":"<p>Returns true if the button has a menu and it is visible</p>\n"},"hideMenu":{"!type":"fn() -> +Ext.button.Button","!doc":"<p>Hides this button's menu (if it has one)</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>inherit docs</p>\n"},"maybeShowMenu":{"!type":"fn() -> !this"},"onClick":{"!type":"fn(e: ?) -> !this"},"onDestroy":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the destroy operation.\nAfter calling the superclass's onDestroy, the Component will be destroyed.</p>\n"},"onDisable":{"!type":"fn() -> !this","!doc":"<p>See comments in onFocus</p>\n"},"onDownKey":{"!type":"fn(k: ?, e: ?) -> !this"},"onMenuHide":{"!type":"fn(e: ?) -> !this"},"onMenuShow":{"!type":"fn(e: ?) -> !this"},"onMenuTriggerOut":{"!type":"fn(e: ?) -> !this","!doc":"<p>virtual mouseleave handler called when it is detected that the mouseout event\nsignified the mouse leaving the arrow area of the button - the <code>&lt;em&gt;</code>.</p>\n"},"onMenuTriggerOver":{"!type":"fn(e: ?) -> !this","!doc":"<p>virtual mouseenter handler called when it is detected that the mouseover event\nsignified the mouse entering the arrow area of the button - the <code>&lt;em&gt;</code>.</p>\n"},"onMouseDown":{"!type":"fn(e: ?) -> !this","!doc":"<p>Mousedown brings to front, and programatically grabs focus <em>unless the mousedown was on a focusable element</em></p>\n"},"onMouseEnter":{"!type":"fn(e: ?) -> !this","!doc":"<p>virtual mouseenter handler called when it is detected that the mouseout event\nsignified the mouse entering the encapsulating element.</p>\n"},"onMouseLeave":{"!type":"fn(e: ?) -> !this","!doc":"<p>virtual mouseleave handler called when it is detected that the mouseover event\nsignified the mouse entering the encapsulating element.</p>\n"},"onMouseMove":{"!type":"fn(e: ?) -> !this","!doc":"<p>mousemove handler called when the mouse moves anywhere within the encapsulating element.\nThe position is checked to determine if the mouse is entering or leaving the trigger area. Using\nmousemove to check this is more resource intensive than we'd like, but it is necessary because\nthe trigger area does not line up exactly with sub-elements so we don't always get mouseover/out\nevents when needed. In the future we should consider making the trigger a separate element that\nis absolutely positioned and sized over the trigger area.</p>\n"},"onMouseOut":{"!type":"fn(e: ?) -> !this","!doc":"<p>mouseout handler called when a mouseout event occurs anywhere within the encapsulating element -\nor the mouse leaves the encapsulating element.\nThe targets are interrogated to see what is being exited to where.</p>\n"},"onMouseOver":{"!type":"fn(e: ?) -> !this","!doc":"<p>mouseover handler called when a mouseover event occurs anywhere within the encapsulating element.\nThe targets are interrogated to see what is being entered from where.</p>\n"},"onMouseUp":{"!type":"fn(e: ?) -> !this"},"onRender":{"!type":"fn() -> !this","!doc":"<p>Template method called when this Component's DOM structure is created.</p>\n\n<p>At this point, this Component's (and all descendants') DOM structure <em>exists</em> but it has not\nbeen layed out (positioned and sized).</p>\n\n<p>Subclasses which override this to gain access to the structure at render time should\ncall the parent class's method before attempting to access any child elements of the Component.</p>\n"},"onRepeatClick":{"!type":"fn(repeat: ?, e: ?) -> !this"},"removeOverCls":{"!type":"fn() -> !this"},"restoreClick":{"!type":"fn() -> !this"},"setComponentCls":{"!type":"fn() -> !this"},"setGlyph":{"!type":"fn(glyph: number|string) -> +Ext.button.Button","!doc":"<p>Sets this button's glyph</p>\n"},"setHandler":{"!type":"fn(handler: fn(), scope?: ?) -> +Ext.button.Button","!doc":"<p>Assigns this Button's click handler</p>\n"},"setHref":{"!type":"fn(href: string) -> !this","!doc":"<p>Sets the href of the embedded anchor element to the passed URL.</p>\n\n<p>Also appends any configured <a href=\"#!/api/Ext.button.Button-cfg-baseParams\" rel=\"Ext.button.Button-cfg-baseParams\" class=\"docClass\">baseParams</a> and parameters set through <a href=\"#!/api/Ext.button.Button-method-setParams\" rel=\"Ext.button.Button-method-setParams\" class=\"docClass\">setParams</a>.</p>\n"},"setIcon":{"!type":"fn(icon: string) -> +Ext.button.Button","!doc":"<p>Sets the background image (inline style) of the button. This method also changes the value of the <a href=\"#!/api/Ext.button.Button-cfg-icon\" rel=\"Ext.button.Button-cfg-icon\" class=\"docClass\">icon</a>\nconfig internally.</p>\n"},"setIconCls":{"!type":"fn(cls: string) -> +Ext.button.Button","!doc":"<p>Sets the CSS class that provides a background image to use as the button's icon. This method also changes the\nvalue of the <a href=\"#!/api/Ext.button.Button-cfg-iconCls\" rel=\"Ext.button.Button-cfg-iconCls\" class=\"docClass\">iconCls</a> config internally.</p>\n"},"setParams":{"!type":"fn(params: ?) -> !this","!doc":"<p>Sets the href of the link dynamically according to the params passed, and any <a href=\"#!/api/Ext.button.Button-cfg-baseParams\" rel=\"Ext.button.Button-cfg-baseParams\" class=\"docClass\">baseParams</a> configured.</p>\n\n<p><strong>Only valid if the Button was originally configured with a <a href=\"#!/api/Ext.button.Button-cfg-href\" rel=\"Ext.button.Button-cfg-href\" class=\"docClass\">href</a></strong></p>\n"},"setScale":{"!type":"fn(scale: string) -> !this","!doc":"<p>Method to change the scale of the button. See <a href=\"#!/api/Ext.button.Button-cfg-scale\" rel=\"Ext.button.Button-cfg-scale\" class=\"docClass\">scale</a> for allowed configurations.</p>\n"},"setText":{"!type":"fn(text: string) -> +Ext.button.Button","!doc":"<p>Sets this Button's text</p>\n"},"setTextAlign":{"!type":"fn(align: string) -> !this","!doc":"<p>Sets the text alignment for this button.</p>\n"},"setTooltip":{"!type":"fn(tooltip: string|?) -> +Ext.button.Button","!doc":"<p>Sets the tooltip for this Button.</p>\n"},"setUI":{"!type":"fn(ui: ?) -> !this","!doc":"<p>inherit docs</p>\n"},"showMenu":{"!type":"fn(fromEvent: ?) -> !this","!doc":"<p>Shows this button's menu (if it has one)</p>\n"},"toggle":{"!type":"fn(this: +Ext.button.Button, pressed: bool, eOpts: ?)","!doc":"<p>Fires when the 'pressed' state of this button changes (only if enableToggle = true)</p>\n"},"click":{"!type":"fn(this: +Ext.button.Button, e: +Event, eOpts: ?)","!doc":"<p>Fires when this button is clicked, before the configured <a href=\"#!/api/Ext.button.Button-cfg-handler\" rel=\"Ext.button.Button-cfg-handler\" class=\"docClass\">handler</a> is invoked. Execution of the\n<a href=\"#!/api/Ext.button.Button-cfg-handler\" rel=\"Ext.button.Button-cfg-handler\" class=\"docClass\">handler</a> may be vetoed by returning <code>false</code> to this event.</p>\n"},"glyphchange":{"!type":"fn(this: +Ext.button.Button, newGlyph: number|string, oldGlyph: number|string, eOpts: ?)","!doc":"<p>Fired when the button's glyph is changed by the <a href=\"#!/api/Ext.button.Button-method-setGlyph\" rel=\"Ext.button.Button-method-setGlyph\" class=\"docClass\">setGlyph</a> method.</p>\n"},"iconchange":{"!type":"fn(this: +Ext.button.Button, oldIcon: string, newIcon: string, eOpts: ?)","!doc":"<p>Fired when the button's icon is changed by the <a href=\"#!/api/Ext.button.Button-method-setIcon\" rel=\"Ext.button.Button-method-setIcon\" class=\"docClass\">setIcon</a> or <a href=\"#!/api/Ext.button.Button-method-setIconCls\" rel=\"Ext.button.Button-method-setIconCls\" class=\"docClass\">setIconCls</a> methods.</p>\n"},"menuhide":{"!type":"fn(this: +Ext.button.Button, menu: +Ext.menu.Menu, eOpts: ?)","!doc":"<p>If this button has a menu, this event fires when it is hidden</p>\n"},"menushow":{"!type":"fn(this: +Ext.button.Button, menu: +Ext.menu.Menu, eOpts: ?)","!doc":"<p>If this button has a menu, this event fires when it is shown</p>\n"},"menutriggerout":{"!type":"fn(this: +Ext.button.Button, menu: +Ext.menu.Menu, e: +Event, eOpts: ?)","!doc":"<p>If this button has a menu, this event fires when the mouse leaves the menu triggering element</p>\n"},"menutriggerover":{"!type":"fn(this: +Ext.button.Button, menu: +Ext.menu.Menu, e: +Event, eOpts: ?)","!doc":"<p>If this button has a menu, this event fires when the mouse enters the menu triggering element</p>\n"},"mouseout":{"!type":"fn(this: +Ext.button.Button, e: +Event, eOpts: ?)","!doc":"<p>Fires when the mouse exits the button</p>\n"},"mouseover":{"!type":"fn(this: +Ext.button.Button, e: +Event, eOpts: ?)","!doc":"<p>Fires when the mouse hovers over the button</p>\n"},"textchange":{"!type":"fn(this: +Ext.button.Button, oldText: string, newText: string, eOpts: ?)","!doc":"<p>Fired when the button's text is changed by the <a href=\"#!/api/Ext.button.Button-method-setText\" rel=\"Ext.button.Button-method-setText\" class=\"docClass\">setText</a> method.</p>\n"}}},"Cycle":{"!doc":"<p>A specialized SplitButton that contains a menu of <a href=\"#!/api/Ext.menu.CheckItem\" rel=\"Ext.menu.CheckItem\" class=\"docClass\">Ext.menu.CheckItem</a> elements. The button automatically\ncycles through each menu item on click, raising the button's <a href=\"#!/api/Ext.button.Cycle-event-change\" rel=\"Ext.button.Cycle-event-change\" class=\"docClass\">change</a> event (or calling the button's\n<a href=\"#!/api/Ext.button.Cycle-cfg-changeHandler\" rel=\"Ext.button.Cycle-cfg-changeHandler\" class=\"docClass\">changeHandler</a> function, if supplied) for the active menu item. Clicking on the arrow section of the\nbutton displays the dropdown menu just like a normal SplitButton.  Example usage:</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.button.Cycle\" rel=\"Ext.button.Cycle\" class=\"docClass\">Ext.button.Cycle</a>', {\n    showText: true,\n    prependText: 'View as ',\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    menu: {\n        id: 'view-type-menu',\n        items: [{\n            text: 'text only',\n            iconCls: 'view-text',\n            checked: true\n        },{\n            text: 'HTML',\n            iconCls: 'view-html'\n        }]\n    },\n    changeHandler: function(cycleBtn, activeItem) {\n        <a href=\"#!/api/Ext.MessageBox-method-alert\" rel=\"Ext.MessageBox-method-alert\" class=\"docClass\">Ext.Msg.alert</a>('Change View', activeItem.text);\n    }\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_button_Cycle_cfg)","prototype":{"!proto":"Ext.button.Split.prototype","changeHandler":{"!type":"fn()","!doc":"<p>A callback function that will be invoked each time the active menu item in the button's menu has changed. If this\ncallback is not supplied, the SplitButton will instead fire the <a href=\"#!/api/Ext.button.Cycle-event-change\" rel=\"Ext.button.Cycle-event-change\" class=\"docClass\">change</a> event on active item change. The\nchangeHandler function will be called with the following argument list: (SplitButton this, <a href=\"#!/api/Ext.menu.CheckItem\" rel=\"Ext.menu.CheckItem\" class=\"docClass\">Ext.menu.CheckItem</a>\nitem)</p>\n"},"forceGlyph":{"!type":"number|string","!doc":"<p>The charCode to be used as the static icon for this button.  This icon will always be\ndisplayed regardless of which item is selected in the dropdown list. This override\nthe default behavior of changing the button's icon to match the selected item's icon\non change. This property expects a format consistent with that of <a href=\"#!/api/Ext.button.Cycle-cfg-glyph\" rel=\"Ext.button.Cycle-cfg-glyph\" class=\"docClass\">glyph</a></p>\n"},"forceIcon":{"!type":"string","!doc":"<p>A css class which sets an image to be used as the static icon for this button. This icon will always be displayed\nregardless of which item is selected in the dropdown list. This overrides the default behavior of changing the\nbutton's icon to match the selected item's icon on change.</p>\n"},"items":{"!type":"[?]","!doc":"<p>An array of <a href=\"#!/api/Ext.menu.CheckItem\" rel=\"Ext.menu.CheckItem\" class=\"docClass\">Ext.menu.CheckItem</a> <strong>config</strong> objects to be used when creating the button's menu items (e.g.,\n<code>{text:'Foo', iconCls:'foo-icon'}</code>)</p>\n"},"prependText":{"!type":"string","!doc":"<p>A static string to prepend before the active item's text when displayed as the button's text (only applies when\nshowText = true).</p>\n"},"showText":{"!type":"bool","!doc":"<p>True to display the active item's text as the button text. The Button will show its\nconfigured <a href=\"#!/api/Ext.button.Cycle-cfg-text\" rel=\"Ext.button.Cycle-cfg-text\" class=\"docClass\">text</a> if this config is omitted.</p>\n"},"menu":{"!type":"+Ext.menu.Menu","!doc":"<p>The <a href=\"#!/api/Ext.menu.Menu\" rel=\"Ext.menu.Menu\" class=\"docClass\">Menu</a> object used to display the <a href=\"#!/api/Ext.menu.CheckItem\" rel=\"Ext.menu.CheckItem\" class=\"docClass\">CheckItems</a> representing the\navailable choices.</p>\n"},"checkHandler":{"!type":"fn(item: ?, pressed: ?) -> !this"},"getActiveItem":{"!type":"fn() -> +Ext.menu.CheckItem","!doc":"<p>Gets the currently active menu item.</p>\n"},"getButtonText":{"!type":"fn(item: ?) -> !this"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>inherit docs</p>\n"},"setActiveItem":{"!type":"fn(item: +Ext.menu.CheckItem, suppressEvent?: bool) -> !this","!doc":"<p>Sets the button's active menu item.</p>\n"},"toggleSelected":{"!type":"fn() -> !this","!doc":"<p>This is normally called internally on button click, but can be called externally to advance the button's active\nitem programmatically to the next one in the menu. If the current item is the last one in the menu the active\nitem will be set to the first item in the menu.</p>\n"},"change":{"!type":"fn(this: +Ext.button.Cycle, item: +Ext.menu.CheckItem, eOpts: ?)","!doc":"<p>Fires after the button's active menu item has changed. Note that if a <a href=\"#!/api/Ext.button.Cycle-cfg-changeHandler\" rel=\"Ext.button.Cycle-cfg-changeHandler\" class=\"docClass\">changeHandler</a> function is\nset on this CycleButton, it will be called instead on active item change and this change event will not\nbe fired.</p>\n"}}},"Manager":{"buttonSelector":{"!type":"string"},"groups":{"!type":"?"},"pressedButton":{"!type":"?"},"getPressed":{"!type":"fn(group: string) -> +Ext.button.Button","!doc":"<p>Gets the pressed button in the passed group or null</p>\n"},"init":{"!type":"fn() -> !this"},"onButtonMousedown":{"!type":"fn(button: ?, e: ?) -> !this","!doc":"<p>Called by buton instances.\nTrack the button which was mousedowned upon so that the next <em>document</em> mouseup can be delivered to it\nin case mouse is moved outside of button element.</p>\n"},"onDocumentKeyDown":{"!type":"fn(e: ?) -> !this","!doc":"<p>Buttons must react to SPACE and ENTER to trigger the click handler.\nNow that they are <code>&lt;a&gt;</code> elements, we use a keydown listener.</p>\n"},"onDocumentMouseUp":{"!type":"fn(e: ?) -> !this"},"register":{"!type":"fn(btn: ?) -> !this"},"toggleGroup":{"!type":"fn(btn: ?, state: ?) -> !this"},"unregister":{"!type":"fn(btn: ?) -> !this"}},"Split":{"!doc":"<p>A split button that provides a built-in dropdown arrow that can fire an event separately from the default click event\nof the button. Typically this would be used to display a dropdown menu that provides additional options to the\nprimary button action, but any custom handler can provide the arrowclick implementation.  Example usage:</p>\n\n<pre class='inline-example '><code>// display a dropdown menu:\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.button.Split\" rel=\"Ext.button.Split\" class=\"docClass\">Ext.button.Split</a>', {\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    text: 'Options',\n    // handle a click on the button itself\n    handler: function() {\n        alert(\"The button was clicked\");\n    },\n    menu: new <a href=\"#!/api/Ext.menu.Menu\" rel=\"Ext.menu.Menu\" class=\"docClass\">Ext.menu.Menu</a>({\n        items: [\n            // these will render as dropdown menu items when the arrow is clicked:\n            {text: 'Item 1', handler: function(){ alert(\"Item 1 clicked\"); }},\n            {text: 'Item 2', handler: function(){ alert(\"Item 2 clicked\"); }}\n        ]\n    })\n});\n</code></pre>\n\n<p>Instead of showing a menu, you can provide any type of custom functionality you want when the dropdown\narrow is clicked:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.button.Split\" rel=\"Ext.button.Split\" class=\"docClass\">Ext.button.Split</a>', {\n    renderTo: 'button-ct',\n    text: 'Options',\n    handler: optionsHandler,\n    arrowHandler: myCustomHandler\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_button_Split_cfg)","prototype":{"!proto":"Ext.button.Button.prototype","arrowCls":{"!type":"string","!doc":"<p>The className used for the inner arrow element if the button has a menu.</p>\n"},"arrowHandler":{"!type":"fn()","!doc":"<p>A function called when the arrow button is clicked (can be used instead of click event)</p>\n"},"arrowTooltip":{"!type":"string","!doc":"<p>The title attribute of the arrow.</p>\n"},"split":{"!type":"bool"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>inherit docs</p>\n"},"onClick":{"!type":"fn(e: ?, t: ?) -> !this"},"setArrowHandler":{"!type":"fn(handler: fn(), scope?: ?) -> !this","!doc":"<p>Sets this button's arrow click handler.</p>\n"},"arrowclick":{"!type":"fn(this: +Ext.button.Split, e: +Event, eOpts: ?)","!doc":"<p>Fires when this button's arrow is clicked.</p>\n"}}}},"chart":{"Callout":{"!doc":"<p>A mixin providing callout functionality for <a href=\"#!/api/Ext.chart.series.Series\" rel=\"Ext.chart.series.Series\" class=\"docClass\">Ext.chart.series.Series</a>.</p>\n","!type":"fn(config: Ext_chart_Callout_cfg)","prototype":{"!proto":"Ext.Base.prototype","hideCallouts":{"!type":"fn(index: ?) -> !this"},"onCreateCallout":{"!type":"fn(storeItem: ?, item: ?, i: ?, display: ?) -> !this"},"renderCallouts":{"!type":"fn() -> !this"}}},"Chart":{"!doc":"<p>Charts provide a flexible way to achieve a wide range of data visualization capablitities.\nEach Chart gets its data directly from a <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Store</a>, and automatically\nupdates its display whenever data in the Store changes. In addition, the look and feel\nof a Chart can be customized using <a href=\"#!/api/Ext.chart.theme.Theme\" rel=\"Ext.chart.theme.Theme\" class=\"docClass\">Theme</a>s.</p>\n\n<h2>Creating a Simple Chart</h2>\n\n<p>Every Chart has three key parts - a <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Store</a> that contains the data,\nan array of <a href=\"#!/api/Ext.chart.axis.Axis\" rel=\"Ext.chart.axis.Axis\" class=\"docClass\">Axes</a> which define the boundaries of the Chart,\nand one or more <a href=\"#!/api/Ext.chart.series.Series\" rel=\"Ext.chart.series.Series\" class=\"docClass\">Series</a> to handle the visual rendering of the data points.</p>\n\n<h3>1. Creating a Store</h3>\n\n<p>The first step is to create a <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Model</a> that represents the type of\ndata that will be displayed in the Chart. For example the data for a chart that displays\na weather forecast could be represented as a series of \"WeatherPoint\" data points with\ntwo fields - \"temperature\", and \"date\":</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('WeatherPoint', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['temperature', 'date']\n});\n</code></pre>\n\n<p>Next a <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Store</a> must be created.  The store contains a collection of \"WeatherPoint\" Model instances.\nThe data could be loaded dynamically, but for sake of ease this example uses inline data:</p>\n\n<pre><code>var store = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    model: 'WeatherPoint',\n    data: [\n        { temperature: 58, date: new Date(2011, 1, 1, 8) },\n        { temperature: 63, date: new Date(2011, 1, 1, 9) },\n        { temperature: 73, date: new Date(2011, 1, 1, 10) },\n        { temperature: 78, date: new Date(2011, 1, 1, 11) },\n        { temperature: 81, date: new Date(2011, 1, 1, 12) }\n    ]\n});\n</code></pre>\n\n<p>For additional information on Models and Stores please refer to the <a href=\"#/guide/data\">Data Guide</a>.</p>\n\n<h3>2. Creating the Chart object</h3>\n\n<p>Now that a Store has been created it can be used in a Chart:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.chart.Chart\" rel=\"Ext.chart.Chart\" class=\"docClass\">Ext.chart.Chart</a>', {\n   renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n   width: 400,\n   height: 300,\n   store: store\n});\n</code></pre>\n\n<p>That's all it takes to create a Chart instance that is backed by a Store.\nHowever, if the above code is run in a browser, a blank screen will be displayed.\nThis is because the two pieces that are responsible for the visual display,\nthe Chart's <a href=\"#!/api/Ext.chart.Chart-cfg-axes\" rel=\"Ext.chart.Chart-cfg-axes\" class=\"docClass\">axes</a> and <a href=\"#!/api/Ext.chart.Chart-cfg-series\" rel=\"Ext.chart.Chart-cfg-series\" class=\"docClass\">series</a>, have not yet been defined.</p>\n\n<h3>3. Configuring the Axes</h3>\n\n<p><a href=\"#!/api/Ext.chart.axis.Axis\" rel=\"Ext.chart.axis.Axis\" class=\"docClass\">Axes</a> are the lines that define the boundaries of the data points that a Chart can display.\nThis example uses one of the most common Axes configurations - a horizontal \"x\" axis, and a vertical \"y\" axis:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.chart.Chart\" rel=\"Ext.chart.Chart\" class=\"docClass\">Ext.chart.Chart</a>', {\n    ...\n    axes: [\n        {\n            title: 'Temperature',\n            type: 'Numeric',\n            position: 'left',\n            fields: ['temperature'],\n            minimum: 0,\n            maximum: 100\n        },\n        {\n            title: 'Time',\n            type: 'Time',\n            position: 'bottom',\n            fields: ['date'],\n            dateFormat: 'ga'\n        }\n    ]\n});\n</code></pre>\n\n<p>The \"Temperature\" axis is a vertical <a href=\"#!/api/Ext.chart.axis.Numeric\" rel=\"Ext.chart.axis.Numeric\" class=\"docClass\">Numeric Axis</a> and is positioned on the left edge of the Chart.\nIt represents the bounds of the data contained in the \"WeatherPoint\" Model's \"temperature\" field that was\ndefined above. The minimum value for this axis is \"0\", and the maximum is \"100\".</p>\n\n<p>The horizontal axis is a <a href=\"#!/api/Ext.chart.axis.Time\" rel=\"Ext.chart.axis.Time\" class=\"docClass\">Time Axis</a> and is positioned on the bottom edge of the Chart.\nIt represents the bounds of the data contained in the \"WeatherPoint\" Model's \"date\" field.\nThe <a href=\"#!/api/Ext.chart.axis.Time-cfg-dateFormat\" rel=\"Ext.chart.axis.Time-cfg-dateFormat\" class=\"docClass\">dateFormat</a>\nconfiguration tells the Time Axis how to format it's labels.</p>\n\n<p>Here's what the Chart looks like now that it has its Axes configured:</p>\n\n<p><p><img src=\"\" alt=\"Chart Axes\" width=\"\" height=\"\"></p></p>\n\n<h3>4. Configuring the Series</h3>\n\n<p>The final step in creating a simple Chart is to configure one or more <a href=\"#!/api/Ext.chart.series.Series\" rel=\"Ext.chart.series.Series\" class=\"docClass\">Series</a>.\nSeries are responsible for the visual representation of the data points contained in the Store.\nThis example only has one Series:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.chart.Chart\" rel=\"Ext.chart.Chart\" class=\"docClass\">Ext.chart.Chart</a>', {\n    ...\n    axes: [\n        ...\n    ],\n    series: [\n        {\n            type: 'line',\n            xField: 'date',\n            yField: 'temperature'\n        }\n    ]\n});\n</code></pre>\n\n<p>This Series is a <a href=\"#!/api/Ext.chart.series.Line\" rel=\"Ext.chart.series.Line\" class=\"docClass\">Line Series</a>, and it uses the \"date\" and \"temperature\" fields\nfrom the \"WeatherPoint\" Models in the Store to plot its data points:</p>\n\n<p><p><img src=\"\" alt=\"Line Series\" width=\"\" height=\"\"></p></p>\n\n<p>See the <a href=\"#!/example/charts/Charts.html\">Line Charts Example</a> for a live demo.</p>\n\n<h2>Themes</h2>\n\n<p>The color scheme for a Chart can be easily changed using the <a href=\"#!/api/Ext.chart.Chart-cfg-theme\" rel=\"Ext.chart.Chart-cfg-theme\" class=\"docClass\">theme</a> configuration option:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.chart.Chart\" rel=\"Ext.chart.Chart\" class=\"docClass\">Ext.chart.Chart</a>', {\n    ...\n    theme: 'Green',\n    ...\n});\n</code></pre>\n\n<p><p><img src=\"\" alt=\"Green Theme\" width=\"\" height=\"\"></p></p>\n\n<p>For more information on Charts please refer to the <a href=\"#/guide/charting\">Charting Guide</a>.</p>\n","!type":"fn(config?: Ext_chart_Chart_cfg)","prototype":{"!proto":"Ext.draw.Component.prototype","animate":{"!type":"bool|?","!doc":"<p>True for the default animation (easing: 'ease' and duration: 500) or a standard animation config\nobject to be used for default chart animations. Defaults to false.</p>\n"},"axes":{"!type":"[+Ext.chart.axis.Axis]","!doc":"<p>Array of <a href=\"#!/api/Ext.chart.axis.Axis\" rel=\"Ext.chart.axis.Axis\" class=\"docClass\">Axis</a> instances or config objects.  For example:</p>\n\n<pre><code>axes: [{\n    type: 'Numeric',\n    position: 'left',\n    fields: ['data1'],\n    title: 'Number of Hits',\n    minimum: 0,\n    //one minor tick between two major ticks\n    minorTickSteps: 1\n}, {\n    type: 'Category',\n    position: 'bottom',\n    fields: ['name'],\n    title: 'Month of the Year'\n}]\n</code></pre>\n"},"background":{"!type":"?|bool","!doc":"<p>The chart background. This can be a gradient object, image, or color. Defaults to false for no\nbackground. For example, if <code>background</code> were to be a color we could set the object as</p>\n\n<pre><code>background: {\n    //color string\n    fill: '#ccc'\n}\n</code></pre>\n\n<p>You can specify an image by using:</p>\n\n<pre><code>background: {\n    image: 'http://path.to.image/'\n}\n</code></pre>\n\n<p>Also you can specify a gradient by using the gradient object syntax:</p>\n\n<pre><code>background: {\n    gradient: {\n        id: 'gradientId',\n        angle: 45,\n        stops: {\n            0: {\n                color: '#555'\n            }\n            100: {\n                color: '#ddd'\n            }\n        }\n    }\n}\n</code></pre>\n"},"gradients":{"!type":"[?]","!doc":"<p>Define a set of gradients that can be used as <code>fill</code> property in sprites. The gradients array is an\narray of objects with the following properties:</p>\n\n<ul>\n<li><strong>id</strong> - string - The unique name of the gradient.</li>\n<li><strong>angle</strong> - number, optional - The angle of the gradient in degrees.</li>\n<li><strong>stops</strong> - object - An object with numbers as keys (from 0 to 100) and style objects as values</li>\n</ul>\n\n\n<p>For example:</p>\n\n<pre><code>gradients: [{\n    id: 'gradientId',\n    angle: 45,\n    stops: {\n        0: {\n            color: '#555'\n        },\n        100: {\n            color: '#ddd'\n        }\n    }\n}, {\n    id: 'gradientId2',\n    angle: 0,\n    stops: {\n        0: {\n            color: '#590'\n        },\n        20: {\n            color: '#599'\n        },\n        100: {\n            color: '#ddd'\n        }\n    }\n}]\n</code></pre>\n\n<p>Then the sprites can use <code>gradientId</code> and <code>gradientId2</code> by setting the fill attributes to those ids, for example:</p>\n\n<pre><code>sprite.setAttributes({\n    fill: 'url(#gradientId)'\n}, true);\n</code></pre>\n"},"insetPadding":{"!type":"number","!doc":"<p>The amount of inset padding in pixels for the chart. Defaults to 10.</p>\n"},"legend":{"!type":"bool|?","!doc":"<p>True for the default legend display or a legend config object. Defaults to false.</p>\n"},"series":{"!type":"[+Ext.chart.series.Series]","!doc":"<p>Array of <a href=\"#!/api/Ext.chart.series.Series\" rel=\"Ext.chart.series.Series\" class=\"docClass\">Series</a> instances or config objects.  For example:</p>\n\n<pre><code>series: [{\n    type: 'column',\n    axis: 'left',\n    listeners: {\n        'afterrender': function() {\n            console('afterrender');\n        }\n    },\n    xField: 'category',\n    yField: 'data1'\n}]\n</code></pre>\n"},"store":{"!type":"+Ext.data.Store","!doc":"<p>The store that supplies data to this chart.</p>\n"},"theme":{"!type":"string","!doc":"<p>The name of the theme to be used. A theme defines the colors and other visual displays of tick marks\non axis, text, title text, line colors, marker colors and styles, etc. Possible theme values are 'Base', 'Green',\n'Sky', 'Red', 'Purple', 'Blue', 'Yellow' and also six category themes 'Category1' to 'Category6'. Default value\nis 'Base'.</p>\n"},"viewBox":{"!type":"bool","!doc":"<p>Turn on view box support which will scale and position items in the draw component to fit to the component while\nmaintaining aspect ratio. Note that this scaling can override other sizing settings on your items.</p>\n"},"afterComponentLayout":{"!type":"fn(width: ?, height: ?, oldWidth: ?, oldHeight: ?) -> !this","!doc":"<p>overrides the component method to set the correct dimensions to the chart.</p>\n"},"afterRender":{"!type":"fn() -> !this","!doc":"<p>set the store after rendering the chart.</p>\n"},"alignAxes":{"!type":"fn() -> !this","!doc":"<p>Adjust the dimensions and positions of each axis and the chart body area after accounting\nfor the space taken up on each side by the axes and legend.\nThis code is taken from <a href=\"#!/api/Ext.chart.Chart\" rel=\"Ext.chart.Chart\" class=\"docClass\">Ext.chart.Chart</a> and refactored to provide better flexibility.</p>\n"},"bindStore":{"!type":"fn(store: ?, initial: ?) -> !this","!doc":"<p>Binds a store to this instance.</p>\n"},"calculateInsets":{"!type":"fn() -> !this","!doc":"<p>Calculate insets for the Chart.</p>\n"},"delayRefresh":{"!type":"fn() -> !this","!doc":"<p>buffered refresh for when we update the store</p>\n"},"destroy":{"!type":"fn() -> !this","!doc":"<p>remove gently.</p>\n"},"doRefresh":{"!type":"fn() -> !this"},"drawAxis":{"!type":"fn(axis: ?) -> !this","!doc":"<p>draw axis.</p>\n"},"drawCharts":{"!type":"fn(series: ?) -> !this","!doc":"<p>draw series.</p>\n"},"forceRefresh":{"!type":"fn(container: ?) -> !this"},"getChartStore":{"!type":"fn() -> !this"},"getEventXY":{"!type":"fn(e: ?) -> !this","!doc":"<p>get x and y position of the mouse cursor.</p>\n"},"getInsets":{"!type":"fn() -> !this","!doc":"<p>Get initial insets; override to provide different defaults.</p>\n"},"getMaxGutters":{"!type":"fn() -> !this"},"getStoreListeners":{"!type":"fn() -> ?","!doc":"<p>Gets the listeners to bind to a new store.</p>\n"},"handleClick":{"!type":"fn(name: ?, e: ?) -> !this","!doc":"<p>wrap the mouse down position to delegate the event to the series.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>The initComponent template method is an important initialization step for a Component. It is intended to be\nimplemented by each subclass of <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> to provide any needed constructor logic. The\ninitComponent method of the class being created is called first, with each initComponent method\nup the hierarchy to <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> being called thereafter. This makes it easy to implement and,\nif needed, override the constructor logic of the Component at any step in the hierarchy.</p>\n\n<p>The initComponent method <strong>must</strong> contain a call to <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a> in order\nto ensure that the parent class' initComponent method is also called.</p>\n\n<p>All config options passed to the constructor are applied to <code>this</code> before initComponent is called,\nso you can simply access them with <code>this.someOption</code>.</p>\n\n<p>The following example demonstrates using a dynamic string for the text of a button at the time of\ninstantiation of the class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('DynamicButtonText', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n\n    initComponent: function() {\n        this.text = new Date();\n        this.renderTo = <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>();\n        this.callParent();\n    }\n});\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function() {\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('DynamicButtonText');\n});\n</code></pre>\n"},"initializeAxis":{"!type":"fn(axis: ?) -> !this","!doc":"<p>Create Axis</p>\n"},"initializeSeries":{"!type":"fn(series: ?, idx: ?, themeIndex: ?) -> !this","!doc":"<p>initialize the series.</p>\n"},"onAddedVml":{"!type":"fn() -> !this","!doc":"<p>When using a vml surface we need to redraw when this chart or one of its ancestors\nis moved to a new container after render, because moving the vml chart causes the\nvml elements to go haywire, some displaing incorrectly or not displaying at all.\nThis appears to be caused by the component being moved to the detached body element\nbefore being added to the new container.</p>\n"},"onClick":{"!type":"fn(e: ?) -> !this"},"onContainerAddedVml":{"!type":"fn(container: ?) -> !this"},"onDblClick":{"!type":"fn(e: ?) -> !this"},"onMouseDown":{"!type":"fn(e: ?) -> !this","!doc":"<p>wrap the mouse down position to delegate the event to the series.</p>\n"},"onMouseLeave":{"!type":"fn(e: ?) -> !this","!doc":"<p>handle mouse leave event.</p>\n"},"onMouseMove":{"!type":"fn(e: ?) -> !this","!doc":"<p>wrap the mouse move event so it can be delegated to the series.</p>\n"},"onMouseUp":{"!type":"fn(e: ?) -> !this","!doc":"<p>wrap the mouse up event to delegate it to the series.</p>\n"},"onShow":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the show operation. After\ncalling the superclass's onShow, the Component will be visible.</p>\n\n<p>Override in subclasses where more complex behaviour is needed.</p>\n\n<p>Gets passed the same parameters as <a href=\"#!/api/Ext.chart.Chart-method-show\" rel=\"Ext.chart.Chart-method-show\" class=\"docClass\">show</a>.</p>\n"},"redraw":{"!type":"fn(resize?: bool) -> !this","!doc":"<p>Redraws the chart. If animations are set this will animate the chart too.</p>\n"},"refresh":{"!type":"fn(this: +Ext.chart.Chart, eOpts: ?)","!doc":"<p>Fires after the chart data has been refreshed.</p>\n"},"save":{"!type":"fn(config?: ?) -> ?","!doc":"<p>Saves the chart by either triggering a download or returning a string containing the chart data\nas SVG.  The action depends on the export type specified in the passed configuration. The chart\nwill be exported using either the <a href=\"#!/api/Ext.draw.engine.SvgExporter\" rel=\"Ext.draw.engine.SvgExporter\" class=\"docClass\">Ext.draw.engine.SvgExporter</a> or the <a href=\"#!/api/Ext.draw.engine.ImageExporter\" rel=\"Ext.draw.engine.ImageExporter\" class=\"docClass\">Ext.draw.engine.ImageExporter</a>\nclasses.</p>\n\n<p>Possible export types:</p>\n\n<ul>\n<li>'image/png'</li>\n<li>'image/jpeg',</li>\n<li>'image/svg+xml'</li>\n</ul>\n\n\n<p>If 'image/svg+xml' is specified, the SvgExporter will be used.\nIf 'image/png' or 'image/jpeg' are specified, the ImageExporter will be used. This exporter\nmust post the SVG data to a remote server to have the data processed, see the <a href=\"#!/api/Ext.draw.engine.ImageExporter\" rel=\"Ext.draw.engine.ImageExporter\" class=\"docClass\">Ext.draw.engine.ImageExporter</a>\nfor more details.</p>\n\n<p>Example usage:</p>\n\n<pre><code>chart.save({\n     type: 'image/png'\n});\n</code></pre>\n\n<p><strong>Important</strong>: By default, chart data is sent to a server operated\nby Sencha to do data processing. You may change this default by\nsetting the <a href=\"#!/api/Ext.draw.engine.ImageExporter-property-defaultUrl\" rel=\"Ext.draw.engine.ImageExporter-property-defaultUrl\" class=\"docClass\">defaultUrl</a> of the <a href=\"#!/api/Ext.draw.engine.ImageExporter\" rel=\"Ext.draw.engine.ImageExporter\" class=\"docClass\">Ext.draw.engine.ImageExporter</a> class.\nIn addition, please note that this service only creates PNG images.</p>\n"},"setShowListeners":{"!type":"fn(method: ?) -> !this"},"setSubStore":{"!type":"fn(subStore: ?) -> !this"},"beforerefresh":{"!type":"fn(this: +Ext.chart.Chart, eOpts: ?)","!doc":"<p>Fires before a refresh to the chart data is called. If the beforerefresh handler returns false the\n<a href=\"#!/api/Ext.chart.Chart-event-refresh\" rel=\"Ext.chart.Chart-event-refresh\" class=\"docClass\">refresh</a> action will be cancelled.</p>\n"}}},"Mask":{"prototype":{"!proto":"Ext.Base.prototype","mask":{"!type":"bool|string","!doc":"<p>Enables selecting a region on chart. True to enable any selection,\n'horizontal' or 'vertical' to restrict the selection to X or Y axis.</p>\n\n<p>The mask in itself will do nothing but fire 'select' event.\nSee <a href=\"#!/api/Ext.chart.Mask\" rel=\"Ext.chart.Mask\" class=\"docClass\">Ext.chart.Mask</a> for example.</p>\n"},"handleMouseEvent":{"!type":"fn(e: ?) -> !this"},"onMouseDown":{"!type":"fn(e: ?) -> !this"},"onMouseLeave":{"!type":"fn(e: ?) -> !this"},"onMouseMove":{"!type":"fn(e: ?) -> !this"},"onMouseUp":{"!type":"fn(e: ?) -> !this"}},"!doc":"<p>Defines a mask for a chart's series.\nThe 'chart' member must be set prior to rendering.</p>\n\n<p>A Mask can be used to select a certain region in a chart.\nWhen enabled, the <code>select</code> event will be triggered when a\nregion is selected by the mask, allowing the user to perform\nother tasks like zooming on that region, etc.</p>\n\n<p>In order to use the mask one has to set the Chart <code>mask</code> option to\n<code>true</code>, <code>vertical</code> or <code>horizontal</code>. Then a possible configuration for the\nlistener could be:</p>\n\n<pre><code>items: {\n    xtype: 'chart',\n    animate: true,\n    store: store1,\n    mask: 'horizontal',\n    listeners: {\n        select: {\n            fn: function(me, selection) {\n                me.setZoom(selection);\n                me.mask.hide();\n            }\n        }\n    }\n}\n</code></pre>\n\n<p>In this example we zoom the chart to that particular region. You can also get\na handle to a mask instance from the chart object. The <code>chart.mask</code> element is a\n<code><a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.Panel</a></code>.</p>\n","!type":"fn(config?: Ext_chart_Mask_cfg)"},"Navigation":{"prototype":{"restoreZoom":{"!type":"fn() -> !this","!doc":"<p>Restores the zoom to the original value. This can be used to reset\nthe previous zoom state set by <code>setZoom</code>. For example:</p>\n\n<pre><code>myChart.restoreZoom();\n</code></pre>\n"},"setZoom":{"!type":"fn(zoomConfig: ?) -> !this","!doc":"<p>Zooms the chart to the specified selection range.\nCan be used with a selection mask. For example:</p>\n\n<pre><code>items: {\n    xtype: 'chart',\n    animate: true,\n    store: store1,\n    mask: 'horizontal',\n    listeners: {\n        select: {\n            fn: function(me, selection) {\n                me.setZoom(selection);\n                me.mask.hide();\n            }\n        }\n    }\n}\n</code></pre>\n"}},"!doc":"<p>Handles panning and zooming capabilities.</p>\n\n<p>Used as mixin by <a href=\"#!/api/Ext.chart.Chart\" rel=\"Ext.chart.Chart\" class=\"docClass\">Ext.chart.Chart</a>.</p>\n"},"Highlight":{"!doc":"<p>A mixin providing highlight functionality for <a href=\"#!/api/Ext.chart.series.Series\" rel=\"Ext.chart.series.Series\" class=\"docClass\">Ext.chart.series.Series</a>.</p>\n","!type":"fn(config: Ext_chart_Highlight_cfg)","prototype":{"!proto":"Ext.Base.prototype","highlight":{"!type":"bool|?","!doc":"<p>Set to <code>true</code> to enable highlighting using the <a href=\"#!/api/Ext.chart.Highlight-property-highlightCfg\" rel=\"Ext.chart.Highlight-property-highlightCfg\" class=\"docClass\">default highlight attributes</a>.</p>\n\n<p>Can also be an object with style properties (i.e fill, stroke, stroke-width, radius) which are may override the <a href=\"#!/api/Ext.chart.Highlight-property-highlightCfg\" rel=\"Ext.chart.Highlight-property-highlightCfg\" class=\"docClass\">default highlight attributes</a>.</p>\n"},"highlightCfg":{"!type":"?","!doc":"<p>The default properties to apply as a highight. Value is</p>\n\n<p>   {\n       fill: '#fdd',\n       \"stroke-width\": 5,\n       stroke: \"#f55'\n   }</p>\n"},"cleanHighlights":{"!type":"fn() -> !this"},"highlightItem":{"!type":"fn(item: ?) -> !this","!doc":"<p>Highlight the given series item.</p>\n"},"unHighlightItem":{"!type":"fn() -> !this","!doc":"<p>Un-highlight any existing highlights</p>\n"}}},"Label":{"!doc":"<p>Labels is a mixin to the Series class. Labels methods are implemented\nin each of the Series (Pie, Bar, etc) for label creation and placement.</p>\n\n<p>The 2 methods that must be implemented by the Series are:</p>\n\n<ul>\n<li><a href=\"#!/api/Ext.chart.Label-method-onCreateLabel\" rel=\"Ext.chart.Label-method-onCreateLabel\" class=\"docClass\">onCreateLabel</a></li>\n<li><a href=\"#!/api/Ext.chart.Label-method-onPlaceLabel\" rel=\"Ext.chart.Label-method-onPlaceLabel\" class=\"docClass\">onPlaceLabel</a></li>\n</ul>\n\n\n<p>The application can override these methods to control the style and\nlocation of the labels. For instance, to display the labels in green and\nadd a '+' symbol when the value of a Line series exceeds 50:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Ext.chart.series.MyLine', {\n     extend: '<a href=\"#!/api/Ext.chart.series.Line\" rel=\"Ext.chart.series.Line\" class=\"docClass\">Ext.chart.series.Line</a>',\n     alias: ['series.myline', 'Ext.chart.series.MyLine'],\n     type: 'MYLINE',\n\n     onPlaceLabel: function(label, storeItem, item, i, display, animate){\n         if (storeItem.data.y &gt;= 50) {\n             label.setAttributes({\n                 fill: '#080',\n                 text: \"+\" + storeItem.data.y\n             }, true);\n         }\n         return this.callParent(arguments);\n     }\n });\n</code></pre>\n\n<p>Note that for simple effects, like the example above, it is simpler\nfor the application to provide a label.renderer function in the config:</p>\n\n<pre><code>  label: {\n      renderer: function(value, label, storeItem, item, i, display, animate, index) {\n          if (value &gt;= 50) {\n              label.setAttributes({fill:'#080'});\n              value = \"+\" + value;\n          }\n          return value;\n      }\n  }\n</code></pre>\n\n<p>The rule of thumb is that to customize the value and modify simple visual attributes, it\nis simpler to use a renderer function, while overridding <code>onCreateLabel</code> and <code>onPlaceLabel</code>\nallows the application to take entire control over the labels.</p>\n","!type":"fn(config: Ext_chart_Label_cfg)","prototype":{"!proto":"Ext.Base.prototype","label":{"!type":"?","!doc":"<p>Object with the following properties:</p>\n"},"colorStringRe":{"!type":"+RegExp","!doc":"<p>a regex to parse url type colors.</p>\n"},"hideLabels":{"!type":"fn(hides: ?) -> !this"},"onCreateLabel":{"!type":"fn(storeItem: +Ext.data.Model, item: ?, i: number, display: string) -> +Ext.draw.Sprite","!doc":"<p>Called each time a new label is created.</p>\n\n<p><strong>Note:</strong> This method must be implemented in Series that mixes\nin this Label mixin.</p>\n"},"onPlaceLabel":{"!type":"fn(label: +Ext.draw.Sprite, storeItem: +Ext.data.Model, item: ?, i: number, display: string, animate: bool, index: number)","!doc":"<p>Called for updating the position of the label.</p>\n\n<p><strong>Note:</strong> This method must be implemented in Series that mixes\nin this Label mixin.</p>\n"},"renderLabels":{"!type":"fn() -> !this","!doc":"<p>a method to render all labels in the labelGroup</p>\n"}}},"Legend":{"!doc":"<p>Defines a legend for a chart's series.\nThe 'chart' member must be set prior to rendering.\nThe legend class displays a list of legend items each of them related with a\nseries being rendered. In order to render the legend item of the proper series\nthe series configuration object must have <code>showInLegend</code> set to true.</p>\n\n<p>The legend configuration object accepts a <code>position</code> as parameter.\nThe <code>position</code> parameter can be <code>left</code>, <code>right</code>\n<code>top</code> or <code>bottom</code>. For example:</p>\n\n<pre><code>legend: {\n    position: 'right'\n},\n</code></pre>\n\n<h2>Example</h2>\n\n<pre class='inline-example '><code>var store = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.JsonStore\" rel=\"Ext.data.JsonStore\" class=\"docClass\">Ext.data.JsonStore</a>', {\n    fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],\n    data: [\n        { 'name': 'metric one',   'data1': 10, 'data2': 12, 'data3': 14, 'data4': 8,  'data5': 13 },\n        { 'name': 'metric two',   'data1': 7,  'data2': 8,  'data3': 16, 'data4': 10, 'data5': 3  },\n        { 'name': 'metric three', 'data1': 5,  'data2': 2,  'data3': 14, 'data4': 12, 'data5': 7  },\n        { 'name': 'metric four',  'data1': 2,  'data2': 14, 'data3': 6,  'data4': 1,  'data5': 23 },\n        { 'name': 'metric five',  'data1': 27, 'data2': 38, 'data3': 36, 'data4': 13, 'data5': 33 }\n    ]\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.chart.Chart\" rel=\"Ext.chart.Chart\" class=\"docClass\">Ext.chart.Chart</a>', {\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    width: 500,\n    height: 300,\n    animate: true,\n    store: store,\n    shadow: true,\n    theme: 'Category1',\n    legend: {\n        position: 'top'\n    },\n    axes: [\n        {\n            type: 'Numeric',\n            position: 'left',\n            fields: ['data1', 'data2', 'data3', 'data4', 'data5'],\n            title: 'Sample Values',\n            grid: {\n                odd: {\n                    opacity: 1,\n                    fill: '#ddd',\n                    stroke: '#bbb',\n                    'stroke-width': 1\n                }\n            },\n            minimum: 0,\n            adjustMinimumByMajorUnit: 0\n        },\n        {\n            type: 'Category',\n            position: 'bottom',\n            fields: ['name'],\n            title: 'Sample Metrics',\n            grid: true,\n            label: {\n                rotate: {\n                    degrees: 315\n                }\n            }\n        }\n    ],\n    series: [{\n        type: 'area',\n        highlight: false,\n        axis: 'left',\n        xField: 'name',\n        yField: ['data1', 'data2', 'data3', 'data4', 'data5'],\n        style: {\n            opacity: 0.93\n        }\n    }]\n});\n</code></pre>\n","!type":"fn(config?: Ext_chart_Legend_cfg)","prototype":{"!proto":"Ext.Base.prototype","boxFill":{"!type":"string","!doc":"<p>Fill style for the legend box</p>\n"},"boxStroke":{"!type":"string","!doc":"<p>Style of the stroke for the legend box</p>\n"},"boxStrokeWidth":{"!type":"string","!doc":"<p>Width of the stroke for the legend box</p>\n"},"boxZIndex":{"!type":"number","!doc":"<p>Sets the z-index for the legend. Defaults to 100.</p>\n"},"itemSpacing":{"!type":"number","!doc":"<p>Amount of space between legend items</p>\n"},"labelColor":{"!type":"string","!doc":"<p>Color to be used for the legend labels, eg '#000'</p>\n"},"labelFont":{"!type":"string","!doc":"<p>Font to be used for the legend labels, eg '12px Helvetica'</p>\n"},"padding":{"!type":"number","!doc":"<p>Amount of padding between the legend box's border and its items</p>\n"},"position":{"!type":"string","!doc":"<p>The position of the legend in relation to the chart. One of: \"top\",\n\"bottom\", \"left\", \"right\", or \"float\". If set to \"float\", then the legend\nbox will be positioned at the point denoted by the x and y parameters.</p>\n"},"update":{"!type":"bool","!doc":"<p>If set to true the legend will be refreshed when the chart is.\nThis is useful to update the legend items if series are\nadded/removed/updated from the chart. Default is true.</p>\n"},"visible":{"!type":"bool","!doc":"<p>Whether or not the legend should be displayed.</p>\n"},"x":{"!type":"number","!doc":"<p>X-position of the legend box. Used directly if position is set to \"float\", otherwise\nit will be calculated dynamically.</p>\n"},"y":{"!type":"number","!doc":"<p>Y-position of the legend box. Used directly if position is set to \"float\", otherwise\nit will be calculated dynamically.</p>\n"},"height":{"!type":"number"},"isVertical":{"!type":"bool","!doc":"<p>Whether the legend box is oriented vertically, i.e. if it is on the left or right side or floating.</p>\n"},"width":{"!type":"number"},"alignItems":{"!type":"fn() -> !this","!doc":"<p>Positions all items within Legend box.</p>\n"},"calcPosition":{"!type":"fn() -> !this","!doc":"<p>Calculates Legend position with respect to other Chart elements.</p>\n"},"create":{"!type":"fn() -> !this","!doc":"<p>Create all the sprites for the legend</p>\n"},"createBox":{"!type":"fn() -> !this","!doc":"<p>Create the box around the legend items</p>\n"},"createItems":{"!type":"fn() -> !this","!doc":"<p>Create the series markers and labels</p>\n"},"createLegendItem":{"!type":"fn(series: ?, yFieldIndex: ?) -> !this","!doc":"<p>Creates single Legend Item</p>\n"},"getBBox":{"!type":"fn() -> !this","!doc":"<p>Get the bounds for the legend's outer box</p>\n"},"isDisplayed":{"!type":"fn() -> !this","!doc":"<p>Determine whether the legend should be displayed. Looks at the legend's 'visible' config,\nand also the 'showInLegend' config for each of the series.</p>\n"},"redraw":{"!type":"fn() -> !this","!doc":"<p>Redraws the Legend</p>\n"},"removeItems":{"!type":"fn() -> !this","!doc":"<p>Removes all legend items.</p>\n"},"toggle":{"!type":"fn(show: bool) -> !this","!doc":"<p>toggle</p>\n"},"updateItemDimensions":{"!type":"fn() -> !this"},"updatePosition":{"!type":"fn() -> !this","!doc":"<p>Update the position of all the legend's sprites to match its current x/y values</p>\n"}}},"LegendItem":{"!doc":"<p>A single item of a legend (marker plus label)</p>\n","!type":"fn(config: Ext_chart_LegendItem_cfg)","prototype":{"!proto":"Ext.draw.CompositeSprite.prototype","boldRe":{"!type":"+RegExp","!doc":"<p>checks to make sure that a unit size follows the bold keyword in the font style value</p>\n"},"hiddenSeries":{"!type":"bool","!doc":"<p>Controls Series visibility</p>\n"},"label":{"!type":"?","!doc":"<p>These are cached for quick lookups</p>\n"},"x":{"!type":"number","!doc":"<p>Position of the item, relative to the upper-left corner of the legend box</p>\n"},"y":{"!type":"number"},"zIndex":{"!type":"number"},"createLabel":{"!type":"fn(config: ?) -> !this","!doc":"<p>Creates label sprite.</p>\n"},"createLegend":{"!type":"fn(config: ?) -> !this","!doc":"<p>Creates all the individual sprites for this legend item</p>\n"},"createSeriesMarkers":{"!type":"fn(config: ?) -> !this","!doc":"<p>Creates Series marker Sprites.</p>\n"},"drawFilledBox":{"!type":"fn(width: ?, height: ?, z: ?, index: ?) -> !this","!doc":"<p>Creates box-shaped marker for all series but Line and Scatter.</p>\n"},"drawLine":{"!type":"fn(fromX: ?, fromY: ?, toX: ?, toY: ?, z: ?, seriesStyle: ?, index: ?) -> !this","!doc":"<p>Creates line sprite for Line series.</p>\n"},"drawMarker":{"!type":"fn(x: ?, y: ?, z: ?, markerConfig: ?) -> !this","!doc":"<p>Creates series-shaped marker for Line and Scatter series.</p>\n"},"getLabelText":{"!type":"fn() -> !this","!doc":"<p>Retrieves text to be displayed as item label.</p>\n"},"onMouseDown":{"!type":"fn() -> !this","!doc":"<p>Toggles Series visibility upon mouse click on the item.</p>\n"},"onMouseOut":{"!type":"fn() -> !this","!doc":"<p>Draws label in normal when mouse cursor leaves the item.</p>\n"},"onMouseOver":{"!type":"fn() -> !this","!doc":"<p>Draws label in bold when mouse cursor is over the item.</p>\n"},"updatePosition":{"!type":"fn(relativeTo?: ?) -> !this","!doc":"<p>Update the positions of all this item's sprites to match the root position\nof the legend box.</p>\n"}}},"MaskLayer":{"!type":"fn(config: Ext_chart_MaskLayer_cfg)","prototype":{"!proto":"Ext.Component.prototype","initComponent":{"!type":"fn() -> !this","!doc":"<p>The initComponent template method is an important initialization step for a Component. It is intended to be\nimplemented by each subclass of <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> to provide any needed constructor logic. The\ninitComponent method of the class being created is called first, with each initComponent method\nup the hierarchy to <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> being called thereafter. This makes it easy to implement and,\nif needed, override the constructor logic of the Component at any step in the hierarchy.</p>\n\n<p>The initComponent method <strong>must</strong> contain a call to <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a> in order\nto ensure that the parent class' initComponent method is also called.</p>\n\n<p>All config options passed to the constructor are applied to <code>this</code> before initComponent is called,\nso you can simply access them with <code>this.someOption</code>.</p>\n\n<p>The following example demonstrates using a dynamic string for the text of a button at the time of\ninstantiation of the class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('DynamicButtonText', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n\n    initComponent: function() {\n        this.text = new Date();\n        this.renderTo = <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>();\n        this.callParent();\n    }\n});\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function() {\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('DynamicButtonText');\n});\n</code></pre>\n"},"initDraggable":{"!type":"fn() -> !this"}}},"Shape":{"arrow":{"!type":"fn(surface: ?, opts: ?) -> !this"},"circle":{"!type":"fn(surface: ?, opts: ?) -> !this","!doc":"<p>End Definitions</p>\n"},"cross":{"!type":"fn(surface: ?, opts: ?) -> !this"},"diamond":{"!type":"fn(surface: ?, opts: ?) -> !this"},"drop":{"!type":"fn(surface: ?, x: ?, y: ?, text: ?, size: ?, angle: ?) -> !this"},"line":{"!type":"fn(surface: ?, opts: ?) -> !this"},"plus":{"!type":"fn(surface: ?, opts: ?) -> !this"},"square":{"!type":"fn(surface: ?, opts: ?) -> !this"},"triangle":{"!type":"fn(surface: ?, opts: ?) -> !this"}},"Tip":{"!doc":"<p>Provides tips for <a href=\"#!/api/Ext.chart.series.Series\" rel=\"Ext.chart.series.Series\" class=\"docClass\">Ext.chart.series.Series</a>.</p>\n","!type":"fn(config: Ext_chart_Tip_cfg)","prototype":{"!proto":"Ext.Base.prototype","hideTip":{"!type":"fn(item: ?) -> !this"},"showTip":{"!type":"fn(item: ?) -> !this"}}},"TipSurface":{"!type":"fn(config: Ext_chart_TipSurface_cfg)","prototype":{"!proto":"Ext.draw.Component.prototype","renderFirst":{"!type":"bool"},"spriteArray":{"!type":"bool","!doc":"<p>End Definitions</p>\n"},"onRender":{"!type":"fn() -> !this","!doc":"<p>Create the Surface on initial render</p>\n"}}},"axis":{"Abstract":{"!doc":"<p>Base class for all axis classes.</p>\n","!type":"fn(config?: Ext_chart_axis_Abstract_cfg)","prototype":{"!proto":"Ext.Base.prototype","fields":{"!type":"[string]","!doc":"<p>The fields of model to bind to this axis.</p>\n\n<p>For example if you have a data set of lap times per car, each having the fields:\n<code>'carName'</code>, <code>'avgSpeed'</code>, <code>'maxSpeed'</code>. Then you might want to show the data on chart\nwith <code>['carName']</code> on Name axis and <code>['avgSpeed', 'maxSpeed']</code> on Speed axis.</p>\n"},"label":{"!type":"+Ext.chart.Label","!doc":"<p>The config for chart label.</p>\n"},"alignment":{"!type":"?"},"grid":{"!type":"bool"},"maxValue":{"!type":"number"},"minValue":{"!type":"number"},"steps":{"!type":"number"},"x":{"!type":"number"},"y":{"!type":"number"},"addDisplayAndLabels":{"!type":"fn() -> !this"},"drawAxis":{"!type":"fn() -> !this"},"getId":{"!type":"fn() -> !this"},"processView":{"!type":"fn() -> !this","!doc":"<p>Called to process a view i.e to make aggregation and filtering over\na store creating a substore to be used to render the axis. Since many axes\nmay do different things on the data and we want the final result of all these\noperations to be rendered we need to call processView on all axes before drawing\nthem.</p>\n"}}},"Axis":{"!doc":"<p>Defines axis for charts. The axis position, type, style can be configured.\nThe axes are defined in an axes array of configuration objects where the type,\nfield, grid and other configuration options can be set. To know more about how\nto create a Chart please check the Chart class documentation. Here's an example for the axes part:\nAn example of axis for a series (in this case for an area chart that has multiple layers of yFields) could be:</p>\n\n<pre><code>axes: [{\n    type: 'Numeric',\n    position: 'left',\n    fields: ['data1', 'data2', 'data3'],\n    title: 'Number of Hits',\n    grid: {\n        odd: {\n            opacity: 1,\n            fill: '#ddd',\n            stroke: '#bbb',\n            'stroke-width': 1\n        }\n    },\n    minimum: 0\n}, {\n    type: 'Category',\n    position: 'bottom',\n    fields: ['name'],\n    title: 'Month of the Year',\n    grid: true,\n    label: {\n        rotate: {\n            degrees: 315\n        }\n    }\n}]\n</code></pre>\n\n<p>In this case we use a <code>Numeric</code> axis for displaying the values of the Area series and a <code>Category</code> axis for displaying the names of\nthe store elements. The numeric axis is placed on the left of the screen, while the category axis is placed at the bottom of the chart.\nBoth the category and numeric axes have <code>grid</code> set, which means that horizontal and vertical lines will cover the chart background. In the\ncategory axis the labels will be rotated so they can fit the space better.</p>\n","!type":"fn(config?: Ext_chart_axis_Axis_cfg)","prototype":{"!proto":"Ext.chart.axis.Abstract.prototype","adjustEnd":{"!type":"bool","!doc":"<p>Whether to adjust the label at the end of the axis.</p>\n"},"dashSize":{"!type":"number","!doc":"<p>The size of the dash marker. Default's 3.</p>\n"},"grid":{"!type":"bool|?","!doc":"<p>The grid configuration enables you to set a background grid for an axis.\nIf set to <em>true</em> on a vertical axis, vertical lines will be drawn.\nIf set to <em>true</em> on a horizontal axis, horizontal lines will be drawn.\nIf both are set, a proper grid with horizontal and vertical lines will be drawn.</p>\n\n<p>You can set specific options for the grid configuration for odd and/or even lines/rows.\nSince the rows being drawn are rectangle sprites, you can set to an odd or even property\nall styles that apply to <a href=\"#!/api/Ext.draw.Sprite\" rel=\"Ext.draw.Sprite\" class=\"docClass\">Ext.draw.Sprite</a>. For more information on all the style\nproperties you can set please take a look at <a href=\"#!/api/Ext.draw.Sprite\" rel=\"Ext.draw.Sprite\" class=\"docClass\">Ext.draw.Sprite</a>. Some useful style\nproperties are <code>opacity</code>, <code>fill</code>, <code>stroke</code>, <code>stroke-width</code>, etc.</p>\n\n<p>The possible values for a grid option are then <em>true</em>, <em>false</em>, or an object with <code>{ odd, even }</code> properties\nwhere each property contains a sprite style descriptor object that is defined in <a href=\"#!/api/Ext.draw.Sprite\" rel=\"Ext.draw.Sprite\" class=\"docClass\">Ext.draw.Sprite</a>.</p>\n\n<p>For example:</p>\n\n<pre><code>axes: [{\n    type: 'Numeric',\n    position: 'left',\n    fields: ['data1', 'data2', 'data3'],\n    title: 'Number of Hits',\n    grid: {\n        odd: {\n            opacity: 1,\n            fill: '#ddd',\n            stroke: '#bbb',\n            'stroke-width': 1\n        }\n    }\n}, {\n    type: 'Category',\n    position: 'bottom',\n    fields: ['name'],\n    title: 'Month of the Year',\n    grid: true\n}]\n</code></pre>\n"},"hidden":{"!type":"bool","!doc":"<p><code>true</code> to hide the axis.</p>\n"},"length":{"!type":"number","!doc":"<p>Offset axis position. Default's 0.</p>\n"},"majorTickSteps":{"!type":"bool"},"minorTickSteps":{"!type":"number","!doc":"<p>The number of small ticks between two major ticks. Default is zero.</p>\n"},"position":{"!type":"string","!doc":"<p>Where to set the axis. Available options are <code>left</code>, <code>bottom</code>, <code>right</code>, <code>top</code>. Default's <code>bottom</code>.</p>\n"},"title":{"!type":"string","!doc":"<p>The title for the Axis</p>\n"},"width":{"!type":"number","!doc":"<p>Offset axis width. Default's 0.</p>\n"},"forceMinMax":{"!type":"bool","!doc":"<p>force min/max values from store</p>\n"},"nullGutters":{"!type":"?"},"skipFirst":{"!type":"bool"},"applyData":{"!type":"fn() -> !this"},"calcEnds":{"!type":"fn() -> !this","!doc":"<p>creates a structure with start, end and step points.</p>\n"},"drawAxis":{"!type":"fn(init: ?) -> !this","!doc":"<p>Renders the axis into the screen and updates its position.</p>\n"},"drawGrid":{"!type":"fn() -> !this","!doc":"<p>Renders an horizontal and/or vertical grid into the Surface.</p>\n"},"drawHorizontalLabels":{"!type":"fn() -> !this"},"drawLabel":{"!type":"fn() -> !this","!doc":"<p>Renders the labels in the axes.</p>\n"},"drawTitle":{"!type":"fn(maxWidth: ?, maxHeight: ?) -> !this","!doc":"<p>draws the title for the axis.</p>\n"},"drawVerticalLabels":{"!type":"fn() -> !this"},"getOrCreateLabel":{"!type":"fn(i: ?, text: ?) -> !this"},"getRange":{"!type":"fn() -> !this"},"intersect":{"!type":"fn(l1: ?, l2: ?) -> !this"},"rect2pointArray":{"!type":"fn(sprite: ?) -> !this"},"setTitle":{"!type":"fn(title: string) -> !this","!doc":"<p>Updates the <a href=\"#!/api/Ext.chart.axis.Axis-cfg-title\" rel=\"Ext.chart.axis.Axis-cfg-title\" class=\"docClass\">title</a> of this axis.</p>\n"}}},"Category":{"!doc":"<p>A type of axis that displays items in categories. This axis is generally used to\ndisplay categorical information like names of items, month names, quarters, etc.\nbut no quantitative values. For that other type of information <code>Number</code>\naxis are more suitable.</p>\n\n<p>As with other axis you can set the position of the axis and its title. For example:</p>\n\n<pre class='inline-example '><code>var store = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.JsonStore\" rel=\"Ext.data.JsonStore\" class=\"docClass\">Ext.data.JsonStore</a>', {\n    fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],\n    data: [\n        {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},\n        {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},\n        {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},\n        {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},\n        {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}\n    ]\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.chart.Chart\" rel=\"Ext.chart.Chart\" class=\"docClass\">Ext.chart.Chart</a>', {\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    width: 500,\n    height: 300,\n    store: store,\n    axes: [{\n        type: 'Numeric',\n        position: 'left',\n        fields: ['data1', 'data2', 'data3', 'data4', 'data5'],\n        title: 'Sample Values',\n        grid: {\n            odd: {\n                opacity: 1,\n                fill: '#ddd',\n                stroke: '#bbb',\n                'stroke-width': 1\n            }\n        },\n        minimum: 0,\n        adjustMinimumByMajorUnit: 0\n    }, {\n        type: 'Category',\n        position: 'bottom',\n        fields: ['name'],\n        title: 'Sample Metrics',\n        grid: true,\n        label: {\n            rotate: {\n                degrees: 315\n            }\n        }\n    }],\n    series: [{\n        type: 'area',\n        highlight: false,\n        axis: 'left',\n        xField: 'name',\n        yField: ['data1', 'data2', 'data3', 'data4', 'data5'],\n        style: {\n            opacity: 0.93\n        }\n    }]\n});\n</code></pre>\n\n<p>In this example with set the category axis to the bottom of the surface, bound the axis to\nthe <code>name</code> property and set as title <em>Month of the Year</em>.</p>\n","!type":"fn(config?: Ext_chart_axis_Category_cfg)","prototype":{"!proto":"Ext.chart.axis.Axis.prototype","calculateCategoryCount":{"!type":"bool","!doc":"<p>Indicates whether or not to calculate the number of categories (ticks and\nlabels) when there is not enough room to display all labels on the axis.\nIf set to true, the axis will determine the number of categories to plot.\nIf not, all categories will be plotted.</p>\n"},"categoryNames":{"!type":"string","!doc":"<p>A list of category names to display along this axis.</p>\n"},"applyData":{"!type":"fn() -> !this","!doc":"<p>calculates labels positions and marker positions for rendering.</p>\n"},"doConstrain":{"!type":"fn() -> !this","!doc":"<p>constrains to datapoints between minimum and maximum only</p>\n"},"setLabels":{"!type":"fn() -> !this","!doc":"<p>creates an array of labels to be used when rendering.</p>\n"}}},"Gauge":{"!doc":"<p>Gauge Axis is the axis to be used with a Gauge series. The Gauge axis\ndisplays numeric data from an interval defined by the <code>minimum</code>, <code>maximum</code> and\n<code>step</code> configuration properties. The placement of the numeric data can be changed\nby altering the <code>margin</code> option that is set to <code>10</code> by default.</p>\n\n<p>A possible configuration for this axis would look like:</p>\n\n<pre><code>axes: [{\n    type: 'gauge',\n    position: 'gauge',\n    minimum: 0,\n    maximum: 100,\n    steps: 10,\n    margin: 7\n}],\n</code></pre>\n","!type":"fn(config?: Ext_chart_axis_Gauge_cfg)","prototype":{"!proto":"Ext.chart.axis.Abstract.prototype","margin":{"!type":"number","!doc":"<p>The offset positioning of the tick marks and labels in pixels.</p>\n"},"maximum":{"!type":"number","!doc":"<p>The maximum value of the interval to be displayed in the axis.</p>\n"},"minimum":{"!type":"number","!doc":"<p>The minimum value of the interval to be displayed in the axis.</p>\n"},"steps":{"!type":"number","!doc":"<p>The number of steps and tick marks to add to the interval.</p>\n"},"title":{"!type":"string","!doc":"<p>The title for the Axis.</p>\n"},"drawAxis":{"!type":"fn(init: ?) -> !this"},"drawLabel":{"!type":"fn() -> !this"},"drawTitle":{"!type":"fn() -> !this"},"setTitle":{"!type":"fn(title: string) -> !this","!doc":"<p>Updates the <a href=\"#!/api/Ext.chart.axis.Gauge-cfg-title\" rel=\"Ext.chart.axis.Gauge-cfg-title\" class=\"docClass\">title</a> of this axis.</p>\n"}}},"Numeric":{"!doc":"<p>An axis to handle numeric values. This axis is used for quantitative data as\nopposed to the category axis. You can set mininum and maximum values to the\naxis so that the values are bound to that. If no values are set, then the\nscale will auto-adjust to the values.</p>\n\n<pre class='inline-example '><code>var store = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.JsonStore\" rel=\"Ext.data.JsonStore\" class=\"docClass\">Ext.data.JsonStore</a>', {\n     fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],\n     data: [\n         {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},\n         {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},\n         {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},\n         {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},\n         {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}\n     ]\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.chart.Chart\" rel=\"Ext.chart.Chart\" class=\"docClass\">Ext.chart.Chart</a>', {\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    width: 500,\n    height: 300,\n    store: store,\n    axes: [{\n        type: 'Numeric',\n        position: 'left',\n        fields: ['data1', 'data2', 'data3', 'data4', 'data5'],\n        title: 'Sample Values',\n        grid: {\n            odd: {\n                opacity: 1,\n                fill: '#ddd',\n                stroke: '#bbb',\n                'stroke-width': 1\n            }\n        },\n        minimum: 0,\n        adjustMinimumByMajorUnit: 0\n    }, {\n        type: 'Category',\n        position: 'bottom',\n        fields: ['name'],\n        title: 'Sample Metrics',\n        grid: true,\n        label: {\n            rotate: {\n                degrees: 315\n            }\n        }\n    }],\n    series: [{\n        type: 'area',\n        highlight: false,\n        axis: 'left',\n        xField: 'name',\n        yField: ['data1', 'data2', 'data3', 'data4', 'data5'],\n        style: {\n            opacity: 0.93\n        }\n    }]\n});\n</code></pre>\n\n<p>In this example we create an axis of Numeric type. We set a minimum value so that\neven if all series have values greater than zero, the grid starts at zero. We bind\nthe axis onto the left part of the surface by setting <code>position</code> to <code>left</code>.\nWe bind three different store fields to this axis by setting <code>fields</code> to an array.\nWe set the title of the axis to <em>Number of Hits</em> by using the <code>title</code> property.\nWe use a <code>grid</code> configuration to set odd background rows to a certain style and even rows\nto be transparent/ignored.</p>\n","!type":"fn(config: Ext_chart_axis_Numeric_cfg)","prototype":{"!proto":"Ext.chart.axis.Axis.prototype","adjustMaximumByMajorUnit":{"!type":"bool","!doc":"<p>Indicates whether to extend maximum beyond data's maximum to the nearest\nmajorUnit.</p>\n"},"adjustMinimumByMajorUnit":{"!type":"bool","!doc":"<p>Indicates whether to extend the minimum beyond data's minimum to the\nnearest majorUnit.</p>\n"},"constrain":{"!type":"bool","!doc":"<p>If true, the values of the chart will be rendered only if they belong between minimum and maximum.\nIf false, all values of the chart will be rendered, regardless of whether they belong between minimum and maximum or not.\nDefault's true if maximum and minimum is specified. It is ignored for stacked charts.</p>\n"},"decimals":{"!type":"number","!doc":"<p>The number of decimals to round the value to.</p>\n"},"maximum":{"!type":"number","!doc":"<p>The maximum value drawn by the axis. If not set explicitly, the axis\nmaximum will be calculated automatically. It is ignored for stacked charts.</p>\n"},"minimum":{"!type":"number","!doc":"<p>The minimum value drawn by the axis. If not set explicitly, the axis\nminimum will be calculated automatically. It is ignored for stacked charts.</p>\n"},"position":{"!type":"string","!doc":"<p>Indicates the position of the axis relative to the chart</p>\n"},"scale":{"!type":"string","!doc":"<p>The scaling algorithm to use on this axis. May be \"linear\" or\n\"logarithmic\".  Currently only linear scale is implemented.</p>\n"},"isNumericAxis":{"!type":"bool"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"applyData":{"!type":"fn() -> !this","!doc":"<p>apply data.</p>\n"},"doConstrain":{"!type":"fn() -> !this","!doc":"<p>constrains to datapoints between minimum and maximum only</p>\n"},"processView":{"!type":"fn() -> !this","!doc":"<p>applying constraint</p>\n"},"roundToDecimal":{"!type":"fn(v: ?, dec: ?) -> !this"}}},"Radial":{"!type":"fn(config: Ext_chart_axis_Radial_cfg)","prototype":{"!proto":"Ext.chart.axis.Numeric.prototype","maximum":{"!type":"number","!doc":"<p>The maximum value drawn by the axis. If not set explicitly, the axis\nmaximum will be calculated automatically.</p>\n"},"position":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"steps":{"!type":"number","!doc":"<p>The number of circles to draw outward from the center.</p>\n"},"drawLabel":{"!type":"fn() -> !this","!doc":"<p>Renders the labels in the axes.</p>\n"},"getRange":{"!type":"fn() -> !this"},"processView":{"!type":"fn() -> !this","!doc":"<p>applying constraint</p>\n"}}},"Time":{"!doc":"<p>A type of axis whose units are measured in time values. Use this axis\nfor listing dates that you will want to group or dynamically change.\nIf you just want to display dates as categories then use the\nCategory class for axis instead.</p>\n\n<p>For example:</p>\n\n<pre><code>axes: [{\n    type: 'Time',\n    position: 'bottom',\n    fields: 'date',\n    title: 'Day',\n    dateFormat: 'M d',\n\n    constrain: true,\n    fromDate: new Date('1/1/11'),\n    toDate: new Date('1/7/11')\n}]\n</code></pre>\n\n<p>In this example we're creating a time axis that has as title <em>Day</em>.\nThe field the axis is bound to is <code>date</code>.\nThe date format to use to display the text for the axis labels is <code>M d</code>\nwhich is a three letter month abbreviation followed by the day number.\nThe time axis will show values for dates between <code>fromDate</code> and <code>toDate</code>.\nSince <code>constrain</code> is set to true all other values for other dates not between\nthe fromDate and toDate will not be displayed.</p>\n","!type":"fn(config: Ext_chart_axis_Time_cfg)","prototype":{"!proto":"Ext.chart.axis.Numeric.prototype","constrain":{"!type":"bool","!doc":"<p>If true, the values of the chart will be rendered only if they belong between the fromDate and toDate.\nIf false, the time axis will adapt to the new values by adding/removing steps.</p>\n"},"dateFormat":{"!type":"string|bool","!doc":"<p>Indicates the format the date will be rendered on.\nFor example: 'M d' will render the dates as 'Jan 30', etc.\nFor a list of possible format strings see <a href=\"#!/api/Ext.Date\" rel=\"Ext.Date\" class=\"docClass\">Date</a></p>\n"},"fromDate":{"!type":"+Date","!doc":"<p>The starting date for the time axis.</p>\n"},"step":{"!type":"[?]","!doc":"<p>An array with two components: The first is the unit of the step (day, month, year, etc). The second one is a number.\nIf the number is an integer, it represents the number of units for the step ([<a href=\"#!/api/Ext.Date-property-DAY\" rel=\"Ext.Date-property-DAY\" class=\"docClass\">Ext.Date.DAY</a>, 2] means \"Every other day\").\nIf the number is a fraction, it represents the number of steps per unit ([<a href=\"#!/api/Ext.Date-property-DAY\" rel=\"Ext.Date-property-DAY\" class=\"docClass\">Ext.Date.DAY</a>, 1/2] means \"Twice a day\").\nIf the unit is the month, the steps may be adjusted depending on the month. For instance [<a href=\"#!/api/Ext.Date-property-MONTH\" rel=\"Ext.Date-property-MONTH\" class=\"docClass\">Ext.Date.MONTH</a>, 1/3], which means \"Three times a month\",\ngenerates steps on the 1st, the 10th and the 20th of every month regardless of whether a month has 28 days or 31 days. The steps are generated\nas follows:\n- [<a href=\"#!/api/Ext.Date-property-MONTH\" rel=\"Ext.Date-property-MONTH\" class=\"docClass\">Ext.Date.MONTH</a>, n]: on the current date every 'n' months, maxed to the number of days in the month.\n- [<a href=\"#!/api/Ext.Date-property-MONTH\" rel=\"Ext.Date-property-MONTH\" class=\"docClass\">Ext.Date.MONTH</a>, 1/2]: on the 1st and 15th of every month.\n- [<a href=\"#!/api/Ext.Date-property-MONTH\" rel=\"Ext.Date-property-MONTH\" class=\"docClass\">Ext.Date.MONTH</a>, 1/3]: on the 1st, 10th and 20th of every month.\n- [<a href=\"#!/api/Ext.Date-property-MONTH\" rel=\"Ext.Date-property-MONTH\" class=\"docClass\">Ext.Date.MONTH</a>, 1/4]: on the 1st, 8th, 15th and 22nd of every month.</p>\n\n<p>Defaults to: [<a href=\"#!/api/Ext.Date-property-DAY\" rel=\"Ext.Date-property-DAY\" class=\"docClass\">Ext.Date.DAY</a>, 1].</p>\n"},"toDate":{"!type":"+Date","!doc":"<p>The ending date for the time axis.</p>\n"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"calcEnds":{"!type":"fn() -> !this","!doc":"<p>modifies the store and creates the labels for the axes.</p>\n"},"processView":{"!type":"fn() -> !this","!doc":"<p>Before rendering, set current default step count to be number of records.</p>\n"}}}},"series":{"Area":{"!doc":"<p>Creates a Stacked Area Chart. The stacked area chart is useful when displaying multiple aggregated layers of information.\nAs with all other series, the Area Series must be appended in the <em>series</em> Chart array configuration. See the Chart\ndocumentation for more information. A typical configuration object for the area series could be:</p>\n\n<pre class='inline-example '><code>var store = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.JsonStore\" rel=\"Ext.data.JsonStore\" class=\"docClass\">Ext.data.JsonStore</a>', {\n    fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],\n    data: [\n        { 'name': 'metric one',   'data1':10, 'data2':12, 'data3':14, 'data4':8,  'data5':13 },\n        { 'name': 'metric two',   'data1':7,  'data2':8,  'data3':16, 'data4':10, 'data5':3  },\n        { 'name': 'metric three', 'data1':5,  'data2':2,  'data3':14, 'data4':12, 'data5':7  },\n        { 'name': 'metric four',  'data1':2,  'data2':14, 'data3':6,  'data4':1,  'data5':23 },\n        { 'name': 'metric five',  'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33 }\n    ]\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.chart.Chart\" rel=\"Ext.chart.Chart\" class=\"docClass\">Ext.chart.Chart</a>', {\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    width: 500,\n    height: 300,\n    store: store,\n    axes: [\n        {\n            type: 'Numeric',\n            position: 'left',\n            fields: ['data1', 'data2', 'data3', 'data4', 'data5'],\n            title: 'Sample Values',\n            grid: {\n                odd: {\n                    opacity: 1,\n                    fill: '#ddd',\n                    stroke: '#bbb',\n                    'stroke-width': 1\n                }\n            },\n            minimum: 0,\n            adjustMinimumByMajorUnit: 0\n        },\n        {\n            type: 'Category',\n            position: 'bottom',\n            fields: ['name'],\n            title: 'Sample Metrics',\n            grid: true,\n            label: {\n                rotate: {\n                    degrees: 315\n                }\n            }\n        }\n    ],\n    series: [{\n        type: 'area',\n        highlight: false,\n        axis: 'left',\n        xField: 'name',\n        yField: ['data1', 'data2', 'data3', 'data4', 'data5'],\n        style: {\n            opacity: 0.93\n        }\n    }]\n});\n</code></pre>\n\n<p>In this configuration we set <code>area</code> as the type for the series, set highlighting options to true for highlighting elements on hover,\ntake the left axis to measure the data in the area series, set as xField (x values) the name field of each element in the store,\nand as yFields (aggregated layers) seven data fields from the same store. Then we override some theming styles by adding some opacity\nto the style object.</p>\n","!type":"fn(config: Ext_chart_series_Area_cfg)","prototype":{"!proto":"Ext.chart.series.Cartesian.prototype","style":{"!type":"?","!doc":"<p>Append styling properties to this object for it to override theme properties.</p>\n"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"stacked":{"!type":"bool","!doc":"<p>Area charts are alyways stacked</p>\n"},"drawSeries":{"!type":"fn() -> !this","!doc":"<p>Draws the series for the current chart.</p>\n"},"getBounds":{"!type":"fn() -> !this","!doc":"<p>Get chart and data boundaries</p>\n"},"getLegendColor":{"!type":"fn(item: ?) -> !this","!doc":"<p>Returns the color of the series (to be displayed as color for the series legend item).</p>\n"},"getPaths":{"!type":"fn() -> !this","!doc":"<p>Build an array of paths for the chart</p>\n"},"hide":{"!type":"fn() -> !this"},"hideAll":{"!type":"fn(index: ?) -> !this","!doc":"<p>Hides all the elements in the series.</p>\n"},"highlightItem":{"!type":"fn(item: ?) -> !this","!doc":"<p>Highlight the specified item. If no item is provided the whole series will be highlighted.</p>\n"},"highlightSeries":{"!type":"fn(item: ?) -> !this","!doc":"<p>Highlight this entire series.</p>\n"},"isItemInPoint":{"!type":"fn(x: ?, y: ?, item: ?, i: ?) -> !this"},"onAnimate":{"!type":"fn(sprite: ?, attr: ?) -> !this","!doc":"<p>set the animation for the sprite</p>\n"},"onCreateLabel":{"!type":"fn(storeItem: ?, item: ?, i: ?, display: ?) -> +Ext.draw.Sprite","!doc":"<p>Called each time a new label is created.</p>\n\n<p><strong>Note:</strong> This method must be implemented in Series that mixes\nin this Label mixin.</p>\n"},"onPlaceCallout":{"!type":"fn(callout: ?, storeItem: ?, item: ?, i: ?, display: ?, animate: ?, index: ?) -> !this"},"onPlaceLabel":{"!type":"fn(label: ?, storeItem: ?, item: ?, i: ?, display: ?, animate: ?, index: ?) -> !this","!doc":"<p>Called for updating the position of the label.</p>\n\n<p><strong>Note:</strong> This method must be implemented in Series that mixes\nin this Label mixin.</p>\n"},"redraw":{"!type":"fn() -> !this"},"showAll":{"!type":"fn(index: ?) -> !this","!doc":"<p>Shows all the elements in the series.</p>\n"},"shrink":{"!type":"fn(xValues: ?, yValues: ?, size: ?) -> !this","!doc":"<p>Shrinks dataSets down to a smaller size</p>\n"},"unHighlightItem":{"!type":"fn(item: ?) -> !this","!doc":"<p>Un-highlights the specified item. If no item is provided it will un-highlight the entire series.</p>\n"},"unHighlightSeries":{"!type":"fn(item: ?) -> !this","!doc":"<p>UnHighlight this entire series.</p>\n"}}},"Bar":{"!doc":"<p>Creates a Bar Chart. A Bar Chart is a useful visualization technique to display quantitative information for\ndifferent categories that can show some progression (or regression) in the dataset. As with all other series, the Bar\nSeries must be appended in the <em>series</em> Chart array configuration. See the Chart documentation for more information.\nA typical configuration object for the bar series could be:</p>\n\n<pre class='inline-example '><code>var store = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.JsonStore\" rel=\"Ext.data.JsonStore\" class=\"docClass\">Ext.data.JsonStore</a>', {\n    fields: ['name', 'data'],\n    data: [\n        { 'name': 'metric one',   'data':10 },\n        { 'name': 'metric two',   'data': 7 },\n        { 'name': 'metric three', 'data': 5 },\n        { 'name': 'metric four',  'data': 2 },\n        { 'name': 'metric five',  'data':27 }\n    ]\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.chart.Chart\" rel=\"Ext.chart.Chart\" class=\"docClass\">Ext.chart.Chart</a>', {\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    width: 500,\n    height: 300,\n    animate: true,\n    store: store,\n    axes: [{\n        type: 'Numeric',\n        position: 'bottom',\n        fields: ['data'],\n        label: {\n            renderer: <a href=\"#!/api/Ext.util.Format-method-numberRenderer\" rel=\"Ext.util.Format-method-numberRenderer\" class=\"docClass\">Ext.util.Format.numberRenderer</a>('0,0')\n        },\n        title: 'Sample Values',\n        grid: true,\n        minimum: 0\n    }, {\n        type: 'Category',\n        position: 'left',\n        fields: ['name'],\n        title: 'Sample Metrics'\n    }],\n    series: [{\n        type: 'bar',\n        axis: 'bottom',\n        highlight: true,\n        tips: {\n          trackMouse: true,\n          width: 140,\n          height: 28,\n          renderer: function(storeItem, item) {\n            this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');\n          }\n        },\n        label: {\n          display: 'insideEnd',\n            field: 'data',\n            renderer: <a href=\"#!/api/Ext.util.Format-method-numberRenderer\" rel=\"Ext.util.Format-method-numberRenderer\" class=\"docClass\">Ext.util.Format.numberRenderer</a>('0'),\n            orientation: 'horizontal',\n            color: '#333',\n            'text-anchor': 'middle'\n        },\n        xField: 'name',\n        yField: 'data'\n    }]\n});\n</code></pre>\n\n<p>In this configuration we set <code>bar</code> as the series type, bind the values of the bar to the bottom axis and set the\nxField or category field to the <code>name</code> parameter of the store. We also set <code>highlight</code> to true which enables smooth\nanimations when bars are hovered. We also set some configuration for the bar labels to be displayed inside the bar,\nto display the information found in the <code>data1</code> property of each element store, to render a formated text with the\n<code><a href=\"#!/api/Ext.util.Format\" rel=\"Ext.util.Format\" class=\"docClass\">Ext.util.Format</a></code> we pass in, to have an <code>horizontal</code> orientation (as opposed to a vertical one) and we also set\nother styles like <code>color</code>, <code>text-anchor</code>, etc.</p>\n","!type":"fn(config: Ext_chart_series_Bar_cfg)","prototype":{"!proto":"Ext.chart.series.Cartesian.prototype","column":{"!type":"bool","!doc":"<p>Whether to set the visualization as column chart or horizontal bar chart.</p>\n"},"groupGutter":{"!type":"number","!doc":"<p>The gutter space between groups of bars, as a percentage of the bar width</p>\n"},"gutter":{"!type":"number","!doc":"<p>The gutter space between single bars, as a percentage of the bar width</p>\n"},"stacked":{"!type":"bool","!doc":"<p>If set to <code>true</code> then bars for multiple <code>yField</code> values will be rendered stacked on top of one another.\nOtherwise, they will be rendered side-by-side. Defaults to <code>false</code>.</p>\n"},"style":{"!type":"?","!doc":"<p>Style properties that will override the theming series styles.</p>\n"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"xPadding":{"!type":"number|?","!doc":"<p>Padding between the left/right axes and the bars.\nThe possible values are a number (the number of pixels for both left and right padding)\nor an object with <code>{ left, right }</code> properties.</p>\n"},"yPadding":{"!type":"number|?","!doc":"<p>Padding between the top/bottom axes and the bars.\nThe possible values are a number (the number of pixels for both top and bottom padding)\nor an object with <code>{ top, bottom }</code> properties.</p>\n"},"cleanHighlights":{"!type":"fn() -> !this"},"drawSeries":{"!type":"fn() -> !this","!doc":"<p>Draws the series for the current chart.</p>\n"},"getBarGirth":{"!type":"fn() -> !this","!doc":"<p>returns the bar girth.</p>\n"},"getBounds":{"!type":"fn() -> !this","!doc":"<p>Get chart and data boundaries</p>\n"},"getGutters":{"!type":"fn() -> !this","!doc":"<p>returns the gutters.</p>\n"},"getLabelSize":{"!type":"fn(value: ?) -> !this","!doc":"<p>Gets the dimensions of a given bar label. Uses a single hidden sprite to avoid\nchanging visible sprites.</p>\n"},"getLegendColor":{"!type":"fn(index: ?) -> !this","!doc":"<p>Returns a string with the color to be used for the series legend item.</p>\n"},"getPadding":{"!type":"fn() -> !this","!doc":"<p>returns the padding.</p>\n"},"getPaths":{"!type":"fn() -> !this","!doc":"<p>Build an array of paths for the chart</p>\n"},"hideAll":{"!type":"fn(index: ?) -> !this","!doc":"<p>hide all markers</p>\n"},"highlightItem":{"!type":"fn(item: ?) -> !this","!doc":"<p>Highlight the given series item.</p>\n"},"isItemInPoint":{"!type":"fn(x: ?, y: ?, item: ?) -> !this"},"onAnimate":{"!type":"fn(sprite: ?, attr: ?) -> !this","!doc":"<p>used to animate label, markers and other sprites.</p>\n"},"onCreateLabel":{"!type":"fn(storeItem: ?, item: ?, i: ?, display: ?) -> +Ext.draw.Sprite","!doc":"<p>called when a label is to be created.</p>\n"},"onPlaceLabel":{"!type":"fn(label: ?, storeItem: ?, item: ?, i: ?, display: ?, animate: ?, index: ?) -> !this","!doc":"<p>called when a label is to be positioned.</p>\n"},"renderShadows":{"!type":"fn(i: ?, barAttr: ?, baseAttrs: ?, bounds: ?) -> !this","!doc":"<p>render/setAttributes on the shadows</p>\n"},"showAll":{"!type":"fn(index: ?) -> !this","!doc":"<p>show all markers</p>\n"},"unHighlightItem":{"!type":"fn() -> !this","!doc":"<p>Un-highlight any existing highlights</p>\n"}}},"Cartesian":{"!doc":"<p>Common base class for series implementations which plot values using x/y coordinates.</p>\n","!type":"fn(config: Ext_chart_series_Cartesian_cfg)","prototype":{"!proto":"Ext.chart.series.Series.prototype","axis":{"!type":"string|[string]","!doc":"<p>The position of the axis to bind the values to. Possible values are 'left', 'bottom', 'top' and 'right'.\nYou must explicitly set this value to bind the values of the line series to the ones in the axis, otherwise a\nrelative scale will be used. For example, if you're using a Scatter or Line series and you'd like to have the\nvalues in the chart relative to the bottom and left axes then <code>axis</code> should be <code>['left', 'bottom']</code>.</p>\n"},"xField":{"!type":"string","!doc":"<p>The name of the data Model field corresponding to the x-axis value.</p>\n"},"yField":{"!type":"string|[string]","!doc":"<p>The name(s) of the data Model field(s) corresponding to the y-axis value(s).</p>\n"},"clearCombinations":{"!type":"fn() -> !this"},"combine":{"!type":"fn(index1: ?, index2: ?) -> !this"},"eachYValue":{"!type":"fn(record: +Ext.data.Model, fn: fn(), scope: ?) -> !this","!doc":"<p>Iterates over a given record's values for each of this series's yFields,\nexecuting a given function for each value. Any yFields that have been combined\nvia legend drag-drop will be treated as a single value.</p>\n"},"getAxesForXAndYFields":{"!type":"fn() -> !this"},"getLegendLabels":{"!type":"fn() -> !this"},"getMinMaxXValues":{"!type":"fn() -> [?]","!doc":"<p>Calculate the min and max values for this series's xField.</p>\n"},"getMinMaxYValues":{"!type":"fn() -> [?]","!doc":"<p>Calculate the min and max values for this series's yField(s). Takes into account yField\ncombinations, exclusions, and stacking.</p>\n"},"getYValueAccessors":{"!type":"fn() -> [?]","!doc":"<p>Returns an array of functions, each of which returns the value of the yField\ncorresponding to function's index in the array, for a given record (each function takes the\nrecord as its only argument.) If yFields have been combined by the user via legend drag-drop,\nthis list of accessors will be kept in sync with those combinations.</p>\n"},"getYValueCount":{"!type":"fn() -> number","!doc":"<p>Returns the number of yField values, taking into account fields combined\nvia legend drag-drop.</p>\n"}}},"Column":{"!doc":"<p>Creates a Column Chart. Much of the methods are inherited from Bar. A Column Chart is a useful\nvisualization technique to display quantitative information for different categories that can\nshow some progression (or regression) in the data set. As with all other series, the Column Series\nmust be appended in the <em>series</em> Chart array configuration. See the Chart documentation for more\ninformation. A typical configuration object for the column series could be:</p>\n\n<pre class='inline-example '><code>var store = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.JsonStore\" rel=\"Ext.data.JsonStore\" class=\"docClass\">Ext.data.JsonStore</a>', {\n    fields: ['name', 'data'],\n    data: [\n        { 'name': 'metric one',   'data':10 },\n        { 'name': 'metric two',   'data': 7 },\n        { 'name': 'metric three', 'data': 5 },\n        { 'name': 'metric four',  'data': 2 },\n        { 'name': 'metric five',  'data':27 }\n    ]\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.chart.Chart\" rel=\"Ext.chart.Chart\" class=\"docClass\">Ext.chart.Chart</a>', {\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    width: 500,\n    height: 300,\n    animate: true,\n    store: store,\n    axes: [\n        {\n            type: 'Numeric',\n            position: 'left',\n            fields: ['data'],\n            label: {\n                renderer: <a href=\"#!/api/Ext.util.Format-method-numberRenderer\" rel=\"Ext.util.Format-method-numberRenderer\" class=\"docClass\">Ext.util.Format.numberRenderer</a>('0,0')\n            },\n            title: 'Sample Values',\n            grid: true,\n            minimum: 0\n        },\n        {\n            type: 'Category',\n            position: 'bottom',\n            fields: ['name'],\n            title: 'Sample Metrics'\n        }\n    ],\n    series: [\n        {\n            type: 'column',\n            axis: 'left',\n            highlight: true,\n            tips: {\n              trackMouse: true,\n              width: 140,\n              height: 28,\n              renderer: function(storeItem, item) {\n                this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');\n              }\n            },\n            label: {\n              display: 'insideEnd',\n              'text-anchor': 'middle',\n                field: 'data',\n                renderer: <a href=\"#!/api/Ext.util.Format-method-numberRenderer\" rel=\"Ext.util.Format-method-numberRenderer\" class=\"docClass\">Ext.util.Format.numberRenderer</a>('0'),\n                orientation: 'vertical',\n                color: '#333'\n            },\n            xField: 'name',\n            yField: 'data'\n        }\n    ]\n});\n</code></pre>\n\n<p>In this configuration we set <code>column</code> as the series type, bind the values of the bars to the bottom axis,\nset <code>highlight</code> to true so that bars are smoothly highlighted when hovered and bind the <code>xField</code> or category\nfield to the data store <code>name</code> property and the <code>yField</code> as the data1 property of a store element.</p>\n","!type":"fn(config: Ext_chart_series_Column_cfg)","prototype":{"!proto":"Ext.chart.series.Bar.prototype","axis":{"!type":"string","!doc":"<p>The position of the axis to bind the values to. Possible values are 'left', 'bottom', 'top' and 'right'.\nYou must explicitly set this value to bind the values of the column series to the ones in the axis, otherwise a\nrelative scale will be used.</p>\n"},"column":{"!type":"bool","!doc":"<p>Whether to set the visualization as column chart or horizontal bar chart.</p>\n"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"xPadding":{"!type":"number|?","!doc":"<p>Padding between the left/right axes and the bars.\nThe possible values are a number (the number of pixels for both left and right padding)\nor an object with <code>{ left, right }</code> properties.</p>\n"},"yPadding":{"!type":"number|?","!doc":"<p>Padding between the top/bottom axes and the bars.\nThe possible values are a number (the number of pixels for both top and bottom padding)\nor an object with <code>{ top, bottom }</code> properties.</p>\n"},"boundColumn":{"!type":"bool","!doc":"<p>private: true if the columns are bound to a numerical x-axis; otherwise they are evenly distributed along the axis</p>\n"}}},"Gauge":{"!doc":"<p>Creates a Gauge Chart. Gauge Charts are used to show progress in a certain variable. There are two ways of using the Gauge chart.\nOne is setting a store element into the Gauge and selecting the field to be used from that store. Another one is instantiating the\nvisualization and using the <code>setValue</code> method to adjust the value you want.</p>\n\n<p>An example of Gauge visualization:</p>\n\n<pre class='inline-example '><code>var store = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.JsonStore\" rel=\"Ext.data.JsonStore\" class=\"docClass\">Ext.data.JsonStore</a>', {\n    fields: ['value'],\n    data: [\n        { 'value':80 }\n    ]\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.chart.Chart\" rel=\"Ext.chart.Chart\" class=\"docClass\">Ext.chart.Chart</a>', {\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    store: store,\n    width: 400,\n    height: 250,\n    animate: true,\n    insetPadding: 30,\n    axes: [{\n        type: 'gauge',\n        position: 'gauge',\n        minimum: 0,\n        maximum: 100,\n        steps: 10,\n        margin: 10\n    }],\n    series: [{\n        type: 'gauge',\n        field: 'value',\n        donut: 30,\n        colorSet: ['#F49D10', '#ddd']\n    }]\n});\n\n<a href=\"#!/api/Ext-method-widget\" rel=\"Ext-method-widget\" class=\"docClass\">Ext.widget</a>(\"button\", {\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    text: \"Refresh\",\n    handler: function() {\n        store.getAt(0).set('value', Math.round(Math.random()*100));\n    }\n});\n</code></pre>\n\n<p>In this example we create a special Gauge axis to be used with the gauge visualization (describing half-circle markers), and also we're\nsetting a maximum, minimum and steps configuration options into the axis. The Gauge series configuration contains the store field to be bound to\nthe visual display and the color set to be used with the visualization.</p>\n","!type":"fn(config: Ext_chart_series_Gauge_cfg)","prototype":{"!proto":"Ext.chart.series.Series.prototype","angleField":{"!type":"string","!doc":"<p>The store record field name to be used for the pie angles.\nThe values bound to this field name must be positive real numbers.</p>\n"},"donut":{"!type":"bool|number","!doc":"<p>Use the entire disk or just a fraction of it for the gauge. Default's false.</p>\n"},"highlightDuration":{"!type":"number","!doc":"<p>The duration for the pie slice highlight effect.</p>\n"},"needle":{"!type":"bool","!doc":"<p>Use the Gauge Series as an area series or add a needle to it. Default's false.</p>\n"},"showInLegend":{"!type":"bool","!doc":"<p>Whether to add the pie chart elements as legend items. Default's false.</p>\n"},"style":{"!type":"?","!doc":"<p>An object containing styles for overriding series styles from Theming.</p>\n"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"rad":{"!type":"?"},"calcMiddle":{"!type":"fn(item: ?) -> !this","!doc":"<p>utility function to calculate the middle point of a pie slice.</p>\n"},"drawSeries":{"!type":"fn() -> !this","!doc":"<p>Draws the series for the current chart.</p>\n"},"getLegendColor":{"!type":"fn(item: ?) -> !this","!doc":"<p>Returns the color of the series (to be displayed as color for the series legend item).</p>\n"},"getSegment":{"!type":"fn(opt: ?) -> !this","!doc":"<p>returns an object with properties for a Slice</p>\n"},"initialize":{"!type":"fn() -> !this","!doc":"<p>updates some onbefore render parameters.</p>\n"},"isItemInPoint":{"!type":"fn(x: ?, y: ?, item: ?, i: ?) -> !this"},"onAnimate":{"!type":"fn(sprite: ?, attr: ?) -> !this","!doc":"<p>handles sprite animation for the series.</p>\n"},"onCreateLabel":{"!type":"fn(storeItem: ?, item: ?, i: ?, display: ?) -> +Ext.draw.Sprite","!doc":"<p>callback for when creating a label sprite.</p>\n"},"onPlaceCallout":{"!type":"fn() -> !this","!doc":"<p>callback for when placing a callout.</p>\n"},"onPlaceLabel":{"!type":"fn(label: ?, storeItem: ?, item: ?, i: ?, display: ?, animate: ?, index: ?) -> !this","!doc":"<p>callback for when placing a label sprite.</p>\n"},"setValue":{"!type":"fn(value: ?) -> !this","!doc":"<p>Sets the Gauge chart to the current specified value.</p>\n"}}},"Line":{"!doc":"<p>Creates a Line Chart. A Line Chart is a useful visualization technique to display quantitative information for different\ncategories or other real values (as opposed to the bar chart), that can show some progression (or regression) in the dataset.\nAs with all other series, the Line Series must be appended in the <em>series</em> Chart array configuration. See the Chart\ndocumentation for more information. A typical configuration object for the line series could be:</p>\n\n<pre class='inline-example '><code>var store = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.JsonStore\" rel=\"Ext.data.JsonStore\" class=\"docClass\">Ext.data.JsonStore</a>', {\n    fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],\n    data: [\n        { 'name': 'metric one',   'data1': 10, 'data2': 12, 'data3': 14, 'data4': 8,  'data5': 13 },\n        { 'name': 'metric two',   'data1': 7,  'data2': 8,  'data3': 16, 'data4': 10, 'data5': 3  },\n        { 'name': 'metric three', 'data1': 5,  'data2': 2,  'data3': 14, 'data4': 12, 'data5': 7  },\n        { 'name': 'metric four',  'data1': 2,  'data2': 14, 'data3': 6,  'data4': 1,  'data5': 23 },\n        { 'name': 'metric five',  'data1': 4,  'data2': 4,  'data3': 36, 'data4': 13, 'data5': 33 }\n    ]\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.chart.Chart\" rel=\"Ext.chart.Chart\" class=\"docClass\">Ext.chart.Chart</a>', {\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    width: 500,\n    height: 300,\n    animate: true,\n    store: store,\n    axes: [\n        {\n            type: 'Numeric',\n            position: 'left',\n            fields: ['data1', 'data2'],\n            label: {\n                renderer: <a href=\"#!/api/Ext.util.Format-method-numberRenderer\" rel=\"Ext.util.Format-method-numberRenderer\" class=\"docClass\">Ext.util.Format.numberRenderer</a>('0,0')\n            },\n            title: 'Sample Values',\n            grid: true,\n            minimum: 0\n        },\n        {\n            type: 'Category',\n            position: 'bottom',\n            fields: ['name'],\n            title: 'Sample Metrics'\n        }\n    ],\n    series: [\n        {\n            type: 'line',\n            highlight: {\n                size: 7,\n                radius: 7\n            },\n            axis: 'left',\n            xField: 'name',\n            yField: 'data1',\n            markerConfig: {\n                type: 'cross',\n                size: 4,\n                radius: 4,\n                'stroke-width': 0\n            }\n        },\n        {\n            type: 'line',\n            highlight: {\n                size: 7,\n                radius: 7\n            },\n            axis: 'left',\n            fill: true,\n            xField: 'name',\n            yField: 'data2',\n            markerConfig: {\n                type: 'circle',\n                size: 4,\n                radius: 4,\n                'stroke-width': 0\n            }\n        }\n    ]\n});\n</code></pre>\n\n<p>In this configuration we're adding two series (or lines), one bound to the <code>data1</code>\nproperty of the store and the other to <code>data3</code>. The type for both configurations is\n<code>line</code>. The <code>xField</code> for both series is the same, the name propert of the store.\nBoth line series share the same axis, the left axis. You can set particular marker\nconfiguration by adding properties onto the markerConfig object. Both series have\nan object as highlight so that markers animate smoothly to the properties in highlight\nwhen hovered. The second series has <code>fill=true</code> which means that the line will also\nhave an area below it of the same color.</p>\n\n<p><strong>Note:</strong> In the series definition remember to explicitly set the axis to bind the\nvalues of the line series to. This can be done by using the <code>axis</code> configuration property.</p>\n","!type":"fn(config: Ext_chart_series_Line_cfg)","prototype":{"!proto":"Ext.chart.series.Cartesian.prototype","fill":{"!type":"bool","!doc":"<p>If true, the area below the line will be filled in using the <a href=\"#!/api/Ext.chart.series.Line-cfg-style\" rel=\"Ext.chart.series.Line-cfg-style\" class=\"docClass\">eefill</a> and\n<a href=\"#!/api/Ext.chart.series.Line-cfg-style\" rel=\"Ext.chart.series.Line-cfg-style\" class=\"docClass\">opacity</a> config properties. Defaults to false.</p>\n"},"markerConfig":{"!type":"?","!doc":"<p>The display style for the markers. Only used if <a href=\"#!/api/Ext.chart.series.Line-cfg-showMarkers\" rel=\"Ext.chart.series.Line-cfg-showMarkers\" class=\"docClass\">showMarkers</a> is true.\nThe markerConfig is a configuration object containing the same set of properties defined in\nthe Sprite class. For example, if we were to set red circles as markers to the line series we could\npass the object:</p>\n\n<pre><code>        markerConfig: {\n            type: 'circle',\n            radius: 4,\n            'fill': '#f00'\n        }\n     </code></pre>\n\n"},"selectionTolerance":{"!type":"number","!doc":"<p>The offset distance from the cursor position to the line series to trigger events (then used for highlighting series, etc).</p>\n"},"showMarkers":{"!type":"bool","!doc":"<p>Whether markers should be displayed at the data points along the line. If true,\nthen the <a href=\"#!/api/Ext.chart.series.Line-cfg-markerConfig\" rel=\"Ext.chart.series.Line-cfg-markerConfig\" class=\"docClass\">markerConfig</a> config item will determine the markers' styling.</p>\n"},"smooth":{"!type":"bool|number","!doc":"<p>If set to <code>true</code> or a non-zero number, the line will be smoothed/rounded around its points; otherwise\nstraight line segments will be drawn.</p>\n\n<p>A numeric value is interpreted as a divisor of the horizontal distance between consecutive points in\nthe line; larger numbers result in sharper curves while smaller numbers result in smoother curves.</p>\n\n<p>If set to <code>true</code> then a default numeric value of 3 will be used. Defaults to <code>false</code>.</p>\n"},"style":{"!type":"?","!doc":"<p>An object containing style properties for the visualization lines and fill.\nThese styles will override the theme styles.  The following are valid style properties:</p>\n\n<ul>\n<li><code>stroke</code> - an rgb or hex color string for the background color of the line</li>\n<li><code>stroke-width</code> - the width of the stroke (integer)</li>\n<li><code>fill</code> - the background fill color string (hex or rgb), only works if <a href=\"#!/api/Ext.chart.series.Line-cfg-fill\" rel=\"Ext.chart.series.Line-cfg-fill\" class=\"docClass\">fill</a> is <code>true</code></li>\n<li><code>opacity</code> - the opacity of the line and the fill color (decimal)</li>\n</ul>\n\n\n<p>Example usage:</p>\n\n<pre><code>style: {\n    stroke: '#00ff00',\n    'stroke-width': 10,\n    fill: '#80A080',\n    opacity: 0.2\n}\n</code></pre>\n"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"defaultSmoothness":{"!type":"number","!doc":"<p>Default numeric smoothing value to be used when <a href=\"#!/api/Ext.chart.series.Line-cfg-smooth\" rel=\"Ext.chart.series.Line-cfg-smooth\" class=\"docClass\">smooth</a> = true.</p>\n"},"drawSeries":{"!type":"fn() -> !this","!doc":"<p>Draws the series for the current chart.</p>\n"},"hideAll":{"!type":"fn() -> !this","!doc":"<p>hide all series elements (markers, sprites).</p>\n"},"highlightItem":{"!type":"fn() -> !this","!doc":"<p>Overriding highlights.js highlightItem method.</p>\n"},"isItemInPoint":{"!type":"fn(x: ?, y: ?, item: ?, i: ?) -> !this"},"onCreateLabel":{"!type":"fn(storeItem: ?, item: ?, i: ?, display: ?) -> +Ext.draw.Sprite","!doc":"<p>called when a label is to be created.</p>\n"},"onPlaceCallout":{"!type":"fn(callout: ?, storeItem: ?, item: ?, i: ?, display: ?, animate: ?, index: ?) -> !this","!doc":"<p>called when a callout needs to be placed.</p>\n"},"onPlaceLabel":{"!type":"fn(label: ?, storeItem: ?, item: ?, i: ?, display: ?, animate: ?, index: ?) -> !this","!doc":"<p>called when a label is to be positioned.</p>\n"},"showAll":{"!type":"fn() -> !this","!doc":"<p>hide all series elements (markers, sprites).</p>\n"},"shrink":{"!type":"fn(xValues: ?, yValues: ?, size: ?) -> !this","!doc":"<p>makes an average of points when there are more data points than pixels to be rendered.</p>\n"},"toggleAll":{"!type":"fn(show: ?) -> !this","!doc":"<p>toggle visibility of all series elements (markers, sprites).</p>\n"},"unHighlightItem":{"!type":"fn() -> !this","!doc":"<p>Overriding highlights.js unHighlightItem method.</p>\n"}}},"Pie":{"!doc":"<p>Creates a Pie Chart. A Pie Chart is a useful visualization technique to display quantitative information for different\ncategories that also have a meaning as a whole.\nAs with all other series, the Pie Series must be appended in the <em>series</em> Chart array configuration. See the Chart\ndocumentation for more information. A typical configuration object for the pie series could be:</p>\n\n<pre class='inline-example '><code>var store = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.JsonStore\" rel=\"Ext.data.JsonStore\" class=\"docClass\">Ext.data.JsonStore</a>', {\n    fields: ['name', 'data'],\n    data: [\n        { 'name': 'metric one',   'data': 10 },\n        { 'name': 'metric two',   'data':  7 },\n        { 'name': 'metric three', 'data':  5 },\n        { 'name': 'metric four',  'data':  2 },\n        { 'name': 'metric five',  'data': 27 }\n    ]\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.chart.Chart\" rel=\"Ext.chart.Chart\" class=\"docClass\">Ext.chart.Chart</a>', {\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    width: 500,\n    height: 350,\n    animate: true,\n    store: store,\n    theme: 'Base:gradients',\n    series: [{\n        type: 'pie',\n        angleField: 'data',\n        showInLegend: true,\n        tips: {\n            trackMouse: true,\n            width: 140,\n            height: 28,\n            renderer: function(storeItem, item) {\n                // calculate and display percentage on hover\n                var total = 0;\n                store.each(function(rec) {\n                    total += rec.get('data');\n                });\n                this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) + '%');\n            }\n        },\n        highlight: {\n            segment: {\n                margin: 20\n            }\n        },\n        label: {\n            field: 'name',\n            display: 'rotate',\n            contrast: true,\n            font: '18px Arial'\n        }\n    }]\n});\n</code></pre>\n\n<p>In this configuration we set <code>pie</code> as the type for the series, set an object with specific style properties for highlighting options\n(triggered when hovering elements). We also set true to <code>showInLegend</code> so all the pie slices can be represented by a legend item.</p>\n\n<p>We set <code>data</code> as the value of the field to determine the angle span for each pie slice. We also set a label configuration object\nwhere we set the field name of the store field to be renderer as text for the label. The labels will also be displayed rotated.</p>\n\n<p>We set <code>contrast</code> to <code>true</code> to flip the color of the label if it is to similar to the background color. Finally, we set the font family\nand size through the <code>font</code> parameter.</p>\n","!type":"fn(config: Ext_chart_series_Pie_cfg)","prototype":{"!proto":"Ext.chart.series.Series.prototype","angleField":{"!type":"string","!doc":"<p>The store record field name to be used for the pie angles.\nThe values bound to this field name must be positive real numbers.</p>\n"},"colorSet":{"!type":"[?]","!doc":"<p>An array of color values which will be used, in order, as the pie slice fill colors.</p>\n"},"donut":{"!type":"bool|number","!doc":"<p>Whether to set the pie chart as donut chart.\nDefault's false. Can be set to a particular percentage to set the radius\nof the donut chart.</p>\n"},"field":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.chart.series.Pie-cfg-angleField\" rel=\"Ext.chart.series.Pie-cfg-angleField\" class=\"docClass\">angleField</a>.</p>\n"},"highlightDuration":{"!type":"number","!doc":"<p>The duration for the pie slice highlight effect.</p>\n"},"lengthField":{"!type":"string","!doc":"<p>The store record field name to be used for the pie slice lengths.\nThe values bound to this field name must be positive real numbers.</p>\n"},"showInLegend":{"!type":"bool","!doc":"<p>Whether to add the pie chart elements as legend items. Default's false.</p>\n"},"style":{"!type":"?","!doc":"<p>An object containing styles for overriding series styles from Theming.</p>\n"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"xField":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.chart.series.Pie-cfg-angleField\" rel=\"Ext.chart.series.Pie-cfg-angleField\" class=\"docClass\">angleField</a>.</p>\n"},"accuracy":{"!type":"number"},"rad":{"!type":"?"},"calcMiddle":{"!type":"fn(item: ?) -> !this","!doc":"<p>utility function to calculate the middle point of a pie slice.</p>\n"},"drawSeries":{"!type":"fn() -> !this","!doc":"<p>Draws the series for the current chart.</p>\n"},"getLegendColor":{"!type":"fn(item: ?) -> !this","!doc":"<p>Returns the color of the series (to be displayed as color for the series legend item).</p>\n"},"getSegment":{"!type":"fn(opt: ?) -> !this","!doc":"<p>returns an object with properties for a PieSlice.</p>\n"},"hideAll":{"!type":"fn(index: ?) -> !this","!doc":"<p>hides all elements in the series.</p>\n"},"highlightItem":{"!type":"fn(item: ?) -> !this","!doc":"<p>Highlight the specified item. If no item is provided the whole series will be highlighted.</p>\n"},"initialize":{"!type":"fn() -> !this","!doc":"<p>updates some onbefore render parameters.</p>\n"},"isItemInPoint":{"!type":"fn(x: ?, y: ?, item: ?, i: ?) -> !this"},"onAnimate":{"!type":"fn(sprite: ?, attr: ?) -> !this","!doc":"<p>handles sprite animation for the series.</p>\n"},"onCreateLabel":{"!type":"fn(storeItem: ?, item: ?, i: ?, display: ?) -> +Ext.draw.Sprite","!doc":"<p>callback for when creating a label sprite.</p>\n"},"onPlaceCallout":{"!type":"fn(callout: ?, storeItem: ?, item: ?, i: ?, display: ?, animate: ?, index: ?) -> !this","!doc":"<p>callback for when placing a callout sprite.</p>\n"},"onPlaceLabel":{"!type":"fn(label: ?, storeItem: ?, item: ?, i: ?, display: ?, animate: ?, index: ?) -> !this","!doc":"<p>callback for when placing a label sprite.</p>\n"},"onRedraw":{"!type":"fn() -> !this"},"showAll":{"!type":"fn(index: ?) -> !this","!doc":"<p>shows all elements in the series.</p>\n"},"unHighlightItem":{"!type":"fn(item: ?) -> !this","!doc":"<p>Un-highlights the specified item. If no item is provided it will un-highlight the entire series.</p>\n"}}},"Radar":{"!doc":"<p>Creates a Radar Chart. A Radar Chart is a useful visualization technique for comparing different quantitative values for\na constrained number of categories.</p>\n\n<p>As with all other series, the Radar series must be appended in the <em>series</em> Chart array configuration. See the Chart\ndocumentation for more information. A typical configuration object for the radar series could be:</p>\n\n<pre class='inline-example '><code>var store = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.JsonStore\" rel=\"Ext.data.JsonStore\" class=\"docClass\">Ext.data.JsonStore</a>', {\n    fields: ['name', 'data1', 'data2', 'data3'],\n    data: [\n        { 'name': 'metric one',   'data1': 14, 'data2': 12, 'data3': 13 },\n        { 'name': 'metric two',   'data1': 16, 'data2':  8, 'data3':  3 },\n        { 'name': 'metric three', 'data1': 14, 'data2':  2, 'data3':  7 },\n        { 'name': 'metric four',  'data1':  6, 'data2': 14, 'data3': 23 },\n        { 'name': 'metric five',  'data1': 36, 'data2': 38, 'data3': 33 }\n    ]\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.chart.Chart\" rel=\"Ext.chart.Chart\" class=\"docClass\">Ext.chart.Chart</a>', {\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    width: 500,\n    height: 300,\n    animate: true,\n    theme:'Category2',\n    store: store,\n    axes: [{\n        type: 'Radial',\n        position: 'radial',\n        label: {\n            display: true\n        }\n    }],\n    series: [{\n        type: 'radar',\n        xField: 'name',\n        yField: 'data1',\n        showInLegend: true,\n        showMarkers: true,\n        markerConfig: {\n            radius: 5,\n            size: 5\n        },\n        style: {\n            'stroke-width': 2,\n            fill: 'none'\n        }\n    },{\n        type: 'radar',\n        xField: 'name',\n        yField: 'data2',\n        showMarkers: true,\n        showInLegend: true,\n        markerConfig: {\n            radius: 5,\n            size: 5\n        },\n        style: {\n            'stroke-width': 2,\n            fill: 'none'\n        }\n    },{\n        type: 'radar',\n        xField: 'name',\n        yField: 'data3',\n        showMarkers: true,\n        showInLegend: true,\n        markerConfig: {\n            radius: 5,\n            size: 5\n        },\n        style: {\n            'stroke-width': 2,\n            fill: 'none'\n        }\n    }]\n});\n</code></pre>\n\n<p>In this configuration we add three series to the chart. Each of these series is bound to the same\ncategories field, <code>name</code> but bound to different properties for each category, <code>data1</code>, <code>data2</code> and\n<code>data3</code> respectively. All series display markers by having <code>showMarkers</code> enabled. The configuration\nfor the markers of each series can be set by adding properties onto the markerConfig object.\nFinally we override some theme styling properties by adding properties to the <code>style</code> object.</p>\n","!type":"fn(config: Ext_chart_series_Radar_cfg)","prototype":{"!proto":"Ext.chart.series.Series.prototype","markerConfig":{"!type":"?","!doc":"<p>The display style for the markers. Only used if <a href=\"#!/api/Ext.chart.series.Radar-cfg-showMarkers\" rel=\"Ext.chart.series.Radar-cfg-showMarkers\" class=\"docClass\">showMarkers</a> is true.\nThe markerConfig is a configuration object containing the same set of properties defined in\nthe Sprite class. For example, if we were to set red circles as markers to the series we could\npass the object:</p>\n\n<pre class='inline-example '><code>markerConfig: {\n    type: 'circle',\n    radius: 4,\n    'fill': '#f00'\n}\n</code></pre>\n"},"showInLegend":{"!type":"bool","!doc":"<p>Whether to show this series in the legend.</p>\n"},"showMarkers":{"!type":"bool","!doc":"<p>Whether markers should be displayed at the data points of the series. If true,\nthen the <a href=\"#!/api/Ext.chart.series.Radar-cfg-markerConfig\" rel=\"Ext.chart.series.Radar-cfg-markerConfig\" class=\"docClass\">markerConfig</a> config item will determine the markers' styling.</p>\n"},"style":{"!type":"?","!doc":"<p>An object containing styles for overriding series styles from Theming.</p>\n"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"xField":{"!type":"string","!doc":"<p>The name of the data Model field corresponding to the x-axis (angle) value.</p>\n"},"yField":{"!type":"string","!doc":"<p>The name of the data Model field corresponding to the y-axis (radius) value.</p>\n"},"rad":{"!type":"?"},"drawMarkers":{"!type":"fn() -> !this","!doc":"<p>draws the markers for the lines (if any).</p>\n"},"drawSeries":{"!type":"fn() -> !this","!doc":"<p>Draws the series for the current chart.</p>\n"},"getAxesForXAndYFields":{"!type":"fn() -> !this","!doc":"<p>return the radial axis as yAxis (there is no xAxis).\nRequired by the base class '<a href=\"#!/api/Ext.chart.axis.Axis\" rel=\"Ext.chart.axis.Axis\" class=\"docClass\">Ext.chart.axis.Axis</a>'.</p>\n"},"hideAll":{"!type":"fn() -> !this","!doc":"<p>hide all elements in the series.</p>\n"},"hideMarkers":{"!type":"fn(index: ?) -> !this","!doc":"<p>hide all markers that belong to <code>markerGroup</code></p>\n"},"isItemInPoint":{"!type":"fn(x: ?, y: ?, item: ?) -> !this"},"onCreateLabel":{"!type":"fn(storeItem: ?, item: ?, i: ?, display: ?) -> +Ext.draw.Sprite","!doc":"<p>callback for when creating a label sprite.</p>\n"},"onPlaceLabel":{"!type":"fn(label: ?, storeItem: ?, item: ?, i: ?, display: ?, animate: ?, index: ?) -> !this","!doc":"<p>callback for when placing a label sprite.</p>\n"},"showAll":{"!type":"fn() -> !this","!doc":"<p>show all elements in the series.</p>\n"},"toggleAll":{"!type":"fn(show: ?) -> !this","!doc":"<p>for toggling (show/hide) series.</p>\n"}}},"Scatter":{"!doc":"<p>Creates a Scatter Chart. The scatter plot is useful when trying to display more than two variables in the same visualization.\nThese variables can be mapped into x, y coordinates and also to an element's radius/size, color, etc.\nAs with all other series, the Scatter Series must be appended in the <em>series</em> Chart array configuration. See the Chart\ndocumentation for more information on creating charts. A typical configuration object for the scatter could be:</p>\n\n<pre class='inline-example '><code>var store = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.JsonStore\" rel=\"Ext.data.JsonStore\" class=\"docClass\">Ext.data.JsonStore</a>', {\n    fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],\n    data: [\n        { 'name': 'metric one',   'data1': 10, 'data2': 12, 'data3': 14, 'data4': 8,  'data5': 13 },\n        { 'name': 'metric two',   'data1': 7,  'data2': 8,  'data3': 16, 'data4': 10, 'data5': 3  },\n        { 'name': 'metric three', 'data1': 5,  'data2': 2,  'data3': 14, 'data4': 12, 'data5': 7  },\n        { 'name': 'metric four',  'data1': 2,  'data2': 14, 'data3': 6,  'data4': 1,  'data5': 23 },\n        { 'name': 'metric five',  'data1': 27, 'data2': 38, 'data3': 36, 'data4': 13, 'data5': 33 }\n    ]\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.chart.Chart\" rel=\"Ext.chart.Chart\" class=\"docClass\">Ext.chart.Chart</a>', {\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    width: 500,\n    height: 300,\n    animate: true,\n    theme:'Category2',\n    store: store,\n    axes: [{\n        type: 'Numeric',\n        position: 'left',\n        fields: ['data2', 'data3'],\n        title: 'Sample Values',\n        grid: true,\n        minimum: 0\n    }, {\n        type: 'Category',\n        position: 'bottom',\n        fields: ['name'],\n        title: 'Sample Metrics'\n    }],\n    series: [{\n        type: 'scatter',\n        markerConfig: {\n            radius: 5,\n            size: 5\n        },\n        axis: 'left',\n        xField: 'name',\n        yField: 'data2'\n    }, {\n        type: 'scatter',\n        markerConfig: {\n            radius: 5,\n            size: 5\n        },\n        axis: 'left',\n        xField: 'name',\n        yField: 'data3'\n    }]\n});\n</code></pre>\n\n<p>In this configuration we add three different categories of scatter series. Each of them is bound to a different field of the same data store,\n<code>data1</code>, <code>data2</code> and <code>data3</code> respectively. All x-fields for the series must be the same field, in this case <code>name</code>.\nEach scatter series has a different styling configuration for markers, specified by the <code>markerConfig</code> object. Finally we set the left axis as\naxis to show the current values of the elements.</p>\n","!type":"fn(config: Ext_chart_series_Scatter_cfg)","prototype":{"!proto":"Ext.chart.series.Cartesian.prototype","markerConfig":{"!type":"?","!doc":"<p>The display style for the scatter series markers.</p>\n"},"style":{"!type":"?","!doc":"<p>Append styling properties to this object for it to override theme properties.</p>\n"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"createPoint":{"!type":"fn(attr: ?, type: ?) -> !this","!doc":"<p>create a new point</p>\n"},"createShadow":{"!type":"fn(sprite: ?, endMarkerStyle: ?, type: ?) -> !this","!doc":"<p>create a new set of shadows for a sprite</p>\n"},"drawSeries":{"!type":"fn() -> !this","!doc":"<p>Draws the series for the current chart.</p>\n"},"getBounds":{"!type":"fn() -> !this","!doc":"<p>Get chart and data boundaries</p>\n"},"getPaths":{"!type":"fn() -> !this","!doc":"<p>Build an array of paths for the chart</p>\n"},"isItemInPoint":{"!type":"fn(x: ?, y: ?, item: ?) -> !this"},"onAnimate":{"!type":"fn(sprite: ?, attr: ?) -> !this","!doc":"<p>handles sprite animation for the series.</p>\n"},"onCreateLabel":{"!type":"fn(storeItem: ?, item: ?, i: ?, display: ?) -> +Ext.draw.Sprite","!doc":"<p>callback for when creating a label sprite.</p>\n"},"onPlaceCallout":{"!type":"fn(callout: ?, storeItem: ?, item: ?, i: ?, display: ?, animate: ?, index: ?) -> !this","!doc":"<p>callback for when placing a callout sprite.</p>\n"},"onPlaceLabel":{"!type":"fn(label: ?, storeItem: ?, item: ?, i: ?, display: ?, animate: ?, index: ?) -> !this","!doc":"<p>callback for when placing a label sprite.</p>\n"},"resetPoint":{"!type":"fn(sprite: ?) -> !this","!doc":"<p>translate point to the center</p>\n"},"resetShadow":{"!type":"fn(sprite: ?) -> !this","!doc":"<p>translate shadows of a sprite to the center</p>\n"}}},"Series":{"!doc":"<p>Series is the abstract class containing the common logic to all chart series. Series includes\nmethods from Labels, Highlights, Tips and Callouts mixins. This class implements the logic of handling\nmouse events, animating, hiding, showing all elements and returning the color of the series to be used as a legend item.</p>\n\n<h2>Listeners</h2>\n\n<p>The series class supports listeners via the Observable syntax. Some of these listeners are:</p>\n\n<ul>\n<li><code>itemclick</code> When the user interacts with a marker.</li>\n<li><code>itemmouseup</code> When the user interacts with a marker.</li>\n<li><code>itemmousedown</code> When the user interacts with a marker.</li>\n<li><code>itemmousemove</code> When the user iteracts with a marker.</li>\n<li><code>afterrender</code> Will be triggered when the animation ends or when the series has been rendered completely.</li>\n</ul>\n\n\n<p>For example:</p>\n\n<pre><code>series: [{\n        type: 'column',\n        axis: 'left',\n        listeners: {\n                'afterrender': function() {\n                        console('afterrender');\n                }\n        },\n        xField: 'category',\n        yField: 'data1'\n}]\n</code></pre>\n","!type":"fn(config: Ext_chart_series_Series_cfg)","prototype":{"!proto":"Ext.Base.prototype","highlight":{"!type":"bool|?","!doc":"<p>If set to <code>true</code> it will highlight the markers or the series when hovering\nwith the mouse. This parameter can also be an object with the same style\nproperties you would apply to a <a href=\"#!/api/Ext.draw.Sprite\" rel=\"Ext.draw.Sprite\" class=\"docClass\">Ext.draw.Sprite</a> to apply custom\nstyles to markers and series.</p>\n"},"listeners":{"!type":"?","!doc":"<p>An (optional) object with event callbacks. All event callbacks get the target <em>item</em> as first parameter. The callback functions are:</p>\n\n<ul>\n<li>itemclick</li>\n<li>itemmouseover</li>\n<li>itemmouseout</li>\n<li>itemmousedown</li>\n<li>itemmouseup</li>\n</ul>\n\n"},"renderer":{"!type":"fn()","!doc":"<p>A function that can be overridden to set custom styling properties to each rendered element.\nPasses in (sprite, record, attributes, index, store) to the function.</p>\n"},"shadowAttributes":{"!type":"[?]","!doc":"<p>An array with shadow attributes</p>\n"},"showInLegend":{"!type":"bool","!doc":"<p>Whether to show this series in the legend.</p>\n"},"tips":{"!type":"?","!doc":"<p>Add tooltips to the visualization's markers. The options for the tips are the\nsame configuration used with <a href=\"#!/api/Ext.tip.ToolTip\" rel=\"Ext.tip.ToolTip\" class=\"docClass\">Ext.tip.ToolTip</a>. For example:</p>\n\n<pre><code>tips: {\n  trackMouse: true,\n  width: 140,\n  height: 28,\n  renderer: function(storeItem, item) {\n    this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' views');\n  }\n},\n</code></pre>\n"},"title":{"!type":"string","!doc":"<p>The human-readable name of the series.</p>\n"},"type":{"!type":"string","!doc":"<p>The type of series. Set in subclasses.</p>\n"},"animating":{"!type":"bool","!doc":"<p>animating flag</p>\n"},"nullGutters":{"!type":"?","!doc":"<p>default gutters</p>\n"},"nullPadding":{"!type":"?","!doc":"<p>default padding</p>\n"},"eachRecord":{"!type":"fn(fn: fn(), scope: ?) -> !this","!doc":"<p>Iterate over each of the records for this series. The default implementation simply iterates\nthrough the entire data store, but individual series implementations can override this to\nprovide custom handling, e.g. adding/removing records.</p>\n"},"getGutters":{"!type":"fn() -> !this","!doc":"<p>return the gutters.</p>\n"},"getItemForPoint":{"!type":"fn(x: number, y: number) -> ?","!doc":"<p>For a given x/y point relative to the Surface, find a corresponding item from this\nseries, if any.</p>\n"},"getLegendColor":{"!type":"fn(index: ?) -> !this","!doc":"<p>Returns a string with the color to be used for the series legend item.</p>\n"},"getPadding":{"!type":"fn() -> !this","!doc":"<p>return the gutters.</p>\n"},"getRecordCount":{"!type":"fn() -> !this","!doc":"<p>Return the number of records being displayed in this series. Defaults to the number of\nrecords in the store; individual series implementations can override to provide custom handling.</p>\n"},"hide":{"!type":"fn() -> !this"},"hideAll":{"!type":"fn() -> !this","!doc":"<p>Hides all the elements in the series.</p>\n"},"isExcluded":{"!type":"fn(index: ?) -> !this","!doc":"<p>Determines whether the series item at the given index has been excluded, i.e. toggled off in the legend.</p>\n"},"isItemInPoint":{"!type":"fn(x: ?, y: ?, item: ?, i: ?) -> !this"},"onAnimate":{"!type":"fn(sprite: ?, attr: ?) -> !this","!doc":"<p>set the animation for the sprite</p>\n"},"onItemMouseOut":{"!type":"fn(item: ?) -> !this","!doc":"<p>wrapper for the itemmouseout event.</p>\n"},"onItemMouseOver":{"!type":"fn(item: ?) -> !this","!doc":"<p>wrapper for the itemmouseover event.</p>\n"},"onMouseLeave":{"!type":"fn() -> !this","!doc":"<p>wrapper for the mouseleave event.</p>\n"},"onRedraw":{"!type":"fn() -> !this"},"setBBox":{"!type":"fn(noGutter: ?) -> !this","!doc":"<p>set the bbox and clipBox for the series</p>\n"},"setTitle":{"!type":"fn(index: number, title: string) -> !this","!doc":"<p>Changes the value of the <a href=\"#!/api/Ext.chart.series.Series-cfg-title\" rel=\"Ext.chart.series.Series-cfg-title\" class=\"docClass\">title</a> for the series.\nArguments can take two forms:</p>\n\n<ul>\n<li>A single String value: this will be used as the new single title for the series (applies\nto series with only one yField)</li>\n<li>A numeric index and a String value: this will set the title for a single indexed yField.</li>\n</ul>\n\n"},"showAll":{"!type":"fn() -> !this","!doc":"<p>Shows all the elements in the series.</p>\n"},"visibleInLegend":{"!type":"fn(index: number) -> !this","!doc":"<p>Checks whether the data field should be visible in the legend</p>\n"},"titlechange":{"!type":"fn(title: string, index: number, eOpts: ?)","!doc":"<p>Fires when the series title is changed via <a href=\"#!/api/Ext.chart.series.Series-method-setTitle\" rel=\"Ext.chart.series.Series-method-setTitle\" class=\"docClass\">setTitle</a>.</p>\n"}}}},"theme":{"Base":{"!doc":"<p>Provides default colors for non-specified things. Should be sub-classed when creating new themes.</p>\n","!type":"fn(config: Ext_chart_theme_Base_cfg)","prototype":{"!proto":"Ext.Base.prototype"}},"Theme":{"!doc":"<p>Provides chart theming.</p>\n\n<p>Used as mixins by <a href=\"#!/api/Ext.chart.Chart\" rel=\"Ext.chart.Chart\" class=\"docClass\">Ext.chart.Chart</a>.</p>\n"}}},"container":{"AbstractContainer":{"!doc":"<p>An abstract base class which provides shared methods for Containers across the Sencha product line.</p>\n\n<p>Please refer to sub class's documentation</p>\n","!type":"fn(config: +Ext.Element|string|Ext_container_AbstractContainer_cfg)","prototype":{"!proto":"Ext.Component.prototype","activeItem":{"!type":"string|number","!doc":"<p>A string component id or the numeric index of the component that should be\ninitially activated within the container's layout on render.  For example,\nactiveItem: 'item-1' or activeItem: 0 (index 0 = the first item in the\ncontainer's collection).  activeItem only applies to layout styles that can\ndisplay items one at a time (like <a href=\"#!/api/Ext.layout.container.Card\" rel=\"Ext.layout.container.Card\" class=\"docClass\">Ext.layout.container.Card</a> and\n<a href=\"#!/api/Ext.layout.container.Fit\" rel=\"Ext.layout.container.Fit\" class=\"docClass\">Ext.layout.container.Fit</a>).</p>\n"},"autoDestroy":{"!type":"bool","!doc":"<p>If true the container will automatically destroy any contained component that is removed\nfrom it, else destruction must be handled manually.</p>\n"},"baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this component's element. This will also be prepended to elements within this\ncomponent like Panel's body will get a class <code>x-panel-body</code>. This means that if you create a subclass of Panel, and\nyou want it to get all the Panels styling for the element and the body, you leave the <code>baseCls</code> <code>x-panel</code> and use\n<code>componentCls</code> to add specific styling for this component.</p>\n"},"bubbleEvents":{"!type":"[string]","!doc":"<p>An array of events that, when fired, should be bubbled to any parent container.\nSee <a href=\"#!/api/Ext.util.Observable-method-enableBubble\" rel=\"Ext.util.Observable-method-enableBubble\" class=\"docClass\">Ext.util.Observable.enableBubble</a>.</p>\n"},"defaultType":{"!type":"string","!doc":"<p>The default <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">xtype</a> of child Components to create in this Container when\na child item is specified as a raw configuration object, rather than as an instantiated Component.</p>\n"},"defaults":{"!type":"?|fn()","!doc":"<p>This option is a means of applying default settings to all added items whether added\nthrough the <a href=\"#!/api/Ext.container.AbstractContainer-cfg-items\" rel=\"Ext.container.AbstractContainer-cfg-items\" class=\"docClass\">items</a> config or via the <a href=\"#!/api/Ext.container.AbstractContainer-method-add\" rel=\"Ext.container.AbstractContainer-method-add\" class=\"docClass\">add</a> or <a href=\"#!/api/Ext.container.AbstractContainer-method-insert\" rel=\"Ext.container.AbstractContainer-method-insert\" class=\"docClass\">insert</a> methods.</p>\n\n<p>Defaults are applied to both config objects and instantiated components conditionally\nso as not to override existing properties in the item (see <a href=\"#!/api/Ext-method-applyIf\" rel=\"Ext-method-applyIf\" class=\"docClass\">Ext.applyIf</a>).</p>\n\n<p>If the defaults option is specified as a function, then the function will be called\nusing this Container as the scope (<code>this</code> reference) and passing the added item as\nthe first parameter. Any resulting object from that call is then applied to the item\nas default properties.</p>\n\n<p>For example, to automatically apply padding to the body of each of a set of\ncontained <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a> items, you could pass:\n<code>defaults: {bodyStyle:'padding:15px'}</code>.</p>\n\n<p>Usage:</p>\n\n<pre><code>defaults: { // defaults are applied to items, not the container\n    autoScroll: true\n},\nitems: [\n    // default will not be applied here, panel1 will be autoScroll: false\n    {\n        xtype: 'panel',\n        id: 'panel1',\n        autoScroll: false\n    },\n    // this component will have autoScroll: true\n    new <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>({\n        id: 'panel2'\n    })\n]\n</code></pre>\n"},"detachOnRemove":{"!type":"bool","!doc":"<p>True to move any component to the <a href=\"#!/api/Ext-method-getDetachedBody\" rel=\"Ext-method-getDetachedBody\" class=\"docClass\">detachedBody</a> when the component is\nremoved from this container. This option is only applicable when the component is not destroyed while\nbeing removed, see <a href=\"#!/api/Ext.container.AbstractContainer-cfg-autoDestroy\" rel=\"Ext.container.AbstractContainer-cfg-autoDestroy\" class=\"docClass\">autoDestroy</a> and <a href=\"#!/api/Ext.container.AbstractContainer-method-remove\" rel=\"Ext.container.AbstractContainer-method-remove\" class=\"docClass\">remove</a>. If this option is set to false, the DOM\nof the component will remain in the current place until it is explicitly moved.</p>\n"},"items":{"!type":"+Ext.util.AbstractMixedCollection","!doc":"<p>The MixedCollection containing all the child items of this container.</p>\n"},"layout":{"!type":"+Ext.enums.Layout|?","!doc":"<p><strong>Important</strong>: In order for child items to be correctly sized and\npositioned, typically a layout manager <strong>must</strong> be specified through\nthe <code>layout</code> configuration option.</p>\n\n<p>The sizing and positioning of child <a href=\"#!/api/Ext.container.AbstractContainer-cfg-items\" rel=\"Ext.container.AbstractContainer-cfg-items\" class=\"docClass\">items</a> is the responsibility of\nthe Container's layout manager which creates and manages the type of layout\nyou have in mind.  For example:</p>\n\n<p>If the layout configuration is not explicitly specified for\na general purpose container (e.g. Container or Panel) the\n<a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used\nwhich does nothing but render child components sequentially into the\nContainer (no sizing or positioning will be performed in this situation).</p>\n\n<p><strong>layout</strong> may be specified as either as an Object or as a String:</p>\n\n<h2>Specify as an Object</h2>\n\n<p>Example usage:</p>\n\n<pre><code>layout: {\n    type: 'vbox',\n    align: 'left'\n}\n</code></pre>\n\n<ul>\n<li><p><strong>type</strong></p>\n\n<p>The layout type to be used for this container.  If not specified,\na default <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">Ext.layout.container.Auto</a> will be created and used.</p>\n\n<p>Valid layout <code>type</code> values are listed in <a href=\"#!/api/Ext.enums.Layout\" rel=\"Ext.enums.Layout\" class=\"docClass\">Ext.enums.Layout</a>.</p></li>\n<li><p>Layout specific configuration properties</p>\n\n<p>Additional layout specific configuration properties may also be\nspecified. For complete details regarding the valid config options for\neach layout type, see the layout class corresponding to the <code>type</code>\nspecified.</p></li>\n</ul>\n\n\n<h2>Specify as a String</h2>\n\n<p>Example usage:</p>\n\n<pre><code>layout: 'vbox'\n</code></pre>\n\n<ul>\n<li><p><strong>layout</strong></p>\n\n<p>The layout <code>type</code> to be used for this container (see <a href=\"#!/api/Ext.enums.Layout\" rel=\"Ext.enums.Layout\" class=\"docClass\">Ext.enums.Layout</a>\nfor list of valid values).</p>\n\n<p>Additional layout specific configuration properties. For complete\ndetails regarding the valid config options for each layout type, see the\nlayout class corresponding to the <code>layout</code> specified.</p></li>\n</ul>\n\n\n<h2>Configuring the default layout type</h2>\n\n<p>If a certain Container class has a default layout (For example a <a href=\"#!/api/Ext.toolbar.Toolbar\" rel=\"Ext.toolbar.Toolbar\" class=\"docClass\">Toolbar</a>\nwith a default <code>Box</code> layout), then to simply configure the default layout,\nuse an object, but without the <code>type</code> property:</p>\n\n<pre><code>xtype: 'toolbar',\nlayout: {\n    pack: 'center'\n}\n</code></pre>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>End Definitions</p>\n"},"suspendLayout":{"!type":"bool","!doc":"<p>If true, suspend calls to doLayout. Useful when batching multiple adds to a container\nand not passing them as multiple arguments or an array.</p>\n"},"isContainer":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated Container, or subclass thereof.</p>\n"},"layoutCounter":{"!type":"number","!doc":"<p>The number of container layout calls made on this object.</p>\n"},"add":{"!type":"fn(this: +Ext.container.Container, component: +Ext.Component, index: number, eOpts: ?)","!doc":"<p>Fires after any <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> is added or inserted into the container.</p>\n\n<p><strong>This event bubbles:</strong> 'add' will also be fired when Component is added to any of\nthe child containers or their childern or ...</p>\n"},"afterComponentLayout":{"!type":"fn() -> !this","!doc":"<p>Called by the layout system after the Component has been laid out.</p>\n"},"afterLayout":{"!type":"fn(layout: +Ext.layout.container.Container) -> !this","!doc":"<p>Invoked after the Container has laid out (and rendered if necessary)\nits child Components.</p>\n"},"applyDefaults":{"!type":"fn(config: ?) -> !this"},"applyTargetCls":{"!type":"fn(targetCls: ?) -> !this","!doc":"<p>The targetCls is a CSS class that the layout needs added to the targetEl. The targetEl is where the container's\nchildren are rendered and is usually just the main el. Some containers (e.g. panels) use a body instead.</p>\n\n<p>In general, if a class overrides getTargetEl it will also need to override this method. This is necessary to\navoid a post-render step to add the targetCls.</p>\n"},"beforeDestroy":{"!type":"fn() -> !this","!doc":"<p>Invoked before the Component is destroyed.</p>\n"},"beforeRender":{"!type":"fn() -> !this"},"cascade":{"!type":"fn(fn: fn(), scope?: ?, args?: [?]) -> +Ext.Container","!doc":"<p>Cascades down the component/container heirarchy from this component (passed in\nthe first call), calling the specified function with each component. The scope\n(this reference) of the function call will be the scope provided or the current\ncomponent. The arguments to the function will be the args provided or the current\ncomponent. If the function returns false at any point, the cascade is stopped on\nthat branch.</p>\n"},"contains":{"!type":"fn(comp: +Ext.Component, deep?: bool) -> bool","!doc":"<p>Determines whether the passed Component is either an immediate child of this Container,\nor whether it is a descendant.</p>\n"},"detachComponent":{"!type":"fn(component: ?) -> !this","!doc":"<p>Detach a component from the DOM</p>\n"},"disable":{"!type":"fn() -> +Ext.container.AbstractContainer","!doc":"<p>Inherit docs\nDisable all immediate children that was previously disabled\nOverride disable because onDisable only gets called when rendered</p>\n"},"doLayout":{"!type":"fn() -> +Ext.container.Container","!doc":"<p>Manually force this container's layout to be recalculated. The framework uses this internally to refresh layouts\nform most cases.</p>\n"},"doRemove":{"!type":"fn(component: ?, doDestroy: ?) -> !this"},"enable":{"!type":"fn() -> +Ext.container.AbstractContainer","!doc":"<p>Enable all immediate children that was previously disabled\nOverride enable because onEnable only gets called when rendered</p>\n"},"finishRenderChildren":{"!type":"fn() -> !this"},"getChildItemsToDisable":{"!type":"fn() -> [+Ext.Component]","!doc":"<p>Gets a list of child components to enable/disable when the container is\nenabled/disabled</p>\n"},"getComponent":{"!type":"fn(comp: string|number) -> +Ext.Component","!doc":"<p>Examines this container's <a href=\"#!/api/Ext.container.AbstractContainer-property-items\" rel=\"Ext.container.AbstractContainer-property-items\" class=\"docClass\">items</a> <strong>property</strong> and gets a direct child\ncomponent of this container.</p>\n"},"getComponentId":{"!type":"fn(comp: ?) -> !this","!doc":"<ul>\n<li>used as the key lookup function for the items collection</li>\n</ul>\n\n"},"getContentTarget":{"!type":"fn() -> !this"},"getDefaultContentTarget":{"!type":"fn() -> !this"},"getFocusEl":{"!type":"fn() -> +Ext.Element","!doc":"<p>Returns the focus holder element associated with this Container. By default, this is the Container's target\nelement. Subclasses which use embedded focusable elements (such as Window and Button) should override this for use\nby the <a href=\"#!/api/Ext.container.AbstractContainer-method-focus\" rel=\"Ext.container.AbstractContainer-method-focus\" class=\"docClass\">focus</a> method.</p>\n"},"getLayout":{"!type":"fn() -> +Ext.layout.container.Container","!doc":"<p>Returns the <a href=\"#!/api/Ext.layout.container.Container\" rel=\"Ext.layout.container.Container\" class=\"docClass\">layout</a> instance currently associated with this Container.\nIf a layout has not been instantiated yet, that is done first</p>\n"},"getRefItems":{"!type":"fn(deep: ?) -> !this","!doc":"<p>Used by <a href=\"#!/api/Ext.ComponentQuery\" rel=\"Ext.ComponentQuery\" class=\"docClass\">ComponentQuery</a>, <a href=\"#!/api/Ext.container.AbstractContainer-method-child\" rel=\"Ext.container.AbstractContainer-method-child\" class=\"docClass\">child</a> and <a href=\"#!/api/Ext.container.AbstractContainer-method-down\" rel=\"Ext.container.AbstractContainer-method-down\" class=\"docClass\">down</a> to retrieve all of the items\nwhich can potentially be considered a child of this Container.</p>\n\n<p>This may be overriden by Components which have ownership of Components\nthat are not contained in the <a href=\"#!/api/Ext.container.AbstractContainer-property-items\" rel=\"Ext.container.AbstractContainer-property-items\" class=\"docClass\">items</a> collection.</p>\n\n<p>NOTE: IMPORTANT note for maintainers:\nItems are returned in tree traversal order. Each item is appended to the result array\nfollowed by the results of that child's getRefItems call.\nFloating child items are appended after internal child items.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>The initComponent template method is an important initialization step for a Component. It is intended to be\nimplemented by each subclass of <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> to provide any needed constructor logic. The\ninitComponent method of the class being created is called first, with each initComponent method\nup the hierarchy to <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> being called thereafter. This makes it easy to implement and,\nif needed, override the constructor logic of the Component at any step in the hierarchy.</p>\n\n<p>The initComponent method <strong>must</strong> contain a call to <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a> in order\nto ensure that the parent class' initComponent method is also called.</p>\n\n<p>All config options passed to the constructor are applied to <code>this</code> before initComponent is called,\nso you can simply access them with <code>this.someOption</code>.</p>\n\n<p>The following example demonstrates using a dynamic string for the text of a button at the time of\ninstantiation of the class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('DynamicButtonText', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n\n    initComponent: function() {\n        this.text = new Date();\n        this.renderTo = <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>();\n        this.callParent();\n    }\n});\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function() {\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('DynamicButtonText');\n});\n</code></pre>\n"},"initItems":{"!type":"fn() -> !this"},"insert":{"!type":"fn(index: number, component: +Ext.Component|?) -> +Ext.Component","!doc":"<p>Inserts a Component into this Container at a specified index. Fires the\n<a href=\"#!/api/Ext.container.AbstractContainer-event-beforeadd\" rel=\"Ext.container.AbstractContainer-event-beforeadd\" class=\"docClass\">beforeadd</a> event before inserting, then fires the <a href=\"#!/api/Ext.container.AbstractContainer-event-add\" rel=\"Ext.container.AbstractContainer-event-add\" class=\"docClass\">add</a>\nevent after the Component has been inserted.</p>\n"},"isAncestor":{"!type":"fn(possibleDescendant: +Ext.Component) -> !this","!doc":"<p>Determines whether <strong>this Container</strong> is an ancestor of the passed Component.\nThis will return <code>true</code> if the passed Component is anywhere within the subtree\nbeneath this Container.</p>\n"},"lookupComponent":{"!type":"fn(comp: ?) -> !this"},"move":{"!type":"fn(fromIdx: number|+Ext.Component, toIdx: number) -> +Ext.Component","!doc":"<p>Moves a Component within the Container</p>\n"},"nextChild":{"!type":"fn(child: ?, selector: ?) -> !this"},"onAdd":{"!type":"fn(component: +Ext.Component, position: number) -> !this","!doc":"<p>This method is invoked after a new Component has been added. It\nis passed the Component which has been added. This method may\nbe used to update any internal structure which may depend upon\nthe state of the child items.</p>\n"},"onBeforeAdd":{"!type":"fn(item: +Ext.Component) -> !this","!doc":"<p>This method is invoked before adding a new child Component. It\nis passed the new Component, and may be used to modify the\nComponent, or prepare the Container in some way. Returning\nfalse aborts the add operation.</p>\n"},"onMove":{"!type":"fn() -> !this"},"onPosition":{"!type":"fn() -> !this","!doc":"<p>Called after the component is moved, this method is empty by default but can be implemented by any\nsubclass that needs to perform custom logic after a move occurs.</p>\n"},"onRemove":{"!type":"fn(component: +Ext.Component, autoDestroy: bool) -> !this","!doc":"<p>This method is invoked after a new Component has been\nremoved. It is passed the Component which has been\nremoved. This method may be used to update any internal\nstructure which may depend upon the state of the child items.</p>\n"},"onResize":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the resize operation.</p>\n\n<p>Called when Ext.resizer.Resizer#drag event is fired.</p>\n"},"prepareItems":{"!type":"fn(items: ?, applyDefaults: ?) -> !this"},"prevChild":{"!type":"fn(child: ?, selector: ?) -> !this"},"remove":{"!type":"fn(this: +Ext.container.Container, component: +Ext.Component, eOpts: ?)","!doc":"<p>Fires after any <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> is removed from the container.</p>\n\n<p><strong>This event bubbles:</strong> 'remove' will also be fired when Component is removed from any of\nthe child containers or their children or ...</p>\n"},"removeAll":{"!type":"fn(autoDestroy?: bool) -> [+Ext.Component]","!doc":"<p>Removes all components from this container.</p>\n"},"repositionFloatingItems":{"!type":"fn() -> !this"},"setLayout":{"!type":"fn(layout: ?) -> !this"},"setupRenderTpl":{"!type":"fn(renderTpl: ?) -> !this"},"afterlayout":{"!type":"fn(this: +Ext.container.Container, layout: +Ext.layout.container.Container, eOpts: ?)","!doc":"<p>Fires when the components in this container are arranged by the associated layout manager.</p>\n"},"beforeadd":{"!type":"fn(this: +Ext.container.Container, component: +Ext.Component, index: number, eOpts: ?)","!doc":"<p>Fires before any <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> is added or inserted into the container.\nA handler can return false to cancel the add.</p>\n"},"beforeremove":{"!type":"fn(this: +Ext.container.Container, component: +Ext.Component, eOpts: ?)","!doc":"<p>Fires before any <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> is removed from the container.  A handler can return\nfalse to cancel the remove.</p>\n"}}},"ButtonGroup":{"!doc":"<p>Provides a container for arranging a group of related Buttons in a tabular manner.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>', {\n    title: 'Panel with ButtonGroup',\n    width: 300,\n    height:200,\n    renderTo: document.body,\n    bodyPadding: 10,\n    html: 'HTML Panel Content',\n    tbar: [{\n        xtype: 'buttongroup',\n        columns: 3,\n        title: 'Clipboard',\n        items: [{\n            text: 'Paste',\n            scale: 'large',\n            rowspan: 3,\n            iconCls: 'add',\n            iconAlign: 'top',\n            cls: 'btn-as-arrow'\n        },{\n            xtype:'splitbutton',\n            text: 'Menu Button',\n            scale: 'large',\n            rowspan: 3,\n            iconCls: 'add',\n            iconAlign: 'top',\n            arrowAlign:'bottom',\n            menu: [{ text: 'Menu Item 1' }]\n        },{\n            xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]\n        },{\n            text: 'Copy', iconCls: 'add16'\n        },{\n            text: 'Format', iconCls: 'add16'\n        }]\n    }]\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_container_ButtonGroup_cfg)","prototype":{"!proto":"Ext.panel.Panel.prototype","animCollapse":{"!type":"bool"},"baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this panel's element.</p>\n"},"closable":{"!type":"bool"},"collapseMode":{"!type":"bool"},"collapsible":{"!type":"bool"},"columns":{"!type":"number","!doc":"<p>The <code>columns</code> configuration property passed to the <a href=\"#!/api/Ext.container.ButtonGroup-cfg-layout\" rel=\"Ext.container.ButtonGroup-cfg-layout\" class=\"docClass\">configured layout manager</a>.\nSee <a href=\"#!/api/Ext.layout.container.Table-cfg-columns\" rel=\"Ext.layout.container.Table-cfg-columns\" class=\"docClass\">Ext.layout.container.Table.columns</a>.</p>\n"},"defaultButtonUI":{"!type":"string","!doc":"<p>A default <a href=\"#!/api/Ext.Component-cfg-ui\" rel=\"Ext.Component-cfg-ui\" class=\"docClass\">ui</a> to use for <a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Button</a> items</p>\n"},"defaultType":{"!type":"string","!doc":"<p>The default <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">xtype</a> of child Components to create in this Container when\na child item is specified as a raw configuration object, rather than as an instantiated Component.</p>\n"},"frame":{"!type":"bool","!doc":"<p>True to apply a frame to the panel.</p>\n"},"layout":{"!type":"+Ext.enums.Layout|?","!doc":"<p><strong>Important</strong>: In order for child items to be correctly sized and\npositioned, typically a layout manager <strong>must</strong> be specified through\nthe <code>layout</code> configuration option.</p>\n\n<p>The sizing and positioning of child <a href=\"#!/api/Ext.container.ButtonGroup-cfg-items\" rel=\"Ext.container.ButtonGroup-cfg-items\" class=\"docClass\">items</a> is the responsibility of\nthe Container's layout manager which creates and manages the type of layout\nyou have in mind.  For example:</p>\n\n<p>If the layout configuration is not explicitly specified for\na general purpose container (e.g. Container or Panel) the\n<a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used\nwhich does nothing but render child components sequentially into the\nContainer (no sizing or positioning will be performed in this situation).</p>\n\n<p><strong>layout</strong> may be specified as either as an Object or as a String:</p>\n\n<h2>Specify as an Object</h2>\n\n<p>Example usage:</p>\n\n<pre><code>layout: {\n    type: 'vbox',\n    align: 'left'\n}\n</code></pre>\n\n<ul>\n<li><p><strong>type</strong></p>\n\n<p>The layout type to be used for this container.  If not specified,\na default <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">Ext.layout.container.Auto</a> will be created and used.</p>\n\n<p>Valid layout <code>type</code> values are listed in <a href=\"#!/api/Ext.enums.Layout\" rel=\"Ext.enums.Layout\" class=\"docClass\">Ext.enums.Layout</a>.</p></li>\n<li><p>Layout specific configuration properties</p>\n\n<p>Additional layout specific configuration properties may also be\nspecified. For complete details regarding the valid config options for\neach layout type, see the layout class corresponding to the <code>type</code>\nspecified.</p></li>\n</ul>\n\n\n<h2>Specify as a String</h2>\n\n<p>Example usage:</p>\n\n<pre><code>layout: 'vbox'\n</code></pre>\n\n<ul>\n<li><p><strong>layout</strong></p>\n\n<p>The layout <code>type</code> to be used for this container (see <a href=\"#!/api/Ext.enums.Layout\" rel=\"Ext.enums.Layout\" class=\"docClass\">Ext.enums.Layout</a>\nfor list of valid values).</p>\n\n<p>Additional layout specific configuration properties. For complete\ndetails regarding the valid config options for each layout type, see the\nlayout class corresponding to the <code>layout</code> specified.</p></li>\n</ul>\n\n\n<h2>Configuring the default layout type</h2>\n\n<p>If a certain Container class has a default layout (For example a <a href=\"#!/api/Ext.toolbar.Toolbar\" rel=\"Ext.toolbar.Toolbar\" class=\"docClass\">Toolbar</a>\nwith a default <code>Box</code> layout), then to simply configure the default layout,\nuse an object, but without the <code>type</code> property:</p>\n\n<pre><code>xtype: 'toolbar',\nlayout: {\n    pack: 'center'\n}\n</code></pre>\n"},"titleAlign":{"!type":"string","!doc":"<p>The alignment of the title text within the available space between the\nicon and the tools.</p>\n\n<p>May be <code>\"left\"</code>, <code>\"right\"</code> or <code>\"center\"</code>. Defaults to the browser's natural\nbehavior depending on the css direction property - <code>\"left\"</code> when direction\nis ltr and <code>\"right\"</code> when direction is rtl\n(see <a href=\"#!/api/Ext.AbstractComponent-cfg-rtl\" rel=\"Ext.AbstractComponent-cfg-rtl\" class=\"docClass\">Ext.AbstractComponent.rtl</a>).</p>\n"},"tools":{"!type":"[?]"},"noTitleCls":{"!type":"string"},"applyDefaults":{"!type":"fn(c: ?) -> !this","!doc":"<p>private</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>The initComponent template method is an important initialization step for a Component. It is intended to be\nimplemented by each subclass of <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> to provide any needed constructor logic. The\ninitComponent method of the class being created is called first, with each initComponent method\nup the hierarchy to <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> being called thereafter. This makes it easy to implement and,\nif needed, override the constructor logic of the Component at any step in the hierarchy.</p>\n\n<p>The initComponent method <strong>must</strong> contain a call to <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a> in order\nto ensure that the parent class' initComponent method is also called.</p>\n\n<p>All config options passed to the constructor are applied to <code>this</code> before initComponent is called,\nso you can simply access them with <code>this.someOption</code>.</p>\n\n<p>The following example demonstrates using a dynamic string for the text of a button at the time of\ninstantiation of the class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('DynamicButtonText', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n\n    initComponent: function() {\n        this.text = new Date();\n        this.renderTo = <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>();\n        this.callParent();\n    }\n});\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function() {\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('DynamicButtonText');\n});\n</code></pre>\n"},"onBeforeAdd":{"!type":"fn(component: ?) -> !this","!doc":"<p>private</p>\n"}}},"Container":{"!doc":"<p>Base class for any <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> that may contain other Components. Containers handle the basic behavior of\ncontaining items, namely adding, inserting and removing items.</p>\n\n<p>The most commonly used Container classes are <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>, <a href=\"#!/api/Ext.window.Window\" rel=\"Ext.window.Window\" class=\"docClass\">Ext.window.Window</a> and\n<a href=\"#!/api/Ext.tab.Panel\" rel=\"Ext.tab.Panel\" class=\"docClass\">Ext.tab.Panel</a>. If you do not need the capabilities offered by the aforementioned classes you can create a\nlightweight Container to be encapsulated by an HTML element to your specifications by using the\n<a href=\"#!/api/Ext.Component-cfg-autoEl\" rel=\"Ext.Component-cfg-autoEl\" class=\"docClass\">autoEl</a> config option.</p>\n\n<p>The code below illustrates how to explicitly create a Container:</p>\n\n<pre class='inline-example '><code>// Explicitly create a Container\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>', {\n    layout: {\n        type: 'hbox'\n    },\n    width: 400,\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    border: 1,\n    style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},\n    defaults: {\n        labelWidth: 80,\n        // implicitly create Container by specifying xtype\n        xtype: 'datefield',\n        flex: 1,\n        style: {\n            padding: '10px'\n        }\n    },\n    items: [{\n        xtype: 'datefield',\n        name: 'startDate',\n        fieldLabel: 'Start date'\n    },{\n        xtype: 'datefield',\n        name: 'endDate',\n        fieldLabel: 'End date'\n    }]\n});\n</code></pre>\n\n<h2>Layout</h2>\n\n<p>Container classes delegate the rendering of child Components to a layout manager class which must be configured into\nthe Container using the <code><a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">layout</a></code> configuration property.</p>\n\n<p>When either specifying child <code><a href=\"#!/api/Ext.container.Container-cfg-items\" rel=\"Ext.container.Container-cfg-items\" class=\"docClass\">items</a></code> of a Container, or dynamically <a href=\"#!/api/Ext.container.Container-method-add\" rel=\"Ext.container.Container-method-add\" class=\"docClass\">adding</a> Components to a\nContainer, remember to consider how you wish the Container to arrange those child elements, and whether those child\nelements need to be sized using one of Ext's built-in <code><a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">layout</a></code> schemes. By default, Containers use the\n<a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">Auto</a> scheme which only renders child components, appending them one after the other\ninside the Container, and <strong>does not apply any sizing</strong> at all.</p>\n\n<p>A common mistake is when a developer neglects to specify a <code><a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">layout</a></code> (e.g. widgets like GridPanels or\nTreePanels are added to Containers for which no <code><a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">layout</a></code> has been specified). If a Container is left to\nuse the default <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">Auto</a> scheme, none of its child components will be resized, or changed in\nany way when the Container is resized.</p>\n\n<p>Certain layout managers allow dynamic addition of child components. Those that do include\n<a href=\"#!/api/Ext.layout.container.Card\" rel=\"Ext.layout.container.Card\" class=\"docClass\">Ext.layout.container.Card</a>, <a href=\"#!/api/Ext.layout.container.Anchor\" rel=\"Ext.layout.container.Anchor\" class=\"docClass\">Ext.layout.container.Anchor</a>, <a href=\"#!/api/Ext.layout.container.VBox\" rel=\"Ext.layout.container.VBox\" class=\"docClass\">Ext.layout.container.VBox</a>,\n<a href=\"#!/api/Ext.layout.container.HBox\" rel=\"Ext.layout.container.HBox\" class=\"docClass\">Ext.layout.container.HBox</a>, and <a href=\"#!/api/Ext.layout.container.Table\" rel=\"Ext.layout.container.Table\" class=\"docClass\">Ext.layout.container.Table</a>. For example:</p>\n\n<pre><code>//  Create the GridPanel.\nvar myNewGrid = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Ext.grid.Panel</a>', {\n    store: myStore,\n    headers: myHeaders,\n    title: 'Results', // the title becomes the title of the tab\n});\n\nmyTabPanel.add(myNewGrid); // <a href=\"#!/api/Ext.tab.Panel\" rel=\"Ext.tab.Panel\" class=\"docClass\">Ext.tab.Panel</a> implicitly uses <a href=\"#!/api/Ext.layout.container.Card\" rel=\"Ext.layout.container.Card\" class=\"docClass\">Card</a>\nmyTabPanel.<a href=\"#!/api/Ext.tab.Panel-method-setActiveTab\" rel=\"Ext.tab.Panel-method-setActiveTab\" class=\"docClass\">setActiveTab</a>(myNewGrid);\n</code></pre>\n\n<p>The example above adds a newly created GridPanel to a TabPanel. Note that a TabPanel uses <a href=\"#!/api/Ext.layout.container.Card\" rel=\"Ext.layout.container.Card\" class=\"docClass\">Ext.layout.container.Card</a> as its layout manager which means all its child items are sized to <a href=\"#!/api/Ext.layout.container.Fit\" rel=\"Ext.layout.container.Fit\" class=\"docClass\">fit</a> exactly into its client area.</p>\n\n<p><strong><em>Overnesting is a common problem</em></strong>. An example of overnesting occurs when a GridPanel is added to a TabPanel by\nwrapping the GridPanel <em>inside</em> a wrapping Panel (that has no <code><a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">layout</a></code> specified) and then add that\nwrapping Panel to the TabPanel. The point to realize is that a GridPanel <strong>is</strong> a Component which can be added\ndirectly to a Container. If the wrapping Panel has no <code><a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">layout</a></code> configuration, then the overnested\nGridPanel will not be sized as expected.</p>\n\n<h2>Adding via remote configuration</h2>\n\n<p>A server side script can be used to add Components which are generated dynamically on the server. An example of\nadding a GridPanel to a TabPanel where the GridPanel is generated by the server based on certain parameters:</p>\n\n<pre><code>// execute an Ajax request to invoke server side script:\n<a href=\"#!/api/Ext.Ajax-method-request\" rel=\"Ext.Ajax-method-request\" class=\"docClass\">Ext.Ajax.request</a>({\n    url: 'gen-invoice-grid.php',\n    // send additional parameters to instruct server script\n    params: {\n        startDate: <a href=\"#!/api/Ext-method-getCmp\" rel=\"Ext-method-getCmp\" class=\"docClass\">Ext.getCmp</a>('start-date').getValue(),\n        endDate: <a href=\"#!/api/Ext-method-getCmp\" rel=\"Ext-method-getCmp\" class=\"docClass\">Ext.getCmp</a>('end-date').getValue()\n    },\n    // process the response object to add it to the TabPanel:\n    success: function(xhr) {\n        var newComponent = eval(xhr.responseText); // see discussion below\n        myTabPanel.add(newComponent); // add the component to the TabPanel\n        myTabPanel.setActiveTab(newComponent);\n    },\n    failure: function() {\n        <a href=\"#!/api/Ext.MessageBox-method-alert\" rel=\"Ext.MessageBox-method-alert\" class=\"docClass\">Ext.Msg.alert</a>(\"Grid create failed\", \"Server communication failure\");\n    }\n});\n</code></pre>\n\n<p>The server script needs to return a JSON representation of a configuration object, which, when decoded will return a\nconfig object with an <a href=\"#!/api/Ext.Component-cfg-xtype\" rel=\"Ext.Component-cfg-xtype\" class=\"docClass\">xtype</a>. The server might return the following JSON:</p>\n\n<pre><code>{\n    \"xtype\": 'grid',\n    \"title\": 'Invoice Report',\n    \"store\": {\n        \"model\": 'Invoice',\n        \"proxy\": {\n            \"type\": 'ajax',\n            \"url\": 'get-invoice-data.php',\n            \"reader\": {\n                \"type\": 'json'\n                \"record\": 'transaction',\n                \"idProperty\": 'id',\n                \"totalRecords\": 'total'\n            })\n        },\n        \"autoLoad\": {\n            \"params\": {\n                \"startDate\": '01/01/2008',\n                \"endDate\": '01/31/2008'\n            }\n        }\n    },\n    \"headers\": [\n        {\"header\": \"Customer\", \"width\": 250, \"dataIndex\": 'customer', \"sortable\": true},\n        {\"header\": \"Invoice Number\", \"width\": 120, \"dataIndex\": 'invNo', \"sortable\": true},\n        {\"header\": \"Invoice Date\", \"width\": 100, \"dataIndex\": 'date', \"renderer\": <a href=\"#!/api/Ext.util.Format-method-dateRenderer\" rel=\"Ext.util.Format-method-dateRenderer\" class=\"docClass\">Ext.util.Format.dateRenderer</a>('M d, y'), \"sortable\": true},\n        {\"header\": \"Value\", \"width\": 120, \"dataIndex\": 'value', \"renderer\": 'usMoney', \"sortable\": true}\n    ]\n}\n</code></pre>\n\n<p>When the above code fragment is passed through the <code>eval</code> function in the success handler of the Ajax request, the\nresult will be a config object which, when added to a Container, will cause instantiation of a GridPanel. <strong>Be sure\nthat the Container is configured with a layout which sizes and positions the child items to your requirements.</strong></p>\n\n<p><strong>Note:</strong> since the code above is <em>generated</em> by a server script, the <code>autoLoad</code> params for the Store, the user's\npreferred date format, the metadata to allow generation of the Model layout, and the ColumnModel can all be generated\ninto the code since these are all known on the server.</p>\n","!type":"fn(config: +Ext.Element|string|Ext_container_Container_cfg)","prototype":{"!proto":"Ext.container.AbstractContainer.prototype","anchorSize":{"!type":"number|?","!doc":"<p>Defines the anchoring size of container.\nEither a number to define the width of the container or an object with <code>width</code> and <code>height</code> fields.</p>\n"},"getChildByElement":{"!type":"fn(el: +Ext.Element|+HTMLElement|string, deep: bool) -> +Ext.Component","!doc":"<p>Return the immediate child Component in which the passed element is located.</p>\n"}}},"DockingContainer":{"prototype":{"defaultDockWeights":{"!type":"?","!doc":"<p>This object holds the default weights applied to dockedItems that have no weight. These start with a\nweight of 1, to allow negative weights to insert before top items and are odd numbers\nso that even weights can be used to get between different dock orders.</p>\n\n<p>To make default docking order match border layout, do this:</p>\n\n<pre><code> Ext.panel.AbstractPanel.prototype.defaultDockWeights = { top: 1, bottom: 3, left: 5, right: 7 };\n</code></pre>\n\n<p>Changing these defaults as above or individually on this object will effect all Panels.\nTo change the defaults on a single panel, you should replace the entire object:</p>\n\n<pre><code> initComponent: function () {\n     // NOTE: Don't change members of defaultDockWeights since the object is shared.\n     this.defaultDockWeights = { top: 1, bottom: 3, left: 5, right: 7 };\n\n     this.callParent();\n }\n</code></pre>\n\n<p>To change only one of the default values, you do this:</p>\n\n<pre><code> initComponent: function () {\n     // NOTE: Don't change members of defaultDockWeights since the object is shared.\n     this.defaultDockWeights = <a href=\"#!/api/Ext-method-applyIf\" rel=\"Ext-method-applyIf\" class=\"docClass\">Ext.applyIf</a>({ top: 10 }, this.defaultDockWeights);\n\n     this.callParent();\n }\n</code></pre>\n"},"dockOrder":{"!type":"?","!doc":"<p>Values to decide which side of the body element docked items must go\nThis overides any weight. A left/top will <em>always</em> sort before a right/bottom\nregardless of any weight value. Weights sort at either side of the \"body\" dividing point.</p>\n"},"horizontalDocks":{"!type":"number","!doc":"<p>Number of dock 'left' and 'right' items.</p>\n"},"isDockingContainer":{"!type":"bool","!doc":"<p>End Definitions</p>\n"},"addDocked":{"!type":"fn(component: ?|[?], pos?: number) -> [+Ext.Component]","!doc":"<p>Adds docked item(s) to the container.</p>\n"},"destroyDockedItems":{"!type":"fn() -> !this"},"doRenderDockedItems":{"!type":"fn(out: ?, renderData: ?, after: ?) -> !this"},"getDockedComponent":{"!type":"fn(comp: string|number) -> +Ext.Component","!doc":"<p>Finds a docked component by id, itemId or position. Also see <a href=\"#!/api/Ext.container.DockingContainer-method-getDockedItems\" rel=\"Ext.container.DockingContainer-method-getDockedItems\" class=\"docClass\">getDockedItems</a></p>\n"},"getDockedItems":{"!type":"fn(selector: string, beforeBody: bool) -> [+Ext.Component]","!doc":"<p>Retrieves an array of all currently docked Components.</p>\n\n<p>For example to find a toolbar that has been docked at top:</p>\n\n<pre><code>panel.getDockedItems('toolbar[dock=\"top\"]');\n</code></pre>\n"},"getDockingRefItems":{"!type":"fn(deep: ?, containerItems: ?) -> !this"},"initDockingItems":{"!type":"fn() -> !this"},"insertDocked":{"!type":"fn(pos: number, component: ?|[?]) -> !this","!doc":"<p>Inserts docked item(s) to the panel at the indicated position.</p>\n"},"onDockedAdd":{"!type":"fn(component: +Ext.Component) -> !this","!doc":"<p>Invoked after a docked item is added to the Panel.</p>\n"},"onDockedRemove":{"!type":"fn(component: +Ext.Component) -> !this","!doc":"<p>Invoked after a docked item is removed from the Panel.</p>\n"},"removeDocked":{"!type":"fn(item: +Ext.Component, autoDestroy?: bool) -> !this","!doc":"<p>Removes the docked item from the panel.</p>\n"},"setupDockingRenderTpl":{"!type":"fn(renderTpl: ?) -> !this"},"dockedadd":{"!type":"fn(this: +Ext.panel.Panel, component: +Ext.Component, index: number, eOpts: ?)","!doc":"<p>Fires when any <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> is added or inserted as a docked item.</p>\n"},"dockedremove":{"!type":"fn(this: +Ext.panel.Panel, component: +Ext.Component, eOpts: ?)","!doc":"<p>Fires when any <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> is removed from the docked items.</p>\n"}}},"Monitor":{"!doc":"<p>This is a utility class for being able to track all items of a particular type\ninside any level at a container. This can be used in favour of bubbling add/remove events\nwhich can add a large perf cost when implemented globally</p>\n","!type":"fn(config: Ext_container_Monitor_cfg)","prototype":{"!proto":"Ext.Base.prototype","addHandler":{"!type":"?"},"disabled":{"!type":"number"},"removeHandler":{"!type":"?"},"scope":{"!type":"?"},"selector":{"!type":"string"},"target":{"!type":"?"},"bind":{"!type":"fn(target: ?) -> !this"},"disable":{"!type":"fn() -> !this"},"enable":{"!type":"fn() -> !this"},"getItems":{"!type":"fn() -> !this"},"handleAdd":{"!type":"fn(ct: ?, comp: ?) -> !this"},"handleRemove":{"!type":"fn(ct: ?, comp: ?) -> !this"},"invalidateItems":{"!type":"fn() -> !this"},"onContainerAdd":{"!type":"fn(ct: ?, preventChildren: ?) -> !this"},"onContainerRemove":{"!type":"fn(ct: ?, comp: ?) -> !this"},"onItemAdd":{"!type":"fn(ct: ?, comp: ?) -> !this"},"onItemRemove":{"!type":"fn(ct: ?, comp: ?) -> !this"},"removeCtListeners":{"!type":"fn(comp: ?) -> !this"},"unbind":{"!type":"fn() -> !this"}}},"Viewport":{"!doc":"<p>A specialized container representing the viewable application area (the browser viewport).</p>\n\n<p>The Viewport renders itself to the document body, and automatically sizes itself to the size of\nthe browser viewport and manages window resizing. There may only be one Viewport created\nin a page.</p>\n\n<p>Like any <a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Container</a>, a Viewport will only perform sizing and positioning\non its child Components if you configure it with a <a href=\"#!/api/Ext.container.Viewport-cfg-layout\" rel=\"Ext.container.Viewport-cfg-layout\" class=\"docClass\">layout</a>.</p>\n\n<p>A Common layout used with Viewports is <a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">border layout</a>, but if the\nrequired layout is simpler, a different layout should be chosen.</p>\n\n<p>For example, to simply make a single child item occupy all available space, use\n<a href=\"#!/api/Ext.layout.container.Fit\" rel=\"Ext.layout.container.Fit\" class=\"docClass\">fit layout</a>.</p>\n\n<p>To display one \"active\" item at full size from a choice of several child items, use\n<a href=\"#!/api/Ext.layout.container.Card\" rel=\"Ext.layout.container.Card\" class=\"docClass\">card layout</a>.</p>\n\n<p>Inner layouts are available because all <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Panel</a>s\nadded to the Viewport, either through its <a href=\"#!/api/Ext.container.Viewport-cfg-items\" rel=\"Ext.container.Viewport-cfg-items\" class=\"docClass\">items</a>, or the <a href=\"#!/api/Ext.container.Viewport-method-add\" rel=\"Ext.container.Viewport-method-add\" class=\"docClass\">add</a>\nmethod of any of its child Panels may themselves have a layout.</p>\n\n<p>The Viewport does not provide scrolling, so child Panels within the Viewport should provide\nfor scrolling if needed using the <a href=\"#!/api/Ext.container.Viewport-cfg-autoScroll\" rel=\"Ext.container.Viewport-cfg-autoScroll\" class=\"docClass\">autoScroll</a> config.</p>\n\n<p>An example showing a classic application border layout:</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.container.Viewport\" rel=\"Ext.container.Viewport\" class=\"docClass\">Ext.container.Viewport</a>', {\n    layout: 'border',\n    items: [{\n        region: 'north',\n        html: '&lt;h1 class=\"x-panel-header\"&gt;Page Title&lt;/h1&gt;',\n        border: false,\n        margins: '0 0 5 0'\n    }, {\n        region: 'west',\n        collapsible: true,\n        title: 'Navigation',\n        width: 150\n        // could use a TreePanel or AccordionLayout for navigational items\n    }, {\n        region: 'south',\n        title: 'South Panel',\n        collapsible: true,\n        html: 'Information goes here',\n        split: true,\n        height: 100,\n        minHeight: 100\n    }, {\n        region: 'east',\n        title: 'East Panel',\n        collapsible: true,\n        split: true,\n        width: 150\n    }, {\n        region: 'center',\n        xtype: 'tabpanel', // TabPanel itself has no title\n        activeTab: 0,      // First tab active by default\n        items: {\n            title: 'Default Tab',\n            html: 'The first tab\\'s content. Others may be added dynamically'\n        }\n    }]\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_container_Viewport_cfg)","prototype":{"!proto":"Ext.container.Container.prototype","allowDomMove":{"!type":"bool"},"applyTo":{"!type":"string|+HTMLElement|+Ext.Element"},"height":{"!type":"number","!doc":"<p>Sets itself to viewport width.</p>\n"},"renderTo":{"!type":"string|+HTMLElement|+Ext.Element","!doc":"<p>Always renders to document body.</p>\n"},"width":{"!type":"number","!doc":"<p>Sets itself to viewport height.</p>\n"},"ariaRole":{"!type":"string"},"isViewport":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated Viewport, or subclass thereof.</p>\n"},"preserveElOnDestroy":{"!type":"bool"},"viewportCls":{"!type":"string"},"afterFirstLayout":{"!type":"fn() -> !this"},"applyTargetCls":{"!type":"fn(targetCls: ?) -> !this","!doc":"<p>override here to prevent an extraneous warning</p>\n"},"beforeDestroy":{"!type":"fn() -> !this","!doc":"<p>Invoked before the Component is destroyed.</p>\n"},"fireResize":{"!type":"fn(width: ?, height: ?) -> !this"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>The initComponent template method is an important initialization step for a Component. It is intended to be\nimplemented by each subclass of <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> to provide any needed constructor logic. The\ninitComponent method of the class being created is called first, with each initComponent method\nup the hierarchy to <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> being called thereafter. This makes it easy to implement and,\nif needed, override the constructor logic of the Component at any step in the hierarchy.</p>\n\n<p>The initComponent method <strong>must</strong> contain a call to <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a> in order\nto ensure that the parent class' initComponent method is also called.</p>\n\n<p>All config options passed to the constructor are applied to <code>this</code> before initComponent is called,\nso you can simply access them with <code>this.someOption</code>.</p>\n\n<p>The following example demonstrates using a dynamic string for the text of a button at the time of\ninstantiation of the class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('DynamicButtonText', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n\n    initComponent: function() {\n        this.text = new Date();\n        this.renderTo = <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>();\n        this.callParent();\n    }\n});\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function() {\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('DynamicButtonText');\n});\n</code></pre>\n"},"initHierarchyState":{"!type":"fn(hierarchyState: ?) -> !this","!doc":"<p>Called by <a href=\"#!/api/Ext.container.Viewport-method-getHierarchyState\" rel=\"Ext.container.Viewport-method-getHierarchyState\" class=\"docClass\">getHierarchyState</a> to initialize the hierarchyState the first\ntime it is requested.</p>\n\n<p><strong>Overridden in Ext.rtl.AbstractComponent.</strong></p>\n"},"onRender":{"!type":"fn() -> !this","!doc":"<p>Template method called when this Component's DOM structure is created.</p>\n\n<p>At this point, this Component's (and all descendants') DOM structure <em>exists</em> but it has not\nbeen layed out (positioned and sized).</p>\n\n<p>Subclasses which override this to gain access to the structure at render time should\ncall the parent class's method before attempting to access any child elements of the Component.</p>\n"}}}},"data":{"AbstractStore":{"!doc":"<p>AbstractStore is a superclass of <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a> and <a href=\"#!/api/Ext.data.TreeStore\" rel=\"Ext.data.TreeStore\" class=\"docClass\">Ext.data.TreeStore</a>. It's never used directly,\nbut offers a set of methods used by both of those subclasses.</p>\n\n<p>We've left it here in the docs for reference purposes, but unless you need to make a whole new type of Store, what\nyou're probably looking for is <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>. If you're still interested, here's a brief description of what\nAbstractStore is and is not.</p>\n\n<p>AbstractStore provides the basic configuration for anything that can be considered a Store. It expects to be\ngiven a <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Model</a> that represents the type of data in the Store. It also expects to be given a\n<a href=\"#!/api/Ext.data.proxy.Proxy\" rel=\"Ext.data.proxy.Proxy\" class=\"docClass\">Proxy</a> that handles the loading of data into the Store.</p>\n\n<p>AbstractStore provides a few helpful methods such as <a href=\"#!/api/Ext.data.AbstractStore-method-load\" rel=\"Ext.data.AbstractStore-method-load\" class=\"docClass\">load</a> and <a href=\"#!/api/Ext.data.AbstractStore-method-sync\" rel=\"Ext.data.AbstractStore-method-sync\" class=\"docClass\">sync</a>, which load and save data\nrespectively, passing the requests through the configured <a href=\"#!/api/Ext.data.AbstractStore-cfg-proxy\" rel=\"Ext.data.AbstractStore-cfg-proxy\" class=\"docClass\">proxy</a>. Both built-in Store subclasses add extra\nbehavior to each of these functions. Note also that each AbstractStore subclass has its own way of storing data -\nin <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a> the data is saved as a flat <a href=\"#!/api/Ext.util.MixedCollection\" rel=\"Ext.util.MixedCollection\" class=\"docClass\">MixedCollection</a>, whereas in\n<a href=\"#!/api/Ext.data.TreeStore\" rel=\"Ext.data.TreeStore\" class=\"docClass\">TreeStore</a> we use a <a href=\"#!/api/Ext.data.Tree\" rel=\"Ext.data.Tree\" class=\"docClass\">Ext.data.Tree</a> to maintain the data's hierarchy.</p>\n\n<p>The store provides filtering and sorting support. This sorting/filtering can happen on the client side\nor can be completed on the server. This is controlled by the <a href=\"#!/api/Ext.data.Store-cfg-remoteSort\" rel=\"Ext.data.Store-cfg-remoteSort\" class=\"docClass\">remoteSort</a> and\n<a href=\"#!/api/Ext.data.Store-cfg-remoteFilter\" rel=\"Ext.data.Store-cfg-remoteFilter\" class=\"docClass\">remoteFilter</a> config options. For more information see the <a href=\"#!/api/Ext.data.AbstractStore-method-sort\" rel=\"Ext.data.AbstractStore-method-sort\" class=\"docClass\">sort</a> and\n<a href=\"#!/api/Ext.data.Store-method-filter\" rel=\"Ext.data.Store-method-filter\" class=\"docClass\">filter</a> methods.</p>\n","!type":"fn(config: Ext_data_AbstractStore_cfg)","prototype":{"!proto":"Ext.Base.prototype","autoLoad":{"!type":"bool|?","!doc":"<p>If data is not specified, and if autoLoad is true or an Object, this store's load method is automatically called\nafter creation. If the value of autoLoad is an Object, this Object will be passed to the store's load method.</p>\n"},"autoSync":{"!type":"bool","!doc":"<p>True to automatically sync the Store with its Proxy after every edit to one of its Records. Defaults to false.</p>\n"},"batchUpdateMode":{"!type":"string","!doc":"<p>Sets the updating behavior based on batch synchronization. 'operation' (the default) will update the Store's\ninternal representation of the data after each operation of the batch has completed, 'complete' will wait until\nthe entire batch has been completed before updating the Store's data. 'complete' is a good choice for local\nstorage proxies, 'operation' is better for remote proxies, where there is a comparatively high latency.</p>\n"},"fields":{"!type":"[?]","!doc":"<p>This may be used in place of specifying a <a href=\"#!/api/Ext.data.AbstractStore-cfg-model\" rel=\"Ext.data.AbstractStore-cfg-model\" class=\"docClass\">model</a> configuration. The fields should be a\nset of <a href=\"#!/api/Ext.data.Field\" rel=\"Ext.data.Field\" class=\"docClass\">Ext.data.Field</a> configuration objects. The store will automatically create a <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>\nwith these fields. In general this configuration option should only be used for simple stores like\na two-field store of ComboBox. For anything more complicated, such as specifying a particular id property or\nassociations, a <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a> should be defined and specified for the <a href=\"#!/api/Ext.data.AbstractStore-cfg-model\" rel=\"Ext.data.AbstractStore-cfg-model\" class=\"docClass\">model</a>\nconfig.</p>\n"},"filterOnLoad":{"!type":"bool","!doc":"<p>If true, any filters attached to this Store will be run after loading data, before the datachanged event is fired.\nDefaults to true, ignored if <a href=\"#!/api/Ext.data.Store-cfg-remoteFilter\" rel=\"Ext.data.Store-cfg-remoteFilter\" class=\"docClass\">remoteFilter</a> is true</p>\n"},"filters":{"!type":"+Ext.util.MixedCollection","!doc":"<p>The collection of <a href=\"#!/api/Ext.util.Filter\" rel=\"Ext.util.Filter\" class=\"docClass\">Filters</a> currently applied to this Store</p>\n"},"model":{"!type":"string","!doc":"<p>Name of the <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Model</a> associated with this store.\nThe string is used as an argument for <a href=\"#!/api/Ext.ModelManager-method-getModel\" rel=\"Ext.ModelManager-method-getModel\" class=\"docClass\">Ext.ModelManager.getModel</a>.</p>\n"},"proxy":{"!type":"string|+Ext.data.proxy.Proxy|?","!doc":"<p>The Proxy to use for this Store. This can be either a string, a config object or a Proxy instance -\nsee <a href=\"#!/api/Ext.data.AbstractStore-method-setProxy\" rel=\"Ext.data.AbstractStore-method-setProxy\" class=\"docClass\">setProxy</a> for details.</p>\n"},"remoteFilter":{"!type":"bool","!doc":"<p>True to defer any filtering operation to the server. If false, filtering is done locally on the client.</p>\n"},"remoteSort":{"!type":"bool","!doc":"<p>True to defer any sorting operation to the server. If false, sorting is done locally on the client.</p>\n"},"sortOnLoad":{"!type":"bool","!doc":"<p>If true, any sorters attached to this Store will be run after loading data, before the datachanged event is fired.\nDefaults to true, igored if <a href=\"#!/api/Ext.data.Store-cfg-remoteSort\" rel=\"Ext.data.Store-cfg-remoteSort\" class=\"docClass\">remoteSort</a> is true</p>\n"},"statefulFilters":{"!type":"bool","!doc":"<p>Configure as <code>true</code> to have the filters saved when a client <a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">grid</a> saves its state.</p>\n"},"storeId":{"!type":"string","!doc":"<p>Unique identifier for this store. If present, this Store will be registered with the <a href=\"#!/api/Ext.data.StoreManager\" rel=\"Ext.data.StoreManager\" class=\"docClass\">Ext.data.StoreManager</a>,\nmaking it easy to reuse elsewhere.</p>\n\n<p>Note that when store is instatiated by Controller, the storeId will be overridden by the name of the store.</p>\n"},"defaultProxyType":{"!type":"string","!doc":"<p>The string type of the Proxy to create if none is specified. This defaults to creating a\n<a href=\"#!/api/Ext.data.proxy.Memory\" rel=\"Ext.data.proxy.Memory\" class=\"docClass\">memory proxy</a>.</p>\n"},"implicitModel":{"!type":"bool","!doc":"<p>True if a model was created implicitly for this Store. This happens if a fields array is passed to the Store's\nconstructor instead of a model constructor or name.</p>\n"},"isDestroyed":{"!type":"bool","!doc":"<p>True if the Store has already been destroyed. If this is true, the reference to Store should be deleted\nas it will not function correctly any more.</p>\n"},"isStore":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated Store, or subclass thereof.</p>\n"},"modelDefaults":{"!type":"?","!doc":"<p>A set of default values to be applied to every model instance added via <a href=\"#!/api/Ext.data.Store-method-insert\" rel=\"Ext.data.Store-method-insert\" class=\"docClass\">insert</a> or created\nvia <a href=\"#!/api/Ext.data.Store-method-createModel\" rel=\"Ext.data.Store-method-createModel\" class=\"docClass\">createModel</a>. This is used internally by associations to set foreign keys and\nother fields. See the Association classes source code for examples. This should not need to be used by application developers.</p>\n"},"removed":{"!type":"[+Ext.data.Model]","!doc":"<p>Temporary cache in which removed model instances are kept until successfully synchronised with a Proxy,\nat which point this is cleared.</p>\n"},"afterCommit":{"!type":"fn(record: +Ext.data.Model) -> !this","!doc":"<p>A model instance should call this method on the Store it has been <a href=\"#!/api/Ext.data.Model-method-join\" rel=\"Ext.data.Model-method-join\" class=\"docClass\">joined</a> to.</p>\n"},"afterEdit":{"!type":"fn(record: +Ext.data.Model, modifiedFieldNames: [string]) -> !this","!doc":"<p>A model instance should call this method on the Store it has been <a href=\"#!/api/Ext.data.Model-method-join\" rel=\"Ext.data.Model-method-join\" class=\"docClass\">joined</a> to.</p>\n"},"afterReject":{"!type":"fn(record: +Ext.data.Model) -> !this","!doc":"<p>A model instance should call this method on the Store it has been <a href=\"#!/api/Ext.data.Model-method-join\" rel=\"Ext.data.Model-method-join\" class=\"docClass\">joined</a> to..</p>\n"},"applyState":{"!type":"fn(state: ?) -> !this","!doc":"<p>Restores state to the passed state</p>\n"},"clearData":{"!type":"fn() -> !this","!doc":"<p>to be implemented by subclasses</p>\n"},"clearFilter":{"!type":"fn(supressEvent: ?) -> !this"},"create":{"!type":"fn(data: ?, options: ?) -> !this","!doc":"<p>saves any phantom records</p>\n"},"decodeFilters":{"!type":"fn(filters: [?]) -> [+Ext.util.Filter]","!doc":"<p>Normalizes an array of filter objects, ensuring that they are all <a href=\"#!/api/Ext.util.Filter\" rel=\"Ext.util.Filter\" class=\"docClass\">Ext.util.Filter</a> instances</p>\n"},"destroy":{"!type":"fn(options: ?) -> !this","!doc":"<p>tells the attached proxy to destroy the given records</p>\n"},"destroyStore":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"doSort":{"!type":"fn(sorterFn: ?) -> !this","!doc":"<p>private</p>\n"},"filter":{"!type":"fn(filters: ?, value: ?) -> !this"},"filterBy":{"!type":"fn(fn: ?, scope: ?) -> !this"},"filterNew":{"!type":"fn(item: ?) -> !this","!doc":"<p>Filter function for new records.</p>\n"},"filterUpdated":{"!type":"fn(item: ?) -> !this","!doc":"<p>Filter function for updated records.</p>\n"},"getBatchListeners":{"!type":"fn() -> ?","!doc":"<p>Returns an object which is passed in as the listeners argument to proxy.batch inside this.sync.\nThis is broken out into a separate function to allow for customisation of the listeners</p>\n"},"getById":{"!type":"fn() -> !this","!doc":"<p>to be implemented by subclasses</p>\n"},"getCount":{"!type":"fn() -> !this","!doc":"<p>to be implemented by subclasses</p>\n"},"getModifiedRecords":{"!type":"fn() -> [+Ext.data.Model]","!doc":"<p>Gets all <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">records</a> added or updated since the last commit. Note that the order of records\nreturned is not deterministic and does not indicate the order in which records were modified. Note also that\nremoved records are not included (use <a href=\"#!/api/Ext.data.AbstractStore-method-getRemovedRecords\" rel=\"Ext.data.AbstractStore-method-getRemovedRecords\" class=\"docClass\">getRemovedRecords</a> for that).</p>\n"},"getNewRecords":{"!type":"fn() -> [+Ext.data.Model]","!doc":"<p>Returns all Model instances that are either currently a phantom (e.g. have no id), or have an ID but have not\nyet been saved on this Store (this happens when adding a non-phantom record from another Store into this one)</p>\n"},"getProxy":{"!type":"fn() -> +Ext.data.proxy.Proxy","!doc":"<p>Returns the proxy currently attached to this proxy instance</p>\n"},"getRemovedRecords":{"!type":"fn() -> [+Ext.data.Model]","!doc":"<p>Returns any records that have been removed from the store but not yet destroyed on the proxy.</p>\n"},"getState":{"!type":"fn() -> !this","!doc":"<p>Returns the grouping, sorting and filtered state of this Store.</p>\n"},"getUpdatedRecords":{"!type":"fn() -> [+Ext.data.Model]","!doc":"<p>Returns all Model instances that have been updated in the Store but not yet synchronized with the Proxy</p>\n"},"isFiltered":{"!type":"fn() -> !this"},"isLoading":{"!type":"fn() -> bool","!doc":"<p>Returns true if the Store is currently performing a load operation</p>\n"},"load":{"!type":"fn(this: +Ext.data.Store, records: [+Ext.data.Model], successful: bool, eOpts: ?)","!doc":"<p>Fires whenever the store reads data from a remote data source.</p>\n"},"onBatchComplete":{"!type":"fn(batch: ?, operation: ?) -> !this","!doc":"<p>Attached as the 'complete' event listener to a proxy's Batch object. Iterates over the batch operations\nand updates the Store's internal data MixedCollection.</p>\n"},"onBatchException":{"!type":"fn(batch: ?, operation: ?) -> !this"},"onBatchOperationComplete":{"!type":"fn(batch: ?, operation: ?) -> !this","!doc":"<p>Attached as the 'operationcomplete' event listener to a proxy's Batch object. By default just calls through\nto onProxyWrite.</p>\n"},"onClassExtended":{"!type":"fn(cls: ?, data: ?, hooks: ?) -> !this"},"onCreateRecords":{"!type":"fn() -> !this","!doc":"<p>may be implemented by store subclasses</p>\n"},"onDestroyRecords":{"!type":"fn(records: [+Ext.data.Model], operation: +Ext.data.Operation, success: bool) -> !this","!doc":"<p>Removes any records when a write is returned from the server.</p>\n"},"onIdChanged":{"!type":"fn(model: ?, oldId: ?, newId: ?, oldInternalId: ?) -> !this"},"onMetaChange":{"!type":"fn(proxy: ?, meta: ?) -> !this","!doc":"<p>private</p>\n"},"onProxyWrite":{"!type":"fn(operation: ?) -> !this","!doc":"<p>Callback for any write Operation over the Proxy. Updates the Store's MixedCollection to reflect\nthe updates provided by the Proxy</p>\n"},"onUpdate":{"!type":"fn() -> !this"},"onUpdateRecords":{"!type":"fn() -> !this","!doc":"<p>may be implemented by store subclasses</p>\n"},"read":{"!type":"fn() -> !this"},"reload":{"!type":"fn(options: ?) -> !this","!doc":"<p>Reloads the store using the last options passed to the <a href=\"#!/api/Ext.data.AbstractStore-method-load\" rel=\"Ext.data.AbstractStore-method-load\" class=\"docClass\">load</a> method.</p>\n"},"removeAll":{"!type":"fn() -> !this","!doc":"<p>Removes all records from the store. This method does a \"fast remove\",\nindividual remove events are not called. The <a href=\"#!/api/Ext.data.AbstractStore-event-clear\" rel=\"Ext.data.AbstractStore-event-clear\" class=\"docClass\">clear</a> event is\nfired upon completion.</p>\n"},"resumeAutoSync":{"!type":"fn() -> !this","!doc":"<p>Resumes automatically syncing the Store with its Proxy.  Only applicable if <a href=\"#!/api/Ext.data.AbstractStore-cfg-autoSync\" rel=\"Ext.data.AbstractStore-cfg-autoSync\" class=\"docClass\">autoSync</a> is <code>true</code></p>\n"},"save":{"!type":"fn() -> !this","!doc":"<p>Saves all pending changes via the configured <a href=\"#!/api/Ext.data.AbstractStore-cfg-proxy\" rel=\"Ext.data.AbstractStore-cfg-proxy\" class=\"docClass\">proxy</a>. Use <a href=\"#!/api/Ext.data.AbstractStore-method-sync\" rel=\"Ext.data.AbstractStore-method-sync\" class=\"docClass\">sync</a> instead.</p>\n"},"setProxy":{"!type":"fn(proxy: string|?|+Ext.data.proxy.Proxy) -> +Ext.data.proxy.Proxy","!doc":"<p>Sets the Store's Proxy by string, config object or Proxy instance</p>\n"},"suspendAutoSync":{"!type":"fn() -> !this","!doc":"<p>Suspends automatically syncing the Store with its Proxy.  Only applicable if <a href=\"#!/api/Ext.data.AbstractStore-cfg-autoSync\" rel=\"Ext.data.AbstractStore-cfg-autoSync\" class=\"docClass\">autoSync</a> is <code>true</code></p>\n"},"sync":{"!type":"fn(options?: ?) -> +Ext.data.Store","!doc":"<p>Synchronizes the store with its <a href=\"#!/api/Ext.data.AbstractStore-cfg-proxy\" rel=\"Ext.data.AbstractStore-cfg-proxy\" class=\"docClass\">proxy</a>. This asks the proxy to batch together any new, updated\nand deleted records in the store, updating the store's internal representation of the records\nas each operation completes.</p>\n"},"update":{"!type":"fn(this: +Ext.data.Store, record: +Ext.data.Model, operation: string, modifiedFieldNames: [string], eOpts: ?)","!doc":"<p>Fires when a Model instance has been updated.</p>\n"},"add":{"!type":"fn(store: +Ext.data.Store, records: [+Ext.data.Model], index: number, eOpts: ?)","!doc":"<p>Fired when a Model instance has been added to this Store.</p>\n"},"beforeload":{"!type":"fn(store: +Ext.data.Store, operation: +Ext.data.Operation, eOpts: ?)","!doc":"<p>Fires before a request is made for a new data object. If the beforeload handler returns false the load\naction will be canceled.</p>\n"},"beforesync":{"!type":"fn(options: ?, eOpts: ?)","!doc":"<p>Fired before a call to <a href=\"#!/api/Ext.data.AbstractStore-method-sync\" rel=\"Ext.data.AbstractStore-method-sync\" class=\"docClass\">sync</a> is executed. Return false from any listener to cancel the sync</p>\n"},"bulkremove":{"!type":"fn(store: +Ext.data.Store, records: [+Ext.data.Model], indexes: [number], isMove: bool, eOpts: ?)","!doc":"<p>Fired at the <em>end</em> of the <a href=\"#!/api/Ext.data.Store-method-remove\" rel=\"Ext.data.Store-method-remove\" class=\"docClass\">remove</a> method when all records in the passed array have been removed.</p>\n\n<p>If many records may be removed in one go, then it is more efficient to listen for this event\nand perform any processing for a bulk remove than to listen for many <a href=\"#!/api/Ext.data.AbstractStore-event-remove\" rel=\"Ext.data.AbstractStore-event-remove\" class=\"docClass\">remove</a> events.</p>\n"},"clear":{"!type":"fn(this: +Ext.data.Store, eOpts: ?)","!doc":"<p>Fired after the <a href=\"#!/api/Ext.data.AbstractStore-method-removeAll\" rel=\"Ext.data.AbstractStore-method-removeAll\" class=\"docClass\">removeAll</a> method is called.</p>\n"},"datachanged":{"!type":"fn(this: +Ext.data.Store, eOpts: ?)","!doc":"<p>Fires whenever the records in the Store have changed in some way - this could include adding or removing\nrecords, or updating the data in existing records</p>\n"},"metachange":{"!type":"fn(this: +Ext.data.Store, meta: ?, eOpts: ?)","!doc":"<p>Fires when this store's underlying reader (available via the proxy) provides new metadata.\nMetadata usually consists of new field definitions, but can include any configuration data\nrequired by an application, and can be processed as needed in the event handler.\nThis event is currently only fired for JsonReaders.</p>\n"},"refresh":{"!type":"fn(this: +Ext.data.Store, eOpts: ?)","!doc":"<p>Fires when the data cache has changed in a bulk manner (e.g., it has been sorted, filtered, etc.) and a\nwidget that is using this Store as a Record cache should refresh its view.</p>\n"},"remove":{"!type":"fn(store: +Ext.data.Store, record: +Ext.data.Model, index: number, isMove: bool, eOpts: ?)","!doc":"<p>Fired when a Model instance has been removed from this Store.</p>\n\n<p><strong>If many records may be removed in one go, then it is more efficient to listen for the <a href=\"#!/api/Ext.data.AbstractStore-event-bulkremove\" rel=\"Ext.data.AbstractStore-event-bulkremove\" class=\"docClass\">bulkremove</a> event\nand perform any processing for a bulk remove than to listen for this <a href=\"#!/api/Ext.data.AbstractStore-event-remove\" rel=\"Ext.data.AbstractStore-event-remove\" class=\"docClass\">remove</a> event.</strong></p>\n"},"write":{"!type":"fn(store: +Ext.data.Store, operation: +Ext.data.Operation, eOpts: ?)","!doc":"<p>Fires whenever a successful write has been made via the configured <a href=\"#!/api/Ext.data.AbstractStore-cfg-proxy\" rel=\"Ext.data.AbstractStore-cfg-proxy\" class=\"docClass\">Proxy</a></p>\n"}},"create":{"!type":"fn(store: ?|+Ext.data.AbstractStore) -> +Ext.data.AbstractStore","!doc":"<p>Creates a store from config object.</p>\n"}},"ArrayStore":{"!doc":"<p>Small helper class to make creating <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>s from Array data easier. An ArrayStore will be\nautomatically configured with a <a href=\"#!/api/Ext.data.reader.Array\" rel=\"Ext.data.reader.Array\" class=\"docClass\">Ext.data.reader.Array</a>.</p>\n\n<p>A store configuration would be something like:</p>\n\n<pre><code>var store = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.ArrayStore\" rel=\"Ext.data.ArrayStore\" class=\"docClass\">Ext.data.ArrayStore</a>', {\n    // store configs\n    storeId: 'myStore',\n    // reader configs\n    fields: [\n       'company',\n       {name: 'price', type: 'float'},\n       {name: 'change', type: 'float'},\n       {name: 'pctChange', type: 'float'},\n       {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}\n    ]\n});\n</code></pre>\n\n<p>This store is configured to consume a returned object of the form:</p>\n\n<pre><code>var myData = [\n    ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],\n    ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],\n    ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],\n    ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],\n    ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']\n];\n</code></pre>\n\n<p>An object literal of this form could also be used as the <a href=\"#!/api/Ext.data.ArrayStore-cfg-data\" rel=\"Ext.data.ArrayStore-cfg-data\" class=\"docClass\">data</a> config option.</p>\n","!type":"fn(config: Ext_data_ArrayStore_cfg)","prototype":{"!proto":"Ext.data.Store.prototype","loadData":{"!type":"fn(data: ?, append: ?) -> !this","!doc":"<p>Loads an array of data straight into the Store.</p>\n\n<p>Using this method is great if the data is in the correct format already (e.g. it doesn't need to be\nprocessed by a reader). If your data requires processing to decode the data structure, use a\n<a href=\"#!/api/Ext.data.proxy.Memory\" rel=\"Ext.data.proxy.Memory\" class=\"docClass\">MemoryProxy</a> or <a href=\"#!/api/Ext.data.ArrayStore-method-loadRawData\" rel=\"Ext.data.ArrayStore-method-loadRawData\" class=\"docClass\">loadRawData</a>.</p>\n"}}},"Batch":{"!doc":"<p>Provides a mechanism to run one or more <a href=\"#!/api/Ext.data.Operation\" rel=\"Ext.data.Operation\" class=\"docClass\">operations</a> in a given order. Fires the 'operationcomplete' event\nafter the completion of each Operation, and the 'complete' event when all Operations have been successfully executed. Fires an 'exception'\nevent if any of the Operations encounter an exception.</p>\n\n\n\n\n<p>Usually these are only used internally by <a href=\"#!/api/Ext.data.proxy.Proxy\" rel=\"Ext.data.proxy.Proxy\" class=\"docClass\">Ext.data.proxy.Proxy</a> classes</p>\n\n","!type":"fn(config?: Ext_data_Batch_cfg)","prototype":{"!proto":"Ext.Base.prototype","autoStart":{"!type":"bool","!doc":"<p>True to immediately start processing the batch as soon as it is constructed (defaults to false)</p>\n"},"pauseOnException":{"!type":"bool","!doc":"<p>True to pause the execution of the batch if any operation encounters an exception\n(defaults to false). If you set this to true you are responsible for implementing the appropriate\nhandling logic and restarting or discarding the batch as needed. There are different ways you could\ndo this, e.g. by handling the batch's <a href=\"#!/api/Ext.data.Batch-event-exception\" rel=\"Ext.data.Batch-event-exception\" class=\"docClass\">exception</a> event directly, or perhaps by overriding\n<a href=\"#!/api/Ext.data.AbstractStore-method-onBatchException\" rel=\"Ext.data.AbstractStore-method-onBatchException\" class=\"docClass\">onBatchException</a> at the store level. If you do pause\nand attempt to handle the exception you can call <a href=\"#!/api/Ext.data.Batch-method-retry\" rel=\"Ext.data.Batch-method-retry\" class=\"docClass\">retry</a> to process the same operation again.</p>\n\n<p>Note that <a href=\"#!/api/Ext.data.Operation\" rel=\"Ext.data.Operation\" class=\"docClass\">operations</a> are atomic, so any operations that may have succeeded\nprior to an exception (and up until pausing the batch) will be finalized at the server level and will\nnot be automatically reversible. Any transactional / rollback behavior that might be desired would have\nto be implemented at the application level. Pausing on exception will likely be most beneficial when\nused in coordination with such a scheme, where an exception might actually affect subsequent operations\nin the same batch and so should be handled before continuing with the next operation.</p>\n\n<p>If you have not implemented transactional operation handling then this option should typically be left\nto the default of false (e.g. process as many operations as possible, and handle any exceptions\nasynchronously without holding up the rest of the batch).</p>\n"},"current":{"!type":"number","!doc":"<p>The index of the current operation being executed. Read only</p>\n"},"exceptions":{"!type":"[+Ext.data.Operation]","!doc":"<p>Ordered array of operations that raised an exception during the most recent\nbatch execution and did not successfully complete</p>\n"},"hasException":{"!type":"bool","!doc":"<p>True if this batch has encountered an exception. This is cleared at the start of each operation. Read only</p>\n"},"isComplete":{"!type":"bool","!doc":"<p>True if this batch has been executed completely. Read only</p>\n"},"isRunning":{"!type":"bool","!doc":"<p>True if the batch is currently running. Read only</p>\n"},"operations":{"!type":"[+Ext.data.Operation]","!doc":"<p>Ordered array of operations that will be executed by this batch</p>\n"},"total":{"!type":"number","!doc":"<p>The total number of operations in this batch. Read only</p>\n"},"add":{"!type":"fn(operation: ?) -> +Ext.data.Batch","!doc":"<p>Adds a new operation to this batch at the end of the <a href=\"#!/api/Ext.data.Batch-property-operations\" rel=\"Ext.data.Batch-property-operations\" class=\"docClass\">operations</a> array</p>\n"},"pause":{"!type":"fn() -> +Ext.data.Batch","!doc":"<p>Pauses execution of the batch, but does not cancel the current operation</p>\n"},"retry":{"!type":"fn() -> +Ext.data.Batch","!doc":"<p>Kicks off execution of the batch, continuing from the current operation. This is intended\nfor restarting a <a href=\"#!/api/Ext.data.Batch-method-pause\" rel=\"Ext.data.Batch-method-pause\" class=\"docClass\">paused</a> batch after an exception, and the operation that raised\nthe exception will now be retried. The batch will then continue with its normal processing until\nall operations are complete or another exception is encountered.</p>\n\n<p>Note that if the batch is already running any call to retry will be ignored.</p>\n"},"runNextOperation":{"!type":"fn() -> +Ext.data.Batch","!doc":"<p>Runs the next operation, relative to this.current.</p>\n"},"runOperation":{"!type":"fn(index: number) -> +Ext.data.Batch","!doc":"<p>Executes an operation by its numeric index in the <a href=\"#!/api/Ext.data.Batch-property-operations\" rel=\"Ext.data.Batch-property-operations\" class=\"docClass\">operations</a> array</p>\n"},"start":{"!type":"fn(index: ?) -> +Ext.data.Batch","!doc":"<p>Kicks off execution of the batch, continuing from the next operation if the previous\noperation encountered an exception, or if execution was paused. Use this method to start\nthe batch for the first time or to restart a paused batch by skipping the current\nunsuccessful operation.</p>\n\n<p>To retry processing the current operation before continuing to the rest of the batch (e.g.\nbecause you explicitly handled the operation's exception), call <a href=\"#!/api/Ext.data.Batch-method-retry\" rel=\"Ext.data.Batch-method-retry\" class=\"docClass\">retry</a> instead.</p>\n\n<p>Note that if the batch is already running any call to start will be ignored.</p>\n"},"complete":{"!type":"fn(batch: +Ext.data.Batch, operation: ?, eOpts: ?)","!doc":"<p>Fired when all operations of this batch have been completed</p>\n"},"exception":{"!type":"fn(batch: +Ext.data.Batch, operation: ?, eOpts: ?)","!doc":"<p>Fired when a operation encountered an exception</p>\n"},"operationcomplete":{"!type":"fn(batch: +Ext.data.Batch, operation: ?, eOpts: ?)","!doc":"<p>Fired when each operation of the batch completes</p>\n"}}},"BufferStore":{"!type":"fn()","prototype":{"!proto":"Ext.data.Store.prototype","filterOnLoad":{"!type":"bool","!doc":"<p>If true, any filters attached to this Store will be run after loading data, before the datachanged event is fired.\nDefaults to true, ignored if <a href=\"#!/api/Ext.data.Store-cfg-remoteFilter\" rel=\"Ext.data.Store-cfg-remoteFilter\" class=\"docClass\">remoteFilter</a> is true</p>\n"},"sortOnLoad":{"!type":"bool","!doc":"<p>If true, any sorters attached to this Store will be run after loading data, before the datachanged event is fired.\nDefaults to true, igored if <a href=\"#!/api/Ext.data.Store-cfg-remoteSort\" rel=\"Ext.data.Store-cfg-remoteSort\" class=\"docClass\">remoteSort</a> is true</p>\n"}}},"Connection":{"!doc":"<p>The Connection class encapsulates a connection to the page's originating domain, allowing requests to be made either\nto a configured URL, or to a URL specified at request time.</p>\n\n<p>Requests made by this class are asynchronous, and will return immediately. No data from the server will be available\nto the statement immediately following the <a href=\"#!/api/Ext.data.Connection-method-request\" rel=\"Ext.data.Connection-method-request\" class=\"docClass\">request</a> call. To process returned data, use a success callback\nin the request options object, or an <a href=\"#!/api/Ext.data.Connection-event-requestcomplete\" rel=\"Ext.data.Connection-event-requestcomplete\" class=\"docClass\">event listener</a>.</p>\n\n<h1>File Uploads</h1>\n\n<p>File uploads are not performed using normal \"Ajax\" techniques, that is they are not performed using XMLHttpRequests.\nInstead the form is submitted in the standard manner with the DOM &lt;form&gt; element temporarily modified to have its\ntarget set to refer to a dynamically generated, hidden &lt;iframe&gt; which is inserted into the document but removed\nafter the return data has been gathered.</p>\n\n<p>The server response is parsed by the browser to create the document for the IFRAME. If the server is using JSON to\nsend the return object, then the Content-Type header must be set to \"text/html\" in order to tell the browser to\ninsert the text unchanged into the document body.</p>\n\n<p>Characters which are significant to an HTML parser must be sent as HTML entities, so encode <code>&lt;</code> as <code>&amp;lt;</code>, <code>&amp;</code> as\n<code>&amp;amp;</code> etc.</p>\n\n<p>The response text is retrieved from the document, and a fake XMLHttpRequest object is created containing a\nresponseText property in order to conform to the requirements of event handlers and callbacks.</p>\n\n<p>Be aware that file upload packets are sent with the content type multipart/form and some server technologies\n(notably JEE) may require some custom processing in order to retrieve parameter names and parameter values from the\npacket content.</p>\n\n<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>\n\n<h1>Binary Posts</h1>\n\n<p>The class supports posting binary data to the server by using native browser capabilities, or a flash polyfill plugin in browsers that do not support native binary posting (e.g. Internet Explorer version 9 or less). A number of limitations exist when the polyfill is used:</p>\n\n<ul>\n<li>Only asynchronous connections are supported.</li>\n<li>Only the POST method can be used.</li>\n<li>The return data can only be binary for now. Set the <a href=\"#!/api/Ext.data.Connection-cfg-binary\" rel=\"Ext.data.Connection-cfg-binary\" class=\"docClass\">binary</a> parameter to <tt>true</tt>.</li>\n<li>Only the 0, 1 and 4 (complete) readyState values will be reported to listeners.</li>\n<li>The flash object will be injected at the bottom of the document and should be invisible.</li>\n<li>Important: See note about packaing the flash plugin with the app in the documenetation of <a href=\"#!/api/Ext.data.flash.BinaryXhr\" rel=\"Ext.data.flash.BinaryXhr\" class=\"docClass\">BinaryXhr</a>.</li>\n</ul>\n\n","!type":"fn(config: Ext_data_Connection_cfg)","prototype":{"!proto":"Ext.Base.prototype","autoAbort":{"!type":"bool","!doc":"<p>Whether this request should abort any pending requests.</p>\n"},"binary":{"!type":"bool","!doc":"<p>True if the response should be treated as binary data.  If true, the binary\ndata will be accessible as a \"responseBytes\" property on the response object.</p>\n"},"cors":{"!type":"bool","!doc":"<p>True to enable CORS support on the XHR object. Currently the only effect of this option\nis to use the XDomainRequest object instead of XMLHttpRequest if the browser is IE8 or above.</p>\n"},"defaultHeaders":{"!type":"?","!doc":"<p>An object containing request headers which are added to each request made by this object.</p>\n"},"disableCaching":{"!type":"bool","!doc":"<p>True to add a unique cache-buster param to GET requests.</p>\n"},"disableCachingParam":{"!type":"string","!doc":"<p>Change the parameter which is sent went disabling caching through a cache buster.</p>\n"},"extraParams":{"!type":"?","!doc":"<p>Any parameters to be appended to the request.</p>\n"},"method":{"!type":"?"},"timeout":{"!type":"number","!doc":"<p>The timeout in milliseconds to be used for requests.</p>\n"},"withCredentials":{"!type":"bool","!doc":"<p>True to set <code>withCredentials = true</code> on the XHR object</p>\n"},"async":{"!type":"bool"},"defaultPostHeader":{"!type":"string"},"defaultXdrContentType":{"!type":"string"},"defaultXhrHeader":{"!type":"string"},"getXhrInstance":{"!type":"?","!doc":"<p>Creates the appropriate XHR transport for this browser.</p>\n"},"isXdr":{"!type":"bool"},"password":{"!type":"string"},"url":{"!type":"?"},"useDefaultXhrHeader":{"!type":"bool"},"username":{"!type":"string"},"abort":{"!type":"fn(request?: ?) -> !this","!doc":"<p>Aborts an active request.</p>\n"},"abortAll":{"!type":"fn() -> !this","!doc":"<p>Aborts all active requests</p>\n"},"cleanup":{"!type":"fn(request: ?) -> !this","!doc":"<p>Cleans up any left over information from the request</p>\n"},"clearTimeout":{"!type":"fn(request: ?) -> !this","!doc":"<p>Clears the timeout on the request</p>\n"},"createException":{"!type":"fn(request: ?) -> !this","!doc":"<p>Creates the exception object</p>\n"},"createResponse":{"!type":"fn(request: ?) -> !this","!doc":"<p>Creates the response object</p>\n"},"getByteArray":{"!type":"fn(xhr: ?) -> +Uint8Array|[?]","!doc":"<p>Gets binary data from the xhr response object and returns it as a byte array</p>\n"},"getForm":{"!type":"fn(options: ?) -> +HTMLElement","!doc":"<p>Gets the form object from options.</p>\n"},"getLatest":{"!type":"fn() -> ?","!doc":"<p>Gets the most recent request</p>\n"},"getXdrInstance":{"!type":"fn() -> !this","!doc":"<p>Creates the appropriate XDR transport for this browser.\n- IE 7 and below don't support CORS\n- IE 8 and 9 support CORS with native XDomainRequest object\n- IE 10 (and above?) supports CORS with native XMLHttpRequest object</p>\n"},"injectVBScript":{"!type":"fn() -> !this","!doc":"<p>Injects a vbscript tag containing a 'getIEByteArray' method for reading\nbinary data from an xhr response in IE8 and below.</p>\n"},"isFormUpload":{"!type":"fn(options: ?) -> !this","!doc":"<p>Detects whether the form is intended to be used for an upload.</p>\n"},"isLoading":{"!type":"fn(request?: ?) -> bool","!doc":"<p>Determines whether this object has a request outstanding.</p>\n"},"nativeBinaryPostSupport":{"!type":"fn() -> bool"},"newRequest":{"!type":"fn(options: ?) -> !this","!doc":"<p>Creates the appropriate XHR transport for a given request on this browser. On IE\nthis may be an <code>XDomainRequest</code> rather than an <code>XMLHttpRequest</code>.</p>\n"},"onComplete":{"!type":"fn(request: ?) -> ?","!doc":"<p>To be called when the request has come back from the server</p>\n"},"onStateChange":{"!type":"fn(request: ?) -> !this","!doc":"<p>Fires when the state of the xhr changes</p>\n"},"onUploadComplete":{"!type":"fn(frame: ?, options: ?) -> !this","!doc":"<p>Callback handler for the upload function. After we've submitted the form via the iframe this creates a bogus\nresponse object to simulate an XHR and populates its responseText from the now-loaded iframe's document body\n(or a textarea inside the body). We then clean up by removing the iframe</p>\n"},"openRequest":{"!type":"fn(options: ?, requestOptions: ?, async: ?, username: ?, password: ?) -> !this","!doc":"<p>Creates and opens an appropriate XHR transport for a given request on this browser.\nThis logic is contained in an individual method to allow for overrides to process all\nof the parameters and options and return a suitable, open connection.</p>\n"},"parseStatus":{"!type":"fn(status: number) -> ?","!doc":"<p>Checks if the response status was successful</p>\n"},"processXdrRequest":{"!type":"fn(request: ?, xhr: ?) -> !this"},"processXdrResponse":{"!type":"fn(response: ?, xhr: ?) -> !this"},"request":{"!type":"fn(options: ?) -> ?","!doc":"<p>Sends an HTTP request to a remote server.</p>\n\n<p><strong>Important:</strong> Ajax server requests are asynchronous, and this call will\nreturn before the response has been received. Process any returned data\nin a callback function.</p>\n\n<pre><code><a href=\"#!/api/Ext.Ajax-method-request\" rel=\"Ext.Ajax-method-request\" class=\"docClass\">Ext.Ajax.request</a>({\n    url: 'ajax_demo/sample.json',\n    success: function(response, opts) {\n        var obj = <a href=\"#!/api/Ext-method-decode\" rel=\"Ext-method-decode\" class=\"docClass\">Ext.decode</a>(response.responseText);\n        console.dir(obj);\n    },\n    failure: function(response, opts) {\n        console.log('server-side failure with status code ' + response.status);\n    }\n});\n</code></pre>\n\n<p>To execute a callback function in the correct scope, use the <code>scope</code> option.</p>\n"},"setOptions":{"!type":"fn(options: ?, scope: ?) -> ?","!doc":"<p>Sets various options such as the url, params for the request</p>\n"},"setupHeaders":{"!type":"fn(xhr: ?, options: ?, data: ?, params: ?) -> !this","!doc":"<p>Setup all the headers for the request</p>\n"},"setupMethod":{"!type":"fn(options: ?, method: string) -> string","!doc":"<p>Template method for overriding method</p>\n"},"setupParams":{"!type":"fn(options: ?, params: string) -> string","!doc":"<p>Template method for overriding params</p>\n"},"setupUrl":{"!type":"fn(options: ?, url: string) -> string","!doc":"<p>Template method for overriding url</p>\n"},"upload":{"!type":"fn(form: string|+HTMLElement|+Ext.Element, url: string, params: string, options: ?) -> !this","!doc":"<p>Uploads a form using a hidden iframe.</p>\n"},"beforerequest":{"!type":"fn(conn: +Ext.data.Connection, options: ?, eOpts: ?)","!doc":"<p>Fires before a network request is made to retrieve a data object.</p>\n"},"requestcomplete":{"!type":"fn(conn: +Ext.data.Connection, response: ?, options: ?, eOpts: ?)","!doc":"<p>Fires if the request was successfully completed.</p>\n"},"requestexception":{"!type":"fn(conn: +Ext.data.Connection, response: ?, options: ?, eOpts: ?)","!doc":"<p>Fires if an error HTTP status was returned from the server. This event may also\nbe listened to in the event that a request has timed out or has been aborted.\nSee <a href=\"http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html\">HTTP Status Code Definitions</a>\nfor details of HTTP status codes.</p>\n"}},"requestId":{"!type":"number"}},"DirectStore":{"!doc":"<p>Small helper class to create an <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a> configured with an <a href=\"#!/api/Ext.data.proxy.Direct\" rel=\"Ext.data.proxy.Direct\" class=\"docClass\">Ext.data.proxy.Direct</a>\nand <a href=\"#!/api/Ext.data.reader.Json\" rel=\"Ext.data.reader.Json\" class=\"docClass\">Ext.data.reader.Json</a> to make interacting with an <a href=\"#!/api/Ext.direct.Manager\" rel=\"Ext.direct.Manager\" class=\"docClass\">Ext.direct.Manager</a> server-side\n<a href=\"#!/api/Ext.direct.Provider\" rel=\"Ext.direct.Provider\" class=\"docClass\">Provider</a> easier. To create a different proxy/reader combination create a basic\n<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a> configured as needed.</p>\n\n<p><strong>Note:</strong> Although they are not listed, this class inherits all of the config options of:</p>\n\n<ul>\n<li><p><strong><a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Store</a></strong></p></li>\n<li><p><strong><a href=\"#!/api/Ext.data.reader.Json\" rel=\"Ext.data.reader.Json\" class=\"docClass\">JsonReader</a></strong></p>\n\n<ul>\n<li><strong><a href=\"#!/api/Ext.data.reader.Json-cfg-root\" rel=\"Ext.data.reader.Json-cfg-root\" class=\"docClass\">root</a></strong></li>\n<li><strong><a href=\"#!/api/Ext.data.reader.Json-cfg-idProperty\" rel=\"Ext.data.reader.Json-cfg-idProperty\" class=\"docClass\">idProperty</a></strong></li>\n<li><strong><a href=\"#!/api/Ext.data.reader.Json-cfg-totalProperty\" rel=\"Ext.data.reader.Json-cfg-totalProperty\" class=\"docClass\">totalProperty</a></strong></li>\n</ul>\n</li>\n<li><p><strong><a href=\"#!/api/Ext.data.proxy.Direct\" rel=\"Ext.data.proxy.Direct\" class=\"docClass\">DirectProxy</a></strong></p>\n\n<ul>\n<li><strong><a href=\"#!/api/Ext.data.proxy.Direct-cfg-directFn\" rel=\"Ext.data.proxy.Direct-cfg-directFn\" class=\"docClass\">directFn</a></strong></li>\n<li><strong><a href=\"#!/api/Ext.data.proxy.Direct-cfg-paramOrder\" rel=\"Ext.data.proxy.Direct-cfg-paramOrder\" class=\"docClass\">paramOrder</a></strong></li>\n<li><strong><a href=\"#!/api/Ext.data.proxy.Direct-cfg-paramsAsHash\" rel=\"Ext.data.proxy.Direct-cfg-paramsAsHash\" class=\"docClass\">paramsAsHash</a></strong></li>\n</ul>\n</li>\n</ul>\n\n","!type":"fn(config: Ext_data_DirectStore_cfg)","prototype":{"!proto":"Ext.data.Store.prototype"}},"Errors":{"!doc":"<p>Wraps a collection of validation error responses and provides convenient functions for\naccessing and errors for specific fields.</p>\n\n\n\n\n<p>Usually this class does not need to be instantiated directly - instances are instead created\nautomatically when <a href=\"#!/api/Ext.data.Model-method-validate\" rel=\"Ext.data.Model-method-validate\" class=\"docClass\">validate</a> on a model instance:</p>\n\n\n\n\n<pre><code>//validate some existing model instance - in this case it returned 2 failures messages\nvar errors = myModel.validate();\n\nerrors.isValid(); //false\n\nerrors.length; //2\nerrors.getByField('name');  // [{field: 'name',  message: 'must be present'}]\nerrors.getByField('title'); // [{field: 'title', message: 'is too short'}]\n</code></pre>\n\n","!type":"fn(config: Ext_data_Errors_cfg)","prototype":{"!proto":"Ext.util.MixedCollection.prototype","getByField":{"!type":"fn(fieldName: string) -> [?]","!doc":"<p>Returns all of the errors for the given field</p>\n"},"isValid":{"!type":"fn() -> bool","!doc":"<p>Returns true if there are no errors in the collection</p>\n"}}},"Field":{"!doc":"<p>Fields are used to define what a Model is. They aren't instantiated directly - instead, when we create a class that\nextends <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>, it will automatically create a Field instance for each field configured in a <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Model</a>. For example, we might set up a model like this:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('User', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: [\n        'name', 'email',\n        {name: 'age', type: 'int'},\n        {name: 'gender', type: 'string', defaultValue: 'Unknown'}\n    ]\n});\n</code></pre>\n\n<p>Four fields will have been created for the User Model - name, email, age and gender. Note that we specified a couple\nof different formats here; if we only pass in the string name of the field (as with name and email), the field is set\nup with the 'auto' type. It's as if we'd done this instead:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('User', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: [\n        {name: 'name', type: 'auto'},\n        {name: 'email', type: 'auto'},\n        {name: 'age', type: 'int'},\n        {name: 'gender', type: 'string', defaultValue: 'Unknown'}\n    ]\n});\n</code></pre>\n\n<h1>Types and conversion</h1>\n\n<p>The <a href=\"#!/api/Ext.data.Field-cfg-type\" rel=\"Ext.data.Field-cfg-type\" class=\"docClass\">type</a> is important - it's used to automatically convert data passed to the field into the correct format.\nIn our example above, the name and email fields used the 'auto' type and will just accept anything that is passed\ninto them. The 'age' field had an 'int' type however, so if we passed 25.4 this would be rounded to 25.</p>\n\n<p>Sometimes a simple type isn't enough, or we want to perform some processing when we load a Field's data. We can do\nthis using a <a href=\"#!/api/Ext.data.Field-cfg-convert\" rel=\"Ext.data.Field-cfg-convert\" class=\"docClass\">convert</a> function. Here, we're going to create a new field based on another:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('User', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: [\n        {\n            name: 'firstName',\n            convert: function(value, record) {\n                var fullName  = record.get('name'),\n                    splits    = fullName.split(\" \"),\n                    firstName = splits[0];\n\n                return firstName;\n            }\n        },\n        'name', 'email',\n        {name: 'age', type: 'int'},\n        {name: 'gender', type: 'string', defaultValue: 'Unknown'}\n    ]\n});\n</code></pre>\n\n<p>Now when we create a new User, the firstName is populated automatically based on the name:</p>\n\n<pre><code>var ed = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('User', {name: 'Ed Spencer'});\n\nconsole.log(ed.get('firstName')); //logs 'Ed', based on our convert function\n</code></pre>\n\n<p>Fields which are configured with a custom <code>convert</code> function are read <em>after</em> all other fields\nwhen constructing and reading records, so that if convert functions rely on other, non-converted fields\n(as in this example), they can be sure of those fields being present.</p>\n\n<p>In fact, if we log out all of the data inside ed, we'll see this:</p>\n\n<pre><code>console.log(ed.data);\n\n//outputs this:\n{\n    age: 0,\n    email: \"\",\n    firstName: \"Ed\",\n    gender: \"Unknown\",\n    name: \"Ed Spencer\"\n}\n</code></pre>\n\n<p>The age field has been given a default of zero because we made it an int type. As an auto field, email has defaulted\nto an empty string. When we registered the User model we set gender's <a href=\"#!/api/Ext.data.Field-cfg-defaultValue\" rel=\"Ext.data.Field-cfg-defaultValue\" class=\"docClass\">defaultValue</a> to 'Unknown' so we see\nthat now. Let's correct that and satisfy ourselves that the types work as we expect:</p>\n\n<pre><code>ed.set('gender', 'Male');\ned.get('gender'); //returns 'Male'\n\ned.set('age', 25.4);\ned.get('age'); //returns 25 - we wanted an int, not a float, so no decimal places allowed\n</code></pre>\n","!type":"fn(config: Ext_data_Field_cfg)","prototype":{"!proto":"Ext.Base.prototype","allowBlank":{"!type":"bool","!doc":"<p>Used for validating a <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">model</a>. Defaults to true. An empty value here will cause\n<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>.<a href=\"#!/api/Ext.data.Model-method-isValid\" rel=\"Ext.data.Model-method-isValid\" class=\"docClass\">isValid</a> to evaluate to false.</p>\n"},"convert":{"!type":"fn()","!doc":"<p>A function which converts the value provided by the Reader into an object that will be stored in the Model.</p>\n\n<p>If configured as <code>null</code>, then no conversion will be applied to the raw data property when this Field\nis read. This will increase performance. but you must ensure that the data is of the correct type and does\nnot <em>need</em> converting.</p>\n\n<p>It is passed the following parameters:</p>\n\n<ul>\n<li><p><strong>v</strong> : Mixed</p>\n\n<p>The data value as read by the Reader, if undefined will use the configured <code><a href=\"#!/api/Ext.data.Field-cfg-defaultValue\" rel=\"Ext.data.Field-cfg-defaultValue\" class=\"docClass\">defaultValue</a></code>.</p></li>\n<li><p><strong>rec</strong> : <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a></p>\n\n<p>The data object containing the Model as read so far by the Reader. Note that the Model may not be fully populated\nat this point as the fields are read in the order that they are defined in your\n<a href=\"#!/api/Ext.data.Model-cfg-fields\" rel=\"Ext.data.Model-cfg-fields\" class=\"docClass\">fields</a> array.</p></li>\n</ul>\n\n\n<p>Example of convert functions:</p>\n\n<pre><code>function fullName(v, record){\n    return record.data.last + ', ' + record.data.first;\n}\n\nfunction location(v, record){\n    return !record.data.city ? '' : (record.data.city + ', ' + record.data.state);\n}\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Dude', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: [\n        {name: 'fullname',  convert: fullName},\n        {name: 'firstname', mapping: 'name.first'},\n        {name: 'lastname',  mapping: 'name.last'},\n        {name: 'city', defaultValue: 'homeless'},\n        'state',\n        {name: 'location',  convert: location}\n    ]\n});\n\n// create the data store\nvar store = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    reader: {\n        type: 'json',\n        model: 'Dude',\n        idProperty: 'key',\n        root: 'daRoot',\n        totalProperty: 'total'\n    }\n});\n\nvar myData = [\n    { key: 1,\n      name: { first: 'Fat',    last:  'Albert' }\n      // notice no city, state provided in data object\n    },\n    { key: 2,\n      name: { first: 'Barney', last:  'Rubble' },\n      city: 'Bedrock', state: 'Stoneridge'\n    },\n    { key: 3,\n      name: { first: 'Cliff',  last:  'Claven' },\n      city: 'Boston',  state: 'MA'\n    }\n];\n</code></pre>\n"},"dateFormat":{"!type":"string","!doc":"<p>Serves as a default for the <a href=\"#!/api/Ext.data.Field-cfg-dateReadFormat\" rel=\"Ext.data.Field-cfg-dateReadFormat\" class=\"docClass\">dateReadFormat</a> and <a href=\"#!/api/Ext.data.Field-cfg-dateWriteFormat\" rel=\"Ext.data.Field-cfg-dateWriteFormat\" class=\"docClass\">dateWriteFormat</a> config options. This\nwill be used in place of those other configurations if not specified.</p>\n\n<p>A format string for the <a href=\"#!/api/Ext.Date-method-parse\" rel=\"Ext.Date-method-parse\" class=\"docClass\">Ext.Date.parse</a> function, or \"timestamp\" if the value provided by\nthe Reader is a UNIX timestamp, or \"time\" if the value provided by the Reader is a javascript millisecond\ntimestamp. See <a href=\"#!/api/Ext.Date\" rel=\"Ext.Date\" class=\"docClass\">Ext.Date</a>.</p>\n\n<p>It is quite important to note that while this config is optional, it will default to using the base\nJavaScript Date object's <code>parse</code> function if not specified, rather than <a href=\"#!/api/Ext.Date-method-parse\" rel=\"Ext.Date-method-parse\" class=\"docClass\">Ext.Date.parse</a>.\nThis can cause unexpected issues, especially when converting between timezones, or when converting dates that\ndo not have a timezone specified. The behavior of the native <code>Date.parse</code> is implementation-specific, and\ndepending on the value of the date string, it might return the UTC date or the local date. <strong>For this reason\nit is strongly recommended that you always specify an explicit date format when parsing dates.</strong></p>\n"},"dateReadFormat":{"!type":"string","!doc":"<p>Used when converting received data into a Date when the <a href=\"#!/api/Ext.data.Field-cfg-type\" rel=\"Ext.data.Field-cfg-type\" class=\"docClass\">type</a> is specified as <code>\"date\"</code>.\nThis configuration takes precedence over <a href=\"#!/api/Ext.data.Field-cfg-dateFormat\" rel=\"Ext.data.Field-cfg-dateFormat\" class=\"docClass\">dateFormat</a>.\nSee <a href=\"#!/api/Ext.data.Field-cfg-dateFormat\" rel=\"Ext.data.Field-cfg-dateFormat\" class=\"docClass\">dateFormat</a> for more information.</p>\n"},"dateWriteFormat":{"!type":"string","!doc":"<p>Used to provide a custom format when serializing dates with a <a href=\"#!/api/Ext.data.writer.Writer\" rel=\"Ext.data.writer.Writer\" class=\"docClass\">Ext.data.writer.Writer</a>.\nIf this is not specified, the <a href=\"#!/api/Ext.data.Field-cfg-dateFormat\" rel=\"Ext.data.Field-cfg-dateFormat\" class=\"docClass\">dateFormat</a> will be used. See the <a href=\"#!/api/Ext.data.writer.Writer\" rel=\"Ext.data.writer.Writer\" class=\"docClass\">Ext.data.writer.Writer</a>\ndocs for more information on writing dates.</p>\n\n<p><strong>Note that to use a <a href=\"#!/api/Ext.data.writer.Json\" rel=\"Ext.data.writer.Json\" class=\"docClass\">JsonWriter</a> to send Microsoft format \"JSON\" dates, which are in fact\ninvalid JSON, it is not possible to use the standard date serialization pathway or\n<a href=\"#!/api/Ext-property-USE_NATIVE_JSON\" rel=\"Ext-property-USE_NATIVE_JSON\" class=\"docClass\">native browser JSON production</a>.</strong></p>\n\n<p>To use a <a href=\"#!/api/Ext.data.writer.Json\" rel=\"Ext.data.writer.Json\" class=\"docClass\">JsonWriter</a> to write dates in a JSON packet in the form <code>\"\\/Date(1357372800000)\\/\"</code>\nconfigure the field like this:</p>\n\n<p>   {\n       type: 'date',\n       dateFormat: 'MS',             // To parse incoming dates from server correctly\n       serialize: <a href=\"#!/api/Ext-method-identityFn\" rel=\"Ext-method-identityFn\" class=\"docClass\">Ext.identityFn</a>     // An ExtJS-supplied function which returns the arg unchanged\n   }</p>\n\n<p>Then override ExtJS's JSON date serialize function:</p>\n\n<p>   <a href=\"#!/api/Ext.JSON-method-encodeDate\" rel=\"Ext.JSON-method-encodeDate\" class=\"docClass\">Ext.JSON.encodeDate</a> = function (d) {\n       return '\"' + <a href=\"#!/api/Ext.Date-method-format\" rel=\"Ext.Date-method-format\" class=\"docClass\">Ext.Date.format</a>(d, 'MS') + '\"';\n   };</p>\n"},"defaultValue":{"!type":"?","!doc":"<p>The default value used when the creating an instance from a raw data object, and the property referenced by the\n<code><a href=\"#!/api/Ext.data.Field-cfg-mapping\" rel=\"Ext.data.Field-cfg-mapping\" class=\"docClass\">mapping</a></code> does not exist in that data object.</p>\n\n<p>May be specified as <code>undefined</code> to prevent defaulting in a value.</p>\n"},"mapping":{"!type":"string|number","!doc":"<p>(Optional) A path expression for use by the <a href=\"#!/api/Ext.data.reader.Reader\" rel=\"Ext.data.reader.Reader\" class=\"docClass\">Ext.data.reader.Reader</a> implementation that is creating the\n<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Model</a> to extract the Field value from the data object. If the path expression is the same\nas the field name, the mapping may be omitted.</p>\n\n<p>The form of the mapping expression depends on the Reader being used.</p>\n\n<ul>\n<li><p><a href=\"#!/api/Ext.data.reader.Json\" rel=\"Ext.data.reader.Json\" class=\"docClass\">Ext.data.reader.Json</a></p>\n\n<p>The mapping is a string containing the javascript expression to reference the data from an element of the data\nitem's <a href=\"#!/api/Ext.data.reader.Json-cfg-root\" rel=\"Ext.data.reader.Json-cfg-root\" class=\"docClass\">root</a> Array. Defaults to the field name.</p></li>\n<li><p><a href=\"#!/api/Ext.data.reader.Xml\" rel=\"Ext.data.reader.Xml\" class=\"docClass\">Ext.data.reader.Xml</a></p>\n\n<p>The mapping is an <a href=\"#!/api/Ext.dom.Query\" rel=\"Ext.dom.Query\" class=\"docClass\">Ext.DomQuery</a> path to the data item relative to the DOM element that represents the\n<a href=\"#!/api/Ext.data.reader.Xml-cfg-record\" rel=\"Ext.data.reader.Xml-cfg-record\" class=\"docClass\">record</a>. Defaults to the field name.</p></li>\n<li><p><a href=\"#!/api/Ext.data.reader.Array\" rel=\"Ext.data.reader.Array\" class=\"docClass\">Ext.data.reader.Array</a></p>\n\n<p>The mapping is a number indicating the Array index of the field's value. Defaults to the field specification's\nArray position.</p></li>\n</ul>\n\n\n<p>If a more complex value extraction strategy is required, then configure the Field with a <a href=\"#!/api/Ext.data.Field-cfg-convert\" rel=\"Ext.data.Field-cfg-convert\" class=\"docClass\">convert</a>\nfunction. This is passed the whole row object, and may interrogate it in whatever way is necessary in order to\nreturn the desired data.</p>\n"},"name":{"!type":"string","!doc":"<p>The name by which the field is referenced within the Model. This is referenced by, for example, the <code>dataIndex</code>\nproperty in column definition objects passed to <a href=\"#!/api/Ext.grid.property.HeaderContainer\" rel=\"Ext.grid.property.HeaderContainer\" class=\"docClass\">Ext.grid.property.HeaderContainer</a>.</p>\n\n<p>Note: In the simplest case, if no properties other than <code>name</code> are required, a field definition may consist of\njust a String for the field name.</p>\n"},"persist":{"!type":"bool","!doc":"<p>False to exclude this field from the <a href=\"#!/api/Ext.data.Model-property-modified\" rel=\"Ext.data.Model-property-modified\" class=\"docClass\">Ext.data.Model.modified</a> fields in a model. This will also exclude\nthe field from being written using a <a href=\"#!/api/Ext.data.writer.Writer\" rel=\"Ext.data.writer.Writer\" class=\"docClass\">Ext.data.writer.Writer</a>. This option is useful when model fields are\nused to keep state on the client but do not need to be persisted to the server. Defaults to true.</p>\n"},"serialize":{"!type":"fn()","!doc":"<p>A function which converts the Model's value for this Field into a form which can be used by whatever <a href=\"#!/api/Ext.data.writer.Writer\" rel=\"Ext.data.writer.Writer\" class=\"docClass\">Writer</a>\nis being used to sync data with the server.</p>\n\n<p>The function should return a string which represents the Field's value.</p>\n\n<p>It is passed the following parameters:</p>\n\n<ul>\n<li><p><strong>v</strong> : Mixed</p>\n\n<p>The Field's value - the value to be serialized.</p></li>\n<li><p><strong>rec</strong> : <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a></p>\n\n<p>The record being serialized.</p></li>\n</ul>\n\n"},"sortDir":{"!type":"string","!doc":"<p>Initial direction to sort (<code>\"ASC\"</code> or <code>\"DESC\"</code>). Defaults to <code>\"ASC\"</code>.</p>\n"},"sortType":{"!type":"string|fn()","!doc":"<p>A function which converts a Field's value to a comparable value in order to ensure correct sort ordering.\nPredefined functions are provided in <a href=\"#!/api/Ext.data.SortTypes\" rel=\"Ext.data.SortTypes\" class=\"docClass\">Ext.data.SortTypes</a>. A custom sort example:</p>\n\n<pre><code>// current sort     after sort we want\n// +-+------+          +-+------+\n// |1|First |          |1|First |\n// |2|Last  |          |3|Second|\n// |3|Second|          |2|Last  |\n// +-+------+          +-+------+\n\nsortType: function(value) {\n   switch (value.toLowerCase()) // native toLowerCase():\n   {\n      case 'first': return 1;\n      case 'second': return 2;\n      default: return 3;\n   }\n}\n</code></pre>\n\n<p>May also be set to a String value, corresponding to one of the named sort types in <a href=\"#!/api/Ext.data.SortTypes\" rel=\"Ext.data.SortTypes\" class=\"docClass\">Ext.data.SortTypes</a>.</p>\n"},"type":{"!type":"string|?","!doc":"<p>The data type for automatic conversion from received data to the <em>stored</em> value if\n<code><a href=\"#!/api/Ext.data.Field-cfg-convert\" rel=\"Ext.data.Field-cfg-convert\" class=\"docClass\">convert</a></code> has not been specified. This may be specified as a string value.\nPossible values are</p>\n\n<ul>\n<li>auto (Default, implies no conversion)</li>\n<li>string</li>\n<li>int</li>\n<li>float</li>\n<li>boolean</li>\n<li>date</li>\n</ul>\n\n\n<p>This may also be specified by referencing a member of the <a href=\"#!/api/Ext.data.Types\" rel=\"Ext.data.Types\" class=\"docClass\">Ext.data.Types</a> class.</p>\n\n<p>Developers may create their own application-specific data types by defining new members of the <a href=\"#!/api/Ext.data.Types\" rel=\"Ext.data.Types\" class=\"docClass\">Ext.data.Types</a> class.</p>\n"},"useNull":{"!type":"bool","!doc":"<p>Use when converting received data into a INT, FLOAT, BOOL or STRING type. If the value cannot be\nparsed, <code>null</code> will be used if useNull is true, otherwise a default value for that type will be used:</p>\n\n<ul>\n<li>for INT and FLOAT - <code>0</code>.</li>\n<li>for STRING - <code>\"\"</code>.</li>\n<li>for BOOL - <code>false</code>.</li>\n</ul>\n\n\n<p>Note that when parsing of DATE type fails, the value will be <code>null</code> regardless of this setting.</p>\n"},"isField":{"!type":"bool"}}},"Group":{"!type":"fn()","prototype":{"!proto":"Ext.util.Observable.prototype","dirty":{"!type":"bool"},"key":{"!type":"?"},"add":{"!type":"fn(records: ?) -> !this"},"commit":{"!type":"fn() -> !this"},"contains":{"!type":"fn(record: ?) -> !this"},"getAggregateRecord":{"!type":"fn(forceNew: ?) -> !this"},"hasAggregate":{"!type":"fn() -> !this"},"isCollapsed":{"!type":"fn() -> !this"},"isDirty":{"!type":"fn() -> !this"},"remove":{"!type":"fn(records: ?) -> !this"},"setDirty":{"!type":"fn() -> !this"}}},"IdGenerator":{"!doc":"<p>This class is a base for all id generators. It also provides lookup of id generators by\ntheir id.</p>\n\n<p>Generally, id generators are used to generate a primary key for new model instances. There\nare different approaches to solving this problem, so this mechanism has both simple use\ncases and is open to custom implementations. A <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a> requests id generation\nusing the <a href=\"#!/api/Ext.data.Model-cfg-idgen\" rel=\"Ext.data.Model-cfg-idgen\" class=\"docClass\">Ext.data.Model.idgen</a> property.</p>\n\n<h1>Identity, Type and Shared IdGenerators</h1>\n\n<p>It is often desirable to share IdGenerators to ensure uniqueness or common configuration.\nThis is done by giving IdGenerator instances an id property by which they can be looked\nup using the <a href=\"#!/api/Ext.data.IdGenerator-static-method-get\" rel=\"Ext.data.IdGenerator-static-method-get\" class=\"docClass\">get</a> method. To configure two <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Model</a> classes\nto share one <a href=\"#!/api/Ext.data.SequentialIdGenerator\" rel=\"Ext.data.SequentialIdGenerator\" class=\"docClass\">sequential</a> id generator, you simply\nassign them the same id:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('MyApp.data.MyModelA', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    idgen: {\n        type: 'sequential',\n        id: 'foo'\n    }\n});\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('MyApp.data.MyModelB', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    idgen: {\n        type: 'sequential',\n        id: 'foo'\n    }\n});\n</code></pre>\n\n<p>To make this as simple as possible for generator types that are shared by many (or all)\nModels, the IdGenerator types (such as 'sequential' or 'uuid') are also reserved as\ngenerator id's. This is used by the <a href=\"#!/api/Ext.data.UuidGenerator\" rel=\"Ext.data.UuidGenerator\" class=\"docClass\">Ext.data.UuidGenerator</a> which has an id equal\nto its type ('uuid'). In other words, the following Models share the same generator:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('MyApp.data.MyModelX', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    idgen: 'uuid'\n});\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('MyApp.data.MyModelY', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    idgen: 'uuid'\n});\n</code></pre>\n\n<p>This can be overridden (by specifying the id explicitly), but there is no particularly\ngood reason to do so for this generator type.</p>\n\n<h1>Creating Custom Generators</h1>\n\n<p>An id generator should derive from this class and implement the <a href=\"#!/api/Ext.data.IdGenerator-method-generate\" rel=\"Ext.data.IdGenerator-method-generate\" class=\"docClass\">generate</a> method.\nThe constructor will apply config properties on new instances, so a constructor is often\nnot necessary.</p>\n\n<p>To register an id generator type, a derived class should provide an <code>alias</code> like so:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('MyApp.data.CustomIdGenerator', {\n    extend: '<a href=\"#!/api/Ext.data.IdGenerator\" rel=\"Ext.data.IdGenerator\" class=\"docClass\">Ext.data.IdGenerator</a>',\n    alias: 'idgen.custom',\n\n    configProp: 42, // some config property w/default value\n\n    generate: function () {\n        return ... // a new id\n    }\n});\n</code></pre>\n\n<p>Using the custom id generator is then straightforward:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('MyApp.data.MyModel', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    idgen: 'custom'\n});\n// or...\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('MyApp.data.MyModel', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    idgen: {\n        type: 'custom',\n        configProp: value\n    }\n});\n</code></pre>\n\n<p>It is not recommended to mix shared generators with generator configuration. This leads\nto unpredictable results unless all configurations match (which is also redundant). In\nsuch cases, a custom generator with a default id is the best approach.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('MyApp.data.CustomIdGenerator', {\n    extend: '<a href=\"#!/api/Ext.data.SequentialIdGenerator\" rel=\"Ext.data.SequentialIdGenerator\" class=\"docClass\">Ext.data.SequentialIdGenerator</a>',\n    alias: 'idgen.custom',\n\n    id: 'custom', // shared by default\n\n    prefix: 'ID_',\n    seed: 1000\n});\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('MyApp.data.MyModelX', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    idgen: 'custom'\n});\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('MyApp.data.MyModelY', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    idgen: 'custom'\n});\n\n// the above models share a generator that produces ID_1000, ID_1001, etc..\n</code></pre>\n","!type":"fn(config?: Ext_data_IdGenerator_cfg)","prototype":{"!proto":"Ext.Base.prototype","id":{"!type":"string","!doc":"<p>The id by which to register a new instance. This instance can be found using the\n<a href=\"#!/api/Ext.data.IdGenerator-static-method-get\" rel=\"Ext.data.IdGenerator-static-method-get\" class=\"docClass\">get</a> static method.</p>\n"},"isGenerator":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated IdGenerator, or subclass thereof.</p>\n"},"generate":{"!type":"fn() -> string","!doc":"<p>Generates and returns the next id. This method must be implemented by the derived\nclass.</p>\n"}},"all":{"!type":"?","!doc":"<p>This object is keyed by id to lookup instances.</p>\n"},"get":{"!type":"fn(config: string|?) -> !this","!doc":"<p>Returns the IdGenerator given its config description.</p>\n"}},"JsonP":{"!doc":"<p>This class is used to create JSONP requests. JSONP is a mechanism that allows for making\nrequests for data cross domain. More information is available <a href=\"http://en.wikipedia.org/wiki/JSONP\">here</a>.</p>\n","callbackKey":{"!type":"string","!doc":"<p>Specifies the GET parameter that will be sent to the server containing the function name to be executed when\nthe request completes. Defaults to <tt>callback</tt>. Thus, a common request will be in the form of\nurl?callback=Ext.data.JsonP.callback1</p>\n"},"disableCaching":{"!type":"bool","!doc":"<p>True to add a unique cache-buster param to requests. Defaults to <tt>true</tt>.</p>\n"},"disableCachingParam":{"!type":"string","!doc":"<p>Change the parameter which is sent went disabling caching through a cache buster. Defaults to <tt>'_dc'</tt>.</p>\n"},"requestCount":{"!type":"number","!doc":"<p>Number of requests done so far.</p>\n"},"requests":{"!type":"?","!doc":"<p>Hash of pending requests.</p>\n"},"timeout":{"!type":"number","!doc":"<p>A default timeout for any JsonP requests. If the request has not completed in this time the\nfailure callback will be fired. The timeout is in ms. Defaults to <tt>30000</tt>.</p>\n"},"abort":{"!type":"fn(request?: ?|string) -> !this","!doc":"<p>Abort a request. If the request parameter is not specified all open requests will\nbe aborted.</p>\n"},"cleanupErrorHandling":{"!type":"fn(request: ?) -> !this","!doc":"<p>Cleans up anu script handling errors</p>\n"},"createScript":{"!type":"fn(url: string, params: ?, options: ?) -> !this","!doc":"<p>Create the script tag given the specified url, params and options. The options\nparameter is passed to allow an override to access it.</p>\n"},"handleAbort":{"!type":"fn(request: ?) -> !this","!doc":"<p>Handles any aborts when loading the script</p>\n"},"handleError":{"!type":"fn(request: ?) -> !this","!doc":"<p>Handles any script errors when loading the script</p>\n"},"handleResponse":{"!type":"fn(result: ?, request: ?) -> !this","!doc":"<p>Handle a successful response</p>\n"},"handleTimeout":{"!type":"fn(request: ?) -> !this","!doc":"<p>Handle any script timeouts</p>\n"},"loadScript":{"!type":"fn(request: ?) -> !this","!doc":"<p>Loads the script for the given request by appending it to the HEAD element. This is\nits own method so that users can override it (as well as <a href=\"#!/api/Ext.data.JsonP-method-createScript\" rel=\"Ext.data.JsonP-method-createScript\" class=\"docClass\">createScript</a>).</p>\n"},"request":{"!type":"fn(options: ?) -> ?","!doc":"<p>Makes a JSONP request.</p>\n"},"setupErrorHandling":{"!type":"fn(request: ?) -> !this","!doc":"<p>Sets up error handling for the script</p>\n"}},"JsonPStore":{"!doc":"<p>Small helper class to make creating <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>s from different domain JSON data easier.\nA JsonPStore will be automatically configured with a <a href=\"#!/api/Ext.data.reader.Json\" rel=\"Ext.data.reader.Json\" class=\"docClass\">Ext.data.reader.Json</a> and a <a href=\"#!/api/Ext.data.proxy.JsonP\" rel=\"Ext.data.proxy.JsonP\" class=\"docClass\">JsonPProxy</a>.</p>\n\n\n<p>A store configuration would be something like:\n<pre><code>var store = new <a href=\"#!/api/Ext.data.JsonPStore\" rel=\"Ext.data.JsonPStore\" class=\"docClass\">Ext.data.JsonPStore</a>({\n    // store configs\n    storeId: 'myStore',\n\n    // proxy configs\n    url: 'get-images.php',\n\n    // reader configs\n    root: 'images',\n    idProperty: 'name',\n    fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}]\n});\n</code></pre></p>\n\n\n<p>This store is configured to consume a returned object of the form:\n<pre><code>stcCallback({\n    images: [\n        {name: 'Image one', url:'/GetImage.php?id=1', size:46.5, lastmod: new Date(2007, 10, 29)},\n        {name: 'Image Two', url:'/GetImage.php?id=2', size:43.2, lastmod: new Date(2007, 10, 30)}\n    ]\n})\n</code></pre>\n<p>Where stcCallback is the callback name passed in the request to the remote domain. See <a href=\"#!/api/Ext.data.proxy.JsonP\" rel=\"Ext.data.proxy.JsonP\" class=\"docClass\">JsonPProxy</a>\nfor details of how this works.</p>\nAn object literal of this form could also be used as the <a href=\"#!/api/Ext.data.JsonPStore-cfg-data\" rel=\"Ext.data.JsonPStore-cfg-data\" class=\"docClass\">data</a> config option.</p>\n\n","!type":"fn(config: Ext_data_JsonPStore_cfg)","prototype":{"!proto":"Ext.data.Store.prototype"}},"JsonStore":{"!doc":"<p>Small helper class to make creating <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>s from JSON data easier.\nA JsonStore will be automatically configured with a <a href=\"#!/api/Ext.data.reader.Json\" rel=\"Ext.data.reader.Json\" class=\"docClass\">Ext.data.reader.Json</a>.</p>\n\n<p>A store configuration would be something like:</p>\n\n<pre><code>var store = new <a href=\"#!/api/Ext.data.JsonStore\" rel=\"Ext.data.JsonStore\" class=\"docClass\">Ext.data.JsonStore</a>({\n    // store configs\n    storeId: 'myStore',\n\n    proxy: {\n        type: 'ajax',\n        url: 'get-images.php',\n        reader: {\n            type: 'json',\n            root: 'images',\n            idProperty: 'name'\n        }\n    },\n\n    //alternatively, a <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a> name can be given (see <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a> for an example)\n    fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}]\n});\n</code></pre>\n\n<p>This store is configured to consume a returned object of the form:</p>\n\n<pre><code>{\n    images: [\n        {name: 'Image one', url:'/GetImage.php?id=1', size:46.5, lastmod: new Date(2007, 10, 29)},\n        {name: 'Image Two', url:'/GetImage.php?id=2', size:43.2, lastmod: new Date(2007, 10, 30)}\n    ]\n}\n</code></pre>\n\n<p>An object literal of this form could also be used as the <a href=\"#!/api/Ext.data.JsonStore-cfg-data\" rel=\"Ext.data.JsonStore-cfg-data\" class=\"docClass\">data</a> config option.</p>\n","!type":"fn(config: Ext_data_JsonStore_cfg)","prototype":{"!proto":"Ext.data.Store.prototype"}},"Model":{"!doc":"<p>A Model represents some object that your application manages. For example, one might define a Model for Users,\nProducts, Cars, or any other real-world object that we want to model in the system. Models are registered via the\n<a href=\"#!/api/Ext.ModelManager\" rel=\"Ext.ModelManager\" class=\"docClass\">model manager</a>, and are used by <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">stores</a>, which are in turn used by many\nof the data-bound components in Ext.</p>\n\n<p>Models are defined as a set of fields and any arbitrary methods and properties relevant to the model. For example:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('User', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: [\n        {name: 'name',  type: 'string'},\n        {name: 'age',   type: 'int', convert: null},\n        {name: 'phone', type: 'string'},\n        {name: 'alive', type: 'boolean', defaultValue: true, convert: null}\n    ],\n\n    changeName: function() {\n        var oldName = this.get('name'),\n            newName = oldName + \" The Barbarian\";\n\n        this.set('name', newName);\n    }\n});\n</code></pre>\n\n<p>The fields array is turned into a <a href=\"#!/api/Ext.util.MixedCollection\" rel=\"Ext.util.MixedCollection\" class=\"docClass\">MixedCollection</a> automatically by the <a href=\"#!/api/Ext.ModelManager\" rel=\"Ext.ModelManager\" class=\"docClass\">ModelManager</a>, and all other functions and properties are copied to the new Model's prototype.</p>\n\n<p>A Model definition always has an <em>identifying field</em> which should yield a unique key for each instance. By default, a field\nnamed \"id\" will be created with a <a href=\"#!/api/Ext.data.Field-cfg-mapping\" rel=\"Ext.data.Field-cfg-mapping\" class=\"docClass\">mapping</a> of \"id\". This happens because of the default\n<a href=\"#!/api/Ext.data.Model-cfg-idProperty\" rel=\"Ext.data.Model-cfg-idProperty\" class=\"docClass\">idProperty</a> provided in Model definitions.</p>\n\n<p>To alter which field is the identifying field, use the <a href=\"#!/api/Ext.data.Model-cfg-idProperty\" rel=\"Ext.data.Model-cfg-idProperty\" class=\"docClass\">idProperty</a> config.</p>\n\n<p>If the Model should not have any identifying field (for example if you are defining ab abstract base class for your\napplication models), configure the {@liknk <a href=\"#!/api/Ext.data.Model-cfg-idProperty\" rel=\"Ext.data.Model-cfg-idProperty\" class=\"docClass\">idProperty</a>} as <code>null</code>.</p>\n\n<p>By default, the built in numeric and boolean field types have a <a href=\"#!/api/Ext.data.Field-cfg-convert\" rel=\"Ext.data.Field-cfg-convert\" class=\"docClass\">Ext.data.Field.convert</a> function which coerces string\nvalues in raw data into the field's type. For better performance with <a href=\"#!/api/Ext.data.reader.Json\" rel=\"Ext.data.reader.Json\" class=\"docClass\">Json</a> or <a href=\"#!/api/Ext.data.reader.Array\" rel=\"Ext.data.reader.Array\" class=\"docClass\">Array</a>\nreaders <em>if you are in control of the data fed into this Model</em>, you can null out the default convert function which will cause\nthe raw property to be copied directly into the Field's value.</p>\n\n<p>Now we can create instances of our User model and call any model logic we defined:</p>\n\n<pre><code>var user = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('User', {\n    id   : 'ABCD12345',\n    name : 'Conan',\n    age  : 24,\n    phone: '555-555-5555'\n});\n\nuser.changeName();\nuser.get('name'); //returns \"Conan The Barbarian\"\n</code></pre>\n\n<h1>Validations</h1>\n\n<p>Models have built-in support for validations, which are executed against the validator functions in <a href=\"#!/api/Ext.data.validations\" rel=\"Ext.data.validations\" class=\"docClass\">Ext.data.validations</a> (<a href=\"#!/api/Ext.data.validations\" rel=\"Ext.data.validations\" class=\"docClass\">see all validation functions</a>). Validations are easy to add to\nmodels:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('User', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: [\n        {name: 'name',     type: 'string'},\n        {name: 'age',      type: 'int'},\n        {name: 'phone',    type: 'string'},\n        {name: 'gender',   type: 'string'},\n        {name: 'username', type: 'string'},\n        {name: 'alive',    type: 'boolean', defaultValue: true}\n    ],\n\n    validations: [\n        {type: 'presence',  field: 'age'},\n        {type: 'length',    field: 'name',     min: 2},\n        {type: 'inclusion', field: 'gender',   list: ['Male', 'Female']},\n        {type: 'exclusion', field: 'username', list: ['Admin', 'Operator']},\n        {type: 'format',    field: 'username', matcher: /([a-z]+)[0-9]{2,3}/}\n    ]\n});\n</code></pre>\n\n<p>The validations can be run by simply calling the <a href=\"#!/api/Ext.data.Model-method-validate\" rel=\"Ext.data.Model-method-validate\" class=\"docClass\">validate</a> function, which returns a <a href=\"#!/api/Ext.data.Errors\" rel=\"Ext.data.Errors\" class=\"docClass\">Ext.data.Errors</a>\nobject:</p>\n\n<pre><code>var instance = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('User', {\n    name: 'Ed',\n    gender: 'Male',\n    username: 'edspencer'\n});\n\nvar errors = instance.validate();\n</code></pre>\n\n<h1>Associations</h1>\n\n<p>Models can have associations with other Models via <a href=\"#!/api/Ext.data.association.HasOne\" rel=\"Ext.data.association.HasOne\" class=\"docClass\">Ext.data.association.HasOne</a>,\n<a href=\"#!/api/Ext.data.association.BelongsTo\" rel=\"Ext.data.association.BelongsTo\" class=\"docClass\">belongsTo</a> and <a href=\"#!/api/Ext.data.association.HasMany\" rel=\"Ext.data.association.HasMany\" class=\"docClass\">hasMany</a> associations.\nFor example, let's say we're writing a blog administration application which deals with Users, Posts and Comments.\nWe can express the relationships between these models like this:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Post', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['id', 'user_id'],\n\n    belongsTo: 'User',\n    hasMany  : {model: 'Comment', name: 'comments'}\n});\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Comment', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['id', 'user_id', 'post_id'],\n\n    belongsTo: 'Post'\n});\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('User', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['id'],\n\n    hasMany: [\n        'Post',\n        {model: 'Comment', name: 'comments'}\n    ]\n});\n</code></pre>\n\n<p>See the docs for <a href=\"#!/api/Ext.data.association.HasOne\" rel=\"Ext.data.association.HasOne\" class=\"docClass\">Ext.data.association.HasOne</a>, <a href=\"#!/api/Ext.data.association.BelongsTo\" rel=\"Ext.data.association.BelongsTo\" class=\"docClass\">Ext.data.association.BelongsTo</a> and\n<a href=\"#!/api/Ext.data.association.HasMany\" rel=\"Ext.data.association.HasMany\" class=\"docClass\">Ext.data.association.HasMany</a> for details on the usage and configuration of associations.\nNote that associations can also be specified like this:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('User', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['id'],\n\n    associations: [\n        {type: 'hasMany', model: 'Post',    name: 'posts'},\n        {type: 'hasMany', model: 'Comment', name: 'comments'}\n    ]\n});\n</code></pre>\n\n<h1>Using a Proxy</h1>\n\n<p>Models are great for representing types of data and relationships, but sooner or later we're going to want to load or\nsave that data somewhere. All loading and saving of data is handled via a <a href=\"#!/api/Ext.data.proxy.Proxy\" rel=\"Ext.data.proxy.Proxy\" class=\"docClass\">Proxy</a>, which\ncan be set directly on the Model:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('User', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['id', 'name', 'email'],\n\n    proxy: {\n        type: 'rest',\n        url : '/users'\n    }\n});\n</code></pre>\n\n<p>Here we've set up a <a href=\"#!/api/Ext.data.proxy.Rest\" rel=\"Ext.data.proxy.Rest\" class=\"docClass\">Rest Proxy</a>, which knows how to load and save data to and from a\nRESTful backend. Let's see how this works:</p>\n\n<pre><code>var user = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('User', {name: 'Ed Spencer', email: 'ed@sencha.com'});\n\nuser.save(); //POST /users\n</code></pre>\n\n<p>Calling <a href=\"#!/api/Ext.data.Model-method-save\" rel=\"Ext.data.Model-method-save\" class=\"docClass\">save</a> on the new Model instance tells the configured RestProxy that we wish to persist this Model's\ndata onto our server. RestProxy figures out that this Model hasn't been saved before because it doesn't have an id,\nand performs the appropriate action - in this case issuing a POST request to the url we configured (/users). We\nconfigure any Proxy on any Model and always follow this API - see <a href=\"#!/api/Ext.data.proxy.Proxy\" rel=\"Ext.data.proxy.Proxy\" class=\"docClass\">Ext.data.proxy.Proxy</a> for a full list.</p>\n\n<p>Loading data via the Proxy is equally easy:</p>\n\n<pre><code>//get a reference to the User model class\nvar User = <a href=\"#!/api/Ext.ModelManager-method-getModel\" rel=\"Ext.ModelManager-method-getModel\" class=\"docClass\">Ext.ModelManager.getModel</a>('User');\n\n//Uses the configured RestProxy to make a GET request to /users/123\nUser.load(123, {\n    success: function(user) {\n        console.log(user.getId()); //logs 123\n    }\n});\n</code></pre>\n\n<p>Models can also be updated and destroyed easily:</p>\n\n<pre><code>//the user Model we loaded in the last snippet:\nuser.set('name', 'Edward Spencer');\n\n//tells the Proxy to save the Model. In this case it will perform a PUT request to /users/123 as this Model already has an id\nuser.save({\n    success: function() {\n        console.log('The User was updated');\n    }\n});\n\n//tells the Proxy to destroy the Model. Performs a DELETE request to /users/123\nuser.destroy({\n    success: function() {\n        console.log('The User was destroyed!');\n    }\n});\n</code></pre>\n\n<h1>Usage in Stores</h1>\n\n<p>It is very common to want to load a set of Model instances to be displayed and manipulated in the UI. We do this by\ncreating a <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Store</a>:</p>\n\n<pre><code>var store = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    model: 'User'\n});\n\n//uses the Proxy we set up on Model to load the Store data\nstore.load();\n</code></pre>\n\n<p>A Store is just a collection of Model instances - usually loaded from a server somewhere. Store can also maintain a\nset of added, updated and removed Model instances to be synchronized with the server via the Proxy. See the <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Store docs</a> for more information on Stores.</p>\n","!type":"fn(data: ?)","prototype":{"!proto":"Ext.Base.prototype","associations":{"!type":"[?]","!doc":"<p>An array of <a href=\"#!/api/Ext.data.association.Association\" rel=\"Ext.data.association.Association\" class=\"docClass\">associations</a> for this model.</p>\n"},"belongsTo":{"!type":"string|?|[string]|[?]","!doc":"<p>One or more <a href=\"#!/api/Ext.data.association.BelongsTo\" rel=\"Ext.data.association.BelongsTo\" class=\"docClass\">BelongsTo associations</a> for this model.</p>\n"},"clientIdProperty":{"!type":"string","!doc":"<p>The name of a property that is used for submitting this Model's unique client-side identifier\nto the server when multiple phantom records are saved as part of the same <a href=\"#!/api/Ext.data.Operation\" rel=\"Ext.data.Operation\" class=\"docClass\">Operation</a>.\nIn such a case, the server response should include the client id for each record\nso that the server response data can be used to update the client-side records if necessary.\nThis property cannot have the same name as any of this Model's fields.</p>\n"},"defaultProxyType":{"!type":"string","!doc":"<p>The string type of the default Model Proxy. Defaults to 'ajax'.</p>\n"},"fields":{"!type":"+Ext.util.MixedCollection","!doc":"<p>A <a href=\"#!/api/Ext.util.MixedCollection\" rel=\"Ext.util.MixedCollection\" class=\"docClass\">Collection</a> of the fields defined for this Model (including fields defined in superclasses)</p>\n\n<p>This is a collection of <a href=\"#!/api/Ext.data.Field\" rel=\"Ext.data.Field\" class=\"docClass\">Ext.data.Field</a> instances, each of which encapsulates information that the field was configured with.\nBy default, you can specify a field as simply a String, representing the <em>name</em> of the field, but a Field encapsulates\n<a href=\"#!/api/Ext.data.Field-cfg-type\" rel=\"Ext.data.Field-cfg-type\" class=\"docClass\">data type</a>, <a href=\"#!/api/Ext.data.Field-cfg-convert\" rel=\"Ext.data.Field-cfg-convert\" class=\"docClass\">custom conversion</a> of raw data, and a <a href=\"#!/api/Ext.data.Field-cfg-mapping\" rel=\"Ext.data.Field-cfg-mapping\" class=\"docClass\">mapping</a>\nproperty to specify by name of index, how to extract a field's value from a raw data object.</p>\n"},"hasMany":{"!type":"string|?|[string]|[?]","!doc":"<p>One or more <a href=\"#!/api/Ext.data.association.HasMany\" rel=\"Ext.data.association.HasMany\" class=\"docClass\">HasMany associations</a> for this model.</p>\n"},"idProperty":{"!type":"string|?|+Ext.data.Field","!doc":"<p>The name of the field treated as this Model's unique id. Defaults to 'id'.</p>\n\n<p>This may also be specified as a Field config object. This means that the identifying field can be calculated\nusing a <a href=\"#!/api/Ext.data.Field-cfg-convert\" rel=\"Ext.data.Field-cfg-convert\" class=\"docClass\">convert</a> function which might aggregate several values from the\nraw data object to use as an identifier.</p>\n\n<p>The resulting <a href=\"#!/api/Ext.data.Field\" rel=\"Ext.data.Field\" class=\"docClass\">Field</a> is added to the Model's field collection unless there is already\na configured field with a mapping that reads the same property.</p>\n\n<p>If defining an <strong>abstract</strong> base Model class, the <code>idProperty</code> may be configured as <code>null</code> which will mean that\nno identifying field will be generated.</p>\n"},"idgen":{"!type":"string|?","!doc":"<p>The id generator to use for this model. The default id generator does not generate\nvalues for the <a href=\"#!/api/Ext.data.Model-cfg-idProperty\" rel=\"Ext.data.Model-cfg-idProperty\" class=\"docClass\">idProperty</a>.</p>\n\n<p>This can be overridden at the model level to provide a custom generator for a model.\nThe simplest form of this would be:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('MyApp.data.MyModel', {\n     extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n     requires: ['<a href=\"#!/api/Ext.data.SequentialIdGenerator\" rel=\"Ext.data.SequentialIdGenerator\" class=\"docClass\">Ext.data.SequentialIdGenerator</a>'],\n     idgen: 'sequential',\n     ...\n });\n</code></pre>\n\n<p>The above would generate <a href=\"#!/api/Ext.data.SequentialIdGenerator\" rel=\"Ext.data.SequentialIdGenerator\" class=\"docClass\">sequential</a> id's such\nas 1, 2, 3 etc..</p>\n\n<p>Another useful id generator is <a href=\"#!/api/Ext.data.UuidGenerator\" rel=\"Ext.data.UuidGenerator\" class=\"docClass\">Ext.data.UuidGenerator</a>:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('MyApp.data.MyModel', {\n     extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n     requires: ['<a href=\"#!/api/Ext.data.UuidGenerator\" rel=\"Ext.data.UuidGenerator\" class=\"docClass\">Ext.data.UuidGenerator</a>'],\n     idgen: 'uuid',\n     ...\n });\n</code></pre>\n\n<p>An id generation can also be further configured:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('MyApp.data.MyModel', {\n     extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n     idgen: {\n         type: 'sequential',\n         seed: 1000,\n         prefix: 'ID_'\n     }\n });\n</code></pre>\n\n<p>The above would generate id's such as ID_1000, ID_1001, ID_1002 etc..</p>\n\n<p>If multiple models share an id space, a single generator can be shared:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('MyApp.data.MyModelX', {\n     extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n     idgen: {\n         type: 'sequential',\n         id: 'xy'\n     }\n });\n\n <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('MyApp.data.MyModelY', {\n     extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n     idgen: {\n         type: 'sequential',\n         id: 'xy'\n     }\n });\n</code></pre>\n\n<p>For more complex, shared id generators, a custom generator is the best approach.\nSee <a href=\"#!/api/Ext.data.IdGenerator\" rel=\"Ext.data.IdGenerator\" class=\"docClass\">Ext.data.IdGenerator</a> for details on creating custom id generators.</p>\n"},"persistenceProperty":{"!type":"string","!doc":"<p>The name of the property on this Persistable object that its data is saved to. Defaults to 'data'\n(i.e: all persistable data resides in <code>this.data</code>.)</p>\n"},"proxy":{"!type":"string|?|+Ext.data.proxy.Proxy","!doc":"<p>The <a href=\"#!/api/Ext.data.proxy.Proxy\" rel=\"Ext.data.proxy.Proxy\" class=\"docClass\">proxy</a> to use for this model.</p>\n"},"validations":{"!type":"[?]","!doc":"<p>An array of <a href=\"#!/api/Ext.data.validations\" rel=\"Ext.data.validations\" class=\"docClass\">validations</a> for this model.</p>\n"},"_singleProp":{"!type":"?","!doc":"<p>This object is used whenever the set() method is called and given a string as the\nfirst argument. This approach saves memory (and GC costs) since we could be called\na lot.</p>\n"},"dirty":{"!type":"bool","!doc":"<p>True if this Record has been modified.</p>\n"},"editing":{"!type":"bool","!doc":"<p>Internal flag used to track whether or not the model instance is currently being edited.</p>\n"},"emptyData":{"!type":"[?]","!doc":"<p>Used as a dummy source array when constructor is called with no args</p>\n"},"evented":{"!type":"bool"},"internalId":{"!type":"number|string","!doc":"<p>An internal unique ID for each Model instance, used to identify Models that don't have an ID yet</p>\n"},"isModel":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated Model, or subclass thereof.</p>\n"},"modified":{"!type":"?","!doc":"<p>Key: value pairs of all fields whose values have changed</p>\n"},"phantom":{"!type":"bool","!doc":"<p>True when the record does not yet exist in a server-side database (see <a href=\"#!/api/Ext.data.Model-method-setDirty\" rel=\"Ext.data.Model-method-setDirty\" class=\"docClass\">setDirty</a>).\nAny record which has a real database pk set as its id property is NOT a phantom -- it's real.</p>\n"},"raw":{"!type":"?","!doc":"<p>The raw data used to create this model if created via a reader.</p>\n"},"store":{"!type":"+Ext.data.Store","!doc":"<p>The <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Store</a> to which this instance belongs. NOTE: If this\ninstance is bound to multiple stores, this property will reference only the\nfirst. To examine all the stores, use the <a href=\"#!/api/Ext.data.Model-property-stores\" rel=\"Ext.data.Model-property-stores\" class=\"docClass\">stores</a> property instead.</p>\n"},"stores":{"!type":"[+Ext.data.Store]","!doc":"<p>The <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Stores</a> to which this instance is bound.</p>\n"},"afterCommit":{"!type":"fn(modifiedFieldNames?: [string]) -> !this","!doc":"<p>If this Model instance has been <a href=\"#!/api/Ext.data.Model-method-join\" rel=\"Ext.data.Model-method-join\" class=\"docClass\">joined</a> to a <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">store</a>, the store's\nafterCommit method is called,</p>\n"},"afterEdit":{"!type":"fn(modifiedFieldNames?: [string]) -> !this","!doc":"<p>If this Model instance has been <a href=\"#!/api/Ext.data.Model-method-join\" rel=\"Ext.data.Model-method-join\" class=\"docClass\">joined</a> to a <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">store</a>, the store's\nafterEdit method is called.</p>\n"},"afterReject":{"!type":"fn() -> !this","!doc":"<p>If this Model instance has been <a href=\"#!/api/Ext.data.Model-method-join\" rel=\"Ext.data.Model-method-join\" class=\"docClass\">joined</a> to a <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">store</a>, the store's\nafterReject method is called.</p>\n"},"beginEdit":{"!type":"fn() -> !this","!doc":"<p>Begins an edit. While in edit mode, no events (e.g.. the <code>update</code> event) are relayed to the containing store.\nWhen an edit has begun, it must be followed by either <a href=\"#!/api/Ext.data.Model-method-endEdit\" rel=\"Ext.data.Model-method-endEdit\" class=\"docClass\">endEdit</a> or <a href=\"#!/api/Ext.data.Model-method-cancelEdit\" rel=\"Ext.data.Model-method-cancelEdit\" class=\"docClass\">cancelEdit</a>.</p>\n"},"callStore":{"!type":"fn(fn: string) -> !this","!doc":"<p>Helper function used by afterEdit, afterReject and afterCommit. Calls the given method on the\n<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">store</a> that this instance has <a href=\"#!/api/Ext.data.Model-method-join\" rel=\"Ext.data.Model-method-join\" class=\"docClass\">joined</a>, if any. The store function\nwill always be called with the model instance as its single argument. If this model is joined to\na <a href=\"#!/api/Ext.data.NodeStore\" rel=\"Ext.data.NodeStore\" class=\"docClass\">Ext.data.NodeStore</a>, then this method calls the given method on the NodeStore and the associated <a href=\"#!/api/Ext.data.TreeStore\" rel=\"Ext.data.TreeStore\" class=\"docClass\">Ext.data.TreeStore</a></p>\n"},"cancelEdit":{"!type":"fn() -> !this","!doc":"<p>Cancels all changes made in the current edit operation.</p>\n"},"changeId":{"!type":"fn(oldId: ?, newId: ?) -> !this"},"commit":{"!type":"fn(silent?: bool, modifiedFieldNames?: [string]) -> !this","!doc":"<p>Usually called by the <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a> which owns the model instance. Commits all changes made to the\ninstance since either creation or the last commit operation.</p>\n\n<p>Developers should subscribe to the <a href=\"#!/api/Ext.data.Store-event-update\" rel=\"Ext.data.Store-event-update\" class=\"docClass\">Ext.data.Store.update</a> event to have their code notified of commit\noperations.</p>\n"},"compareConvertFields":{"!type":"fn(f1: ?, f2: ?) -> !this"},"copy":{"!type":"fn(id?: string) -> +Ext.data.Model","!doc":"<p>Creates a copy (clone) of this Model instance.</p>\n"},"copyFrom":{"!type":"fn(sourceRecord: +Ext.data.Model) -> [string]","!doc":"<p>Copies data from the passed record into this record. If the passed record is undefined, does nothing.</p>\n\n<p>If this is a phantom record (represented only in the client, with no corresponding database entry), and\nthe source record is not a phantom, then this record acquires the id of the source record.</p>\n"},"destroy":{"!type":"fn(options: ?) -> +Ext.data.Model","!doc":"<p>Destroys the model using the configured proxy.</p>\n"},"endEdit":{"!type":"fn(silent?: bool, modifiedFieldNames?: [string]) -> !this","!doc":"<p>Ends an edit. If any data was modified, the containing store is notified\n(ie, the store's <code>update</code> event will fire).</p>\n"},"get":{"!type":"fn(fieldName: string) -> ?","!doc":"<p>Returns the value of the given field</p>\n"},"getAssociatedData":{"!type":"fn() -> ?","!doc":"<p>Gets all of the data from this Models <em>loaded</em> associations. It does this recursively - for example if we have a\nUser which hasMany Orders, and each Order hasMany OrderItems, it will return an object like this:</p>\n\n<pre><code>{\n    orders: [\n        {\n            id: 123,\n            status: 'shipped',\n            orderItems: [\n                ...\n            ]\n        }\n    ]\n}\n</code></pre>\n"},"getChanges":{"!type":"fn() -> ?","!doc":"<p>Gets a hash of only the fields that have been modified since this Model was created or commited.</p>\n"},"getData":{"!type":"fn(includeAssociated: bool) -> ?","!doc":"<p>Gets all values for each field in this model and returns an object\ncontaining the current data.</p>\n"},"getId":{"!type":"fn() -> number|string","!doc":"<p>Returns the unique ID allocated to this model instance as defined by <a href=\"#!/api/Ext.data.Model-cfg-idProperty\" rel=\"Ext.data.Model-cfg-idProperty\" class=\"docClass\">idProperty</a>.</p>\n"},"getModifiedFieldNames":{"!type":"fn(saved?: ?) -> [string]","!doc":"<p>Gets the names of all the fields that were modified during an edit</p>\n"},"getObservableId":{"!type":"fn() -> !this"},"getProxy":{"!type":"fn() -> +Ext.data.proxy.Proxy","!doc":"<p>Returns the configured Proxy for this Model.</p>\n"},"hasId":{"!type":"fn(id?: ?) -> bool","!doc":"<p>Checks if this model has an id assigned</p>\n"},"isEqual":{"!type":"fn(a: ?, b: ?) -> bool","!doc":"<p>Checks if two values are equal, taking into account certain\nspecial factors, for example dates.</p>\n"},"isModified":{"!type":"fn(fieldName: string) -> bool","!doc":"<p>Returns true if the passed field name has been <code><a href=\"#!/api/Ext.data.Model-property-modified\" rel=\"Ext.data.Model-property-modified\" class=\"docClass\">modified</a></code> since the load or last commit.</p>\n"},"isValid":{"!type":"fn() -> bool","!doc":"<p>Checks if the model is valid. See <a href=\"#!/api/Ext.data.Model-method-validate\" rel=\"Ext.data.Model-method-validate\" class=\"docClass\">validate</a>.</p>\n"},"itemNameFn":{"!type":"fn(item: ?) -> !this"},"join":{"!type":"fn(store: +Ext.data.Store) -> !this","!doc":"<p>Tells this model instance that it has been added to a store.</p>\n"},"markDirty":{"!type":"fn() -> !this","!doc":"<p><debug></debug></p>\n"},"onClassExtended":{"!type":"fn(cls: ?, data: ?, hooks: ?) -> !this"},"prepareAssociatedData":{"!type":"fn(seenKeys: ?, depth: number) -> ?","!doc":"<p>This complex-looking method takes a given Model instance and returns an object containing all data from\nall of that Model's <em>loaded</em> associations. See <a href=\"#!/api/Ext.data.Model-method-getAssociatedData\" rel=\"Ext.data.Model-method-getAssociatedData\" class=\"docClass\">getAssociatedData</a></p>\n"},"reject":{"!type":"fn(silent?: bool) -> !this","!doc":"<p>Usually called by the <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a> to which this model instance has been <a href=\"#!/api/Ext.data.Model-method-join\" rel=\"Ext.data.Model-method-join\" class=\"docClass\">joined</a>. Rejects\nall changes made to the model instance since either creation, or the last commit operation. Modified fields are\nreverted to their original values.</p>\n\n<p>Developers should subscribe to the <a href=\"#!/api/Ext.data.Store-event-update\" rel=\"Ext.data.Store-event-update\" class=\"docClass\">Ext.data.Store.update</a> event to have their code notified of reject\noperations.</p>\n"},"save":{"!type":"fn(options?: ?) -> +Ext.data.Model","!doc":"<p>Saves the model instance using the configured proxy.</p>\n"},"set":{"!type":"fn(fieldName: string|?, newValue: ?) -> [string]","!doc":"<p>Sets the given field to the given value, marks the instance as dirty</p>\n"},"setDirty":{"!type":"fn() -> !this","!doc":"<p>Marks this <strong>Record</strong> as <code><a href=\"#!/api/Ext.data.Model-property-dirty\" rel=\"Ext.data.Model-property-dirty\" class=\"docClass\">dirty</a></code>. This method is used interally when adding <code><a href=\"#!/api/Ext.data.Model-property-phantom\" rel=\"Ext.data.Model-property-phantom\" class=\"docClass\">phantom</a></code> records\nto a <a href=\"#!/api/Ext.data.proxy.Server-cfg-writer\" rel=\"Ext.data.proxy.Server-cfg-writer\" class=\"docClass\">writer enabled store</a>.</p>\n\n<p>Marking a record <code><a href=\"#!/api/Ext.data.Model-property-dirty\" rel=\"Ext.data.Model-property-dirty\" class=\"docClass\">dirty</a></code> causes the phantom to be returned by <a href=\"#!/api/Ext.data.Store-method-getUpdatedRecords\" rel=\"Ext.data.Store-method-getUpdatedRecords\" class=\"docClass\">Ext.data.Store.getUpdatedRecords</a>\nwhere it will have a create action composed for it during <a href=\"#!/api/Ext.data.Model-method-save\" rel=\"Ext.data.Model-method-save\" class=\"docClass\">model save</a> operations.</p>\n"},"setId":{"!type":"fn(id: number|string) -> !this","!doc":"<p>Sets the model instance's id field to the given id.</p>\n"},"setProxy":{"!type":"fn(proxy: string|?|+Ext.data.proxy.Proxy) -> +Ext.data.proxy.Proxy","!doc":"<p>Sets the Proxy to use for this model. Accepts any options that can be accepted by\n<a href=\"#!/api/Ext-method-createByAlias\" rel=\"Ext-method-createByAlias\" class=\"docClass\">Ext.createByAlias</a>.</p>\n"},"unjoin":{"!type":"fn(store: +Ext.data.Store) -> !this","!doc":"<p>Tells this model instance that it has been removed from the store.</p>\n"},"validate":{"!type":"fn() -> +Ext.data.Errors","!doc":"<p>Validates the current data against all of its configured <a href=\"#!/api/Ext.data.Model-cfg-validations\" rel=\"Ext.data.Model-cfg-validations\" class=\"docClass\">validations</a>.</p>\n"},"idchanged":{"!type":"fn(this: +Ext.data.Model, oldId: number|string, newId: number|string, eOpts: ?)","!doc":"<p>Fired when this model's id changes</p>\n"}},"AUTO_ID":{"!type":"number"},"COMMIT":{"!type":"string","!doc":"<p>The update operation of type 'commit'. Used by <a href=\"#!/api/Ext.data.Store-event-update\" rel=\"Ext.data.Store-event-update\" class=\"docClass\">Store.update</a> event.</p>\n"},"EDIT":{"!type":"string","!doc":"<p>The update operation of type 'edit'. Used by <a href=\"#!/api/Ext.data.Store-event-update\" rel=\"Ext.data.Store-event-update\" class=\"docClass\">Store.update</a> event.</p>\n"},"PREFIX":{"!type":"string"},"REJECT":{"!type":"string","!doc":"<p>The update operation of type 'reject'. Used by <a href=\"#!/api/Ext.data.Store-event-update\" rel=\"Ext.data.Store-event-update\" class=\"docClass\">Store.update</a> event.</p>\n"},"getFields":{"!type":"fn() -> [+Ext.data.Field]","!doc":"<p>Returns an Array of <a href=\"#!/api/Ext.data.Field\" rel=\"Ext.data.Field\" class=\"docClass\">Field</a> definitions which define this Model's structure</p>\n\n<p>Fields are sorted upon Model class definition. Fields with custom <a href=\"#!/api/Ext.data.Field-cfg-convert\" rel=\"Ext.data.Field-cfg-convert\" class=\"docClass\">convert</a> functions\nare moved to <em>after</em> fields with no convert functions. This is so that convert functions which rely on existing\nfield values will be able to read those field values.</p>\n"},"getProxy":{"!type":"fn() -> +Ext.data.proxy.Proxy","!doc":"<p>Returns the configured Proxy for this Model</p>\n"},"id":{"!type":"fn(rec: +Ext.data.Model) -> string","!doc":"<p>Generates a sequential id. This method is typically called when a record is <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">create</a>d and <a href=\"#!/api/Ext.data.Model-method-constructor\" rel=\"Ext.data.Model-method-constructor\" class=\"docClass\">no id has been specified</a> either as a parameter, or through the <a href=\"#!/api/Ext.data.Model-cfg-idProperty\" rel=\"Ext.data.Model-cfg-idProperty\" class=\"docClass\">idProperty</a>\nin the passed data. The generated id will automatically be assigned to the\nrecord. The returned id takes the form: {PREFIX}-{AUTO_ID}.</p>\n\n<ul>\n<li><strong>PREFIX</strong> : String - <a href=\"#!/api/Ext.data.Model-static-property-PREFIX\" rel=\"Ext.data.Model-static-property-PREFIX\" class=\"docClass\">Ext.data.Model.PREFIX</a> (defaults to 'ext-record')</li>\n<li><strong>AUTO_ID</strong> : String - <a href=\"#!/api/Ext.data.Model-static-property-AUTO_ID\" rel=\"Ext.data.Model-static-property-AUTO_ID\" class=\"docClass\">Ext.data.Model.AUTO_ID</a> (defaults to 1 initially)</li>\n</ul>\n\n"},"load":{"!type":"fn(id: number|string, config?: ?) -> !this","!doc":"<p>Asynchronously loads a model instance by id. Sample usage:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('MyApp.User', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: [\n        {name: 'id', type: 'int'},\n        {name: 'name', type: 'string'}\n    ]\n});\n\nMyApp.User.load(10, {\n    scope: this,\n    failure: function(record, operation) {\n        //do something if the load failed\n        //record is null\n    },\n    success: function(record, operation) {\n        //do something if the load succeeded\n    },\n    callback: function(record, operation, success) {\n        //do something whether the load succeeded or failed\n        //if operation is unsuccessful, record is null\n    }\n});\n</code></pre>\n"},"setFields":{"!type":"fn(fields: ?, idProperty: ?, clientIdProperty: ?) -> !this","!doc":"<p>Apply a new set of field and/or property definitions to the existing model. This will replace any existing\nfields, including fields inherited from superclasses. Mainly for reconfiguring the\nmodel based on changes in meta data (called from Reader's onMetaChange method).</p>\n"},"setProxy":{"!type":"fn(proxy: string|?|+Ext.data.proxy.Proxy) -> +Ext.data.proxy.Proxy","!doc":"<p>Sets the Proxy to use for this model. Accepts any options that can be accepted by\n<a href=\"#!/api/Ext-method-createByAlias\" rel=\"Ext-method-createByAlias\" class=\"docClass\">Ext.createByAlias</a>.</p>\n"}},"NodeInterface":{"!doc":"<p>This class is used as a set of methods that are applied to the prototype of a\nModel to decorate it with a Node API. This means that models used in conjunction with a tree\nwill have all of the tree related methods available on the model. In general this class will\nnot be used directly by the developer. This class also creates extra fields on the model if\nthey do not exist, to help maintain the tree state and UI. These fields are documented as\nconfig options.</p>\n","prototype":{"allowDrag":{"!type":"bool","!doc":"<p>Set to false to deny dragging of this node.</p>\n"},"allowDrop":{"!type":"bool","!doc":"<p>Set to false to deny dropping on this node.</p>\n"},"checked":{"!type":"bool","!doc":"<p>Set to true or false to show a checkbox alongside this node.</p>\n"},"children":{"!type":"[+Ext.data.NodeInterface]","!doc":"<p>Array of child nodes.</p>\n"},"cls":{"!type":"string","!doc":"<p>CSS class to apply for this node.</p>\n"},"depth":{"!type":"number","!doc":"<p>The number of parents this node has. A root node has depth 0, a child of it depth 1, and so on...</p>\n"},"expandable":{"!type":"bool","!doc":"<p>Set to true to allow for expanding/collapsing of this node.</p>\n"},"expanded":{"!type":"bool","!doc":"<p>True if the node is expanded.</p>\n"},"href":{"!type":"string","!doc":"<p>An URL for a link that's created when this config is specified.</p>\n"},"hrefTarget":{"!type":"string","!doc":"<p>Target for link. Only applicable when <a href=\"#!/api/Ext.data.NodeInterface-cfg-href\" rel=\"Ext.data.NodeInterface-cfg-href\" class=\"docClass\">href</a> also specified.</p>\n"},"icon":{"!type":"string","!doc":"<p>URL for this node's icon.</p>\n"},"iconCls":{"!type":"string","!doc":"<p>CSS class to apply for this node's icon.</p>\n"},"index":{"!type":"number","!doc":"<p>The position of the node inside its parent. When parent has 4 children and the node is third amongst them,\nindex will be 2.</p>\n"},"isFirst":{"!type":"fn() -> bool","!doc":"<p>Returns true if this node is the first child of its parent</p>\n"},"isLast":{"!type":"fn() -> bool","!doc":"<p>Returns true if this node is the last child of its parent</p>\n"},"leaf":{"!type":"bool","!doc":"<p>Set to true to indicate that this child can have no children. The expand icon/arrow will then not be\nrendered for this node.</p>\n"},"loaded":{"!type":"bool","!doc":"<p>True if the node has finished loading.</p>\n"},"loading":{"!type":"bool","!doc":"<p>True if the node is currently loading.</p>\n"},"parentId":{"!type":"string","!doc":"<p>ID of parent node.</p>\n"},"qshowDelay":{"!type":"number","!doc":"<p>Tooltip showDelay.</p>\n"},"qtip":{"!type":"string","!doc":"<p>Tooltip text to show on this node.</p>\n"},"qtitle":{"!type":"string","!doc":"<p>Tooltip title.</p>\n"},"root":{"!type":"bool","!doc":"<p>True if this is the root node.</p>\n"},"text":{"!type":"string","!doc":"<p>The text to show on node label.</p>\n"},"childNodes":{"!type":"[+Ext.data.NodeInterface]","!doc":"<p>An array of this nodes children.  Array will be empty if this node has no chidren.</p>\n"},"firstChild":{"!type":"+Ext.data.NodeInterface","!doc":"<p>A reference to this node's first child node. <code>null</code> if this node has no children.</p>\n"},"isNode":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated Node, or subclass thereof.</p>\n"},"lastChild":{"!type":"+Ext.data.NodeInterface","!doc":"<p>A reference to this node's last child node. <code>null</code> if this node has no children.</p>\n"},"nextSibling":{"!type":"+Ext.data.NodeInterface","!doc":"<p>A reference to this node's next sibling node. <code>null</code> if this node does not have a next sibling.</p>\n"},"parentNode":{"!type":"+Ext.data.NodeInterface","!doc":"<p>A reference to this node's parent node. <code>null</code> if this node is the root node.</p>\n"},"previousSibling":{"!type":"+Ext.data.NodeInterface","!doc":"<p>A reference to this node's previous sibling node. <code>null</code> if this node does not have a previous sibling.</p>\n"},"appendChild":{"!type":"fn(node: +Ext.data.NodeInterface|[+Ext.data.NodeInterface]|?, suppressEvents?: bool, commit?: bool) -> +Ext.data.NodeInterface","!doc":"<p>Inserts node(s) as the last child node of this node.</p>\n\n<p>If the node was previously a child node of another parent node, it will be removed from that node first.</p>\n"},"bubble":{"!type":"fn(fn: fn(), scope?: ?, args?: [?]) -> !this","!doc":"<p>Bubbles up the tree from this node, calling the specified function with each node. The arguments to the function\nwill be the args provided or the current node. If the function returns false at any point,\nthe bubble is stopped.</p>\n"},"cascadeBy":{"!type":"fn(fn: fn(), scope?: ?, args?: [?]) -> !this","!doc":"<p>Cascades down the tree from this node, calling the specified function with each node. The arguments to the function\nwill be the args provided or the current node. If the function returns false at any point,\nthe cascade is stopped on that branch.</p>\n"},"clear":{"!type":"fn(destroy?: bool) -> !this","!doc":"<p>Clears the node.</p>\n"},"collapse":{"!type":"fn(this: +Ext.data.NodeInterface, eOpts: ?)","!doc":"<p>Fires when this node is collapsed.</p>\n"},"collapseChildren":{"!type":"fn(recursive?: fn(), callback?: fn(), scope?: ?) -> !this","!doc":"<p>Collapse all the children of this node.</p>\n"},"contains":{"!type":"fn(node: +Ext.data.NodeInterface) -> bool","!doc":"<p>Returns true if this node is an ancestor (at any point) of the passed node.</p>\n"},"copy":{"!type":"fn(id?: string, deep?: bool) -> +Ext.data.NodeInterface","!doc":"<p>Creates a copy (clone) of this Node.</p>\n"},"createNode":{"!type":"fn(node: ?) -> +Ext.data.NodeInterface","!doc":"<p>Ensures that the passed object is an instance of a Record with the NodeInterface applied</p>\n"},"destroy":{"!type":"fn(silent: ?) -> !this","!doc":"<p>Destroys the node.</p>\n"},"eachChild":{"!type":"fn(fn: fn(), scope?: ?, args?: [?]) -> !this","!doc":"<p>Interates the child nodes of this node, calling the specified function with each node. The arguments to the function\nwill be the args provided or the current node. If the function returns false at any point,\nthe iteration stops.</p>\n"},"expand":{"!type":"fn(this: +Ext.data.NodeInterface, eOpts: ?)","!doc":"<p>Fires when this node is expanded.</p>\n"},"expandChildren":{"!type":"fn(recursive?: bool, callback?: fn(), scope?: ?) -> !this","!doc":"<p>Expand all the children of this node.</p>\n"},"findChild":{"!type":"fn(attribute: string, value: ?, deep?: bool) -> +Ext.data.NodeInterface","!doc":"<p>Finds the first child that has the attribute with the specified value.</p>\n"},"findChildBy":{"!type":"fn(fn: fn(), scope?: ?, deep?: bool) -> +Ext.data.NodeInterface","!doc":"<p>Finds the first child by a custom function. The child matches if the function passed returns true.</p>\n"},"getChildAt":{"!type":"fn(index: number) -> +Ext.data.NodeInterface","!doc":"<p>Returns the child node at the specified index.</p>\n"},"getDepth":{"!type":"fn() -> number","!doc":"<p>Returns depth of this node (the root node has a depth of 0)</p>\n"},"getOwnerTree":{"!type":"fn() -> +Ext.tree.Panel","!doc":"<p>Returns the tree this node is in.</p>\n"},"getPath":{"!type":"fn(field?: string, separator?: string) -> string","!doc":"<p>Gets the hierarchical path from the root of the current node.</p>\n"},"hasChildNodes":{"!type":"fn() -> bool","!doc":"<p>Returns true if this node has one or more child nodes, else false.</p>\n"},"indexOf":{"!type":"fn(node: +Ext.data.NodeInterface) -> number","!doc":"<p>Returns the index of a child node</p>\n"},"indexOfId":{"!type":"fn(id: string) -> number","!doc":"<p>Returns the index of a child node that matches the id</p>\n"},"insertBefore":{"!type":"fn(node: +Ext.data.NodeInterface, refNode: +Ext.data.NodeInterface) -> +Ext.data.NodeInterface","!doc":"<p>Inserts the first node before the second node in this nodes childNodes collection.</p>\n"},"insertChild":{"!type":"fn(index: number, node: +Ext.data.NodeInterface) -> +Ext.data.NodeInterface","!doc":"<p>Inserts a node into this node.</p>\n"},"isAncestor":{"!type":"fn(node: +Ext.data.NodeInterface) -> bool","!doc":"<p>Returns true if the passed node is an ancestor (at any point) of this node.</p>\n"},"isExpandable":{"!type":"fn() -> bool","!doc":"<p>Returns true if this node has one or more child nodes, or if the <tt>expandable</tt>\nnode attribute is explicitly specified as true, otherwise returns false.</p>\n"},"isExpanded":{"!type":"fn() -> bool","!doc":"<p>Returns true if this node is expaned</p>\n"},"isLeaf":{"!type":"fn() -> bool","!doc":"<p>Returns true if this node is a leaf</p>\n"},"isLoaded":{"!type":"fn() -> bool","!doc":"<p>Returns true if this node is loaded</p>\n"},"isLoading":{"!type":"fn() -> bool","!doc":"<p>Returns true if this node is loading</p>\n"},"isRoot":{"!type":"fn() -> bool","!doc":"<p>Returns true if this node is the root node</p>\n"},"isVisible":{"!type":"fn() -> bool","!doc":"<p>Returns true if this node is visible. Note that visibility refers to\nthe structure of the tree, the <a href=\"#!/api/Ext.tree.Panel-cfg-rootVisible\" rel=\"Ext.tree.Panel-cfg-rootVisible\" class=\"docClass\">Ext.tree.Panel.rootVisible</a>\nconfiguration is not taken into account here. If this method is called\non the root node, it will always be visible.</p>\n"},"onChildNodesAvailable":{"!type":"fn(records: ?, recursive: ?, callback: ?, scope: ?) -> !this","!doc":"<p>Called as a callback from the beforeexpand listener fired by <a href=\"#!/api/Ext.data.NodeInterface-method-expand\" rel=\"Ext.data.NodeInterface-method-expand\" class=\"docClass\">expand</a> when the child nodes have been loaded and appended.</p>\n"},"remove":{"!type":"fn(this: +Ext.data.NodeInterface, node: +Ext.data.NodeInterface, isMove: bool, eOpts: ?)","!doc":"<p>Fires when a child node is removed</p>\n"},"removeAll":{"!type":"fn(destroy?: bool) -> +Ext.data.NodeInterface","!doc":"<p>Removes all child nodes from this node.</p>\n"},"removeChild":{"!type":"fn(node: +Ext.data.NodeInterface, destroy?: bool) -> +Ext.data.NodeInterface","!doc":"<p>Removes a child node from this node.</p>\n"},"replaceChild":{"!type":"fn(newChild: +Ext.data.NodeInterface, oldChild: +Ext.data.NodeInterface) -> +Ext.data.NodeInterface","!doc":"<p>Replaces one child node in this node with another.</p>\n"},"serialize":{"!type":"fn() -> !this","!doc":"<p>Creates an object representation of this node including its children.</p>\n"},"setCollapsed":{"!type":"fn(recursive: ?) -> !this","!doc":"<p>Sets the node into the collapsed state without affecting the UI.</p>\n\n<p>This is called when a node is collapsed with the recursive flag. All the descendant\nnodes will have been removed from the store, but descendant non-leaf nodes still\nneed to be set to the collapsed state without affecting the UI.</p>\n"},"setFirstChild":{"!type":"fn(node: +Ext.data.NodeInterface) -> !this","!doc":"<p>Sets the first child of this node</p>\n"},"setLastChild":{"!type":"fn(node: +Ext.data.NodeInterface) -> !this","!doc":"<p>Sets the last child of this node</p>\n"},"sort":{"!type":"fn(this: +Ext.data.NodeInterface, childNodes: [+Ext.data.NodeInterface], eOpts: ?)","!doc":"<p>Fires when this node's childNodes are sorted.</p>\n"},"updateInfo":{"!type":"fn(commit: bool, info: ?) -> !this","!doc":"<p>Updates general data of this node like isFirst, isLast, depth. This\nmethod is internally called after a node is moved. This shouldn't\nhave to be called by the developer unless they are creating custom\nTree plugins.</p>\n"},"append":{"!type":"fn(this: +Ext.data.NodeInterface, node: +Ext.data.NodeInterface, index: number, eOpts: ?)","!doc":"<p>Fires when a new child node is appended</p>\n"},"beforeappend":{"!type":"fn(this: +Ext.data.NodeInterface, node: +Ext.data.NodeInterface, eOpts: ?)","!doc":"<p>Fires before a new child is appended, return false to cancel the append.</p>\n"},"beforecollapse":{"!type":"fn(this: +Ext.data.NodeInterface, eOpts: ?)","!doc":"<p>Fires before this node is collapsed.</p>\n"},"beforeexpand":{"!type":"fn(this: +Ext.data.NodeInterface, eOpts: ?)","!doc":"<p>Fires before this node is expanded.</p>\n"},"beforeinsert":{"!type":"fn(this: +Ext.data.NodeInterface, node: +Ext.data.NodeInterface, refNode: +Ext.data.NodeInterface, eOpts: ?)","!doc":"<p>Fires before a new child is inserted, return false to cancel the insert.</p>\n"},"beforemove":{"!type":"fn(this: +Ext.data.NodeInterface, oldParent: +Ext.data.NodeInterface, newParent: +Ext.data.NodeInterface, index: number, eOpts: ?)","!doc":"<p>Fires before this node is moved to a new location in the tree. Return false to cancel the move.</p>\n"},"beforeremove":{"!type":"fn(this: +Ext.data.NodeInterface, node: +Ext.data.NodeInterface, isMove: bool, eOpts: ?)","!doc":"<p>Fires before a child is removed, return false to cancel the remove.</p>\n"},"insert":{"!type":"fn(this: +Ext.data.NodeInterface, node: +Ext.data.NodeInterface, refNode: +Ext.data.NodeInterface, eOpts: ?)","!doc":"<p>Fires when a new child node is inserted.</p>\n"},"move":{"!type":"fn(this: +Ext.data.NodeInterface, oldParent: +Ext.data.NodeInterface, newParent: +Ext.data.NodeInterface, index: number, eOpts: ?)","!doc":"<p>Fires when this node is moved to a new location in the tree</p>\n"}},"applyFields":{"!type":"fn(modelClass: ?, addFields: ?) -> !this"},"decorate":{"!type":"fn(modelClass: +Ext.Class|+Ext.data.Model) -> !this","!doc":"<p>This method allows you to decorate a Model's class to implement the NodeInterface.\nThis adds a set of methods, new events, new properties and new fields on every Record.</p>\n"},"getPrototypeBody":{"!type":"fn() -> !this"}},"NodeStore":{"!doc":"<p>Node Store</p>\n","!type":"fn(config: Ext_data_NodeStore_cfg)","prototype":{"!proto":"Ext.data.Store.prototype","node":{"!type":"+Ext.data.Model","!doc":"<p>The Record you want to bind this Store to. Note that\nthis record will be decorated with the <a href=\"#!/api/Ext.data.NodeInterface\" rel=\"Ext.data.NodeInterface\" class=\"docClass\">Ext.data.NodeInterface</a> if this is not the\ncase yet.</p>\n"},"recursive":{"!type":"bool","!doc":"<p>Set this to true if you want this NodeStore to represent\nall the descendents of the node in its flat data collection. This is useful for\nrendering a tree structure to a DataView and is being used internally by\nthe TreeView. Any records that are moved, removed, inserted or appended to the\nnode at any depth below the node this store is bound to will be automatically\nupdated in this Store's internal flat data structure.</p>\n"},"rootVisible":{"!type":"bool","!doc":"<p>False to not include the root node in this Stores collection.</p>\n"},"treeStore":{"!type":"+Ext.data.TreeStore","!doc":"<p>The TreeStore that is used by this NodeStore's <a href=\"#!/api/Ext.tree.View\" rel=\"Ext.tree.View\" class=\"docClass\">Ext.tree.View</a>.</p>\n"},"isExpandingOrCollapsing":{"!type":"number","!doc":"<p>Recursion level counter. Incremented when expansion or collaping of a node is initiated,\nincluding when nested nodes below the expanding/collapsing root begin expanding or collapsing.</p>\n\n<p>This ensures that collapsestart, collapsecomplete, expandstart and expandcomplete only\nfire on the top level node being collapsed/expanded.</p>\n\n<p>Also, allows listeners to the <code>add</code> and <code>remove</code> events to know whether a collapse of expand is in progress.</p>\n"},"isNodeStore":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated NodeStore, or subclass thereof.</p>\n"},"getTotalCount":{"!type":"fn() -> number","!doc":"<p>NodeStores are never buffered or paged. They are loaded from the TreeStore to reflect all visible\nnodes.\nBufferedRenderer always asks for the <em>total</em> count, so this must return the count.</p>\n"},"handleNodeExpand":{"!type":"fn(parent: ?, records: ?, toAdd: ?) -> !this","!doc":"<p>Collects child nodes to remove into the passed toRemove array.\nWhen available, all descendant nodes are pushed into that array using recursion.</p>\n"},"isVisible":{"!type":"fn(node: ?) -> !this"},"onBulkRemove":{"!type":"fn(parent: ?, childNodes: ?, isMove: ?) -> !this","!doc":"<p>Triggered by NodeInterface's bubbled bulkremove event</p>\n"},"onNodeAppend":{"!type":"fn(parent: ?, node: ?, index: ?) -> !this"},"onNodeCollapse":{"!type":"fn(parent: ?, records: ?, suppressEvent: ?, callback: ?, scope: ?) -> !this","!doc":"<p>Triggered by a NodeInterface's bubbled \"collapse\" event.</p>\n"},"onNodeExpand":{"!type":"fn(parent: ?, records: ?, suppressEvent: ?) -> !this","!doc":"<p>Triggered by a NodeInterface's bubbled \"expand\" event.</p>\n"},"onNodeInsert":{"!type":"fn(parent: ?, node: ?, refNode: ?) -> !this"},"onNodeRemove":{"!type":"fn(parent: ?, node: ?, isMove: ?) -> !this"},"onNodeSort":{"!type":"fn(node: ?, childNodes: ?) -> !this"},"setNode":{"!type":"fn(node: ?) -> !this"}}},"Operation":{"!doc":"<p>Represents a single read or write operation performed by a <a href=\"#!/api/Ext.data.proxy.Proxy\" rel=\"Ext.data.proxy.Proxy\" class=\"docClass\">Proxy</a>. Operation objects are\nused to enable communication between Stores and Proxies. Application developers should rarely need to interact with\nOperation objects directly.</p>\n\n<p>Several Operations can be batched together in a <a href=\"#!/api/Ext.data.Batch\" rel=\"Ext.data.Batch\" class=\"docClass\">batch</a>.</p>\n","!type":"fn(config?: Ext_data_Operation_cfg)","prototype":{"!proto":"Ext.Base.prototype","action":{"!type":"string","!doc":"<p>The action being performed by this Operation. Should be one of 'create', 'read', 'update' or 'destroy'.</p>\n"},"batch":{"!type":"+Ext.data.Batch","!doc":"<p>The batch that this Operation is a part of.</p>\n"},"callback":{"!type":"fn()","!doc":"<p>Function to execute when operation completed.</p>\n"},"filters":{"!type":"[+Ext.util.Filter]","!doc":"<p>Optional array of filter objects. Only applies to 'read' actions.</p>\n"},"groupers":{"!type":"[+Ext.util.Grouper]","!doc":"<p>Optional grouping configuration. Only applies to 'read' actions where grouping is desired.</p>\n"},"limit":{"!type":"number","!doc":"<p>The number of records to load. Used on 'read' actions when paging is being used.</p>\n"},"params":{"!type":"?","!doc":"<p>Parameters to pass along with the request when performing the operation.</p>\n"},"scope":{"!type":"?","!doc":"<p>Scope for the <a href=\"#!/api/Ext.data.Operation-cfg-callback\" rel=\"Ext.data.Operation-cfg-callback\" class=\"docClass\">callback</a> function.</p>\n"},"sorters":{"!type":"[+Ext.util.Sorter]","!doc":"<p>Optional array of sorter objects. Only applies to 'read' actions.</p>\n"},"start":{"!type":"number","!doc":"<p>The start index (offset), used in paging when running a 'read' action.</p>\n"},"synchronous":{"!type":"bool","!doc":"<p>True if this Operation is to be executed synchronously. This property is inspected by a\n<a href=\"#!/api/Ext.data.Batch\" rel=\"Ext.data.Batch\" class=\"docClass\">Batch</a> to see if a series of Operations can be executed in parallel or not.</p>\n"},"actionCommitRecordsRe":{"!type":"+RegExp","!doc":"<p>The RegExp used to categorize actions that require record commits.</p>\n"},"actionSkipSyncRe":{"!type":"+RegExp","!doc":"<p>The RegExp used to categorize actions that skip local record synchronization. This defaults\nto match 'destroy'.</p>\n"},"complete":{"!type":"bool","!doc":"<p>The completion status of this Operation. Use <a href=\"#!/api/Ext.data.Operation-method-isComplete\" rel=\"Ext.data.Operation-method-isComplete\" class=\"docClass\">isComplete</a>.</p>\n"},"error":{"!type":"string|?","!doc":"<p>The error object passed when <a href=\"#!/api/Ext.data.Operation-method-setException\" rel=\"Ext.data.Operation-method-setException\" class=\"docClass\">setException</a> was called. This could be any object or primitive.</p>\n"},"exception":{"!type":"bool","!doc":"<p>The exception status of this Operation. Use <a href=\"#!/api/Ext.data.Operation-method-hasException\" rel=\"Ext.data.Operation-method-hasException\" class=\"docClass\">hasException</a> and see <a href=\"#!/api/Ext.data.Operation-method-getError\" rel=\"Ext.data.Operation-method-getError\" class=\"docClass\">getError</a>.</p>\n"},"running":{"!type":"bool","!doc":"<p>The run status of this Operation. Use <a href=\"#!/api/Ext.data.Operation-method-isRunning\" rel=\"Ext.data.Operation-method-isRunning\" class=\"docClass\">isRunning</a>.</p>\n"},"started":{"!type":"bool","!doc":"<p>The start status of this Operation. Use <a href=\"#!/api/Ext.data.Operation-method-isStarted\" rel=\"Ext.data.Operation-method-isStarted\" class=\"docClass\">isStarted</a>.</p>\n"},"success":{"!type":"bool","!doc":"<p>Whether the Operation was successful or not. This starts as undefined and is set to true\nor false by the Proxy that is executing the Operation. It is also set to false by <a href=\"#!/api/Ext.data.Operation-method-setException\" rel=\"Ext.data.Operation-method-setException\" class=\"docClass\">setException</a>. Use\n<a href=\"#!/api/Ext.data.Operation-method-wasSuccessful\" rel=\"Ext.data.Operation-method-wasSuccessful\" class=\"docClass\">wasSuccessful</a> to query success status.</p>\n"},"allowWrite":{"!type":"fn() -> bool","!doc":"<p>Checks whether this operation should cause writing to occur.</p>\n"},"commitRecords":{"!type":"fn(serverRecords: [+Ext.data.Model]) -> !this","!doc":"<p>This method is called to commit data to this instance's records given the records in\nthe server response. This is followed by calling <a href=\"#!/api/Ext.data.Model-method-commit\" rel=\"Ext.data.Model-method-commit\" class=\"docClass\">Ext.data.Model.commit</a> on all\nthose records (for 'create' and 'update' actions).</p>\n\n<p>If this <a href=\"#!/api/Ext.data.Operation-cfg-action\" rel=\"Ext.data.Operation-cfg-action\" class=\"docClass\">action</a> is 'destroy', any server records are ignored and the\n<a href=\"#!/api/Ext.data.Model-method-commit\" rel=\"Ext.data.Model-method-commit\" class=\"docClass\">Ext.data.Model.commit</a> method is not called.</p>\n"},"getError":{"!type":"fn() -> string|?","!doc":"<p>Returns the error string or object that was set using <a href=\"#!/api/Ext.data.Operation-method-setException\" rel=\"Ext.data.Operation-method-setException\" class=\"docClass\">setException</a></p>\n"},"getRecords":{"!type":"fn() -> [+Ext.data.Model]","!doc":"<p>Returns the <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">record</a>s associated with this operation.  For read operations the records as set by the <a href=\"#!/api/Ext.data.proxy.Proxy\" rel=\"Ext.data.proxy.Proxy\" class=\"docClass\">Proxy</a> will be returned (returns <code>null</code> if the proxy has not yet set the records).\nFor create, update, and destroy operations the operation's initially configured records will be returned, although the proxy may modify these records' data at some point after the operation is initialized.</p>\n"},"getResultSet":{"!type":"fn() -> +Ext.data.ResultSet","!doc":"<p>Returns the ResultSet object (if set by the Proxy). This object will contain the <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">model</a>\ninstances as well as meta data such as number of instances fetched, number available etc</p>\n"},"hasException":{"!type":"fn() -> bool","!doc":"<p>Returns true if this Operation encountered an exception (see also <a href=\"#!/api/Ext.data.Operation-method-getError\" rel=\"Ext.data.Operation-method-getError\" class=\"docClass\">getError</a>)</p>\n"},"isComplete":{"!type":"fn() -> bool","!doc":"<p>Returns true if the Operation has been completed</p>\n"},"isRunning":{"!type":"fn() -> bool","!doc":"<p>Returns true if the Operation has been started but has not yet completed.</p>\n"},"isStarted":{"!type":"fn() -> bool","!doc":"<p>Returns true if the Operation has been started. Note that the Operation may have started AND completed, see\n<a href=\"#!/api/Ext.data.Operation-method-isRunning\" rel=\"Ext.data.Operation-method-isRunning\" class=\"docClass\">isRunning</a> to test if the Operation is currently running.</p>\n"},"matchClientRec":{"!type":"fn(record: ?) -> !this","!doc":"<p>Private.\nRecord matching function used by commitRecords\nIMPORTANT: This is called in the scope of the clientRec being matched</p>\n"},"setBatch":{"!type":"fn(batch: +Ext.data.Batch) -> !this","!doc":"<p>Associates this Operation with a Batch</p>\n"},"setCompleted":{"!type":"fn() -> !this","!doc":"<p>Marks the Operation as completed.</p>\n"},"setException":{"!type":"fn(error?: string|?) -> !this","!doc":"<p>Marks the Operation as having experienced an exception. Can be supplied with an option error message/object.</p>\n"},"setStarted":{"!type":"fn() -> !this","!doc":"<p>Marks the Operation as started.</p>\n"},"setSuccessful":{"!type":"fn() -> !this","!doc":"<p>Marks the Operation as successful.</p>\n"},"updateRecord":{"!type":"fn(clientRec: ?, serverRec: ?) -> !this"},"wasSuccessful":{"!type":"fn() -> bool","!doc":"<p>Returns true if the Operation has completed and was successful</p>\n"}}},"PageMap":{"!doc":"<p>Private class for use by only Store when configured <code>buffered: true</code>.</p>\n","!type":"fn(config?: Ext_data_PageMap_cfg)","prototype":{"!proto":"Ext.util.LruCache.prototype","addAll":{"!type":"fn(records: ?) -> !this"},"addPage":{"!type":"fn(pageNumber: ?, records: ?) -> !this"},"clear":{"!type":"fn(initial: ?) -> +Ext.util.HashMap","!doc":"<p>Maintain a generation counter, so that the Store can reject incoming pages destined for the previous generation</p>\n"},"findBy":{"!type":"fn(fn: fn(), scope?: ?) -> ?","!doc":"<p>Returns the first record in this page map which elicits a true return value from the\npassed selection function.</p>\n\n<p>**IMPORTANT\nThis can ONLY find records which happen to be cached in the page cache. This will be parts of the dataset around the currently\nvisible zone, or recently visited zones if the pages have not yet been purged from the cache.</p>\n\n<p>This CAN NOT find records which have not been loaded into the cache.**</p>\n\n<p>If full client side searching is required, do not use a buffered store, instead use a regular, fully loaded store and\nuse the <a href=\"#!/api/Ext.grid.plugin.BufferedRenderer\" rel=\"Ext.grid.plugin.BufferedRenderer\" class=\"docClass\">BufferedRenderer</a> plugin to minimize DOM footprint.</p>\n"},"findIndexBy":{"!type":"fn(fn: fn(), scope?: ?) -> number","!doc":"<p>Returns the index <em>in the whole dataset</em> of the first record in this page map which elicits a true return value from the\npassed selection function.</p>\n\n<p>**IMPORTANT\nThis can ONLY find records which happen to be cached in the page cache. This will be parts of the dataset around the currently\nvisible zone, or recently visited zones if the pages have not yet been purged from the cache.</p>\n\n<p>This CAN NOT find records which have not been loaded into the cache.**</p>\n\n<p>If full client side searching is required, do not use a buffered store, instead use a regular, fully loaded store and\nuse the <a href=\"#!/api/Ext.grid.plugin.BufferedRenderer\" rel=\"Ext.grid.plugin.BufferedRenderer\" class=\"docClass\">BufferedRenderer</a> plugin to minimize DOM footprint.</p>\n"},"forEach":{"!type":"fn(fn: ?, scope: ?) -> !this"},"getAt":{"!type":"fn(index: ?) -> !this"},"getCount":{"!type":"fn() -> number","!doc":"<p>Gets the number of items in the hash.</p>\n"},"getPage":{"!type":"fn(pageNumber: ?) -> !this"},"getPageFromRecordIndex":{"!type":"fn() -> !this"},"getRange":{"!type":"fn(start: ?, end: ?) -> !this"},"hasPage":{"!type":"fn(pageNumber: ?) -> !this"},"hasRange":{"!type":"fn(start: ?, end: ?) -> !this"},"indexOf":{"!type":"fn(record: ?) -> !this"},"insert":{"!type":"fn() -> !this"},"remove":{"!type":"fn() -> bool","!doc":"<p>Remove an item from the hash.</p>\n"},"removeAt":{"!type":"fn() -> !this"}}},"Request":{"!doc":"<p>Simple class that represents a Request that will be made by any <a href=\"#!/api/Ext.data.proxy.Server\" rel=\"Ext.data.proxy.Server\" class=\"docClass\">Ext.data.proxy.Server</a> subclass.\nAll this class does is standardize the representation of a Request as used by any ServerProxy subclass,\nit does not contain any actual logic or perform the request itself.</p>\n","!type":"fn(config?: Ext_data_Request_cfg)","prototype":{"!proto":"Ext.Base.prototype","action":{"!type":"string","!doc":"<p>The name of the action this Request represents. Usually one of 'create', 'read', 'update' or 'destroy'.</p>\n"},"method":{"!type":"string","!doc":"<p>The HTTP method to use on this Request. Should be one of 'GET', 'POST', 'PUT' or 'DELETE'.</p>\n"},"params":{"!type":"?","!doc":"<p>HTTP request params. The Proxy and its Writer have access to and can modify this object.</p>\n"},"url":{"!type":"string","!doc":"<p>The url to access on this Request</p>\n"}}},"ResultSet":{"!doc":"<p>Simple wrapper class that represents a set of records returned by a Proxy.</p>\n","!type":"fn(config?: Ext_data_ResultSet_cfg)","prototype":{"!proto":"Ext.Base.prototype","count":{"!type":"number","!doc":"<p>The number of records in this ResultSet. Note that total may differ from this number.</p>\n"},"loaded":{"!type":"bool","!doc":"<p>True if the records have already been loaded. This is only meaningful when dealing with\nSQL-backed proxies.</p>\n"},"records":{"!type":"[+Ext.data.Model]","!doc":"<p>The array of record instances.</p>\n"},"success":{"!type":"bool","!doc":"<p>True if the ResultSet loaded successfully, false if any errors were encountered.</p>\n"},"total":{"!type":"number","!doc":"<p>The total number of records reported by the data source. This ResultSet may form a subset of\nthose records (see <a href=\"#!/api/Ext.data.ResultSet-cfg-count\" rel=\"Ext.data.ResultSet-cfg-count\" class=\"docClass\">count</a>).</p>\n"},"totalRecords":{"!type":"number","!doc":"<p>Copy of this.total.</p>\n"}}},"SequentialIdGenerator":{"!doc":"<p>This class is a sequential id generator. A simple use of this class would be like so:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('MyApp.data.MyModel', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    idgen: 'sequential'\n});\n// assign id's of 1, 2, 3, etc.\n</code></pre>\n\n<p>An example of a configured generator would be:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('MyApp.data.MyModel', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    idgen: {\n        type: 'sequential',\n        prefix: 'ID_',\n        seed: 1000\n    }\n});\n// assign id's of ID_1000, ID_1001, ID_1002, etc.\n</code></pre>\n","!type":"fn()","prototype":{"!proto":"Ext.data.IdGenerator.prototype","prefix":{"!type":"string","!doc":"<p>The string to place in front of the sequential number for each generated id. The\ndefault is blank.</p>\n"},"seed":{"!type":"number","!doc":"<p>The number at which to start generating sequential id's. The default is 1.</p>\n"},"generate":{"!type":"fn() -> string","!doc":"<p>Generates and returns the next id.</p>\n"}}},"SortTypes":{"!doc":"<p>This class defines a series of static methods that are used on a\n<a href=\"#!/api/Ext.data.Field\" rel=\"Ext.data.Field\" class=\"docClass\">Ext.data.Field</a> for performing sorting. The methods cast the\nunderlying values into a data type that is appropriate for sorting on\nthat particular field.  If a <a href=\"#!/api/Ext.data.Field-cfg-type\" rel=\"Ext.data.Field-cfg-type\" class=\"docClass\">Ext.data.Field.type</a> is specified,\nthe sortType will be set to a sane default if the sortType is not\nexplicitly defined on the field. The sortType will make any necessary\nmodifications to the value and return it.</p>\n\n<ul>\n<li><b>asText</b> - Removes any tags and converts the value to a string</li>\n<li><b>asUCText</b> - Removes any tags and converts the value to an uppercase string</li>\n<li><b>asUCText</b> - Converts the value to an uppercase string</li>\n<li><b>asDate</b> - Converts the value into Unix epoch time</li>\n<li><b>asFloat</b> - Converts the value to a floating point number</li>\n<li><b>asInt</b> - Converts the value to an integer number</li>\n</ul>\n\n\n<p>\nIt is also possible to create a custom sortType that can be used throughout\nan application.\n<pre><code><a href=\"#!/api/Ext-method-apply\" rel=\"Ext-method-apply\" class=\"docClass\">Ext.apply</a>(<a href=\"#!/api/Ext.data.SortTypes\" rel=\"Ext.data.SortTypes\" class=\"docClass\">Ext.data.SortTypes</a>, {\n    asPerson: function(person){\n        // expects an object with a first and last name property\n        return person.lastName.toUpperCase() + person.firstName.toLowerCase();\n    }    \n});\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Employee', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: [{\n        name: 'person',\n        sortType: 'asPerson'\n    }, {\n        name: 'salary',\n        type: 'float' // sortType set to asFloat\n    }]\n});\n</code></pre>\n</p>\n\n","stripTagsRE":{"!type":"+RegExp","!doc":"<p>The regular expression used to strip tags</p>\n"},"asDate":{"!type":"fn(s: ?) -> number","!doc":"<p>Date sorting</p>\n"},"asFloat":{"!type":"fn(s: ?) -> number","!doc":"<p>Float sorting</p>\n"},"asInt":{"!type":"fn(s: ?) -> number","!doc":"<p>Integer sorting</p>\n"},"asText":{"!type":"fn(s: ?) -> string","!doc":"<p>Strips all HTML tags to sort on text only</p>\n"},"asUCString":{"!type":"fn(s: ?) -> string","!doc":"<p>Case insensitive string</p>\n"},"asUCText":{"!type":"fn(s: ?) -> string","!doc":"<p>Strips all HTML tags to sort on text only - Case insensitive</p>\n"},"none":{"!type":"fn(s: ?) -> ?","!doc":"<p>Default sort that does nothing</p>\n"}},"Store":{"!doc":"<p>The Store class encapsulates a client side cache of <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Model</a> objects. Stores load data via a\n<a href=\"#!/api/Ext.data.proxy.Proxy\" rel=\"Ext.data.proxy.Proxy\" class=\"docClass\">Proxy</a>, and also provide functions for <a href=\"#!/api/Ext.data.Store-method-sort\" rel=\"Ext.data.Store-method-sort\" class=\"docClass\">sorting</a>, <a href=\"#!/api/Ext.data.Store-method-filter\" rel=\"Ext.data.Store-method-filter\" class=\"docClass\">filtering</a>\nand querying the <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">model</a> instances contained within it.</p>\n\n<p>Creating a Store is easy - we just tell it the Model and the Proxy to use for loading and saving its data:</p>\n\n<pre><code> // Set up a <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">model</a> to use in our Store\n <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('User', {\n     extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n     fields: [\n         {name: 'firstName', type: 'string'},\n         {name: 'lastName',  type: 'string'},\n         {name: 'age',       type: 'int'},\n         {name: 'eyeColor',  type: 'string'}\n     ]\n });\n\n var myStore = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n     model: 'User',\n     proxy: {\n         type: 'ajax',\n         url: '/users.json',\n         reader: {\n             type: 'json',\n             root: 'users'\n         }\n     },\n     autoLoad: true\n });\n</code></pre>\n\n<p>In the example above we configured an AJAX proxy to load data from the url '/users.json'. We told our Proxy to use a\n<a href=\"#!/api/Ext.data.reader.Json\" rel=\"Ext.data.reader.Json\" class=\"docClass\">JsonReader</a> to parse the response from the server into Model object - <a href=\"#!/api/Ext.data.reader.Json\" rel=\"Ext.data.reader.Json\" class=\"docClass\">see the docs on JsonReader</a> for details.</p>\n\n<h2>Inline data</h2>\n\n<p>Stores can also load data inline. Internally, Store converts each of the objects we pass in as <a href=\"#!/api/Ext.data.Store-cfg-data\" rel=\"Ext.data.Store-cfg-data\" class=\"docClass\">data</a> into\nModel instances:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n     model: 'User',\n     data : [\n         {firstName: 'Ed',    lastName: 'Spencer'},\n         {firstName: 'Tommy', lastName: 'Maintz'},\n         {firstName: 'Aaron', lastName: 'Conran'},\n         {firstName: 'Jamie', lastName: 'Avins'}\n     ]\n });\n</code></pre>\n\n<p>Loading inline data using the method above is great if the data is in the correct format already (e.g. it doesn't\nneed to be processed by a <a href=\"#!/api/Ext.data.reader.Reader\" rel=\"Ext.data.reader.Reader\" class=\"docClass\">reader</a>). If your inline data requires processing to decode\nthe data structure, use a <a href=\"#!/api/Ext.data.proxy.Memory\" rel=\"Ext.data.proxy.Memory\" class=\"docClass\">MemoryProxy</a> instead (see the <a href=\"#!/api/Ext.data.proxy.Memory\" rel=\"Ext.data.proxy.Memory\" class=\"docClass\">MemoryProxy</a> docs for an example).</p>\n\n<p>Additional data can also be loaded locally using <a href=\"#!/api/Ext.data.Store-method-add\" rel=\"Ext.data.Store-method-add\" class=\"docClass\">add</a>.</p>\n\n<h2>Dynamic Loading</h2>\n\n<p>Stores can be dynamically updated by calling the <a href=\"#!/api/Ext.data.Store-method-load\" rel=\"Ext.data.Store-method-load\" class=\"docClass\">load</a> method:</p>\n\n<pre><code>store.load({\n    params: {\n        group: 3,\n        type: 'user'\n    },\n    callback: function(records, operation, success) {\n        // do something after the load finishes\n    },\n    scope: this\n});\n</code></pre>\n\n<p>Here a bunch of arbitrary parameters is passed along with the load request and a callback function is set\nup to do something after the loading is over.</p>\n\n<h2>Loading Nested Data</h2>\n\n<p>Applications often need to load sets of associated data - for example a CRM system might load a User and her Orders.\nInstead of issuing an AJAX request for the User and a series of additional AJAX requests for each Order, we can load\na nested dataset and allow the Reader to automatically populate the associated models. Below is a brief example, see\nthe <a href=\"#!/api/Ext.data.reader.Reader\" rel=\"Ext.data.reader.Reader\" class=\"docClass\">Ext.data.reader.Reader</a> intro docs for a full explanation:</p>\n\n<pre><code> var store = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n     autoLoad: true,\n     model: \"User\",\n     proxy: {\n         type: 'ajax',\n         url: 'users.json',\n         reader: {\n             type: 'json',\n             root: 'users'\n         }\n     }\n });\n</code></pre>\n\n<p>Which would consume a response like this:</p>\n\n<pre><code> {\n     \"users\": [{\n         \"id\": 1,\n         \"name\": \"Ed\",\n         \"orders\": [{\n             \"id\": 10,\n             \"total\": 10.76,\n             \"status\": \"invoiced\"\n        },{\n             \"id\": 11,\n             \"total\": 13.45,\n             \"status\": \"shipped\"\n        }]\n     }]\n }\n</code></pre>\n\n<p>See the <a href=\"#!/api/Ext.data.reader.Reader\" rel=\"Ext.data.reader.Reader\" class=\"docClass\">Ext.data.reader.Reader</a> intro docs for a full explanation.</p>\n\n<h2>Filtering and Sorting</h2>\n\n<p>Stores can be sorted and filtered - in both cases either remotely or locally. The <a href=\"#!/api/Ext.data.Store-cfg-sorters\" rel=\"Ext.data.Store-cfg-sorters\" class=\"docClass\">sorters</a> and\n<a href=\"#!/api/Ext.data.Store-cfg-filters\" rel=\"Ext.data.Store-cfg-filters\" class=\"docClass\">filters</a> are held inside <a href=\"#!/api/Ext.util.MixedCollection\" rel=\"Ext.util.MixedCollection\" class=\"docClass\">MixedCollection</a> instances to make them easy to manage.\nUsually it is sufficient to either just specify sorters and filters in the Store configuration or call <a href=\"#!/api/Ext.data.Store-method-sort\" rel=\"Ext.data.Store-method-sort\" class=\"docClass\">sort</a>\nor <a href=\"#!/api/Ext.data.Store-method-filter\" rel=\"Ext.data.Store-method-filter\" class=\"docClass\">filter</a>:</p>\n\n<pre><code> var store = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n     model: 'User',\n     sorters: [{\n         property: 'age',\n         direction: 'DESC'\n     }, {\n         property: 'firstName',\n         direction: 'ASC'\n     }],\n\n     filters: [{\n         property: 'firstName',\n         value: /Ed/\n     }]\n });\n</code></pre>\n\n<p>The new Store will keep the configured sorters and filters in the MixedCollection instances mentioned above. By\ndefault, sorting and filtering are both performed locally by the Store - see <a href=\"#!/api/Ext.data.Store-cfg-remoteSort\" rel=\"Ext.data.Store-cfg-remoteSort\" class=\"docClass\">remoteSort</a> and\n<a href=\"#!/api/Ext.data.Store-cfg-remoteFilter\" rel=\"Ext.data.Store-cfg-remoteFilter\" class=\"docClass\">remoteFilter</a> to allow the server to perform these operations instead.</p>\n\n<p>Filtering and sorting after the Store has been instantiated is also easy. Calling <a href=\"#!/api/Ext.data.Store-method-filter\" rel=\"Ext.data.Store-method-filter\" class=\"docClass\">filter</a> adds another filter\nto the Store and automatically filters the dataset (calling <a href=\"#!/api/Ext.data.Store-method-filter\" rel=\"Ext.data.Store-method-filter\" class=\"docClass\">filter</a> with no arguments simply re-applies all\nexisting filters). Note that by default <a href=\"#!/api/Ext.data.Store-cfg-sortOnFilter\" rel=\"Ext.data.Store-cfg-sortOnFilter\" class=\"docClass\">sortOnFilter</a> is set to true, which means that your sorters are\nautomatically reapplied if using local sorting.</p>\n\n<pre><code>store.filter('eyeColor', 'Brown');\n</code></pre>\n\n<p>Change the sorting at any time by calling <a href=\"#!/api/Ext.data.Store-method-sort\" rel=\"Ext.data.Store-method-sort\" class=\"docClass\">sort</a>:</p>\n\n<pre><code>store.sort('height', 'ASC');\n</code></pre>\n\n<p>Note that all existing sorters will be removed in favor of the new sorter data (if <a href=\"#!/api/Ext.data.Store-method-sort\" rel=\"Ext.data.Store-method-sort\" class=\"docClass\">sort</a> is called with no\narguments, the existing sorters are just reapplied instead of being removed). To keep existing sorters and add new\nones, just add them to the MixedCollection:</p>\n\n<pre><code>store.sorters.add(new <a href=\"#!/api/Ext.util.Sorter\" rel=\"Ext.util.Sorter\" class=\"docClass\">Ext.util.Sorter</a>({\n    property : 'shoeSize',\n    direction: 'ASC'\n}));\n\nstore.sort();\n</code></pre>\n\n<h2>Registering with StoreManager</h2>\n\n<p>Any Store that is instantiated with a <a href=\"#!/api/Ext.data.Store-cfg-storeId\" rel=\"Ext.data.Store-cfg-storeId\" class=\"docClass\">storeId</a> will automatically be registered with the <a href=\"#!/api/Ext.data.StoreManager\" rel=\"Ext.data.StoreManager\" class=\"docClass\">StoreManager</a>. This makes it easy to reuse the same store in multiple views:</p>\n\n<pre><code>//this store can be used several times\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    model: 'User',\n    storeId: 'usersStore'\n});\n\nnew Ext.List({\n    store: 'usersStore',\n    //other config goes here\n});\n\nnew <a href=\"#!/api/Ext.view.View\" rel=\"Ext.view.View\" class=\"docClass\">Ext.view.View</a>({\n    store: 'usersStore',\n    //other config goes here\n});\n</code></pre>\n\n<h2>Further Reading</h2>\n\n<p>Stores are backed up by an ecosystem of classes that enables their operation. To gain a full understanding of these\npieces and how they fit together, see:</p>\n\n<ul>\n<li><a href=\"#!/api/Ext.data.proxy.Proxy\" rel=\"Ext.data.proxy.Proxy\" class=\"docClass\">Proxy</a> - overview of what Proxies are and how they are used</li>\n<li><a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Model</a> - the core class in the data package</li>\n<li><a href=\"#!/api/Ext.data.reader.Reader\" rel=\"Ext.data.reader.Reader\" class=\"docClass\">Reader</a> - used by any subclass of <a href=\"#!/api/Ext.data.proxy.Server\" rel=\"Ext.data.proxy.Server\" class=\"docClass\">ServerProxy</a> to read a response</li>\n</ul>\n\n","!type":"fn(config?: Ext_data_Store_cfg)","prototype":{"!proto":"Ext.data.AbstractStore.prototype","autoDestroy":{"!type":"bool","!doc":"<p>When a Store is used by only one <a href=\"#!/api/Ext.view.View\" rel=\"Ext.view.View\" class=\"docClass\">DataView</a>, and should only exist for the lifetime of that view, then\nconfigure the autoDestroy flag as <code>true</code>. This causes the destruction of the view to trigger the destruction of its Store.</p>\n"},"buffered":{"!type":"bool","!doc":"<p>Allows the Store to prefetch and cache in a <strong>page cache</strong>, pages of Records, and to then satisfy\nloading requirements from this page cache.</p>\n\n<p>To use buffered Stores, initiate the process by loading the first page. The number of rows rendered are\ndetermined automatically, and the range of pages needed to keep the cache primed for scrolling is\nrequested and cached.\nExample:</p>\n\n<pre><code>myStore.loadPage(1); // Load page 1\n</code></pre>\n\n<p>A <a href=\"#!/api/Ext.grid.plugin.BufferedRenderer\" rel=\"Ext.grid.plugin.BufferedRenderer\" class=\"docClass\">BufferedRenderer</a> is instantiated which will monitor the scrolling in the grid, and\nrefresh the view's rows from the page cache as needed. It will also pull new data into the page\ncache when scrolling of the view draws upon data near either end of the prefetched data.</p>\n\n<p>The margins which trigger view refreshing from the prefetched data are <a href=\"#!/api/Ext.grid.plugin.BufferedRenderer-cfg-numFromEdge\" rel=\"Ext.grid.plugin.BufferedRenderer-cfg-numFromEdge\" class=\"docClass\">Ext.grid.plugin.BufferedRenderer.numFromEdge</a>,\n<a href=\"#!/api/Ext.grid.plugin.BufferedRenderer-cfg-leadingBufferZone\" rel=\"Ext.grid.plugin.BufferedRenderer-cfg-leadingBufferZone\" class=\"docClass\">Ext.grid.plugin.BufferedRenderer.leadingBufferZone</a> and <a href=\"#!/api/Ext.grid.plugin.BufferedRenderer-cfg-trailingBufferZone\" rel=\"Ext.grid.plugin.BufferedRenderer-cfg-trailingBufferZone\" class=\"docClass\">Ext.grid.plugin.BufferedRenderer.trailingBufferZone</a>.</p>\n\n<p>The margins which trigger loading more data into the page cache are, <a href=\"#!/api/Ext.data.Store-cfg-leadingBufferZone\" rel=\"Ext.data.Store-cfg-leadingBufferZone\" class=\"docClass\">leadingBufferZone</a> and\n<a href=\"#!/api/Ext.data.Store-cfg-trailingBufferZone\" rel=\"Ext.data.Store-cfg-trailingBufferZone\" class=\"docClass\">trailingBufferZone</a>.</p>\n\n<p>By default, only 5 pages of data are cached in the page cache, with pages \"scrolling\" out of the buffer\nas the view moves down through the dataset.\nSetting this value to zero means that no pages are <em>ever</em> scrolled out of the page cache, and\nthat eventually the whole dataset may become present in the page cache. This is sometimes desirable\nas long as datasets do not reach astronomical proportions.</p>\n\n<p>Selection state may be maintained across page boundaries by configuring the SelectionModel not to discard\nrecords from its collection when those Records cycle out of the Store's primary collection. This is done\nby configuring the SelectionModel like this:</p>\n\n<pre><code>selModel: {\n    pruneRemoved: false\n}\n</code></pre>\n"},"clearOnPageLoad":{"!type":"bool","!doc":"<p>True to empty the store when loading another page via <a href=\"#!/api/Ext.data.Store-method-loadPage\" rel=\"Ext.data.Store-method-loadPage\" class=\"docClass\">loadPage</a>,\n<a href=\"#!/api/Ext.data.Store-method-nextPage\" rel=\"Ext.data.Store-method-nextPage\" class=\"docClass\">nextPage</a> or <a href=\"#!/api/Ext.data.Store-method-previousPage\" rel=\"Ext.data.Store-method-previousPage\" class=\"docClass\">previousPage</a>. Setting to false keeps existing records, allowing\nlarge data sets to be loaded one page at a time but rendered all together.</p>\n"},"clearRemovedOnLoad":{"!type":"bool","!doc":"<p><code>true</code> to clear anything in the <a href=\"#!/api/Ext.data.Store-property-removed\" rel=\"Ext.data.Store-property-removed\" class=\"docClass\">removed</a> record collection when the store loads.</p>\n"},"data":{"!type":"+Ext.util.MixedCollection|+Ext.data.Store.PageMap","!doc":"<p>When this Store is not <a href=\"#!/api/Ext.data.Store-cfg-buffered\" rel=\"Ext.data.Store-cfg-buffered\" class=\"docClass\">buffered</a>, the <code>data</code> property is a MixedCollection which holds this store's local cache of records.</p>\n\n<p>When this store <em>is</em> <a href=\"#!/api/Ext.data.Store-cfg-buffered\" rel=\"Ext.data.Store-cfg-buffered\" class=\"docClass\">buffered</a>, the <code>data</code> property is a cache of <em>pages</em> of records used to satisfy load requests from the Store when the associated view\nscrolls. Depending on how the <a href=\"#!/api/Ext.data.Store-cfg-leadingBufferZone\" rel=\"Ext.data.Store-cfg-leadingBufferZone\" class=\"docClass\">buffer zone</a> and <a href=\"#!/api/Ext.data.Store-cfg-purgePageCount\" rel=\"Ext.data.Store-cfg-purgePageCount\" class=\"docClass\">purgePageCount</a> are configured,\npages which are scrolled out of view may be evicted from the cache, and need to be re-requested from the server\nwhen scrolled back into view. For this reason, if using <a href=\"#!/api/Ext.data.Store-cfg-buffered\" rel=\"Ext.data.Store-cfg-buffered\" class=\"docClass\">buffered</a>, it is recommended that you configure\nyour Model definitions with a unique <a href=\"#!/api/Ext.data.Model-cfg-idProperty\" rel=\"Ext.data.Model-cfg-idProperty\" class=\"docClass\">Ext.data.Model.idProperty</a> so that records which return to the page\ncache may be matched against previously selected records.</p>\n\n<p>Pages in the direction of scroll are prefetched from the remote server and loaded into this cache <em>before</em>\nthey are needed based upon the <a href=\"#!/api/Ext.data.Store-cfg-leadingBufferZone\" rel=\"Ext.data.Store-cfg-leadingBufferZone\" class=\"docClass\">buffer zone</a> so that scrolling can proceed without visible pauses for data loading.</p>\n"},"groupDir":{"!type":"string","!doc":"<p>The direction in which sorting should be applied when grouping. Supported values are \"ASC\" and \"DESC\".</p>\n"},"groupField":{"!type":"string","!doc":"<p>The field by which to group data in the store. Internally, grouping is very similar to sorting - the\ngroupField and <a href=\"#!/api/Ext.data.Store-cfg-groupDir\" rel=\"Ext.data.Store-cfg-groupDir\" class=\"docClass\">groupDir</a> are injected as the first sorter (see <a href=\"#!/api/Ext.data.Store-method-sort\" rel=\"Ext.data.Store-method-sort\" class=\"docClass\">sort</a>). Stores support a single\nlevel of grouping, and groups can be fetched via the <a href=\"#!/api/Ext.data.Store-method-getGroups\" rel=\"Ext.data.Store-method-getGroups\" class=\"docClass\">getGroups</a> method.</p>\n"},"groupers":{"!type":"+Ext.util.MixedCollection","!doc":"<p>The collection of <a href=\"#!/api/Ext.util.Grouper\" rel=\"Ext.util.Grouper\" class=\"docClass\">Groupers</a> currently applied to this Store.</p>\n"},"leadingBufferZone":{"!type":"number","!doc":"<p>When <a href=\"#!/api/Ext.data.Store-cfg-buffered\" rel=\"Ext.data.Store-cfg-buffered\" class=\"docClass\">buffered</a>, the number of extra rows to keep cached on the leading side of scrolling buffer\nas scrolling proceeds. A larger number means fewer replenishments from the server.</p>\n"},"pageSize":{"!type":"number","!doc":"<p>The number of records considered to form a 'page'. This is used to power the built-in\npaging using the nextPage and previousPage functions when the grid is paged using a\n<a href=\"#!/api/Ext.toolbar.Paging\" rel=\"Ext.toolbar.Paging\" class=\"docClass\">PagingToolbar</a> Defaults to 25.</p>\n\n<p>If this Store is <a href=\"#!/api/Ext.data.Store-cfg-buffered\" rel=\"Ext.data.Store-cfg-buffered\" class=\"docClass\">buffered</a>, pages are loaded into a page cache before the Store's\ndata is updated from the cache. The pageSize is the number of rows loaded into the cache in one request.\nThis will not affect the rendering of a buffered grid, but a larger page size will mean fewer loads.</p>\n\n<p>In a buffered grid, scrolling is monitored, and the page cache is kept primed with data ahead of the\ndirection of scroll to provide rapid access to data when scrolling causes it to be required. Several pages\nin advance may be requested depending on various parameters.</p>\n\n<p>It is recommended to tune the <a href=\"#!/api/Ext.data.Store-cfg-pageSize\" rel=\"Ext.data.Store-cfg-pageSize\" class=\"docClass\">pageSize</a>, <a href=\"#!/api/Ext.data.Store-cfg-trailingBufferZone\" rel=\"Ext.data.Store-cfg-trailingBufferZone\" class=\"docClass\">trailingBufferZone</a> and\n<a href=\"#!/api/Ext.data.Store-cfg-leadingBufferZone\" rel=\"Ext.data.Store-cfg-leadingBufferZone\" class=\"docClass\">leadingBufferZone</a> configurations based upon the conditions pertaining in your deployed application.</p>\n\n<p>The provided SDK example <code>examples/grid/infinite-scroll-grid-tuner.html</code> can be used to experiment with\ndifferent settings including simulating Ajax latency.</p>\n"},"proxy":{"!type":"string|+Ext.data.proxy.Proxy|?","!doc":"<p>The Proxy to use for this Store. This can be either a string, a config object or a Proxy instance -\nsee <a href=\"#!/api/Ext.data.Store-method-setProxy\" rel=\"Ext.data.Store-method-setProxy\" class=\"docClass\">setProxy</a> for details.</p>\n"},"purgePageCount":{"!type":"number","!doc":"<p><em>Valid only when used with a <a href=\"#!/api/Ext.data.Store-cfg-buffered\" rel=\"Ext.data.Store-cfg-buffered\" class=\"docClass\">buffered</a> Store.</em></p>\n\n<p>The number of pages <em>additional to the required buffered range</em> to keep in the prefetch cache before purging least recently used records.</p>\n\n<p>For example, if the height of the view area and the configured <a href=\"#!/api/Ext.data.Store-cfg-trailingBufferZone\" rel=\"Ext.data.Store-cfg-trailingBufferZone\" class=\"docClass\">trailingBufferZone</a> and <a href=\"#!/api/Ext.data.Store-cfg-leadingBufferZone\" rel=\"Ext.data.Store-cfg-leadingBufferZone\" class=\"docClass\">leadingBufferZone</a> require that there\nare three pages in the cache, then a <code>purgePageCount</code> of 5 ensures that up to 8 pages can be in the page cache any any one time.</p>\n\n<p>A value of 0 indicates to never purge the prefetched data.</p>\n"},"remoteFilter":{"!type":"bool","!doc":"<p><code>true</code> if the grouping should be performed on the server side, false if it is local only.</p>\n\n<p><a href=\"#!/api/Ext.data.Store-cfg-buffered\" rel=\"Ext.data.Store-cfg-buffered\" class=\"docClass\">Buffered</a> stores automatically set this to <code>true</code>. Buffered stores contain an abitrary\nsubset of the full dataset which depends upon various configurations and which pages have been requested\nfor rendering. Such <em>sparse</em> datasets are ineligible for local filtering.</p>\n"},"remoteGroup":{"!type":"bool","!doc":"<p><code>true</code> if the grouping should apply on the server side, false if it is local only.  If the\ngrouping is local, it can be applied immediately to the data.  If it is remote, then it will simply act as a\nhelper, automatically sending the grouping information to the server.</p>\n\n<p><a href=\"#!/api/Ext.data.Store-cfg-buffered\" rel=\"Ext.data.Store-cfg-buffered\" class=\"docClass\">Buffered</a> stores automatically set this to <code>true</code>. Buffered stores contain an abitrary\nsubset of the full dataset which depends upon various configurations and which pages have been requested\nfor rendering. Such <em>sparse</em> datasets are ineligible for local grouping.</p>\n"},"remoteSort":{"!type":"bool","!doc":"<p><code>true</code> if the sorting should be performed on the server side, false if it is local only.</p>\n\n<p><a href=\"#!/api/Ext.data.Store-cfg-buffered\" rel=\"Ext.data.Store-cfg-buffered\" class=\"docClass\">Buffered</a> stores automatically set this to <code>true</code>. Buffered stores contain an abitrary\nsubset of the full dataset which depends upon various configurations and which pages have been requested\nfor rendering. Such <em>sparse</em> datasets are ineligible for local sorting.</p>\n"},"sortOnFilter":{"!type":"bool","!doc":"<p>For local filtering only, causes <a href=\"#!/api/Ext.data.Store-method-sort\" rel=\"Ext.data.Store-method-sort\" class=\"docClass\">sort</a> to be called whenever <a href=\"#!/api/Ext.data.Store-method-filter\" rel=\"Ext.data.Store-method-filter\" class=\"docClass\">filter</a> is called,\ncausing the sorters to be reapplied after filtering.</p>\n"},"trailingBufferZone":{"!type":"number","!doc":"<p>When <a href=\"#!/api/Ext.data.Store-cfg-buffered\" rel=\"Ext.data.Store-cfg-buffered\" class=\"docClass\">buffered</a>, the number of extra records to keep cached on the trailing side of scrolling buffer\nas scrolling proceeds. A larger number means fewer replenishments from the server.</p>\n"},"addRecordsOptions":{"!type":"?","!doc":"<p>Private. Used as parameter to loadRecords</p>\n"},"currentPage":{"!type":"number","!doc":"<p>The page that the Store has most recently loaded (see <a href=\"#!/api/Ext.data.Store-method-loadPage\" rel=\"Ext.data.Store-method-loadPage\" class=\"docClass\">loadPage</a>)</p>\n"},"defaultPageSize":{"!type":"number"},"defaultViewSize":{"!type":"number","!doc":"<p>Number of records to load into a buffered grid before it has been bound to a view of known size</p>\n"},"loading":{"!type":"bool","!doc":"<p><code>true</code> if the Store is currently loading via its Proxy.</p>\n"},"snapshot":{"!type":"+Ext.util.MixedCollection","!doc":"<p>A pristine (unfiltered) collection of the records in this store. This is used to reinstate\nrecords when a filter is removed or changed</p>\n"},"add":{"!type":"fn(model: [+Ext.data.Model]|+Ext.data.Model|[?]|?) -> [+Ext.data.Model]","!doc":"<p>Adds Model instance to the Store. This method accepts either:</p>\n\n<ul>\n<li>An array of Model instances or Model configuration objects.</li>\n<li>Any number of Model instance or Model configuration object arguments.</li>\n</ul>\n\n\n<p>The new Model instances will be added at the end of the existing collection.</p>\n\n<p>Sample usage:</p>\n\n<pre><code>myStore.add({some: 'data'}, {some: 'other data'});\n</code></pre>\n\n<p>Note that if this Store is sorted, the new Model instances will be inserted\nat the correct point in the Store to maintain the sort order.</p>\n"},"addFilter":{"!type":"fn(filters: [?]|[+Ext.util.Filter], applyFilters?: bool) -> !this","!doc":"<p>Adds a new Filter to this Store's <a href=\"#!/api/Ext.data.Store-property-filters\" rel=\"Ext.data.Store-property-filters\" class=\"docClass\">filter set</a> and\nby default, applys the updated filter set to the Store's unfiltered dataset.</p>\n"},"addSorted":{"!type":"fn(record: +Ext.data.Record) -> !this","!doc":"<p>(Local sort only) Inserts the passed Record into the Store at the index where it\nshould go based on the current sort information.</p>\n"},"aggregate":{"!type":"fn(fn: fn(), scope?: ?, grouped?: bool, args?: [?]) -> ?","!doc":"<p>Runs the aggregate function for all the records in the store.</p>\n\n<p>When store is filtered, only items within the filter are aggregated.</p>\n"},"average":{"!type":"fn(field: string, grouped?: bool) -> ?","!doc":"<p>Gets the average value in the store.</p>\n\n<p>When store is filtered, only items within the filter are aggregated.</p>\n"},"cachePage":{"!type":"fn(records: [+Ext.data.Model], page: +Ext.data.Operation) -> !this","!doc":"<p>Caches the records in the prefetch and stripes them with their server-side\nindex.</p>\n"},"clearData":{"!type":"fn(isLoad: ?) -> !this","!doc":"<p>private</p>\n"},"clearFilter":{"!type":"fn(suppressEvent?: bool) -> !this","!doc":"<p>Reverts to a view of the Record cache with no filtering applied.</p>\n"},"clearGrouping":{"!type":"fn() -> !this","!doc":"<p>Clear any groupers in the store</p>\n"},"collect":{"!type":"fn(dataIndex: string, allowNull?: bool, bypassFilter?: bool) -> [?]","!doc":"<p>Collects unique values for a particular dataIndex from this store.</p>\n"},"commitChanges":{"!type":"fn() -> !this","!doc":"<p>Commits all Records with <a href=\"#!/api/Ext.data.Store-method-getModifiedRecords\" rel=\"Ext.data.Store-method-getModifiedRecords\" class=\"docClass\">outstanding changes</a>. To handle updates for changes,\nsubscribe to the Store's <a href=\"#!/api/Ext.data.Store-event-update\" rel=\"Ext.data.Store-event-update\" class=\"docClass\">update event</a>, and perform updating when the third parameter is\n<a href=\"#!/api/Ext.data.Model-static-property-COMMIT\" rel=\"Ext.data.Model-static-property-COMMIT\" class=\"docClass\">Ext.data.Record.COMMIT</a>.</p>\n"},"constructGroups":{"!type":"fn() -> !this"},"count":{"!type":"fn(grouped?: bool) -> number","!doc":"<p>Gets the count of items in the store.</p>\n\n<p>When store is filtered, only items within the filter are counted.</p>\n"},"createFilterFn":{"!type":"fn(property: string, value: string|+RegExp, anyMatch?: bool, caseSensitive?: bool, exactMatch?: bool) -> !this","!doc":"<p>Returns a filter function used to test a the given property's value. Defers most of the work to\n<a href=\"#!/api/Ext.util.MixedCollection\" rel=\"Ext.util.MixedCollection\" class=\"docClass\">Ext.util.MixedCollection</a>'s createValueMatcher function.</p>\n"},"createModel":{"!type":"fn(record: +Ext.data.Model|?) -> +Ext.data.Model","!doc":"<p>Converts a literal to a model, if it's not a model already</p>\n"},"decodeGroupers":{"!type":"fn(groupers: [?]) -> [+Ext.util.Grouper]","!doc":"<p>Normalizes an array of grouper objects, ensuring that they are all <a href=\"#!/api/Ext.util.Grouper\" rel=\"Ext.util.Grouper\" class=\"docClass\">Ext.util.Grouper</a> instances</p>\n"},"doSort":{"!type":"fn(sorterFn: ?) -> !this","!doc":"<p>overriden to provide striping of the indexes as sorting occurs.\nthis cannot be done inside of sort because datachanged has already\nfired and will trigger a repaint of the bound view.</p>\n"},"each":{"!type":"fn(fn: fn(), scope?: ?) -> !this","!doc":"<p>Calls the specified function for each <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">record</a> in the store.</p>\n\n<p>When store is filtered, only loops over the filtered records.</p>\n"},"filter":{"!type":"fn(filters?: [?]|[+Ext.util.Filter]|string, value?: string) -> !this","!doc":"<p>Filters the loaded set of records by a given set of filters.</p>\n\n<p>By default, the passed filter(s) are <em>added</em> to the collection of filters being used to filter this Store.</p>\n\n<p>To remove existing filters before applying a new set of filters use</p>\n\n<pre><code>// Clear the filter collection without updating the UI\nstore.clearFilter(true);\n</code></pre>\n\n<p>see <a href=\"#!/api/Ext.data.Store-method-clearFilter\" rel=\"Ext.data.Store-method-clearFilter\" class=\"docClass\">clearFilter</a>.</p>\n\n<p>Alternatively, if filters are configured with an <code>id</code>, then existing filters store may be <em>replaced</em> by new\nfilters having the same <code>id</code>.</p>\n\n<p>Filtering by single field:</p>\n\n<pre><code>store.filter(\"email\", /\\.com$/);\n</code></pre>\n\n<p>Using multiple filters:</p>\n\n<pre><code>store.filter([\n    {property: \"email\", value: /\\.com$/},\n    {filterFn: function(item) { return item.get(\"age\") &gt; 10; }}\n]);\n</code></pre>\n\n<p>Using <a href=\"#!/api/Ext.util.Filter\" rel=\"Ext.util.Filter\" class=\"docClass\">Ext.util.Filter</a> instances instead of config objects\n(note that we need to specify the <a href=\"#!/api/Ext.util.Filter-cfg-root\" rel=\"Ext.util.Filter-cfg-root\" class=\"docClass\">root</a> config option in this case):</p>\n\n<pre><code>store.filter([\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.util.Filter\" rel=\"Ext.util.Filter\" class=\"docClass\">Ext.util.Filter</a>', {property: \"email\", value: /\\.com$/, root: 'data'}),\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.util.Filter\" rel=\"Ext.util.Filter\" class=\"docClass\">Ext.util.Filter</a>', {filterFn: function(item) { return item.get(\"age\") &gt; 10; }, root: 'data'})\n]);\n</code></pre>\n\n<p>When store is filtered, most of the methods for accessing store data will be working only\nwithin the set of filtered records. Two notable exceptions are <a href=\"#!/api/Ext.data.Store-method-queryBy\" rel=\"Ext.data.Store-method-queryBy\" class=\"docClass\">queryBy</a> and\n<a href=\"#!/api/Ext.data.Store-method-getById\" rel=\"Ext.data.Store-method-getById\" class=\"docClass\">getById</a>.</p>\n"},"filterBy":{"!type":"fn(fn: fn(), scope?: ?) -> !this","!doc":"<p>Filters by a function. The specified function will be called for each\nRecord in this Store. If the function returns <code>true</code> the Record is included,\notherwise it is filtered out.</p>\n\n<p>When store is filtered, most of the methods for accessing store data will be working only\nwithin the set of filtered records. Two notable exceptions are <a href=\"#!/api/Ext.data.Store-method-queryBy\" rel=\"Ext.data.Store-method-queryBy\" class=\"docClass\">queryBy</a> and\n<a href=\"#!/api/Ext.data.Store-method-getById\" rel=\"Ext.data.Store-method-getById\" class=\"docClass\">getById</a>.</p>\n"},"filterNewOnly":{"!type":"fn(item: ?) -> !this"},"find":{"!type":"fn(fieldName: string, value: string|+RegExp, startIndex?: number, anyMatch?: bool, caseSensitive?: bool, exactMatch?: bool) -> number","!doc":"<p>Finds the index of the first matching Record in this store by a specific field value.</p>\n\n<p>When store is filtered, finds records only within filter.</p>\n\n<p>**IMPORTANT</p>\n\n<p>If this store is <a href=\"#!/api/Ext.data.Store-cfg-buffered\" rel=\"Ext.data.Store-cfg-buffered\" class=\"docClass\">buffered</a>, this can ONLY find records which happen to be cached in the page cache.\nThis will be parts of the dataset around the currently visible zone, or recently visited zones if the pages\nhave not yet been purged from the cache.**</p>\n"},"findBy":{"!type":"fn(fn: fn(), scope?: ?, startIndex?: number) -> number","!doc":"<p>Find the index of the first matching Record in this Store by a function.\nIf the function returns <code>true</code> it is considered a match.</p>\n\n<p>When store is filtered, finds records only within filter.</p>\n\n<p>**IMPORTANT</p>\n\n<p>If this store is <a href=\"#!/api/Ext.data.Store-cfg-buffered\" rel=\"Ext.data.Store-cfg-buffered\" class=\"docClass\">buffered</a>, this can ONLY find records which happen to be cached in the page cache.\nThis will be parts of the dataset around the currently visible zone, or recently visited zones if the pages\nhave not yet been purged from the cache.**</p>\n"},"findExact":{"!type":"fn(fieldName: string, value: ?, startIndex?: number) -> number","!doc":"<p>Finds the index of the first matching Record in this store by a specific field value.</p>\n\n<p>When store is filtered, finds records only within filter.</p>\n\n<p>**IMPORTANT</p>\n\n<p>If this store is <a href=\"#!/api/Ext.data.Store-cfg-buffered\" rel=\"Ext.data.Store-cfg-buffered\" class=\"docClass\">buffered</a>, this can ONLY find records which happen to be cached in the page cache.\nThis will be parts of the dataset around the currently visible zone, or recently visited zones if the pages\nhave not yet been purged from the cache.**</p>\n"},"findRecord":{"!type":"fn(fieldName: string, value: string|+RegExp, startIndex?: number, anyMatch?: bool, caseSensitive?: bool, exactMatch?: bool) -> +Ext.data.Model","!doc":"<p>Finds the first matching Record in this store by a specific field value.</p>\n\n<p>When store is filtered, finds records only within filter.</p>\n\n<p>**IMPORTANT</p>\n\n<p>If this store is <a href=\"#!/api/Ext.data.Store-cfg-buffered\" rel=\"Ext.data.Store-cfg-buffered\" class=\"docClass\">buffered</a>, this can ONLY find records which happen to be cached in the page cache.\nThis will be parts of the dataset around the currently visible zone, or recently visited zones if the pages\nhave not yet been purged from the cache.**</p>\n"},"fireGroupChange":{"!type":"fn() -> !this","!doc":"<p>Fires the groupchange event. Abstracted out so we can use it\nas a callback</p>\n"},"first":{"!type":"fn(grouped?: bool) -> +Ext.data.Model|+undefined","!doc":"<p>Convenience function for getting the first model instance in the store.</p>\n\n<p>When store is filtered, will return first item within the filter.</p>\n"},"getAggregate":{"!type":"fn(fn: ?, scope: ?, records: ?, args: ?) -> !this"},"getAt":{"!type":"fn(index: number) -> +Ext.data.Model","!doc":"<p>Get the Record at the specified index.</p>\n\n<p>The index is effected by filtering.</p>\n"},"getAverage":{"!type":"fn(records: ?, field: ?) -> !this","!doc":"<p>, see average</p>\n"},"getById":{"!type":"fn(id: +Mixed) -> +Ext.data.Model","!doc":"<p>Get the Record with the specified id.</p>\n\n<p>This method is not effected by filtering, lookup will be performed from all records\ninside the store, filtered or not.</p>\n"},"getCount":{"!type":"fn() -> number","!doc":"<p>Gets the number of records in store.</p>\n\n<p>If using paging, this may not be the total size of the dataset. If the data object\nused by the Reader contains the dataset size, then the <a href=\"#!/api/Ext.data.Store-method-getTotalCount\" rel=\"Ext.data.Store-method-getTotalCount\" class=\"docClass\">getTotalCount</a> function returns\nthe dataset size.  <strong>Note</strong>: see the Important note in <a href=\"#!/api/Ext.data.Store-method-load\" rel=\"Ext.data.Store-method-load\" class=\"docClass\">load</a>.</p>\n\n<p>When store is filtered, it's the number of records matching the filter.</p>\n"},"getGroupData":{"!type":"fn(sort?: bool) -> [?]","!doc":"<p>Returns records grouped by the configured <a href=\"#!/api/Ext.data.Store-cfg-groupers\" rel=\"Ext.data.Store-cfg-groupers\" class=\"docClass\">grouper</a> configuration. Sample return value (in\nthis case grouping by genre and then author in a fictional books dataset):</p>\n\n<pre><code>[\n    {\n        name: 'Fantasy',\n        depth: 0,\n        records: [\n            //book1, book2, book3, book4\n        ],\n        children: [\n            {\n                name: 'Rowling',\n                depth: 1,\n                records: [\n                    //book1, book2\n                ]\n            },\n            {\n                name: 'Tolkein',\n                depth: 1,\n                records: [\n                    //book3, book4\n                ]\n            }\n        ]\n    }\n]\n</code></pre>\n"},"getGroupField":{"!type":"fn() -> !this"},"getGroupString":{"!type":"fn(instance: +Ext.data.Model) -> string","!doc":"<p>Returns the string to group on for a given model instance. The default implementation of this method returns\nthe model's <a href=\"#!/api/Ext.data.Store-cfg-groupField\" rel=\"Ext.data.Store-cfg-groupField\" class=\"docClass\">groupField</a>, but this can be overridden to group by an arbitrary string. For example, to\ngroup by the first letter of a model's 'name' field, use the following code:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    groupDir: 'ASC',\n    getGroupString: function(instance) {\n        return instance.get('name')[0];\n    }\n});\n</code></pre>\n"},"getGroups":{"!type":"fn(groupName?: string) -> ?|[?]","!doc":"<p>Returns an array containing the result of applying grouping to the records in this store.\nSee <a href=\"#!/api/Ext.data.Store-cfg-groupField\" rel=\"Ext.data.Store-cfg-groupField\" class=\"docClass\">groupField</a>, <a href=\"#!/api/Ext.data.Store-cfg-groupDir\" rel=\"Ext.data.Store-cfg-groupDir\" class=\"docClass\">groupDir</a> and <a href=\"#!/api/Ext.data.Store-method-getGroupString\" rel=\"Ext.data.Store-method-getGroupString\" class=\"docClass\">getGroupString</a>. Example for a store\ncontaining records with a color field:</p>\n\n<pre><code>var myStore = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    groupField: 'color',\n    groupDir  : 'DESC'\n});\n\nmyStore.getGroups(); // returns:\n[\n    {\n        name: 'yellow',\n        children: [\n            // all records where the color field is 'yellow'\n        ]\n    },\n    {\n        name: 'red',\n        children: [\n            // all records where the color field is 'red'\n        ]\n    }\n]\n</code></pre>\n\n<p>Group contents are effected by filtering.</p>\n"},"getGroupsForGrouper":{"!type":"fn(records: ?, grouper: ?) -> !this","!doc":"<p>For a given set of records and a Grouper, returns an array of arrays - each of which is the set of records\nmatching a certain group.</p>\n"},"getGroupsForGrouperIndex":{"!type":"fn(records: [+Ext.data.Model], grouperIndex: number) -> [?]","!doc":"<p>This is used recursively to gather the records into the configured Groupers. The data MUST have been sorted for\nthis to work properly (see <a href=\"#!/api/Ext.data.Store-method-getGroupData\" rel=\"Ext.data.Store-method-getGroupData\" class=\"docClass\">getGroupData</a> and <a href=\"#!/api/Ext.data.Store-method-getGroupsForGrouper\" rel=\"Ext.data.Store-method-getGroupsForGrouper\" class=\"docClass\">getGroupsForGrouper</a>) Most of the work is done by\n<a href=\"#!/api/Ext.data.Store-method-getGroupsForGrouper\" rel=\"Ext.data.Store-method-getGroupsForGrouper\" class=\"docClass\">getGroupsForGrouper</a> - this function largely just handles the recursion.</p>\n"},"getMax":{"!type":"fn(records: ?, field: ?) -> !this","!doc":"<p>, see max</p>\n"},"getMin":{"!type":"fn(records: ?, field: ?) -> !this","!doc":"<p>, see min</p>\n"},"getNewRecords":{"!type":"fn() -> [+Ext.data.Model]","!doc":"<p>inherit docs</p>\n"},"getPageFromRecordIndex":{"!type":"fn(index: number) -> number","!doc":"<p>Determines the page from a record index</p>\n"},"getRange":{"!type":"fn(start: number, end: number, options?: ?) -> [+Ext.data.Model]","!doc":"<p>Gathers a range of Records between specified indices.</p>\n\n<p>If this store is <a href=\"#!/api/Ext.data.Store-cfg-buffered\" rel=\"Ext.data.Store-cfg-buffered\" class=\"docClass\">buffered</a>, the indices are relative to the entire dataset, not the local record cache.</p>\n\n<p>If this store is <a href=\"#!/api/Ext.data.Store-cfg-buffered\" rel=\"Ext.data.Store-cfg-buffered\" class=\"docClass\">buffered</a>, then the requested data range <em>may</em> not be immediately available, and will\nbe returned through a passed callback function.</p>\n\n<p>This method is affected by filtering.</p>\n"},"getRejectRecords":{"!type":"fn() -> !this","!doc":"<p>Ideally in the future this will use getModifiedRecords, where there will be a param\nto getNewRecords &amp; getUpdatedRecords to indicate whether to get only the valid\nrecords or grab all of them</p>\n"},"getSum":{"!type":"fn(records: ?, field: ?) -> !this","!doc":"<p>, see sum</p>\n"},"getTotalCount":{"!type":"fn() -> number","!doc":"<p>Returns the total number of <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Model</a> instances that the <a href=\"#!/api/Ext.data.proxy.Proxy\" rel=\"Ext.data.proxy.Proxy\" class=\"docClass\">Proxy</a>\nindicates exist. This will usually differ from <a href=\"#!/api/Ext.data.Store-method-getCount\" rel=\"Ext.data.Store-method-getCount\" class=\"docClass\">getCount</a> when using paging - getCount returns the\nnumber of records loaded into the Store at the moment, getTotalCount returns the number of records that\ncould be loaded into the Store if the Store contained all data</p>\n"},"getUpdatedRecords":{"!type":"fn() -> [+Ext.data.Model]","!doc":"<p>inherit docs</p>\n"},"group":{"!type":"fn(groupers: string|[?], direction?: string) -> !this","!doc":"<p>Groups data inside the store.</p>\n"},"guaranteeRange":{"!type":"fn(start: ?, end: ?, callback: ?, scope: ?, options: ?) -> !this","!doc":"<p>Guarantee a specific range, this will load the store with a range (that\nmust be the <code>pageSize</code> or smaller) and take care of any loading that may\nbe necessary.</p>\n"},"indexOf":{"!type":"fn(record: +Ext.data.Model) -> number","!doc":"<p>Get the index of the record within the store.</p>\n\n<p>When store is filtered, records outside of filter will not be found.</p>\n"},"indexOfId":{"!type":"fn(id: string) -> number","!doc":"<p>Get the index within the store of the Record with the passed id.</p>\n\n<p>Like <a href=\"#!/api/Ext.data.Store-method-indexOf\" rel=\"Ext.data.Store-method-indexOf\" class=\"docClass\">indexOf</a>, this method is effected by filtering.</p>\n"},"indexOfTotal":{"!type":"fn(record: +Ext.data.Model) -> number","!doc":"<p>Get the index within the entire dataset. From 0 to the totalCount.</p>\n\n<p>Like <a href=\"#!/api/Ext.data.Store-method-indexOf\" rel=\"Ext.data.Store-method-indexOf\" class=\"docClass\">indexOf</a>, this method is effected by filtering.</p>\n"},"insert":{"!type":"fn(index: number, records: [+Ext.data.Model]) -> [+Ext.data.Model]","!doc":"<p>Inserts Model instances into the Store at the given index and fires the <a href=\"#!/api/Ext.data.Store-event-add\" rel=\"Ext.data.Store-event-add\" class=\"docClass\">add</a> event.\nSee also <a href=\"#!/api/Ext.data.Store-method-add\" rel=\"Ext.data.Store-method-add\" class=\"docClass\">add</a>.</p>\n"},"isFiltered":{"!type":"fn() -> bool","!doc":"<p>Returns <code>true</code> if this store is currently filtered</p>\n"},"isGrouped":{"!type":"fn() -> bool","!doc":"<p>Checks if the store is currently grouped</p>\n"},"last":{"!type":"fn(grouped?: bool) -> +Ext.data.Model|+undefined","!doc":"<p>Convenience function for getting the last model instance in the store.</p>\n\n<p>When store is filtered, will return last item within the filter.</p>\n"},"load":{"!type":"fn(options?: ?|fn()) -> !this","!doc":"<p>Loads data into the Store via the configured <a href=\"#!/api/Ext.data.Store-cfg-proxy\" rel=\"Ext.data.Store-cfg-proxy\" class=\"docClass\">proxy</a>. This uses the Proxy to make an\nasynchronous call to whatever storage backend the Proxy uses, automatically adding the retrieved\ninstances into the Store and calling an optional callback if required. Example usage:</p>\n\n<pre><code>store.load({\n    scope: this,\n    callback: function(records, operation, success) {\n        // the <a href=\"#!/api/Ext.data.Operation\" rel=\"Ext.data.Operation\" class=\"docClass\">operation</a> object\n        // contains all of the details of the load operation\n        console.log(records);\n    }\n});\n</code></pre>\n\n<p>If the callback scope does not need to be set, a function can simply be passed:</p>\n\n<pre><code>store.load(function(records, operation, success) {\n    console.log('loaded records');\n});\n</code></pre>\n"},"loadData":{"!type":"fn(data: [+Ext.data.Model]|[?], append?: bool) -> !this","!doc":"<p>Loads an array of data straight into the Store.</p>\n\n<p>Using this method is great if the data is in the correct format already (e.g. it doesn't need to be\nprocessed by a reader). If your data requires processing to decode the data structure, use a\n<a href=\"#!/api/Ext.data.proxy.Memory\" rel=\"Ext.data.proxy.Memory\" class=\"docClass\">MemoryProxy</a> or <a href=\"#!/api/Ext.data.Store-method-loadRawData\" rel=\"Ext.data.Store-method-loadRawData\" class=\"docClass\">loadRawData</a>.</p>\n"},"loadPage":{"!type":"fn(page: number, options?: ?) -> !this","!doc":"<p>Loads a given 'page' of data by setting the start and limit values appropriately. Internally this just causes a normal\nload operation, passing in calculated 'start' and 'limit' params.</p>\n"},"loadRawData":{"!type":"fn(data: [?], append?: bool) -> !this","!doc":"<p>Loads data via the bound Proxy's reader</p>\n\n<p>Use this method if you are attempting to load data and want to utilize the configured data reader.</p>\n"},"loadRecords":{"!type":"fn(records: [+Ext.data.Model], options: ?) -> !this","!doc":"<p>Loads an array of <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">model</a> instances into the store, fires the datachanged event. This should only usually\nbe called internally when loading from the <a href=\"#!/api/Ext.data.proxy.Proxy\" rel=\"Ext.data.proxy.Proxy\" class=\"docClass\">Proxy</a>, when adding records manually use <a href=\"#!/api/Ext.data.Store-method-add\" rel=\"Ext.data.Store-method-add\" class=\"docClass\">add</a> instead</p>\n"},"loadToPrefetch":{"!type":"fn(options: ?) -> !this"},"max":{"!type":"fn(field: string, grouped?: bool) -> ?","!doc":"<p>Gets the maximum value in the store.</p>\n\n<p>When store is filtered, only items within the filter are aggregated.</p>\n"},"min":{"!type":"fn(field: string, grouped?: bool) -> ?","!doc":"<p>Gets the minimum value in the store.</p>\n\n<p>When store is filtered, only items within the filter are aggregated.</p>\n"},"nextPage":{"!type":"fn(options: ?) -> !this","!doc":"<p>Loads the next 'page' in the current data set</p>\n"},"onBeforeSort":{"!type":"fn() -> !this"},"onGuaranteedRange":{"!type":"fn(options: ?) -> !this","!doc":"<p>Handles a guaranteed range being loaded</p>\n"},"onIdChanged":{"!type":"fn(rec: ?, oldId: ?, newId: ?, oldInternalId: ?) -> !this"},"onPageMapClear":{"!type":"fn() -> !this","!doc":"<p>Cancels all pending prefetch requests.</p>\n\n<p>This is called when the page map is cleared.</p>\n\n<p>Any requests which still make it through will be for the previous pageMapGeneration\n(pageMapGeneration is incremented upon clear), and so will be rejected upon arrival.</p>\n"},"onProxyLoad":{"!type":"fn(operation: ?) -> !this","!doc":"<p>Called internally when a Proxy has completed a load request</p>\n"},"onProxyPrefetch":{"!type":"fn(operation: +Ext.data.Operation) -> !this","!doc":"<p>Called after the configured proxy completes a prefetch operation.</p>\n"},"onUpdate":{"!type":"fn(record: ?, type: ?, modifiedFieldNames: ?) -> !this"},"pageCached":{"!type":"fn(page: number) -> !this","!doc":"<p>Determines if the passed page is available in the page cache.</p>\n"},"pagePending":{"!type":"fn(page: number) -> !this","!doc":"<p>Determines if a request for a page is currently running</p>\n"},"prefetch":{"!type":"fn(this: +Ext.data.Store, records: [+Ext.data.Model], successful: bool, operation: +Ext.data.Operation, eOpts: ?)","!doc":"<p>Fires whenever records have been prefetched.</p>\n"},"prefetchPage":{"!type":"fn(page: number, options?: ?) -> !this","!doc":"<p>Prefetches a page of data.</p>\n"},"prefetchRange":{"!type":"fn(start: ?, end: ?) -> !this","!doc":"<p>Ensures that the specified range of rows is present in the cache.</p>\n\n<p>Converts the row range to a page range and then only load pages which are not already\npresent in the page cache.</p>\n"},"previousPage":{"!type":"fn(options: ?) -> !this","!doc":"<p>Loads the previous 'page' in the current data set</p>\n"},"primeCache":{"!type":"fn(start: ?, end: ?, direction: ?) -> !this"},"query":{"!type":"fn(property: string, value: string|+RegExp, anyMatch?: bool, caseSensitive?: bool, exactMatch?: bool) -> +Ext.util.MixedCollection","!doc":"<p>Query all the cached records in this Store by name/value pair.\nThe parameters will be used to generated a filter function that is given\nto the queryBy method.</p>\n\n<p>This method compliments queryBy by generating the query function automatically.</p>\n"},"queryBy":{"!type":"fn(fn: fn(), scope?: ?) -> +Ext.util.MixedCollection","!doc":"<p>Query all the cached records in this Store using a filtering function. The specified function\nwill be called with each record in this Store. If the function returns <code>true</code> the record is\nincluded in the results.</p>\n\n<p>This method is not effected by filtering, it will always look from all records inside the store\nno matter if filter is applied or not.</p>\n"},"rangeCached":{"!type":"fn(start: number, end: number) -> !this","!doc":"<p>Determines if the passed range is available in the page cache.</p>\n"},"rangeSatisfied":{"!type":"fn(start: number, end: number) -> bool","!doc":"<p>Determines if the passed range is available in the page cache.</p>\n"},"rejectChanges":{"!type":"fn() -> !this","!doc":"<p><a href=\"#!/api/Ext.data.Model-method-reject\" rel=\"Ext.data.Model-method-reject\" class=\"docClass\">Rejects</a> outstanding changes on all <a href=\"#!/api/Ext.data.Store-method-getModifiedRecords\" rel=\"Ext.data.Store-method-getModifiedRecords\" class=\"docClass\">modified records</a>\nand re-insert any records that were removed locally. Any phantom records will be removed.</p>\n"},"reload":{"!type":"fn(options: ?) -> !this","!doc":"<p>Reloads the store using the last options passed to the <a href=\"#!/api/Ext.data.Store-method-load\" rel=\"Ext.data.Store-method-load\" class=\"docClass\">load</a> method.</p>\n"},"remove":{"!type":"fn(records: +Ext.data.Model|[+Ext.data.Model]|number|[number]) -> !this","!doc":"<p>Removes the specified record(s) from the Store, firing the <a href=\"#!/api/Ext.data.Store-event-remove\" rel=\"Ext.data.Store-event-remove\" class=\"docClass\">remove</a> event for each instance that is removed.</p>\n\n<p>A <a href=\"#!/api/Ext.data.Store-event-bulkremove\" rel=\"Ext.data.Store-event-bulkremove\" class=\"docClass\">bulkremove</a> event is called at the end passing all removed records and their indices.\nplus a single 'datachanged' event after removal.</p>\n"},"removeAll":{"!type":"fn(silent?: bool) -> !this","!doc":"<p>Removes all items from the store.</p>\n\n<p>Individual record <code><a href=\"#!/api/Ext.data.Store-event-remove\" rel=\"Ext.data.Store-event-remove\" class=\"docClass\">remove</a></code> events are not fired by this method.</p>\n"},"removeAt":{"!type":"fn(index: number, count?: number) -> !this","!doc":"<p>Removes the model instance(s) at the given index</p>\n"},"removeFilter":{"!type":"fn(toRemove: +Mixed, applyFilters?: bool) -> !this","!doc":"<p>Removes an individual Filter from the current <a href=\"#!/api/Ext.data.Store-property-filters\" rel=\"Ext.data.Store-property-filters\" class=\"docClass\">filter set</a> using the passed Filter/Filter id and\nby default, applys the updated filter set to the Store's unfiltered dataset.</p>\n"},"sort":{"!type":"fn() -> [+Ext.util.Sorter]","!doc":"<p>because prefetchData is stored by index\nthis invalidates all of the prefetchedData</p>\n"},"sum":{"!type":"fn(field: string, grouped?: bool) -> number","!doc":"<p>Sums the value of <code>field</code> for each <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">record</a> in store\nand returns the result.</p>\n\n<p>When store is filtered, only sums items within the filter.</p>\n"},"updateGroupsOnAdd":{"!type":"fn(records: ?) -> !this"},"updateGroupsOnRemove":{"!type":"fn(records: ?) -> !this"},"updateGroupsOnUpdate":{"!type":"fn(record: ?, modifiedFieldNames: ?) -> !this"},"beforeprefetch":{"!type":"fn(this: +Ext.data.Store, operation: +Ext.data.Operation, eOpts: ?)","!doc":"<p>Fires before a prefetch occurs. Return <code>false</code> to cancel.</p>\n"},"filterchange":{"!type":"fn(store: +Ext.data.Store, filters: [+Ext.util.Filter], eOpts: ?)","!doc":"<p>Fired whenever the filter set changes.</p>\n"},"groupchange":{"!type":"fn(store: +Ext.data.Store, groupers: [+Ext.util.Grouper], eOpts: ?)","!doc":"<p>Fired whenever the grouping in the grid changes.</p>\n"}},"groupIdFn":{"!type":"fn(group: ?) -> !this"},"grouperIdFn":{"!type":"fn(grouper: ?) -> !this"},"recordIdFn":{"!type":"fn(record: ?) -> !this"},"recordIndexFn":{"!type":"fn(record: ?) -> !this"}},"StoreManager":{"!doc":"<p>Contains a collection of all stores that are created that have an identifier. An identifier can be assigned by\nsetting the <a href=\"#!/api/Ext.data.AbstractStore-cfg-storeId\" rel=\"Ext.data.AbstractStore-cfg-storeId\" class=\"docClass\">storeId</a> property. When a store is in the StoreManager, it can be\nreferred to via it's identifier:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    model: 'SomeModel',\n    storeId: 'myStore'\n});\n\nvar store = <a href=\"#!/api/Ext.data.StoreManager-method-lookup\" rel=\"Ext.data.StoreManager-method-lookup\" class=\"docClass\">Ext.data.StoreManager.lookup</a>('myStore');\n</code></pre>\n\n<p>Also note that the <a href=\"#!/api/Ext.data.StoreManager-method-lookup\" rel=\"Ext.data.StoreManager-method-lookup\" class=\"docClass\">lookup</a> method is aliased to <a href=\"#!/api/Ext-method-getStore\" rel=\"Ext-method-getStore\" class=\"docClass\">Ext.getStore</a> for convenience.</p>\n\n<p>If a store is registered with the StoreManager, you can also refer to the store by it's identifier when registering\nit with any Component that consumes data from a store:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    model: 'SomeModel',\n    storeId: 'myStore'\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.view.View\" rel=\"Ext.view.View\" class=\"docClass\">Ext.view.View</a>', {\n    store: 'myStore',\n    // other configuration here\n});\n</code></pre>\n","!type":"fn(config: Ext_data_StoreManager_cfg)","prototype":{"!proto":"Ext.util.MixedCollection.prototype"},"listeners":{"!type":"?"},"getKey":{"!type":"fn(o: ?) -> ?","!doc":"<p>getKey implementation for MixedCollection</p>\n"},"lookup":{"!type":"fn(store: string|?) -> +Ext.data.Store","!doc":"<p>Gets a registered Store by id</p>\n"},"register":{"!type":"fn(stores: +Ext.data.Store) -> !this","!doc":"<p>Registers one or more Stores with the StoreManager. You do not normally need to register stores manually. Any\nstore initialized with a <a href=\"#!/api/Ext.data.Store-cfg-storeId\" rel=\"Ext.data.Store-cfg-storeId\" class=\"docClass\">Ext.data.Store.storeId</a> will be auto-registered.</p>\n"},"unregister":{"!type":"fn(stores: string|?) -> !this","!doc":"<p>Unregisters one or more Stores with the StoreManager</p>\n"}},"Tree":{"!doc":"<p>This class is used as a container for a series of nodes. The nodes themselves maintain\nthe relationship between parent/child. The tree itself acts as a manager. It gives functionality\nto retrieve a node by its identifier: <a href=\"#!/api/Ext.data.Tree-method-getNodeById\" rel=\"Ext.data.Tree-method-getNodeById\" class=\"docClass\">getNodeById</a>.</p>\n\n<p>The tree also relays events from any of it's child nodes, allowing them to be handled in a\ncentralized fashion. In general this class is not used directly, rather used internally\nby other parts of the framework.</p>\n","!type":"fn(root?: +Ext.data.NodeInterface)","prototype":{"!proto":"Ext.Base.prototype","root":{"!type":"+Ext.data.NodeInterface","!doc":"<p>The root node for this tree</p>\n"},"filter":{"!type":"fn(sorterFn: fn(), recursive: bool) -> !this","!doc":"<p>Filters this tree</p>\n"},"flatten":{"!type":"fn() -> [+Ext.data.NodeInterface]","!doc":"<p>Flattens all the nodes in the tree into an array.</p>\n"},"getNodeById":{"!type":"fn(id: string) -> +Ext.data.NodeInterface","!doc":"<p>Gets a node in this tree by its id.</p>\n"},"getRootNode":{"!type":"fn() -> +Ext.data.NodeInterface","!doc":"<p>Returns the root node for this tree.</p>\n"},"onNodeAppend":{"!type":"fn(parent: +Ext.data.NodeInterface, node: +Ext.data.NodeInterface) -> !this","!doc":"<p>Fired when a node is appended into the root or one of it's children</p>\n"},"onNodeIdChanged":{"!type":"fn(node: +Ext.data.NodeInterface, oldId: number, newId: number) -> !this","!doc":"<p>Fired when a node's id changes.  Updates the node's id in the node hash.</p>\n"},"onNodeInsert":{"!type":"fn(parent: +Ext.data.NodeInterface, node: +Ext.data.NodeInterface) -> !this","!doc":"<p>Fired when a node is inserted into the root or one of it's children</p>\n"},"onNodeRemove":{"!type":"fn(parent: +Ext.data.NodeInterface, node: +Ext.data.NodeInterface) -> !this","!doc":"<p>Fired when a node is removed from the root or one of it's children</p>\n"},"registerNode":{"!type":"fn(node: +Ext.data.NodeInterface, includeChildren?: bool) -> !this","!doc":"<p>Registers a node with the tree</p>\n"},"removeRootNode":{"!type":"fn() -> +Ext.data.NodeInterface","!doc":"<p>Removes the root node from this tree.</p>\n"},"setRootNode":{"!type":"fn(node: +Ext.data.NodeInterface) -> +Ext.data.NodeInterface","!doc":"<p>Sets the root node for this tree.</p>\n"},"sort":{"!type":"fn(this: +Ext.data.NodeInterface, childNodes: [+Ext.data.NodeInterface], eOpts: ?)","!doc":"<p>Fires when this node's childNodes are sorted.</p>\n"},"unregisterNode":{"!type":"fn(node: +Ext.data.NodeInterface, includeChildren?: bool) -> !this","!doc":"<p>Unregisters a node with the tree</p>\n"},"append":{"!type":"fn(this: +Ext.data.NodeInterface, node: +Ext.data.NodeInterface, index: number, eOpts: ?)","!doc":"<p>Fires when a new child node is appended</p>\n"},"beforeappend":{"!type":"fn(this: +Ext.data.NodeInterface, node: +Ext.data.NodeInterface, eOpts: ?)","!doc":"<p>Fires before a new child is appended, return false to cancel the append.</p>\n"},"beforecollapse":{"!type":"fn(this: +Ext.data.NodeInterface, eOpts: ?)","!doc":"<p>Fires before this node is collapsed.</p>\n"},"beforeexpand":{"!type":"fn(this: +Ext.data.NodeInterface, eOpts: ?)","!doc":"<p>Fires before this node is expanded.</p>\n"},"beforeinsert":{"!type":"fn(this: +Ext.data.NodeInterface, node: +Ext.data.NodeInterface, refNode: +Ext.data.NodeInterface, eOpts: ?)","!doc":"<p>Fires before a new child is inserted, return false to cancel the insert.</p>\n"},"beforemove":{"!type":"fn(this: +Ext.data.NodeInterface, oldParent: +Ext.data.NodeInterface, newParent: +Ext.data.NodeInterface, index: number, eOpts: ?)","!doc":"<p>Fires before this node is moved to a new location in the tree. Return false to cancel the move.</p>\n"},"beforeremove":{"!type":"fn(this: +Ext.data.NodeInterface, node: +Ext.data.NodeInterface, isMove: bool, eOpts: ?)","!doc":"<p>Fires before a child is removed, return false to cancel the remove.</p>\n"},"collapse":{"!type":"fn(this: +Ext.data.NodeInterface, eOpts: ?)","!doc":"<p>Fires when this node is collapsed.</p>\n"},"expand":{"!type":"fn(this: +Ext.data.NodeInterface, eOpts: ?)","!doc":"<p>Fires when this node is expanded.</p>\n"},"insert":{"!type":"fn(this: +Ext.data.NodeInterface, node: +Ext.data.NodeInterface, refNode: +Ext.data.NodeInterface, eOpts: ?)","!doc":"<p>Fires when a new child node is inserted.</p>\n"},"move":{"!type":"fn(this: +Ext.data.NodeInterface, oldParent: +Ext.data.NodeInterface, newParent: +Ext.data.NodeInterface, index: number, eOpts: ?)","!doc":"<p>Fires when this node is moved to a new location in the tree</p>\n"},"remove":{"!type":"fn(this: +Ext.data.NodeInterface, node: +Ext.data.NodeInterface, isMove: bool, eOpts: ?)","!doc":"<p>Fires when a child node is removed</p>\n"},"rootchange":{"!type":"fn(root: +Ext.data.Model, eOpts: ?)","!doc":"<p>Fires whenever the root node is changed in the tree.</p>\n"}}},"TreeModel":{"!doc":"<p>This class can be used as a base class from which to derived Models used in Trees.</p>\n","!type":"fn(data: ?)","prototype":{"!proto":"Ext.data.Model.prototype"}},"TreeStore":{"!doc":"<p>The TreeStore is a store implementation that is backed by by an <a href=\"#!/api/Ext.data.Tree\" rel=\"Ext.data.Tree\" class=\"docClass\">Ext.data.Tree</a>.\nIt provides convenience methods for loading nodes, as well as the ability to use\nthe hierarchical tree structure combined with a store. This class is generally used\nin conjunction with <a href=\"#!/api/Ext.tree.Panel\" rel=\"Ext.tree.Panel\" class=\"docClass\">Ext.tree.Panel</a>. This class also relays many events from\nthe Tree for convenience.</p>\n\n<h1>Using Models</h1>\n\n<p>If no Model is specified, an implicit model will be created that implements <a href=\"#!/api/Ext.data.NodeInterface\" rel=\"Ext.data.NodeInterface\" class=\"docClass\">Ext.data.NodeInterface</a>.\nThe standard Tree fields will also be copied onto the Model for maintaining their state. These fields are listed\nin the <a href=\"#!/api/Ext.data.NodeInterface\" rel=\"Ext.data.NodeInterface\" class=\"docClass\">Ext.data.NodeInterface</a> documentation.</p>\n\n<h1>Reading Nested Data</h1>\n\n<p>For the tree to read nested data, the <a href=\"#!/api/Ext.data.reader.Reader\" rel=\"Ext.data.reader.Reader\" class=\"docClass\">Ext.data.reader.Reader</a> must be configured with a root property,\nso the reader can find nested data for each node (if a root is not specified, it will default to\n'children'). This will tell the tree to look for any nested tree nodes by the same keyword, i.e., 'children'.\nIf a root is specified in the config make sure that any nested nodes with children have the same name.\nNote that setting <a href=\"#!/api/Ext.data.TreeStore-cfg-defaultRootProperty\" rel=\"Ext.data.TreeStore-cfg-defaultRootProperty\" class=\"docClass\">defaultRootProperty</a> accomplishes the same thing.</p>\n","!type":"fn(config: Ext_data_TreeStore_cfg)","prototype":{"!proto":"Ext.data.AbstractStore.prototype","clearOnLoad":{"!type":"bool","!doc":"<p>Remove previously existing child nodes before loading.</p>\n"},"clearRemovedOnLoad":{"!type":"bool","!doc":"<p>If <code>true</code>, when a node is reloaded, any records in the <a href=\"#!/api/Ext.data.TreeStore-property-removed\" rel=\"Ext.data.TreeStore-property-removed\" class=\"docClass\">removed</a> record collection that were previously descendants of the node being reloaded will be cleared from the <a href=\"#!/api/Ext.data.TreeStore-property-removed\" rel=\"Ext.data.TreeStore-property-removed\" class=\"docClass\">removed</a> collection.\nOnly applicable if <a href=\"#!/api/Ext.data.TreeStore-cfg-clearOnLoad\" rel=\"Ext.data.TreeStore-cfg-clearOnLoad\" class=\"docClass\">clearOnLoad</a> is <code>true</code>.</p>\n"},"defaultRootId":{"!type":"string","!doc":"<p>The default root id.</p>\n"},"defaultRootProperty":{"!type":"string","!doc":"<p>The root property to specify on the reader if one is not explicitly defined.</p>\n"},"defaultRootText":{"!type":"string","!doc":"<p>The default root text (if not specified)/</p>\n"},"folderSort":{"!type":"bool","!doc":"<p>Set to true to automatically prepend a leaf sorter.</p>\n"},"nodeParam":{"!type":"string","!doc":"<p>The name of the parameter sent to the server which contains the identifier of the node.</p>\n"},"root":{"!type":"+Ext.data.Model|+Ext.data.NodeInterface|?","!doc":"<p>The root node for this store. For example:</p>\n\n<pre><code>root: {\n    expanded: true,\n    text: \"My Root\",\n    children: [\n        { text: \"Child 1\", leaf: true },\n        { text: \"Child 2\", expanded: true, children: [\n            { text: \"GrandChild\", leaf: true }\n        ] }\n    ]\n}\n</code></pre>\n\n<p>Setting the <code>root</code> config option is the same as calling <a href=\"#!/api/Ext.data.TreeStore-method-setRootNode\" rel=\"Ext.data.TreeStore-method-setRootNode\" class=\"docClass\">setRootNode</a>.</p>\n"},"fields":{"!type":"?","!doc":"<p>If we have no fields declare for the store, add some defaults.\nThese will be ignored if a model is explicitly specified.</p>\n"},"fillCount":{"!type":"number"},"rootProperty":{"!type":"string","!doc":"<p>Keep a copy of the default so we know if it's been changed in a subclass/config</p>\n"},"cleanRecords":{"!type":"fn(node: ?, records: ?) -> !this"},"clearRemoved":{"!type":"fn(node: +Ext.data.NodeInterface) -> !this","!doc":"<p>Removes all records that used to be descendants of the passed node from the removed array</p>\n"},"doSort":{"!type":"fn(sorterFn: ?) -> !this","!doc":"<p>inherit docs</p>\n"},"fillNode":{"!type":"fn(node: +Ext.data.NodeInterface, newNodes: [+Ext.data.Model]) -> !this","!doc":"<p>Fills a node with a series of child records.</p>\n"},"getById":{"!type":"fn(id: ?) -> !this","!doc":"<p>inherit docs</p>\n"},"getNewRecords":{"!type":"fn() -> [+Ext.data.Model]","!doc":"<p>inherit docs</p>\n"},"getNodeById":{"!type":"fn(id: ?) -> +Ext.data.NodeInterface","!doc":"<p>Returns the record node by id</p>\n"},"getRootNode":{"!type":"fn() -> +Ext.data.NodeInterface","!doc":"<p>Returns the root node for this tree.</p>\n"},"getUpdatedRecords":{"!type":"fn() -> [+Ext.data.Model]","!doc":"<p>inherit docs</p>\n"},"load":{"!type":"fn(this: +Ext.data.TreeStore, node: +Ext.data.NodeInterface, records: [+Ext.data.Model], successful: bool, eOpts: ?)","!doc":"<p>Fires whenever the store reads data from a remote data source.</p>\n"},"onBeforeNodeExpand":{"!type":"fn(node: +Ext.data.NodeInterface, callback: fn(), scope: ?, args: [?]) -> !this","!doc":"<p>Fired by the root node.</p>\n\n<p>Called before a node is expanded.</p>\n\n<p>This ensures that the child nodes are available before calling the passed callback.</p>\n"},"onBeforeSort":{"!type":"fn() -> !this","!doc":"<p>inherit docs</p>\n"},"onIdChanged":{"!type":"fn(model: ?, oldId: ?, newId: ?, oldInternalId: ?) -> !this"},"onNodeAdded":{"!type":"fn(parent: ?, node: ?) -> !this"},"onNodeRemove":{"!type":"fn(parent: ?, node: ?, isMove: ?) -> !this"},"onNodeSort":{"!type":"fn() -> !this"},"onProxyLoad":{"!type":"fn(operation: ?) -> !this","!doc":"<p>inherit docs</p>\n"},"removeAll":{"!type":"fn() -> !this","!doc":"<p>inherit docs</p>\n"},"setProxy":{"!type":"fn(proxy: ?) -> +Ext.data.proxy.Proxy","!doc":"<p>inherit docs</p>\n"},"setRootNode":{"!type":"fn(root: +Ext.data.Model|+Ext.data.NodeInterface|?) -> +Ext.data.NodeInterface","!doc":"<p>Sets the root node for this store.  See also the <a href=\"#!/api/Ext.data.TreeStore-cfg-root\" rel=\"Ext.data.TreeStore-cfg-root\" class=\"docClass\">root</a> config option.</p>\n"},"sortByIndex":{"!type":"fn(node1: +Ext.data.NodeInterface, node2: +Ext.data.NodeInterface) -> number","!doc":"<p>Sorter function for sorting records in index order</p>\n"},"append":{"!type":"fn(this: +Ext.data.NodeInterface, node: +Ext.data.NodeInterface, index: number, eOpts: ?)","!doc":"<p>Fires when a new child node is appended</p>\n"},"beforeappend":{"!type":"fn(this: +Ext.data.NodeInterface, node: +Ext.data.NodeInterface, eOpts: ?)","!doc":"<p>Fires before a new child is appended, return false to cancel the append.</p>\n"},"beforecollapse":{"!type":"fn(this: +Ext.data.NodeInterface, eOpts: ?)","!doc":"<p>Fires before this node is collapsed.</p>\n"},"beforeexpand":{"!type":"fn(this: +Ext.data.NodeInterface, eOpts: ?)","!doc":"<p>Fires before this node is expanded.</p>\n"},"beforeinsert":{"!type":"fn(this: +Ext.data.NodeInterface, node: +Ext.data.NodeInterface, refNode: +Ext.data.NodeInterface, eOpts: ?)","!doc":"<p>Fires before a new child is inserted, return false to cancel the insert.</p>\n"},"beforemove":{"!type":"fn(this: +Ext.data.NodeInterface, oldParent: +Ext.data.NodeInterface, newParent: +Ext.data.NodeInterface, index: number, eOpts: ?)","!doc":"<p>Fires before this node is moved to a new location in the tree. Return false to cancel the move.</p>\n"},"beforeremove":{"!type":"fn(this: +Ext.data.NodeInterface, node: +Ext.data.NodeInterface, isMove: bool, eOpts: ?)","!doc":"<p>Fires before a child is removed, return false to cancel the remove.</p>\n"},"collapse":{"!type":"fn(this: +Ext.data.NodeInterface, eOpts: ?)","!doc":"<p>Fires when this node is collapsed.</p>\n"},"expand":{"!type":"fn(this: +Ext.data.NodeInterface, eOpts: ?)","!doc":"<p>Fires when this node is expanded.</p>\n"},"insert":{"!type":"fn(this: +Ext.data.NodeInterface, node: +Ext.data.NodeInterface, refNode: +Ext.data.NodeInterface, eOpts: ?)","!doc":"<p>Fires when a new child node is inserted.</p>\n"},"move":{"!type":"fn(this: +Ext.data.NodeInterface, oldParent: +Ext.data.NodeInterface, newParent: +Ext.data.NodeInterface, index: number, eOpts: ?)","!doc":"<p>Fires when this node is moved to a new location in the tree</p>\n"},"remove":{"!type":"fn(this: +Ext.data.NodeInterface, node: +Ext.data.NodeInterface, isMove: bool, eOpts: ?)","!doc":"<p>Fires when a child node is removed</p>\n"},"sort":{"!type":"fn(this: +Ext.data.NodeInterface, childNodes: [+Ext.data.NodeInterface], eOpts: ?)","!doc":"<p>Fires when this node's childNodes are sorted.</p>\n"}}},"Types":{"!doc":"<p>This is a static class containing the system-supplied data types\nwhich may be given to a <a href=\"#!/api/Ext.data.Field\" rel=\"Ext.data.Field\" class=\"docClass\">Field</a>.</p>\n\n<p>The properties in this class are used as type indicators in the\n<a href=\"#!/api/Ext.data.Field\" rel=\"Ext.data.Field\" class=\"docClass\">Field</a> class, so to test whether a Field is\nof a certain type, compare the <a href=\"#!/api/Ext.data.Field-cfg-type\" rel=\"Ext.data.Field-cfg-type\" class=\"docClass\">type</a>\nproperty against properties of this class.</p>\n\n<p>Developers may add their own application-specific data types to\nthis class. Definition names must be UPPERCASE. Each type\ndefinition must contain three properties:</p>\n\n<ul>\n<li><p><code>convert</code> : Function<br>\nA function to convert raw data values from a data block into\nthe data to be stored in the Field. The function is passed the\ncollowing parameters:</p>\n\n<ul>\n<li><strong>v</strong> : Mixed<br>\nThe data value as read by the Reader, if undefined will use\nthe configured <a href=\"#!/api/Ext.data.Field-cfg-defaultValue\" rel=\"Ext.data.Field-cfg-defaultValue\" class=\"docClass\">defaultValue</a>.</li>\n<li><strong>rec</strong> : Mixed<br>\nThe data object containing the row as read by the Reader.\nDepending on the Reader type, this could be an Array\n(<a href=\"#!/api/Ext.data.reader.Array\" rel=\"Ext.data.reader.Array\" class=\"docClass\">ArrayReader</a>), an object\n(<a href=\"#!/api/Ext.data.reader.Json\" rel=\"Ext.data.reader.Json\" class=\"docClass\">JsonReader</a>), or an XML element.</li>\n</ul>\n</li>\n<li><p><code>sortType</code> : Function<br>\nA function to convert the stored data into comparable form, as\ndefined by <a href=\"#!/api/Ext.data.SortTypes\" rel=\"Ext.data.SortTypes\" class=\"docClass\">Ext.data.SortTypes</a>.</p></li>\n<li><p><code>type</code> : String<br>\nA textual data type name.</p></li>\n</ul>\n\n\n<p>For example, to create a VELatLong field (See the Microsoft Bing\nMapping API) containing the latitude/longitude value of a datapoint\non a map from a JsonReader data block</p>\n\n<p>which contained the properties <code>lat</code> and <code>long</code>, you would define a\nnew data type like this:</p>\n\n<pre><code>// Add a new Field data type which stores a VELatLong object in the Record.\nExt.data.Types.VELATLONG = {\n    convert: function(v, data) {\n        return new VELatLong(data.lat, data.long);\n    },\n    sortType: function(v) {\n        return v.Latitude;  // When sorting, order by latitude\n    },\n    type: 'VELatLong'\n};\n</code></pre>\n\n<p>Then, when declaring a Model, use:</p>\n\n<pre><code>var types = <a href=\"#!/api/Ext.data.Types\" rel=\"Ext.data.Types\" class=\"docClass\">Ext.data.Types</a>; // allow shorthand type access\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Unit',\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: [\n        { name: 'unitName', mapping: 'UnitName' },\n        { name: 'curSpeed', mapping: 'CurSpeed', type: types.INT },\n        { name: 'latitude', mapping: 'lat', type: types.FLOAT },\n        { name: 'longitude', mapping: 'long', type: types.FLOAT },\n        { name: 'position', type: types.VELATLONG }\n    ]\n});\n</code></pre>\n","AUTO":{"!type":"?","!doc":"<p>This data type means that no conversion is applied to the raw data before it is placed into a Record.</p>\n"},"BOOL":{"!type":"?","!doc":"<p>This data type means that the raw data is converted into a boolean before it is placed into\na Record. The string \"true\" and the number 1 are converted to boolean true.</p>\n\n<p>The synonym <code>BOOLEAN</code> is equivalent.</p>\n"},"BOOLEAN":{"!type":"?","!doc":"<p>This data type means that the raw data is converted into a boolean before it is placed into\na Record. The string \"true\" and the number 1 are converted to boolean <code>true</code>.</p>\n\n<p>The synonym <code>BOOL</code> is equivalent.</p>\n"},"DATE":{"!type":"?","!doc":"<p>This data type means that the raw data is converted into a Date before it is placed into a Record.\nThe date format is specified in the constructor of the <a href=\"#!/api/Ext.data.Field\" rel=\"Ext.data.Field\" class=\"docClass\">Ext.data.Field</a> to which this type is\nbeing applied.</p>\n"},"FLOAT":{"!type":"?","!doc":"<p>This data type means that the raw data is converted into a number before it is placed into a Record.</p>\n\n<p>The synonym <code>NUMBER</code> is equivalent.</p>\n"},"INT":{"!type":"?","!doc":"<p>This data type means that the raw data is converted into an integer before it is placed into a Record.</p>\n\n<p>The synonym <code>INTEGER</code> is equivalent.</p>\n"},"INTEGER":{"!type":"?","!doc":"<p>This data type means that the raw data is converted into an integer before it is placed into a Record.</p>\n\n<p>The synonym <code>INT</code> is equivalent.</p>\n"},"NUMBER":{"!type":"?","!doc":"<p>This data type means that the raw data is converted into a number before it is placed into a Record.</p>\n\n<p>The synonym <code>FLOAT</code> is equivalent.</p>\n"},"STRING":{"!type":"?","!doc":"<p>This data type means that the raw data is converted into a String before it is placed into a Record.</p>\n"},"stripRe":{"!type":"+RegExp","!doc":"<p>A regular expression for stripping non-numeric characters from a numeric value.\nThis should be overridden for localization.</p>\n"}},"UuidGenerator":{"!doc":"<p>This class generates UUID's according to RFC 4122. This class has a default id property.\nThis means that a single instance is shared unless the id property is overridden. Thus,\ntwo <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a> instances configured like the following share one generator:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('MyApp.data.MyModelX', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    idgen: 'uuid'\n});\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('MyApp.data.MyModelY', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    idgen: 'uuid'\n});\n</code></pre>\n\n<p>This allows all models using this class to share a commonly configured instance.</p>\n\n<h1>Using Version 1 (\"Sequential\") UUID's</h1>\n\n<p>If a server can provide a proper timestamp and a \"cryptographic quality random number\"\n(as described in RFC 4122), the shared instance can be configured as follows:</p>\n\n<pre><code><a href=\"#!/api/Ext.data.IdGenerator-static-method-get\" rel=\"Ext.data.IdGenerator-static-method-get\" class=\"docClass\">Ext.data.IdGenerator.get</a>('uuid').reconfigure({\n    version: 1,\n    clockSeq: clock, // 14 random bits\n    salt: salt,      // 48 secure random bits (the Node field)\n    timestamp: ts    // timestamp per Section 4.1.4\n});\n\n// or these values can be split into 32-bit chunks:\n\n<a href=\"#!/api/Ext.data.IdGenerator-static-method-get\" rel=\"Ext.data.IdGenerator-static-method-get\" class=\"docClass\">Ext.data.IdGenerator.get</a>('uuid').reconfigure({\n    version: 1,\n    clockSeq: clock,\n    salt: { lo: saltLow32, hi: saltHigh32 },\n    timestamp: { lo: timestampLow32, hi: timestamptHigh32 }\n});\n</code></pre>\n\n<p>This approach improves the generator's uniqueness by providing a valid timestamp and\nhigher quality random data. Version 1 UUID's should not be used unless this information\ncan be provided by a server and care should be taken to avoid caching of this data.</p>\n\n<p>See http://www.ietf.org/rfc/rfc4122.txt for details.</p>\n","!type":"fn(config?: Ext_data_UuidGenerator_cfg)","prototype":{"!proto":"Ext.data.IdGenerator.prototype","version":{"!type":"number","!doc":"<p>The Version of UUID. Supported values are:</p>\n\n<ul>\n<li>1 : Time-based, \"sequential\" UUID.</li>\n<li>4 : Pseudo-random UUID.</li>\n</ul>\n\n\n<p>The default is 4.</p>\n"},"salt":{"!type":"number|?","!doc":"<p>When created, this value is a 48-bit number. For computation, this value is split\ninto 32-bit parts and stored in an object with <code>hi</code> and <code>lo</code> properties.</p>\n"},"timestamp":{"!type":"number|?","!doc":"<p>When created, this value is a 60-bit number. For computation, this value is split\ninto 32-bit parts and stored in an object with <code>hi</code> and <code>lo</code> properties.</p>\n"},"init":{"!type":"fn() -> !this"},"reconfigure":{"!type":"fn(config: ?) -> !this","!doc":"<p>Reconfigures this generator given new config properties.</p>\n"}}},"XmlStore":{"!doc":"<p>Small helper class to make creating <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>s from XML data easier.\nA XmlStore will be automatically configured with a <a href=\"#!/api/Ext.data.reader.Xml\" rel=\"Ext.data.reader.Xml\" class=\"docClass\">Ext.data.reader.Xml</a>.</p>\n\n\n<p>A store configuration would be something like:\n<pre><code>var store = new <a href=\"#!/api/Ext.data.XmlStore\" rel=\"Ext.data.XmlStore\" class=\"docClass\">Ext.data.XmlStore</a>({\n    // store configs\n    storeId: 'myStore',\n    url: 'sheldon.xml', // automatically configures a HttpProxy\n    // reader configs\n    record: 'Item', // records will have an \"Item\" tag\n    idPath: 'ASIN',\n    totalRecords: '@TotalResults'\n    fields: [\n        // set up the fields mapping into the xml doc\n        // The first needs mapping, the others are very basic\n        {name: 'Author', mapping: 'ItemAttributes > Author'},\n        'Title', 'Manufacturer', 'ProductGroup'\n    ]\n});\n</code></pre></p>\n\n\n<p>This store is configured to consume a returned object of the form:\n<pre><code>&#60?xml version=\"1.0\" encoding=\"UTF-8\"?>\n&#60ItemSearchResponse xmlns=\"http://webservices.amazon.com/AWSECommerceService/2009-05-15\">\n    &#60Items>\n        &#60Request>\n            &#60IsValid>True&#60/IsValid>\n            &#60ItemSearchRequest>\n                &#60Author>Sidney Sheldon&#60/Author>\n                &#60SearchIndex>Books&#60/SearchIndex>\n            &#60/ItemSearchRequest>\n        &#60/Request>\n        &#60TotalResults>203&#60/TotalResults>\n        &#60TotalPages>21&#60/TotalPages>\n        &#60Item>\n            &#60ASIN>0446355453&#60/ASIN>\n            &#60DetailPageURL>\n                http://www.amazon.com/\n            &#60/DetailPageURL>\n            &#60ItemAttributes>\n                &#60Author>Sidney Sheldon&#60/Author>\n                &#60Manufacturer>Warner Books&#60/Manufacturer>\n                &#60ProductGroup>Book&#60/ProductGroup>\n                &#60Title>Master of the Game&#60/Title>\n            &#60/ItemAttributes>\n        &#60/Item>\n    &#60/Items>\n&#60/ItemSearchResponse>\n</code></pre>\nAn object literal of this form could also be used as the <a href=\"#!/api/Ext.data.XmlStore-cfg-data\" rel=\"Ext.data.XmlStore-cfg-data\" class=\"docClass\">data</a> config option.</p>\n\n\n<p><b>Note:</b> This class accepts all of the configuration options of\n<b><a href=\"#!/api/Ext.data.reader.Xml\" rel=\"Ext.data.reader.Xml\" class=\"docClass\">XmlReader</a></b>.</p>\n\n","!type":"fn(config: Ext_data_XmlStore_cfg)","prototype":{"!proto":"Ext.data.Store.prototype"}},"association":{"Association":{"!doc":"<p>Associations enable you to express relationships between different <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Models</a>. Let's say we're\nwriting an ecommerce system where Users can make Orders - there's a relationship between these Models that we can\nexpress like this:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('User', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['id', 'name', 'email'],\n\n    hasMany: {model: 'Order', name: 'orders'}\n});\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Order', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['id', 'user_id', 'status', 'price'],\n\n    belongsTo: 'User'\n});\n</code></pre>\n\n<p>We've set up two models - User and Order - and told them about each other. You can set up as many associations on\neach Model as you need using the two default types - <a href=\"#!/api/Ext.data.association.HasMany\" rel=\"Ext.data.association.HasMany\" class=\"docClass\">hasMany</a> and <a href=\"#!/api/Ext.data.association.BelongsTo\" rel=\"Ext.data.association.BelongsTo\" class=\"docClass\">belongsTo</a>. There's much more detail on the usage of each of those inside their\ndocumentation pages. If you're not familiar with Models already, <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">there is plenty on those too</a>.</p>\n\n<p><strong>Further Reading</strong></p>\n\n<ul>\n<li><a href=\"#!/api/Ext.data.association.HasMany\" rel=\"Ext.data.association.HasMany\" class=\"docClass\">hasMany associations</a></li>\n<li><a href=\"#!/api/Ext.data.association.BelongsTo\" rel=\"Ext.data.association.BelongsTo\" class=\"docClass\">belongsTo associations</a></li>\n<li><a href=\"#!/api/Ext.data.association.HasOne\" rel=\"Ext.data.association.HasOne\" class=\"docClass\">hasOne associations</a></li>\n<li><a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">using Models</a></li>\n</ul>\n\n\n<h1>Self association models</h1>\n\n<p>We can also have models that create parent/child associations between the same type. Below is an example, where\ngroups can be nested inside other groups:</p>\n\n<pre><code>// Server Data\n{\n    \"groups\": {\n        \"id\": 10,\n        \"parent_id\": 100,\n        \"name\": \"Main Group\",\n        \"parent_group\": {\n            \"id\": 100,\n            \"parent_id\": null,\n            \"name\": \"Parent Group\"\n        },\n        \"nested\" : {\n            \"child_groups\": [{\n                \"id\": 2,\n                \"parent_id\": 10,\n                \"name\": \"Child Group 1\"\n            },{\n                \"id\": 3,\n                \"parent_id\": 10,\n                \"name\": \"Child Group 2\"\n            },{\n                \"id\": 4,\n                \"parent_id\": 10,\n                \"name\": \"Child Group 3\"\n            }]\n        }\n    }\n}\n\n// Client code\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Group', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['id', 'parent_id', 'name'],\n    proxy: {\n        type: 'ajax',\n        url: 'data.json',\n        reader: {\n            type: 'json',\n            root: 'groups'\n        }\n    },\n    associations: [{\n        type: 'hasMany',\n        model: 'Group',\n        primaryKey: 'id',\n        foreignKey: 'parent_id',\n        autoLoad: true,\n        associationKey: 'nested.child_groups' // read child data from nested.child_groups\n    }, {\n        type: 'belongsTo',\n        model: 'Group',\n        primaryKey: 'id',\n        foreignKey: 'parent_id',\n        associationKey: 'parent_group' // read parent data from parent_group\n    }]\n});\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function(){\n\n    Group.load(10, {\n        success: function(group){\n            console.log(group.getGroup().get('name'));\n\n            group.groups().each(function(rec){\n                console.log(rec.get('name'));\n            });\n        }\n    });\n\n});\n</code></pre>\n","!type":"fn(config?: Ext_data_association_Association_cfg)","prototype":{"!proto":"Ext.Base.prototype","associatedModel":{"!type":"string","!doc":"<p>The string name of the model that is being associated with.</p>\n\n<p><strong>NB!</strong> This config is required when instantiating the Association directly.\nWhen defining the association as a config object inside Model, the <a href=\"#!/api/Ext.data.association.Association-cfg-model\" rel=\"Ext.data.association.Association-cfg-model\" class=\"docClass\">model</a>\nconfiguration will shadow this config.</p>\n"},"associationKey":{"!type":"string","!doc":"<p>The name of the property in the data to read the association from. Defaults to the name of the associated model.</p>\n"},"model":{"!type":"string","!doc":"<p>The string name of the model that is being associated with.</p>\n\n<p>This config option is to be used when defining the association as a config\nobject within Model.  The value is then mapped to <a href=\"#!/api/Ext.data.association.Association-cfg-associatedModel\" rel=\"Ext.data.association.Association-cfg-associatedModel\" class=\"docClass\">associatedModel</a> when\nAssociation is instantiated inside Model.</p>\n"},"ownerModel":{"!type":"string","!doc":"<p>The string name of the model that owns the association.</p>\n\n<p><strong>NB!</strong> This config is required when instantiating the Association directly.\nHowever, it cannot be used at all when defining the association as a config\nobject inside Model, because the name of the model itself will be supplied\nautomatically as the value of this config.</p>\n"},"primaryKey":{"!type":"string","!doc":"<p>The name of the primary key on the associated model. In general this will be the\n<a href=\"#!/api/Ext.data.Model-cfg-idProperty\" rel=\"Ext.data.Model-cfg-idProperty\" class=\"docClass\">Ext.data.Model.idProperty</a> of the Model.</p>\n"},"reader":{"!type":"+Ext.data.reader.Reader","!doc":"<p>A special reader to read associated data</p>\n"},"associatedName":{"!type":"string","!doc":"<p>The name of the model is on the other end of the association (e.g. if a User model hasMany Orders, this is\n'Order')</p>\n"},"defaultReaderType":{"!type":"string"},"initialConfig":{"!type":"?"},"isAssociation":{"!type":"bool"},"ownerName":{"!type":"string","!doc":"<p>The name of the model that 'owns' the association</p>\n"},"getReader":{"!type":"fn() -> +Ext.data.reader.Reader","!doc":"<p>Get a specialized reader for reading associated data</p>\n"}},"AUTO_ID":{"!type":"number"},"create":{"!type":"fn(association: ?) -> !this"}},"BelongsTo":{"!doc":"<p>Represents a many to one association with another model. The owner model is expected to have\na foreign key which references the primary key of the associated model:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Category', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: [\n        { name: 'id',   type: 'int' },\n        { name: 'name', type: 'string' }\n    ]\n});\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Product', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: [\n        { name: 'id',          type: 'int' },\n        { name: 'category_id', type: 'int' },\n        { name: 'name',        type: 'string' }\n    ],\n    // we can use the belongsTo shortcut on the model to create a belongsTo association\n    associations: [\n        { type: 'belongsTo', model: 'Category' }\n    ]\n});\n</code></pre>\n\n<p>In the example above we have created models for Products and Categories, and linked them together\nby saying that each Product belongs to a Category. This automatically links each Product to a Category\nbased on the Product's category_id, and provides new functions on the Product model:</p>\n\n<h2>Generated getter function</h2>\n\n<p>The first function that is added to the owner model is a getter function:</p>\n\n<pre><code>var product = new Product({\n    id: 100,\n    category_id: 20,\n    name: 'Sneakers'\n});\n\nproduct.getCategory(function(category, operation) {\n    // do something with the category object\n    alert(category.get('id')); // alerts 20\n}, this);\n</code></pre>\n\n<p>The getCategory function was created on the Product model when we defined the association. This uses the\nCategory's configured <a href=\"#!/api/Ext.data.proxy.Proxy\" rel=\"Ext.data.proxy.Proxy\" class=\"docClass\">proxy</a> to load the Category asynchronously, calling the provided\ncallback when it has loaded.</p>\n\n<p>The new getCategory function will also accept an object containing success, failure and callback properties\n- callback will always be called, success will only be called if the associated model was loaded successfully\nand failure will only be called if the associatied model could not be loaded:</p>\n\n<pre><code>product.getCategory({\n    reload: true, // force a reload if the owner model is already cached\n    callback: function(category, operation) {}, // a function that will always be called\n    success : function(category, operation) {}, // a function that will only be called if the load succeeded\n    failure : function(category, operation) {}, // a function that will only be called if the load did not succeed\n    scope   : this // optionally pass in a scope object to execute the callbacks in\n});\n</code></pre>\n\n<p>In each case above the callbacks are called with two arguments - the associated model instance and the\n<a href=\"#!/api/Ext.data.Operation\" rel=\"Ext.data.Operation\" class=\"docClass\">operation</a> object that was executed to load that instance. The Operation object is\nuseful when the instance could not be loaded.</p>\n\n<p>Once the getter has been called on the model, it will be cached if the getter is called a second time. To\nforce the model to reload, specify reload: true in the options object.</p>\n\n<h2>Generated setter function</h2>\n\n<p>The second generated function sets the associated model instance - if only a single argument is passed to\nthe setter then the following two calls are identical:</p>\n\n<pre><code>// this call...\nproduct.setCategory(10);\n\n// is equivalent to this call:\nproduct.set('category_id', 10);\n</code></pre>\n\n<p>An instance of the owner model can also be passed as a parameter.</p>\n\n<p>If we pass in a second argument, the model will be automatically saved and the second argument passed to\nthe owner model's <a href=\"#!/api/Ext.data.Model-method-save\" rel=\"Ext.data.Model-method-save\" class=\"docClass\">save</a> method:</p>\n\n<pre><code>product.setCategory(10, function(product, operation) {\n    // the product has been saved\n    alert(product.get('category_id')); //now alerts 10\n});\n\n//alternative syntax:\nproduct.setCategory(10, {\n    callback: function(product, operation), // a function that will always be called\n    success : function(product, operation), // a function that will only be called if the load succeeded\n    failure : function(product, operation), // a function that will only be called if the load did not succeed\n    scope   : this //optionally pass in a scope object to execute the callbacks in\n})\n</code></pre>\n\n<h2>Customisation</h2>\n\n<p>Associations reflect on the models they are linking to automatically set up properties such as the\n<a href=\"#!/api/Ext.data.association.BelongsTo-cfg-primaryKey\" rel=\"Ext.data.association.BelongsTo-cfg-primaryKey\" class=\"docClass\">primaryKey</a> and <a href=\"#!/api/Ext.data.association.BelongsTo-cfg-foreignKey\" rel=\"Ext.data.association.BelongsTo-cfg-foreignKey\" class=\"docClass\">foreignKey</a>. These can alternatively be specified:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Product', {\n    fields: [...],\n\n    associations: [\n        { type: 'belongsTo', model: 'Category', primaryKey: 'unique_id', foreignKey: 'cat_id' }\n    ]\n});\n</code></pre>\n\n<p>Here we replaced the default primary key (defaults to 'id') and foreign key (calculated as 'category_id')\nwith our own settings. Usually this will not be needed.</p>\n","!type":"fn(config?: Ext_data_association_BelongsTo_cfg)","prototype":{"!proto":"Ext.data.association.Association.prototype","foreignKey":{"!type":"string","!doc":"<p>The name of the foreign key on the owner model that links it to the associated\nmodel. Defaults to the lowercased name of the associated model plus \"_id\", e.g. an association with a\nmodel called Product would set up a product_id foreign key.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Order', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['id', 'date'],\n    hasMany: 'Product'\n});\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Product', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['id', 'name', 'order_id'], // refers to the id of the order that this product belongs to\n    belongsTo: 'Order'\n});\nvar product = new Product({\n    id: 1,\n    name: 'Product 1',\n    order_id: 22\n}, 1);\nproduct.getOrder(); // Will make a call to the server asking for order_id 22\n</code></pre>\n"},"getterName":{"!type":"string","!doc":"<p>The name of the getter function that will be added to the local model's prototype.\nDefaults to 'get' + the name of the foreign model, e.g. getCategory</p>\n"},"setterName":{"!type":"string","!doc":"<p>The name of the setter function that will be added to the local model's prototype.\nDefaults to 'set' + the name of the foreign model, e.g. setCategory</p>\n"},"type":{"!type":"string","!doc":"<p>The type configuration can be used when creating associations using a configuration object.\nUse 'belongsTo' to create a BelongsTo association.</p>\n\n<pre><code>associations: [{\n    type: 'belongsTo',\n    model: 'User'\n}]\n</code></pre>\n"},"createGetter":{"!type":"fn() -> fn()","!doc":"<p>Returns a getter function to be placed on the owner model's prototype. We cache the loaded instance\nthe first time it is loaded so that subsequent calls to the getter always receive the same reference.</p>\n"},"createSetter":{"!type":"fn() -> fn()","!doc":"<p>Returns a setter function to be placed on the owner model's prototype</p>\n"},"read":{"!type":"fn(record: +Ext.data.Model, reader: +Ext.data.reader.Reader, associationData: ?) -> !this","!doc":"<p>Read associated data</p>\n"}}},"HasMany":{"!doc":"<p>Represents a one-to-many relationship between two models. Usually created indirectly via a model definition:</p>\n\n\n\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Product', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: [\n        {name: 'id',      type: 'int'},\n        {name: 'user_id', type: 'int'},\n        {name: 'name',    type: 'string'}\n    ]\n});\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('User', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: [\n        {name: 'id',   type: 'int'},\n        {name: 'name', type: 'string'}\n    ],\n    // we can use the hasMany shortcut on the model to create a hasMany association\n    hasMany: {model: 'Product', name: 'products'}\n});\n</code></pre>\n\n\n\n\n<p>Above we created Product and User models, and linked them by saying that a User hasMany Products. This gives\nus a new function on every User instance, in this case the function is called 'products' because that is the name\nwe specified in the association configuration above.</p>\n\n\n\n\n<p>This new function returns a specialized <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Store</a> which is automatically filtered to load\nonly Products for the given model instance:</p>\n\n\n\n\n<pre><code>//first, we load up a User with id of 1\nvar user = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('User', {id: 1, name: 'Ed'});\n\n//the user.products function was created automatically by the association and returns a <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Store</a>\n//the created store is automatically scoped to the set of Products for the User with id of 1\nvar products = user.products();\n\n//we still have all of the usual Store functions, for example it's easy to add a Product for this User\nproducts.add({\n    name: 'Another Product'\n});\n\n//saves the changes to the store - this automatically sets the new Product's user_id to 1 before saving\nproducts.sync();\n</code></pre>\n\n\n\n\n<p>The new Store is only instantiated the first time you call products() to conserve memory and processing time,\nthough calling products() a second time returns the same store instance.</p>\n\n\n\n\n<p><u>Custom filtering</u></p>\n\n\n\n\n<p>The Store is automatically furnished with a filter - by default this filter tells the store to only return\nrecords where the associated model's foreign key matches the owner model's primary key. For example, if a User\nwith ID = 100 hasMany Products, the filter loads only Products with user_id == 100.</p>\n\n\n\n\n<p>Sometimes we want to filter by another field - for example in the case of a Twitter search application we may\nhave models for Search and Tweet:</p>\n\n\n\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Search', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: [\n        'id', 'query'\n    ],\n\n    hasMany: {\n        model: 'Tweet',\n        name : 'tweets',\n        filterProperty: 'query'\n    }\n});\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Tweet', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: [\n        'id', 'text', 'from_user'\n    ]\n});\n\n//returns a Store filtered by the filterProperty\nvar store = new Search({query: 'Sencha Touch'}).tweets();\n</code></pre>\n\n\n\n\n<p>The tweets association above is filtered by the query property by setting the <a href=\"#!/api/Ext.data.association.HasMany-cfg-filterProperty\" rel=\"Ext.data.association.HasMany-cfg-filterProperty\" class=\"docClass\">filterProperty</a>, and is\nequivalent to this:</p>\n\n\n\n\n<pre><code>var store = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    model: 'Tweet',\n    filters: [\n        {\n            property: 'query',\n            value   : 'Sencha Touch'\n        }\n    ]\n});\n</code></pre>\n\n","!type":"fn(config?: Ext_data_association_HasMany_cfg)","prototype":{"!proto":"Ext.data.association.Association.prototype","autoLoad":{"!type":"bool","!doc":"<p>True to automatically load the related store from a remote source when instantiated.\nDefaults to <tt>false</tt>.</p>\n"},"filterProperty":{"!type":"string","!doc":"<p>Optionally overrides the default filter that is set up on the associated Store. If\nthis is not set, a filter is automatically created which filters the association based on the configured\n<a href=\"#!/api/Ext.data.association.HasMany-cfg-foreignKey\" rel=\"Ext.data.association.HasMany-cfg-foreignKey\" class=\"docClass\">foreignKey</a>. See intro docs for more details. Defaults to undefined</p>\n"},"foreignKey":{"!type":"string","!doc":"<p>The name of the foreign key on the associated model that links it to the owner\nmodel. Defaults to the lowercased name of the owner model plus \"_id\", e.g. an association with a where a\nmodel called Group hasMany Users would create 'group_id' as the foreign key. When the remote store is loaded,\nthe store is automatically filtered so that only records with a matching foreign key are included in the\nresulting child store. This can be overridden by specifying the <a href=\"#!/api/Ext.data.association.HasMany-cfg-filterProperty\" rel=\"Ext.data.association.HasMany-cfg-filterProperty\" class=\"docClass\">filterProperty</a>.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Group', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['id', 'name'],\n    hasMany: 'User'\n});\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('User', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['id', 'name', 'group_id'], // refers to the id of the group that this user belongs to\n    belongsTo: 'Group'\n});\n</code></pre>\n\n"},"name":{"!type":"string","!doc":"<p>The name of the function to create on the owner model to retrieve the child store.\nIf not specified, the pluralized name of the child model is used.</p>\n\n<pre><code>// This will create a users() method on any Group model instance\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Group', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['id', 'name'],\n    hasMany: 'User'\n});\nvar group = new Group();\nconsole.log(group.users());\n\n// The method to retrieve the users will now be getUserList\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Group', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['id', 'name'],\n    hasMany: {model: 'User', name: 'getUserList'}\n});\nvar group = new Group();\nconsole.log(group.getUserList());\n</code></pre>\n\n"},"storeConfig":{"!type":"?","!doc":"<p>Optional configuration object that will be passed to the generated Store. Defaults to\nundefined.</p>\n"},"type":{"!type":"string","!doc":"<p>The type configuration can be used when creating associations using a configuration object.\nUse 'hasMany' to create a HasMany association</p>\n\n<pre><code>associations: [{\n    type: 'hasMany',\n    model: 'User'\n}]\n</code></pre>\n\n"},"createStore":{"!type":"fn() -> fn()","!doc":"<p>Creates a function that returns an <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a> which is configured to load a set of data filtered\nby the owner model's primary key - e.g. in a hasMany association where Group hasMany Users, this function\nreturns a Store configured to return the filtered set of a single Group's Users.</p>\n"},"read":{"!type":"fn(record: +Ext.data.Model, reader: +Ext.data.reader.Reader, associationData: ?) -> !this","!doc":"<p>Read associated data</p>\n"}}},"HasOne":{"!doc":"<p>Represents a one to one association with another model. The owner model is expected to have\na foreign key which references the primary key of the associated model:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Address', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: [\n        { name: 'id',          type: 'int' },\n        { name: 'number', type: 'string' },\n        { name: 'street', type: 'string' },\n        { name: 'city', type: 'string' },\n        { name: 'zip', type: 'string' },\n    ]\n});\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Person', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: [\n        { name: 'id',   type: 'int' },\n        { name: 'name', type: 'string' },\n        { name: 'address_id', type: 'int'}\n    ],\n    // we can use the hasOne shortcut on the model to create a hasOne association\n    associations: [{ type: 'hasOne', model: 'Address' }]\n});\n</code></pre>\n\n<p>In the example above we have created models for People and Addresses, and linked them together\nby saying that each Person has a single Address. This automatically links each Person to an Address\nbased on the Persons address_id, and provides new functions on the Person model:</p>\n\n<h2>Generated getter function</h2>\n\n<p>The first function that is added to the owner model is a getter function:</p>\n\n<pre><code>var person = new Person({\n    id: 100,\n    address_id: 20,\n    name: 'John Smith'\n});\n\nperson.getAddress(function(address, operation) {\n    // do something with the address object\n    alert(address.get('id')); // alerts 20\n}, this);\n</code></pre>\n\n<p>The getAddress function was created on the Person model when we defined the association. This uses the\nPersons configured <a href=\"#!/api/Ext.data.proxy.Proxy\" rel=\"Ext.data.proxy.Proxy\" class=\"docClass\">proxy</a> to load the Address asynchronously, calling the provided\ncallback when it has loaded.</p>\n\n<p>The new getAddress function will also accept an object containing success, failure and callback properties\n- callback will always be called, success will only be called if the associated model was loaded successfully\nand failure will only be called if the associatied model could not be loaded:</p>\n\n<pre><code>person.getAddress({\n    reload: true, // force a reload if the owner model is already cached\n    callback: function(address, operation) {}, // a function that will always be called\n    success : function(address, operation) {}, // a function that will only be called if the load succeeded\n    failure : function(address, operation) {}, // a function that will only be called if the load did not succeed\n    scope   : this // optionally pass in a scope object to execute the callbacks in\n});\n</code></pre>\n\n<p>In each case above the callbacks are called with two arguments - the associated model instance and the\n<a href=\"#!/api/Ext.data.Operation\" rel=\"Ext.data.Operation\" class=\"docClass\">operation</a> object that was executed to load that instance. The Operation object is\nuseful when the instance could not be loaded.</p>\n\n<p>Once the getter has been called on the model, it will be cached if the getter is called a second time. To\nforce the model to reload, specify reload: true in the options object.</p>\n\n<h2>Generated setter function</h2>\n\n<p>The second generated function sets the associated model instance - if only a single argument is passed to\nthe setter then the following two calls are identical:</p>\n\n<pre><code>// this call...\nperson.setAddress(10);\n\n// is equivalent to this call:\nperson.set('address_id', 10);\n</code></pre>\n\n<p>An instance of the owner model can also be passed as a parameter.</p>\n\n<p>If we pass in a second argument, the model will be automatically saved and the second argument passed to\nthe owner model's <a href=\"#!/api/Ext.data.Model-method-save\" rel=\"Ext.data.Model-method-save\" class=\"docClass\">save</a> method:</p>\n\n<pre><code>person.setAddress(10, function(address, operation) {\n    // the address has been saved\n    alert(address.get('address_id')); //now alerts 10\n});\n\n//alternative syntax:\nperson.setAddress(10, {\n    callback: function(address, operation), // a function that will always be called\n    success : function(address, operation), // a function that will only be called if the load succeeded\n    failure : function(address, operation), // a function that will only be called if the load did not succeed\n    scope   : this //optionally pass in a scope object to execute the callbacks in\n})\n</code></pre>\n\n<h2>Customisation</h2>\n\n<p>Associations reflect on the models they are linking to automatically set up properties such as the\n<a href=\"#!/api/Ext.data.association.HasOne-cfg-primaryKey\" rel=\"Ext.data.association.HasOne-cfg-primaryKey\" class=\"docClass\">primaryKey</a> and <a href=\"#!/api/Ext.data.association.HasOne-cfg-foreignKey\" rel=\"Ext.data.association.HasOne-cfg-foreignKey\" class=\"docClass\">foreignKey</a>. These can alternatively be specified:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Person', {\n    fields: [...],\n\n    associations: [\n        { type: 'hasOne', model: 'Address', primaryKey: 'unique_id', foreignKey: 'addr_id' }\n    ]\n});\n</code></pre>\n\n<p>Here we replaced the default primary key (defaults to 'id') and foreign key (calculated as 'address_id')\nwith our own settings. Usually this will not be needed.</p>\n","!type":"fn(config?: Ext_data_association_HasOne_cfg)","prototype":{"!proto":"Ext.data.association.Association.prototype","foreignKey":{"!type":"string","!doc":"<p>The name of the foreign key on the owner model that links it to the associated\nmodel. Defaults to the lowercased name of the associated model plus \"_id\", e.g. an association with a\nmodel called Person would set up a address_id foreign key.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Person', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['id', 'name', 'address_id'], // refers to the id of the address object\n    hasOne: 'Address'\n});\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Address', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['id', 'number', 'street', 'city', 'zip'], \n    belongsTo: 'Person'\n});\nvar Person = new Person({\n    id: 1,\n    name: 'John Smith',\n    address_id: 13\n}, 1);\nperson.getAddress(); // Will make a call to the server asking for address_id 13\n</code></pre>\n"},"getterName":{"!type":"string","!doc":"<p>The name of the getter function that will be added to the local model's prototype.\nDefaults to 'get' + the name of the foreign model, e.g. getAddress</p>\n"},"setterName":{"!type":"string","!doc":"<p>The name of the setter function that will be added to the local model's prototype.\nDefaults to 'set' + the name of the foreign model, e.g. setAddress</p>\n"},"type":{"!type":"string","!doc":"<p>The type configuration can be used when creating associations using a configuration object.\nUse 'hasOne' to create a HasOne association.</p>\n\n<pre><code>associations: [{\n    type: 'hasOne',\n    model: 'Address'\n}]\n</code></pre>\n"},"createGetter":{"!type":"fn() -> fn()","!doc":"<p>Returns a getter function to be placed on the owner model's prototype. We cache the loaded instance\nthe first time it is loaded so that subsequent calls to the getter always receive the same reference.</p>\n"},"createSetter":{"!type":"fn() -> fn()","!doc":"<p>Returns a setter function to be placed on the owner model's prototype</p>\n"},"read":{"!type":"fn(record: +Ext.data.Model, reader: +Ext.data.reader.Reader, associationData: ?) -> !this","!doc":"<p>Read associated data</p>\n"}}}},"flash":{"BinaryXhr":{"!doc":"<p>Simulates an XMLHttpRequest object's methods and properties as returned\nform the flash polyfill plugin. Used in submitting binary data in browsers that do\nnot support doing so from JavaScript.\nNOTE: By default this will look for the flash object in the ext directory. When packaging and deploying the app, copy the <tt>ext/plugins</tt> directory and its contents to your root directory. For custom deployments where just the <tt>FlashPlugin.swf</tt> file gets copied (e.g. to <tt>/resources/FlashPlugin.swf</tt>), make sure to notify the framework of the location of the plugin before making the first attempt to post binary data, e.g. in the <tt>launch</tt> method of your app do:</p>\n\n<pre><code>Ext.flashPluginPath=\"/resources/FlashPlugin.swf\";\n </code></pre>\n\n","!type":"fn(config: Ext_data_flash_BinaryXhr_cfg)","prototype":{"!proto":"Ext.Base.prototype","javascriptId":{"!type":"?","!doc":"<p>An ID representing this connection with flash.</p>\n"},"readyState":{"!type":"number","!doc":"<p>The connection's simulated readyState. Note that the only supported values are 0, 1 and 4. States 2 and 3 will never be reported.</p>\n"},"responseBytes":{"!type":"[?]","!doc":"<p>The binary bytes returned.</p>\n"},"status":{"!type":"number","!doc":"<p>Connection status code returned by flash or the server.</p>\n"},"statusText":{"!type":"string","!doc":"<p>Status text (if any) returned by flash or the server.</p>\n"},"abort":{"!type":"fn() -> !this","!doc":"<p>Abort this connection. Sets its readyState to 4.</p>\n"},"getAllResponseHeaders":{"!type":"fn() -> !this","!doc":"<p>As in XMLHttpRequest.</p>\n"},"getResponseHeader":{"!type":"fn(header: ?) -> !this","!doc":"<p>As in XMLHttpRequest.</p>\n"},"onFlashReady":{"!type":"fn() -> !this","!doc":"<p>Called by send, or once flash is loaded, to actually send the bytes.</p>\n"},"onFlashStateChange":{"!type":"fn(state: number, data: ?) -> !this","!doc":"<p>Called once flash calls back with updates about the connection</p>\n"},"onreadystatechange":{"!type":"fn() -> !this","!doc":"<p>As in XMLHttpRequest.</p>\n"},"open":{"!type":"fn(method: ?, url: ?, async: ?, user: ?, password: ?) -> !this","!doc":"<p>As in XMLHttpRequest.</p>\n"},"overrideMimeType":{"!type":"fn(mimeType: ?) -> !this","!doc":"<p>As in XMLHttpRequest.</p>\n"},"parseData":{"!type":"fn(data: ?) -> !this","!doc":"<p>Parses data returned from flash once a connection is done.</p>\n"},"send":{"!type":"fn(body: [?]) -> !this","!doc":"<p>Initiate the request.</p>\n"},"setReadyState":{"!type":"fn(state: ?) -> !this","!doc":"<p>Updates readyState and notifies listeners.</p>\n"},"setRequestHeader":{"!type":"fn(header: ?, value: ?) -> !this","!doc":"<p>As in XMLHttpRequest.</p>\n"}},"connectionIndex":{"!type":"number","!doc":"<p>Counts IDs for new connections.</p>\n"},"flashPlugin":{"!type":"?","!doc":"<p>Reference to the actual plugin, once activated.</p>\n"},"flashPluginActive":{"!type":"bool","!doc":"<p>Set to <tt>trut</tt> once the plugin registers and is active.</p>\n"},"flashPluginInjected":{"!type":"bool","!doc":"<p>Flag to avoid installing the plugin twice.</p>\n"},"liveConnections":{"!type":"?","!doc":"<p>Plcaeholder for active connections.</p>\n"},"flashPluginActivated":{"!type":"fn() -> !this","!doc":"<p>Called by the flash plugin once it's installed and open for business.</p>\n"},"injectFlashPlugin":{"!type":"fn() -> !this","!doc":"<p>Injects the flash polyfill plugin to allow posting binary data.\nThis is done in two steps: First we load the javascript loader for flash objects, then we call it to inject the flash object.</p>\n"},"onFlashStateChange":{"!type":"fn(javascriptId: number|number, state: number, data: ?) -> !this","!doc":"<p>Called by the flash plugin once the state of one of the active connections changes.</p>\n"},"registerConnection":{"!type":"fn(conn: +Ext.data.flash.BinaryXhr) -> number","!doc":"<p>Adds the BinaryXhr object to the tracked connection list and assigns it an ID</p>\n"}}},"proxy":{"Ajax":{"!doc":"<p>AjaxProxy is one of the most widely-used ways of getting data into your application. It uses AJAX requests to load\ndata from the server, usually to be placed into a <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Store</a>. Let's take a look at a typical setup.\nHere we're going to set up a Store that has an AjaxProxy. To prepare, we'll also set up a <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Model</a>:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('User', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['id', 'name', 'email']\n});\n\n//The Store contains the AjaxProxy as an inline configuration\nvar store = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    model: 'User',\n    proxy: {\n        type: 'ajax',\n        url : 'users.json'\n    }\n});\n\nstore.load();\n</code></pre>\n\n<p>Our example is going to load user data into a Store, so we start off by defining a <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Model</a> with\nthe fields that we expect the server to return. Next we set up the Store itself, along with a\n<a href=\"#!/api/Ext.data.Store-cfg-proxy\" rel=\"Ext.data.Store-cfg-proxy\" class=\"docClass\">proxy</a> configuration. This configuration was automatically turned into an\n<a href=\"#!/api/Ext.data.proxy.Ajax\" rel=\"Ext.data.proxy.Ajax\" class=\"docClass\">Ext.data.proxy.Ajax</a> instance, with the url we specified being passed into AjaxProxy's constructor.\nIt's as if we'd done this:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.data.proxy.Ajax\" rel=\"Ext.data.proxy.Ajax\" class=\"docClass\">Ext.data.proxy.Ajax</a>({\n    url: 'users.json',\n    model: 'User',\n    reader: 'json'\n});\n</code></pre>\n\n<p>A couple of extra configurations appeared here - <a href=\"#!/api/Ext.data.proxy.Ajax-cfg-model\" rel=\"Ext.data.proxy.Ajax-cfg-model\" class=\"docClass\">model</a> and <a href=\"#!/api/Ext.data.proxy.Ajax-cfg-reader\" rel=\"Ext.data.proxy.Ajax-cfg-reader\" class=\"docClass\">reader</a>. These are set by default when we\ncreate the proxy via the Store - the Store already knows about the Model, and Proxy's default <a href=\"#!/api/Ext.data.reader.Reader\" rel=\"Ext.data.reader.Reader\" class=\"docClass\">Reader</a> is <a href=\"#!/api/Ext.data.reader.Json\" rel=\"Ext.data.reader.Json\" class=\"docClass\">JsonReader</a>.</p>\n\n<p>Now when we call store.load(), the AjaxProxy springs into action, making a request to the url we configured\n('users.json' in this case). As we're performing a read, it sends a GET request to that url (see\n<a href=\"#!/api/Ext.data.proxy.Ajax-property-actionMethods\" rel=\"Ext.data.proxy.Ajax-property-actionMethods\" class=\"docClass\">actionMethods</a> to customize this - by default any kind of read will be sent as a GET request and any kind of write\nwill be sent as a POST request).</p>\n\n<h1>Limitations</h1>\n\n<p>AjaxProxy cannot be used to retrieve data from other domains. If your application is running on http://domainA.com it\ncannot load data from http://domainB.com because browsers have a built-in security policy that prohibits domains\ntalking to each other via AJAX.</p>\n\n<p>If you need to read data from another domain and can't set up a proxy server (some software that runs on your own\ndomain's web server and transparently forwards requests to http://domainB.com, making it look like they actually came\nfrom http://domainA.com), you can use <a href=\"#!/api/Ext.data.proxy.JsonP\" rel=\"Ext.data.proxy.JsonP\" class=\"docClass\">Ext.data.proxy.JsonP</a> and a technique known as JSON-P (JSON with\nPadding), which can help you get around the problem so long as the server on http://domainB.com is set up to support\nJSON-P responses. See <a href=\"#!/api/Ext.data.proxy.JsonP\" rel=\"Ext.data.proxy.JsonP\" class=\"docClass\">JsonPProxy</a>'s introduction docs for more details.</p>\n\n<h1>Readers and Writers</h1>\n\n<p>AjaxProxy can be configured to use any type of <a href=\"#!/api/Ext.data.reader.Reader\" rel=\"Ext.data.reader.Reader\" class=\"docClass\">Reader</a> to decode the server's response.\nIf no Reader is supplied, AjaxProxy will default to using a <a href=\"#!/api/Ext.data.reader.Json\" rel=\"Ext.data.reader.Json\" class=\"docClass\">JsonReader</a>. Reader\nconfiguration can be passed in as a simple object, which the Proxy automatically turns into a <a href=\"#!/api/Ext.data.reader.Reader\" rel=\"Ext.data.reader.Reader\" class=\"docClass\">Reader</a> instance:</p>\n\n<pre><code>var proxy = new <a href=\"#!/api/Ext.data.proxy.Ajax\" rel=\"Ext.data.proxy.Ajax\" class=\"docClass\">Ext.data.proxy.Ajax</a>({\n    model: 'User',\n    reader: {\n        type: 'xml',\n        root: 'users'\n    }\n});\n\nproxy.getReader(); //returns an <a href=\"#!/api/Ext.data.reader.Xml\" rel=\"Ext.data.reader.Xml\" class=\"docClass\">XmlReader</a> instance based on the config we supplied\n</code></pre>\n\n<h1>Url generation</h1>\n\n<p>AjaxProxy automatically inserts any sorting, filtering, paging and grouping options into the url it generates for\neach request. These are controlled with the following configuration options:</p>\n\n<ul>\n<li><a href=\"#!/api/Ext.data.proxy.Ajax-cfg-pageParam\" rel=\"Ext.data.proxy.Ajax-cfg-pageParam\" class=\"docClass\">pageParam</a> - controls how the page number is sent to the server (see also <a href=\"#!/api/Ext.data.proxy.Ajax-cfg-startParam\" rel=\"Ext.data.proxy.Ajax-cfg-startParam\" class=\"docClass\">startParam</a> and <a href=\"#!/api/Ext.data.proxy.Ajax-cfg-limitParam\" rel=\"Ext.data.proxy.Ajax-cfg-limitParam\" class=\"docClass\">limitParam</a>)</li>\n<li><a href=\"#!/api/Ext.data.proxy.Ajax-cfg-sortParam\" rel=\"Ext.data.proxy.Ajax-cfg-sortParam\" class=\"docClass\">sortParam</a> - controls how sort information is sent to the server</li>\n<li><a href=\"#!/api/Ext.data.proxy.Ajax-cfg-groupParam\" rel=\"Ext.data.proxy.Ajax-cfg-groupParam\" class=\"docClass\">groupParam</a> - controls how grouping information is sent to the server</li>\n<li><a href=\"#!/api/Ext.data.proxy.Ajax-cfg-filterParam\" rel=\"Ext.data.proxy.Ajax-cfg-filterParam\" class=\"docClass\">filterParam</a> - controls how filter information is sent to the server</li>\n</ul>\n\n\n<p>Each request sent by AjaxProxy is described by an <a href=\"#!/api/Ext.data.Operation\" rel=\"Ext.data.Operation\" class=\"docClass\">Operation</a>. To see how we can customize\nthe generated urls, let's say we're loading the Proxy with the following Operation:</p>\n\n<pre><code>var operation = new <a href=\"#!/api/Ext.data.Operation\" rel=\"Ext.data.Operation\" class=\"docClass\">Ext.data.Operation</a>({\n    action: 'read',\n    page  : 2\n});\n</code></pre>\n\n<p>Now we'll issue the request for this Operation by calling <a href=\"#!/api/Ext.data.proxy.Ajax-method-read\" rel=\"Ext.data.proxy.Ajax-method-read\" class=\"docClass\">read</a>:</p>\n\n<pre><code>var proxy = new <a href=\"#!/api/Ext.data.proxy.Ajax\" rel=\"Ext.data.proxy.Ajax\" class=\"docClass\">Ext.data.proxy.Ajax</a>({\n    url: '/users'\n});\n\nproxy.read(operation); //GET /users?page=2\n</code></pre>\n\n<p>Easy enough - the Proxy just copied the page property from the Operation. We can customize how this page data is sent\nto the server:</p>\n\n<pre><code>var proxy = new <a href=\"#!/api/Ext.data.proxy.Ajax\" rel=\"Ext.data.proxy.Ajax\" class=\"docClass\">Ext.data.proxy.Ajax</a>({\n    url: '/users',\n    pageParam: 'pageNumber'\n});\n\nproxy.read(operation); //GET /users?pageNumber=2\n</code></pre>\n\n<p>Alternatively, our Operation could have been configured to send start and limit parameters instead of page:</p>\n\n<pre><code>var operation = new <a href=\"#!/api/Ext.data.Operation\" rel=\"Ext.data.Operation\" class=\"docClass\">Ext.data.Operation</a>({\n    action: 'read',\n    start : 50,\n    limit : 25\n});\n\nvar proxy = new <a href=\"#!/api/Ext.data.proxy.Ajax\" rel=\"Ext.data.proxy.Ajax\" class=\"docClass\">Ext.data.proxy.Ajax</a>({\n    url: '/users'\n});\n\nproxy.read(operation); //GET /users?start=50&amp;limit;=25\n</code></pre>\n\n<p>Again we can customize this url:</p>\n\n<pre><code>var proxy = new <a href=\"#!/api/Ext.data.proxy.Ajax\" rel=\"Ext.data.proxy.Ajax\" class=\"docClass\">Ext.data.proxy.Ajax</a>({\n    url: '/users',\n    startParam: 'startIndex',\n    limitParam: 'limitIndex'\n});\n\nproxy.read(operation); //GET /users?startIndex=50&amp;limitIndex;=25\n</code></pre>\n\n<p>AjaxProxy will also send sort and filter information to the server. Let's take a look at how this looks with a more\nexpressive Operation object:</p>\n\n<pre><code>var operation = new <a href=\"#!/api/Ext.data.Operation\" rel=\"Ext.data.Operation\" class=\"docClass\">Ext.data.Operation</a>({\n    action: 'read',\n    sorters: [\n        new <a href=\"#!/api/Ext.util.Sorter\" rel=\"Ext.util.Sorter\" class=\"docClass\">Ext.util.Sorter</a>({\n            property : 'name',\n            direction: 'ASC'\n        }),\n        new <a href=\"#!/api/Ext.util.Sorter\" rel=\"Ext.util.Sorter\" class=\"docClass\">Ext.util.Sorter</a>({\n            property : 'age',\n            direction: 'DESC'\n        })\n    ],\n    filters: [\n        new <a href=\"#!/api/Ext.util.Filter\" rel=\"Ext.util.Filter\" class=\"docClass\">Ext.util.Filter</a>({\n            property: 'eyeColor',\n            value   : 'brown'\n        })\n    ]\n});\n</code></pre>\n\n<p>This is the type of object that is generated internally when loading a <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Store</a> with sorters and\nfilters defined. By default the AjaxProxy will JSON encode the sorters and filters, resulting in something like this\n(note that the url is escaped before sending the request, but is left unescaped here for clarity):</p>\n\n<pre><code>var proxy = new <a href=\"#!/api/Ext.data.proxy.Ajax\" rel=\"Ext.data.proxy.Ajax\" class=\"docClass\">Ext.data.proxy.Ajax</a>({\n    url: '/users'\n});\n\nproxy.read(operation); //GET /users?sort=[{\"property\":\"name\",\"direction\":\"ASC\"},{\"property\":\"age\",\"direction\":\"DESC\"}]&amp;filter;=[{\"property\":\"eyeColor\",\"value\":\"brown\"}]\n</code></pre>\n\n<p>We can again customize how this is created by supplying a few configuration options. Let's say our server is set up\nto receive sorting information is a format like \"sortBy=name#ASC,age#DESC\". We can configure AjaxProxy to provide\nthat format like this:</p>\n\n<pre><code> var proxy = new <a href=\"#!/api/Ext.data.proxy.Ajax\" rel=\"Ext.data.proxy.Ajax\" class=\"docClass\">Ext.data.proxy.Ajax</a>({\n     url: '/users',\n     sortParam: 'sortBy',\n     filterParam: 'filterBy',\n\n     //our custom implementation of sorter encoding - turns our sorters into \"name#ASC,age#DESC\"\n     encodeSorters: function(sorters) {\n         var length   = sorters.length,\n             sortStrs = [],\n             sorter, i;\n\n         for (i = 0; i &lt; length; i++) {\n             sorter = sorters[i];\n\n             sortStrs[i] = sorter.property + '#' + sorter.direction\n         }\n\n         return sortStrs.join(\",\");\n     }\n });\n\n proxy.read(operation); //GET /users?sortBy=name#ASC,age#DESC&amp;filterBy;=[{\"property\":\"eyeColor\",\"value\":\"brown\"}]\n</code></pre>\n\n<p>We can also provide a custom <a href=\"#!/api/Ext.data.proxy.Ajax-method-encodeFilters\" rel=\"Ext.data.proxy.Ajax-method-encodeFilters\" class=\"docClass\">encodeFilters</a> function to encode our filters.</p>\n","!type":"fn(config?: Ext_data_proxy_Ajax_cfg)","prototype":{"!proto":"Ext.data.proxy.Server.prototype","binary":{"!type":"bool","!doc":"<p>True to request binary data from the server.  This feature requires\nthe use of a binary reader such as AMF Reader</p>\n"},"headers":{"!type":"?","!doc":"<p>Any headers to add to the Ajax request. Defaults to undefined.</p>\n"},"actionMethods":{"!type":"?","!doc":"<p>Mapping of action name to HTTP request method. In the basic AjaxProxy these are set to 'GET' for 'read' actions\nand 'POST' for 'create', 'update' and 'destroy' actions. The <a href=\"#!/api/Ext.data.proxy.Rest\" rel=\"Ext.data.proxy.Rest\" class=\"docClass\">Ext.data.proxy.Rest</a> maps these to the\ncorrect RESTful methods.</p>\n"},"createRequestCallback":{"!type":"fn(request: +Ext.data.Request, operation: +Ext.data.Operation, callback: fn(), scope: ?) -> fn()","!doc":"<p>TODO: This is currently identical to the JsonPProxy version except for the return function's signature. There is a lot\nof code duplication inside the returned function so we need to find a way to DRY this up.</p>\n"},"getMethod":{"!type":"fn(request: +Ext.data.Request) -> string","!doc":"<p>Returns the HTTP method name for a given request. By default this returns based on a lookup on\n<a href=\"#!/api/Ext.data.proxy.Ajax-property-actionMethods\" rel=\"Ext.data.proxy.Ajax-property-actionMethods\" class=\"docClass\">actionMethods</a>.</p>\n"}}},"Client":{"!doc":"<p>Base class for any client-side storage. Used as a superclass for <a href=\"#!/api/Ext.data.proxy.Memory\" rel=\"Ext.data.proxy.Memory\" class=\"docClass\">Memory</a> and\n<a href=\"#!/api/Ext.data.proxy.WebStorage\" rel=\"Ext.data.proxy.WebStorage\" class=\"docClass\">Web Storage</a> proxies. Do not use directly, use one of the subclasses instead.</p>\n","!type":"fn(config?: Ext_data_proxy_Client_cfg)","prototype":{"!proto":"Ext.data.proxy.Proxy.prototype","isSynchronous":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify that requests made on this proxy are\nperformed synchronously</p>\n"},"clear":{"!type":"fn() -> !this","!doc":"<p>Abstract function that must be implemented by each ClientProxy subclass. This should purge all record data\nfrom the client side storage, as well as removing any supporting data (such as lists of record IDs)</p>\n"}}},"Direct":{"!doc":"<p>This class is used to send requests to the server using <a href=\"#!/api/Ext.direct.Manager\" rel=\"Ext.direct.Manager\" class=\"docClass\">Ext.Direct</a>. When a\nrequest is made, the transport mechanism is handed off to the appropriate\n<a href=\"#!/api/Ext.direct.RemotingProvider\" rel=\"Ext.direct.RemotingProvider\" class=\"docClass\">Provider</a> to complete the call.</p>\n\n<h1>Specifying the function</h1>\n\n<p>This proxy expects a Direct remoting method to be passed in order to be able to complete requests.\nThis can be done by specifying the <a href=\"#!/api/Ext.data.proxy.Direct-cfg-directFn\" rel=\"Ext.data.proxy.Direct-cfg-directFn\" class=\"docClass\">directFn</a> configuration. This will use the same direct\nmethod for all requests. Alternatively, you can provide an <a href=\"#!/api/Ext.data.proxy.Direct-cfg-api\" rel=\"Ext.data.proxy.Direct-cfg-api\" class=\"docClass\">api</a> configuration. This\nallows you to specify a different remoting method for each CRUD action.</p>\n\n<h1>Parameters</h1>\n\n<p>This proxy provides options to help configure which parameters will be sent to the server.\nBy specifying the <a href=\"#!/api/Ext.data.proxy.Direct-cfg-paramsAsHash\" rel=\"Ext.data.proxy.Direct-cfg-paramsAsHash\" class=\"docClass\">paramsAsHash</a> option, it will send an object literal containing each\nof the passed parameters. The <a href=\"#!/api/Ext.data.proxy.Direct-cfg-paramOrder\" rel=\"Ext.data.proxy.Direct-cfg-paramOrder\" class=\"docClass\">paramOrder</a> option can be used to specify the order in which\nthe remoting method parameters are passed.</p>\n\n<h1>Example Usage</h1>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('User', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['firstName', 'lastName'],\n    proxy: {\n        type: 'direct',\n        directFn: MyApp.getUsers,\n        paramOrder: 'id' // Tells the proxy to pass the id as the first parameter to the remoting method.\n    }\n});\nUser.load(1);\n</code></pre>\n","!type":"fn(config: Ext_data_proxy_Direct_cfg)","prototype":{"!proto":"Ext.data.proxy.Server.prototype","api":{"!type":"?","!doc":"<p>The same as <a href=\"#!/api/Ext.data.proxy.Server-cfg-api\" rel=\"Ext.data.proxy.Server-cfg-api\" class=\"docClass\">Ext.data.proxy.Server.api</a>, however instead of providing urls, you should provide a direct\nfunction call. See <a href=\"#!/api/Ext.data.proxy.Direct-cfg-directFn\" rel=\"Ext.data.proxy.Direct-cfg-directFn\" class=\"docClass\">directFn</a>.</p>\n"},"directFn":{"!type":"string|fn()","!doc":"<p>Function to call when executing a request. directFn is a simple alternative to defining the api configuration-parameter\nfor Store's which will not implement a full CRUD api. The directFn may also be a string reference to the fully qualified\nname of the function, for example: 'MyApp.company.GetProfile'. This can be useful when using dynamic loading. The string\nwill be looked up when the proxy is created.</p>\n"},"extraParams":{"!type":"?","!doc":"<p>Extra parameters that will be included on every read request. Individual requests with params\nof the same name will override these params when they are in conflict.</p>\n"},"paramOrder":{"!type":"string|[string]","!doc":"<p>Defaults to undefined. A list of params to be executed server side.  Specify the params in the order in\nwhich they must be executed on the server-side as either (1) an Array of String values, or (2) a String\nof params delimited by either whitespace, comma, or pipe. For example, any of the following would be\nacceptable:</p>\n\n<pre><code>paramOrder: ['param1','param2','param3']\nparamOrder: 'param1 param2 param3'\nparamOrder: 'param1,param2,param3'\nparamOrder: 'param1|param2|param'\n</code></pre>\n"},"paramsAsHash":{"!type":"bool","!doc":"<p>Send parameters as a collection of named arguments.\nProviding a <a href=\"#!/api/Ext.data.proxy.Direct-cfg-paramOrder\" rel=\"Ext.data.proxy.Direct-cfg-paramOrder\" class=\"docClass\">paramOrder</a> nullifies this configuration.</p>\n"},"applyEncoding":{"!type":"?","!doc":"<p>Inherit docs. We don't apply any encoding here because\nall of the direct requests go out as jsonData</p>\n"},"paramOrderRe":{"!type":"+RegExp","!doc":"<p>private</p>\n"},"buildUrl":{"!type":"fn() -> string","!doc":"<p>inherit docs</p>\n"},"createRequestCallback":{"!type":"fn(request: ?, operation: ?, callback: ?, scope: ?) -> !this"},"doRequest":{"!type":"fn(operation: ?, callback: ?, scope: ?) -> !this","!doc":"<p>In ServerProxy subclasses, the <a href=\"#!/api/Ext.data.proxy.Direct-method-create\" rel=\"Ext.data.proxy.Direct-method-create\" class=\"docClass\">create</a>, <a href=\"#!/api/Ext.data.proxy.Direct-method-read\" rel=\"Ext.data.proxy.Direct-method-read\" class=\"docClass\">read</a>, <a href=\"#!/api/Ext.data.proxy.Direct-method-update\" rel=\"Ext.data.proxy.Direct-method-update\" class=\"docClass\">update</a> and <a href=\"#!/api/Ext.data.proxy.Direct-method-destroy\" rel=\"Ext.data.proxy.Direct-method-destroy\" class=\"docClass\">destroy</a> methods all\npass through to doRequest. Each ServerProxy subclass must implement the doRequest method - see <a href=\"#!/api/Ext.data.proxy.JsonP\" rel=\"Ext.data.proxy.JsonP\" class=\"docClass\">Ext.data.proxy.JsonP</a> and <a href=\"#!/api/Ext.data.proxy.Ajax\" rel=\"Ext.data.proxy.Ajax\" class=\"docClass\">Ext.data.proxy.Ajax</a> for examples. This method carries the same signature as\neach of the methods that delegate to it.</p>\n"},"extractResponseData":{"!type":"fn(response: ?) -> ?","!doc":"<p>inherit docs</p>\n"},"resolveMethods":{"!type":"fn() -> !this"},"setException":{"!type":"fn(operation: +Ext.data.Operation, response: ?) -> !this","!doc":"<p>inherit docs</p>\n"}}},"JsonP":{"!doc":"<p>The JsonP proxy is useful when you need to load data from a domain other than the one your application is running on. If\nyour application is running on http://domainA.com it cannot use <a href=\"#!/api/Ext.data.proxy.Ajax\" rel=\"Ext.data.proxy.Ajax\" class=\"docClass\">Ajax</a> to load its data\nfrom http://domainB.com because cross-domain ajax requests are prohibited by the browser.</p>\n\n<p>We can get around this using a JsonP proxy. JsonP proxy injects a <code>&lt;script&gt;</code> tag into the DOM whenever an AJAX request\nwould usually be made. Let's say we want to load data from http://domainB.com/users - the script tag that would be\ninjected might look like this:</p>\n\n<pre><code>&lt;script src=\"http://domainB.com/users?callback=someCallback\"&gt;&lt;/script&gt;\n</code></pre>\n\n<p>When we inject the tag above, the browser makes a request to that url and includes the response as if it was any\nother type of JavaScript include. By passing a callback in the url above, we're telling domainB's server that we want\nto be notified when the result comes in and that it should call our callback function with the data it sends back. So\nlong as the server formats the response to look like this, everything will work:</p>\n\n<pre><code>someCallback({\n    users: [\n        {\n            id: 1,\n            name: \"Ed Spencer\",\n            email: \"ed@sencha.com\"\n        }\n    ]\n});\n</code></pre>\n\n<p>As soon as the script finishes loading, the 'someCallback' function that we passed in the url is called with the JSON\nobject that the server returned.</p>\n\n<p>JsonP proxy takes care of all of this automatically. It formats the url you pass, adding the callback parameter\nautomatically. It even creates a temporary callback function, waits for it to be called and then puts the data into\nthe Proxy making it look just like you loaded it through a normal <a href=\"#!/api/Ext.data.proxy.Ajax\" rel=\"Ext.data.proxy.Ajax\" class=\"docClass\">AjaxProxy</a>. Here's how\nwe might set that up:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('User', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['id', 'name', 'email']\n});\n\nvar store = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    model: 'User',\n    proxy: {\n        type: 'jsonp',\n        url : 'http://domainB.com/users'\n    }\n});\n\nstore.load();\n</code></pre>\n\n<p>That's all we need to do - JsonP proxy takes care of the rest. In this case the Proxy will have injected a script tag\nlike this:</p>\n\n<pre><code>&lt;script src=\"http://domainB.com/users?callback=callback1\"&gt;&lt;/script&gt;\n</code></pre>\n\n<h1>Customization</h1>\n\n<p>This script tag can be customized using the <a href=\"#!/api/Ext.data.proxy.JsonP-cfg-callbackKey\" rel=\"Ext.data.proxy.JsonP-cfg-callbackKey\" class=\"docClass\">callbackKey</a> configuration. For example:</p>\n\n<pre><code>var store = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    model: 'User',\n    proxy: {\n        type: 'jsonp',\n        url : 'http://domainB.com/users',\n        callbackKey: 'theCallbackFunction'\n    }\n});\n\nstore.load();\n</code></pre>\n\n<p>Would inject a script tag like this:</p>\n\n<pre><code>&lt;script src=\"http://domainB.com/users?theCallbackFunction=callback1\"&gt;&lt;/script&gt;\n</code></pre>\n\n<h1>Implementing on the server side</h1>\n\n<p>The remote server side needs to be configured to return data in this format. Here are suggestions for how you might\nachieve this using Java, PHP and ASP.net:</p>\n\n<p>Java:</p>\n\n<pre><code>boolean jsonP = false;\nString cb = request.getParameter(\"callback\");\nif (cb != null) {\n    jsonP = true;\n    response.setContentType(\"text/javascript\");\n} else {\n    response.setContentType(\"application/x-json\");\n}\nWriter out = response.getWriter();\nif (jsonP) {\n    out.write(cb + \"(\");\n}\nout.print(dataBlock.toJsonString());\nif (jsonP) {\n    out.write(\");\");\n}\n</code></pre>\n\n<p>PHP:</p>\n\n<pre><code>$callback = $_REQUEST['callback'];\n\n// Create the output object.\n$output = array('a' =&gt; 'Apple', 'b' =&gt; 'Banana');\n\n//start output\nif ($callback) {\n    header('Content-Type: text/javascript');\n    echo $callback . '(' . json_encode($output) . ');';\n} else {\n    header('Content-Type: application/x-json');\n    echo json_encode($output);\n}\n</code></pre>\n\n<p>ASP.net:</p>\n\n<pre><code>String jsonString = \"{success: true}\";\nString cb = Request.Params.Get(\"callback\");\nString responseString = \"\";\nif (!String.IsNullOrEmpty(cb)) {\n    responseString = cb + \"(\" + jsonString + \")\";\n} else {\n    responseString = jsonString;\n}\nResponse.Write(responseString);\n</code></pre>\n","!type":"fn()","prototype":{"!proto":"Ext.data.proxy.Server.prototype","autoAppendParams":{"!type":"bool","!doc":"<p>True to automatically append the request's params to the generated url. Defaults to true</p>\n"},"callbackKey":{"!type":"string","!doc":"<p>See <a href=\"#!/api/Ext.data.JsonP-property-callbackKey\" rel=\"Ext.data.JsonP-property-callbackKey\" class=\"docClass\">Ext.data.JsonP.callbackKey</a>.</p>\n"},"defaultWriterType":{"!type":"string","!doc":"<p>The default registered writer type. Defaults to 'json'.</p>\n"},"recordParam":{"!type":"string","!doc":"<p>The HTTP parameter name to use when passing records to the server and the <a href=\"#!/api/Ext.data.proxy.JsonP-cfg-writer\" rel=\"Ext.data.proxy.JsonP-cfg-writer\" class=\"docClass\">Json writer</a> is not configured\nto <a href=\"#!/api/Ext.data.writer.Json-cfg-encode\" rel=\"Ext.data.writer.Json-cfg-encode\" class=\"docClass\">encode</a> records into a parameter.</p>\n\n<p>The <a href=\"#!/api/Ext.data.proxy.JsonP-method-encodeRecords\" rel=\"Ext.data.proxy.JsonP-method-encodeRecords\" class=\"docClass\">encodeRecords</a> method is used to encode the records to create this parameter's value.</p>\n"},"abort":{"!type":"fn() -> !this","!doc":"<p>Aborts the current server request if one is currently running</p>\n"},"buildUrl":{"!type":"fn(request: +Ext.data.Request) -> string","!doc":"<p>Generates a url based on a given <a href=\"#!/api/Ext.data.Request\" rel=\"Ext.data.Request\" class=\"docClass\">Ext.data.Request</a> object. Adds the params and callback function name to the url</p>\n"},"createRequestCallback":{"!type":"fn(request: +Ext.data.Request, operation: +Ext.data.Operation, callback: fn(), scope: ?) -> fn()","!doc":"<p>Creates and returns the function that is called when the request has completed. The returned function\nshould accept a Response object, which contains the response to be read by the configured Reader.\nThe third argument is the callback that should be called after the request has been completed and the Reader has decoded\nthe response. This callback will typically be the callback passed by a store, e.g. in proxy.read(operation, theCallback, scope)\ntheCallback refers to the callback argument received by this function.\nSee <a href=\"#!/api/Ext.data.proxy.JsonP-method-doRequest\" rel=\"Ext.data.proxy.JsonP-method-doRequest\" class=\"docClass\">doRequest</a> for details.</p>\n"},"doRequest":{"!type":"fn(operation: +Ext.data.Operation, callback: fn(), scope: ?) -> !this","!doc":"<p>Performs the read request to the remote domain. JsonP proxy does not actually create an Ajax request,\ninstead we write out a <code>&lt;script&gt;</code> tag based on the configuration of the internal <a href=\"#!/api/Ext.data.Request\" rel=\"Ext.data.Request\" class=\"docClass\">Ext.data.Request</a> object</p>\n"},"encodeRecords":{"!type":"fn(records: [+Ext.data.Model]) -> [?]","!doc":"<p>Encodes an array of records into a value suitable to be added to the request <code>params</code> as the <a href=\"#!/api/Ext.data.proxy.JsonP-cfg-recordParam\" rel=\"Ext.data.proxy.JsonP-cfg-recordParam\" class=\"docClass\">recordParam</a> parameter.\nThis is broken out into its own function so that it can be easily overridden.</p>\n\n<p>The default implementation</p>\n"},"setException":{"!type":"fn(operation: +Ext.data.Operation, response: ?) -> !this","!doc":"<p>inherit docs</p>\n"},"exception":{"!type":"fn(this: +Ext.data.proxy.Proxy, request: +Ext.data.Request, operation: +Ext.data.Operation, eOpts: ?)","!doc":"<p>Fires when the server returns an exception. This event may also be listened\nto in the event that a request has timed out or has been aborted.</p>\n"}}},"LocalStorage":{"!doc":"<p>The LocalStorageProxy uses the new HTML5 localStorage API to save <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Model</a> data locally on the\nclient browser. HTML5 localStorage is a key-value store (e.g. cannot save complex objects like JSON), so\nLocalStorageProxy automatically serializes and deserializes data when saving and retrieving it.</p>\n\n<p>localStorage is extremely useful for saving user-specific information without needing to build server-side\ninfrastructure to support it. Let's imagine we're writing a Twitter search application and want to save the user's\nsearches locally so they can easily perform a saved search again later. We'd start by creating a Search model:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Search', {\n    fields: ['id', 'query'],\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    proxy: {\n        type: 'localstorage',\n        id  : 'twitter-Searches'\n    }\n});\n</code></pre>\n\n<p>Our Search model contains just two fields - id and query - plus a Proxy definition. The only configuration we need to\npass to the LocalStorage proxy is an <a href=\"#!/api/Ext.data.proxy.LocalStorage-cfg-id\" rel=\"Ext.data.proxy.LocalStorage-cfg-id\" class=\"docClass\">id</a>. This is important as it separates the Model data in this Proxy from\nall others. The localStorage API puts all data into a single shared namespace, so by setting an id we enable\nLocalStorageProxy to manage the saved Search data.</p>\n\n<p>Saving our data into localStorage is easy and would usually be done with a <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Store</a>:</p>\n\n<pre><code>//our Store automatically picks up the LocalStorageProxy defined on the Search model\nvar store = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    model: \"Search\"\n});\n\n//loads any existing Search data from localStorage\nstore.load();\n\n//now add some Searches\nstore.add({query: 'Sencha Touch'});\nstore.add({query: 'Ext JS'});\n\n//finally, save our Search data to localStorage\nstore.sync();\n</code></pre>\n\n<p>The LocalStorageProxy automatically gives our new Searches an id when we call store.sync(). It encodes the Model data\nand places it into localStorage. We can also save directly to localStorage, bypassing the Store altogether:</p>\n\n<pre><code>var search = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('Search', {query: 'Sencha Animator'});\n\n//uses the configured LocalStorageProxy to save the new Search to localStorage\nsearch.save();\n</code></pre>\n\n<h1>Limitations</h1>\n\n<p>If this proxy is used in a browser where local storage is not supported, the constructor will throw an error. A local\nstorage proxy requires a unique ID which is used as a key in which all record data are stored in the local storage\nobject.</p>\n\n<p>It's important to supply this unique ID as it cannot be reliably determined otherwise. If no id is provided but the\nattached store has a storeId, the storeId will be used. If neither option is presented the proxy will throw an error.</p>\n","!type":"fn(config?: Ext_data_proxy_LocalStorage_cfg)","prototype":{"!proto":"Ext.data.proxy.WebStorage.prototype","getStorageObject":{"!type":"fn() -> ?","!doc":"<p>inherit docs</p>\n"}}},"Memory":{"!doc":"<p>In-memory proxy. This proxy simply uses a local variable for data storage/retrieval, so its contents are lost on\nevery page refresh.</p>\n\n<p>Usually this Proxy isn't used directly, serving instead as a helper to a <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Store</a> where a reader\nis required to load data. For example, say we have a Store for a User model and have some inline data we want to\nload, but this data isn't in quite the right format: we can use a MemoryProxy with a JsonReader to read it into our\nStore:</p>\n\n<pre><code>//this is the model we will be using in the store\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('User', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: [\n        {name: 'id',    type: 'int'},\n        {name: 'name',  type: 'string'},\n        {name: 'phone', type: 'string', mapping: 'phoneNumber'}\n    ]\n});\n\n//this data does not line up to our model fields - the phone field is called phoneNumber\nvar data = {\n    users: [\n        {\n            id: 1,\n            name: 'Ed Spencer',\n            phoneNumber: '555 1234'\n        },\n        {\n            id: 2,\n            name: 'Abe Elias',\n            phoneNumber: '666 1234'\n        }\n    ]\n};\n\n//note how we set the 'root' in the reader to match the data structure above\nvar store = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    autoLoad: true,\n    model: 'User',\n    data : data,\n    proxy: {\n        type: 'memory',\n        reader: {\n            type: 'json',\n            root: 'users'\n        }\n    }\n});\n</code></pre>\n","!type":"fn(config?: Ext_data_proxy_Memory_cfg)","prototype":{"!proto":"Ext.data.proxy.Client.prototype","data":{"!type":"?","!doc":"<p>Optional data to pass to configured Reader.</p>\n"},"enablePaging":{"!type":"bool","!doc":"<p>Configure as <code>true</code> to enable this MemoryProxy to honour a read operation's <code>start</code> and <code>limit</code> options.</p>\n\n<p>When <code>true</code>, read operations will be able to read <em>pages</em> of records from the data object.</p>\n"},"clear":{"!type":"fn() -> !this","!doc":"<p>Abstract function that must be implemented by each ClientProxy subclass. This should purge all record data\nfrom the client side storage, as well as removing any supporting data (such as lists of record IDs)</p>\n"},"create":{"!type":"fn(operation: +Ext.data.Operation, callback: fn(), scope: ?) -> !this","!doc":"<p>Currently this is a hard-coded method that simply commits any records and sets the operation to successful,\nthen calls the callback function, if provided. It is essentially mocking a server call in memory, but since\nthere is no real back end in this case there's not much else to do. This method can be easily overridden to\nimplement more complex logic if needed.</p>\n"},"destroy":{"!type":"fn(operation: +Ext.data.Operation, callback: fn(), scope: ?) -> !this","!doc":"<p>Currently this is a hard-coded method that simply commits any records and sets the operation to successful,\nthen calls the callback function, if provided. It is essentially mocking a server call in memory, but since\nthere is no real back end in this case there's not much else to do. This method can be easily overridden to\nimplement more complex logic if needed.</p>\n"},"read":{"!type":"fn(operation: +Ext.data.Operation, callback: fn(), scope: ?) -> !this","!doc":"<p>Reads data from the configured <a href=\"#!/api/Ext.data.proxy.Memory-cfg-data\" rel=\"Ext.data.proxy.Memory-cfg-data\" class=\"docClass\">data</a> object. Uses the Proxy's <a href=\"#!/api/Ext.data.proxy.Memory-cfg-reader\" rel=\"Ext.data.proxy.Memory-cfg-reader\" class=\"docClass\">reader</a>, if present.</p>\n"},"update":{"!type":"fn(operation: +Ext.data.Operation, callback: fn(), scope: ?) -> !this","!doc":"<p>Currently this is a hard-coded method that simply commits any records and sets the operation to successful,\nthen calls the callback function, if provided. It is essentially mocking a server call in memory, but since\nthere is no real back end in this case there's not much else to do. This method can be easily overridden to\nimplement more complex logic if needed.</p>\n"},"updateOperation":{"!type":"fn(operation: ?, callback: ?, scope: ?) -> !this","!doc":"<p>Fake processing function to commit the records, set the current operation\nto successful and call the callback if provided. This function is shared\nby the create, update and destroy methods to perform the bare minimum\nprocessing required for the proxy to register a result from the action.</p>\n"}}},"Proxy":{"!doc":"<p>Proxies are used by <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Stores</a> to handle the loading and saving of <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Model</a>\ndata. Usually developers will not need to create or interact with proxies directly.</p>\n\n<h1>Types of Proxy</h1>\n\n<p>There are two main types of Proxy - <a href=\"#!/api/Ext.data.proxy.Client\" rel=\"Ext.data.proxy.Client\" class=\"docClass\">Client</a> and <a href=\"#!/api/Ext.data.proxy.Server\" rel=\"Ext.data.proxy.Server\" class=\"docClass\">Server</a>.\nThe Client proxies save their data locally and include the following subclasses:</p>\n\n<ul>\n<li><a href=\"#!/api/Ext.data.proxy.LocalStorage\" rel=\"Ext.data.proxy.LocalStorage\" class=\"docClass\">LocalStorageProxy</a> - saves its data to localStorage if the browser supports it</li>\n<li><a href=\"#!/api/Ext.data.proxy.SessionStorage\" rel=\"Ext.data.proxy.SessionStorage\" class=\"docClass\">SessionStorageProxy</a> - saves its data to sessionStorage if the browsers supports it</li>\n<li><a href=\"#!/api/Ext.data.proxy.Memory\" rel=\"Ext.data.proxy.Memory\" class=\"docClass\">MemoryProxy</a> - holds data in memory only, any data is lost when the page is refreshed</li>\n</ul>\n\n\n<p>The Server proxies save their data by sending requests to some remote server. These proxies include:</p>\n\n<ul>\n<li><a href=\"#!/api/Ext.data.proxy.Ajax\" rel=\"Ext.data.proxy.Ajax\" class=\"docClass\">Ajax</a> - sends requests to a server on the same domain</li>\n<li><a href=\"#!/api/Ext.data.proxy.JsonP\" rel=\"Ext.data.proxy.JsonP\" class=\"docClass\">JsonP</a> - uses JSON-P to send requests to a server on a different domain</li>\n<li><a href=\"#!/api/Ext.data.proxy.Rest\" rel=\"Ext.data.proxy.Rest\" class=\"docClass\">Rest</a> - uses RESTful HTTP methods (GET/PUT/POST/DELETE) to communicate with server</li>\n<li><a href=\"#!/api/Ext.data.proxy.Direct\" rel=\"Ext.data.proxy.Direct\" class=\"docClass\">Direct</a> - uses <a href=\"#!/api/Ext.direct.Manager\" rel=\"Ext.direct.Manager\" class=\"docClass\">Ext.direct.Manager</a> to send requests</li>\n</ul>\n\n\n<p>Proxies operate on the principle that all operations performed are either Create, Read, Update or Delete. These four\noperations are mapped to the methods <a href=\"#!/api/Ext.data.proxy.Proxy-method-create\" rel=\"Ext.data.proxy.Proxy-method-create\" class=\"docClass\">create</a>, <a href=\"#!/api/Ext.data.proxy.Proxy-method-read\" rel=\"Ext.data.proxy.Proxy-method-read\" class=\"docClass\">read</a>, <a href=\"#!/api/Ext.data.proxy.Proxy-method-update\" rel=\"Ext.data.proxy.Proxy-method-update\" class=\"docClass\">update</a> and <a href=\"#!/api/Ext.data.proxy.Proxy-method-destroy\" rel=\"Ext.data.proxy.Proxy-method-destroy\" class=\"docClass\">destroy</a>\nrespectively. Each Proxy subclass implements these functions.</p>\n\n<p>The CRUD methods each expect an <a href=\"#!/api/Ext.data.Operation\" rel=\"Ext.data.Operation\" class=\"docClass\">Operation</a> object as the sole argument. The Operation\nencapsulates information about the action the Store wishes to perform, the <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">model</a> instances\nthat are to be modified, etc. See the <a href=\"#!/api/Ext.data.Operation\" rel=\"Ext.data.Operation\" class=\"docClass\">Operation</a> documentation for more details. Each CRUD\nmethod also accepts a callback function to be called asynchronously on completion.</p>\n\n<p>Proxies also support batching of Operations via a <a href=\"#!/api/Ext.data.Batch\" rel=\"Ext.data.Batch\" class=\"docClass\">batch</a> object, invoked by the <a href=\"#!/api/Ext.data.proxy.Proxy-method-batch\" rel=\"Ext.data.proxy.Proxy-method-batch\" class=\"docClass\">batch</a>\nmethod.</p>\n","!type":"fn(config?: Ext_data_proxy_Proxy_cfg)","prototype":{"!proto":"Ext.Base.prototype","batchActions":{"!type":"bool","!doc":"<p>True to batch actions of a particular type when synchronizing the store. Defaults to true.</p>\n"},"batchOrder":{"!type":"string","!doc":"<p>Comma-separated ordering 'create', 'update' and 'destroy' actions when batching. Override this to set a different\norder for the batched CRUD actions to be executed in. Defaults to 'create,update,destroy'.</p>\n"},"defaultReaderType":{"!type":"string","!doc":"<p>The default registered reader type. Defaults to 'json'.</p>\n"},"defaultWriterType":{"!type":"string","!doc":"<p>The default registered writer type. Defaults to 'json'.</p>\n"},"model":{"!type":"string|+Ext.data.Model","!doc":"<p>The name of the Model to tie to this Proxy. Can be either the string name of the Model, or a reference to the\nModel constructor. Required.</p>\n"},"reader":{"!type":"?|string|+Ext.data.reader.Reader","!doc":"<p>The <a href=\"#!/api/Ext.data.reader.Reader\" rel=\"Ext.data.reader.Reader\" class=\"docClass\">Ext.data.reader.Reader</a> to use to decode the server's response or data read from client. This can either be a\nReader instance, a config object or just a valid Reader type name (e.g. 'json', 'xml').</p>\n"},"writer":{"!type":"?|string|+Ext.data.writer.Writer","!doc":"<p>The <a href=\"#!/api/Ext.data.writer.Writer\" rel=\"Ext.data.writer.Writer\" class=\"docClass\">Ext.data.writer.Writer</a> to use to encode any request sent to the server or saved to client. This can either be\na Writer instance, a config object or just a valid Writer type name (e.g. 'json', 'xml').</p>\n"},"isProxy":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated Proxy, or subclass thereof.</p>\n"},"isSynchronous":{"!type":"bool","!doc":"<p>Identifies the proxy as (a)synchronous.</p>\n"},"batch":{"!type":"fn(options: ?) -> +Ext.data.Batch","!doc":"<p>Performs a batch of <a href=\"#!/api/Ext.data.Operation\" rel=\"Ext.data.Operation\" class=\"docClass\">Operations</a>, in the order specified by <a href=\"#!/api/Ext.data.proxy.Proxy-cfg-batchOrder\" rel=\"Ext.data.proxy.Proxy-cfg-batchOrder\" class=\"docClass\">batchOrder</a>. Used\ninternally by <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>'s <a href=\"#!/api/Ext.data.Store-method-sync\" rel=\"Ext.data.Store-method-sync\" class=\"docClass\">sync</a> method. Example usage:</p>\n\n<pre><code>myProxy.batch({\n    create : [myModel1, myModel2],\n    update : [myModel3],\n    destroy: [myModel4, myModel5]\n});\n</code></pre>\n\n<p>Where the myModel* above are <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Model</a> instances - in this case 1 and 2 are new instances and\nhave not been saved before, 3 has been saved previously but needs to be updated, and 4 and 5 have already been\nsaved but should now be destroyed.</p>\n\n<p>Note that the previous version of this method took 2 arguments (operations and listeners). While this is still\nsupported for now, the current signature is now a single <code>options</code> argument that can contain both operations and\nlisteners, in addition to other options. The multi-argument signature will likely be deprecated in a future release.</p>\n"},"clone":{"!type":"fn() -> !this"},"create":{"!type":"fn(operation: +Ext.data.Operation, callback: fn(), scope: ?) -> !this","!doc":"<p>Performs the given create operation.</p>\n"},"destroy":{"!type":"fn(operation: +Ext.data.Operation, callback: fn(), scope: ?) -> !this","!doc":"<p>Performs the given destroy operation.</p>\n"},"getModel":{"!type":"fn() -> +Ext.data.Model","!doc":"<p>Returns the model attached to this Proxy</p>\n"},"getReader":{"!type":"fn() -> +Ext.data.reader.Reader","!doc":"<p>Returns the reader currently attached to this proxy instance</p>\n"},"getWriter":{"!type":"fn() -> +Ext.data.writer.Writer","!doc":"<p>Returns the writer currently attached to this proxy instance</p>\n"},"onBatchComplete":{"!type":"fn(batchOptions: ?, batch: ?) -> !this","!doc":"<p>The internal callback that the proxy uses to call any specified user callbacks after completion of a batch</p>\n"},"onMetaChange":{"!type":"fn(meta: ?) -> !this","!doc":"<p>Called each time the reader's onMetaChange is called so that the proxy can fire the metachange event</p>\n"},"read":{"!type":"fn(operation: +Ext.data.Operation, callback: fn(), scope: ?) -> !this","!doc":"<p>Performs the given read operation.</p>\n"},"setModel":{"!type":"fn(model: string|+Ext.data.Model, setOnStore: bool) -> !this","!doc":"<p>Sets the model associated with this proxy. This will only usually be called by a Store</p>\n"},"setReader":{"!type":"fn(reader: string|?|+Ext.data.reader.Reader) -> +Ext.data.reader.Reader","!doc":"<p>Sets the Proxy's Reader by string, config object or Reader instance</p>\n"},"setWriter":{"!type":"fn(writer: string|?|+Ext.data.writer.Writer) -> +Ext.data.writer.Writer","!doc":"<p>Sets the Proxy's Writer by string, config object or Writer instance</p>\n"},"update":{"!type":"fn(operation: +Ext.data.Operation, callback: fn(), scope: ?) -> !this","!doc":"<p>Performs the given update operation.</p>\n"},"metachange":{"!type":"fn(this: +Ext.data.proxy.Proxy, meta: ?, eOpts: ?)","!doc":"<p>Fires when this proxy's reader provides new metadata. Metadata usually consists\nof new field definitions, but can include any configuration data required by an\napplication, and can be processed as needed in the event handler.\nThis event is currently only fired for JsonReaders. Note that this event is also\npropagated by <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>, which is typically where it would be handled.</p>\n"}}},"Rest":{"!doc":"<p>The Rest proxy is a specialization of the <a href=\"#!/api/Ext.data.proxy.Ajax\" rel=\"Ext.data.proxy.Ajax\" class=\"docClass\">AjaxProxy</a> which simply maps the four actions\n(create, read, update and destroy) to RESTful HTTP verbs. For example, let's set up a <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Model</a>\nwith an inline Rest proxy</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('User', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['id', 'name', 'email'],\n\n    proxy: {\n        type: 'rest',\n        url : '/users'\n    }\n});\n</code></pre>\n\n<p>Now we can create a new User instance and save it via the Rest proxy. Doing this will cause the Proxy to send a POST\nrequest to '/users':</p>\n\n<pre><code>var user = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('User', {name: 'Ed Spencer', email: 'ed@sencha.com'});\n\nuser.save(); //POST /users\n</code></pre>\n\n<p>Let's expand this a little and provide a callback for the <a href=\"#!/api/Ext.data.Model-method-save\" rel=\"Ext.data.Model-method-save\" class=\"docClass\">Ext.data.Model.save</a> call to update the Model once\nit has been created. We'll assume the creation went successfully and that the server gave this user an ID of 123:</p>\n\n<pre><code>user.save({\n    success: function(user) {\n        user.set('name', 'Khan Noonien Singh');\n\n        user.save(); //PUT /users/123\n    }\n});\n</code></pre>\n\n<p>Now that we're no longer creating a new Model instance, the request method is changed to an HTTP PUT, targeting the\nrelevant url for that user. Now let's delete this user, which will use the DELETE method:</p>\n\n<pre><code>    user.destroy(); //DELETE /users/123\n</code></pre>\n\n<p>Finally, when we perform a load of a Model or Store, Rest proxy will use the GET method:</p>\n\n<pre><code>//1. Load via Store\n\n//the Store automatically picks up the Proxy from the User model\nvar store = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    model: 'User'\n});\n\nstore.load(); //GET /users\n\n//2. Load directly from the Model\n\n//GET /users/123\n<a href=\"#!/api/Ext.ModelManager-method-getModel\" rel=\"Ext.ModelManager-method-getModel\" class=\"docClass\">Ext.ModelManager.getModel</a>('User').load(123, {\n    success: function(user) {\n        console.log(user.getId()); //outputs 123\n    }\n});\n</code></pre>\n\n<h1>Url generation</h1>\n\n<p>The Rest proxy is able to automatically generate the urls above based on two configuration options - <a href=\"#!/api/Ext.data.proxy.Rest-cfg-appendId\" rel=\"Ext.data.proxy.Rest-cfg-appendId\" class=\"docClass\">appendId</a> and\n<a href=\"#!/api/Ext.data.proxy.Rest-cfg-format\" rel=\"Ext.data.proxy.Rest-cfg-format\" class=\"docClass\">format</a>. If appendId is true (it is by default) then Rest proxy will automatically append the ID of the Model\ninstance in question to the configured url, resulting in the '/users/123' that we saw above.</p>\n\n<p>If the request is not for a specific Model instance (e.g. loading a Store), the url is not appended with an id.\nThe Rest proxy will automatically insert a '/' before the ID if one is not already present.</p>\n\n<pre><code>new <a href=\"#!/api/Ext.data.proxy.Rest\" rel=\"Ext.data.proxy.Rest\" class=\"docClass\">Ext.data.proxy.Rest</a>({\n    url: '/users',\n    appendId: true //default\n});\n\n// Collection url: /users\n// Instance url  : /users/123\n</code></pre>\n\n<p>The Rest proxy can also optionally append a format string to the end of any generated url:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.data.proxy.Rest\" rel=\"Ext.data.proxy.Rest\" class=\"docClass\">Ext.data.proxy.Rest</a>({\n    url: '/users',\n    format: 'json'\n});\n\n// Collection url: /users.json\n// Instance url  : /users/123.json\n</code></pre>\n\n<p>If further customization is needed, simply implement the <a href=\"#!/api/Ext.data.proxy.Rest-method-buildUrl\" rel=\"Ext.data.proxy.Rest-method-buildUrl\" class=\"docClass\">buildUrl</a> method and add your custom generated url\nonto the <a href=\"#!/api/Ext.data.Request\" rel=\"Ext.data.Request\" class=\"docClass\">Request</a> object that is passed to buildUrl. See <a href=\"source/Rest.html#Ext-data-proxy-Rest-method-buildUrl\">Rest proxy's implementation</a> for\nan example of how to achieve this.</p>\n\n<p>Note that Rest proxy inherits from <a href=\"#!/api/Ext.data.proxy.Ajax\" rel=\"Ext.data.proxy.Ajax\" class=\"docClass\">AjaxProxy</a>, which already injects all of the sorter,\nfilter, group and paging options into the generated url. See the <a href=\"#!/api/Ext.data.proxy.Ajax\" rel=\"Ext.data.proxy.Ajax\" class=\"docClass\">AjaxProxy docs</a> for more\ndetails.</p>\n","!type":"fn(config?: Ext_data_proxy_Rest_cfg)","prototype":{"!proto":"Ext.data.proxy.Ajax.prototype","appendId":{"!type":"bool","!doc":"<p>True to automatically append the ID of a Model instance when performing a request based on that single instance.\nSee Rest proxy intro docs for more details. Defaults to true.</p>\n"},"batchActions":{"!type":"bool","!doc":"<p>True to batch actions of a particular type when synchronizing the store. Defaults to false.</p>\n"},"format":{"!type":"string","!doc":"<p>Optional data format to send to the server when making any request (e.g. 'json'). See the Rest proxy intro docs\nfor full details. Defaults to undefined.</p>\n"},"actionMethods":{"!type":"?","!doc":"<p>Mapping of action name to HTTP request method. These default to RESTful conventions for the 'create', 'read',\n'update' and 'destroy' actions (which map to 'POST', 'GET', 'PUT' and 'DELETE' respectively). This object\nshould not be changed except globally via <a href=\"#!/api/Ext-method-override\" rel=\"Ext-method-override\" class=\"docClass\">Ext.override</a> - the <a href=\"#!/api/Ext.data.proxy.Rest-method-getMethod\" rel=\"Ext.data.proxy.Rest-method-getMethod\" class=\"docClass\">getMethod</a> function\ncan be overridden instead.</p>\n"},"buildUrl":{"!type":"fn(request: ?) -> !this","!doc":"<p>Specialized version of buildUrl that incorporates the <a href=\"#!/api/Ext.data.proxy.Rest-cfg-appendId\" rel=\"Ext.data.proxy.Rest-cfg-appendId\" class=\"docClass\">appendId</a> and <a href=\"#!/api/Ext.data.proxy.Rest-cfg-format\" rel=\"Ext.data.proxy.Rest-cfg-format\" class=\"docClass\">format</a> options into the\ngenerated url. Override this to provide further customizations, but remember to call the superclass buildUrl so\nthat additional parameters like the cache buster string are appended.</p>\n"},"isValidId":{"!type":"fn(id: ?) -> !this"}}},"Server":{"!doc":"<p>ServerProxy is a superclass of <a href=\"#!/api/Ext.data.proxy.JsonP\" rel=\"Ext.data.proxy.JsonP\" class=\"docClass\">JsonPProxy</a> and <a href=\"#!/api/Ext.data.proxy.Ajax\" rel=\"Ext.data.proxy.Ajax\" class=\"docClass\">AjaxProxy</a>, and\nwould not usually be used directly.</p>\n\n<p>ServerProxy should ideally be named HttpProxy as it is a superclass for all HTTP proxies - for Ext JS 4.x it has been\ncalled ServerProxy to enable any 3.x applications that reference the HttpProxy to continue to work (HttpProxy is now\nan alias of AjaxProxy).</p>\n","!type":"fn(config?: Ext_data_proxy_Server_cfg)","prototype":{"!proto":"Ext.data.proxy.Proxy.prototype","api":{"!type":"?","!doc":"<p>Specific urls to call on CRUD action methods \"create\", \"read\", \"update\" and \"destroy\". Defaults to:</p>\n\n<pre><code>api: {\n    create  : undefined,\n    read    : undefined,\n    update  : undefined,\n    destroy : undefined\n}\n</code></pre>\n\n<p>The url is built based upon the action being executed [create|read|update|destroy] using the commensurate\n<a href=\"#!/api/Ext.data.proxy.Server-cfg-api\" rel=\"Ext.data.proxy.Server-cfg-api\" class=\"docClass\">api</a> property, or if undefined default to the configured\n<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>.<a href=\"#!/api/Ext.data.proxy.Server-cfg-url\" rel=\"Ext.data.proxy.Server-cfg-url\" class=\"docClass\">url</a>.</p>\n\n<p>For example:</p>\n\n<pre><code>api: {\n    create  : '/controller/new',\n    read    : '/controller/load',\n    update  : '/controller/update',\n    destroy : '/controller/destroy_action'\n}\n</code></pre>\n\n<p>If the specific URL for a given CRUD action is undefined, the CRUD action request will be directed to the\nconfigured <a href=\"#!/api/Ext.data.proxy.Server-cfg-url\" rel=\"Ext.data.proxy.Server-cfg-url\" class=\"docClass\">url</a>.</p>\n"},"cacheString":{"!type":"string","!doc":"<p>The name of the cache param added to the url when using noCache. Defaults to \"_dc\".</p>\n"},"directionParam":{"!type":"string","!doc":"<p>The name of the direction parameter to send in a request. <strong>This is only used when simpleSortMode is set to\ntrue.</strong></p>\n"},"extraParams":{"!type":"?","!doc":"<p>Extra parameters that will be included on every request. Individual requests with params of the same name\nwill override these params when they are in conflict.</p>\n"},"filterParam":{"!type":"string","!doc":"<p>The name of the 'filter' parameter to send in a request. Defaults to 'filter'. Set this to undefined if you don't\nwant to send a filter parameter.</p>\n"},"groupDirectionParam":{"!type":"string","!doc":"<p>The name of the direction parameter to send in a request. <strong>This is only used when simpleGroupMode is set to\ntrue.</strong></p>\n"},"groupParam":{"!type":"string","!doc":"<p>The name of the 'group' parameter to send in a request. Defaults to 'group'. Set this to undefined if you don't\nwant to send a group parameter.</p>\n"},"idParam":{"!type":"string","!doc":"<p>The name of the parameter which carries the id of the entity being operated upon.</p>\n"},"limitParam":{"!type":"string","!doc":"<p>The name of the 'limit' parameter to send in a request. Defaults to 'limit'. Set this to undefined if you don't\nwant to send a limit parameter.</p>\n"},"noCache":{"!type":"bool","!doc":"<p>Disable caching by adding a unique parameter name to the request. Set to false to allow caching. Defaults to true.</p>\n"},"pageParam":{"!type":"string","!doc":"<p>The name of the 'page' parameter to send in a request. Defaults to 'page'. Set this to undefined if you don't\nwant to send a page parameter.</p>\n"},"simpleGroupMode":{"!type":"bool","!doc":"<p>Enabling simpleGroupMode in conjunction with remoteGroup will only send one group property and a direction when a\nremote group is requested. The <a href=\"#!/api/Ext.data.proxy.Server-cfg-groupDirectionParam\" rel=\"Ext.data.proxy.Server-cfg-groupDirectionParam\" class=\"docClass\">groupDirectionParam</a> and <a href=\"#!/api/Ext.data.proxy.Server-cfg-groupParam\" rel=\"Ext.data.proxy.Server-cfg-groupParam\" class=\"docClass\">groupParam</a> will be sent with the property name and either 'ASC'\nor 'DESC'.</p>\n"},"simpleSortMode":{"!type":"bool","!doc":"<p>Enabling simpleSortMode in conjunction with remoteSort will only send one sort property and a direction when a\nremote sort is requested. The <a href=\"#!/api/Ext.data.proxy.Server-cfg-directionParam\" rel=\"Ext.data.proxy.Server-cfg-directionParam\" class=\"docClass\">directionParam</a> and <a href=\"#!/api/Ext.data.proxy.Server-cfg-sortParam\" rel=\"Ext.data.proxy.Server-cfg-sortParam\" class=\"docClass\">sortParam</a> will be sent with the property name\nand either 'ASC' or 'DESC'.</p>\n"},"sortParam":{"!type":"string","!doc":"<p>The name of the 'sort' parameter to send in a request. Defaults to 'sort'. Set this to undefined if you don't\nwant to send a sort parameter.</p>\n"},"startParam":{"!type":"string","!doc":"<p>The name of the 'start' parameter to send in a request. Defaults to 'start'. Set this to undefined if you don't\nwant to send a start parameter.</p>\n"},"timeout":{"!type":"number","!doc":"<p>The number of milliseconds to wait for a response. Defaults to 30000 milliseconds (30 seconds).</p>\n"},"url":{"!type":"string","!doc":"<p>The URL from which to request the data object.</p>\n"},"afterRequest":{"!type":"fn(request: +Ext.data.Request, success: bool) -> !this","!doc":"<p>Optional callback function which can be used to clean up after a request has been completed.</p>\n"},"applyEncoding":{"!type":"fn(value: [?]) -> ?","!doc":"<p>Encode any values being sent to the server. Can be overridden in subclasses.</p>\n"},"buildRequest":{"!type":"fn(operation: +Ext.data.Operation) -> +Ext.data.Request","!doc":"<p>Creates an <a href=\"#!/api/Ext.data.Request\" rel=\"Ext.data.Request\" class=\"docClass\">Request</a> object from <a href=\"#!/api/Ext.data.Operation\" rel=\"Ext.data.Operation\" class=\"docClass\">Operation</a>.</p>\n\n<p>This gets called from doRequest methods in subclasses of Server proxy.</p>\n"},"buildUrl":{"!type":"fn(request: +Ext.data.Request) -> string","!doc":"<p>Generates a url based on a given <a href=\"#!/api/Ext.data.Request\" rel=\"Ext.data.Request\" class=\"docClass\">Ext.data.Request</a> object. By default, ServerProxy's buildUrl will add the\ncache-buster param to the end of the url. Subclasses may need to perform additional modifications to the url.</p>\n"},"create":{"!type":"fn() -> !this","!doc":"<p>in a ServerProxy all four CRUD operations are executed in the same manner, so we delegate to doRequest in each case</p>\n"},"destroy":{"!type":"fn() -> !this","!doc":"<p>Performs the given destroy operation.</p>\n"},"doRequest":{"!type":"fn(operation: +Ext.data.Operation, callback: fn(), scope: ?) -> !this","!doc":"<p>In ServerProxy subclasses, the <a href=\"#!/api/Ext.data.proxy.Server-method-create\" rel=\"Ext.data.proxy.Server-method-create\" class=\"docClass\">create</a>, <a href=\"#!/api/Ext.data.proxy.Server-method-read\" rel=\"Ext.data.proxy.Server-method-read\" class=\"docClass\">read</a>, <a href=\"#!/api/Ext.data.proxy.Server-method-update\" rel=\"Ext.data.proxy.Server-method-update\" class=\"docClass\">update</a> and <a href=\"#!/api/Ext.data.proxy.Server-method-destroy\" rel=\"Ext.data.proxy.Server-method-destroy\" class=\"docClass\">destroy</a> methods all\npass through to doRequest. Each ServerProxy subclass must implement the doRequest method - see <a href=\"#!/api/Ext.data.proxy.JsonP\" rel=\"Ext.data.proxy.JsonP\" class=\"docClass\">Ext.data.proxy.JsonP</a> and <a href=\"#!/api/Ext.data.proxy.Ajax\" rel=\"Ext.data.proxy.Ajax\" class=\"docClass\">Ext.data.proxy.Ajax</a> for examples. This method carries the same signature as\neach of the methods that delegate to it.</p>\n"},"encodeFilters":{"!type":"fn(filters: [+Ext.util.Filter]) -> string","!doc":"<p>Encodes the array of <a href=\"#!/api/Ext.util.Filter\" rel=\"Ext.util.Filter\" class=\"docClass\">Ext.util.Filter</a> objects into a string to be sent in the request url. By default,\nthis simply JSON-encodes the filter data</p>\n"},"encodeSorters":{"!type":"fn(sorters: [+Ext.util.Sorter]) -> string","!doc":"<p>Encodes the array of <a href=\"#!/api/Ext.util.Sorter\" rel=\"Ext.util.Sorter\" class=\"docClass\">Ext.util.Sorter</a> objects into a string to be sent in the request url. By default,\nthis simply JSON-encodes the sorter data</p>\n"},"extractResponseData":{"!type":"fn(response: ?) -> ?","!doc":"<p>Template method to allow subclasses to specify how to get the response for the reader.</p>\n"},"getParams":{"!type":"fn(operation: ?) -> !this","!doc":"<p>Copy any sorters, filters etc into the params so they can be sent over the wire</p>\n"},"getUrl":{"!type":"fn(request: +Ext.data.Request) -> string","!doc":"<p>Get the url for the request taking into account the order of priority,\n- The request\n- The api\n- The url</p>\n"},"onDestroy":{"!type":"fn() -> !this"},"processResponse":{"!type":"fn(success: ?, operation: ?, request: ?, response: ?, callback: ?, scope: ?) -> !this","!doc":"<p>Should this be documented as protected method?</p>\n"},"read":{"!type":"fn() -> !this","!doc":"<p>Performs the given read operation.</p>\n"},"setException":{"!type":"fn(operation: +Ext.data.Operation, response: ?) -> !this","!doc":"<p>Sets up an exception on the operation</p>\n"},"setExtraParam":{"!type":"fn(name: string, value: ?) -> !this","!doc":"<p>Sets a value in the underlying <a href=\"#!/api/Ext.data.proxy.Server-cfg-extraParams\" rel=\"Ext.data.proxy.Server-cfg-extraParams\" class=\"docClass\">extraParams</a>.</p>\n"},"update":{"!type":"fn() -> !this","!doc":"<p>Performs the given update operation.</p>\n"},"exception":{"!type":"fn(this: +Ext.data.proxy.Proxy, response: ?, operation: +Ext.data.Operation, eOpts: ?)","!doc":"<p>Fires when the server returns an exception. This event may also be listened\nto in the event that a request has timed out or has been aborted.</p>\n"}}},"SessionStorage":{"!doc":"<p>Proxy which uses HTML5 session storage as its data storage/retrieval mechanism. If this proxy is used in a browser\nwhere session storage is not supported, the constructor will throw an error. A session storage proxy requires a\nunique ID which is used as a key in which all record data are stored in the session storage object.</p>\n\n<p>It's important to supply this unique ID as it cannot be reliably determined otherwise. If no id is provided but the\nattached store has a storeId, the storeId will be used. If neither option is presented the proxy will throw an error.</p>\n\n<p>Proxies are almost always used with a <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">store</a>:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>({\n    proxy: {\n        type: 'sessionstorage',\n        id  : 'myProxyKey'\n    }\n});\n</code></pre>\n\n<p>Alternatively you can instantiate the Proxy directly:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.data.proxy.SessionStorage\" rel=\"Ext.data.proxy.SessionStorage\" class=\"docClass\">Ext.data.proxy.SessionStorage</a>({\n    id  : 'myOtherProxyKey'\n});\n</code></pre>\n\n<p>Note that session storage is different to local storage (see <a href=\"#!/api/Ext.data.proxy.LocalStorage\" rel=\"Ext.data.proxy.LocalStorage\" class=\"docClass\">Ext.data.proxy.LocalStorage</a>) - if a browser\nsession is ended (e.g. by closing the browser) then all data in a SessionStorageProxy are lost. Browser restarts\ndon't affect the <a href=\"#!/api/Ext.data.proxy.LocalStorage\" rel=\"Ext.data.proxy.LocalStorage\" class=\"docClass\">Ext.data.proxy.LocalStorage</a> - the data are preserved.</p>\n","!type":"fn(config?: Ext_data_proxy_SessionStorage_cfg)","prototype":{"!proto":"Ext.data.proxy.WebStorage.prototype","getStorageObject":{"!type":"fn() -> ?","!doc":"<p>inherit docs</p>\n"}}},"WebStorage":{"!doc":"<p>WebStorageProxy is simply a superclass for the <a href=\"#!/api/Ext.data.proxy.LocalStorage\" rel=\"Ext.data.proxy.LocalStorage\" class=\"docClass\">LocalStorage</a> and <a href=\"#!/api/Ext.data.proxy.SessionStorage\" rel=\"Ext.data.proxy.SessionStorage\" class=\"docClass\">SessionStorage</a> proxies. It uses the new HTML5 key/value client-side storage objects to\nsave <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">model instances</a> for offline use.</p>\n","!type":"fn(config?: Ext_data_proxy_WebStorage_cfg)","prototype":{"!proto":"Ext.data.proxy.Client.prototype","id":{"!type":"string","!doc":"<p>The unique ID used as the key in which all record data are stored in the local storage object.</p>\n"},"cache":{"!type":"?","!doc":"<p>Cached map of records already retrieved by this Proxy. Ensures that the same instance is always retrieved.</p>\n"},"clear":{"!type":"fn() -> !this","!doc":"<p>Destroys all records stored in the proxy and removes all keys and values used to support the proxy from the\nstorage object.</p>\n"},"create":{"!type":"fn(operation: ?, callback: ?, scope: ?) -> !this","!doc":"<p>inherit docs</p>\n"},"destroy":{"!type":"fn(operation: ?, callback: ?, scope: ?) -> !this","!doc":"<p>inherit</p>\n"},"getIds":{"!type":"fn() -> [number]","!doc":"<p>Returns the array of record IDs stored in this Proxy</p>\n"},"getNextId":{"!type":"fn() -> number","!doc":"<p>Returns the next numerical ID that can be used when realizing a model instance (see getRecordCounterKey).\nIncrements the counter.</p>\n"},"getRecord":{"!type":"fn(id: string) -> ?","!doc":"<p>Fetches record data from the Proxy by ID.</p>\n"},"getRecordCounterKey":{"!type":"fn() -> string","!doc":"<p>Returns the unique key used to store the current record counter for this proxy. This is used internally when\nrealizing models (creating them when they used to be phantoms), in order to give each model instance a unique id.</p>\n"},"getRecordKey":{"!type":"fn(id: string|number|+Ext.data.Model) -> string","!doc":"<p>Given the id of a record, returns a unique string based on that id and the id of this proxy. This is used when\nstoring data in the local storage object and should prevent naming collisions.</p>\n"},"getStorageObject":{"!type":"fn() -> ?","!doc":"<p>Abstract function which should return the storage object that data will be saved to. This must be implemented\nin each subclass.</p>\n"},"getTreeData":{"!type":"fn() -> [+Ext.data.NodeInterface]","!doc":"<p>Gets tree data and transforms it from key value pairs into a hierarchical structure.</p>\n"},"getTreeKey":{"!type":"fn() -> string","!doc":"<p>Returns the unique key used to store the tree indicator. This is used internally to determine if the stored data is hierarchical</p>\n"},"initialize":{"!type":"fn() -> !this","!doc":"<p>Sets up the Proxy by claiming the key in the storage object that corresponds to the unique id of this Proxy. Called\nautomatically by the constructor, this should not need to be called again unless <a href=\"#!/api/Ext.data.proxy.WebStorage-method-clear\" rel=\"Ext.data.proxy.WebStorage-method-clear\" class=\"docClass\">clear</a> has been called.</p>\n"},"read":{"!type":"fn(operation: ?, callback: ?, scope: ?) -> !this","!doc":"<p>inherit docs</p>\n"},"removeRecord":{"!type":"fn(record: +Ext.data.Model) -> ?","!doc":"<p>Physically removes a given record from the local storage and recursively removes children if the record is a tree node. Used internally by <a href=\"#!/api/Ext.data.proxy.WebStorage-method-destroy\" rel=\"Ext.data.proxy.WebStorage-method-destroy\" class=\"docClass\">destroy</a>.</p>\n"},"setIds":{"!type":"fn(ids: [number]) -> !this","!doc":"<p>Saves the array of ids representing the set of all records in the Proxy</p>\n"},"setRecord":{"!type":"fn(record: +Ext.data.Model, id?: string) -> !this","!doc":"<p>Saves the given record in the Proxy.</p>\n"},"sortByParentId":{"!type":"fn(node1: ?, node2: ?) -> number","!doc":"<p>Sorter function for sorting records by parentId</p>\n"},"update":{"!type":"fn(operation: ?, callback: ?, scope: ?) -> !this","!doc":"<p>inherit docs</p>\n"}}}},"reader":{"Array":{"!doc":"<p>Data reader class to create an Array of <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a> objects from an Array.\nEach element of that Array represents a row of data fields. The\nfields are pulled into a Record object using as a subscript, the <code>mapping</code> property\nof the field definition if it exists, or the field's ordinal position in the definition.</p>\n\n\n\n\n<p><u>Example code:</u></p>\n\n\n\n\n<pre><code>Employee = <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Employee', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: [\n        'id',\n        {name: 'name', mapping: 1},         // \"mapping\" only needed if an \"id\" field is present which\n        {name: 'occupation', mapping: 2}    // precludes using the ordinal position as the index.        \n    ]\n});\n\nvar myReader = new <a href=\"#!/api/Ext.data.reader.Array\" rel=\"Ext.data.reader.Array\" class=\"docClass\">Ext.data.reader.Array</a>({\n    model: 'Employee'\n}, Employee);\n</code></pre>\n\n\n\n\n<p>This would consume an Array like this:</p>\n\n\n\n\n<pre><code>[ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ]\n</code></pre>\n\n","!type":"fn(meta: ?)","prototype":{"!proto":"Ext.data.reader.Json.prototype","successProperty":{"!type":"string","!doc":"<p>Name of the property from which to retrieve the <code>success</code> attribute, the value of which indicates\nwhether a given request succeeded or failed (typically a boolean or 'true'|'false'). See\n<a href=\"#!/api/Ext.data.proxy.Server\" rel=\"Ext.data.proxy.Server\" class=\"docClass\">Ext.data.proxy.Server</a>.<a href=\"#!/api/Ext.data.proxy.Server-event-exception\" rel=\"Ext.data.proxy.Server-event-exception\" class=\"docClass\">exception</a> for additional information.</p>\n"},"totalProperty":{"!type":"string","!doc":"<p>For Array Reader, methods in the base which use these properties must not see the defaults</p>\n"},"createFieldAccessExpression":{"!type":"fn(field: ?, fieldVarName: ?, dataName: ?) -> !this","!doc":"<p>Returns an accessor expression for the passed Field from an Array using either the Field's mapping, or\nits ordinal position in the fields collsction as the index.\nThis is used by buildExtractors to create optimized on extractor function which converts raw data into model instances.</p>\n"}}},"Json":{"!doc":"<p>The JSON Reader is used by a Proxy to read a server response that is sent back in JSON format. This usually\nhappens as a result of loading a Store - for example we might create something like this:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('User', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['id', 'name', 'email']\n});\n\nvar store = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    model: 'User',\n    proxy: {\n        type: 'ajax',\n        url : 'users.json',\n        reader: {\n            type: 'json'\n        }\n    }\n});\n</code></pre>\n\n<p>The example above creates a 'User' model. Models are explained in the <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Model</a> docs if you're\nnot already familiar with them.</p>\n\n<p>We created the simplest type of JSON Reader possible by simply telling our <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Store</a>'s\n<a href=\"#!/api/Ext.data.proxy.Proxy\" rel=\"Ext.data.proxy.Proxy\" class=\"docClass\">Proxy</a> that we want a JSON Reader. The Store automatically passes the configured model to the\nStore, so it is as if we passed this instead:</p>\n\n<pre><code>reader: {\n    type : 'json',\n    model: 'User'\n}\n</code></pre>\n\n<p>The reader we set up is ready to read data from our server - at the moment it will accept a response like this:</p>\n\n<pre><code>[\n    {\n        \"id\": 1,\n        \"name\": \"Ed Spencer\",\n        \"email\": \"ed@sencha.com\"\n    },\n    {\n        \"id\": 2,\n        \"name\": \"Abe Elias\",\n        \"email\": \"abe@sencha.com\"\n    }\n]\n</code></pre>\n\n<h2>Reading other JSON formats</h2>\n\n<p>If you already have your JSON format defined and it doesn't look quite like what we have above, you can usually\npass JsonReader a couple of configuration options to make it parse your format. For example, we can use the\n<a href=\"#!/api/Ext.data.reader.Json-cfg-root\" rel=\"Ext.data.reader.Json-cfg-root\" class=\"docClass\">root</a> configuration to parse data that comes back like this:</p>\n\n<pre><code>{\n    \"users\": [\n       {\n           \"id\": 1,\n           \"name\": \"Ed Spencer\",\n           \"email\": \"ed@sencha.com\"\n       },\n       {\n           \"id\": 2,\n           \"name\": \"Abe Elias\",\n           \"email\": \"abe@sencha.com\"\n       }\n    ]\n}\n</code></pre>\n\n<p>To parse this we just pass in a <a href=\"#!/api/Ext.data.reader.Json-cfg-root\" rel=\"Ext.data.reader.Json-cfg-root\" class=\"docClass\">root</a> configuration that matches the 'users' above:</p>\n\n<pre><code>reader: {\n    type: 'json',\n    root: 'users'\n}\n</code></pre>\n\n<p>Sometimes the JSON structure is even more complicated. Document databases like CouchDB often provide metadata\naround each record inside a nested structure like this:</p>\n\n<pre><code>{\n    \"total\": 122,\n    \"offset\": 0,\n    \"users\": [\n        {\n            \"id\": \"ed-spencer-1\",\n            \"value\": 1,\n            \"user\": {\n                \"id\": 1,\n                \"name\": \"Ed Spencer\",\n                \"email\": \"ed@sencha.com\"\n            }\n        }\n    ]\n}\n</code></pre>\n\n<p>In the case above the record data is nested an additional level inside the \"users\" array as each \"user\" item has\nadditional metadata surrounding it ('id' and 'value' in this case). To parse data out of each \"user\" item in the\nJSON above we need to specify the <a href=\"#!/api/Ext.data.reader.Json-cfg-record\" rel=\"Ext.data.reader.Json-cfg-record\" class=\"docClass\">record</a> configuration like this:</p>\n\n<pre><code>reader: {\n    type  : 'json',\n    root  : 'users',\n    record: 'user'\n}\n</code></pre>\n\n<h2>Response MetaData</h2>\n\n<p>The server can return metadata in its response, in addition to the record data, that describe attributes\nof the data set itself or are used to reconfigure the Reader. To pass metadata in the response you simply\nadd a <code>metaData</code> attribute to the root of the response data. The metaData attribute can contain anything,\nbut supports a specific set of properties that are handled by the Reader if they are present:</p>\n\n<ul>\n<li><a href=\"#!/api/Ext.data.reader.Json-cfg-root\" rel=\"Ext.data.reader.Json-cfg-root\" class=\"docClass\">root</a>: the property name of the root response node containing the record data</li>\n<li><a href=\"#!/api/Ext.data.reader.Json-cfg-idProperty\" rel=\"Ext.data.reader.Json-cfg-idProperty\" class=\"docClass\">idProperty</a>: property name for the primary key field of the data</li>\n<li><a href=\"#!/api/Ext.data.reader.Json-cfg-totalProperty\" rel=\"Ext.data.reader.Json-cfg-totalProperty\" class=\"docClass\">totalProperty</a>: property name for the total number of records in the data</li>\n<li><a href=\"#!/api/Ext.data.reader.Json-cfg-successProperty\" rel=\"Ext.data.reader.Json-cfg-successProperty\" class=\"docClass\">successProperty</a>: property name for the success status of the response</li>\n<li><a href=\"#!/api/Ext.data.reader.Json-cfg-messageProperty\" rel=\"Ext.data.reader.Json-cfg-messageProperty\" class=\"docClass\">messageProperty</a>: property name for an optional response message</li>\n<li><a href=\"#!/api/Ext.data.Model-cfg-fields\" rel=\"Ext.data.Model-cfg-fields\" class=\"docClass\">fields</a>: Config used to reconfigure the Model's fields before converting the\nresponse data into records</li>\n</ul>\n\n\n<p>An initial Reader configuration containing all of these properties might look like this (\"fields\" would be\nincluded in the Model definition, not shown):</p>\n\n<pre><code>reader: {\n    type : 'json',\n    root : 'root',\n    idProperty     : 'id',\n    totalProperty  : 'total',\n    successProperty: 'success',\n    messageProperty: 'message'\n}\n</code></pre>\n\n<p>If you were to pass a response object containing attributes different from those initially defined above, you could\nuse the <code>metaData</code> attribute to reconifgure the Reader on the fly. For example:</p>\n\n<pre><code>{\n    \"count\": 1,\n    \"ok\": true,\n    \"msg\": \"Users found\",\n    \"users\": [{\n        \"userId\": 123,\n        \"name\": \"Ed Spencer\",\n        \"email\": \"ed@sencha.com\"\n    }],\n    \"metaData\": {\n        \"root\": \"users\",\n        \"idProperty\": 'userId',\n        \"totalProperty\": 'count',\n        \"successProperty\": 'ok',\n        \"messageProperty\": 'msg'\n    }\n}\n</code></pre>\n\n<p>You can also place any other arbitrary data you need into the <code>metaData</code> attribute which will be ignored by the Reader,\nbut will be accessible via the Reader's <a href=\"#!/api/Ext.data.reader.Json-property-metaData\" rel=\"Ext.data.reader.Json-property-metaData\" class=\"docClass\">metaData</a> property (which is also passed to listeners via the Proxy's\n<a href=\"#!/api/Ext.data.proxy.Proxy-event-metachange\" rel=\"Ext.data.proxy.Proxy-event-metachange\" class=\"docClass\">metachange</a> event (also relayed by the <a href=\"#!/api/Ext.data.AbstractStore-event-metachange\" rel=\"Ext.data.AbstractStore-event-metachange\" class=\"docClass\">store</a>). Application code can then process the passed metadata in any way it chooses.</p>\n\n<p>A simple example for how this can be used would be customizing the fields for a Model that is bound to a grid. By passing\nthe <code>fields</code> property the Model will be automatically updated by the Reader internally, but that change will not be\nreflected automatically in the grid unless you also update the column configuration. You could do this manually, or you\ncould simply pass a standard grid <a href=\"#!/api/Ext.panel.Table-cfg-columns\" rel=\"Ext.panel.Table-cfg-columns\" class=\"docClass\">column</a> config object as part of the <code>metaData</code> attribute\nand then pass that along to the grid. Here's a very simple example for how that could be accomplished:</p>\n\n<pre><code>// response format:\n{\n    ...\n    \"metaData\": {\n        \"fields\": [\n            { \"name\": \"userId\", \"type\": \"int\" },\n            { \"name\": \"name\", \"type\": \"string\" },\n            { \"name\": \"birthday\", \"type\": \"date\", \"dateFormat\": \"Y-j-m\" },\n        ],\n        \"columns\": [\n            { \"text\": \"User ID\", \"dataIndex\": \"userId\", \"width\": 40 },\n            { \"text\": \"User Name\", \"dataIndex\": \"name\", \"flex\": 1 },\n            { \"text\": \"Birthday\", \"dataIndex\": \"birthday\", \"flex\": 1, \"format\": 'Y-j-m', \"xtype\": \"datecolumn\" }\n        ]\n    }\n}\n</code></pre>\n\n<p>The Reader will automatically read the meta fields config and rebuild the Model based on the new fields, but to handle\nthe new column configuration you would need to handle the metadata within the application code. This is done simply enough\nby handling the metachange event on either the store or the proxy, e.g.:</p>\n\n<pre><code>var store = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    ...\n    listeners: {\n        'metachange': function(store, meta) {\n            myGrid.reconfigure(store, meta.columns);\n        }\n    }\n});\n</code></pre>\n","!type":"fn(config?: Ext_data_reader_Json_cfg)","prototype":{"!proto":"Ext.data.reader.Reader.prototype","metaProperty":{"!type":"string","!doc":"<p>Name of the property from which to retrieve the <code>metaData</code> attribute. See <a href=\"#!/api/Ext.data.reader.Json-property-metaData\" rel=\"Ext.data.reader.Json-property-metaData\" class=\"docClass\">metaData</a>.</p>\n"},"record":{"!type":"string","!doc":"<p>The optional location within the JSON response that the record data itself can be found at.\nSee the JsonReader intro docs for more details. This is not often needed.</p>\n"},"root":{"!type":"string","!doc":"<p>The name of the property which contains the data items corresponding to the Model(s) for which this\nReader is configured.  For JSON reader it's a property name (or a dot-separated list of property names\nif the root is nested).  For XML reader it's a CSS selector.  For Array reader the root is not applicable\nsince the data is assumed to be a single-level array of arrays.</p>\n\n<p>By default the natural root of the data will be used: the root JSON array, the root XML element, or the array.</p>\n\n<p>The data packet value for this property should be an empty array to clear the data or show no data.</p>\n"},"useSimpleAccessors":{"!type":"bool","!doc":"<p>True to ensure that field names/mappings are treated as literals when\nreading values.</p>\n\n<p>For example, by default, using the mapping \"foo.bar.baz\" will try and read a property foo from the root, then a property bar\nfrom foo, then a property baz from bar. Setting the simple accessors to true will read the property with the name\n\"foo.bar.baz\" direct from the root object.</p>\n"},"jsonData":{"!type":"?","!doc":"<p>A copy of this.rawData.</p>\n"},"buildExtractors":{"!type":"fn(force?: bool) -> !this","!doc":"<p>inherit docs</p>\n"},"createAccessor":{"!type":"fn() -> !this","!doc":"<p>Returns an accessor function for the given property string. Gives support for properties such as the following:</p>\n\n<ul>\n<li>'someProperty'</li>\n<li>'some.property'</li>\n<li>'[\"someProperty\"]'</li>\n<li>'values[0]'</li>\n</ul>\n\n\n<p>This is used by <a href=\"#!/api/Ext.data.reader.Json-method-buildExtractors\" rel=\"Ext.data.reader.Json-method-buildExtractors\" class=\"docClass\">buildExtractors</a> to create optimized extractor functions for properties that are looked\nup directly on the source object (e.g. <a href=\"#!/api/Ext.data.reader.Json-cfg-successProperty\" rel=\"Ext.data.reader.Json-cfg-successProperty\" class=\"docClass\">successProperty</a>, <a href=\"#!/api/Ext.data.reader.Json-cfg-messageProperty\" rel=\"Ext.data.reader.Json-cfg-messageProperty\" class=\"docClass\">messageProperty</a>, etc.).</p>\n"},"createFieldAccessExpression":{"!type":"fn() -> !this","!doc":"<p>Returns an accessor expression for the passed Field. Gives support for properties such as the following:</p>\n\n<ul>\n<li>'someProperty'</li>\n<li>'some.property'</li>\n<li>'[\"someProperty\"]'</li>\n<li>'values[0]'</li>\n</ul>\n\n\n<p>This is used by <a href=\"#!/api/Ext.data.reader.Json-method-buildRecordDataExtractor\" rel=\"Ext.data.reader.Json-method-buildRecordDataExtractor\" class=\"docClass\">buildRecordDataExtractor</a> to create optimized extractor expressions when converting raw\ndata into model instances. This method is used at the field level to dynamically map values to model fields.</p>\n"},"extractData":{"!type":"fn(root: ?) -> [+Ext.data.Model]","!doc":"<p>We're just preparing the data for the superclass by pulling out the record objects we want. If a <a href=\"#!/api/Ext.data.reader.Json-cfg-record\" rel=\"Ext.data.reader.Json-cfg-record\" class=\"docClass\">record</a>\nwas specified we have to pull those out of the larger JSON object, which is most of what this function is doing</p>\n"},"getResponseData":{"!type":"fn(response: ?) -> +Ext.data.ResultSet","!doc":"<p>inherit docs</p>\n"},"readRecords":{"!type":"fn(data: ?) -> +Ext.data.ResultSet","!doc":"<p>Reads a JSON object and returns a ResultSet. Uses the internal getTotal and getSuccess extractors to\nretrieve meta data from the response, and extractData to turn the JSON data into model instances.</p>\n"}}},"Reader":{"!doc":"<p>Readers are used to interpret data to be loaded into a <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Model</a> instance or a <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Store</a> - often in response to an AJAX request. In general there is usually no need to create\na Reader instance directly, since a Reader is almost always used together with a <a href=\"#!/api/Ext.data.proxy.Proxy\" rel=\"Ext.data.proxy.Proxy\" class=\"docClass\">Proxy</a>,\nand is configured using the Proxy's <a href=\"#!/api/Ext.data.proxy.Proxy-cfg-reader\" rel=\"Ext.data.proxy.Proxy-cfg-reader\" class=\"docClass\">reader</a> configuration property:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    model: 'User',\n    proxy: {\n        type: 'ajax',\n        url : 'users.json',\n        reader: {\n            type: 'json',\n            root: 'users'\n        }\n    },\n});\n</code></pre>\n\n<p>The above reader is configured to consume a JSON string that looks something like this:</p>\n\n<pre><code>{\n    \"success\": true,\n    \"users\": [\n        { \"name\": \"User 1\" },\n        { \"name\": \"User 2\" }\n    ]\n}\n</code></pre>\n\n<h1>Loading Nested Data</h1>\n\n<p>Readers have the ability to automatically load deeply-nested data objects based on the <a href=\"#!/api/Ext.data.association.Association\" rel=\"Ext.data.association.Association\" class=\"docClass\">associations</a> configured on each Model. Below is an example demonstrating the flexibility of these associations in a\nfictional CRM system which manages a User, their Orders, OrderItems and Products. First we'll define the models:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>(\"User\", {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: [\n        'id', 'name'\n    ],\n\n    hasMany: {model: 'Order', name: 'orders'},\n\n    proxy: {\n        type: 'rest',\n        url : 'users.json',\n        reader: {\n            type: 'json',\n            root: 'users'\n        }\n    }\n});\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>(\"Order\", {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: [\n        'id', 'total'\n    ],\n\n    hasMany  : {model: 'OrderItem', name: 'orderItems', associationKey: 'order_items'},\n    belongsTo: 'User'\n});\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>(\"OrderItem\", {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: [\n        'id', 'price', 'quantity', 'order_id', 'product_id'\n    ],\n\n    belongsTo: ['Order', {model: 'Product', associationKey: 'product'}]\n});\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>(\"Product\", {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: [\n        'id', 'name'\n    ],\n\n    hasMany: 'OrderItem'\n});\n</code></pre>\n\n<p>This may be a lot to take in - basically a User has many Orders, each of which is composed of several OrderItems.\nFinally, each OrderItem has a single Product. This allows us to consume data like this:</p>\n\n<pre><code>{\n    \"users\": [\n        {\n            \"id\": 123,\n            \"name\": \"Ed\",\n            \"orders\": [\n                {\n                    \"id\": 50,\n                    \"total\": 100,\n                    \"order_items\": [\n                        {\n                            \"id\"      : 20,\n                            \"price\"   : 40,\n                            \"quantity\": 2,\n                            \"product\" : {\n                                \"id\": 1000,\n                                \"name\": \"MacBook Pro\"\n                            }\n                        },\n                        {\n                            \"id\"      : 21,\n                            \"price\"   : 20,\n                            \"quantity\": 3,\n                            \"product\" : {\n                                \"id\": 1001,\n                                \"name\": \"iPhone\"\n                            }\n                        }\n                    ]\n                }\n            ]\n        }\n    ]\n}\n</code></pre>\n\n<p>The JSON response is deeply nested - it returns all Users (in this case just 1 for simplicity's sake), all of the\nOrders for each User (again just 1 in this case), all of the OrderItems for each Order (2 order items in this case),\nand finally the Product associated with each OrderItem. Now we can read the data and use it as follows:</p>\n\n<pre><code>var store = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    model: \"User\"\n});\n\nstore.load({\n    callback: function() {\n        //the user that was loaded\n        var user = store.first();\n\n        console.log(\"Orders for \" + user.get('name') + \":\")\n\n        //iterate over the Orders for each User\n        user.orders().each(function(order) {\n            console.log(\"Order ID: \" + order.getId() + \", which contains items:\");\n\n            //iterate over the OrderItems for each Order\n            order.orderItems().each(function(orderItem) {\n                //we know that the Product data is already loaded, so we can use the synchronous getProduct\n                //usually, we would use the asynchronous version (see <a href=\"#!/api/Ext.data.association.BelongsTo\" rel=\"Ext.data.association.BelongsTo\" class=\"docClass\">Ext.data.association.BelongsTo</a>)\n                var product = orderItem.getProduct();\n\n                console.log(orderItem.get('quantity') + ' orders of ' + product.get('name'));\n            });\n        });\n    }\n});\n</code></pre>\n\n<p>Running the code above results in the following:</p>\n\n<pre><code>Orders for Ed:\nOrder ID: 50, which contains items:\n2 orders of MacBook Pro\n3 orders of iPhone\n</code></pre>\n","!type":"fn(config?: Ext_data_reader_Reader_cfg)","prototype":{"!proto":"Ext.Base.prototype","idProperty":{"!type":"string","!doc":"<p>Name of the property within a row object that contains a record identifier value. Defaults to the id of the\nmodel. If an idProperty is explicitly specified it will take precedence over idProperty defined on the model.</p>\n"},"implicitIncludes":{"!type":"bool","!doc":"<p>True to automatically parse models nested within other models in a response object. See the\n<a href=\"#!/api/Ext.data.reader.Reader\" rel=\"Ext.data.reader.Reader\" class=\"docClass\">Ext.data.reader.Reader</a> intro docs for full explanation.</p>\n"},"messageProperty":{"!type":"string","!doc":"<p>The name of the property which contains a response message. This property is optional.</p>\n"},"readRecordsOnFailure":{"!type":"bool","!doc":"<p>True to extract the records from a data packet even if the <a href=\"#!/api/Ext.data.reader.Reader-cfg-successProperty\" rel=\"Ext.data.reader.Reader-cfg-successProperty\" class=\"docClass\">successProperty</a> returns false.</p>\n"},"root":{"!type":"string","!doc":"<p>The name of the property which contains the data items corresponding to the Model(s) for which this\nReader is configured.  For JSON reader it's a property name (or a dot-separated list of property names\nif the root is nested).  For XML reader it's a CSS selector.  For Array reader the root is not applicable\nsince the data is assumed to be a single-level array of arrays.</p>\n\n<p>By default the natural root of the data will be used: the root JSON array, the root XML element, or the array.</p>\n\n<p>The data packet value for this property should be an empty array to clear the data or show no data.</p>\n"},"successProperty":{"!type":"string","!doc":"<p>Name of the property from which to retrieve the <code>success</code> attribute, the value of which indicates\nwhether a given request succeeded or failed (typically a boolean or 'true'|'false'). See\n<a href=\"#!/api/Ext.data.proxy.Server\" rel=\"Ext.data.proxy.Server\" class=\"docClass\">Ext.data.proxy.Server</a>.<a href=\"#!/api/Ext.data.proxy.Server-event-exception\" rel=\"Ext.data.proxy.Server-event-exception\" class=\"docClass\">exception</a> for additional information.</p>\n"},"totalProperty":{"!type":"string","!doc":"<p>Name of the property from which to retrieve the total number of records in the dataset. This is only needed if\nthe whole dataset is not passed in one go, but is being paged from the remote server.</p>\n"},"applyDefaults":{"!type":"bool","!doc":"<p>Private flag to the generated convertRecordData function to indicate whether to apply Field default\nvalues to fields for which no value is present in the raw data.\nThis is set to false by a Server Proxy which is reading the response from a \"create\" or \"update\" operation.</p>\n"},"isReader":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated Reader, or subclass thereof.</p>\n"},"lastFieldGeneration":{"!type":"?"},"metaData":{"!type":"?","!doc":"<p>The raw meta data that was most recently read, if any. Meta data can include existing\nReader config options like <a href=\"#!/api/Ext.data.reader.Reader-cfg-idProperty\" rel=\"Ext.data.reader.Reader-cfg-idProperty\" class=\"docClass\">idProperty</a>, <a href=\"#!/api/Ext.data.reader.Reader-cfg-totalProperty\" rel=\"Ext.data.reader.Reader-cfg-totalProperty\" class=\"docClass\">totalProperty</a>, etc. that get\nautomatically applied to the Reader, and those can still be accessed directly from the Reader\nif needed. However, meta data is also often used to pass other custom data to be processed\nby application code. For example, it is common when reconfiguring the data model of a grid to\nalso pass a corresponding column model config to be applied to the grid. Any such data will\nnot get applied to the Reader directly (it just gets passed through and is ignored by Ext).\nThis metaData property gives you access to all meta data that was passed, including any such\ncustom data ignored by the reader.</p>\n\n<p>This is a read-only property, and it will get replaced each time a new meta data object is\npassed to the reader. Note that typically you would handle proxy's\n<a href=\"#!/api/Ext.data.proxy.Proxy-event-metachange\" rel=\"Ext.data.proxy.Proxy-event-metachange\" class=\"docClass\">metachange</a> event which passes this exact same meta\nobject to listeners. However this property is available if it's more convenient to access it\nvia the reader directly in certain cases.</p>\n"},"rawData":{"!type":"?","!doc":"<p>The raw data object that was last passed to <a href=\"#!/api/Ext.data.reader.Reader-method-readRecords\" rel=\"Ext.data.reader.Reader-method-readRecords\" class=\"docClass\">readRecords</a>. Stored for further processing if needed.</p>\n"},"recordDataExtractorTemplate":{"!type":"[?]"},"buildExtractors":{"!type":"fn(force?: bool) -> !this","!doc":"<p>This builds optimized functions for retrieving record data and meta data from an object.\nSubclasses may need to implement their own getRoot function.</p>\n"},"buildRecordDataExtractor":{"!type":"fn() -> !this","!doc":"<p>Return a function which will read a raw row object in the format this Reader accepts, and populates\na record's data object with converted data values.</p>\n\n<p>The returned function must be passed the following parameters:</p>\n\n<ul>\n<li>dest A record's empty data object into which the new field value properties are injected.</li>\n<li>source A raw row data object of whatever type this Reader consumes</li>\n<li>record The record which is being populated.</li>\n</ul>\n\n"},"destroyReader":{"!type":"fn() -> !this"},"extractData":{"!type":"fn(root: [?]|?) -> [?]","!doc":"<p>Returns extracted, type-cast rows of data.</p>\n"},"getAssociatedDataRoot":{"!type":"fn(data: ?, associationName: string) -> ?","!doc":"<p>Used internally by <a href=\"#!/api/Ext.data.reader.Reader-method-readAssociated\" rel=\"Ext.data.reader.Reader-method-readAssociated\" class=\"docClass\">readAssociated</a>. Given a data object (which could be json, xml etc) for a specific\nrecord, this should return the relevant part of that data for the given association name. If a complex\nmapping, this will traverse arrays and objects to resolve the data.</p>\n"},"getData":{"!type":"fn(data: ?) -> ?","!doc":"<p>By default this function just returns what is passed to it. It can be overridden in a subclass\nto return something else. See XmlReader for an example.</p>\n"},"getFields":{"!type":"fn() -> !this"},"getIdProperty":{"!type":"fn() -> string","!doc":"<p>Get the idProperty to use for extracting data</p>\n"},"getResponseData":{"!type":"fn(response: ?) -> +Ext.data.ResultSet","!doc":"<p>Takes a raw response object (as passed to the <a href=\"#!/api/Ext.data.reader.Reader-method-read\" rel=\"Ext.data.reader.Reader-method-read\" class=\"docClass\">read</a> method) and returns the useful data\nsegment from it. This must be implemented by each subclass.</p>\n"},"getRoot":{"!type":"fn(data: ?) -> ?","!doc":"<p>This will usually need to be implemented in a subclass. Given a generic data object (the type depends on the type\nof data we are reading), this function should return the object as configured by the Reader's 'root' meta data config.\nSee XmlReader's getRoot implementation for an example. By default the same data object will simply be returned.</p>\n"},"onMetaChange":{"!type":"fn(meta: ?) -> !this","!doc":"<p>Reconfigures the meta data tied to this Reader</p>\n"},"read":{"!type":"fn(response: ?) -> +Ext.data.ResultSet","!doc":"<p>Reads the given response object. This method normalizes the different types of response object that may be passed to it.\nIf it's an XMLHttpRequest object, hand off to the subclass' <a href=\"#!/api/Ext.data.reader.Reader-method-getResponseData\" rel=\"Ext.data.reader.Reader-method-getResponseData\" class=\"docClass\">getResponseData</a> method.\nElse, hand off the reading of records to the <a href=\"#!/api/Ext.data.reader.Reader-method-readRecords\" rel=\"Ext.data.reader.Reader-method-readRecords\" class=\"docClass\">readRecords</a> method.</p>\n"},"readAssociated":{"!type":"fn(record: +Ext.data.Model, data: ?) -> string","!doc":"<p>Loads a record's associations from the data object. This prepopulates hasMany and belongsTo associations\non the record provided.</p>\n"},"readRecords":{"!type":"fn(data: ?) -> +Ext.data.ResultSet","!doc":"<p>Abstracts common functionality used by all Reader subclasses. Each subclass is expected to call this function\nbefore running its own logic and returning the <a href=\"#!/api/Ext.data.ResultSet\" rel=\"Ext.data.ResultSet\" class=\"docClass\">Ext.data.ResultSet</a> instance. For most Readers additional\nprocessing should not be needed.</p>\n"},"setModel":{"!type":"fn(model: ?, setOnProxy: bool) -> !this","!doc":"<p>Sets a new model for the reader.</p>\n"},"exception":{"!type":"fn(reader: +Ext.data.reader.Reader, response: +XMLHttpRequest, error: +Ext.data.ResultSet, eOpts: ?)","!doc":"<p>Fires when the reader receives improperly encoded data from the server</p>\n"}}},"Xml":{"!doc":"<p>The XML Reader is used by a Proxy to read a server response that is sent back in XML format. This usually happens as\na result of loading a Store - for example we might create something like this:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('User', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['id', 'name', 'email']\n});\n\nvar store = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    model: 'User',\n    proxy: {\n        type: 'ajax',\n        url : 'users.xml',\n        reader: {\n            type: 'xml',\n            record: 'user',\n            root: 'users'\n        }\n    }\n});\n</code></pre>\n\n<p>The example above creates a 'User' model. Models are explained in the <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Model</a> docs if you're not\nalready familiar with them.</p>\n\n<p>We created the simplest type of XML Reader possible by simply telling our <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Store</a>'s <a href=\"#!/api/Ext.data.proxy.Proxy\" rel=\"Ext.data.proxy.Proxy\" class=\"docClass\">Proxy</a> that we want a XML Reader. The Store automatically passes the configured model to the\nStore, so it is as if we passed this instead:</p>\n\n<pre><code>reader: {\n    type : 'xml',\n    model: 'User',\n    record: 'user',\n    root: 'users'\n}\n</code></pre>\n\n<p>The reader we set up is ready to read data from our server - at the moment it will accept a response like this:</p>\n\n<pre><code>&lt;?xml version=\"1.0\" encoding=\"UTF-8\"?&gt;\n&lt;users&gt;\n    &lt;user&gt;\n        &lt;id&gt;1&lt;/id&gt;\n        &lt;name&gt;Ed Spencer&lt;/name&gt;\n        &lt;email&gt;ed@sencha.com&lt;/email&gt;\n    &lt;/user&gt;\n    &lt;user&gt;\n        &lt;id&gt;2&lt;/id&gt;\n        &lt;name&gt;Abe Elias&lt;/name&gt;\n        &lt;email&gt;abe@sencha.com&lt;/email&gt;\n    &lt;/user&gt;\n&lt;/users&gt;\n</code></pre>\n\n<p>First off there's <a href=\"#!/api/Ext.data.reader.Xml-cfg-root\" rel=\"Ext.data.reader.Xml-cfg-root\" class=\"docClass\">root</a> option to define the root node <code>&lt;users&gt;</code> (there should be only one in a well-formed\nXML document). Then the XML Reader uses the configured <a href=\"#!/api/Ext.data.reader.Xml-cfg-record\" rel=\"Ext.data.reader.Xml-cfg-record\" class=\"docClass\">record</a> option to pull out the data for each record -\nin this case we set record to 'user', so each <code>&lt;user&gt;</code> above will be converted into a User model.</p>\n\n<p>Note that XmlReader doesn't care whether your <a href=\"#!/api/Ext.data.reader.Xml-cfg-root\" rel=\"Ext.data.reader.Xml-cfg-root\" class=\"docClass\">root</a> and <a href=\"#!/api/Ext.data.reader.Xml-cfg-record\" rel=\"Ext.data.reader.Xml-cfg-record\" class=\"docClass\">record</a> elements are nested deep inside a\nlarger structure, so a response like this will still work:</p>\n\n<pre><code>&lt;?xml version=\"1.0\" encoding=\"UTF-8\"?&gt;\n&lt;deeply&gt;\n    &lt;nested&gt;\n        &lt;xml&gt;\n            &lt;users&gt;\n                &lt;user&gt;\n                    &lt;id&gt;1&lt;/id&gt;\n                    &lt;name&gt;Ed Spencer&lt;/name&gt;\n                    &lt;email&gt;ed@sencha.com&lt;/email&gt;\n                &lt;/user&gt;\n                &lt;user&gt;\n                    &lt;id&gt;2&lt;/id&gt;\n                    &lt;name&gt;Abe Elias&lt;/name&gt;\n                    &lt;email&gt;abe@sencha.com&lt;/email&gt;\n                &lt;/user&gt;\n            &lt;/users&gt;\n        &lt;/xml&gt;\n    &lt;/nested&gt;\n&lt;/deeply&gt;\n</code></pre>\n\n<p>If this Reader is being used by a <a href=\"#!/api/Ext.data.TreeStore\" rel=\"Ext.data.TreeStore\" class=\"docClass\">TreeStore</a> to read tree-structured data in which records\nare nested as descendant nodes of other records, then this lenient behaviour must be overridden by using a more specific\nchild node selector as your <a href=\"#!/api/Ext.data.reader.Xml-cfg-record\" rel=\"Ext.data.reader.Xml-cfg-record\" class=\"docClass\">record</a> selector which will not select all descendants, such as:</p>\n\n<p>   record: '>user'</p>\n\n<h1>Response metadata</h1>\n\n<p>The server can return additional data in its response, such as the <a href=\"#!/api/Ext.data.reader.Xml-cfg-totalProperty\" rel=\"Ext.data.reader.Xml-cfg-totalProperty\" class=\"docClass\">total number of records</a> and\nthe <a href=\"#!/api/Ext.data.reader.Xml-cfg-successProperty\" rel=\"Ext.data.reader.Xml-cfg-successProperty\" class=\"docClass\">success status of the response</a>. These are typically included in the XML response like\nthis:</p>\n\n<pre><code>&lt;?xml version=\"1.0\" encoding=\"UTF-8\"?&gt;\n&lt;users&gt;\n    &lt;total&gt;100&lt;/total&gt;\n    &lt;success&gt;true&lt;/success&gt;\n    &lt;user&gt;\n        &lt;id&gt;1&lt;/id&gt;\n        &lt;name&gt;Ed Spencer&lt;/name&gt;\n        &lt;email&gt;ed@sencha.com&lt;/email&gt;\n    &lt;/user&gt;\n    &lt;user&gt;\n        &lt;id&gt;2&lt;/id&gt;\n        &lt;name&gt;Abe Elias&lt;/name&gt;\n        &lt;email&gt;abe@sencha.com&lt;/email&gt;\n    &lt;/user&gt;\n&lt;/users&gt;\n</code></pre>\n\n<p>If these properties are present in the XML response they can be parsed out by the XmlReader and used by the Store\nthat loaded it. We can set up the names of these properties by specifying a final pair of configuration options:</p>\n\n<pre><code>reader: {\n    type: 'xml',\n    root: 'users',\n    totalProperty  : 'total',\n    successProperty: 'success'\n}\n</code></pre>\n\n<p>These final options are not necessary to make the Reader work, but can be useful when the server needs to report an\nerror or if it needs to indicate that there is a lot of data available of which only a subset is currently being\nreturned.</p>\n\n<h1>Response format</h1>\n\n<p><strong>Note:</strong> in order for the browser to parse a returned XML document, the Content-Type header in the HTTP response\nmust be set to \"text/xml\" or \"application/xml\". This is very important - the XmlReader will not work correctly\notherwise.</p>\n","!type":"fn(config?: Ext_data_reader_Xml_cfg)","prototype":{"!proto":"Ext.data.reader.Reader.prototype","namespace":{"!type":"string","!doc":"<p>A namespace prefix that will be prepended to the field name when reading a\nfield from an XML node.  Take, for example, the following Model:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Foo', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['bar', 'baz']\n});\n</code></pre>\n\n<p>The reader would need to be configured with a namespace of 'n' in order to read XML\ndata in the following format:</p>\n\n<pre><code>&lt;foo&gt;\n    &lt;n:bar&gt;bar&lt;/n:bar&gt;\n    &lt;n:baz&gt;baz&lt;/n:baz&gt;\n&lt;/foo&gt;\n</code></pre>\n"},"record":{"!type":"string","!doc":"<p>The DomQuery path to the repeated element which contains record information.</p>\n\n<p>By default, the elements which match the selector may be nested at any level below the <a href=\"#!/api/Ext.data.reader.Xml-cfg-root\" rel=\"Ext.data.reader.Xml-cfg-root\" class=\"docClass\">root</a></p>\n\n<p>If this Reader is being used by a <a href=\"#!/api/Ext.data.TreeStore\" rel=\"Ext.data.TreeStore\" class=\"docClass\">TreeStore</a> to read tree-structured data,\nthen only first generation child nodes of the root element must be selected, so the record selector must be\nspecified with a more specific selector which will not select all descendants. For example:</p>\n\n<p>   record: '>node'</p>\n"},"xmlData":{"!type":"?","!doc":"<p>Copy of <a href=\"#!/api/Ext.data.reader.Xml-property-rawData\" rel=\"Ext.data.reader.Xml-property-rawData\" class=\"docClass\">rawData</a>.</p>\n"},"createAccessor":{"!type":"fn(key: string) -> fn()","!doc":"<p>Creates a function to return some particular key of data from a response. The totalProperty and\nsuccessProperty are treated as special cases for type casting, everything else is just a simple selector.</p>\n"},"createFieldAccessExpression":{"!type":"fn(field: ?, fieldVarName: ?, dataName: ?) -> !this","!doc":"<p>Returns an accessor expression for the passed Field from an XML element using either the Field's mapping, or\nits ordinal position in the fields collsction as the index.\nThis is used by buildExtractors to create optimized on extractor function which converts raw data into model instances.</p>\n"},"extractData":{"!type":"fn(root: +XMLElement) -> [+Ext.data.Model]","!doc":"<p>We're just preparing the data for the superclass by pulling out the record nodes we want.</p>\n"},"getAssociatedDataRoot":{"!type":"fn(data: ?, associationName: string) -> +XMLElement","!doc":"<p>See <a href=\"#!/api/Ext.data.reader.Reader\" rel=\"Ext.data.reader.Reader\" class=\"docClass\">Ext.data.reader.Reader</a>'s getAssociatedDataRoot docs.</p>\n"},"getData":{"!type":"fn(data: ?) -> ?","!doc":"<p>Normalizes the data object.</p>\n"},"getNodeValue":{"!type":"fn(node: ?) -> !this"},"getResponseData":{"!type":"fn(response: ?) -> +Ext.data.ResultSet","!doc":"<p>inherit docs</p>\n"},"getRoot":{"!type":"fn(data: ?) -> +XMLElement","!doc":"<p>Given an XML object, returns the Element that represents the root as configured by the Reader's meta data.</p>\n"},"readRecords":{"!type":"fn(doc: ?) -> +Ext.data.ResultSet","!doc":"<p>Parses an XML document and returns a ResultSet containing the model instances.</p>\n"}}}},"validations":{"!doc":"<p>This singleton contains a set of validation functions that can be used to validate any type of data. They are most\noften used in <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Models</a>, where they are automatically set up and executed.</p>\n","emailMessage":{"!type":"string","!doc":"<p>The default error message used when an email validation fails</p>\n"},"emailRe":{"!type":"+RegExp","!doc":"<p>The regular expression used to validate email addresses</p>\n"},"exclusionMessage":{"!type":"string","!doc":"<p>The default error message used when an exclusion validation fails.</p>\n"},"formatMessage":{"!type":"string","!doc":"<p>The default error message used when a format validation fails.</p>\n"},"inclusionMessage":{"!type":"string","!doc":"<p>The default error message used when an inclusion validation fails.</p>\n"},"lengthMessage":{"!type":"string","!doc":"<p>The default error message used when a length validation fails.</p>\n"},"presenceMessage":{"!type":"string","!doc":"<p>The default error message used when a presence validation fails.</p>\n"},"email":{"!type":"fn(config: ?, email: string) -> bool","!doc":"<p>Validates that an email string is in the correct format</p>\n"},"exclusion":{"!type":"fn(config: ?, value: string) -> bool","!doc":"<p>Validates that the given value is not present in the configured <code>list</code>.\nFor example:</p>\n\n<pre><code>validations: [{type: 'exclusion', field: 'username', list: ['Admin', 'Operator']}]\n</code></pre>\n"},"format":{"!type":"fn(config: ?, value: string) -> bool","!doc":"<p>Returns true if the given value passes validation against the configured <code>matcher</code> regex.\nFor example:</p>\n\n<pre><code>validations: [{type: 'format', field: 'username', matcher: /([a-z]+)[0-9]{2,3}/}]\n</code></pre>\n"},"inclusion":{"!type":"fn(config: ?, value: string) -> bool","!doc":"<p>Validates that the given value is present in the configured <code>list</code>.\nFor example:</p>\n\n<pre><code>validations: [{type: 'inclusion', field: 'gender', list: ['Male', 'Female']}]\n</code></pre>\n"},"length":{"!type":"fn(config: ?, value: string) -> bool","!doc":"<p>Returns true if the given value is between the configured min and max values.\nFor example:</p>\n\n<pre><code>validations: [{type: 'length', field: 'name', min: 2}]\n</code></pre>\n"},"presence":{"!type":"fn(config: ?, value: ?) -> bool","!doc":"<p>Validates that the given value is present.\nFor example:</p>\n\n<pre><code>validations: [{type: 'presence', field: 'age'}]\n</code></pre>\n"}},"writer":{"Json":{"!doc":"<p>This class is used to write <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a> data to the server in a JSON format.\nThe <a href=\"#!/api/Ext.data.writer.Json-cfg-allowSingle\" rel=\"Ext.data.writer.Json-cfg-allowSingle\" class=\"docClass\">allowSingle</a> configuration can be set to false to force the records to always be\nencoded in an array, even if there is only a single record being sent.</p>\n","!type":"fn(config?: Ext_data_writer_Json_cfg)","prototype":{"!proto":"Ext.data.writer.Writer.prototype","allowSingle":{"!type":"bool","!doc":"<p>Configure with <code>false</code> to ensure that records are always wrapped in an array, even if there is only\none record being sent. When there is more than one record, they will always be encoded into an array.</p>\n"},"encode":{"!type":"bool","!doc":"<p>Configure <code>true</code> to send record data (all record fields if <a href=\"#!/api/Ext.data.writer.Json-cfg-writeAllFields\" rel=\"Ext.data.writer.Json-cfg-writeAllFields\" class=\"docClass\">writeAllFields</a> is <code>true</code>)\nas a JSON encoded HTTP parameter named by the <a href=\"#!/api/Ext.data.writer.Json-cfg-root\" rel=\"Ext.data.writer.Json-cfg-root\" class=\"docClass\">root</a> configuration.</p>\n\n<p>The encode option should only be set to true when a <a href=\"#!/api/Ext.data.writer.Json-cfg-root\" rel=\"Ext.data.writer.Json-cfg-root\" class=\"docClass\">root</a> is defined, because the values will be\nsent as part of the request parameters as opposed to a raw post. The root will be the name of the parameter\nsent to the server.</p>\n"},"expandData":{"!type":"bool","!doc":"<p>By default, when dot-delimited field <a href=\"#!/api/Ext.data.writer.Json-cfg-nameProperty\" rel=\"Ext.data.writer.Json-cfg-nameProperty\" class=\"docClass\">mappings</a> are\nused (e.g. <code>name: 'myProperty', mapping: 'my.nested.property'</code>) the writer will simply output a flat data\nobject containing the mapping string literal as the property name (e.g. <code>{ 'my.nested.property': 'foo' }</code>).</p>\n\n<p>Mappings are used to map incoming nested JSON to flat Ext models. In many case, the data output by the\nwriter should preferrably match the original nested data format. Setting this config to <code>true</code> will ensure\nthat the output will instead look like <code>{ my: { nested: { property: 'foo' }}}</code>. The output is generated\nby <a href=\"#!/api/Ext.data.writer.Json-method-getExpandedData\" rel=\"Ext.data.writer.Json-method-getExpandedData\" class=\"docClass\">getExpandedData</a>, which can optionally be overridden to apply more customized logic.</p>\n"},"root":{"!type":"string","!doc":"<p>The HTTP parameter name by which JSON encoded records will be passed to the server if the\n<a href=\"#!/api/Ext.data.writer.Json-cfg-encode\" rel=\"Ext.data.writer.Json-cfg-encode\" class=\"docClass\">encode</a> option is <code>true</code>.</p>\n"},"getExpandedData":{"!type":"fn(data: ?) -> !this","!doc":"<p>The Reader classes support dot-delimited data mappings for extracting nested raw data into fields, so the\nwriter must support converting the flat <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a> structure back into the original nested data\nformat. Using the same mappings when available, the Writer will simply split each delimiter into a nested\nobject in the output, which should exactly match the input format. For example, record data like this:</p>\n\n<pre><code>my.nested.property: 'foo',\nmy.nested.another: 'bar',\nmy.somethingElse: 123\n</code></pre>\n\n<p>should write out as...</p>\n\n<pre><code>my: {\n    nested: {\n        property: 'foo',\n        another: 'bar\n    },\n    somethingElse: 123\n}\n</code></pre>\n\n<p>This behavior is governed by the <a href=\"#!/api/Ext.data.writer.Json-cfg-expandData\" rel=\"Ext.data.writer.Json-cfg-expandData\" class=\"docClass\">expandData</a> config. By default, this option is <code>false</code> for\ncompatibility reasons, and will output a flat structure matching the flat record format. Setting this config\nto <code>true</code> will enable the expanded mapping behavior as shown here. This method could also be overridden\nto provide an even more customized output data structure.</p>\n"},"writeRecords":{"!type":"fn(request: ?, data: ?) -> !this","!doc":"<p>inherit docs</p>\n"}}},"Writer":{"!doc":"<p>Base Writer class used by most subclasses of <a href=\"#!/api/Ext.data.proxy.Server\" rel=\"Ext.data.proxy.Server\" class=\"docClass\">Ext.data.proxy.Server</a>. This class is responsible for taking a\nset of <a href=\"#!/api/Ext.data.Operation\" rel=\"Ext.data.Operation\" class=\"docClass\">Ext.data.Operation</a> objects and a <a href=\"#!/api/Ext.data.Request\" rel=\"Ext.data.Request\" class=\"docClass\">Ext.data.Request</a> object and modifying that request based on\nthe Operations.</p>\n\n<p>For example a <a href=\"#!/api/Ext.data.writer.Json\" rel=\"Ext.data.writer.Json\" class=\"docClass\">Ext.data.writer.Json</a> would format the Operations and their <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a> instances based on\nthe config options passed to the JsonWriter's constructor.</p>\n\n<p>Writers are not needed for any kind of local storage - whether via a <a href=\"#!/api/Ext.data.proxy.WebStorage\" rel=\"Ext.data.proxy.WebStorage\" class=\"docClass\">Web Storage\nproxy</a> (see <a href=\"#!/api/Ext.data.proxy.LocalStorage\" rel=\"Ext.data.proxy.LocalStorage\" class=\"docClass\">localStorage</a> and <a href=\"#!/api/Ext.data.proxy.SessionStorage\" rel=\"Ext.data.proxy.SessionStorage\" class=\"docClass\">sessionStorage</a>) or just in memory via a <a href=\"#!/api/Ext.data.proxy.Memory\" rel=\"Ext.data.proxy.Memory\" class=\"docClass\">MemoryProxy</a>.</p>\n\n<h1>Dates</h1>\n\n<p>Before sending dates to the server, they can be formatted using one of the <a href=\"#!/api/Ext.Date\" rel=\"Ext.Date\" class=\"docClass\">Ext.Date</a> formats.\nThese formats can be specified both on the field and the writer itself. In terms of precedence, from highest to lowest:</p>\n\n<ul>\n<li><a href=\"#!/api/Ext.data.writer.Writer-cfg-dateFormat\" rel=\"Ext.data.writer.Writer-cfg-dateFormat\" class=\"docClass\">Writer.dateFormat</a> The writer dateFormat will always have the highest precedence</li>\n<li><a href=\"#!/api/Ext.data.Field-cfg-dateWriteFormat\" rel=\"Ext.data.Field-cfg-dateWriteFormat\" class=\"docClass\">Ext.data.Field.dateWriteFormat</a> The dateWriteFormat will be used if no format is specified on the writer</li>\n<li><a href=\"#!/api/Ext.data.Field-cfg-dateFormat\" rel=\"Ext.data.Field-cfg-dateFormat\" class=\"docClass\">Field.dateFormat</a>/<a href=\"#!/api/Ext.data.Field-cfg-dateReadFormat\" rel=\"Ext.data.Field-cfg-dateReadFormat\" class=\"docClass\">Field.dateReadFormat</a>\nFinally, if none of the above options are specified the field will be formatted using the format that was used to read the date from the server.</li>\n</ul>\n\n","!type":"fn(config?: Ext_data_writer_Writer_cfg)","prototype":{"!proto":"Ext.Base.prototype","dateFormat":{"!type":"string","!doc":"<p>This is used for each field of type date in the model to format the value before\nit is sent to the server.</p>\n"},"nameProperty":{"!type":"string","!doc":"<p>This property is used to read the key for each value that will be sent to the server. For example:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Person', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: [{\n        name: 'first',\n        mapping: 'firstName'\n    }, {\n        name: 'last',\n        mapping: 'lastName'\n    }, {\n        name: 'age'\n    }]\n});\nnew <a href=\"#!/api/Ext.data.writer.Writer\" rel=\"Ext.data.writer.Writer\" class=\"docClass\">Ext.data.writer.Writer</a>({\n    writeAllFields: true,\n    nameProperty: 'mapping'\n});\n\n// This will be sent to the server\n{\n    firstName: 'first name value',\n    lastName: 'last name value',\n    age: 1\n}\n</code></pre>\n\n<p>If the value is not present, the field name will always be used.</p>\n"},"writeAllFields":{"!type":"bool","!doc":"<p>True to write all fields from the record to the server. If set to false it will only send the fields that were\nmodified. Note that any fields that have <a href=\"#!/api/Ext.data.Field-cfg-persist\" rel=\"Ext.data.Field-cfg-persist\" class=\"docClass\">Ext.data.Field.persist</a> set to false will still be ignored.</p>\n"},"writeRecordId":{"!type":"bool","!doc":"<p>By default, each record's id is always included in the output for non-phantom records since in most\ncases the id will be required on the server to process the record action. This is helpful since the id\nwill normally not be modified, and so would not be sent to the server unless <a href=\"#!/api/Ext.data.writer.Writer-cfg-writeAllFields\" rel=\"Ext.data.writer.Writer-cfg-writeAllFields\" class=\"docClass\">writeAllFields</a>\nwas explicitly enabled.</p>\n\n<p>However, there are cases where it is not desirable for the record id to be passed in the data directly.\nFor example, when using a RESTful API the record id would typically be appended to the url instead.</p>\n"},"isWriter":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated Writer, or subclass thereof.</p>\n"},"getRecordData":{"!type":"fn(record: +Ext.data.Model, operation?: +Ext.data.Operation) -> ?","!doc":"<p>Formats the data for each record before sending it to the server. This\nmethod should be overridden to format the data in a way that differs from the default.</p>\n"},"write":{"!type":"fn(request: +Ext.data.Request) -> +Ext.data.Request","!doc":"<p>Prepares a Proxy's <a href=\"#!/api/Ext.data.Request\" rel=\"Ext.data.Request\" class=\"docClass\">Ext.data.Request</a> object</p>\n"},"writeValue":{"!type":"fn(data: ?, field: ?, record: ?) -> !this"}}},"Xml":{"!doc":"<p>This class is used to write <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a> data to the server in an XML format.\nThe <a href=\"#!/api/Ext.data.writer.Xml-cfg-documentRoot\" rel=\"Ext.data.writer.Xml-cfg-documentRoot\" class=\"docClass\">documentRoot</a> property is used to specify the root element in the XML document.\nThe <a href=\"#!/api/Ext.data.writer.Xml-cfg-record\" rel=\"Ext.data.writer.Xml-cfg-record\" class=\"docClass\">record</a> option is used to specify the element name for each record that will make\nup the XML document.</p>\n","!type":"fn(config?: Ext_data_writer_Xml_cfg)","prototype":{"!proto":"Ext.data.writer.Writer.prototype","defaultDocumentRoot":{"!type":"string","!doc":"<p>The root to be used if <a href=\"#!/api/Ext.data.writer.Xml-cfg-documentRoot\" rel=\"Ext.data.writer.Xml-cfg-documentRoot\" class=\"docClass\">documentRoot</a> is empty and a root is required\nto form a valid XML document.</p>\n"},"documentRoot":{"!type":"string","!doc":"<p>The name of the root element of the document. Defaults to <tt>'xmlData'</tt>.\nIf there is more than 1 record and the root is not specified, the default document root will still be used\nto ensure a valid XML document is created.</p>\n"},"header":{"!type":"string","!doc":"<p>A header to use in the XML document (such as setting the encoding or version).\nDefaults to <tt>''</tt>.</p>\n"},"record":{"!type":"string","!doc":"<p>The name of the node to use for each record. Defaults to <tt>'record'</tt>.</p>\n"},"writeRecords":{"!type":"fn(request: ?, data: ?) -> !this","!doc":"<p>inherit docs</p>\n"}}}}},"dd":{"DD":{"!doc":"<p>A DragDrop implementation where the linked element follows the\nmouse cursor during a drag.</p>\n","!type":"fn(id: string, sGroup: string, config: Ext_dd_DD_cfg)","prototype":{"!proto":"Ext.dd.DragDrop.prototype","scroll":{"!type":"bool","!doc":"<p>When set to true, the utility automatically tries to scroll the browser\nwindow when a drag and drop element is dragged near the viewport boundary.</p>\n"},"alignElWithMouse":{"!type":"fn(el: +HTMLElement, iPageX: number, iPageY: number) -> !this","!doc":"<p>Sets the element to the location of the mousedown or click event,\nmaintaining the cursor location relative to the location on the element\nthat was clicked.  Override this if you want to place the element in a\nlocation other than where the cursor is.</p>\n"},"applyConfig":{"!type":"fn() -> !this","!doc":"<p>Sets up config options specific to this class. Overrides\n<a href=\"#!/api/Ext.dd.DragDrop\" rel=\"Ext.dd.DragDrop\" class=\"docClass\">Ext.dd.DragDrop</a>, but all versions of this method through the\ninheritance chain are called</p>\n"},"autoOffset":{"!type":"fn(iPageX: number, iPageY: number) -> !this","!doc":"<p>Sets the pointer offset to the distance between the linked element's top\nleft corner and the location the element was clicked.</p>\n"},"autoScroll":{"!type":"fn(x: number, y: number, h: number, w: number) -> !this","!doc":"<p>Auto-scroll the window if the dragged object has been moved beyond the\nvisible window boundary.</p>\n"},"b4Drag":{"!type":"fn(e: ?) -> !this","!doc":"<p>Event that fires prior to the onDrag event.  Overrides\n<a href=\"#!/api/Ext.dd.DragDrop\" rel=\"Ext.dd.DragDrop\" class=\"docClass\">Ext.dd.DragDrop</a>.</p>\n"},"b4MouseDown":{"!type":"fn(e: ?) -> !this","!doc":"<p>Event that fires prior to the onMouseDown event.  Overrides\n<a href=\"#!/api/Ext.dd.DragDrop\" rel=\"Ext.dd.DragDrop\" class=\"docClass\">Ext.dd.DragDrop</a>.</p>\n"},"cachePosition":{"!type":"fn(iPageX?: number, iPageY?: number) -> !this","!doc":"<p>Saves the most recent position so that we can reset the constraints and\ntick marks on-demand.  We need to know this so that we can calculate the\nnumber of pixels the element is offset from its original position.</p>\n"},"getLocalX":{"!type":"fn(el: ?) -> !this"},"getTargetCoord":{"!type":"fn(iPageX: number, iPageY: number) -> ?","!doc":"<p>Finds the location the element should be placed if we want to move\nit to where the mouse location less the click offset would place us.</p>\n"},"setDelta":{"!type":"fn(iDeltaX: number, iDeltaY: number) -> !this","!doc":"<p>Sets the pointer offset.  You can call this directly to force the\noffset to be in a particular location (e.g., pass in 0,0 to set it\nto the center of the object)</p>\n"},"setDragElPos":{"!type":"fn(iPageX: number, iPageY: number) -> !this","!doc":"<p>Sets the drag element to the location of the mousedown or click event,\nmaintaining the cursor location relative to the location on the element\nthat was clicked.  Override this if you want to place the element in a\nlocation other than where the cursor is.</p>\n"},"setLocalXY":{"!type":"fn(el: ?, x: ?, y: ?) -> !this"},"toString":{"!type":"fn() -> string","!doc":"<p>toString method</p>\n"}}},"DDProxy":{"!doc":"<p>A DragDrop implementation that inserts an empty, bordered div into\nthe document that follows the cursor during drag operations.  At the time of\nthe click, the frame div is resized to the dimensions of the linked html\nelement, and moved to the exact location of the linked element.</p>\n\n<p>References to the \"frame\" element refer to the single proxy element that\nwas created to be dragged in place of all DDProxy elements on the\npage.</p>\n","!type":"fn(id: string, sGroup: string, config: Ext_dd_DDProxy_cfg)","prototype":{"!proto":"Ext.dd.DD.prototype","centerFrame":{"!type":"bool","!doc":"<p>By default the frame is positioned exactly where the drag element is, so\nwe use the cursor offset provided by <a href=\"#!/api/Ext.dd.DD\" rel=\"Ext.dd.DD\" class=\"docClass\">Ext.dd.DD</a>.  Another option that works only if\nyou do not have constraints on the obj is to have the drag frame centered\naround the cursor.  Set centerFrame to true for this effect.</p>\n"},"resizeFrame":{"!type":"bool","!doc":"<p>By default we resize the drag frame to be the same size as the element\nwe want to drag (this is to get the frame effect).  We can turn it off\nif we want a different behavior.</p>\n"},"_resizeProxy":{"!type":"fn() -> !this","!doc":"<p>The proxy is automatically resized to the dimensions of the linked\nelement when a drag is initiated, unless resizeFrame is set to false</p>\n"},"afterDrag":{"!type":"fn() -> !this"},"applyConfig":{"!type":"fn() -> !this","!doc":"<p>Sets up config options specific to this class. Overrides\n<a href=\"#!/api/Ext.dd.DragDrop\" rel=\"Ext.dd.DragDrop\" class=\"docClass\">Ext.dd.DragDrop</a>, but all versions of this method through the\ninheritance chain are called</p>\n"},"b4EndDrag":{"!type":"fn(e: ?) -> !this","!doc":"<p>overrides <a href=\"#!/api/Ext.dd.DragDrop\" rel=\"Ext.dd.DragDrop\" class=\"docClass\">Ext.dd.DragDrop</a></p>\n"},"b4MouseDown":{"!type":"fn(e: ?) -> !this","!doc":"<p>overrides <a href=\"#!/api/Ext.dd.DragDrop\" rel=\"Ext.dd.DragDrop\" class=\"docClass\">Ext.dd.DragDrop</a></p>\n"},"b4StartDrag":{"!type":"fn(x: ?, y: ?) -> !this","!doc":"<p>overrides <a href=\"#!/api/Ext.dd.DragDrop\" rel=\"Ext.dd.DragDrop\" class=\"docClass\">Ext.dd.DragDrop</a></p>\n"},"beforeMove":{"!type":"fn() -> !this"},"createFrame":{"!type":"fn() -> !this","!doc":"<p>Creates the proxy element if it does not yet exist</p>\n"},"endDrag":{"!type":"fn(e: ?) -> !this","!doc":"<p>overrides <a href=\"#!/api/Ext.dd.DragDrop\" rel=\"Ext.dd.DragDrop\" class=\"docClass\">Ext.dd.DragDrop</a>\nBy default we try to move the element to the last location of the frame.\nThis is so that the default behavior mirrors that of <a href=\"#!/api/Ext.dd.DD\" rel=\"Ext.dd.DD\" class=\"docClass\">Ext.dd.DD</a>.</p>\n"},"initFrame":{"!type":"fn() -> !this","!doc":"<p>Initialization for the drag frame element.  Must be called in the\nconstructor of all subclasses</p>\n"},"showFrame":{"!type":"fn(iPageX: number, iPageY: number) -> !this","!doc":"<p>Resizes the drag frame to the dimensions of the clicked object, positions\nit over the object, and finally displays it</p>\n"},"toString":{"!type":"fn() -> string","!doc":"<p>toString method</p>\n"}},"dragElId":{"!type":"string","!doc":"<p>The default drag frame div id</p>\n"}},"DDTarget":{"!doc":"<p>A DragDrop implementation that does not move, but can be a drop\ntarget.  You would get the same result by simply omitting implementation\nfor the event callbacks, but this way we reduce the processing cost of the\nevent listener and the callbacks.</p>\n","!type":"fn(id: string, sGroup: string, config: Ext_dd_DDTarget_cfg)","prototype":{"!proto":"Ext.dd.DragDrop.prototype","addInvalidHandleClass":{"!type":"fn() -> !this","!doc":"<p>Overridden and disabled. A DDTarget does not support being dragged.</p>\n"},"addInvalidHandleId":{"!type":"fn() -> !this","!doc":"<p>Overridden and disabled. A DDTarget does not support being dragged.</p>\n"},"addInvalidHandleType":{"!type":"fn() -> !this","!doc":"<p>Overridden and disabled. A DDTarget does not support being dragged.</p>\n"},"clearConstraints":{"!type":"fn() -> !this","!doc":"<p>Overridden and disabled. A DDTarget does not support being dragged.</p>\n"},"clearTicks":{"!type":"fn() -> !this","!doc":"<p>Overridden and disabled. A DDTarget does not support being dragged.</p>\n"},"endDrag":{"!type":"fn() -> !this","!doc":"<p>Overridden and disabled. A DDTarget does not support being dragged.</p>\n"},"getDragEl":{"!type":"fn() -> !this","!doc":"<p>Overridden and disabled. A DDTarget does not support being dragged.</p>\n"},"isValidHandleChild":{"!type":"fn() -> !this","!doc":"<p>Overridden and disabled. A DDTarget does not support being dragged.</p>\n"},"onDrag":{"!type":"fn() -> !this","!doc":"<p>Overridden and disabled. A DDTarget does not support being dragged.</p>\n"},"onDragDrop":{"!type":"fn() -> !this","!doc":"<p>Overridden and disabled. A DDTarget does not support being dragged.</p>\n"},"onDragEnter":{"!type":"fn() -> !this","!doc":"<p>Overridden and disabled. A DDTarget does not support being dragged.</p>\n"},"onDragOut":{"!type":"fn() -> !this","!doc":"<p>Overridden and disabled. A DDTarget does not support being dragged.</p>\n"},"onDragOver":{"!type":"fn() -> !this","!doc":"<p>Overridden and disabled. A DDTarget does not support being dragged.</p>\n"},"onInvalidDrop":{"!type":"fn() -> !this","!doc":"<p>Overridden and disabled. A DDTarget does not support being dragged.</p>\n"},"onMouseDown":{"!type":"fn() -> !this","!doc":"<p>Overridden and disabled. A DDTarget does not support being dragged.</p>\n"},"onMouseUp":{"!type":"fn() -> !this","!doc":"<p>Overridden and disabled. A DDTarget does not support being dragged.</p>\n"},"removeInvalidHandleClass":{"!type":"fn() -> !this","!doc":"<p>Overridden and disabled. A DDTarget does not support being dragged.</p>\n"},"removeInvalidHandleId":{"!type":"fn() -> !this","!doc":"<p>Overridden and disabled. A DDTarget does not support being dragged.</p>\n"},"removeInvalidHandleType":{"!type":"fn() -> !this","!doc":"<p>Overridden and disabled. A DDTarget does not support being dragged.</p>\n"},"resetConstraints":{"!type":"fn() -> !this","!doc":"<p>Overridden and disabled. A DDTarget does not support being dragged.</p>\n"},"setDragElId":{"!type":"fn() -> !this","!doc":"<p>Overridden and disabled. A DDTarget does not support being dragged.</p>\n"},"setHandleElId":{"!type":"fn() -> !this","!doc":"<p>Overridden and disabled. A DDTarget does not support being dragged.</p>\n"},"setInitPosition":{"!type":"fn() -> !this","!doc":"<p>Overridden and disabled. A DDTarget does not support being dragged.</p>\n"},"setOuterHandleElId":{"!type":"fn() -> !this","!doc":"<p>Overridden and disabled. A DDTarget does not support being dragged.</p>\n"},"setXConstraint":{"!type":"fn() -> !this","!doc":"<p>Overridden and disabled. A DDTarget does not support being dragged.</p>\n"},"setYConstraint":{"!type":"fn() -> !this","!doc":"<p>Overridden and disabled. A DDTarget does not support being dragged.</p>\n"},"startDrag":{"!type":"fn() -> !this","!doc":"<p>Overridden and disabled. A DDTarget does not support being dragged.</p>\n"},"toString":{"!type":"fn() -> string","!doc":"<p>toString method</p>\n"}}},"DragDrop":{"!doc":"<p>Defines the interface and base operation of items that that can be\ndragged or can be drop targets.  It was designed to be extended, overriding\nthe event handlers for startDrag, onDrag, onDragOver and onDragOut.\nUp to three html elements can be associated with a DragDrop instance:</p>\n\n<ul>\n<li><p>linked element: the element that is passed into the constructor.\nThis is the element which defines the boundaries for interaction with\nother DragDrop objects.</p></li>\n<li><p>handle element(s): The drag operation only occurs if the element that\nwas clicked matches a handle element.  By default this is the linked\nelement, but there are times that you will want only a portion of the\nlinked element to initiate the drag operation, and the setHandleElId()\nmethod provides a way to define this.</p></li>\n<li><p>drag element: this represents the element that would be moved along\nwith the cursor during a drag operation.  By default, this is the linked\nelement itself as in <a href=\"#!/api/Ext.dd.DD\" rel=\"Ext.dd.DD\" class=\"docClass\">Ext.dd.DD</a>.  setDragElId() lets you define\na separate element that would be moved, as in <a href=\"#!/api/Ext.dd.DDProxy\" rel=\"Ext.dd.DDProxy\" class=\"docClass\">Ext.dd.DDProxy</a>.</p></li>\n</ul>\n\n\n<p>This class should not be instantiated until the onload event to ensure that\nthe associated elements are available.\nThe following would define a DragDrop obj that would interact with any\nother DragDrop obj in the \"group1\" group:</p>\n\n<pre><code>dd = new <a href=\"#!/api/Ext.dd.DragDrop\" rel=\"Ext.dd.DragDrop\" class=\"docClass\">Ext.dd.DragDrop</a>(\"div1\", \"group1\");\n</code></pre>\n\n<p>Since none of the event handlers have been implemented, nothing would\nactually happen if you were to run the code above.  Normally you would\noverride this class or one of the default implementations, but you can\nalso override the methods you want on an instance of the class...</p>\n\n<pre><code>dd.onDragDrop = function(e, id) {\n    alert(\"dd was dropped on \" + id);\n}\n</code></pre>\n","!type":"fn(id: string, sGroup: string, config: Ext_dd_DragDrop_cfg)","prototype":{"!proto":"Ext.Base.prototype","__ygDragDrop":{"!type":"bool","!doc":"<p>Internal typeof flag</p>\n"},"_domRef":{"!type":"?","!doc":"<p>Cached reference to the linked element</p>\n"},"available":{"!type":"bool","!doc":"<p>The available property is false until the linked dom element is accessible.</p>\n"},"config":{"!type":"?","!doc":"<p>Configuration attributes passed into the constructor</p>\n"},"constrainX":{"!type":"bool","!doc":"<p>Set to true when horizontal contraints are applied</p>\n"},"constrainY":{"!type":"bool","!doc":"<p>Set to true when vertical contraints are applied</p>\n"},"defaultPadding":{"!type":"?","!doc":"<p>Provides default constraint padding to \"constrainTo\" elements.</p>\n"},"dragElId":{"!type":"string","!doc":"<p>The id of the element that will be dragged.  By default this is same\nas the linked element, but could be changed to another element. Ex:\n<a href=\"#!/api/Ext.dd.DDProxy\" rel=\"Ext.dd.DDProxy\" class=\"docClass\">Ext.dd.DDProxy</a></p>\n"},"groups":{"!type":"?","!doc":"<p>The group defines a logical collection of DragDrop objects that are\nrelated.  Instances only get events when interacting with other\nDragDrop object in the same group.  This lets us define multiple\ngroups using a single DragDrop subclass if we want.</p>\n\n<p>An object in the format {'group1':true, 'group2':true}</p>\n"},"handleElId":{"!type":"string","!doc":"<p>The ID of the element that initiates the drag operation.  By default\nthis is the linked element, but could be changed to be a child of this\nelement.  This lets us do things like only starting the drag when the\nheader element within the linked html element is clicked.</p>\n"},"hasOuterHandles":{"!type":"bool","!doc":"<p>By default, drags can only be initiated if the mousedown occurs in the\nregion the linked element is.  This is done in part to work around a\nbug in some browsers that mis-report the mousedown if the previous\nmouseup happened outside of the window.  This property is set to true\nif outer handles are defined. Defaults to false.</p>\n"},"id":{"!type":"string","!doc":"<p>The id of the element associated with this object.  This is what we\nrefer to as the \"linked element\" because the size and position of\nthis element is used to determine when the drag and drop objects have\ninteracted.</p>\n"},"ignoreSelf":{"!type":"bool","!doc":"<p>Set to false to enable a DragDrop object to fire drag events while dragging\nover its own Element. Defaults to true - DragDrop objects do not by default\nfire drag events to themselves.</p>\n"},"invalidHandleClasses":{"!type":"[string]","!doc":"<p>An Array of CSS class names for elements to be considered in valid as drag handles.</p>\n"},"invalidHandleIds":{"!type":"?","!doc":"<p>An object who's property names identify the IDs of elements to be considered invalid as drag handles.\nA non-null property value identifies the ID as invalid. For example, to prevent\ndragging from being initiated on element ID \"foo\", use:</p>\n\n<pre><code>{\n    foo: true\n}\n</code></pre>\n"},"invalidHandleTypes":{"!type":"?","!doc":"<p>An object who's property names identify HTML tags to be considered invalid as drag handles.\nA non-null property value identifies the tag as invalid. Defaults to the\nfollowing value which prevents drag operations from being initiated by <code>&lt;a&gt;</code> elements:</p>\n\n<pre><code>{\n    A: \"A\"\n}\n</code></pre>\n"},"isTarget":{"!type":"bool","!doc":"<p>By default, all instances can be a drop target.  This can be disabled by\nsetting isTarget to false.</p>\n"},"locked":{"!type":"bool","!doc":"<p>Individual drag/drop instances can be locked.  This will prevent\nonmousedown start drag.</p>\n"},"maintainOffset":{"!type":"bool","!doc":"<p>Maintain offsets when we resetconstraints.  Set to true when you want\nthe position of the element relative to its parent to stay the same\nwhen the page changes</p>\n"},"maxX":{"!type":"number","!doc":"<p>The right constraint</p>\n"},"maxY":{"!type":"number","!doc":"<p>The down constraint</p>\n"},"minX":{"!type":"number","!doc":"<p>The left constraint</p>\n"},"minY":{"!type":"number","!doc":"<p>The up constraint</p>\n"},"moveOnly":{"!type":"bool","!doc":"<p>When set to true, other DD objects in cooperating DDGroups do not receive\nnotification events when this DD object is dragged over them.</p>\n"},"padding":{"!type":"[number]","!doc":"<p>The padding configured for this drag and drop object for calculating\nthe drop zone intersection with this object.\nAn array containing the 4 padding values: [top, right, bottom, left]</p>\n"},"primaryButtonOnly":{"!type":"bool","!doc":"<p>By default the drag and drop instance will only respond to the primary\nbutton click (left button for a right-handed mouse).  Set to true to\nallow drag and drop to start with any mouse click that is propogated\nby the browser</p>\n"},"startPageX":{"!type":"number","!doc":"<p>The linked element's absolute X position at the time the drag was\nstarted</p>\n"},"startPageY":{"!type":"number","!doc":"<p>The linked element's absolute X position at the time the drag was\nstarted</p>\n"},"xTicks":{"!type":"[number]","!doc":"<p>Array of pixel locations the element will snap to if we specified a\nhorizontal graduation/interval.  This array is generated automatically\nwhen you define a tick interval.</p>\n"},"yTicks":{"!type":"[number]","!doc":"<p>Array of pixel locations the element will snap to if we specified a\nvertical graduation/interval.  This array is generated automatically\nwhen you define a tick interval.</p>\n"},"addInvalidHandleClass":{"!type":"fn(cssClass: string) -> !this","!doc":"<p>Lets you specify a css class of elements that will not initiate a drag</p>\n"},"addInvalidHandleId":{"!type":"fn(id: string) -> !this","!doc":"<p>Lets you to specify an element id for a child of a drag handle\nthat should not initiate a drag</p>\n"},"addInvalidHandleType":{"!type":"fn(tagName: string) -> !this","!doc":"<p>Allows you to specify a tag name that should not start a drag operation\nwhen clicked.  This is designed to facilitate embedding links within a\ndrag handle that do something other than start the drag.</p>\n"},"addToGroup":{"!type":"fn(sGroup: string) -> !this","!doc":"<p>Adds this instance to a group of related drag/drop objects.  All\ninstances belong to at least one group, and can belong to as many\ngroups as needed.</p>\n"},"applyConfig":{"!type":"fn() -> !this","!doc":"<p>Applies the configuration parameters that were passed into the constructor.\nThis is supposed to happen at each level through the inheritance chain.  So\na DDProxy implentation will execute apply config on DDProxy, DD, and\nDragDrop in order to get all of the parameters that are available in\neach object.</p>\n"},"b4Drag":{"!type":"fn(e: ?) -> !this","!doc":"<p>Code that executes immediately before the onDrag event</p>\n"},"b4DragDrop":{"!type":"fn(e: ?) -> !this","!doc":"<p>Code that executes immediately before the onDragDrop event</p>\n"},"b4DragOut":{"!type":"fn(e: ?) -> !this","!doc":"<p>Code that executes immediately before the onDragOut event</p>\n"},"b4DragOver":{"!type":"fn(e: ?) -> !this","!doc":"<p>Code that executes immediately before the onDragOver event</p>\n"},"b4EndDrag":{"!type":"fn(e: ?) -> !this","!doc":"<p>Code that executes immediately before the endDrag event</p>\n"},"b4MouseDown":{"!type":"fn(e: +Event) -> !this","!doc":"<p>Code executed immediately before the onMouseDown event</p>\n"},"b4StartDrag":{"!type":"fn(x: ?, y: ?) -> !this","!doc":"<p>Code that executes immediately before the startDrag event</p>\n"},"clearConstraints":{"!type":"fn() -> !this","!doc":"<p>Clears any constraints applied to this instance.  Also clears ticks\nsince they can't exist independent of a constraint at this time.</p>\n"},"clearTicks":{"!type":"fn() -> !this","!doc":"<p>Clears any tick interval defined for this instance</p>\n"},"clickValidator":{"!type":"fn(e: ?) -> !this"},"constrainTo":{"!type":"fn(constrainTo: string|+HTMLElement|+Ext.Element, pad?: ?|number, inContent?: bool) -> !this","!doc":"<p>Initializes the drag drop object's constraints to restrict movement to a certain element.</p>\n\n<p>Usage:</p>\n\n<pre><code>var dd = new <a href=\"#!/api/Ext.dd.DDProxy\" rel=\"Ext.dd.DDProxy\" class=\"docClass\">Ext.dd.DDProxy</a>(\"dragDiv1\", \"proxytest\",\n               { dragElId: \"existingProxyDiv\" });\ndd.startDrag = function(){\n    this.constrainTo(\"parent-id\");\n};\n</code></pre>\n\n<p>Or you can initalize it using the <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a> object:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-get\" rel=\"Ext-method-get\" class=\"docClass\">Ext.get</a>(\"dragDiv1\").initDDProxy(\"proxytest\", {dragElId: \"existingProxyDiv\"}, {\n    startDrag : function(){\n        this.constrainTo(\"parent-id\");\n    }\n});\n</code></pre>\n"},"destroy":{"!type":"fn() -> !this","!doc":"<p>Destroy this DragDrop instance</p>\n"},"endDrag":{"!type":"fn(e: +Event) -> !this","!doc":"<p>Called when we are done dragging the object</p>\n"},"getDragEl":{"!type":"fn() -> +HTMLElement","!doc":"<p>Returns a reference to the actual element to drag.  By default this is\nthe same as the html element, but it can be assigned to another\nelement. An example of this can be found in <a href=\"#!/api/Ext.dd.DDProxy\" rel=\"Ext.dd.DDProxy\" class=\"docClass\">Ext.dd.DDProxy</a></p>\n"},"getEl":{"!type":"fn() -> +HTMLElement","!doc":"<p>Returns a reference to the linked element</p>\n"},"getTick":{"!type":"fn(val: number, tickArray: [number]) -> number","!doc":"<p>Normally the drag element is moved pixel by pixel, but we can specify\nthat it move a number of pixels at a time.  This method resolves the\nlocation when we have it set up like this.</p>\n"},"handleMouseDown":{"!type":"fn(e: +Event, oDD: +Ext.dd.DragDrop) -> !this","!doc":"<p>Called when this object is clicked</p>\n"},"handleOnAvailable":{"!type":"fn() -> !this","!doc":"<p>Executed when the linked element is available</p>\n"},"init":{"!type":"fn(id: string, sGroup: string, config: ?) -> !this","!doc":"<p>Sets up the DragDrop object.  Must be called in the constructor of any\n<a href=\"#!/api/Ext.dd.DragDrop\" rel=\"Ext.dd.DragDrop\" class=\"docClass\">Ext.dd.DragDrop</a> subclass</p>\n"},"initTarget":{"!type":"fn(id: string, sGroup: string, config: ?) -> !this","!doc":"<p>Initializes Targeting functionality only... the object does not\nget a mousedown handler.</p>\n"},"isLocked":{"!type":"fn() -> bool","!doc":"<p>Returns true if this instance is locked, or the drag drop mgr is locked\n(meaning that all drag/drop is disabled on the page.)</p>\n"},"isValidHandleChild":{"!type":"fn(node: +HTMLElement) -> bool","!doc":"<p>Checks the tag exclusion list to see if this click should be ignored</p>\n"},"lock":{"!type":"fn() -> !this","!doc":"<p>Locks this instance</p>\n"},"onAvailable":{"!type":"fn() -> !this","!doc":"<p>Override the onAvailable method to do what is needed after the initial\nposition was determined.</p>\n"},"onDrag":{"!type":"fn(e: +Event) -> !this","!doc":"<p>Abstract method called during the onMouseMove event while dragging an\nobject.</p>\n"},"onDragDrop":{"!type":"fn(e: +Event, id: string|[+Ext.dd.DragDrop]) -> !this","!doc":"<p>Abstract method called when this item is dropped on another DragDrop\nobj</p>\n"},"onDragEnter":{"!type":"fn(e: +Event, id: string|[+Ext.dd.DragDrop]) -> !this","!doc":"<p>Abstract method called when this element fist begins hovering over\nanother DragDrop obj</p>\n"},"onDragOut":{"!type":"fn(e: +Event, id: string|[+Ext.dd.DragDrop]) -> !this","!doc":"<p>Abstract method called when we are no longer hovering over an element</p>\n"},"onDragOver":{"!type":"fn(e: +Event, id: string|[+Ext.dd.DragDrop]) -> !this","!doc":"<p>Abstract method called when this element is hovering over another\nDragDrop obj</p>\n"},"onInvalidDrop":{"!type":"fn(e: +Event) -> !this","!doc":"<p>Abstract method called when this item is dropped on an area with no\ndrop target</p>\n"},"onMouseDown":{"!type":"fn(e: +Event) -> !this","!doc":"<p>Called when a drag/drop obj gets a mousedown</p>\n"},"onMouseUp":{"!type":"fn(e: +Event) -> !this","!doc":"<p>Called when a drag/drop obj gets a mouseup</p>\n"},"removeFromGroup":{"!type":"fn(sGroup: string) -> !this","!doc":"<p>Removes this instance from the supplied interaction group</p>\n"},"removeInvalidHandleClass":{"!type":"fn(cssClass: string) -> !this","!doc":"<p>Unsets an invalid css class</p>\n"},"removeInvalidHandleId":{"!type":"fn(id: string) -> !this","!doc":"<p>Unsets an invalid handle id</p>\n"},"removeInvalidHandleType":{"!type":"fn(tagName: string) -> !this","!doc":"<p>Unsets an excluded tag name set by addInvalidHandleType</p>\n"},"resetConstraints":{"!type":"fn(maintainOffset: bool) -> !this","!doc":"<p>Must be called if you manually reposition a dd element.</p>\n"},"setDragElId":{"!type":"fn(id: string) -> !this","!doc":"<p>Allows you to specify that an element other than the linked element\nwill be moved with the cursor during a drag</p>\n"},"setHandleElId":{"!type":"fn(id: string) -> !this","!doc":"<p>Allows you to specify a child of the linked element that should be\nused to initiate the drag operation.  An example of this would be if\nyou have a content div with text and links.  Clicking anywhere in the\ncontent area would normally start the drag operation.  Use this method\nto specify that an element inside of the content div is the element\nthat starts the drag operation.</p>\n"},"setInitPosition":{"!type":"fn(diffX: number, diffY: number) -> !this","!doc":"<p>Stores the initial placement of the linked element.</p>\n"},"setOuterHandleElId":{"!type":"fn(id: string) -> !this","!doc":"<p>Allows you to set an element outside of the linked element as a drag\nhandle</p>\n"},"setPadding":{"!type":"fn(iTop: number, iRight: number, iBot: number, iLeft: number) -> !this","!doc":"<p>Configures the padding for the target zone in px.  Effectively expands\n(or reduces) the virtual object size for targeting calculations.\nSupports css-style shorthand; if only one parameter is passed, all sides\nwill have that padding, and if only two are passed, the top and bottom\nwill have the first param, the left and right the second.</p>\n"},"setStartPosition":{"!type":"fn(pos: ?) -> !this","!doc":"<p>Sets the start position of the element.  This is set when the obj\nis initialized, the reset when a drag is started.</p>\n"},"setXConstraint":{"!type":"fn(iLeft: number, iRight: number, iTickSize?: number) -> !this","!doc":"<p>By default, the element can be dragged any place on the screen.  Use\nthis method to limit the horizontal travel of the element.  Pass in\n0,0 for the parameters if you want to lock the drag to the y axis.</p>\n"},"setXTicks":{"!type":"fn(iStartX: ?, iTickSize: ?) -> !this","!doc":"<p>Creates the array of horizontal tick marks if an interval was specified\nin setXConstraint().</p>\n"},"setYConstraint":{"!type":"fn(iUp: number, iDown: number, iTickSize?: number) -> !this","!doc":"<p>By default, the element can be dragged any place on the screen.  Set\nthis to limit the vertical travel of the element.  Pass in 0,0 for the\nparameters if you want to lock the drag to the x axis.</p>\n"},"setYTicks":{"!type":"fn(iStartY: ?, iTickSize: ?) -> !this","!doc":"<p>Creates the array of vertical tick marks if an interval was specified in\nsetYConstraint().</p>\n"},"startDrag":{"!type":"fn(x: number, y: number) -> !this","!doc":"<p>Abstract method called after a drag/drop object is clicked\nand the drag or mousedown time thresholds have beeen met.</p>\n"},"toString":{"!type":"fn() -> string","!doc":"<p>toString method</p>\n"},"unlock":{"!type":"fn() -> !this","!doc":"<p>Unlocks this instace</p>\n"},"unreg":{"!type":"fn() -> !this","!doc":"<p>Removes all drag and drop hooks for this element</p>\n"}}},"DragDropElement":{"prototype":{"_timeoutCount":{"!type":"number","!doc":"<p>Internal counter</p>\n"},"_addListeners":{"!type":"fn() -> !this","!doc":"<p>Trying to make the load order less important.  Without this we get\nan error if this file is loaded before the Event Utility.</p>\n"},"getPosX":{"!type":"fn(el: +HTMLElement) -> number","!doc":"<p>Returns the X position of an html element</p>\n"},"getPosY":{"!type":"fn(el: +HTMLElement) -> number","!doc":"<p>Returns the Y position of an html element</p>\n"},"getScroll":{"!type":"fn() -> !this","!doc":"<p>Returns the current scroll position</p>\n"},"getScrollLeft":{"!type":"fn() -> number","!doc":"<p>Gets the scrollLeft</p>\n"},"getScrollTop":{"!type":"fn() -> number","!doc":"<p>Gets the scrollTop</p>\n"},"getStyle":{"!type":"fn(el: +HTMLElement, styleProp: string) -> string","!doc":"<p>Returns the specified element style property</p>\n"},"handleWasClicked":{"!type":"fn(node: +HTMLElement) -> !this","!doc":"<p>Recursively searches the immediate parent and all child nodes for\nthe handle element in order to determine wheter or not it was\nclicked.</p>\n"},"moveToEl":{"!type":"fn(moveEl: +HTMLElement, targetEl: +HTMLElement) -> !this","!doc":"<p>Sets the x/y position of an element to the location of the\ntarget element.</p>\n"},"numericSort":{"!type":"fn(a: number, b: number) -> number","!doc":"<p>Numeric array sort function</p>\n"},"swapNode":{"!type":"fn(n1: +HTMLElement, n2: +HTMLElement) -> !this","!doc":"<p>Swap two nodes.  In IE, we use the native method, for others we\nemulate the IE behavior</p>\n"}}},"DragDropManager":{"ElementWrapper":{"!doc":"<p>Deprecated inner class for cached elements.</p>\n","prototype":{"css":{"!type":"?","!doc":"<p>A reference to the style property</p>\n"},"el":{"!type":"?","!doc":"<p>The element</p>\n"},"id":{"!type":"?","!doc":"<p>The element id</p>\n"}}},"!doc":"<p>DragDropManager is a singleton that tracks the element interaction for\nall DragDrop items in the window.  Generally, you will not call\nthis class directly, but it does have helper methods that could\nbe useful in your DragDrop implementations.</p>\n","INTERSECT":{"!type":"number","!doc":"<p>In intersect mode, drag and drop interaction is defined by the\noverlap of two or more drag and drop objects.</p>\n"},"POINT":{"!type":"number","!doc":"<p>In point mode, drag and drop interaction is defined by the\nlocation of the cursor during the drag/drop</p>\n"},"clickPixelThresh":{"!type":"number","!doc":"<p>The number of pixels that the mouse needs to move after the\nmousedown before the drag is initiated.  Default=3;</p>\n"},"clickTimeThresh":{"!type":"number","!doc":"<p>The number of milliseconds after the mousedown event to initiate the\ndrag if we don't get a mouseup event. Default=350</p>\n"},"clickTimeout":{"!type":"?","!doc":"<p>Timeout used for the click time threshold</p>\n"},"deltaX":{"!type":"number","!doc":"<p>the X distance between the cursor and the object being dragged</p>\n"},"deltaY":{"!type":"number","!doc":"<p>the Y distance between the cursor and the object being dragged</p>\n"},"dragCls":{"!type":"string","!doc":"<p>Class to add to the <a href=\"#!/api/Ext.dd.DragDrop-method-getDragEl\" rel=\"Ext.dd.DragDrop-method-getDragEl\" class=\"docClass\">dragged element</a> of a DragDrop instance.</p>\n"},"dragCurrent":{"!type":"+Ext.dd.DragDrop","!doc":"<p>the DragDrop object that is currently being dragged</p>\n"},"dragOvers":{"!type":"[+Ext.dd.DragDrop]","!doc":"<p>the DragDrop object(s) that are being hovered over</p>\n"},"dragThreshMet":{"!type":"bool","!doc":"<p>Flag that indicates that either the drag pixel threshold or the\nmousdown time threshold has been met</p>\n"},"elementCache":{"!type":"?","!doc":"<p>A cache of DOM elements</p>\n"},"handleIds":{"!type":"[string]","!doc":"<p>Array of element ids defined as drag handles.  Used to determine\nif the element that generated the mousedown event is actually the\nhandle and not the html element itself.</p>\n"},"ids":{"!type":"[string]","!doc":"<p>Two dimensional Array of registered DragDrop objects.  The first\ndimension is the DragDrop item group, the second the DragDrop\nobject.</p>\n"},"initialized":{"!type":"bool","!doc":"<p>Internal flag that is set to true when drag and drop has been\nintialized</p>\n"},"locationCache":{"!type":"?","!doc":"<p>Location cache that is set for all drag drop objects when a drag is\ninitiated, cleared when the drag is finished.</p>\n"},"locked":{"!type":"bool","!doc":"<p>All drag and drop can be disabled.</p>\n"},"mode":{"!type":"number","!doc":"<p>The current drag and drop mode.  Default: POINT</p>\n"},"notifyOccluded":{"!type":"bool","!doc":"<p>This config is only provided to provide old, usually unwanted drag/drop behaviour.</p>\n\n<p>From ExtJS 4.1.0 onwards, when drop targets are contained in floating, absolutely positioned elements\nsuch as in <a href=\"#!/api/Ext.window.Window\" rel=\"Ext.window.Window\" class=\"docClass\">Windows</a>, which may overlap each other, <code>over</code> and <code>drop</code> events\nare only delivered to the topmost drop target at the mouse position.</p>\n\n<p>If all targets below that in zIndex order should also receive notifications, set\n<code>notifyOccluded</code> to <code>true</code>.</p>\n"},"preventDefault":{"!type":"bool","!doc":"<p>Flag to determine if we should prevent the default behavior of the\nevents we define. By default this is true, but this can be set to\nfalse if you need the default behavior (not recommended)</p>\n"},"startX":{"!type":"number","!doc":"<p>The X position of the mousedown event stored for later use when a\ndrag threshold is met.</p>\n"},"startY":{"!type":"number","!doc":"<p>The Y position of the mousedown event stored for later use when a\ndrag threshold is met.</p>\n"},"stopPropagation":{"!type":"bool","!doc":"<p>Flag to determine if we should stop the propagation of the events\nwe generate. This is true by default but you may want to set it to\nfalse if the html element contains other features that require the\nmouse click.</p>\n"},"useCache":{"!type":"bool","!doc":"<p>Set useCache to false if you want to force object the lookup of each\ndrag and drop linked element constantly during a drag.</p>\n"},"_execOnAll":{"!type":"fn(sMethod: ?, args: ?) -> !this","!doc":"<p>Runs method on all drag and drop objects</p>\n"},"_onLoad":{"!type":"fn() -> !this","!doc":"<p>Drag and drop initialization.  Sets up the global event handlers</p>\n"},"_onResize":{"!type":"fn(e: ?) -> !this","!doc":"<p>Reset constraints on all drag and drop objs</p>\n"},"_onUnload":{"!type":"fn(e: ?, me: ?) -> !this","!doc":"<p>unload event handler</p>\n"},"_remove":{"!type":"fn(oDD: ?) -> !this","!doc":"<p>Unregisters a drag and drop item.  This is executed in\nDragDrop.unreg, use that method instead of calling this directly.</p>\n"},"byZIndex":{"!type":"fn(d1: ?, d2: ?) -> !this","!doc":"<p>Utility method to pass to <a href=\"#!/api/Ext.Array-method-sort\" rel=\"Ext.Array-method-sort\" class=\"docClass\">Ext.Array.sort</a> when sorting potential drop targets by z-index.</p>\n"},"fireEvents":{"!type":"fn(e: +Event, isDrop: bool) -> !this","!doc":"<p>Iterates over all of the DragDrop elements to find ones we are\nhovering over or dropping on</p>\n"},"getBestMatch":{"!type":"fn(dds: [+Ext.dd.DragDrop]) -> +Ext.dd.DragDrop","!doc":"<p>Helper function for getting the best match from the list of drag\nand drop objects returned by the drag and drop events when we are\nin INTERSECT mode.  It returns either the first object that the\ncursor is over, or the object that has the greatest overlap with\nthe dragged element.</p>\n"},"getCss":{"!type":"fn(id: string) -> ?","!doc":"<p>Returns the style property for the DOM element (i.e.,\ndocument.getElById(id).style)</p>\n"},"getDDById":{"!type":"fn(id: string) -> +Ext.dd.DragDrop","!doc":"<p>Returns the DragDrop instance for a given id</p>\n"},"getElWrapper":{"!type":"fn(id: string) -> +Ext.dd.DragDropManager.ElementWrapper","!doc":"<p>Get the wrapper for the DOM element specified</p>\n"},"getElement":{"!type":"fn(id: string) -> ?","!doc":"<p>Returns the actual DOM element</p>\n"},"getLocation":{"!type":"fn(oDD: +Ext.dd.DragDrop) -> +Ext.util.Region","!doc":"<p>Returns a Region object containing the drag and drop element's position\nand size, including the padding configured for it</p>\n"},"getRelated":{"!type":"fn(p_oDD: +Ext.dd.DragDrop, bTargetsOnly: bool) -> [+Ext.dd.DragDrop]","!doc":"<p>Returns the drag and drop instances that are in all groups the\npassed in instance belongs to.</p>\n"},"getZIndex":{"!type":"fn(element: ?) -> number","!doc":"<p>Collects the z-index of the passed element, looking up the parentNode axis to find an absolutely positioned ancestor\nwhich is able to yield a z-index. If found to be not absolutely positionedm returns -1.</p>\n\n<p>This is used when sorting potential drop targets into z-index order so that only the topmost receives <code>over</code> and <code>drop</code> events.</p>\n"},"handleMouseDown":{"!type":"fn(e: +Event, oDD: +Ext.dd.DragDrop) -> !this","!doc":"<p>Fired after a registered DragDrop object gets the mousedown event.\nSets up the events required to track the object being dragged</p>\n"},"handleMouseMove":{"!type":"fn(e: +Event) -> !this","!doc":"<p>Internal function to handle the mousemove event.  Will be invoked\nfrom the context of the html element.</p>\n\n<p>TODO: figure out what we can do about mouse events lost when the\nuser drags objects beyond the window boundary.  Currently we can\ndetect this in internet explorer by verifying that the mouse is\ndown during the mousemove event.  Firefox doesn't give us the\nbutton state on the mousemove event.</p>\n"},"handleMouseUp":{"!type":"fn(e: +Event) -> !this","!doc":"<p>Internal function to handle the mouseup event.  Will be invoked\nfrom the context of the document.</p>\n"},"init":{"!type":"fn() -> !this","!doc":"<p>Called the first time an element is registered.</p>\n"},"isDragDrop":{"!type":"fn(id: string) -> bool","!doc":"<p>Utility function to determine if a given element has been\nregistered as a drag drop item.</p>\n"},"isHandle":{"!type":"fn(id: string) -> bool","!doc":"<p>Utility function to determine if a given element has been\nregistered as a drag drop handle for the given Drag Drop object.</p>\n"},"isLegalTarget":{"!type":"fn(oDD: +Ext.dd.DragDrop, oTargetDD: +Ext.dd.DragDrop) -> bool","!doc":"<p>Returns true if the specified dd target is a legal target for\nthe specifice drag obj</p>\n"},"isLocked":{"!type":"fn() -> bool","!doc":"<p>Is drag and drop locked?</p>\n"},"isOverTarget":{"!type":"fn(pt: +Ext.util.Point, oTarget: +Ext.dd.DragDrop) -> bool","!doc":"<p>Checks the cursor location to see if it over the target</p>\n"},"isTypeOfDD":{"!type":"fn(the: ?) -> bool","!doc":"<p>My goal is to be able to transparently determine if an object is\ntypeof DragDrop, and the exact subclass of DragDrop.  typeof\nreturns \"object\", oDD.constructor.toString() always returns\n\"DragDrop\" and not the name of the subclass.  So for now it just\nevaluates a well-known variable in DragDrop.</p>\n"},"lock":{"!type":"fn() -> !this","!doc":"<p>Lock all drag and drop functionality</p>\n"},"refreshCache":{"!type":"fn(groups: ?) -> !this","!doc":"<p>Refreshes the cache of the top-left and bottom-right points of the\ndrag and drop objects in the specified group(s).  This is in the\nformat that is stored in the drag and drop instance, so typical\nusage is:</p>\n\n<pre><code><a href=\"#!/api/Ext.dd.DragDropManager-method-refreshCache\" rel=\"Ext.dd.DragDropManager-method-refreshCache\" class=\"docClass\">Ext.dd.DragDropManager.refreshCache</a>(ddinstance.groups);\n</code></pre>\n\n<p>Alternatively:</p>\n\n<pre><code><a href=\"#!/api/Ext.dd.DragDropManager-method-refreshCache\" rel=\"Ext.dd.DragDropManager-method-refreshCache\" class=\"docClass\">Ext.dd.DragDropManager.refreshCache</a>({group1:true, group2:true});\n</code></pre>\n\n<p>TODO: this really should be an indexed array.  Alternatively this\nmethod could accept both.</p>\n"},"regDragDrop":{"!type":"fn(oDD: +Ext.dd.DragDrop, sGroup: string) -> !this","!doc":"<p>Each DragDrop instance must be registered with the DragDropManager.\nThis is executed in DragDrop.init()</p>\n"},"regHandle":{"!type":"fn(sDDId: string, sHandleId: string) -> !this","!doc":"<p>Each DragDrop handle element must be registered.  This is done\nautomatically when executing DragDrop.setHandleElId()</p>\n"},"removeDDFromGroup":{"!type":"fn(oDD: ?, sGroup: ?) -> !this","!doc":"<p>Removes the supplied dd instance from the supplied group. Executed\nby DragDrop.removeFromGroup, so don't call this function directly.</p>\n"},"startDrag":{"!type":"fn(x: number, y: number) -> !this","!doc":"<p>Fired when either the drag pixel threshold or the mousedown hold\ntime threshold has been met.</p>\n"},"stopDrag":{"!type":"fn(e: +Event) -> !this","!doc":"<p>Internal function to clean up event handlers after the drag\noperation is complete</p>\n"},"stopEvent":{"!type":"fn(e: +Event) -> !this","!doc":"<p>Utility to stop event propagation and event default, if these\nfeatures are turned on.</p>\n"},"unlock":{"!type":"fn() -> !this","!doc":"<p>Unlock all drag and drop functionality</p>\n"},"unregAll":{"!type":"fn() -> !this","!doc":"<p>Cleans up the drag and drop events and objects.</p>\n"},"verifyEl":{"!type":"fn(el: +HTMLElement) -> bool","!doc":"<p>This checks to make sure an element exists and is in the DOM.  The\nmain purpose is to handle cases where innerHTML is used to remove\ndrag and drop objects from the DOM.  IE provides an 'unspecified\nerror' when trying to access the offsetParent of such an element</p>\n"}},"DragSource":{"!doc":"<p>A simple class that provides the basic implementation needed to make any element draggable.</p>\n","!type":"fn(el: string|+HTMLElement|+Ext.Element, config?: Ext_dd_DragSource_cfg)","prototype":{"!proto":"Ext.dd.DDProxy.prototype","animRepair":{"!type":"bool","!doc":"<p>If true, animates the proxy element back to the position of the handle element used to trigger the drag.</p>\n"},"ddGroup":{"!type":"string","!doc":"<p>A named drag drop group to which this object belongs.  If a group is specified, then this object will only\ninteract with other drag drop objects in the same group.</p>\n"},"dropAllowed":{"!type":"string","!doc":"<p>The CSS class returned to the drag source when drop is allowed.</p>\n"},"dropNotAllowed":{"!type":"string","!doc":"<p>The CSS class returned to the drag source when drop is not allowed.</p>\n"},"repairHighlightColor":{"!type":"string","!doc":"<p>The color to use when visually highlighting the drag source in the afterRepair\nmethod after a failed drop (defaults to light blue). The color must be a 6 digit hex value, without\na preceding '#'.</p>\n"},"dragData":{"!type":"?","!doc":"<p>This property contains the data representing the dragged object. This data is set up by the implementation of the\n<a href=\"#!/api/Ext.dd.DragSource-method-getDragData\" rel=\"Ext.dd.DragSource-method-getDragData\" class=\"docClass\">getDragData</a> method. It must contain a ddel property, but can contain any other data according to the\napplication's needs.</p>\n"},"afterDragDrop":{"!type":"fn(target: +Ext.dd.DragDrop, e: +Event, id: string)","!doc":"<p>An empty function by default, but provided so that you can perform a custom action\nafter a valid drag drop has occurred by providing an implementation.</p>\n"},"afterDragEnter":{"!type":"fn(target: +Ext.dd.DragDrop, e: +Event, id: string)","!doc":"<p>An empty function by default, but provided so that you can perform a custom action\nwhen the dragged item enters the drop target by providing an implementation.</p>\n"},"afterDragOut":{"!type":"fn(target: +Ext.dd.DragDrop, e: +Event, id: string)","!doc":"<p>An empty function by default, but provided so that you can perform a custom action\nafter the dragged item is dragged out of the target without dropping.</p>\n"},"afterDragOver":{"!type":"fn(target: +Ext.dd.DragDrop, e: +Event, id: string)","!doc":"<p>An empty function by default, but provided so that you can perform a custom action\nwhile the dragged item is over the drop target by providing an implementation.</p>\n"},"afterInvalidDrop":{"!type":"fn(e: +Event, id: string)","!doc":"<p>An empty function by default, but provided so that you can perform a custom action\nafter an invalid drop has occurred by providing an implementation.</p>\n"},"afterRepair":{"!type":"fn() -> !this"},"afterValidDrop":{"!type":"fn(target: ?, e: +Event, id: string)","!doc":"<p>An empty function by default, but provided so that you can perform a custom action\nafter a valid drop has occurred by providing an implementation.</p>\n"},"alignElWithMouse":{"!type":"fn() -> !this","!doc":"<p>Sets the element to the location of the mousedown or click event,\nmaintaining the cursor location relative to the location on the element\nthat was clicked.  Override this if you want to place the element in a\nlocation other than where the cursor is.</p>\n"},"autoOffset":{"!type":"fn(x: ?, y: ?) -> !this","!doc":"<p>Sets the pointer offset to the distance between the linked element's top\nleft corner and the location the element was clicked.</p>\n"},"b4EndDrag":{"!type":"fn(e: ?) -> !this","!doc":"<p>overrides <a href=\"#!/api/Ext.dd.DragDrop\" rel=\"Ext.dd.DragDrop\" class=\"docClass\">Ext.dd.DragDrop</a></p>\n"},"beforeDragDrop":{"!type":"fn(target: +Ext.dd.DragDrop, e: +Event, id: string) -> bool","!doc":"<p>An empty function by default, but provided so that you can perform a custom action before the dragged\nitem is dropped onto the target and optionally cancel the onDragDrop.</p>\n"},"beforeDragEnter":{"!type":"fn(target: +Ext.dd.DragDrop, e: +Event, id: string) -> bool","!doc":"<p>An empty function by default, but provided so that you can perform a custom action\nbefore the dragged item enters the drop target and optionally cancel the onDragEnter.</p>\n"},"beforeDragOut":{"!type":"fn(target: +Ext.dd.DragDrop, e: +Event, id: string) -> bool","!doc":"<p>An empty function by default, but provided so that you can perform a custom action before the dragged\nitem is dragged out of the target without dropping, and optionally cancel the onDragOut.</p>\n"},"beforeDragOver":{"!type":"fn(target: +Ext.dd.DragDrop, e: +Event, id: string) -> bool","!doc":"<p>An empty function by default, but provided so that you can perform a custom action\nwhile the dragged item is over the drop target and optionally cancel the onDragOver.</p>\n"},"beforeInvalidDrop":{"!type":"fn(target: +Ext.dd.DragDrop, e: +Event, id: string) -> bool","!doc":"<p>An empty function by default, but provided so that you can perform a custom action after an invalid\ndrop has occurred.</p>\n"},"destroy":{"!type":"fn() -> !this","!doc":"<p>Destroy this DragDrop instance</p>\n"},"endDrag":{"!type":"fn(e: ?) -> !this","!doc":"<p>overrides <a href=\"#!/api/Ext.dd.DragDrop\" rel=\"Ext.dd.DragDrop\" class=\"docClass\">Ext.dd.DragDrop</a>\nBy default we try to move the element to the last location of the frame.\nThis is so that the default behavior mirrors that of <a href=\"#!/api/Ext.dd.DD\" rel=\"Ext.dd.DD\" class=\"docClass\">Ext.dd.DD</a>.</p>\n"},"getDragData":{"!type":"fn(e: ?) -> ?","!doc":"<p>Returns the data object associated with this drag source</p>\n"},"getProxy":{"!type":"fn() -> +Ext.dd.StatusProxy","!doc":"<p>Returns the drag source's underlying <a href=\"#!/api/Ext.dd.StatusProxy\" rel=\"Ext.dd.StatusProxy\" class=\"docClass\">Ext.dd.StatusProxy</a></p>\n"},"getRepairXY":{"!type":"fn(e: ?, data: ?) -> !this"},"handleMouseDown":{"!type":"fn(e: +Event, oDD: +Ext.dd.DragDrop) -> !this","!doc":"<p>Called when this object is clicked</p>\n"},"hideProxy":{"!type":"fn() -> !this","!doc":"<p>Hides the drag source's <a href=\"#!/api/Ext.dd.StatusProxy\" rel=\"Ext.dd.StatusProxy\" class=\"docClass\">Ext.dd.StatusProxy</a></p>\n"},"onBeforeDrag":{"!type":"fn(data: ?, e: +Event) -> bool","!doc":"<p>An empty function by default, but provided so that you can perform a custom action before the initial\ndrag event begins and optionally cancel it.</p>\n"},"onDragDrop":{"!type":"fn(e: ?, id: ?) -> !this","!doc":"<p>Abstract method called when this item is dropped on another DragDrop\nobj</p>\n"},"onDragEnter":{"!type":"fn(e: ?, id: ?) -> !this","!doc":"<p>Abstract method called when this element fist begins hovering over\nanother DragDrop obj</p>\n"},"onDragOut":{"!type":"fn(e: ?, id: ?) -> !this","!doc":"<p>Abstract method called when we are no longer hovering over an element</p>\n"},"onDragOver":{"!type":"fn(e: ?, id: ?) -> !this","!doc":"<p>Abstract method called when this element is hovering over another\nDragDrop obj</p>\n"},"onEndDrag":{"!type":"fn(data: ?, e: ?) -> !this"},"onInitDrag":{"!type":"fn(x: ?, y: ?) -> !this"},"onInvalidDrop":{"!type":"fn(target: ?, e: ?, id: ?) -> !this","!doc":"<p>Abstract method called when this item is dropped on an area with no\ndrop target</p>\n"},"onStartDrag":{"!type":"fn(x: number, y: number) -> !this","!doc":"<p>An empty function by default, but provided so that you can perform a custom action once the initial\ndrag event has begun.  The drag cannot be canceled from this function.</p>\n"},"onValidDrop":{"!type":"fn(target: ?, e: ?, id: ?) -> !this"},"startDrag":{"!type":"fn(x: ?, y: ?) -> !this","!doc":"<p>Abstract method called after a drag/drop object is clicked\nand the drag or mousedown time thresholds have beeen met.</p>\n"},"triggerCacheRefresh":{"!type":"fn() -> !this"}}},"DragTracker":{"!doc":"<p>A DragTracker listens for drag events on an Element and fires events at the start and end of the drag,\nas well as during the drag. This is useful for components such as <a href=\"#!/api/Ext.slider.Multi\" rel=\"Ext.slider.Multi\" class=\"docClass\">Ext.slider.Multi</a>, where there is\nan element that can be dragged around to change the Slider's value.</p>\n\n<p>DragTracker provides a series of template methods that should be overridden to provide functionality\nin response to detected drag operations. These are onBeforeStart, onStart, onDrag and onEnd.\nSee <a href=\"#!/api/Ext.slider.Multi\" rel=\"Ext.slider.Multi\" class=\"docClass\">Ext.slider.Multi</a>'s initEvents function for an example implementation.</p>\n","prototype":{"autoStart":{"!type":"bool|number","!doc":"<p>Specify <code>true</code> to defer trigger start by 1000 ms.\nSpecify a Number for the number of milliseconds to defer trigger start.</p>\n"},"constrainTo":{"!type":"+Ext.util.Region|+Ext.Element","!doc":"<p>A <a href=\"#!/api/Ext.util.Region\" rel=\"Ext.util.Region\" class=\"docClass\">Region</a> (Or an element from which a Region measurement will be read)\nwhich is used to constrain the result of the <a href=\"#!/api/Ext.dd.DragTracker-method-getOffset\" rel=\"Ext.dd.DragTracker-method-getOffset\" class=\"docClass\">getOffset</a> call.</p>\n\n<p>This may be set any time during the DragTracker's lifecycle to set a dynamic constraining region.</p>\n"},"delegate":{"!type":"string","!doc":"<p>A <a href=\"#!/api/Ext.dom.Query\" rel=\"Ext.dom.Query\" class=\"docClass\">DomQuery</a> selector which identifies child elements within the DragTracker's encapsulating\nElement which are the tracked elements. This limits tracking to only begin when the matching elements are mousedowned.</p>\n\n<p>This may also be a specific child element within the DragTracker's encapsulating element to use as the tracked element.</p>\n"},"overCls":{"!type":"string","!doc":"<p>A CSS class to add to the DragTracker's target element when the element (or, if the <a href=\"#!/api/Ext.dd.DragTracker-cfg-delegate\" rel=\"Ext.dd.DragTracker-cfg-delegate\" class=\"docClass\">delegate</a>\noption is used, when a delegate element) is mouseovered.</p>\n\n<p>If the <a href=\"#!/api/Ext.dd.DragTracker-cfg-delegate\" rel=\"Ext.dd.DragTracker-cfg-delegate\" class=\"docClass\">delegate</a> option is used, these events fire only when a delegate element is entered of left.</p>\n"},"preventDefault":{"!type":"bool","!doc":"<p>Specify <code>false</code> to enable default actions on onMouseDown events.</p>\n"},"stopEvent":{"!type":"bool","!doc":"<p>Specify <code>true</code> to stop the <code>mousedown</code> event from bubbling to outer listeners from the target element (or its delegates).</p>\n"},"tolerance":{"!type":"number","!doc":"<p>Number of pixels the drag target must be moved before dragging is\nconsidered to have started.</p>\n"},"trackOver":{"!type":"bool","!doc":"<p>Set to true to fire mouseover and mouseout events when the mouse enters or leaves the target element.</p>\n\n<p>This is implicitly set when an <a href=\"#!/api/Ext.dd.DragTracker-cfg-overCls\" rel=\"Ext.dd.DragTracker-cfg-overCls\" class=\"docClass\">overCls</a> is specified.</p>\n\n<p>If the <a href=\"#!/api/Ext.dd.DragTracker-cfg-delegate\" rel=\"Ext.dd.DragTracker-cfg-delegate\" class=\"docClass\">delegate</a> option is used, these events fire only when a delegate element is entered of left.</p>\n"},"active":{"!type":"bool","!doc":"<p>Indicates whether the user is currently dragging this tracker.</p>\n"},"constrainModes":{"!type":"?"},"dragTarget":{"!type":"+HTMLElement","!doc":"<p>The element being dragged.</p>\n\n<p>Only valid during drag operations.</p>\n\n<p>If the <a href=\"#!/api/Ext.dd.DragTracker-cfg-delegate\" rel=\"Ext.dd.DragTracker-cfg-delegate\" class=\"docClass\">delegate</a> option is used, this will be the delegate element which was mousedowned.</p>\n"},"clearStart":{"!type":"fn() -> !this"},"destroy":{"!type":"fn() -> !this"},"disable":{"!type":"fn() -> !this"},"enable":{"!type":"fn() -> !this"},"endDrag":{"!type":"fn(e: ?) -> !this","!doc":"<p>Stop the drag operation, and remove active mouse listeners.</p>\n"},"getConstrainRegion":{"!type":"fn() -> !this","!doc":"<p>Return the Region into which the drag operation is constrained.\nEither the XY pointer itself can be constrained, or the dragTarget element\nThe private property _constrainRegion is cached until onMouseUp</p>\n"},"getDragCt":{"!type":"fn() -> +Ext.Element"},"getDragTarget":{"!type":"fn() -> +Ext.Element","!doc":"<p>Returns the drag target. This is usually the DragTracker's encapsulating element.</p>\n\n<p>If the <a href=\"#!/api/Ext.dd.DragTracker-cfg-delegate\" rel=\"Ext.dd.DragTracker-cfg-delegate\" class=\"docClass\">delegate</a> option is being used, this may be a child element which matches the\n<a href=\"#!/api/Ext.dd.DragTracker-cfg-delegate\" rel=\"Ext.dd.DragTracker-cfg-delegate\" class=\"docClass\">delegate</a> selector.</p>\n"},"getOffset":{"!type":"fn(constrainMode?: string) -> [number]","!doc":"<p>Returns the X, Y offset of the current mouse position from the mousedown point.</p>\n\n<p>This method may optionally constrain the real offset values, and returns a point coerced in one\nof two modes:</p>\n\n<ul>\n<li><code>point</code>\nThe current mouse position is coerced into the constrainRegion and the resulting position is returned.</li>\n<li><code>dragTarget</code>\nThe new <a href=\"#!/api/Ext.util.Region\" rel=\"Ext.util.Region\" class=\"docClass\">Region</a> of the <a href=\"#!/api/Ext.dd.DragTracker-method-getDragTarget\" rel=\"Ext.dd.DragTracker-method-getDragTarget\" class=\"docClass\">dragTarget</a> is calculated\nbased upon the current mouse position, and then coerced into the constrainRegion. The returned\nmouse position is then adjusted by the same delta as was used to coerce the region.\\</li>\n</ul>\n\n"},"getXY":{"!type":"fn(constrain: ?) -> !this"},"initEl":{"!type":"fn(el: +Ext.Element|+HTMLElement) -> !this","!doc":"<p>Initializes the DragTracker on a given element.</p>\n"},"onBeforeStart":{"!type":"fn(e: +Ext.EventObject) -> !this","!doc":"<p>Template method which should be overridden by each DragTracker instance. Called when the user first clicks and\nholds the mouse button down. Return false to disallow the drag</p>\n"},"onDrag":{"!type":"fn(e: +Ext.EventObject) -> !this","!doc":"<p>Template method which should be overridden by each DragTracker instance. Called whenever a drag has been detected.</p>\n"},"onEnd":{"!type":"fn(e: +Ext.EventObject) -> !this","!doc":"<p>Template method which should be overridden by each DragTracker instance. Called when a drag operation has been completed\n(e.g. the user clicked and held the mouse down, dragged the element and then released the mouse button)</p>\n"},"onMouseDown":{"!type":"fn(e: ?, target: ?) -> !this"},"onMouseMove":{"!type":"fn(e: ?, target: ?) -> !this"},"onMouseOut":{"!type":"fn(e: ?) -> !this","!doc":"<p>When the pointer exits a tracking element, fire a mouseout.\nThis is mouseleave functionality, but we cannot use mouseleave because we are using \"delegate\" to filter mouse targets</p>\n"},"onMouseOver":{"!type":"fn(e: ?, target: ?) -> !this","!doc":"<p>When the pointer enters a tracking element, fire a mouseover if the mouse entered from outside.\nThis is mouseenter functionality, but we cannot use mouseenter because we are using \"delegate\" to filter mouse targets</p>\n"},"onMouseUp":{"!type":"fn(e: ?) -> !this"},"onStart":{"!type":"fn(e: +Ext.EventObject) -> !this","!doc":"<p>Template method which should be overridden by each DragTracker instance. Called when a drag operation starts\n(e.g. the user has moved the tracked element beyond the specified tolerance)</p>\n"},"stopSelect":{"!type":"fn(e: ?) -> !this"},"triggerStart":{"!type":"fn(e: ?) -> !this"},"beforestart":{"!type":"fn(this: ?, e: ?, eOpts: ?)"},"drag":{"!type":"fn(this: ?, e: ?, eOpts: ?)"},"dragend":{"!type":"fn(this: ?, e: ?, eOpts: ?)"},"dragstart":{"!type":"fn(this: ?, e: ?, eOpts: ?)"},"mousedown":{"!type":"fn(this: ?, e: ?, eOpts: ?)","!doc":"<p>Fires when the mouse button is pressed down, but before a drag operation begins. The\ndrag operation begins after either the mouse has been moved by <a href=\"#!/api/Ext.dd.DragTracker-cfg-tolerance\" rel=\"Ext.dd.DragTracker-cfg-tolerance\" class=\"docClass\">tolerance</a> pixels,\nor after the <a href=\"#!/api/Ext.dd.DragTracker-cfg-autoStart\" rel=\"Ext.dd.DragTracker-cfg-autoStart\" class=\"docClass\">autoStart</a> timer fires.</p>\n\n<p>Return <code>false</code> to veto the drag operation.</p>\n"},"mousemove":{"!type":"fn(this: ?, e: ?, eOpts: ?)","!doc":"<p>Fired when the mouse is moved. Returning false cancels the drag operation.</p>\n"},"mouseout":{"!type":"fn(this: ?, e: ?, eOpts: ?)","!doc":"<p>Fires when the mouse exits the DragTracker's target element (or if <a href=\"#!/api/Ext.dd.DragTracker-cfg-delegate\" rel=\"Ext.dd.DragTracker-cfg-delegate\" class=\"docClass\">delegate</a> is\nused, when the mouse exits a delegate element).</p>\n\n<p><strong>Only available when <a href=\"#!/api/Ext.dd.DragTracker-cfg-trackOver\" rel=\"Ext.dd.DragTracker-cfg-trackOver\" class=\"docClass\">trackOver</a> is <code>true</code></strong></p>\n"},"mouseover":{"!type":"fn(this: ?, e: ?, target: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when the mouse enters the DragTracker's target element (or if <a href=\"#!/api/Ext.dd.DragTracker-cfg-delegate\" rel=\"Ext.dd.DragTracker-cfg-delegate\" class=\"docClass\">delegate</a> is\nused, when the mouse enters a delegate element).</p>\n\n<p><strong>Only available when <a href=\"#!/api/Ext.dd.DragTracker-cfg-trackOver\" rel=\"Ext.dd.DragTracker-cfg-trackOver\" class=\"docClass\">trackOver</a> is <code>true</code></strong></p>\n"},"mouseup":{"!type":"fn(this: ?, e: ?, eOpts: ?)"}}},"DragZone":{"!doc":"<p>This class provides a container DD instance that allows dragging of multiple child source nodes.</p>\n\n<p>This class does not move the drag target nodes, but a proxy element which may contain any DOM structure you wish. The\nDOM element to show in the proxy is provided by either a provided implementation of <a href=\"#!/api/Ext.dd.DragZone-method-getDragData\" rel=\"Ext.dd.DragZone-method-getDragData\" class=\"docClass\">getDragData</a>, or by\nregistered draggables registered with <a href=\"#!/api/Ext.dd.Registry\" rel=\"Ext.dd.Registry\" class=\"docClass\">Ext.dd.Registry</a></p>\n\n<p>If you wish to provide draggability for an arbitrary number of DOM nodes, each of which represent some application\nobject (For example nodes in a <a href=\"#!/api/Ext.view.View\" rel=\"Ext.view.View\" class=\"docClass\">DataView</a>) then use of this class is the most efficient way to\n\"activate\" those nodes.</p>\n\n<p>By default, this class requires that draggable child nodes are registered with <a href=\"#!/api/Ext.dd.Registry\" rel=\"Ext.dd.Registry\" class=\"docClass\">Ext.dd.Registry</a>. However a\nsimpler way to allow a DragZone to manage any number of draggable elements is to configure the DragZone with an\nimplementation of the <a href=\"#!/api/Ext.dd.DragZone-method-getDragData\" rel=\"Ext.dd.DragZone-method-getDragData\" class=\"docClass\">getDragData</a> method which interrogates the passed mouse event to see if it has taken\nplace within an element, or class of elements. This is easily done by using the event's <a href=\"#!/api/Ext.EventObject-method-getTarget\" rel=\"Ext.EventObject-method-getTarget\" class=\"docClass\">getTarget</a> method to identify a node based on a <a href=\"#!/api/Ext.dom.Query\" rel=\"Ext.dom.Query\" class=\"docClass\">Ext.DomQuery</a> selector. For example,\nto make the nodes of a DataView draggable, use the following technique. Knowledge of the use of the DataView is\nrequired:</p>\n\n<pre><code>myDataView.on('render', function(v) {\n    myDataView.dragZone = new <a href=\"#!/api/Ext.dd.DragZone\" rel=\"Ext.dd.DragZone\" class=\"docClass\">Ext.dd.DragZone</a>(v.getEl(), {\n\n//      On receipt of a mousedown event, see if it is within a DataView node.\n//      Return a drag data object if so.\n        getDragData: function(e) {\n\n//          Use the DataView's own itemSelector (a mandatory property) to\n//          test if the mousedown is within one of the DataView's nodes.\n            var sourceEl = e.getTarget(v.itemSelector, 10);\n\n//          If the mousedown is within a DataView node, clone the node to produce\n//          a ddel element for use by the drag proxy. Also add application data\n//          to the returned data object.\n            if (sourceEl) {\n                d = sourceEl.cloneNode(true);\n                d.id = <a href=\"#!/api/Ext-method-id\" rel=\"Ext-method-id\" class=\"docClass\">Ext.id</a>();\n                return {\n                    ddel: d,\n                    sourceEl: sourceEl,\n                    repairXY: <a href=\"#!/api/Ext-method-fly\" rel=\"Ext-method-fly\" class=\"docClass\">Ext.fly</a>(sourceEl).getXY(),\n                    sourceStore: v.store,\n                    draggedRecord: v.<a href=\"#!/api/Ext.view.View-method-getRecord\" rel=\"Ext.view.View-method-getRecord\" class=\"docClass\">getRecord</a>(sourceEl)\n                }\n            }\n        },\n\n//      Provide coordinates for the proxy to slide back to on failed drag.\n//      This is the original XY coordinates of the draggable element captured\n//      in the getDragData method.\n        getRepairXY: function() {\n            return this.dragData.repairXY;\n        }\n    });\n});\n</code></pre>\n\n<p>See the <a href=\"#!/api/Ext.dd.DropZone\" rel=\"Ext.dd.DropZone\" class=\"docClass\">DropZone</a> documentation for details about building a DropZone which cooperates with\nthis DragZone.</p>\n","!type":"fn(el: string|+HTMLElement|+Ext.Element, config: Ext_dd_DragZone_cfg)","prototype":{"!proto":"Ext.dd.DragSource.prototype","containerScroll":{"!type":"?|bool","!doc":"<p>True to register this container with the Scrollmanager for auto scrolling during drag operations.\nA <a href=\"#!/api/Ext.dd.ScrollManager\" rel=\"Ext.dd.ScrollManager\" class=\"docClass\">Ext.dd.ScrollManager</a> configuration may also be passed.</p>\n"},"scrollEl":{"!type":"string|+HTMLElement|+Ext.dom.Element","!doc":"<p>An element to register with the ScrollManager if <a href=\"#!/api/Ext.dd.DragZone-cfg-containerScroll\" rel=\"Ext.dd.DragZone-cfg-containerScroll\" class=\"docClass\">containerScroll</a>\nis set. Defaults to the drag element.</p>\n"},"destroy":{"!type":"fn() -> !this","!doc":"<p>Destroy this DragDrop instance</p>\n"},"getDragData":{"!type":"fn(e: +Event) -> ?","!doc":"<p>Called when a mousedown occurs in this container. Looks in <a href=\"#!/api/Ext.dd.Registry\" rel=\"Ext.dd.Registry\" class=\"docClass\">Ext.dd.Registry</a> for a valid target to drag\nbased on the mouse down. Override this method to provide your own lookup logic (e.g. finding a child by class\nname). Make sure your returned object has a \"ddel\" attribute (with an HTML Element) for other functions to work.</p>\n"},"getRepairXY":{"!type":"fn(e: +Event) -> [number]","!doc":"<p>Called before a repair of an invalid drop to get the XY to animate to. By default returns the XY of\nthis.dragData.ddel</p>\n"},"onInitDrag":{"!type":"fn(x: number, y: number) -> bool","!doc":"<p>Called once drag threshold has been reached to initialize the proxy element. By default, it clones the\nthis.dragData.ddel</p>\n"}}},"DropTarget":{"!doc":"<p>A simple class that provides the basic implementation needed to make any element a drop target that can have\ndraggable items dropped onto it.  The drop has no effect until an implementation of notifyDrop is provided.</p>\n","!type":"fn(el: string|+HTMLElement|+Ext.Element, config: Ext_dd_DropTarget_cfg)","prototype":{"!proto":"Ext.dd.DDTarget.prototype","ddGroup":{"!type":"string","!doc":"<p>A named drag drop group to which this object belongs.  If a group is specified, then this object will only\ninteract with other drag drop objects in the same group.</p>\n"},"dropAllowed":{"!type":"string","!doc":"<p>The CSS class returned to the drag source when drop is allowed.</p>\n"},"dropNotAllowed":{"!type":"string","!doc":"<p>The CSS class returned to the drag source when drop is not allowed.</p>\n"},"overClass":{"!type":"string","!doc":"<p>The CSS class applied to the drop target element while the drag source is over it.</p>\n"},"isNotifyTarget":{"!type":"bool","!doc":"<p>private</p>\n"},"isTarget":{"!type":"bool","!doc":"<p>private</p>\n"},"destroy":{"!type":"fn() -> !this","!doc":"<p>Destroy this DragDrop instance</p>\n"},"notifyDrop":{"!type":"fn(source: +Ext.dd.DragSource, e: +Event, data: ?) -> bool","!doc":"<p>The function a <a href=\"#!/api/Ext.dd.DragSource\" rel=\"Ext.dd.DragSource\" class=\"docClass\">Ext.dd.DragSource</a> calls once to notify this drop target that the dragged item has\nbeen dropped on it.  This method has no default implementation and returns false, so you must provide an\nimplementation that does something to process the drop event and returns true so that the drag source's\nrepair action does not run.</p>\n"},"notifyEnter":{"!type":"fn(source: +Ext.dd.DragSource, e: +Event, data: ?) -> string","!doc":"<p>The function a <a href=\"#!/api/Ext.dd.DragSource\" rel=\"Ext.dd.DragSource\" class=\"docClass\">Ext.dd.DragSource</a> calls once to notify this drop target that the source is now over the\ntarget.  This default implementation adds the CSS class specified by overClass (if any) to the drop element\nand returns the dropAllowed config value.  This method should be overridden if drop validation is required.</p>\n"},"notifyOut":{"!type":"fn(source: +Ext.dd.DragSource, e: +Event, data: ?) -> !this","!doc":"<p>The function a <a href=\"#!/api/Ext.dd.DragSource\" rel=\"Ext.dd.DragSource\" class=\"docClass\">Ext.dd.DragSource</a> calls once to notify this drop target that the source has been dragged\nout of the target without dropping.  This default implementation simply removes the CSS class specified by\noverClass (if any) from the drop element.</p>\n"},"notifyOver":{"!type":"fn(source: +Ext.dd.DragSource, e: +Event, data: ?) -> string","!doc":"<p>The function a <a href=\"#!/api/Ext.dd.DragSource\" rel=\"Ext.dd.DragSource\" class=\"docClass\">Ext.dd.DragSource</a> calls continuously while it is being dragged over the target.\nThis method will be called on every mouse movement while the drag source is over the drop target.\nThis default implementation simply returns the dropAllowed config value.</p>\n"}}},"DropZone":{"!doc":"<p>This class provides a container DD instance that allows dropping on multiple child target nodes.</p>\n\n<p>By default, this class requires that child nodes accepting drop are registered with <a href=\"#!/api/Ext.dd.Registry\" rel=\"Ext.dd.Registry\" class=\"docClass\">Ext.dd.Registry</a>.\nHowever a simpler way to allow a DropZone to manage any number of target elements is to configure the\nDropZone with an implementation of <a href=\"#!/api/Ext.dd.DropZone-method-getTargetFromEvent\" rel=\"Ext.dd.DropZone-method-getTargetFromEvent\" class=\"docClass\">getTargetFromEvent</a> which interrogates the passed\nmouse event to see if it has taken place within an element, or class of elements. This is easily done\nby using the event's <a href=\"#!/api/Ext.EventObject-method-getTarget\" rel=\"Ext.EventObject-method-getTarget\" class=\"docClass\">getTarget</a> method to identify a node based on a\n<a href=\"#!/api/Ext.dom.Query\" rel=\"Ext.dom.Query\" class=\"docClass\">Ext.DomQuery</a> selector.</p>\n\n<p>Once the DropZone has detected through calling getTargetFromEvent, that the mouse is over\na drop target, that target is passed as the first parameter to <a href=\"#!/api/Ext.dd.DropZone-method-onNodeEnter\" rel=\"Ext.dd.DropZone-method-onNodeEnter\" class=\"docClass\">onNodeEnter</a>, <a href=\"#!/api/Ext.dd.DropZone-method-onNodeOver\" rel=\"Ext.dd.DropZone-method-onNodeOver\" class=\"docClass\">onNodeOver</a>,\n<a href=\"#!/api/Ext.dd.DropZone-method-onNodeOut\" rel=\"Ext.dd.DropZone-method-onNodeOut\" class=\"docClass\">onNodeOut</a>, <a href=\"#!/api/Ext.dd.DropZone-method-onNodeDrop\" rel=\"Ext.dd.DropZone-method-onNodeDrop\" class=\"docClass\">onNodeDrop</a>. You may configure the instance of DropZone with implementations\nof these methods to provide application-specific behaviour for these events to update both\napplication state, and UI state.</p>\n\n<p>For example to make a GridPanel a cooperating target with the example illustrated in\n<a href=\"#!/api/Ext.dd.DragZone\" rel=\"Ext.dd.DragZone\" class=\"docClass\">DragZone</a>, the following technique might be used:</p>\n\n<pre><code>myGridPanel.on('render', function() {\n    myGridPanel.dropZone = new <a href=\"#!/api/Ext.dd.DropZone\" rel=\"Ext.dd.DropZone\" class=\"docClass\">Ext.dd.DropZone</a>(myGridPanel.getView().scroller, {\n\n        // If the mouse is over a grid row, return that node. This is\n        // provided as the \"target\" parameter in all \"onNodeXXXX\" node event handling functions\n        getTargetFromEvent: function(e) {\n            return e.getTarget(myGridPanel.getView().rowSelector);\n        },\n\n        // On entry into a target node, highlight that node.\n        onNodeEnter : function(target, dd, e, data){\n            <a href=\"#!/api/Ext-method-fly\" rel=\"Ext-method-fly\" class=\"docClass\">Ext.fly</a>(target).addCls('my-row-highlight-class');\n        },\n\n        // On exit from a target node, unhighlight that node.\n        onNodeOut : function(target, dd, e, data){\n            <a href=\"#!/api/Ext-method-fly\" rel=\"Ext-method-fly\" class=\"docClass\">Ext.fly</a>(target).removeCls('my-row-highlight-class');\n        },\n\n        // While over a target node, return the default drop allowed class which\n        // places a \"tick\" icon into the drag proxy.\n        onNodeOver : function(target, dd, e, data){\n            return Ext.dd.DropZone.prototype.dropAllowed;\n        },\n\n        // On node drop we can interrogate the target to find the underlying\n        // application object that is the real target of the dragged data.\n        // In this case, it is a Record in the GridPanel's Store.\n        // We can use the data set up by the DragZone's getDragData method to read\n        // any data we decided to attach in the DragZone's getDragData method.\n        onNodeDrop : function(target, dd, e, data){\n            var rowIndex = myGridPanel.getView().findRowIndex(target);\n            var r = myGridPanel.getStore().getAt(rowIndex);\n            <a href=\"#!/api/Ext.MessageBox-method-alert\" rel=\"Ext.MessageBox-method-alert\" class=\"docClass\">Ext.Msg.alert</a>('Drop gesture', 'Dropped Record id ' + data.draggedRecord.id +\n                ' on Record id ' + r.id);\n            return true;\n        }\n    });\n}\n</code></pre>\n\n<p>See the <a href=\"#!/api/Ext.dd.DragZone\" rel=\"Ext.dd.DragZone\" class=\"docClass\">DragZone</a> documentation for details about building a DragZone which\ncooperates with this DropZone.</p>\n","!type":"fn(el: string|+HTMLElement|+Ext.Element, config: Ext_dd_DropZone_cfg)","prototype":{"!proto":"Ext.dd.DropTarget.prototype","getTargetFromEvent":{"!type":"fn(e: +Event) -> ?","!doc":"<p>Returns a custom data object associated with the DOM node that is the target of the event.  By default\nthis looks up the event target in the <a href=\"#!/api/Ext.dd.Registry\" rel=\"Ext.dd.Registry\" class=\"docClass\">Ext.dd.Registry</a>, although you can override this method to\nprovide your own custom lookup.</p>\n"},"notifyDrop":{"!type":"fn(source: +Ext.dd.DragSource, e: +Event, data: ?) -> bool","!doc":"<p>The function a <a href=\"#!/api/Ext.dd.DragSource\" rel=\"Ext.dd.DragSource\" class=\"docClass\">Ext.dd.DragSource</a> calls once to notify this drop zone that the dragged item has\nbeen dropped on it.  The drag zone will look up the target node based on the event passed in, and if there\nis a node registered for that event, it will delegate to <a href=\"#!/api/Ext.dd.DropZone-method-onNodeDrop\" rel=\"Ext.dd.DropZone-method-onNodeDrop\" class=\"docClass\">onNodeDrop</a> for node-specific handling,\notherwise it will call <a href=\"#!/api/Ext.dd.DropZone-method-onContainerDrop\" rel=\"Ext.dd.DropZone-method-onContainerDrop\" class=\"docClass\">onContainerDrop</a>.</p>\n"},"notifyEnter":{"!type":"fn(source: +Ext.dd.DragSource, e: +Event, data: ?) -> string","!doc":"<p>The function a <a href=\"#!/api/Ext.dd.DragSource\" rel=\"Ext.dd.DragSource\" class=\"docClass\">Ext.dd.DragSource</a> calls once to notify this drop zone that the source is now over\nthe zone.  The default implementation returns this.dropNotAllowed and expects that only registered drop\nnodes can process drag drop operations, so if you need the drop zone itself to be able to process drops\nyou should override this method and provide a custom implementation.</p>\n"},"notifyOut":{"!type":"fn(source: +Ext.dd.DragSource, e: +Event, data: ?) -> !this","!doc":"<p>The function a <a href=\"#!/api/Ext.dd.DragSource\" rel=\"Ext.dd.DragSource\" class=\"docClass\">Ext.dd.DragSource</a> calls once to notify this drop zone that the source has been dragged\nout of the zone without dropping.  If the drag source is currently over a registered node, the notification\nwill be delegated to <a href=\"#!/api/Ext.dd.DropZone-method-onNodeOut\" rel=\"Ext.dd.DropZone-method-onNodeOut\" class=\"docClass\">onNodeOut</a> for node-specific handling, otherwise it will be ignored.</p>\n"},"notifyOver":{"!type":"fn(source: +Ext.dd.DragSource, e: +Event, data: ?) -> string","!doc":"<p>The function a <a href=\"#!/api/Ext.dd.DragSource\" rel=\"Ext.dd.DragSource\" class=\"docClass\">Ext.dd.DragSource</a> calls continuously while it is being dragged over the drop zone.\nThis method will be called on every mouse movement while the drag source is over the drop zone.\nIt will call <a href=\"#!/api/Ext.dd.DropZone-method-onNodeOver\" rel=\"Ext.dd.DropZone-method-onNodeOver\" class=\"docClass\">onNodeOver</a> while the drag source is over a registered node, and will also automatically\ndelegate to the appropriate node-specific methods as necessary when the drag source enters and exits\nregistered nodes (<a href=\"#!/api/Ext.dd.DropZone-method-onNodeEnter\" rel=\"Ext.dd.DropZone-method-onNodeEnter\" class=\"docClass\">onNodeEnter</a>, <a href=\"#!/api/Ext.dd.DropZone-method-onNodeOut\" rel=\"Ext.dd.DropZone-method-onNodeOut\" class=\"docClass\">onNodeOut</a>). If the drag source is not currently over a\nregistered node, it will call <a href=\"#!/api/Ext.dd.DropZone-method-onContainerOver\" rel=\"Ext.dd.DropZone-method-onContainerOver\" class=\"docClass\">onContainerOver</a>.</p>\n"},"onContainerDrop":{"!type":"fn(source: +Ext.dd.DragSource, e: +Event, data: ?) -> bool","!doc":"<p>Called when the DropZone determines that a <a href=\"#!/api/Ext.dd.DragSource\" rel=\"Ext.dd.DragSource\" class=\"docClass\">Ext.dd.DragSource</a> has been dropped on it,\nbut not on any of its registered drop nodes.  The default implementation returns false, so it should be\noverridden to provide the appropriate processing of the drop event if you need the drop zone itself to\nbe able to accept drops.  It should return true when valid so that the drag source's repair action does not run.</p>\n"},"onContainerOver":{"!type":"fn(source: +Ext.dd.DragSource, e: +Event, data: ?) -> string","!doc":"<p>Called while the DropZone determines that a <a href=\"#!/api/Ext.dd.DragSource\" rel=\"Ext.dd.DragSource\" class=\"docClass\">Ext.dd.DragSource</a> is being dragged over it,\nbut not over any of its registered drop nodes.  The default implementation returns this.dropNotAllowed, so\nit should be overridden to provide the proper feedback if necessary.</p>\n"},"onNodeDrop":{"!type":"fn(nodeData: ?, source: +Ext.dd.DragSource, e: +Event, data: ?) -> bool","!doc":"<p>Called when the DropZone determines that a <a href=\"#!/api/Ext.dd.DragSource\" rel=\"Ext.dd.DragSource\" class=\"docClass\">Ext.dd.DragSource</a> has been dropped onto\nthe drop node.  The default implementation returns false, so it should be overridden to provide the\nappropriate processing of the drop event and return true so that the drag source's repair action does not run.</p>\n"},"onNodeEnter":{"!type":"fn(nodeData: ?, source: +Ext.dd.DragSource, e: +Event, data: ?) -> !this","!doc":"<p>Called when the DropZone determines that a <a href=\"#!/api/Ext.dd.DragSource\" rel=\"Ext.dd.DragSource\" class=\"docClass\">Ext.dd.DragSource</a> has entered a drop node\nthat has either been registered or detected by a configured implementation of <a href=\"#!/api/Ext.dd.DropZone-method-getTargetFromEvent\" rel=\"Ext.dd.DropZone-method-getTargetFromEvent\" class=\"docClass\">getTargetFromEvent</a>.\nThis method has no default implementation and should be overridden to provide\nnode-specific processing if necessary.</p>\n"},"onNodeOut":{"!type":"fn(nodeData: ?, source: +Ext.dd.DragSource, e: +Event, data: ?) -> !this","!doc":"<p>Called when the DropZone determines that a <a href=\"#!/api/Ext.dd.DragSource\" rel=\"Ext.dd.DragSource\" class=\"docClass\">Ext.dd.DragSource</a> has been dragged out of\nthe drop node without dropping.  This method has no default implementation and should be overridden to provide\nnode-specific processing if necessary.</p>\n"},"onNodeOver":{"!type":"fn(nodeData: ?, source: +Ext.dd.DragSource, e: +Event, data: ?) -> string","!doc":"<p>Called while the DropZone determines that a <a href=\"#!/api/Ext.dd.DragSource\" rel=\"Ext.dd.DragSource\" class=\"docClass\">Ext.dd.DragSource</a> is over a drop node\nthat has either been registered or detected by a configured implementation of <a href=\"#!/api/Ext.dd.DropZone-method-getTargetFromEvent\" rel=\"Ext.dd.DropZone-method-getTargetFromEvent\" class=\"docClass\">getTargetFromEvent</a>.\nThe default implementation returns this.dropAllowed, so it should be\noverridden to provide the proper feedback.</p>\n"},"triggerCacheRefresh":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"}}},"Registry":{"!doc":"<p>Provides easy access to all drag drop components that are registered on a page. Items can be retrieved either\ndirectly by DOM node id, or by passing in the drag drop event that occurred and looking up the event target.</p>\n","!type":"fn()","prototype":{"!proto":"Ext.Base.prototype"},"getHandle":{"!type":"fn(id: string|+HTMLElement) -> ?","!doc":"<p>Returns the handle registered for a DOM Node by id</p>\n"},"getHandleFromEvent":{"!type":"fn(e: +Event) -> ?","!doc":"<p>Returns the handle that is registered for the DOM node that is the target of the event</p>\n"},"getId":{"!type":"fn(el: ?, autogen: ?) -> !this"},"getTarget":{"!type":"fn(id: string|+HTMLElement) -> ?","!doc":"<p>Returns a custom data object that is registered for a DOM node by id</p>\n"},"getTargetFromEvent":{"!type":"fn(e: +Event) -> ?","!doc":"<p>Returns a custom data object that is registered for the DOM node that is the target of the event</p>\n"},"register":{"!type":"fn(element: string|+HTMLElement, data: ?) -> !this","!doc":"<p>Registers a drag drop element.</p>\n"},"unregister":{"!type":"fn(element: string|+HTMLElement) -> !this","!doc":"<p>Unregister a drag drop element</p>\n"}},"ScrollManager":{"!doc":"<p>Provides automatic scrolling of overflow regions in the page during drag operations.</p>\n\n<p>The ScrollManager configs will be used as the defaults for any scroll container registered with it, but you can also\noverride most of the configs per scroll container by adding a ddScrollConfig object to the target element that\ncontains these properties: <a href=\"#!/api/Ext.dd.ScrollManager-property-hthresh\" rel=\"Ext.dd.ScrollManager-property-hthresh\" class=\"docClass\">hthresh</a>, <a href=\"#!/api/Ext.dd.ScrollManager-property-vthresh\" rel=\"Ext.dd.ScrollManager-property-vthresh\" class=\"docClass\">vthresh</a>, <a href=\"#!/api/Ext.dd.ScrollManager-property-increment\" rel=\"Ext.dd.ScrollManager-property-increment\" class=\"docClass\">increment</a> and <a href=\"#!/api/Ext.dd.ScrollManager-property-frequency\" rel=\"Ext.dd.ScrollManager-property-frequency\" class=\"docClass\">frequency</a>. Example\nusage:</p>\n\n<pre><code>var el = <a href=\"#!/api/Ext-method-get\" rel=\"Ext-method-get\" class=\"docClass\">Ext.get</a>('scroll-ct');\nel.ddScrollConfig = {\n    vthresh: 50,\n    hthresh: -1,\n    frequency: 100,\n    increment: 200\n};\n<a href=\"#!/api/Ext.dd.ScrollManager-method-register\" rel=\"Ext.dd.ScrollManager-method-register\" class=\"docClass\">Ext.dd.ScrollManager.register</a>(el);\n</code></pre>\n\n<p>Note: This class is designed to be used in \"Point Mode</p>\n","!type":"fn()","prototype":{"!proto":"Ext.Base.prototype"},"animDuration":{"!type":"number","!doc":"<p>The animation duration in seconds - MUST BE less than <a href=\"#!/api/Ext.dd.ScrollManager-property-frequency\" rel=\"Ext.dd.ScrollManager-property-frequency\" class=\"docClass\">Ext.dd.ScrollManager.frequency</a>!</p>\n"},"animate":{"!type":"bool","!doc":"<p>True to animate the scroll</p>\n"},"ddGroup":{"!type":"string","!doc":"<p>The named drag drop <a href=\"#!/api/Ext.dd.DragSource-cfg-ddGroup\" rel=\"Ext.dd.DragSource-cfg-ddGroup\" class=\"docClass\">group</a> to which this container belongs. If a ddGroup is\nspecified, then container scrolling will only occur when a dragged object is in the same ddGroup.</p>\n"},"frequency":{"!type":"number","!doc":"<p>The frequency of scrolls in milliseconds</p>\n"},"hthresh":{"!type":"number","!doc":"<p>The number of pixels from the right or left edge of a container the pointer needs to be to trigger scrolling</p>\n"},"increment":{"!type":"number","!doc":"<p>The number of pixels to scroll in each scroll increment</p>\n"},"vthresh":{"!type":"number","!doc":"<p>The number of pixels from the top or bottom edge of a container the pointer needs to be to trigger scrolling</p>\n"},"clearProc":{"!type":"fn() -> !this"},"doScroll":{"!type":"fn() -> !this"},"onFire":{"!type":"fn(e: ?, isDrop: ?) -> !this"},"onStop":{"!type":"fn(e: ?) -> !this"},"refreshCache":{"!type":"fn() -> !this","!doc":"<p>Manually trigger a cache refresh.</p>\n"},"register":{"!type":"fn(el: string|+HTMLElement|+Ext.Element|[string]|[+HTMLElement]|[+Ext.Element]) -> !this","!doc":"<p>Registers new overflow element(s) to auto scroll</p>\n"},"startProc":{"!type":"fn(el: ?, dir: ?) -> !this"},"triggerRefresh":{"!type":"fn() -> !this"},"unregister":{"!type":"fn(el: string|+HTMLElement|+Ext.Element|[string]|[+HTMLElement]|[+Ext.Element]) -> !this","!doc":"<p>Unregisters overflow element(s) so they are no longer scrolled</p>\n"}},"StatusProxy":{"!doc":"<p>A specialized floating Component that supports a drop status icon, <a href=\"#!/api/Ext.dom.Layer\" rel=\"Ext.dom.Layer\" class=\"docClass\">Ext.Layer</a> styles\nand auto-repair.  This is the default drag proxy used by all Ext.dd components.</p>\n","!type":"fn(config?: Ext_dd_StatusProxy_cfg)","prototype":{"!proto":"Ext.Component.prototype","dropAllowed":{"!type":"string","!doc":"<p>The CSS class to apply to the status element when drop is allowed.</p>\n"},"dropNotAllowed":{"!type":"string","!doc":"<p>The CSS class to apply to the status element when drop is not allowed.</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.dd.StatusProxy-method-getEl\" rel=\"Ext.dd.StatusProxy-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.dd.StatusProxy-method-getEl\" rel=\"Ext.dd.StatusProxy-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.dd.StatusProxy-cfg-renderSelectors\" rel=\"Ext.dd.StatusProxy-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.dd.StatusProxy-cfg-childEls\" rel=\"Ext.dd.StatusProxy-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"},"animRepair":{"!type":"bool"},"childEls":{"!type":"[?]"},"repairCls":{"!type":"string"},"afterRepair":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"getGhost":{"!type":"fn() -> +Ext.Element","!doc":"<p>Returns the ghost element</p>\n"},"hide":{"!type":"fn(clear: bool) -> !this","!doc":"<p>Hides the proxy</p>\n"},"repair":{"!type":"fn(xy: [number], callback: fn(), scope: ?) -> !this","!doc":"<p>Causes the proxy to return to its position of origin via an animation.\nShould be called after an invalid drop operation by the item being dragged.</p>\n"},"reset":{"!type":"fn(clearGhost: bool) -> !this","!doc":"<p>Resets the status indicator to the default dropNotAllowed value</p>\n"},"setStatus":{"!type":"fn(cssClass: string) -> !this","!doc":"<p>Updates the proxy's visual element to indicate the status of whether or not drop is allowed\nover the current target element.</p>\n"},"stop":{"!type":"fn() -> !this","!doc":"<p>Stops the repair animation if it's currently running</p>\n"},"sync":{"!type":"fn() -> !this","!doc":"<p>Force the Layer to sync its shadow and shim positions to the element</p>\n"},"update":{"!type":"fn(html: string|+HTMLElement) -> !this","!doc":"<p>Updates the contents of the ghost element</p>\n"}}}},"direct":{"Event":{"!doc":"<p>Base class for all Ext.direct events. An event is\ncreated after some kind of interaction with the server.\nThe event class is essentially just a data structure\nto hold a Direct response.</p>\n","!type":"fn(config?: Ext_direct_Event_cfg)","prototype":{"!proto":"Ext.Base.prototype","status":{"!type":"bool"},"getData":{"!type":"fn() -> +Mixed","!doc":"<p>Return the raw data for this event.</p>\n"},"getName":{"!type":"fn() -> string","!doc":"<p>Return the name for this event.</p>\n"}}},"ExceptionEvent":{"!doc":"<p>An event that is fired when an exception is received from a <a href=\"#!/api/Ext.direct.RemotingProvider\" rel=\"Ext.direct.RemotingProvider\" class=\"docClass\">Ext.direct.RemotingProvider</a></p>\n","!type":"fn(config?: Ext_direct_ExceptionEvent_cfg)","prototype":{"!proto":"Ext.direct.RemotingEvent.prototype","status":{"!type":"bool"}}},"JsonProvider":{"!doc":"<p>A base provider for communicating using JSON. This is an abstract class\nand should not be instanced directly.</p>\n","prototype":{"createEvent":{"!type":"fn(response: ?) -> +Ext.direct.Event","!doc":"<p>Create an event from a response object</p>\n"},"createEvents":{"!type":"fn(response: ?) -> [+Ext.direct.Event]","!doc":"<p>Creates a set of events based on the XHR response</p>\n"},"parseResponse":{"!type":"fn(response: ?) -> ?","!doc":"<p>Parse the JSON response</p>\n"}}},"Manager":{"!doc":"<p><a href=\"#!/api/Ext.direct.Manager\" rel=\"Ext.direct.Manager\" class=\"docClass\">Ext.Direct</a> aims to streamline communication between the client and server by providing a single interface that\nreduces the amount of common code typically required to validate data and handle returned data packets (reading data,\nerror conditions, etc).</p>\n\n<p>The Ext.direct namespace includes several classes for a closer integration with the server-side. The Ext.data\nnamespace also includes classes for working with Ext.data.Stores which are backed by data from an <a href=\"#!/api/Ext.direct.Manager\" rel=\"Ext.direct.Manager\" class=\"docClass\">Ext.Direct</a> method.</p>\n\n<h1>Specification</h1>\n\n<p>For additional information consult the <a href=\"http://sencha.com/products/extjs/extdirect\">Ext.Direct Specification</a>.</p>\n\n<h1>Providers</h1>\n\n<p><a href=\"#!/api/Ext.direct.Manager\" rel=\"Ext.direct.Manager\" class=\"docClass\">Ext.Direct</a> uses a provider architecture, where one or more providers are used to transport data to and from the\nserver. There are several providers that exist in the core at the moment:</p>\n\n<ul>\n<li><a href=\"#!/api/Ext.direct.JsonProvider\" rel=\"Ext.direct.JsonProvider\" class=\"docClass\">JsonProvider</a> for simple JSON operations</li>\n<li><a href=\"#!/api/Ext.direct.PollingProvider\" rel=\"Ext.direct.PollingProvider\" class=\"docClass\">PollingProvider</a> for repeated requests</li>\n<li><a href=\"#!/api/Ext.direct.RemotingProvider\" rel=\"Ext.direct.RemotingProvider\" class=\"docClass\">RemotingProvider</a> exposes server side on the client.</li>\n</ul>\n\n\n<p>A provider does not need to be invoked directly, providers are added via <a href=\"#!/api/Ext.direct.Manager\" rel=\"Ext.direct.Manager\" class=\"docClass\">Ext.direct.Manager</a>.<a href=\"#!/api/Ext.direct.Manager-method-addProvider\" rel=\"Ext.direct.Manager-method-addProvider\" class=\"docClass\">addProvider</a>.</p>\n\n<h1>Router</h1>\n\n<p><a href=\"#!/api/Ext.direct.Manager\" rel=\"Ext.direct.Manager\" class=\"docClass\">Ext.Direct</a> utilizes a \"router\" on the server to direct requests from the client to the appropriate server-side\nmethod. Because the <a href=\"#!/api/Ext.direct.Manager\" rel=\"Ext.direct.Manager\" class=\"docClass\">Ext.Direct</a> API is completely platform-agnostic, you could completely swap out a Java based server\nsolution and replace it with one that uses C# without changing the client side JavaScript at all.</p>\n\n<h1>Server side events</h1>\n\n<p>Custom events from the server may be handled by the client by adding listeners, for example:</p>\n\n<pre><code>{\"type\":\"event\",\"name\":\"message\",\"data\":\"Successfully polled at: 11:19:30 am\"}\n\n// add a handler for a 'message' event sent by the server\n<a href=\"#!/api/Ext.direct.Manager-method-on\" rel=\"Ext.direct.Manager-method-on\" class=\"docClass\">Ext.direct.Manager.on</a>('message', function(e){\n    out.append(String.format('&lt;p&gt;&lt;i&gt;{0}&lt;/i&gt;&lt;/p&gt;', e.data));\n    out.el.scrollTo('t', 100000, true);\n});\n</code></pre>\n","!type":"fn()","prototype":{"!proto":"Ext.Base.prototype"},"exceptions":{"!type":"?","!doc":"<p>Exception types.</p>\n"},"addProvider":{"!type":"fn(provider: +Ext.direct.Provider|?) -> !this","!doc":"<p>Adds an <a href=\"#!/api/Ext.direct.Manager\" rel=\"Ext.direct.Manager\" class=\"docClass\">Ext.Direct</a> Provider and creates the proxy or stub methods to execute server-side methods. If the provider\nis not already connected, it will auto-connect.</p>\n\n<pre><code> var pollProv = new <a href=\"#!/api/Ext.direct.PollingProvider\" rel=\"Ext.direct.PollingProvider\" class=\"docClass\">Ext.direct.PollingProvider</a>({\n     url: 'php/poll2.php'\n });\n\n <a href=\"#!/api/Ext.direct.Manager-method-addProvider\" rel=\"Ext.direct.Manager-method-addProvider\" class=\"docClass\">Ext.direct.Manager.addProvider</a>({\n     type: 'remoting',           // create a <a href=\"#!/api/Ext.direct.RemotingProvider\" rel=\"Ext.direct.RemotingProvider\" class=\"docClass\">Ext.direct.RemotingProvider</a>\n     url:  'php/router.php',     // url to connect to the <a href=\"#!/api/Ext.direct.Manager\" rel=\"Ext.direct.Manager\" class=\"docClass\">Ext.Direct</a> server-side router.\n     actions: {                  // each property within the actions object represents a Class\n         TestAction: [{          // array of methods within each server side Class\n             name: 'doEcho',     // name of method\n             len:  1\n         }, {\n             name: 'multiply',\n             len:  1\n         }, {\n             name: 'doForm',\n             formHandler: true   // handle form on server with <a href=\"#!/api/Ext.direct.Transaction\" rel=\"Ext.direct.Transaction\" class=\"docClass\">Ext.Direct.Transaction</a>\n         }]\n     },\n     namespace: 'myApplication', // namespace to create the Remoting Provider in\n }, {\n     type: 'polling',            // create a <a href=\"#!/api/Ext.direct.PollingProvider\" rel=\"Ext.direct.PollingProvider\" class=\"docClass\">Ext.direct.PollingProvider</a>\n     url:  'php/poll.php'\n },\n pollProv);                      // reference to previously created instance\n</code></pre>\n"},"addTransaction":{"!type":"fn(transaction: +Ext.direct.Transaction) -> +Ext.direct.Transaction","!doc":"<p>Adds a transaction to the manager.</p>\n"},"getProvider":{"!type":"fn(id: string|+Ext.direct.Provider) -> !this","!doc":"<p>Retrieves a <a href=\"#!/api/Ext.direct.Provider\" rel=\"Ext.direct.Provider\" class=\"docClass\">provider</a> by the <strong><a href=\"#!/api/Ext.direct.Provider-cfg-id\" rel=\"Ext.direct.Provider-cfg-id\" class=\"docClass\">id</a></strong> specified when the\nprovider is <a href=\"#!/api/Ext.direct.Manager-method-addProvider\" rel=\"Ext.direct.Manager-method-addProvider\" class=\"docClass\">added</a>.</p>\n"},"getTransaction":{"!type":"fn(transaction: string|+Ext.direct.Transaction) -> +Ext.direct.Transaction","!doc":"<p>Gets a transaction</p>\n"},"onProviderData":{"!type":"fn(provider: ?, event: ?) -> !this"},"parseMethod":{"!type":"fn(fn: string|fn()) -> fn()","!doc":"<p>Parses a direct function. It may be passed in a string format, for example:\n\"MyApp.Person.read\".</p>\n"},"removeProvider":{"!type":"fn(provider: string|+Ext.direct.Provider) -> +Ext.direct.Provider","!doc":"<p>Removes the provider.</p>\n"},"removeTransaction":{"!type":"fn(transaction: string|+Ext.direct.Transaction) -> +Ext.direct.Transaction","!doc":"<p>Removes a transaction from the manager.</p>\n"},"event":{"!type":"fn(event: +Ext.direct.Event, provider: +Ext.direct.Provider, eOpts: ?)","!doc":"<p>Fires after an event.</p>\n"},"exception":{"!type":"fn(event: +Ext.direct.Event, eOpts: ?)","!doc":"<p>Fires after an event exception.</p>\n"}},"PollingProvider":{"!doc":"<p>Provides for repetitive polling of the server at distinct <a href=\"#!/api/Ext.direct.PollingProvider-cfg-interval\" rel=\"Ext.direct.PollingProvider-cfg-interval\" class=\"docClass\">intervals</a>.\nThe initial request for data originates from the client, and then is responded to by the\nserver.</p>\n\n<p>Configuration for the PollingProvider can be generated by the server-side\nAPI portion of the <a href=\"#!/api/Ext.direct.Manager\" rel=\"Ext.direct.Manager\" class=\"docClass\">Ext.Direct</a> stack.</p>\n\n<p>An instance of PollingProvider may be created directly via the new keyword or by simply\nspecifying <code>type = 'polling'</code>. For example:</p>\n\n<pre><code> var pollA = new <a href=\"#!/api/Ext.direct.PollingProvider\" rel=\"Ext.direct.PollingProvider\" class=\"docClass\">Ext.direct.PollingProvider</a>({\n     type:'polling',\n     url: 'php/pollA.php',\n });\n <a href=\"#!/api/Ext.direct.Manager-method-addProvider\" rel=\"Ext.direct.Manager-method-addProvider\" class=\"docClass\">Ext.direct.Manager.addProvider</a>(pollA);\n pollA.disconnect();\n\n <a href=\"#!/api/Ext.direct.Manager-method-addProvider\" rel=\"Ext.direct.Manager-method-addProvider\" class=\"docClass\">Ext.direct.Manager.addProvider</a>({\n     type:'polling',\n     url: 'php/pollB.php',\n     id: 'pollB-provider'\n });\n var pollB = <a href=\"#!/api/Ext.direct.Manager-method-getProvider\" rel=\"Ext.direct.Manager-method-getProvider\" class=\"docClass\">Ext.direct.Manager.getProvider</a>('pollB-provider');\n</code></pre>\n","prototype":{"baseParams":{"!type":"?","!doc":"<p>An object containing properties which are to be sent as parameters on every polling request</p>\n"},"interval":{"!type":"number","!doc":"<p>How often to poll the server-side in milliseconds. Defaults to every 3 seconds.</p>\n"},"url":{"!type":"string|fn()","!doc":"<p>The url which the PollingProvider should contact with each request. This can also be\nan imported <a href=\"#!/api/Ext.direct.Manager\" rel=\"Ext.direct.Manager\" class=\"docClass\">Ext.Direct</a> method which will accept the baseParams as its only argument.</p>\n"},"connect":{"!type":"fn() -> !this","!doc":"<p>Connect to the server-side and begin the polling process. To handle each\nresponse subscribe to the data event.</p>\n"},"disconnect":{"!type":"fn() -> !this","!doc":"<p>Disconnect from the server-side and stop the polling process. The disconnect\nevent will be fired on a successful disconnect.</p>\n"},"isConnected":{"!type":"fn() -> !this","!doc":"<p>Returns whether or not the server-side is currently connected.\nAbstract method for subclasses to implement.</p>\n"},"onData":{"!type":"fn(opt: ?, success: ?, response: ?) -> !this"},"runPoll":{"!type":"fn() -> !this"},"beforepoll":{"!type":"fn(this: +Ext.direct.PollingProvider, eOpts: ?)","!doc":"<p>Fired immediately before a poll takes place.</p>\n"},"poll":{"!type":"fn(this: +Ext.direct.PollingProvider, eOpts: ?)","!doc":"<p>Fired immediately after a poll takes place.</p>\n"}}},"Provider":{"!doc":"<p><a href=\"#!/api/Ext.direct.Provider\" rel=\"Ext.direct.Provider\" class=\"docClass\">Ext.direct.Provider</a> is an abstract class meant to be extended.</p>\n\n<p>For example Ext JS implements the following subclasses:</p>\n\n<pre><code>Provider\n|\n+---<a href=\"#!/api/Ext.direct.JsonProvider\" rel=\"Ext.direct.JsonProvider\" class=\"docClass\">JsonProvider</a>\n    |\n    +---<a href=\"#!/api/Ext.direct.PollingProvider\" rel=\"Ext.direct.PollingProvider\" class=\"docClass\">PollingProvider</a>\n    |\n    +---<a href=\"#!/api/Ext.direct.RemotingProvider\" rel=\"Ext.direct.RemotingProvider\" class=\"docClass\">RemotingProvider</a>\n</code></pre>\n","prototype":{"id":{"!type":"string","!doc":"<p>The unique id of the provider (defaults to an <a href=\"#!/api/Ext-method-id\" rel=\"Ext-method-id\" class=\"docClass\">auto-assigned id</a>).\nYou should assign an id if you need to be able to access the provider later and you do\nnot have an object reference available, for example:</p>\n\n<pre><code> <a href=\"#!/api/Ext.direct.Manager-method-addProvider\" rel=\"Ext.direct.Manager-method-addProvider\" class=\"docClass\">Ext.direct.Manager.addProvider</a>({\n     type: 'polling',\n     url:  'php/poll.php',\n     id:   'poll-provider'\n });\n var p = <a href=\"#!/api/Ext.direct.Manager\" rel=\"Ext.direct.Manager\" class=\"docClass\">Ext.direct.Manager</a>.<a href=\"#!/api/Ext.direct.Manager-method-getProvider\" rel=\"Ext.direct.Manager-method-getProvider\" class=\"docClass\">getProvider</a>('poll-provider');\np.disconnect();\n</code></pre>\n"},"relayedEvents":{"!type":"[string]","!doc":"<p>List of Provider events that should be relayed by <a href=\"#!/api/Ext.direct.Manager\" rel=\"Ext.direct.Manager\" class=\"docClass\">Ext.direct.Manager</a>.\n'data' event is always relayed.</p>\n"},"isProvider":{"!type":"bool"},"connect":{"!type":"fn(provider: +Ext.direct.Provider, eOpts: ?)","!doc":"<p>Fires when the Provider connects to the server-side</p>\n"},"disconnect":{"!type":"fn(provider: +Ext.direct.Provider, eOpts: ?)","!doc":"<p>Fires when the Provider disconnects from the server-side</p>\n"},"isConnected":{"!type":"fn() -> !this","!doc":"<p>Returns whether or not the server-side is currently connected.\nAbstract method for subclasses to implement.</p>\n"},"data":{"!type":"fn(provider: +Ext.direct.Provider, e: +Ext.direct.Event, eOpts: ?)","!doc":"<p>Fires when the Provider receives data from the server-side</p>\n"},"exception":{"!type":"fn(eOpts: ?)","!doc":"<p>Fires when the Provider receives an exception from the server-side</p>\n"}}},"RemotingEvent":{"!doc":"<p>An event that is fired when data is received from a\n<a href=\"#!/api/Ext.direct.RemotingProvider\" rel=\"Ext.direct.RemotingProvider\" class=\"docClass\">Ext.direct.RemotingProvider</a>. Contains a method to the\nrelated transaction for the direct request, see <a href=\"#!/api/Ext.direct.RemotingEvent-method-getTransaction\" rel=\"Ext.direct.RemotingEvent-method-getTransaction\" class=\"docClass\">getTransaction</a></p>\n","!type":"fn(config?: Ext_direct_RemotingEvent_cfg)","prototype":{"!proto":"Ext.direct.Event.prototype","getTransaction":{"!type":"fn() -> +Ext.direct.Transaction","!doc":"<p>Get the transaction associated with this event.</p>\n"}}},"RemotingMethod":{"!doc":"<p>Small utility class used internally to represent a Direct method.</p>\n","!type":"fn(config: Ext_direct_RemotingMethod_cfg)","prototype":{"!proto":"Ext.Base.prototype","getArgs":{"!type":"fn(params: ?, paramOrder: ?, paramsAsHash: ?) -> !this"},"getCallData":{"!type":"fn(args: [?]) -> ?","!doc":"<p>Takes the arguments for the Direct function and splits the arguments\nfrom the scope and the callback.</p>\n"}}},"RemotingProvider":{"!doc":"<p>The <a href=\"#!/api/Ext.direct.RemotingProvider\" rel=\"Ext.direct.RemotingProvider\" class=\"docClass\">RemotingProvider</a> exposes access to\nserver side methods on the client (a remote procedure call (RPC) type of\nconnection where the client can initiate a procedure on the server).</p>\n\n<p>This allows for code to be organized in a fashion that is maintainable,\nwhile providing a clear path between client and server, something that is\nnot always apparent when using URLs.</p>\n\n<p>To accomplish this the server-side needs to describe what classes and methods\nare available on the client-side. This configuration will typically be\noutputted by the server-side <a href=\"#!/api/Ext.direct.Manager\" rel=\"Ext.direct.Manager\" class=\"docClass\">Ext.Direct</a> stack when the API description is built.</p>\n","prototype":{"actions":{"!type":"?","!doc":"<p>Object literal defining the server side actions and methods. For example, if\nthe Provider is configured with:</p>\n\n<pre><code> // each property within the 'actions' object represents a server side Class\n actions: {\n     TestAction: [   // array of methods within each server side Class to be   \n     {               // stubbed out on client\n         name: 'doEcho',   // stub method will be TestAction.doEcho\n         len:  1            \n     }, {\n         name: 'multiply', // name of method\n         len:  2           // The number of parameters that will be used to create an\n                           // array of data to send to the server side function.\n     }, {\n         name: 'doForm',\n         formHandler: true // tells the client that this method handles form calls\n     }],\n\n     // These methods will be created in nested namespace TestAction.Foo\n     'TestAction.Foo': [{\n         name: 'ordered',  // stub method will be TestAction.Foo.ordered\n         len:  1\n     }, {\n         name: 'noParams', // this method does not accept any parameters\n         len:  0\n     }, {\n         name: 'named',    // stub method will be TestAction.Foo.named\n         params: ['foo', 'bar']    // parameters are passed by name\n     }]\n }\n</code></pre>\n\n<p>Note that starting with 4.2, dotted Action names will generate nested objects.\nIf you wish to reverse to previous behavior, set <a href=\"#!/api/Ext.direct.RemotingProvider-cfg-disableNestedActions\" rel=\"Ext.direct.RemotingProvider-cfg-disableNestedActions\" class=\"docClass\">disableNestedActions</a>\nto <code>true</code>.</p>\n\n<p>In the following example a <em>client side</em> handler is used to call the\nserver side method \"multiply\" in the server-side \"TestAction\" Class:</p>\n\n<pre><code> TestAction.multiply(\n     // pass two arguments to server, so specify len=2\n     2, 4,\n\n     // callback function after the server is called\n     //  result: the result returned by the server\n     //       e: <a href=\"#!/api/Ext.direct.RemotingEvent\" rel=\"Ext.direct.RemotingEvent\" class=\"docClass\">Ext.direct.RemotingEvent</a> object\n     // success: true or false\n     // options: options to be applied to method call and passed to callback\n     function (result, e, success, options) {\n         var t, action, method;\n\n         t = e.getTransaction();\n         action = t.action; // server side Class called\n         method = t.method; // server side method called\n\n         if (e.status) {\n             var answer = <a href=\"#!/api/Ext-method-encode\" rel=\"Ext-method-encode\" class=\"docClass\">Ext.encode</a>(result); // 8\n         }\n         else {\n             var msg = e.message; // failure message\n         }\n     },\n\n     // Scope to call the callback in (optional)\n     window,\n\n     // Options to apply to this method call. This can include\n     // Ajax.request() options; only `timeout` is supported at this time.\n     // When timeout is set for a method call, it will be executed immediately\n     // without buffering.\n     // The same options object is passed to the callback so it's possible\n     // to \"forward\" some data when needed.\n     {\n         timeout: 60000, // milliseconds\n         foo: 'bar'\n     }\n );\n</code></pre>\n\n<p>In the example above, the server side \"multiply\" function will be passed two\narguments (2 and 4). The \"multiply\" method should return the value 8 which will be\navailable as the <code>result</code> in the callback example above.</p>\n"},"disableNestedActions":{"!type":"bool","!doc":"<p>In versions prior to 4.2, using dotted Action names was not really meaningful,\nbecause it generated flat <a href=\"#!/api/Ext.direct.RemotingProvider-cfg-namespace\" rel=\"Ext.direct.RemotingProvider-cfg-namespace\" class=\"docClass\">namespace</a> object with dotted property names.\nFor example, take this API declaration:</p>\n\n<pre><code> {\n     actions: {\n         TestAction: {\n             name: 'foo',\n             len:  1\n         },\n         'TestAction.Foo' {\n             name: 'bar',\n             len: 1\n         }\n     },\n     namespace: 'MyApp'\n }\n</code></pre>\n\n<p>Before 4.2, that would generate the following API object:</p>\n\n<pre><code> window.MyApp = {\n     TestAction: {\n         foo: function() { ... }\n     },\n     'TestAction.Foo': {\n         bar: function() { ... }\n     }\n }\n</code></pre>\n\n<p>In Ext JS 4.2, we introduced new namespace handling behavior. Now the same API object\nwill be like this:</p>\n\n<pre><code> window.MyApp = {\n     TestAction: {\n         foo: function() { ... },\n\n         Foo: {\n             bar: function() { ... }\n         }\n     }\n }\n</code></pre>\n\n<p>Instead of addressing Action methods array-style <code>MyApp['TestAction.Foo'].bar()</code>,\nnow it is possible to use object addressing: <code>MyApp.TestAction.Foo.bar()</code>.</p>\n\n<p>If you find this behavior undesirable, set this config option to <code>true</code>.</p>\n"},"enableBuffer":{"!type":"number|bool","!doc":"<p><code>true</code> or <code>false</code> to enable or disable combining of method\ncalls. If a number is specified this is the amount of time in milliseconds\nto wait before sending a batched request.</p>\n\n<p>Calls which are received within the specified timeframe will be\nconcatenated together and sent in a single request, optimizing the\napplication by reducing the amount of round trips that have to be made\nto the server. To cancel buffering for some particular invocations, pass\n<code>timeout</code> parameter in <code>options</code> object for that method call.</p>\n"},"enableUrlEncode":{"!type":"string","!doc":"<p>Specify which param will hold the arguments for the method.</p>\n"},"maxRetries":{"!type":"number","!doc":"<p>Number of times to re-attempt delivery on failure of a call.</p>\n"},"namespace":{"!type":"string|?","!doc":"<p>Namespace for the Remoting Provider (defaults to <code>Ext.global</code>).\nExplicitly specify the namespace Object, or specify a String to have a\n<a href=\"#!/api/Ext-method-namespace\" rel=\"Ext-method-namespace\" class=\"docClass\">namespace</a> created implicitly.</p>\n"},"timeout":{"!type":"number","!doc":"<p>The timeout to use for each request.</p>\n"},"url":{"!type":"string","!doc":"<p><strong>Required</strong>. The url to connect to the <a href=\"#!/api/Ext.direct.Manager\" rel=\"Ext.direct.Manager\" class=\"docClass\">Ext.direct.Manager</a> server-side router.</p>\n"},"combineAndSend":{"!type":"fn() -> !this","!doc":"<p>Combine any buffered requests and send them off</p>\n"},"configureFormRequest":{"!type":"fn(action: string, method: ?, form: +HTMLElement, callback?: fn(), scope?: ?) -> !this","!doc":"<p>Configure a form submission request</p>\n"},"configureRequest":{"!type":"fn(action: string, method: ?) -> !this","!doc":"<p>Configure a direct request</p>\n"},"connect":{"!type":"fn() -> !this","!doc":"<p>Abstract method for subclasses to implement.</p>\n"},"createHandler":{"!type":"fn(action: string, method: ?) -> fn()","!doc":"<p>Create a handler function for a direct call.</p>\n"},"createNamespaces":{"!type":"fn(root: ?, action: ?) -> !this","!doc":"<p>Create nested namespaces. Unlike <a href=\"#!/api/Ext-method-ns\" rel=\"Ext-method-ns\" class=\"docClass\">Ext.ns</a> this method supports\nnested objects as root of the namespace, not only Ext.global (window).</p>\n"},"disconnect":{"!type":"fn() -> !this","!doc":"<p>Abstract method for subclasses to implement.</p>\n"},"getCallData":{"!type":"fn(transaction: +Ext.direct.Transaction) -> ?","!doc":"<p>Gets the Ajax call info for a transaction</p>\n"},"getNamespace":{"!type":"fn(root: ?, action: ?) -> !this","!doc":"<p>Get nested namespace by property.</p>\n"},"getTransaction":{"!type":"fn(options: ?) -> +Ext.direct.Transaction","!doc":"<p>Get transaction from XHR options</p>\n"},"initAPI":{"!type":"fn() -> !this","!doc":"<p>Initialize the API</p>\n"},"isConnected":{"!type":"fn() -> !this","!doc":"<p>Returns whether or not the server-side is currently connected.\nAbstract method for subclasses to implement.</p>\n"},"onData":{"!type":"fn(options: ?, success: ?, response: ?) -> !this","!doc":"<p>React to the ajax request being completed</p>\n"},"queueTransaction":{"!type":"fn(transaction: +Ext.direct.Transaction) -> !this","!doc":"<p>Add a new transaction to the queue</p>\n"},"runCallback":{"!type":"fn(transaction: +Ext.direct.Transaction, event: +Ext.direct.Event) -> !this","!doc":"<p>Run any callbacks related to the transaction.</p>\n"},"sendFormRequest":{"!type":"fn(transaction: +Ext.direct.Transaction) -> !this","!doc":"<p>Sends a form request</p>\n"},"sendRequest":{"!type":"fn(data: ?|[?]) -> !this","!doc":"<p>Sends a request to the server</p>\n"},"beforecall":{"!type":"fn(provider: +Ext.direct.RemotingProvider, transaction: +Ext.direct.Transaction, meta: ?, eOpts: ?)","!doc":"<p>Fires immediately before the client-side sends off the RPC call. By returning\n<code>false</code> from an event handler you can prevent the call from being made.</p>\n"},"beforecallback":{"!type":"fn(provider: +Ext.direct.RemotingProvider, transaction: +Ext.direct.Transaction, eOpts: ?)","!doc":"<p>Fires before callback function is executed. By returning <code>false</code> from an event handler\nyou can prevent the callback from executing.</p>\n"},"call":{"!type":"fn(provider: +Ext.direct.RemotingProvider, transaction: +Ext.direct.Transaction, meta: ?, eOpts: ?)","!doc":"<p>Fires immediately after the request to the server-side is sent. This does\nNOT fire after the response has come back from the call.</p>\n"}}},"Transaction":{"!doc":"<p>Supporting Class for <a href=\"#!/api/Ext.direct.Manager\" rel=\"Ext.direct.Manager\" class=\"docClass\">Ext.Direct</a> (not intended to be used directly).</p>\n","!type":"fn(config?: Ext_direct_Transaction_cfg)","prototype":{"!proto":"Ext.Base.prototype","provider":{"!type":"+Ext.direct.Provider","!doc":"<p>Provider to use with this Transaction.</p>\n"},"getProvider":{"!type":"fn() -> !this"},"retry":{"!type":"fn() -> !this"},"send":{"!type":"fn() -> !this"}},"TRANSACTION_ID":{"!type":"number"}}},"dom":{"AbstractElement":{"!type":"fn(element: ?, forceNew: ?)","prototype":{"!proto":"Ext.Base.prototype","defaultUnit":{"!type":"string","!doc":"<p>The default unit to append to CSS values where a unit isn't provided.</p>\n"},"dom":{"!type":"+HTMLElement","!doc":"<p>The DOM element</p>\n"},"id":{"!type":"string","!doc":"<p>The DOM element ID</p>\n"},"styleHooks":{"!type":"?","!doc":"<p>This shared object is keyed by style name (e.g., 'margin-left' or 'marginLeft'). The\nvalues are objects with the following properties:</p>\n\n<ul>\n<li><code>name</code> (String) : The actual name to be presented to the DOM. This is typically the value\n  returned by <a href=\"#!/api/Ext.dom.AbstractElement-static-method-normalize\" rel=\"Ext.dom.AbstractElement-static-method-normalize\" class=\"docClass\">normalize</a>.</li>\n<li><code>get</code> (Function) : A hook function that will perform the get on this style. These\n  functions receive \"(dom, el)\" arguments. The <code>dom</code> parameter is the DOM Element\n  from which to get ths tyle. The <code>el</code> argument (may be null) is the <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a>.</li>\n<li><code>set</code> (Function) : A hook function that will perform the set on this style. These\n  functions receive \"(dom, value, el)\" arguments. The <code>dom</code> parameter is the DOM Element\n  from which to get ths tyle. The <code>value</code> parameter is the new value for the style. The\n  <code>el</code> argument (may be null) is the <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a>.</li>\n</ul>\n\n\n<p>The <code>this</code> pointer is the object that contains <code>get</code> or <code>set</code>, which means that\n<code>this.name</code> can be accessed if needed. The hook functions are both optional.</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_style.</strong></p>\n"},"trimRe":{"!type":"+RegExp"},"whitespaceRe":{"!type":"+RegExp"},"addCls":{"!type":"fn(className: string|[string]) -> +Ext.dom.Element","!doc":"<p>Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_style.</strong></p>\n"},"appendChild":{"!type":"fn(el: string|+HTMLElement|+Ext.dom.AbstractElement|?, returnDom?: bool) -> +Ext.dom.AbstractElement","!doc":"<p>Appends the passed element(s) to this element</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_insertion.</strong></p>\n"},"appendTo":{"!type":"fn(el: string|+HTMLElement|+Ext.dom.AbstractElement) -> +Ext.dom.AbstractElement","!doc":"<p>Appends this element to the passed element</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_insertion.</strong></p>\n"},"applyStyles":{"!type":"fn(styles: string|?|fn()) -> +Ext.dom.Element","!doc":"<p>More flexible version of <a href=\"#!/api/Ext.dom.AbstractElement-method-setStyle\" rel=\"Ext.dom.AbstractElement-method-setStyle\" class=\"docClass\">setStyle</a> for setting style properties.</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_style.</strong></p>\n"},"child":{"!type":"fn(selector: string, returnDom?: bool) -> +HTMLElement|+Ext.dom.Element","!doc":"<p>Selects a single <em>direct</em> child based on the passed CSS selector (the selector should not contain an id).</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_traversal.</strong></p>\n"},"contains":{"!type":"fn(el: +HTMLElement|string) -> bool","!doc":"<p>Returns true if this element is an ancestor of the passed element</p>\n"},"createChild":{"!type":"fn(config: ?, insertBefore?: +HTMLElement, returnDom?: bool) -> +Ext.dom.AbstractElement","!doc":"<p>Creates the passed DomHelper config and appends it to this element or optionally inserts it before the passed child element.</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_insertion.</strong></p>\n"},"destroy":{"!type":"fn() -> !this","!doc":"<p>Alias to <a href=\"#!/api/Ext.dom.AbstractElement-method-remove\" rel=\"Ext.dom.AbstractElement-method-remove\" class=\"docClass\">remove</a>.</p>\n"},"down":{"!type":"fn(selector: string, returnDom?: bool) -> +HTMLElement|+Ext.dom.Element","!doc":"<p>Selects a single child at any depth below this element based on the passed CSS selector (the selector should not contain an id).</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_traversal.</strong></p>\n"},"findParent":{"!type":"fn(selector: string, limit?: number|string|+HTMLElement|+Ext.Element, returnEl?: bool) -> +HTMLElement","!doc":"<p>Looks at this node and then at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_traversal.</strong></p>\n"},"findParentNode":{"!type":"fn(selector: string, limit?: number|string|+HTMLElement|+Ext.Element, returnEl?: bool) -> +HTMLElement","!doc":"<p>Looks at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_traversal.</strong></p>\n"},"first":{"!type":"fn(selector?: string, returnDom?: bool) -> +Ext.dom.Element|+HTMLElement","!doc":"<p>Gets the first child, skipping text nodes</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_traversal.</strong></p>\n"},"getActiveElement":{"!type":"fn() -> +HTMLElement","!doc":"<p>Returns the active element in the DOM. If the browser supports activeElement\non the document, this is returned. If not, the focus is tracked and the active\nelement is maintained internally.</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_static.</strong></p>\n"},"getAttribute":{"!type":"fn(name: string, namespace?: string) -> string","!doc":"<p>Returns the value of an attribute from the element's underlying DOM node.</p>\n"},"getBorderWidth":{"!type":"fn(side: string) -> number","!doc":"<p>Gets the width of the border(s) for the specified side(s)</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_style.</strong></p>\n"},"getById":{"!type":"fn(id: string, asDom?: bool)","!doc":"<p>Returns a child element of this element given its <code>id</code>.</p>\n"},"getCache":{"!type":"fn() -> !this"},"getHTML":{"!type":"fn() -> !this","!doc":"<p>Returns the innerHTML of an Element or an empty string if the element's\ndom no longer exists.</p>\n"},"getHeight":{"!type":"fn(contentHeight?: bool) -> number","!doc":"<p>Returns the offset height of the element</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_style.</strong></p>\n"},"getMargin":{"!type":"fn(sides?: string) -> ?|number","!doc":"<p>Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed,\nthen it returns the calculated width of the sides (see getPadding)</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_style.</strong></p>\n"},"getPadding":{"!type":"fn(side: string) -> number","!doc":"<p>Gets the width of the padding(s) for the specified side(s)</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_style.</strong></p>\n"},"getRightMarginFixCleaner":{"!type":"fn(target: +Ext.dom.Element) -> !this","!doc":"<p>Creates a function to call to clean up problems with the work-around for the\nWebKit RightMargin bug. The work-around is to add \"display: 'inline-block'\" to\nthe element before calling getComputedStyle and then to restore its original\ndisplay value. The problem with this is that it corrupts the selection of an\nINPUT or TEXTAREA element (as in the \"I-beam\" goes away but ths focus remains).\nTo cleanup after this, we need to capture the selection of any such element and\nthen restore it after we have restored the display style.</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_static.</strong></p>\n"},"getSize":{"!type":"fn(contentSize?: bool) -> ?","!doc":"<p>Returns the size of the element.</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_style.</strong></p>\n"},"getStyle":{"!type":"fn(property: string|[string], inline?: bool) -> string|?","!doc":"<p>Returns a named style property based on computed/currentStyle (primary) and\ninline-style if primary is not available.</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_style.</strong></p>\n"},"getValue":{"!type":"fn(asNumber: bool) -> string|number","!doc":"<p>Returns the value of the \"value\" attribute</p>\n"},"getViewSize":{"!type":"fn() -> ?","!doc":"<p>Returns the dimensions of the element available to lay content out in.</p>\n\n<p>If the element (or any ancestor element) has CSS style <code>display: none</code>, the dimensions will be zero.</p>\n\n<p>Example:</p>\n\n<pre><code>var vpSize = <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>().getViewSize();\n\n// all Windows created afterwards will have a default value of 90% height and 95% width\n<a href=\"#!/api/Ext.window.Window-static-method-override\" rel=\"Ext.window.Window-static-method-override\" class=\"docClass\">Ext.Window.override</a>({\n    width: vpSize.width * 0.9,\n    height: vpSize.height * 0.95\n});\n// To handle window resizing you would have to hook onto onWindowResize.\n</code></pre>\n\n<p>getViewSize utilizes clientHeight/clientWidth which excludes sizing of scrollbars.\nTo obtain the size including scrollbars, use getStyleSize</p>\n\n<p>Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_style.</strong></p>\n"},"getVisibilityMode":{"!type":"fn() -> !this"},"getWidth":{"!type":"fn(contentWidth?: bool) -> number","!doc":"<p>Returns the offset width of the element</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_style.</strong></p>\n"},"hasCls":{"!type":"fn(className: string) -> bool","!doc":"<p>Checks if the specified CSS class exists on this element's DOM node.</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_style.</strong></p>\n"},"hide":{"!type":"fn(animate?: bool|?) -> +Ext.Element","!doc":"<p>Hide this element - Uses display mode to determine whether to use \"display\" or \"visibility\". See <a href=\"#!/api/Ext.dom.AbstractElement-method-setVisible\" rel=\"Ext.dom.AbstractElement-method-setVisible\" class=\"docClass\">setVisible</a>.</p>\n"},"insertAfter":{"!type":"fn(el: string|+HTMLElement|+Ext.dom.AbstractElement) -> +Ext.dom.AbstractElement","!doc":"<p>Inserts this element after the passed element in the DOM</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_insertion.</strong></p>\n"},"insertBefore":{"!type":"fn(el: string|+HTMLElement|+Ext.dom.AbstractElement) -> +Ext.dom.AbstractElement","!doc":"<p>Inserts this element before the passed element in the DOM</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_insertion.</strong></p>\n"},"insertFirst":{"!type":"fn(el: string|+HTMLElement|+Ext.dom.AbstractElement|?) -> +Ext.dom.AbstractElement","!doc":"<p>Inserts (or creates) an element (or DomHelper config) as the first child of this element</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_insertion.</strong></p>\n"},"insertHtml":{"!type":"fn(where: string, html: string, returnEl?: bool) -> +HTMLElement|+Ext.dom.AbstractElement","!doc":"<p>Inserts an html fragment into this element</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_insertion.</strong></p>\n"},"insertSibling":{"!type":"fn(el: string|+HTMLElement|+Ext.dom.AbstractElement|?|[?], where?: string, returnDom?: bool) -> +Ext.dom.AbstractElement","!doc":"<p>Inserts (or creates) the passed element (or DomHelper config) as a sibling of this element</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_insertion.</strong></p>\n"},"is":{"!type":"fn(selector: string) -> bool","!doc":"<p>Returns true if this element matches the passed simple selector (e.g. div.some-class or span:first-child)</p>\n"},"isAncestor":{"!type":"fn(element: ?) -> !this","!doc":"<p><strong>Defined in override Ext.dom.AbstractElement_traversal.</strong></p>\n"},"isStyle":{"!type":"fn(style: string, value: string) -> bool","!doc":"<p>Checks if the current value of a style is equal to a given value.</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_style.</strong></p>\n"},"isTransparent":{"!type":"fn(prop: string) -> bool","!doc":"<p>Returns true if the value of the given property is visually transparent. This\nmay be due to a 'transparent' style value or an rgba value with 0 in the alpha\ncomponent.</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_style.</strong></p>\n"},"last":{"!type":"fn(selector?: string, returnDom?: bool) -> +Ext.dom.Element|+HTMLElement","!doc":"<p>Gets the last child, skipping text nodes</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_traversal.</strong></p>\n"},"mask":{"!type":"fn(msg?: string, msgCls?: string) -> !this","!doc":"<p>Puts a mask over this element to disable user interaction. Requires core.css.\nThis method can only be applied to elements which accept child nodes.</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_style.</strong></p>\n"},"matchNode":{"!type":"fn(dir: ?, start: ?, selector: ?, returnDom: ?) -> !this","!doc":"<p><strong>Defined in override Ext.dom.AbstractElement_traversal.</strong></p>\n"},"next":{"!type":"fn(selector?: string, returnDom?: bool) -> +Ext.dom.Element|+HTMLElement","!doc":"<p>Gets the next sibling, skipping text nodes</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_traversal.</strong></p>\n"},"parent":{"!type":"fn(selector?: string, returnDom?: bool) -> +Ext.dom.Element|+HTMLElement","!doc":"<p>Gets the parent node for this element, optionally chaining up trying to match a selector</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_traversal.</strong></p>\n"},"prev":{"!type":"fn(selector?: string, returnDom?: bool) -> +Ext.dom.Element|+HTMLElement","!doc":"<p>Gets the previous sibling, skipping text nodes</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_traversal.</strong></p>\n"},"query":{"!type":"fn(selector: string) -> [+HTMLElement]","!doc":"<p>Selects child nodes based on the passed CSS selector (the selector should not contain an id).</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_traversal.</strong></p>\n"},"radioCls":{"!type":"fn(className: string|[string]) -> +Ext.dom.Element","!doc":"<p>Adds one or more CSS classes to this element and removes the same class(es) from all siblings.</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_style.</strong></p>\n"},"remove":{"!type":"fn() -> !this","!doc":"<p>Removes this element's dom reference. Note that event and cache removal is handled at <a href=\"#!/api/Ext-method-removeNode\" rel=\"Ext-method-removeNode\" class=\"docClass\">Ext.removeNode</a></p>\n"},"removeCls":{"!type":"fn(className: string|[string]) -> +Ext.dom.Element","!doc":"<p>Removes one or more CSS classes from the element.</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_style.</strong></p>\n"},"repaint":{"!type":"fn() -> +Ext.dom.Element","!doc":"<p>Forces the browser to repaint this element</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_style.</strong></p>\n"},"replace":{"!type":"fn(el: string|+HTMLElement|+Ext.dom.AbstractElement) -> +Ext.dom.AbstractElement","!doc":"<p>Replaces the passed element with this element</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_insertion.</strong></p>\n"},"replaceCls":{"!type":"fn(oldClassName: string, newClassName: string) -> +Ext.dom.Element","!doc":"<p>Replaces a CSS class on the element with another.  If the old name does not exist, the new name will simply be added.</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_style.</strong></p>\n"},"replaceWith":{"!type":"fn(el: string|+HTMLElement|+Ext.dom.AbstractElement|?) -> +Ext.dom.AbstractElement","!doc":"<p>Replaces this element with the passed element</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_insertion.</strong></p>\n"},"select":{"!type":"fn(selector: string, unique?: bool) -> +Ext.CompositeElement","!doc":"<p>Creates a <a href=\"#!/api/Ext.dom.CompositeElement\" rel=\"Ext.dom.CompositeElement\" class=\"docClass\">Ext.CompositeElement</a> for child nodes based on the passed CSS selector (the selector should not contain an id).</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_traversal.</strong></p>\n"},"serializeForm":{"!type":"fn(form: ?) -> string","!doc":"<p>Serializes a DOM form into a url encoded string</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_static.</strong></p>\n"},"set":{"!type":"fn(o: ?, useSet?: bool) -> +Ext.dom.Element","!doc":"<p>Sets the passed attributes as attributes of this element (a style attribute can be a string, object or function)</p>\n"},"setHTML":{"!type":"fn(html: string) -> +Ext.Element","!doc":"<p>Set the innerHTML of this element</p>\n"},"setHeight":{"!type":"fn(height: number|string) -> +Ext.dom.Element","!doc":"<p>Set the height of this Element.</p>\n\n<pre><code>// change the height to 200px and animate with default configuration\n<a href=\"#!/api/Ext-method-fly\" rel=\"Ext-method-fly\" class=\"docClass\">Ext.fly</a>('elementId').setHeight(200, true);\n\n// change the height to 150px and animate with a custom configuration\n<a href=\"#!/api/Ext-method-fly\" rel=\"Ext-method-fly\" class=\"docClass\">Ext.fly</a>('elId').setHeight(150, {\n    duration : 500, // animation will have a duration of .5 seconds\n    // will change the content to \"finished\"\n    callback: function(){ this.<a href=\"#!/api/Ext.dom.AbstractElement-method-update\" rel=\"Ext.dom.AbstractElement-method-update\" class=\"docClass\">update</a>(\"finished\"); }\n});\n</code></pre>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_style.</strong></p>\n"},"setSize":{"!type":"fn(width: number|string, height: number|string) -> +Ext.dom.Element","!doc":"<p>Set the size of this Element. If animation is true, both width and height will be animated concurrently.</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_style.</strong></p>\n"},"setStyle":{"!type":"fn(property: string|?, value?: string) -> +Ext.dom.Element","!doc":"<p>Wrapper for setting style properties, also takes single object parameter of multiple styles.</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_style.</strong></p>\n"},"setVisibilityMode":{"!type":"fn(mode: ?) -> +Ext.dom.AbstractElement","!doc":"<p>Use this to change the visibility mode between <a href=\"#!/api/Ext.dom.AbstractElement-static-property-VISIBILITY\" rel=\"Ext.dom.AbstractElement-static-property-VISIBILITY\" class=\"docClass\">VISIBILITY</a>, <a href=\"#!/api/Ext.dom.AbstractElement-static-property-DISPLAY\" rel=\"Ext.dom.AbstractElement-static-property-DISPLAY\" class=\"docClass\">DISPLAY</a>, <a href=\"#!/api/Ext.dom.AbstractElement-static-property-OFFSETS\" rel=\"Ext.dom.AbstractElement-static-property-OFFSETS\" class=\"docClass\">OFFSETS</a> or <a href=\"#!/api/Ext.dom.AbstractElement-static-property-ASCLASS\" rel=\"Ext.dom.AbstractElement-static-property-ASCLASS\" class=\"docClass\">ASCLASS</a>.</p>\n"},"setVisible":{"!type":"fn(visible: bool, animate?: bool|?) -> +Ext.Element","!doc":"<p>Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use\nthe display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.</p>\n"},"setWidth":{"!type":"fn(width: number|string) -> +Ext.dom.Element","!doc":"<p>Set the width of this Element.</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_style.</strong></p>\n"},"show":{"!type":"fn(animate?: bool|?) -> +Ext.Element","!doc":"<p>Show this element - Uses display mode to determine whether to use \"display\" or \"visibility\". See <a href=\"#!/api/Ext.dom.AbstractElement-method-setVisible\" rel=\"Ext.dom.AbstractElement-method-setVisible\" class=\"docClass\">setVisible</a>.</p>\n"},"toggleCls":{"!type":"fn(className: string) -> +Ext.dom.Element","!doc":"<p>Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it).</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_style.</strong></p>\n"},"unmask":{"!type":"fn() -> !this","!doc":"<p>Removes a previously applied mask.</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_style.</strong></p>\n"},"up":{"!type":"fn(selector: string, limit?: number|string|+HTMLElement|+Ext.Element, returnDom?: bool) -> +Ext.Element","!doc":"<p>Walks up the DOM looking for a parent node that matches the passed simple selector (e.g. div.some-class or span:first-child).\nThis is a shortcut for findParentNode() that always returns an <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.dom.Element</a>.</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_traversal.</strong></p>\n"},"update":{"!type":"fn(html: string) -> +Ext.dom.Element","!doc":"<p>Update the innerHTML of this element</p>\n"},"wrap":{"!type":"fn(config?: ?, returnDom?: bool, selector?: string) -> +HTMLElement|+Ext.dom.AbstractElement","!doc":"<p>Creates and wraps this element with another element</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_insertion.</strong></p>\n"}},"ASCLASS":{"!type":"number","!doc":"<p>Visibility mode constant for use with <a href=\"#!/api/Ext.dom.Element-method-setVisibilityMode\" rel=\"Ext.dom.Element-method-setVisibilityMode\" class=\"docClass\">Ext.dom.Element.setVisibilityMode</a>.\nAdd or remove the <a href=\"#!/api/Ext.dom.Layer-cfg-visibilityCls\" rel=\"Ext.dom.Layer-cfg-visibilityCls\" class=\"docClass\">Ext.Layer.visibilityCls</a> class to hide the element.</p>\n"},"DISPLAY":{"!type":"number","!doc":"<p>Visibility mode constant for use with <a href=\"#!/api/Ext.dom.Element-method-setVisibilityMode\" rel=\"Ext.dom.Element-method-setVisibilityMode\" class=\"docClass\">Ext.dom.Element.setVisibilityMode</a>.\nUse the CSS 'display' property to hide the element.</p>\n"},"OFFSETS":{"!type":"number","!doc":"<p>Visibility mode constant for use with <a href=\"#!/api/Ext.dom.Element-method-setVisibilityMode\" rel=\"Ext.dom.Element-method-setVisibilityMode\" class=\"docClass\">Ext.dom.Element.setVisibilityMode</a>.\nUse CSS absolute positioning and top/left offsets to hide the element.</p>\n"},"VISIBILITY":{"!type":"number","!doc":"<p>Visibility mode constant for use with <a href=\"#!/api/Ext.dom.Element-method-setVisibilityMode\" rel=\"Ext.dom.Element-method-setVisibilityMode\" class=\"docClass\">Ext.dom.Element.setVisibilityMode</a>.\nUse the CSS 'visibility' property to hide the element.</p>\n\n<p>Note that in this mode, <a href=\"#!/api/Ext.dom.Element-method-isVisible\" rel=\"Ext.dom.Element-method-isVisible\" class=\"docClass\">isVisible</a> may return true\nfor an element even though it actually has a parent element that is hidden. For this\nreason, and in most cases, using the <a href=\"#!/api/Ext.dom.AbstractElement-static-property-OFFSETS\" rel=\"Ext.dom.AbstractElement-static-property-OFFSETS\" class=\"docClass\">OFFSETS</a> mode is a better choice.</p>\n"},"borders":{"!type":"?","!doc":"<p><strong>Defined in override Ext.dom.AbstractElement_static.</strong></p>\n"},"camelRe":{"!type":"+RegExp","!doc":"<p><strong>Defined in override Ext.dom.AbstractElement_static.</strong></p>\n"},"cssRe":{"!type":"+RegExp","!doc":"<p><strong>Defined in override Ext.dom.AbstractElement_static.</strong></p>\n"},"defaultUnit":{"!type":"string","!doc":"<p><strong>Defined in override Ext.dom.AbstractElement_static.</strong></p>\n"},"margins":{"!type":"?","!doc":"<p><strong>Defined in override Ext.dom.AbstractElement_static.</strong></p>\n"},"msRe":{"!type":"+RegExp","!doc":"<p><strong>Defined in override Ext.dom.AbstractElement_static.</strong></p>\n"},"opacityRe":{"!type":"+RegExp","!doc":"<p><strong>Defined in override Ext.dom.AbstractElement_static.</strong></p>\n"},"paddings":{"!type":"?","!doc":"<p><strong>Defined in override Ext.dom.AbstractElement_static.</strong></p>\n"},"propertyCache":{"!type":"?","!doc":"<p><strong>Defined in override Ext.dom.AbstractElement_static.</strong></p>\n"},"trimRe":{"!type":"+RegExp"},"unitRe":{"!type":"+RegExp","!doc":"<p><strong>Defined in override Ext.dom.AbstractElement_static.</strong></p>\n"},"whitespaceRe":{"!type":"+RegExp"},"addMethods":{"!type":"fn() -> !this"},"addToCache":{"!type":"fn(el: ?, id: ?) -> !this"},"addUnits":{"!type":"fn(size: ?, units: ?) -> !this","!doc":"<p>Test if size has a unit, otherwise appends the passed unit string, or the default for this Element.</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_static.</strong></p>\n"},"camelReplaceFn":{"!type":"fn(m: ?, a: ?) -> !this","!doc":"<p>private</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_static.</strong></p>\n"},"fly":{"!type":"fn(dom: string|+HTMLElement, named?: string) -> +Ext.dom.Element.Fly","!doc":"<p>Gets the singleton <a href=\"#!/api/Ext.dom.Element.Fly\" rel=\"Ext.dom.Element.Fly\" class=\"docClass\">flyweight</a> element, with the passed node as the active element.</p>\n\n<p>Because it is a singleton, this Flyweight does not have an ID, and must be used and discarded in a single line.\nYou may not keep and use the reference to this singleton over multiple lines because methods that you call\nmay themselves make use of <a href=\"#!/api/Ext-method-fly\" rel=\"Ext-method-fly\" class=\"docClass\">Ext.fly</a> and may change the DOM element to which the instance refers.</p>\n\n<p><a href=\"#!/api/Ext-method-fly\" rel=\"Ext-method-fly\" class=\"docClass\">Ext.fly</a> is alias for <a href=\"#!/api/Ext.dom.AbstractElement-static-method-fly\" rel=\"Ext.dom.AbstractElement-static-method-fly\" class=\"docClass\">fly</a>.</p>\n\n<p>Use this to make one-time references to DOM elements which are not going to be accessed again either by\napplication code, or by Ext's classes. If accessing an element which will be processed regularly, then <a href=\"#!/api/Ext-method-get\" rel=\"Ext-method-get\" class=\"docClass\">Ext.get</a> will be more appropriate to take advantage of the caching provided by the <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.dom.Element</a>\nclass.</p>\n"},"fromPoint":{"!type":"fn(x: number, y: number) -> string","!doc":"<p>Returns the top Element that is located at the passed coordinates</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_static.</strong></p>\n"},"get":{"!type":"fn(el: string|+HTMLElement|+Ext.Element) -> +Ext.dom.Element","!doc":"<p>Retrieves <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.dom.Element</a> objects. <a href=\"#!/api/Ext-method-get\" rel=\"Ext-method-get\" class=\"docClass\">Ext.get</a> is alias for <a href=\"#!/api/Ext.dom.Element-static-method-get\" rel=\"Ext.dom.Element-static-method-get\" class=\"docClass\">Ext.dom.Element.get</a>.</p>\n\n<p><strong>This method does not retrieve <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Component</a>s.</strong> This method retrieves <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.dom.Element</a>\nobjects which encapsulate DOM elements. To retrieve a Component by its ID, use <a href=\"#!/api/Ext.ComponentManager-method-get\" rel=\"Ext.ComponentManager-method-get\" class=\"docClass\">Ext.ComponentManager.get</a>.</p>\n\n<p>When passing an id, it should not include the <code>#</code> character that is used for a css selector.</p>\n\n<pre><code>// For an element with id 'foo'\n<a href=\"#!/api/Ext-method-get\" rel=\"Ext-method-get\" class=\"docClass\">Ext.get</a>('foo'); // Correct\n<a href=\"#!/api/Ext-method-get\" rel=\"Ext-method-get\" class=\"docClass\">Ext.get</a>('#foo'); // Incorrect\n</code></pre>\n\n<p>Uses simple caching to consistently return the same object. Automatically fixes if an object was recreated with\nthe same id via AJAX or DOM.</p>\n"},"getDocumentHeight":{"!type":"fn() -> number","!doc":"<p>Retrieves the document height</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_static.</strong></p>\n"},"getDocumentWidth":{"!type":"fn() -> number","!doc":"<p>Retrieves the document width</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_static.</strong></p>\n"},"getOrientation":{"!type":"fn() -> string","!doc":"<p>Retrieves the current orientation of the window. This is calculated by\ndeterming if the height is greater than the width.</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_static.</strong></p>\n"},"getViewSize":{"!type":"fn() -> ?","!doc":"<p>Retrieves the viewport size of the window.</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_static.</strong></p>\n"},"getViewportHeight":{"!type":"fn() -> number","!doc":"<p>Retrieves the viewport height of the window.</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_static.</strong></p>\n"},"getViewportWidth":{"!type":"fn() -> number","!doc":"<p>Retrieves the viewport width of the window.</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_static.</strong></p>\n"},"isAncestor":{"!type":"fn(p: ?, c: ?) -> !this","!doc":"<p><strong>Defined in override Ext.dom.AbstractElement_static.</strong></p>\n"},"mergeClsList":{"!type":"fn(clsList1: +Mixed, clsList2: +Mixed) -> [?]","!doc":"<p>Returns an array of unique class names based upon the input strings, or string arrays.</p>\n\n\n<p>The number of parameters is unlimited.</p>\n\n\n<p>Example</p>\n\n\n<pre><code>// Add x-invalid and x-mandatory classes, do not duplicate\nmyElement.dom.className = <a href=\"#!/api/Ext.dom.Element-static-method-mergeClsList\" rel=\"Ext.dom.Element-static-method-mergeClsList\" class=\"docClass\">Ext.core.Element.mergeClsList</a>(this.initialClasses, 'x-invalid x-mandatory');\n</code></pre>\n\n"},"normalize":{"!type":"fn(prop: string) -> string","!doc":"<p>Normalizes CSS property keys from dash delimited to camel case JavaScript Syntax.\nFor example:</p>\n\n<ul>\n<li>border-width -> borderWidth</li>\n<li>padding-top -> paddingTop</li>\n</ul>\n\n\n<p><strong>Defined in override Ext.dom.AbstractElement_static.</strong></p>\n"},"parseBox":{"!type":"fn(box: number|string) -> ?","!doc":"<p>Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations\n(e.g. 10, \"10\", \"10 10\", \"10 10 10\" and \"10 10 10 10\" are all valid options and would return the same result)</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_static.</strong></p>\n"},"parseStyles":{"!type":"fn(styles: string) -> ?","!doc":"<p>Converts a CSS string into an object with a property for each style.</p>\n\n<p>The sample code below would return an object with 2 properties, one\nfor background-color and one for color.</p>\n\n<pre><code>var css = 'background-color: red;color: blue; ';\nconsole.log(<a href=\"#!/api/Ext.dom.Element-static-method-parseStyles\" rel=\"Ext.dom.Element-static-method-parseStyles\" class=\"docClass\">Ext.dom.Element.parseStyles</a>(css));\n</code></pre>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_static.</strong></p>\n"},"removeCls":{"!type":"fn(existingClsList: +Mixed, removeClsList: +Mixed) -> [?]","!doc":"<p>Returns an array of unique class names deom the first parameter with all class names\nfrom the second parameter removed.</p>\n\n\n<p>Example</p>\n\n\n<pre><code>// Remove x-invalid and x-mandatory classes if present.\nmyElement.dom.className = <a href=\"#!/api/Ext.dom.Element-method-removeCls\" rel=\"Ext.dom.Element-method-removeCls\" class=\"docClass\">Ext.core.Element.removeCls</a>(this.initialClasses, 'x-invalid x-mandatory');\n</code></pre>\n\n"},"unitizeBox":{"!type":"fn(box: number|string|?, units: string) -> string","!doc":"<p>Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations\n(e.g. 10, \"10\", \"10 10\", \"10 10 10\" and \"10 10 10 10\" are all valid options and would return the same result)</p>\n\n<p><strong>Defined in override Ext.dom.AbstractElement_static.</strong></p>\n"}},"AbstractHelper":{"!doc":"<p>Abstract base class for <a href=\"#!/api/Ext.dom.Helper\" rel=\"Ext.dom.Helper\" class=\"docClass\">Ext.dom.Helper</a>.</p>\n","prototype":{"attributeTransform":{"!type":"?","!doc":"<p>Since cls &amp; for are reserved words, we need to transform them</p>\n"},"closeTags":{"!type":"?"},"confRe":{"!type":"+RegExp"},"decamelizeName":{"!type":"?"},"emptyTags":{"!type":"+RegExp"},"endRe":{"!type":"+RegExp"},"styleSepRe":{"!type":"+RegExp"},"append":{"!type":"fn(el: string|+HTMLElement|+Ext.Element, o: ?|string, returnElement?: bool) -> +HTMLElement|+Ext.Element","!doc":"<p>Creates new DOM element(s) and appends them to el.</p>\n"},"applyStyles":{"!type":"fn(el: string|+HTMLElement, styles: string|?|fn()) -> !this","!doc":"<p>Applies a style specification to an element.</p>\n"},"doInsert":{"!type":"fn(el: ?, o: ?, returnElement: ?, pos: ?, sibling: ?, append: ?) -> !this"},"generateMarkup":{"!type":"fn(spec: ?, buffer: ?) -> !this"},"generateStyles":{"!type":"fn(styles: ?, buffer?: [string]) -> string|[string]","!doc":"<p>Converts the styles from the given object to text. The styles are CSS style names\nwith their associated value.</p>\n\n<p>The basic form of this method returns a string:</p>\n\n<pre><code> var s = <a href=\"#!/api/Ext.DomHelper-method-generateStyles\" rel=\"Ext.DomHelper-method-generateStyles\" class=\"docClass\">Ext.DomHelper.generateStyles</a>({\n     backgroundColor: 'red'\n });\n\n // s = 'background-color:red;'\n</code></pre>\n\n<p>Alternatively, this method can append to an output array.</p>\n\n<pre><code> var buf = [];\n\n ...\n\n <a href=\"#!/api/Ext.DomHelper-method-generateStyles\" rel=\"Ext.DomHelper-method-generateStyles\" class=\"docClass\">Ext.DomHelper.generateStyles</a>({\n     backgroundColor: 'red'\n }, buf);\n</code></pre>\n\n<p>In this case, the style text is pushed on to the array and the array is returned.</p>\n"},"insertAfter":{"!type":"fn(el: string|+HTMLElement|+Ext.Element, o: ?, returnElement?: bool) -> +HTMLElement|+Ext.Element","!doc":"<p>Creates new DOM element(s) and inserts them after el.</p>\n"},"insertBefore":{"!type":"fn(el: string|+HTMLElement|+Ext.Element, o: ?|string, returnElement?: bool) -> +HTMLElement|+Ext.Element","!doc":"<p>Creates new DOM element(s) and inserts them before el.</p>\n"},"insertFirst":{"!type":"fn(el: string|+HTMLElement|+Ext.Element, o: ?|string, returnElement?: bool) -> +HTMLElement|+Ext.Element","!doc":"<p>Creates new DOM element(s) and inserts them as the first child of el.</p>\n"},"insertHtml":{"!type":"fn(where: string, el: +HTMLElement|+TextNode, html: string) -> +HTMLElement","!doc":"<p>Inserts an HTML fragment into the DOM.</p>\n"},"markup":{"!type":"fn(spec: ?) -> string","!doc":"<p>Returns the markup for the passed Element(s) config.</p>\n"},"overwrite":{"!type":"fn(el: string|+HTMLElement|+Ext.Element, o: ?|string, returnElement?: bool) -> +HTMLElement|+Ext.Element","!doc":"<p>Creates new DOM element(s) and overwrites the contents of el with them.</p>\n"}}},"AbstractQuery":{"prototype":{"is":{"!type":"fn(el: string|+HTMLElement|[?], selector: string) -> bool","!doc":"<p>Returns true if the passed element(s) match the passed simple selector (e.g. div.some-class or span:first-child)</p>\n"},"select":{"!type":"fn(selector: string, root?: +HTMLElement|string) -> [+HTMLElement]","!doc":"<p>Selects a group of elements.</p>\n"},"selectNode":{"!type":"fn(selector: string, root?: +HTMLElement|string) -> +HTMLElement","!doc":"<p>Selects a single element.</p>\n"}}},"CompositeElement":{"!doc":"<p>This class encapsulates a <i>collection</i> of DOM elements, providing methods to filter\nmembers, or to perform collective actions upon the whole set.</p>\n\n\n<p>Although they are not listed, this class supports all of the methods of <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.dom.Element</a> and\n<a href=\"#!/api/Ext.fx.Anim\" rel=\"Ext.fx.Anim\" class=\"docClass\">Ext.fx.Anim</a>. The methods from these classes will be performed on all the elements in this collection.</p>\n\n\n<p>All methods return <i>this</i> and can be chained.</p>\n\n\n<p>Usage:</p>\n\n<pre><code> var els = <a href=\"#!/api/Ext-method-select\" rel=\"Ext-method-select\" class=\"docClass\">Ext.select</a>(\"#some-el div.some-class\", true);\n // or select directly from an existing element\n var el = <a href=\"#!/api/Ext-method-get\" rel=\"Ext-method-get\" class=\"docClass\">Ext.get</a>('some-el');\n el.select('div.some-class', true);\n\n els.setWidth(100); // all elements become 100 width\n els.hide(true); // all elements fade out and hide\n // or\n els.setWidth(100).hide(true);\n </code></pre>\n\n","!type":"fn(elements: ?, root: ?)","prototype":{"!proto":"Ext.dom.CompositeElementLite.prototype","getElement":{"!type":"fn(el: ?) -> !this","!doc":"<p>private</p>\n"},"transformElement":{"!type":"fn(el: ?) -> !this","!doc":"<p>private</p>\n"}}},"CompositeElementLite":{"!doc":"<p>This class encapsulates a <em>collection</em> of DOM elements, providing methods to filter members, or to perform collective\nactions upon the whole set.</p>\n\n<p>Although they are not listed, this class supports all of the methods of <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.dom.Element</a> and\n<a href=\"#!/api/Ext.fx.Anim\" rel=\"Ext.fx.Anim\" class=\"docClass\">Ext.fx.Anim</a>. The methods from these classes will be performed on all the elements in this collection.</p>\n\n<p>Example:</p>\n\n<pre><code>var els = <a href=\"#!/api/Ext-method-select\" rel=\"Ext-method-select\" class=\"docClass\">Ext.select</a>(\"#some-el div.some-class\");\n// or select directly from an existing element\nvar el = <a href=\"#!/api/Ext-method-get\" rel=\"Ext-method-get\" class=\"docClass\">Ext.get</a>('some-el');\nel.select('div.some-class');\n\nels.setWidth(100); // all elements become 100 width\nels.hide(true); // all elements fade out and hide\n// or\nels.setWidth(100).hide(true);\n</code></pre>\n","!type":"fn(elements: ?, root: ?)","prototype":{"!proto":"Ext.Base.prototype","elements":{"!type":"[+HTMLElement]","!doc":"<p>The Array of DOM elements which this CompositeElement encapsulates.</p>\n\n<p>This will not <em>usually</em> be accessed in developers' code, but developers wishing to augment the capabilities\nof the CompositeElementLite class may use it when adding methods to the class.</p>\n\n<p>For example to add the <code>nextAll</code> method to the class to <strong>add</strong> all following siblings of selected elements,\nthe code would be</p>\n\n<pre><code><a href=\"#!/api/Ext-method-override\" rel=\"Ext-method-override\" class=\"docClass\">Ext.override</a>(<a href=\"#!/api/Ext.dom.CompositeElementLite\" rel=\"Ext.dom.CompositeElementLite\" class=\"docClass\">Ext.dom.CompositeElementLite</a>, {\n    nextAll: function() {\n        var elements = this.elements, i, l = elements.length, n, r = [], ri = -1;\n\n        // Loop through all elements in this Composite, accumulating\n        // an Array of all siblings.\n        for (i = 0; i &lt; l; i++) {\n            for (n = elements[i].nextSibling; n; n = n.nextSibling) {\n                r[++ri] = n;\n            }\n        }\n\n        // Add all found siblings to this Composite\n        return this.add(r);\n    }\n});\n</code></pre>\n"},"isComposite":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated CompositeElement, or subclass thereof.</p>\n"},"add":{"!type":"fn(els: [+HTMLElement]|+Ext.dom.CompositeElement) -> +Ext.dom.CompositeElement","!doc":"<p>Adds elements to this Composite object.</p>\n"},"addElements":{"!type":"fn(els: ?, root: ?) -> +Ext.dom.CompositeElementLite"},"addListener":{"!type":"fn(eventName: ?, handler: ?, scope: ?, opt: ?) -> +Ext.dom.CompositeElementLite","!doc":"<p>fixes scope with flyweight</p>\n"},"clear":{"!type":"fn(removeDom?: bool) -> !this","!doc":"<p>Removes all elements from this Composite.</p>\n"},"contains":{"!type":"fn(el: string|+HTMLElement|+Ext.Element|number) -> bool","!doc":"<p>Returns true if this composite contains the passed element.</p>\n"},"each":{"!type":"fn(fn: fn(), scope?: ?) -> +Ext.dom.CompositeElement","!doc":"<p>Calls the passed function for each element in this composite.</p>\n"},"fill":{"!type":"fn(els: [+HTMLElement]|+Ext.dom.CompositeElement) -> +Ext.dom.CompositeElement","!doc":"<p>Clears this Composite and adds the elements passed.</p>\n"},"filter":{"!type":"fn(selector: string|fn()) -> +Ext.dom.CompositeElement","!doc":"<p>Filters this composite to only elements that match the passed selector.</p>\n"},"first":{"!type":"fn() -> +Ext.dom.Element","!doc":"<p>Returns the first Element</p>\n"},"getCount":{"!type":"fn() -> number","!doc":"<p>Returns the number of elements in this Composite.</p>\n"},"getElement":{"!type":"fn(el: ?) -> !this","!doc":"<p>private</p>\n"},"indexOf":{"!type":"fn(el: string|+HTMLElement|+Ext.Element|number) -> number","!doc":"<p>Find the index of the passed element within the composite collection.</p>\n"},"insert":{"!type":"fn(index: ?, nodes: ?) -> !this"},"invoke":{"!type":"fn(fn: ?, args: ?) -> +Ext.dom.CompositeElementLite"},"item":{"!type":"fn(index: number) -> +Ext.dom.Element","!doc":"<p>Returns a flyweight Element of the dom element object at the specified index</p>\n"},"last":{"!type":"fn() -> +Ext.dom.Element","!doc":"<p>Returns the last Element</p>\n"},"removeElement":{"!type":"fn(el: string|+HTMLElement|+Ext.Element|number, removeDom?: bool) -> +Ext.dom.CompositeElement","!doc":"<p>Removes the specified element(s).</p>\n"},"replaceElement":{"!type":"fn(el: string|+HTMLElement|+Ext.Element|number, replacement: string|+Ext.Element, domReplace?: bool) -> +Ext.dom.CompositeElement","!doc":"<p>Replaces the specified element with the passed element.</p>\n"},"slice":{"!type":"fn(start?: number, end?: number) -> [+HTMLElement]","!doc":"<p>Gets a range nodes.</p>\n"},"transformElement":{"!type":"fn(el: ?) -> !this","!doc":"<p>private</p>\n"}},"importElementMethods":{"!type":"fn() -> !this","!doc":"<p>Copies all of the functions from <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.dom.Element</a>'s prototype onto CompositeElementLite's prototype.\nThis is called twice - once immediately below, and once again after additional <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.dom.Element</a>\nare added in Ext JS</p>\n"}},"Element":{"Fly":{"!doc":"<p>A non-persistent wrapper for a DOM element which may be used to execute methods of <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.dom.Element</a>\nupon a DOM element without creating an instance of <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.dom.Element</a>.</p>\n\n<p>A <strong>singleton</strong> instance of this class is returned when you use <a href=\"#!/api/Ext-method-fly\" rel=\"Ext-method-fly\" class=\"docClass\">Ext.fly</a></p>\n\n<p>Because it is a singleton, this Flyweight does not have an ID, and must be used and discarded in a single line.\nYou should not keep and use the reference to this singleton over multiple lines because methods that you call\nmay themselves make use of <a href=\"#!/api/Ext-method-fly\" rel=\"Ext-method-fly\" class=\"docClass\">Ext.fly</a> and may change the DOM element to which the instance refers.</p>\n","!type":"fn(element: string|+HTMLElement, forceNew?: bool)","prototype":{"!proto":"Ext.dom.Element.prototype","isFly":{"!type":"bool","!doc":"<p>This is <code>true</code> to identify Element flyweights</p>\n"},"attach":{"!type":"fn(dom: ?) -> +Ext.dom.Element.Fly","!doc":"<p>Attach this fliyweight instance to the passed DOM element.</p>\n\n<p>Note that a flightweight does <strong>not</strong> have an ID, and does not acquire the ID of the DOM element.</p>\n"}}},"!doc":"<p>Encapsulates a DOM element, adding simple DOM manipulation facilities, normalizing for browser differences.</p>\n\n<p>All instances of this class inherit the methods of <a href=\"#!/api/Ext.fx.Anim\" rel=\"Ext.fx.Anim\" class=\"docClass\">Ext.fx.Anim</a> making visual effects easily available to all\nDOM elements.</p>\n\n<p>Note that the events documented in this class are not Ext events, they encapsulate browser events. Some older browsers\nmay not support the full range of events. Which events are supported is beyond the control of Ext JS.</p>\n\n<p>Usage:</p>\n\n<pre><code>// by id\nvar el = <a href=\"#!/api/Ext-method-get\" rel=\"Ext-method-get\" class=\"docClass\">Ext.get</a>(\"my-div\");\n\n// by DOM element reference\nvar el = <a href=\"#!/api/Ext-method-get\" rel=\"Ext-method-get\" class=\"docClass\">Ext.get</a>(myDivElement);\n</code></pre>\n\n<h1>Animations</h1>\n\n<p>When an element is manipulated, by default there is no animation.</p>\n\n<pre><code>var el = <a href=\"#!/api/Ext-method-get\" rel=\"Ext-method-get\" class=\"docClass\">Ext.get</a>(\"my-div\");\n\n// no animation\nel.setWidth(100);\n</code></pre>\n\n<p>Many of the functions for manipulating an element have an optional \"animate\" parameter. This parameter can be\nspecified as boolean (true) for default animation effects.</p>\n\n<pre><code>// default animation\nel.setWidth(100, true);\n</code></pre>\n\n<p>To configure the effects, an object literal with animation options to use as the Element animation configuration\nobject can also be specified. Note that the supported Element animation configuration options are a subset of the\n<a href=\"#!/api/Ext.fx.Anim\" rel=\"Ext.fx.Anim\" class=\"docClass\">Ext.fx.Anim</a> animation options specific to Fx effects. The supported Element animation configuration options\nare:</p>\n\n<pre><code>Option    Default   Description\n--------- --------  ---------------------------------------------\n<a href=\"#!/api/Ext.fx.Anim-cfg-duration\" rel=\"Ext.fx.Anim-cfg-duration\" class=\"docClass\">duration</a>  350       The duration of the animation in milliseconds\n<a href=\"#!/api/Ext.fx.Anim-cfg-easing\" rel=\"Ext.fx.Anim-cfg-easing\" class=\"docClass\">easing</a>    easeOut   The easing method\n<a href=\"#!/api/Ext.fx.Anim-cfg-callback\" rel=\"Ext.fx.Anim-cfg-callback\" class=\"docClass\">callback</a>  none      A function to execute when the anim completes\n<a href=\"#!/api/Ext.fx.Anim-cfg-scope\" rel=\"Ext.fx.Anim-cfg-scope\" class=\"docClass\">scope</a>     this      The scope (this) of the callback function\n</code></pre>\n\n<p>Usage:</p>\n\n<pre><code>// Element animation options object\nvar opt = {\n    <a href=\"#!/api/Ext.fx.Anim-cfg-duration\" rel=\"Ext.fx.Anim-cfg-duration\" class=\"docClass\">duration</a>: 1000,\n    <a href=\"#!/api/Ext.fx.Anim-cfg-easing\" rel=\"Ext.fx.Anim-cfg-easing\" class=\"docClass\">easing</a>: 'elasticIn',\n    <a href=\"#!/api/Ext.fx.Anim-cfg-callback\" rel=\"Ext.fx.Anim-cfg-callback\" class=\"docClass\">callback</a>: this.foo,\n    <a href=\"#!/api/Ext.fx.Anim-cfg-scope\" rel=\"Ext.fx.Anim-cfg-scope\" class=\"docClass\">scope</a>: this\n};\n// animation with some options set\nel.setWidth(100, opt);\n</code></pre>\n\n<p>The Element animation object being used for the animation will be set on the options object as \"anim\", which allows\nyou to stop or manipulate the animation. Here is an example:</p>\n\n<pre><code>// using the \"anim\" property to get the Anim object\nif(opt.anim.isAnimated()){\n    opt.anim.stop();\n}\n</code></pre>\n\n<h1>Composite (Collections of) Elements</h1>\n\n<p>For working with collections of Elements, see <a href=\"#!/api/Ext.dom.CompositeElement\" rel=\"Ext.dom.CompositeElement\" class=\"docClass\">Ext.CompositeElement</a></p>\n\n<p><strong>From override Ext.rtl.dom.Element_position:</strong> This override adds RTL positioning methods to <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.dom.Element</a>.</p>\n","!type":"fn(element: string|+HTMLElement, forceNew?: bool)","prototype":{"!proto":"Ext.dom.AbstractElement.prototype","_positionTopRight":{"!type":"[?]","!doc":"<p><strong>Defined in override Ext.rtl.dom.Element_position.</strong></p>\n"},"autoBoxAdjust":{"!type":"bool","!doc":"<p>True to automatically adjust width and height settings for box-model issues.</p>\n"},"getTrueXY":{"!type":"?","!doc":"<p>Returns the <code>X,Y</code> position of the passed element in browser document space without regard\nto any RTL direction settings.</p>\n\n<p><strong>Defined in override Ext.dom.Element_position.</strong></p>\n"},"originalDisplay":{"!type":"string","!doc":"<p>The element's default display mode.</p>\n\n<p><strong>Defined in override Ext.dom.Element_fx.</strong></p>\n"},"addClsOnClick":{"!type":"fn(className: string, testFn?: fn(), scope?: ?) -> +Ext.dom.Element","!doc":"<p>Sets up event handlers to add and remove a css class when the mouse is down and then up on this element (a click effect)</p>\n\n<p><strong>Defined in override Ext.dom.Element_style.</strong></p>\n"},"addClsOnFocus":{"!type":"fn(className: string, testFn?: fn(), scope?: ?) -> +Ext.dom.Element","!doc":"<p>Sets up event handlers to add and remove a css class when this element has the focus</p>\n\n<p><strong>Defined in override Ext.dom.Element_style.</strong></p>\n"},"addClsOnOver":{"!type":"fn(className: string, testFn?: fn(), scope?: ?) -> +Ext.dom.Element","!doc":"<p>Sets up event handlers to add and remove a css class when the mouse is over this element</p>\n\n<p><strong>Defined in override Ext.dom.Element_style.</strong></p>\n"},"addKeyListener":{"!type":"fn(key: string|number|[number]|?, fn: fn(), scope?: ?) -> +Ext.util.KeyMap","!doc":"<p>Convenience method for constructing a KeyMap</p>\n"},"addKeyMap":{"!type":"fn(config: ?) -> +Ext.util.KeyMap","!doc":"<p>Creates a KeyMap for this element</p>\n"},"addListener":{"!type":"fn(eventName: string, fn: fn(), scope?: ?, options?: ?) -> +Ext.dom.Element","!doc":"<p>Shorthand for <a href=\"#!/api/Ext.dom.Element-method-on\" rel=\"Ext.dom.Element-method-on\" class=\"docClass\">on</a>.</p>\n"},"adjustDirect2DDimension":{"!type":"fn(dimension: ?) -> number","!doc":"<p>Returns 1 if the browser returns the subpixel dimension rounded to the lowest pixel.</p>\n\n<p><strong>Defined in override Ext.dom.Element_style.</strong></p>\n"},"anchorAnimX":{"!type":"fn(anchor: ?) -> !this","!doc":"<p><strong>Defined in override Ext.dom.Element_anim.</strong></p>\n"},"anim":{"!type":"fn(config: ?) -> !this","!doc":"<ul>\n<li>process the passed fx configuration.</li>\n</ul>\n\n\n<p><strong>Defined in override Ext.dom.Element_anim.</strong></p>\n"},"animate":{"!type":"fn(config: ?) -> +Ext.dom.Element","!doc":"<p>Performs custom animation on this Element.</p>\n\n<p>The following properties may be specified in <code>from</code>, <code>to</code>, and <code>keyframe</code> objects:</p>\n\n<ul>\n<li><p><code>x</code> - The page X position in pixels.</p></li>\n<li><p><code>y</code> - The page Y position in pixels</p></li>\n<li><p><code>left</code> - The element's CSS <code>left</code> value. Units must be supplied.</p></li>\n<li><p><code>top</code> - The element's CSS <code>top</code> value. Units must be supplied.</p></li>\n<li><p><code>width</code> - The element's CSS <code>width</code> value. Units must be supplied.</p></li>\n<li><p><code>height</code> - The element's CSS <code>height</code> value. Units must be supplied.</p></li>\n<li><p><code>scrollLeft</code> - The element's <code>scrollLeft</code> value.</p></li>\n<li><p><code>scrollTop</code> - The element's <code>scrollTop</code> value.</p></li>\n<li><p><code>opacity</code> - The element's <code>opacity</code> value. This must be a value between <code>0</code> and <code>1</code>.</p></li>\n</ul>\n\n\n<p><strong>Be aware</strong> that animating an Element which is being used by an Ext Component without in some way informing the\nComponent about the changed element state will result in incorrect Component behaviour. This is because the\nComponent will be using the old state of the element. To avoid this problem, it is now possible to directly\nanimate certain properties of Components.</p>\n\n<p><strong>Defined in override Ext.dom.Element_anim.</strong></p>\n"},"blur":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when an element loses focus either via the pointing device or by tabbing navigation.</p>\n"},"boxWrap":{"!type":"fn(class?: string) -> +Ext.dom.Element","!doc":"<p>Wraps the specified element with a special 9 element markup/CSS block that renders by default as\na gray container with a gradient background, rounded corners and a 4-way shadow.</p>\n\n<p>This special markup is used throughout Ext when box wrapping elements (<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>,\n<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a> when <a href=\"#!/api/Ext.panel.Panel-cfg-frame\" rel=\"Ext.panel.Panel-cfg-frame\" class=\"docClass\">frame=true</a>, <a href=\"#!/api/Ext.window.Window\" rel=\"Ext.window.Window\" class=\"docClass\">Ext.window.Window</a>).\nThe markup is of this form:</p>\n\n<pre><code>Ext.dom.Element.boxMarkup =\n'&lt;div class=\"{0}-tl\"&gt;&lt;div class=\"{0}-tr\"&gt;&lt;div class=\"{0}-tc\"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;\n&lt;div class=\"{0}-ml\"&gt;&lt;div class=\"{0}-mr\"&gt;&lt;div class=\"{0}-mc\"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;\n&lt;div class=\"{0}-bl\"&gt;&lt;div class=\"{0}-br\"&gt;&lt;div class=\"{0}-bc\"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;';\n</code></pre>\n\n<p>Example usage:</p>\n\n<pre><code>// Basic box wrap\n<a href=\"#!/api/Ext-method-get\" rel=\"Ext-method-get\" class=\"docClass\">Ext.get</a>(\"foo\").boxWrap();\n\n// You can also add a custom class and use CSS inheritance rules to customize the box look.\n// 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example\n// for how to create a custom box wrap style.\n<a href=\"#!/api/Ext-method-get\" rel=\"Ext-method-get\" class=\"docClass\">Ext.get</a>(\"foo\").boxWrap().addCls(\"x-box-blue\");\n</code></pre>\n\n<p><strong>Defined in override Ext.dom.Element_style.</strong></p>\n"},"cacheScrollValues":{"!type":"fn() -> fn()","!doc":"<p>When an element is moved around in the DOM, or is hidden using <code>display:none</code>, it loses layout, and therefore\nall scroll positions of all descendant elements are lost.</p>\n\n<p>This function caches them, and returns a function, which when run will restore the cached positions.\nIn the following example, the Panel is moved from one Container to another which will cause it to lose all scroll positions:</p>\n\n<pre><code>var restoreScroll = myPanel.el.cacheScrollValues();\nmyOtherContainer.add(myPanel);\nrestoreScroll();\n</code></pre>\n"},"center":{"!type":"fn(centerIn: string|+HTMLElement|+Ext.dom.Element) -> !this","!doc":"<p>Centers the Element in either the viewport, or another Element.</p>\n\n<p><strong>Defined in override Ext.dom.Element_position.</strong></p>\n"},"clean":{"!type":"fn(forceReclean?: bool) -> !this","!doc":"<p>Removes Empty, or whitespace filled text nodes. Combines adjacent text nodes.</p>\n"},"clearListeners":{"!type":"fn() -> +Ext.dom.Element","!doc":"<p>Alias for <a href=\"#!/api/Ext.dom.Element-method-removeAllListeners\" rel=\"Ext.dom.Element-method-removeAllListeners\" class=\"docClass\">removeAllListeners</a>.</p>\n"},"clearOpacity":{"!type":"fn() -> +Ext.dom.Element","!doc":"<p>Clears any opacity settings from this element. Required in some cases for IE.</p>\n\n<p><strong>Defined in override Ext.dom.Element_style.</strong></p>\n"},"clearPositioning":{"!type":"fn(value?: string) -> +Ext.dom.Element","!doc":"<p>Clears positioning back to the default when the document was loaded.</p>\n\n<p><strong>Defined in override Ext.dom.Element_position.</strong></p>\n"},"clip":{"!type":"fn() -> +Ext.dom.Element","!doc":"<p>Store the current overflow setting and clip overflow on the element - use <a href=\"#!/api/Ext.dom.Element-method-unclip\" rel=\"Ext.dom.Element-method-unclip\" class=\"docClass\">unclip</a> to remove</p>\n\n<p><strong>Defined in override Ext.dom.Element_style.</strong></p>\n"},"constrainScrollLeft":{"!type":"fn(left: ?) -> !this","!doc":"<p><strong>Defined in override Ext.dom.Element_scroll.</strong></p>\n"},"constrainScrollTop":{"!type":"fn(top: ?) -> !this","!doc":"<p><strong>Defined in override Ext.dom.Element_scroll.</strong></p>\n"},"createProxy":{"!type":"fn(config: string|?, renderTo?: string|+HTMLElement, matchBox?: bool) -> +Ext.dom.Element","!doc":"<p>Creates a proxy element of this element</p>\n"},"createShim":{"!type":"fn() -> +Ext.dom.Element","!doc":"<p>Creates an iframe shim for this element to keep selects and other windowed objects from\nshowing through.</p>\n"},"enableDisplayMode":{"!type":"fn(display?: string) -> +Ext.dom.Element","!doc":"<p>Convenience method for setVisibilityMode(Element.DISPLAY)</p>\n"},"fadeIn":{"!type":"fn(options?: ?) -> +Ext.Element","!doc":"<p>Fade an element in (from transparent to opaque). The ending opacity can be specified using the <code>opacity</code>\nconfig option. Usage:</p>\n\n<pre><code>// default: fade in from opacity 0 to 100%\nel.fadeIn();\n\n// custom: fade in from opacity 0 to 75% over 2 seconds\nel.fadeIn({ opacity: .75, duration: 2000});\n\n// common config options shown with default values\nel.fadeIn({\n    opacity: 1, //can be any value between 0 and 1 (e.g. .5)\n    easing: 'easeOut',\n    duration: 500\n});\n</code></pre>\n\n<p><strong>Defined in override Ext.dom.Element_anim.</strong></p>\n"},"fadeOut":{"!type":"fn(options?: ?) -> +Ext.Element","!doc":"<p>Fade an element out (from opaque to transparent). The ending opacity can be specified using the <code>opacity</code>\nconfig option. Note that IE may require <code>useDisplay:true</code> in order to redisplay correctly.\nUsage:</p>\n\n<pre><code>// default: fade out from the element's current opacity to 0\nel.fadeOut();\n\n// custom: fade out from the element's current opacity to 25% over 2 seconds\nel.fadeOut({ opacity: .25, duration: 2000});\n\n// common config options shown with default values\nel.fadeOut({\n    opacity: 0, //can be any value between 0 and 1 (e.g. .5)\n    easing: 'easeOut',\n    duration: 500,\n    remove: false,\n    useDisplay: false\n});\n</code></pre>\n\n<p><strong>Defined in override Ext.dom.Element_anim.</strong></p>\n"},"focus":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when an element receives focus either via the pointing device or by tab navigation.</p>\n"},"focusable":{"!type":"fn() -> bool","!doc":"<p>Alias for <a href=\"#!/api/Ext.dom.Element-method-isFocusable\" rel=\"Ext.dom.Element-method-isFocusable\" class=\"docClass\">isFocusable</a>.</p>\n"},"frame":{"!type":"fn(color?: string, count?: number, options?: ?) -> +Ext.dom.Element","!doc":"<p>Shows a ripple of exploding, attenuating borders to draw attention to an Element. Usage:</p>\n\n<pre><code>// default: a single light blue ripple\nel.frame();\n\n// custom: 3 red ripples lasting 3 seconds total\nel.frame(\"#ff0000\", 3, { duration: 3000 });\n\n// common config options shown with default values\nel.frame(\"#C3DAF9\", 1, {\n    duration: 1000 // duration of each individual ripple.\n    // Note: Easing is not configurable and will be ignored if included\n});\n</code></pre>\n\n<p><strong>Defined in override Ext.dom.Element_anim.</strong></p>\n"},"getAttributeNS":{"!type":"fn(namespace: string, name: string) -> string","!doc":"<p>Returns the value of a namespaced attribute from the element's underlying DOM node.</p>\n"},"getBottom":{"!type":"fn(local: bool) -> number","!doc":"<p>Gets the bottom Y coordinate of the element (element Y position + element height)</p>\n\n<p><strong>Defined in override Ext.dom.Element_position.</strong></p>\n"},"getCenterXY":{"!type":"fn() -> [number]","!doc":"<p>Calculates the x, y to center this element on the screen</p>\n\n<p><strong>Defined in override Ext.dom.Element_position.</strong></p>\n"},"getColor":{"!type":"fn(attr: string, defaultValue: string, prefix?: string) -> !this","!doc":"<p>Return the CSS color for the specified CSS attribute. rgb, 3 digit (like <code>#fff</code>) and valid values\nare convert to standard 6 digit hex color.</p>\n\n<p><strong>Defined in override Ext.dom.Element_style.</strong></p>\n"},"getComputedHeight":{"!type":"fn() -> number","!doc":"<p>Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders\nwhen needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements\nif a height has not been set using CSS.</p>\n\n<p><strong>Defined in override Ext.dom.Element_style.</strong></p>\n"},"getComputedWidth":{"!type":"fn() -> number","!doc":"<p>Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders\nwhen needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements\nif a width has not been set using CSS.</p>\n\n<p><strong>Defined in override Ext.dom.Element_style.</strong></p>\n"},"getFrameWidth":{"!type":"fn(sides: string) -> number","!doc":"<p>Returns the sum width of the padding and borders for the passed \"sides\". See getBorderWidth()\nfor more information about the sides.</p>\n\n<p><strong>Defined in override Ext.dom.Element_style.</strong></p>\n"},"getLeft":{"!type":"fn(local: bool) -> number","!doc":"<p>Gets the left X coordinate</p>\n\n<p><strong>Defined in override Ext.dom.Element_position.</strong></p>\n"},"getLoader":{"!type":"fn() -> +Ext.ElementLoader","!doc":"<p>Gets this element's <a href=\"#!/api/Ext.ElementLoader\" rel=\"Ext.ElementLoader\" class=\"docClass\">ElementLoader</a></p>\n"},"getLocalX":{"!type":"fn() -> number","!doc":"<p>Gets the local CSS X position for the element</p>\n\n<p><strong>Defined in override Ext.dom.Element_position.</strong></p>\n"},"getLocalXY":{"!type":"fn() -> [?]","!doc":"<p>Gets the local CSS X and Y position for the element</p>\n\n<p><strong>Defined in override Ext.dom.Element_position.</strong></p>\n"},"getLocalY":{"!type":"fn() -> number","!doc":"<p>Gets the local CSS Y position for the element</p>\n\n<p><strong>Defined in override Ext.dom.Element_position.</strong></p>\n"},"getPageBox":{"!type":"fn(asRegion?: bool) -> ?|+Ext.util.Region","!doc":"<p>Returns an object defining the area of this Element which can be passed to\n<a href=\"#!/api/Ext.util.Positionable-method-setBox\" rel=\"Ext.util.Positionable-method-setBox\" class=\"docClass\">Ext.util.Positionable.setBox</a> to set another Element's size/location to match this element.</p>\n\n<p><strong>Defined in override Ext.dom.Element_position.</strong></p>\n"},"getPositioning":{"!type":"fn(autoPx?: bool) -> ?","!doc":"<p>Gets an object with all CSS positioning properties. Useful along with</p>\n\n<h1>setPostioning to get snapshot before performing an update and then restoring</h1>\n\n<p>the element.</p>\n\n<p><strong>Defined in override Ext.dom.Element_position.</strong></p>\n\n<p><strong>Overridden in Ext.rtl.dom.Element_position.</strong></p>\n"},"getRight":{"!type":"fn(local: bool) -> number","!doc":"<p>Gets the right X coordinate of the element (element X position + element width)</p>\n\n<p><strong>Defined in override Ext.dom.Element_position.</strong></p>\n"},"getScroll":{"!type":"fn() -> ?","!doc":"<p>Returns the current scroll position of the element.</p>\n\n<p><strong>Defined in override Ext.dom.Element_scroll.</strong></p>\n"},"getScrollLeft":{"!type":"fn() -> number","!doc":"<p>Gets the left scroll position</p>\n\n<p><strong>Defined in override Ext.dom.Element_scroll.</strong></p>\n"},"getScrollTop":{"!type":"fn() -> number","!doc":"<p>Gets the top scroll position</p>\n\n<p><strong>Defined in override Ext.dom.Element_scroll.</strong></p>\n"},"getStyleSize":{"!type":"fn() -> ?","!doc":"<p>Returns the dimensions of the element available to lay content out in.</p>\n\n<p>getStyleSize utilizes prefers style sizing if present, otherwise it chooses the larger of offsetHeight/clientHeight and\noffsetWidth/clientWidth. To obtain the size excluding scrollbars, use getViewSize.</p>\n\n<p>Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.</p>\n\n<p><strong>Defined in override Ext.dom.Element_style.</strong></p>\n"},"getTextWidth":{"!type":"fn(text: string, min?: number, max?: number) -> number","!doc":"<p>Returns the width in pixels of the passed text, or the width of the text in this Element.</p>\n"},"getTop":{"!type":"fn(local: bool) -> number","!doc":"<p>Gets the top Y coordinate</p>\n\n<p><strong>Defined in override Ext.dom.Element_position.</strong></p>\n"},"getX":{"!type":"fn() -> number","!doc":"<p>Gets element X position in page coordinates</p>\n\n<p><strong>Defined in override Ext.dom.Element_position.</strong></p>\n"},"getXY":{"!type":"fn() -> [?]","!doc":"<p>Gets element X and Y positions in page coordinates</p>\n\n<p><strong>Defined in override Ext.dom.Element_position.</strong></p>\n"},"getY":{"!type":"fn() -> number","!doc":"<p>Gets element Y position in page coordinates</p>\n\n<p><strong>Defined in override Ext.dom.Element_position.</strong></p>\n"},"ghost":{"!type":"fn(anchor?: string, options?: ?) -> +Ext.dom.Element","!doc":"<p>Slides the element while fading it out of view. An anchor point can be optionally passed to set the ending point\nof the effect. Usage:</p>\n\n<pre><code>// default: slide the element downward while fading out\nel.ghost();\n\n// custom: slide the element out to the right with a 2-second duration\nel.ghost('r', { duration: 2000 });\n\n// common config options shown with default values\nel.ghost('b', {\n    easing: 'easeOut',\n    duration: 500\n});\n</code></pre>\n\n<p><strong>Defined in override Ext.dom.Element_anim.</strong></p>\n"},"hasMetrics":{"!type":"fn() -> !this","!doc":"<p>Determine if the Element has a relevant height and width available based\nupon current logical visibility state</p>\n\n<p><strong>Defined in override Ext.dom.Element_fx.</strong></p>\n"},"hide":{"!type":"fn(animate?: bool|?) -> +Ext.dom.Element","!doc":"<p>Hide this element - Uses display mode to determine whether to use \"display\" or \"visibility\". See <a href=\"#!/api/Ext.dom.Element-method-setVisible\" rel=\"Ext.dom.Element-method-setVisible\" class=\"docClass\">setVisible</a>.</p>\n\n<p><strong>Defined in override Ext.dom.Element_fx.</strong></p>\n"},"highlight":{"!type":"fn(color?: string, options?: ?) -> +Ext.dom.Element","!doc":"<p>Highlights the Element by setting a color (applies to the background-color by default, but can be changed using\nthe \"attr\" config option) and then fading back to the original color. If no original color is available, you\nshould provide the \"endColor\" config option which will be cleared after the animation. Usage:</p>\n\n<pre><code>// default: highlight background to yellow\nel.highlight();\n\n// custom: highlight foreground text to blue for 2 seconds\nel.highlight(\"0000ff\", { attr: 'color', duration: 2000 });\n\n// common config options shown with default values\nel.highlight(\"ffff9c\", {\n    attr: \"backgroundColor\", //can be any valid CSS property (attribute) that supports a color value\n    endColor: (current color) or \"ffffff\",\n    easing: 'easeIn',\n    duration: 1000\n});\n</code></pre>\n\n<p><strong>Defined in override Ext.dom.Element_anim.</strong></p>\n"},"hover":{"!type":"fn(overFn: fn(), outFn: fn(), scope?: ?, options?: ?) -> +Ext.dom.Element","!doc":"<p>Sets up event handlers to call the passed functions when the mouse is moved into and out of the Element.</p>\n"},"initDD":{"!type":"fn(group: string, config: ?, overrides: ?) -> +Ext.dd.DD","!doc":"<p>Initializes a <a href=\"#!/api/Ext.dd.DD\" rel=\"Ext.dd.DD\" class=\"docClass\">Ext.dd.DD</a> drag drop object for this element.</p>\n\n<p><strong>Defined in override Ext.dom.Element_dd.</strong></p>\n"},"initDDProxy":{"!type":"fn(group: string, config: ?, overrides: ?) -> +Ext.dd.DDProxy","!doc":"<p>Initializes a <a href=\"#!/api/Ext.dd.DDProxy\" rel=\"Ext.dd.DDProxy\" class=\"docClass\">Ext.dd.DDProxy</a> object for this element.</p>\n\n<p><strong>Defined in override Ext.dom.Element_dd.</strong></p>\n"},"initDDTarget":{"!type":"fn(group: string, config: ?, overrides: ?) -> +Ext.dd.DDTarget","!doc":"<p>Initializes a <a href=\"#!/api/Ext.dd.DDTarget\" rel=\"Ext.dd.DDTarget\" class=\"docClass\">Ext.dd.DDTarget</a> object for this element.</p>\n\n<p><strong>Defined in override Ext.dom.Element_dd.</strong></p>\n"},"isBorderBox":{"!type":"fn() -> bool","!doc":"<p>Tests various css rules/browsers to determine if this element uses a border box</p>\n"},"isDisplayed":{"!type":"fn() -> bool","!doc":"<p>Returns true if display is not \"none\"</p>\n"},"isFocusable":{"!type":"fn(asFocusEl: ?) -> bool","!doc":"<p>Checks whether this element can be focused.</p>\n"},"isMasked":{"!type":"fn() -> bool","!doc":"<p>Returns true if this element is masked. Also re-centers any displayed message within the mask.</p>\n"},"isScrollable":{"!type":"fn() -> bool","!doc":"<p>Returns true if this element is scrollable.</p>\n\n<p><strong>Defined in override Ext.dom.Element_scroll.</strong></p>\n"},"isVisible":{"!type":"fn(deep?: bool) -> bool","!doc":"<p>Checks whether the element is currently visible using both visibility and display properties.</p>\n"},"load":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when the user agent finishes loading all content within the element. Only supported by window, frames,\nobjects and images.</p>\n"},"mask":{"!type":"fn(msg?: string, msgCls?: string) -> +Ext.dom.Element","!doc":"<p>Puts a mask over this element to disable user interaction. Requires core.css.\nThis method can only be applied to elements which accept child nodes.</p>\n"},"monitorMouseLeave":{"!type":"fn(delay: number, handler: fn(), scope?: ?) -> ?","!doc":"<p>Monitors this Element for the mouse leaving. Calls the function after the specified delay only if\nthe mouse was not moved back into the Element within the delay. If the mouse <em>was</em> moved\nback in, the function is not called.</p>\n"},"moveTo":{"!type":"fn(x: number, y: number, animate?: bool|?) -> +Ext.dom.Element","!doc":"<p>Sets the position of the element in page coordinates.</p>\n\n<p><strong>Defined in override Ext.dom.Element_position.</strong></p>\n"},"needsTabIndex":{"!type":"fn() -> !this","!doc":"<p>Returns true if this element needs an explicit tabIndex to make it focusable. Input fields, text areas, buttons\nanchors elements <strong>with an href</strong> etc do not need a tabIndex, but structural elements do.</p>\n"},"on":{"!type":"fn(eventName: string, fn: fn(), scope?: ?, options?: ?) -> +Ext.dom.Element","!doc":"<p>Appends an event handler to this element.</p>\n"},"pause":{"!type":"fn(seconds: number) -> +Ext.Element","!doc":"<p>Creates a pause before any subsequent queued effects begin. If there are no effects queued after the pause it will\nhave no effect. Usage:</p>\n\n<pre><code>el.pause(1);\n</code></pre>\n\n<p><strong>Defined in override Ext.dom.Element_anim.</strong></p>\n"},"position":{"!type":"fn(pos?: string, zIndex?: number, x?: number, y?: number) -> !this","!doc":"<p>Initializes positioning on this element. If a desired position is not passed,\nit will make the the element positioned relative IF it is not already positioned.</p>\n\n<p><strong>Defined in override Ext.dom.Element_position.</strong></p>\n"},"puff":{"!type":"fn(options?: ?) -> +Ext.dom.Element","!doc":"<p>Fades the element out while slowly expanding it in all directions. When the effect is completed, the element will\nbe hidden (visibility = 'hidden') but block elements will still take up space in the document. Usage:</p>\n\n<pre><code>// default\nel.puff();\n\n// common config options shown with default values\nel.puff({\n    easing: 'easeOut',\n    duration: 500,\n    useDisplay: false\n});\n</code></pre>\n\n<p><strong>Defined in override Ext.dom.Element_anim.</strong></p>\n"},"purgeAllListeners":{"!type":"fn() -> +Ext.dom.Element","!doc":"<p>Recursively removes all previous added listeners from this element and its children</p>\n"},"relayEvent":{"!type":"fn(eventName: string, observable: ?) -> !this","!doc":"<p>Create an event handler on this element such that when the event fires and is handled by this element,\nit will be relayed to another object (i.e., fired again as if it originated from that object instead).</p>\n"},"removeAllListeners":{"!type":"fn() -> +Ext.dom.Element","!doc":"<p>Removes all previous added listeners from this element</p>\n"},"removeListener":{"!type":"fn(eventName: string, fn: fn(), scope: ?) -> +Ext.dom.Element","!doc":"<p>Shorthand for <a href=\"#!/api/Ext.dom.Element-method-un\" rel=\"Ext.dom.Element-method-un\" class=\"docClass\">un</a>.</p>\n"},"rtlGetLocalX":{"!type":"fn() -> !this","!doc":"<p><strong>Defined in override Ext.rtl.dom.Element_position.</strong></p>\n"},"rtlGetLocalXY":{"!type":"fn() -> !this","!doc":"<p><strong>Defined in override Ext.rtl.dom.Element_position.</strong></p>\n"},"rtlSetLocalX":{"!type":"fn(x: ?) -> !this","!doc":"<p><strong>Defined in override Ext.rtl.dom.Element_position.</strong></p>\n"},"rtlSetLocalXY":{"!type":"fn(x: ?, y: ?) -> !this","!doc":"<p><strong>Defined in override Ext.rtl.dom.Element_position.</strong></p>\n"},"rtlSetX":{"!type":"fn(x: ?, animate: ?) -> !this","!doc":"<p><strong>Defined in override Ext.rtl.dom.Element_position.</strong></p>\n"},"rtlSetXY":{"!type":"fn(xy: ?, animate: ?) -> !this","!doc":"<p><strong>Defined in override Ext.rtl.dom.Element_position.</strong></p>\n"},"rtlSetY":{"!type":"fn(y: ?, animate: ?) -> !this","!doc":"<p><strong>Defined in override Ext.rtl.dom.Element_position.</strong></p>\n"},"rtlTranslatePoints":{"!type":"fn(x: ?, y: ?) -> !this","!doc":"<p><strong>Defined in override Ext.rtl.dom.Element_position.</strong></p>\n"},"rtlTranslateXY":{"!type":"fn(x: ?, y: ?) -> !this","!doc":"<p><strong>Defined in override Ext.rtl.dom.Element_position.</strong></p>\n"},"scale":{"!type":"fn(width: number, height: number, options?: ?) -> +Ext.Element","!doc":"<p>Animates the transition of an element's dimensions from a starting height/width to an ending height/width. This\nmethod is a convenience implementation of <a href=\"#!/api/Ext.dom.Element-method-shift\" rel=\"Ext.dom.Element-method-shift\" class=\"docClass\">shift</a>. Usage:</p>\n\n<pre><code>// change height and width to 100x100 pixels\nel.scale(100, 100);\n\n// common config options shown with default values.  The height and width will default to\n// the element's existing values if passed as null.\nel.scale(\n    [element's width],\n    [element's height], {\n        easing: 'easeOut',\n        duration: 350\n    }\n);\n</code></pre>\n\n<p><strong>Defined in override Ext.dom.Element_anim.</strong></p>\n"},"scroll":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when a document view is scrolled.</p>\n"},"scrollBy":{"!type":"fn(deltaX: number|[number]|?, deltaY: number|bool|?, animate: bool|?) -> +Ext.Element","!doc":"<p>Scrolls this element by the passed delta values, optionally animating.</p>\n\n<p>All of the following are equivalent:</p>\n\n<pre><code> el.scrollBy(10, 10, true);\n el.scrollBy([10, 10], true);\n el.scrollBy({ x: 10, y: 10 }, true);\n</code></pre>\n\n<p><strong>Defined in override Ext.dom.Element_scroll.</strong></p>\n"},"scrollChildIntoView":{"!type":"fn(child: ?, hscroll: ?) -> !this","!doc":"<p><strong>Defined in override Ext.dom.Element_scroll.</strong></p>\n"},"scrollIntoView":{"!type":"fn(container?: string|+HTMLElement|+Ext.Element, hscroll?: bool, animate?: bool|?, highlight?: bool) -> +Ext.dom.Element","!doc":"<p>Scrolls this element into view within the passed container.</p>\n\n<p><strong>Defined in override Ext.dom.Element_scroll.</strong></p>\n"},"scrollTo":{"!type":"fn(side: string, value: number, animate?: bool|?) -> +Ext.Element","!doc":"<p>Scrolls this element the specified scroll point. It does NOT do bounds checking so\nif you scroll to a weird value it will try to do it. For auto bounds checking, use <a href=\"#!/api/Ext.dom.Element-event-scroll\" rel=\"Ext.dom.Element-event-scroll\" class=\"docClass\">scroll</a>.</p>\n\n<p><strong>Defined in override Ext.dom.Element_scroll.</strong></p>\n"},"selectable":{"!type":"fn() -> +Ext.Element","!doc":"<p>Enable text selection for this element (normalized across browsers)</p>\n\n<p><strong>Defined in override Ext.dom.Element_style.</strong></p>\n"},"setBottom":{"!type":"fn(bottom: number|string) -> +Ext.dom.Element","!doc":"<p>Sets the element's CSS bottom style.</p>\n\n<p><strong>Defined in override Ext.dom.Element_position.</strong></p>\n"},"setBounds":{"!type":"fn(x: number, y: number, width: number|string, height: number|string, animate?: bool|?) -> +Ext.dom.Element","!doc":"<p>Sets the element's position and size in one shot. If animation is true then\nwidth, height, x and y will be animated concurrently.</p>\n\n<p><strong>Defined in override Ext.dom.Element_position.</strong></p>\n"},"setDisplayed":{"!type":"fn(value: bool|string) -> +Ext.dom.Element","!doc":"<p>Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.</p>\n\n<p><strong>Defined in override Ext.dom.Element_fx.</strong></p>\n"},"setHorizontal":{"!type":"fn() -> !this","!doc":"<p>Removes \"vertical\" state from this element (reverses everything done\nby <a href=\"#!/api/Ext.dom.Element-method-setVertical\" rel=\"Ext.dom.Element-method-setVertical\" class=\"docClass\">setVertical</a>).</p>\n\n<p><strong>Defined in override Ext.dom.Element_style.</strong></p>\n"},"setLeft":{"!type":"fn(left: number|string) -> +Ext.dom.Element","!doc":"<p>Sets the element's left position directly using CSS style\n(instead of <a href=\"#!/api/Ext.dom.Element-method-setX\" rel=\"Ext.dom.Element-method-setX\" class=\"docClass\">setX</a>).</p>\n\n<p><strong>Defined in override Ext.dom.Element_position.</strong></p>\n"},"setLeftTop":{"!type":"fn(left: number|string, top: number|string) -> +Ext.dom.Element","!doc":"<p>Sets the element's left and top positions directly using CSS style</p>\n\n<p><strong>Defined in override Ext.dom.Element_position.</strong></p>\n"},"setLocation":{"!type":"fn(x: number, y: number, animate?: bool|?) -> +Ext.dom.Element","!doc":"<p>Sets the position of the element in page coordinates.</p>\n\n<p><strong>Defined in override Ext.dom.Element_position.</strong></p>\n"},"setOpacity":{"!type":"fn(opacity: number, animate?: bool|?) -> +Ext.dom.Element","!doc":"<p>Set the opacity of the element</p>\n\n<p><strong>Defined in override Ext.dom.Element_style.</strong></p>\n"},"setPositioning":{"!type":"fn(posCfg: ?) -> +Ext.dom.Element","!doc":"<p>Set positioning with an object returned by <a href=\"#!/api/Ext.dom.Element-method-getPositioning\" rel=\"Ext.dom.Element-method-getPositioning\" class=\"docClass\">getPositioning</a>.</p>\n\n<p><strong>Defined in override Ext.dom.Element_position.</strong></p>\n"},"setRight":{"!type":"fn(right: number|string) -> +Ext.dom.Element","!doc":"<p>Sets the element's CSS right style.</p>\n\n<p><strong>Defined in override Ext.dom.Element_position.</strong></p>\n"},"setScrollLeft":{"!type":"fn(left: number) -> +Ext.dom.Element","!doc":"<p>Sets the left scroll position</p>\n\n<p><strong>Defined in override Ext.dom.Element_scroll.</strong></p>\n"},"setScrollTop":{"!type":"fn(top: number) -> +Ext.dom.Element","!doc":"<p>Sets the top scroll position</p>\n\n<p><strong>Defined in override Ext.dom.Element_scroll.</strong></p>\n"},"setTop":{"!type":"fn(top: number|string) -> +Ext.dom.Element","!doc":"<p>Sets the element's top position directly using CSS style\n(instead of <a href=\"#!/api/Ext.dom.Element-method-setY\" rel=\"Ext.dom.Element-method-setY\" class=\"docClass\">setY</a>).</p>\n\n<p><strong>Defined in override Ext.dom.Element_position.</strong></p>\n"},"setVertical":{"!type":"fn(angle: number, cls: string) -> !this","!doc":"<p>Changes this Element's state to \"vertical\" (rotated 90 or 270 degrees).\nThis involves inverting the getters and setters for height and width,\nand applying hooks for rotating getters and setters for border/margin/padding.\n(getWidth becomes getHeight and vice versa), setStyle and getStyle will\nalso return the inverse when height or width are being operated on.</p>\n\n<p><strong>Defined in override Ext.dom.Element_style.</strong></p>\n"},"setVisible":{"!type":"fn(visible: bool, animate?: bool|?) -> +Ext.dom.Element","!doc":"<p>Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use\nthe display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.</p>\n\n<p><strong>Defined in override Ext.dom.Element_fx.</strong></p>\n"},"setX":{"!type":"fn(x: ?, animate: ?) -> !this","!doc":"<p><strong>Defined in override Ext.rtl.dom.Element_position.</strong></p>\n"},"setXY":{"!type":"fn(xy: ?, animate: ?) -> !this","!doc":"<p><strong>Defined in override Ext.rtl.dom.Element_position.</strong></p>\n"},"setY":{"!type":"fn(y: ?, animate: ?) -> !this","!doc":"<p><strong>Defined in override Ext.rtl.dom.Element_position.</strong></p>\n"},"shift":{"!type":"fn(options: ?) -> +Ext.Element","!doc":"<p>Animates the transition of any combination of an element's dimensions, xy position and/or opacity. Any of these\nproperties not specified in the config object will not be changed. This effect requires that at least one new\ndimension, position or opacity setting must be passed in on the config object in order for the function to have\nany effect. Usage:</p>\n\n<pre><code>// slide the element horizontally to x position 200 while changing the height and opacity\nel.shift({ x: 200, height: 50, opacity: .8 });\n\n// common config options shown with default values.\nel.shift({\n    width: [element's width],\n    height: [element's height],\n    x: [element's x position],\n    y: [element's y position],\n    opacity: [element's opacity],\n    easing: 'easeOut',\n    duration: 350\n});\n</code></pre>\n\n<p><strong>Defined in override Ext.dom.Element_anim.</strong></p>\n"},"show":{"!type":"fn(animate?: bool|?) -> +Ext.dom.Element","!doc":"<p>Show this element - Uses display mode to determine whether to use \"display\" or \"visibility\". See <a href=\"#!/api/Ext.dom.Element-method-setVisible\" rel=\"Ext.dom.Element-method-setVisible\" class=\"docClass\">setVisible</a>.</p>\n\n<p><strong>Defined in override Ext.dom.Element_fx.</strong></p>\n"},"slideIn":{"!type":"fn(anchor?: string, options?: ?) -> +Ext.dom.Element","!doc":"<p>Slides the element into view. An anchor point can be optionally passed to set the point of origin for the slide\neffect. This function automatically handles wrapping the element with a fixed-size container if needed. See the\n<a href=\"#!/api/Ext.fx.Anim\" rel=\"Ext.fx.Anim\" class=\"docClass\">Ext.fx.Anim</a> class overview for valid anchor point options. Usage:</p>\n\n<pre><code>// default: slide the element in from the top\nel.slideIn();\n\n// custom: slide the element in from the right with a 2-second duration\nel.slideIn('r', { duration: 2000 });\n\n// common config options shown with default values\nel.slideIn('t', {\n    easing: 'easeOut',\n    duration: 500\n});\n</code></pre>\n\n<p><strong>Defined in override Ext.dom.Element_anim.</strong></p>\n"},"slideOut":{"!type":"fn(anchor?: string, options?: ?) -> +Ext.dom.Element","!doc":"<p>Slides the element out of view. An anchor point can be optionally passed to set the end point for the slide\neffect. When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will\nstill take up space in the document. The element must be removed from the DOM using the 'remove' config option if\ndesired. This function automatically handles wrapping the element with a fixed-size container if needed. See the\n<a href=\"#!/api/Ext.fx.Anim\" rel=\"Ext.fx.Anim\" class=\"docClass\">Ext.fx.Anim</a> class overview for valid anchor point options. Usage:</p>\n\n<pre><code>// default: slide the element out to the top\nel.slideOut();\n\n// custom: slide the element out to the right with a 2-second duration\nel.slideOut('r', { duration: 2000 });\n\n// common config options shown with default values\nel.slideOut('t', {\n    easing: 'easeOut',\n    duration: 500,\n    remove: false,\n    useDisplay: false\n});\n</code></pre>\n\n<p><strong>Defined in override Ext.dom.Element_anim.</strong></p>\n"},"swallowEvent":{"!type":"fn(eventName: string|[string], preventDefault?: bool) -> +Ext.dom.Element","!doc":"<p>Stops the specified event(s) from bubbling and optionally prevents the default action</p>\n"},"switchOff":{"!type":"fn(options?: ?) -> +Ext.dom.Element","!doc":"<p>Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).\nWhen the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still\ntake up space in the document. The element must be removed from the DOM using the 'remove' config option if\ndesired. Usage:</p>\n\n<pre><code>// default\nel.switchOff();\n\n// all config options shown with default values\nel.switchOff({\n    easing: 'easeIn',\n    duration: .3,\n    remove: false,\n    useDisplay: false\n});\n</code></pre>\n\n<p><strong>Defined in override Ext.dom.Element_anim.</strong></p>\n"},"syncContent":{"!type":"fn(source: ?) -> !this","!doc":"<p>.\nCurrently used for updating grid cells without modifying DOM structure</p>\n\n<p>Synchronizes content of this Element with the content of the passed element.</p>\n\n<p>Style and CSS class are copied from source into this Element, and contents are synched\nrecursively. If a child node is a text node, the textual data is copied.</p>\n"},"toggle":{"!type":"fn(animate?: bool|?) -> +Ext.dom.Element","!doc":"<p>Toggles the element's visibility or display, depending on visibility mode.</p>\n\n<p><strong>Defined in override Ext.dom.Element_fx.</strong></p>\n"},"translatePoints":{"!type":"fn(x: ?, y: ?) -> !this","!doc":"<p><strong>Defined in override Ext.rtl.dom.Element_position.</strong></p>\n"},"translateXY":{"!type":"fn(x: ?, y: ?) -> !this","!doc":"<p><strong>Defined in override Ext.rtl.dom.Element_position.</strong></p>\n"},"un":{"!type":"fn(eventName: string, fn: fn(), scope: ?) -> +Ext.dom.Element","!doc":"<p>Removes an event handler from this element.</p>\n\n<p><strong>Note</strong>: if a <em>scope</em> was explicitly specified when <a href=\"#!/api/Ext.dom.Element-method-on\" rel=\"Ext.dom.Element-method-on\" class=\"docClass\">adding</a> the listener,\nthe same scope must be specified here.</p>\n\n<p>Example:</p>\n\n<pre><code>el.un('click', this.handlerFn);\n// or\nel.removeListener('click', this.handlerFn);\n</code></pre>\n"},"unclip":{"!type":"fn() -> +Ext.dom.Element","!doc":"<p>Return clipping (overflow) to original clipping before <a href=\"#!/api/Ext.dom.Element-method-clip\" rel=\"Ext.dom.Element-method-clip\" class=\"docClass\">clip</a> was called</p>\n\n<p><strong>Defined in override Ext.dom.Element_style.</strong></p>\n"},"unmask":{"!type":"fn() -> !this","!doc":"<p>Hides a previously applied mask.</p>\n"},"unselectable":{"!type":"fn() -> +Ext.dom.Element","!doc":"<p>Disables text selection for this element (normalized across browsers)</p>\n\n<p><strong>Defined in override Ext.dom.Element_style.</strong></p>\n"},"update":{"!type":"fn(html: string, loadScripts?: bool, callback?: fn()) -> +Ext.dom.Element","!doc":"<p>Updates the innerHTML of this element, optionally searching for and processing scripts.</p>\n"},"DOMActivate":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Where supported. Fires when an element is activated, for instance, through a mouse click or a keypress.</p>\n"},"DOMAttrModified":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Where supported. Fires when an attribute has been modified.</p>\n"},"DOMCharacterDataModified":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Where supported. Fires when the character data has been modified.</p>\n"},"DOMFocusIn":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Where supported. Similar to HTML focus event, but can be applied to any focusable element.</p>\n"},"DOMFocusOut":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Where supported. Similar to HTML blur event, but can be applied to any focusable element.</p>\n"},"DOMNodeInserted":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Where supported. Fires when a node has been added as a child of another node.</p>\n"},"DOMNodeInsertedIntoDocument":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Where supported. Fires when a node is being inserted into a document.</p>\n"},"DOMNodeRemoved":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Where supported. Fires when a descendant node of the element is removed.</p>\n"},"DOMNodeRemovedFromDocument":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Where supported. Fires when a node is being removed from a document.</p>\n"},"DOMSubtreeModified":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Where supported. Fires when the subtree is modified.</p>\n"},"abort":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when an object/image is stopped from loading before completely loaded.</p>\n"},"change":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when a control loses the input focus and its value has been modified since gaining focus.</p>\n"},"click":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when a mouse click is detected within the element.</p>\n"},"contextmenu":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when a right click is detected within the element.</p>\n"},"dblclick":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when a mouse double click is detected within the element.</p>\n"},"error":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when an object/image/frame cannot be loaded properly.</p>\n"},"keydown":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when a keydown is detected within the element.</p>\n"},"keypress":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when a keypress is detected within the element.</p>\n"},"keyup":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when a keyup is detected within the element.</p>\n"},"mousedown":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when a mousedown is detected within the element.</p>\n"},"mouseenter":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when the mouse enters the element.</p>\n"},"mouseleave":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when the mouse leaves the element.</p>\n"},"mousemove":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when a mousemove is detected with the element.</p>\n"},"mouseout":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when a mouseout is detected with the element.</p>\n"},"mouseover":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when a mouseover is detected within the element.</p>\n"},"mouseup":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when a mouseup is detected within the element.</p>\n"},"reset":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when a form is reset.</p>\n"},"resize":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when a document view is resized.</p>\n"},"select":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when a user selects some text in a text field, including input and textarea.</p>\n"},"submit":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when a form is submitted.</p>\n"},"unload":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when the user agent removes all content from a window or frame. For elements, it fires when the target\nelement or any of its content has been removed.</p>\n"}},"getXY":{"!type":"fn(el: ?) -> !this","!doc":"<p><strong>Defined in override Ext.rtl.dom.Element_position.</strong></p>\n"},"select":{"!type":"fn(selector: string|[+HTMLElement], unique?: bool, root?: +HTMLElement|string) -> +Ext.CompositeElementLite|+Ext.CompositeElement","!doc":"<p>Selects elements based on the passed CSS selector to enable <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Element</a> methods\nto be applied to many related elements in one statement through the returned <a href=\"#!/api/Ext.dom.CompositeElement\" rel=\"Ext.dom.CompositeElement\" class=\"docClass\">CompositeElement</a> or\n<a href=\"#!/api/Ext.dom.CompositeElementLite\" rel=\"Ext.dom.CompositeElementLite\" class=\"docClass\">CompositeElementLite</a> object.</p>\n"},"setXY":{"!type":"fn(el: ?, xy: ?) -> !this","!doc":"<p><strong>Defined in override Ext.rtl.dom.Element_position.</strong></p>\n"}},"Helper":{"!doc":"<p>The actual class of which <a href=\"#!/api/Ext.DomHelper\" rel=\"Ext.DomHelper\" class=\"docClass\">Ext.DomHelper</a> is instance of.</p>\n\n<p>Use singleton <a href=\"#!/api/Ext.DomHelper\" rel=\"Ext.DomHelper\" class=\"docClass\">Ext.DomHelper</a> instead.</p>\n","prototype":{"useDom":{"!type":"bool","!doc":"<p>True to force the use of DOM instead of html fragments.</p>\n"},"createContextualFragment":{"!type":"fn(html: ?) -> !this","!doc":"<p>Fix for IE9 createContextualFragment missing method</p>\n"},"createDom":{"!type":"fn(o: ?|string) -> +HTMLElement","!doc":"<p>Creates new DOM element(s) without inserting them to the document.</p>\n"},"createHtml":{"!type":"fn(spec: ?) -> string","!doc":"<p>Alias for <a href=\"#!/api/Ext.dom.Helper-method-markup\" rel=\"Ext.dom.Helper-method-markup\" class=\"docClass\">markup</a>.</p>\n"},"createTemplate":{"!type":"fn(o: ?) -> +Ext.Template","!doc":"<p>Creates a new <a href=\"#!/api/Ext.Template\" rel=\"Ext.Template\" class=\"docClass\">Ext.Template</a> from the DOM object spec.</p>\n"},"insertIntoTable":{"!type":"fn(tag: ?, where: ?, destinationEl: ?, html: ?) -> !this","!doc":"<p>Nasty code for IE's broken table implementation</p>\n"},"overwrite":{"!type":"fn(el: string|+HTMLElement|+Ext.Element, o: ?|string, returnElement?: bool) -> +HTMLElement|+Ext.Element","!doc":"<p>Creates new DOM element(s) and overwrites the contents of el with them.</p>\n"}}},"Layer":{"!doc":"<p>An extended <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a> object that supports a shadow and shim, constrain to viewport and\nautomatic maintaining of shadow/shim positions.</p>\n","!type":"fn(config?: Ext_dom_Layer_cfg, existingEl?: string|+HTMLElement)","prototype":{"!proto":"Ext.Element.prototype","cls":{"!type":"string","!doc":"<p>CSS class to add to the element</p>\n"},"constrain":{"!type":"bool","!doc":"<p>False to disable constrain to viewport.</p>\n"},"dh":{"!type":"?","!doc":"<p>DomHelper object config to create element with.</p>\n"},"hideMode":{"!type":"string","!doc":"<p>A String which specifies how this Layer will be hidden.\nValues may be:</p>\n\n<ul>\n<li><code>'display'</code> : The Component will be hidden using the <code>display: none</code> style.</li>\n<li><code>'visibility'</code> : The Component will be hidden using the <code>visibility: hidden</code> style.</li>\n<li><code>'offsets'</code> : The Component will be hidden by absolutely positioning it out of the visible area\nof the document. This is useful when a hidden Component must maintain measurable dimensions.\nHiding using <code>display</code> results in a Component having zero dimensions.</li>\n</ul>\n\n"},"shadow":{"!type":"string|bool","!doc":"<p>True to automatically create an <a href=\"#!/api/Ext.Shadow\" rel=\"Ext.Shadow\" class=\"docClass\">Ext.Shadow</a>, or a string indicating the\nshadow's display <a href=\"#!/api/Ext.Shadow-cfg-mode\" rel=\"Ext.Shadow-cfg-mode\" class=\"docClass\">Ext.Shadow.mode</a>. False to disable the shadow.</p>\n"},"shadowOffset":{"!type":"number","!doc":"<p>Number of pixels to offset the shadow</p>\n"},"shim":{"!type":"bool","!doc":"<p>False to disable the iframe shim in browsers which need one.</p>\n"},"useDisplay":{"!type":"bool","!doc":"<p>Defaults to use css offsets to hide the Layer. Specify <tt>true</tt>\nto use css style <tt>'display:none;'</tt> to hide the Layer.</p>\n"},"visibilityCls":{"!type":"string","!doc":"<p>The CSS class name to add in order to hide this Layer if this layer\nis configured with <code><a href=\"#!/api/Ext.dom.Layer-cfg-hideMode\" rel=\"Ext.dom.Layer-cfg-hideMode\" class=\"docClass\">hideMode</a>: 'asclass'</code></p>\n"},"zindex":{"!type":"number","!doc":"<p>Starting z-index.</p>\n"},"isLayer":{"!type":"bool"},"localXYNames":{"!type":"?"},"afterFx":{"!type":"fn() -> !this"},"beforeAction":{"!type":"fn() -> !this"},"beforeFx":{"!type":"fn() -> !this"},"beginUpdate":{"!type":"fn() -> !this"},"constrainXY":{"!type":"fn() -> +Ext.dom.Layer"},"createCB":{"!type":"fn(callback: ?) -> !this"},"disableShadow":{"!type":"fn() -> !this"},"enableShadow":{"!type":"fn(show: ?) -> !this"},"endUpdate":{"!type":"fn() -> !this"},"getConstrainOffset":{"!type":"fn() -> !this"},"getShim":{"!type":"fn() -> !this"},"getZIndex":{"!type":"fn() -> !this"},"hideShim":{"!type":"fn() -> !this"},"hideUnders":{"!type":"fn() -> !this"},"onOpacitySet":{"!type":"fn(opacity: ?) -> !this"},"remove":{"!type":"fn() -> !this","!doc":"<p>Removes this element's dom reference. Note that event and cache removal is handled at <a href=\"#!/api/Ext-method-removeNode\" rel=\"Ext-method-removeNode\" class=\"docClass\">Ext.removeNode</a></p>\n"},"setBounds":{"!type":"fn(x: ?, y: ?, width: ?, height: ?, animate: ?, duration: ?, callback: ?, easing: ?) -> +Ext.dom.Element","!doc":"<p>overridden Element method</p>\n"},"setHeight":{"!type":"fn(h: ?, animate: ?, duration: ?, callback: ?, easing: ?) -> +Ext.dom.Element","!doc":"<p>overridden Element method</p>\n"},"setLeft":{"!type":"fn(left: ?) -> +Ext.dom.Element","!doc":"<p>overridden Element method</p>\n"},"setLeftTop":{"!type":"fn(left: ?, top: ?) -> +Ext.dom.Element","!doc":"<p>Sets the element's left and top positions directly using CSS style</p>\n\n<p><strong>Defined in override Ext.dom.Element_position.</strong></p>\n"},"setLocalX":{"!type":"fn() -> !this"},"setLocalXY":{"!type":"fn() -> !this"},"setLocalY":{"!type":"fn() -> !this"},"setSize":{"!type":"fn(w: ?, h: ?, animate: ?, duration: ?, callback: ?, easing: ?) -> +Ext.dom.Element","!doc":"<p>overridden Element method</p>\n"},"setTop":{"!type":"fn(top: ?) -> +Ext.dom.Element","!doc":"<p>Sets the element's top position directly using CSS style\n(instead of <a href=\"#!/api/Ext.dom.Layer-method-setY\" rel=\"Ext.dom.Layer-method-setY\" class=\"docClass\">setY</a>).</p>\n\n<p><strong>Defined in override Ext.dom.Element_position.</strong></p>\n"},"setVisible":{"!type":"fn(visible: ?, animate: ?, duration: ?, callback: ?, easing: ?) -> +Ext.dom.Element","!doc":"<p>overridden Element method</p>\n"},"setWidth":{"!type":"fn(w: ?, animate: ?, duration: ?, callback: ?, easing: ?) -> +Ext.dom.Element","!doc":"<p>overridden Element method</p>\n"},"setX":{"!type":"fn(x: ?, animate: ?, duration: ?, callback: ?, easing: ?) -> +Ext.dom.Layer","!doc":"<p>overridden Element method</p>\n"},"setXY":{"!type":"fn(xy: ?, animate: ?, duration: ?, callback: ?, easing: ?) -> !this","!doc":"<p><strong>Defined in override Ext.rtl.dom.Element_position.</strong></p>\n"},"setY":{"!type":"fn(y: ?, animate: ?, duration: ?, callback: ?, easing: ?) -> +Ext.dom.Layer","!doc":"<p>overridden Element method</p>\n"},"setZIndex":{"!type":"fn(zindex: number) -> +Ext.Layer","!doc":"<p>Sets the z-index of this layer and adjusts any shadow and shim z-indexes. The layer\nz-index is automatically incremented depending upon the presence of a shim or a\nshadow in so that it always shows above those two associated elements.</p>\n\n<p>Any shim, will be assigned the passed z-index. A shadow will be assigned the next\nhighet z-index, and the Layer's element will receive the highest  z-index.</p>\n"},"sync":{"!type":"fn(doShow: bool) -> !this","!doc":"<p>Synchronize this Layer's associated elements, the shadow, and possibly the shim.</p>\n\n<p>This code can execute repeatedly in milliseconds,\neg: dragging a Component configured liveDrag: true, or which has no ghost method\nso code size was sacrificed for efficiency (e.g. no getBox/setBox, no XY calls)</p>\n"}},"shims":{"!type":"[?]"}},"Query":{"!doc":"<p>Provides high performance selector/xpath processing by compiling queries into reusable functions. New pseudo classes\nand matchers can be plugged. It works on HTML and XML documents (if a content node is passed in).</p>\n\n<p>DomQuery supports most of the <a href=\"http://www.w3.org/TR/2005/WD-css3-selectors-20051215/#selectors\">CSS3 selectors spec</a>, along with some custom selectors and basic XPath.</p>\n\n<p>All selectors, attribute filters and pseudos below can be combined infinitely in any order. For example\n<code>div.foo:nth-child(odd)[@foo=bar].bar:first</code> would be a perfectly valid selector. Node filters are processed\nin the order in which they appear, which allows you to optimize your queries for your document structure.</p>\n\n<h2>Element Selectors:</h2>\n\n<ul>\n<li><strong><code>*</code></strong> any element</li>\n<li><strong><code>E</code></strong> an element with the tag E</li>\n<li><strong><code>E F</code></strong> All descendent elements of E that have the tag F</li>\n<li><strong><code>E &gt; F</code></strong> or <strong>E/F</strong> all direct children elements of E that have the tag F</li>\n<li><strong><code>E + F</code></strong> all elements with the tag F that are immediately preceded by an element with the tag E</li>\n<li><strong><code>E ~ F</code></strong> all elements with the tag F that are preceded by a sibling element with the tag E</li>\n</ul>\n\n\n<h2>Attribute Selectors:</h2>\n\n<p>The use of <code>@</code> and quotes are optional. For example, <code>div[@foo='bar']</code> is also a valid attribute selector.</p>\n\n<ul>\n<li><strong><code>E[foo]</code></strong> has an attribute \"foo\"</li>\n<li><strong><code>E[foo=bar]</code></strong> has an attribute \"foo\" that equals \"bar\"</li>\n<li><strong><code>E[foo^=bar]</code></strong> has an attribute \"foo\" that starts with \"bar\"</li>\n<li><strong><code>E[foo$=bar]</code></strong> has an attribute \"foo\" that ends with \"bar\"</li>\n<li><strong><code>E[foo*=bar]</code></strong> has an attribute \"foo\" that contains the substring \"bar\"</li>\n<li><strong><code>E[foo%=2]</code></strong> has an attribute \"foo\" that is evenly divisible by 2</li>\n<li><strong><code>E[foo!=bar]</code></strong> attribute \"foo\" does not equal \"bar\"</li>\n</ul>\n\n\n<h2>Pseudo Classes:</h2>\n\n<ul>\n<li><strong><code>E:first-child</code></strong> E is the first child of its parent</li>\n<li><strong><code>E:last-child</code></strong> E is the last child of its parent</li>\n<li><strong><code>E:nth-child(_n_)</code></strong> E is the _n_th child of its parent (1 based as per the spec)</li>\n<li><strong><code>E:nth-child(odd)</code></strong> E is an odd child of its parent</li>\n<li><strong><code>E:nth-child(even)</code></strong> E is an even child of its parent</li>\n<li><strong><code>E:only-child</code></strong> E is the only child of its parent</li>\n<li><strong><code>E:checked</code></strong> E is an element that is has a checked attribute that is true (e.g. a radio or checkbox)</li>\n<li><strong><code>E:first</code></strong> the first E in the resultset</li>\n<li><strong><code>E:last</code></strong> the last E in the resultset</li>\n<li><strong><code>E:nth(_n_)</code></strong> the _n_th E in the resultset (1 based)</li>\n<li><strong><code>E:odd</code></strong> shortcut for :nth-child(odd)</li>\n<li><strong><code>E:even</code></strong> shortcut for :nth-child(even)</li>\n<li><strong><code>E:contains(foo)</code></strong> E's innerHTML contains the substring \"foo\"</li>\n<li><strong><code>E:nodeValue(foo)</code></strong> E contains a textNode with a nodeValue that equals \"foo\"</li>\n<li><strong><code>E:not(S)</code></strong> an E element that does not match simple selector S</li>\n<li><strong><code>E:has(S)</code></strong> an E element that has a descendent that matches simple selector S</li>\n<li><strong><code>E:next(S)</code></strong> an E element whose next sibling matches simple selector S</li>\n<li><strong><code>E:prev(S)</code></strong> an E element whose previous sibling matches simple selector S</li>\n<li><strong><code>E:any(S1|S2|S2)</code></strong> an E element which matches any of the simple selectors S1, S2 or S3</li>\n<li><strong><code>E:visible(true)</code></strong> an E element which is deeply visible according to <a href=\"#!/api/Ext.dom.Element-method-isVisible\" rel=\"Ext.dom.Element-method-isVisible\" class=\"docClass\">Ext.dom.Element.isVisible</a></li>\n</ul>\n\n\n<h2>CSS Value Selectors:</h2>\n\n<ul>\n<li><strong><code>E{display=none}</code></strong> css value \"display\" that equals \"none\"</li>\n<li><strong><code>E{display^=none}</code></strong> css value \"display\" that starts with \"none\"</li>\n<li><strong><code>E{display$=none}</code></strong> css value \"display\" that ends with \"none\"</li>\n<li><strong><code>E{display*=none}</code></strong> css value \"display\" that contains the substring \"none\"</li>\n<li><strong><code>E{display%=2}</code></strong> css value \"display\" that is evenly divisible by 2</li>\n<li><strong><code>E{display!=none}</code></strong> css value \"display\" that does not equal \"none\"</li>\n</ul>\n\n\n<h2>XML Namespaces:</h2>\n\n<ul>\n<li><strong><code>ns|E</code></strong> an element with tag E and namespace prefix ns</li>\n</ul>\n\n","matchers":{"!type":"?","!doc":"<p>Collection of matching regular expressions and code snippets.\nEach capture group within <code>()</code> will be replace the <code>{}</code> in the select\nstatement as specified by their index.</p>\n"},"operators":{"!type":"?","!doc":"<p>Collection of operator comparison functions.\nThe default operators are <code>=</code>, <code>!=</code>, <code>^=</code>, <code>$=</code>, <code>*=</code>, <code>%=</code>, <code>|=</code> and <code>~=</code>.</p>\n\n<p>New operators can be added as long as the match the format <em>c</em><code>=</code> where <em>c</em>\nis any character other than space, <code>&gt;</code>, or <code>&lt;</code>.</p>\n\n<p>Operator functions are passed the following parameters:</p>\n\n<ul>\n<li><code>propValue</code> : The property value to test.</li>\n<li><code>compareTo</code> : The value to compare to.</li>\n</ul>\n\n"},"pseudos":{"!type":"?","!doc":"<p>Object hash of \"pseudo class\" filter functions which are used when filtering selections.\nEach function is passed two parameters:</p>\n\n<ul>\n<li><p><strong>c</strong> : Array\n  An Array of DOM elements to filter.</p></li>\n<li><p><strong>v</strong> : String\n  The argument (if any) supplied in the selector.</p></li>\n</ul>\n\n\n<p>A filter function returns an Array of DOM elements which conform to the pseudo class.\nIn addition to the provided pseudo classes listed above such as <code>first-child</code> and <code>nth-child</code>,\ndevelopers may add additional, custom psuedo class filters to select elements according to application-specific requirements.</p>\n\n<p>For example, to filter <code>a</code> elements to only return links to <strong>external</strong> resources:</p>\n\n<pre><code>Ext.DomQuery.pseudos.external = function(c, v) {\n    var r = [], ri = -1;\n    for(var i = 0, ci; ci = c[i]; i++) {\n        // Include in result set only if it's a link to an external resource\n        if (ci.hostname != location.hostname) {\n            r[++ri] = ci;\n        }\n    }\n    return r;\n};\n</code></pre>\n\n<p>Then external links could be gathered with the following statement:</p>\n\n<pre><code>var externalLinks = <a href=\"#!/api/Ext-method-select\" rel=\"Ext-method-select\" class=\"docClass\">Ext.select</a>(\"a:external\");\n</code></pre>\n"},"compile":{"!type":"fn(selector: string, type?: string) -> fn()","!doc":"<p>Compiles a selector/xpath query into a reusable function. The returned function\ntakes one parameter \"root\" (optional), which is the context node from where the query should start.</p>\n"},"filter":{"!type":"fn(el: [+HTMLElement], selector: string, nonMatches: bool) -> [+HTMLElement]","!doc":"<p>Filters an array of elements to only include matches of a simple selector\n(e.g. <code>div.some-class</code> or <code>span:first-child</code>)</p>\n"},"is":{"!type":"fn(el: string|+HTMLElement|[+HTMLElement], selector: string) -> bool","!doc":"<p>Returns true if the passed element(s) match the passed simple selector\n(e.g. <code>div.some-class</code> or <code>span:first-child</code>)</p>\n"},"jsSelect":{"!type":"fn(selector: string, root?: +HTMLElement|string) -> [+HTMLElement]","!doc":"<p>Selects an array of DOM nodes using JavaScript-only implementation.</p>\n\n<p>Use <a href=\"#!/api/Ext.dom.Query-method-select\" rel=\"Ext.dom.Query-method-select\" class=\"docClass\">select</a> to take advantage of browsers built-in support for CSS selectors.</p>\n"},"select":{"!type":"fn(path: string, root?: +HTMLElement, type?: string, single?: bool) -> [+HTMLElement]","!doc":"<p>Selects an array of DOM nodes by CSS/XPath selector.</p>\n\n<p>Uses <a href=\"https://developer.mozilla.org/en/DOM/document.querySelectorAll\">document.querySelectorAll</a> if browser supports that, otherwise falls back to\n<a href=\"#!/api/Ext.dom.Query-method-jsSelect\" rel=\"Ext.dom.Query-method-jsSelect\" class=\"docClass\">jsSelect</a> to do the work.</p>\n\n<p>Aliased as <a href=\"#!/api/Ext-method-query\" rel=\"Ext-method-query\" class=\"docClass\">Ext.query</a>.</p>\n"},"selectNode":{"!type":"fn(selector: string, root?: +HTMLElement) -> +HTMLElement","!doc":"<p>Selects a single element.</p>\n"},"selectNumber":{"!type":"fn(selector: string, root?: +HTMLElement, defaultValue?: number) -> number","!doc":"<p>Selects the value of a node, parsing integers and floats.\nReturns the defaultValue, or 0 if none is specified.</p>\n"},"selectValue":{"!type":"fn(selector: string, root?: +HTMLElement, defaultValue?: string) -> string","!doc":"<p>Selects the value of a node, optionally replacing null with the defaultValue.</p>\n"}}},"draw":{"Color":{"!doc":"<p>Represents an RGB color and provides helper functions get\ncolor components in HSL color space.</p>\n","!type":"fn(red: number, green: number, blue: number)","prototype":{"!proto":"Ext.Base.prototype","lightnessFactor":{"!type":"number","!doc":"<p>The default factor to compute the lighter or darker color. Defaults to 0.2.</p>\n"},"colorToHexRe":{"!type":"+RegExp","!doc":"<p>End Definitions</p>\n"},"hexRe":{"!type":"+RegExp"},"rgbRe":{"!type":"+RegExp"},"getBlue":{"!type":"fn() -> number","!doc":"<p>Get the blue component of the color, in the range 0..255.</p>\n"},"getDarker":{"!type":"fn(factor: number) -> ?","!doc":"<p>Return a new color that is darker than this color.</p>\n"},"getGrayscale":{"!type":"fn() -> number","!doc":"<p>Returns the gray value (0 to 255) of the color.</p>\n\n<p>The gray value is calculated using the formula r<em>0.3 + g</em>0.59 + b*0.11.</p>\n"},"getGreen":{"!type":"fn() -> number","!doc":"<p>Get the green component of the color, in the range 0..255.</p>\n"},"getHSL":{"!type":"fn() -> [number]","!doc":"<p>Get the equivalent HSL components of the color.</p>\n"},"getLighter":{"!type":"fn(factor: number) -> ?","!doc":"<p>Return a new color that is lighter than this color.</p>\n"},"getRGB":{"!type":"fn() -> [number]","!doc":"<p>Get the RGB values.</p>\n"},"getRed":{"!type":"fn() -> number","!doc":"<p>Get the red component of the color, in the range 0..255.</p>\n"},"toString":{"!type":"fn() -> string","!doc":"<p>Return the color in the hex format, i.e. '#rrggbb'.</p>\n"}},"fromHSL":{"!type":"fn(h: number, s: number, l: number) -> ?","!doc":"<p>Create a new color based on the specified HSL values.</p>\n\n<p><strong>Note:</strong> This method is both static and instance.</p>\n"},"fromString":{"!type":"fn(str: string) -> ?","!doc":"<p>Parse the string and create a new color.</p>\n\n<p>Supported formats: '#rrggbb', '#rgb', and 'rgb(r,g,b)'.</p>\n\n<p>If the string is not recognized, an undefined will be returned instead.</p>\n\n<p><strong>Note:</strong> This method is both static and instance.</p>\n"},"toHex":{"!type":"fn(color: string|[string]) -> string","!doc":"<p>Convert a color to hexadecimal format.</p>\n\n<p><strong>Note:</strong> This method is both static and instance.</p>\n"}},"Component":{"!doc":"<p>The Draw Component is a surface in which sprites can be rendered. The Draw Component\nmanages and holds an <a href=\"#!/api/Ext.draw.Surface\" rel=\"Ext.draw.Surface\" class=\"docClass\">Ext.draw.Surface</a> instance where\n<a href=\"#!/api/Ext.draw.Sprite\" rel=\"Ext.draw.Sprite\" class=\"docClass\">Sprites</a> can be appended.</p>\n\n<p>One way to create a draw component is:</p>\n\n<pre class='inline-example '><code>var drawComponent = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.draw.Component\" rel=\"Ext.draw.Component\" class=\"docClass\">Ext.draw.Component</a>', {\n    viewBox: false,\n    items: [{\n        type: 'circle',\n        fill: '#79BB3F',\n        radius: 100,\n        x: 100,\n        y: 100\n    }]\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.window.Window\" rel=\"Ext.window.Window\" class=\"docClass\">Ext.Window</a>', {\n    width: 215,\n    height: 235,\n    layout: 'fit',\n    items: [drawComponent]\n}).show();\n</code></pre>\n\n<p>In this case we created a draw component and added a <a href=\"#!/api/Ext.draw.Sprite\" rel=\"Ext.draw.Sprite\" class=\"docClass\">sprite</a> to it.\nThe <a href=\"#!/api/Ext.draw.Sprite-cfg-type\" rel=\"Ext.draw.Sprite-cfg-type\" class=\"docClass\">type</a> of the sprite is <code>circle</code> so if you run this code you'll see a yellow-ish\ncircle in a Window. When setting <code>viewBox</code> to <code>false</code> we are responsible for setting the object's position and\ndimensions accordingly.</p>\n\n<p>You can also add sprites by using the surface's add method:</p>\n\n<pre><code>drawComponent.surface.add({\n    type: 'circle',\n    fill: '#79BB3F',\n    radius: 100,\n    x: 100,\n    y: 100\n});\n</code></pre>\n\n<h2>Larger example</h2>\n\n<pre class='inline-example '><code>var drawComponent = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.draw.Component\" rel=\"Ext.draw.Component\" class=\"docClass\">Ext.draw.Component</a>', {\n    width: 800,\n    height: 600,\n    renderTo: document.body\n}), surface = drawComponent.surface;\n\nsurface.add([{\n    type: 'circle',\n    radius: 10,\n    fill: '#f00',\n    x: 10,\n    y: 10,\n    group: 'circles'\n}, {\n    type: 'circle',\n    radius: 10,\n    fill: '#0f0',\n    x: 50,\n    y: 50,\n    group: 'circles'\n}, {\n    type: 'circle',\n    radius: 10,\n    fill: '#00f',\n    x: 100,\n    y: 100,\n    group: 'circles'\n}, {\n    type: 'rect',\n    width: 20,\n    height: 20,\n    fill: '#f00',\n    x: 10,\n    y: 10,\n    group: 'rectangles'\n}, {\n    type: 'rect',\n    width: 20,\n    height: 20,\n    fill: '#0f0',\n    x: 50,\n    y: 50,\n    group: 'rectangles'\n}, {\n    type: 'rect',\n    width: 20,\n    height: 20,\n    fill: '#00f',\n    x: 100,\n    y: 100,\n    group: 'rectangles'\n}]);\n\n// Get references to my groups\ncircles = surface.getGroup('circles');\nrectangles = surface.getGroup('rectangles');\n\n// Animate the circles down\ncircles.animate({\n    duration: 1000,\n    to: {\n        translate: {\n            y: 200\n        }\n    }\n});\n\n// Animate the rectangles across\nrectangles.animate({\n    duration: 1000,\n    to: {\n        translate: {\n            x: 200\n        }\n    }\n});\n</code></pre>\n\n<p>For more information on Sprites, the core elements added to a draw component's surface,\nrefer to the <a href=\"#!/api/Ext.draw.Sprite\" rel=\"Ext.draw.Sprite\" class=\"docClass\">Ext.draw.Sprite</a> documentation.</p>\n","!type":"fn(config: +Ext.Element|string|Ext_draw_Component_cfg)","prototype":{"!proto":"Ext.Component.prototype","autoSize":{"!type":"bool","!doc":"<p>Turn on autoSize support which will set the bounding div's size to the natural size of the contents.</p>\n"},"baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this component's element. This will also be prepended to elements within this\ncomponent like Panel's body will get a class <code>x-panel-body</code>. This means that if you create a subclass of Panel, and\nyou want it to get all the Panels styling for the element and the body, you leave the <code>baseCls</code> <code>x-panel</code> and use\n<code>componentCls</code> to add specific styling for this component.</p>\n"},"componentLayout":{"!type":"string|?","!doc":"<p>The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout\nmanager which sizes a Component's internal structure in response to the Component being sized.</p>\n\n<p>Generally, developers will not use this configuration as all provided Components which need their internal\nelements sizing (Such as <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">input fields</a>) come with their own componentLayout managers.</p>\n\n<p>The <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used on instances of the base <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\nclass which simply sizes the Component's encapsulating element to the height and width specified in the\n<a href=\"#!/api/Ext.draw.Component-method-setSize\" rel=\"Ext.draw.Component-method-setSize\" class=\"docClass\">setSize</a> method.</p>\n"},"enginePriority":{"!type":"[string]","!doc":"<p>Defines the priority order for which Surface implementation to use. The first\none supported by the current environment will be used.</p>\n"},"gradients":{"!type":"[?]","!doc":"<p>(optional) Define a set of gradients that can be used as <code>fill</code> property in sprites.\nThe gradients array is an array of objects with the following properties:</p>\n\n<ul>\n<li><code>id</code> - string - The unique name of the gradient.</li>\n<li><code>angle</code> - number, optional - The angle of the gradient in degrees.</li>\n<li><code>stops</code> - object - An object with numbers as keys (from 0 to 100) and style objects as values</li>\n</ul>\n\n\n<h2>Example</h2>\n\n<pre><code>gradients: [{\n    id: 'gradientId',\n    angle: 45,\n    stops: {\n        0: {\n            color: '#555'\n        },\n        100: {\n            color: '#ddd'\n        }\n    }\n}, {\n    id: 'gradientId2',\n    angle: 0,\n    stops: {\n        0: {\n            color: '#590'\n        },\n        20: {\n            color: '#599'\n        },\n        100: {\n            color: '#ddd'\n        }\n    }\n}]\n</code></pre>\n\n<p>Then the sprites can use <code>gradientId</code> and <code>gradientId2</code> by setting the fill attributes to those ids, for example:</p>\n\n<pre><code>sprite.setAttributes({\n    fill: 'url(#gradientId)'\n}, true);\n</code></pre>\n"},"items":{"!type":"[+Ext.draw.Sprite]","!doc":"<p>Array of sprites or sprite config objects to add initially to the surface.</p>\n"},"shrinkWrap":{"!type":"bool|number","!doc":"<p>If this property is a number, it is interpreted as follows:</p>\n\n<ul>\n<li>0: Neither width nor height depend on content. This is equivalent to <code>false</code>.</li>\n<li>1: Width depends on content (shrink wraps), but height does not.</li>\n<li>2: Height depends on content (shrink wraps), but width does not. The default.</li>\n<li>3: Both width and height depend on content (shrink wrap). This is equivalent to <code>true</code>.</li>\n</ul>\n\n\n<p>In CSS terms, shrink-wrap width is analogous to an inline-block element as opposed\nto a block-level element. Some container layouts always shrink-wrap their children,\neffectively ignoring this property (e.g., <a href=\"#!/api/Ext.layout.container.HBox\" rel=\"Ext.layout.container.HBox\" class=\"docClass\">Ext.layout.container.HBox</a>,\n<a href=\"#!/api/Ext.layout.container.VBox\" rel=\"Ext.layout.container.VBox\" class=\"docClass\">Ext.layout.container.VBox</a>, <a href=\"#!/api/Ext.layout.component.Dock\" rel=\"Ext.layout.component.Dock\" class=\"docClass\">Ext.layout.component.Dock</a>).</p>\n"},"viewBox":{"!type":"bool","!doc":"<p>Turn on view box support which will scale and position items in the draw component to fit to the component while\nmaintaining aspect ratio. Note that this scaling can override other sizing settings on your items.</p>\n"},"surface":{"!type":"+Ext.draw.Surface","!doc":"<p>The Surface instance managed by this component.</p>\n"},"autoSizeSurface":{"!type":"fn() -> !this"},"createSurface":{"!type":"fn() -> !this","!doc":"<p>Create the Surface instance. Resolves the correct Surface implementation to\ninstantiate based on the 'enginePriority' config. Once the Surface instance is\ncreated you can use the handle to that instance to add sprites. For example:</p>\n\n<pre><code>drawComponent.surface.add(sprite);\n</code></pre>\n"},"onDestroy":{"!type":"fn() -> !this","!doc":"<p>Clean up the Surface instance on component destruction</p>\n"},"onRender":{"!type":"fn() -> !this","!doc":"<p>Create the Surface on initial render</p>\n"},"setSurfaceSize":{"!type":"fn(width: ?, height: ?) -> !this"},"click":{"!type":"fn(e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Event forwarded from <a href=\"#!/api/Ext.draw.Surface\" rel=\"Ext.draw.Surface\" class=\"docClass\">surface</a>.</p>\n"},"dblclick":{"!type":"fn(e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Event forwarded from <a href=\"#!/api/Ext.draw.Surface\" rel=\"Ext.draw.Surface\" class=\"docClass\">surface</a>.</p>\n"},"mousedown":{"!type":"fn(e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Event forwarded from <a href=\"#!/api/Ext.draw.Surface\" rel=\"Ext.draw.Surface\" class=\"docClass\">surface</a>.</p>\n"},"mouseenter":{"!type":"fn(e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Event forwarded from <a href=\"#!/api/Ext.draw.Surface\" rel=\"Ext.draw.Surface\" class=\"docClass\">surface</a>.</p>\n"},"mouseleave":{"!type":"fn(e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Event forwarded from <a href=\"#!/api/Ext.draw.Surface\" rel=\"Ext.draw.Surface\" class=\"docClass\">surface</a>.</p>\n"},"mousemove":{"!type":"fn(e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Event forwarded from <a href=\"#!/api/Ext.draw.Surface\" rel=\"Ext.draw.Surface\" class=\"docClass\">surface</a>.</p>\n"},"mouseup":{"!type":"fn(e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Event forwarded from <a href=\"#!/api/Ext.draw.Surface\" rel=\"Ext.draw.Surface\" class=\"docClass\">surface</a>.</p>\n"}}},"CompositeSprite":{"!doc":"<p>A composite Sprite handles a group of sprites with common methods to a sprite\nsuch as <code>hide</code>, <code>show</code>, <code>setAttributes</code>. These methods are applied to the set of sprites\nadded to the group.</p>\n\n<p>CompositeSprite extends <a href=\"#!/api/Ext.util.MixedCollection\" rel=\"Ext.util.MixedCollection\" class=\"docClass\">Ext.util.MixedCollection</a> so you can use the same methods\nin <code>MixedCollection</code> to iterate through sprites, add and remove elements, etc.</p>\n\n<p>In order to create a CompositeSprite, one has to provide a handle to the surface where it is\nrendered:</p>\n\n<pre><code>var group = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.draw.CompositeSprite\" rel=\"Ext.draw.CompositeSprite\" class=\"docClass\">Ext.draw.CompositeSprite</a>', {\n    surface: drawComponent.surface\n});\n</code></pre>\n\n<p>Then just by using <code>MixedCollection</code> methods it's possible to add <a href=\"#!/api/Ext.draw.Sprite\" rel=\"Ext.draw.Sprite\" class=\"docClass\">Ext.draw.Sprite</a>s:</p>\n\n<pre><code>group.add(sprite1);\ngroup.add(sprite2);\ngroup.add(sprite3);\n</code></pre>\n\n<p>And then apply common Sprite methods to them:</p>\n\n<pre><code>group.setAttributes({\n    fill: '#f00'\n}, true);\n</code></pre>\n","!type":"fn(config: Ext_draw_CompositeSprite_cfg)","prototype":{"!proto":"Ext.util.MixedCollection.prototype","autoDestroy":{"!type":"bool"},"isCompositeSprite":{"!type":"bool","!doc":"<p>End Definitions</p>\n"},"add":{"!type":"fn(key: ?, o: ?) -> ?","!doc":"<p>Inherit docs from MixedCollection</p>\n"},"addCls":{"!type":"fn(cls: string) -> !this","!doc":"<p>Adds class to all sprites.</p>\n"},"attachEvents":{"!type":"fn(o: ?) -> !this"},"destroy":{"!type":"fn() -> !this","!doc":"<p>Destroys this CompositeSprite.</p>\n"},"getBBox":{"!type":"fn() -> ?","!doc":"<p>Returns the group bounding box.\nBehaves like <a href=\"#!/api/Ext.draw.Sprite-method-getBBox\" rel=\"Ext.draw.Sprite-method-getBBox\" class=\"docClass\">Ext.draw.Sprite.getBBox</a> method.</p>\n"},"getSurface":{"!type":"fn() -> +Ext.draw.Surface","!doc":"<p>Grab the surface from the items</p>\n"},"hide":{"!type":"fn(redraw: bool) -> +Ext.draw.CompositeSprite","!doc":"<p>Hides all sprites. If <code>true</code> is passed then a redraw will be forced for each sprite.</p>\n"},"insert":{"!type":"fn(index: ?, key: ?, o: ?) -> ?","!doc":"<p>Inserts an item at the specified index in the collection. Fires the <a href=\"#!/api/Ext.draw.CompositeSprite-event-add\" rel=\"Ext.draw.CompositeSprite-event-add\" class=\"docClass\">add</a> event when complete.</p>\n"},"onClick":{"!type":"fn(e: ?) -> !this"},"onMouseDown":{"!type":"fn(e: ?) -> !this"},"onMouseOut":{"!type":"fn(e: ?) -> !this"},"onMouseOver":{"!type":"fn(e: ?) -> !this"},"onMouseUp":{"!type":"fn(e: ?) -> !this"},"redraw":{"!type":"fn() -> !this","!doc":"<p>Force redraw of all sprites.</p>\n"},"remove":{"!type":"fn(o: ?) -> ?","!doc":"<p>Inherit docs from MixedCollection</p>\n"},"removeCls":{"!type":"fn(cls: string) -> !this","!doc":"<p>Removes class from all sprites.</p>\n"},"setAttributes":{"!type":"fn(attrs: ?, redraw: bool) -> +Ext.draw.CompositeSprite","!doc":"<p>Iterates through all sprites calling <code>setAttributes</code> on each one. For more information <a href=\"#!/api/Ext.draw.Sprite\" rel=\"Ext.draw.Sprite\" class=\"docClass\">Ext.draw.Sprite</a>\nprovides a description of the attributes that can be set with this method.</p>\n"},"setStyle":{"!type":"fn(style: string) -> !this","!doc":"<p>Sets style for all sprites.</p>\n"},"show":{"!type":"fn(redraw: bool) -> +Ext.draw.CompositeSprite","!doc":"<p>Shows all sprites. If <code>true</code> is passed then a redraw will be forced for each sprite.</p>\n"},"click":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when a mouse click is detected within the element.</p>\n"},"mousedown":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when a mousedown is detected within the element.</p>\n"},"mouseout":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when a mouseout is detected with the element.</p>\n"},"mouseover":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when a mouseover is detected within the element.</p>\n"},"mouseup":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when a mouseup is detected within the element.</p>\n"}}},"Draw":{"!doc":"<p>Base Drawing class.  Provides base drawing functions.</p>\n","availableAnimAttrs":{"!type":"?"},"pathCommandRE":{"!type":"+RegExp"},"pathToStringRE":{"!type":"+RegExp","!doc":"<p>End Definitions</p>\n"},"pathValuesRE":{"!type":"+RegExp"},"radian":{"!type":"?"},"stopsRE":{"!type":"+RegExp"},"arc2curve":{"!type":"fn(x1: ?, y1: ?, rx: ?, ry: ?, angle: ?, large_arc_flag: ?, sweep_flag: ?, x2: ?, y2: ?, recursive: ?) -> !this"},"bezier":{"!type":"fn(a: ?, b: ?, c: ?, d: ?, x: ?) -> !this"},"bezierDim":{"!type":"fn(a: ?, b: ?, c: ?, d: ?) -> !this"},"command2curve":{"!type":"fn(pathCommand: ?, d: ?) -> !this","!doc":"<p>Returns any path command as a curveto command based on the attrs passed</p>\n"},"curveDim":{"!type":"fn(p1x: ?, p1y: ?, c1x: ?, c1y: ?, c2x: ?, c2y: ?, p2x: ?, p2y: ?) -> !this"},"degrees":{"!type":"fn(radian: ?) -> !this"},"ellipsePath":{"!type":"fn(sprite: ?) -> !this"},"findDotAtSegment":{"!type":"fn(p1x: ?, p1y: ?, c1x: ?, c1y: ?, c2x: ?, c2y: ?, p2x: ?, p2y: ?, t: ?) -> !this"},"getAnchors":{"!type":"fn(prevX: number, prevY: number, curX: number, curY: number, nextX: number, nextY: number, value: number) -> ?","!doc":"<p>Calculates bezier curve control anchor points for a particular point in a path, with a\nsmoothing curve applied. The smoothness of the curve is controlled by the 'value' parameter.\nNote that this algorithm assumes that the line being smoothed is normalized going from left\nto right; it makes special adjustments assuming this orientation.</p>\n"},"interpolatePaths":{"!type":"fn(path: ?, path2: ?) -> !this"},"intersect":{"!type":"fn(subjectPolygon: ?, clipPolygon: ?) -> !this"},"intersectInside":{"!type":"fn(path: ?, cp1: ?, cp2: ?) -> !this"},"intersectIntersection":{"!type":"fn(s: ?, e: ?, cp1: ?, cp2: ?) -> !this"},"is":{"!type":"fn(o: ?, type: ?) -> !this"},"mapPath":{"!type":"fn(path: ?, matrix: ?) -> !this"},"parseGradient":{"!type":"fn(gradient: ?) -> !this"},"parsePathString":{"!type":"fn(pathString: ?) -> !this"},"path2curve":{"!type":"fn(path: ?) -> !this","!doc":"<p>Returns a path converted to a set of curveto commands</p>\n"},"path2string":{"!type":"fn() -> !this","!doc":"<p>To be deprecated, converts itself (an arrayPath) to a proper SVG path string</p>\n"},"pathClone":{"!type":"fn(pathArray: ?) -> !this"},"pathDimensions":{"!type":"fn(path: ?) -> !this"},"pathToAbsolute":{"!type":"fn(pathArray: ?) -> !this"},"pathToRelative":{"!type":"fn(pathArray: ?) -> !this","!doc":"<p>TO BE DEPRECATED</p>\n"},"pathToString":{"!type":"fn(arrayPath: ?) -> !this","!doc":"<p>Convert the passed arrayPath to a proper SVG path string (d attribute)</p>\n"},"quadratic2curve":{"!type":"fn(x1: ?, y1: ?, ax: ?, ay: ?, x2: ?, y2: ?) -> !this"},"rad":{"!type":"fn(degrees: ?) -> !this"},"rectPath":{"!type":"fn(sprite: ?) -> !this"},"rotate":{"!type":"fn(x: ?, y: ?, rad: ?) -> !this"},"rotateAndTranslatePath":{"!type":"fn(sprite: ?) -> !this","!doc":"<p>TO BE DEPRECATED</p>\n"},"rotatePoint":{"!type":"fn(x: ?, y: ?, alpha: ?, cx: ?, cy: ?) -> !this","!doc":"<p>TO BE DEPRECATED</p>\n"},"smooth":{"!type":"fn(originalPath: ?, value: ?) -> !this","!doc":"<p>Smoothing function for a path.  Converts a path into cubic beziers.  Value defines the divider of the distance between points.\nDefaults to a value of 4.</p>\n"},"snapEnds":{"!type":"fn(from: ?, to: ?, stepsMax: ?, prettyNumbers: ?) -> !this"},"snapEndsByDate":{"!type":"fn(from: +Date, to: +Date, stepsMax: number, lockEnds: bool) -> ?","!doc":"<p>snapEndsByDate is a utility method to deduce an appropriate tick configuration for the data set of given\nfeature. Refer to <a href=\"#!/api/Ext.draw.Draw-method-snapEnds\" rel=\"Ext.draw.Draw-method-snapEnds\" class=\"docClass\">snapEnds</a>.</p>\n"},"snapEndsByDateAndStep":{"!type":"fn(from: +Date, to: +Date, step: [?], lockEnds: bool) -> ?","!doc":"<p>snapEndsByDateAndStep is a utility method to deduce an appropriate tick configuration for the data set of given\nfeature and specific step size.</p>\n"},"sorter":{"!type":"fn(a: ?, b: ?) -> !this"},"withinBox":{"!type":"fn(x: ?, y: ?, bbox: ?) -> !this"}},"Matrix":{"!type":"fn(a: ?, b: ?, c: ?, d: ?, e: ?, f: ?)","prototype":{"!proto":"Ext.Base.prototype","add":{"!type":"fn(a: ?, b: ?, c: ?, d: ?, e: ?, f: ?) -> !this"},"clone":{"!type":"fn() -> !this"},"get":{"!type":"fn(i: ?, j: ?) -> !this"},"invert":{"!type":"fn() -> !this"},"offset":{"!type":"fn() -> !this"},"prepend":{"!type":"fn(a: ?, b: ?, c: ?, d: ?, e: ?, f: ?) -> !this"},"rotate":{"!type":"fn(a: ?, x: ?, y: ?) -> !this"},"scale":{"!type":"fn(x: ?, y: ?, cx: ?, cy: ?) -> !this"},"split":{"!type":"fn() -> !this","!doc":"<p>Split matrix into Translate Scale, Shear, and Rotate</p>\n"},"toFilter":{"!type":"fn(dx: ?, dy: ?) -> !this"},"toString":{"!type":"fn() -> !this"},"toSvg":{"!type":"fn() -> !this"},"translate":{"!type":"fn(x: ?, y: ?) -> !this"},"x":{"!type":"fn(x: ?, y: ?) -> !this"},"y":{"!type":"fn(x: ?, y: ?) -> !this"}}},"Sprite":{"!doc":"<p>A Sprite is an object rendered in a Drawing surface.</p>\n\n<h2>Types</h2>\n\n<p>The following sprite types are supported:</p>\n\n<h3>Rect</h3>\n\n<p>Rectangle requires <code>width</code> and <code>height</code> attributes:</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.draw.Component\" rel=\"Ext.draw.Component\" class=\"docClass\">Ext.draw.Component</a>', {\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    width: 200,\n    height: 200,\n    items: [{\n        type: 'rect',\n        width: 100,\n        height: 50,\n        radius: 10,\n        fill: 'green',\n        opacity: 0.5,\n        stroke: 'red',\n        'stroke-width': 2\n    }]\n});\n</code></pre>\n\n<h3>Circle</h3>\n\n<p>Circle requires <code>x</code>, <code>y</code> and <code>radius</code> attributes:</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.draw.Component\" rel=\"Ext.draw.Component\" class=\"docClass\">Ext.draw.Component</a>', {\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    width: 200,\n    height: 200,\n    items: [{\n        type: 'circle',\n        radius: 90,\n        x: 100,\n        y: 100,\n        fill: 'blue'\n    }]\n});\n</code></pre>\n\n<h3>Ellipse</h3>\n\n<p>Ellipse requires <code>x</code>, <code>y</code>, <code>radiusX</code> and <code>radiusY</code> attributes:</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.draw.Component\" rel=\"Ext.draw.Component\" class=\"docClass\">Ext.draw.Component</a>', {\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    width: 200,\n    height: 200,\n    items: [{\n        type: \"ellipse\",\n        radiusX: 100,\n        radiusY: 50,\n        x: 100,\n        y: 100,\n        fill: 'red'\n    }]\n});\n</code></pre>\n\n<h3>Path</h3>\n\n<p>Path requires the <code>path</code> attribute:</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.draw.Component\" rel=\"Ext.draw.Component\" class=\"docClass\">Ext.draw.Component</a>', {\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    width: 200,\n    height: 200,\n    items: [{\n        type: \"path\",\n        path: \"M-66.6 26C-66.6 26 -75 22 -78.2 18.4C-81.4 14.8 -80.948 19.966 \" +\n              \"-85.8 19.6C-91.647 19.159 -90.6 3.2 -90.6 3.2L-94.6 10.8C-94.6 \" +\n              \"10.8 -95.8 25.2 -87.8 22.8C-83.893 21.628 -82.6 23.2 -84.2 \" +\n              \"24C-85.8 24.8 -78.6 25.2 -81.4 26.8C-84.2 28.4 -69.8 23.2 -72.2 \" +\n              \"33.6L-66.6 26z\",\n        fill: \"purple\"\n    }]\n});\n</code></pre>\n\n<h3>Text</h3>\n\n<p>Text requires the <code>text</code> attribute:</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.draw.Component\" rel=\"Ext.draw.Component\" class=\"docClass\">Ext.draw.Component</a>', {\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    width: 200,\n    height: 200,\n    items: [{\n        type: \"text\",\n        text: \"Hello, Sprite!\",\n        fill: \"green\",\n        font: \"18px monospace\"\n    }]\n});\n</code></pre>\n\n<h3>Image</h3>\n\n<p>Image requires <code>width</code>, <code>height</code> and <code>src</code> attributes:</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.draw.Component\" rel=\"Ext.draw.Component\" class=\"docClass\">Ext.draw.Component</a>', {\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    width: 200,\n    height: 200,\n    items: [{\n        type: \"image\",\n        src: \"http://www.sencha.com/img/apple-touch-icon.png\",\n        width: 200,\n        height: 200\n    }]\n});\n</code></pre>\n\n<h2>Creating and adding a Sprite to a Surface</h2>\n\n<p>See <a href=\"#!/api/Ext.draw.Surface\" rel=\"Ext.draw.Surface\" class=\"docClass\">Ext.draw.Surface</a> documentation.</p>\n\n<h2>Transforming sprites</h2>\n\n<p>See <a href=\"#!/api/Ext.draw.Sprite-method-setAttributes\" rel=\"Ext.draw.Sprite-method-setAttributes\" class=\"docClass\">setAttributes</a> method documentation for examples on how to translate, scale and rotate the sprites.</p>\n","!type":"fn(config: Ext_draw_Sprite_cfg)","prototype":{"!proto":"Ext.Base.prototype","draggable":{"!type":"bool","!doc":"<p>True to make the sprite draggable.</p>\n"},"fill":{"!type":"string","!doc":"<p>The fill color.</p>\n"},"font":{"!type":"string","!doc":"<p>Used with text type sprites. The full font description.\nUses the same syntax as the CSS font parameter</p>\n"},"group":{"!type":"string|[string]","!doc":"<p>The group that this sprite belongs to, or an array of groups.\nOnly relevant when added to a <a href=\"#!/api/Ext.draw.Surface\" rel=\"Ext.draw.Surface\" class=\"docClass\">Surface</a>.</p>\n"},"height":{"!type":"number","!doc":"<p>The height of the rect or image sprite.</p>\n"},"opacity":{"!type":"number","!doc":"<p>The opacity of the sprite. A number between 0 and 1.</p>\n"},"path":{"!type":"string","!doc":"<p>The path of the path sprite written in SVG-like path syntax.</p>\n"},"radius":{"!type":"number","!doc":"<p>The radius of the circle sprite. Or in case of rect sprite, the border radius.</p>\n"},"radiusX":{"!type":"number","!doc":"<p>The radius of the ellipse sprite along x-axis.</p>\n"},"radiusY":{"!type":"number","!doc":"<p>The radius of the ellipse sprite along y-axis.</p>\n"},"src":{"!type":"string","!doc":"<p>Path to the image to show in image sprites.</p>\n"},"stroke":{"!type":"string","!doc":"<p>The stroke color.</p>\n"},"stroke-width":{"!type":"number","!doc":"<p>The width of the stroke.</p>\n\n<p>Note that this attribute needs to be quoted when used.  Like so:</p>\n\n<pre><code>\"stroke-width\": 12,\n</code></pre>\n"},"text":{"!type":"string","!doc":"<p>The actual text to render in text sprites.</p>\n"},"type":{"!type":"string","!doc":"<p>The type of the sprite.\nPossible options are 'circle', 'ellipse', 'path', 'rect', 'text', 'image'.</p>\n\n<p>See <a href=\"#!/api/Ext.draw.Sprite\" rel=\"Ext.draw.Sprite\" class=\"docClass\">Ext.draw.Sprite</a> class documentation for examples of all types.</p>\n"},"width":{"!type":"number","!doc":"<p>The width of the rect or image sprite.</p>\n"},"x":{"!type":"number","!doc":"<p>Sprite position along the x-axis.</p>\n"},"y":{"!type":"number","!doc":"<p>Sprite position along the y-axis.</p>\n"},"dd":{"!type":"+Ext.dd.DragSource","!doc":"<p>If this Sprite is configured <a href=\"#!/api/Ext.draw.Sprite-cfg-draggable\" rel=\"Ext.draw.Sprite-cfg-draggable\" class=\"docClass\">draggable</a>, this property will contain\nan instance of <a href=\"#!/api/Ext.dd.DragSource\" rel=\"Ext.dd.DragSource\" class=\"docClass\">Ext.dd.DragSource</a> which handles dragging the Sprite.</p>\n\n<p>The developer must provide implementations of the abstract methods of <a href=\"#!/api/Ext.dd.DragSource\" rel=\"Ext.dd.DragSource\" class=\"docClass\">Ext.dd.DragSource</a>\nin order to supply behaviour for each stage of the drag/drop process. See <a href=\"#!/api/Ext.draw.Sprite-cfg-draggable\" rel=\"Ext.draw.Sprite-cfg-draggable\" class=\"docClass\">draggable</a>.</p>\n"},"dirtyFont":{"!type":"bool"},"dirtyHidden":{"!type":"bool"},"dirtyPath":{"!type":"bool"},"dirtyTransform":{"!type":"bool"},"fontProperties":{"!type":"[?]"},"isSprite":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated Sprite, or subclass thereof.</p>\n"},"pathProperties":{"!type":"[?]"},"zIndex":{"!type":"number"},"zIndexDirty":{"!type":"bool"},"addCls":{"!type":"fn(className: string|[string]) -> +Ext.draw.Sprite","!doc":"<p>Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.  Note this method\nis severly limited in VML.</p>\n"},"destroy":{"!type":"fn(this: +Ext.draw.Sprite, eOpts: ?)","!doc":"<p>Fires after the sprite is destroyed.</p>\n"},"getBBox":{"!type":"fn() -> ?","!doc":"<p>Retrieves the bounding box of the sprite.\nThis will be returned as an object with x, y, width, and height properties.</p>\n"},"hide":{"!type":"fn(redraw: bool) -> +Ext.draw.Sprite","!doc":"<p>Hides the sprite.</p>\n"},"onRemove":{"!type":"fn() -> !this"},"redraw":{"!type":"fn() -> +Ext.draw.Sprite","!doc":"<p>Redraws the sprite.</p>\n"},"remove":{"!type":"fn() -> bool","!doc":"<p>Removes the sprite.</p>\n"},"removeCls":{"!type":"fn(className: string|[string]) -> +Ext.draw.Sprite","!doc":"<p>Removes one or more CSS classes from the element.</p>\n"},"setAttributes":{"!type":"fn(attrs: ?, redraw: bool) -> +Ext.draw.Sprite","!doc":"<p>Change the attributes of the sprite.</p>\n\n<h2>Translation</h2>\n\n<p>For translate, the configuration object contains x and y attributes that indicate where to\ntranslate the object. For example:</p>\n\n<pre><code>sprite.setAttributes({\n  translate: {\n   x: 10,\n   y: 10\n  }\n}, true);\n</code></pre>\n\n<h2>Rotation</h2>\n\n<p>For rotation, the configuration object contains x and y attributes for the center of the rotation (which are optional),\nand a <code>degrees</code> attribute that specifies the rotation in degrees. For example:</p>\n\n<pre><code>sprite.setAttributes({\n  rotate: {\n   degrees: 90\n  }\n}, true);\n</code></pre>\n\n<p>That example will create a 90 degrees rotation using the centroid of the Sprite as center of rotation, whereas:</p>\n\n<pre><code>sprite.setAttributes({\n  rotate: {\n   x: 0,\n   y: 0,\n   degrees: 90\n  }\n}, true);\n</code></pre>\n\n<p>will create a rotation around the <code>(0, 0)</code> axis.</p>\n\n<h2>Scaling</h2>\n\n<p>For scaling, the configuration object contains x and y attributes for the x-axis and y-axis scaling. For example:</p>\n\n<pre><code>sprite.setAttributes({\n  scale: {\n   x: 10,\n   y: 3\n  }\n}, true);\n</code></pre>\n\n<p>You can also specify the center of scaling by adding <code>cx</code> and <code>cy</code> as properties:</p>\n\n<pre><code>sprite.setAttributes({\n  scale: {\n   cx: 0,\n   cy: 0,\n   x: 10,\n   y: 3\n  }\n}, true);\n</code></pre>\n\n<p>That last example will scale a sprite taking as centers of scaling the <code>(0, 0)</code> coordinate.</p>\n"},"setStyle":{"!type":"fn(property: string|?, value?: string) -> +Ext.draw.Sprite","!doc":"<p>Wrapper for setting style properties, also takes single object parameter of multiple styles.</p>\n"},"setText":{"!type":"fn(text: ?) -> !this"},"show":{"!type":"fn(redraw: bool) -> +Ext.draw.Sprite","!doc":"<p>Shows the sprite.</p>\n"},"beforedestroy":{"!type":"fn(this: +Ext.draw.Sprite, eOpts: ?)","!doc":"<p>Fires before the sprite is destroyed. Return false from an event handler to stop the destroy.</p>\n"},"click":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when a mouse click is detected within the element.</p>\n"},"mousedown":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when a mousedown is detected within the element.</p>\n"},"mousemove":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when a mousemove is detected with the element.</p>\n"},"mouseout":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when a mouseout is detected with the element.</p>\n"},"mouseover":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when a mouseover is detected within the element.</p>\n"},"mouseup":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when a mouseup is detected within the element.</p>\n"},"render":{"!type":"fn(this: +Ext.draw.Sprite, eOpts: ?)","!doc":"<p>Fires after the sprite markup is rendered.</p>\n"}}},"SpriteDD":{"!doc":"<p>DD implementation for Panels.</p>\n","!type":"fn(sprite: ?, cfg: ?)","prototype":{"!proto":"Ext.dd.DragSource.prototype","createFrame":{"!type":"fn() -> !this","!doc":"<p>Creates the proxy element if it does not yet exist</p>\n"},"getDragEl":{"!type":"fn(e: ?) -> +HTMLElement","!doc":"<p>Returns a reference to the actual element to drag.  By default this is\nthe same as the html element, but it can be assigned to another\nelement. An example of this can be found in <a href=\"#!/api/Ext.dd.DDProxy\" rel=\"Ext.dd.DDProxy\" class=\"docClass\">Ext.dd.DDProxy</a></p>\n"},"getRegion":{"!type":"fn() -> !this"},"onDrag":{"!type":"fn(e: ?) -> !this","!doc":"<p>Abstract method called during the onMouseMove event while dragging an\nobject.</p>\n"},"setDragElPos":{"!type":"fn() -> !this","!doc":"<p>Sets the drag element to the location of the mousedown or click event,\nmaintaining the cursor location relative to the location on the element\nthat was clicked.  Override this if you want to place the element in a\nlocation other than where the cursor is.</p>\n"},"showFrame":{"!type":"fn(iPageX: number, iPageY: number) -> !this","!doc":"<p>Resizes the drag frame to the dimensions of the clicked object, positions\nit over the object, and finally displays it</p>\n"},"startDrag":{"!type":"fn(x: ?, y: ?) -> !this","!doc":"<p>TODO(nico): Cumulative translations in VML are handled\ndifferently than in SVG. While in SVG we specify the translation\nrelative to the original x, y position attributes, in VML the translation\nis a delta between the last position of the object (modified by the last\ntranslation) and the new one.</p>\n\n<p>In VML the translation alters the position\nof the object, we should change that or alter the SVG impl.</p>\n"}}},"Surface":{"!doc":"<p>A Surface is an interface to render methods inside <a href=\"#!/api/Ext.draw.Component\" rel=\"Ext.draw.Component\" class=\"docClass\">Ext.draw.Component</a>.</p>\n\n<p>Most of the Surface methods are abstract and they have a concrete implementation\nin <a href=\"#!/api/Ext.draw.engine.Vml\" rel=\"Ext.draw.engine.Vml\" class=\"docClass\">VML</a> or <a href=\"#!/api/Ext.draw.engine.Svg\" rel=\"Ext.draw.engine.Svg\" class=\"docClass\">SVG</a> engines.</p>\n\n<p>A Surface contains methods to render <a href=\"#!/api/Ext.draw.Sprite\" rel=\"Ext.draw.Sprite\" class=\"docClass\">sprites</a>, get bounding\nboxes of sprites, add sprites to the canvas, initialize other graphic components, etc.</p>\n\n<h2>Adding sprites to surface</h2>\n\n<p>One of the most used methods for this class is the <a href=\"#!/api/Ext.draw.Surface-method-add\" rel=\"Ext.draw.Surface-method-add\" class=\"docClass\">add</a> method, to add Sprites to\nthe surface. For example:</p>\n\n<pre><code>drawComponent.surface.add({\n    type: 'circle',\n    fill: '#ffc',\n    radius: 100,\n    x: 100,\n    y: 100\n});\n</code></pre>\n\n<p>The configuration object passed in the <code>add</code> method is the same as described in the\n<a href=\"#!/api/Ext.draw.Sprite\" rel=\"Ext.draw.Sprite\" class=\"docClass\">Ext.draw.Sprite</a> class documentation.</p>\n\n<p>Sprites can also be added to surface by setting their surface config at creation time:</p>\n\n<pre><code>var sprite = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.draw.Sprite\" rel=\"Ext.draw.Sprite\" class=\"docClass\">Ext.draw.Sprite</a>', {\n    type: 'circle',\n    fill: '#ff0',\n    surface: drawComponent.surface,\n    radius: 5\n});\n</code></pre>\n\n<p>In order to properly apply properties and render the sprite we have to\n<code>show</code> the sprite setting the option <code>redraw</code> to <code>true</code>:</p>\n\n<pre><code>sprite.show(true);\n</code></pre>\n","!type":"fn(config?: Ext_draw_Surface_cfg)","prototype":{"!proto":"Ext.Base.prototype","height":{"!type":"number"},"items":{"!type":"[+Ext.draw.Sprite]","!doc":"<p>Array of sprites or sprite config objects to add initially to the surface.</p>\n"},"width":{"!type":"number"},"availableAttrs":{"!type":"?"},"enginePriority":{"!type":"[?]"},"orderSpritesByZIndex":{"!type":"bool","!doc":"<p>Flag indicating that the surface implementation requires sprites to be maintained\nin order of their zIndex. Impls that don't require this can set it to false.</p>\n"},"separatorRe":{"!type":"+RegExp"},"x":{"!type":"number"},"y":{"!type":"number"},"add":{"!type":"fn(args: [+Ext.draw.Sprite]|+Ext.draw.Sprite) -> [+Ext.draw.Sprite]|+Ext.draw.Sprite","!doc":"<p>Adds a Sprite to the surface. See <a href=\"#!/api/Ext.draw.Sprite\" rel=\"Ext.draw.Sprite\" class=\"docClass\">Ext.draw.Sprite</a> for the configuration object to be\npassed into this method.</p>\n\n<p>For example:</p>\n\n<pre><code>drawComponent.surface.add({\n    type: 'circle',\n    fill: '#ffc',\n    radius: 100,\n    x: 100,\n    y: 100\n});\n</code></pre>\n"},"addCls":{"!type":"fn(sprite: ?, className: string|[string]) -> !this","!doc":"<p>Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.</p>\n\n<p>For example:</p>\n\n<pre><code>drawComponent.surface.addCls(sprite, 'x-visible');\n</code></pre>\n"},"addGradient":{"!type":"fn(gradient: ?) -> !this","!doc":"<p>Adds a gradient definition to the Surface. Note that in some surface engines, adding\na gradient via this method will not take effect if the surface has already been rendered.\nTherefore, it is preferred to pass the gradients as an item to the surface config, rather\nthan calling this method, especially if the surface is rendered immediately (e.g. due to\n'renderTo' in its config). For more information on how to create gradients in the Chart\nconfiguration object please refer to <a href=\"#!/api/Ext.chart.Chart\" rel=\"Ext.chart.Chart\" class=\"docClass\">Ext.chart.Chart</a>.</p>\n\n<p>The gradient object to be passed into this method is composed by:</p>\n\n<ul>\n<li><strong>id</strong> - string - The unique name of the gradient.</li>\n<li><strong>angle</strong> - number, optional - The angle of the gradient in degrees.</li>\n<li><strong>stops</strong> - object - An object with numbers as keys (from 0 to 100) and style objects as values.</li>\n</ul>\n\n\n<p>For example:</p>\n\n<p>   drawComponent.surface.addGradient({\n       id: 'gradientId',\n       angle: 45,\n       stops: {\n           0: {\n               color: '#555'\n           },\n           100: {\n               color: '#ddd'\n           }\n       }\n   });</p>\n"},"applyTransformations":{"!type":"fn(sprite: ?, onlyMatrix: ?) -> !this"},"applyViewBox":{"!type":"fn() -> !this","!doc":"<p>Using the current viewBox property and the surface's width and height, calculate the\nappropriate viewBoxShift that will be applied as a persistent transform to all sprites.</p>\n"},"createGroup":{"!type":"fn(id: ?) -> !this"},"createItem":{"!type":"fn() -> !this","!doc":"<p>Creates an item and appends it to the surface. Called\nas an internal method when calling <code>add</code>.</p>\n"},"destroy":{"!type":"fn() -> !this","!doc":"<p>Destroys the surface. This is done by removing all components from it and\nalso removing its reference to a DOM element.</p>\n\n<p>For example:</p>\n\n<pre><code> drawComponent.surface.destroy();\n</code></pre>\n"},"ellipsePath":{"!type":"fn(x: ?, y: ?, rx: ?, ry: ?) -> !this"},"getBBox":{"!type":"fn(sprite: ?, isWithoutTransform: ?) -> !this"},"getGroup":{"!type":"fn(id: string) -> ?","!doc":"<p>Returns a new group or an existent group associated with the current surface.\nThe group returned is a <a href=\"#!/api/Ext.draw.CompositeSprite\" rel=\"Ext.draw.CompositeSprite\" class=\"docClass\">Ext.draw.CompositeSprite</a> group.</p>\n\n<p>For example:</p>\n\n<pre><code>var spriteGroup = drawComponent.surface.getGroup('someGroupId');\n</code></pre>\n"},"getId":{"!type":"fn() -> !this","!doc":"<p>Retrieves the id of this component.\nWill autogenerate an id if one has not already been set.</p>\n"},"getPathcircle":{"!type":"fn(el: ?) -> !this"},"getPathellipse":{"!type":"fn(el: ?) -> !this"},"getPathimage":{"!type":"fn(el: ?) -> !this"},"getPathpath":{"!type":"fn(el: ?) -> !this"},"getPathrect":{"!type":"fn(el: ?) -> !this"},"getPathtext":{"!type":"fn(el: ?) -> !this"},"initBackground":{"!type":"fn(config: ?) -> !this"},"initGradients":{"!type":"fn() -> !this"},"initItems":{"!type":"fn() -> !this"},"initSurface":{"!type":"fn() -> !this","!doc":"<p>called to initialize components in the surface\nthis is dependent on the underlying implementation.</p>\n"},"insertByZIndex":{"!type":"fn(sprite: +Ext.draw.Sprite) -> number","!doc":"<p>Inserts a given sprite into the correct position in the items collection, according to\nits zIndex. It will be inserted at the end of an existing series of sprites with the same or\nlower zIndex. By ensuring sprites are always ordered, this allows surface subclasses to render\nthe sprites in the correct order for proper z-index stacking.</p>\n"},"onAdd":{"!type":"fn(sprite: ?) -> !this"},"onClick":{"!type":"fn(e: ?) -> !this"},"onDblClick":{"!type":"fn(e: ?) -> !this"},"onDestroy":{"!type":"fn() -> !this"},"onMouseDown":{"!type":"fn(e: ?) -> !this"},"onMouseEnter":{"!type":"fn() -> !this"},"onMouseLeave":{"!type":"fn() -> !this"},"onMouseMove":{"!type":"fn(e: ?) -> !this"},"onMouseOut":{"!type":"fn(e: ?) -> !this"},"onMouseOver":{"!type":"fn(e: ?) -> !this"},"onMouseUp":{"!type":"fn(e: ?) -> !this"},"onRemove":{"!type":"fn() -> !this"},"prepareItems":{"!type":"fn(items: ?, applyDefaults: ?) -> !this"},"rectPath":{"!type":"fn(x: ?, y: ?, w: ?, h: ?, r: ?) -> !this"},"remove":{"!type":"fn(sprite: +Ext.draw.Sprite, destroySprite: bool) -> !this","!doc":"<p>Removes a given sprite from the surface, optionally destroying the sprite in the process.\nYou can also call the sprite own <code>remove</code> method.</p>\n\n<p>For example:</p>\n\n<pre><code>drawComponent.surface.remove(sprite);\n//or...\nsprite.remove();\n</code></pre>\n"},"removeAll":{"!type":"fn(destroySprites: bool) -> !this","!doc":"<p>Removes all sprites from the surface, optionally destroying the sprites in the process.</p>\n\n<p>For example:</p>\n\n<pre><code>drawComponent.surface.removeAll();\n</code></pre>\n"},"removeCls":{"!type":"fn(sprite: ?, className: string|[string]) -> !this","!doc":"<p>Removes one or more CSS classes from the element.</p>\n\n<p>For example:</p>\n\n<pre><code>drawComponent.surface.removeCls(sprite, 'x-visible');\n</code></pre>\n"},"renderItem":{"!type":"fn() -> !this","!doc":"<p>called to setup the surface to render an item\nthis is dependent on the underlying implementation.</p>\n"},"renderItems":{"!type":"fn() -> !this"},"rotate":{"!type":"fn(sprite: ?) -> !this"},"scale":{"!type":"fn(sprite: ?) -> !this"},"scrubAttrs":{"!type":"fn(sprite: ?) -> !this"},"setSize":{"!type":"fn(w: number, h: number) -> !this","!doc":"<p>Sets the size of the surface. Accomodates the background (if any) to fit the new size too.</p>\n\n<p>For example:</p>\n\n<pre><code>drawComponent.surface.setSize(500, 500);\n</code></pre>\n\n<p>This method is generally called when also setting the size of the draw Component.</p>\n"},"setStyle":{"!type":"fn(sprite: ?, styles: ?) -> !this","!doc":"<p>Sets CSS style attributes to an element.</p>\n\n<p>For example:</p>\n\n<pre><code>drawComponent.surface.setStyle(sprite, {\n    'cursor': 'pointer'\n});\n</code></pre>\n"},"setText":{"!type":"fn(sprite: ?, text: string) -> !this","!doc":"<p>Changes the text in the sprite element. The sprite must be a <code>text</code> sprite.\nThis method can also be called from <a href=\"#!/api/Ext.draw.Sprite\" rel=\"Ext.draw.Sprite\" class=\"docClass\">Ext.draw.Sprite</a>.</p>\n\n<p>For example:</p>\n\n<pre><code>var spriteGroup = drawComponent.surface.setText(sprite, 'my new text');\n</code></pre>\n"},"setViewBox":{"!type":"fn(x: ?, y: ?, width: ?, height: ?) -> !this"},"transformToViewBox":{"!type":"fn(x: ?, y: ?) -> !this"},"translate":{"!type":"fn(sprite: ?) -> !this"},"click":{"!type":"fn(e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when a click is detected within the surface.</p>\n"},"dblclick":{"!type":"fn(e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when a dblclick is detected within the surface.</p>\n"},"mousedown":{"!type":"fn(e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when a mousedown is detected within the surface.</p>\n"},"mouseenter":{"!type":"fn(e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when a mouseenter is detected within the surface.</p>\n"},"mouseleave":{"!type":"fn(e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when a mouseleave is detected within the surface.</p>\n"},"mousemove":{"!type":"fn(e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when a mousemove is detected within the surface.</p>\n"},"mouseout":{"!type":"fn(e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when a mouseout is detected within the surface.</p>\n"},"mouseover":{"!type":"fn(e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when a mouseover is detected within the surface.</p>\n"},"mouseup":{"!type":"fn(e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when a mouseup is detected within the surface.</p>\n"}},"create":{"!type":"fn(config: ?, enginePriority?: [string]) -> ?","!doc":"<p>Creates and returns a new concrete Surface instance appropriate for the current environment.</p>\n"},"save":{"!type":"fn(surface: +Ext.draw.Surface, config?: ?) -> ?","!doc":"<p>Exports a <a href=\"#!/api/Ext.draw.Surface\" rel=\"Ext.draw.Surface\" class=\"docClass\">surface</a> in a different format.\nThe surface may be exported to an SVG string, using the\n<a href=\"#!/api/Ext.draw.engine.SvgExporter\" rel=\"Ext.draw.engine.SvgExporter\" class=\"docClass\">Ext.draw.engine.SvgExporter</a>. It may also be exported\nas an image using the <a href=\"#!/api/Ext.draw.engine.ImageExporter\" rel=\"Ext.draw.engine.ImageExporter\" class=\"docClass\">ImageExporter</a>.\nNote that this requires sending data to a remote server to process\nthe SVG into an image, see the <a href=\"#!/api/Ext.draw.engine.ImageExporter\" rel=\"Ext.draw.engine.ImageExporter\" class=\"docClass\">Ext.draw.engine.ImageExporter</a> for\nmore details.</p>\n"}},"Text":{"!doc":"<p>This class encapsulates a drawn text item as rendered by the Ext.draw package within a Component which can be\nthen used anywhere in an ExtJS application just like any other Component.</p>\n\n<h2>Example usage</h2>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>', {\n    title: 'Panel with VerticalTextItem',\n    width: 300,\n    height: 200,\n    lbar: {\n        layout: {\n            align: 'center'\n        },\n        items: [{\n            xtype: 'text',\n            text: 'Sample VerticalTextItem',\n            degrees: 90\n        }]\n    },\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n","!type":"fn(text: ?)","prototype":{"!proto":"Ext.draw.Component.prototype","autoSize":{"!type":"bool","!doc":"<p>Turn on autoSize support which will set the bounding div's size to the natural size of the contents.</p>\n"},"baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this component's element. This will also be prepended to elements within this\ncomponent like Panel's body will get a class <code>x-panel-body</code>. This means that if you create a subclass of Panel, and\nyou want it to get all the Panels styling for the element and the body, you leave the <code>baseCls</code> <code>x-panel</code> and use\n<code>componentCls</code> to add specific styling for this component.</p>\n"},"degrees":{"!type":"number","!doc":"<p>The angle by which to initially rotate the text clockwise. Defaults to zero.</p>\n"},"styleSelector":{"!type":"string","!doc":"<p>A CSS selector string which matches a style rule in the document stylesheet from which\nthe text's font properties are read.</p>\n\n<p><strong>Drawn</strong> text is not styled by CSS, but by properties set during its construction, so these styles\nmust be programatically read from a stylesheet rule found via a selector at construction time.</p>\n"},"text":{"!type":"string","!doc":"<p>The text to display (html tags are <b>not</b> accepted)</p>\n"},"viewBox":{"!type":"bool","!doc":"<p>Turn on view box support which will scale and position items in the draw component to fit to the component while\nmaintaining aspect ratio. Note that this scaling can override other sizing settings on your items.</p>\n"},"getStyles":{"!type":"fn(selectors: ?) -> !this","!doc":"<p>Accumulates a style object based upon the styles specified in document stylesheets\nby an array of CSS selectors</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>The initComponent template method is an important initialization step for a Component. It is intended to be\nimplemented by each subclass of <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> to provide any needed constructor logic. The\ninitComponent method of the class being created is called first, with each initComponent method\nup the hierarchy to <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> being called thereafter. This makes it easy to implement and,\nif needed, override the constructor logic of the Component at any step in the hierarchy.</p>\n\n<p>The initComponent method <strong>must</strong> contain a call to <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a> in order\nto ensure that the parent class' initComponent method is also called.</p>\n\n<p>All config options passed to the constructor are applied to <code>this</code> before initComponent is called,\nso you can simply access them with <code>this.someOption</code>.</p>\n\n<p>The following example demonstrates using a dynamic string for the text of a button at the time of\ninstantiation of the class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('DynamicButtonText', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n\n    initComponent: function() {\n        this.text = new Date();\n        this.renderTo = <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>();\n        this.callParent();\n    }\n});\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function() {\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('DynamicButtonText');\n});\n</code></pre>\n"},"setAngle":{"!type":"fn(degrees: number) -> !this","!doc":"<p>Sets the clockwise rotation angle relative to the horizontal axis.</p>\n"},"setText":{"!type":"fn(t: string) -> !this","!doc":"<p>Updates this item's text.</p>\n"}}},"engine":{"ImageExporter":{"!doc":"<p>Exports a <a href=\"#!/api/Ext.draw.Surface\" rel=\"Ext.draw.Surface\" class=\"docClass\">Surface</a> to an image. To do this,\nthe svg string must be sent to a remote server and processed.</p>\n\n<h1>Sending the data</h1>\n\n<p>A post request is made to the URL. The following fields are sent:</p>\n\n<ul>\n<li>width: The width of the image</li>\n<li>height: The height of the image</li>\n<li>type: The image type to save as, see <a href=\"#!/api/Ext.draw.engine.ImageExporter-property-supportedTypes\" rel=\"Ext.draw.engine.ImageExporter-property-supportedTypes\" class=\"docClass\">supportedTypes</a></li>\n<li>svg: The svg string for the surface</li>\n</ul>\n\n\n<h1>The response</h1>\n\n<p>It is expected that the user will be prompted with an image download.\nAs such, the following options should be set on the server:</p>\n\n<ul>\n<li>Content-Disposition: 'attachment, filename=\"chart.png\"'</li>\n<li>Content-Type: 'image/png'</li>\n</ul>\n\n\n<p><strong>Important</strong>: By default, chart data is sent to a server operated\nby Sencha to do data processing. You may change this default by\nsetting the <a href=\"#!/api/Ext.draw.engine.ImageExporter-property-defaultUrl\" rel=\"Ext.draw.engine.ImageExporter-property-defaultUrl\" class=\"docClass\">defaultUrl</a> of this class.\nIn addition, please note that this service only creates PNG images.</p>\n","defaultUrl":{"!type":"string","!doc":"<p>The default URL to submit the form request.</p>\n"},"formCls":{"!type":"string"},"heightParam":{"!type":"string","!doc":"<p>The name of the height parameter to be sent to the server.\nThe Sencha IO server expects it to be the default value.</p>\n"},"supportedTypes":{"!type":"[?]","!doc":"<p>A list of export types supported by the server</p>\n"},"svgParam":{"!type":"string","!doc":"<p>The name of the svg parameter to be sent to the server.\nThe Sencha IO server expects it to be the default value.</p>\n"},"typeParam":{"!type":"string","!doc":"<p>The name of the type parameter to be sent to the server.\nThe Sencha IO server expects it to be the default value.</p>\n"},"widthParam":{"!type":"string","!doc":"<p>The name of the width parameter to be sent to the server.\nThe Sencha IO server expects it to be the default value.</p>\n"},"generate":{"!type":"fn(surface: +Ext.draw.Surface, config?: ?) -> bool","!doc":"<p>Exports the surface to an image</p>\n"}},"Svg":{"!doc":"<p>Provides specific methods to draw with SVG.</p>\n","!type":"fn(config?: Ext_draw_engine_Svg_cfg)","prototype":{"!proto":"Ext.draw.Surface.prototype","engine":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"minDefaults":{"!type":"?"},"parsers":{"!type":"?"},"spacesRe":{"!type":"+RegExp"},"translateAttrs":{"!type":"?"},"trimRe":{"!type":"+RegExp"},"xlink":{"!type":"string"},"addCls":{"!type":"fn(sprite: ?, className: ?) -> !this","!doc":"<p>Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.</p>\n\n<p>For example:</p>\n\n<pre><code>drawComponent.surface.addCls(sprite, 'x-visible');\n</code></pre>\n"},"addGradient":{"!type":"fn(gradient: ?) -> !this","!doc":"<p>Adds a gradient definition to the Surface. Note that in some surface engines, adding\na gradient via this method will not take effect if the surface has already been rendered.\nTherefore, it is preferred to pass the gradients as an item to the surface config, rather\nthan calling this method, especially if the surface is rendered immediately (e.g. due to\n'renderTo' in its config). For more information on how to create gradients in the Chart\nconfiguration object please refer to <a href=\"#!/api/Ext.chart.Chart\" rel=\"Ext.chart.Chart\" class=\"docClass\">Ext.chart.Chart</a>.</p>\n\n<p>The gradient object to be passed into this method is composed by:</p>\n\n<ul>\n<li><strong>id</strong> - string - The unique name of the gradient.</li>\n<li><strong>angle</strong> - number, optional - The angle of the gradient in degrees.</li>\n<li><strong>stops</strong> - object - An object with numbers as keys (from 0 to 100) and style objects as values.</li>\n</ul>\n\n\n<p>For example:</p>\n\n<p>   drawComponent.surface.addGradient({\n       id: 'gradientId',\n       angle: 45,\n       stops: {\n           0: {\n               color: '#555'\n           },\n           100: {\n               color: '#ddd'\n           }\n       }\n   });</p>\n"},"applyAttrs":{"!type":"fn(sprite: ?) -> !this"},"applyZIndex":{"!type":"fn(sprite: +Ext.draw.Sprite) -> !this","!doc":"<p>Insert or move a given sprite's element to the correct place in the DOM list for its zIndex</p>\n"},"createItem":{"!type":"fn(config: ?) -> !this","!doc":"<p>Creates an item and appends it to the surface. Called\nas an internal method when calling <code>add</code>.</p>\n"},"createSpriteElement":{"!type":"fn(sprite: ?) -> !this"},"createSvgElement":{"!type":"fn(type: ?, attrs: ?) -> !this"},"destroy":{"!type":"fn() -> !this","!doc":"<p>Destroys the surface. This is done by removing all components from it and\nalso removing its reference to a DOM element.</p>\n\n<p>For example:</p>\n\n<pre><code> drawComponent.surface.destroy();\n</code></pre>\n"},"getBBoxText":{"!type":"fn(sprite: ?) -> !this"},"getDefs":{"!type":"fn() -> !this"},"getRegion":{"!type":"fn() -> +Ext.util.Region","!doc":"<p>Get the region for the surface's canvas area</p>\n"},"hasCls":{"!type":"fn(sprite: +Ext.draw.Sprite, className: string) -> bool","!doc":"<p>Checks if the specified CSS class exists on this element's DOM node.</p>\n"},"hide":{"!type":"fn() -> !this"},"hidePrim":{"!type":"fn(sprite: ?) -> !this"},"onMouseEnter":{"!type":"fn(e: ?) -> !this","!doc":"<p>private</p>\n"},"onMouseLeave":{"!type":"fn(e: ?) -> !this","!doc":"<p>private</p>\n"},"onRemove":{"!type":"fn(sprite: ?) -> !this"},"processEvent":{"!type":"fn(name: ?, e: ?) -> !this","!doc":"<ul>\n<li>Normalize a delegated single event from the main container to each sprite and sprite group</li>\n</ul>\n\n"},"redraw":{"!type":"fn(sprite: ?) -> !this"},"removeCls":{"!type":"fn(sprite: ?, className: ?) -> !this","!doc":"<p>Removes one or more CSS classes from the element.</p>\n\n<p>For example:</p>\n\n<pre><code>drawComponent.surface.removeCls(sprite, 'x-visible');\n</code></pre>\n"},"render":{"!type":"fn(container: ?) -> !this"},"renderAll":{"!type":"fn() -> !this"},"renderItem":{"!type":"fn(sprite: ?) -> !this","!doc":"<p>called to setup the surface to render an item\nthis is dependent on the underlying implementation.</p>\n"},"setClip":{"!type":"fn(sprite: ?, params: ?) -> !this"},"setSize":{"!type":"fn(width: ?, height: ?) -> !this","!doc":"<p>Sets the size of the surface. Accomodates the background (if any) to fit the new size too.</p>\n\n<p>For example:</p>\n\n<pre><code>drawComponent.surface.setSize(500, 500);\n</code></pre>\n\n<p>This method is generally called when also setting the size of the draw Component.</p>\n"},"setText":{"!type":"fn(sprite: ?, textString: ?) -> !this","!doc":"<p>Changes the text in the sprite element. The sprite must be a <code>text</code> sprite.\nThis method can also be called from <a href=\"#!/api/Ext.draw.Sprite\" rel=\"Ext.draw.Sprite\" class=\"docClass\">Ext.draw.Sprite</a>.</p>\n\n<p>For example:</p>\n\n<pre><code>var spriteGroup = drawComponent.surface.setText(sprite, 'my new text');\n</code></pre>\n"},"setViewBox":{"!type":"fn(x: ?, y: ?, width: ?, height: ?) -> !this"},"show":{"!type":"fn() -> !this"},"showPrim":{"!type":"fn(sprite: ?) -> !this"},"transform":{"!type":"fn(sprite: ?, matrixOnly: ?) -> !this"},"tuneText":{"!type":"fn(sprite: ?, attrs: ?) -> !this","!doc":"<ul>\n<li>Wrap SVG text inside a tspan to allow for line wrapping.  In addition this normallizes\nthe baseline for text the vertical middle of the text to be the same as VML.</li>\n</ul>\n\n"}}},"SvgExporter":{"!doc":"<p>A utility class for exporting a <a href=\"#!/api/Ext.draw.Surface\" rel=\"Ext.draw.Surface\" class=\"docClass\">Surface</a> to a string\nthat may be saved or used for processing on the server.</p>\n","generate":{"!type":"fn(surface: +Ext.draw.Surface, config?: ?) -> string","!doc":"<p>Exports the passed surface to a SVG string representation</p>\n"}},"Vml":{"!doc":"<p>Provides specific methods to draw with VML.</p>\n","!type":"fn(config?: Ext_draw_engine_Vml_cfg)","prototype":{"!proto":"Ext.draw.Surface.prototype","NonVmlPathRe":{"!type":"+RegExp"},"baseVmlCls":{"!type":"string"},"bitesRe":{"!type":"+RegExp"},"coordorigin":{"!type":"string"},"coordsize":{"!type":"number"},"engine":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"fillUrlRe":{"!type":"+RegExp"},"fontFamilyRe":{"!type":"+RegExp"},"map":{"!type":"?"},"measureSpanCls":{"!type":"string"},"minDefaults":{"!type":"?","!doc":"<ul>\n<li>Minimun set of defaults for different types of sprites.</li>\n</ul>\n\n"},"orderSpritesByZIndex":{"!type":"bool","!doc":"<p>VML uses CSS z-index and therefore doesn't need sprites to be kept in zIndex order</p>\n"},"partialPathRe":{"!type":"+RegExp","!doc":"<p>Non-VML Pathing ops</p>\n"},"pathlike":{"!type":"+RegExp"},"spriteCls":{"!type":"string"},"translateAttrs":{"!type":"?","!doc":"<ul>\n<li>set of attributes which need to be translated from the sprite API to the native browser API</li>\n</ul>\n\n"},"valRe":{"!type":"+RegExp"},"vmlGroupCls":{"!type":"string"},"zIndexShift":{"!type":"number"},"zoom":{"!type":"number"},"addCls":{"!type":"fn(sprite: ?, className: ?) -> !this","!doc":"<p>Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.</p>\n\n<p>For example:</p>\n\n<pre><code>drawComponent.surface.addCls(sprite, 'x-visible');\n</code></pre>\n"},"addGradient":{"!type":"fn(gradient: ?) -> !this","!doc":"<p>Adds a definition to this Surface for a linear gradient. We convert the gradient definition\nto its corresponding VML attributes and store it for later use by individual sprites.</p>\n"},"applyAttrs":{"!type":"fn(sprite: ?) -> !this"},"applyViewBox":{"!type":"fn() -> !this","!doc":"<p>Using the current viewBox property and the surface's width and height, calculate the\nappropriate viewBoxShift that will be applied as a persistent transform to all sprites.</p>\n"},"createItem":{"!type":"fn(config: ?) -> !this","!doc":"<p>Creates an item and appends it to the surface. Called\nas an internal method when calling <code>add</code>.</p>\n"},"createSpriteElement":{"!type":"fn(sprite: ?) -> !this","!doc":"<p>Create the VML element/elements and append them to the DOM</p>\n"},"destroy":{"!type":"fn() -> !this","!doc":"<p>Destroys the surface. This is done by removing all components from it and\nalso removing its reference to a DOM element.</p>\n\n<p>For example:</p>\n\n<pre><code> drawComponent.surface.destroy();\n</code></pre>\n"},"getBBoxText":{"!type":"fn(sprite: ?) -> !this"},"getRegion":{"!type":"fn() -> !this"},"hide":{"!type":"fn() -> !this"},"hidePrim":{"!type":"fn(sprite: ?) -> !this"},"onAdd":{"!type":"fn(item: ?) -> !this"},"onMouseEnter":{"!type":"fn(e: ?) -> !this","!doc":"<p>private</p>\n"},"onMouseLeave":{"!type":"fn(e: ?) -> !this","!doc":"<p>private</p>\n"},"onRemove":{"!type":"fn(sprite: ?) -> !this"},"path2vml":{"!type":"fn(path: ?) -> !this","!doc":"<p>Convert an SVG standard path into a VML path</p>\n"},"processEvent":{"!type":"fn(name: ?, e: ?) -> !this","!doc":"<ul>\n<li>Normalize a delegated single event from the main container to each sprite and sprite group</li>\n</ul>\n\n"},"redraw":{"!type":"fn(sprite: ?) -> !this"},"removeCls":{"!type":"fn(sprite: ?, className: ?) -> !this","!doc":"<p>Removes one or more CSS classes from the element.</p>\n\n<p>For example:</p>\n\n<pre><code>drawComponent.surface.removeCls(sprite, 'x-visible');\n</code></pre>\n"},"render":{"!type":"fn(container: ?) -> !this"},"renderAll":{"!type":"fn() -> !this"},"renderItem":{"!type":"fn(sprite: ?) -> !this","!doc":"<p>called to setup the surface to render an item\nthis is dependent on the underlying implementation.</p>\n"},"rotationCompensation":{"!type":"fn(deg: ?, dx: ?, dy: ?) -> !this"},"setClip":{"!type":"fn(sprite: ?, params: ?) -> !this"},"setFill":{"!type":"fn(sprite: ?, params: ?) -> !this"},"setPaths":{"!type":"fn(sprite: ?, params: ?) -> !this","!doc":"<p>Normalize all virtualized types into paths.</p>\n"},"setSize":{"!type":"fn(width: ?, height: ?) -> !this","!doc":"<p>Sets the size of the surface. Accomodates the background (if any) to fit the new size too.</p>\n\n<p>For example:</p>\n\n<pre><code>drawComponent.surface.setSize(500, 500);\n</code></pre>\n\n<p>This method is generally called when also setting the size of the draw Component.</p>\n"},"setStroke":{"!type":"fn(sprite: ?, params: ?) -> !this"},"setText":{"!type":"fn(sprite: ?, text: ?) -> !this","!doc":"<p>Changes the text in the sprite element. The sprite must be a <code>text</code> sprite.\nThis method can also be called from <a href=\"#!/api/Ext.draw.Sprite\" rel=\"Ext.draw.Sprite\" class=\"docClass\">Ext.draw.Sprite</a>.</p>\n\n<p>For example:</p>\n\n<pre><code>var spriteGroup = drawComponent.surface.setText(sprite, 'my new text');\n</code></pre>\n"},"setTextAttributes":{"!type":"fn(sprite: ?, params: ?) -> !this"},"setZIndex":{"!type":"fn(sprite: ?) -> !this"},"show":{"!type":"fn() -> !this"},"showPrim":{"!type":"fn(sprite: ?) -> !this"},"transform":{"!type":"fn(sprite: ?, matrixOnly: ?) -> !this"}}}}},"enums":{"Feature":{"!doc":"<p>Enumeration of all ftypes.</p>\n","prototype":{"abstractsummary":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.grid.feature.AbstractSummary\" rel=\"Ext.grid.feature.AbstractSummary\" class=\"docClass\">Ext.grid.feature.AbstractSummary</a>.</p>\n"},"feature":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.grid.feature.Feature\" rel=\"Ext.grid.feature.Feature\" class=\"docClass\">Ext.grid.feature.Feature</a>.</p>\n"},"grouping":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.grid.feature.Grouping\" rel=\"Ext.grid.feature.Grouping\" class=\"docClass\">Ext.grid.feature.Grouping</a>.</p>\n"},"groupingsummary":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.grid.feature.GroupingSummary\" rel=\"Ext.grid.feature.GroupingSummary\" class=\"docClass\">Ext.grid.feature.GroupingSummary</a>.</p>\n"},"rowbody":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.grid.feature.RowBody\" rel=\"Ext.grid.feature.RowBody\" class=\"docClass\">Ext.grid.feature.RowBody</a>.</p>\n"},"rowwrap":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.grid.feature.RowWrap\" rel=\"Ext.grid.feature.RowWrap\" class=\"docClass\">Ext.grid.feature.RowWrap</a>.</p>\n"},"summary":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.grid.feature.Summary\" rel=\"Ext.grid.feature.Summary\" class=\"docClass\">Ext.grid.feature.Summary</a>.</p>\n"}}},"Layout":{"!doc":"<p>Enumeration of all layout types.</p>\n","prototype":{"absolute":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.layout.container.Absolute\" rel=\"Ext.layout.container.Absolute\" class=\"docClass\">Ext.layout.container.Absolute</a>.</p>\n"},"accordion":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.layout.container.Accordion\" rel=\"Ext.layout.container.Accordion\" class=\"docClass\">Ext.layout.container.Accordion</a>.</p>\n"},"anchor":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.layout.container.Anchor\" rel=\"Ext.layout.container.Anchor\" class=\"docClass\">Ext.layout.container.Anchor</a>.</p>\n"},"auto":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">Ext.layout.container.Auto</a>.</p>\n"},"autocomponent":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.layout.component.Auto\" rel=\"Ext.layout.component.Auto\" class=\"docClass\">Ext.layout.component.Auto</a>.</p>\n"},"autocontainer":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">Ext.layout.container.Auto</a>.</p>\n"},"body":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.layout.component.Body\" rel=\"Ext.layout.component.Body\" class=\"docClass\">Ext.layout.component.Body</a>.</p>\n"},"border":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">Ext.layout.container.Border</a>.</p>\n"},"boundlist":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.layout.component.BoundList\" rel=\"Ext.layout.component.BoundList\" class=\"docClass\">Ext.layout.component.BoundList</a>.</p>\n"},"box":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.layout.container.Box\" rel=\"Ext.layout.container.Box\" class=\"docClass\">Ext.layout.container.Box</a>.</p>\n"},"button":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.layout.component.Button\" rel=\"Ext.layout.component.Button\" class=\"docClass\">Ext.layout.component.Button</a>.</p>\n"},"card":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.layout.container.Card\" rel=\"Ext.layout.container.Card\" class=\"docClass\">Ext.layout.container.Card</a>.</p>\n"},"checkboxgroup":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.layout.container.CheckboxGroup\" rel=\"Ext.layout.container.CheckboxGroup\" class=\"docClass\">Ext.layout.container.CheckboxGroup</a>.</p>\n"},"column":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.layout.container.Column\" rel=\"Ext.layout.container.Column\" class=\"docClass\">Ext.layout.container.Column</a>.</p>\n"},"columncomponent":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.grid.ColumnComponentLayout\" rel=\"Ext.grid.ColumnComponentLayout\" class=\"docClass\">Ext.grid.ColumnComponentLayout</a>.</p>\n"},"combobox":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.layout.component.field.ComboBox\" rel=\"Ext.layout.component.field.ComboBox\" class=\"docClass\">Ext.layout.component.field.ComboBox</a>.</p>\n"},"container":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.layout.container.Container\" rel=\"Ext.layout.container.Container\" class=\"docClass\">Ext.layout.container.Container</a>.</p>\n"},"dock":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.layout.component.Dock\" rel=\"Ext.layout.component.Dock\" class=\"docClass\">Ext.layout.component.Dock</a>.</p>\n"},"draw":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.layout.component.Draw\" rel=\"Ext.layout.component.Draw\" class=\"docClass\">Ext.layout.component.Draw</a>.</p>\n"},"editor":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.layout.container.Editor\" rel=\"Ext.layout.container.Editor\" class=\"docClass\">Ext.layout.container.Editor</a>.</p>\n"},"field":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.layout.component.field.Field\" rel=\"Ext.layout.component.field.Field\" class=\"docClass\">Ext.layout.component.field.Field</a>.</p>\n"},"fieldcontainer":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.layout.component.field.FieldContainer\" rel=\"Ext.layout.component.field.FieldContainer\" class=\"docClass\">Ext.layout.component.field.FieldContainer</a>.</p>\n"},"fieldset":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.layout.component.FieldSet\" rel=\"Ext.layout.component.FieldSet\" class=\"docClass\">Ext.layout.component.FieldSet</a>.</p>\n"},"fit":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.layout.container.Fit\" rel=\"Ext.layout.container.Fit\" class=\"docClass\">Ext.layout.container.Fit</a>.</p>\n"},"form":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.layout.container.Form\" rel=\"Ext.layout.container.Form\" class=\"docClass\">Ext.layout.container.Form</a>.</p>\n"},"gridcolumn":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.grid.ColumnLayout\" rel=\"Ext.grid.ColumnLayout\" class=\"docClass\">Ext.grid.ColumnLayout</a>.</p>\n"},"hbox":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.layout.container.HBox\" rel=\"Ext.layout.container.HBox\" class=\"docClass\">Ext.layout.container.HBox</a>.</p>\n"},"htmleditor":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.layout.component.field.HtmlEditor\" rel=\"Ext.layout.component.field.HtmlEditor\" class=\"docClass\">Ext.layout.component.field.HtmlEditor</a>.</p>\n"},"progressbar":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.layout.component.ProgressBar\" rel=\"Ext.layout.component.ProgressBar\" class=\"docClass\">Ext.layout.component.ProgressBar</a>.</p>\n"},"sliderfield":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.layout.component.field.Slider\" rel=\"Ext.layout.component.field.Slider\" class=\"docClass\">Ext.layout.component.field.Slider</a>.</p>\n"},"table":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.layout.container.Table\" rel=\"Ext.layout.container.Table\" class=\"docClass\">Ext.layout.container.Table</a>.</p>\n"},"tableview":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.view.TableLayout\" rel=\"Ext.view.TableLayout\" class=\"docClass\">Ext.view.TableLayout</a>.</p>\n"},"textareafield":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.layout.component.field.TextArea\" rel=\"Ext.layout.component.field.TextArea\" class=\"docClass\">Ext.layout.component.field.TextArea</a>.</p>\n"},"textfield":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.layout.component.field.Text\" rel=\"Ext.layout.component.field.Text\" class=\"docClass\">Ext.layout.component.field.Text</a>.</p>\n"},"triggerfield":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.layout.component.field.Trigger\" rel=\"Ext.layout.component.field.Trigger\" class=\"docClass\">Ext.layout.component.field.Trigger</a>.</p>\n"},"vbox":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.layout.container.VBox\" rel=\"Ext.layout.container.VBox\" class=\"docClass\">Ext.layout.container.VBox</a>.</p>\n"}}},"Plugin":{"!doc":"<p>Enumeration of all ptypes.</p>\n","prototype":{"bufferedrenderer":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.grid.plugin.BufferedRenderer\" rel=\"Ext.grid.plugin.BufferedRenderer\" class=\"docClass\">Ext.grid.plugin.BufferedRenderer</a>.</p>\n"},"cellediting":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.grid.plugin.CellEditing\" rel=\"Ext.grid.plugin.CellEditing\" class=\"docClass\">Ext.grid.plugin.CellEditing</a>.</p>\n"},"gridheaderreorderer":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.grid.plugin.HeaderReorderer\" rel=\"Ext.grid.plugin.HeaderReorderer\" class=\"docClass\">Ext.grid.plugin.HeaderReorderer</a>.</p>\n"},"gridheaderresizer":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.grid.plugin.HeaderResizer\" rel=\"Ext.grid.plugin.HeaderResizer\" class=\"docClass\">Ext.grid.plugin.HeaderResizer</a>.</p>\n"},"gridviewdragdrop":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.grid.plugin.DragDrop\" rel=\"Ext.grid.plugin.DragDrop\" class=\"docClass\">Ext.grid.plugin.DragDrop</a>.</p>\n"},"rowediting":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.grid.plugin.RowEditing\" rel=\"Ext.grid.plugin.RowEditing\" class=\"docClass\">Ext.grid.plugin.RowEditing</a>.</p>\n"},"rowexpander":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.grid.plugin.RowExpander\" rel=\"Ext.grid.plugin.RowExpander\" class=\"docClass\">Ext.grid.plugin.RowExpander</a>.</p>\n"},"treeviewdragdrop":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.tree.plugin.TreeViewDragDrop\" rel=\"Ext.tree.plugin.TreeViewDragDrop\" class=\"docClass\">Ext.tree.plugin.TreeViewDragDrop</a>.</p>\n"}}},"Widget":{"!doc":"<p>Enumeration of all xtypes.</p>\n","prototype":{"actioncolumn":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.grid.column.Action\" rel=\"Ext.grid.column.Action\" class=\"docClass\">Ext.grid.column.Action</a>.</p>\n"},"booleancolumn":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.grid.column.Boolean\" rel=\"Ext.grid.column.Boolean\" class=\"docClass\">Ext.grid.column.Boolean</a>.</p>\n"},"bordersplitter":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.resizer.BorderSplitter\" rel=\"Ext.resizer.BorderSplitter\" class=\"docClass\">Ext.resizer.BorderSplitter</a>.</p>\n"},"boundlist":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.view.BoundList\" rel=\"Ext.view.BoundList\" class=\"docClass\">Ext.view.BoundList</a>.</p>\n"},"box":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>.</p>\n"},"button":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>.</p>\n"},"buttongroup":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.container.ButtonGroup\" rel=\"Ext.container.ButtonGroup\" class=\"docClass\">Ext.container.ButtonGroup</a>.</p>\n"},"chart":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.chart.Chart\" rel=\"Ext.chart.Chart\" class=\"docClass\">Ext.chart.Chart</a>.</p>\n"},"checkbox":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.form.field.Checkbox\" rel=\"Ext.form.field.Checkbox\" class=\"docClass\">Ext.form.field.Checkbox</a>.</p>\n"},"checkboxfield":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.form.field.Checkbox\" rel=\"Ext.form.field.Checkbox\" class=\"docClass\">Ext.form.field.Checkbox</a>.</p>\n"},"checkboxgroup":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.form.CheckboxGroup\" rel=\"Ext.form.CheckboxGroup\" class=\"docClass\">Ext.form.CheckboxGroup</a>.</p>\n"},"checkcolumn":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.grid.column.CheckColumn\" rel=\"Ext.grid.column.CheckColumn\" class=\"docClass\">Ext.grid.column.CheckColumn</a>.</p>\n"},"colormenu":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.menu.ColorPicker\" rel=\"Ext.menu.ColorPicker\" class=\"docClass\">Ext.menu.ColorPicker</a>.</p>\n"},"colorpicker":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.picker.Color\" rel=\"Ext.picker.Color\" class=\"docClass\">Ext.picker.Color</a>.</p>\n"},"combo":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.form.field.ComboBox\" rel=\"Ext.form.field.ComboBox\" class=\"docClass\">Ext.form.field.ComboBox</a>.</p>\n"},"combobox":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.form.field.ComboBox\" rel=\"Ext.form.field.ComboBox\" class=\"docClass\">Ext.form.field.ComboBox</a>.</p>\n"},"component":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>.</p>\n"},"container":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>.</p>\n"},"cycle":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.button.Cycle\" rel=\"Ext.button.Cycle\" class=\"docClass\">Ext.button.Cycle</a>.</p>\n"},"dataview":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.view.View\" rel=\"Ext.view.View\" class=\"docClass\">Ext.view.View</a>.</p>\n"},"datecolumn":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.grid.column.Date\" rel=\"Ext.grid.column.Date\" class=\"docClass\">Ext.grid.column.Date</a>.</p>\n"},"datefield":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.form.field.Date\" rel=\"Ext.form.field.Date\" class=\"docClass\">Ext.form.field.Date</a>.</p>\n"},"datemenu":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.menu.DatePicker\" rel=\"Ext.menu.DatePicker\" class=\"docClass\">Ext.menu.DatePicker</a>.</p>\n"},"datepicker":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.picker.Date\" rel=\"Ext.picker.Date\" class=\"docClass\">Ext.picker.Date</a>.</p>\n"},"displayfield":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.form.field.Display\" rel=\"Ext.form.field.Display\" class=\"docClass\">Ext.form.field.Display</a>.</p>\n"},"draw":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.draw.Component\" rel=\"Ext.draw.Component\" class=\"docClass\">Ext.draw.Component</a>.</p>\n"},"editor":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.Editor\" rel=\"Ext.Editor\" class=\"docClass\">Ext.Editor</a>.</p>\n"},"field":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">Ext.form.field.Base</a>.</p>\n"},"fieldcontainer":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.form.FieldContainer\" rel=\"Ext.form.FieldContainer\" class=\"docClass\">Ext.form.FieldContainer</a>.</p>\n"},"fieldset":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.form.FieldSet\" rel=\"Ext.form.FieldSet\" class=\"docClass\">Ext.form.FieldSet</a>.</p>\n"},"filebutton":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.form.field.FileButton\" rel=\"Ext.form.field.FileButton\" class=\"docClass\">Ext.form.field.FileButton</a>.</p>\n"},"filefield":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.form.field.File\" rel=\"Ext.form.field.File\" class=\"docClass\">Ext.form.field.File</a>.</p>\n"},"fileuploadfield":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.form.field.File\" rel=\"Ext.form.field.File\" class=\"docClass\">Ext.form.field.File</a>.</p>\n"},"flash":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.flash.Component\" rel=\"Ext.flash.Component\" class=\"docClass\">Ext.flash.Component</a>.</p>\n"},"form":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>.</p>\n"},"grid":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Ext.grid.Panel</a>.</p>\n"},"gridcolumn":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.grid.column.Column\" rel=\"Ext.grid.column.Column\" class=\"docClass\">Ext.grid.column.Column</a>.</p>\n"},"gridpanel":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Ext.grid.Panel</a>.</p>\n"},"gridview":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.grid.View\" rel=\"Ext.grid.View\" class=\"docClass\">Ext.grid.View</a>.</p>\n"},"header":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.panel.Header\" rel=\"Ext.panel.Header\" class=\"docClass\">Ext.panel.Header</a>.</p>\n"},"headercontainer":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.grid.header.Container\" rel=\"Ext.grid.header.Container\" class=\"docClass\">Ext.grid.header.Container</a>.</p>\n"},"hidden":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.form.field.Hidden\" rel=\"Ext.form.field.Hidden\" class=\"docClass\">Ext.form.field.Hidden</a>.</p>\n"},"hiddenfield":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.form.field.Hidden\" rel=\"Ext.form.field.Hidden\" class=\"docClass\">Ext.form.field.Hidden</a>.</p>\n"},"htmleditor":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.form.field.HtmlEditor\" rel=\"Ext.form.field.HtmlEditor\" class=\"docClass\">Ext.form.field.HtmlEditor</a>.</p>\n"},"image":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.Img\" rel=\"Ext.Img\" class=\"docClass\">Ext.Img</a>.</p>\n"},"imagecomponent":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.Img\" rel=\"Ext.Img\" class=\"docClass\">Ext.Img</a>.</p>\n"},"jsonpstore":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.data.JsonPStore\" rel=\"Ext.data.JsonPStore\" class=\"docClass\">Ext.data.JsonPStore</a>.</p>\n"},"label":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.form.Label\" rel=\"Ext.form.Label\" class=\"docClass\">Ext.form.Label</a>.</p>\n"},"loadmask":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.LoadMask\" rel=\"Ext.LoadMask\" class=\"docClass\">Ext.LoadMask</a>.</p>\n"},"menu":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.menu.Menu\" rel=\"Ext.menu.Menu\" class=\"docClass\">Ext.menu.Menu</a>.</p>\n"},"menucheckitem":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.menu.CheckItem\" rel=\"Ext.menu.CheckItem\" class=\"docClass\">Ext.menu.CheckItem</a>.</p>\n"},"menuitem":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.menu.Item\" rel=\"Ext.menu.Item\" class=\"docClass\">Ext.menu.Item</a>.</p>\n"},"menuseparator":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.menu.Separator\" rel=\"Ext.menu.Separator\" class=\"docClass\">Ext.menu.Separator</a>.</p>\n"},"messagebox":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.window.MessageBox\" rel=\"Ext.window.MessageBox\" class=\"docClass\">Ext.window.MessageBox</a>.</p>\n"},"monthpicker":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.picker.Month\" rel=\"Ext.picker.Month\" class=\"docClass\">Ext.picker.Month</a>.</p>\n"},"multislider":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.slider.Multi\" rel=\"Ext.slider.Multi\" class=\"docClass\">Ext.slider.Multi</a>.</p>\n"},"numbercolumn":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.grid.column.Number\" rel=\"Ext.grid.column.Number\" class=\"docClass\">Ext.grid.column.Number</a>.</p>\n"},"numberfield":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.form.field.Number\" rel=\"Ext.form.field.Number\" class=\"docClass\">Ext.form.field.Number</a>.</p>\n"},"pagingtoolbar":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.toolbar.Paging\" rel=\"Ext.toolbar.Paging\" class=\"docClass\">Ext.toolbar.Paging</a>.</p>\n"},"panel":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>.</p>\n"},"pickerfield":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.form.field.Picker\" rel=\"Ext.form.field.Picker\" class=\"docClass\">Ext.form.field.Picker</a>.</p>\n"},"progressbar":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.ProgressBar\" rel=\"Ext.ProgressBar\" class=\"docClass\">Ext.ProgressBar</a>.</p>\n"},"propertygrid":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.grid.property.Grid\" rel=\"Ext.grid.property.Grid\" class=\"docClass\">Ext.grid.property.Grid</a>.</p>\n"},"quicktip":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.tip.QuickTip\" rel=\"Ext.tip.QuickTip\" class=\"docClass\">Ext.tip.QuickTip</a>.</p>\n"},"radio":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.form.field.Radio\" rel=\"Ext.form.field.Radio\" class=\"docClass\">Ext.form.field.Radio</a>.</p>\n"},"radiofield":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.form.field.Radio\" rel=\"Ext.form.field.Radio\" class=\"docClass\">Ext.form.field.Radio</a>.</p>\n"},"radiogroup":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.form.RadioGroup\" rel=\"Ext.form.RadioGroup\" class=\"docClass\">Ext.form.RadioGroup</a>.</p>\n"},"roweditor":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.grid.RowEditor\" rel=\"Ext.grid.RowEditor\" class=\"docClass\">Ext.grid.RowEditor</a>.</p>\n"},"roweditorbuttons":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.grid.RowEditorButtons\" rel=\"Ext.grid.RowEditorButtons\" class=\"docClass\">Ext.grid.RowEditorButtons</a>.</p>\n"},"rownumberer":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.grid.column.RowNumberer\" rel=\"Ext.grid.column.RowNumberer\" class=\"docClass\">Ext.grid.column.RowNumberer</a>.</p>\n"},"slider":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.slider.Single\" rel=\"Ext.slider.Single\" class=\"docClass\">Ext.slider.Single</a>.</p>\n"},"sliderfield":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.slider.Single\" rel=\"Ext.slider.Single\" class=\"docClass\">Ext.slider.Single</a>.</p>\n"},"slidertip":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.slider.Tip\" rel=\"Ext.slider.Tip\" class=\"docClass\">Ext.slider.Tip</a>.</p>\n"},"spinnerfield":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.form.field.Spinner\" rel=\"Ext.form.field.Spinner\" class=\"docClass\">Ext.form.field.Spinner</a>.</p>\n"},"splitbutton":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.button.Split\" rel=\"Ext.button.Split\" class=\"docClass\">Ext.button.Split</a>.</p>\n"},"splitter":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.resizer.Splitter\" rel=\"Ext.resizer.Splitter\" class=\"docClass\">Ext.resizer.Splitter</a>.</p>\n"},"tab":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.tab.Tab\" rel=\"Ext.tab.Tab\" class=\"docClass\">Ext.tab.Tab</a>.</p>\n"},"tabbar":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.tab.Bar\" rel=\"Ext.tab.Bar\" class=\"docClass\">Ext.tab.Bar</a>.</p>\n"},"tablepanel":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.panel.Table\" rel=\"Ext.panel.Table\" class=\"docClass\">Ext.panel.Table</a>.</p>\n"},"tableview":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.view.Table\" rel=\"Ext.view.Table\" class=\"docClass\">Ext.view.Table</a>.</p>\n"},"tabpanel":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.tab.Panel\" rel=\"Ext.tab.Panel\" class=\"docClass\">Ext.tab.Panel</a>.</p>\n"},"tbfill":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.toolbar.Fill\" rel=\"Ext.toolbar.Fill\" class=\"docClass\">Ext.toolbar.Fill</a>.</p>\n"},"tbitem":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.toolbar.Item\" rel=\"Ext.toolbar.Item\" class=\"docClass\">Ext.toolbar.Item</a>.</p>\n"},"tbseparator":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.toolbar.Separator\" rel=\"Ext.toolbar.Separator\" class=\"docClass\">Ext.toolbar.Separator</a>.</p>\n"},"tbspacer":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.toolbar.Spacer\" rel=\"Ext.toolbar.Spacer\" class=\"docClass\">Ext.toolbar.Spacer</a>.</p>\n"},"tbtext":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.toolbar.TextItem\" rel=\"Ext.toolbar.TextItem\" class=\"docClass\">Ext.toolbar.TextItem</a>.</p>\n"},"templatecolumn":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.grid.column.Template\" rel=\"Ext.grid.column.Template\" class=\"docClass\">Ext.grid.column.Template</a>.</p>\n"},"text":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.draw.Text\" rel=\"Ext.draw.Text\" class=\"docClass\">Ext.draw.Text</a>.</p>\n"},"textarea":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.form.field.TextArea\" rel=\"Ext.form.field.TextArea\" class=\"docClass\">Ext.form.field.TextArea</a>.</p>\n"},"textareafield":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.form.field.TextArea\" rel=\"Ext.form.field.TextArea\" class=\"docClass\">Ext.form.field.TextArea</a>.</p>\n"},"textfield":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.form.field.Text\" rel=\"Ext.form.field.Text\" class=\"docClass\">Ext.form.field.Text</a>.</p>\n"},"timefield":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.form.field.Time\" rel=\"Ext.form.field.Time\" class=\"docClass\">Ext.form.field.Time</a>.</p>\n"},"timepicker":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.picker.Time\" rel=\"Ext.picker.Time\" class=\"docClass\">Ext.picker.Time</a>.</p>\n"},"tip":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.tip.Tip\" rel=\"Ext.tip.Tip\" class=\"docClass\">Ext.tip.Tip</a>.</p>\n"},"tool":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.panel.Tool\" rel=\"Ext.panel.Tool\" class=\"docClass\">Ext.panel.Tool</a>.</p>\n"},"toolbar":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.toolbar.Toolbar\" rel=\"Ext.toolbar.Toolbar\" class=\"docClass\">Ext.toolbar.Toolbar</a>.</p>\n"},"tooltip":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.tip.ToolTip\" rel=\"Ext.tip.ToolTip\" class=\"docClass\">Ext.tip.ToolTip</a>.</p>\n"},"treecolumn":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.tree.Column\" rel=\"Ext.tree.Column\" class=\"docClass\">Ext.tree.Column</a>.</p>\n"},"treepanel":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.tree.Panel\" rel=\"Ext.tree.Panel\" class=\"docClass\">Ext.tree.Panel</a>.</p>\n"},"treeview":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.tree.View\" rel=\"Ext.tree.View\" class=\"docClass\">Ext.tree.View</a>.</p>\n"},"trigger":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.form.field.Trigger\" rel=\"Ext.form.field.Trigger\" class=\"docClass\">Ext.form.field.Trigger</a>.</p>\n"},"triggerfield":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.form.field.Trigger\" rel=\"Ext.form.field.Trigger\" class=\"docClass\">Ext.form.field.Trigger</a>.</p>\n"},"viewport":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.container.Viewport\" rel=\"Ext.container.Viewport\" class=\"docClass\">Ext.container.Viewport</a>.</p>\n"},"window":{"!type":"string","!doc":"<p>Alias for <a href=\"#!/api/Ext.window.Window\" rel=\"Ext.window.Window\" class=\"docClass\">Ext.window.Window</a>.</p>\n"}}}},"flash":{"Component":{"!doc":"<p>A simple Component for displaying an Adobe Flash SWF movie. The movie will be sized and can participate\nin layout like any other Component.</p>\n\n<p>This component requires the third-party SWFObject library version 2.2 or above. It is not included within\nthe ExtJS distribution, so you will have to include it into your page manually in order to use this component.\nThe SWFObject library can be downloaded from the <a href=\"http://code.google.com/p/swfobject\">SWFObject project page</a>\nand then simply import it into the head of your HTML document:</p>\n\n<pre><code>&lt;script type=\"text/javascript\" src=\"path/to/local/swfobject.js\"&gt;&lt;/script&gt;\n</code></pre>\n\n<h2>Configuration</h2>\n\n<p>This component allows several options for configuring how the target Flash movie is embedded. The most\nimportant is the required <a href=\"#!/api/Ext.flash.Component-cfg-url\" rel=\"Ext.flash.Component-cfg-url\" class=\"docClass\">url</a> which points to the location of the Flash movie to load. Other\nconfigurations include:</p>\n\n<ul>\n<li><a href=\"#!/api/Ext.flash.Component-cfg-backgroundColor\" rel=\"Ext.flash.Component-cfg-backgroundColor\" class=\"docClass\">backgroundColor</a></li>\n<li><a href=\"#!/api/Ext.flash.Component-cfg-wmode\" rel=\"Ext.flash.Component-cfg-wmode\" class=\"docClass\">wmode</a></li>\n<li><a href=\"#!/api/Ext.flash.Component-cfg-flashVars\" rel=\"Ext.flash.Component-cfg-flashVars\" class=\"docClass\">flashVars</a></li>\n<li><a href=\"#!/api/Ext.flash.Component-cfg-flashParams\" rel=\"Ext.flash.Component-cfg-flashParams\" class=\"docClass\">flashParams</a></li>\n<li><a href=\"#!/api/Ext.flash.Component-cfg-flashAttributes\" rel=\"Ext.flash.Component-cfg-flashAttributes\" class=\"docClass\">flashAttributes</a></li>\n</ul>\n\n\n<h2>Example usage:</h2>\n\n<pre><code>var win = <a href=\"#!/api/Ext-method-widget\" rel=\"Ext-method-widget\" class=\"docClass\">Ext.widget</a>('window', {\n    title: \"It's a tiger!\",\n    layout: 'fit',\n    width: 300,\n    height: 300,\n    x: 20,\n    y: 20,\n    resizable: true,\n    items: {\n        xtype: 'flash',\n        url: 'tiger.swf'\n    }\n});\nwin.show();\n</code></pre>\n\n<h2>Express Install</h2>\n\n<p>Adobe provides a tool called <a href=\"http://www.adobe.com/devnet/flashplayer/articles/express_install.html\">Express Install</a>\nthat offers users an easy way to upgrade their Flash player. If you wish to make use of this, you should set\nthe static EXPRESS_INSTALL_URL property to the location of your Express Install SWF file:</p>\n\n<pre><code><a href=\"#!/api/Ext.flash.Component-static-property-EXPRESS_INSTALL_URL\" rel=\"Ext.flash.Component-static-property-EXPRESS_INSTALL_URL\" class=\"docClass\">Ext.flash.Component.EXPRESS_INSTALL_URL</a> = 'path/to/local/expressInstall.swf';\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_flash_Component_cfg)","prototype":{"!proto":"Ext.Component.prototype","backgroundColor":{"!type":"string","!doc":"<p>The background color of the SWF movie.</p>\n"},"expressInstall":{"!type":"bool","!doc":"<p>True to prompt the user to install flash if not installed. Note that this uses\n<a href=\"#!/api/Ext.flash.Component-static-property-EXPRESS_INSTALL_URL\" rel=\"Ext.flash.Component-static-property-EXPRESS_INSTALL_URL\" class=\"docClass\">Ext.FlashComponent.EXPRESS_INSTALL_URL</a>, which should be set to the local resource.</p>\n"},"flashAttributes":{"!type":"?","!doc":"<p>A set of key value pairs to be passed to the flash object as attributes.</p>\n"},"flashParams":{"!type":"?","!doc":"<p>A set of key value pairs to be passed to the flash object as parameters. Possible parameters can be found here:\nhttp://kb2.adobe.com/cps/127/tn_12701.html</p>\n"},"flashVars":{"!type":"?","!doc":"<p>A set of key value pairs to be passed to the flash object as flash variables.</p>\n"},"flashVersion":{"!type":"string","!doc":"<p>Indicates the version the flash content was published for.</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>Have to create a placeholder div with the swfId, which SWFObject will replace with the object/embed element.</p>\n"},"swfHeight":{"!type":"string|number","!doc":"<p>The height of the embedded SWF movie inside the component.</p>\n\n<p>Defaults to \"100%\" so that the movie matches the height of the component.</p>\n"},"swfWidth":{"!type":"string|number","!doc":"<p>The width of the embedded SWF movie inside the component.</p>\n\n<p>Defaults to \"100%\" so that the movie matches the width of the component.</p>\n"},"url":{"!type":"string","!doc":"<p>The URL of the SWF file to include.</p>\n"},"wmode":{"!type":"string","!doc":"<p>The wmode of the flash object. This can be used to control layering.\nSet to 'transparent' to ignore the <a href=\"#!/api/Ext.flash.Component-cfg-backgroundColor\" rel=\"Ext.flash.Component-cfg-backgroundColor\" class=\"docClass\">backgroundColor</a> and make the background of the Flash\nmovie transparent.</p>\n"},"swf":{"!type":"+Ext.Element","!doc":"<p>A reference to the object or embed element into which the SWF file is loaded. Only\npopulated after the component is rendered and the SWF has been successfully embedded.</p>\n"},"afterRender":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior after rendering is complete. At this stage the Component’s Element\nwill have been styled according to the configuration, will have had any configured CSS class\nnames added, and will be in the configured visibility and the configured enable state.</p>\n"},"beforeDestroy":{"!type":"fn() -> !this","!doc":"<p>Invoked before the Component is destroyed.</p>\n"},"beforeRender":{"!type":"fn() -> !this"},"getSwfId":{"!type":"fn() -> !this","!doc":"<p>Retrieves the id of the SWF object/embed element.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>The initComponent template method is an important initialization step for a Component. It is intended to be\nimplemented by each subclass of <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> to provide any needed constructor logic. The\ninitComponent method of the class being created is called first, with each initComponent method\nup the hierarchy to <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> being called thereafter. This makes it easy to implement and,\nif needed, override the constructor logic of the Component at any step in the hierarchy.</p>\n\n<p>The initComponent method <strong>must</strong> contain a call to <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a> in order\nto ensure that the parent class' initComponent method is also called.</p>\n\n<p>All config options passed to the constructor are applied to <code>this</code> before initComponent is called,\nso you can simply access them with <code>this.someOption</code>.</p>\n\n<p>The following example demonstrates using a dynamic string for the text of a button at the time of\ninstantiation of the class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('DynamicButtonText', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n\n    initComponent: function() {\n        this.text = new Date();\n        this.renderTo = <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>();\n        this.callParent();\n    }\n});\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function() {\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('DynamicButtonText');\n});\n</code></pre>\n"},"onFailure":{"!type":"fn() -> !this"},"onSuccess":{"!type":"fn() -> !this"},"swfCallback":{"!type":"fn(e: ?) -> !this","!doc":"<p>The callback method for handling an embedding success or failure by SWFObject</p>\n"},"failure":{"!type":"fn(this: +Ext.flash.Component, eOpts: ?)","!doc":"<p>Fired when the Flash movie embedding fails</p>\n"},"success":{"!type":"fn(this: +Ext.flash.Component, eOpts: ?)","!doc":"<p>Fired when the Flash movie has been successfully embedded</p>\n"}},"EXPRESS_INSTALL_URL":{"!type":"string","!doc":"<p>The url for installing flash if it doesn't exist. This should be set to a local resource.\nSee http://www.adobe.com/devnet/flashplayer/articles/express_install.html for details.</p>\n"}}},"form":{"Basic":{"!doc":"<p>Provides input field management, validation, submission, and form loading services for the collection\nof <a href=\"#!/api/Ext.form.field.Field\" rel=\"Ext.form.field.Field\" class=\"docClass\">Field</a> instances within a <a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>. It is recommended\nthat you use a <a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a> as the form container, as that has logic to automatically\nhook up an instance of <a href=\"#!/api/Ext.form.Basic\" rel=\"Ext.form.Basic\" class=\"docClass\">Ext.form.Basic</a> (plus other conveniences related to field configuration.)</p>\n\n<h2>Form Actions</h2>\n\n<p>The Basic class delegates the handling of form loads and submits to instances of <a href=\"#!/api/Ext.form.action.Action\" rel=\"Ext.form.action.Action\" class=\"docClass\">Ext.form.action.Action</a>.\nSee the various Action implementations for specific details of each one's functionality, as well as the\ndocumentation for <a href=\"#!/api/Ext.form.Basic-method-doAction\" rel=\"Ext.form.Basic-method-doAction\" class=\"docClass\">doAction</a> which details the configuration options that can be specified in\neach action call.</p>\n\n<p>The default submit Action is <a href=\"#!/api/Ext.form.action.Submit\" rel=\"Ext.form.action.Submit\" class=\"docClass\">Ext.form.action.Submit</a>, which uses an Ajax request to submit the\nform's values to a configured URL. To enable normal browser submission of an Ext form, use the\n<a href=\"#!/api/Ext.form.Basic-cfg-standardSubmit\" rel=\"Ext.form.Basic-cfg-standardSubmit\" class=\"docClass\">standardSubmit</a> config option.</p>\n\n<h2>File uploads</h2>\n\n<p>File uploads are not performed using normal 'Ajax' techniques; see the description for\n<a href=\"#!/api/Ext.form.Basic-method-hasUpload\" rel=\"Ext.form.Basic-method-hasUpload\" class=\"docClass\">hasUpload</a> for details. If you're using file uploads you should read the method description.</p>\n\n<h2>Example usage:</h2>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>', {\n    title: 'Basic Form',\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    bodyPadding: 5,\n    width: 350,\n\n    // Any configuration items here will be automatically passed along to\n    // the <a href=\"#!/api/Ext.form.Basic\" rel=\"Ext.form.Basic\" class=\"docClass\">Ext.form.Basic</a> instance when it gets created.\n\n    // The form will submit an AJAX request to this URL when submitted\n    url: 'save-form.php',\n\n    items: [{\n        xtype: 'textfield',\n        fieldLabel: 'Field',\n        name: 'theField'\n    }],\n\n    buttons: [{\n        text: 'Submit',\n        handler: function() {\n            // The getForm() method returns the <a href=\"#!/api/Ext.form.Basic\" rel=\"Ext.form.Basic\" class=\"docClass\">Ext.form.Basic</a> instance:\n            var form = this.up('form').getForm();\n            if (form.isValid()) {\n                // Submit the Ajax request and handle the response\n                form.submit({\n                    success: function(form, action) {\n                       <a href=\"#!/api/Ext.MessageBox-method-alert\" rel=\"Ext.MessageBox-method-alert\" class=\"docClass\">Ext.Msg.alert</a>('Success', action.result.message);\n                    },\n                    failure: function(form, action) {\n                        <a href=\"#!/api/Ext.MessageBox-method-alert\" rel=\"Ext.MessageBox-method-alert\" class=\"docClass\">Ext.Msg.alert</a>('Failed', action.result ? action.result.message : 'No response');\n                    }\n                });\n            }\n        }\n    }]\n});\n</code></pre>\n","!type":"fn(owner: +Ext.container.Container, config: Ext_form_Basic_cfg)","prototype":{"!proto":"Ext.util.Observable.prototype","api":{"!type":"?","!doc":"<p>If specified, load and submit actions will be handled with <a href=\"#!/api/Ext.form.action.DirectLoad\" rel=\"Ext.form.action.DirectLoad\" class=\"docClass\">DirectLoad</a>\nand <a href=\"#!/api/Ext.form.action.DirectSubmit\" rel=\"Ext.form.action.DirectSubmit\" class=\"docClass\">DirectSubmit</a>.  Methods which have been imported by\n<a href=\"#!/api/Ext.direct.Manager\" rel=\"Ext.direct.Manager\" class=\"docClass\">Ext.direct.Manager</a> can be specified here to load and submit forms. API methods may also be\nspecified as strings. See <a href=\"#!/api/Ext.data.proxy.Direct-cfg-directFn\" rel=\"Ext.data.proxy.Direct-cfg-directFn\" class=\"docClass\">Ext.data.proxy.Direct.directFn</a>.  Such as the following:</p>\n\n<pre><code>api: {\n    load: App.ss.MyProfile.load,\n    submit: App.ss.MyProfile.submit\n}\n</code></pre>\n\n<p>Load actions can use <a href=\"#!/api/Ext.form.Basic-cfg-paramOrder\" rel=\"Ext.form.Basic-cfg-paramOrder\" class=\"docClass\">paramOrder</a> or <a href=\"#!/api/Ext.form.Basic-cfg-paramsAsHash\" rel=\"Ext.form.Basic-cfg-paramsAsHash\" class=\"docClass\">paramsAsHash</a> to customize how the load method\nis invoked.  Submit actions will always use a standard form submit. The <code>formHandler</code> configuration\n(see Ext.direct.RemotingProvider#action) must be set on the associated server-side method which has\nbeen imported by <a href=\"#!/api/Ext.direct.Manager\" rel=\"Ext.direct.Manager\" class=\"docClass\">Ext.direct.Manager</a>.</p>\n"},"baseParams":{"!type":"?","!doc":"<p>Parameters to pass with all requests. e.g. baseParams: <code>{id: '123', foo: 'bar'}</code>.</p>\n\n<p>Parameters are encoded as standard HTTP parameters using <a href=\"#!/api/Ext.Object-method-toQueryString\" rel=\"Ext.Object-method-toQueryString\" class=\"docClass\">Ext.Object.toQueryString</a>.</p>\n"},"errorReader":{"!type":"?|+Ext.data.reader.Reader","!doc":"<p>An <a href=\"#!/api/Ext.data.reader.Reader\" rel=\"Ext.data.reader.Reader\" class=\"docClass\">Ext.data.reader.Reader</a> (e.g. <a href=\"#!/api/Ext.data.reader.Xml\" rel=\"Ext.data.reader.Xml\" class=\"docClass\">Ext.data.reader.Xml</a>) instance or\nconfiguration to be used to read field error messages returned from 'submit' actions.\nThis is optional as there is built-in support for processing JSON responses.</p>\n\n<p>The Records which provide messages for the invalid Fields must use the\nField name (or id) as the Record ID, and must contain a field called 'msg'\nwhich contains the error message.</p>\n\n<p>The errorReader does not have to be a full-blown implementation of a\nReader. It simply needs to implement a <code>read(xhr)</code> function\nwhich returns an Array of Records in an object with the following\nstructure:</p>\n\n<pre><code>{\n    records: recordArray\n}\n</code></pre>\n"},"jsonSubmit":{"!type":"bool","!doc":"<p>If set to true, the field values are sent as JSON in the request body.\nAll of the field values, plus any additional params configured via <a href=\"#!/api/Ext.form.Basic-cfg-baseParams\" rel=\"Ext.form.Basic-cfg-baseParams\" class=\"docClass\">baseParams</a>\nand/or the <code>options</code> to <a href=\"#!/api/Ext.form.Basic-method-submit\" rel=\"Ext.form.Basic-method-submit\" class=\"docClass\">submit</a>, will be included in the values POSTed in the body of the request.</p>\n"},"method":{"!type":"string","!doc":"<p>The request method to use (GET or POST) for form actions if one isn't supplied in the action options.</p>\n"},"paramOrder":{"!type":"string|[string]","!doc":"<p>A list of params to be executed server side. Only used for the <a href=\"#!/api/Ext.form.Basic-cfg-api\" rel=\"Ext.form.Basic-cfg-api\" class=\"docClass\">api</a> <code>load</code>\nconfiguration.</p>\n\n<p>Specify the params in the order in which they must be executed on the\nserver-side as either (1) an Array of String values, or (2) a String of params\ndelimited by either whitespace, comma, or pipe. For example,\nany of the following would be acceptable:</p>\n\n<pre><code>paramOrder: ['param1','param2','param3']\nparamOrder: 'param1 param2 param3'\nparamOrder: 'param1,param2,param3'\nparamOrder: 'param1|param2|param'\n</code></pre>\n"},"paramsAsHash":{"!type":"bool","!doc":"<p>Only used for the <a href=\"#!/api/Ext.form.Basic-cfg-api\" rel=\"Ext.form.Basic-cfg-api\" class=\"docClass\">api</a> <code>load</code> configuration. If true, parameters will be sent as a\nsingle hash collection of named arguments. Providing a <a href=\"#!/api/Ext.form.Basic-cfg-paramOrder\" rel=\"Ext.form.Basic-cfg-paramOrder\" class=\"docClass\">paramOrder</a> nullifies this\nconfiguration.</p>\n"},"reader":{"!type":"?|+Ext.data.reader.Reader","!doc":"<p>An <a href=\"#!/api/Ext.data.reader.Reader\" rel=\"Ext.data.reader.Reader\" class=\"docClass\">Ext.data.reader.Reader</a> (e.g. <a href=\"#!/api/Ext.data.reader.Xml\" rel=\"Ext.data.reader.Xml\" class=\"docClass\">Ext.data.reader.Xml</a>) instance or\nconfiguration to be used to read data when executing 'load' actions. This\nis optional as there is built-in support for processing JSON responses.</p>\n"},"standardSubmit":{"!type":"bool","!doc":"<p>If set to true, a standard HTML form submit is used instead of a XHR (Ajax) style form submission.\nAll of the field values, plus any additional params configured via <a href=\"#!/api/Ext.form.Basic-cfg-baseParams\" rel=\"Ext.form.Basic-cfg-baseParams\" class=\"docClass\">baseParams</a>\nand/or the <code>options</code> to <a href=\"#!/api/Ext.form.Basic-method-submit\" rel=\"Ext.form.Basic-method-submit\" class=\"docClass\">submit</a>, will be included in the values submitted in the form.</p>\n"},"timeout":{"!type":"number","!doc":"<p>Timeout for form actions in seconds.</p>\n"},"trackResetOnLoad":{"!type":"bool","!doc":"<p>If set to true, <a href=\"#!/api/Ext.form.Basic-method-reset\" rel=\"Ext.form.Basic-method-reset\" class=\"docClass\">reset</a>() resets to the last loaded or <a href=\"#!/api/Ext.form.Basic-method-setValues\" rel=\"Ext.form.Basic-method-setValues\" class=\"docClass\">setValues</a>() data instead of\nwhen the form was first created.</p>\n"},"url":{"!type":"string","!doc":"<p>The URL to use for form actions if one isn't supplied in the\n<a href=\"#!/api/Ext.form.Basic-method-doAction\" rel=\"Ext.form.Basic-method-doAction\" class=\"docClass\">doAction</a> options.</p>\n"},"waitMsgTarget":{"!type":"string|+HTMLElement|+Ext.Element","!doc":"<p>By default wait messages are displayed with <a href=\"#!/api/Ext.MessageBox-method-wait\" rel=\"Ext.MessageBox-method-wait\" class=\"docClass\">Ext.MessageBox.wait</a>. You can target a specific\nelement by passing it or its id or mask the form itself by passing in true.</p>\n"},"waitTitle":{"!type":"string","!doc":"<p>The default title to show for the waiting message box</p>\n"},"owner":{"!type":"+Ext.container.Container","!doc":"<p>The container component to which this BasicForm is attached.</p>\n"},"wasDirty":{"!type":"bool","!doc":"<p>Private</p>\n"},"afterAction":{"!type":"fn(action: +Ext.form.action.Action, success: bool) -> !this","!doc":"<p>Called after an action is performed via <a href=\"#!/api/Ext.form.Basic-method-doAction\" rel=\"Ext.form.Basic-method-doAction\" class=\"docClass\">doAction</a>.</p>\n"},"applyIfToFields":{"!type":"fn(obj: ?) -> +Ext.form.Basic","!doc":"<p>Calls <a href=\"#!/api/Ext-method-applyIf\" rel=\"Ext-method-applyIf\" class=\"docClass\">Ext.applyIf</a> for all field in this form with the passed object.</p>\n"},"applyToFields":{"!type":"fn(obj: ?) -> +Ext.form.Basic","!doc":"<p>Calls <a href=\"#!/api/Ext-method-apply\" rel=\"Ext-method-apply\" class=\"docClass\">Ext.apply</a> for all fields in this form with the passed object.</p>\n"},"beforeAction":{"!type":"fn(action: +Ext.form.action.Action) -> !this","!doc":"<p>Called before an action is performed via <a href=\"#!/api/Ext.form.Basic-method-doAction\" rel=\"Ext.form.Basic-method-doAction\" class=\"docClass\">doAction</a>.</p>\n"},"checkDirty":{"!type":"fn() -> !this","!doc":"<p>Check whether the dirty state of the entire form has changed since it was last checked, and\nif so fire the <a href=\"#!/api/Ext.form.Basic-event-dirtychange\" rel=\"Ext.form.Basic-event-dirtychange\" class=\"docClass\">dirtychange</a> event. This is automatically invoked\nwhen an individual field's <code>dirty</code> state changes.</p>\n"},"checkDirtyDelay":{"!type":"fn() -> !this"},"checkValidity":{"!type":"fn() -> !this","!doc":"<p>Check whether the validity of the entire form has changed since it was last checked, and\nif so fire the <a href=\"#!/api/Ext.form.Basic-event-validitychange\" rel=\"Ext.form.Basic-event-validitychange\" class=\"docClass\">validitychange</a> event. This is automatically invoked\nwhen an individual field's validity changes.</p>\n"},"checkValidityDelay":{"!type":"fn() -> !this"},"clearInvalid":{"!type":"fn() -> +Ext.form.Basic","!doc":"<p>Clears all invalid field messages in this form.</p>\n"},"destroy":{"!type":"fn() -> !this","!doc":"<p>Destroys this object.</p>\n"},"doAction":{"!type":"fn(action: string|+Ext.form.action.Action, options?: ?) -> +Ext.form.Basic","!doc":"<p>Performs a predefined action (an implementation of <a href=\"#!/api/Ext.form.action.Action\" rel=\"Ext.form.action.Action\" class=\"docClass\">Ext.form.action.Action</a>) to perform application-\nspecific processing.</p>\n"},"findField":{"!type":"fn(id: string) -> +Ext.form.field.Field","!doc":"<p>Find a specific <a href=\"#!/api/Ext.form.field.Field\" rel=\"Ext.form.field.Field\" class=\"docClass\">Ext.form.field.Field</a> in this form by id or name.</p>\n"},"getBoundItems":{"!type":"fn() -> +Ext.util.MixedCollection","!doc":"<p>Finds and returns the set of all items bound to fields inside this form</p>\n"},"getFieldValues":{"!type":"fn(dirtyOnly?: bool) -> ?","!doc":"<p>Retrieves the fields in the form as a set of key/value pairs, using their\n<a href=\"#!/api/Ext.form.field.Field-method-getModelData\" rel=\"Ext.form.field.Field-method-getModelData\" class=\"docClass\">getModelData()</a> method to collect the values.\nIf multiple fields return values under the same name those values will be combined into an Array.\nThis is similar to <a href=\"#!/api/Ext.form.Basic-method-getValues\" rel=\"Ext.form.Basic-method-getValues\" class=\"docClass\">getValues</a> except that this method collects type-specific data values\n(e.g. Date objects for date fields) while getValues returns only String values for submission.</p>\n"},"getFields":{"!type":"fn() -> +Ext.util.MixedCollection","!doc":"<p>Return all the <a href=\"#!/api/Ext.form.field.Field\" rel=\"Ext.form.field.Field\" class=\"docClass\">Ext.form.field.Field</a> components in the owner container.</p>\n"},"getRecord":{"!type":"fn() -> +Ext.data.Model","!doc":"<p>Returns the last <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a> instance that was loaded via <a href=\"#!/api/Ext.form.Basic-method-loadRecord\" rel=\"Ext.form.Basic-method-loadRecord\" class=\"docClass\">loadRecord</a></p>\n"},"getValues":{"!type":"fn(asString?: bool, dirtyOnly?: bool, includeEmptyText?: bool, useDataValues?: bool) -> string|?","!doc":"<p>Retrieves the fields in the form as a set of key/value pairs, using their\n<a href=\"#!/api/Ext.form.field.Field-method-getSubmitData\" rel=\"Ext.form.field.Field-method-getSubmitData\" class=\"docClass\">getSubmitData()</a> method to collect the values.\nIf multiple fields return values under the same name those values will be combined into an Array.\nThis is similar to <a href=\"#!/api/Ext.form.Basic-method-getFieldValues\" rel=\"Ext.form.Basic-method-getFieldValues\" class=\"docClass\">getFieldValues</a> except that this method\ncollects only String values for submission, while getFieldValues collects type-specific data\nvalues (e.g. Date objects for date fields.)</p>\n"},"hasInvalidField":{"!type":"fn() -> !this","!doc":"<p>Returns true if the form contains any invalid fields. No fields will be marked as invalid\nas a result of calling this; to trigger marking of fields use <a href=\"#!/api/Ext.form.Basic-method-isValid\" rel=\"Ext.form.Basic-method-isValid\" class=\"docClass\">isValid</a> instead.</p>\n"},"hasUpload":{"!type":"fn() -> bool","!doc":"<p>Returns <code>true</code> if the form contains a file upload field. This is used to determine the method for submitting the\nform: File uploads are not performed using normal 'Ajax' techniques, that is they are <strong>not</strong> performed using\nXMLHttpRequests. Instead a hidden <code>&lt;form&gt;</code> element containing all the fields is created temporarily and submitted\nwith 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 <code>&lt;iframe&gt;</code> which is inserted into the document\nbut removed after the return data has been gathered.</p>\n\n<p>The server response is parsed by the browser to create the document for the IFRAME. If the server is using JSON\nto 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\nbrowser to insert the text unchanged into the document body.</p>\n\n<p>Characters which are significant to an HTML parser must be sent as HTML entities, so encode <code>\"&lt;\"</code> as <code>\"&amp;lt;\"</code>,\n<code>\"&amp;\"</code> as <code>\"&amp;amp;\"</code> etc.</p>\n\n<p>The response text is retrieved from the document, and a fake XMLHttpRequest object is created containing a\nresponseText property in order to conform to the requirements of event handlers and callbacks.</p>\n\n<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\n(notably JEE) may require some custom processing in order to retrieve parameter names and parameter values from\nthe packet content.</p>\n"},"initialize":{"!type":"fn() -> !this","!doc":"<p>Do any post layout initialization</p>\n"},"isDirty":{"!type":"fn() -> bool","!doc":"<p>Returns <code>true</code> if any fields in this form have changed from their original values.</p>\n\n<p>Note that if this BasicForm was configured with <a href=\"#!/api/Ext.form.Basic-cfg-trackResetOnLoad\" rel=\"Ext.form.Basic-cfg-trackResetOnLoad\" class=\"docClass\">trackResetOnLoad</a> then the Fields' <em>original values</em> are updated when the values are\nloaded by <a href=\"#!/api/Ext.form.Basic-method-setValues\" rel=\"Ext.form.Basic-method-setValues\" class=\"docClass\">setValues</a> or <a href=\"#!/api/Ext.form.Basic-method-loadRecord\" rel=\"Ext.form.Basic-method-loadRecord\" class=\"docClass\">loadRecord</a>.</p>\n"},"isValid":{"!type":"fn() -> bool","!doc":"<p>Returns true if client-side validation on the form is successful. Any invalid fields will be\nmarked as invalid. If you only want to determine overall form validity without marking anything,\nuse <a href=\"#!/api/Ext.form.Basic-method-hasInvalidField\" rel=\"Ext.form.Basic-method-hasInvalidField\" class=\"docClass\">hasInvalidField</a> instead.</p>\n"},"load":{"!type":"fn(options: ?) -> +Ext.form.Basic","!doc":"<p>Shortcut to <a href=\"#!/api/Ext.form.Basic-method-doAction\" rel=\"Ext.form.Basic-method-doAction\" class=\"docClass\">do</a> a <a href=\"#!/api/Ext.form.action.Load\" rel=\"Ext.form.action.Load\" class=\"docClass\">load action</a>.</p>\n"},"loadRecord":{"!type":"fn(record: +Ext.data.Model) -> +Ext.form.Basic","!doc":"<p>Loads an <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a> into this form by calling <a href=\"#!/api/Ext.form.Basic-method-setValues\" rel=\"Ext.form.Basic-method-setValues\" class=\"docClass\">setValues</a> with the\n<a href=\"#!/api/Ext.data.Model-property-raw\" rel=\"Ext.data.Model-property-raw\" class=\"docClass\">record data</a>.\nSee also <a href=\"#!/api/Ext.form.Basic-cfg-trackResetOnLoad\" rel=\"Ext.form.Basic-cfg-trackResetOnLoad\" class=\"docClass\">trackResetOnLoad</a>.</p>\n"},"markInvalid":{"!type":"fn(errors: ?|[?]|+Ext.data.Errors) -> +Ext.form.Basic","!doc":"<p>Mark fields in this form invalid in bulk.</p>\n"},"onFieldAdd":{"!type":"fn(field: ?) -> !this"},"onFieldRemove":{"!type":"fn(field: ?) -> !this"},"onValidityChange":{"!type":"fn(valid: bool) -> !this","!doc":"<p>Handle changes in the form's validity. If there are any sub components with\n<code>formBind=true</code> then they are enabled/disabled based on the new validity.</p>\n"},"reset":{"!type":"fn(resetRecord?: bool) -> +Ext.form.Basic","!doc":"<p>Resets all fields in this form. By default, any record bound by <a href=\"#!/api/Ext.form.Basic-method-loadRecord\" rel=\"Ext.form.Basic-method-loadRecord\" class=\"docClass\">loadRecord</a>\nwill be retained.</p>\n"},"setValues":{"!type":"fn(values: ?|[?]) -> +Ext.form.Basic","!doc":"<p>Set values for fields in this form in bulk.</p>\n"},"submit":{"!type":"fn(options: ?) -> +Ext.form.Basic","!doc":"<p>Shortcut to <a href=\"#!/api/Ext.form.Basic-method-doAction\" rel=\"Ext.form.Basic-method-doAction\" class=\"docClass\">do</a> a <a href=\"#!/api/Ext.form.action.Submit\" rel=\"Ext.form.action.Submit\" class=\"docClass\">submit action</a>. This will use the\n<a href=\"#!/api/Ext.form.action.Submit\" rel=\"Ext.form.action.Submit\" class=\"docClass\">AJAX submit action</a> by default. If the <a href=\"#!/api/Ext.form.Basic-cfg-standardSubmit\" rel=\"Ext.form.Basic-cfg-standardSubmit\" class=\"docClass\">standardSubmit</a> config\nis enabled it will use a standard form element to submit, or if the <a href=\"#!/api/Ext.form.Basic-cfg-api\" rel=\"Ext.form.Basic-cfg-api\" class=\"docClass\">api</a> config is present\nit will use the <a href=\"#!/api/Ext.form.action.DirectLoad\" rel=\"Ext.form.action.DirectLoad\" class=\"docClass\">Ext.direct.Direct submit action</a>.</p>\n\n<p>The following code:</p>\n\n<pre><code>myFormPanel.getForm().submit({\n    clientValidation: true,\n    url: 'updateConsignment.php',\n    params: {\n        newStatus: 'delivered'\n    },\n    success: function(form, action) {\n       <a href=\"#!/api/Ext.MessageBox-method-alert\" rel=\"Ext.MessageBox-method-alert\" class=\"docClass\">Ext.Msg.alert</a>('Success', action.result.msg);\n    },\n    failure: function(form, action) {\n        switch (action.failureType) {\n            case <a href=\"#!/api/Ext.form.action.Action-static-property-CLIENT_INVALID\" rel=\"Ext.form.action.Action-static-property-CLIENT_INVALID\" class=\"docClass\">Ext.form.action.Action.CLIENT_INVALID</a>:\n                <a href=\"#!/api/Ext.MessageBox-method-alert\" rel=\"Ext.MessageBox-method-alert\" class=\"docClass\">Ext.Msg.alert</a>('Failure', 'Form fields may not be submitted with invalid values');\n                break;\n            case <a href=\"#!/api/Ext.form.action.Action-static-property-CONNECT_FAILURE\" rel=\"Ext.form.action.Action-static-property-CONNECT_FAILURE\" class=\"docClass\">Ext.form.action.Action.CONNECT_FAILURE</a>:\n                <a href=\"#!/api/Ext.MessageBox-method-alert\" rel=\"Ext.MessageBox-method-alert\" class=\"docClass\">Ext.Msg.alert</a>('Failure', 'Ajax communication failed');\n                break;\n            case <a href=\"#!/api/Ext.form.action.Action-static-property-SERVER_INVALID\" rel=\"Ext.form.action.Action-static-property-SERVER_INVALID\" class=\"docClass\">Ext.form.action.Action.SERVER_INVALID</a>:\n               <a href=\"#!/api/Ext.MessageBox-method-alert\" rel=\"Ext.MessageBox-method-alert\" class=\"docClass\">Ext.Msg.alert</a>('Failure', action.result.msg);\n       }\n    }\n});\n</code></pre>\n\n<p>would process the following server response for a successful submission:</p>\n\n<pre><code>{\n    \"success\":true, // note this is Boolean, not string\n    \"msg\":\"Consignment updated\"\n}\n</code></pre>\n\n<p>and the following server response for a failed submission:</p>\n\n<pre><code>{\n    \"success\":false, // note this is Boolean, not string\n    \"msg\":\"You do not have permission to perform this operation\"\n}\n</code></pre>\n"},"updateRecord":{"!type":"fn(record?: +Ext.data.Model) -> +Ext.form.Basic","!doc":"<p>Persists the values in this form into the passed <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a> object in a beginEdit/endEdit block.\nIf the record is not specified, it will attempt to update (if it exists) the record provided to loadRecord.</p>\n"},"actioncomplete":{"!type":"fn(this: +Ext.form.Basic, action: +Ext.form.action.Action, eOpts: ?)","!doc":"<p>Fires when an action is completed.</p>\n"},"actionfailed":{"!type":"fn(this: +Ext.form.Basic, action: +Ext.form.action.Action, eOpts: ?)","!doc":"<p>Fires when an action fails.</p>\n"},"beforeaction":{"!type":"fn(this: +Ext.form.Basic, action: +Ext.form.action.Action, eOpts: ?)","!doc":"<p>Fires before any action is performed. Return false to cancel the action.</p>\n"},"dirtychange":{"!type":"fn(this: +Ext.form.Basic, dirty: bool, eOpts: ?)","!doc":"<p>Fires when the dirty state of the entire form changes.</p>\n"},"validitychange":{"!type":"fn(this: +Ext.form.Basic, valid: bool, eOpts: ?)","!doc":"<p>Fires when the validity of the entire form changes.</p>\n"}}},"CheckboxGroup":{"!doc":"<p>A <a href=\"#!/api/Ext.form.FieldContainer\" rel=\"Ext.form.FieldContainer\" class=\"docClass\">field container</a> which has a specialized layout for arranging\n<a href=\"#!/api/Ext.form.field.Checkbox\" rel=\"Ext.form.field.Checkbox\" class=\"docClass\">Ext.form.field.Checkbox</a> controls into columns, and provides convenience\n<a href=\"#!/api/Ext.form.field.Field\" rel=\"Ext.form.field.Field\" class=\"docClass\">Ext.form.field.Field</a> methods for <a href=\"#!/api/Ext.form.CheckboxGroup-method-getValue\" rel=\"Ext.form.CheckboxGroup-method-getValue\" class=\"docClass\">getting</a>, <a href=\"#!/api/Ext.form.CheckboxGroup-method-setValue\" rel=\"Ext.form.CheckboxGroup-method-setValue\" class=\"docClass\">setting</a>,\nand <a href=\"#!/api/Ext.form.CheckboxGroup-method-validate\" rel=\"Ext.form.CheckboxGroup-method-validate\" class=\"docClass\">validating</a> the group of checkboxes as a whole.</p>\n\n<h1>Validation</h1>\n\n<p>Individual checkbox fields themselves have no default validation behavior, but\nsometimes you want to require a user to select at least one of a group of checkboxes. CheckboxGroup\nallows this by setting the config <code><a href=\"#!/api/Ext.form.CheckboxGroup-cfg-allowBlank\" rel=\"Ext.form.CheckboxGroup-cfg-allowBlank\" class=\"docClass\">allowBlank</a>:false</code>; when the user does not check at\nleast one of the checkboxes, the entire group will be highlighted as invalid and the\n<a href=\"#!/api/Ext.form.CheckboxGroup-cfg-blankText\" rel=\"Ext.form.CheckboxGroup-cfg-blankText\" class=\"docClass\">error message</a> will be displayed according to the <a href=\"#!/api/Ext.form.CheckboxGroup-cfg-msgTarget\" rel=\"Ext.form.CheckboxGroup-cfg-msgTarget\" class=\"docClass\">msgTarget</a> config.</p>\n\n<h1>Layout</h1>\n\n<p>The default layout for CheckboxGroup makes it easy to arrange the checkboxes into\ncolumns; see the <a href=\"#!/api/Ext.form.CheckboxGroup-cfg-columns\" rel=\"Ext.form.CheckboxGroup-cfg-columns\" class=\"docClass\">columns</a> and <a href=\"#!/api/Ext.form.CheckboxGroup-cfg-vertical\" rel=\"Ext.form.CheckboxGroup-cfg-vertical\" class=\"docClass\">vertical</a> config documentation for details. You may also\nuse a completely different layout by setting the <a href=\"#!/api/Ext.form.CheckboxGroup-cfg-layout\" rel=\"Ext.form.CheckboxGroup-cfg-layout\" class=\"docClass\">layout</a> to one of the other supported layout\ntypes; for instance you may wish to use a custom arrangement of hbox and vbox containers. In that case\nthe checkbox components at any depth will still be managed by the CheckboxGroup's validation.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>', {\n    title: 'Checkbox Group',\n    width: 300,\n    height: 125,\n    bodyPadding: 10,\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    items:[{\n        xtype: 'checkboxgroup',\n        fieldLabel: 'Two Columns',\n        // Arrange checkboxes into two columns, distributed vertically\n        columns: 2,\n        vertical: true,\n        items: [\n            { boxLabel: 'Item 1', name: 'rb', inputValue: '1' },\n            { boxLabel: 'Item 2', name: 'rb', inputValue: '2', checked: true },\n            { boxLabel: 'Item 3', name: 'rb', inputValue: '3' },\n            { boxLabel: 'Item 4', name: 'rb', inputValue: '4' },\n            { boxLabel: 'Item 5', name: 'rb', inputValue: '5' },\n            { boxLabel: 'Item 6', name: 'rb', inputValue: '6' }\n        ]\n    }]\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_form_CheckboxGroup_cfg)","prototype":{"!proto":"Ext.form.FieldContainer.prototype","allowBlank":{"!type":"bool","!doc":"<p>False to validate that at least one item in the group is checked. If no items are selected at\nvalidation time, <a href=\"#!/api/Ext.form.CheckboxGroup-cfg-blankText\" rel=\"Ext.form.CheckboxGroup-cfg-blankText\" class=\"docClass\">blankText</a> will be used as the error text.</p>\n"},"blankText":{"!type":"string","!doc":"<p>Error text to display if the <a href=\"#!/api/Ext.form.CheckboxGroup-cfg-allowBlank\" rel=\"Ext.form.CheckboxGroup-cfg-allowBlank\" class=\"docClass\">allowBlank</a> validation fails</p>\n"},"columns":{"!type":"string|number|[number]","!doc":"<p>Specifies the number of columns to use when displaying grouped checkbox/radio controls using automatic layout.\nThis config can take several types of values:</p>\n\n<ul>\n<li>'auto' - The controls will be rendered one per column on one row and the width of each column will be evenly\ndistributed based on the width of the overall field container. This is the default.</li>\n<li>Number - If you specific a number (e.g., 3) that number of columns will be created and the contained controls\nwill be automatically distributed based on the value of <a href=\"#!/api/Ext.form.CheckboxGroup-cfg-vertical\" rel=\"Ext.form.CheckboxGroup-cfg-vertical\" class=\"docClass\">vertical</a>.</li>\n<li>Array - You can also specify an array of column widths, mixing integer (fixed width) and float (percentage\nwidth) values as needed (e.g., [100, .25, .75]). Any integer values will be rendered first, then any float\nvalues will be calculated as a percentage of the remaining space. Float values do not have to add up to 1\n(100%) although if you want the controls to take up the entire field container you should do so.</li>\n</ul>\n\n"},"componentCls":{"!type":"string","!doc":"<p>CSS Class to be added to a components root level element to give distinction to it via styling.</p>\n"},"defaultType":{"!type":"string","!doc":"<p>private</p>\n"},"items":{"!type":"[+Ext.form.field.Checkbox]|[?]","!doc":"<p>An Array of <a href=\"#!/api/Ext.form.field.Checkbox\" rel=\"Ext.form.field.Checkbox\" class=\"docClass\">Checkbox</a>es or Checkbox config objects to arrange in the group.</p>\n"},"layout":{"!type":"+Ext.enums.Layout|?","!doc":"<p>private</p>\n"},"name":{"!type":"string"},"vertical":{"!type":"bool","!doc":"<p>True to distribute contained controls across columns, completely filling each column top to bottom before\nstarting on the next column. The number of controls in each column will be automatically calculated to keep\ncolumns as even as possible. The default value is false, so that controls will be added to columns one at a time,\ncompletely filling each row left to right before starting on the next row.</p>\n"},"extraFieldBodyCls":{"!type":"string","!doc":"<p>private</p>\n"},"groupCls":{"!type":"string","!doc":"<p>private</p>\n"},"eachBox":{"!type":"fn(fn: fn(), scope?: ?) -> !this","!doc":"<p>Convenience function which calls the given function for every checkbox in the group</p>\n"},"getBoxes":{"!type":"fn(query?: string) -> !this","!doc":"<p>Returns all checkbox components within the container</p>\n"},"getChecked":{"!type":"fn() -> [+Ext.form.field.Checkbox]","!doc":"<p>Returns an Array of all checkboxes in the container which are currently checked</p>\n"},"getErrors":{"!type":"fn() -> [string]","!doc":"<p>Runs CheckboxGroup's validations and returns an array of any errors. The only error by default is if allowBlank\nis set to true and no items are checked.</p>\n"},"getModelData":{"!type":"fn() -> ?","!doc":"<p>Don't return any data for the model; the form will get the info from the individual checkboxes themselves.</p>\n"},"getSubmitData":{"!type":"fn() -> ?","!doc":"<p>Don't return any data for submit; the form will get the info from the individual checkboxes themselves.</p>\n"},"getValue":{"!type":"fn() -> !this","!doc":"<p>Returns an object containing the values of all checked checkboxes within the group. Each key-value pair in the\nobject corresponds to a checkbox <a href=\"#!/api/Ext.form.field.Checkbox-cfg-name\" rel=\"Ext.form.field.Checkbox-cfg-name\" class=\"docClass\">name</a>. If there is only one checked checkbox\nwith a particular name, the value of that pair will be the String <a href=\"#!/api/Ext.form.field.Checkbox-cfg-inputValue\" rel=\"Ext.form.field.Checkbox-cfg-inputValue\" class=\"docClass\">inputValue</a> of that checkbox. If there are multiple checked checkboxes with that name, the value of that pair\nwill be an Array of the selected inputValues.</p>\n\n<p>The object format returned from this method can also be passed directly to the <a href=\"#!/api/Ext.form.CheckboxGroup-method-setValue\" rel=\"Ext.form.CheckboxGroup-method-setValue\" class=\"docClass\">setValue</a> method.</p>\n\n<p>NOTE: In Ext 3, this method returned an array of Checkbox components; this was changed to make it more consistent\nwith other field components and with the <a href=\"#!/api/Ext.form.CheckboxGroup-method-setValue\" rel=\"Ext.form.CheckboxGroup-method-setValue\" class=\"docClass\">setValue</a> argument signature. If you need the old behavior in\nExt 4+, use the <a href=\"#!/api/Ext.form.CheckboxGroup-method-getChecked\" rel=\"Ext.form.CheckboxGroup-method-getChecked\" class=\"docClass\">getChecked</a> method instead.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>The initComponent template method is an important initialization step for a Component. It is intended to be\nimplemented by each subclass of <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> to provide any needed constructor logic. The\ninitComponent method of the class being created is called first, with each initComponent method\nup the hierarchy to <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> being called thereafter. This makes it easy to implement and,\nif needed, override the constructor logic of the Component at any step in the hierarchy.</p>\n\n<p>The initComponent method <strong>must</strong> contain a call to <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a> in order\nto ensure that the parent class' initComponent method is also called.</p>\n\n<p>All config options passed to the constructor are applied to <code>this</code> before initComponent is called,\nso you can simply access them with <code>this.someOption</code>.</p>\n\n<p>The following example demonstrates using a dynamic string for the text of a button at the time of\ninstantiation of the class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('DynamicButtonText', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n\n    initComponent: function() {\n        this.text = new Date();\n        this.renderTo = <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>();\n        this.callParent();\n    }\n});\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function() {\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('DynamicButtonText');\n});\n</code></pre>\n"},"initValue":{"!type":"fn() -> !this","!doc":"<p>Initializes the field's value based on the initial config. If the <a href=\"#!/api/Ext.form.CheckboxGroup-cfg-value\" rel=\"Ext.form.CheckboxGroup-cfg-value\" class=\"docClass\">value</a> config is specified then we use\nthat to set the value; otherwise we initialize the originalValue by querying the values of all sub-checkboxes\nafter they have been initialized.</p>\n"},"isDirty":{"!type":"fn() -> bool","!doc":"<p>private override</p>\n"},"isEqual":{"!type":"fn(value1: ?, value2: ?) -> bool","!doc":"<p>private override - the group value is a complex object, compare using object serialization</p>\n"},"onAdd":{"!type":"fn(field: ?) -> !this","!doc":"<p>When a checkbox is added to the group, monitor it for changes</p>\n"},"onRemove":{"!type":"fn(item: ?) -> !this","!doc":"<p>Called when a <a href=\"#!/api/Ext.form.Labelable\" rel=\"Ext.form.Labelable\" class=\"docClass\">Ext.form.Labelable</a> instance is removed from the container's subtree.</p>\n"},"reset":{"!type":"fn() -> !this","!doc":"<p>Resets the checked state of all <a href=\"#!/api/Ext.form.field.Checkbox\" rel=\"Ext.form.field.Checkbox\" class=\"docClass\">checkboxes</a> in the group to their originally\nloaded values and clears any validation messages.\nSee <a href=\"#!/api/Ext.form.Basic\" rel=\"Ext.form.Basic\" class=\"docClass\">Ext.form.Basic</a>.<a href=\"#!/api/Ext.form.Basic-cfg-trackResetOnLoad\" rel=\"Ext.form.Basic-cfg-trackResetOnLoad\" class=\"docClass\">trackResetOnLoad</a></p>\n"},"resetOriginalValue":{"!type":"fn() -> !this","!doc":"<p>Resets the field's <a href=\"#!/api/Ext.form.CheckboxGroup-property-originalValue\" rel=\"Ext.form.CheckboxGroup-property-originalValue\" class=\"docClass\">originalValue</a> property so it matches the current <a href=\"#!/api/Ext.form.CheckboxGroup-method-getValue\" rel=\"Ext.form.CheckboxGroup-method-getValue\" class=\"docClass\">value</a>. This is\ncalled by <a href=\"#!/api/Ext.form.Basic\" rel=\"Ext.form.Basic\" class=\"docClass\">Ext.form.Basic</a>.<a href=\"#!/api/Ext.form.Basic-method-setValues\" rel=\"Ext.form.Basic-method-setValues\" class=\"docClass\">setValues</a> if the form's\n<a href=\"#!/api/Ext.form.Basic-cfg-trackResetOnLoad\" rel=\"Ext.form.Basic-cfg-trackResetOnLoad\" class=\"docClass\">trackResetOnLoad</a> property is set to true.</p>\n"},"setReadOnly":{"!type":"fn(readOnly: ?) -> !this","!doc":"<p>private override</p>\n"},"setValue":{"!type":"fn(value: ?) -> +Ext.form.CheckboxGroup","!doc":"<p>Sets the value(s) of all checkboxes in the group. The expected format is an Object of name-value pairs\ncorresponding to the names of the checkboxes in the group. Each pair can have either a single or multiple values:</p>\n\n<ul>\n<li>A single Boolean or String value will be passed to the <code>setValue</code> method of the checkbox with that name.\nSee the rules in <a href=\"#!/api/Ext.form.field.Checkbox-method-setValue\" rel=\"Ext.form.field.Checkbox-method-setValue\" class=\"docClass\">Ext.form.field.Checkbox.setValue</a> for accepted values.</li>\n<li>An Array of String values will be matched against the <a href=\"#!/api/Ext.form.field.Checkbox-cfg-inputValue\" rel=\"Ext.form.field.Checkbox-cfg-inputValue\" class=\"docClass\">inputValue</a>\nof checkboxes in the group with that name; those checkboxes whose inputValue exists in the array will be\nchecked and others will be unchecked.</li>\n</ul>\n\n\n<p>If a checkbox's name is not in the mapping at all, it will be unchecked.</p>\n\n<p>An example:</p>\n\n<pre><code>var myCheckboxGroup = new <a href=\"#!/api/Ext.form.CheckboxGroup\" rel=\"Ext.form.CheckboxGroup\" class=\"docClass\">Ext.form.CheckboxGroup</a>({\n    columns: 3,\n    items: [{\n        name: 'cb1',\n        boxLabel: 'Single 1'\n    }, {\n        name: 'cb2',\n        boxLabel: 'Single 2'\n    }, {\n        name: 'cb3',\n        boxLabel: 'Single 3'\n    }, {\n        name: 'cbGroup',\n        boxLabel: 'Grouped 1'\n        inputValue: 'value1'\n    }, {\n        name: 'cbGroup',\n        boxLabel: 'Grouped 2'\n        inputValue: 'value2'\n    }, {\n        name: 'cbGroup',\n        boxLabel: 'Grouped 3'\n        inputValue: 'value3'\n    }]\n});\n\nmyCheckboxGroup.setValue({\n    cb1: true,\n    cb3: false,\n    cbGroup: ['value1', 'value3']\n});\n</code></pre>\n\n<p>The above code will cause the checkbox named 'cb1' to be checked, as well as the first and third checkboxes named\n'cbGroup'. The other three checkboxes will be unchecked.</p>\n"},"validate":{"!type":"fn() -> bool","!doc":"<p>Returns whether or not the field value is currently valid by <a href=\"#!/api/Ext.form.CheckboxGroup-method-getErrors\" rel=\"Ext.form.CheckboxGroup-method-getErrors\" class=\"docClass\">validating</a> the field's current\nvalue, and fires the <a href=\"#!/api/Ext.form.CheckboxGroup-event-validitychange\" rel=\"Ext.form.CheckboxGroup-event-validitychange\" class=\"docClass\">validitychange</a> event if the field's validity has changed since the last validation.\n<strong>Note</strong>: <a href=\"#!/api/Ext.form.CheckboxGroup-cfg-disabled\" rel=\"Ext.form.CheckboxGroup-cfg-disabled\" class=\"docClass\">disabled</a> fields are always treated as valid.</p>\n\n<p>Custom implementations of this method are allowed to have side-effects such as triggering error message display.\nTo validate without side-effects, use <a href=\"#!/api/Ext.form.CheckboxGroup-method-isValid\" rel=\"Ext.form.CheckboxGroup-method-isValid\" class=\"docClass\">isValid</a>.</p>\n"}}},"field":{"Field":{"prototype":{"disabled":{"!type":"bool","!doc":"<p>True to disable the field. Disabled Fields will not be <a href=\"#!/api/Ext.form.Basic-method-submit\" rel=\"Ext.form.Basic-method-submit\" class=\"docClass\">submitted</a>.</p>\n"},"submitValue":{"!type":"bool","!doc":"<p>Setting this to false will prevent the field from being <a href=\"#!/api/Ext.form.Basic-method-submit\" rel=\"Ext.form.Basic-method-submit\" class=\"docClass\">submitted</a> even when it is\nnot disabled.</p>\n"},"validateOnChange":{"!type":"bool","!doc":"<p>Specifies whether this field should be validated immediately whenever a change in its value is detected.\nIf the validation results in a change in the field's validity, a <a href=\"#!/api/Ext.form.field.Field-event-validitychange\" rel=\"Ext.form.field.Field-event-validitychange\" class=\"docClass\">validitychange</a> event will be\nfired. This allows the field to show feedback about the validity of its contents immediately as the user is\ntyping.</p>\n\n<p>When set to false, feedback will not be immediate. However the form will still be validated before submitting if\nthe clientValidation option to <a href=\"#!/api/Ext.form.Basic-method-doAction\" rel=\"Ext.form.Basic-method-doAction\" class=\"docClass\">Ext.form.Basic.doAction</a> is enabled, or if the field or form are validated\nmanually.</p>\n\n<p>See also <a href=\"#!/api/Ext.form.field.Base-cfg-checkChangeEvents\" rel=\"Ext.form.field.Base-cfg-checkChangeEvents\" class=\"docClass\">Ext.form.field.Base.checkChangeEvents</a> for controlling how changes to the field's value are\ndetected.</p>\n"},"value":{"!type":"?","!doc":"<p>A value to initialize this field with.</p>\n"},"isFormField":{"!type":"bool","!doc":"<p>Flag denoting that this component is a Field. Always true.</p>\n"},"originalValue":{"!type":"?","!doc":"<p>The original value of the field as configured in the <a href=\"#!/api/Ext.form.field.Field-cfg-value\" rel=\"Ext.form.field.Field-cfg-value\" class=\"docClass\">value</a> configuration, or as loaded by the last\nform load operation if the form's <a href=\"#!/api/Ext.form.Basic-cfg-trackResetOnLoad\" rel=\"Ext.form.Basic-cfg-trackResetOnLoad\" class=\"docClass\">trackResetOnLoad</a> setting is <code>true</code>.</p>\n"},"suspendCheckChange":{"!type":"number"},"batchChanges":{"!type":"fn(fn: ?) -> !this","!doc":"<p>A utility for grouping a set of modifications which may trigger value changes into a single transaction, to\nprevent excessive firing of <a href=\"#!/api/Ext.form.field.Field-event-change\" rel=\"Ext.form.field.Field-event-change\" class=\"docClass\">change</a> events. This is useful for instance if the field has sub-fields which\nare being updated as a group; you don't want the container field to check its own changed state for each subfield\nchange.</p>\n"},"beforeReset":{"!type":"fn() -> !this","!doc":"<p>Template method before a field is reset.</p>\n"},"checkChange":{"!type":"fn() -> !this","!doc":"<p>Checks whether the value of the field has changed since the last time it was checked.\nIf the value has changed, it:</p>\n\n<ol>\n<li>Fires the <a href=\"#!/api/Ext.form.field.Field-event-change\" rel=\"Ext.form.field.Field-event-change\" class=\"docClass\">change event</a>,</li>\n<li>Performs validation if the <a href=\"#!/api/Ext.form.field.Field-cfg-validateOnChange\" rel=\"Ext.form.field.Field-cfg-validateOnChange\" class=\"docClass\">validateOnChange</a> config is enabled, firing the\n<a href=\"#!/api/Ext.form.field.Field-event-validitychange\" rel=\"Ext.form.field.Field-event-validitychange\" class=\"docClass\">validitychange event</a> if the validity has changed, and</li>\n<li>Checks the <a href=\"#!/api/Ext.form.field.Field-method-isDirty\" rel=\"Ext.form.field.Field-method-isDirty\" class=\"docClass\">dirty state</a> of the field and fires the <a href=\"#!/api/Ext.form.field.Field-event-dirtychange\" rel=\"Ext.form.field.Field-event-dirtychange\" class=\"docClass\">dirtychange event</a>\nif it has changed.</li>\n</ol>\n\n"},"checkDirty":{"!type":"fn() -> !this","!doc":"<p>Checks the <a href=\"#!/api/Ext.form.field.Field-method-isDirty\" rel=\"Ext.form.field.Field-method-isDirty\" class=\"docClass\">isDirty</a> state of the field and if it has changed since the last time it was checked,\nfires the <a href=\"#!/api/Ext.form.field.Field-event-dirtychange\" rel=\"Ext.form.field.Field-event-dirtychange\" class=\"docClass\">dirtychange</a> event.</p>\n"},"clearInvalid":{"!type":"fn() -> !this","!doc":"<p>Clear any invalid styles/messages for this field. Components using this mixin should implement this method to\nupdate the components rendering to clear any existing messages.</p>\n\n<p><strong>Note</strong>: this method does not cause the Field's <a href=\"#!/api/Ext.form.field.Field-method-validate\" rel=\"Ext.form.field.Field-method-validate\" class=\"docClass\">validate</a> or <a href=\"#!/api/Ext.form.field.Field-method-isValid\" rel=\"Ext.form.field.Field-method-isValid\" class=\"docClass\">isValid</a> methods to return <code>true</code>\nif the value does not <em>pass</em> validation. So simply clearing a field's errors will not necessarily allow\nsubmission of forms submitted with the <a href=\"#!/api/Ext.form.action.Submit-cfg-clientValidation\" rel=\"Ext.form.action.Submit-cfg-clientValidation\" class=\"docClass\">Ext.form.action.Submit.clientValidation</a> option set.</p>\n"},"extractFileInput":{"!type":"fn() -> +HTMLElement","!doc":"<p>Only relevant if the instance's <a href=\"#!/api/Ext.form.field.Field-method-isFileUpload\" rel=\"Ext.form.field.Field-method-isFileUpload\" class=\"docClass\">isFileUpload</a> method returns true. Returns a reference to the file input\nDOM element holding the user's selected file. The input will be appended into the submission form and will not be\nreturned, so this method should also create a replacement.</p>\n"},"getName":{"!type":"fn() -> string","!doc":"<p>Returns the <a href=\"#!/api/Ext.form.field.Field-cfg-name\" rel=\"Ext.form.field.Field-cfg-name\" class=\"docClass\">name</a> attribute of the field. This is used as the parameter name\nwhen including the field value in a <a href=\"#!/api/Ext.form.Basic-method-submit\" rel=\"Ext.form.Basic-method-submit\" class=\"docClass\">form submit()</a>.</p>\n"},"initField":{"!type":"fn() -> !this","!doc":"<p>Initializes this Field mixin on the current instance. Components using this mixin should call this method during\ntheir own initialization process.</p>\n"},"isEqualAsString":{"!type":"fn(value1: ?, value2: ?) -> bool","!doc":"<p>Returns whether two values are logically equal.\nSimilar to <a href=\"#!/api/Ext.form.field.Field-method-isEqual\" rel=\"Ext.form.field.Field-method-isEqual\" class=\"docClass\">isEqual</a>, however null or undefined values will be treated as empty strings.</p>\n"},"isFileUpload":{"!type":"fn() -> bool","!doc":"<p>Returns whether this Field is a file upload field; if it returns true, forms will use special techniques for\n<a href=\"#!/api/Ext.form.Basic-method-submit\" rel=\"Ext.form.Basic-method-submit\" class=\"docClass\">submitting the form</a> via AJAX. See <a href=\"#!/api/Ext.form.Basic-method-hasUpload\" rel=\"Ext.form.Basic-method-hasUpload\" class=\"docClass\">Ext.form.Basic.hasUpload</a> for details. If\nthis returns true, the <a href=\"#!/api/Ext.form.field.Field-method-extractFileInput\" rel=\"Ext.form.field.Field-method-extractFileInput\" class=\"docClass\">extractFileInput</a> method must also be implemented to return the corresponding file\ninput element.</p>\n"},"isValid":{"!type":"fn() -> bool","!doc":"<p>Returns whether or not the field value is currently valid by <a href=\"#!/api/Ext.form.field.Field-method-getErrors\" rel=\"Ext.form.field.Field-method-getErrors\" class=\"docClass\">validating</a> the field's current\nvalue. The <a href=\"#!/api/Ext.form.field.Field-event-validitychange\" rel=\"Ext.form.field.Field-event-validitychange\" class=\"docClass\">validitychange</a> event will not be fired; use <a href=\"#!/api/Ext.form.field.Field-method-validate\" rel=\"Ext.form.field.Field-method-validate\" class=\"docClass\">validate</a> instead if you want the event\nto fire. <strong>Note</strong>: <a href=\"#!/api/Ext.form.field.Field-cfg-disabled\" rel=\"Ext.form.field.Field-cfg-disabled\" class=\"docClass\">disabled</a> fields are always treated as valid.</p>\n\n<p>Implementations are encouraged to ensure that this method does not have side-effects such as triggering error\nmessage display.</p>\n"},"markInvalid":{"!type":"fn(errors: string|[string]) -> !this","!doc":"<p>Associate one or more error messages with this field. Components using this mixin should implement this method to\nupdate the component's rendering to display the messages.</p>\n\n<p><strong>Note</strong>: this method does not cause the Field's <a href=\"#!/api/Ext.form.field.Field-method-validate\" rel=\"Ext.form.field.Field-method-validate\" class=\"docClass\">validate</a> or <a href=\"#!/api/Ext.form.field.Field-method-isValid\" rel=\"Ext.form.field.Field-method-isValid\" class=\"docClass\">isValid</a> methods to return <code>false</code>\nif the value does <em>pass</em> validation. So simply marking a Field as invalid will not prevent submission of forms\nsubmitted with the <a href=\"#!/api/Ext.form.action.Submit-cfg-clientValidation\" rel=\"Ext.form.action.Submit-cfg-clientValidation\" class=\"docClass\">Ext.form.action.Submit.clientValidation</a> option set.</p>\n"},"onChange":{"!type":"fn(newVal: ?, oldVal: ?) -> !this","!doc":"<p>Called when the field's value changes. Performs validation if the <a href=\"#!/api/Ext.form.field.Field-cfg-validateOnChange\" rel=\"Ext.form.field.Field-cfg-validateOnChange\" class=\"docClass\">validateOnChange</a>\nconfig is enabled, and invokes the dirty check.</p>\n"},"onDirtyChange":{"!type":"fn(isDirty: bool) -> !this","!doc":"<p>Called when the field's dirty state changes.</p>\n"},"transformOriginalValue":{"!type":"fn(value: ?) -> ?","!doc":"<p>Allows for any necessary modifications before the original\nvalue is set</p>\n"},"change":{"!type":"fn(this: +Ext.form.field.Field, newValue: ?, oldValue: ?, eOpts: ?)","!doc":"<p>Fires when the value of a field is changed via the <a href=\"#!/api/Ext.form.field.Field-method-setValue\" rel=\"Ext.form.field.Field-method-setValue\" class=\"docClass\">setValue</a> method.</p>\n"},"dirtychange":{"!type":"fn(this: +Ext.form.field.Field, isDirty: bool, eOpts: ?)","!doc":"<p>Fires when a change in the field's <a href=\"#!/api/Ext.form.field.Field-method-isDirty\" rel=\"Ext.form.field.Field-method-isDirty\" class=\"docClass\">isDirty</a> state is detected.</p>\n"},"validitychange":{"!type":"fn(this: +Ext.form.field.Field, isValid: bool, eOpts: ?)","!doc":"<p>Fires when a change in the field's validity is detected.</p>\n"},"getErrors":{"!type":"fn(value: ?) -> [string]","!doc":"<p>Runs this field's validators and returns an array of error messages for any validation failures. This is called\ninternally during validation and would not usually need to be used manually.</p>\n\n<p>Each subclass should override or augment the return value to provide their own errors.</p>\n"},"getModelData":{"!type":"fn() -> ?","!doc":"<p>Returns the value(s) that should be saved to the <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a> instance for this field, when <a href=\"#!/api/Ext.form.Basic-method-updateRecord\" rel=\"Ext.form.Basic-method-updateRecord\" class=\"docClass\">Ext.form.Basic.updateRecord</a> is called. Typically this will be an object with a single name-value pair, the name\nbeing this field's <a href=\"#!/api/Ext.form.field.Field-method-getName\" rel=\"Ext.form.field.Field-method-getName\" class=\"docClass\">name</a> and the value being its current data value. More advanced field\nimplementations may return more than one name-value pair. The returned values will be saved to the corresponding\nfield names in the Model.</p>\n\n<p>Note that the values returned from this method are not guaranteed to have been successfully <a href=\"#!/api/Ext.form.field.Field-method-validate\" rel=\"Ext.form.field.Field-method-validate\" class=\"docClass\">validated</a>.</p>\n"},"initValue":{"!type":"fn() -> !this","!doc":"<p>Initializes the field's value based on the initial config.</p>\n"},"isDirty":{"!type":"fn() -> bool","!doc":"<p>Returns true if the value of this Field has been changed from its <a href=\"#!/api/Ext.form.field.Field-property-originalValue\" rel=\"Ext.form.field.Field-property-originalValue\" class=\"docClass\">originalValue</a>.\nWill always return false if the field is disabled.</p>\n\n<p>Note that if the owning <a href=\"#!/api/Ext.form.Basic\" rel=\"Ext.form.Basic\" class=\"docClass\">form</a> was configured with\n<a href=\"#!/api/Ext.form.Basic-cfg-trackResetOnLoad\" rel=\"Ext.form.Basic-cfg-trackResetOnLoad\" class=\"docClass\">trackResetOnLoad</a> then the <a href=\"#!/api/Ext.form.field.Field-property-originalValue\" rel=\"Ext.form.field.Field-property-originalValue\" class=\"docClass\">originalValue</a> is updated when\nthe values are loaded by <a href=\"#!/api/Ext.form.Basic\" rel=\"Ext.form.Basic\" class=\"docClass\">Ext.form.Basic</a>.<a href=\"#!/api/Ext.form.Basic-method-setValues\" rel=\"Ext.form.Basic-method-setValues\" class=\"docClass\">setValues</a>.</p>\n"},"isEqual":{"!type":"fn(value1: ?, value2: ?) -> bool","!doc":"<p>Returns whether two field <a href=\"#!/api/Ext.form.field.Field-method-getValue\" rel=\"Ext.form.field.Field-method-getValue\" class=\"docClass\">values</a> are logically equal. Field implementations may override this\nto provide custom comparison logic appropriate for the particular field's data type.</p>\n"},"reset":{"!type":"fn() -> !this","!doc":"<p>Resets the current field value to the originally loaded value and clears any validation messages. See <a href=\"#!/api/Ext.form.Basic\" rel=\"Ext.form.Basic\" class=\"docClass\">Ext.form.Basic</a>.<a href=\"#!/api/Ext.form.Basic-cfg-trackResetOnLoad\" rel=\"Ext.form.Basic-cfg-trackResetOnLoad\" class=\"docClass\">trackResetOnLoad</a></p>\n"},"resetOriginalValue":{"!type":"fn() -> !this","!doc":"<p>Resets the field's <a href=\"#!/api/Ext.form.field.Field-property-originalValue\" rel=\"Ext.form.field.Field-property-originalValue\" class=\"docClass\">originalValue</a> property so it matches the current <a href=\"#!/api/Ext.form.field.Field-method-getValue\" rel=\"Ext.form.field.Field-method-getValue\" class=\"docClass\">value</a>. This is\ncalled by <a href=\"#!/api/Ext.form.Basic\" rel=\"Ext.form.Basic\" class=\"docClass\">Ext.form.Basic</a>.<a href=\"#!/api/Ext.form.Basic-method-setValues\" rel=\"Ext.form.Basic-method-setValues\" class=\"docClass\">setValues</a> if the form's\n<a href=\"#!/api/Ext.form.Basic-cfg-trackResetOnLoad\" rel=\"Ext.form.Basic-cfg-trackResetOnLoad\" class=\"docClass\">trackResetOnLoad</a> property is set to true.</p>\n"},"validate":{"!type":"fn() -> bool","!doc":"<p>Returns whether or not the field value is currently valid by <a href=\"#!/api/Ext.form.field.Field-method-getErrors\" rel=\"Ext.form.field.Field-method-getErrors\" class=\"docClass\">validating</a> the field's current\nvalue, and fires the <a href=\"#!/api/Ext.form.field.Field-event-validitychange\" rel=\"Ext.form.field.Field-event-validitychange\" class=\"docClass\">validitychange</a> event if the field's validity has changed since the last validation.\n<strong>Note</strong>: <a href=\"#!/api/Ext.form.field.Field-cfg-disabled\" rel=\"Ext.form.field.Field-cfg-disabled\" class=\"docClass\">disabled</a> fields are always treated as valid.</p>\n\n<p>Custom implementations of this method are allowed to have side-effects such as triggering error message display.\nTo validate without side-effects, use <a href=\"#!/api/Ext.form.field.Field-method-isValid\" rel=\"Ext.form.field.Field-method-isValid\" class=\"docClass\">isValid</a>.</p>\n"},"name":{"!type":"string","!doc":"<p>The name of the field. By default this is used as the parameter name when including the\n<a href=\"#!/api/Ext.form.field.Field-method-getSubmitData\" rel=\"Ext.form.field.Field-method-getSubmitData\" class=\"docClass\">field value</a> in a <a href=\"#!/api/Ext.form.Basic-method-submit\" rel=\"Ext.form.Basic-method-submit\" class=\"docClass\">form submit()</a>. To prevent the field from\nbeing included in the form submit, set <a href=\"#!/api/Ext.form.field.Field-cfg-submitValue\" rel=\"Ext.form.field.Field-cfg-submitValue\" class=\"docClass\">submitValue</a> to false.</p>\n"},"getSubmitData":{"!type":"fn() -> ?","!doc":"<p>Returns the parameter(s) that would be included in a standard form submit for this field. Typically this will be\nan object with a single name-value pair, the name being this field's <a href=\"#!/api/Ext.form.field.Field-method-getName\" rel=\"Ext.form.field.Field-method-getName\" class=\"docClass\">name</a> and the value being\nits current stringified value. More advanced field implementations may return more than one name-value pair.</p>\n\n<p>Note that the values returned from this method are not guaranteed to have been successfully <a href=\"#!/api/Ext.form.field.Field-method-validate\" rel=\"Ext.form.field.Field-method-validate\" class=\"docClass\">validated</a>.</p>\n"},"getValue":{"!type":"fn() -> ?","!doc":"<p>Returns the current data value of the field. The type of value returned is particular to the type of the\nparticular field (e.g. a Date object for <a href=\"#!/api/Ext.form.field.Date\" rel=\"Ext.form.field.Date\" class=\"docClass\">Ext.form.field.Date</a>).</p>\n"},"setValue":{"!type":"fn(value: ?) -> +Ext.form.field.Field","!doc":"<p>Sets a data value into the field and runs the change detection and validation.</p>\n"}},"!doc":"<p>This mixin provides a common interface for the logical behavior and state of form fields, including:</p>\n\n<ul>\n<li>Getter and setter methods for field values</li>\n<li>Events and methods for tracking value and validity changes</li>\n<li>Methods for triggering validation</li>\n</ul>\n\n\n<p><strong>NOTE</strong>: When implementing custom fields, it is most likely that you will want to extend the <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">Ext.form.field.Base</a>\ncomponent class rather than using this mixin directly, as BaseField contains additional logic for generating an\nactual DOM complete with <a href=\"#!/api/Ext.form.Labelable\" rel=\"Ext.form.Labelable\" class=\"docClass\">label and error message</a> display and a form input field,\nplus methods that bind the Field value getters and setters to the input field's value.</p>\n\n<p>If you do want to implement this mixin directly and don't want to extend <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">Ext.form.field.Base</a>, then\nyou will most likely want to override the following methods with custom implementations: <a href=\"#!/api/Ext.form.field.Field-method-getValue\" rel=\"Ext.form.field.Field-method-getValue\" class=\"docClass\">getValue</a>,\n<a href=\"#!/api/Ext.form.field.Field-method-setValue\" rel=\"Ext.form.field.Field-method-setValue\" class=\"docClass\">setValue</a>, and <a href=\"#!/api/Ext.form.field.Field-method-getErrors\" rel=\"Ext.form.field.Field-method-getErrors\" class=\"docClass\">getErrors</a>. Other methods may be overridden as needed but their base\nimplementations should be sufficient for common cases. You will also need to make sure that <a href=\"#!/api/Ext.form.field.Field-method-initField\" rel=\"Ext.form.field.Field-method-initField\" class=\"docClass\">initField</a>\nis called during the component's initialization.</p>\n"},"Base":{"!doc":"<p>Base class for form fields that provides default event handling, rendering, and other common functionality\nneeded by all form field types. Utilizes the <a href=\"#!/api/Ext.form.field.Field\" rel=\"Ext.form.field.Field\" class=\"docClass\">Ext.form.field.Field</a> mixin for value handling and validation,\nand the <a href=\"#!/api/Ext.form.Labelable\" rel=\"Ext.form.Labelable\" class=\"docClass\">Ext.form.Labelable</a> mixin to provide label and error message display.</p>\n\n<p>In most cases you will want to use a subclass, such as <a href=\"#!/api/Ext.form.field.Text\" rel=\"Ext.form.field.Text\" class=\"docClass\">Ext.form.field.Text</a> or <a href=\"#!/api/Ext.form.field.Checkbox\" rel=\"Ext.form.field.Checkbox\" class=\"docClass\">Ext.form.field.Checkbox</a>,\nrather than creating instances of this class directly. However if you are implementing a custom form field,\nusing this as the parent class is recommended.</p>\n\n<h1>Values and Conversions</h1>\n\n<p>Because Base implements the Field mixin, it has a main value that can be initialized with the\n<a href=\"#!/api/Ext.form.field.Base-cfg-value\" rel=\"Ext.form.field.Base-cfg-value\" class=\"docClass\">value</a> config and manipulated via the <a href=\"#!/api/Ext.form.field.Base-method-getValue\" rel=\"Ext.form.field.Base-method-getValue\" class=\"docClass\">getValue</a> and <a href=\"#!/api/Ext.form.field.Base-method-setValue\" rel=\"Ext.form.field.Base-method-setValue\" class=\"docClass\">setValue</a> methods. This main\nvalue can be one of many data types appropriate to the current field, for instance a <a href=\"#!/api/Ext.form.field.Date\" rel=\"Ext.form.field.Date\" class=\"docClass\">Date</a>\nfield would use a JavaScript Date object as its value type. However, because the field is rendered as a HTML\ninput, this value data type can not always be directly used in the rendered field.</p>\n\n<p>Therefore Base introduces the concept of a \"raw value\". This is the value of the rendered HTML input field,\nand is normally a String. The <a href=\"#!/api/Ext.form.field.Base-method-getRawValue\" rel=\"Ext.form.field.Base-method-getRawValue\" class=\"docClass\">getRawValue</a> and <a href=\"#!/api/Ext.form.field.Base-method-setRawValue\" rel=\"Ext.form.field.Base-method-setRawValue\" class=\"docClass\">setRawValue</a> methods can be used to directly\nwork with the raw value, though it is recommended to use getValue and setValue in most cases.</p>\n\n<p>Conversion back and forth between the main value and the raw value is handled by the <a href=\"#!/api/Ext.form.field.Base-method-valueToRaw\" rel=\"Ext.form.field.Base-method-valueToRaw\" class=\"docClass\">valueToRaw</a> and\n<a href=\"#!/api/Ext.form.field.Base-method-rawToValue\" rel=\"Ext.form.field.Base-method-rawToValue\" class=\"docClass\">rawToValue</a> methods. If you are implementing a subclass that uses a non-String value data type, you\nshould override these methods to handle the conversion.</p>\n\n<h1>Rendering</h1>\n\n<p>The content of the field body is defined by the <a href=\"#!/api/Ext.form.field.Base-cfg-fieldSubTpl\" rel=\"Ext.form.field.Base-cfg-fieldSubTpl\" class=\"docClass\">fieldSubTpl</a> XTemplate, with its argument data\ncreated by the <a href=\"#!/api/Ext.form.field.Base-method-getSubTplData\" rel=\"Ext.form.field.Base-method-getSubTplData\" class=\"docClass\">getSubTplData</a> method. Override this template and/or method to create custom\nfield renderings.</p>\n\n<h1>Example usage:</h1>\n\n<pre class='inline-example '><code>// A simple subclass of Base that creates a HTML5 search field. Redirects to the\n// searchUrl when the Enter key is pressed.222\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Ext.form.SearchField', {\n    extend: '<a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">Ext.form.field.Base</a>',\n    alias: 'widget.searchfield',\n\n    inputType: 'search',\n\n    // Config defining the search URL\n    searchUrl: 'http://www.google.com/search?q={0}',\n\n    // Add specialkey listener\n    initComponent: function() {\n        this.callParent();\n        this.on('specialkey', this.checkEnterKey, this);\n    },\n\n    // Handle enter key presses, execute the search if the field has a value\n    checkEnterKey: function(field, e) {\n        var value = this.getValue();\n        if (e.getKey() === e.ENTER &amp;&amp; !<a href=\"#!/api/Ext-method-isEmpty\" rel=\"Ext-method-isEmpty\" class=\"docClass\">Ext.isEmpty</a>(value)) {\n            location.href = <a href=\"#!/api/Ext.String-method-format\" rel=\"Ext.String-method-format\" class=\"docClass\">Ext.String.format</a>(this.searchUrl, value);\n        }\n    }\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>', {\n    title: 'Base Example',\n    bodyPadding: 5,\n    width: 250,\n\n    // Fields will be arranged vertically, stretched to full width\n    layout: 'anchor',\n    defaults: {\n        anchor: '100%'\n    },\n    items: [{\n        xtype: 'searchfield',\n        fieldLabel: 'Search',\n        name: 'query'\n    }],\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_form_field_Base_cfg)","prototype":{"!proto":"Ext.Component.prototype","baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this component's element. This will also be prepended to elements within this\ncomponent like Panel's body will get a class <code>x-panel-body</code>. This means that if you create a subclass of Panel, and\nyou want it to get all the Panels styling for the element and the body, you leave the <code>baseCls</code> <code>x-panel</code> and use\n<code>componentCls</code> to add specific styling for this component.</p>\n"},"checkChangeBuffer":{"!type":"number","!doc":"<p>Defines a timeout in milliseconds for buffering <a href=\"#!/api/Ext.form.field.Base-cfg-checkChangeEvents\" rel=\"Ext.form.field.Base-cfg-checkChangeEvents\" class=\"docClass\">checkChangeEvents</a> that fire in rapid succession.\nDefaults to 50 milliseconds.</p>\n"},"checkChangeEvents":{"!type":"[string]","!doc":"<p>A list of event names that will be listened for on the field's <a href=\"#!/api/Ext.form.field.Base-property-inputEl\" rel=\"Ext.form.field.Base-property-inputEl\" class=\"docClass\">input element</a>, which will cause\nthe field's value to be checked for changes. If a change is detected, the <a href=\"#!/api/Ext.form.field.Base-event-change\" rel=\"Ext.form.field.Base-event-change\" class=\"docClass\">change event</a> will be\nfired, followed by validation if the <a href=\"#!/api/Ext.form.field.Base-cfg-validateOnChange\" rel=\"Ext.form.field.Base-cfg-validateOnChange\" class=\"docClass\">validateOnChange</a> option is enabled.</p>\n\n<p>Defaults to ['change', 'propertychange', 'keyup'] in Internet Explorer, and ['change', 'input', 'textInput', 'keyup',\n'dragdrop'] in other browsers. This catches all the ways that field values can be changed in most supported\nbrowsers; the only known exceptions at the time of writing are:</p>\n\n<ul>\n<li>Safari 3.2 and older: cut/paste in textareas via the context menu, and dragging text into textareas</li>\n<li>Opera 10 and 11: dragging text into text fields and textareas, and cut via the context menu in text fields\nand textareas</li>\n<li>Opera 9: Same as Opera 10 and 11, plus paste from context menu in text fields and textareas</li>\n</ul>\n\n\n<p>If you need to guarantee on-the-fly change notifications including these edge cases, you can call the\n<a href=\"#!/api/Ext.form.field.Base-method-checkChange\" rel=\"Ext.form.field.Base-method-checkChange\" class=\"docClass\">checkChange</a> method on a repeating interval, e.g. using <a href=\"#!/api/Ext.util.TaskManager\" rel=\"Ext.util.TaskManager\" class=\"docClass\">Ext.TaskManager</a>, or if the field is within\na <a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>, you can use the FormPanel's <a href=\"#!/api/Ext.form.Panel-cfg-pollForChanges\" rel=\"Ext.form.Panel-cfg-pollForChanges\" class=\"docClass\">Ext.form.Panel.pollForChanges</a> configuration to set up\nsuch a task automatically.</p>\n"},"componentLayout":{"!type":"string|?","!doc":"<p>The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout\nmanager which sizes a Component's internal structure in response to the Component being sized.</p>\n\n<p>Generally, developers will not use this configuration as all provided Components which need their internal\nelements sizing (Such as <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">input fields</a>) come with their own componentLayout managers.</p>\n\n<p>The <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used on instances of the base <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\nclass which simply sizes the Component's encapsulating element to the height and width specified in the\n<a href=\"#!/api/Ext.form.field.Base-method-setSize\" rel=\"Ext.form.field.Base-method-setSize\" class=\"docClass\">setSize</a> method.</p>\n"},"dirtyCls":{"!type":"string","!doc":"<p>The CSS class to use when the field value <a href=\"#!/api/Ext.form.field.Base-method-isDirty\" rel=\"Ext.form.field.Base-method-isDirty\" class=\"docClass\">is dirty</a>.</p>\n"},"fieldCls":{"!type":"string","!doc":"<p>The default CSS class for the field input</p>\n"},"fieldStyle":{"!type":"string","!doc":"<p>Optional CSS style(s) to be applied to the <a href=\"#!/api/Ext.form.field.Base-property-inputEl\" rel=\"Ext.form.field.Base-property-inputEl\" class=\"docClass\">field input element</a>. Should be a valid argument to\n<a href=\"#!/api/Ext.dom.Element-method-applyStyles\" rel=\"Ext.dom.Element-method-applyStyles\" class=\"docClass\">Ext.Element.applyStyles</a>. Defaults to undefined. See also the <a href=\"#!/api/Ext.form.field.Base-method-setFieldStyle\" rel=\"Ext.form.field.Base-method-setFieldStyle\" class=\"docClass\">setFieldStyle</a> method for changing\nthe style after initialization.</p>\n"},"fieldSubTpl":{"!type":"+Ext.XTemplate","!doc":"<p>The content of the field body is defined by this config option.</p>\n"},"focusCls":{"!type":"string","!doc":"<p>The CSS class to use when the field receives focus</p>\n"},"inputAttrTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\ninside the input element (as attributes). If an <code>XTemplate</code> is used, the component's\n<a href=\"#!/api/Ext.form.field.Base-method-getSubTplData\" rel=\"Ext.form.field.Base-method-getSubTplData\" class=\"docClass\">subTpl data</a> serves as the context.</p>\n"},"inputId":{"!type":"string","!doc":"<p>The id that will be given to the generated input DOM element. Defaults to an automatically generated id. If you\nconfigure this manually, you must make sure it is unique in the document.</p>\n"},"inputType":{"!type":"string","!doc":"<p>The type attribute for input fields -- e.g. radio, text, password, file. The extended types\nsupported by HTML5 inputs (url, email, etc.) may also be used, though using them will cause older browsers to\nfall back to 'text'.</p>\n\n<p>The type 'password' must be used to render that field type currently -- there is no separate Ext component for\nthat. You can use <a href=\"#!/api/Ext.form.field.File\" rel=\"Ext.form.field.File\" class=\"docClass\">Ext.form.field.File</a> which creates a custom-rendered file upload field, but if you want\na plain unstyled file input you can use a Base with inputType:'file'.</p>\n"},"invalidText":{"!type":"string","!doc":"<p>The error text to use when marking a field invalid and no message is provided</p>\n"},"name":{"!type":"string","!doc":"<p>The name of the field. This is used as the parameter name when including the field value\nin a <a href=\"#!/api/Ext.form.Basic-method-submit\" rel=\"Ext.form.Basic-method-submit\" class=\"docClass\">form submit()</a>. If no name is configured, it falls back to the <a href=\"#!/api/Ext.form.field.Base-cfg-inputId\" rel=\"Ext.form.field.Base-cfg-inputId\" class=\"docClass\">inputId</a>.\nTo prevent the field from being included in the form submit, set <a href=\"#!/api/Ext.form.field.Base-cfg-submitValue\" rel=\"Ext.form.field.Base-cfg-submitValue\" class=\"docClass\">submitValue</a> to false.</p>\n"},"readOnly":{"!type":"bool","!doc":"<p>true to mark the field as readOnly in HTML.</p>\n\n<p><strong>Note</strong>: this only sets the element's readOnly DOM attribute. Setting <code>readOnly=true</code>, for example, will not\ndisable triggering a ComboBox or Date; it gives you the option of forcing the user to choose via the trigger\nwithout typing in the text box. To hide the trigger use <code><a href=\"#!/api/Ext.form.field.Trigger-cfg-hideTrigger\" rel=\"Ext.form.field.Trigger-cfg-hideTrigger\" class=\"docClass\">hideTrigger</a></code>.</p>\n"},"readOnlyCls":{"!type":"string","!doc":"<p>The CSS class applied to the component's main element when it is <a href=\"#!/api/Ext.form.field.Base-cfg-readOnly\" rel=\"Ext.form.field.Base-cfg-readOnly\" class=\"docClass\">readOnly</a>.</p>\n"},"tabIndex":{"!type":"number","!doc":"<p>The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via\napplyTo</p>\n"},"validateOnBlur":{"!type":"bool","!doc":"<p>Whether the field should validate when it loses focus. This will cause fields to be validated\nas the user steps through the fields in the form regardless of whether they are making changes to those fields\nalong the way. See also <a href=\"#!/api/Ext.form.field.Base-cfg-validateOnChange\" rel=\"Ext.form.field.Base-cfg-validateOnChange\" class=\"docClass\">validateOnChange</a>.</p>\n"},"hasFocus":{"!type":"bool","!doc":"<p>private</p>\n"},"inputEl":{"!type":"+Ext.Element","!doc":"<p>The input Element for this Field. Only available after the field has been rendered.</p>\n"},"maskOnDisable":{"!type":"bool","!doc":"<p>This is an internal flag that you use when creating custom components. By default this is set to <code>true</code> which means\nthat every component gets a mask when it's disabled. Components like FieldContainer, FieldSet, Field, Button, Tab\noverride this property to <code>false</code> since they want to implement custom disable logic.</p>\n"},"stretchInputElFixed":{"!type":"bool","!doc":"<p>Instructs the layout to stretch the inputEl to 100% width when laying\nout under fixed conditions. Defaults to true for all fields except check/radio\nDoesn't seem worth it to introduce a whole new layout class just for this flag</p>\n"},"subTplInsertions":{"!type":"[?]"},"applyRenderSelectors":{"!type":"fn() -> !this","!doc":"<p>Sets references to elements inside the component. This applies <a href=\"#!/api/Ext.AbstractComponent-cfg-renderSelectors\" rel=\"Ext.AbstractComponent-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a>\nas well as <a href=\"#!/api/Ext.AbstractComponent-cfg-childEls\" rel=\"Ext.AbstractComponent-cfg-childEls\" class=\"docClass\">childEls</a>.</p>\n"},"clearInvalid":{"!type":"fn() -> !this","!doc":"<p>Clear any invalid styles/messages for this field.</p>\n\n<p><strong>Note</strong>: this method does not cause the Field's <a href=\"#!/api/Ext.form.field.Base-method-validate\" rel=\"Ext.form.field.Base-method-validate\" class=\"docClass\">validate</a> or <a href=\"#!/api/Ext.form.field.Base-method-isValid\" rel=\"Ext.form.field.Base-method-isValid\" class=\"docClass\">isValid</a> methods to return <code>true</code>\nif the value does not <em>pass</em> validation. So simply clearing a field's errors will not necessarily allow\nsubmission of forms submitted with the <a href=\"#!/api/Ext.form.action.Submit-cfg-clientValidation\" rel=\"Ext.form.action.Submit-cfg-clientValidation\" class=\"docClass\">Ext.form.action.Submit.clientValidation</a> option set.</p>\n"},"doComponentLayout":{"!type":"fn() -> +Ext.container.Container","!doc":"<p>This method needs to be called whenever you change something on this component that requires the Component's\nlayout to be recalculated.</p>\n"},"fireKey":{"!type":"fn(e: ?) -> !this","!doc":"<p>private</p>\n"},"getActionEl":{"!type":"fn() -> !this","!doc":"<p>Deprecate 5.0</p>\n"},"getFieldStyle":{"!type":"fn() -> !this"},"getFocusEl":{"!type":"fn() -> +undefined","!doc":"<p>Returns the focus holder element associated with this Component. At the Component base class level, this function returns <code>undefined</code>.</p>\n\n<p>Subclasses which use embedded focusable elements (such as Window, Field and Button) should override this\nfor use by the <a href=\"#!/api/Ext.Component-method-focus\" rel=\"Ext.Component-method-focus\" class=\"docClass\">focus</a> method.</p>\n\n<p>Containers which need to participate in the <a href=\"#!/api/Ext.FocusManager\" rel=\"Ext.FocusManager\" class=\"docClass\">FocusManager</a>'s navigation and Container focusing scheme also\nneed to return a <code>focusEl</code>, although focus is only listened for in this case if the <a href=\"#!/api/Ext.FocusManager\" rel=\"Ext.FocusManager\" class=\"docClass\">FocusManager</a> is <a href=\"#!/api/Ext.FocusManager-method-enable\" rel=\"Ext.FocusManager-method-enable\" class=\"docClass\">enable</a>d.</p>\n"},"getInputId":{"!type":"fn() -> !this","!doc":"<p>Returns the input id for this field. If none was specified via the <a href=\"#!/api/Ext.form.field.Base-cfg-inputId\" rel=\"Ext.form.field.Base-cfg-inputId\" class=\"docClass\">inputId</a> config, then an id will be\nautomatically generated.</p>\n"},"getRawValue":{"!type":"fn() -> string","!doc":"<p>Returns the raw value of the field, without performing any normalization, conversion, or validation. To get a\nnormalized and converted value see <a href=\"#!/api/Ext.form.field.Base-method-getValue\" rel=\"Ext.form.field.Base-method-getValue\" class=\"docClass\">getValue</a>.</p>\n"},"getSubTplData":{"!type":"fn() -> ?","!doc":"<p>Creates and returns the data object to be used when rendering the <a href=\"#!/api/Ext.form.field.Base-cfg-fieldSubTpl\" rel=\"Ext.form.field.Base-cfg-fieldSubTpl\" class=\"docClass\">fieldSubTpl</a>.</p>\n"},"getSubTplMarkup":{"!type":"fn() -> !this","!doc":"<p>Gets the markup to be inserted into the outer template's bodyEl. For fields this is the actual input element.</p>\n"},"getSubmitData":{"!type":"fn() -> ?","!doc":"<p>private override to use getSubmitValue() as a convenience</p>\n"},"getSubmitValue":{"!type":"fn() -> string","!doc":"<p>Returns the value that would be included in a standard form submit for this field. This will be combined with the\nfield's name to form a name=value pair in the <a href=\"#!/api/Ext.form.field.Base-method-getSubmitData\" rel=\"Ext.form.field.Base-method-getSubmitData\" class=\"docClass\">submitted parameters</a>. If an empty string is\nreturned then just the name= will be submitted; if null is returned then nothing will be submitted.</p>\n\n<p>Note that the value returned will have been <a href=\"#!/api/Ext.form.field.Base-method-processRawValue\" rel=\"Ext.form.field.Base-method-processRawValue\" class=\"docClass\">processed</a> but may or may not have been\nsuccessfully <a href=\"#!/api/Ext.form.field.Base-method-validate\" rel=\"Ext.form.field.Base-method-validate\" class=\"docClass\">validated</a>.</p>\n"},"getValue":{"!type":"fn() -> ?","!doc":"<p>Returns the current data value of the field. The type of value returned is particular to the type of the\nparticular field (e.g. a Date object for <a href=\"#!/api/Ext.form.field.Date\" rel=\"Ext.form.field.Date\" class=\"docClass\">Ext.form.field.Date</a>), as the result of calling <a href=\"#!/api/Ext.form.field.Base-method-rawToValue\" rel=\"Ext.form.field.Base-method-rawToValue\" class=\"docClass\">rawToValue</a> on\nthe field's <a href=\"#!/api/Ext.form.field.Base-method-processRawValue\" rel=\"Ext.form.field.Base-method-processRawValue\" class=\"docClass\">processed</a> String value. To return the raw String value, see <a href=\"#!/api/Ext.form.field.Base-method-getRawValue\" rel=\"Ext.form.field.Base-method-getRawValue\" class=\"docClass\">getRawValue</a>.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"initEvents":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"initRenderData":{"!type":"fn() -> ?","!doc":"<p>Initialized the renderData to be used when rendering the renderTpl.</p>\n"},"initRenderTpl":{"!type":"fn() -> +Ext.XTemplate","!doc":"<p>Initializes the renderTpl.</p>\n"},"isFileUpload":{"!type":"fn() -> bool","!doc":"<p>Returns whether this Field is a file upload field; if it returns true, forms will use special techniques for\n<a href=\"#!/api/Ext.form.Basic-method-submit\" rel=\"Ext.form.Basic-method-submit\" class=\"docClass\">submitting the form</a> via AJAX. See <a href=\"#!/api/Ext.form.Basic-method-hasUpload\" rel=\"Ext.form.Basic-method-hasUpload\" class=\"docClass\">Ext.form.Basic.hasUpload</a> for details. If\nthis returns true, the <a href=\"#!/api/Ext.form.field.Base-method-extractFileInput\" rel=\"Ext.form.field.Base-method-extractFileInput\" class=\"docClass\">extractFileInput</a> method must also be implemented to return the corresponding file\ninput element.</p>\n"},"isValid":{"!type":"fn() -> bool","!doc":"<p>Returns whether or not the field value is currently valid by <a href=\"#!/api/Ext.form.field.Base-method-getErrors\" rel=\"Ext.form.field.Base-method-getErrors\" class=\"docClass\">validating</a> the\n<a href=\"#!/api/Ext.form.field.Base-method-processRawValue\" rel=\"Ext.form.field.Base-method-processRawValue\" class=\"docClass\">processed raw value</a> of the field. <strong>Note</strong>: <a href=\"#!/api/Ext.form.field.Base-cfg-disabled\" rel=\"Ext.form.field.Base-cfg-disabled\" class=\"docClass\">disabled</a> fields are\nalways treated as valid.</p>\n"},"markInvalid":{"!type":"fn(errors: string|[string]) -> !this","!doc":"<p>Display one or more error messages associated with this field, using <a href=\"#!/api/Ext.form.field.Base-cfg-msgTarget\" rel=\"Ext.form.field.Base-cfg-msgTarget\" class=\"docClass\">msgTarget</a> to determine how to\ndisplay the messages and applying <a href=\"#!/api/Ext.form.field.Base-cfg-invalidCls\" rel=\"Ext.form.field.Base-cfg-invalidCls\" class=\"docClass\">invalidCls</a> to the field's UI element.</p>\n\n<p><strong>Note</strong>: this method does not cause the Field's <a href=\"#!/api/Ext.form.field.Base-method-validate\" rel=\"Ext.form.field.Base-method-validate\" class=\"docClass\">validate</a> or <a href=\"#!/api/Ext.form.field.Base-method-isValid\" rel=\"Ext.form.field.Base-method-isValid\" class=\"docClass\">isValid</a> methods to return <code>false</code>\nif the value does <em>pass</em> validation. So simply marking a Field as invalid will not prevent submission of forms\nsubmitted with the <a href=\"#!/api/Ext.form.action.Submit-cfg-clientValidation\" rel=\"Ext.form.action.Submit-cfg-clientValidation\" class=\"docClass\">Ext.form.action.Submit.clientValidation</a> option set.</p>\n"},"onBoxReady":{"!type":"fn() -> !this"},"onDirtyChange":{"!type":"fn(isDirty: bool) -> !this","!doc":"<p>Called when the field's dirty state changes. Adds/removes the <a href=\"#!/api/Ext.form.field.Base-cfg-dirtyCls\" rel=\"Ext.form.field.Base-cfg-dirtyCls\" class=\"docClass\">dirtyCls</a> on the main element.</p>\n"},"onDisable":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"onEnable":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"onRender":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"processRawValue":{"!type":"fn(value: ?) -> ?","!doc":"<p>Performs any necessary manipulation of a raw field value to prepare it for <a href=\"#!/api/Ext.form.field.Base-method-rawToValue\" rel=\"Ext.form.field.Base-method-rawToValue\" class=\"docClass\">conversion</a> and/or\n<a href=\"#!/api/Ext.form.field.Base-method-validate\" rel=\"Ext.form.field.Base-method-validate\" class=\"docClass\">validation</a>, for instance stripping out ignored characters. In the base implementation it does\nnothing; individual subclasses may override this as needed.</p>\n"},"rawToValue":{"!type":"fn(rawValue: ?) -> ?","!doc":"<p>Converts a raw input field value into a mixed-type value that is suitable for this particular field type. This\nallows controlling the normalization and conversion of user-entered values into field-type-appropriate values,\ne.g. a Date object for <a href=\"#!/api/Ext.form.field.Date\" rel=\"Ext.form.field.Date\" class=\"docClass\">Ext.form.field.Date</a>, and is invoked by <a href=\"#!/api/Ext.form.field.Base-method-getValue\" rel=\"Ext.form.field.Base-method-getValue\" class=\"docClass\">getValue</a>.</p>\n\n<p>It is up to individual implementations to decide how to handle raw values that cannot be successfully converted\nto the desired object type.</p>\n\n<p>See <a href=\"#!/api/Ext.form.field.Base-method-valueToRaw\" rel=\"Ext.form.field.Base-method-valueToRaw\" class=\"docClass\">valueToRaw</a> for the opposite conversion.</p>\n\n<p>The base implementation does no conversion, returning the raw value untouched.</p>\n"},"renderActiveError":{"!type":"fn() -> !this","!doc":"<p>Overrides the method from the <a href=\"#!/api/Ext.form.Labelable\" rel=\"Ext.form.Labelable\" class=\"docClass\">Ext.form.Labelable</a> mixin to also add the invalidCls to the inputEl,\nas that is required for proper styling in IE with nested fields (due to lack of child selector)</p>\n"},"setError":{"!type":"fn(error: string) -> !this","!doc":"<p>Set the current error state</p>\n"},"setFieldStyle":{"!type":"fn(style: string|?|fn()) -> !this","!doc":"<p>Set the <a href=\"#!/api/Ext.form.field.Base-cfg-fieldStyle\" rel=\"Ext.form.field.Base-cfg-fieldStyle\" class=\"docClass\">CSS style</a> of the <a href=\"#!/api/Ext.form.field.Base-property-inputEl\" rel=\"Ext.form.field.Base-property-inputEl\" class=\"docClass\">field input element</a>.</p>\n"},"setRawValue":{"!type":"fn(value: ?) -> ?","!doc":"<p>Sets the field's raw value directly, bypassing <a href=\"#!/api/Ext.form.field.Base-method-valueToRaw\" rel=\"Ext.form.field.Base-method-valueToRaw\" class=\"docClass\">value conversion</a>, change detection, and\nvalidation. To set the value with these additional inspections see <a href=\"#!/api/Ext.form.field.Base-method-setValue\" rel=\"Ext.form.field.Base-method-setValue\" class=\"docClass\">setValue</a>.</p>\n"},"setReadOnly":{"!type":"fn(readOnly: bool) -> !this","!doc":"<p>Sets the read only state of this field.</p>\n"},"setValue":{"!type":"fn(value: ?) -> +Ext.form.field.Field","!doc":"<p>Sets a data value into the field and runs the change detection and validation. To set the value directly\nwithout these inspections see <a href=\"#!/api/Ext.form.field.Base-method-setRawValue\" rel=\"Ext.form.field.Base-method-setRawValue\" class=\"docClass\">setRawValue</a>.</p>\n"},"transformRawValue":{"!type":"fn(value: ?) -> ?","!doc":"<p>Transform the raw value before it is set</p>\n"},"validateValue":{"!type":"fn(value: ?) -> bool","!doc":"<p>Uses <a href=\"#!/api/Ext.form.field.Base-method-getErrors\" rel=\"Ext.form.field.Base-method-getErrors\" class=\"docClass\">getErrors</a> to build an array of validation errors. If any errors are found, they are passed to\n<a href=\"#!/api/Ext.form.field.Base-method-markInvalid\" rel=\"Ext.form.field.Base-method-markInvalid\" class=\"docClass\">markInvalid</a> and false is returned, otherwise true is returned.</p>\n\n<p>Previously, subclasses were invited to provide an implementation of this to process validations - from 3.2\nonwards <a href=\"#!/api/Ext.form.field.Base-method-getErrors\" rel=\"Ext.form.field.Base-method-getErrors\" class=\"docClass\">getErrors</a> should be overridden instead.</p>\n"},"valueToRaw":{"!type":"fn(value: ?) -> ?","!doc":"<p>Converts a mixed-type value to a raw representation suitable for displaying in the field. This allows controlling\nhow value objects passed to <a href=\"#!/api/Ext.form.field.Base-method-setValue\" rel=\"Ext.form.field.Base-method-setValue\" class=\"docClass\">setValue</a> are shown to the user, including localization. For instance, for a\n<a href=\"#!/api/Ext.form.field.Date\" rel=\"Ext.form.field.Date\" class=\"docClass\">Ext.form.field.Date</a>, this would control how a Date object passed to <a href=\"#!/api/Ext.form.field.Base-method-setValue\" rel=\"Ext.form.field.Base-method-setValue\" class=\"docClass\">setValue</a> would be converted\nto a String for display in the field.</p>\n\n<p>See <a href=\"#!/api/Ext.form.field.Base-method-rawToValue\" rel=\"Ext.form.field.Base-method-rawToValue\" class=\"docClass\">rawToValue</a> for the opposite conversion.</p>\n\n<p>The base implementation simply does a standard toString conversion, and converts <a href=\"#!/api/Ext-method-isEmpty\" rel=\"Ext-method-isEmpty\" class=\"docClass\">empty values</a>\nto an empty string.</p>\n"},"specialkey":{"!type":"fn(this: +Ext.form.field.Base, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. To handle other keys\nsee <a href=\"#!/api/Ext.util.KeyMap\" rel=\"Ext.util.KeyMap\" class=\"docClass\">Ext.util.KeyMap</a>. You can check <a href=\"#!/api/Ext.EventObject-method-getKey\" rel=\"Ext.EventObject-method-getKey\" class=\"docClass\">Ext.EventObject.getKey</a> to determine which key was\npressed. For example:</p>\n\n<pre><code>var form = new <a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>({\n    ...\n    items: [{\n            fieldLabel: 'Field 1',\n            name: 'field1',\n            allowBlank: false\n        },{\n            fieldLabel: 'Field 2',\n            name: 'field2',\n            listeners: {\n                specialkey: function(field, e){\n                    // e.HOME, e.END, e.PAGE_UP, e.PAGE_DOWN,\n                    // e.TAB, e.ESC, arrow keys: e.LEFT, e.RIGHT, e.UP, e.DOWN\n                    if (e.<a href=\"#!/api/Ext.EventObject-method-getKey\" rel=\"Ext.EventObject-method-getKey\" class=\"docClass\">getKey()</a> == e.ENTER) {\n                        var form = field.up('form').getForm();\n                        form.submit();\n                    }\n                }\n            }\n        }\n    ],\n    ...\n});\n</code></pre>\n"},"writeablechange":{"!type":"fn(this: +Ext.form.field.Base, Read: bool, eOpts: ?)","!doc":"<p>Fires when this field changes its read-only status.</p>\n"}}},"Checkbox":{"!doc":"<p>Single checkbox field. Can be used as a direct replacement for traditional checkbox fields. Also serves as a\nparent class for <a href=\"#!/api/Ext.form.field.Radio\" rel=\"Ext.form.field.Radio\" class=\"docClass\">radio buttons</a>.</p>\n\n<h1>Labeling</h1>\n\n<p>In addition to the <a href=\"#!/api/Ext.form.Labelable\" rel=\"Ext.form.Labelable\" class=\"docClass\">standard field labeling options</a>, checkboxes\nmay be given an optional <a href=\"#!/api/Ext.form.field.Checkbox-cfg-boxLabel\" rel=\"Ext.form.field.Checkbox-cfg-boxLabel\" class=\"docClass\">boxLabel</a> which will be displayed immediately after checkbox. Also see\n<a href=\"#!/api/Ext.form.CheckboxGroup\" rel=\"Ext.form.CheckboxGroup\" class=\"docClass\">Ext.form.CheckboxGroup</a> for a convenient method of grouping related checkboxes.</p>\n\n<h1>Values</h1>\n\n<p>The main value of a checkbox is a boolean, indicating whether or not the checkbox is checked.\nThe following values will check the checkbox:</p>\n\n<ul>\n<li><code>true</code></li>\n<li><code>'true'</code></li>\n<li><code>'1'</code></li>\n<li><code>'on'</code></li>\n</ul>\n\n\n<p>Any other value will uncheck the checkbox.</p>\n\n<p>In addition to the main boolean value, you may also specify a separate <a href=\"#!/api/Ext.form.field.Checkbox-cfg-inputValue\" rel=\"Ext.form.field.Checkbox-cfg-inputValue\" class=\"docClass\">inputValue</a>. This will be\nsent as the parameter value when the form is <a href=\"#!/api/Ext.form.Basic-method-submit\" rel=\"Ext.form.Basic-method-submit\" class=\"docClass\">submitted</a>. You will want to set\nthis value if you have multiple checkboxes with the same <a href=\"#!/api/Ext.form.field.Checkbox-cfg-name\" rel=\"Ext.form.field.Checkbox-cfg-name\" class=\"docClass\">name</a>. If not specified, the value <code>on</code>\nwill be used.</p>\n\n<h1>Example usage</h1>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>', {\n    bodyPadding: 10,\n    width: 300,\n    title: 'Pizza Order',\n    items: [\n        {\n            xtype: 'fieldcontainer',\n            fieldLabel: 'Toppings',\n            defaultType: 'checkboxfield',\n            items: [\n                {\n                    boxLabel  : 'Anchovies',\n                    name      : 'topping',\n                    inputValue: '1',\n                    id        : 'checkbox1'\n                }, {\n                    boxLabel  : 'Artichoke Hearts',\n                    name      : 'topping',\n                    inputValue: '2',\n                    checked   : true,\n                    id        : 'checkbox2'\n                }, {\n                    boxLabel  : 'Bacon',\n                    name      : 'topping',\n                    inputValue: '3',\n                    id        : 'checkbox3'\n                }\n            ]\n        }\n    ],\n    bbar: [\n        {\n            text: 'Select Bacon',\n            handler: function() {\n                <a href=\"#!/api/Ext-method-getCmp\" rel=\"Ext-method-getCmp\" class=\"docClass\">Ext.getCmp</a>('checkbox3').setValue(true);\n            }\n        },\n        '-',\n        {\n            text: 'Select All',\n            handler: function() {\n                <a href=\"#!/api/Ext-method-getCmp\" rel=\"Ext-method-getCmp\" class=\"docClass\">Ext.getCmp</a>('checkbox1').setValue(true);\n                <a href=\"#!/api/Ext-method-getCmp\" rel=\"Ext-method-getCmp\" class=\"docClass\">Ext.getCmp</a>('checkbox2').setValue(true);\n                <a href=\"#!/api/Ext-method-getCmp\" rel=\"Ext-method-getCmp\" class=\"docClass\">Ext.getCmp</a>('checkbox3').setValue(true);\n            }\n        },\n        {\n            text: 'Deselect All',\n            handler: function() {\n                <a href=\"#!/api/Ext-method-getCmp\" rel=\"Ext-method-getCmp\" class=\"docClass\">Ext.getCmp</a>('checkbox1').setValue(false);\n                <a href=\"#!/api/Ext-method-getCmp\" rel=\"Ext-method-getCmp\" class=\"docClass\">Ext.getCmp</a>('checkbox2').setValue(false);\n                <a href=\"#!/api/Ext-method-getCmp\" rel=\"Ext-method-getCmp\" class=\"docClass\">Ext.getCmp</a>('checkbox3').setValue(false);\n            }\n        }\n    ],\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_form_field_Checkbox_cfg)","prototype":{"!proto":"Ext.form.field.Base.prototype","afterBoxLabelTextTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nafter the box label text. If an <code>XTemplate</code> is used, the component's\n<a href=\"#!/api/Ext.form.field.Base-method-getSubTplData\" rel=\"Ext.form.field.Base-method-getSubTplData\" class=\"docClass\">subTpl data</a> serves as the context.</p>\n"},"afterBoxLabelTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nafter the box label element. If an <code>XTemplate</code> is used, the component's\n<a href=\"#!/api/Ext.form.field.Base-method-getSubTplData\" rel=\"Ext.form.field.Base-method-getSubTplData\" class=\"docClass\">subTpl data</a> serves as the context.</p>\n"},"beforeBoxLabelTextTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nbefore the box label text. If an <code>XTemplate</code> is used, the component's\n<a href=\"#!/api/Ext.form.field.Base-method-getSubTplData\" rel=\"Ext.form.field.Base-method-getSubTplData\" class=\"docClass\">subTpl data</a> serves as the context.</p>\n"},"beforeBoxLabelTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nbefore the box label element. If an <code>XTemplate</code> is used, the component's\n<a href=\"#!/api/Ext.form.field.Base-method-getSubTplData\" rel=\"Ext.form.field.Base-method-getSubTplData\" class=\"docClass\">subTpl data</a> serves as the context.</p>\n"},"boxLabel":{"!type":"string","!doc":"<p>An optional text label that will appear next to the checkbox. Whether it appears before or after the checkbox is\ndetermined by the <a href=\"#!/api/Ext.form.field.Checkbox-cfg-boxLabelAlign\" rel=\"Ext.form.field.Checkbox-cfg-boxLabelAlign\" class=\"docClass\">boxLabelAlign</a> config.</p>\n"},"boxLabelAlign":{"!type":"string","!doc":"<p>The position relative to the checkbox where the <a href=\"#!/api/Ext.form.field.Checkbox-cfg-boxLabel\" rel=\"Ext.form.field.Checkbox-cfg-boxLabel\" class=\"docClass\">boxLabel</a> should appear. Recognized values are 'before'\nand 'after'.</p>\n"},"boxLabelAttrTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\ninside the box label element (as attributes). If an <code>XTemplate</code> is used, the component's\n<a href=\"#!/api/Ext.form.field.Base-method-getSubTplData\" rel=\"Ext.form.field.Base-method-getSubTplData\" class=\"docClass\">subTpl data</a> serves as the context.</p>\n"},"boxLabelCls":{"!type":"string","!doc":"<p>The CSS class to be applied to the <a href=\"#!/api/Ext.form.field.Checkbox-cfg-boxLabel\" rel=\"Ext.form.field.Checkbox-cfg-boxLabel\" class=\"docClass\">boxLabel</a> element</p>\n"},"checkChangeEvents":{"!type":"[string]","!doc":"<p>private overrides</p>\n"},"checked":{"!type":"bool","!doc":"<p>true if the checkbox should render initially checked</p>\n"},"checkedCls":{"!type":"string","!doc":"<p>The CSS class(es) added to the component's main element when it is in the checked state.\nYou can add your own class (checkedCls='myClass x-form-cb-checked') or replace the default\nclass altogether (checkedCls='myClass').</p>\n"},"componentLayout":{"!type":"string|?","!doc":"<p>The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout\nmanager which sizes a Component's internal structure in response to the Component being sized.</p>\n\n<p>Generally, developers will not use this configuration as all provided Components which need their internal\nelements sizing (Such as <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">input fields</a>) come with their own componentLayout managers.</p>\n\n<p>The <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used on instances of the base <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\nclass which simply sizes the Component's encapsulating element to the height and width specified in the\n<a href=\"#!/api/Ext.form.field.Checkbox-method-setSize\" rel=\"Ext.form.field.Checkbox-method-setSize\" class=\"docClass\">setSize</a> method.</p>\n"},"fieldCls":{"!type":"string","!doc":"<p>The default CSS class for the checkbox</p>\n"},"fieldSubTpl":{"!type":"+Ext.XTemplate","!doc":"<p>note: {id} here is really {inputId}, but {cmpId} is available</p>\n"},"focusCls":{"!type":"string","!doc":"<p>The CSS class to use when the checkbox receives focus</p>\n"},"handler":{"!type":"fn()","!doc":"<p>A function called when the <a href=\"#!/api/Ext.form.field.Checkbox-cfg-checked\" rel=\"Ext.form.field.Checkbox-cfg-checked\" class=\"docClass\">checked</a> value changes (can be used instead of handling the <a href=\"#!/api/Ext.form.field.Checkbox-event-change\" rel=\"Ext.form.field.Checkbox-event-change\" class=\"docClass\">change event</a>).</p>\n"},"inputType":{"!type":"string","!doc":"<p>The type attribute for input fields -- e.g. radio, text, password, file. The extended types\nsupported by HTML5 inputs (url, email, etc.) may also be used, though using them will cause older browsers to\nfall back to 'text'.</p>\n\n<p>The type 'password' must be used to render that field type currently -- there is no separate Ext component for\nthat. You can use <a href=\"#!/api/Ext.form.field.File\" rel=\"Ext.form.field.File\" class=\"docClass\">Ext.form.field.File</a> which creates a custom-rendered file upload field, but if you want\na plain unstyled file input you can use a Base with inputType:'file'.</p>\n"},"inputValue":{"!type":"string","!doc":"<p>The value that should go into the generated input element's value attribute and should be used as the parameter\nvalue when submitting as part of a form.</p>\n"},"scope":{"!type":"?","!doc":"<p>An object to use as the scope ('this' reference) of the <a href=\"#!/api/Ext.form.field.Checkbox-cfg-handler\" rel=\"Ext.form.field.Checkbox-cfg-handler\" class=\"docClass\">handler</a> function.</p>\n\n<p>Defaults to this Checkbox.</p>\n"},"uncheckedValue":{"!type":"string","!doc":"<p>If configured, this will be submitted as the checkbox's value during form submit if the checkbox is unchecked. By\ndefault this is undefined, which results in nothing being submitted for the checkbox field when the form is\nsubmitted (the default behavior of HTML checkboxes).</p>\n"},"boxLabelEl":{"!type":"+Ext.Element","!doc":"<p>A reference to the label element created for the <a href=\"#!/api/Ext.form.field.Checkbox-cfg-boxLabel\" rel=\"Ext.form.field.Checkbox-cfg-boxLabel\" class=\"docClass\">boxLabel</a>. Only present if the component has been\nrendered and has a boxLabel configured.</p>\n"},"childEls":{"!type":"[?]"},"extraFieldBodyCls":{"!type":"string","!doc":"<p>private</p>\n"},"inputCls":{"!type":"string","!doc":"<p>the form-cb css class is for styling shared between checkbox and subclasses (radio)</p>\n"},"inputTypeAttr":{"!type":"string","!doc":"<p>private - the actual input type to use. inputType is just used to generate a class name</p>\n"},"isCheckbox":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated Checkbox, or subclass thereof.</p>\n"},"onRe":{"!type":"+RegExp","!doc":"<p>private</p>\n"},"originalValue":{"!type":"?","!doc":"<p>The original value of the field as configured in the <a href=\"#!/api/Ext.form.field.Checkbox-cfg-checked\" rel=\"Ext.form.field.Checkbox-cfg-checked\" class=\"docClass\">checked</a> configuration, or as loaded by the last\nform load operation if the form's <a href=\"#!/api/Ext.form.Basic-cfg-trackResetOnLoad\" rel=\"Ext.form.Basic-cfg-trackResetOnLoad\" class=\"docClass\">trackResetOnLoad</a> setting is <code>true</code>.</p>\n"},"stretchInputElFixed":{"!type":"bool","!doc":"<p>inputEl should always retain the same size, never stretch</p>\n"},"subTplInsertions":{"!type":"[?]"},"beforeDestroy":{"!type":"fn() -> !this","!doc":"<p>inherit docs</p>\n"},"getElConfig":{"!type":"fn() -> !this"},"getFieldStyle":{"!type":"fn() -> !this"},"getFormId":{"!type":"fn() -> !this"},"getManager":{"!type":"fn() -> !this","!doc":"<p>inherit docs</p>\n"},"getRawValue":{"!type":"fn() -> bool","!doc":"<p>Returns the checked state of the checkbox.</p>\n"},"getSubTplData":{"!type":"fn() -> ?","!doc":"<p>Creates and returns the data object to be used when rendering the <a href=\"#!/api/Ext.form.field.Checkbox-cfg-fieldSubTpl\" rel=\"Ext.form.field.Checkbox-cfg-fieldSubTpl\" class=\"docClass\">fieldSubTpl</a>.</p>\n"},"getSubmitValue":{"!type":"fn() -> string","!doc":"<p>Returns the submit value for the checkbox which can be used when submitting forms.</p>\n"},"getValue":{"!type":"fn() -> bool","!doc":"<p>Returns the checked state of the checkbox.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"initEvents":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"initValue":{"!type":"fn() -> !this","!doc":"<p>Initializes the field's value based on the initial config.</p>\n"},"isChecked":{"!type":"fn(rawValue: ?, inputValue: ?) -> !this"},"onBoxClick":{"!type":"fn(e: ?) -> !this","!doc":"<p>Handle click on the checkbox button</p>\n"},"onChange":{"!type":"fn(newVal: ?, oldVal: ?) -> !this","!doc":"<p>Called when the checkbox's checked state changes. Invokes the <a href=\"#!/api/Ext.form.field.Checkbox-cfg-handler\" rel=\"Ext.form.field.Checkbox-cfg-handler\" class=\"docClass\">handler</a> callback\nfunction if specified.</p>\n"},"onEnable":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"resetOriginalValue":{"!type":"fn(fromBoxInGroup: ?) -> !this","!doc":"<p>Resets the field's <a href=\"#!/api/Ext.form.field.Checkbox-property-originalValue\" rel=\"Ext.form.field.Checkbox-property-originalValue\" class=\"docClass\">originalValue</a> property so it matches the current <a href=\"#!/api/Ext.form.field.Checkbox-method-getValue\" rel=\"Ext.form.field.Checkbox-method-getValue\" class=\"docClass\">value</a>. This is\ncalled by <a href=\"#!/api/Ext.form.Basic\" rel=\"Ext.form.Basic\" class=\"docClass\">Ext.form.Basic</a>.<a href=\"#!/api/Ext.form.Basic-method-setValues\" rel=\"Ext.form.Basic-method-setValues\" class=\"docClass\">setValues</a> if the form's\n<a href=\"#!/api/Ext.form.Basic-cfg-trackResetOnLoad\" rel=\"Ext.form.Basic-cfg-trackResetOnLoad\" class=\"docClass\">trackResetOnLoad</a> property is set to true.</p>\n"},"setBoxLabel":{"!type":"fn(boxLabel: string) -> !this","!doc":"<p>Sets the <a href=\"#!/api/Ext.form.field.Checkbox-cfg-boxLabel\" rel=\"Ext.form.field.Checkbox-cfg-boxLabel\" class=\"docClass\">boxLabel</a> for this checkbox.</p>\n"},"setRawValue":{"!type":"fn(value: bool|string|number) -> bool","!doc":"<p>Sets the checked state of the checkbox.</p>\n"},"setReadOnly":{"!type":"fn(readOnly: ?) -> !this","!doc":"<p>Sets the read only state of this field.</p>\n"},"setValue":{"!type":"fn(checked: bool|string) -> +Ext.form.field.Checkbox","!doc":"<p>Sets the checked state of the checkbox, and invokes change detection.</p>\n"},"valueToRaw":{"!type":"fn(value: ?) -> ?","!doc":"<p>private</p>\n"}}},"ComboBox":{"!doc":"<p>A combobox control with support for autocomplete, remote loading, and many other features.</p>\n\n<p>A ComboBox is like a combination of a traditional HTML text <code>&lt;input&gt;</code> field and a <code>&lt;select&gt;</code>\nfield; the user is able to type freely into the field, and/or pick values from a dropdown selection\nlist. The user can input any value by default, even if it does not appear in the selection list;\nto prevent free-form values and restrict them to items in the list, set <a href=\"#!/api/Ext.form.field.ComboBox-cfg-forceSelection\" rel=\"Ext.form.field.ComboBox-cfg-forceSelection\" class=\"docClass\">forceSelection</a> to <code>true</code>.</p>\n\n<p>The selection list's options are populated from any <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>, including remote\nstores. The data items in the store are mapped to each option's displayed text and backing value via\nthe <a href=\"#!/api/Ext.form.field.ComboBox-cfg-valueField\" rel=\"Ext.form.field.ComboBox-cfg-valueField\" class=\"docClass\">valueField</a> and <a href=\"#!/api/Ext.form.field.ComboBox-cfg-displayField\" rel=\"Ext.form.field.ComboBox-cfg-displayField\" class=\"docClass\">displayField</a> configurations, respectively.</p>\n\n<p>If your store is not remote, i.e. it depends only on local data and is loaded up front, you should be\nsure to set the <a href=\"#!/api/Ext.form.field.ComboBox-cfg-queryMode\" rel=\"Ext.form.field.ComboBox-cfg-queryMode\" class=\"docClass\">queryMode</a> to <code>'local'</code>, as this will improve responsiveness for the user.</p>\n\n<h1>Example usage:</h1>\n\n<pre class='inline-example '><code>// The data store containing the list of states\nvar states = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    fields: ['abbr', 'name'],\n    data : [\n        {\"abbr\":\"AL\", \"name\":\"Alabama\"},\n        {\"abbr\":\"AK\", \"name\":\"Alaska\"},\n        {\"abbr\":\"AZ\", \"name\":\"Arizona\"}\n        //...\n    ]\n});\n\n// Create the combo box, attached to the states data store\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.field.ComboBox\" rel=\"Ext.form.field.ComboBox\" class=\"docClass\">Ext.form.ComboBox</a>', {\n    fieldLabel: 'Choose State',\n    store: states,\n    queryMode: 'local',\n    displayField: 'name',\n    valueField: 'abbr',\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n\n<h1>Events</h1>\n\n<p>To do something when something in ComboBox is selected, configure the select event:</p>\n\n<pre><code>var cb = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.field.ComboBox\" rel=\"Ext.form.field.ComboBox\" class=\"docClass\">Ext.form.ComboBox</a>', {\n    // all of your config options\n    listeners:{\n         scope: yourScope,\n         'select': yourFunction\n    }\n});\n\n// Alternatively, you can assign events after the object is created:\nvar cb = new <a href=\"#!/api/Ext.form.field.ComboBox\" rel=\"Ext.form.field.ComboBox\" class=\"docClass\">Ext.form.field.ComboBox</a>(yourOptions);\ncb.on('select', yourFunction, yourScope);\n</code></pre>\n\n<h1>Multiple Selection</h1>\n\n<p>ComboBox also allows selection of multiple items from the list; to enable multi-selection set the\n<a href=\"#!/api/Ext.form.field.ComboBox-cfg-multiSelect\" rel=\"Ext.form.field.ComboBox-cfg-multiSelect\" class=\"docClass\">multiSelect</a> config to <code>true</code>.</p>\n\n<h1>Filtered Stores</h1>\n\n<p>If you have a local store that is already filtered, you can use the <a href=\"#!/api/Ext.form.field.ComboBox-property-lastQuery\" rel=\"Ext.form.field.ComboBox-property-lastQuery\" class=\"docClass\">lastQuery</a> config option\nto prevent the store from having the filter being cleared on first expand.</p>\n\n<h2>Customized combobox</h2>\n\n<p>Both the text shown in dropdown menu and text field can be easily customized:</p>\n\n<pre class='inline-example '><code>var states = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    fields: ['abbr', 'name'],\n    data : [\n        {\"abbr\":\"AL\", \"name\":\"Alabama\"},\n        {\"abbr\":\"AK\", \"name\":\"Alaska\"},\n        {\"abbr\":\"AZ\", \"name\":\"Arizona\"}\n    ]\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.field.ComboBox\" rel=\"Ext.form.field.ComboBox\" class=\"docClass\">Ext.form.ComboBox</a>', {\n    fieldLabel: 'Choose State',\n    store: states,\n    queryMode: 'local',\n    valueField: 'abbr',\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    // Template for the dropdown menu.\n    // Note the use of \"x-boundlist-item\" class,\n    // this is required to make the items selectable.\n    tpl: <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">Ext.XTemplate</a>',\n        '&lt;tpl for=\".\"&gt;',\n            '&lt;div class=\"x-boundlist-item\"&gt;{abbr} - {name}&lt;/div&gt;',\n        '&lt;/tpl&gt;'\n    ),\n    // template for the content inside text field\n    displayTpl: <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">Ext.XTemplate</a>',\n        '&lt;tpl for=\".\"&gt;',\n            '{abbr} - {name}',\n        '&lt;/tpl&gt;'\n    )\n});\n</code></pre>\n\n<p>See also the <a href=\"#!/api/Ext.form.field.ComboBox-cfg-listConfig\" rel=\"Ext.form.field.ComboBox-cfg-listConfig\" class=\"docClass\">listConfig</a> option for additional configuration of the dropdown.</p>\n","!type":"fn(config: +Ext.Element|string|Ext_form_field_ComboBox_cfg)","prototype":{"!proto":"Ext.form.field.Picker.prototype","allQuery":{"!type":"string","!doc":"<p>The text query to send to the server to return all records for the list with no filtering</p>\n"},"anyMatch":{"!type":"bool","!doc":"<p>Configure as <code>true</code> to allow match the typed characters at any position in the <a href=\"#!/api/Ext.form.field.ComboBox-cfg-valueField\" rel=\"Ext.form.field.ComboBox-cfg-valueField\" class=\"docClass\">valueField</a>'s value.</p>\n"},"autoSelect":{"!type":"bool","!doc":"<p><code>true</code> to automatically highlight the first result gathered by the data store in the dropdown list when it is\nopened. A false value would cause nothing in the list to be highlighted automatically, so\nthe user would have to manually highlight an item before pressing the enter or <a href=\"#!/api/Ext.form.field.ComboBox-cfg-selectOnTab\" rel=\"Ext.form.field.ComboBox-cfg-selectOnTab\" class=\"docClass\">tab</a> key to\nselect it (unless the value of (<a href=\"#!/api/Ext.form.field.ComboBox-cfg-typeAhead\" rel=\"Ext.form.field.ComboBox-cfg-typeAhead\" class=\"docClass\">typeAhead</a>) were true), or use the mouse to select a value.</p>\n"},"caseSensitive":{"!type":"bool","!doc":"<p>Configure as <code>true</code> to make the filtering match with exact case matching</p>\n"},"componentLayout":{"!type":"string|?","!doc":"<p>The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout\nmanager which sizes a Component's internal structure in response to the Component being sized.</p>\n\n<p>Generally, developers will not use this configuration as all provided Components which need their internal\nelements sizing (Such as <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">input fields</a>) come with their own componentLayout managers.</p>\n\n<p>The <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used on instances of the base <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\nclass which simply sizes the Component's encapsulating element to the height and width specified in the\n<a href=\"#!/api/Ext.form.field.ComboBox-method-setSize\" rel=\"Ext.form.field.ComboBox-method-setSize\" class=\"docClass\">setSize</a> method.</p>\n"},"defaultListConfig":{"!type":"?","!doc":"<p>Set of options that will be used as defaults for the user-configured <a href=\"#!/api/Ext.form.field.ComboBox-cfg-listConfig\" rel=\"Ext.form.field.ComboBox-cfg-listConfig\" class=\"docClass\">listConfig</a> object.</p>\n"},"delimiter":{"!type":"string","!doc":"<p>The character(s) used to separate the <a href=\"#!/api/Ext.form.field.ComboBox-cfg-displayField\" rel=\"Ext.form.field.ComboBox-cfg-displayField\" class=\"docClass\">display values</a> of multiple selected items when\n<code><a href=\"#!/api/Ext.form.field.ComboBox-cfg-multiSelect\" rel=\"Ext.form.field.ComboBox-cfg-multiSelect\" class=\"docClass\">multiSelect</a> = true</code>.</p>\n"},"displayField":{"!type":"string","!doc":"<p>The underlying <a href=\"#!/api/Ext.data.Field-cfg-name\" rel=\"Ext.data.Field-cfg-name\" class=\"docClass\">data field name</a> to bind to this ComboBox.</p>\n\n<p>See also <code><a href=\"#!/api/Ext.form.field.ComboBox-cfg-valueField\" rel=\"Ext.form.field.ComboBox-cfg-valueField\" class=\"docClass\">valueField</a></code>.</p>\n"},"enableRegEx":{"!type":"bool","!doc":"<p><em>When <a href=\"#!/api/Ext.form.field.ComboBox-cfg-queryMode\" rel=\"Ext.form.field.ComboBox-cfg-queryMode\" class=\"docClass\">queryMode</a> is <code>'local'</code> only</em></p>\n\n<p>Set to <code>true</code> to have the ComboBox use the typed value as a RegExp source to filter the store to get possible matches.</p>\n"},"fieldSubTpl":{"!type":"+Ext.XTemplate","!doc":"<p>The content of the field body is defined by this config option.</p>\n"},"forceSelection":{"!type":"bool","!doc":"<p><code>true</code> to restrict the selected value to one of the values in the list, <code>false</code> to allow the user to set\narbitrary text into the field.</p>\n"},"growToLongestValue":{"!type":"bool","!doc":"<p><code>false</code> to not allow the component to resize itself when its data changes\n(and its <a href=\"#!/api/Ext.form.field.ComboBox-cfg-grow\" rel=\"Ext.form.field.ComboBox-cfg-grow\" class=\"docClass\">grow</a> property is <code>true</code>)</p>\n"},"hiddenDataCls":{"!type":"string","!doc":"<p>CSS class used to find the <a href=\"#!/api/Ext.form.field.ComboBox-property-hiddenDataEl\" rel=\"Ext.form.field.ComboBox-property-hiddenDataEl\" class=\"docClass\">hiddenDataEl</a></p>\n"},"hiddenName":{"!type":"string","!doc":"<p>The name of an underlying hidden field which will be synchronized with the underlying value of the combo.\nThis option is useful if the combo is part of a form element doing a regular form post. The hidden field\nwill not be created unless a hiddenName is specified.</p>\n"},"listConfig":{"!type":"?","!doc":"<p>An optional set of configuration properties that will be passed to the <a href=\"#!/api/Ext.view.BoundList\" rel=\"Ext.view.BoundList\" class=\"docClass\">Ext.view.BoundList</a>'s constructor.\nAny configuration that is valid for BoundList can be included. Some of the more useful ones are:</p>\n\n<ul>\n<li><a href=\"#!/api/Ext.view.BoundList-cfg-cls\" rel=\"Ext.view.BoundList-cfg-cls\" class=\"docClass\">cls</a> - defaults to empty</li>\n<li><a href=\"#!/api/Ext.view.BoundList-cfg-emptyText\" rel=\"Ext.view.BoundList-cfg-emptyText\" class=\"docClass\">emptyText</a> - defaults to empty string</li>\n<li><a href=\"#!/api/Ext.view.BoundList-cfg-itemSelector\" rel=\"Ext.view.BoundList-cfg-itemSelector\" class=\"docClass\">itemSelector</a> - defaults to the value defined in BoundList</li>\n<li><a href=\"#!/api/Ext.view.BoundList-cfg-loadingText\" rel=\"Ext.view.BoundList-cfg-loadingText\" class=\"docClass\">loadingText</a> - defaults to <code>'Loading...'</code></li>\n<li><a href=\"#!/api/Ext.view.BoundList-cfg-minWidth\" rel=\"Ext.view.BoundList-cfg-minWidth\" class=\"docClass\">minWidth</a> - defaults to <code>70</code></li>\n<li><a href=\"#!/api/Ext.view.BoundList-cfg-maxWidth\" rel=\"Ext.view.BoundList-cfg-maxWidth\" class=\"docClass\">maxWidth</a> - defaults to <code>undefined</code></li>\n<li><a href=\"#!/api/Ext.view.BoundList-cfg-maxHeight\" rel=\"Ext.view.BoundList-cfg-maxHeight\" class=\"docClass\">maxHeight</a> - defaults to <code>300</code></li>\n<li><a href=\"#!/api/Ext.view.BoundList-cfg-resizable\" rel=\"Ext.view.BoundList-cfg-resizable\" class=\"docClass\">resizable</a> - defaults to <code>false</code></li>\n<li><a href=\"#!/api/Ext.view.BoundList-cfg-shadow\" rel=\"Ext.view.BoundList-cfg-shadow\" class=\"docClass\">shadow</a> - defaults to <code>'sides'</code></li>\n<li><p><a href=\"#!/api/Ext.view.BoundList-cfg-width\" rel=\"Ext.view.BoundList-cfg-width\" class=\"docClass\">width</a> - defaults to <code>undefined</code> (automatically set to the width of the ComboBox\nfield if <a href=\"#!/api/Ext.form.field.ComboBox-cfg-matchFieldWidth\" rel=\"Ext.form.field.ComboBox-cfg-matchFieldWidth\" class=\"docClass\">matchFieldWidth</a> is true)\n<a href=\"#!/api/Ext.view.BoundList-method-getInnerTpl\" rel=\"Ext.view.BoundList-method-getInnerTpl\" class=\"docClass\">getInnerTpl</a> A function which returns a template string which renders\nthe ComboBox's <a href=\"#!/api/Ext.form.field.ComboBox-cfg-displayField\" rel=\"Ext.form.field.ComboBox-cfg-displayField\" class=\"docClass\">displayField</a> value in the dropdown. This defaults to just outputting the raw value,\nbut may use any <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> methods to produce output.</p>\n\n<p>The running template is configured with some extra properties that provide some context:</p>\n\n<pre><code>- field <a href=\"#!/api/Ext.form.field.ComboBox\" rel=\"Ext.form.field.ComboBox\" class=\"docClass\">ComboBox</a> This combobox\n- store <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Store</a> This combobox's data store\n</code></pre></li>\n</ul>\n\n"},"minChars":{"!type":"number","!doc":"<p>The minimum number of characters the user must type before autocomplete and <a href=\"#!/api/Ext.form.field.ComboBox-cfg-typeAhead\" rel=\"Ext.form.field.ComboBox-cfg-typeAhead\" class=\"docClass\">typeAhead</a> activate.</p>\n\n<p>Defaults to <code>4</code> if <code><a href=\"#!/api/Ext.form.field.ComboBox-cfg-queryMode\" rel=\"Ext.form.field.ComboBox-cfg-queryMode\" class=\"docClass\">queryMode</a> = 'remote'</code> or <code>0</code> if <code><a href=\"#!/api/Ext.form.field.ComboBox-cfg-queryMode\" rel=\"Ext.form.field.ComboBox-cfg-queryMode\" class=\"docClass\">queryMode</a> = 'local'</code>,\ndoes not apply if <code><a href=\"#!/api/Ext.form.field.Trigger-cfg-editable\" rel=\"Ext.form.field.Trigger-cfg-editable\" class=\"docClass\">editable</a> = false</code>.</p>\n"},"multiSelect":{"!type":"bool","!doc":"<p>If set to <code>true</code>, allows the combo field to hold more than one value at a time, and allows selecting multiple\nitems from the dropdown list. The combo's text field will show all selected values separated by the\n<a href=\"#!/api/Ext.form.field.ComboBox-cfg-delimiter\" rel=\"Ext.form.field.ComboBox-cfg-delimiter\" class=\"docClass\">delimiter</a>.</p>\n"},"pageSize":{"!type":"number","!doc":"<p>If greater than <code>0</code>, a <a href=\"#!/api/Ext.toolbar.Paging\" rel=\"Ext.toolbar.Paging\" class=\"docClass\">Ext.toolbar.Paging</a> is displayed in the footer of the dropdown list and the\n<a href=\"#!/api/Ext.form.field.ComboBox-method-doQuery\" rel=\"Ext.form.field.ComboBox-method-doQuery\" class=\"docClass\">filter queries</a> will execute with page start and <a href=\"#!/api/Ext.view.BoundList-cfg-pageSize\" rel=\"Ext.view.BoundList-cfg-pageSize\" class=\"docClass\">limit</a>\nparameters. Only applies when <code><a href=\"#!/api/Ext.form.field.ComboBox-cfg-queryMode\" rel=\"Ext.form.field.ComboBox-cfg-queryMode\" class=\"docClass\">queryMode</a> = 'remote'</code>.</p>\n"},"queryCaching":{"!type":"bool","!doc":"<p>When true, this prevents the combo from re-querying (either locally or remotely) when the current query\nis the same as the previous query.</p>\n"},"queryDelay":{"!type":"number","!doc":"<p>The length of time in milliseconds to delay between the start of typing and sending the query to filter the\ndropdown list.</p>\n\n<p>Defaults to <code>500</code> if <code><a href=\"#!/api/Ext.form.field.ComboBox-cfg-queryMode\" rel=\"Ext.form.field.ComboBox-cfg-queryMode\" class=\"docClass\">queryMode</a> = 'remote'</code> or <code>10</code> if <code><a href=\"#!/api/Ext.form.field.ComboBox-cfg-queryMode\" rel=\"Ext.form.field.ComboBox-cfg-queryMode\" class=\"docClass\">queryMode</a> = 'local'</code></p>\n"},"queryMode":{"!type":"string","!doc":"<p>The mode in which the ComboBox uses the configured Store. Acceptable values are:</p>\n\n<ul>\n<li><p><strong><code>'remote'</code></strong> :</p>\n\n<p>In <code>queryMode: 'remote'</code>, the ComboBox loads its Store dynamically based upon user interaction.</p>\n\n<p>This is typically used for \"autocomplete\" type inputs, and after the user finishes typing, the Store is <a href=\"#!/api/Ext.data.Store-method-load\" rel=\"Ext.data.Store-method-load\" class=\"docClass\">load</a>ed.</p>\n\n<p>A parameter containing the typed string is sent in the load request. The default parameter name for the input\nstring is <code>query</code>, but this can be configured using the <a href=\"#!/api/Ext.form.field.ComboBox-cfg-queryParam\" rel=\"Ext.form.field.ComboBox-cfg-queryParam\" class=\"docClass\">queryParam</a> config.</p>\n\n<p>In <code>queryMode: 'remote'</code>, the Store may be configured with <code><a href=\"#!/api/Ext.data.Store-cfg-remoteFilter\" rel=\"Ext.data.Store-cfg-remoteFilter\" class=\"docClass\">remoteFilter</a>:\ntrue</code>, and further filters may be <em>programatically</em> added to the Store which are then passed with every load\nrequest which allows the server to further refine the returned dataset.</p>\n\n<p>Typically, in an autocomplete situation, <a href=\"#!/api/Ext.form.field.ComboBox-cfg-hideTrigger\" rel=\"Ext.form.field.ComboBox-cfg-hideTrigger\" class=\"docClass\">hideTrigger</a> is configured <code>true</code> because it has no meaning for\nautocomplete.</p></li>\n<li><p><strong><code>'local'</code></strong> :</p>\n\n<p>ComboBox loads local data</p>\n\n<pre><code>var combo = new <a href=\"#!/api/Ext.form.field.ComboBox\" rel=\"Ext.form.field.ComboBox\" class=\"docClass\">Ext.form.field.ComboBox</a>({\n    renderTo: document.body,\n    queryMode: 'local',\n    store: new <a href=\"#!/api/Ext.data.ArrayStore\" rel=\"Ext.data.ArrayStore\" class=\"docClass\">Ext.data.ArrayStore</a>({\n        id: 0,\n        fields: [\n            'myId',  // numeric value is the key\n            'displayText'\n        ],\n        data: [[1, 'item1'], [2, 'item2']]  // data is local\n    }),\n    valueField: 'myId',\n    displayField: 'displayText',\n    triggerAction: 'all'\n});\n</code></pre></li>\n</ul>\n\n"},"queryParam":{"!type":"string","!doc":"<p>Name of the parameter used by the Store to pass the typed string when the ComboBox is configured with\n<code><a href=\"#!/api/Ext.form.field.ComboBox-cfg-queryMode\" rel=\"Ext.form.field.ComboBox-cfg-queryMode\" class=\"docClass\">queryMode</a>: 'remote'</code>. If explicitly set to a falsy value it will not be sent.</p>\n"},"selectOnTab":{"!type":"bool","!doc":"<p>Whether the Tab key should select the currently highlighted item.</p>\n"},"store":{"!type":"+Ext.data.Store|string|[?]","!doc":"<p>The data source to which this combo is bound. Acceptable values for this property are:</p>\n\n<ul>\n<li><strong>any <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Store</a> subclass</strong></li>\n<li><strong>an <a href=\"#!/api/Ext.data.Store-cfg-storeId\" rel=\"Ext.data.Store-cfg-storeId\" class=\"docClass\">ID of a store</a></strong></li>\n<li><p><strong>an Array</strong> : Arrays will be converted to a <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a> internally, automatically generating\n<a href=\"#!/api/Ext.data.Field-cfg-name\" rel=\"Ext.data.Field-cfg-name\" class=\"docClass\">field names</a> to work with all data components.</p>\n\n<ul>\n<li><p><strong>1-dimensional array</strong> : (e.g., <code>['Foo','Bar']</code>)</p>\n\n<p>A 1-dimensional array will automatically be expanded (each array item will be used for both the combo\n<a href=\"#!/api/Ext.form.field.ComboBox-cfg-valueField\" rel=\"Ext.form.field.ComboBox-cfg-valueField\" class=\"docClass\">valueField</a> and <a href=\"#!/api/Ext.form.field.ComboBox-cfg-displayField\" rel=\"Ext.form.field.ComboBox-cfg-displayField\" class=\"docClass\">displayField</a>)</p></li>\n<li><p><strong>2-dimensional array</strong> : (e.g., <code>[['f','Foo'],['b','Bar']]</code>)</p>\n\n<p>For a multi-dimensional array, the value in index 0 of each item will be assumed to be the combo\n<a href=\"#!/api/Ext.form.field.ComboBox-cfg-valueField\" rel=\"Ext.form.field.ComboBox-cfg-valueField\" class=\"docClass\">valueField</a>, while the value at index 1 is assumed to be the combo <a href=\"#!/api/Ext.form.field.ComboBox-cfg-displayField\" rel=\"Ext.form.field.ComboBox-cfg-displayField\" class=\"docClass\">displayField</a>.</p></li>\n</ul>\n</li>\n</ul>\n\n\n<p>See also <a href=\"#!/api/Ext.form.field.ComboBox-cfg-queryMode\" rel=\"Ext.form.field.ComboBox-cfg-queryMode\" class=\"docClass\">queryMode</a>.</p>\n"},"transform":{"!type":"string|+HTMLElement|+Ext.Element","!doc":"<p>The id, DOM node or <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a> of an existing HTML <code>&lt;select&gt;</code> element to convert into a ComboBox. The\ntarget select's options will be used to build the options in the ComboBox dropdown; a configured <a href=\"#!/api/Ext.form.field.ComboBox-cfg-store\" rel=\"Ext.form.field.ComboBox-cfg-store\" class=\"docClass\">store</a>\nwill take precedence over this.</p>\n"},"triggerAction":{"!type":"string","!doc":"<p>The action to execute when the trigger is clicked.</p>\n\n<ul>\n<li><p><strong><code>'all'</code></strong> :</p>\n\n<p><a href=\"#!/api/Ext.form.field.ComboBox-method-doQuery\" rel=\"Ext.form.field.ComboBox-method-doQuery\" class=\"docClass\">run the query</a> specified by the <code><a href=\"#!/api/Ext.form.field.ComboBox-cfg-allQuery\" rel=\"Ext.form.field.ComboBox-cfg-allQuery\" class=\"docClass\">allQuery</a></code> config option</p></li>\n<li><p><strong><code>'last'</code></strong> :</p>\n\n<p><a href=\"#!/api/Ext.form.field.ComboBox-method-doQuery\" rel=\"Ext.form.field.ComboBox-method-doQuery\" class=\"docClass\">run the query</a> using the <code><a href=\"#!/api/Ext.form.field.ComboBox-property-lastQuery\" rel=\"Ext.form.field.ComboBox-property-lastQuery\" class=\"docClass\">last query value</a></code>.</p></li>\n<li><p><strong><code>'query'</code></strong> :</p>\n\n<p><a href=\"#!/api/Ext.form.field.ComboBox-method-doQuery\" rel=\"Ext.form.field.ComboBox-method-doQuery\" class=\"docClass\">run the query</a> using the <a href=\"#!/api/Ext.form.field.Base-method-getRawValue\" rel=\"Ext.form.field.Base-method-getRawValue\" class=\"docClass\">raw value</a>.</p></li>\n</ul>\n\n\n<p>See also <code><a href=\"#!/api/Ext.form.field.ComboBox-cfg-queryParam\" rel=\"Ext.form.field.ComboBox-cfg-queryParam\" class=\"docClass\">queryParam</a></code>.</p>\n"},"triggerCls":{"!type":"string","!doc":"<p>An additional CSS class used to style the trigger button. The trigger will always get the <a href=\"#!/api/Ext.form.field.ComboBox-cfg-triggerBaseCls\" rel=\"Ext.form.field.ComboBox-cfg-triggerBaseCls\" class=\"docClass\">triggerBaseCls</a>\nby default and <code>triggerCls</code> will be <strong>appended</strong> if specified.</p>\n"},"typeAhead":{"!type":"bool","!doc":"<p><code>true</code> to populate and autoselect the remainder of the text being typed after a configurable delay\n(<a href=\"#!/api/Ext.form.field.ComboBox-cfg-typeAheadDelay\" rel=\"Ext.form.field.ComboBox-cfg-typeAheadDelay\" class=\"docClass\">typeAheadDelay</a>) if it matches a known value.</p>\n"},"typeAheadDelay":{"!type":"number","!doc":"<p>The length of time in milliseconds to wait until the typeahead text is displayed if <code><a href=\"#!/api/Ext.form.field.ComboBox-cfg-typeAhead\" rel=\"Ext.form.field.ComboBox-cfg-typeAhead\" class=\"docClass\">typeAhead</a> = true</code></p>\n"},"valueField":{"!type":"string","!doc":"<p>The underlying <a href=\"#!/api/Ext.data.Field-cfg-name\" rel=\"Ext.data.Field-cfg-name\" class=\"docClass\">data value name</a> to bind to this ComboBox.</p>\n\n<p><strong>Note</strong>: use of a <code>valueField</code> requires the user to make a selection in order for a value to be mapped. See also\n<code><a href=\"#!/api/Ext.form.field.ComboBox-cfg-displayField\" rel=\"Ext.form.field.ComboBox-cfg-displayField\" class=\"docClass\">displayField</a></code>.</p>\n\n<p>Defaults to match the value of the <a href=\"#!/api/Ext.form.field.ComboBox-cfg-displayField\" rel=\"Ext.form.field.ComboBox-cfg-displayField\" class=\"docClass\">displayField</a> config.</p>\n"},"valueNotFoundText":{"!type":"string","!doc":"<p>When using a name/value combo, if the value passed to setValue is not found in the store, valueNotFoundText will\nbe displayed as the field text if defined. If this default text is used, it means there\nis no value set and no validation will occur on this field.</p>\n"},"hiddenDataEl":{"!type":"+Ext.Element"},"ignoreSelection":{"!type":"number","!doc":"<p>private</p>\n"},"lastQuery":{"!type":"string","!doc":"<p>The value of the match string used to filter the store. Delete this property to force a requery. Example use:</p>\n\n<pre><code>var combo = new <a href=\"#!/api/Ext.form.field.ComboBox\" rel=\"Ext.form.field.ComboBox\" class=\"docClass\">Ext.form.field.ComboBox</a>({\n    ...\n    queryMode: 'remote',\n    listeners: {\n        // delete the previous query in the beforequery event or set\n        // combo.lastQuery = null (this will reload the store the next time it expands)\n        beforequery: function(qe){\n            delete qe.combo.lastQuery;\n        }\n    }\n});\n</code></pre>\n\n<p>To make sure the filter in the store is not cleared the first time the ComboBox trigger is used configure the\ncombo with <code>lastQuery=''</code>. Example use:</p>\n\n<pre><code>var combo = new <a href=\"#!/api/Ext.form.field.ComboBox\" rel=\"Ext.form.field.ComboBox\" class=\"docClass\">Ext.form.field.ComboBox</a>({\n    ...\n    queryMode: 'local',\n    triggerAction: 'all',\n    lastQuery: ''\n});\n</code></pre>\n"},"removingRecords":{"!type":"?","!doc":"<p>private, tells the layout to recalculate its startingWidth when a record is removed from its bound store</p>\n"},"afterQuery":{"!type":"fn(queryPlan: ?) -> !this","!doc":"<p>A method called when the filtering caused by the <a href=\"#!/api/Ext.form.field.ComboBox-method-doQuery\" rel=\"Ext.form.field.ComboBox-method-doQuery\" class=\"docClass\">doQuery</a> call is complete and the store has been\neither filtered locally (if <a href=\"#!/api/Ext.form.field.ComboBox-cfg-queryMode\" rel=\"Ext.form.field.ComboBox-cfg-queryMode\" class=\"docClass\">queryMode</a> is <code>\"local\"</code>), or has been loaded using the specified filtering.</p>\n"},"afterRender":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior after rendering is complete. At this stage the Component’s Element\nwill have been styled according to the configuration, will have had any configured CSS class\nnames added, and will be in the configured visibility and the configured enable state.</p>\n"},"alignPicker":{"!type":"fn() -> !this","!doc":"<p>Aligns the picker to the input element</p>\n"},"assertValue":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"beforeBlur":{"!type":"fn() -> !this","!doc":"<p>Template method to do any pre-blur processing.</p>\n"},"beforeQuery":{"!type":"fn(queryPlan: ?) -> !this","!doc":"<p>A method which may modify aspects of how the store is to be filtered (if <a href=\"#!/api/Ext.form.field.ComboBox-cfg-queryMode\" rel=\"Ext.form.field.ComboBox-cfg-queryMode\" class=\"docClass\">queryMode</a> is <code>\"local\"</code>)\nof loaded (if <a href=\"#!/api/Ext.form.field.ComboBox-cfg-queryMode\" rel=\"Ext.form.field.ComboBox-cfg-queryMode\" class=\"docClass\">queryMode</a> is <code>\"remote\"</code>).</p>\n\n<p>This is called by the {@link <a href=\"#!/api/Ext.form.field.ComboBox-method-doQuery\" rel=\"Ext.form.field.ComboBox-method-doQuery\" class=\"docClass\">doQuery</a> method, and may be overridden in subclasses to modify\nthe default behaviour.</p>\n\n<p>This method is passed an object containing information about the upcoming query operation which it may modify\nbefore returning.</p>\n"},"beforeReset":{"!type":"fn() -> !this","!doc":"<p>Template method before a field is reset.</p>\n"},"clearValue":{"!type":"fn() -> !this","!doc":"<p>Clears any value currently set in the ComboBox.</p>\n"},"createPicker":{"!type":"fn() -> !this","!doc":"<p>Creates and returns the component to be used as this field's picker. Must be implemented by subclasses of Picker.\nThe current field should also be passed as a configuration option to the picker component as the pickerField\nproperty.</p>\n"},"doAutoSelect":{"!type":"fn() -> !this","!doc":"<p>If the autoSelect config is true, and the picker is open, highlights the first item.</p>\n"},"doLocalQuery":{"!type":"fn(queryPlan: ?) -> !this"},"doQuery":{"!type":"fn(queryString: string, forceAll?: bool, rawQuery?: bool) -> bool","!doc":"<p>Executes a query to filter the dropdown list. Fires the <a href=\"#!/api/Ext.form.field.ComboBox-event-beforequery\" rel=\"Ext.form.field.ComboBox-event-beforequery\" class=\"docClass\">beforequery</a> event prior to performing the query\nallowing the query action to be canceled if needed.</p>\n"},"doRawQuery":{"!type":"fn() -> !this","!doc":"<p>Execute the query with the raw contents within the textfield.</p>\n"},"doRemoteQuery":{"!type":"fn(queryPlan: ?) -> !this"},"doTypeAhead":{"!type":"fn() -> !this"},"findRecord":{"!type":"fn(field: string, value: ?) -> +Ext.data.Model","!doc":"<p>Finds the record by searching for a specific field/value combination.</p>\n"},"findRecordByDisplay":{"!type":"fn(value: ?) -> +Ext.data.Model","!doc":"<p>Finds the record by searching values in the <a href=\"#!/api/Ext.form.field.ComboBox-cfg-displayField\" rel=\"Ext.form.field.ComboBox-cfg-displayField\" class=\"docClass\">displayField</a>.</p>\n"},"findRecordByValue":{"!type":"fn(value: ?) -> +Ext.data.Model","!doc":"<p>Finds the record by searching values in the <a href=\"#!/api/Ext.form.field.ComboBox-cfg-valueField\" rel=\"Ext.form.field.ComboBox-cfg-valueField\" class=\"docClass\">valueField</a>.</p>\n"},"getDisplayValue":{"!type":"fn() -> !this","!doc":"<p>Generates the string value to be displayed in the text field for the currently stored value</p>\n"},"getParams":{"!type":"fn(queryString: ?) -> !this","!doc":"<p>private</p>\n"},"getStore":{"!type":"fn() -> +Ext.data.Store","!doc":"<p>Returns the store associated with this ComboBox.</p>\n"},"getStoreListeners":{"!type":"fn() -> ?","!doc":"<p>Gets the listeners to bind to a new store.</p>\n"},"getSubTplData":{"!type":"fn() -> ?","!doc":"<p>Creates and returns the data object to be used when rendering the <a href=\"#!/api/Ext.form.field.ComboBox-cfg-fieldSubTpl\" rel=\"Ext.form.field.ComboBox-cfg-fieldSubTpl\" class=\"docClass\">fieldSubTpl</a>.</p>\n"},"getSubmitValue":{"!type":"fn() -> string","!doc":"<p>Returns the value that would be included in a standard form submit for this field. This will be combined with the\nfield's name to form a name=value pair in the <a href=\"#!/api/Ext.form.field.ComboBox-method-getSubmitData\" rel=\"Ext.form.field.ComboBox-method-getSubmitData\" class=\"docClass\">submitted parameters</a>. If an empty string is\nreturned then just the name= will be submitted; if null is returned then nothing will be submitted.</p>\n\n<p>Note that the value returned will have been <a href=\"#!/api/Ext.form.field.ComboBox-method-processRawValue\" rel=\"Ext.form.field.ComboBox-method-processRawValue\" class=\"docClass\">processed</a> but may or may not have been\nsuccessfully <a href=\"#!/api/Ext.form.field.ComboBox-method-validate\" rel=\"Ext.form.field.ComboBox-method-validate\" class=\"docClass\">validated</a>.</p>\n"},"getValue":{"!type":"fn() -> ?","!doc":"<p>Returns the current data value of the field. The type of value returned is particular to the type of the\nparticular field (e.g. a Date object for <a href=\"#!/api/Ext.form.field.Date\" rel=\"Ext.form.field.Date\" class=\"docClass\">Ext.form.field.Date</a>), as the result of calling <a href=\"#!/api/Ext.form.field.ComboBox-method-rawToValue\" rel=\"Ext.form.field.ComboBox-method-rawToValue\" class=\"docClass\">rawToValue</a> on\nthe field's <a href=\"#!/api/Ext.form.field.ComboBox-method-processRawValue\" rel=\"Ext.form.field.ComboBox-method-processRawValue\" class=\"docClass\">processed</a> String value. To return the raw String value, see <a href=\"#!/api/Ext.form.field.ComboBox-method-getRawValue\" rel=\"Ext.form.field.ComboBox-method-getRawValue\" class=\"docClass\">getRawValue</a>.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"initEvents":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"isEqual":{"!type":"fn(v1: ?, v2: ?) -> !this","!doc":"<p>Override. Treat undefined and null values as equal to an empty string value.</p>\n"},"loadPage":{"!type":"fn(pageNum: ?, options: ?) -> !this"},"onAdded":{"!type":"fn() -> !this","!doc":"<p>The picker (the dropdown) must have its zIndex managed by the same ZIndexManager which is\nproviding the zIndex of our Container.</p>\n"},"onBeforeDeselect":{"!type":"fn(list: ?, record: ?) -> !this"},"onBeforeLoad":{"!type":"fn() -> !this"},"onBeforeSelect":{"!type":"fn(list: ?, record: ?) -> !this"},"onBindStore":{"!type":"fn(store: ?, initial: ?) -> !this","!doc":"<p>Template method, it is called when a new store is bound\nto the current instance.</p>\n"},"onClear":{"!type":"fn() -> !this"},"onCollapse":{"!type":"fn() -> !this","!doc":"<p>Disables the key nav for the BoundList when it is collapsed.</p>\n"},"onDataChanged":{"!type":"fn() -> !this"},"onDestroy":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the destroy operation.\nAfter calling the superclass's onDestroy, the Component will be destroyed.</p>\n"},"onEditorTab":{"!type":"fn(e: ?) -> !this"},"onException":{"!type":"fn() -> !this"},"onExpand":{"!type":"fn() -> !this","!doc":"<p>Enables the key nav for the BoundList when it is expanded.</p>\n"},"onItemClick":{"!type":"fn(picker: ?, record: ?) -> !this"},"onKeyUp":{"!type":"fn(e: ?, t: ?) -> !this","!doc":"<p>store the last key and doQuery if relevant</p>\n"},"onListRefresh":{"!type":"fn() -> !this"},"onListSelectionChange":{"!type":"fn(list: ?, selectedRecords: ?) -> !this"},"onLoad":{"!type":"fn(store: ?, records: ?, success: ?) -> !this"},"onPageChange":{"!type":"fn(toolbar: ?, newPage: ?) -> !this"},"onPaste":{"!type":"fn() -> !this"},"onRemove":{"!type":"fn() -> !this"},"onTriggerClick":{"!type":"fn() -> !this","!doc":"<p>Handles the trigger click; by default toggles between expanding and collapsing the picker component.</p>\n"},"onTypeAhead":{"!type":"fn() -> !this"},"onUnbindStore":{"!type":"fn(store: ?) -> !this","!doc":"<p>Template method, it is called when an existing store is unbound\nfrom the current instance.</p>\n"},"resetToDefault":{"!type":"fn() -> !this","!doc":"<p>invoked when a different store is bound to this combo\nthan the original</p>\n"},"resizeComboToGrow":{"!type":"fn() -> !this","!doc":"<p>private helper</p>\n"},"select":{"!type":"fn(combo: +Ext.form.field.ComboBox, records: [?], eOpts: ?)","!doc":"<p>Fires when at least one list item is selected.</p>\n"},"setHiddenValue":{"!type":"fn(values: ?) -> !this","!doc":"<p>Set the value of <a href=\"#!/api/Ext.form.field.ComboBox-property-hiddenDataEl\" rel=\"Ext.form.field.ComboBox-property-hiddenDataEl\" class=\"docClass\">hiddenDataEl</a>\nDynamically adds and removes input[type=hidden] elements</p>\n"},"setValue":{"!type":"fn(value: string|[string]) -> +Ext.form.field.Field","!doc":"<p>Sets the specified value(s) into the field. For each value, if a record is found in the <a href=\"#!/api/Ext.form.field.ComboBox-cfg-store\" rel=\"Ext.form.field.ComboBox-cfg-store\" class=\"docClass\">store</a> that\nmatches based on the <a href=\"#!/api/Ext.form.field.ComboBox-cfg-valueField\" rel=\"Ext.form.field.ComboBox-cfg-valueField\" class=\"docClass\">valueField</a>, then that record's <a href=\"#!/api/Ext.form.field.ComboBox-cfg-displayField\" rel=\"Ext.form.field.ComboBox-cfg-displayField\" class=\"docClass\">displayField</a> will be displayed in the\nfield. If no match is found, and the <a href=\"#!/api/Ext.form.field.ComboBox-cfg-valueNotFoundText\" rel=\"Ext.form.field.ComboBox-cfg-valueNotFoundText\" class=\"docClass\">valueNotFoundText</a> config option is defined, then that will be\ndisplayed as the default field text. Otherwise a blank value will be shown, although the value will still be set.</p>\n"},"syncSelection":{"!type":"fn() -> !this","!doc":"<p>Synchronizes the selection in the picker to match the current value of the combobox.</p>\n"},"beforedeselect":{"!type":"fn(combo: +Ext.form.field.ComboBox, record: +Ext.data.Record, index: number, eOpts: ?)","!doc":"<p>Fires before the deselected item is removed from the collection</p>\n"},"beforequery":{"!type":"fn(queryPlan: ?, eOpts: ?)","!doc":"<p>Fires before all queries are processed. Return false to cancel the query or set the queryPlan's cancel\nproperty to true.</p>\n"},"beforeselect":{"!type":"fn(combo: +Ext.form.field.ComboBox, record: +Ext.data.Record, index: number, eOpts: ?)","!doc":"<p>Fires before the selected item is added to the collection</p>\n"}}},"Date":{"!doc":"<p>Provides a date input field with a <a href=\"#!/api/Ext.picker.Date\" rel=\"Ext.picker.Date\" class=\"docClass\">date picker</a> dropdown and automatic date\nvalidation.</p>\n\n<p>This field recognizes and uses the JavaScript Date object as its main <a href=\"#!/api/Ext.form.field.Date-cfg-value\" rel=\"Ext.form.field.Date-cfg-value\" class=\"docClass\">value</a> type. In addition,\nit recognizes string values which are parsed according to the <a href=\"#!/api/Ext.form.field.Date-cfg-format\" rel=\"Ext.form.field.Date-cfg-format\" class=\"docClass\">format</a> and/or <a href=\"#!/api/Ext.form.field.Date-cfg-altFormats\" rel=\"Ext.form.field.Date-cfg-altFormats\" class=\"docClass\">altFormats</a>\nconfigs. These may be reconfigured to use date formats appropriate for the user's locale.</p>\n\n<p>The field may be limited to a certain range of dates by using the <a href=\"#!/api/Ext.form.field.Date-cfg-minValue\" rel=\"Ext.form.field.Date-cfg-minValue\" class=\"docClass\">minValue</a>, <a href=\"#!/api/Ext.form.field.Date-cfg-maxValue\" rel=\"Ext.form.field.Date-cfg-maxValue\" class=\"docClass\">maxValue</a>,\n<a href=\"#!/api/Ext.form.field.Date-cfg-disabledDays\" rel=\"Ext.form.field.Date-cfg-disabledDays\" class=\"docClass\">disabledDays</a>, and <a href=\"#!/api/Ext.form.field.Date-cfg-disabledDates\" rel=\"Ext.form.field.Date-cfg-disabledDates\" class=\"docClass\">disabledDates</a> config parameters. These configurations will be used both\nin the field's validation, and in the date picker dropdown by preventing invalid dates from being selected.</p>\n\n<h1>Example usage</h1>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>', {\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    width: 300,\n    bodyPadding: 10,\n    title: 'Dates',\n    items: [{\n        xtype: 'datefield',\n        anchor: '100%',\n        fieldLabel: 'From',\n        name: 'from_date',\n        maxValue: new Date()  // limited to the current date or prior\n    }, {\n        xtype: 'datefield',\n        anchor: '100%',\n        fieldLabel: 'To',\n        name: 'to_date',\n        value: new Date()  // defaults to today\n    }]\n});\n</code></pre>\n\n<h1>Date Formats Examples</h1>\n\n<p>This example shows a couple of different date format parsing scenarios. Both use custom date format\nconfigurations; the first one matches the configured <code>format</code> while the second matches the <code>altFormats</code>.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>', {\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    width: 300,\n    bodyPadding: 10,\n    title: 'Dates',\n    items: [{\n        xtype: 'datefield',\n        anchor: '100%',\n        fieldLabel: 'Date',\n        name: 'date',\n        // The value matches the format; will be parsed and displayed using that format.\n        format: 'm d Y',\n        value: '2 4 1978'\n    }, {\n        xtype: 'datefield',\n        anchor: '100%',\n        fieldLabel: 'Date',\n        name: 'date',\n        // The value does not match the format, but does match an altFormat; will be parsed\n        // using the altFormat and displayed using the format.\n        format: 'm d Y',\n        altFormats: 'm,d,Y|m.d.Y',\n        value: '2.4.1978'\n    }]\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_form_field_Date_cfg)","prototype":{"!proto":"Ext.form.field.Picker.prototype","altFormats":{"!type":"string","!doc":"<p>Multiple date formats separated by \"|\" to try when parsing a user input value and it does not match the defined\nformat.</p>\n"},"disabledDates":{"!type":"[string]","!doc":"<p>An array of \"dates\" to disable, as strings. These strings will be used to build a dynamic regular expression so\nthey are very powerful. Some examples:</p>\n\n<pre><code>// disable these exact dates:\ndisabledDates: [\"03/08/2003\", \"09/16/2003\"]\n// disable these days for every year:\ndisabledDates: [\"03/08\", \"09/16\"]\n// only match the beginning (useful if you are using short years):\ndisabledDates: [\"^03/08\"]\n// disable every day in March 2006:\ndisabledDates: [\"03/../2006\"]\n// disable every day in every March:\ndisabledDates: [\"^03\"]\n</code></pre>\n\n<p>Note that the format of the dates included in the array should exactly match the <a href=\"#!/api/Ext.form.field.Date-cfg-format\" rel=\"Ext.form.field.Date-cfg-format\" class=\"docClass\">format</a> config. In order\nto support regular expressions, if you are using a <a href=\"#!/api/Ext.form.field.Date-cfg-format\" rel=\"Ext.form.field.Date-cfg-format\" class=\"docClass\">date format</a> that has \".\" in it, you will have\nto escape the dot when restricting dates. For example: <code>[\"03\\\\.08\\\\.03\"]</code>.</p>\n"},"disabledDatesText":{"!type":"string","!doc":"<p>The tooltip text to display when the date falls on a disabled date.</p>\n"},"disabledDays":{"!type":"[number]","!doc":"<p>An array of days to disable, 0 based. Some examples:</p>\n\n<pre><code>// disable Sunday and Saturday:\ndisabledDays:  [0, 6]\n// disable weekdays:\ndisabledDays: [1,2,3,4,5]\n</code></pre>\n"},"disabledDaysText":{"!type":"string","!doc":"<p>The tooltip to display when the date falls on a disabled day.</p>\n"},"format":{"!type":"string","!doc":"<p>The default date format string which can be overriden for localization support. The format must be valid\naccording to <a href=\"#!/api/Ext.Date-method-parse\" rel=\"Ext.Date-method-parse\" class=\"docClass\">Ext.Date.parse</a>.</p>\n"},"grow":{"!type":"bool"},"growMax":{"!type":"number"},"growMin":{"!type":"number"},"invalidText":{"!type":"string","!doc":"<p>The error text to display when the date in the field is invalid.</p>\n"},"matchFieldWidth":{"!type":"bool","!doc":"<p>Whether the picker dropdown's width should be explicitly set to match the width of the field. Defaults to true.</p>\n"},"maxText":{"!type":"string","!doc":"<p>The error text to display when the date in the cell is after <a href=\"#!/api/Ext.form.field.Date-cfg-maxValue\" rel=\"Ext.form.field.Date-cfg-maxValue\" class=\"docClass\">maxValue</a>.</p>\n"},"maxValue":{"!type":"+Date|string","!doc":"<p>The maximum allowed date. Can be either a Javascript date object or a string date in a valid format.</p>\n"},"minText":{"!type":"string","!doc":"<p>The error text to display when the date in the cell is before <a href=\"#!/api/Ext.form.field.Date-cfg-minValue\" rel=\"Ext.form.field.Date-cfg-minValue\" class=\"docClass\">minValue</a>.</p>\n"},"minValue":{"!type":"+Date|string","!doc":"<p>The minimum allowed date. Can be either a Javascript date object or a string date in a valid format.</p>\n"},"showToday":{"!type":"bool","!doc":"<p>false to hide the footer area of the Date picker containing the Today button and disable the keyboard handler for\nspacebar that selects the current date.</p>\n"},"startDay":{"!type":"number","!doc":"<p>Day index at which the week should begin, 0-based.</p>\n\n<p>Defaults to <code>0</code> (Sunday).</p>\n"},"submitFormat":{"!type":"string","!doc":"<p>The date format string which will be submitted to the server. The format must be valid according to\n<a href=\"#!/api/Ext.Date-method-parse\" rel=\"Ext.Date-method-parse\" class=\"docClass\">Ext.Date.parse</a>.</p>\n\n<p>Defaults to <a href=\"#!/api/Ext.form.field.Date-cfg-format\" rel=\"Ext.form.field.Date-cfg-format\" class=\"docClass\">format</a>.</p>\n"},"triggerCls":{"!type":"string","!doc":"<p>An additional CSS class used to style the trigger button. The trigger will always get the class 'x-form-trigger'\nand triggerCls will be <strong>appended</strong> if specified (default class displays a calendar icon).</p>\n"},"useStrict":{"!type":"bool","!doc":"<p>True to enforce strict date parsing to prevent the default Javascript \"date rollover\".\nDefaults to the useStrict parameter set on <a href=\"#!/api/Ext.Date\" rel=\"Ext.Date\" class=\"docClass\">Ext.Date</a>\nSee <a href=\"#!/api/Ext.Date-method-parse\" rel=\"Ext.Date-method-parse\" class=\"docClass\">Ext.Date.parse</a>.</p>\n"},"initTime":{"!type":"string","!doc":"<p>in the absence of a time value, a default value of 12 noon will be used\n(note: 12 noon was chosen because it steers well clear of all DST timezone changes)</p>\n"},"initTimeFormat":{"!type":"string","!doc":"<p>24 hour format</p>\n"},"autoSize":{"!type":"fn()"},"beforeBlur":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"createPicker":{"!type":"fn() -> !this","!doc":"<p>Creates and returns the component to be used as this field's picker. Must be implemented by subclasses of Picker.\nThe current field should also be passed as a configuration option to the picker component as the pickerField\nproperty.</p>\n"},"formatDate":{"!type":"fn(date: ?) -> !this","!doc":"<p>private</p>\n"},"getErrors":{"!type":"fn(value?: ?) -> [string]","!doc":"<p>Runs all of Date's validations and returns an array of any errors. Note that this first runs Text's validations,\nso the returned array is an amalgamation of all field errors. The additional validation checks are testing that\nthe date format is valid, that the chosen date is within the min and max date constraints set, that the date\nchosen is not in the disabledDates regex and that the day chosed is not one of the disabledDays.</p>\n"},"getSubmitValue":{"!type":"fn() -> string","!doc":"<p>Returns the value that would be included in a standard form submit for this field. This will be combined with the\nfield's name to form a name=value pair in the <a href=\"#!/api/Ext.form.field.Date-method-getSubmitData\" rel=\"Ext.form.field.Date-method-getSubmitData\" class=\"docClass\">submitted parameters</a>. If an empty string is\nreturned then just the name= will be submitted; if null is returned then nothing will be submitted.</p>\n\n<p>Note that the value returned will have been <a href=\"#!/api/Ext.form.field.Date-method-processRawValue\" rel=\"Ext.form.field.Date-method-processRawValue\" class=\"docClass\">processed</a> but may or may not have been\nsuccessfully <a href=\"#!/api/Ext.form.field.Date-method-validate\" rel=\"Ext.form.field.Date-method-validate\" class=\"docClass\">validated</a>.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p></p>\n"},"initDisabledDays":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"initValue":{"!type":"fn() -> !this","!doc":"<p>Initializes the field's value based on the initial config.</p>\n"},"onCollapse":{"!type":"fn() -> !this","!doc":"<p>Focuses the field when collapsing the Date picker.</p>\n"},"onDownArrow":{"!type":"fn(e: ?) -> !this"},"onExpand":{"!type":"fn() -> !this","!doc":"<p>Sets the Date picker's value to match the current field value when expanding.</p>\n"},"onSelect":{"!type":"fn(m: ?, d: ?) -> !this"},"parseDate":{"!type":"fn(value: ?) -> !this"},"rawToValue":{"!type":"fn(rawValue: ?) -> ?","!doc":"<p>Converts a raw input field value into a mixed-type value that is suitable for this particular field type. This\nallows controlling the normalization and conversion of user-entered values into field-type-appropriate values,\ne.g. a Date object for <a href=\"#!/api/Ext.form.field.Date\" rel=\"Ext.form.field.Date\" class=\"docClass\">Ext.form.field.Date</a>, and is invoked by <a href=\"#!/api/Ext.form.field.Date-method-getValue\" rel=\"Ext.form.field.Date-method-getValue\" class=\"docClass\">getValue</a>.</p>\n\n<p>It is up to individual implementations to decide how to handle raw values that cannot be successfully converted\nto the desired object type.</p>\n\n<p>See <a href=\"#!/api/Ext.form.field.Date-method-valueToRaw\" rel=\"Ext.form.field.Date-method-valueToRaw\" class=\"docClass\">valueToRaw</a> for the opposite conversion.</p>\n\n<p>The base implementation does no conversion, returning the raw value untouched.</p>\n"},"safeParse":{"!type":"fn(value: string, format: string) -> +Date","!doc":"<p>Attempts to parse a given string value using a given <a href=\"#!/api/Ext.Date-method-parse\" rel=\"Ext.Date-method-parse\" class=\"docClass\">date format</a>.</p>\n"},"setDisabledDates":{"!type":"fn(disabledDates: [string]) -> !this","!doc":"<p>Replaces any existing disabled dates with new values and refreshes the Date picker.</p>\n"},"setDisabledDays":{"!type":"fn(disabledDays: [number]) -> !this","!doc":"<p>Replaces any existing disabled days (by index, 0-6) with new values and refreshes the Date picker.</p>\n"},"setMaxValue":{"!type":"fn(value: +Date) -> !this","!doc":"<p>Replaces any existing <a href=\"#!/api/Ext.form.field.Date-cfg-maxValue\" rel=\"Ext.form.field.Date-cfg-maxValue\" class=\"docClass\">maxValue</a> with the new value and refreshes the Date picker.</p>\n"},"setMinValue":{"!type":"fn(value: +Date) -> !this","!doc":"<p>Replaces any existing <a href=\"#!/api/Ext.form.field.Date-cfg-minValue\" rel=\"Ext.form.field.Date-cfg-minValue\" class=\"docClass\">minValue</a> with the new value and refreshes the Date picker.</p>\n"},"setValue":{"!type":"fn(date: string|+Date) -> +Ext.form.field.Date","!doc":"<p>Sets the value of the date field. You can pass a date object or any string that can be parsed into a valid date,\nusing <a href=\"#!/api/Ext.form.field.Date-cfg-format\" rel=\"Ext.form.field.Date-cfg-format\" class=\"docClass\">format</a> as the date format, according to the same rules as <a href=\"#!/api/Ext.Date-method-parse\" rel=\"Ext.Date-method-parse\" class=\"docClass\">Ext.Date.parse</a> (the default\nformat used is \"m/d/Y\").</p>\n\n<p>Usage:</p>\n\n<pre><code>//All of these calls set the same date value (May 4, 2006)\n\n//Pass a date object:\nvar dt = new Date('5/4/2006');\ndateField.setValue(dt);\n\n//Pass a date string (default format):\ndateField.setValue('05/04/2006');\n\n//Pass a date string (custom format):\ndateField.format = 'Y-m-d';\ndateField.setValue('2006-05-04');\n</code></pre>\n"},"valueToRaw":{"!type":"fn(value: ?) -> ?","!doc":"<p>Converts a mixed-type value to a raw representation suitable for displaying in the field. This allows controlling\nhow value objects passed to <a href=\"#!/api/Ext.form.field.Date-method-setValue\" rel=\"Ext.form.field.Date-method-setValue\" class=\"docClass\">setValue</a> are shown to the user, including localization. For instance, for a\n<a href=\"#!/api/Ext.form.field.Date\" rel=\"Ext.form.field.Date\" class=\"docClass\">Ext.form.field.Date</a>, this would control how a Date object passed to <a href=\"#!/api/Ext.form.field.Date-method-setValue\" rel=\"Ext.form.field.Date-method-setValue\" class=\"docClass\">setValue</a> would be converted\nto a String for display in the field.</p>\n\n<p>See <a href=\"#!/api/Ext.form.field.Date-method-rawToValue\" rel=\"Ext.form.field.Date-method-rawToValue\" class=\"docClass\">rawToValue</a> for the opposite conversion.</p>\n\n<p>The base implementation simply does a standard toString conversion, and converts <a href=\"#!/api/Ext-method-isEmpty\" rel=\"Ext-method-isEmpty\" class=\"docClass\">empty values</a>\nto an empty string.</p>\n"}}},"Display":{"!doc":"<p>A display-only text field which is not validated and not submitted. This is useful for when you want to display a\nvalue from a form's <a href=\"#!/api/Ext.form.Basic-method-load\" rel=\"Ext.form.Basic-method-load\" class=\"docClass\">loaded data</a> but do not want to allow the user to edit or submit that\nvalue. The value can be optionally <a href=\"#!/api/Ext.form.field.Display-cfg-htmlEncode\" rel=\"Ext.form.field.Display-cfg-htmlEncode\" class=\"docClass\">HTML encoded</a> if it contains HTML markup that you do not want\nto be rendered.</p>\n\n<p>If you have more complex content, or need to include components within the displayed content, also consider using a\n<a href=\"#!/api/Ext.form.FieldContainer\" rel=\"Ext.form.FieldContainer\" class=\"docClass\">Ext.form.FieldContainer</a> instead.</p>\n\n<p>Example:</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>', {\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    width: 175,\n    height: 120,\n    bodyPadding: 10,\n    title: 'Final Score',\n    items: [{\n        xtype: 'displayfield',\n        fieldLabel: 'Home',\n        name: 'home_score',\n        value: '10'\n    }, {\n        xtype: 'displayfield',\n        fieldLabel: 'Visitor',\n        name: 'visitor_score',\n        value: '11'\n    }],\n    buttons: [{\n        text: 'Update'\n    }]\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_form_field_Display_cfg)","prototype":{"!proto":"Ext.form.field.Base.prototype","checkChangeBuffer":{"!type":"number"},"checkChangeEvents":{"!type":"number"},"disabled":{"!type":"bool"},"fieldBodyCls":{"!type":"string","!doc":"<p>An extra CSS class to be applied to the body content element in addition to <a href=\"#!/api/Ext.form.field.Display-cfg-baseBodyCls\" rel=\"Ext.form.field.Display-cfg-baseBodyCls\" class=\"docClass\">baseBodyCls</a>.</p>\n"},"fieldCls":{"!type":"string","!doc":"<p>The default CSS class for the field.</p>\n"},"fieldSubTpl":{"!type":"+Ext.XTemplate","!doc":"<p>The content of the field body is defined by this config option.</p>\n"},"htmlEncode":{"!type":"bool","!doc":"<p>True to escape HTML in text when rendering it.</p>\n"},"inputType":{"!type":"string"},"readOnly":{"!type":"bool"},"renderer":{"!type":"fn()","!doc":"<p>A function to transform the raw value for display in the field. The function will receive 2 arguments, the raw value\nand the <a href=\"#!/api/Ext.form.field.Display\" rel=\"Ext.form.field.Display\" class=\"docClass\">Ext.form.field.Display</a> object.</p>\n"},"scope":{"!type":"?","!doc":"<p>The scope to execute the <a href=\"#!/api/Ext.form.field.Display-cfg-renderer\" rel=\"Ext.form.field.Display-cfg-renderer\" class=\"docClass\">renderer</a> function. Defaults to this.</p>\n"},"submitValue":{"!type":"bool","!doc":"<p>Setting this to false will prevent the field from being <a href=\"#!/api/Ext.form.Basic-method-submit\" rel=\"Ext.form.Basic-method-submit\" class=\"docClass\">submitted</a> even when it is\nnot disabled.</p>\n"},"validateOnChange":{"!type":"bool"},"getDisplayValue":{"!type":"fn() -> !this","!doc":"<p>Format the value to display.</p>\n"},"getRawValue":{"!type":"fn() -> string","!doc":"<p>Returns the raw value of the field, without performing any normalization, conversion, or validation. To get a\nnormalized and converted value see <a href=\"#!/api/Ext.form.field.Display-method-getValue\" rel=\"Ext.form.field.Display-method-getValue\" class=\"docClass\">getValue</a>.</p>\n"},"getSubTplData":{"!type":"fn() -> ?","!doc":"<p>Creates and returns the data object to be used when rendering the <a href=\"#!/api/Ext.form.field.Display-cfg-fieldSubTpl\" rel=\"Ext.form.field.Display-cfg-fieldSubTpl\" class=\"docClass\">fieldSubTpl</a>.</p>\n"},"initEvents":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"isDirty":{"!type":"fn() -> bool","!doc":"<p>Returns true if the value of this Field has been changed from its <a href=\"#!/api/Ext.form.field.Display-property-originalValue\" rel=\"Ext.form.field.Display-property-originalValue\" class=\"docClass\">originalValue</a>.\nWill always return false if the field is disabled.</p>\n\n<p>Note that if the owning <a href=\"#!/api/Ext.form.Basic\" rel=\"Ext.form.Basic\" class=\"docClass\">form</a> was configured with\n<a href=\"#!/api/Ext.form.Basic-cfg-trackResetOnLoad\" rel=\"Ext.form.Basic-cfg-trackResetOnLoad\" class=\"docClass\">trackResetOnLoad</a> then the <a href=\"#!/api/Ext.form.field.Display-property-originalValue\" rel=\"Ext.form.field.Display-property-originalValue\" class=\"docClass\">originalValue</a> is updated when\nthe values are loaded by <a href=\"#!/api/Ext.form.Basic\" rel=\"Ext.form.Basic\" class=\"docClass\">Ext.form.Basic</a>.<a href=\"#!/api/Ext.form.Basic-method-setValues\" rel=\"Ext.form.Basic-method-setValues\" class=\"docClass\">setValues</a>.</p>\n"},"isValid":{"!type":"fn() -> bool","!doc":"<p>Returns whether or not the field value is currently valid by <a href=\"#!/api/Ext.form.field.Display-method-getErrors\" rel=\"Ext.form.field.Display-method-getErrors\" class=\"docClass\">validating</a> the\n<a href=\"#!/api/Ext.form.field.Display-method-processRawValue\" rel=\"Ext.form.field.Display-method-processRawValue\" class=\"docClass\">processed raw value</a> of the field. <strong>Note</strong>: <a href=\"#!/api/Ext.form.field.Display-cfg-disabled\" rel=\"Ext.form.field.Display-cfg-disabled\" class=\"docClass\">disabled</a> fields are\nalways treated as valid.</p>\n"},"setRawValue":{"!type":"fn(value: ?) -> ?","!doc":"<p>Sets the field's raw value directly, bypassing <a href=\"#!/api/Ext.form.field.Display-method-valueToRaw\" rel=\"Ext.form.field.Display-method-valueToRaw\" class=\"docClass\">value conversion</a>, change detection, and\nvalidation. To set the value with these additional inspections see <a href=\"#!/api/Ext.form.field.Display-method-setValue\" rel=\"Ext.form.field.Display-method-setValue\" class=\"docClass\">setValue</a>.</p>\n"},"validate":{"!type":"fn() -> bool","!doc":"<p>Returns whether or not the field value is currently valid by <a href=\"#!/api/Ext.form.field.Display-method-getErrors\" rel=\"Ext.form.field.Display-method-getErrors\" class=\"docClass\">validating</a> the field's current\nvalue, and fires the <a href=\"#!/api/Ext.form.field.Display-event-validitychange\" rel=\"Ext.form.field.Display-event-validitychange\" class=\"docClass\">validitychange</a> event if the field's validity has changed since the last validation.\n<strong>Note</strong>: <a href=\"#!/api/Ext.form.field.Display-cfg-disabled\" rel=\"Ext.form.field.Display-cfg-disabled\" class=\"docClass\">disabled</a> fields are always treated as valid.</p>\n\n<p>Custom implementations of this method are allowed to have side-effects such as triggering error message display.\nTo validate without side-effects, use <a href=\"#!/api/Ext.form.field.Display-method-isValid\" rel=\"Ext.form.field.Display-method-isValid\" class=\"docClass\">isValid</a>.</p>\n"}}},"File":{"!doc":"<p>A file upload field which has custom styling and allows control over the button text and other\nfeatures of <a href=\"#!/api/Ext.form.field.Text\" rel=\"Ext.form.field.Text\" class=\"docClass\">text fields</a> like <a href=\"#!/api/Ext.form.field.Text-cfg-emptyText\" rel=\"Ext.form.field.Text-cfg-emptyText\" class=\"docClass\">empty text</a>.\nIt uses a hidden file input element behind the scenes to allow user selection of a file and to\nperform the actual upload during <a href=\"#!/api/Ext.form.Basic-method-submit\" rel=\"Ext.form.Basic-method-submit\" class=\"docClass\">form submit</a>.</p>\n\n<p>Because there is no secure cross-browser way to programmatically set the value of a file input,\nthe standard Field <code>setValue</code> method is not implemented. The <code><a href=\"#!/api/Ext.form.field.File-method-getValue\" rel=\"Ext.form.field.File-method-getValue\" class=\"docClass\">getValue</a></code> method will return\na value that is browser-dependent; some have just the file name, some have a full path, some use\na fake path.</p>\n\n<p><strong>IMPORTANT:</strong> File uploads are not performed using normal 'Ajax' techniques; see the description for\n<a href=\"#!/api/Ext.form.Basic-method-hasUpload\" rel=\"Ext.form.Basic-method-hasUpload\" class=\"docClass\">Ext.form.Basic.hasUpload</a> for details.</p>\n\n<h1>Example Usage</h1>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>', {\n    title: 'Upload a Photo',\n    width: 400,\n    bodyPadding: 10,\n    frame: true,\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    items: [{\n        xtype: 'filefield',\n        name: 'photo',\n        fieldLabel: 'Photo',\n        labelWidth: 50,\n        msgTarget: 'side',\n        allowBlank: false,\n        anchor: '100%',\n        buttonText: 'Select Photo...'\n    }],\n\n    buttons: [{\n        text: 'Upload',\n        handler: function() {\n            var form = this.up('form').getForm();\n            if(form.isValid()){\n                form.submit({\n                    url: 'photo-upload.php',\n                    waitMsg: 'Uploading your photo...',\n                    success: function(fp, o) {\n                        <a href=\"#!/api/Ext.MessageBox-method-alert\" rel=\"Ext.MessageBox-method-alert\" class=\"docClass\">Ext.Msg.alert</a>('Success', 'Your photo \"' + o.result.file + '\" has been uploaded.');\n                    }\n                });\n            }\n        }\n    }]\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_form_field_File_cfg)","prototype":{"!proto":"Ext.form.field.Trigger.prototype","buttonConfig":{"!type":"?","!doc":"<p>A standard <a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a> config object.</p>\n"},"buttonMargin":{"!type":"number","!doc":"<p>The number of pixels of space reserved between the button and the text field. Note that this only\napplies if <a href=\"#!/api/Ext.form.field.File-cfg-buttonOnly\" rel=\"Ext.form.field.File-cfg-buttonOnly\" class=\"docClass\">buttonOnly</a> = false.</p>\n"},"buttonOnly":{"!type":"bool","!doc":"<p>True to display the file upload field as a button with no visible text field. If true, all\ninherited Text members will still be available.</p>\n"},"buttonText":{"!type":"string","!doc":"<p>The button text to display on the upload button. Note that if you supply a value for\n<a href=\"#!/api/Ext.form.field.File-cfg-buttonConfig\" rel=\"Ext.form.field.File-cfg-buttonConfig\" class=\"docClass\">buttonConfig</a>, the buttonConfig.text value will be used instead if available.</p>\n"},"clearOnSubmit":{"!type":"bool","!doc":"<p>True to clear the selected file value when the form this field belongs to\nis submitted to the server.</p>\n"},"componentLayout":{"!type":"string|?","!doc":"<p>private</p>\n"},"readOnly":{"!type":"bool","!doc":"<p>Unlike with other form fields, the readOnly config defaults to true in File field.</p>\n"},"button":{"!type":"+Ext.button.Button","!doc":"<p>A reference to the trigger Button component created for this upload field. Only populated after this component is\nrendered.</p>\n"},"childEls":{"!type":"[?]","!doc":"<p>private. Extract the file element, button outer element, and button active element.</p>\n"},"extraFieldBodyCls":{"!type":"string","!doc":"<p>private</p>\n"},"fileInputEl":{"!type":"+Ext.Element","!doc":"<p>A reference to the invisible file input element created for this upload field. Only populated after this\ncomponent is rendered.</p>\n"},"triggerNoEditCls":{"!type":"string","!doc":"<p>Do not show hand pointer over text field since file choose dialog is only shown when clicking in the button</p>\n"},"extractFileInput":{"!type":"fn() -> +HTMLElement","!doc":"<p>Only relevant if the instance's <a href=\"#!/api/Ext.form.field.File-method-isFileUpload\" rel=\"Ext.form.field.File-method-isFileUpload\" class=\"docClass\">isFileUpload</a> method returns true. Returns a reference to the file input\nDOM element holding the user's selected file. The input will be appended into the submission form and will not be\nreturned, so this method should also create a replacement.</p>\n"},"getButtonMarginProp":{"!type":"fn() -> !this"},"getTriggerMarkup":{"!type":"fn() -> !this","!doc":"<p>Gets the markup to be inserted into the subTplMarkup.</p>\n"},"isFileUpload":{"!type":"fn() -> bool","!doc":"<p>Returns whether this Field is a file upload field; if it returns true, forms will use special techniques for\n<a href=\"#!/api/Ext.form.Basic-method-submit\" rel=\"Ext.form.Basic-method-submit\" class=\"docClass\">submitting the form</a> via AJAX. See <a href=\"#!/api/Ext.form.Basic-method-hasUpload\" rel=\"Ext.form.Basic-method-hasUpload\" class=\"docClass\">Ext.form.Basic.hasUpload</a> for details. If\nthis returns true, the <a href=\"#!/api/Ext.form.field.File-method-extractFileInput\" rel=\"Ext.form.field.File-method-extractFileInput\" class=\"docClass\">extractFileInput</a> method must also be implemented to return the corresponding file\ninput element.</p>\n"},"onDestroy":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the destroy operation.\nAfter calling the superclass's onDestroy, the Component will be destroyed.</p>\n"},"onDisable":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"onEnable":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"onFileChange":{"!type":"fn(button: ?, e: ?, value: ?) -> !this","!doc":"<p>Event handler fired when the user selects a file.</p>\n"},"onRender":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"onShow":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the show operation. After\ncalling the superclass's onShow, the Component will be visible.</p>\n\n<p>Override in subclasses where more complex behaviour is needed.</p>\n\n<p>Gets passed the same parameters as <a href=\"#!/api/Ext.form.field.File-method-show\" rel=\"Ext.form.field.File-method-show\" class=\"docClass\">show</a>.</p>\n"},"reset":{"!type":"fn() -> !this","!doc":"<p>Resets the current field value to the originally-loaded value and clears any validation messages.\nAlso adds <strong><a href=\"#!/api/Ext.form.field.File-cfg-emptyText\" rel=\"Ext.form.field.File-cfg-emptyText\" class=\"docClass\">emptyText</a></strong> and <strong><a href=\"#!/api/Ext.form.field.File-cfg-emptyCls\" rel=\"Ext.form.field.File-cfg-emptyCls\" class=\"docClass\">emptyCls</a></strong> if the original value was blank.</p>\n"},"restoreInput":{"!type":"fn(el: ?) -> !this"},"setValue":{"!type":"fn() -> !this","!doc":"<p>Overridden to do nothing</p>\n"},"change":{"!type":"fn(this: +Ext.ux.form.FileUploadField, value: string, eOpts: ?)","!doc":"<p>Fires when the underlying file input field's value has changed from the user selecting a new file from the system\nfile selection dialog.</p>\n"}}},"FileButton":{"!type":"fn(config: +Ext.Element|string|Ext_form_field_FileButton_cfg)","prototype":{"!proto":"Ext.button.Button.prototype","cls":{"!type":"string","!doc":"<p>A CSS class string to apply to the button's main element.</p>\n"},"preventDefault":{"!type":"bool","!doc":"<p>True to prevent the default action when the <a href=\"#!/api/Ext.form.field.FileButton-cfg-clickEvent\" rel=\"Ext.form.field.FileButton-cfg-clickEvent\" class=\"docClass\">clickEvent</a> is processed.</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.form.field.FileButton-method-getEl\" rel=\"Ext.form.field.FileButton-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.form.field.FileButton-method-getEl\" rel=\"Ext.form.field.FileButton-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.form.field.FileButton-cfg-renderSelectors\" rel=\"Ext.form.field.FileButton-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.form.field.FileButton-cfg-childEls\" rel=\"Ext.form.field.FileButton-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"},"childEls":{"!type":"[?]"},"inputCls":{"!type":"string"},"afterRender":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior after rendering is complete. At this stage the Component’s Element\nwill have been styled according to the configuration, will have had any configured CSS class\nnames added, and will be in the configured visibility and the configured enable state.</p>\n"},"createFileInput":{"!type":"fn(isTemporary: ?) -> !this","!doc":"<p>Creates the file input element. It is inserted into the trigger button component, made\ninvisible, and floated on top of the button's other content so that it will receive the\nbutton's clicks.</p>\n"},"fireChange":{"!type":"fn(e: ?) -> !this"},"getTemplateArgs":{"!type":"fn() -> ?","!doc":"<p>This method returns an object which provides substitution parameters for the <a href=\"#!/api/Ext.form.field.FileButton-cfg-renderTpl\" rel=\"Ext.form.field.FileButton-cfg-renderTpl\" class=\"docClass\">XTemplate</a> used to\ncreate this Button's DOM structure.</p>\n\n<p>Instances or subclasses which use a different Template to create a different DOM structure may need to provide\ntheir own implementation of this method.</p>\n"},"onDisable":{"!type":"fn() -> !this","!doc":"<p>See comments in onFocus</p>\n"},"onEnable":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the enable operation.\nAfter calling the superclass's <code>onEnable</code>, the Component will be enabled.</p>\n"},"reset":{"!type":"fn(remove: ?) -> !this"},"restoreInput":{"!type":"fn(el: ?) -> !this"}}},"Hidden":{"!doc":"<p>A basic hidden field for storing hidden values in forms that need to be passed in the form submit.</p>\n\n<p>This creates an actual input element with type=\"submit\" in the DOM. While its label is\n<a href=\"#!/api/Ext.form.field.Hidden-cfg-hideLabel\" rel=\"Ext.form.field.Hidden-cfg-hideLabel\" class=\"docClass\">not rendered</a> by default, it is still a real component and may be sized according\nto its owner container's layout.</p>\n\n<p>Because of this, in most cases it is more convenient and less problematic to simply\n<a href=\"#!/api/Ext.form.action.Action-cfg-params\" rel=\"Ext.form.action.Action-cfg-params\" class=\"docClass\">pass hidden parameters</a> directly when\n<a href=\"#!/api/Ext.form.Basic-method-submit\" rel=\"Ext.form.Basic-method-submit\" class=\"docClass\">submitting the form</a>.</p>\n\n<p>Example:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>({\n    title: 'My Form',\n    items: [{\n        xtype: 'textfield',\n        fieldLabel: 'Text Field',\n        name: 'text_field',\n        value: 'value from text field'\n    }, {\n        xtype: 'hiddenfield',\n        name: 'hidden_field_1',\n        value: 'value from hidden field'\n    }],\n\n    buttons: [{\n        text: 'Submit',\n        handler: function() {\n            this.up('form').getForm().submit({\n                params: {\n                    hidden_field_2: 'value from submit call'\n                }\n            });\n        }\n    }]\n});\n</code></pre>\n\n<p>Submitting the above form will result in three values sent to the server:</p>\n\n<pre><code>text_field=value+from+text+field&amp;hidden;_field_1=value+from+hidden+field&amp;hidden_field_2=value+from+submit+call\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_form_field_Hidden_cfg)","prototype":{"!proto":"Ext.form.field.Base.prototype","hidden":{"!type":"bool","!doc":"<p><code>true</code> to hide the component.</p>\n"},"hideLabel":{"!type":"bool","!doc":"<p>Set to true to completely hide the label element (<a href=\"#!/api/Ext.form.field.Hidden-cfg-fieldLabel\" rel=\"Ext.form.field.Hidden-cfg-fieldLabel\" class=\"docClass\">fieldLabel</a> and <a href=\"#!/api/Ext.form.field.Hidden-cfg-labelSeparator\" rel=\"Ext.form.field.Hidden-cfg-labelSeparator\" class=\"docClass\">labelSeparator</a>). Also see\n<a href=\"#!/api/Ext.form.field.Hidden-cfg-hideEmptyLabel\" rel=\"Ext.form.field.Hidden-cfg-hideEmptyLabel\" class=\"docClass\">hideEmptyLabel</a>, which controls whether space will be reserved for an empty fieldLabel.</p>\n"},"inputType":{"!type":"string","!doc":"<p>private</p>\n"},"clearInvalid":{"!type":"fn() -> !this","!doc":"<p>Clear any invalid styles/messages for this field.</p>\n\n<p><strong>Note</strong>: this method does not cause the Field's <a href=\"#!/api/Ext.form.field.Hidden-method-validate\" rel=\"Ext.form.field.Hidden-method-validate\" class=\"docClass\">validate</a> or <a href=\"#!/api/Ext.form.field.Hidden-method-isValid\" rel=\"Ext.form.field.Hidden-method-isValid\" class=\"docClass\">isValid</a> methods to return <code>true</code>\nif the value does not <em>pass</em> validation. So simply clearing a field's errors will not necessarily allow\nsubmission of forms submitted with the <a href=\"#!/api/Ext.form.action.Submit-cfg-clientValidation\" rel=\"Ext.form.action.Submit-cfg-clientValidation\" class=\"docClass\">Ext.form.action.Submit.clientValidation</a> option set.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"initEvents":{"!type":"fn() -> !this","!doc":"<p>These are all private overrides</p>\n"},"isEqual":{"!type":"fn(value1: ?, value2: ?) -> !this","!doc":"<p>Override. Treat undefined and null values as equal to an empty string value.</p>\n"},"markInvalid":{"!type":"fn() -> !this","!doc":"<p>Display one or more error messages associated with this field, using <a href=\"#!/api/Ext.form.field.Hidden-cfg-msgTarget\" rel=\"Ext.form.field.Hidden-cfg-msgTarget\" class=\"docClass\">msgTarget</a> to determine how to\ndisplay the messages and applying <a href=\"#!/api/Ext.form.field.Hidden-cfg-invalidCls\" rel=\"Ext.form.field.Hidden-cfg-invalidCls\" class=\"docClass\">invalidCls</a> to the field's UI element.</p>\n\n<p><strong>Note</strong>: this method does not cause the Field's <a href=\"#!/api/Ext.form.field.Hidden-method-validate\" rel=\"Ext.form.field.Hidden-method-validate\" class=\"docClass\">validate</a> or <a href=\"#!/api/Ext.form.field.Hidden-method-isValid\" rel=\"Ext.form.field.Hidden-method-isValid\" class=\"docClass\">isValid</a> methods to return <code>false</code>\nif the value does <em>pass</em> validation. So simply marking a Field as invalid will not prevent submission of forms\nsubmitted with the <a href=\"#!/api/Ext.form.action.Submit-cfg-clientValidation\" rel=\"Ext.form.action.Submit-cfg-clientValidation\" class=\"docClass\">Ext.form.action.Submit.clientValidation</a> option set.</p>\n"},"setHeight":{"!type":"fn() -> +Ext.Component","!doc":"<p>Sets the height of the component. This method fires the <a href=\"#!/api/Ext.form.field.Hidden-event-resize\" rel=\"Ext.form.field.Hidden-event-resize\" class=\"docClass\">resize</a> event.</p>\n"},"setPagePosition":{"!type":"fn() -> +Ext.Component","!doc":"<p>Sets the page XY position of the component. To set the left and top instead, use <a href=\"#!/api/Ext.form.field.Hidden-method-setPosition\" rel=\"Ext.form.field.Hidden-method-setPosition\" class=\"docClass\">setPosition</a>.\nThis method fires the <a href=\"#!/api/Ext.form.field.Hidden-event-move\" rel=\"Ext.form.field.Hidden-event-move\" class=\"docClass\">move</a> event.</p>\n"},"setPosition":{"!type":"fn() -> +Ext.Component","!doc":"<p>Sets the left and top of the component. To set the page XY position instead, use <a href=\"#!/api/Ext.Component-method-setPagePosition\" rel=\"Ext.Component-method-setPagePosition\" class=\"docClass\">setPagePosition</a>. This\nmethod fires the <a href=\"#!/api/Ext.form.field.Hidden-event-move\" rel=\"Ext.form.field.Hidden-event-move\" class=\"docClass\">move</a> event.</p>\n"},"setSize":{"!type":"fn() -> +Ext.Component","!doc":"<p>Sets the width and height of this Component. This method fires the <a href=\"#!/api/Ext.form.field.Hidden-event-resize\" rel=\"Ext.form.field.Hidden-event-resize\" class=\"docClass\">resize</a> event. This method can accept\neither width and height as separate arguments, or you can pass a size object like <code>{width:10, height:20}</code>.</p>\n"},"setWidth":{"!type":"fn() -> +Ext.Component","!doc":"<p>Sets the width of the component. This method fires the <a href=\"#!/api/Ext.form.field.Hidden-event-resize\" rel=\"Ext.form.field.Hidden-event-resize\" class=\"docClass\">resize</a> event.</p>\n"}}},"HtmlEditor":{"!doc":"<p>Provides a lightweight HTML Editor component. Some toolbar features are not supported by Safari and will be\nautomatically hidden when needed. These are noted in the config options where appropriate.</p>\n\n<p>The editor's toolbar buttons have tooltips defined in the <a href=\"#!/api/Ext.form.field.HtmlEditor-property-buttonTips\" rel=\"Ext.form.field.HtmlEditor-property-buttonTips\" class=\"docClass\">buttonTips</a> property, but they are not\nenabled by default unless the global <a href=\"#!/api/Ext.tip.QuickTipManager\" rel=\"Ext.tip.QuickTipManager\" class=\"docClass\">Ext.tip.QuickTipManager</a> singleton is\n<a href=\"#!/api/Ext.tip.QuickTipManager-method-init\" rel=\"Ext.tip.QuickTipManager-method-init\" class=\"docClass\">initialized</a>.</p>\n\n<p>An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an\nEditor within any element that has display set to 'none' can cause problems in Safari and Firefox due to their\ndefault iframe reloading bugs.</p>\n\n<h1>Example usage</h1>\n\n<p>Simple example rendered with default options:</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext.tip.QuickTipManager-method-init\" rel=\"Ext.tip.QuickTipManager-method-init\" class=\"docClass\">Ext.tip.QuickTipManager.init</a>();  // enable tooltips\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.field.HtmlEditor\" rel=\"Ext.form.field.HtmlEditor\" class=\"docClass\">Ext.form.HtmlEditor</a>', {\n    width: 580,\n    height: 250,\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n\n<p>Passed via xtype into a container and with custom options:</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext.tip.QuickTipManager-method-init\" rel=\"Ext.tip.QuickTipManager-method-init\" class=\"docClass\">Ext.tip.QuickTipManager.init</a>();  // enable tooltips\nnew <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>({\n    title: 'HTML Editor',\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    width: 550,\n    height: 250,\n    frame: true,\n    layout: 'fit',\n    items: {\n        xtype: 'htmleditor',\n        enableColors: false,\n        enableAlignments: false\n    }\n});\n</code></pre>\n\n<h1>Reflow issues</h1>\n\n<p>In some browsers, a layout reflow will cause the underlying editor iframe to be reset. This\nis most commonly seen when using the editor in collapsed panels with animation. In these cases\nit is best to avoid animation. More information can be found here: https://bugzilla.mozilla.org/show_bug.cgi?id=90268</p>\n","!type":"fn(config: +Ext.Element|string|Ext_form_field_HtmlEditor_cfg)","prototype":{"!proto":"Ext.form.FieldContainer.prototype","afterIFrameTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nafter the iframe element. If an <code>XTemplate</code> is used, the component's\n<a href=\"#!/api/Ext.form.field.Base-method-getSubTplData\" rel=\"Ext.form.field.Base-method-getSubTplData\" class=\"docClass\">subTpl data</a> serves as the context.</p>\n"},"afterTextAreaTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nafter the textarea element. If an <code>XTemplate</code> is used, the component's\n<a href=\"#!/api/Ext.form.field.Base-method-getSubTplData\" rel=\"Ext.form.field.Base-method-getSubTplData\" class=\"docClass\">subTpl data</a> serves as the context.</p>\n"},"allowDomMove":{"!type":"bool"},"applyTo":{"!type":"string"},"autoCreate":{"!type":"string"},"beforeIFrameTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nbefore the iframe element. If an <code>XTemplate</code> is used, the component's\n<a href=\"#!/api/Ext.form.field.Base-method-getSubTplData\" rel=\"Ext.form.field.Base-method-getSubTplData\" class=\"docClass\">subTpl data</a> serves as the context.</p>\n"},"beforeTextAreaTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nbefore the textarea element. If an <code>XTemplate</code> is used, the component's\n<a href=\"#!/api/Ext.form.field.Base-method-getSubTplData\" rel=\"Ext.form.field.Base-method-getSubTplData\" class=\"docClass\">subTpl data</a> serves as the context.</p>\n"},"componentLayout":{"!type":"string|?","!doc":"<p>The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout\nmanager which sizes a Component's internal structure in response to the Component being sized.</p>\n\n<p>Generally, developers will not use this configuration as all provided Components which need their internal\nelements sizing (Such as <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">input fields</a>) come with their own componentLayout managers.</p>\n\n<p>The <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used on instances of the base <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\nclass which simply sizes the Component's encapsulating element to the height and width specified in the\n<a href=\"#!/api/Ext.form.field.HtmlEditor-method-setSize\" rel=\"Ext.form.field.HtmlEditor-method-setSize\" class=\"docClass\">setSize</a> method.</p>\n"},"createLinkText":{"!type":"string","!doc":"<p>The default text for the create link prompt</p>\n"},"defaultButtonUI":{"!type":"string","!doc":"<p>A default <a href=\"#!/api/Ext.Component-cfg-ui\" rel=\"Ext.Component-cfg-ui\" class=\"docClass\">ui</a> to use for the HtmlEditor's toolbar\n<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Buttons</a></p>\n"},"defaultLinkValue":{"!type":"string","!doc":"<p>The default value for the create link prompt</p>\n"},"defaultValue":{"!type":"string","!doc":"<p>A default value to be put into the editor to resolve focus issues.</p>\n\n<p>Defaults to (Non-breaking space) in Opera and IE6,\n(Zero-width space) in all other browsers.</p>\n"},"enableAlignments":{"!type":"bool","!doc":"<p>Enable the left, center, right alignment buttons</p>\n"},"enableColors":{"!type":"bool","!doc":"<p>Enable the fore/highlight color buttons</p>\n"},"enableFont":{"!type":"bool","!doc":"<p>Enable font selection. Not available in Safari 2.</p>\n"},"enableFontSize":{"!type":"bool","!doc":"<p>Enable the increase/decrease font size buttons</p>\n"},"enableFormat":{"!type":"bool","!doc":"<p>Enable the bold, italic and underline buttons</p>\n"},"enableLinks":{"!type":"bool","!doc":"<p>Enable the create link button. Not available in Safari 2.</p>\n"},"enableLists":{"!type":"bool","!doc":"<p>Enable the bullet and numbered list buttons. Not available in Safari 2.</p>\n"},"enableSourceEdit":{"!type":"bool","!doc":"<p>Enable the switch to source edit button. Not available in Safari 2.</p>\n"},"fieldCls":{"!type":"string"},"focusCls":{"!type":"string"},"fontFamilies":{"!type":"[string]","!doc":"<p>An array of available font families</p>\n"},"hideMode":{"!type":"string","!doc":"<p>A String which specifies how this Component's encapsulating DOM element will be hidden. Values may be:</p>\n\n<ul>\n<li><code>'display'</code> : The Component will be hidden using the <code>display: none</code> style.</li>\n<li><code>'visibility'</code> : The Component will be hidden using the <code>visibility: hidden</code> style.</li>\n<li><code>'offsets'</code> : The Component will be hidden by absolutely positioning it out of the visible area of the document.\nThis is useful when a hidden Component must maintain measurable dimensions. Hiding using <code>display</code> results in a\nComponent having zero dimensions.</li>\n</ul>\n\n"},"iframeAttrTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\ninside the iframe element (as attributes). If an <code>XTemplate</code> is used, the component's\n<a href=\"#!/api/Ext.form.field.Base-method-getSubTplData\" rel=\"Ext.form.field.Base-method-getSubTplData\" class=\"docClass\">subTpl data</a> serves as the context.</p>\n"},"inputType":{"!type":"string"},"invalidCls":{"!type":"string"},"invalidText":{"!type":"string"},"msgFx":{"!type":"string"},"readOnly":{"!type":"string"},"tabIndex":{"!type":"string"},"activated":{"!type":"bool"},"buttonTips":{"!type":"?","!doc":"<p>Object collection of toolbar tooltips for the buttons in the editor. The key is the command id associated with\nthat button and the value is a valid QuickTips object. For example:</p>\n\n<pre><code>{\n    bold: {\n        title: 'Bold (Ctrl+B)',\n        text: 'Make the selected text bold.',\n        cls: 'x-html-editor-tip'\n    },\n    italic: {\n        title: 'Italic (Ctrl+I)',\n        text: 'Make the selected text italic.',\n        cls: 'x-html-editor-tip'\n    }\n    // ...\n}\n</code></pre>\n"},"componentTpl":{"!type":"[?]"},"containerElCls":{"!type":"string"},"extraFieldBodyCls":{"!type":"string","!doc":"<p>private</p>\n"},"fixKeys":{"!type":"?"},"fixKeysAfter":{"!type":"?"},"iframePad":{"!type":"number"},"initialized":{"!type":"bool"},"maskOnDisable":{"!type":"bool","!doc":"<p>This is an internal flag that you use when creating custom components. By default this is set to <code>true</code> which means\nthat every component gets a mask when it's disabled. Components like FieldContainer, FieldSet, Field, Button, Tab\noverride this property to <code>false</code> since they want to implement custom disable logic.</p>\n"},"sourceEditMode":{"!type":"bool"},"stretchInputElFixed":{"!type":"bool"},"subTplInsertions":{"!type":"[?]"},"adjustFont":{"!type":"fn(btn: ?) -> !this"},"afterRender":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior after rendering is complete. At this stage the Component’s Element\nwill have been styled according to the configuration, will have had any configured CSS class\nnames added, and will be in the configured visibility and the configured enable state.</p>\n"},"applyCommand":{"!type":"fn(e: ?) -> !this"},"beforeDestroy":{"!type":"fn() -> !this"},"checkDesignMode":{"!type":"fn() -> !this"},"cleanHtml":{"!type":"fn(html: string) -> string","!doc":"<p>If you need/want custom HTML cleanup, this is the method you should override.</p>\n"},"clearInvalid":{"!type":"fn() -> !this","!doc":"<p>Clear any invalid styles/messages for this field. Components using this mixin should implement this method to\nupdate the components rendering to clear any existing messages.</p>\n\n<p><strong>Note</strong>: this method does not cause the Field's <a href=\"#!/api/Ext.form.field.HtmlEditor-method-validate\" rel=\"Ext.form.field.HtmlEditor-method-validate\" class=\"docClass\">validate</a> or <a href=\"#!/api/Ext.form.field.HtmlEditor-method-isValid\" rel=\"Ext.form.field.HtmlEditor-method-isValid\" class=\"docClass\">isValid</a> methods to return <code>true</code>\nif the value does not <em>pass</em> validation. So simply clearing a field's errors will not necessarily allow\nsubmission of forms submitted with the <a href=\"#!/api/Ext.form.action.Submit-cfg-clientValidation\" rel=\"Ext.form.action.Submit-cfg-clientValidation\" class=\"docClass\">Ext.form.action.Submit.clientValidation</a> option set.</p>\n"},"createInputCmp":{"!type":"fn() -> !this"},"createLink":{"!type":"fn() -> !this","!doc":"<p>used internally</p>\n"},"createToolbar":{"!type":"fn(editor: +Ext.form.field.HtmlEditor) -> !this","!doc":"<p>Called when the editor creates its toolbar. Override this method if you need to\nadd custom toolbar buttons.</p>\n"},"deferFocus":{"!type":"fn() -> !this"},"disableItems":{"!type":"fn(disabled: ?) -> !this"},"execCmd":{"!type":"fn(cmd: string, value?: string|bool) -> !this","!doc":"<p>Executes a Midas editor command directly on the editor document. For visual commands, you should use\n<a href=\"#!/api/Ext.form.field.HtmlEditor-method-relayCmd\" rel=\"Ext.form.field.HtmlEditor-method-relayCmd\" class=\"docClass\">relayCmd</a> instead. <strong>This should only be called after the editor is initialized.</strong></p>\n"},"focus":{"!type":"fn(eOpts: ?)"},"getDesignMode":{"!type":"fn() -> !this"},"getDoc":{"!type":"fn() -> !this"},"getDocMarkup":{"!type":"fn() -> !this","!doc":"<p>Called when the editor initializes the iframe with HTML contents. Override this method if you\nwant to change the initialization markup of the iframe (e.g. to add stylesheets).</p>\n\n<p><strong>Note:</strong> IE8-Standards has unwanted scroller behavior, so the default meta tag forces IE7 compatibility.\nAlso note that forcing IE7 mode works when the page is loaded normally, but if you are using IE's Web\nDeveloper Tools to manually set the document mode, that will take precedence and override what this\ncode sets by default. This can be confusing when developing, but is not a user-facing issue.</p>\n"},"getEditorBody":{"!type":"fn() -> !this"},"getFocusEl":{"!type":"fn() -> +Ext.Element","!doc":"<p>Returns the focus holder element associated with this Container. By default, this is the Container's target\nelement. Subclasses which use embedded focusable elements (such as Window and Button) should override this for use\nby the <a href=\"#!/api/Ext.form.field.HtmlEditor-method-focus\" rel=\"Ext.form.field.HtmlEditor-method-focus\" class=\"docClass\">focus</a> method.</p>\n"},"getInputCmpCfg":{"!type":"fn() -> !this"},"getMaskTarget":{"!type":"fn() -> !this"},"getToolbar":{"!type":"fn() -> +Ext.toolbar.Toolbar","!doc":"<p>Returns the editor's toolbar. <strong>This is only available after the editor has been rendered.</strong></p>\n"},"getToolbarCfg":{"!type":"fn() -> !this"},"getValue":{"!type":"fn() -> ?","!doc":"<p>Returns the current data value of the field. The type of value returned is particular to the type of the\nparticular field (e.g. a Date object for <a href=\"#!/api/Ext.form.field.Date\" rel=\"Ext.form.field.Date\" class=\"docClass\">Ext.form.field.Date</a>).</p>\n"},"getWin":{"!type":"fn() -> !this"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>The initComponent template method is an important initialization step for a Component. It is intended to be\nimplemented by each subclass of <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> to provide any needed constructor logic. The\ninitComponent method of the class being created is called first, with each initComponent method\nup the hierarchy to <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> being called thereafter. This makes it easy to implement and,\nif needed, override the constructor logic of the Component at any step in the hierarchy.</p>\n\n<p>The initComponent method <strong>must</strong> contain a call to <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a> in order\nto ensure that the parent class' initComponent method is also called.</p>\n\n<p>All config options passed to the constructor are applied to <code>this</code> before initComponent is called,\nso you can simply access them with <code>this.someOption</code>.</p>\n\n<p>The following example demonstrates using a dynamic string for the text of a button at the time of\ninstantiation of the class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('DynamicButtonText', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n\n    initComponent: function() {\n        this.text = new Date();\n        this.renderTo = <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>();\n        this.callParent();\n    }\n});\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function() {\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('DynamicButtonText');\n});\n</code></pre>\n"},"initDefaultFont":{"!type":"fn() -> !this"},"initEditor":{"!type":"fn() -> !this"},"initFrameDoc":{"!type":"fn() -> !this"},"insertAtCursor":{"!type":"fn(text: string) -> !this","!doc":"<p>Inserts the passed text at the current cursor position.\n<strong>Note:</strong> the editor must be initialized and activated to insert text.</p>\n"},"isEqual":{"!type":"fn(value1: ?, value2: ?) -> bool","!doc":"<p>Returns whether two field <a href=\"#!/api/Ext.form.field.HtmlEditor-method-getValue\" rel=\"Ext.form.field.HtmlEditor-method-getValue\" class=\"docClass\">values</a> are logically equal. Field implementations may override this\nto provide custom comparison logic appropriate for the particular field's data type.</p>\n"},"onEditorEvent":{"!type":"fn(e: ?) -> !this"},"onFirstFocus":{"!type":"fn() -> !this"},"onRelayedEvent":{"!type":"fn(event: ?) -> !this"},"pushValue":{"!type":"fn() -> !this","!doc":"<p>Pushes the value of the textarea into the iframe editor.</p>\n"},"relayBtnCmd":{"!type":"fn(btn: ?) -> !this"},"relayCmd":{"!type":"fn(cmd: string, value?: string|bool) -> !this","!doc":"<p>Executes a Midas editor command on the editor document and performs necessary focus and toolbar updates.\n<strong>This should only be called after the editor is initialized.</strong></p>\n"},"setDesignMode":{"!type":"fn(mode: ?) -> !this","!doc":"<p>Sets current design mode. To enable, mode can be true or 'on', off otherwise</p>\n"},"setReadOnly":{"!type":"fn(readOnly: bool) -> !this","!doc":"<p>Sets the read only state of this field.</p>\n"},"setValue":{"!type":"fn(value: ?) -> +Ext.form.field.Field","!doc":"<p>Sets a data value into the field and runs the change detection and validation.</p>\n"},"syncValue":{"!type":"fn() -> !this","!doc":"<p>Syncs the contents of the editor iframe with the textarea.</p>\n"},"toggleSourceEdit":{"!type":"fn(sourceEditMode?: bool) -> !this","!doc":"<p>Toggles the editor between standard and source edit mode.</p>\n"},"updateToolbar":{"!type":"fn() -> !this","!doc":"<p>Triggers a toolbar update by reading the markup state of the current selection in the editor.</p>\n"},"validate":{"!type":"fn()"},"activate":{"!type":"fn(this: +Ext.form.field.HtmlEditor, eOpts: ?)","!doc":"<p>Fires when the editor is first receives the focus. Any insertion must wait until after this event.</p>\n"},"beforepush":{"!type":"fn(this: +Ext.form.field.HtmlEditor, html: string, eOpts: ?)","!doc":"<p>Fires before the iframe editor is updated with content from the textarea. Return false to cancel the\npush.</p>\n"},"beforesync":{"!type":"fn(this: +Ext.form.field.HtmlEditor, html: string, eOpts: ?)","!doc":"<p>Fires before the textarea is updated with content from the editor iframe. Return false to cancel the\nsync.</p>\n"},"blur":{"!type":"fn(eOpts: ?)"},"editmodechange":{"!type":"fn(this: +Ext.form.field.HtmlEditor, sourceEdit: bool, eOpts: ?)","!doc":"<p>Fires when the editor switches edit modes</p>\n"},"initialize":{"!type":"fn(this: +Ext.form.field.HtmlEditor, eOpts: ?)","!doc":"<p>Fires when the editor is fully initialized (including the iframe)</p>\n"},"push":{"!type":"fn(this: +Ext.form.field.HtmlEditor, html: string, eOpts: ?)","!doc":"<p>Fires when the iframe editor is updated with content from the textarea.</p>\n"},"specialkey":{"!type":"fn(eOpts: ?)"},"sync":{"!type":"fn(this: +Ext.form.field.HtmlEditor, html: string, eOpts: ?)","!doc":"<p>Fires when the textarea is updated with content from the editor iframe.</p>\n"}}},"Number":{"!doc":"<p>A numeric text field that provides automatic keystroke filtering to disallow non-numeric characters,\nand numeric validation to limit the value to a range of valid numbers. The range of acceptable number\nvalues can be controlled by setting the <a href=\"#!/api/Ext.form.field.Number-cfg-minValue\" rel=\"Ext.form.field.Number-cfg-minValue\" class=\"docClass\">minValue</a> and <a href=\"#!/api/Ext.form.field.Number-cfg-maxValue\" rel=\"Ext.form.field.Number-cfg-maxValue\" class=\"docClass\">maxValue</a> configs, and fractional\ndecimals can be disallowed by setting <a href=\"#!/api/Ext.form.field.Number-cfg-allowDecimals\" rel=\"Ext.form.field.Number-cfg-allowDecimals\" class=\"docClass\">allowDecimals</a> to <code>false</code>.</p>\n\n<p>By default, the number field is also rendered with a set of up/down spinner buttons and has\nup/down arrow key and mouse wheel event listeners attached for incrementing/decrementing the value by the\n<a href=\"#!/api/Ext.form.field.Number-cfg-step\" rel=\"Ext.form.field.Number-cfg-step\" class=\"docClass\">step</a> value. To hide the spinner buttons set <code><a href=\"#!/api/Ext.form.field.Number-cfg-hideTrigger\" rel=\"Ext.form.field.Number-cfg-hideTrigger\" class=\"docClass\">hideTrigger</a>:true</code>; to disable\nthe arrow key and mouse wheel handlers set <code><a href=\"#!/api/Ext.form.field.Number-cfg-keyNavEnabled\" rel=\"Ext.form.field.Number-cfg-keyNavEnabled\" class=\"docClass\">keyNavEnabled</a>:false</code> and\n<code><a href=\"#!/api/Ext.form.field.Number-cfg-mouseWheelEnabled\" rel=\"Ext.form.field.Number-cfg-mouseWheelEnabled\" class=\"docClass\">mouseWheelEnabled</a>:false</code>. See the example below.</p>\n\n<h1>Example usage</h1>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>', {\n    title: 'On The Wall',\n    width: 300,\n    bodyPadding: 10,\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    items: [{\n        xtype: 'numberfield',\n        anchor: '100%',\n        name: 'bottles',\n        fieldLabel: 'Bottles of Beer',\n        value: 99,\n        maxValue: 99,\n        minValue: 0\n    }],\n    buttons: [{\n        text: 'Take one down, pass it around',\n        handler: function() {\n            this.up('form').down('[name=bottles]').spinDown();\n        }\n    }]\n});\n</code></pre>\n\n<h1>Removing UI Enhancements</h1>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>', {\n    title: 'Personal Info',\n    width: 300,\n    bodyPadding: 10,\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    items: [{\n        xtype: 'numberfield',\n        anchor: '100%',\n        name: 'age',\n        fieldLabel: 'Age',\n        minValue: 0, //prevents negative numbers\n\n        // Remove spinner buttons, and arrow key and mouse wheel listeners\n        hideTrigger: true,\n        keyNavEnabled: false,\n        mouseWheelEnabled: false\n    }]\n});\n</code></pre>\n\n<h1>Using Step</h1>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>', {\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    title: 'Step',\n    width: 300,\n    bodyPadding: 10,\n    items: [{\n        xtype: 'numberfield',\n        anchor: '100%',\n        name: 'evens',\n        fieldLabel: 'Even Numbers',\n\n        // Set step so it skips every other number\n        step: 2,\n        value: 0,\n\n        // Add change handler to force user-entered numbers to evens\n        listeners: {\n            change: function(field, value) {\n                value = parseInt(value, 10);\n                field.setValue(value + value % 2);\n            }\n        }\n    }]\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_form_field_Number_cfg)","prototype":{"!proto":"Ext.form.field.Spinner.prototype","allowDecimals":{"!type":"bool","!doc":"<p>False to disallow decimal values</p>\n"},"allowExponential":{"!type":"bool","!doc":"<p>Set to <code>false</code> to disallow Exponential number notation</p>\n"},"autoStripChars":{"!type":"bool","!doc":"<p>True to automatically strip not allowed characters from the field.</p>\n"},"baseChars":{"!type":"string","!doc":"<p>The base set of characters to evaluate as valid numbers.</p>\n"},"decimalPrecision":{"!type":"number","!doc":"<p>The maximum precision to display after the decimal separator</p>\n"},"decimalSeparator":{"!type":"string","!doc":"<p>Character(s) to allow as the decimal separator</p>\n"},"maskRe":{"!type":"+RegExp"},"maxText":{"!type":"string","!doc":"<p>Error text to display if the maximum value validation fails.</p>\n"},"maxValue":{"!type":"number","!doc":"<p>The maximum allowed value. Will be used by the field's validation logic, and for\n<a href=\"#!/api/Ext.form.field.Spinner-method-setSpinUpEnabled\" rel=\"Ext.form.field.Spinner-method-setSpinUpEnabled\" class=\"docClass\">enabling/disabling the up spinner button</a>.</p>\n\n<p>Defaults to Number.MAX_VALUE.</p>\n"},"minText":{"!type":"string","!doc":"<p>Error text to display if the minimum value validation fails.</p>\n"},"minValue":{"!type":"number","!doc":"<p>The minimum allowed value. Will be used by the field's validation logic,\nand for <a href=\"#!/api/Ext.form.field.Spinner-method-setSpinUpEnabled\" rel=\"Ext.form.field.Spinner-method-setSpinUpEnabled\" class=\"docClass\">enabling/disabling the down spinner button</a>.</p>\n\n<p>Defaults to Number.NEGATIVE_INFINITY.</p>\n"},"nanText":{"!type":"string","!doc":"<p>Error text to display if the value is not a valid number. For example, this can happen if a valid character like\n'.' or '-' is left in the field with no number.</p>\n"},"negativeText":{"!type":"string","!doc":"<p>Error text to display if the value is negative and <a href=\"#!/api/Ext.form.field.Number-cfg-minValue\" rel=\"Ext.form.field.Number-cfg-minValue\" class=\"docClass\">minValue</a> is set to 0. This is used instead of the\n<a href=\"#!/api/Ext.form.field.Number-cfg-minText\" rel=\"Ext.form.field.Number-cfg-minText\" class=\"docClass\">minText</a> in that circumstance only.</p>\n"},"step":{"!type":"number","!doc":"<p>Specifies a numeric interval by which the field's value will be incremented or decremented when the user invokes\nthe spinner.</p>\n"},"stripCharsRe":{"!type":"+RegExp"},"submitLocaleSeparator":{"!type":"bool","!doc":"<p>False to ensure that the <a href=\"#!/api/Ext.form.field.Number-method-getSubmitValue\" rel=\"Ext.form.field.Number-method-getSubmitValue\" class=\"docClass\">getSubmitValue</a> method strips\nalways uses <code>.</code> as the separator, regardless of the <a href=\"#!/api/Ext.form.field.Number-cfg-decimalSeparator\" rel=\"Ext.form.field.Number-cfg-decimalSeparator\" class=\"docClass\">decimalSeparator</a>\nconfiguration.</p>\n"},"beforeBlur":{"!type":"fn() -> !this","!doc":"<p>Template method to do any pre-blur processing.</p>\n"},"fixPrecision":{"!type":"fn(value: ?) -> !this"},"getErrors":{"!type":"fn(value?: ?) -> [string]","!doc":"<p>Runs all of Number's validations and returns an array of any errors. Note that this first runs Text's\nvalidations, so the returned array is an amalgamation of all field errors. The additional validations run test\nthat the value is a number, and that it is within the configured min and max values.</p>\n"},"getSubmitValue":{"!type":"fn() -> string","!doc":"<p>Returns the value that would be included in a standard form submit for this field. This will be combined with the\nfield's name to form a name=value pair in the <a href=\"#!/api/Ext.form.field.Number-method-getSubmitData\" rel=\"Ext.form.field.Number-method-getSubmitData\" class=\"docClass\">submitted parameters</a>. If an empty string is\nreturned then just the name= will be submitted; if null is returned then nothing will be submitted.</p>\n\n<p>Note that the value returned will have been <a href=\"#!/api/Ext.form.field.Number-method-processRawValue\" rel=\"Ext.form.field.Number-method-processRawValue\" class=\"docClass\">processed</a> but may or may not have been\nsuccessfully <a href=\"#!/api/Ext.form.field.Number-method-validate\" rel=\"Ext.form.field.Number-method-validate\" class=\"docClass\">validated</a>.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"onChange":{"!type":"fn() -> !this","!doc":"<p>If grow=true, invoke the autoSize method when the field's value is changed.</p>\n"},"onSpinDown":{"!type":"fn() -> !this","!doc":"<p>This method is called when the spinner down button is clicked, or when the down arrow key is pressed if\n<a href=\"#!/api/Ext.form.field.Number-cfg-keyNavEnabled\" rel=\"Ext.form.field.Number-cfg-keyNavEnabled\" class=\"docClass\">keyNavEnabled</a> is true. Must be implemented by subclasses.</p>\n"},"onSpinUp":{"!type":"fn() -> !this","!doc":"<p>This method is called when the spinner up button is clicked, or when the up arrow key is pressed if\n<a href=\"#!/api/Ext.form.field.Number-cfg-keyNavEnabled\" rel=\"Ext.form.field.Number-cfg-keyNavEnabled\" class=\"docClass\">keyNavEnabled</a> is true. Must be implemented by subclasses.</p>\n"},"parseValue":{"!type":"fn(value: ?) -> !this","!doc":"<p>private</p>\n"},"rawToValue":{"!type":"fn(rawValue: ?) -> ?","!doc":"<p>Converts a raw input field value into a mixed-type value that is suitable for this particular field type. This\nallows controlling the normalization and conversion of user-entered values into field-type-appropriate values,\ne.g. a Date object for <a href=\"#!/api/Ext.form.field.Date\" rel=\"Ext.form.field.Date\" class=\"docClass\">Ext.form.field.Date</a>, and is invoked by <a href=\"#!/api/Ext.form.field.Number-method-getValue\" rel=\"Ext.form.field.Number-method-getValue\" class=\"docClass\">getValue</a>.</p>\n\n<p>It is up to individual implementations to decide how to handle raw values that cannot be successfully converted\nto the desired object type.</p>\n\n<p>See <a href=\"#!/api/Ext.form.field.Number-method-valueToRaw\" rel=\"Ext.form.field.Number-method-valueToRaw\" class=\"docClass\">valueToRaw</a> for the opposite conversion.</p>\n\n<p>The base implementation does no conversion, returning the raw value untouched.</p>\n"},"setMaxValue":{"!type":"fn(value: number) -> !this","!doc":"<p>Replaces any existing <a href=\"#!/api/Ext.form.field.Number-cfg-maxValue\" rel=\"Ext.form.field.Number-cfg-maxValue\" class=\"docClass\">maxValue</a> with the new value.</p>\n"},"setMinValue":{"!type":"fn(value: number) -> !this","!doc":"<p>Replaces any existing <a href=\"#!/api/Ext.form.field.Number-cfg-minValue\" rel=\"Ext.form.field.Number-cfg-minValue\" class=\"docClass\">minValue</a> with the new value.</p>\n"},"setSpinDownEnabled":{"!type":"fn(enabled: ?, internal: ?) -> !this","!doc":"<p>Sets whether the spinner down button is enabled.</p>\n"},"setSpinUpEnabled":{"!type":"fn(enabled: ?, internal: ?) -> !this","!doc":"<p>Sets whether the spinner up button is enabled.</p>\n"},"setSpinValue":{"!type":"fn(value: ?) -> !this"},"toggleSpinners":{"!type":"fn() -> !this"},"valueToRaw":{"!type":"fn(value: ?) -> ?","!doc":"<p>Converts a mixed-type value to a raw representation suitable for displaying in the field. This allows controlling\nhow value objects passed to <a href=\"#!/api/Ext.form.field.Number-method-setValue\" rel=\"Ext.form.field.Number-method-setValue\" class=\"docClass\">setValue</a> are shown to the user, including localization. For instance, for a\n<a href=\"#!/api/Ext.form.field.Date\" rel=\"Ext.form.field.Date\" class=\"docClass\">Ext.form.field.Date</a>, this would control how a Date object passed to <a href=\"#!/api/Ext.form.field.Number-method-setValue\" rel=\"Ext.form.field.Number-method-setValue\" class=\"docClass\">setValue</a> would be converted\nto a String for display in the field.</p>\n\n<p>See <a href=\"#!/api/Ext.form.field.Number-method-rawToValue\" rel=\"Ext.form.field.Number-method-rawToValue\" class=\"docClass\">rawToValue</a> for the opposite conversion.</p>\n\n<p>The base implementation simply does a standard toString conversion, and converts <a href=\"#!/api/Ext-method-isEmpty\" rel=\"Ext-method-isEmpty\" class=\"docClass\">empty values</a>\nto an empty string.</p>\n"}}},"Picker":{"!doc":"<p>An abstract class for fields that have a single trigger which opens a \"picker\" popup below the field, e.g. a combobox\nmenu list or a date picker. It provides a base implementation for toggling the picker's visibility when the trigger\nis clicked, as well as keyboard navigation and some basic events. Sizing and alignment of the picker can be\ncontrolled via the <a href=\"#!/api/Ext.form.field.Picker-cfg-matchFieldWidth\" rel=\"Ext.form.field.Picker-cfg-matchFieldWidth\" class=\"docClass\">matchFieldWidth</a> and <a href=\"#!/api/Ext.form.field.Picker-cfg-pickerAlign\" rel=\"Ext.form.field.Picker-cfg-pickerAlign\" class=\"docClass\">pickerAlign</a>/<a href=\"#!/api/Ext.form.field.Picker-cfg-pickerOffset\" rel=\"Ext.form.field.Picker-cfg-pickerOffset\" class=\"docClass\">pickerOffset</a> config properties\nrespectively.</p>\n\n<p>You would not normally use this class directly, but instead use it as the parent class for a specific picker field\nimplementation. Subclasses must implement the <a href=\"#!/api/Ext.form.field.Picker-method-createPicker\" rel=\"Ext.form.field.Picker-method-createPicker\" class=\"docClass\">createPicker</a> method to create a picker component appropriate\nfor the field.</p>\n","!type":"fn(config: +Ext.Element|string|Ext_form_field_Picker_cfg)","prototype":{"!proto":"Ext.form.field.Trigger.prototype","editable":{"!type":"bool","!doc":"<p>False to prevent the user from typing text directly into the field; the field can only have its value set via\nselecting a value from the picker. In this state, the picker can also be opened by clicking directly on the input\nfield itself.</p>\n"},"matchFieldWidth":{"!type":"bool","!doc":"<p>Whether the picker dropdown's width should be explicitly set to match the width of the field. Defaults to true.</p>\n"},"openCls":{"!type":"string","!doc":"<p>A class to be added to the field's <a href=\"#!/api/Ext.form.field.Picker-property-bodyEl\" rel=\"Ext.form.field.Picker-property-bodyEl\" class=\"docClass\">bodyEl</a> element when the picker is opened.</p>\n"},"pickerAlign":{"!type":"string","!doc":"<p>The <a href=\"#!/api/Ext.util.Positionable-method-alignTo\" rel=\"Ext.util.Positionable-method-alignTo\" class=\"docClass\">alignment position</a> with which to align the picker. Defaults to \"tl-bl?\"</p>\n"},"pickerOffset":{"!type":"[number]","!doc":"<p>An offset [x,y] to use in addition to the <a href=\"#!/api/Ext.form.field.Picker-cfg-pickerAlign\" rel=\"Ext.form.field.Picker-cfg-pickerAlign\" class=\"docClass\">pickerAlign</a> when positioning the picker.\nDefaults to undefined.</p>\n"},"isExpanded":{"!type":"bool","!doc":"<p>True if the picker is currently expanded, false if not.</p>\n"},"alignPicker":{"!type":"fn() -> !this","!doc":"<p>Aligns the picker to the input element</p>\n"},"collapse":{"!type":"fn(field: +Ext.form.field.Picker, eOpts: ?)","!doc":"<p>Fires when the field's picker is collapsed.</p>\n"},"collapseIf":{"!type":"fn(e: ?) -> !this","!doc":"<p>Runs on mousewheel and mousedown of doc to check to see if we should collapse the picker</p>\n"},"createPicker":{"!type":"fn() -> !this","!doc":"<p>Creates and returns the component to be used as this field's picker. Must be implemented by subclasses of Picker.\nThe current field should also be passed as a configuration option to the picker component as the pickerField\nproperty.</p>\n"},"doAlign":{"!type":"fn() -> !this","!doc":"<p>Performs the alignment on the picker using the class defaults</p>\n"},"expand":{"!type":"fn(field: +Ext.form.field.Picker, eOpts: ?)","!doc":"<p>Fires when the field's picker is expanded.</p>\n"},"getPicker":{"!type":"fn() -> +Ext.Component","!doc":"<p>Returns a reference to the picker component for this field, creating it if necessary by\ncalling <a href=\"#!/api/Ext.form.field.Picker-method-createPicker\" rel=\"Ext.form.field.Picker-method-createPicker\" class=\"docClass\">createPicker</a>.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"initEvents":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"isEventWithinPickerLoadMask":{"!type":"fn(e: +Ext.EventObject) -> bool","!doc":"<p>returns true if the picker has a load mask and the passed event is within the load mask</p>\n"},"mimicBlur":{"!type":"fn(e: ?) -> !this"},"onCollapse":{"!type":"fn() -> !this"},"onDestroy":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the destroy operation.\nAfter calling the superclass's onDestroy, the Component will be destroyed.</p>\n"},"onDownArrow":{"!type":"fn(e: ?) -> !this"},"onEsc":{"!type":"fn(e: ?) -> !this","!doc":"<p>private</p>\n"},"onExpand":{"!type":"fn() -> !this"},"onTriggerClick":{"!type":"fn() -> !this","!doc":"<p>Handles the trigger click; by default toggles between expanding and collapsing the picker component.</p>\n"},"triggerBlur":{"!type":"fn() -> !this"},"select":{"!type":"fn(field: +Ext.form.field.Picker, value: ?, eOpts: ?)","!doc":"<p>Fires when a value is selected via the picker.</p>\n"}}},"Radio":{"!doc":"<p>Single radio field. Similar to checkbox, but automatically handles making sure only one radio is checked\nat a time within a group of radios with the same name.</p>\n\n<h1>Labeling</h1>\n\n<p>In addition to the <a href=\"#!/api/Ext.form.Labelable\" rel=\"Ext.form.Labelable\" class=\"docClass\">standard field labeling options</a>, radio buttons\nmay be given an optional <a href=\"#!/api/Ext.form.field.Radio-cfg-boxLabel\" rel=\"Ext.form.field.Radio-cfg-boxLabel\" class=\"docClass\">boxLabel</a> which will be displayed immediately to the right of the input. Also\nsee <a href=\"#!/api/Ext.form.RadioGroup\" rel=\"Ext.form.RadioGroup\" class=\"docClass\">Ext.form.RadioGroup</a> for a convenient method of grouping related radio buttons.</p>\n\n<h1>Values</h1>\n\n<p>The main value of a Radio field is a boolean, indicating whether or not the radio is checked.</p>\n\n<p>The following values will check the radio:</p>\n\n<ul>\n<li><code>true</code></li>\n<li><code>'true'</code></li>\n<li><code>'1'</code></li>\n<li><code>'on'</code></li>\n</ul>\n\n\n<p>Any other value will uncheck it.</p>\n\n<p>In addition to the main boolean value, you may also specify a separate <a href=\"#!/api/Ext.form.field.Radio-cfg-inputValue\" rel=\"Ext.form.field.Radio-cfg-inputValue\" class=\"docClass\">inputValue</a>. This will be sent\nas the parameter value when the form is <a href=\"#!/api/Ext.form.Basic-method-submit\" rel=\"Ext.form.Basic-method-submit\" class=\"docClass\">submitted</a>. You will want to set this\nvalue if you have multiple radio buttons with the same <a href=\"#!/api/Ext.form.field.Radio-cfg-name\" rel=\"Ext.form.field.Radio-cfg-name\" class=\"docClass\">name</a>, as is almost always the case.</p>\n\n<h1>Example usage</h1>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>', {\n    title      : 'Order Form',\n    width      : 300,\n    bodyPadding: 10,\n    renderTo   : <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    items: [\n        {\n            xtype      : 'fieldcontainer',\n            fieldLabel : 'Size',\n            defaultType: 'radiofield',\n            defaults: {\n                flex: 1\n            },\n            layout: 'hbox',\n            items: [\n                {\n                    boxLabel  : 'M',\n                    name      : 'size',\n                    inputValue: 'm',\n                    id        : 'radio1'\n                }, {\n                    boxLabel  : 'L',\n                    name      : 'size',\n                    inputValue: 'l',\n                    id        : 'radio2'\n                }, {\n                    boxLabel  : 'XL',\n                    name      : 'size',\n                    inputValue: 'xl',\n                    id        : 'radio3'\n                }\n            ]\n        },\n        {\n            xtype      : 'fieldcontainer',\n            fieldLabel : 'Color',\n            defaultType: 'radiofield',\n            defaults: {\n                flex: 1\n            },\n            layout: 'hbox',\n            items: [\n                {\n                    boxLabel  : 'Blue',\n                    name      : 'color',\n                    inputValue: 'blue',\n                    id        : 'radio4'\n                }, {\n                    boxLabel  : 'Grey',\n                    name      : 'color',\n                    inputValue: 'grey',\n                    id        : 'radio5'\n                }, {\n                    boxLabel  : 'Black',\n                    name      : 'color',\n                    inputValue: 'black',\n                    id        : 'radio6'\n                }\n            ]\n        }\n    ],\n    bbar: [\n        {\n            text: 'Smaller Size',\n            handler: function() {\n                var radio1 = <a href=\"#!/api/Ext-method-getCmp\" rel=\"Ext-method-getCmp\" class=\"docClass\">Ext.getCmp</a>('radio1'),\n                    radio2 = <a href=\"#!/api/Ext-method-getCmp\" rel=\"Ext-method-getCmp\" class=\"docClass\">Ext.getCmp</a>('radio2'),\n                    radio3 = <a href=\"#!/api/Ext-method-getCmp\" rel=\"Ext-method-getCmp\" class=\"docClass\">Ext.getCmp</a>('radio3');\n\n                //if L is selected, change to M\n                if (radio2.getValue()) {\n                    radio1.setValue(true);\n                    return;\n                }\n\n                //if XL is selected, change to L\n                if (radio3.getValue()) {\n                    radio2.setValue(true);\n                    return;\n                }\n\n                //if nothing is set, set size to S\n                radio1.setValue(true);\n            }\n        },\n        {\n            text: 'Larger Size',\n            handler: function() {\n                var radio1 = <a href=\"#!/api/Ext-method-getCmp\" rel=\"Ext-method-getCmp\" class=\"docClass\">Ext.getCmp</a>('radio1'),\n                    radio2 = <a href=\"#!/api/Ext-method-getCmp\" rel=\"Ext-method-getCmp\" class=\"docClass\">Ext.getCmp</a>('radio2'),\n                    radio3 = <a href=\"#!/api/Ext-method-getCmp\" rel=\"Ext-method-getCmp\" class=\"docClass\">Ext.getCmp</a>('radio3');\n\n                //if M is selected, change to L\n                if (radio1.getValue()) {\n                    radio2.setValue(true);\n                    return;\n                }\n\n                //if L is selected, change to XL\n                if (radio2.getValue()) {\n                    radio3.setValue(true);\n                    return;\n                }\n\n                //if nothing is set, set size to XL\n                radio3.setValue(true);\n            }\n        },\n        '-',\n        {\n            text: 'Select color',\n            menu: {\n                indent: false,\n                items: [\n                    {\n                        text: 'Blue',\n                        handler: function() {\n                            var radio = <a href=\"#!/api/Ext-method-getCmp\" rel=\"Ext-method-getCmp\" class=\"docClass\">Ext.getCmp</a>('radio4');\n                            radio.setValue(true);\n                        }\n                    },\n                    {\n                        text: 'Grey',\n                        handler: function() {\n                            var radio = <a href=\"#!/api/Ext-method-getCmp\" rel=\"Ext-method-getCmp\" class=\"docClass\">Ext.getCmp</a>('radio5');\n                            radio.setValue(true);\n                        }\n                    },\n                    {\n                        text: 'Black',\n                        handler: function() {\n                            var radio = <a href=\"#!/api/Ext-method-getCmp\" rel=\"Ext-method-getCmp\" class=\"docClass\">Ext.getCmp</a>('radio6');\n                            radio.setValue(true);\n                        }\n                    }\n                ]\n            }\n        }\n    ]\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_form_field_Radio_cfg)","prototype":{"!proto":"Ext.form.field.Checkbox.prototype","focusCls":{"!type":"string","!doc":"<p>The CSS class to use when the radio field receives focus</p>\n"},"inputType":{"!type":"string","!doc":"<p>private</p>\n"},"uncheckedValue":{"!type":"string"},"ariaRole":{"!type":"string"},"formId":{"!type":"?"},"isRadio":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated Radio, or subclass thereof.</p>\n"},"getGroupValue":{"!type":"fn() -> string","!doc":"<p>If this radio is part of a group, it will return the selected value</p>\n"},"getManager":{"!type":"fn() -> !this","!doc":"<p>inherit docs</p>\n"},"getModelData":{"!type":"fn() -> ?","!doc":"<p>Returns the value(s) that should be saved to the <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a> instance for this field, when <a href=\"#!/api/Ext.form.Basic-method-updateRecord\" rel=\"Ext.form.Basic-method-updateRecord\" class=\"docClass\">Ext.form.Basic.updateRecord</a> is called. Typically this will be an object with a single name-value pair, the name\nbeing this field's <a href=\"#!/api/Ext.form.field.Radio-method-getName\" rel=\"Ext.form.field.Radio-method-getName\" class=\"docClass\">name</a> and the value being its current data value. More advanced field\nimplementations may return more than one name-value pair. The returned values will be saved to the corresponding\nfield names in the Model.</p>\n\n<p>Note that the values returned from this method are not guaranteed to have been successfully <a href=\"#!/api/Ext.form.field.Radio-method-validate\" rel=\"Ext.form.field.Radio-method-validate\" class=\"docClass\">validated</a>.</p>\n"},"getSubmitValue":{"!type":"fn() -> bool|?","!doc":"<p>Returns the submit value for the checkbox which can be used when submitting forms.</p>\n"},"onBoxClick":{"!type":"fn(e: ?) -> !this","!doc":"<p>Handle click on the radio button</p>\n"},"onChange":{"!type":"fn(newVal: ?, oldVal: ?) -> !this","!doc":"<p>inherit docs</p>\n"},"onRemoved":{"!type":"fn() -> !this","!doc":"<p>Method to manage awareness of when components are removed from their\nrespective Container, firing a <a href=\"#!/api/Ext.form.field.Radio-event-removed\" rel=\"Ext.form.field.Radio-event-removed\" class=\"docClass\">removed</a> event. References are properly\ncleaned up after removing a component from its owning container.</p>\n\n<p>Allows addition of behavior when a Component is removed from\nits parent Container. At this stage, the Component has been\nremoved from its parent Container's collection of child items,\nbut has not been destroyed (It will be destroyed if the parent\nContainer's <code>autoDestroy</code> is <code>true</code>, or if the remove call was\npassed a truthy second parameter). After calling the\nsuperclass's <code>onRemoved</code>, the <code>ownerCt</code> and the <code>refOwner</code> will not\nbe present.</p>\n"},"setValue":{"!type":"fn(value: string|bool) -> +Ext.form.field.Radio","!doc":"<p>Sets either the checked/unchecked status of this Radio, or, if a string value is passed, checks a sibling Radio\nof the same name whose value is the value specified.</p>\n"}}},"Spinner":{"!doc":"<p>A field with a pair of up/down spinner buttons. This class is not normally instantiated directly,\ninstead it is subclassed and the <a href=\"#!/api/Ext.form.field.Spinner-method-onSpinUp\" rel=\"Ext.form.field.Spinner-method-onSpinUp\" class=\"docClass\">onSpinUp</a> and <a href=\"#!/api/Ext.form.field.Spinner-method-onSpinDown\" rel=\"Ext.form.field.Spinner-method-onSpinDown\" class=\"docClass\">onSpinDown</a> methods are implemented\nto handle when the buttons are clicked. A good example of this is the <a href=\"#!/api/Ext.form.field.Number\" rel=\"Ext.form.field.Number\" class=\"docClass\">Ext.form.field.Number</a>\nfield which uses the spinner to increment and decrement the field's value by its\n<a href=\"#!/api/Ext.form.field.Number-cfg-step\" rel=\"Ext.form.field.Number-cfg-step\" class=\"docClass\">step</a> config value.</p>\n\n<p>For example:</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Ext.ux.CustomSpinner', {\n    extend: '<a href=\"#!/api/Ext.form.field.Spinner\" rel=\"Ext.form.field.Spinner\" class=\"docClass\">Ext.form.field.Spinner</a>',\n    alias: 'widget.customspinner',\n\n    // override onSpinUp (using step isn't neccessary)\n    onSpinUp: function() {\n        var me = this;\n        if (!me.readOnly) {\n            var val = parseInt(me.getValue().split(' '), 10)||0; // gets rid of \" Pack\", defaults to zero on parse failure\n            me.setValue((val + me.step) + ' Pack');\n        }\n    },\n\n    // override onSpinDown\n    onSpinDown: function() {\n        var me = this;\n        if (!me.readOnly) {\n           var val = parseInt(me.getValue().split(' '), 10)||0; // gets rid of \" Pack\", defaults to zero on parse failure\n           if (val &lt;= me.step) {\n               me.setValue('Dry!');\n           } else {\n               me.setValue((val - me.step) + ' Pack');\n           }\n        }\n    }\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.FormPanel</a>', {\n    title: 'Form with SpinnerField',\n    bodyPadding: 5,\n    width: 350,\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    items:[{\n        xtype: 'customspinner',\n        fieldLabel: 'How Much Beer?',\n        step: 6\n    }]\n});\n</code></pre>\n\n<p>By default, pressing the up and down arrow keys will also trigger the onSpinUp and onSpinDown methods;\nto prevent this, set <code><a href=\"#!/api/Ext.form.field.Spinner-cfg-keyNavEnabled\" rel=\"Ext.form.field.Spinner-cfg-keyNavEnabled\" class=\"docClass\">keyNavEnabled</a> = false</code>.</p>\n","!type":"fn(config: +Ext.Element|string|Ext_form_field_Spinner_cfg)","prototype":{"!proto":"Ext.form.field.Trigger.prototype","keyNavEnabled":{"!type":"bool","!doc":"<p>Specifies whether the up and down arrow keys should trigger spinning up and down. Defaults to true.</p>\n"},"mouseWheelEnabled":{"!type":"bool","!doc":"<p>Specifies whether the mouse wheel should trigger spinning up and down while the field has focus.\nDefaults to true.</p>\n"},"repeatTriggerClick":{"!type":"bool","!doc":"<p>Whether a <a href=\"#!/api/Ext.util.ClickRepeater\" rel=\"Ext.util.ClickRepeater\" class=\"docClass\">click repeater</a> should be attached to the spinner buttons.\nDefaults to true.</p>\n"},"spinDownEnabled":{"!type":"bool","!doc":"<p>Specifies whether the down spinner button is enabled. Defaults to true. To change this after the component is\ncreated, use the <a href=\"#!/api/Ext.form.field.Spinner-method-setSpinDownEnabled\" rel=\"Ext.form.field.Spinner-method-setSpinDownEnabled\" class=\"docClass\">setSpinDownEnabled</a> method.</p>\n"},"spinUpEnabled":{"!type":"bool","!doc":"<p>Specifies whether the up spinner button is enabled. Defaults to true. To change this after the component is\ncreated, use the <a href=\"#!/api/Ext.form.field.Spinner-method-setSpinUpEnabled\" rel=\"Ext.form.field.Spinner-method-setSpinUpEnabled\" class=\"docClass\">setSpinUpEnabled</a> method.</p>\n"},"spinDownEl":{"!type":"+Ext.Element","!doc":"<p>The spinner down button element</p>\n"},"spinUpEl":{"!type":"+Ext.Element","!doc":"<p>The spinner up button element</p>\n"},"trigger1Cls":{"!type":"string"},"trigger2Cls":{"!type":"string"},"triggerTpl":{"!type":"string"},"getSubTplMarkup":{"!type":"fn(values: ?) -> !this","!doc":"<p>Gets the markup to be inserted into the outer template's bodyEl. For fields this is the actual input element.</p>\n"},"getTriggerData":{"!type":"fn() -> !this"},"getTriggerMarkup":{"!type":"fn() -> !this"},"getTriggerWidth":{"!type":"fn() -> number","!doc":"<p>Get the total width of the spinner button area.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"onDestroy":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the destroy operation.\nAfter calling the superclass's onDestroy, the Component will be destroyed.</p>\n"},"onMouseWheel":{"!type":"fn(e: ?) -> !this","!doc":"<p>Handles mousewheel events on the field</p>\n"},"onRender":{"!type":"fn() -> !this","!doc":"<p>Override.</p>\n"},"onSpinDown":{"!type":"fn() -> !this","!doc":"<p>This method is called when the spinner down button is clicked, or when the down arrow key is pressed if\n<a href=\"#!/api/Ext.form.field.Spinner-cfg-keyNavEnabled\" rel=\"Ext.form.field.Spinner-cfg-keyNavEnabled\" class=\"docClass\">keyNavEnabled</a> is true. Must be implemented by subclasses.</p>\n"},"onSpinUp":{"!type":"fn() -> !this","!doc":"<p>This method is called when the spinner up button is clicked, or when the up arrow key is pressed if\n<a href=\"#!/api/Ext.form.field.Spinner-cfg-keyNavEnabled\" rel=\"Ext.form.field.Spinner-cfg-keyNavEnabled\" class=\"docClass\">keyNavEnabled</a> is true. Must be implemented by subclasses.</p>\n"},"onTrigger1Click":{"!type":"fn() -> !this","!doc":"<p>Handles the spinner up button clicks.</p>\n"},"onTrigger2Click":{"!type":"fn() -> !this","!doc":"<p>Handles the spinner down button clicks.</p>\n"},"onTriggerWrapMouseup":{"!type":"fn() -> !this","!doc":"<p>private\nHandle trigger mouse up gesture; refocuses the input element upon end of spin.</p>\n"},"setSpinDownEnabled":{"!type":"fn(enabled: bool) -> !this","!doc":"<p>Sets whether the spinner down button is enabled.</p>\n"},"setSpinUpEnabled":{"!type":"fn(enabled: bool) -> !this","!doc":"<p>Sets whether the spinner up button is enabled.</p>\n"},"spinDown":{"!type":"fn() -> !this","!doc":"<p>Triggers the spinner to step down; fires the <a href=\"#!/api/Ext.form.field.Spinner-event-spin\" rel=\"Ext.form.field.Spinner-event-spin\" class=\"docClass\">spin</a> and <a href=\"#!/api/Ext.form.field.Spinner-event-spindown\" rel=\"Ext.form.field.Spinner-event-spindown\" class=\"docClass\">spindown</a> events and calls the\n<a href=\"#!/api/Ext.form.field.Spinner-method-onSpinDown\" rel=\"Ext.form.field.Spinner-method-onSpinDown\" class=\"docClass\">onSpinDown</a> method. Does nothing if the field is <a href=\"#!/api/Ext.form.field.Spinner-cfg-disabled\" rel=\"Ext.form.field.Spinner-cfg-disabled\" class=\"docClass\">disabled</a> or if <a href=\"#!/api/Ext.form.field.Spinner-cfg-spinDownEnabled\" rel=\"Ext.form.field.Spinner-cfg-spinDownEnabled\" class=\"docClass\">spinDownEnabled</a>\nis false.</p>\n"},"spinUp":{"!type":"fn() -> !this","!doc":"<p>Triggers the spinner to step up; fires the <a href=\"#!/api/Ext.form.field.Spinner-event-spin\" rel=\"Ext.form.field.Spinner-event-spin\" class=\"docClass\">spin</a> and <a href=\"#!/api/Ext.form.field.Spinner-event-spinup\" rel=\"Ext.form.field.Spinner-event-spinup\" class=\"docClass\">spinup</a> events and calls the\n<a href=\"#!/api/Ext.form.field.Spinner-method-onSpinUp\" rel=\"Ext.form.field.Spinner-method-onSpinUp\" class=\"docClass\">onSpinUp</a> method. Does nothing if the field is <a href=\"#!/api/Ext.form.field.Spinner-cfg-disabled\" rel=\"Ext.form.field.Spinner-cfg-disabled\" class=\"docClass\">disabled</a> or if <a href=\"#!/api/Ext.form.field.Spinner-cfg-spinUpEnabled\" rel=\"Ext.form.field.Spinner-cfg-spinUpEnabled\" class=\"docClass\">spinUpEnabled</a>\nis false.</p>\n"},"spin":{"!type":"fn(this: +Ext.form.field.Spinner, direction: string, eOpts: ?)","!doc":"<p>Fires when the spinner is made to spin up or down.</p>\n"},"spindown":{"!type":"fn(this: +Ext.form.field.Spinner, eOpts: ?)","!doc":"<p>Fires when the spinner is made to spin down.</p>\n"},"spinup":{"!type":"fn(this: +Ext.form.field.Spinner, eOpts: ?)","!doc":"<p>Fires when the spinner is made to spin up.</p>\n"}}},"Text":{"!doc":"<p>A basic text field.  Can be used as a direct replacement for traditional text inputs,\nor as the base class for more sophisticated input controls (like <a href=\"#!/api/Ext.form.field.TextArea\" rel=\"Ext.form.field.TextArea\" class=\"docClass\">Ext.form.field.TextArea</a>\nand <a href=\"#!/api/Ext.form.field.ComboBox\" rel=\"Ext.form.field.ComboBox\" class=\"docClass\">Ext.form.field.ComboBox</a>). Has support for empty-field placeholder values (see <a href=\"#!/api/Ext.form.field.Text-cfg-emptyText\" rel=\"Ext.form.field.Text-cfg-emptyText\" class=\"docClass\">emptyText</a>).</p>\n\n<h1>Validation</h1>\n\n<p>The Text field has a useful set of validations built in:</p>\n\n<ul>\n<li><a href=\"#!/api/Ext.form.field.Text-cfg-allowBlank\" rel=\"Ext.form.field.Text-cfg-allowBlank\" class=\"docClass\">allowBlank</a> for making the field required</li>\n<li><a href=\"#!/api/Ext.form.field.Text-cfg-minLength\" rel=\"Ext.form.field.Text-cfg-minLength\" class=\"docClass\">minLength</a> for requiring a minimum value length</li>\n<li><a href=\"#!/api/Ext.form.field.Text-cfg-maxLength\" rel=\"Ext.form.field.Text-cfg-maxLength\" class=\"docClass\">maxLength</a> for setting a maximum value length (with <a href=\"#!/api/Ext.form.field.Text-cfg-enforceMaxLength\" rel=\"Ext.form.field.Text-cfg-enforceMaxLength\" class=\"docClass\">enforceMaxLength</a> to add it\nas the <code>maxlength</code> attribute on the input element)</li>\n<li><a href=\"#!/api/Ext.form.field.Text-cfg-regex\" rel=\"Ext.form.field.Text-cfg-regex\" class=\"docClass\">regex</a> to specify a custom regular expression for validation</li>\n</ul>\n\n\n<p>In addition, custom validations may be added:</p>\n\n<ul>\n<li><a href=\"#!/api/Ext.form.field.Text-cfg-vtype\" rel=\"Ext.form.field.Text-cfg-vtype\" class=\"docClass\">vtype</a> specifies a virtual type implementation from <a href=\"#!/api/Ext.form.field.VTypes\" rel=\"Ext.form.field.VTypes\" class=\"docClass\">Ext.form.field.VTypes</a> which can contain\ncustom validation logic</li>\n<li><a href=\"#!/api/Ext.form.field.Text-cfg-validator\" rel=\"Ext.form.field.Text-cfg-validator\" class=\"docClass\">validator</a> allows a custom arbitrary function to be called during validation</li>\n</ul>\n\n\n<p>The details around how and when each of these validation options get used are described in the\ndocumentation for <a href=\"#!/api/Ext.form.field.Text-method-getErrors\" rel=\"Ext.form.field.Text-method-getErrors\" class=\"docClass\">getErrors</a>.</p>\n\n<p>By default, the field value is checked for validity immediately while the user is typing in the\nfield. This can be controlled with the <a href=\"#!/api/Ext.form.field.Text-cfg-validateOnChange\" rel=\"Ext.form.field.Text-cfg-validateOnChange\" class=\"docClass\">validateOnChange</a>, <a href=\"#!/api/Ext.form.field.Text-cfg-checkChangeEvents\" rel=\"Ext.form.field.Text-cfg-checkChangeEvents\" class=\"docClass\">checkChangeEvents</a>, and\n<a href=\"#!/api/Ext.form.field.Text-cfg-checkChangeBuffer\" rel=\"Ext.form.field.Text-cfg-checkChangeBuffer\" class=\"docClass\">checkChangeBuffer</a> configurations. Also see the details on Form Validation in the\n<a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a> class documentation.</p>\n\n<h1>Masking and Character Stripping</h1>\n\n<p>Text fields can be configured with custom regular expressions to be applied to entered values before\nvalidation: see <a href=\"#!/api/Ext.form.field.Text-cfg-maskRe\" rel=\"Ext.form.field.Text-cfg-maskRe\" class=\"docClass\">maskRe</a> and <a href=\"#!/api/Ext.form.field.Text-cfg-stripCharsRe\" rel=\"Ext.form.field.Text-cfg-stripCharsRe\" class=\"docClass\">stripCharsRe</a> for details.</p>\n\n<h1>Example usage</h1>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>', {\n    title: 'Contact Info',\n    width: 300,\n    bodyPadding: 10,\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    items: [{\n        xtype: 'textfield',\n        name: 'name',\n        fieldLabel: 'Name',\n        allowBlank: false  // requires a non-empty value\n    }, {\n        xtype: 'textfield',\n        name: 'email',\n        fieldLabel: 'Email Address',\n        vtype: 'email'  // requires value to be a valid email address format\n    }]\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_form_field_Text_cfg)","prototype":{"!proto":"Ext.form.field.Base.prototype","allowBlank":{"!type":"bool","!doc":"<p>Specify false to validate that the value's length must be > 0. If <code>true</code>, then a blank value is <strong>always</strong> taken to be valid regardless of any <a href=\"#!/api/Ext.form.field.Text-cfg-vtype\" rel=\"Ext.form.field.Text-cfg-vtype\" class=\"docClass\">vtype</a>\nvalidation that may be applied.</p>\n\n<p>If <a href=\"#!/api/Ext.form.field.Text-cfg-vtype\" rel=\"Ext.form.field.Text-cfg-vtype\" class=\"docClass\">vtype</a> validation must still be applied to blank values, configure <a href=\"#!/api/Ext.form.field.Text-cfg-validateBlank\" rel=\"Ext.form.field.Text-cfg-validateBlank\" class=\"docClass\">validateBlank</a> as <code>true</code>;</p>\n"},"allowOnlyWhitespace":{"!type":"bool","!doc":"<p>Specify false to automatically trim the value before validating\nthe whether the value is blank. Setting this to false automatically\nsets <a href=\"#!/api/Ext.form.field.Text-cfg-allowBlank\" rel=\"Ext.form.field.Text-cfg-allowBlank\" class=\"docClass\">allowBlank</a> to false.</p>\n"},"blankText":{"!type":"string","!doc":"<p>The error text to display if the <strong><a href=\"#!/api/Ext.form.field.Text-cfg-allowBlank\" rel=\"Ext.form.field.Text-cfg-allowBlank\" class=\"docClass\">allowBlank</a></strong> validation fails</p>\n"},"disableKeyFilter":{"!type":"bool","!doc":"<p>Specify true to disable input keystroke filtering</p>\n"},"emptyCls":{"!type":"string","!doc":"<p>The CSS class to apply to an empty field to style the <strong><a href=\"#!/api/Ext.form.field.Text-cfg-emptyText\" rel=\"Ext.form.field.Text-cfg-emptyText\" class=\"docClass\">emptyText</a></strong>.\nThis class is automatically added and removed as needed depending on the current field value.</p>\n"},"emptyText":{"!type":"string","!doc":"<p>The default text to place into an empty field.</p>\n\n<p>Note that normally this value will be submitted to the server if this field is enabled; to prevent this you can\nset the <a href=\"#!/api/Ext.form.action.Action-cfg-submitEmptyText\" rel=\"Ext.form.action.Action-cfg-submitEmptyText\" class=\"docClass\">submitEmptyText</a> option of <a href=\"#!/api/Ext.form.Basic-method-submit\" rel=\"Ext.form.Basic-method-submit\" class=\"docClass\">Ext.form.Basic.submit</a> to\nfalse.</p>\n\n<p>Also note that if you use <a href=\"#!/api/Ext.form.field.Text-cfg-inputType\" rel=\"Ext.form.field.Text-cfg-inputType\" class=\"docClass\">inputType</a>:'file', <a href=\"#!/api/Ext.form.field.Text-cfg-emptyText\" rel=\"Ext.form.field.Text-cfg-emptyText\" class=\"docClass\">emptyText</a> is not supported and should be\navoided.</p>\n\n<p>Note that for browsers that support it, setting this property will use the HTML 5 placeholder attribute, and for\nolder browsers that don't support the HTML 5 placeholder attribute the value will be placed directly into the input\nelement itself as the raw value. This means that older browsers will obfuscate the <a href=\"#!/api/Ext.form.field.Text-cfg-emptyText\" rel=\"Ext.form.field.Text-cfg-emptyText\" class=\"docClass\">emptyText</a> value for\npassword input fields.</p>\n"},"enableKeyEvents":{"!type":"bool","!doc":"<p>true to enable the proxying of key events for the HTML input field</p>\n"},"enforceMaxLength":{"!type":"bool","!doc":"<p>True to set the maxLength property on the underlying input field. Defaults to false</p>\n"},"grow":{"!type":"bool","!doc":"<p>true if this field should automatically grow and shrink to its content</p>\n"},"growAppend":{"!type":"string","!doc":"<p>A string that will be appended to the field's current value for the purposes of calculating the target field\nsize. Only used when the <a href=\"#!/api/Ext.form.field.Text-cfg-grow\" rel=\"Ext.form.field.Text-cfg-grow\" class=\"docClass\">grow</a> config is true. Defaults to a single capital \"W\" (the widest character in\ncommon fonts) to leave enough space for the next typed character and avoid the field value shifting before the\nwidth is adjusted.</p>\n"},"growMax":{"!type":"number","!doc":"<p>The maximum width to allow when <code><a href=\"#!/api/Ext.form.field.Text-cfg-grow\" rel=\"Ext.form.field.Text-cfg-grow\" class=\"docClass\">grow</a> = true</code></p>\n"},"growMin":{"!type":"number","!doc":"<p>The minimum width to allow when <code><a href=\"#!/api/Ext.form.field.Text-cfg-grow\" rel=\"Ext.form.field.Text-cfg-grow\" class=\"docClass\">grow</a> = true</code></p>\n"},"maskRe":{"!type":"+RegExp","!doc":"<p>An input mask regular expression that will be used to filter keystrokes (character being\ntyped) that do not match.\nNote: It does not filter characters already in the input.</p>\n"},"maxLength":{"!type":"number","!doc":"<p>Maximum input field length allowed by validation. This behavior is intended to\nprovide instant feedback to the user by improving usability to allow pasting and editing or overtyping and back\ntracking. To restrict the maximum number of characters that can be entered into the field use the\n<strong><a href=\"#!/api/Ext.form.field.Text-cfg-enforceMaxLength\" rel=\"Ext.form.field.Text-cfg-enforceMaxLength\" class=\"docClass\">enforceMaxLength</a></strong> option.</p>\n\n<p>Defaults to Number.MAX_VALUE.</p>\n"},"maxLengthText":{"!type":"string","!doc":"<p>Error text to display if the <strong><a href=\"#!/api/Ext.form.field.Text-cfg-maxLength\" rel=\"Ext.form.field.Text-cfg-maxLength\" class=\"docClass\">maximum length</a></strong> validation fails</p>\n"},"minLength":{"!type":"number","!doc":"<p>Minimum input field length required</p>\n"},"minLengthText":{"!type":"string","!doc":"<p>Error text to display if the <strong><a href=\"#!/api/Ext.form.field.Text-cfg-minLength\" rel=\"Ext.form.field.Text-cfg-minLength\" class=\"docClass\">minimum length</a></strong> validation fails.</p>\n"},"regex":{"!type":"+RegExp","!doc":"<p>A JavaScript RegExp object to be tested against the field value during validation.\nIf the test fails, the field will be marked invalid using\neither <strong><a href=\"#!/api/Ext.form.field.Text-cfg-regexText\" rel=\"Ext.form.field.Text-cfg-regexText\" class=\"docClass\">regexText</a></strong> or <strong><a href=\"#!/api/Ext.form.field.Text-cfg-invalidText\" rel=\"Ext.form.field.Text-cfg-invalidText\" class=\"docClass\">invalidText</a></strong>.</p>\n"},"regexText":{"!type":"string","!doc":"<p>The error text to display if <strong><a href=\"#!/api/Ext.form.field.Text-cfg-regex\" rel=\"Ext.form.field.Text-cfg-regex\" class=\"docClass\">regex</a></strong> is used and the test fails during validation</p>\n"},"requiredCls":{"!type":"string","!doc":"<p>The CSS class to apply to a required field, i.e. a field where <strong><a href=\"#!/api/Ext.form.field.Text-cfg-allowBlank\" rel=\"Ext.form.field.Text-cfg-allowBlank\" class=\"docClass\">allowBlank</a></strong> is false.</p>\n"},"selectOnFocus":{"!type":"bool","!doc":"<p>true to automatically select any existing field text when the field receives input focus</p>\n"},"size":{"!type":"number","!doc":"<p>An initial value for the 'size' attribute on the text input element. This is only used if the field has no\nconfigured <a href=\"#!/api/Ext.form.field.Text-cfg-width\" rel=\"Ext.form.field.Text-cfg-width\" class=\"docClass\">width</a> and is not given a width by its container's layout. Defaults to 20.</p>\n"},"stripCharsRe":{"!type":"+RegExp","!doc":"<p>A JavaScript RegExp object used to strip unwanted content from the value\nduring input. If <code>stripCharsRe</code> is specified,\nevery <em>character sequence</em> matching <code>stripCharsRe</code> will be removed.</p>\n"},"validateBlank":{"!type":"bool","!doc":"<p>Specify as <code>true</code> to modify the behaviour of <a href=\"#!/api/Ext.form.field.Text-cfg-allowBlank\" rel=\"Ext.form.field.Text-cfg-allowBlank\" class=\"docClass\">allowBlank</a> so that blank values are not passed as valid, but are subject to any configure <a href=\"#!/api/Ext.form.field.Text-cfg-vtype\" rel=\"Ext.form.field.Text-cfg-vtype\" class=\"docClass\">vtype</a> validation.</p>\n"},"validator":{"!type":"fn()","!doc":"<p>A custom validation function to be called during field validation (<a href=\"#!/api/Ext.form.field.Text-method-getErrors\" rel=\"Ext.form.field.Text-method-getErrors\" class=\"docClass\">getErrors</a>).\nIf specified, this function will be called first, allowing the developer to override the default validation\nprocess.</p>\n\n<p>This function will be passed the following parameters:</p>\n"},"vtype":{"!type":"string","!doc":"<p>A validation type name as defined in <a href=\"#!/api/Ext.form.field.VTypes\" rel=\"Ext.form.field.VTypes\" class=\"docClass\">Ext.form.field.VTypes</a></p>\n"},"vtypeText":{"!type":"string","!doc":"<p>A custom error message to display in place of the default message provided for the <strong><code><a href=\"#!/api/Ext.form.field.Text-cfg-vtype\" rel=\"Ext.form.field.Text-cfg-vtype\" class=\"docClass\">vtype</a></code></strong> currently\nset for this field. <strong>Note</strong>: only applies if <strong><code><a href=\"#!/api/Ext.form.field.Text-cfg-vtype\" rel=\"Ext.form.field.Text-cfg-vtype\" class=\"docClass\">vtype</a></code></strong> is set, else ignored.</p>\n"},"valueContainsPlaceholder":{"!type":"bool","!doc":"<p>private</p>\n"},"afterComponentLayout":{"!type":"fn() -> !this","!doc":"<p>Called by the layout system after the Component has been laid out.</p>\n"},"afterFirstLayout":{"!type":"fn() -> !this"},"afterRender":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior after rendering is complete. At this stage the Component’s Element\nwill have been styled according to the configuration, will have had any configured CSS class\nnames added, and will be in the configured visibility and the configured enable state.</p>\n"},"applyEmptyText":{"!type":"fn() -> !this"},"applyState":{"!type":"fn(state: ?) -> !this","!doc":"<p>Applies the state to the object. This should be overridden in subclasses to do\nmore complex state operations. By default it applies the state properties onto\nthe current object.</p>\n"},"autoSize":{"!type":"fn() -> !this","!doc":"<p>Automatically grows the field to accomodate the width of the text up to the maximum field width allowed. This\nonly takes effect if <a href=\"#!/api/Ext.form.field.Text-cfg-grow\" rel=\"Ext.form.field.Text-cfg-grow\" class=\"docClass\">grow</a> = true, and fires the <a href=\"#!/api/Ext.form.field.Text-event-autosize\" rel=\"Ext.form.field.Text-event-autosize\" class=\"docClass\">autosize</a> event if the width changes.</p>\n"},"beforeFocus":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"filterKeys":{"!type":"fn(e: ?) -> !this","!doc":"<p>private</p>\n"},"focusInput":{"!type":"fn() -> !this"},"getErrors":{"!type":"fn(value: ?) -> [string]","!doc":"<p>Validates a value according to the field's validation rules and returns an array of errors\nfor any failing validations. Validation rules are processed in the following order:</p>\n\n<ol>\n<li><p><strong>Field specific validator</strong></p>\n\n<p> A validator offers a way to customize and reuse a validation specification.\n If a field is configured with a <code><a href=\"#!/api/Ext.form.field.Text-cfg-validator\" rel=\"Ext.form.field.Text-cfg-validator\" class=\"docClass\">validator</a></code>\n function, it will be passed the current field value.  The <code><a href=\"#!/api/Ext.form.field.Text-cfg-validator\" rel=\"Ext.form.field.Text-cfg-validator\" class=\"docClass\">validator</a></code>\n function is expected to return either:</p>\n\n<ul>\n<li>Boolean <code>true</code>  if the value is valid (validation continues).</li>\n<li>a String to represent the invalid message if invalid (validation halts).</li>\n</ul>\n</li>\n<li><p><strong>Basic Validation</strong></p>\n\n<p> If the <code><a href=\"#!/api/Ext.form.field.Text-cfg-validator\" rel=\"Ext.form.field.Text-cfg-validator\" class=\"docClass\">validator</a></code> has not halted validation,\n basic validation proceeds as follows:</p>\n\n<ul>\n<li><p><code><a href=\"#!/api/Ext.form.field.Text-cfg-allowBlank\" rel=\"Ext.form.field.Text-cfg-allowBlank\" class=\"docClass\">allowBlank</a></code> : (Invalid message = <code><a href=\"#!/api/Ext.form.field.Text-cfg-blankText\" rel=\"Ext.form.field.Text-cfg-blankText\" class=\"docClass\">blankText</a></code>)</p>\n\n<p>  Depending on the configuration of <code><a href=\"#!/api/Ext.form.field.Text-cfg-allowBlank\" rel=\"Ext.form.field.Text-cfg-allowBlank\" class=\"docClass\">allowBlank</a></code>, a\n  blank field will cause validation to halt at this step and return\n  Boolean true or false accordingly.</p></li>\n<li><p><code><a href=\"#!/api/Ext.form.field.Text-cfg-minLength\" rel=\"Ext.form.field.Text-cfg-minLength\" class=\"docClass\">minLength</a></code> : (Invalid message = <code><a href=\"#!/api/Ext.form.field.Text-cfg-minLengthText\" rel=\"Ext.form.field.Text-cfg-minLengthText\" class=\"docClass\">minLengthText</a></code>)</p>\n\n<p>  If the passed value does not satisfy the <code><a href=\"#!/api/Ext.form.field.Text-cfg-minLength\" rel=\"Ext.form.field.Text-cfg-minLength\" class=\"docClass\">minLength</a></code>\n  specified, validation halts.</p></li>\n<li><p><code><a href=\"#!/api/Ext.form.field.Text-cfg-maxLength\" rel=\"Ext.form.field.Text-cfg-maxLength\" class=\"docClass\">maxLength</a></code> : (Invalid message = <code><a href=\"#!/api/Ext.form.field.Text-cfg-maxLengthText\" rel=\"Ext.form.field.Text-cfg-maxLengthText\" class=\"docClass\">maxLengthText</a></code>)</p>\n\n<p> If the passed value does not satisfy the <code><a href=\"#!/api/Ext.form.field.Text-cfg-maxLength\" rel=\"Ext.form.field.Text-cfg-maxLength\" class=\"docClass\">maxLength</a></code>\n specified, validation halts.</p></li>\n</ul>\n</li>\n<li><p><strong>Preconfigured Validation Types (VTypes)</strong></p>\n\n<p> If none of the prior validation steps halts validation, a field\n configured with a <code><a href=\"#!/api/Ext.form.field.Text-cfg-vtype\" rel=\"Ext.form.field.Text-cfg-vtype\" class=\"docClass\">vtype</a></code> will utilize the\n corresponding <a href=\"#!/api/Ext.form.field.VTypes\" rel=\"Ext.form.field.VTypes\" class=\"docClass\">VTypes</a> validation function.\n If invalid, either the field's <code><a href=\"#!/api/Ext.form.field.Text-cfg-vtypeText\" rel=\"Ext.form.field.Text-cfg-vtypeText\" class=\"docClass\">vtypeText</a></code> or\n the VTypes vtype Text property will be used for the invalid message.\n Keystrokes on the field will be filtered according to the VTypes\n vtype Mask property.</p></li>\n<li><p><strong>Field specific regex test</strong></p>\n\n<p> If none of the prior validation steps halts validation, a field's\n configured <code><a href=\"#!/api/Ext.form.field.Text-cfg-regex\" rel=\"Ext.form.field.Text-cfg-regex\" class=\"docClass\">regex</a></code> test will be processed.\n The invalid message for this test is configured with <code><a href=\"#!/api/Ext.form.field.Text-cfg-regexText\" rel=\"Ext.form.field.Text-cfg-regexText\" class=\"docClass\">regexText</a></code></p></li>\n</ol>\n\n"},"getRawValue":{"!type":"fn() -> string","!doc":"<p>Returns the raw String value of the field, without performing any normalization, conversion, or validation. Gets\nthe current value of the input element if the field has been rendered, ignoring the value if it is the\n<a href=\"#!/api/Ext.form.field.Text-cfg-emptyText\" rel=\"Ext.form.field.Text-cfg-emptyText\" class=\"docClass\">emptyText</a>. To get a normalized and converted value see <a href=\"#!/api/Ext.form.field.Text-method-getValue\" rel=\"Ext.form.field.Text-method-getValue\" class=\"docClass\">getValue</a>.</p>\n"},"getState":{"!type":"fn() -> ?","!doc":"<p>The supplied default state gathering method for the AbstractComponent class.</p>\n\n<p>This method returns dimension settings such as <code>flex</code>, <code>anchor</code>, <code>width</code> and <code>height</code> along with <code>collapsed</code>\nstate.</p>\n\n<p>Subclasses which implement more complex state should call the superclass's implementation, and apply their state\nto the result if this basic state is to be saved.</p>\n\n<p>Note that Component state will only be saved if the Component has a <a href=\"#!/api/Ext.form.field.Text-cfg-stateId\" rel=\"Ext.form.field.Text-cfg-stateId\" class=\"docClass\">stateId</a> and there as a StateProvider\nconfigured for the document.</p>\n"},"getSubTplData":{"!type":"fn() -> ?","!doc":"<p>Creates and returns the data object to be used when rendering the <a href=\"#!/api/Ext.form.field.Text-cfg-fieldSubTpl\" rel=\"Ext.form.field.Text-cfg-fieldSubTpl\" class=\"docClass\">fieldSubTpl</a>.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"initEvents":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"isEqual":{"!type":"fn(value1: ?, value2: ?) -> !this","!doc":"<p>Override. Treat undefined and null values as equal to an empty string value.</p>\n"},"onChange":{"!type":"fn(newVal: ?, oldVal: ?) -> !this","!doc":"<p>If grow=true, invoke the autoSize method when the field's value is changed.</p>\n"},"onDestroy":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the destroy operation.\nAfter calling the superclass's onDestroy, the Component will be destroyed.</p>\n"},"onDisable":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"onEnable":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"onFocus":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"onKeyDown":{"!type":"fn(e: ?) -> !this","!doc":"<p>Listen for TAB events and wrap round if tabbing of either end of the Floater</p>\n"},"onKeyPress":{"!type":"fn(e: ?) -> !this"},"onKeyUp":{"!type":"fn(e: ?) -> !this"},"onMouseDown":{"!type":"fn(e: ?) -> !this","!doc":"<p>Mousedown brings to front, and programatically grabs focus <em>unless the mousedown was on a focusable element</em></p>\n"},"postBlur":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"processRawValue":{"!type":"fn(value: string) -> string","!doc":"<p>Performs any necessary manipulation of a raw String value to prepare it for conversion and/or\n<a href=\"#!/api/Ext.form.field.Text-method-validate\" rel=\"Ext.form.field.Text-method-validate\" class=\"docClass\">validation</a>. For text fields this applies the configured <a href=\"#!/api/Ext.form.field.Text-cfg-stripCharsRe\" rel=\"Ext.form.field.Text-cfg-stripCharsRe\" class=\"docClass\">stripCharsRe</a>\nto the raw value.</p>\n"},"reset":{"!type":"fn() -> !this","!doc":"<p>Resets the current field value to the originally-loaded value and clears any validation messages.\nAlso adds <strong><a href=\"#!/api/Ext.form.field.Text-cfg-emptyText\" rel=\"Ext.form.field.Text-cfg-emptyText\" class=\"docClass\">emptyText</a></strong> and <strong><a href=\"#!/api/Ext.form.field.Text-cfg-emptyCls\" rel=\"Ext.form.field.Text-cfg-emptyCls\" class=\"docClass\">emptyCls</a></strong> if the original value was blank.</p>\n"},"selectText":{"!type":"fn(start?: number, end?: number) -> !this","!doc":"<p>Selects text in this field</p>\n"},"setGrowSizePolicy":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"setValue":{"!type":"fn(value: ?) -> +Ext.form.field.Text","!doc":"<p>Sets a data value into the field and runs the change detection and validation. Also applies any configured\n<a href=\"#!/api/Ext.form.field.Text-cfg-emptyText\" rel=\"Ext.form.field.Text-cfg-emptyText\" class=\"docClass\">emptyText</a> for text fields. To set the value directly without these inspections see <a href=\"#!/api/Ext.form.field.Text-method-setRawValue\" rel=\"Ext.form.field.Text-method-setRawValue\" class=\"docClass\">setRawValue</a>.</p>\n"},"autosize":{"!type":"fn(this: +Ext.form.field.Text, width: number, eOpts: ?)","!doc":"<p>Fires when the <strong><a href=\"#!/api/Ext.form.field.Text-method-autoSize\" rel=\"Ext.form.field.Text-method-autoSize\" class=\"docClass\">autoSize</a></strong> function is triggered and the field is resized according to the\n<a href=\"#!/api/Ext.form.field.Text-cfg-grow\" rel=\"Ext.form.field.Text-cfg-grow\" class=\"docClass\">grow</a>/<a href=\"#!/api/Ext.form.field.Text-cfg-growMin\" rel=\"Ext.form.field.Text-cfg-growMin\" class=\"docClass\">growMin</a>/<a href=\"#!/api/Ext.form.field.Text-cfg-growMax\" rel=\"Ext.form.field.Text-cfg-growMax\" class=\"docClass\">growMax</a> configs as a result. This event provides a hook for the\ndeveloper to apply additional logic at runtime to resize the field if needed.</p>\n"},"keydown":{"!type":"fn(this: +Ext.form.field.Text, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Keydown input field event. This event only fires if <strong><a href=\"#!/api/Ext.form.field.Text-cfg-enableKeyEvents\" rel=\"Ext.form.field.Text-cfg-enableKeyEvents\" class=\"docClass\">enableKeyEvents</a></strong> is set to true.</p>\n"},"keypress":{"!type":"fn(this: +Ext.form.field.Text, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Keypress input field event. This event only fires if <strong><a href=\"#!/api/Ext.form.field.Text-cfg-enableKeyEvents\" rel=\"Ext.form.field.Text-cfg-enableKeyEvents\" class=\"docClass\">enableKeyEvents</a></strong> is set to true.</p>\n"},"keyup":{"!type":"fn(this: +Ext.form.field.Text, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Keyup input field event. This event only fires if <strong><a href=\"#!/api/Ext.form.field.Text-cfg-enableKeyEvents\" rel=\"Ext.form.field.Text-cfg-enableKeyEvents\" class=\"docClass\">enableKeyEvents</a></strong> is set to true.</p>\n"}}},"TextArea":{"!doc":"<p>This class creates a multiline text field, which can be used as a direct replacement for traditional\ntextarea fields. In addition, it supports automatically <a href=\"#!/api/Ext.form.field.TextArea-cfg-grow\" rel=\"Ext.form.field.TextArea-cfg-grow\" class=\"docClass\">growing</a> the height of the textarea to\nfit its content.</p>\n\n<p>All of the configuration options from <a href=\"#!/api/Ext.form.field.Text\" rel=\"Ext.form.field.Text\" class=\"docClass\">Ext.form.field.Text</a> can be used on TextArea.</p>\n\n<p>Example usage:</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.FormPanel</a>', {\n    title      : 'Sample TextArea',\n    width      : 400,\n    bodyPadding: 10,\n    renderTo   : <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    items: [{\n        xtype     : 'textareafield',\n        grow      : true,\n        name      : 'message',\n        fieldLabel: 'Message',\n        anchor    : '100%'\n    }]\n});\n</code></pre>\n\n<p>Some other useful configuration options when using <a href=\"#!/api/Ext.form.field.TextArea-cfg-grow\" rel=\"Ext.form.field.TextArea-cfg-grow\" class=\"docClass\">grow</a> are <a href=\"#!/api/Ext.form.field.TextArea-cfg-growMin\" rel=\"Ext.form.field.TextArea-cfg-growMin\" class=\"docClass\">growMin</a> and <a href=\"#!/api/Ext.form.field.TextArea-cfg-growMax\" rel=\"Ext.form.field.TextArea-cfg-growMax\" class=\"docClass\">growMax</a>.\nThese allow you to set the minimum and maximum grow heights for the textarea.</p>\n\n<p><strong>NOTE:</strong> In some browsers, carriage returns ('\\r', not to be confused with new lines)\nwill be automatically stripped out the value is set to the textarea. Since we cannot\nuse any reasonable method to attempt to re-insert these, they will automatically be\nstripped out to ensure the behaviour is consistent across browser.</p>\n","!type":"fn(config: +Ext.Element|string|Ext_form_field_TextArea_cfg)","prototype":{"!proto":"Ext.form.field.Text.prototype","cols":{"!type":"number","!doc":"<p>An initial value for the 'cols' attribute on the textarea element. This is only used if the component has no\nconfigured <a href=\"#!/api/Ext.form.field.TextArea-cfg-width\" rel=\"Ext.form.field.TextArea-cfg-width\" class=\"docClass\">width</a> and is not given a width by its container's layout.</p>\n"},"componentLayout":{"!type":"string|?","!doc":"<p>private</p>\n"},"enterIsSpecial":{"!type":"bool","!doc":"<p>True if you want the ENTER key to be classed as a special key and the <a href=\"#!/api/Ext.form.field.TextArea-event-specialkey\" rel=\"Ext.form.field.TextArea-event-specialkey\" class=\"docClass\">specialkey</a> event to be fired\nwhen ENTER is pressed.</p>\n"},"fieldSubTpl":{"!type":"+Ext.XTemplate","!doc":"<p>This template includes a <code>\\n</code> after <code>&lt;textarea&gt;</code> opening tag so that an\ninitial value starting with <code>\\n</code> does not lose its first character when\nthe markup is parsed. Both textareas below have the same value:</p>\n\n<pre><code>&lt;textarea&gt;initial value&lt;/textarea&gt;\n\n&lt;textarea&gt;\ninitial value\n&lt;/textarea&gt;\n</code></pre>\n"},"growAppend":{"!type":"string","!doc":"<p>A string that will be appended to the field's current value for the purposes of calculating the target field\nsize. Only used when the <a href=\"#!/api/Ext.form.field.TextArea-cfg-grow\" rel=\"Ext.form.field.TextArea-cfg-grow\" class=\"docClass\">grow</a> config is true. Defaults to a newline for TextArea to ensure there is\nalways a space below the current line.</p>\n"},"growMax":{"!type":"number","!doc":"<p>The maximum height to allow when <a href=\"#!/api/Ext.form.field.TextArea-cfg-grow\" rel=\"Ext.form.field.TextArea-cfg-grow\" class=\"docClass\">grow</a>=true</p>\n"},"growMin":{"!type":"number","!doc":"<p>The minimum height to allow when <a href=\"#!/api/Ext.form.field.TextArea-cfg-grow\" rel=\"Ext.form.field.TextArea-cfg-grow\" class=\"docClass\">grow</a>=true</p>\n"},"preventScrollbars":{"!type":"bool","!doc":"<p>true to prevent scrollbars from appearing regardless of how much text is in the field. This option is only\nrelevant when <a href=\"#!/api/Ext.form.field.TextArea-cfg-grow\" rel=\"Ext.form.field.TextArea-cfg-grow\" class=\"docClass\">grow</a> is true. Equivalent to setting overflow: hidden.</p>\n"},"rows":{"!type":"number","!doc":"<p>An initial value for the 'rows' attribute on the textarea element. This is only used if the component has no\nconfigured <a href=\"#!/api/Ext.form.field.TextArea-cfg-height\" rel=\"Ext.form.field.TextArea-cfg-height\" class=\"docClass\">height</a> and is not given a height by its container's layout. Defaults to 4.</p>\n"},"inputCls":{"!type":"string"},"returnRe":{"!type":"+RegExp"},"afterRender":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior after rendering is complete. At this stage the Component’s Element\nwill have been styled according to the configuration, will have had any configured CSS class\nnames added, and will be in the configured visibility and the configured enable state.</p>\n"},"autoSize":{"!type":"fn() -> !this","!doc":"<p>Automatically grows the field to accomodate the height of the text up to the maximum field height allowed. This\nonly takes effect if <a href=\"#!/api/Ext.form.field.TextArea-cfg-grow\" rel=\"Ext.form.field.TextArea-cfg-grow\" class=\"docClass\">grow</a> = true, and fires the <a href=\"#!/api/Ext.form.field.TextArea-event-autosize\" rel=\"Ext.form.field.TextArea-event-autosize\" class=\"docClass\">autosize</a> event if the height changes.</p>\n"},"beforeDestroy":{"!type":"fn() -> !this","!doc":"<p>Invoked before the Component is destroyed.</p>\n"},"fireKey":{"!type":"fn(e: ?) -> !this","!doc":"<p>private</p>\n"},"getSubTplData":{"!type":"fn() -> ?","!doc":"<p>private</p>\n"},"getValue":{"!type":"fn() -> ?","!doc":"<p>Returns the current data value of the field. The type of value returned is particular to the type of the\nparticular field (e.g. a Date object for <a href=\"#!/api/Ext.form.field.Date\" rel=\"Ext.form.field.Date\" class=\"docClass\">Ext.form.field.Date</a>), as the result of calling <a href=\"#!/api/Ext.form.field.TextArea-method-rawToValue\" rel=\"Ext.form.field.TextArea-method-rawToValue\" class=\"docClass\">rawToValue</a> on\nthe field's <a href=\"#!/api/Ext.form.field.TextArea-method-processRawValue\" rel=\"Ext.form.field.TextArea-method-processRawValue\" class=\"docClass\">processed</a> String value. To return the raw String value, see <a href=\"#!/api/Ext.form.field.TextArea-method-getRawValue\" rel=\"Ext.form.field.TextArea-method-getRawValue\" class=\"docClass\">getRawValue</a>.</p>\n"},"initAria":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"isCutCopyPasteSelectAll":{"!type":"fn(e: ?, key: ?) -> !this"},"onPaste":{"!type":"fn(e: ?) -> !this"},"pasteCheck":{"!type":"fn() -> !this"},"setGrowSizePolicy":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"stripReturns":{"!type":"fn(value: ?) -> !this"},"transformOriginalValue":{"!type":"fn(value: ?) -> ?","!doc":"<p>Allows for any necessary modifications before the original\nvalue is set</p>\n"},"transformRawValue":{"!type":"fn(value: ?) -> ?","!doc":"<p>The following overrides deal with an issue whereby some browsers\nwill strip carriage returns from the textarea input, while others\nwill not. Since there's no way to be sure where to insert returns,\nthe best solution is to strip them out in all cases to ensure that\nthe behaviour is consistent in a cross browser fashion. As such,\nwe override in all cases when setting the value to control this.</p>\n"},"valueToRaw":{"!type":"fn(value: ?) -> ?","!doc":"<p>Converts a mixed-type value to a raw representation suitable for displaying in the field. This allows controlling\nhow value objects passed to <a href=\"#!/api/Ext.form.field.TextArea-method-setValue\" rel=\"Ext.form.field.TextArea-method-setValue\" class=\"docClass\">setValue</a> are shown to the user, including localization. For instance, for a\n<a href=\"#!/api/Ext.form.field.Date\" rel=\"Ext.form.field.Date\" class=\"docClass\">Ext.form.field.Date</a>, this would control how a Date object passed to <a href=\"#!/api/Ext.form.field.TextArea-method-setValue\" rel=\"Ext.form.field.TextArea-method-setValue\" class=\"docClass\">setValue</a> would be converted\nto a String for display in the field.</p>\n\n<p>See <a href=\"#!/api/Ext.form.field.TextArea-method-rawToValue\" rel=\"Ext.form.field.TextArea-method-rawToValue\" class=\"docClass\">rawToValue</a> for the opposite conversion.</p>\n\n<p>The base implementation simply does a standard toString conversion, and converts <a href=\"#!/api/Ext-method-isEmpty\" rel=\"Ext-method-isEmpty\" class=\"docClass\">empty values</a>\nto an empty string.</p>\n"},"autosize":{"!type":"fn(this: +Ext.form.field.Text, height: number, eOpts: ?)","!doc":"<p>Fires when the <a href=\"#!/api/Ext.form.field.TextArea-method-autoSize\" rel=\"Ext.form.field.TextArea-method-autoSize\" class=\"docClass\">autoSize</a> function is triggered and the field is resized according to\nthe grow/growMin/growMax configs as a result. This event provides a hook for the developer\nto apply additional logic at runtime to resize the field if needed.</p>\n"}}},"Time":{"!doc":"<p>Provides a time input field with a time dropdown and automatic time validation.</p>\n\n<p>This field recognizes and uses JavaScript Date objects as its main <a href=\"#!/api/Ext.form.field.Time-cfg-value\" rel=\"Ext.form.field.Time-cfg-value\" class=\"docClass\">value</a> type (only the time portion of the\ndate is used; the month/day/year are ignored). In addition, it recognizes string values which are parsed according to\nthe <a href=\"#!/api/Ext.form.field.Time-cfg-format\" rel=\"Ext.form.field.Time-cfg-format\" class=\"docClass\">format</a> and/or <a href=\"#!/api/Ext.form.field.Time-cfg-altFormats\" rel=\"Ext.form.field.Time-cfg-altFormats\" class=\"docClass\">altFormats</a> configs. These may be reconfigured to use time formats appropriate for\nthe user's locale.</p>\n\n<p>The field may be limited to a certain range of times by using the <a href=\"#!/api/Ext.form.field.Time-cfg-minValue\" rel=\"Ext.form.field.Time-cfg-minValue\" class=\"docClass\">minValue</a> and <a href=\"#!/api/Ext.form.field.Time-cfg-maxValue\" rel=\"Ext.form.field.Time-cfg-maxValue\" class=\"docClass\">maxValue</a> configs,\nand the interval between time options in the dropdown can be changed with the <a href=\"#!/api/Ext.form.field.Time-cfg-increment\" rel=\"Ext.form.field.Time-cfg-increment\" class=\"docClass\">increment</a> config.</p>\n\n<p>Example usage:</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>', {\n    title: 'Time Card',\n    width: 300,\n    bodyPadding: 10,\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    items: [{\n        xtype: 'timefield',\n        name: 'in',\n        fieldLabel: 'Time In',\n        minValue: '6:00 AM',\n        maxValue: '8:00 PM',\n        increment: 30,\n        anchor: '100%'\n    }, {\n        xtype: 'timefield',\n        name: 'out',\n        fieldLabel: 'Time Out',\n        minValue: '6:00 AM',\n        maxValue: '8:00 PM',\n        increment: 30,\n        anchor: '100%'\n   }]\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_form_field_Time_cfg)","prototype":{"!proto":"Ext.form.field.ComboBox.prototype","altFormats":{"!type":"string","!doc":"<p>Multiple date formats separated by \"|\" to try when parsing a user input value and it doesn't match the defined\nformat.</p>\n"},"displayField":{"!type":"string","!doc":"<p>The underlying <a href=\"#!/api/Ext.data.Field-cfg-name\" rel=\"Ext.data.Field-cfg-name\" class=\"docClass\">data field name</a> to bind to this ComboBox.</p>\n\n<p>See also <code><a href=\"#!/api/Ext.form.field.Time-cfg-valueField\" rel=\"Ext.form.field.Time-cfg-valueField\" class=\"docClass\">valueField</a></code>.</p>\n"},"format":{"!type":"string","!doc":"<p>The default time format string which can be overriden for localization support. The format must be valid\naccording to <a href=\"#!/api/Ext.Date-method-parse\" rel=\"Ext.Date-method-parse\" class=\"docClass\">Ext.Date.parse</a>.</p>\n\n<p>Defaults to <code>'g:i A'</code>, e.g., <code>'3:15 PM'</code>. For 24-hour time format try <code>'H:i'</code> instead.</p>\n"},"increment":{"!type":"number","!doc":"<p>The number of minutes between each time value in the list.</p>\n"},"invalidText":{"!type":"string","!doc":"<p>The error text to display when the time in the field is invalid.</p>\n"},"maxText":{"!type":"string","!doc":"<p>The error text to display when the entered time is after <a href=\"#!/api/Ext.form.field.Time-cfg-maxValue\" rel=\"Ext.form.field.Time-cfg-maxValue\" class=\"docClass\">maxValue</a>.</p>\n"},"maxValue":{"!type":"+Date|string","!doc":"<p>The maximum allowed time. Can be either a Javascript date object with a valid time value or a string time in a\nvalid format -- see <a href=\"#!/api/Ext.form.field.Time-cfg-format\" rel=\"Ext.form.field.Time-cfg-format\" class=\"docClass\">format</a> and <a href=\"#!/api/Ext.form.field.Time-cfg-altFormats\" rel=\"Ext.form.field.Time-cfg-altFormats\" class=\"docClass\">altFormats</a>.</p>\n"},"minText":{"!type":"string","!doc":"<p>The error text to display when the entered time is before <a href=\"#!/api/Ext.form.field.Time-cfg-minValue\" rel=\"Ext.form.field.Time-cfg-minValue\" class=\"docClass\">minValue</a>.</p>\n"},"minValue":{"!type":"+Date|string","!doc":"<p>The minimum allowed time. Can be either a Javascript date object with a valid time value or a string time in a\nvalid format -- see <a href=\"#!/api/Ext.form.field.Time-cfg-format\" rel=\"Ext.form.field.Time-cfg-format\" class=\"docClass\">format</a> and <a href=\"#!/api/Ext.form.field.Time-cfg-altFormats\" rel=\"Ext.form.field.Time-cfg-altFormats\" class=\"docClass\">altFormats</a>.</p>\n"},"pickerMaxHeight":{"!type":"number","!doc":"<p>The maximum height of the <a href=\"#!/api/Ext.picker.Time\" rel=\"Ext.picker.Time\" class=\"docClass\">Ext.picker.Time</a> dropdown.</p>\n"},"queryMode":{"!type":"string","!doc":"<p>The mode in which the ComboBox uses the configured Store. Acceptable values are:</p>\n\n<ul>\n<li><p><strong><code>'remote'</code></strong> :</p>\n\n<p>In <code>queryMode: 'remote'</code>, the ComboBox loads its Store dynamically based upon user interaction.</p>\n\n<p>This is typically used for \"autocomplete\" type inputs, and after the user finishes typing, the Store is <a href=\"#!/api/Ext.data.Store-method-load\" rel=\"Ext.data.Store-method-load\" class=\"docClass\">load</a>ed.</p>\n\n<p>A parameter containing the typed string is sent in the load request. The default parameter name for the input\nstring is <code>query</code>, but this can be configured using the <a href=\"#!/api/Ext.form.field.Time-cfg-queryParam\" rel=\"Ext.form.field.Time-cfg-queryParam\" class=\"docClass\">queryParam</a> config.</p>\n\n<p>In <code>queryMode: 'remote'</code>, the Store may be configured with <code><a href=\"#!/api/Ext.data.Store-cfg-remoteFilter\" rel=\"Ext.data.Store-cfg-remoteFilter\" class=\"docClass\">remoteFilter</a>:\ntrue</code>, and further filters may be <em>programatically</em> added to the Store which are then passed with every load\nrequest which allows the server to further refine the returned dataset.</p>\n\n<p>Typically, in an autocomplete situation, <a href=\"#!/api/Ext.form.field.Time-cfg-hideTrigger\" rel=\"Ext.form.field.Time-cfg-hideTrigger\" class=\"docClass\">hideTrigger</a> is configured <code>true</code> because it has no meaning for\nautocomplete.</p></li>\n<li><p><strong><code>'local'</code></strong> :</p>\n\n<p>ComboBox loads local data</p>\n\n<pre><code>var combo = new <a href=\"#!/api/Ext.form.field.ComboBox\" rel=\"Ext.form.field.ComboBox\" class=\"docClass\">Ext.form.field.ComboBox</a>({\n    renderTo: document.body,\n    queryMode: 'local',\n    store: new <a href=\"#!/api/Ext.data.ArrayStore\" rel=\"Ext.data.ArrayStore\" class=\"docClass\">Ext.data.ArrayStore</a>({\n        id: 0,\n        fields: [\n            'myId',  // numeric value is the key\n            'displayText'\n        ],\n        data: [[1, 'item1'], [2, 'item2']]  // data is local\n    }),\n    valueField: 'myId',\n    displayField: 'displayText',\n    triggerAction: 'all'\n});\n</code></pre></li>\n</ul>\n\n"},"selectOnTab":{"!type":"bool","!doc":"<p>Whether the Tab key should select the currently highlighted item.</p>\n"},"snapToIncrement":{"!type":"bool","!doc":"<p>Specify as <code>true</code> to enforce that only values on the <a href=\"#!/api/Ext.form.field.Time-cfg-increment\" rel=\"Ext.form.field.Time-cfg-increment\" class=\"docClass\">increment</a> boundary are accepted.</p>\n"},"submitFormat":{"!type":"string","!doc":"<p>The date format string which will be submitted to the server. The format must be valid according to\n<a href=\"#!/api/Ext.Date-method-parse\" rel=\"Ext.Date-method-parse\" class=\"docClass\">Ext.Date.parse</a>.</p>\n\n<p>Defaults to <a href=\"#!/api/Ext.form.field.Time-cfg-format\" rel=\"Ext.form.field.Time-cfg-format\" class=\"docClass\">format</a>.</p>\n"},"triggerCls":{"!type":"string","!doc":"<p>An additional CSS class used to style the trigger button. The trigger will always get the <a href=\"#!/api/Ext.form.field.Time-cfg-triggerBaseCls\" rel=\"Ext.form.field.Time-cfg-triggerBaseCls\" class=\"docClass\">triggerBaseCls</a>\nby default and triggerCls will be <strong>appended</strong> if specified.</p>\n"},"valueField":{"!type":"string","!doc":"<p>The underlying <a href=\"#!/api/Ext.data.Field-cfg-name\" rel=\"Ext.data.Field-cfg-name\" class=\"docClass\">data value name</a> to bind to this ComboBox.</p>\n\n<p><strong>Note</strong>: use of a <code>valueField</code> requires the user to make a selection in order for a value to be mapped. See also\n<code><a href=\"#!/api/Ext.form.field.Time-cfg-displayField\" rel=\"Ext.form.field.Time-cfg-displayField\" class=\"docClass\">displayField</a></code>.</p>\n\n<p>Defaults to match the value of the <a href=\"#!/api/Ext.form.field.Time-cfg-displayField\" rel=\"Ext.form.field.Time-cfg-displayField\" class=\"docClass\">displayField</a> config.</p>\n"},"ignoreSelection":{"!type":"number","!doc":"<p>private</p>\n"},"initDate":{"!type":"string","!doc":"<p>This is the date to use when generating time values in the absence of either minValue\nor maxValue.  Using the current date causes DST issues on DST boundary dates, so this is an\narbitrary \"safe\" date that can be any date aside from DST boundary dates.</p>\n"},"initDateFormat":{"!type":"string"},"createPicker":{"!type":"fn() -> !this","!doc":"<p>Creates the <a href=\"#!/api/Ext.picker.Time\" rel=\"Ext.picker.Time\" class=\"docClass\">Ext.picker.Time</a></p>\n"},"formatDate":{"!type":"fn() -> !this"},"getErrors":{"!type":"fn(value?: ?) -> [string]","!doc":"<p>Runs all of Time's validations and returns an array of any errors. Note that this first runs Text's validations,\nso the returned array is an amalgamation of all field errors. The additional validation checks are testing that\nthe time format is valid, that the chosen time is within the <a href=\"#!/api/Ext.form.field.Time-cfg-minValue\" rel=\"Ext.form.field.Time-cfg-minValue\" class=\"docClass\">minValue</a> and <a href=\"#!/api/Ext.form.field.Time-cfg-maxValue\" rel=\"Ext.form.field.Time-cfg-maxValue\" class=\"docClass\">maxValue</a> constraints\nset.</p>\n"},"getSubmitValue":{"!type":"fn() -> string","!doc":"<p>Returns the value that would be included in a standard form submit for this field. This will be combined with the\nfield's name to form a name=value pair in the <a href=\"#!/api/Ext.form.field.Time-method-getSubmitData\" rel=\"Ext.form.field.Time-method-getSubmitData\" class=\"docClass\">submitted parameters</a>. If an empty string is\nreturned then just the name= will be submitted; if null is returned then nothing will be submitted.</p>\n\n<p>Note that the value returned will have been <a href=\"#!/api/Ext.form.field.Time-method-processRawValue\" rel=\"Ext.form.field.Time-method-processRawValue\" class=\"docClass\">processed</a> but may or may not have been\nsuccessfully <a href=\"#!/api/Ext.form.field.Time-method-validate\" rel=\"Ext.form.field.Time-method-validate\" class=\"docClass\">validated</a>.</p>\n"},"getValue":{"!type":"fn() -> ?","!doc":"<p>Returns the current data value of the field. The type of value returned is particular to the type of the\nparticular field (e.g. a Date object for <a href=\"#!/api/Ext.form.field.Date\" rel=\"Ext.form.field.Date\" class=\"docClass\">Ext.form.field.Date</a>), as the result of calling <a href=\"#!/api/Ext.form.field.Time-method-rawToValue\" rel=\"Ext.form.field.Time-method-rawToValue\" class=\"docClass\">rawToValue</a> on\nthe field's <a href=\"#!/api/Ext.form.field.Time-method-processRawValue\" rel=\"Ext.form.field.Time-method-processRawValue\" class=\"docClass\">processed</a> String value. To return the raw String value, see <a href=\"#!/api/Ext.form.field.Time-method-getRawValue\" rel=\"Ext.form.field.Time-method-getRawValue\" class=\"docClass\">getRawValue</a>.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"isEqual":{"!type":"fn(v1: ?, v2: ?) -> !this"},"onItemClick":{"!type":"fn(picker: ?, record: ?) -> !this"},"onListSelectionChange":{"!type":"fn(list: ?, recordArray: ?) -> !this","!doc":"<p>Handles a time being selected from the Time picker.</p>\n"},"parseDate":{"!type":"fn(value: string|+Date) -> !this","!doc":"<p>Parses an input value into a valid Date object.</p>\n"},"postBlur":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"rawToValue":{"!type":"fn(rawValue: ?) -> ?","!doc":"<p>Converts a raw input field value into a mixed-type value that is suitable for this particular field type. This\nallows controlling the normalization and conversion of user-entered values into field-type-appropriate values,\ne.g. a Date object for <a href=\"#!/api/Ext.form.field.Date\" rel=\"Ext.form.field.Date\" class=\"docClass\">Ext.form.field.Date</a>, and is invoked by <a href=\"#!/api/Ext.form.field.Time-method-getValue\" rel=\"Ext.form.field.Time-method-getValue\" class=\"docClass\">getValue</a>.</p>\n\n<p>It is up to individual implementations to decide how to handle raw values that cannot be successfully converted\nto the desired object type.</p>\n\n<p>See <a href=\"#!/api/Ext.form.field.Time-method-valueToRaw\" rel=\"Ext.form.field.Time-method-valueToRaw\" class=\"docClass\">valueToRaw</a> for the opposite conversion.</p>\n\n<p>The base implementation does no conversion, returning the raw value untouched.</p>\n"},"safeParse":{"!type":"fn(value: ?, format: ?) -> !this"},"setLimit":{"!type":"fn(value: ?, isMin: ?) -> !this","!doc":"<p>Updates either the min or max value. Converts the user's value into a Date object whose\nyear/month/day is set to the <a href=\"#!/api/Ext.form.field.Time-property-initDate\" rel=\"Ext.form.field.Time-property-initDate\" class=\"docClass\">initDate</a> so that only the time fields are significant.</p>\n"},"setMaxValue":{"!type":"fn(value: +Date|string) -> !this","!doc":"<p>Replaces any existing <a href=\"#!/api/Ext.form.field.Time-cfg-maxValue\" rel=\"Ext.form.field.Time-cfg-maxValue\" class=\"docClass\">maxValue</a> with the new time and refreshes the picker's range.</p>\n"},"setMinValue":{"!type":"fn(value: +Date|string) -> !this","!doc":"<p>Replaces any existing <a href=\"#!/api/Ext.form.field.Time-cfg-minValue\" rel=\"Ext.form.field.Time-cfg-minValue\" class=\"docClass\">minValue</a> with the new time and refreshes the picker's range.</p>\n"},"setValue":{"!type":"fn() -> +Ext.form.field.Field","!doc":"<p>Sets the specified value(s) into the field. For each value, if a record is found in the <a href=\"#!/api/Ext.form.field.Time-cfg-store\" rel=\"Ext.form.field.Time-cfg-store\" class=\"docClass\">store</a> that\nmatches based on the <a href=\"#!/api/Ext.form.field.Time-cfg-valueField\" rel=\"Ext.form.field.Time-cfg-valueField\" class=\"docClass\">valueField</a>, then that record's <a href=\"#!/api/Ext.form.field.Time-cfg-displayField\" rel=\"Ext.form.field.Time-cfg-displayField\" class=\"docClass\">displayField</a> will be displayed in the\nfield. If no match is found, and the <a href=\"#!/api/Ext.form.field.Time-cfg-valueNotFoundText\" rel=\"Ext.form.field.Time-cfg-valueNotFoundText\" class=\"docClass\">valueNotFoundText</a> config option is defined, then that will be\ndisplayed as the default field text. Otherwise a blank value will be shown, although the value will still be set.</p>\n"},"syncSelection":{"!type":"fn() -> !this","!doc":"<p>Synchronizes the selection in the picker to match the current value</p>\n"},"transformOriginalValue":{"!type":"fn(value: ?) -> !this"},"valueToRaw":{"!type":"fn(value: ?) -> ?","!doc":"<p>Converts a mixed-type value to a raw representation suitable for displaying in the field. This allows controlling\nhow value objects passed to <a href=\"#!/api/Ext.form.field.Time-method-setValue\" rel=\"Ext.form.field.Time-method-setValue\" class=\"docClass\">setValue</a> are shown to the user, including localization. For instance, for a\n<a href=\"#!/api/Ext.form.field.Date\" rel=\"Ext.form.field.Date\" class=\"docClass\">Ext.form.field.Date</a>, this would control how a Date object passed to <a href=\"#!/api/Ext.form.field.Time-method-setValue\" rel=\"Ext.form.field.Time-method-setValue\" class=\"docClass\">setValue</a> would be converted\nto a String for display in the field.</p>\n\n<p>See <a href=\"#!/api/Ext.form.field.Time-method-rawToValue\" rel=\"Ext.form.field.Time-method-rawToValue\" class=\"docClass\">rawToValue</a> for the opposite conversion.</p>\n\n<p>The base implementation simply does a standard toString conversion, and converts <a href=\"#!/api/Ext-method-isEmpty\" rel=\"Ext-method-isEmpty\" class=\"docClass\">empty values</a>\nto an empty string.</p>\n"}}},"Trigger":{"!doc":"<p>Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).\nThe trigger has no default action, so you must assign a function to implement the trigger click handler by overriding\n<a href=\"#!/api/Ext.form.field.Trigger-method-onTriggerClick\" rel=\"Ext.form.field.Trigger-method-onTriggerClick\" class=\"docClass\">onTriggerClick</a>. You can create a Trigger field directly, as it renders exactly like a combobox for which you\ncan provide a custom implementation.</p>\n\n<p>For example:</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Ext.ux.CustomTrigger', {\n    extend: '<a href=\"#!/api/Ext.form.field.Trigger\" rel=\"Ext.form.field.Trigger\" class=\"docClass\">Ext.form.field.Trigger</a>',\n    alias: 'widget.customtrigger',\n\n    // override onTriggerClick\n    onTriggerClick: function() {\n        <a href=\"#!/api/Ext.MessageBox-method-alert\" rel=\"Ext.MessageBox-method-alert\" class=\"docClass\">Ext.Msg.alert</a>('Status', 'You clicked my trigger!');\n    }\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.FormPanel</a>', {\n    title: 'Form with TriggerField',\n    bodyPadding: 5,\n    width: 350,\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    items:[{\n        xtype: 'customtrigger',\n        fieldLabel: 'Sample Trigger',\n        emptyText: 'click the trigger'\n    }]\n});\n</code></pre>\n\n<p>However, in general you will most likely want to use Trigger as the base class for a reusable component.\n<a href=\"#!/api/Ext.form.field.Date\" rel=\"Ext.form.field.Date\" class=\"docClass\">Ext.form.field.Date</a> and <a href=\"#!/api/Ext.form.field.ComboBox\" rel=\"Ext.form.field.ComboBox\" class=\"docClass\">Ext.form.field.ComboBox</a> are perfect examples of this.</p>\n","!type":"fn(config: +Ext.Element|string|Ext_form_field_Trigger_cfg)","prototype":{"!proto":"Ext.form.field.Text.prototype","componentLayout":{"!type":"string|?","!doc":"<p>The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout\nmanager which sizes a Component's internal structure in response to the Component being sized.</p>\n\n<p>Generally, developers will not use this configuration as all provided Components which need their internal\nelements sizing (Such as <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">input fields</a>) come with their own componentLayout managers.</p>\n\n<p>The <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used on instances of the base <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\nclass which simply sizes the Component's encapsulating element to the height and width specified in the\n<a href=\"#!/api/Ext.form.field.Trigger-method-setSize\" rel=\"Ext.form.field.Trigger-method-setSize\" class=\"docClass\">setSize</a> method.</p>\n"},"editable":{"!type":"bool","!doc":"<p>false to prevent the user from typing text directly into the field; the field can only have its value set via an\naction invoked by the trigger.</p>\n"},"grow":{"!type":"bool"},"growMax":{"!type":"number"},"growMin":{"!type":"number"},"hideTrigger":{"!type":"bool","!doc":"<p>true to hide the trigger element and display only the base text field</p>\n"},"readOnly":{"!type":"bool","!doc":"<p>true to prevent the user from changing the field, and hides the trigger. Supercedes the editable and hideTrigger\noptions if the value is true.</p>\n"},"repeatTriggerClick":{"!type":"bool","!doc":"<p>true to attach a <a href=\"#!/api/Ext.util.ClickRepeater\" rel=\"Ext.util.ClickRepeater\" class=\"docClass\">click repeater</a> to the trigger.</p>\n"},"selectOnFocus":{"!type":"bool","!doc":"<p>true to select any existing text in the field immediately on focus. Only applies when\n<a href=\"#!/api/Ext.form.field.Trigger-cfg-editable\" rel=\"Ext.form.field.Trigger-cfg-editable\" class=\"docClass\">editable</a> = true</p>\n"},"triggerBaseCls":{"!type":"string","!doc":"<p>The base CSS class that is always added to the trigger button. The <a href=\"#!/api/Ext.form.field.Trigger-cfg-triggerCls\" rel=\"Ext.form.field.Trigger-cfg-triggerCls\" class=\"docClass\">triggerCls</a> will be appended in\naddition to this class.</p>\n"},"triggerCls":{"!type":"string","!doc":"<p>An additional CSS class used to style the trigger button. The trigger will always get the <a href=\"#!/api/Ext.form.field.Trigger-cfg-triggerBaseCls\" rel=\"Ext.form.field.Trigger-cfg-triggerBaseCls\" class=\"docClass\">triggerBaseCls</a>\nby default and triggerCls will be <strong>appended</strong> if specified.</p>\n"},"triggerNoEditCls":{"!type":"string","!doc":"<p>The CSS class that is added to the text field when component is read-only or not editable.</p>\n"},"triggerWrapCls":{"!type":"string","!doc":"<p>The CSS class that is added to the div wrapping the trigger button(s).</p>\n"},"childEls":{"!type":"[?]"},"extraTriggerCls":{"!type":"string"},"inputCell":{"!type":"+Ext.Element","!doc":"<p>A reference to the <code>TD</code> element wrapping the input element. Only set after the field has been rendered.</p>\n"},"mimicing":{"!type":"bool"},"monitorTab":{"!type":"bool"},"triggerEl":{"!type":"+Ext.CompositeElement","!doc":"<p>A composite of all the trigger button elements. Only set after the field has been rendered.</p>\n"},"triggerIndexRe":{"!type":"+RegExp"},"triggerWidth":{"!type":"number","!doc":"<p>Width of the trigger element. Unless set explicitly, it will be\nautomatically calculated through creating a temporary element\non page. (That will be done just once per app run.)</p>\n"},"triggerWrap":{"!type":"+Ext.Element","!doc":"<p>A reference to the <code>TABLE</code> element which encapsulates the input field and all trigger button(s). Only set after the field has been rendered.</p>\n"},"autoSize":{"!type":"fn() -> !this"},"beforeRender":{"!type":"fn() -> !this"},"checkTab":{"!type":"fn(me: ?, e: ?) -> !this"},"disableCheck":{"!type":"fn() -> !this"},"getLabelableRenderData":{"!type":"fn() -> ?","!doc":"<p>Generates the arguments for the field decorations <a href=\"#!/api/Ext.form.field.Trigger-cfg-labelableRenderTpl\" rel=\"Ext.form.field.Trigger-cfg-labelableRenderTpl\" class=\"docClass\">rendering template</a>.</p>\n"},"getSubTplData":{"!type":"fn() -> ?","!doc":"<p>Creates and returns the data object to be used when rendering the <a href=\"#!/api/Ext.form.field.Trigger-cfg-fieldSubTpl\" rel=\"Ext.form.field.Trigger-cfg-fieldSubTpl\" class=\"docClass\">fieldSubTpl</a>.</p>\n"},"getSubTplMarkup":{"!type":"fn(values: ?) -> !this","!doc":"<p>Gets the markup to be inserted into the outer template's bodyEl. For fields this is the actual input element.</p>\n"},"getTriggerMarkup":{"!type":"fn() -> !this"},"getTriggerStateFlags":{"!type":"fn() -> !this","!doc":"<p>Returns a set of flags that describe the trigger state. These are just used to easily\ndetermine if the DOM is out-of-sync with the component's properties.</p>\n"},"getTriggerWidth":{"!type":"fn() -> number","!doc":"<p>Get the total width of the trigger button area.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"initTrigger":{"!type":"fn() -> !this"},"mimicBlur":{"!type":"fn(e: ?) -> !this"},"onBlur":{"!type":"fn() -> !this","!doc":"<p>The default blur handling must not occur for a TriggerField, implementing this template method as emptyFn disables that.\nInstead the tab key is monitored, and the superclass's onBlur is called when tab is detected</p>\n"},"onDestroy":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the destroy operation.\nAfter calling the superclass's onDestroy, the Component will be destroyed.</p>\n"},"onFocus":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"onRender":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"onTriggerClick":{"!type":"fn(e: +Ext.EventObject) -> !this","!doc":"<p>The function that should handle the trigger's click event. This method does nothing by default until overridden\nby an implementing function. See <a href=\"#!/api/Ext.form.field.ComboBox\" rel=\"Ext.form.field.ComboBox\" class=\"docClass\">Ext.form.field.ComboBox</a> and <a href=\"#!/api/Ext.form.field.Date\" rel=\"Ext.form.field.Date\" class=\"docClass\">Ext.form.field.Date</a> for sample implementations.</p>\n"},"onTriggerWrapClick":{"!type":"fn() -> !this","!doc":"<p>process clicks upon triggers.\ndetermine which trigger index, and dispatch to the appropriate click handler</p>\n"},"onTriggerWrapMouseup":{"!type":"fn() -> !this","!doc":"<p>Handle trigger mouse up gesture. To be implemented in subclasses.\nCurrently the Spinner subclass refocuses the input element upon end of spin.</p>\n"},"setEditable":{"!type":"fn(editable: bool) -> !this","!doc":"<p>Sets the editable state of this field. This method is the runtime equivalent of setting the 'editable' config\noption at config time.</p>\n"},"setHideTrigger":{"!type":"fn(hideTrigger: ?) -> !this"},"setReadOnly":{"!type":"fn(readOnly: bool) -> !this","!doc":"<p>Sets the read-only state of this field. This method is the runtime equivalent of setting the 'readOnly' config\noption at config time.</p>\n"},"triggerBlur":{"!type":"fn(e: ?) -> !this"},"validateBlur":{"!type":"fn(e: ?) -> !this","!doc":"<p>This should be overridden by any subclass that needs to check whether or not the field can be blurred.</p>\n"}}},"VTypes":{"!doc":"<p>This is a singleton object which contains a set of commonly used field validation functions\nand provides a mechanism for creating reusable custom field validations.\nThe following field validation functions are provided out of the box:</p>\n\n<ul>\n<li><a href=\"#!/api/Ext.form.field.VTypes-method-alpha\" rel=\"Ext.form.field.VTypes-method-alpha\" class=\"docClass\">alpha</a></li>\n<li><a href=\"#!/api/Ext.form.field.VTypes-method-alphanum\" rel=\"Ext.form.field.VTypes-method-alphanum\" class=\"docClass\">alphanum</a></li>\n<li><a href=\"#!/api/Ext.form.field.VTypes-method-email\" rel=\"Ext.form.field.VTypes-method-email\" class=\"docClass\">email</a></li>\n<li><a href=\"#!/api/Ext.form.field.VTypes-method-url\" rel=\"Ext.form.field.VTypes-method-url\" class=\"docClass\">url</a></li>\n</ul>\n\n\n<p>VTypes can be applied to a <a href=\"#!/api/Ext.form.field.Text\" rel=\"Ext.form.field.Text\" class=\"docClass\">Text Field</a> using the <code><a href=\"#!/api/Ext.form.field.Text-cfg-vtype\" rel=\"Ext.form.field.Text-cfg-vtype\" class=\"docClass\">vtype</a></code> configuration:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.field.Text\" rel=\"Ext.form.field.Text\" class=\"docClass\">Ext.form.field.Text</a>', {\n    fieldLabel: 'Email Address',\n    name: 'email',\n    vtype: 'email' // applies email validation rules to this field\n});\n</code></pre>\n\n<p>To create custom VTypes:</p>\n\n<pre><code>// custom Vtype for vtype:'time'\nvar timeTest = /^([1-9]|1[0-9]):([0-5][0-9])(\\s[a|p]m)$/i;\n<a href=\"#!/api/Ext-method-apply\" rel=\"Ext-method-apply\" class=\"docClass\">Ext.apply</a>(<a href=\"#!/api/Ext.form.field.VTypes\" rel=\"Ext.form.field.VTypes\" class=\"docClass\">Ext.form.field.VTypes</a>, {\n    //  vtype validation function\n    time: function(val, field) {\n        return timeTest.test(val);\n    },\n    // vtype Text property: The error text to display when the validation function returns false\n    timeText: 'Not a valid time.  Must be in the format \"12:34 PM\".',\n    // vtype Mask property: The keystroke filter mask\n    timeMask: /[\\d\\s:amp]/i\n});\n</code></pre>\n\n<p>In the above example the <code>time</code> function is the validator that will run when field validation occurs,\n<code>timeText</code> is the error message, and <code>timeMask</code> limits what characters can be typed into the field.\nNote that the <code>Text</code> and <code>Mask</code> functions must begin with the same name as the validator function.</p>\n\n<p>Using a custom validator is the same as using one of the build-in validators - just use the name of the validator function\nas the <code><a href=\"#!/api/Ext.form.field.Text-cfg-vtype\" rel=\"Ext.form.field.Text-cfg-vtype\" class=\"docClass\">vtype</a></code> configuration on a <a href=\"#!/api/Ext.form.field.Text\" rel=\"Ext.form.field.Text\" class=\"docClass\">Text Field</a>:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.field.Text\" rel=\"Ext.form.field.Text\" class=\"docClass\">Ext.form.field.Text</a>', {\n    fieldLabel: 'Departure Time',\n    name: 'departureTime',\n    vtype: 'time' // applies custom time validation rules to this field\n});\n</code></pre>\n\n<p>Another example of a custom validator:</p>\n\n<pre><code>// custom Vtype for vtype:'IPAddress'\n<a href=\"#!/api/Ext-method-apply\" rel=\"Ext-method-apply\" class=\"docClass\">Ext.apply</a>(<a href=\"#!/api/Ext.form.field.VTypes\" rel=\"Ext.form.field.VTypes\" class=\"docClass\">Ext.form.field.VTypes</a>, {\n    IPAddress:  function(v) {\n        return /^\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}$/.test(v);\n    },\n    IPAddressText: 'Must be a numeric IP address',\n    IPAddressMask: /[\\d\\.]/i\n});\n</code></pre>\n\n<p>It's important to note that using <a href=\"#!/api/Ext-method-apply\" rel=\"Ext-method-apply\" class=\"docClass\">Ext.apply()</a> means that the custom validator function\nas well as <code>Text</code> and <code>Mask</code> fields are added as properties of the <code><a href=\"#!/api/Ext.form.field.VTypes\" rel=\"Ext.form.field.VTypes\" class=\"docClass\">Ext.form.field.VTypes</a></code> singleton.</p>\n","alphaMask":{"!type":"+RegExp","!doc":"<p>The keystroke filter mask to be applied on alpha input. Defaults to: /[a-z_]/i</p>\n"},"alphaText":{"!type":"string","!doc":"<p>The error text to display when the alpha validation function returns false.\nDefaults to: 'This field should only contain letters and _'</p>\n"},"alphanumMask":{"!type":"+RegExp","!doc":"<p>The keystroke filter mask to be applied on alphanumeric input. Defaults to: /[a-z0-9_]/i</p>\n"},"alphanumText":{"!type":"string","!doc":"<p>The error text to display when the alphanumeric validation function returns false.\nDefaults to: 'This field should only contain letters, numbers and _'</p>\n"},"emailMask":{"!type":"+RegExp","!doc":"<p>The keystroke filter mask to be applied on email input. See the <a href=\"#!/api/Ext.form.field.VTypes-method-email\" rel=\"Ext.form.field.VTypes-method-email\" class=\"docClass\">email</a> method for information about\nmore complex email validation. Defaults to: /[a-z0-9_.-@]/i</p>\n"},"emailText":{"!type":"string","!doc":"<p>The error text to display when the email validation function returns false.\nDefaults to: 'This field should be an e-mail address in the format \"user@example.com\"'</p>\n"},"urlText":{"!type":"string","!doc":"<p>The error text to display when the url validation function returns false.\nDefaults to: 'This field should be a URL in the format \"http:/'+'/www.example.com\"'</p>\n"},"alpha":{"!type":"fn(value: string) -> bool","!doc":"<p>The function used to validate alpha values</p>\n"},"alphanum":{"!type":"fn(value: string) -> bool","!doc":"<p>The function used to validate alphanumeric values</p>\n"},"email":{"!type":"fn(value: string) -> bool","!doc":"<p>The function used to validate email addresses. Note that complete validation per the email RFC\nspecifications is very complex and beyond the scope of this class, although this function can be\noverridden if a more comprehensive validation scheme is desired. See the validation section\nof the <a href=\"http://en.wikipedia.org/wiki/E-mail_address\">Wikipedia article on email addresses</a> for additional information. This implementation is\nintended to validate the following types of emails:</p>\n\n<ul>\n<li><code>barney@example.de</code></li>\n<li><code>barney.rubble@example.com</code></li>\n<li><code>barney-rubble@example.coop</code></li>\n<li><code>barney+rubble@example.com</code></li>\n<li><code>barney'rubble@example.com</code></li>\n<li><code>b.arne.y_r.ubbl.e@example.com</code></li>\n<li><code>barney4rubble@example.com</code></li>\n<li><code>barney4rubble!@example.com</code></li>\n<li><code>_barney+rubble@example.com</code></li>\n<li><code>\"barney+rubble\"@example.com</code></li>\n</ul>\n\n"},"url":{"!type":"fn(value: string) -> bool","!doc":"<p>The function used to validate URLs</p>\n"}}},"CheckboxManager":{"!doc":"<p>Private utility class for managing all <a href=\"#!/api/Ext.form.field.Checkbox\" rel=\"Ext.form.field.Checkbox\" class=\"docClass\">Ext.form.field.Checkbox</a> fields grouped by name.</p>\n","!type":"fn(config: Ext_form_CheckboxManager_cfg)","prototype":{"!proto":"Ext.util.MixedCollection.prototype"},"getByName":{"!type":"fn(name: ?, formId: ?) -> !this"}},"FieldAncestor":{"!doc":"<p>A mixin for <a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a> components that are likely to have form fields in their\nitems subtree. Adds the following capabilities:</p>\n\n<ul>\n<li>Methods for handling the addition and removal of <a href=\"#!/api/Ext.form.Labelable\" rel=\"Ext.form.Labelable\" class=\"docClass\">Ext.form.Labelable</a> and <a href=\"#!/api/Ext.form.field.Field\" rel=\"Ext.form.field.Field\" class=\"docClass\">Ext.form.field.Field</a>\ninstances at any depth within the container.</li>\n<li>Events (<a href=\"#!/api/Ext.form.FieldAncestor-event-fieldvaliditychange\" rel=\"Ext.form.FieldAncestor-event-fieldvaliditychange\" class=\"docClass\">fieldvaliditychange</a> and <a href=\"#!/api/Ext.form.FieldAncestor-event-fielderrorchange\" rel=\"Ext.form.FieldAncestor-event-fielderrorchange\" class=\"docClass\">fielderrorchange</a>) for handling changes to the state\nof individual fields at the container level.</li>\n<li>Automatic application of <a href=\"#!/api/Ext.form.FieldAncestor-cfg-fieldDefaults\" rel=\"Ext.form.FieldAncestor-cfg-fieldDefaults\" class=\"docClass\">fieldDefaults</a> config properties to each field added within the\ncontainer, to facilitate uniform configuration of all fields.</li>\n</ul>\n\n\n<p>This mixin is primarily for internal use by <a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a> and <a href=\"#!/api/Ext.form.FieldContainer\" rel=\"Ext.form.FieldContainer\" class=\"docClass\">Ext.form.FieldContainer</a>,\nand should not normally need to be used directly.</p>\n","prototype":{"fieldDefaults":{"!type":"?","!doc":"<p>If specified, the properties in this object are used as default config values for each <a href=\"#!/api/Ext.form.Labelable\" rel=\"Ext.form.Labelable\" class=\"docClass\">Ext.form.Labelable</a>\ninstance (e.g. <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">Ext.form.field.Base</a> or <a href=\"#!/api/Ext.form.FieldContainer\" rel=\"Ext.form.FieldContainer\" class=\"docClass\">Ext.form.FieldContainer</a>) that is added as a descendant of\nthis container. Corresponding values specified in an individual field's own configuration, or from the <a href=\"#!/api/Ext.container.Container-cfg-defaults\" rel=\"Ext.container.Container-cfg-defaults\" class=\"docClass\">defaults config</a> of its parent container, will take precedence. See the\ndocumentation for <a href=\"#!/api/Ext.form.Labelable\" rel=\"Ext.form.Labelable\" class=\"docClass\">Ext.form.Labelable</a> to see what config options may be specified in the fieldDefaults.</p>\n\n<p>Example:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>({\n    fieldDefaults: {\n        labelAlign: 'left',\n        labelWidth: 100\n    },\n    items: [{\n        xtype: 'fieldset',\n        defaults: {\n            labelAlign: 'top'\n        },\n        items: [{\n            name: 'field1'\n        }, {\n            name: 'field2'\n        }]\n    }, {\n        xtype: 'fieldset',\n        items: [{\n            name: 'field3',\n            labelWidth: 150\n        }, {\n            name: 'field4'\n        }]\n    }]\n});\n</code></pre>\n\n<p>In this example, field1 and field2 will get labelAlign:'top' (from the fieldset's defaults) and labelWidth:100\n(from fieldDefaults), field3 and field4 will both get labelAlign:'left' (from fieldDefaults and field3 will use\nthe labelWidth:150 from its own config.</p>\n"},"beforeDestroy":{"!type":"fn() -> !this"},"handleFieldErrorChange":{"!type":"fn(labelable: ?, activeError: ?) -> !this","!doc":"<p>Handle bubbled errorchange events from descendants; invoke the aggregated event and method</p>\n"},"handleFieldValidityChange":{"!type":"fn(field: ?, isValid: ?) -> !this","!doc":"<p>Handle bubbled validitychange events from descendants; invoke the aggregated event and method</p>\n"},"initFieldAncestor":{"!type":"fn() -> !this","!doc":"<p>Initializes the FieldAncestor's state; this must be called from the initComponent method of any components\nimporting this mixin.</p>\n"},"initFieldDefaults":{"!type":"fn() -> !this","!doc":"<p>Initialize the <a href=\"#!/api/Ext.form.FieldAncestor-cfg-fieldDefaults\" rel=\"Ext.form.FieldAncestor-cfg-fieldDefaults\" class=\"docClass\">fieldDefaults</a> object</p>\n"},"initMonitor":{"!type":"fn() -> !this"},"onChildFieldAdd":{"!type":"fn(field: ?) -> !this"},"onChildFieldRemove":{"!type":"fn(field: ?) -> !this"},"onFieldErrorChange":{"!type":"fn(field: +Ext.form.Labelable, error: string) -> !this","!doc":"<p>Fired when the error message of any field within the container changes.</p>\n"},"onFieldValidityChange":{"!type":"fn(field: +Ext.form.field.Field, valid: bool) -> !this","!doc":"<p>Fired when the validity of any field within the container changes.</p>\n"},"fielderrorchange":{"!type":"fn(this: +Ext.form.FieldAncestor, The: +Ext.form.Labelable, error: string, eOpts: ?)","!doc":"<p>Fires when the active error message is changed for any one of the <a href=\"#!/api/Ext.form.Labelable\" rel=\"Ext.form.Labelable\" class=\"docClass\">Ext.form.Labelable</a> instances\nwithin this container.</p>\n"},"fieldvaliditychange":{"!type":"fn(this: +Ext.form.FieldAncestor, The: +Ext.form.Labelable, isValid: string, eOpts: ?)","!doc":"<p>Fires when the validity state of any one of the <a href=\"#!/api/Ext.form.field.Field\" rel=\"Ext.form.field.Field\" class=\"docClass\">Ext.form.field.Field</a> instances within this\ncontainer changes.</p>\n"}}},"FieldContainer":{"!doc":"<p>FieldContainer is a derivation of <a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Container</a> that implements the\n<a href=\"#!/api/Ext.form.Labelable\" rel=\"Ext.form.Labelable\" class=\"docClass\">Labelable</a> mixin. This allows it to be configured so that it is rendered with\na <a href=\"#!/api/Ext.form.FieldContainer-cfg-fieldLabel\" rel=\"Ext.form.FieldContainer-cfg-fieldLabel\" class=\"docClass\">field label</a> and optional <a href=\"#!/api/Ext.form.FieldContainer-cfg-msgTarget\" rel=\"Ext.form.FieldContainer-cfg-msgTarget\" class=\"docClass\">error message</a> around its sub-items.\nThis is useful for arranging a group of fields or other components within a single item in a form, so\nthat it lines up nicely with other fields. A common use is for grouping a set of related fields under\na single label in a form.</p>\n\n<p>The container's configured <a href=\"#!/api/Ext.form.FieldContainer-cfg-items\" rel=\"Ext.form.FieldContainer-cfg-items\" class=\"docClass\">items</a> will be layed out within the field body area according to the\nconfigured <a href=\"#!/api/Ext.form.FieldContainer-cfg-layout\" rel=\"Ext.form.FieldContainer-cfg-layout\" class=\"docClass\">layout</a> type. The default layout is <code>'autocontainer'</code>.</p>\n\n<p>Like regular fields, FieldContainer can inherit its decoration configuration from the\n<a href=\"#!/api/Ext.form.Panel-cfg-fieldDefaults\" rel=\"Ext.form.Panel-cfg-fieldDefaults\" class=\"docClass\">fieldDefaults</a> of an enclosing FormPanel. In addition,\nFieldContainer itself can pass <a href=\"#!/api/Ext.form.FieldContainer-cfg-fieldDefaults\" rel=\"Ext.form.FieldContainer-cfg-fieldDefaults\" class=\"docClass\">fieldDefaults</a> to any <a href=\"#!/api/Ext.form.Labelable\" rel=\"Ext.form.Labelable\" class=\"docClass\">fields</a>\nit may itself contain.</p>\n\n<p>If you are grouping a set of <a href=\"#!/api/Ext.form.field.Checkbox\" rel=\"Ext.form.field.Checkbox\" class=\"docClass\">Checkbox</a> or <a href=\"#!/api/Ext.form.field.Radio\" rel=\"Ext.form.field.Radio\" class=\"docClass\">Radio</a>\nfields in a single labeled container, consider using a <a href=\"#!/api/Ext.form.CheckboxGroup\" rel=\"Ext.form.CheckboxGroup\" class=\"docClass\">Ext.form.CheckboxGroup</a>\nor <a href=\"#!/api/Ext.form.RadioGroup\" rel=\"Ext.form.RadioGroup\" class=\"docClass\">Ext.form.RadioGroup</a> instead as they are specialized for handling those types.</p>\n\n<h1>Example</h1>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>', {\n    title: 'FieldContainer Example',\n    width: 550,\n    bodyPadding: 10,\n\n    items: [{\n        xtype: 'fieldcontainer',\n        fieldLabel: 'Last Three Jobs',\n        labelWidth: 100,\n\n        // The body area will contain three text fields, arranged\n        // horizontally, separated by draggable splitters.\n        layout: 'hbox',\n        items: [{\n            xtype: 'textfield',\n            flex: 1\n        }, {\n            xtype: 'splitter'\n        }, {\n            xtype: 'textfield',\n            flex: 1\n        }, {\n            xtype: 'splitter'\n        }, {\n            xtype: 'textfield',\n            flex: 1\n        }]\n    }],\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n\n<h1>Usage of fieldDefaults</h1>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>', {\n    title: 'FieldContainer Example',\n    width: 350,\n    bodyPadding: 10,\n\n    items: [{\n        xtype: 'fieldcontainer',\n        fieldLabel: 'Your Name',\n        labelWidth: 75,\n        defaultType: 'textfield',\n\n        // Arrange fields vertically, stretched to full width\n        layout: 'anchor',\n        defaults: {\n            layout: '100%'\n        },\n\n        // These config values will be applied to both sub-fields, except\n        // for Last Name which will use its own msgTarget.\n        fieldDefaults: {\n            msgTarget: 'under',\n            labelAlign: 'top'\n        },\n\n        items: [{\n            fieldLabel: 'First Name',\n            name: 'firstName'\n        }, {\n            fieldLabel: 'Last Name',\n            name: 'lastName',\n            msgTarget: 'under'\n        }]\n    }],\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_form_FieldContainer_cfg)","prototype":{"!proto":"Ext.container.Container.prototype","combineErrors":{"!type":"bool","!doc":"<p>If set to true, the field container will automatically combine and display the validation errors from\nall the fields it contains as a single error on the container, according to the configured\n<a href=\"#!/api/Ext.form.FieldContainer-cfg-msgTarget\" rel=\"Ext.form.FieldContainer-cfg-msgTarget\" class=\"docClass\">msgTarget</a>. Defaults to false.</p>\n"},"combineLabels":{"!type":"bool","!doc":"<p>If set to true, and there is no defined <a href=\"#!/api/Ext.form.FieldContainer-cfg-fieldLabel\" rel=\"Ext.form.FieldContainer-cfg-fieldLabel\" class=\"docClass\">fieldLabel</a>, the field container will automatically\ngenerate its label by combining the labels of all the fields it contains. Defaults to false.</p>\n"},"componentCls":{"!type":"string","!doc":"<p>CSS Class to be added to a components root level element to give distinction to it via styling.</p>\n"},"componentLayout":{"!type":"string|?","!doc":"<p>The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout\nmanager which sizes a Component's internal structure in response to the Component being sized.</p>\n\n<p>Generally, developers will not use this configuration as all provided Components which need their internal\nelements sizing (Such as <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">input fields</a>) come with their own componentLayout managers.</p>\n\n<p>The <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used on instances of the base <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\nclass which simply sizes the Component's encapsulating element to the height and width specified in the\n<a href=\"#!/api/Ext.form.FieldContainer-method-setSize\" rel=\"Ext.form.FieldContainer-method-setSize\" class=\"docClass\">setSize</a> method.</p>\n"},"invalidCls":{"!type":"string","!doc":"<p>If we allow this to mark with the invalidCls it will cascade to all\nchild fields, let them handle themselves</p>\n"},"labelConnector":{"!type":"string","!doc":"<p>The string to use when joining the labels of individual sub-fields, when <a href=\"#!/api/Ext.form.FieldContainer-cfg-combineLabels\" rel=\"Ext.form.FieldContainer-cfg-combineLabels\" class=\"docClass\">combineLabels</a> is\nset to true. Defaults to ', '.</p>\n"},"childEls":{"!type":"[?]"},"customOverflowEl":{"!type":"string","!doc":"<p>Used by the layout system, typically the scrolling el is the targetEl, however we need\nto let it know we're using something different</p>\n"},"fieldSubTpl":{"!type":"string"},"maskOnDisable":{"!type":"bool","!doc":"<p>This is an internal flag that you use when creating custom components. By default this is set to <code>true</code> which means\nthat every component gets a mask when it's disabled. Components like FieldContainer, FieldSet, Field, Button, Tab\noverride this property to <code>false</code> since they want to implement custom disable logic.</p>\n"},"applyTargetCls":{"!type":"fn(targetCls: ?) -> !this","!doc":"<p>The targetCls is a CSS class that the layout needs added to the targetEl. The targetEl is where the container's\nchildren are rendered and is usually just the main el. Some containers (e.g. panels) use a body instead.</p>\n\n<p>In general, if a class overrides getTargetEl it will also need to override this method. This is necessary to\navoid a post-render step to add the targetCls.</p>\n"},"getCombinedErrors":{"!type":"fn(invalidFields: [+Ext.form.field.Field]) -> [string]","!doc":"<p>Takes an Array of invalid <a href=\"#!/api/Ext.form.field.Field\" rel=\"Ext.form.field.Field\" class=\"docClass\">Ext.form.field.Field</a> objects and builds a combined list of error\nmessages from them. Defaults to prepending each message by the field name and a colon. This\ncan be overridden to provide custom combined error message handling, for instance changing\nthe format of each message or sorting the array (it is sorted in order of appearance by default).</p>\n"},"getFieldLabel":{"!type":"fn() -> string","!doc":"<p>Returns the combined field label if <a href=\"#!/api/Ext.form.FieldContainer-cfg-combineLabels\" rel=\"Ext.form.FieldContainer-cfg-combineLabels\" class=\"docClass\">combineLabels</a> is set to true and if there is no\nset <a href=\"#!/api/Ext.form.FieldContainer-cfg-fieldLabel\" rel=\"Ext.form.FieldContainer-cfg-fieldLabel\" class=\"docClass\">fieldLabel</a>. Otherwise returns the fieldLabel like normal. You can also override\nthis method to provide a custom generated label.</p>\n"},"getOverflowEl":{"!type":"fn() -> !this","!doc":"<p>Get an el for overflowing, defaults to the target el</p>\n"},"getSubTplData":{"!type":"fn() -> !this"},"getSubTplMarkup":{"!type":"fn() -> string","!doc":"<p>Gets the markup to be inserted into the outer template's bodyEl. Defaults to empty string, should be implemented\nby classes including this mixin as needed.</p>\n"},"getTargetEl":{"!type":"fn() -> !this","!doc":"<p>This is used to determine where to insert the 'html', 'contentEl' and 'items' in this component.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>The initComponent template method is an important initialization step for a Component. It is intended to be\nimplemented by each subclass of <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> to provide any needed constructor logic. The\ninitComponent method of the class being created is called first, with each initComponent method\nup the hierarchy to <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> being called thereafter. This makes it easy to implement and,\nif needed, override the constructor logic of the Component at any step in the hierarchy.</p>\n\n<p>The initComponent method <strong>must</strong> contain a call to <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a> in order\nto ensure that the parent class' initComponent method is also called.</p>\n\n<p>All config options passed to the constructor are applied to <code>this</code> before initComponent is called,\nso you can simply access them with <code>this.someOption</code>.</p>\n\n<p>The following example demonstrates using a dynamic string for the text of a button at the time of\ninstantiation of the class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('DynamicButtonText', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n\n    initComponent: function() {\n        this.text = new Date();\n        this.renderTo = <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>();\n        this.callParent();\n    }\n});\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function() {\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('DynamicButtonText');\n});\n</code></pre>\n"},"initRenderData":{"!type":"fn() -> ?","!doc":"<p>Initialized the renderData to be used when rendering the renderTpl.</p>\n"},"initRenderTpl":{"!type":"fn() -> +Ext.XTemplate","!doc":"<p>Initializes the renderTpl.</p>\n"},"onAdd":{"!type":"fn(labelable: +Ext.form.Labelable) -> !this","!doc":"<p>Called when a <a href=\"#!/api/Ext.form.Labelable\" rel=\"Ext.form.Labelable\" class=\"docClass\">Ext.form.Labelable</a> instance is added to the container's subtree.</p>\n"},"onFieldErrorChange":{"!type":"fn(field: ?, activeError: ?) -> !this","!doc":"<p>Fired when the error message of any field within the container changes, and updates the\ncombined error message to match.</p>\n"},"onRemove":{"!type":"fn(labelable: +Ext.form.Labelable) -> !this","!doc":"<p>Called when a <a href=\"#!/api/Ext.form.Labelable\" rel=\"Ext.form.Labelable\" class=\"docClass\">Ext.form.Labelable</a> instance is removed from the container's subtree.</p>\n"},"updateLabel":{"!type":"fn() -> !this","!doc":"<p>Updates the content of the labelEl if it is rendered</p>\n"}}},"Labelable":{"prototype":{"activeError":{"!type":"string","!doc":"<p>If specified, then the component will be displayed with this value as its active error when first rendered. Use\n<a href=\"#!/api/Ext.form.Labelable-method-setActiveError\" rel=\"Ext.form.Labelable-method-setActiveError\" class=\"docClass\">setActiveError</a> or <a href=\"#!/api/Ext.form.Labelable-method-unsetActiveError\" rel=\"Ext.form.Labelable-method-unsetActiveError\" class=\"docClass\">unsetActiveError</a> to change it after component creation.</p>\n"},"activeErrorsTpl":{"!type":"string|[string]|+Ext.XTemplate","!doc":"<p>The template used to format the Array of error messages passed to <a href=\"#!/api/Ext.form.Labelable-method-setActiveErrors\" rel=\"Ext.form.Labelable-method-setActiveErrors\" class=\"docClass\">setActiveErrors</a> into a single HTML\nstring. if the <a href=\"#!/api/Ext.form.Labelable-cfg-msgTarget\" rel=\"Ext.form.Labelable-cfg-msgTarget\" class=\"docClass\">msgTarget</a> is title, it defaults to a list separated by new lines. Otherwise, it\nrenders each message as an item in an unordered list.</p>\n"},"afterBodyEl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nat the end of the input containing element. If an <code>XTemplate</code> is used, the component's <a href=\"#!/api/Ext.AbstractComponent-cfg-renderData\" rel=\"Ext.AbstractComponent-cfg-renderData\" class=\"docClass\">render data</a>\nserves as the context.</p>\n"},"afterLabelTextTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nafter the label text. If an <code>XTemplate</code> is used, the component's <a href=\"#!/api/Ext.AbstractComponent-cfg-renderData\" rel=\"Ext.AbstractComponent-cfg-renderData\" class=\"docClass\">render data</a>\nserves as the context.</p>\n"},"afterLabelTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nafter the label element. If an <code>XTemplate</code> is used, the component's <a href=\"#!/api/Ext.AbstractComponent-cfg-renderData\" rel=\"Ext.AbstractComponent-cfg-renderData\" class=\"docClass\">render data</a>\nserves as the context.</p>\n"},"afterSubTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nafter the <a href=\"#!/api/Ext.form.Labelable-method-getSubTplMarkup\" rel=\"Ext.form.Labelable-method-getSubTplMarkup\" class=\"docClass\">subTpl markup</a>. If an <code>XTemplate</code> is used, the\ncomponent's <a href=\"#!/api/Ext.AbstractComponent-cfg-renderData\" rel=\"Ext.AbstractComponent-cfg-renderData\" class=\"docClass\">render data</a> serves as the context.</p>\n"},"autoFitErrors":{"!type":"bool","!doc":"<p>Whether to adjust the component's body area to make room for 'side' or 'under' <a href=\"#!/api/Ext.form.Labelable-cfg-msgTarget\" rel=\"Ext.form.Labelable-cfg-msgTarget\" class=\"docClass\">error messages</a>.</p>\n"},"baseBodyCls":{"!type":"string","!doc":"<p>The CSS class to be applied to the body content element.</p>\n"},"beforeBodyEl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nat the beginning of the input containing element. If an <code>XTemplate</code> is used, the component's <a href=\"#!/api/Ext.AbstractComponent-cfg-renderData\" rel=\"Ext.AbstractComponent-cfg-renderData\" class=\"docClass\">render data</a>\nserves as the context.</p>\n"},"beforeLabelTextTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nbefore the label text. If an <code>XTemplate</code> is used, the component's <a href=\"#!/api/Ext.AbstractComponent-cfg-renderData\" rel=\"Ext.AbstractComponent-cfg-renderData\" class=\"docClass\">render data</a>\nserves as the context.</p>\n"},"beforeLabelTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nbefore the label element. If an <code>XTemplate</code> is used, the component's <a href=\"#!/api/Ext.AbstractComponent-cfg-renderData\" rel=\"Ext.AbstractComponent-cfg-renderData\" class=\"docClass\">render data</a>\nserves as the context.</p>\n"},"beforeSubTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\nbefore the <a href=\"#!/api/Ext.form.Labelable-method-getSubTplMarkup\" rel=\"Ext.form.Labelable-method-getSubTplMarkup\" class=\"docClass\">subTpl markup</a>. If an <code>XTemplate</code> is used, the\ncomponent's <a href=\"#!/api/Ext.AbstractComponent-cfg-renderData\" rel=\"Ext.AbstractComponent-cfg-renderData\" class=\"docClass\">render data</a> serves as the context.</p>\n"},"clearCls":{"!type":"string","!doc":"<p>The CSS class to be applied to the special clearing div rendered directly after the field contents wrapper to\nprovide field clearing.</p>\n"},"errorMsgCls":{"!type":"string","!doc":"<p>The CSS class to be applied to the error message element.</p>\n"},"fieldBodyCls":{"!type":"string","!doc":"<p>An extra CSS class to be applied to the body content element in addition to <a href=\"#!/api/Ext.form.Labelable-cfg-baseBodyCls\" rel=\"Ext.form.Labelable-cfg-baseBodyCls\" class=\"docClass\">baseBodyCls</a>.</p>\n"},"fieldLabel":{"!type":"string","!doc":"<p>The label for the field. It gets appended with the <a href=\"#!/api/Ext.form.Labelable-cfg-labelSeparator\" rel=\"Ext.form.Labelable-cfg-labelSeparator\" class=\"docClass\">labelSeparator</a>, and its position and sizing is\ndetermined by the <a href=\"#!/api/Ext.form.Labelable-cfg-labelAlign\" rel=\"Ext.form.Labelable-cfg-labelAlign\" class=\"docClass\">labelAlign</a>, <a href=\"#!/api/Ext.form.Labelable-cfg-labelWidth\" rel=\"Ext.form.Labelable-cfg-labelWidth\" class=\"docClass\">labelWidth</a>, and <a href=\"#!/api/Ext.form.Labelable-cfg-labelPad\" rel=\"Ext.form.Labelable-cfg-labelPad\" class=\"docClass\">labelPad</a> configs.</p>\n"},"formItemCls":{"!type":"string","!doc":"<p>A CSS class to be applied to the outermost element to denote that it is participating in the form field layout.</p>\n"},"hideEmptyLabel":{"!type":"bool","!doc":"<p>When set to true, the label element (<a href=\"#!/api/Ext.form.Labelable-cfg-fieldLabel\" rel=\"Ext.form.Labelable-cfg-fieldLabel\" class=\"docClass\">fieldLabel</a> and <a href=\"#!/api/Ext.form.Labelable-cfg-labelSeparator\" rel=\"Ext.form.Labelable-cfg-labelSeparator\" class=\"docClass\">labelSeparator</a>) will be automatically\nhidden if the <a href=\"#!/api/Ext.form.Labelable-cfg-fieldLabel\" rel=\"Ext.form.Labelable-cfg-fieldLabel\" class=\"docClass\">fieldLabel</a> is empty. Setting this to false will cause the empty label element to be\nrendered and space to be reserved for it; this is useful if you want a field without a label to line up with\nother labeled fields in the same form.</p>\n\n<p>If you wish to unconditionall hide the label even if a non-empty fieldLabel is configured, then set the\n<a href=\"#!/api/Ext.form.Labelable-cfg-hideLabel\" rel=\"Ext.form.Labelable-cfg-hideLabel\" class=\"docClass\">hideLabel</a> config to true.</p>\n"},"hideLabel":{"!type":"bool","!doc":"<p>Set to true to completely hide the label element (<a href=\"#!/api/Ext.form.Labelable-cfg-fieldLabel\" rel=\"Ext.form.Labelable-cfg-fieldLabel\" class=\"docClass\">fieldLabel</a> and <a href=\"#!/api/Ext.form.Labelable-cfg-labelSeparator\" rel=\"Ext.form.Labelable-cfg-labelSeparator\" class=\"docClass\">labelSeparator</a>). Also see\n<a href=\"#!/api/Ext.form.Labelable-cfg-hideEmptyLabel\" rel=\"Ext.form.Labelable-cfg-hideEmptyLabel\" class=\"docClass\">hideEmptyLabel</a>, which controls whether space will be reserved for an empty fieldLabel.</p>\n"},"labelAlign":{"!type":"string","!doc":"<p>Controls the position and alignment of the <a href=\"#!/api/Ext.form.Labelable-cfg-fieldLabel\" rel=\"Ext.form.Labelable-cfg-fieldLabel\" class=\"docClass\">fieldLabel</a>. Valid values are:</p>\n\n<ul>\n<li>\"left\" (the default) - The label is positioned to the left of the field, with its text aligned to the left.\nIts width is determined by the <a href=\"#!/api/Ext.form.Labelable-cfg-labelWidth\" rel=\"Ext.form.Labelable-cfg-labelWidth\" class=\"docClass\">labelWidth</a> config.</li>\n<li>\"top\" - The label is positioned above the field.</li>\n<li>\"right\" - The label is positioned to the left of the field, with its text aligned to the right.\nIts width is determined by the <a href=\"#!/api/Ext.form.Labelable-cfg-labelWidth\" rel=\"Ext.form.Labelable-cfg-labelWidth\" class=\"docClass\">labelWidth</a> config.</li>\n</ul>\n\n"},"labelAttrTpl":{"!type":"string|[?]|+Ext.XTemplate","!doc":"<p>An optional string or <code>XTemplate</code> configuration to insert in the field markup\ninside the label element (as attributes). If an <code>XTemplate</code> is used, the component's\n<a href=\"#!/api/Ext.AbstractComponent-cfg-renderData\" rel=\"Ext.AbstractComponent-cfg-renderData\" class=\"docClass\">render data</a> serves as the context.</p>\n"},"labelCls":{"!type":"string","!doc":"<p>The CSS class to be applied to the label element. This (single) CSS class is used to formulate the renderSelector\nand drives the field layout where it is concatenated with a hyphen ('-') and <a href=\"#!/api/Ext.form.Labelable-cfg-labelAlign\" rel=\"Ext.form.Labelable-cfg-labelAlign\" class=\"docClass\">labelAlign</a>. To add\nadditional classes, use <a href=\"#!/api/Ext.form.Labelable-cfg-labelClsExtra\" rel=\"Ext.form.Labelable-cfg-labelClsExtra\" class=\"docClass\">labelClsExtra</a>.</p>\n"},"labelClsExtra":{"!type":"string","!doc":"<p>An optional string of one or more additional CSS classes to add to the label element. Defaults to empty.</p>\n"},"labelPad":{"!type":"number","!doc":"<p>The amount of space in pixels between the <a href=\"#!/api/Ext.form.Labelable-cfg-fieldLabel\" rel=\"Ext.form.Labelable-cfg-fieldLabel\" class=\"docClass\">fieldLabel</a> and the input field.</p>\n"},"labelSeparator":{"!type":"string","!doc":"<p>Character(s) to be inserted at the end of the <a href=\"#!/api/Ext.form.Labelable-cfg-fieldLabel\" rel=\"Ext.form.Labelable-cfg-fieldLabel\" class=\"docClass\">label text</a>.</p>\n\n<p>Set to empty string to hide the separator completely.</p>\n"},"labelStyle":{"!type":"string","!doc":"<p>A CSS style specification string to apply directly to this field's label.</p>\n"},"labelWidth":{"!type":"number","!doc":"<p>The width of the <a href=\"#!/api/Ext.form.Labelable-cfg-fieldLabel\" rel=\"Ext.form.Labelable-cfg-fieldLabel\" class=\"docClass\">fieldLabel</a> in pixels. Only applicable if the <a href=\"#!/api/Ext.form.Labelable-cfg-labelAlign\" rel=\"Ext.form.Labelable-cfg-labelAlign\" class=\"docClass\">labelAlign</a> is set to \"left\" or\n\"right\".</p>\n"},"labelableRenderTpl":{"!type":"string|[string]|+Ext.XTemplate","!doc":"<p>The rendering template for the field decorations. Component classes using this mixin\nshould include logic to use this as their <a href=\"#!/api/Ext.AbstractComponent-cfg-renderTpl\" rel=\"Ext.AbstractComponent-cfg-renderTpl\" class=\"docClass\">renderTpl</a>,\nand implement the <a href=\"#!/api/Ext.form.Labelable-method-getSubTplMarkup\" rel=\"Ext.form.Labelable-method-getSubTplMarkup\" class=\"docClass\">getSubTplMarkup</a> method to generate the field body content.</p>\n\n<p>The structure of a field is a table as follows:</p>\n\n<p>If <code>labelAlign: 'left',</code>msgTarget: 'side'`</p>\n\n<pre><code> +----------------------+----------------------+-------------+\n | Label:               | InputField           | sideErrorEl |\n +----------------------+----------------------+-------------+\n</code></pre>\n\n<p>If <code>labelAlign: 'left',</code>msgTarget: 'under'`</p>\n\n<pre><code> +----------------------+------------------------------------+\n | Label:               | InputField      (colspan=2)        |\n |                      | underErrorEl                       |\n +----------------------+------------------------------------+\n</code></pre>\n\n<p>If <code>labelAlign: 'top',</code>msgTarget: 'side'`</p>\n\n<pre><code> +---------------------------------------------+-------------+\n | label                                       |             |\n | InputField                                  | sideErrorEl |\n +---------------------------------------------+-------------+\n</code></pre>\n\n<p>If <code>labelAlign: 'top',</code>msgTarget: 'under'`</p>\n\n<pre><code> +-----------------------------------------------------------+\n | label                                                     |\n | InputField                      (colspan=2)               |\n | underErrorEl                                              |\n +-----------------------------------------------------------+\n</code></pre>\n\n<p>The total columns always the same for fields with each setting of <a href=\"#!/api/Ext.form.Labelable-cfg-labelAlign\" rel=\"Ext.form.Labelable-cfg-labelAlign\" class=\"docClass\">labelAlign</a> because when\nrendered into a <a href=\"#!/api/Ext.layout.container.Form\" rel=\"Ext.layout.container.Form\" class=\"docClass\">Ext.layout.container.Form</a> layout, just the <code>TR</code> of the table\nwill be placed into the form's main <code>TABLE</code>, and the columns of all the siblings\nmust match so that they all line up. In a <a href=\"#!/api/Ext.layout.container.Form\" rel=\"Ext.layout.container.Form\" class=\"docClass\">Ext.layout.container.Form</a> layout, different\nsettings of <a href=\"#!/api/Ext.form.Labelable-cfg-labelAlign\" rel=\"Ext.form.Labelable-cfg-labelAlign\" class=\"docClass\">labelAlign</a> are not supported because of the incompatible column structure.</p>\n\n<p>When the triggerCell or side error cell are hidden or shown, the input cell's colspan\nis recalculated to maintain the correct 3 visible column count.</p>\n"},"msgTarget":{"!type":"string","!doc":"<p>The location where the error message text should display. Must be one of the following values:</p>\n\n<ul>\n<li><p><code>qtip</code> Display a quick tip containing the message when the user hovers over the field.\nThis is the default.</p>\n\n<p><strong><a href=\"#!/api/Ext.tip.QuickTipManager-method-init\" rel=\"Ext.tip.QuickTipManager-method-init\" class=\"docClass\">Ext.tip.QuickTipManager.init</a> must have been called for this setting to work.</strong></p></li>\n<li><p><code>title</code> Display the message in a default browser title attribute popup.</p></li>\n<li><code>under</code> Add a block div beneath the field containing the error message.</li>\n<li><code>side</code> Add an error icon to the right of the field, displaying the message in a popup on hover.</li>\n<li><code>none</code> Don't display any error message. This might be useful if you are implementing custom error display.</li>\n<li><code>[element id]</code> Add the error message directly to the innerHTML of the specified element.</li>\n</ul>\n\n"},"preventMark":{"!type":"bool","!doc":"<p>true to disable displaying any <a href=\"#!/api/Ext.form.Labelable-method-setActiveError\" rel=\"Ext.form.Labelable-method-setActiveError\" class=\"docClass\">error message</a> set on this object.</p>\n"},"autoEl":{"!type":"?"},"bodyEl":{"!type":"+Ext.Element","!doc":"<p>The div Element wrapping the component's contents. Only available after the component has been rendered.</p>\n"},"errorEl":{"!type":"+Ext.Element","!doc":"<p>The div Element that will contain the component's error message(s). Note that depending on the configured\n<a href=\"#!/api/Ext.form.Labelable-cfg-msgTarget\" rel=\"Ext.form.Labelable-cfg-msgTarget\" class=\"docClass\">msgTarget</a>, this element may be hidden in favor of some other form of presentation, but will always\nbe present in the DOM for use by assistive technologies.</p>\n"},"htmlActiveErrorsTpl":{"!type":"[?]"},"inputRowCls":{"!type":"string","!doc":"<p>private</p>\n"},"isFieldLabelable":{"!type":"bool","!doc":"<p>Flag denoting that this object is labelable as a field. Always true.</p>\n"},"labelCell":{"!type":"+Ext.Element","!doc":"<p>The <code>&lt;TD&gt;</code> Element which contains the label Element for this component. Only available after the component has been rendered.</p>\n"},"labelEl":{"!type":"+Ext.Element","!doc":"<p>The label Element for this component. Only available after the component has been rendered.</p>\n"},"labelableInsertions":{"!type":"[?]"},"labelableRenderProps":{"!type":"[?]","!doc":"<p>This is an array to avoid a split on every call to <a href=\"#!/api/Ext-method-copyTo\" rel=\"Ext-method-copyTo\" class=\"docClass\">Ext.copyTo</a></p>\n"},"noWrap":{"!type":"bool","!doc":"<p>Tells the layout system that the height can be measured immediately because the width does not need setting.</p>\n"},"plaintextActiveErrorsTpl":{"!type":"[?]"},"xhooks":{"!type":"?"},"getActiveError":{"!type":"fn() -> string","!doc":"<p>Gets the active error message for this component, if any. This does not trigger validation on its own, it merely\nreturns any message that the component may already hold.</p>\n"},"getActiveErrors":{"!type":"fn() -> [string]","!doc":"<p>Gets an Array of any active error messages currently applied to the field. This does not trigger validation on\nits own, it merely returns any messages that the component may already hold.</p>\n"},"getBodyColspan":{"!type":"fn() -> !this","!doc":"<p>Calculates the colspan value for the body cell - the cell which contains the input field.</p>\n\n<p>The field table structure contains 4 columns:</p>\n"},"getErrorMsgCls":{"!type":"fn() -> !this"},"getInputId":{"!type":"fn() -> string","!doc":"<p>Get the input id, if any, for this component. This is used as the \"for\" attribute on the label element.\nImplementing subclasses may also use this as e.g. the id for their own input element.</p>\n"},"getInsertionRenderData":{"!type":"fn(data: ?, names: ?) -> !this"},"getLabelCellAttrs":{"!type":"fn() -> !this"},"getLabelCellStyle":{"!type":"fn() -> !this"},"getLabelCls":{"!type":"fn() -> !this"},"getLabelStyle":{"!type":"fn() -> string","!doc":"<p>Gets any label styling for the labelEl</p>\n"},"getLabelWidth":{"!type":"fn() -> number","!doc":"<p>Gets the width of the label (if visible)</p>\n"},"getLabelableRenderData":{"!type":"fn() -> ?","!doc":"<p>Generates the arguments for the field decorations <a href=\"#!/api/Ext.form.Labelable-cfg-labelableRenderTpl\" rel=\"Ext.form.Labelable-cfg-labelableRenderTpl\" class=\"docClass\">rendering template</a>.</p>\n"},"hasActiveError":{"!type":"fn() -> bool","!doc":"<p>Tells whether the field currently has an active error message. This does not trigger validation on its own, it\nmerely looks for any message that the component may already hold.</p>\n"},"hasVisibleLabel":{"!type":"fn() -> bool","!doc":"<p>Checks if the field has a visible label</p>\n"},"initLabelable":{"!type":"fn() -> !this","!doc":"<p>Performs initialization of this mixin. Component classes using this mixin should call this method during their\nown initialization.</p>\n"},"renderActiveError":{"!type":"fn() -> !this","!doc":"<p>Updates the rendered DOM to match the current activeError. This only updates the content and\nattributes, you'll have to call doComponentLayout to actually update the display.</p>\n"},"setActiveError":{"!type":"fn(msg: string) -> !this","!doc":"<p>Sets the active error message to the given string. This replaces the entire error message contents with the given\nstring. Also see <a href=\"#!/api/Ext.form.Labelable-method-setActiveErrors\" rel=\"Ext.form.Labelable-method-setActiveErrors\" class=\"docClass\">setActiveErrors</a> which accepts an Array of messages and formats them according to the\n<a href=\"#!/api/Ext.form.Labelable-cfg-activeErrorsTpl\" rel=\"Ext.form.Labelable-cfg-activeErrorsTpl\" class=\"docClass\">activeErrorsTpl</a>. Note that this only updates the error message element's text and attributes, you'll\nhave to call doComponentLayout to actually update the field's layout to match. If the field extends <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">Ext.form.field.Base</a> you should call <a href=\"#!/api/Ext.form.field.Base-method-markInvalid\" rel=\"Ext.form.field.Base-method-markInvalid\" class=\"docClass\">markInvalid</a> instead.</p>\n"},"setActiveErrors":{"!type":"fn(errors: [string]) -> !this","!doc":"<p>Set the active error message to an Array of error messages. The messages are formatted into a single message\nstring using the <a href=\"#!/api/Ext.form.Labelable-cfg-activeErrorsTpl\" rel=\"Ext.form.Labelable-cfg-activeErrorsTpl\" class=\"docClass\">activeErrorsTpl</a>. Also see <a href=\"#!/api/Ext.form.Labelable-method-setActiveError\" rel=\"Ext.form.Labelable-method-setActiveError\" class=\"docClass\">setActiveError</a> which allows setting the entire error\ncontents with a single string. Note that this only updates the error message element's text and attributes,\nyou'll have to call doComponentLayout to actually update the field's layout to match. If the field extends\n<a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">Ext.form.field.Base</a> you should call <a href=\"#!/api/Ext.form.field.Base-method-markInvalid\" rel=\"Ext.form.field.Base-method-markInvalid\" class=\"docClass\">markInvalid</a> instead.</p>\n"},"setFieldDefaults":{"!type":"fn(defaults: ?) -> !this","!doc":"<p>Applies a set of default configuration values to this Labelable instance. For each of the properties in the given\nobject, check if this component hasOwnProperty that config; if not then it's inheriting a default value from its\nprototype and we should apply the default value.</p>\n"},"setFieldLabel":{"!type":"fn(label: string) -> !this","!doc":"<p>Set the label of this field.</p>\n"},"trimLabelSeparator":{"!type":"fn() -> string","!doc":"<p>Returns the trimmed label by slicing off the label separator character. Can be overridden.</p>\n"},"unsetActiveError":{"!type":"fn() -> !this","!doc":"<p>Clears the active error message(s). Note that this only clears the error message element's text and attributes,\nyou'll have to call doComponentLayout to actually update the field's layout to match. If the field extends <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">Ext.form.field.Base</a> you should call <a href=\"#!/api/Ext.form.field.Base-method-clearInvalid\" rel=\"Ext.form.field.Base-method-clearInvalid\" class=\"docClass\">clearInvalid</a> instead.</p>\n"},"errorchange":{"!type":"fn(this: +Ext.form.Labelable, error: string, eOpts: ?)","!doc":"<p>Fires when the active error message is changed via <a href=\"#!/api/Ext.form.Labelable-method-setActiveError\" rel=\"Ext.form.Labelable-method-setActiveError\" class=\"docClass\">setActiveError</a>.</p>\n"},"invalidCls":{"!type":"string","!doc":"<p>The CSS class to use when marking the component invalid.</p>\n"},"childEls":{"!type":"[?]"},"getFieldLabel":{"!type":"fn() -> string","!doc":"<p>Returns the label for the field. Defaults to simply returning the <a href=\"#!/api/Ext.form.Labelable-cfg-fieldLabel\" rel=\"Ext.form.Labelable-cfg-fieldLabel\" class=\"docClass\">fieldLabel</a> config. Can be overridden\nto provide a custom generated label.</p>\n"},"getSubTplMarkup":{"!type":"fn() -> string","!doc":"<p>Gets the markup to be inserted into the outer template's bodyEl. Defaults to empty string, should be implemented\nby classes including this mixin as needed.</p>\n"}},"!doc":"<p>A mixin which allows a component to be configured and decorated with a label and/or error message as is\ncommon for form fields. This is used by e.g. <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">Ext.form.field.Base</a> and <a href=\"#!/api/Ext.form.FieldContainer\" rel=\"Ext.form.FieldContainer\" class=\"docClass\">Ext.form.FieldContainer</a>\nto let them be managed by the Field layout.</p>\n\n<p>NOTE: This mixin is mainly for internal library use and most users should not need to use it directly. It\nis more likely you will want to use one of the component classes that import this mixin, such as\n<a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">Ext.form.field.Base</a> or <a href=\"#!/api/Ext.form.FieldContainer\" rel=\"Ext.form.FieldContainer\" class=\"docClass\">Ext.form.FieldContainer</a>.</p>\n\n<p>Use of this mixin does not make a component a field in the logical sense, meaning it does not provide any\nlogic or state related to values or validation; that is handled by the related <a href=\"#!/api/Ext.form.field.Field\" rel=\"Ext.form.field.Field\" class=\"docClass\">Ext.form.field.Field</a>\nmixin. These two mixins may be used separately (for example <a href=\"#!/api/Ext.form.FieldContainer\" rel=\"Ext.form.FieldContainer\" class=\"docClass\">Ext.form.FieldContainer</a> is Labelable but not a\nField), or in combination (for example <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">Ext.form.field.Base</a> implements both and has logic for connecting the\ntwo.)</p>\n\n<p>Component classes which use this mixin should use the Field layout\nor a derivation thereof to properly size and position the label and message according to the component config.\nThey must also call the <a href=\"#!/api/Ext.form.Labelable-method-initLabelable\" rel=\"Ext.form.Labelable-method-initLabelable\" class=\"docClass\">initLabelable</a> method during component initialization to ensure the mixin gets\nset up correctly.</p>\n"},"FieldSet":{"!doc":"<p>A container for grouping sets of fields, rendered as a HTML <code>fieldset</code> element. The <a href=\"#!/api/Ext.form.FieldSet-cfg-title\" rel=\"Ext.form.FieldSet-cfg-title\" class=\"docClass\">title</a>\nconfig will be rendered as the fieldset's <code>legend</code>.</p>\n\n<p>While FieldSets commonly contain simple groups of fields, they are general <a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Containers</a>\nand may therefore contain any type of components in their <a href=\"#!/api/Ext.form.FieldSet-cfg-items\" rel=\"Ext.form.FieldSet-cfg-items\" class=\"docClass\">items</a>, including other nested containers.\nThe default <a href=\"#!/api/Ext.form.FieldSet-cfg-layout\" rel=\"Ext.form.FieldSet-cfg-layout\" class=\"docClass\">layout</a> for the FieldSet's items is <code>'anchor'</code>, but it can be configured to use any other\nlayout type.</p>\n\n<p>FieldSets may also be collapsed if configured to do so; this can be done in two ways:</p>\n\n<ol>\n<li>Set the <a href=\"#!/api/Ext.form.FieldSet-cfg-collapsible\" rel=\"Ext.form.FieldSet-cfg-collapsible\" class=\"docClass\">collapsible</a> config to true; this will result in a collapse button being rendered next to\nthe <a href=\"#!/api/Ext.form.FieldSet-cfg-title\" rel=\"Ext.form.FieldSet-cfg-title\" class=\"docClass\">legend title</a>, or:</li>\n<li>Set the <a href=\"#!/api/Ext.form.FieldSet-cfg-checkboxToggle\" rel=\"Ext.form.FieldSet-cfg-checkboxToggle\" class=\"docClass\">checkboxToggle</a> config to true; this is similar to using <a href=\"#!/api/Ext.form.FieldSet-cfg-collapsible\" rel=\"Ext.form.FieldSet-cfg-collapsible\" class=\"docClass\">collapsible</a> but renders\na <a href=\"#!/api/Ext.form.field.Checkbox\" rel=\"Ext.form.field.Checkbox\" class=\"docClass\">checkbox</a> in place of the toggle button. The fieldset will be expanded when the\ncheckbox is checked and collapsed when it is unchecked. The checkbox will also be included in the\n<a href=\"#!/api/Ext.form.Basic-method-submit\" rel=\"Ext.form.Basic-method-submit\" class=\"docClass\">form submit parameters</a> using the <a href=\"#!/api/Ext.form.FieldSet-cfg-checkboxName\" rel=\"Ext.form.FieldSet-cfg-checkboxName\" class=\"docClass\">checkboxName</a> as its parameter name.</li>\n</ol>\n\n\n<h1>Example usage</h1>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>', {\n    title: 'Simple Form with FieldSets',\n    labelWidth: 75, // label settings here cascade unless overridden\n    url: 'save-form.php',\n    frame: true,\n    bodyStyle: 'padding:5px 5px 0',\n    width: 550,\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    layout: 'column', // arrange fieldsets side by side\n    items: [{\n        // Fieldset in Column 1 - collapsible via toggle button\n        xtype:'fieldset',\n        columnWidth: 0.5,\n        title: 'Fieldset 1',\n        collapsible: true,\n        defaultType: 'textfield',\n        defaults: {anchor: '100%'},\n        layout: 'anchor',\n        items :[{\n            fieldLabel: 'Field 1',\n            name: 'field1'\n        }, {\n            fieldLabel: 'Field 2',\n            name: 'field2'\n        }]\n    }, {\n        // Fieldset in Column 2 - collapsible via checkbox, collapsed by default, contains a panel\n        xtype:'fieldset',\n        title: 'Show Panel', // title or checkboxToggle creates fieldset header\n        columnWidth: 0.5,\n        checkboxToggle: true,\n        collapsed: true, // fieldset initially collapsed\n        layout:'anchor',\n        items :[{\n            xtype: 'panel',\n            anchor: '100%',\n            title: 'Panel inside a fieldset',\n            frame: true,\n            height: 52\n        }]\n    }]\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_form_FieldSet_cfg)","prototype":{"!proto":"Ext.container.Container.prototype","autoEl":{"!type":"string|?","!doc":"<p>A tag name or <a href=\"#!/api/Ext.DomHelper\" rel=\"Ext.DomHelper\" class=\"docClass\">DomHelper</a> spec used to create the <a href=\"#!/api/Ext.form.FieldSet-method-getEl\" rel=\"Ext.form.FieldSet-method-getEl\" class=\"docClass\">Element</a> which will\nencapsulate this Component.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong>'div'</strong>. The more complex Sencha classes use a more\ncomplex DOM structure specified by their own <a href=\"#!/api/Ext.form.FieldSet-cfg-renderTpl\" rel=\"Ext.form.FieldSet-cfg-renderTpl\" class=\"docClass\">renderTpl</a>s.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components encapsulated by\ndifferent DOM elements. Example usage:</p>\n\n<pre><code>{\n    xtype: 'component',\n    autoEl: {\n        tag: 'img',\n        src: 'http://www.example.com/example.jpg'\n    }\n}, {\n    xtype: 'component',\n    autoEl: {\n        tag: 'blockquote',\n        html: 'autoEl is cool!'\n    }\n}, {\n    xtype: 'container',\n    autoEl: 'ul',\n    cls: 'ux-unordered-list',\n    items: {\n        xtype: 'component',\n        autoEl: 'li',\n        html: 'First list item'\n    }\n}\n</code></pre>\n"},"baseCls":{"!type":"string","!doc":"<p>The base CSS class applied to the fieldset.</p>\n"},"checkboxName":{"!type":"string","!doc":"<p>The name to assign to the fieldset's checkbox if <a href=\"#!/api/Ext.form.FieldSet-cfg-checkboxToggle\" rel=\"Ext.form.FieldSet-cfg-checkboxToggle\" class=\"docClass\">checkboxToggle</a> = true\n(defaults to '[fieldset id]-checkbox').</p>\n"},"checkboxToggle":{"!type":"bool","!doc":"<p>Set to true to render a checkbox into the fieldset frame just in front of the legend to expand/collapse the\nfieldset when the checkbox is toggled.. This checkbox will be included in form submits using\nthe <a href=\"#!/api/Ext.form.FieldSet-cfg-checkboxName\" rel=\"Ext.form.FieldSet-cfg-checkboxName\" class=\"docClass\">checkboxName</a>.</p>\n"},"collapsed":{"!type":"bool","!doc":"<p>Set to true to render the fieldset as collapsed by default. If <a href=\"#!/api/Ext.form.FieldSet-cfg-checkboxToggle\" rel=\"Ext.form.FieldSet-cfg-checkboxToggle\" class=\"docClass\">checkboxToggle</a> is specified, the checkbox\nwill also be unchecked by default.</p>\n"},"collapsible":{"!type":"bool","!doc":"<p>Set to true to make the fieldset collapsible and have the expand/collapse toggle button automatically rendered\ninto the legend element, false to keep the fieldset statically sized with no collapse button.\nAnother option is to configure <a href=\"#!/api/Ext.form.FieldSet-cfg-checkboxToggle\" rel=\"Ext.form.FieldSet-cfg-checkboxToggle\" class=\"docClass\">checkboxToggle</a>. Use the <a href=\"#!/api/Ext.form.FieldSet-cfg-collapsed\" rel=\"Ext.form.FieldSet-cfg-collapsed\" class=\"docClass\">collapsed</a> config to collapse the\nfieldset by default.</p>\n"},"componentLayout":{"!type":"string|?","!doc":"<p>The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout\nmanager which sizes a Component's internal structure in response to the Component being sized.</p>\n\n<p>Generally, developers will not use this configuration as all provided Components which need their internal\nelements sizing (Such as <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">input fields</a>) come with their own componentLayout managers.</p>\n\n<p>The <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used on instances of the base <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\nclass which simply sizes the Component's encapsulating element to the height and width specified in the\n<a href=\"#!/api/Ext.form.FieldSet-method-setSize\" rel=\"Ext.form.FieldSet-method-setSize\" class=\"docClass\">setSize</a> method.</p>\n"},"layout":{"!type":"+Ext.enums.Layout|?","!doc":"<p>The <a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">Ext.container.Container.layout</a> for the fieldset's immediate child items.</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.form.FieldSet-method-getEl\" rel=\"Ext.form.FieldSet-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.form.FieldSet-method-getEl\" rel=\"Ext.form.FieldSet-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.form.FieldSet-cfg-renderSelectors\" rel=\"Ext.form.FieldSet-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.form.FieldSet-cfg-childEls\" rel=\"Ext.form.FieldSet-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"},"stateEvents":{"!type":"[string]","!doc":"<p>An array of events that, when fired, should trigger this object to\nsave its state. Defaults to none. <code>stateEvents</code> may be any type\nof event supported by this object, including browser or custom events\n(e.g., <tt>['click', 'customerchange']</tt>).</p>\n\n\n<p>See <code><a href=\"#!/api/Ext.form.FieldSet-cfg-stateful\" rel=\"Ext.form.FieldSet-cfg-stateful\" class=\"docClass\">stateful</a></code> for an explanation of saving and\nrestoring object state.</p>\n\n"},"title":{"!type":"string","!doc":"<p>A title to be displayed in the fieldset's legend. May contain HTML markup.</p>\n"},"toggleOnTitleClick":{"!type":"bool","!doc":"<p>Set to true will add a listener to the titleCmp property for the click event which will execute the\n<a href=\"#!/api/Ext.form.FieldSet-method-toggle\" rel=\"Ext.form.FieldSet-method-toggle\" class=\"docClass\">toggle</a> method. This option is only used when the <a href=\"#!/api/Ext.form.FieldSet-cfg-collapsible\" rel=\"Ext.form.FieldSet-cfg-collapsible\" class=\"docClass\">collapsible</a> property is set to true.</p>\n"},"checkboxCmp":{"!type":"+Ext.form.field.Checkbox","!doc":"<p>Refers to the <a href=\"#!/api/Ext.form.field.Checkbox\" rel=\"Ext.form.field.Checkbox\" class=\"docClass\">Ext.form.field.Checkbox</a> component that is added next to the title in the legend. Only\npopulated if the fieldset is configured with <a href=\"#!/api/Ext.form.FieldSet-cfg-checkboxToggle\" rel=\"Ext.form.FieldSet-cfg-checkboxToggle\" class=\"docClass\">checkboxToggle</a>:true.</p>\n"},"childEls":{"!type":"[?]"},"legend":{"!type":"+Ext.Component","!doc":"<p>The component for the fieldset's legend. Will only be defined if the configuration requires a legend to be\ncreated, by setting the <a href=\"#!/api/Ext.form.FieldSet-cfg-title\" rel=\"Ext.form.FieldSet-cfg-title\" class=\"docClass\">title</a> or <a href=\"#!/api/Ext.form.FieldSet-cfg-checkboxToggle\" rel=\"Ext.form.FieldSet-cfg-checkboxToggle\" class=\"docClass\">checkboxToggle</a> options.</p>\n"},"maskOnDisable":{"!type":"bool","!doc":"<p>This is an internal flag that you use when creating custom components. By default this is set to <code>true</code> which means\nthat every component gets a mask when it's disabled. Components like FieldContainer, FieldSet, Field, Button, Tab\noverride this property to <code>false</code> since they want to implement custom disable logic.</p>\n"},"toggleCmp":{"!type":"+Ext.panel.Tool","!doc":"<p>Refers to the <a href=\"#!/api/Ext.panel.Tool\" rel=\"Ext.panel.Tool\" class=\"docClass\">Ext.panel.Tool</a> component that is added as the collapse/expand button next to the title in\nthe legend. Only populated if the fieldset is configured with <a href=\"#!/api/Ext.form.FieldSet-cfg-collapsible\" rel=\"Ext.form.FieldSet-cfg-collapsible\" class=\"docClass\">collapsible</a>:true.</p>\n"},"addTitleClasses":{"!type":"fn() -> !this"},"afterCollapse":{"!type":"fn() -> !this"},"afterExpand":{"!type":"fn() -> !this"},"applyTargetCls":{"!type":"fn(targetCls: ?) -> !this","!doc":"<p>The targetCls is a CSS class that the layout needs added to the targetEl. The targetEl is where the container's\nchildren are rendered and is usually just the main el. Some containers (e.g. panels) use a body instead.</p>\n\n<p>In general, if a class overrides getTargetEl it will also need to override this method. This is necessary to\navoid a post-render step to add the targetCls.</p>\n"},"beforeDestroy":{"!type":"fn() -> !this"},"collapse":{"!type":"fn(f: +Ext.form.FieldSet, eOpts: ?)","!doc":"<p>Fires after this FieldSet has collapsed.</p>\n"},"collapsedHorizontal":{"!type":"fn() -> !this"},"collapsedVertical":{"!type":"fn() -> !this"},"createCheckboxCmp":{"!type":"fn() -> +Ext.Component","!doc":"<p>Creates the checkbox component. This is only called internally, but could be overridden in subclasses to\ncustomize the checkbox's configuration or even return an entirely different component type.</p>\n"},"createLegendCt":{"!type":"fn() -> !this"},"createTitleCmp":{"!type":"fn() -> +Ext.Component","!doc":"<p>Creates the legend title component. This is only called internally, but could be overridden in subclasses to\ncustomize the title component. If <a href=\"#!/api/Ext.form.FieldSet-cfg-toggleOnTitleClick\" rel=\"Ext.form.FieldSet-cfg-toggleOnTitleClick\" class=\"docClass\">toggleOnTitleClick</a> is set to true, a listener for the click event\nwill toggle the collapsed state of the FieldSet.</p>\n"},"createToggleCmp":{"!type":"fn() -> +Ext.Component","!doc":"<p>Creates the toggle button component. This is only called internally, but could be overridden in subclasses to\ncustomize the toggle component.</p>\n"},"doRenderLegend":{"!type":"fn(out: ?, renderData: ?) -> !this"},"expand":{"!type":"fn(f: +Ext.form.FieldSet, eOpts: ?)","!doc":"<p>Fires after this FieldSet has expanded.</p>\n"},"finishRender":{"!type":"fn(containerIdx: number) -> !this","!doc":"<p>This method visits the rendered component tree in a \"top-down\" order. That is, this\ncode runs on a parent component before running on a child. This method calls the\n<a href=\"#!/api/Ext.form.FieldSet-method-onRender\" rel=\"Ext.form.FieldSet-method-onRender\" class=\"docClass\">onRender</a> method of each component.</p>\n"},"getCollapsed":{"!type":"fn() -> !this"},"getCollapsedDockedItems":{"!type":"fn() -> !this"},"getDefaultContentTarget":{"!type":"fn() -> !this"},"getProtoBody":{"!type":"fn() -> !this"},"getRefItems":{"!type":"fn(deep: ?) -> !this","!doc":"<p>Used by <a href=\"#!/api/Ext.ComponentQuery\" rel=\"Ext.ComponentQuery\" class=\"docClass\">ComponentQuery</a>, <a href=\"#!/api/Ext.form.FieldSet-method-child\" rel=\"Ext.form.FieldSet-method-child\" class=\"docClass\">child</a> and <a href=\"#!/api/Ext.form.FieldSet-method-down\" rel=\"Ext.form.FieldSet-method-down\" class=\"docClass\">down</a> to retrieve all of the items\nwhich can potentially be considered a child of this Container.</p>\n\n<p>This may be overriden by Components which have ownership of Components\nthat are not contained in the <a href=\"#!/api/Ext.form.FieldSet-property-items\" rel=\"Ext.form.FieldSet-property-items\" class=\"docClass\">items</a> collection.</p>\n\n<p>NOTE: IMPORTANT note for maintainers:\nItems are returned in tree traversal order. Each item is appended to the result array\nfollowed by the results of that child's getRefItems call.\nFloating child items are appended after internal child items.</p>\n"},"getState":{"!type":"fn() -> ?","!doc":"<p>The supplied default state gathering method for the AbstractComponent class.</p>\n\n<p>This method returns dimension settings such as <code>flex</code>, <code>anchor</code>, <code>width</code> and <code>height</code> along with <code>collapsed</code>\nstate.</p>\n\n<p>Subclasses which implement more complex state should call the superclass's implementation, and apply their state\nto the result if this basic state is to be saved.</p>\n\n<p>Note that Component state will only be saved if the Component has a <a href=\"#!/api/Ext.form.FieldSet-cfg-stateId\" rel=\"Ext.form.FieldSet-cfg-stateId\" class=\"docClass\">stateId</a> and there as a StateProvider\nconfigured for the document.</p>\n"},"getTargetEl":{"!type":"fn() -> !this","!doc":"<p>This is used to determine where to insert the 'html', 'contentEl' and 'items' in this component.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>The initComponent template method is an important initialization step for a Component. It is intended to be\nimplemented by each subclass of <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> to provide any needed constructor logic. The\ninitComponent method of the class being created is called first, with each initComponent method\nup the hierarchy to <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> being called thereafter. This makes it easy to implement and,\nif needed, override the constructor logic of the Component at any step in the hierarchy.</p>\n\n<p>The initComponent method <strong>must</strong> contain a call to <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a> in order\nto ensure that the parent class' initComponent method is also called.</p>\n\n<p>All config options passed to the constructor are applied to <code>this</code> before initComponent is called,\nso you can simply access them with <code>this.someOption</code>.</p>\n\n<p>The following example demonstrates using a dynamic string for the text of a button at the time of\ninstantiation of the class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('DynamicButtonText', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n\n    initComponent: function() {\n        this.text = new Date();\n        this.renderTo = <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>();\n        this.callParent();\n    }\n});\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function() {\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('DynamicButtonText');\n});\n</code></pre>\n"},"initPadding":{"!type":"fn(targetEl: ?) -> !this","!doc":"<p>Initializes padding by applying it to the target element, or if the layout manages\npadding ensures that the padding on the target element is \"0\".</p>\n"},"initRenderData":{"!type":"fn() -> ?","!doc":"<p>Initialized the renderData to be used when rendering the renderTpl.</p>\n"},"onCheckChange":{"!type":"fn(cmp: ?, checked: ?) -> !this","!doc":"<p>Handle changes in the checkbox checked state.</p>\n"},"setExpanded":{"!type":"fn(expanded: ?) -> !this","!doc":"<p>Collapse or expand the fieldset.</p>\n"},"setTitle":{"!type":"fn(title: string) -> +Ext.form.FieldSet","!doc":"<p>Sets the title of this fieldset.</p>\n"},"setupRenderTpl":{"!type":"fn(renderTpl: ?) -> !this"},"toggle":{"!type":"fn() -> !this","!doc":"<p>Toggle the fieldset's collapsed state to the opposite of what it is currently.</p>\n"},"beforecollapse":{"!type":"fn(f: +Ext.form.FieldSet, eOpts: ?)","!doc":"<p>Fires before this FieldSet is collapsed. Return false to prevent the collapse.</p>\n"},"beforeexpand":{"!type":"fn(f: +Ext.form.FieldSet, eOpts: ?)","!doc":"<p>Fires before this FieldSet is expanded. Return false to prevent the expand.</p>\n"}}},"Label":{"!doc":"<p>Produces a standalone <code>&lt;label /&gt;</code> element which can be inserted into a form and be associated with a field\nin that form using the <a href=\"#!/api/Ext.form.Label-cfg-forId\" rel=\"Ext.form.Label-cfg-forId\" class=\"docClass\">forId</a> property.</p>\n\n<p><strong>NOTE:</strong> in most cases it will be more appropriate to use the <a href=\"#!/api/Ext.form.Labelable-cfg-fieldLabel\" rel=\"Ext.form.Labelable-cfg-fieldLabel\" class=\"docClass\">fieldLabel</a>\nand associated config properties (<a href=\"#!/api/Ext.form.Labelable-cfg-labelAlign\" rel=\"Ext.form.Labelable-cfg-labelAlign\" class=\"docClass\">Ext.form.Labelable.labelAlign</a>, <a href=\"#!/api/Ext.form.Labelable-cfg-labelWidth\" rel=\"Ext.form.Labelable-cfg-labelWidth\" class=\"docClass\">Ext.form.Labelable.labelWidth</a>,\netc.) in field components themselves, as that allows labels to be uniformly sized throughout the form.\n<a href=\"#!/api/Ext.form.Label\" rel=\"Ext.form.Label\" class=\"docClass\">Ext.form.Label</a> should only be used when your layout can not be achieved with the standard\n<a href=\"#!/api/Ext.form.Labelable\" rel=\"Ext.form.Labelable\" class=\"docClass\">field layout</a>.</p>\n\n<p>You will likely be associating the label with a field component that extends <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">Ext.form.field.Base</a>, so\nyou should make sure the <a href=\"#!/api/Ext.form.Label-cfg-forId\" rel=\"Ext.form.Label-cfg-forId\" class=\"docClass\">forId</a> is set to the same value as the <a href=\"#!/api/Ext.form.field.Base-cfg-inputId\" rel=\"Ext.form.field.Base-cfg-inputId\" class=\"docClass\">inputId</a>\nof that field.</p>\n\n<p>The label's text can be set using either the <a href=\"#!/api/Ext.form.Label-cfg-text\" rel=\"Ext.form.Label-cfg-text\" class=\"docClass\">text</a> or <a href=\"#!/api/Ext.form.Label-cfg-html\" rel=\"Ext.form.Label-cfg-html\" class=\"docClass\">html</a> configuration properties; the\ndifference between the two is that the former will automatically escape HTML characters when rendering, while\nthe latter will not.</p>\n\n<h1>Example</h1>\n\n<p>This example creates a Label after its associated Text field, an arrangement that cannot currently\nbe achieved using the standard Field layout's labelAlign.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>', {\n    title: 'Field with Label',\n    width: 400,\n    bodyPadding: 10,\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    layout: {\n        type: 'hbox',\n        align: 'middle'\n    },\n    items: [{\n        xtype: 'textfield',\n        hideLabel: true,\n        flex: 1\n    }, {\n        xtype: 'label',\n        forId: 'myFieldId',\n        text: 'My Awesome Field',\n        margin: '0 0 0 10'\n    }]\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_form_Label_cfg)","prototype":{"!proto":"Ext.Component.prototype","autoEl":{"!type":"string|?","!doc":"<p>A tag name or <a href=\"#!/api/Ext.DomHelper\" rel=\"Ext.DomHelper\" class=\"docClass\">DomHelper</a> spec used to create the <a href=\"#!/api/Ext.form.Label-method-getEl\" rel=\"Ext.form.Label-method-getEl\" class=\"docClass\">Element</a> which will\nencapsulate this Component.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong>'div'</strong>. The more complex Sencha classes use a more\ncomplex DOM structure specified by their own <a href=\"#!/api/Ext.form.Label-cfg-renderTpl\" rel=\"Ext.form.Label-cfg-renderTpl\" class=\"docClass\">renderTpl</a>s.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components encapsulated by\ndifferent DOM elements. Example usage:</p>\n\n<pre><code>{\n    xtype: 'component',\n    autoEl: {\n        tag: 'img',\n        src: 'http://www.example.com/example.jpg'\n    }\n}, {\n    xtype: 'component',\n    autoEl: {\n        tag: 'blockquote',\n        html: 'autoEl is cool!'\n    }\n}, {\n    xtype: 'container',\n    autoEl: 'ul',\n    cls: 'ux-unordered-list',\n    items: {\n        xtype: 'component',\n        autoEl: 'li',\n        html: 'First list item'\n    }\n}\n</code></pre>\n"},"forId":{"!type":"string","!doc":"<p>The id of the input element to which this label will be bound via the standard HTML 'for'\nattribute. If not specified, the attribute will not be added to the label. In most cases you will be\nassociating the label with a <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">Ext.form.field.Base</a> component, so you should make sure this matches\nthe <a href=\"#!/api/Ext.form.field.Base-cfg-inputId\" rel=\"Ext.form.field.Base-cfg-inputId\" class=\"docClass\">inputId</a> of that field.</p>\n"},"html":{"!type":"string","!doc":"<p>An HTML fragment that will be used as the label's innerHTML.\nNote that if <a href=\"#!/api/Ext.form.Label-cfg-text\" rel=\"Ext.form.Label-cfg-text\" class=\"docClass\">text</a> is specified it will take precedence and this value will be ignored.</p>\n"},"text":{"!type":"string","!doc":"<p>The plain text to display within the label. If you need to include HTML\ntags within the label's innerHTML, use the <a href=\"#!/api/Ext.form.Label-cfg-html\" rel=\"Ext.form.Label-cfg-html\" class=\"docClass\">html</a> config instead.</p>\n"},"getElConfig":{"!type":"fn() -> !this"},"setText":{"!type":"fn(text: string, encode?: bool) -> +Ext.form.Label","!doc":"<p>Updates the label's innerHTML with the specified string.</p>\n"}}},"Panel":{"!doc":"<p>FormPanel provides a standard container for forms. It is essentially a standard <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a> which\nautomatically creates a <a href=\"#!/api/Ext.form.Basic\" rel=\"Ext.form.Basic\" class=\"docClass\">BasicForm</a> for managing any <a href=\"#!/api/Ext.form.field.Field\" rel=\"Ext.form.field.Field\" class=\"docClass\">Ext.form.field.Field</a>\nobjects that are added as descendants of the panel. It also includes conveniences for configuring and\nworking with the BasicForm and the collection of Fields.</p>\n\n<h1>Layout</h1>\n\n<p>By default, FormPanel is configured with <code><a href=\"#!/api/Ext.layout.container.Anchor\" rel=\"Ext.layout.container.Anchor\" class=\"docClass\">layout:'anchor'</a></code> for\nthe layout of its immediate child items. This can be changed to any of the supported container layouts.\nThe layout of sub-containers is configured in <a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">the standard way</a>.</p>\n\n<h1>BasicForm</h1>\n\n<p>Although <strong>not listed</strong> as configuration options of FormPanel, the FormPanel class accepts all\nof the config options supported by the <a href=\"#!/api/Ext.form.Basic\" rel=\"Ext.form.Basic\" class=\"docClass\">Ext.form.Basic</a> class, and will pass them along to\nthe internal BasicForm when it is created.</p>\n\n<p>The following events fired by the BasicForm will be re-fired by the FormPanel and can therefore be\nlistened for on the FormPanel itself:</p>\n\n<ul>\n<li><a href=\"#!/api/Ext.form.Basic-event-beforeaction\" rel=\"Ext.form.Basic-event-beforeaction\" class=\"docClass\">beforeaction</a></li>\n<li><a href=\"#!/api/Ext.form.Basic-event-actionfailed\" rel=\"Ext.form.Basic-event-actionfailed\" class=\"docClass\">actionfailed</a></li>\n<li><a href=\"#!/api/Ext.form.Basic-event-actioncomplete\" rel=\"Ext.form.Basic-event-actioncomplete\" class=\"docClass\">actioncomplete</a></li>\n<li><a href=\"#!/api/Ext.form.Basic-event-validitychange\" rel=\"Ext.form.Basic-event-validitychange\" class=\"docClass\">validitychange</a></li>\n<li><a href=\"#!/api/Ext.form.Basic-event-dirtychange\" rel=\"Ext.form.Basic-event-dirtychange\" class=\"docClass\">dirtychange</a></li>\n</ul>\n\n\n<h1>Field Defaults</h1>\n\n<p>The <a href=\"#!/api/Ext.form.Panel-cfg-fieldDefaults\" rel=\"Ext.form.Panel-cfg-fieldDefaults\" class=\"docClass\">fieldDefaults</a> config option conveniently allows centralized configuration of default values\nfor all fields added as descendants of the FormPanel. Any config option recognized by implementations\nof <a href=\"#!/api/Ext.form.Labelable\" rel=\"Ext.form.Labelable\" class=\"docClass\">Ext.form.Labelable</a> may be included in this object. See the <a href=\"#!/api/Ext.form.Panel-cfg-fieldDefaults\" rel=\"Ext.form.Panel-cfg-fieldDefaults\" class=\"docClass\">fieldDefaults</a> documentation\nfor details of how the defaults are applied.</p>\n\n<h1>Form Validation</h1>\n\n<p>With the default configuration, form fields are validated on-the-fly while the user edits their values.\nThis can be controlled on a per-field basis (or via the <a href=\"#!/api/Ext.form.Panel-cfg-fieldDefaults\" rel=\"Ext.form.Panel-cfg-fieldDefaults\" class=\"docClass\">fieldDefaults</a> config) with the field\nconfig properties <a href=\"#!/api/Ext.form.field.Field-cfg-validateOnChange\" rel=\"Ext.form.field.Field-cfg-validateOnChange\" class=\"docClass\">Ext.form.field.Field.validateOnChange</a> and <a href=\"#!/api/Ext.form.field.Base-cfg-checkChangeEvents\" rel=\"Ext.form.field.Base-cfg-checkChangeEvents\" class=\"docClass\">Ext.form.field.Base.checkChangeEvents</a>,\nand the FormPanel's config properties <a href=\"#!/api/Ext.form.Panel-cfg-pollForChanges\" rel=\"Ext.form.Panel-cfg-pollForChanges\" class=\"docClass\">pollForChanges</a> and <a href=\"#!/api/Ext.form.Panel-cfg-pollInterval\" rel=\"Ext.form.Panel-cfg-pollInterval\" class=\"docClass\">pollInterval</a>.</p>\n\n<p>Any component within the FormPanel can be configured with <code>formBind: true</code>. This will cause that\ncomponent to be automatically disabled when the form is invalid, and enabled when it is valid. This is most\ncommonly used for Button components to prevent submitting the form in an invalid state, but can be used on\nany component type.</p>\n\n<p>For more information on form validation see the following:</p>\n\n<ul>\n<li><a href=\"#!/api/Ext.form.field.Field-cfg-validateOnChange\" rel=\"Ext.form.field.Field-cfg-validateOnChange\" class=\"docClass\">Ext.form.field.Field.validateOnChange</a></li>\n<li><a href=\"#!/api/Ext.form.Panel-cfg-pollForChanges\" rel=\"Ext.form.Panel-cfg-pollForChanges\" class=\"docClass\">pollForChanges</a> and <a href=\"#!/api/Ext.form.Panel-cfg-pollInterval\" rel=\"Ext.form.Panel-cfg-pollInterval\" class=\"docClass\">pollInterval</a></li>\n<li><a href=\"#!/api/Ext.form.field.VTypes\" rel=\"Ext.form.field.VTypes\" class=\"docClass\">Ext.form.field.VTypes</a></li>\n<li><a href=\"#!/api/Ext.form.Basic-method-doAction\" rel=\"Ext.form.Basic-method-doAction\" class=\"docClass\">BasicForm.doAction clientValidation notes</a></li>\n</ul>\n\n\n<h1>Form Submission</h1>\n\n<p>By default, Ext Forms are submitted through Ajax, using <a href=\"#!/api/Ext.form.action.Action\" rel=\"Ext.form.action.Action\" class=\"docClass\">Ext.form.action.Action</a>. See the documentation for\n<a href=\"#!/api/Ext.form.Basic\" rel=\"Ext.form.Basic\" class=\"docClass\">Ext.form.Basic</a> for details.</p>\n\n<h1>Example usage</h1>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>', {\n    title: 'Simple Form',\n    bodyPadding: 5,\n    width: 350,\n\n    // The form will submit an AJAX request to this URL when submitted\n    url: 'save-form.php',\n\n    // Fields will be arranged vertically, stretched to full width\n    layout: 'anchor',\n    defaults: {\n        anchor: '100%'\n    },\n\n    // The fields\n    defaultType: 'textfield',\n    items: [{\n        fieldLabel: 'First Name',\n        name: 'first',\n        allowBlank: false\n    },{\n        fieldLabel: 'Last Name',\n        name: 'last',\n        allowBlank: false\n    }],\n\n    // Reset and Submit buttons\n    buttons: [{\n        text: 'Reset',\n        handler: function() {\n            this.up('form').getForm().reset();\n        }\n    }, {\n        text: 'Submit',\n        formBind: true, //only enabled once the form is valid\n        disabled: true,\n        handler: function() {\n            var form = this.up('form').getForm();\n            if (form.isValid()) {\n                form.submit({\n                    success: function(form, action) {\n                       <a href=\"#!/api/Ext.MessageBox-method-alert\" rel=\"Ext.MessageBox-method-alert\" class=\"docClass\">Ext.Msg.alert</a>('Success', action.result.msg);\n                    },\n                    failure: function(form, action) {\n                        <a href=\"#!/api/Ext.MessageBox-method-alert\" rel=\"Ext.MessageBox-method-alert\" class=\"docClass\">Ext.Msg.alert</a>('Failed', action.result.msg);\n                    }\n                });\n            }\n        }\n    }],\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_form_Panel_cfg)","prototype":{"!proto":"Ext.panel.Panel.prototype","layout":{"!type":"+Ext.enums.Layout|?","!doc":"<p>The <a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">Ext.container.Container.layout</a> for the form panel's immediate child items.</p>\n"},"pollForChanges":{"!type":"bool","!doc":"<p>If set to <code>true</code>, sets up an interval task (using the <a href=\"#!/api/Ext.form.Panel-cfg-pollInterval\" rel=\"Ext.form.Panel-cfg-pollInterval\" class=\"docClass\">pollInterval</a>) in which the\npanel's fields are repeatedly checked for changes in their values. This is in addition to the normal detection\neach field does on its own input element, and is not needed in most cases. It does, however, provide a\nmeans to absolutely guarantee detection of all changes including some edge cases in some browsers which\ndo not fire native events. Defaults to <code>false</code>.</p>\n"},"pollInterval":{"!type":"number","!doc":"<p>Interval in milliseconds at which the form's fields are checked for value changes. Only used if\nthe <a href=\"#!/api/Ext.form.Panel-cfg-pollForChanges\" rel=\"Ext.form.Panel-cfg-pollForChanges\" class=\"docClass\">pollForChanges</a> option is set to <code>true</code>. Defaults to 500 milliseconds.</p>\n"},"ariaRole":{"!type":"string"},"basicFormConfigs":{"!type":"[?]"},"afterFirstLayout":{"!type":"fn() -> !this","!doc":"<p>Initialize the BasicForm after all layouts have been completed.</p>\n"},"beforeDestroy":{"!type":"fn() -> !this"},"checkChange":{"!type":"fn() -> !this","!doc":"<p>Forces each field within the form panel to\n<a href=\"#!/api/Ext.form.field.Field-method-checkChange\" rel=\"Ext.form.field.Field-method-checkChange\" class=\"docClass\">check if its value has changed</a>.</p>\n"},"createForm":{"!type":"fn() -> !this"},"getForm":{"!type":"fn() -> +Ext.form.Basic","!doc":"<p>Provides access to the <a href=\"#!/api/Ext.form.Basic\" rel=\"Ext.form.Basic\" class=\"docClass\">Form</a> which this Panel contains.</p>\n"},"getRecord":{"!type":"fn() -> +Ext.data.Model","!doc":"<p>Returns the currently loaded <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a> instance if one was loaded via <a href=\"#!/api/Ext.form.Panel-method-loadRecord\" rel=\"Ext.form.Panel-method-loadRecord\" class=\"docClass\">loadRecord</a>.</p>\n"},"getValues":{"!type":"fn(asString?: bool, dirtyOnly?: bool, includeEmptyText?: bool, useDataValues?: bool) -> string|?","!doc":"<p>Convenience function for fetching the current value of each field in the form. This is the same as calling\n<a href=\"#!/api/Ext.form.Basic-method-getValues\" rel=\"Ext.form.Basic-method-getValues\" class=\"docClass\">this.getForm().getValues()</a>.</p>\n"},"hasInvalidField":{"!type":"fn() -> !this","!doc":"<p>Convenience function to check if the form has any invalid fields. This is the same as calling\n<a href=\"#!/api/Ext.form.Basic-method-hasInvalidField\" rel=\"Ext.form.Basic-method-hasInvalidField\" class=\"docClass\">this.getForm().hasInvalidField()</a>.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>The initComponent template method is an important initialization step for a Component. It is intended to be\nimplemented by each subclass of <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> to provide any needed constructor logic. The\ninitComponent method of the class being created is called first, with each initComponent method\nup the hierarchy to <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> being called thereafter. This makes it easy to implement and,\nif needed, override the constructor logic of the Component at any step in the hierarchy.</p>\n\n<p>The initComponent method <strong>must</strong> contain a call to <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a> in order\nto ensure that the parent class' initComponent method is also called.</p>\n\n<p>All config options passed to the constructor are applied to <code>this</code> before initComponent is called,\nso you can simply access them with <code>this.someOption</code>.</p>\n\n<p>The following example demonstrates using a dynamic string for the text of a button at the time of\ninstantiation of the class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('DynamicButtonText', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n\n    initComponent: function() {\n        this.text = new Date();\n        this.renderTo = <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>();\n        this.callParent();\n    }\n});\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function() {\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('DynamicButtonText');\n});\n</code></pre>\n"},"initItems":{"!type":"fn() -> !this"},"isDirty":{"!type":"fn() -> bool","!doc":"<p>Convenience function to check if the form has any dirty fields. This is the same as calling\n<a href=\"#!/api/Ext.form.Basic-method-isDirty\" rel=\"Ext.form.Basic-method-isDirty\" class=\"docClass\">this.getForm().isDirty()</a>.</p>\n"},"isValid":{"!type":"fn() -> bool","!doc":"<p>Convenience function to check if the form has all valid fields. This is the same as calling\n<a href=\"#!/api/Ext.form.Basic-method-isValid\" rel=\"Ext.form.Basic-method-isValid\" class=\"docClass\">this.getForm().isValid()</a>.</p>\n"},"load":{"!type":"fn(options: ?) -> !this","!doc":"<p>This is a proxy for the underlying BasicForm's <a href=\"#!/api/Ext.form.Basic-method-load\" rel=\"Ext.form.Basic-method-load\" class=\"docClass\">Ext.form.Basic.load</a> call.</p>\n"},"loadRecord":{"!type":"fn(record: +Ext.data.Model) -> +Ext.form.Basic","!doc":"<p>Loads an <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a> into this form (internally just calls <a href=\"#!/api/Ext.form.Basic-method-loadRecord\" rel=\"Ext.form.Basic-method-loadRecord\" class=\"docClass\">Ext.form.Basic.loadRecord</a>)\nSee also <a href=\"#!/api/Ext.form.Basic-cfg-trackResetOnLoad\" rel=\"Ext.form.Basic-cfg-trackResetOnLoad\" class=\"docClass\">trackResetOnLoad</a>.</p>\n"},"startPolling":{"!type":"fn(interval: number) -> !this","!doc":"<p>Start an interval task to continuously poll all the fields in the form for changes in their\nvalues. This is normally started automatically by setting the <a href=\"#!/api/Ext.form.Panel-cfg-pollForChanges\" rel=\"Ext.form.Panel-cfg-pollForChanges\" class=\"docClass\">pollForChanges</a> config.</p>\n"},"stopPolling":{"!type":"fn() -> !this","!doc":"<p>Stop a running interval task that was started by <a href=\"#!/api/Ext.form.Panel-method-startPolling\" rel=\"Ext.form.Panel-method-startPolling\" class=\"docClass\">startPolling</a>.</p>\n"},"submit":{"!type":"fn(options: ?) -> !this","!doc":"<p>This is a proxy for the underlying BasicForm's <a href=\"#!/api/Ext.form.Basic-method-submit\" rel=\"Ext.form.Basic-method-submit\" class=\"docClass\">Ext.form.Basic.submit</a> call.</p>\n"},"updateRecord":{"!type":"fn(record?: +Ext.data.Model) -> +Ext.form.Basic","!doc":"<p>Persists the values in this form into the passed <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a> object in a beginEdit/endEdit block.\nIf the record is not specified, it will attempt to update (if it exists) the record provided to <a href=\"#!/api/Ext.form.Panel-method-loadRecord\" rel=\"Ext.form.Panel-method-loadRecord\" class=\"docClass\">loadRecord</a>.</p>\n"},"actioncomplete":{"!type":"fn(this: +Ext.form.Basic, action: +Ext.form.action.Action, eOpts: ?)","!doc":"<p>Fires when an action is completed.</p>\n"},"actionfailed":{"!type":"fn(this: +Ext.form.Basic, action: +Ext.form.action.Action, eOpts: ?)","!doc":"<p>Fires when an action fails.</p>\n"},"beforeaction":{"!type":"fn(this: +Ext.form.Basic, action: +Ext.form.action.Action, eOpts: ?)","!doc":"<p>Fires before any action is performed. Return false to cancel the action.</p>\n"},"dirtychange":{"!type":"fn(this: +Ext.form.Basic, dirty: bool, eOpts: ?)","!doc":"<p>Fires when the dirty state of the entire form changes.</p>\n"},"validitychange":{"!type":"fn(this: +Ext.form.Basic, valid: bool, eOpts: ?)","!doc":"<p>Fires when the validity of the entire form changes.</p>\n"}}},"RadioGroup":{"!doc":"<p>A <a href=\"#!/api/Ext.form.FieldContainer\" rel=\"Ext.form.FieldContainer\" class=\"docClass\">field container</a> which has a specialized layout for arranging\n<a href=\"#!/api/Ext.form.field.Radio\" rel=\"Ext.form.field.Radio\" class=\"docClass\">Ext.form.field.Radio</a> controls into columns, and provides convenience <a href=\"#!/api/Ext.form.field.Field\" rel=\"Ext.form.field.Field\" class=\"docClass\">Ext.form.field.Field</a>\nmethods for <a href=\"#!/api/Ext.form.RadioGroup-method-getValue\" rel=\"Ext.form.RadioGroup-method-getValue\" class=\"docClass\">getting</a>, <a href=\"#!/api/Ext.form.RadioGroup-method-setValue\" rel=\"Ext.form.RadioGroup-method-setValue\" class=\"docClass\">setting</a>, and <a href=\"#!/api/Ext.form.RadioGroup-method-validate\" rel=\"Ext.form.RadioGroup-method-validate\" class=\"docClass\">validating</a> the\ngroup of radio buttons as a whole.</p>\n\n<h1>Validation</h1>\n\n<p>Individual radio buttons themselves have no default validation behavior, but\nsometimes you want to require a user to select one of a group of radios. RadioGroup\nallows this by setting the config <code><a href=\"#!/api/Ext.form.RadioGroup-cfg-allowBlank\" rel=\"Ext.form.RadioGroup-cfg-allowBlank\" class=\"docClass\">allowBlank</a>:false</code>; when the user does not check at\none of the radio buttons, the entire group will be highlighted as invalid and the\n<a href=\"#!/api/Ext.form.RadioGroup-cfg-blankText\" rel=\"Ext.form.RadioGroup-cfg-blankText\" class=\"docClass\">error message</a> will be displayed according to the <a href=\"#!/api/Ext.form.RadioGroup-cfg-msgTarget\" rel=\"Ext.form.RadioGroup-cfg-msgTarget\" class=\"docClass\">msgTarget</a> config.</p>\n\n<h1>Layout</h1>\n\n<p>The default layout for RadioGroup makes it easy to arrange the radio buttons into\ncolumns; see the <a href=\"#!/api/Ext.form.RadioGroup-cfg-columns\" rel=\"Ext.form.RadioGroup-cfg-columns\" class=\"docClass\">columns</a> and <a href=\"#!/api/Ext.form.RadioGroup-cfg-vertical\" rel=\"Ext.form.RadioGroup-cfg-vertical\" class=\"docClass\">vertical</a> config documentation for details. You may also\nuse a completely different layout by setting the <a href=\"#!/api/Ext.form.RadioGroup-cfg-layout\" rel=\"Ext.form.RadioGroup-cfg-layout\" class=\"docClass\">layout</a> to one of the other supported layout\ntypes; for instance you may wish to use a custom arrangement of hbox and vbox containers. In that case\nthe Radio components at any depth will still be managed by the RadioGroup's validation.</p>\n\n<h1>Example usage</h1>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>', {\n    title: 'RadioGroup Example',\n    width: 300,\n    height: 125,\n    bodyPadding: 10,\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    items:[{\n        xtype: 'radiogroup',\n        fieldLabel: 'Two Columns',\n        // Arrange radio buttons into two columns, distributed vertically\n        columns: 2,\n        vertical: true,\n        items: [\n            { boxLabel: 'Item 1', name: 'rb', inputValue: '1' },\n            { boxLabel: 'Item 2', name: 'rb', inputValue: '2', checked: true},\n            { boxLabel: 'Item 3', name: 'rb', inputValue: '3' },\n            { boxLabel: 'Item 4', name: 'rb', inputValue: '4' },\n            { boxLabel: 'Item 5', name: 'rb', inputValue: '5' },\n            { boxLabel: 'Item 6', name: 'rb', inputValue: '6' }\n        ]\n    }]\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_form_RadioGroup_cfg)","prototype":{"!proto":"Ext.form.CheckboxGroup.prototype","allowBlank":{"!type":"bool","!doc":"<p>True to allow every item in the group to be blank.\nIf allowBlank = false and no items are selected at validation time, <a href=\"#!/api/Ext.form.RadioGroup-cfg-blankText\" rel=\"Ext.form.RadioGroup-cfg-blankText\" class=\"docClass\">blankText</a> will\nbe used as the error text.</p>\n"},"blankText":{"!type":"string","!doc":"<p>Error text to display if the <a href=\"#!/api/Ext.form.RadioGroup-cfg-allowBlank\" rel=\"Ext.form.RadioGroup-cfg-allowBlank\" class=\"docClass\">allowBlank</a> validation fails</p>\n"},"defaultType":{"!type":"string","!doc":"<p>private</p>\n"},"items":{"!type":"[+Ext.form.field.Radio]|[?]","!doc":"<p>An Array of <a href=\"#!/api/Ext.form.field.Radio\" rel=\"Ext.form.field.Radio\" class=\"docClass\">Radio</a>s or Radio config objects to arrange in the group.</p>\n"},"groupCls":{"!type":"string","!doc":"<p>private</p>\n"},"checkChange":{"!type":"fn() -> !this","!doc":"<p>Checks whether the value of the field has changed since the last time it was checked.\nIf the value has changed, it:</p>\n\n<ol>\n<li>Fires the <a href=\"#!/api/Ext.form.RadioGroup-event-change\" rel=\"Ext.form.RadioGroup-event-change\" class=\"docClass\">change event</a>,</li>\n<li>Performs validation if the <a href=\"#!/api/Ext.form.RadioGroup-cfg-validateOnChange\" rel=\"Ext.form.RadioGroup-cfg-validateOnChange\" class=\"docClass\">validateOnChange</a> config is enabled, firing the\n<a href=\"#!/api/Ext.form.RadioGroup-event-validitychange\" rel=\"Ext.form.RadioGroup-event-validitychange\" class=\"docClass\">validitychange event</a> if the validity has changed, and</li>\n<li>Checks the <a href=\"#!/api/Ext.form.RadioGroup-method-isDirty\" rel=\"Ext.form.RadioGroup-method-isDirty\" class=\"docClass\">dirty state</a> of the field and fires the <a href=\"#!/api/Ext.form.RadioGroup-event-dirtychange\" rel=\"Ext.form.RadioGroup-event-dirtychange\" class=\"docClass\">dirtychange event</a>\nif it has changed.</li>\n</ol>\n\n"},"getBoxes":{"!type":"fn(query?: string) -> !this","!doc":"<p>Returns all checkbox components within the container</p>\n"},"setValue":{"!type":"fn(value: ?) -> +Ext.form.CheckboxGroup","!doc":"<p>Sets the value of the radio group. The radio with corresponding name and value will be set.\nThis method is simpler than <a href=\"#!/api/Ext.form.CheckboxGroup-method-setValue\" rel=\"Ext.form.CheckboxGroup-method-setValue\" class=\"docClass\">Ext.form.CheckboxGroup.setValue</a> because only 1 value is allowed\nfor each name.</p>\n"}}},"RadioManager":{"!doc":"<p>Private utility class for managing all <a href=\"#!/api/Ext.form.field.Radio\" rel=\"Ext.form.field.Radio\" class=\"docClass\">Ext.form.field.Radio</a> fields grouped by name.</p>\n","!type":"fn(config: Ext_form_RadioManager_cfg)","prototype":{"!proto":"Ext.util.MixedCollection.prototype"},"getByName":{"!type":"fn(name: ?, formId: ?) -> !this"},"getChecked":{"!type":"fn(name: ?, formId: ?) -> !this"},"getWithValue":{"!type":"fn(name: ?, value: ?, formId: ?) -> !this"}},"action":{"Action":{"!doc":"<p>The subclasses of this class provide actions to perform upon <a href=\"#!/api/Ext.form.Basic\" rel=\"Ext.form.Basic\" class=\"docClass\">Form</a>s.</p>\n\n<p>Instances of this class are only created by a <a href=\"#!/api/Ext.form.Basic\" rel=\"Ext.form.Basic\" class=\"docClass\">Form</a> when the Form needs to perform an action\nsuch as submit or load. The Configuration options listed for this class are set through the Form's action methods:\n<a href=\"#!/api/Ext.form.Basic-method-submit\" rel=\"Ext.form.Basic-method-submit\" class=\"docClass\">submit</a>, <a href=\"#!/api/Ext.form.Basic-method-load\" rel=\"Ext.form.Basic-method-load\" class=\"docClass\">load</a> and <a href=\"#!/api/Ext.form.Basic-method-doAction\" rel=\"Ext.form.Basic-method-doAction\" class=\"docClass\">doAction</a></p>\n\n<p>The instance of Action which performed the action is passed to the success and failure callbacks of the Form's action\nmethods (<a href=\"#!/api/Ext.form.Basic-method-submit\" rel=\"Ext.form.Basic-method-submit\" class=\"docClass\">submit</a>, <a href=\"#!/api/Ext.form.Basic-method-load\" rel=\"Ext.form.Basic-method-load\" class=\"docClass\">load</a> and\n<a href=\"#!/api/Ext.form.Basic-method-doAction\" rel=\"Ext.form.Basic-method-doAction\" class=\"docClass\">doAction</a>), and to the <a href=\"#!/api/Ext.form.Basic-event-actioncomplete\" rel=\"Ext.form.Basic-event-actioncomplete\" class=\"docClass\">actioncomplete</a> and\n<a href=\"#!/api/Ext.form.Basic-event-actionfailed\" rel=\"Ext.form.Basic-event-actionfailed\" class=\"docClass\">actionfailed</a> event handlers.</p>\n","!type":"fn(config?: Ext_form_action_Action_cfg)","prototype":{"!proto":"Ext.Base.prototype","failure":{"!type":"fn()","!doc":"<p>The function to call when a failure packet was received, or when an error ocurred in the Ajax communication.</p>\n"},"form":{"!type":"+Ext.form.Basic","!doc":"<p>The <a href=\"#!/api/Ext.form.Basic\" rel=\"Ext.form.Basic\" class=\"docClass\">BasicForm</a> instance that is invoking this Action. Required.</p>\n"},"headers":{"!type":"?","!doc":"<p>Extra headers to be sent in the AJAX request for submit and load actions.\nSee <a href=\"#!/api/Ext.data.proxy.Ajax-cfg-headers\" rel=\"Ext.data.proxy.Ajax-cfg-headers\" class=\"docClass\">Ext.data.proxy.Ajax.headers</a>.</p>\n\n<p><strong>Note:</strong> Headers are not sent during file upload.</p>\n"},"method":{"!type":"string","!doc":"<p>The HTTP method to use to access the requested URL.\nDefaults to the <a href=\"#!/api/Ext.form.Basic-cfg-method\" rel=\"Ext.form.Basic-cfg-method\" class=\"docClass\">BasicForm's method</a>, or 'POST' if not specified.</p>\n"},"params":{"!type":"?|string","!doc":"<p>Extra parameter values to pass. These are added to the Form's <a href=\"#!/api/Ext.form.Basic-cfg-baseParams\" rel=\"Ext.form.Basic-cfg-baseParams\" class=\"docClass\">Ext.form.Basic.baseParams</a> and passed to the\nspecified URL along with the Form's input fields.</p>\n\n<p>Parameters are encoded as standard HTTP parameters using <a href=\"#!/api/Ext-method-urlEncode\" rel=\"Ext-method-urlEncode\" class=\"docClass\">Ext.Object.toQueryString</a>.</p>\n"},"reset":{"!type":"bool","!doc":"<p>When set to <strong>true</strong>, causes the Form to be <a href=\"#!/api/Ext.form.Basic-method-reset\" rel=\"Ext.form.Basic-method-reset\" class=\"docClass\">reset</a> on Action success. If specified,\nthis happens before the <a href=\"#!/api/Ext.form.action.Action-cfg-success\" rel=\"Ext.form.action.Action-cfg-success\" class=\"docClass\">success</a> callback is called and before the Form's\n<a href=\"#!/api/Ext.form.Basic-event-actioncomplete\" rel=\"Ext.form.Basic-event-actioncomplete\" class=\"docClass\">actioncomplete</a> event fires.</p>\n"},"scope":{"!type":"?","!doc":"<p>The scope in which to call the configured <a href=\"#!/api/Ext.form.action.Action-cfg-success\" rel=\"Ext.form.action.Action-cfg-success\" class=\"docClass\">success</a> and <a href=\"#!/api/Ext.form.action.Action-cfg-failure\" rel=\"Ext.form.action.Action-cfg-failure\" class=\"docClass\">failure</a> callback functions\n(the <code>this</code> reference for the callback functions).</p>\n"},"submitEmptyText":{"!type":"bool","!doc":"<p>If set to true, the emptyText value will be sent with the form when it is submitted.</p>\n"},"success":{"!type":"fn()","!doc":"<p>The function to call when a valid success return packet is received.</p>\n"},"timeout":{"!type":"number","!doc":"<p>The number of seconds to wait for a server response before failing with the <a href=\"#!/api/Ext.form.action.Action-property-failureType\" rel=\"Ext.form.action.Action-property-failureType\" class=\"docClass\">failureType</a> as\n<a href=\"#!/api/Ext.form.action.Action-static-property-CONNECT_FAILURE\" rel=\"Ext.form.action.Action-static-property-CONNECT_FAILURE\" class=\"docClass\">CONNECT_FAILURE</a>. If not specified, defaults to the configured\n<a href=\"#!/api/Ext.form.Basic-cfg-timeout\" rel=\"Ext.form.Basic-cfg-timeout\" class=\"docClass\">timeout</a> of the <a href=\"#!/api/Ext.form.action.Action-cfg-form\" rel=\"Ext.form.action.Action-cfg-form\" class=\"docClass\">form</a>.</p>\n"},"url":{"!type":"string","!doc":"<p>The URL that the Action is to invoke. Will default to the <a href=\"#!/api/Ext.form.Basic-cfg-url\" rel=\"Ext.form.Basic-cfg-url\" class=\"docClass\">url</a> configured on the\n<a href=\"#!/api/Ext.form.action.Action-cfg-form\" rel=\"Ext.form.action.Action-cfg-form\" class=\"docClass\">form</a>.</p>\n"},"waitMsg":{"!type":"string","!doc":"<p>The message to be displayed by a call to <a href=\"#!/api/Ext.window.MessageBox-method-wait\" rel=\"Ext.window.MessageBox-method-wait\" class=\"docClass\">Ext.window.MessageBox.wait</a> during the time the action is being\nprocessed.</p>\n"},"waitTitle":{"!type":"string","!doc":"<p>The title to be displayed by a call to <a href=\"#!/api/Ext.window.MessageBox-method-wait\" rel=\"Ext.window.MessageBox-method-wait\" class=\"docClass\">Ext.window.MessageBox.wait</a> during the time the action is being\nprocessed.</p>\n"},"failureType":{"!type":"string","!doc":"<p>The type of failure detected will be one of these:\n<a href=\"#!/api/Ext.form.action.Action-static-property-CLIENT_INVALID\" rel=\"Ext.form.action.Action-static-property-CLIENT_INVALID\" class=\"docClass\">CLIENT_INVALID</a>, <a href=\"#!/api/Ext.form.action.Action-static-property-SERVER_INVALID\" rel=\"Ext.form.action.Action-static-property-SERVER_INVALID\" class=\"docClass\">SERVER_INVALID</a>, <a href=\"#!/api/Ext.form.action.Action-static-property-CONNECT_FAILURE\" rel=\"Ext.form.action.Action-static-property-CONNECT_FAILURE\" class=\"docClass\">CONNECT_FAILURE</a>, or <a href=\"#!/api/Ext.form.action.Action-static-property-LOAD_FAILURE\" rel=\"Ext.form.action.Action-static-property-LOAD_FAILURE\" class=\"docClass\">LOAD_FAILURE</a>.</p>\n\n<p>Usage:</p>\n\n<pre><code>var fp = new <a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>({\n...\nbuttons: [{\n    text: 'Save',\n    formBind: true,\n    handler: function(){\n        if(fp.getForm().isValid()){\n            fp.getForm().submit({\n                url: 'form-submit.php',\n                waitMsg: 'Submitting your data...',\n                success: function(form, action){\n                    // server responded with success = true\n                    var result = action.<a href=\"#!/api/Ext.form.action.Action-property-result\" rel=\"Ext.form.action.Action-property-result\" class=\"docClass\">result</a>;\n                },\n                failure: function(form, action){\n                    if (action.<a href=\"#!/api/Ext.form.action.Action-property-failureType\" rel=\"Ext.form.action.Action-property-failureType\" class=\"docClass\">failureType</a> === <a href=\"#!/api/Ext.form.action.Action-static-property-CONNECT_FAILURE\" rel=\"Ext.form.action.Action-static-property-CONNECT_FAILURE\" class=\"docClass\">Ext.form.action.Action.CONNECT_FAILURE</a>) {\n                        <a href=\"#!/api/Ext.MessageBox-method-alert\" rel=\"Ext.MessageBox-method-alert\" class=\"docClass\">Ext.Msg.alert</a>('Error',\n                            'Status:'+action.<a href=\"#!/api/Ext.form.action.Action-property-response\" rel=\"Ext.form.action.Action-property-response\" class=\"docClass\">response</a>.status+': '+\n                            action.<a href=\"#!/api/Ext.form.action.Action-property-response\" rel=\"Ext.form.action.Action-property-response\" class=\"docClass\">response</a>.statusText);\n                    }\n                    if (action.failureType === <a href=\"#!/api/Ext.form.action.Action-static-property-SERVER_INVALID\" rel=\"Ext.form.action.Action-static-property-SERVER_INVALID\" class=\"docClass\">Ext.form.action.Action.SERVER_INVALID</a>){\n                        // server responded with success = false\n                        <a href=\"#!/api/Ext.MessageBox-method-alert\" rel=\"Ext.MessageBox-method-alert\" class=\"docClass\">Ext.Msg.alert</a>('Invalid', action.<a href=\"#!/api/Ext.form.action.Action-property-result\" rel=\"Ext.form.action.Action-property-result\" class=\"docClass\">result</a>.errormsg);\n                    }\n                }\n            });\n        }\n    }\n},{\n    text: 'Reset',\n    handler: function(){\n        fp.getForm().reset();\n    }\n}]\n</code></pre>\n"},"response":{"!type":"?","!doc":"<p>The raw XMLHttpRequest object used to perform the action.</p>\n"},"result":{"!type":"?","!doc":"<p>The decoded response object containing a boolean <code>success</code> property and other, action-specific properties.</p>\n"},"type":{"!type":"string","!doc":"<p>The type of action this Action instance performs. Currently only \"submit\" and \"load\" are supported.</p>\n"},"createCallback":{"!type":"fn() -> !this","!doc":"<p>Creates a callback object.</p>\n"},"getMethod":{"!type":"fn() -> string","!doc":"<p>Determine the HTTP method to be used for the request.</p>\n"},"getParams":{"!type":"fn() -> ?","!doc":"<p>Get the set of parameters specified in the BasicForm's baseParams and/or the params option.\nItems in params override items of the same name in baseParams.</p>\n"},"getUrl":{"!type":"fn() -> string","!doc":"<p>Build the URL for the AJAX request. Used by the standard AJAX submit and load actions.</p>\n"},"handleResponse":{"!type":"fn(response: ?)","!doc":"<p>Handles the raw response and builds a result object from it. Must be implemented by subclasses.</p>\n"},"onFailure":{"!type":"fn(response: ?) -> !this","!doc":"<p>Handles a failure response.</p>\n"},"onSuccess":{"!type":"fn(response: ?)","!doc":"<p>Callback method that gets invoked when the action completes successfully. Must be implemented by subclasses.</p>\n"},"processResponse":{"!type":"fn(response: ?) -> ?|bool","!doc":"<p>Validates that a response contains either responseText or responseXML and invokes\n<a href=\"#!/api/Ext.form.action.Action-method-handleResponse\" rel=\"Ext.form.action.Action-method-handleResponse\" class=\"docClass\">handleResponse</a> to build the result object.</p>\n"},"run":{"!type":"fn() -> !this","!doc":"<p>Invokes this action using the current configuration.</p>\n"}},"CLIENT_INVALID":{"!type":"string","!doc":"<p>Failure type returned when client side validation of the Form fails thus aborting a submit action. Client\nside validation is performed unless <a href=\"#!/api/Ext.form.action.Submit-cfg-clientValidation\" rel=\"Ext.form.action.Submit-cfg-clientValidation\" class=\"docClass\">Ext.form.action.Submit.clientValidation</a> is explicitly set to\nfalse.</p>\n"},"CONNECT_FAILURE":{"!type":"string","!doc":"<p>Failure type returned when a communication error happens when attempting to send a request to the remote\nserver. The <a href=\"#!/api/Ext.form.action.Action-property-response\" rel=\"Ext.form.action.Action-property-response\" class=\"docClass\">response</a> may be examined to provide further information.</p>\n"},"LOAD_FAILURE":{"!type":"string","!doc":"<p>Failure type returned when the response's <code>success</code> property is set to false, or no field values are returned\nin the response's data property.</p>\n"},"SERVER_INVALID":{"!type":"string","!doc":"<p>Failure type returned when server side processing fails and the <a href=\"#!/api/Ext.form.action.Action-property-result\" rel=\"Ext.form.action.Action-property-result\" class=\"docClass\">result</a>'s <code>success</code> property is set to\nfalse.</p>\n\n<p>In the case of a form submission, field-specific error messages may be returned in the <a href=\"#!/api/Ext.form.action.Action-property-result\" rel=\"Ext.form.action.Action-property-result\" class=\"docClass\">result</a>'s\nerrors property.</p>\n"}},"DirectLoad":{"!doc":"<p>Provides <a href=\"#!/api/Ext.direct.Manager\" rel=\"Ext.direct.Manager\" class=\"docClass\">Ext.direct.Manager</a> support for loading form data.</p>\n\n<p>This example illustrates usage of Ext.direct.Direct to <strong>load</strong> a form through <a href=\"#!/api/Ext.direct.Manager\" rel=\"Ext.direct.Manager\" class=\"docClass\">Ext.Direct</a>.</p>\n\n<pre><code>var myFormPanel = new <a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>({\n    // configs for FormPanel\n    title: 'Basic Information',\n    renderTo: document.body,\n    width: 300, height: 160,\n    padding: 10,\n\n    // configs apply to child items\n    defaults: {anchor: '100%'},\n    defaultType: 'textfield',\n    items: [{\n        fieldLabel: 'Name',\n        name: 'name'\n    },{\n        fieldLabel: 'Email',\n        name: 'email'\n    },{\n        fieldLabel: 'Company',\n        name: 'company'\n    }],\n\n    // configs for BasicForm\n    api: {\n        // The server-side method to call for load() requests\n        load: Profile.getBasicInfo,\n        // The server-side must mark the submit handler as a 'formHandler'\n        submit: Profile.updateBasicInfo\n    },\n    // specify the order for the passed params\n    paramOrder: ['uid', 'foo']\n});\n\n// load the form\nmyFormPanel.getForm().load({\n    // pass 2 arguments to server side getBasicInfo method (len=2)\n    params: {\n        foo: 'bar',\n        uid: 34\n    }\n});\n</code></pre>\n\n<p>The data packet sent to the server will resemble something like:</p>\n\n<pre><code>[\n    {\n        \"action\":\"Profile\",\"method\":\"getBasicInfo\",\"type\":\"rpc\",\"tid\":2,\n        \"data\":[34,\"bar\"] // note the order of the params\n    }\n]\n</code></pre>\n\n<p>The form will process a data packet returned by the server that is similar to the following format:</p>\n\n<pre><code>[\n    {\n        \"action\":\"Profile\",\"method\":\"getBasicInfo\",\"type\":\"rpc\",\"tid\":2,\n        \"result\":{\n            \"success\":true,\n            \"data\":{\n                \"name\":\"Fred Flintstone\",\n                \"company\":\"Slate Rock and Gravel\",\n                \"email\":\"fred.flintstone@slaterg.com\"\n            }\n        }\n    }\n]\n</code></pre>\n","!type":"fn(config?: Ext_form_action_DirectLoad_cfg)","prototype":{"!proto":"Ext.form.action.Load.prototype","type":{"!type":"string","!doc":"<p>The type of action this Action instance performs. Currently only \"submit\" and \"load\" are supported.</p>\n"},"onComplete":{"!type":"fn(data: ?, response: ?) -> !this"},"processResponse":{"!type":"fn(response: ?) -> ?|bool","!doc":"<p>Direct actions have already been processed and therefore\nwe can directly set the result; Direct Actions do not have\na this.response property.</p>\n"},"run":{"!type":"fn() -> !this"}}},"DirectSubmit":{"!doc":"<p>Provides Ext.direct support for submitting form data.</p>\n\n<p>This example illustrates usage of Ext.direct.Direct to <strong>submit</strong> a form through <a href=\"#!/api/Ext.direct.Manager\" rel=\"Ext.direct.Manager\" class=\"docClass\">Ext.Direct</a>.</p>\n\n<pre><code>var myFormPanel = new <a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>({\n    // configs for FormPanel\n    title: 'Basic Information',\n    renderTo: document.body,\n    width: 300, height: 160,\n    padding: 10,\n    buttons:[{\n        text: 'Submit',\n        handler: function(){\n            myFormPanel.getForm().submit({\n                params: {\n                    foo: 'bar',\n                    uid: 34\n                }\n            });\n        }\n    }],\n\n    // configs apply to child items\n    defaults: {anchor: '100%'},\n    defaultType: 'textfield',\n    items: [{\n        fieldLabel: 'Name',\n        name: 'name'\n    },{\n        fieldLabel: 'Email',\n        name: 'email'\n    },{\n        fieldLabel: 'Company',\n        name: 'company'\n    }],\n\n    // configs for BasicForm\n    api: {\n        // The server-side method to call for load() requests\n        load: Profile.getBasicInfo,\n        // The server-side must mark the submit handler as a 'formHandler'\n        submit: Profile.updateBasicInfo\n    },\n    // specify the order for the passed params\n    paramOrder: ['uid', 'foo']\n});\n</code></pre>\n\n<p>The data packet sent to the server will resemble something like:</p>\n\n<pre><code>{\n    \"action\":\"Profile\",\"method\":\"updateBasicInfo\",\"type\":\"rpc\",\"tid\":\"6\",\n    \"result\":{\n        \"success\":true,\n        \"id\":{\n            \"extAction\":\"Profile\",\"extMethod\":\"updateBasicInfo\",\n            \"extType\":\"rpc\",\"extTID\":\"6\",\"extUpload\":\"false\",\n            \"name\":\"Aaron Conran\",\"email\":\"aaron@sencha.com\",\"company\":\"Sencha Inc.\"\n        }\n    }\n}\n</code></pre>\n\n<p>The form will process a data packet returned by the server that is similar to the following:</p>\n\n<pre><code>// sample success packet (batched requests)\n[\n    {\n        \"action\":\"Profile\",\"method\":\"updateBasicInfo\",\"type\":\"rpc\",\"tid\":3,\n        \"result\":{\n            \"success\":true\n        }\n    }\n]\n\n// sample failure packet (one request)\n{\n        \"action\":\"Profile\",\"method\":\"updateBasicInfo\",\"type\":\"rpc\",\"tid\":\"6\",\n        \"result\":{\n            \"errors\":{\n                \"email\":\"already taken\"\n            },\n            \"success\":false,\n            \"foo\":\"bar\"\n        }\n}\n</code></pre>\n\n<p>Also see the discussion in <a href=\"#!/api/Ext.form.action.DirectLoad\" rel=\"Ext.form.action.DirectLoad\" class=\"docClass\">Ext.form.action.DirectLoad</a>.</p>\n","!type":"fn(config?: Ext_form_action_DirectSubmit_cfg)","prototype":{"!proto":"Ext.form.action.Submit.prototype","type":{"!type":"string","!doc":"<p>The type of action this Action instance performs. Currently only \"submit\" and \"load\" are supported.</p>\n"},"doSubmit":{"!type":"fn() -> !this","!doc":"<p>Performs the submit of the form data.</p>\n"},"onComplete":{"!type":"fn(data: ?, response: ?) -> !this"},"processResponse":{"!type":"fn(response: ?) -> ?|bool","!doc":"<p>Direct actions have already been processed and therefore\nwe can directly set the result; Direct Actions do not have\na this.response property.</p>\n"}}},"Load":{"!doc":"<p>A class which handles loading of data from a server into the Fields of an <a href=\"#!/api/Ext.form.Basic\" rel=\"Ext.form.Basic\" class=\"docClass\">Ext.form.Basic</a>.</p>\n\n<p>Instances of this class are only created by a <a href=\"#!/api/Ext.form.Basic\" rel=\"Ext.form.Basic\" class=\"docClass\">Form</a> when <a href=\"#!/api/Ext.form.Basic-method-load\" rel=\"Ext.form.Basic-method-load\" class=\"docClass\">load</a>ing.</p>\n\n<h2>Response Packet Criteria</h2>\n\n<p>A response packet <strong>must</strong> contain:</p>\n\n<ul>\n<li><strong><code>success</code></strong> property : Boolean</li>\n<li><strong><code>data</code></strong> property : Object</li>\n</ul>\n\n\n<p>The <code>data</code> property contains the values of Fields to load. The individual value object for each Field is passed to\nthe Field's <a href=\"#!/api/Ext.form.field.Field-method-setValue\" rel=\"Ext.form.field.Field-method-setValue\" class=\"docClass\">setValue</a> method.</p>\n\n<h2>JSON Packets</h2>\n\n<p>By default, response packets are assumed to be JSON, so for the following form load call:</p>\n\n<pre><code>var myFormPanel = new <a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>({\n    title: 'Client and routing info',\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    defaults: {\n        xtype: 'textfield'\n    },\n    items: [{\n        fieldLabel: 'Client',\n        name: 'clientName'\n    }, {\n        fieldLabel: 'Port of loading',\n        name: 'portOfLoading'\n    }, {\n        fieldLabel: 'Port of discharge',\n        name: 'portOfDischarge'\n    }]\n});\nmyFormPanel.<a href=\"#!/api/Ext.form.Panel-method-getForm\" rel=\"Ext.form.Panel-method-getForm\" class=\"docClass\">getForm</a>().<a href=\"#!/api/Ext.form.Basic-method-load\" rel=\"Ext.form.Basic-method-load\" class=\"docClass\">load</a>({\n    url: '/getRoutingInfo.php',\n    params: {\n        consignmentRef: myConsignmentRef\n    },\n    failure: function(form, action) {\n        <a href=\"#!/api/Ext.MessageBox-method-alert\" rel=\"Ext.MessageBox-method-alert\" class=\"docClass\">Ext.Msg.alert</a>(\"Load failed\", action.result.errorMessage);\n    }\n});\n</code></pre>\n\n<p>a <strong>success response</strong> packet may look like this:</p>\n\n<pre><code>{\n    success: true,\n    data: {\n        clientName: \"Fred. Olsen Lines\",\n        portOfLoading: \"FXT\",\n        portOfDischarge: \"OSL\"\n    }\n}\n</code></pre>\n\n<p>while a <strong>failure response</strong> packet may look like this:</p>\n\n<pre><code>{\n    success: false,\n    errorMessage: \"Consignment reference not found\"\n}\n</code></pre>\n\n<p>Other data may be placed into the response for processing the <a href=\"#!/api/Ext.form.Basic\" rel=\"Ext.form.Basic\" class=\"docClass\">Form</a>'s callback or event handler\nmethods. The object decoded from this JSON is available in the <a href=\"#!/api/Ext.form.action.Action-property-result\" rel=\"Ext.form.action.Action-property-result\" class=\"docClass\">result</a> property.</p>\n","!type":"fn(config?: Ext_form_action_Load_cfg)","prototype":{"!proto":"Ext.form.action.Action.prototype","type":{"!type":"string","!doc":"<p>The type of action this Action instance performs. Currently only \"submit\" and \"load\" are supported.</p>\n"},"handleResponse":{"!type":"fn(response: ?) -> !this"},"onSuccess":{"!type":"fn(response: ?) -> !this"},"run":{"!type":"fn() -> !this"}}},"StandardSubmit":{"!doc":"<p>A class which handles submission of data from <a href=\"#!/api/Ext.form.Basic\" rel=\"Ext.form.Basic\" class=\"docClass\">Form</a>s using a standard <code>&lt;form&gt;</code> element submit.\nIt does not handle the response from the submit.</p>\n\n<p>If validation of the form fields fails, the Form's afterAction method will be called. Otherwise, afterAction will not\nbe called.</p>\n\n<p>Instances of this class are only created by a <a href=\"#!/api/Ext.form.Basic\" rel=\"Ext.form.Basic\" class=\"docClass\">Form</a> when\n<a href=\"#!/api/Ext.form.Basic-method-submit\" rel=\"Ext.form.Basic-method-submit\" class=\"docClass\">submit</a>ting, when the form's <a href=\"#!/api/Ext.form.Basic-cfg-standardSubmit\" rel=\"Ext.form.Basic-cfg-standardSubmit\" class=\"docClass\">Ext.form.Basic.standardSubmit</a> config option is true.</p>\n","!type":"fn(config?: Ext_form_action_StandardSubmit_cfg)","prototype":{"!proto":"Ext.form.action.Submit.prototype","target":{"!type":"string","!doc":"<p>Optional target attribute to be used for the form when submitting.</p>\n\n<p>Defaults to the current window/frame.</p>\n"},"doSubmit":{"!type":"fn() -> !this","!doc":"<p>Perform the form submit. Creates and submits a temporary form element containing an input element for each\nfield value returned by <a href=\"#!/api/Ext.form.Basic-method-getValues\" rel=\"Ext.form.Basic-method-getValues\" class=\"docClass\">Ext.form.Basic.getValues</a>, plus any configured <a href=\"#!/api/Ext.form.action.StandardSubmit-cfg-params\" rel=\"Ext.form.action.StandardSubmit-cfg-params\" class=\"docClass\">params</a> or\n<a href=\"#!/api/Ext.form.Basic-cfg-baseParams\" rel=\"Ext.form.Basic-cfg-baseParams\" class=\"docClass\">baseParams</a>.</p>\n"}}},"Submit":{"!doc":"<p>A class which handles submission of data from <a href=\"#!/api/Ext.form.Basic\" rel=\"Ext.form.Basic\" class=\"docClass\">Form</a>s and processes the returned response.</p>\n\n<p>Instances of this class are only created by a <a href=\"#!/api/Ext.form.Basic\" rel=\"Ext.form.Basic\" class=\"docClass\">Form</a> when\n<a href=\"#!/api/Ext.form.Basic-method-submit\" rel=\"Ext.form.Basic-method-submit\" class=\"docClass\">submit</a>ting.</p>\n\n<h1>Response Packet Criteria</h1>\n\n<p>A response packet may contain:</p>\n\n<ul>\n<li><p><strong><code>success</code></strong> property : Boolean - required.</p></li>\n<li><p><strong><code>errors</code></strong> property : Object - optional, contains error messages for invalid fields.</p></li>\n</ul>\n\n\n<h1>JSON Packets</h1>\n\n<p>By default, response packets are assumed to be JSON, so a typical response packet may look like this:</p>\n\n<pre><code>{\n    success: false,\n    errors: {\n        clientCode: \"Client not found\",\n        portOfLoading: \"This field must not be null\"\n    }\n}\n</code></pre>\n\n<p>Other data may be placed into the response for processing by the <a href=\"#!/api/Ext.form.Basic\" rel=\"Ext.form.Basic\" class=\"docClass\">Ext.form.Basic</a>'s callback or event handler\nmethods. The object decoded from this JSON is available in the <a href=\"#!/api/Ext.form.action.Action-property-result\" rel=\"Ext.form.action.Action-property-result\" class=\"docClass\">result</a> property.</p>\n\n<p>Alternatively, if an <a href=\"#!/api/Ext.form.Basic-cfg-errorReader\" rel=\"Ext.form.Basic-cfg-errorReader\" class=\"docClass\">errorReader</a> is specified as an\n<a href=\"#!/api/Ext.data.reader.Xml\" rel=\"Ext.data.reader.Xml\" class=\"docClass\">XmlReader</a>:</p>\n\n<pre><code>errorReader: new <a href=\"#!/api/Ext.data.reader.Xml\" rel=\"Ext.data.reader.Xml\" class=\"docClass\">Ext.data.reader.Xml</a>({\n        record : 'field',\n        success: '@success'\n    }, [\n        'id', 'msg'\n    ]\n)\n</code></pre>\n\n<p>then the results may be sent back in XML format:</p>\n\n<pre><code>&lt;?xml version=\"1.0\" encoding=\"UTF-8\"?&gt;\n&lt;message success=\"false\"&gt;\n&lt;errors&gt;\n    &lt;field&gt;\n        &lt;id&gt;clientCode&lt;/id&gt;\n        &lt;msg&gt;&lt;![CDATA[Code not found. &lt;br /&gt;&lt;i&gt;This is a test validation message from the server &lt;/i&gt;]]&gt;&lt;/msg&gt;\n    &lt;/field&gt;\n    &lt;field&gt;\n        &lt;id&gt;portOfLoading&lt;/id&gt;\n        &lt;msg&gt;&lt;![CDATA[Port not found. &lt;br /&gt;&lt;i&gt;This is a test validation message from the server &lt;/i&gt;]]&gt;&lt;/msg&gt;\n    &lt;/field&gt;\n&lt;/errors&gt;\n&lt;/message&gt;\n</code></pre>\n\n<p>Other elements may be placed into the response XML for processing by the <a href=\"#!/api/Ext.form.Basic\" rel=\"Ext.form.Basic\" class=\"docClass\">Ext.form.Basic</a>'s callback or event\nhandler methods. The XML document is available in the <a href=\"#!/api/Ext.form.Basic-cfg-errorReader\" rel=\"Ext.form.Basic-cfg-errorReader\" class=\"docClass\">errorReader</a>'s\n<a href=\"#!/api/Ext.data.reader.Xml-property-xmlData\" rel=\"Ext.data.reader.Xml-property-xmlData\" class=\"docClass\">xmlData</a> property.</p>\n","!type":"fn(config?: Ext_form_action_Submit_cfg)","prototype":{"!proto":"Ext.form.action.Action.prototype","clientValidation":{"!type":"bool","!doc":"<p>Determines whether a Form's fields are validated in a final call to <a href=\"#!/api/Ext.form.Basic-method-isValid\" rel=\"Ext.form.Basic-method-isValid\" class=\"docClass\">isValid</a> prior\nto submission. Pass false in the Form's submit options to prevent this.</p>\n"},"type":{"!type":"string","!doc":"<p>The type of action this Action instance performs. Currently only \"submit\" and \"load\" are supported.</p>\n"},"buildForm":{"!type":"fn() -> +HTMLElement","!doc":"<p>Builds a form element containing fields corresponding to all the parameters to be\nsubmitted (everything returned by <a href=\"#!/api/Ext.form.action.Submit-method-getParams\" rel=\"Ext.form.action.Submit-method-getParams\" class=\"docClass\">getParams</a>.</p>\n\n<p>NOTE: the form element is automatically added to the DOM, so any code that uses\nit must remove it from the DOM after finishing with it.</p>\n"},"cleanup":{"!type":"fn(formInfo: ?) -> !this"},"doSubmit":{"!type":"fn() -> !this","!doc":"<p>Performs the submit of the form data.</p>\n"},"getFieldConfig":{"!type":"fn(name: ?, value: ?) -> !this"},"getParams":{"!type":"fn(useModelValues: ?) -> !this","!doc":"<p>Builds the full set of parameters from the field values plus any additional configured params.</p>\n"},"handleResponse":{"!type":"fn(response: ?) -> !this"},"onSuccess":{"!type":"fn(response: ?) -> !this"},"run":{"!type":"fn() -> !this","!doc":"<p>inherit docs</p>\n"}}}}},"fx":{"Anim":{"!doc":"<p>This class manages animation for a specific <a href=\"#!/api/Ext.fx.Anim-cfg-target\" rel=\"Ext.fx.Anim-cfg-target\" class=\"docClass\">target</a>. The animation allows\nanimation of various properties on the target, such as size, position, color and others.</p>\n\n<h2>Starting Conditions</h2>\n\n<p>The starting conditions for the animation are provided by the <a href=\"#!/api/Ext.fx.Anim-cfg-from\" rel=\"Ext.fx.Anim-cfg-from\" class=\"docClass\">from</a> configuration.\nAny/all of the properties in the <a href=\"#!/api/Ext.fx.Anim-cfg-from\" rel=\"Ext.fx.Anim-cfg-from\" class=\"docClass\">from</a> configuration can be specified. If a particular\nproperty is not defined, the starting value for that property will be read directly from the target.</p>\n\n<h2>End Conditions</h2>\n\n<p>The ending conditions for the animation are provided by the <a href=\"#!/api/Ext.fx.Anim-cfg-to\" rel=\"Ext.fx.Anim-cfg-to\" class=\"docClass\">to</a> configuration. These mark\nthe final values once the animations has finished. The values in the <a href=\"#!/api/Ext.fx.Anim-cfg-from\" rel=\"Ext.fx.Anim-cfg-from\" class=\"docClass\">from</a> can mirror\nthose in the <a href=\"#!/api/Ext.fx.Anim-cfg-to\" rel=\"Ext.fx.Anim-cfg-to\" class=\"docClass\">to</a> configuration to provide a starting point.</p>\n\n<h2>Other Options</h2>\n\n<ul>\n<li><a href=\"#!/api/Ext.fx.Anim-cfg-duration\" rel=\"Ext.fx.Anim-cfg-duration\" class=\"docClass\">duration</a>: Specifies the time period of the animation.</li>\n<li><a href=\"#!/api/Ext.fx.Anim-cfg-easing\" rel=\"Ext.fx.Anim-cfg-easing\" class=\"docClass\">easing</a>: Specifies the easing of the animation.</li>\n<li><a href=\"#!/api/Ext.fx.Anim-cfg-iterations\" rel=\"Ext.fx.Anim-cfg-iterations\" class=\"docClass\">iterations</a>: Allows the animation to repeat a number of times.</li>\n<li><a href=\"#!/api/Ext.fx.Anim-cfg-alternate\" rel=\"Ext.fx.Anim-cfg-alternate\" class=\"docClass\">alternate</a>: Used in conjunction with <a href=\"#!/api/Ext.fx.Anim-cfg-iterations\" rel=\"Ext.fx.Anim-cfg-iterations\" class=\"docClass\">iterations</a>, reverses the direction every second iteration.</li>\n</ul>\n\n\n<h2>Example Code</h2>\n\n<pre class='inline-example '><code>var myComponent = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>', {\n    renderTo: document.body,\n    width: 200,\n    height: 200,\n    style: 'border: 1px solid red;'\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.fx.Anim\" rel=\"Ext.fx.Anim\" class=\"docClass\">Ext.fx.Anim</a>', {\n    target: myComponent,\n    duration: 1000,\n    from: {\n        width: 400 //starting width 400\n    },\n    to: {\n        width: 300, //end width 300\n        height: 300 // end height 300\n    }\n});\n</code></pre>\n","!type":"fn(config: Ext_fx_Anim_cfg)","prototype":{"!proto":"Ext.Base.prototype","alternate":{"!type":"bool","!doc":"<p>Used in conjunction with iterations to reverse the animation each time an iteration completes.</p>\n"},"callback":{"!type":"fn()","!doc":"<p>A function to be run after the animation has completed.</p>\n"},"delay":{"!type":"number","!doc":"<p>Time to delay before starting the animation.</p>\n"},"duration":{"!type":"number","!doc":"<p>Time in milliseconds for a single animation to last. If the <a href=\"#!/api/Ext.fx.Anim-cfg-iterations\" rel=\"Ext.fx.Anim-cfg-iterations\" class=\"docClass\">iterations</a> property is\nspecified, then each animate will take the same duration for each iteration.</p>\n"},"dynamic":{"!type":"bool","!doc":"<p>Currently only for Component Animation: Only set a component's outer element size bypassing layouts.\nSet to true to do full layouts for every frame of the animation.</p>\n"},"easing":{"!type":"string","!doc":"<p>This describes how the intermediate values used during a transition will be calculated.\nIt allows for a transition to change speed over its duration.</p>\n\n<ul>\n<li>backIn</li>\n<li>backOut</li>\n<li>bounceIn</li>\n<li>bounceOut</li>\n<li>ease</li>\n<li>easeIn</li>\n<li>easeOut</li>\n<li>easeInOut</li>\n<li>elasticIn</li>\n<li>elasticOut</li>\n<li>cubic-bezier(x1, y1, x2, y2)</li>\n</ul>\n\n\n<p>Note that cubic-bezier will create a custom easing curve following the CSS3 <a href=\"http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag\">transition-timing-function</a>\nspecification.  The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2). All values must\nbe in the range [0, 1] or the definition is invalid.</p>\n"},"from":{"!type":"?","!doc":"<p>An object containing property/value pairs for the beginning of the animation.  If not specified, the current state of the\nExt.fx.target will be used. For example:</p>\n\n<pre><code>from: {\n    opacity: 0,       // Transparent\n    color: '#ffffff', // White\n    left: 0\n}\n</code></pre>\n"},"iterations":{"!type":"number","!doc":"<p>Number of times to execute the animation.</p>\n"},"keyframes":{"!type":"?","!doc":"<p>Animation keyframes follow the CSS3 Animation configuration pattern. 'from' is always considered '0%' and 'to'\nis considered '100%'. <strong>Every keyframe declaration must have a keyframe rule for 0% and 100%, possibly defined using\n\"from\" or \"to\".</strong>  A keyframe declaration without these keyframe selectors is invalid and will not be available for\nanimation.  The keyframe declaration for a keyframe rule consists of properties and values. Properties that are unable to\nbe animated are ignored in these rules, with the exception of 'easing' which can be changed at each keyframe. For example:</p>\n\n<pre><code>keyframes : {\n    '0%': {\n        left: 100\n    },\n    '40%': {\n        left: 150\n    },\n    '60%': {\n        left: 75\n    },\n    '100%': {\n        left: 100\n    }\n}\n</code></pre>\n"},"reverse":{"!type":"bool","!doc":"<p>Run the animation from the end to the beginning\nDefaults to false.</p>\n"},"scope":{"!type":"fn()","!doc":"<p>The scope that the <a href=\"#!/api/Ext.fx.Anim-cfg-callback\" rel=\"Ext.fx.Anim-cfg-callback\" class=\"docClass\">callback</a> function will be called with</p>\n"},"target":{"!type":"string|?","!doc":"<p>The <a href=\"#!/api/Ext.fx.target.Target\" rel=\"Ext.fx.target.Target\" class=\"docClass\">Ext.fx.target.Target</a> to apply the animation to.  This should only be specified when creating an <a href=\"#!/api/Ext.fx.Anim\" rel=\"Ext.fx.Anim\" class=\"docClass\">Ext.fx.Anim</a> directly.\nThe target does not need to be a <a href=\"#!/api/Ext.fx.target.Target\" rel=\"Ext.fx.target.Target\" class=\"docClass\">Ext.fx.target.Target</a> instance, it can be the underlying object. For example, you can\npass a Component, Element or Sprite as the target and the Anim will create the appropriate <a href=\"#!/api/Ext.fx.target.Target\" rel=\"Ext.fx.target.Target\" class=\"docClass\">Ext.fx.target.Target</a> object\nautomatically.</p>\n"},"to":{"!type":"?","!doc":"<p>An object containing property/value pairs for the end of the animation. For example:</p>\n\n<pre><code>to: {\n    opacity: 1,       // Opaque\n    color: '#00ff00', // Green\n    left: 500\n}\n</code></pre>\n"},"bezierRE":{"!type":"+RegExp"},"currentIteration":{"!type":"number","!doc":"<p>Current iteration the animation is running.</p>\n"},"damper":{"!type":"number"},"delayStart":{"!type":"number","!doc":"<p>used to track a delayed starting time</p>\n"},"endWasCalled":{"!type":"number"},"frameCount":{"!type":"number"},"isAnimation":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated Anim, or subclass thereof.</p>\n"},"paused":{"!type":"bool","!doc":"<p>Flag to determine if the animation is paused. Only set this to true if you need to\nkeep the Anim instance around to be unpaused later; otherwise call <a href=\"#!/api/Ext.fx.Anim-method-end\" rel=\"Ext.fx.Anim-method-end\" class=\"docClass\">end</a>.</p>\n"},"propHandlers":{"!type":"?","!doc":"<p>Contains a cache of the interpolators to be used.</p>\n"},"running":{"!type":"bool","!doc":"<p>Flag to determine if the animation has started</p>\n"},"startTime":{"!type":"+Date","!doc":"<p>Starting time of the animation.</p>\n"},"end":{"!type":"fn() -> !this","!doc":"<p>Fire afteranimate event and end the animation. Usually called automatically when the\nanimation reaches its final frame, but can also be called manually to pre-emptively\nstop and destroy the running animation.</p>\n"},"initAttrs":{"!type":"fn() -> !this","!doc":"<p>Set up the initial currentAttrs hash.</p>\n"},"isReady":{"!type":"fn() -> !this"},"isRunning":{"!type":"fn() -> !this"},"lastFrame":{"!type":"fn() -> ?","!doc":"<p>Perform lastFrame cleanup and handle iterations</p>\n"},"runAnim":{"!type":"fn(elapsedTime: ?) -> ?","!doc":"<p>Calculate attribute value at the passed timestamp.</p>\n"},"setAttr":{"!type":"fn(attr: ?, value: ?) -> !this","!doc":"<p>Helper to the target</p>\n"},"start":{"!type":"fn(startTime: ?) -> !this","!doc":"<p>Fires beforeanimate and sets the running flag.</p>\n"},"afteranimate":{"!type":"fn(this: +Ext.fx.Anim, startTime: +Date, eOpts: ?)","!doc":"<p>Fires when the animation is complete.</p>\n"},"beforeanimate":{"!type":"fn(this: +Ext.fx.Anim, eOpts: ?)","!doc":"<p>Fires before the animation starts. A handler can return false to cancel the animation.</p>\n"},"lastframe":{"!type":"fn(this: +Ext.fx.Anim, startTime: +Date, eOpts: ?)","!doc":"<p>Fires when the animation's last frame has been set.</p>\n"}}},"Animator":{"!doc":"<p>This class is used to run keyframe based animations, which follows the CSS3 based animation structure.\nKeyframe animations differ from typical from/to animations in that they offer the ability to specify values\nat various points throughout the animation.</p>\n\n<h2>Using Keyframes</h2>\n\n<p>The <a href=\"#!/api/Ext.fx.Animator-cfg-keyframes\" rel=\"Ext.fx.Animator-cfg-keyframes\" class=\"docClass\">keyframes</a> option is the most important part of specifying an animation when using this\nclass. A key frame is a point in a particular animation. We represent this as a percentage of the\ntotal animation duration. At each key frame, we can specify the target values at that time. Note that\nyou <em>must</em> specify the values at 0% and 100%, the start and ending values. There is also a <a href=\"#!/api/Ext.fx.Animator-event-keyframe\" rel=\"Ext.fx.Animator-event-keyframe\" class=\"docClass\">keyframe</a>\nevent that fires after each key frame is reached.</p>\n\n<h2>Example</h2>\n\n<p>In the example below, we modify the values of the element at each fifth throughout the animation.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.fx.Animator\" rel=\"Ext.fx.Animator\" class=\"docClass\">Ext.fx.Animator</a>', {\n    target: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>().createChild({\n        style: {\n            width: '100px',\n            height: '100px',\n            'background-color': 'red'\n        }\n    }),\n    duration: 10000, // 10 seconds\n    keyframes: {\n        0: {\n            opacity: 1,\n            backgroundColor: 'FF0000'\n        },\n        20: {\n            x: 30,\n            opacity: 0.5\n        },\n        40: {\n            x: 130,\n            backgroundColor: '0000FF'\n        },\n        60: {\n            y: 80,\n            opacity: 0.3\n        },\n        80: {\n            width: 200,\n            y: 200\n        },\n        100: {\n            opacity: 1,\n            backgroundColor: '00FF00'\n        }\n    }\n});\n</code></pre>\n","prototype":{"delay":{"!type":"number","!doc":"<p>Time to delay before starting the animation. Defaults to 0.</p>\n"},"duration":{"!type":"number","!doc":"<p>Time in milliseconds for the animation to last. Defaults to 250.</p>\n"},"dynamic":{"!type":"bool","!doc":"<p>Currently only for Component Animation: Only set a component's outer element size bypassing layouts.  Set to true to do full layouts for every frame of the animation.  Defaults to false.</p>\n"},"easing":{"!type":"string","!doc":"<p>This describes how the intermediate values used during a transition will be calculated. It allows for a transition to change\nspeed over its duration.</p>\n\n<ul>\n<li>backIn</li>\n<li>backOut</li>\n<li>bounceIn</li>\n<li>bounceOut</li>\n<li>ease</li>\n<li>easeIn</li>\n<li>easeOut</li>\n<li>easeInOut</li>\n<li>elasticIn</li>\n<li>elasticOut</li>\n<li>cubic-bezier(x1, y1, x2, y2)</li>\n</ul>\n\n\n<p>Note that cubic-bezier will create a custom easing curve following the CSS3 <a href=\"http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag\">transition-timing-function</a>\nspecification.  The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2). All values must\nbe in the range [0, 1] or the definition is invalid.</p>\n"},"iterations":{"!type":"number","!doc":"<p>Number of times to execute the animation. Defaults to 1.</p>\n"},"keyframes":{"!type":"?","!doc":"<p>Animation keyframes follow the CSS3 Animation configuration pattern. 'from' is always considered '0%' and 'to'\nis considered '100%'.<b>Every keyframe declaration must have a keyframe rule for 0% and 100%, possibly defined using\n\"from\" or \"to\"</b>.  A keyframe declaration without these keyframe selectors is invalid and will not be available for\nanimation.  The keyframe declaration for a keyframe rule consists of properties and values. Properties that are unable to\nbe animated are ignored in these rules, with the exception of 'easing' which can be changed at each keyframe. For example:</p>\n\n<pre><code>keyframes : {\n    '0%': {\n        left: 100\n    },\n    '40%': {\n        left: 150\n    },\n    '60%': {\n        left: 75\n    },\n    '100%': {\n        left: 100\n    }\n}\n </code></pre>\n\n"},"target":{"!type":"+Ext.fx.target.Target","!doc":"<p>The Ext.fx.target to apply the animation to.  If not specified during initialization, this can be passed to the applyAnimator\nmethod to apply the same animation to many targets.</p>\n"},"animKeyFramesRE":{"!type":"+RegExp"},"applyAnimator":{"!type":"string|?","!doc":"<p>Applies animation to the Ext.fx.target</p>\n"},"currentIteration":{"!type":"number","!doc":"<p>Current iteration the animation is running.</p>\n"},"damper":{"!type":"number"},"delayStart":{"!type":"number","!doc":"<p>private used to track a delayed starting time</p>\n"},"isAnimator":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated Animator, or subclass thereof.</p>\n"},"keyframeStep":{"!type":"number","!doc":"<p>Current keyframe step of the animation.</p>\n"},"paused":{"!type":"bool","!doc":"<p>Flag to determine if the animation is paused. Only set this to true if you need to\nkeep the Anim instance around to be unpaused later; otherwise call <a href=\"#!/api/Ext.fx.Animator-method-end\" rel=\"Ext.fx.Animator-method-end\" class=\"docClass\">end</a>.</p>\n"},"running":{"!type":"bool","!doc":"<p>Flag to determine if the animation has started</p>\n"},"createTimeline":{"!type":"fn(keyframes: ?) -> !this","!doc":"<p>Takes the given keyframe configuration object and converts it into an ordered array with the passed attributes per keyframe\nor applying the 'to' configuration to all keyframes.  Also calculates the proper animation duration per keyframe.</p>\n"},"end":{"!type":"fn() -> !this","!doc":"<p>Fire afteranimate event and end the animation. Usually called automatically when the\nanimation reaches its final frame, but can also be called manually to pre-emptively\nstop and destroy the running animation.</p>\n"},"isReady":{"!type":"fn() -> !this"},"isRunning":{"!type":"fn() -> !this"},"lastFrame":{"!type":"fn() -> ?","!doc":"<p>Perform lastFrame cleanup and handle iterations</p>\n"},"sorter":{"!type":"fn(a: ?, b: ?) -> !this"},"start":{"!type":"fn(startTime: ?) -> !this","!doc":"<p>Fires beforeanimate and sets the running flag.</p>\n"},"afteranimate":{"!type":"fn(this: +Ext.fx.Animator, startTime: +Date, eOpts: ?)","!doc":"<p>Fires when the animation is complete.</p>\n"},"beforeanimate":{"!type":"fn(this: +Ext.fx.Animator, eOpts: ?)","!doc":"<p>Fires before the animation starts. A handler can return false to cancel the animation.</p>\n"},"keyframe":{"!type":"fn(this: +Ext.fx.Animator, keyframe: number, eOpts: ?)","!doc":"<p>Fires at each keyframe.</p>\n"}}},"CubicBezier":{"cubicBezier":{"!type":"fn(x1: ?, y1: ?, x2: ?, y2: ?) -> !this"},"cubicBezierAtTime":{"!type":"fn(t: ?, p1x: ?, p1y: ?, p2x: ?, p2y: ?, duration: ?) -> !this","!doc":"<p>End Definitions</p>\n"}},"Easing":{"!doc":"<p>This class contains a series of function definitions used to modify values during an animation.\nThey describe how the intermediate values used during a transition will be calculated. It allows for a transition to change\nspeed over its duration. The following options are available:</p>\n\n<ul>\n<li>linear The default easing type</li>\n<li>backIn</li>\n<li>backOut</li>\n<li>bounceIn</li>\n<li>bounceOut</li>\n<li>ease</li>\n<li>easeIn</li>\n<li>easeOut</li>\n<li>easeInOut</li>\n<li>elasticIn</li>\n<li>elasticOut</li>\n<li>cubic-bezier(x1, y1, x2, y2)</li>\n</ul>\n\n\n<p>Note that cubic-bezier will create a custom easing curve following the CSS3 <a href=\"http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag\">transition-timing-function</a>\nspecification.  The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2). All values must\nbe in the range [0, 1] or the definition is invalid.</p>\n"},"Manager":{"!doc":"<p>Animation Manager which keeps track of all current animations and manages them on a frame by frame basis.</p>\n","!type":"fn()","prototype":{"!proto":"Ext.Base.prototype"},"forceJS":{"!type":"bool","!doc":"<p>Force the use of JavaScript-based animation instead of CSS3 animation, even when CSS3\nanimation is supported by the browser. This defaults to true currently, as CSS3 animation support is still\nconsidered experimental at this time, and if used should be thouroughly tested across all targeted browsers.</p>\n"},"interval":{"!type":"number","!doc":"<p>Default interval in miliseconds to calculate each frame.  Defaults to 16ms (~60fps)</p>\n"},"addAnim":{"!type":"fn(anim: +Ext.fx.Anim) -> !this","!doc":"<p>Add an Anim to the manager. This is done automatically when an Anim instance is created.</p>\n"},"applyPendingAttrs":{"!type":"fn() -> !this","!doc":"<p>Apply all pending attribute changes to their targets</p>\n"},"collectTargetData":{"!type":"fn(anim: +Ext.fx.Anim, timestamp: number, useCSS3?: bool, isLastFrame?: bool) -> ?","!doc":"<p>Collect target attributes for the given Anim object at the given timestamp</p>\n"},"createTarget":{"!type":"fn(target: ?) -> !this","!doc":"<p>Target factory</p>\n"},"removeAnim":{"!type":"fn(anim: +Ext.fx.Anim) -> !this","!doc":"<p>Remove an Anim from the manager. This is done automatically when an Anim ends.</p>\n"},"runAnim":{"!type":"fn(anim: ?) -> !this","!doc":"<p>Run the individual animation for this frame</p>\n"},"runner":{"!type":"fn() -> !this","!doc":"<p>Runner function being called each frame</p>\n"},"startAnim":{"!type":"fn(anim: ?) -> !this","!doc":"<p>Start the individual animation (initialization)</p>\n"}},"Queue":{"getActiveAnimation":{"!type":"fn(targetId: ?) -> !this","!doc":"<p>Returns current animation object if the element has any effects actively running or queued, else returns false.</p>\n"},"getFxDefaults":{"!type":"fn(targetId: ?) -> !this"},"getFxQueue":{"!type":"fn(targetId: ?) -> !this","!doc":"<p>get fx queue for passed target, create if needed.</p>\n"},"hasFxBlock":{"!type":"fn(targetId: ?) -> !this"},"queueFx":{"!type":"fn(anim: ?) -> !this"},"setFxDefaults":{"!type":"fn(targetId: ?, obj: ?) -> !this"},"stopAnimation":{"!type":"fn(targetId: ?) -> !this"},"!doc":"<p>Animation Queue mixin to handle chaining and queueing by target.</p>\n","!type":"fn()","prototype":{"!proto":"Ext.Base.prototype","getActiveAnimation":{"!type":"fn(targetId: ?) -> !this","!doc":"<p>Returns current animation object if the element has any effects actively running or queued, else returns false.</p>\n"},"getFxDefaults":{"!type":"fn(targetId: ?) -> !this"},"getFxQueue":{"!type":"fn(targetId: ?) -> !this","!doc":"<p>get fx queue for passed target, create if needed.</p>\n"},"hasFxBlock":{"!type":"fn(targetId: ?) -> !this"},"queueFx":{"!type":"fn(anim: ?) -> !this"},"setFxDefaults":{"!type":"fn(targetId: ?, obj: ?) -> !this"},"stopAnimation":{"!type":"fn(targetId: ?) -> !this"}}},"PropertyHandler":{"color":{"!type":"?"},"defaultHandler":{"!type":"?"},"object":{"!type":"?"},"path":{"!type":"?"},"stringHandler":{"!type":"?"}},"target":{"Component":{"!doc":"<p>This class represents a animation target for a <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>. In general this class will not be\ncreated directly, the <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> will be passed to the animation and\nand the appropriate target will be created.</p>\n","!type":"fn(target: +Ext.Component|+Ext.Element|+Ext.draw.Sprite)","prototype":{"!proto":"Ext.fx.target.Target.prototype","getPropMethod":{"!type":"?","!doc":"<p>Methods to call to retrieve unspecified \"from\" values from a target Component</p>\n"},"setMethods":{"!type":"?"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"getAttr":{"!type":"fn(attr: ?, val: ?) -> !this","!doc":"<p>Read the named attribute from the target Component. Use the defined getter for the attribute</p>\n"},"setAttr":{"!type":"fn(targetData: ?, isFirstFrame: ?, isLastFrame: ?) -> !this"}}},"CompositeElement":{"!doc":"<p>This class represents a animation target for a <a href=\"#!/api/Ext.dom.CompositeElement\" rel=\"Ext.dom.CompositeElement\" class=\"docClass\">Ext.CompositeElement</a>. It allows\neach <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a> in the group to be animated as a whole. In general this class will not be\ncreated directly, the <a href=\"#!/api/Ext.dom.CompositeElement\" rel=\"Ext.dom.CompositeElement\" class=\"docClass\">Ext.CompositeElement</a> will be passed to the animation and\nand the appropriate target will be created.</p>\n","!type":"fn(target: ?)","prototype":{"!proto":"Ext.fx.target.Element.prototype","isComposite":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated CompositeElement, or subclass thereof.</p>\n"},"getAttr":{"!type":"fn(attr: ?, val: ?) -> !this"},"setAttr":{"!type":"fn(targetData: ?) -> !this"}}},"CompositeElementCSS":{"!doc":"<p>This class represents a animation target for a <a href=\"#!/api/Ext.dom.CompositeElement\" rel=\"Ext.dom.CompositeElement\" class=\"docClass\">Ext.CompositeElement</a>, where the\nconstituent elements support CSS based animation. It allows each <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a> in\nthe group to be animated as a whole. In general this class will not be created directly,\nthe <a href=\"#!/api/Ext.dom.CompositeElement\" rel=\"Ext.dom.CompositeElement\" class=\"docClass\">Ext.CompositeElement</a> will be passed to the animation and the appropriate target\nwill be created.</p>\n","!type":"fn(target: ?)","prototype":{"!proto":"Ext.fx.target.CompositeElement.prototype","setAttr":{"!type":"fn() -> !this","!doc":"<p>End Definitions</p>\n"}}},"CompositeSprite":{"!doc":"<p>This class represents a animation target for a <a href=\"#!/api/Ext.draw.CompositeSprite\" rel=\"Ext.draw.CompositeSprite\" class=\"docClass\">Ext.draw.CompositeSprite</a>. It allows\neach <a href=\"#!/api/Ext.draw.Sprite\" rel=\"Ext.draw.Sprite\" class=\"docClass\">Ext.draw.Sprite</a> in the group to be animated as a whole. In general this class will not be\ncreated directly, the <a href=\"#!/api/Ext.draw.CompositeSprite\" rel=\"Ext.draw.CompositeSprite\" class=\"docClass\">Ext.draw.CompositeSprite</a> will be passed to the animation and\nand the appropriate target will be created.</p>\n","!type":"fn(target: +Ext.Component|+Ext.Element|+Ext.draw.Sprite)","prototype":{"!proto":"Ext.fx.target.Sprite.prototype","getAttr":{"!type":"fn(attr: ?, val: ?) -> !this","!doc":"<p>End Definitions</p>\n"}}},"Element":{"!doc":"<p>This class represents a animation target for an <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a>. In general this class will not be\ncreated directly, the <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a> will be passed to the animation and\nand the appropriate target will be created.</p>\n","!type":"fn(target: +Ext.Component|+Ext.Element|+Ext.draw.Sprite)","prototype":{"!proto":"Ext.fx.target.Target.prototype","type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"getAttr":{"!type":"fn(attr: ?, val: ?) -> !this"},"getElVal":{"!type":"fn(el: ?, attr: ?, val: ?) -> !this"},"setAttr":{"!type":"fn(targetData: ?) -> !this"},"setElVal":{"!type":"fn(element: ?, attr: ?, value: ?) -> !this"}}},"ElementCSS":{"!doc":"<p>This class represents a animation target for an <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a> that supports CSS\nbased animation. In general this class will not be created directly, the <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a>\nwill be passed to the animation and the appropriate target will be created.</p>\n","!type":"fn(target: +Ext.Component|+Ext.Element|+Ext.draw.Sprite)","prototype":{"!proto":"Ext.fx.target.Element.prototype","setAttr":{"!type":"fn(targetData: ?, isFirstFrame: ?) -> !this","!doc":"<p>End Definitions</p>\n"}}},"Sprite":{"!doc":"<p>This class represents an animation target for a <a href=\"#!/api/Ext.draw.Sprite\" rel=\"Ext.draw.Sprite\" class=\"docClass\">Ext.draw.Sprite</a>. In general this class will not be\n created directly, the <a href=\"#!/api/Ext.draw.Sprite\" rel=\"Ext.draw.Sprite\" class=\"docClass\">Ext.draw.Sprite</a> will be passed to the animation and\n and the appropriate target will be created.</p>\n","!type":"fn(target: +Ext.Component|+Ext.Element|+Ext.draw.Sprite)","prototype":{"!proto":"Ext.fx.target.Target.prototype","type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"getAttr":{"!type":"fn(attr: ?, val: ?) -> !this"},"getFromPrim":{"!type":"fn(sprite: ?, attr: ?) -> !this"},"setAttr":{"!type":"fn(targetData: ?) -> !this"}}},"Target":{"!doc":"<p>This class specifies a generic target for an animation. It provides a wrapper around a\nseries of different types of objects to allow for a generic animation API.\nA target can be a single object or a Composite object containing other objects that are\nto be animated. This class and it's subclasses are generally not created directly, the\nunderlying animation will create the appropriate <a href=\"#!/api/Ext.fx.target.Target\" rel=\"Ext.fx.target.Target\" class=\"docClass\">Ext.fx.target.Target</a> object by passing\nthe instance to be animated.</p>\n\n<p>The following types of objects can be animated:</p>\n\n<ul>\n<li><a href=\"#!/api/Ext.fx.target.Component\" rel=\"Ext.fx.target.Component\" class=\"docClass\">Components</a></li>\n<li><a href=\"#!/api/Ext.fx.target.Element\" rel=\"Ext.fx.target.Element\" class=\"docClass\">Elements</a></li>\n<li><a href=\"#!/api/Ext.fx.target.Sprite\" rel=\"Ext.fx.target.Sprite\" class=\"docClass\">Sprites</a></li>\n</ul>\n\n","!type":"fn(target: +Ext.Component|+Ext.Element|+Ext.draw.Sprite)","prototype":{"!proto":"Ext.Base.prototype","isAnimTarget":{"!type":"bool"},"getId":{"!type":"fn() -> !this"}}}}},"grid":{"CellContext":{"!doc":"<p>Internal utility class that provides a unique cell context.</p>\n","!type":"fn(view: ?)","prototype":{"!proto":"Ext.Base.prototype","isCellContext":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated CellContext, or subclass thereof.</p>\n"},"setColumn":{"!type":"fn(col: ?) -> !this"},"setPosition":{"!type":"fn(row: ?, col: ?) -> !this","!doc":"<p>Selection row/record &amp; column/columnHeader</p>\n"},"setRow":{"!type":"fn(row: ?) -> !this"}}},"CellEditor":{"!doc":"<p>Internal utility class that provides default configuration for cell editing.</p>\n","!type":"fn(config: Ext_grid_CellEditor_cfg)","prototype":{"!proto":"Ext.Editor.prototype","alignment":{"!type":"string","!doc":"<p>The position to align to (see <a href=\"#!/api/Ext.util.Positionable-method-alignTo\" rel=\"Ext.util.Positionable-method-alignTo\" class=\"docClass\">Ext.util.Positionable.alignTo</a> for more details).</p>\n"},"cls":{"!type":"string","!doc":"<p>An optional extra CSS class that will be added to this component's Element. This can be useful\nfor adding customized styles to the component or any of its children using standard CSS rules.</p>\n"},"hideEl":{"!type":"bool","!doc":"<p>False to keep the bound element visible while the editor is displayed</p>\n"},"shadow":{"!type":"bool|string","!doc":"<p>\"sides\" for sides/bottom only, \"frame\" for 4-way shadow, and \"drop\" for bottom-right shadow.</p>\n"},"shim":{"!type":"bool"},"treeNodeSelector":{"!type":"string"},"afterRender":{"!type":"fn() -> !this","!doc":"<p>Fix checkbox blur when it is clicked.</p>\n"},"getTreeNodeOffset":{"!type":"fn(innerCell: ?) -> !this","!doc":"<p>private</p>\n"},"onCheckBoxClick":{"!type":"fn() -> !this","!doc":"<p>Restore checkbox focus and completeEdit method.</p>\n"},"onCheckBoxMouseDown":{"!type":"fn() -> !this","!doc":"<p>Because when checkbox is clicked it loses focus  completeEdit is bypassed.</p>\n"},"onEditorTab":{"!type":"fn(e: ?) -> !this"},"onHide":{"!type":"fn() -> !this","!doc":"<p>Shows the grid cell inner element when a cell editor is hidden</p>\n"},"onShow":{"!type":"fn() -> !this","!doc":"<p>Hides the grid cell inner element when a cell editor is shown.</p>\n"},"realign":{"!type":"fn(autoSize: ?) -> !this","!doc":"<p>Realigns the Editor to the grid cell, or to the text node in the grid inner cell\nif the inner cell contains multiple child nodes.</p>\n"}}},"ColumnComponentLayout":{"!doc":"<p>Component layout for grid column headers which have a title element at the top followed by content.</p>\n","!type":"fn(config: Ext_grid_ColumnComponentLayout_cfg)","prototype":{"!proto":"Ext.layout.component.Auto.prototype","setWidthInDom":{"!type":"bool","!doc":"<p>When publishing width of an auto Component, it is usually not written to the DOM.\nSetting this to <code>true</code> overrides this behaviour.</p>\n"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"beginLayout":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called before any calculation cycles to prepare for layout.</p>\n\n<p>This is a write phase and DOM reads should be strictly avoided when overridding\nthis method.</p>\n"},"beginLayoutCycle":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called before any calculation cycles to reset DOM values and prepare for calculation.</p>\n\n<p>This is a write phase and DOM reads should be strictly avoided when overridding\nthis method.</p>\n"},"calculateOwnerHeightFromContentHeight":{"!type":"fn(ownerContext: ?, contentHeight: ?) -> !this","!doc":"<p>Push content height outwards when we are shrinkwrapping</p>\n"},"calculateOwnerWidthFromContentWidth":{"!type":"fn(ownerContext: ?, contentWidth: ?) -> !this","!doc":"<p>Push content width outwards when we are shrinkwrapping</p>\n"},"getTriggerOffset":{"!type":"fn(owner: ?, ownerContext: ?) -> !this"},"measureContentHeight":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>We do not need the Direct2D sub pixel measurement here. Just the offsetHeight will do.\nTODO: When https://sencha.jira.com/browse/EXTJSIV-7734 is fixed to not do subpixel adjustment on height,\nremove this override.</p>\n"},"publishInnerHeight":{"!type":"fn(ownerContext: ?, outerHeight: ?) -> !this","!doc":"<p>If not shrink wrapping, push height info down into child items</p>\n"},"publishInnerWidth":{"!type":"fn(ownerContext: ?, outerWidth: ?) -> !this","!doc":"<p>If not shrink wrapping, push width info down into child items</p>\n"},"publishOwnerHeight":{"!type":"fn(ownerContext: ?, contentHeight: ?) -> !this"}}},"ColumnLayout":{"!doc":"<p>This class is used only by the grid's HeaderContainer docked child.</p>\n\n<p>It adds the ability to shrink the vertical size of the inner container element back if a grouped\ncolumn header has all its child columns dragged out, and the whole HeaderContainer needs to shrink back down.</p>\n\n<p>Also, after every layout, after all headers have attained their 'stretchmax' height, it goes through and calls\n<code>setPadding</code> on the columns so that they lay out correctly.</p>\n","!type":"fn(config: Ext_grid_ColumnLayout_cfg)","prototype":{"!proto":"Ext.layout.container.HBox.prototype","firstHeaderCls":{"!type":"string"},"lastHeaderCls":{"!type":"string"},"reserveOffset":{"!type":"bool","!doc":"<p>whether or not to reserve the availableSpaceOffset in layout calculations</p>\n"},"type":{"!type":"string"},"beginLayout":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Collect the height of the table of data upon layout begin</p>\n"},"calculate":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called to perform the calculations for this layout. This method will be called at\nleast once and may be called repeatedly if the <a href=\"#!/api/Ext.grid.ColumnLayout-property-done\" rel=\"Ext.grid.ColumnLayout-property-done\" class=\"docClass\">done</a> property is cleared\nbefore return to indicate that this layout is not yet done. The <a href=\"#!/api/Ext.grid.ColumnLayout-property-done\" rel=\"Ext.grid.ColumnLayout-property-done\" class=\"docClass\">done</a> property\nis always set to <code>true</code> before entering this method.</p>\n\n<p>This is a read phase and DOM writes should be strictly avoided in derived classes.\nInstead, DOM writes need to be written to <a href=\"#!/api/Ext.layout.ContextItem\" rel=\"Ext.layout.ContextItem\" class=\"docClass\">Ext.layout.ContextItem</a> objects to\n be flushed at the next opportunity.</p>\n"},"completeLayout":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>This method (if implemented) is called at the end of the cycle in which this layout\ncompletes (by not setting <a href=\"#!/api/Ext.grid.ColumnLayout-property-done\" rel=\"Ext.grid.ColumnLayout-property-done\" class=\"docClass\">done</a> to <code>false</code> in <a href=\"#!/api/Ext.grid.ColumnLayout-method-calculate\" rel=\"Ext.grid.ColumnLayout-method-calculate\" class=\"docClass\">calculate</a>). It is\npossible for the layout to complete and yet become invalid before the end of the cycle,\nin which case, this method will not be called. It is also possible for this method to\nbe called and then later the layout becomes invalidated. This will result in\n<a href=\"#!/api/Ext.grid.ColumnLayout-method-calculate\" rel=\"Ext.grid.ColumnLayout-method-calculate\" class=\"docClass\">calculate</a> being called again, followed by another call to this method.</p>\n\n<p>This is a read phase and DOM writes should be strictly avoided in derived classes.\nInstead, DOM writes need to be written to <a href=\"#!/api/Ext.layout.ContextItem\" rel=\"Ext.layout.ContextItem\" class=\"docClass\">Ext.layout.ContextItem</a> objects to\nbe flushed at the next opportunity.</p>\n\n<p>This method need not be implemented by derived classes and, in fact, should only be\nimplemented when needed.</p>\n"},"convertWidthsToFlexes":{"!type":"fn(ownerContext: ?) -> !this"},"getColumnContainerSize":{"!type":"fn(ownerContext: ?) -> !this"},"getContainerSize":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Local getContainerSize implementation accounts for vertical scrollbar in the view.</p>\n"},"initLayout":{"!type":"fn() -> !this","!doc":"<p>A one-time initialization method called just before rendering.</p>\n"},"publishInnerCtSize":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>FIX: when flexing we actually don't have enough space as we would\ntypically because of the scrollOffset on the GridView, must reserve this</p>\n"},"roundFlex":{"!type":"fn(width: ?) -> !this"}}},"ColumnManager":{"!doc":"<p>Manages and provides information about a TablePanel's <em>visible leaf</em> columns.</p>\n","!type":"fn(headerCt: ?, secondHeaderCt: ?)","prototype":{"!proto":"Ext.Base.prototype","columns":{"!type":"?"},"cacheColumns":{"!type":"fn() -> !this"},"getColumns":{"!type":"fn() -> !this"},"getHeaderAtIndex":{"!type":"fn(index: number) -> +Ext.grid.column.Column","!doc":"<p>Get a leaf level header by index regardless of what the nesting\nstructure is.</p>\n"},"getHeaderById":{"!type":"fn(id: string) -> +Ext.grid.column.Column","!doc":"<p>Get a leaf level header by index regardless of what the nesting\nstructure is.</p>\n"},"getHeaderIndex":{"!type":"fn(header: +Ext.grid.column.Column) -> number","!doc":"<p>Returns the index of a leaf level header regardless of what the nesting\nstructure is.</p>\n\n<p>If a group header is passed, the index of the first leaf level heder within it is returned.</p>\n"},"getVisibleHeaderClosestToIndex":{"!type":"fn(index: number) -> !this","!doc":"<p>When passed a column index, returns the closet <em>visible</em> column to that. If the column at the passed index is visible,\nthat is returned. If it is hidden, either the next visible, or the previous visible column is returned.</p>\n"},"invalidate":{"!type":"fn() -> !this"}}},"Panel":{"!doc":"<p>Grids are an excellent way of showing large amounts of tabular data on the client side. Essentially a supercharged\n<code>&lt;table&gt;</code>, GridPanel makes it easy to fetch, sort and filter large amounts of data.</p>\n\n<p>Grids are composed of two main pieces - a <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Store</a> full of data and a set of columns to render.</p>\n\n<h2>Basic GridPanel</h2>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    storeId:'simpsonsStore',\n    fields:['name', 'email', 'phone'],\n    data:{'items':[\n        { 'name': 'Lisa',  \"email\":\"lisa@simpsons.com\",  \"phone\":\"555-111-1224\"  },\n        { 'name': 'Bart',  \"email\":\"bart@simpsons.com\",  \"phone\":\"555-222-1234\" },\n        { 'name': 'Homer', \"email\":\"home@simpsons.com\",  \"phone\":\"555-222-1244\"  },\n        { 'name': 'Marge', \"email\":\"marge@simpsons.com\", \"phone\":\"555-222-1254\"  }\n    ]},\n    proxy: {\n        type: 'memory',\n        reader: {\n            type: 'json',\n            root: 'items'\n        }\n    }\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Ext.grid.Panel</a>', {\n    title: 'Simpsons',\n    store: <a href=\"#!/api/Ext.data.StoreManager-method-lookup\" rel=\"Ext.data.StoreManager-method-lookup\" class=\"docClass\">Ext.data.StoreManager.lookup</a>('simpsonsStore'),\n    columns: [\n        { text: 'Name',  dataIndex: 'name' },\n        { text: 'Email', dataIndex: 'email', flex: 1 },\n        { text: 'Phone', dataIndex: 'phone' }\n    ],\n    height: 200,\n    width: 400,\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n\n<p>The code above produces a simple grid with three columns. We specified a Store which will load JSON data inline.\nIn most apps we would be placing the grid inside another container and wouldn't need to use the\n<a href=\"#!/api/Ext.grid.Panel-cfg-height\" rel=\"Ext.grid.Panel-cfg-height\" class=\"docClass\">height</a>, <a href=\"#!/api/Ext.grid.Panel-cfg-width\" rel=\"Ext.grid.Panel-cfg-width\" class=\"docClass\">width</a> and <a href=\"#!/api/Ext.grid.Panel-cfg-renderTo\" rel=\"Ext.grid.Panel-cfg-renderTo\" class=\"docClass\">renderTo</a> configurations but they are included here to make it easy to get\nup and running.</p>\n\n<p>The grid we created above will contain a header bar with a title ('Simpsons'), a row of column headers directly underneath\nand finally the grid rows under the headers.</p>\n\n<h2>Configuring columns</h2>\n\n<p>By default, each column is sortable and will toggle between ASC and DESC sorting when you click on its header. Each\ncolumn header is also reorderable by default, and each gains a drop-down menu with options to hide and show columns.\nIt's easy to configure each column - here we use the same example as above and just modify the columns config:</p>\n\n<pre><code>columns: [\n    {\n        text: 'Name',\n        dataIndex: 'name',\n        sortable: false,\n        hideable: false,\n        flex: 1\n    },\n    {\n        text: 'Email',\n        dataIndex: 'email',\n        hidden: true\n    },\n    {\n        text: 'Phone',\n        dataIndex: 'phone',\n        width: 100\n    }\n]\n</code></pre>\n\n<p>We turned off sorting and hiding on the 'Name' column so clicking its header now has no effect. We also made the Email\ncolumn hidden by default (it can be shown again by using the menu on any other column). We also set the Phone column to\na fixed with of 100px and flexed the Name column, which means it takes up all remaining width after the other columns\nhave been accounted for. See the <a href=\"#!/api/Ext.grid.column.Column\" rel=\"Ext.grid.column.Column\" class=\"docClass\">column docs</a> for more details.</p>\n\n<h2>Renderers</h2>\n\n<p>As well as customizing columns, it's easy to alter the rendering of individual cells using renderers. A renderer is\ntied to a particular column and is passed the value that would be rendered into each cell in that column. For example,\nwe could define a renderer function for the email column to turn each email address into a mailto link:</p>\n\n<pre><code>columns: [\n    {\n        text: 'Email',\n        dataIndex: 'email',\n        renderer: function(value) {\n            return <a href=\"#!/api/Ext.String-method-format\" rel=\"Ext.String-method-format\" class=\"docClass\">Ext.String.format</a>('&lt;a href=\"mailto:{0}\"&gt;{1}&lt;/a&gt;', value, value);\n        }\n    }\n]\n</code></pre>\n\n<p>See the <a href=\"#!/api/Ext.grid.column.Column\" rel=\"Ext.grid.column.Column\" class=\"docClass\">column docs</a> for more information on renderers.</p>\n\n<h2>Selection Models</h2>\n\n<p>Sometimes all you want is to render data onto the screen for viewing, but usually it's necessary to interact with or\nupdate that data. Grids use a concept called a Selection Model, which is simply a mechanism for selecting some part of\nthe data in the grid. The two main types of Selection Model are RowSelectionModel, where entire rows are selected, and\nCellSelectionModel, where individual cells are selected.</p>\n\n<p>Grids use a Row Selection Model by default, but this is easy to customise like so:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Ext.grid.Panel</a>', {\n    selType: 'cellmodel',\n    store: ...\n});\n</code></pre>\n\n<p>Specifying the <code>cellmodel</code> changes a couple of things. Firstly, clicking on a cell now\nselects just that cell (using a <a href=\"#!/api/Ext.selection.RowModel\" rel=\"Ext.selection.RowModel\" class=\"docClass\">rowmodel</a> will select the entire row), and secondly the\nkeyboard navigation will walk from cell to cell instead of row to row. Cell-based selection models are usually used in\nconjunction with editing.</p>\n\n<h2>Sorting &amp; Filtering</h2>\n\n<p>Every grid is attached to a <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Store</a>, which provides multi-sort and filtering capabilities. It's\neasy to set up a grid to be sorted from the start:</p>\n\n<pre><code>var myGrid = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Ext.grid.Panel</a>', {\n    store: {\n        fields: ['name', 'email', 'phone'],\n        sorters: ['name', 'phone']\n    },\n    columns: [\n        { text: 'Name',  dataIndex: 'name' },\n        { text: 'Email', dataIndex: 'email' }\n    ]\n});\n</code></pre>\n\n<p>Sorting at run time is easily accomplished by simply clicking each column header. If you need to perform sorting on\nmore than one field at run time it's easy to do so by adding new sorters to the store:</p>\n\n<pre><code>myGrid.store.sort([\n    { property: 'name',  direction: 'ASC' },\n    { property: 'email', direction: 'DESC' }\n]);\n</code></pre>\n\n<p>See <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a> for examples of filtering.</p>\n\n<h2>State saving</h2>\n\n<p>When configured <a href=\"#!/api/Ext.grid.Panel-cfg-stateful\" rel=\"Ext.grid.Panel-cfg-stateful\" class=\"docClass\">stateful</a>, grids save their column state (order and width) encapsulated within the default\nPanel state of changed width and height and collapsed/expanded state.</p>\n\n<p>Each <a href=\"#!/api/Ext.grid.Panel-cfg-columns\" rel=\"Ext.grid.Panel-cfg-columns\" class=\"docClass\">column</a> of the grid may be configured with a <a href=\"#!/api/Ext.grid.column.Column-cfg-stateId\" rel=\"Ext.grid.column.Column-cfg-stateId\" class=\"docClass\">stateId</a> which\nidentifies that column locally within the grid.</p>\n\n<h2>Plugins and Features</h2>\n\n<p>Grid supports addition of extra functionality through features and plugins:</p>\n\n<ul>\n<li><p><a href=\"#!/api/Ext.grid.plugin.CellEditing\" rel=\"Ext.grid.plugin.CellEditing\" class=\"docClass\">CellEditing</a> - editing grid contents one cell at a time.</p></li>\n<li><p><a href=\"#!/api/Ext.grid.plugin.RowEditing\" rel=\"Ext.grid.plugin.RowEditing\" class=\"docClass\">RowEditing</a> - editing grid contents an entire row at a time.</p></li>\n<li><p><a href=\"#!/api/Ext.grid.plugin.DragDrop\" rel=\"Ext.grid.plugin.DragDrop\" class=\"docClass\">DragDrop</a> - drag-drop reordering of grid rows.</p></li>\n<li><p><a href=\"#!/api/Ext.toolbar.Paging\" rel=\"Ext.toolbar.Paging\" class=\"docClass\">Paging toolbar</a> - paging through large sets of data.</p></li>\n<li><p><a href=\"#!/api/Ext.grid.plugin.BufferedRenderer\" rel=\"Ext.grid.plugin.BufferedRenderer\" class=\"docClass\">Infinite scrolling</a> - another way to handle large sets of data.</p></li>\n<li><p><a href=\"#!/api/Ext.grid.column.RowNumberer\" rel=\"Ext.grid.column.RowNumberer\" class=\"docClass\">RowNumberer</a> - automatically numbered rows.</p></li>\n<li><p><a href=\"#!/api/Ext.grid.feature.Grouping\" rel=\"Ext.grid.feature.Grouping\" class=\"docClass\">Grouping</a> - grouping together rows having the same value in a particular field.</p></li>\n<li><p><a href=\"#!/api/Ext.grid.feature.Summary\" rel=\"Ext.grid.feature.Summary\" class=\"docClass\">Summary</a> - a summary row at the bottom of a grid.</p></li>\n<li><p><a href=\"#!/api/Ext.grid.feature.GroupingSummary\" rel=\"Ext.grid.feature.GroupingSummary\" class=\"docClass\">GroupingSummary</a> - a summary row at the bottom of each group.</p></li>\n</ul>\n\n","!type":"fn(config: +Ext.Element|string|Ext_grid_Panel_cfg)","prototype":{"!proto":"Ext.panel.Table.prototype","columns":{"!type":"[+Ext.grid.column.Column]|?","!doc":"<p>An array of <a href=\"#!/api/Ext.grid.column.Column\" rel=\"Ext.grid.column.Column\" class=\"docClass\">column</a> definition objects which define all columns that appear in this\ngrid. Each column definition provides the header text for the column, and a definition of where the data for that\ncolumn comes from.</p>\n\n<p>This can also be a configuration object for a {<a href=\"#!/api/Ext.grid.header.Container\" rel=\"Ext.grid.header.Container\" class=\"docClass\">Ext.grid.header.Container</a> HeaderContainer} which may override\ncertain default configurations if necessary. For example, the special layout may be overridden to use a simpler\nlayout, or one can set default values shared by all columns:</p>\n\n<pre><code>columns: {\n    items: [\n        {\n            text: \"Column A\"\n            dataIndex: \"field_A\"\n        },{\n            text: \"Column B\",\n            dataIndex: \"field_B\"\n        }, \n        ...\n    ],\n    defaults: {\n        flex: 1\n    }\n}\n</code></pre>\n"},"rowLines":{"!type":"bool","!doc":"<p>False to remove row line styling</p>\n"},"viewType":{"!type":"string","!doc":"<p>An xtype of view to use. This is automatically set to 'gridview' by <a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Grid</a>\nand to 'treeview' by <a href=\"#!/api/Ext.tree.Panel\" rel=\"Ext.tree.Panel\" class=\"docClass\">Tree</a>.</p>\n"},"lockable":{"!type":"bool"},"reconfigure":{"!type":"fn(this: +Ext.grid.Panel, store: +Ext.data.Store, columns: [?], oldStore: +Ext.data.Store, The: [+Ext.grid.column.Column], eOpts: ?)","!doc":"<p>Fires after a reconfigure.</p>\n"},"beforereconfigure":{"!type":"fn(this: +Ext.grid.Panel, store: +Ext.data.Store, columns: [?], oldStore: +Ext.data.Store, The: [+Ext.grid.column.Column], eOpts: ?)","!doc":"<p>Fires before a reconfigure to enable modification of incoming Store and columns.</p>\n"}}},"RowEditor":{"!doc":"<p>Internal utility class used to provide row editing functionality. For developers, they should use\nthe RowEditing plugin to use this functionality with a grid.</p>\n","!type":"fn(config: +Ext.Element|string|Ext_grid_RowEditor_cfg)","prototype":{"!proto":"Ext.form.Panel.prototype","border":{"!type":"number|string|bool","!doc":"<p>Specifies the border size for this component. The border can be a single numeric value to apply to all sides or it can\nbe a CSS style specification for each style, for example: '10 5 3 10' (top, right, bottom, left).</p>\n\n<p>For components that have no border by default, setting this won't make the border appear by itself.\nYou also need to specify border color and style:</p>\n\n<pre><code>border: 5,\nstyle: {\n    borderColor: 'red',\n    borderStyle: 'solid'\n}\n</code></pre>\n\n<p>To turn off the border, use <code>border: false</code>.</p>\n"},"hideMode":{"!type":"string","!doc":"<p>Change the hideMode to offsets so that we get accurate measurements when\nthe roweditor is hidden for laying out things like a TriggerField.</p>\n"},"buttonUI":{"!type":"string"},"cancelBtnText":{"!type":"string","!doc":"<p>\n<locale></locale></p>\n"},"dirtyText":{"!type":"string","!doc":"<p>\n<locale></locale></p>\n"},"errorsText":{"!type":"string","!doc":"<p>\n<locale></locale></p>\n"},"lastScrollLeft":{"!type":"number","!doc":"<p></p>\n"},"lastScrollTop":{"!type":"number"},"saveBtnText":{"!type":"string","!doc":"<p><locale></locale></p>\n"},"addFieldsForColumn":{"!type":"fn(column: ?, initial: ?) -> !this"},"afterRender":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior after rendering is complete. At this stage the Component’s Element\nwill have been styled according to the configuration, will have had any configured CSS class\nnames added, and will be in the configured visibility and the configured enable state.</p>\n"},"beforeDestroy":{"!type":"fn() -> !this"},"beforeEdit":{"!type":"fn() -> !this"},"calculateEditorTop":{"!type":"fn(rowTop: ?) -> !this","!doc":"<p>Given the top pixel position of a row in the scroll space,\ncalculate the editor top position in the view's encapsulating element.\nThis will only ever be in the visible range of the view's element.</p>\n"},"calculateLocalRowTop":{"!type":"fn(row: ?) -> !this","!doc":"<p>Calculates the top pixel position of the passed row within the view's scroll space.\nSo in a large, scrolled grid, this could be several thousand pixels.</p>\n"},"cancelEdit":{"!type":"fn() -> !this"},"clearClip":{"!type":"fn(el: ?) -> !this"},"clipBottom":{"!type":"fn(value: ?) -> !this"},"clipTop":{"!type":"fn(value: ?) -> !this"},"completeEdit":{"!type":"fn() -> !this"},"createErrorListItem":{"!type":"fn(e: ?) -> !this"},"focusContextCell":{"!type":"fn() -> !this","!doc":"<p>Focus the cell on start edit based upon the current context</p>\n"},"getClientWidth":{"!type":"fn() -> !this"},"getEditor":{"!type":"fn(fieldInfo: ?) -> !this"},"getErrors":{"!type":"fn() -> !this"},"getFloatingButtons":{"!type":"fn() -> !this"},"getRefItems":{"!type":"fn() -> !this","!doc":"<p>Lie to the CQ system about our nesting structure.\nPretend all the fields are always immediate children.\nInclude the two buttons.</p>\n"},"getRefOwner":{"!type":"fn() -> !this","!doc":"<p>Used by <a href=\"#!/api/Ext.ComponentQuery\" rel=\"Ext.ComponentQuery\" class=\"docClass\">ComponentQuery</a>, and the <a href=\"#!/api/Ext.AbstractComponent-method-up\" rel=\"Ext.AbstractComponent-method-up\" class=\"docClass\">up</a> method to find the\nowning Component in the linkage hierarchy.</p>\n\n<p>By default this returns the Container which contains this Component.</p>\n\n<p>This may be overriden by Component authors who implement ownership hierarchies which are not\nbased upon ownerCt, such as BoundLists being owned by Fields or Menus being owned by Buttons.</p>\n"},"getScrollDelta":{"!type":"fn() -> number","!doc":"<p>Returns the scroll delta required to scroll the context row into view in order to make\nthe whole of this editor visible.</p>\n"},"getToolTip":{"!type":"fn() -> !this"},"hideToolTip":{"!type":"fn() -> !this"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>The initComponent template method is an important initialization step for a Component. It is intended to be\nimplemented by each subclass of <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> to provide any needed constructor logic. The\ninitComponent method of the class being created is called first, with each initComponent method\nup the hierarchy to <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> being called thereafter. This makes it easy to implement and,\nif needed, override the constructor logic of the Component at any step in the hierarchy.</p>\n\n<p>The initComponent method <strong>must</strong> contain a call to <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a> in order\nto ensure that the parent class' initComponent method is also called.</p>\n\n<p>All config options passed to the constructor are applied to <code>this</code> before initComponent is called,\nso you can simply access them with <code>this.someOption</code>.</p>\n\n<p>The following example demonstrates using a dynamic string for the text of a button at the time of\ninstantiation of the class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('DynamicButtonText', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n\n    initComponent: function() {\n        this.text = new Date();\n        this.renderTo = <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>();\n        this.callParent();\n    }\n});\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function() {\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('DynamicButtonText');\n});\n</code></pre>\n"},"insertColumnEditor":{"!type":"fn(column: ?) -> !this"},"isDirty":{"!type":"fn() -> bool","!doc":"<p>Convenience function to check if the form has any dirty fields. This is the same as calling\n<a href=\"#!/api/Ext.form.Basic-method-isDirty\" rel=\"Ext.form.Basic-method-isDirty\" class=\"docClass\">this.getForm().isDirty()</a>.</p>\n"},"loadRecord":{"!type":"fn(record: ?) -> +Ext.form.Basic","!doc":"<p>Loads an <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a> into this form (internally just calls <a href=\"#!/api/Ext.form.Basic-method-loadRecord\" rel=\"Ext.form.Basic-method-loadRecord\" class=\"docClass\">Ext.form.Basic.loadRecord</a>)\nSee also <a href=\"#!/api/Ext.form.Basic-cfg-trackResetOnLoad\" rel=\"Ext.form.Basic-cfg-trackResetOnLoad\" class=\"docClass\">trackResetOnLoad</a>.</p>\n"},"onBeforeViewRefresh":{"!type":"fn(view: ?) -> !this"},"onColumnAdd":{"!type":"fn(column: ?) -> !this"},"onColumnHide":{"!type":"fn(column: ?) -> !this"},"onColumnMove":{"!type":"fn(column: ?, fromIdx: ?, toIdx: ?) -> !this"},"onColumnRemove":{"!type":"fn(ct: ?, column: ?) -> !this"},"onColumnReplace":{"!type":"fn(map: ?, fieldId: ?, column: ?, oldColumn: ?) -> !this"},"onColumnResize":{"!type":"fn(column: ?, width: ?) -> !this"},"onColumnShow":{"!type":"fn(column: ?) -> !this"},"onFieldChange":{"!type":"fn() -> !this"},"onFieldContainerScroll":{"!type":"fn() -> !this","!doc":"<p>Synchronize the horizontal scroll position of the grid view with the fields.</p>\n"},"onFieldRender":{"!type":"fn(field: ?) -> !this"},"onGridResize":{"!type":"fn() -> !this","!doc":"<p>Grid listener added when this is rendered.\nKeep our containing element sized correctly</p>\n"},"onHide":{"!type":"fn() -> !this","!doc":"<p>Possibly animates down to a target element.</p>\n\n<p>Allows addition of behavior to the hide operation. After\ncalling the superclass’s onHide, the Component will be hidden.</p>\n\n<p>Gets passed the same parameters as <a href=\"#!/api/Ext.grid.RowEditor-event-hide\" rel=\"Ext.grid.RowEditor-event-hide\" class=\"docClass\">hide</a>.</p>\n"},"onShow":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the show operation. After\ncalling the superclass's onShow, the Component will be visible.</p>\n\n<p>Override in subclasses where more complex behaviour is needed.</p>\n\n<p>Gets passed the same parameters as <a href=\"#!/api/Ext.grid.RowEditor-method-show\" rel=\"Ext.grid.RowEditor-method-show\" class=\"docClass\">show</a>.</p>\n"},"onViewItemRemove":{"!type":"fn(record: ?, index: ?) -> !this"},"onViewRefresh":{"!type":"fn(view: ?) -> !this"},"onViewScroll":{"!type":"fn() -> !this"},"removeColumnEditor":{"!type":"fn(column: ?) -> !this"},"renderColumnData":{"!type":"fn(field: ?, record: ?, activeColumn: ?) -> !this"},"reposition":{"!type":"fn(animateConfig: ?, fromScrollHandler: ?) -> !this"},"repositionIfVisible":{"!type":"fn(c: ?) -> !this"},"repositionTip":{"!type":"fn() -> !this"},"showToolTip":{"!type":"fn() -> !this"},"startEdit":{"!type":"fn(record: +Ext.data.Model, columnHeader: +Ext.data.Model) -> !this","!doc":"<p>Start editing the specified grid at the specified position.</p>\n"},"syncButtonPosition":{"!type":"fn(scrollDelta: ?) -> !this","!doc":"<p>determines the amount by which the row editor will overflow, and flips the buttons\nto the top of the editor if the required scroll amount is greater than the available\nscroll space. Returns the scrollDelta required to scroll the editor into view after\nadjusting the button position.</p>\n"},"syncEditorClip":{"!type":"fn() -> !this","!doc":"<p>since the editor is rendered to the grid el, it must be clipped when scrolled\noutside of the grid view area so that it does not overlap the scrollbar or docked items</p>\n"},"syncFieldWidth":{"!type":"fn(column: ?) -> !this"},"syncFieldsHorizontalScroll":{"!type":"fn() -> !this","!doc":"<p>Synchronize the horizontal scroll position of the fields with the state of the grid view</p>\n"},"updateButton":{"!type":"fn(valid: ?) -> !this"}}},"RowEditorButtons":{"!doc":"<p>Private Container class used by the <a href=\"#!/api/Ext.grid.RowEditor\" rel=\"Ext.grid.RowEditor\" class=\"docClass\">Ext.grid.RowEditor</a> to hold its buttons.</p>\n","!type":"fn(config: Ext_grid_RowEditorButtons_cfg)","prototype":{"!proto":"Ext.container.Container.prototype","frame":{"!type":"bool","!doc":"<p>Specify as <code>true</code> to have the Component inject framing elements within the Component at render time to provide a\ngraphical rounded frame around the Component content.</p>\n\n<p>This is only necessary when running on outdated, or non standard-compliant browsers such as Microsoft's Internet\nExplorer prior to version 9 which do not support rounded corners natively.</p>\n\n<p>The extra space taken up by this framing is available from the read only property <a href=\"#!/api/Ext.grid.RowEditorButtons-property-frameSize\" rel=\"Ext.grid.RowEditorButtons-property-frameSize\" class=\"docClass\">frameSize</a>.</p>\n"},"shrinkWrap":{"!type":"bool|number","!doc":"<p>If this property is a number, it is interpreted as follows:</p>\n\n<ul>\n<li>0: Neither width nor height depend on content. This is equivalent to <code>false</code>.</li>\n<li>1: Width depends on content (shrink wraps), but height does not.</li>\n<li>2: Height depends on content (shrink wraps), but width does not. The default.</li>\n<li>3: Both width and height depend on content (shrink wrap). This is equivalent to <code>true</code>.</li>\n</ul>\n\n\n<p>In CSS terms, shrink-wrap width is analogous to an inline-block element as opposed\nto a block-level element. Some container layouts always shrink-wrap their children,\neffectively ignoring this property (e.g., <a href=\"#!/api/Ext.layout.container.HBox\" rel=\"Ext.layout.container.HBox\" class=\"docClass\">Ext.layout.container.HBox</a>,\n<a href=\"#!/api/Ext.layout.container.VBox\" rel=\"Ext.layout.container.VBox\" class=\"docClass\">Ext.layout.container.VBox</a>, <a href=\"#!/api/Ext.layout.component.Dock\" rel=\"Ext.layout.component.Dock\" class=\"docClass\">Ext.layout.component.Dock</a>).</p>\n"},"position":{"!type":"string"},"getFrameInfo":{"!type":"fn() -> !this","!doc":"<p>On render, reads an encoded style attribute, \"filter\" from the style of this Component's element.\nThis information is memoized based upon the CSS class name of this Component's element.\nBecause child Components are rendered as textual HTML as part of the topmost Container, a dummy div is inserted\ninto the document to receive the document element's CSS class name, and therefore style attributes.</p>\n"},"getFramingInfoCls":{"!type":"fn() -> !this"},"setButtonPosition":{"!type":"fn(position: ?) -> !this"}}},"View":{"!doc":"<p>The grid View class provides extra <a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Ext.grid.Panel</a> specific functionality to the\n<a href=\"#!/api/Ext.view.Table\" rel=\"Ext.view.Table\" class=\"docClass\">Ext.view.Table</a>. In general, this class is not instanced directly, instead a viewConfig\noption is passed to the grid:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Ext.grid.Panel</a>', {\n    // other options\n    viewConfig: {\n        stripeRows: false\n    }\n});\n</code></pre>\n\n<h2>Drag Drop</h2>\n\n<p>Drag and drop functionality can be achieved in the grid by attaching a <a href=\"#!/api/Ext.grid.plugin.DragDrop\" rel=\"Ext.grid.plugin.DragDrop\" class=\"docClass\">Ext.grid.plugin.DragDrop</a> plugin\nwhen creating the view.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Ext.grid.Panel</a>', {\n    // other options\n    viewConfig: {\n        plugins: {\n            ddGroup: 'people-group',\n            ptype: 'gridviewdragdrop',\n            enableDrop: false\n        }\n    }\n});\n</code></pre>\n","!type":"fn(config: Ext_grid_View_cfg)","prototype":{"!proto":"Ext.view.Table.prototype","autoScroll":{"!type":"bool","!doc":"<p><code>true</code> to use overflow:'auto' on the components layout element and show scroll bars automatically when necessary,\n<code>false</code> to clip any overflowing content.\nThis should not be combined with <a href=\"#!/api/Ext.grid.View-cfg-overflowX\" rel=\"Ext.grid.View-cfg-overflowX\" class=\"docClass\">overflowX</a> or  <a href=\"#!/api/Ext.grid.View-cfg-overflowY\" rel=\"Ext.grid.View-cfg-overflowY\" class=\"docClass\">overflowY</a>.</p>\n"},"stripeRows":{"!type":"bool","!doc":"<p>True to stripe the rows.</p>\n\n<p>This causes the CSS class <strong><code>x-grid-row-alt</code></strong> to be added to alternate rows of the grid. A default CSS rule is\nprovided which sets a background color, but you can override this with a rule which either overrides the\n<strong>background-color</strong> style using the <code>!important</code> modifier, or which uses a CSS selector of higher specificity.</p>\n"}}},"ViewDropZone":{"!type":"fn(config: Ext_grid_ViewDropZone_cfg)","prototype":{"!proto":"Ext.view.DropZone.prototype","indicatorCls":{"!type":"string"},"indicatorHtml":{"!type":"string"},"handleNodeDrop":{"!type":"fn(data: ?, record: ?, position: ?) -> !this"}}},"column":{"Action":{"!doc":"<p>A Grid header type which renders an icon, or a series of icons in a grid cell, and offers a scoped click\nhandler for each icon.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    storeId:'employeeStore',\n    fields:['firstname', 'lastname', 'seniority', 'dep', 'hired'],\n    data:[\n        {firstname:\"Michael\", lastname:\"Scott\"},\n        {firstname:\"Dwight\", lastname:\"Schrute\"},\n        {firstname:\"Jim\", lastname:\"Halpert\"},\n        {firstname:\"Kevin\", lastname:\"Malone\"},\n        {firstname:\"Angela\", lastname:\"Martin\"}\n    ]\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Ext.grid.Panel</a>', {\n    title: 'Action Column Demo',\n    store: <a href=\"#!/api/Ext.data.StoreManager-method-lookup\" rel=\"Ext.data.StoreManager-method-lookup\" class=\"docClass\">Ext.data.StoreManager.lookup</a>('employeeStore'),\n    columns: [\n        {text: 'First Name',  dataIndex:'firstname'},\n        {text: 'Last Name',  dataIndex:'lastname'},\n        {\n            xtype:'actioncolumn',\n            width:50,\n            items: [{\n                icon: 'extjs/examples/shared/icons/fam/cog_edit.png',  // Use a URL in the icon config\n                tooltip: 'Edit',\n                handler: function(grid, rowIndex, colIndex) {\n                    var rec = grid.getStore().getAt(rowIndex);\n                    alert(\"Edit \" + rec.get('firstname'));\n                }\n            },{\n                icon: 'extjs/examples/restful/images/delete.png',\n                tooltip: 'Delete',\n                handler: function(grid, rowIndex, colIndex) {\n                    var rec = grid.getStore().getAt(rowIndex);\n                    alert(\"Terminate \" + rec.get('firstname'));\n                }\n            }]\n        }\n    ],\n    width: 250,\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n\n<p>The action column can be at any index in the columns array, and a grid can have any number of\naction columns.</p>\n","!type":"fn(config: Ext_grid_column_Action_cfg)","prototype":{"!proto":"Ext.grid.column.Column.prototype","altText":{"!type":"string","!doc":"<p>The alt text to use for the image element.</p>\n"},"disabled":{"!type":"bool","!doc":"<p>If true, the action will not respond to click events, and will be displayed semi-opaque.</p>\n\n<p>This Column may also be disabled on a row by row basis by configuring a <a href=\"#!/api/Ext.grid.column.Action-cfg-isDisabled\" rel=\"Ext.grid.column.Action-cfg-isDisabled\" class=\"docClass\">isDisabled</a> method.</p>\n"},"getClass":{"!type":"fn()","!doc":"<p>A function which returns the CSS class to apply to the icon image.</p>\n"},"getTip":{"!type":"fn()","!doc":"<p>A function which returns the tooltip string for any row.</p>\n"},"handler":{"!type":"fn()","!doc":"<p>A function called when the icon is clicked.</p>\n"},"icon":{"!type":"string","!doc":"<p>The URL of an image to display as the clickable element in the column.</p>\n\n<p>Defaults to <code><a href=\"#!/api/Ext-property-BLANK_IMAGE_URL\" rel=\"Ext-property-BLANK_IMAGE_URL\" class=\"docClass\">Ext.BLANK_IMAGE_URL</a></code>.</p>\n"},"iconCls":{"!type":"string","!doc":"<p>A CSS class to apply to the icon image. To determine the class dynamically, configure the Column with\na <code><a href=\"#!/api/Ext.grid.column.Action-cfg-getClass\" rel=\"Ext.grid.column.Action-cfg-getClass\" class=\"docClass\">getClass</a></code> function.</p>\n"},"isDisabled":{"!type":"fn()","!doc":"<p>A function which determines whether the action item for any row is disabled and returns <code>true</code> or <code>false</code>.</p>\n"},"items":{"!type":"[?]","!doc":"<p>An array of action items copied from the configured <a href=\"#!/api/Ext.grid.column.Action-cfg-items\" rel=\"Ext.grid.column.Action-cfg-items\" class=\"docClass\">items</a> configuration. Each will have\nan <code>enable</code> and <code>disable</code> method added which will enable and disable the associated action, and\nupdate the displayed icon accordingly.</p>\n"},"menuText":{"!type":"string","!doc":"<p>Text to display in this column's menu item if no <a href=\"#!/api/Ext.grid.column.Action-cfg-text\" rel=\"Ext.grid.column.Action-cfg-text\" class=\"docClass\">text</a> was specified as a header.</p>\n"},"scope":{"!type":"?","!doc":"<p>The scope (<code>this</code> reference) in which the <code><a href=\"#!/api/Ext.grid.column.Action-cfg-handler\" rel=\"Ext.grid.column.Action-cfg-handler\" class=\"docClass\">handler</a></code>, <code><a href=\"#!/api/Ext.grid.column.Action-cfg-getClass\" rel=\"Ext.grid.column.Action-cfg-getClass\" class=\"docClass\">getClass</a></code>, <code><a href=\"#!/api/Ext.grid.column.Action-cfg-isDisabled\" rel=\"Ext.grid.column.Action-cfg-isDisabled\" class=\"docClass\">isDisabled</a></code> and <code><a href=\"#!/api/Ext.grid.column.Action-cfg-getTip\" rel=\"Ext.grid.column.Action-cfg-getTip\" class=\"docClass\">getTip</a></code> fuctions are executed.\nDefaults to this Column.</p>\n"},"sortable":{"!type":"bool","!doc":"<p>False to disable sorting of this column. Whether local/remote sorting is used is specified in\n<code><a href=\"#!/api/Ext.data.Store-cfg-remoteSort\" rel=\"Ext.data.Store-cfg-remoteSort\" class=\"docClass\">Ext.data.Store.remoteSort</a></code>.</p>\n"},"stopSelection":{"!type":"bool","!doc":"<p>Prevent grid selection upon mousedown.</p>\n"},"tooltip":{"!type":"string","!doc":"<p>A tooltip message to be displayed on hover. <a href=\"#!/api/Ext.tip.QuickTipManager-method-init\" rel=\"Ext.tip.QuickTipManager-method-init\" class=\"docClass\">Ext.tip.QuickTipManager</a> must\nhave been initialized.</p>\n\n<p>The tooltip may also be determined on a row by row basis by configuring a <a href=\"#!/api/Ext.grid.column.Action-cfg-getTip\" rel=\"Ext.grid.column.Action-cfg-getTip\" class=\"docClass\">getTip</a> method.</p>\n"},"innerCls":{"!type":"string"},"cascade":{"!type":"fn(fn: ?, scope: ?) -> +Ext.Container","!doc":"<p>Cascades down the component/container heirarchy from this component (passed in\nthe first call), calling the specified function with each component. The scope\n(this reference) of the function call will be the scope provided or the current\ncomponent. The arguments to the function will be the args provided or the current\ncomponent. If the function returns false at any point, the cascade is stopped on\nthat branch.</p>\n"},"defaultRenderer":{"!type":"fn(v: ?, meta: ?, record: ?, rowIdx: ?, colIdx: ?, store: ?, view: ?) -> !this","!doc":"<p>Renderer closure iterates through items creating an <img> element for each and tagging with an identifying\nclass name x-action-col-{n}</p>\n"},"destroy":{"!type":"fn() -> !this"},"disableAction":{"!type":"fn(index: number|+Ext.grid.column.Action, silent?: bool) -> !this","!doc":"<p>Disables this ActionColumn's action at the specified index.</p>\n"},"enableAction":{"!type":"fn(index: number|+Ext.grid.column.Action, silent?: bool) -> !this","!doc":"<p>Enables this ActionColumn's action at the specified index.</p>\n"},"getRefItems":{"!type":"fn() -> !this","!doc":"<p>Private override because this cannot function as a Container, and it has an items property which is an Array, NOT a MixedCollection.</p>\n"},"processEvent":{"!type":"fn(type: ?, view: ?, cell: ?, recordIndex: ?, cellIndex: ?, e: ?, record: ?, row: ?) -> !this","!doc":"<p>Process and refire events routed from the GridView's processEvent method.\nAlso fires any configured click handlers. By default, cancels the mousedown event to prevent selection.\nReturns the event handler's status to allow canceling of GridView's bubbling process.</p>\n"}}},"Boolean":{"!doc":"<p>A Column definition class which renders boolean data fields.  See the <a href=\"#!/api/Ext.grid.column.Column-cfg-xtype\" rel=\"Ext.grid.column.Column-cfg-xtype\" class=\"docClass\">xtype</a>\nconfig option of <a href=\"#!/api/Ext.grid.column.Column\" rel=\"Ext.grid.column.Column\" class=\"docClass\">Ext.grid.column.Column</a> for more details.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n   storeId:'sampleStore',\n   fields:[\n       {name: 'framework', type: 'string'},\n       {name: 'rocks', type: 'boolean'}\n   ],\n   data:{'items':[\n       { 'framework': \"Ext JS 4\",     'rocks': true  },\n       { 'framework': \"Sencha Touch\", 'rocks': true  },\n       { 'framework': \"Ext GWT\",      'rocks': true  }, \n       { 'framework': \"Other Guys\",   'rocks': false } \n   ]},\n   proxy: {\n       type: 'memory',\n       reader: {\n           type: 'json',\n           root: 'items'\n       }\n   }\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Ext.grid.Panel</a>', {\n    title: 'Boolean Column Demo',\n    store: <a href=\"#!/api/Ext.data.StoreManager-method-lookup\" rel=\"Ext.data.StoreManager-method-lookup\" class=\"docClass\">Ext.data.StoreManager.lookup</a>('sampleStore'),\n    columns: [\n        { text: 'Framework',  dataIndex: 'framework', flex: 1 },\n        {\n            xtype: 'booleancolumn', \n            text: 'Rocks',\n            trueText: 'Yes',\n            falseText: 'No', \n            dataIndex: 'rocks'\n        }\n    ],\n    height: 200,\n    width: 400,\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_grid_column_Boolean_cfg)","prototype":{"!proto":"Ext.grid.column.Column.prototype","falseText":{"!type":"string","!doc":"<p>The string returned by the renderer when the column value is falsey (but not undefined).</p>\n"},"trueText":{"!type":"string","!doc":"<p>The string returned by the renderer when the column value is not falsey.</p>\n"},"undefinedText":{"!type":"string","!doc":"<p>The string returned by the renderer when the column value is undefined.</p>\n"}}},"CheckColumn":{"!doc":"<p>A Column subclass which renders a checkbox in each column cell which toggles the truthiness of the associated data field on click.</p>\n\n<p>Example usage:</p>\n\n<pre class='inline-example '><code>var store = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    fields : ['name', 'email', 'phone', 'active'],\n    data   : {\n        items : [\n            { name : 'Lisa',  email : 'lisa@simpsons.com',  phone : '555-111-1224', active : true  },\n            { name : 'Bart',  email : 'bart@simpsons.com',  phone : '555-222-1234', active : true  },\n            { name : 'Homer', email : 'home@simpsons.com',  phone : '555-222-1244', active : false },\n            { name : 'Marge', email : 'marge@simpsons.com', phone : '555-222-1254', active : true  }\n        ]\n    },\n    proxy  : {\n        type   : 'memory',\n        reader : {\n            type : 'json',\n            root : 'items'\n        }\n    }\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Ext.grid.Panel</a>', {\n    title    : 'Simpsons',\n    height   : 200,\n    width    : 400,\n    renderTo : <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    store    : store,\n    columns  : [\n        { text : 'Name', dataIndex : 'name' },\n        { text : 'Email', dataIndex : 'email', flex : 1 },\n        { text : 'Phone', dataIndex : 'phone' },\n        { xtype : 'checkcolumn', text : 'Active', dataIndex : 'active' }\n    ]\n});\n</code></pre>\n\n<p>The check column can be at any index in the columns array.</p>\n","!type":"fn()","prototype":{"!proto":"Ext.grid.column.Column.prototype","stopSelection":{"!type":"bool","!doc":"<p>Prevent grid selection upon mousedown.</p>\n"},"tdCls":{"!type":"string","!doc":"<p>A CSS class names to apply to the table cells for this column.</p>\n"},"clickTargetName":{"!type":"string"},"innerCls":{"!type":"string"},"onDisable":{"!type":"fn(silent?: bool) -> !this","!doc":"<p>Disables this CheckColumn.</p>\n"},"onEnable":{"!type":"fn(silent?: bool) -> !this","!doc":"<p>Enables this CheckColumn.</p>\n"},"processEvent":{"!type":"fn(type: ?, view: ?, cell: ?, recordIndex: ?, cellIndex: ?, e: ?, record: ?, row: ?) -> !this","!doc":"<p>Process and refire events routed from the GridView's processEvent method.</p>\n"},"renderer":{"!type":"fn(value: ?, meta: ?) -> !this","!doc":"<p>Note: class names are not placed on the prototype bc renderer scope\nis not in the header.</p>\n"},"beforecheckchange":{"!type":"fn(this: +Ext.ux.CheckColumn, rowIndex: number, checked: bool, eOpts: ?)","!doc":"<p>Fires when before checked state of a row changes.\nThe change may be vetoed by returning <code>false</code> from a listener.</p>\n"},"checkchange":{"!type":"fn(this: +Ext.ux.CheckColumn, rowIndex: number, checked: bool, eOpts: ?)","!doc":"<p>Fires when the checked state of a row changes</p>\n"}}},"Column":{"!doc":"<p>This class specifies the definition for a column inside a <a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Ext.grid.Panel</a>. It encompasses\nboth the grid header configuration as well as displaying data within the grid itself. If the\n<a href=\"#!/api/Ext.grid.column.Column-cfg-columns\" rel=\"Ext.grid.column.Column-cfg-columns\" class=\"docClass\">columns</a> configuration is specified, this column will become a column group and can\ncontain other columns inside. In general, this class will not be created directly, rather\nan array of column configurations will be passed to the grid:</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    storeId:'employeeStore',\n    fields:['firstname', 'lastname', 'seniority', 'dep', 'hired'],\n    data:[\n        {firstname:\"Michael\", lastname:\"Scott\", seniority:7, dep:\"Management\", hired:\"01/10/2004\"},\n        {firstname:\"Dwight\", lastname:\"Schrute\", seniority:2, dep:\"Sales\", hired:\"04/01/2004\"},\n        {firstname:\"Jim\", lastname:\"Halpert\", seniority:3, dep:\"Sales\", hired:\"02/22/2006\"},\n        {firstname:\"Kevin\", lastname:\"Malone\", seniority:4, dep:\"Accounting\", hired:\"06/10/2007\"},\n        {firstname:\"Angela\", lastname:\"Martin\", seniority:5, dep:\"Accounting\", hired:\"10/21/2008\"}\n    ]\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Ext.grid.Panel</a>', {\n    title: 'Column Demo',\n    store: <a href=\"#!/api/Ext.data.StoreManager-method-lookup\" rel=\"Ext.data.StoreManager-method-lookup\" class=\"docClass\">Ext.data.StoreManager.lookup</a>('employeeStore'),\n    columns: [\n        {text: 'First Name',  dataIndex:'firstname'},\n        {text: 'Last Name',  dataIndex:'lastname'},\n        {text: 'Hired Month',  dataIndex:'hired', xtype:'datecolumn', format:'M'},\n        {text: 'Department (Yrs)', xtype:'templatecolumn', tpl:'{dep} ({seniority})'}\n    ],\n    width: 400,\n    forceFit: true,\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n\n<h1>Convenience Subclasses</h1>\n\n<p>There are several column subclasses that provide default rendering for various data types</p>\n\n<ul>\n<li><a href=\"#!/api/Ext.grid.column.Action\" rel=\"Ext.grid.column.Action\" class=\"docClass\">Ext.grid.column.Action</a>: Renders icons that can respond to click events inline</li>\n<li><a href=\"#!/api/Ext.grid.column.Boolean\" rel=\"Ext.grid.column.Boolean\" class=\"docClass\">Ext.grid.column.Boolean</a>: Renders for boolean values</li>\n<li><a href=\"#!/api/Ext.grid.column.Date\" rel=\"Ext.grid.column.Date\" class=\"docClass\">Ext.grid.column.Date</a>: Renders for date values</li>\n<li><a href=\"#!/api/Ext.grid.column.Number\" rel=\"Ext.grid.column.Number\" class=\"docClass\">Ext.grid.column.Number</a>: Renders for numeric values</li>\n<li><a href=\"#!/api/Ext.grid.column.Template\" rel=\"Ext.grid.column.Template\" class=\"docClass\">Ext.grid.column.Template</a>: Renders a value using an <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">Ext.XTemplate</a> using the record data</li>\n</ul>\n\n\n<h1>Setting Sizes</h1>\n\n<p>The columns are laid out by a <a href=\"#!/api/Ext.layout.container.HBox\" rel=\"Ext.layout.container.HBox\" class=\"docClass\">Ext.layout.container.HBox</a> layout, so a column can either\nbe given an explicit width value or a flex configuration. If no width is specified the grid will\nautomatically the size the column to 100px. For column groups, the size is calculated by measuring\nthe width of the child columns, so a width option should not be specified in that case.</p>\n\n<h1>Header Options</h1>\n\n<ul>\n<li><a href=\"#!/api/Ext.grid.column.Column-cfg-text\" rel=\"Ext.grid.column.Column-cfg-text\" class=\"docClass\">text</a>: Sets the header text for the column</li>\n<li><a href=\"#!/api/Ext.grid.column.Column-cfg-sortable\" rel=\"Ext.grid.column.Column-cfg-sortable\" class=\"docClass\">sortable</a>: Specifies whether the column can be sorted by clicking the header or using the column menu</li>\n<li><a href=\"#!/api/Ext.grid.column.Column-cfg-hideable\" rel=\"Ext.grid.column.Column-cfg-hideable\" class=\"docClass\">hideable</a>: Specifies whether the column can be hidden using the column menu</li>\n<li><a href=\"#!/api/Ext.grid.column.Column-cfg-menuDisabled\" rel=\"Ext.grid.column.Column-cfg-menuDisabled\" class=\"docClass\">menuDisabled</a>: Disables the column header menu</li>\n<li><a href=\"#!/api/Ext.grid.column.Column-cfg-draggable\" rel=\"Ext.grid.column.Column-cfg-draggable\" class=\"docClass\">draggable</a>: Specifies whether the column header can be reordered by dragging</li>\n<li><a href=\"#!/api/Ext.grid.column.Column-cfg-groupable\" rel=\"Ext.grid.column.Column-cfg-groupable\" class=\"docClass\">groupable</a>: Specifies whether the grid can be grouped by the column dataIndex. See also <a href=\"#!/api/Ext.grid.feature.Grouping\" rel=\"Ext.grid.feature.Grouping\" class=\"docClass\">Ext.grid.feature.Grouping</a></li>\n</ul>\n\n\n<h1>Data Options</h1>\n\n<ul>\n<li><a href=\"#!/api/Ext.grid.column.Column-cfg-dataIndex\" rel=\"Ext.grid.column.Column-cfg-dataIndex\" class=\"docClass\">dataIndex</a>: The dataIndex is the field in the underlying <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a> to use as the value for the column.</li>\n<li><a href=\"#!/api/Ext.grid.column.Column-cfg-renderer\" rel=\"Ext.grid.column.Column-cfg-renderer\" class=\"docClass\">renderer</a>: Allows the underlying store value to be transformed before being displayed in the grid</li>\n</ul>\n\n","!type":"fn(config: +Ext.Element|string|Ext_grid_column_Column_cfg)","prototype":{"!proto":"Ext.grid.header.Container.prototype","align":{"!type":"string","!doc":"<p>Sets the alignment of the header and rendered columns.\nPossible values are: <code>'left'</code>, <code>'center'</code>, and <code>'right'</code>.</p>\n"},"baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this component's element. This will also be prepended to elements within this\ncomponent like Panel's body will get a class <code>x-panel-body</code>. This means that if you create a subclass of Panel, and\nyou want it to get all the Panels styling for the element and the body, you leave the <code>baseCls</code> <code>x-panel</code> and use\n<code>componentCls</code> to add specific styling for this component.</p>\n"},"columns":{"!type":"[?]","!doc":"<p>An optional array of sub-column definitions. This column becomes a group, and houses the columns defined in the\n<code>columns</code> config.</p>\n\n<p>Group columns may not be sortable. But they may be hideable and moveable. And you may move headers into and out\nof a group. Note that if all sub columns are dragged out of a group, the group is destroyed.</p>\n"},"componentLayout":{"!type":"string|?","!doc":"<p>The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout\nmanager which sizes a Component's internal structure in response to the Component being sized.</p>\n\n<p>Generally, developers will not use this configuration as all provided Components which need their internal\nelements sizing (Such as <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">input fields</a>) come with their own componentLayout managers.</p>\n\n<p>The <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used on instances of the base <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\nclass which simply sizes the Component's encapsulating element to the height and width specified in the\n<a href=\"#!/api/Ext.grid.column.Column-method-setSize\" rel=\"Ext.grid.column.Column-method-setSize\" class=\"docClass\">setSize</a> method.</p>\n"},"dataIndex":{"!type":"string","!doc":"<p>The name of the field in the grid's <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>'s <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a> definition from\nwhich to draw the column's value. <strong>Required.</strong></p>\n"},"detachOnRemove":{"!type":"bool","!doc":"<p>So that when removing from group headers which are then empty and then get destroyed, there's no child DOM left</p>\n"},"draggable":{"!type":"bool","!doc":"<p>False to disable drag-drop reordering of this column.</p>\n"},"editRenderer":{"!type":"fn()","!doc":"<p>A renderer to be used in conjunction with <a href=\"#!/api/Ext.grid.plugin.RowEditing\" rel=\"Ext.grid.plugin.RowEditing\" class=\"docClass\">RowEditing</a>. This renderer is used to\ndisplay a custom value for non-editable fields.</p>\n"},"editor":{"!type":"?|string","!doc":"<p>An optional xtype or config object for a <a href=\"#!/api/Ext.form.field.Field\" rel=\"Ext.form.field.Field\" class=\"docClass\">Field</a> to use for editing.\nOnly applicable if the grid is using an <a href=\"#!/api/Ext.grid.plugin.Editing\" rel=\"Ext.grid.plugin.Editing\" class=\"docClass\">Editing</a> plugin.</p>\n"},"emptyCellText":{"!type":"string","!doc":"<p>The text to diplay in empty cells (cells with a value of <code>undefined</code>, <code>null</code>, or <code>''</code>).</p>\n\n<p>Defaults to <code>&amp;#160;</code> aka <code>&amp;nbsp;</code>.</p>\n"},"field":{"!type":"?|string","!doc":"<p>Alias for <a href=\"#!/api/Ext.grid.column.Column-cfg-editor\" rel=\"Ext.grid.column.Column-cfg-editor\" class=\"docClass\">editor</a>.</p>\n"},"fixed":{"!type":"bool","!doc":"<p>True to prevent the column from being resizable.</p>\n"},"groupable":{"!type":"bool","!doc":"<p>If the grid uses a <a href=\"#!/api/Ext.grid.feature.Grouping\" rel=\"Ext.grid.feature.Grouping\" class=\"docClass\">Ext.grid.feature.Grouping</a>, this option may be used to disable the header menu\nitem to group by the column selected. By default, the header menu group option is enabled. Set to false to\ndisable (but still show) the group option in the header menu for the column.</p>\n"},"header":{"!type":"string","!doc":"<p>The header text.</p>\n"},"hideable":{"!type":"bool","!doc":"<p>False to prevent the user from hiding this column.</p>\n"},"lockable":{"!type":"bool","!doc":"<p>If the grid is configured with <a href=\"#!/api/Ext.panel.Table-cfg-enableLocking\" rel=\"Ext.panel.Table-cfg-enableLocking\" class=\"docClass\">enableLocking</a>, or has columns which are\nconfigured with a <a href=\"#!/api/Ext.grid.column.Column-cfg-locked\" rel=\"Ext.grid.column.Column-cfg-locked\" class=\"docClass\">locked</a> value, this option may be used to disable user-driven locking or unlocking\nof this column. This column will remain in the side into which its own <a href=\"#!/api/Ext.grid.column.Column-cfg-locked\" rel=\"Ext.grid.column.Column-cfg-locked\" class=\"docClass\">locked</a> configuration placed it.</p>\n"},"locked":{"!type":"bool","!doc":"<p>True to lock this column in place.  Implicitly enables locking on the grid.\nSee also <a href=\"#!/api/Ext.grid.Panel-cfg-enableLocking\" rel=\"Ext.grid.Panel-cfg-enableLocking\" class=\"docClass\">Ext.grid.Panel.enableLocking</a>.</p>\n"},"menuDisabled":{"!type":"bool","!doc":"<p>True to disable the column header menu containing sort/hide options.</p>\n"},"menuText":{"!type":"string","!doc":"<p>The text to render in the column visibility selection menu for this column.  If not\nspecified, will default to the text value.</p>\n"},"noWrap":{"!type":"bool","!doc":"<p>The default setting indicates that external CSS rules dictate that the title is <code>white-space: nowrap</code> and\ntherefore, width cannot affect the measured height by causing text wrapping. This is what the Sencha-supplied\nstyles set. If you change those styles to allow text wrapping, you must set this to <code>false</code>.</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.grid.column.Column-method-getEl\" rel=\"Ext.grid.column.Column-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.grid.column.Column-method-getEl\" rel=\"Ext.grid.column.Column-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.grid.column.Column-cfg-renderSelectors\" rel=\"Ext.grid.column.Column-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.grid.column.Column-cfg-childEls\" rel=\"Ext.grid.column.Column-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"},"renderer":{"!type":"string|fn()","!doc":"<p>A renderer is an 'interceptor' method which can be used to transform data (value, appearance, etc.)\nbefore it is rendered. Example:</p>\n\n<pre><code>{\n    renderer: function(value){\n        if (value === 1) {\n            return '1 person';\n        }\n        return value + ' people';\n    }\n}\n</code></pre>\n\n<p>Additionally a string naming an <a href=\"#!/api/Ext.util.Format\" rel=\"Ext.util.Format\" class=\"docClass\">Ext.util.Format</a> method can be passed:</p>\n\n<pre><code>{\n    renderer: 'uppercase'\n}\n</code></pre>\n"},"resizable":{"!type":"bool","!doc":"<p>False to prevent the column from being resizable.</p>\n"},"scope":{"!type":"?","!doc":"<p>The scope to use when calling the <a href=\"#!/api/Ext.grid.column.Column-cfg-renderer\" rel=\"Ext.grid.column.Column-cfg-renderer\" class=\"docClass\">renderer</a> function.</p>\n"},"sortable":{"!type":"bool","!doc":"<p>False to disable sorting of this column. Whether local/remote sorting is used is specified in\n<code><a href=\"#!/api/Ext.data.Store-cfg-remoteSort\" rel=\"Ext.data.Store-cfg-remoteSort\" class=\"docClass\">Ext.data.Store.remoteSort</a></code>.</p>\n"},"stateId":{"!type":"string","!doc":"<p>An identifier which identifies this column uniquely within the owning grid's <a href=\"#!/api/Ext.grid.column.Column-cfg-stateful\" rel=\"Ext.grid.column.Column-cfg-stateful\" class=\"docClass\">state</a>.</p>\n\n<p>This does not have to be <em>globally</em> unique. A column's state is not saved standalone. It is encapsulated within\nthe owning grid's state.</p>\n"},"tdCls":{"!type":"string","!doc":"<p>A CSS class names to apply to the table cells for this column.</p>\n"},"text":{"!type":"string","!doc":"<p>The header text to be used as innerHTML (html tags are accepted) to display in the Grid.\n<strong>Note</strong>: to have a clickable header with no text displayed you can use the default of <code>&amp;#160;</code> aka <code>&amp;nbsp;</code>.</p>\n"},"tooltip":{"!type":"string","!doc":"<p>A tooltip to display for this column header</p>\n"},"tooltipType":{"!type":"string","!doc":"<p>The type of <a href=\"#!/api/Ext.grid.column.Column-cfg-tooltip\" rel=\"Ext.grid.column.Column-cfg-tooltip\" class=\"docClass\">tooltip</a> to use. Either 'qtip' for QuickTips or 'title' for title attribute.</p>\n"},"ascSortCls":{"!type":"string"},"childEls":{"!type":"[?]"},"clickTargetName":{"!type":"string"},"descSortCls":{"!type":"string"},"groupHeaderCls":{"!type":"string"},"groupSubHeaderCls":{"!type":"string"},"handleWidth":{"!type":"number"},"hoverCls":{"!type":"string","!doc":"<p>Not the standard, automatically applied overCls because we must filter out overs of child headers.</p>\n"},"isColumn":{"!type":"bool","!doc":"<p>Set in this class to identify, at runtime, instances which are not instances of the\nHeaderContainer base class, but are in fact simple column headers.</p>\n"},"isHeader":{"!type":"bool"},"possibleSortStates":{"!type":"[?]"},"sortState":{"!type":"?"},"textEl":{"!type":"+Ext.Element","!doc":"<p>Element that contains the text in column header.</p>\n"},"triggerEl":{"!type":"+Ext.Element","!doc":"<p>Element that acts as button for column header dropdown menu.</p>\n"},"afterComponentLayout":{"!type":"fn(width: ?, height: ?, oldWidth: ?, oldHeight: ?) -> !this","!doc":"<p>private\nInform the header container about the resize</p>\n"},"afterRender":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior after rendering is complete. At this stage the Component’s Element\nwill have been styled according to the configuration, will have had any configured CSS class\nnames added, and will be in the configured visibility and the configured enable state.</p>\n"},"applyColumnState":{"!type":"fn(state: ?) -> !this"},"autoSize":{"!type":"fn(The: +Ext.grid.column.Column|number) -> !this","!doc":"<p>Sizes this Column to fit the max content width.\n<em>Note that group columns shrinkwrap around the size of leaf columns. Auto sizing a group column\nautosizes descendant leaf columns.</em></p>\n"},"beforeRender":{"!type":"fn() -> !this"},"defaultRenderer":{"!type":"fn()","!doc":"<p>When defined this will take precedence over the <a href=\"#!/api/Ext.grid.column.Column-cfg-renderer\" rel=\"Ext.grid.column.Column-cfg-renderer\" class=\"docClass\">renderer</a> config.\nThis is meant to be defined in subclasses that wish to supply their own renderer.</p>\n"},"doSort":{"!type":"fn(state: ?) -> !this"},"getCellInnerSelector":{"!type":"fn() -> !this"},"getCellSelector":{"!type":"fn() -> !this"},"getColumnState":{"!type":"fn() -> !this"},"getDesiredWidth":{"!type":"fn() -> !this"},"getEditor":{"!type":"fn(record: ?, defaultField: ?) -> +Ext.form.field.Field","!doc":"<p>Retrieves the editing field for editing associated with this header. Returns false if there is no field\nassociated with the Header the method will return false. If the field has not been instantiated it will be\ncreated. Note: These methods only have an implementation if an Editing plugin has been enabled on the grid.</p>\n"},"getIndex":{"!type":"fn() -> number","!doc":"<p>Returns the index of this column only if this column is a base level Column. If it\nis a group column, it returns <code>false</code>.</p>\n"},"getSortParam":{"!type":"fn() -> string","!doc":"<p>Returns the parameter to sort upon when sorting this header. By default this returns the dataIndex and will not\nneed to be overriden in most cases.</p>\n"},"getStateId":{"!type":"fn() -> string","!doc":"<p>Gets the state id for this object.</p>\n"},"getVisibleIndex":{"!type":"fn() -> number","!doc":"<p>Returns the index of this column in the list of <em>visible</em> columns only if this column is a base level Column. If it\nis a group column, it returns <code>false</code>.</p>\n"},"hasMultipleVisibleChildren":{"!type":"fn(result: ?) -> !this","!doc":"<p>Private bubble function used in determining whether this column is lockable.\nExecutes in the scope of each component in the bubble sequence</p>\n"},"hasOtherMenuEnabledChildren":{"!type":"fn(result: ?) -> !this","!doc":"<p>Private bubble function used in determining whether this column is hideable.\nExecutes in the scope of each component in the bubble sequence</p>\n"},"hide":{"!type":"fn(fromOwner: ?) -> +Ext.Component","!doc":"<p>Hides this Component, setting it to invisible using the configured <a href=\"#!/api/Ext.grid.column.Column-cfg-hideMode\" rel=\"Ext.grid.column.Column-cfg-hideMode\" class=\"docClass\">hideMode</a>.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>The initComponent template method is an important initialization step for a Component. It is intended to be\nimplemented by each subclass of <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> to provide any needed constructor logic. The\ninitComponent method of the class being created is called first, with each initComponent method\nup the hierarchy to <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> being called thereafter. This makes it easy to implement and,\nif needed, override the constructor logic of the Component at any step in the hierarchy.</p>\n\n<p>The initComponent method <strong>must</strong> contain a call to <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a> in order\nto ensure that the parent class' initComponent method is also called.</p>\n\n<p>All config options passed to the constructor are applied to <code>this</code> before initComponent is called,\nso you can simply access them with <code>this.someOption</code>.</p>\n\n<p>The following example demonstrates using a dynamic string for the text of a button at the time of\ninstantiation of the class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('DynamicButtonText', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n\n    initComponent: function() {\n        this.text = new Date();\n        this.renderTo = <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>();\n        this.callParent();\n    }\n});\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function() {\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('DynamicButtonText');\n});\n</code></pre>\n"},"initDraggable":{"!type":"fn() -> !this","!doc":"<p>Header does not use the typical ComponentDraggable class and therefore we\noverride this with an emptyFn. It is controlled at the HeaderDragZone.</p>\n"},"initRenderData":{"!type":"fn() -> ?","!doc":"<p>Initialized the renderData to be used when rendering the renderTpl.</p>\n"},"initResizable":{"!type":"fn() -> !this","!doc":"<p>We need to override the default component resizable behaviour here</p>\n"},"isHideable":{"!type":"fn() -> !this","!doc":"<p>Determines whether the UI should be allowed to offer an option to hide this column.</p>\n\n<p>A column may <em>not</em> be hidden if to do so would leave the grid with no visible columns.</p>\n\n<p>This is used to determine the enabled/disabled state of header hide menu items.</p>\n"},"isLockable":{"!type":"fn() -> !this","!doc":"<p>Determines whether the UI should be allowed to offer an option to lock or unlock this column. Note\nthat this includes dragging a column into the opposite side of a <a href=\"#!/api/Ext.panel.Table-cfg-enableLocking\" rel=\"Ext.panel.Table-cfg-enableLocking\" class=\"docClass\">lockable</a> grid.</p>\n\n<p>A column may <em>not</em> be moved from one side to the other of a <a href=\"#!/api/Ext.panel.Table-cfg-enableLocking\" rel=\"Ext.panel.Table-cfg-enableLocking\" class=\"docClass\">lockable</a> grid\nif to do so would leave one side with no visible columns.</p>\n\n<p>This is used to determine the enabled/disabled state of the lock/unlock\nmenu item used in <a href=\"#!/api/Ext.panel.Table-cfg-enableLocking\" rel=\"Ext.panel.Table-cfg-enableLocking\" class=\"docClass\">lockable</a> grids, and to determine dropppabilty when dragging a header.</p>\n"},"isLocked":{"!type":"fn() -> !this","!doc":"<p>Determines whether this column is in the locked side of a grid. It may be a descendant node of a locked column\nand as such will <em>not</em> have the <a href=\"#!/api/Ext.grid.column.Column-cfg-locked\" rel=\"Ext.grid.column.Column-cfg-locked\" class=\"docClass\">locked</a> flag set.</p>\n"},"isOnLeftEdge":{"!type":"fn(e: ?) -> !this"},"isOnRightEdge":{"!type":"fn(e: ?) -> !this"},"onAdd":{"!type":"fn(child: ?) -> !this","!doc":"<p>Invalidate column cache on add\nWe cannot refresh the View on every add because this method is called\nwhen the HeaderDropZone moves Headers around, that will also refresh the view</p>\n"},"onDestroy":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the destroy operation.\nAfter calling the superclass's onDestroy, the Component will be destroyed.</p>\n"},"onDownKey":{"!type":"fn(e: ?) -> !this"},"onEnterKey":{"!type":"fn(e: ?) -> !this"},"onRemove":{"!type":"fn(child: ?) -> !this","!doc":"<p>Invalidate column cache on remove\nWe cannot refresh the View on every remove because this method is called\nwhen the HeaderDropZone moves Headers around, that will also refresh the view</p>\n"},"onTitleElClick":{"!type":"fn(e: ?, t: ?) -> !this"},"onTitleElContextMenu":{"!type":"fn(e: ?, t: ?) -> !this"},"onTitleElDblClick":{"!type":"fn(e: ?) -> !this","!doc":"<p>Double click handler which, if on left or right edges, auto-sizes the column to the left.</p>\n"},"onTitleMouseOut":{"!type":"fn() -> !this"},"onTitleMouseOver":{"!type":"fn() -> !this"},"processEvent":{"!type":"fn(type: string, view: +Ext.view.Table, cell: +HTMLElement, recordIndex: number, cellIndex: number, e: +Ext.EventObject) -> !this","!doc":"<p>Process UI events from the view. The owning TablePanel calls this method, relaying events from the TableView</p>\n"},"setEditor":{"!type":"fn(field: ?)","!doc":"<p>Sets the form field to be used for editing. Note: This method only has an implementation if an Editing plugin has\nbeen enabled on the grid.</p>\n"},"setMenuActive":{"!type":"fn(isMenuOpen: ?) -> !this","!doc":"<p>Called when the column menu is activated/deactivated.\nChange the UI to indicate active/inactive menu</p>\n"},"setSortState":{"!type":"fn(state: ?, skipClear: ?, initial: ?) -> !this"},"setText":{"!type":"fn(text: string) -> !this","!doc":"<p>Sets the header text for this Column.</p>\n"},"show":{"!type":"fn(fromOwner: ?, fromChild: ?) -> +Ext.Component","!doc":"<p>Shows this Component, rendering it first if <a href=\"#!/api/Ext.grid.column.Column-cfg-autoRender\" rel=\"Ext.grid.column.Column-cfg-autoRender\" class=\"docClass\">autoRender</a> or <a href=\"#!/api/Ext.grid.column.Column-cfg-floating\" rel=\"Ext.grid.column.Column-cfg-floating\" class=\"docClass\">floating</a> are <code>true</code>.</p>\n\n<p>After being shown, a <a href=\"#!/api/Ext.grid.column.Column-cfg-floating\" rel=\"Ext.grid.column.Column-cfg-floating\" class=\"docClass\">floating</a> Component (such as a <a href=\"#!/api/Ext.window.Window\" rel=\"Ext.window.Window\" class=\"docClass\">Ext.window.Window</a>), is activated it and\nbrought to the front of its <a href=\"#!/api/Ext.grid.column.Column-property-zIndexManager\" rel=\"Ext.grid.column.Column-property-zIndexManager\" class=\"docClass\">z-index stack</a>.</p>\n"},"toggleSortState":{"!type":"fn() -> !this"}}},"Date":{"!doc":"<p>A Column definition class which renders a passed date according to the default locale, or a configured\n<a href=\"#!/api/Ext.grid.column.Date-cfg-format\" rel=\"Ext.grid.column.Date-cfg-format\" class=\"docClass\">format</a>.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    storeId:'sampleStore',\n    fields:[\n        { name: 'symbol', type: 'string' },\n        { name: 'date',   type: 'date' },\n        { name: 'change', type: 'number' },\n        { name: 'volume', type: 'number' },\n        { name: 'topday', type: 'date' }                        \n    ],\n    data:[\n        { symbol: \"msft\",   date: '2011/04/22', change: 2.43, volume: 61606325, topday: '04/01/2010' },\n        { symbol: \"goog\",   date: '2011/04/22', change: 0.81, volume: 3053782,  topday: '04/11/2010' },\n        { symbol: \"apple\",  date: '2011/04/22', change: 1.35, volume: 24484858, topday: '04/28/2010' },            \n        { symbol: \"sencha\", date: '2011/04/22', change: 8.85, volume: 5556351,  topday: '04/22/2010' }            \n    ]\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Ext.grid.Panel</a>', {\n    title: 'Date Column Demo',\n    store: <a href=\"#!/api/Ext.data.StoreManager-method-lookup\" rel=\"Ext.data.StoreManager-method-lookup\" class=\"docClass\">Ext.data.StoreManager.lookup</a>('sampleStore'),\n    columns: [\n        { text: 'Symbol',   dataIndex: 'symbol', flex: 1 },\n        { text: 'Date',     dataIndex: 'date',   xtype: 'datecolumn',   format:'Y-m-d' },\n        { text: 'Change',   dataIndex: 'change', xtype: 'numbercolumn', format:'0.00' },\n        { text: 'Volume',   dataIndex: 'volume', xtype: 'numbercolumn', format:'0,000' },\n        { text: 'Top Day',  dataIndex: 'topday', xtype: 'datecolumn',   format:'l' }            \n    ],\n    height: 200,\n    width: 450,\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_grid_column_Date_cfg)","prototype":{"!proto":"Ext.grid.column.Column.prototype","format":{"!type":"string","!doc":"<p>A formatting string as used by <a href=\"#!/api/Ext.Date-method-format\" rel=\"Ext.Date-method-format\" class=\"docClass\">Ext.Date.format</a> to format a Date for this Column.</p>\n\n<p>Defaults to the default date from <a href=\"#!/api/Ext.Date-property-defaultFormat\" rel=\"Ext.Date-property-defaultFormat\" class=\"docClass\">Ext.Date.defaultFormat</a> which itself my be overridden\nin a locale file.</p>\n"},"defaultRenderer":{"!type":"fn(value: ?) -> !this","!doc":"<p>When defined this will take precedence over the <a href=\"#!/api/Ext.grid.column.Column-cfg-renderer\" rel=\"Ext.grid.column.Column-cfg-renderer\" class=\"docClass\">renderer</a> config.\nThis is meant to be defined in subclasses that wish to supply their own renderer.</p>\n"}}},"Number":{"!doc":"<p>A Column definition class which renders a numeric data field according to a <a href=\"#!/api/Ext.grid.column.Number-cfg-format\" rel=\"Ext.grid.column.Number-cfg-format\" class=\"docClass\">format</a> string.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n   storeId:'sampleStore',\n   fields:[\n       { name: 'symbol', type: 'string' },\n       { name: 'price',  type: 'number' },\n       { name: 'change', type: 'number' },\n       { name: 'volume', type: 'number' }\n   ],\n   data:[\n       { symbol: \"msft\",   price: 25.76,  change: 2.43, volume: 61606325 },\n       { symbol: \"goog\",   price: 525.73, change: 0.81, volume: 3053782  },\n       { symbol: \"apple\",  price: 342.41, change: 1.35, volume: 24484858 },\n       { symbol: \"sencha\", price: 142.08, change: 8.85, volume: 5556351  }\n   ]\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Ext.grid.Panel</a>', {\n    title: 'Number Column Demo',\n    store: <a href=\"#!/api/Ext.data.StoreManager-method-lookup\" rel=\"Ext.data.StoreManager-method-lookup\" class=\"docClass\">Ext.data.StoreManager.lookup</a>('sampleStore'),\n    columns: [\n        { text: 'Symbol',         dataIndex: 'symbol', flex: 1 },\n        { text: 'Current Price',  dataIndex: 'price',  renderer: <a href=\"#!/api/Ext.util.Format-method-usMoney\" rel=\"Ext.util.Format-method-usMoney\" class=\"docClass\">Ext.util.Format.usMoney</a> },\n        { text: 'Change',         dataIndex: 'change', xtype: 'numbercolumn', format:'0.00' },\n        { text: 'Volume',         dataIndex: 'volume', xtype: 'numbercolumn', format:'0,000' }\n    ],\n    height: 200,\n    width: 400,\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_grid_column_Number_cfg)","prototype":{"!proto":"Ext.grid.column.Column.prototype","format":{"!type":"string","!doc":"<p>A formatting string as used by <a href=\"#!/api/Ext.util.Format-method-number\" rel=\"Ext.util.Format-method-number\" class=\"docClass\">Ext.util.Format.number</a> to format a numeric value for this Column.</p>\n"}}},"RowNumberer":{"!doc":"<p>A special type of Grid <a href=\"#!/api/Ext.grid.column.Column\" rel=\"Ext.grid.column.Column\" class=\"docClass\">Ext.grid.column.Column</a> that provides automatic\nrow numbering.</p>\n\n<p>Usage:</p>\n\n<pre><code>columns: [\n    {xtype: 'rownumberer'},\n    {text: \"Company\", flex: 1, sortable: true, dataIndex: 'company'},\n    {text: \"Price\", width: 120, sortable: true, renderer: <a href=\"#!/api/Ext.util.Format-method-usMoney\" rel=\"Ext.util.Format-method-usMoney\" class=\"docClass\">Ext.util.Format.usMoney</a>, dataIndex: 'price'},\n    {text: \"Change\", width: 120, sortable: true, dataIndex: 'change'},\n    {text: \"% Change\", width: 120, sortable: true, dataIndex: 'pctChange'},\n    {text: \"Last Updated\", width: 120, sortable: true, renderer: <a href=\"#!/api/Ext.util.Format-method-dateRenderer\" rel=\"Ext.util.Format-method-dateRenderer\" class=\"docClass\">Ext.util.Format.dateRenderer</a>('m/d/Y'), dataIndex: 'lastChange'}\n]\n</code></pre>\n","!type":"fn(config: Ext_grid_column_RowNumberer_cfg)","prototype":{"!proto":"Ext.grid.column.Column.prototype","align":{"!type":"string","!doc":"<p>Sets the alignment of the header and rendered columns.\nPossible values are: <code>'left'</code>, <code>'center'</code>, and <code>'right'</code>.</p>\n"},"cls":{"!type":"string","!doc":"<p>An optional extra CSS class that will be added to this component's Element. This can be useful\nfor adding customized styles to the component or any of its children using standard CSS rules.</p>\n"},"dataIndex":{"!type":"string","!doc":"<p>The name of the field in the grid's <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>'s <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a> definition from\nwhich to draw the column's value. <strong>Required.</strong></p>\n"},"draggable":{"!type":"bool","!doc":"<p>False to disable drag-drop reordering of this column.</p>\n"},"hideable":{"!type":"bool","!doc":"<p>False to prevent the user from hiding this column.</p>\n"},"lockable":{"!type":"bool","!doc":"<p>May not be moved from its preferred locked side when grid is enableLocking:true</p>\n"},"menuDisabled":{"!type":"bool","!doc":"<p>True to disable the column header menu containing sort/hide options.</p>\n"},"resizable":{"!type":"bool","!doc":"<p>private</p>\n"},"tdCls":{"!type":"string","!doc":"<p>A CSS class names to apply to the table cells for this column.</p>\n"},"text":{"!type":"string","!doc":"<p>Any valid text or HTML fragment to display in the header cell for the row number column.</p>\n"},"width":{"!type":"number","!doc":"<p>The default width in pixels of the row number column.</p>\n"},"autoLock":{"!type":"bool","!doc":"<p>Flag to Lockable to move instances of this column to the locked side.</p>\n"},"innerCls":{"!type":"string"},"rowspan":{"!type":"?"},"renderer":{"!type":"fn(value: ?, metaData: ?, record: ?, rowIdx: ?, colIdx: ?, store: ?) -> !this","!doc":"<p>private</p>\n"}}},"Template":{"!doc":"<p>A Column definition class which renders a value by processing a <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Model</a>'s\n<a href=\"#!/api/Ext.data.Model-cfg-persistenceProperty\" rel=\"Ext.data.Model-cfg-persistenceProperty\" class=\"docClass\">data</a> using a <a href=\"#!/api/Ext.grid.column.Template-cfg-tpl\" rel=\"Ext.grid.column.Template-cfg-tpl\" class=\"docClass\">configured</a>\n<a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a>.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    storeId:'employeeStore',\n    fields:['firstname', 'lastname', 'seniority', 'department'],\n    groupField: 'department',\n    data:[\n        { firstname: \"Michael\", lastname: \"Scott\",   seniority: 7, department: \"Management\" },\n        { firstname: \"Dwight\",  lastname: \"Schrute\", seniority: 2, department: \"Sales\" },\n        { firstname: \"Jim\",     lastname: \"Halpert\", seniority: 3, department: \"Sales\" },\n        { firstname: \"Kevin\",   lastname: \"Malone\",  seniority: 4, department: \"Accounting\" },\n        { firstname: \"Angela\",  lastname: \"Martin\",  seniority: 5, department: \"Accounting\" }\n    ]\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Ext.grid.Panel</a>', {\n    title: 'Column Template Demo',\n    store: <a href=\"#!/api/Ext.data.StoreManager-method-lookup\" rel=\"Ext.data.StoreManager-method-lookup\" class=\"docClass\">Ext.data.StoreManager.lookup</a>('employeeStore'),\n    columns: [\n        { text: 'Full Name',       xtype: 'templatecolumn', tpl: '{firstname} {lastname}', flex:1 },\n        { text: 'Department (Yrs)', xtype: 'templatecolumn', tpl: '{department} ({seniority})' }\n    ],\n    height: 200,\n    width: 300,\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_grid_column_Template_cfg)","prototype":{"!proto":"Ext.grid.column.Column.prototype","tpl":{"!type":"string|+Ext.XTemplate","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a>, or an XTemplate <em>definition string</em> to use to process a\n<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Model</a>'s <a href=\"#!/api/Ext.data.Model-cfg-persistenceProperty\" rel=\"Ext.data.Model-cfg-persistenceProperty\" class=\"docClass\">data</a> to produce a\ncolumn's rendered value.</p>\n"},"defaultRenderer":{"!type":"fn(value: ?, meta: ?, record: ?) -> !this","!doc":"<p>When defined this will take precedence over the <a href=\"#!/api/Ext.grid.column.Column-cfg-renderer\" rel=\"Ext.grid.column.Column-cfg-renderer\" class=\"docClass\">renderer</a> config.\nThis is meant to be defined in subclasses that wish to supply their own renderer.</p>\n"}}}},"feature":{"AbstractSummary":{"!doc":"<p>A small abstract class that contains the shared behaviour for any summary\ncalculations to be used in the grid.</p>\n","!type":"fn(config: Ext_grid_feature_AbstractSummary_cfg)","prototype":{"!proto":"Ext.grid.feature.Feature.prototype","remoteRoot":{"!type":"string","!doc":"<p>The name of the property which contains the Array of summary objects.\nIt allows to use server-side calculated summaries.</p>\n"},"showSummaryRow":{"!type":"bool","!doc":"<p>True to show the summary row.</p>\n"},"summaryRowCls":{"!type":"string"},"summaryRowSelector":{"!type":"string"},"summaryRowTpl":{"!type":"?","!doc":"<p>High priority rowTpl interceptor which sees summary rows early, and renders them correctly and then aborts the row rendering chain.\nThis will only see action when summary rows are being updated and Table.onUpdate->Table.bufferRender renders the individual updated sumary row.</p>\n"},"summaryTableCls":{"!type":"?"},"generateSummaryData":{"!type":"fn() -> ?","!doc":"<p>Used by the Grouping Feature when <a href=\"#!/api/Ext.grid.feature.AbstractSummary-cfg-showSummaryRow\" rel=\"Ext.grid.feature.AbstractSummary-cfg-showSummaryRow\" class=\"docClass\">showSummaryRow</a> is <code>true</code>.</p>\n\n<p>Generates group summary data for the whole store.</p>\n"},"getSummary":{"!type":"fn(store: +Ext.data.Store, type: string|fn(), field: string, group: bool) -> number|string|?","!doc":"<p>Get the summary data for a field.</p>\n"},"init":{"!type":"fn() -> !this","!doc":"<p>Listen for store updates. Eg, from an Editor.</p>\n"},"outputSummaryRecord":{"!type":"fn(summaryRecord: ?, contextValues: ?, out: ?) -> !this"},"populateRecord":{"!type":"fn(group: ?) -> !this"},"populateRemoteRecord":{"!type":"fn(group: ?, data: ?) -> !this"},"toggleSummaryRow":{"!type":"fn(visible: bool) -> !this","!doc":"<p>Toggle whether or not to show the summary row.</p>\n"}}},"Feature":{"!doc":"<p>A feature is a type of plugin that is specific to the <a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Ext.grid.Panel</a>. It provides several\nhooks that allows the developer to inject additional functionality at certain points throughout the\ngrid creation cycle. This class provides the base template methods that are available to the developer,\nit should be extended.</p>\n\n<p>There are several built in features that extend this class, for example:</p>\n\n<ul>\n<li><a href=\"#!/api/Ext.grid.feature.Grouping\" rel=\"Ext.grid.feature.Grouping\" class=\"docClass\">Ext.grid.feature.Grouping</a> - Shows grid rows in groups as specified by the <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a></li>\n<li><a href=\"#!/api/Ext.grid.feature.RowBody\" rel=\"Ext.grid.feature.RowBody\" class=\"docClass\">Ext.grid.feature.RowBody</a> - Adds a body section for each grid row that can contain markup.</li>\n<li><a href=\"#!/api/Ext.grid.feature.Summary\" rel=\"Ext.grid.feature.Summary\" class=\"docClass\">Ext.grid.feature.Summary</a> - Adds a summary row at the bottom of the grid with aggregate totals for a column.</li>\n</ul>\n\n\n<h2>Using Features</h2>\n\n<p>A feature is added to the grid by specifying it an array of features in the configuration:</p>\n\n<pre><code>var groupingFeature = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.feature.Grouping\" rel=\"Ext.grid.feature.Grouping\" class=\"docClass\">Ext.grid.feature.Grouping</a>');\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Ext.grid.Panel</a>', {\n    // other options\n    features: [groupingFeature]\n});\n</code></pre>\n\n<h2>Writing Features</h2>\n\n<p>A Feature may add new DOM structure within the structure of a grid.</p>\n\n<p>A grid is essentially a <code>&lt;table&gt;</code> element. A <a href=\"#!/api/Ext.view.Table\" rel=\"Ext.view.Table\" class=\"docClass\">TableView</a> instance uses three <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplates</a>\nto render the grid, <code>tableTpl</code>, <code>rowTpl</code>, <code>cellTpl</code>.</p>\n\n<ul>\n<li>A <a href=\"#!/api/Ext.view.Table\" rel=\"Ext.view.Table\" class=\"docClass\">TableView</a> uses its <code>tableTpl</code> to emit the <code>&lt;table&gt;</code> and <code>&lt;tbody&gt;</code> HTML tags into its output stream. It also emits a <code>&lt;thead&gt;</code> which contains a\nsizing row. To ender the rows, it invokes <a href=\"#!/api/Ext.view.Table-method-renderRows\" rel=\"Ext.view.Table-method-renderRows\" class=\"docClass\">Ext.view.Table.renderRows</a> passing the <code>rows</code> member of its data object.</li>\n</ul>\n\n\n<p>The <code>tableTpl</code>'s data object Looks like this:\n    {\n        view: owningTableView,\n        rows: recordsToRender,\n        viewStartIndex: indexOfFirstRecordInStore,\n        tableStyle: styleString\n    }</p>\n\n<ul>\n<li>A <a href=\"#!/api/Ext.view.Table\" rel=\"Ext.view.Table\" class=\"docClass\">TableView</a> uses its <code>rowTpl</code> to emit a <code>&lt;tr&gt;</code> HTML tag to its output stream. To render cells,\nit invokes <a href=\"#!/api/Ext.view.Table-method-renderCell\" rel=\"Ext.view.Table-method-renderCell\" class=\"docClass\">Ext.view.Table.renderCell</a> passing the <code>rows</code> member of its data object.</li>\n</ul>\n\n\n<p>The <code>rowTpl</code>'s data object looks like this:</p>\n\n<pre><code>{\n    view:        owningTableView,\n    record:      recordToRender,\n    recordIndex: indexOfRecordInStore,\n    columns:     arrayOfColumnDefinitions,\n    itemClasses: arrayOfClassNames, // For outermost row in case of wrapping\n    rowClasses:  arrayOfClassNames,  // For internal data bearing row in case of wrapping\n    rowStyle:    styleString\n}\n</code></pre>\n\n<ul>\n<li>A <a href=\"#!/api/Ext.view.Table\" rel=\"Ext.view.Table\" class=\"docClass\">TableView</a> uses its <code>cellTpl</code> to emit a <code>&lt;td&gt;</code> HTML tag to its output stream.</li>\n</ul>\n\n\n<p>The <code>cellTpl's</code> data object looks like this:</p>\n\n<pre><code>{\n    record: recordToRender\n    column: columnToRender;\n    recordIndex: indexOfRecordInStore,\n    columnIndex: columnIndex,\n    align: columnAlign,\n    tdCls: classForCell\n}\n</code></pre>\n\n<p>A Feature may inject its own tableTpl or rowTpl or cellTpl into the <a href=\"#!/api/Ext.view.Table\" rel=\"Ext.view.Table\" class=\"docClass\">TableView</a>'s rendering by\ncalling <a href=\"#!/api/Ext.view.Table-method-addTableTpl\" rel=\"Ext.view.Table-method-addTableTpl\" class=\"docClass\">Ext.view.Table.addTableTpl</a> or <a href=\"#!/api/Ext.view.Table-method-addRowTpl\" rel=\"Ext.view.Table-method-addRowTpl\" class=\"docClass\">Ext.view.Table.addRowTpl</a> or <a href=\"#!/api/Ext.view.Table-method-addCellTpl\" rel=\"Ext.view.Table-method-addCellTpl\" class=\"docClass\">Ext.view.Table.addCellTpl</a>.</p>\n\n<p>The passed XTemplate is added <em>upstream</em> of the default template for the table element in a link list of XTemplates which contribute\nto the element's HTML. It may emit appropriate HTML strings into the output stream <em>around</em> a call to</p>\n\n<pre><code>this.nextTpl.apply(values, out, parent);\n</code></pre>\n\n<p>This passes the current value context, output stream and the parent value context to the next XTemplate in the list.</p>\n","!type":"fn(config: Ext_grid_feature_Feature_cfg)","prototype":{"!proto":"Ext.util.Observable.prototype","disabled":{"!type":"bool","!doc":"<p>True when feature is disabled.</p>\n"},"eventPrefix":{"!type":"string","!doc":"<p>Prefix to use when firing events on the view.\nFor example a prefix of group would expose \"groupclick\", \"groupcontextmenu\", \"groupdblclick\".</p>\n"},"eventSelector":{"!type":"string","!doc":"<p>Selector used to determine when to fire the event with the eventPrefix.</p>\n"},"grid":{"!type":"+Ext.grid.Panel","!doc":"<p>Reference to the grid panel</p>\n"},"hasFeatureEvent":{"!type":"bool","!doc":"<p>Most features will expose additional events, some may not and will\nneed to change this to false.</p>\n"},"isFeature":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated Feature, or subclass thereof.</p>\n"},"view":{"!type":"+Ext.view.Table","!doc":"<p>Reference to the TableView.</p>\n"},"wrapsItem":{"!type":"bool"},"clone":{"!type":"fn() -> !this"},"destroy":{"!type":"fn() -> !this"},"disable":{"!type":"fn() -> !this","!doc":"<p>Disables the feature.</p>\n"},"enable":{"!type":"fn() -> !this","!doc":"<p>Enables the feature.</p>\n"},"getFireEventArgs":{"!type":"fn(eventName: ?, view: ?, featureTarget: ?, e: ?) -> !this","!doc":"<p>Abstract method to be overriden when a feature should add additional\narguments to its event signature. By default the event will fire:</p>\n\n<ul>\n<li>view - The underlying <a href=\"#!/api/Ext.view.Table\" rel=\"Ext.view.Table\" class=\"docClass\">Ext.view.Table</a></li>\n<li>featureTarget - The matched element by the defined <a href=\"#!/api/Ext.grid.feature.Feature-property-eventSelector\" rel=\"Ext.grid.feature.Feature-property-eventSelector\" class=\"docClass\">eventSelector</a></li>\n</ul>\n\n\n<p>The method must also return the eventName as the first index of the array\nto be passed to fireEvent.</p>\n"},"init":{"!type":"fn() -> !this"},"vetoEvent":{"!type":"fn() -> !this"}}},"GroupStore":{"!doc":"<p>Private record store class which takes the place of the view's data store to provide a grouped\nview of the data when the Grouping feature is used.</p>\n\n<p>Relays granular mutation events from the underlying store as refresh events to the view.</p>\n\n<p>On mutation events from the underlying store, updates the summary rows by firing update events on the corresponding\nsummary records.</p>\n","!type":"fn(groupingFeature: ?, store: ?)","prototype":{"!proto":"Ext.util.Observable.prototype","isStore":{"!type":"bool"},"bindStore":{"!type":"fn(store: ?) -> !this"},"collapseGroup":{"!type":"fn(group: ?) -> !this"},"expandGroup":{"!type":"fn(group: ?) -> !this"},"getAt":{"!type":"fn(index: ?) -> !this"},"getById":{"!type":"fn(id: ?) -> !this"},"getCount":{"!type":"fn() -> !this"},"getGroupPlaceholder":{"!type":"fn(group: ?) -> !this"},"getRange":{"!type":"fn(start: ?, end: ?, options: ?) -> !this"},"getTotalCount":{"!type":"fn() -> !this"},"indexOf":{"!type":"fn(record: ?, viewOnly: ?, includeCollapsed: ?) -> !this","!doc":"<p>Find index of record in group store.\nIf it's in a collapsed group, then it's -1, not present\nOtherwise, loop through groups keeping tally of intervening records.</p>\n"},"indexOfTotal":{"!type":"fn(record: +Ext.data.Model) -> number","!doc":"<p>Get the index within the entire dataset. From 0 to the totalCount.</p>\n\n<p>Like <a href=\"#!/api/Ext.grid.feature.GroupStore-method-indexOf\" rel=\"Ext.grid.feature.GroupStore-method-indexOf\" class=\"docClass\">indexOf</a>, this method is effected by filtering.</p>\n"},"isCollapsed":{"!type":"fn(name: ?) -> !this"},"isInCollapsedGroup":{"!type":"fn(record: ?) -> !this"},"onAdd":{"!type":"fn(store: ?, records: ?, startIndex: ?) -> !this"},"onBulkRemove":{"!type":"fn(store: ?, records: ?, indices: ?) -> !this"},"onClear":{"!type":"fn(store: ?, records: ?, startIndex: ?) -> !this"},"onRefresh":{"!type":"fn(store: ?) -> !this"},"onUpdate":{"!type":"fn(store: ?, record: ?, operation: ?, modifiedFieldNames: ?) -> !this"},"processStore":{"!type":"fn(store: ?) -> !this"},"rangeCached":{"!type":"fn(start: ?, end: ?) -> !this","!doc":"<p>This class is only created for fully loaded, non-buffered stores</p>\n"}}},"Grouping":{"!doc":"<p>This feature allows to display the grid rows aggregated into groups as specified by the <a href=\"#!/api/Ext.data.Store-cfg-groupers\" rel=\"Ext.data.Store-cfg-groupers\" class=\"docClass\">Ext.data.Store.groupers</a>\nspecified on the Store. The group will show the title for the group name and then the appropriate records for the group\nunderneath. The groups can also be expanded and collapsed.</p>\n\n<h2>Extra Events</h2>\n\n<p>This feature adds several extra events that will be fired on the grid to interact with the groups:</p>\n\n<ul>\n<li><a href=\"#!/api/Ext.grid.feature.Grouping-event-groupclick\" rel=\"Ext.grid.feature.Grouping-event-groupclick\" class=\"docClass\">groupclick</a></li>\n<li><a href=\"#!/api/Ext.grid.feature.Grouping-event-groupdblclick\" rel=\"Ext.grid.feature.Grouping-event-groupdblclick\" class=\"docClass\">groupdblclick</a></li>\n<li><a href=\"#!/api/Ext.grid.feature.Grouping-event-groupcontextmenu\" rel=\"Ext.grid.feature.Grouping-event-groupcontextmenu\" class=\"docClass\">groupcontextmenu</a></li>\n<li><a href=\"#!/api/Ext.grid.feature.Grouping-event-groupexpand\" rel=\"Ext.grid.feature.Grouping-event-groupexpand\" class=\"docClass\">groupexpand</a></li>\n<li><a href=\"#!/api/Ext.grid.feature.Grouping-event-groupcollapse\" rel=\"Ext.grid.feature.Grouping-event-groupcollapse\" class=\"docClass\">groupcollapse</a></li>\n</ul>\n\n\n<h2>Menu Augmentation</h2>\n\n<p>This feature adds extra options to the grid column menu to provide the user with functionality to modify the grouping.\nThis can be disabled by setting the <a href=\"#!/api/Ext.grid.feature.Grouping-cfg-enableGroupingMenu\" rel=\"Ext.grid.feature.Grouping-cfg-enableGroupingMenu\" class=\"docClass\">enableGroupingMenu</a> option. The option to disallow grouping from being turned off\nby the user is <a href=\"#!/api/Ext.grid.feature.Grouping-cfg-enableNoGroups\" rel=\"Ext.grid.feature.Grouping-cfg-enableNoGroups\" class=\"docClass\">enableNoGroups</a>.</p>\n\n<h2>Controlling Group Text</h2>\n\n<p>The <a href=\"#!/api/Ext.grid.feature.Grouping-cfg-groupHeaderTpl\" rel=\"Ext.grid.feature.Grouping-cfg-groupHeaderTpl\" class=\"docClass\">groupHeaderTpl</a> is used to control the rendered title for each group. It can modified to customized\nthe default display.</p>\n\n<h2>Example Usage</h2>\n\n<pre class='inline-example '><code>var store = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    storeId:'employeeStore',\n    fields:['name', 'seniority', 'department'],\n    groupField: 'department',\n    data: {'employees':[\n        { \"name\": \"Michael Scott\",  \"seniority\": 7, \"department\": \"Management\" },\n        { \"name\": \"Dwight Schrute\", \"seniority\": 2, \"department\": \"Sales\" },\n        { \"name\": \"Jim Halpert\",    \"seniority\": 3, \"department\": \"Sales\" },\n        { \"name\": \"Kevin Malone\",   \"seniority\": 4, \"department\": \"Accounting\" },\n        { \"name\": \"Angela Martin\",  \"seniority\": 5, \"department\": \"Accounting\" }\n    ]},\n    proxy: {\n        type: 'memory',\n        reader: {\n            type: 'json',\n            root: 'employees'\n        }\n    }\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Ext.grid.Panel</a>', {\n    title: 'Employees',\n    store: <a href=\"#!/api/Ext.data.StoreManager-method-lookup\" rel=\"Ext.data.StoreManager-method-lookup\" class=\"docClass\">Ext.data.StoreManager.lookup</a>('employeeStore'),\n    columns: [\n        { text: 'Name',     dataIndex: 'name' },\n        { text: 'Seniority', dataIndex: 'seniority' }\n    ],\n    features: [{ftype:'grouping'}],\n    width: 200,\n    height: 275,\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n\n<p><strong>Note:</strong> To use grouping with a grid that has <a href=\"#!/api/Ext.grid.column.Column-cfg-locked\" rel=\"Ext.grid.column.Column-cfg-locked\" class=\"docClass\">locked columns</a>, you need to supply\nthe grouping feature as a config object - so the grid can create two instances of the grouping feature.</p>\n","!type":"fn()","prototype":{"!proto":"Ext.grid.feature.Feature.prototype","collapsible":{"!type":"bool","!doc":"<p>Set to <code>false</code> to disable collapsing groups from the UI.</p>\n\n<p>This is set to <code>false</code> when the associated <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">store</a> is\n<a href=\"#!/api/Ext.data.Store-cfg-buffered\" rel=\"Ext.data.Store-cfg-buffered\" class=\"docClass\">buffered</a>.</p>\n"},"depthToIndent":{"!type":"number","!doc":"<p>Number of pixels to indent per grouping level</p>\n"},"enableGroupingMenu":{"!type":"bool","!doc":"<p>True to enable the grouping control in the header menu.</p>\n"},"enableNoGroups":{"!type":"bool","!doc":"<p>True to allow the user to turn off grouping.</p>\n"},"groupByText":{"!type":"string","!doc":"<p>Text displayed in the grid header menu for grouping by header.</p>\n"},"groupHeaderTpl":{"!type":"string|[?]|+Ext.Template","!doc":"<p>A string Template snippet, an array of strings (optionally followed by an object containing Template methods) to be used to construct a Template, or a Template instance.</p>\n\n<ul>\n<li><p>Example 1 (Template snippet):</p>\n\n<pre><code>groupHeaderTpl: 'Group: {name}'\n</code></pre></li>\n<li><p>Example 2 (Array):</p>\n\n<pre><code>groupHeaderTpl: [\n    'Group: ',\n    '&lt;div&gt;{name:this.formatName}&lt;/div&gt;',\n    {\n        formatName: function(name) {\n            return <a href=\"#!/api/Ext.String-method-trim\" rel=\"Ext.String-method-trim\" class=\"docClass\">Ext.String.trim</a>(name);\n        }\n    }\n]\n</code></pre></li>\n<li><p>Example 3 (Template Instance):</p>\n\n<pre><code>groupHeaderTpl: <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">Ext.XTemplate</a>',\n    'Group: ',\n    '&lt;div&gt;{name:this.formatName}&lt;/div&gt;',\n    {\n        formatName: function(name) {\n            return <a href=\"#!/api/Ext.String-method-trim\" rel=\"Ext.String-method-trim\" class=\"docClass\">Ext.String.trim</a>(name);\n        }\n    }\n)\n</code></pre></li>\n</ul>\n\n"},"hideGroupedHeader":{"!type":"bool","!doc":"<p>True to hide the header that is currently grouped.</p>\n"},"showGroupsText":{"!type":"string","!doc":"<p>Text displayed in the grid header for enabling/disabling grouping.</p>\n"},"showSummaryRow":{"!type":"bool","!doc":"<p></p>\n"},"startCollapsed":{"!type":"bool","!doc":"<p>True to start all groups collapsed.</p>\n"},"collapseTip":{"!type":"string","!doc":"<p><locale></locale></p>\n"},"collapsedCls":{"!type":"string"},"collapsibleCls":{"!type":"string"},"ctCls":{"!type":"string"},"eventPrefix":{"!type":"string","!doc":"<p>Prefix to use when firing events on the view.\nFor example a prefix of group would expose \"groupclick\", \"groupcontextmenu\", \"groupdblclick\".</p>\n"},"eventSelector":{"!type":"string","!doc":"<p>Selector used to determine when to fire the event with the eventPrefix.</p>\n"},"expandTip":{"!type":"string","!doc":"<p><locale></locale></p>\n"},"groupCls":{"!type":"string"},"groupInfo":{"!type":"?"},"groupTpl":{"!type":"?"},"hdCollapsedCls":{"!type":"string"},"hdNotCollapsibleCls":{"!type":"string"},"refreshData":{"!type":"?"},"tableTpl":{"!type":"?"},"wrapsItem":{"!type":"bool"},"afterCollapseExpand":{"!type":"fn(collapsed: ?, groupName: ?, focus: ?) -> !this"},"afterViewRender":{"!type":"fn() -> !this","!doc":"<p>Attach events to view</p>\n"},"block":{"!type":"fn(fromPartner: ?) -> !this"},"cleanup":{"!type":"fn(rows: ?, rowValues: ?) -> !this"},"clearGroupCache":{"!type":"fn() -> !this"},"collapse":{"!type":"fn(groupName: string, focus: bool) -> !this","!doc":"<p>Collapse a group</p>\n"},"collapseAll":{"!type":"fn() -> !this","!doc":"<p>Collapse all groups</p>\n"},"createGroupCls":{"!type":"fn(group: ?) -> !this"},"createGroupId":{"!type":"fn(group: ?) -> !this"},"destroy":{"!type":"fn() -> !this"},"disable":{"!type":"fn() -> !this","!doc":"<p>Disables the feature.</p>\n"},"doCollapseExpand":{"!type":"fn(collapsed: ?, groupName: ?, focus: ?) -> !this"},"enable":{"!type":"fn() -> !this","!doc":"<p>Enables the feature.</p>\n"},"expand":{"!type":"fn(groupName: string, focus: bool) -> !this","!doc":"<p>Expand a group</p>\n"},"expandAll":{"!type":"fn() -> !this","!doc":"<p>Expand all groups</p>\n"},"getFireEventArgs":{"!type":"fn(type: ?, view: ?, targetEl: ?, e: ?) -> !this","!doc":"<p>Abstract method to be overriden when a feature should add additional\narguments to its event signature. By default the event will fire:</p>\n\n<ul>\n<li>view - The underlying <a href=\"#!/api/Ext.view.Table\" rel=\"Ext.view.Table\" class=\"docClass\">Ext.view.Table</a></li>\n<li>featureTarget - The matched element by the defined <a href=\"#!/api/Ext.grid.feature.Grouping-property-eventSelector\" rel=\"Ext.grid.feature.Grouping-property-eventSelector\" class=\"docClass\">eventSelector</a></li>\n</ul>\n\n\n<p>The method must also return the eventName as the first index of the array\nto be passed to fireEvent.</p>\n"},"getGroup":{"!type":"fn(name: ?) -> !this"},"getGroupField":{"!type":"fn() -> !this"},"getGroupName":{"!type":"fn(element: ?) -> !this"},"getGroupedHeader":{"!type":"fn(groupField: ?) -> !this"},"getHeaderNode":{"!type":"fn(groupName: ?) -> !this"},"getMenuItem":{"!type":"fn(dataIndex: ?) -> +Ext.grid.header.Container","!doc":"<p>Gets the related menu item for a dataIndex</p>\n"},"getMenuItems":{"!type":"fn() -> !this"},"getRecordGroup":{"!type":"fn(record: +Ext.data.Model) -> ?","!doc":"<p>Returns the group data object for the group to which the passed record belongs <strong>if the Store is grouped</strong>.</p>\n"},"init":{"!type":"fn(grid: ?) -> !this","!doc":"<p>Listen for store updates. Eg, from an Editor.</p>\n"},"injectGroupingMenu":{"!type":"fn() -> !this"},"isAllCollapsed":{"!type":"fn() -> !this","!doc":"<p>private\nReturns true if all groups are collapsed</p>\n"},"isAllExpanded":{"!type":"fn() -> !this","!doc":"<p>private\nReturns true if all groups are expanded</p>\n"},"isExpanded":{"!type":"fn(groupName: string) -> bool","!doc":"<p>Returns <code>true</code> if the named group is expanded.</p>\n"},"onColumnHideShow":{"!type":"fn(headerOwnerCt: ?, header: ?) -> !this"},"onColumnMove":{"!type":"fn() -> !this","!doc":"<p>Update first and last records in groups when column moves\nBecause of the RowWrap template, this will update the groups' headers and footers</p>\n"},"onGroupChange":{"!type":"fn() -> !this"},"onGroupClick":{"!type":"fn(view: ?, rowElement: ?, groupName: ?, e: ?) -> !this","!doc":"<p>Toggle between expanded/collapsed state when clicking on\nthe group.</p>\n"},"onGroupKey":{"!type":"fn(keyCode: ?, event: ?) -> !this"},"onGroupMenuItemClick":{"!type":"fn(menuItem: ?, e: ?) -> !this","!doc":"<p>Group by the header the user has clicked on.</p>\n"},"onGroupToggleMenuItemClick":{"!type":"fn(menuItem: ?, checked: ?) -> !this","!doc":"<p>Turn on and off grouping via the menu</p>\n"},"onReconfigure":{"!type":"fn(grid: ?, store: ?, columns: ?, oldStore: ?, oldColumns: ?) -> !this"},"pruneGroupedHeader":{"!type":"fn() -> !this","!doc":"<p>Prunes the grouped header from the header container</p>\n"},"refreshIf":{"!type":"fn() -> !this"},"setup":{"!type":"fn(rows: ?, rowValues: ?) -> !this"},"setupRowData":{"!type":"fn(record: ?, idx: ?, rowValues: ?) -> !this"},"showMenuBy":{"!type":"fn(t: ?, header: ?) -> !this"},"unblock":{"!type":"fn(fromPartner: ?) -> !this"},"vetoEvent":{"!type":"fn(record: ?, row: ?, rowIndex: ?, e: ?) -> !this"},"groupclick":{"!type":"fn(view: +Ext.view.Table, node: +HTMLElement, group: string, e: +Ext.EventObject, eOpts: ?)"},"groupcollapse":{"!type":"fn(view: +Ext.view.Table, node: +HTMLElement, group: string, eOpts: ?)"},"groupcontextmenu":{"!type":"fn(view: +Ext.view.Table, node: +HTMLElement, group: string, e: +Ext.EventObject, eOpts: ?)"},"groupdblclick":{"!type":"fn(view: +Ext.view.Table, node: +HTMLElement, group: string, e: +Ext.EventObject, eOpts: ?)"},"groupexpand":{"!type":"fn(view: +Ext.view.Table, node: +HTMLElement, group: string, eOpts: ?)"}}},"GroupingSummary":{"!doc":"<p>This feature adds an aggregate summary row at the bottom of each group that is provided\nby the <a href=\"#!/api/Ext.grid.feature.Grouping\" rel=\"Ext.grid.feature.Grouping\" class=\"docClass\">Ext.grid.feature.Grouping</a> feature. There are two aspects to the summary:</p>\n\n<h2>Calculation</h2>\n\n<p>The summary value needs to be calculated for each column in the grid. This is controlled\nby the summaryType option specified on the column. There are several built in summary types,\nwhich can be specified as a string on the column configuration. These call underlying methods\non the store:</p>\n\n<ul>\n<li><a href=\"#!/api/Ext.data.Store-method-count\" rel=\"Ext.data.Store-method-count\" class=\"docClass\">count</a></li>\n<li><a href=\"#!/api/Ext.data.Store-method-sum\" rel=\"Ext.data.Store-method-sum\" class=\"docClass\">sum</a></li>\n<li><a href=\"#!/api/Ext.data.Store-method-min\" rel=\"Ext.data.Store-method-min\" class=\"docClass\">min</a></li>\n<li><a href=\"#!/api/Ext.data.Store-method-max\" rel=\"Ext.data.Store-method-max\" class=\"docClass\">max</a></li>\n<li><a href=\"#!/api/Ext.data.Store-method-average\" rel=\"Ext.data.Store-method-average\" class=\"docClass\">average</a></li>\n</ul>\n\n\n<p>Alternatively, the summaryType can be a function definition. If this is the case,\nthe function is called with an array of records to calculate the summary value.</p>\n\n<h2>Rendering</h2>\n\n<p>Similar to a column, the summary also supports a summaryRenderer function. This\nsummaryRenderer is called before displaying a value. The function is optional, if\nnot specified the default calculated value is shown. The summaryRenderer is called with:</p>\n\n<ul>\n<li>value {Object} - The calculated value.</li>\n<li>summaryData {Object} - Contains all raw summary values for the row.</li>\n<li>field {String} - The name of the field we are calculating</li>\n</ul>\n\n\n<h2>Example Usage</h2>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('TestResult', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['student', 'subject', {\n        name: 'mark',\n        type: 'int'\n    }]\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Ext.grid.Panel</a>', {\n    width: 200,\n    height: 240,\n    renderTo: document.body,\n    features: [{\n        groupHeaderTpl: 'Subject: {name}',\n        ftype: 'groupingsummary'\n    }],\n    store: {\n        model: 'TestResult',\n        groupField: 'subject',\n        data: [{\n            student: 'Student 1',\n            subject: 'Math',\n            mark: 84\n        },{\n            student: 'Student 1',\n            subject: 'Science',\n            mark: 72\n        },{\n            student: 'Student 2',\n            subject: 'Math',\n            mark: 96\n        },{\n            student: 'Student 2',\n            subject: 'Science',\n            mark: 68\n        }]\n    },\n    columns: [{\n        dataIndex: 'student',\n        text: 'Name',\n        summaryType: 'count',\n        summaryRenderer: function(value){\n            return <a href=\"#!/api/Ext.String-method-format\" rel=\"Ext.String-method-format\" class=\"docClass\">Ext.String.format</a>('{0} student{1}', value, value !== 1 ? 's' : '');\n        }\n    }, {\n        dataIndex: 'mark',\n        text: 'Mark',\n        summaryType: 'average'\n    }]\n});\n</code></pre>\n","!type":"fn()","prototype":{"!proto":"Ext.grid.feature.Grouping.prototype","showSummaryRow":{"!type":"bool","!doc":"<p>True to show the summary row.</p>\n"},"vetoEvent":{"!type":"fn(record: ?, row: ?, rowIndex: ?, e: ?) -> !this"}}},"RowBody":{"!doc":"<p>The rowbody feature enhances the grid's markup to have an additional\ntr -> td -> div which spans the entire width of the original row.</p>\n\n<p>This is useful to to associate additional information with a particular\nrecord in a grid.</p>\n\n<p>Rowbodies are initially hidden unless you override setupRowData.</p>\n\n<p>Will expose additional events on the gridview with the prefix of 'rowbody'.\nFor example: 'rowbodyclick', 'rowbodydblclick', 'rowbodycontextmenu'.</p>\n\n<h1>Example</h1>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Animal', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['name', 'latin', 'desc']\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Ext.grid.Panel</a>', {\n    width: 400,\n    height: 300,\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    store: {\n        model: 'Animal',\n        data: [\n            {name: 'Tiger', latin: 'Panthera tigris',\n             desc: 'The largest cat species, weighing up to 306 kg (670 lb).'},\n            {name: 'Roman snail', latin: 'Helix pomatia',\n             desc: 'A species of large, edible, air-breathing land snail.'},\n            {name: 'Yellow-winged darter', latin: 'Sympetrum flaveolum',\n             desc: 'A dragonfly found in Europe and mid and Northern China.'},\n            {name: 'Superb Fairy-wren', latin: 'Malurus cyaneus',\n             desc: 'Common and familiar across south-eastern Australia.'}\n        ]\n    },\n    columns: [{\n        dataIndex: 'name',\n        text: 'Common name',\n        width: 125\n    }, {\n        dataIndex: 'latin',\n        text: 'Scientific name',\n        flex: 1\n    }],\n    features: [{\n        ftype: 'rowbody',\n        setupRowData: function(record, rowIndex, rowValues) {\n            var headerCt = this.view.headerCt,\n                colspan = headerCt.getColumnCount();\n            // Usually you would style the my-body-class in CSS file\n            return {\n                rowBody: '&lt;div style=\"padding: 1em\"&gt;'+record.get(\"desc\")+'&lt;/div&gt;',\n                rowBodyCls: \"my-body-class\",\n                rowBodyColspan: colspan\n            };\n        }\n    }]\n});\n</code></pre>\n","!type":"fn(config: Ext_grid_feature_RowBody_cfg)","prototype":{"!proto":"Ext.grid.feature.Feature.prototype","eventPrefix":{"!type":"string","!doc":"<p>Prefix to use when firing events on the view.\nFor example a prefix of group would expose \"groupclick\", \"groupcontextmenu\", \"groupdblclick\".</p>\n"},"eventSelector":{"!type":"string","!doc":"<p>Selector used to determine when to fire the event with the eventPrefix.</p>\n"},"extraRowTpl":{"!type":"?"},"rowBodyCls":{"!type":"string"},"rowBodyHiddenCls":{"!type":"string"},"rowBodyTdSelector":{"!type":"string"},"tableTpl":{"!type":"?"},"cleanup":{"!type":"fn(rows: ?, rowValues: ?) -> !this"},"getAdditionalData":{"!type":"fn(data: ?, idx: number, record: +Ext.data.Model, orig: ?)","!doc":"<p>Provides additional data to the prepareData call within the grid view.\nThe rowbody feature adds 3 additional variables into the grid view's template.\nThese are rowBodyCls, rowBodyColspan, and rowBody.</p>\n"},"getSelectedRow":{"!type":"fn(view: ?, rowIndex: ?) -> !this"},"init":{"!type":"fn(grid: ?) -> !this"},"onColumnsChanged":{"!type":"fn(headerCt: ?) -> !this","!doc":"<p>When columns added/removed, keep row body colspan in sync with number of columns.</p>\n"},"onMouseDown":{"!type":"fn(e: ?) -> !this","!doc":"<p>Needed when not used inside a RowWrap to select the data row when mousedown on the body row.</p>\n"},"onStoreRemove":{"!type":"fn(store: ?, model: ?, index: ?) -> !this"},"setup":{"!type":"fn(rows: ?, rowValues: ?) -> !this"}}},"RowWrap":{"!type":"fn(config: Ext_grid_feature_RowWrap_cfg)","prototype":{"!proto":"Ext.grid.feature.Feature.prototype","hasFeatureEvent":{"!type":"bool","!doc":"<p>turn off feature events.</p>\n"},"rowWrapTd":{"!type":"string"},"tableTpl":{"!type":"?"},"wrapTpl":{"!type":"[?]"},"init":{"!type":"fn(grid: ?) -> !this"},"onColumnHideShow":{"!type":"fn() -> !this","!doc":"<p>Keep row wtap colspan in sync with number of <em>visible</em> columns.</p>\n"}}},"Summary":{"!doc":"<p>This feature is used to place a summary row at the bottom of the grid. If using a grouping,\nsee <a href=\"#!/api/Ext.grid.feature.GroupingSummary\" rel=\"Ext.grid.feature.GroupingSummary\" class=\"docClass\">Ext.grid.feature.GroupingSummary</a>. There are 2 aspects to calculating the summaries,\ncalculation and rendering.</p>\n\n<h2>Calculation</h2>\n\n<p>The summary value needs to be calculated for each column in the grid. This is controlled\nby the summaryType option specified on the column. There are several built in summary types,\nwhich can be specified as a string on the column configuration. These call underlying methods\non the store:</p>\n\n<ul>\n<li><a href=\"#!/api/Ext.data.Store-method-count\" rel=\"Ext.data.Store-method-count\" class=\"docClass\">count</a></li>\n<li><a href=\"#!/api/Ext.data.Store-method-sum\" rel=\"Ext.data.Store-method-sum\" class=\"docClass\">sum</a></li>\n<li><a href=\"#!/api/Ext.data.Store-method-min\" rel=\"Ext.data.Store-method-min\" class=\"docClass\">min</a></li>\n<li><a href=\"#!/api/Ext.data.Store-method-max\" rel=\"Ext.data.Store-method-max\" class=\"docClass\">max</a></li>\n<li><a href=\"#!/api/Ext.data.Store-method-average\" rel=\"Ext.data.Store-method-average\" class=\"docClass\">average</a></li>\n</ul>\n\n\n<p>Alternatively, the summaryType can be a function definition. If this is the case,\nthe function is called with an array of records to calculate the summary value.</p>\n\n<h2>Rendering</h2>\n\n<p>Similar to a column, the summary also supports a summaryRenderer function. This\nsummaryRenderer is called before displaying a value. The function is optional, if\nnot specified the default calculated value is shown. The summaryRenderer is called with:</p>\n\n<ul>\n<li>value {Object} - The calculated value.</li>\n<li>summaryData {Object} - Contains all raw summary values for the row.</li>\n<li>field {String} - The name of the field we are calculating</li>\n</ul>\n\n\n<h2>Example Usage</h2>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('TestResult', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: ['student', {\n        name: 'mark',\n        type: 'int'\n    }]\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Ext.grid.Panel</a>', {\n    width: 400,\n    height: 200,\n    title: 'Summary Test',\n    style: 'padding: 20px',\n    renderTo: document.body,\n    features: [{\n        ftype: 'summary'\n    }],\n    store: {\n        model: 'TestResult',\n        data: [{\n            student: 'Student 1',\n            mark: 84\n        },{\n            student: 'Student 2',\n            mark: 72\n        },{\n            student: 'Student 3',\n            mark: 96\n        },{\n            student: 'Student 4',\n            mark: 68\n        }]\n    },\n    columns: [{\n        dataIndex: 'student',\n        text: 'Name',\n        summaryType: 'count',\n        summaryRenderer: function(value, summaryData, dataIndex) {\n            return <a href=\"#!/api/Ext.String-method-format\" rel=\"Ext.String-method-format\" class=\"docClass\">Ext.String.format</a>('{0} student{1}', value, value !== 1 ? 's' : ''); \n        }\n    }, {\n        dataIndex: 'mark',\n        text: 'Mark',\n        summaryType: 'average'\n    }]\n});\n</code></pre>\n","!type":"fn(config: Ext_grid_feature_Summary_cfg)","prototype":{"!proto":"Ext.grid.feature.AbstractSummary.prototype","dock":{"!type":"string","!doc":"<p>Configure <code>'top'</code> or <code>'bottom'</code> top create a fixed summary row either above or below the scrollable table.</p>\n"},"dockedSummaryCls":{"!type":"string"},"panelBodyCls":{"!type":"string"},"createSummaryRecord":{"!type":"fn(view: ?) -> !this"},"init":{"!type":"fn(grid: ?) -> !this","!doc":"<p>Listen for store updates. Eg, from an Editor.</p>\n"},"onColumnHeaderLayout":{"!type":"fn() -> !this","!doc":"<p>Synchronize column widths in the docked summary Component</p>\n"},"onStoreUpdate":{"!type":"fn() -> !this"},"onViewScroll":{"!type":"fn() -> !this"},"renderTFoot":{"!type":"fn(values: ?, out: ?) -> !this"},"vetoEvent":{"!type":"fn(record: ?, row: ?, rowIndex: ?, e: ?) -> !this"}}}},"header":{"Container":{"!doc":"<p>Container which holds headers and is docked at the top or bottom of a TablePanel.\nThe HeaderContainer drives resizing/moving/hiding of columns within the TableView.\nAs headers are hidden, moved or resized the headercontainer is responsible for\ntriggering changes within the view.</p>\n","!type":"fn(config: +Ext.Element|string|Ext_grid_header_Container_cfg)","prototype":{"!proto":"Ext.container.Container.prototype","baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this component's element. This will also be prepended to elements within this\ncomponent like Panel's body will get a class <code>x-panel-body</code>. This means that if you create a subclass of Panel, and\nyou want it to get all the Panels styling for the element and the body, you leave the <code>baseCls</code> <code>x-panel</code> and use\n<code>componentCls</code> to add specific styling for this component.</p>\n"},"border":{"!type":"number|string|bool","!doc":"<p>Specifies the border size for this component. The border can be a single numeric value to apply to all sides or it can\nbe a CSS style specification for each style, for example: '10 5 3 10' (top, right, bottom, left).</p>\n\n<p>For components that have no border by default, setting this won't make the border appear by itself.\nYou also need to specify border color and style:</p>\n\n<pre><code>border: 5,\nstyle: {\n    borderColor: 'red',\n    borderStyle: 'solid'\n}\n</code></pre>\n\n<p>To turn off the border, use <code>border: false</code>.</p>\n"},"defaultType":{"!type":"string","!doc":"<p>The default <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">xtype</a> of child Components to create in this Container when\na child item is specified as a raw configuration object, rather than as an instantiated Component.</p>\n"},"defaultWidth":{"!type":"number","!doc":"<p>Width of the header if no width or flex is specified.</p>\n"},"detachOnRemove":{"!type":"bool","!doc":"<p>True to move any component to the <a href=\"#!/api/Ext-method-getDetachedBody\" rel=\"Ext-method-getDetachedBody\" class=\"docClass\">detachedBody</a> when the component is\nremoved from this container. This option is only applicable when the component is not destroyed while\nbeing removed, see <a href=\"#!/api/Ext.grid.header.Container-cfg-autoDestroy\" rel=\"Ext.grid.header.Container-cfg-autoDestroy\" class=\"docClass\">autoDestroy</a> and <a href=\"#!/api/Ext.grid.header.Container-method-remove\" rel=\"Ext.grid.header.Container-method-remove\" class=\"docClass\">remove</a>. If this option is set to false, the DOM\nof the component will remain in the current place until it is explicitly moved.</p>\n"},"enableColumnHide":{"!type":"bool","!doc":"<p>False to disable column hiding within this grid.</p>\n"},"sealed":{"!type":"bool","!doc":"<p>Specify as <code>true</code> to constrain column dragging so that a column cannot be dragged into or out of this column.</p>\n\n<p><strong>Note that this config is only valid for column headers which contain child column headers, eg:</strong>\n    {\n        sealed: true\n        text: 'ExtJS',\n        columns: [{\n            text: '3.0.4',\n            dataIndex: 'ext304'\n        }, {\n            text: '4.1.0',\n            dataIndex: 'ext410'\n        }\n    }</p>\n"},"sortable":{"!type":"bool","!doc":"<p>Provides the default sortable state for all Headers within this HeaderContainer.\nAlso turns on or off the menus in the HeaderContainer. Note that the menu is\nshared across every header and therefore turning it off will remove the menu\nitems for every header.</p>\n"},"weight":{"!type":"number","!doc":"<p>HeaderContainer overrides the default weight of 0 for all docked items to 100.\nThis is so that it has more priority over things like toolbars.</p>\n"},"columnsText":{"!type":"string","!doc":"<p>\n<locale></locale></p>\n"},"ddLock":{"!type":"bool"},"dock":{"!type":"string"},"dragging":{"!type":"bool"},"headerOpenCls":{"!type":"string","!doc":"<p></p>\n"},"isGroupHeader":{"!type":"bool","!doc":"<p>True if this HeaderContainer is in fact a group header which contains sub headers.</p>\n"},"menuColsIcon":{"!type":"string"},"menuSortAscCls":{"!type":"string"},"menuSortDescCls":{"!type":"string"},"sortAscText":{"!type":"string","!doc":"<p><locale></locale></p>\n"},"sortClearText":{"!type":"string","!doc":"<p>\n<locale></locale></p>\n"},"sortDescText":{"!type":"string","!doc":"<p>\n<locale></locale></p>\n"},"triStateSort":{"!type":"bool","!doc":"<p>private; will probably be removed by 4.0</p>\n"},"applyColumnsState":{"!type":"fn(columns: ?) -> !this"},"applyDefaults":{"!type":"fn(config: ?) -> !this"},"autoSizeColumn":{"!type":"fn(header: ?) -> !this"},"clearOtherSortStates":{"!type":"fn(activeHeader: ?) -> !this","!doc":"<p>invoked internally by a header when not using triStateSorting</p>\n"},"getColumnCount":{"!type":"fn() -> !this","!doc":"<p>Returns the number of <b>grid columns</b> descended from this HeaderContainer.\nGroup Columns are HeaderContainers. All grid columns are returned, including hidden ones.</p>\n"},"getColumnMenu":{"!type":"fn(headerContainer: ?) -> !this","!doc":"<p>Returns an array of menu CheckItems corresponding to all immediate children\nof the passed Container which have been configured as hideable.</p>\n"},"getColumnsState":{"!type":"fn() -> !this"},"getFullWidth":{"!type":"fn() -> !this","!doc":"<p>Gets the full width of all columns that are visible.</p>\n"},"getGridColumns":{"!type":"fn(inResult: ?, hiddenAncestor: ?) -> [?]","!doc":"<p>Returns an array of all columns which appear in the grid's View. This goes down to the leaf column header\nlevel, and does not return <strong>grouped</strong> headers which contain sub headers.</p>\n\n<p>It includes hidden headers even though they are not rendered. This is for collection of menu items for the column hide/show menu.</p>\n\n<p>Headers which have a hidden ancestor have a <code>hiddenAncestor: true</code> property injected so that they can also be rendered at zero width without interrogating\nthat header's ownerCt axis for a hidden ancestor.</p>\n"},"getHeaderAtIndex":{"!type":"fn(index: number) -> !this","!doc":"<p>Get a leaf level header by index regardless of what the nesting\nstructure is.</p>\n"},"getHeaderIndex":{"!type":"fn(header: +Ext.grid.column.Column) -> number","!doc":"<p>Returns the index of a leaf level header regardless of what the nesting\nstructure is.</p>\n\n<p>If a group header is passed, the index of the first leaf level header within it is returned.</p>\n"},"getHeaderMenu":{"!type":"fn() -> !this"},"getHideableColumns":{"!type":"fn() -> !this","!doc":"<p>For use by column headers in determining whether there are any hideable columns when deciding whether or not\nthe header menu should be disabled.</p>\n"},"getMenu":{"!type":"fn() -> !this","!doc":"<p>Gets the menu (and will create it if it doesn't already exist)</p>\n"},"getMenuItemForHeader":{"!type":"fn(menu: ?, header: ?) -> !this"},"getMenuItems":{"!type":"fn() -> [?]","!doc":"<p>Returns an array of menu items to be placed into the shared menu\nacross all headers in this header container.</p>\n"},"getOwnerHeaderCt":{"!type":"fn() -> !this","!doc":"<p>Find the topmost HeaderContainer</p>\n"},"getVisibleGridColumns":{"!type":"fn() -> [?]","!doc":"<p>Returns an array of the <strong>visible</strong> columns in the grid. This goes down to the lowest column header\nlevel, and does not return <strong>grouped</strong> headers which contain sub headers.</p>\n"},"getVisibleHeaderClosestToIndex":{"!type":"fn(index: number) -> !this","!doc":"<p>When passed a column index, returns the closet <em>visible</em> column to that. If the column at the passed index is visible,\nthat is returned. If it is hidden, either the next visible, or the previous visible column is returned.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>The initComponent template method is an important initialization step for a Component. It is intended to be\nimplemented by each subclass of <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> to provide any needed constructor logic. The\ninitComponent method of the class being created is called first, with each initComponent method\nup the hierarchy to <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> being called thereafter. This makes it easy to implement and,\nif needed, override the constructor logic of the Component at any step in the hierarchy.</p>\n\n<p>The initComponent method <strong>must</strong> contain a call to <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a> in order\nto ensure that the parent class' initComponent method is also called.</p>\n\n<p>All config options passed to the constructor are applied to <code>this</code> before initComponent is called,\nso you can simply access them with <code>this.someOption</code>.</p>\n\n<p>The following example demonstrates using a dynamic string for the text of a button at the time of\ninstantiation of the class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('DynamicButtonText', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n\n    initComponent: function() {\n        this.text = new Date();\n        this.renderTo = <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>();\n        this.callParent();\n    }\n});\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function() {\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('DynamicButtonText');\n});\n</code></pre>\n"},"isLayoutRoot":{"!type":"fn() -> !this","!doc":"<p>Determines whether this Component is the root of a layout. This returns <code>true</code> if\nthis component can run its layout without assistance from or impact on its owner.\nIf this component cannot run its layout given these restrictions, <code>false</code> is returned\nand its owner will be considered as the next candidate for the layout root.</p>\n\n<p>Setting the <a href=\"#!/api/Ext.grid.header.Container-property-_isLayoutRoot\" rel=\"Ext.grid.header.Container-property-_isLayoutRoot\" class=\"docClass\">_isLayoutRoot</a> property to <code>true</code> causes this method to always\nreturn <code>true</code>. This may be useful when updating a layout of a Container which shrink\nwraps content, and you know that it will not change size, and so can safely be the\ntopmost participant in the layout run.</p>\n"},"moveHeader":{"!type":"fn(fromIdx: ?, toIdx: ?) -> !this"},"onAdd":{"!type":"fn(c: ?) -> !this","!doc":"<p>Invalidate column cache on add\nWe cannot refresh the View on every add because this method is called\nwhen the HeaderDropZone moves Headers around, that will also refresh the view</p>\n"},"onColumnCheckChange":{"!type":"fn(checkItem: ?, checked: ?) -> !this"},"onColumnsChanged":{"!type":"fn() -> !this","!doc":"<p>Private\nCalled whenever a column is added or removed or moved.\nEnsures that the gridColumns caches are cleared.</p>\n"},"onDestroy":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the destroy operation.\nAfter calling the superclass's onDestroy, the Component will be destroyed.</p>\n"},"onHeaderClick":{"!type":"fn(header: ?, e: ?, t: ?) -> !this"},"onHeaderContextMenu":{"!type":"fn(header: ?, e: ?, t: ?) -> !this"},"onHeaderHide":{"!type":"fn(header: ?) -> !this"},"onHeaderMoved":{"!type":"fn(header: ?, colsToMove: ?, fromIdx: ?, toIdx: ?) -> !this"},"onHeaderResize":{"!type":"fn(header: ?, w: ?, suppressFocus: ?) -> !this"},"onHeaderShow":{"!type":"fn(header: ?) -> !this"},"onHeaderTriggerClick":{"!type":"fn(header: ?, e: ?, t: ?) -> !this"},"onHeaderVisibilityChange":{"!type":"fn(header: ?, visible: ?) -> !this"},"onMenuHide":{"!type":"fn(menu: ?) -> !this","!doc":"<p>remove the trigger open class when the menu is hidden</p>\n"},"onMove":{"!type":"fn() -> !this"},"onRemove":{"!type":"fn(c: ?) -> !this","!doc":"<p>Invalidate column cache on remove\nWe cannot refresh the View on every remove because this method is called\nwhen the HeaderDropZone moves Headers around, that will also refresh the view</p>\n"},"onShow":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the show operation. After\ncalling the superclass's onShow, the Component will be visible.</p>\n\n<p>Override in subclasses where more complex behaviour is needed.</p>\n\n<p>Gets passed the same parameters as <a href=\"#!/api/Ext.grid.header.Container-method-show\" rel=\"Ext.grid.header.Container-method-show\" class=\"docClass\">show</a>.</p>\n"},"onSortAscClick":{"!type":"fn() -> !this","!doc":"<p>sort asc when clicking on item in menu</p>\n"},"onSortDescClick":{"!type":"fn() -> !this","!doc":"<p>sort desc when clicking on item in menu</p>\n"},"purgeCache":{"!type":"fn() -> !this"},"setSortState":{"!type":"fn() -> !this"},"showMenuBy":{"!type":"fn(t: ?, header: ?) -> !this"},"tempLock":{"!type":"fn() -> !this","!doc":"<p>Temporarily lock the headerCt. This makes it so that clicking on headers\ndon't trigger actions like sorting or opening of the header menu. This is\ndone because extraneous events may be fired on the headers after interacting\nwith a drag drop operation.</p>\n"},"updateMenuDisabledState":{"!type":"fn(menu: ?) -> !this"},"columnhide":{"!type":"fn(ct: +Ext.grid.header.Container, column: +Ext.grid.column.Column, eOpts: ?)"},"columnmove":{"!type":"fn(ct: +Ext.grid.header.Container, column: +Ext.grid.column.Column, fromIdx: number, toIdx: number, eOpts: ?)"},"columnresize":{"!type":"fn(ct: +Ext.grid.header.Container, column: +Ext.grid.column.Column, width: number, eOpts: ?)"},"columnschanged":{"!type":"fn(ct: +Ext.grid.header.Container, eOpts: ?)","!doc":"<p>Fired after the columns change in any way, when a column has been hidden or shown, or when a column\nis added to or removed from this header container.</p>\n"},"columnshow":{"!type":"fn(ct: +Ext.grid.header.Container, column: +Ext.grid.column.Column, eOpts: ?)"},"headerclick":{"!type":"fn(ct: +Ext.grid.header.Container, column: +Ext.grid.column.Column, e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)"},"headercontextmenu":{"!type":"fn(ct: +Ext.grid.header.Container, column: +Ext.grid.column.Column, e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)"},"headertriggerclick":{"!type":"fn(ct: +Ext.grid.header.Container, column: +Ext.grid.column.Column, e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)"},"menucreate":{"!type":"fn(ct: +Ext.grid.header.Container, menu: +Ext.menu.Menu, eOpts: ?)","!doc":"<p>Fired immediately after the column header menu is created.</p>\n"},"sortchange":{"!type":"fn(ct: +Ext.grid.header.Container, column: +Ext.grid.column.Column, direction: string, eOpts: ?)"}}},"DragZone":{"!type":"fn(headerCt: ?)","prototype":{"!proto":"Ext.dd.DragZone.prototype","colHeaderSelector":{"!type":"string"},"colInnerSelector":{"!type":"string"},"maxProxyWidth":{"!type":"number"},"afterRepair":{"!type":"fn() -> !this"},"disable":{"!type":"fn() -> !this"},"enable":{"!type":"fn() -> !this"},"getDDGroup":{"!type":"fn() -> !this"},"getDragData":{"!type":"fn(e: ?) -> ?","!doc":"<p>Called when a mousedown occurs in this container. Looks in <a href=\"#!/api/Ext.dd.Registry\" rel=\"Ext.dd.Registry\" class=\"docClass\">Ext.dd.Registry</a> for a valid target to drag\nbased on the mouse down. Override this method to provide your own lookup logic (e.g. finding a child by class\nname). Make sure your returned object has a \"ddel\" attribute (with an HTML Element) for other functions to work.</p>\n"},"getRepairXY":{"!type":"fn() -> [number]","!doc":"<p>Called before a repair of an invalid drop to get the XY to animate to. By default returns the XY of\nthis.dragData.ddel</p>\n"},"onBeforeDrag":{"!type":"fn() -> bool","!doc":"<p>An empty function by default, but provided so that you can perform a custom action before the initial\ndrag event begins and optionally cancel it.</p>\n"},"onDragDrop":{"!type":"fn() -> !this","!doc":"<p>Abstract method called when this item is dropped on another DragDrop\nobj</p>\n"},"onInitDrag":{"!type":"fn() -> bool","!doc":"<p>Called once drag threshold has been reached to initialize the proxy element. By default, it clones the\nthis.dragData.ddel</p>\n"}}},"DropZone":{"!type":"fn(headerCt: ?)","prototype":{"!proto":"Ext.dd.DropZone.prototype","colHeaderCls":{"!type":"string"},"proxyOffsets":{"!type":"?"},"getBottomIndicator":{"!type":"fn() -> !this"},"getDDGroup":{"!type":"fn() -> !this"},"getLocation":{"!type":"fn(e: ?, t: ?) -> !this"},"getTargetFromEvent":{"!type":"fn(e: ?) -> ?","!doc":"<p>Returns a custom data object associated with the DOM node that is the target of the event.  By default\nthis looks up the event target in the <a href=\"#!/api/Ext.dd.Registry\" rel=\"Ext.dd.Registry\" class=\"docClass\">Ext.dd.Registry</a>, although you can override this method to\nprovide your own custom lookup.</p>\n"},"getTopIndicator":{"!type":"fn() -> !this"},"hideIndicators":{"!type":"fn() -> !this"},"invalidateDrop":{"!type":"fn() -> !this"},"onNodeDrop":{"!type":"fn(node: ?, dragZone: ?, e: ?, data: ?) -> bool","!doc":"<p>Called when the DropZone determines that a <a href=\"#!/api/Ext.dd.DragSource\" rel=\"Ext.dd.DragSource\" class=\"docClass\">Ext.dd.DragSource</a> has been dropped onto\nthe drop node.  The default implementation returns false, so it should be overridden to provide the\nappropriate processing of the drop event and return true so that the drag source's repair action does not run.</p>\n"},"onNodeOut":{"!type":"fn() -> !this","!doc":"<p>Called when the DropZone determines that a <a href=\"#!/api/Ext.dd.DragSource\" rel=\"Ext.dd.DragSource\" class=\"docClass\">Ext.dd.DragSource</a> has been dragged out of\nthe drop node without dropping.  This method has no default implementation and should be overridden to provide\nnode-specific processing if necessary.</p>\n"},"onNodeOver":{"!type":"fn(node: ?, dragZone: ?, e: ?, data: ?) -> string","!doc":"<p>Called while the DropZone determines that a <a href=\"#!/api/Ext.dd.DragSource\" rel=\"Ext.dd.DragSource\" class=\"docClass\">Ext.dd.DragSource</a> is over a drop node\nthat has either been registered or detected by a configured implementation of <a href=\"#!/api/Ext.grid.header.DropZone-method-getTargetFromEvent\" rel=\"Ext.grid.header.DropZone-method-getTargetFromEvent\" class=\"docClass\">getTargetFromEvent</a>.\nThe default implementation returns this.dropAllowed, so it should be\noverridden to provide the proper feedback.</p>\n"},"positionIndicator":{"!type":"fn(data: ?, node: ?, e: ?) -> !this"}}}},"locking":{"HeaderContainer":{"!doc":"<p>Private class which acts as a HeaderContainer for the Lockable which aggregates all columns\nfrom both sides of the Loackable. It is never rendered, it's just used to interrogate the\ncolumn collection.</p>\n","!type":"fn(lockable: ?)","prototype":{"!proto":"Ext.grid.header.Container.prototype","applyColumnsState":{"!type":"fn(columns: ?) -> !this","!doc":"<p>Lockable uses its headerCt to apply column state</p>\n"},"getColumnsState":{"!type":"fn() -> !this","!doc":"<p>Lockable uses its headerCt to gather column state</p>\n"},"getGridColumns":{"!type":"fn() -> [?]","!doc":"<p>This is the function which all other column access methods are based upon\nReturn the full column set for the whole Lockable assembly</p>\n"},"getRefItems":{"!type":"fn() -> !this","!doc":"<p>Used by <a href=\"#!/api/Ext.ComponentQuery\" rel=\"Ext.ComponentQuery\" class=\"docClass\">ComponentQuery</a>, <a href=\"#!/api/Ext.grid.locking.HeaderContainer-method-child\" rel=\"Ext.grid.locking.HeaderContainer-method-child\" class=\"docClass\">child</a> and <a href=\"#!/api/Ext.grid.locking.HeaderContainer-method-down\" rel=\"Ext.grid.locking.HeaderContainer-method-down\" class=\"docClass\">down</a> to retrieve all of the items\nwhich can potentially be considered a child of this Container.</p>\n\n<p>This may be overriden by Components which have ownership of Components\nthat are not contained in the <a href=\"#!/api/Ext.grid.locking.HeaderContainer-property-items\" rel=\"Ext.grid.locking.HeaderContainer-property-items\" class=\"docClass\">items</a> collection.</p>\n\n<p>NOTE: IMPORTANT note for maintainers:\nItems are returned in tree traversal order. Each item is appended to the result array\nfollowed by the results of that child's getRefItems call.\nFloating child items are appended after internal child items.</p>\n"}}},"Lockable":{"!doc":"<p>Lockable is a private mixin which injects lockable behavior into any\nTablePanel subclass such as GridPanel or TreePanel. TablePanel will\nautomatically inject the <a href=\"#!/api/Ext.grid.locking.Lockable\" rel=\"Ext.grid.locking.Lockable\" class=\"docClass\">Ext.grid.locking.Lockable</a> mixin in when one of the\nthese conditions are met:</p>\n\n<ul>\n<li>The TablePanel has the lockable configuration set to true</li>\n<li>One of the columns in the TablePanel has locked set to true/false</li>\n</ul>\n\n\n<p>Each TablePanel subclass must register an alias. It should have an array\nof configurations to copy to the 2 separate tablepanel's that will be generated\nto note what configurations should be copied. These are named normalCfgCopy and\nlockedCfgCopy respectively.</p>\n\n<p>Columns which are locked must specify a fixed width. They do NOT support a\nflex width.</p>\n\n<p>Configurations which are specified in this class will be available on any grid or\ntree which is using the lockable functionality.</p>\n","prototype":{"lockedGridConfig":{"!type":"?","!doc":"<p>Any special configuration options for the locked part of the grid</p>\n"},"lockedViewConfig":{"!type":"?","!doc":"<p>A view configuration to be applied to the\nlocked side of the grid. Any conflicting configurations between lockedViewConfig\nand viewConfig will be overwritten by the lockedViewConfig.</p>\n"},"normalGridConfig":{"!type":"?","!doc":"<p>Any special configuration options for the normal part of the grid</p>\n"},"normalViewConfig":{"!type":"?","!doc":"<p>A view configuration to be applied to the\nnormal/unlocked side of the grid. Any conflicting configurations between normalViewConfig\nand viewConfig will be overwritten by the normalViewConfig.</p>\n"},"scrollDelta":{"!type":"number","!doc":"<p>Number of pixels to scroll when scrolling the locked section with mousewheel.</p>\n"},"subGridXType":{"!type":"string","!doc":"<p>The xtype of the subgrid to specify. If this is\nnot specified lockable will determine the subgrid xtype to create by the\nfollowing rule. Use the superclasses xtype if the superclass is NOT\ntablepanel, otherwise use the xtype itself.</p>\n"},"syncRowHeight":{"!type":"bool","!doc":"<p>Synchronize rowHeight between the normal and\nlocked grid view. This is turned on by default. If your grid is guaranteed\nto have rows of all the same height, you should set this to false to\noptimize performance.</p>\n"},"bothCfgCopy":{"!type":"[?]","!doc":"<p>Required for the Lockable Mixin. These are the configurations which will be copied to the\nnormal and locked sub tablepanels</p>\n"},"lockText":{"!type":"string","!doc":"<p>\n<locale></locale></p>\n"},"lockedCfgCopy":{"!type":"[?]"},"normalCfgCopy":{"!type":"[?]"},"unlockText":{"!type":"string","!doc":"<p>i8n text\n<locale></locale></p>\n"},"afterLockedViewLayout":{"!type":"fn() -> !this","!doc":"<p>Due to automatic component border setting using inline style, to create the scrollbar-replacing\nbottom border, we have to postprocess the locked view <em>after</em> render.\nIf there are visible normal columns, we do need the fat bottom border.</p>\n"},"constructLockableFeatures":{"!type":"fn() -> !this"},"constructLockablePlugins":{"!type":"fn() -> !this"},"destroyLockable":{"!type":"fn() -> !this"},"determineXTypeToCreate":{"!type":"fn(lockedSide: ?) -> !this"},"getColumnWidth":{"!type":"fn(column: ?) -> !this","!doc":"<p>Used when calculating total locked column width in processColumns\nUse shrinkwrapping of child columns if no top level width.</p>\n"},"getLockingViewConfig":{"!type":"fn() -> !this"},"getMenuItems":{"!type":"fn(getMenuItems: ?, locked: ?) -> !this"},"injectLockable":{"!type":"fn() -> !this","!doc":"<p>injectLockable will be invoked before initComponent's parent class implementation\nis called, so throughout this method this. are configurations</p>\n"},"lock":{"!type":"fn(header?: +Ext.grid.column.Column, toIdx?: number) -> !this","!doc":"<p>Locks the activeHeader as determined by which menu is open OR a header\nas specified.</p>\n"},"modifyHeaderCt":{"!type":"fn() -> !this","!doc":"<p>inject Lock and Unlock text\nHide/show Lock/Unlock options</p>\n"},"onLockMenuClick":{"!type":"fn() -> !this"},"onLockedHeaderAdd":{"!type":"fn() -> !this"},"onLockedHeaderHide":{"!type":"fn() -> !this"},"onLockedHeaderResize":{"!type":"fn() -> !this"},"onLockedHeaderShow":{"!type":"fn() -> !this"},"onLockedHeaderSortChange":{"!type":"fn(headerCt: ?, header: ?, sortState: ?) -> !this"},"onLockedViewMouseWheel":{"!type":"fn(e: ?) -> !this","!doc":"<p>Listen for mousewheel events on the locked section which does not scroll.\nScroll it in response, and the other section will automatically sync.</p>\n"},"onLockedViewScroll":{"!type":"fn() -> !this"},"onNormalHeaderSortChange":{"!type":"fn(headerCt: ?, header: ?, sortState: ?) -> !this"},"onNormalViewScroll":{"!type":"fn() -> !this"},"onUnlockMenuClick":{"!type":"fn() -> !this"},"processColumns":{"!type":"fn(columns: ?) -> !this"},"reconfigureLockable":{"!type":"fn(store: ?, columns: ?) -> !this","!doc":"<p>we want to totally override the reconfigure behaviour here, since we're creating 2 sub-grids</p>\n"},"showMenuBy":{"!type":"fn(t: ?, header: ?) -> !this"},"syncLockedWidth":{"!type":"fn() -> bool","!doc":"<p>Updates the overall view after columns have been resized, or moved from\nthe locked to unlocked side or vice-versa.</p>\n\n<p>If all columns are removed from either side, that side must be hidden, and the\nsole remaining column owning grid then becomes <em>the</em> grid. It must flex to occupy the\nwhole of the locking view. And it must also allow scrolling.</p>\n\n<p>If columns are shared between the two sides, the <em>locked</em> grid shrinkwraps the\nwidth of the visible locked columns while the normal grid flexes in what space remains.</p>\n"},"syncRowHeights":{"!type":"fn() -> !this","!doc":"<p>Synchronizes the row heights between the locked and non locked portion of the grid for each\nrow. If one row is smaller than the other, the height will be increased to match the larger one.</p>\n"},"unlock":{"!type":"fn(header?: +Ext.grid.column.Column, toIdx?: number) -> !this","!doc":"<p>Unlocks the activeHeader as determined by which menu is open OR a header\nas specified.</p>\n"},"filterchange":{"!type":"fn(store: +Ext.data.Store, filters: [+Ext.util.Filter], eOpts: ?)","!doc":"<p>Fired whenever the filter set changes.</p>\n"},"lockcolumn":{"!type":"fn(this: +Ext.grid.Panel, column: +Ext.grid.column.Column, eOpts: ?)","!doc":"<p>Fires when a column is locked.</p>\n"},"processcolumns":{"!type":"fn(lockedColumns: [+Ext.grid.column.Column], normalColumns: [+Ext.grid.column.Column], eOpts: ?)","!doc":"<p>Fires when the configured (or <strong>reconfigured</strong>) column set is split into two depending on the <a href=\"#!/api/Ext.grid.column.Column-cfg-locked\" rel=\"Ext.grid.column.Column-cfg-locked\" class=\"docClass\">locked</a> flag.</p>\n"},"unlockcolumn":{"!type":"fn(this: +Ext.grid.Panel, column: +Ext.grid.column.Column, eOpts: ?)","!doc":"<p>Fires when a column is unlocked.</p>\n"}}},"View":{"!doc":"<p>This class is used internally to provide a single interface when using\na locking grid. Internally, the locking grid creates two separate grids,\nso this class is used to map calls appropriately.</p>\n","!type":"fn(config: Ext_grid_locking_View_cfg)","prototype":{"!proto":"Ext.Base.prototype","eventRelayRe":{"!type":"+RegExp"},"isLockingView":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated LockingView, or subclass thereof.</p>\n"},"addElListener":{"!type":"fn(eventName: ?, fn: ?, scope: ?) -> !this"},"addRowCls":{"!type":"fn() -> !this"},"bindStore":{"!type":"fn() -> !this"},"destroy":{"!type":"fn() -> !this"},"focus":{"!type":"fn() -> !this"},"focusCell":{"!type":"fn(position: ?) -> !this"},"focusRow":{"!type":"fn(row: ?) -> !this"},"getCell":{"!type":"fn(record: ?, column: ?) -> !this"},"getEl":{"!type":"fn(column: ?) -> !this"},"getGridColumns":{"!type":"fn() -> !this"},"getNode":{"!type":"fn(nodeInfo: ?, dataRow: ?) -> !this"},"getRecord":{"!type":"fn(node: ?) -> !this"},"getSelectionModel":{"!type":"fn() -> !this"},"getStore":{"!type":"fn() -> !this"},"getViewForColumn":{"!type":"fn(column: ?) -> !this"},"indexOf":{"!type":"fn(record: ?) -> !this"},"isVisible":{"!type":"fn(deep: ?) -> !this"},"onItemMouseEnter":{"!type":"fn(view: ?, record: ?) -> !this"},"onItemMouseLeave":{"!type":"fn(view: ?, record: ?) -> !this"},"onPanelRender":{"!type":"fn() -> !this"},"refresh":{"!type":"fn() -> !this"},"refreshNode":{"!type":"fn() -> !this"},"relayFn":{"!type":"fn(name: ?, args: ?) -> !this"},"removeRowCls":{"!type":"fn() -> !this"},"scrollBy":{"!type":"fn() -> !this"}}}},"plugin":{"BufferedRenderer":{"!doc":"<p>Implements buffered rendering of a grid, allowing users can scroll\nthrough thousands of records without the performance penalties of\nrenderering all the records on screen at once.</p>\n\n<p>The number of rows rendered outside the visible area, and the\nbuffering of pages of data from the remote server for immediate\nrendering upon scroll can be controlled by configuring the plugin.</p>\n\n<p>You can tell it to create a larger table to provide more scrolling\nbefore new rows need to be added to the leading edge of the table.</p>\n\n<pre><code>var myStore = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    // ...\n    pageSize: 100,\n    // ...\n});\n\nvar grid = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Ext.grid.Panel</a>', {\n    // ...\n    autoLoad: true,\n    plugins: {\n        ptype: 'bufferedrenderer',\n        trailingBufferZone: 20,  // Keep 20 rows rendered in the table behind scroll\n        leadingBufferZone: 50   // Keep 50 rows rendered in the table ahead of scroll\n    },\n    // ...\n});\n</code></pre>\n\n<h2>Implementation notes</h2>\n\n<p>This class monitors scrolling of the <a href=\"#!/api/Ext.view.Table\" rel=\"Ext.view.Table\" class=\"docClass\">TableView</a> within a <a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">GridPanel</a> to render a small section of\nthe dataset.</p>\n","!type":"fn(config?: Ext_grid_plugin_BufferedRenderer_cfg)","prototype":{"!proto":"Ext.AbstractPlugin.prototype","leadingBufferZone":{"!type":"number","!doc":"<p>The number of extra rows to render on the leading side of scrolling\n<strong>outside the <a href=\"#!/api/Ext.grid.plugin.BufferedRenderer-cfg-numFromEdge\" rel=\"Ext.grid.plugin.BufferedRenderer-cfg-numFromEdge\" class=\"docClass\">numFromEdge</a></strong> buffer as scrolling proceeds.</p>\n"},"numFromEdge":{"!type":"number","!doc":"<p>The zone which causes new rows to be appended to the view. As soon as the edge\nof the rendered grid is this number of rows from the edge of the viewport, the view is moved.</p>\n"},"percentageFromEdge":{"!type":"number"},"scrollToLoadBuffer":{"!type":"number","!doc":"<p>This is the time in milliseconds to buffer load requests when scrolling the PagingScrollbar.</p>\n"},"synchronousRender":{"!type":"bool","!doc":"<p>By default, on detection of a scroll event which brings the end of the rendered table within\n<code><a href=\"#!/api/Ext.grid.plugin.BufferedRenderer-cfg-numFromEdge\" rel=\"Ext.grid.plugin.BufferedRenderer-cfg-numFromEdge\" class=\"docClass\">numFromEdge</a></code> rows of the grid viewport, if the required rows are available in the Store,\nthe BufferedRenderer will render rows from the Store <em>immediately</em> before returning from the event handler.\nThis setting helps avoid the impression of whitespace appearing during scrolling.</p>\n\n<p>Set this to <code>true</code> to defer the render until the scroll event handler exits. This allows for faster\nscrolling, but also allows whitespace to be more easily scrolled into view.</p>\n"},"trailingBufferZone":{"!type":"number","!doc":"<p>The number of extra rows to render on the trailing side of scrolling\n<strong>outside the <a href=\"#!/api/Ext.grid.plugin.BufferedRenderer-cfg-numFromEdge\" rel=\"Ext.grid.plugin.BufferedRenderer-cfg-numFromEdge\" class=\"docClass\">numFromEdge</a></strong> buffer as scrolling proceeds.</p>\n"},"variableRowHeight":{"!type":"bool","!doc":"<p>Configure as <code>true</code> if the row heights are not all the same height as the first row. Only configure this is needed - this will be if the\nrows contain unpredictably sized data, or you have changed the cell's text overflow stype to <code>'wrap'</code>.</p>\n"},"bodyTop":{"!type":"number"},"lastScrollDirection":{"!type":"number"},"lockableScope":{"!type":"string"},"position":{"!type":"number","!doc":"<p>Current pixel scroll position of the associated <a href=\"#!/api/Ext.view.Table\" rel=\"Ext.view.Table\" class=\"docClass\">View</a>.</p>\n"},"rowHeight":{"!type":"number","!doc":"<p>private. Start at default value</p>\n"},"viewSize":{"!type":"number","!doc":"<p>private. Initial value of zero.</p>\n"},"attemptLoad":{"!type":"fn(start: ?, end: ?) -> !this"},"bindStore":{"!type":"fn(store: ?) -> !this"},"cancelLoad":{"!type":"fn() -> !this"},"destroy":{"!type":"fn() -> !this","!doc":"<p>The destroy method is invoked by the owning Component at the time the Component is being destroyed.</p>\n\n<p>The supplied implementation is empty. Subclasses should perform plugin cleanup in their own implementation of\nthis method.</p>\n"},"doAttemptLoad":{"!type":"fn(start: ?, end: ?) -> !this"},"getFirstVisibleRowIndex":{"!type":"fn(startRow: ?, endRow: ?, viewportTop: ?, viewportBottom: ?) -> !this"},"getLastVisibleRowIndex":{"!type":"fn(startRow: ?, endRow: ?, viewportTop: ?, viewportBottom: ?) -> !this"},"getScrollHeight":{"!type":"fn() -> !this"},"getViewRange":{"!type":"fn() -> !this"},"handleViewScroll":{"!type":"fn(direction: ?) -> !this"},"init":{"!type":"fn(grid: ?) -> !this","!doc":"<p>Initialize this as a plugin</p>\n"},"onRangeFetched":{"!type":"fn(range: ?, start: ?, end: ?, fromLockingPartner: ?) -> !this"},"onReconfigure":{"!type":"fn(grid: ?, store: ?) -> !this"},"onStoreClear":{"!type":"fn() -> !this"},"onViewRefresh":{"!type":"fn() -> !this"},"onViewResize":{"!type":"fn(view: ?, width: ?, height: ?, oldWidth: ?, oldHeight: ?) -> !this"},"onViewScroll":{"!type":"fn(e: ?, t: ?) -> !this"},"renderRange":{"!type":"fn(start: ?, end: ?, forceSynchronous: ?) -> !this"},"scrollTo":{"!type":"fn(recordIdx: number, doSelect: bool, callback: fn(), scope: ?) -> !this","!doc":"<p>Scrolls to and optionlly selects the specified row index <strong>in the total dataset</strong>.</p>\n"},"setBodyTop":{"!type":"fn(bodyTop: ?, calculatedTop: ?) -> !this"},"setViewSize":{"!type":"fn(viewSize: ?) -> !this"},"stretchView":{"!type":"fn(view: ?, scrollRange: ?) -> !this"},"unbindStore":{"!type":"fn() -> !this"}}},"CellEditing":{"!doc":"<p>The <a href=\"#!/api/Ext.grid.plugin.CellEditing\" rel=\"Ext.grid.plugin.CellEditing\" class=\"docClass\">Ext.grid.plugin.CellEditing</a> plugin injects editing at a cell level for a Grid. Only a single\ncell will be editable at a time. The field that will be used for the editor is defined at the\n<a href=\"#!/api/Ext.grid.column.Column-cfg-editor\" rel=\"Ext.grid.column.Column-cfg-editor\" class=\"docClass\">editor</a>. The editor can be a field instance or a field configuration.</p>\n\n<p>If an editor is not specified for a particular column then that cell will not be editable and it will\nbe skipped when activated via the mouse or the keyboard.</p>\n\n<p>The editor may be shared for each column in the grid, or a different one may be specified for each column.\nAn appropriate field type should be chosen to match the data structure that it will be editing. For example,\nto edit a date, it would be useful to specify <a href=\"#!/api/Ext.form.field.Date\" rel=\"Ext.form.field.Date\" class=\"docClass\">Ext.form.field.Date</a> as the editor.</p>\n\n<h2>Example</h2>\n\n<p>A grid with editor for the name and the email columns:</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    storeId:'simpsonsStore',\n    fields:['name', 'email', 'phone'],\n    data:{'items':[\n        {\"name\":\"Lisa\", \"email\":\"lisa@simpsons.com\", \"phone\":\"555-111-1224\"},\n        {\"name\":\"Bart\", \"email\":\"bart@simpsons.com\", \"phone\":\"555-222-1234\"},\n        {\"name\":\"Homer\", \"email\":\"home@simpsons.com\", \"phone\":\"555-222-1244\"},\n        {\"name\":\"Marge\", \"email\":\"marge@simpsons.com\", \"phone\":\"555-222-1254\"}\n    ]},\n    proxy: {\n        type: 'memory',\n        reader: {\n            type: 'json',\n            root: 'items'\n        }\n    }\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Ext.grid.Panel</a>', {\n    title: 'Simpsons',\n    store: <a href=\"#!/api/Ext.data.StoreManager-method-lookup\" rel=\"Ext.data.StoreManager-method-lookup\" class=\"docClass\">Ext.data.StoreManager.lookup</a>('simpsonsStore'),\n    columns: [\n        {header: 'Name',  dataIndex: 'name', editor: 'textfield'},\n        {header: 'Email', dataIndex: 'email', flex:1,\n            editor: {\n                xtype: 'textfield',\n                allowBlank: false\n            }\n        },\n        {header: 'Phone', dataIndex: 'phone'}\n    ],\n    selType: 'cellmodel',\n    plugins: [\n        <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.plugin.CellEditing\" rel=\"Ext.grid.plugin.CellEditing\" class=\"docClass\">Ext.grid.plugin.CellEditing</a>', {\n            clicksToEdit: 1\n        })\n    ],\n    height: 200,\n    width: 400,\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n\n<p>This requires a little explanation. We're passing in <code>store</code> and <code>columns</code> as normal, but\nwe also specify a <a href=\"#!/api/Ext.grid.column.Column-cfg-field\" rel=\"Ext.grid.column.Column-cfg-field\" class=\"docClass\">field</a> on two of our columns. For the\nName column we just want a default textfield to edit the value, so we specify 'textfield'.\nFor the Email column we customized the editor slightly by passing allowBlank: false, which\nwill provide inline validation.</p>\n\n<p>To support cell editing, we also specified that the grid should use the 'cellmodel'\n<a href=\"#!/api/Ext.grid.Panel-cfg-selType\" rel=\"Ext.grid.Panel-cfg-selType\" class=\"docClass\">selType</a>, and created an instance of the CellEditing plugin,\nwhich we configured to activate each editor after a single click.</p>\n","!type":"fn(config: Ext_grid_plugin_CellEditing_cfg)","prototype":{"!proto":"Ext.grid.plugin.Editing.prototype","lockableScope":{"!type":"string"},"cancelActiveEdit":{"!type":"fn(column: ?) -> !this"},"cancelEdit":{"!type":"fn() -> !this","!doc":"<p>Cancels any active editing.</p>\n"},"completeEdit":{"!type":"fn() -> !this","!doc":"<p>Completes the edit if there is an active edit in progress.</p>\n"},"destroy":{"!type":"fn() -> !this","!doc":"<p>AbstractComponent calls destroy on all its plugins at destroy time.</p>\n"},"getActiveColumn":{"!type":"fn() -> !this"},"getActiveEditor":{"!type":"fn() -> !this"},"getActiveRecord":{"!type":"fn() -> !this"},"getCell":{"!type":"fn(record: +Ext.data.Model, column: +Ext.grid.column.Column) -> !this","!doc":"<p>Gets the cell (td) for a particular record and column.</p>\n"},"getEditor":{"!type":"fn(record: ?, column: ?) -> !this"},"initCancelTriggers":{"!type":"fn() -> !this","!doc":"<p>Template method called from base class's initEvents</p>\n"},"isCellEditable":{"!type":"fn(record: ?, columnHeader: ?) -> !this"},"onBodyScroll":{"!type":"fn() -> !this"},"onEditComplete":{"!type":"fn(ed: ?, value: ?, startValue: ?) -> !this"},"onReconfigure":{"!type":"fn(grid: ?, store: ?, columns: ?) -> !this","!doc":"<p>Fires after the grid is reconfigured</p>\n"},"onSpecialKey":{"!type":"fn(ed: ?, field: ?, e: ?) -> !this"},"setActiveColumn":{"!type":"fn(column: ?) -> !this"},"setActiveEditor":{"!type":"fn(ed: ?) -> !this"},"setActiveRecord":{"!type":"fn(record: ?) -> !this"},"setColumnField":{"!type":"fn(column: ?, field: ?) -> !this","!doc":"<p>inherit docs</p>\n"},"setEditingContext":{"!type":"fn(context: ?) -> !this","!doc":"<p>internal getters/setters</p>\n"},"showEditor":{"!type":"fn(ed: ?, context: ?, value: ?) -> !this"},"startEdit":{"!type":"fn(record: +Ext.data.Model|number, columnHeader: +Ext.grid.column.Column|number) -> bool","!doc":"<p>Starts editing the specified record, using the specified Column definition to define which field is being edited.</p>\n"},"startEditByPosition":{"!type":"fn(position: ?) -> !this","!doc":"<p>Starts editing by position (row/column)</p>\n"},"beforeedit":{"!type":"fn(editor: +Ext.grid.plugin.CellEditing, e: ?, eOpts: ?)","!doc":"<p>Fires before cell editing is triggered. Return false from event handler to stop the editing.</p>\n"},"canceledit":{"!type":"fn(editor: +Ext.grid.plugin.CellEditing, e: ?, eOpts: ?)","!doc":"<p>Fires when the user started editing a cell but then cancelled the edit.</p>\n"},"edit":{"!type":"fn(editor: +Ext.grid.plugin.CellEditing, e: ?, eOpts: ?)","!doc":"<p>Fires after a cell is edited. Usage example:</p>\n\n<pre><code>grid.on('edit', function(editor, e) {\n    // commit the changes right after editing finished\n    e.record.commit();\n});\n</code></pre>\n"},"validateedit":{"!type":"fn(editor: +Ext.grid.plugin.CellEditing, e: ?, eOpts: ?)","!doc":"<p>Fires after a cell is edited, but before the value is set in the record. Return false from event handler to\ncancel the change.</p>\n\n<p>Usage example showing how to remove the red triangle (dirty record indicator) from some records (not all). By\nobserving the grid's validateedit event, it can be cancelled if the edit occurs on a targeted row (for\nexample) and then setting the field's new value in the Record directly:</p>\n\n<pre><code>grid.on('validateedit', function(editor, e) {\n  var myTargetRow = 6;\n\n  if (e.row == myTargetRow) {\n    e.cancel = true;\n    e.record.data[e.field] = e.value;\n  }\n});\n</code></pre>\n"}}},"DragDrop":{"!doc":"<p>This plugin provides drag and/or drop functionality for a <a href=\"#!/api/Ext.grid.View\" rel=\"Ext.grid.View\" class=\"docClass\">GridView</a>.</p>\n\n<p>It creates a specialized instance of <a href=\"#!/api/Ext.dd.DragZone\" rel=\"Ext.dd.DragZone\" class=\"docClass\">DragZone</a> which knows how to drag out of a <a href=\"#!/api/Ext.grid.View\" rel=\"Ext.grid.View\" class=\"docClass\">GridView</a> and loads the data object which is passed to a cooperating <a href=\"#!/api/Ext.dd.DragZone\" rel=\"Ext.dd.DragZone\" class=\"docClass\">DragZone</a>'s\nmethods with the following properties:</p>\n\n<ul>\n<li><p><code>copy</code> : Boolean</p>\n\n<p>The value of the <a href=\"#!/api/Ext.grid.View\" rel=\"Ext.grid.View\" class=\"docClass\">GridView</a>'s <code>copy</code> property, or <code>true</code> if the GridView was configured with <code>allowCopy: true</code> <em>and</em>\nthe control key was pressed when the drag operation was begun.</p></li>\n<li><p><code>view</code> : <a href=\"#!/api/Ext.grid.View\" rel=\"Ext.grid.View\" class=\"docClass\">GridView</a></p>\n\n<p>The source GridView from which the drag originated.</p></li>\n<li><p><code>ddel</code> : HtmlElement</p>\n\n<p>The drag proxy element which moves with the mouse</p></li>\n<li><p><code>item</code> : HtmlElement</p>\n\n<p>The GridView node upon which the mousedown event was registered.</p></li>\n<li><p><code>records</code> : Array</p>\n\n<p>An Array of <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Model</a>s representing the selected data being dragged from the source <a href=\"#!/api/Ext.grid.View\" rel=\"Ext.grid.View\" class=\"docClass\">GridView</a>.</p></li>\n</ul>\n\n\n<p>It also creates a specialized instance of <a href=\"#!/api/Ext.dd.DropZone\" rel=\"Ext.dd.DropZone\" class=\"docClass\">Ext.dd.DropZone</a> which cooperates with other DropZones which are\nmembers of the same ddGroup which processes such data objects.</p>\n\n<p>Adding this plugin to a view means that two new events may be fired from the client GridView, <code><a href=\"#!/api/Ext.grid.plugin.DragDrop-event-beforedrop\" rel=\"Ext.grid.plugin.DragDrop-event-beforedrop\" class=\"docClass\">beforedrop</a></code> and <code><a href=\"#!/api/Ext.grid.plugin.DragDrop-event-drop\" rel=\"Ext.grid.plugin.DragDrop-event-drop\" class=\"docClass\">drop</a></code></p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    storeId:'simpsonsStore',\n    fields:['name'],\n    data: [[\"Lisa\"], [\"Bart\"], [\"Homer\"], [\"Marge\"]],\n    proxy: {\n        type: 'memory',\n        reader: 'array'\n    }\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Ext.grid.Panel</a>', {\n    store: 'simpsonsStore',\n    columns: [\n        {header: 'Name',  dataIndex: 'name', flex: true}\n    ],\n    viewConfig: {\n        plugins: {\n            ptype: 'gridviewdragdrop',\n            dragText: 'Drag and drop to reorganize'\n        }\n    },\n    height: 200,\n    width: 400,\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n","!type":"fn(config?: Ext_grid_plugin_DragDrop_cfg)","prototype":{"!proto":"Ext.AbstractPlugin.prototype","containerScroll":{"!type":"?|bool","!doc":"<p><code>true</code> to register this container with the Scrollmanager for auto scrolling during drag operations.\nA <a href=\"#!/api/Ext.dd.ScrollManager\" rel=\"Ext.dd.ScrollManager\" class=\"docClass\">Ext.dd.ScrollManager</a> configuration may also be passed.</p>\n"},"ddGroup":{"!type":"string","!doc":"<p>A named drag drop group to which this object belongs. If a group is specified, then both the DragZones and\nDropZone used by this plugin will only interact with other drag drop objects in the same group.</p>\n"},"dragGroup":{"!type":"string","!doc":"<p>The <a href=\"#!/api/Ext.grid.plugin.DragDrop-cfg-ddGroup\" rel=\"Ext.grid.plugin.DragDrop-cfg-ddGroup\" class=\"docClass\">ddGroup</a> to which the DragZone will belong.</p>\n\n<p>This defines which other DropZones the DragZone will interact with. Drag/DropZones only interact with other\nDrag/DropZones which are members of the same <a href=\"#!/api/Ext.grid.plugin.DragDrop-cfg-ddGroup\" rel=\"Ext.grid.plugin.DragDrop-cfg-ddGroup\" class=\"docClass\">ddGroup</a>.</p>\n"},"dragText":{"!type":"string","!doc":"<p>The text to show while dragging.</p>\n\n<p>Two placeholders can be used in the text:</p>\n\n<ul>\n<li><code>{0}</code> The number of selected items.</li>\n<li><code>{1}</code> 's' when more than 1 items (only useful for English).</li>\n</ul>\n\n"},"dropGroup":{"!type":"string","!doc":"<p>The <a href=\"#!/api/Ext.grid.plugin.DragDrop-cfg-ddGroup\" rel=\"Ext.grid.plugin.DragDrop-cfg-ddGroup\" class=\"docClass\">ddGroup</a> to which the DropZone will belong.</p>\n\n<p>This defines which other DragZones the DropZone will interact with. Drag/DropZones only interact with other\nDrag/DropZones which are members of the same <a href=\"#!/api/Ext.grid.plugin.DragDrop-cfg-ddGroup\" rel=\"Ext.grid.plugin.DragDrop-cfg-ddGroup\" class=\"docClass\">ddGroup</a>.</p>\n"},"enableDrag":{"!type":"bool","!doc":"<p><code>false</code> to disallow dragging items from the View.</p>\n"},"enableDrop":{"!type":"bool","!doc":"<p><code>false</code> to disallow the View from accepting drop gestures.</p>\n"},"destroy":{"!type":"fn() -> !this","!doc":"<p>AbstractComponent calls destroy on all its plugins at destroy time.</p>\n"},"disable":{"!type":"fn() -> !this","!doc":"<p>The base implementation just sets the plugin's <code>disabled</code> flag to <code>true</code></p>\n\n<p>Plugin subclasses which need more complex processing may implement an overriding implementation.</p>\n"},"enable":{"!type":"fn() -> !this","!doc":"<p>The base implementation just sets the plugin's <code>disabled</code> flag to <code>false</code></p>\n\n<p>Plugin subclasses which need more complex processing may implement an overriding implementation.</p>\n"},"init":{"!type":"fn(view: ?) -> !this","!doc":"<p>The init method is invoked after initComponent method has been run for the client Component.</p>\n\n<p>The supplied implementation is empty. Subclasses should perform plugin initialization, and set up bidirectional\nlinks between the plugin and its client Component in their own implementation of this method.</p>\n"},"onViewRender":{"!type":"fn(view: ?) -> !this"},"beforedrop":{"!type":"fn(node: +HTMLElement, data: ?, overModel: +Ext.data.Model, dropPosition: string, dropHandlers: ?, eOpts: ?)","!doc":"<p><strong>This event is fired through the GridView. Add listeners to the <a href=\"#!/api/Ext.grid.View\" rel=\"Ext.grid.View\" class=\"docClass\">GridView</a> object</strong></p>\n\n<p>Fired when a drop gesture has been triggered by a mouseup event in a valid drop position in the GridView.</p>\n\n<p>Returning <code>false</code> to this event signals that the drop gesture was invalid, and if the drag proxy will animate\nback to the point from which the drag began.</p>\n\n<p>The dropHandlers parameter can be used to defer the processing of this event. For example to wait for the result of\na message box confirmation or an asynchronous server call. See the details of this property for more information.</p>\n\n<pre class='inline-example '><code>view.on('beforedrop', function(node, data, overModel, dropPosition, dropHandlers) {\n    // Defer the handling\n    dropHandlers.wait = true;\n    <a href=\"#!/api/Ext.MessageBox-method-confirm\" rel=\"Ext.MessageBox-method-confirm\" class=\"docClass\">Ext.MessageBox.confirm</a>('Drop', 'Are you sure', function(btn){\n        if (btn === 'yes') {\n            dropHandlers.processDrop();\n        } else {\n            dropHandlers.cancelDrop();\n        }\n    });\n});\n</code></pre>\n\n<p>Any other return value continues with the data transfer operation, unless the wait property is set.</p>\n"},"drop":{"!type":"fn(node: +HTMLElement, data: ?, overModel: +Ext.data.Model, dropPosition: string, eOpts: ?)","!doc":"<p><strong>This event is fired through the GridView. Add listeners to the GridView object</strong> Fired when a drop operation\nhas been completed and the data has been moved or copied.</p>\n"}}},"Editing":{"!doc":"<p>This class provides an abstract grid editing plugin on selected <a href=\"#!/api/Ext.grid.column.Column\" rel=\"Ext.grid.column.Column\" class=\"docClass\">columns</a>.\nThe editable columns are specified by providing an <a href=\"#!/api/Ext.grid.column.Column-cfg-editor\" rel=\"Ext.grid.column.Column-cfg-editor\" class=\"docClass\">editor</a>\nin the <a href=\"#!/api/Ext.grid.column.Column\" rel=\"Ext.grid.column.Column\" class=\"docClass\">column configuration</a>.</p>\n\n<p><strong>Note:</strong> This class should not be used directly. See <a href=\"#!/api/Ext.grid.plugin.CellEditing\" rel=\"Ext.grid.plugin.CellEditing\" class=\"docClass\">Ext.grid.plugin.CellEditing</a> and\n<a href=\"#!/api/Ext.grid.plugin.RowEditing\" rel=\"Ext.grid.plugin.RowEditing\" class=\"docClass\">Ext.grid.plugin.RowEditing</a>.</p>\n","!type":"fn(config: Ext_grid_plugin_Editing_cfg)","prototype":{"!proto":"Ext.AbstractPlugin.prototype","clicksToEdit":{"!type":"number","!doc":"<p>The number of clicks on a grid required to display the editor.\nThe only accepted values are <strong>1</strong> and <strong>2</strong>.</p>\n"},"triggerEvent":{"!type":"string","!doc":"<p>The event which triggers editing. Supercedes the <a href=\"#!/api/Ext.grid.plugin.Editing-cfg-clicksToEdit\" rel=\"Ext.grid.plugin.Editing-cfg-clicksToEdit\" class=\"docClass\">clicksToEdit</a> configuration. Maybe one of:</p>\n\n<ul>\n<li>cellclick</li>\n<li>celldblclick</li>\n<li>cellfocus</li>\n<li>rowfocus</li>\n</ul>\n\n"},"defaultFieldXType":{"!type":"string"},"editStyle":{"!type":"string","!doc":"<p>cell, row, form</p>\n"},"editing":{"!type":"bool","!doc":"<p>Set to <code>true</code> while the editing plugin is active and an Editor is visible.</p>\n"},"relayedEvents":{"!type":"[?]"},"beforeEdit":{"!type":"fn(context: ?) -> bool","!doc":"<p>Template method called before editing begins.</p>\n"},"beforeViewCellFocus":{"!type":"fn(position: ?) -> !this","!doc":"<p>Override of View's method so that we can pre-empt the View's processing if the view is being triggered by a mousedown</p>\n"},"cancelEdit":{"!type":"fn() -> !this","!doc":"<p>Cancels any active edit that is in progress.</p>\n"},"completeEdit":{"!type":"fn() -> !this","!doc":"<p>Completes the edit if there is an active edit in progress.</p>\n"},"createColumnField":{"!type":"fn(columnHeader: ?, defaultField: ?) -> !this"},"destroy":{"!type":"fn() -> !this","!doc":"<p>AbstractComponent calls destroy on all its plugins at destroy time.</p>\n"},"getColumnField":{"!type":"fn(columnHeader: ?, defaultField: ?) -> !this","!doc":"<p>remaps to the public API of <a href=\"#!/api/Ext.grid.column.Column-method-getEditor\" rel=\"Ext.grid.column.Column-method-getEditor\" class=\"docClass\">Ext.grid.column.Column.getEditor</a></p>\n"},"getEditStyle":{"!type":"fn() -> !this"},"getEditingContext":{"!type":"fn(record: ?, columnHeader: ?) -> ?|+undefined","!doc":"<p>Collects all information necessary for any subclasses to perform their editing functions.</p>\n"},"hasColumnField":{"!type":"fn(columnHeader: ?) -> !this","!doc":"<p>remaps to the public API of Ext.grid.column.Column.hasEditor</p>\n"},"init":{"!type":"fn(grid: ?) -> !this","!doc":"<p>The init method is invoked after initComponent method has been run for the client Component.</p>\n\n<p>The supplied implementation is empty. Subclasses should perform plugin initialization, and set up bidirectional\nlinks between the plugin and its client Component in their own implementation of this method.</p>\n"},"initAddRemoveHeaderEvents":{"!type":"fn() -> !this"},"initCancelTriggers":{"!type":"fn() -> !this"},"initEditTriggers":{"!type":"fn() -> !this"},"initEvents":{"!type":"fn() -> !this"},"initFieldAccessors":{"!type":"fn(columns: ?) -> !this"},"initKeyNavHeaderEvents":{"!type":"fn() -> !this"},"onCellClick":{"!type":"fn(view: ?, cell: ?, colIdx: ?, record: ?, row: ?, rowIdx: ?, e: ?) -> !this","!doc":"<p>Used if we are triggered by a cellclick event</p>\n"},"onCellFocus":{"!type":"fn(record: ?, cell: ?, position: ?) -> !this","!doc":"<p>Used if we are triggered by the cellfocus event</p>\n"},"onColumnAdd":{"!type":"fn(ct: ?, column: ?) -> !this"},"onColumnMove":{"!type":"fn(headerCt: ?, column: ?, fromIdx: ?, toIdx: ?) -> !this","!doc":"<p>Inject field accessors on move because if the move FROM the main headerCt and INTO a grouped header,\nthe accessors will have been deleted but not added. They are added conditionally.</p>\n"},"onColumnRemove":{"!type":"fn(ct: ?, column: ?) -> !this"},"onEnterKey":{"!type":"fn(e: ?) -> !this"},"onEscKey":{"!type":"fn(e: ?) -> !this"},"onReconfigure":{"!type":"fn() -> !this","!doc":"<p>Fires after the grid is reconfigured</p>\n"},"onRowFocus":{"!type":"fn(record: ?, row: ?, rowIdx: ?) -> !this","!doc":"<p>Used if we are triggered by the rowfocus event</p>\n"},"removeFieldAccessors":{"!type":"fn(columns: ?) -> !this"},"setColumnField":{"!type":"fn(columnHeader: ?, field: ?) -> !this","!doc":"<p>remaps to the public API of <a href=\"#!/api/Ext.grid.column.Column-method-setEditor\" rel=\"Ext.grid.column.Column-method-setEditor\" class=\"docClass\">Ext.grid.column.Column.setEditor</a></p>\n"},"startEdit":{"!type":"fn(record: +Ext.data.Model|number, columnHeader: +Ext.grid.column.Column|number) -> !this","!doc":"<p>Starts editing the specified record, using the specified Column definition to define which field is being edited.</p>\n"},"validateEdit":{"!type":"fn() -> !this"},"beforeedit":{"!type":"fn(editor: +Ext.grid.plugin.Editing, context: ?, eOpts: ?)","!doc":"<p>Fires before editing is triggered. Return false from event handler to stop the editing.</p>\n"},"canceledit":{"!type":"fn(editor: +Ext.grid.plugin.Editing, context: ?, eOpts: ?)","!doc":"<p>Fires when the user started editing but then cancelled the edit.</p>\n"},"edit":{"!type":"fn(editor: +Ext.grid.plugin.Editing, context: ?, eOpts: ?)","!doc":"<p>Fires after a editing. Usage example:</p>\n\n<pre><code>grid.on('edit', function(editor, e) {\n    // commit the changes right after editing finished\n    e.record.commit();\n});\n</code></pre>\n"},"validateedit":{"!type":"fn(editor: +Ext.grid.plugin.Editing, context: ?, eOpts: ?)","!doc":"<p>Fires after editing, but before the value is set in the record. Return false from event handler to\ncancel the change.</p>\n\n<p>Usage example showing how to remove the red triangle (dirty record indicator) from some records (not all). By\nobserving the grid's validateedit event, it can be cancelled if the edit occurs on a targeted row (for example)\nand then setting the field's new value in the Record directly:</p>\n\n<pre><code>grid.on('validateedit', function(editor, e) {\n  var myTargetRow = 6;\n\n  if (e.rowIdx == myTargetRow) {\n    e.cancel = true;\n    e.record.data[e.field] = e.value;\n  }\n});\n</code></pre>\n"}}},"HeaderReorderer":{"!type":"fn(config?: Ext_grid_plugin_HeaderReorderer_cfg)","prototype":{"!proto":"Ext.AbstractPlugin.prototype","destroy":{"!type":"fn() -> !this","!doc":"<p>AbstractComponent calls destroy on all its plugins at destroy time.</p>\n"},"disable":{"!type":"fn() -> !this","!doc":"<p>The base implementation just sets the plugin's <code>disabled</code> flag to <code>true</code></p>\n\n<p>Plugin subclasses which need more complex processing may implement an overriding implementation.</p>\n"},"enable":{"!type":"fn() -> !this","!doc":"<p>The base implementation just sets the plugin's <code>disabled</code> flag to <code>false</code></p>\n\n<p>Plugin subclasses which need more complex processing may implement an overriding implementation.</p>\n"},"init":{"!type":"fn(headerCt: ?) -> !this","!doc":"<p>The init method is invoked after initComponent method has been run for the client Component.</p>\n\n<p>The supplied implementation is empty. Subclasses should perform plugin initialization, and set up bidirectional\nlinks between the plugin and its client Component in their own implementation of this method.</p>\n"},"onHeaderCtRender":{"!type":"fn() -> !this"}}},"HeaderResizer":{"!doc":"<p>Plugin to add header resizing functionality to a HeaderContainer.\nAlways resizing header to the left of the splitter you are resizing.</p>\n","!type":"fn(config?: Ext_grid_plugin_HeaderResizer_cfg)","prototype":{"!proto":"Ext.AbstractPlugin.prototype","dynamic":{"!type":"bool","!doc":"<p>True to resize on the fly rather than using a proxy marker.</p>\n"},"colHeaderCls":{"!type":"string"},"disabled":{"!type":"bool"},"eResizeCursor":{"!type":"string"},"maxColWidth":{"!type":"number"},"minColWidth":{"!type":"number"},"wResizeCursor":{"!type":"string"},"adjustColumnWidth":{"!type":"fn(offsetX: ?) -> !this"},"adjustConstrainRegion":{"!type":"fn(region: ?, t: ?, r: ?, b: ?, l: ?) -> !this"},"afterHeaderRender":{"!type":"fn() -> !this"},"calculateDragX":{"!type":"fn(markerOwner: ?) -> !this"},"destroy":{"!type":"fn() -> !this","!doc":"<p>AbstractComponent calls destroy on all its plugins at destroy time.</p>\n"},"disable":{"!type":"fn() -> !this","!doc":"<p>The base implementation just sets the plugin's <code>disabled</code> flag to <code>true</code></p>\n\n<p>Plugin subclasses which need more complex processing may implement an overriding implementation.</p>\n"},"doResize":{"!type":"fn() -> !this"},"enable":{"!type":"fn() -> !this","!doc":"<p>The base implementation just sets the plugin's <code>disabled</code> flag to <code>false</code></p>\n\n<p>Plugin subclasses which need more complex processing may implement an overriding implementation.</p>\n"},"getConstrainRegion":{"!type":"fn() -> !this","!doc":"<p>get the region to constrain to, takes into account max and min col widths</p>\n"},"getDynamic":{"!type":"fn() -> bool","!doc":"<p>Returns the value of <a href=\"#!/api/Ext.grid.plugin.HeaderResizer-cfg-dynamic\" rel=\"Ext.grid.plugin.HeaderResizer-cfg-dynamic\" class=\"docClass\">dynamic</a>.</p>\n"},"getLeftMarkerX":{"!type":"fn(markerOwner: ?) -> !this"},"getMovingMarker":{"!type":"fn(markerOwner: ?) -> !this"},"headerInSameGrid":{"!type":"fn(header: ?) -> !this","!doc":"<p>nextNode can traverse out of this grid, possibly to others on the page, so limit it here</p>\n"},"init":{"!type":"fn(headerCt: ?) -> !this","!doc":"<p>not using w and e resize bc we are only ever resizing one\ncolumn\nwResizeCursor: <a href=\"#!/api/Ext-property-isWebKit\" rel=\"Ext-property-isWebKit\" class=\"docClass\">Ext.isWebKit</a> ? 'w-resize' : 'col-resize',\neResizeCursor: <a href=\"#!/api/Ext-property-isWebKit\" rel=\"Ext-property-isWebKit\" class=\"docClass\">Ext.isWebKit</a> ? 'e-resize' : 'col-resize',</p>\n"},"onBeforeStart":{"!type":"fn(e: ?) -> !this","!doc":"<p>only start when there is an activeHd</p>\n"},"onDrag":{"!type":"fn(e: ?) -> !this","!doc":"<p>synchronize the rhsMarker with the mouse movement</p>\n"},"onEnd":{"!type":"fn(e: ?) -> !this"},"onHeaderCtMouseMove":{"!type":"fn(e: ?, t: ?) -> !this","!doc":"<p>As we mouse over individual headers, change the cursor to indicate\nthat resizing is available, and cache the resize target header for use\nif/when they mousedown.</p>\n"},"onStart":{"!type":"fn(e: ?) -> !this","!doc":"<p>initialize the left and right hand side markers around\nthe header that we are resizing</p>\n"},"setDynamic":{"!type":"fn(dynamic: bool)","!doc":"<p>Sets the value of <a href=\"#!/api/Ext.grid.plugin.HeaderResizer-cfg-dynamic\" rel=\"Ext.grid.plugin.HeaderResizer-cfg-dynamic\" class=\"docClass\">dynamic</a>.</p>\n"},"setMarkerX":{"!type":"fn(marker: ?, x: ?) -> !this"}}},"RowEditing":{"!doc":"<p>The <a href=\"#!/api/Ext.grid.plugin.RowEditing\" rel=\"Ext.grid.plugin.RowEditing\" class=\"docClass\">Ext.grid.plugin.RowEditing</a> plugin injects editing at a row level for a Grid. When editing begins,\na small floating dialog will be shown for the appropriate row. Each editable column will show a field\nfor editing. There is a button to save or cancel all changes for the edit.</p>\n\n<p>The field that will be used for the editor is defined at the\n<a href=\"#!/api/Ext.grid.column.Column-cfg-editor\" rel=\"Ext.grid.column.Column-cfg-editor\" class=\"docClass\">editor</a>. The editor can be a field instance or a field configuration.\nIf an editor is not specified for a particular column then that column won't be editable and the value of\nthe column will be displayed. To provide a custom renderer for non-editable values, use the\n<a href=\"#!/api/Ext.grid.column.Column-cfg-editRenderer\" rel=\"Ext.grid.column.Column-cfg-editRenderer\" class=\"docClass\">editRenderer</a> configuration on the column.</p>\n\n<p>The editor may be shared for each column in the grid, or a different one may be specified for each column.\nAn appropriate field type should be chosen to match the data structure that it will be editing. For example,\nto edit a date, it would be useful to specify <a href=\"#!/api/Ext.form.field.Date\" rel=\"Ext.form.field.Date\" class=\"docClass\">Ext.form.field.Date</a> as the editor.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    storeId:'simpsonsStore',\n    fields:['name', 'email', 'phone'],\n    data: [\n        {\"name\":\"Lisa\", \"email\":\"lisa@simpsons.com\", \"phone\":\"555-111-1224\"},\n        {\"name\":\"Bart\", \"email\":\"bart@simpsons.com\", \"phone\":\"555-222-1234\"},\n        {\"name\":\"Homer\", \"email\":\"home@simpsons.com\", \"phone\":\"555-222-1244\"},\n        {\"name\":\"Marge\", \"email\":\"marge@simpsons.com\", \"phone\":\"555-222-1254\"}\n    ]\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Ext.grid.Panel</a>', {\n    title: 'Simpsons',\n    store: <a href=\"#!/api/Ext.data.StoreManager-method-lookup\" rel=\"Ext.data.StoreManager-method-lookup\" class=\"docClass\">Ext.data.StoreManager.lookup</a>('simpsonsStore'),\n    columns: [\n        {header: 'Name',  dataIndex: 'name', editor: 'textfield'},\n        {header: 'Email', dataIndex: 'email', flex:1,\n            editor: {\n                xtype: 'textfield',\n                allowBlank: false\n            }\n        },\n        {header: 'Phone', dataIndex: 'phone'}\n    ],\n    selType: 'rowmodel',\n    plugins: [\n        <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.plugin.RowEditing\" rel=\"Ext.grid.plugin.RowEditing\" class=\"docClass\">Ext.grid.plugin.RowEditing</a>', {\n            clicksToEdit: 1\n        })\n    ],\n    height: 200,\n    width: 400,\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n","!type":"fn()","prototype":{"!proto":"Ext.grid.plugin.Editing.prototype","autoCancel":{"!type":"bool","!doc":"<p><code>true</code> to automatically cancel any pending changes when the row editor begins editing a new row.\n<code>false</code> to force the user to explicitly cancel the pending changes.</p>\n"},"clicksToMoveEditor":{"!type":"number","!doc":"<p>The number of clicks to move the row editor to a new row while it is visible and actively editing another row.\nThis will default to the same value as <a href=\"#!/api/Ext.grid.plugin.Editing-cfg-clicksToEdit\" rel=\"Ext.grid.plugin.Editing-cfg-clicksToEdit\" class=\"docClass\">clicksToEdit</a>.</p>\n"},"errorSummary":{"!type":"bool","!doc":"<p>True to show a <a href=\"#!/api/Ext.tip.ToolTip\" rel=\"Ext.tip.ToolTip\" class=\"docClass\">tooltip</a> that summarizes all validation errors present\nin the row editor. Set to false to prevent the tooltip from showing.</p>\n"},"editStyle":{"!type":"string","!doc":"<p>cell, row, form</p>\n"},"lockableScope":{"!type":"string"},"cancelEdit":{"!type":"fn() -> !this","!doc":"<p>Cancels any active edit that is in progress.</p>\n"},"completeEdit":{"!type":"fn() -> !this","!doc":"<p>Completes the edit if there is an active edit in progress.</p>\n"},"destroy":{"!type":"fn() -> !this","!doc":"<p>AbstractComponent calls destroy on all its plugins at destroy time.</p>\n"},"getEditor":{"!type":"fn() -> !this"},"initEditTriggers":{"!type":"fn() -> !this"},"initEditor":{"!type":"fn() -> !this"},"initEditorConfig":{"!type":"fn() -> !this"},"moveEditorByClick":{"!type":"fn() -> !this"},"onColumnAdd":{"!type":"fn(ct: ?, column: ?) -> !this"},"onColumnHide":{"!type":"fn(ct: ?, column: ?) -> !this"},"onColumnMove":{"!type":"fn(ct: ?, column: ?, fromIdx: ?, toIdx: ?) -> !this","!doc":"<p>Inject field accessors on move because if the move FROM the main headerCt and INTO a grouped header,\nthe accessors will have been deleted but not added. They are added conditionally.</p>\n"},"onColumnRemove":{"!type":"fn(ct: ?, column: ?) -> !this"},"onColumnResize":{"!type":"fn(ct: ?, column: ?, width: ?) -> !this"},"onColumnShow":{"!type":"fn(ct: ?, column: ?) -> !this"},"setColumnField":{"!type":"fn(column: ?, field: ?) -> !this","!doc":"<p>remaps to the public API of <a href=\"#!/api/Ext.grid.column.Column-method-setEditor\" rel=\"Ext.grid.column.Column-method-setEditor\" class=\"docClass\">Ext.grid.column.Column.setEditor</a></p>\n"},"startEdit":{"!type":"fn(record: +Ext.data.Model, columnHeader: +Ext.data.Model) -> bool","!doc":"<p>Starts editing the specified record, using the specified Column definition to define which field is being edited.</p>\n"},"startEditByClick":{"!type":"fn() -> !this"},"validateEdit":{"!type":"fn() -> !this"}}},"RowExpander":{"!doc":"<p>Plugin (ptype = 'rowexpander') that adds the ability to have a Column in a grid which enables\na second row body which expands/contracts.  The expand/contract behavior is configurable to react\non clicking of the column, double click of the row, and/or hitting enter while a row is selected.</p>\n","!type":"fn(config?: Ext_grid_plugin_RowExpander_cfg)","prototype":{"!proto":"Ext.AbstractPlugin.prototype","expandOnDblClick":{"!type":"bool","!doc":"<p><tt>true</tt> to toggle a row between expanded/collapsed when double clicked\n(defaults to <tt>true</tt>).</p>\n"},"expandOnEnter":{"!type":"bool","!doc":"<p><tt>true</tt> to toggle selected row(s) between expanded/collapsed when the enter\nkey is pressed (defaults to <tt>true</tt>).</p>\n"},"selectRowOnExpand":{"!type":"bool","!doc":"<p><tt>true</tt> to select a row when clicking on the expander icon\n(defaults to <tt>false</tt>).</p>\n"},"addCollapsedCls":{"!type":"?"},"lockableScope":{"!type":"string"},"rowBodyHiddenCls":{"!type":"string"},"rowBodyTpl":{"!type":"?"},"rowBodyTrSelector":{"!type":"string"},"rowCollapsedCls":{"!type":"string"},"addExpander":{"!type":"fn() -> !this","!doc":"<p>Inject the expander column into the correct grid.</p>\n\n<p>If we are expanding the normal side of a lockable grid, poke the column into the locked side</p>\n"},"beforeReconfigure":{"!type":"fn(grid: ?, store: ?, columns: ?, oldStore: ?, oldColumns: ?) -> !this"},"bindView":{"!type":"fn(view: ?) -> !this"},"doRefreshRowHeights":{"!type":"fn() -> !this"},"getHeaderConfig":{"!type":"fn() -> !this"},"getRowBodyFeatureData":{"!type":"fn(record: ?, idx: ?, rowValues: ?) -> !this"},"init":{"!type":"fn(grid: ?) -> !this","!doc":"<p>The init method is invoked after initComponent method has been run for the client Component.</p>\n\n<p>The supplied implementation is empty. Subclasses should perform plugin initialization, and set up bidirectional\nlinks between the plugin and its client Component in their own implementation of this method.</p>\n"},"onDblClick":{"!type":"fn(view: ?, record: ?, row: ?, rowIdx: ?, e: ?) -> !this"},"onKeyDown":{"!type":"fn(view: ?, record: ?, row: ?, rowIdx: ?, e: ?) -> !this"},"refreshRowHeights":{"!type":"fn() -> !this","!doc":"<p>refreshRowHeights often gets called in the middle of some complex processing.\nFor example, it's called on the store's datachanged event, but it must execute\nafter* other objects interested in datachanged have done their job.\n Or it's called on column lock/unlock, but that could be just the start of a cross-container\n drag/drop of column headers which then moves the column into its final place.\n So this throws execution forwards until the idle event.</p>\n"},"setup":{"!type":"fn(rows: ?, rowValues: ?) -> !this"},"toggleRow":{"!type":"fn(rowIdx: ?, record: ?) -> !this"},"collapsebody":{"!type":"fn(rowNode: +HTMLElement, record: +Ext.data.Model, expandRow: +HTMLElement, eOpts: ?)","!doc":"<p><strong>Fired through the grid's View.</strong></p>\n"},"expandbody":{"!type":"fn(rowNode: +HTMLElement, record: +Ext.data.Model, expandRow: +HTMLElement, eOpts: ?)","!doc":"<p><strong>Fired through the grid's View</strong></p>\n"}}}},"property":{"Grid":{"!doc":"<p>A specialized grid implementation intended to mimic the traditional property grid as typically seen in\ndevelopment IDEs.  Each row in the grid represents a property of some object, and the data is stored\nas a set of name/value pairs in <a href=\"#!/api/Ext.grid.property.Property\" rel=\"Ext.grid.property.Property\" class=\"docClass\">Properties</a>. By default, the editors\nshown are inferred from the data in the cell. More control over this can be specified by using the\n<a href=\"#!/api/Ext.grid.property.Grid-cfg-sourceConfig\" rel=\"Ext.grid.property.Grid-cfg-sourceConfig\" class=\"docClass\">sourceConfig</a> option. Example usage:</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.property.Grid\" rel=\"Ext.grid.property.Grid\" class=\"docClass\">Ext.grid.property.Grid</a>', {\n    title: 'Properties Grid',\n    width: 300,\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    source: {\n        \"(name)\": \"My Object\",\n        \"Created\": <a href=\"#!/api/Ext.Date-method-parse\" rel=\"Ext.Date-method-parse\" class=\"docClass\">Ext.Date.parse</a>('10/15/2006', 'm/d/Y'),\n        \"Available\": false,\n        \"Version\": 0.01,\n        \"Description\": \"A test object\"\n    }\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_grid_property_Grid_cfg)","prototype":{"!proto":"Ext.grid.Panel.prototype","columnLines":{"!type":"bool","!doc":"<p>Adds column line styling</p>\n"},"columns":{"!type":"?"},"customEditors":{"!type":"?","!doc":"<p>An object containing name/value pairs of custom editor type definitions that allow\nthe grid to support additional types of editable fields.  By default, the grid supports strongly-typed editing\nof strings, dates, numbers and booleans using built-in form editors, but any custom type can be supported and\nassociated with a custom input control by specifying a custom editor.  The name of the editor\ntype should correspond with the name of the property that will use the editor.  Example usage:</p>\n\n<pre><code>var grid = new <a href=\"#!/api/Ext.grid.property.Grid\" rel=\"Ext.grid.property.Grid\" class=\"docClass\">Ext.grid.property.Grid</a>({\n\n    // Custom editors for certain property names\n    customEditors: {\n        evtStart: <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.field.Time\" rel=\"Ext.form.field.Time\" class=\"docClass\">Ext.form.TimeField</a>', {selectOnFocus: true})\n    },\n\n    // Displayed name for property names in the source\n    propertyNames: {\n        evtStart: 'Start Time'\n    },\n\n    // Data object containing properties to edit\n    source: {\n        evtStart: '10:00 AM'\n    }\n});\n</code></pre>\n"},"customRenderers":{"!type":"?","!doc":"<p>An object containing name/value pairs of custom renderer type definitions that allow\nthe grid to support custom rendering of fields.  By default, the grid supports strongly-typed rendering\nof strings, dates, numbers and booleans using built-in form editors, but any custom type can be supported and\nassociated with the type of the value.  The name of the renderer type should correspond with the name of the property\nthat it will render.  Example usage:</p>\n\n<pre><code>var grid = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.property.Grid\" rel=\"Ext.grid.property.Grid\" class=\"docClass\">Ext.grid.property.Grid</a>', {\n    customRenderers: {\n        Available: function(v){\n            if (v) {\n                return '&lt;span style=\"color: green;\"&gt;Yes&lt;/span&gt;';\n            } else {\n                return '&lt;span style=\"color: red;\"&gt;No&lt;/span&gt;';\n            }\n        }\n    },\n    source: {\n        Available: true\n    }\n});\n</code></pre>\n"},"enableColumnMove":{"!type":"bool","!doc":"<p>private config overrides</p>\n"},"inferTypes":{"!type":"bool","!doc":"<p>True to automatically infer the <a href=\"#!/api/Ext.grid.property.Grid-cfg-sourceConfig\" rel=\"Ext.grid.property.Grid-cfg-sourceConfig\" class=\"docClass\">type</a> based on the initial value passed\nfor each field. This ensures the editor remains the correct type even if the value is blanked\nand becomes empty.</p>\n"},"nameColumnWidth":{"!type":"number|string","!doc":"<p>Specify the width for the name column. The value column will take any remaining space.</p>\n"},"nameField":{"!type":"string","!doc":"<p>The name of the field from the property store to use as the property field name.\nThis may be useful if you do not configure the property Grid from an object, but use your own store configuration.</p>\n"},"propertyNames":{"!type":"?","!doc":"<p>An object containing custom property name/display name pairs.\nIf specified, the display name will be shown in the name column instead of the property name.</p>\n"},"source":{"!type":"?","!doc":"<p>A data object to use as the data source of the grid (see <a href=\"#!/api/Ext.grid.property.Grid-method-setSource\" rel=\"Ext.grid.property.Grid-method-setSource\" class=\"docClass\">setSource</a> for details).</p>\n"},"sourceConfig":{"!type":"?","!doc":"<p>This option allows various configurations to be set for each field in the property grid.\nNone of these configurations are required</p>\n\n<h4>displayName</h4>\n\n<p>A custom name to appear as label for this field. If specified, the display name will be shown\nin the name column instead of the property name. Example usage:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.grid.property.Grid\" rel=\"Ext.grid.property.Grid\" class=\"docClass\">Ext.grid.property.Grid</a>({\n    source: {\n        clientIsAvailable: true\n    },\n    sourceConfig: {\n        clientIsAvailable: {\n            // Custom name different to the field\n            displayName: 'Available'\n        }\n    }\n});\n</code></pre>\n\n<h4>renderer</h4>\n\n<p>A function used to transform the underlying value before it is displayed in the grid.\nBy default, the grid supports strongly-typed rendering of strings, dates, numbers and booleans using built-in form editors,\nbut any custom type can be supported and associated with the type of the value. Example usage:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.grid.property.Grid\" rel=\"Ext.grid.property.Grid\" class=\"docClass\">Ext.grid.property.Grid</a>({\n    source: {\n        clientIsAvailable: true\n    },\n    sourceConfig: {\n        clientIsAvailable: {\n            // Custom renderer to change the color based on the value\n            renderer: function(v){\n                var color = v ? 'green' : 'red';\n                return '&lt;span style=\"color: ' + color + ';\"&gt;' + v + '&lt;/span&gt;';\n            }\n        }\n    }\n});\n</code></pre>\n\n<h4>type</h4>\n\n<p>Used to explicitly specify the editor type for a particular value. By default, the type is\nautomatically inferred from the value. See <a href=\"#!/api/Ext.grid.property.Grid-cfg-inferTypes\" rel=\"Ext.grid.property.Grid-cfg-inferTypes\" class=\"docClass\">inferTypes</a>. Accepted values are:</p>\n\n<ul>\n<li>'date'</li>\n<li>'boolean'</li>\n<li>'number'</li>\n<li>'string'</li>\n</ul>\n\n\n<p>For more advanced control an editor configuration can be passed (see the next section).\nExample usage:</p>\n\n<pre><code>new <a href=\"#!/api/Ext.grid.property.Grid\" rel=\"Ext.grid.property.Grid\" class=\"docClass\">Ext.grid.property.Grid</a>({\n    source: {\n        attending: null\n    },\n    sourceConfig: {\n        attending: {\n            // Force the type to be a numberfield, a null value would otherwise default to a textfield\n            type: 'number'\n        }\n    }\n});\n</code></pre>\n\n<h4>editor</h4>\n\n<p>Allows the grid to support additional types of editable fields.  By default, the grid supports strongly-typed editing\nof strings, dates, numbers and booleans using built-in form editors, but any custom type can be supported and\nassociated with a custom input control by specifying a custom editor. Example usage</p>\n\n<pre><code>new <a href=\"#!/api/Ext.grid.property.Grid\" rel=\"Ext.grid.property.Grid\" class=\"docClass\">Ext.grid.property.Grid</a>({\n    // Data object containing properties to edit\n    source: {\n        evtStart: '10:00 AM'\n    },\n\n    sourceConfig: {\n        evtStart: {\n            editor: <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.field.Time\" rel=\"Ext.form.field.Time\" class=\"docClass\">Ext.form.field.Time</a>', {selectOnFocus: true}),\n            displayName: 'Start Time'\n        }\n    }\n});\n</code></pre>\n"},"store":{"!type":"?"},"valueField":{"!type":"string","!doc":"<p>The name of the field from the property store to use as the value field name.\nThis may be useful if you do not configure the property Grid from an object, but use your own store configuration.</p>\n"},"clicksToEdit":{"!type":"number"},"enableHdMenu":{"!type":"bool"},"gridCls":{"!type":"string"},"stripeRows":{"!type":"bool"},"trackMouseOver":{"!type":"bool"},"beforeDestroy":{"!type":"fn() -> !this","!doc":"<p>Invoked before the Component is destroyed.</p>\n"},"configure":{"!type":"fn(config: ?) -> !this"},"configureLegacy":{"!type":"fn(config: ?) -> !this","!doc":"<p>to be deprecated in 4.2</p>\n"},"copyLegacyObject":{"!type":"fn(config: ?, o: ?, keyName: ?) -> !this"},"destroyEditors":{"!type":"fn(editors: ?) -> !this"},"getCellEditor":{"!type":"fn(record: ?, column: ?) -> !this","!doc":"<p>Returns the correct editor type for the property type, or a custom one keyed by the property name</p>\n"},"getConfig":{"!type":"fn(name: ?) -> !this"},"getSource":{"!type":"fn() -> ?","!doc":"<p>Gets the source data object containing the property data.  See <a href=\"#!/api/Ext.grid.property.Grid-method-setSource\" rel=\"Ext.grid.property.Grid-method-setSource\" class=\"docClass\">setSource</a> for details regarding the\nformat of the data object.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"onUpdate":{"!type":"fn(store: ?, record: ?, operation: ?) -> !this"},"removeProperty":{"!type":"fn(prop: string) -> !this","!doc":"<p>Removes a property from the grid.</p>\n"},"setConfig":{"!type":"fn(fieldName: ?, key: ?, value: ?) -> !this"},"setProperty":{"!type":"fn(prop: string, value: ?, create?: bool) -> !this","!doc":"<p>Sets the value of a property.</p>\n"},"setSource":{"!type":"fn(source: ?, sourceConfig?: ?) -> !this","!doc":"<p>Sets the source data object containing the property data.  The data object can contain one or more name/value\npairs representing all of the properties of an object to display in the grid, and this data will automatically\nbe loaded into the grid's <a href=\"#!/api/Ext.grid.property.Grid-cfg-store\" rel=\"Ext.grid.property.Grid-cfg-store\" class=\"docClass\">store</a>.  The values should be supplied in the proper data type if needed,\notherwise string type will be assumed.  If the grid already contains data, this method will replace any\nexisting data.  See also the <a href=\"#!/api/Ext.grid.property.Grid-cfg-source\" rel=\"Ext.grid.property.Grid-cfg-source\" class=\"docClass\">source</a> config value.  Example usage:</p>\n\n<pre><code>grid.setSource({\n    \"(name)\": \"My Object\",\n    \"Created\": <a href=\"#!/api/Ext.Date-method-parse\" rel=\"Ext.Date-method-parse\" class=\"docClass\">Ext.Date.parse</a>('10/15/2006', 'm/d/Y'),  // date type\n    \"Available\": false,  // boolean type\n    \"Version\": .01,      // decimal type\n    \"Description\": \"A test object\"\n});\n</code></pre>\n"},"walkCells":{"!type":"fn(pos: ?, direction: ?, e: ?, preventWrap: ?, verifierFn: ?, scope: ?) -> !this","!doc":"<p>Custom implementation of walkCells which only goes up and down.</p>\n"},"beforepropertychange":{"!type":"fn(source: ?, recordId: string, value: ?, oldValue: ?, eOpts: ?)","!doc":"<p>Fires before a property value changes.  Handlers can return false to cancel the property change\n(this will internally call <a href=\"#!/api/Ext.data.Model-method-reject\" rel=\"Ext.data.Model-method-reject\" class=\"docClass\">Ext.data.Model.reject</a> on the property's record).</p>\n"},"propertychange":{"!type":"fn(source: ?, recordId: string, value: ?, oldValue: ?, eOpts: ?)","!doc":"<p>Fires after a property value has changed.</p>\n"}}},"HeaderContainer":{"!doc":"<p>A custom HeaderContainer for the <a href=\"#!/api/Ext.grid.property.Grid\" rel=\"Ext.grid.property.Grid\" class=\"docClass\">Ext.grid.property.Grid</a>.\nGenerally it should not need to be used directly.</p>\n","!type":"fn(grid: +Ext.grid.property.Grid, source: ?)","prototype":{"!proto":"Ext.grid.header.Container.prototype","dateFormat":{"!type":"string","!doc":"<p>\n<locale></locale></p>\n"},"falseText":{"!type":"string","!doc":"<p>\n<locale></locale></p>\n"},"nameColumnCls":{"!type":"string"},"nameColumnInnerCls":{"!type":"string"},"nameText":{"!type":"string","!doc":"<p>strings used for locale support\n<locale></locale></p>\n"},"nameWidth":{"!type":"number"},"renderDate":{"!type":"?"},"trueText":{"!type":"string","!doc":"<p>\n<locale></locale></p>\n"},"valueText":{"!type":"string","!doc":"<p>\n<locale></locale></p>\n"},"getCellEditor":{"!type":"fn(record: ?) -> !this"},"getPropertyName":{"!type":"fn(name: ?) -> !this","!doc":"<p>Renders custom property names instead of raw names if defined in the Grid</p>\n"},"renderBool":{"!type":"fn(bVal: ?) -> !this"},"renderCell":{"!type":"fn(val: ?, meta: ?, rec: ?) -> !this","!doc":"<p>Render a property value cell</p>\n"},"renderProp":{"!type":"fn(v: ?) -> !this","!doc":"<p>Render a property name cell</p>\n"}}},"Property":{"!doc":"<p>A specific <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a> type that represents a name/value pair and is made to work with the\n<a href=\"#!/api/Ext.grid.property.Grid\" rel=\"Ext.grid.property.Grid\" class=\"docClass\">Ext.grid.property.Grid</a>. Typically, Properties do not need to be created directly as they can be\ncreated implicitly by simply using the appropriate data configs either via the\n<a href=\"#!/api/Ext.grid.property.Grid-cfg-source\" rel=\"Ext.grid.property.Grid-cfg-source\" class=\"docClass\">Ext.grid.property.Grid.source</a> config property or by calling <a href=\"#!/api/Ext.grid.property.Grid-method-setSource\" rel=\"Ext.grid.property.Grid-method-setSource\" class=\"docClass\">Ext.grid.property.Grid.setSource</a>.\nHowever, if the need arises, these records can also be created explicitly as shown below. Example usage:</p>\n\n<pre><code>var rec = new <a href=\"#!/api/Ext.grid.property.Property\" rel=\"Ext.grid.property.Property\" class=\"docClass\">Ext.grid.property.Property</a>({\n    name: 'birthday',\n    value: <a href=\"#!/api/Ext.Date-method-parse\" rel=\"Ext.Date-method-parse\" class=\"docClass\">Ext.Date.parse</a>('17/06/1962', 'd/m/Y')\n});\n// Add record to an already populated grid\ngrid.store.addSorted(rec);\n</code></pre>\n","!type":"fn(config: Ext_grid_property_Property_cfg)","prototype":{"!proto":"Ext.data.Model.prototype","idProperty":{"!type":"string|?|+Ext.data.Field","!doc":"<p>The name of the field treated as this Model's unique id. Defaults to 'id'.</p>\n\n<p>This may also be specified as a Field config object. This means that the identifying field can be calculated\nusing a <a href=\"#!/api/Ext.data.Field-cfg-convert\" rel=\"Ext.data.Field-cfg-convert\" class=\"docClass\">convert</a> function which might aggregate several values from the\nraw data object to use as an identifier.</p>\n\n<p>The resulting <a href=\"#!/api/Ext.data.Field\" rel=\"Ext.data.Field\" class=\"docClass\">Field</a> is added to the Model's field collection unless there is already\na configured field with a mapping that reads the same property.</p>\n\n<p>If defining an <strong>abstract</strong> base Model class, the <code>idProperty</code> may be configured as <code>null</code> which will mean that\nno identifying field will be generated.</p>\n"},"fields":{"!type":"+Ext.util.MixedCollection","!doc":"<p>A <a href=\"#!/api/Ext.util.MixedCollection\" rel=\"Ext.util.MixedCollection\" class=\"docClass\">Collection</a> of the fields defined for this Model (including fields defined in superclasses)</p>\n\n<p>This is a collection of <a href=\"#!/api/Ext.data.Field\" rel=\"Ext.data.Field\" class=\"docClass\">Ext.data.Field</a> instances, each of which encapsulates information that the field was configured with.\nBy default, you can specify a field as simply a String, representing the <em>name</em> of the field, but a Field encapsulates\n<a href=\"#!/api/Ext.data.Field-cfg-type\" rel=\"Ext.data.Field-cfg-type\" class=\"docClass\">data type</a>, <a href=\"#!/api/Ext.data.Field-cfg-convert\" rel=\"Ext.data.Field-cfg-convert\" class=\"docClass\">custom conversion</a> of raw data, and a <a href=\"#!/api/Ext.data.Field-cfg-mapping\" rel=\"Ext.data.Field-cfg-mapping\" class=\"docClass\">mapping</a>\nproperty to specify by name of index, how to extract a field's value from a raw data object.</p>\n"}}},"Store":{"!doc":"<p>A custom <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a> for the <a href=\"#!/api/Ext.grid.property.Grid\" rel=\"Ext.grid.property.Grid\" class=\"docClass\">Ext.grid.property.Grid</a>. This class handles the mapping\nbetween the custom data source objects supported by the grid and the <a href=\"#!/api/Ext.grid.property.Property\" rel=\"Ext.grid.property.Property\" class=\"docClass\">Ext.grid.property.Property</a> format\nused by the <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a> base class.</p>\n","!type":"fn(grid: +Ext.grid.Panel, source: ?)","prototype":{"!proto":"Ext.data.Store.prototype","sortOnLoad":{"!type":"bool","!doc":"<p>If true, any sorters attached to this Store will be run after loading data, before the datachanged event is fired.\nDefaults to true, igored if <a href=\"#!/api/Ext.data.Store-cfg-remoteSort\" rel=\"Ext.data.Store-cfg-remoteSort\" class=\"docClass\">remoteSort</a> is true</p>\n"},"getProperty":{"!type":"fn(row: ?) -> !this"},"getProxy":{"!type":"fn() -> +Ext.data.proxy.Proxy","!doc":"<p>Return a singleton, customized Proxy object which configures itself with a custom Reader</p>\n"},"getReader":{"!type":"fn() -> !this","!doc":"<p>Return a singleton, customized Reader object which reads <a href=\"#!/api/Ext.grid.property.Property\" rel=\"Ext.grid.property.Property\" class=\"docClass\">Ext.grid.property.Property</a> records from an object.</p>\n"},"getRec":{"!type":"fn(prop: ?) -> !this"},"getSource":{"!type":"fn() -> !this","!doc":"<p>Should only be called by the grid.  Use grid.getSource instead.</p>\n"},"remove":{"!type":"fn(prop: ?) -> !this","!doc":"<p>Removes the specified record(s) from the Store, firing the <a href=\"#!/api/Ext.grid.property.Store-event-remove\" rel=\"Ext.grid.property.Store-event-remove\" class=\"docClass\">remove</a> event for each instance that is removed.</p>\n\n<p>A <a href=\"#!/api/Ext.grid.property.Store-event-bulkremove\" rel=\"Ext.grid.property.Store-event-bulkremove\" class=\"docClass\">bulkremove</a> event is called at the end passing all removed records and their indices.\nplus a single 'datachanged' event after removal.</p>\n"},"setSource":{"!type":"fn(dataObject: ?) -> !this","!doc":"<p>Should only be called by the grid.  Use grid.setSource instead.</p>\n"},"setValue":{"!type":"fn(prop: ?, value: ?, create: ?) -> !this"}}}}},"is":{"!doc":"<p>Determines information about the current platform the application is running on.</p>\n","Android":{"!type":"bool","!doc":"<p>True when the browser is running on an Android device</p>\n"},"Blackberry":{"!type":"bool","!doc":"<p>True when the browser is running on a Blackberry</p>\n"},"Desktop":{"!type":"bool","!doc":"<p>True if the browser is running on a desktop machine</p>\n"},"Linux":{"!type":"bool","!doc":"<p>True when the browser is running on Linux</p>\n"},"Mac":{"!type":"bool","!doc":"<p>True when the browser is running on a Mac</p>\n"},"Phone":{"!type":"bool","!doc":"<p>True if the browser is running on a phone.</p>\n"},"Standalone":{"!type":"bool","!doc":"<p>Detects when application has been saved to homescreen.</p>\n"},"Tablet":{"!type":"?","!doc":"<p>True if the browser is running on a tablet (iPad)</p>\n"},"Windows":{"!type":"bool","!doc":"<p>True when the browser is running on Windows</p>\n"},"iOS":{"!type":"bool","!doc":"<p>True if the browser is running on iOS</p>\n"},"iPad":{"!type":"bool","!doc":"<p>True when the browser is running on a iPad</p>\n"},"iPhone":{"!type":"bool","!doc":"<p>True when the browser is running on a iPhone</p>\n"},"iPod":{"!type":"bool","!doc":"<p>True when the browser is running on a iPod</p>\n"}},"!doc":"<p>The Ext namespace (global object) encapsulates all classes, singletons, and\nutility methods provided by Sencha's libraries.</p>\n\n<p>Most user interface Components are at a lower level of nesting in the namespace,\nbut many common utility functions are provided as direct properties of the Ext namespace.</p>\n\n<p>Also many frequently used methods from other classes are provided as shortcuts\nwithin the Ext namespace. For example <a href=\"#!/api/Ext-method-getCmp\" rel=\"Ext-method-getCmp\" class=\"docClass\">Ext.getCmp</a> aliases\n<a href=\"#!/api/Ext.ComponentManager-method-get\" rel=\"Ext.ComponentManager-method-get\" class=\"docClass\">Ext.ComponentManager.get</a>.</p>\n\n<p>Many applications are initiated with <a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a> which is\ncalled once the DOM is ready. This ensures all scripts have been loaded,\npreventing dependency issues. For example:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function(){\n    new <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>({\n        renderTo: document.body,\n        html: 'DOM ready!'\n    });\n});\n</code></pre>\n\n<p>For more information about how to use the Ext classes, see:</p>\n\n<ul>\n<li><a href=\"http://www.sencha.com/learn/\">The Learning Center</a></li>\n<li><a href=\"http://www.sencha.com/learn/Ext_FAQ\">The FAQ</a></li>\n<li><a href=\"http://www.sencha.com/forum/\">The forums</a></li>\n</ul>\n\n","BLANK_IMAGE_URL":{"!type":"string","!doc":"<p>URL to a 1x1 transparent gif image used by Ext to create inline icons with\nCSS background images. In older versions of IE, this defaults to\n\"http://sencha.com/s.gif\" and you should change this to a URL on your server.\nFor other browsers it uses an inline data URL.</p>\n"},"Logger":{"!type":"?"},"SSL_SECURE_URL":{"!type":"string","!doc":"<p>URL to a blank file used by Ext when in secure mode for iframe src and onReady src\nto prevent the IE insecure content warning (<code>'about:blank'</code>, except for IE\nin secure mode, which is <code>'javascript:\"\"'</code>).</p>\n"},"USE_NATIVE_JSON":{"!type":"bool","!doc":"<p>Indicates whether to use native browser parsing for JSON methods.\nThis option is ignored if the browser does not support native JSON methods.</p>\n\n<p><strong>Note:</strong> Native JSON methods will not work with objects that have functions.\nAlso, property names must be quoted, otherwise the data will not parse.</p>\n"},"chromeVersion":{"!type":"number","!doc":"<p>The current version of Chrome (0 if the browser is not Chrome).</p>\n"},"emptyFn":{"!type":"fn()","!doc":"<p>A reusable empty function</p>\n"},"emptyString":{"!type":"?","!doc":"<p>A zero length string which will pass a truth test. Useful for passing to methods\nwhich use a truth test to reject <i>falsy</i> values where a string value must be cleared.</p>\n"},"enableFx":{"!type":"bool","!doc":"<p>True if the <a href=\"#!/api/Ext.fx.Anim\" rel=\"Ext.fx.Anim\" class=\"docClass\">Ext.fx.Anim</a> Class is available.</p>\n"},"enableGarbageCollector":{"!type":"bool","!doc":"<p>True to automatically uncache orphaned Ext.Elements periodically</p>\n"},"enableListenerCollection":{"!type":"bool","!doc":"<p>True to automatically purge event listeners during garbageCollection.</p>\n"},"enableNestedListenerRemoval":{"!type":"bool","!doc":"<p><strong>Experimental.</strong> True to cascade listener removal to child elements when an element\nis removed. Currently not optimized for performance.</p>\n"},"enumerables":{"!type":"[string]","!doc":"<p>An array containing extra enumerables for old browsers</p>\n"},"firefoxVersion":{"!type":"number","!doc":"<p>The current version of Firefox (0 if the browser is not Firefox).</p>\n"},"functionFactoryCache":{"!type":"?"},"globalEvents":{"!type":"+Ext.util.Observable","!doc":"<p>An instance of <code><a href=\"#!/api/Ext.util.Observable\" rel=\"Ext.util.Observable\" class=\"docClass\">Ext.util.Observable</a></code> through which Ext fires global events.</p>\n\n<p>This Observable instance fires the following events:</p>\n\n<ul>\n<li><p><strong><code>idle</code></strong></p>\n\n<p>Fires when an event handler finishes its run, just before returning to browser control.</p>\n\n<p>This includes DOM event handlers, Ajax (including JSONP) event handlers, and <a href=\"#!/api/Ext.util.TaskRunner\" rel=\"Ext.util.TaskRunner\" class=\"docClass\">TaskRunners</a></p>\n\n<p>This can be useful for performing cleanup, or update tasks which need to happen only\nafter all code in an event handler has been run, but which should not be executed in a timer\ndue to the intervening browser reflow/repaint which would take place.</p></li>\n<li><p><strong><code>ready</code></strong></p>\n\n<p> Fires when the DOM is ready, and all required classes have been loaded. Functionally\n the same as <a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">onReady</a>, but must be called with the <code>single</code> option:</p>\n\n<pre><code>  <a href=\"#!/api/Ext-method-on\" rel=\"Ext-method-on\" class=\"docClass\">Ext.on</a>({\n      ready: function() {\n          console.log('document is ready!');\n      },\n      single: true\n  }); \n</code></pre></li>\n<li><p><strong><code>resumelayouts</code></strong></p>\n\n<p> Fires after global layout processing has been resumed in <a href=\"#!/api/Ext.AbstractComponent-method-resumeLayouts\" rel=\"Ext.AbstractComponent-method-resumeLayouts\" class=\"docClass\">Ext.AbstractComponent.resumeLayouts</a>.</p></li>\n</ul>\n\n"},"ieVersion":{"!type":"number","!doc":"<p>The current version of IE (0 if the browser is not IE). This does not account\nfor the documentMode of the current page, which is factored into <a href=\"#!/api/Ext-property-isIE7\" rel=\"Ext-property-isIE7\" class=\"docClass\">isIE7</a>,\n<a href=\"#!/api/Ext-property-isIE8\" rel=\"Ext-property-isIE8\" class=\"docClass\">isIE8</a> and <a href=\"#!/api/Ext-property-isIE9\" rel=\"Ext-property-isIE9\" class=\"docClass\">isIE9</a>. Thus this is not always true:</p>\n\n<pre><code><a href=\"#!/api/Ext-property-isIE8\" rel=\"Ext-property-isIE8\" class=\"docClass\">Ext.isIE8</a> == (<a href=\"#!/api/Ext-property-ieVersion\" rel=\"Ext-property-ieVersion\" class=\"docClass\">Ext.ieVersion</a> == 8)\n</code></pre>\n"},"isChrome":{"!type":"bool","!doc":"<p>True if the detected browser is Chrome.</p>\n"},"isFF10":{"!type":"bool","!doc":"<p>True if the detected browser uses FireFox 10</p>\n"},"isFF3_0":{"!type":"bool","!doc":"<p>True if the detected browser uses FireFox 3.0</p>\n"},"isFF3_5":{"!type":"bool","!doc":"<p>True if the detected browser uses FireFox 3.5</p>\n"},"isFF3_6":{"!type":"bool","!doc":"<p>True if the detected browser uses FireFox 3.6</p>\n"},"isFF4":{"!type":"bool","!doc":"<p>True if the detected browser uses FireFox 4</p>\n"},"isFF5":{"!type":"bool","!doc":"<p>True if the detected browser uses FireFox 5</p>\n"},"isGecko":{"!type":"bool","!doc":"<p>True if the detected browser uses the Gecko layout engine (e.g. Mozilla, Firefox).</p>\n"},"isGecko10":{"!type":"bool","!doc":"<p>True if the detected browser uses a Gecko 5.0+ layout engine (e.g. Firefox 5.x).</p>\n"},"isGecko3":{"!type":"bool","!doc":"<p>True if the detected browser uses a Gecko 1.9+ layout engine (e.g. Firefox 3.x).</p>\n"},"isGecko4":{"!type":"bool","!doc":"<p>True if the detected browser uses a Gecko 2.0+ layout engine (e.g. Firefox 4.x).</p>\n"},"isGecko5":{"!type":"bool","!doc":"<p>True if the detected browser uses a Gecko 5.0+ layout engine (e.g. Firefox 5.x).</p>\n"},"isIE":{"!type":"bool","!doc":"<p>True if the detected browser is Internet Explorer.</p>\n"},"isIE10":{"!type":"bool","!doc":"<p>True if the detected browser is Internet Explorer 10.x.</p>\n"},"isIE10m":{"!type":"bool","!doc":"<p>True if the detected browser is Internet Explorer 10.x or lower.</p>\n"},"isIE10p":{"!type":"bool","!doc":"<p>True if the detected browser is Internet Explorer 10.x or higher.</p>\n"},"isIE6":{"!type":"bool","!doc":"<p>True if the detected browser is Internet Explorer 6.x.</p>\n"},"isIE7":{"!type":"bool","!doc":"<p>True if the detected browser is Internet Explorer 7.x.</p>\n"},"isIE7m":{"!type":"bool","!doc":"<p>True if the detected browser is Internet Explorer 7.x or lower.</p>\n"},"isIE7p":{"!type":"bool","!doc":"<p>True if the detected browser is Internet Explorer 7.x or higher.</p>\n"},"isIE8":{"!type":"bool","!doc":"<p>True if the detected browser is Internet Explorer 8.x.</p>\n"},"isIE8m":{"!type":"bool","!doc":"<p>True if the detected browser is Internet Explorer 8.x or lower.</p>\n"},"isIE8p":{"!type":"bool","!doc":"<p>True if the detected browser is Internet Explorer 8.x or higher.</p>\n"},"isIE9":{"!type":"bool","!doc":"<p>True if the detected browser is Internet Explorer 9.x.</p>\n"},"isIE9m":{"!type":"bool","!doc":"<p>True if the detected browser is Internet Explorer 9.x or lower.</p>\n"},"isIE9p":{"!type":"bool","!doc":"<p>True if the detected browser is Internet Explorer 9.x or higher.</p>\n"},"isLinux":{"!type":"bool","!doc":"<p>True if the detected platform is Linux.</p>\n"},"isMac":{"!type":"bool","!doc":"<p>True if the detected platform is Mac OS.</p>\n"},"isOpera":{"!type":"bool","!doc":"<p>True if the detected browser is Opera.</p>\n"},"isOpera10_5":{"!type":"bool","!doc":"<p>True if the detected browser is Opera 10.5x.</p>\n"},"isReady":{"!type":"bool","!doc":"<p>True when the document is fully initialized and ready for action</p>\n"},"isSafari":{"!type":"bool","!doc":"<p>True if the detected browser is Safari.</p>\n"},"isSafari2":{"!type":"bool","!doc":"<p>True if the detected browser is Safari 2.x.</p>\n"},"isSafari3":{"!type":"bool","!doc":"<p>True if the detected browser is Safari 3.x.</p>\n"},"isSafari4":{"!type":"bool","!doc":"<p>True if the detected browser is Safari 4.x.</p>\n"},"isSafari5":{"!type":"bool","!doc":"<p>True if the detected browser is Safari 5.x.</p>\n"},"isSafari5_0":{"!type":"bool","!doc":"<p>True if the detected browser is Safari 5.0.x.</p>\n"},"isSecure":{"!type":"bool","!doc":"<p>True if the page is running over SSL</p>\n"},"isWebKit":{"!type":"bool","!doc":"<p>True if the detected browser uses WebKit.</p>\n"},"isWindows":{"!type":"bool","!doc":"<p>True if the detected platform is Windows.</p>\n"},"lastRegisteredVersion":{"!type":"?"},"mergeIf":{"!type":"?"},"name":{"!type":"string","!doc":"<p>The name of the property in the global namespace (The <code>window</code> in browser environments) which refers to the current instance of Ext.</p>\n\n\n<p>This is usually <code>\"Ext\"</code>, but if a sandboxed build of ExtJS is being used, this will be an alternative name.</p>\n\n\n<p>If code is being generated for use by <code>eval</code> or to create a <code>new Function</code>, and the global instance\nof Ext must be referenced, this is the name that should be built into the code.</p>\n\n"},"operaVersion":{"!type":"number","!doc":"<p>The current version of Opera (0 if the browser is not Opera).</p>\n"},"rootHierarchyState":{"!type":"?","!doc":"<p>the top level hierarchy state to which\nall other hierarchy states are chained.  If there is a viewport instance,\nthis object becomes the viewport's heirarchyState. See also\n<a href=\"#!/api/Ext.AbstractComponent-method-getHierarchyState\" rel=\"Ext.AbstractComponent-method-getHierarchyState\" class=\"docClass\">Ext.AbstractComponent.getHierarchyState</a></p>\n"},"safariVersion":{"!type":"number","!doc":"<p>The current version of Safari (0 if the browser is not Safari).</p>\n"},"useShims":{"!type":"bool","!doc":"<p>By default, Ext intelligently decides whether floating elements should be shimmed.\nIf you are using flash, you may want to set this to true.</p>\n"},"versions":{"!type":"?"},"webKitVersion":{"!type":"number","!doc":"<p>The current version of WebKit (0 if the browser does not use WebKit).</p>\n"},"addBehaviors":{"!type":"fn(obj: ?) -> !this","!doc":"<p>Applies event listeners to elements by selectors when the document is ready.\nThe event name is specified with an <code>@</code> suffix.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-addBehaviors\" rel=\"Ext-method-addBehaviors\" class=\"docClass\">Ext.addBehaviors</a>({\n    // add a listener for click on all anchors in element with id foo\n    '#foo a@click' : function(e, t){\n        // do something\n    },\n\n    // add the same listener to multiple selectors (separated by comma BEFORE the @)\n    '#foo a, #bar span.some-class@mouseover' : function(){\n        // do something\n    }\n});\n</code></pre>\n"},"addNamespaces":{"!type":"fn(namespace: string|[string]) -> !this","!doc":"<p>Adds namespace(s) to known list.</p>\n"},"application":{"!type":"fn(config: ?|string) -> !this","!doc":"<p>Loads <a href=\"#!/api/Ext.app.Application\" rel=\"Ext.app.Application\" class=\"docClass\">Ext.app.Application</a> class and starts it up with given configuration after the\npage is ready.</p>\n\n<p>See <code><a href=\"#!/api/Ext.app.Application\" rel=\"Ext.app.Application\" class=\"docClass\">Ext.app.Application</a></code> for details.</p>\n"},"apply":{"!type":"fn(object: ?, config: ?, defaults?: ?) -> ?","!doc":"<p>Copies all the properties of config to the specified object.\nNote that if recursive merging and cloning without referencing the original objects / arrays is needed, use\n<a href=\"#!/api/Ext.Object-method-merge\" rel=\"Ext.Object-method-merge\" class=\"docClass\">Ext.Object.merge</a> instead.</p>\n"},"applyIf":{"!type":"fn(object: ?, config: ?) -> ?","!doc":"<p>Copies all the properties of config to object if they don't already exist.</p>\n"},"batchLayouts":{"!type":"fn(fn: fn(), scope?: ?) -> !this","!doc":"<p>Utility wrapper that suspends layouts of all components for the duration of a given function.</p>\n"},"bind":{"!type":"fn(fn: fn(), scope?: ?, args?: [?], appendArgs?: bool|number) -> fn()","!doc":"<p>Create a new function from the provided <code>fn</code>, change <code>this</code> to the provided scope, optionally\noverrides arguments for the call. (Defaults to the arguments passed by the caller)</p>\n\n<p><a href=\"#!/api/Ext-method-bind\" rel=\"Ext-method-bind\" class=\"docClass\">Ext.bind</a> is alias for <a href=\"#!/api/Ext.Function-method-bind\" rel=\"Ext.Function-method-bind\" class=\"docClass\">Ext.Function.bind</a></p>\n"},"callback":{"!type":"fn(callback: fn(), scope?: ?, args?: [?], delay?: number) -> ?","!doc":"<p>Execute a callback function in a particular scope. If <code>callback</code> argument is a\nfunction reference, that is called. If it is a string, the string is assumed to\nbe the name of a method on the given <code>scope</code>. If no function is passed the call\nis ignored.</p>\n\n<p>For example, these calls are equivalent:</p>\n\n<pre><code> var myFunc = this.myFunc;\n\n <a href=\"#!/api/Ext-method-callback\" rel=\"Ext-method-callback\" class=\"docClass\">Ext.callback</a>('myFunc', this, [arg1, arg2]);\n <a href=\"#!/api/Ext-method-callback\" rel=\"Ext-method-callback\" class=\"docClass\">Ext.callback</a>(myFunc, this, [arg1, arg2]);\n\n <a href=\"#!/api/Ext-method-isFunction\" rel=\"Ext-method-isFunction\" class=\"docClass\">Ext.isFunction</a>(myFunc) &amp;&amp; this.myFunc(arg1, arg2);\n</code></pre>\n"},"clean":{"!type":"fn(array: [?]) -> [?]","!doc":"<p>Old alias to <a href=\"#!/api/Ext.Array-method-clean\" rel=\"Ext.Array-method-clean\" class=\"docClass\">Ext.Array.clean</a></p>\n"},"clearNamespaces":{"!type":"fn() -> !this","!doc":"<p>Clear all namespaces from known list.</p>\n"},"clone":{"!type":"fn(item: ?) -> ?","!doc":"<p>Clone simple variables including array, {}-like objects, DOM nodes and Date without keeping the old reference.\nA reference for the object itself is returned if it's not a direct decendant of Object. For model cloning,\nsee <a href=\"#!/api/Ext.data.Model-method-copy\" rel=\"Ext.data.Model-method-copy\" class=\"docClass\">Model.copy</a>.</p>\n"},"coerce":{"!type":"fn(from: +Mixed, to: +Mixed) -> ?","!doc":"<p>Coerces the first value if possible so that it is comparable to the second value.</p>\n\n<p>Coercion only works between the basic atomic data types String, Boolean, Number, Date, null and undefined.</p>\n\n<p>Numbers and numeric strings are coerced to Dates using the value as the millisecond era value.</p>\n\n<p>Strings are coerced to Dates by parsing using the <a href=\"#!/api/Ext.Date-property-defaultFormat\" rel=\"Ext.Date-property-defaultFormat\" class=\"docClass\">defaultFormat</a>.</p>\n\n<p>For example</p>\n\n<pre><code><a href=\"#!/api/Ext-method-coerce\" rel=\"Ext-method-coerce\" class=\"docClass\">Ext.coerce</a>('false', true);\n</code></pre>\n\n<p>returns the boolean value <code>false</code> because the second parameter is of type <code>Boolean</code>.</p>\n"},"collectNamespaces":{"!type":"fn(paths: ?) -> !this"},"copyTo":{"!type":"fn(dest: ?, source: ?, names: string|[string], usePrototypeKeys?: bool) -> ?","!doc":"<p>Copies a set of named properties fom the source object to the destination object.</p>\n\n<p>Example:</p>\n\n<pre><code>ImageComponent = <a href=\"#!/api/Ext-method-extend\" rel=\"Ext-method-extend\" class=\"docClass\">Ext.extend</a>(<a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>, {\n    initComponent: function() {\n        this.autoEl = { tag: 'img' };\n        MyComponent.superclass.initComponent.apply(this, arguments);\n        this.initialBox = <a href=\"#!/api/Ext-method-copyTo\" rel=\"Ext-method-copyTo\" class=\"docClass\">Ext.copyTo</a>({}, this.initialConfig, 'x,y,width,height');\n    }\n});\n</code></pre>\n\n<p>Important note: To borrow class prototype methods, use <a href=\"#!/api/Ext.Base-static-method-borrow\" rel=\"Ext.Base-static-method-borrow\" class=\"docClass\">Ext.Base.borrow</a> instead.</p>\n"},"create":{"!type":"fn(name?: string, args?: ?) -> ?","!doc":"<p>Instantiate a class by either full name, alias or alternate name.</p>\n\n<p>If <a href=\"#!/api/Ext.Loader\" rel=\"Ext.Loader\" class=\"docClass\">Ext.Loader</a> is <a href=\"#!/api/Ext.Loader-method-setConfig\" rel=\"Ext.Loader-method-setConfig\" class=\"docClass\">enabled</a> and the class has\nnot been defined yet, it will attempt to load the class via synchronous loading.</p>\n\n<p>For example, all these three lines return the same result:</p>\n\n<pre><code> // alias\n var window = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('widget.window', {\n     width: 600,\n     height: 800,\n     ...\n });\n\n // alternate name\n var window = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.window.Window\" rel=\"Ext.window.Window\" class=\"docClass\">Ext.Window</a>', {\n     width: 600,\n     height: 800,\n     ...\n });\n\n // full class name\n var window = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.window.Window\" rel=\"Ext.window.Window\" class=\"docClass\">Ext.window.Window</a>', {\n     width: 600,\n     height: 800,\n     ...\n });\n\n // single object with xclass property:\n var window = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>({\n     xclass: '<a href=\"#!/api/Ext.window.Window\" rel=\"Ext.window.Window\" class=\"docClass\">Ext.window.Window</a>', // any valid value for 'name' (above)\n     width: 600,\n     height: 800,\n     ...\n });\n</code></pre>\n"},"createByAlias":{"!type":"fn(alias: string, args: ?) -> ?","!doc":"<p>Instantiate a class by its alias.</p>\n\n<p><a href=\"#!/api/Ext.ClassManager-method-instantiateByAlias\" rel=\"Ext.ClassManager-method-instantiateByAlias\" class=\"docClass\">Ext.ClassManager.instantiateByAlias</a> is usually invoked by the shorthand <a href=\"#!/api/Ext-method-createByAlias\" rel=\"Ext-method-createByAlias\" class=\"docClass\">createByAlias</a>.</p>\n\n<p>If <a href=\"#!/api/Ext.Loader\" rel=\"Ext.Loader\" class=\"docClass\">Ext.Loader</a> is <a href=\"#!/api/Ext.Loader-method-setConfig\" rel=\"Ext.Loader-method-setConfig\" class=\"docClass\">enabled</a> and the class has not been defined yet, it will\nattempt to load the class via synchronous loading.</p>\n\n<pre><code>var window = <a href=\"#!/api/Ext-method-createByAlias\" rel=\"Ext-method-createByAlias\" class=\"docClass\">Ext.createByAlias</a>('widget.window', { width: 600, height: 800, ... });\n</code></pre>\n"},"createWidget":{"!type":"fn() -> !this","!doc":"<p>Old name for <a href=\"#!/api/Ext-method-widget\" rel=\"Ext-method-widget\" class=\"docClass\">widget</a>.</p>\n"},"decode":{"!type":"fn(json: string, safe?: bool) -> ?","!doc":"<p>Shorthand for <a href=\"#!/api/Ext.JSON-method-decode\" rel=\"Ext.JSON-method-decode\" class=\"docClass\">Ext.JSON.decode</a></p>\n"},"defer":{"!type":"fn(fn: fn(), millis: number, scope?: ?, args?: [?], appendArgs?: bool|number) -> number","!doc":"<p>Calls this function after the number of millseconds specified, optionally in a specific scope. Example usage:</p>\n\n<pre><code>var sayHi = function(name){\n    alert('Hi, ' + name);\n}\n\n// executes immediately:\nsayHi('Fred');\n\n// executes after 2 seconds:\n<a href=\"#!/api/Ext.Function-method-defer\" rel=\"Ext.Function-method-defer\" class=\"docClass\">Ext.Function.defer</a>(sayHi, 2000, this, ['Fred']);\n\n// this syntax is sometimes useful for deferring\n// execution of an anonymous function:\n<a href=\"#!/api/Ext.Function-method-defer\" rel=\"Ext.Function-method-defer\" class=\"docClass\">Ext.Function.defer</a>(function(){\n    alert('Anonymous');\n}, 100);\n</code></pre>\n\n<p><a href=\"#!/api/Ext-method-defer\" rel=\"Ext-method-defer\" class=\"docClass\">Ext.defer</a> is alias for <a href=\"#!/api/Ext.Function-method-defer\" rel=\"Ext.Function-method-defer\" class=\"docClass\">Ext.Function.defer</a></p>\n"},"define":{"!type":"fn(className: string, data: ?, createdFn: fn()) -> +Ext.Base","!doc":"<p>Defines a class or override. A basic class is defined like this:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.awesome.Class', {\n     someProperty: 'something',\n\n     someMethod: function(s) {\n         alert(s + this.someProperty);\n     }\n\n     ...\n });\n\n var obj = new My.awesome.Class();\n\n obj.someMethod('Say '); // alerts 'Say something'\n</code></pre>\n\n<p>To create an anonymous class, pass <code>null</code> for the <code>className</code>:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>(null, {\n     constructor: function () {\n         // ...\n     }\n });\n</code></pre>\n\n<p>In some cases, it is helpful to create a nested scope to contain some private\nproperties. The best way to do this is to pass a function instead of an object\nas the second parameter. This function will be called to produce the class\nbody:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('MyApp.foo.Bar', function () {\n     var id = 0;\n\n     return {\n         nextId: function () {\n             return ++id;\n         }\n     };\n });\n</code></pre>\n\n<p><em>Note</em> that when using override, the above syntax will not override successfully, because\nthe passed function would need to be executed first to determine whether or not the result\nis an override or defining a new object. As such, an alternative syntax that immediately\ninvokes the function can be used:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('MyApp.override.BaseOverride', function () {\n     var counter = 0;\n\n     return {\n         override: '<a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>',\n         logId: function () {\n             console.log(++counter, this.id);\n         }\n     };\n }());\n</code></pre>\n\n<p>When using this form of <code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a></code>, the function is passed a reference to its\nclass. This can be used as an efficient way to access any static properties you\nmay have:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('MyApp.foo.Bar', function (Bar) {\n     return {\n         statics: {\n             staticMethod: function () {\n                 // ...\n             }\n         },\n\n         method: function () {\n             return Bar.staticMethod();\n         }\n     };\n });\n</code></pre>\n\n<p>To define an override, include the <code>override</code> property. The content of an\noverride is aggregated with the specified class in order to extend or modify\nthat class. This can be as simple as setting default property values or it can\nextend and/or replace methods. This can also extend the statics of the class.</p>\n\n<p>One use for an override is to break a large class into manageable pieces.</p>\n\n<pre><code> // File: /src/app/Panel.js\n\n <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.app.Panel', {\n     extend: '<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>',\n     requires: [\n         'My.app.PanelPart2',\n         'My.app.PanelPart3'\n     ]\n\n     constructor: function (config) {\n         this.callParent(arguments); // calls <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>'s constructor\n         //...\n     },\n\n     statics: {\n         method: function () {\n             return 'abc';\n         }\n     }\n });\n\n // File: /src/app/PanelPart2.js\n <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.app.PanelPart2', {\n     override: 'My.app.Panel',\n\n     constructor: function (config) {\n         this.callParent(arguments); // calls My.app.Panel's constructor\n         //...\n     }\n });\n</code></pre>\n\n<p>Another use of overrides is to provide optional parts of classes that can be\nindependently required. In this case, the class may even be unaware of the\noverride altogether.</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.ux.CoolTip', {\n     override: '<a href=\"#!/api/Ext.tip.ToolTip\" rel=\"Ext.tip.ToolTip\" class=\"docClass\">Ext.tip.ToolTip</a>',\n\n     constructor: function (config) {\n         this.callParent(arguments); // calls <a href=\"#!/api/Ext.tip.ToolTip\" rel=\"Ext.tip.ToolTip\" class=\"docClass\">Ext.tip.ToolTip</a>'s constructor\n         //...\n     }\n });\n</code></pre>\n\n<p>The above override can now be required as normal.</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.app.App', {\n     requires: [\n         'My.ux.CoolTip'\n     ]\n });\n</code></pre>\n\n<p>Overrides can also contain statics:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.app.BarMod', {\n     override: 'Ext.foo.Bar',\n\n     statics: {\n         method: function (x) {\n             return this.callParent([x * 2]); // call Ext.foo.Bar.method\n         }\n     }\n });\n</code></pre>\n\n<p>IMPORTANT: An override is only included in a build if the class it overrides is\nrequired. Otherwise, the override, like the target class, is not included.</p>\n"},"deprecate":{"!type":"fn(packageName: string, since: string, closure: fn(), scope: ?) -> !this","!doc":"<p>Create a closure for deprecated code.</p>\n\n<pre><code>// This means Ext.oldMethod is only supported in 4.0.0beta and older.\n// If <a href=\"#!/api/Ext-method-getVersion\" rel=\"Ext-method-getVersion\" class=\"docClass\">Ext.getVersion</a>('extjs') returns a version that is later than '4.0.0beta', for example '4.0.0RC',\n// the closure will not be invoked\n<a href=\"#!/api/Ext-method-deprecate\" rel=\"Ext-method-deprecate\" class=\"docClass\">Ext.deprecate</a>('extjs', '4.0.0beta', function() {\n    Ext.oldMethod = Ext.newMethod;\n\n    ...\n});\n</code></pre>\n"},"destroy":{"!type":"fn(args: +Ext.dom.Element|+Ext.util.Observable|[+Ext.dom.Element]|[+Ext.util.Observable]) -> !this","!doc":"<p>Attempts to destroy any objects passed to it by removing all event listeners, removing them from the\nDOM (if applicable) and calling their destroy functions (if available).  This method is primarily\nintended for arguments of type <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a> and <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>, but any subclass of\n<a href=\"#!/api/Ext.util.Observable\" rel=\"Ext.util.Observable\" class=\"docClass\">Ext.util.Observable</a> can be passed in.  Any number of elements and/or components can be\npassed into this function in a single call as separate arguments.</p>\n"},"destroyMembers":{"!type":"fn(o: ?, args: string) -> !this","!doc":"<p>Attempts to destroy and then remove a set of named properties of the passed object.</p>\n"},"each":{"!type":"fn(iterable: [?]|+NodeList|?, fn: fn(), scope?: ?, reverse?: bool) -> bool","!doc":"<p>Iterates an array or an iterable value and invoke the given callback function for each item.</p>\n\n<pre><code>var countries = ['Vietnam', 'Singapore', 'United States', 'Russia'];\n\n<a href=\"#!/api/Ext.Array-method-each\" rel=\"Ext.Array-method-each\" class=\"docClass\">Ext.Array.each</a>(countries, function(name, index, countriesItSelf) {\n    console.log(name);\n});\n\nvar sum = function() {\n    var sum = 0;\n\n    <a href=\"#!/api/Ext.Array-method-each\" rel=\"Ext.Array-method-each\" class=\"docClass\">Ext.Array.each</a>(arguments, function(value) {\n        sum += value;\n    });\n\n    return sum;\n};\n\nsum(1, 2, 3); // returns 6\n</code></pre>\n\n<p>The iteration can be stopped by returning false in the function callback.</p>\n\n<pre><code><a href=\"#!/api/Ext.Array-method-each\" rel=\"Ext.Array-method-each\" class=\"docClass\">Ext.Array.each</a>(countries, function(name, index, countriesItSelf) {\n    if (name === 'Singapore') {\n        return false; // break here\n    }\n});\n</code></pre>\n\n<p><a href=\"#!/api/Ext-method-each\" rel=\"Ext-method-each\" class=\"docClass\">Ext.each</a> is alias for <a href=\"#!/api/Ext.Array-method-each\" rel=\"Ext.Array-method-each\" class=\"docClass\">Ext.Array.each</a></p>\n"},"encode":{"!type":"fn(o: ?) -> string","!doc":"<p>Shorthand for <a href=\"#!/api/Ext.JSON-method-encode\" rel=\"Ext.JSON-method-encode\" class=\"docClass\">Ext.JSON.encode</a></p>\n"},"escapeRe":{"!type":"fn(str: string) -> string","!doc":"<p>Escapes the passed string for use in a regular expression.</p>\n"},"exclude":{"!type":"fn(excludes: [?]) -> ?","!doc":"<p>Convenient shortcut to <a href=\"#!/api/Ext.Loader-method-exclude\" rel=\"Ext.Loader-method-exclude\" class=\"docClass\">Ext.Loader.exclude</a></p>\n"},"extend":{"!type":"fn(superclass: fn(), overrides: ?) -> fn()","!doc":"<p>This method deprecated. Use <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a> instead.</p>\n"},"flatten":{"!type":"fn(array: [?]) -> [?]","!doc":"<p>Old alias to <a href=\"#!/api/Ext.Array-method-flatten\" rel=\"Ext.Array-method-flatten\" class=\"docClass\">Ext.Array.flatten</a></p>\n"},"fly":{"!type":"fn(dom: string|+HTMLElement, named?: string) -> +Ext.dom.Element.Fly","!doc":"<p>Gets the singleton <a href=\"#!/api/Ext.dom.Element.Fly\" rel=\"Ext.dom.Element.Fly\" class=\"docClass\">flyweight</a> element, with the passed node as the active element.</p>\n\n<p>Because it is a singleton, this Flyweight does not have an ID, and must be used and discarded in a single line.\nYou may not keep and use the reference to this singleton over multiple lines because methods that you call\nmay themselves make use of <a href=\"#!/api/Ext-method-fly\" rel=\"Ext-method-fly\" class=\"docClass\">fly</a> and may change the DOM element to which the instance refers.</p>\n\n<p><a href=\"#!/api/Ext-method-fly\" rel=\"Ext-method-fly\" class=\"docClass\">fly</a> is alias for <a href=\"#!/api/Ext.dom.AbstractElement-static-method-fly\" rel=\"Ext.dom.AbstractElement-static-method-fly\" class=\"docClass\">Ext.dom.AbstractElement.fly</a>.</p>\n\n<p>Use this to make one-time references to DOM elements which are not going to be accessed again either by\napplication code, or by Ext's classes. If accessing an element which will be processed regularly, then <a href=\"#!/api/Ext-method-get\" rel=\"Ext-method-get\" class=\"docClass\">Ext.get</a> will be more appropriate to take advantage of the caching provided by the <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.dom.Element</a>\nclass.</p>\n"},"get":{"!type":"fn(el: string|+HTMLElement|+Ext.Element) -> +Ext.dom.Element","!doc":"<p>Retrieves <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.dom.Element</a> objects. <a href=\"#!/api/Ext-method-get\" rel=\"Ext-method-get\" class=\"docClass\">get</a> is alias for <a href=\"#!/api/Ext.dom.Element-static-method-get\" rel=\"Ext.dom.Element-static-method-get\" class=\"docClass\">Ext.dom.Element.get</a>.</p>\n\n<p><strong>This method does not retrieve <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Component</a>s.</strong> This method retrieves <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.dom.Element</a>\nobjects which encapsulate DOM elements. To retrieve a Component by its ID, use <a href=\"#!/api/Ext.ComponentManager-method-get\" rel=\"Ext.ComponentManager-method-get\" class=\"docClass\">Ext.ComponentManager.get</a>.</p>\n\n<p>When passing an id, it should not include the <code>#</code> character that is used for a css selector.</p>\n\n<pre><code>// For an element with id 'foo'\n<a href=\"#!/api/Ext-method-get\" rel=\"Ext-method-get\" class=\"docClass\">Ext.get</a>('foo'); // Correct\n<a href=\"#!/api/Ext-method-get\" rel=\"Ext-method-get\" class=\"docClass\">Ext.get</a>('#foo'); // Incorrect\n</code></pre>\n\n<p>Uses simple caching to consistently return the same object. Automatically fixes if an object was recreated with\nthe same id via AJAX or DOM.</p>\n"},"getBody":{"!type":"fn() -> +Ext.Element","!doc":"<p>Returns the current document body as an <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a>.</p>\n"},"getClass":{"!type":"fn(object: ?) -> +Ext.Class","!doc":"<p>Get the class of the provided object; returns null if it's not an instance\nof any class created with <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>.</p>\n\n<p><a href=\"#!/api/Ext.ClassManager-method-getClass\" rel=\"Ext.ClassManager-method-getClass\" class=\"docClass\">Ext.ClassManager.getClass</a> is usually invoked by the shorthand <a href=\"#!/api/Ext-method-getClass\" rel=\"Ext-method-getClass\" class=\"docClass\">getClass</a>.</p>\n\n<pre><code>var component = new <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>();\n\n<a href=\"#!/api/Ext-method-getClass\" rel=\"Ext-method-getClass\" class=\"docClass\">Ext.getClass</a>(component); // returns <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\n</code></pre>\n"},"getClassName":{"!type":"fn(object: +Ext.Class|?) -> string","!doc":"<p>Get the name of the class by its reference or its instance;</p>\n\n<p><a href=\"#!/api/Ext.ClassManager-method-getName\" rel=\"Ext.ClassManager-method-getName\" class=\"docClass\">Ext.ClassManager.getName</a> is usually invoked by the shorthand <a href=\"#!/api/Ext-method-getClassName\" rel=\"Ext-method-getClassName\" class=\"docClass\">getClassName</a>.</p>\n\n<pre><code>Ext.getName(<a href=\"#!/api/Ext.Action\" rel=\"Ext.Action\" class=\"docClass\">Ext.Action</a>); // returns \"<a href=\"#!/api/Ext.Action\" rel=\"Ext.Action\" class=\"docClass\">Ext.Action</a>\"\n</code></pre>\n"},"getCmp":{"!type":"fn(id: string) -> ?","!doc":"<p>This is shorthand reference to <a href=\"#!/api/Ext.ComponentManager-method-get\" rel=\"Ext.ComponentManager-method-get\" class=\"docClass\">Ext.ComponentManager.get</a>.\nLooks up an existing <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Component</a> by <a href=\"#!/api/Ext.Component-cfg-id\" rel=\"Ext.Component-cfg-id\" class=\"docClass\">id</a></p>\n"},"getDetachedBody":{"!type":"fn() -> !this"},"getDoc":{"!type":"fn() -> +Ext.Element","!doc":"<p>Returns the current HTML document object as an <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a>.</p>\n"},"getDom":{"!type":"fn(el: string|+HTMLElement|+Ext.Element) -> ?","!doc":"<p>Returns the dom node for the passed String (id), dom node, or <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a>.\nOptional 'strict' flag is needed for IE since it can return 'name' and\n'id' elements by using getElementById.</p>\n\n<p>Here are some examples:</p>\n\n<pre><code>// gets dom node based on id\nvar elDom = <a href=\"#!/api/Ext-method-getDom\" rel=\"Ext-method-getDom\" class=\"docClass\">Ext.getDom</a>('elId');\n// gets dom node based on the dom node\nvar elDom1 = <a href=\"#!/api/Ext-method-getDom\" rel=\"Ext-method-getDom\" class=\"docClass\">Ext.getDom</a>(elDom);\n\n// If we don&amp;#39;t know if we are working with an\n// <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a> or a dom node use <a href=\"#!/api/Ext-method-getDom\" rel=\"Ext-method-getDom\" class=\"docClass\">Ext.getDom</a>\nfunction(el){\n    var dom = <a href=\"#!/api/Ext-method-getDom\" rel=\"Ext-method-getDom\" class=\"docClass\">Ext.getDom</a>(el);\n    // do something with the dom node\n}\n</code></pre>\n\n<p><strong>Note:</strong> the dom node to be found actually needs to exist (be rendered, etc)\nwhen this method is called to be successful.</p>\n"},"getElementById":{"!type":"fn(id: ?) -> !this"},"getHead":{"!type":"fn() -> +Ext.Element","!doc":"<p>Returns the current document head as an <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a>.</p>\n"},"getNamespace":{"!type":"fn(className: string) -> string","!doc":"<p>Get namespace prefix for a class name.</p>\n"},"getOrientation":{"!type":"fn() -> string","!doc":"<p>Returns the current orientation of the mobile device</p>\n"},"getScrollBarWidth":{"!type":"fn(force?: bool) -> number","!doc":"<p>Utility method for getting the width of the browser's vertical scrollbar. This\ncan differ depending on operating system settings, such as the theme or font size.</p>\n\n<p>This method is deprected in favor of <a href=\"#!/api/Ext-method-getScrollbarSize\" rel=\"Ext-method-getScrollbarSize\" class=\"docClass\">getScrollbarSize</a>.</p>\n"},"getScrollbarSize":{"!type":"fn(force?: bool) -> ?","!doc":"<p>Returns the size of the browser scrollbars. This can differ depending on\noperating system settings, such as the theme or font size.</p>\n"},"getStore":{"!type":"fn(store: string|?) -> +Ext.data.Store","!doc":"<p>Shortcut to <a href=\"#!/api/Ext.data.StoreManager-method-lookup\" rel=\"Ext.data.StoreManager-method-lookup\" class=\"docClass\">Ext.data.StoreManager.lookup</a>.</p>\n"},"getUniqueGlobalNamespace":{"!type":"fn() -> !this","!doc":"<p>Generate a unique reference of Ext in the global scope, useful for sandboxing</p>\n"},"getVersion":{"!type":"fn(packageName?: string) -> +Ext.Version","!doc":"<p>Get the version number of the supplied package name; will return the last registered version\n(last <a href=\"#!/api/Ext-method-setVersion\" rel=\"Ext-method-setVersion\" class=\"docClass\">Ext.setVersion</a> call) if there's no package name given.</p>\n"},"htmlDecode":{"!type":"fn(value: string) -> string","!doc":"<p>Old alias to <a href=\"#!/api/Ext.String-method-htmlDecode\" rel=\"Ext.String-method-htmlDecode\" class=\"docClass\">Ext.String.htmlDecode</a></p>\n"},"htmlEncode":{"!type":"fn(value: string) -> string","!doc":"<p>Old alias to <a href=\"#!/api/Ext.String-method-htmlEncode\" rel=\"Ext.String-method-htmlEncode\" class=\"docClass\">Ext.String.htmlEncode</a></p>\n"},"id":{"!type":"fn(el?: +HTMLElement|+Ext.Element, prefix?: string) -> string","!doc":"<p>Generates unique ids. If the element already has an id, it is unchanged</p>\n"},"identityFn":{"!type":"fn(o: ?) -> !this","!doc":"<p>A reusable identity function. The function will always return the first argument, unchanged.</p>\n"},"invoke":{"!type":"fn(arr: [?]|+NodeList, methodName: string, args: ?) -> [?]","!doc":"<p>Invokes a method on each item in an Array.</p>\n\n<p>Example:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-invoke\" rel=\"Ext-method-invoke\" class=\"docClass\">Ext.invoke</a>(<a href=\"#!/api/Ext-method-query\" rel=\"Ext-method-query\" class=\"docClass\">Ext.query</a>(\"p\"), \"getAttribute\", \"id\");\n// [el1.getAttribute(\"id\"), el2.getAttribute(\"id\"), ..., elN.getAttribute(\"id\")]\n</code></pre>\n"},"isArray":{"!type":"fn(target: ?) -> bool","!doc":"<p>Returns true if the passed value is a JavaScript Array, false otherwise.</p>\n"},"isBoolean":{"!type":"fn(value: ?) -> bool","!doc":"<p>Returns true if the passed value is a boolean.</p>\n"},"isDate":{"!type":"fn(object: ?) -> bool","!doc":"<p>Returns true if the passed value is a JavaScript Date object, false otherwise.</p>\n"},"isDefined":{"!type":"fn(value: ?) -> bool","!doc":"<p>Returns true if the passed value is defined.</p>\n"},"isElement":{"!type":"fn(value: ?) -> bool","!doc":"<p>Returns true if the passed value is an HTMLElement</p>\n"},"isEmpty":{"!type":"fn(value: ?, allowEmptyString?: bool) -> bool","!doc":"<p>Returns true if the passed value is empty, false otherwise. The value is deemed to be empty if it is either:</p>\n\n<ul>\n<li><code>null</code></li>\n<li><code>undefined</code></li>\n<li>a zero-length array</li>\n<li>a zero-length string (Unless the <code>allowEmptyString</code> parameter is set to <code>true</code>)</li>\n</ul>\n\n"},"isFunction":{"!type":"fn(value: ?) -> bool","!doc":"<p>Returns true if the passed value is a JavaScript Function, false otherwise.</p>\n"},"isIterable":{"!type":"fn(value: ?) -> bool","!doc":"<p>Returns <code>true</code> if the passed value is iterable, that is, if elements of it are addressable using array\nnotation with numeric indices, <code>false</code> otherwise.</p>\n\n<p>Arrays and function <code>arguments</code> objects are iterable. Also HTML collections such as <code>NodeList</code> and `HTMLCollection'\nare iterable.</p>\n"},"isNumber":{"!type":"fn(value: ?) -> bool","!doc":"<p>Returns true if the passed value is a number. Returns false for non-finite numbers.</p>\n"},"isNumeric":{"!type":"fn(value: ?) -> bool","!doc":"<p>Validates that a value is numeric.</p>\n"},"isObject":{"!type":"fn(value: ?) -> bool","!doc":"<p>Returns true if the passed value is a JavaScript Object, false otherwise.</p>\n"},"isPrimitive":{"!type":"fn(value: ?) -> bool","!doc":"<p>Returns true if the passed value is a JavaScript 'primitive', a string, number or boolean.</p>\n"},"isSimpleObject":{"!type":"fn(value: ?) -> !this"},"isString":{"!type":"fn(value: ?) -> bool","!doc":"<p>Returns true if the passed value is a string.</p>\n"},"isTextNode":{"!type":"fn(value: ?) -> bool","!doc":"<p>Returns true if the passed value is a TextNode</p>\n"},"iterate":{"!type":"fn(object: ?|[?], fn: fn(), scope?: ?) -> !this","!doc":"<p>Iterates either an array or an object. This method delegates to\n<a href=\"#!/api/Ext.Array-method-each\" rel=\"Ext.Array-method-each\" class=\"docClass\">Ext.Array.each</a> if the given value is iterable, and <a href=\"#!/api/Ext.Object-method-each\" rel=\"Ext.Object-method-each\" class=\"docClass\">Ext.Object.each</a> otherwise.</p>\n"},"log":{"!type":"fn(options?: string|?, message?: string) -> !this","!doc":"<p>Logs a message. If a console is present it will be used. On Opera, the method\n\"opera.postError\" is called. In other cases, the message is logged to an array\n\"Ext.log.out\". An attached debugger can watch this array and view the log. The\nlog buffer is limited to a maximum of \"Ext.log.max\" entries (defaults to 250).\nThe <code>Ext.log.out</code> array can also be written to a popup window by entering the\nfollowing in the URL bar (a \"bookmarklet\"):</p>\n\n<pre><code>javascript:void(Ext.log.show());\n</code></pre>\n\n<p>If additional parameters are passed, they are joined and appended to the message.\nA technique for tracing entry and exit of a function is this:</p>\n\n<pre><code>function foo () {\n    <a href=\"#!/api/Ext-method-log\" rel=\"Ext-method-log\" class=\"docClass\">Ext.log</a>({ indent: 1 }, '&gt;&gt; foo');\n\n    // log statements in here or methods called from here will be indented\n    // by one step\n\n    <a href=\"#!/api/Ext-method-log\" rel=\"Ext-method-log\" class=\"docClass\">Ext.log</a>({ outdent: 1 }, '&lt;&lt; foo');\n}\n</code></pre>\n\n<p>This method does nothing in a release build.</p>\n"},"max":{"!type":"fn(array: [?]|+NodeList, comparisonFn?: fn()) -> ?","!doc":"<p>Old alias to <a href=\"#!/api/Ext.Array-method-max\" rel=\"Ext.Array-method-max\" class=\"docClass\">Ext.Array.max</a></p>\n"},"mean":{"!type":"fn(array: [?]) -> number","!doc":"<p>Old alias to <a href=\"#!/api/Ext.Array-method-mean\" rel=\"Ext.Array-method-mean\" class=\"docClass\">Ext.Array.mean</a></p>\n"},"merge":{"!type":"fn(destination: ?, object: ?) -> ?","!doc":"<p>A convenient alias method for <a href=\"#!/api/Ext.Object-method-merge\" rel=\"Ext.Object-method-merge\" class=\"docClass\">Ext.Object.merge</a>.</p>\n"},"min":{"!type":"fn(array: [?]|+NodeList, comparisonFn?: fn()) -> ?","!doc":"<p>Old alias to <a href=\"#!/api/Ext.Array-method-min\" rel=\"Ext.Array-method-min\" class=\"docClass\">Ext.Array.min</a></p>\n"},"namespace":{"!type":"fn(namespaces: string) -> ?","!doc":"<p>Creates namespaces to be used for scoping variables and classes so that they are not global.\nSpecifying the last node of a namespace implicitly creates all other nodes. Usage:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-namespace\" rel=\"Ext-method-namespace\" class=\"docClass\">Ext.namespace</a>('Company', 'Company.data');\n\n// equivalent and preferable to the above syntax\n<a href=\"#!/api/Ext-method-ns\" rel=\"Ext-method-ns\" class=\"docClass\">Ext.ns</a>('Company.data');\n\nCompany.Widget = function() { ... };\n\nCompany.data.CustomStore = function(config) { ... };\n</code></pre>\n"},"ns":{"!type":"fn(namespaces: string) -> ?","!doc":"<p>Convenient alias for <a href=\"#!/api/Ext-method-namespace\" rel=\"Ext-method-namespace\" class=\"docClass\">Ext.namespace</a>.</p>\n"},"num":{"!type":"fn(value: ?, defaultValue: number) -> number","!doc":"<p>Validate that a value is numeric and convert it to a number if necessary. Returns the specified default value if\nit is not.</p>\n\n<pre><code><a href=\"#!/api/Ext.Number-method-from\" rel=\"Ext.Number-method-from\" class=\"docClass\">Ext.Number.from</a>('1.23', 1); // returns 1.23\n<a href=\"#!/api/Ext.Number-method-from\" rel=\"Ext.Number-method-from\" class=\"docClass\">Ext.Number.from</a>('abc', 1); // returns 1\n</code></pre>\n"},"on":{"!type":"fn(eventName: string|?, fn?: fn(), scope?: ?, options?: ?) -> ?","!doc":"<p>Shorthand for the <a href=\"#!/api/Ext.util.Observable-method-addListener\" rel=\"Ext.util.Observable-method-addListener\" class=\"docClass\">Ext.util.Observable.addListener</a> method of the\n<a href=\"#!/api/Ext-property-globalEvents\" rel=\"Ext-property-globalEvents\" class=\"docClass\">globalEvents</a> Observable instance.</p>\n"},"onDocumentReady":{"!type":"fn(fn: fn(), scope?: ?, options?: ?) -> !this","!doc":"<p>Adds a listener to be notified when the document is ready (before onload and before images are loaded).</p>\n\n<p><a href=\"#!/api/Ext-method-onDocumentReady\" rel=\"Ext-method-onDocumentReady\" class=\"docClass\">onDocumentReady</a> is an alias for <a href=\"#!/api/Ext.EventManager-method-onDocumentReady\" rel=\"Ext.EventManager-method-onDocumentReady\" class=\"docClass\">Ext.EventManager.onDocumentReady</a>.</p>\n"},"onReady":{"!type":"fn(fn: fn(), scope: ?, options: ?) -> !this","!doc":"<p>Adds a function to be called when the DOM is ready, and all required classes have been loaded.</p>\n\n<p>If the DOM is ready and all classes are loaded, the passed function is executed immediately.</p>\n"},"override":{"!type":"fn(target: ?, overrides: ?) -> !this","!doc":"<p>Overrides members of the specified <code>target</code> with the given values.</p>\n\n<p>If the <code>target</code> is a class declared using <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>, the\n<code>override</code> method of that class is called (see <a href=\"#!/api/Ext.Base-static-method-override\" rel=\"Ext.Base-static-method-override\" class=\"docClass\">Ext.Base.override</a>) given\nthe <code>overrides</code>.</p>\n\n<p>If the <code>target</code> is a function, it is assumed to be a constructor and the contents\nof <code>overrides</code> are applied to its <code>prototype</code> using <a href=\"#!/api/Ext-method-apply\" rel=\"Ext-method-apply\" class=\"docClass\">Ext.apply</a>.</p>\n\n<p>If the <code>target</code> is an instance of a class declared using <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>,\nthe <code>overrides</code> are applied to only that instance. In this case, methods are\nspecially processed to allow them to use <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">Ext.Base.callParent</a>.</p>\n\n<pre><code> var panel = new <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.Panel</a>({ ... });\n\n <a href=\"#!/api/Ext-method-override\" rel=\"Ext-method-override\" class=\"docClass\">Ext.override</a>(panel, {\n     initComponent: function () {\n         // extra processing...\n\n         this.callParent();\n     }\n });\n</code></pre>\n\n<p>If the <code>target</code> is none of these, the <code>overrides</code> are applied to the <code>target</code>\nusing <a href=\"#!/api/Ext-method-apply\" rel=\"Ext-method-apply\" class=\"docClass\">Ext.apply</a>.</p>\n\n<p>Please refer to <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a> and <a href=\"#!/api/Ext.Base-static-method-override\" rel=\"Ext.Base-static-method-override\" class=\"docClass\">Ext.Base.override</a> for\nfurther details.</p>\n"},"partition":{"!type":"fn(arr: [?]|+NodeList, truth?: fn()) -> [?]","!doc":"<p>Partitions the set into two sets: a true set and a false set.</p>\n\n<p>Example 1:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-partition\" rel=\"Ext-method-partition\" class=\"docClass\">Ext.partition</a>([true, false, true, true, false]);\n// returns [[true, true, true], [false, false]]\n</code></pre>\n\n<p>Example 2:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-partition\" rel=\"Ext-method-partition\" class=\"docClass\">Ext.partition</a>(\n    <a href=\"#!/api/Ext-method-query\" rel=\"Ext-method-query\" class=\"docClass\">Ext.query</a>(\"p\"),\n    function(val){\n        return val.className == \"class1\"\n    }\n);\n// true are those paragraph elements with a className of \"class1\",\n// false set are those that do not have that className.\n</code></pre>\n"},"pass":{"!type":"fn(fn: fn(), args: [?], scope?: ?) -> fn()","!doc":"<p>Create a new function from the provided <code>fn</code>, the arguments of which are pre-set to <code>args</code>.\nNew arguments passed to the newly created callback when it's invoked are appended after the pre-set ones.\nThis is especially useful when creating callbacks.</p>\n\n<p>For example:</p>\n\n<pre><code>var originalFunction = function(){\n    alert(<a href=\"#!/api/Ext.Array-method-from\" rel=\"Ext.Array-method-from\" class=\"docClass\">Ext.Array.from</a>(arguments).join(' '));\n};\n\nvar callback = <a href=\"#!/api/Ext.Function-method-pass\" rel=\"Ext.Function-method-pass\" class=\"docClass\">Ext.Function.pass</a>(originalFunction, ['Hello', 'World']);\n\ncallback(); // alerts 'Hello World'\ncallback('by Me'); // alerts 'Hello World by Me'\n</code></pre>\n\n<p><a href=\"#!/api/Ext-method-pass\" rel=\"Ext-method-pass\" class=\"docClass\">Ext.pass</a> is alias for <a href=\"#!/api/Ext.Function-method-pass\" rel=\"Ext.Function-method-pass\" class=\"docClass\">Ext.Function.pass</a></p>\n"},"pluck":{"!type":"fn(array: [?]|+NodeList, propertyName: string) -> [?]","!doc":"<p>Old alias to <a href=\"#!/api/Ext.Array-method-pluck\" rel=\"Ext.Array-method-pluck\" class=\"docClass\">Ext.Array.pluck</a></p>\n"},"preg":{"!type":"fn(ptype: string, cls: fn()) -> !this","!doc":"<p>Shorthand for <a href=\"#!/api/Ext.PluginManager-method-registerType\" rel=\"Ext.PluginManager-method-registerType\" class=\"docClass\">Ext.PluginManager.registerType</a></p>\n"},"query":{"!type":"fn(path: string, root?: +HTMLElement, type?: string, single?: bool) -> [+HTMLElement]","!doc":"<p>Shorthand of <a href=\"#!/api/Ext.dom.Query-method-select\" rel=\"Ext.dom.Query-method-select\" class=\"docClass\">Ext.dom.Query.select</a></p>\n"},"regModel":{"!type":"fn(name: string, config: ?) -> +Ext.data.Model","!doc":"<p>Old way for creating Model classes.  Instead use:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>(\"MyModel\", {\n    extend: \"<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>\",\n    fields: []\n});\n</code></pre>\n"},"regStore":{"!type":"fn(id: string, config: ?) -> !this","!doc":"<p>Creates a new store for the given id and config, then registers it with the <a href=\"#!/api/Ext.data.StoreManager\" rel=\"Ext.data.StoreManager\" class=\"docClass\">Store Manager</a>.\nSample usage:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-regStore\" rel=\"Ext-method-regStore\" class=\"docClass\">Ext.regStore</a>('AllUsers', {\n    model: 'User'\n});\n\n// the store can now easily be used throughout the application\nnew Ext.List({\n    store: 'AllUsers',\n    ... other config\n});\n</code></pre>\n"},"removeNode":{"!type":"fn(node: +HTMLElement) -> !this","!doc":"<p>Removes a DOM node from the document.</p>\n\n<p>Removes this element from the document, removes all DOM event listeners, and\ndeletes the cache reference. All DOM event listeners are removed from this element.\nIf <a href=\"#!/api/Ext-property-enableNestedListenerRemoval\" rel=\"Ext-property-enableNestedListenerRemoval\" class=\"docClass\">Ext.enableNestedListenerRemoval</a> is\n<code>true</code>, then DOM event listeners are also removed from all child nodes.\nThe body node will be ignored if passed in.</p>\n"},"require":{"!type":"fn(expressions: string|[?], fn?: fn(), scope?: ?, excludes?: string|[?]) -> !this","!doc":"<p>Loads all classes by the given names and all their direct dependencies; optionally executes\nthe given callback function when finishes, within the optional scope.</p>\n\n<p><a href=\"#!/api/Ext-method-require\" rel=\"Ext-method-require\" class=\"docClass\">require</a> is alias for <a href=\"#!/api/Ext.Loader-method-require\" rel=\"Ext.Loader-method-require\" class=\"docClass\">Ext.Loader.require</a>.</p>\n"},"resolveMethod":{"!type":"fn(fn: ?, scope: ?) -> !this"},"resumeLayouts":{"!type":"fn(flush: ?) -> !this"},"select":{"!type":"fn(selector: string, unique?: bool) -> +Ext.CompositeElement","!doc":"<p>Shorthand of <a href=\"#!/api/Ext.dom.Element-method-select\" rel=\"Ext.dom.Element-method-select\" class=\"docClass\">Ext.Element.select</a>.</p>\n"},"setGlyphFontFamily":{"!type":"fn(fontFamily: string) -> !this","!doc":"<p>Sets the default font-family to use for components that support a <code>glyph</code> config.</p>\n"},"setVersion":{"!type":"fn(packageName: string, version: string|+Ext.Version) -> +Ext","!doc":"<p>Set version number for the given package name.</p>\n"},"sum":{"!type":"fn(array: [?]) -> number","!doc":"<p>Old alias to <a href=\"#!/api/Ext.Array-method-sum\" rel=\"Ext.Array-method-sum\" class=\"docClass\">Ext.Array.sum</a></p>\n"},"suspendLayouts":{"!type":"fn() -> !this"},"syncRequire":{"!type":"fn(expressions: string|[?], fn?: fn(), scope?: ?, excludes?: string|[?]) -> !this","!doc":"<p>Synchronously loads all classes by the given names and all their direct dependencies; optionally\nexecutes the given callback function when finishes, within the optional scope.</p>\n\n<p><a href=\"#!/api/Ext-method-syncRequire\" rel=\"Ext-method-syncRequire\" class=\"docClass\">syncRequire</a> is alias for <a href=\"#!/api/Ext.Loader-method-syncRequire\" rel=\"Ext.Loader-method-syncRequire\" class=\"docClass\">Ext.Loader.syncRequire</a>.</p>\n"},"toArray":{"!type":"fn(iterable: ?, start?: number, end?: number) -> [?]","!doc":"<p>Converts any iterable (numeric indices and a length property) into a true array.</p>\n\n<pre><code>function test() {\n    var args = <a href=\"#!/api/Ext.Array-method-toArray\" rel=\"Ext.Array-method-toArray\" class=\"docClass\">Ext.Array.toArray</a>(arguments),\n        fromSecondToLastArgs = <a href=\"#!/api/Ext.Array-method-toArray\" rel=\"Ext.Array-method-toArray\" class=\"docClass\">Ext.Array.toArray</a>(arguments, 1);\n\n    alert(args.join(' '));\n    alert(fromSecondToLastArgs.join(' '));\n}\n\ntest('just', 'testing', 'here'); // alerts 'just testing here';\n                                 // alerts 'testing here';\n\n<a href=\"#!/api/Ext.Array-method-toArray\" rel=\"Ext.Array-method-toArray\" class=\"docClass\">Ext.Array.toArray</a>(document.getElementsByTagName('div')); // will convert the NodeList into an array\n<a href=\"#!/api/Ext.Array-method-toArray\" rel=\"Ext.Array-method-toArray\" class=\"docClass\">Ext.Array.toArray</a>('splitted'); // returns ['s', 'p', 'l', 'i', 't', 't', 'e', 'd']\n<a href=\"#!/api/Ext.Array-method-toArray\" rel=\"Ext.Array-method-toArray\" class=\"docClass\">Ext.Array.toArray</a>('splitted', 0, 3); // returns ['s', 'p', 'l']\n</code></pre>\n\n<p><a href=\"#!/api/Ext-method-toArray\" rel=\"Ext-method-toArray\" class=\"docClass\">Ext.toArray</a> is alias for <a href=\"#!/api/Ext.Array-method-toArray\" rel=\"Ext.Array-method-toArray\" class=\"docClass\">Ext.Array.toArray</a></p>\n"},"toSentence":{"!type":"fn(items: [string], connector: string) -> string","!doc":"<p>Turns an array into a sentence, joined by a specified connector - e.g.:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-toSentence\" rel=\"Ext-method-toSentence\" class=\"docClass\">Ext.toSentence</a>(['Adama', 'Tigh', 'Roslin']); //'Adama, Tigh and Roslin'\n<a href=\"#!/api/Ext-method-toSentence\" rel=\"Ext-method-toSentence\" class=\"docClass\">Ext.toSentence</a>(['Adama', 'Tigh', 'Roslin'], 'or'); //'Adama, Tigh or Roslin'\n</code></pre>\n"},"type":{"!type":"fn(value: ?) -> string","!doc":"<p>Old alias to <a href=\"#!/api/Ext-method-typeOf\" rel=\"Ext-method-typeOf\" class=\"docClass\">typeOf</a></p>\n"},"typeOf":{"!type":"fn(value: ?) -> string","!doc":"<p>Returns the type of the given variable in string format. List of possible values are:</p>\n\n<ul>\n<li><code>undefined</code>: If the given value is <code>undefined</code></li>\n<li><code>null</code>: If the given value is <code>null</code></li>\n<li><code>string</code>: If the given value is a string</li>\n<li><code>number</code>: If the given value is a number</li>\n<li><code>boolean</code>: If the given value is a boolean value</li>\n<li><code>date</code>: If the given value is a <code>Date</code> object</li>\n<li><code>function</code>: If the given value is a function reference</li>\n<li><code>object</code>: If the given value is an object</li>\n<li><code>array</code>: If the given value is an array</li>\n<li><code>regexp</code>: If the given value is a regular expression</li>\n<li><code>element</code>: If the given value is a DOM Element</li>\n<li><code>textnode</code>: If the given value is a DOM text node and contains something other than whitespace</li>\n<li><code>whitespace</code>: If the given value is a DOM text node and contains only whitespace</li>\n</ul>\n\n"},"un":{"!type":"fn(eventName: string, fn: fn(), scope?: ?) -> !this","!doc":"<p>Shorthand for the <a href=\"#!/api/Ext.util.Observable-method-removeListener\" rel=\"Ext.util.Observable-method-removeListener\" class=\"docClass\">Ext.util.Observable.removeListener</a> method of the\n<a href=\"#!/api/Ext-property-globalEvents\" rel=\"Ext-property-globalEvents\" class=\"docClass\">globalEvents</a> Observable instance.</p>\n"},"unique":{"!type":"fn(array: [?]) -> [?]","!doc":"<p>Old alias to <a href=\"#!/api/Ext.Array-method-unique\" rel=\"Ext.Array-method-unique\" class=\"docClass\">Ext.Array.unique</a></p>\n"},"urlAppend":{"!type":"fn(url: string, string: string) -> string","!doc":"<p>Old alias to <a href=\"#!/api/Ext.String-method-urlAppend\" rel=\"Ext.String-method-urlAppend\" class=\"docClass\">Ext.String.urlAppend</a></p>\n"},"urlDecode":{"!type":"fn(queryString: string, recursive?: bool) -> ?","!doc":"<p>Alias for <a href=\"#!/api/Ext.Object-method-fromQueryString\" rel=\"Ext.Object-method-fromQueryString\" class=\"docClass\">Ext.Object.fromQueryString</a>.</p>\n"},"urlEncode":{"!type":"fn(object: ?, recursive?: bool) -> string","!doc":"<p>Takes an object and converts it to an encoded query string.</p>\n\n<p>Non-recursive:</p>\n\n<pre><code><a href=\"#!/api/Ext.Object-method-toQueryString\" rel=\"Ext.Object-method-toQueryString\" class=\"docClass\">Ext.Object.toQueryString</a>({foo: 1, bar: 2}); // returns \"foo=1&amp;bar=2\"\n<a href=\"#!/api/Ext.Object-method-toQueryString\" rel=\"Ext.Object-method-toQueryString\" class=\"docClass\">Ext.Object.toQueryString</a>({foo: null, bar: 2}); // returns \"foo=&amp;bar=2\"\n<a href=\"#!/api/Ext.Object-method-toQueryString\" rel=\"Ext.Object-method-toQueryString\" class=\"docClass\">Ext.Object.toQueryString</a>({'some price': '$300'}); // returns \"some%20price=%24300\"\n<a href=\"#!/api/Ext.Object-method-toQueryString\" rel=\"Ext.Object-method-toQueryString\" class=\"docClass\">Ext.Object.toQueryString</a>({date: new Date(2011, 0, 1)}); // returns \"date=%222011-01-01T00%3A00%3A00%22\"\n<a href=\"#!/api/Ext.Object-method-toQueryString\" rel=\"Ext.Object-method-toQueryString\" class=\"docClass\">Ext.Object.toQueryString</a>({colors: ['red', 'green', 'blue']}); // returns \"colors=red&amp;colors=green&amp;colors=blue\"\n</code></pre>\n\n<p>Recursive:</p>\n\n<pre><code><a href=\"#!/api/Ext.Object-method-toQueryString\" rel=\"Ext.Object-method-toQueryString\" class=\"docClass\">Ext.Object.toQueryString</a>({\n    username: 'Jacky',\n    dateOfBirth: {\n        day: 1,\n        month: 2,\n        year: 1911\n    },\n    hobbies: ['coding', 'eating', 'sleeping', ['nested', 'stuff']]\n}, true); // returns the following string (broken down and url-decoded for ease of reading purpose):\n// username=Jacky\n//    &amp;dateOfBirth[day]=1&amp;dateOfBirth[month]=2&amp;dateOfBirth[year]=1911\n//    &amp;hobbies[0]=coding&amp;hobbies[1]=eating&amp;hobbies[2]=sleeping&amp;hobbies[3][0]=nested&amp;hobbies[3][1]=stuff\n</code></pre>\n"},"value":{"!type":"fn(value: ?, defaultValue: ?, allowBlank?: bool) -> ?","!doc":"<p>Utility method for returning a default value if the passed value is empty.</p>\n\n<p>The value is deemed to be empty if it is:</p>\n\n<ul>\n<li>null</li>\n<li>undefined</li>\n<li>an empty array</li>\n<li>a zero length string (Unless the <code>allowBlank</code> parameter is <code>true</code>)</li>\n</ul>\n\n"},"valueFrom":{"!type":"fn(value: ?, defaultValue: ?, allowBlank?: bool) -> ?","!doc":"<p>Returns the given value itself if it's not empty, as described in <a href=\"#!/api/Ext-method-isEmpty\" rel=\"Ext-method-isEmpty\" class=\"docClass\">isEmpty</a>; returns the default\nvalue (second argument) otherwise.</p>\n"},"widget":{"!type":"fn(name?: string, config?: ?) -> ?","!doc":"<p>Convenient shorthand to create a widget by its xtype or a config object.\nSee also <a href=\"#!/api/Ext.ClassManager-method-instantiateByAlias\" rel=\"Ext.ClassManager-method-instantiateByAlias\" class=\"docClass\">Ext.ClassManager.instantiateByAlias</a>.</p>\n\n<pre><code> var button = <a href=\"#!/api/Ext-method-widget\" rel=\"Ext-method-widget\" class=\"docClass\">Ext.widget</a>('button'); // Equivalent to <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('widget.button');\n\n var panel = <a href=\"#!/api/Ext-method-widget\" rel=\"Ext-method-widget\" class=\"docClass\">Ext.widget</a>('panel', { // Equivalent to <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('widget.panel')\n     title: 'Panel'\n });\n\n var grid = <a href=\"#!/api/Ext-method-widget\" rel=\"Ext-method-widget\" class=\"docClass\">Ext.widget</a>({\n     xtype: 'grid',\n     ...\n });\n</code></pre>\n\n<p>If a <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">component</a> instance is passed, it is simply returned.</p>\n"},"zip":{"!type":"fn(arr: [?]|+NodeList, zipper?: fn()) -> [?]","!doc":"<p>Zips N sets together.</p>\n\n<p>Example 1:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-zip\" rel=\"Ext-method-zip\" class=\"docClass\">Ext.zip</a>([1,2,3],[4,5,6]); // [[1,4],[2,5],[3,6]]\n</code></pre>\n\n<p>Example 2:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-zip\" rel=\"Ext-method-zip\" class=\"docClass\">Ext.zip</a>(\n    [ \"+\", \"-\", \"+\"],\n    [  12,  10,  22],\n    [  43,  15,  96],\n    function(a, b, c){\n        return \"$\" + a + \"\" + b + \".\" + c\n    }\n); // [\"$+12.43\", \"$-10.15\", \"$+22.96\"]\n</code></pre>\n"},"layout":{"ClassList":{"!doc":"<p>This class provides a DOM ClassList API to buffer access to an element's class.\nInstances of this class are created by <a href=\"#!/api/Ext.layout.ContextItem-method-getClassList\" rel=\"Ext.layout.ContextItem-method-getClassList\" class=\"docClass\">Ext.layout.ContextItem.getClassList</a>.</p>\n","prototype":{"add":{"!type":"fn(cls: ?) -> !this","!doc":"<p>Adds a single class to the class list.</p>\n"},"addMany":{"!type":"fn(classes: ?) -> !this","!doc":"<p>Adds one or more classes in an array or space-delimited string to the class list.</p>\n"},"remove":{"!type":"fn(cls: ?) -> !this","!doc":"<p>Removes a single class from the class list.</p>\n"},"removeMany":{"!type":"fn(classes: ?) -> !this","!doc":"<p>Removes one or more classes in an array or space-delimited string from the class\nlist.</p>\n"}}},"Context":{"!doc":"<p>Manages context information during a layout.</p>\n\n<h1>Algorithm</h1>\n\n<p>This class performs the following jobs:</p>\n\n<ul>\n<li>Cache DOM reads to avoid reading the same values repeatedly.</li>\n<li>Buffer DOM writes and flush them as a block to avoid read/write interleaving.</li>\n<li>Track layout dependencies so each layout does not have to figure out the source of\nits dependent values.</li>\n<li>Intelligently run layouts when the values on which they depend change (a trigger).</li>\n<li>Allow layouts to avoid processing when required values are unavailable (a block).</li>\n</ul>\n\n\n<p>Work done during layout falls into either a \"read phase\" or a \"write phase\" and it is\nessential to always be aware of the current phase. Most methods in\n<a href=\"#!/api/Ext.layout.Layout\" rel=\"Ext.layout.Layout\" class=\"docClass\">Layout</a> are called during a read phase:\n<a href=\"#!/api/Ext.layout.Layout-method-calculate\" rel=\"Ext.layout.Layout-method-calculate\" class=\"docClass\">calculate</a>,\n<a href=\"#!/api/Ext.layout.Layout-method-completeLayout\" rel=\"Ext.layout.Layout-method-completeLayout\" class=\"docClass\">completeLayout</a> and\n<a href=\"#!/api/Ext.layout.Layout-method-finalizeLayout\" rel=\"Ext.layout.Layout-method-finalizeLayout\" class=\"docClass\">finalizeLayout</a>. The exceptions to this are\n<a href=\"#!/api/Ext.layout.Layout-method-beginLayout\" rel=\"Ext.layout.Layout-method-beginLayout\" class=\"docClass\">beginLayout</a>,\n<a href=\"#!/api/Ext.layout.Layout-method-beginLayoutCycle\" rel=\"Ext.layout.Layout-method-beginLayoutCycle\" class=\"docClass\">beginLayoutCycle</a> and\n<a href=\"#!/api/Ext.layout.Layout-method-finishedLayout\" rel=\"Ext.layout.Layout-method-finishedLayout\" class=\"docClass\">finishedLayout</a> which are called during\na write phase. While <a href=\"#!/api/Ext.layout.Layout-method-finishedLayout\" rel=\"Ext.layout.Layout-method-finishedLayout\" class=\"docClass\">finishedLayout</a> is called\na write phase, it is really intended to be a catch-all for post-processing after a\nlayout run.</p>\n\n<p>In a read phase, it is OK to read the DOM but this should be done using the appropriate\n<a href=\"#!/api/Ext.layout.ContextItem\" rel=\"Ext.layout.ContextItem\" class=\"docClass\">ContextItem</a> where possible since that provides a cache\nto avoid redundant reads. No writes should be made to the DOM in a read phase! Instead,\nthe values should be written to the proper ContextItem for later write-back.</p>\n\n<p>The rules flip-flop in a write phase. The only difference is that ContextItem methods\nlike <a href=\"#!/api/Ext.layout.ContextItem-method-getStyle\" rel=\"Ext.layout.ContextItem-method-getStyle\" class=\"docClass\">getStyle</a> will still read the DOM unless the\nvalue was previously read. This detail is unknowable from the outside of ContextItem, so\nread calls to ContextItem should also be avoided in a write phase.</p>\n\n<p>Calculating interdependent layouts requires a certain amount of iteration. In a given\ncycle, some layouts will contribute results that allow other layouts to proceed. The\ngeneral flow then is to gather all of the layouts (both component and container) in a\ncomponent tree and queue them all for processing. The initial queue order is bottom-up\nand component layout first, then container layout (if applicable) for each component.</p>\n\n<p>This initial step also calls the beginLayout method on all layouts to clear any values\nfrom the DOM that might interfere with calculations and measurements. In other words,\nthis is a \"write phase\" and reads from the DOM should be strictly avoided.</p>\n\n<p>Next the layout enters into its iterations or \"cycles\". Each cycle consists of calling\nthe <a href=\"#!/api/Ext.layout.Layout-method-calculate\" rel=\"Ext.layout.Layout-method-calculate\" class=\"docClass\">calculate</a> method on all layouts in the\n<a href=\"#!/api/Ext.layout.Context-property-layoutQueue\" rel=\"Ext.layout.Context-property-layoutQueue\" class=\"docClass\">layoutQueue</a>. These calls are part of a \"read phase\" and writes to the DOM should\nbe strictly avoided.</p>\n\n<h1>Considerations</h1>\n\n<p><strong>RULE 1</strong>: Respect the read/write cycles. Always use the <a href=\"#!/api/Ext.layout.ContextItem-method-getProp\" rel=\"Ext.layout.ContextItem-method-getProp\" class=\"docClass\">getProp</a>\nor <a href=\"#!/api/Ext.layout.ContextItem-method-getDomProp\" rel=\"Ext.layout.ContextItem-method-getDomProp\" class=\"docClass\">getDomProp</a> methods to get calculated values;\nonly use the <a href=\"#!/api/Ext.layout.ContextItem-method-getStyle\" rel=\"Ext.layout.ContextItem-method-getStyle\" class=\"docClass\">getStyle</a> method to read styles; use\n<a href=\"#!/api/Ext.layout.ContextItem-method-setProp\" rel=\"Ext.layout.ContextItem-method-setProp\" class=\"docClass\">setProp</a> to set DOM values. Some reads will, of\ncourse, still go directly to the DOM, but if there is a method in\n<a href=\"#!/api/Ext.layout.ContextItem\" rel=\"Ext.layout.ContextItem\" class=\"docClass\">ContextItem</a> to do a certain job, it should be used instead\nof a lower-level equivalent.</p>\n\n<p>The basic logic flow in <a href=\"#!/api/Ext.layout.Layout-method-calculate\" rel=\"Ext.layout.Layout-method-calculate\" class=\"docClass\">calculate</a> consists of gathering\nvalues by calling <a href=\"#!/api/Ext.layout.ContextItem-method-getProp\" rel=\"Ext.layout.ContextItem-method-getProp\" class=\"docClass\">getProp</a> or\n<a href=\"#!/api/Ext.layout.ContextItem-method-getDomProp\" rel=\"Ext.layout.ContextItem-method-getDomProp\" class=\"docClass\">getDomProp</a>, calculating results and publishing\nthem by calling <a href=\"#!/api/Ext.layout.ContextItem-method-setProp\" rel=\"Ext.layout.ContextItem-method-setProp\" class=\"docClass\">setProp</a>. It is important to realize\nthat <a href=\"#!/api/Ext.layout.ContextItem-method-getProp\" rel=\"Ext.layout.ContextItem-method-getProp\" class=\"docClass\">getProp</a> will return <code>undefined</code> if the value\nis not yet known. But the act of calling the method is enough to track the fact that the\ncalling layout depends (in some way) on this value. In other words, the calling layout is\n\"triggered\" by the properties it requests.</p>\n\n<p><strong>RULE 2</strong>: Avoid calling <a href=\"#!/api/Ext.layout.ContextItem-method-getProp\" rel=\"Ext.layout.ContextItem-method-getProp\" class=\"docClass\">getProp</a> unless the value\nis needed. Gratuitous calls cause inefficiency because the layout will appear to depend on\nvalues that it never actually uses. This applies equally to\n<a href=\"#!/api/Ext.layout.ContextItem-method-getDomProp\" rel=\"Ext.layout.ContextItem-method-getDomProp\" class=\"docClass\">getDomProp</a> and the test-only methods\n<a href=\"#!/api/Ext.layout.ContextItem-method-hasProp\" rel=\"Ext.layout.ContextItem-method-hasProp\" class=\"docClass\">hasProp</a> and <a href=\"#!/api/Ext.layout.ContextItem-method-hasDomProp\" rel=\"Ext.layout.ContextItem-method-hasDomProp\" class=\"docClass\">hasDomProp</a>.</p>\n\n<p>Because <a href=\"#!/api/Ext.layout.ContextItem-method-getProp\" rel=\"Ext.layout.ContextItem-method-getProp\" class=\"docClass\">getProp</a> can return <code>undefined</code>, it is often\nthe case that subsequent math will produce NaN's. This is usually not a problem as the\nNaN's simply propagate along and result in final results that are NaN. Both <code>undefined</code>\nand NaN are ignored by <a href=\"#!/api/Ext.layout.ContextItem-method-setProp\" rel=\"Ext.layout.ContextItem-method-setProp\" class=\"docClass\">Ext.layout.ContextItem.setProp</a>, so it is often not necessary\nto even know that this is happening. It does become important for determining if a layout\nis not done or if it might lead to publishing an incorrect (but not NaN or <code>undefined</code>)\nvalue.</p>\n\n<p><strong>RULE 3</strong>: If a layout has not calculated all the values it is required to calculate, it\nmust set <a href=\"#!/api/Ext.layout.Layout-property-done\" rel=\"Ext.layout.Layout-property-done\" class=\"docClass\">done</a> to <code>false</code> before returning from\n<a href=\"#!/api/Ext.layout.Layout-method-calculate\" rel=\"Ext.layout.Layout-method-calculate\" class=\"docClass\">calculate</a>. This value is always <code>true</code> on entry because\nit is simpler to detect the incomplete state rather than the complete state (especially up\nand down a class hierarchy).</p>\n\n<p><strong>RULE 4</strong>: A layout must never publish an incomplete (wrong) result. Doing so would cause\ndependent layouts to run their calculations on those wrong values, producing more wrong\nvalues and some layouts may even incorrectly flag themselves as <a href=\"#!/api/Ext.layout.Layout-property-done\" rel=\"Ext.layout.Layout-property-done\" class=\"docClass\">done</a>\nbefore the correct values are determined and republished. Doing this will poison the\ncalculations.</p>\n\n<p><strong>RULE 5</strong>: Each value should only be published by one layout. If multiple layouts attempt\nto publish the same values, it would be nearly impossible to avoid breaking <strong>RULE 4</strong>. To\nhelp detect this problem, the layout diagnostics will trap on an attempt to set a value\nfrom different layouts.</p>\n\n<p>Complex layouts can produce many results as part of their calculations. These values are\nimportant for other layouts to proceed and need to be published by the earliest possible\ncall to <a href=\"#!/api/Ext.layout.Layout-method-calculate\" rel=\"Ext.layout.Layout-method-calculate\" class=\"docClass\">Ext.layout.Layout.calculate</a> to avoid unnecessary cycles and poor performance. It is\nalso possible, however, for some results to be related in a way such that publishing them\nmay be an all-or-none proposition (typically to avoid breaking <em>RULE 4</em>).</p>\n\n<p><strong>RULE 6</strong>: Publish results as soon as they are known to be correct rather than wait for\nall values to be calculated. Waiting for everything to be complete can lead to deadlock.\nThe key here is not to forget <strong>RULE 4</strong> in the process.</p>\n\n<p>Some layouts depend on certain critical values as part of their calculations. For example,\nHBox depends on width and cannot do anything until the width is known. In these cases, it\nis best to use <a href=\"#!/api/Ext.layout.ContextItem-method-block\" rel=\"Ext.layout.ContextItem-method-block\" class=\"docClass\">block</a> or\n<a href=\"#!/api/Ext.layout.ContextItem-method-domBlock\" rel=\"Ext.layout.ContextItem-method-domBlock\" class=\"docClass\">domBlock</a> and thereby avoid processing the layout\nuntil the needed value is available.</p>\n\n<p><strong>RULE 7</strong>: Use <a href=\"#!/api/Ext.layout.ContextItem-method-block\" rel=\"Ext.layout.ContextItem-method-block\" class=\"docClass\">block</a> or\n<a href=\"#!/api/Ext.layout.ContextItem-method-domBlock\" rel=\"Ext.layout.ContextItem-method-domBlock\" class=\"docClass\">domBlock</a> when values are required to make progress.\nThis will mimize wasted recalculations.</p>\n\n<p><strong>RULE 8</strong>: Blocks should only be used when no forward progress can be made. If even one\nvalue could still be calculated, a block could result in a deadlock.</p>\n\n<p>Historically, layouts have been invoked directly by component code, sometimes in places\nlike an <code>afterLayout</code> method for a child component. With the flexibility now available\nto solve complex, iterative issues, such things should be done in a responsible layout\n(be it component or container).</p>\n\n<p><strong>RULE 9</strong>: Use layouts to solve layout issues and don't wait for the layout to finish to\nperform further layouts. This is especially important now that layouts process entire\ncomponent trees and not each layout in isolation.</p>\n\n<h1>Sequence Diagram</h1>\n\n<p>The simplest sequence diagram for a layout run looks roughly like this:</p>\n\n<pre><code>  Context         Layout 1     Item 1     Layout 2     Item 2\n     |               |           |           |           |\n----&gt;X--------------&gt;X           |           |           |\nrun  X---------------|-----------|----------&gt;X           |\n     X beginLayout   |           |           |           |\n     X               |           |           |           |\n   A X--------------&gt;X           |           |           |\n     X  calculate    X----------&gt;X           |           |\n     X             C X  getProp  |           |           |\n   B X               X----------&gt;X           |           |\n     X               |  setProp  |           |           |\n     X               |           |           |           |\n   D X---------------|-----------|----------&gt;X           |\n     X  calculate    |           |           X----------&gt;X\n     X               |           |           |  setProp  |\n   E X               |           |           |           |\n     X---------------|-----------|----------&gt;X           |\n     X completeLayout|           |         F |           |\n     X               |           |           |           |\n   G X               |           |           |           |\n   H X--------------&gt;X           |           |           |\n     X  calculate    X----------&gt;X           |           |\n     X             I X  getProp  |           |           |\n     X               X----------&gt;X           |           |\n     X               |  setProp  |           |           |\n   J X--------------&gt;X           |           |           |\n     X completeLayout|           |           |           |\n     X               |           |           |           |\n   K X--------------&gt;X           |           |           |\n     X---------------|-----------|----------&gt;X           |\n     X finalizeLayout|           |           |           |\n     X               |           |           |           |\n   L X--------------&gt;X           |           |           |\n     X---------------|-----------|----------&gt;X           |\n     X finishedLayout|           |           |           |\n     X               |           |           |           |\n   M X--------------&gt;X           |           |           |\n     X---------------|-----------|----------&gt;X           |\n     X notifyOwner   |           |           |           |\n   N |               |           |           |           |\n     -               -           -           -           -\n</code></pre>\n\n<p>Notes:</p>\n\n<p><strong>A.</strong> This is a call from the <a href=\"#!/api/Ext.layout.Context-method-run\" rel=\"Ext.layout.Context-method-run\" class=\"docClass\">run</a> method to the <a href=\"#!/api/Ext.layout.Context-method-runCycle\" rel=\"Ext.layout.Context-method-runCycle\" class=\"docClass\">runCycle</a> method.\nEach layout in the queue will have its <a href=\"#!/api/Ext.layout.Layout-method-calculate\" rel=\"Ext.layout.Layout-method-calculate\" class=\"docClass\">calculate</a>\nmethod called.</p>\n\n<p><strong>B.</strong> After each <a href=\"#!/api/Ext.layout.Layout-method-calculate\" rel=\"Ext.layout.Layout-method-calculate\" class=\"docClass\">calculate</a> method is called the\n<a href=\"#!/api/Ext.layout.Layout-property-done\" rel=\"Ext.layout.Layout-property-done\" class=\"docClass\">done</a> flag is checked to see if the Layout has completed.\nIf it has completed and that layout object implements a\n<a href=\"#!/api/Ext.layout.Layout-method-completeLayout\" rel=\"Ext.layout.Layout-method-completeLayout\" class=\"docClass\">completeLayout</a> method, this layout is queued to\nreceive its call. Otherwise, the layout will be queued again unless there are blocks or\ntriggers that govern its requeueing.</p>\n\n<p><strong>C.</strong> The call to <a href=\"#!/api/Ext.layout.ContextItem-method-getProp\" rel=\"Ext.layout.ContextItem-method-getProp\" class=\"docClass\">getProp</a> is made to the Item\nand that will be tracked as a trigger (keyed by the name of the property being requested).\nChanges to this property will cause this layout to be requeued. The call to\n<a href=\"#!/api/Ext.layout.ContextItem-method-setProp\" rel=\"Ext.layout.ContextItem-method-setProp\" class=\"docClass\">setProp</a> will place a value in the item and not\ndirectly into the DOM.</p>\n\n<p><strong>D.</strong> Call the other layouts now in the first cycle (repeat <strong>B</strong> and <strong>C</strong> for each\nlayout).</p>\n\n<p><strong>E.</strong> After completing a cycle, if progress was made (new properties were written to\nthe context) and if the <a href=\"#!/api/Ext.layout.Context-property-layoutQueue\" rel=\"Ext.layout.Context-property-layoutQueue\" class=\"docClass\">layoutQueue</a> is not empty, the next cycle is run. If no\nprogress was made or no layouts are ready to run, all buffered values are written to\nthe DOM (a flush).</p>\n\n<p><strong>F.</strong> After flushing, any layouts that were marked as <a href=\"#!/api/Ext.layout.Layout-property-done\" rel=\"Ext.layout.Layout-property-done\" class=\"docClass\">done</a>\nthat also have a <a href=\"#!/api/Ext.layout.Layout-method-completeLayout\" rel=\"Ext.layout.Layout-method-completeLayout\" class=\"docClass\">completeLayout</a> method are called.\nThis can cause them to become no longer done (see <a href=\"#!/api/Ext.layout.Context-method-invalidate\" rel=\"Ext.layout.Context-method-invalidate\" class=\"docClass\">invalidate</a>). As with\n<a href=\"#!/api/Ext.layout.Layout-method-calculate\" rel=\"Ext.layout.Layout-method-calculate\" class=\"docClass\">calculate</a>, this is considered a \"read phase\" and\ndirect DOM writes should be avoided.</p>\n\n<p><strong>G.</strong> Flushing and calling any pending <a href=\"#!/api/Ext.layout.Layout-method-completeLayout\" rel=\"Ext.layout.Layout-method-completeLayout\" class=\"docClass\">completeLayout</a>\nmethods will likely trigger layouts that called <a href=\"#!/api/Ext.layout.ContextItem-method-getDomProp\" rel=\"Ext.layout.ContextItem-method-getDomProp\" class=\"docClass\">getDomProp</a>\nand unblock layouts that have called <a href=\"#!/api/Ext.layout.ContextItem-method-domBlock\" rel=\"Ext.layout.ContextItem-method-domBlock\" class=\"docClass\">domBlock</a>.\nThese variants are used when a layout needs the value to be correct in the DOM and not\nsimply known. If this does not cause at least one layout to enter the queue, we have a\nlayout FAILURE. Otherwise, we continue with the next cycle.</p>\n\n<p><strong>H.</strong> Call <a href=\"#!/api/Ext.layout.Layout-method-calculate\" rel=\"Ext.layout.Layout-method-calculate\" class=\"docClass\">calculate</a> on any layouts in the queue\nat the start of this cycle. Just a repeat of <strong>B</strong> through <strong>G</strong>.</p>\n\n<p><strong>I.</strong> Once the layout has calculated all that it is resposible for, it can leave itself\nin the <a href=\"#!/api/Ext.layout.Layout-property-done\" rel=\"Ext.layout.Layout-property-done\" class=\"docClass\">done</a> state. This is the value on entry to\n<a href=\"#!/api/Ext.layout.Layout-method-calculate\" rel=\"Ext.layout.Layout-method-calculate\" class=\"docClass\">calculate</a> and must be cleared in that call if the\nlayout has more work to do.</p>\n\n<p><strong>J.</strong> Now that all layouts are done, flush any DOM values and\n<a href=\"#!/api/Ext.layout.Layout-method-completeLayout\" rel=\"Ext.layout.Layout-method-completeLayout\" class=\"docClass\">completeLayout</a> calls. This can again cause\nlayouts to become not done, and so we will be back on another cycle if that happens.</p>\n\n<p><strong>K.</strong> After all layouts are done, call the <a href=\"#!/api/Ext.layout.Layout-method-finalizeLayout\" rel=\"Ext.layout.Layout-method-finalizeLayout\" class=\"docClass\">finalizeLayout</a>\nmethod on any layouts that have one. As with <a href=\"#!/api/Ext.layout.Layout-method-completeLayout\" rel=\"Ext.layout.Layout-method-completeLayout\" class=\"docClass\">completeLayout</a>,\nthis can cause layouts to become no longer done. This is less desirable than using\n<a href=\"#!/api/Ext.layout.Layout-method-completeLayout\" rel=\"Ext.layout.Layout-method-completeLayout\" class=\"docClass\">completeLayout</a> because it will cause all\n<a href=\"#!/api/Ext.layout.Layout-method-finalizeLayout\" rel=\"Ext.layout.Layout-method-finalizeLayout\" class=\"docClass\">finalizeLayout</a> methods to be called again\nwhen we think things are all wrapped up.</p>\n\n<p><strong>L.</strong> After finishing the last iteration, layouts that have a\n<a href=\"#!/api/Ext.layout.Layout-method-finishedLayout\" rel=\"Ext.layout.Layout-method-finishedLayout\" class=\"docClass\">finishedLayout</a> method will be called. This\ncall will only happen once per run and cannot cause layouts to be run further.</p>\n\n<p><strong>M.</strong> After calling finahedLayout, layouts that have a\n<a href=\"#!/api/Ext.layout.Layout-method-notifyOwner\" rel=\"Ext.layout.Layout-method-notifyOwner\" class=\"docClass\">notifyOwner</a> method will be called. This\ncall will only happen once per run and cannot cause layouts to be run further.</p>\n\n<p><strong>N.</strong> One last flush to make sure everything has been written to the DOM.</p>\n\n<h1>Inter-Layout Collaboration</h1>\n\n<p>Many layout problems require collaboration between multiple layouts. In some cases, this\nis as simple as a component's container layout providing results used by its component\nlayout or vise-versa. A slightly more distant collaboration occurs in a box layout when\nstretchmax is used: the child item's component layout provides results that are consumed\nby the ownerCt's box layout to determine the size of the children.</p>\n\n<p>The various forms of interdependence between a container and its children are described by\neach components' <a href=\"#!/api/Ext.AbstractComponent-method-getSizeModel\" rel=\"Ext.AbstractComponent-method-getSizeModel\" class=\"docClass\">size model</a>.</p>\n\n<p>To facilitate this collaboration, the following pairs of properties are published to the\ncomponent's <a href=\"#!/api/Ext.layout.ContextItem\" rel=\"Ext.layout.ContextItem\" class=\"docClass\">ContextItem</a>:</p>\n\n<ul>\n<li>width/height: These hold the final size of the component. The layout indicated by the\n<a href=\"#!/api/Ext.AbstractComponent-method-getSizeModel\" rel=\"Ext.AbstractComponent-method-getSizeModel\" class=\"docClass\">size model</a> is responsible for setting these.</li>\n<li>contentWidth/contentHeight: These hold size information published by the container\nlayout or from DOM measurement. These describe the content only. These values are\nused by the component layout to determine the outer width/height when that component\nis <a href=\"#!/api/Ext.AbstractComponent-cfg-shrinkWrap\" rel=\"Ext.AbstractComponent-cfg-shrinkWrap\" class=\"docClass\">shrink-wrapped</a>. They are also used to\ndetermine overflow. All container layouts must publish these values for dimensions\nthat are shrink-wrapped. If a component has raw content (not container items), the\ncomponentLayout must publish these values instead.</li>\n</ul>\n\n","!type":"fn(config: Ext_layout_Context_cfg)","prototype":{"!proto":"Ext.Base.prototype","layoutQueue":{"!type":"+Ext.util.Queue","!doc":"<p>List of layouts to perform.</p>\n"},"logOn":{"!type":"?","!doc":"<p><strong>Defined in override Ext.diag.layout.Context.</strong></p>\n"},"remainingLayouts":{"!type":"number"},"state":{"!type":"number","!doc":"<p>One of these values:</p>\n\n<ul>\n<li>0 - Before run</li>\n<li>1 - Running</li>\n<li>2 - Run complete</li>\n</ul>\n\n"},"callLayout":{"!type":"fn(layout: ?, methodName: ?) -> !this","!doc":"<p><strong>Overridden in Ext.diag.layout.Context.</strong></p>\n"},"cancelComponent":{"!type":"fn(comp: ?, isChild: ?, isDestroying: ?) -> !this","!doc":"<p><strong>From override Ext.diag.layout.Context:</strong> reportOnSuccess: true,</p>\n"},"cancelLayout":{"!type":"fn(layout: ?) -> !this","!doc":"<p><strong>Overridden in Ext.diag.layout.Context.</strong></p>\n"},"chainFns":{"!type":"fn(oldOptions: ?, newOptions: ?, funcName: ?) -> !this"},"checkRemainingLayouts":{"!type":"fn() -> !this","!doc":"<p><strong>Defined in override Ext.diag.layout.Context.</strong></p>\n"},"clearTriggers":{"!type":"fn(layout: ?, inDom: ?) -> !this"},"flush":{"!type":"fn() -> !this","!doc":"<p>Flushes any pending writes to the DOM by calling each ContextItem in the flushQueue.</p>\n\n<p><strong>Overridden in Ext.diag.layout.Context.</strong></p>\n"},"flushAnimations":{"!type":"fn() -> !this"},"flushInvalidates":{"!type":"fn() -> !this","!doc":"<p><strong>Overridden in Ext.diag.layout.Context.</strong></p>\n"},"flushLayouts":{"!type":"fn(queueName: ?, methodName: ?, dontClear: ?) -> !this"},"getCmp":{"!type":"fn(cmp: +Ext.Component) -> !this","!doc":"<p>Returns the ContextItem for a component.</p>\n\n<p><strong>Overridden in Ext.diag.layout.Context.</strong></p>\n"},"getEl":{"!type":"fn(parent: +Ext.layout.ContextItem, el: +Ext.dom.Element) -> !this","!doc":"<p>Returns the ContextItem for an element.</p>\n\n<p><strong>Overridden in Ext.diag.layout.Context.</strong></p>\n"},"getItem":{"!type":"fn(target: ?, el: ?) -> !this"},"getLayoutName":{"!type":"fn(layout: ?) -> !this","!doc":"<p><strong>Defined in override Ext.diag.layout.Context.</strong></p>\n"},"handleFailure":{"!type":"fn() -> !this"},"invalidate":{"!type":"fn(components: +Ext.Component|[?], full: bool) -> !this","!doc":"<p>Invalidates one or more components' layouts (component and container). This can be\ncalled before run to identify the components that need layout or during the run to\nrestart the layout of a component. This is called internally to flush any queued\ninvalidations at the start of a cycle. If called during a run, it is not expected\nthat new components will be introduced to the layout.</p>\n"},"layoutDone":{"!type":"fn(layout: ?) -> !this","!doc":"<p><strong>Overridden in Ext.diag.layout.Context.</strong></p>\n"},"layoutTreeHasFailures":{"!type":"fn(layout: ?, reported: ?) -> !this","!doc":"<p><strong>Defined in override Ext.diag.layout.Context.</strong></p>\n"},"newQueue":{"!type":"fn() -> !this"},"processInvalidate":{"!type":"fn(options: ?, item: ?, name: ?) -> !this"},"queueAnimation":{"!type":"fn(item: +Ext.layout.ContextItem) -> !this","!doc":"<p>Queues a ContextItem to have its <a href=\"#!/api/Ext.layout.ContextItem-method-flushAnimations\" rel=\"Ext.layout.ContextItem-method-flushAnimations\" class=\"docClass\">Ext.layout.ContextItem.flushAnimations</a> method called.</p>\n"},"queueCompletion":{"!type":"fn(layout: +Ext.layout.Layout) -> !this","!doc":"<p>Queues a layout to have its <a href=\"#!/api/Ext.layout.Layout-method-completeLayout\" rel=\"Ext.layout.Layout-method-completeLayout\" class=\"docClass\">Ext.layout.Layout.completeLayout</a> method called.</p>\n"},"queueFinalize":{"!type":"fn(layout: +Ext.layout.Layout) -> !this","!doc":"<p>Queues a layout to have its <a href=\"#!/api/Ext.layout.Layout-method-finalizeLayout\" rel=\"Ext.layout.Layout-method-finalizeLayout\" class=\"docClass\">Ext.layout.Layout.finalizeLayout</a> method called.</p>\n"},"queueFlush":{"!type":"fn(item: +Ext.layout.ContextItem) -> !this","!doc":"<p>Queues a ContextItem for the next flush to the DOM. This should only be called by\nthe <a href=\"#!/api/Ext.layout.ContextItem\" rel=\"Ext.layout.ContextItem\" class=\"docClass\">Ext.layout.ContextItem</a> class.</p>\n"},"queueInvalidate":{"!type":"fn(item: +Ext.Component|+Ext.layout.ContextItem, options: ?) -> !this","!doc":"<p>Queue a component (and its tree) to be invalidated on the next cycle.</p>\n"},"queueItemLayouts":{"!type":"fn(item: ?) -> !this"},"queueLayout":{"!type":"fn(layout: +Ext.layout.Layout) -> !this","!doc":"<p>Queues a layout for the next calculation cycle. This should not be called if the\nlayout is done, blocked or already in the queue. The only classes that should call\nthis method are this class and <a href=\"#!/api/Ext.layout.ContextItem\" rel=\"Ext.layout.ContextItem\" class=\"docClass\">Ext.layout.ContextItem</a>.</p>\n\n<p><strong>Overridden in Ext.diag.layout.Context.</strong></p>\n"},"removeEl":{"!type":"fn(parent: +Ext.layout.ContextItem, el: +Ext.dom.Element) -> !this","!doc":"<p>Removes the ContextItem for an element from the cache and from the parent's\n\"children\" array.</p>\n"},"reportLayoutResult":{"!type":"fn(layout: ?, reported: ?) -> !this","!doc":"<p><strong>Defined in override Ext.diag.layout.Context.</strong></p>\n"},"resetLayout":{"!type":"fn(layout: ?, ownerContext: ?, firstTime: ?) -> !this","!doc":"<p>Resets the given layout object. This is called at the start of the run and can also\nbe called during the run by calling <a href=\"#!/api/Ext.layout.Context-method-invalidate\" rel=\"Ext.layout.Context-method-invalidate\" class=\"docClass\">invalidate</a>.</p>\n\n<p><strong>Overridden in Ext.diag.layout.Context.</strong></p>\n"},"round":{"!type":"fn(t: ?) -> !this","!doc":"<p><strong>Defined in override Ext.diag.layout.Context.</strong></p>\n"},"run":{"!type":"fn() -> bool","!doc":"<p>Runs the layout calculations. This can be called only once on this object.</p>\n\n<p><strong>Overridden in Ext.diag.layout.Context.</strong></p>\n"},"runComplete":{"!type":"fn() -> !this"},"runCycle":{"!type":"fn() -> bool","!doc":"<p>Performs one layout cycle by calling each layout in the layout queue.</p>\n\n<p><strong>Overridden in Ext.diag.layout.Context.</strong></p>\n"},"runLayout":{"!type":"fn(layout: ?) -> !this","!doc":"<p>Runs one layout as part of a cycle.</p>\n\n<p><strong>Overridden in Ext.diag.layout.Context.</strong></p>\n"},"setItemSize":{"!type":"fn(items: +Ext.Component|[+Ext.Component]|+Ext.dom.Element|[+Ext.dom.Element]|+Ext.dom.CompositeElement, width: number, height: number) -> !this","!doc":"<p>Set the size of a component, element or composite or an array of components or elements.</p>\n"}}},"ContextItem":{"!doc":"<p>This class manages state information for a component or element during a layout.</p>\n\n<h1>Blocks</h1>\n\n<p>A \"block\" is a required value that is preventing further calculation. When a layout has\nencountered a situation where it cannot possibly calculate results, it can associate\nitself with the context item and missing property so that it will not be rescheduled\nuntil that property is set.</p>\n\n<p>Blocks are a one-shot registration. Once the property changes, the block is removed.</p>\n\n<p>Be careful with blocks. If <em>any</em> further calculations can be made, a block is not the\nright choice.</p>\n\n<h1>Triggers</h1>\n\n<p>Whenever any call to <a href=\"#!/api/Ext.layout.ContextItem-method-getProp\" rel=\"Ext.layout.ContextItem-method-getProp\" class=\"docClass\">getProp</a>, <a href=\"#!/api/Ext.layout.ContextItem-method-getDomProp\" rel=\"Ext.layout.ContextItem-method-getDomProp\" class=\"docClass\">getDomProp</a>, <a href=\"#!/api/Ext.layout.ContextItem-method-hasProp\" rel=\"Ext.layout.ContextItem-method-hasProp\" class=\"docClass\">hasProp</a> or\n<a href=\"#!/api/Ext.layout.ContextItem-method-hasDomProp\" rel=\"Ext.layout.ContextItem-method-hasDomProp\" class=\"docClass\">hasDomProp</a> is made, the current layout is automatically registered as being\ndependent on that property in the appropriate state. Any changes to the property will\ntrigger the layout and it will be queued in the <a href=\"#!/api/Ext.layout.Context\" rel=\"Ext.layout.Context\" class=\"docClass\">Ext.layout.Context</a>.</p>\n\n<p>Triggers, once added, remain for the entire layout. Any changes to the property will\nreschedule all unfinished layouts in their trigger set.</p>\n","!type":"fn(config: Ext_layout_ContextItem_cfg)","prototype":{"!proto":"Ext.Base.prototype","borderNames":{"!type":"[?]"},"boxChildren":{"!type":"?","!doc":"<p>plaed here by AbstractComponent.getSizeModel</p>\n"},"boxParent":{"!type":"?"},"cacheMissHandlers":{"!type":"?"},"children":{"!type":"[?]"},"consumersContainerHeight":{"!type":"number"},"consumersContainerWidth":{"!type":"number"},"consumersContentHeight":{"!type":"number"},"consumersContentWidth":{"!type":"number"},"consumersHeight":{"!type":"number"},"consumersWidth":{"!type":"number"},"dirty":{"!type":"?"},"dirtyCount":{"!type":"number","!doc":"<p>The number of dirty properties</p>\n"},"hasRawContent":{"!type":"bool"},"heightModel":{"!type":"?"},"isBorderBoxValue":{"!type":"?"},"isContextItem":{"!type":"bool"},"isTopLevel":{"!type":"bool"},"marginNames":{"!type":"[?]"},"optOut":{"!type":"bool","!doc":"<p>There are several cases that allow us to skip (opt out) of laying out a component\nand its children as long as its <code>lastBox</code> is not marked as <code>invalid</code>. If anything\nhappens to change things, the <code>lastBox</code> is marked as <code>invalid</code> by <code>updateLayout</code>\nas it ascends the component hierarchy.</p>\n"},"ownerCtContext":{"!type":"?"},"ownerSizePolicy":{"!type":"?"},"paddingNames":{"!type":"[?]"},"props":{"!type":"?","!doc":"<p>the current set of property values:</p>\n"},"remainingChildDimensions":{"!type":"number"},"sizeModel":{"!type":"?"},"state":{"!type":"?","!doc":"<p>State variables that are cleared when invalidated. Only applies to component items.</p>\n"},"styles":{"!type":"?","!doc":"<p>Adds x and y values from a props object to a styles object as \"left\" and \"top\" values.\nOverridden to add the x property as \"right\" in rtl mode.A styles object for an Element</p>\n"},"translateProps":{"!type":"?"},"trblNames":{"!type":"[?]"},"widthModel":{"!type":"?"},"wrapsComponent":{"!type":"bool","!doc":"<p>True if this item wraps a Component (rather than an Element).</p>\n"},"addBlock":{"!type":"fn(name: string, layout: +Ext.layout.Layout, propName: string) -> !this","!doc":"<p>Adds a block.</p>\n\n<p><strong>Overridden in Ext.diag.layout.ContextItem.</strong></p>\n"},"addBoxChild":{"!type":"fn(boxChildItem: ?) -> !this","!doc":"<p><strong>Overridden in Ext.diag.layout.ContextItem.</strong></p>\n"},"addCls":{"!type":"fn(newCls: ?) -> !this","!doc":"<p>Queue the addition of a class name (or array of class names) to this ContextItem's target when next flushed.</p>\n"},"addTrigger":{"!type":"fn(propName: string, inDom: bool) -> !this","!doc":"<p>Adds a trigger.</p>\n\n<p><strong>Overridden in Ext.diag.layout.ContextItem.</strong></p>\n"},"block":{"!type":"fn(layout: +Ext.layout.Layout, propName: string) -> !this","!doc":"<p>Registers a layout in the block list for the given property. Once the property is\nset in the <a href=\"#!/api/Ext.layout.Context\" rel=\"Ext.layout.Context\" class=\"docClass\">Ext.layout.Context</a>, the layout is unblocked.</p>\n"},"boxChildMeasured":{"!type":"fn() -> !this"},"checkAuthority":{"!type":"fn(prop: ?) -> !this","!doc":"<p><strong>Defined in override Ext.diag.layout.ContextItem.</strong></p>\n"},"checkCache":{"!type":"fn(entry: ?) -> !this"},"clearAllBlocks":{"!type":"fn(name: ?) -> !this"},"clearBlocks":{"!type":"fn(name: string, propName: string) -> !this","!doc":"<p>Removes any blocks on a property in the specified set. Any layouts that were blocked\nby this property and are not still blocked (by other properties) will be rescheduled.</p>\n\n<p><strong>Overridden in Ext.diag.layout.ContextItem.</strong></p>\n"},"clearMarginCache":{"!type":"fn() -> !this","!doc":"<p>clears the margin cache so that marginInfo get re-read from the dom on the next call to getMarginInfo()\nThis is needed in some special cases where the margins have changed since the last layout, making the cached\nvalues invalid.  For example collapsed window headers have different margin than expanded ones.</p>\n"},"domBlock":{"!type":"fn(layout: +Ext.layout.Layout, propName: string) -> !this","!doc":"<p>Registers a layout in the DOM block list for the given property. Once the property\nflushed to the DOM by the <a href=\"#!/api/Ext.layout.Context\" rel=\"Ext.layout.Context\" class=\"docClass\">Ext.layout.Context</a>, the layout is unblocked.</p>\n"},"fireTriggers":{"!type":"fn(name: string, propName: string) -> !this","!doc":"<p>Reschedules any layouts associated with a given trigger.</p>\n"},"flush":{"!type":"fn() -> !this","!doc":"<p>Flushes any updates in the dirty collection to the DOM. This is only called if there\nare dirty entries because this object is only added to the flushQueue of the\n<a href=\"#!/api/Ext.layout.Context\" rel=\"Ext.layout.Context\" class=\"docClass\">Ext.layout.Context</a> when entries become dirty.</p>\n"},"flushAnimations":{"!type":"fn() -> !this"},"getBorderInfo":{"!type":"fn() -> ?","!doc":"<p>Gets the border information for the element as an object with left, top, right and\nbottom properties holding border size in pixels. This object is only read from the\nDOM on first request and is cached.</p>\n"},"getClassList":{"!type":"fn() -> !this","!doc":"<p>Returns a ClassList-like object to buffer access to this item's element's classes.</p>\n"},"getDomProp":{"!type":"fn(propName: string) -> ?","!doc":"<p>Gets a property of this object if it is correct in the DOM. Also tracks the current\nlayout as dependent on this property so that DOM writes of it will trigger the\nlayout to be recalculated.</p>\n"},"getEl":{"!type":"fn(nameOrEl: string|+Ext.dom.Element, owner?: +Ext.layout.container.Container|+Ext.Component) -> +Ext.layout.ContextItem","!doc":"<p>Returns the context item for an owned element. This should only be called on a\ncomponent's item. The list of child items is used to manage invalidating calculated\nresults.</p>\n\n<p><strong>Overridden in Ext.diag.layout.ContextItem.</strong></p>\n"},"getFrameInfo":{"!type":"fn() -> ?","!doc":"<p>Gets the \"frame\" information for the element as an object with left, top, right and\nbottom properties holding border+framing size in pixels. This object is calculated\non first request and is cached.</p>\n"},"getMarginInfo":{"!type":"fn() -> ?","!doc":"<p>Gets the margin information for the element as an object with left, top, right and\nbottom properties holding margin size in pixels. This object is only read from the\nDOM on first request and is cached.</p>\n"},"getPaddingInfo":{"!type":"fn() -> ?","!doc":"<p>Gets the padding information for the element as an object with left, top, right and\nbottom properties holding padding size in pixels. This object is only read from the\nDOM on first request and is cached.</p>\n"},"getProp":{"!type":"fn(propName: string) -> ?","!doc":"<p>Gets a property of this object. Also tracks the current layout as dependent on this\nproperty so that changes to it will trigger the layout to be recalculated.</p>\n"},"getStyle":{"!type":"fn(styleName: string) -> ?","!doc":"<p>Returns a style for this item. Each style is read from the DOM only once on first\nrequest and is then cached. If the value is an integer, it is parsed automatically\n(so '5px' is not returned, but rather 5).</p>\n"},"getStyles":{"!type":"fn(styleNames: [string], altNames?: [string]) -> ?","!doc":"<p>Returns styles for this item. Each style is read from the DOM only once on first\nrequest and is then cached. If the value is an integer, it is parsed automatically\n(so '5px' is not returned, but rather 5).</p>\n"},"hasDomProp":{"!type":"fn(propName: string) -> bool","!doc":"<p>Returns true if the given property is correct in the DOM. This is equivalent to\ncalling <a href=\"#!/api/Ext.layout.ContextItem-method-getDomProp\" rel=\"Ext.layout.ContextItem-method-getDomProp\" class=\"docClass\">getDomProp</a> and not getting an undefined result. In particular,\nthis call registers the current layout to be triggered by flushes of this property.</p>\n"},"hasProp":{"!type":"fn(propName: string) -> bool","!doc":"<p>Returns true if the given property has been set. This is equivalent to calling\n<a href=\"#!/api/Ext.layout.ContextItem-method-getProp\" rel=\"Ext.layout.ContextItem-method-getProp\" class=\"docClass\">getProp</a> and not getting an undefined result. In particular, this call\nregisters the current layout to be triggered by changes to this property.</p>\n"},"init":{"!type":"fn(full: bool) -> +Mixed","!doc":"<p>Clears all properties on this object except (perhaps) those not calculated by this\ncomponent. This is more complex than it would seem because a layout can decide to\ninvalidate its results and run the component's layouts again, but since some of the\nvalues may be calculated by the container, care must be taken to preserve those\nvalues.</p>\n\n<p><strong>Overridden in Ext.diag.layout.ContextItem.</strong></p>\n"},"initAnimation":{"!type":"fn() -> !this"},"initContinue":{"!type":"fn(full: ?) -> !this"},"initDone":{"!type":"fn(containerLayoutDone: ?) -> !this"},"invalidate":{"!type":"fn(options: ?) -> !this","!doc":"<p>Invalidates the component associated with this item. The layouts for this component\nand all of its contained items will be re-run after first clearing any computed\nvalues.</p>\n\n<p>If state needs to be carried forward beyond the invalidation, the <code>options</code> parameter\ncan be used.</p>\n\n<p><strong>Overridden in Ext.diag.layout.ContextItem.</strong></p>\n"},"markDirty":{"!type":"fn() -> !this"},"onBoxMeasured":{"!type":"fn() -> !this"},"parseMargins":{"!type":"fn(comp: ?, margins: ?, defaultMargins: ?) -> !this"},"peek":{"!type":"fn(propName: ?) -> !this"},"recoverProp":{"!type":"fn(propName: string, oldProps: ?, oldDirty: ?) -> !this","!doc":"<p>Recovers a property value from the last computation and restores its value and\ndirty state.</p>\n"},"redo":{"!type":"fn(deep: ?) -> !this"},"removeCls":{"!type":"fn(removeCls: ?) -> !this","!doc":"<p>Queue the removal of a class name (or array of class names) from this ContextItem's target when next flushed.</p>\n"},"removeEl":{"!type":"fn(nameOrEl: string|+Ext.dom.Element, owner?: +Ext.layout.container.Container|+Ext.Component) -> !this","!doc":"<p>Removes a cached ContextItem that was created using <a href=\"#!/api/Ext.layout.ContextItem-method-getEl\" rel=\"Ext.layout.ContextItem-method-getEl\" class=\"docClass\">getEl</a>.  It may be\nnecessary to call this method if the dom reference for owned element changes so\nthat <a href=\"#!/api/Ext.layout.ContextItem-method-getEl\" rel=\"Ext.layout.ContextItem-method-getEl\" class=\"docClass\">getEl</a> can be called again to reinitialize the ContextItem with the\nnew element.</p>\n"},"revertProps":{"!type":"fn(props: ?) -> !this"},"setAttribute":{"!type":"fn(name: ?, value: ?) -> !this","!doc":"<p>Queue the setting of a DOM attribute on this ContextItem's target when next flushed.</p>\n"},"setBox":{"!type":"fn(box: ?) -> !this"},"setContentHeight":{"!type":"fn(height: ?, measured: ?) -> !this","!doc":"<p>Sets the contentHeight property. If the component uses raw content, then only the\nmeasured height is acceptable.</p>\n\n<p>Calculated values can sometimes be NaN or undefined, which generally mean the\ncalculation is not done. To indicate that such as value was passed, 0 is returned.\nOtherwise, 1 is returned.</p>\n\n<p>If the caller is not measuring (i.e., they are calculating) and the component has raw\ncontent, 1 is returned indicating that the caller is done.</p>\n"},"setContentSize":{"!type":"fn(width: ?, height: ?, measured: ?) -> !this","!doc":"<p>Sets the contentWidth and contentHeight properties. If the component uses raw content,\nthen only the measured values are acceptable.</p>\n\n<p>Calculated values can sometimes be NaN or undefined, which generally means that the\ncalculation is not done. To indicate that either passed value was such a value, false\nreturned. Otherwise, true is returned.</p>\n\n<p>If the caller is not measuring (i.e., they are calculating) and the component has raw\ncontent, true is returned indicating that the caller is done.</p>\n"},"setContentWidth":{"!type":"fn(width: ?, measured: ?) -> !this","!doc":"<p>Sets the contentWidth property. If the component uses raw content, then only the\nmeasured width is acceptable.</p>\n\n<p>Calculated values can sometimes be NaN or undefined, which generally means that the\ncalculation is not done. To indicate that such as value was passed, 0 is returned.\nOtherwise, 1 is returned.</p>\n\n<p>If the caller is not measuring (i.e., they are calculating) and the component has raw\ncontent, 1 is returned indicating that the caller is done.</p>\n"},"setHeight":{"!type":"fn(height: number, dirty?: bool) -> number","!doc":"<p>Sets the height and constrains the height to min/maxHeight range.</p>\n\n<p><strong>Overridden in Ext.diag.layout.ContextItem.</strong></p>\n"},"setProp":{"!type":"fn(propName: string, value: ?, dirty: bool) -> number","!doc":"<p>Sets a property value. This will unblock and/or trigger dependent layouts if the\nproperty value is being changed. Values of NaN and undefined are not accepted by\nthis method.</p>\n\n<p><strong>Overridden in Ext.diag.layout.ContextItem.</strong></p>\n"},"setSize":{"!type":"fn(width: ?, height: ?, dirty: ?) -> !this"},"setWidth":{"!type":"fn(width: number, dirty?: bool) -> number","!doc":"<p>Sets the height and constrains the width to min/maxWidth range.</p>\n\n<p><strong>Overridden in Ext.diag.layout.ContextItem.</strong></p>\n"},"undo":{"!type":"fn(deep: ?) -> !this"},"unsetProp":{"!type":"fn(propName: ?) -> !this"},"writeProps":{"!type":"fn(dirtyProps: ?, flushing: ?) -> !this"}}},"Layout":{"!doc":"<p>This class is the base for all layout types: component and container.</p>\n","!type":"fn(config: Ext_layout_Layout_cfg)","prototype":{"!proto":"Ext.Base.prototype","autoSizePolicy":{"!type":"?"},"done":{"!type":"bool","!doc":"<p>Used only during a layout run, this value indicates that a\nlayout has finished its calculations. This flag is set to true prior to the call to\n<a href=\"#!/api/Ext.layout.Layout-method-calculate\" rel=\"Ext.layout.Layout-method-calculate\" class=\"docClass\">calculate</a> and should be set to false if this layout has more work to do.</p>\n"},"initialized":{"!type":"bool"},"isLayout":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated Layout, or subclass thereof.</p>\n"},"running":{"!type":"bool"},"afterRemove":{"!type":"fn(item: ?) -> !this","!doc":"<p>Removes layout's itemCls and owning Container's itemCls.\nClears the managed dimensions flags</p>\n"},"afterRenderItem":{"!type":"fn() -> !this"},"beginLayout":{"!type":"fn(ownerContext: +Ext.layout.ContextItem) -> !this","!doc":"<p>Called before any calculation cycles to prepare for layout.</p>\n\n<p>This is a write phase and DOM reads should be strictly avoided when overridding\nthis method.</p>\n"},"beginLayoutCycle":{"!type":"fn(ownerContext: +Ext.layout.ContextItem) -> !this","!doc":"<p>Called before any calculation cycles to reset DOM values and prepare for calculation.</p>\n\n<p>This is a write phase and DOM reads should be strictly avoided when overridding\nthis method.</p>\n"},"calculate":{"!type":"fn(ownerContext: +Ext.layout.ContextItem)","!doc":"<p>Called to perform the calculations for this layout. This method will be called at\nleast once and may be called repeatedly if the <a href=\"#!/api/Ext.layout.Layout-property-done\" rel=\"Ext.layout.Layout-property-done\" class=\"docClass\">done</a> property is cleared\nbefore return to indicate that this layout is not yet done. The <a href=\"#!/api/Ext.layout.Layout-property-done\" rel=\"Ext.layout.Layout-property-done\" class=\"docClass\">done</a> property\nis always set to <code>true</code> before entering this method.</p>\n\n<p>This is a read phase and DOM writes should be strictly avoided in derived classes.\nInstead, DOM writes need to be written to <a href=\"#!/api/Ext.layout.ContextItem\" rel=\"Ext.layout.ContextItem\" class=\"docClass\">Ext.layout.ContextItem</a> objects to\n be flushed at the next opportunity.</p>\n"},"completeLayout":{"!type":"fn(ownerContext: +Ext.layout.ContextItem)","!doc":"<p>This method (if implemented) is called at the end of the cycle in which this layout\ncompletes (by not setting <a href=\"#!/api/Ext.layout.Layout-property-done\" rel=\"Ext.layout.Layout-property-done\" class=\"docClass\">done</a> to <code>false</code> in <a href=\"#!/api/Ext.layout.Layout-method-calculate\" rel=\"Ext.layout.Layout-method-calculate\" class=\"docClass\">calculate</a>). It is\npossible for the layout to complete and yet become invalid before the end of the cycle,\nin which case, this method will not be called. It is also possible for this method to\nbe called and then later the layout becomes invalidated. This will result in\n<a href=\"#!/api/Ext.layout.Layout-method-calculate\" rel=\"Ext.layout.Layout-method-calculate\" class=\"docClass\">calculate</a> being called again, followed by another call to this method.</p>\n\n<p>This is a read phase and DOM writes should be strictly avoided in derived classes.\nInstead, DOM writes need to be written to <a href=\"#!/api/Ext.layout.ContextItem\" rel=\"Ext.layout.ContextItem\" class=\"docClass\">Ext.layout.ContextItem</a> objects to\nbe flushed at the next opportunity.</p>\n\n<p>This method need not be implemented by derived classes and, in fact, should only be\nimplemented when needed.</p>\n"},"configureItem":{"!type":"fn(item: +Ext.Component) -> !this","!doc":"<p>Called before an item is rendered to allow the layout to configure the item.</p>\n"},"destroy":{"!type":"fn() -> !this","!doc":"<p>Destroys this layout. This method removes a <code>targetCls</code> from the <code>target</code>\nelement and calls <code>onDestroy</code>.</p>\n\n<p>A derived class can override either this method or <code>onDestroy</code> but in all\ncases must call the base class versions of these methods to allow the base class to\nperform its cleanup.</p>\n\n<p>This method (or <code>onDestroy</code>) are overridden by subclasses most often to purge\nevent handlers or remove unmanged DOM nodes.</p>\n"},"finalizeLayout":{"!type":"fn(ownerContext: +Ext.layout.ContextItem)","!doc":"<p>This method (if implemented) is called after all layouts have completed. In most\nways this is similar to <a href=\"#!/api/Ext.layout.Layout-method-completeLayout\" rel=\"Ext.layout.Layout-method-completeLayout\" class=\"docClass\">completeLayout</a>. This call can cause this (or any\nlayout) to be become invalid (see <a href=\"#!/api/Ext.layout.Context-method-invalidate\" rel=\"Ext.layout.Context-method-invalidate\" class=\"docClass\">Ext.layout.Context.invalidate</a>), but this\nis best avoided. This method is intended to be where final reads are made and so it\nis best to avoid invalidating layouts at this point whenever possible. Even so, this\nmethod can be used to perform final checks that may require all other layouts to be\ncomplete and then invalidate some results.</p>\n\n<p>This is a read phase and DOM writes should be strictly avoided in derived classes.\nInstead, DOM writes need to be written to <a href=\"#!/api/Ext.layout.ContextItem\" rel=\"Ext.layout.ContextItem\" class=\"docClass\">Ext.layout.ContextItem</a> objects to\nbe flushed at the next opportunity.</p>\n\n<p>This method need not be implemented by derived classes and, in fact, should only be\nimplemented when needed.</p>\n"},"finishRender":{"!type":"fn() -> !this"},"finishRenderItems":{"!type":"fn(target: ?, items: ?) -> !this"},"finishedLayout":{"!type":"fn(ownerContext: +Ext.layout.ContextItem) -> !this","!doc":"<p>This method is called after all layouts are complete and their calculations flushed\nto the DOM. No further layouts will be run and this method is only called once per\nlayout run. The base component layout caches <code>lastComponentSize</code>.</p>\n\n<p>This is a write phase and DOM reads should be avoided if possible when overridding\nthis method.</p>\n\n<p>This method need not be implemented by derived classes and, in fact, should only be\nimplemented when needed.</p>\n"},"getAnimatePolicy":{"!type":"fn() -> !this"},"getItemSizePolicy":{"!type":"fn(item: +Ext.Component) -> +Ext.layout.SizePolicy","!doc":"<p>Returns an object describing how this layout manages the size of the given component.\nThis method must be implemented by any layout that manages components.</p>\n"},"getItemsRenderTree":{"!type":"fn(items: ?, renderCfgs: ?) -> !this","!doc":"<hr />\n"},"getLayoutItems":{"!type":"fn() -> !this","!doc":"<p>Returns the set of items to layout (empty by default).</p>\n"},"getPositionOffset":{"!type":"fn(position: ?) -> !this"},"initLayout":{"!type":"fn() -> !this","!doc":"<p>A one-time initialization method called just before rendering.</p>\n"},"isItemBoxParent":{"!type":"fn(itemContext: ?) -> !this"},"isItemLayoutRoot":{"!type":"fn(item: ?) -> !this"},"isItemShrinkWrap":{"!type":"fn(item: ?) -> !this"},"isRunning":{"!type":"fn() -> !this"},"isValidParent":{"!type":"fn(item: ?, target: ?, position: ?) -> !this","!doc":"<p>Validates item is in the proper place in the dom.</p>\n"},"moveItem":{"!type":"fn(item: ?, target: ?, position: ?) -> !this","!doc":"<p>Moves Component to the provided target instead.</p>\n"},"notifyOwner":{"!type":"fn(ownerContext: +Ext.layout.ContextItem)","!doc":"<p>This method (if implemented) is called after all layouts are finished, and all have\na <code>lastComponentSize</code> cached. No further layouts will be run and this method is only\ncalled once per layout run. It is the bookend to <a href=\"#!/api/Ext.layout.Layout-method-beginLayout\" rel=\"Ext.layout.Layout-method-beginLayout\" class=\"docClass\">beginLayout</a>.</p>\n\n<p>This is a write phase and DOM reads should be avoided if possible when overridding\nthis method. This is the catch-all tail method to a layout and so the rules are more\nrelaxed. Even so, for performance reasons, it is best to avoid reading the DOM. If\na read is necessary, consider implementing a <a href=\"#!/api/Ext.layout.Layout-method-finalizeLayout\" rel=\"Ext.layout.Layout-method-finalizeLayout\" class=\"docClass\">finalizeLayout</a> method to do the\nrequired reads.</p>\n\n<p>This method need not be implemented by derived classes and, in fact, should only be\nimplemented when needed.</p>\n"},"onAdd":{"!type":"fn(item: ?) -> !this"},"onContentChange":{"!type":"fn(child: +Ext.Component) -> bool","!doc":"<p>This method is called when a child item changes in some way. By default this calls\n<a href=\"#!/api/Ext.AbstractComponent-method-updateLayout\" rel=\"Ext.AbstractComponent-method-updateLayout\" class=\"docClass\">Ext.AbstractComponent.updateLayout</a> on this layout's owner.</p>\n"},"onDestroy":{"!type":"fn() -> !this"},"onRemove":{"!type":"fn() -> !this"},"renderChildren":{"!type":"fn() -> !this"},"renderItem":{"!type":"fn(item: +Ext.Component, target: +Ext.dom.Element, position: number) -> !this","!doc":"<p>Renders the given Component into the target Element.</p>\n"},"renderItems":{"!type":"fn(items: ?, target: ?) -> !this","!doc":"<p>Iterates over all passed items, ensuring they are rendered.  If the items are already rendered,\nalso determines if the items are in the proper place in the dom.</p>\n"},"setOwner":{"!type":"fn(owner: ?) -> !this","!doc":"<p>Sets the layout owner</p>\n"},"sortWeightedItems":{"!type":"fn(items: ?, reverseProp: ?) -> !this"},"undoLayout":{"!type":"fn() -> !this"}},"layoutsByType":{"!type":"?"},"create":{"!type":"fn(layout: ?, defaultType: ?) -> !this"}},"SizeModel":{"!doc":"<p>This class describes a size determination strategy or algorithm used by the layout\nsystem. There are special instances of this class stored as static properties to\navoid needless object instantiation. These instances should be treated as readonly.</p>\n\n<ul>\n<li><code>calculated</code></li>\n<li><code>configured</code></li>\n<li><code>constrainedMax</code></li>\n<li><code>constrainedMin</code></li>\n<li><code>natural</code></li>\n<li><code>shrinkWrap</code></li>\n<li><code>calculatedFromConfigured</code></li>\n<li><code>calculatedFromNatural</code></li>\n<li><code>calculatedFromShrinkWrap</code></li>\n</ul>\n\n\n<p>Using one of these instances is simply:</p>\n\n<pre><code>  var calculated = <a href=\"#!/api/Ext.layout.SizeModel-property-calculated\" rel=\"Ext.layout.SizeModel-property-calculated\" class=\"docClass\">Ext.layout.SizeModel.calculated</a>;\n</code></pre>\n","!type":"fn(config: Ext_layout_SizeModel_cfg)","prototype":{"!proto":"Ext.Base.prototype","auto":{"!type":"bool","!doc":"<p>True if the size is either <code>natural</code> or <code>shrinkWrap</code>, otherwise false.</p>\n"},"calculated":{"!type":"bool","!doc":"<p>True if the size is calculated by the <code>ownerLayout</code>.</p>\n"},"calculatedFromConfigured":{"!type":"bool","!doc":"<p>True if the size is calculated by the <code>ownerLayout</code> based on a configured size.</p>\n"},"calculatedFromNatural":{"!type":"bool","!doc":"<p>True if the size is calculated by the <code>ownerLayout</code> based on <code>natural</code> size model\nresults.</p>\n"},"calculatedFromShrinkWrap":{"!type":"bool","!doc":"<p>True if the size is calculated by the <code>ownerLayout</code> based on <code>shrinkWrap</code> size model\nresults.</p>\n"},"configured":{"!type":"bool","!doc":"<p>True if the size is configured (e.g., by a <code>width</code> or <code>minWidth</code>). The names of\nconfiguration properties can be found in the <a href=\"#!/api/Ext.layout.SizeModel-property-names\" rel=\"Ext.layout.SizeModel-property-names\" class=\"docClass\">names</a> property.</p>\n"},"constrainedMax":{"!type":"bool","!doc":"<p>True if the size is constrained by a <code>maxWidth</code> or <code>maxHeight</code> configuration. This\nis a flavor of <code>configured</code> (since <code>maxWidth</code> and <code>maxHeight</code> are config options).\nIf true, the <a href=\"#!/api/Ext.layout.SizeModel-property-names\" rel=\"Ext.layout.SizeModel-property-names\" class=\"docClass\">names</a> property will be defined as well.</p>\n"},"constrainedMin":{"!type":"bool","!doc":"<p>True if the size is constrained by a <code>minWidth</code> or <code>minHeight</code> configuration. This\nis a flavor of <code>configured</code> (since <code>minWidth</code> and <code>minHeight</code> are config options).\nIf true, the <a href=\"#!/api/Ext.layout.SizeModel-property-names\" rel=\"Ext.layout.SizeModel-property-names\" class=\"docClass\">names</a> property will be defined as well.</p>\n"},"fixed":{"!type":"bool","!doc":"<p>True if the size is either <code>calculated</code> or <code>configured</code>, otherwise false.</p>\n"},"name":{"!type":"string","!doc":"<p>The name of this size model (e.g., \"calculated\").</p>\n"},"names":{"!type":"?","!doc":"<p>An object with the config property names that determine the\nsize.</p>\n"},"natural":{"!type":"bool","!doc":"<p>True if the size is determined by CSS and not by content. Such sizes are assumed to\nbe dependent on the container box and measurement occurs on the outer-most element.</p>\n"},"ordinal":{"!type":"number","!doc":"<p>The 0-based ordinal for this <code>SizeModel</code> instance.</p>\n"},"pairsByHeightOrdinal":{"!type":"[?]","!doc":"<p>An array of objects indexed by the <a href=\"#!/api/Ext.layout.SizeModel-property-ordinal\" rel=\"Ext.layout.SizeModel-property-ordinal\" class=\"docClass\">ordinal</a> of a height <code>SizeModel</code> on\na width <code>SizeModel</code> to yield an object describing both height and width size\nmodels.</p>\n\n<p>Used like this:</p>\n\n<pre><code> widthModel.pairsByHeightOrdinal[heightModel.ordinal]\n</code></pre>\n\n<p>This provides a reusable object equivalent to the following:</p>\n\n<pre><code> {\n     width: widthModel,\n     height: heightModel\n }\n</code></pre>\n"},"shrinkWrap":{"!type":"bool","!doc":"<p>True if the size is determined by content irrespective of the container box.</p>\n"}},"sizeModels":{"!type":"?","!doc":"<p>An object containing all SizeModel instances keyed by <code>name</code>.</p>\n"},"sizeModelsArray":{"!type":"[?]","!doc":"<p>An array of all SizeModel instances.</p>\n"}},"SizePolicy":{"!doc":"<p>This class describes how a layout will interact with a component it manages.</p>\n\n<p>There are special instances of this class stored as static properties to avoid object\ninstantiation. All instances of this class should be treated as readonly objects.</p>\n","prototype":{"readsHeight":{"!type":"bool","!doc":"<p>Indicates that the <code>height</code> of the component is consumed.</p>\n"},"readsWidth":{"!type":"bool","!doc":"<p>Indicates that the <code>width</code> of the component is consumed.</p>\n"},"setsHeight":{"!type":"bool","!doc":"<p>Indicates that the <code>height</code> of the component will be set (i.e., calculated).</p>\n"},"setsWidth":{"!type":"bool","!doc":"<p>Indicates that the <code>width</code> of the component will be set (i.e., calculated).</p>\n"}}},"component":{"Auto":{"!doc":"<p>The class is the default component layout for <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> when no explicit\n<code><a href=\"#!/api/Ext.Component-cfg-componentLayout\" rel=\"Ext.Component-cfg-componentLayout\" class=\"docClass\">componentLayout</a></code> is configured.</p>\n\n<p>This class uses template methods to perform the individual aspects of measurement,\ncalculation and publication of results. The methods called depend on the component's\n<a href=\"#!/api/Ext.AbstractComponent-method-getSizeModel\" rel=\"Ext.AbstractComponent-method-getSizeModel\" class=\"docClass\">size model</a>.</p>\n\n<h2>configured / calculated</h2>\n\n<p>In either of these size models, the dimension of the outer element is of a known size.\nThe size is found in the <code>ownerContext</code> (the <a href=\"#!/api/Ext.layout.ContextItem\" rel=\"Ext.layout.ContextItem\" class=\"docClass\">Ext.layout.ContextItem</a> for the owner\ncomponent) as either \"width\" or \"height\". This value, if available, is passed to the\n<code>publishInnerWidth</code> or <code>publishInnerHeight</code> method, respectively.</p>\n\n<h2>shrinkWrap</h2>\n\n<p>When a dimension uses the <code>shrinkWrap</code> size model, that means the content is measured,\nthen the outer (owner) size is calculated and published.</p>\n\n<p>For example, for a shrinkWrap width, the following sequence of calls are made:</p>\n\n<ul>\n<li><code><a href=\"#!/api/Ext.layout.component.Component-method-measureContentWidth\" rel=\"Ext.layout.component.Component-method-measureContentWidth\" class=\"docClass\">Ext.layout.component.Component.measureContentWidth</a></code></li>\n<li><code>publishOwnerWidth</code>\n\n<ul>\n<li><code>calculateOwnerWidthFromContentWidth</code></li>\n<li><code>publishInnerWidth</code> (in the event of hitting a min/maxWidth constraint)</li>\n</ul>\n</li>\n</ul>\n\n\n<h2>natural</h2>\n\n<p>When a dimension uses the <code>natural</code> size model, the measurement is made on the outer\n(owner) element. This size is then used to determine the content area in much the same\nway as if the outer element had a <code>configured</code> or <code>calculated</code> size model.</p>\n\n<ul>\n<li><code><a href=\"#!/api/Ext.layout.component.Component-method-measureOwnerWidth\" rel=\"Ext.layout.component.Component-method-measureOwnerWidth\" class=\"docClass\">Ext.layout.component.Component.measureOwnerWidth</a></code></li>\n<li><code>publishInnerWidth</code></li>\n</ul>\n\n","!type":"fn(config: Ext_layout_component_Auto_cfg)","prototype":{"!proto":"Ext.layout.component.Component.prototype","setHeightInDom":{"!type":"bool","!doc":"<p>When publishing height of an auto Component, it is usually not written to the DOM.\nSetting this to <code>true</code> overrides this behaviour.</p>\n"},"setWidthInDom":{"!type":"bool","!doc":"<p>When publishing width of an auto Component, it is usually not written to the DOM.\nSetting this to <code>true</code> overrides this behaviour.</p>\n"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"waitForOuterHeightInDom":{"!type":"bool"},"waitForOuterWidthInDom":{"!type":"bool"},"beginLayoutCycle":{"!type":"fn(ownerContext: ?, firstCycle: ?) -> !this","!doc":"<p>Called before any calculation cycles to reset DOM values and prepare for calculation.</p>\n\n<p>This is a write phase and DOM reads should be strictly avoided when overridding\nthis method.</p>\n"},"calculate":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called to perform the calculations for this layout. This method will be called at\nleast once and may be called repeatedly if the <a href=\"#!/api/Ext.layout.component.Auto-property-done\" rel=\"Ext.layout.component.Auto-property-done\" class=\"docClass\">done</a> property is cleared\nbefore return to indicate that this layout is not yet done. The <a href=\"#!/api/Ext.layout.component.Auto-property-done\" rel=\"Ext.layout.component.Auto-property-done\" class=\"docClass\">done</a> property\nis always set to <code>true</code> before entering this method.</p>\n\n<p>This is a read phase and DOM writes should be strictly avoided in derived classes.\nInstead, DOM writes need to be written to <a href=\"#!/api/Ext.layout.ContextItem\" rel=\"Ext.layout.ContextItem\" class=\"docClass\">Ext.layout.ContextItem</a> objects to\n be flushed at the next opportunity.</p>\n"},"calculateOwnerHeightFromContentHeight":{"!type":"fn(ownerContext: ?, contentHeight: ?) -> !this"},"calculateOwnerWidthFromContentWidth":{"!type":"fn(ownerContext: ?, contentWidth: ?) -> !this"},"publishOwnerHeight":{"!type":"fn(ownerContext: ?, contentHeight: ?) -> !this"},"publishOwnerWidth":{"!type":"fn(ownerContext: ?, contentWidth: ?) -> !this"}}},"Body":{"!doc":"<p>Component layout for components which maintain an inner body element which must be resized to synchronize with the\nComponent size.</p>\n","!type":"fn(config: Ext_layout_component_Body_cfg)","prototype":{"!proto":"Ext.layout.component.Auto.prototype","type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"beginLayout":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called before any calculation cycles to prepare for layout.</p>\n\n<p>This is a write phase and DOM reads should be strictly avoided when overridding\nthis method.</p>\n"},"beginLayoutCycle":{"!type":"fn(ownerContext: ?, firstCycle: ?) -> !this","!doc":"<p>Called before any calculation cycles to reset DOM values and prepare for calculation.</p>\n\n<p>This is a write phase and DOM reads should be strictly avoided when overridding\nthis method.</p>\n"},"calculateOwnerHeightFromContentHeight":{"!type":"fn(ownerContext: ?, contentHeight: ?) -> !this","!doc":"<p>Padding is exciting here because we have 2 el's: owner.el and owner.body. Content\nsize always includes the padding of the targetEl, which should be owner.body. But\nit is common to have padding on owner.el also (such as a panel header), so we need\nto do some more padding work if targetContext is not owner.el. The base class has\nalready handled the ownerContext's frameInfo (border+framing) so all that is left\nis padding.</p>\n"},"calculateOwnerWidthFromContentWidth":{"!type":"fn(ownerContext: ?, contentWidth: ?) -> !this"},"measureContentHeight":{"!type":"fn(ownerContext: ?) -> !this"},"measureContentWidth":{"!type":"fn(ownerContext: ?) -> !this"},"publishInnerHeight":{"!type":"fn(ownerContext: ?, height: ?) -> !this"},"publishInnerWidth":{"!type":"fn(ownerContext: ?, width: ?) -> !this"}}},"BoundList":{"!doc":"<p>Component layout for <a href=\"#!/api/Ext.view.BoundList\" rel=\"Ext.view.BoundList\" class=\"docClass\">Ext.view.BoundList</a>.</p>\n","!type":"fn(config: Ext_layout_component_BoundList_cfg)","prototype":{"!proto":"Ext.layout.component.Auto.prototype","type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"beginLayout":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called before any calculation cycles to prepare for layout.</p>\n\n<p>This is a write phase and DOM reads should be strictly avoided when overridding\nthis method.</p>\n"},"beginLayoutCycle":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called before any calculation cycles to reset DOM values and prepare for calculation.</p>\n\n<p>This is a write phase and DOM reads should be strictly avoided when overridding\nthis method.</p>\n"},"calculateOwnerHeightFromContentHeight":{"!type":"fn(ownerContext: ?) -> !this"},"finishedLayout":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>This method is called after all layouts are complete and their calculations flushed\nto the DOM. No further layouts will be run and this method is only called once per\nlayout run. The base component layout caches <code>lastComponentSize</code>.</p>\n\n<p>This is a write phase and DOM reads should be avoided if possible when overridding\nthis method.</p>\n\n<p>This method need not be implemented by derived classes and, in fact, should only be\nimplemented when needed.</p>\n"},"getLayoutItems":{"!type":"fn() -> !this","!doc":"<p>Returns the set of items to layout (empty by default).</p>\n"},"isValidParent":{"!type":"fn() -> !this","!doc":"<p>Validates item is in the proper place in the dom.</p>\n"},"measureContentHeight":{"!type":"fn(ownerContext: ?) -> !this"},"measureContentWidth":{"!type":"fn(ownerContext: ?) -> !this"},"publishInnerHeight":{"!type":"fn(ownerContext: ?, height: ?) -> !this"}}},"Button":{"!doc":"<p>Component layout for buttons</p>\n","!type":"fn(config: Ext_layout_component_Button_cfg)","prototype":{"!proto":"Ext.layout.component.Auto.prototype","htmlRE":{"!type":"+RegExp"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"beginLayout":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called before any calculation cycles to prepare for layout.</p>\n\n<p>This is a write phase and DOM reads should be strictly avoided when overridding\nthis method.</p>\n"},"beginLayoutCycle":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called before any calculation cycles to reset DOM values and prepare for calculation.</p>\n\n<p>This is a write phase and DOM reads should be strictly avoided when overridding\nthis method.</p>\n"},"calculate":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called to perform the calculations for this layout. This method will be called at\nleast once and may be called repeatedly if the <a href=\"#!/api/Ext.layout.component.Button-property-done\" rel=\"Ext.layout.component.Button-property-done\" class=\"docClass\">done</a> property is cleared\nbefore return to indicate that this layout is not yet done. The <a href=\"#!/api/Ext.layout.component.Button-property-done\" rel=\"Ext.layout.component.Button-property-done\" class=\"docClass\">done</a> property\nis always set to <code>true</code> before entering this method.</p>\n\n<p>This is a read phase and DOM writes should be strictly avoided in derived classes.\nInstead, DOM writes need to be written to <a href=\"#!/api/Ext.layout.ContextItem\" rel=\"Ext.layout.ContextItem\" class=\"docClass\">Ext.layout.ContextItem</a> objects to\n be flushed at the next opportunity.</p>\n"},"centerInnerEl":{"!type":"fn(ownerContext: ?, btnElHeight: ?) -> !this"},"ieCenterIcon":{"!type":"fn(ownerContext: ?, btnElHeight: ?) -> !this"},"publishInnerWidth":{"!type":"fn(ownerContext: ?, width: ?) -> !this"}}},"Component":{"!doc":"<p>This class is intended to be extended or created via the <a href=\"#!/api/Ext.Component-cfg-componentLayout\" rel=\"Ext.Component-cfg-componentLayout\" class=\"docClass\">layout</a>\nconfiguration property.  See <a href=\"#!/api/Ext.Component-cfg-componentLayout\" rel=\"Ext.Component-cfg-componentLayout\" class=\"docClass\">Ext.Component.componentLayout</a> for additional details.</p>\n","!type":"fn(config: Ext_layout_component_Component_cfg)","prototype":{"!proto":"Ext.layout.Layout.prototype","isComponentLayout":{"!type":"bool"},"nullBox":{"!type":"?"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"usesContentHeight":{"!type":"bool"},"usesContentWidth":{"!type":"bool"},"usesHeight":{"!type":"bool"},"usesWidth":{"!type":"bool"},"beginLayoutCycle":{"!type":"fn(ownerContext: ?, firstCycle: ?) -> !this","!doc":"<p>Called before any calculation cycles to reset DOM values and prepare for calculation.</p>\n\n<p>This is a write phase and DOM reads should be strictly avoided when overridding\nthis method.</p>\n"},"cacheTargetInfo":{"!type":"fn(ownerContext: ?) -> !this"},"finishedLayout":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>This method is called after all layouts are complete and their calculations flushed\nto the DOM. No further layouts will be run and this method is only called once per\nlayout run. The base component layout caches <code>lastComponentSize</code>.</p>\n\n<p>This is a write phase and DOM reads should be avoided if possible when overridding\nthis method.</p>\n\n<p>This method need not be implemented by derived classes and, in fact, should only be\nimplemented when needed.</p>\n"},"getRenderTarget":{"!type":"fn() -> +Ext.Element","!doc":"<p>Returns the element into which rendering must take place. Defaults to the owner Component's encapsulating element.</p>\n\n<p>May be overridden in Component layout managers which implement an inner element.</p>\n"},"getTarget":{"!type":"fn() -> +Ext.Element","!doc":"<p>Returns the owner component's resize element.</p>\n"},"measureAutoDimensions":{"!type":"fn(ownerContext: ?, dimensions: ?) -> !this"},"measureContentHeight":{"!type":"fn(ownerContext: ?) -> !this"},"measureContentWidth":{"!type":"fn(ownerContext: ?) -> !this"},"measureOwnerHeight":{"!type":"fn(ownerContext: ?) -> !this"},"measureOwnerWidth":{"!type":"fn(ownerContext: ?) -> !this"},"notifyOwner":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>This method (if implemented) is called after all layouts are finished, and all have\na <code>lastComponentSize</code> cached. No further layouts will be run and this method is only\ncalled once per layout run. It is the bookend to <a href=\"#!/api/Ext.layout.component.Component-method-beginLayout\" rel=\"Ext.layout.component.Component-method-beginLayout\" class=\"docClass\">beginLayout</a>.</p>\n\n<p>This is a write phase and DOM reads should be avoided if possible when overridding\nthis method. This is the catch-all tail method to a layout and so the rules are more\nrelaxed. Even so, for performance reasons, it is best to avoid reading the DOM. If\na read is necessary, consider implementing a <a href=\"#!/api/Ext.layout.component.Component-method-finalizeLayout\" rel=\"Ext.layout.component.Component-method-finalizeLayout\" class=\"docClass\">finalizeLayout</a> method to do the\nrequired reads.</p>\n\n<p>This method need not be implemented by derived classes and, in fact, should only be\nimplemented when needed.</p>\n"}}},"Dock":{"!doc":"<p>This ComponentLayout handles docking for Panels. It takes care of panels that are\npart of a ContainerLayout that sets this Panel's size and Panels that are part of\nan AutoContainerLayout in which this panel get his height based of the CSS or\nor its content.</p>\n","!type":"fn(config: Ext_layout_component_Dock_cfg)","prototype":{"!proto":"Ext.layout.component.Component.prototype","borderCollapseMap":{"!type":"?","!doc":"<p>This object is indexed by a component's <code>baseCls</code> to yield another object which\nis then indexed by the component's <code>ui</code> to produce an array of CSS class names.\nThis array is indexed in the same manner as the <code>noBorderClassTable</code> and indicates\nthe a particular edge of a docked item or the body element is actually \"collapsed\"\nwith the component's outer border.</p>\n"},"borderWidthProps":{"!type":"?"},"horizontalCollapsePolicy":{"!type":"?"},"horzAxisProps":{"!type":"?"},"initializedBorders":{"!type":"?"},"noBorderClasses":{"!type":"[?]"},"noBorderClassesSides":{"!type":"?"},"sizePolicy":{"!type":"?"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"vertAxisProps":{"!type":"?"},"verticalCollapsePolicy":{"!type":"?"},"afterInvalidateShrinkWrapDock":{"!type":"fn(itemContext: ?, options: ?) -> !this"},"afterRemove":{"!type":"fn(item: ?) -> !this","!doc":"<p>Removes layout's itemCls and owning Container's itemCls.\nClears the managed dimensions flags</p>\n"},"beforeInvalidateShrinkWrapDock":{"!type":"fn(itemContext: ?, options: ?) -> !this"},"beforeLayoutCycle":{"!type":"fn(ownerContext: ?) -> !this"},"beginLayout":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called before any calculation cycles to prepare for layout.</p>\n\n<p>This is a write phase and DOM reads should be strictly avoided when overridding\nthis method.</p>\n"},"beginLayoutCycle":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called before any calculation cycles to reset DOM values and prepare for calculation.</p>\n\n<p>This is a write phase and DOM reads should be strictly avoided when overridding\nthis method.</p>\n"},"calculate":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called to perform the calculations for this layout. This method will be called at\nleast once and may be called repeatedly if the <a href=\"#!/api/Ext.layout.component.Dock-property-done\" rel=\"Ext.layout.component.Dock-property-done\" class=\"docClass\">done</a> property is cleared\nbefore return to indicate that this layout is not yet done. The <a href=\"#!/api/Ext.layout.component.Dock-property-done\" rel=\"Ext.layout.component.Dock-property-done\" class=\"docClass\">done</a> property\nis always set to <code>true</code> before entering this method.</p>\n\n<p>This is a read phase and DOM writes should be strictly avoided in derived classes.\nInstead, DOM writes need to be written to <a href=\"#!/api/Ext.layout.ContextItem\" rel=\"Ext.layout.ContextItem\" class=\"docClass\">Ext.layout.ContextItem</a> objects to\n be flushed at the next opportunity.</p>\n"},"configureItem":{"!type":"fn(item: +Ext.Component) -> !this","!doc":"<p>We are overriding the <a href=\"#!/api/Ext.layout.Layout\" rel=\"Ext.layout.Layout\" class=\"docClass\">Ext.layout.Layout</a> configureItem method to also add a class that\nindicates the position of the docked item. We use the itemCls (x-docked) as a prefix.\nAn example of a class added to a dock: right item is x-docked-right</p>\n"},"createAxis":{"!type":"fn(ownerContext: ?, contentSize: ?, sizeModel: ?, axisProps: ?, collapsedAxis: ?) -> !this","!doc":"<p>Creates an axis object given the particulars. The process starts by placing the\ndockedItems in an idealized box where this method is called once for each side.\nThe ideal box is defined by the CSS3 border and padding values (which account for\nthe influence of border-radius). The origin (the (0,0) point) of the ideal box is\nthe top-left edge of the border or the border-box. Normal dockedItems are placed\ninside this box at an offset to clear the border and padding and sit properly in\nthe panel next to the body.</p>\n\n<p>The origin has to be started differently if the axis is in shrinkWrap mode. When\nshrink-wrapping an axis, the axis starts at the edge of the body and expands\noutwards as items are docked. This means the ideal (0,0) for shrinkWrap is on the\ntop-left corner of the body.</p>\n\n<p>The following diagram illustrates this using the vertical axis.</p>\n\n<pre><code> +---------------------------+ 10px (border)\n |                           |\n |  xxxxxxxxxxxxxxxxxxxxxxx  | 5px (padding)   shrinkWrap    other\n |  +=====================+  |                   -50         15\n |  |  Header             |  | 30px\n |  |                     |  |\n |  +=====================+  |\n |  +---------------------+  |                   -20         45\n |  |  tbar               |  | 20 px\n |  +---------------------+  |\n |  +---------------------+  |                   0           65\n |  |  Body               |  | 100px\n |  |                     |  |\n |  |                     |  |\n |  +---------------------+  |\n |  +---------------------+  |                   100         165\n |  |  bbar               |  | 15px\n |  +---------------------+  |\n |  xxxxxxxxxxxxxxxxxxxxxxx  | 5px\n |                           |\n +---------------------------+ 10px\n</code></pre>\n\n<p>These are sufficient to determine sizes of things, but to finalize this process\nand assign proper positions, the tentative coordinates have to be adjusted by an\namount appropriate for the item. Because dockedItems are position:absolute, they\nsit inside the border and so must be adjusted for padding. The body is different\nbecause it is position:relative and so it naturally sits inside the padding and\nthe padding must not be included in its position.</p>\n\n<p>Headers and footers that use <code>ignoreParentFrame</code> interact with this process by\nmoving themselves outside the border and padding. So in the above diagram, the\nHeader would move up by 15px and <em>everything else</em> would move up by 10px. When\nshrinkWrap is taking place, the 10px of border on the top is removed from the\nheight as well.</p>\n\n<p>The bbar behaves slightly different when it is <code>ignoreParentFrame</code>. In shrinkWrap\nmode, it alone would move down by the padding and the bottom border would not be\nincluded in the height. Otherwise, the bbar would be moved down 15px (since the\nedge is fixed) and the next dockedItem would be placed at, or the body would be\nstretched down to, 5px (padding) pixels above the bbar.</p>\n"},"dockChild":{"!type":"fn(ownerContext: ?, axis: ?, backward: ?, forward: ?) -> !this","!doc":"<p>Docks a child item on the specified axis. This boils down to determining if the item\nis docked at the \"beginning\" of the axis (\"left\" if horizontal, \"top\" if vertical),\nthe \"end\" of the axis (\"right\" if horizontal, \"bottom\" if vertical) or stretches\nalong the axis (\"top\" or \"bottom\" if horizontal, \"left\" or \"right\" if vertical). It\nalso has to differentiate between fixed and shrinkWrap sized dimensions.</p>\n"},"dockInwardBegin":{"!type":"fn(ownerContext: ?, itemContext: ?, item: ?, axis: ?) -> !this","!doc":"<p>Docks an item on a fixed-size axis at the \"beginning\". The \"beginning\" of the horizontal\naxis is \"left\" and the vertical is \"top\". For a fixed-size axis, the size works from\nthe outer element (the panel) towards the body.</p>\n"},"dockInwardEnd":{"!type":"fn(ownerContext: ?, itemContext: ?, item: ?, axis: ?) -> !this","!doc":"<p>Docks an item on a fixed-size axis at the \"end\". The \"end\" of the horizontal axis is\n\"right\" and the vertical is \"bottom\".</p>\n"},"dockOutwardBegin":{"!type":"fn(ownerContext: ?, itemContext: ?, item: ?, axis: ?) -> !this","!doc":"<p>Docks an item on a shrinkWrap axis at the \"beginning\". The \"beginning\" of the horizontal\naxis is \"left\" and the vertical is \"top\". For a shrinkWrap axis, the size works from\nthe body outward to the outermost element (the panel).</p>\n\n<p>During the docking process, coordinates are allowed to be negative. We start with the\nbody at (0,0) so items docked \"top\" or \"left\" will simply be assigned negative x/y. In\nthe <a href=\"#!/api/Ext.layout.component.Dock-method-finishPositions\" rel=\"Ext.layout.component.Dock-method-finishPositions\" class=\"docClass\">finishPositions</a> method these are corrected and framing is added. This way\nthe correction is applied as a simple translation of delta x/y on all coordinates to\nbring the origin back to (0,0).</p>\n"},"dockOutwardEnd":{"!type":"fn(ownerContext: ?, itemContext: ?, item: ?, axis: ?) -> !this","!doc":"<p>Docks an item on a shrinkWrap axis at the \"end\". The \"end\" of the horizontal axis is\n\"right\" and the vertical is \"bottom\".</p>\n"},"dockStretch":{"!type":"fn(ownerContext: ?, itemContext: ?, item: ?, axis: ?) -> !this","!doc":"<p>Docks an item that might stretch across an axis. This is done for dock \"top\" and\n\"bottom\" items on the horizontal axis and dock \"left\" and \"right\" on the vertical.</p>\n"},"finishAxis":{"!type":"fn(ownerContext: ?, axis: ?) -> !this","!doc":"<p>Finishes the calculation of an axis by determining its size. In non-shrink-wrap\ncases, this is also where we set the body size.</p>\n"},"finishConstraints":{"!type":"fn(ownerContext: ?, horz: ?, vert: ?) -> !this","!doc":"<p>Finishes processing of each axis by applying the min/max size constraints.</p>\n"},"finishPositions":{"!type":"fn(ownerContext: ?, horz: ?, vert: ?) -> !this","!doc":"<p>Finishes the calculation by setting positions on the body and all of the items.</p>\n"},"finishRender":{"!type":"fn() -> !this"},"finishedLayout":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>This method is called after all layouts are complete and their calculations flushed\nto the DOM. No further layouts will be run and this method is only called once per\nlayout run. The base component layout caches <code>lastComponentSize</code>.</p>\n\n<p>This is a write phase and DOM reads should be avoided if possible when overridding\nthis method.</p>\n\n<p>This method need not be implemented by derived classes and, in fact, should only be\nimplemented when needed.</p>\n"},"getAnimatePolicy":{"!type":"fn(ownerContext: ?) -> !this"},"getBorderCollapseTable":{"!type":"fn() -> !this","!doc":"<p>Returns the array of class names to add to a docked item or body element when for\nthe edges that should collapse with the outer component border. Basically, the\npanel's outer border must look visually like a contiguous border but may need to\nbe realized by using the border of docked items and/or the body. This class name\nallows the border color and width to be controlled accordingly and distinctly from\nthe border of the docked item or body element when it is not having its border\ncollapsed.</p>\n"},"getDockCls":{"!type":"fn(dock: string) -> string","!doc":"<p>Get's the css class name for a given dock position.</p>\n"},"getDockedItems":{"!type":"fn(order?: string, beforeBody?: bool) -> [+Ext.Component]","!doc":"<p>Retrieve an ordered and/or filtered array of all docked Components.</p>\n"},"getItemSizePolicy":{"!type":"fn(item: ?, ownerSizeModel: ?) -> +Ext.layout.SizePolicy","!doc":"<p>Returns an object describing how this layout manages the size of the given component.\nThis method must be implemented by any layout that manages components.</p>\n"},"getItemWeight":{"!type":"fn(item: ?, order: ?) -> !this"},"getLayoutItems":{"!type":"fn() -> [?]","!doc":"<p>Returns an array containing all the <strong>visible</strong> docked items inside this layout's owner Panel</p>\n"},"handleItemBorders":{"!type":"fn() -> !this"},"invalidateAxes":{"!type":"fn(ownerContext: ?, horz: ?, vert: ?) -> !this","!doc":"<p>The default weighting of docked items produces this arrangement:</p>\n\n<pre><code> +--------------------------------------------+\n |                    Top 1                   |\n +--------------------------------------------+\n |                    Top 2                   |\n +-----+-----+--------------------+-----+-----+\n |     |     |                    |     |     |\n |     |     |                    |     |     |\n |     |     |                    |  R  |  R  |\n |  L  |  L  |                    |  I  |  I  |\n |  E  |  E  |                    |  G  |  G  |\n |  F  |  F  |                    |  H  |  H  |\n |  T  |  T  |                    |  T  |  T  |\n |     |     |                    |     |     |\n |  2  |  1  |                    |  1  |  2  |\n |     |     |                    |     |     |\n |     |     |                    |     |     |\n +-----+-----+--------------------+-----+-----+\n |                  Bottom 1                  |\n +--------------------------------------------+\n |                  Bottom 2                  |\n +--------------------------------------------+\n</code></pre>\n\n<p>So when we are shrinkWrapDock on the horizontal, the stretch size for top/bottom\ndocked items is the final axis size. For the vertical axis, however, the stretch</p>\n"},"isItemBoxParent":{"!type":"fn(itemContext: ?) -> !this"},"isItemShrinkWrap":{"!type":"fn(item: ?) -> !this"},"measureContentHeight":{"!type":"fn(ownerContext: ?) -> !this"},"measureContentWidth":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Content size includes padding but not borders, so subtract them off</p>\n"},"redoLayout":{"!type":"fn(ownerContext: ?) -> !this"},"renderChildren":{"!type":"fn() -> !this","!doc":"<p>override inherited.\nWe need to render in the correct order, top/left before bottom/right</p>\n"},"renderItems":{"!type":"fn(items: ?, target: ?) -> !this","!doc":"<p>Render the top and left docked items before any existing DOM nodes in our render target,\nand then render the right and bottom docked items after. This is important, for such things\nas tab stops and ARIA readers, that the DOM nodes are in a meaningful order.\nOur collection of docked items will already be ordered via Panel.getDockedItems().</p>\n"},"undoLayout":{"!type":"fn(ownerContext: ?) -> !this"}}},"Draw":{"!type":"fn(config: Ext_layout_component_Draw_cfg)","prototype":{"!proto":"Ext.layout.component.Auto.prototype","setHeightInDom":{"!type":"bool","!doc":"<p>When publishing height of an auto Component, it is usually not written to the DOM.\nSetting this to <code>true</code> overrides this behaviour.</p>\n"},"setWidthInDom":{"!type":"bool","!doc":"<p>When publishing width of an auto Component, it is usually not written to the DOM.\nSetting this to <code>true</code> overrides this behaviour.</p>\n"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"finishedLayout":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>This method is called after all layouts are complete and their calculations flushed\nto the DOM. No further layouts will be run and this method is only called once per\nlayout run. The base component layout caches <code>lastComponentSize</code>.</p>\n\n<p>This is a write phase and DOM reads should be avoided if possible when overridding\nthis method.</p>\n\n<p>This method need not be implemented by derived classes and, in fact, should only be\nimplemented when needed.</p>\n"},"getBBox":{"!type":"fn(ownerContext: ?) -> !this"},"measureContentHeight":{"!type":"fn(ownerContext: ?) -> !this"},"measureContentWidth":{"!type":"fn(ownerContext: ?) -> !this"},"publishInnerHeight":{"!type":"fn(ownerContext: ?, height: ?) -> !this"},"publishInnerWidth":{"!type":"fn(ownerContext: ?, width: ?) -> !this"}}},"FieldSet":{"!doc":"<p>Component layout for <a href=\"#!/api/Ext.form.FieldSet\" rel=\"Ext.form.FieldSet\" class=\"docClass\">Ext.form.FieldSet</a> components</p>\n","!type":"fn(config: Ext_layout_component_FieldSet_cfg)","prototype":{"!proto":"Ext.layout.component.Body.prototype","defaultCollapsedWidth":{"!type":"number"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"beforeLayoutCycle":{"!type":"fn(ownerContext: ?) -> !this"},"beginLayoutCycle":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called before any calculation cycles to reset DOM values and prepare for calculation.</p>\n\n<p>This is a write phase and DOM reads should be strictly avoided when overridding\nthis method.</p>\n"},"calculateOwnerHeightFromContentHeight":{"!type":"fn(ownerContext: ?, contentHeight: ?) -> !this","!doc":"<p>Padding is exciting here because we have 2 el's: owner.el and owner.body. Content\nsize always includes the padding of the targetEl, which should be owner.body. But\nit is common to have padding on owner.el also (such as a panel header), so we need\nto do some more padding work if targetContext is not owner.el. The base class has\nalready handled the ownerContext's frameInfo (border+framing) so all that is left\nis padding.</p>\n"},"finishedLayout":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>This method is called after all layouts are complete and their calculations flushed\nto the DOM. No further layouts will be run and this method is only called once per\nlayout run. The base component layout caches <code>lastComponentSize</code>.</p>\n\n<p>This is a write phase and DOM reads should be avoided if possible when overridding\nthis method.</p>\n\n<p>This method need not be implemented by derived classes and, in fact, should only be\nimplemented when needed.</p>\n"},"getLayoutItems":{"!type":"fn() -> !this","!doc":"<p>Returns the set of items to layout (empty by default).</p>\n"},"publishInnerHeight":{"!type":"fn(ownerContext: ?, height: ?) -> !this"}}},"ProgressBar":{"!type":"fn(config: Ext_layout_component_ProgressBar_cfg)","prototype":{"!proto":"Ext.layout.component.Auto.prototype","type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"beginLayout":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called before any calculation cycles to prepare for layout.</p>\n\n<p>This is a write phase and DOM reads should be strictly avoided when overridding\nthis method.</p>\n"},"calculate":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called to perform the calculations for this layout. This method will be called at\nleast once and may be called repeatedly if the <a href=\"#!/api/Ext.layout.component.ProgressBar-property-done\" rel=\"Ext.layout.component.ProgressBar-property-done\" class=\"docClass\">done</a> property is cleared\nbefore return to indicate that this layout is not yet done. The <a href=\"#!/api/Ext.layout.component.ProgressBar-property-done\" rel=\"Ext.layout.component.ProgressBar-property-done\" class=\"docClass\">done</a> property\nis always set to <code>true</code> before entering this method.</p>\n\n<p>This is a read phase and DOM writes should be strictly avoided in derived classes.\nInstead, DOM writes need to be written to <a href=\"#!/api/Ext.layout.ContextItem\" rel=\"Ext.layout.ContextItem\" class=\"docClass\">Ext.layout.ContextItem</a> objects to\n be flushed at the next opportunity.</p>\n"}}},"field":{"ComboBox":{"!doc":"<p>Layout class for <a href=\"#!/api/Ext.form.field.ComboBox\" rel=\"Ext.form.field.ComboBox\" class=\"docClass\">Ext.form.field.ComboBox</a> fields. Handles sizing the input field.</p>\n","!type":"fn(config: Ext_layout_component_field_ComboBox_cfg)","prototype":{"!proto":"Ext.layout.component.field.Trigger.prototype","startingWidth":{"!type":"?"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"getTextWidth":{"!type":"fn() -> !this"}}},"Field":{"!doc":"<p>Layout class for components with <a href=\"#!/api/Ext.form.Labelable\" rel=\"Ext.form.Labelable\" class=\"docClass\">field labeling</a>, handling the sizing and alignment of\nthe form control, label, and error message treatment.</p>\n","!type":"fn(config: Ext_layout_component_field_Field_cfg)","prototype":{"!proto":"Ext.layout.component.Auto.prototype","elementId":{"!type":"?","!doc":"<p>Error message displayed as content of an element with a given id elsewhere in the app</p>\n"},"errorStrategies":{"!type":"?","!doc":"<p>Collection of named strategies for laying out and adjusting insets to accommodate error messages.\nAn appropriate one will be chosen based on the owner field's <a href=\"#!/api/Ext.form.Labelable-cfg-msgTarget\" rel=\"Ext.form.Labelable-cfg-msgTarget\" class=\"docClass\">Ext.form.Labelable.msgTarget</a> config.</p>\n"},"labelStrategies":{"!type":"?","!doc":"<p>Collection of named strategies for laying out and adjusting labels to accommodate error messages.\nAn appropriate one will be chosen based on the owner field's <a href=\"#!/api/Ext.form.Labelable-cfg-labelAlign\" rel=\"Ext.form.Labelable-cfg-labelAlign\" class=\"docClass\">Ext.form.Labelable.labelAlign</a> config.</p>\n"},"left":{"!type":"?","!doc":"<p>Label displayed to the left of the bodyEl</p>\n"},"naturalSizingProp":{"!type":"string"},"qtip":{"!type":"?","!doc":"<p>Error displayed as QuickTip on hover of the field container</p>\n"},"right":{"!type":"?","!doc":"<p>Same as left, only difference is text-align in CSS</p>\n"},"side":{"!type":"?","!doc":"<p>Error displayed as icon (with QuickTip on hover) to right of the bodyEl</p>\n"},"title":{"!type":"?","!doc":"<p>Error displayed as title tip on hover of the field container</p>\n"},"top":{"!type":"?","!doc":"<p>Label displayed above the bodyEl</p>\n"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"under":{"!type":"?","!doc":"<p>Error message displayed underneath the bodyEl</p>\n"},"beginLayout":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called before any calculation cycles to prepare for layout.</p>\n\n<p>This is a write phase and DOM reads should be strictly avoided when overridding\nthis method.</p>\n"},"beginLayoutCycle":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called before any calculation cycles to reset DOM values and prepare for calculation.</p>\n\n<p>This is a write phase and DOM reads should be strictly avoided when overridding\nthis method.</p>\n"},"beginLayoutFixed":{"!type":"fn(ownerContext: ?, width: ?, suffix: ?) -> !this"},"beginLayoutShrinkWrap":{"!type":"fn(ownerContext: ?) -> !this"},"calculateOwnerHeightFromContentHeight":{"!type":"fn(ownerContext: ?, contentHeight: ?) -> !this"},"finishedLayout":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>This method is called after all layouts are complete and their calculations flushed\nto the DOM. No further layouts will be run and this method is only called once per\nlayout run. The base component layout caches <code>lastComponentSize</code>.</p>\n\n<p>This is a write phase and DOM reads should be avoided if possible when overridding\nthis method.</p>\n\n<p>This method need not be implemented by derived classes and, in fact, should only be\nimplemented when needed.</p>\n"},"getErrorStrategy":{"!type":"fn() -> !this","!doc":"<p>Return the set of strategy functions from the <a href=\"#!/api/Ext.layout.component.field.Field-property-errorStrategies\" rel=\"Ext.layout.component.field.Field-property-errorStrategies\" class=\"docClass\">errorStrategies collection</a>\nthat is appropriate for the field's <a href=\"#!/api/Ext.form.Labelable-cfg-msgTarget\" rel=\"Ext.form.Labelable-cfg-msgTarget\" class=\"docClass\">msgTarget</a> config.</p>\n"},"getLabelStrategy":{"!type":"fn() -> !this","!doc":"<p>Return the set of strategy functions from the <a href=\"#!/api/Ext.layout.component.field.Field-property-labelStrategies\" rel=\"Ext.layout.component.field.Field-property-labelStrategies\" class=\"docClass\">labelStrategies collection</a>\nthat is appropriate for the field's <a href=\"#!/api/Ext.form.Labelable-cfg-labelAlign\" rel=\"Ext.form.Labelable-cfg-labelAlign\" class=\"docClass\">labelAlign</a> config.</p>\n"},"measureContentHeight":{"!type":"fn(ownerContext: ?) -> !this"},"measureContentWidth":{"!type":"fn(ownerContext: ?) -> !this"},"measureLabelErrorHeight":{"!type":"fn(ownerContext: ?) -> !this"},"onFocus":{"!type":"fn() -> !this"}},"destroyTip":{"!type":"fn() -> !this","!doc":"<p>Destroy the error tip instance.</p>\n"},"initTip":{"!type":"fn() -> !this","!doc":"<p>Use a custom QuickTip instance separate from the main QuickTips singleton, so that we\ncan give it a custom frame style. Responds to errorqtip rather than the qtip property.</p>\n"}},"FieldContainer":{"!type":"fn(config: Ext_layout_component_field_FieldContainer_cfg)","prototype":{"!proto":"Ext.layout.component.field.Field.prototype","type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"waitForOuterHeightInDom":{"!type":"bool"},"waitForOuterWidthInDom":{"!type":"bool"},"beginLayout":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called before any calculation cycles to prepare for layout.</p>\n\n<p>This is a write phase and DOM reads should be strictly avoided when overridding\nthis method.</p>\n"},"measureContentHeight":{"!type":"fn(ownerContext: ?) -> !this"},"measureContentWidth":{"!type":"fn(ownerContext: ?) -> !this"},"publishInnerHeight":{"!type":"fn(ownerContext: ?, height: ?) -> !this"},"publishInnerWidth":{"!type":"fn(ownerContext: ?, width: ?) -> !this"}}},"HtmlEditor":{"!doc":"<p>Layout class for <a href=\"#!/api/Ext.form.field.HtmlEditor\" rel=\"Ext.form.field.HtmlEditor\" class=\"docClass\">Ext.form.field.HtmlEditor</a> fields. Sizes textarea and iframe elements.</p>\n","!type":"fn(config: Ext_layout_component_field_HtmlEditor_cfg)","prototype":{"!proto":"Ext.layout.component.field.FieldContainer.prototype","naturalHeight":{"!type":"number"},"naturalWidth":{"!type":"number"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"beginLayout":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called before any calculation cycles to prepare for layout.</p>\n\n<p>This is a write phase and DOM reads should be strictly avoided when overridding\nthis method.</p>\n"},"beginLayoutCycle":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called before any calculation cycles to reset DOM values and prepare for calculation.</p>\n\n<p>This is a write phase and DOM reads should be strictly avoided when overridding\nthis method.</p>\n"},"finishedLayout":{"!type":"fn() -> !this","!doc":"<p>This method is called after all layouts are complete and their calculations flushed\nto the DOM. No further layouts will be run and this method is only called once per\nlayout run. The base component layout caches <code>lastComponentSize</code>.</p>\n\n<p>This is a write phase and DOM reads should be avoided if possible when overridding\nthis method.</p>\n\n<p>This method need not be implemented by derived classes and, in fact, should only be\nimplemented when needed.</p>\n"},"publishInnerHeight":{"!type":"fn(ownerContext: ?, height: ?) -> !this"},"publishInnerWidth":{"!type":"fn(ownerContext: ?, width: ?) -> !this","!doc":"<p>The offsets for the text area are needed for bugs in sizing with IE.\nThe main issue behind it is that the iframe requires an initial height\nto be set while the component is auto sizing, however we need to switch\nit when using a configured size. A more permanent solution might be to\nhave the iframe and text area be child components of the container\nas opposed to being directly inserted into the DOM.</p>\n"},"publishOwnerWidth":{"!type":"fn(ownerContext: ?, width: ?) -> !this"}}},"Slider":{"!type":"fn(config: Ext_layout_component_field_Slider_cfg)","prototype":{"!proto":"Ext.layout.component.field.Field.prototype","type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"beginLayout":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called before any calculation cycles to prepare for layout.</p>\n\n<p>This is a write phase and DOM reads should be strictly avoided when overridding\nthis method.</p>\n"},"beginLayoutFixed":{"!type":"fn(ownerContext: ?, width: ?, suffix: ?) -> !this"},"publishInnerHeight":{"!type":"fn(ownerContext: ?, height: ?) -> !this"},"publishInnerWidth":{"!type":"fn(ownerContext: ?, width: ?) -> !this"}}},"Text":{"!doc":"<p>Layout class for <a href=\"#!/api/Ext.form.field.Text\" rel=\"Ext.form.field.Text\" class=\"docClass\">Ext.form.field.Text</a> fields. Handles sizing the input field.</p>\n","!type":"fn(config: Ext_layout_component_field_Text_cfg)","prototype":{"!proto":"Ext.layout.component.field.Field.prototype","canGrowWidth":{"!type":"bool"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"adjustIEInputPadding":{"!type":"fn(ownerContext: ?) -> !this"},"beginLayoutCycle":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called before any calculation cycles to reset DOM values and prepare for calculation.</p>\n\n<p>This is a write phase and DOM reads should be strictly avoided when overridding\nthis method.</p>\n"},"beginLayoutFixed":{"!type":"fn(ownerContext: ?, width: ?, suffix: ?) -> !this"},"measureContentWidth":{"!type":"fn(ownerContext: ?) -> !this"},"publishInnerHeight":{"!type":"fn(ownerContext: ?, height: ?) -> !this"}}},"TextArea":{"!doc":"<p>Layout class for <a href=\"#!/api/Ext.form.field.TextArea\" rel=\"Ext.form.field.TextArea\" class=\"docClass\">Ext.form.field.TextArea</a> fields. Handles sizing the textarea field.</p>\n","!type":"fn(config: Ext_layout_component_field_TextArea_cfg)","prototype":{"!proto":"Ext.layout.component.field.Text.prototype","canGrowWidth":{"!type":"bool"},"naturalSizingProp":{"!type":"string"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"beginLayout":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called before any calculation cycles to prepare for layout.</p>\n\n<p>This is a write phase and DOM reads should be strictly avoided when overridding\nthis method.</p>\n"},"measureContentHeight":{"!type":"fn(ownerContext: ?) -> !this"}}},"Trigger":{"!doc":"<p>Layout class for <a href=\"#!/api/Ext.form.field.Trigger\" rel=\"Ext.form.field.Trigger\" class=\"docClass\">Ext.form.field.Trigger</a> fields. Adjusts the input field size to accommodate\nthe trigger button(s).</p>\n","!type":"fn(config: Ext_layout_component_field_Trigger_cfg)","prototype":{"!proto":"Ext.layout.component.field.Field.prototype","borderWidths":{"!type":"?","!doc":"<p>Private. Cached extra width values containing width of all a trigger field's \"furniture\" round the actual input element</p>\n"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"adjustIEInputPadding":{"!type":"fn(ownerContext: ?) -> !this"},"beginLayout":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called before any calculation cycles to prepare for layout.</p>\n\n<p>This is a write phase and DOM reads should be strictly avoided when overridding\nthis method.</p>\n"},"beginLayoutCycle":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called before any calculation cycles to reset DOM values and prepare for calculation.</p>\n\n<p>This is a write phase and DOM reads should be strictly avoided when overridding\nthis method.</p>\n"},"beginLayoutFixed":{"!type":"fn(ownerContext: ?, width: ?, suffix: ?) -> !this"},"beginLayoutShrinkWrap":{"!type":"fn(ownerContext: ?) -> !this"},"getExtraWidth":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Returns the width of the \"extras\" around the input field. This includes the total width\nof all the triggers in the field and any outer bordering.</p>\n\n<p>This measurement is used when explicitly sizing the contained input field to a smaller inner\nwidth while keeping the outer component width the same. This extra width is subtracted from the\ntotal component width to calculate the new width for the input field.</p>\n"},"getTextWidth":{"!type":"fn() -> !this"},"measureContentWidth":{"!type":"fn(ownerContext: ?) -> !this"},"publishInnerHeight":{"!type":"fn(ownerContext: ?, height: ?) -> !this"},"publishOwnerWidth":{"!type":"fn(ownerContext: ?, width: ?) -> !this"},"updateEditState":{"!type":"fn() -> !this"}}}}},"container":{"Absolute":{"!doc":"<p>This is a layout that inherits the anchoring of <a href=\"#!/api/Ext.layout.container.Anchor\" rel=\"Ext.layout.container.Anchor\" class=\"docClass\">Ext.layout.container.Anchor</a> and adds the\nability for x/y positioning using the standard x and y component config options.</p>\n\n<p>This class is intended to be extended or created via the <a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">layout</a>\nconfiguration property.  See <a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">Ext.container.Container.layout</a> for additional details.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.Panel\" rel=\"Ext.form.Panel\" class=\"docClass\">Ext.form.Panel</a>', {\n    title: 'Absolute Layout',\n    width: 300,\n    height: 275,\n    layout: {\n        type: 'absolute'\n        // layout-specific configs go here\n        //itemCls: 'x-abs-layout-item',\n    },\n    url:'save-form.php',\n    defaultType: 'textfield',\n    items: [{\n        x: 10,\n        y: 10,\n        xtype:'label',\n        text: 'Send To:'\n    },{\n        x: 80,\n        y: 10,\n        name: 'to',\n        anchor:'90%'  // anchor width by percentage\n    },{\n        x: 10,\n        y: 40,\n        xtype:'label',\n        text: 'Subject:'\n    },{\n        x: 80,\n        y: 40,\n        name: 'subject',\n        anchor: '90%'  // anchor width by percentage\n    },{\n        x:0,\n        y: 80,\n        xtype: 'textareafield',\n        name: 'msg',\n        anchor: '100% 100%'  // anchor width and height\n    }],\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n","!type":"fn()","prototype":{"!proto":"Ext.layout.container.Anchor.prototype","ignoreOnContentChange":{"!type":"bool","!doc":"<p>True indicates that changes to one item in this layout do not effect the layout in\ngeneral. This may need to be set to false if <a href=\"#!/api/Ext.Component-cfg-autoScroll\" rel=\"Ext.Component-cfg-autoScroll\" class=\"docClass\">Ext.Component.autoScroll</a>\nis enabled for the container.</p>\n"},"itemCls":{"!type":"string","!doc":"<p>An optional extra CSS class that will be added to the container. This can be useful for\nadding customized styles to the container or any of its children using standard CSS\nrules. See <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>.<a href=\"#!/api/Ext.Component-cfg-componentCls\" rel=\"Ext.Component-cfg-componentCls\" class=\"docClass\">componentCls</a> also.</p>\n"},"targetCls":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"adjustHeightAnchor":{"!type":"fn(value: ?, childContext: ?) -> !this","!doc":"<p>private</p>\n"},"adjustWidthAnchor":{"!type":"fn(value: ?, childContext: ?) -> !this","!doc":"<p>private</p>\n"},"beginLayout":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>In addition to work done by our base classes, containers benefit from some extra\ncached data. The following properties are added to the ownerContext:</p>\n\n<ul>\n<li>visibleItems: the result of <a href=\"#!/api/Ext.layout.container.Absolute-method-getVisibleItems\" rel=\"Ext.layout.container.Absolute-method-getVisibleItems\" class=\"docClass\">getVisibleItems</a></li>\n<li>childItems: the ContextItem[] for each visible item</li>\n<li>targetContext: the ContextItem for the <a href=\"#!/api/Ext.layout.container.Absolute-method-getTarget\" rel=\"Ext.layout.container.Absolute-method-getTarget\" class=\"docClass\">getTarget</a> element</li>\n</ul>\n\n"},"calculateContentSize":{"!type":"fn(ownerContext: ?, dimensions: ?) -> !this"},"isItemBoxParent":{"!type":"fn(itemContext: ?) -> !this"},"isItemLayoutRoot":{"!type":"fn(item: ?) -> !this"},"isItemShrinkWrap":{"!type":"fn(item: ?) -> !this"},"onContentChange":{"!type":"fn() -> bool","!doc":"<p>This method is called when a child item changes in some way. By default this calls\n<a href=\"#!/api/Ext.AbstractComponent-method-updateLayout\" rel=\"Ext.AbstractComponent-method-updateLayout\" class=\"docClass\">Ext.AbstractComponent.updateLayout</a> on this layout's owner.</p>\n"}}},"Accordion":{"!doc":"<p>This is a layout that manages multiple Panels in an expandable accordion style such that by default only\none Panel can be expanded at any given time (set <a href=\"#!/api/Ext.layout.container.Accordion-cfg-multi\" rel=\"Ext.layout.container.Accordion-cfg-multi\" class=\"docClass\">multi</a> config to have more open). Each Panel has\nbuilt-in support for expanding and collapsing.</p>\n\n<p>Note: Only Ext Panels and all subclasses of <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a> may be used in an accordion layout Container.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>', {\n    title: 'Accordion Layout',\n    width: 300,\n    height: 300,\n    defaults: {\n        // applied to each contained panel\n        bodyStyle: 'padding:15px'\n    },\n    layout: {\n        // layout-specific configs go here\n        type: 'accordion',\n        titleCollapse: false,\n        animate: true,\n        activeOnTop: true\n    },\n    items: [{\n        title: 'Panel 1',\n        html: 'Panel content!'\n    },{\n        title: 'Panel 2',\n        html: 'Panel content!'\n    },{\n        title: 'Panel 3',\n        html: 'Panel content!'\n    }],\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n","!type":"fn()","prototype":{"!proto":"Ext.layout.container.VBox.prototype","activeOnTop":{"!type":"bool","!doc":"<p>Only valid when <a href=\"#!/api/Ext.layout.container.Accordion-cfg-multi\" rel=\"Ext.layout.container.Accordion-cfg-multi\" class=\"docClass\">multi</a> is <code>false</code> and <a href=\"#!/api/Ext.layout.container.Accordion-cfg-animate\" rel=\"Ext.layout.container.Accordion-cfg-animate\" class=\"docClass\">animate</a> is <code>false</code>.</p>\n\n<p>True to swap the position of each panel as it is expanded so that it becomes the first item in the container,\nfalse to keep the panels in the rendered order.</p>\n"},"align":{"!type":"string","!doc":"<p>Controls how the child items of the container are aligned. Acceptable configuration values for this property are:</p>\n\n<ul>\n<li><strong>left</strong> : <strong>Default</strong> child items are aligned horizontally at the <strong>left</strong> side of the container.</li>\n<li><strong>center</strong> : child items are aligned horizontally at the <strong>mid-width</strong> of the container.</li>\n<li><strong>right</strong> : child items are aligned horizontally at the <strong>right</strong> of the container.</li>\n<li><strong>stretch</strong> : child items are stretched horizontally to fill the width of the container.</li>\n<li><strong>stretchmax</strong> : child items are stretched horizontally to the size of the largest item.</li>\n</ul>\n\n"},"animate":{"!type":"bool","!doc":"<p>True to slide the contained panels open and closed during expand/collapse using animation, false to open and\nclose directly with no animation. Note: The layout performs animated collapsing\nand expanding, <em>not</em> the child Panels.</p>\n"},"autoWidth":{"!type":"bool","!doc":"<p>Child Panels have their width actively managed to fit within the accordion's width.</p>\n"},"collapseFirst":{"!type":"bool","!doc":"<p>True to make sure the collapse/expand toggle button always renders first (to the left of) any other tools\nin the contained Panels' title bars, false to render it last. By default, this will use the\n<a href=\"#!/api/Ext.panel.Panel-cfg-collapseFirst\" rel=\"Ext.panel.Panel-cfg-collapseFirst\" class=\"docClass\">Ext.panel.Panel.collapseFirst</a> setting on the panel. If the config option is specified on the layout,\nit will override the panel value.</p>\n"},"fill":{"!type":"bool","!doc":"<p>True to adjust the active item's height to fill the available space in the container, false to use the\nitem's current height, or auto height if not explicitly set.</p>\n"},"hideCollapseTool":{"!type":"bool","!doc":"<p>True to hide the contained Panels' collapse/expand toggle buttons, false to display them.\nWhen set to true, <a href=\"#!/api/Ext.layout.container.Accordion-cfg-titleCollapse\" rel=\"Ext.layout.container.Accordion-cfg-titleCollapse\" class=\"docClass\">titleCollapse</a> is automatically set to true.</p>\n"},"itemCls":{"!type":"string","!doc":"<p>An optional extra CSS class that will be added to the container. This can be useful for\nadding customized styles to the container or any of its children using standard CSS\nrules. See <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>.<a href=\"#!/api/Ext.Component-cfg-componentCls\" rel=\"Ext.Component-cfg-componentCls\" class=\"docClass\">componentCls</a> also.</p>\n"},"multi":{"!type":"bool","!doc":"<p>Set to true to enable multiple accordion items to be open at once.</p>\n"},"titleCollapse":{"!type":"bool","!doc":"<p>True to allow expand/collapse of each contained panel by clicking anywhere on the title bar, false to allow\nexpand/collapse only when the toggle tool button is clicked.  When set to false,\n<a href=\"#!/api/Ext.layout.container.Accordion-cfg-hideCollapseTool\" rel=\"Ext.layout.container.Accordion-cfg-hideCollapseTool\" class=\"docClass\">hideCollapseTool</a> should be false also. An explicit <a href=\"#!/api/Ext.panel.Panel-cfg-titleCollapse\" rel=\"Ext.panel.Panel-cfg-titleCollapse\" class=\"docClass\">Ext.panel.Panel.titleCollapse</a> declared\non the panel will override this setting.</p>\n"},"defaultAnimatePolicy":{"!type":"?"},"targetCls":{"!type":"string"},"beforeRenderItems":{"!type":"fn(items: ?) -> !this"},"beginLayout":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>In addition to work done by our base classes, containers benefit from some extra\ncached data. The following properties are added to the ownerContext:</p>\n\n<ul>\n<li>visibleItems: the result of <a href=\"#!/api/Ext.layout.container.Accordion-method-getVisibleItems\" rel=\"Ext.layout.container.Accordion-method-getVisibleItems\" class=\"docClass\">getVisibleItems</a></li>\n<li>childItems: the ContextItem[] for each visible item</li>\n<li>targetContext: the ContextItem for the <a href=\"#!/api/Ext.layout.container.Accordion-method-getTarget\" rel=\"Ext.layout.container.Accordion-method-getTarget\" class=\"docClass\">getTarget</a> element</li>\n</ul>\n\n"},"configureItem":{"!type":"fn(item: ?) -> !this","!doc":"<p>Adds layout's itemCls and owning Container's itemCls</p>\n"},"getExpanded":{"!type":"fn(explicitCheck: ?) -> !this"},"getItemsRenderTree":{"!type":"fn(items: ?) -> !this","!doc":"<hr />\n"},"onComponentCollapse":{"!type":"fn(comp: ?) -> !this"},"onComponentExpand":{"!type":"fn(toExpand: ?) -> !this","!doc":"<p>When a Component expands, adjust the heights of the other Components to be just enough to accommodate\ntheir headers.\nThe expanded Component receives the only flex value, and so gets all remaining space.</p>\n"},"onComponentShow":{"!type":"fn(comp: ?) -> !this"},"renderItems":{"!type":"fn(items: ?, target: ?) -> !this","!doc":"<p>Iterates over all passed items, ensuring they are rendered.  If the items are already rendered,\nalso determines if the items are in the proper place in the dom.</p>\n"},"updatePanelClasses":{"!type":"fn(ownerContext: ?) -> !this"}}},"Anchor":{"!doc":"<p>This is a layout that enables anchoring of contained elements relative to the container's dimensions.\nIf the container is resized, all anchored items are automatically rerendered according to their\n<code><a href=\"#!/api/Ext.layout.container.Anchor-cfg-anchor\" rel=\"Ext.layout.container.Anchor-cfg-anchor\" class=\"docClass\">anchor</a></code> rules.</p>\n\n<p>This class is intended to be extended or created via the <a href=\"#!/api/Ext.container.AbstractContainer-cfg-layout\" rel=\"Ext.container.AbstractContainer-cfg-layout\" class=\"docClass\">layout</a>: 'anchor'\nconfig, and should generally not need to be created directly via the new keyword.</p>\n\n<p>AnchorLayout does not have any direct config options (other than inherited ones). By default,\nAnchorLayout will calculate anchor measurements based on the size of the container itself. However, the\ncontainer using the AnchorLayout can supply an anchoring-specific config property of <code>anchorSize</code>.</p>\n\n<p>If anchorSize is specifed, the layout will use it as a virtual container for the purposes of calculating\nanchor measurements based on it instead, allowing the container to be sized independently of the anchoring\nlogic if necessary.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.Panel</a>', {\n    width: 500,\n    height: 400,\n    title: \"AnchorLayout Panel\",\n    layout: 'anchor',\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    items: [\n        {\n            xtype: 'panel',\n            title: '75% Width and 20% Height',\n            anchor: '75% 20%'\n        },\n        {\n            xtype: 'panel',\n            title: 'Offset -300 Width &amp; -200 Height',\n            anchor: '-300 -200'     \n        },\n        {\n            xtype: 'panel',\n            title: 'Mixed Offset and Percent',\n            anchor: '-250 20%'\n        }\n    ]\n});\n</code></pre>\n","!type":"fn()","prototype":{"!proto":"Ext.layout.container.Auto.prototype","anchor":{"!type":"string","!doc":"<p>This configuation option is to be applied to <strong>child <code>items</code></strong> of a container managed by\nthis layout (ie. configured with <code>layout:'anchor'</code>).</p>\n\n<p>This value is what tells the layout how an item should be anchored to the container. <code>items</code>\nadded to an AnchorLayout accept an anchoring-specific config property of <strong>anchor</strong> which is a string\ncontaining two values: the horizontal anchor value and the vertical anchor value (for example, '100% 50%').\nThe following types of anchor values are supported:</p>\n\n<ul>\n<li><p><strong>Percentage</strong> : Any value between 1 and 100, expressed as a percentage.</p>\n\n<p>The first anchor is the percentage width that the item should take up within the container, and the\nsecond is the percentage height.  For example:</p>\n\n<pre><code>// two values specified\nanchor: '100% 50%' // render item complete width of the container and\n                   // 1/2 height of the container\n// one value specified\nanchor: '100%'     // the width value; the height will default to auto\n</code></pre></li>\n<li><p><strong>Offsets</strong> : Any positive or negative integer value.</p>\n\n<p>This is a raw adjustment where the first anchor is the offset from the right edge of the container,\nand the second is the offset from the bottom edge. For example:</p>\n\n<pre><code>// two values specified\nanchor: '-50 -100' // render item the complete width of the container\n                   // minus 50 pixels and\n                   // the complete height minus 100 pixels.\n// one value specified\nanchor: '-50'      // anchor value is assumed to be the right offset value\n                   // bottom offset will default to 0\n</code></pre></li>\n<li><p><strong>Sides</strong> : Valid values are <code>right</code> (or <code>r</code>) and <code>bottom</code> (or <code>b</code>).</p>\n\n<p>Either the container must have a fixed size or an anchorSize config value defined at render time in\norder for these to have any effect.</p></li>\n<li><p><strong>Mixed</strong> :</p>\n\n<p>Anchor values can also be mixed as needed.  For example, to render the width offset from the container\nright edge by 50 pixels and 75% of the container's height use:</p>\n\n<pre><code>anchor:   '-50 75%'\n</code></pre></li>\n</ul>\n\n"},"defaultAnchor":{"!type":"string","!doc":"<p>Default anchor for all child <strong>container</strong> items applied if no anchor or specific width is set on the child item.</p>\n"},"anchorFactory":{"!type":"?","!doc":"<p>private</p>\n"},"manageOverflow":{"!type":"bool","!doc":"<p>true to rerun the layout if scrollbars are needed.</p>\n"},"parseAnchorRE":{"!type":"+RegExp"},"sizePolicy":{"!type":"?"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"adjustHeightAnchor":{"!type":"fn(value: ?, childContext: ?) -> !this","!doc":"<p>private</p>\n"},"adjustWidthAnchor":{"!type":"fn(value: ?, childContext: ?) -> !this","!doc":"<p>private</p>\n"},"beginLayoutCycle":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called before any calculation cycles to reset DOM values and prepare for calculation.</p>\n\n<p>This is a write phase and DOM reads should be strictly avoided when overridding\nthis method.</p>\n"},"calculateItems":{"!type":"fn(ownerContext: ?, containerSize: ?) -> !this"},"configureItem":{"!type":"fn(item: ?) -> !this","!doc":"<p>Adds layout's itemCls and owning Container's itemCls</p>\n"},"getItemSizePolicy":{"!type":"fn(item: ?) -> +Ext.layout.SizePolicy","!doc":"<p>Returns an object describing how this layout manages the size of the given component.\nThis method must be implemented by any layout that manages components.</p>\n"},"parseAnchor":{"!type":"fn(a: ?, start: ?, cstart: ?) -> !this"},"sanityCheck":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p><debug></debug></p>\n"}}},"Auto":{"!doc":"<p>The AutoLayout is the default layout manager delegated by <a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a> to\nrender any child Components when no <code><a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">layout</a></code> is configured into\na <code><a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Container</a>.</code> AutoLayout provides only a passthrough of any layout calls\nto any child containers.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.Panel</a>', {\n    width: 500,\n    height: 280,\n    title: \"AutoLayout Panel\",\n    layout: 'auto',\n    renderTo: document.body,\n    items: [{\n        xtype: 'panel',\n        title: 'Top Inner Panel',\n        width: '75%',\n        height: 90\n    },\n    {\n        xtype: 'panel',\n        title: 'Bottom Inner Panel',\n        width: '75%',\n        height: 90\n    }]\n});\n</code></pre>\n","!type":"fn()","prototype":{"!proto":"Ext.layout.container.Container.prototype","reserveScrollbar":{"!type":"bool","!doc":"<p>Set to <code>true</code> to leave space for a vertical scrollbar (if the OS shows space-consuming scrollbars) regardless\nof whether a scrollbar is needed.</p>\n\n<p>This is useful if content height changes during application usage, but you do not want the calculated width\nof child items to change when a scrollbar appears or disappears. The scrollbar will appear in the reserved space,\nand the calculated width of child Components will not change.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Employee', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: [\n       {name: 'rating', type: 'int'},\n       {name: 'salary', type: 'float'},\n       {name: 'name'}\n    ]\n});\n\nfunction createFakeData(count) {\n    var firstNames   = ['Ed', 'Tommy', 'Aaron', 'Abe', 'Jamie', 'Adam', 'Dave', 'David', 'Jay', 'Nicolas', 'Nige'],\n        lastNames    = ['Spencer', 'Maintz', 'Conran', 'Elias', 'Avins', 'Mishcon', 'Kaneda', 'Davis', 'Robinson', 'Ferrero', 'White'],\n        ratings      = [1, 2, 3, 4, 5],\n        salaries     = [100, 400, 900, 1500, 1000000];\n\n    var data = [];\n    for (var i = 0; i &lt; (count || 25); i++) {\n        var ratingId    = Math.floor(Math.random() * ratings.length),\n            salaryId    = Math.floor(Math.random() * salaries.length),\n            firstNameId = Math.floor(Math.random() * firstNames.length),\n            lastNameId  = Math.floor(Math.random() * lastNames.length),\n\n            rating      = ratings[ratingId],\n            salary      = salaries[salaryId],\n            name        = <a href=\"#!/api/Ext.String-method-format\" rel=\"Ext.String-method-format\" class=\"docClass\">Ext.String.format</a>(\"{0} {1}\", firstNames[firstNameId], lastNames[lastNameId]);\n\n        data.push({\n            rating: rating,\n            salary: salary,\n            name: name\n        });\n    }\n    store.loadData(data);\n}\n\n// create the Data Store\nvar store = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    id: 'store',\n    model: 'Employee',\n    proxy: {\n        type: 'memory'\n    }\n});\ncreateFakeData(10);\n\nvar grid = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Ext.grid.Panel</a>', {\n    title: 'Grid loaded with varying number of records',\n    anchor: '100%',\n    store: store,\n    columns: [{\n        xtype: 'rownumberer',\n        width: 40,\n        sortable: false\n    },{\n        text: 'Name',\n        flex: 1,\n        sortable: true,\n        dataIndex: 'name'\n    },{\n        text: 'Rating',\n        width: 125,\n        sortable: true,\n        dataIndex: 'rating'\n    },{\n        text: 'Salary',\n        width: 125,\n        sortable: true,\n        dataIndex: 'salary',\n        align: 'right',\n        renderer: <a href=\"#!/api/Ext.util.Format-method-usMoney\" rel=\"Ext.util.Format-method-usMoney\" class=\"docClass\">Ext.util.Format.usMoney</a>\n    }]\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>', {\n    renderTo: document.body,\n    width: 800,\n    height: 600,\n    layout: {\n        type: 'anchor',\n        reserveScrollbar: true // There will be a gap even when there's no scrollbar\n    },\n    autoScroll: true,\n    items: grid,\n    tbar: {\n        defaults: {\n            handler: function(b) {\n                createFakeData(b.count);\n            }\n        },\n        items: [{\n             text: '10 Items',\n             count: 10\n        },{\n             text: '100 Items',\n             count: 100\n        },{\n             text: '300 Items',\n             count: 300\n        },{\n             text: '1000 Items',\n             count: 1000\n        },{\n             text: '5000 Items',\n             count: 5000\n        }]\n    }\n});\n</code></pre>\n"},"childEls":{"!type":"[?]"},"isShrinkWrapTpl":{"!type":"bool"},"lastOverflowAdjust":{"!type":"?","!doc":"<p>Begin with no previous adjustments</p>\n"},"manageOverflow":{"!type":"bool","!doc":"<p>true to rerun the layout if scrollbars are needed.</p>\n"},"managePadding":{"!type":"bool","!doc":"<p>indicates that this layout will correct cross browser padding differences when the\ncontainer has overflow.</p>\n\n<p>In some browsers the right and/or bottom padding of a container is lost when\nthe container has overflow.  If managePadding is true the layout will apply the\npadding to an inner wrapping element instead of the container element that has the\noverflow so that paddding will be included in the scrollable area.\nNote: padding will not be managed if it is configured on the container using\na style config or css class.  In order to be managed, padding must be added to the\ncontainer using the appropriate <a href=\"#!/api/Ext.AbstractComponent-property-contentPaddingProperty\" rel=\"Ext.AbstractComponent-property-contentPaddingProperty\" class=\"docClass\">contentPaddingProperty</a>.  For <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Panels</a> use\n<a href=\"#!/api/Ext.panel.AbstractPanel-cfg-bodyPadding\" rel=\"Ext.panel.AbstractPanel-cfg-bodyPadding\" class=\"docClass\">Ext.panel.AbstractPanel.bodyPadding</a>, and for\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Containers</a>, use\n<a href=\"#!/api/Ext.AbstractComponent-cfg-padding\" rel=\"Ext.AbstractComponent-cfg-padding\" class=\"docClass\">padding</a></p>\n"},"renderTpl":{"!type":"?","!doc":"<p>Auto layout's renderTpl wraps the content in an outerCt which is used to accomplish\nthe following 3 goals:</p>\n\n<ol>\n<li>When the container has a shrink wrapped width and/or height, the outerCt is used\nto measure the size of the content.</li>\n<li>When the container has overflow some browsers lose the container's right and/or\nbottom padding.  To fix this, the padding is rendered to the outerCt instead of\nthe container target element.  This ensures that the padding is included in the\ncontainer's scrollWidth/scrollHeight. In Old IE when a table is used, the padding\nis rendered to the innerCt td element.</li>\n<li>The outerCt contains the margins of its children, that is to say, it prevents\nthem from collapsing.</li>\n</ol>\n\n"},"tableTpl":{"!type":"?","!doc":"<p>This template is used for dynamically inserting a table outerCt/innerCt when needed.\nIt should be identical to the table template defined in renderTpl except that it\ndoes not have renderBody or clearEl.  It is an empty shell so that the contents\nof an already existing innerCt can be moved into it.</p>\n"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"beforeLayoutCycle":{"!type":"fn(ownerContext: ?) -> !this"},"beginLayout":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>In addition to work done by our base classes, containers benefit from some extra\ncached data. The following properties are added to the ownerContext:</p>\n\n<ul>\n<li>visibleItems: the result of <a href=\"#!/api/Ext.layout.container.Auto-method-getVisibleItems\" rel=\"Ext.layout.container.Auto-method-getVisibleItems\" class=\"docClass\">getVisibleItems</a></li>\n<li>childItems: the ContextItem[] for each visible item</li>\n<li>targetContext: the ContextItem for the <a href=\"#!/api/Ext.layout.container.Auto-method-getTarget\" rel=\"Ext.layout.container.Auto-method-getTarget\" class=\"docClass\">getTarget</a> element</li>\n</ul>\n\n"},"beginLayoutCycle":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called before any calculation cycles to reset DOM values and prepare for calculation.</p>\n\n<p>This is a write phase and DOM reads should be strictly avoided when overridding\nthis method.</p>\n"},"calculate":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called to perform the calculations for this layout. This method will be called at\nleast once and may be called repeatedly if the <a href=\"#!/api/Ext.layout.container.Auto-property-done\" rel=\"Ext.layout.container.Auto-property-done\" class=\"docClass\">done</a> property is cleared\nbefore return to indicate that this layout is not yet done. The <a href=\"#!/api/Ext.layout.container.Auto-property-done\" rel=\"Ext.layout.container.Auto-property-done\" class=\"docClass\">done</a> property\nis always set to <code>true</code> before entering this method.</p>\n\n<p>This is a read phase and DOM writes should be strictly avoided in derived classes.\nInstead, DOM writes need to be written to <a href=\"#!/api/Ext.layout.ContextItem\" rel=\"Ext.layout.ContextItem\" class=\"docClass\">Ext.layout.ContextItem</a> objects to\n be flushed at the next opportunity.</p>\n"},"calculateContentSize":{"!type":"fn(ownerContext: ?) -> !this"},"calculateOverflow":{"!type":"fn(ownerContext: +Ext.layout.ContextItem) -> !this","!doc":"<p>Handles overflow processing for a container.  In addition to the ownerContext\npassed to the <a href=\"#!/api/Ext.layout.container.Auto-method-calculate\" rel=\"Ext.layout.container.Auto-method-calculate\" class=\"docClass\">calculate</a> method, this method also needs the containerSize\n(the object returned by <a href=\"#!/api/Ext.layout.container.Auto-method-getContainerSize\" rel=\"Ext.layout.container.Auto-method-getContainerSize\" class=\"docClass\">getContainerSize</a>).</p>\n"},"completeLayout":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>This method (if implemented) is called at the end of the cycle in which this layout\ncompletes (by not setting <a href=\"#!/api/Ext.layout.container.Auto-property-done\" rel=\"Ext.layout.container.Auto-property-done\" class=\"docClass\">done</a> to <code>false</code> in <a href=\"#!/api/Ext.layout.container.Auto-method-calculate\" rel=\"Ext.layout.container.Auto-method-calculate\" class=\"docClass\">calculate</a>). It is\npossible for the layout to complete and yet become invalid before the end of the cycle,\nin which case, this method will not be called. It is also possible for this method to\nbe called and then later the layout becomes invalidated. This will result in\n<a href=\"#!/api/Ext.layout.container.Auto-method-calculate\" rel=\"Ext.layout.container.Auto-method-calculate\" class=\"docClass\">calculate</a> being called again, followed by another call to this method.</p>\n\n<p>This is a read phase and DOM writes should be strictly avoided in derived classes.\nInstead, DOM writes need to be written to <a href=\"#!/api/Ext.layout.ContextItem\" rel=\"Ext.layout.ContextItem\" class=\"docClass\">Ext.layout.ContextItem</a> objects to\nbe flushed at the next opportunity.</p>\n\n<p>This method need not be implemented by derived classes and, in fact, should only be\nimplemented when needed.</p>\n"},"doRenderPadding":{"!type":"fn(out: ?, renderData: ?) -> !this"},"finishedLayout":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>This method is called after all layouts are complete and their calculations flushed\nto the DOM. No further layouts will be run and this method is only called once per\nlayout run. The base component layout caches <code>lastComponentSize</code>.</p>\n\n<p>This is a write phase and DOM reads should be avoided if possible when overridding\nthis method.</p>\n\n<p>This method need not be implemented by derived classes and, in fact, should only be\nimplemented when needed.</p>\n"},"getContainerSize":{"!type":"fn(ownerContext: +Ext.layout.ContextItem, inDom?: bool) -> ?","!doc":"<p>Returns the container size (that of the target). Only the fixed-sized dimensions can\nbe returned because the shrinkWrap dimensions are based on the contentWidth/Height\nas determined by the container layout.</p>\n\n<p>If the <a href=\"#!/api/Ext.layout.container.Auto-method-calculateOverflow\" rel=\"Ext.layout.container.Auto-method-calculateOverflow\" class=\"docClass\">calculateOverflow</a> method is used and if <a href=\"#!/api/Ext.layout.container.Auto-property-manageOverflow\" rel=\"Ext.layout.container.Auto-property-manageOverflow\" class=\"docClass\">manageOverflow</a> is\ntrue, this will adjust the width/height by the size of scrollbars.</p>\n"},"getContentTarget":{"!type":"fn() -> !this"},"getElementTarget":{"!type":"fn() -> +Ext.Element","!doc":"<p>Overridden method from <a href=\"#!/api/Ext.layout.container.Container\" rel=\"Ext.layout.container.Container\" class=\"docClass\">Ext.layout.container.Container</a>.\nUsed by Container classes to insert special DOM elements which must exist in addition to the child components</p>\n"},"getOverflowXStyle":{"!type":"fn(ownerContext: +Ext.layout.ContextItem) -> string","!doc":"<p>Returns the overflow-x style of the render target.\nNote: If overflow is configured on a container using style or css class this method\nwill read the dom the first time it is called. It is therefore preferable for\nperformance reasons to use the autoScroll or overflowX config when horizontal\noverflow is desired.</p>\n"},"getOverflowYStyle":{"!type":"fn(ownerContext: +Ext.layout.ContextItem) -> string","!doc":"<p>Returns the overflow-y style of the render target.\nNote: If overflow is configured on a container using style or css class this method\nwill read the dom the first time it is called. It is therefore preferable for\nperformance reasons to use the autoScroll or overflowY config when vertical\noverflow is desired.</p>\n"},"getRenderData":{"!type":"fn() -> !this"},"getRenderTarget":{"!type":"fn() -> +Ext.Element","!doc":"<p>Overridden method from <a href=\"#!/api/Ext.layout.container.Container\" rel=\"Ext.layout.container.Container\" class=\"docClass\">Ext.layout.container.Container</a>.\nUsed in the beforeLayout method to render all items into.</p>\n"},"initContextItems":{"!type":"fn(ownerContext: ?) -> !this"},"initLayout":{"!type":"fn() -> !this","!doc":"<p>A one-time initialization method called just before rendering.</p>\n"},"insertTableCt":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>In some cases a table-based outerCt/innerCt is required in old IE (see renderTpl).\nMost of the time this is determined at render time, however its possible that\nwe made the wrong determination at render time and now that the layout is in\nprogress we need a table.  If so, this method should be called to replace the\nexisting outerCt with a new table outerCt, and move the child elements to the new\ninnerCt.</p>\n"},"measureContentHeight":{"!type":"fn(ownerContext: ?) -> !this"},"measureContentWidth":{"!type":"fn(ownerContext: ?) -> !this"},"setCtSizeIfNeeded":{"!type":"fn(ownerContext: +Ext.layout.ContextItem, containerSize: ?) -> !this","!doc":"<p>This method sets the height and/or width of the outerCt/innerCt to adjust for the\nfollowing browser-specific issues:</p>\n\n<ol>\n<li><p>In IE6 and 7 strict if we are using the shrink wrap template, and the outerCt\nhas a 100% width (because the container is not shrink wrapping width currently),\nand the target element has a vertical scrollbar, the browser disregards the\nscrollbar when sizing the width of the outerCt.  This can result in the target\nelement gaining a horizontal scrollbar.  We fix this issue by setting a pixel\nwidth on the outerCt</p></li>\n<li><p>In IE quirks when using the \"non shrink wrap\" template, a long non-breaking word\ncan cause the outerCt's width to expand beyond the width of its container. This\nbehavior is desired if the container has the potential for horizontal overflow,\nbut can cause text to be hidden if the container's overflow is hidden. To prevent\nthis from happening we give the outerCt a fixed width in IE quirks when the\ncontainer does not have horizontal overflow.</p></li>\n<li><p>In some browsers a percentage-height element ignores the horizontal scrollbar\nof its parent (see <a href=\"#!/api/Ext.supports-property-PercentageHeightOverflowBug\" rel=\"Ext.supports-property-PercentageHeightOverflowBug\" class=\"docClass\">Ext.supports.PercentageHeightOverflowBug</a>).  If the browser is\naffected by this bug the outerCt needs a pixel height in order to support\npercentage-height children when not shrink-wrapping height. If the browser is not\naffected by this bug, a height of 100% is assigned to the outerCt (see\nbeginLayoutCycle).</p></li>\n<li><p>In IE6/7 strict when using the \"shrink wrap\" template, percentage heights on\nchildren do not work unless the innerCt td has a height set.  We can't use height\n100% on the innerCt because conent-box sizing will cause any top/bottom padding to\nbe added to the height.  The solution is to set a pixel height on the innerCt.</p></li>\n<li><p>IE8 strict mode has a bug with percentage height children.  if the innerCt has\na height of 100%, has padding, and has a child item with a percentage height, that\nchild item will be sized as a percentage of the parent's height plus padding height.\nIn other words, a child with height:50% would have its height caclulated thusly:\n(parentHeight + parentPaddingHeight) * 0.5\nTo fix this, we have to give the innerCt a pixel height.</p></li>\n<li><p>In IE7 strict if we're using the \"non shrink wrap\" template, and the target\nelement has overflow-y:auto, the outerCt reserves space for the target element's\nvertical scrollbar even when there is no vertical scrollbar.  This is fixed by\nsetting the targetEl's overflow property to \"hidden\" and then back to \"auto\".</p></li>\n</ol>\n\n"},"setupRenderTpl":{"!type":"fn(renderTpl: ?) -> !this"}}},"Border":{"!doc":"<p>This is a multi-pane, application-oriented UI layout style that supports multiple nested panels, automatic bars\nbetween regions and built-in <a href=\"#!/api/Ext.panel.Panel-cfg-collapsible\" rel=\"Ext.panel.Panel-cfg-collapsible\" class=\"docClass\">expanding and collapsing</a> of regions.</p>\n\n<p>This class is intended to be extended or created via the <code>layout:'border'</code> <a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">Ext.container.Container.layout</a>\nconfig, and should generally not need to be created directly via the new keyword.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>', {\n    width: 500,\n    height: 300,\n    title: 'Border Layout',\n    layout: 'border',\n    items: [{\n        title: 'South Region is resizable',\n        region: 'south',     // position for region\n        xtype: 'panel',\n        height: 100,\n        split: true,         // enable resizing\n        margins: '0 5 5 5'\n    },{\n        // xtype: 'panel' implied by default\n        title: 'West Region is collapsible',\n        region:'west',\n        xtype: 'panel',\n        margins: '5 0 0 5',\n        width: 200,\n        collapsible: true,   // make collapsible\n        id: 'west-region-container',\n        layout: 'fit'\n    },{\n        title: 'Center Region',\n        region: 'center',     // center region is required, no width/height specified\n        xtype: 'panel',\n        layout: 'fit',\n        margins: '5 5 0 0'\n    }],\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n\n<h1>Notes</h1>\n\n<ul>\n<li><p>When using the split option, the layout will automatically insert a <a href=\"#!/api/Ext.resizer.Splitter\" rel=\"Ext.resizer.Splitter\" class=\"docClass\">Ext.resizer.Splitter</a>\ninto the appropriate place. This will modify the underlying\n<a href=\"#!/api/Ext.container.Container-property-items\" rel=\"Ext.container.Container-property-items\" class=\"docClass\">items</a> collection in the container.</p></li>\n<li><p>Any Container using the Border layout <strong>must</strong> have a child item with <code>region:'center'</code>.\nThe child item in the center region will always be resized to fill the remaining space\nnot used by the other regions in the layout.</p></li>\n<li><p>Any child items with a region of <code>west</code> or <code>east</code> may be configured with either an initial\n<code>width</code>, or a <a href=\"#!/api/Ext.layout.container.Box-cfg-flex\" rel=\"Ext.layout.container.Box-cfg-flex\" class=\"docClass\">Ext.layout.container.Box.flex</a> value, or an initial percentage width\n<strong>string</strong> (Which is simply divided by 100 and used as a flex value).\nThe 'center' region has a flex value of <code>1</code>.</p></li>\n<li><p>Any child items with a region of <code>north</code> or <code>south</code> may be configured with either an initial\n<code>height</code>, or a <a href=\"#!/api/Ext.layout.container.Box-cfg-flex\" rel=\"Ext.layout.container.Box-cfg-flex\" class=\"docClass\">Ext.layout.container.Box.flex</a> value, or an initial percentage height\n<strong>string</strong> (Which is simply divided by 100 and used as a flex value).\nThe 'center' region has a flex value of <code>1</code>.</p></li>\n<li><p><strong>There is no BorderLayout.Region class in ExtJS 4.0+</strong></p></li>\n</ul>\n\n","!type":"fn()","prototype":{"!proto":"Ext.layout.container.Container.prototype","itemCls":{"!type":"string","!doc":"<p>An optional extra CSS class that will be added to the container. This can be useful for\nadding customized styles to the container or any of its children using standard CSS\nrules. See <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>.<a href=\"#!/api/Ext.Component-cfg-componentCls\" rel=\"Ext.Component-cfg-componentCls\" class=\"docClass\">componentCls</a> also.</p>\n"},"padding":{"!type":"number|string|?","!doc":"<p>Sets the padding to be applied to all child items managed by this layout.</p>\n\n<p>This property can be specified as a string containing space-separated, numeric\npadding values. The order of the sides associated with each value matches the way\nCSS processes padding values:</p>\n\n<ul>\n<li>If there is only one value, it applies to all sides.</li>\n<li>If there are two values, the top and bottom borders are set to the first value\nand the right and left are set to the second.</li>\n<li>If there are three values, the top is set to the first value, the left and right\nare set to the second, and the bottom is set to the third.</li>\n<li>If there are four values, they apply to the top, right, bottom, and left,\nrespectively.</li>\n</ul>\n\n"},"regionWeights":{"!type":"?","!doc":"<p>The default weights to assign to regions in the border layout. These values are\nused when a region does not contain a <code>weight</code> property. This object must have\nproperties for all regions (\"north\", \"south\", \"east\" and \"west\").</p>\n\n<p><strong>IMPORTANT:</strong> Since this is an object, changing its properties will impact ALL\ninstances of Border layout. If this is not desired, provide a replacement object as\na config option instead:</p>\n\n<pre><code> layout: {\n     type: 'border',\n     regionWeights: {\n         west: 20,\n         north: 10,\n         south: -10,\n         east: -20\n     }\n }\n</code></pre>\n\n<p>The region with the highest weight is assigned space from the border before other\nregions. Regions of equal weight are assigned space based on their position in the\nowner's items list (first come, first served).</p>\n"},"split":{"!type":"bool","!doc":"<p>This configuration option is to be applied to the <strong>child <code>items</code></strong> managed by this layout.\nEach region with <code>split:true</code> will get a <a href=\"#!/api/Ext.resizer.BorderSplitter\" rel=\"Ext.resizer.BorderSplitter\" class=\"docClass\">Splitter</a> that\nallows for manual resizing of the container. Except for the <code>center</code> region.</p>\n"},"splitterResize":{"!type":"bool","!doc":"<p>This configuration option is to be applied to the <strong>child <code>items</code></strong> managed by this layout and\nis used in conjunction with <a href=\"#!/api/Ext.layout.container.Border-cfg-split\" rel=\"Ext.layout.container.Border-cfg-split\" class=\"docClass\">split</a>. By default, when specifying <a href=\"#!/api/Ext.layout.container.Border-cfg-split\" rel=\"Ext.layout.container.Border-cfg-split\" class=\"docClass\">split</a>, the region\ncan be dragged to be resized. Set this option to false to show the split bar but prevent resizing.</p>\n"},"axisProps":{"!type":"?","!doc":"<p>Reused meta-data objects that describe axis properties.</p>\n"},"centerRegion":{"!type":"?"},"horzMarginProp":{"!type":"string"},"isBorderLayout":{"!type":"bool"},"manageMargins":{"!type":"bool"},"padNotOnContainerProp":{"!type":"string"},"padOnContainerProp":{"!type":"string"},"panelCollapseAnimate":{"!type":"bool"},"panelCollapseMode":{"!type":"string"},"percentageRe":{"!type":"+RegExp"},"regionFlags":{"!type":"?","!doc":"<p>Flags and configs that get set of regions based on their <code>region</code> property.</p>\n"},"regionMeta":{"!type":"?","!doc":"<hr />\n\n<p> Misc</p>\n"},"sizePolicies":{"!type":"?"},"targetCls":{"!type":"string"},"touchedRegions":{"!type":"?","!doc":"<p>Lists the regions that would consider an interior region a neighbor. For example,\na north region would consider an east or west region its neighbords (as well as\nan inner north region).</p>\n"},"type":{"!type":"string"},"beginAxis":{"!type":"fn(ownerContext: ?, regions: ?, name: ?) -> !this","!doc":"<p>Creates the axis objects for the layout. These are only missing size information\nwhich is added during <a href=\"#!/api/Ext.layout.container.Border-method-calculate\" rel=\"Ext.layout.container.Border-method-calculate\" class=\"docClass\">calculate</a>.</p>\n"},"beginLayout":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>In addition to work done by our base classes, containers benefit from some extra\ncached data. The following properties are added to the ownerContext:</p>\n\n<ul>\n<li>visibleItems: the result of <a href=\"#!/api/Ext.layout.container.Border-method-getVisibleItems\" rel=\"Ext.layout.container.Border-method-getVisibleItems\" class=\"docClass\">getVisibleItems</a></li>\n<li>childItems: the ContextItem[] for each visible item</li>\n<li>targetContext: the ContextItem for the <a href=\"#!/api/Ext.layout.container.Border-method-getTarget\" rel=\"Ext.layout.container.Border-method-getTarget\" class=\"docClass\">getTarget</a> element</li>\n</ul>\n\n"},"calculate":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called to perform the calculations for this layout. This method will be called at\nleast once and may be called repeatedly if the <a href=\"#!/api/Ext.layout.container.Border-property-done\" rel=\"Ext.layout.container.Border-property-done\" class=\"docClass\">done</a> property is cleared\nbefore return to indicate that this layout is not yet done. The <a href=\"#!/api/Ext.layout.container.Border-property-done\" rel=\"Ext.layout.container.Border-property-done\" class=\"docClass\">done</a> property\nis always set to <code>true</code> before entering this method.</p>\n\n<p>This is a read phase and DOM writes should be strictly avoided in derived classes.\nInstead, DOM writes need to be written to <a href=\"#!/api/Ext.layout.ContextItem\" rel=\"Ext.layout.ContextItem\" class=\"docClass\">Ext.layout.ContextItem</a> objects to\n be flushed at the next opportunity.</p>\n"},"calculateChildAxis":{"!type":"fn(childContext: ?, axis: ?) -> !this","!doc":"<p>Performs the calculations for a region on a specified axis.</p>\n"},"finishAxis":{"!type":"fn(ownerContext: ?, axis: ?) -> !this","!doc":"<p>Finishes the calculations on an axis. This basically just assigns the remaining\nspace to the center region.</p>\n"},"finishPositions":{"!type":"fn(childItems: ?) -> !this","!doc":"<p>Finishes by setting the positions on the child items.</p>\n"},"getItemSizePolicy":{"!type":"fn(item: ?) -> +Ext.layout.SizePolicy","!doc":"<p>Returns an object describing how this layout manages the size of the given component.\nThis method must be implemented by any layout that manages components.</p>\n"},"getLayoutItems":{"!type":"fn() -> [+Ext.Component]","!doc":"<p>Returns an array of child components either for a render phase (Performed in the beforeLayout\nmethod of the layout's base class), or the layout phase (onLayout).</p>\n"},"getPlaceholder":{"!type":"fn(comp: ?) -> !this"},"getSplitterTarget":{"!type":"fn(splitter: ?) -> !this"},"insertSplitter":{"!type":"fn(item: ?, index: ?, hidden: ?, splitterCfg: ?) -> !this","!doc":"<p>Inserts the splitter for a given region. A reference to the splitter is also stored\non the component as \"splitter\".</p>\n"},"isItemBoxParent":{"!type":"fn(itemContext: ?) -> !this"},"isItemShrinkWrap":{"!type":"fn(item: ?) -> !this"},"onAdd":{"!type":"fn(item: ?, index: ?) -> !this","!doc":"<p>Called when a region (actually when any component) is added to the container. The\nregion is decorated with some helpful properties (isCenter, isHorz, isVert) and its\nsplitter is added if its \"split\" property is true.</p>\n"},"onDestroy":{"!type":"fn() -> !this"},"onRemove":{"!type":"fn(item: ?) -> !this"},"setupSplitterNeighbors":{"!type":"fn(items: ?) -> !this"}}},"Box":{"!doc":"<p>Base Class for HBoxLayout and VBoxLayout Classes. Generally it should not need to be used directly.</p>\n","!type":"fn(config: Ext_layout_container_Box_cfg)","prototype":{"!proto":"Ext.layout.container.Container.prototype","defaultMargins":{"!type":"?","!doc":"<p>If the individual contained items do not have a margins property specified or margin specified via CSS, the\ndefault margins from this property will be applied to each item.</p>\n\n<p>This property may be specified as an object containing margins to apply in the format:</p>\n\n<pre><code>{\n    top: (top margin),\n    right: (right margin),\n    bottom: (bottom margin),\n    left: (left margin)\n}\n</code></pre>\n\n<p>This property may also be specified as a string containing space-separated, numeric margin values. The order of\nthe sides associated with each value matches the way CSS processes margin values:</p>\n\n<ul>\n<li>If there is only one value, it applies to all sides.</li>\n<li>If there are two values, the top and bottom borders are set to the first value and the right and left are\nset to the second.</li>\n<li>If there are three values, the top is set to the first value, the left and right are set to the second,\nand the bottom is set to the third.</li>\n<li>If there are four values, they apply to the top, right, bottom, and left, respectively.</li>\n</ul>\n\n"},"flex":{"!type":"number","!doc":"<p>This configuration option is to be applied to <strong>child items</strong> of the container managed by this layout. Each child\nitem with a flex property will be flexed (horizontally in <code>hbox</code>, vertically in <code>vbox</code>) according to each item's\n<strong>relative</strong> flex value compared to the sum of all items with a flex value specified. Any child items that have\neither a <code>flex = 0</code> or <code>flex = undefined</code> will not be 'flexed' (the initial size will not be changed).</p>\n"},"itemCls":{"!type":"string","!doc":"<p>An optional extra CSS class that will be added to the container. This can be useful for\nadding customized styles to the container or any of its children using standard CSS\nrules. See <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>.<a href=\"#!/api/Ext.Component-cfg-componentCls\" rel=\"Ext.Component-cfg-componentCls\" class=\"docClass\">componentCls</a> also.</p>\n"},"pack":{"!type":"string","!doc":"<p>Controls how the child items of the container are packed together. Acceptable configuration values for this\nproperty are:</p>\n\n<ul>\n<li><strong>start</strong> - child items are packed together at <strong>left</strong> (HBox) or <strong>top</strong> (VBox) side of container (*default**)</li>\n<li><strong>center</strong> - child items are packed together at <strong>mid-width</strong> (HBox) or <strong>mid-height</strong> (VBox) of container</li>\n<li><strong>end</strong> - child items are packed together at <strong>right</strong> (HBox) or <strong>bottom</strong> (VBox) side of container</li>\n</ul>\n\n"},"padding":{"!type":"string","!doc":"<p>Sets the padding to be applied to all child items managed by this layout.</p>\n\n<p>This property must be specified as a string containing space-separated, numeric padding values. The order of the\nsides associated with each value matches the way CSS processes padding values:</p>\n\n<ul>\n<li>If there is only one value, it applies to all sides.</li>\n<li>If there are two values, the top and bottom borders are set to the first value and the right and left are\nset to the second.</li>\n<li>If there are three values, the top is set to the first value, the left and right are set to the second,\nand the bottom is set to the third.</li>\n<li>If there are four values, they apply to the top, right, bottom, and left, respectively.</li>\n</ul>\n\n"},"stretchMaxPartner":{"!type":"string|+Ext.Component","!doc":"<p>Allows stretchMax calculation to take into account the max perpendicular size (height for HBox layout and width\nfor VBox layout) of another Box layout when calculating its maximum perpendicular child size.</p>\n\n<p>If specified as a string, this may be either a known Container ID, or a ComponentQuery selector which is rooted\nat this layout's Container (ie, to find a sibling, use <code>\"^&gt;#siblingItemId</code>).</p>\n"},"_percentageRe":{"!type":"+RegExp","!doc":"<p>Matches: <code>&lt;spaces&gt;digits[.digits]&lt;spaces&gt;%&lt;spaces&gt;</code>\nCaptures: <code>digits[.digits]</code></p>\n"},"alignRoundingMethod":{"!type":"string"},"availableSpaceOffset":{"!type":"number","!doc":"<p>availableSpaceOffset is used to adjust the availableWidth, typically used\nto reserve space for a scrollbar</p>\n"},"calculateChildBox":{"!type":"?","!doc":"<p><debug></debug></p>\n"},"calculateChildBoxes":{"!type":"?"},"childEls":{"!type":"[?]"},"createsInnerCt":{"!type":"bool"},"innerCls":{"!type":"string"},"manageMargins":{"!type":"bool"},"renderTpl":{"!type":"[?]"},"reserveOffset":{"!type":"bool","!doc":"<p>whether or not to reserve the availableSpaceOffset in layout calculations</p>\n"},"scrollOffset":{"!type":"number"},"targetCls":{"!type":"string"},"targetElCls":{"!type":"string"},"type":{"!type":"string"},"updateChildBoxes":{"!type":"?"},"beginCollapse":{"!type":"fn(child: ?) -> !this","!doc":"<p>Called by an owning Panel before the Panel begins its collapse process.\nMost layouts will not need to override the default <a href=\"#!/api/Ext-property-emptyFn\" rel=\"Ext-property-emptyFn\" class=\"docClass\">Ext.emptyFn</a> implementation.</p>\n"},"beginExpand":{"!type":"fn(child: ?) -> !this","!doc":"<p>Called by an owning Panel before the Panel begins its expand process.\nMost layouts will not need to override the default <a href=\"#!/api/Ext-property-emptyFn\" rel=\"Ext-property-emptyFn\" class=\"docClass\">Ext.emptyFn</a> implementation.</p>\n"},"beginLayout":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>In addition to work done by our base classes, containers benefit from some extra\ncached data. The following properties are added to the ownerContext:</p>\n\n<ul>\n<li>visibleItems: the result of <a href=\"#!/api/Ext.layout.container.Box-method-getVisibleItems\" rel=\"Ext.layout.container.Box-method-getVisibleItems\" class=\"docClass\">getVisibleItems</a></li>\n<li>childItems: the ContextItem[] for each visible item</li>\n<li>targetContext: the ContextItem for the <a href=\"#!/api/Ext.layout.container.Box-method-getTarget\" rel=\"Ext.layout.container.Box-method-getTarget\" class=\"docClass\">getTarget</a> element</li>\n</ul>\n\n"},"beginLayoutCycle":{"!type":"fn(ownerContext: ?, firstCycle: ?) -> !this","!doc":"<p>Called before any calculation cycles to reset DOM values and prepare for calculation.</p>\n\n<p>This is a write phase and DOM reads should be strictly avoided when overridding\nthis method.</p>\n"},"cacheFlexes":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>This method is called to (re)cache our understanding of flexes. This happens during beginLayout and may need to\nbe called again if the flexes are changed during the layout (e.g., like ColumnLayout).</p>\n"},"calculate":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called to perform the calculations for this layout. This method will be called at\nleast once and may be called repeatedly if the <a href=\"#!/api/Ext.layout.container.Box-property-done\" rel=\"Ext.layout.container.Box-property-done\" class=\"docClass\">done</a> property is cleared\nbefore return to indicate that this layout is not yet done. The <a href=\"#!/api/Ext.layout.container.Box-property-done\" rel=\"Ext.layout.container.Box-property-done\" class=\"docClass\">done</a> property\nis always set to <code>true</code> before entering this method.</p>\n\n<p>This is a read phase and DOM writes should be strictly avoided in derived classes.\nInstead, DOM writes need to be written to <a href=\"#!/api/Ext.layout.ContextItem\" rel=\"Ext.layout.ContextItem\" class=\"docClass\">Ext.layout.ContextItem</a> objects to\n be flushed at the next opportunity.</p>\n"},"calculateParallel":{"!type":"fn(ownerContext: ?, names: ?, plan: ?) -> !this"},"calculatePerpendicular":{"!type":"fn(ownerContext: ?, names: ?, plan: ?) -> !this"},"calculateStretchMax":{"!type":"fn(ownerContext: ?, names: ?, plan: ?) -> !this"},"completeLayout":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>This method (if implemented) is called at the end of the cycle in which this layout\ncompletes (by not setting <a href=\"#!/api/Ext.layout.container.Box-property-done\" rel=\"Ext.layout.container.Box-property-done\" class=\"docClass\">done</a> to <code>false</code> in <a href=\"#!/api/Ext.layout.container.Box-method-calculate\" rel=\"Ext.layout.container.Box-method-calculate\" class=\"docClass\">calculate</a>). It is\npossible for the layout to complete and yet become invalid before the end of the cycle,\nin which case, this method will not be called. It is also possible for this method to\nbe called and then later the layout becomes invalidated. This will result in\n<a href=\"#!/api/Ext.layout.container.Box-method-calculate\" rel=\"Ext.layout.container.Box-method-calculate\" class=\"docClass\">calculate</a> being called again, followed by another call to this method.</p>\n\n<p>This is a read phase and DOM writes should be strictly avoided in derived classes.\nInstead, DOM writes need to be written to <a href=\"#!/api/Ext.layout.ContextItem\" rel=\"Ext.layout.ContextItem\" class=\"docClass\">Ext.layout.ContextItem</a> objects to\nbe flushed at the next opportunity.</p>\n\n<p>This method need not be implemented by derived classes and, in fact, should only be\nimplemented when needed.</p>\n"},"destroy":{"!type":"fn() -> !this"},"finishedLayout":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>This method is called after all layouts are complete and their calculations flushed\nto the DOM. No further layouts will be run and this method is only called once per\nlayout run. The base component layout caches <code>lastComponentSize</code>.</p>\n\n<p>This is a write phase and DOM reads should be avoided if possible when overridding\nthis method.</p>\n\n<p>This method need not be implemented by derived classes and, in fact, should only be\nimplemented when needed.</p>\n"},"flexSort":{"!type":"fn(a: ?, b: ?) -> !this"},"getElementTarget":{"!type":"fn() -> +Ext.Element","!doc":"<p>Overridden method from <a href=\"#!/api/Ext.layout.container.Container\" rel=\"Ext.layout.container.Container\" class=\"docClass\">Ext.layout.container.Container</a>.\nUsed by Container classes to insert special DOM elements which must exist in addition to the child components</p>\n"},"getItemSizePolicy":{"!type":"fn(item: ?, ownerSizeModel: ?) -> +Ext.layout.SizePolicy","!doc":"<p>Returns an object describing how this layout manages the size of the given component.\nThis method must be implemented by any layout that manages components.</p>\n"},"getRenderData":{"!type":"fn() -> !this"},"getRenderTarget":{"!type":"fn() -> +Ext.Element","!doc":"<p>Overridden method from <a href=\"#!/api/Ext.layout.container.Container\" rel=\"Ext.layout.container.Container\" class=\"docClass\">Ext.layout.container.Container</a>.\nUsed in the beforeLayout method to render all items into.</p>\n"},"initOverflowHandler":{"!type":"fn() -> !this"},"isItemBoxParent":{"!type":"fn(itemContext: ?) -> !this"},"isItemShrinkWrap":{"!type":"fn(item: ?) -> !this"},"onAfterConstrainInvalidateChild":{"!type":"fn(childContext: ?, options: ?) -> !this"},"onAfterStretchMaxInvalidateChild":{"!type":"fn(childContext: ?, options: ?) -> !this"},"onBeforeConstrainInvalidateChild":{"!type":"fn(childContext: ?, options: ?) -> !this"},"onBeforeStretchMaxInvalidateChild":{"!type":"fn(childContext: ?, options: ?) -> !this"},"onRemove":{"!type":"fn(comp: ?) -> !this"},"publishInnerCtSize":{"!type":"fn(ownerContext: ?, reservedSpace: ?) -> !this"},"roundFlex":{"!type":"fn(width: ?) -> !this"}}},"Card":{"!doc":"<p>This layout manages multiple child Components, each fitted to the Container, where only a single child Component can be\nvisible at any given time.  This layout style is most commonly used for wizards, tab implementations, etc.\nThis class is intended to be extended or created via the layout:'card' <a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">Ext.container.Container.layout</a> config,\nand should generally not need to be created directly via the new keyword.</p>\n\n<p>The CardLayout's focal method is <a href=\"#!/api/Ext.layout.container.Card-method-setActiveItem\" rel=\"Ext.layout.container.Card-method-setActiveItem\" class=\"docClass\">setActiveItem</a>.  Since only one panel is displayed at a time,\nthe only way to move from one Component to the next is by calling setActiveItem, passing the next panel to display\n(or its id or index).  The layout itself does not provide a user interface for handling this navigation,\nso that functionality must be provided by the developer.</p>\n\n<p>To change the active card of a container, call the setActiveItem method of its layout:</p>\n\n<pre class='inline-example '><code>var p = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>', {\n    layout: 'card',\n    items: [\n        { html: 'Card 1' },\n        { html: 'Card 2' }\n    ],\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n\np.getLayout().setActiveItem(1);\n</code></pre>\n\n<p>The <a href=\"#!/api/Ext.Component-event-beforedeactivate\" rel=\"Ext.Component-event-beforedeactivate\" class=\"docClass\">beforedeactivate</a> and <a href=\"#!/api/Ext.Component-event-beforeactivate\" rel=\"Ext.Component-event-beforeactivate\" class=\"docClass\">beforeactivate</a>\nevents can be used to prevent a card from activating or deactivating by returning <code>false</code>.</p>\n\n<pre class='inline-example '><code>var active = 0;\nvar main = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>', {\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    width: 200,\n    height: 200,\n    layout: 'card',\n    tbar: [{\n        text: 'Next',\n        handler: function(){\n            var layout = main.getLayout();\n            ++active;\n            layout.setActiveItem(active);\n            active = main.items.indexOf(layout.getActiveItem());\n        }\n    }],\n    items: [{\n        title: 'P1'\n    }, {\n        title: 'P2'\n    }, {\n        title: 'P3',\n        listeners: {\n            beforeactivate: function(){\n                return false;\n            }\n        }\n    }]\n});\n</code></pre>\n\n<p>In the following example, a simplistic wizard setup is demonstrated.  A button bar is added\nto the footer of the containing panel to provide navigation buttons.  The buttons will be handled by a\ncommon navigation routine.  Note that other uses of a CardLayout (like a tab control) would require a\ncompletely different implementation.  For serious implementations, a better approach would be to extend\nCardLayout to provide the custom functionality needed.</p>\n\n<pre class='inline-example '><code>var navigate = function(panel, direction){\n    // This routine could contain business logic required to manage the navigation steps.\n    // It would call setActiveItem as needed, manage navigation button state, handle any\n    // branching logic that might be required, handle alternate actions like cancellation\n    // or finalization, etc.  A complete wizard implementation could get pretty\n    // sophisticated depending on the complexity required, and should probably be\n    // done as a subclass of CardLayout in a real-world implementation.\n    var layout = panel.getLayout();\n    layout[direction]();\n    <a href=\"#!/api/Ext-method-getCmp\" rel=\"Ext-method-getCmp\" class=\"docClass\">Ext.getCmp</a>('move-prev').setDisabled(!layout.getPrev());\n    <a href=\"#!/api/Ext-method-getCmp\" rel=\"Ext-method-getCmp\" class=\"docClass\">Ext.getCmp</a>('move-next').setDisabled(!layout.getNext());\n};\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>', {\n    title: 'Example Wizard',\n    width: 300,\n    height: 200,\n    layout: 'card',\n    bodyStyle: 'padding:15px',\n    defaults: {\n        // applied to each contained panel\n        border: false\n    },\n    // just an example of one possible navigation scheme, using buttons\n    bbar: [\n        {\n            id: 'move-prev',\n            text: 'Back',\n            handler: function(btn) {\n                navigate(btn.up(\"panel\"), \"prev\");\n            },\n            disabled: true\n        },\n        '-&gt;', // greedy spacer so that the buttons are aligned to each side\n        {\n            id: 'move-next',\n            text: 'Next',\n            handler: function(btn) {\n                navigate(btn.up(\"panel\"), \"next\");\n            }\n        }\n    ],\n    // the panels (or \"cards\") within the layout\n    items: [{\n        id: 'card-0',\n        html: '&lt;h1&gt;Welcome to the Wizard!&lt;/h1&gt;&lt;p&gt;Step 1 of 3&lt;/p&gt;'\n    },{\n        id: 'card-1',\n        html: '&lt;p&gt;Step 2 of 3&lt;/p&gt;'\n    },{\n        id: 'card-2',\n        html: '&lt;h1&gt;Congratulations!&lt;/h1&gt;&lt;p&gt;Step 3 of 3 - Complete&lt;/p&gt;'\n    }],\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n","!type":"fn()","prototype":{"!proto":"Ext.layout.container.Fit.prototype","deferredRender":{"!type":"bool","!doc":"<p>True to render each contained item at the time it becomes active, false to render all contained items\nas soon as the layout is rendered (defaults to false).  If there is a significant amount of content or\na lot of heavy controls being rendered into panels that are not displayed by default, setting this to\ntrue might improve performance.</p>\n"},"hideInactive":{"!type":"bool"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"configureItem":{"!type":"fn(item: ?) -> !this","!doc":"<p>. Called before both dynamic render, and bulk render.\nEnsure that the active item starts visible, and inactive ones start invisible</p>\n"},"getActiveItem":{"!type":"fn() -> +Ext.Component","!doc":"<p>Return the active (visible) component in the layout.</p>\n"},"getAnimation":{"!type":"fn(newCard: ?, owner: ?) -> !this"},"getNext":{"!type":"fn() -> +Ext.Component","!doc":"<p>Return the active (visible) component in the layout to the next card</p>\n"},"getPrev":{"!type":"fn() -> +Ext.Component","!doc":"<p>Return the active (visible) component in the layout to the previous card</p>\n"},"getRenderTree":{"!type":"fn() -> !this"},"isValidParent":{"!type":"fn(item: ?, target: ?, position: ?) -> !this","!doc":"<p>Validates item is in the proper place in the dom.</p>\n"},"next":{"!type":"fn() -> +Ext.Component","!doc":"<p>Sets the active (visible) component in the layout to the next card</p>\n"},"onRemove":{"!type":"fn(component: ?) -> !this"},"parseActiveItem":{"!type":"fn(item: ?) -> !this"},"prev":{"!type":"fn() -> +Ext.Component","!doc":"<p>Sets the active (visible) component in the layout to the previous card</p>\n"},"renderChildren":{"!type":"fn() -> !this"},"setActiveItem":{"!type":"fn(newCard: +Ext.Component|number|string) -> +Ext.Component","!doc":"<p>Makes the given card active.</p>\n\n<pre><code>var card1 = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>', {itemId: 'card-1'});\nvar card2 = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>', {itemId: 'card-2'});\nvar panel = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>', {\n    layout: 'card',\n    activeItem: 0,\n    items: [card1, card2]\n});\n// These are all equivalent\npanel.getLayout().setActiveItem(card2);\npanel.getLayout().setActiveItem('card-2');\npanel.getLayout().setActiveItem(1);\n</code></pre>\n"}}},"CheckboxGroup":{"!doc":"<p>This layout implements the column arrangement for <a href=\"#!/api/Ext.form.CheckboxGroup\" rel=\"Ext.form.CheckboxGroup\" class=\"docClass\">Ext.form.CheckboxGroup</a> and <a href=\"#!/api/Ext.form.RadioGroup\" rel=\"Ext.form.RadioGroup\" class=\"docClass\">Ext.form.RadioGroup</a>.\nIt groups the component's sub-items into columns based on the component's\n<a href=\"#!/api/Ext.form.CheckboxGroup-cfg-columns\" rel=\"Ext.form.CheckboxGroup-cfg-columns\" class=\"docClass\">columns</a> and <a href=\"#!/api/Ext.form.CheckboxGroup-cfg-vertical\" rel=\"Ext.form.CheckboxGroup-cfg-vertical\" class=\"docClass\">Ext.form.CheckboxGroup.vertical</a> config properties.</p>\n","!type":"fn()","prototype":{"!proto":"Ext.layout.container.Container.prototype","autoFlex":{"!type":"bool","!doc":"<p>By default,  CheckboxGroup allocates all available space to the configured columns meaning that\ncolumn are evenly spaced across the container.</p>\n\n<p>To have each column only be wide enough to fit the container Checkboxes (or Radios), set <code>autoFlex</code> to <code>false</code></p>\n"},"childEls":{"!type":"[?]"},"createsInnerCt":{"!type":"bool"},"lastOwnerItemsGeneration":{"!type":"?"},"renderTpl":{"!type":"?"},"type":{"!type":"string"},"addMissingColumns":{"!type":"fn(itemsCount: ?) -> !this"},"beginLayout":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>In addition to work done by our base classes, containers benefit from some extra\ncached data. The following properties are added to the ownerContext:</p>\n\n<ul>\n<li>visibleItems: the result of <a href=\"#!/api/Ext.layout.container.CheckboxGroup-method-getVisibleItems\" rel=\"Ext.layout.container.CheckboxGroup-method-getVisibleItems\" class=\"docClass\">getVisibleItems</a></li>\n<li>childItems: the ContextItem[] for each visible item</li>\n<li>targetContext: the ContextItem for the <a href=\"#!/api/Ext.layout.container.CheckboxGroup-method-getTarget\" rel=\"Ext.layout.container.CheckboxGroup-method-getTarget\" class=\"docClass\">getTarget</a> element</li>\n</ul>\n\n"},"cacheElements":{"!type":"fn() -> !this"},"calculate":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Just wait for the child items to all lay themselves out in the width we are configured\nto make available to them. Then we can measure our height.</p>\n"},"doRenderColumn":{"!type":"fn(out: ?, renderData: ?, columnIndex: ?) -> !this"},"getColumnCount":{"!type":"fn() -> !this","!doc":"<p>Returns the number of columns in the checkbox group.</p>\n"},"getItemSizePolicy":{"!type":"fn(item: ?) -> +Ext.layout.SizePolicy","!doc":"<p>Returns an object describing how this layout manages the size of the given component.\nThis method must be implemented by any layout that manages components.</p>\n"},"getNodeAt":{"!type":"fn(rowIndex: ?, columnIndex: ?) -> !this"},"getRenderColumnIndex":{"!type":"fn(itemIndex: ?, rowCount: ?, columnCount: ?) -> !this"},"getRenderData":{"!type":"fn() -> !this"},"getRenderRowIndex":{"!type":"fn(itemIndex: ?, rowCount: ?, columnCount: ?) -> !this"},"initLayout":{"!type":"fn() -> !this","!doc":"<p>A one-time initialization method called just before rendering.</p>\n"},"isItemAtPosition":{"!type":"fn(item: ?, rowIndex: ?, columnIndex: ?) -> !this"},"isValidParent":{"!type":"fn() -> !this","!doc":"<p>Always valid. beginLayout ensures the encapsulating elements of all children are in the correct place</p>\n"},"moveItem":{"!type":"fn(item: +Ext.Component, rowIndex: number, columnIndex: number) -> !this","!doc":"<p>Moves the given already rendered Component to the specified row and column</p>\n"},"removeExceedingColumns":{"!type":"fn(itemsCount: ?) -> !this"},"renderChildren":{"!type":"fn() -> !this"},"renderItem":{"!type":"fn(item: +Ext.Component, rowIndex: number, columnIndex: number) -> !this","!doc":"<p>Renders the given Component into the specified row and column</p>\n"},"renderItems":{"!type":"fn(items: ?) -> !this","!doc":"<p>Iterates over all passed items, ensuring they are rendered.  If the items are already rendered,\nalso determines if the items are in the proper place in the dom.</p>\n"},"setupRenderTpl":{"!type":"fn(renderTpl: ?) -> !this"}}},"Column":{"!doc":"<p>This is the layout style of choice for creating structural layouts in a multi-column format where the width of each\ncolumn can be specified as a percentage or fixed width, but the height is allowed to vary based on the content. This\nclass is intended to be extended or created via the layout:'column' <a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">Ext.container.Container.layout</a> config,\nand should generally not need to be created directly via the new keyword.</p>\n\n<p>ColumnLayout does not have any direct config options (other than inherited ones), but it does support a specific\nconfig property of <code>columnWidth</code> that can be included in the config of any panel added to it. The layout will use\nthe columnWidth (if present) or width of each panel during layout to determine how to size each panel. If width or\ncolumnWidth is not specified for a given panel, its width will default to the panel's width (or auto).</p>\n\n<p>The width property is always evaluated as pixels, and must be a number greater than or equal to 1. The columnWidth\nproperty is always evaluated as a percentage, and must be a decimal value greater than 0 and less than 1 (e.g., .25).</p>\n\n<p>The basic rules for specifying column widths are pretty simple. The logic makes two passes through the set of\ncontained panels. During the first layout pass, all panels that either have a fixed width or none specified (auto)\nare skipped, but their widths are subtracted from the overall container width.</p>\n\n<p>During the second pass, all panels with columnWidths are assigned pixel widths in proportion to their percentages\nbased on the total <strong>remaining</strong> container width. In other words, percentage width panels are designed to fill\nthe space left over by all the fixed-width and/or auto-width panels. Because of this, while you can specify any\nnumber of columns with different percentages, the columnWidths must always add up to 1 (or 100%) when added\ntogether, otherwise your layout may not render as expected.</p>\n\n<pre class='inline-example '><code>// All columns are percentages -- they must add up to 1\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>', {\n    title: 'Column Layout - Percentage Only',\n    width: 350,\n    height: 250,\n    layout:'column',\n    items: [{\n        title: 'Column 1',\n        columnWidth: 0.25\n    },{\n        title: 'Column 2',\n        columnWidth: 0.55\n    },{\n        title: 'Column 3',\n        columnWidth: 0.20\n    }],\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n\n// Mix of width and columnWidth -- all columnWidth values must add up\n// to 1. The first column will take up exactly 120px, and the last two\n// columns will fill the remaining container width.\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.Panel</a>', {\n    title: 'Column Layout - Mixed',\n    width: 350,\n    height: 250,\n    layout:'column',\n    items: [{\n        title: 'Column 1',\n        width: 120\n    },{\n        title: 'Column 2',\n        columnWidth: 0.7\n    },{\n        title: 'Column 3',\n        columnWidth: 0.3\n    }],\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n","!type":"fn()","prototype":{"!proto":"Ext.layout.container.Auto.prototype","itemCls":{"!type":"string","!doc":"<p>An optional extra CSS class that will be added to the container. This can be useful for\nadding customized styles to the container or any of its children using standard CSS\nrules. See <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>.<a href=\"#!/api/Ext.Component-cfg-componentCls\" rel=\"Ext.Component-cfg-componentCls\" class=\"docClass\">componentCls</a> also.</p>\n"},"columnWidthSizePolicy":{"!type":"?","!doc":"<p>Columns with a columnWidth have their width managed.</p>\n"},"createsInnerCt":{"!type":"bool"},"manageOverflow":{"!type":"bool","!doc":"<p>true to rerun the layout if scrollbars are needed.</p>\n"},"targetCls":{"!type":"string"},"type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"calculateItems":{"!type":"fn(ownerContext: ?, containerSize: ?) -> !this"},"getItemSizePolicy":{"!type":"fn(item: ?, ownerSizeModel: ?) -> +Ext.layout.SizePolicy","!doc":"<p>Returns an object describing how this layout manages the size of the given component.\nThis method must be implemented by any layout that manages components.</p>\n"},"isItemShrinkWrap":{"!type":"fn(ownerContext: ?) -> !this"},"setCtSizeIfNeeded":{"!type":"fn(ownerContext: ?, containerSize: ?) -> !this","!doc":"<p>This method sets the height and/or width of the outerCt/innerCt to adjust for the\nfollowing browser-specific issues:</p>\n\n<ol>\n<li><p>In IE6 and 7 strict if we are using the shrink wrap template, and the outerCt\nhas a 100% width (because the container is not shrink wrapping width currently),\nand the target element has a vertical scrollbar, the browser disregards the\nscrollbar when sizing the width of the outerCt.  This can result in the target\nelement gaining a horizontal scrollbar.  We fix this issue by setting a pixel\nwidth on the outerCt</p></li>\n<li><p>In IE quirks when using the \"non shrink wrap\" template, a long non-breaking word\ncan cause the outerCt's width to expand beyond the width of its container. This\nbehavior is desired if the container has the potential for horizontal overflow,\nbut can cause text to be hidden if the container's overflow is hidden. To prevent\nthis from happening we give the outerCt a fixed width in IE quirks when the\ncontainer does not have horizontal overflow.</p></li>\n<li><p>In some browsers a percentage-height element ignores the horizontal scrollbar\nof its parent (see <a href=\"#!/api/Ext.supports-property-PercentageHeightOverflowBug\" rel=\"Ext.supports-property-PercentageHeightOverflowBug\" class=\"docClass\">Ext.supports.PercentageHeightOverflowBug</a>).  If the browser is\naffected by this bug the outerCt needs a pixel height in order to support\npercentage-height children when not shrink-wrapping height. If the browser is not\naffected by this bug, a height of 100% is assigned to the outerCt (see\nbeginLayoutCycle).</p></li>\n<li><p>In IE6/7 strict when using the \"shrink wrap\" template, percentage heights on\nchildren do not work unless the innerCt td has a height set.  We can't use height\n100% on the innerCt because conent-box sizing will cause any top/bottom padding to\nbe added to the height.  The solution is to set a pixel height on the innerCt.</p></li>\n<li><p>IE8 strict mode has a bug with percentage height children.  if the innerCt has\na height of 100%, has padding, and has a child item with a percentage height, that\nchild item will be sized as a percentage of the parent's height plus padding height.\nIn other words, a child with height:50% would have its height caclulated thusly:\n(parentHeight + parentPaddingHeight) * 0.5\nTo fix this, we have to give the innerCt a pixel height.</p></li>\n<li><p>In IE7 strict if we're using the \"non shrink wrap\" template, and the target\nelement has overflow-y:auto, the outerCt reserves space for the target element's\nvertical scrollbar even when there is no vertical scrollbar.  This is fixed by\nsetting the targetEl's overflow property to \"hidden\" and then back to \"auto\".</p></li>\n</ol>\n\n"}}},"Container":{"!doc":"<p>This class is intended to be extended or created via the <a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">layout</a>\nconfiguration property.  See <a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">Ext.container.Container.layout</a> for additional details.</p>\n","!type":"fn()","prototype":{"!proto":"Ext.layout.Layout.prototype","itemCls":{"!type":"string","!doc":"<p>An optional extra CSS class that will be added to the container. This can be useful for\nadding customized styles to the container or any of its children using standard CSS\nrules. See <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>.<a href=\"#!/api/Ext.Component-cfg-componentCls\" rel=\"Ext.Component-cfg-componentCls\" class=\"docClass\">componentCls</a> also.</p>\n"},"animatePolicy":{"!type":"?","!doc":"<p>An object which contains boolean properties specifying which properties are to be\nanimated upon flush of child Component ContextItems. For example, Accordion would\nhave:</p>\n\n<pre><code> {\n     y: true,\n     height: true\n }\n</code></pre>\n"},"childEls":{"!type":"[?]"},"overflowPadderEl":{"!type":"+Ext.Element","!doc":"<p>The element used to correct body padding during overflow.</p>\n"},"renderTpl":{"!type":"[?]"},"type":{"!type":"string"},"usesContainerHeight":{"!type":"bool"},"usesContainerWidth":{"!type":"bool"},"usesHeight":{"!type":"bool"},"usesWidth":{"!type":"bool"},"beginCollapse":{"!type":"fn() -> !this","!doc":"<p>Called by an owning Panel before the Panel begins its collapse process.\nMost layouts will not need to override the default <a href=\"#!/api/Ext-property-emptyFn\" rel=\"Ext-property-emptyFn\" class=\"docClass\">Ext.emptyFn</a> implementation.</p>\n"},"beginExpand":{"!type":"fn() -> !this","!doc":"<p>Called by an owning Panel before the Panel begins its expand process.\nMost layouts will not need to override the default <a href=\"#!/api/Ext-property-emptyFn\" rel=\"Ext-property-emptyFn\" class=\"docClass\">Ext.emptyFn</a> implementation.</p>\n"},"beginLayout":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>In addition to work done by our base classes, containers benefit from some extra\ncached data. The following properties are added to the ownerContext:</p>\n\n<ul>\n<li>visibleItems: the result of <a href=\"#!/api/Ext.layout.container.Container-method-getVisibleItems\" rel=\"Ext.layout.container.Container-method-getVisibleItems\" class=\"docClass\">getVisibleItems</a></li>\n<li>childItems: the ContextItem[] for each visible item</li>\n<li>targetContext: the ContextItem for the <a href=\"#!/api/Ext.layout.container.Container-method-getTarget\" rel=\"Ext.layout.container.Container-method-getTarget\" class=\"docClass\">getTarget</a> element</li>\n</ul>\n\n"},"beginLayoutCycle":{"!type":"fn(ownerContext: ?, firstCycle: ?) -> !this","!doc":"<p>Called before any calculation cycles to reset DOM values and prepare for calculation.</p>\n\n<p>This is a write phase and DOM reads should be strictly avoided when overridding\nthis method.</p>\n"},"cacheChildItems":{"!type":"fn(ownerContext: ?) -> !this"},"cacheElements":{"!type":"fn() -> !this"},"configureItem":{"!type":"fn(item: ?) -> !this","!doc":"<p>Adds layout's itemCls and owning Container's itemCls</p>\n"},"destroy":{"!type":"fn() -> !this"},"doRenderBody":{"!type":"fn(out: ?, renderData: ?) -> !this"},"doRenderContainer":{"!type":"fn(out: ?, renderData: ?) -> !this"},"doRenderItems":{"!type":"fn(out: ?, renderData: ?) -> !this"},"finishRender":{"!type":"fn() -> !this"},"getContainerSize":{"!type":"fn(ownerContext: +Ext.layout.ContextItem, inDom?: bool) -> ?","!doc":"<p>Returns the container size (that of the target). Only the fixed-sized dimensions can\nbe returned because the shrinkWrap dimensions are based on the contentWidth/Height\nas determined by the container layout.</p>\n"},"getContentTarget":{"!type":"fn() -> !this"},"getElementTarget":{"!type":"fn() -> +Ext.Element","!doc":"<p>Returns the element into which extra functional DOM elements can be inserted. Defaults to the owner Component's encapsulating element.</p>\n\n<p>May be overridden in Component layout managers which implement a <a href=\"#!/api/Ext.layout.container.Container-method-getRenderTarget\" rel=\"Ext.layout.container.Container-method-getRenderTarget\" class=\"docClass\">component render target</a> which must only\ncontain child components.</p>\n"},"getLayoutItems":{"!type":"fn() -> [+Ext.Component]","!doc":"<p>Returns an array of child components either for a render phase (Performed in the beforeLayout\nmethod of the layout's base class), or the layout phase (onLayout).</p>\n"},"getPositionOffset":{"!type":"fn(position: ?) -> !this","!doc":"<p>This method is used to offset the DOM position when checking\nwhether the element is a certain child of the target. This is\nrequired in cases where the extra elements prepended to the target\nbefore any of the items. An example of this is when using labelAlign: 'top'\non a field. The label appears first in the DOM before any child items are\ncreated, so when we check the position we need to add an extra offset.\nContainers that create an innerCt are exempt because this new element\npreserves the order</p>\n"},"getRenderData":{"!type":"fn() -> !this"},"getRenderTarget":{"!type":"fn() -> +Ext.Element","!doc":"<p>Returns the element into which rendering must take place. Defaults to the owner Container's\ntarget element.</p>\n\n<p>May be overridden in layout managers which implement an inner element.</p>\n"},"getRenderTpl":{"!type":"fn() -> !this"},"getRenderTree":{"!type":"fn() -> !this"},"getRenderedItems":{"!type":"fn() -> [?]","!doc":"<p>Returns all items that are rendered</p>\n"},"getScrollbarsNeeded":{"!type":"fn(width: ?, height: ?, contentWidth: ?, contentHeight: ?) -> !this"},"getTarget":{"!type":"fn() -> +Ext.Element","!doc":"<p>Returns the owner component's resize element.</p>\n"},"getVisibleItems":{"!type":"fn() -> [?]","!doc":"<p>Returns all items that are both rendered and visible</p>\n"},"notifyOwner":{"!type":"fn() -> !this","!doc":"<p>Called for every layout in the layout context after all the layouts have been finally flushed</p>\n"},"renderChildren":{"!type":"fn() -> !this"},"setupRenderTpl":{"!type":"fn(renderTpl: ?) -> !this"}}},"Editor":{"!doc":"<p>Component layout for editors</p>\n","!type":"fn()","prototype":{"!proto":"Ext.layout.container.Container.prototype","autoSizeDefault":{"!type":"?","!doc":"<p>End Definitions</p>\n"},"sizePolicies":{"!type":"?"},"calculate":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called to perform the calculations for this layout. This method will be called at\nleast once and may be called repeatedly if the <a href=\"#!/api/Ext.layout.container.Editor-property-done\" rel=\"Ext.layout.container.Editor-property-done\" class=\"docClass\">done</a> property is cleared\nbefore return to indicate that this layout is not yet done. The <a href=\"#!/api/Ext.layout.container.Editor-property-done\" rel=\"Ext.layout.container.Editor-property-done\" class=\"docClass\">done</a> property\nis always set to <code>true</code> before entering this method.</p>\n\n<p>This is a read phase and DOM writes should be strictly avoided in derived classes.\nInstead, DOM writes need to be written to <a href=\"#!/api/Ext.layout.ContextItem\" rel=\"Ext.layout.ContextItem\" class=\"docClass\">Ext.layout.ContextItem</a> objects to\n be flushed at the next opportunity.</p>\n"},"getDimension":{"!type":"fn(owner: ?, type: ?, getMethod: ?, ownerSize: ?) -> !this"},"getItemSizePolicy":{"!type":"fn(item: ?) -> +Ext.layout.SizePolicy","!doc":"<p>Returns an object describing how this layout manages the size of the given component.\nThis method must be implemented by any layout that manages components.</p>\n"}}},"Fit":{"!doc":"<p>This is a base class for layouts that contain a single item that automatically expands to fill the layout's\ncontainer. This class is intended to be extended or created via the layout:'fit'\n<a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">Ext.container.Container.layout</a> config, and should generally not need to be created directly via the new keyword.</p>\n\n<p>Fit layout does not have any direct config options (other than inherited ones). To fit a panel to a container using\nFit layout, simply set <code>layout: 'fit'</code> on the container and add a single panel to it.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>', {\n    title: 'Fit Layout',\n    width: 300,\n    height: 150,\n    layout:'fit',\n    items: {\n        title: 'Inner Panel',\n        html: 'This is the inner panel content',\n        bodyPadding: 20,\n        border: false\n    },\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n\n<p>If the container has multiple items, all of the items will all be equally sized. This is usually not\ndesired, so to avoid this, place only a <strong>single</strong> item in the container. This sizing of all items\ncan be used to provide a background <a href=\"#!/api/Ext.Img\" rel=\"Ext.Img\" class=\"docClass\">image</a> that is \"behind\" another item\nsuch as a <a href=\"#!/api/Ext.view.View\" rel=\"Ext.view.View\" class=\"docClass\">dataview</a> if you also absolutely position the items.</p>\n","!type":"fn()","prototype":{"!proto":"Ext.layout.container.Container.prototype","defaultMargins":{"!type":"?","!doc":"<p>If the individual contained items do not have a margins property specified or margin specified via CSS, the\ndefault margins from this property will be applied to each item.</p>\n\n<p>This property may be specified as an object containing margins to apply in the format:</p>\n\n<pre><code>{\n    top: (top margin),\n    right: (right margin),\n    bottom: (bottom margin),\n    left: (left margin)\n}\n</code></pre>\n\n<p>This property may also be specified as a string containing space-separated, numeric margin values. The order of\nthe sides associated with each value matches the way CSS processes margin values:</p>\n\n<ul>\n<li>If there is only one value, it applies to all sides.</li>\n<li>If there are two values, the top and bottom borders are set to the first value and the right and left are\nset to the second.</li>\n<li>If there are three values, the top is set to the first value, the left and right are set to the second,\nand the bottom is set to the third.</li>\n<li>If there are four values, they apply to the top, right, bottom, and left, respectively.</li>\n</ul>\n\n"},"itemCls":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"manageMargins":{"!type":"bool"},"sizePolicies":{"!type":"?"},"targetCls":{"!type":"string"},"type":{"!type":"string"},"beginLayoutCycle":{"!type":"fn(ownerContext: ?, firstCycle: ?) -> !this","!doc":"<p>Called before any calculation cycles to reset DOM values and prepare for calculation.</p>\n\n<p>This is a write phase and DOM reads should be strictly avoided when overridding\nthis method.</p>\n"},"calculate":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called to perform the calculations for this layout. This method will be called at\nleast once and may be called repeatedly if the <a href=\"#!/api/Ext.layout.container.Fit-property-done\" rel=\"Ext.layout.container.Fit-property-done\" class=\"docClass\">done</a> property is cleared\nbefore return to indicate that this layout is not yet done. The <a href=\"#!/api/Ext.layout.container.Fit-property-done\" rel=\"Ext.layout.container.Fit-property-done\" class=\"docClass\">done</a> property\nis always set to <code>true</code> before entering this method.</p>\n\n<p>This is a read phase and DOM writes should be strictly avoided in derived classes.\nInstead, DOM writes need to be written to <a href=\"#!/api/Ext.layout.ContextItem\" rel=\"Ext.layout.ContextItem\" class=\"docClass\">Ext.layout.ContextItem</a> objects to\n be flushed at the next opportunity.</p>\n"},"fitItem":{"!type":"fn(itemContext: ?, info: ?) -> !this"},"fitItemHeight":{"!type":"fn(itemContext: ?, info: ?) -> !this"},"fitItemWidth":{"!type":"fn(itemContext: ?, info: ?) -> !this"},"getItemSizePolicy":{"!type":"fn(item: ?, ownerSizeModel: ?) -> +Ext.layout.SizePolicy","!doc":"<p>Returns an object describing how this layout manages the size of the given component.\nThis method must be implemented by any layout that manages components.</p>\n"},"positionItemX":{"!type":"fn(itemContext: ?, info: ?) -> !this"},"positionItemY":{"!type":"fn(itemContext: ?, info: ?) -> !this"},"setItemHeight":{"!type":"fn(itemContext: ?, info: ?) -> !this"},"setItemWidth":{"!type":"fn(itemContext: ?, info: ?) -> !this"}}},"Form":{"!doc":"<p>This is a layout that will render form Fields, one under the other all stretched to the Container width.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.Panel</a>', {\n    width: 500,\n    height: 300,\n    title: \"FormLayout Panel\",\n    layout: 'form',\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    bodyPadding: 5,\n    defaultType: 'textfield',\n    items: [{\n       fieldLabel: 'First Name',\n        name: 'first',\n        allowBlank:false\n    },{\n        fieldLabel: 'Last Name',\n        name: 'last'\n    },{\n        fieldLabel: 'Company',\n        name: 'company'\n    }, {\n        fieldLabel: 'Email',\n        name: 'email',\n        vtype:'email'\n    }, {\n        fieldLabel: 'DOB',\n        name: 'dob',\n        xtype: 'datefield'\n    }, {\n        fieldLabel: 'Age',\n        name: 'age',\n        xtype: 'numberfield',\n        minValue: 0,\n        maxValue: 100\n    }, {\n        xtype: 'timefield',\n        fieldLabel: 'Time',\n        name: 'time',\n        minValue: '8:00am',\n        maxValue: '6:00pm'\n    }]\n});\n</code></pre>\n\n<p>Note that any configured <a href=\"#!/api/Ext.Component-cfg-padding\" rel=\"Ext.Component-cfg-padding\" class=\"docClass\">padding</a> will be ignored on items within a Form layout.</p>\n","!type":"fn()","prototype":{"!proto":"Ext.layout.container.Container.prototype","childEls":{"!type":"[?]"},"createsInnerCt":{"!type":"bool"},"getScrollRangeFlags":{"!type":"?","!doc":"<p>Returns flags indicating cross-browser handling of scrollHeight/Width. In particular,\nIE has issues with padding-bottom in a scrolling element (it does not include that\npadding in the scrollHeight). Also, margin-bottom on a child in a scrolling element\ncan be lost.</p>\n\n<p>All browsers seem to ignore margin-right on children and padding-right on the parent\nelement (the one with the overflow)</p>\n\n<p>This method returns a number with the follow bit positions set based on things not\naccounted for in scrollHeight and scrollWidth:</p>\n\n<ul>\n<li>1: Scrolling element's padding-bottom is not included in scrollHeight.</li>\n<li>2: Last child's margin-bottom is not included in scrollHeight.</li>\n<li>4: Scrolling element's padding-right is not included in scrollWidth.</li>\n<li>8: Child's margin-right is not included in scrollWidth.</li>\n</ul>\n\n\n<p>To work around the margin-bottom issue, it is sufficient to create a 0px tall last\nchild that will \"hide\" the margin. This can also be handled by wrapping the children\nin an element, again \"hiding\" the margin. Wrapping the elements is about the only\nway to preserve their right margins. This is the strategy used by Column layout.</p>\n\n<p>To work around the padding-bottom problem, since it is comes from a style on the\nparent element, about the only simple fix is to create a last child with height\nequal to padding-bottom. To preserve the right padding, the sizing element needs to\nhave a width that includes the right padding.</p>\n"},"lastOverflowAdjust":{"!type":"?","!doc":"<p>Begin with no previous adjustments</p>\n"},"manageOverflow":{"!type":"bool"},"padRow":{"!type":"string"},"renderTpl":{"!type":"[?]"},"tableCls":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"type":{"!type":"string"},"beginLayoutCycle":{"!type":"fn(ownerContext: ?, firstCycle: ?) -> !this","!doc":"<p>All of the below methods are old methods moved here from Container layout\nTODO: remove these methods once Form layout extends Auto layout</p>\n"},"calculate":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called to perform the calculations for this layout. This method will be called at\nleast once and may be called repeatedly if the <a href=\"#!/api/Ext.layout.container.Form-property-done\" rel=\"Ext.layout.container.Form-property-done\" class=\"docClass\">done</a> property is cleared\nbefore return to indicate that this layout is not yet done. The <a href=\"#!/api/Ext.layout.container.Form-property-done\" rel=\"Ext.layout.container.Form-property-done\" class=\"docClass\">done</a> property\nis always set to <code>true</code> before entering this method.</p>\n\n<p>This is a read phase and DOM writes should be strictly avoided in derived classes.\nInstead, DOM writes need to be written to <a href=\"#!/api/Ext.layout.ContextItem\" rel=\"Ext.layout.ContextItem\" class=\"docClass\">Ext.layout.ContextItem</a> objects to\n be flushed at the next opportunity.</p>\n"},"calculateOverflow":{"!type":"fn(ownerContext: +Ext.layout.ContextItem, containerSize: ?, dimensions: number) -> !this","!doc":"<p>Handles overflow processing for a container. This should be called once the layout\nhas determined contentWidth/Height. In addition to the ownerContext passed to the\n<a href=\"#!/api/Ext.layout.container.Form-method-calculate\" rel=\"Ext.layout.container.Form-method-calculate\" class=\"docClass\">calculate</a> method, this method also needs the containerSize (the object\nreturned by <a href=\"#!/api/Ext.layout.container.Form-method-getContainerSize\" rel=\"Ext.layout.container.Form-method-getContainerSize\" class=\"docClass\">getContainerSize</a>).</p>\n"},"completeLayout":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>This method (if implemented) is called at the end of the cycle in which this layout\ncompletes (by not setting <a href=\"#!/api/Ext.layout.container.Form-property-done\" rel=\"Ext.layout.container.Form-property-done\" class=\"docClass\">done</a> to <code>false</code> in <a href=\"#!/api/Ext.layout.container.Form-method-calculate\" rel=\"Ext.layout.container.Form-method-calculate\" class=\"docClass\">calculate</a>). It is\npossible for the layout to complete and yet become invalid before the end of the cycle,\nin which case, this method will not be called. It is also possible for this method to\nbe called and then later the layout becomes invalidated. This will result in\n<a href=\"#!/api/Ext.layout.container.Form-method-calculate\" rel=\"Ext.layout.container.Form-method-calculate\" class=\"docClass\">calculate</a> being called again, followed by another call to this method.</p>\n\n<p>This is a read phase and DOM writes should be strictly avoided in derived classes.\nInstead, DOM writes need to be written to <a href=\"#!/api/Ext.layout.ContextItem\" rel=\"Ext.layout.ContextItem\" class=\"docClass\">Ext.layout.ContextItem</a> objects to\nbe flushed at the next opportunity.</p>\n\n<p>This method need not be implemented by derived classes and, in fact, should only be\nimplemented when needed.</p>\n"},"doRenderPadder":{"!type":"fn(out: ?, renderData: ?) -> !this","!doc":"<p>Creates an element that makes bottom/right body padding consistent across browsers.\nThis element is sized based on the need for scrollbars in <a href=\"#!/api/Ext.layout.container.Form-method-calculateOverflow\" rel=\"Ext.layout.container.Form-method-calculateOverflow\" class=\"docClass\">calculateOverflow</a>.\nIf the <a href=\"#!/api/Ext.layout.container.Form-property-manageOverflow\" rel=\"Ext.layout.container.Form-property-manageOverflow\" class=\"docClass\">manageOverflow</a> option is false, this element is not created.</p>\n\n<p>See <a href=\"#!/api/Ext.layout.container.Form-property-getScrollRangeFlags\" rel=\"Ext.layout.container.Form-property-getScrollRangeFlags\" class=\"docClass\">getScrollRangeFlags</a> for more details.</p>\n"},"getContainerSize":{"!type":"fn(ownerContext: +Ext.layout.ContextItem, inDom?: bool, ignoreOverflow?: bool) -> ?","!doc":"<p>Returns the container size (that of the target). Only the fixed-sized dimensions can\nbe returned because the shrinkWrap dimensions are based on the contentWidth/Height\nas determined by the container layout.</p>\n\n<p>If the <a href=\"#!/api/Ext.layout.container.Form-method-calculateOverflow\" rel=\"Ext.layout.container.Form-method-calculateOverflow\" class=\"docClass\">calculateOverflow</a> method is used and if <a href=\"#!/api/Ext.layout.container.Form-property-manageOverflow\" rel=\"Ext.layout.container.Form-property-manageOverflow\" class=\"docClass\">manageOverflow</a> is\ntrue, this may adjust the width/height by the size of scrollbars.</p>\n"},"getItemSizePolicy":{"!type":"fn(item: ?) -> +Ext.layout.SizePolicy","!doc":"<p>Returns an object describing how this layout manages the size of the given component.\nThis method must be implemented by any layout that manages components.</p>\n"},"getOverflowXStyle":{"!type":"fn(ownerContext: +Ext.layout.ContextItem) -> string","!doc":"<p>returns the overflow-x style of the render target</p>\n"},"getOverflowYStyle":{"!type":"fn(ownerContext: +Ext.layout.ContextItem) -> string","!doc":"<p>returns the overflow-y style of the render target</p>\n"},"getRenderData":{"!type":"fn() -> !this"},"getRenderTarget":{"!type":"fn() -> +Ext.Element","!doc":"<p>Returns the element into which rendering must take place. Defaults to the owner Container's\ntarget element.</p>\n\n<p>May be overridden in layout managers which implement an inner element.</p>\n"},"getRenderTree":{"!type":"fn() -> !this"},"initLayout":{"!type":"fn() -> !this","!doc":"<p>A one-time initialization method called just before rendering.</p>\n"},"isItemShrinkWrap":{"!type":"fn(item: ?) -> !this"},"isValidParent":{"!type":"fn(item: ?, target: ?, position: ?) -> !this","!doc":"<p>Validates item is in the proper place in the dom.</p>\n"},"setupRenderTpl":{"!type":"fn(renderTpl: ?) -> !this"},"transformItemRenderTree":{"!type":"fn(item: ?) -> !this"}}},"HBox":{"!doc":"<p>A layout that arranges items horizontally across a Container. This layout optionally divides available horizontal\nspace between child items containing a numeric <code>flex</code> configuration.</p>\n\n<p>This layout may also be used to set the heights of child items by configuring it with the <a href=\"#!/api/Ext.layout.container.HBox-cfg-align\" rel=\"Ext.layout.container.HBox-cfg-align\" class=\"docClass\">align</a> option.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.Panel</a>', {\n    width: 500,\n    height: 300,\n    title: \"HBoxLayout Panel\",\n    layout: {\n        type: 'hbox',\n        align: 'stretch'\n    },\n    renderTo: document.body,\n    items: [{\n        xtype: 'panel',\n        title: 'Inner Panel One',\n        flex: 2\n    },{\n        xtype: 'panel',\n        title: 'Inner Panel Two',\n        flex: 1\n    },{\n        xtype: 'panel',\n        title: 'Inner Panel Three',\n        flex: 1\n    }]\n});\n</code></pre>\n","!type":"fn(config: Ext_layout_container_HBox_cfg)","prototype":{"!proto":"Ext.layout.container.Box.prototype","align":{"!type":"string","!doc":"<p>Controls how the child items of the container are aligned. Acceptable configuration values for this property are:</p>\n\n<ul>\n<li><strong>top</strong> : <strong>Default</strong> child items are aligned vertically at the <strong>top</strong> of the container.</li>\n<li><strong>middle</strong> : child items are aligned vertically in the <strong>middle</strong> of the container.</li>\n<li><strong>bottom</strong> : child items are aligned vertically at the <strong>bottom</strong> of the container.</li>\n<li><strong>stretch</strong> : child items are stretched vertically to fill the height of the container.</li>\n<li><strong>stretchmax</strong> : child items are stretched vertically to the height of the largest item.</li>\n</ul>\n\n"},"alignRoundingMethod":{"!type":"string|string|string","!doc":"<p>The Math method to use\nfor rounding fractional pixels when <code><a href=\"#!/api/Ext.layout.container.HBox-cfg-align\" rel=\"Ext.layout.container.HBox-cfg-align\" class=\"docClass\">align</a>:middle</code> is used.</p>\n"},"constrainAlign":{"!type":"bool","!doc":"<p>Limits the size of <a href=\"#!/api/Ext.layout.container.HBox-cfg-align\" rel=\"Ext.layout.container.HBox-cfg-align\" class=\"docClass\">aligned</a> components to the size of the container under certain circumstances.\nFirstly, the container height must not be determined by the height of the child components. Secondly, the child\ncomponents must have their height <a href=\"#!/api/Ext.AbstractComponent-cfg-shrinkWrap\" rel=\"Ext.AbstractComponent-cfg-shrinkWrap\" class=\"docClass\">shrinkwrapped</a>.</p>\n"},"direction":{"!type":"string"},"horizontal":{"!type":"bool"},"names":{"!type":"?"},"sizePolicy":{"!type":"?"},"type":{"!type":"string"}}},"Table":{"!doc":"<p>This layout allows you to easily render content into an HTML table. The total number of columns can be specified, and\nrowspan and colspan can be used to create complex layouts within the table. This class is intended to be extended or\ncreated via the <code>layout: {type: 'table'}</code> <a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">Ext.container.Container.layout</a> config, and should generally not\nneed to be created directly via the new keyword.</p>\n\n<p>Note that when creating a layout via config, the layout-specific config properties must be passed in via the <a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">Ext.container.Container.layout</a> object which will then be applied internally to the layout. In the case of\nTableLayout, the only valid layout config properties are <a href=\"#!/api/Ext.layout.container.Table-cfg-columns\" rel=\"Ext.layout.container.Table-cfg-columns\" class=\"docClass\">columns</a> and <a href=\"#!/api/Ext.layout.container.Table-cfg-tableAttrs\" rel=\"Ext.layout.container.Table-cfg-tableAttrs\" class=\"docClass\">tableAttrs</a>. However, the items\nadded to a TableLayout can supply the following table-specific config properties:</p>\n\n<ul>\n<li><strong>rowspan</strong> Applied to the table cell containing the item.</li>\n<li><strong>colspan</strong> Applied to the table cell containing the item.</li>\n<li><strong>cellId</strong> An id applied to the table cell containing the item.</li>\n<li><strong>cellCls</strong> A CSS class name added to the table cell containing the item.</li>\n</ul>\n\n\n<p>The basic concept of building up a TableLayout is conceptually very similar to building up a standard HTML table. You\nsimply add each panel (or \"cell\") that you want to include along with any span attributes specified as the special\nconfig properties of rowspan and colspan which work exactly like their HTML counterparts. Rather than explicitly\ncreating and nesting rows and columns as you would in HTML, you simply specify the total column count in the\nlayout config and start adding panels in their natural order from left to right, top to bottom. The layout will\nautomatically figure out, based on the column count, rowspans and colspans, how to position each panel within the\ntable. Just like with HTML tables, your rowspans and colspans must add up correctly in your overall layout or you'll\nend up with missing and/or extra cells! Example usage:</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>', {\n    title: 'Table Layout',\n    width: 300,\n    height: 150,\n    layout: {\n        type: 'table',\n        // The total column count must be specified here\n        columns: 3\n    },\n    defaults: {\n        // applied to each contained panel\n        bodyStyle: 'padding:20px'\n    },\n    items: [{\n        html: 'Cell A content',\n        rowspan: 2\n    },{\n        html: 'Cell B content',\n        colspan: 2\n    },{\n        html: 'Cell C content',\n        cellCls: 'highlight'\n    },{\n        html: 'Cell D content'\n    }],\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n","!type":"fn()","prototype":{"!proto":"Ext.layout.container.Container.prototype","columns":{"!type":"number","!doc":"<p>The total number of columns to create in the table for this layout. If not specified, all Components added to\nthis layout will be rendered into a single row using one column per Component.</p>\n"},"tableAttrs":{"!type":"?","!doc":"<p>An object containing properties which are added to the <a href=\"#!/api/Ext.DomHelper\" rel=\"Ext.DomHelper\" class=\"docClass\">DomHelper</a> specification used to\ncreate the layout's <code>&lt;table&gt;</code> element. Example:</p>\n\n<pre><code>{\n    xtype: 'panel',\n    layout: {\n        type: 'table',\n        columns: 3,\n        tableAttrs: {\n            style: {\n                width: '100%'\n            }\n        }\n    }\n}\n</code></pre>\n"},"tdAttrs":{"!type":"?","!doc":"<p>An object containing properties which are added to the <a href=\"#!/api/Ext.DomHelper\" rel=\"Ext.DomHelper\" class=\"docClass\">DomHelper</a> specification used to\ncreate the layout's <code>&lt;td&gt;</code> elements.</p>\n"},"trAttrs":{"!type":"?","!doc":"<p>An object containing properties which are added to the <a href=\"#!/api/Ext.DomHelper\" rel=\"Ext.DomHelper\" class=\"docClass\">DomHelper</a> specification used to\ncreate the layout's <code>&lt;tr&gt;</code> elements.</p>\n"},"cellCls":{"!type":"string"},"createsInnerCt":{"!type":"bool"},"monitorResize":{"!type":"bool","!doc":"<p>private</p>\n"},"tableCls":{"!type":"string"},"targetCls":{"!type":"string"},"type":{"!type":"string"},"calculate":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called to perform the calculations for this layout. This method will be called at\nleast once and may be called repeatedly if the <a href=\"#!/api/Ext.layout.container.Table-property-done\" rel=\"Ext.layout.container.Table-property-done\" class=\"docClass\">done</a> property is cleared\nbefore return to indicate that this layout is not yet done. The <a href=\"#!/api/Ext.layout.container.Table-property-done\" rel=\"Ext.layout.container.Table-property-done\" class=\"docClass\">done</a> property\nis always set to <code>true</code> before entering this method.</p>\n\n<p>This is a read phase and DOM writes should be strictly avoided in derived classes.\nInstead, DOM writes need to be written to <a href=\"#!/api/Ext.layout.ContextItem\" rel=\"Ext.layout.ContextItem\" class=\"docClass\">Ext.layout.ContextItem</a> objects to\n be flushed at the next opportunity.</p>\n"},"calculateCells":{"!type":"fn(items: [?]) -> [?]","!doc":"<p>Determine the row and cell indexes for each component, taking into consideration\nthe number of columns and each item's configured colspan/rowspan values.</p>\n"},"ensureInDocument":{"!type":"fn(el: ?) -> !this"},"finalizeLayout":{"!type":"fn() -> !this","!doc":"<p>This method (if implemented) is called after all layouts have completed. In most\nways this is similar to <a href=\"#!/api/Ext.layout.container.Table-method-completeLayout\" rel=\"Ext.layout.container.Table-method-completeLayout\" class=\"docClass\">completeLayout</a>. This call can cause this (or any\nlayout) to be become invalid (see <a href=\"#!/api/Ext.layout.Context-method-invalidate\" rel=\"Ext.layout.Context-method-invalidate\" class=\"docClass\">Ext.layout.Context.invalidate</a>), but this\nis best avoided. This method is intended to be where final reads are made and so it\nis best to avoid invalidating layouts at this point whenever possible. Even so, this\nmethod can be used to perform final checks that may require all other layouts to be\ncomplete and then invalidate some results.</p>\n\n<p>This is a read phase and DOM writes should be strictly avoided in derived classes.\nInstead, DOM writes need to be written to <a href=\"#!/api/Ext.layout.ContextItem\" rel=\"Ext.layout.ContextItem\" class=\"docClass\">Ext.layout.ContextItem</a> objects to\nbe flushed at the next opportunity.</p>\n\n<p>This method need not be implemented by derived classes and, in fact, should only be\nimplemented when needed.</p>\n"},"getHiddenItems":{"!type":"fn() -> !this"},"getLayoutItems":{"!type":"fn() -> [+Ext.Component]","!doc":"<p>Returns an array of child components either for a render phase (Performed in the beforeLayout\nmethod of the layout's base class), or the layout phase (onLayout).</p>\n"},"getRenderTree":{"!type":"fn() -> !this"},"initHierarchyState":{"!type":"fn(hierarchyStateInner: ?) -> !this"},"isValidParent":{"!type":"fn(item: ?, target: ?, rowIdx: ?, cellIdx: ?) -> !this","!doc":"<p>Validates item is in the proper place in the dom.</p>\n"},"needsDivWrap":{"!type":"fn() -> !this","!doc":"<p>Opera 10.5 has a bug where if a table cell's child has box-sizing:border-box and padding, it\nwill include that padding in the size of the cell, making it always larger than the\nshrink-wrapped size of its contents. To get around this we have to wrap the contents in a div\nand then set that div's width to match the item rendered within it afterLayout. This method\ndetermines whether we need the wrapper div; it currently does a straight UA sniff as this bug\nseems isolated to just Opera 10.5, but feature detection could be added here if needed.</p>\n"},"renderChildren":{"!type":"fn() -> !this","!doc":"<p>Iterates over all passed items, ensuring they are rendered in a cell in the proper\nlocation in the table structure.</p>\n"}}},"VBox":{"!doc":"<p>A layout that arranges items vertically down a Container. This layout optionally divides available vertical space\nbetween child items containing a numeric <code>flex</code> configuration.</p>\n\n<p>This layout may also be used to set the widths of child items by configuring it with the <a href=\"#!/api/Ext.layout.container.VBox-cfg-align\" rel=\"Ext.layout.container.VBox-cfg-align\" class=\"docClass\">align</a> option.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.Panel</a>', {\n    width: 500,\n    height: 400,\n    title: \"VBoxLayout Panel\",\n    layout: {\n        type: 'vbox',\n        align: 'center'\n    },\n    renderTo: document.body,\n    items: [{\n        xtype: 'panel',\n        title: 'Inner Panel One',\n        width: 250,\n        flex: 2\n    },\n    {\n        xtype: 'panel',\n        title: 'Inner Panel Two',\n        width: 250,\n        flex: 4\n    },\n    {\n        xtype: 'panel',\n        title: 'Inner Panel Three',\n        width: '50%',\n        flex: 4\n    }]\n});\n</code></pre>\n","!type":"fn(config: Ext_layout_container_VBox_cfg)","prototype":{"!proto":"Ext.layout.container.Box.prototype","align":{"!type":"string","!doc":"<p>Controls how the child items of the container are aligned. Acceptable configuration values for this property are:</p>\n\n<ul>\n<li><strong>left</strong> : <strong>Default</strong> child items are aligned horizontally at the <strong>left</strong> side of the container.</li>\n<li><strong>center</strong> : child items are aligned horizontally at the <strong>mid-width</strong> of the container.</li>\n<li><strong>right</strong> : child items are aligned horizontally at the <strong>right</strong> of the container.</li>\n<li><strong>stretch</strong> : child items are stretched horizontally to fill the width of the container.</li>\n<li><strong>stretchmax</strong> : child items are stretched horizontally to the size of the largest item.</li>\n</ul>\n\n"},"alignRoundingMethod":{"!type":"string|string|string","!doc":"<p>The Math method to use\nfor rounding fractional pixels when <code><a href=\"#!/api/Ext.layout.container.VBox-cfg-align\" rel=\"Ext.layout.container.VBox-cfg-align\" class=\"docClass\">align</a>:center</code> is used.</p>\n"},"constrainAlign":{"!type":"bool","!doc":"<p>Limits the size of <a href=\"#!/api/Ext.layout.container.VBox-cfg-align\" rel=\"Ext.layout.container.VBox-cfg-align\" class=\"docClass\">aligned</a> components to the size of the container under certain circumstances.\nFirstly, the container width must not be determined by the width of the child components. Secondly, the child\ncomponents must have their width <a href=\"#!/api/Ext.AbstractComponent-cfg-shrinkWrap\" rel=\"Ext.AbstractComponent-cfg-shrinkWrap\" class=\"docClass\">shrinkwrapped</a>.</p>\n"},"direction":{"!type":"string"},"horizontal":{"!type":"bool"},"names":{"!type":"?"},"sizePolicy":{"!type":"?"},"type":{"!type":"string"}}},"boxOverflow":{"Menu":{"!type":"fn(layout: ?)","prototype":{"!proto":"Ext.layout.container.boxOverflow.None.prototype","triggerButtonCls":{"!type":"string","!doc":"<p>CSS class added to the Button which shows the overflow menu.</p>\n"},"_asLayoutRoot":{"!type":"?"},"menu":{"!type":"+Ext.menu.Menu","!doc":"<p>The expand menu - holds items for every item that cannot be shown\nbecause the container is currently not large enough.</p>\n"},"menuItems":{"!type":"[?]","!doc":"<p>Array of all items that are currently hidden and should go into the dropdown menu</p>\n"},"menuTrigger":{"!type":"+Ext.button.Button","!doc":"<p>The expand button which triggers the overflow menu to be shown</p>\n"},"noItemsMenuText":{"!type":"string","!doc":"<p>HTML fragment to render into the toolbar overflow menu if there are no items to display</p>\n"},"addComponentToMenu":{"!type":"fn(menu: +Ext.menu.Menu, component: +Ext.Component) -> !this","!doc":"<p>Adds the given Toolbar item to the given menu. Buttons inside a buttongroup are added individually.</p>\n"},"beforeMenuShow":{"!type":"fn(menu: ?) -> !this","!doc":"<p>Called before the overflow menu is shown. This constructs the menu's items, caching them for as long as it can.</p>\n"},"beginLayout":{"!type":"fn(ownerContext: ?) -> !this"},"beginLayoutCycle":{"!type":"fn(ownerContext: ?, firstCycle: ?) -> !this"},"captureChildElements":{"!type":"fn() -> !this","!doc":"<p>Finishes the render operation of the trigger Button.</p>\n"},"clearMenu":{"!type":"fn() -> !this","!doc":"<p>Deletes the sub-menu of each item in the expander menu. Submenus are created for items such as\nsplitbuttons and buttongroups, where the Toolbar item cannot be represented by a single menu item</p>\n"},"clearOverflow":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called by the layout, when it determines that there is no overflow.\nAlso called as an interceptor to the layout's onLayout method to reshow\npreviously hidden overflowing items.</p>\n"},"createMenuConfig":{"!type":"fn(component: +Ext.Component, hideOnClick: bool) -> !this","!doc":"<p>Returns a menu config for a given component. This config is used to create a menu item\nto be added to the expander menu</p>\n"},"destroy":{"!type":"fn() -> !this"},"getOverflowCls":{"!type":"fn() -> !this"},"getSuffixConfig":{"!type":"fn() -> !this","!doc":"<p>We don't define a prefix in menu overflow.</p>\n"},"handleOverflow":{"!type":"fn(ownerContext: ?) -> !this"},"hideTrigger":{"!type":"fn() -> !this"},"onButtonAttrChange":{"!type":"fn(btn: ?) -> !this"},"onButtonToggle":{"!type":"fn(btn: ?, state: ?) -> !this"},"onRemove":{"!type":"fn(comp: ?) -> !this"},"showTrigger":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Shows the overflow trigger when enableOverflow is set to true and the items\nin the layout are too wide to fit in the space available</p>\n"}}},"None":{"!doc":"<p>Base class for Box Layout overflow handlers. These specialized classes are invoked when a Box Layout\n(either an HBox or a VBox) has child items that are either too wide (for HBox) or too tall (for VBox)\nfor its container.</p>\n","!type":"fn(layout: ?, config: Ext_layout_container_boxOverflow_None_cfg)","prototype":{"!proto":"Ext.Base.prototype","beginLayout":{"!type":"fn() -> !this"},"beginLayoutCycle":{"!type":"fn() -> !this"},"calculate":{"!type":"fn(ownerContext: ?) -> !this"},"clearOverflow":{"!type":"fn() -> !this"},"completeLayout":{"!type":"fn() -> !this"},"finishedLayout":{"!type":"fn(ownerContext: ?) -> !this"},"getItem":{"!type":"fn(item: +Ext.Component|string|number) -> +Ext.Component","!doc":"<p>Normalizes an item reference, string id or numerical index into a reference to the item</p>\n"},"getOverflowCls":{"!type":"fn() -> !this"},"getOwnerType":{"!type":"fn(owner: ?) -> !this"},"getPrefixConfig":{"!type":"fn() -> !this"},"getSuffixConfig":{"!type":"fn() -> !this"},"handleOverflow":{"!type":"fn() -> !this"},"onRemove":{"!type":"fn() -> !this"}}},"Scroller":{"!type":"fn(layout: ?, config: Ext_layout_container_boxOverflow_Scroller_cfg)","prototype":{"!proto":"Ext.layout.container.boxOverflow.None.prototype","afterCtCls":{"!type":"string","!doc":"<p>CSS class added to the afterCt element. This is the element that holds any special items such as scrollers,\nwhich must always be present at the rightmost edge of the Container</p>\n"},"afterScrollerCls":{"!type":"string","!doc":"<p>CSS class added to the right scroller element if enableScroll is used</p>\n"},"animateScroll":{"!type":"bool","!doc":"<p>True to animate the scrolling of items within the layout (ignored if enableScroll is false)</p>\n"},"beforeCtCls":{"!type":"string","!doc":"<p>CSS class added to the beforeCt element. This is the element that holds any special items such as scrollers,\nwhich must always be present at the leftmost edge of the Container</p>\n"},"beforeScrollerCls":{"!type":"string","!doc":"<p>CSS class added to the left scroller element if enableScroll is used</p>\n"},"scrollDuration":{"!type":"number","!doc":"<p>Number of milliseconds that each scroll animation lasts</p>\n"},"scrollIncrement":{"!type":"number","!doc":"<p>The number of pixels to scroll by on scroller click</p>\n"},"scrollRepeatInterval":{"!type":"number","!doc":"<p>Number of milliseconds between each scroll while a scroller button is held down</p>\n"},"scrollerCls":{"!type":"string","!doc":"<p>CSS class added to both scroller elements if enableScroll is used</p>\n"},"wheelIncrement":{"!type":"number","!doc":"<p>The number of pixels to increment on mouse wheel scrolling.</p>\n"},"atExtremeAfter":{"!type":"fn() -> bool","!doc":"<p>Returns true if the innerCt scroll is already at its right-most point</p>\n"},"atExtremeBefore":{"!type":"fn() -> bool","!doc":"<p>Returns true if the innerCt scroll is already at its left-most point</p>\n"},"beginLayout":{"!type":"fn(ownerContext: ?) -> !this"},"captureChildElements":{"!type":"fn() -> !this","!doc":"<p>Gets references to the beforeCt and afterCt elements if they have not already been captured\nand creates click handlers for them.</p>\n"},"clearOverflow":{"!type":"fn() -> !this"},"completeLayout":{"!type":"fn(ownerContext: ?) -> !this"},"createWheelListener":{"!type":"fn() -> !this","!doc":"<p>Sets up an listener to scroll on the layout's innerCt mousewheel event</p>\n"},"destroy":{"!type":"fn() -> !this"},"finishedLayout":{"!type":"fn(ownerContext: ?) -> !this"},"getItemVisibility":{"!type":"fn(item: +Ext.Component) -> ?","!doc":"<p>For a given item in the container, return an object with information on whether the item is visible\nwith the current innerCt scroll value.</p>\n"},"getMaxScrollPosition":{"!type":"fn() -> number","!doc":"<p>Returns the maximum value we can scrollTo</p>\n"},"getOverflowCls":{"!type":"fn() -> !this"},"getPrefixConfig":{"!type":"fn() -> !this"},"getScrollAnim":{"!type":"fn() -> ?"},"getScrollPosition":{"!type":"fn() -> number","!doc":"<p>Returns the current scroll position of the innerCt element</p>\n"},"getSuffixConfig":{"!type":"fn() -> !this"},"getWheelDelta":{"!type":"fn(e: ?) -> !this"},"handleOverflow":{"!type":"fn(ownerContext: ?) -> !this"},"hideScrollers":{"!type":"fn() -> !this","!doc":"<p>Hides the scroller elements in the beforeCt and afterCt</p>\n"},"initCSSClasses":{"!type":"fn() -> !this"},"scrollBy":{"!type":"fn(delta: number) -> !this","!doc":"<p>Scrolls left or right by the number of pixels specified</p>\n"},"scrollLeft":{"!type":"fn() -> !this","!doc":"<p>Scrolls to the left by the configured amount</p>\n"},"scrollRight":{"!type":"fn() -> !this","!doc":"<p>Scrolls to the right by the configured amount</p>\n"},"scrollTo":{"!type":"fn(position: number, animate: bool) -> !this","!doc":"<p>Scrolls to the given position. Performs bounds checking.</p>\n"},"scrollToItem":{"!type":"fn(item: string|number|+Ext.Component, animate: bool) -> !this","!doc":"<p>Scrolls to the given component.</p>\n"},"showScrollers":{"!type":"fn() -> !this","!doc":"<p>Shows the scroller elements in the beforeCt and afterCt. Creates the scrollers first if they are not already\npresent.</p>\n"},"updateScrollButtons":{"!type":"fn() -> !this","!doc":"<p>Enables or disables each scroller button based on the current scroll position</p>\n"},"scroll":{"!type":"fn(scroller: +Ext.layout.container.boxOverflow.Scroller, newPosition: number, animate: bool|?, eOpts: ?)"}}}}}},"menu":{"CheckItem":{"!doc":"<p>A menu item that contains a togglable checkbox by default, but that can also be a part of a radio group.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.menu.Menu\" rel=\"Ext.menu.Menu\" class=\"docClass\">Ext.menu.Menu</a>', {\n    width: 100,\n    height: 110,\n    floating: false,  // usually you want this set to True (default)\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),  // usually rendered by it's containing component\n    items: [{\n        xtype: 'menucheckitem',\n        text: 'select all'\n    },{\n        xtype: 'menucheckitem',\n        text: 'select specific'\n    },{\n        iconCls: 'add16',\n        text: 'icon item'\n    },{\n        text: 'regular item'\n    }]\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_menu_CheckItem_cfg)","prototype":{"!proto":"Ext.menu.Item.prototype","checkChangeDisabled":{"!type":"bool","!doc":"<p>True to prevent the checked item from being toggled. Any submenu will still be accessible.</p>\n"},"checkHandler":{"!type":"fn()","!doc":"<p>Alternative for the <a href=\"#!/api/Ext.menu.CheckItem-event-checkchange\" rel=\"Ext.menu.CheckItem-event-checkchange\" class=\"docClass\">checkchange</a> event.  Gets called with the same parameters.</p>\n"},"checked":{"!type":"bool","!doc":"<p>True to render the menuitem initially checked.</p>\n"},"checkedCls":{"!type":"string","!doc":"<p>The CSS class used by <a href=\"#!/api/Ext.menu.CheckItem-cfg-cls\" rel=\"Ext.menu.CheckItem-cfg-cls\" class=\"docClass\">cls</a> to show the checked state.\nDefaults to <code>Ext.baseCSSPrefix + 'menu-item-checked'</code>.</p>\n"},"group":{"!type":"string","!doc":"<p>Name of a radio group that the item belongs.</p>\n\n<p>Specifying this option will turn check item into a radio item.</p>\n\n<p>Note that the group name must be globally unique.</p>\n"},"groupCls":{"!type":"string","!doc":"<p>The CSS class applied to this item's icon image to denote being a part of a radio group.\nDefaults to <code>Ext.baseCSSClass + 'menu-group-icon'</code>.\nAny specified <a href=\"#!/api/Ext.menu.CheckItem-cfg-iconCls\" rel=\"Ext.menu.CheckItem-cfg-iconCls\" class=\"docClass\">iconCls</a> overrides this.</p>\n"},"hideOnClick":{"!type":"bool","!doc":"<p>Whether to not to hide the owning menu when this item is clicked.\nDefaults to <code>false</code> for checkbox items, and to <code>true</code> for radio group items.</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.menu.CheckItem-method-getEl\" rel=\"Ext.menu.CheckItem-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.menu.CheckItem-method-getEl\" rel=\"Ext.menu.CheckItem-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.menu.CheckItem-cfg-renderSelectors\" rel=\"Ext.menu.CheckItem-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.menu.CheckItem-cfg-childEls\" rel=\"Ext.menu.CheckItem-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"},"scope":{"!type":"?","!doc":"<p>Scope for the <a href=\"#!/api/Ext.menu.CheckItem-cfg-checkHandler\" rel=\"Ext.menu.CheckItem-cfg-checkHandler\" class=\"docClass\">checkHandler</a> callback.</p>\n"},"uncheckedCls":{"!type":"string","!doc":"<p>The CSS class used by <a href=\"#!/api/Ext.menu.CheckItem-cfg-cls\" rel=\"Ext.menu.CheckItem-cfg-cls\" class=\"docClass\">cls</a> to show the unchecked state.\nDefaults to <code>Ext.baseCSSPrefix + 'menu-item-unchecked'</code>.</p>\n"},"childEls":{"!type":"[?]"},"showCheckbox":{"!type":"bool"},"afterRender":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior after rendering is complete. At this stage the Component’s Element\nwill have been styled according to the configuration, will have had any configured CSS class\nnames added, and will be in the configured visibility and the configured enable state.</p>\n"},"beforeRender":{"!type":"fn() -> !this"},"disableCheckChange":{"!type":"fn() -> !this","!doc":"<p>Disables just the checkbox functionality of this menu Item. If this menu item has a submenu, that submenu\nwill still be accessible</p>\n"},"enableCheckChange":{"!type":"fn() -> !this","!doc":"<p>Reenables the checkbox functionality of this menu item after having been disabled by <a href=\"#!/api/Ext.menu.CheckItem-method-disableCheckChange\" rel=\"Ext.menu.CheckItem-method-disableCheckChange\" class=\"docClass\">disableCheckChange</a></p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>The initComponent template method is an important initialization step for a Component. It is intended to be\nimplemented by each subclass of <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> to provide any needed constructor logic. The\ninitComponent method of the class being created is called first, with each initComponent method\nup the hierarchy to <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> being called thereafter. This makes it easy to implement and,\nif needed, override the constructor logic of the Component at any step in the hierarchy.</p>\n\n<p>The initComponent method <strong>must</strong> contain a call to <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a> in order\nto ensure that the parent class' initComponent method is also called.</p>\n\n<p>All config options passed to the constructor are applied to <code>this</code> before initComponent is called,\nso you can simply access them with <code>this.someOption</code>.</p>\n\n<p>The following example demonstrates using a dynamic string for the text of a button at the time of\ninstantiation of the class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('DynamicButtonText', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n\n    initComponent: function() {\n        this.text = new Date();\n        this.renderTo = <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>();\n        this.callParent();\n    }\n});\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function() {\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('DynamicButtonText');\n});\n</code></pre>\n"},"onClick":{"!type":"fn(e: ?) -> !this"},"onDestroy":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the destroy operation.\nAfter calling the superclass's onDestroy, the Component will be destroyed.</p>\n"},"setChecked":{"!type":"fn(checked: bool, suppressEvents?: bool) -> !this","!doc":"<p>Sets the checked state of the item</p>\n"},"beforecheckchange":{"!type":"fn(this: +Ext.menu.CheckItem, checked: bool, eOpts: ?)","!doc":"<p>Fires before a change event. Return false to cancel.</p>\n"},"checkchange":{"!type":"fn(this: +Ext.menu.CheckItem, checked: bool, eOpts: ?)","!doc":"<p>Fires after a change event.</p>\n"}}},"ColorPicker":{"!doc":"<p>A menu containing a <a href=\"#!/api/Ext.picker.Color\" rel=\"Ext.picker.Color\" class=\"docClass\">Ext.picker.Color</a> Component.</p>\n\n<p>Notes:</p>\n\n<ul>\n<li>Although not listed here, the <strong>constructor</strong> for this class accepts all of the\nconfiguration options of <a href=\"#!/api/Ext.picker.Color\" rel=\"Ext.picker.Color\" class=\"docClass\">Ext.picker.Color</a>.</li>\n<li>If subclassing ColorMenu, any configuration options for the ColorPicker must be\napplied to the <strong>initialConfig</strong> property of the ColorMenu. Applying\n<a href=\"#!/api/Ext.picker.Color\" rel=\"Ext.picker.Color\" class=\"docClass\">ColorPicker</a> configuration settings to <code>this</code> will <strong>not</strong>\naffect the ColorPicker's configuration.</li>\n</ul>\n\n\n<p>Example:</p>\n\n<pre class='inline-example '><code>var colorPicker = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.menu.ColorPicker\" rel=\"Ext.menu.ColorPicker\" class=\"docClass\">Ext.menu.ColorPicker</a>', {\n    value: '000000'\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.menu.Menu\" rel=\"Ext.menu.Menu\" class=\"docClass\">Ext.menu.Menu</a>', {\n    width: 100,\n    height: 90,\n    floating: false,  // usually you want this set to True (default)\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),  // usually rendered by it's containing component\n    items: [{\n        text: 'choose a color',\n        menu: colorPicker\n    },{\n        iconCls: 'add16',\n        text: 'icon item'\n    },{\n        text: 'regular item'\n    }]\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_menu_ColorPicker_cfg)","prototype":{"!proto":"Ext.menu.Menu.prototype","hideOnClick":{"!type":"bool","!doc":"<p>False to continue showing the menu after a color is selected.</p>\n"},"maxHeight":{"!type":"number"},"pickerId":{"!type":"string","!doc":"<p>An id to assign to the underlying color picker.</p>\n"},"picker":{"!type":"+Ext.picker.Color","!doc":"<p>The <a href=\"#!/api/Ext.picker.Color\" rel=\"Ext.picker.Color\" class=\"docClass\">Ext.picker.Color</a> instance for this ColorMenu</p>\n"},"hidePickerOnSelect":{"!type":"fn() -> !this","!doc":"<p>Hides picker on select if hideOnClick is true</p>\n"},"click":{"!type":"fn(eOpts: ?)"},"select":{"!type":"fn(this: +Ext.picker.Color, color: string, eOpts: ?)","!doc":"<p>Fires when a color is selected</p>\n"}}},"DatePicker":{"!doc":"<p>A menu containing an <a href=\"#!/api/Ext.picker.Date\" rel=\"Ext.picker.Date\" class=\"docClass\">Ext.picker.Date</a> Component.</p>\n\n<p>Notes:</p>\n\n<ul>\n<li>Although not listed here, the <strong>constructor</strong> for this class accepts all of the\nconfiguration options of <strong><a href=\"#!/api/Ext.picker.Date\" rel=\"Ext.picker.Date\" class=\"docClass\">Ext.picker.Date</a></strong>.</li>\n<li>If subclassing DateMenu, any configuration options for the DatePicker must be applied\nto the <strong>initialConfig</strong> property of the DateMenu. Applying <a href=\"#!/api/Ext.picker.Date\" rel=\"Ext.picker.Date\" class=\"docClass\">Date Picker</a>\nconfiguration settings to <strong>this</strong> will <strong>not</strong> affect the Date Picker's configuration.</li>\n</ul>\n\n\n<p>Example:</p>\n\n<pre class='inline-example '><code>var dateMenu = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.menu.DatePicker\" rel=\"Ext.menu.DatePicker\" class=\"docClass\">Ext.menu.DatePicker</a>', {\n    handler: function(dp, date){\n        <a href=\"#!/api/Ext.MessageBox-method-alert\" rel=\"Ext.MessageBox-method-alert\" class=\"docClass\">Ext.Msg.alert</a>('Date Selected', 'You selected ' + <a href=\"#!/api/Ext.Date-method-format\" rel=\"Ext.Date-method-format\" class=\"docClass\">Ext.Date.format</a>(date, 'M j, Y'));\n    }\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.menu.Menu\" rel=\"Ext.menu.Menu\" class=\"docClass\">Ext.menu.Menu</a>', {\n    width: 100,\n    height: 90,\n    floating: false,  // usually you want this set to True (default)\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),  // usually rendered by it's containing component\n    items: [{\n        text: 'choose a date',\n        menu: dateMenu\n    },{\n        iconCls: 'add16',\n        text: 'icon item'\n    },{\n        text: 'regular item'\n    }]\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_menu_DatePicker_cfg)","prototype":{"!proto":"Ext.menu.Menu.prototype","hideOnClick":{"!type":"bool","!doc":"<p>False to continue showing the menu after a date is selected.</p>\n"},"maxHeight":{"!type":"number"},"pickerId":{"!type":"string","!doc":"<p>An id to assign to the underlying date picker.</p>\n"},"picker":{"!type":"+Ext.picker.Date","!doc":"<p>The <a href=\"#!/api/Ext.picker.Date\" rel=\"Ext.picker.Date\" class=\"docClass\">Ext.picker.Date</a> instance for this DateMenu</p>\n"},"hidePickerOnSelect":{"!type":"fn() -> !this"},"select":{"!type":"fn(this: +Ext.picker.Date, date: +Date, eOpts: ?)","!doc":"<p>Fires when a date is selected</p>\n"}}},"Item":{"!doc":"<p>A base class for all menu items that require menu-related functionality such as click handling,\nsub-menus, icons, etc.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.menu.Menu\" rel=\"Ext.menu.Menu\" class=\"docClass\">Ext.menu.Menu</a>', {\n    width: 100,\n    height: 100,\n    floating: false,  // usually you want this set to True (default)\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),  // usually rendered by it's containing component\n    items: [{\n        text: 'icon item',\n        iconCls: 'add16'\n    },{\n        text: 'text item'\n    },{\n        text: 'plain item',\n        plain: true\n    }]\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_menu_Item_cfg)","prototype":{"!proto":"Ext.Component.prototype","activeCls":{"!type":"string","!doc":"<p>The CSS class added to the menu item when the item is activated (focused/mouseover).</p>\n"},"ariaRole":{"!type":"string"},"canActivate":{"!type":"bool","!doc":"<p>Whether or not this menu item can be activated when focused/mouseovered.</p>\n"},"clickHideDelay":{"!type":"number","!doc":"<p>The delay in milliseconds to wait before hiding the menu after clicking the menu item.\nThis only has an effect when <code>hideOnClick: true</code>.</p>\n"},"destroyMenu":{"!type":"bool","!doc":"<p>Whether or not to destroy any associated sub-menu when this item is destroyed.</p>\n"},"disabledCls":{"!type":"string","!doc":"<p>The CSS class added to the menu item when the item is disabled.</p>\n"},"glyph":{"!type":"number|string","!doc":"<p>A numeric unicode character code to use as the icon for this item. The default\nfont-family for glyphs can be set globally using\n<a href=\"#!/api/Ext-method-setGlyphFontFamily\" rel=\"Ext-method-setGlyphFontFamily\" class=\"docClass\">Ext.setGlyphFontFamily()</a>. Alternatively, this\nconfig option accepts a string with the charCode and font-family separated by the\n<code>@</code> symbol. For example '65@My Font Family'.</p>\n"},"handler":{"!type":"fn()","!doc":"<p>A function called when the menu item is clicked (can be used instead of <a href=\"#!/api/Ext.menu.Item-event-click\" rel=\"Ext.menu.Item-event-click\" class=\"docClass\">click</a> event).</p>\n"},"hideOnClick":{"!type":"bool","!doc":"<p>Whether to not to hide the owning menu when this item is clicked.</p>\n"},"href":{"!type":"string","!doc":"<p>The href attribute to use for the underlying anchor link.</p>\n"},"hrefTarget":{"!type":"string","!doc":"<p>The target attribute to use for the underlying anchor link.</p>\n"},"icon":{"!type":"string","!doc":"<p>The path to an icon to display in this item.</p>\n\n<p>Defaults to <code><a href=\"#!/api/Ext-property-BLANK_IMAGE_URL\" rel=\"Ext-property-BLANK_IMAGE_URL\" class=\"docClass\">Ext.BLANK_IMAGE_URL</a></code>.</p>\n"},"iconCls":{"!type":"string","!doc":"<p>A CSS class that specifies a <code>background-image</code> to use as the icon for this item.</p>\n"},"menu":{"!type":"+Ext.menu.Menu","!doc":"<p>The sub-menu associated with this item, if one was configured.</p>\n"},"menuAlign":{"!type":"string","!doc":"<p>The default <a href=\"#!/api/Ext.util.Positionable-method-getAlignToXY\" rel=\"Ext.util.Positionable-method-getAlignToXY\" class=\"docClass\">Ext.util.Positionable.getAlignToXY</a> anchor position value for this\nitem's sub-menu relative to this item's position.</p>\n"},"menuExpandDelay":{"!type":"number","!doc":"<p>The delay in milliseconds before this item's sub-menu expands after this item is moused over.</p>\n"},"menuHideDelay":{"!type":"number","!doc":"<p>The delay in milliseconds before this item's sub-menu hides after this item is moused out.</p>\n"},"plain":{"!type":"bool","!doc":"<p>Whether or not this item is plain text/html with no icon or visual activation.</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.menu.Item-method-getEl\" rel=\"Ext.menu.Item-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.menu.Item-method-getEl\" rel=\"Ext.menu.Item-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.menu.Item-cfg-renderSelectors\" rel=\"Ext.menu.Item-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.menu.Item-cfg-childEls\" rel=\"Ext.menu.Item-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"},"text":{"!type":"string","!doc":"<p>The text/html to display in this item.</p>\n"},"tooltip":{"!type":"string|?","!doc":"<p>The tooltip for the button - can be a string to be used as innerHTML (html tags are accepted) or\nQuickTips config object.</p>\n"},"tooltipType":{"!type":"string","!doc":"<p>The type of tooltip to use. Either 'qtip' for QuickTips or 'title' for title attribute.</p>\n"},"activated":{"!type":"bool","!doc":"<p>Whether or not this item is currently activated</p>\n"},"arrowCls":{"!type":"string"},"childEls":{"!type":"[?]"},"maskOnDisable":{"!type":"bool","!doc":"<p>This is an internal flag that you use when creating custom components. By default this is set to <code>true</code> which means\nthat every component gets a mask when it's disabled. Components like FieldContainer, FieldSet, Field, Button, Tab\noverride this property to <code>false</code> since they want to implement custom disable logic.</p>\n"},"parentMenu":{"!type":"+Ext.menu.Menu","!doc":"<p>The parent Menu of this item.</p>\n"},"beforeDestroy":{"!type":"fn() -> !this","!doc":"<p>Invoked before the Component is destroyed.</p>\n"},"beforeRender":{"!type":"fn() -> !this"},"cancelDeferHide":{"!type":"fn() -> !this"},"clearTip":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"deactivate":{"!type":"fn(item: +Ext.menu.Item, eOpts: ?)","!doc":"<p>Fires when this tiem is deactivated</p>\n"},"deferHideMenu":{"!type":"fn() -> !this"},"deferHideParentMenus":{"!type":"fn() -> !this"},"doExpandMenu":{"!type":"fn() -> !this"},"expandMenu":{"!type":"fn(delay: ?) -> !this"},"getFocusEl":{"!type":"fn() -> +undefined","!doc":"<p>Returns the focus holder element associated with this Component. At the Component base class level, this function returns <code>undefined</code>.</p>\n\n<p>Subclasses which use embedded focusable elements (such as Window, Field and Button) should override this\nfor use by the <a href=\"#!/api/Ext.Component-method-focus\" rel=\"Ext.Component-method-focus\" class=\"docClass\">focus</a> method.</p>\n\n<p>Containers which need to participate in the <a href=\"#!/api/Ext.FocusManager\" rel=\"Ext.FocusManager\" class=\"docClass\">FocusManager</a>'s navigation and Container focusing scheme also\nneed to return a <code>focusEl</code>, although focus is only listened for in this case if the <a href=\"#!/api/Ext.FocusManager\" rel=\"Ext.FocusManager\" class=\"docClass\">FocusManager</a> is <a href=\"#!/api/Ext.FocusManager-method-enable\" rel=\"Ext.FocusManager-method-enable\" class=\"docClass\">enable</a>d.</p>\n"},"getRefItems":{"!type":"fn(deep: ?) -> !this"},"getTipAttr":{"!type":"fn() -> !this"},"hideMenu":{"!type":"fn(delay: ?) -> !this"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>The initComponent template method is an important initialization step for a Component. It is intended to be\nimplemented by each subclass of <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> to provide any needed constructor logic. The\ninitComponent method of the class being created is called first, with each initComponent method\nup the hierarchy to <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> being called thereafter. This makes it easy to implement and,\nif needed, override the constructor logic of the Component at any step in the hierarchy.</p>\n\n<p>The initComponent method <strong>must</strong> contain a call to <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a> in order\nto ensure that the parent class' initComponent method is also called.</p>\n\n<p>All config options passed to the constructor are applied to <code>this</code> before initComponent is called,\nso you can simply access them with <code>this.someOption</code>.</p>\n\n<p>The following example demonstrates using a dynamic string for the text of a button at the time of\ninstantiation of the class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('DynamicButtonText', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n\n    initComponent: function() {\n        this.text = new Date();\n        this.renderTo = <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>();\n        this.callParent();\n    }\n});\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function() {\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('DynamicButtonText');\n});\n</code></pre>\n"},"onClick":{"!type":"fn(e: ?) -> !this"},"onDestroy":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the destroy operation.\nAfter calling the superclass's onDestroy, the Component will be destroyed.</p>\n"},"onRemoved":{"!type":"fn() -> !this","!doc":"<p>Method to manage awareness of when components are removed from their\nrespective Container, firing a <a href=\"#!/api/Ext.menu.Item-event-removed\" rel=\"Ext.menu.Item-event-removed\" class=\"docClass\">removed</a> event. References are properly\ncleaned up after removing a component from its owning container.</p>\n\n<p>Allows addition of behavior when a Component is removed from\nits parent Container. At this stage, the Component has been\nremoved from its parent Container's collection of child items,\nbut has not been destroyed (It will be destroyed if the parent\nContainer's <code>autoDestroy</code> is <code>true</code>, or if the remove call was\npassed a truthy second parameter). After calling the\nsuperclass's <code>onRemoved</code>, the <code>ownerCt</code> and the <code>refOwner</code> will not\nbe present.</p>\n"},"onRender":{"!type":"fn() -> !this","!doc":"<p>Template method called when this Component's DOM structure is created.</p>\n\n<p>At this point, this Component's (and all descendants') DOM structure <em>exists</em> but it has not\nbeen layed out (positioned and sized).</p>\n\n<p>Subclasses which override this to gain access to the structure at render time should\ncall the parent class's method before attempting to access any child elements of the Component.</p>\n"},"setHandler":{"!type":"fn(fn: fn(), scope?: ?) -> !this","!doc":"<p>Sets the <a href=\"#!/api/Ext.menu.Item-event-click\" rel=\"Ext.menu.Item-event-click\" class=\"docClass\">click</a> handler of this item</p>\n"},"setIcon":{"!type":"fn(icon: string) -> !this","!doc":"<p>Sets the <a href=\"#!/api/Ext.menu.Item-cfg-icon\" rel=\"Ext.menu.Item-cfg-icon\" class=\"docClass\">icon</a> on this item.</p>\n"},"setIconCls":{"!type":"fn(iconCls: string) -> !this","!doc":"<p>Sets the <a href=\"#!/api/Ext.menu.Item-cfg-iconCls\" rel=\"Ext.menu.Item-cfg-iconCls\" class=\"docClass\">iconCls</a> of this item</p>\n"},"setMenu":{"!type":"fn(menu: +Ext.menu.Menu|?, destroyMenu?: bool) -> !this","!doc":"<p>Set a child menu for this item. See the <a href=\"#!/api/Ext.menu.Item-cfg-menu\" rel=\"Ext.menu.Item-cfg-menu\" class=\"docClass\">menu</a> configuration.</p>\n"},"setText":{"!type":"fn(text: string) -> !this","!doc":"<p>Sets the <a href=\"#!/api/Ext.menu.Item-cfg-text\" rel=\"Ext.menu.Item-cfg-text\" class=\"docClass\">text</a> of this item</p>\n"},"setTooltip":{"!type":"fn(tooltip: string|?) -> +Ext.menu.Item","!doc":"<p>Sets the tooltip for this menu item.</p>\n"},"activate":{"!type":"fn(item: +Ext.menu.Item, eOpts: ?)","!doc":"<p>Fires when this item is activated</p>\n"},"click":{"!type":"fn(item: +Ext.menu.Item, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when this item is clicked</p>\n"},"iconchange":{"!type":"fn(this: +Ext.menu.Item, oldIcon: string, newIcon: string, eOpts: ?)","!doc":"<p>Fired when the item's icon is changed by the <a href=\"#!/api/Ext.menu.Item-method-setIcon\" rel=\"Ext.menu.Item-method-setIcon\" class=\"docClass\">setIcon</a> or <a href=\"#!/api/Ext.menu.Item-method-setIconCls\" rel=\"Ext.menu.Item-method-setIconCls\" class=\"docClass\">setIconCls</a> methods.</p>\n"},"textchange":{"!type":"fn(this: +Ext.menu.Item, oldText: string, newText: string, eOpts: ?)","!doc":"<p>Fired when the item's text is changed by the <a href=\"#!/api/Ext.menu.Item-method-setText\" rel=\"Ext.menu.Item-method-setText\" class=\"docClass\">setText</a> method.</p>\n"}}},"KeyNav":{"!type":"fn(config: Ext_menu_KeyNav_cfg)","prototype":{"!proto":"Ext.util.KeyNav.prototype","down":{"!type":"fn(e: ?) -> !this"},"enter":{"!type":"fn(e: ?) -> !this"},"escape":{"!type":"fn(e: ?) -> !this"},"focusNextItem":{"!type":"fn(step: ?) -> !this"},"isWhitelisted":{"!type":"fn(item: ?) -> !this"},"left":{"!type":"fn(e: ?) -> !this"},"right":{"!type":"fn(e: ?) -> !this"},"tab":{"!type":"fn(e: ?) -> !this"},"up":{"!type":"fn(e: ?) -> !this"}}},"Manager":{"!doc":"<p>Provides a common registry of all menus on a page.</p>\n","attached":{"!type":"bool"},"groups":{"!type":"?"},"lastShow":{"!type":"?"},"menuSelector":{"!type":"string"},"menus":{"!type":"?"},"get":{"!type":"fn(menu: string|?) -> +Ext.menu.Menu","!doc":"<p>Returns a <a href=\"#!/api/Ext.menu.Menu\" rel=\"Ext.menu.Menu\" class=\"docClass\">Ext.menu.Menu</a> object</p>\n"},"hideAll":{"!type":"fn() -> bool","!doc":"<p>Hides all menus that are currently visible</p>\n"},"init":{"!type":"fn() -> !this"},"onBeforeHide":{"!type":"fn(m: ?) -> !this"},"onBeforeShow":{"!type":"fn(m: ?) -> !this"},"onCheckChange":{"!type":"fn(menuItem: ?, state: ?) -> !this"},"onHide":{"!type":"fn(m: ?) -> !this"},"onMouseDown":{"!type":"fn(e: ?) -> !this"},"onShow":{"!type":"fn(m: ?) -> !this"},"register":{"!type":"fn(menu: ?) -> !this"},"registerCheckable":{"!type":"fn(menuItem: ?) -> !this"},"unregister":{"!type":"fn(menu: ?) -> !this"},"unregisterCheckable":{"!type":"fn(menuItem: ?) -> !this"}},"Menu":{"!doc":"<p>A menu object. This is the container to which you may add <a href=\"#!/api/Ext.menu.Item\" rel=\"Ext.menu.Item\" class=\"docClass\">menu items</a>.</p>\n\n<p>Menus may contain either <a href=\"#!/api/Ext.menu.Item\" rel=\"Ext.menu.Item\" class=\"docClass\">menu items</a>, or general <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Components</a>.\nMenus may also contain <a href=\"#!/api/Ext.panel.AbstractPanel-cfg-dockedItems\" rel=\"Ext.panel.AbstractPanel-cfg-dockedItems\" class=\"docClass\">docked items</a> because it extends <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>.</p>\n\n<p>By default, non <a href=\"#!/api/Ext.menu.Item\" rel=\"Ext.menu.Item\" class=\"docClass\">menu items</a> are indented so that they line up with the text of menu items. clearing\nthe icon column. To make a contained general <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Component</a> left aligned configure the child\nComponent with `indent: false.</p>\n\n<p>By default, Menus are absolutely positioned, floating Components. By configuring a Menu with <code><a href=\"#!/api/Ext.menu.Menu-cfg-floating\" rel=\"Ext.menu.Menu-cfg-floating\" class=\"docClass\">floating</a>: false</code>,\na Menu may be used as a child of a <a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Container</a>.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.menu.Menu\" rel=\"Ext.menu.Menu\" class=\"docClass\">Ext.menu.Menu</a>', {\n    width: 100,\n    margin: '0 0 10 0',\n    floating: false,  // usually you want this set to True (default)\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),  // usually rendered by it's containing component\n    items: [{\n        text: 'regular item 1'\n    },{\n        text: 'regular item 2'\n    },{\n        text: 'regular item 3'\n    }]\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.menu.Menu\" rel=\"Ext.menu.Menu\" class=\"docClass\">Ext.menu.Menu</a>', {\n    width: 100,\n    plain: true,\n    floating: false,  // usually you want this set to True (default)\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),  // usually rendered by it's containing component\n    items: [{\n        text: 'plain item 1'\n    },{\n        text: 'plain item 2'\n    },{\n        text: 'plain item 3'\n    }]\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_menu_Menu_cfg)","prototype":{"!proto":"Ext.panel.Panel.prototype","allowOtherMenus":{"!type":"bool","!doc":"<p>True to allow multiple menus to be displayed at the same time.</p>\n"},"ariaRole":{"!type":"string"},"autoRender":{"!type":"bool","!doc":"<p>Floating is true, so autoRender always happens.</p>\n"},"constrain":{"!type":"bool","!doc":"<p>Menus are constrained to the document body by default.</p>\n"},"enableKeyNav":{"!type":"bool","!doc":"<p>True to enable keyboard navigation for controlling the menu.\nThis option should generally be disabled when form fields are\nbeing used inside the menu.</p>\n"},"floating":{"!type":"bool","!doc":"<p>A Menu configured as <code>floating: true</code> (the default) will be rendered as an absolutely positioned,\n<a href=\"#!/api/Ext.Component-cfg-floating\" rel=\"Ext.Component-cfg-floating\" class=\"docClass\">floating</a> <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Component</a>. If configured as <code>floating: false</code>, the Menu may be\nused as a child item of another <a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Container</a>.</p>\n"},"hidden":{"!type":"bool","!doc":"<p>True to initially render the Menu as hidden, requiring to be shown manually.</p>\n\n<p>Defaults to <code>true</code> when <code>floating: true</code>, and defaults to <code>false</code> when <code>floating: false</code>.</p>\n"},"hideMode":{"!type":"string","!doc":"<p>A String which specifies how this Component's encapsulating DOM element will be hidden. Values may be:</p>\n\n<ul>\n<li><code>'display'</code> : The Component will be hidden using the <code>display: none</code> style.</li>\n<li><code>'visibility'</code> : The Component will be hidden using the <code>visibility: hidden</code> style.</li>\n<li><code>'offsets'</code> : The Component will be hidden by absolutely positioning it out of the visible area of the document.\nThis is useful when a hidden Component must maintain measurable dimensions. Hiding using <code>display</code> results in a\nComponent having zero dimensions.</li>\n</ul>\n\n"},"ignoreParentClicks":{"!type":"bool","!doc":"<p>True to ignore clicks on any item in this menu that is a parent item (displays a submenu)\nso that the submenu is not dismissed when clicking the parent item.</p>\n"},"layout":{"!type":"+Ext.enums.Layout|?"},"minWidth":{"!type":"number","!doc":"<p>The minimum width of the Menu. The default minWidth only applies when the <a href=\"#!/api/Ext.menu.Menu-cfg-floating\" rel=\"Ext.menu.Menu-cfg-floating\" class=\"docClass\">floating</a> config is true.</p>\n"},"plain":{"!type":"bool","!doc":"<p>True to remove the incised line down the left side of the menu and to not indent general Component items.</p>\n\n<p><a href=\"#!/api/Ext.menu.Item\" rel=\"Ext.menu.Item\" class=\"docClass\">MenuItem</a>s will <em>always</em> have space at their start for an icon. With the <code>plain</code> setting,\nnon <a href=\"#!/api/Ext.menu.Item\" rel=\"Ext.menu.Item\" class=\"docClass\">MenuItem</a> child components will not be indented to line up.</p>\n\n<p>Basically, <code>plain:true</code> makes a Menu behave more like a regular <a href=\"#!/api/Ext.layout.container.HBox\" rel=\"Ext.layout.container.HBox\" class=\"docClass\">HBox layout</a>\n<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Panel</a> which just has the same background as a Menu.</p>\n\n<p>See also the <a href=\"#!/api/Ext.menu.Menu-cfg-showSeparator\" rel=\"Ext.menu.Menu-cfg-showSeparator\" class=\"docClass\">showSeparator</a> config.</p>\n"},"showSeparator":{"!type":"bool","!doc":"<p>True to show the icon separator.</p>\n"},"defaultMinWidth":{"!type":"number"},"isMenu":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated Menu, or subclass thereof.</p>\n"},"parentMenu":{"!type":"+Ext.menu.Menu","!doc":"<p>The parent Menu of this Menu.</p>\n"},"afterShow":{"!type":"fn() -> !this","!doc":"<p>Invoked after the Component is shown (after <a href=\"#!/api/Ext.menu.Menu-method-onShow\" rel=\"Ext.menu.Menu-method-onShow\" class=\"docClass\">onShow</a> is called).</p>\n\n<p>Gets passed the same parameters as <a href=\"#!/api/Ext.menu.Menu-method-show\" rel=\"Ext.menu.Menu-method-show\" class=\"docClass\">show</a>.</p>\n"},"beforeRender":{"!type":"fn() -> !this"},"beforeShow":{"!type":"fn() -> !this","!doc":"<p>Invoked before the Component is shown.</p>\n"},"canActivateItem":{"!type":"fn(item: ?) -> bool","!doc":"<p>Returns whether a menu item can be activated or not.</p>\n"},"deactivateActiveItem":{"!type":"fn(andBlurFocusedItem: ?) -> !this","!doc":"<p>Deactivates the current active item on the menu, if one exists.</p>\n"},"getFocusEl":{"!type":"fn() -> +Ext.Element","!doc":"<p>Returns the focus holder element associated with this Container. By default, this is the Container's target\nelement. Subclasses which use embedded focusable elements (such as Window and Button) should override this for use\nby the <a href=\"#!/api/Ext.menu.Menu-method-focus\" rel=\"Ext.menu.Menu-method-focus\" class=\"docClass\">focus</a> method.</p>\n"},"getHierarchyState":{"!type":"fn() -> !this","!doc":"<p>As menus are never contained, a Menu's visibility only ever depends upon its own hidden state.\nIgnore hiddenness from the ancestor hierarchy, override it with local hidden state.</p>\n"},"getItemFromEvent":{"!type":"fn(e: ?) -> !this"},"getRefOwner":{"!type":"fn() -> !this","!doc":"<p>Used by <a href=\"#!/api/Ext.ComponentQuery\" rel=\"Ext.ComponentQuery\" class=\"docClass\">ComponentQuery</a>, and the <a href=\"#!/api/Ext.AbstractComponent-method-up\" rel=\"Ext.AbstractComponent-method-up\" class=\"docClass\">up</a> method to find the\nowning Component in the linkage hierarchy.</p>\n\n<p>By default this returns the Container which contains this Component.</p>\n\n<p>This may be overriden by Component authors who implement ownership hierarchies which are not\nbased upon ownerCt, such as BoundLists being owned by Fields or Menus being owned by Buttons.</p>\n"},"hide":{"!type":"fn() -> +Ext.Component","!doc":"<p>Hides this Component, setting it to invisible using the configured <a href=\"#!/api/Ext.menu.Menu-cfg-hideMode\" rel=\"Ext.menu.Menu-cfg-hideMode\" class=\"docClass\">hideMode</a>.</p>\n"},"initHierarchyEvents":{"!type":"fn() -> !this","!doc":"<p>Menus do not have owning containers on which they depend for visibility. They stand outside\nany container hierarchy.</p>\n"},"isVisible":{"!type":"fn() -> bool","!doc":"<p>Menus are never contained, and must not ascertain their visibility from the ancestor hierarchy</p>\n"},"lookupComponent":{"!type":"fn(cmp: ?) -> !this"},"lookupItemFromObject":{"!type":"fn(cmp: ?) -> !this"},"lookupItemFromString":{"!type":"fn(cmp: ?) -> !this"},"onBoxReady":{"!type":"fn() -> !this"},"onClick":{"!type":"fn(e: ?) -> !this"},"onDestroy":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the destroy operation.\nAfter calling the superclass's onDestroy, the Component will be destroyed.</p>\n"},"onMouseLeave":{"!type":"fn(e: ?) -> !this"},"onMouseOver":{"!type":"fn(e: ?) -> !this"},"registerWithOwnerCt":{"!type":"fn() -> !this","!doc":"<p>Private implementation for Menus. They are a special case.\nThey are always global floaters, never contained.</p>\n"},"setActiveItem":{"!type":"fn(item: ?) -> !this"},"setVerticalPosition":{"!type":"fn() -> !this","!doc":"<p>adjust the vertical position of the menu if the height of the\nmenu is equal (or greater than) the viewport size</p>\n"},"showBy":{"!type":"fn(cmp: ?, pos: ?, off: ?) -> +Ext.Component","!doc":"<p>Shows this component by the specified <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Component</a> or <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Element</a>.\nUsed when this component is <a href=\"#!/api/Ext.menu.Menu-cfg-floating\" rel=\"Ext.menu.Menu-cfg-floating\" class=\"docClass\">floating</a>.</p>\n"},"click":{"!type":"fn(menu: +Ext.menu.Menu, item: +Ext.Component, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when this menu is clicked</p>\n"},"mouseenter":{"!type":"fn(menu: +Ext.menu.Menu, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when the mouse enters this menu</p>\n"},"mouseleave":{"!type":"fn(menu: +Ext.menu.Menu, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when the mouse leaves this menu</p>\n"},"mouseover":{"!type":"fn(menu: +Ext.menu.Menu, item: +Ext.Component, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when the mouse is hovering over this menu</p>\n"}}},"Separator":{"!doc":"<p>Adds a separator bar to a menu, used to divide logical groups of menu items. Generally you will\nadd one of these by using \"-\" in your call to add() or in your items config rather than creating one directly.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.menu.Menu\" rel=\"Ext.menu.Menu\" class=\"docClass\">Ext.menu.Menu</a>', {\n    width: 100,\n    height: 100,\n    floating: false,  // usually you want this set to True (default)\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),  // usually rendered by it's containing component\n    items: [{\n        text: 'icon item',\n        iconCls: 'add16'\n    },{\n        xtype: 'menuseparator'\n    },{\n       text: 'separator above'\n    },{\n       text: 'regular item'\n    }]\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_menu_Separator_cfg)","prototype":{"!proto":"Ext.menu.Item.prototype","activeCls":{"!type":"string"},"canActivate":{"!type":"bool"},"clickHideDelay":{"!type":"bool"},"destroyMenu":{"!type":"bool"},"disabledCls":{"!type":"bool"},"hideOnClick":{"!type":"bool"},"href":{"!type":"string"},"hrefTarget":{"!type":"string"},"icon":{"!type":"string"},"iconCls":{"!type":"string"},"menu":{"!type":"?"},"menuAlign":{"!type":"string"},"menuExpandDelay":{"!type":"number"},"menuHideDelay":{"!type":"number"},"plain":{"!type":"bool"},"separatorCls":{"!type":"string","!doc":"<p>The CSS class used by the separator item to show the incised line.</p>\n"},"text":{"!type":"string"},"beforeRender":{"!type":"fn(ct: ?, pos: ?) -> !this"}}}},"panel":{"AbstractPanel":{"!doc":"<p>A base class which provides methods common to Panel classes across the Sencha product range.</p>\n\n<p>Please refer to sub class's documentation</p>\n","!type":"fn(config: +Ext.Element|string|Ext_panel_AbstractPanel_cfg)","prototype":{"!proto":"Ext.container.Container.prototype","baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this panel's element.</p>\n"},"bodyBorder":{"!type":"bool","!doc":"<p>A shortcut to add or remove the border on the body of a panel. In the classic theme\nthis only applies to a panel which has the <a href=\"#!/api/Ext.panel.AbstractPanel-cfg-frame\" rel=\"Ext.panel.AbstractPanel-cfg-frame\" class=\"docClass\">frame</a> configuration set to <code>true</code>.</p>\n"},"bodyCls":{"!type":"string|[string]","!doc":"<p>A CSS class, space-delimited string of classes, or array of classes to be applied to the panel's body element.\nThe following examples are all valid:</p>\n\n<pre><code>bodyCls: 'foo'\nbodyCls: 'foo bar'\nbodyCls: ['foo', 'bar']\n</code></pre>\n\n"},"bodyPadding":{"!type":"number|string","!doc":"<p>A shortcut for setting a padding style on the body element. The value can either be\na number to be applied to all sides, or a normal css string describing padding.\nDefaults to <code>undefined</code>.</p>\n"},"bodyStyle":{"!type":"string|?|fn()","!doc":"<p>Custom CSS styles to be applied to the panel's body element, which can be supplied as a valid CSS style string,\nan object containing style property name/value pairs or a function that returns such a string or object.\nFor example, these two formats are interpreted to be equivalent:</p>\n\n<pre><code>bodyStyle: 'background:#ffc; padding:10px;'\n\nbodyStyle: {\n    background: '#ffc',\n    padding: '10px'\n}\n</code></pre>\n\n"},"border":{"!type":"number|string|bool","!doc":"<p>Specifies the border size for this component. The border can be a single numeric value to apply to all sides or it can\nbe a CSS style specification for each style, for example: '10 5 3 10' (top, right, bottom, left).</p>\n\n<p>For components that have no border by default, setting this won't make the border appear by itself.\nYou also need to specify border color and style:</p>\n\n<pre><code>border: 5,\nstyle: {\n    borderColor: 'red',\n    borderStyle: 'solid'\n}\n</code></pre>\n\n<p>To turn off the border, use <code>border: false</code>.</p>\n"},"componentLayout":{"!type":"string|?","!doc":"<p>The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout\nmanager which sizes a Component's internal structure in response to the Component being sized.</p>\n\n<p>Generally, developers will not use this configuration as all provided Components which need their internal\nelements sizing (Such as <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">input fields</a>) come with their own componentLayout managers.</p>\n\n<p>The <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used on instances of the base <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\nclass which simply sizes the Component's encapsulating element to the height and width specified in the\n<a href=\"#!/api/Ext.panel.AbstractPanel-method-setSize\" rel=\"Ext.panel.AbstractPanel-method-setSize\" class=\"docClass\">setSize</a> method.</p>\n"},"dockedItems":{"!type":"?|[?]","!doc":"<p>A component or series of components to be added as docked items to this panel.\nThe docked items can be docked to either the top, right, left or bottom of a panel.\nThis is typically used for things like toolbars or tab bars:</p>\n\n<pre><code>var panel = new <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>({\n    fullscreen: true,\n    dockedItems: [{\n        xtype: 'toolbar',\n        dock: 'top',\n        items: [{\n            text: 'Docked to the top'\n        }]\n    }]\n});</code></pre>\n\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.panel.AbstractPanel-method-getEl\" rel=\"Ext.panel.AbstractPanel-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.panel.AbstractPanel-method-getEl\" rel=\"Ext.panel.AbstractPanel-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.panel.AbstractPanel-cfg-renderSelectors\" rel=\"Ext.panel.AbstractPanel-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.panel.AbstractPanel-cfg-childEls\" rel=\"Ext.panel.AbstractPanel-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"},"shrinkWrapDock":{"!type":"bool|number","!doc":"<p>Allows for this panel to include the <a href=\"#!/api/Ext.panel.AbstractPanel-cfg-dockedItems\" rel=\"Ext.panel.AbstractPanel-cfg-dockedItems\" class=\"docClass\">dockedItems</a> when trying to determine the overall\nsize of the panel. This option is only applicable when this panel is also shrink wrapping in the\nsame dimensions. See <a href=\"#!/api/Ext.AbstractComponent-cfg-shrinkWrap\" rel=\"Ext.AbstractComponent-cfg-shrinkWrap\" class=\"docClass\">Ext.AbstractComponent.shrinkWrap</a> for an explanation of the configuration options.</p>\n"},"body":{"!type":"+Ext.dom.Element","!doc":"<p>The Panel's body <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Element</a> which may be used to contain HTML content.\nThe content may be specified in the <a href=\"#!/api/Ext.panel.AbstractPanel-cfg-html\" rel=\"Ext.panel.AbstractPanel-cfg-html\" class=\"docClass\">html</a> config, or it may be loaded using the\n<a href=\"#!/api/Ext.panel.AbstractPanel-cfg-loader\" rel=\"Ext.panel.AbstractPanel-cfg-loader\" class=\"docClass\">loader</a> config. Read-only.</p>\n\n<p>If this is used to load visible HTML elements in either way, then\nthe Panel may not be used as a Layout for hosting nested Panels.</p>\n\n<p>If this Panel is intended to be used as the host of a Layout (See <a href=\"#!/api/Ext.panel.AbstractPanel-cfg-layout\" rel=\"Ext.panel.AbstractPanel-cfg-layout\" class=\"docClass\">layout</a>\nthen the body Element must not be loaded or changed - it is under the control\nof the Panel's Layout.</p>\n"},"bodyPosProps":{"!type":"?"},"childEls":{"!type":"[?]"},"contentPaddingProperty":{"!type":"string","!doc":"<p>The name of the padding property that is used by the layout to manage\npadding.  See <a href=\"#!/api/Ext.layout.container.Auto-property-managePadding\" rel=\"Ext.layout.container.Auto-property-managePadding\" class=\"docClass\">managePadding</a></p>\n"},"emptyArray":{"!type":"[?]"},"isPanel":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated Panel, or subclass thereof.</p>\n"},"addBodyCls":{"!type":"fn(cls: string) -> +Ext.panel.Panel","!doc":"<p>Adds a CSS class to the body element. If not rendered, the class will\nbe added when the panel is rendered.</p>\n"},"addUIClsToElement":{"!type":"fn(cls: ?) -> !this","!doc":"<p>inherit docs</p>\n"},"addUIToElement":{"!type":"fn() -> !this","!doc":"<p>inherit docs</p>\n"},"applyTargetCls":{"!type":"fn(targetCls: ?) -> !this","!doc":"<p>The targetCls is a CSS class that the layout needs added to the targetEl. The targetEl is where the container's\nchildren are rendered and is usually just the main el. Some containers (e.g. panels) use a body instead.</p>\n\n<p>In general, if a class overrides getTargetEl it will also need to override this method. This is necessary to\navoid a post-render step to add the targetCls.</p>\n"},"beforeDestroy":{"!type":"fn() -> !this","!doc":"<p>Invoked before the Component is destroyed.</p>\n"},"getCollapsedDockedItems":{"!type":"fn() -> !this"},"getComponent":{"!type":"fn(comp: string|number) -> +Ext.Component","!doc":"<p>Attempts a default component lookup (see <a href=\"#!/api/Ext.container.Container-method-getComponent\" rel=\"Ext.container.Container-method-getComponent\" class=\"docClass\">Ext.container.Container.getComponent</a>). If the component is not found in the normal\nitems, the dockedItems are searched and the matched component (if any) returned (see <a href=\"#!/api/Ext.panel.AbstractPanel-method-getDockedComponent\" rel=\"Ext.panel.AbstractPanel-method-getDockedComponent\" class=\"docClass\">getDockedComponent</a>). Note that docked\nitems will only be matched by component id or itemId -- if you pass a numeric index only non-docked child components will be searched.</p>\n"},"getProtoBody":{"!type":"fn() -> !this"},"getRefItems":{"!type":"fn(deep: ?) -> !this","!doc":"<p>Used by <a href=\"#!/api/Ext.ComponentQuery\" rel=\"Ext.ComponentQuery\" class=\"docClass\">ComponentQuery</a>, <a href=\"#!/api/Ext.panel.AbstractPanel-method-child\" rel=\"Ext.panel.AbstractPanel-method-child\" class=\"docClass\">child</a> and <a href=\"#!/api/Ext.panel.AbstractPanel-method-down\" rel=\"Ext.panel.AbstractPanel-method-down\" class=\"docClass\">down</a> to retrieve all of the items\nwhich can potentially be considered a child of this Container.</p>\n\n<p>This may be overriden by Components which have ownership of Components\nthat are not contained in the <a href=\"#!/api/Ext.panel.AbstractPanel-property-items\" rel=\"Ext.panel.AbstractPanel-property-items\" class=\"docClass\">items</a> collection.</p>\n\n<p>NOTE: IMPORTANT note for maintainers:\nItems are returned in tree traversal order. Each item is appended to the result array\nfollowed by the results of that child's getRefItems call.\nFloating child items are appended after internal child items.</p>\n"},"getTargetEl":{"!type":"fn() -> !this","!doc":"<p>This is used to determine where to insert the 'html', 'contentEl' and 'items' in this component.</p>\n"},"initBodyBorder":{"!type":"fn() -> !this"},"initBodyStyles":{"!type":"fn() -> string","!doc":"<p>Parses the <a href=\"#!/api/Ext.panel.AbstractPanel-cfg-bodyStyle\" rel=\"Ext.panel.AbstractPanel-cfg-bodyStyle\" class=\"docClass\">bodyStyle</a> config if available to create a style string that will be applied to the body element.\nThis also includes <a href=\"#!/api/Ext.panel.AbstractPanel-cfg-bodyPadding\" rel=\"Ext.panel.AbstractPanel-cfg-bodyPadding\" class=\"docClass\">bodyPadding</a> and <a href=\"#!/api/Ext.panel.AbstractPanel-cfg-bodyBorder\" rel=\"Ext.panel.AbstractPanel-cfg-bodyBorder\" class=\"docClass\">bodyBorder</a> if available.</p>\n"},"initBorderProps":{"!type":"fn() -> !this"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>The initComponent template method is an important initialization step for a Component. It is intended to be\nimplemented by each subclass of <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> to provide any needed constructor logic. The\ninitComponent method of the class being created is called first, with each initComponent method\nup the hierarchy to <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> being called thereafter. This makes it easy to implement and,\nif needed, override the constructor logic of the Component at any step in the hierarchy.</p>\n\n<p>The initComponent method <strong>must</strong> contain a call to <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a> in order\nto ensure that the parent class' initComponent method is also called.</p>\n\n<p>All config options passed to the constructor are applied to <code>this</code> before initComponent is called,\nso you can simply access them with <code>this.someOption</code>.</p>\n\n<p>The following example demonstrates using a dynamic string for the text of a button at the time of\ninstantiation of the class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('DynamicButtonText', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n\n    initComponent: function() {\n        this.text = new Date();\n        this.renderTo = <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>();\n        this.callParent();\n    }\n});\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function() {\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('DynamicButtonText');\n});\n</code></pre>\n"},"initItems":{"!type":"fn() -> !this"},"initRenderData":{"!type":"fn() -> ?","!doc":"<p>Initialized the renderData to be used when rendering the renderTpl.</p>\n"},"removeBodyCls":{"!type":"fn(cls: string) -> +Ext.panel.Panel","!doc":"<p>Removes a CSS class from the body element.</p>\n"},"removeUIClsFromElement":{"!type":"fn(cls: ?) -> !this","!doc":"<p>inherit docs</p>\n"},"removeUIFromElement":{"!type":"fn() -> !this","!doc":"<p>inherit docs</p>\n"},"setBodyStyle":{"!type":"fn(style: +Mixed, value: string) -> +Ext.panel.Panel","!doc":"<p>Sets the body style according to the passed parameters.</p>\n"},"setupRenderTpl":{"!type":"fn(renderTpl: ?) -> !this"}}},"DD":{"!doc":"<p>DD implementation for Panels.</p>\n","!type":"fn(panel: ?, cfg: ?)","prototype":{"!proto":"Ext.dd.DragSource.prototype","afterInvalidDrop":{"!type":"fn(e: +Event, id: string)","!doc":"<p>An empty function by default, but provided so that you can perform a custom action\nafter an invalid drop has occurred by providing an implementation.</p>\n"},"autoOffset":{"!type":"fn(x: ?, y: ?) -> !this","!doc":"<p>Sets the pointer offset to the distance between the linked element's top\nleft corner and the location the element was clicked.</p>\n"},"b4MouseDown":{"!type":"fn(e: ?) -> !this","!doc":"<p>overrides <a href=\"#!/api/Ext.dd.DragDrop\" rel=\"Ext.dd.DragDrop\" class=\"docClass\">Ext.dd.DragDrop</a></p>\n"},"b4StartDrag":{"!type":"fn(x: ?, y: ?) -> !this","!doc":"<p>overrides <a href=\"#!/api/Ext.dd.DragDrop\" rel=\"Ext.dd.DragDrop\" class=\"docClass\">Ext.dd.DragDrop</a></p>\n"},"createFrame":{"!type":"fn() -> !this","!doc":"<p>Creates the proxy element if it does not yet exist</p>\n"},"endDrag":{"!type":"fn(e: ?) -> !this","!doc":"<p>overrides <a href=\"#!/api/Ext.dd.DragDrop\" rel=\"Ext.dd.DragDrop\" class=\"docClass\">Ext.dd.DragDrop</a>\nBy default we try to move the element to the last location of the frame.\nThis is so that the default behavior mirrors that of <a href=\"#!/api/Ext.dd.DD\" rel=\"Ext.dd.DD\" class=\"docClass\">Ext.dd.DD</a>.</p>\n"},"getDragEl":{"!type":"fn(e: ?) -> +HTMLElement","!doc":"<p>Returns a reference to the actual element to drag.  By default this is\nthe same as the html element, but it can be assigned to another\nelement. An example of this can be found in <a href=\"#!/api/Ext.dd.DDProxy\" rel=\"Ext.dd.DDProxy\" class=\"docClass\">Ext.dd.DDProxy</a></p>\n"},"onInitDrag":{"!type":"fn(x: ?, y: ?) -> !this"},"onInvalidDrop":{"!type":"fn(target: ?, e: ?, id: ?) -> !this","!doc":"<p>Override this, we don't want to repair on an \"invalid\" drop, the panel\nshould main it's position</p>\n"},"setupEl":{"!type":"fn(panel: ?) -> !this"},"showFrame":{"!type":"fn(iPageX: number, iPageY: number) -> !this","!doc":"<p>Resizes the drag frame to the dimensions of the clicked object, positions\nit over the object, and finally displays it</p>\n"},"startDrag":{"!type":"fn() -> !this","!doc":"<p>Abstract method called after a drag/drop object is clicked\nand the drag or mousedown time thresholds have beeen met.</p>\n"}}},"Header":{"!doc":"<p>Simple header class which is used for on <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a> and <a href=\"#!/api/Ext.window.Window\" rel=\"Ext.window.Window\" class=\"docClass\">Ext.window.Window</a>.</p>\n","!type":"fn(config: +Ext.Element|string|Ext_panel_Header_cfg)","prototype":{"!proto":"Ext.container.Container.prototype","componentLayout":{"!type":"string|?","!doc":"<p>The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout\nmanager which sizes a Component's internal structure in response to the Component being sized.</p>\n\n<p>Generally, developers will not use this configuration as all provided Components which need their internal\nelements sizing (Such as <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">input fields</a>) come with their own componentLayout managers.</p>\n\n<p>The <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used on instances of the base <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\nclass which simply sizes the Component's encapsulating element to the height and width specified in the\n<a href=\"#!/api/Ext.panel.Header-method-setSize\" rel=\"Ext.panel.Header-method-setSize\" class=\"docClass\">setSize</a> method.</p>\n"},"defaultType":{"!type":"string","!doc":"<p>The default <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">xtype</a> of child Components to create in this Container when\na child item is specified as a raw configuration object, rather than as an instantiated Component.</p>\n"},"glyph":{"!type":"number|string","!doc":"<p>A numeric unicode character code to use as the icon for the panel header. The\ndefault font-family for glyphs can be set globally using\n<a href=\"#!/api/Ext-method-setGlyphFontFamily\" rel=\"Ext-method-setGlyphFontFamily\" class=\"docClass\">Ext.setGlyphFontFamily()</a>. Alternatively, this\nconfig option accepts a string with the charCode and font-family separated by the\n<code>@</code> symbol. For example '65@My Font Family'.</p>\n"},"icon":{"!type":"string","!doc":"<p>Path to image for an icon in the header. Used for displaying an icon to the left of a title.</p>\n"},"iconCls":{"!type":"string","!doc":"<p>CSS class for an icon in the header. Used for displaying an icon to the left of a title.</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.panel.Header-method-getEl\" rel=\"Ext.panel.Header-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.panel.Header-method-getEl\" rel=\"Ext.panel.Header-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.panel.Header-cfg-renderSelectors\" rel=\"Ext.panel.Header-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.panel.Header-cfg-childEls\" rel=\"Ext.panel.Header-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"},"shrinkWrap":{"!type":"bool|number","!doc":"<p>If this property is a number, it is interpreted as follows:</p>\n\n<ul>\n<li>0: Neither width nor height depend on content. This is equivalent to <code>false</code>.</li>\n<li>1: Width depends on content (shrink wraps), but height does not.</li>\n<li>2: Height depends on content (shrink wraps), but width does not. The default.</li>\n<li>3: Both width and height depend on content (shrink wrap). This is equivalent to <code>true</code>.</li>\n</ul>\n\n\n<p>In CSS terms, shrink-wrap width is analogous to an inline-block element as opposed\nto a block-level element. Some container layouts always shrink-wrap their children,\neffectively ignoring this property (e.g., <a href=\"#!/api/Ext.layout.container.HBox\" rel=\"Ext.layout.container.HBox\" class=\"docClass\">Ext.layout.container.HBox</a>,\n<a href=\"#!/api/Ext.layout.container.VBox\" rel=\"Ext.layout.container.VBox\" class=\"docClass\">Ext.layout.container.VBox</a>, <a href=\"#!/api/Ext.layout.component.Dock\" rel=\"Ext.layout.component.Dock\" class=\"docClass\">Ext.layout.component.Dock</a>).</p>\n"},"title":{"!type":"string","!doc":"<p>The title text to display.</p>\n"},"titleAlign":{"!type":"string","!doc":"<p>The alignment of the title text within the available space between the\nicon and the tools.</p>\n\n<p>May be <code>\"left\"</code>, <code>\"right\"</code> or <code>\"center\"</code>. Defaults to the browser's natural\nbehavior depending on the css direction property - <code>\"left\"</code> when direction\nis ltr  and <code>\"right\"</code> when direction is rtl\n(see <a href=\"#!/api/Ext.AbstractComponent-cfg-rtl\" rel=\"Ext.AbstractComponent-cfg-rtl\" class=\"docClass\">Ext.AbstractComponent.rtl</a>).</p>\n"},"titlePosition":{"!type":"number","!doc":"<p>The ordinal position among the header items (tools and other components specified using the <a href=\"#!/api/Ext.panel.Header-cfg-items\" rel=\"Ext.panel.Header-cfg-items\" class=\"docClass\">items</a> config)\nat which the title component is inserted. See <a href=\"#!/api/Ext.panel.Panel-cfg-header\" rel=\"Ext.panel.Panel-cfg-header\" class=\"docClass\">Panel's header config</a>.</p>\n\n<p>If not specified, the title is inserted after any <a href=\"#!/api/Ext.panel.Header-cfg-items\" rel=\"Ext.panel.Header-cfg-items\" class=\"docClass\">items</a>, but <em>before</em> any <a href=\"#!/api/Ext.panel.Panel-cfg-tools\" rel=\"Ext.panel.Panel-cfg-tools\" class=\"docClass\">Ext.panel.Panel.tools</a>.</p>\n\n<p>Note that if an <a href=\"#!/api/Ext.panel.Header-cfg-icon\" rel=\"Ext.panel.Header-cfg-icon\" class=\"docClass\">icon</a> or <a href=\"#!/api/Ext.panel.Header-cfg-iconCls\" rel=\"Ext.panel.Header-cfg-iconCls\" class=\"docClass\">iconCls</a> has been configured, then the icon component will be the\nfirst item before all specified tools or <a href=\"#!/api/Ext.panel.Header-cfg-items\" rel=\"Ext.panel.Header-cfg-items\" class=\"docClass\">items</a>. This configuration does not include the icon.</p>\n"},"headerCls":{"!type":"string","!doc":"<p>a class for styling that is shared between panel and window headers</p>\n"},"headingTpl":{"!type":"[?]"},"indicateDrag":{"!type":"bool"},"isHeader":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated Header, or subclass thereof.</p>\n"},"weight":{"!type":"?"},"addTool":{"!type":"fn(tool: ?) -> !this","!doc":"<p>Add a tool to the header</p>\n"},"addUIClsToElement":{"!type":"fn(cls: ?) -> !this","!doc":"<p>inherit docs</p>\n"},"addUIToElement":{"!type":"fn() -> !this","!doc":"<p>inherit docs</p>\n"},"adjustTitlePosition":{"!type":"fn() -> !this"},"afterLayout":{"!type":"fn() -> !this","!doc":"<p>Invoked after the Container has laid out (and rendered if necessary)\nits child Components.</p>\n"},"applyTargetCls":{"!type":"fn(targetCls: ?) -> !this","!doc":"<p>The targetCls is a CSS class that the layout needs added to the targetEl. The targetEl is where the container's\nchildren are rendered and is usually just the main el. Some containers (e.g. panels) use a body instead.</p>\n\n<p>In general, if a class overrides getTargetEl it will also need to override this method. This is necessary to\navoid a post-render step to add the targetCls.</p>\n"},"beforeLayout":{"!type":"fn() -> !this","!doc":"<p>Occurs before componentLayout is run. In previous releases, this method could\nreturn <code>false</code> to prevent its layout but that is not supported in Ext JS 4.1 or\nhigher. This method is simply a notification of the impending layout to give the\ncomponent a chance to adjust the DOM. Ideally, DOM reads should be avoided at this\ntime to reduce expensive document reflows.</p>\n"},"beforeRender":{"!type":"fn() -> !this"},"fireClickEvent":{"!type":"fn(type: ?, e: ?) -> !this"},"getDockName":{"!type":"fn() -> !this"},"getFocusEl":{"!type":"fn() -> +Ext.Element","!doc":"<p>Returns the focus holder element associated with this Container. By default, this is the Container's target\nelement. Subclasses which use embedded focusable elements (such as Window and Button) should override this for use\nby the <a href=\"#!/api/Ext.panel.Header-method-focus\" rel=\"Ext.panel.Header-method-focus\" class=\"docClass\">focus</a> method.</p>\n"},"getFramingInfoCls":{"!type":"fn() -> !this"},"getMinWidth":{"!type":"fn() -> !this","!doc":"<p>Used when shrink wrapping a Panel to either content width or header width.\nThis returns the minimum width required to display the header, icon and tools.\n<strong>This is only intended for use with horizontal headers.</strong></p>\n"},"getTargetEl":{"!type":"fn() -> !this","!doc":"<p>This is used to determine where to insert the 'html', 'contentEl' and 'items' in this component.</p>\n"},"getTools":{"!type":"fn() -> [+Ext.panel.Tool]","!doc":"<p>Gets the tools for this header.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>The initComponent template method is an important initialization step for a Component. It is intended to be\nimplemented by each subclass of <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> to provide any needed constructor logic. The\ninitComponent method of the class being created is called first, with each initComponent method\nup the hierarchy to <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> being called thereafter. This makes it easy to implement and,\nif needed, override the constructor logic of the Component at any step in the hierarchy.</p>\n\n<p>The initComponent method <strong>must</strong> contain a call to <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a> in order\nto ensure that the parent class' initComponent method is also called.</p>\n\n<p>All config options passed to the constructor are applied to <code>this</code> before initComponent is called,\nso you can simply access them with <code>this.someOption</code>.</p>\n\n<p>The following example demonstrates using a dynamic string for the text of a button at the time of\ninstantiation of the class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('DynamicButtonText', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n\n    initComponent: function() {\n        this.text = new Date();\n        this.renderTo = <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>();\n        this.callParent();\n    }\n});\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function() {\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('DynamicButtonText');\n});\n</code></pre>\n"},"initIconCmp":{"!type":"fn() -> !this"},"initRenderData":{"!type":"fn() -> ?","!doc":"<p>Add bodyCls to the renderData object</p>\n"},"onAdd":{"!type":"fn(component: ?, index: ?) -> !this","!doc":"<p>Set up the <code>tools.&lt;tool type&gt;</code> link in the owning Panel.</p>\n"},"onClick":{"!type":"fn(e: ?) -> !this"},"onDblClick":{"!type":"fn(e: ?) -> !this"},"onTitleRender":{"!type":"fn() -> !this"},"removeUIClsFromElement":{"!type":"fn(cls: ?) -> !this","!doc":"<p>inherit docs</p>\n"},"removeUIFromElement":{"!type":"fn() -> !this","!doc":"<p>inherit docs</p>\n"},"setGlyph":{"!type":"fn(glyph: number|string) -> !this","!doc":"<p>Sets glyph that provides the icon image for this header.  This method will replace any existing\nglyph if one has already been set.</p>\n"},"setIcon":{"!type":"fn(icon: string) -> !this","!doc":"<p>Sets the image path that provides the icon image for this header.  This method will replace any existing\nicon if one has already been set.</p>\n"},"setIconCls":{"!type":"fn(cls: string) -> !this","!doc":"<p>Sets the CSS class that provides the icon image for this header.  This method will replace any existing\nicon class if one has already been set.</p>\n"},"setTitle":{"!type":"fn(title: string) -> !this","!doc":"<p>Sets the title of the header.</p>\n"},"syncBeforeAfterTitleClasses":{"!type":"fn() -> !this"},"click":{"!type":"fn(this: +Ext.panel.Header, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when the header is clicked. This event will not be fired\nif the click was on a <a href=\"#!/api/Ext.panel.Tool\" rel=\"Ext.panel.Tool\" class=\"docClass\">Ext.panel.Tool</a></p>\n"},"dblclick":{"!type":"fn(this: +Ext.panel.Header, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when the header is double clicked. This event will not\nbe fired if the click was on a <a href=\"#!/api/Ext.panel.Tool\" rel=\"Ext.panel.Tool\" class=\"docClass\">Ext.panel.Tool</a></p>\n"}}},"Panel":{"!doc":"<p>Panel is a container that has specific functionality and structural components that make it the perfect building\nblock for application-oriented user interfaces.</p>\n\n<p>Panels are, by virtue of their inheritance from <a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, capable of being configured with a\n<a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">layout</a>, and containing child Components.</p>\n\n<p>When either specifying child <a href=\"#!/api/Ext.panel.Panel-cfg-items\" rel=\"Ext.panel.Panel-cfg-items\" class=\"docClass\">items</a> of a Panel, or dynamically <a href=\"#!/api/Ext.container.Container-method-add\" rel=\"Ext.container.Container-method-add\" class=\"docClass\">adding</a>\nComponents to a Panel, remember to consider how you wish the Panel to arrange those child elements, and whether those\nchild elements need to be sized using one of Ext's built-in <code><a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">layout</a></code>\nschemes. By default, Panels use the <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">Auto</a> scheme. This simply renders child\ncomponents, appending them one after the other inside the Container, and <strong>does not apply any sizing</strong> at all.</p>\n\n<p><p><img src=\"\" alt=\"Panel components\" width=\"\" height=\"\"></p></p>\n\n<p>A Panel may also contain <a href=\"#!/api/Ext.panel.Panel-cfg-bbar\" rel=\"Ext.panel.Panel-cfg-bbar\" class=\"docClass\">bottom</a> and <a href=\"#!/api/Ext.panel.Panel-cfg-tbar\" rel=\"Ext.panel.Panel-cfg-tbar\" class=\"docClass\">top</a> toolbars, along with separate <a href=\"#!/api/Ext.panel.Header\" rel=\"Ext.panel.Header\" class=\"docClass\">header</a>, <a href=\"#!/api/Ext.panel.Panel-cfg-fbar\" rel=\"Ext.panel.Panel-cfg-fbar\" class=\"docClass\">footer</a> and body sections.</p>\n\n<p>Panel also provides built-in <a href=\"#!/api/Ext.panel.Panel-cfg-collapsible\" rel=\"Ext.panel.Panel-cfg-collapsible\" class=\"docClass\">collapsible, expandable</a> and <a href=\"#!/api/Ext.panel.Panel-cfg-closable\" rel=\"Ext.panel.Panel-cfg-closable\" class=\"docClass\">closable</a> behavior. Panels can\nbe easily dropped into any <a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Container</a> or layout, and the layout and rendering pipeline\nis <a href=\"#!/api/Ext.container.Container-method-add\" rel=\"Ext.container.Container-method-add\" class=\"docClass\">completely managed by the framework</a>.</p>\n\n<p><strong>Note:</strong> By default, the <code><a href=\"#!/api/Ext.panel.Panel-cfg-closable\" rel=\"Ext.panel.Panel-cfg-closable\" class=\"docClass\">close</a></code> header tool <em>destroys</em> the Panel resulting in removal of the\nPanel and the destruction of any descendant Components. This makes the Panel object, and all its descendants\n<strong>unusable</strong>. To enable the close tool to simply <em>hide</em> a Panel for later re-use, configure the Panel with\n<code><a href=\"#!/api/Ext.panel.Panel-cfg-closeAction\" rel=\"Ext.panel.Panel-cfg-closeAction\" class=\"docClass\">closeAction</a>: 'hide'</code>.</p>\n\n<p>Usually, Panels are used as constituents within an application, in which case, they would be used as child items of\nContainers, and would themselves use Ext.Components as child <a href=\"#!/api/Ext.panel.Panel-cfg-items\" rel=\"Ext.panel.Panel-cfg-items\" class=\"docClass\">items</a>. However to illustrate simply rendering a\nPanel into the document, here's how to do it:</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>', {\n    title: 'Hello',\n    width: 200,\n    html: '&lt;p&gt;World!&lt;/p&gt;',\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n\n<p>A more realistic scenario is a Panel created to house input fields which will not be rendered, but used as a\nconstituent part of a Container:</p>\n\n<pre class='inline-example '><code>var filterPanel = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>', {\n    bodyPadding: 5,  // Don't want content to crunch against the borders\n    width: 300,\n    title: 'Filters',\n    items: [{\n        xtype: 'datefield',\n        fieldLabel: 'Start date'\n    }, {\n        xtype: 'datefield',\n        fieldLabel: 'End date'\n    }],\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n\n<p>Note that the Panel above is configured to render into the document and assigned a size. In a real world scenario,\nthe Panel will often be added inside a Container which will use a <a href=\"#!/api/Ext.panel.Panel-cfg-layout\" rel=\"Ext.panel.Panel-cfg-layout\" class=\"docClass\">layout</a> to render, size and position its\nchild Components.</p>\n\n<p>Panels will often use specific <a href=\"#!/api/Ext.panel.Panel-cfg-layout\" rel=\"Ext.panel.Panel-cfg-layout\" class=\"docClass\">layout</a>s to provide an application with shape and structure by containing and\narranging child Components:</p>\n\n<pre class='inline-example '><code>var resultsPanel = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>', {\n    title: 'Results',\n    width: 600,\n    height: 400,\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    layout: {\n        type: 'vbox',       // Arrange child items vertically\n        align: 'stretch',    // Each takes up full width\n        padding: 5\n    },\n    items: [{               // Results grid specified as a config object with an xtype of 'grid'\n        xtype: 'grid',\n        columns: [{header: 'Column One'}],            // One header just for show. There's no data,\n        store: <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.ArrayStore\" rel=\"Ext.data.ArrayStore\" class=\"docClass\">Ext.data.ArrayStore</a>', {}), // A dummy empty data store\n        flex: 1                                       // Use 1/3 of Container's height (hint to Box layout)\n    }, {\n        xtype: 'splitter'   // A splitter between the two child items\n    }, {                    // Details Panel specified as a config object (no xtype defaults to 'panel').\n        title: 'Details',\n        bodyPadding: 5,\n        items: [{\n            fieldLabel: 'Data item',\n            xtype: 'textfield'\n        }], // An array of form fields\n        flex: 2             // Use 2/3 of Container's height (hint to Box layout)\n    }]\n});\n</code></pre>\n\n<p>The example illustrates one possible method of displaying search results. The Panel contains a grid with the\nresulting data arranged in rows. Each selected row may be displayed in detail in the Panel below. The <a href=\"#!/api/Ext.layout.container.VBox\" rel=\"Ext.layout.container.VBox\" class=\"docClass\">vbox</a> layout is used to arrange the two vertically. It is configured to stretch child items\nhorizontally to full width. Child items may either be configured with a numeric height, or with a <code>flex</code> value to\ndistribute available space proportionately.</p>\n\n<p>This Panel itself may be a child item of, for exaple, a <a href=\"#!/api/Ext.tab.Panel\" rel=\"Ext.tab.Panel\" class=\"docClass\">Ext.tab.Panel</a> which will size its child items to fit\nwithin its content area.</p>\n\n<p>Using these techniques, as long as the <strong>layout</strong> is chosen and configured correctly, an application may have any\nlevel of nested containment, all dynamically sized according to configuration, the user's preference and available\nbrowser size.</p>\n","!type":"fn(config: +Ext.Element|string|Ext_panel_Panel_cfg)","prototype":{"!proto":"Ext.panel.AbstractPanel.prototype","animCollapse":{"!type":"bool","!doc":"<p><code>true</code> to animate the transition when the panel is collapsed, <code>false</code> to skip the animation (defaults to <code>true</code>\nif the <a href=\"#!/api/Ext.fx.Anim\" rel=\"Ext.fx.Anim\" class=\"docClass\">Ext.fx.Anim</a> class is available, otherwise <code>false</code>). May also be specified as the animation\nduration in milliseconds.</p>\n"},"bbar":{"!type":"?|[?]","!doc":"<p>Convenience config. Short for 'Bottom Bar'.</p>\n\n<pre><code>bbar: [\n  { xtype: 'button', text: 'Button 1' }\n]\n</code></pre>\n\n<p>is equivalent to</p>\n\n<pre><code>dockedItems: [{\n    xtype: 'toolbar',\n    dock: 'bottom',\n    items: [\n        { xtype: 'button', text: 'Button 1' }\n    ]\n}]\n</code></pre>\n"},"buttonAlign":{"!type":"string","!doc":"<p>The alignment of any buttons added to this panel. Valid values are 'right', 'left' and 'center' (defaults to\n'right' for buttons/fbar, 'left' for other toolbar types).</p>\n\n<p><strong>NOTE:</strong> The prefered way to specify toolbars is to use the dockedItems config. Instead of buttonAlign you\nwould add the layout: { pack: 'start' | 'center' | 'end' } option to the dockedItem config.</p>\n"},"buttons":{"!type":"?|[?]","!doc":"<p>Convenience config used for adding buttons docked to the bottom of the panel. This is a\nsynonym for the <a href=\"#!/api/Ext.panel.Panel-cfg-fbar\" rel=\"Ext.panel.Panel-cfg-fbar\" class=\"docClass\">fbar</a> config.</p>\n\n<pre><code>buttons: [\n  { text: 'Button 1' }\n]\n</code></pre>\n\n<p>is equivalent to</p>\n\n<pre><code>dockedItems: [{\n    xtype: 'toolbar',\n    dock: 'bottom',\n    ui: 'footer',\n    defaults: {minWidth: <a href=\"#!/api/Ext.panel.Panel-cfg-minButtonWidth\" rel=\"Ext.panel.Panel-cfg-minButtonWidth\" class=\"docClass\">minButtonWidth</a>},\n    items: [\n        { xtype: 'component', flex: 1 },\n        { xtype: 'button', text: 'Button 1' }\n    ]\n}]\n</code></pre>\n\n<p>The <a href=\"#!/api/Ext.panel.Panel-cfg-minButtonWidth\" rel=\"Ext.panel.Panel-cfg-minButtonWidth\" class=\"docClass\">minButtonWidth</a> is used as the default <a href=\"#!/api/Ext.button.Button-cfg-minWidth\" rel=\"Ext.button.Button-cfg-minWidth\" class=\"docClass\">minWidth</a> for\neach of the buttons in the buttons toolbar.</p>\n"},"closable":{"!type":"bool","!doc":"<p>True to display the 'close' tool button and allow the user to close the window, false to hide the button and\ndisallow closing the window.</p>\n\n<p>By default, when close is requested by clicking the close button in the header, the <a href=\"#!/api/Ext.panel.Panel-method-close\" rel=\"Ext.panel.Panel-method-close\" class=\"docClass\">close</a> method will be\ncalled. This will <em><a href=\"#!/api/Ext.Component-method-destroy\" rel=\"Ext.Component-method-destroy\" class=\"docClass\">destroy</a></em> the Panel and its content meaning that it may not be\nreused.</p>\n\n<p>To make closing a Panel <em>hide</em> the Panel so that it may be reused, set <a href=\"#!/api/Ext.panel.Panel-cfg-closeAction\" rel=\"Ext.panel.Panel-cfg-closeAction\" class=\"docClass\">closeAction</a> to 'hide'.</p>\n"},"closeAction":{"!type":"string","!doc":"<p>The action to take when the close header tool is clicked:</p>\n\n<ul>\n<li><p><strong><code>'<a href=\"#!/api/Ext.panel.Panel-method-destroy\" rel=\"Ext.panel.Panel-method-destroy\" class=\"docClass\">destroy</a>'</code></strong> :</p>\n\n<p><a href=\"#!/api/Ext.panel.Panel-method-remove\" rel=\"Ext.panel.Panel-method-remove\" class=\"docClass\">remove</a> the window from the DOM and <a href=\"#!/api/Ext.Component-method-destroy\" rel=\"Ext.Component-method-destroy\" class=\"docClass\">destroy</a> it and all descendant\nComponents. The window will <strong>not</strong> be available to be redisplayed via the <a href=\"#!/api/Ext.panel.Panel-method-show\" rel=\"Ext.panel.Panel-method-show\" class=\"docClass\">show</a> method.</p></li>\n<li><p><strong><code>'<a href=\"#!/api/Ext.panel.Panel-method-hide\" rel=\"Ext.panel.Panel-method-hide\" class=\"docClass\">hide</a>'</code></strong> :</p>\n\n<p><a href=\"#!/api/Ext.panel.Panel-method-hide\" rel=\"Ext.panel.Panel-method-hide\" class=\"docClass\">hide</a> the window by setting visibility to hidden and applying negative offsets. The window will be\navailable to be redisplayed via the <a href=\"#!/api/Ext.panel.Panel-method-show\" rel=\"Ext.panel.Panel-method-show\" class=\"docClass\">show</a> method.</p></li>\n</ul>\n\n\n<p><strong>Note:</strong> This behavior has changed! setting <em>does</em> affect the <a href=\"#!/api/Ext.panel.Panel-method-close\" rel=\"Ext.panel.Panel-method-close\" class=\"docClass\">close</a> method which will invoke the\napproriate closeAction.</p>\n"},"collapseDirection":{"!type":"string","!doc":"<p>The direction to collapse the Panel when the toggle button is clicked.</p>\n\n<p>Defaults to the <a href=\"#!/api/Ext.panel.Panel-cfg-headerPosition\" rel=\"Ext.panel.Panel-cfg-headerPosition\" class=\"docClass\">headerPosition</a></p>\n\n<p><strong>Important: This config is <em>ignored</em> for <a href=\"#!/api/Ext.panel.Panel-cfg-collapsible\" rel=\"Ext.panel.Panel-cfg-collapsible\" class=\"docClass\">collapsible</a> Panels which are direct child items of a <a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">border layout</a>.</strong></p>\n\n<p>Specify as <code>'top'</code>, <code>'bottom'</code>, <code>'left'</code> or <code>'right'</code>.</p>\n"},"collapseFirst":{"!type":"bool","!doc":"<p><code>true</code> to make sure the collapse/expand toggle button always renders first (to the left of) any other tools in\nthe panel's title bar, <code>false</code> to render it last.</p>\n"},"collapseMode":{"!type":"string","!doc":"<p><strong>Important: this config is only effective for <a href=\"#!/api/Ext.panel.Panel-cfg-collapsible\" rel=\"Ext.panel.Panel-cfg-collapsible\" class=\"docClass\">collapsible</a> Panels which are direct child items of a\n<a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">border layout</a>.</strong></p>\n\n<p>When <em>not</em> a direct child item of a <a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">border layout</a>, then the Panel's header\nremains visible, and the body is collapsed to zero dimensions. If the Panel has no header, then a new header\n(orientated correctly depending on the <a href=\"#!/api/Ext.panel.Panel-cfg-collapseDirection\" rel=\"Ext.panel.Panel-cfg-collapseDirection\" class=\"docClass\">collapseDirection</a>) will be inserted to show a the title and a re-\nexpand tool.</p>\n\n<p>When a child item of a <a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">border layout</a>, this config has three possible values:</p>\n\n<ul>\n<li><p><code>undefined</code> - When collapsed, a placeholder <a href=\"#!/api/Ext.panel.Header\" rel=\"Ext.panel.Header\" class=\"docClass\">Header</a> is injected into the layout to\nrepresent the Panel and to provide a UI with a Tool to allow the user to re-expand the Panel.</p></li>\n<li><p><code>\"header\"</code> - The Panel collapses to leave its header visible as when not inside a\n<a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">border layout</a>.</p></li>\n<li><p><code>\"mini\"</code> - The Panel collapses without a visible header.</p></li>\n</ul>\n\n"},"collapsed":{"!type":"bool","!doc":"<p><code>true</code> to render the panel collapsed, <code>false</code> to render it expanded.</p>\n"},"collapsedCls":{"!type":"string","!doc":"<p>A CSS class to add to the panel's element after it has been collapsed.</p>\n"},"collapsible":{"!type":"bool","!doc":"<p>True to make the panel collapsible and have an expand/collapse toggle Tool added into the header tool button\narea. False to keep the panel sized either statically, or by an owning layout manager, with no toggle Tool.\nWhen a panel is used in a <a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">border layout</a>, the <a href=\"#!/api/Ext.panel.Panel-cfg-floatable\" rel=\"Ext.panel.Panel-cfg-floatable\" class=\"docClass\">floatable</a> option\ncan influence the behavior of collapsing.\nSee <a href=\"#!/api/Ext.panel.Panel-cfg-collapseMode\" rel=\"Ext.panel.Panel-cfg-collapseMode\" class=\"docClass\">collapseMode</a> and <a href=\"#!/api/Ext.panel.Panel-cfg-collapseDirection\" rel=\"Ext.panel.Panel-cfg-collapseDirection\" class=\"docClass\">collapseDirection</a></p>\n"},"constrain":{"!type":"bool","!doc":"<p>True to constrain the panel within its containing element, false to allow it to fall outside of its containing\nelement. By default floating components such as Windows will be rendered to <code>document.body</code>. To render and constrain the window within\nanother element specify <a href=\"#!/api/Ext.panel.Panel-cfg-renderTo\" rel=\"Ext.panel.Panel-cfg-renderTo\" class=\"docClass\">renderTo</a>. Optionally the header only can be constrained\nusing <a href=\"#!/api/Ext.panel.Panel-cfg-constrainHeader\" rel=\"Ext.panel.Panel-cfg-constrainHeader\" class=\"docClass\">constrainHeader</a>.</p>\n"},"constrainHeader":{"!type":"bool","!doc":"<p>True to constrain the panel header within its containing element (allowing the panel body to fall outside of\nits containing element) or false to allow the header to fall outside its containing element.\nOptionally the entire panel can be constrained using <a href=\"#!/api/Ext.panel.Panel-cfg-constrain\" rel=\"Ext.panel.Panel-cfg-constrain\" class=\"docClass\">constrain</a>.</p>\n"},"dockedItems":{"!type":"?|[?]","!doc":"<p>A component or series of components to be added as docked items to this panel. The docked items can be docked to\neither the top, right, left or bottom of a panel. This is typically used for things like toolbars or tab bars:</p>\n\n<pre><code>var panel = new <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>({\n    dockedItems: [{\n        xtype: 'toolbar',\n        dock: 'top',\n        items: [{\n            text: 'Docked to the top'\n        }]\n    }]\n});\n</code></pre>\n"},"fbar":{"!type":"?|[?]","!doc":"<p>Convenience config used for adding items to the bottom of the panel. Short for Footer Bar.</p>\n\n<pre><code>fbar: [\n  { type: 'button', text: 'Button 1' }\n]\n</code></pre>\n\n<p>is equivalent to</p>\n\n<pre><code>dockedItems: [{\n    xtype: 'toolbar',\n    dock: 'bottom',\n    ui: 'footer',\n    defaults: {minWidth: <a href=\"#!/api/Ext.panel.Panel-cfg-minButtonWidth\" rel=\"Ext.panel.Panel-cfg-minButtonWidth\" class=\"docClass\">minButtonWidth</a>},\n    items: [\n        { xtype: 'component', flex: 1 },\n        { xtype: 'button', text: 'Button 1' }\n    ]\n}]\n</code></pre>\n\n<p>The <a href=\"#!/api/Ext.panel.Panel-cfg-minButtonWidth\" rel=\"Ext.panel.Panel-cfg-minButtonWidth\" class=\"docClass\">minButtonWidth</a> is used as the default <a href=\"#!/api/Ext.button.Button-cfg-minWidth\" rel=\"Ext.button.Button-cfg-minWidth\" class=\"docClass\">minWidth</a> for\neach of the buttons in the fbar.</p>\n"},"floatable":{"!type":"bool","!doc":"<p><strong>Important: This config is only effective for <a href=\"#!/api/Ext.panel.Panel-cfg-collapsible\" rel=\"Ext.panel.Panel-cfg-collapsible\" class=\"docClass\">collapsible</a> Panels which are direct child items of a\n<a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">border layout</a>.</strong></p>\n\n<p>true to allow clicking a collapsed Panel's <a href=\"#!/api/Ext.panel.Panel-cfg-placeholder\" rel=\"Ext.panel.Panel-cfg-placeholder\" class=\"docClass\">placeholder</a> to display the Panel floated above the layout,\nfalse to force the user to fully expand a collapsed region by clicking the expand button to see it again.</p>\n"},"frame":{"!type":"bool","!doc":"<p>True to apply a frame to the panel.</p>\n"},"frameHeader":{"!type":"bool","!doc":"<p>True to apply a frame to the panel panels header (if 'frame' is true).</p>\n"},"glyph":{"!type":"number|string","!doc":"<p>A numeric unicode character code to use as the icon for the panel header. The\ndefault font-family for glyphs can be set globally using\n<a href=\"#!/api/Ext-method-setGlyphFontFamily\" rel=\"Ext-method-setGlyphFontFamily\" class=\"docClass\">Ext.setGlyphFontFamily()</a>. Alternatively, this\nconfig option accepts a string with the charCode and font-family separated by the\n<code>@</code> symbol. For example '65@My Font Family'.</p>\n"},"header":{"!type":"bool|?","!doc":"<p>Pass as <code>false</code> to prevent a Header from being created and shown.</p>\n\n<p>Pass as a config object (optionally containing an <code>xtype</code>) to custom-configure this Panel's header.</p>\n\n<p>See <a href=\"#!/api/Ext.panel.Header\" rel=\"Ext.panel.Header\" class=\"docClass\">Ext.panel.Header</a> for all the options that may be specified here.</p>\n\n<p>A <a href=\"#!/api/Ext.panel.Header\" rel=\"Ext.panel.Header\" class=\"docClass\">panel header</a> is a <a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a> which contains the Panel's <a href=\"#!/api/Ext.panel.Panel-cfg-title\" rel=\"Ext.panel.Panel-cfg-title\" class=\"docClass\">title</a> and <a href=\"#!/api/Ext.panel.Panel-cfg-tools\" rel=\"Ext.panel.Panel-cfg-tools\" class=\"docClass\">tools</a>.\nYou may also configure the Panel's <code>header</code> option with its own child items which go <em>before</em> the <a href=\"#!/api/Ext.panel.Panel-cfg-tools\" rel=\"Ext.panel.Panel-cfg-tools\" class=\"docClass\">tools</a></p>\n\n<p>By default the panel <a href=\"#!/api/Ext.panel.Panel-cfg-title\" rel=\"Ext.panel.Panel-cfg-title\" class=\"docClass\">title</a> is inserted after items configured in this config, but before any tools.\nTo insert the title at any point in the full array, specify the <a href=\"#!/api/Ext.panel.Header\" rel=\"Ext.panel.Header\" class=\"docClass\">#titlePosition</a> config:</p>\n\n<p>   new <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>({\n       title: 'Test',\n       tools: [{\n           type: 'refresh\n       }, {\n           type: 'help'\n       }],\n       titlePosition: 2 // Title will come AFTER the two tools\n       ...\n   });</p>\n"},"headerOverCls":{"!type":"string","!doc":"<p>Optional CSS class to apply to the header element on mouseover</p>\n"},"headerPosition":{"!type":"string","!doc":"<p>Specify as <code>'top'</code>, <code>'bottom'</code>, <code>'left'</code> or <code>'right'</code>.</p>\n"},"hideCollapseTool":{"!type":"bool","!doc":"<p><code>true</code> to hide the expand/collapse toggle button when <code><a href=\"#!/api/Ext.panel.Panel-cfg-collapsible\" rel=\"Ext.panel.Panel-cfg-collapsible\" class=\"docClass\">collapsible</a> == true</code>, <code>false</code> to display it.</p>\n"},"icon":{"!type":"string","!doc":"<p>Path to image for an icon in the header. Used for displaying an icon to the left of a title.</p>\n"},"iconCls":{"!type":"string","!doc":"<p>CSS class for an icon in the header. Used for displaying an icon to the left of a title.</p>\n"},"lbar":{"!type":"?|[?]","!doc":"<p>Convenience config. Short for 'Left Bar' (left-docked, vertical toolbar).</p>\n\n<pre><code>lbar: [\n  { xtype: 'button', text: 'Button 1' }\n]\n</code></pre>\n\n<p>is equivalent to</p>\n\n<pre><code>dockedItems: [{\n    xtype: 'toolbar',\n    dock: 'left',\n    items: [\n        { xtype: 'button', text: 'Button 1' }\n    ]\n}]\n</code></pre>\n"},"manageHeight":{"!type":"bool","!doc":"<p>When true, the dock component layout writes\nheight information to the panel's DOM elements based on its shrink wrap height\ncalculation. This ensures that the browser respects the calculated height.\nWhen false, the dock component layout will not write heights on the panel or its\nbody element. In some simple layout cases, not writing the heights to the DOM may\nbe desired because this allows the browser to respond to direct DOM manipulations\n(like animations).</p>\n"},"minButtonWidth":{"!type":"number","!doc":"<p>Minimum width of all footer toolbar buttons in pixels. If set, this will be used as the default\nvalue for the <a href=\"#!/api/Ext.button.Button-cfg-minWidth\" rel=\"Ext.button.Button-cfg-minWidth\" class=\"docClass\">Ext.button.Button.minWidth</a> config of each Button added to the <strong>footer toolbar</strong> via the\n<a href=\"#!/api/Ext.panel.Panel-cfg-fbar\" rel=\"Ext.panel.Panel-cfg-fbar\" class=\"docClass\">fbar</a> or <a href=\"#!/api/Ext.panel.Panel-cfg-buttons\" rel=\"Ext.panel.Panel-cfg-buttons\" class=\"docClass\">buttons</a> configurations. It will be ignored for buttons that have a minWidth configured\nsome other way, e.g. in their own config object or via the <a href=\"#!/api/Ext.container.Container-cfg-defaults\" rel=\"Ext.container.Container-cfg-defaults\" class=\"docClass\">defaults</a> of\ntheir parent container.</p>\n"},"overlapHeader":{"!type":"bool","!doc":"<p>True to overlap the header in a panel over the framing of the panel itself. This is needed when frame:true (and\nis done automatically for you). Otherwise it is undefined. If you manually add rounded corners to a panel header\nwhich does not have frame:true, this will need to be set to true.</p>\n"},"placeholder":{"!type":"+Ext.Component|?","!doc":"<p><strong>Important: This config is only effective for <a href=\"#!/api/Ext.panel.Panel-cfg-collapsible\" rel=\"Ext.panel.Panel-cfg-collapsible\" class=\"docClass\">collapsible</a> Panels which are direct child items of a\n<a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">border layout</a> when not using the <code>'header'</code> <a href=\"#!/api/Ext.panel.Panel-cfg-collapseMode\" rel=\"Ext.panel.Panel-cfg-collapseMode\" class=\"docClass\">collapseMode</a>.</strong></p>\n\n<p><strong>Optional.</strong> A Component (or config object for a Component) to show in place of this Panel when this Panel is\ncollapsed by a <a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">border layout</a>. Defaults to a generated <a href=\"#!/api/Ext.panel.Header\" rel=\"Ext.panel.Header\" class=\"docClass\">Header</a> containing a <a href=\"#!/api/Ext.panel.Tool\" rel=\"Ext.panel.Tool\" class=\"docClass\">Tool</a> to re-expand the Panel.</p>\n"},"placeholderCollapseHideMode":{"!type":"number","!doc":"<p>The <a href=\"#!/api/Ext.dom.Element-method-setVisibilityMode\" rel=\"Ext.dom.Element-method-setVisibilityMode\" class=\"docClass\">mode</a> for hiding collapsed panels when\nusing <a href=\"#!/api/Ext.panel.Panel-cfg-collapseMode\" rel=\"Ext.panel.Panel-cfg-collapseMode\" class=\"docClass\">collapseMode</a> \"placeholder\".</p>\n"},"preventHeader":{"!type":"bool"},"rbar":{"!type":"?|[?]","!doc":"<p>Convenience config. Short for 'Right Bar' (right-docked, vertical toolbar).</p>\n\n<pre><code>rbar: [\n  { xtype: 'button', text: 'Button 1' }\n]\n</code></pre>\n\n<p>is equivalent to</p>\n\n<pre><code>dockedItems: [{\n    xtype: 'toolbar',\n    dock: 'right',\n    items: [\n        { xtype: 'button', text: 'Button 1' }\n    ]\n}]\n</code></pre>\n"},"simpleDrag":{"!type":"bool","!doc":"<p>When <a href=\"#!/api/Ext.panel.Panel-cfg-draggable\" rel=\"Ext.panel.Panel-cfg-draggable\" class=\"docClass\">draggable</a> is <code>true</code>, Specify this as <code>true</code> to  cause the <code>draggable</code> config\nto work the same as it does in <a href=\"#!/api/Ext.window.Window\" rel=\"Ext.window.Window\" class=\"docClass\">Window</a>. This Panel\njust becomes movable. No DragDrop instances receive any notifications.\nFor example:</p>\n\n<pre class='inline-example '><code>var win = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('widget.window', {\n    height: 300,\n    width: 300,\n    title: 'Constraining Window',\n    closable: false,\n    items: {\n        title: \"Floating Panel\",\n        width: 100,\n        height: 100,\n        floating: true,\n        draggable: true,\n        constrain: true,\n        simpleDrag: true\n    }\n});\nwin.show();\n// Floating components begin life hidden\nwin.child('[title=Floating Panel]').show();\n</code></pre>\n"},"tbar":{"!type":"?|[?]","!doc":"<p>Convenience config. Short for 'Top Bar'.</p>\n\n<pre><code>tbar: [\n  { xtype: 'button', text: 'Button 1' }\n]\n</code></pre>\n\n<p>is equivalent to</p>\n\n<pre><code>dockedItems: [{\n    xtype: 'toolbar',\n    dock: 'top',\n    items: [\n        { xtype: 'button', text: 'Button 1' }\n    ]\n}]\n</code></pre>\n"},"title":{"!type":"string","!doc":"<p>The title text to be used to display in the <a href=\"#!/api/Ext.panel.Header\" rel=\"Ext.panel.Header\" class=\"docClass\">panel header</a>. When a\n<code>title</code> is specified the <a href=\"#!/api/Ext.panel.Header\" rel=\"Ext.panel.Header\" class=\"docClass\">Ext.panel.Header</a> will automatically be created and displayed unless\n<a href=\"#!/api/Ext.panel.Panel-cfg-header\" rel=\"Ext.panel.Panel-cfg-header\" class=\"docClass\">header</a> is set to <code>false</code>.</p>\n"},"titleAlign":{"!type":"string","!doc":"<p>The alignment of the title text within the available space between the\nicon and the tools.</p>\n\n<p>May be <code>\"left\"</code>, <code>\"right\"</code> or <code>\"center\"</code>. Defaults to the browser's natural\nbehavior depending on the css direction property - <code>\"left\"</code> when direction\nis ltr and <code>\"right\"</code> when direction is rtl\n(see <a href=\"#!/api/Ext.AbstractComponent-cfg-rtl\" rel=\"Ext.AbstractComponent-cfg-rtl\" class=\"docClass\">Ext.AbstractComponent.rtl</a>).</p>\n"},"titleCollapse":{"!type":"bool","!doc":"<p><code>true</code> to allow expanding and collapsing the panel (when <code><a href=\"#!/api/Ext.panel.Panel-cfg-collapsible\" rel=\"Ext.panel.Panel-cfg-collapsible\" class=\"docClass\">collapsible</a> = true</code>) by clicking anywhere in\nthe header bar, <code>false</code>) to allow it only by clicking to tool button). When a panel is used in a\n<a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">border layout</a>, the <a href=\"#!/api/Ext.panel.Panel-cfg-floatable\" rel=\"Ext.panel.Panel-cfg-floatable\" class=\"docClass\">floatable</a> option can influence the behavior of collapsing.</p>\n"},"tools":{"!type":"[?]|[+Ext.panel.Tool]","!doc":"<p>An array of <a href=\"#!/api/Ext.panel.Tool\" rel=\"Ext.panel.Tool\" class=\"docClass\">Ext.panel.Tool</a> configs/instances to be added to the header tool area. The tools are stored as\nchild components of the header container. They can be accessed using <a href=\"#!/api/Ext.panel.Panel-method-down\" rel=\"Ext.panel.Panel-method-down\" class=\"docClass\">down</a> and {<a href=\"#!/api/Ext.panel.Panel-method-query\" rel=\"Ext.panel.Panel-method-query\" class=\"docClass\">query</a>}, as well as the\nother component methods. The toggle tool is automatically created if <a href=\"#!/api/Ext.panel.Panel-cfg-collapsible\" rel=\"Ext.panel.Panel-cfg-collapsible\" class=\"docClass\">collapsible</a> is set to true.</p>\n\n<p>Note that, apart from the toggle tool which is provided when a panel is collapsible, these tools only provide the\nvisual button. Any required functionality must be provided by adding handlers that implement the necessary\nbehavior.</p>\n\n<p>Example usage:</p>\n\n<pre><code>tools:[{\n    type:'refresh',\n    tooltip: 'Refresh form Data',\n    // hidden:true,\n    handler: function(event, toolEl, panelHeader) {\n        // refresh logic\n    }\n},\n{\n    type:'help',\n    tooltip: 'Get Help',\n    callback: function(panel, tool, event) {\n        // show help here\n    }\n}]\n</code></pre>\n\n<p>The difference between <code>handler</code> and <code>callback</code> is the signature. For details on\nthe distinction, see <a href=\"#!/api/Ext.panel.Tool\" rel=\"Ext.panel.Tool\" class=\"docClass\">Ext.panel.Tool</a>.</p>\n"},"dd":{"!type":"+Ext.dd.DragSource|+Ext.util.ComponentDragger","!doc":"<p>Only present if this Panel has been configured with <a href=\"#!/api/Ext.panel.Panel-cfg-draggable\" rel=\"Ext.panel.Panel-cfg-draggable\" class=\"docClass\">draggable</a> <code>true</code>.</p>\n\n<h2>Simple dragging</h2>\n\n<p>If this Panel is configured <a href=\"#!/api/Ext.panel.Panel-cfg-simpleDrag\" rel=\"Ext.panel.Panel-cfg-simpleDrag\" class=\"docClass\">simpleDrag</a> <code>true</code> (the default is <code>false</code>), this property\nwill reference an instance of <a href=\"#!/api/Ext.util.ComponentDragger\" rel=\"Ext.util.ComponentDragger\" class=\"docClass\">Ext.util.ComponentDragger</a> (A subclass of\n<a href=\"#!/api/Ext.dd.DragTracker\" rel=\"Ext.dd.DragTracker\" class=\"docClass\">DragTracker</a>) which handles moving the Panel's DOM Element,\nand constraining according to the <a href=\"#!/api/Ext.panel.Panel-cfg-constrain\" rel=\"Ext.panel.Panel-cfg-constrain\" class=\"docClass\">constrain</a> and <a href=\"#!/api/Ext.panel.Panel-cfg-constrainHeader\" rel=\"Ext.panel.Panel-cfg-constrainHeader\" class=\"docClass\">constrainHeader</a> .</p>\n\n<p>This object fires various events during its lifecycle and during a drag operation.</p>\n\n<h2>Complex dragging interacting with other DragDrop instances</h2>\n\n<p>By default, this property in a <a href=\"#!/api/Ext.panel.Panel-cfg-draggable\" rel=\"Ext.panel.Panel-cfg-draggable\" class=\"docClass\">draggable</a> Panel will contain an instance of <a href=\"#!/api/Ext.dd.DragSource\" rel=\"Ext.dd.DragSource\" class=\"docClass\">Ext.dd.DragSource</a> which handles dragging the Panel.</p>\n\n<p>The developer must provide implementations of the abstract methods of <a href=\"#!/api/Ext.dd.DragSource\" rel=\"Ext.dd.DragSource\" class=\"docClass\">Ext.dd.DragSource</a> in order to\nsupply behaviour for each stage of the drag/drop process. See <a href=\"#!/api/Ext.panel.Panel-cfg-draggable\" rel=\"Ext.panel.Panel-cfg-draggable\" class=\"docClass\">draggable</a>.</p>\n"},"addTool":{"!type":"fn(tools: [?]|[+Ext.panel.Tool]) -> !this","!doc":"<p>Add tools to this panel</p>\n"},"addTools":{"!type":"fn() -> !this","!doc":"<p>Template method to be implemented in subclasses to add their tools after the collapsible tool.</p>\n"},"afterCollapse":{"!type":"fn(animated: bool) -> !this","!doc":"<p>Invoked after the Panel is Collapsed.</p>\n"},"afterExpand":{"!type":"fn(animated: bool) -> !this","!doc":"<p>Invoked after the Panel is Expanded.</p>\n"},"beforeDestroy":{"!type":"fn() -> !this","!doc":"<p>Invoked before the Component is destroyed.</p>\n"},"beforeRender":{"!type":"fn() -> !this"},"beginCollapse":{"!type":"fn() -> !this","!doc":"<p>Called before the change from default, configured state into the collapsed state.\nThis method may be called at render time to enable rendering in an initially collapsed state,\nor at runtime when an existing, fully layed out Panel may be collapsed.\nIt basically saves configs which need to be clobbered for the duration of the collapsed state.</p>\n"},"beginDrag":{"!type":"fn() -> !this"},"beginExpand":{"!type":"fn() -> !this"},"bridgeToolbars":{"!type":"fn() -> !this"},"close":{"!type":"fn(panel: +Ext.panel.Panel, eOpts: ?)","!doc":"<p>Fires when the user closes the panel.</p>\n"},"collapse":{"!type":"fn(p: +Ext.panel.Panel, eOpts: ?)","!doc":"<p>Fires after this Panel has collapsed.</p>\n"},"collapsedHorizontal":{"!type":"fn() -> !this"},"collapsedVertical":{"!type":"fn() -> !this"},"convertCollapseDir":{"!type":"fn(collapseDir: ?) -> !this","!doc":"<p>converts a collapsdDir into an anchor argument for Element.slideIn\noverridden in rtl mode to switch \"l\" and \"r\"</p>\n"},"createReExpander":{"!type":"fn(direction: ?, defaults: ?) -> !this"},"doClose":{"!type":"fn() -> !this"},"doCollapseExpand":{"!type":"fn(flags: ?, animate: ?) -> !this"},"endDrag":{"!type":"fn() -> !this"},"expand":{"!type":"fn(p: +Ext.panel.Panel, eOpts: ?)","!doc":"<p>Fires after this Panel has expanded.</p>\n"},"findReExpander":{"!type":"fn(direction: ?) -> !this"},"floatCollapsedPanel":{"!type":"fn() -> !this"},"getCollapsed":{"!type":"fn() -> bool|string","!doc":"<p>Returns the current collapsed state of the panel.</p>\n"},"getDefaultContentTarget":{"!type":"fn() -> !this"},"getFocusEl":{"!type":"fn() -> +Ext.Element","!doc":"<p>Returns the focus holder element associated with this Container. By default, this is the Container's target\nelement. Subclasses which use embedded focusable elements (such as Window and Button) should override this for use\nby the <a href=\"#!/api/Ext.panel.Panel-method-focus\" rel=\"Ext.panel.Panel-method-focus\" class=\"docClass\">focus</a> method.</p>\n"},"getHeader":{"!type":"fn() -> !this","!doc":"<p>Gets the <a href=\"#!/api/Ext.panel.Header\" rel=\"Ext.panel.Header\" class=\"docClass\">Header</a> for this panel.</p>\n"},"getHeaderCollapsedClasses":{"!type":"fn(header: ?) -> !this","!doc":"<p>Create the class array to add to the Header when collpsed.</p>\n"},"getHeightAuthority":{"!type":"fn() -> !this"},"getKeyMap":{"!type":"fn() -> !this"},"getOppositeDirection":{"!type":"fn(d: ?) -> !this"},"getPlaceholder":{"!type":"fn(direction: ?) -> !this"},"getReExpander":{"!type":"fn(direction: ?) -> !this"},"getState":{"!type":"fn() -> ?","!doc":"<p>The supplied default state gathering method for the AbstractComponent class.</p>\n\n<p>This method returns dimension settings such as <code>flex</code>, <code>anchor</code>, <code>width</code> and <code>height</code> along with <code>collapsed</code>\nstate.</p>\n\n<p>Subclasses which implement more complex state should call the superclass's implementation, and apply their state\nto the result if this basic state is to be saved.</p>\n\n<p>Note that Component state will only be saved if the Component has a <a href=\"#!/api/Ext.panel.Panel-cfg-stateId\" rel=\"Ext.panel.Panel-cfg-stateId\" class=\"docClass\">stateId</a> and there as a StateProvider\nconfigured for the document.</p>\n"},"getTargetEl":{"!type":"fn() -> !this","!doc":"<p>This is used to determine where to insert the 'html', 'contentEl' and 'items' in this component.</p>\n"},"getWidthAuthority":{"!type":"fn() -> !this"},"ghost":{"!type":"fn(cls: ?) -> !this","!doc":"<p>used for dragging</p>\n"},"ghostTools":{"!type":"fn() -> !this","!doc":"<p>helper function for ghost</p>\n"},"initAria":{"!type":"fn() -> !this"},"initDraggable":{"!type":"fn() -> !this"},"initHeaderAria":{"!type":"fn() -> !this"},"initResizable":{"!type":"fn() -> !this"},"initSimpleDraggable":{"!type":"fn() -> !this","!doc":"<p>Override Component.initDraggable.\nPanel (and subclasses) use the header element as the delegate.</p>\n"},"initTools":{"!type":"fn() -> !this","!doc":"<p>Tools are a Panel-specific capabilty.\nPanel uses initTools. Subclasses may contribute tools by implementing addTools.</p>\n"},"isLayoutRoot":{"!type":"fn() -> !this","!doc":"<p>Determines whether this Component is the root of a layout. This returns <code>true</code> if\nthis component can run its layout without assistance from or impact on its owner.\nIf this component cannot run its layout given these restrictions, <code>false</code> is returned\nand its owner will be considered as the next candidate for the layout root.</p>\n\n<p>Setting the <a href=\"#!/api/Ext.panel.Panel-property-_isLayoutRoot\" rel=\"Ext.panel.Panel-property-_isLayoutRoot\" class=\"docClass\">_isLayoutRoot</a> property to <code>true</code> causes this method to always\nreturn <code>true</code>. This may be useful when updating a layout of a Container which shrink\nwraps content, and you know that it will not change size, and so can safely be the\ntopmost participant in the layout run.</p>\n"},"isPlaceHolderCollapse":{"!type":"fn() -> !this"},"isVisible":{"!type":"fn(deep: ?) -> bool","!doc":"<p>Returns <code>true</code> if this component is visible.</p>\n"},"onBoxReady":{"!type":"fn() -> !this"},"onHide":{"!type":"fn() -> !this","!doc":"<p>Possibly animates down to a target element.</p>\n\n<p>Allows addition of behavior to the hide operation. After\ncalling the superclass’s onHide, the Component will be hidden.</p>\n\n<p>Gets passed the same parameters as <a href=\"#!/api/Ext.panel.Panel-event-hide\" rel=\"Ext.panel.Panel-event-hide\" class=\"docClass\">hide</a>.</p>\n"},"onMouseEnterFloated":{"!type":"fn(e: ?) -> !this"},"onMouseLeaveFloated":{"!type":"fn(e: ?) -> !this"},"onRemoved":{"!type":"fn(destroying: ?) -> !this","!doc":"<p>Method to manage awareness of when components are removed from their\nrespective Container, firing a <a href=\"#!/api/Ext.panel.Panel-event-removed\" rel=\"Ext.panel.Panel-event-removed\" class=\"docClass\">removed</a> event. References are properly\ncleaned up after removing a component from its owning container.</p>\n\n<p>Allows addition of behavior when a Component is removed from\nits parent Container. At this stage, the Component has been\nremoved from its parent Container's collection of child items,\nbut has not been destroyed (It will be destroyed if the parent\nContainer's <code>autoDestroy</code> is <code>true</code>, or if the remove call was\npassed a truthy second parameter). After calling the\nsuperclass's <code>onRemoved</code>, the <code>ownerCt</code> and the <code>refOwner</code> will not\nbe present.</p>\n"},"onShow":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the show operation. After\ncalling the superclass's onShow, the Component will be visible.</p>\n\n<p>Override in subclasses where more complex behaviour is needed.</p>\n\n<p>Gets passed the same parameters as <a href=\"#!/api/Ext.panel.Panel-method-show\" rel=\"Ext.panel.Panel-method-show\" class=\"docClass\">show</a>.</p>\n"},"placeholderCollapse":{"!type":"fn(direction: ?, animate: ?) -> !this"},"placeholderExpand":{"!type":"fn(animate: ?) -> !this"},"restoreDimension":{"!type":"fn() -> !this"},"restoreHiddenDocked":{"!type":"fn() -> !this"},"setBorder":{"!type":"fn(border: ?, targetEl: ?) -> !this"},"setGlyph":{"!type":"fn(newGlyph: number|string) -> !this","!doc":"<p>Set the glyph for the panel's header. See <a href=\"#!/api/Ext.panel.Header-cfg-glyph\" rel=\"Ext.panel.Header-cfg-glyph\" class=\"docClass\">Ext.panel.Header.glyph</a>. It will\nfire the <a href=\"#!/api/Ext.panel.Panel-event-glyphchange\" rel=\"Ext.panel.Panel-event-glyphchange\" class=\"docClass\">glyphchange</a> event after completion.</p>\n"},"setHiddenDocked":{"!type":"fn() -> !this"},"setIcon":{"!type":"fn(newIcon: string) -> !this","!doc":"<p>Set the icon for the panel's header. See <a href=\"#!/api/Ext.panel.Header-cfg-icon\" rel=\"Ext.panel.Header-cfg-icon\" class=\"docClass\">Ext.panel.Header.icon</a>. It will fire the\n<a href=\"#!/api/Ext.panel.Panel-event-iconchange\" rel=\"Ext.panel.Panel-event-iconchange\" class=\"docClass\">iconchange</a> event after completion.</p>\n"},"setIconCls":{"!type":"fn(newIconCls: string) -> !this","!doc":"<p>Set the iconCls for the panel's header. See <a href=\"#!/api/Ext.panel.Header-cfg-iconCls\" rel=\"Ext.panel.Header-cfg-iconCls\" class=\"docClass\">Ext.panel.Header.iconCls</a>. It will fire the\n<a href=\"#!/api/Ext.panel.Panel-event-iconclschange\" rel=\"Ext.panel.Panel-event-iconclschange\" class=\"docClass\">iconclschange</a> event after completion.</p>\n"},"setTitle":{"!type":"fn(newTitle: string) -> !this","!doc":"<p>Set a title for the panel's header. See <a href=\"#!/api/Ext.panel.Header-cfg-title\" rel=\"Ext.panel.Header-cfg-title\" class=\"docClass\">Ext.panel.Header.title</a>.</p>\n"},"setUI":{"!type":"fn(ui: ?) -> !this","!doc":"<p>Sets the UI for the component. This will remove any existing UIs on the component. It will also loop through any\n<code>uiCls</code> set on the component and rename them so they include the new UI.</p>\n"},"slideOutFloatedPanel":{"!type":"fn() -> !this"},"slideOutFloatedPanelBegin":{"!type":"fn() -> !this","!doc":"<p>This method begins the slide out of the floated panel.</p>\n"},"slideOutFloatedPanelEnd":{"!type":"fn() -> !this","!doc":"<p>This method cleans up after the slide out of the floated panel.</p>\n"},"toggleCollapse":{"!type":"fn() -> +Ext.panel.Panel","!doc":"<p>Shortcut for performing an <a href=\"#!/api/Ext.panel.Panel-method-expand\" rel=\"Ext.panel.Panel-method-expand\" class=\"docClass\">expand</a> or <a href=\"#!/api/Ext.panel.Panel-method-collapse\" rel=\"Ext.panel.Panel-method-collapse\" class=\"docClass\">collapse</a> based on the current state of the panel.</p>\n"},"unghost":{"!type":"fn(show: ?, matchPosition: ?) -> !this"},"updateCollapseTool":{"!type":"fn() -> !this"},"updateHeader":{"!type":"fn(force: bool) -> !this","!doc":"<p>Create, hide, or show the header component as appropriate based on the current config.</p>\n"},"beforeclose":{"!type":"fn(panel: +Ext.panel.Panel, eOpts: ?)","!doc":"<p>Fires before the user closes the panel. Return false from any listener to stop the close event being\nfired</p>\n"},"beforecollapse":{"!type":"fn(p: +Ext.panel.Panel, direction: string, animate: bool, eOpts: ?)","!doc":"<p>Fires before this panel is collapsed. Return false to prevent the collapse.</p>\n"},"beforeexpand":{"!type":"fn(p: +Ext.panel.Panel, animate: bool, eOpts: ?)","!doc":"<p>Fires before this panel is expanded. Return false to prevent the expand.</p>\n"},"float":{"!type":"fn(eOpts: ?)","!doc":"<p>Fires after a collapsed Panel has been \"floated\" by clicking on\nit's header. Only applicable when the Panel is an item in a\n<a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">Border Layout</a>.</p>\n"},"glyphchange":{"!type":"fn(this: +Ext.panel.Panel, newGlyph: number|string, oldGlyph: number|string, eOpts: ?)","!doc":"<p>Fired when the Panel glyph has been changed by the <a href=\"#!/api/Ext.panel.Panel-method-setGlyph\" rel=\"Ext.panel.Panel-method-setGlyph\" class=\"docClass\">setGlyph</a> method.</p>\n"},"iconchange":{"!type":"fn(p: +Ext.panel.Panel, newIcon: string, oldIcon: string, eOpts: ?)","!doc":"<p>Fires after the Panel icon has been set or changed.</p>\n"},"iconclschange":{"!type":"fn(p: +Ext.panel.Panel, newIconCls: string, oldIconCls: string, eOpts: ?)","!doc":"<p>Fires after the Panel iconCls has been set or changed.</p>\n"},"titlechange":{"!type":"fn(p: +Ext.panel.Panel, newTitle: string, oldTitle: string, eOpts: ?)","!doc":"<p>Fires after the Panel title has been set or changed.</p>\n"},"unfloat":{"!type":"fn(eOpts: ?)","!doc":"<p>Fires after a \"floated\" Panel has returned to it's collapsed state\nas a result of the mouse leaving the Panel. Only applicable when\nthe Panel is an item in a\n<a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">Border Layout</a>.</p>\n"}}},"Proxy":{"!doc":"<p>A custom drag proxy implementation specific to <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>s. This class\nis primarily used internally for the Panel's drag drop implementation, and\nshould never need to be created directly.</p>\n","!type":"fn(panel: +Ext.panel.Panel, config?: Ext_panel_Proxy_cfg)","prototype":{"!proto":"Ext.Base.prototype","insertProxy":{"!type":"bool","!doc":"<p>True to insert a placeholder proxy element while dragging the panel, false to drag with no proxy.\nMost Panels are not absolute positioned and therefore we need to reserve this space.</p>\n"},"moveOnDrag":{"!type":"bool","!doc":"<p>True to move the panel to the dragged position when dropped</p>\n"},"panel":{"!type":"+Ext.panel.Panel"},"getEl":{"!type":"fn() -> +Ext.Element","!doc":"<p>Gets the proxy's element</p>\n"},"getGhost":{"!type":"fn() -> +Ext.panel.Panel","!doc":"<p>Gets the proxy's ghost Panel</p>\n"},"getProxy":{"!type":"fn() -> +Ext.Element","!doc":"<p>Gets the proxy element. This is the element that represents where the\nPanel was before we started the drag operation.</p>\n"},"hide":{"!type":"fn() -> !this","!doc":"<p>Hides the proxy</p>\n"},"moveProxy":{"!type":"fn(parentNode: +HTMLElement, before?: +HTMLElement) -> !this","!doc":"<p>Moves the proxy to a different position in the DOM.  This is typically\ncalled while dragging the Panel to keep the proxy sync'd to the Panel's\nlocation.</p>\n"},"repair":{"!type":"fn(xy: ?, callback: ?, scope: ?) -> !this","!doc":"<p>private</p>\n"},"reset":{"!type":"fn() -> !this"},"setStatus":{"!type":"fn() -> !this","!doc":"<p>private overrides</p>\n"},"show":{"!type":"fn() -> !this","!doc":"<p>Shows the proxy</p>\n"},"stop":{"!type":"fn() -> !this"},"sync":{"!type":"fn() -> !this"},"update":{"!type":"fn() -> !this"}}},"Table":{"!doc":"<p>TablePanel is the basis of both <a href=\"#!/api/Ext.tree.Panel\" rel=\"Ext.tree.Panel\" class=\"docClass\">TreePanel</a> and <a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">GridPanel</a>.</p>\n\n<p>TablePanel aggregates:</p>\n\n<ul>\n<li>a Selection Model</li>\n<li>a View</li>\n<li>a Store</li>\n<li>Scrollers</li>\n<li><a href=\"#!/api/Ext.grid.header.Container\" rel=\"Ext.grid.header.Container\" class=\"docClass\">Ext.grid.header.Container</a></li>\n</ul>\n\n","!type":"fn(config: +Ext.Element|string|Ext_panel_Table_cfg)","prototype":{"!proto":"Ext.panel.Panel.prototype","allowDeselect":{"!type":"bool","!doc":"<p>True to allow deselecting a record. This config is forwarded to <a href=\"#!/api/Ext.selection.Model-cfg-allowDeselect\" rel=\"Ext.selection.Model-cfg-allowDeselect\" class=\"docClass\">Ext.selection.Model.allowDeselect</a>.</p>\n"},"columnLines":{"!type":"bool","!doc":"<p>Adds column line styling</p>\n"},"columns":{"!type":"[+Ext.grid.column.Column]|?","!doc":"<p>An array of <a href=\"#!/api/Ext.grid.column.Column\" rel=\"Ext.grid.column.Column\" class=\"docClass\">column</a> definition objects which define all columns that appear in this\ngrid. Each column definition provides the header text for the column, and a definition of where the data for that\ncolumn comes from.</p>\n\n<p>This can also be a configuration object for a {<a href=\"#!/api/Ext.grid.header.Container\" rel=\"Ext.grid.header.Container\" class=\"docClass\">Ext.grid.header.Container</a> HeaderContainer} which may override\ncertain default configurations if necessary. For example, the special layout may be overridden to use a simpler\nlayout, or one can set default values shared by all columns:</p>\n\n<pre><code>columns: {\n    items: [\n        {\n            text: \"Column A\"\n            dataIndex: \"field_A\"\n        },{\n            text: \"Column B\",\n            dataIndex: \"field_B\"\n        }, \n        ...\n    ],\n    defaults: {\n        flex: 1\n    }\n}\n</code></pre>\n"},"deferRowRender":{"!type":"bool","!doc":"<p>Defaults to true to enable deferred row rendering.</p>\n\n<p>This allows the View to execute a refresh quickly, with the expensive update of the row structure deferred so\nthat layouts with GridPanels appear, and lay out more quickly.</p>\n"},"disableSelection":{"!type":"bool","!doc":"<p>True to disable selection model.</p>\n"},"emptyText":{"!type":"string","!doc":"<p>Default text (html tags are accepted) to display in the Panel body when the Store\nis empty. When specified, and the Store is empty, the text will be rendered inside a DIV with the CSS class \"x-grid-empty\".</p>\n"},"enableColumnHide":{"!type":"bool","!doc":"<p>False to disable column hiding within this grid.</p>\n"},"enableColumnMove":{"!type":"bool","!doc":"<p>False to disable column dragging within this grid.</p>\n"},"enableColumnResize":{"!type":"bool","!doc":"<p>False to disable column resizing within this grid.</p>\n"},"enableLocking":{"!type":"bool","!doc":"<p>Configure as <code>true</code> to enable locking support for this grid. Alternatively, locking will also be automatically\nenabled if any of the columns in the <a href=\"#!/api/Ext.panel.Table-cfg-columns\" rel=\"Ext.panel.Table-cfg-columns\" class=\"docClass\">columns</a> configuration contain a <a href=\"#!/api/Ext.grid.column.Column-cfg-locked\" rel=\"Ext.grid.column.Column-cfg-locked\" class=\"docClass\">locked</a> config option.</p>\n\n<p>A locking grid is processed in a special way. The configuration options are cloned and <em>two</em> grids are created to be the locked (left) side\nand the normal (right) side. This Panel becomes merely a <a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">container</a> which arranges both in an <a href=\"#!/api/Ext.layout.container.HBox\" rel=\"Ext.layout.container.HBox\" class=\"docClass\">HBox</a> layout.</p>\n\n<p><a href=\"#!/api/Ext.panel.Table-cfg-plugins\" rel=\"Ext.panel.Table-cfg-plugins\" class=\"docClass\">Plugins</a> may be targeted at either locked, or unlocked grid, or, both, in which case the plugin is cloned and used on both sides.</p>\n\n<p>Plugins may also be targeted at the containing locking Panel.</p>\n\n<p>This is configured by specifying a <code>lockableScope</code> property in your plugin which may have the following values:</p>\n\n<ul>\n<li><code>\"both\"</code> (the default) - The plugin is added to both grids</li>\n<li><code>\"top\"</code> - The plugin is added to the containing Panel</li>\n<li><code>\"locked\"</code> - The plugin is added to the locked (left) grid</li>\n<li><code>\"normal\"</code> - The plugin is added to the normal (right) grid</li>\n</ul>\n\n\n<p>If <code>both</code> is specified, then each copy of the plugin gains a property <code>lockingPartner</code> which references its sibling on the other side so that they\ncan synchronize operations is necessary.</p>\n\n<p><a href=\"#!/api/Ext.panel.Table-cfg-features\" rel=\"Ext.panel.Table-cfg-features\" class=\"docClass\">Features</a> may also be configured with <code>lockableScope</code> and may target the locked grid, the normal grid or both grids. Features\nalso get a <code>lockingPartner</code> reference injected.</p>\n"},"features":{"!type":"[+Ext.grid.feature.Feature]|[?]|[+Ext.enums.Feature]","!doc":"<p>An array of grid Features to be added to this grid. Can also be just a single feature instead of array.</p>\n\n<p>Features config behaves much like <a href=\"#!/api/Ext.panel.Table-cfg-plugins\" rel=\"Ext.panel.Table-cfg-plugins\" class=\"docClass\">plugins</a>.\nA feature can be added by either directly referencing the instance:</p>\n\n<pre><code>features: [<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.feature.GroupingSummary\" rel=\"Ext.grid.feature.GroupingSummary\" class=\"docClass\">Ext.grid.feature.GroupingSummary</a>', {groupHeaderTpl: 'Subject: {name}'})],\n</code></pre>\n\n<p>By using config object with ftype:</p>\n\n<pre><code>features: [{ftype: 'groupingsummary', groupHeaderTpl: 'Subject: {name}'}],\n</code></pre>\n\n<p>Or with just a ftype:</p>\n\n<pre><code>features: ['grouping', 'groupingsummary'],\n</code></pre>\n\n<p>See <a href=\"#!/api/Ext.enums.Feature\" rel=\"Ext.enums.Feature\" class=\"docClass\">Ext.enums.Feature</a> for list of all ftypes.</p>\n"},"forceFit":{"!type":"bool","!doc":"<p>True to force the columns to fit into the available width. Headers are first sized according to configuration,\nwhether that be a specific width, or flex. Then they are all proportionally changed in width so that the entire\ncontent width is used. For more accurate control, it is more optimal to specify a flex setting on the columns\nthat are to be stretched &amp; explicit widths on columns that are not.</p>\n"},"hideHeaders":{"!type":"bool","!doc":"<p>True to hide column headers.</p>\n"},"layout":{"!type":"+Ext.enums.Layout|?","!doc":"<p><strong>Important</strong>: In order for child items to be correctly sized and\npositioned, typically a layout manager <strong>must</strong> be specified through\nthe <code>layout</code> configuration option.</p>\n\n<p>The sizing and positioning of child <a href=\"#!/api/Ext.panel.Table-cfg-items\" rel=\"Ext.panel.Table-cfg-items\" class=\"docClass\">items</a> is the responsibility of\nthe Container's layout manager which creates and manages the type of layout\nyou have in mind.  For example:</p>\n\n<p>If the layout configuration is not explicitly specified for\na general purpose container (e.g. Container or Panel) the\n<a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used\nwhich does nothing but render child components sequentially into the\nContainer (no sizing or positioning will be performed in this situation).</p>\n\n<p><strong>layout</strong> may be specified as either as an Object or as a String:</p>\n\n<h2>Specify as an Object</h2>\n\n<p>Example usage:</p>\n\n<pre><code>layout: {\n    type: 'vbox',\n    align: 'left'\n}\n</code></pre>\n\n<ul>\n<li><p><strong>type</strong></p>\n\n<p>The layout type to be used for this container.  If not specified,\na default <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">Ext.layout.container.Auto</a> will be created and used.</p>\n\n<p>Valid layout <code>type</code> values are listed in <a href=\"#!/api/Ext.enums.Layout\" rel=\"Ext.enums.Layout\" class=\"docClass\">Ext.enums.Layout</a>.</p></li>\n<li><p>Layout specific configuration properties</p>\n\n<p>Additional layout specific configuration properties may also be\nspecified. For complete details regarding the valid config options for\neach layout type, see the layout class corresponding to the <code>type</code>\nspecified.</p></li>\n</ul>\n\n\n<h2>Specify as a String</h2>\n\n<p>Example usage:</p>\n\n<pre><code>layout: 'vbox'\n</code></pre>\n\n<ul>\n<li><p><strong>layout</strong></p>\n\n<p>The layout <code>type</code> to be used for this container (see <a href=\"#!/api/Ext.enums.Layout\" rel=\"Ext.enums.Layout\" class=\"docClass\">Ext.enums.Layout</a>\nfor list of valid values).</p>\n\n<p>Additional layout specific configuration properties. For complete\ndetails regarding the valid config options for each layout type, see the\nlayout class corresponding to the <code>layout</code> specified.</p></li>\n</ul>\n\n\n<h2>Configuring the default layout type</h2>\n\n<p>If a certain Container class has a default layout (For example a <a href=\"#!/api/Ext.toolbar.Toolbar\" rel=\"Ext.toolbar.Toolbar\" class=\"docClass\">Toolbar</a>\nwith a default <code>Box</code> layout), then to simply configure the default layout,\nuse an object, but without the <code>type</code> property:</p>\n\n<pre><code>xtype: 'toolbar',\nlayout: {\n    pack: 'center'\n}\n</code></pre>\n"},"multiSelect":{"!type":"bool","!doc":"<p>True to enable 'MULTI' selection mode on selection model.</p>\n"},"rowLines":{"!type":"bool","!doc":"<p>Adds row line styling</p>\n"},"scroll":{"!type":"string|bool","!doc":"<p>Scrollers configuration. Valid values are 'both', 'horizontal' or 'vertical'.\nTrue implies 'both'. False implies 'none'.</p>\n"},"sealedColumns":{"!type":"bool","!doc":"<p>True to constrain column dragging so that a column cannot be dragged in or out of it's\ncurrent group. Only relevant while <a href=\"#!/api/Ext.panel.Table-cfg-enableColumnMove\" rel=\"Ext.panel.Table-cfg-enableColumnMove\" class=\"docClass\">enableColumnMove</a> is enabled.</p>\n"},"selModel":{"!type":"+Ext.selection.Model|?","!doc":"<p>A <a href=\"#!/api/Ext.selection.Model\" rel=\"Ext.selection.Model\" class=\"docClass\">selection model</a> instance or config object.  In latter case the <a href=\"#!/api/Ext.panel.Table-cfg-selType\" rel=\"Ext.panel.Table-cfg-selType\" class=\"docClass\">selType</a>\nconfig option determines to which type of selection model this config is applied.</p>\n"},"selType":{"!type":"string","!doc":"<p>An xtype of selection model to use. Defaults to 'rowmodel'. This is used to create selection model if just\na config object or nothing at all given in <a href=\"#!/api/Ext.panel.Table-cfg-selModel\" rel=\"Ext.panel.Table-cfg-selModel\" class=\"docClass\">selModel</a> config.</p>\n"},"simpleSelect":{"!type":"bool","!doc":"<p>True to enable 'SIMPLE' selection mode on selection model.</p>\n"},"sortableColumns":{"!type":"bool","!doc":"<p>False to disable column sorting via clicking the header and via the Sorting menu items.</p>\n"},"store":{"!type":"+Ext.data.Store","!doc":"<p>The <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Store</a> the grid should use as its data source.</p>\n"},"verticalScroller":{"!type":"?","!doc":"<p>A config object to be used when configuring the <a href=\"#!/api/Ext.grid.plugin.BufferedRenderer\" rel=\"Ext.grid.plugin.BufferedRenderer\" class=\"docClass\">scroll monitor</a> to control\nrefreshing of data in an \"infinite grid\".</p>\n\n<p>Configurations of this object allow fine tuning of data caching which can improve performance and usability\nof the infinite grid.</p>\n"},"view":{"!type":"+Ext.view.Table","!doc":"<p>The <a href=\"#!/api/Ext.view.Table\" rel=\"Ext.view.Table\" class=\"docClass\">Ext.view.Table</a> used by the grid. Use <a href=\"#!/api/Ext.panel.Table-cfg-viewConfig\" rel=\"Ext.panel.Table-cfg-viewConfig\" class=\"docClass\">viewConfig</a> to just supply some config options to\nview (instead of creating an entire View instance).</p>\n"},"viewConfig":{"!type":"?","!doc":"<p>A config object that will be applied to the grid's UI view. Any of the config options available for\n<a href=\"#!/api/Ext.view.Table\" rel=\"Ext.view.Table\" class=\"docClass\">Ext.view.Table</a> can be specified here. This option is ignored if <a href=\"#!/api/Ext.panel.Table-cfg-view\" rel=\"Ext.panel.Table-cfg-view\" class=\"docClass\">view</a> is specified.</p>\n"},"viewType":{"!type":"string","!doc":"<p>An xtype of view to use. This is automatically set to 'gridview' by <a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Grid</a>\nand to 'treeview' by <a href=\"#!/api/Ext.tree.Panel\" rel=\"Ext.tree.Panel\" class=\"docClass\">Tree</a>.</p>\n"},"emptyCls":{"!type":"string"},"extraBaseCls":{"!type":"string"},"extraBodyCls":{"!type":"string"},"hasView":{"!type":"bool","!doc":"<p>True to indicate that a view has been injected into the panel.</p>\n"},"hiddenHeaderCls":{"!type":"string"},"hiddenHeaderCtCls":{"!type":"string"},"noRowLinesCls":{"!type":"string"},"optimizedColumnMove":{"!type":"bool","!doc":"<p>If you are writing a grid plugin or a {<a href=\"#!/api/Ext.grid.feature.Feature\" rel=\"Ext.grid.feature.Feature\" class=\"docClass\">Ext.grid.feature.Feature</a> Feature} which creates a column-based structure which\nneeds a view refresh when columns are moved, then set this property in the grid.</p>\n\n<p>An example is the built in <a href=\"#!/api/Ext.grid.feature.AbstractSummary\" rel=\"Ext.grid.feature.AbstractSummary\" class=\"docClass\">Summary</a> Feature. This creates summary rows, and the\nsummary columns must be in the same order as the data columns. This plugin sets the <code>optimizedColumnMove</code> to `false.</p>\n"},"resizeMarkerCls":{"!type":"string"},"rowLinesCls":{"!type":"string"},"scrollerOwner":{"!type":"bool","!doc":"<p>private property used to determine where to go down to find views\nthis is here to support locking.</p>\n"},"afterCollapse":{"!type":"fn() -> !this","!doc":"<p>Invoked after the Panel is Collapsed.</p>\n"},"afterExpand":{"!type":"fn() -> !this","!doc":"<p>Invoked after the Panel is Expanded.</p>\n"},"applyState":{"!type":"fn(state: ?) -> !this","!doc":"<p>Applies the state to the object. This should be overridden in subclasses to do\nmore complex state operations. By default it applies the state properties onto\nthe current object.</p>\n"},"beforeDestroy":{"!type":"fn() -> !this","!doc":"<p>Invoked before the Component is destroyed.</p>\n"},"bindStore":{"!type":"fn(store: ?, initial: ?) -> !this"},"delayScroll":{"!type":"fn() -> !this"},"determineScrollbars":{"!type":"fn() -> !this","!doc":"<p>This method is obsolete in 4.1. The closest equivalent in\n4.1 is <a href=\"#!/api/Ext.panel.Table-method-doLayout\" rel=\"Ext.panel.Table-method-doLayout\" class=\"docClass\">doLayout</a>, but it is also possible that no\nlayout is needed.</p>\n"},"getEditorParent":{"!type":"fn() -> !this"},"getLhsMarker":{"!type":"fn() -> !this","!doc":"<p>Gets left hand side marker for header resizing.</p>\n"},"getRhsMarker":{"!type":"fn() -> !this","!doc":"<p>Gets right hand side marker for header resizing.</p>\n"},"getScrollTarget":{"!type":"fn() -> !this"},"getScrollerOwner":{"!type":"fn() -> !this"},"getSelectionModel":{"!type":"fn() -> +Ext.selection.Model","!doc":"<p>Returns the selection model being used and creates it via the configuration if it has not been created already.</p>\n"},"getState":{"!type":"fn() -> ?","!doc":"<p>The supplied default state gathering method for the AbstractComponent class.</p>\n\n<p>This method returns dimension settings such as <code>flex</code>, <code>anchor</code>, <code>width</code> and <code>height</code> along with <code>collapsed</code>\nstate.</p>\n\n<p>Subclasses which implement more complex state should call the superclass's implementation, and apply their state\nto the result if this basic state is to be saved.</p>\n\n<p>Note that Component state will only be saved if the Component has a <a href=\"#!/api/Ext.panel.Table-cfg-stateId\" rel=\"Ext.panel.Table-cfg-stateId\" class=\"docClass\">stateId</a> and there as a StateProvider\nconfigured for the document.</p>\n"},"getStore":{"!type":"fn() -> +Ext.data.Store","!doc":"<p>Returns the store associated with this Panel.</p>\n"},"getView":{"!type":"fn() -> +Ext.view.Table","!doc":"<p>Gets the view for this panel.</p>\n"},"hasLockedColumns":{"!type":"fn(columns: ?) -> !this","!doc":"<p>Private. Determine if there are any columns with a locked configuration option</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>The initComponent template method is an important initialization step for a Component. It is intended to be\nimplemented by each subclass of <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> to provide any needed constructor logic. The\ninitComponent method of the class being created is called first, with each initComponent method\nup the hierarchy to <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> being called thereafter. This makes it easy to implement and,\nif needed, override the constructor logic of the Component at any step in the hierarchy.</p>\n\n<p>The initComponent method <strong>must</strong> contain a call to <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a> in order\nto ensure that the parent class' initComponent method is also called.</p>\n\n<p>All config options passed to the constructor are applied to <code>this</code> before initComponent is called,\nso you can simply access them with <code>this.someOption</code>.</p>\n\n<p>The following example demonstrates using a dynamic string for the text of a button at the time of\ninstantiation of the class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('DynamicButtonText', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n\n    initComponent: function() {\n        this.text = new Date();\n        this.renderTo = <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>();\n        this.callParent();\n    }\n});\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function() {\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('DynamicButtonText');\n});\n</code></pre>\n"},"invalidateScroller":{"!type":"fn() -> !this","!doc":"<p>This method is obsolete in 4.1. The closest equivalent in 4.1 is\n<a href=\"#!/api/Ext.AbstractComponent-method-updateLayout\" rel=\"Ext.AbstractComponent-method-updateLayout\" class=\"docClass\">Ext.AbstractComponent.updateLayout</a>, but it is also possible that no layout\nis needed.</p>\n"},"onDestroy":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the destroy operation.\nAfter calling the superclass's onDestroy, the Component will be destroyed.</p>\n"},"onHeaderHide":{"!type":"fn(headerCt: ?, header: ?) -> !this","!doc":"<p>Section onHeaderHide is invoked after view.</p>\n"},"onHeaderMove":{"!type":"fn(headerCt: ?, header: ?, colsToMove: ?, fromIdx: ?, toIdx: ?) -> !this","!doc":"<p>Update the view when a header moves</p>\n"},"onHeaderResize":{"!type":"fn() -> !this"},"onHeaderShow":{"!type":"fn(headerCt: ?, header: ?) -> !this"},"onHorizontalScroll":{"!type":"fn(event: ?, target: ?) -> !this"},"onRestoreHorzScroll":{"!type":"fn() -> !this","!doc":"<p>Tracks when things happen to the view and preserves the horizontal scroll position.</p>\n"},"onStoreLoad":{"!type":"fn() -> !this","!doc":"<p>template method meant to be overriden</p>\n"},"onViewReady":{"!type":"fn() -> !this","!doc":"<p>Fires the TablePanel's viewready event when the view declares that its internal DOM is ready</p>\n"},"processEvent":{"!type":"fn(type: string, view: +Ext.view.Table, cell: +HTMLElement, recordIndex: number, cellIndex: number, e: +Ext.EventObject) -> !this","!doc":"<p>Processes UI events from the view. Propagates them to whatever internal Components need to process them.</p>\n"},"reconfigure":{"!type":"fn(store: ?, columns: ?) -> !this","!doc":"<p>documented on GridPanel</p>\n"},"relayHeaderCtEvents":{"!type":"fn(headerCt: ?) -> !this"},"restoreScrollPos":{"!type":"fn() -> !this"},"saveScrollPos":{"!type":"fn() -> !this"},"scrollByDeltaX":{"!type":"fn(xDelta: ?, animate: ?) -> !this"},"scrollByDeltaY":{"!type":"fn(yDelta: ?, animate: ?) -> !this"},"setAutoScroll":{"!type":"fn() -> !this","!doc":"<p>autoScroll is never valid for all classes which extend TablePanel.</p>\n"},"syncHorizontalScroll":{"!type":"fn(left: ?, setBody: ?) -> !this"},"unbindStore":{"!type":"fn() -> !this"},"beforecellclick":{"!type":"fn(this: +Ext.view.Table, td: +HTMLElement, cellIndex: number, record: +Ext.data.Model, tr: +HTMLElement, rowIndex: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fired before the cell click is processed. Return false to cancel the default action.</p>\n"},"beforecellcontextmenu":{"!type":"fn(this: +Ext.view.Table, td: +HTMLElement, cellIndex: number, record: +Ext.data.Model, tr: +HTMLElement, rowIndex: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fired before the cell right click is processed. Return false to cancel the default action.</p>\n"},"beforecelldblclick":{"!type":"fn(this: +Ext.view.Table, td: +HTMLElement, cellIndex: number, record: +Ext.data.Model, tr: +HTMLElement, rowIndex: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fired before the cell double click is processed. Return false to cancel the default action.</p>\n"},"beforecellkeydown":{"!type":"fn(this: +Ext.view.Table, td: +HTMLElement, cellIndex: number, record: +Ext.data.Model, tr: +HTMLElement, rowIndex: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fired before the cell key down is processed. Return false to cancel the default action.</p>\n"},"beforecellmousedown":{"!type":"fn(this: +Ext.view.Table, td: +HTMLElement, cellIndex: number, record: +Ext.data.Model, tr: +HTMLElement, rowIndex: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fired before the cell mouse down is processed. Return false to cancel the default action.</p>\n"},"beforecellmouseup":{"!type":"fn(this: +Ext.view.Table, td: +HTMLElement, cellIndex: number, record: +Ext.data.Model, tr: +HTMLElement, rowIndex: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fired before the cell mouse up is processed. Return false to cancel the default action.</p>\n"},"beforecontainerclick":{"!type":"fn(this: +Ext.view.View, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires before the click event on the container is processed. Returns false to cancel the default action.</p>\n"},"beforecontainercontextmenu":{"!type":"fn(this: +Ext.view.View, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires before the contextmenu event on the container is processed. Returns false to cancel the default action.</p>\n"},"beforecontainerdblclick":{"!type":"fn(this: +Ext.view.View, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires before the dblclick event on the container is processed. Returns false to cancel the default action.</p>\n"},"beforecontainermousedown":{"!type":"fn(this: +Ext.view.View, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires before the mousedown event on the container is processed. Returns false to cancel the default action.</p>\n"},"beforecontainermouseout":{"!type":"fn(this: +Ext.view.View, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires before the mouseout event on the container is processed. Returns false to cancel the default action.</p>\n"},"beforecontainermouseover":{"!type":"fn(this: +Ext.view.View, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires before the mouseover event on the container is processed. Returns false to cancel the default action.</p>\n"},"beforecontainermouseup":{"!type":"fn(this: +Ext.view.View, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires before the mouseup event on the container is processed. Returns false to cancel the default action.</p>\n"},"beforedeselect":{"!type":"fn(this: +Ext.selection.RowModel, record: +Ext.data.Model, index: number, eOpts: ?)","!doc":"<p>Fired before a record is deselected. If any listener returns false, the\ndeselection is cancelled.</p>\n"},"beforeitemclick":{"!type":"fn(this: +Ext.view.View, record: +Ext.data.Model, item: +HTMLElement, index: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires before the click event on an item is processed. Returns false to cancel the default action.</p>\n"},"beforeitemcontextmenu":{"!type":"fn(this: +Ext.view.View, record: +Ext.data.Model, item: +HTMLElement, index: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires before the contextmenu event on an item is processed. Returns false to cancel the default action.</p>\n"},"beforeitemdblclick":{"!type":"fn(this: +Ext.view.View, record: +Ext.data.Model, item: +HTMLElement, index: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires before the dblclick event on an item is processed. Returns false to cancel the default action.</p>\n"},"beforeitemmousedown":{"!type":"fn(this: +Ext.view.View, record: +Ext.data.Model, item: +HTMLElement, index: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires before the mousedown event on an item is processed. Returns false to cancel the default action.</p>\n"},"beforeitemmouseenter":{"!type":"fn(this: +Ext.view.View, record: +Ext.data.Model, item: +HTMLElement, index: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires before the mouseenter event on an item is processed. Returns false to cancel the default action.</p>\n"},"beforeitemmouseleave":{"!type":"fn(this: +Ext.view.View, record: +Ext.data.Model, item: +HTMLElement, index: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires before the mouseleave event on an item is processed. Returns false to cancel the default action.</p>\n"},"beforeitemmouseup":{"!type":"fn(this: +Ext.view.View, record: +Ext.data.Model, item: +HTMLElement, index: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires before the mouseup event on an item is processed. Returns false to cancel the default action.</p>\n"},"beforeselect":{"!type":"fn(this: +Ext.selection.RowModel, record: +Ext.data.Model, index: number, eOpts: ?)","!doc":"<p>Fired before a record is selected. If any listener returns false, the\nselection is cancelled.</p>\n"},"cellclick":{"!type":"fn(this: +Ext.view.Table, td: +HTMLElement, cellIndex: number, record: +Ext.data.Model, tr: +HTMLElement, rowIndex: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fired when table cell is clicked.</p>\n"},"cellcontextmenu":{"!type":"fn(this: +Ext.view.Table, td: +HTMLElement, cellIndex: number, record: +Ext.data.Model, tr: +HTMLElement, rowIndex: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fired when table cell is right clicked.</p>\n"},"celldblclick":{"!type":"fn(this: +Ext.view.Table, td: +HTMLElement, cellIndex: number, record: +Ext.data.Model, tr: +HTMLElement, rowIndex: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fired when table cell is double clicked.</p>\n"},"cellkeydown":{"!type":"fn(this: +Ext.view.Table, td: +HTMLElement, cellIndex: number, record: +Ext.data.Model, tr: +HTMLElement, rowIndex: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fired when the keydown event is captured on the cell.</p>\n"},"cellmousedown":{"!type":"fn(this: +Ext.view.Table, td: +HTMLElement, cellIndex: number, record: +Ext.data.Model, tr: +HTMLElement, rowIndex: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fired when the mousedown event is captured on the cell.</p>\n"},"cellmouseup":{"!type":"fn(this: +Ext.view.Table, td: +HTMLElement, cellIndex: number, record: +Ext.data.Model, tr: +HTMLElement, rowIndex: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fired when the mouseup event is captured on the cell.</p>\n"},"columnhide":{"!type":"fn(ct: +Ext.grid.header.Container, column: +Ext.grid.column.Column, eOpts: ?)"},"columnmove":{"!type":"fn(ct: +Ext.grid.header.Container, column: +Ext.grid.column.Column, fromIdx: number, toIdx: number, eOpts: ?)"},"columnresize":{"!type":"fn(ct: +Ext.grid.header.Container, column: +Ext.grid.column.Column, width: number, eOpts: ?)"},"columnschanged":{"!type":"fn(ct: +Ext.grid.header.Container, eOpts: ?)","!doc":"<p>Fired after the columns change in any way, when a column has been hidden or shown, or when a column\nis added to or removed from this header container.</p>\n"},"columnshow":{"!type":"fn(ct: +Ext.grid.header.Container, column: +Ext.grid.column.Column, eOpts: ?)"},"containerclick":{"!type":"fn(this: +Ext.view.View, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when the container is clicked.</p>\n"},"containercontextmenu":{"!type":"fn(this: +Ext.view.View, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when the container is right clicked.</p>\n"},"containerdblclick":{"!type":"fn(this: +Ext.view.View, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when the container is double clicked.</p>\n"},"containermouseout":{"!type":"fn(this: +Ext.view.View, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when you move the mouse out of the container.</p>\n"},"containermouseover":{"!type":"fn(this: +Ext.view.View, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when you move the mouse over the container.</p>\n"},"containermouseup":{"!type":"fn(this: +Ext.view.View, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when there is a mouse up on the container</p>\n"},"deselect":{"!type":"fn(this: +Ext.selection.RowModel, record: +Ext.data.Model, index: number, eOpts: ?)","!doc":"<p>Fired after a record is deselected</p>\n"},"filterchange":{"!type":"fn(store: +Ext.data.Store, filters: [+Ext.util.Filter], eOpts: ?)","!doc":"<p>Fired whenever the filter set changes.</p>\n"},"headerclick":{"!type":"fn(ct: +Ext.grid.header.Container, column: +Ext.grid.column.Column, e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)"},"headercontextmenu":{"!type":"fn(ct: +Ext.grid.header.Container, column: +Ext.grid.column.Column, e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)"},"headertriggerclick":{"!type":"fn(ct: +Ext.grid.header.Container, column: +Ext.grid.column.Column, e: +Ext.EventObject, t: +HTMLElement, eOpts: ?)"},"itemclick":{"!type":"fn(this: +Ext.view.View, record: +Ext.data.Model, item: +HTMLElement, index: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when an item is clicked.</p>\n"},"itemcontextmenu":{"!type":"fn(this: +Ext.view.View, record: +Ext.data.Model, item: +HTMLElement, index: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when an item is right clicked.</p>\n"},"itemdblclick":{"!type":"fn(this: +Ext.view.View, record: +Ext.data.Model, item: +HTMLElement, index: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when an item is double clicked.</p>\n"},"itemmousedown":{"!type":"fn(this: +Ext.view.View, record: +Ext.data.Model, item: +HTMLElement, index: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when there is a mouse down on an item</p>\n"},"itemmouseenter":{"!type":"fn(this: +Ext.view.View, record: +Ext.data.Model, item: +HTMLElement, index: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when the mouse enters an item.</p>\n"},"itemmouseleave":{"!type":"fn(this: +Ext.view.View, record: +Ext.data.Model, item: +HTMLElement, index: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when the mouse leaves an item.</p>\n"},"itemmouseup":{"!type":"fn(this: +Ext.view.View, record: +Ext.data.Model, item: +HTMLElement, index: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when there is a mouse up on an item</p>\n"},"select":{"!type":"fn(this: +Ext.selection.RowModel, record: +Ext.data.Model, index: number, eOpts: ?)","!doc":"<p>Fired after a record is selected</p>\n"},"selectionchange":{"!type":"fn(this: +Ext.selection.Model, selected: [+Ext.data.Model], eOpts: ?)","!doc":"<p>Fired after a selection change has occurred</p>\n"},"sortchange":{"!type":"fn(ct: +Ext.grid.header.Container, column: +Ext.grid.column.Column, direction: string, eOpts: ?)"},"viewready":{"!type":"fn(this: +Ext.panel.Table, eOpts: ?)","!doc":"<p>Fires when the grid view is available (use this for selecting a default row).</p>\n"}}},"Tool":{"!doc":"<p>This class is used to display small visual icons in the header of a panel. There are a set of\n25 icons that can be specified by using the <a href=\"#!/api/Ext.panel.Tool-cfg-type\" rel=\"Ext.panel.Tool-cfg-type\" class=\"docClass\">type</a> config. The <a href=\"#!/api/Ext.panel.Tool-cfg-callback\" rel=\"Ext.panel.Tool-cfg-callback\" class=\"docClass\">callback</a> config\ncan be used to provide a function that will respond to any click events. In general, this class\nwill not be instantiated directly, rather it will be created by specifying the <a href=\"#!/api/Ext.panel.Panel-cfg-tools\" rel=\"Ext.panel.Panel-cfg-tools\" class=\"docClass\">Ext.panel.Panel.tools</a>\nconfiguration on the Panel itself.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>', {\n    width: 200,\n    height: 200,\n    renderTo: document.body,\n    title: 'A Panel',\n    tools: [{\n        type: 'help',\n        callback: function() {\n            // show help here\n        }\n    }, {\n        itemId: 'refresh',\n        type: 'refresh',\n        hidden: true,\n        callback: function() {\n            // do refresh\n        }\n    }, {\n        type: 'search',\n        callback: function (panel) {\n            // do search\n            panel.down('#refresh').show();\n        }\n    }]\n});\n</code></pre>\n\n<p>The <code>callback</code> config was added in Ext JS 4.2.1 as an alternative to <a href=\"#!/api/Ext.panel.Tool-cfg-handler\" rel=\"Ext.panel.Tool-cfg-handler\" class=\"docClass\">handler</a>\nto provide a more convenient list of arguments. In Ext JS 4.2.1 it is also possible to\npass a method name instead of a direct function:</p>\n\n<pre><code> tools: [{\n     type: 'help',\n     callback: 'onHelp',\n     scope: this\n },\n ...\n</code></pre>\n\n<p>The <code>callback</code> (or <code>handler</code>) name is looked up on the <code>scope</code> which will also be the\n<code>this</code> reference when the method is called.</p>\n","!type":"fn(config: +Ext.Element|string|Ext_panel_Tool_cfg)","prototype":{"!proto":"Ext.Component.prototype","baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this component's element. This will also be prepended to elements within this\ncomponent like Panel's body will get a class <code>x-panel-body</code>. This means that if you create a subclass of Panel, and\nyou want it to get all the Panels styling for the element and the body, you leave the <code>baseCls</code> <code>x-panel</code> and use\n<code>componentCls</code> to add specific styling for this component.</p>\n"},"callback":{"!type":"fn()","!doc":"<p>A function to execute when the tool is clicked.</p>\n"},"disabledCls":{"!type":"string","!doc":"<p>CSS class to add when the Component is disabled.</p>\n"},"handler":{"!type":"fn()","!doc":"<p>A function to execute when the tool is clicked. Arguments passed are:</p>\n\n<ul>\n<li><strong>event</strong> : <a href=\"#!/api/Ext.EventObject\" rel=\"Ext.EventObject\" class=\"docClass\">Ext.EventObject</a> - The click event.</li>\n<li><strong>toolEl</strong> : <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a> - The tool Element.</li>\n<li><strong>owner</strong> : <a href=\"#!/api/Ext.panel.Header\" rel=\"Ext.panel.Header\" class=\"docClass\">Ext.panel.Header</a> - The host panel header.</li>\n<li><strong>tool</strong> : <a href=\"#!/api/Ext.panel.Tool\" rel=\"Ext.panel.Tool\" class=\"docClass\">Ext.panel.Tool</a> - The tool object</li>\n</ul>\n\n"},"height":{"!type":"number","!doc":"<p>Tool size is fixed so that Box layout can avoid measurements.</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.panel.Tool-method-getEl\" rel=\"Ext.panel.Tool-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.panel.Tool-method-getEl\" rel=\"Ext.panel.Tool-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.panel.Tool-cfg-renderSelectors\" rel=\"Ext.panel.Tool-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.panel.Tool-cfg-childEls\" rel=\"Ext.panel.Tool-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"},"scope":{"!type":"?","!doc":"<p>The scope to execute the <a href=\"#!/api/Ext.panel.Tool-cfg-callback\" rel=\"Ext.panel.Tool-cfg-callback\" class=\"docClass\">callback</a> or <a href=\"#!/api/Ext.panel.Tool-cfg-handler\" rel=\"Ext.panel.Tool-cfg-handler\" class=\"docClass\">handler</a> function. Defaults\nto the tool.</p>\n"},"stopEvent":{"!type":"bool","!doc":"<p>Specify as false to allow click event to propagate.</p>\n"},"toolOverCls":{"!type":"string"},"toolOwner":{"!type":"+Ext.Component","!doc":"<p>The owner to report to the <code>callback</code> method. Default is <code>null</code> for the <code>ownerCt</code>.</p>\n"},"toolPressedCls":{"!type":"string"},"tooltip":{"!type":"string|?","!doc":"<p>The tooltip for the tool - can be a string to be used as innerHTML (html tags are accepted) or QuickTips config\nobject</p>\n"},"tooltipType":{"!type":"string","!doc":"<p>The type of tooltip to use. Either 'qtip' (default) for QuickTips or 'title' for title attribute.</p>\n"},"type":{"!type":"string","!doc":"<p>The type of tool to render. The following types are available:</p>\n\n<ul>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-close\"></span> close</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-minimize\"></span> minimize</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-maximize\"></span> maximize</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-restore\"></span> restore</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-toggle\"></span> toggle</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-gear\"></span> gear</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-prev\"></span> prev</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-next\"></span> next</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-pin\"></span> pin</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-unpin\"></span> unpin</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-right\"></span> right</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-left\"></span> left</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-down\"></span> down</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-up\"></span> up</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-refresh\"></span> refresh</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-plus\"></span> plus</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-minus\"></span> minus</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-search\"></span> search</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-save\"></span> save</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-help\"></span> help</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-print\"></span> print</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-expand\"></span> expand</li>\n<li><span class=\"x-tool\"><img src=\"data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" class=\"x-tool-collapse\"></span> collapse</li>\n</ul>\n\n"},"width":{"!type":"number","!doc":"<p>The width of this component in pixels.</p>\n"},"_toolTypes":{"!type":"?","!doc":"<p><debug></debug></p>\n"},"ariaRole":{"!type":"string"},"childEls":{"!type":"[?]"},"isTool":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated Tool, or subclass thereof.</p>\n"},"afterRender":{"!type":"fn() -> !this","!doc":"<p>inherit docs</p>\n"},"getFocusEl":{"!type":"fn() -> +undefined","!doc":"<p>Returns the focus holder element associated with this Component. At the Component base class level, this function returns <code>undefined</code>.</p>\n\n<p>Subclasses which use embedded focusable elements (such as Window, Field and Button) should override this\nfor use by the <a href=\"#!/api/Ext.Component-method-focus\" rel=\"Ext.Component-method-focus\" class=\"docClass\">focus</a> method.</p>\n\n<p>Containers which need to participate in the <a href=\"#!/api/Ext.FocusManager\" rel=\"Ext.FocusManager\" class=\"docClass\">FocusManager</a>'s navigation and Container focusing scheme also\nneed to return a <code>focusEl</code>, although focus is only listened for in this case if the <a href=\"#!/api/Ext.FocusManager\" rel=\"Ext.FocusManager\" class=\"docClass\">FocusManager</a> is <a href=\"#!/api/Ext.FocusManager-method-enable\" rel=\"Ext.FocusManager-method-enable\" class=\"docClass\">enable</a>d.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p></p>\n"},"onClick":{"!type":"fn(e: +Ext.EventObject, target: +HTMLElement) -> !this","!doc":"<p>Called when the tool element is clicked</p>\n"},"onDestroy":{"!type":"fn() -> !this","!doc":"<p>inherit docs</p>\n"},"onMouseDown":{"!type":"fn() -> !this","!doc":"<p>Called when the user presses their mouse button down on a tool\nAdds the press class (<a href=\"#!/api/Ext.panel.Tool-cfg-toolPressedCls\" rel=\"Ext.panel.Tool-cfg-toolPressedCls\" class=\"docClass\">toolPressedCls</a>)</p>\n"},"onMouseOut":{"!type":"fn() -> !this","!doc":"<p>Called when the user rolls out from a tool.\nRemoves the over class (<a href=\"#!/api/Ext.panel.Tool-cfg-toolOverCls\" rel=\"Ext.panel.Tool-cfg-toolOverCls\" class=\"docClass\">toolOverCls</a>)</p>\n"},"onMouseOver":{"!type":"fn() -> !this","!doc":"<p>Called when the user rolls over a tool\nAdds the over class (<a href=\"#!/api/Ext.panel.Tool-cfg-toolOverCls\" rel=\"Ext.panel.Tool-cfg-toolOverCls\" class=\"docClass\">toolOverCls</a>)</p>\n"},"setType":{"!type":"fn(type: string) -> +Ext.panel.Tool","!doc":"<p>Sets the type of the tool. Allows the icon to be changed.</p>\n"},"click":{"!type":"fn(this: +Ext.panel.Tool, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when the tool is clicked</p>\n"}}}},"perf":{"Accumulator":{},"Monitor":{"!type":"fn()","prototype":{"!proto":"Ext.Base.prototype"},"calibrate":{"!type":"fn() -> !this"},"enter":{"!type":"fn(name: ?) -> !this"},"get":{"!type":"fn(name: ?) -> !this"},"getData":{"!type":"fn(all: ?) -> !this"},"monitor":{"!type":"fn(name: ?, fn: ?, scope: ?) -> !this"},"report":{"!type":"fn() -> !this"},"reset":{"!type":"fn() -> !this"},"setup":{"!type":"fn(config: ?) -> !this"},"updateGC":{"!type":"fn() -> !this"},"watchGC":{"!type":"fn() -> !this"}}},"picker":{"Color":{"!doc":"<p>Color picker provides a simple color palette for choosing colors. The picker can be rendered to any container. The\navailable default to a standard 40-color palette; this can be customized with the <a href=\"#!/api/Ext.picker.Color-property-colors\" rel=\"Ext.picker.Color-property-colors\" class=\"docClass\">colors</a> config.</p>\n\n<p>Typically you will need to implement a handler function to be notified when the user chooses a color from the picker;\nyou can register the handler using the <a href=\"#!/api/Ext.picker.Color-event-select\" rel=\"Ext.picker.Color-event-select\" class=\"docClass\">select</a> event, or by implementing the <a href=\"#!/api/Ext.picker.Color-cfg-handler\" rel=\"Ext.picker.Color-cfg-handler\" class=\"docClass\">handler</a> method.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.picker.Color\" rel=\"Ext.picker.Color\" class=\"docClass\">Ext.picker.Color</a>', {\n    value: '993300',  // initial selected color\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    listeners: {\n        select: function(picker, selColor) {\n            alert(selColor);\n        }\n    }\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_picker_Color_cfg)","prototype":{"!proto":"Ext.Component.prototype","allowReselect":{"!type":"bool","!doc":"<p>If set to true then reselecting a color that is already selected fires the <a href=\"#!/api/Ext.picker.Color-event-select\" rel=\"Ext.picker.Color-event-select\" class=\"docClass\">select</a> event</p>\n"},"clickEvent":{"!type":"string","!doc":"<p>The DOM event that will cause a color to be selected. This can be any valid event name (dblclick, contextmenu).</p>\n"},"componentCls":{"!type":"string","!doc":"<p>The CSS class to apply to the containing element.</p>\n"},"handler":{"!type":"fn()","!doc":"<p>A function that will handle the select event of this picker. The handler is passed the following parameters:</p>\n\n<ul>\n<li><p><code>picker</code> : ColorPicker</p>\n\n<p>The <a href=\"#!/api/Ext.picker.Color\" rel=\"Ext.picker.Color\" class=\"docClass\">picker</a>.</p></li>\n<li><p><code>color</code> : String</p>\n\n<p>The 6-digit color hex code (without the # symbol).</p></li>\n</ul>\n\n"},"itemCls":{"!type":"string","!doc":"<p>The CSS class to apply to the color picker's items</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.picker.Color-method-getEl\" rel=\"Ext.picker.Color-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.picker.Color-method-getEl\" rel=\"Ext.picker.Color-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.picker.Color-cfg-renderSelectors\" rel=\"Ext.picker.Color-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.picker.Color-cfg-childEls\" rel=\"Ext.picker.Color-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"},"scope":{"!type":"?","!doc":"<p>The scope (<code>this</code> reference) in which the <code><a href=\"#!/api/Ext.picker.Color-cfg-handler\" rel=\"Ext.picker.Color-cfg-handler\" class=\"docClass\">handler</a></code> function will be called.</p>\n\n<p>Defaults to this Color picker instance.</p>\n"},"selectedCls":{"!type":"string","!doc":"<p>The CSS class to apply to the selected element</p>\n"},"value":{"!type":"string","!doc":"<p>The initial color to highlight (should be a valid 6-digit color hex code without the # symbol). Note that the hex\ncodes are case-sensitive.</p>\n"},"colors":{"!type":"[string]","!doc":"<p>An array of 6-digit color hex code strings (without the # symbol). This array can contain any number of colors,\nand each hex code should be unique. The width of the picker is controlled via CSS by adjusting the width property\nof the 'x-color-picker' class (or assigning a custom class), so you can balance the number of colors with the\nwidth setting until the box is symmetrical.</p>\n\n<p>You can override individual colors if needed:</p>\n\n<pre><code>var cp = new <a href=\"#!/api/Ext.picker.Color\" rel=\"Ext.picker.Color\" class=\"docClass\">Ext.picker.Color</a>();\ncp.colors[0] = 'FF0000';  // change the first box to red\n</code></pre>\n\n<p>Or you can provide a custom array of your own for complete control:</p>\n\n<pre><code>var cp = new <a href=\"#!/api/Ext.picker.Color\" rel=\"Ext.picker.Color\" class=\"docClass\">Ext.picker.Color</a>();\ncp.colors = ['000000', '993300', '333300'];\n</code></pre>\n"},"afterRender":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior after rendering is complete. At this stage the Component’s Element\nwill have been styled according to the configuration, will have had any configured CSS class\nnames added, and will be in the configured visibility and the configured enable state.</p>\n"},"clear":{"!type":"fn() -> !this","!doc":"<p>Clears any selection and sets the value to <code>null</code>.</p>\n"},"getValue":{"!type":"fn() -> string","!doc":"<p>Get the currently selected color value.</p>\n"},"handleClick":{"!type":"fn(event: ?, target: ?) -> !this"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>The initComponent template method is an important initialization step for a Component. It is intended to be\nimplemented by each subclass of <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> to provide any needed constructor logic. The\ninitComponent method of the class being created is called first, with each initComponent method\nup the hierarchy to <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> being called thereafter. This makes it easy to implement and,\nif needed, override the constructor logic of the Component at any step in the hierarchy.</p>\n\n<p>The initComponent method <strong>must</strong> contain a call to <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a> in order\nto ensure that the parent class' initComponent method is also called.</p>\n\n<p>All config options passed to the constructor are applied to <code>this</code> before initComponent is called,\nso you can simply access them with <code>this.someOption</code>.</p>\n\n<p>The following example demonstrates using a dynamic string for the text of a button at the time of\ninstantiation of the class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('DynamicButtonText', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n\n    initComponent: function() {\n        this.text = new Date();\n        this.renderTo = <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>();\n        this.callParent();\n    }\n});\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function() {\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('DynamicButtonText');\n});\n</code></pre>\n"},"initRenderData":{"!type":"fn() -> ?","!doc":"<p>Initialized the renderData to be used when rendering the renderTpl.</p>\n"},"onRender":{"!type":"fn() -> !this","!doc":"<p>Template method called when this Component's DOM structure is created.</p>\n\n<p>At this point, this Component's (and all descendants') DOM structure <em>exists</em> but it has not\nbeen layed out (positioned and sized).</p>\n\n<p>Subclasses which override this to gain access to the structure at render time should\ncall the parent class's method before attempting to access any child elements of the Component.</p>\n"},"select":{"!type":"fn(this: +Ext.picker.Color, color: string, eOpts: ?)","!doc":"<p>Fires when a color is selected</p>\n"}}},"Date":{"!doc":"<p>A date picker. This class is used by the <a href=\"#!/api/Ext.form.field.Date\" rel=\"Ext.form.field.Date\" class=\"docClass\">Ext.form.field.Date</a> field to allow browsing and selection of valid\ndates in a popup next to the field, but may also be used with other components.</p>\n\n<p>Typically you will need to implement a handler function to be notified when the user chooses a date from the picker;\nyou can register the handler using the <a href=\"#!/api/Ext.picker.Date-event-select\" rel=\"Ext.picker.Date-event-select\" class=\"docClass\">select</a> event, or by implementing the <a href=\"#!/api/Ext.picker.Date-cfg-handler\" rel=\"Ext.picker.Date-cfg-handler\" class=\"docClass\">handler</a> method.</p>\n\n<p>By default the user will be allowed to pick any date; this can be changed by using the <a href=\"#!/api/Ext.picker.Date-cfg-minDate\" rel=\"Ext.picker.Date-cfg-minDate\" class=\"docClass\">minDate</a>,\n<a href=\"#!/api/Ext.picker.Date-cfg-maxDate\" rel=\"Ext.picker.Date-cfg-maxDate\" class=\"docClass\">maxDate</a>, <a href=\"#!/api/Ext.picker.Date-cfg-disabledDays\" rel=\"Ext.picker.Date-cfg-disabledDays\" class=\"docClass\">disabledDays</a>, <a href=\"#!/api/Ext.picker.Date-cfg-disabledDatesRE\" rel=\"Ext.picker.Date-cfg-disabledDatesRE\" class=\"docClass\">disabledDatesRE</a>, and/or <a href=\"#!/api/Ext.picker.Date-cfg-disabledDates\" rel=\"Ext.picker.Date-cfg-disabledDates\" class=\"docClass\">disabledDates</a> configs.</p>\n\n<p>All the string values documented below may be overridden by including an Ext locale file in your page.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>', {\n    title: 'Choose a future date:',\n    width: 200,\n    bodyPadding: 10,\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    items: [{\n        xtype: 'datepicker',\n        minDate: new Date(),\n        handler: function(picker, date) {\n            // do something with the selected date\n        }\n    }]\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_picker_Date_cfg)","prototype":{"!proto":"Ext.Component.prototype","ariaTitle":{"!type":"string","!doc":"<p>The text to display for the aria title</p>\n"},"ariaTitleDateFormat":{"!type":"string","!doc":"<p>The date format to display for the current value in the <a href=\"#!/api/Ext.picker.Date-cfg-ariaTitle\" rel=\"Ext.picker.Date-cfg-ariaTitle\" class=\"docClass\">ariaTitle</a></p>\n"},"baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this components element.</p>\n"},"border":{"!type":"number|string|bool","!doc":"<p>Specifies the border size for this component. The border can be a single numeric value to apply to all sides or it can\nbe a CSS style specification for each style, for example: '10 5 3 10' (top, right, bottom, left).</p>\n\n<p>For components that have no border by default, setting this won't make the border appear by itself.\nYou also need to specify border color and style:</p>\n\n<pre><code>border: 5,\nstyle: {\n    borderColor: 'red',\n    borderStyle: 'solid'\n}\n</code></pre>\n\n<p>To turn off the border, use <code>border: false</code>.</p>\n"},"dayNames":{"!type":"[string]","!doc":"<p>An array of textual day names which can be overriden for localization support (defaults to <a href=\"#!/api/Ext.Date-property-dayNames\" rel=\"Ext.Date-property-dayNames\" class=\"docClass\">Ext.Date.dayNames</a>)</p>\n"},"disableAnim":{"!type":"bool","!doc":"<p>True to disable animations when showing the month picker.</p>\n"},"disabledCellCls":{"!type":"string","!doc":"<p>The class to apply to disabled cells.</p>\n"},"disabledDates":{"!type":"[string]","!doc":"<p>An array of 'dates' to disable, as strings. These strings will be used to build a dynamic regular expression so\nthey are very powerful. Some examples:</p>\n\n<ul>\n<li>['03/08/2003', '09/16/2003'] would disable those exact dates</li>\n<li>['03/08', '09/16'] would disable those days for every year</li>\n<li>['^03/08'] would only match the beginning (useful if you are using short years)</li>\n<li>['03/../2006'] would disable every day in March 2006</li>\n<li>['^03'] would disable every day in every March</li>\n</ul>\n\n\n<p>Note that the format of the dates included in the array should exactly match the <a href=\"#!/api/Ext.picker.Date-cfg-format\" rel=\"Ext.picker.Date-cfg-format\" class=\"docClass\">format</a> config. In order\nto support regular expressions, if you are using a date format that has '.' in it, you will have to escape the\ndot when restricting dates. For example: ['03\\.08\\.03'].</p>\n"},"disabledDatesRE":{"!type":"+RegExp","!doc":"<p>JavaScript regular expression used to disable a pattern of dates. The <a href=\"#!/api/Ext.picker.Date-cfg-disabledDates\" rel=\"Ext.picker.Date-cfg-disabledDates\" class=\"docClass\">disabledDates</a>\nconfig will generate this regex internally, but if you specify disabledDatesRE it will take precedence over the\ndisabledDates value.</p>\n"},"disabledDatesText":{"!type":"string","!doc":"<p>The tooltip text to display when the date falls on a disabled date.</p>\n"},"disabledDays":{"!type":"[number]","!doc":"<p>An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday.</p>\n"},"disabledDaysText":{"!type":"string","!doc":"<p>The tooltip to display when the date falls on a disabled day.</p>\n"},"focusOnShow":{"!type":"bool","!doc":"<p>True to automatically focus the picker on show.</p>\n"},"format":{"!type":"string","!doc":"<p>The default date format string which can be overriden for localization support. The format must be valid\naccording to <a href=\"#!/api/Ext.Date-method-parse\" rel=\"Ext.Date-method-parse\" class=\"docClass\">Ext.Date.parse</a> (defaults to <a href=\"#!/api/Ext.Date-property-defaultFormat\" rel=\"Ext.Date-property-defaultFormat\" class=\"docClass\">Ext.Date.defaultFormat</a>).</p>\n"},"handler":{"!type":"fn()","!doc":"<p>Optional. A function that will handle the select event of this picker. The handler is passed the following\nparameters:</p>\n\n<ul>\n<li><code>picker</code> : <a href=\"#!/api/Ext.picker.Date\" rel=\"Ext.picker.Date\" class=\"docClass\">Ext.picker.Date</a></li>\n</ul>\n\n\n<p>This Date picker.</p>\n\n<ul>\n<li><code>date</code> : Date</li>\n</ul>\n\n\n<p>The selected date.</p>\n"},"keyNavConfig":{"!type":"?","!doc":"<p>Specifies optional custom key event handlers for the <a href=\"#!/api/Ext.util.KeyNav\" rel=\"Ext.util.KeyNav\" class=\"docClass\">Ext.util.KeyNav</a> attached to this date picker. Must\nconform to the config format recognized by the <a href=\"#!/api/Ext.util.KeyNav\" rel=\"Ext.util.KeyNav\" class=\"docClass\">Ext.util.KeyNav</a> constructor. Handlers specified in this\nobject will replace default handlers of the same name.</p>\n"},"longDayFormat":{"!type":"string","!doc":"<p>The format for displaying a date in a longer format.</p>\n"},"maxDate":{"!type":"+Date","!doc":"<p>Maximum allowable date (JavaScript date object)</p>\n"},"maxText":{"!type":"string","!doc":"<p>The error text to display if the maxDate validation fails.</p>\n"},"minDate":{"!type":"+Date","!doc":"<p>Minimum allowable date (JavaScript date object)</p>\n"},"minText":{"!type":"string","!doc":"<p>The error text to display if the minDate validation fails.</p>\n"},"monthNames":{"!type":"[string]","!doc":"<p>An array of textual month names which can be overriden for localization support (defaults to <a href=\"#!/api/Ext.Date-property-monthNames\" rel=\"Ext.Date-property-monthNames\" class=\"docClass\">Ext.Date.monthNames</a>)</p>\n"},"monthYearFormat":{"!type":"string","!doc":"<p>The date format for the header month</p>\n"},"monthYearText":{"!type":"string","!doc":"<p>The header month selector tooltip</p>\n"},"nextText":{"!type":"string","!doc":"<p>The next month navigation button tooltip</p>\n"},"prevText":{"!type":"string","!doc":"<p>The previous month navigation button tooltip</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.picker.Date-method-getEl\" rel=\"Ext.picker.Date-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.picker.Date-method-getEl\" rel=\"Ext.picker.Date-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.picker.Date-cfg-renderSelectors\" rel=\"Ext.picker.Date-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.picker.Date-cfg-childEls\" rel=\"Ext.picker.Date-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"},"scope":{"!type":"?","!doc":"<p>The scope (<code>this</code> reference) in which the <code><a href=\"#!/api/Ext.picker.Date-cfg-handler\" rel=\"Ext.picker.Date-cfg-handler\" class=\"docClass\">handler</a></code> function will be called.</p>\n\n<p>Defaults to this DatePicker instance.</p>\n"},"selectedCls":{"!type":"string","!doc":"<p>The class to apply to the selected cell.</p>\n"},"showToday":{"!type":"bool","!doc":"<p>False to hide the footer area containing the Today button and disable the keyboard handler for spacebar that\nselects the current date.</p>\n"},"startDay":{"!type":"number","!doc":"<p>Day index at which the week should begin, 0-based.</p>\n\n<p>Defaults to <code>0</code> (Sunday).</p>\n"},"todayText":{"!type":"string","!doc":"<p>The text to display on the button that selects the current date</p>\n"},"todayTip":{"!type":"string","!doc":"<p>A string used to format the message for displaying in a tooltip over the button that selects the current date.\nThe <code>{0}</code> token in string is replaced by today's date.</p>\n"},"childEls":{"!type":"[?]"},"focusOnSelect":{"!type":"bool","!doc":"<p>Set by other components to stop the picker focus being updated when the value changes.</p>\n"},"initHour":{"!type":"number","!doc":"<p>Default value used to initialise each date in the DatePicker.\n<strong>Note:</strong> 12 noon was chosen because it steers well clear of all DST timezone changes.</p>\n"},"numDays":{"!type":"number","!doc":"<p>24-hour format</p>\n"},"beforeDestroy":{"!type":"fn() -> !this","!doc":"<p>Invoked before the Component is destroyed.</p>\n"},"beforeRender":{"!type":"fn() -> !this"},"createMonthPicker":{"!type":"fn() -> +Ext.picker.Month","!doc":"<p>Create the month picker instance</p>\n"},"finishRenderChildren":{"!type":"fn() -> !this","!doc":"<p>Do the job of a container layout at this point even though we are not a Container.\nTODO: Refactor as a Container.</p>\n"},"focus":{"!type":"fn() -> +Ext.Component","!doc":"<p>Try to focus this component.</p>\n"},"fullUpdate":{"!type":"fn(date: +Date) -> !this","!doc":"<p>Update the contents of the picker for a new month</p>\n"},"getActive":{"!type":"fn() -> +Date","!doc":"<p>Get the current active date.</p>\n"},"getDayInitial":{"!type":"fn(value: ?) -> string","!doc":"<p>Gets a single character to represent the day of the week</p>\n"},"getSelectedDate":{"!type":"fn(date: ?) -> !this"},"getValue":{"!type":"fn() -> +Date","!doc":"<p>Gets the current selected value of the date field</p>\n"},"handleDateClick":{"!type":"fn(e: +Ext.EventObject, t: +HTMLElement) -> !this","!doc":"<p>Respond to a date being clicked in the picker</p>\n"},"handleMouseWheel":{"!type":"fn(e: +Ext.EventObject) -> !this","!doc":"<p>Respond to the mouse wheel event</p>\n"},"handleTabClick":{"!type":"fn(e: ?) -> !this"},"hideMonthPicker":{"!type":"fn(animate?: bool) -> +Ext.picker.Date","!doc":"<p>Hides the month picker, if it's visible.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>private, inherit docs</p>\n"},"initDisabledDays":{"!type":"fn() -> !this","!doc":"<p>Setup the disabled dates regex based on config options</p>\n"},"initEvents":{"!type":"fn() -> !this","!doc":"<p>Initialize any events on this component</p>\n"},"onCancelClick":{"!type":"fn() -> !this","!doc":"<p>Respond to a cancel click on the month picker</p>\n"},"onDisable":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the disable operation.\nAfter calling the superclass's <code>onDisable</code>, the Component will be disabled.</p>\n"},"onEnable":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the enable operation.\nAfter calling the superclass's <code>onEnable</code>, the Component will be enabled.</p>\n"},"onOkClick":{"!type":"fn(picker: ?, value: ?) -> !this","!doc":"<p>Respond to an ok click on the month picker</p>\n"},"onRender":{"!type":"fn(container: ?, position: ?) -> !this","!doc":"<p>Template method called when this Component's DOM structure is created.</p>\n\n<p>At this point, this Component's (and all descendants') DOM structure <em>exists</em> but it has not\nbeen layed out (positioned and sized).</p>\n\n<p>Subclasses which override this to gain access to the structure at render time should\ncall the parent class's method before attempting to access any child elements of the Component.</p>\n"},"onSelect":{"!type":"fn() -> !this","!doc":"<p>Perform any post-select actions</p>\n"},"onShow":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the show operation. After\ncalling the superclass's onShow, the Component will be visible.</p>\n\n<p>Override in subclasses where more complex behaviour is needed.</p>\n\n<p>Gets passed the same parameters as <a href=\"#!/api/Ext.picker.Date-method-show\" rel=\"Ext.picker.Date-method-show\" class=\"docClass\">show</a>.</p>\n"},"runAnimation":{"!type":"fn(isHide: bool) -> !this","!doc":"<p>Run any animation required to hide/show the month picker.</p>\n"},"selectToday":{"!type":"fn() -> +Ext.picker.Date","!doc":"<p>Sets the current value to today.</p>\n"},"selectedUpdate":{"!type":"fn(date: +Date) -> !this","!doc":"<p>Update the selected cell</p>\n"},"setDisabledDates":{"!type":"fn(disabledDates: [string]|+RegExp) -> +Ext.picker.Date","!doc":"<p>Replaces any existing disabled dates with new values and refreshes the DatePicker.</p>\n"},"setDisabledDays":{"!type":"fn(disabledDays: [number]) -> +Ext.picker.Date","!doc":"<p>Replaces any existing disabled days (by index, 0-6) with new values and refreshes the DatePicker.</p>\n"},"setDisabledStatus":{"!type":"fn(disabled: bool) -> !this","!doc":"<p>Set the disabled state of various internal components</p>\n"},"setMaxDate":{"!type":"fn(value: +Date) -> +Ext.picker.Date","!doc":"<p>Replaces any existing <a href=\"#!/api/Ext.picker.Date-cfg-maxDate\" rel=\"Ext.picker.Date-cfg-maxDate\" class=\"docClass\">maxDate</a> with the new value and refreshes the DatePicker.</p>\n"},"setMinDate":{"!type":"fn(value: +Date) -> +Ext.picker.Date","!doc":"<p>Replaces any existing <a href=\"#!/api/Ext.picker.Date-cfg-minDate\" rel=\"Ext.picker.Date-cfg-minDate\" class=\"docClass\">minDate</a> with the new value and refreshes the DatePicker.</p>\n"},"setValue":{"!type":"fn(value: +Date) -> +Ext.picker.Date","!doc":"<p>Sets the value of the date field</p>\n"},"shouldAnimate":{"!type":"fn(animate?: bool) -> bool","!doc":"<p>Checks whether a hide/show action should animate</p>\n"},"showMonthPicker":{"!type":"fn(animate?: bool) -> +Ext.picker.Date","!doc":"<p>Show the month picker</p>\n"},"showNextMonth":{"!type":"fn(e: ?) -> +Ext.picker.Date","!doc":"<p>Show the next month.</p>\n"},"showNextYear":{"!type":"fn() -> +Ext.picker.Date","!doc":"<p>Show the next year.</p>\n"},"showPrevMonth":{"!type":"fn(e: ?) -> +Ext.picker.Date","!doc":"<p>Show the previous month.</p>\n"},"showPrevYear":{"!type":"fn() -> +Ext.picker.Date","!doc":"<p>Show the previous year.</p>\n"},"update":{"!type":"fn(date: +Date, forceRefresh: bool) -> !this","!doc":"<p>Update the contents of the picker</p>\n"},"select":{"!type":"fn(this: +Ext.picker.Date, date: +Date, eOpts: ?)","!doc":"<p>Fires when a date is selected</p>\n"}}},"Month":{"!doc":"<p>A month picker component. This class is used by the <a href=\"#!/api/Ext.picker.Date\" rel=\"Ext.picker.Date\" class=\"docClass\">Date picker</a> class\nto allow browsing and selection of year/months combinations.</p>\n","!type":"fn(config: +Ext.Element|string|Ext_picker_Month_cfg)","prototype":{"!proto":"Ext.Component.prototype","baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to the picker element.</p>\n"},"cancelText":{"!type":"string","!doc":"<p>The text to display on the cancel button.</p>\n"},"okText":{"!type":"string","!doc":"<p>The text to display on the ok button.</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.picker.Month-method-getEl\" rel=\"Ext.picker.Month-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.picker.Month-method-getEl\" rel=\"Ext.picker.Month-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.picker.Month-cfg-renderSelectors\" rel=\"Ext.picker.Month-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.picker.Month-cfg-childEls\" rel=\"Ext.picker.Month-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"},"selectedCls":{"!type":"string","!doc":"<p>The class to be added to selected items in the picker.</p>\n"},"showButtons":{"!type":"bool","!doc":"<p>True to show ok and cancel buttons below the picker.</p>\n"},"value":{"!type":"+Date|[number]","!doc":"<p>The default value to set. See <a href=\"#!/api/Ext.picker.Month-method-setValue\" rel=\"Ext.picker.Month-method-setValue\" class=\"docClass\">setValue</a></p>\n"},"childEls":{"!type":"[?]"},"measureMaxHeight":{"!type":"number"},"monthOffset":{"!type":"number","!doc":"<p>10 years in total, 2 per row</p>\n"},"smallCls":{"!type":"string","!doc":"<p>used when attached to date picker which isnt showing buttons</p>\n"},"totalYears":{"!type":"number"},"yearOffset":{"!type":"number"},"adjustYear":{"!type":"fn(offset?: number) -> !this","!doc":"<p>Modify the year display by passing an offset.</p>\n"},"afterRender":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior after rendering is complete. At this stage the Component’s Element\nwill have been styled according to the configuration, will have had any configured CSS class\nnames added, and will be in the configured visibility and the configured enable state.</p>\n"},"beforeDestroy":{"!type":"fn() -> !this","!doc":"<p>Invoked before the Component is destroyed.</p>\n"},"beforeRender":{"!type":"fn() -> !this"},"calculateMonthMargin":{"!type":"fn() -> !this"},"finishRenderChildren":{"!type":"fn() -> !this","!doc":"<p>Do the job of a container layout at this point even though we are not a Container.\nTODO: Refactor as a Container.</p>\n"},"getLargest":{"!type":"fn(months: ?) -> !this"},"getValue":{"!type":"fn() -> [number]","!doc":"<p>Gets the selected value. It is returned as an array [month, year]. It may\nbe a partial value, for example [null, 2010]. The month is returned as\n0 based.</p>\n"},"getYear":{"!type":"fn(defaultValue: number, offset: number) -> number","!doc":"<p>Gets the current year value, or the default.</p>\n"},"getYears":{"!type":"fn() -> [number]","!doc":"<p>Get an array of years to be pushed in the template. It is not in strict\nnumerical order because we want to show them in columns.</p>\n"},"hasSelection":{"!type":"fn() -> bool","!doc":"<p>Checks whether the picker has a selection</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>The initComponent template method is an important initialization step for a Component. It is intended to be\nimplemented by each subclass of <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> to provide any needed constructor logic. The\ninitComponent method of the class being created is called first, with each initComponent method\nup the hierarchy to <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> being called thereafter. This makes it easy to implement and,\nif needed, override the constructor logic of the Component at any step in the hierarchy.</p>\n\n<p>The initComponent method <strong>must</strong> contain a call to <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a> in order\nto ensure that the parent class' initComponent method is also called.</p>\n\n<p>All config options passed to the constructor are applied to <code>this</code> before initComponent is called,\nso you can simply access them with <code>this.someOption</code>.</p>\n\n<p>The following example demonstrates using a dynamic string for the text of a button at the time of\ninstantiation of the class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('DynamicButtonText', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n\n    initComponent: function() {\n        this.text = new Date();\n        this.renderTo = <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>();\n        this.callParent();\n    }\n});\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function() {\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('DynamicButtonText');\n});\n</code></pre>\n"},"onBodyClick":{"!type":"fn(e: ?, t: ?) -> !this","!doc":"<p>React to clicks on the body</p>\n"},"onCancelClick":{"!type":"fn() -> !this","!doc":"<p>React to the cancel button being pressed</p>\n"},"onDestroy":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the destroy operation.\nAfter calling the superclass's onDestroy, the Component will be destroyed.</p>\n"},"onMonthClick":{"!type":"fn(target: +HTMLElement, isDouble: bool) -> !this","!doc":"<p>React to a month being clicked</p>\n"},"onOkClick":{"!type":"fn() -> !this","!doc":"<p>React to the ok button being pressed</p>\n"},"onYearClick":{"!type":"fn(target: +HTMLElement, isDouble: bool) -> !this","!doc":"<p>React to a year being clicked</p>\n"},"resolveOffset":{"!type":"fn(index: ?, offset: ?) -> number","!doc":"<p>Returns an offsetted number based on the position in the collection. Since our collections aren't\nnumerically ordered, this function helps to normalize those differences.</p>\n"},"setValue":{"!type":"fn(value: +Date|[number]) -> +Ext.picker.Month","!doc":"<p>Set the value for the picker.</p>\n"},"updateBody":{"!type":"fn() -> !this","!doc":"<p>Update the years in the body based on any change</p>\n"},"cancelclick":{"!type":"fn(this: +Ext.picker.Month, eOpts: ?)","!doc":"<p>Fires when the cancel button is pressed.</p>\n"},"monthclick":{"!type":"fn(this: +Ext.picker.Month, value: [?], eOpts: ?)","!doc":"<p>Fires when a month is clicked.</p>\n"},"monthdblclick":{"!type":"fn(this: +Ext.picker.Month, value: [?], eOpts: ?)","!doc":"<p>Fires when a month is clicked.</p>\n"},"okclick":{"!type":"fn(this: +Ext.picker.Month, value: [?], eOpts: ?)","!doc":"<p>Fires when the ok button is pressed.</p>\n"},"select":{"!type":"fn(this: +Ext.picker.Month, value: [?], eOpts: ?)","!doc":"<p>Fires when a month/year is selected.</p>\n"},"yearclick":{"!type":"fn(this: +Ext.picker.Month, value: [?], eOpts: ?)","!doc":"<p>Fires when a year is clicked.</p>\n"},"yeardblclick":{"!type":"fn(this: +Ext.picker.Month, value: [?], eOpts: ?)","!doc":"<p>Fires when a year is clicked.</p>\n"}}},"Time":{"!doc":"<p>A time picker which provides a list of times from which to choose. This is used by the <a href=\"#!/api/Ext.form.field.Time\" rel=\"Ext.form.field.Time\" class=\"docClass\">Ext.form.field.Time</a>\nclass to allow browsing and selection of valid times, but could also be used with other components.</p>\n\n<p>By default, all times starting at midnight and incrementing every 15 minutes will be presented. This list of\navailable times can be controlled using the <a href=\"#!/api/Ext.picker.Time-cfg-minValue\" rel=\"Ext.picker.Time-cfg-minValue\" class=\"docClass\">minValue</a>, <a href=\"#!/api/Ext.picker.Time-cfg-maxValue\" rel=\"Ext.picker.Time-cfg-maxValue\" class=\"docClass\">maxValue</a>, and <a href=\"#!/api/Ext.picker.Time-cfg-increment\" rel=\"Ext.picker.Time-cfg-increment\" class=\"docClass\">increment</a>\nconfiguration properties. The format of the times presented in the list can be customized with the <a href=\"#!/api/Ext.picker.Time-cfg-format\" rel=\"Ext.picker.Time-cfg-format\" class=\"docClass\">format</a>\nconfig.</p>\n\n<p>To handle when the user selects a time from the list, you can subscribe to the <a href=\"#!/api/Ext.picker.Time-event-selectionchange\" rel=\"Ext.picker.Time-event-selectionchange\" class=\"docClass\">selectionchange</a> event.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.picker.Time\" rel=\"Ext.picker.Time\" class=\"docClass\">Ext.picker.Time</a>', {\n   width: 60,\n   minValue: <a href=\"#!/api/Ext.Date-method-parse\" rel=\"Ext.Date-method-parse\" class=\"docClass\">Ext.Date.parse</a>('04:30:00 AM', 'h:i:s A'),\n   maxValue: <a href=\"#!/api/Ext.Date-method-parse\" rel=\"Ext.Date-method-parse\" class=\"docClass\">Ext.Date.parse</a>('08:00:00 AM', 'h:i:s A'),\n   renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_picker_Time_cfg)","prototype":{"!proto":"Ext.view.BoundList.prototype","componentCls":{"!type":"string","!doc":"<p>CSS Class to be added to a components root level element to give distinction to it via styling.</p>\n"},"format":{"!type":"string","!doc":"<p>The default time format string which can be overriden for localization support. The format must be valid\naccording to <a href=\"#!/api/Ext.Date-method-parse\" rel=\"Ext.Date-method-parse\" class=\"docClass\">Ext.Date.parse</a>.</p>\n\n<p>Defaults to <code>'g:i A'</code>, e.g., <code>'3:15 PM'</code>. For 24-hour time format try <code>'H:i'</code> instead.</p>\n"},"increment":{"!type":"number","!doc":"<p>The number of minutes between each time value in the list.</p>\n"},"loadMask":{"!type":"bool"},"maxValue":{"!type":"+Date","!doc":"<p>The maximum time to be shown in the list of times. This must be a Date object (only the time fields will be\nused); no parsing of String values will be done.</p>\n"},"minValue":{"!type":"+Date","!doc":"<p>The minimum time to be shown in the list of times. This must be a Date object (only the time fields will be\nused); no parsing of String values will be done.</p>\n"},"displayField":{"!type":"string","!doc":"<p>The field in the implicitly-generated Model objects that gets displayed in the list. This is\nan internal field name only and is not useful to change via config.</p>\n"},"initDate":{"!type":"[?]","!doc":"<p>Year, month, and day that all times will be normalized into internally.</p>\n"},"createStore":{"!type":"fn() -> !this","!doc":"<p>Creates the internal <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a> that contains the available times. The store\nis loaded with all possible times, and it is later filtered to hide those times outside\nthe minValue/maxValue.</p>\n"},"focusNode":{"!type":"fn(rec: ?) -> !this","!doc":"<p>Focuses a node in the view.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"normalizeDate":{"!type":"fn(date: +Date) -> !this","!doc":"<p>Sets the year/month/day of the given Date object to the <a href=\"#!/api/Ext.picker.Time-property-initDate\" rel=\"Ext.picker.Time-property-initDate\" class=\"docClass\">initDate</a>, so that only\nthe time fields are significant. This makes values suitable for time comparison.</p>\n"},"setMaxValue":{"!type":"fn(value: +Date) -> !this","!doc":"<p>Set the <a href=\"#!/api/Ext.picker.Time-cfg-maxValue\" rel=\"Ext.picker.Time-cfg-maxValue\" class=\"docClass\">maxValue</a> and update the list of available times. This must be a Date object (only the time\nfields will be used); no parsing of String values will be done.</p>\n"},"setMinValue":{"!type":"fn(value: +Date) -> !this","!doc":"<p>Set the <a href=\"#!/api/Ext.picker.Time-cfg-minValue\" rel=\"Ext.picker.Time-cfg-minValue\" class=\"docClass\">minValue</a> and update the list of available times. This must be a Date object (only the time\nfields will be used); no parsing of String values will be done.</p>\n"},"updateList":{"!type":"fn() -> !this","!doc":"<p>Update the list of available times in the list to be constrained within the <a href=\"#!/api/Ext.picker.Time-cfg-minValue\" rel=\"Ext.picker.Time-cfg-minValue\" class=\"docClass\">minValue</a>\nand <a href=\"#!/api/Ext.picker.Time-cfg-maxValue\" rel=\"Ext.picker.Time-cfg-maxValue\" class=\"docClass\">maxValue</a>.</p>\n"}}}},"resizer":{"BorderSplitter":{"!doc":"<p>Private utility class for <a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">Ext.layout.container.Border</a>.</p>\n","!type":"fn(config: +Ext.Element|string|Ext_resizer_BorderSplitter_cfg)","prototype":{"!proto":"Ext.resizer.Splitter.prototype","collapseTarget":{"!type":"string|+Ext.panel.Panel","!doc":"<p>must be configured in by the border layout:</p>\n"},"getTrackerConfig":{"!type":"fn() -> !this","!doc":"<p>Returns the config object (with an <code>xclass</code> property) for the splitter tracker. This\nis overridden by <a href=\"#!/api/Ext.resizer.BorderSplitter\" rel=\"Ext.resizer.BorderSplitter\" class=\"docClass\">BorderSplitter</a> to create a\n<a href=\"#!/api/Ext.resizer.BorderSplitterTracker\" rel=\"Ext.resizer.BorderSplitterTracker\" class=\"docClass\">BorderSplitterTracker</a>.</p>\n"}}},"BorderSplitterTracker":{"!doc":"<p>Private utility class for Ext.BorderSplitter.</p>\n","prototype":{"constraintAdjusters":{"!type":"?"},"getNextCmp":{"!type":"?"},"getPrevCmp":{"!type":"?"},"splitAdjusters":{"!type":"?"},"calculateConstrainRegion":{"!type":"fn() -> !this","!doc":"<p>calculate the constrain Region in which the splitter el may be moved.</p>\n"},"getCollapseDirection":{"!type":"fn() -> !this"},"onBeforeStart":{"!type":"fn(e: ?) -> !this","!doc":"<p>ensure the tracker is enabled, store boxes of previous and next\ncomponents and calculate the constrain region</p>\n"},"performResize":{"!type":"fn(e: ?, offset: ?) -> !this","!doc":"<p>Performs the actual resizing of the previous and next components</p>\n"}}},"Handle":{"!doc":"<p>Provides a handle for 9-point resizing of Elements or Components.</p>\n","!type":"fn(config: +Ext.Element|string|Ext_resizer_Handle_cfg)","prototype":{"!proto":"Ext.Component.prototype","region":{"!type":"string|string|string|string|string","!doc":"<p>Ext.resizer.Resizer.prototype.possiblePositions define the regions\nwhich will be passed in as a region configuration.</p>\n"},"baseHandleCls":{"!type":"string"},"handleCls":{"!type":"string"},"beforeRender":{"!type":"fn() -> !this"}}},"ResizeTracker":{"!doc":"<p>Private utility class for <a href=\"#!/api/Ext.resizer.Resizer\" rel=\"Ext.resizer.Resizer\" class=\"docClass\">Ext.resizer.Resizer</a>.</p>\n","!type":"fn(config: Ext_resizer_ResizeTracker_cfg)","prototype":{"!proto":"Ext.dd.DragTracker.prototype","constrainTo":{"!type":"+Ext.util.Region|+Ext.Element","!doc":"<p>Default to no constraint</p>\n"},"dynamic":{"!type":"bool"},"preserveRatio":{"!type":"bool"},"proxyCls":{"!type":"string"},"convertRegionName":{"!type":"fn(name: ?) -> !this"},"createProxy":{"!type":"fn(target: +Ext.Component|+Ext.Element) -> +Ext.Element","!doc":"<p>Create a proxy for this resizer</p>\n"},"getDynamicTarget":{"!type":"fn() -> !this","!doc":"<p>Returns the object that will be resized on every mousemove event.\nIf dynamic is false, this will be a proxy, otherwise it will be our actual target.</p>\n"},"getResizeTarget":{"!type":"fn(atEnd: ?) -> !this"},"onBeforeStart":{"!type":"fn(e: ?) -> !this","!doc":"<p>Template method which should be overridden by each DragTracker instance. Called when the user first clicks and\nholds the mouse button down. Return false to disallow the drag</p>\n"},"onDrag":{"!type":"fn(e: ?) -> !this","!doc":"<p>Template method which should be overridden by each DragTracker instance. Called whenever a drag has been detected.</p>\n"},"onEnd":{"!type":"fn(e: ?) -> !this","!doc":"<p>Template method which should be overridden by each DragTracker instance. Called when a drag operation has been completed\n(e.g. the user clicked and held the mouse down, dragged the element and then released the mouse button)</p>\n"},"onStart":{"!type":"fn(e: ?) -> !this","!doc":"<p>Template method which should be overridden by each DragTracker instance. Called when a drag operation starts\n(e.g. the user has moved the tracked element beyond the specified tolerance)</p>\n"},"resize":{"!type":"fn(box: ?, direction: ?, atEnd: ?) -> !this"},"updateDimensions":{"!type":"fn(e: ?, atEnd: ?) -> !this"}}},"Resizer":{"!doc":"<p>Applies drag handles to an element or component to make it resizable. The drag handles are inserted into the element\n(or component's element) and positioned absolute.</p>\n\n<p>Textarea and img elements will be wrapped with an additional div because these elements do not support child nodes.\nThe original element can be accessed through the originalTarget property.</p>\n\n<p>Here is the list of valid resize handles:</p>\n\n<pre><code>Value   Description\n------  -------------------\n 'n'     north\n 's'     south\n 'e'     east\n 'w'     west\n 'nw'    northwest\n 'sw'    southwest\n 'se'    southeast\n 'ne'    northeast\n 'all'   all\n</code></pre>\n\n<p><p><img src=\"\" alt=\"Ext.resizer.Resizer component\" width=\"\" height=\"\"></p></p>\n\n<p>Here's an example showing the creation of a typical Resizer:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.resizer.Resizer\" rel=\"Ext.resizer.Resizer\" class=\"docClass\">Ext.resizer.Resizer</a>', {\n    el: 'elToResize',\n    handles: 'all',\n    minWidth: 200,\n    minHeight: 100,\n    maxWidth: 500,\n    maxHeight: 400,\n    pinned: true\n});\n</code></pre>\n","prototype":{"constrainTo":{"!type":"+Ext.Element|+Ext.util.Region","!doc":"<p>An element, or a <a href=\"#!/api/Ext.util.Region\" rel=\"Ext.util.Region\" class=\"docClass\">Region</a> into which the resize operation must be constrained.</p>\n"},"dynamic":{"!type":"bool","!doc":"<p>Specify as true to update the <a href=\"#!/api/Ext.resizer.Resizer-cfg-target\" rel=\"Ext.resizer.Resizer-cfg-target\" class=\"docClass\">target</a> (Element or <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Component</a>) dynamically during\ndragging. This is <code>true</code> by default, but the <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Component</a> class passes <code>false</code> when it is\nconfigured as <a href=\"#!/api/Ext.Component-cfg-resizable\" rel=\"Ext.Component-cfg-resizable\" class=\"docClass\">Ext.Component.resizable</a>.</p>\n\n<p>If specified as <code>false</code>, a proxy element is displayed during the resize operation, and the <a href=\"#!/api/Ext.resizer.Resizer-cfg-target\" rel=\"Ext.resizer.Resizer-cfg-target\" class=\"docClass\">target</a> is\nupdated on mouseup.</p>\n"},"handles":{"!type":"string","!doc":"<p>String consisting of the resize handles to display. Defaults to 's e se' for Elements and fixed position\nComponents. Defaults to 8 point resizing for floating Components (such as Windows). Specify either <code>'all'</code> or any\nof <code>'n s e w ne nw se sw'</code>.</p>\n"},"height":{"!type":"number","!doc":"<p>Optional. The height to set target to in pixels</p>\n"},"heightIncrement":{"!type":"number","!doc":"<p>The increment to snap the height resize in pixels.</p>\n"},"maxHeight":{"!type":"number","!doc":"<p>The maximum height for the element</p>\n"},"maxWidth":{"!type":"number","!doc":"<p>The maximum width for the element</p>\n"},"minHeight":{"!type":"number","!doc":"<p>The minimum height for the element</p>\n"},"minWidth":{"!type":"number","!doc":"<p>The minimum width for the element</p>\n"},"pinned":{"!type":"bool","!doc":"<p>True to ensure that the resize handles are always visible, false indicates resizing by cursor changes only</p>\n"},"preserveRatio":{"!type":"bool","!doc":"<p>True to preserve the original ratio between height and width during resize</p>\n"},"target":{"!type":"+Ext.Element|+Ext.Component","!doc":"<p>The Element or Component to resize.</p>\n"},"transparent":{"!type":"bool","!doc":"<p>True for transparent handles. This is only applied at config time.</p>\n"},"width":{"!type":"number","!doc":"<p>Optional. The width to set the target to in pixels</p>\n"},"widthIncrement":{"!type":"number","!doc":"<p>The increment to snap the width resize in pixels.</p>\n"},"delimiterRe":{"!type":"+RegExp"},"el":{"!type":"+Ext.Element","!doc":"<p>Outer element for resizing behavior.</p>\n"},"handleCls":{"!type":"string"},"originalTarget":{"!type":"+Ext.Element|+Ext.Component","!doc":"<p>Reference to the original resize target if the element of the original resize target was a\n<a href=\"#!/api/Ext.form.field.Field\" rel=\"Ext.form.field.Field\" class=\"docClass\">Field</a>, or an IMG or a TEXTAREA which must be wrapped in a DIV.</p>\n"},"overCls":{"!type":"string"},"pinnedCls":{"!type":"string"},"resizeTracker":{"!type":"+Ext.resizer.ResizeTracker"},"wrapCls":{"!type":"string"},"destroy":{"!type":"fn() -> !this"},"disable":{"!type":"fn() -> !this"},"enable":{"!type":"fn() -> !this"},"forceHandlesHeight":{"!type":"fn() -> !this","!doc":"<p>Fix IE6 handle height issue.</p>\n"},"getEl":{"!type":"fn() -> +Ext.Element","!doc":"<p>Returns the element that was configured with the el or target config property. If a component was configured with\nthe target property then this will return the element of this component.</p>\n\n<p>Textarea and img elements will be wrapped with an additional div because these elements do not support child\nnodes. The original element can be accessed through the originalTarget property.</p>\n"},"getTarget":{"!type":"fn() -> +Ext.Element|+Ext.Component","!doc":"<p>Returns the element or component that was configured with the target config property.</p>\n\n<p>Textarea and img elements will be wrapped with an additional div because these elements do not support child\nnodes. The original element can be accessed through the originalTarget property.</p>\n"},"onBeforeResize":{"!type":"fn(tracker: ?, e: ?) -> !this","!doc":"<p>Relay the Tracker's mousedown event as beforeresize</p>\n"},"onResize":{"!type":"fn(tracker: ?, e: ?) -> !this","!doc":"<p>Relay the Tracker's drag event as resizedrag</p>\n"},"onResizeEnd":{"!type":"fn(tracker: ?, e: ?) -> !this","!doc":"<p>Relay the Tracker's dragend event as resize</p>\n"},"resizeTo":{"!type":"fn(width: number, height: number) -> !this","!doc":"<p>Perform a manual resize and fires the 'resize' event.</p>\n"},"beforeresize":{"!type":"fn(this: +Ext.resizer.Resizer, width: number, height: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fired before resize is allowed. Return false to cancel resize.</p>\n"},"resize":{"!type":"fn(this: +Ext.resizer.Resizer, width: number, height: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fired after a resize.</p>\n"},"resizedrag":{"!type":"fn(this: +Ext.resizer.Resizer, width: number, height: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires during resizing. Return false to cancel resize.</p>\n"}}},"Splitter":{"!doc":"<p>This class functions <strong>between siblings of a <a href=\"#!/api/Ext.layout.container.VBox\" rel=\"Ext.layout.container.VBox\" class=\"docClass\">VBox</a> or <a href=\"#!/api/Ext.layout.container.HBox\" rel=\"Ext.layout.container.HBox\" class=\"docClass\">HBox</a>\nlayout</strong> to resize both immediate siblings.</p>\n\n<p>A Splitter will preserve the flex ratio of any flexed siblings it is required to resize. It does this by setting the <code>flex</code> property of <em>all</em> flexed siblings\nto equal their pixel size. The actual numerical <code>flex</code> property in the Components will change, but the <strong>ratio</strong> to the total flex value will be preserved.</p>\n\n<p>A Splitter may be configured to show a centered mini-collapse tool orientated to collapse the <a href=\"#!/api/Ext.resizer.Splitter-cfg-collapseTarget\" rel=\"Ext.resizer.Splitter-cfg-collapseTarget\" class=\"docClass\">collapseTarget</a>.\nThe Splitter will then call that sibling Panel's <a href=\"#!/api/Ext.panel.Panel-method-collapse\" rel=\"Ext.panel.Panel-method-collapse\" class=\"docClass\">collapse</a> or <a href=\"#!/api/Ext.panel.Panel-method-expand\" rel=\"Ext.panel.Panel-method-expand\" class=\"docClass\">expand</a> method\nto perform the appropriate operation (depending on the sibling collapse state). To create the mini-collapse tool but take care\nof collapsing yourself, configure the splitter with <code><a href=\"#!/api/Ext.resizer.Splitter-cfg-performCollapse\" rel=\"Ext.resizer.Splitter-cfg-performCollapse\" class=\"docClass\">performCollapse</a>: false</code>.</p>\n","!type":"fn(config: +Ext.Element|string|Ext_resizer_Splitter_cfg)","prototype":{"!proto":"Ext.Component.prototype","baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this component's element. This will also be prepended to elements within this\ncomponent like Panel's body will get a class <code>x-panel-body</code>. This means that if you create a subclass of Panel, and\nyou want it to get all the Panels styling for the element and the body, you leave the <code>baseCls</code> <code>x-panel</code> and use\n<code>componentCls</code> to add specific styling for this component.</p>\n"},"collapseOnDblClick":{"!type":"bool","!doc":"<p>True to enable dblclick to toggle expand and collapse on the <a href=\"#!/api/Ext.resizer.Splitter-cfg-collapseTarget\" rel=\"Ext.resizer.Splitter-cfg-collapseTarget\" class=\"docClass\">collapseTarget</a> Panel.</p>\n"},"collapseTarget":{"!type":"string|+Ext.panel.Panel","!doc":"<p>A string describing the relative position of the immediate sibling Panel to collapse. May be 'prev' or 'next'.</p>\n\n<p>Or the immediate sibling Panel to collapse.</p>\n\n<p>The orientation of the mini-collapse tool will be inferred from this setting.</p>\n\n<p><strong>Note that only Panels may be collapsed.</strong></p>\n"},"collapsedCls":{"!type":"string","!doc":"<p>A class to add to the splitter when it is collapsed. See <a href=\"#!/api/Ext.resizer.Splitter-cfg-collapsible\" rel=\"Ext.resizer.Splitter-cfg-collapsible\" class=\"docClass\">collapsible</a>.</p>\n"},"collapsible":{"!type":"bool","!doc":"<p>True to show a mini-collapse tool in the Splitter to toggle expand and collapse on the <a href=\"#!/api/Ext.resizer.Splitter-cfg-collapseTarget\" rel=\"Ext.resizer.Splitter-cfg-collapseTarget\" class=\"docClass\">collapseTarget</a> Panel.\nDefaults to the <a href=\"#!/api/Ext.panel.Panel-cfg-collapsible\" rel=\"Ext.panel.Panel-cfg-collapsible\" class=\"docClass\">collapsible</a> setting of the Panel.</p>\n"},"defaultSplitMax":{"!type":"number","!doc":"<p>Provides a default maximum width or height for the two components\nthat the splitter is between.</p>\n"},"defaultSplitMin":{"!type":"number","!doc":"<p>Provides a default minimum width or height for the two components\nthat the splitter is between.</p>\n"},"performCollapse":{"!type":"bool","!doc":"<p>Set to false to prevent this Splitter's mini-collapse tool from managing the collapse\nstate of the <a href=\"#!/api/Ext.resizer.Splitter-cfg-collapseTarget\" rel=\"Ext.resizer.Splitter-cfg-collapseTarget\" class=\"docClass\">collapseTarget</a>.</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.resizer.Splitter-method-getEl\" rel=\"Ext.resizer.Splitter-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.resizer.Splitter-method-getEl\" rel=\"Ext.resizer.Splitter-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.resizer.Splitter-cfg-renderSelectors\" rel=\"Ext.resizer.Splitter-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.resizer.Splitter-cfg-childEls\" rel=\"Ext.resizer.Splitter-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"},"size":{"!type":"number","!doc":"<p>The size of the splitter. This becomes the height for vertical splitters and\nwidth for horizontal splitters.</p>\n"},"canResize":{"!type":"bool","!doc":"<p>Default to tree, allow internal classes to disable resizing</p>\n"},"childEls":{"!type":"[?]"},"collapseDirProps":{"!type":"?"},"collapsedClsInternal":{"!type":"string"},"orientation":{"!type":"string","!doc":"<p>Orientation of this Splitter. <code>'vertical'</code> when used in an hbox layout, <code>'horizontal'</code>\nwhen used in a vbox layout.</p>\n"},"orientationProps":{"!type":"?"},"vertical":{"!type":"bool"},"applyCollapseDirection":{"!type":"fn() -> !this"},"applyOrientation":{"!type":"fn() -> !this"},"beforeDestroy":{"!type":"fn() -> !this","!doc":"<p>Invoked before the Component is destroyed.</p>\n"},"beforeRender":{"!type":"fn() -> !this"},"getCollapseDirection":{"!type":"fn() -> !this"},"getCollapseTarget":{"!type":"fn() -> !this"},"getTrackerConfig":{"!type":"fn() -> !this","!doc":"<p>Returns the config object (with an <code>xclass</code> property) for the splitter tracker. This\nis overridden by <a href=\"#!/api/Ext.resizer.BorderSplitter\" rel=\"Ext.resizer.BorderSplitter\" class=\"docClass\">BorderSplitter</a> to create a\n<a href=\"#!/api/Ext.resizer.BorderSplitterTracker\" rel=\"Ext.resizer.BorderSplitterTracker\" class=\"docClass\">BorderSplitterTracker</a>.</p>\n"},"onBeforeTargetCollapse":{"!type":"fn() -> !this"},"onBeforeTargetExpand":{"!type":"fn(target: ?) -> !this"},"onRender":{"!type":"fn() -> !this","!doc":"<p>Template method called when this Component's DOM structure is created.</p>\n\n<p>At this point, this Component's (and all descendants') DOM structure <em>exists</em> but it has not\nbeen layed out (positioned and sized).</p>\n\n<p>Subclasses which override this to gain access to the structure at render time should\ncall the parent class's method before attempting to access any child elements of the Component.</p>\n"},"onTargetCollapse":{"!type":"fn(target: ?) -> !this"},"onTargetExpand":{"!type":"fn(target: ?) -> !this"},"setCollapseEl":{"!type":"fn(display: ?) -> !this"},"setOrientation":{"!type":"fn(orientation: ?) -> !this"},"setSize":{"!type":"fn() -> +Ext.Component","!doc":"<p>Work around IE bug. %age margins do not get recalculated on element resize unless repaint called.</p>\n"},"toggleTargetCmp":{"!type":"fn(e: ?, t: ?) -> !this"},"updateOrientation":{"!type":"fn() -> !this"}}},"SplitterTracker":{"!doc":"<p>Private utility class for Ext.Splitter.</p>\n","prototype":{"enabled":{"!type":"bool"},"overlayCls":{"!type":"string"},"calculateConstrainRegion":{"!type":"fn() -> !this","!doc":"<p>calculate the constrain Region in which the splitter el may be moved.</p>\n"},"createDragOverlay":{"!type":"fn() -> !this"},"endDrag":{"!type":"fn() -> !this","!doc":"<p>Cleans up the overlay (if we have one) and calls the base. This cannot be done in\nonEnd, because onEnd is only called if a drag is detected but the overlay is created\nregardless (by onBeforeStart).</p>\n"},"getNextCmp":{"!type":"fn() -> !this"},"getPrevCmp":{"!type":"fn() -> !this"},"getResizeOffset":{"!type":"fn() -> !this"},"getSplitter":{"!type":"fn() -> !this"},"getVertNextConstrainLeft":{"!type":"fn(o: ?) -> !this"},"getVertNextConstrainRight":{"!type":"fn(o: ?) -> !this"},"getVertPrevConstrainLeft":{"!type":"fn(o: ?) -> !this"},"getVertPrevConstrainRight":{"!type":"fn(o: ?) -> !this"},"onBeforeStart":{"!type":"fn(e: ?) -> !this","!doc":"<p>ensure the tracker is enabled, store boxes of previous and next\ncomponents and calculate the constrain region</p>\n"},"onDrag":{"!type":"fn(e: ?) -> !this","!doc":"<p>Track the proxy and set the proper XY coordinates\nwhile constraining the drag</p>\n"},"onEnd":{"!type":"fn(e: ?) -> !this","!doc":"<p>perform the resize and remove the proxy class from the splitter el</p>\n"},"onStart":{"!type":"fn(e: ?) -> !this","!doc":"<p>We move the splitter el. Add the proxy class.</p>\n"},"performResize":{"!type":"fn(e: ?, offset: ?) -> !this","!doc":"<p>Performs the actual resizing of the previous and next components</p>\n"}}}},"selection":{"CellModel":{"!type":"fn()","prototype":{"!proto":"Ext.selection.Model.prototype","enableKeyNav":{"!type":"bool","!doc":"<p>Turns on/off keyboard navigation within the grid.</p>\n"},"mode":{"!type":"string","!doc":"<p>Mode of selection.  Valid values are:</p>\n\n<ul>\n<li><strong>\"SINGLE\"</strong> - Only allows selecting one item at a time. This is the default.</li>\n</ul>\n\n"},"preventWrap":{"!type":"bool","!doc":"<p>Set this configuration to true to prevent wrapping around of selection as\na user navigates to the first or last column.</p>\n"},"noSelection":{"!type":"?","!doc":"<p>private property to use when firing a deselect when no old selection exists.</p>\n"},"bindComponent":{"!type":"fn(view: ?) -> !this"},"deselect":{"!type":"fn(this: +Ext.selection.CellModel, record: +Ext.data.Model, row: number, column: number, eOpts: ?)","!doc":"<p>Fired after a cell is deselected</p>\n"},"doMove":{"!type":"fn(direction: ?, e: ?) -> !this"},"getCurrentPosition":{"!type":"fn() -> !this","!doc":"<p>Returns the current position in the format {row: row, column: column}</p>\n"},"getHeaderCt":{"!type":"fn() -> !this"},"initKeyNav":{"!type":"fn(view: ?) -> !this"},"isCellSelected":{"!type":"fn(view: ?, row: ?, column: ?) -> !this"},"move":{"!type":"fn(dir: ?, e: ?) -> !this"},"onCellDeselect":{"!type":"fn(position: ?, supressEvent: ?) -> !this","!doc":"<p>notify view that the cell has been deselected to update the ui\nappropriately</p>\n"},"onCellSelect":{"!type":"fn(position: ?, supressEvent: ?) -> !this","!doc":"<p>notify the view that the cell has been selected to update the ui\nappropriately and bring the cell into focus</p>\n"},"onColumnMove":{"!type":"fn(headerCt: ?, header: ?, fromIdx: ?, toIdx: ?) -> !this","!doc":"<p>When grid uses <a href=\"#!/api/Ext.panel.Table-property-optimizedColumnMove\" rel=\"Ext.panel.Table-property-optimizedColumnMove\" class=\"docClass\">optimizedColumnMove</a> (the default), this is added as a\n<a href=\"#!/api/Ext.panel.Table-event-columnmove\" rel=\"Ext.panel.Table-event-columnmove\" class=\"docClass\">columnmove</a> handler to correctly maintain the\nselected column using the same column header.</p>\n\n<p>If optimizedColumnMove === false, (which some grid Features set) then the view is refreshed,\nso this is not added as a handler because the selected column.</p>\n"},"onEditorTab":{"!type":"fn(editingPlugin: ?, e: ?) -> !this"},"onKeyDown":{"!type":"fn(e: ?) -> !this"},"onKeyLeft":{"!type":"fn(e: ?) -> !this"},"onKeyRight":{"!type":"fn(e: ?) -> !this"},"onKeyTab":{"!type":"fn(e: ?, t: ?) -> !this","!doc":"<p>Tab key from the View's KeyNav, <em>not</em> from an editor.</p>\n"},"onKeyUp":{"!type":"fn(e: ?) -> !this"},"onMouseDown":{"!type":"fn(view: ?, cell: ?, cellIndex: ?, record: ?, row: ?, recordIndex: ?, e: ?) -> !this","!doc":"<p>Set the current position based on where the user clicks.</p>\n"},"onSelectChange":{"!type":"fn(record: ?, isSelected: ?, suppressEvent: ?, commitFn: ?) -> !this"},"onStoreRemove":{"!type":"fn(store: ?, records: ?, indexes: ?) -> !this","!doc":"<p>Keep selection model in consistent state upon record deletion.</p>\n"},"onUpdate":{"!type":"fn(record: ?) -> !this","!doc":"<p>Called when the contents of the node are updated, perform any processing here.</p>\n"},"onVetoUIEvent":{"!type":"fn() -> !this"},"onViewRefresh":{"!type":"fn(view: ?) -> !this"},"refresh":{"!type":"fn() -> !this"},"select":{"!type":"fn(this: +Ext.selection.CellModel, record: +Ext.data.Model, row: number, column: number, eOpts: ?)","!doc":"<p>Fired after a cell is selected</p>\n"},"selectByPosition":{"!type":"fn(position: ?, suppressEvent: ?) -> !this"},"setCurrentPosition":{"!type":"fn(position: ?, suppressEvent: bool) -> !this","!doc":"<p>Sets the current position</p>\n"}}},"CheckboxModel":{"!doc":"<p>A selection model that renders a column of checkboxes that can be toggled to\nselect or deselect rows. The default mode for this selection model is MULTI.</p>\n\n<p>The selection model will inject a header for the checkboxes in the first view\nand according to the <a href=\"#!/api/Ext.selection.CheckboxModel-cfg-injectCheckbox\" rel=\"Ext.selection.CheckboxModel-cfg-injectCheckbox\" class=\"docClass\">injectCheckbox</a> configuration.</p>\n","!type":"fn()","prototype":{"!proto":"Ext.selection.RowModel.prototype","checkOnly":{"!type":"bool","!doc":"<p>True if rows can only be selected by clicking on the checkbox column.</p>\n"},"checkSelector":{"!type":"string","!doc":"<p>The selector for determining whether the checkbox element is clicked. This may be changed to\nallow for a wider area to be clicked, for example, the whole cell for the selector.</p>\n"},"injectCheckbox":{"!type":"number|string","!doc":"<p>The index at which to insert the checkbox column.\nSupported values are a numeric index, and the strings 'first' and 'last'.</p>\n"},"mode":{"!type":"string|string|string","!doc":"<p>Modes of selection.\nValid values are <code>\"SINGLE\"</code>, <code>\"SIMPLE\"</code>, and <code>\"MULTI\"</code>.</p>\n"},"showHeaderCheckbox":{"!type":"bool","!doc":"<p>Configure as <code>false</code> to not display the header checkbox at the top of the column.\nWhen <a href=\"#!/api/Ext.data.Store-cfg-buffered\" rel=\"Ext.data.Store-cfg-buffered\" class=\"docClass\">Ext.data.Store.buffered</a> is set to <code>true</code>, this configuration will\nnot be available because the buffered data set does not always contain all data.</p>\n"},"checkerOnCls":{"!type":"string","!doc":"<p>private</p>\n"},"headerWidth":{"!type":"number"},"addCheckbox":{"!type":"fn(initial: bool) -> !this","!doc":"<p>Add the header checkbox to the header row</p>\n"},"beforeViewRender":{"!type":"fn(view: ?) -> !this"},"bindComponent":{"!type":"fn(view: ?) -> !this"},"getHeaderConfig":{"!type":"fn() -> !this","!doc":"<p>Retrieve a configuration to be used in a HeaderContainer.\nThis should be used when injectCheckbox is set to false.</p>\n"},"hasLockedHeader":{"!type":"fn() -> !this"},"maybeFireSelectionChange":{"!type":"fn(fireEvent: ?) -> !this","!doc":"<p>fire selection change as long as true is not passed\ninto maybeFireSelectionChange</p>\n"},"onHeaderClick":{"!type":"fn(headerCt: ?, header: ?, e: ?) -> !this","!doc":"<p>Toggle between selecting all and deselecting all when clicking on\na checkbox header.</p>\n"},"onReconfigure":{"!type":"fn(grid: +Ext.panel.Table, store: +Ext.data.Store, columns: [?]) -> !this","!doc":"<p>Handles the grid's reconfigure event.  Adds the checkbox header if the columns have been reconfigured.</p>\n"},"onSelectChange":{"!type":"fn() -> !this","!doc":"<p>Synchronize header checker value as selection changes.</p>\n"},"onStoreAdd":{"!type":"fn() -> !this","!doc":"<p>when a record is added to a store</p>\n"},"onStoreLoad":{"!type":"fn() -> !this"},"onStoreRefresh":{"!type":"fn() -> !this"},"onStoreRemove":{"!type":"fn() -> !this","!doc":"<p>prune records from the SelectionModel if\nthey were selected at the time they were\nremoved.</p>\n"},"processSelection":{"!type":"fn(view: ?, record: ?, item: ?, index: ?, e: ?) -> !this"},"refresh":{"!type":"fn() -> !this","!doc":"<p>After refresh, ensure that the header checkbox state matches</p>\n"},"renderEmpty":{"!type":"fn() -> !this"},"renderer":{"!type":"fn(value: ?, metaData: ?, record: ?, rowIndex: ?, colIndex: ?, store: ?, view: ?) -> !this","!doc":"<p>Generates the HTML to be rendered in the injected checkbox column for each row.\nCreates the standard checkbox markup by default; can be overridden to provide custom rendering.\nSee <a href=\"#!/api/Ext.grid.column.Column-cfg-renderer\" rel=\"Ext.grid.column.Column-cfg-renderer\" class=\"docClass\">Ext.grid.column.Column.renderer</a> for description of allowed parameters.</p>\n"},"resumeChanges":{"!type":"fn() -> !this"},"toggleUiHeader":{"!type":"fn(isChecked: bool) -> !this","!doc":"<p>Toggle the ui header between checked and unchecked state.</p>\n"},"updateHeaderState":{"!type":"fn() -> !this"}}},"DataViewModel":{"!type":"fn(cfg: ?)","prototype":{"!proto":"Ext.selection.Model.prototype","enableKeyNav":{"!type":"bool","!doc":"<p>Turns on/off keyboard navigation within the DataView.</p>\n"},"deselectOnContainerClick":{"!type":"bool"},"bindComponent":{"!type":"fn(view: ?) -> !this"},"destroy":{"!type":"fn() -> !this","!doc":"<p>cleanup.</p>\n"},"initKeyNav":{"!type":"fn(view: ?) -> !this"},"onContainerClick":{"!type":"fn() -> !this"},"onItemClick":{"!type":"fn(view: ?, record: ?, item: ?, index: ?, e: ?) -> !this"},"onLastFocusChanged":{"!type":"fn(oldFocus: ?, newFocus: ?, suppressFocus: ?) -> !this"},"onNavKey":{"!type":"fn(step: ?) -> !this"},"onSelectChange":{"!type":"fn(record: ?, isSelected: ?, suppressEvent: ?, commitFn: ?) -> !this","!doc":"<p>Allow the DataView to update the ui</p>\n"},"onUpdate":{"!type":"fn(record: ?) -> !this","!doc":"<p>Called when the contents of the node are updated, perform any processing here.</p>\n"},"beforedeselect":{"!type":"fn(this: +Ext.selection.DataViewModel, record: +Ext.data.Model, eOpts: ?)","!doc":"<p>Fired before a record is deselected. If any listener returns false, the\ndeselection is cancelled.</p>\n"},"beforeselect":{"!type":"fn(this: +Ext.selection.DataViewModel, record: +Ext.data.Model, eOpts: ?)","!doc":"<p>Fired before a record is selected. If any listener returns false, the\nselection is cancelled.</p>\n"},"deselect":{"!type":"fn(this: +Ext.selection.DataViewModel, record: +Ext.data.Model, eOpts: ?)","!doc":"<p>Fired after a record is deselected</p>\n"},"select":{"!type":"fn(this: +Ext.selection.DataViewModel, record: +Ext.data.Model, eOpts: ?)","!doc":"<p>Fired after a record is selected</p>\n"}}},"Model":{"!doc":"<p>Tracks what records are currently selected in a databound component.</p>\n\n<p>This is an abstract class and is not meant to be directly used. Databound UI widgets such as\n<a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Grid</a> and <a href=\"#!/api/Ext.tree.Panel\" rel=\"Ext.tree.Panel\" class=\"docClass\">Tree</a> should subclass <a href=\"#!/api/Ext.selection.Model\" rel=\"Ext.selection.Model\" class=\"docClass\">Ext.selection.Model</a>\nand provide a way to binding to the component.</p>\n\n<p>The abstract methods <code>onSelectChange</code> and <code>onLastFocusChanged</code> should be implemented in these\nsubclasses to update the UI widget.</p>\n","!type":"fn(cfg: ?)","prototype":{"!proto":"Ext.util.Observable.prototype","allowDeselect":{"!type":"bool","!doc":"<p>Allow users to deselect a record in a DataView, List or Grid.\nOnly applicable when the <a href=\"#!/api/Ext.selection.Model-cfg-mode\" rel=\"Ext.selection.Model-cfg-mode\" class=\"docClass\">mode</a> is 'SINGLE'.</p>\n"},"mode":{"!type":"string|string|string","!doc":"<p>Mode of selection.  Valid values are:</p>\n\n<ul>\n<li><strong>\"SINGLE\"</strong> - Only allows selecting one item at a time.  Use <a href=\"#!/api/Ext.selection.Model-cfg-allowDeselect\" rel=\"Ext.selection.Model-cfg-allowDeselect\" class=\"docClass\">allowDeselect</a> to allow\ndeselecting that item.  Also see <a href=\"#!/api/Ext.selection.Model-cfg-toggleOnClick\" rel=\"Ext.selection.Model-cfg-toggleOnClick\" class=\"docClass\">toggleOnClick</a>. This is the default.</li>\n<li><strong>\"SIMPLE\"</strong> - Allows simple selection of multiple items one-by-one. Each click in grid will either\nselect or deselect an item.</li>\n<li><strong>\"MULTI\"</strong> - Allows complex selection of multiple items using Ctrl and Shift keys.</li>\n</ul>\n\n"},"pruneRemoved":{"!type":"bool","!doc":"<p>Remove records from the selection when they are removed from the store.</p>\n\n<p><strong>Important:</strong> When using <a href=\"#!/api/Ext.toolbar.Paging\" rel=\"Ext.toolbar.Paging\" class=\"docClass\">paging</a> or a <a href=\"#!/api/Ext.data.Store-cfg-buffered\" rel=\"Ext.data.Store-cfg-buffered\" class=\"docClass\">sparsely populated (buffered) Store</a>,\nrecords which are cached in the Store's <a href=\"#!/api/Ext.data.Store-property-data\" rel=\"Ext.data.Store-property-data\" class=\"docClass\">data collection</a> may be removed from the Store when pages change,\nor when rows are scrolled out of view. For this reason <code>pruneRemoved</code> should be set to <code>false</code> when using a buffered Store.</p>\n\n<p>Also, when previously pruned pages are returned to the cache, the records objects in the page will be\n<em>new instances</em>, and will not match the instances in the selection model's collection. For this reason,\nyou MUST ensure that the Model definition's <a href=\"#!/api/Ext.data.Model-cfg-idProperty\" rel=\"Ext.data.Model-cfg-idProperty\" class=\"docClass\">idProperty</a> references a unique\nkey because in this situation, records in the Store have their <strong>IDs</strong> compared to records in the SelectionModel\nin order to re-select a record which is scrolled back into view.</p>\n"},"toggleOnClick":{"!type":"bool","!doc":"<p><code>true</code> to toggle the selection state of an item when clicked.\nOnly applicable when the <a href=\"#!/api/Ext.selection.Model-cfg-mode\" rel=\"Ext.selection.Model-cfg-mode\" class=\"docClass\">mode</a> is 'SINGLE'.\nOnly applicable when the <a href=\"#!/api/Ext.selection.Model-cfg-allowDeselect\" rel=\"Ext.selection.Model-cfg-allowDeselect\" class=\"docClass\">allowDeselect</a> is 'true'.</p>\n"},"selected":{"!type":"+Ext.util.MixedCollection","!doc":"<p>A MixedCollection that maintains all of the currently selected records.</p>\n"},"suspendChange":{"!type":"number"},"afterKeyNavigate":{"!type":"fn(e: ?, record: ?) -> !this","!doc":"<p>Private\nCalled after a new record has been navigated to by a keystroke.\nEvent is passed so that shift and ctrl can be handled.</p>\n"},"beforeViewRender":{"!type":"fn(view: ?) -> !this"},"bindComponent":{"!type":"fn() -> !this"},"bindStore":{"!type":"fn(store: ?, initial: ?) -> !this","!doc":"<p>binds the store to the selModel.</p>\n"},"clearSelections":{"!type":"fn() -> !this","!doc":"<p>A fast reset of the selections without firing events, updating the ui, etc.\nFor private usage only.</p>\n"},"deselect":{"!type":"fn(records: [+Ext.data.Model]|number, suppressEvent?: bool) -> !this","!doc":"<p>Deselects a record instance by record instance or index.</p>\n"},"deselectAll":{"!type":"fn(suppressEvent?: bool) -> !this","!doc":"<p>Deselects all records in the view.</p>\n"},"deselectDeletedRecords":{"!type":"fn(records: ?) -> !this","!doc":"<p>Called by subclasses to deselect records upon detection of deletion from the store</p>\n"},"deselectDuringSelect":{"!type":"fn(toSelect: ?, selected: ?, suppressEvent: ?) -> !this"},"deselectRange":{"!type":"fn(startRow: +Ext.data.Model|number, endRow: +Ext.data.Model|number) -> !this","!doc":"<p>Deselects a range of rows if the selection model <a href=\"#!/api/Ext.selection.Model-method-isLocked\" rel=\"Ext.selection.Model-method-isLocked\" class=\"docClass\">is not locked</a>.</p>\n"},"destroy":{"!type":"fn() -> !this","!doc":"<p>cleanup.</p>\n"},"doDeselect":{"!type":"fn(records: ?, suppressEvent: ?) -> !this","!doc":"<p>records can be an index, a record or an array of records</p>\n"},"doMultiSelect":{"!type":"fn(records: ?, keepExisting: ?, suppressEvent: ?) -> !this"},"doSelect":{"!type":"fn(records: ?, keepExisting: ?, suppressEvent: ?) -> !this"},"doSingleSelect":{"!type":"fn(record: ?, suppressEvent: ?) -> !this"},"getCount":{"!type":"fn() -> number","!doc":"<p>Returns the count of selected records.</p>\n"},"getLastFocused":{"!type":"fn() -> !this"},"getLastSelected":{"!type":"fn() -> +Ext.data.Model"},"getSelection":{"!type":"fn() -> [+Ext.data.Model]","!doc":"<p>Returns an array of the currently selected records.</p>\n"},"getSelectionId":{"!type":"fn(record: ?) -> !this"},"getSelectionMode":{"!type":"fn() -> string","!doc":"<p>Returns the current selectionMode.</p>\n"},"getStoreListeners":{"!type":"fn() -> ?","!doc":"<p>Gets the listeners to bind to a new store.</p>\n"},"hasSelection":{"!type":"fn() -> bool","!doc":"<p>Returns true if there are any a selected records.</p>\n"},"isFocused":{"!type":"fn(record: +Ext.data.Model) -> !this","!doc":"<p>Determines if this record is currently focused.</p>\n"},"isLocked":{"!type":"fn() -> bool","!doc":"<p>Returns true if the selections are locked.</p>\n"},"isRangeSelected":{"!type":"fn(from: +Ext.data.Model|number, to: +Ext.data.Model|number) -> bool","!doc":"<p>Returns true if the specified row is selected.</p>\n"},"isSelected":{"!type":"fn(record: +Ext.data.Model|number) -> bool","!doc":"<p>Returns true if the specified row is selected.</p>\n"},"maybeFireSelectionChange":{"!type":"fn(fireEvent: ?) -> !this","!doc":"<p>fire selection change as long as true is not passed\ninto maybeFireSelectionChange</p>\n"},"normalizeRowRange":{"!type":"fn(startRow: ?, endRow: ?) -> !this"},"onEditorKey":{"!type":"fn() -> !this"},"onLastFocusChanged":{"!type":"fn(oldFocused: ?, newFocused: ?) -> !this"},"onModelIdChanged":{"!type":"fn(store: ?, model: ?, oldId: ?, newId: ?, oldInternalId: ?) -> !this"},"onSelectChange":{"!type":"fn(record: ?, isSelected: ?, suppressEvent: ?, commitFn: ?) -> !this"},"onStoreAdd":{"!type":"fn() -> !this","!doc":"<p>when a record is added to a store</p>\n"},"onStoreClear":{"!type":"fn() -> !this","!doc":"<p>when a store is cleared remove all selections\n(if there were any)</p>\n"},"onStoreLoad":{"!type":"fn() -> !this"},"onStoreRefresh":{"!type":"fn() -> !this"},"onStoreRemove":{"!type":"fn(store: ?, records: ?, indexes: ?, isMove: ?) -> !this","!doc":"<p>prune records from the SelectionModel if\nthey were selected at the time they were\nremoved.</p>\n"},"onStoreUpdate":{"!type":"fn() -> !this","!doc":"<p>if records are updated</p>\n"},"onUpdate":{"!type":"fn() -> !this","!doc":"<p>Called when the contents of the node are updated, perform any processing here.</p>\n"},"pruneIf":{"!type":"fn() -> !this"},"refresh":{"!type":"fn() -> !this"},"resumeChanges":{"!type":"fn() -> !this"},"select":{"!type":"fn(records: [+Ext.data.Model]|number, keepExisting?: bool, suppressEvent?: bool) -> !this","!doc":"<p>Selects a record instance by record instance or index.</p>\n"},"selectAll":{"!type":"fn(suppressEvent: bool) -> !this","!doc":"<p>Selects all records in the view.</p>\n"},"selectRange":{"!type":"fn(startRow: +Ext.data.Model|number, endRow: +Ext.data.Model|number, keepExisting?: bool) -> !this","!doc":"<p>Selects a range of rows if the selection model <a href=\"#!/api/Ext.selection.Model-method-isLocked\" rel=\"Ext.selection.Model-method-isLocked\" class=\"docClass\">is not locked</a>.\nAll rows in between startRow and endRow are also selected.</p>\n"},"selectWithEvent":{"!type":"fn(record: ?, e: ?) -> !this","!doc":"<p>Provides differentiation of logic between MULTI, SIMPLE and SINGLE\nselection modes. Requires that an event be passed so that we can know\nif user held ctrl or shift.</p>\n"},"setLastFocused":{"!type":"fn(record: +Ext.data.Model) -> !this","!doc":"<p>Sets a record as the last focused record. This does NOT mean\nthat the record has been selected.</p>\n"},"setLocked":{"!type":"fn(locked: bool) -> !this","!doc":"<p>Locks the current selection and disables any changes from happening to the selection.</p>\n"},"setSelectionMode":{"!type":"fn(selMode: string) -> !this","!doc":"<p>Sets the current selectionMode.</p>\n"},"storeHasSelected":{"!type":"fn(record: ?) -> !this","!doc":"<p>We need this special check because we could have a model\nwithout an idProperty. getById() is fast, so we use that\nif possible, otherwise we need to check the internalId</p>\n"},"suspendChanges":{"!type":"fn() -> !this"},"focuschange":{"!type":"fn(this: +Ext.selection.Model, oldFocused: +Ext.data.Model, newFocused: +Ext.data.Model, eOpts: ?)","!doc":"<p>Fired when a row is focused</p>\n"},"selectionchange":{"!type":"fn(this: +Ext.selection.Model, selected: [+Ext.data.Model], eOpts: ?)","!doc":"<p>Fired after a selection change has occurred</p>\n"}}},"RowModel":{"!doc":"<p>Implements row based navigation via keyboard.</p>\n\n<p>Must synchronize across grid sections.</p>\n","!type":"fn()","prototype":{"!proto":"Ext.selection.Model.prototype","enableKeyNav":{"!type":"bool","!doc":"<p>Turns on/off keyboard navigation within the grid.</p>\n"},"ignoreRightMouseSelection":{"!type":"bool","!doc":"<p>True to ignore selections that are made when using the right mouse button if there are\nrecords that are already selected. If no records are selected, selection will continue\nas normal</p>\n"},"deltaScroll":{"!type":"number","!doc":"<p>Number of pixels to scroll to the left/right when pressing\nleft/right keys.</p>\n"},"afterBufferedScrollTo":{"!type":"fn(newIdx: ?, newRecord: ?) -> !this"},"allowRightMouseSelection":{"!type":"fn(e: +Ext.EventObject) -> bool","!doc":"<p>Checks whether a selection should proceed based on the ignoreRightMouseSelection\noption.</p>\n"},"bindComponent":{"!type":"fn(view: ?) -> !this"},"getCurrentPosition":{"!type":"fn() -> !this","!doc":"<p>Returns position of the first selected cell in the selection in the format {row: row, column: column}</p>\n"},"getRowsVisible":{"!type":"fn() -> !this","!doc":"<p>Returns the number of rows currently visible on the screen or\nfalse if there were no rows. This assumes that all rows are\nof the same height and the first view is accurate.</p>\n"},"initKeyNav":{"!type":"fn(view: ?) -> !this"},"isRowSelected":{"!type":"fn(record: ?, index: ?) -> !this"},"onEditorTab":{"!type":"fn(editingPlugin: ?, e: ?) -> !this"},"onKeyDown":{"!type":"fn(e: ?) -> !this","!doc":"<p>Navigate one record down. This could be a selection or\ncould be simply focusing a record for discontiguous\nselection. Provides bounds checking.</p>\n"},"onKeyEnd":{"!type":"fn(e: ?) -> !this","!doc":"<p>go to last visible record in grid.</p>\n"},"onKeyEnter":{"!type":"fn() -> !this"},"onKeyHome":{"!type":"fn(e: ?) -> !this","!doc":"<p>go to first visible record in grid.</p>\n"},"onKeyLeft":{"!type":"fn(e: ?) -> !this"},"onKeyPageDown":{"!type":"fn(e: ?) -> !this","!doc":"<p>Go one page down from the lastFocused record in the grid.</p>\n"},"onKeyPageUp":{"!type":"fn(e: ?) -> !this","!doc":"<p>Go one page up from the lastFocused record in the grid.</p>\n"},"onKeyRight":{"!type":"fn(e: ?) -> !this"},"onKeySpace":{"!type":"fn(e: ?) -> !this","!doc":"<p>Select/Deselect based on pressing Spacebar.</p>\n"},"onKeyUp":{"!type":"fn(e: ?) -> !this","!doc":"<p>Navigate one record up. This could be a selection or\ncould be simply focusing a record for discontiguous\nselection. Provides bounds checking.</p>\n"},"onLastFocusChanged":{"!type":"fn(oldFocused: ?, newFocused: ?, supressFocus: ?) -> !this","!doc":"<p>Provide indication of what row was last focused via\nthe gridview.</p>\n"},"onRowClick":{"!type":"fn(view: ?, record: ?, item: ?, index: ?, e: ?) -> !this"},"onRowMouseDown":{"!type":"fn(view: ?, record: ?, item: ?, index: ?, e: ?) -> !this","!doc":"<p>Select the record with the event included so that\nwe can take into account ctrlKey, shiftKey, etc</p>\n"},"onSelectChange":{"!type":"fn(record: ?, isSelected: ?, suppressEvent: ?, commitFn: ?) -> !this","!doc":"<p>Allow the GridView to update the UI by\nadding/removing a CSS class from the row.</p>\n"},"onUpdate":{"!type":"fn(record: ?) -> !this","!doc":"<p>Called when the contents of the node are updated, perform any processing here.</p>\n"},"onVetoUIEvent":{"!type":"fn(type: ?, view: ?, cell: ?, rowIndex: ?, cellIndex: ?, e: ?, record: ?) -> !this","!doc":"<p>If the mousedown event is vetoed, we still want to treat it as though we've had\na mousedown because we don't want to proceed on click. For example, the click on\nan action column vetoes the mousedown event so the click isn't processed.</p>\n"},"processSelection":{"!type":"fn(view: ?, record: ?, item: ?, index: ?, e: ?) -> !this"},"scrollByDeltaX":{"!type":"fn(delta: ?) -> !this"},"selectByPosition":{"!type":"fn(position: ?) -> !this"},"selectNext":{"!type":"fn(keepExisting?: bool, suppressEvent?: bool) -> bool","!doc":"<p>Selects the record immediately following the currently selected record.</p>\n"},"selectPrevious":{"!type":"fn(keepExisting?: bool, suppressEvent?: bool) -> bool","!doc":"<p>Selects the record that precedes the currently selected record.</p>\n"},"beforedeselect":{"!type":"fn(this: +Ext.selection.RowModel, record: +Ext.data.Model, index: number, eOpts: ?)","!doc":"<p>Fired before a record is deselected. If any listener returns false, the\ndeselection is cancelled.</p>\n"},"beforeselect":{"!type":"fn(this: +Ext.selection.RowModel, record: +Ext.data.Model, index: number, eOpts: ?)","!doc":"<p>Fired before a record is selected. If any listener returns false, the\nselection is cancelled.</p>\n"},"deselect":{"!type":"fn(this: +Ext.selection.RowModel, record: +Ext.data.Model, index: number, eOpts: ?)","!doc":"<p>Fired after a record is deselected</p>\n"},"select":{"!type":"fn(this: +Ext.selection.RowModel, record: +Ext.data.Model, index: number, eOpts: ?)","!doc":"<p>Fired after a record is selected</p>\n"}}},"TreeModel":{"!doc":"<p>Adds custom behavior for left/right keyboard navigation for use with a tree.\nDepends on the view having an expand and collapse method which accepts a\nrecord. This selection model is created by default for <a href=\"#!/api/Ext.tree.Panel\" rel=\"Ext.tree.Panel\" class=\"docClass\">Ext.tree.Panel</a>.</p>\n","!type":"fn()","prototype":{"!proto":"Ext.selection.RowModel.prototype","bindStore":{"!type":"fn(store: ?, initial: ?) -> !this","!doc":"<p>binds the store to the selModel.</p>\n"},"navCollapse":{"!type":"fn(e: ?, t: ?) -> !this"},"navExpand":{"!type":"fn(e: ?, t: ?) -> !this"},"onKeyEnter":{"!type":"fn(e: ?, t: ?) -> !this"},"onKeyLeft":{"!type":"fn(e: ?, t: ?) -> !this"},"onKeyRight":{"!type":"fn(e: ?, t: ?) -> !this"},"onKeySpace":{"!type":"fn(e: ?, t: ?) -> !this","!doc":"<p>Select/Deselect based on pressing Spacebar.</p>\n"},"onNodeRemove":{"!type":"fn(parent: ?, node: ?, isMove: ?) -> !this"},"toggleCheck":{"!type":"fn(e: ?) -> !this"}}}},"slider":{"Multi":{"!doc":"<p>Slider which supports vertical or horizontal orientation, keyboard adjustments, configurable snapping, axis clicking\nand animation. Can be added as an item to any container.</p>\n\n<p>Sliders can be created with more than one thumb handle by passing an array of values instead of a single one:</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.slider.Multi\" rel=\"Ext.slider.Multi\" class=\"docClass\">Ext.slider.Multi</a>', {\n    width: 200,\n    values: [25, 50, 75],\n    increment: 5,\n    minValue: 0,\n    maxValue: 100,\n\n    // this defaults to true, setting to false allows the thumbs to pass each other\n    constrainThumbs: false,\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_slider_Multi_cfg)","prototype":{"!proto":"Ext.form.field.Base.prototype","animate":{"!type":"bool","!doc":"<p>Turn on or off animation.</p>\n"},"clickToChange":{"!type":"bool","!doc":"<p>Determines whether or not clicking on the Slider axis will change the slider.</p>\n"},"componentLayout":{"!type":"string|?","!doc":"<p>The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout\nmanager which sizes a Component's internal structure in response to the Component being sized.</p>\n\n<p>Generally, developers will not use this configuration as all provided Components which need their internal\nelements sizing (Such as <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">input fields</a>) come with their own componentLayout managers.</p>\n\n<p>The <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used on instances of the base <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\nclass which simply sizes the Component's encapsulating element to the height and width specified in the\n<a href=\"#!/api/Ext.slider.Multi-method-setSize\" rel=\"Ext.slider.Multi-method-setSize\" class=\"docClass\">setSize</a> method.</p>\n"},"constrainThumbs":{"!type":"bool","!doc":"<p>True to disallow thumbs from overlapping one another.</p>\n"},"decimalPrecision":{"!type":"number|bool","!doc":"<p>The number of decimal places to which to round the Slider's value.</p>\n\n<p>To disable rounding, configure as <strong>false</strong>.</p>\n"},"fieldSubTpl":{"!type":"+Ext.XTemplate","!doc":"<p>note: {id} here is really {inputId}, but {cmpId} is available</p>\n"},"increment":{"!type":"number","!doc":"<p>How many units to change the slider when adjusting by drag and drop. Use this option to enable 'snapping'.</p>\n"},"keyIncrement":{"!type":"number","!doc":"<p>How many units to change the Slider when adjusting with keyboard navigation. If the increment\nconfig is larger, it will be used instead.</p>\n"},"maxValue":{"!type":"number","!doc":"<p>The maximum value for the Slider.</p>\n"},"minValue":{"!type":"number","!doc":"<p>The minimum value for the Slider.</p>\n"},"tipText":{"!type":"fn()","!doc":"<p>A function used to display custom text for the slider tip.</p>\n\n<p>Defaults to null, which will use the default on the plugin.</p>\n"},"useTips":{"!type":"?|bool","!doc":"<p>True to use an <a href=\"#!/api/Ext.slider.Tip\" rel=\"Ext.slider.Tip\" class=\"docClass\">Ext.slider.Tip</a> to display tips for the value. This option may also\nprovide a configuration object for an <a href=\"#!/api/Ext.slider.Tip\" rel=\"Ext.slider.Tip\" class=\"docClass\">Ext.slider.Tip</a>.</p>\n"},"value":{"!type":"number","!doc":"<p>A value with which to initialize the slider. Setting this will only result in the creation\nof a single slider thumb; if you want multiple thumbs then use the <a href=\"#!/api/Ext.slider.Multi-cfg-values\" rel=\"Ext.slider.Multi-cfg-values\" class=\"docClass\">values</a> config instead.</p>\n\n<p>Defaults to <a href=\"#!/api/Ext.slider.Multi-cfg-minValue\" rel=\"Ext.slider.Multi-cfg-minValue\" class=\"docClass\">minValue</a>.</p>\n"},"values":{"!type":"[number]","!doc":"<p>Array of Number values with which to initalize the slider. A separate slider thumb will be created for each value\nin this array. This will take precedence over the single <a href=\"#!/api/Ext.slider.Multi-cfg-value\" rel=\"Ext.slider.Multi-cfg-value\" class=\"docClass\">value</a> config.</p>\n"},"vertical":{"!type":"bool","!doc":"<p>Orient the Slider vertically rather than horizontally.</p>\n"},"zeroBasedSnapping":{"!type":"bool","!doc":"<p>Set to <code>true</code> to calculate snap points based on <a href=\"#!/api/Ext.slider.Multi-cfg-increment\" rel=\"Ext.slider.Multi-cfg-increment\" class=\"docClass\">increment</a>s from zero as opposed to\nfrom this Slider's <a href=\"#!/api/Ext.slider.Multi-cfg-minValue\" rel=\"Ext.slider.Multi-cfg-minValue\" class=\"docClass\">minValue</a>.</p>\n\n<p>By Default, valid snap points are calculated starting <a href=\"#!/api/Ext.slider.Multi-cfg-increment\" rel=\"Ext.slider.Multi-cfg-increment\" class=\"docClass\">increment</a>s from the <a href=\"#!/api/Ext.slider.Multi-cfg-minValue\" rel=\"Ext.slider.Multi-cfg-minValue\" class=\"docClass\">minValue</a></p>\n"},"ariaRole":{"!type":"string"},"childEls":{"!type":"[?]"},"clickRange":{"!type":"[number]","!doc":"<p>Determines whether or not a click to the slider component is considered to be a user request to change the value. Specified as an array of [top, bottom],\nthe click event's 'top' property is compared to these numbers and the click only considered a change request if it falls within them. e.g. if the 'top'\nvalue of the click event is 4 or 16, the click is not considered a change request as it falls outside of the [5, 15] range</p>\n"},"dragging":{"!type":"bool","!doc":"<p>True while the thumb is in a drag operation</p>\n"},"horizontalProp":{"!type":"string"},"thumbs":{"!type":"[?]","!doc":"<p>Array containing references to each thumb</p>\n"},"transformTrackPoints":{"!type":"?"},"addThumb":{"!type":"fn(value?: number) -> +Ext.slider.Thumb","!doc":"<p>Creates a new thumb and adds it to the slider</p>\n"},"beforeDestroy":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"calculateThumbPosition":{"!type":"fn(v: ?) -> !this","!doc":"<p>Given a value within this Slider's range, calculates a Thumb's percentage CSS position to map that value.</p>\n"},"getNearest":{"!type":"fn(trackPoint: number) -> ?","!doc":"<p>Returns the nearest thumb to a click event, along with its distance</p>\n"},"getRange":{"!type":"fn() -> !this"},"getRatio":{"!type":"fn() -> number","!doc":"<p>Returns the ratio of pixels to mapped values. e.g. if the slider is 200px wide and maxValue - minValue is 100,\nthe ratio is 2</p>\n"},"getSubTplData":{"!type":"fn() -> ?","!doc":"<p>private override</p>\n"},"getSubmitValue":{"!type":"fn() -> string","!doc":"<p>Returns the value that would be included in a standard form submit for this field. This will be combined with the\nfield's name to form a name=value pair in the <a href=\"#!/api/Ext.slider.Multi-method-getSubmitData\" rel=\"Ext.slider.Multi-method-getSubmitData\" class=\"docClass\">submitted parameters</a>. If an empty string is\nreturned then just the name= will be submitted; if null is returned then nothing will be submitted.</p>\n\n<p>Note that the value returned will have been <a href=\"#!/api/Ext.slider.Multi-method-processRawValue\" rel=\"Ext.slider.Multi-method-processRawValue\" class=\"docClass\">processed</a> but may or may not have been\nsuccessfully <a href=\"#!/api/Ext.slider.Multi-method-validate\" rel=\"Ext.slider.Multi-method-validate\" class=\"docClass\">validated</a>.</p>\n"},"getTrackpoint":{"!type":"fn(xy: [number]) -> !this","!doc":"<p>Given an <code>[x, y]</code> position within the slider's track (Points outside the slider's track are coerced to either the minimum or maximum value),\ncalculate how many pixels <strong>from the slider origin</strong> (left for horizontal Sliders and bottom for vertical Sliders) that point is.</p>\n\n<p>If the point is outside the range of the Slider's track, the return value is <code>undefined</code></p>\n"},"getValue":{"!type":"fn(index: number) -> number|[number]","!doc":"<p>Returns the current value of the slider</p>\n"},"getValues":{"!type":"fn() -> [number]","!doc":"<p>Returns an array of values - one for the location of each thumb</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>private override</p>\n"},"initEvents":{"!type":"fn() -> !this","!doc":"<p>Adds keyboard and mouse listeners on this.el. Ignores click events on the internal focus element.</p>\n"},"initValue":{"!type":"fn() -> !this","!doc":"<p>private override</p>\n"},"normalizeValue":{"!type":"fn(value: number) -> number","!doc":"<p>Returns a snapped, constrained value when given a desired value</p>\n"},"onClickChange":{"!type":"fn(trackPoint: number) -> !this","!doc":"<p>Moves the thumb to the indicated position.\nOnly changes the value if the click was within this.clickRange.</p>\n"},"onDisable":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"onDragEnd":{"!type":"fn() -> !this"},"onDragStart":{"!type":"fn() -> !this"},"onEnable":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"onKeyDown":{"!type":"fn(e: +Ext.EventObject) -> !this","!doc":"<p>Handler for any keypresses captured by the slider. If the key is UP or RIGHT, the thumb is moved along to the right\nby this.keyIncrement. If DOWN or LEFT it is moved left. Pressing CTRL moves the slider to the end in either direction</p>\n"},"onMouseDown":{"!type":"fn(e: +Ext.EventObject) -> !this","!doc":"<p>Mousedown handler for the slider. If the clickToChange is enabled and the click was not on the draggable 'thumb',\nthis calculates the new value of the slider and tells the implementation (Horizontal or Vertical) to move the thumb</p>\n"},"onRender":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"promoteThumb":{"!type":"fn(topThumb: +Ext.slider.Thumb) -> !this","!doc":"<p>Moves the given thumb above all other by increasing its z-index. This is called when as drag\nany thumb, so that the thumb that was just dragged is always at the highest z-index. This is\nrequired when the thumbs are stacked on top of each other at one of the ends of the slider's\nrange, which can result in the user not being able to move any of them.</p>\n"},"reset":{"!type":"fn() -> !this","!doc":"<p>Resets the current field value to the originally loaded value and clears any validation messages. See <a href=\"#!/api/Ext.form.Basic\" rel=\"Ext.form.Basic\" class=\"docClass\">Ext.form.Basic</a>.<a href=\"#!/api/Ext.form.Basic-cfg-trackResetOnLoad\" rel=\"Ext.form.Basic-cfg-trackResetOnLoad\" class=\"docClass\">trackResetOnLoad</a></p>\n"},"reversePercentageValue":{"!type":"fn(pos: number) -> number","!doc":"<p>Given a Thumb's percentage position along the slider, returns the mapped slider value for that pixel.\nE.g. if we have a slider 200px wide with minValue = 100 and maxValue = 500, reversePercentageValue(25)\nreturns 200</p>\n"},"reversePixelValue":{"!type":"fn(pos: number) -> number","!doc":"<p>Given a pixel location along the slider, returns the mapped slider value for that pixel.\nE.g. if we have a slider 200px wide with minValue = 100 and maxValue = 500, reversePixelValue(50)\nreturns 200</p>\n"},"setMaxValue":{"!type":"fn(val: number) -> !this","!doc":"<p>Sets the maximum value for the slider instance. If the current value is more than the maximum value, the current\nvalue will be changed.</p>\n"},"setMinValue":{"!type":"fn(val: number) -> !this","!doc":"<p>Sets the minimum value for the slider instance. If the current value is less than the minimum value, the current\nvalue will be changed.</p>\n"},"setReadOnly":{"!type":"fn(readOnly: ?) -> !this","!doc":"<p>Sets the read only state of this field.</p>\n"},"setValue":{"!type":"fn(index: number|[number], value: number, animate?: bool) -> +Ext.slider.Multi","!doc":"<p>Programmatically sets the value of the Slider. Ensures that the value is constrained within the minValue and\nmaxValue.</p>\n\n<p>Setting a single value:\n    // Set the second slider value, don't animate\n    mySlider.setValue(1, 50, false);</p>\n\n<p>Setting multiple values at once\n    // Set 3 thumb values, animate\n    mySlider.setValue([20, 40, 60], true);</p>\n"},"syncThumbs":{"!type":"fn() -> !this","!doc":"<p>Synchronizes thumbs position to the proper proportion of the total component width based on the current slider\n<a href=\"#!/api/Ext.slider.Multi-cfg-value\" rel=\"Ext.slider.Multi-cfg-value\" class=\"docClass\">value</a>. This will be called automatically when the Slider is resized by a layout, but if it is rendered\nauto width, this method can be called from another resize handler to sync the Slider if necessary.</p>\n"},"beforechange":{"!type":"fn(slider: +Ext.slider.Multi, newValue: number, oldValue: number, eOpts: ?)","!doc":"<p>Fires before the slider value is changed. By returning false from an event handler, you can cancel the\nevent and prevent the slider from changing.</p>\n"},"change":{"!type":"fn(slider: +Ext.slider.Multi, newValue: number, thumb: +Ext.slider.Thumb, eOpts: ?)","!doc":"<p>Fires when the slider value is changed.</p>\n"},"changecomplete":{"!type":"fn(slider: +Ext.slider.Multi, newValue: number, thumb: +Ext.slider.Thumb, eOpts: ?)","!doc":"<p>Fires when the slider value is changed by the user and any drag operations have completed.</p>\n"},"drag":{"!type":"fn(slider: +Ext.slider.Multi, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires continuously during the drag operation while the mouse is moving.</p>\n"},"dragend":{"!type":"fn(slider: +Ext.slider.Multi, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires after the drag operation has completed.</p>\n"},"dragstart":{"!type":"fn(slider: +Ext.slider.Multi, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires after a drag operation has started.</p>\n"}}},"Single":{"!doc":"<p>Slider which supports vertical or horizontal orientation, keyboard adjustments, configurable snapping, axis clicking\nand animation. Can be added as an item to any container.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.slider.Single\" rel=\"Ext.slider.Single\" class=\"docClass\">Ext.slider.Single</a>', {\n    width: 200,\n    value: 50,\n    increment: 10,\n    minValue: 0,\n    maxValue: 100,\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n\n<p>The class <a href=\"#!/api/Ext.slider.Single\" rel=\"Ext.slider.Single\" class=\"docClass\">Ext.slider.Single</a> is aliased to <a href=\"#!/api/Ext.slider.Single\" rel=\"Ext.slider.Single\" class=\"docClass\">Ext.Slider</a> for backwards compatibility.</p>\n","!type":"fn(config: +Ext.Element|string|Ext_slider_Single_cfg)","prototype":{"!proto":"Ext.slider.Multi.prototype","getNearest":{"!type":"fn(trackPoint: number) -> ?","!doc":"<p>private</p>\n"},"getValue":{"!type":"fn() -> number","!doc":"<p>Returns the current value of the slider</p>\n"},"setValue":{"!type":"fn(value: number, animate?: bool) -> !this","!doc":"<p>Programmatically sets the value of the Slider. Ensures that the value is constrained within the minValue and\nmaxValue.</p>\n"}}},"Thumb":{"!doc":"<p>Represents a single thumb element on a Slider. This would not usually be created manually and would instead\nbe created internally by an <a href=\"#!/api/Ext.slider.Multi\" rel=\"Ext.slider.Multi\" class=\"docClass\">Multi slider</a>.</p>\n","!type":"fn(config?: Ext_slider_Thumb_cfg)","prototype":{"!proto":"Ext.Base.prototype","constrain":{"!type":"bool","!doc":"<p>True to constrain the thumb so that it cannot overlap its siblings</p>\n"},"slider":{"!type":"+Ext.slider.MultiSlider","!doc":"<p>The slider this thumb is contained within</p>\n"},"topThumbZIndex":{"!type":"number","!doc":"<p>The number used internally to set the z index of the top thumb (see promoteThumb for details)</p>\n"},"bringToFront":{"!type":"fn() -> !this","!doc":"<p>Bring thumb dom element to front.</p>\n"},"destroy":{"!type":"fn() -> !this"},"disable":{"!type":"fn() -> !this","!doc":"<p>Disables the thumb if it is currently enabled</p>\n"},"enable":{"!type":"fn() -> !this","!doc":"<p>Enables the thumb if it is currently disabled</p>\n"},"getElConfig":{"!type":"fn() -> !this"},"getValueFromTracker":{"!type":"fn() -> !this"},"initEvents":{"!type":"fn() -> !this","!doc":"<p>Sets up an <a href=\"#!/api/Ext.dd.DragTracker\" rel=\"Ext.dd.DragTracker\" class=\"docClass\">Ext.dd.DragTracker</a> for this thumb</p>\n"},"move":{"!type":"fn(v: ?, animate: ?) -> !this","!doc":"<p>move the thumb</p>\n"},"onBeforeDragStart":{"!type":"fn(e: ?) -> bool","!doc":"<p>This is tied into the internal <a href=\"#!/api/Ext.dd.DragTracker\" rel=\"Ext.dd.DragTracker\" class=\"docClass\">Ext.dd.DragTracker</a>. If the slider is currently disabled,\nthis returns false to disable the DragTracker too.</p>\n"},"onDrag":{"!type":"fn(e: ?) -> !this","!doc":"<p>This is tied into the internal <a href=\"#!/api/Ext.dd.DragTracker\" rel=\"Ext.dd.DragTracker\" class=\"docClass\">Ext.dd.DragTracker</a>'s onDrag template method. This is called every time\nthe DragTracker detects a drag movement. It updates the Slider's value using the position of the drag</p>\n"},"onDragEnd":{"!type":"fn(e: ?) -> !this","!doc":"<p>This is tied to the internal <a href=\"#!/api/Ext.dd.DragTracker\" rel=\"Ext.dd.DragTracker\" class=\"docClass\">Ext.dd.DragTracker</a>'s onEnd template method. Removes the drag CSS class and\nfires the 'changecomplete' event with the new value</p>\n"},"onDragStart":{"!type":"fn(e: ?) -> !this","!doc":"<p>This is tied into the internal <a href=\"#!/api/Ext.dd.DragTracker\" rel=\"Ext.dd.DragTracker\" class=\"docClass\">Ext.dd.DragTracker</a>'s onStart template method. Adds the drag CSS class\nto the thumb and fires the 'dragstart' event</p>\n"},"onRender":{"!type":"fn() -> !this"},"render":{"!type":"fn() -> !this","!doc":"<p>Renders the thumb into a slider</p>\n"},"sendToBack":{"!type":"fn() -> !this","!doc":"<p>Send thumb dom element to back.</p>\n"}}},"Tip":{"!doc":"<p>Simple plugin for using an <a href=\"#!/api/Ext.tip.Tip\" rel=\"Ext.tip.Tip\" class=\"docClass\">Ext.tip.Tip</a> with a slider to show the slider value. In general this class is not created\ndirectly, instead pass the <a href=\"#!/api/Ext.slider.Multi-cfg-useTips\" rel=\"Ext.slider.Multi-cfg-useTips\" class=\"docClass\">Ext.slider.Multi.useTips</a> and <a href=\"#!/api/Ext.slider.Multi-cfg-tipText\" rel=\"Ext.slider.Multi-cfg-tipText\" class=\"docClass\">Ext.slider.Multi.tipText</a> configuration\noptions to the slider directly.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.slider.Single\" rel=\"Ext.slider.Single\" class=\"docClass\">Ext.slider.Single</a>', {\n    width: 214,\n    minValue: 0,\n    maxValue: 100,\n    useTips: true,\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n\n<p>Optionally provide your own tip text by passing tipText:</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.slider.Single\" rel=\"Ext.slider.Single\" class=\"docClass\">Ext.slider.Single</a>', {\n    width: 214,\n    minValue: 0,\n    maxValue: 100,\n    useTips: true,\n    tipText: function(thumb){\n        return <a href=\"#!/api/Ext.String-method-format\" rel=\"Ext.String-method-format\" class=\"docClass\">Ext.String.format</a>('**{0}% complete**', thumb.value);\n    },\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_slider_Tip_cfg)","prototype":{"!proto":"Ext.tip.Tip.prototype","align":{"!type":"string","!doc":"<p>Alignment configuration for the tip to the slider. See <a href=\"#!/api/Ext.util.Positionable-method-alignTo\" rel=\"Ext.util.Positionable-method-alignTo\" class=\"docClass\">Ext.util.Positionable.alignTo</a>. Default\nvalues for alignment are provided by specifying the <a href=\"#!/api/Ext.slider.Tip-cfg-position\" rel=\"Ext.slider.Tip-cfg-position\" class=\"docClass\">position</a> config.</p>\n"},"minWidth":{"!type":"number","!doc":"<p>The minimum width of the tip in pixels.</p>\n"},"offsets":{"!type":"[?]","!doc":"<p>Offsets for aligning the tip to the slider. See <a href=\"#!/api/Ext.util.Positionable-method-alignTo\" rel=\"Ext.util.Positionable-method-alignTo\" class=\"docClass\">Ext.util.Positionable.alignTo</a>. Default values\nfor offsets are provided by specifying the <a href=\"#!/api/Ext.slider.Tip-cfg-position\" rel=\"Ext.slider.Tip-cfg-position\" class=\"docClass\">position</a> config.</p>\n"},"position":{"!type":"string","!doc":"<p>Sets the position for where the tip will be displayed related to the thumb. This sets\ndefaults for <a href=\"#!/api/Ext.slider.Tip-cfg-align\" rel=\"Ext.slider.Tip-cfg-align\" class=\"docClass\">align</a> and <a href=\"#!/api/Ext.slider.Tip-cfg-offsets\" rel=\"Ext.slider.Tip-cfg-offsets\" class=\"docClass\">offsets</a> configurations. If <a href=\"#!/api/Ext.slider.Tip-cfg-align\" rel=\"Ext.slider.Tip-cfg-align\" class=\"docClass\">align</a> or\n<a href=\"#!/api/Ext.slider.Tip-cfg-offsets\" rel=\"Ext.slider.Tip-cfg-offsets\" class=\"docClass\">offsets</a> configurations are specified, they will override the defaults defined\nby position.</p>\n"},"defaultHorizontalPosition":{"!type":"string"},"defaultVerticalPosition":{"!type":"string"},"isSliderTip":{"!type":"bool"},"getText":{"!type":"fn(thumb: +Ext.slider.Thumb) -> string","!doc":"<p>Used to create the text that appears in the Tip's body. By default this just returns the value of the Slider\nThumb that the Tip is attached to. Override to customize.</p>\n"},"init":{"!type":"fn(slider: ?) -> !this"},"onSlide":{"!type":"fn(slider: +Ext.slider.MultiSlider, e: +Ext.EventObject, thumb: +Ext.slider.Thumb) -> !this","!doc":"<p>Called whenever a dragstart or drag event is received on the associated Thumb.\nAligns the Tip with the Thumb's new position.</p>\n"}}}},"supports":{"!doc":"<p>Determines information about features are supported in the current environment</p>\n","ArraySort":{"!type":"bool","!doc":"<p>True if the Array sort native method isn't bugged.</p>\n"},"AudioTag":{"!type":"bool","!doc":"<p>True if the device supports the HTML5 audio tag</p>\n"},"BoundingClientRect":{"!type":"bool","!doc":"<p>True if the browser supports the getBoundingClientRect method on elements</p>\n"},"CSS3BorderRadius":{"!type":"bool","!doc":"<p>True if the device supports CSS3 border radius</p>\n"},"CSS3BoxShadow":{"!type":"bool","!doc":"<p>True if document environment supports the CSS3 box-shadow style.</p>\n"},"CSS3DTransform":{"!type":"bool","!doc":"<p>True if the device supports CSS3DTransform</p>\n"},"CSS3LinearGradient":{"!type":"bool","!doc":"<p>True if the device supports CSS3 linear gradients</p>\n"},"Canvas":{"!type":"bool","!doc":"<p>True if the device supports Canvas</p>\n"},"ClassList":{"!type":"bool","!doc":"<p>True if document environment supports the HTML5 classList API.</p>\n"},"ComputedStyle":{"!type":"bool","!doc":"<p>True if the browser supports document.defaultView.getComputedStyle()</p>\n"},"CreateContextualFragment":{"!type":"bool","!doc":"<p>True if browser support CreateContextualFragment range native methods.</p>\n"},"DeviceMotion":{"!type":"bool","!doc":"<p>True if the device supports device motion (acceleration and rotation rate)</p>\n"},"Direct2DBug":{"!type":"bool","!doc":"<p>True if when asking for an element's dimension via offsetWidth or offsetHeight,\ngetBoundingClientRect, etc. the browser returns the subpixel width rounded to the nearest pixel.</p>\n"},"DisplayChangeInputSelectionBug":{"!type":"?","!doc":"<p>True if INPUT elements lose their\nselection when their display style is changed. Essentially, if a text input\nhas focus and its display style is changed, the I-beam disappears.</p>\n\n<p>This bug is encountered due to the work around in place for the <a href=\"#!/api/Ext.supports-property-RightMargin\" rel=\"Ext.supports-property-RightMargin\" class=\"docClass\">RightMargin</a>\nbug. This has been observed in Safari 4.0.4 and older, and appears to be fixed\nin Safari 5. It's not clear if Safari 4.1 has the bug, but it has the same WebKit\nversion number as Safari 5 (according to http://unixpapa.com/js/gecko.html).</p>\n"},"DisplayChangeTextAreaSelectionBug":{"!type":"?","!doc":"<p>True if TEXTAREA elements lose their\nselection when their display style is changed. Essentially, if a text area has\nfocus and its display style is changed, the I-beam disappears.</p>\n\n<p>This bug is encountered due to the work around in place for the <a href=\"#!/api/Ext.supports-property-RightMargin\" rel=\"Ext.supports-property-RightMargin\" class=\"docClass\">RightMargin</a>\nbug. This has been observed in Chrome 10 and Safari 5 and older, and appears to\nbe fixed in Chrome 11.</p>\n"},"Float":{"!type":"bool","!doc":"<p>True if the device supports CSS float</p>\n"},"GeoLocation":{"!type":"bool","!doc":"<p>True if the device supports GeoLocation</p>\n"},"GetPositionPercentage":{"!type":"bool","!doc":"<p>True if the browser will return the left/top/right/bottom\nposition as a percentage when explicitly set as a percentage value.</p>\n"},"History":{"!type":"bool","!doc":"<p>True if the device supports HTML5 history</p>\n"},"LocalStorage":{"!type":"?","!doc":"<p>True if localStorage is supported</p>\n"},"MouseEnterLeave":{"!type":"bool","!doc":"<p>True if the browser supports mouseenter and mouseleave events</p>\n"},"MouseWheel":{"!type":"bool","!doc":"<p>True if the browser supports the mousewheel event</p>\n"},"Opacity":{"!type":"bool","!doc":"<p>True if the browser supports normal css opacity</p>\n"},"OrientationChange":{"!type":"bool","!doc":"<p>True if the device supports orientation change</p>\n"},"PercentageHeightOverflowBug":{"!type":"bool","!doc":"<p>In some browsers (IE quirks, IE6, IE7, IE9, chrome, safari and opera at the time\nof this writing) a percentage-height element ignores the horizontal scrollbar\nof its parent element.  This method returns true if the browser is affected\nby this bug.</p>\n"},"Placeholder":{"!type":"bool","!doc":"<p>True if the browser supports the HTML5 placeholder attribute on inputs</p>\n"},"PointerEvents":{"!type":"bool","!doc":"<p>True if document environment supports the CSS3 pointer-events style.</p>\n"},"Range":{"!type":"bool","!doc":"<p>True if browser support document.createRange native method.</p>\n"},"RightMargin":{"!type":"bool","!doc":"<p>True if the device supports right margin.\nSee https://bugs.webkit.org/show_bug.cgi?id=13343 for why this is needed.</p>\n"},"RotatedBoundingClientRect":{"!type":"bool","!doc":"<p>True if the BoundingClientRect is\nrotated when the element is rotated using a CSS transform.</p>\n"},"ScrollWidthInlinePaddingBug":{"!type":"bool","!doc":"<p>In some browsers the right padding of an overflowing element is not accounted\nfor in its scrollWidth.  The result can vary depending on whether or not\nThe element contains block-level children.  This method tests the effect\nof padding on scrollWidth when there are no block-level children inside the\noverflowing element.</p>\n\n<p>This method returns true if the browser is affected by this bug.</p>\n"},"Svg":{"!type":"bool","!doc":"<p>True if the device supports SVG</p>\n"},"TextAreaMaxLength":{"!type":"bool","!doc":"<p>True if the browser supports maxlength on textareas.</p>\n"},"TimeoutActualLateness":{"!type":"bool","!doc":"<p>True if the browser passes the \"actualLateness\" parameter to\nsetTimeout. See: https://developer.mozilla.org/en/DOM/window.setTimeout</p>\n"},"Touch":{"!type":"bool","!doc":"<p>True if the device supports touch</p>\n"},"Transitions":{"!type":"bool","!doc":"<p>True if the device supports CSS3 Transitions</p>\n"},"TransparentColor":{"!type":"bool","!doc":"<p>True if the device supports transparent color</p>\n"},"Vml":{"!type":"bool","!doc":"<p>True if the device supports VML</p>\n"},"WindowOnError":{"!type":"bool","!doc":"<p>True if browser supports window.onerror.</p>\n"},"xOriginBug":{"!type":"bool","!doc":"<p>In Chrome 24.0, an RTL element which has vertical overflow positions its right X origin incorrectly.\nIt skips a non-existent scrollbar which has been moved to the left edge due to the RTL setting.</p>\n\n<p>http://code.google.com/p/chromium/issues/detail?id=174656</p>\n\n<p>This method returns true if the browser is affected by this bug.</p>\n"},"generateVector":{"!type":"fn() -> !this","!doc":"<p>Generates a support vector for the current browser/mode.  The result can be\nadded to supportsVectors to eliminate feature detection at startup time.</p>\n"},"init":{"!type":"fn() -> !this","!doc":"<p>Runs feature detection routines and sets the various flags. This is called when\nthe scripts loads (very early) and again at <a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>. Some detections\nare flagged as <code>early</code> and run immediately. Others that require the document body\nwill not run until ready.</p>\n\n<p>Each test is run only once, so calling this method from an onReady function is safe\nand ensures that all flags have been set.</p>\n"}},"tab":{"Bar":{"!doc":"<p>TabBar is used internally by a <a href=\"#!/api/Ext.tab.Panel\" rel=\"Ext.tab.Panel\" class=\"docClass\">TabPanel</a> and typically should not need to be created manually.\nThe tab bar automatically removes the default title provided by <a href=\"#!/api/Ext.panel.Header\" rel=\"Ext.panel.Header\" class=\"docClass\">Ext.panel.Header</a></p>\n","!type":"fn(config: +Ext.Element|string|Ext_tab_Bar_cfg)","prototype":{"!proto":"Ext.panel.Header.prototype","baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this component's element. This will also be prepended to elements within this\ncomponent like Panel's body will get a class <code>x-panel-body</code>. This means that if you create a subclass of Panel, and\nyou want it to get all the Panels styling for the element and the body, you leave the <code>baseCls</code> <code>x-panel</code> and use\n<code>componentCls</code> to add specific styling for this component.</p>\n"},"defaultType":{"!type":"string","!doc":"<p>The default <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">xtype</a> of child Components to create in this Container when\na child item is specified as a raw configuration object, rather than as an instantiated Component.</p>\n"},"maxTabWidth":{"!type":"number","!doc":"<p>The maximum width for a tab in this tab Bar. Defaults to the tab Panel's <a href=\"#!/api/Ext.tab.Panel-cfg-maxTabWidth\" rel=\"Ext.tab.Panel-cfg-maxTabWidth\" class=\"docClass\">maxTabWidth</a> value.</p>\n"},"minTabWidth":{"!type":"number","!doc":"<p>The minimum width for a tab in this tab Bar. Defaults to the tab Panel's <a href=\"#!/api/Ext.tab.Panel-cfg-minTabWidth\" rel=\"Ext.tab.Panel-cfg-minTabWidth\" class=\"docClass\">minTabWidth</a> value.</p>\n"},"plain":{"!type":"bool","!doc":"<p>True to not show the full background on the tabbar</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.tab.Bar-method-getEl\" rel=\"Ext.tab.Bar-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.tab.Bar-method-getEl\" rel=\"Ext.tab.Bar-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.tab.Bar-cfg-renderSelectors\" rel=\"Ext.tab.Bar-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.tab.Bar-cfg-childEls\" rel=\"Ext.tab.Bar-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"},"childEls":{"!type":"[?]"},"isTabBar":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated Tab Bar, or subclass thereof.</p>\n"},"adjustTabPositions":{"!type":"fn() -> !this"},"afterComponentLayout":{"!type":"fn(width: ?) -> !this","!doc":"<p>Called by the layout system after the Component has been laid out.</p>\n"},"afterLayout":{"!type":"fn() -> !this","!doc":"<p>Invoked after the Container has laid out (and rendered if necessary)\nits child Components.</p>\n"},"afterRender":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior after rendering is complete. At this stage the Component’s Element\nwill have been styled according to the configuration, will have had any configured CSS class\nnames added, and will be in the configured visibility and the configured enable state.</p>\n"},"closeTab":{"!type":"fn(toClose: +Ext.tab.Tab) -> !this","!doc":"<p>Closes the given tab by removing it from the TabBar and removing the corresponding card from the TabPanel</p>\n"},"findNextActivatable":{"!type":"fn(toClose: ?) -> !this","!doc":"<p>private - used by TabPanel too.\nWorks out the next tab to activate when one tab is closed.</p>\n"},"getLayout":{"!type":"fn() -> +Ext.layout.container.Container","!doc":"<p>Returns the <a href=\"#!/api/Ext.layout.container.Container\" rel=\"Ext.layout.container.Container\" class=\"docClass\">layout</a> instance currently associated with this Container.\nIf a layout has not been instantiated yet, that is done first</p>\n"},"getTabInfoFromPoint":{"!type":"fn(xy: ?) -> !this","!doc":"<p>in IE8 and IE9 the clickable region of a rotated element is not its new rotated\nposition, but it's original unrotated position.  The result is that rotated tabs do\nnot capture click and mousenter/mosueleave events correctly.  This method accepts\nan xy position and calculates if the coordinates are within a tab and if they\nare within the tab's close icon (if any)</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>The initComponent template method is an important initialization step for a Component. It is intended to be\nimplemented by each subclass of <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> to provide any needed constructor logic. The\ninitComponent method of the class being created is called first, with each initComponent method\nup the hierarchy to <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> being called thereafter. This makes it easy to implement and,\nif needed, override the constructor logic of the Component at any step in the hierarchy.</p>\n\n<p>The initComponent method <strong>must</strong> contain a call to <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a> in order\nto ensure that the parent class' initComponent method is also called.</p>\n\n<p>All config options passed to the constructor are applied to <code>this</code> before initComponent is called,\nso you can simply access them with <code>this.someOption</code>.</p>\n\n<p>The following example demonstrates using a dynamic string for the text of a button at the time of\ninstantiation of the class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('DynamicButtonText', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n\n    initComponent: function() {\n        this.text = new Date();\n        this.renderTo = <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>();\n        this.callParent();\n    }\n});\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function() {\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('DynamicButtonText');\n});\n</code></pre>\n"},"onAdd":{"!type":"fn(tab: ?) -> !this","!doc":"<p>Set up the <code>tools.&lt;tool type&gt;</code> link in the owning Panel.</p>\n"},"onClick":{"!type":"fn(e: ?, target: ?) -> !this"},"onMouseLeave":{"!type":"fn(e: ?) -> !this"},"onMouseMove":{"!type":"fn(e: ?) -> !this","!doc":"<p>private</p>\n"},"onRemove":{"!type":"fn(tab: ?) -> !this","!doc":"<p>This method is invoked after a new Component has been\nremoved. It is passed the Component which has been\nremoved. This method may be used to update any internal\nstructure which may depend upon the state of the child items.</p>\n"},"onRender":{"!type":"fn() -> !this","!doc":"<p>Template method called when this Component's DOM structure is created.</p>\n\n<p>At this point, this Component's (and all descendants') DOM structure <em>exists</em> but it has not\nbeen layed out (positioned and sized).</p>\n\n<p>Subclasses which override this to gain access to the structure at render time should\ncall the parent class's method before attempting to access any child elements of the Component.</p>\n"},"setActiveTab":{"!type":"fn(tab: +Ext.tab.Tab, initial: bool) -> !this","!doc":"<p>Marks the given tab as active</p>\n"},"change":{"!type":"fn(tabBar: +Ext.tab.Bar, tab: +Ext.tab.Tab, card: +Ext.Component, eOpts: ?)","!doc":"<p>Fired when the currently-active tab has changed</p>\n"}}},"Panel":{"!doc":"<p>A basic tab container. TabPanels can be used exactly like a standard <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a> for\nlayout purposes, but also have special support for containing child Components\n(<code><a href=\"#!/api/Ext.container.Container-cfg-items\" rel=\"Ext.container.Container-cfg-items\" class=\"docClass\">items</a></code>) that are managed using a\n<a href=\"#!/api/Ext.layout.container.Card\" rel=\"Ext.layout.container.Card\" class=\"docClass\">CardLayout layout manager</a>, and displayed as separate tabs.</p>\n\n<p><strong>Note:</strong> By default, a tab's close tool <em>destroys</em> the child tab Component and all its descendants.\nThis makes the child tab Component, and all its descendants <strong>unusable</strong>.  To enable re-use of a tab,\nconfigure the TabPanel with <code><a href=\"#!/api/Ext.tab.Panel-cfg-autoDestroy\" rel=\"Ext.tab.Panel-cfg-autoDestroy\" class=\"docClass\">autoDestroy: false</a></code>.</p>\n\n<h2>TabPanel's layout</h2>\n\n<p>TabPanels use a Dock layout to position the <a href=\"#!/api/Ext.tab.Bar\" rel=\"Ext.tab.Bar\" class=\"docClass\">TabBar</a> at the top of the widget.\nPanels added to the TabPanel will have their header hidden by default because the Tab will\nautomatically take the Panel's configured title and icon.</p>\n\n<p>TabPanels use their <a href=\"#!/api/Ext.panel.Header\" rel=\"Ext.panel.Header\" class=\"docClass\">header</a> or <a href=\"#!/api/Ext.panel.Panel-cfg-fbar\" rel=\"Ext.panel.Panel-cfg-fbar\" class=\"docClass\">footer</a>\nelement (depending on the <a href=\"#!/api/Ext.tab.Panel-cfg-tabPosition\" rel=\"Ext.tab.Panel-cfg-tabPosition\" class=\"docClass\">tabPosition</a> configuration) to accommodate the tab selector buttons.\nThis means that a TabPanel will not display any configured title, and will not display any configured\nheader <a href=\"#!/api/Ext.panel.Panel-cfg-tools\" rel=\"Ext.panel.Panel-cfg-tools\" class=\"docClass\">tools</a>.</p>\n\n<p>To display a header, embed the TabPanel in a <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Panel</a> which uses\n<code><a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">layout: 'fit'</a></code>.</p>\n\n<h2>Controlling tabs</h2>\n\n<p>Configuration options for the <a href=\"#!/api/Ext.tab.Tab\" rel=\"Ext.tab.Tab\" class=\"docClass\">Ext.tab.Tab</a> that represents the component can be passed in\nby specifying the tabConfig option:</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.tab.Panel\" rel=\"Ext.tab.Panel\" class=\"docClass\">Ext.tab.Panel</a>', {\n    width: 400,\n    height: 400,\n    renderTo: document.body,\n    items: [{\n        title: 'Foo'\n    }, {\n        title: 'Bar',\n        tabConfig: {\n            title: 'Custom Title',\n            tooltip: 'A button tooltip'\n        }\n    }]\n});\n</code></pre>\n\n<h2>Vetoing Changes</h2>\n\n<p>User interaction when changing the tabs can be vetoed by listening to the <a href=\"#!/api/Ext.tab.Panel-event-beforetabchange\" rel=\"Ext.tab.Panel-event-beforetabchange\" class=\"docClass\">beforetabchange</a> event.\nBy returning <code>false</code>, the tab change will not occur.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.tab.Panel\" rel=\"Ext.tab.Panel\" class=\"docClass\">Ext.tab.Panel</a>', {\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    width: 200,\n    height: 200,\n    listeners: {\n        beforetabchange: function(tabs, newTab, oldTab) {\n            return newTab.title != 'P2';\n        }\n    },\n    items: [{\n        title: 'P1'\n    }, {\n        title: 'P2'\n    }, {\n        title: 'P3'\n    }]\n}); \n</code></pre>\n\n<h1>Examples</h1>\n\n<p>Here is a basic TabPanel rendered to the body. This also shows the useful configuration <a href=\"#!/api/Ext.tab.Panel-cfg-activeTab\" rel=\"Ext.tab.Panel-cfg-activeTab\" class=\"docClass\">activeTab</a>,\nwhich allows you to set the active tab on render. If you do not set an <a href=\"#!/api/Ext.tab.Panel-cfg-activeTab\" rel=\"Ext.tab.Panel-cfg-activeTab\" class=\"docClass\">activeTab</a>, no tabs will be\nactive by default.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.tab.Panel\" rel=\"Ext.tab.Panel\" class=\"docClass\">Ext.tab.Panel</a>', {\n    width: 300,\n    height: 200,\n    activeTab: 0,\n    items: [\n        {\n            title: 'Tab 1',\n            bodyPadding: 10,\n            html : 'A simple tab'\n        },\n        {\n            title: 'Tab 2',\n            html : 'Another one'\n        }\n    ],\n    renderTo : <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n\n<p>It is easy to control the visibility of items in the tab bar. Specify hidden: true to have the\ntab button hidden initially. Items can be subsequently hidden and show by accessing the\ntab property on the child item.</p>\n\n<pre class='inline-example '><code>var tabs = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.tab.Panel\" rel=\"Ext.tab.Panel\" class=\"docClass\">Ext.tab.Panel</a>', {\n    width: 400,\n    height: 400,\n    renderTo: document.body,\n    items: [{\n        title: 'Home',\n        html: 'Home',\n        itemId: 'home'\n    }, {\n        title: 'Users',\n        html: 'Users',\n        itemId: 'users',\n        hidden: true\n    }, {\n        title: 'Tickets',\n        html: 'Tickets',\n        itemId: 'tickets'\n    }]\n});\n\nsetTimeout(function(){\n    tabs.child('#home').tab.hide();\n    var users = tabs.child('#users');\n    users.tab.show();\n    tabs.setActiveTab(users);\n}, 1000);\n</code></pre>\n\n<p>You can remove the background of the TabBar by setting the <a href=\"#!/api/Ext.tab.Panel-cfg-plain\" rel=\"Ext.tab.Panel-cfg-plain\" class=\"docClass\">plain</a> property to <code>true</code>.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.tab.Panel\" rel=\"Ext.tab.Panel\" class=\"docClass\">Ext.tab.Panel</a>', {\n    width: 300,\n    height: 200,\n    activeTab: 0,\n    plain: true,\n    items: [\n        {\n            title: 'Tab 1',\n            bodyPadding: 10,\n            html : 'A simple tab'\n        },\n        {\n            title: 'Tab 2',\n            html : 'Another one'\n        }\n    ],\n    renderTo : <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n\n<p>Another useful configuration of TabPanel is <a href=\"#!/api/Ext.tab.Panel-cfg-tabPosition\" rel=\"Ext.tab.Panel-cfg-tabPosition\" class=\"docClass\">tabPosition</a>. This allows you to change the\nposition where the tabs are displayed. The available options for this are <code>'top'</code> (default) and\n<code>'bottom'</code>.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.tab.Panel\" rel=\"Ext.tab.Panel\" class=\"docClass\">Ext.tab.Panel</a>', {\n    width: 300,\n    height: 200,\n    activeTab: 0,\n    bodyPadding: 10,\n    tabPosition: 'bottom',\n    items: [\n        {\n            title: 'Tab 1',\n            html : 'A simple tab'\n        },\n        {\n            title: 'Tab 2',\n            html : 'Another one'\n        }\n    ],\n    renderTo : <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n\n<p>The <a href=\"#!/api/Ext.tab.Panel-method-setActiveTab\" rel=\"Ext.tab.Panel-method-setActiveTab\" class=\"docClass\">setActiveTab</a> is a very useful method in TabPanel which will allow you to change the\ncurrent active tab. You can either give it an index or an instance of a tab. For example:</p>\n\n<pre class='inline-example '><code>var tabs = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.tab.Panel\" rel=\"Ext.tab.Panel\" class=\"docClass\">Ext.tab.Panel</a>', {\n    items: [\n        {\n            id   : 'my-tab',\n            title: 'Tab 1',\n            html : 'A simple tab'\n        },\n        {\n            title: 'Tab 2',\n            html : 'Another one'\n        }\n    ],\n    renderTo : <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n\nvar tab = <a href=\"#!/api/Ext-method-getCmp\" rel=\"Ext-method-getCmp\" class=\"docClass\">Ext.getCmp</a>('my-tab');\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>', {\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    text    : 'Select the first tab',\n    scope   : this,\n    handler : function() {\n        tabs.setActiveTab(tab);\n    }\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>', {\n    text    : 'Select the second tab',\n    scope   : this,\n    handler : function() {\n        tabs.setActiveTab(1);\n    },\n    renderTo : <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n\n<p>The <a href=\"#!/api/Ext.tab.Panel-method-getActiveTab\" rel=\"Ext.tab.Panel-method-getActiveTab\" class=\"docClass\">getActiveTab</a> is a another useful method in TabPanel which will return the current active tab.</p>\n\n<pre class='inline-example '><code>var tabs = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.tab.Panel\" rel=\"Ext.tab.Panel\" class=\"docClass\">Ext.tab.Panel</a>', {\n    items: [\n        {\n            title: 'Tab 1',\n            html : 'A simple tab'\n        },\n        {\n            title: 'Tab 2',\n            html : 'Another one'\n        }\n    ],\n    renderTo : <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>', {\n    text    : 'Get active tab',\n    scope   : this,\n    handler : function() {\n        var tab = tabs.getActiveTab();\n        alert('Current tab: ' + tab.title);\n    },\n    renderTo : <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n\n<p>Adding a new tab is very simple with a TabPanel. You simple call the <a href=\"#!/api/Ext.tab.Panel-method-add\" rel=\"Ext.tab.Panel-method-add\" class=\"docClass\">add</a> method with an config\nobject for a panel.</p>\n\n<pre class='inline-example '><code>var tabs = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.tab.Panel\" rel=\"Ext.tab.Panel\" class=\"docClass\">Ext.tab.Panel</a>', {\n    items: [\n        {\n            title: 'Tab 1',\n            html : 'A simple tab'\n        },\n        {\n            title: 'Tab 2',\n            html : 'Another one'\n        }\n    ],\n    renderTo : <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>', {\n    text    : 'New tab',\n    scope   : this,\n    handler : function() {\n        var tab = tabs.add({\n            // we use the tabs.items property to get the length of current items/tabs\n            title: 'Tab ' + (tabs.items.length + 1),\n            html : 'Another one'\n        });\n\n        tabs.setActiveTab(tab);\n    },\n    renderTo : <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n\n<p>Additionally, removing a tab is very also simple with a TabPanel. You simple call the <a href=\"#!/api/Ext.tab.Panel-method-remove\" rel=\"Ext.tab.Panel-method-remove\" class=\"docClass\">remove</a> method\nwith an config object for a panel.</p>\n\n<pre class='inline-example '><code>var tabs = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.tab.Panel\" rel=\"Ext.tab.Panel\" class=\"docClass\">Ext.tab.Panel</a>', {\n    items: [\n        {\n            title: 'Tab 1',\n            html : 'A simple tab'\n        },\n        {\n            id   : 'remove-this-tab',\n            title: 'Tab 2',\n            html : 'Another one'\n        }\n    ],\n    renderTo : <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>', {\n    text    : 'Remove tab',\n    scope   : this,\n    handler : function() {\n        var tab = <a href=\"#!/api/Ext-method-getCmp\" rel=\"Ext-method-getCmp\" class=\"docClass\">Ext.getCmp</a>('remove-this-tab');\n        tabs.remove(tab);\n    },\n    renderTo : <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_tab_Panel_cfg)","prototype":{"!proto":"Ext.panel.Panel.prototype","activeItem":{"!type":"string|number","!doc":"<p>Doesn't apply for <a href=\"#!/api/Ext.tab.Panel\" rel=\"Ext.tab.Panel\" class=\"docClass\">TabPanel</a>, use <a href=\"#!/api/Ext.tab.Panel-cfg-activeTab\" rel=\"Ext.tab.Panel-cfg-activeTab\" class=\"docClass\">activeTab</a> instead.</p>\n"},"activeTab":{"!type":"string|number|+Ext.Component","!doc":"<p>The tab to activate initially. Either an ID, index or the tab component itself.</p>\n"},"deferredRender":{"!type":"bool","!doc":"<p>True by default to defer the rendering of child <a href=\"#!/api/Ext.container.Container-cfg-items\" rel=\"Ext.container.Container-cfg-items\" class=\"docClass\">items</a> to the browsers DOM\nuntil a tab is activated. False will render all contained <a href=\"#!/api/Ext.container.Container-cfg-items\" rel=\"Ext.container.Container-cfg-items\" class=\"docClass\">items</a> as soon as\nthe <a href=\"#!/api/Ext.layout.container.Card\" rel=\"Ext.layout.container.Card\" class=\"docClass\">layout</a> is rendered. If there is a significant amount of content or a lot of\nheavy controls being rendered into panels that are not displayed by default, setting this to true might improve\nperformance.</p>\n\n<p>The deferredRender property is internally passed to the layout manager for TabPanels (<a href=\"#!/api/Ext.layout.container.Card\" rel=\"Ext.layout.container.Card\" class=\"docClass\">Ext.layout.container.Card</a>) as its <a href=\"#!/api/Ext.layout.container.Card-cfg-deferredRender\" rel=\"Ext.layout.container.Card-cfg-deferredRender\" class=\"docClass\">Ext.layout.container.Card.deferredRender</a> configuration value.</p>\n\n<p><strong>Note</strong>: leaving deferredRender as true means that the content within an unactivated tab will not be available</p>\n"},"itemCls":{"!type":"string","!doc":"<p>The class added to each child item of this TabPanel.</p>\n"},"layout":{"!type":"+Ext.enums.Layout|?","!doc":"<p>Optional configuration object for the internal <a href=\"#!/api/Ext.layout.container.Card\" rel=\"Ext.layout.container.Card\" class=\"docClass\">card layout</a>.\nIf present, this is passed straight through to the layout's constructor</p>\n"},"maxTabWidth":{"!type":"number","!doc":"<p>The maximum width for each tab.</p>\n"},"minTabWidth":{"!type":"number","!doc":"<p>The minimum width for a tab in the <a href=\"#!/api/Ext.tab.Panel-cfg-tabBar\" rel=\"Ext.tab.Panel-cfg-tabBar\" class=\"docClass\">tabBar</a>.</p>\n"},"plain":{"!type":"bool","!doc":"<p>True to not show the full background on the TabBar.</p>\n"},"removePanelHeader":{"!type":"bool","!doc":"<p>True to instruct each Panel added to the TabContainer to not render its header element.\nThis is to ensure that the title of the panel does not appear twice.</p>\n"},"tabBar":{"!type":"+Ext.tab.Bar","!doc":"<p>Internal reference to the docked TabBar</p>\n"},"tabPosition":{"!type":"string|string|string|string","!doc":"<p>The position where the tab strip should be rendered. Can be <code>top</code>, <code>bottom</code>,\n<code>left</code> or <code>right</code></p>\n"},"doRemove":{"!type":"fn(item: ?, autoDestroy: ?) -> !this","!doc":"<p>Unlink the removed child item from its (@link <a href=\"#!/api/Ext.tab.Tab\" rel=\"Ext.tab.Tab\" class=\"docClass\">Ext.tab.Tab</a> Tab}.</p>\n\n<p>If we're removing the currently active tab, activate the nearest one. The item is removed when we call super,\nso we can do preprocessing before then to find the card's index</p>\n"},"getActiveTab":{"!type":"fn() -> +Ext.Component","!doc":"<p>Returns the item that is currently active inside this TabPanel.</p>\n"},"getTabBar":{"!type":"fn() -> +Ext.tab.Bar","!doc":"<p>Returns the <a href=\"#!/api/Ext.tab.Bar\" rel=\"Ext.tab.Bar\" class=\"docClass\">Ext.tab.Bar</a> currently used in this TabPanel</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>inherit docs</p>\n"},"onAdd":{"!type":"fn(item: ?, index: ?) -> !this","!doc":"<p>Makes sure we have a Tab for each item added to the TabPanel</p>\n"},"onItemBeforeShow":{"!type":"fn(item: ?) -> !this","!doc":"<p>Sets activeTab before item is shown.</p>\n"},"onItemDisable":{"!type":"fn(item: ?) -> !this","!doc":"<p>Disable corresponding tab when item is enabled.</p>\n"},"onItemEnable":{"!type":"fn(item: ?) -> !this","!doc":"<p>Enable corresponding tab when item is enabled.</p>\n"},"onItemIconChange":{"!type":"fn(item: ?, newIcon: ?) -> !this","!doc":"<p>Update the tab icon when panel icon has been set or changed.</p>\n"},"onItemIconClsChange":{"!type":"fn(item: ?, newIconCls: ?) -> !this","!doc":"<p>Update the tab iconCls when panel iconCls has been set or changed.</p>\n"},"onItemTitleChange":{"!type":"fn(item: ?, newTitle: ?) -> !this","!doc":"<p>Update the tab title when panel title has been set or changed.</p>\n"},"onRemove":{"!type":"fn(item: ?, destroying: ?) -> !this","!doc":"<p>Makes sure we remove the corresponding Tab when an item is removed</p>\n"},"setActiveTab":{"!type":"fn(card: string|number|+Ext.Component) -> +Ext.Component","!doc":"<p>Makes the given card active. Makes it the visible card in the TabPanel's CardLayout and highlights the Tab.</p>\n"},"beforetabchange":{"!type":"fn(tabPanel: +Ext.tab.Panel, newCard: +Ext.Component, oldCard: +Ext.Component, eOpts: ?)","!doc":"<p>Fires before a tab change (activated by <a href=\"#!/api/Ext.tab.Panel-method-setActiveTab\" rel=\"Ext.tab.Panel-method-setActiveTab\" class=\"docClass\">setActiveTab</a>). Return false in any listener to cancel\nthe tabchange</p>\n"},"tabchange":{"!type":"fn(tabPanel: +Ext.tab.Panel, newCard: +Ext.Component, oldCard: +Ext.Component, eOpts: ?)","!doc":"<p>Fires when a new tab has been activated (activated by <a href=\"#!/api/Ext.tab.Panel-method-setActiveTab\" rel=\"Ext.tab.Panel-method-setActiveTab\" class=\"docClass\">setActiveTab</a>).</p>\n"}}},"Tab":{"!doc":"<p>Represents a single Tab in a <a href=\"#!/api/Ext.tab.Panel\" rel=\"Ext.tab.Panel\" class=\"docClass\">TabPanel</a>. A Tab is simply a slightly customized <a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Button</a>,\nstyled to look like a tab. Tabs are optionally closable, and can also be disabled. 99% of the time you will not\nneed to create Tabs manually as the framework does so automatically when you use a <a href=\"#!/api/Ext.tab.Panel\" rel=\"Ext.tab.Panel\" class=\"docClass\">TabPanel</a></p>\n","!type":"fn(config: +Ext.Element|string|Ext_tab_Tab_cfg)","prototype":{"!proto":"Ext.button.Button.prototype","activeCls":{"!type":"string","!doc":"<p>The CSS class to be applied to a Tab when it is active.\nProviding your own CSS for this class enables you to customize the active state.</p>\n"},"baseCls":{"!type":"string","!doc":"<p>The base CSS class to add to all buttons.</p>\n"},"closable":{"!type":"bool","!doc":"<p>True if the tab is currently closable</p>\n"},"closableCls":{"!type":"string","!doc":"<p>The CSS class which is added to the tab when it is closable</p>\n"},"closeText":{"!type":"string","!doc":"<p>The accessible text label for the close button link; only used when <a href=\"#!/api/Ext.tab.Tab-cfg-closable\" rel=\"Ext.tab.Tab-cfg-closable\" class=\"docClass\">closable</a> = true.</p>\n"},"disabledCls":{"!type":"string","!doc":"<p>The CSS class to be applied to a Tab when it is disabled.</p>\n"},"scale":{"!type":"string|string|string","!doc":"<p>The size of the Button. Three values are allowed:</p>\n\n<ul>\n<li>'small' - Results in the button element being 16px high.</li>\n<li>'medium' - Results in the button element being 24px high.</li>\n<li>'large' - Results in the button element being 32px high.</li>\n</ul>\n\n"},"active":{"!type":"bool","!doc":"<p>Indicates that this tab is currently active. This is NOT a public configuration.</p>\n"},"closeElOverCls":{"!type":"string"},"isTab":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated Tab, or subclass thereof.</p>\n"},"position":{"!type":"string"},"activate":{"!type":"fn(this: +Ext.tab.Tab, eOpts: ?)","!doc":"<p>Fired when the tab is activated.</p>\n"},"beforeRender":{"!type":"fn() -> !this"},"deactivate":{"!type":"fn(this: +Ext.tab.Tab, eOpts: ?)","!doc":"<p>Fired when the tab is deactivated.</p>\n"},"disable":{"!type":"fn(silent: ?) -> !this","!doc":"<p>inherit docs</p>\n"},"enable":{"!type":"fn(silent: ?) -> !this","!doc":"<p>inherit docs</p>\n"},"fireClose":{"!type":"fn() -> !this","!doc":"<p>Fires the close event on the tab.</p>\n"},"getFramingInfoCls":{"!type":"fn() -> !this"},"getTemplateArgs":{"!type":"fn() -> ?","!doc":"<p>This method returns an object which provides substitution parameters for the <a href=\"#!/api/Ext.tab.Tab-cfg-renderTpl\" rel=\"Ext.tab.Tab-cfg-renderTpl\" class=\"docClass\">XTemplate</a> used to\ncreate this Button's DOM structure.</p>\n\n<p>Instances or subclasses which use a different Template to create a different DOM structure may need to provide\ntheir own implementation of this method.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>inherit docs</p>\n"},"onCloseClick":{"!type":"fn() -> !this","!doc":"<p>Listener attached to click events on the Tab's close button</p>\n"},"onDeleteKey":{"!type":"fn(e: ?) -> !this"},"onDestroy":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the destroy operation.\nAfter calling the superclass's onDestroy, the Component will be destroyed.</p>\n"},"onEnterKey":{"!type":"fn(e: ?) -> !this"},"onRender":{"!type":"fn() -> !this","!doc":"<p>Template method called when this Component's DOM structure is created.</p>\n\n<p>At this point, this Component's (and all descendants') DOM structure <em>exists</em> but it has not\nbeen layed out (positioned and sized).</p>\n\n<p>Subclasses which override this to gain access to the structure at render time should\ncall the parent class's method before attempting to access any child elements of the Component.</p>\n"},"setCard":{"!type":"fn(card: +Ext.Component) -> !this","!doc":"<p>Sets this tab's attached card. Usually this is handled automatically by the <a href=\"#!/api/Ext.tab.Panel\" rel=\"Ext.tab.Panel\" class=\"docClass\">Ext.tab.Panel</a> that this Tab\nbelongs to and would not need to be done by the developer</p>\n"},"setClosable":{"!type":"fn(closable: bool) -> !this","!doc":"<p>Sets the tab as either closable or not.</p>\n"},"setElOrientation":{"!type":"fn() -> !this"},"syncClosableElements":{"!type":"fn() -> !this","!doc":"<p>This method ensures that the closeBtn element exists or not based on 'closable'.</p>\n"},"syncClosableUI":{"!type":"fn() -> !this","!doc":"<p>This method ensures that the UI classes are added or removed based on 'closable'.</p>\n"},"beforeclose":{"!type":"fn(tab: +Ext.tab.Tab, eOpts: ?)","!doc":"<p>Fires if the user clicks on the Tab's close button, but before the <a href=\"#!/api/Ext.tab.Tab-event-close\" rel=\"Ext.tab.Tab-event-close\" class=\"docClass\">close</a> event is fired. Return\nfalse from any listener to stop the close event being fired</p>\n"},"close":{"!type":"fn(tab: +Ext.tab.Tab, eOpts: ?)","!doc":"<p>Fires to indicate that the tab is to be closed, usually because the user has clicked the close button.</p>\n"}}}},"tip":{"QuickTip":{"!doc":"<p>A specialized tooltip class for tooltips that can be specified in markup and automatically managed\nby the global <a href=\"#!/api/Ext.tip.QuickTipManager\" rel=\"Ext.tip.QuickTipManager\" class=\"docClass\">Ext.tip.QuickTipManager</a> instance.  See the QuickTipManager documentation for\nadditional usage details and examples.</p>\n","!type":"fn(config: +Ext.Element|string|Ext_tip_QuickTip_cfg)","prototype":{"!proto":"Ext.tip.ToolTip.prototype","interceptTitles":{"!type":"bool","!doc":"<p><code>true</code> to automatically use the element's DOM title value if available.</p>\n"},"target":{"!type":"string|+HTMLElement|+Ext.Element","!doc":"<p>The target HTMLElement, <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a> or id to associate with this Quicktip.</p>\n\n<p>Defaults to the document.</p>\n"},"title":{"!type":"string","!doc":"<p>Force creation of header Component</p>\n"},"tagConfig":{"!type":"?"},"cancelShow":{"!type":"fn(el: string|+HTMLElement|+Ext.Element) -> !this","!doc":"<p>Hides a visible tip or cancels an impending show for a particular element.</p>\n"},"getTipCfg":{"!type":"fn(e: ?) -> !this","!doc":"<p>Reads the tip text from the closest node to the event target which contains the\nattribute we are configured to look for. Returns an object containing the text\nfrom the attribute, and the target element from which the text was read.</p>\n"},"hide":{"!type":"fn() -> !this","!doc":"<p>Hides this tooltip if visible.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>The initComponent template method is an important initialization step for a Component. It is intended to be\nimplemented by each subclass of <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> to provide any needed constructor logic. The\ninitComponent method of the class being created is called first, with each initComponent method\nup the hierarchy to <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> being called thereafter. This makes it easy to implement and,\nif needed, override the constructor logic of the Component at any step in the hierarchy.</p>\n\n<p>The initComponent method <strong>must</strong> contain a call to <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a> in order\nto ensure that the parent class' initComponent method is also called.</p>\n\n<p>All config options passed to the constructor are applied to <code>this</code> before initComponent is called,\nso you can simply access them with <code>this.someOption</code>.</p>\n\n<p>The following example demonstrates using a dynamic string for the text of a button at the time of\ninstantiation of the class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('DynamicButtonText', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n\n    initComponent: function() {\n        this.text = new Date();\n        this.renderTo = <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>();\n        this.callParent();\n    }\n});\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function() {\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('DynamicButtonText');\n});\n</code></pre>\n"},"onTargetOut":{"!type":"fn(e: ?) -> !this"},"onTargetOver":{"!type":"fn(e: ?) -> !this"},"register":{"!type":"fn(config: ?) -> !this","!doc":"<p>Configures a new quick tip instance and assigns it to a target element.</p>\n\n<p>For example usage, see the <a href=\"#!/api/Ext.tip.QuickTipManager\" rel=\"Ext.tip.QuickTipManager\" class=\"docClass\">Ext.tip.QuickTipManager</a> class header.</p>\n"},"show":{"!type":"fn() -> !this","!doc":"<p>Shows this tooltip at the current event target XY position.</p>\n"},"showAt":{"!type":"fn(xy: ?) -> !this","!doc":"<p>Shows this tip at the specified XY position.  Example usage:</p>\n\n<pre><code>// Show the tip at x:50 and y:100\ntip.showAt([50,100]);\n</code></pre>\n"},"targetTextEmpty":{"!type":"fn() -> !this"},"unregister":{"!type":"fn(el: string|+HTMLElement|+Ext.Element) -> !this","!doc":"<p>Removes this quick tip from its element and destroys it.</p>\n"}}},"QuickTipManager":{"!doc":"<p>Provides attractive and customizable tooltips for any element. The QuickTips\nsingleton is used to configure and manage tooltips globally for multiple elements\nin a generic manner.  To create individual tooltips with maximum customizability,\nyou should consider either <a href=\"#!/api/Ext.tip.Tip\" rel=\"Ext.tip.Tip\" class=\"docClass\">Ext.tip.Tip</a> or <a href=\"#!/api/Ext.tip.ToolTip\" rel=\"Ext.tip.ToolTip\" class=\"docClass\">Ext.tip.ToolTip</a>.</p>\n\n<p>Quicktips can be configured via tag attributes directly in markup, or by\nregistering quick tips programmatically via the <a href=\"#!/api/Ext.tip.QuickTipManager-method-register\" rel=\"Ext.tip.QuickTipManager-method-register\" class=\"docClass\">register</a> method.</p>\n\n<p>The singleton's instance of <a href=\"#!/api/Ext.tip.QuickTip\" rel=\"Ext.tip.QuickTip\" class=\"docClass\">Ext.tip.QuickTip</a> is available via\n<a href=\"#!/api/Ext.tip.QuickTipManager-method-getQuickTip\" rel=\"Ext.tip.QuickTipManager-method-getQuickTip\" class=\"docClass\">getQuickTip</a>, and supports all the methods, and all the all the\nconfiguration properties of <a href=\"#!/api/Ext.tip.QuickTip\" rel=\"Ext.tip.QuickTip\" class=\"docClass\">Ext.tip.QuickTip</a>. These settings will apply to all\ntooltips shown by the singleton.</p>\n\n<p>Below is the summary of the configuration properties which can be used.\nFor detailed descriptions see the config options for the\n<a href=\"#!/api/Ext.tip.QuickTip\" rel=\"Ext.tip.QuickTip\" class=\"docClass\">QuickTip</a> class</p>\n\n<h2>QuickTips singleton configs (all are optional)</h2>\n\n<ul>\n<li><code>dismissDelay</code></li>\n<li><code>hideDelay</code></li>\n<li><code>maxWidth</code></li>\n<li><code>minWidth</code></li>\n<li><code>showDelay</code></li>\n<li><code>trackMouse</code></li>\n</ul>\n\n\n<h2>Target element configs (optional unless otherwise noted)</h2>\n\n<ul>\n<li><code>autoHide</code></li>\n<li><code>cls</code></li>\n<li><code>dismissDelay</code> (overrides singleton value)</li>\n<li><code>target</code> (required)</li>\n<li><code>text</code> (required)</li>\n<li><code>title</code></li>\n<li><code>width</code></li>\n</ul>\n\n\n<p>Here is an example showing how some of these config options could be used:</p>\n\n<pre class='inline-example '><code>// Init the singleton.  Any tag-based quick tips will start working.\n<a href=\"#!/api/Ext.tip.QuickTipManager-method-init\" rel=\"Ext.tip.QuickTipManager-method-init\" class=\"docClass\">Ext.tip.QuickTipManager.init</a>();\n\n// Apply a set of config properties to the singleton\n<a href=\"#!/api/Ext-method-apply\" rel=\"Ext-method-apply\" class=\"docClass\">Ext.apply</a>(<a href=\"#!/api/Ext.tip.QuickTipManager-method-getQuickTip\" rel=\"Ext.tip.QuickTipManager-method-getQuickTip\" class=\"docClass\">Ext.tip.QuickTipManager.getQuickTip</a>(), {\n    maxWidth: 200,\n    minWidth: 100,\n    showDelay: 50      // Show 50ms after entering target\n});\n\n// Create a small panel to add a quick tip to\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>', {\n    id: 'quickTipContainer',\n    width: 200,\n    height: 150,\n    style: {\n        backgroundColor:'#000000'\n    },\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n\n\n// Manually register a quick tip for a specific element\n<a href=\"#!/api/Ext.tip.QuickTipManager-method-register\" rel=\"Ext.tip.QuickTipManager-method-register\" class=\"docClass\">Ext.tip.QuickTipManager.register</a>({\n    target: 'quickTipContainer',\n    title: 'My Tooltip',\n    text: 'This tooltip was added in code',\n    width: 100,\n    dismissDelay: 10000 // Hide after 10 seconds hover\n});\n</code></pre>\n\n<p>To register a quick tip in markup, you simply add one or more of the valid QuickTip\nattributes prefixed with the <strong>data-</strong> namespace.  The HTML element itself is\nautomatically set as the quick tip target. Here is the summary of supported attributes\n(optional unless otherwise noted):</p>\n\n<ul>\n<li><code>hide</code>: Specifying \"user\" is equivalent to setting autoHide = false.\n Any other value will be the same as autoHide = true.</li>\n<li><code>qclass</code>: A CSS class to be applied to the quick tip\n (equivalent to the 'cls' target element config).</li>\n<li><code>qtip (required)</code>: The quick tip text (equivalent to the 'text' target element config).</li>\n<li><code>qtitle</code>: The quick tip title (equivalent to the 'title' target element config).</li>\n<li><code>qwidth</code>: The quick tip width (equivalent to the 'width' target element config).</li>\n</ul>\n\n\n<p>Here is an example of configuring an HTML element to display a tooltip from markup:</p>\n\n<pre><code>// Add a quick tip to an HTML button\n&lt;input type=\"button\" value=\"OK\" data-qtitle=\"OK Button\" data-qwidth=\"100\"\n     data-qtip=\"This is a quick tip from markup!\"&gt;&lt;/input&gt;\n</code></pre>\n","disabled":{"!type":"bool"},"ddDisable":{"!type":"fn() -> !this","!doc":"<p>Protected method called by the dd classes</p>\n"},"ddEnable":{"!type":"fn() -> !this","!doc":"<p>Protected method called by the dd classes</p>\n"},"destroy":{"!type":"fn() -> !this","!doc":"<p>Destroys the QuickTips instance.</p>\n"},"disable":{"!type":"fn() -> !this","!doc":"<p>Disables quick tips globally.</p>\n"},"enable":{"!type":"fn() -> !this","!doc":"<p>Enables quick tips globally.</p>\n"},"getQuickTip":{"!type":"fn() -> +Ext.tip.QuickTip","!doc":"<p>Gets the single <a href=\"#!/api/Ext.tip.QuickTip\" rel=\"Ext.tip.QuickTip\" class=\"docClass\">QuickTip</a> instance used to show tips\nfrom all registered elements.</p>\n"},"init":{"!type":"fn(autoRender?: bool, config?: ?) -> !this","!doc":"<p>Initializes the global QuickTips instance and prepare any quick tips.</p>\n"},"isEnabled":{"!type":"fn() -> bool","!doc":"<p>Returns true if quick tips are enabled, else false.</p>\n"},"register":{"!type":"fn(config: ?) -> !this","!doc":"<p>Configures a new quick tip instance and assigns it to a target element.  See\n<a href=\"#!/api/Ext.tip.QuickTip-method-register\" rel=\"Ext.tip.QuickTip-method-register\" class=\"docClass\">Ext.tip.QuickTip.register</a> for details.</p>\n"},"tips":{"!type":"fn(config: ?) -> !this","!doc":"<p>Alias of <a href=\"#!/api/Ext.tip.QuickTipManager-method-register\" rel=\"Ext.tip.QuickTipManager-method-register\" class=\"docClass\">register</a>.</p>\n"},"unregister":{"!type":"fn(el: string|+HTMLElement|+Ext.Element) -> !this","!doc":"<p>Removes any registered quick tip from the target element and destroys it.</p>\n"}},"Tip":{"!doc":"<p>This is the base class for <a href=\"#!/api/Ext.tip.QuickTip\" rel=\"Ext.tip.QuickTip\" class=\"docClass\">Ext.tip.QuickTip</a> and <a href=\"#!/api/Ext.tip.ToolTip\" rel=\"Ext.tip.ToolTip\" class=\"docClass\">Ext.tip.ToolTip</a> that provides the basic layout and\npositioning that all tip-based classes require. This class can be used directly for simple, statically-positioned\ntips that are displayed programmatically, or it can be extended to provide custom tip implementations.</p>\n","!type":"fn(config: +Ext.Element|string|Ext_tip_Tip_cfg)","prototype":{"!proto":"Ext.panel.Panel.prototype","autoRender":{"!type":"bool|string|+HTMLElement|+Ext.Element","!doc":"<p>private panel overrides</p>\n"},"baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this panel's element.</p>\n"},"closable":{"!type":"bool","!doc":"<p>True to render a close tool button into the tooltip header.</p>\n"},"closeAction":{"!type":"string","!doc":"<p>The action to take when the close header tool is clicked:</p>\n\n<ul>\n<li><p><strong><a href=\"#!/api/Ext.tip.Tip-method-destroy\" rel=\"Ext.tip.Tip-method-destroy\" class=\"docClass\">destroy</a></strong> : <a href=\"#!/api/Ext.tip.Tip-method-remove\" rel=\"Ext.tip.Tip-method-remove\" class=\"docClass\">remove</a> the window from the DOM and\n<a href=\"#!/api/Ext.Component-method-destroy\" rel=\"Ext.Component-method-destroy\" class=\"docClass\">destroy</a> it and all descendant Components. The\nwindow will <strong>not</strong> be available to be redisplayed via the <a href=\"#!/api/Ext.tip.Tip-method-show\" rel=\"Ext.tip.Tip-method-show\" class=\"docClass\">show</a> method.</p></li>\n<li><p><strong><a href=\"#!/api/Ext.tip.Tip-method-hide\" rel=\"Ext.tip.Tip-method-hide\" class=\"docClass\">hide</a></strong> : <strong>Default.</strong> <a href=\"#!/api/Ext.tip.Tip-method-hide\" rel=\"Ext.tip.Tip-method-hide\" class=\"docClass\">hide</a> the window by setting visibility\nto hidden and applying negative offsets. The window will be available to be\nredisplayed via the <a href=\"#!/api/Ext.tip.Tip-method-show\" rel=\"Ext.tip.Tip-method-show\" class=\"docClass\">show</a> method.</p></li>\n</ul>\n\n\n<p><strong>Note:</strong> This behavior has changed! setting <em>does</em> affect the <a href=\"#!/api/Ext.tip.Tip-method-close\" rel=\"Ext.tip.Tip-method-close\" class=\"docClass\">close</a> method\nwhich will invoke the approriate closeAction.</p>\n"},"constrainPosition":{"!type":"bool","!doc":"<p>If <code>true</code>, then the tooltip will be automatically constrained to stay within\nthe browser viewport.</p>\n"},"defaultAlign":{"!type":"string","!doc":"<p><strong>Experimental</strong>. The default <a href=\"#!/api/Ext.util.Positionable-method-alignTo\" rel=\"Ext.util.Positionable-method-alignTo\" class=\"docClass\">Ext.util.Positionable.alignTo</a> anchor position value\nfor this tip relative to its element of origin.</p>\n"},"floating":{"!type":"bool","!doc":"<p>Specify as true to float the Component outside of the document flow using CSS absolute positioning.</p>\n\n<p>Components such as <a href=\"#!/api/Ext.window.Window\" rel=\"Ext.window.Window\" class=\"docClass\">Window</a>s and <a href=\"#!/api/Ext.menu.Menu\" rel=\"Ext.menu.Menu\" class=\"docClass\">Menu</a>s are floating by default.</p>\n\n<p>Floating Components that are programatically <a href=\"#!/api/Ext.Component-method-render\" rel=\"Ext.Component-method-render\" class=\"docClass\">rendered</a> will register\nthemselves with the global <a href=\"#!/api/Ext.WindowManager\" rel=\"Ext.WindowManager\" class=\"docClass\">ZIndexManager</a></p>\n\n<h3>Floating Components as child items of a Container</h3>\n\n<p>A floating Component may be used as a child item of a Container. This just allows the floating Component to seek\na ZIndexManager by examining the ownerCt chain.</p>\n\n<p>When configured as floating, Components acquire, at render time, a <a href=\"#!/api/Ext.ZIndexManager\" rel=\"Ext.ZIndexManager\" class=\"docClass\">ZIndexManager</a> which\nmanages a stack of related floating Components. The ZIndexManager brings a single floating Component to the top\nof its stack when the Component's <a href=\"#!/api/Ext.tip.Tip-method-toFront\" rel=\"Ext.tip.Tip-method-toFront\" class=\"docClass\">toFront</a> method is called.</p>\n\n<p>The ZIndexManager is found by traversing up the <a href=\"#!/api/Ext.tip.Tip-property-ownerCt\" rel=\"Ext.tip.Tip-property-ownerCt\" class=\"docClass\">ownerCt</a> chain to find an ancestor which itself is\nfloating. This is so that descendant floating Components of floating <em>Containers</em> (Such as a ComboBox dropdown\nwithin a Window) can have its zIndex managed relative to any siblings, but always <strong>above</strong> that floating\nancestor Container.</p>\n\n<p>If no floating ancestor is found, a floating Component registers itself with the default <a href=\"#!/api/Ext.WindowManager\" rel=\"Ext.WindowManager\" class=\"docClass\">ZIndexManager</a>.</p>\n\n<p>Floating components <em>do not participate in the Container's layout</em>. Because of this, they are not rendered until\nyou explicitly <a href=\"#!/api/Ext.tip.Tip-method-show\" rel=\"Ext.tip.Tip-method-show\" class=\"docClass\">show</a> them.</p>\n\n<p>After rendering, the ownerCt reference is deleted, and the <a href=\"#!/api/Ext.tip.Tip-property-floatParent\" rel=\"Ext.tip.Tip-property-floatParent\" class=\"docClass\">floatParent</a> property is set to the found\nfloating ancestor Container. If no floating ancestor Container was found the <a href=\"#!/api/Ext.tip.Tip-property-floatParent\" rel=\"Ext.tip.Tip-property-floatParent\" class=\"docClass\">floatParent</a> property will\nnot be set.</p>\n"},"focusOnToFront":{"!type":"bool","!doc":"<p>Specifies whether the floated component should be automatically <a href=\"#!/api/Ext.Component-method-focus\" rel=\"Ext.Component-method-focus\" class=\"docClass\">focused</a> when\nit is <a href=\"#!/api/Ext.tip.Tip-method-toFront\" rel=\"Ext.tip.Tip-method-toFront\" class=\"docClass\">brought to the front</a>.</p>\n"},"frameHeader":{"!type":"bool","!doc":"<p>True to apply a frame to the panel panels header (if 'frame' is true).</p>\n"},"hidden":{"!type":"bool","!doc":"<p><code>true</code> to hide the component.</p>\n"},"maxWidth":{"!type":"number","!doc":"<p>The maximum width of the tip in pixels.  The maximum supported value is 500.</p>\n"},"minWidth":{"!type":"number","!doc":"<p>The minimum width of the tip in pixels.</p>\n"},"shadow":{"!type":"bool|string","!doc":"<p><code>true</code> or \"sides\" for the default effect, \"frame\" for 4-way shadow, and \"drop\"\nfor bottom-right shadow.</p>\n"},"width":{"!type":"number","!doc":"<p>Width in pixels of the tip.  Width will be ignored if it\nexceeds the bounds of <a href=\"#!/api/Ext.tip.Tip-cfg-minWidth\" rel=\"Ext.tip.Tip-cfg-minWidth\" class=\"docClass\">minWidth</a> or <a href=\"#!/api/Ext.tip.Tip-cfg-maxWidth\" rel=\"Ext.tip.Tip-cfg-maxWidth\" class=\"docClass\">maxWidth</a>.</p>\n"},"alwaysFramed":{"!type":"bool","!doc":"<p>Flag to Renderable to always look up the framing styles for this Component</p>\n"},"ariaRole":{"!type":"string"},"ghost":{"!type":"?","!doc":"<p>Tip does not ghost. Drag is \"live\"</p>\n"},"unghost":{"!type":"?"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>The initComponent template method is an important initialization step for a Component. It is intended to be\nimplemented by each subclass of <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> to provide any needed constructor logic. The\ninitComponent method of the class being created is called first, with each initComponent method\nup the hierarchy to <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> being called thereafter. This makes it easy to implement and,\nif needed, override the constructor logic of the Component at any step in the hierarchy.</p>\n\n<p>The initComponent method <strong>must</strong> contain a call to <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a> in order\nto ensure that the parent class' initComponent method is also called.</p>\n\n<p>All config options passed to the constructor are applied to <code>this</code> before initComponent is called,\nso you can simply access them with <code>this.someOption</code>.</p>\n\n<p>The following example demonstrates using a dynamic string for the text of a button at the time of\ninstantiation of the class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('DynamicButtonText', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n\n    initComponent: function() {\n        this.text = new Date();\n        this.renderTo = <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>();\n        this.callParent();\n    }\n});\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function() {\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('DynamicButtonText');\n});\n</code></pre>\n"},"initDraggable":{"!type":"fn() -> !this","!doc":"<p>Set Tip draggable using base Component's draggability.</p>\n"},"showAt":{"!type":"fn(xy: [number]) -> !this","!doc":"<p>Shows this tip at the specified XY position.  Example usage:</p>\n\n<pre><code>// Show the tip at x:50 and y:100\ntip.showAt([50,100]);\n</code></pre>\n"}}},"ToolTip":{"!doc":"<p>ToolTip is a <a href=\"#!/api/Ext.tip.Tip\" rel=\"Ext.tip.Tip\" class=\"docClass\">Ext.tip.Tip</a> implementation that handles the common case of displaying a\ntooltip when hovering over a certain element or elements on the page. It allows fine-grained\ncontrol over the tooltip's alignment relative to the target element or mouse, and the timing\nof when it is automatically shown and hidden.</p>\n\n<p>This implementation does <strong>not</strong> have a built-in method of automatically populating the tooltip's\ntext based on the target element; you must either configure a fixed <a href=\"#!/api/Ext.tip.ToolTip-cfg-html\" rel=\"Ext.tip.ToolTip-cfg-html\" class=\"docClass\">html</a> value for each\nToolTip instance, or implement custom logic (e.g. in a <a href=\"#!/api/Ext.tip.ToolTip-event-beforeshow\" rel=\"Ext.tip.ToolTip-event-beforeshow\" class=\"docClass\">beforeshow</a> event listener) to\ngenerate the appropriate tooltip content on the fly. See <a href=\"#!/api/Ext.tip.QuickTip\" rel=\"Ext.tip.QuickTip\" class=\"docClass\">Ext.tip.QuickTip</a> for a more\nconvenient way of automatically populating and configuring a tooltip based on specific DOM\nattributes of each target element.</p>\n\n<h1>Basic Example</h1>\n\n<pre><code>var tip = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.tip.ToolTip\" rel=\"Ext.tip.ToolTip\" class=\"docClass\">Ext.tip.ToolTip</a>', {\n    target: 'clearButton',\n    html: 'Press this button to clear the form'\n});\n</code></pre>\n\n<p><p><img src=\"\" alt=\"Basic Ext.tip.ToolTip\" width=\"\" height=\"\"></p></p>\n\n<h1>Delegation</h1>\n\n<p>In addition to attaching a ToolTip to a single element, you can also use delegation to attach\none ToolTip to many elements under a common parent. This is more efficient than creating many\nToolTip instances. To do this, point the <a href=\"#!/api/Ext.tip.ToolTip-cfg-target\" rel=\"Ext.tip.ToolTip-cfg-target\" class=\"docClass\">target</a> config to a common ancestor of all the\nelements, and then set the <a href=\"#!/api/Ext.tip.ToolTip-cfg-delegate\" rel=\"Ext.tip.ToolTip-cfg-delegate\" class=\"docClass\">delegate</a> config to a CSS selector that will select all the\nappropriate sub-elements.</p>\n\n<p>When using delegation, it is likely that you will want to programmatically change the content\nof the ToolTip based on each delegate element; you can do this by implementing a custom\nlistener for the <a href=\"#!/api/Ext.tip.ToolTip-event-beforeshow\" rel=\"Ext.tip.ToolTip-event-beforeshow\" class=\"docClass\">beforeshow</a> event. Example:</p>\n\n<pre><code>var store = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.ArrayStore\" rel=\"Ext.data.ArrayStore\" class=\"docClass\">Ext.data.ArrayStore</a>', {\n    fields: ['company', 'price', 'change'],\n    data: [\n        ['3m Co',                               71.72, 0.02],\n        ['Alcoa Inc',                           29.01, 0.42],\n        ['Altria Group Inc',                    83.81, 0.28],\n        ['American Express Company',            52.55, 0.01],\n        ['American International Group, Inc.',  64.13, 0.31],\n        ['AT&amp;T Inc.',                           31.61, -0.48]\n    ]\n});\n\nvar grid = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Ext.grid.Panel</a>', {\n    title: 'Array Grid',\n    store: store,\n    columns: [\n        {text: 'Company', flex: 1, dataIndex: 'company'},\n        {text: 'Price', width: 75, dataIndex: 'price'},\n        {text: 'Change', width: 75, dataIndex: 'change'}\n    ],\n    height: 200,\n    width: 400,\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n\nvar view = grid.getView();\nvar tip = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.tip.ToolTip\" rel=\"Ext.tip.ToolTip\" class=\"docClass\">Ext.tip.ToolTip</a>', {\n    // The overall target element.\n    target: view.el,\n    // Each grid row causes its own separate show and hide.\n    delegate: view.itemSelector,\n    // Moving within the row should not hide the tip.\n    trackMouse: true,\n    // Render immediately so that tip.body can be referenced prior to the first show.\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>(),\n    listeners: {\n        // Change content dynamically depending on which element triggered the show.\n        beforeshow: function updateTipBody(tip) {\n            tip.update('Over company \"' + view.getRecord(tip.triggerElement).get('company') + '\"');\n        }\n    }\n});\n</code></pre>\n\n<p><p><img src=\"\" alt=\"Ext.tip.ToolTip with delegation\" width=\"\" height=\"\"></p></p>\n\n<h1>Alignment</h1>\n\n<p>The following configuration properties allow control over how the ToolTip is aligned relative to\nthe target element and/or mouse pointer:</p>\n\n<ul>\n<li><a href=\"#!/api/Ext.tip.ToolTip-cfg-anchor\" rel=\"Ext.tip.ToolTip-cfg-anchor\" class=\"docClass\">anchor</a></li>\n<li><a href=\"#!/api/Ext.tip.ToolTip-cfg-anchorToTarget\" rel=\"Ext.tip.ToolTip-cfg-anchorToTarget\" class=\"docClass\">anchorToTarget</a></li>\n<li><a href=\"#!/api/Ext.tip.ToolTip-cfg-anchorOffset\" rel=\"Ext.tip.ToolTip-cfg-anchorOffset\" class=\"docClass\">anchorOffset</a></li>\n<li><a href=\"#!/api/Ext.tip.ToolTip-cfg-trackMouse\" rel=\"Ext.tip.ToolTip-cfg-trackMouse\" class=\"docClass\">trackMouse</a></li>\n<li><a href=\"#!/api/Ext.tip.ToolTip-cfg-mouseOffset\" rel=\"Ext.tip.ToolTip-cfg-mouseOffset\" class=\"docClass\">mouseOffset</a></li>\n</ul>\n\n\n<h1>Showing/Hiding</h1>\n\n<p>The following configuration properties allow control over how and when the ToolTip is automatically\nshown and hidden:</p>\n\n<ul>\n<li><a href=\"#!/api/Ext.tip.ToolTip-cfg-autoHide\" rel=\"Ext.tip.ToolTip-cfg-autoHide\" class=\"docClass\">autoHide</a></li>\n<li><a href=\"#!/api/Ext.tip.ToolTip-cfg-showDelay\" rel=\"Ext.tip.ToolTip-cfg-showDelay\" class=\"docClass\">showDelay</a></li>\n<li><a href=\"#!/api/Ext.tip.ToolTip-cfg-hideDelay\" rel=\"Ext.tip.ToolTip-cfg-hideDelay\" class=\"docClass\">hideDelay</a></li>\n<li><a href=\"#!/api/Ext.tip.ToolTip-cfg-dismissDelay\" rel=\"Ext.tip.ToolTip-cfg-dismissDelay\" class=\"docClass\">dismissDelay</a></li>\n</ul>\n\n","!type":"fn(config: +Ext.Element|string|Ext_tip_ToolTip_cfg)","prototype":{"!proto":"Ext.tip.Tip.prototype","anchor":{"!type":"string","!doc":"<p>If specified, indicates that the tip should be anchored to a\nparticular side of the target element or mouse pointer (\"top\", \"right\", \"bottom\",\nor \"left\"), with an arrow pointing back at the target or mouse pointer. If\n<a href=\"#!/api/Ext.tip.ToolTip-cfg-constrainPosition\" rel=\"Ext.tip.ToolTip-cfg-constrainPosition\" class=\"docClass\">constrainPosition</a> is enabled, this will be used as a preferred value\nonly and may be flipped as needed.</p>\n"},"anchorOffset":{"!type":"number","!doc":"<p>A numeric pixel value used to offset the default position of the anchor arrow.  When the anchor\nposition is on the top or bottom of the tooltip, <code>anchorOffset</code> will be used as a horizontal offset.\nLikewise, when the anchor position is on the left or right side, <code>anchorOffset</code> will be used as\na vertical offset.</p>\n"},"anchorToTarget":{"!type":"bool","!doc":"<p>True to anchor the tooltip to the target element, false to anchor it relative to the mouse coordinates.\nWhen <code>anchorToTarget</code> is true, use <code><a href=\"#!/api/Ext.tip.ToolTip-cfg-defaultAlign\" rel=\"Ext.tip.ToolTip-cfg-defaultAlign\" class=\"docClass\">defaultAlign</a></code> to control tooltip alignment to the\ntarget element.  When <code>anchorToTarget</code> is false, use <code><a href=\"#!/api/Ext.tip.ToolTip-cfg-anchor\" rel=\"Ext.tip.ToolTip-cfg-anchor\" class=\"docClass\">anchor</a></code> instead to control alignment.</p>\n"},"autoHide":{"!type":"bool","!doc":"<p>True to automatically hide the tooltip after the\nmouse exits the target element or after the <code><a href=\"#!/api/Ext.tip.ToolTip-cfg-dismissDelay\" rel=\"Ext.tip.ToolTip-cfg-dismissDelay\" class=\"docClass\">dismissDelay</a></code>\nhas expired if set.  If <code><a href=\"#!/api/Ext.tip.ToolTip-cfg-closable\" rel=\"Ext.tip.ToolTip-cfg-closable\" class=\"docClass\">closable</a> = true</code>\na close tool button will be rendered into the tooltip header.</p>\n"},"delegate":{"!type":"string","!doc":"<p>A <a href=\"#!/api/Ext.dom.Query\" rel=\"Ext.dom.Query\" class=\"docClass\">DomQuery</a> selector which allows selection of individual elements within the\n<code><a href=\"#!/api/Ext.tip.ToolTip-cfg-target\" rel=\"Ext.tip.ToolTip-cfg-target\" class=\"docClass\">target</a></code> element to trigger showing and hiding the ToolTip as the mouse moves within the\ntarget.</p>\n\n<p>When specified, the child element of the target which caused a show event is placed into the\n<code><a href=\"#!/api/Ext.tip.ToolTip-property-triggerElement\" rel=\"Ext.tip.ToolTip-property-triggerElement\" class=\"docClass\">triggerElement</a></code> property before the ToolTip is shown.</p>\n\n<p>This may be useful when a Component has regular, repeating elements in it, each of which need a\nToolTip which contains information specific to that element.</p>\n\n<p>See the delegate example in class documentation of <a href=\"#!/api/Ext.tip.ToolTip\" rel=\"Ext.tip.ToolTip\" class=\"docClass\">Ext.tip.ToolTip</a>.</p>\n"},"dismissDelay":{"!type":"number","!doc":"<p>Delay in milliseconds before the tooltip automatically hides. To disable automatic hiding, set\ndismissDelay = 0.</p>\n"},"hideDelay":{"!type":"number","!doc":"<p>Delay in milliseconds after the mouse exits the target element but before the tooltip actually hides.\nSet to 0 for the tooltip to hide immediately.</p>\n"},"mouseOffset":{"!type":"[number]","!doc":"<p>An XY offset from the mouse position where the tooltip should be shown.</p>\n"},"showDelay":{"!type":"number","!doc":"<p>Delay in milliseconds before the tooltip displays after the mouse enters the target element.</p>\n"},"target":{"!type":"+HTMLElement|+Ext.Element|string","!doc":"<p>The target element or string id to monitor for mouseover events to trigger\nshowing this ToolTip.</p>\n"},"trackMouse":{"!type":"bool","!doc":"<p>True to have the tooltip follow the mouse as it moves over the target element.</p>\n"},"_timerNames":{"!type":"?"},"quickShowInterval":{"!type":"number"},"targetCounter":{"!type":"number"},"triggerElement":{"!type":"+HTMLElement","!doc":"<p>When a ToolTip is configured with the <code><a href=\"#!/api/Ext.tip.ToolTip-cfg-delegate\" rel=\"Ext.tip.ToolTip-cfg-delegate\" class=\"docClass\">delegate</a></code>\noption to cause selected child elements of the <code><a href=\"#!/api/Ext.tip.ToolTip-cfg-target\" rel=\"Ext.tip.ToolTip-cfg-target\" class=\"docClass\">target</a></code>\nElement to each trigger a separate show event, this property is set to\nthe DOM element which triggered the show.</p>\n"},"beforeDestroy":{"!type":"fn() -> !this","!doc":"<p>Invoked before the Component is destroyed.</p>\n"},"clearTimer":{"!type":"fn(name: ?) -> !this"},"clearTimers":{"!type":"fn() -> !this"},"delayHide":{"!type":"fn() -> !this"},"delayShow":{"!type":"fn() -> !this"},"doEnable":{"!type":"fn() -> !this"},"getAnchorAlign":{"!type":"fn() -> !this"},"getAnchorPosition":{"!type":"fn() -> !this"},"getMouseOffset":{"!type":"fn() -> !this"},"getOffsets":{"!type":"fn() -> !this"},"getTargetXY":{"!type":"fn() -> !this"},"hide":{"!type":"fn() -> !this","!doc":"<p>Hides this tooltip if visible.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>The initComponent template method is an important initialization step for a Component. It is intended to be\nimplemented by each subclass of <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> to provide any needed constructor logic. The\ninitComponent method of the class being created is called first, with each initComponent method\nup the hierarchy to <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> being called thereafter. This makes it easy to implement and,\nif needed, override the constructor logic of the Component at any step in the hierarchy.</p>\n\n<p>The initComponent method <strong>must</strong> contain a call to <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a> in order\nto ensure that the parent class' initComponent method is also called.</p>\n\n<p>All config options passed to the constructor are applied to <code>this</code> before initComponent is called,\nso you can simply access them with <code>this.someOption</code>.</p>\n\n<p>The following example demonstrates using a dynamic string for the text of a button at the time of\ninstantiation of the class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('DynamicButtonText', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n\n    initComponent: function() {\n        this.text = new Date();\n        this.renderTo = <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>();\n        this.callParent();\n    }\n});\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function() {\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('DynamicButtonText');\n});\n</code></pre>\n"},"onDestroy":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the destroy operation.\nAfter calling the superclass's onDestroy, the Component will be destroyed.</p>\n"},"onDisable":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the disable operation.\nAfter calling the superclass's <code>onDisable</code>, the Component will be disabled.</p>\n"},"onDocMouseDown":{"!type":"fn(e: ?) -> !this"},"onHide":{"!type":"fn() -> !this","!doc":"<p>Possibly animates down to a target element.</p>\n\n<p>Allows addition of behavior to the hide operation. After\ncalling the superclass’s onHide, the Component will be hidden.</p>\n\n<p>Gets passed the same parameters as <a href=\"#!/api/Ext.tip.ToolTip-event-hide\" rel=\"Ext.tip.ToolTip-event-hide\" class=\"docClass\">hide</a>.</p>\n"},"onMouseMove":{"!type":"fn(e: ?) -> !this"},"onRender":{"!type":"fn(ct: ?, position: ?) -> !this","!doc":"<p>Template method called when this Component's DOM structure is created.</p>\n\n<p>At this point, this Component's (and all descendants') DOM structure <em>exists</em> but it has not\nbeen layed out (positioned and sized).</p>\n\n<p>Subclasses which override this to gain access to the structure at render time should\ncall the parent class's method before attempting to access any child elements of the Component.</p>\n"},"onShow":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the show operation. After\ncalling the superclass's onShow, the Component will be visible.</p>\n\n<p>Override in subclasses where more complex behaviour is needed.</p>\n\n<p>Gets passed the same parameters as <a href=\"#!/api/Ext.tip.ToolTip-method-show\" rel=\"Ext.tip.ToolTip-method-show\" class=\"docClass\">show</a>.</p>\n"},"onShowVeto":{"!type":"fn() -> !this"},"onTargetOut":{"!type":"fn(e: ?) -> !this"},"onTargetOver":{"!type":"fn(e: ?) -> !this"},"setPagePosition":{"!type":"fn(x: ?, y: ?) -> +Ext.Component","!doc":"<p>Sets the page XY position of the component. To set the left and top instead, use <a href=\"#!/api/Ext.tip.ToolTip-method-setPosition\" rel=\"Ext.tip.ToolTip-method-setPosition\" class=\"docClass\">setPosition</a>.\nThis method fires the <a href=\"#!/api/Ext.tip.ToolTip-event-move\" rel=\"Ext.tip.ToolTip-event-move\" class=\"docClass\">move</a> event.</p>\n"},"setTarget":{"!type":"fn(t: string|+HTMLElement|+Ext.Element) -> !this","!doc":"<p>Binds this ToolTip to the specified element. The tooltip will be displayed when the mouse moves over the element.</p>\n"},"show":{"!type":"fn() -> !this","!doc":"<p>Shows this tooltip at the current event target XY position.</p>\n"},"showAt":{"!type":"fn(xy: ?) -> !this","!doc":"<p>Shows this tip at the specified XY position.  Example usage:</p>\n\n<pre><code>// Show the tip at x:50 and y:100\ntip.showAt([50,100]);\n</code></pre>\n"},"showFromDelay":{"!type":"fn() -> !this"},"syncAnchor":{"!type":"fn() -> !this"}}}},"toolbar":{"Fill":{"!doc":"<p>A non-rendering placeholder item which instructs the Toolbar's Layout to begin using\nthe right-justified button container.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>', {\n     title: 'Toolbar Fill Example',\n     width: 300,\n     height: 200,\n     tbar : [\n         'Item 1',\n         { xtype: 'tbfill' },\n         'Item 2'\n     ],\n     renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n });\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_toolbar_Fill_cfg)","prototype":{"!proto":"Ext.Component.prototype","flex":{"!type":"number"},"isFill":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated Fill, or subclass thereof.</p>\n"}}},"Item":{"!doc":"<p>The base class that other non-interacting Toolbar Item classes should extend in order to\nget some basic common toolbar item functionality.</p>\n","!type":"fn(config: +Ext.Element|string|Ext_toolbar_Item_cfg)","prototype":{"!proto":"Ext.Component.prototype","overflowText":{"!type":"string","!doc":"<p>Text to be used for the menu if the item is overflowed.</p>\n"},"disable":{"!type":"fn() -> !this","!doc":"<p>Disable the component.</p>\n"},"enable":{"!type":"fn() -> !this","!doc":"<p>Enable the component</p>\n"},"focus":{"!type":"fn() -> +Ext.Component","!doc":"<p>Try to focus this component.</p>\n"}}},"Paging":{"!doc":"<p>As the number of records increases, the time required for the browser to render them increases. Paging is used to\nreduce the amount of data exchanged with the client. Note: if there are more records/rows than can be viewed in the\navailable screen area, vertical scrollbars will be added.</p>\n\n<p>Paging is typically handled on the server side (see exception below). The client sends parameters to the server side,\nwhich the server needs to interpret and then respond with the appropriate data.</p>\n\n<p><a href=\"#!/api/Ext.toolbar.Paging\" rel=\"Ext.toolbar.Paging\" class=\"docClass\">Ext.toolbar.Paging</a> is a specialized toolbar that is bound to a <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a> and provides automatic\npaging control. This Component <a href=\"#!/api/Ext.data.Store-method-load\" rel=\"Ext.data.Store-method-load\" class=\"docClass\">load</a>s blocks of data into the <a href=\"#!/api/Ext.toolbar.Paging-cfg-store\" rel=\"Ext.toolbar.Paging-cfg-store\" class=\"docClass\">store</a> by passing\nparameters used for paging criteria.</p>\n\n<p><p><img src=\"\" alt=\"Ext.toolbar.Paging component\" width=\"\" height=\"\"></p></p>\n\n<p>Paging Toolbar is typically used as one of the Grid's toolbars:</p>\n\n<pre class='inline-example '><code>var itemsPerPage = 2;   // set the number of items you want per page\n\nvar store = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    id:'simpsonsStore',\n    autoLoad: false,\n    fields:['name', 'email', 'phone'],\n    pageSize: itemsPerPage, // items per page\n    proxy: {\n        type: 'ajax',\n        url: 'pagingstore.js',  // url that will load data with respect to start and limit params\n        reader: {\n            type: 'json',\n            root: 'items',\n            totalProperty: 'total'\n        }\n    }\n});\n\n// specify segment of data you want to load using params\nstore.load({\n    params:{\n        start:0,\n        limit: itemsPerPage\n    }\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Ext.grid.Panel</a>', {\n    title: 'Simpsons',\n    store: store,\n    columns: [\n        { header: 'Name',  dataIndex: 'name' },\n        { header: 'Email', dataIndex: 'email', flex: 1 },\n        { header: 'Phone', dataIndex: 'phone' }\n    ],\n    width: 400,\n    height: 125,\n    dockedItems: [{\n        xtype: 'pagingtoolbar',\n        store: store,   // same store GridPanel is using\n        dock: 'bottom',\n        displayInfo: true\n    }],\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n\n<p>To use paging, you need to set a pageSize configuration on the Store, and pass the paging requirements to\nthe server when the store is first loaded.</p>\n\n<pre><code>store.load({\n    params: {\n        // specify params for the first page load if using paging\n        start: 0,\n        limit: myPageSize,\n        // other params\n        foo:   'bar'\n    }\n});\n</code></pre>\n\n<p>If using <a href=\"#!/api/Ext.data.Store-cfg-autoLoad\" rel=\"Ext.data.Store-cfg-autoLoad\" class=\"docClass\">store's autoLoad</a> configuration:</p>\n\n<pre><code>var myStore = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    <a href=\"#!/api/Ext.data.Store-cfg-autoLoad\" rel=\"Ext.data.Store-cfg-autoLoad\" class=\"docClass\">autoLoad</a>: {start: 0, limit: 25},\n    ...\n});\n</code></pre>\n\n<p>The packet sent back from the server would have this form:</p>\n\n<pre><code>{\n    \"success\": true,\n    \"results\": 2000,\n    \"rows\": [ // ***Note:** this must be an Array\n        { \"id\":  1, \"name\": \"Bill\", \"occupation\": \"Gardener\" },\n        { \"id\":  2, \"name\":  \"Ben\", \"occupation\": \"Horticulturalist\" },\n        ...\n        { \"id\": 25, \"name\":  \"Sue\", \"occupation\": \"Botanist\" }\n    ]\n}\n</code></pre>\n\n<h2>Paging with Local Data</h2>\n\n<p>Paging can also be accomplished with local data using extensions:</p>\n\n<ul>\n<li><a href=\"http://sencha.com/forum/showthread.php?t=71532\">Ext.ux.data.PagingStore</a></li>\n<li>Paging Memory Proxy (examples/ux/PagingMemoryProxy.js)</li>\n</ul>\n\n","!type":"fn(config: Ext_toolbar_Paging_cfg|[?])","prototype":{"!proto":"Ext.toolbar.Toolbar.prototype","afterPageText":{"!type":"string","!doc":"<p>Customizable piece of the default paging text. Note that this string is formatted using\n{0} as a token that is replaced by the number of total pages. This token should be preserved when overriding this\nstring if showing the total page count is desired.</p>\n"},"beforePageText":{"!type":"string","!doc":"<p>The text displayed before the input item.</p>\n"},"displayInfo":{"!type":"bool","!doc":"<p>true to display the displayMsg</p>\n"},"displayMsg":{"!type":"string","!doc":"<p>The paging status message to display. Note that this string is\nformatted using the braced numbers {0}-{2} as tokens that are replaced by the values for start, end and total\nrespectively. These tokens should be preserved when overriding this string if showing those values is desired.</p>\n"},"emptyMsg":{"!type":"string","!doc":"<p>The message to display when no records are found.</p>\n"},"firstText":{"!type":"string","!doc":"<p>The quicktip text displayed for the first page button.\n<strong>Note</strong>: quick tips must be initialized for the quicktip to show.</p>\n"},"inputItemWidth":{"!type":"number","!doc":"<p>The width in pixels of the input field used to display and change the current page number.</p>\n"},"lastText":{"!type":"string","!doc":"<p>The quicktip text displayed for the last page button.\n<strong>Note</strong>: quick tips must be initialized for the quicktip to show.</p>\n"},"nextText":{"!type":"string","!doc":"<p>The quicktip text displayed for the next page button.\n<strong>Note</strong>: quick tips must be initialized for the quicktip to show.</p>\n"},"prependButtons":{"!type":"bool","!doc":"<p>true to insert any configured items <em>before</em> the paging buttons.</p>\n"},"prevText":{"!type":"string","!doc":"<p>The quicktip text displayed for the previous page button.\n<strong>Note</strong>: quick tips must be initialized for the quicktip to show.</p>\n"},"refreshText":{"!type":"string","!doc":"<p>The quicktip text displayed for the Refresh button.\n<strong>Note</strong>: quick tips must be initialized for the quicktip to show.</p>\n"},"store":{"!type":"+Ext.data.Store","!doc":"<p>The <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a> the paging toolbar should use as its data source.</p>\n"},"beforeLoad":{"!type":"fn() -> !this"},"bind":{"!type":"fn(store: +Ext.data.Store) -> !this","!doc":"<p>Binds the paging toolbar to the specified <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a> <strong>(deprecated)</strong></p>\n"},"doRefresh":{"!type":"fn() -> !this","!doc":"<p>Refresh the current page, has the same effect as clicking the 'refresh' button.</p>\n"},"getInputItem":{"!type":"fn() -> !this"},"getPageData":{"!type":"fn() -> !this"},"getPagingItems":{"!type":"fn() -> !this","!doc":"<p>Gets the standard paging items in the toolbar</p>\n"},"getStoreListeners":{"!type":"fn() -> ?","!doc":"<p>Gets the listeners to bind to a new store.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>The initComponent template method is an important initialization step for a Component. It is intended to be\nimplemented by each subclass of <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> to provide any needed constructor logic. The\ninitComponent method of the class being created is called first, with each initComponent method\nup the hierarchy to <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> being called thereafter. This makes it easy to implement and,\nif needed, override the constructor logic of the Component at any step in the hierarchy.</p>\n\n<p>The initComponent method <strong>must</strong> contain a call to <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a> in order\nto ensure that the parent class' initComponent method is also called.</p>\n\n<p>All config options passed to the constructor are applied to <code>this</code> before initComponent is called,\nso you can simply access them with <code>this.someOption</code>.</p>\n\n<p>The following example demonstrates using a dynamic string for the text of a button at the time of\ninstantiation of the class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('DynamicButtonText', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n\n    initComponent: function() {\n        this.text = new Date();\n        this.renderTo = <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>();\n        this.callParent();\n    }\n});\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function() {\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('DynamicButtonText');\n});\n</code></pre>\n"},"moveFirst":{"!type":"fn() -> !this","!doc":"<p>Move to the first page, has the same effect as clicking the 'first' button.</p>\n"},"moveLast":{"!type":"fn() -> !this","!doc":"<p>Move to the last page, has the same effect as clicking the 'last' button.</p>\n"},"moveNext":{"!type":"fn() -> !this","!doc":"<p>Move to the next page, has the same effect as clicking the 'next' button.</p>\n"},"movePrevious":{"!type":"fn() -> !this","!doc":"<p>Move to the previous page, has the same effect as clicking the 'previous' button.</p>\n"},"onDestroy":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the destroy operation.\nAfter calling the superclass's onDestroy, the Component will be destroyed.</p>\n"},"onLoad":{"!type":"fn() -> !this"},"onLoadError":{"!type":"fn() -> !this"},"onPagingBlur":{"!type":"fn(e: ?) -> !this"},"onPagingFocus":{"!type":"fn() -> !this"},"onPagingKeyDown":{"!type":"fn(field: ?, e: ?) -> !this"},"readPageFromInput":{"!type":"fn(pageData: ?) -> !this"},"setChildDisabled":{"!type":"fn(selector: ?, disabled: ?) -> !this"},"unbind":{"!type":"fn(store: +Ext.data.Store) -> !this","!doc":"<p>Unbinds the paging toolbar from the specified <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a> <strong>(deprecated)</strong></p>\n"},"updateInfo":{"!type":"fn() -> !this"},"beforechange":{"!type":"fn(this: +Ext.toolbar.Paging, page: number, eOpts: ?)","!doc":"<p>Fires just before the active page is changed. Return false to prevent the active page from being changed.</p>\n"},"change":{"!type":"fn(this: +Ext.toolbar.Paging, pageData: ?, eOpts: ?)","!doc":"<p>Fires after the active page has been changed.</p>\n"}}},"Separator":{"!doc":"<p>A simple class that adds a vertical separator bar between toolbar items (css class: 'x-toolbar-separator').</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>', {\n    title: 'Toolbar Separator Example',\n    width: 300,\n    height: 200,\n    tbar : [\n        'Item 1',\n        { xtype: 'tbseparator' },\n        'Item 2'\n    ],\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_toolbar_Separator_cfg)","prototype":{"!proto":"Ext.toolbar.Item.prototype","baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this component's element. This will also be prepended to elements within this\ncomponent like Panel's body will get a class <code>x-panel-body</code>. This means that if you create a subclass of Panel, and\nyou want it to get all the Panels styling for the element and the body, you leave the <code>baseCls</code> <code>x-panel</code> and use\n<code>componentCls</code> to add specific styling for this component.</p>\n"},"focusable":{"!type":"bool"}}},"Spacer":{"!doc":"<p>A simple element that adds extra horizontal space between items in a toolbar.\nBy default a 2px wide space is added via CSS specification:</p>\n\n<pre><code>.x-toolbar .x-toolbar-spacer {\n    width: 2px;\n}\n</code></pre>\n\n<p>Example:</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>', {\n    title: 'Toolbar Spacer Example',\n    width: 300,\n    height: 200,\n    tbar : [\n        'Item 1',\n        { xtype: 'tbspacer' }, // or ' '\n        'Item 2',\n        // space width is also configurable via javascript\n        { xtype: 'tbspacer', width: 50 }, // add a 50px space\n        'Item 3'\n    ],\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_toolbar_Spacer_cfg)","prototype":{"!proto":"Ext.Component.prototype","baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this component's element. This will also be prepended to elements within this\ncomponent like Panel's body will get a class <code>x-panel-body</code>. This means that if you create a subclass of Panel, and\nyou want it to get all the Panels styling for the element and the body, you leave the <code>baseCls</code> <code>x-panel</code> and use\n<code>componentCls</code> to add specific styling for this component.</p>\n"},"focusable":{"!type":"bool"}}},"TextItem":{"!doc":"<p>A simple class that renders text directly into a toolbar.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>', {\n    title: 'Panel with TextItem',\n    width: 300,\n    height: 200,\n    tbar: [\n        { xtype: 'tbtext', text: 'Sample Text Item' }\n    ],\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n","!type":"fn(text: ?)","prototype":{"!proto":"Ext.toolbar.Item.prototype","baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this component's element. This will also be prepended to elements within this\ncomponent like Panel's body will get a class <code>x-panel-body</code>. This means that if you create a subclass of Panel, and\nyou want it to get all the Panels styling for the element and the body, you leave the <code>baseCls</code> <code>x-panel</code> and use\n<code>componentCls</code> to add specific styling for this component.</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.toolbar.TextItem-method-getEl\" rel=\"Ext.toolbar.TextItem-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.toolbar.TextItem-method-getEl\" rel=\"Ext.toolbar.TextItem-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.toolbar.TextItem-cfg-renderSelectors\" rel=\"Ext.toolbar.TextItem-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.toolbar.TextItem-cfg-childEls\" rel=\"Ext.toolbar.TextItem-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"},"text":{"!type":"string","!doc":"<p>The text to be used as innerHTML (html tags are accepted).</p>\n"},"beforeRender":{"!type":"fn() -> !this"},"setText":{"!type":"fn(text: string) -> !this","!doc":"<p>Updates this item's text, setting the text to be used as innerHTML.</p>\n"}}},"Toolbar":{"!doc":"<p>Basic Toolbar class. Although the <a href=\"#!/api/Ext.container.Container-cfg-defaultType\" rel=\"Ext.container.Container-cfg-defaultType\" class=\"docClass\">defaultType</a> for\nToolbar is <a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">button</a>, Toolbar elements (child items for the Toolbar container)\nmay be virtually any type of Component. Toolbar elements can be created explicitly via their\nconstructors, or implicitly via their xtypes, and can be <a href=\"#!/api/Ext.toolbar.Toolbar-method-add\" rel=\"Ext.toolbar.Toolbar-method-add\" class=\"docClass\">add</a>ed dynamically.</p>\n\n<h2>Some items have shortcut strings for creation:</h2>\n\n<table>\n<thead>\n<tr>\n<th style=\"text-align:left;\"> Shortcut </th>\n<th style=\"text-align:left;\"> xtype         </th>\n<th style=\"text-align:left;\"> Class                         </th>\n<th style=\"text-align:left;\"> Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style=\"text-align:left;\"> '->'     </td>\n<td style=\"text-align:left;\"> <code>tbfill</code>      </td>\n<td style=\"text-align:left;\"> <a href=\"#!/api/Ext.toolbar.Fill\" rel=\"Ext.toolbar.Fill\" class=\"docClass\">Ext.toolbar.Fill</a>      </td>\n<td style=\"text-align:left;\"> begin using the right-justified button container</td>\n</tr>\n<tr>\n<td style=\"text-align:left;\"> '-'      </td>\n<td style=\"text-align:left;\"> <code>tbseparator</code> </td>\n<td style=\"text-align:left;\"> <a href=\"#!/api/Ext.toolbar.Separator\" rel=\"Ext.toolbar.Separator\" class=\"docClass\">Ext.toolbar.Separator</a> </td>\n<td style=\"text-align:left;\"> add a vertical separator bar between toolbar items</td>\n</tr>\n<tr>\n<td style=\"text-align:left;\"> ' '      </td>\n<td style=\"text-align:left;\"> <code>tbspacer</code>    </td>\n<td style=\"text-align:left;\"> <a href=\"#!/api/Ext.toolbar.Spacer\" rel=\"Ext.toolbar.Spacer\" class=\"docClass\">Ext.toolbar.Spacer</a>    </td>\n<td style=\"text-align:left;\"> add horizontal space between elements</td>\n</tr>\n</tbody>\n</table>\n\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.toolbar.Toolbar\" rel=\"Ext.toolbar.Toolbar\" class=\"docClass\">Ext.toolbar.Toolbar</a>', {\n    renderTo: document.body,\n    width   : 500,\n    items: [\n        {\n            // xtype: 'button', // default for Toolbars\n            text: 'Button'\n        },\n        {\n            xtype: 'splitbutton',\n            text : 'Split Button'\n        },\n        // begin using the right-justified button container\n        '-&gt;', // same as { xtype: 'tbfill' }\n        {\n            xtype    : 'textfield',\n            name     : 'field1',\n            emptyText: 'enter search term'\n        },\n        // add a vertical separator bar between toolbar items\n        '-', // same as {xtype: 'tbseparator'} to create <a href=\"#!/api/Ext.toolbar.Separator\" rel=\"Ext.toolbar.Separator\" class=\"docClass\">Ext.toolbar.Separator</a>\n        'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create <a href=\"#!/api/Ext.toolbar.TextItem\" rel=\"Ext.toolbar.TextItem\" class=\"docClass\">Ext.toolbar.TextItem</a>\n        { xtype: 'tbspacer' },// same as ' ' to create <a href=\"#!/api/Ext.toolbar.Spacer\" rel=\"Ext.toolbar.Spacer\" class=\"docClass\">Ext.toolbar.Spacer</a>\n        'text 2',\n        { xtype: 'tbspacer', width: 50 }, // add a 50px space\n        'text 3'\n    ]\n});\n</code></pre>\n\n<p>Toolbars have <a href=\"#!/api/Ext.toolbar.Toolbar-method-enable\" rel=\"Ext.toolbar.Toolbar-method-enable\" class=\"docClass\">enable</a> and <a href=\"#!/api/Ext.toolbar.Toolbar-method-disable\" rel=\"Ext.toolbar.Toolbar-method-disable\" class=\"docClass\">disable</a> methods which when called, will\nenable/disable all items within your toolbar.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.toolbar.Toolbar\" rel=\"Ext.toolbar.Toolbar\" class=\"docClass\">Ext.toolbar.Toolbar</a>', {\n    renderTo: document.body,\n    width   : 400,\n    items: [\n        {\n            text: 'Button'\n        },\n        {\n            xtype: 'splitbutton',\n            text : 'Split Button'\n        },\n        '-&gt;',\n        {\n            xtype    : 'textfield',\n            name     : 'field1',\n            emptyText: 'enter search term'\n        }\n    ]\n});\n</code></pre>\n\n<p>Example</p>\n\n<pre class='inline-example '><code>var enableBtn = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>', {\n    text    : 'Enable All Items',\n    disabled: true,\n    scope   : this,\n    handler : function() {\n        //disable the enable button and enable the disable button\n        enableBtn.disable();\n        disableBtn.enable();\n\n        //enable the toolbar\n        toolbar.enable();\n    }\n});\n\nvar disableBtn = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>', {\n    text    : 'Disable All Items',\n    scope   : this,\n    handler : function() {\n        //enable the enable button and disable button\n        disableBtn.disable();\n        enableBtn.enable();\n\n        //disable the toolbar\n        toolbar.disable();\n    }\n});\n\nvar toolbar = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.toolbar.Toolbar\" rel=\"Ext.toolbar.Toolbar\" class=\"docClass\">Ext.toolbar.Toolbar</a>', {\n    renderTo: document.body,\n    width   : 400,\n    margin  : '5 0 0 0',\n    items   : [enableBtn, disableBtn]\n});\n</code></pre>\n\n<p>Adding items to and removing items from a toolbar is as simple as calling the <a href=\"#!/api/Ext.toolbar.Toolbar-method-add\" rel=\"Ext.toolbar.Toolbar-method-add\" class=\"docClass\">add</a>\nand <a href=\"#!/api/Ext.toolbar.Toolbar-method-remove\" rel=\"Ext.toolbar.Toolbar-method-remove\" class=\"docClass\">remove</a> methods. There is also a <a href=\"#!/api/Ext.toolbar.Toolbar-method-removeAll\" rel=\"Ext.toolbar.Toolbar-method-removeAll\" class=\"docClass\">removeAll</a> method\nwhich remove all items within the toolbar.</p>\n\n<pre class='inline-example '><code>var toolbar = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.toolbar.Toolbar\" rel=\"Ext.toolbar.Toolbar\" class=\"docClass\">Ext.toolbar.Toolbar</a>', {\n    renderTo: document.body,\n    width   : 700,\n    items: [\n        {\n            text: 'Example Button'\n        }\n    ]\n});\n\nvar addedItems = [];\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.toolbar.Toolbar\" rel=\"Ext.toolbar.Toolbar\" class=\"docClass\">Ext.toolbar.Toolbar</a>', {\n    renderTo: document.body,\n    width   : 700,\n    margin  : '5 0 0 0',\n    items   : [\n        {\n            text   : 'Add a button',\n            scope  : this,\n            handler: function() {\n                var text = prompt('Please enter the text for your button:');\n                addedItems.push(toolbar.add({\n                    text: text\n                }));\n            }\n        },\n        {\n            text   : 'Add a text item',\n            scope  : this,\n            handler: function() {\n                var text = prompt('Please enter the text for your item:');\n                addedItems.push(toolbar.add(text));\n            }\n        },\n        {\n            text   : 'Add a toolbar separator',\n            scope  : this,\n            handler: function() {\n                addedItems.push(toolbar.add('-'));\n            }\n        },\n        {\n            text   : 'Add a toolbar spacer',\n            scope  : this,\n            handler: function() {\n                addedItems.push(toolbar.add('-&gt;'));\n            }\n        },\n        '-&gt;',\n        {\n            text   : 'Remove last inserted item',\n            scope  : this,\n            handler: function() {\n                if (addedItems.length) {\n                    toolbar.remove(addedItems.pop());\n                } else if (toolbar.items.length) {\n                    toolbar.remove(toolbar.items.last());\n                } else {\n                    alert('No items in the toolbar');\n                }\n            }\n        },\n        {\n            text   : 'Remove all items',\n            scope  : this,\n            handler: function() {\n                toolbar.removeAll();\n            }\n        }\n    ]\n});\n</code></pre>\n","!type":"fn(config: Ext_toolbar_Toolbar_cfg|[?])","prototype":{"!proto":"Ext.container.Container.prototype","baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this component's element. This will also be prepended to elements within this\ncomponent like Panel's body will get a class <code>x-panel-body</code>. This means that if you create a subclass of Panel, and\nyou want it to get all the Panels styling for the element and the body, you leave the <code>baseCls</code> <code>x-panel</code> and use\n<code>componentCls</code> to add specific styling for this component.</p>\n"},"defaultButtonUI":{"!type":"string","!doc":"<p>A default <a href=\"#!/api/Ext.Component-cfg-ui\" rel=\"Ext.Component-cfg-ui\" class=\"docClass\">ui</a> to use for <a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Button</a> items</p>\n"},"defaultType":{"!type":"string","!doc":"<p>The default <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">xtype</a> of child Components to create in this Container when\na child item is specified as a raw configuration object, rather than as an instantiated Component.</p>\n"},"enableOverflow":{"!type":"bool","!doc":"<p>Configure true to make the toolbar provide a button which activates a dropdown Menu to show\nitems which overflow the Toolbar's width.</p>\n"},"layout":{"!type":"+Ext.enums.Layout|?","!doc":"<p>This class assigns a default layout (<code>layout: 'hbox'</code>).\nDevelopers <em>may</em> override this configuration option if another layout\nis required (the constructor must be passed a configuration object in this\ncase instead of an array).\nSee <a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">Ext.container.Container.layout</a> for additional information.</p>\n"},"menuTriggerCls":{"!type":"string","!doc":"<p>Configure the icon class of the overflow button.</p>\n"},"vertical":{"!type":"bool","!doc":"<p>Set to <code>true</code> to make the toolbar vertical. The layout will become a <code>vbox</code>.</p>\n"},"ariaRole":{"!type":"string"},"isToolbar":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated Toolbar, or subclass thereof.</p>\n"},"itemCls":{"!type":"string"},"trackMenus":{"!type":"bool"},"add":{"!type":"fn(args: +Ext.Component|?|string|+HTMLElement) -> [+Ext.Component]|+Ext.Component","!doc":"<p>Adds element(s) to the toolbar -- this function takes a variable number of\narguments of mixed type and adds them to the toolbar.</p>\n\n<p><strong>Note</strong>: See the notes within <a href=\"#!/api/Ext.container.Container-method-add\" rel=\"Ext.container.Container-method-add\" class=\"docClass\">Ext.container.Container.add</a>.</p>\n"},"applyDefaults":{"!type":"fn(c: ?) -> !this"},"getChildItemsToDisable":{"!type":"fn() -> [+Ext.Component]","!doc":"<p>Gets a list of child components to enable/disable when the container is\nenabled/disabled</p>\n"},"getRefItems":{"!type":"fn(deep: ?) -> !this","!doc":"<p>Used by <a href=\"#!/api/Ext.ComponentQuery\" rel=\"Ext.ComponentQuery\" class=\"docClass\">ComponentQuery</a>, <a href=\"#!/api/Ext.toolbar.Toolbar-method-child\" rel=\"Ext.toolbar.Toolbar-method-child\" class=\"docClass\">child</a> and <a href=\"#!/api/Ext.toolbar.Toolbar-method-down\" rel=\"Ext.toolbar.Toolbar-method-down\" class=\"docClass\">down</a> to retrieve all of the items\nwhich can potentially be considered a child of this Container.</p>\n\n<p>This may be overriden by Components which have ownership of Components\nthat are not contained in the <a href=\"#!/api/Ext.toolbar.Toolbar-property-items\" rel=\"Ext.toolbar.Toolbar-property-items\" class=\"docClass\">items</a> collection.</p>\n\n<p>NOTE: IMPORTANT note for maintainers:\nItems are returned in tree traversal order. Each item is appended to the result array\nfollowed by the results of that child's getRefItems call.\nFloating child items are appended after internal child items.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>The initComponent template method is an important initialization step for a Component. It is intended to be\nimplemented by each subclass of <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> to provide any needed constructor logic. The\ninitComponent method of the class being created is called first, with each initComponent method\nup the hierarchy to <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> being called thereafter. This makes it easy to implement and,\nif needed, override the constructor logic of the Component at any step in the hierarchy.</p>\n\n<p>The initComponent method <strong>must</strong> contain a call to <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a> in order\nto ensure that the parent class' initComponent method is also called.</p>\n\n<p>All config options passed to the constructor are applied to <code>this</code> before initComponent is called,\nso you can simply access them with <code>this.someOption</code>.</p>\n\n<p>The following example demonstrates using a dynamic string for the text of a button at the time of\ninstantiation of the class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('DynamicButtonText', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n\n    initComponent: function() {\n        this.text = new Date();\n        this.renderTo = <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>();\n        this.callParent();\n    }\n});\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function() {\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('DynamicButtonText');\n});\n</code></pre>\n"},"insert":{"!type":"fn(index: number, component: +Ext.Component|?|string|+HTMLElement) -> +Ext.Component","!doc":"<p>Inserts a Component into this Container at a specified index.</p>\n"},"lookupComponent":{"!type":"fn(c: ?) -> !this"},"onAdd":{"!type":"fn(component: ?) -> !this","!doc":"<p>This method is invoked after a new Component has been added. It\nis passed the Component which has been added. This method may\nbe used to update any internal structure which may depend upon\nthe state of the child items.</p>\n"},"onBeforeAdd":{"!type":"fn(component: ?) -> !this","!doc":"<p>This method is invoked before adding a new child Component. It\nis passed the new Component, and may be used to modify the\nComponent, or prepare the Container in some way. Returning\nfalse aborts the add operation.</p>\n"},"onButtonMenuHide":{"!type":"fn(btn: ?) -> !this"},"onButtonMenuShow":{"!type":"fn(btn: ?) -> !this"},"onButtonOver":{"!type":"fn(btn: ?) -> !this"},"onRemove":{"!type":"fn(c: ?) -> !this","!doc":"<p>This method is invoked after a new Component has been\nremoved. It is passed the Component which has been\nremoved. This method may be used to update any internal\nstructure which may depend upon the state of the child items.</p>\n"},"trackMenu":{"!type":"fn(item: ?, remove: ?) -> !this"},"overflowchange":{"!type":"fn(lastHiddenCount: number, hiddenCount: number, The: [?], eOpts: ?)","!doc":"<p>Fires after the overflow state has changed.</p>\n"}},"shortcuts":{"!type":"?"},"shortcutsHV":{"!type":"?"}}},"tree":{"Column":{"!doc":"<p>Provides indentation and folder structure markup for a Tree taking into account\ndepth and position within the tree hierarchy.</p>\n","!type":"fn(config: +Ext.Element|string|Ext_tree_Column_cfg)","prototype":{"!proto":"Ext.grid.column.Column.prototype","hideable":{"!type":"bool","!doc":"<p>False to prevent the user from hiding this column.</p>\n"},"lockable":{"!type":"bool","!doc":"<p>If the grid is configured with <a href=\"#!/api/Ext.panel.Table-cfg-enableLocking\" rel=\"Ext.panel.Table-cfg-enableLocking\" class=\"docClass\">enableLocking</a>, or has columns which are\nconfigured with a <a href=\"#!/api/Ext.tree.Column-cfg-locked\" rel=\"Ext.tree.Column-cfg-locked\" class=\"docClass\">locked</a> value, this option may be used to disable user-driven locking or unlocking\nof this column. This column will remain in the side into which its own <a href=\"#!/api/Ext.tree.Column-cfg-locked\" rel=\"Ext.tree.Column-cfg-locked\" class=\"docClass\">locked</a> configuration placed it.</p>\n"},"tdCls":{"!type":"string","!doc":"<p>A CSS class names to apply to the table cells for this column.</p>\n"},"autoLock":{"!type":"bool"},"cellTpl":{"!type":"[?]"},"checkboxCls":{"!type":"string"},"draggable":{"!type":"bool","!doc":"<p>Indicates whether or not the component can be dragged.</p>\n"},"elbowCls":{"!type":"string"},"expanderCls":{"!type":"string"},"iconCls":{"!type":"string"},"innerCls":{"!type":"string"},"isTreeColumn":{"!type":"bool"},"textCls":{"!type":"string"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>The initComponent template method is an important initialization step for a Component. It is intended to be\nimplemented by each subclass of <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> to provide any needed constructor logic. The\ninitComponent method of the class being created is called first, with each initComponent method\nup the hierarchy to <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> being called thereafter. This makes it easy to implement and,\nif needed, override the constructor logic of the Component at any step in the hierarchy.</p>\n\n<p>The initComponent method <strong>must</strong> contain a call to <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a> in order\nto ensure that the parent class' initComponent method is also called.</p>\n\n<p>All config options passed to the constructor are applied to <code>this</code> before initComponent is called,\nso you can simply access them with <code>this.someOption</code>.</p>\n\n<p>The following example demonstrates using a dynamic string for the text of a button at the time of\ninstantiation of the class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('DynamicButtonText', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n\n    initComponent: function() {\n        this.text = new Date();\n        this.renderTo = <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>();\n        this.callParent();\n    }\n});\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function() {\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('DynamicButtonText');\n});\n</code></pre>\n"},"treeRenderer":{"!type":"fn(value: ?, metaData: ?, record: ?, rowIdx: ?, colIdx: ?, store: ?, view: ?) -> !this"}}},"Panel":{"!doc":"<p>The TreePanel provides tree-structured UI representation of tree-structured data.\nA TreePanel must be bound to a <a href=\"#!/api/Ext.data.TreeStore\" rel=\"Ext.data.TreeStore\" class=\"docClass\">Ext.data.TreeStore</a>. TreePanel's support\nmultiple columns through the <a href=\"#!/api/Ext.tree.Panel-cfg-columns\" rel=\"Ext.tree.Panel-cfg-columns\" class=\"docClass\">columns</a> configuration.</p>\n\n<p>Simple TreePanel using inline data:</p>\n\n<pre class='inline-example '><code>var store = <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.TreeStore\" rel=\"Ext.data.TreeStore\" class=\"docClass\">Ext.data.TreeStore</a>', {\n    root: {\n        expanded: true,\n        children: [\n            { text: \"detention\", leaf: true },\n            { text: \"homework\", expanded: true, children: [\n                { text: \"book report\", leaf: true },\n                { text: \"algebra\", leaf: true}\n            ] },\n            { text: \"buy lottery tickets\", leaf: true }\n        ]\n    }\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.tree.Panel\" rel=\"Ext.tree.Panel\" class=\"docClass\">Ext.tree.Panel</a>', {\n    title: 'Simple Tree',\n    width: 200,\n    height: 150,\n    store: store,\n    rootVisible: false,\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n\n<p>For the tree node config options (like <code>text</code>, <code>leaf</code>, <code>expanded</code>), see the documentation of\n<a href=\"#!/api/Ext.data.NodeInterface\" rel=\"Ext.data.NodeInterface\" class=\"docClass\">NodeInterface</a> config options.</p>\n","!type":"fn(config: Ext_tree_Panel_cfg)","prototype":{"!proto":"Ext.panel.Table.prototype","animate":{"!type":"bool","!doc":"<p>True to enable animated expand/collapse. Defaults to the value of <a href=\"#!/api/Ext-property-enableFx\" rel=\"Ext-property-enableFx\" class=\"docClass\">Ext.enableFx</a>.</p>\n"},"deferRowRender":{"!type":"bool","!doc":"<p>Defaults to true to enable deferred row rendering.</p>\n\n<p>This allows the View to execute a refresh quickly, with the expensive update of the row structure deferred so\nthat layouts with GridPanels appear, and lay out more quickly.</p>\n"},"displayField":{"!type":"string","!doc":"<p>The field inside the model that will be used as the node's text.</p>\n"},"folderSort":{"!type":"bool","!doc":"<p>True to automatically prepend a leaf sorter to the store.</p>\n"},"hideHeaders":{"!type":"bool","!doc":"<p>True to hide the headers.</p>\n"},"lines":{"!type":"bool","!doc":"<p>False to disable tree lines.</p>\n"},"root":{"!type":"+Ext.data.Model|+Ext.data.NodeInterface|?","!doc":"<p>Allows you to not specify a store on this TreePanel. This is useful for creating a simple tree with preloaded\ndata without having to specify a TreeStore and Model. A store and model will be created and root will be passed\nto that store. For example:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.tree.Panel\" rel=\"Ext.tree.Panel\" class=\"docClass\">Ext.tree.Panel</a>', {\n    title: 'Simple Tree',\n    root: {\n        text: \"Root node\",\n        expanded: true,\n        children: [\n            { text: \"Child 1\", leaf: true },\n            { text: \"Child 2\", leaf: true }\n        ]\n    },\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n"},"rootVisible":{"!type":"bool","!doc":"<p>False to hide the root node.</p>\n"},"rowLines":{"!type":"bool","!doc":"<p>False so that rows are not separated by lines.</p>\n"},"selType":{"!type":"string","!doc":"<p>An xtype of selection model to use. Defaults to 'rowmodel'. This is used to create selection model if just\na config object or nothing at all given in <a href=\"#!/api/Ext.tree.Panel-cfg-selModel\" rel=\"Ext.tree.Panel-cfg-selModel\" class=\"docClass\">selModel</a> config.</p>\n"},"singleExpand":{"!type":"bool","!doc":"<p>True if only 1 node per branch may be expanded.</p>\n"},"store":{"!type":"+Ext.data.TreeStore","!doc":"<p>The <a href=\"#!/api/Ext.data.TreeStore\" rel=\"Ext.data.TreeStore\" class=\"docClass\">Store</a> the tree should use as its data source.</p>\n"},"useArrows":{"!type":"bool","!doc":"<p>True to use Vista-style arrows in the tree.</p>\n"},"viewType":{"!type":"string","!doc":"<p>An xtype of view to use. This is automatically set to 'gridview' by <a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Grid</a>\nand to 'treeview' by <a href=\"#!/api/Ext.tree.Panel\" rel=\"Ext.tree.Panel\" class=\"docClass\">Tree</a>.</p>\n"},"autoWidthCls":{"!type":"string"},"ddConfig":{"!type":"?"},"isTree":{"!type":"bool"},"linesCls":{"!type":"string"},"lockedCfgCopy":{"!type":"[?]"},"noLinesCls":{"!type":"string"},"normalCfgCopy":{"!type":"[?]","!doc":"<p>Required for the Lockable Mixin. These are the configurations which will be copied to the\nnormal and locked sub tablepanels</p>\n"},"treeCls":{"!type":"string"},"bindStore":{"!type":"fn(store: ?, initial: ?) -> !this","!doc":"<p>Hook into the TreeStore.\nDo not callParent in TreePanel's bindStore\nThe TreeStore is only relevant to the tree - the View has its own NodeStore</p>\n"},"collapseAll":{"!type":"fn(callback?: fn(), scope?: ?) -> !this","!doc":"<p>Collapse all nodes</p>\n"},"collapseNode":{"!type":"fn(record: +Ext.data.Model, deep?: bool, callback?: fn(), scope?: ?) -> !this","!doc":"<p>Collapses a record that is loaded in the tree.</p>\n"},"expandAll":{"!type":"fn(callback?: fn(), scope?: ?) -> !this","!doc":"<p>Expand all nodes</p>\n"},"expandNode":{"!type":"fn(record: +Ext.data.Model, deep?: bool, callback?: fn(), scope?: ?) -> !this","!doc":"<p>Expands a record that is loaded in the tree.</p>\n"},"expandPath":{"!type":"fn(path: string, field?: string, separator?: string, callback?: fn(), scope?: ?) -> !this","!doc":"<p>Expand the tree to the path of a particular node.</p>\n"},"getChecked":{"!type":"fn() -> [+Ext.data.NodeInterface]","!doc":"<p>Retrieve an array of checked records.</p>\n"},"getRootNode":{"!type":"fn() -> +Ext.data.NodeInterface","!doc":"<p>Returns the root node for this tree.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>The initComponent template method is an important initialization step for a Component. It is intended to be\nimplemented by each subclass of <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> to provide any needed constructor logic. The\ninitComponent method of the class being created is called first, with each initComponent method\nup the hierarchy to <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> being called thereafter. This makes it easy to implement and,\nif needed, override the constructor logic of the Component at any step in the hierarchy.</p>\n\n<p>The initComponent method <strong>must</strong> contain a call to <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a> in order\nto ensure that the parent class' initComponent method is also called.</p>\n\n<p>All config options passed to the constructor are applied to <code>this</code> before initComponent is called,\nso you can simply access them with <code>this.someOption</code>.</p>\n\n<p>The following example demonstrates using a dynamic string for the text of a button at the time of\ninstantiation of the class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('DynamicButtonText', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n\n    initComponent: function() {\n        this.text = new Date();\n        this.renderTo = <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>();\n        this.callParent();\n    }\n});\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function() {\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('DynamicButtonText');\n});\n</code></pre>\n"},"isItemChecked":{"!type":"fn(rec: ?) -> !this"},"onClear":{"!type":"fn() -> !this"},"onRootChange":{"!type":"fn(root: ?) -> !this"},"selectPath":{"!type":"fn(path: string, field?: string, separator?: string, callback?: fn(), scope?: ?) -> !this","!doc":"<p>Expand the tree to the path of a particular node, then select it.</p>\n"},"setRootNode":{"!type":"fn(root: +Ext.data.Model|+Ext.data.NodeInterface|?) -> +Ext.data.NodeInterface","!doc":"<p>Sets root node of this tree.</p>\n"},"unbindStore":{"!type":"fn() -> !this","!doc":"<p>TODO: Decide whether it is possible to reconfigure a TreePanel.</p>\n"},"afteritemcollapse":{"!type":"fn(node: +Ext.data.NodeInterface, index: number, item: +HTMLElement, eOpts: ?)","!doc":"<p>Fires after an item has been visually collapsed and is no longer visible in the tree.</p>\n"},"afteritemexpand":{"!type":"fn(node: +Ext.data.NodeInterface, index: number, item: +HTMLElement, eOpts: ?)","!doc":"<p>Fires after an item has been visually expanded and is visible in the tree.</p>\n"},"beforeitemappend":{"!type":"fn(this: +Ext.data.NodeInterface, node: +Ext.data.NodeInterface, eOpts: ?)","!doc":"<p>Fires before a new child is appended, return false to cancel the append.</p>\n"},"beforeitemcollapse":{"!type":"fn(this: +Ext.data.NodeInterface, eOpts: ?)","!doc":"<p>Fires before this node is collapsed.</p>\n"},"beforeitemexpand":{"!type":"fn(this: +Ext.data.NodeInterface, eOpts: ?)","!doc":"<p>Fires before this node is expanded.</p>\n"},"beforeiteminsert":{"!type":"fn(this: +Ext.data.NodeInterface, node: +Ext.data.NodeInterface, refNode: +Ext.data.NodeInterface, eOpts: ?)","!doc":"<p>Fires before a new child is inserted, return false to cancel the insert.</p>\n"},"beforeitemmove":{"!type":"fn(this: +Ext.data.NodeInterface, oldParent: +Ext.data.NodeInterface, newParent: +Ext.data.NodeInterface, index: number, eOpts: ?)","!doc":"<p>Fires before this node is moved to a new location in the tree. Return false to cancel the move.</p>\n"},"beforeitemremove":{"!type":"fn(this: +Ext.data.NodeInterface, node: +Ext.data.NodeInterface, isMove: bool, eOpts: ?)","!doc":"<p>Fires before a child is removed, return false to cancel the remove.</p>\n"},"beforeload":{"!type":"fn(store: +Ext.data.Store, operation: +Ext.data.Operation, eOpts: ?)","!doc":"<p>Fires before a request is made for a new data object. If the beforeload handler returns false the load\naction will be canceled.</p>\n"},"checkchange":{"!type":"fn(node: +Ext.data.NodeInterface, checked: bool, eOpts: ?)","!doc":"<p>Fires when a node with a checkbox's checked property changes</p>\n"},"itemappend":{"!type":"fn(this: +Ext.data.NodeInterface, node: +Ext.data.NodeInterface, index: number, eOpts: ?)","!doc":"<p>Fires when a new child node is appended</p>\n"},"itemcollapse":{"!type":"fn(this: +Ext.data.NodeInterface, eOpts: ?)","!doc":"<p>Fires when this node is collapsed.</p>\n"},"itemexpand":{"!type":"fn(this: +Ext.data.NodeInterface, eOpts: ?)","!doc":"<p>Fires when this node is expanded.</p>\n"},"iteminsert":{"!type":"fn(this: +Ext.data.NodeInterface, node: +Ext.data.NodeInterface, refNode: +Ext.data.NodeInterface, eOpts: ?)","!doc":"<p>Fires when a new child node is inserted.</p>\n"},"itemmove":{"!type":"fn(this: +Ext.data.NodeInterface, oldParent: +Ext.data.NodeInterface, newParent: +Ext.data.NodeInterface, index: number, eOpts: ?)","!doc":"<p>Fires when this node is moved to a new location in the tree</p>\n"},"itemremove":{"!type":"fn(this: +Ext.data.NodeInterface, node: +Ext.data.NodeInterface, isMove: bool, eOpts: ?)","!doc":"<p>Fires when a child node is removed</p>\n"},"load":{"!type":"fn(this: +Ext.data.TreeStore, node: +Ext.data.NodeInterface, records: [+Ext.data.Model], successful: bool, eOpts: ?)","!doc":"<p>Fires whenever the store reads data from a remote data source.</p>\n"}}},"View":{"!doc":"<p>Used as a view by <a href=\"#!/api/Ext.tree.Panel\" rel=\"Ext.tree.Panel\" class=\"docClass\">TreePanel</a>.</p>\n\n<p><strong>From override Ext.grid.plugin.BufferedRendererTreeView:</strong> A set of overrides required by the presence of the BufferedRenderer plugin.</p>\n\n<p>These overrides of <a href=\"#!/api/Ext.tree.View\" rel=\"Ext.tree.View\" class=\"docClass\">Ext.tree.View</a> take into account the affect of a buffered renderer and\ndivert execution from the default course where necessary.</p>\n","!type":"fn(config: Ext_tree_View_cfg)","prototype":{"!proto":"Ext.view.Table.prototype","animate":{"!type":"bool","!doc":"<p>True to enable animated expand/collapse (defaults to the value of <a href=\"#!/api/Ext-property-enableFx\" rel=\"Ext-property-enableFx\" class=\"docClass\">Ext.enableFx</a>)</p>\n"},"blockRefresh":{"!type":"bool","!doc":"<p>Set this to true to ignore refresh events on the bound store. This is useful if\nyou wish to provide custom transition animations via a plugin</p>\n"},"deferInitialRefresh":{"!type":"bool","!doc":"<p>Must be false for Tree Views because the root node must be rendered in order to be updated with its child nodes.</p>\n"},"loadMask":{"!type":"bool","!doc":"<p>False to disable a load mask from displaying while the view is loading. This can also be a\n<a href=\"#!/api/Ext.LoadMask\" rel=\"Ext.LoadMask\" class=\"docClass\">Ext.LoadMask</a> configuration object.</p>\n"},"loadingCls":{"!type":"string","!doc":"<p>The CSS class to apply to the loading message element. Defaults to Ext.LoadMask.prototype.msgCls \"x-mask-loading\".</p>\n"},"rootVisible":{"!type":"bool","!doc":"<p>False to hide the root node.</p>\n"},"stripeRows":{"!type":"bool","!doc":"<p>True to stripe the rows.</p>\n\n<p>This causes the CSS class <strong><code>x-grid-row-alt</code></strong> to be added to alternate rows of\nthe grid. A default CSS rule is provided which sets a background color, but you can override this\nwith a rule which either overrides the <strong>background-color</strong> style using the <code>!important</code>\nmodifier, or which uses a CSS selector of higher specificity.</p>\n"},"checkboxSelector":{"!type":"string"},"collapseDuration":{"!type":"number"},"expandedCls":{"!type":"string"},"expanderIconOverCls":{"!type":"string"},"expanderSelector":{"!type":"string"},"isTreeView":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated TreeView, or subclass thereof.</p>\n"},"leafCls":{"!type":"string"},"nodeAnimWrapCls":{"!type":"string","!doc":"<p>Class to add to the node wrap element used to hold nodes when a parent is being\ncollapsed or expanded. During the animation, UI interaction is forbidden by testing\nfor an ancestor node with this class.</p>\n"},"toggleOnDblClick":{"!type":"bool"},"treeRowTpl":{"!type":"?","!doc":"<p>treeRowTpl which is inserted into thwe rowTpl chain before the base rowTpl. Sets tree-specific classes and attributes</p>\n"},"uiFields":{"!type":"[?]","!doc":"<p>fields that will trigger a change in the ui that aren't likely to be bound to a column</p>\n"},"afterComponentLayout":{"!type":"fn() -> !this","!doc":"<p>Called by the layout system after the Component has been laid out.</p>\n"},"afterRender":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior after rendering is complete. At this stage the Component’s Element\nwill have been styled according to the configuration, will have had any configured CSS class\nnames added, and will be in the configured visibility and the configured enable state.</p>\n"},"collapse":{"!type":"fn(record: +Ext.data.Model, deep?: bool, callback?: fn(), scope?: ?) -> !this","!doc":"<p>Collapses a record that is loaded in the view.</p>\n\n<p>If an animated collapse or expand of the record is in progress, this call will be ignored.</p>\n"},"createAnimWrap":{"!type":"fn(record: ?, index: ?) -> !this"},"doAdd":{"!type":"fn(records: ?, index: ?) -> !this"},"doRemove":{"!type":"fn(record: ?, index: ?) -> !this","!doc":"<p>private</p>\n"},"ensureSingleExpand":{"!type":"fn(node: ?) -> !this"},"expand":{"!type":"fn(record: +Ext.data.Model, deep?: bool, callback?: fn(), scope?: ?) -> !this","!doc":"<p>Expands a record that is loaded in the view.</p>\n\n<p>If an animated collapse or expand of the record is in progress, this call will be ignored.</p>\n"},"getAnimWrap":{"!type":"fn(parent: ?, bubble?: ?) -> +Ext.Element","!doc":"<p>Returns the animation wrapper element for the specified parent node, used to wrap the child nodes as\nthey slide up or down during expand/collapse.</p>\n"},"getChecked":{"!type":"fn() -> !this"},"getMaskStore":{"!type":"fn() -> !this"},"getStoreListeners":{"!type":"fn() -> ?","!doc":"<p>Gets the listeners to bind to a new store.</p>\n"},"getTreeStore":{"!type":"fn() -> !this","!doc":"<p>Gets the base TreeStore from the bound TreePanel.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"isAnimating":{"!type":"fn(node: +Ext.data.Model) -> bool","!doc":"<p>Checks if a node is currently undergoing animation</p>\n"},"isItemChecked":{"!type":"fn(rec: ?) -> !this"},"onBeforeCollapse":{"!type":"fn(parent: ?, records: ?, index: ?, callback: ?, scope: ?) -> !this","!doc":"<p>Triggered by the NodeStore's onNodeCollapse event.</p>\n"},"onBeforeExpand":{"!type":"fn(parent: ?, records: ?, index: ?) -> !this"},"onBeforeFill":{"!type":"fn(treeStore: ?, fillRoot: ?) -> !this"},"onBeforeItemMouseDown":{"!type":"fn(record: ?, item: ?, index: ?, e: ?) -> !this"},"onBeforeSort":{"!type":"fn() -> !this"},"onBindStore":{"!type":"fn() -> !this","!doc":"<p>Template method, it is called when a new store is bound\nto the current instance.</p>\n"},"onCheckChange":{"!type":"fn(record: ?) -> !this"},"onCheckboxChange":{"!type":"fn(e: ?, t: ?) -> !this"},"onClear":{"!type":"fn() -> !this"},"onCollapse":{"!type":"fn(parent: ?) -> !this"},"onExpand":{"!type":"fn(parent: ?) -> !this"},"onExpanderMouseOut":{"!type":"fn(e: ?, t: ?) -> !this"},"onExpanderMouseOver":{"!type":"fn(e: ?, t: ?) -> !this"},"onFillComplete":{"!type":"fn(treeStore: ?, fillRoot: ?, newNodes: ?) -> !this"},"onItemClick":{"!type":"fn(record: ?, item: ?, index: ?, e: ?) -> !this"},"onItemDblClick":{"!type":"fn(record: ?, item: ?, index: ?) -> !this"},"onRemove":{"!type":"fn(ds: ?, records: ?, indexes: ?) -> !this","!doc":"<p><strong>Overridden in Ext.grid.plugin.BufferedRendererTreeView.</strong></p>\n"},"onSort":{"!type":"fn(o: ?) -> !this"},"onStoreDataChanged":{"!type":"fn(store: +Ext.data.NodeStore, operation: +Ext.data.Operation) -> !this","!doc":"<p>Re-fires the NodeStore's \"datachanged\" event as a TreeStore event</p>\n"},"onStoreWrite":{"!type":"fn(store: +Ext.data.NodeStore, operation: +Ext.data.Operation) -> !this","!doc":"<p>Re-fires the NodeStore's \"write\" event as a TreeStore event</p>\n"},"onUnbindStore":{"!type":"fn() -> !this","!doc":"<p>Template method, it is called when an existing store is unbound\nfrom the current instance.</p>\n"},"processUIEvent":{"!type":"fn(e: ?) -> !this"},"refreshPartner":{"!type":"fn() -> !this"},"setRootNode":{"!type":"fn(node: ?) -> !this"},"shouldUpdateCell":{"!type":"fn(record: ?, column: ?, changedFieldNames: ?) -> !this"},"toggle":{"!type":"fn(record: +Ext.data.Model, deep?: bool, callback?: fn(), scope?: ?) -> !this","!doc":"<p>Toggles a record between expanded and collapsed.</p>\n\n<p>If an animated collapse or expand of the record is in progress, this call will be ignored.</p>\n"},"afteritemcollapse":{"!type":"fn(node: +Ext.data.NodeInterface, index: number, item: +HTMLElement, eOpts: ?)","!doc":"<p>Fires after an item has been visually collapsed and is no longer visible in the tree.</p>\n"},"afteritemexpand":{"!type":"fn(node: +Ext.data.NodeInterface, index: number, item: +HTMLElement, eOpts: ?)","!doc":"<p>Fires after an item has been visually expanded and is visible in the tree.</p>\n"},"nodedragover":{"!type":"fn(targetNode: +Ext.data.NodeInterface, position: string, dragData: ?, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when a tree node is being targeted for a drag drop, return false to signal drop not allowed.</p>\n"}}},"ViewDragZone":{"!type":"fn(config: Ext_tree_ViewDragZone_cfg)","prototype":{"!proto":"Ext.view.DragZone.prototype","afterRepair":{"!type":"fn() -> !this"},"getDragText":{"!type":"fn() -> !this"},"isPreventDrag":{"!type":"fn(e: ?, record: ?) -> !this","!doc":"<p>private template method</p>\n"}}},"ViewDropZone":{"!type":"fn(config: Ext_tree_ViewDropZone_cfg)","prototype":{"!proto":"Ext.view.DropZone.prototype","allowContainerDrop":{"!type":"bool","!doc":"<p>True if drops on the tree container (outside of a specific tree node) are allowed.</p>\n"},"allowParentInserts":{"!type":"bool","!doc":"<p>Allow inserting a dragged node between an expanded parent node and its first child that will become a\nsibling of the parent when dropped.</p>\n"},"appendOnly":{"!type":"bool","!doc":"<p>True if the tree should only allow append drops (use for trees which are sorted).</p>\n"},"expandDelay":{"!type":"number","!doc":"<p>The delay in milliseconds to wait before expanding a target tree node while dragging a droppable node\nover the target.</p>\n"},"indicatorCls":{"!type":"string"},"cancelExpand":{"!type":"fn() -> !this"},"expandNode":{"!type":"fn(node: ?) -> !this"},"getPosition":{"!type":"fn(e: ?, node: ?) -> !this"},"handleNodeDrop":{"!type":"fn(data: ?, targetNode: ?, position: ?) -> !this"},"isValidDropPoint":{"!type":"fn(node: ?, position: ?, dragZone: ?, e: ?, data: ?) -> !this"},"notifyOut":{"!type":"fn() -> !this","!doc":"<p>Moved out of the DropZone without dropping.\nRemove drop position indicator</p>\n"},"onContainerOver":{"!type":"fn(dd: ?, e: ?, data: ?) -> string","!doc":"<p>The mouse is past the end of all nodes (or there are no nodes)</p>\n"},"onNodeOut":{"!type":"fn(n: ?, dd: ?, e: ?, data: ?) -> !this","!doc":"<p>The mouse is no longer over a tree node, so dropping is not valid</p>\n"},"onNodeOver":{"!type":"fn(node: ?, dragZone: ?, e: ?, data: ?) -> string","!doc":"<p>The mouse is over a View node</p>\n"},"queueExpand":{"!type":"fn(node: ?) -> !this"}}},"plugin":{"TreeViewDragDrop":{"!doc":"<p>This plugin provides drag and/or drop functionality for a TreeView.</p>\n\n<p>It creates a specialized instance of <a href=\"#!/api/Ext.dd.DragZone\" rel=\"Ext.dd.DragZone\" class=\"docClass\">DragZone</a> which knows how to drag out of a\n<a href=\"#!/api/Ext.tree.View\" rel=\"Ext.tree.View\" class=\"docClass\">TreeView</a> and loads the data object which is passed to a cooperating\n<a href=\"#!/api/Ext.dd.DragZone\" rel=\"Ext.dd.DragZone\" class=\"docClass\">DragZone</a>'s methods with the following properties:</p>\n\n<ul>\n<li><p>copy : Boolean</p>\n\n<p>The value of the TreeView's <code>copy</code> property, or <code>true</code> if the TreeView was configured with <code>allowCopy: true</code> <em>and</em>\nthe control key was pressed when the drag operation was begun.</p></li>\n<li><p>view : TreeView</p>\n\n<p>The source TreeView from which the drag originated.</p></li>\n<li><p>ddel : HtmlElement</p>\n\n<p>The drag proxy element which moves with the mouse</p></li>\n<li><p>item : HtmlElement</p>\n\n<p>The TreeView node upon which the mousedown event was registered.</p></li>\n<li><p>records : Array</p>\n\n<p>An Array of <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Models</a> representing the selected data being dragged from the source TreeView.</p></li>\n</ul>\n\n\n<p>It also creates a specialized instance of <a href=\"#!/api/Ext.dd.DropZone\" rel=\"Ext.dd.DropZone\" class=\"docClass\">Ext.dd.DropZone</a> which cooperates with other DropZones which are\nmembers of the same ddGroup which processes such data objects.</p>\n\n<p>Adding this plugin to a view means that two new events may be fired from the client TreeView, <a href=\"#!/api/Ext.tree.plugin.TreeViewDragDrop-event-beforedrop\" rel=\"Ext.tree.plugin.TreeViewDragDrop-event-beforedrop\" class=\"docClass\">beforedrop</a> and\n<a href=\"#!/api/Ext.tree.plugin.TreeViewDragDrop-event-drop\" rel=\"Ext.tree.plugin.TreeViewDragDrop-event-drop\" class=\"docClass\">drop</a>.</p>\n\n<p>Note that the plugin must be added to the tree view, not to the tree panel. For example using viewConfig:</p>\n\n<pre><code>viewConfig: {\n    plugins: { ptype: 'treeviewdragdrop' }\n}\n</code></pre>\n","!type":"fn(config?: Ext_tree_plugin_TreeViewDragDrop_cfg)","prototype":{"!proto":"Ext.AbstractPlugin.prototype","allowContainerDrops":{"!type":"bool","!doc":"<p>True if drops on the tree container (outside of a specific tree node) are allowed.</p>\n"},"allowParentInserts":{"!type":"bool","!doc":"<p>Allow inserting a dragged node between an expanded parent node and its first child that will become a sibling of\nthe parent when dropped.</p>\n"},"appendOnly":{"!type":"bool","!doc":"<p>True if the tree should only allow append drops (use for trees which are sorted).</p>\n"},"containerScroll":{"!type":"?|bool","!doc":"<p>True to register this container with the Scrollmanager for auto scrolling during drag operations.\nA <a href=\"#!/api/Ext.dd.ScrollManager\" rel=\"Ext.dd.ScrollManager\" class=\"docClass\">Ext.dd.ScrollManager</a> configuration may also be passed.</p>\n"},"ddGroup":{"!type":"string","!doc":"<p>A named drag drop group to which this object belongs. If a group is specified, then both the DragZones and\nDropZone used by this plugin will only interact with other drag drop objects in the same group.</p>\n"},"displayField":{"!type":"string","!doc":"<p>The name of the model field that is used to display the text for the nodes</p>\n"},"dragGroup":{"!type":"string","!doc":"<p>The ddGroup to which the DragZone will belong.</p>\n\n<p>This defines which other DropZones the DragZone will interact with. Drag/DropZones only interact with other\nDrag/DropZones which are members of the same ddGroup.</p>\n"},"dragText":{"!type":"string","!doc":"<p>The text to show while dragging.</p>\n\n<p>Two placeholders can be used in the text:</p>\n\n<ul>\n<li><code>{0}</code> The number of selected items.</li>\n<li><code>{1}</code> 's' when more than 1 items (only useful for English).</li>\n</ul>\n\n"},"dropGroup":{"!type":"string","!doc":"<p>The ddGroup to which the DropZone will belong.</p>\n\n<p>This defines which other DragZones the DropZone will interact with. Drag/DropZones only interact with other\nDrag/DropZones which are members of the same ddGroup.</p>\n"},"enableDrag":{"!type":"bool","!doc":"<p>Set to <code>false</code> to disallow dragging items from the View.</p>\n"},"enableDrop":{"!type":"bool","!doc":"<p>Set to <code>false</code> to disallow the View from accepting drop gestures.</p>\n"},"expandDelay":{"!type":"number","!doc":"<p>The delay in milliseconds to wait before expanding a target tree node while dragging a droppable node over the\ntarget.</p>\n"},"nodeHighlightColor":{"!type":"string","!doc":"<p>The color to use when visually highlighting the dragged or dropped node (default value is light blue).\nThe color must be a 6 digit hex value, without a preceding '#'. See also <a href=\"#!/api/Ext.tree.plugin.TreeViewDragDrop-cfg-nodeHighlightOnDrop\" rel=\"Ext.tree.plugin.TreeViewDragDrop-cfg-nodeHighlightOnDrop\" class=\"docClass\">nodeHighlightOnDrop</a> and\n<a href=\"#!/api/Ext.tree.plugin.TreeViewDragDrop-cfg-nodeHighlightOnRepair\" rel=\"Ext.tree.plugin.TreeViewDragDrop-cfg-nodeHighlightOnRepair\" class=\"docClass\">nodeHighlightOnRepair</a>.</p>\n"},"nodeHighlightOnDrop":{"!type":"bool","!doc":"<p>Whether or not to highlight any nodes after they are\nsuccessfully dropped on their target. Defaults to the value of <code><a href=\"#!/api/Ext-property-enableFx\" rel=\"Ext-property-enableFx\" class=\"docClass\">Ext.enableFx</a></code>.\nSee also <a href=\"#!/api/Ext.tree.plugin.TreeViewDragDrop-cfg-nodeHighlightColor\" rel=\"Ext.tree.plugin.TreeViewDragDrop-cfg-nodeHighlightColor\" class=\"docClass\">nodeHighlightColor</a> and <a href=\"#!/api/Ext.tree.plugin.TreeViewDragDrop-cfg-nodeHighlightOnRepair\" rel=\"Ext.tree.plugin.TreeViewDragDrop-cfg-nodeHighlightOnRepair\" class=\"docClass\">nodeHighlightOnRepair</a>.</p>\n"},"nodeHighlightOnRepair":{"!type":"bool","!doc":"<p>Whether or not to highlight any nodes after they are\nrepaired from an unsuccessful drag/drop. Defaults to the value of <code><a href=\"#!/api/Ext-property-enableFx\" rel=\"Ext-property-enableFx\" class=\"docClass\">Ext.enableFx</a></code>.\nSee also <a href=\"#!/api/Ext.tree.plugin.TreeViewDragDrop-cfg-nodeHighlightColor\" rel=\"Ext.tree.plugin.TreeViewDragDrop-cfg-nodeHighlightColor\" class=\"docClass\">nodeHighlightColor</a> and <a href=\"#!/api/Ext.tree.plugin.TreeViewDragDrop-cfg-nodeHighlightOnDrop\" rel=\"Ext.tree.plugin.TreeViewDragDrop-cfg-nodeHighlightOnDrop\" class=\"docClass\">nodeHighlightOnDrop</a>.</p>\n"},"sortOnDrop":{"!type":"bool","!doc":"<p>Configure as <code>true</code> to sort the target node into the current tree sort order after the dropped node is added.</p>\n"},"destroy":{"!type":"fn() -> !this","!doc":"<p>AbstractComponent calls destroy on all its plugins at destroy time.</p>\n"},"init":{"!type":"fn(view: ?) -> !this","!doc":"<p>The init method is invoked after initComponent method has been run for the client Component.</p>\n\n<p>The supplied implementation is empty. Subclasses should perform plugin initialization, and set up bidirectional\nlinks between the plugin and its client Component in their own implementation of this method.</p>\n"},"onViewRender":{"!type":"fn(view: ?) -> !this"},"beforedrop":{"!type":"fn(node: +HTMLElement, data: ?, overModel: +Ext.data.Model, dropPosition: string, dropHandlers: ?, eOpts: ?)","!doc":"<p><strong>This event is fired through the TreeView. Add listeners to the TreeView object</strong></p>\n\n<p>Fired when a drop gesture has been triggered by a mouseup event in a valid drop position in the TreeView.</p>\n\n<p>Returning <code>false</code> to this event signals that the drop gesture was invalid, and if the drag proxy will animate\nback to the point from which the drag began.</p>\n\n<p>The dropHandlers parameter can be used to defer the processing of this event. For example to wait for the result of\na message box confirmation or an asynchronous server call. See the details of this property for more information.</p>\n\n<pre class='inline-example '><code>view.on('beforedrop', function(node, data, overModel, dropPosition, dropHandlers) {\n    // Defer the handling\n    dropHandlers.wait = true;\n    <a href=\"#!/api/Ext.MessageBox-method-confirm\" rel=\"Ext.MessageBox-method-confirm\" class=\"docClass\">Ext.MessageBox.confirm</a>('Drop', 'Are you sure', function(btn){\n        if (btn === 'yes') {\n            dropHandlers.processDrop();\n        } else {\n            dropHandlers.cancelDrop();\n        }\n    });\n});\n</code></pre>\n\n<p>Any other return value continues with the data transfer operation, unless the wait property is set.</p>\n"},"drop":{"!type":"fn(node: +HTMLElement, data: ?, overModel: +Ext.data.Model, dropPosition: string, eOpts: ?)","!doc":"<p><strong>This event is fired through the TreeView. Add listeners to the TreeView object</strong> Fired when a drop operation\nhas been completed and the data has been moved or copied.</p>\n"}}}}},"view":{"AbstractView":{"!doc":"<p>This is an abstract superclass and should not be used directly. Please see <a href=\"#!/api/Ext.view.View\" rel=\"Ext.view.View\" class=\"docClass\">Ext.view.View</a>.</p>\n","!type":"fn(config: +Ext.Element|string|Ext_view_AbstractView_cfg)","prototype":{"!proto":"Ext.Component.prototype","blockRefresh":{"!type":"bool","!doc":"<p>Set this to true to ignore refresh events on the bound store. This is useful if\nyou wish to provide custom transition animations via a plugin</p>\n"},"deferEmptyText":{"!type":"bool","!doc":"<p>True to defer emptyText being applied until the store's first load.</p>\n"},"deferInitialRefresh":{"!type":"bool","!doc":"<p>Defaults to <code>true</code> to defer the initial refresh of the view.</p>\n\n\n<p>This allows the View to execute its render and initial layout more quickly because the process will not be encumbered\nby the expensive update of the view structure.</p>\n\n\n<p><b>Important: </b>Be aware that this will mean that the View's item elements will not be available immediately upon render, so\n<i>selection</i> may not take place at render time. To access a View's item elements as soon as possible, use the <a href=\"#!/api/Ext.view.AbstractView-event-viewready\" rel=\"Ext.view.AbstractView-event-viewready\" class=\"docClass\">viewready</a> event.\nOr set <code>deferInitialrefresh</code> to false, but this will be at the cost of slower rendering.</p>\n\n"},"disableSelection":{"!type":"bool","!doc":"<p>True to disable selection within the DataView. This configuration will lock the selection model\nthat the DataView uses.</p>\n"},"emptyText":{"!type":"string","!doc":"<p>The text to display in the view when there is no data to display.\nNote that when using local data the emptyText will not be displayed unless you set\nthe <a href=\"#!/api/Ext.view.AbstractView-cfg-deferEmptyText\" rel=\"Ext.view.AbstractView-cfg-deferEmptyText\" class=\"docClass\">deferEmptyText</a> option to false.</p>\n"},"itemCls":{"!type":"string","!doc":"<p>Specifies the class to be assigned to each element in the view when used in conjunction with the\n<a href=\"#!/api/Ext.view.AbstractView-cfg-itemTpl\" rel=\"Ext.view.AbstractView-cfg-itemTpl\" class=\"docClass\">itemTpl</a> configuration.</p>\n"},"itemSelector":{"!type":"string","!doc":"<p><b>This is a required setting</b>. A simple CSS selector (e.g. <tt>div.some-class</tt> or\n<tt>span:first-child</tt>) that will be used to determine what nodes this DataView will be\nworking with. The itemSelector is used to map DOM nodes to records. As such, there should\nonly be one root level element that matches the selector for each record.</p>\n"},"itemTpl":{"!type":"string|[string]|+Ext.XTemplate","!doc":"<p>The inner portion of the item template to be rendered. Follows an XTemplate\nstructure and will be placed inside of a tpl.</p>\n"},"loadMask":{"!type":"bool|?","!doc":"<p>False to disable a load mask from displaying while the view is loading. This can also be a\n<a href=\"#!/api/Ext.LoadMask\" rel=\"Ext.LoadMask\" class=\"docClass\">Ext.LoadMask</a> configuration object.</p>\n"},"loadingCls":{"!type":"string","!doc":"<p>The CSS class to apply to the loading message element. Defaults to Ext.LoadMask.prototype.msgCls \"x-mask-loading\".</p>\n"},"loadingHeight":{"!type":"number","!doc":"<p>If specified, gives an explicit height for the data view when it is showing the <a href=\"#!/api/Ext.view.AbstractView-cfg-loadingText\" rel=\"Ext.view.AbstractView-cfg-loadingText\" class=\"docClass\">loadingText</a>,\nif that is specified. This is useful to prevent the view's height from collapsing to zero when the\nloading mask is applied and there are no other contents in the data view.</p>\n"},"loadingText":{"!type":"string","!doc":"<p>A string to display during data load operations.  If specified, this text will be\ndisplayed in a loading div and the view's contents will be cleared while loading, otherwise the view's\ncontents will continue to display normally until the new data is loaded and the contents are replaced.</p>\n"},"loadingUseMsg":{"!type":"bool","!doc":"<p>Whether or not to use the loading message.</p>\n"},"multiSelect":{"!type":"bool","!doc":"<p>True to allow selection of more than one item at a time, false to allow selection of only a single item\nat a time or no selection at all, depending on the value of <a href=\"#!/api/Ext.view.AbstractView-cfg-singleSelect\" rel=\"Ext.view.AbstractView-cfg-singleSelect\" class=\"docClass\">singleSelect</a>.</p>\n"},"overItemCls":{"!type":"string","!doc":"<p>A CSS class to apply to each item in the view on mouseover.\nSetting this will automatically set <a href=\"#!/api/Ext.view.AbstractView-cfg-trackOver\" rel=\"Ext.view.AbstractView-cfg-trackOver\" class=\"docClass\">trackOver</a> to <code>true</code>.</p>\n"},"preserveScrollOnRefresh":{"!type":"bool","!doc":"<p>True to preserve scroll position across refresh operations.</p>\n"},"selectedItemCls":{"!type":"string","!doc":"<p>A CSS class to apply to each selected item in the view.</p>\n"},"simpleSelect":{"!type":"bool","!doc":"<p>True to enable multiselection by clicking on multiple items without requiring the user to hold Shift or Ctrl,\nfalse to force the user to hold Ctrl or Shift to select more than on item.</p>\n"},"singleSelect":{"!type":"bool","!doc":"<p>Allows selection of exactly one item at a time. As this is the default selection mode anyway, this config\nis completely ignored.</p>\n"},"store":{"!type":"+Ext.data.Store","!doc":"<p>The <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a> to bind this DataView to.</p>\n"},"tpl":{"!type":"string|[string]|+Ext.XTemplate","!doc":"<p>The HTML fragment or an array of fragments that will make up the template used by this DataView.  This should\nbe specified in the same format expected by the constructor of <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">Ext.XTemplate</a>.</p>\n"},"trackOver":{"!type":"bool","!doc":"<p>When <code>true</code> the <a href=\"#!/api/Ext.view.AbstractView-cfg-overItemCls\" rel=\"Ext.view.AbstractView-cfg-overItemCls\" class=\"docClass\">overItemCls</a> will be applied to rows when hovered over.\nThis in return will also cause <a href=\"#!/api/Ext.view.View-event-highlightitem\" rel=\"Ext.view.View-event-highlightitem\" class=\"docClass\">highlightitem</a> and\n<a href=\"#!/api/Ext.view.View-event-unhighlightitem\" rel=\"Ext.view.View-event-unhighlightitem\" class=\"docClass\">unhighlightitem</a> events to be fired.</p>\n\n<p>Enabled automatically when the <a href=\"#!/api/Ext.view.AbstractView-cfg-overItemCls\" rel=\"Ext.view.AbstractView-cfg-overItemCls\" class=\"docClass\">overItemCls</a> config is set.</p>\n"},"last":{"!type":"bool","!doc":"<p>private</p>\n"},"triggerCtEvent":{"!type":"string"},"triggerEvent":{"!type":"string"},"addCmpEvents":{"!type":"fn() -> !this"},"afterRender":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior after rendering is complete. At this stage the Component’s Element\nwill have been styled according to the configuration, will have had any configured CSS class\nnames added, and will be in the configured visibility and the configured enable state.</p>\n"},"applyFirstRefresh":{"!type":"fn() -> !this"},"beforeRender":{"!type":"fn() -> !this"},"bindStore":{"!type":"fn(store: +Ext.data.Store) -> !this","!doc":"<p>Changes the data store bound to this view and refreshes it.</p>\n"},"bufferRender":{"!type":"fn(records: ?, index: ?) -> !this","!doc":"<p>private</p>\n"},"clearSelections":{"!type":"fn() -> !this","!doc":"<p>Deselects all selected records.</p>\n"},"clearViewEl":{"!type":"fn() -> !this"},"collectData":{"!type":"fn(records: [+Ext.data.Model], startIndex: number) -> [?]","!doc":"<p>Function which can be overridden which returns the data object passed to this\nDataView's <a href=\"#!/api/Ext.view.AbstractView-cfg-tpl\" rel=\"Ext.view.AbstractView-cfg-tpl\" class=\"docClass\">template</a> to render the whole DataView.</p>\n\n<p>This is usually an Array of data objects, each element of which is processed by an\n<a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> which uses <code>'&amp;lt;tpl for=\".\"&amp;gt;'</code> to iterate over its supplied\ndata object as an Array. However, <i>named</i> properties may be placed into the data object to\nprovide non-repeating data such as headings, totals etc.</p>\n"},"collectNodes":{"!type":"fn(targetEl: ?) -> !this","!doc":"<p>Private\nCalled by refresh to collect the view item nodes.</p>\n"},"deselect":{"!type":"fn(records: [+Ext.data.Model]|number, suppressEvent: bool) -> !this","!doc":"<p>Deselects a record instance by record instance or index.</p>\n"},"doAdd":{"!type":"fn(records: ?, index: ?) -> !this"},"doFirstRefresh":{"!type":"fn(store: ?) -> !this","!doc":"<p>Perform the first refresh of the View from a newly bound store.</p>\n\n<p>This is called when this View has been sized for the first time.</p>\n"},"doRemove":{"!type":"fn(record: ?, index: ?) -> !this","!doc":"<p>private</p>\n"},"findItemByChild":{"!type":"fn(node: +HTMLElement) -> +HTMLElement","!doc":"<p>Returns the template node the passed child belongs to, or null if it doesn't belong to one.</p>\n"},"findTargetByEvent":{"!type":"fn(e: +Ext.EventObject) -> !this","!doc":"<p>Returns the template node by the <a href=\"#!/api/Ext.EventObject\" rel=\"Ext.EventObject\" class=\"docClass\">Ext.EventObject</a> or null if it is not found.</p>\n"},"finishRender":{"!type":"fn(containerIdx: number) -> !this","!doc":"<p>This method visits the rendered component tree in a \"top-down\" order. That is, this\ncode runs on a parent component before running on a child. This method calls the\n<a href=\"#!/api/Ext.view.AbstractView-method-onRender\" rel=\"Ext.view.AbstractView-method-onRender\" class=\"docClass\">onRender</a> method of each component.</p>\n"},"getItemSelector":{"!type":"fn() -> !this"},"getMaskStore":{"!type":"fn() -> !this"},"getNode":{"!type":"fn(nodeInfo: +HTMLElement|string|number|+Ext.data.Model) -> +HTMLElement","!doc":"<p>Gets a template node.</p>\n"},"getNodeByRecord":{"!type":"fn(record: ?) -> !this"},"getNodeContainer":{"!type":"fn() -> !this"},"getNodes":{"!type":"fn(start?: number, end?: number) -> [+HTMLElement]","!doc":"<p>Gets a range nodes.</p>\n"},"getRecord":{"!type":"fn(node: +Ext.Element|+HTMLElement) -> +Ext.data.Model","!doc":"<p>Gets a record from a node</p>\n"},"getRecords":{"!type":"fn(nodes: [+HTMLElement]) -> [+Ext.data.Model]","!doc":"<p>Gets an array of the records from an array of nodes</p>\n"},"getSelectedNodes":{"!type":"fn() -> [+HTMLElement]","!doc":"<p>Gets the currently selected nodes.</p>\n"},"getSelectedRecords":{"!type":"fn() -> [+Ext.data.Model]","!doc":"<p>Gets an array of the selected records</p>\n"},"getSelectionCount":{"!type":"fn() -> number","!doc":"<p>Gets the number of selected nodes.</p>\n"},"getSelectionModel":{"!type":"fn() -> +Ext.selection.Model","!doc":"<p>Gets the selection model for this view.</p>\n"},"getStore":{"!type":"fn() -> +Ext.data.Store","!doc":"<p>Returns the store associated with this DataView.</p>\n"},"getStoreListeners":{"!type":"fn() -> ?","!doc":"<p>Gets the listeners to bind to a new store.</p>\n"},"getViewRange":{"!type":"fn() -> !this"},"indexOf":{"!type":"fn(nodeInfo: +HTMLElement|string|number|+Ext.data.Model) -> number","!doc":"<p>Finds the index of the passed node.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"isSelected":{"!type":"fn(node: +HTMLElement|number|+Ext.data.Model) -> bool","!doc":"<p>Returns true if the passed node is selected, else false.</p>\n"},"onAdd":{"!type":"fn(store: ?, records: ?, index: ?) -> !this","!doc":"<p>private</p>\n"},"onBindStore":{"!type":"fn(store: ?, initial: ?, propName: ?) -> !this","!doc":"<p>Template method, it is called when a new store is bound\nto the current instance.</p>\n"},"onBoxReady":{"!type":"fn() -> !this"},"onDataRefresh":{"!type":"fn() -> !this","!doc":"<p>Calls this.refresh if this.blockRefresh is not true</p>\n"},"onDestroy":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the destroy operation.\nAfter calling the superclass's onDestroy, the Component will be destroyed.</p>\n"},"onIdChanged":{"!type":"fn() -> !this"},"onItemDeselect":{"!type":"fn(record: ?) -> !this","!doc":"<p>invoked by the selection model to maintain visual UI cues</p>\n"},"onItemSelect":{"!type":"fn(record: ?) -> !this","!doc":"<p>invoked by the selection model to maintain visual UI cues</p>\n"},"onMaskBeforeShow":{"!type":"fn() -> !this"},"onMaskHide":{"!type":"fn() -> !this"},"onRemove":{"!type":"fn(ds: ?, records: ?, indexes: ?) -> !this","!doc":"<p>private</p>\n"},"onRender":{"!type":"fn() -> !this","!doc":"<p>Template method called when this Component's DOM structure is created.</p>\n\n<p>At this point, this Component's (and all descendants') DOM structure <em>exists</em> but it has not\nbeen layed out (positioned and sized).</p>\n\n<p>Subclasses which override this to gain access to the structure at render time should\ncall the parent class's method before attempting to access any child elements of the Component.</p>\n"},"onUnbindStore":{"!type":"fn(store: ?) -> !this","!doc":"<p>Template method, it is called when an existing store is unbound\nfrom the current instance.</p>\n"},"onUpdate":{"!type":"fn(ds: ?, record: ?) -> !this","!doc":"<p>private</p>\n"},"onViewScroll":{"!type":"fn() -> !this","!doc":"<p>Private template method to be overridden in subclasses.</p>\n"},"prepareData":{"!type":"fn(data: ?|[?], recordIndex: number, record: +Ext.data.Model) -> [?]|?","!doc":"<p>Function which can be overridden to provide custom formatting for each Record that is used by this\nDataView's <a href=\"#!/api/Ext.view.AbstractView-cfg-tpl\" rel=\"Ext.view.AbstractView-cfg-tpl\" class=\"docClass\">template</a> to render each node.</p>\n"},"refresh":{"!type":"fn(this: +Ext.view.View, eOpts: ?)","!doc":"<p>Fires when the view is refreshed</p>\n"},"refreshNode":{"!type":"fn(index: number) -> !this","!doc":"<p>Refreshes an individual node's data from the store.</p>\n"},"refreshSize":{"!type":"fn() -> !this","!doc":"<p>Called by the framework when the view is refreshed, or when rows are added or deleted.</p>\n\n<p>These operations may cause the view's dimensions to change, and if the owning container\nis shrinkwrapping this view, then the layout must be updated to accommodate these new dimensions.</p>\n"},"refreshView":{"!type":"fn() -> !this"},"restoreScrollState":{"!type":"fn() -> !this","!doc":"<p>Restores the scrollState.\nMust be used in conjunction with saveScrollState</p>\n"},"saveScrollState":{"!type":"fn() -> !this","!doc":"<p>Saves the scrollState in a private variable. Must be used in conjunction with restoreScrollState.</p>\n"},"select":{"!type":"fn(records: [+Ext.data.Model]|number, keepExisting: bool, suppressEvent: bool) -> !this","!doc":"<p>Selects a record instance by record instance or index.</p>\n"},"setMaskBind":{"!type":"fn(store: ?) -> !this"},"updateIndexes":{"!type":"fn(startIndex: ?, endIndex: ?) -> !this","!doc":"<p>private</p>\n"},"beforerefresh":{"!type":"fn(this: +Ext.view.View, eOpts: ?)","!doc":"<p>Fires before the view is refreshed</p>\n"},"itemadd":{"!type":"fn(records: [+Ext.data.Model], index: number, node: [+HTMLElement], eOpts: ?)","!doc":"<p>Fires when the nodes associated with an recordset have been added to the underlying store</p>\n"},"itemremove":{"!type":"fn(record: +Ext.data.Model, index: number, eOpts: ?)","!doc":"<p>Fires when the node associated with an individual record is removed</p>\n"},"itemupdate":{"!type":"fn(record: +Ext.data.Model, index: number, node: +HTMLElement, eOpts: ?)","!doc":"<p>Fires when the node associated with an individual record is updated</p>\n"},"viewready":{"!type":"fn(this: +Ext.view.View, eOpts: ?)","!doc":"<p>Fires when the View's item elements representing Store items has been rendered. If the <a href=\"#!/api/Ext.view.AbstractView-cfg-deferInitialRefresh\" rel=\"Ext.view.AbstractView-cfg-deferInitialRefresh\" class=\"docClass\">deferInitialRefresh</a> flag\nwas set (and it is <code>true</code> by default), this will be <b>after</b> initial render, and no items will be available\nfor selection until this event fires.</p>\n"}},"getBoundView":{"!type":"fn(node: ?) -> !this"},"getRecord":{"!type":"fn(node: ?) -> !this"}},"BoundList":{"!doc":"<p>An internally used DataView for <a href=\"#!/api/Ext.form.field.ComboBox\" rel=\"Ext.form.field.ComboBox\" class=\"docClass\">ComboBox</a>.</p>\n","!type":"fn(config: +Ext.Element|string|Ext_view_BoundList_cfg)","prototype":{"!proto":"Ext.view.View.prototype","baseCls":{"!type":"string","!doc":"<p>private overrides</p>\n"},"componentLayout":{"!type":"string|?","!doc":"<p>The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout\nmanager which sizes a Component's internal structure in response to the Component being sized.</p>\n\n<p>Generally, developers will not use this configuration as all provided Components which need their internal\nelements sizing (Such as <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">input fields</a>) come with their own componentLayout managers.</p>\n\n<p>The <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used on instances of the base <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\nclass which simply sizes the Component's encapsulating element to the height and width specified in the\n<a href=\"#!/api/Ext.view.BoundList-method-setSize\" rel=\"Ext.view.BoundList-method-setSize\" class=\"docClass\">setSize</a> method.</p>\n"},"deferInitialRefresh":{"!type":"bool","!doc":"<p>This Component is used as a popup, not part of a complex layout. Display data immediately.</p>\n"},"displayField":{"!type":"string","!doc":"<p>The field from the store to show in the view.</p>\n"},"itemCls":{"!type":"string","!doc":"<p>Specifies the class to be assigned to each element in the view when used in conjunction with the\n<a href=\"#!/api/Ext.view.BoundList-cfg-itemTpl\" rel=\"Ext.view.BoundList-cfg-itemTpl\" class=\"docClass\">itemTpl</a> configuration.</p>\n"},"pageSize":{"!type":"number","!doc":"<p>If greater than <code>0</code>, a <a href=\"#!/api/Ext.toolbar.Paging\" rel=\"Ext.toolbar.Paging\" class=\"docClass\">Ext.toolbar.Paging</a> is displayed at the bottom of the list and store\nqueries will execute with page <a href=\"#!/api/Ext.data.Operation-cfg-start\" rel=\"Ext.data.Operation-cfg-start\" class=\"docClass\">start</a> and\n<a href=\"#!/api/Ext.data.Operation-cfg-limit\" rel=\"Ext.data.Operation-cfg-limit\" class=\"docClass\">limit</a> parameters.</p>\n"},"renderTpl":{"!type":"+Ext.XTemplate|string|[string]","!doc":"<p>An <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> used to create the internal structure inside this Component's encapsulating\n<a href=\"#!/api/Ext.view.BoundList-method-getEl\" rel=\"Ext.view.BoundList-method-getEl\" class=\"docClass\">Element</a>.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong><code>null</code></strong> which means that they will be initially rendered\nwith no internal structure; they render their <a href=\"#!/api/Ext.view.BoundList-method-getEl\" rel=\"Ext.view.BoundList-method-getEl\" class=\"docClass\">Element</a> empty. The more specialized Ext JS and Sencha Touch\nclasses which use a more complex DOM structure, provide their own template definitions.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components with customized\ninternal structure.</p>\n\n<p>Upon rendering, any created child elements may be automatically imported into object properties using the\n<a href=\"#!/api/Ext.view.BoundList-cfg-renderSelectors\" rel=\"Ext.view.BoundList-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a> and <a href=\"#!/api/Ext.view.BoundList-cfg-childEls\" rel=\"Ext.view.BoundList-cfg-childEls\" class=\"docClass\">childEls</a> options.</p>\n"},"shadow":{"!type":"string|bool","!doc":"<p>Specifies whether the floating component should be given a shadow. Set to true to automatically create an\n<a href=\"#!/api/Ext.Shadow\" rel=\"Ext.Shadow\" class=\"docClass\">Ext.Shadow</a>, or a string indicating the shadow's display <a href=\"#!/api/Ext.Shadow-cfg-mode\" rel=\"Ext.Shadow-cfg-mode\" class=\"docClass\">Ext.Shadow.mode</a>. Set to false to\ndisable the shadow.</p>\n"},"tpl":{"!type":"string|+Ext.XTemplate","!doc":"<p>A String or <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">Ext.XTemplate</a> instance to apply to inner template.</p>\n\n<p><a href=\"#!/api/Ext.view.BoundList\" rel=\"Ext.view.BoundList\" class=\"docClass\">Ext.view.BoundList</a> is used for the dropdown list of <a href=\"#!/api/Ext.form.field.ComboBox\" rel=\"Ext.form.field.ComboBox\" class=\"docClass\">Ext.form.field.ComboBox</a>.\nTo customize the template you can do this:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.form.field.ComboBox\" rel=\"Ext.form.field.ComboBox\" class=\"docClass\">Ext.form.field.ComboBox</a>', {\n    fieldLabel   : 'State',\n    queryMode    : 'local',\n    displayField : 'text',\n    valueField   : 'abbr',\n    store        : <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('StateStore', {\n        fields : ['abbr', 'text'],\n        data   : [\n            {\"abbr\":\"AL\", \"name\":\"Alabama\"},\n            {\"abbr\":\"AK\", \"name\":\"Alaska\"},\n            {\"abbr\":\"AZ\", \"name\":\"Arizona\"}\n            //...\n        ]\n    }),\n    listConfig : {\n        tpl : '&lt;tpl for=\".\"&gt;&lt;div class=\"x-boundlist-item\"&gt;{abbr}&lt;/div&gt;&lt;/tpl&gt;'\n    }\n});\n</code></pre>\n\n<p>Defaults to:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">Ext.XTemplate</a>',\n    '&lt;ul&gt;&lt;tpl for=\".\"&gt;',\n        '&lt;li role=\"option\" class=\"' + itemCls + '\"&gt;' + me.getInnerTpl(me.displayField) + '&lt;/li&gt;',\n    '&lt;/tpl&gt;&lt;/ul&gt;'\n);\n</code></pre>\n"},"trackOver":{"!type":"bool","!doc":"<p>When <code>true</code> the <a href=\"#!/api/Ext.view.BoundList-cfg-overItemCls\" rel=\"Ext.view.BoundList-cfg-overItemCls\" class=\"docClass\">overItemCls</a> will be applied to rows when hovered over.\nThis in return will also cause <a href=\"#!/api/Ext.view.View-event-highlightitem\" rel=\"Ext.view.View-event-highlightitem\" class=\"docClass\">highlightitem</a> and\n<a href=\"#!/api/Ext.view.View-event-unhighlightitem\" rel=\"Ext.view.View-event-unhighlightitem\" class=\"docClass\">unhighlightitem</a> events to be fired.</p>\n\n<p>Enabled automatically when the <a href=\"#!/api/Ext.view.BoundList-cfg-overItemCls\" rel=\"Ext.view.BoundList-cfg-overItemCls\" class=\"docClass\">overItemCls</a> config is set.</p>\n"},"childEls":{"!type":"[?]"},"listItemCls":{"!type":"string"},"pagingToolbar":{"!type":"+Ext.toolbar.Paging","!doc":"<p>A reference to the PagingToolbar instance in this view. Only populated if <a href=\"#!/api/Ext.view.BoundList-cfg-pageSize\" rel=\"Ext.view.BoundList-cfg-pageSize\" class=\"docClass\">pageSize</a> is greater\nthan zero and the BoundList has been rendered.</p>\n"},"refreshed":{"!type":"number"},"beforeRender":{"!type":"fn() -> !this"},"bindStore":{"!type":"fn(store: ?, initial: ?) -> !this","!doc":"<p>Changes the data store bound to this view and refreshes it.</p>\n"},"createPagingToolbar":{"!type":"fn() -> !this"},"finishRenderChildren":{"!type":"fn() -> !this","!doc":"<p>Do the job of a container layout at this point even though we are not a Container.\nTODO: Refactor as a Container.</p>\n"},"getInnerTpl":{"!type":"fn(displayField: string) -> string","!doc":"<p>A method that returns the inner template for displaying items in the list.\nThis method is useful to override when using a more complex display value, for example\ninserting an icon along with the text.</p>\n\n<p>The XTemplate is created with a reference to the owning form field in the <code>field</code> property to provide access\nto context. For example to highlight the currently typed value, the getInnerTpl may be configured into a\nComboBox as part of the <a href=\"#!/api/Ext.form.field.ComboBox-cfg-listConfig\" rel=\"Ext.form.field.ComboBox-cfg-listConfig\" class=\"docClass\">listConfig</a>:</p>\n\n<p>   listConfig: {\n       getInnerTpl: function() {\n           return '{[values.name.replace(this.field.getRawValue(), \"<b>\" + this.field.getRawValue() + \"</b>\")]}';\n       }\n   }</p>\n"},"getRefItems":{"!type":"fn() -> !this"},"getRefOwner":{"!type":"fn() -> !this","!doc":"<p>Used by <a href=\"#!/api/Ext.ComponentQuery\" rel=\"Ext.ComponentQuery\" class=\"docClass\">ComponentQuery</a>, and the <a href=\"#!/api/Ext.AbstractComponent-method-up\" rel=\"Ext.AbstractComponent-method-up\" class=\"docClass\">up</a> method to find the\nowning Component in the linkage hierarchy.</p>\n\n<p>By default this returns the Container which contains this Component.</p>\n\n<p>This may be overriden by Component authors who implement ownership hierarchies which are not\nbased upon ownerCt, such as BoundLists being owned by Fields or Menus being owned by Buttons.</p>\n"},"getTargetEl":{"!type":"fn() -> !this","!doc":"<p>This is used to determine where to insert the 'html', 'contentEl' and 'items' in this component.</p>\n"},"onDestroy":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the destroy operation.\nAfter calling the superclass's onDestroy, the Component will be destroyed.</p>\n"},"refresh":{"!type":"fn() -> !this","!doc":"<p>Refreshes the view by reloading the data from the store and re-rendering the template.</p>\n"}}},"BoundListKeyNav":{"!doc":"<p>A specialized <a href=\"#!/api/Ext.util.KeyNav\" rel=\"Ext.util.KeyNav\" class=\"docClass\">Ext.util.KeyNav</a> implementation for navigating a <a href=\"#!/api/Ext.view.BoundList\" rel=\"Ext.view.BoundList\" class=\"docClass\">Ext.view.BoundList</a> using\nthe keyboard. The up, down, pageup, pagedown, home, and end keys move the active highlight\nthrough the list. The enter key invokes the selection model's select action using the highlighted item.</p>\n","!type":"fn(config: Ext_view_BoundListKeyNav_cfg)","prototype":{"!proto":"Ext.util.KeyNav.prototype","boundList":{"!type":"+Ext.view.BoundList","!doc":"<p>The <a href=\"#!/api/Ext.view.BoundList\" rel=\"Ext.view.BoundList\" class=\"docClass\">Ext.view.BoundList</a> instance for which key navigation will be managed.</p>\n"},"defaultHandlers":{"!type":"?"},"highlightAt":{"!type":"fn(index: number) -> !this","!doc":"<p>Highlights the item at the given index.</p>\n"},"selectHighlighted":{"!type":"fn(e: ?) -> !this","!doc":"<p>Triggers selection of the currently highlighted item according to the behavior of\nthe configured SelectionModel.</p>\n"}}},"DragZone":{"!type":"fn(config: Ext_view_DragZone_cfg)","prototype":{"!proto":"Ext.dd.DragZone.prototype","containerScroll":{"!type":"?|bool","!doc":"<p>True to register this container with the Scrollmanager for auto scrolling during drag operations.\nA <a href=\"#!/api/Ext.dd.ScrollManager\" rel=\"Ext.dd.ScrollManager\" class=\"docClass\">Ext.dd.ScrollManager</a> configuration may also be passed.</p>\n"},"getDragData":{"!type":"fn(e: ?) -> ?","!doc":"<p>Called when a mousedown occurs in this container. Looks in <a href=\"#!/api/Ext.dd.Registry\" rel=\"Ext.dd.Registry\" class=\"docClass\">Ext.dd.Registry</a> for a valid target to drag\nbased on the mouse down. Override this method to provide your own lookup logic (e.g. finding a child by class\nname). Make sure your returned object has a \"ddel\" attribute (with an HTML Element) for other functions to work.</p>\n"},"getDragText":{"!type":"fn() -> !this"},"getRepairXY":{"!type":"fn(e: ?, data: ?) -> [number]","!doc":"<p>Called before a repair of an invalid drop to get the XY to animate to. By default returns the XY of\nthis.dragData.ddel</p>\n"},"init":{"!type":"fn(id: ?, sGroup: ?, config: ?) -> !this","!doc":"<p>Sets up the DragDrop object.  Must be called in the constructor of any\n<a href=\"#!/api/Ext.dd.DragDrop\" rel=\"Ext.dd.DragDrop\" class=\"docClass\">Ext.dd.DragDrop</a> subclass</p>\n"},"isPreventDrag":{"!type":"fn(e: ?) -> !this","!doc":"<p>private template method</p>\n"},"onInitDrag":{"!type":"fn(x: ?, y: ?) -> bool","!doc":"<p>Called once drag threshold has been reached to initialize the proxy element. By default, it clones the\nthis.dragData.ddel</p>\n"},"onItemMouseDown":{"!type":"fn(view: ?, record: ?, item: ?, index: ?, e: ?) -> !this"},"onValidDrop":{"!type":"fn(target: ?, e: ?, id: ?) -> !this"}}},"DropZone":{"!type":"fn(config: Ext_view_DropZone_cfg)","prototype":{"!proto":"Ext.dd.DropZone.prototype","indicatorCls":{"!type":"string"},"indicatorHtml":{"!type":"string"},"containsRecordAtOffset":{"!type":"fn(records: ?, record: ?, offset: ?) -> bool","!doc":"<p>Determines whether the record at the specified offset from the passed record\nis in the drag payload.</p>\n"},"destroy":{"!type":"fn() -> !this","!doc":"<p>Destroy this DragDrop instance</p>\n"},"fireViewEvent":{"!type":"fn() -> !this","!doc":"<p>Fire an event through the client DataView. Lock this DropZone during the event processing so that\nits data does not become corrupted by processing mouse events.</p>\n"},"getIndicator":{"!type":"fn() -> !this"},"getPosition":{"!type":"fn(e: ?, node: ?) -> !this"},"getTargetFromEvent":{"!type":"fn(e: ?) -> ?","!doc":"<p>Returns a custom data object associated with the DOM node that is the target of the event.  By default\nthis looks up the event target in the <a href=\"#!/api/Ext.dd.Registry\" rel=\"Ext.dd.Registry\" class=\"docClass\">Ext.dd.Registry</a>, although you can override this method to\nprovide your own custom lookup.</p>\n"},"invalidateDrop":{"!type":"fn() -> !this"},"notifyOut":{"!type":"fn(node: ?, dragZone: ?, e: ?, data: ?) -> !this","!doc":"<p>Moved out of the DropZone without dropping.\nRemove drop position indicator</p>\n"},"onContainerDrop":{"!type":"fn(dd: ?, e: ?, data: ?) -> bool","!doc":"<p>Called when the DropZone determines that a <a href=\"#!/api/Ext.dd.DragSource\" rel=\"Ext.dd.DragSource\" class=\"docClass\">Ext.dd.DragSource</a> has been dropped on it,\nbut not on any of its registered drop nodes.  The default implementation returns false, so it should be\noverridden to provide the appropriate processing of the drop event if you need the drop zone itself to\nbe able to accept drops.  It should return true when valid so that the drag source's repair action does not run.</p>\n"},"onContainerOver":{"!type":"fn(dd: ?, e: ?, data: ?) -> string","!doc":"<p>The mouse is past the end of all nodes (or there are no nodes)</p>\n"},"onNodeDrop":{"!type":"fn(targetNode: ?, dragZone: ?, e: ?, data: ?) -> bool","!doc":"<p>Called when the DropZone determines that a <a href=\"#!/api/Ext.dd.DragSource\" rel=\"Ext.dd.DragSource\" class=\"docClass\">Ext.dd.DragSource</a> has been dropped onto\nthe drop node.  The default implementation returns false, so it should be overridden to provide the\nappropriate processing of the drop event and return true so that the drag source's repair action does not run.</p>\n"},"onNodeOver":{"!type":"fn(node: ?, dragZone: ?, e: ?, data: ?) -> string","!doc":"<p>The mouse is over a View node</p>\n"},"positionIndicator":{"!type":"fn(node: ?, data: ?, e: ?) -> !this"}}},"NodeCache":{"!doc":"<p>A cache of View elements keyed using the index of the associated record in the store.</p>\n\n<p>This implements the methods of {<a href=\"#!/api/Ext.dom.CompositeElement\" rel=\"Ext.dom.CompositeElement\" class=\"docClass\">Ext.dom.CompositeElement</a>} which are used by <a href=\"#!/api/Ext.view.AbstractView\" rel=\"Ext.view.AbstractView\" class=\"docClass\">Ext.view.AbstractView</a>\nto privide a map of record nodes and methods to manipulate the nodes.</p>\n","!type":"fn(view: ?)","prototype":{"!proto":"Ext.Base.prototype","clear":{"!type":"fn(removeDom?: bool) -> !this","!doc":"<p>Removes all elements from this NodeCache.</p>\n"},"fill":{"!type":"fn(els: [+HTMLElement]) -> +Ext.view.NodeCache","!doc":"<p>Clears this NodeCache and adds the elements passed.</p>\n"},"first":{"!type":"fn(asDom: ?) -> !this"},"getCount":{"!type":"fn() -> !this"},"indexOf":{"!type":"fn(el: string|+HTMLElement|+Ext.Element|number) -> number","!doc":"<p>Find the index of the passed element within the composite collection.</p>\n"},"insert":{"!type":"fn(insertPoint: ?, nodes: ?) -> !this"},"item":{"!type":"fn(index: ?, asDom: ?) -> !this"},"last":{"!type":"fn(asDom: ?) -> !this"},"removeElement":{"!type":"fn(el: string|+HTMLElement|+Ext.Element|number, removeDom?: bool) -> !this","!doc":"<p>Removes the specified element(s).</p>\n"},"removeRange":{"!type":"fn(start: ?, end: ?, removeDom: ?) -> !this"},"replaceElement":{"!type":"fn(el: string|+HTMLElement|+Ext.Element|number, replacement: string|+Ext.Element, domReplace?: bool) -> +Ext.view.NodeCache","!doc":"<p>Replaces the specified element with the passed element.</p>\n"},"scroll":{"!type":"fn(newRecords: [+Ext.data.Model], direction: number, removeCount: number) -> !this","!doc":"<p>Appends/prepends records depending on direction flag</p>\n"},"slice":{"!type":"fn(start: ?, end: ?) -> !this"}}},"Table":{"!doc":"<p>This class encapsulates the user interface for a tabular data set.\nIt acts as a centralized manager for controlling the various interface\nelements of the view. This includes handling events, such as row and cell\nlevel based DOM events. It also reacts to events from the underlying <a href=\"#!/api/Ext.selection.Model\" rel=\"Ext.selection.Model\" class=\"docClass\">Ext.selection.Model</a>\nto provide visual feedback to the user.</p>\n\n<p>This class does not provide ways to manipulate the underlying data of the configured\n<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>.</p>\n\n<p>This is the base class for both <a href=\"#!/api/Ext.grid.View\" rel=\"Ext.grid.View\" class=\"docClass\">Ext.grid.View</a> and <a href=\"#!/api/Ext.tree.View\" rel=\"Ext.tree.View\" class=\"docClass\">Ext.tree.View</a> and is not\nto be used directly.</p>\n\n<p><strong>From override Ext.grid.plugin.BufferedRendererTableView:</strong> A set of overrides required by the presence of the BufferedRenderer plugin.</p>\n\n<p>These overrides of <a href=\"#!/api/Ext.view.Table\" rel=\"Ext.view.Table\" class=\"docClass\">Ext.view.Table</a> take into account the affect of a buffered renderer and\ndivert execution from the default course where necessary.</p>\n","!type":"fn(config: Ext_view_Table_cfg)","prototype":{"!proto":"Ext.view.View.prototype","baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this component's element. This will also be prepended to elements within this\ncomponent like Panel's body will get a class <code>x-panel-body</code>. This means that if you create a subclass of Panel, and\nyou want it to get all the Panels styling for the element and the body, you leave the <code>baseCls</code> <code>x-panel</code> and use\n<code>componentCls</code> to add specific styling for this component.</p>\n"},"componentLayout":{"!type":"string|?","!doc":"<p>The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout\nmanager which sizes a Component's internal structure in response to the Component being sized.</p>\n\n<p>Generally, developers will not use this configuration as all provided Components which need their internal\nelements sizing (Such as <a href=\"#!/api/Ext.form.field.Base\" rel=\"Ext.form.field.Base\" class=\"docClass\">input fields</a>) come with their own componentLayout managers.</p>\n\n<p>The <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used on instances of the base <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>\nclass which simply sizes the Component's encapsulating element to the height and width specified in the\n<a href=\"#!/api/Ext.view.Table-method-setSize\" rel=\"Ext.view.Table-method-setSize\" class=\"docClass\">setSize</a> method.</p>\n"},"enableTextSelection":{"!type":"bool","!doc":"<p>True to enable text selections.</p>\n"},"firstCls":{"!type":"string","!doc":"<p>A CSS class to add to the <em>first</em> cell in every row to enable special styling for the first column.\nIf no styling is needed on the first column, this may be configured as <code>null</code>.</p>\n"},"itemSelector":{"!type":"string","!doc":"<p>view item (may be a wrapper)</p>\n"},"lastCls":{"!type":"string","!doc":"<p>A CSS class to add to the <em>last</em> cell in every row to enable special styling for the last column.\nIf no styling is needed on the last column, this may be configured as <code>null</code>.</p>\n"},"markDirty":{"!type":"bool","!doc":"<p>True to show the dirty cell indicator when a cell has been modified.</p>\n"},"overItemCls":{"!type":"string","!doc":"<p>A CSS class to apply to each item in the view on mouseover.\nSetting this will automatically set <a href=\"#!/api/Ext.view.Table-cfg-trackOver\" rel=\"Ext.view.Table-cfg-trackOver\" class=\"docClass\">trackOver</a> to <code>true</code>.</p>\n"},"selectedItemCls":{"!type":"string","!doc":"<p>A CSS class to apply to each selected item in the view.</p>\n"},"stripeRows":{"!type":"bool","!doc":"<p>True to stripe the rows.</p>\n\n<p>This causes the CSS class <strong><code>x-grid-row-alt</code></strong> to be added to alternate rows of\nthe grid. A default CSS rule is provided which sets a background color, but you can override this\nwith a rule which either overrides the <strong>background-color</strong> style using the <code>!important</code>\nmodifier, or which uses a CSS selector of higher specificity.</p>\n"},"trackOver":{"!type":"bool","!doc":"<p>cfg docs inherited</p>\n"},"altRowCls":{"!type":"string"},"beforeFocusedItemCls":{"!type":"string"},"beforeOverItemCls":{"!type":"string"},"beforeSelectedItemCls":{"!type":"string"},"body":{"!type":"+Ext.dom.AbstractElement.Fly","!doc":"<p>A flyweight <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a> which encapsulates a reference to the view's main row containing element.\n<em>Note that the <code>dom</code> reference will not be present until the first data refresh</em></p>\n"},"bodySelector":{"!type":"string","!doc":"<p>Outer table</p>\n"},"cellRe":{"!type":"?"},"cellSelector":{"!type":"string","!doc":"<p>cell</p>\n"},"cellTpl":{"!type":"[?]"},"cellValues":{"!type":"?"},"dataRowSelector":{"!type":"string","!doc":"<p>row which contains cells as opposed to wrapping rows</p>\n"},"dirtyCls":{"!type":"string"},"focusedItemCls":{"!type":"string"},"headerRowSelector":{"!type":"string"},"innerSelector":{"!type":"string"},"nodeContainerSelector":{"!type":"string","!doc":"<p>Element which contains rows</p>\n"},"positionBody":{"!type":"bool"},"refreshSelmodelOnRefresh":{"!type":"bool","!doc":"<p>Flag to disable refreshing SelectionModel on view refresh. Table views render rows with selected CSS class already added if necessary.</p>\n"},"renderBuffer":{"!type":"?","!doc":"<p>/ Private used for buffered rendering</p>\n"},"rowClsRe":{"!type":"?"},"rowTpl":{"!type":"[?]"},"rowValues":{"!type":"?","!doc":"<p>Private properties used during the row and cell render process.\nThey are allocated here on the prototype, and cleared/re-used to avoid GC churn during repeated rendering.</p>\n"},"selectedCellCls":{"!type":"string"},"sizerSelector":{"!type":"string","!doc":"<p><code>&lt;column sizer&gt;</code></p>\n"},"tableFocusedFirstCls":{"!type":"string"},"tableOverFirstCls":{"!type":"string"},"tableSelectedFirstCls":{"!type":"string"},"tableTpl":{"!type":"[?]"},"tableValues":{"!type":"?"},"tpl":{"!type":"string","!doc":"<p>Simple initial tpl for TableView just to satisfy the validation within AbstractView.initComponent.</p>\n"},"addCellTpl":{"!type":"fn(newTpl: ?) -> !this"},"addElListener":{"!type":"fn(eventName: ?, fn: ?, scope: ?) -> !this","!doc":"<p>Add a listener to the main view element. It will be destroyed with the view.</p>\n"},"addFooterFn":{"!type":"fn(fn: ?) -> !this"},"addHeaderFn":{"!type":"fn() -> !this","!doc":"<p>Currently, we don't have ordering support for header/footer functions,\nthey will be pushed on at construction time. If the need does arise,\nwe can add this functionality in the future, but for now it's not\nreally necessary since currently only the summary feature uses this.</p>\n"},"addRowCls":{"!type":"fn(rowInfo: +HTMLElement|string|number|+Ext.data.Model, cls: string) -> !this","!doc":"<p>Adds a CSS Class to a specific row.</p>\n"},"addRowTpl":{"!type":"fn(newTpl: ?) -> !this"},"addTableTpl":{"!type":"fn(newTpl: ?) -> !this"},"addTpl":{"!type":"fn(which: ?, newTpl: ?) -> !this"},"autoSizeColumn":{"!type":"fn(header: +Ext.grid.column.Column|number) -> !this","!doc":"<p>Sizes the passed header to fit the max content width.\n<em>Note that group columns shrinkwrap around the size of leaf columns. Auto sizing a group column\nautosizes descendant leaf columns.</em></p>\n"},"beforeDestroy":{"!type":"fn() -> !this","!doc":"<p>Invoked before the Component is destroyed.</p>\n"},"beforeRender":{"!type":"fn() -> !this"},"bufferRender":{"!type":"fn(records: ?, index: ?) -> !this","!doc":"<p>private\nOverride so that we can use a quicker way to access the row nodes.\nThey are simply all child nodes of the TBODY element.</p>\n"},"collectData":{"!type":"fn(records: ?, startIndex: ?) -> [?]","!doc":"<p>Function which can be overridden which returns the data object passed to this\nDataView's <a href=\"#!/api/Ext.view.Table-cfg-tpl\" rel=\"Ext.view.Table-cfg-tpl\" class=\"docClass\">template</a> to render the whole DataView.</p>\n\n<p>This is usually an Array of data objects, each element of which is processed by an\n<a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">XTemplate</a> which uses <code>'&amp;lt;tpl for=\".\"&amp;gt;'</code> to iterate over its supplied\ndata object as an Array. However, <i>named</i> properties may be placed into the data object to\nprovide non-repeating data such as headings, totals etc.</p>\n"},"collectNodes":{"!type":"fn(targetEl: ?) -> !this","!doc":"<p>Overridden implementation.\nCalled by refresh to collect the view item nodes.\nNote that these may be wrapping rows which <em>contain</em> rows which map to records</p>\n"},"constructFeatures":{"!type":"fn() -> !this","!doc":"<p>Converts the features array as configured, into an array of instantiated Feature objects.</p>\n\n<p>Must have no side effects other than Feature instantiation.</p>\n\n<p>MUST NOT update the this.features property, and MUST NOT update the instantiated Features.</p>\n"},"constructRowId":{"!type":"fn(internalId: ?) -> !this"},"createRowElement":{"!type":"fn(record: ?, index: ?) -> !this","!doc":"<p>private\nCreate the DOM element which enapsulates the passed record.\nUsed when updating existing rows, so drills down into resulting structure .</p>\n"},"doStripeRows":{"!type":"fn(startRow: number, endRow?: number) -> !this","!doc":"<p>Stripes rows from a particular row index.</p>\n"},"expandToFit":{"!type":"fn(header: ?) -> !this","!doc":"<p>Expands a particular header to fit the max content width.</p>\n"},"findFeature":{"!type":"fn(ftype: ?) -> !this","!doc":"<p>Finds a features by ftype in the features array</p>\n"},"focus":{"!type":"fn(selectText: ?, delay: ?) -> +Ext.Component","!doc":"<p>Try to focus this component.</p>\n"},"focusCell":{"!type":"fn(position: ?) -> !this"},"focusRow":{"!type":"fn(row: +HTMLElement|string|number|+Ext.data.Model, delay?: bool|number) -> !this","!doc":"<p>Focuses a particular row and brings it into view. Will fire the rowfocus event.</p>\n"},"getBodySelector":{"!type":"fn() -> !this","!doc":"<p>Returns a CSS selector which selects the outermost element(s) in this view.</p>\n"},"getCell":{"!type":"fn(record: +Ext.data.Model, column: +Ext.grid.column.Column) -> !this","!doc":"<p>Get the cell (td) for a particular record and column.</p>\n"},"getCellByPosition":{"!type":"fn(position: ?, returnDom: ?) -> !this"},"getCellInnerSelector":{"!type":"fn(header: ?) -> !this","!doc":"<p>Returns a CSS selector which selects the content carrying element within cells.</p>\n"},"getCellPaddingAfter":{"!type":"fn(cell: ?) -> !this"},"getCellSelector":{"!type":"fn(header?: +Ext.grid.column.Column) -> !this","!doc":"<p>Returns a CSS selector which selects a particular column if the desired header is passed,\nor a general cell selector is no parameter is passed.</p>\n"},"getColumnSizerSelector":{"!type":"fn(header: ?) -> !this","!doc":"<p>Returns a CSS selector which selects the element(s) which define the width of a column.</p>\n\n<p>This is used by the <a href=\"#!/api/Ext.view.TableLayout\" rel=\"Ext.view.TableLayout\" class=\"docClass\">Ext.view.TableLayout</a> when resizing columns.</p>\n"},"getDataRowSelector":{"!type":"fn() -> !this","!doc":"<p>Returns a CSS selector which selects a row which contains cells.</p>\n\n<p>These <em>may not</em> correspond to actual records in the store. This selector may be used\nto identify things like total rows or header rows as injected by features which modify\nthe rowTpl.</p>\n"},"getFeature":{"!type":"fn(id: string) -> +Ext.grid.feature.Feature","!doc":"<p>Get a reference to a feature</p>\n"},"getFirstVisibleRowIndex":{"!type":"fn() -> !this"},"getFocusEl":{"!type":"fn() -> +undefined","!doc":"<p>Returns the focus holder element associated with this Component. At the Component base class level, this function returns <code>undefined</code>.</p>\n\n<p>Subclasses which use embedded focusable elements (such as Window, Field and Button) should override this\nfor use by the <a href=\"#!/api/Ext.Component-method-focus\" rel=\"Ext.Component-method-focus\" class=\"docClass\">focus</a> method.</p>\n\n<p>Containers which need to participate in the <a href=\"#!/api/Ext.FocusManager\" rel=\"Ext.FocusManager\" class=\"docClass\">FocusManager</a>'s navigation and Container focusing scheme also\nneed to return a <code>focusEl</code>, although focus is only listened for in this case if the <a href=\"#!/api/Ext.FocusManager\" rel=\"Ext.FocusManager\" class=\"docClass\">FocusManager</a> is <a href=\"#!/api/Ext.FocusManager-method-enable\" rel=\"Ext.FocusManager-method-enable\" class=\"docClass\">enable</a>d.</p>\n"},"getGridColumns":{"!type":"fn() -> !this","!doc":"<p>Get the leaf columns used for rendering the grid rows.</p>\n"},"getHeaderAtIndex":{"!type":"fn(index: number) -> !this","!doc":"<p>Get a leaf level header by index regardless of what the nesting\nstructure is.</p>\n"},"getHeaderByCell":{"!type":"fn(cell: ?) -> !this"},"getHeaderCt":{"!type":"fn() -> !this"},"getItemSelector":{"!type":"fn() -> !this","!doc":"<p>Returns a CSS selector which selects items of the view rendered by the rowTpl</p>\n"},"getLastVisibleRowIndex":{"!type":"fn() -> !this"},"getMaxContentWidth":{"!type":"fn(header: ?) -> !this","!doc":"<p>Returns the max contentWidth of the header's text and all cells\nin the grid under this header.</p>\n"},"getNode":{"!type":"fn(nodeInfo: +HTMLElement|string|number|+Ext.data.Model, dataRow?: bool) -> +HTMLElement","!doc":"<p>Returns the node given the passed Record, or index or node.</p>\n"},"getNodeById":{"!type":"fn(id: ?, dataRow: ?) -> !this"},"getNodeByRecord":{"!type":"fn(record: ?, dataRow: ?) -> !this"},"getNodeContainer":{"!type":"fn() -> !this"},"getNodeContainerSelector":{"!type":"fn() -> !this","!doc":"<p>Returns a CSS selector which selects the element which contains record nodes.</p>\n"},"getPosition":{"!type":"fn(record: ?, header: ?) -> [number]","!doc":"<p>Gets the current XY position of the component's underlying element.</p>\n"},"getPositionByEvent":{"!type":"fn(e: ?) -> !this"},"getRecord":{"!type":"fn(node: ?) -> +Ext.data.Model","!doc":"<p>Gets a record from a node</p>\n"},"getRowClass":{"!type":"fn(record: +Ext.data.Model, index: number, rowParams: ?, store: +Ext.data.Store) -> string","!doc":"<p>Override this function to apply custom CSS classes to rows during rendering. This function should return the\nCSS class name (or empty string '' for none) that will be added to the row's wrapping div. To apply multiple\nclass names, simply return them space-delimited within the string (e.g. 'my-class another-class').\nExample usage:</p>\n\n<pre><code>viewConfig: {\n    getRowClass: function(record, rowIndex, rowParams, store){\n        return record.get(\"valid\") ? \"row-valid\" : \"row-error\";\n    }\n}\n</code></pre>\n"},"getRowId":{"!type":"fn(record: ?) -> !this"},"getRowStyleTableEl":{"!type":"fn(item: ?) -> !this","!doc":"<p>private\nreturns the table that gains a top border when the first grid row is focused, selected,\nor hovered.  Usually the main grid table but can be a sub-table, if a grouping\nfeature is being used.</p>\n"},"indexInStore":{"!type":"fn(node: ?) -> !this"},"indexOf":{"!type":"fn(node: ?) -> number","!doc":"<p>Finds the index of the passed node.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"initFeatures":{"!type":"fn(grid: ?) -> !this","!doc":"<p>Initializes each feature and bind it to this view.</p>\n"},"isDataRow":{"!type":"fn(row: ?) -> bool","!doc":"<p>Used to test if a row being updated is a basic data row as opposed to containing extra markup\nprovided by a Feature, eg a wrapping row containing extra elements such as group header, group summary,\nrow body etc.</p>\n\n<p>If A row being updated <em>is not</em> a data row, then the elements within it which are not valid data rows\nmust be copied.</p>\n"},"isRowStyleFirst":{"!type":"fn(item: ?) -> !this","!doc":"<p>private\nreturns true if the row should be treated as the first row stylistically.  Typically\nonly returns true for the first row in a grid.  Returns true for the first row\nin each group of a grouped grid.</p>\n"},"moveColumn":{"!type":"fn(fromIdx: number, toIdx: number, colsToMove?: number) -> !this","!doc":"<p>Move a grid column from one position to another</p>\n"},"onAdd":{"!type":"fn(ds: ?, records: ?, index: ?) -> !this","!doc":"<p>after adding a row stripe rows from then on</p>\n\n<p><strong>From override Ext.grid.plugin.BufferedRendererTableView:</strong> Listener function for the Store's add event</p>\n"},"onBeforeCellClick":{"!type":"fn() -> !this"},"onBeforeCellContextMenu":{"!type":"fn() -> !this"},"onBeforeCellDblClick":{"!type":"fn() -> !this"},"onBeforeCellKeyDown":{"!type":"fn() -> !this"},"onBeforeCellMouseDown":{"!type":"fn() -> !this"},"onBeforeCellMouseUp":{"!type":"fn() -> !this"},"onCellClick":{"!type":"fn() -> !this"},"onCellContextMenu":{"!type":"fn() -> !this"},"onCellDblClick":{"!type":"fn() -> !this"},"onCellDeselect":{"!type":"fn(position: ?) -> !this"},"onCellKeyDown":{"!type":"fn() -> !this"},"onCellMouseDown":{"!type":"fn() -> !this"},"onCellMouseUp":{"!type":"fn() -> !this"},"onCellSelect":{"!type":"fn(position: ?) -> !this"},"onDataRefresh":{"!type":"fn() -> !this","!doc":"<p>When there's a buffered renderer present, store refresh events cause TableViews to go to scrollTop:0</p>\n\n<p><strong>Defined in override Ext.grid.plugin.BufferedRendererTableView.</strong></p>\n"},"onDestroy":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the destroy operation.\nAfter calling the superclass's onDestroy, the Component will be destroyed.</p>\n"},"onIdChanged":{"!type":"fn(store: ?, rec: ?, oldId: ?, newId: ?, oldInternalId: ?) -> !this"},"onRemove":{"!type":"fn(ds: ?, records: ?, indexes: ?) -> !this","!doc":"<p>after removing a row stripe rows from then on</p>\n\n<p><strong>Overridden in Ext.grid.plugin.BufferedRendererTableView.</strong></p>\n"},"onRowDeselect":{"!type":"fn(rowIdx: ?) -> !this","!doc":"<p>GridSelectionModel invokes onRowDeselect as selection changes</p>\n"},"onRowFocus":{"!type":"fn(rowIdx: ?, highlight: ?, supressFocus: ?) -> !this","!doc":"<p>GridSelectionModel invokes onRowFocus to 'highlight'\nthe last row focused</p>\n"},"onRowSelect":{"!type":"fn(rowIdx: ?) -> !this","!doc":"<p>GridSelectionModel invokes onRowSelect as selection changes</p>\n"},"onUpdate":{"!type":"fn(store: ?, record: ?, operation: ?, changedFieldNames: ?) -> !this","!doc":"<p>private</p>\n"},"onViewScroll":{"!type":"fn(e: ?, t: ?) -> !this","!doc":"<p>Private template method implemented starting at the AbstractView class.</p>\n"},"processItemEvent":{"!type":"fn(record: ?, row: ?, rowIndex: ?, e: ?) -> !this","!doc":"<p>Private template method</p>\n"},"processSpecialEvent":{"!type":"fn(e: ?) -> !this"},"refresh":{"!type":"fn() -> !this","!doc":"<p>Refreshes the grid view. Sets the sort state and focuses the previously focused row.</p>\n"},"refreshSize":{"!type":"fn() -> !this","!doc":"<p>Private. Called when the table changes height.\nFor example, see examples/grid/group-summary-grid.html\nIf we have flexed column headers, we need to update the header layout\nbecause it may have to accommodate (or cease to accommodate) a vertical scrollbar.\nOnly do this on platforms which have a space-consuming scrollbar.\nOnly do it when vertical scrolling is enabled.</p>\n"},"removeRowCls":{"!type":"fn(rowInfo: +HTMLElement|string|number|+Ext.data.Model, cls: string) -> !this","!doc":"<p>Removes a CSS Class from a specific row.</p>\n"},"renderCell":{"!type":"fn(column: +Ext.grid.column.Column, recordIndex: number, columnIndex: number, out: [string]) -> !this","!doc":"<p>Emits the HTML representing a single grid cell into the passed output stream (which is an array of strings).</p>\n"},"renderColumnSizer":{"!type":"fn(out: ?) -> !this","!doc":"<p>Alternative column sizer element renderer.\n   renderTHeadColumnSizer: function(out) {\n       var columns = this.getGridColumns(),\n           len = columns.length, i,\n           column, width;</p>\n\n<pre><code>   out.push('&lt;thead&gt;&lt;tr class=\"' + Ext.baseCSSPrefix + 'grid-header-row\"&gt;');\n   for (i = 0; i &lt; len; i++) {\n       column = columns[i];\n       width = column.hidden ? 0 : (column.lastBox ? column.lastBox.width : Ext.grid.header.Container.prototype.defaultWidth);\n       out.push('&lt;th class=\"', Ext.baseCSSPrefix, 'grid-cell-', columns[i].getItemId(), '\" style=\"width:' + width + 'px\"&gt;&lt;/th&gt;');\n   }\n   out.push('&lt;/tr&gt;&lt;/thead&gt;');\n</code></pre>\n\n<p>   },</p>\n"},"renderRow":{"!type":"fn(record: +Ext.data.Model, out?: [string]) -> string","!doc":"<p>Renders the HTML markup string for a single row into the passed array as a sequence of strings, or\nreturns the HTML markup for a single row.</p>\n"},"renderRows":{"!type":"fn(rows: ?, viewStartIndex: ?, out: ?) -> !this"},"renderTFoot":{"!type":"fn(values: ?, out: ?) -> !this"},"renderTHead":{"!type":"fn(values: ?, out: ?) -> !this"},"repaintRow":{"!type":"fn(rowIdx: ?) -> !this"},"retrieveNode":{"!type":"fn(id: ?, dataRow: ?) -> !this"},"scrollByDelta":{"!type":"fn(delta: number, dir?: string) -> !this","!doc":"<p>Scrolls by delta. This affects this individual view ONLY and does not\nsynchronize across views or scrollers.</p>\n"},"scrollCellIntoView":{"!type":"fn(cell: ?) -> !this"},"scrollRowIntoView":{"!type":"fn(row: ?) -> !this"},"scrollToTop":{"!type":"fn() -> !this","!doc":"<p>scroll the view to the top</p>\n"},"setHighlightedItem":{"!type":"fn(item: ?) -> !this"},"shouldUpdateCell":{"!type":"fn(record: ?, column: ?, changedFieldNames: ?) -> !this"},"syncRowHeights":{"!type":"fn(firstRow: ?, secondRow: ?) -> !this"},"tplApplyOut":{"!type":"fn(values: ?, out: ?) -> !this"},"updateColumns":{"!type":"fn(record: ?, oldRowDom: ?, newRowDom: ?, columns: ?, changedFieldNames: ?) -> !this"},"updateIndexes":{"!type":"fn() -> !this","!doc":"<p>Links back from grid rows are installed by the XTemplate as data attributes</p>\n"},"walkCells":{"!type":"fn(position: ?, direction: string, e: +Ext.EventObject, preventWrap: bool, verifierFn: fn(), scope: ?) -> +Ext.grid.CellContext"},"walkRecs":{"!type":"fn(startRec: +Ext.data.Model, distance: number) -> !this","!doc":"<p>Navigates from the passed record by the passed increment which may be +ve or -ve</p>\n\n<p>Skips hidden records.</p>\n\n<p>If no record is visible in the specified direction, returns the starting record index unchanged.</p>\n"},"walkRows":{"!type":"fn(startRow: number, distance: number) -> !this","!doc":"<p>Increments the passed row index by the passed increment which may be +ve or -ve</p>\n\n<p>Skips hidden rows.</p>\n\n<p>If no row is visible in the specified direction, returns the input row index unchanged.</p>\n"},"beforecellclick":{"!type":"fn(this: +Ext.view.Table, td: +HTMLElement, cellIndex: number, record: +Ext.data.Model, tr: +HTMLElement, rowIndex: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fired before the cell click is processed. Return false to cancel the default action.</p>\n"},"beforecellcontextmenu":{"!type":"fn(this: +Ext.view.Table, td: +HTMLElement, cellIndex: number, record: +Ext.data.Model, tr: +HTMLElement, rowIndex: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fired before the cell right click is processed. Return false to cancel the default action.</p>\n"},"beforecelldblclick":{"!type":"fn(this: +Ext.view.Table, td: +HTMLElement, cellIndex: number, record: +Ext.data.Model, tr: +HTMLElement, rowIndex: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fired before the cell double click is processed. Return false to cancel the default action.</p>\n"},"beforecellkeydown":{"!type":"fn(this: +Ext.view.Table, td: +HTMLElement, cellIndex: number, record: +Ext.data.Model, tr: +HTMLElement, rowIndex: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fired before the cell key down is processed. Return false to cancel the default action.</p>\n"},"beforecellmousedown":{"!type":"fn(this: +Ext.view.Table, td: +HTMLElement, cellIndex: number, record: +Ext.data.Model, tr: +HTMLElement, rowIndex: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fired before the cell mouse down is processed. Return false to cancel the default action.</p>\n"},"beforecellmouseup":{"!type":"fn(this: +Ext.view.Table, td: +HTMLElement, cellIndex: number, record: +Ext.data.Model, tr: +HTMLElement, rowIndex: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fired before the cell mouse up is processed. Return false to cancel the default action.</p>\n"},"cellclick":{"!type":"fn(this: +Ext.view.Table, td: +HTMLElement, cellIndex: number, record: +Ext.data.Model, tr: +HTMLElement, rowIndex: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fired when table cell is clicked.</p>\n"},"cellcontextmenu":{"!type":"fn(this: +Ext.view.Table, td: +HTMLElement, cellIndex: number, record: +Ext.data.Model, tr: +HTMLElement, rowIndex: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fired when table cell is right clicked.</p>\n"},"celldblclick":{"!type":"fn(this: +Ext.view.Table, td: +HTMLElement, cellIndex: number, record: +Ext.data.Model, tr: +HTMLElement, rowIndex: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fired when table cell is double clicked.</p>\n"},"cellkeydown":{"!type":"fn(this: +Ext.view.Table, td: +HTMLElement, cellIndex: number, record: +Ext.data.Model, tr: +HTMLElement, rowIndex: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fired when the keydown event is captured on the cell.</p>\n"},"cellmousedown":{"!type":"fn(this: +Ext.view.Table, td: +HTMLElement, cellIndex: number, record: +Ext.data.Model, tr: +HTMLElement, rowIndex: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fired when the mousedown event is captured on the cell.</p>\n"},"cellmouseup":{"!type":"fn(this: +Ext.view.Table, td: +HTMLElement, cellIndex: number, record: +Ext.data.Model, tr: +HTMLElement, rowIndex: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fired when the mouseup event is captured on the cell.</p>\n"}},"getBoundView":{"!type":"fn(node: ?) -> !this"}},"TableLayout":{"!doc":"<p>Component layout for <a href=\"#!/api/Ext.view.Table\" rel=\"Ext.view.Table\" class=\"docClass\">Ext.view.Table</a></p>\n","!type":"fn(config: Ext_view_TableLayout_cfg)","prototype":{"!proto":"Ext.layout.component.Auto.prototype","type":{"!type":"string","!doc":"<p>End Definitions</p>\n"},"beginLayout":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called before any calculation cycles to prepare for layout.</p>\n\n<p>This is a write phase and DOM reads should be strictly avoided when overridding\nthis method.</p>\n"},"calculate":{"!type":"fn(ownerContext: ?) -> !this","!doc":"<p>Called to perform the calculations for this layout. This method will be called at\nleast once and may be called repeatedly if the <a href=\"#!/api/Ext.view.TableLayout-property-done\" rel=\"Ext.view.TableLayout-property-done\" class=\"docClass\">done</a> property is cleared\nbefore return to indicate that this layout is not yet done. The <a href=\"#!/api/Ext.view.TableLayout-property-done\" rel=\"Ext.view.TableLayout-property-done\" class=\"docClass\">done</a> property\nis always set to <code>true</code> before entering this method.</p>\n\n<p>This is a read phase and DOM writes should be strictly avoided in derived classes.\nInstead, DOM writes need to be written to <a href=\"#!/api/Ext.layout.ContextItem\" rel=\"Ext.layout.ContextItem\" class=\"docClass\">Ext.layout.ContextItem</a> objects to\n be flushed at the next opportunity.</p>\n"},"finishedLayout":{"!type":"fn() -> !this","!doc":"<p>This method is called after all layouts are complete and their calculations flushed\nto the DOM. No further layouts will be run and this method is only called once per\nlayout run. The base component layout caches <code>lastComponentSize</code>.</p>\n\n<p>This is a write phase and DOM reads should be avoided if possible when overridding\nthis method.</p>\n\n<p>This method need not be implemented by derived classes and, in fact, should only be\nimplemented when needed.</p>\n"},"measureContentHeight":{"!type":"fn(ownerContext: ?) -> !this"},"setColumnWidths":{"!type":"fn(ownerContext: ?) -> !this"}}},"View":{"!doc":"<p>A mechanism for displaying data using custom layout templates and formatting.</p>\n\n<p>The View uses an <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">Ext.XTemplate</a> as its internal templating mechanism, and is bound to an\n<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a> so that as the data in the store changes the view is automatically updated\nto reflect the changes. The view also provides built-in behavior for many common events that can\noccur for its contained items including click, doubleclick, mouseover, mouseout, etc. as well as a\nbuilt-in selection model. <strong>In order to use these features, an <a href=\"#!/api/Ext.view.View-cfg-itemSelector\" rel=\"Ext.view.View-cfg-itemSelector\" class=\"docClass\">itemSelector</a> config must\nbe provided for the View to determine what nodes it will be working with.</strong></p>\n\n<p>The example below binds a View to a <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a> and renders it into an <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a>.</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('Image', {\n    extend: '<a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Ext.data.Model</a>',\n    fields: [\n        { name:'src', type:'string' },\n        { name:'caption', type:'string' }\n    ]\n});\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a>', {\n    id:'imagesStore',\n    model: 'Image',\n    data: [\n        { src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing &amp; Charts' },\n        { src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data' },\n        { src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme' },\n        { src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned' }\n    ]\n});\n\nvar imageTpl = new <a href=\"#!/api/Ext.XTemplate\" rel=\"Ext.XTemplate\" class=\"docClass\">Ext.XTemplate</a>(\n    '&lt;tpl for=\".\"&gt;',\n        '&lt;div style=\"margin-bottom: 10px;\" class=\"thumb-wrap\"&gt;',\n          '&lt;img src=\"{src}\" /&gt;',\n          '&lt;br/&gt;&lt;span&gt;{caption}&lt;/span&gt;',\n        '&lt;/div&gt;',\n    '&lt;/tpl&gt;'\n);\n\n<a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.view.View\" rel=\"Ext.view.View\" class=\"docClass\">Ext.view.View</a>', {\n    store: <a href=\"#!/api/Ext.data.StoreManager-method-lookup\" rel=\"Ext.data.StoreManager-method-lookup\" class=\"docClass\">Ext.data.StoreManager.lookup</a>('imagesStore'),\n    tpl: imageTpl,\n    itemSelector: 'div.thumb-wrap',\n    emptyText: 'No images available',\n    renderTo: <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>()\n});\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_view_View_cfg)","prototype":{"!proto":"Ext.view.AbstractView.prototype","mouseOverOutBuffer":{"!type":"number","!doc":"<p>The number of milliseconds to buffer mouseover and mouseout event handling on view items.</p>\n\n<p>Configure this as <code>false</code> to process mouseover and mouseout events immediately.</p>\n"},"deferHighlight":{"!type":"?","!doc":"<p>private delay to buffer row highlighting/unhighlighting on mouse move.\nThis is ignored if the public mouseOverOutBuffer remains a non-zero value</p>\n"},"inputTagRe":{"!type":"+RegExp"},"addCmpEvents":{"!type":"fn() -> !this"},"afterRender":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior after rendering is complete. At this stage the Component’s Element\nwill have been styled according to the configuration, will have had any configured CSS class\nnames added, and will be in the configured visibility and the configured enable state.</p>\n"},"clearHighlight":{"!type":"fn() -> !this","!doc":"<p>Un-highlights the currently highlighted item, if any.</p>\n"},"focusNode":{"!type":"fn(rec: +Ext.data.Model) -> !this","!doc":"<p>Focuses a node in the view.</p>\n"},"getFocusEl":{"!type":"fn() -> +undefined","!doc":"<p>Returns the focus holder element associated with this Component. At the Component base class level, this function returns <code>undefined</code>.</p>\n\n<p>Subclasses which use embedded focusable elements (such as Window, Field and Button) should override this\nfor use by the <a href=\"#!/api/Ext.Component-method-focus\" rel=\"Ext.Component-method-focus\" class=\"docClass\">focus</a> method.</p>\n\n<p>Containers which need to participate in the <a href=\"#!/api/Ext.FocusManager\" rel=\"Ext.FocusManager\" class=\"docClass\">FocusManager</a>'s navigation and Container focusing scheme also\nneed to return a <code>focusEl</code>, although focus is only listened for in this case if the <a href=\"#!/api/Ext.FocusManager\" rel=\"Ext.FocusManager\" class=\"docClass\">FocusManager</a> is <a href=\"#!/api/Ext.FocusManager-method-enable\" rel=\"Ext.FocusManager-method-enable\" class=\"docClass\">enable</a>d.</p>\n"},"handleEvent":{"!type":"fn(e: ?) -> !this"},"handleMouseOverOrOut":{"!type":"fn(e: ?) -> !this"},"highlightItem":{"!type":"fn(item: +HTMLElement) -> !this","!doc":"<p>Highlights a given item in the View. This is called by the mouseover handler if <a href=\"#!/api/Ext.view.View-cfg-overItemCls\" rel=\"Ext.view.View-cfg-overItemCls\" class=\"docClass\">overItemCls</a>\nand <a href=\"#!/api/Ext.view.View-cfg-trackOver\" rel=\"Ext.view.View-cfg-trackOver\" class=\"docClass\">trackOver</a> are configured, but can also be called manually by other code, for instance to\nhandle stepping through the list via keyboard navigation.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>private</p>\n"},"onBeforeContainerClick":{"!type":"fn() -> !this"},"onBeforeContainerContextMenu":{"!type":"fn() -> !this"},"onBeforeContainerDblClick":{"!type":"fn() -> !this"},"onBeforeContainerKeyDown":{"!type":"fn() -> !this"},"onBeforeContainerMouseDown":{"!type":"fn() -> !this"},"onBeforeContainerMouseOut":{"!type":"fn() -> !this"},"onBeforeContainerMouseOver":{"!type":"fn() -> !this"},"onBeforeContainerMouseUp":{"!type":"fn() -> !this"},"onBeforeItemClick":{"!type":"fn() -> !this"},"onBeforeItemContextMenu":{"!type":"fn() -> !this"},"onBeforeItemDblClick":{"!type":"fn() -> !this"},"onBeforeItemFocus":{"!type":"fn() -> !this"},"onBeforeItemKeyDown":{"!type":"fn() -> !this"},"onBeforeItemMouseDown":{"!type":"fn() -> !this"},"onBeforeItemMouseEnter":{"!type":"fn() -> !this"},"onBeforeItemMouseLeave":{"!type":"fn() -> !this"},"onBeforeItemMouseUp":{"!type":"fn() -> !this"},"onContainerClick":{"!type":"fn() -> !this"},"onContainerContextMenu":{"!type":"fn() -> !this"},"onContainerDblClick":{"!type":"fn() -> !this"},"onContainerKeyDown":{"!type":"fn() -> !this"},"onContainerMouseDown":{"!type":"fn() -> !this","!doc":"<p>private, template methods</p>\n"},"onContainerMouseOut":{"!type":"fn() -> !this"},"onContainerMouseOver":{"!type":"fn() -> !this"},"onContainerMouseUp":{"!type":"fn() -> !this"},"onItemClick":{"!type":"fn() -> !this"},"onItemContextMenu":{"!type":"fn() -> !this"},"onItemDblClick":{"!type":"fn() -> !this"},"onItemFocus":{"!type":"fn() -> !this"},"onItemKeyDown":{"!type":"fn() -> !this"},"onItemMouseDown":{"!type":"fn() -> !this","!doc":"<p>private, template methods</p>\n"},"onItemMouseEnter":{"!type":"fn(record: ?, item: ?, index: ?, e: ?) -> !this"},"onItemMouseLeave":{"!type":"fn(record: ?, item: ?, index: ?, e: ?) -> !this"},"onItemMouseUp":{"!type":"fn() -> !this"},"onMouseOverOut":{"!type":"fn(e: ?) -> !this"},"onUpdate":{"!type":"fn(store: ?, record: ?) -> !this","!doc":"<p>private</p>\n"},"processContainerEvent":{"!type":"fn() -> !this"},"processItemEvent":{"!type":"fn() -> !this","!doc":"<p>Private template method</p>\n"},"processSpecialEvent":{"!type":"fn() -> !this"},"processUIEvent":{"!type":"fn(e: ?) -> !this"},"refresh":{"!type":"fn() -> !this","!doc":"<p>Refreshes the view by reloading the data from the store and re-rendering the template.</p>\n"},"setHighlightedItem":{"!type":"fn(item: ?) -> !this"},"beforecontainerclick":{"!type":"fn(this: +Ext.view.View, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires before the click event on the container is processed. Returns false to cancel the default action.</p>\n"},"beforecontainercontextmenu":{"!type":"fn(this: +Ext.view.View, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires before the contextmenu event on the container is processed. Returns false to cancel the default action.</p>\n"},"beforecontainerdblclick":{"!type":"fn(this: +Ext.view.View, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires before the dblclick event on the container is processed. Returns false to cancel the default action.</p>\n"},"beforecontainerkeydown":{"!type":"fn(this: +Ext.view.View, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires before the keydown event on the container is processed. Returns false to cancel the default action.</p>\n"},"beforecontainermousedown":{"!type":"fn(this: +Ext.view.View, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires before the mousedown event on the container is processed. Returns false to cancel the default action.</p>\n"},"beforecontainermouseout":{"!type":"fn(this: +Ext.view.View, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires before the mouseout event on the container is processed. Returns false to cancel the default action.</p>\n"},"beforecontainermouseover":{"!type":"fn(this: +Ext.view.View, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires before the mouseover event on the container is processed. Returns false to cancel the default action.</p>\n"},"beforecontainermouseup":{"!type":"fn(this: +Ext.view.View, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires before the mouseup event on the container is processed. Returns false to cancel the default action.</p>\n"},"beforedeselect":{"!type":"fn(this: +Ext.selection.DataViewModel, record: +Ext.data.Model, eOpts: ?)","!doc":"<p>Fired before a record is deselected. If any listener returns false, the\ndeselection is cancelled.</p>\n"},"beforeitemclick":{"!type":"fn(this: +Ext.view.View, record: +Ext.data.Model, item: +HTMLElement, index: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires before the click event on an item is processed. Returns false to cancel the default action.</p>\n"},"beforeitemcontextmenu":{"!type":"fn(this: +Ext.view.View, record: +Ext.data.Model, item: +HTMLElement, index: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires before the contextmenu event on an item is processed. Returns false to cancel the default action.</p>\n"},"beforeitemdblclick":{"!type":"fn(this: +Ext.view.View, record: +Ext.data.Model, item: +HTMLElement, index: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires before the dblclick event on an item is processed. Returns false to cancel the default action.</p>\n"},"beforeitemkeydown":{"!type":"fn(this: +Ext.view.View, record: +Ext.data.Model, item: +HTMLElement, index: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires before the keydown event on an item is processed. Returns false to cancel the default action.</p>\n"},"beforeitemmousedown":{"!type":"fn(this: +Ext.view.View, record: +Ext.data.Model, item: +HTMLElement, index: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires before the mousedown event on an item is processed. Returns false to cancel the default action.</p>\n"},"beforeitemmouseenter":{"!type":"fn(this: +Ext.view.View, record: +Ext.data.Model, item: +HTMLElement, index: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires before the mouseenter event on an item is processed. Returns false to cancel the default action.</p>\n"},"beforeitemmouseleave":{"!type":"fn(this: +Ext.view.View, record: +Ext.data.Model, item: +HTMLElement, index: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires before the mouseleave event on an item is processed. Returns false to cancel the default action.</p>\n"},"beforeitemmouseup":{"!type":"fn(this: +Ext.view.View, record: +Ext.data.Model, item: +HTMLElement, index: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires before the mouseup event on an item is processed. Returns false to cancel the default action.</p>\n"},"beforeselect":{"!type":"fn(this: +Ext.selection.DataViewModel, record: +Ext.data.Model, eOpts: ?)","!doc":"<p>Fired before a record is selected. If any listener returns false, the\nselection is cancelled.</p>\n"},"containerclick":{"!type":"fn(this: +Ext.view.View, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when the container is clicked.</p>\n"},"containercontextmenu":{"!type":"fn(this: +Ext.view.View, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when the container is right clicked.</p>\n"},"containerdblclick":{"!type":"fn(this: +Ext.view.View, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when the container is double clicked.</p>\n"},"containerkeydown":{"!type":"fn(this: +Ext.view.View, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when a key is pressed while the container is focused, and no item is currently selected.</p>\n"},"containermouseout":{"!type":"fn(this: +Ext.view.View, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when you move the mouse out of the container.</p>\n"},"containermouseover":{"!type":"fn(this: +Ext.view.View, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when you move the mouse over the container.</p>\n"},"containermouseup":{"!type":"fn(this: +Ext.view.View, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when there is a mouse up on the container</p>\n"},"deselect":{"!type":"fn(this: +Ext.selection.DataViewModel, record: +Ext.data.Model, eOpts: ?)","!doc":"<p>Fired after a record is deselected</p>\n"},"focuschange":{"!type":"fn(this: +Ext.selection.Model, oldFocused: +Ext.data.Model, newFocused: +Ext.data.Model, eOpts: ?)","!doc":"<p>Fired when a row is focused</p>\n"},"highlightitem":{"!type":"fn(view: +Ext.view.View, node: +Ext.Element, eOpts: ?)","!doc":"<p>Fires when a node is highlighted using keyboard navigation, or mouseover.</p>\n"},"itemclick":{"!type":"fn(this: +Ext.view.View, record: +Ext.data.Model, item: +HTMLElement, index: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when an item is clicked.</p>\n"},"itemcontextmenu":{"!type":"fn(this: +Ext.view.View, record: +Ext.data.Model, item: +HTMLElement, index: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when an item is right clicked.</p>\n"},"itemdblclick":{"!type":"fn(this: +Ext.view.View, record: +Ext.data.Model, item: +HTMLElement, index: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when an item is double clicked.</p>\n"},"itemkeydown":{"!type":"fn(this: +Ext.view.View, record: +Ext.data.Model, item: +HTMLElement, index: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when a key is pressed while an item is currently selected.</p>\n"},"itemmousedown":{"!type":"fn(this: +Ext.view.View, record: +Ext.data.Model, item: +HTMLElement, index: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when there is a mouse down on an item</p>\n"},"itemmouseenter":{"!type":"fn(this: +Ext.view.View, record: +Ext.data.Model, item: +HTMLElement, index: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when the mouse enters an item.</p>\n"},"itemmouseleave":{"!type":"fn(this: +Ext.view.View, record: +Ext.data.Model, item: +HTMLElement, index: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when the mouse leaves an item.</p>\n"},"itemmouseup":{"!type":"fn(this: +Ext.view.View, record: +Ext.data.Model, item: +HTMLElement, index: number, e: +Ext.EventObject, eOpts: ?)","!doc":"<p>Fires when there is a mouse up on an item</p>\n"},"select":{"!type":"fn(this: +Ext.selection.DataViewModel, record: +Ext.data.Model, eOpts: ?)","!doc":"<p>Fired after a record is selected</p>\n"},"selectionchange":{"!type":"fn(this: +Ext.selection.Model, selected: [+Ext.data.Model], eOpts: ?)","!doc":"<p>Fired after a selection change has occurred</p>\n"},"unhighlightitem":{"!type":"fn(view: +Ext.view.View, node: +Ext.Element, eOpts: ?)","!doc":"<p>Fires when a node is unhighlighted using keyboard navigation, or mouseout.</p>\n"}},"EventMap":{"!type":"?"}}},"window":{"MessageBox":{"!doc":"<p>Utility class for generating different styles of message boxes.  The singleton instance, <a href=\"#!/api/Ext.MessageBox\" rel=\"Ext.MessageBox\" class=\"docClass\">Ext.MessageBox</a>\nalias <code><a href=\"#!/api/Ext.MessageBox\" rel=\"Ext.MessageBox\" class=\"docClass\">Ext.Msg</a></code> can also be used.</p>\n\n<p>Note that a MessageBox is asynchronous.  Unlike a regular JavaScript <code>alert</code> (which will halt\nbrowser execution), showing a MessageBox will not cause the code to stop.  For this reason, if you have code\nthat should only run <em>after</em> some user feedback from the MessageBox, you must use a callback function\n(see the <code>function</code> parameter for <a href=\"#!/api/Ext.window.MessageBox-method-show\" rel=\"Ext.window.MessageBox-method-show\" class=\"docClass\">show</a> for more details).</p>\n\n<p>Basic alert</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext.MessageBox-method-alert\" rel=\"Ext.MessageBox-method-alert\" class=\"docClass\">Ext.Msg.alert</a>('Status', 'Changes saved successfully.');\n</code></pre>\n\n<p>Prompt for user data and process the result using a callback</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext.MessageBox-method-prompt\" rel=\"Ext.MessageBox-method-prompt\" class=\"docClass\">Ext.Msg.prompt</a>('Name', 'Please enter your name:', function(btn, text){\n    if (btn == 'ok'){\n        // process text value and close...\n    }\n});\n</code></pre>\n\n<p>Show a dialog using config options</p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext.MessageBox-method-show\" rel=\"Ext.MessageBox-method-show\" class=\"docClass\">Ext.Msg.show</a>({\n     title:'Save Changes?',\n     msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',\n     buttons: <a href=\"#!/api/Ext.MessageBox-property-YESNOCANCEL\" rel=\"Ext.MessageBox-property-YESNOCANCEL\" class=\"docClass\">Ext.Msg.YESNOCANCEL</a>,\n     icon: <a href=\"#!/api/Ext.MessageBox-property-QUESTION\" rel=\"Ext.MessageBox-property-QUESTION\" class=\"docClass\">Ext.Msg.QUESTION</a>\n});\n</code></pre>\n","!type":"fn(cfg: ?)","prototype":{"!proto":"Ext.window.Window.prototype","closeAction":{"!type":"string","!doc":"<p>The action to take when the close header tool is clicked:</p>\n\n<ul>\n<li><p><strong><code>'<a href=\"#!/api/Ext.window.MessageBox-method-destroy\" rel=\"Ext.window.MessageBox-method-destroy\" class=\"docClass\">destroy</a>'</code></strong> :</p>\n\n<p><a href=\"#!/api/Ext.window.MessageBox-method-remove\" rel=\"Ext.window.MessageBox-method-remove\" class=\"docClass\">remove</a> the window from the DOM and <a href=\"#!/api/Ext.Component-method-destroy\" rel=\"Ext.Component-method-destroy\" class=\"docClass\">destroy</a> it and all descendant\nComponents. The window will <strong>not</strong> be available to be redisplayed via the <a href=\"#!/api/Ext.window.MessageBox-method-show\" rel=\"Ext.window.MessageBox-method-show\" class=\"docClass\">show</a> method.</p></li>\n<li><p><strong><code>'<a href=\"#!/api/Ext.window.MessageBox-method-hide\" rel=\"Ext.window.MessageBox-method-hide\" class=\"docClass\">hide</a>'</code></strong> :</p>\n\n<p><a href=\"#!/api/Ext.window.MessageBox-method-hide\" rel=\"Ext.window.MessageBox-method-hide\" class=\"docClass\">hide</a> the window by setting visibility to hidden and applying negative offsets. The window will be\navailable to be redisplayed via the <a href=\"#!/api/Ext.window.MessageBox-method-show\" rel=\"Ext.window.MessageBox-method-show\" class=\"docClass\">show</a> method.</p></li>\n</ul>\n\n\n<p><strong>Note:</strong> This behavior has changed! setting <em>does</em> affect the <a href=\"#!/api/Ext.window.MessageBox-method-close\" rel=\"Ext.window.MessageBox-method-close\" class=\"docClass\">close</a> method which will invoke the\napproriate closeAction.</p>\n"},"cls":{"!type":"string","!doc":"<p>An optional extra CSS class that will be added to this component's Element. This can be useful\nfor adding customized styles to the component or any of its children using standard CSS rules.</p>\n"},"constrain":{"!type":"bool","!doc":"<p>True to constrain the window within its containing element, false to allow it to fall outside of its containing\nelement. By default the window will be rendered to <code>document.body</code>. To render and constrain the window within\nanother element specify <a href=\"#!/api/Ext.window.MessageBox-cfg-renderTo\" rel=\"Ext.window.MessageBox-cfg-renderTo\" class=\"docClass\">renderTo</a>. Optionally the header only can be constrained\nusing <a href=\"#!/api/Ext.window.MessageBox-cfg-constrainHeader\" rel=\"Ext.window.MessageBox-cfg-constrainHeader\" class=\"docClass\">constrainHeader</a>.</p>\n"},"hideMode":{"!type":"string","!doc":"<p>hide it by offsets. Windows are hidden on render by default.</p>\n"},"layout":{"!type":"+Ext.enums.Layout|?","!doc":"<p><strong>Important</strong>: In order for child items to be correctly sized and\npositioned, typically a layout manager <strong>must</strong> be specified through\nthe <code>layout</code> configuration option.</p>\n\n<p>The sizing and positioning of child <a href=\"#!/api/Ext.window.MessageBox-cfg-items\" rel=\"Ext.window.MessageBox-cfg-items\" class=\"docClass\">items</a> is the responsibility of\nthe Container's layout manager which creates and manages the type of layout\nyou have in mind.  For example:</p>\n\n<p>If the layout configuration is not explicitly specified for\na general purpose container (e.g. Container or Panel) the\n<a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">default layout manager</a> will be used\nwhich does nothing but render child components sequentially into the\nContainer (no sizing or positioning will be performed in this situation).</p>\n\n<p><strong>layout</strong> may be specified as either as an Object or as a String:</p>\n\n<h2>Specify as an Object</h2>\n\n<p>Example usage:</p>\n\n<pre><code>layout: {\n    type: 'vbox',\n    align: 'left'\n}\n</code></pre>\n\n<ul>\n<li><p><strong>type</strong></p>\n\n<p>The layout type to be used for this container.  If not specified,\na default <a href=\"#!/api/Ext.layout.container.Auto\" rel=\"Ext.layout.container.Auto\" class=\"docClass\">Ext.layout.container.Auto</a> will be created and used.</p>\n\n<p>Valid layout <code>type</code> values are listed in <a href=\"#!/api/Ext.enums.Layout\" rel=\"Ext.enums.Layout\" class=\"docClass\">Ext.enums.Layout</a>.</p></li>\n<li><p>Layout specific configuration properties</p>\n\n<p>Additional layout specific configuration properties may also be\nspecified. For complete details regarding the valid config options for\neach layout type, see the layout class corresponding to the <code>type</code>\nspecified.</p></li>\n</ul>\n\n\n<h2>Specify as a String</h2>\n\n<p>Example usage:</p>\n\n<pre><code>layout: 'vbox'\n</code></pre>\n\n<ul>\n<li><p><strong>layout</strong></p>\n\n<p>The layout <code>type</code> to be used for this container (see <a href=\"#!/api/Ext.enums.Layout\" rel=\"Ext.enums.Layout\" class=\"docClass\">Ext.enums.Layout</a>\nfor list of valid values).</p>\n\n<p>Additional layout specific configuration properties. For complete\ndetails regarding the valid config options for each layout type, see the\nlayout class corresponding to the <code>layout</code> specified.</p></li>\n</ul>\n\n\n<h2>Configuring the default layout type</h2>\n\n<p>If a certain Container class has a default layout (For example a <a href=\"#!/api/Ext.toolbar.Toolbar\" rel=\"Ext.toolbar.Toolbar\" class=\"docClass\">Toolbar</a>\nwith a default <code>Box</code> layout), then to simply configure the default layout,\nuse an object, but without the <code>type</code> property:</p>\n\n<pre><code>xtype: 'toolbar',\nlayout: {\n    pack: 'center'\n}\n</code></pre>\n"},"maxHeight":{"!type":"number","!doc":"<p>The maximum value in pixels which this Component will set its height to.</p>\n\n<p><strong>Warning:</strong> This will override any size management applied by layout managers.</p>\n"},"maxWidth":{"!type":"number","!doc":"<p>The maximum value in pixels which this Component will set its width to.</p>\n\n<p><strong>Warning:</strong> This will override any size management applied by layout managers.</p>\n"},"minHeight":{"!type":"number","!doc":"<p>inherit docs</p>\n"},"minWidth":{"!type":"number","!doc":"<p>Forcibly set these to null on the prototype to override anything set higher in\nthe hierarchy</p>\n"},"resizable":{"!type":"bool|?","!doc":"<p>Specify as <code>true</code> to allow user resizing at each edge and corner of the window, false to disable resizing.</p>\n\n<p>This may also be specified as a config object to <a href=\"#!/api/Ext.resizer.Resizer\" rel=\"Ext.resizer.Resizer\" class=\"docClass\">Ext.resizer.Resizer</a></p>\n"},"shrinkWrapDock":{"!type":"bool|number","!doc":"<p>We want to shrinkWrap around all docked items</p>\n"},"title":{"!type":"string","!doc":"<p>The title text to be used to display in the <a href=\"#!/api/Ext.panel.Header\" rel=\"Ext.panel.Header\" class=\"docClass\">panel header</a>. When a\n<code>title</code> is specified the <a href=\"#!/api/Ext.panel.Header\" rel=\"Ext.panel.Header\" class=\"docClass\">Ext.panel.Header</a> will automatically be created and displayed unless\n<a href=\"#!/api/Ext.window.MessageBox-cfg-header\" rel=\"Ext.window.MessageBox-cfg-header\" class=\"docClass\">header</a> is set to <code>false</code>.</p>\n"},"CANCEL":{"!type":"number","!doc":"<p>Button config that displays a single Cancel button</p>\n"},"ERROR":{"!type":"string","!doc":"<p>The CSS class that provides the ERROR icon image</p>\n"},"INFO":{"!type":"string","!doc":"<p>The CSS class that provides the INFO icon image</p>\n"},"NO":{"!type":"number","!doc":"<p>Button config that displays a single No button</p>\n"},"OK":{"!type":"number","!doc":"<p>Button config that displays a single OK button</p>\n"},"OKCANCEL":{"!type":"number","!doc":"<p>Button config that displays OK and Cancel buttons</p>\n"},"QUESTION":{"!type":"string","!doc":"<p>The CSS class that provides the QUESTION icon image</p>\n"},"WARNING":{"!type":"string","!doc":"<p>The CSS class that provides the WARNING icon image</p>\n"},"YES":{"!type":"number","!doc":"<p>Button config that displays a single Yes button</p>\n"},"YESNO":{"!type":"number","!doc":"<p>Button config that displays Yes and No buttons</p>\n"},"YESNOCANCEL":{"!type":"number","!doc":"<p>Button config that displays Yes, No and Cancel buttons</p>\n"},"buttonIds":{"!type":"[?]","!doc":"<p></p>\n"},"buttonText":{"!type":"?","!doc":"<p>An object containing the default button text strings that can be overriden for localized language support.\nSupported properties are: ok, cancel, yes and no.  Generally you should include a locale-specific\nresource file for handling language support across the framework.\nCustomize the default text like so:</p>\n\n<pre><code>Ext.window.MessageBox.buttonText.yes = \"oui\"; //french\n</code></pre>\n"},"defaultMaxHeight":{"!type":"number"},"defaultMaxWidth":{"!type":"number"},"defaultMinHeight":{"!type":"number"},"defaultMinWidth":{"!type":"number"},"defaultTextHeight":{"!type":"number","!doc":"<p>The default height in pixels of the message box's multiline textarea if displayed.</p>\n"},"iconHeight":{"!type":"number","!doc":"<p></p>\n"},"iconWidth":{"!type":"number"},"minProgressWidth":{"!type":"number","!doc":"<p>The minimum width in pixels of the message box if it is a progress-style dialog.  This is useful\nfor setting a different minimum width than text-only dialogs may need.</p>\n"},"minPromptWidth":{"!type":"number","!doc":"<p>The minimum width in pixels of the message box if it is a prompt dialog.  This is useful\nfor setting a different minimum width than text-only dialogs may need.</p>\n"},"titleText":{"!type":"?","!doc":"<p><locale type=\"object\"></locale></p>\n"},"alert":{"!type":"fn(title: string, msg: string, fn?: fn(), scope?: ?) -> +Ext.window.MessageBox","!doc":"<p>Displays a standard read-only message box with an OK button (comparable to the basic JavaScript alert prompt).\nIf a callback function is passed it will be called after the user clicks the button, and the\nid of the button that was clicked will be passed as the only parameter to the callback\n(could also be the top-right close button, which will always report as \"cancel\").</p>\n"},"btnCallback":{"!type":"fn(btn: ?) -> !this"},"confirm":{"!type":"fn(title: string, msg: string, fn?: fn(), scope?: ?) -> +Ext.window.MessageBox","!doc":"<p>Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's confirm).\nIf a callback function is passed it will be called after the user clicks either button,\nand the id of the button that was clicked will be passed as the only parameter to the callback\n(could also be the top-right close button, which will always report as \"cancel\").</p>\n"},"hide":{"!type":"fn() -> +Ext.Component","!doc":"<p>Hides this Component, setting it to invisible using the configured <a href=\"#!/api/Ext.window.MessageBox-cfg-hideMode\" rel=\"Ext.window.MessageBox-cfg-hideMode\" class=\"docClass\">hideMode</a>.</p>\n"},"initComponent":{"!type":"fn(cfg: ?) -> !this","!doc":"<p>The initComponent template method is an important initialization step for a Component. It is intended to be\nimplemented by each subclass of <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> to provide any needed constructor logic. The\ninitComponent method of the class being created is called first, with each initComponent method\nup the hierarchy to <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> being called thereafter. This makes it easy to implement and,\nif needed, override the constructor logic of the Component at any step in the hierarchy.</p>\n\n<p>The initComponent method <strong>must</strong> contain a call to <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a> in order\nto ensure that the parent class' initComponent method is also called.</p>\n\n<p>All config options passed to the constructor are applied to <code>this</code> before initComponent is called,\nso you can simply access them with <code>this.someOption</code>.</p>\n\n<p>The following example demonstrates using a dynamic string for the text of a button at the time of\ninstantiation of the class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('DynamicButtonText', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n\n    initComponent: function() {\n        this.text = new Date();\n        this.renderTo = <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>();\n        this.callParent();\n    }\n});\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function() {\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('DynamicButtonText');\n});\n</code></pre>\n"},"makeButton":{"!type":"fn(btnIdx: ?) -> !this"},"onClose":{"!type":"fn() -> !this"},"onEsc":{"!type":"fn() -> !this"},"onPromptKey":{"!type":"fn(textField: ?, e: ?) -> !this"},"onShow":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the show operation. After\ncalling the superclass's onShow, the Component will be visible.</p>\n\n<p>Override in subclasses where more complex behaviour is needed.</p>\n\n<p>Gets passed the same parameters as <a href=\"#!/api/Ext.window.MessageBox-method-show\" rel=\"Ext.window.MessageBox-method-show\" class=\"docClass\">show</a>.</p>\n"},"progress":{"!type":"fn(title: string, msg: string, progressText?: string) -> +Ext.window.MessageBox","!doc":"<p>Displays a message box with a progress bar.</p>\n\n<p>You are responsible for updating the progress bar as needed via <a href=\"#!/api/Ext.window.MessageBox-method-updateProgress\" rel=\"Ext.window.MessageBox-method-updateProgress\" class=\"docClass\">updateProgress</a>\nand closing the message box when the process is complete.</p>\n"},"prompt":{"!type":"fn(title: string, msg: string, fn?: fn(), scope?: ?, multiline?: bool|number, value?: string) -> +Ext.window.MessageBox","!doc":"<p>Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to JavaScript's prompt).\nThe prompt can be a single-line or multi-line textbox.  If a callback function is passed it will be called after the user\nclicks either button, and the id of the button that was clicked (could also be the top-right\nclose button, which will always report as \"cancel\") and the text that was entered will be passed as the two parameters to the callback.</p>\n"},"reconfigure":{"!type":"fn(cfg: ?) -> !this"},"setIcon":{"!type":"fn(icon: string, width?: number, height?: number) -> +Ext.window.MessageBox","!doc":"<p>Adds the specified icon to the dialog.  By default, the class 'x-messagebox-icon' is applied for default\nstyling, and the class passed in is expected to supply the background image url. Pass in empty string ('')\nto clear any existing icon. This method must be called before the MessageBox is shown.\nThe following built-in icon classes are supported, but you can also pass in a custom class name:</p>\n\n<pre><code><a href=\"#!/api/Ext.window.MessageBox-property-INFO\" rel=\"Ext.window.MessageBox-property-INFO\" class=\"docClass\">Ext.window.MessageBox.INFO</a>\n<a href=\"#!/api/Ext.window.MessageBox-property-WARNING\" rel=\"Ext.window.MessageBox-property-WARNING\" class=\"docClass\">Ext.window.MessageBox.WARNING</a>\n<a href=\"#!/api/Ext.window.MessageBox-property-QUESTION\" rel=\"Ext.window.MessageBox-property-QUESTION\" class=\"docClass\">Ext.window.MessageBox.QUESTION</a>\n<a href=\"#!/api/Ext.window.MessageBox-property-ERROR\" rel=\"Ext.window.MessageBox-property-ERROR\" class=\"docClass\">Ext.window.MessageBox.ERROR</a>\n</code></pre>\n"},"show":{"!type":"fn(config: ?) -> +Ext.window.MessageBox","!doc":"<p>Displays a new message box, or reinitializes an existing message box, based on the config options passed in. All\ndisplay functions (e.g. prompt, alert, etc.) on MessageBox call this function internally, although those calls\nare basic shortcuts and do not support all of the config options allowed here.</p>\n\n<p>Example usage:</p>\n\n<pre><code><a href=\"#!/api/Ext.MessageBox-method-show\" rel=\"Ext.MessageBox-method-show\" class=\"docClass\">Ext.Msg.show</a>({\n    title: 'Address',\n    msg: 'Please enter your address:',\n    width: 300,\n    buttons: <a href=\"#!/api/Ext.MessageBox-property-OKCANCEL\" rel=\"Ext.MessageBox-property-OKCANCEL\" class=\"docClass\">Ext.Msg.OKCANCEL</a>,\n    multiline: true,\n    fn: saveAddress,\n    animateTarget: 'addAddressBtn',\n    icon: <a href=\"#!/api/Ext.window.MessageBox-property-INFO\" rel=\"Ext.window.MessageBox-property-INFO\" class=\"docClass\">Ext.window.MessageBox.INFO</a>\n});\n</code></pre>\n"},"updateButtonText":{"!type":"fn() -> number","!doc":"<p>Set button text according to current buttonText property object</p>\n"},"updateProgress":{"!type":"fn(value?: number, progressText?: string, msg?: string) -> +Ext.window.MessageBox","!doc":"<p>Updates a progress-style message box's text and progress bar. Only relevant on message boxes\ninitiated via <a href=\"#!/api/Ext.window.MessageBox-method-progress\" rel=\"Ext.window.MessageBox-method-progress\" class=\"docClass\">progress</a> or <a href=\"#!/api/Ext.window.MessageBox-method-wait\" rel=\"Ext.window.MessageBox-method-wait\" class=\"docClass\">wait</a>,\nor by calling <a href=\"#!/api/Ext.window.MessageBox-method-show\" rel=\"Ext.window.MessageBox-method-show\" class=\"docClass\">show</a> with progress: true.</p>\n"},"updateText":{"!type":"fn(text: ?) -> !this"},"wait":{"!type":"fn(msg: string, title?: string, config?: ?) -> +Ext.window.MessageBox","!doc":"<p>Displays a message box with an infinitely auto-updating progress bar.  This can be used to block user\ninteraction while waiting for a long-running process to complete that does not have defined intervals.\nYou are responsible for closing the message box when the process is complete.</p>\n"}}},"Window":{"!doc":"<p>A specialized panel intended for use as an application window. Windows are floated, <a href=\"#!/api/Ext.window.Window-cfg-resizable\" rel=\"Ext.window.Window-cfg-resizable\" class=\"docClass\">resizable</a>, and\n<a href=\"#!/api/Ext.window.Window-cfg-draggable\" rel=\"Ext.window.Window-cfg-draggable\" class=\"docClass\">draggable</a> by default. Windows can be <a href=\"#!/api/Ext.window.Window-cfg-maximizable\" rel=\"Ext.window.Window-cfg-maximizable\" class=\"docClass\">maximized</a> to fill the viewport, restored to\ntheir prior size, and can be <a href=\"#!/api/Ext.window.Window-method-minimize\" rel=\"Ext.window.Window-method-minimize\" class=\"docClass\">minimize</a>d.</p>\n\n<p>Windows can also be linked to a <a href=\"#!/api/Ext.ZIndexManager\" rel=\"Ext.ZIndexManager\" class=\"docClass\">Ext.ZIndexManager</a> or managed by the <a href=\"#!/api/Ext.WindowManager\" rel=\"Ext.WindowManager\" class=\"docClass\">Ext.WindowManager</a> to provide\ngrouping, activation, to front, to back and other application-specific behavior.</p>\n\n<p>By default, Windows will be rendered to document.body. To <a href=\"#!/api/Ext.window.Window-cfg-constrain\" rel=\"Ext.window.Window-cfg-constrain\" class=\"docClass\">constrain</a> a Window to another element specify\n<a href=\"#!/api/Ext.Component-cfg-renderTo\" rel=\"Ext.Component-cfg-renderTo\" class=\"docClass\">renderTo</a>.</p>\n\n<p><strong>As with all <a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Container</a>s, it is important to consider how you want the Window to size\nand arrange any child Components. Choose an appropriate <a href=\"#!/api/Ext.window.Window-cfg-layout\" rel=\"Ext.window.Window-cfg-layout\" class=\"docClass\">layout</a> configuration which lays out child Components\nin the required manner.</strong></p>\n\n<pre class='inline-example '><code><a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.window.Window\" rel=\"Ext.window.Window\" class=\"docClass\">Ext.window.Window</a>', {\n    title: 'Hello',\n    height: 200,\n    width: 400,\n    layout: 'fit',\n    items: {  // Let's put an empty grid in just to illustrate fit layout\n        xtype: 'grid',\n        border: false,\n        columns: [{header: 'World'}],                 // One header just for show. There's no data,\n        store: <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('<a href=\"#!/api/Ext.data.ArrayStore\" rel=\"Ext.data.ArrayStore\" class=\"docClass\">Ext.data.ArrayStore</a>', {}) // A dummy empty data store\n    }\n}).show();\n</code></pre>\n","!type":"fn(config: +Ext.Element|string|Ext_window_Window_cfg)","prototype":{"!proto":"Ext.panel.Panel.prototype","animateTarget":{"!type":"string|+Ext.Element","!doc":"<p>Id or element from which the window should animate while opening.</p>\n"},"autoRender":{"!type":"bool","!doc":"<p>Windows render to the body on first show.</p>\n"},"baseCls":{"!type":"string","!doc":"<p>The base CSS class to apply to this panel's element.</p>\n"},"closable":{"!type":"bool","!doc":"<p>True to display the 'close' tool button and allow the user to close the window, false to hide the button and\ndisallow closing the window.</p>\n\n<p>By default, when close is requested by either clicking the close button in the header or pressing ESC when the\nWindow has focus, the <a href=\"#!/api/Ext.window.Window-method-close\" rel=\"Ext.window.Window-method-close\" class=\"docClass\">close</a> method will be called. This will <em><a href=\"#!/api/Ext.Component-method-destroy\" rel=\"Ext.Component-method-destroy\" class=\"docClass\">destroy</a></em> the\nWindow and its content meaning that it may not be reused.</p>\n\n<p>To make closing a Window <em>hide</em> the Window so that it may be reused, set <a href=\"#!/api/Ext.window.Window-cfg-closeAction\" rel=\"Ext.window.Window-cfg-closeAction\" class=\"docClass\">closeAction</a> to 'hide'.</p>\n"},"collapsed":{"!type":"bool","!doc":"<p>True to render the window collapsed, false to render it expanded. Note that if <a href=\"#!/api/Ext.window.Window-cfg-expandOnShow\" rel=\"Ext.window.Window-cfg-expandOnShow\" class=\"docClass\">expandOnShow</a>\nis true (the default) it will override the <code>collapsed</code> config and the window will always be\nexpanded when shown.</p>\n"},"collapsible":{"!type":"bool","!doc":"<p>inherited docs, same default</p>\n"},"constrain":{"!type":"bool","!doc":"<p>True to constrain the window within its containing element, false to allow it to fall outside of its containing\nelement. By default the window will be rendered to <code>document.body</code>. To render and constrain the window within\nanother element specify <a href=\"#!/api/Ext.window.Window-cfg-renderTo\" rel=\"Ext.window.Window-cfg-renderTo\" class=\"docClass\">renderTo</a>. Optionally the header only can be constrained\nusing <a href=\"#!/api/Ext.window.Window-cfg-constrainHeader\" rel=\"Ext.window.Window-cfg-constrainHeader\" class=\"docClass\">constrainHeader</a>.</p>\n"},"constrainHeader":{"!type":"bool","!doc":"<p>True to constrain the window header within its containing element (allowing the window body to fall outside of\nits containing element) or false to allow the header to fall outside its containing element.\nOptionally the entire window can be constrained using <a href=\"#!/api/Ext.window.Window-cfg-constrain\" rel=\"Ext.window.Window-cfg-constrain\" class=\"docClass\">constrain</a>.</p>\n"},"defaultFocus":{"!type":"string|number|+Ext.Component","!doc":"<p>Specifies a Component to receive focus when this Window is focused.</p>\n\n<p>This may be one of:</p>\n\n<ul>\n<li>The index of a footer Button.</li>\n<li>The id or <a href=\"#!/api/Ext.AbstractComponent-cfg-itemId\" rel=\"Ext.AbstractComponent-cfg-itemId\" class=\"docClass\">Ext.AbstractComponent.itemId</a> of a descendant Component.</li>\n<li>A Component.</li>\n</ul>\n\n"},"draggable":{"!type":"bool","!doc":"<p>True to allow the window to be dragged by the header bar, false to disable dragging. Note that\nby default the window will be centered in the viewport, so if dragging is disabled the window may need to be\npositioned programmatically after render (e.g., <code>myWindow.setPosition(100, 100);</code>).</p>\n"},"expandOnShow":{"!type":"bool","!doc":"<p>True to always expand the window when it is displayed, false to keep it in its current state (which may be\n<a href=\"#!/api/Ext.window.Window-cfg-collapsed\" rel=\"Ext.window.Window-cfg-collapsed\" class=\"docClass\">collapsed</a>) when displayed.</p>\n"},"ghost":{"!type":"bool|fn()","!doc":"<p>Set to false to disable the ghost panel during dragging the window.\nDo note that you should not set this to true, by default it is a function.</p>\n"},"hidden":{"!type":"bool","!doc":"<p>Render this Window hidden. If <code>true</code>, the <a href=\"#!/api/Ext.window.Window-method-hide\" rel=\"Ext.window.Window-method-hide\" class=\"docClass\">hide</a> method will be called internally.</p>\n"},"hideMode":{"!type":"string","!doc":"<p>Windows hide using offsets in order to preserve the scroll positions of their descendants.</p>\n"},"hideShadowOnDeactivate":{"!type":"bool","!doc":"<p>True to hide this Window's shadow when another floating item in the same z-index stack is activated.</p>\n"},"maximizable":{"!type":"bool","!doc":"<p>True to display the 'maximize' tool button and allow the user to maximize the window, false to hide the button\nand disallow maximizing the window. Note that when a window is maximized, the tool button\nwill automatically change to a 'restore' button with the appropriate behavior already built-in that will restore\nthe window to its previous size.</p>\n"},"maximized":{"!type":"bool","!doc":"<p>True to initially display the window in a maximized state.</p>\n"},"minHeight":{"!type":"number","!doc":"<p>inherit docs</p>\n"},"minWidth":{"!type":"number","!doc":"<p>inherit docs</p>\n"},"minimizable":{"!type":"bool","!doc":"<p>True to display the 'minimize' tool button and allow the user to minimize the window, false to hide the button\nand disallow minimizing the window. Note that this button provides no implementation -- the\nbehavior of minimizing a window is implementation-specific, so the minimize event must be handled and a custom\nminimize behavior implemented for this option to be useful.</p>\n"},"modal":{"!type":"bool","!doc":"<p>True to make the window modal and mask everything behind it when displayed, false to display it without\nrestricting access to other UI elements.</p>\n"},"onEsc":{"!type":"fn(k: ?, e: ?) -> !this"},"overlapHeader":{"!type":"bool","!doc":"<p>True to overlap the header in a panel over the framing of the panel itself. This is needed when frame:true (and\nis done automatically for you). Otherwise it is undefined. If you manually add rounded corners to a panel header\nwhich does not have frame:true, this will need to be set to true.</p>\n"},"plain":{"!type":"bool","!doc":"<p>True to render the window body with a transparent background so that it will blend into the framing elements,\nfalse to add a lighter background color to visually highlight the body element and separate it more distinctly\nfrom the surrounding frame.</p>\n"},"resizable":{"!type":"bool|?","!doc":"<p>Specify as <code>true</code> to allow user resizing at each edge and corner of the window, false to disable resizing.</p>\n\n<p>This may also be specified as a config object to <a href=\"#!/api/Ext.resizer.Resizer\" rel=\"Ext.resizer.Resizer\" class=\"docClass\">Ext.resizer.Resizer</a></p>\n"},"x":{"!type":"number","!doc":"<p>The X position of the left edge of the window on initial showing. Defaults to centering the Window within the\nwidth of the Window's container <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Element</a> (The Element that the Window is rendered to).</p>\n"},"y":{"!type":"number","!doc":"<p>The Y position of the top edge of the window on initial showing. Defaults to centering the Window within the\nheight of the Window's container <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Element</a> (The Element that the Window is rendered to).</p>\n"},"alwaysFramed":{"!type":"bool","!doc":"<p>Flag to Renderable to always look up the framing styles for this Component</p>\n"},"dd":{"!type":"+Ext.util.ComponentDragger","!doc":"<p>If this Window is configured <a href=\"#!/api/Ext.window.Window-cfg-draggable\" rel=\"Ext.window.Window-cfg-draggable\" class=\"docClass\">draggable</a>, this property will contain an instance of\n<a href=\"#!/api/Ext.util.ComponentDragger\" rel=\"Ext.util.ComponentDragger\" class=\"docClass\">Ext.util.ComponentDragger</a> (A subclass of <a href=\"#!/api/Ext.dd.DragTracker\" rel=\"Ext.dd.DragTracker\" class=\"docClass\">DragTracker</a>) which handles dragging\nthe Window's DOM Element, and constraining according to the <a href=\"#!/api/Ext.window.Window-cfg-constrain\" rel=\"Ext.window.Window-cfg-constrain\" class=\"docClass\">constrain</a> and <a href=\"#!/api/Ext.window.Window-cfg-constrainHeader\" rel=\"Ext.window.Window-cfg-constrainHeader\" class=\"docClass\">constrainHeader</a> .</p>\n\n<p>This has implementations of <code>onBeforeStart</code>, <code>onDrag</code> and <code>onEnd</code> which perform the dragging action. If\nextra logic is needed at these points, use <a href=\"#!/api/Ext.Function-method-createInterceptor\" rel=\"Ext.Function-method-createInterceptor\" class=\"docClass\">createInterceptor</a> or\n<a href=\"#!/api/Ext.Function-method-createSequence\" rel=\"Ext.Function-method-createSequence\" class=\"docClass\">createSequence</a> to augment the existing implementations.</p>\n"},"floating":{"!type":"bool","!doc":"<p>A Window is always floating.</p>\n"},"ignoreHeaderBorderManagement":{"!type":"bool"},"initialAlphaNum":{"!type":"+RegExp"},"isRootCfg":{"!type":"?","!doc":"<p>Buffer this so we don't recreate the same object</p>\n"},"isWindow":{"!type":"bool","!doc":"<p><code>true</code> in this class to identify an object as an instantiated Window, or subclass thereof.</p>\n"},"itemCls":{"!type":"string"},"addTools":{"!type":"fn() -> !this","!doc":"<p>Contribute class-specific tools to the header.\nCalled by Panel's initTools.</p>\n"},"afterCollapse":{"!type":"fn() -> !this","!doc":"<p>Invoked after the Panel is Collapsed.</p>\n"},"afterExpand":{"!type":"fn() -> !this","!doc":"<p>Invoked after the Panel is Expanded.</p>\n"},"afterHide":{"!type":"fn() -> !this","!doc":"<p>Invoked after the Component has been hidden.</p>\n\n<p>Gets passed the same <code>callback</code> and <code>scope</code> parameters that <a href=\"#!/api/Ext.window.Window-method-onHide\" rel=\"Ext.window.Window-method-onHide\" class=\"docClass\">onHide</a> received.</p>\n"},"afterRender":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior after rendering is complete. At this stage the Component’s Element\nwill have been styled according to the configuration, will have had any configured CSS class\nnames added, and will be in the configured visibility and the configured enable state.</p>\n"},"applyState":{"!type":"fn(state: ?) -> !this","!doc":"<p>Applies the state to the object. This should be overridden in subclasses to do\nmore complex state operations. By default it applies the state properties onto\nthe current object.</p>\n"},"beforeDestroy":{"!type":"fn() -> !this","!doc":"<p>Invoked before the Component is destroyed.</p>\n"},"doClose":{"!type":"fn() -> !this"},"getDefaultFocus":{"!type":"fn() -> !this","!doc":"<p>Gets the configured default focus item.  If a <a href=\"#!/api/Ext.window.Window-cfg-defaultFocus\" rel=\"Ext.window.Window-cfg-defaultFocus\" class=\"docClass\">defaultFocus</a> is set, it will\nreceive focus when the Window's <code>focus</code> method is called, otherwise the\nWindow itself will receive focus.</p>\n"},"getElConfig":{"!type":"fn() -> !this"},"getFocusEl":{"!type":"fn() -> +Ext.Element|+Ext.Component","!doc":"<p>Returns the focus holder element associated with this Window. By default, this is the Window's element.</p>\n"},"getState":{"!type":"fn() -> ?","!doc":"<p>The supplied default state gathering method for the AbstractComponent class.</p>\n\n<p>This method returns dimension settings such as <code>flex</code>, <code>anchor</code>, <code>width</code> and <code>height</code> along with <code>collapsed</code>\nstate.</p>\n\n<p>Subclasses which implement more complex state should call the superclass's implementation, and apply their state\nto the result if this basic state is to be saved.</p>\n\n<p>Note that Component state will only be saved if the Component has a <a href=\"#!/api/Ext.window.Window-cfg-stateId\" rel=\"Ext.window.Window-cfg-stateId\" class=\"docClass\">stateId</a> and there as a StateProvider\nconfigured for the document.</p>\n"},"initComponent":{"!type":"fn() -> !this","!doc":"<p>The initComponent template method is an important initialization step for a Component. It is intended to be\nimplemented by each subclass of <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> to provide any needed constructor logic. The\ninitComponent method of the class being created is called first, with each initComponent method\nup the hierarchy to <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> being called thereafter. This makes it easy to implement and,\nif needed, override the constructor logic of the Component at any step in the hierarchy.</p>\n\n<p>The initComponent method <strong>must</strong> contain a call to <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a> in order\nto ensure that the parent class' initComponent method is also called.</p>\n\n<p>All config options passed to the constructor are applied to <code>this</code> before initComponent is called,\nso you can simply access them with <code>this.someOption</code>.</p>\n\n<p>The following example demonstrates using a dynamic string for the text of a button at the time of\ninstantiation of the class.</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('DynamicButtonText', {\n    extend: '<a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a>',\n\n    initComponent: function() {\n        this.text = new Date();\n        this.renderTo = <a href=\"#!/api/Ext-method-getBody\" rel=\"Ext-method-getBody\" class=\"docClass\">Ext.getBody</a>();\n        this.callParent();\n    }\n});\n\n<a href=\"#!/api/Ext-method-onReady\" rel=\"Ext-method-onReady\" class=\"docClass\">Ext.onReady</a>(function() {\n    <a href=\"#!/api/Ext-method-create\" rel=\"Ext-method-create\" class=\"docClass\">Ext.create</a>('DynamicButtonText');\n});\n</code></pre>\n"},"initDraggable":{"!type":"fn() -> !this","!doc":"<p>Override. Windows are always simple draggable, they do not use Ext.Panel.DDs\nThe dd property in a Window is always a ComponentDragger</p>\n"},"initResizable":{"!type":"fn() -> !this"},"maximize":{"!type":"fn(this: +Ext.window.Window, eOpts: ?)","!doc":"<p>Fires after the window has been maximized.</p>\n"},"minimize":{"!type":"fn(this: +Ext.window.Window, eOpts: ?)","!doc":"<p>Fires after the window has been minimized.</p>\n"},"onFocus":{"!type":"fn() -> !this","!doc":"<p>Called when a Component's focusEl receives focus.\nIf there is a valid default focus Component to jump to, focus that,\notherwise continue as usual, focus this Component.</p>\n"},"onRender":{"!type":"fn(ct: ?, position: ?) -> !this","!doc":"<p>Template method called when this Component's DOM structure is created.</p>\n\n<p>At this point, this Component's (and all descendants') DOM structure <em>exists</em> but it has not\nbeen layed out (positioned and sized).</p>\n\n<p>Subclasses which override this to gain access to the structure at render time should\ncall the parent class's method before attempting to access any child elements of the Component.</p>\n"},"onShow":{"!type":"fn() -> !this","!doc":"<p>Allows addition of behavior to the show operation. After\ncalling the superclass's onShow, the Component will be visible.</p>\n\n<p>Override in subclasses where more complex behaviour is needed.</p>\n\n<p>Gets passed the same parameters as <a href=\"#!/api/Ext.window.Window-method-show\" rel=\"Ext.window.Window-method-show\" class=\"docClass\">show</a>.</p>\n"},"onWindowResize":{"!type":"fn() -> !this"},"restore":{"!type":"fn(this: +Ext.window.Window, eOpts: ?)","!doc":"<p>Fires after the window has been restored to its original size after being maximized.</p>\n"},"resumeHeaderLayout":{"!type":"fn(changed: ?) -> !this"},"syncMonitorWindowResize":{"!type":"fn() -> !this","!doc":"<p>Synchronizes the presence of our listener for window resize events. This method\nshould be called whenever this status might change.</p>\n"},"toggleMaximize":{"!type":"fn() -> +Ext.window.Window","!doc":"<p>A shortcut method for toggling between <a href=\"#!/api/Ext.window.Window-method-maximize\" rel=\"Ext.window.Window-method-maximize\" class=\"docClass\">maximize</a> and <a href=\"#!/api/Ext.window.Window-method-restore\" rel=\"Ext.window.Window-method-restore\" class=\"docClass\">restore</a> based on the current maximized\nstate of the window.</p>\n"},"activate":{"!type":"fn(this: +Ext.window.Window, eOpts: ?)","!doc":"<p>Fires after the window has been visually activated via <a href=\"#!/api/Ext.window.Window-method-setActive\" rel=\"Ext.window.Window-method-setActive\" class=\"docClass\">setActive</a>.</p>\n"},"deactivate":{"!type":"fn(this: +Ext.window.Window, eOpts: ?)","!doc":"<p>Fires after the window has been visually deactivated via <a href=\"#!/api/Ext.window.Window-method-setActive\" rel=\"Ext.window.Window-method-setActive\" class=\"docClass\">setActive</a>.</p>\n"},"resize":{"!type":"fn(this: +Ext.window.Window, width: number, height: number, eOpts: ?)","!doc":"<p>Fires after the window has been resized.</p>\n"}}}}}};
});