Question

是否可以将我的某些项目放在我的面板左侧，最后一项放在右侧？所以中间有一个空的空间。现在我正在使用hbox布局，并在中间放置一个空容器并像这样弯曲它：

      items: [{
        xtype: 'container',
        layout: 'hbox',
        items: [{
            xtype: 'label',
            text: 'Filter on vehicle'
        },{
            xtype:'textfield'
        },{
            xtype: 'button',
            text: '...'
        },{ 
            xtype: 'container',
            flex:1
        },{
            xtype: 'button',
            text: 'New'

        },{
            xtype:'button',
            text: 'Edit'

        },{
            xtype: 'button',
            text: 'Delete'
        }]
  }]

有更好的方法吗？

Answer 1

不知道这是否是一个更好的解决方案。但是DOM明智的它会更轻。

我们可以使用tbfill xtype ，而不是插入container。

{
            xtype: 'container',
            layout: 'border',
            items: [{
                xtype: 'label',
                text: 'Filter on vehicle',
            },{
                xtype:'textfield',
            },{
                xtype: 'button',
                text: '...',       
            },
            {
                xtype:'tbfill'
            },{
                xtype: 'button',
                text: 'New',
            },{
                xtype:'button',
                text: 'Edit',
            },{
                xtype: 'button',
                text: 'Delete',
            }],
}

Working Example

Answer 2

如果你想使用按钮，文本字段，标签，组合框等元素......你可以使用Ext.toolbar.Toolbar xtype：toolbar。因此，如果您需要将项目放在右侧，您可以使用' - ＆gt;'轻松完成此操作，您也可以使用'|'将垂直分隔符放入收费栏。

Ext.create('Ext.container.Container', {
    renderTo: Ext.getBody(),
    items: [
        {
            xtype: 'toolbar',
            layout: 'hbox',
            items: [
                {
                    xtype: 'label',
                    text: 'Filter on vehicle'
                },
                {
                    xtype: 'textfield'
                },
                {
                    xtype: 'button',
                    text: '...'
                },
                {
                    xtype: 'button',
                    text: 'New'
                },
                '->',
                {
                    xtype: 'button',
                    text: 'Edit'
                },
                {
                    xtype: 'button',
                    text: 'Delete'
                }                    
            ]
        }
    ]        
});

Answer 3

你正在做的事情很好，可以说是一个小建议的最佳解决方案。使用'component'代替'container'，因为它会稍微轻一些。

'tbfill'和' - ＆gt;'之前的答案实际上和你正在做的事情是一样的。 ' - ＆GT;'是'tbfill'的缩写，'tbfill'实际上是flex：1组件。

所有3个解决方案应该可以正常工作但我喜欢使用flex：1组件，因为使用tbfill取决于知道工具栏的实现细节，即使用hbox。 Sencha可以在将来的版本中自由更改工具栏和tfill的工作方式，此时您的代码（如果它使用tbfill）会被破坏。

在hbox布局extjs中定位单个项目

3 个答案: