javascript - ExtJs 和子元素上的单击事件

Question

我有下一个 ExtJs 代码

Ext.create('Ext.panel.Panel', {
    renderTo:'center_div',
    width: 700,    
    layout: 'fit',
    id: 'test',
    items:
    [
        { 
            xtype: 'box', 
            html: '<div style=\"height: 20px;\"> </div>' 
        },
        {         
            xtype: 'box',
            html: '<ul> ' + 
                    '<li id="id1" class=\"active\"><div>Create</div><span><i></i>Step 1</span></li>' +  
                    '<li id="id2"><div>Assign</div><span><i></i>Step 2</span></li>' + 
                    '<li id="id3"><div>Filter</div><span><i></i>Step 3</span></li>' +
                    '<li id="id4"><div>Summary</div></li>' +
                  '</ul>',
            cls: 'x-wizard-steps',
           // delegate: '.x-wizard-steps > ul',
            listeners: {
                afterrender: function(component) {
                    console.log('component' ,component);                    
                    var childLi = Ext.select('.x-wizard-steps > ul > li'); 
                    console.log('childLi', childLi);
                    console.log('childLi.elements', childLi.elements[0].id);                        
                    Ext.each(childLi.elements, function(item,i) {                        
                        console.log('item', item.id);
                        item = Ext.get(item.id);
                        item.on({
                            click: function(cmp, a) {
                               console.log(cmp);                                
                               console.log(a);
                            }
                        });                    

                    });                             

                   var options = {
                        xtype: 'box',       
                        id: 'comp_',
                        html: 'fdsfdsfdsfdsfdsf',
                        margin: '0 0 8 0'
                   };

                   var component1 = Ext.create('Ext.Component', options);
                   Ext.getCmp('test').add(component1);

                }
            }
        }
    ]
}); 

我需要在我的盒子 html 代码中的所有 LI 上放置事件监听器。

<li id="id2">
   <div>Assign</div><span><i></i>Step 2</span>
</li>

点击事件工作正常，但如果我点击它会给我 DIV 或 SPAN，有时还会给我 LI，这取决于我点击的位置。无论我点击 LI 中的哪个区域，如何始终获取 LI 元素？

Answer 1

找到了

在这里

   item.on({
       click: function(cmp, a) {
           console.log(cmp);                                
           console.log(a);
           console.log(this); // My LI
       }
     });

这有我的 LI