docs/source/Container.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-container-Container'>/**
  19 </span> * Base class for any Ext.Component that may contain other Components. Containers handle the basic behavior of
  20  * containing items, namely adding, inserting and removing items.
  21  *
  22  * The most commonly used Container classes are Ext.panel.Panel, Ext.window.Window and
  23  * Ext.tab.Panel. If you do not need the capabilities offered by the aforementioned classes you can create a
  24  * lightweight Container to be encapsulated by an HTML element to your specifications by using the
  25  * {@link Ext.Component#autoEl autoEl} config option.
  26  *
  27  * The code below illustrates how to explicitly create a Container:
  28  *
  29  *     @example
  30  *     // Explicitly create a Container
  31  *     Ext.create('Ext.container.Container', {
  32  *         layout: {
  33  *             type: 'hbox'
  34  *         },
  35  *         width: 400,
  36  *         renderTo: Ext.getBody(),
  37  *         border: 1,
  38  *         style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
  39  *         defaults: {
  40  *             labelWidth: 80,
  41  *             // implicitly create Container by specifying xtype
  42  *             xtype: 'datefield',
  43  *             flex: 1,
  44  *             style: {
  45  *                 padding: '10px'
  46  *             }
  47  *         },
  48  *         items: [{
  49  *             xtype: 'datefield',
  50  *             name: 'startDate',
  51  *             fieldLabel: 'Start date'
  52  *         },{
  53  *             xtype: 'datefield',
  54  *             name: 'endDate',
  55  *             fieldLabel: 'End date'
  56  *         }]
  57  *     });
  58  *
  59  * ## Layout
  60  *
  61  * Container classes delegate the rendering of child Components to a layout manager class which must be configured into
  62  * the Container using the `{@link #layout}` configuration property.
  63  *
  64  * When either specifying child `{@link #items}` of a Container, or dynamically {@link #add adding} Components to a
  65  * Container, remember to consider how you wish the Container to arrange those child elements, and whether those child
  66  * elements need to be sized using one of Ext's built-in `{@link #layout}` schemes. By default, Containers use the
  67  * {@link Ext.layout.container.Auto Auto} scheme which only renders child components, appending them one after the other
  68  * inside the Container, and **does not apply any sizing** at all.
  69  *
  70  * A common mistake is when a developer neglects to specify a `{@link #layout}` (e.g. widgets like GridPanels or
  71  * TreePanels are added to Containers for which no `{@link #layout}` has been specified). If a Container is left to
  72  * use the default {@link Ext.layout.container.Auto Auto} scheme, none of its child components will be resized, or changed in
  73  * any way when the Container is resized.
  74  *
  75  * Certain layout managers allow dynamic addition of child components. Those that do include
  76  * Ext.layout.container.Card, Ext.layout.container.Anchor, Ext.layout.container.VBox,
  77  * Ext.layout.container.HBox, and Ext.layout.container.Table. For example:
  78  *
  79  *     //  Create the GridPanel.
  80  *     var myNewGrid = new Ext.grid.Panel({
  81  *         store: myStore,
  82  *         headers: myHeaders,
  83  *         title: 'Results', // the title becomes the title of the tab
  84  *     });
  85  *
  86  *     myTabPanel.add(myNewGrid); // {@link Ext.tab.Panel} implicitly uses {@link Ext.layout.container.Card Card}
  87  *     myTabPanel.{@link Ext.tab.Panel#setActiveTab setActiveTab}(myNewGrid);
  88  *
  89  * The example above adds a newly created GridPanel to a TabPanel. Note that a TabPanel uses {@link
  90  * Ext.layout.container.Card} as its layout manager which means all its child items are sized to {@link
  91  * Ext.layout.container.Fit fit} exactly into its client area.
  92  *
  93  * **_Overnesting is a common problem_**. An example of overnesting occurs when a GridPanel is added to a TabPanel by
  94  * wrapping the GridPanel _inside_ a wrapping Panel (that has no `{@link #layout}` specified) and then add that
  95  * wrapping Panel to the TabPanel. The point to realize is that a GridPanel **is** a Component which can be added
  96  * directly to a Container. If the wrapping Panel has no `{@link #layout}` configuration, then the overnested
  97  * GridPanel will not be sized as expected.
  98  *
  99  * ## Adding via remote configuration
 100  *
 101  * A server side script can be used to add Components which are generated dynamically on the server. An example of
 102  * adding a GridPanel to a TabPanel where the GridPanel is generated by the server based on certain parameters:
 103  *
 104  *     // execute an Ajax request to invoke server side script:
 105  *     Ext.Ajax.request({
 106  *         url: 'gen-invoice-grid.php',
 107  *         // send additional parameters to instruct server script
 108  *         params: {
 109  *             startDate: Ext.getCmp('start-date').getValue(),
 110  *             endDate: Ext.getCmp('end-date').getValue()
 111  *         },
 112  *         // process the response object to add it to the TabPanel:
 113  *         success: function(xhr) {
 114  *             var newComponent = eval(xhr.responseText); // see discussion below
 115  *             myTabPanel.add(newComponent); // add the component to the TabPanel
 116  *             myTabPanel.setActiveTab(newComponent);
 117  *         },
 118  *         failure: function() {
 119  *             Ext.Msg.alert(&quot;Grid create failed&quot;, &quot;Server communication failure&quot;);
 120  *         }
 121  *     });
 122  *
 123  * The server script needs to return a JSON representation of a configuration object, which, when decoded will return a
 124  * config object with an {@link Ext.Component#xtype xtype}. The server might return the following JSON:
 125  *
 126  *     {
 127  *         &quot;xtype&quot;: 'grid',
 128  *         &quot;title&quot;: 'Invoice Report',
 129  *         &quot;store&quot;: {
 130  *             &quot;model&quot;: 'Invoice',
 131  *             &quot;proxy&quot;: {
 132  *                 &quot;type&quot;: 'ajax',
 133  *                 &quot;url&quot;: 'get-invoice-data.php',
 134  *                 &quot;reader&quot;: {
 135  *                     &quot;type&quot;: 'json'
 136  *                     &quot;record&quot;: 'transaction',
 137  *                     &quot;idProperty&quot;: 'id',
 138  *                     &quot;totalRecords&quot;: 'total'
 139  *                 })
 140  *             },
 141  *             &quot;autoLoad&quot;: {
 142  *                 &quot;params&quot;: {
 143  *                     &quot;startDate&quot;: '01/01/2008',
 144  *                     &quot;endDate&quot;: '01/31/2008'
 145  *                 }
 146  *             }
 147  *         },
 148  *         &quot;headers&quot;: [
 149  *             {&quot;header&quot;: &quot;Customer&quot;, &quot;width&quot;: 250, &quot;dataIndex&quot;: 'customer', &quot;sortable&quot;: true},
 150  *             {&quot;header&quot;: &quot;Invoice Number&quot;, &quot;width&quot;: 120, &quot;dataIndex&quot;: 'invNo', &quot;sortable&quot;: true},
 151  *             {&quot;header&quot;: &quot;Invoice Date&quot;, &quot;width&quot;: 100, &quot;dataIndex&quot;: 'date', &quot;renderer&quot;: Ext.util.Format.dateRenderer('M d, y'), &quot;sortable&quot;: true},
 152  *             {&quot;header&quot;: &quot;Value&quot;, &quot;width&quot;: 120, &quot;dataIndex&quot;: 'value', &quot;renderer&quot;: 'usMoney', &quot;sortable&quot;: true}
 153  *         ]
 154  *     }
 155  *
 156  * When the above code fragment is passed through the `eval` function in the success handler of the Ajax request, the
 157  * result will be a config object which, when added to a Container, will cause instantiation of a GridPanel. **Be sure
 158  * that the Container is configured with a layout which sizes and positions the child items to your requirements.**
 159  *
 160  * **Note:** since the code above is _generated_ by a server script, the `autoLoad` params for the Store, the user's
 161  * preferred date format, the metadata to allow generation of the Model layout, and the ColumnModel can all be generated
 162  * into the code since these are all known on the server.
 163  */
 164 Ext.define('Ext.container.Container', {
 165     extend: 'Ext.container.AbstractContainer',
 166     alias: 'widget.container',
 167     alternateClassName: 'Ext.Container',
 168
 169 <span id='Ext-container-Container-method-getChildByElement'>    /**
 170 </span>     * Return the immediate child Component in which the passed element is located.
 171      * @param {Ext.Element/HTMLElement/String} el The element to test (or ID of element).
 172      * @return {Ext.Component} The child item which contains the passed element.
 173      */
 174     getChildByElement: function(el) {
 175         var item,
 176             itemEl,
 177             i = 0,
 178             it = this.items.items,
 179             ln = it.length;
 180
 181         el = Ext.getDom(el);
 182         for (; i &lt; ln; i++) {
 183             item = it[i];
 184             itemEl = item.getEl();
 185             if ((itemEl.dom === el) || itemEl.contains(el)) {
 186                 return item;
 187             }
 188         }
 189         return null;
 190     }
 191 });
 192 </pre>
 193 </body>
 194 </html>