Sencha 2.0 change title toolbar dynamically

Question

I would dynamically change the title of my list titlebar. This is my app.js where you can view my app (see var list where there is the toolbar item and title that I would change)

How can I do this? Thanks.

    var mainForm ;
var mainFormPanel={};


var myStore = Ext.create('Ext.data.Store', {
    storeId: 'MyStore',
    fields: ['txt']
}); // create()

var list= Ext.create('Ext.List', {
    fullscreen: true,
    store: 'MyStore',
    itemTpl: '{txt}',
    items: [{
        xtype: 'titlebar',
        docked: 'top',
        title:'change dinamically this title!!!!'
    }] // items (list)
}); // create()

Ext.application({
    glossOnIcon: false,
    autoMaximize: false,
    icon: {
        57: 'lib/sencha-touch/resources/icons/icon.png',
        72: 'lib/sencha-touch/resources/icons/icon@72.png',
        114: 'lib/sencha-touch/resources/icons/icon@2x.png',
        144: 'lib/sencha-touch/resources/icons/icon@114.png'
    },
    phoneStartupScreen: 'lib/sencha-touch/resources/loading/Homescreen.jpg',
    tabletStartupScreen: 'lib/sencha-touch/resources/loading/Homescreen~ipad.jpg',


    requires: [
               'Ext.tab.Panel',
               'Ext.form.*',
               'Ext.field.*',
               'Ext.Button',
               'Ext.data.Store'
               ],

               launch: function() {
                   mainForm = Ext.create('Ext.form.Panel', {
                       xtype:'formpanel',
                       items: [
                               {
                                   xtype: 'textfield',
                                   name : 'distance',
                                   label: 'Distance'
                               },
                               {
                                   xtype: 'textfield',
                                   name : 'quantity',
                                   label: 'Quantity'
                               }
                               ]
                   });

                   mainFormPanel={            
                           xtype: 'toolbar',
                           docked: 'bottom',
                           layout: {
                               pack: 'center'
                           },
                           items: [
                                   {
                                       xtype: 'button',
                                       text: 'Set Data',
                                       handler: function() {
                                           mainForm.setValues({
                                               distance: '300',
                                               quantity: '25'
                                           })
                                       }
                                   },
                                   {
                                       xtype: 'button',
                                       text: 'Get Data',
                                       handler: function() {
                                           Ext.Msg.alert('Form Values', JSON.stringify(mainForm.getValues(), null, 2));
                                       }
                                   },
                                   {
                                       xtype: 'button',
                                       text: 'Clear Data',
                                       handler: function() {
                                           mainForm.reset();
                                       }
                                   }
                                   ]
                   };

                Ext.Viewport.add({
                       xtype: 'tabpanel',
                       items: [
                               {
                                   //each item in a tabpanel requires the title configuration. this is displayed
                                   //on the tab for this item
                                   title: '1-tab',
                                   layout:'fit',
                                   //next we give it some simple html
                                   items: [mainForm,mainFormPanel],
                                   //then a custom cls so we can style it
                                   cls: 'card1'
                               },
                               {
                                   //title
                                   title: '2-tab',
                                   layout:'fit',
                                   items: [list],
                                   cls: 'card2'
                               },
                               {
                                   //title
                                   title: '3-tabs',
                                   //the items html
                                   items: {
                                       html: 'mia auto',
                                       centered: true
                                   },
                                   //custom cls
                                   cls: 'card3'
                               }
                               ]
                   });
               }
});

Answer 1

Ext.List component's superclass is Ext.DataView., not Ext.Panel.

Hence, it is not possible to directly add / dock any item inside the Ext.List component.

So, I recommend you to wrap your Ext.List component inside Ext.Panel.

Do it like this,

var myStore = Ext.create('Ext.data.Store', {
        storeId: 'MyStore',
        fields: ['txt']
}); // create()

 var listpanel = new Ext.Panel({
        layout: 'fit',   // important to make layout as 'fit'
        items: [
            {
                xtype: 'titlebar',
                id: 'myTitle',
                docked: 'top',
                title: 'Before Change title',
                items: [
                    {
                        xtype:'button',
                        text:'Change Title',
                        align:'right',
                        listeners : {
                            tap : function() {
                                Ext.getCmp('myTitle').setTitle('After Title Change');
                            }
                        }
                    }
                ]
            },
            {
              //Definition of the list
              xtype: 'list',
              itemTpl: '{txt}',
              store: myStore,
            }]
      });

    ....
    ....
       {
           title: '2-tab',
           layout:'fit',
           items: [listpanel],
           cls: 'card2'
       },
    ....
    ....

Sample Output :-

Before changing the title

After changing the title

---

FYI, If you look inside the Ext.List class in Sencha Docs, you will see the following code inside initComponent() method,

if (Ext.isDefined(this.dockedItems)) {
        console.warn("List: List is not a Panel anymore so you can't dock items to it. Please put this list inside a Panel with layout 'fit'");
    }