A basic tab container. TabPanels can be used exactly like a standard {@link 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. *
*Note: TabPanels use their {@link Ext.Panel#header header} or {@link Ext.Panel#footer footer} element * (depending on the {@link #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 {@link Ext.Panel#tools tools}. * To display a header, embed the TabPanel in a {@link Ext.Panel Panel} which uses * {@link Ext.Container#layout layout: 'fit'}. *
*Note: It is advisable to configure all child items of a TabPanel (and any Container which uses a CardLayout) with * {@link Ext.Component#hideMode hideMode: 'offsets'} to avoid rendering errors in child components hidden * using the CSS display style. *
*There is no actual tab class — each tab is simply a {@link Ext.BoxComponent Component} such * as a {@link Ext.Panel 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: *
*tab : Paneltab : PanelTo 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 {@link Ext.Component#xtype 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 {@link #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 {@link #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>
Be aware that leaving deferredRender as true means that, if the TabPanel is within * a {@link Ext.form.FormPanel form}, then until a tab is activated, any Fields within that tab will not * be rendered, and will therefore not be submitted and will not be available to either * {@link Ext.form.BasicForm#getValues getValues} or {@link Ext.form.BasicForm#setValues setValues}.
*/ deferredRender : true, /** * @cfg {Number} tabWidth The initial width in pixels of each new tab (defaults to 120). */ tabWidth: 120, /** * @cfg {Number} minTabWidth The minimum width in pixels for each tab when {@link #resizeTabs} = true (defaults to 30). */ minTabWidth: 30, /** * @cfg {Boolean} resizeTabs True to automatically resize each tab so that the tabs will completely fill the * tab strip (defaults to false). Setting this to true may cause specific widths that might be set per tab to * be overridden in order to fit them all into view (although {@link #minTabWidth} will always be honored). */ resizeTabs:false, /** * @cfg {Boolean} enableTabScroll True to enable scrolling to tabs that may be invisible due to overflowing the * overall TabPanel width. Only available with tabPosition:'top' (defaults to false). */ enableTabScroll: false, /** * @cfg {Number} scrollIncrement The number of pixels to scroll each time a tab scroll button is pressed (defaults * to 100, or if {@link #resizeTabs} = true, the calculated tab width). Only applies when {@link #enableTabScroll} = true. */ scrollIncrement : 0, /** * @cfg {Number} scrollRepeatInterval Number of milliseconds between each scroll while a tab scroll button is * continuously pressed (defaults to 400). */ scrollRepeatInterval : 400, /** * @cfg {Float} scrollDuration The number of milliseconds that each scroll animation should last (defaults to .35). * Only applies when {@link #animScroll} = true. */ scrollDuration : .35, /** * @cfg {Boolean} animScroll True to animate tab scrolling so that hidden tabs slide smoothly into view (defaults * to true). Only applies when {@link #enableTabScroll} = true. */ animScroll : true, /** * @cfg {String} tabPosition The position where the tab strip should be rendered (defaults to 'top'). The only * other supported value is 'bottom'. Note that tab scrolling is only supported for position 'top'. */ tabPosition: 'top', /** * @cfg {String} baseCls The base CSS class applied to the panel (defaults to 'x-tab-panel'). */ baseCls: 'x-tab-panel', /** * @cfg {Boolean} autoTabs *True to query the DOM for any divs with a class of 'x-tab' to be automatically converted * to tabs and added to this panel (defaults to false). Note that the query will be executed within the scope of * the container element only (so that multiple tab panels from markup can be supported via this method).
*This method is only possible when the markup is structured correctly as a container with nested * divs containing the class 'x-tab'. To create TabPanels without these limitations, or to pull tab content from * other elements on the page, see the example at the top of the class for generating tabs from markup.
*There are a couple of things to note when using this method:
var tabs = new Ext.TabPanel({
applyTo: 'my-tabs',
activeTab: 0,
deferredRender: false,
autoTabs: true
});
// This markup will be converted to a TabPanel from the code above
<div id="my-tabs">
<div class="x-tab" title="Tab 1">A simple tab</div>
<div class="x-tab" title="Tab 2">Another one</div>
</div>