Set Title for panel programmatically?

[klaus777]

Setting title of a panel inside a navigationview seems to be really hard. At least I didn't find a way so far after 1 hour....

This is not working:

Ext.define('MyApp.view.ProductPanel', {
    extend: 'Ext.Panel',
    id: 'productPanel',

    ...
    initialize: function() {
    // not working ...............        
    this.setTitle('dynamic title');

    // also not working:
    Ext.getCmp('productPanel').setTitle('dynamic title');

    // also not working:
    this.element.setTitle('dynamic title');

    }
});

In the panel that pushes the new panel (productPanel), setting the title is working, but it's really ugly for me to do the setting logic not in the initialize but in the former panel....

Ext.getCmp('mainnav').push({xtype: 'productPanel',
title: 'HAL-10'
});

Why can't I set the title in the initialize event?

[jerome76]

Try referencing the navigationBar's title and not the panel.

[bluehipy]

Ext.Panel does not have a title property so calling setTitle will not do the trick.


But the tab title is given by:

 tabTitle = (card.getTitle) ? card.getTitle() : initialConfig.title,

on the tab panel add nethod.

So if one would extend Panel in such a way that it will have a title the upper code might have sense.


Also another cute thing about cards added to tab panel is that they receive a reference to their tab:

 card.tab = tabInstance;

So a solution

Ext.define('App.view.TitledPanel',
{
   extend:'Ext.Panel',
   xtype:'titledpanel',
   config:{
       title:false
  },
  updateTitle:function(newTitle, oldTitle)
  {
          if(newTitle && this.tab)
          {
                this.tab.setTitle( newTitle );
          }
   }
});

Now this should help also if you want to change panel title ~ tab title at a later time, helps a lot when you have an application localized

[klaus777]

thank you :-)

I will try this.

I just don't understand why this is missing. I mean the most common task, that every app developer who is developing an iPhone app with a toolbar, is, that you have a navigation (navigation controller/navigation view/card layout) (for example a table/list) where you can navigate to other views. Sometimes the target views are just static views that will always have the same title. But its very often the case that you navigate to a dynamic view, that will have a dynamic title in its toolbar.

For example apps that are doing this on the iphone: the notes app from apple is showing the note-title in the toolbar as soon as you open a note. Or the SMS/Messages app from apple will show you the message receivers name in the toolbar so that you see the name.

Basically what I want to say: It's a very common task to change the toolbar title dynamically in your app after you navigate to a new view.... So its really not understandable for me, why this is such a big deal to achieve with Sencha Touch... There should be a simple "setTitle()" function that allows developers to set the title of their panel/toolbar....

like in Objective-C (iOS) its simple:

self.title = myObject.objectname;  // set views title
//or
self.title = @"My Title"; // set views title

[klaus777]

Still not working


- Referencing navigationbar does nothing when trying to Ext.getCmp('navbar').setTitle('my title');
No results and no error by doing this... :-)


- And I don't have a tab panel in my app only a navigationview, so I can't use tab-magic here

[FBlack]

When you push a new view you can try this

this.NavigationView.getNavigationBar().pushTitle("title");

[bluehipy]

Oh NavigationView...wait a moment...

So Ext.navigation.View method add
links to Ext.navigation.Bar method onViewAdd
links to Ext.navigation.Bar method doChangeView which
states setTitle(titleText) and refreshTitlePosition();


So if you check upper comment of jerome76 you will notice he was right, you have to reference that navigationBar.


Maybe we can modify the TitledPanel for tab to handle navigation view also?

Ext.define('App.view.TitledPanel',
{
   extend:'Ext.Panel',
   xtype:'titledpanel',
   config:{
       title:false
  },
  updateTitle:function(newTitle, oldTitle)
  {
          //check if tab panel has this inside
          if(newTitle && this.tab)
          {
                this.tab.setTitle( newTitle );
                return newTitle;
          }

         //check if is inside navigation view
         //not very accurate :))
         var nv = this.up('navigationview');
         if(nv)
         {
             var bar = nv.getNavigationBar();
             if( bar && bar.setTitle && bar.refreshTitlePosition)
             {
                   bar.setTitle(newTitle);
                   bar.refreshTitlePosition();
                   return newTitle;
             }
         }
      
   }
});

pam - pam!


Tell me if it works Thanks!

[bluehipy]

@FBlack navigationBar doesn't have a pushTitle method,



but that highlight a different thing NavigationView ~ its bar ~ take the title from a stack so if you set the title like above on back it is possible to not work unless you set it again from code.
So maybe a better solution:

Ext.define('App.view.TitledPanel',
{
   extend:'Ext.Panel',
   xtype:'titledpanel',
   config:{
       title:false
  },
  updateTitle:function(newTitle, oldTitle)
  {
          //check if tab panel has this inside
          if(newTitle && this.tab)
          {
                this.tab.setTitle( newTitle );
                return newTitle;
          }

         //check if is inside navigation view
         //not very accurate :))
         var nv = this.up('navigationview');
         if(nv)
         {
             //nv active item is not this panel we should not do anything
            var activeItem = nv.getActiveItem();
             activeItem = isNaN(activeItem) ? activeItem : nv.getAt( activeItem );
             if(this != activeItem)
             {
               var bar = nv.getNavigationBar();
               if( bar && bar.setTitle && bar.refreshTitlePosition)
               {
                     bar.backButtonStack.pop();
                    bar.backButtonStack.push(newTitle);
                     bar.setTitle( bar.getTitleText() ); //reads from bar.backButtonStack
                     bar.refreshTitlePosition();
                     return newTitle;
               }
             }
         }
        return newTitle;      
   }

});

[FBlack]

@FBlack navigationBar doesn't have a pushTitle method

I'm not sure...I use this and it's working fine.

http://www.sencha.com/forum/showthre...ight=pushTitle

[bluehipy]

I'm not sure...I use this and it's working fine.

http://www.sencha.com/forum/showthre...ight=pushTitle

Uncaught TypeError: Object [object Object] has no method 'pushTitle'




http://www.senchafiddle.com/#0Nyuu




maybe it was working in some Sencha Touch version