ExtJs 4.2中垂直选项卡面板

d4so4syb  于 2022-11-04  发布在  其他
关注(0)|答案(4)|浏览(211)

在ExtJs 4.2中,有没有一种方法可以使用现有的选项卡面板创建一个垂直的选项卡面板?通过将选项卡条设置为“left”,选项卡条将停靠在面板的左侧,但这不是我想要的。有没有可能将选项卡一个接一个地垂直放置?

eyh26e7m

eyh26e7m1#

我相信您可以通过在选项卡面板上设置tabPosition:'left'来获得所需的结果。
我制作了一个 Sencha 茶小提琴作为演示:

var panel = Ext.create('Ext.tab.Panel',{
            renderTo:Ext.getBody(),
            tabPosition:'left',
            height:400,
            width:1000,

            items:[{
                title:'Item 1'
            },{
                title:'Item 2'
            }]
        });
falq053o

falq053o2#

嗨,伙计们,我有同样的问题。。下来,你有我的简单解决方案(Sass和extjs)

Ext.define('Navigator.view.TestView', {
    requires: [
        'Ext.grid.*',
        'Ext.tab.*'
    ],
    extend: 'Ext.tab.Panel',
    alias: 'widget.testView',
    cls:'verticaltab',
    tabBar: {
        width: 340,
        minTabWidth: 330,
        maxTabWidth: 330,
        height:20,
        orientation: 'vertical'
    },
    tabPosition: 'left',

    plain: true,
    items:[
        {
            title:'first',
            html:'first'
        },
        {
            title:'second',
            html:'second'
        }
    ]
});

//Sass文件

.verticaltab {    
  .x-tab-wrap{
    position: absolute;
    display: block;
    padding-left: 20px;
    transform: rotate(90deg);
  }

  .x-tab-button{
    position: absolute;
    display: block;
    padding-left: 0px;
    padding-top: 2px;
  }
}
pkln4tw6

pkln4tw63#

主要是将cls添加到选项卡面板组件cls:“verticaltab”
然后添加选项卡栏属性:

tabBar: {
    width: 340,
    minTabWidth: 330,
    maxTabWidth: 330,
    height:20,
    orientation: 'vertical'
},
tabPosition: 'left',

然后再加上

.verticaltab {    
  .x-tab-wrap{
    position: absolute;
    display: block;
    padding-left: 20px;
    transform: rotate(90deg);
  }

  .x-tab-button{
    position: absolute;
    display: block;
    padding-left: 0px;
    padding-top: 2px;
  }
}

Sass文件可以在主题文件夹结构中。。我认为它在Safari上不起作用,但你可以升级Sass代码来工作。
如果对你来说很难,我会准备 Sencha Fiddle:)

oprakyz7

oprakyz74#

把这些钉在标签板上

tabPosition: 'left',
tabRotation: 0

示例:https://examples.sencha.com/extjs/7.0.0/examples/kitchensink/#advanced-tabs
资料来源:
https://docs.sencha.com/extjs/7.3.1/classic/Ext.tab.Panel.html#cfg-tabPositionhttps://docs.sencha.com/extjs/7.3.1/classic/Ext.tab.Panel.html#cfg-tabRotation

相关问题