Threaded View

  1. #1
    Sencha User atian25's Avatar
    Join Date
    Oct 2008
    Location
    china
    Posts
    114
    Vote Rating
    2
    atian25 is on a distinguished road

      0  

    Default Ext.ux.button.AutoRefresher

    Ext.ux.button.AutoRefresher




    Code:
    /**
     * 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'
    })
    Attached Images
    Last edited by atian25; 24 May 2011 at 5:20 PM. Reason: describe english
    @from: china
    @web: http://atian25.iteye.com
    @extensions: (extjs 4.x)
    * Ext.ux.grid.plugin.RowEditing - add some usefull features (v1.4 updated 2011-09-11)
    * Ext.ux.button.AutoRefresher
    * Ext.ux.form.field.DateTime