Change default back button on navigation view

Question

Hi i am trying to change the title and icon of the default back button after pushing in a panel. I have tried the below code in the controller and i have tried similar code in the config of the view but with no success. Any direction on implementing this would be helpful

       this.getPlacesNavView().push({ xtype: 'details',title: name,
        backButton:{ iconCls:'reply', iconMask: true,  useTitleForBackButtonText: false,
        defaultBackButtonText: 'Back To Places'}});

Answer 1

Good question.

backButton is component of navigationBar config. So you can define it inside navigationBar config of navigation view like this --

navigationBar : {
    backButton : {
        align : 'left',
        hidden : true,
        ui : 'back',
        iconMask: true,
        iconCls:'reply'

    }
}

From controller you need get instance of navigationBar and then backButton. And then set required properties. First push the desired view and then change back button-

this.getPlacesNavView().push({
        xtype: 'details',
        title: name
    });
var backButton = this.getPlacesNavView().getNavigationBar().getBackButton();
        backButton.setText("Back To Places");
        backButton.setIconMask(true);
        backButton.setIconCls("reply");

Here is demonstration