21

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.

harmeet
  • 137
  • 1
  • 9
Vikram
  • 8,235
  • 33
  • 47
  • 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 Jul 05 '17 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 Jul 05 '17 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 Jul 05 '17 at 10:32
  • [Found it! I knew I had asked the same question a while ago...](https://stackoverflow.com/questions/22298253/render-extjs-elements-into-other-frame) – Alexander Jul 18 '17 at 20:50

3 Answers3

8

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
},
Alexander
  • 19,906
  • 19
  • 75
  • 162
  • This is depressing but as you said, it is not possible, we asked the same question at the sencha support, they have same answer as yours. ExtJS is only for SPAs. So we have to ultimately persuade the users to use chrome. Thanks for your answer and time. – Vikram Jul 24 '17 at 08:15
3

How about executing

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

and do not loading ExtJs in child window

Koushik Chatterjee
  • 4,106
  • 3
  • 18
  • 32
  • Could you (or one of the upvoters) please tell me what I am doing wrong in [this fiddle](https://fiddle.sencha.com/#view/editor&fiddle/23ha)? – Alexander Jul 18 '17 at 04:30
  • In the new window you have to open it with a url, that contains the script & html of creation. and if you are trying for implement everything from the parent, you have to wait until the document is loaded – Koushik Chatterjee Jul 18 '17 at 04:35
  • Do you, by any chance, have working sample code for me? – Alexander Jul 18 '17 at 04:43
  • actually your code is not working (with style) in current window also. and is it just for display purpose (like view and css) or you have events to do actions? if you can provide a plunker which is just rendering it in current window then I can try changing it – Koushik Chatterjee Jul 18 '17 at 06:37
  • I have checked, and my fiddle is working in the current window. [I forked a version working in current window](https://fiddle.sencha.com/#view/editor&fiddle/23hb) and added a title so that there is something to do - sort the column. I couldn't get it to work in the newly opened window. – Alexander Jul 18 '17 at 06:47
  • 1
    well, tried a lot of tricks, but it seems like extJS is not willing to run in another document context, probably its caching some dependend data/module in current window. If your purpose is to show data and some selection(row/column)/sort/utility then probably you can take a look at this [w2UI](http://w2ui.com/web/demos/#!grid/grid-17), its faster, lightweight , and probably solve your purpose for the popup window. it has a dependency on jQuery though – Koushik Chatterjee Jul 18 '17 at 20:44
0

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/

Damask
  • 1,754
  • 1
  • 13
  • 24