Question

我有这个包含3个dockedItems的树面板：一个文本字段和两个按钮： http://imgur.com/pUoklAC

一些示例代码：

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

当我按Ctrl + F时，我想要的是使项目看起来像firefox和chrome搜索栏。这意味着我想要我的文本字段和右边的2个按钮一个用＃34;＆lt;＆＃34;和＃34;＆gt;＆＃34;与文本字段相同的高度，它们应该是平方的。如果您在浏览器上按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
});

如何在ExtJS中将dockedItems彼此相邻放置

2 个答案: