EXTJS点击按钮添加fieldset位置异常求助：需后置添加却前置

看起来你遇到的问题是因为insert方法的默认行为导致的——当你只传入组件对象时，它会默认把新组件插入到容器的第一个位置（索引0），所以新的rulepanel会跑到原有组件的上方。下面给你几个可行的解决方案，顺便帮你优化代码里的小问题：

1. 正确使用insert方法指定插入位置 #

首先你需要找到已有rulepanel的位置，然后在它的下一个索引位置插入新的组件。另外要注意：不能直接复用同一个rulepanel配置对象，否则会把原有组件移走而不是创建新的，所以需要克隆配置或者重新生成新的实例。

修改后的handler代码如下：

handler: function (button, event) {
    // 找到已有的rulepanel组件
    var existingPanel = me.down('#rule');
    // 获取它在容器中的索引
    var panelIndex = me.items.indexOf(existingPanel);
    // 克隆原配置，创建新的fieldset实例（避免复用同一个对象）
    var newRulePanel = Ext.clone(rulepanel);
    // 插入到已有面板的下一个位置
    me.insert(panelIndex + 1, newRulePanel);
}

2. 简化方案：使用add方法直接添加到容器末尾 #

如果你的容器me里只有rulepanel这类组件，没有其他需要放在最后的元素，直接用add方法会更简单，它默认把新组件添加到容器的最后位置：

handler: function (button, event) {
    // 克隆配置创建新实例
    var newRulePanel = Ext.clone(rulepanel);
    me.add(newRulePanel);
}

额外优化建议 #

• 你的Add按钮用了固定id: 'add'，当添加多个fieldset后会出现id重复的问题（ExtJS中id必须唯一），建议把id改成itemId: 'addBtn'，这样通过down('#addBtn')查找也不会有冲突。
• 同理，Branch按钮也建议替换id为itemId。

修改后的rulepanel配置片段：

{
    xtype: 'button',
    itemId: 'addBtn', // 替换id为itemId
    text: 'Add',
    handler: function (button, event) {
        // 这里放上面的处理逻辑
    }
}, {
    xtype: 'button',
    itemId: 'branchBtn', // 替换id为itemId
    text: 'Branch'
}

这样调整后，点击Add按钮就能把新的fieldset正确插入到原有rulepanel的后面啦！

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