PDA

View Full Version : Ext.ux.button.AutoRefresher



atian25
22 May 2011, 7:18 PM
http://www.sencha.com/forum/attachment.php?attachmentid=26250&d=1306286379



/**
* provide a split button with a trigger in order to do task such as auto refresh
* @class Ext.ux.button.AutoRefresher
* @extends Ext.button.Split
* @author tz
* @email atian25@qq.com
* @date 2011-05-21
* @version 1.0
* @forum http://www.sencha.com/forum/showthread.php?134350-Ext.ux.button.AutoRefresher
*/
Ext.define('Ext.ux.button.AutoRefresher', {
alias: 'widget.autorefresher',
extend: 'Ext.button.Split',
iconCls: 'x-tbar-loading',
btnText: 'Refresh',
minuteText: 'm',
secondText: 's',

/**
* 是否显示自动刷新倒计时
* whether to show next refresh count down
*/
showCountDown: true,

/**
* 刷新时间
* current refresh interval,(second), set to 0 mean not auto refresh
*/
refreshInterval:0,

//@private
lastInterval:null,

menu:{
items:[
{text:'Manually Refresh',value:0},
{text:'Every 15 Second',value:15},
{text:'Every 30 Second',value:30},
{text:'Every 1 minute',value:60},
{text:'Every 3 minute',value:180},
{text:'Every 5 minute',value:300}
]
},

initComponent: function() {
this.addEvents(
/**
* @event refresh 刷新事件
* @param {Ext.ux.button.AutoRefresher} btn
*/
'refresh'
);
this.callParent(arguments)

this.buildTask();

this.on({
scope:this,
'afterrender':function(c){
this.menu.on('click',function(m,item,e){
this.reconfigure(item.value)
},this)
this.reconfigure(this.refreshInterval)
},
'click':function(){
this.fireEvent('refresh',this)
this.reconfigure(this.refreshInterval)
}
})
},
/**
* 建立计划任务
* @private
*/
buildTask: function(){
this.runner = new Ext.util.TaskRunner()
this.clockTask = {
countDown:0,
interval: 1000,
scope: this,
run: function(){
this.clockTask.countDown--
if(this.clockTask.countDown<0){
this.clockTask.countDown = this.refreshInterval
}
this.refreshCountDown(this.clockTask.countDown)
}
}

this.autoRefreshTask = {
interval: this.refreshInterval*1000,
scope: this,
run: function(count){
if(count>1){
this.fireEvent('refresh',this)
}
}
}
},

/**
* 刷新倒计时显示
* refresh count down text
* @param {Number} countDown 剩余时间
*/
refreshCountDown: function(countDown){
var minutes = Math.floor(countDown/60)
var seconds = Math.floor(countDown%60)
this.setText(this.btnText+'('+(minutes>0?minutes+this.minuteText:'') + seconds + this.secondText+')')
},

/**
* 重置计时器
* reconfigure the trigger
*/
reconfigure: function(value){
this.runner.stopAll();
this.setText(this.btnText);
if(value>0){
//需要显示倒计时
if(this.showCountDown){
this.refreshInterval = value
this.clockTask.countDown = value;
this.runner.start(this.clockTask);
}
this.autoRefreshTask.interval = value * 1000
this.runner.start(this.autoRefreshTask);
}
},

/**
* 暂停/启动计时器
* stop/start trigger
* @param {Boolean} stop
*/
toggleTrigger: function(stop){
if(stop){
this.lastInterval = this.refreshInterval
this.reconfigure(0)
}else{
if(this.lastInterval>0){
this.reconfigure(this.lastInterval)
}
}
},

/**
* 销毁对象
*/
onDestroy:function(){
this.runner.stopAll();
this.clockTask = null;
this.autoRefreshTask = null;
this.runner = null;
this.callParent(arguments);
},

author:'tz'
})

stephen.friedrich
24 May 2011, 3:26 AM
Err, can you describe the plugin in a few english words?

atian25
24 May 2011, 5:20 PM
sorry... my fault.
update.

26250

foxmarco
10 Jun 2011, 12:39 AM
Could you post an example of use in a grid panel with pagingToolBar plz?

Thanks.

I've tried to add like a button but to the end of countdown the store of grid has no reloaded!!

jonaldomo
3 Jul 2011, 6:48 AM
Awesome. I've included this on my PagingToolbar for all my grids.


itemId: 'refresh',
tooltip: me.refreshText,
overflowText: me.refreshText,
iconCls: Ext.baseCSSPrefix + 'tbar-loading',
xtype:'autorefresher',
listeners:{
refresh: {
fn: function(){
me.doRefresh();
}
}
}