extjs Ext.tab.Panel tab面板组件学习

extjs Ext.tab.Panel tab面板组件学习

⭐️来自很多年前的extjs笔记，只是一个归档，不做更新！⭐️

Summary

概述

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.

一个基本tab容器。TabPanels可以被直接当做标准的panel面板因为布局的目的，也支持包含子组件（items），使用Ext.layout.container.Card管理布局，作为独立的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.

注意：默认情况下，一个tab关闭销毁子tab组件和它所有的子孙。使得子tab组件和它的所有子孙不可用。为了能tab能重新使用，配置tab面板通过autoDestroy: false.

TabPanel’s layout
tab面板布局

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.

tab面板使用Dock布局去定位Ext.tab.Bar在小部件的顶部。添加到tab面板的面板将隐藏它们自己的头默认情况下，因为tab将自动取得面板的 title和icon配置。

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.
tab面板使用面板的Ext.panel.Header 或者footer element（取决于tabPosition配置 ）容纳tab选择按钮。这意味着一个tab面板将不展现任何title配置，和不展现任何header tools的配置。

To display a header, embed the TabPanel in a Ext.panel.Panel which uses layout: ‘fit’.
为了展现header，嵌入tab面板到Ext.panel.Panel使用fit布局。

Controlling tabs
控制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可以通过配置项tabConfig 传递给展现的组件。

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.
用户交互当tab发生改变可以否决通过监听 beforetabchange 事件，默认返回false，tab改变将不发送。

Examples
例子

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.
这是一个基本的tab面板渲染到body上。这也展示了一个有用的配置 activeTab ，它可以使tab激活。

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()
});

我的测试例子

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'})
                    ]
        }]
    });

});

总结：

dock 停靠（码头），你可以把你的控件停靠在父容器的1个位置。
anchor：锚点，简单理解为将你的控件4个角订上钉子，当它所在的父容器变化时，会先去看下这个的控件的那个方向钉住了，如果是left，那么这个控件将与父容器的左边线距离始终保持不变，同理可知其他3个设置，比如设置left,right 这样的话该控件就会缩放，以与父容器的左右边线距离不变。

遇到问题：
我想在第二个tab页面展现两个grid（这两个组件放到一个panel容器中），结果只显示第一个组件。原因是布局，tab默认采用的应该是fit，一个tab也中的第一个组件会填充满界面，第二个组件不会显示。
所以，在这两个组件的容器中设定布局，解决该问题。
如下：设定，

layout:{
    
    
    type: 'hbox',
    align: 'stretch'
},

切记给每个组件也要配置相应的参数，这里如：{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})
                            ]


                        }
                    ]
        }]
    });

});