PDA

View Full Version : [Help] Change value of ComboBox using other ComboBox



giehl
5 Jun 2011, 4:21 AM
I am using one table for data store. How I can change value com_kretep for same id table as come_rule, when com_rule has change.
I mean linking 2 combobox using fields "idmaster_rule".
Sorry for my english. Thanks :)

This for store :

var ds_rule = new Ext.data.JsonStore({
url:ajax_url,
autoLoad:true,
remoteSort:true,
sortInfo:{field:'nm_rule',direction:'ASC'},
totalProperty:'total',
root:'data',
baseParams:{
action:'getRule',
start:0,
limit:1000
},
fields:[
{name:'idmaster_rule',type:'int'},
{name:'subunsur_unsur_idunsur',type:'int'},
{name:'nm_rule',type:'string'},
{name:'mr_kredit',type:'int'}
]
});this for combobox com_rule

com_rule = {
xtype:'combo',
triggerAction: 'all',
allowBlank:false,
width:320,
store:ds_rule,
fieldLabel:'Nama Rule',
displayField:'nm_rule',
valueField:'idmaster_rule',
mode:'local',
hiddenName:'mr_idmaster_rule'
}this for combobox com_kretep

com_kretep = {
xtype:'combo',
triggerAction: 'all',
allowBlank:false,
width:100,
readOnly:true,
store:ds_rule,
fieldLabel:'Kredit Tetapan',
displayField:'mr_kredit',
valueField:'mr_kredit',
mode:'local',
hiddenName:'kredit'
}

skirtle
5 Jun 2011, 5:10 PM
The use of a read-only combobox for that second field strikes me as a little strange. That said, here's an example of the sort of thing you wanted:


var store = new Ext.data.ArrayStore({
fields: ['id1', 'id2', 'name', 'shape'],
data: [
[1, 't', 'Tom', 'triangle'],
[2, 's', 'Sam', 'square'],
[3, 'c', 'Cat', 'circle']
]
});

var combo1 = new Ext.form.ComboBox({
allowBlank: false,
displayField: 'name',
editable: false,
forceSelection: true,
mode: 'local',
renderTo: Ext.getBody(),
store: store,
triggerAction: 'all',
valueField: 'id1',
listeners: {
select: function(combo, record) {
// id2 is the valueField for the other combobox
combo2.setValue(record.get('id2'));
}
}
});

var combo2 = new Ext.form.ComboBox({
allowBlank: false,
displayField: 'shape',
readOnly: true,
renderTo: Ext.getBody(),
store: store,
valueField: 'id2'
});

giehl
5 Jun 2011, 9:29 PM
Thanks bro, but the problem is I want combo2 value refer to id at combo1 value.

For example :
if I clicked Tom at combo1 then combo2 value just t.
if I clicked Sam at combo1 then combo2 value just s.
refer to idl

PS: I used readOnly on combo2 cuz I wanna just read that value

skirtle
5 Jun 2011, 10:33 PM
I'm struggling to follow exactly what data relationship you're aiming for. Do you mean like this?


combo2.setValue(combo.getValue());

This won't work with my sample data as I used completely different data ids for the 2 comboboxes but if the id sets for the valueFields are the same then this should work: for example, configuring the valueField to be 'id1' for both comboboxes.

As for your use of a read-only combobox, it's entirely up to you but could you not just use a read-only TextField instead, or even just a DisplayField? Your use of hiddenName on your read-only field worries me a little too. If this value is implicit from the first combobox then do you really need to submit both values to the server? There's an implication of an over-reliance on client-side validation that may leave you open to attacks via URL manipulation.

giehl
6 Jun 2011, 4:57 AM
hmm... u're right.... Im better use textfield.
But the problem is, how do I change the textfield in accordance with idpeople that selected by combo box?
this is fields from JsonStore

fields:[
{name:’idpeople’,type:'int'},
{name:’people_name’,type:'string'},
{name:'salary',type:'int'}
]


combobox :


displayField:'people_name',
valueField:'idpeople',


I want textbox value using salary fields, but conform with idpeople fields combobox.

Thanks for helping me alot:D

skirtle
6 Jun 2011, 1:50 PM
I think this is what you're looking for:


new Ext.form.ComboBox({
allowBlank: false,
displayField: 'name',
editable: false,
forceSelection: true,
mode: 'local',
renderTo: Ext.getBody(),
triggerAction: 'all',
valueField: 'id',
listeners: {
select: function(combo, record) {
text.setValue(record.get('salary'));
}
},
store: new Ext.data.JsonStore({
fields: ['id', 'name', 'salary'],
data: [
{id: 1, name: 'Tom', salary: 10000},
{id: 2, name: 'Sam', salary: 20000},
{id: 3, name: 'Cat', salary: 30000}
]
})
});

var text = new Ext.form.TextField({
readOnly: true,
renderTo: Ext.getBody()
});

giehl
6 Jun 2011, 8:08 PM
Okey, thanks for helping...
My problem is solved...