PDA

View Full Version : Dynamically adding items to drop down list of combo box.



hmp6121990
7 Jul 2014, 9:57 AM
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
11 Jul 2014, 1:26 AM
Plesae see the link mentioned below -

http://www.sencha.com/forum/showthread.php?194151-Dynamic-store-assignment-to-combobox

Regards,
Ankit

hmp6121990
11 Jul 2014, 10:15 AM
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
13 Jul 2014, 11:00 PM
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
14 Jul 2014, 9:47 AM
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
14 Jul 2014, 9:48 PM
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
15 Jul 2014, 8:17 AM
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
15 Jul 2014, 11:45 AM
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
15 Jul 2014, 12:51 PM
Thanks

But I tried it . Its not working now also.

Please suggest.

AJAIN32
16 Jul 2014, 10:12 PM
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

hmp6121990
17 Jul 2014, 9:27 AM
Hi

Thanks Ankit.
Can you explain the Xtemplate part. I am having difficulty in understanding. Can you explain Xtemplate concept in general also. Any tutorial will be appreciated. I already when through xtemplate docs and example but I didnt understand. I am also able to understand combo.displaytpl. There is no properties or config named as displaytpl in combo box's configuration.

Please explain and help me.

AJAIN32
18 Jul 2014, 12:51 AM
Hi,

The actual problem is when you select a value from first combobox at first time and see the second combobox data the combobox.picker property is filled, and when you select second value from the first combobox the value field and display field does not match so second combobox does not render/display data there.

just remove the displayTpl property which i mentioned earlier and keep the combobox.picker = null
It should help to resolve the problem.

Ext.Xtemplate class inherits Ext.Template class, and it works on objects. You can change the html dynamically or manipulate the other thing.
See the link -
http://www.sencha.com/forum/showthread.php?54060

In your case you dont need to Ext.XTemplate().
your code -

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.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.picker = null;
}

Thanks,
Ankit

hmp6121990
22 Jul 2014, 10:30 AM
Hi

Thanks Ankit.

But it is still not working.
Can you implement in your environment and test it and if possible send me the implemented code.

Thanks a lot for your help.

AJAIN32
22 Jul 2014, 10:42 AM
Hi,

I have tried this code and this is working fine from my end. I think there is some other error. can you please post your complete code for this issue.

Regards,
Ankit

hmp6121990
22 Jul 2014, 12:13 PM
Can you send your project?

Thanks

AJAIN32
22 Jul 2014, 9:53 PM
I have copied all the code, i was using for this dropdown issue. and its working fine.

You copy your project here so we can identify the excact issue.

Regards,
Ankit

hmp6121990
22 Jul 2014, 10:00 PM
my code is same as you send me.If yoy are using sencha architect then i can send you my project you can import it and can see.

Thanks

AJAIN32
22 Jul 2014, 10:06 PM
You can try with adding one more field in the store of id, as combobox store works on key-value pair.

code -

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 = 'ID2';
combobox.valueField = valueField;
combobox.displayField = displayField;
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 = 'ID3';
combobox.valueField = valueField;
combobox.displayField = displayField;
combobox.picker = null;
}


Give a try to this code, i hope it will work.

Regards,
Ankit

hmp6121990
22 Jul 2014, 10:17 PM
Thanks Ankit.

But it is still not working. Can you send your project ass attachment .

hmp6121990
24 Jul 2014, 8:09 PM
Hi

Ankit.

I am loading data in the data config option of the store.

Its not working.

Can you help me.

AJAIN32
25 Jul 2014, 4:15 AM
Hi,

can you please include your project here, so people can also look at the issue you are facing.

I may also can try with your project to figure out the issue.

Thanks,
Ankit

hmp6121990
25 Jul 2014, 8:47 AM
Hi
Below I have posted my code:
1. Here I have taken a panel and two combo boxes inside it. And a select event on first combo box.

Ext.define('FinalCombo.view.combo', {
extend: 'Ext.panel.Panel',

requires: [
'Ext.form.field.ComboBox'
],

height: 250,
width: 400,
title: 'My Panel',

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'combobox',
itemId: 'combo',
fieldLabel: 'Label',
name: 'combo',
displayField: 'Col1',
queryMode: 'local',
store: 'MyStore',
valueField: 'Col1',
listeners: {
select: {
fn: me.onComboSelect,
scope: me
}
}
},
{
xtype: 'combobox',
itemId: 'Combo2',
fieldLabel: 'Label',
name: 'Combo2',
queryMode: 'local'
}
]
});

me.callParent(arguments);
},

onComboSelect: function(combo, records, eOpts) {
if(combo.getValue() == 'Fruits')
{
var combobox = Ext.getCmp('Combo2');
var fieldValue1, displayField1;
var vegstore = Ext.getStore('MyStore1');
combobox.store.loadData(vegstore.data.items);
//combobox.bindStore("vegstore");
valueField = 'COL2';
displayField = 'COL2';
combobox.valueField = valueField;
combobox.displayField = displayField;
combobox.picker = null;
}
else if (combo.getValue() == 'Vegetables')
{
var combobox = Ext.getCmp('Combo2');
var fieldValue,displayField;
var vegstore = Ext.getStore('MyStore2');
//combobox.bindStore(vegstore);
combobox.store.loadData(vegstore.data.items);
valueField = 'COL3';
displayField = 'COL3';
combobox.valueField = valueField;
combobox.displayField = displayField;
combobox.picker = null;

}

}

});

2. Then I have taken three store MyStore, MyStore1, MyStore2.

2.1 MyStore:
Ext.define('FinalCombo.store.MyStore', {
extend: 'Ext.data.Store',

requires: [
'Ext.data.Field'
],

constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'MyStore',
data: [
{
Col1: 'Fruits'
},
{
Col1: 'Vegetables'
}
],
fields: [
{
name: 'Col1'
}
]
}, cfg)]);
}
});

2.2 MyStore1:

Ext.define('FinalCombo.store.MyStore1', {
extend: 'Ext.data.Store',

requires: [
'Ext.data.Field'
],

constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'MyStore1',
data: [
{
COL2: 'Apple'
},
{
COL2: 'Oranges'
}
],
fields: [
{
name: 'COL2'
}
]
}, cfg)]);
}
});

2.3 MyStore2:

Ext.define('FinalCombo.store.MyStore2', {
extend: 'Ext.data.Store',

requires: [
'Ext.data.Field'
],

constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'MyStore2',
data: [
{
COL3: 'Okra'
},
{
COL3: 'Calliflower'
}
],
fields: [
{
name: 'COL3'
}
]
}, cfg)]);
}
});

3. Application Level Code: My application name is FinalCombo

Ext.Loader.setConfig({
enabled: true
});


Ext.application({
stores: [
'MyStore',
'MyStore1',
'MyStore2'
],
views: [
'combo'
],
name: 'FinalCombo',

launch: function() {
Ext.create('FinalCombo.view.combo', {renderTo: Ext.getBody()});
}

});

Please help me in this.

Thanks.

AJAIN32
26 Jul 2014, 12:26 PM
Hi,

I have created a jsfiddle for your issue, its working fine as expected.

http://jsfiddle.net/v6P8M/5/

I hope this will help you.

Thanks,
Ankit

hmp6121990
30 Jul 2014, 8:10 AM
Hi

Thank you very much.

But on selecting items from second combo box's drop down it is not displaying in second combo box.
For example, on selecting Apple it is not showing up.

Can you help me.


Thanks.

glenr44
19 Apr 2017, 8:13 PM
I found that once I added: combo.picker = null; to my code, the combo's items updated as expected:



combo.store = [Item1, Item2, Item3];
combo.picker = null;


Which is what this fiddle uses:


Hi,

I have created a jsfiddle for your issue, its working fine as expected.

http://jsfiddle.net/v6P8M/5/

I hope this will help you.

Thanks,
Ankit