In our ExtJS application, we have some menus and a tab panel. Clicking on a menuItem opens a grid.

we have a requirement where user can open a display containing a grid in any of the two modes:

1. Inline - Grid will open as a tab item in the tabpanel.
2. Popup - A new browser window is opened using window.open and whole ExtJS library is loaded first and then the grid is loaded. Popup as browser window is to facilitate multiple monitors.

So the problem here is whenever we open a popup window ExtJS library is needed and it is taking up a lot of memory in IE.

Is there any other way we can load a browser window popup with ExtJS grid without loading the whole ExtJS framework?

Or any other idea are most welcome, as we are really facing a lot of memory issues in IE and users are not willing to use chrome.

Thanks in advance.

In our ExtJS application, we have some menus and a tab panel. Clicking on a menuItem opens a grid.

we have a requirement where user can open a display containing a grid in any of the two modes:

1. Inline - Grid will open as a tab item in the tabpanel.
2. Popup - A new browser window is opened using window.open and whole ExtJS library is loaded first and then the grid is loaded. Popup as browser window is to facilitate multiple monitors.

So the problem here is whenever we open a popup window ExtJS library is needed and it is taking up a lot of memory in IE.

Is there any other way we can load a browser window popup with ExtJS grid without loading the whole ExtJS framework?

Or any other idea are most welcome, as we are really facing a lot of memory issues in IE and users are not willing to use chrome.

Thanks in advance.

• javascript
• extjs
• internet-explorer-11
• extjs6

• Is your parent window in ExtJS 6 ? why I am asking is if you application is in lower version of Ext then you can use new window as iframe with latest version of Extjs. Look and feel will be good. – UDID Commented Jul 5, 2017 at 10:06
• My idea is not a browser window, What I am trying to say is a new application which open as a window itself. – UDID Commented Jul 5, 2017 at 10:10
• 1 User should be able to move the window to secondary monitor, which is not possible with Ext.window. and yes parent and child both are extjs 6. – Vikram Commented Jul 5, 2017 at 10:32
• Found it! I knew I had asked the same question a while ago... – Alexander Commented Jul 18, 2017 at 20:50

3 Answers 3

It is not possible to load a grid into a new window without loading the Ext framework (or at least the parts required for a grid) in the new window first. You cannot access the copy of the ExtJS framework of the parent window and use that because ExtJS requires components to be in the same window to work correctly. This is partly caused by browser security which forbids to copy or share certain structures between windows, and partly by ExtJS architecture.

Regarding browser security, that may even cause problems when you just copy the grid contents. Make sure that you test all different browsers. Copying data between the windows may require you to serialize and deserialize to work in all browsers. For instance, I was unable to copy simple javascript dates between a browser window and an iframe in Chrome, they came up null. I had to serialize the records, transmit them, and deserialize them again:

var serializedRecords = dataStore.getRange().map(function(record) { 
    return record.getData({serialize:true, persist:true}); // <- serialization required
});
iframe.contentWindow.Ext.getStore("DataStore").
    loadRawData(serializedRecords); // <- loadRawData deserializes records
},

How about executing

var popupWin = window.open('...');
popupWin.Ext = window.Ext;

and do not loading ExtJs in child window

There is a tool called Sencha CMD. It can take to build only the parts of Ext js that are defined as dependencies (require section in your component definitions). So all other components coming with Ext JS will be ignored. You have to download ext js sources and figure out how to use that tool

http://docs.sencha.com/cmd/