PDA

View Full Version : checkboxfield change event



Dennis.Gearmesh
28 Mar 2013, 1:22 PM
I have a form that saves to the server whenever a user make a change. For textboxfields, I use the "blur" event, and it works great. For checkboxfields, I tried using the "change" event. The update fires fine. The problem is that the change event also fires when the form loads. Each checkbox that is checked fires the change event when the form is loaded.

There is no "click" event and no "valuechanged" event, so I can't figure out how to only make the server call when the user changes the value.

I tried putting a config option in my form called "formLoading." The value is true when the form loads. The idea was that I could wrap the checkbox change event with if(!form.getFormLoading()){}. This didn't work, because every event I tried to put "form.setFormLoading(false)" in happens before the checkbox's initial change event fires. I tried changing it to false in the form's afterrender event and the form's afterlayout event.

Any ideas on how I can hook into an event that only fires when the user changes the checkbox's value?

Thanks!

Dennis

slemmon
28 Mar 2013, 2:56 PM
What if you suspended events on the form fields before loading and resumed them after the form was loaded?
http://docs.sencha.com/ext-js/4-2/#!/api/Ext.form.field.Checkbox-method-suspendEvents
(http://docs.sencha.com/ext-js/4-2/#!/api/Ext.form.field.Checkbox-method-suspendEvents)http://docs.sencha.com/ext-js/4-2/#!/api/Ext.form.field.Checkbox-method-resumeEvents



var fields = form.query('field');

Ext.each(fields, function (field) {
field.suspendEvents();
});

// load the form

Ext.each(fields, function (field) {
field.resumeEvents();
});

Dennis.Gearmesh
28 Mar 2013, 3:07 PM
Could you give me a more detailed example?

Here's what I don't get:
How can I call suspendEvents() on an object that doesn't exist yet?
Also, what event would I use to call resumeEvents()?

Thanks,

Dennis

slemmon
28 Mar 2013, 3:09 PM
What code are you using to load your form?

Dennis.Gearmesh
28 Mar 2013, 3:28 PM
The form is created after a drag/drop. This code is inside the notifyDrop() function:


...
innerTab = Ext.create('Ext.tab.Panel',
{
extend: 'Ext.tab.Panel',
autoScroll: true,
waitMsgTarget: true,
layout: 'fit',
activeTab: 0,
tabPosition: 'bottom',
items:
[
{
title: 'Details',
closable: false,
xtype: 'MainTabPersonDetailsForm', ///This is the form
idPerson: dropData.data['ID']
},
...
...
]
});
...


Here is the render function for the form:



onMainTabPersonDetailsFormRender: function (form) {
this.loadPersonForm(form);
},


loadPersonForm: function (form) {
var mainTabController = this;
form.load({
url: '/Person/GetPerson',
waitMsg: 'Loading Record . . .',
params:
{
idPerson: form.getIdPerson()
},
failure: function (form, action) {
Ext.Msg.alert('Load Failed', action.result.errorMessage);
},
success: function (form, action) {
var values = Ext.JSON.decode(action.response.responseText);
...
//do several things in here
...
form.owner.doLayout();
}
});
},

slemmon
29 Mar 2013, 7:54 AM
What happens if you put the following before form.load()



Ext.each(fields, function (field) {
field.suspendEvents();
});


and then in the success callback do:



Ext.each(fields, function (field) {
field.resumeEvents();
});

Dennis.Gearmesh
29 Mar 2013, 9:49 AM
You sent me in the right direction.

I couldn't get suspendEvents to work, so I just made my own version. I put a config object in the form:


formLoading: true

Then, in the success function of the form's load function:


form.setFormLoading(false);

Then in the checkbox's change event:


if(form.getFormLoading() != true)
{
//save checkbox value
}


It's funny, I feel like this is exactly what I tried before. I must have been changing the config object somewhere besides the success function of the form's load function. Thanks for your help!