如何在Ext js 4布局中的组件之间插入空格

时间:2012-07-03 12:05:25

标签: extjs

我正在从adobe flex转到ext js 4,我注意到在Extjs中,组件放得太近了。那时之间没有差距。这可以面对这个例子:

    var win = Ext.create('Ext.window.Window', {
    layout: 'hbox',
    height: 500,
    width: 400,
    title: 'hbox',      
    items: [
      Ext.create('Ext.button.Button',
      {
        text: 'My button 1',
        width: 150
      }),
      Ext.create('Ext.button.Button',
      {
        text: 'My button 2',
        width: 150
      })
    ]
});

win.show();

两个按钮彼此间隔为零。

如何设置组件的空间(间隙或永远)?

感谢。

2 个答案:

答案 0 :(得分:19)

使用margin config:

Ext.onReady(function() {
    var win = Ext.create('Ext.window.Window', {
        layout: 'hbox',
        height: 500,
        width: 400,
        autoShow: true,
        title: 'hbox',
        defaultType: 'button',
        items: [{
            text: 'My button 1',
            width: 150,
            margin: '10 20 30 40'
        }, {
            text: 'My button 2',
            width: 150,
            margin: '40 30 20 10'
        }]
    });
});

答案 1 :(得分:2)

像保证金一样? 您可以通过style属性添加它。请参阅此前http://jsfiddle.net/nscrob/5rn8C/5/