Sencha: How to trigger a click event on an li element

Question

I was not able to figure out how to manually trigger DOM events. Here, for example, is my attempt to fire a click event for li

Ext.DomQuery.select('#mapRoutesPanel ol li:nth-child('+(index+1)+')')[0].click(); 

It works fine on google chrome, but when I create my own Android application from the same application, it gives me an error

 Uncaught TypeError: Object #<HTMLLIElement> has no method 'click' 

Answer 1

Ext JS provides its methods for search items in the DOM tree.

---

Look Sencha Fiddle - an application for the sencha touch application, I tested it on my Android (opera) and iphone (safari), its work for me

---

Something like that:

 var liElement = Ext.get('mapRoutesPanel').down('ol li:nth-child(' + (index + 1) + ')'); 

Answer 2

Have you tried Ext.dom.Element-method-fireEvent ?

 Ext.DomQuery.select('#mapRoutesPanel ol li:nth-child('+(index+1)+')')[0].fireEvent('click') 

Answer 3

Not all browsers / applications for touch devices support the click event, because it is a mouse event. Why don't you try using the standard Sencha event system to bind the click handler to the component, then you can check if <li /> has been clicked inside the component's event handler.

Sencha has already done this job for us so we can handle clicks and taps in the same way, so use it.

Btw, delegating events from a parent element is usually more efficient than binding event handlers to a set of different DOM elements. It looks like your anchored events to elements in a loop are bad practice. I just wanted to point it out too.

Here is a sample code:

 var cmp = Ext.getCmp('someComponentId'); cmp.on('click', function(me, event) { if (event.currentTarget.tagName == "LI") { // do something since the <li/> tag was clicked. // event.currentTarget will be the <li/> DOM element, // feel free to do with it as you please :) } } 

Answer 4

In my case, I did it as shown below.

Below is an example of html div code with li s.

 <div class="menu1" id="menu1"> <ul> <li id="students_tab">Students</li> <li id="emps_tab">Employees</li> </ul> </div> 

And below is the extjs code to add the click element to the li element.

 <script type="text/javascript"> Ext.onReady(function(){ var tabs= Ext.query("li", "menu1"); Ext.each(tabs, function(item){ var el = Ext.get(item); el.on("click", function(){ var tabName = this.id.substr(0, this.id.indexOf("_")); alert("U have clicked on "+ tabName + " tab"); }); }); }); </script>