DIalog broken on IE8 but correct on IE9 ,FF and Chrome

[chiva.zhao]

My codes work very well on IE9,chrome and FF. But it broken on IE8.

Do any body happen to come with this issue? Following snapshot is from IE8 and IE9:

Can anyone help me please?

My Ext JS version is 4.1.

The broken dialog:
40020

The normal dialog:
40021

crontab click event:


onCroneditClick: function(button, e, options) {
var cronDialog = Ext.widget('CrontabDialog');
if(cronDialog){
cronDialog.show();
return false;
}
},

CrontabDialog codes:


Ext.define('Qui.view.CrontabDialog', {
extend: 'Ext.window.Window',
alias: 'widget.CrontabDialog',


height: 422,
itemId: 'crontabDialog',
width: 645,
layout: {
type: 'border'
},
title: 'Cron Advanced Edit',
modal: true,


initComponent: function() {
var me = this;


Ext.applyIf(me, {
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
layout: {
pack: 'center',
type: 'hbox'
},
items: [
{
xtype: 'button',
itemId: 'commitcron',
text: 'Ok'
}
]
}
],
items: [
{
xtype: 'container',
region: 'center',
html: '<div class=\'crontabdiv\'>\n<div id=\'crontab\'></div>\n<div>Generated cron entry: <span id=\'crontab-val\' class = \'crontab-text\' /></div>\n</div>'
}
]
});


me.callParent(arguments);
}


});

[tvanzoelen]

What happens if you remove the classes from here?

crontabdiv and crontab-text. It can be the problem is caused there


html: '<div class=\'crontabdiv\'>\n<div id=\'crontab\'></div>\n<div>Generated cron entry: <span id=\'crontab-val\' class = \'crontab-text\' /></div>\n</div>'

[chiva.zhao]

Thanks for your reminding/:).

I removed the 'html' element from CrontabDialog, using jQuery API inserting the div component and resolved the issue.

$(".crontabdiv").append("<div id='crontab'></div><div>Generated cron entry: <span id='crontab-val' class = 'crontab-text' /></div>");
~o)