PDA

View Full Version : [3.x] Ext.ux.grid.AutoRefresher



galdaka
28 Apr 2009, 6:35 AM
28/04/2009: First version.
29/04/2009: Rewrite. Felixibilize the plugin and support locale.
30/04/2009: New version. countdownClock and more changes.
30/04/2009: Capture http://www.jadacosta.es/contents/screencast/capture1.swf
02/06/2009: Minor change for last rev of ExtJS 3.0
13/06/2009: Remember datastore last options.
14/06/2009: Changed applying locale. Thanks jay garcia!!
15/06/2009: Added GNU License.
11/08/2009: Fixed some bugs. Added price: 18€. In a pack with PageSizer (http://extjs.com/forum/showthread.php?p=322536#post322536) is offered for 30€. Contact to: galdaka@hotmail.com
03/11/2009: License changed. Reason: People use your work for comercial purposes without your permission.
03/11/2009: NEW LICENSE: http://creativecommons.org/licenses/by-nc/3.0/ (http://creativecommons.org/licenses/by-nc/3.0/). Thanks to cparker (http://www.extjs.com/forum/member.php?u=57967).





/**
* Ext.ux.grid.AutoRefresher
* Copyright (c) 2009-2010, José Alfonso Dacosta Dominguez (galdaka@hotmail.com)
*
* Ext.ux.grid.AutoRefresher is licensed http://creativecommons.org/licenses/by-nc/3.0/ license.
*
* Commercial use is prohibited. contact with galdaka@hotmail.com
* if you need to obtain a commercial license.
*
* Site: www.jadacosta.es
*/

Ext.namespace('Ext.ux.grid');
Ext.ux.grid.AutoRefresher = Ext.extend(Ext.CycleButton, {
withoutTimeText: ' Núnca',
secondsText: ' segundo(s)',
minutesText: ' minuto(s)',
hoursText: ' hora(s)',
refreshText: ' Refresco en: ',
countdownClock: true,
runner: null,
clockTask : null,
counter: 0,
refresherTimes: this.refresherTimes || [{text: '', value: 0, checked: true, timeTextType: 'n', checked: true},
{text: ' 5', value: 5, timeTextType: 's'},
{text: ' 10', value: 10, timeTextType: 's'},
{text: ' 30', value: 30, timeTextType: 's'},
{text: ' 1', value: 1, timeTextType: 'm'},
{text: ' 5', value: 5, timeTextType: 'm'},
{text: ' 10', value: 10, timeTextType: 'm'},
{text: ' 15', value: 15, timeTextType: 'm'},
{text: ' 30', value: 30, timeTextType: 'm'},
{text: ' 1', value: 1, timeTextType: 'h'}
],
initComponent: function(){
var rt=[];
var wt = this.withoutTimeText;
var st = this.secondsText;
var mt = this.minutesText;
var ht = this.hoursText;
Ext.each(this.refresherTimes, function(r){rt.push({
text: r.timeTextType == 'n' ? r.text + wt : r.timeTextType == 'h' ? r.text + ht : r.timeTextType =='s' ? r.text + st : r.text + mt,
value: r.timeTextType == 'n' ? 0 : r.timeTextType == 'h' ? r.value*3600 : r.timeTextType =='s' ? r.value : r.value*60,
checked: r.checked ? true : false
})
});

Ext.apply(this, {
showText: true,
prependText: ' ',
forceIcon: Ext.ux.iconMgr.getIcon('/dev/common/icons.nsf/extjs/ux/icons/', 'clock_refresh'),
items: rt
});
Ext.ux.grid.PageSizer.superclass.initComponent.apply(this, arguments);
},
init: function(pagingToolbar) {
var cycleButton = this;
this.pagingToolbar = pagingToolbar;
if (pagingToolbar.store) {this.store = pagingToolbar.store}
pagingToolbar.on('render', this.onInitView, this);
pagingToolbar.on('beforechange', this.onInitCounter, this);

this.store.startAutoRefresh = function(interval){
if(this.autoRefreshProcId){
clearInterval(this.autoRefreshProcId);
}
//var opt = this.lastOptions.params;
//this.autoRefreshProcId = setInterval(this.reload.createDelegate(this, [{params: opt}]), interval*1000);
//var opt = this.lastOptions.params;
this.autoRefreshProcId = setInterval(this.reload.createDelegate(this), interval*1000);
if(cycleButton.countdownClock){
this.on('load', function(){
cycleButton.clockTask.counter = cycleButton.getActiveItem().value;
});
}
}
this.store.stopAutoRefresh = function(){
if(this.autoRefreshProcId){
clearInterval(this.autoRefreshProcId);
}
}
},
onInitView: function(pagingToolbar){
pagingToolbar.insert(12, this);
pagingToolbar.insert(12, '-');
this.on('change', this.onTimeRefreshChanged, pagingToolbar);
this.fireEvent('change', this);
},
onInitCounter: function(pagingToolbar){
this.fireEvent('change', this);
},
createRunner: function(cycleButton, value){
this.runner == null ? this.runner = new Ext.util.TaskRunner() : this.runner.stopAll(this.clockTask);
this.clockTask = {
counter: value,
run: function(){
this.counter = this.counter-1;
this.counter>=0 ? true : this.counter = 0
var hours = '0' + Math.floor(this.counter/60)
hours = hours.substr(hours.length-2, hours.length)
var minutes = '0' + this.counter%60;
minutes = minutes.substr(minutes.length-2, minutes.length)
Ext.getCmp(cycleButton.id).el.child("td.x-btn-mc " + Ext.getCmp(cycleButton.id).buttonSelector).update(cycleButton.refreshText + hours + ':' + minutes)
},
interval: 1000
};
},
onTimeRefreshChanged: function(cycleButton){
var value = cycleButton.getActiveItem().value;
if(cycleButton.countdownClock) cycleButton.createRunner(cycleButton, value);
if (value > 0){
if(cycleButton.countdownClock) cycleButton.runner.start(cycleButton.clockTask);
this.store.startAutoRefresh(value);
}else{
if(cycleButton.countdownClock) cycleButton.runner.stopAll(cycleButton.clockTask);
this.store.stopAutoRefresh();
}
}
});
if(Ext.ux.grid.AutoRefresher){
Ext.override(Ext.ux.grid.AutoRefresher, {
withoutTimeText : " Núnca",
secondsText : " segundo(s)",
minutesText : " minuto(s)",
hoursText : " hora(s)",
refreshText : " Refresco en: "
});
}



View also Ext.ux.grid.PageSizer: http://extjs.com/forum/showthread.php?t=66954

galdaka
29 Apr 2009, 3:32 AM
I rewrite entire plugin for make it more flexible.

1) Now support locale.

2) Two config options:

initialTime: You can define the initial auto-refresh period time.
refresherTimes: You can define de posible refresher times.

Greetings,

jay@moduscreate.com
29 Apr 2009, 10:14 AM
Hi Galdaka, you might want to start using Ext.plugins instead of Ext.ux if you are developing plugins ;)

galdaka
29 Apr 2009, 10:21 AM
Hi Galdaka, you might want to start using Ext.plugins instead of Ext.ux if you are developing plugins ;)

Hey thanks!!

Which are the changes? Only namespace?

Greetings,

mystix
29 Apr 2009, 6:12 PM
Hey thanks!!

Which are the changes? Only namespace?

Greetings,

yep. it's purely a namespace change. but does wonders for clarity.

galdaka
30 Apr 2009, 7:03 AM
Hi,

I introduce countdownClock option and other improvements.

Greetings,

galdaka
30 Apr 2009, 11:09 AM
Hi people,

View first post.

Added capture of funtionallity: http://www.jadacosta.es/contents/screencast/capture1.swf

Greetings,

galdaka
2 Jun 2009, 10:10 AM
Minor change for adapt the plugin to last rev of ExtJS.

Scorpie
4 Jun 2009, 10:53 PM
Nice! Can be very handy for apps with realtime-data handling!

Sesshomurai
10 Jun 2009, 11:40 AM
Hi,
This looks really nice. Is there an example of how to apply it to my grid? I tried instantiating the class and adding it to my plugins list but didn't work that way.

thanks

galdaka
10 Jun 2009, 10:18 PM
Hi,
This looks really nice. Is there an example of how to apply it to my grid? I tried instantiating the class and adding it to my plugins list but didn't work that way.

thanks

Use it as plugin.

Greetings,

Sesshomurai
11 Jun 2009, 6:44 AM
How? Sorry, I tried to add it to my grid plugins list and it didn't work. I only need to see an example of how to add it as a plugin to grid. I'm new to that part of extjs.

If there is a working example URL I can learn how from that.

galdaka
11 Jun 2009, 9:12 AM
How? Sorry, I tried to add it to my grid plugins list and it didn't work. I only need to see an example of how to add it as a plugin to grid. I'm new to that part of extjs.

If there is a working example URL I can learn how from that.

Report your error here. "didn't work." is not helpful.

P.D: Remove Ext.ux.iconMngr references if you use simple cls or modify ux and put your cls reference correctly.

Greetings,

Sesshomurai
12 Jun 2009, 8:16 AM
I tried this in my grid.




plugins:[new Ext.ux.grid.AutoRefresher()]



It said no such constructor.

galdaka
12 Jun 2009, 9:41 AM
I tried this in my grid.




plugins:[new Ext.ux.grid.AutoRefresher()]



It said no such constructor.

Is a pulgin of bbar. Try this for example:



...
bbar: new Ext.PagingToolbar({
store: ds,
pageSize: 15,
plugins: [
new Ext.ux.grid.AutoRefresher()
]
...


Greetings,

cfhank
12 Jun 2009, 4:47 PM
when I download the file: PageSizerPlugin.zip it seems that is corrupted within the zip file has no extension: PageSizerPlugin and with this content:

first two lines:
----------------------------------------
PK
G Â: PageSizerPlugin/PK :ƒœ:p%öò0$ ÊI PageSizerPlugin/pagesizer.jpgìYTÛÖ>3“BB
½…Þ¤ƒHïE©‚Ø C€PB¯"A”¢XQA±"*V@,(,(
*"
----------------------------------------

what can be?

Sesshomurai
12 Jun 2009, 9:15 PM
Is a pulgin of bbar. Try this for example:



...
bbar: new Ext.PagingToolbar({
store: ds,
pageSize: 15,
plugins: [
new Ext.ux.grid.AutoRefresher()
]
...


Greetings,

Thank you for the suggestion, but it doesn't work.



Error: Ext.ux.grid.AutoRefresher is not a constructor

gurufaction
12 Jun 2009, 9:38 PM
If you navigate through pages with the auto refresher running you are sent back to the page you were on when you first actived the auto refresher. Is this normal?

evant
12 Jun 2009, 11:29 PM
@Sesshomurai

Usually means you haven't included the file properly.

galdaka
13 Jun 2009, 1:39 AM
If you navigate through pages with the auto refresher running you are sent back to the page you were on when you first actived the auto refresher. Is this normal?

Added. View first post.

Greetings,

galdaka
13 Jun 2009, 1:47 AM
when I download the file: PageSizerPlugin.zip it seems that is corrupted within the zip file has no extension: PageSizerPlugin and with this content:

first two lines:
----------------------------------------
PK
G Â: PageSizerPlugin/PK :ƒœ:p%öò0$ ÊI PageSizerPlugin/pagesizer.jpgìYTÛÖ>3“BB
½…Þ¤ƒHïE©‚Ø C€PB¯"A”¢XQA±"*V@,(,(
*"
----------------------------------------

what can be?

The files are re-compressed. Extract, rename and extract again. There are multiple post in this forum with same question.

Greetings,

Sesshomurai
13 Jun 2009, 5:29 AM
@Sesshomurai

Usually means you haven't included the file properly.


Here is more information



Error: Ext.ux.iconMgr is undefined


Also, is this line of code correct in your class?



forceIcon: Ext.ux.iconMgr.getIcon('/dev/common/icons.nsf/extjs/ux/icons/', 'clock_refresh'),


Seems like that won't work because I don't have that directory on my computer.

galdaka
13 Jun 2009, 12:31 PM
Here is more information



Error: Ext.ux.iconMgr is undefined


Also, is this line of code correct in your class?



forceIcon: Ext.ux.iconMgr.getIcon('/dev/common/icons.nsf/extjs/ux/icons/', 'clock_refresh'),


Seems like that won't work because I don't have that directory on my computer.

Change Ext.ux.iconMgr.getIcon('/dev/common/icons.nsf/extjs/ux/icons/', 'application_view_list_1') for css class like this:



.myImg01{ background-image: url({your-url/application_view_list_1}) !important; };

koko2589
14 Jun 2009, 2:51 AM
can you give demo?tankyou

Sesshomurai
14 Jun 2009, 5:17 AM
I put the css class in my css and added it below.



forceIcon: 'myImg01',


Doing that produces this error:



Error: this.field is undefined



Nothing works. I think maybe it would save you time to make a simple demo .html and put in your zip. This way you won't have to help others with the same problems since it doesn't work in the .zip you provide.

Hopefully, I can find a way to make it work. Looks really useful.

gurufaction
14 Jun 2009, 5:40 AM
I had a difficult time getting this component to work because of the icon too. To get this plugin working quickly just comment out the 'forceIcon' line. I had to search this forum for the 'Ext.ux.iconMgr' code posted by galdaka and include it into my code. Then I updated the 'forceIcon' path. After that everything worked just fine. One think I did notice is that when using the AutoRefresh with paging is that whenever page I am on when I enable the refresh is the page that keeps getting reloaded even if I navigate away to another page. If I start the refresher on pg 2 and naviagate to page 4 before the time gets to zero I am forwarded back to pg 2. I wounder if this is normal.

galdaka
14 Jun 2009, 8:28 AM
can you give demo?tankyou

I have not public host for public it. Sorry.

You have a SFW video for view in action.

Greetings,

jay@moduscreate.com
14 Jun 2009, 8:35 AM
if(Ext.ux.grid.AutoRefresher){
Ext.ux.grid.AutoRefresher.prototype.withoutTimeText = " Núnca";
Ext.ux.grid.AutoRefresher.prototype.secondsText = " segundo(s)";
Ext.ux.grid.AutoRefresher.prototype.minutesText = " minuto(s)";
Ext.ux.grid.AutoRefresher.prototype.hoursText = " hora(s)";
Ext.ux.grid.AutoRefresher.prototype.refreshText = " Refresco en: ";
}


You should use Ext.apply or Ext.override for this. It results in cleaner code.


if(Ext.ux.grid.AutoRefresher){
Ext.apply(Ext.ux.grid.AutoRefresher.prototype, {
withoutTimeText : " Núnca",
secondsText : " segundo(s)",
minutesText : " minuto(s)",
hoursText : " hora(s)",
refreshText : " Refresco en: "
});
}




if(Ext.ux.grid.AutoRefresher){
Ext.override(Ext.ux.grid.AutoRefresher, {
withoutTimeText : " Núnca",
secondsText : " segundo(s)",
minutesText : " minuto(s)",
hoursText : " hora(s)",
refreshText : " Refresco en: "
});
}

galdaka
14 Jun 2009, 8:36 AM
I had a difficult time getting this component to work because of the icon too. To get this plugin working quickly just comment out the 'forceIcon' line. I had to search this forum for the 'Ext.ux.iconMgr' code posted by galdaka and include it into my code. Then I updated the 'forceIcon' path. After that everything worked just fine. One think I did notice is that when using the AutoRefresh with paging is that whenever page I am on when I enable the refresh is the page that keeps getting reloaded even if I navigate away to another page. If I start the refresher on pg 2 and naviagate to page 4 before the time gets to zero I am forwarded back to pg 2. I wounder if this is normal.

Review your datastores lastOptions params. The UX take this configuration when refresh the grid.

Greetings,

galdaka
14 Jun 2009, 8:47 AM
if(Ext.ux.grid.AutoRefresher){
Ext.ux.grid.AutoRefresher.prototype.withoutTimeText = " Núnca";
Ext.ux.grid.AutoRefresher.prototype.secondsText = " segundo(s)";
Ext.ux.grid.AutoRefresher.prototype.minutesText = " minuto(s)";
Ext.ux.grid.AutoRefresher.prototype.hoursText = " hora(s)";
Ext.ux.grid.AutoRefresher.prototype.refreshText = " Refresco en: ";
}


You should use Ext.apply or Ext.override for this. It results in cleaner code.


if(Ext.ux.grid.AutoRefresher){
Ext.apply(Ext.ux.grid.AutoRefresher.prototype, {
withoutTimeText : " Núnca",
secondsText : " segundo(s)",
minutesText : " minuto(s)",
hoursText : " hora(s)",
refreshText : " Refresco en: "
});
}




if(Ext.ux.grid.AutoRefresher){
Ext.override(Ext.ux.grid.AutoRefresher, {
withoutTimeText : " Núnca",
secondsText : " segundo(s)",
minutesText : " minuto(s)",
hoursText : " hora(s)",
refreshText : " Refresco en: "
});
}


Changed. View first post.

Thanks jay!!

Greetings,

gurufaction
15 Jun 2009, 8:37 AM
It seems to be a bug with the following line:


var opt = this.lastOptions.params;
this.autoRefreshProcId = setInterval(this.reload.createDelegate(this, [{params: opt}]), interval*1000);


It should be :


var opt = this.lastOptions.params;
this.autoRefreshProcId = setInterval(this.reload.createDelegate(this), interval*1000);


The reload method uses the lastOptions by default. By passing an options parameter the reload function is called with the same options every time.

galdaka
15 Jun 2009, 8:40 AM
It seems to be a bug with the following line:


var opt = this.lastOptions.params;
this.autoRefreshProcId = setInterval(this.reload.createDelegate(this, [{params: opt}]), interval*1000);


It should be :


var opt = this.lastOptions.params;
this.autoRefreshProcId = setInterval(this.reload.createDelegate(this), interval*1000);


The reload method uses the lastOptions by default. By passing an options parameter the reload function is called with the same options every time.

There is no bug.

If you test without passing lastoptions not work properly. Every time load first page for example.

Greetings,

gurufaction
15 Jun 2009, 9:07 AM
It seems there is more to this :) Before starting the timer navigate away from the first page and them everything works fine. Let me dig a little deeper.

gurufaction
15 Jun 2009, 11:06 AM
There is no bug.

If you test without passing lastoptions not work properly. Every time load first page for example.

Greetings,

What kind of error do you get? With your original code if you start the timer while on page one and navigate away does the grid return to page one for you after refresh?

cfhank
16 Jun 2009, 9:37 AM
how do I pass a parameter to store the update is in 5 minutes for example?

PageSizer using I use this:
plugins: [new Ext.ux.grid.PageSizer({initialSize:40})]

and autoRefresher, as you would? more or less so?
plugins: [new Ext.ux.grid.AutoRefresher({text: '5', value: 5, timeTextType: 'm'})]
but does not work ...

galdaka
16 Jun 2009, 10:19 AM
how do I pass a parameter to store the update is in 5 minutes for example?

PageSizer using I use this:
plugins: [new Ext.ux.grid.PageSizer({initialSize:40})]

and autoRefresher, as you would? more or less so?
plugins: [new Ext.ux.grid.AutoRefresher({text: '5', value: 5, timeTextType: 'm'})]
but does not work ...

Is not implemented for now.

Greetings,

Vaevictus
22 Jun 2009, 3:07 AM
Thanks for the great work.

Couldnt get it to work without your PageSizerPlugin, but decided to use your pagesizer plugin anyway and now it works nice :)

I am reporting a bug with IE8:

Line 109:
Ext.getCmp(cycleButton.id).el.child("td.x-btn-mc " + Ext.getCmp(cycleButton.id).buttonSelector).update(cycleButton.refreshText + hours + ':' + minutes)

this renders fine in firefox but in IE8 the cyclebutton is not resized appropriately and therefore you cannot see the whole text.

Have attached a screenshot,
Thanks,
Vae

Vaevictus
22 Jun 2009, 3:12 AM
bulletin board auto shrank the image so here is a zoomed in version:

Galileo_Galilei
4 Aug 2009, 6:35 AM
If I start the refresher on pg 2 and naviagate to page 4 before the time gets to zero I am forwarded back to pg 2. I wounder if this is normal.
Review your datastores lastOptions params. The UX take this configuration when refresh the grid.

Greetings,
Hy guys, first thanks galdaka for this nice plugin.
I think gurufaction was talking about the autoRefreshProcId, which is initialized with setInterval('reload store with lastOptions params') everytime the 'change' event for AutoRefresher_cycleButton fires.
The problem is that once set, the initial interval will reload the store with the same params regardless the fact you've changed the initial page(you can do this by navigating to another page or by changing the pagesize if your PagingToolbar has also the Ext.ux.grid.PageSizer plugin).
The interval is cleared only if another 'change' event for it will fire - so changing the page or the pagesize will change the lastOptions params of the store but woun't stop the store's reload with the params(others than the last if u've changed the page in the meanwhile) existing at the moment we've set autoRefreshProcId(though the AutoRefresher's counter is refresing once u change the page or the pagesize because it is set by the store's 'load' event and not by the AutoRefresher 'change' event).
My fix was to clear and reinitialize the interval also in the store's load event inside the store.startAutoRefresh function; probably there is a better way to do it(in red are the added lines):

this.store.startAutoRefresh = function(interval){
if(this.autoRefreshProcId){
clearInterval(this.autoRefreshProcId);
console.log('interval cleared');
}
var opt = this.lastOptions.params;
this.autoRefreshProcId = setInterval(this.reload.createDelegate(this, [{params: opt}]), interval*1000);
if(cycleButton.countdownClock){
this.on('load', function(){
cycleButton.clockTask.counter = cycleButton.getActiveItem().value;
//
if(cycleButton.clockTask.counter > 0){
clearInterval(this.autoRefreshProcId);
}
var opt = this.lastOptions.params;
this.autoRefreshProcId = setInterval(this.reload.createDelegate(this, [{params: opt}]), interval*1000);
//
});
}
}

galdaka
11 Aug 2009, 12:55 AM
Various bugs fixed.

Added symbolic price.

Greetings,

galdaka
3 Nov 2009, 12:44 AM
Hi,

License changed. View first post.

Greetings,

moegal
21 Jan 2010, 4:49 AM
Hi,

I am trying your extension and I am getting the following error:

Ext.getCmp(cycleButton.id) has no properties

This happens after I open a grid in a tab and then select a refresh time and then I close the tab.

Line 104

Thanks, Marty

moegal
22 Feb 2010, 2:30 PM
I can get rid of the error.

I can add the following:



if (Ext.getCmp(cycleButton.id)){
Ext.getCmp(cycleButton.id).el.child("td.x-btn-mc " + Ext.getCmp(cycleButton.id).buttonSelector).update(cycleButton.refreshText + hours + ':' + minutes)
}


But the task continues to run. Any ideas on how to stop it?


Marty

moegal
22 Feb 2010, 3:17 PM
I also added this in the init function



pagingToolbar.on('destroy', this.onDestroyView, this);


And



onDestroyView: function(pagingToolbar){
this.fireEvent('destroyed', this);
this.store.stopAutoRefresh();
},


It works now.

bcd
8 Apr 2011, 9:22 AM
Something is going wrong on firefox (at least for the latest version - 4) when you are sending some parameters (baseParams) to the remote server. When the function reload is called with no arguments (i.e.: store.reload() ) it uses the last parameters used but if an argument is set (i.e.: store.reload(something) ) it will use the argument as baseParams. The problem is on firefox's setInterval which calls the given function with an integer argument (seconds since last function run) if you don't set any function argument.

https://developer.mozilla.org/en/window.setInterval


setInterval() will pass the number of milliseconds late the callback was called into the callback function, which can confuse it if it expects something else as an argument. To sidestep that problem, use an anonymous function to call your callback.


to fix this replace


this.autoRefreshProcId = setInterval(this.reload.createDelegate(this), interval*1000);

with


this.autoRefreshProcId = setInterval(this.reload.createDelegate(this,[null]), interval*1000);