extjs Ext.tab.Panel tab panel component learning
⭐️Extjs notes from many years ago, just an archive, no update! ⭐️
Summary
overview
A basic tab container. TabPanels can be used exactly like a standard Ext.panel.Panel for layout purposes, but also have special support for containing child Components (items) that are managed using a Ext.layout.container.Card, and displayed as separate tabs.
A basic tab container. TabPanels can be directly used as standard panels. For layout purposes, it also supports subcomponents (items), using Ext.layout.container.Card to manage the layout, as independent 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.
Note: By default, closing a tab destroys the child tab component and all its descendants. Disables the child tab component and all its descendants. In order to re-use the tab, configure the tab panel to pass autoDestroy: false.
TabPanel's layout
tab panel layout
TabPanels use a Dock layout to position the Ext.tab.Bar at the top of the widget. Panels added to the TabPanel will have their header hidden by default because the Tab will automatically take the Panel’s configured title and icon.
The tab panel uses the Dock layout to position the Ext.tab.Bar on top of the widget. Panels added to the tab panel will hide their own headers by default, since the tab will automatically take the panel's title and icon configuration.
TabPanels use their Ext.panel.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
. The Ext.panel.Header or footer element (depending on the tabPosition configuration) holds the tab selection buttons. This means that a tab panel will not display any title configuration, and will not display any header tools configuration.
To display a header, embed the TabPanel in a Ext.panel.Panel which uses layout: 'fit'
.
Controlling tabsControlling
tabs
Configuration options for the Ext.tab.Tab that represents the component can be passed in by specifying the tabConfig option:
The Ext.tab.Tab can be passed to the displayed component through the configuration item tabConfig.
Vetoing Changes
Vetoing Changes
User interaction when changing the tabs can be vetoed by listening to the beforetabchange event. By returning false, the tab change will not occur .
ExamplesExamples
_
Here is a basic TabPanel rendered to the body. This also shows the useful configuration activeTab, which allows you to set the active tab on render.
This is a basic tab panel rendered to the body. This also demonstrates a useful configuration activeTab which makes tabs active.
Ext.create('Ext.tab.Panel', {
width: 300,
height: 200,
activeTab: 0,
items: [
{
title: 'Tab 1',
bodyPadding: 10,
html : 'A simple tab'
},
{
title: 'Tab 2',
html : 'Another one'
}
],
renderTo : Ext.getBody()
});
my test example
Ext.onReady(function() {
Ext.tip.QuickTipManager.init();
Ext.create('Ext.container.Viewport',{
layout:'auto',
items:[{
xtype:'tabpanel',
items:
[
//实例化自定义的两个类
Ext.create('KitchenSink.view.grid.InterfaceGridPanel', { title:'物理接口' },{id: 'interfaceGridPanel'}),
Ext.create('KitchenSink.view.grid.BridgeInterfaceGridPanel', { title:'直通接口' },{id: 'interfaceGridPanel2'})
]
}]
});
});
Summarize:
dock docking (dock), you can dock your control in 1 position of the parent container.
Anchor: Anchor point, simply understood as nailing the 4 corners of your control. When the parent container it is in changes, you will first look at the direction of the control that is nailed. If it is left, then this control The distance from the left line of the parent container will always remain the same. In the same way, we can know the other 3 settings, such as setting left and right, so that the control will be scaled to keep the distance from the left and right lines of the parent container unchanged.
Encountered a problem:
I want to display two grids on the second tab page (these two components are placed in a panel container), but only the first component is displayed. The reason is the layout. The tab should use fit by default. The first component in a tab will fill the interface, and the second component will not be displayed.
Therefore, setting the layout in the container of these two components solves the problem.
As follows: set,
layout:{
type: 'hbox',
align: 'stretch'
},
Remember to configure corresponding parameters for each component, such as: {flex: 1}
Ext.create('KitchenSink.view.grid.SystemRouteGridPanel',{
flex: 1}),
Ext.onReady(function() {
Ext.tip.QuickTipManager.init();
if (Ext.getCmp('SystemRouteGridPanel'))
{
Ext.getCmp('SystemRouteGridPanel').destroy();
}
if (Ext.getCmp('SystemRoute6GridPanel'))
{
Ext.getCmp('SystemRoute6GridPanel').destroy();
}
Ext.create('Ext.container.Viewport',{
layout:'auto',
items:[{
xtype:'tabpanel',
activeTab: 0,
items:
[
Ext.create('KitchenSink.view.grid.StaticRouteGridPanel', {
title:'静态路由' }),
{
title:'系统路由',
xtype:'panel',
// layout:'accordion',
// layout:'table',
// layoutConfig:{columns:2},
// items: [
// Ext.create('KitchenSink.view.grid.SystemRouteGridPanel',{width: 500}),
// Ext.create('KitchenSink.view.grid.SystemRoute6GridPanel',{width: 500})
// ]
layout:{
type: 'hbox',
align: 'stretch'
},
items: [
Ext.create('KitchenSink.view.grid.SystemRouteGridPanel',{
flex: 1}),
Ext.create('KitchenSink.view.grid.SystemRoute6GridPanel',{
flex: 1})
]
}
]
}]
});
});