CODEWITHSUNDEEP
extjs
user1234
user1234

Reputation: 3159

Best way to get index of an element in a Container

Inside my Container, I have multiple rows of components. When a user clicks on one of these components, I want to know the index of that row of which the component was clicked within the container. Basically I want to get the ROW id. What is the best way to get this ?

Thanks

Code:

addFilter: function (token, filter, op) {
    this.tokenValues.push(this.config);
    var filterItem = Ext.create({
        xtype: 'container',
        height: 30,
        cls: 'purge-filter-item',
        layout: {
            type: 'hbox',
            align: 'middle'
        },
        items: [{
            xtype: 'qxlinklabel',
            ref: 'filterTypeLabel',
            cls: 'filter-item-logical-op',
            text: this.filterType,
            width: 26,

            scope: this
        }]
    });
    this.insert(0, filterItem);

    return filterItem;
}

Here is the complete code: https://jsfiddle.net/342u013y/

Can anyone please help!

Upvotes: 0

Views: 434

Answers (1)

Saurabh Nemade
Saurabh Nemade

Reputation: 1592

Ext 3.4 does not provides click event on Container. You will have to attach it manually.

Here is quick poc on your requirement:

Ext.onReady(function () {
    Ext.create({
        xtype: 'panel',
        renderTo: Ext.getBody(),
        title: 'Filter demo',
        items: [{
            xtype: 'container',
            width: 170,
            height: 170,
            listeners: {
                afterrender: function () {
                    this.el.on('click', function (event, extDom) {
                        var clickedComponent = Ext.getCmp(Ext.get(extDom).parent('div').parent('div').id);
                        alert(clickedComponent._rowId);
                    })
                }
            },
            items: [{
                xtype: 'panel',
                html: 'Qx Filter Item 1',
                _rowId: 1
            }, {
                xtype: 'panel',
                html: 'Qx Filter Item 2',
                _rowId: 2
            }, {
                xtype: 'panel',
                html: 'Qx Filter Item 3',
                _rowId: 3
            }]
        }]
    });
});

Here is working Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2kg9

Upvotes: 1

Related Questions