quilleashm
30 Jul 2007, 8:19 AM
Hi all,
Ext: 1.1 RC1
Adapter: ExtBase
Browser: FF 2.0.0.5
OS: Win XP
Think I've found a small bug in Ext.form.Checkbox when using applyTo() on an existing <input>
Drop the following into /examples/form
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Array Grid Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC --> <!-- LIBS --> <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> <!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all-debug.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(
function(){
var field = new Ext.form.Checkbox({});
field.applyTo( 'checkbox' );
field.on( 'check', function() {
alert('checked event fired' );
});
});
</script>
<input id="checkbox" type="checkbox" checked="checked"/>
</div>
</body>
</html>
You will on the first uncheck the event does not fire. Subsequent checks/unchecks will fire correctly. Note that if you start the checkbox off in the unchecked state it works fine.
I've traced this to this line in the source.
onClick : function(){
if(this.el.dom.checked != this.checked){
this.setValue(this.el.dom.checked);
}
},
The problem is caused by the comparison because this.checked always defaults to false rather than taking the DOM value when using applyTo(). The first time the box is unchecked it compares the new DOM value "false" with the default this.value "false" and decides not to set the value (and fires the check event).
Not sure but I think this.value needs to take the value in the DOM.
I can manually work round it by manually setting the checked config option to the value in the DOM beforehand.
Any more detail required please let me know.
Cheers.
Mike.
Ext: 1.1 RC1
Adapter: ExtBase
Browser: FF 2.0.0.5
OS: Win XP
Think I've found a small bug in Ext.form.Checkbox when using applyTo() on an existing <input>
Drop the following into /examples/form
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Array Grid Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC --> <!-- LIBS --> <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> <!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all-debug.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(
function(){
var field = new Ext.form.Checkbox({});
field.applyTo( 'checkbox' );
field.on( 'check', function() {
alert('checked event fired' );
});
});
</script>
<input id="checkbox" type="checkbox" checked="checked"/>
</div>
</body>
</html>
You will on the first uncheck the event does not fire. Subsequent checks/unchecks will fire correctly. Note that if you start the checkbox off in the unchecked state it works fine.
I've traced this to this line in the source.
onClick : function(){
if(this.el.dom.checked != this.checked){
this.setValue(this.el.dom.checked);
}
},
The problem is caused by the comparison because this.checked always defaults to false rather than taking the DOM value when using applyTo(). The first time the box is unchecked it compares the new DOM value "false" with the default this.value "false" and decides not to set the value (and fires the check event).
Not sure but I think this.value needs to take the value in the DOM.
I can manually work round it by manually setting the checked config option to the value in the DOM beforehand.
Any more detail required please let me know.
Cheers.
Mike.