PDA

View Full Version : Combobox & hiddenName



suntsu
29 Sep 2009, 3:09 AM
Hi,

My problem is very simple, and the solution may also be simple.

I'm using 3 comboBox in a form, each comboBox loads his data from a JSON store. When the form is loaded everything is OK excepting one thing... The textfield of each comboBox contains the index of the selected item in place of the selected item string... if i reselect the value in the combo the string value is correctly passed to the text field and if I submit the form, it's also ok, the hiddenName is submitted... So to be much more clearer, I would like that, on load, the value selected in the comboBox to be in displayField.
Now a bit of code ;-)



The form code:


softCore.securityCertificate = Ext.extend(Ext.form.FormPanel, {
border:false,
closable:true,
labelWidth:128,
url:'certificates.php',
initComponent:function() {
var config = {
defaultType:'textfield',
defaults:{width: 192},
monitorValid:true,
bodyStyle:'padding:16px',
autoHeight:true,
autoScroll:true,
iconCls:'icon-key',
items:[
{
xtype:'fieldset',
title: 'BEL CS',
autoWidth:true,
items:[new softCore.comboCertificate({certificateLevel:'csbel',fieldLabel:'CS Level',hiddenName:'CsBelidx'}),
{
xtype:'datefield',
fieldLabel: 'Start date',
name: 'CsBeldateFrom',
format: 'Ymd'
},{
xtype:'datefield',
fieldLabel: 'End date',
name: 'CsBeldateUntil',
format: 'Ymd'

}]
},{
xtype:'fieldset',
title: 'NATO CS',
autoWidth:true,
items:[new softCore.comboCertificate({certificateLevel:'cseuronato',fieldLabel:'CS Level',hiddenName:'CsNatoidx'}),
{
xtype:'datefield',
fieldLabel: 'Start date',
name: 'CsNatodateFrom',
format: 'Ymd'
},{
xtype:'datefield',
fieldLabel: 'End date',
name: 'CsNatodateUntil',
format: 'Ymd'

}]
},{
xtype:'fieldset',
title: 'EURO CS',
autoWidth:true,
items:[new softCore.comboCertificate({certificateLevel:'cseuronato',fieldLabel:'CS Level',hiddenName:'CsEuroidx'}),
{
xtype:'datefield',
fieldLabel: 'Start date',
name: 'CsEurodateFrom',
format: 'Ymd'
},{
xtype:'datefield',
fieldLabel: 'End date',
name: 'CsEurodateUntil',
format: 'Ymd'
}]
}],
buttons:[
{
text:'Load',
scope:this,
handler:this.onLoadClick
},{
text:'Add',
formBind:true,
scope:this,
handler:this.submit
}]
};

Ext.apply(this, Ext.apply(this.initialConfig, config));
softCore.securityCertificate.superclass.initComponent.apply(this, arguments);
},

onRender:function() {
this.getForm().waitMsgTarget = this.getEl();
this.on('afterlayout', this.onLoadClick, this, {single:true});
softCore.securityCertificate.superclass.onRender.apply(this, arguments);
},

onLoadClick:function() {
this.getForm().load({
url:this.url,
scope:this,
success:this.onLoadSuccess,
failure:this.onFailure,
waitMsg:'Loading...',
params:{idCode:this.idCode}
});

},

submit:function() {
this.getForm().submit({
params:{cmd:'save',cli:this.idCode},
url:this.url,
scope:this, // Function called by another so we must propagate the scope ;-)
success:this.onSubmitSuccess,
failure:this.onSubmitFailure,
waitMsg:'Adding security certificate...'
});
},

onLoadSuccess:function(form, action) {
Ext.Msg.show({
title:'Success',
/*msg:'Data loaded !',*/
msg:action.response.responseText,
modal:true,
icon:Ext.Msg.INFO,
buttons:Ext.Msg.OK
});
},

onFailure:function(form, action) {
checkResponse = Ext.util.JSON.decode(action.response.responseText);
if(checkResponse.data == null){
Ext.Msg.show({
title:'An error occured',
msg:'No data in database',
modal:true,
icon:Ext.Msg.INFO,
buttons:Ext.Msg.OK
});
}else{
Ext.Msg.show({
title:'An error occured',
msg:checkResponse.errors,
modal:true,
icon:Ext.Msg.INFO,
buttons:Ext.Msg.OK
});
}

}, // eo function onFailure

onSubmitSuccess:function(form, action) {
checkResponse = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.show({
title:'Security certificate added',
msg:checkResponse.actionSummary,
modal:true,
icon:Ext.Msg.INFO,
buttons:Ext.Msg.OK
});
},

onSubmitFailure:function(form, action) {
checkResponse = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.show({
title:'Error',
msg:checkResponse.errors,
modal:true,
icon:Ext.Msg.INFO,
buttons:Ext.Msg.OK
});
}
});


The comboBox code:


softCore.comboCertificate = new Ext.extend(Ext.form.ComboBox, {
triggerAction:'all',
forceSelection:true,
//enableKeyEvents:true,
editable:false,
resizable:false,
minListWidth:256,
emptyText:'Select a security level...',
initComponent:function() {
var config = {
valueField:'id',
displayField:this.certificateLevel,
store: new Ext.data.JsonStore({
url: 'comboItemFeeder.php',
root: 'rows',
baseParams:{dbName:'staff', dataType:this.certificateLevel, start:0, limit:5},
fields: [{name: 'id'},{name: this.certificateLevel, type: 'string'}]
})
};

Ext.apply(this, Ext.apply(this.initialConfig, config));
softCore.comboCertificate.superclass.initComponent.apply(this, arguments);
},

onRender:function() {
softCore.comboCertificate.superclass.onRender.apply(this, arguments);
this.on('select', this.onItemSelection, this);
},

onItemSelection:function(combo, record, index) {
this.setRawValue(record.get(this.certificateLevel));
}
});


Thanks,

Animal
29 Sep 2009, 4:16 AM
Are you loading the form before the Combo's Store is loaded? Until the Combo's Store is loaded, it cannot look up the value you are setting it to to find the display field.

Animal
29 Sep 2009, 4:52 AM
Condor's code might help if that is your problem: http://www.extjs.com/forum/showthread.php?p=385027#post385027

suntsu
29 Sep 2009, 9:49 AM
Condor's code might help if that is your problem: http://www.extjs.com/forum/showthread.php?p=385027#post385027

This seems to be the solution I'm looking for... I'll test this tomorrow morning...
Thanks for your answer ;-)

suntsu
29 Sep 2009, 9:51 PM
This is the solution I was looking for ! Thanks again Animal... This override sould be included in te next EXT-JS update ;-)