CODEWITHSUNDEEP
extjsextjs4.1
Hurda
Hurda

Reputation: 4715

Is there really no click event for all ExtJS components

I'm learning extjs 4.1 and I can't find click event on most of the components - I'm I blind or I'm unable to react on click on other components than button?

What is the reason? HTML supports click on all elements.

Upvotes: 1

Views: 7392

Answers (4)

Sasha Brocato
Sasha Brocato

Reputation: 673

If you are only listening to click event you can also do this

    xtype: 'container',
    listeners: {
         el: {
             click: function() {
                  alert('I clicked');
              },
              scope: this
             }
     }

If you need to listen to an event that the Ext.dom.Element does not fire, you will need to attach it in the 'render' listener, like others have suggested.

Upvotes: 0

jenson-button-event
jenson-button-event

Reputation: 18941

Using a self-referencing managed listener (cleanest imo):

Ext.create('Ext.panel.Panel', {
    listeners: {
       'afterrender': function(panel) {
           this.mon(this.getEl(), 'click', this.onClick, this)
        }
    },
    onClick: function() {
        alert("mmm mon mon mon");
    }
});

Upvotes: 0

pllee
pllee

Reputation: 3959

Every component can have the click event exposed at the element level. Some components like Ext.button.Button have a click event at the component level.

Here is a nice way to add a click event on a panel:

  new Ext.panel.Panel({
      listeners: {
          click: this.handlePanelClick,
          element: 'el'
      }
  });

edit to respond to comment

The element string is a any element that is a property of the component. 

new Ext.panel.Panel({
listeners: {
    click: function() {
        alert('you clicked the body');
    },
    element: 'body'
}

});

The Ext docs have a more thorough explanation http://docs.sencha.com/ext-js/4-1/#!/api/Ext.util.Observable-method-addListener

Upvotes: 3

egerardus
egerardus

Reputation: 11486

You can add any DOM event pretty easily by accessing the Ext.dom.Element object that almost all visible components contain once it has been rendered.

Simply add a listener to the afterrender event that adds the event you want to the dom object.

Ext.create('Ext.panel.Panel', {
    // other panel configs ...
    listeners: {
       'afterrender': function(panel) {
           panel.el.on('click', function() {
               alert('clicked');
           });
        }
    }
});

I think there is also a way to do it for all components of a class that extends Ext.util.Observable (all visible components). I haven't done it before so you would have to play around with that.

Upvotes: 2

Related Questions