Question

我试图在Ext.Panel中让两个按钮彼此相邻显示。

.js代码：

ProductView = new Ext.Panel({
    styleHtmlContent: true,
    scroll: 'vertical',
    items: [
        new Ext.DataView({
        scroll: false,
        store: productStore,
        tpl: productTpl,
        itemSelector: 'div.productView',
        }),
        {
            xtype: 'button',
            ui: 'blue-round',
            height: '60',
            text: 'Buy',
            handler: function() {
                // ...
            }
        },{
            xtype: 'button',
            ui: 'green-round',
            height: '60',
            text: 'Share',
            handler: function() {
                // ...
            }
        }

    ]
});

SCSS代码：

@include sencha-button-ui('green', $branded-green);
@include sencha-button-ui('blue', $branded-blue);

这个看起来像这样的按钮：

Vertically-aligned buttons

我认为这可能是一个调整问题，但是为每个按钮添加width: '40%',属性只会产生：

Smaller buttons

但是，我希望按钮彼此相邻而不是堆叠在一起。有什么建议吗？

更新我试图利用align:属性，但这没有做任何事情：

    {
        xtype: 'button',
        ui: 'blue-round',
        height: '60',
        width: '40%',
        align: 'left',
        text: 'Buy',
        handler: function() {
            // ...
        }
    },{
        xtype: 'button',
        ui: 'green-round',
        height: '60',
        width: '40%',
        align: 'right',
        text: 'Share',
        handler: function() {
            // ...
        }
    }

Answer 1

您可以将按钮包裹在面板中，并将该面板的布局设置为hbox。这基本上就是你对工具栏所做的，但是如果你不想要它，它将没有工具栏样式。另外，使用hbox布局的fyi，您可以为组件指定'flex'配置选项，以确定它们相对于彼此的大小

Answer 2

好的，到目前为止答案是将整个事情包装在工具栏中。（我最初没有这样做，因为这些按钮不会停靠。它们将显示在滚动的DataView下。）我不得不挤压按钮，因为它们超出了工具栏的边缘并且被切断了。我还必须更改工具栏的高度以容纳更大的按钮并使其背景透明。

.js代码的按钮部分现在看起来像：

    {
        xtype: 'toolbar',
        height: '62',
        items: [
                {
                    xtype: 'button',
                    ui: 'blue-round',
                    height: '60',
                    width: '48%',
                    text: 'Buy',
                    handler: function() {
                        // ...
                    }
                }, {xtype: 'spacer'}, {
                    xtype: 'button',
                    ui: 'green-round',
                    height: '60',
                    width: '48%',
                    text: 'Share',
                    handler: function() {
                        // ...
                    }
                }
                ]
    }

Answer 3

   { xtype : 'panel',

   layout: { type: 'hbox', },

   items:[

   { xtype: "button", text: "Login", iconCls: 'action', 
    ui:"confirm", itemId:"sendButton", height: '60', width: '48%', //flex:3, },

   {xtype: 'spacer'}, {
    {xtype: "button", 

 text: "Reset", iconCls: 'action', ui:"decline", 
             itemId:"resetButton", height: '60', width: '48%', //flex:3, }, ], },

您可以使用hbox布局使用Sencha水平渲染按钮。

这是可以正常工作的示例代码，

   { xtype :'panel',

   layout: { type: 'hbox', },

   items:[

   { xtype: "button", text: "Login", iconCls: 'action', 
    ui:"confirm", itemId:"sendButton", height: '60', width: '48%', //flex:3, },

   {xtype: 'spacer'}, 
    {xtype: "button", text: "Reset", iconCls: 'action', ui:"decline", 
             itemId:"resetButton", height: '60', width: '48%', //flex:3, }, ], },

Sencha Touch：如何在Ext.Panel中水平对齐按钮？

3 个答案: