Sencha: How to trigger click event on li element

Question

I've been unable to figure out how to manually fire DOM events. Here, for example, is my attempt to fire the "click" event for a li

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

It's working fine on google chrome, but when i build android native app of same application it gives me error

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

Did you try http://stackoverflow.com/questions/16145882/extjs-manually-firing-click-event-button-param-is-different-from-mouse-click ? — Himanshu Tyagi, Sep 02 '14 at 13:52

score 1 · Answer 1 · answered Sep 03 '14 at 10:22

Ext JS provides its methods for search elements in DOM tree.

Look Sencha Fiddle - its sencha touch app, i tested it on my android(opera) and iphone(safari) its work for me

Something like this:

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

score 0 · Answer 2 · answered Sep 03 '14 at 16:43

0

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

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

answered Sep 03 '14 at 16:43

Ernesto Ramírez Romero

357
1
4

macguru2000 · Answer 3 · 2014-09-08T20:07:42.843

Not all touch device browsers/apps support the click event because it is a mouse event. Why don't you try using Sencha's normalized event system to bind a click handler to the component, you can then check if the <li/> was clicked inside the component's click event handler.

Sencha has already done the work for us so we can handle clicks & taps in the same manner, so take advantage of it.

Btw, event delegation from a parent element is usually more performant than binding event handlers to a bunch of different DOM elements. It looks like your binding events to elements in a loop, this is a bad practice. I just wanted to point that out too.

Here is a code example:

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 :)
    }
}

score -2 · Answer 4 · answered Jun 11 '13 at 17:44

I did as below in my case.

Below is the sample html code of div 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 click event to 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>

Sencha: How to trigger click event on li element

4 Answers4