-});
-</code></pre>
- * <p>The server script needs to return an executable Javascript statement which, when processed
- * using <tt>eval()</tt>, will return either a config object with an {@link Ext.Component#xtype xtype},
- * or an instantiated Component. The server might return this for example:</p><pre><code>
-(function() {
- function formatDate(value){
- return value ? value.dateFormat('M d, Y') : '';
- };
-
- var store = new Ext.data.Store({
- url: 'get-invoice-data.php',
- baseParams: {
- startDate: '01/01/2008',
- endDate: '01/31/2008'
- },
- reader: new Ext.data.JsonReader({
- record: 'transaction',
- idProperty: 'id',
- totalRecords: 'total'
- }, [
- 'customer',
- 'invNo',
- {name: 'date', type: 'date', dateFormat: 'm/d/Y'},
- {name: 'value', type: 'float'}
- ])
- });
-
- var grid = new Ext.grid.GridPanel({
- title: 'Invoice Report',
- bbar: new Ext.PagingToolbar(store),
- store: store,
- columns: [
- {header: "Customer", width: 250, dataIndex: 'customer', sortable: true},
- {header: "Invoice Number", width: 120, dataIndex: 'invNo', sortable: true},
- {header: "Invoice Date", width: 100, dataIndex: 'date', renderer: formatDate, sortable: true},
- {header: "Value", width: 120, dataIndex: 'value', renderer: 'usMoney', sortable: true}
- ],
- });
- store.load();
- return grid; // return instantiated component
-})();
-</code></pre>
- * <p>When the above code fragment is passed through the <tt>eval</tt> function in the success handler
- * of the Ajax request, the code is executed by the Javascript processor, and the anonymous function
- * runs, and returns the instantiated grid component.</p>
- * <p>Note: since the code above is <i>generated</i> by a server script, the <tt>baseParams</tt> for
- * the Store, the metadata to allow generation of the Record layout, and the ColumnModel
- * can all be generated into the code since these are all known on the server.</p>
- *
- * @xtype container
- */
-Ext.Container = Ext.extend(Ext.BoxComponent, {
- <div id="cfg-Ext.Container-monitorResize"></div>/**
- * @cfg {Boolean} monitorResize
- * True to automatically monitor window resize events to handle anything that is sensitive to the current size
- * of the viewport. This value is typically managed by the chosen <code>{@link #layout}</code> and should not need
- * to be set manually.
- */
- <div id="cfg-Ext.Container-layout"></div>/**
- * @cfg {String/Object} layout
- * <p><b>*Important</b>: In order for child items to be correctly sized and
- * positioned, typically a layout manager <b>must</b> be specified through
- * the <code>layout</code> configuration option.</p>
- * <br><p>The sizing and positioning of child {@link items} is the responsibility of
- * the Container's layout manager which creates and manages the type of layout
- * you have in mind. For example:</p><pre><code>
-new Ext.Window({
- width:300, height: 300,
- layout: 'fit', // explicitly set layout manager: override the default (layout:'auto')
- items: [{
- title: 'Panel inside a Window'
- }]
-}).show();
- * </code></pre>
- * <p>If the {@link #layout} configuration is not explicitly specified for
- * a general purpose container (e.g. Container or Panel) the
- * {@link Ext.layout.ContainerLayout default layout manager} will be used
- * which does nothing but render child components sequentially into the
- * Container (no sizing or positioning will be performed in this situation).
- * Some container classes implicitly specify a default layout
- * (e.g. FormPanel specifies <code>layout:'form'</code>). Other specific
- * purpose classes internally specify/manage their internal layout (e.g.
- * GridPanel, TabPanel, TreePanel, Toolbar, Menu, etc.).</p>
- * <br><p><b><code>layout</code></b> may be specified as either as an Object or
- * as a String:</p><div><ul class="mdetail-params">
- *
- * <li><u>Specify as an Object</u></li>
- * <div><ul class="mdetail-params">
- * <li>Example usage:</li>
-<pre><code>
-layout: {
- type: 'vbox',
- padding: '5',
- align: 'left'
-}
-</code></pre>
- *
- * <li><tt><b>type</b></tt></li>
- * <br/><p>The layout type to be used for this container. If not specified,
- * a default {@link Ext.layout.ContainerLayout} will be created and used.</p>
- * <br/><p>Valid layout <tt>type</tt> values are:</p>
- * <div class="sub-desc"><ul class="mdetail-params">
- * <li><tt><b>{@link Ext.layout.AbsoluteLayout absolute}</b></tt></li>
- * <li><tt><b>{@link Ext.layout.AccordionLayout accordion}</b></tt></li>
- * <li><tt><b>{@link Ext.layout.AnchorLayout anchor}</b></tt></li>
- * <li><tt><b>{@link Ext.layout.ContainerLayout auto}</b></tt> <b>Default</b></li>
- * <li><tt><b>{@link Ext.layout.BorderLayout border}</b></tt></li>
- * <li><tt><b>{@link Ext.layout.CardLayout card}</b></tt></li>
- * <li><tt><b>{@link Ext.layout.ColumnLayout column}</b></tt></li>
- * <li><tt><b>{@link Ext.layout.FitLayout fit}</b></tt></li>
- * <li><tt><b>{@link Ext.layout.FormLayout form}</b></tt></li>
- * <li><tt><b>{@link Ext.layout.HBoxLayout hbox}</b></tt></li>
- * <li><tt><b>{@link Ext.layout.MenuLayout menu}</b></tt></li>
- * <li><tt><b>{@link Ext.layout.TableLayout table}</b></tt></li>
- * <li><tt><b>{@link Ext.layout.ToolbarLayout toolbar}</b></tt></li>
- * <li><tt><b>{@link Ext.layout.VBoxLayout vbox}</b></tt></li>
- * </ul></div>
- *
- * <li>Layout specific configuration properties</li>
- * <br/><p>Additional layout specific configuration properties may also be
- * specified. For complete details regarding the valid config options for
- * each layout type, see the layout class corresponding to the <tt>type</tt>
- * specified.</p>
- *
- * </ul></div>
- *
- * <li><u>Specify as a String</u></li>
- * <div><ul class="mdetail-params">
- * <li>Example usage:</li>
-<pre><code>
-layout: 'vbox',
-layoutConfig: {
- padding: '5',
- align: 'left'
-}
-</code></pre>
- * <li><tt><b>layout</b></tt></li>
- * <br/><p>The layout <tt>type</tt> to be used for this container (see list
- * of valid layout type values above).</p><br/>
- * <li><tt><b>{@link #layoutConfig}</b></tt></li>
- * <br/><p>Additional layout specific configuration properties. For complete
- * details regarding the valid config options for each layout type, see the
- * layout class corresponding to the <tt>layout</tt> specified.</p>
- * </ul></div></ul></div>
- */
- <div id="cfg-Ext.Container-layoutConfig"></div>/**
- * @cfg {Object} layoutConfig
- * This is a config object containing properties specific to the chosen
- * <b><code>{@link #layout}</code></b> if <b><code>{@link #layout}</code></b>
- * has been specified as a <i>string</i>.</p>
- */
- <div id="cfg-Ext.Container-bufferResize"></div>/**
- * @cfg {Boolean/Number} bufferResize
- * When set to true (100 milliseconds) or a number of milliseconds, the layout assigned for this container will buffer
- * the frequency it calculates and does a re-layout of components. This is useful for heavy containers or containers
- * with a large quantity of sub-components for which frequent layout calls would be expensive.
- */
- bufferResize: 100,