1. #1
    Sencha User
    Join Date
    Sep 2011
    Posts
    23
    Vote Rating
    0
    eryx is on a distinguished road

      0  

    Default Answered: listener property versus on method

    Answered: listener property versus on method


    Hey I have a small question regarding the activate event. I have a tabpanel and on first activate I load some external data.

    PHP Code:
    app.views.NewsCard Ext.extend(
        
    Ext.Panel, {
        
    id'newsCard',
        
    layout'card',
        
    title'News',
        
    iconCls'news',
        
    listeners: {
            
    singletrue,
            
    activate: function () {
                var 
    helper app.utils.Helper;
                if (
    app.handlers.Network.checkDevice()) {
                    
    helper.showMask('newsCard');
                    
    app.handlers.NetRequest.news();
                } else {
                    
    //offlinemode try to load cached data
                    
    helper.showMask('newsCard');
                    
    app.stores.newsStore.load({
                        
    callback: function () {
                            
    helper.hideMask('newsCard');
                        }
                    });
                }
            }
        },

        
    initComponent: function () {
            var 
    newstpl = new Ext.XTemplate(
                
    '<tpl for=".">',
                
    '<tpl if="xindex == 1">',
                        
    '<tpl if="this.isNotEmpty(values.imagebig) === true">',
                            
    '<div class="newspicbig"><img src="{[this.decodeContent(values.imagebig)]}"></div>',
                        
    '</tpl>',
                        
    '<div class="newsTitle">{[this.decodeContent(values.title)]}',
                            
    '<div class="newsAge floatRight">',
                                
    '{newsage}',
                            
    '</div>',
                        
    '</div>',
                        
    '<div class="newsDescriptionBig floatLeft">',
                            
    '{[this.decodeContent(values.content)]}',
                        
    '</div>',
                        
    '<div class="floatRight disclosure">',
                            
    '<img src="resources/images/disclosure.png">',
                        
    '</div>',
                    
    '</tpl>',
                    
    '<tpl if="xindex &gt; 1">',
                        
    '<tpl if="this.isNotEmpty(values.imagesmall) === true">',
                            
    '<div class="newspic floatLeft"><img src="{[this.decodeContent(values.imagesmall)]}"/></div>',
                        
    '</tpl>',
                        
    '<div class="newsTitle">{[this.decodeContent(values.title)]}',
                            
    '<div class="newsAge floatRight">',
                                
    '{newsage}',
                            
    '</div>',
                        
    '</div>',
                        
    '<div class="newsDescription">',
                            
    '{[this.decodeContent(values.content)]}',
                        
    '</div>',
                        
    '<div class="floatRight disclosure">',
                            
    '<img src="resources/images/disclosure.png">',
                        
    '</div>',
                    
    '</tpl>',
                
    '</tpl>',
                {
                    
    isNotEmpty: function (image) {
                        return (
    image !== "" && image !== undefined) ? true false;
                    },
                    
    decodeContent: function (content) {
                        return 
    decodeURIComponent(content);
                    }
                }
            );

            
    this.newsList = new Ext.List({
                
    id'newsList',
                
    storeapp.stores.newsStore,
                
    emptyText'<div class="emptymsg">Konnte keine Daten laden. ' +
                    
    'Bitte verbinden Sie sich mit dem Internet und benutzen Sie den Refresh-Button</div>',
                
    itemTplnewstpl,
                
    loadingText'',
                
    onItemDisclosurefalse,
                
    listeners: {
                    
    selectionchange: {
                        
    fnthis.onSelect,
                        
    scopethis
                    
    }
                }
            });

            
    this.newsPanel = new Ext.Panel({
                
    layout'fit',
                
    itemsthis.newsList,
                
    dockedItems: [{
                    
    xtype'toolbar',
                    
    title'News',
                    
    items: [
                        {
                            
    xtype'spacer'
                        
    }, {
                            
    id'newsbtn',
                            
    ui'plain',
                            
    iconCls'refresh',
                            
    iconMasktrue,
                            
    listeners: {
                                
    'tap': {
                                    
    fnapp.handlers.Refresh.refreshData,
                                    
    buffer500
                                
    }
                            }
                        }
                    ]
                }]
            });
            
    this.items this.newsPanel;
            
    app.views.NewsCard.superclass.initComponent.call(this);
        },


        
    onSelect: function (selrecords) {
            if (
    records[0] !== undefined) {
                var 
    detailCard = new app.views.NewsDetail({
                    
    prevCardthis.newsPanel,
                    
    recordrecords[0]
                });
                
    this.setActiveItem(detailCard'slide');
            }
        }
    }); 
    As you can see i set the listener property on that view and listen once for the activate event. But I was once told that this is not a good idea.
    I'm now not sure what method would be better the only other idea I had was that instead of using the listener property I could use the on method. But I think that makes no difference or am I wrong?

    like this
    PHP Code:
    this.on('activate', function () {
                var 
    helper app.utils.Helper;
                if (
    app.handlers.Network.checkDevice()) {
                    
    helper.showMask('newsCard');
                    
    app.handlers.NetRequest.news();
                } else {
                    
    //offlinemode try to load cached data
                    
    helper.showMask('newsCard');
                    
    app.stores.newsStore.load({
                        
    callback: function () {
                            
    helper.hideMask('newsCard');
                        }
                    });
                }
            }, 
    this, {singletrue}); 
    I would be really happy if someone could tell me whats the better way to go and I really appreciate your time

    Best regards eryx

  2. listener should only be used when creating an instance and on within a component.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,620
    Answers
    3452
    Vote Rating
    817
    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


    listener should only be used when creating an instance and on within a component.
    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 User
    Join Date
    Sep 2011
    Posts
    23
    Vote Rating
    0
    eryx is on a distinguished road

      0  

    Default Thanks

    Thanks


    That makes sense thank you!

    Greetings eryx

Thread Participants: 1