PDA

View Full Version : Calling update(html) on hidden component does not update.



Sesshomurai
9 Jul 2010, 7:20 AM
Hi,
This seems like a bug, but please clarify. I have a panel in a tab that is not shown. I call update(somehtml) on that panel. The panel's html body is not updated. After I show the panel for the first time, all future updates() behave correctly whether it is hidden or shown.

To work around this I call panel.html="some html" and panel.update("some html") and then it is updated correctly while hidden - for the first time. wierd. bug?

3.2.1

Animal
9 Jul 2010, 7:38 AM
It's not rendered.

Animal
9 Jul 2010, 7:44 AM
The code needs to defer the operation if not rendered:



update: function(htmlOrData, loadScripts, cb) {
var me = this,
contentTarget = me.getContentTarget();
if (me.rendered) {
if (me.tpl && typeof htmlOrData !== "string") {
me.tpl[me.tplWriteMode](contentTarget, htmlOrData || {});
} else {
var html = Ext.isObject(htmlOrData) ? Ext.DomHelper.markup(htmlOrData) : htmlOrData;
contentTarget.update(html, loadScripts, cb);
}
} else {
me.on('render', function() {
me.update(htmlOrData, loadScripts, cb);
}, null, {single: true});
}
},

Animal
9 Jul 2010, 7:46 AM
or, better:



update: function(htmlOrData, loadScripts, cb) {
var me = this,
contentTarget = me.getContentTarget();
if (me.rendered) {
if (me.tpl && typeof htmlOrData !== "string") {
me.tpl[me.tplWriteMode](contentTarget, htmlOrData || {});
} else {
var html = Ext.isObject(htmlOrData) ? Ext.DomHelper.markup(htmlOrData) : htmlOrData;
contentTarget.update(html, loadScripts, cb);
}
} else {
if (me.tpl && typeof htmlOrData !== "string") {
me.html = me.tpl.apply(htmlOrData || {});
} else {
me.html = Ext.isObject(htmlOrData) ? Ext.DomHelper.markup(htmlOrData) : htmlOrData;
}
},

senacle
23 Jul 2010, 5:39 AM
I was facing the same problem...

Animal, it will be a good idea if your code were inserted in the Extjs code...

I use a very simple panel with only html to update - no title, no border, ...
I've found this solution, after reading yours.



//The panel where the html must be updated

new Ext.Panel({
border: false,
id: "idjs_panel"
})

//The code for updating the html
if (Ext.getCmp('idjs_panel').rendered) {
Ext.getCmp('idjs_panel').update(somehtml);
} else {
Ext.getCmp('idjs_panel').html = somehtml;
}