X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/d41dc04ad17d1d9125fb2cf72db2b4782dbe3a8c..c8256059947f3aa8f5b0a9a2acf55e2142bb4742:/docs/output/Ext.Container.html?ds=sidebyside diff --git a/docs/output/Ext.Container.html b/docs/output/Ext.Container.html index fb4029bc..6fcdfd18 100644 --- a/docs/output/Ext.Container.html +++ b/docs/output/Ext.Container.html @@ -1,46 +1,27 @@ -
-
- Properties - Methods - Events - Config Options - Direct Link -
-
-
Observable
-  Component
-    BoxComponent
-      Container
-

Class Ext.Container

- - - - - - -
Package:Ext
Defined In:Container.js
Class:Container
Subclasses:Panel, Viewport
Extends:BoxComponent
-
- * -

Base class for any Ext.BoxComponent that can contain other components. The most commonly -used Container classes are Ext.Panel, Ext.Window and Ext.TabPanel, but you can -create a lightweight Container to encapsulate an HTML element that is created to your -specifications at render time by using the autoEl config option -which takes the form of a DomHelper specification. If you do not need -the capabilities offered by the above mentioned classes, for instance embedded -column layouts inside FormPanels, then this is a useful technique.

-

The code below illustrates both how to explicitly create a Container, and how to implicitly -create one using the 'container' xtype:

var embeddedColumns = new Ext.Container({
-    autoEl: {},
+
Properties
Methods
Events
Config Options
Direct Link
Observable
  Component
    BoxComponent
      Container
Class Ext.Container
Package:Ext
Defined In:Container.js
Class:Container
Subclasses:Panel,
Toolbar,
Viewport,
Menu
Extends:BoxComponent
Base class for any Ext.BoxComponent that may contain other Components. Containers handle the
+basic behavior of containing items, namely adding, inserting and removing items.

+
The most commonly used Container classes are Ext.Panel, Ext.Window and Ext.TabPanel.
+If you do not need the capabilities offered by the aforementioned classes you can create a lightweight
+Container to be encapsulated by an HTML element to your specifications by using the
+autoEl config option. This is a useful technique when creating
+embedded column layouts inside FormPanels
+for example.

+
The code below illustrates both how to explicitly create a Container, and how to implicitly
+create one using the 'container' xtype:
// explicitly create a Container
+var embeddedColumns = new Ext.Container({
+    autoEl: 'div',  // This is the default
     layout: 'column',
     defaults: {
+        // implicitly create Container by specifying xtype
         xtype: 'container',
-        autoEl: {},
+        autoEl: 'div', // This is the default.
         layout: 'form',
         columnWidth: 0.5,
         style: {
             padding: '10px'
         }
     },
+//  The two items below will be Ext.Containers, each encapsulated by a <DIV> element.
     items: [{
         items: {
             xtype: 'datefield',
@@ -55,341 +36,397 @@ create one using the 'container' xtype:
var embeddedCo
         }
     }]
 });

-Containers handle the basic behavior of containing items, namely adding, inserting and removing them.
-The specific layout logic required to visually render contained items is delegated to any one of the different
-layout classes available.

-
When either specifying child items of a Container, or dynamically adding components to a Container,
-remember to consider how you wish the Container to arrange those child elements, and whether those child elements
-need to be sized using one of Ext's built-in layout schemes.

-
By default, Containers use the ContainerLayout scheme. This simply renders
-child components, appending them one after the other inside the Container, and does not apply any sizing at all.
-This is a common source of confusion when widgets like GridPanels or TreePanels are added to Containers for
-which no layout has been specified. If a Container is left to use the ContainerLayout scheme, none of its child
-components will be resized, or changed in any way when the Container is resized.

-
A very common example of this is where a developer will attempt to add a GridPanel to a TabPanel by wrapping
-the GridPanel inside a wrapping Panel and add that wrapping Panel to the TabPanel. This misses the point that
-Ext's inheritance means that a GridPanel is a Component which can be added unadorned into a Container. If
-that wrapping Panel has no layout configuration, then the GridPanel will not be sized as expected.

-
Below is an example of adding a newly created GridPanel to a TabPanel. A TabPanel uses Ext.layout.CardLayout
-as its layout manager which means all its child items are sized to fit exactly into its client area. The following
-code requires prior knowledge of how to create GridPanels. See Ext.grid.GridPanel, Ext.data.Store
-and Ext.data.JsonReader as well as the grid examples in the Ext installation's examples/grid
-directory.
//  Create the GridPanel.
-myGrid = new Ext.grid.GridPanel({
+
Layout

+
Container classes delegate the rendering of child Components to a layout
+manager class which must be configured into the Container using the
+layout configuration property.

+
When either specifying child items of a Container,
+or dynamically adding Components to a Container, remember to
+consider how you wish the Container to arrange those child elements, and
+whether those child elements need to be sized using one of Ext's built-in
+layout schemes. By default, Containers use the
+ContainerLayout scheme which only
+renders child components, appending them one after the other inside the
+Container, and does not apply any sizing at all.

+
A common mistake is when a developer neglects to specify a
+layout (e.g. widgets like GridPanels or
+TreePanels are added to Containers for which no layout
+has been specified). If a Container is left to use the default
+ContainerLayout scheme, none of its
+child components will be resized, or changed in any way when the Container
+is resized.

+
Certain layout managers allow dynamic addition of child components.
+Those that do include Ext.layout.CardLayout,
+Ext.layout.AnchorLayout, Ext.layout.FormLayout, and
+Ext.layout.TableLayout. For example:
//  Create the GridPanel.
+var myNewGrid = new Ext.grid.GridPanel({
     store: myStore,
     columns: myColumnModel,
-    title: 'Results',
+    title: 'Results', // the title becomes the title of the tab
 });
 
-myTabPanel.add(myGrid);
-myTabPanel.setActiveTab(myGrid);
        

-        
-        

-                
-        
Config Options

-        
-            
-                
-                
-            
-                
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
Config OptionsDefined By
 
-        
-            allowDomMove : Boolean            

-                            Whether the component can move the Dom node when rendering (defaults to true).                        

-        		Component
 
-        
-            disabled : Boolean            

-                            Render this component disabled (default is false).                        

-        		Component
 
-        
-            disabledClass : String            

-                            CSS class added to the component when it is disabled (defaults to "x-item-disabled").                        

-        		Component
Public Events
EventDefined By

\ No newline at end of file