IE8 Invalid Argument - internet-explorer-8

Question

I am working on some existing code. After upgrading to Extjs 4, one of our application view window is broken. It is working fine on Firefox, not IE8. Upon the popup window opening, I am getting Invalid argument, and the debugger indicates it is on like Sytle[hook.name] = value;
I've tried to remove the height (which I really need) after reading some posts, but it is still not working. Please advise.
Thanks.
Ext.define(view.window.popupwindow', {
extend : 'Ext.Window',
alias : 'widget.popupwindow',
requires: [view.grid.issuerpopupgrid'],
appContainer: undefined,
caller: undefined,
selReportType:undefined,
reloadData: true,
extraParam: undefined,
initComponent: function() {
var config = {
width: 750,
minWidth: 600,
minHeight: 300,
autoScroll: false,
modal: true,
border: false,
closable: true,
constrain: false,
resizable: true,
maximizable: true,
layout:'anchor',
items: this.buildWindow(),
listeners: {
scope: this,
show: function(form) {
//sync the shadow
var win = Ext.WindowMgr.getActive();
if (win!=null) win.el.sync(true);
}
}
};
Ext.apply(this, config);
this.callParent(arguments);
},
buildWindow: function() {
return [{
xtype: 'issuerpopupgrid',
id:'issuerpopupgrid-id',
appContainer: this.appContainer,
extraParam: this.extraParam
}];
},
});
Ext.define('view.grid.issuerpopupgrid', {
extend : 'view.grid.lvsimplegrid',
alias : 'widget.issuerpopupgrid',
appContainer: undefined,
extraParam: undefined,
initComponent: function() {
this.gridType = this.appContainer.appContext.appData.gridDefTypeMap.R9;
this.modelName = this.appContainer.name+'.model.'+this.gridType.name;
this.selReportType = this.gridType.name; //'R9';
this.sortField = 'secDesc';
this.reportUrl = this.appContainer.appContext.appData["gridDefinitions"][this.gridType.name].serviceUrl;
var config = {
height: 570,
selModel: {
selType: 'checkboxmodel',
showHeaderCheckbox :true,
mode: 'MULTI',
checkOnly: true
},
listeners: {
scope: this,
afterrender: this.onAfterRender,
show: this.onActivateGrid
}
};
Ext.apply(this, config);
this.callParent(arguments);
this.tbar = this.buildTopBar();
},
onAfterRender: function(thisObj) {
this.configureGrid(this.selReportType, this.appContainer.appContext.appData, null, false, this.sortField, this.sortField);
thisObj.getStoreData(this.selReportType, this.extraParam);
},
onActivateGrid: function(thisObj) {
thisObj.getStoreData(this.selReportType);
}
});

Answer 1

Looks like you've got a trailing comma:
buildWindow: function() {
return [{
xtype: 'issuerpopupgrid',
id:'issuerpopupgrid-id',
appContainer: this.appContainer,
extraParam: this.extraParam
}];
}, //<-- trailing comma
IE will have issues with this... You can use jsHint to find syntax errors like this: https://jslinterrors.com/extra-comma
This is the fully linted code:
Ext.application({
name : 'Fiddle',
launch : function () {
Ext.define('view.window.popupwindow', {
extend : 'Ext.Window',
alias : 'widget.popupwindow',
requires: ['view.grid.issuerpopupgrid'],
appContainer: undefined,
caller: undefined,
selReportType: undefined,
reloadData: true,
extraParam: undefined,
initComponent: function () {
var config = {
width: 750,
minWidth: 600,
minHeight: 300,
autoScroll: false,
modal: true,
border: false,
closable: true,
constrain: false,
resizable: true,
maximizable: true,
layout: 'anchor',
items: this.buildWindow(),
listeners: {
scope: this,
show: function () {
//sync the shadow
var win = Ext.WindowMgr.getActive();
if (win !== null) {
win.el.sync(true);
}
}
}
};
Ext.apply(this, config);
this.callParent(arguments);
},
buildWindow: function () {
return [{
xtype: 'issuerpopupgrid',
id: 'issuerpopupgrid-id',
appContainer: this.appContainer,
extraParam: this.extraParam
}];
}
});
Ext.define('view.grid.issuerpopupgrid', {
extend : 'view.grid.lvsimplegrid',
alias : 'widget.issuerpopupgrid',
appContainer: undefined,
extraParam: undefined,
initComponent: function () {
this.gridType = this.appContainer.appContext.appData.gridDefTypeMap.R9;
this.modelName = this.appContainer.name + '.model.' + this.gridType.name;
this.selReportType = this.gridType.name; //'R9';
this.sortField = 'secDesc';
this.reportUrl = this.appContainer.appContext.appData.gridDefinitions[this.gridType.name].serviceUrl;
var config = {
height: 570,
selModel: {
selType: 'checkboxmodel',
showHeaderCheckbox : true,
mode: 'MULTI',
checkOnly: true
},
listeners: {
scope: this,
afterrender: this.onAfterRender,
show: this.onActivateGrid
}
};
Ext.apply(this, config);
this.callParent(arguments);
this.tbar = this.buildTopBar();
},
onAfterRender: function (thisObj) {
this.configureGrid(this.selReportType, this.appContainer.appContext.appData, null, false, this.sortField, this.sortField);
thisObj.getStoreData(this.selReportType, this.extraParam);
},
onActivateGrid: function (thisObj) {
thisObj.getStoreData(this.selReportType);
}
});
}
});