Results 1 to 10 of 10

Thread: Add own button with handler to navigation bar

  1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    29
    Vote Rating
    0
      0  

    Default 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 User
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    723
    Answers
    42
    Vote Rating
    46
      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
      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 User
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    723
    Answers
    42
    Vote Rating
    46
      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
      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
      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
      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
      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
      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
      0  

    Default

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

Tags for this Thread

Posting Permissions

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