ExtJS get value from sibling element

Question

I am using extjs 3.4

I have panels added dynamically to parent panel. I would like to catch value of iterator (i) on click. Value of this iterator is saved in hidden element:

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

so basically on click I should be able to find this sibling (perhaps by class name or type?).

But I really don't know how - I've alredy tried to find parent, but from parent I wasn't able to find children.

Example is here

Code:

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();

});

Answer 1

You can also store value in some custom property of the panel:

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();

});

Answer 2

Solution (on display field I've add 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;