Search code examples
extjs

extjs listeners sub component event


I create custom panel contain buttons.

Ext.define('TEST.TPL_BTN_Table', {
    extend: 'Ext.panel.Panel',  
    xtype: 'TPL_BTN_Table',

    BTN_New : Ext.create('Ext.Button',  {
        iconCls: 'icon-add',
        width: 24,  
        height: 24,

        listeners: {
            scope: this,

            render: function(c) {
                Ext.create('Ext.tip.ToolTip', {
                    target: c.getEl(),
                    html: 'New'
                });
            }                
        }
    }), 

    constructor: function( config) {
        
        config= {
            layout: {
                    type: 'vbox',
                    align : 'center',
                    pack  : 'start',
            },
            width: 35,
            border: false,
            items: [{
                    items: this.BTN_New,
                    border: false,
                    height: 30
            },{
                    items: this.BTN_Modify,
                    border: false,
                    height: 30
            },{
                    items: this.BTN_Delete,
                    border: false,
                    height: 30
            },{
                    items: this.BTN_Print,
                    border: false,
                    height: 30

            }] // end items 
        }; // end config
        
        
    
        this.superclass.constructor.call(this, config);

from caller this what I do

       this.PAN_Button = Ext.create('TEST.TPL_BTN_Table', {
        });

        this.PAN_Button.BTN_New.on({
            scope: this,
            click: function() { 
                //  received click event
            }, 
        });     
type here

I have tried create custom event using fireEvent() but somehow listener not capture custom event.

Can I listen all button click from this.PAN_Button rather than one by one like this.PAN_Button.BTN_New.on(), this.PAN_Button.BTN_Modify.on(), this.PAN_Button.BTN_Delete.on()?


Solution

  • scope has to be 'this' and not this.

    If you post the full example, I can help a bit more. You just posted parts of your panel.

    It's always helpful if you create a fiddle. That way it's easier to help.

    Cheers Torsten