PDA

View Full Version : How to use the same combo box in different tab



marxan
12 Jul 2012, 12:22 AM
Hello,

I have created the following combo box


Ext.define('TAB.view.IndicatorCombo', { extend: 'Ext.form.field.ComboBox',
alias: 'widget.indicatorcombo',
store: 'IndicatorStore',
id: 'indicatorCombo',
fieldLabel: 'Indicator',
valueField: 'PK_TI',
displayField: 'LABEL',
triggerAction: 'all',
labelPad: 1

});

I want to use it it my main views several times in different tabs like this :


Ext.define('TAB.view.MainBorder', { extend: 'Ext.panel.Panel',
alias: 'widget.mainborder',
onAddClick: function () {
alert('test');
},
initComponent: function () {
var me = this;
Ext.applyIf(me, {
layout: 'border',
defaults: {
// split: true,
//bodyStyle: 'padding:10px'
},
items: [{
xtype: 'container',
// layout: 'fit',
// collapsible: true,
region: 'north',
items: {
xtype: 'tabpanel',
items: [{
title: 'Traps',
layout: 'column',
// bodyStyle: 'padding:200px',
items: [{
columnWidth: 3/3,
baseCls:'x-plain',
bodyStyle:'padding:5px 0 5px 5px',
items:[{
// title: 'Selectors',
xtype: 'form',
items: [{
xtype: 'container',
layout: 'hbox',
items:[
{xtype: 'indicatorcombo' },
]
}]
}]
}]
},


{
title: 'Net Replacement Rate (NRR)',
layout: 'column',
items: [{
columnWidth: 3/3,
baseCls:'x-plain',
bodyStyle:'padding:5px 0 5px 5px',
items:[{
xtype: 'form',
items: [{
xtype: 'container',
layout: 'hbox',
items:[
{xtype: 'indicatorcombo' }
]
}]
}]
}]

}

I get this error message:
uncaught exception: Ext.AbstractManager.register(): Registering duplicate id "indicatorCombo" with this manager


What I would like to do so far: For each tab, reuse the same combo and pass a different parameter depending on which tab is selected.

Why I can't use twice the same comboBox.
Should I create a separate view for each tab, but would not be the same problem?

Thanks in advance.

Regards,

tvanzoelen
12 Jul 2012, 12:27 AM
Remove the id property of the combobox and use itemId instead.

tvanzoelen
12 Jul 2012, 12:28 AM
Better not to use id's.



Ext.define('TAB.view.IndicatorCombo', { extend: 'Ext.form.field.ComboBox',
alias: 'widget.indicatorcombo',
store: 'IndicatorStore',
itemId: 'indicatorCombo', // <-- itemId
fieldLabel: 'Indicator',
valueField: 'PK_TI',
displayField: 'LABEL',
triggerAction: 'all',
labelPad: 1

});

marxan
12 Jul 2012, 12:58 AM
Thanks, it was indeed the id that caused this issue.

marxan
12 Jul 2012, 1:22 AM
Remove the id property of the combobox and use itemId instead.

I need to retrieve my component to hide or unhide it. I was doing it with the following: Ext.getCmp('myid')

But since I removed the id, I try to use itemId instead but the function getItemId doesn't seem to exist.

Any idea?

Thanks

tvanzoelen
12 Jul 2012, 1:29 AM
Yeah you can query it with



parentpanel.query("#" + itemId)[0]


using down() or up() is also possible.

marxan
12 Jul 2012, 1:57 AM
Yeah you can query it with



parentpanel.query("#" + itemId)[0]


using down() or up() is also possible.

What do you mean by parentpanel?

tvanzoelen
12 Jul 2012, 2:01 AM
The panel wich is parent of the compoment, or higher. If the form contains the combobox then the form is the parent. But also from the parent of the form you can query

or else use


Ext.ComponentQuery.query("#"+itemId)[0];

marxan
12 Jul 2012, 3:57 AM
The panel wich is parent of the compoment, or higher. If the form contains the combobox then the form is the parent. But also from the parent of the form you can query

or else use


Ext.ComponentQuery.query("#"+itemId)[0];

Do I need to give an ID to the parent? The parent is a container, I tried to give an Id, but it doesn't work...



xtype: 'form',
items: [{
xtype: 'container',
id: 'test',
layout: 'hbox',
items:[
{xtype: 'indicatorcombo' } ]
}]
}


In the controller:



comboPercentage = t.query("#" +itemId)[0];

tvanzoelen
12 Jul 2012, 4:05 AM
{
itemId: 'combo1',
xtype: 'indicatorcombo'
}


then query combo 1

or



{
id: 'combo1',
xtype: 'indicatorcombo'
}


Ext.getCmp('combo1');

The first 1 is preferred.