ExtJS: Second Modal Window causing error: Uncaught TypeError: Cannot read property 'addCls' of null

Question

I am getting the error: "Uncaught TypeError: Cannot read property 'addCls' of null" in the following scenario.

I have a requirement of two modal windows. The first modal window has a Grid. When I double click on the Grid in the first modal window, I should open a second modal window. Below is the code I used:

  saleOrderEmployeeGrid.on('celldblclick', function(tableview, td, cellIndex, record, tr, rowIndex, e, eOpts){
    loadActivityWindow();
  });
  }

  function loadActivityWindow()
  {
        jobSlotActivityWin = new Ext.Window({
        id          :'jobSlotActivityWinId',
        modal       : true,
        layout      : 'fit',
        width       : 900,
        height      : 500,
        closeAction :'destroy',
        plain       : true,
        model       : true,
        stateful    : false,
        title       :'Create Job Slot',
        items       : [soActivityPanel],
        buttons     : [{
            text        : 'Close',
            handler     : function(){
                            jobSlotActivityWin.destroy();
                        }
            }
        ] 
        });
        jobSlotActivityWin.show();
        Ext.WindowManager.register (createJobSlotWin); // createJobSlotWin is the first modal window
        Ext.WindowManager.register(jobSlotActivityWin); // jobSlotActivityWin is the second modal window created above
        Ext.WindowManager.bringToFront ('jobSlotActivityWinId');
  }

So, when I double click on the saleOrderEmployeeGrid, I see the second modal window fine. Then I close the second modal window and double click on the grid again on the first modal window.

This now doesn't bring up the second modal window. It completely goes masked and blank in the background of first modal window and I see the below error in the JavaScript Console: Uncaught TypeError: Cannot read property 'addCls' of null

To be more precise, the error seems to be coming out of jobSlotActivityWin.show() as my debug logs failed at that point.

Anyone faced this before and can help me?

Answer 1

Set the closeAction to hide, not sure why the default is destroy but what it essentially means is that when the window is closed the element will be removed from the dom and show will not work anymore.

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel-cfg-closeAction

reply to comments:

conditional create example

//the window is only created once, the data is always show and updated.

if(!this.win) {
    this.win = createWindow();
}

updateWindowData();
this.win.show();

Instead of saying closeAction:'hide' everywhere, we have something like this in our source

Ext.override(Ext.Window, {
    closeAction: 'hide'
})

If you put that snippet before any windows are created all of them will be closeAction hide by default.