如何在面板的同一行添加兩個按鈕？

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

在舊版本中你會做同樣的事情，但不太靈活的「列」佈局。