javascript - ExtJS - 更新 DIV 后无法再次渲染窗口

Question

我使用 renderTo 配置将 ExtJs 窗口渲染到 DIV 中。但是，有一些 AJAX 函数可以用其他 HTML 内容覆盖同一 DIV。当我在 DIV 更新后尝试再次加载窗口时，窗口不会呈现。我在控制台中没有错误。

我必须刷新整个页面才能使其再次呈现。我怀疑我必须在更新 DIV 之前销毁该组件，但我尝试的一切都不起作用。

这是我的 Windows 代码(其中有一些 django 标签):

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();
});

编辑:

这是显示窗口(或面板)的ajax函数:

  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

通常你不会将 Window 渲染到 div。 Window 是绝对定位的，Ext 管理创建其标记的时间和地点。如果您希望窗口在创建时显示，请使用 autoShow:true 配置它，如果您想稍后显示它，请在窗口创建后调用 window.show() .