如何获取选中下拉框所在行的行索引？（JS/ExtJS）

我明白你要解决的问题：动态生成了带下拉框的多行结构，现在需要在选择下拉框选项时，拿到这个下拉框所在行的索引，而不是选中项本身的索引。在ExtJS里，我们可以通过组件的层级关系或者自定义属性来轻松实现这个需求，下面给你两种可行的方案：

方案一：给行容器添加自定义索引属性 #

这种方法最直接，在动态创建每一行的时候，给行容器绑定一个存储行索引的自定义属性，后续在下拉框的事件里直接读取即可：

// 假设parentContainer是你存放所有行的父容器
for (let rowIdx = 0; rowIdx < 5; rowIdx++) {
    // 创建行容器
    const rowContainer = Ext.create('Ext.container.Container', {
        layout: 'column',
        // 自定义属性存储行索引
        rowIndex: rowIdx,
        items: [
            {
                xtype: 'combo',
                columnWidth: .5,
                height: 30,
                store: ['选项A', '选项B', '选项C'],
                listeners: {
                    select: function(combo) {
                        // 向上查找行容器
                        const targetRow = combo.up('container[rowIndex]');
                        // 获取行索引
                        const currentRowIndex = targetRow.rowIndex;
                        console.log('当前下拉框所在行的索引：', currentRowIndex);
                    }
                }
            },
            // 其他列的组件，比如文本框等
            {
                columnWidth: .5,
                height: 30,
                xtype: 'textfield',
                fieldLabel: '辅助输入'
            }
        ]
    });
    parentContainer.add(rowContainer);
}

方案二：通过父容器的items集合查找索引 #

如果你不想给行容器加自定义属性，也可以通过行容器在父容器items中的位置来获取索引：

// 动态创建行的逻辑类似，下拉框的事件处理改为：
listeners: {
    select: function(combo) {
        // 找到当前下拉框所在的行容器
        const rowContainer = combo.up('container');
        // 拿到行容器的父容器
        const parent = rowContainer.up();
        // 通过items集合的indexOf方法获取索引
        const rowIndex = parent.items.indexOf(rowContainer);
        console.log('当前下拉框所在行的索引：', rowIndex);
    }
}

注意事项 #

• 如果你给行容器设置了特定的cls或者xtype，可以把up('container')改成更精确的选择器，比如up('.custom-row-container')，这样能避免找到错误的父容器。
• 如果你是在Grid组件的行里操作，那逻辑会略有不同，但从你的描述看是自定义的多行布局，上面的方案完全适用。

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