Hi, 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. I've marked in red the code that fails.
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);
}
});
Many Thanks,
Alex
Answered: Populate a TitleBar using a store
Reply With Quote
