Sencha touch Sencha Trouch 2：hbox标题栏项目被修剪

我有一个标题栏内的2个按钮，如下所示

xtype: 'titlebar',
            cls: 'toolbar',
            docked: 'top',
            itemId: 'lookupBar',
            layout: {
                type: 'hbox',
                align: 'end'
            },
            items: [
                {
                    xtype: 'button',
                    flex: 1,
                    itemId: 'btnBack',
                    ui: 'back'
                },
                {
                    xtype: 'button',
                    flex: 1,
                    align: 'right',
                    itemId: 'btnEntitySearch',
                    ui: 'forward'
                }
            ]

但如果这2个按钮中的文本较大，则第2个按钮将被修剪，

在查看生成的CSS后，我可以看到，对于第一个按钮，我们有一个“ -webkit-box-flex:1；宽度：128px！重要； "

但这不是第二个按钮

你知道这里怎么了吗

应用答案后的其他图像

---

我想，如果文本变大，您应该缩小按钮。您只需在按钮标签上应用省略号，如下所示，并将其应用于css文件：

.x-toolbar .x-button-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100px;
}

编辑：

另一个技巧：只使用css

.x-toolbar-inner .x-container {
    max-width: 45%;
}

---

这将适用于所有配置文件，无论是手机还是平板电脑

如果不使用css，您也可以进行包装，Sencha在标题栏按钮上提供了省略号属性，因此只需提及如下宽度/最大宽度：-

            xtype: 'titlebar',
            cls: 'toolbar',
            docked: 'top',
            itemId: 'lookupBar',
            items: [
            {
                xtype: 'button',
                itemId: 'btnBack',
                align: 'left',
                text: 'fdsfs gsdg gsadg dg',
                ui: 'back'
            },
            {
                xtype: 'button',
                width : '80%', // or width in px if you want or give a max-width
                align: 'right',
                text: 'fdsfs gsdg gsadg dg',
                itemId: 'btnEntitySearch',
                ui: 'forward'
            }
            ]

---

这是一种正常行为，正如您在按钮中给出的

align:'right'

。如果删除该按钮，则会看到没有任何按钮文本被包装起来。您的要求是什么？我可以看到两个按钮都是-webkit box flex:1；滚动即将到来，因为您没有设置：可滚动：{direction:'vertical'，directionLock:true}@SujataChanda，是的，我已经给出了align:'right'，因为我希望按钮位于两端；一个在左边，另一个在右边side@AnandGupta在lookupBar项上设置scrollable属性并没有多大区别。只是现在第一个按钮的大小不会自动缩小。是否要自动缩小按钮？这会将宽度设置为100px；但是，如果手机中有平板电脑视图或横向视图，则会将其设置得太小。这应该是可行的，但在两种情况下它都不起作用1.如果手机中有平板电脑视图或横向视图，则右侧有空的空间。2.如果是小文本（如仅“后退”），则按钮中不会出现文本。我将在原始问题中添加图像，因为我无法在此处发布图像。我已在浏览器中检查了它，但它工作正常。试着像我一样删除布局：hbox。