Add Click Event with ExtJS Panel

Question

I am trying to create panel in ext js and got success on that but I also want to add click event with this

       {
            xtype: 'panel',
            flex: 1,
            x: 10,
            y: parseInt(panelCreation[i - 1].y) + 
               parseInt(panelCreation[i -1].height) + 10,
            width: twidth,
            height: theight,
            layout: 'absolute'                
        }

I don't want to add click event separately I want to add with this code like after layout:absolute add comma and event please help me in this.

JamesHalsall · Accepted Answer · 2012-02-27 13:10:53Z

24

You can add in the following for a click event:

listeners: {
   'render': function(panel) {
       panel.body.on('click', function() {
           alert('onclick');
       });
    }
}

EDIT: to get the X and Y coordinates of the click event you can change the click event handler as follows...

panel.body.on('click', function(e) {
   alert('X: ' + e.getPageX());
   alert('Y: ' + e.getPageY());
});

edited Feb 27, 2012 at 13:10

answered Feb 24, 2011 at 17:27

JamesHalsall

13.5k4 gold badges43 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Asif Khan Over a year ago

I already found that but anyway Thanks Kirk Woll for your response thats working fine.

k102 Over a year ago

@Jaitsu, don't want to post another question, but how can i get click coordinates if this event?

Francis Ducharme Over a year ago

@JamesHalsall In MVC ExtJS4, this seems to make it so that the panel's body's click event is triggered from other views as well that don't have this controller. Do you have the same issue ?

JamesHalsall Over a year ago

I haven't used ExtJS 4, so I can't help you there unfortunately

stambikk Over a year ago

If you want the event to fire on header and panels like lbar clicks, use panel.el.on('click', function(){...}) instead of panel.body.on('click', function(){...})

Sergei Glotov · Accepted Answer · 2012-04-13 13:12:10Z

3

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

edited Apr 13, 2012 at 13:12

Sergei Glotov

20.4k11 gold badges87 silver badges100 bronze badges

answered Apr 13, 2012 at 13:02

Gautam Samantroy

311 bronze badge

2 Comments

Gautam Samantroy Over a year ago

Friends can you please post the codes for clickable line chart.

Aebsubis Over a year ago

I find this answer better than the accepted one because it also fires the event when the click is performed at the header.

stambikk · Accepted Answer · 2015-04-03 05:54:21Z

3

There's, in my opinion, a much more straightforward way to do this...(taken straight out of the docs). For more info about adding a listener see here. (Ext Js 4)

new Ext.panel.Panel({
    width: 400,
    height: 200,
    dockedItems: [{
        xtype: 'toolbar'
    }],
    listeners: {
        click: {
            element: 'el', //bind to the underlying el property on the panel
            fn: function(){ console.log('click el'); }
        },
        dblclick: {
            element: 'body', //bind to the underlying body property on the panel
            fn: function(){ console.log('dblclick body'); }
        }
    }
});

answered Apr 3, 2015 at 5:54

stambikk

1,39514 silver badges24 bronze badges

Collectives™ on Stack Overflow

Add Click Event with ExtJS Panel

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related