Question

我正在用Sencha-touch编写应用程序。我在标签面板中有3个标签。我希望每个人占据标签面板宽度的33％。我尝试过使用resizeTabs，tabWidth，甚至为每个项目添加了一个类，然后在css中引用它来更改宽度。

然后我也尝试在html中使用span元素并引用它。但它都不起作用。我的代码如下。如何更改选项卡面板中选项卡的宽度？

{
    xtype: 'tabpanel',
    fullscreen: true,
    tabBarPosition: 'top',
    resizeTabs: true,
    tabWidth: '33%',
    items:[
           {
               //title: 'Campus List',
               html: '<span class="headerTab">Campus List</span>',
               width: '33%',
               cls: 'headerTab'
           },
           {
               title: 'Meter List',
               html: 'Meter List',
               width: '33%',
               cls: 'headerTab'  
           },
           {
               title: 'Meter',
               html: 'Meter',
               width: '33%',
               cls: 'headerTab'  
           }
    ]

}

Answer 1

我明白了。如果您在css中引用选项卡的xtype而不是tabpanel，那么它将调整选项卡的大小。这是有效的。

.x-tab{
    width: 33%;
}

Answer 2

{
  xtype: 'tabpanel',
  tabBarPosition: 'top',
  **
  defaults: {
    flex: 1 //set the width of each item to be equal, in this case => 100%/numberOfItems = 100%/3 = 33.33333%
  }
  **
  items:[
    {
      title: 'Campus List'
    },
    {
      title: 'Meter List'
    },
    {
      title: 'Meter'
    }
  ]
}

你试过使用＆＃34; flex＆＃34;配置？

Answer 3

这是我使用的解决方案

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">

<p:panel id="familleDataTableF" class="mt30 bg-grey">


        <p:commandButton id="idInsererFamilleArticle" value="Ajouter" title="Insérer" process="@this"
        update=":form:tabView,:form:messages,:form" 
            actionListener="#{familleArticlesController.actDialogTypes}"
            styleClass="icon-insert icon" >
            <p:ajax event="dialogReturn" listener="#{familleArticlesController.handleReturnDialogTypes}" 
                update=":form"/>
        </p:commandButton>
 </p:panel>

 <p:panel>
<p:commandButton id="familleArticlesAnnulerDialogue" 
value="Annuler"
    styleClass="btn-cancel btn" process="@this"
    disabled="#{familleArticlesAnnulerController.etatBouton('annuler')}"
    actionListener="#{familleArticlesController.actFermerDialog}"
    rendered="#{dansDialogue != null ? true : false}" />

</p:panel>
 </ui:composition>

更改选项卡面板上的标签宽度

3 个答案: