PDA

View Full Version : [resolved] How load content without replace the old content when content is loading ?



arnolem
17 Jun 2009, 5:57 AM
Hello,

I have a panel with an autoload content



Ext.ux.Portlet = Ext.extend(Ext.Panel, {
anchor: '100%',
cls:'x-portlet'
});
var portlet1 = new Ext.ux.Portlet({
autoLoad: {
url: 'apps/APP_4a2e1e700edc9/'
}
});
I want to refresh this all 5 second. I use an autorefresh to reload the content each 5 seconds



portlet1.getUpdater().startAutoRefresh(5,"apps/APP_4a2e1e700edc9/")
This code working but when the new content is loading, the old content was replacing with a loading indicator before loading the new content.
I want only replace the old content when the new content was loaded.

Can you help me please ?

hendricd
17 Jun 2009, 6:08 AM
@arnolem -- No Problem.





Ext.ux.Portlet = Ext.extend(Ext.Panel, {
anchor: '100%',
cls:'x-portlet',

onRender : function(){
Ext.ux.Portlet.superclass.onRender.apply(this,arguments);
this.body.getUpdater().showLoadIndicator = false;
}
});
var portlet1 = new Ext.ux.Portlet({
autoLoad: {
url: 'apps/APP_4a2e1e700edc9/'
},
autoScroll : true,
preventBodyReset : true,

renderer :
{render :
function(el, response, updateManager, callback) {
//el == the Panel's body
var dh = Ext.DomHelper;
dh.append(el, response.responseText);
Ext.isFunction(callback) && callback();
}
}
}
});
Tweak it. ;)

arnolem
17 Jun 2009, 6:36 AM
Thanks ;)

But I have problemes.

First, the loading indicator was permanently visible and the autorefresh doesn't work.

Second, I don't see the Ext.Panel.preventBodyReset documentation, have you a link ?

Thanks for youtr help

Animal
17 Jun 2009, 6:39 AM
http://extjs.com/deploy/ext-3.0-rc2/docs/?class=Ext.Panel&member=preventBodyReset

arnolem
17 Jun 2009, 6:45 AM
http://extjs.com/deploy/ext-3.0-rc2/docs/?class=Ext.Panel&member=preventBodyReset

Thanks,
For information, this method wasn't find with the API search

hendricd
17 Jun 2009, 6:48 AM
First, the loading indicator was permanently visible and the autorefresh doesn't work.
Since you are constantly appending, just turn off the showLoadIndicator. (See post above again).



Second, I don't see the Ext.Panel.preventBodyReset documentation, have you a link ?


See the latest 3.0 RC2 online docs (http://extjs.com/deploy/ext-3.0-rc2/docs/?class=Ext.Panel) for it.

arnolem
17 Jun 2009, 6:53 AM
Ext.ux.Portlet = Ext.extend(Ext.Panel, {
anchor: '100%',
cls:'x-portlet'
});
var portlet1 = new Ext.ux.Portlet({
autoLoad: {
url: 'apps/APP_4a2e1e700edc9/'
},
autoScroll : true,
preventBodyReset : true,

renderer :
{render :
function(el, response, updateManager, callback) {
//el == the Panel's body
var dh = Ext.DomHelper;
dh.append(el, response.responseText);
Ext.isFunction(callback) && callback();
}
}
}
});


To refresh each 5 seconds, I have add the autorefresh


portlet1.getUpdater().startAutoRefresh(5,"apps/APP_4a2e1e700edc9/", "&techno=ADSL&w="+portlet1.getSize().width+"&h="+portlet1.getSize().height);


But this code load the first content, and add the new content on the bottom of the previous content.
I would like replace the first content with the new content without loading indicator.

For exemple, I have a graph, and I want actualize content without it visible to the user. You know ?

hendricd
17 Jun 2009, 7:02 AM
You'll have to code logic for that behaviour, perhaps something like:




Ext.ux.AppendingPortlet = Ext.extend(Ext.Panel, {
anchor: '100%',
cls:'x-portlet',
autoScroll : true,
preventBodyReset : true,

renderer :
{render :
function(el, response, updateManager, callback) {
//el == the Panel's body
var dh = Ext.DomHelper;
var wasEmpty = !el.dom.firstChild;
if(wasEmpty){
el.update(response.responseText);
updateManager.showLoadIndicator = false;
} else {
dh.append(el, response.responseText);
}
Ext.isFunction(callback) && callback();
}
}
}


});
var portlet1 = new Ext.ux.AppendingPortlet ({
autoLoad: {
url: 'apps/APP_4a2e1e700edc9/'
},
});
Keep Tweaking it.

arnolem
17 Jun 2009, 7:20 AM
Without "startAutoRefresh", the portlet wasn't autorefresh.

content1With "startAutoRefresh", the portlet load the new content each 5 secondes but the new content was and to the previous content.

content1
content1content2
content1content2content3I want this :

content1
content2
content3

hendricd
17 Jun 2009, 7:25 AM
@arnolem -- What are you sending back, just a string, no markup?

If so, you need to wrap it in some HTML markup prior to updating the body to make it look the way you want.



dh.append(el, {tag:'p',html: response.responseText});


Go back to the docs, and look at examples in Ext.DomHelper.

arnolem
17 Jun 2009, 7:40 AM
It's work !!

My content is a graph.
I think that my problem isn't a ExtJs problem but a browser problem.
When the content is reload, the graph was reload on the browser. During 1/2 second, the content is blank.

I have just define a width an a height to my <IMG>

Thnaks a lot and sorry /:)