Question

是否可以使用现有选项卡面板在ExtJs 4.2中创建垂直选项卡面板。通过将标签条设置为“左”，条带停靠在面板的左侧，但这不是我想要的。是否可以将标签垂直放置？

Answer 1

我相信您可以通过在标签面板上设置tabPosition:'left'来获得您想要的结果。

我为演示创建了sencha fiddle：

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

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

Answer 2

大家好我有同样的问题.. 你有我的简单解决方案（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;
  }
}

Answer 3

主要是将cls添加到tabpanel组件 CLS：＆＃39; verticaltab＆＃39;

然后添加tabbar属性：

 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 :)

Answer 4

只需将这些粘贴到 tabPanel 上


Sub sSplitSalesData()
    On Error GoTo E_Handle
    Dim db As DAO.Database
    Dim rsSales As DAO.Recordset
    Dim rsProductType As DAO.Recordset
    Dim astrData() As String
    Dim intLoop1 As Integer
    Dim strSQL As String
    Set db = CurrentDb
    db.Execute "DELETE * FROM tblProductType;"
    strSQL = "SELECT DISTINCT SalesData FROM tblSalesData;"
    Set rsSales = db.OpenRecordset(strSQL)
    If Not (rsSales.BOF And rsSales.EOF) Then
        Set rsProductType = db.OpenRecordset("SELECT * FROM tblProductType WHERE 1=2;")
        Do
            If Left(rsSales!SalesData, 4) = "Sale" Then
                astrData = Split(Mid(rsSales!SalesData, 6), " - ")
                If IsNull(DLookup("ProductTypeID", "tblProductType", "Replace(ProductType,Chr(39),'')='" & Replace(astrData(1), "'", "") & "'")) Then
                    With rsProductType
                        .AddNew
                        !ProductType = astrData(1)
                        .Update
                    End With
                End If
                Select Case UBound(astrData)
                    Case 3  '   has product name/type/size/qty
                    Case 4  '   has product name/type/colour/size/qty
                    Case Else
                        Debug.Print "Unknown number of elements: " & rsSales!SalesData
                End Select
            Else
                Debug.Print "Odd data: " & rsSales!SalesData
            End If
            rsSales.MoveNext
        Loop Until rsSales.EOF
    End If
sExit:
    On Error Resume Next
    rsSales.Close
    rsProductType.Close
    Set rsSales = Nothing
    Set rsProductType = Nothing
    Set db = Nothing
    Exit Sub
E_Handle:
    MsgBox Err.Description & vbCrLf & vbCrLf & "sSplitSalesData", vbOKOnly + vbCritical, "Error: " & Err.Number
    Resume sExit
End Sub

示例： 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-tabPosition https://docs.sencha.com/extjs/7.3.1/classic/Ext.tab.Panel.html#cfg-tabRotation

ExtJs 4.2中的垂直选项卡面板

4 个答案: