EXTJS中的列布局问题

Question

当我尝试在我的项目中使用columlayout时，我遇到布局问题。这是代码：

somefunc: function(token, filter, op) {

    var a =
        this.section({

            items: [

                this.columnLayout([
                    [
                        this.label = new Qx.form.LinkLabel({

                            scope: this
                        }),
                    ],
                    [
                        this.typeCombo = new Ext.form.ComboBox({
                            help: 'filter',
                            name: 'filter',
                            anchor: '30 20',
                            columnWidth: 1.5
                        }),

                    ],
                    [{
                        columnWidth: 1.5,
                        // height : 30,
                        help: 'operator',
                        xtype: 'combo',
                        anchor: '30 20',
                        name: 'operator',
                        width: 110,
                        ref: "../operator",

                    }, ],
                    [
                        this.regions = new Qx.form.MultiSelectComboBox({
                            allowCommaInQuery: true,
                            anchor: '300 200',
                            name: "multiselect",
                            displayField: 'value',
                            valueField: 'value',


                        }), // end of multiSelect
                    ],

                ]),

            ]
        })

    return filterItem;
},

我无法在两个组件之间添加任何空间。他们似乎彼此非常接近。这就是它的渲染方式。

我想在它们之间添加一些空格，但布局没有任何帮助。任何想法如何解决这个问题？

Answer 1

你可以像这样组织它：

    {
        xtype:'window',            
        layout:{
            type:'hbox',
            align:'stretch'
        },
        items:[{
            xtype:'container',                
            flex:1,
            margin:{top:5, left:5, right: 0, bottom:5},
        },{
            xtype:'container',                
            flex:1,
            margin:{top:5, left:5, right: 5, bottom:5},
        },{
            xtype:'container',                
            flex:1,
            margin:{top:5, left:0, right: 5, bottom:5},
        }]
    }

只需使用边距即可实现您所需的外观！