Thursday, March 1, 2012

Sencha touch 2 : Dynamically set title of Navigation bar

Hello,

If you are using Sencha touch 2 beta 3, you might have encounter this issue. If you have a view that you pushing in navigation view you can set title there. This title will be used as a title of navigation bar when this view is activated.  See the following code.


config: {
        autoDestroy: false,
        title: 'Bill'
}

What if you have requirement of setting this dynamically. For example you have a list from which you selected a category.

-Category 1
-Category 2
-Category 3

Based on selected record you will load sub category in next view and you want to display Category 1 as a title in next screen. To load next view you will create it first and push it.


if (!this.menuSubCategory) {
                this. menuSubCategory = Ext.create('Application.view.SubCategory');
}
this.getMain().push(this. menuSubCategory);

Here you can set title if you want when you are first creating item. After that you can set it as you already have view. Either you can destroy view every time and create new one else you apply following trick.

This is how next view is loaded. Now if you have set title in config of above view. It will be applied by default. So to dynamically set it you need to do some tweak. First you need to override a base function. See the following code.


Ext.override(Ext.navigation.Bar, {
    getNavigationBarProxyProperties: function () {
        return {
            title: {
                left: this.proxy.titleComponent.renderElement.getLeft()
            },
            backButton: {
                left: this.proxy.backButton.renderElement.getLeft(),
                width: this.proxy.backButton.renderElement.getWidth()
            }
        };
    }
});



Create an overrides file and add it after sencha touch js file. This is necessary else title width will be less compared to title

Now add the following code after you pushed your view to navigation view.

this.getMain().query('#navBar')[0].titleComponent.setWidth(100);
this.getMain().query('#navBar')[0].titleComponent.setTitle('categoryName');  

That's it and you have dynamic title in navigation view. Please note this trick you need to apply if you are using Sencha touch 2 beta 3 version.

10 comments:

  1. Thanks for this information.

    I've adapted the code to not require the override:
    var bar = this.getMain().getNavigationBar();
    if (bar.titleComponent.element) bar.titleComponent.element.setWidth('auto');
    bar.titleComponent.setTitle(title);
    bar.refreshProxy();

    ReplyDelete
  2. The first time that apply, the title is small width, can i help me please?

    ReplyDelete
  3. this.getMain().query('#navBar')[0].titleComponent.setWidth(100); You can set big number here for more width.

    ReplyDelete
  4. Thank you!

    I just wrote my own 'setTitle'-Function:

    Ext.define('myApp.view.NavView', {
    extend: 'Ext.NavigationView',
    alias: 'widget.navview',
    id: 'navview',

    setTitle: function(title) {
    var bar = this.getNavigationBar();
    if (bar.titleComponent.element) bar.titleComponent.element.setWidth('auto');
    bar.titleComponent.setTitle(title);
    bar.refreshProxy();
    },

    ......


    Now you can call setTitle on your NavigationBar-Instance.

    ReplyDelete
    Replies
    1. thanks for your code,i found a better way in sencha touch 2.2.1
      Ext.NavigationView.getNavigationBar() will return a object of Ext.ToolBar,which has a function setTitle()
      so,my code is:
      setTitle: function(title) {
      var bar = this.getNavigationBar();
      bar.setTitle(title);
      }

      Delete
    2. in fact if you are in a Ext.navigation.View class, you can directly call:
      this.getNavigationBar().setTitle("My title");

      Delete
  5. Hiren, after overriding getNavigationBarProxyProperties, the back button is only tapped when I tap the left half of the button. I can change the returned title.left to a greater number, but it causes the title to be shifted to the right. Any idea how to fix it? thanks

    ReplyDelete
  6. thank's for this code. but i don't understand what does mean menuSubCategory

    ReplyDelete