8

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.

3 Answers 3

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());
});
5
  • I already found that but anyway Thanks Kirk Woll for your response thats working fine.
    – Asif Khan
    Feb 26, 2011 at 21:15
  • @Jaitsu, don't want to post another question, but how can i get click coordinates if this event?
    – k102
    Feb 27, 2012 at 7:55
  • @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 ? Jun 6, 2014 at 15:27
  • I haven't used ExtJS 4, so I can't help you there unfortunately Jun 7, 2014 at 12:42
  • 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(){...})
    – stambikk
    Mar 19, 2015 at 7:41
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
    }
});
2
  • Friends can you please post the codes for clickable line chart. Apr 13, 2012 at 13:05
  • I find this answer better than the accepted one because it also fires the event when the click is performed at the header.
    – Aebsubis
    Mar 14, 2014 at 17:13
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'); }
        }
    }
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.