PDA

View Full Version : ExtJS 3.4 IE 11 - Illegal Argument



lstrike
9 Mar 2016, 10:41 PM
Hello everyone,

I already posted this on stackoverflow: http://stackoverflow.com/questions/35893208/extjs-3-4-ie-11-illegal-argument

I've got a strange behaviour regarding ExtJS 3.4 in IE 11. In Firefox everything is working, in IE11 not.
There is a table with cells, which can be edited. Everything is build inside an EditorPanelGrid and some JSON Stores which are backed by a Java function (crud handler)
If I use the IE11 the page is partly loaded. The basic table is available, but not the content. If I use the IE developer tools (F12) ExtJS "crashes" here (picture):
http://i.stack.imgur.com/nkOsN.png (http://i.stack.imgur.com/nkOsN.png)

It seems, that Ext.defer is the cause for this trouble, but I can't find anything regarding this problem.

Does anyone have a hint for me?

I have the following code:




<div id="contentDivSystem"></div> <script type="text/javascript"> var deleteIds = []; var updateIds = []; var rowLimit = 20; function contains(arr, obj) { var i = arr.length; while (i--) { if (arr[i] === obj) { return true; } } return false; } Ext.onReady(function() { var customobject = Ext.query('CustomObject'); var layoutfunction = customobject.doLayout; var myStore = new Ext.data.JsonStore( { url : 'dispatchAjaxRequest', baseParams : { eventPath : 'frontend.FrontEndCRUDHandler', eventMethod : 'getSystemData', jsonInput : Ext.encode({ tableName : 'SYSTEM', start : 0, limit : rowLimit }) }, root : 'store', id : 'gridStore', fields : [ 'id', 'as_host', 'system_number', 'client', 'language', 'sap_router_string', 'pool_capacity', 'pool_size', 'sap_id', 'name' ], remoteSort : false, autoLoad : true, autoSave : false, writer : new Ext.data.JsonWriter({ encode : true, writeAllFields : true }), listeners : { update : function(store, record, operation) { if (record.data.id !== null && record.data.id !== '' && !contains(updateIds, record.data.id)) { updateIds.push(record.data.id); } Ext.getCmp('editTable').getView().refresh(); }, datachanged : function() { Ext.defer(customobject.doLayout, 100, customobject); } } }); var MyRecord = Ext.data.Record.create([ { name : 'id', mapping : 'id' }, { name : 'as_host', mapping : 'as_host' }, { name : 'system_number', mapping : 'system_number' }, { name : 'client', mapping : 'client' }, { name : 'language', mapping : 'language' }, { name : 'sap_router_string', mapping : 'sap_router_string' }, { name : 'pool_capacity', mapping : 'pool_capacity' }, { name : 'pool_size', mapping : 'pool_size' }, { name : 'sap_id', mapping : 'sap_id' }, { name : 'name', mapping : 'name' } ]); // shorthand alias var fm = Ext.form; var editGrid = new Ext.grid.EditorGridPanel({ id : 'editTable', title : 'Edit table SYSTEM', header : true, renderTo : 'contentDivSystem', //height:350, autoHeight : true, clicksToEdit: 1, //style: 'margin-bottom: 50px', colModel: new Ext.grid.ColumnModel({ defaults: { width: 120, sortable: false, hideable : false, menuDisabled: true }, viewConfig: { forceFit: true }, columns : [ { hidden : true, header : 'id', dataIndex : 'id', editable : false }, { header : 'name', dataIndex : 'name', sortable : true, flex : 10, editor: new fm.TextField({ allowBlank: false }) }, { header : 'applicationserver', dataIndex : 'as_host', editable : true, flex : 10, sortable : true, editor: new fm.TextField({ allowBlank: false }), field : { xtype : 'textfield', allowBlank : false } }, { header : 'systemnumber', dataIndex : 'system_number', editable : true, flex : 10, sortable : true, editor: new fm.TextField({ allowBlank: false }), field : { xtype : 'textfield', allowBlank : false } }, { header : 'client', dataIndex : 'client', editable : true, sortable : true, flex : 10, editor: new fm.TextField({ allowBlank: false }), field : { xtype : 'textfield', allowBlank : false } }, { header : 'language', flex : 10, dataIndex : 'language', editable : true, editor: new fm.TextField({ allowBlank: false }), field : { xtype : 'textfield', allowBlank : false } }, { header : 'saprouterstring', dataIndex : 'sap_router_string', editable : true, flex : 10, editor: new fm.TextField({ allowBlank: false }), field : { xtype : 'textfield', allowBlank : false } }, { header : 'poolcapacity', dataIndex : 'pool_capacity', editable : true, flex : 10, editor: new fm.TextField({ allowBlank: false }), field : { xtype : 'textfield', allowBlank : false } }, { header : 'pool size', dataIndex : 'pool_size', editable : true, flex : 10, editor: new fm.TextField({ allowBlank: false }), field : { xtype : 'textfield', allowBlank : false } }, { xtype : 'actioncolumn', width : 20, align : 'center', items : [ { icon : '../images/icons/silk/delete.png', tooltip : 'Delete Row', handler : function(grid, rowIndex, colIndex) { var rec = grid.store.getAt(rowIndex); if (rec.data.id !== null && rec.data.id !== '') { deleteIds.push(rec.data.id); } grid.store.removeAt(rowIndex); Ext.defer(customobject.doLayout, 100, customobject); } } ] } ] }), store : myStore, viewConfig: { forceFit : true, autoFill: true, scrollOffset : 0 }, stateful : false, border : true, enableColumnHide : false, enableColumnMove : false, loadMask : true, stripeRows : true, autoScroll : true, tbar : [ { xtype : 'button', icon : '../images//icons/silk/add.png', dock : 'bottom', listeners : { click : function() { var grid = Ext.getCmp('editTable'); var myNewRecord = new MyRecord({ id : '', as_host : '', system_number : '', client : '', language : '', sap_router_string : '', pool_capacity : '', pool_size : '', sap_id : '' }); grid.store.add(myNewRecord); Ext.defer(customobject.doLayout, 100, customobject); } }, afterrender : function(cmp) { Ext.defer(customobject.doLayout, 100, customobject); } }, { xtype : 'button', icon : '../images//icons/silk/disk.png', listeners : { click : function() { var grid = Ext.getCmp('editTable'); save(grid.store.data.items); } } } ], dockedItems : [ { xtype : 'pagingtoolbar', store : myStore, // same store GridPanel is using dock : 'bottom', displayInfo : true } ], listeners : { beforeChange : function(pagingToolbar, params) { deleteIds = []; updateIds = []; pagingToolbar.store.baseParams = { eventPath : 'frontend.FrontEndCRUDHandler', eventMethod : 'getSystemData', jsonInput : Ext.encode({ tableName : 'SYSTEM', start : 0, limit : rowLimit }) } }, afterlayout : function() { Ext.defer(customobject.doLayout, 100, customobject); }, afterrender : function(cmp) { Ext.defer(customobject.doLayout, 100, customobject); } } }); function save(data) { Ext.Ajax .request({ url : 'dispatchAjaxRequest', params : { eventPath : 'frontend.FrontEndCRUDHandler', eventMethod : 'saveSapSystemData', jsonInput : Ext.encode({ tableName : 'SYSTEM', dataArray : Ext.encode(Ext.pluck(data, 'data')), deleteIds : deleteIds, updateIds : updateIds }) }, success : function(result, request) { Ext.getCmp('editTable').store.reload(); } }); } });

Gary Schlosberg
10 Mar 2016, 8:38 AM
I haven't heard reports of this issue. Which specific version of 3.4 are you running? Support for IE11 began with 3.4.2.

lstrike
11 Mar 2016, 1:26 AM
I use ExtJS in version 3.4.2.

Gary Schlosberg
11 Mar 2016, 1:38 PM
What version of Windows? Are there are any errors in the console which occur before it crashes?

lstrike
13 Mar 2016, 11:50 PM
The problem occurs on Windows (8.1) with IE 11.
There is no error or problem shown in the debugger before the "crash".