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

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

在旧版本中你会做同样的事情，但不太灵活的“列”布局。