View Full Version : Access a Toolbar->ComboBox from a controller?

25 Nov 2011, 2:42 PM
Hi Guys

I have a view that inherits from Toolbar, this toolbar contains several controls including buttons and combo boxes.. How do I access the individual controls objects from within the controller? How do I set an identifier for them? Basically I need direct access to the objects in order to setup some default values etc.

Before anybody say give each control an "ID" and use ComponentQuery - this will work ;) but my understanding is specifically setting an ID is bad practice (it basically means the view cannot be re-used, as it bitches about having the 2 items with the same ID).

Example code -

Ext.define('x.view.Toolbar', {
extend: 'toolbar.Toolbar',
alias: 'widget.syslog_toolbar',
height: 50,
dock: 'top',

items: [
xtype: 'combobox',
width: 100,
fieldLabel: 'Host',
labelAlign: 'top',
labelPad: 0,
store: "syslog.Host",
displayField: 'name',
queryMode: 'local',

xtype: 'datefield',
width: 100,
type: "date",
fieldLabel: 'From',
labelAlign: 'top',
labelPad: 0,
format: 'd/m/Y',
submitFormat: 'd/m/Y',

Any help or advise or the "correct" method would be greatly appreciated.


25 Nov 2011, 3:32 PM
You can use ComponentQuery to access component from your controller by some ways, such as:
1. Use Ext.ComponentQuery:

var comboBox = Ext.ComponentQuery.query('toolbar[dock=top] combobox[fieldLabel=Host]');
2. Use refs config from your controller:

refs: [
{ref: 'comboBox', 'toolbar[dock=top] combobox[fieldLabel=Host]'}
Get component by:

var comboBox = this.getComboBox();
Of course, you can include some properties including custom properties to your component to make sure it is uniquely defined from other components.
Hope this will help you.

25 Nov 2011, 3:38 PM

This has been driving me crazy for almost a week :D thanks you so much!

11 Feb 2012, 4:36 PM
How would one do this using the Sencha Designer 2 ?

Can this same syntax be used in the controlQuery property ?