Results 1 to 3 of 3

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

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User luismerino's Avatar
    Join Date
    Oct 2011
    Location
    Berlin
    Posts
    46
    Answers
    1
    Vote Rating
    4
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Answers
    3931
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  4. #3
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Answers
    102
    Vote Rating
    86
      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');
        }
    })

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •