Question

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

我必须刷新整个页面才能再次渲染。我怀疑在更新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

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

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

1 个答案: