1. #1
    Sencha User luismerino's Avatar
    Join Date
    Oct 2011
    Location
    Berlin
    Posts
    46
    Vote Rating
    4
    Answers
    1
    luismerino is on a distinguished road

      0  

    Default Answered: Assigning listeners in config does not apply the handlers to a panel

    Answered: Assigning listeners in config does not apply the handlers to a panel


    Code:
    Ext.define('MyApp.view.Add', {
        extend: 'Ext.Panel',
        
        config: {
            fullscreen: true,
            layout: 'card',
            items: [
                {
                    xtype: 'panel',
                    layout: {
                        type: 'vbox',
                        pack: 'center',
                        align: 'center'
                    },
                    items: [
                        {
                            xtype: 'panel',
                            html: 'Justin Beefer'
                        }
                    ]
                }
            ],
            listeners: {
                painted: function() {
                    console.log('foo');
                }
            }
        },
    When creating a new instance, the listeners won' tbe fired, however when using on()/addListener() upon the instance, then the events work. What's going on?

  2. You should use the following pattern:

    Code:
    Ext.define('MyApp.view.Add', {
        extend: 'Ext.Panel',
        
        config: {
            fullscreen: true,
            layout: 'card',
            items: [
                {
                    xtype: 'panel',
                    layout: {
                        type: 'vbox',
                        pack: 'center',
                        align: 'center'
                    },
                    items: [
                        {
                            xtype: 'panel',
                            html: 'Justin Beefer'
                        }
                    ]
                }
            ]
        },
        initialize : function() {
           this.on({
                 scope  : this,
                painted : this.onPainted
            });
            this.callParent();
        },
        onPainted : function() {
             console.log('foo');
        }
    })

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,533
    Vote Rating
    871
    Answers
    3565
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    When creating new classes, using on() is the preferred way to add listeners. This gives you the flexibility to add listeners when you instantiate the class.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    Answers
    102
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    You should use the following pattern:

    Code:
    Ext.define('MyApp.view.Add', {
        extend: 'Ext.Panel',
        
        config: {
            fullscreen: true,
            layout: 'card',
            items: [
                {
                    xtype: 'panel',
                    layout: {
                        type: 'vbox',
                        pack: 'center',
                        align: 'center'
                    },
                    items: [
                        {
                            xtype: 'panel',
                            html: 'Justin Beefer'
                        }
                    ]
                }
            ]
        },
        initialize : function() {
           this.on({
                 scope  : this,
                painted : this.onPainted
            });
            this.callParent();
        },
        onPainted : function() {
             console.log('foo');
        }
    })