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

Question

标题栏中有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按钮中的文字很大，则第二个按钮会被修剪，

查看生成的CSS后，我可以看到，对于第一个按钮，我们有一个＆＃34; -webkit-box-flex：1;宽度：128px！重要; ＆＃34;

但不是第二次按钮!!!

任何想法在这里有什么问题？

应用答案后的其他图片

Answer 1

我想，如果文字变大，你想缩小按钮。您只需在按钮标签上应用省略号，如下所示，将其应用于您的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%;
}

这适用于所有个人资料，无论是手机还是平板电脑

Answer 2

没有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'
            }
            ]