我如何在ExtJS中將ockedItems彼此相鄰放置

Question

我有一個包含3個dockedItems的樹面板：一個文本字段和2個按鈕： http ://imgur.com/pUoklAC

一些示例代碼：

Ext.defin('treePanel', {
extend: 'Ext.tree.Panel',
dockedItems: [{
xtype: 'textfield'
},
{
xtype: 'button'
},
{
xtype: 'button'
}]
});

我想要的是使這些項目在按Ctrl + F時看起來像Firefox和Chrome搜索欄。 這意味着我想擁有自己的文本字段，並在右邊的2個按鈕上分別使用“ <”和一個使用“>”。 與文本字段相同的高度，應平方。 如果在瀏覽器上按Ctrl + F，您將會了解。 我該怎么做呢？

Answer 1

只需使用tbar，它是創建停靠工具欄的快捷方式：

Ext.define('MyPanel', {
    extend: 'Ext.panel.Panel',
    tbar: [{
        xtype: 'textfield',
        flex: 1
    }, {
        xtype: 'button',
        text: 'a'
    }, {
        xtype: 'button',
        text: 'b'
    }]
});

Answer 2

+1用於使用工具欄。

如果出於任何原因您確實無法使用工具欄，則可以使用具有hbox布局的容器，並將文本字段和按鈕放入其中。

像這樣：

Ext.application({
    name : 'My',

    launch : function() {

        Ext.create('Ext.panel.Panel',{
             title:'Panel with docked container'
            ,renderTo:Ext.getBody()
            ,width:400
            ,height:300
            ,dockedItems:[{
                 dock:'top'
                ,xtype:'container'
                ,layout:{
                     type:'hbox'
                    ,align:'stretch'
                }
                ,items:[{
                     xtype:'button'
                    ,text:'Left'
                },{
                     xtype:'textfield'
                    ,flex:1
                },{
                     xtype:'button'
                    ,text:'Right'                   
                }] // eo container items                  
            }] // eo dockedItems
        }); // eo panel create            
    } // eo function launch
});