1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    29
    Vote Rating
    0
    cassiopeia is on a distinguished road

      0  

    Default Unanswered: Add own button with handler to navigation bar

    Unanswered: Add own button with handler to navigation bar


    Hi,
    I've already read a lot of posts, but couldn't find a complete example of adding a button to a navigation bar.
    My code so far is this:

    Code:
    Ext.define('LeaveRequest.view.MyRequests', {
                extend : 'Ext.navigation.View',
                alias : 'widget.MyRequests',
                requires : [...],
                config : {
                    title : 'My Requests',
                    fullscreen : true,
                    items : [...],
    
                    navigationBar : {
                        items : [
                        {
                                    id : 'addRequest',
                                    xtype : 'button',
                                    iconCls : 'add',
                                    iconMask : true,
                                    align : 'right',
                                    scope:this,
                                    handler:this.addRequestButton
                                }
    
                        ]
                    }
                },
    
                addRequestButton : function() {
                     console.log('request button') ;
                    this.fireEvent('addRequestButton', this);
                }
    
            });
    The handler doesn't work. I've also tried with 'listeners' but the event gets never fired.

    On another thread i saw this
    Code:
    Ext.ComponentQuery.query('navigationview')[0].getNavigationBar().add( {
                  
                  xtype : 'button', iconCls : 'add', iconMask : true, align :
                  'right', scope:this, handler: this.addRequestButton });
    when i place this in the initialize function, the back button of the navigationview won't work anymore.

    can somebody help please?

  2. #2
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    714
    Answers
    41
    Vote Rating
    42
    ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about

      0  

    Default


    First thing to note is that the function and the event you fire have the same name! This can't work.

    Are you using MVC?

  3. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    29
    Vote Rating
    0
    cassiopeia is on a distinguished road

      0  

    Default


    Yes i'm using MVC. I use the same names in my other classes for the handler en the fire event and it still works.

    The log in the function never shows in the console, so the problem is something else.

  4. #4
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    714
    Answers
    41
    Vote Rating
    42
    ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about

      0  

    Default


    In MVC you have controllers. So why don't you listen for your button in the controller? The way you are doing this seems a bit complicated to me...

  5. #5
    Sencha User
    Join Date
    Sep 2012
    Posts
    29
    Vote Rating
    0
    cassiopeia is on a distinguished road

      0  

    Default


    It's better to fire an event to the controller than let the controller listen to a possible event.
    This way, i can change whatever i want in the view and the controller will still work.
    it's action based instead of polled.
    i use this technique everywhere and it works perfectly. only not with a button within the navigation bar.

  6. #6
    Sencha User
    Join Date
    Apr 2010
    Location
    China
    Posts
    227
    Answers
    64
    Vote Rating
    20
    haduki will become famous soon enough haduki will become famous soon enough

      0  

    Default


    I do not know why you have to use navigation view.
    Why not use toolbar/titlebar and card layout?
    I write English by translator.

  7. #7
    Sencha User
    Join Date
    Sep 2012
    Posts
    29
    Vote Rating
    0
    cassiopeia is on a distinguished road

      0  

    Default


    i really need navigationview for the back buttons. these are created dynamically when you push new views.

  8. #8
    Sencha User
    Join Date
    Apr 2010
    Location
    China
    Posts
    227
    Answers
    64
    Vote Rating
    20
    haduki will become famous soon enough haduki will become famous soon enough

      0  

    Default


    ok.Your first method:
    Code:
    {
        id : 'addRequest',
        xtype : 'button',
        iconCls : 'add',
        iconMask : true,
        align : 'right',
        scope:this,
        handler:this.addRequestButton
    }
    the 'this' is window object ,because read context
    Code:
    // here is scope: window
    Ext.define('',{/* here is a anonymous object create by window*/});
    
    //more explain
    var configObj={
       scope: this// this is window,you know?
    }
    console.info(configObj.scope);// will print window object.
    Ext.define('',configObj);//do you understand?
    Your second method:
    when i place this in the initialize function, the back button of the navigationview won't work anymore.
    Code:
    Ext.define('LeaveRequest.view.MyRequests', {
        extend : 'Ext.navigation.View',
        xtype:'myrequests',
        config : {
            title : 'My Requests',
            fullscreen : true,
            items : [{html:'views',title:'the title'}]
            
            
        },
        initialize: function(){
            this.callParent();//i think you missed callparent.
            this.getNavigationBar().add({
                        id : 'addRequest',
                        xtype : 'button',
                        iconCls : 'add',
                        iconMask : true,
                        align : 'right',
                        scope:this,
                        handler:this.addRequestButton
                    });
        },
        
        addRequestButton : function() {
            console.log('request button') ;
            this.push({
                                title:'second',
                                html:'other view'
           })
            this.fireEvent('addRequestButton', this);
        }
        
    });
    Last edited by haduki; 8 Oct 2012 at 12:35 PM. Reason: add explanation
    I write English by translator.

  9. #9
    Sencha User
    Join Date
    Sep 2012
    Posts
    29
    Vote Rating
    0
    cassiopeia is on a distinguished road

      0  

    Default


    Could you give an explanation please?
    Not sure what you mean with that code.

  10. #10
    Sencha User
    Join Date
    Sep 2012
    Posts
    29
    Vote Rating
    0
    cassiopeia is on a distinguished road

      0  

    Default


    I just tried it with the callParent and it works, thank you very much!

Thread Participants: 2

Tags for this Thread