Checkbox checked value does not work on IE, fine in FF

[ffzhuang]

Hi, all:

I create a dialog, inside the dialog I create a form. And I have a checkbox in this form. As following:



var form_instance_create = new Ext.form.Form({
labelAlign: 'right',
url:'../msg/listMessage.do?action=createMessage'
});

form_instance_create.column({width: 500, labelWidth:120, style:'margin-left:8px;margin-top:8px'});

var active = new Ext.form.Checkbox({
fieldLabel: 'Active',
width: 20,
name: 'active',
checked: true
});

form_instance_create.fieldset(
{id:'desc', legend:'Please fill the field'},
planName,
active
);
form_instance_create.applyIfToFields({width:255});
form_instance_create.render('a-addInstance-form');
form_instance_create.end();
My problem is that "checkbox" is not checked in IE, however it is checked in FireFox.

Any comments should be really appreciated. I do believe that I lose in some where.

Thanks in advanced

Fenqiang Zhuang

[llin96]

I encountered the same issue, did you find out the solution?

[novotique]

Hi all

Has anyone been able to overcome this problem? This issue is blocking for me due to certain requirements by the client.

Regards.

[aconran]

I created a simple example with your above snippet of code and it works as expected in both IE7 and FF2.

I am using ext-base.js and 1.1 stable.

Please post your details as found here:
http://extjs.com/forum/showthread.php?t=8887

here is my test case:


Ext.onReady(function() {
var dialog = new Ext.BasicDialog("hello-dlg", {
modal:true,
autoTabs:true,
width:500,
height:300,
shadow:true,
minWidth:300,
minHeight:300
});
dialog.show();
var form_instance_create = new Ext.form.Form({
labelAlign: 'right',
url:'../msg/listMessage.do?action=createMessage'
});

form_instance_create.column({width: 500, labelWidth:120, style:'margin-left:8px;margin-top:8px'});

var active = new Ext.form.Checkbox({
fieldLabel: 'Active',
width: 20,
name: 'active',
checked: true
});

form_instance_create.fieldset(
{id:'desc', legend:'Please fill the field'},
active
);
form_instance_create.end();
form_instance_create.applyIfToFields({width:255});
form_instance_create.render('a-addInstance-form');
})


and associated markup...


<div id="hello-dlg" style="visibility:hidden;position:absolute;top:0px;">
<div class="x-dlg-hd">Hello Dialog</div>
<div class="x-dlg-bd">
<!-- Auto create tab 1 -->
<div class="x-dlg-tab" title="Hello World 1">
<!-- Nested "inner-tab" to safely add padding -->
<div class="inner-tab">
Hello...<br>
<div id="a-addInstance-form"></div>

</div>
</div>
<!-- Auto create tab 2 -->
<div class="x-dlg-tab" title="Hello World 2">
<div class="inner-tab">
... World!
</div>
</div>
</div>

</div>


One thing I did note, you are ending the column after you render the form. This will do nothing as the form as already been rendered. Try to put it before the render and see if that gets you anywhere.

Aaron