ExtJS 3.4如何获取同级隐藏元素中迭代器i的点击值？

嘿，我帮你搞定这个问题！你的代码里有两个核心问题需要调整：一是循环里的闭包陷阱导致点击时拿到的i总是最后一个值，二是不知道怎么正确定位同级的隐藏组件。我给你修改好代码，再一步步解释关键点：

先看修改后的完整代码 #

Ext.onReady(function () { 
    var eleCatDisplay2 = new Ext.Panel({ 
        renderTo: Ext.getBody(), 
        height: 350 
    }); 

    for (var i = 0; i < 10; i++) { 
        // 用立即执行函数创建闭包，把当前循环的i值"固定"下来
        (function(currentI) {
            eleCatDisplay2.add(new Ext.Panel({ 
                layout: 'hbox', 
                border: false, 
                style: { marginTop: '10px' }, 
                items: [{ 
                    xtype: 'displayfield', 
                    flex: 1, 
                    value: 'rowNum__' + currentI.toString() 
                }, { 
                    xtype: 'hidden', 
                    cls: 'hidden-ID', 
                    value: currentI 
                }, { 
                    xtype: 'panel', 
                    flex: 0.3, 
                    border: false, 
                    html: '<div>click to send</div>', 
                    listeners: { 
                        'render': function (panel) { 
                            panel.body.on('click', function () { 
                                // 1. 获取当前点击面板的父容器（就是hbox布局的那个子面板）
                                var parentPanel = panel.ownerCt;
                                // 2. 在父容器的items里找到cls为hidden-ID的隐藏组件
                                var hiddenComp = parentPanel.findBy(function(comp) {
                                    return comp.cls === 'hidden-ID';
                                })[0];
                                // 3. 拿到隐藏域的值
                                var targetValue = hiddenComp.getValue();
                                alert('当前对应的i值是：' + targetValue);
                            }); 
                        } 
                    } 
                }] 
            })); 
        })(i); // 把当前循环的i传入闭包
    } 
    eleCatDisplay2.doLayout(); 
});

关键调整点说明 #

1. 解决闭包陷阱
   原代码里的点击事件回调会共享同一个i变量，循环结束后i已经变成9，所以点击任何面板都会弹出9。用立即执行函数（IIFE）把每次循环的i作为currentI传入，这样每个回调都能绑定到当前循环的正确值。

2. 定位同级隐藏组件

   • 通过panel.ownerCt获取当前点击面板的直接父容器（也就是包含displayfield、hidden、点击面板的那个hbox布局面板）。
   • 用findBy方法遍历父容器的所有子组件，通过cls: 'hidden-ID'匹配到目标隐藏域，最后调用getValue()拿到它存储的i值。

另外提醒一下：原代码里的i没有用var声明，会变成全局变量，建议加上var避免全局污染~

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