Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Listeners / Event management in an

  1. #1

    Question Listeners / Event management in an

    Hello,

    I need your advice to manage events and listeners in an extension.
    I used the tutorials proposed in the Learning Center to develop an application I'd like modular. So I use extensions mechanisms.

    In the initcomponent, I use Ext.apply to create underlying components of my extension (tabpanel, chart, datefields ...). I don't know if it is the best way to do.

    Let's take an example :

    PHP Code:
    W3h.panels.GraphViewer Ext.extend(Ext.Container,{
        
    initComponent: function(){
            var 
    store = new Ext.data.JsonStore({ ... });
                        
            
    Ext.apply(this, {
                
    layout:'fit',
                
    items: new Ext.TabPanel({
                    
    activeTab0,
                    
    plain:true,
                    
    defaults:{autoScrolltrue},
                    
                    
    items:[
                    {
                        
    title'Day',
                        
    tbar: {
                            
    items: [
                            {
                                
    text'previous',
                                
    handler: function(){
                                    ...
                                    
    myFunction();
                                }
                            },
                            {
                                
    xtype'datefieldplus',            
                                ...
                                
    listeners: {
                                    
    'afterdateclick':function(pickerdate){ 
                                        ...
                                        
    myFunction();
                                    }
                                }
                            },
                            {
                                
    text'',
                                
    iconCls'next',
                                
    handler: function(){
                                    ...
                                    
    myFunction();
                                }
                            },
                            ]
                        },
                    ...
                    }]
                })
            });
            
    W3h.panels.GraphViewer.superclass.initComponent.call(this);
        }
        
    }); 
    I'd like to call a function (myFunction()) in the button handler and in the datefield listener. But if I create the function at the extension level, I've got an error.

    What is the best way to do that ?

    Thx.

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Well, move outside the extend-to-configure template you've followed and actually implement a class method!

  3. #3

    Default

    Any recommended readings or examples to start on good basis ?

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    For what? You surely know how to use Ext.extend because you are using it.

    Add some methods.

  5. #5

    Default

    I'm afraid to not catch the point.
    I'm using Ext.Extend but with no pretention, I'm still a beginner.
    I tried to declare a method in the extension (myfunction: function(){alert('test');}) , but It does not work when I call this.myfunction() in the listener or handler of the above example.

  6. #6
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    You don't call 'this.myfunction' in an event handler! this.myfunction should BE the event handler.

    (and you need to specify a scope, so 'this' is correct inside myfunction)

  7. #7

    Default

    Right, I'm ok with that but in fact, I have some common behaviours in the button handler and in the datefieldplus listener. Shall I need to duplicate the code ?

  8. #8
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Route the listener directly to one function, then branch to other handling member functions from there.

  9. #9
    Sencha User VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501

    Default

    Code always helps me to understand things better....so I hope this helps...

    PHP Code:
    W3h.panels.GraphViewer Ext.extend(Ext.Container,{
        
    initComponent: function(){
            var 
    store = new Ext.data.JsonStore({ ... });
                        
            
    Ext.apply(this, {
                
    layout:'fit',
                
    items: new Ext.TabPanel({
                    
    activeTab0,
                    
    plain:true,
                    
    defaults:{autoScrolltrue},
                    
                    
    items:[
                    {
                        
    title'Day',
                        
    tbar: {
                            
    items: [
                            {
                                
    text'previous',
                                
    handlerthis.previousFunction,
                                
    scopethis
                            
    },
                            {
                                
    xtype'datefieldplus',            
                                ...
                                
    listeners: {
                                    
    'afterdateclick':this.dateClickFunction,
                                    
    scopethis
                                
    }
                            },
                            {
                                
    text'',
                                
    iconCls'next',
                                
    handlerthis.nextFunction,
                                
    scopethis
                            
    },
                            ]
                        },
                    ...
                    }]
                })
            });
            
    W3h.panels.GraphViewer.superclass.initComponent.call(this);
        },
        
    dateClickFunction: function(){
            
    // do something for date click
        
    },
        
    previousFunction: function(){
            
    // do something for previous
            
    this.go(-1);
        },
        
    nextFunction: function(){
            
    // do something for next
            
    this.go(1);
        },
        
    go: function(i){
            
    // handle movement
        
    }
        
    }); 
    The methods that get executed for your handlers are part of the class your extending, from within these methods on the class you can call other methods that do this or that - make sense now?

    PS. i did not test this code, just typed it out.

  10. #10

    Default

    Do you mean something like that:

    PHP Code:
    W3h.panels.GraphViewer Ext.extend(Ext.Container,{
         
    afterdateclick: function(...){
           ...
           
    myCommonCode();
         },

         
    myBtnHandler: function(...){
           ...
           
    myCommonCode();
         },

         
    myCommonCode: function(...) {
           ...
         }

        
    initComponent: function(){
            var 
    store = new Ext.data.JsonStore({ ... });
                        
            
    Ext.apply(this, {
                
    layout:'fit',
                
    items: new Ext.TabPanel({
                    
    activeTab0,
                    
    plain:true,
                    
    defaults:{autoScrolltrue},
                    
                    
    items:[
                    {
                        
    title'Day',
                        
    tbar: {
                            
    items: [
                            {
                                
    text'previous',
                                
    handlerthis.myBtnHandler
                            
    },
                            {
                                
    xtype'datefieldplus',            
                                ...
                                
    listeners: {
                                    
    'afterdateclick':{fn:this.afterdateclickscope:this}
                                }
                            },
                            {
                                
    text'',
                                
    iconCls'next',
                                
    handlerthis.myBtnHandler
                            
    },
                            ]
                        },
                    ...
                    }]
                })
            });
            
    W3h.panels.GraphViewer.superclass.initComponent.call(this);
        }
        
    }); 

Page 1 of 2 12 LastLast

Similar Threads

  1. fieldmanager - event & reservation management
    By tobiu in forum Community Discussion
    Replies: 72
    Last Post: 27 Aug 2012, 9:16 PM
  2. [SOLVED] Event Management in subpanels
    By sbbolduc in forum Ext GWT: Discussion
    Replies: 6
    Last Post: 16 Dec 2009, 5:10 AM
  3. Ext.Event static listeners[] slows down listeners removal
    By gbulfon in forum Ext 3.x: Help & Discussion
    Replies: 6
    Last Post: 31 Aug 2009, 7:51 AM
  4. Replies: 2
    Last Post: 6 Aug 2009, 3:14 PM
  5. Event management on a text field
    By Chamster in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 12 Jun 2008, 3:29 AM

Posting Permissions

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