PDA

View Full Version : Cannot render again Ext.window.Window when DIV is updated



burton449
17 Jun 2014, 9:22 AM
I render a 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:



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

burton449
25 Jun 2014, 5:07 AM
!bump