Best way to open browser popup window containing ExtJS grid

Question

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.

Answer 1

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
},

Answer 2

How about executing

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

and do not loading ExtJs in child window