Question

如何在面板的同一行添加两个按钮？（我是extjs的新手。）

Answer 1

如果通过“添加”，表示将它们传递给构造函数，只需在buttons配置中使用数组：

buttons: [{
    text: 'foo'
}, {
    text: 'bar'
}]

http://www.sencha.com/products/extjs/examples/

上有很多例子

另一方面，如果要将按钮添加到现有面板，则必须将它们实际添加到面板的底部工具栏（bottomTb）栏中，如下所示：

myPanel.bottomTb.add({xtype: 'button', text: 'foo'}, {xtype: 'button', text: 'bar'});

请注意，xtype默认为'button'，因此可能会被省略

Answer 2

您可以使用带有“hbox”布局的Ext.Toolbar或容器。

工具栏是一个内置组件，可以自动将按钮和字段堆叠成水平布局，但它也会更改UI，以便它们可视地“停靠”。您可以看到文档以查看我的意思，但它看起来像一个工具栏，而不是彼此相邻的两个按钮。

http://dev.sencha.com/deploy/ext-4.0.0/docs/api/Ext.toolbar.Toolbar.html

要并排获得两个按钮，例如“确定”和“取消”，您可以在4.0中使用hbox布局。

Ext.create('Ext.container.Container', {
    layout: {
        type: 'hbox'
    },
    items: [
        {xtype: 'button', text: 'Ok'}, 
        {xtype: 'button', text: 'Cancel'}
    ]
});

查看hbox的文档以了解对齐和拉伸选项。

http://dev.sencha.com/deploy/ext-4.0.0/docs/api/Ext.toolbar.Toolbar.html

在旧版本中，您可以执行类似的操作，但使用不太灵活的“列”布局。

如何在面板的同一行中添加两个按钮？

2 个答案: