ExtJS - Cannot render again Window after DIV is updated

Question

I render a ExtJs Window into a DIV with the renderTo config. However, there is some AJAX function that can overide that same DIV with other HTML content.When I try to load the Window again after the DIV had been updated, the Window is not rendered. I have no errors in console.

I have to refresh the whole page to make it render again. I suspect that I have to destroy the component, before updating the DIV, but eveything I tried is not working.

this is my windows code (there is some django tags in it):

Ext.require([
    'Ext.state.Manager',
    'Ext.state.CookieProvider',
    'Ext.window.MessageBox',
    'Ext.window.Window',
    'GeoExt.panel.Map'
]);

Ext.onReady(function(){
      Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider', {
            expires: new Date(new Date().getTime()+(1000*60*60*24*7)) //7 days from now
      }));

      map = new OpenLayers.Map('map',
                { projection: new OpenLayers.Projection("EPSG:3857"),
                  numZoomLevels: 20 });

      tiledLayer = new OpenLayers.Layer.XYZ('TMS',
                      "{{ tmsURL }}1.0/layer/{{ shapefile.id }}/${z}/${x}/${y}.png"
                );

      map.size = new OpenLayers.Size(1000,800);
      map.addLayer(tiledLayer);
      var bounds = new OpenLayers.Bounds.fromArray({{ bounds }});
      map.zoomToExtent(bounds);
      var click = new OpenLayers.Control.Click();
      map.addControl(click);
      click.activate();
      controls = new OpenLayers.Control.Hover({
            handlerOptions: {
                'delay': 100
            }
      });
      map.addControl(controls);
        controls.activate();

      var mappanel = Ext.create('GeoExt.panel.Map', {
          id: 'mappanel',
          map: map,
          dockedItems: [{
              xtype: 'toolbar',
              dock: 'top',
              items: [{
                  text: 'Current center of the map',
                  handler: function(){
                      var c = GeoExt.panel.Map.guess().map.getCenter();
                      Ext.Msg.alert(this.getText(), c.toString());
                  }
              }]
          }]
      });

       mapWindow = Ext.create('Ext.window.Window', {
          title: "Layer: {{ shapefile }} | Click on feature to edit.",
          id: 'mapWindow',
          x: 350,
          y: 120,
          height: 800,
          width: 1000,
          renderTo: 'pageContent',
          floatable: true,
          collapsible: true,
          closable: true,
          bodyBorder: false,
          maximizable: true,
          shadowOffset: 6,
          layout: 'fit',
          items: [
              mappanel
          ]
      }).show();


       {% load mathfilters %}
       attrTable = new Ext.create('Ext.window.Window', {
          id: 'attrTable',
          title: "Feature's attribute(s)",
          bodyStyle: {
              background: '#f2f3f7',
              padding: '10px'
          },
          x: 1400,
          y: 120,
          height: 200,
          width: 300,
          renderTo: 'pageContent',
          collapsible: true,
          closable: true,
          autoScroll: true,
          bodyBorder: false,
          shadowOffset: 6,
          layout: 'fit',
          html: "",
      }).show();
});

EDIT:

This is the ajax function that display the window (or panel):

  layerViewer = function(node_id){
    Ext.Ajax.request({
      method: "GET",
      url: "/basqui/layer/shapefile/view/" + node_id + "/",
      success: function(r){
                  html = Ext.decode(r.responseText).html
                  code = Ext.decode(r.responseText).js
                  var js = document.createElement('script');
                  js.text = code;
                  document.body.appendChild(js);
                  Ext.get('pageContent').update(html);
                  }
    });
  }

Answer 1

Normally you never render a Window to a div. Window is absolutely positioned and Ext manages when and where to create its markup. If you want the window to show upon the creation then you configure it with autoShow:true and if you want to show it later then call window.show() after window creation.