I'm having problem with rendering GridPanel inside Ext.Window. When I first click on the button, a new window pops up, I can see the a panel inside the window and off center, then I can see the grid outside the panel and located at the bottom of the window.

Then I close the Window, click on the same button again, VOILA, a new Window pops up and the GridPanel is rendered and layout properly. From here on, the new Window will properly layout the Grid Panel.

Only when I click the button for the very first time, then I can recreate the problem. Any hint on how to fix the layout problem?

                    //handler function from the toolbar's button

                    handler: function() {
                      var win;
                      if(!win) {
                        win = new Ext.Window({
                          layout: 'border',
                          width: 500,
                          height: 300,
                          closeAction: 'hide',
                          plain: true,
                          items: new App.RoleGrid({ //This class extends Ext.grid.GridPanel
                                      id: 'roleGridAdv2',
                                      layout: 'fit',
                                      region: 'center'
                          modal: true,
                          shadow: true