Checkbox does not fire "change" event on the first change after setRawValue(true).
The problem appears is you use setRawValue() method. Method setValue() works fine.
Before checkbox render just use component.setRawValue(true); and put some listener for "change" event. You'll see that for the first time when you uncheck the checkbox listener will not work.
Please, see docs for setRawValue method. It says "Sets the checked state of the checkbox.". So, if the checkbox is checked and I uncheck it, I presume that "change" event should be fired, as the value and state are changed.
Using setRawValue circumvents the change detection mechanism. Using setValue (clicking the checkbox calls setValue()) will then do a check in the field mixin to see if the value has changed. Since the validation was circumvented with setRawValue it doesn't see that the value has changed and so doesn't fire the changed event.
But that's exactly what I'm talking about. I use setRawValue as I want to circumvent the change detection mechanism. Ok, the value is set, no event is fired. Now I start to work with my app and I presume that the next "change" event will be fired as I don't use setRawValue any more.
So, now the event is not fired 1 time on setRawValue (it's by design) and second time right after that (and this is definitely a bug, isn't it? ).
I mean that events should not be fired on setRawValue, but the internal state should be changed. If not, then why UI shows that the checkbox is checked while the internal state is "false".
Originally Posted by slemmon
I believe this is by design.
Using setRawValue circumvents the change detection mechanism. Using setValue (clicking the checkbox calls setValue()) will then do a check in the field mixin to see if the value has changed. Since the validation was circumvented with setRawValue it doesn't see that the value has changed and so doesn't fire the changed event.
An unchecked checkbox. A setRawValue(true) call occurs and the checkbox is checked now. Click that checkbox, it gets unchecked, but its change event is not fired.
Steps to reproduce the problem:
Click the button => the checkbox gets checked
Click the checkbox
The result that was expected:
The change event fires
The result that occurs instead:
The change event doesn't fire (it fires on the second click)
Test Case:
Code:
<!DOCTYPE html>
<html>
<head>
<title>setRawValue call on Checkbox causes that it doesn't fire change on next click</title>
<link rel="stylesheet" href="../resources/css/ext-all.css" />
<script src="../ext-all-dev.js"></script>
<script>
Ext.onReady(function () {
var checkbox;
Ext.create("Ext.button.Button", {
renderTo: Ext.getBody(),
text: "setRawValue",
handler: function () {
checkbox.setRawValue(true);
}
});
checkbox = Ext.create("Ext.form.field.Checkbox", {
renderTo: Ext.getBody(),
boxLabel: "Checkbox",
listeners: {
change: function () {
console.log("change");
}
}
});
});
</script>
</head>
<body>
</body>
</html>
Object.NET
Frameworks and Tools for .NET Developers
-------------------------------------------------- Ext.NET - Ext JS for ASP.NET - Examples | Twitter Bridge.NET - Write C#. Run JavaScript! - Live | Twitter
--------------------------------------------------
Hello, We would like to know when the fix will be available? the workaround wont work for us, it will hurt performance as to we have a number of check boxes we need to set its value.
Checkbox does not fire "change" event on the first change after setRawValue(true).
Reply With Quote
).
Originally Posted by slemmon
