PDA

View Full Version : Combo box not showing selected value after dynamically loading the store



AtulDawkhare
9 Jan 2012, 11:44 PM
Hi
Here is my requirement.
I have two combo and one Grid on the page. By Selecting combo1 , I need to populate the Combo2's store. This i am able to achieved. Here is the code for this.




function funChange()
{
var SecondCombo=Ext.getCmp('SelectComponentId');
SecondCombo.bindStore(states2);
SecondCombo.displayField='decription';
SecondCombo.valueField='productFamilyId';
SecondCombo.store.load();
}

var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
//...
]
});

var combo=Ext.create('Ext.form.ComboBox',
{
multiSelect : false,
id:'ProductFamilyBO_SelectComponentId',
allowBlank: true,
editable: true,
typeAhead: true,
displayField: 'name',
valueField: 'abbr',
mode: 'local',
store: states,
renderTo:'ProductFamilyBO_SelectComponentId_Div',
triggerAction: 'all',
listeners:{
scope: this,
'select': funChange
},
}
);



So upto this everything is working fine. Now the second combo i.e. combo2's store is populated and now I want to populate Grid , so I have listener for the Second Combo, here is the code for the Second Combo



var data= [
{"decription": "Cisco Unified Computing System","productFamilyId": "11111"},
{"decription": "Cisco 800 Series Products","productFamilyId": "14605"}
];
var states2 = Ext.create('Ext.data.Store', {
fields: ['decription', 'productFamilyId'],
data : data
});


function funSetValue()
{
var SecondCombo=Ext.getCmp('SelectComponentId');
// Code to Get the Grid related data
}




var combo2=Ext.create('Ext.form.ComboBox',
{
multiSelect : false,
id:'SelectComponentId',
allowBlank: true,
editable: false,
typeAhead: false,
valueNotFoundText :'No data',
displayField: 'decription',
valueField: 'productFamilyId',
mode: 'local',
store: [],
renderTo:'SelectComponentId_Div',
listeners:{
scope: this,
'select': funSetValue
},
}
);


So till here the second combo got populated, and now when I am doing Second combo's on change to get Grid's data, the value that I have selected get disappears from the Drop down.


Can you please suggest what is missing here.30585

skirtle
10 Jan 2012, 4:04 AM
I'm really struggling to follow the scenario you've described. Where exactly do things go wrong?

It would make it much easier to help you if your code was a little easier to read. The indentation is a mess (the mixture of tabs and spaces makes it really difficult to follow) and you've got loads of unnecessary config options, e.g. multiSelect: false is the default.

This line looks suspicious to me:


mode: 'local',

This could be causing you problems. It should be this:


queryMode: 'local',

AtulDawkhare
10 Jan 2012, 7:26 AM
Hi there,
Thanks for the reply. Yes mine code was not at all readable. Really sorry for that.

I have made changes as you have suggested but still it is not working for me.

Here is the fully working code. Hope this is readable for you.



var Combo1_Store1 = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [ {"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});


var Combo1=Ext.create('Ext.form.ComboBox',
{
multiSelect : false,
id:'combo1',
allowBlank: true,
editable: true,
typeAhead: true,
displayField: 'name',
valueField: 'abbr',
queryMode: 'local',
store: Combo1_Store1,
renderTo:'Combo1_Div',
triggerAction: 'all',
listeners:
{
scope: this,
'select': funChange
},
});


function funChange()
{
var SecondCombo=Ext.getCmp('Combo2');
SecondCombo.bindStore(Combo2_Store2);
SecondCombo.displayField='decription';
SecondCombo.valueField='productFamilyId';
SecondCombo.store.load();
}

// This is comming from the DB to for this Sample example kept the data here
var data2=
[
{"decription": "Cisco Unified Computing System","productFamilyId": "11111"},
{"decription": "Cisco 800 Series Products","productFamilyId": "14605"}
];


var Combo2_Store2 = Ext.create('Ext.data.Store',
{
fields: ['decription', 'productFamilyId'],
data : data2
});


var Combo2=Ext.create('Ext.form.ComboBox',
{
multiSelect : false,
id:'Combo2',
allowBlank: true,
editable: false,
typeAhead: false,
valueNotFoundText :'No data',
displayField: 'decription',
valueField: 'productFamilyId',
queryMode: 'local',
store: [],
renderTo:'Combo2_Div',
listeners:
{
scope: this,
'select': funSetValue
},
});


function funSetValue()
{
var SecondCombo=Ext.getCmp('Combo2');
// Code to Get the Grid related data
}

AtulDawkhare
11 Jan 2012, 2:56 AM
Please give me your feedback on this.

findajit
11 Jan 2012, 5:03 AM
@atul,

Problem is that you have


store: [],

on your Combo2. This must be set to Combo2_Store2

AtulDawkhare
11 Jan 2012, 6:35 AM
Thanks for the reply.

I kept the store bank because I want to populate the store on change event of the Combo1. So on Combo1 change I am calling function "funChange" and binding store for Combo2.



store: []


Till here Hope it is Correct how much I have implemented.

Let me tell you my requirement again.

There are tow combo on a page, On change of first I want to populate Second Combo and On change of Second I want populate / Create Grid.

I want to dynamically change the store of combo2, so Please help me what is wrong here.

skirtle
11 Jan 2012, 7:42 AM
Which ExtJS version are you using?

Testing against 4.0.6 I got it to work just by removing the line:


store: []

Against 4.0.7 I also had to patch the combobox loadmask bug (if you're hitting this just do a forum search for the patch).

I'm not convinced by the whole approach though. Trying to bind a new store and change the displayField & valueField is going to cause you problems. For the classic 'linked comboboxes' you'd keep the store constant and just load different data.

findajit
11 Jan 2012, 3:52 PM
@atul,

set the store to Combo2_Store2 and in the function, which is called when you select an item in Combo1, just load the Combo2_Store2 with the data. That's the approach, typically, we follow

findajit
16 Jan 2012, 9:31 AM
@atul,

could you get through the issue?

AtulDawkhare
16 Jan 2012, 8:42 PM
Hi Findajit,
The approach that you have mentioned above is working, but I have another requirement to I have handle this using if else condition. But will use this logic for other place whenever required.

Thank you so much for this help.