PDA

View Full Version : ProgressBar in grid use a lot of memory



lpastor
12 Sep 2009, 6:10 AM
Hello,

I found a way to display a progress bar in a grid, but it is inflated memory use of browsers and it generate an error in IE with InsertAdjacentHTML that is Null.

Also, if someone have a better solution ?

https://www.extjs.com/forum/showthread.php?t=80024


var columns_projet = [
expander2,
{header: "Titre", width: 200, sortable: true, dataIndex: 'nom_projet', renderer: function(value, meta, record, row, col, store){
var avancement = record.get('avancement_projet');
var taille = record.get('taille_projet');
var j = avancement/taille;
var k = Math.round(100*j)+'% d\'avancement...';
var id = Ext.id();
(function(){
new Ext.ProgressBar({
renderTo: id,
value: j,
text:k
});
}).defer(25)
return '<font color="blue"><b>'+value+'</b></font><br><span id="' + id + '"></span>';
}},Also, periodically I load data to refresh the grid :


var task2 = {
run: store_projet.reload,
scope: store_projet,
interval:30000 //1000 = 1 seconde
};
Ext.TaskMgr.start(task2);

lpastor
14 Sep 2009, 7:14 AM
Hello,

I found that the memory grow was do by firebug.

Now, I don't find how I can solve the "InsertAdjacentHTML that is Null" in IE ?

Laurent

Animal
15 Sep 2009, 4:58 AM
But he still has his problem of creating a Component, rendering it and throwing away all reference to it so that it leaks.

@OP: You just can't do that.

Write a renderer which creates the same DOM structure as a progress bar using a template. It's not that difficult.

hendricd
15 Sep 2009, 5:17 AM
Yep, you're right.

I hadn't really studied what he was doing with all those. I'll remove that post (wouldn't want to advertise such a bad habit).

15 Sep 2009, 5:50 AM
The problem with implementing instances of Component for store-generated views is that they are not designed to automatically clean up when the view is refreshed. :(

Animal
15 Sep 2009, 1:02 PM
Does this help?

http://www.extjs.com/forum/showthread.php?p=387025

lpastor
16 Sep 2009, 1:38 AM
Thanks a lot Animal,

My difficulties stem from the fact that I placed the progressbar in the second row of a column that does not match its dataIndex. To get there, I use a function in the renderer.


{header: "Titre", width: 270, sortable: true, dataIndex: 'nom_projet', renderer: function(value, meta, record, row, col, store){
var avancement = record.get('avancement_projet');
var taille = record.get('taille_projet');
var j = avancement/taille;
var k = Math.round(100*j)+'% d\'avancement...';
var id = Ext.id();
(function(){
new Ext.ProgressBar({
renderTo: id,
value: j,
text:k
});
}).defer(25)
return '<font color="blue"><b>'+value+'</b></font><br><span id="' + id + '"></span>';


I am inspired by this post:

http://www.extjs.com/forum/showthread.php?t=31854

Here are the results I get :

http://l.pastor.free.fr/images/divers/image2.png

Animal
16 Sep 2009, 2:08 AM
Hello?

http://www.extjs.com/forum/showthread.php?p=387025

lpastor
16 Sep 2009, 3:11 AM
Yes Animal, I saw the thread, but how can I display many Ext element like a textfield and a progressbar in the same cell ?

Animal
16 Sep 2009, 3:15 AM
By modifying that free code?

lpastor
16 Sep 2009, 3:31 AM
Maybe for you the solution is trivial, but, apart the solution I've found (that is not satisfactory), I do not see how to put multiple Ext element in the same cell of a grid...