1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    14
    Vote Rating
    0
    Vinzcent is on a distinguished road

      0  

    Default Change title of docked toolbar

    Change title of docked toolbar


    Hi,

    I would like to change the title of the toolbar that is docked in a panel.
    For example, when a user taps an element of a list, the toolbar title should have to change from 'My app' to 'Item selected'.

    I tried this, but it didn't work
    Code:
    detailPanel.dockedItems[0].setTitle('Item selected');

    How do i do this?


    This is the code of my panel

    Code:
    var detailPanel = new Ext.Panel({
    	    title: 'Detail',
    	    
    	    dockedItems: [
    	    {
    		dock : 'top',
    		xtype: 'toolbar',
    		title: 'My app'		
    		
    	    }],
    	    
    	    tpl: new Ext.Template([
    		    '<div name="{id}">',
    			'<span>{text}</span>',
    		    '</div>'
    		    ])
    	});
    And this is my list
    Code:
    	var listPanel = new Ext.Panel({
    	    title: 'All Posts',
    	    dockedItems: [
    	    {
    		dock : 'top',
    		xtype: 'toolbar',
    		title: 'Vincent Winckelmans'
    		
    	    }],
    	    
    	    items:[list]
    	});
    
    	list.on('itemtap', function(dataView, index, item, e){
    	    detailPanel.dockedItems[0].setTitle('Item selected'); //This doesn't work
    	    
    	    
    	});
    Thanks,
    Vincent

  2. #2
    Sencha User
    Join Date
    Feb 2011
    Posts
    14
    Vote Rating
    0
    Vinzcent is on a distinguished road

      0  

    Default


    It works this way, but this is probably not a good solution

    Code:
    list.on('itemtap', function(dataView, index, item, e){
    	    mainPanel.setActiveItem(1);
    	    
    	    
    	    detailPanel.removeDocked(detailPanel.dockedItems.items[0]);	    
    	    detailPanel.addDocked(
    	    {
    		dock : 'top',
    		xtype: 'toolbar',
    		title: list.getRecord(list.getNode(index)).data.title,
    		items: [
    		    new Ext.Button({
    			ui  : 'back',
    			text: 'Back',
    			handler: function(b, e){
    			    mainPanel.setActiveItem(0, {type: 'slide', direction: 'right'})
    			}
    		    })
    		]
    		
    	    }
    	    );
    	});

  3. #3
    Sencha User
    Join Date
    Sep 2010
    Posts
    28
    Vote Rating
    0
    dac0nvu is on a distinguished road

      0  

    Default


    Try this:

    Code:
    detailPanel.dockedItems.items[0].setTitle('Item selected');

  4. #4
    Sencha User
    Join Date
    Feb 2011
    Posts
    14
    Vote Rating
    0
    Vinzcent is on a distinguished road

      0  

    Default


    Thank you! This works

Similar Threads

  1. how to add icons / buttons in a docked panel without using toolbar?
    By samuelp in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 30 Sep 2011, 1:27 PM
  2. 1.0 - toolbar docked to bottom too low in iOS 4.2 when compiled in PhoneGap
    By mherger in forum Sencha Touch 1.x: Discussion
    Replies: 13
    Last Post: 7 Jan 2011, 3:50 PM
  3. Can a toolbar inherit the title of panel it's docked to?
    By kevinwmerritt in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 10 Dec 2010, 2:11 PM
  4. Padding issue with docked toolbar
    By mozicodo in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 12 Oct 2010, 1:43 PM

Thread Participants: 1