CODEWITHSUNDEEP
extjsextjs4.1
Deepak Patil
Deepak Patil

Reputation: 295

how to add click event for panel and listen to it in controller with panel as argument

I am dynamically adding panels to my container, once all the panels are added i want to have click event for the panels and listen to the event in one of the controller with the panel clicked being the argument.

I have the following code for adding the click event.

 '#productListPanel': {              
          afterrender: this.onProductPanelAfterRender,
},


 onProductPanelAfterRender: function(panel) {
    panel.mon(panel.el, 'click', this.onProductPanelClick);
},

 onProductPanelClick: function(a,b) {
    console.log("a");
    console.log(a);
    console.log("b");
    console.log(b);
},

It works fine and adds the click event, but i am not able to determine which panel is being clicked.

can somebody please help me out.

Thanks

Upvotes: 1

Views: 4231

Answers (2)

Rocco
Rocco

Reputation: 187

If you wanted to do it after the panel is rendered you can use the following. This assume myPanel is a reference to your panel.

myPanel.getEl().on('click',
    function(){
        alert('Panel Clicked');
    }
);

Upvotes: 0

monstergold
monstergold

Reputation: 755

When you add dynamically a panel to your container, you can add a listener into your panel definition :

listeners: {
   'render': function(panel) {
       panel.body.on('click', function() {
           nameOfYourApp.app.fireEvent('ClickPanel',panel);
       });
    }
}

Fire an event when the panel is clicked and listen this event into your controller.

You can add this code into the init function of your controller : 

    this.application.addListener({
        'ClickPanel':this.clickPanel
    });

and add the function "clickPanel" into your controller :

clickPanel:function(panel){
    // Your code
}

hope this can be helpful for your problem!

Upvotes: 4

Related Questions