ExtJS 3.4.1.1中BoxComponent复用仅末行生效，求复用及间距方案

为什么复用单个Ext.BoxComponent实例只生效最后一次 #

ExtJS的组件实例只能被渲染和挂载到一个容器中。当你把同一个组件实例多次添加到容器时，它会被从之前的父容器中移除，最终只保留在最后一个添加的位置，所以只有最后一处的间距会生效。

如何复用间距组件 #

不要复用组件实例，而是复用组件配置或者通过工厂函数生成新实例：

方法1：使用工厂函数生成新实例 #

每次需要间距时调用函数创建新的BoxComponent：

function createSpacer() {
    return new Ext.BoxComponent({
        style: 'padding-bottom: 5px'
    });
}

// 容器中使用示例：
var container = new Ext.Container({
    items: [
        // 其他业务组件
        createSpacer(),
        // 其他业务组件
        createSpacer()
    ]
});

方法2：复用配置对象，由容器自动创建实例 #

直接传递配置对象数组，容器会为每个配置创建独立的组件实例：

var spacerConfig = {
    xtype: 'box',
    style: 'padding-bottom: 5px'
};

var container = new Ext.Container({
    items: [
        // 其他业务组件
        spacerConfig,
        // 其他业务组件
        spacerConfig
    ]
});

其他实现元素间距的方式 #

在ExtJS 3.4.1.1中，还有更简洁的间距实现方案：

1. 使用Ext.Spacer组件 #

这是ExtJS专门用于创建间距的语义化组件，比自定义BoxComponent更贴合场景：

// 创建高度为5px的垂直间距
var vSpacer = new Ext.Spacer({
    height: 5
});

2. 利用容器布局的间距配置 #

如果使用hbox或vbox布局，可以直接通过布局参数统一设置组件间间距：

var container = new Ext.Container({
    layout: 'vbox',
    layoutConfig: {
        align: 'stretch',
        // 所有子组件之间的垂直间距为5px
        spacing: 5
    },
    items: [
        // 子组件1
        // 子组件2
        // 子组件3
    ]
});

3. 给目标组件直接设置边距 #

无需额外组件，直接给需要间距的业务组件设置style或CSS类：

// 单个组件设置下边距
new Ext.Panel({
    title: '示例面板',
    style: 'margin-bottom: 5px'
});

// 或通过CSS类统一管理（先定义全局CSS：.bottom-margin-5 { margin-bottom:5px; }）
new Ext.Panel({
    title: '示例面板',
    cls: 'bottom-margin-5'
});

4. 使用容器defaults配置批量设置 #

如果容器内多个组件需要相同间距，用defaults实现批量配置：

var container = new Ext.Container({
    defaults: {
        style: 'margin-bottom: 5px'
    },
    items: [
        // 容器内所有子组件都会自动添加下边距
    ]
});

内容的提问来源于stack exchange，提问作者FrenkyB