Javascript ExtJs并单击子元素上的事件

我有下一个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);

                }
            }
        }
    ]
}); 

Ext.create（'Ext.panel.panel'{
renderTo:“中心分区”，
宽度：700，
布局：“适合”，
id:'测试'，
项目：
[
{ 
xtype:'框'，
html:'
},
{         
xtype:'框'，
html:“
”+
创建步骤1+
“
分配步骤2
”+
“
过滤器步骤3
”+
“
摘要”+
“
”，
cls:'x-wizard-steps'，
//委托：'.x-wizard-steps>ul'，
听众：{
afterrender:函数（组件）{
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）；
关于({
点击：功能（cmp，a）{
控制台日志（cmp）；
控制台日志（a）；
}
});                    
});                             
变量选项={
xtype:'框'，
id:“comp_uu”，
html:'fdsfdsfdsfsfsfsf'，
边距：“0 0 8 0”
};
var component1=Ext.create（'Ext.Component'，选项）；
Ext.getCmp（“测试”）.add（组件1）；
}
}
}
]
}); 

我需要将事件侦听器放在我的html代码框中的所有LI

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

第2步

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

找到它

在这里

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

---

这是我的李，谢谢你找到答案后回复。如果这个问题解决了，请接受这个答案，这样可以帮助有相同问题的人，甚至这个问题也会被移到回答列表中。