X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/d41dc04ad17d1d9125fb2cf72db2b4782dbe3a8c..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/docs/output/Ext.TabPanel.html diff --git a/docs/output/Ext.TabPanel.html b/docs/output/Ext.TabPanel.html deleted file mode 100644 index e6cd1cc0..00000000 --- a/docs/output/Ext.TabPanel.html +++ /dev/null @@ -1,3906 +0,0 @@ -
-
- 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({
-    renderTo: Ext.getBody(),
-    activeTab: 0,
-    items: [{
-        title: 'Tab 1',
-        html: 'A simple tab'
-    },{
-        title: 'Tab 2',
-        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({
-    renderTo: 'my-tabs',
-    activeTab: 0,
-    items:[
-        {contentEl:'tab1', title:'Tab 1'},
-        {contentEl:'tab2', title:'Tab 2'}
-    ]
-});
-
-// 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
  - - baseCls : String
- The base CSS class applied to the panel (defaults to 'x-tab-panel').
- 		TabPanel
  - - buttonAlign : String
- The alignment of any buttons added to this panel. Valid values are 'right,' 'left' and 'center' (defaults to 'right').
- 		Panel
  - - buttons : Array
- An array of Ext.Buttons or Ext.Button configs used to add buttons to the footer of this panel.
- 		Panel
  - - collapsedCls : String
- A CSS class to add to the panel's element after it has been collapsed (defaults to 'x-panel-collapsed').
- 		Panel
  - - 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
  - - frame : Boolean
- True to render the panel with custom rounded borders, false to render with plain 1px square borders (defaults to false).
- 		Panel
  - - height : Number
- The height of this component in pixels (defaults to auto).
- 		BoxComponent
  - - hidden : Boolean
- Render this component hidden (default is false).
- 		Component
  - - layoutOnTabChange : Boolean
- Set to true to do a layout of tab items as tabs are changed.
- 		TabPanel
  - - minButtonWidth : Number
- Minimum width in pixels of all buttons in this panel (defaults to 75)
- 		Panel
  - - minTabWidth : Number
- The minimum width in pixels for each tab when resizeTabs = true (defaults to 30).
- 		TabPanel
  - - monitorResize : Boolean
- True to automatically monitor window resize events and rerender the layout on browser resize (defaults to true).
- 		TabPanel
  - - pageX : Number
- The page level x coordinate for this component if contained within a positioning container.
- 		BoxComponent
  - - pageY : Number
- The page level y coordinate for this component if contained within a positioning container.
- 		BoxComponent
  - - plain : Boolean
- True to render the tab strip without a background container image (defaults to false).
- 		TabPanel
  - - scrollRepeatInterval : Number
- Number of milliseconds between each scroll while a tab scroll button is continuously pressed (defaults to 400).
- 		TabPanel
  - - tabWidth : Number
- The initial width in pixels of each new tab (defaults to 120).
- 		TabPanel
  - - wheelIncrement : Number
- For scrolling tabs, the number of pixels to increment on mouse wheel scrolling (defaults to 20).
- 		TabPanel
  - - width : Number
- The width of this component in pixels (defaults to auto).
- 		BoxComponent
  - - x : Number
- The local x (left) coordinate for this component if contained within a positioning container.
- 		BoxComponent
  - - y : Number
- The local y (top) coordinate for this component if contained within a positioning container.
- 		BoxComponent
- -

Public Properties

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefined By
  - - buttons : Array
- This Panel's Array of buttons as created from the buttons -config property. Read only.
- 		Panel
  - - disabled : Boolean
- True if this component is disabled. Read-only.
- 		Component
  - - footer : Ext.Element
- -The Panel's footer Element. Read-only. -

This Element is used to house the Panel's buttons.

- 		Panel
  - - hidden : Boolean
- -True if this component is hidden. Read-only.
- 		Component
  - - initialConfig : Object
- This Component's initial configuration specification. Read-only.
- 		Component
  - - items : MixedCollection
- The collection of components in this container as a Ext.util.MixedCollection
- 		Container
  - - rendered : Boolean
- True if this component has been rendered. Read-only.
- 		Component
- -

Public Methods

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodDefined By
- -

Public Events

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EventDefined By
- -
\ No newline at end of file