Question

I am working with Sencha Touch 2 and I need to create a TitleBar which is sucked into a set of screens. The TitleBar elements are drop-down lists. The items within the drop-down lists must be dynamic and must be loaded from a data file.

I’ve managed to load the data but I cannot pass the data back to the TitleBar. In other words, I need somehow to create a reference to the titlebar.

Code:

Ext.define('CustomerToolbar', {
extend: 'Ext.TitleBar',


xtype: 'customer-toolbar',


initialize: function() {
    this.callParent(arguments);

    this.loadItems();




    console.info("end of init");       
},


config: {
    layout: 'hbox',


    defaults: {


    }
},


loadItems: function (titleBar) {
    var itemList = [];
    var itemOptionList = [];


    Ext.getStore('OrganizationStore').load(function(organizationList) {


        console.info("getOptionList inside the store load function");


        Ext.each(organizationList, function(organization) {


            console.info("organizations: " + organization.get("name") + "," + organization.get("id"));
            itemOptionList.push({text: organization.get("name"), value: organization.get("id")});


        });


        console.info("itemList - about to populate");
        itemList.push(
            {
                xtype: 'selectfield',
                name: 'customerOptions',
                id :'organizationId',
                options: itemOptionList,
                action :'selectOrganizationAction'
            }
        );
        console.info("itemList - populated");
        console.info("itemList within the store block: " + itemList);


        console.info("this: " + this);


       //THIS IS WHERE I AM HAVING THE PROBLEM. 
       //The variable this points to the store and not to the TitleBar
       //this.setItems(itemList);


    });


    console.info("itemList outside the store block: " + itemList);
}

});

Answer 1

You can add a listener to your selectfield and do

listeners:{
            change:function(){
                title = Ext.getCmp('organizationId').getValue();
                Ext.getCmp('TitlBarID').setTitle(title);
            }
        }

I know Ext.getCmp is not fashionable but it works