如何在 ExtJS 中将停靠项目彼此相邻定位答案

【问题标题】：How can I position dockedItems next to each other in ExtJS如何在 ExtJS 中将停靠项目彼此相邻定位
【发布时间】：2014-07-15 08:39:42
【问题描述】：

我有一个包含 3 个停靠项的树面板：一个文本字段和 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，您就会明白。我该怎么做？

【问题讨论】：

标签： javascript button extjs layout panel

【解决方案1】：

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

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

【讨论】：

是的，我的同事提到了这一点，但我希望避免它，因为需要在按钮等内部的代码中进行一些更改。好吧，如果它是唯一的解决方案，那就不可能了帮助。
“需要在按钮内的代码中进行一些更改”。这有什么相关性？
添加 tbar 会在树面板和按钮/文本字段之间放置另一层容器/组件，因此我必须更改遍历 .up() 和 .down() 函数的所有“继承”等等。有你的相关性。
嗯，从您发布的内容来看，这并不是很明显。这就是解决方案，因为您希望停靠的项目包含在特定布局中。

【解决方案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
});

【讨论】：

我最终使用了 tbar 解决方案，效果很好。虽然我用容器测试了你的，它看起来也不错。我会记住它以供进一步使用。我会让你的答案，因为另一个人有点像杰克。