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

【问题标题】：How to insert spaces between components in Ext js 4 layout如何在 Ext js 4 布局中的组件之间插入空格
【发布时间】：2012-07-03 12:05:25
【问题描述】：

我正在从 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();

两个按钮彼此之间的空间为零。

如何从组件中设置空间（gap 或 ever）？

谢谢。

【问题讨论】：

标签： extjs

【解决方案1】：

使用边距配置：

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'
        }]
    });
});

【讨论】：

为了节省您的查找时间，边距值对应于上、右、下、左，因此“10 0 0 0”将仅在顶部创建 10 像素的边距。
如果您希望所有子级的边距相同，请将defaults 属性添加到父级defaults: { margin:'0 15 0 0' }。例如，这在列布局中更有意义。

【解决方案2】：

像边距？您可以通过样式属性添加它。看到这个前http://jsfiddle.net/nscrob/5rn8C/5/

【讨论】：

它有效。并且也可以在窗口参数中使用默认值：{margin: 2}。谢谢。