时间戳

首页 > 解决方案 > 获取容器中元素索引的最佳方法

extjs - 获取容器中元素索引的最佳方法

问题描述

在我的容器内，我有多行组件。当用户单击其中一个组件时，我想知道在容器中单击该组件的那一行的索引。基本上我想获得ROW id。得到这个的最好方法是什么？

谢谢

代码：

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;
}

这是完整的代码： https ://jsfiddle.net/342u013y/

任何人都可以请帮助！

标签： extjs

解决方案

Ext 3.4 不提供 Container 上的点击事件。您必须手动附加它。

这是您的要求的快速 poc：

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
            }]
        }]
    });
});

这是工作小提琴：https ://fiddle.sencha.com/#view/editor&fiddle/2kg9

推荐阅读