PDA

View Full Version : a newbie question on "change" handler on a Ext.form.Field



flamant
14 Oct 2010, 12:27 AM
Hi,
I try to add a "change" handler on a Ext.form.Field this way



if (rowId != null) {
if (field.fldType == "SLE"
|| field.fldType == "MLE"
|| field.fldType == "NUM"
|| field.fldType == "DAT"
|| field.fldType == "CBX"
|| field.fldType == "SLB"
|| field.fldType == "DLB") {
result.rowId = rowId;
result.jsonStore = jsonStore;
result.fieldId = field.fldId;
result.addListener('change', function(field, newValue, oldValue) {
alert('ca passe');
var record = field.jsonStore.getById(field.rowId);
record.set(field.fieldId, newValue);
printRecords(field.jsonStore);
})
}
}


where result is a Ext.form.Field that I implemented before. For example result is the following field :



result = new Ext.form.ComboBox({
//hiddenName : "I" + field.fldId,
name : "I"+field.fldId,
id: "I"+fieldId,
hideLabel: true,
allowBlank: (field.fldMode == 'M' ? true : false),
style: buildStyle(field.bold, field.fontSize, field.textColor, field.align, field.italic),
helpText: field.fldText,
width: powerBuilderXUnitsToPixels(field.fldLength),
height: powerBuilderYUnitsToPixels(field.fldHeight),
x: powerBuilderXUnitsToPixels(field.fldX),
y: powerBuilderYUnitsToPixels(field.fldY),
store: comboStore,
displayField: 'name',
valueField: 'code',
mode: 'remote',
typeAhead: true,
selectOnFocus:true,
forceSelection: false,
triggerAction: 'all',
hidden: (field.fldMode == 'I' ? true : false)
});


First, the "change" handler is not fired on all fields
Secondly on some fields (on some combos) the handler is fired when I click on the select icon and before the value has been selected. This occur only once. When I reselect a value the handler is not fired.

May be I missed something

Thank you in advance for your answers

Animal
14 Oct 2010, 12:45 AM
I don't understand your 'the "change" handler is not fired on all fields'

I see your code adding a change handler to one field. Add a handler to many fields to make a change handler for many fields.

Be aware that change handlers fire on field blur. Sometimes for a ComboBox, you might want a select handler.

flamant
14 Oct 2010, 1:10 AM
Hi animal and thank you for your answer.

Actually all fields are implemented by one method the following way



function buildField(field, rowId, jsonStore) {
........
if (field.fldType == "SLE") {
result = new Ext.form.TextField({...
} else if (field.fldType == "MLE") {
result = new Ext.form.TextArea({...
} else .......
............
if (rowId != null) { if (field.fldType == "SLE" || field.fldType == "MLE" || field.fldType == "NUM" || field.fldType == "DAT" || field.fldType == "CBX" || field.fldType == "SLB" || field.fldType == "DLB") { result.rowId = rowId; result.jsonStore = jsonStore; result.fieldId = field.fldId; result.addListener('change', function(field, newValue, oldValue) { alert('ca passe'); var record = field.jsonStore.getById(field.rowId); record.set(field.fieldId, newValue); printRecords(field.jsonStore); }) } }


Do you see something wrong in the handler I implemented ?

flamant
14 Oct 2010, 2:46 AM
Hi,
when I put a "select" handler on combobox or a "check" handler on checkbox, and when I change the values, the events are indeed fired.

What's wrong with the "change" handler ?

httpdotcom
14 Oct 2010, 5:13 AM
What is wrong with the change event for comboBox is exactly what Animal said. Change fires when the field blurs, when you actually want when a new value is selected for the combo.