ExtJS 从兄弟元素中获取值

ExtJS get value from sibling element

我正在使用 extjs 3.4

我已将面板动态添加到 parent 面板。 我想在单击时捕获迭代器 (i) 的值。 此迭代器的值保存在隐藏元素中:

xtype: 'hidden',
cls: 'hidden-ID',
value: i

所以基本上在点击时我应该能够找到这个兄弟姐妹(也许通过 class 名称或类型?)。

但我真的不知道如何 - 我已经尝试找到 parent,但是从 parent 我找不到 children.

例子是here

代码:

Ext.onReady(function () {

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

    for (i = 0; i < 10; i++) {
        eleCatDisplay2.add(new Ext.Panel({
            layout: 'hbox',
            border: false,
            style: {
                marginTop: '10px'
            },
            items: [{
                xtype: 'displayfield',
                flex: 1,
                value: 'rowNum__' + i.toString()
            }, {
                xtype: 'hidden',
                cls: 'hidden-ID',
                value: i
            }, {
                xtype: 'panel',
                flex: 0.3,
                border: false,
                html: '<div>click to send</div>',
                listeners: {
                    'render': function (panel) {
                        panel.body.on('click', function () {

                            //here I would like to catch value of i
                            alert('test');

                        });
                    }
                }
            }]
        }));
    }
    eleCatDisplay2.doLayout();

});

解决方案(在显示字段中我添加了 cls: 'display-cat-name'):

var cNM = Ext.getCmp(this.up('.hbox-parent').select('.display-cat-name').elements[0].id).value;


 var catId = this.up('.hbox-parent').select('.hidden-ID').elements[0].value;

您还可以在面板的某些自定义 属性 中存储值:

Ext.onReady(function () {

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

    for (i = 0; i < 10; i++) {
        eleCatDisplay2.add(new Ext.Panel({
            layout: 'hbox',
            border: false,
            style: {
                marginTop: '10px'
            },
            items: [{
                xtype: 'displayfield',
                flex: 1,
                value: 'rowNum__' + i
            }, {
                xtype: 'hidden',
                cls: 'hidden-ID',
                value: i
            }, {
                xtype: 'panel',
                flex: 0.3,
                border: false,
                html: '<div>click to send</div>',
                somePropertyName: i,
                listeners: {
                    'render': function (panel) {
                        panel.body.on('click', function () {
                            console.log(panel.somePropertyName);
                        });
                    }
                }
            }]
        }));
    }
    eleCatDisplay2.doLayout();

});