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