PDA

View Full Version : Dependent Combo box.



TommyMac
21 Sep 2009, 2:03 PM
I have 2 combo boxes, A and B . B is dependent on A's selection to populate its contents.

So. I disable B until A has a change event.

Below is my code of what doesnt work. I have tried to add onTriggerClick to the BCombo but the values do not get populated correctly. The json returned to the BCombo looked ok as well. I dont know what gives here. Any help is greatly appreciated.

AStore = new Ext.data.JsonStore({
root: 'rows',
fields: [
{ name: 'id', mapping: 'id' },
{ name: 'name', mapping: 'name' }
],
url: '/ajax/get_a/'
});

ACombo = new Ext.form.ComboBox({
name : 'ACombo',
store : AStore,
displayField : 'name',
valueField : 'id',
triggerAction : 'all',
fieldLabel : 'A',
mode : 'remote',
width : 100,
lazyInit : false,
allowBlank : false
});



ACombo.on('change',
function (newValue, oldValue) {

if ( BCombo.isDirty() === false ) {
BCombo.enable();
}
}
);


BStore = new Ext.data.Store({
id : 'BDataStore',
proxy: new Ext.data.HttpProxy({
url : '/ajax/get_b/',
method: 'POST'
}),
reader: new Ext.data.JsonReader({
root: 'rows',
id : 'id'
}, [
{ name: 'id', mapping: 'id' },
{ name: 'code', mapping: 'code' }
])
});

bCombo = new Ext.form.ComboBox({
name : 'bCombo',
store : BStore,
displayField : 'code',
valueField : 'id',
triggerAction : 'all',
fieldLabel : 'B',
mode : 'remote',
width : 100,
allowBlank : false,
lazyInit : true

});

BCombo.disable();

mrsunshine
21 Sep 2009, 2:11 PM
please format your code with the code tags.

post a example of the responses of your request and point to the point you re struggling with

that we can better help you

TommyMac
21 Sep 2009, 2:43 PM
Thanks.
I dont understand, what are code tags?

I bolded the code that I believe should populate the BCombo box with the values I want.
The response it recieves is,

{"rows": [{"code": "X", "id": 6}, {"code": "Y", "id": 47}]}

The bizarre thing is that if I click inside the combo box then on the trigger it populates the combo box as expected.
However, if I just click on the trigger it doesnt work.


AStore = new Ext.data.JsonStore({
root: 'rows',
fields: [
{ name: 'id', mapping: 'id' },
{ name: 'name', mapping: 'name' }
],
url: '/ajax/get_a/'
});

ACombo = new Ext.form.ComboBox({
name : 'ACombo',
store : AStore,
displayField : 'name',
valueField : 'id',
triggerAction : 'all',
fieldLabel : 'A',
mode : 'remote',
width : 100,
lazyInit : false,
allowBlank : false
});



ACombo.on('change',
function (newValue, oldValue) {

if ( BCombo.isDirty() === false ) {
BCombo.enable();
}
}
);


BStore = new Ext.data.Store({
id : 'BDataStore',
proxy: new Ext.data.HttpProxy({
url : '/ajax/get_b/',
method: 'POST'
}),
reader: new Ext.data.JsonReader({
root: 'rows',
id : 'id'
}, [
{ name: 'id', mapping: 'id' },
{ name: 'code', mapping: 'code' }
])
});

BCombo = new Ext.form.ComboBox({
name : 'bCombo',
store : BStore,
displayField : 'code',
valueField : 'id',
triggerAction : 'all',
fieldLabel : 'B',
mode : 'remote',
width : 100,
allowBlank : false,
lazyInit : true,
onTriggerClick: function (e, t) {
BStore.load({ params: { item: 1 }} )
}

});

BCombo.disable();

nickweavers
10 Oct 2009, 4:10 PM
When you type in your "post" there is a menu bar. Before you paste your javascript code in, click the # icon you will find there, and you will see a pair of start and end CODE tags appear in the text box at the point where your cursor is. Paste your code between them and it will appear more clearly in your post. If you are pasting in PHP there is a special icon for that which will cause the php code to be colour coded when displayed for ease of reading.