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

Posted 2023-02-26

【中文标题】ExtJS - 更新 DIV 后无法再次渲染窗口

【英文标题】：ExtJS - Cannot render again Window after DIV is updated

【发布时间】：2014-06-26 11:55:48

【问题描述】：

我使用 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);
                  
    );
  

【问题讨论】：

我正在考虑，问题可能出在 ajax 函数中，当做 document.body.appendChild(js);

【参考方案1】：

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

【讨论】：

好的，但是即使我使用面板而不是窗口，如果 div 更新，面板也无法再次显示。

当然，如果面板的标记已被破坏，则无法再次显示。这是预期的行为。将其渲染到一个空的 div；不要在上面放任何东西。