1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    116
    Answers
    4
    Vote Rating
    5
    klaus777 is on a distinguished road

      0  

    Default Unanswered: Set Title for panel programmatically?

    Unanswered: Set Title for panel programmatically?


    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:

    Code:
    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....

    Code:
    Ext.getCmp('mainnav').push({xtype: 'productPanel',
    title: 'HAL-10'
    });
    Why can't I set the title in the initialize event?

  2. #2
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,135
    Answers
    129
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


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

  3. #3
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    604
    Answers
    66
    Vote Rating
    26
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


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


    But the tab title is given by:

    Code:
     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:

    Code:
     card.tab = tabInstance;
    So a solution


    Code:
    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

  4. #4
    Sencha User
    Join Date
    May 2012
    Posts
    116
    Answers
    4
    Vote Rating
    5
    klaus777 is on a distinguished road

      0  

    Default


    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:

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





  5. #5
    Sencha User
    Join Date
    May 2012
    Posts
    116
    Answers
    4
    Vote Rating
    5
    klaus777 is on a distinguished road

      0  

    Default


    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

  6. #6
    Sencha User
    Join Date
    Feb 2012
    Posts
    29
    Vote Rating
    0
    FBlack is on a distinguished road

      0  

    Default


    When you push a new view you can try this

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

  7. #7
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    604
    Answers
    66
    Vote Rating
    26
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


    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?




    Code:
    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!

  8. #8
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    604
    Answers
    66
    Vote Rating
    26
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


    @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:

    Code:
    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;      
       }
    
    });

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

      0  

    Default


    Quote Originally Posted by bluehipy View Post
    @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

  10. #10
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    604
    Answers
    66
    Vote Rating
    26
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


    Quote Originally Posted by FBlack View Post
    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




    m
    aybe it was working in some Sencha Touch version

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar