X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/d41dc04ad17d1d9125fb2cf72db2b4782dbe3a8c..05ce1c11e98b33f14ddee184493bd5a60dc947e2:/docs/output/Ext.Container.html diff --git a/docs/output/Ext.Container.html b/docs/output/Ext.Container.html index fb4029bc..1fda2805 100644 --- a/docs/output/Ext.Container.html +++ b/docs/output/Ext.Container.html @@ -1,395 +1,391 @@ -
-
- 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: {},
-    layout: 'column',
-    defaults: {
-        xtype: 'container',
-        autoEl: {},
-        layout: 'form',
-        columnWidth: 0.5,
-        style: {
-            padding: '10px'
+
Observable
  Component
    BoxComponent
      Container

Class Ext.Container

Package:Ext
Defined In:Container.js
Class:Container
Subclasses:Panel, Toolbar, Viewport, Menu
Extends:BoxComponent
xtype:container

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: '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',
+            name: 'startDate',
+            fieldLabel: 'Start date'
+        }
+    }, {
+        items: {
+            xtype: 'datefield',
+            name: 'endDate',
+            fieldLabel: 'End date'
+        }
+    }]
+});

+

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', // the title becomes the title of the tab

+});
+
+myTabPanel.add(myNewGrid); // Ext.TabPanel implicitly uses CardLayout

+myTabPanel.setActiveTab(myNewGrid);

+

The example above adds a newly created GridPanel to a TabPanel. Note that +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. +

Overnesting is a common problem. +An example of overnesting occurs when a GridPanel is added to a TabPanel +by wrapping the GridPanel inside a wrapping Panel (that has no +layout specified) and then add that wrapping Panel +to the TabPanel. The point to realize is that a GridPanel is a +Component which can be added directly to a Container. If the wrapping Panel +has no layout configuration, then the overnested +GridPanel will not be sized as expected.

+

Adding via remote configuration

+

A server side script can be used to add Components which are generated dynamically on the server. +An example of adding a GridPanel to a TabPanel where the GridPanel is generated by the server +based on certain parameters: +

// execute an Ajax request to invoke server side script:

+Ext.Ajax.request({
+    url: 'gen-invoice-grid.php',
+    // send additional parameters to instruct server script

+    params: {
+        startDate: Ext.getCmp('start-date').getValue(),
+        endDate: Ext.getCmp('end-date').getValue()
+    },
+    // process the response object to add it to the TabPanel:

+    success: function(xhr) {
+        var newComponent = eval(xhr.responseText); // see discussion below

+        myTabPanel.add(newComponent); // add the component to the TabPanel

+        myTabPanel.setActiveTab(newComponent);
+    },
+    failure: function() {
+        Ext.Msg.alert("Grid create failed", "Server communication failure");
+    }
+});
+

The server script needs to return an executable Javascript statement which, when processed +using eval(), will return either a config object with an xtype, +or an instantiated Component. The server might return this for example:

(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

+})();
+

When the above code fragment is passed through the eval 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.

+

Note: since the code above is generated by a server script, the baseParams 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.

Config Options

Config OptionsDefined By
 allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component

Public Events

EventDefined By
\ No newline at end of file