Dynamically adding items to drop down list of combo box.

[hmp6121990]

How to add items to the drop down list based on the selection of the item from the drop down list of other combo box? For Example, if in country combo box, USA is selected then it State combo box california, Texas should be displayed in its drop down list or if India is selected from country combo box then in State combo box drop down list, there should be states of India.

How to do this in Sencha Architect? I am using three stores, one for first combo, second for USA States and third for INDIA States.

Can you help in this?

[AJAIN32]

Plesae see the link mentioned below -

http://www.sencha.com/forum/showthre...nt-to-combobox

Regards,
Ankit

[hmp6121990]

Hi
I have two combo boxes combo and Combo2 and three stores Store1, MyStore1, MyStore2. In first combo box, they are two values in drop-down list Fruits and Vegetables getting from Store1. If I select Fruits in first combo-box, then its showing Mango and Orange in drop-down list of second combo-box(Combo2) getting from MyStore1( COL2 as a field in Store and getting it as valuefield and displayField). However, if I select Vegetables in first combo-box, then its not showing Okra and Cauliflower in drop-down list of second combo-box(Combo2) getting from MyStore2( COL3 as a field in Store and getting it as valuefield and displayField).
My scenario is as shown below written in select event of first combo box.
Please help me in this.


if(combo.getValue() == 'Fruits')


{
var combobox = Ext.getCmp('Combo2');
var fieldValue1, displayField1;
var vegstore = Ext.getStore('MyStore1');

combobox.bindStore(vegstore);



valueField = 'COL2';
displayField = 'COL2';
combobox.valueField = valueField;
combobox.displayField = displayField;

}


else if (combo.getValue() == 'Vegetables')


{

var combobox = Ext.getCmp('Combo2');

var fieldValue,displayField;
var vegstore = Ext.getStore('MyStore2');

combobox.bindStore(vegstore);



valueField = 'COL3';
displayField = 'COL3';
combobox.valueField = valueField;
combobox.displayField = displayField;


}

[AJAIN32]

Hi,

I recommend not to go with bindStore() as it is slower than loadData().

easy way to do this -

if(combo.getValue() == 'Fruits')
{
var combobox = Ext.getCmp('Combo2');
var fieldValue1, displayField1;
var vegstore = Ext.getStore('MyStore1');
valueField = 'COL2';
displayField = 'COL2';
combobox.valueField = valueField;
combobox.displayField = displayField;

combobox.store.loadData(vegstore.data.items);
}
else if (combo.getValue() == 'Vegetables')
{
var combobox = Ext.getCmp('Combo2');

var fieldValue,displayField;
var vegstore = Ext.getStore('MyStore2');

valueField = 'COL3';
displayField = 'COL3';
combobox.valueField = valueField;
combobox.displayField = displayField;
combobox.store.loadData(vegstore.data.items);

}

Just make sure that you have given queryMode ='local' for combo2.

Thanks,
Ankit

[hmp6121990]

Thanks Ankit.
But the problem is that when I select fruits from first combo box then its shows apple and orange. But second time when I select vegetables its doesnt show anything. Vice versa, if first time I select Vegetables from first combo box then its shows okra and cauliflower but when second time when I select Fruits it doesnt show anything. Also if I select dropdown item from the second combo box say apple (after its display)then it doesn't show in its display box. It show empty.
Please help me in this

[AJAIN32]

Hi,

I have tried with the code which i have copied in the earlier anwser, that's working fine as expected.

Can you show your code,I think there should be something missing.

Don't use bindStore if you are using, and make sure that queryMode is local for Combo box.


Thanks,
Ankit

[hmp6121990]

This is select event of combo box. I have query mode to local
if(combo.getValue() == 'Fruits')


{
var combobox = Ext.getCmp('Combo2');
var fieldValue1, displayField1;
var vegstore = Ext.getStore('MyStore1');




combobox.store.loadData(vegstore.data.items);

valueField = 'COL2';
displayField = 'COL2';
combobox.valueField = valueField;
combobox.displayField = displayField;

}


else if (combo.getValue() == 'Vegetables')


{


var combobox = Ext.getCmp('Combo2');


var fieldValue,displayField;
var vegstore = Ext.getStore('MyStore2');
combobox.store.loadData(vegstore.data.items);

valueField = 'COL3';
displayField = 'COL3';
combobox.valueField = valueField;
combobox.displayField = displayField;
;
}

[AJAIN32]

Hi,

I think you are assigning value and display field after loadData thats why it is causing problem.

Please call loadData of store after assigning the value field and display field to combobox.

Regards,
Ankit

[hmp6121990]

Thanks

But I tried it . Its not working now also.

Please suggest.

[AJAIN32]

Hi,

Try This -

if(combo.getValue() == 'Fruits')
{
var combobox = Ext.getCmp('Combo2');
var fieldValue1, displayField1;
var vegstore = Ext.getStore('MyStore1');
combobox.store.loadData(vegstore.data.items);

valueField = 'COL2';
displayField = 'COL2';
combobox.valueField = valueField;
combobox.displayField = displayField;
combobox.displayTpl = new Ext.XTemplate(
'<tpl for=".">' +
'{[typeof values === "string" ? values : values["' + combobox.displayField + '"]]}' +
'<tpl if="xindex < xcount">' + combobox.delimiter + '</tpl>' +
'</tpl>'
);
combobox.picker = null;
}
else if (combo.getValue() == 'Vegetables')
{
var combobox = Ext.getCmp('Combo2');
var fieldValue,displayField;
var vegstore = Ext.getStore('MyStore2');
combobox.store.loadData(vegstore.data.items);

valueField = 'COL3';
displayField = 'COL3';
combobox.valueField = valueField;
combobox.displayField = displayField;
combobox.displayTpl = new Ext.XTemplate(
'<tpl for=".">' +
'{[typeof values === "string" ? values : values["' + combobox.displayField + '"]]}' +
'<tpl if="xindex < xcount">' + combobox.delimiter + '</tpl>' +
'</tpl>'
);

combobox.picker = null;

}

Regards,
Ankit