X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..c930e9176a5a85509c5b0230e2bff5c22a591432:/docs/output/Ext.TabPanel.html diff --git a/docs/output/Ext.TabPanel.html b/docs/output/Ext.TabPanel.html index e6cd1cc0..45cc9411 100644 --- a/docs/output/Ext.TabPanel.html +++ b/docs/output/Ext.TabPanel.html @@ -1,113 +1,31 @@ -
-
- Properties - Methods - Events - Config Options - Direct Link -
-
-
Observable
-  Component
-    BoxComponent
-      Container
-        Panel
-          TabPanel
-

Class Ext.TabPanel

- - - - - -
Package:Ext
Defined In:TabPanel.js
Class:TabPanel
Extends:Panel
-
- * -

A basic tab container. TabPanels can be used exactly like a standard Ext.Panel for layout -purposes, but also have special support for containing child Components that are managed using a CardLayout -layout manager, and displayed as seperate tabs.

-

There is no actual tab class — each tab is simply an Component such -as a Panel. However, when rendered in a TabPanel, each child Component can fire -additional events that only exist for tabs and are not available from other Component. These are:

- -

To add Components to a TabPanel which are generated dynamically on the server, it is necessary to -create a server script to generate the Javascript to create the Component required.

-For example, to add a GridPanel to a TabPanel where the GridPanel is generated by the server -based on certain parameters, you would need to execute an Ajax request to invoke your the script, -and process the response object to add it to the TabPanel:

Ext.Ajax.request({
-    url: 'gen-invoice-grid.php',
-    params: {
-        startDate = Ext.getCmp('start-date').getValue(),
-        endDate = Ext.getCmp('end-date').getValue()
-    },
-    success: function(xhr) {
-        var newComponent = eval(xhr.responseText);
-        myTabPanel.add(newComponent);
-        myTabPanel.setActiveTab(newComponent);
-    },
-    failure: function() {
-        Ext.Msg.alert("Grid create failed", "Server communication failure");
-    }
-});
-

The server script would need to return an executable Javascript statement which, when processed -using eval() will return either a config object with an xtype, -or an instantiated Component. 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',
-            id: '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;
-})();
-

Since that code is generated by a server script, the baseParams for the Store -can be configured into the Store. The metadata to allow generation of the Record layout, and the -ColumnModel is also known on the server, so these can be generated into the code.

-

When that 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 grid.

-

There are several other methods available for creating TabPanels. The output of the following -examples should produce exactly the same appearance. The tabs can be created and rendered completely -in code, as in this example:

-
var tabs = new Ext.TabPanel({
+
Properties
Methods
Events
Config Options
Direct Link
Observable
  Component
    BoxComponent
      Container
        Panel
          TabPanel
Class Ext.TabPanel
Package:Ext
Defined In:TabPanel.js
Class:TabPanel
Extends:Panel
xtype:tabpanel
A basic tab container. TabPanels can be used exactly like a standard Ext.Panel
+for layout purposes, but also have special support for containing child Components
+(items) that are managed using a
+CardLayout layout manager, and displayed as separate tabs.

+Note: By default, a tab's close tool destroys the child tab Component
+and all its descendants. This makes the child tab Component, and all its descendants unusable. To enable
+re-use of a tab, configure the TabPanel with autoDestroy: false.
+
TabPanel header/footer elements

+
TabPanels use their header or footer element
+(depending on the tabPosition configuration) to accommodate the tab selector buttons.
+This means that a TabPanel will not display any configured title, and will not display any
+configured header tools.

+
To display a header, embed the TabPanel in a Panel which uses
+layout:'fit'.

+
Tab Events

+
There is no actual tab class — each tab is simply a Component
+such as a Panel. However, when rendered in a TabPanel, each child Component
+can fire additional events that only exist for tabs and are not available from other Components.
+These events are:

+
    
+
  • activate : Fires when this Component becomes
+the active tab.
    • 
+
  • deactivate : Fires when the Component that
+was the active tab becomes deactivated.
    • 
+

+
Creating TabPanels from Code

+
TabPanels can be created and rendered completely in code, as in this example:

+
var tabs = new Ext.TabPanel({
     renderTo: Ext.getBody(),
     activeTab: 0,
     items: [{
@@ -118,15 +36,20 @@ in code, as in this example:

         html: 'Another one'
     }]
 });

-
TabPanels can also be rendered from pre-existing markup in a couple of ways.  See the autoTabs example for
-rendering entirely from markup that is already structured correctly as a TabPanel (a container div with
-one or more nested tab divs with class 'x-tab'). You can also render from markup that is not strictly
-structured by simply specifying by id which elements should be the container and the tabs. Using this method,
-tab content can be pulled from different elements within the page by id regardless of page structure.  Note
-that the tab divs in this example contain the class 'x-hide-display' so that they can be rendered deferred
-without displaying outside the tabs. You could alternately set deferredRender to false to render all
-content tabs on page load. For example:
-
var tabs = new Ext.TabPanel({
+
Creating TabPanels from Existing Markup

+
TabPanels can also be rendered from pre-existing markup in a couple of ways.

+
    
+
  • Pre-Structured Markup
    • 
+
    
+
    A container div with one or more nested tab divs with class 'x-tab' can be rendered entirely
+from existing markup (See the autoTabs example).
    
+
    
+
  • Un-Structured Markup
    • 
+
    
+
    A TabPanel can also be rendered from markup that is not strictly structured by simply specifying by id
+which elements should be the container and the tabs. Using this method tab content can be pulled from different
+elements within the page by id regardless of page structure. For example:
    
+
    var tabs = new Ext.TabPanel({
     renderTo: 'my-tabs',
     activeTab: 0,
     items:[
@@ -138,175 +61,83 @@ content tabs on page load. For example:
 // Note that the tabs do not have to be nested within the container (although they can be)
 <div id="my-tabs"></div>
 <div id="tab1" class="x-hide-display">A simple tab</div>
-<div id="tab2" class="x-hide-display">Another one</div>
            
    
-        
-        
    
-                
-        
    Config Options
    
-        
-            
-                
-                
-            
-                
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
    Config OptionsDefined By
     
-        
-            activeTab : String/Number            
    
-                            A string id or the numeric index of the tab that should be initially activated on render (defaults to none).                        
    
-            		TabPanel
     
-        
-            allowDomMove : Boolean            
    
-                            Whether the component can move the Dom node when rendering (defaults to true).                        
    
-            		Component

\ No newline at end of file