`
atian25
  • 浏览: 468789 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

[4.x] Ext.ux.button.AutoRefresher

阅读更多


 

/**
 * @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: '刷新数据',
    minuteText: '分',
    secondText: '秒',
    
    /**
     * 是否显示自动刷新倒计时
     */
    showCountDown: true,

    /**
     * 刷新时间
     */
    refreshInterval:0,
    
    //@private
    lastInterval:null,
    
    menu:{
        items:[
            {text:'手动刷新',itemId:'btn0',value:0},
	        {text:'每15秒',itemId:'btn15',value:15},
	        {text:'每30秒',itemId:'btn30',value:30},
	        {text:'每1分钟',itemId:'btn60',value:60},
	        {text:'每3分钟',itemId:'btn180',value:180},
	        {text:'每5分钟',itemId:'btn300',value:300}
        ]
    },
    
    initComponent: function() {
        this.addEvents(
            /**
             * @event refresh 刷新事件
             * 达到触发间隔的时候发布.
             * @param {AutoRefresher} refresher
             */
            '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)
                }
            }
        }
    },
    
    /**
     * 刷新倒计时显示
     * @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: 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);
        }
    },
    
    /**
     * 暂停/启动计时器
     * @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'
})
 
  • 大小: 4.6 KB
分享到:
评论
2 楼 silvernet 2011-07-27  
同时还收了一个楼主在sencha坛子里的xdatetime
1 楼 silvernet 2011-07-27  
好东西,刚好项目中要用到,就拿走了

相关推荐

    extjs4.1-ux.rar

    3、Ext.ux.upload.Button 4、Ext.ux.toggleslide.ToggleSlide 5、Ext.ux.container.ButtonSegment 6、Ext.ux.grid.plugin.RowEditing 7、Ext.ux.grid.plugin.DragSelector 8、Ext.ux.grid.plugin.SortMenu 9、Ext.ux...

    extjs-Ext.ux.form.LovCombo下拉框

    在EXTJS框架中,`Ext.ux.form.LovCombo`是一种自定义组件,它扩展了基本的`Ext.form.field.ComboBox`,提供了更丰富的功能,尤其是针对多选和联动选择的需求。这个组件通常用于创建具有“lov”(即“Look Up Value”...

    [Ext 3.x + Ext 2.x] 下拉树 Ext.ux.ComboBoxTree

    【Ext 3.x + Ext 2.x 下拉树 Ext.ux.ComboBoxTree】是基于ExtJS框架的一个组件,它结合了下拉框(ComboBox)和树形控件(TreePanel)的功能,提供了一种用户友好的选择界面。在网页应用中,这种控件常用于展示层级...

    EXT dojoChina按钮控件示例 Ext.Button.rar

    EXT dojoChina按钮控件示例 Ext.Button.rarEXT dojoChina按钮控件示例 Ext.Button.rarEXT dojoChina按钮控件示例 Ext.Button.rarEXT dojoChina按钮控件示例 Ext.Button.rar

    .x文件查看器Dxviewer.ext-DirectX

    《.x文件查看器Dxviewer.ext与DirectX深度解析》 在计算机图形学领域,DirectX是一款由微软公司开发的API(应用程序接口),主要用于Windows操作系统中的多媒体和游戏开发,尤其是3D图形处理。它为开发者提供了一...

    Ext.ux.UploadDialog.zip

    这个"Ext.ux.UploadDialog.zip"压缩包包含了EXTjs的UploadDialog组件,方便开发者在自己的项目中直接使用。 UploadDialog组件的核心功能是提供一个用户友好的界面,让用户能够选择并上传文件到服务器。这个组件通常...

    org.restlet.ext.spring.jar

    org.restlet.ext.spring.jar

    Ext.Ajax.request2.x实现同步请求

    在EXTJS库中,`Ext.Ajax.request`是用于发送Ajax请求的核心方法,它支持异步和同步操作。本文将详细解析如何利用`Ext.Ajax.request`实现同步请求,并探讨其背后的原理和注意事项。 首先,我们需要理解Ajax的本质,...

    ext4解压工具和操作方法.rar

    包含3个工具:make_ext4fs、simg2img、kusering.sh。 1. 解压system.img为system.img.ext4。命令:simg2img system.img system.img.ext4 2. 创建system.img.ext4挂载目录tmp; 命令:mkdir tmp; 3. 挂载system....

    ext.net 1.x DEMO

    **EXT.NET 1.x 框架介绍** EXT.NET 是一个基于 .NET 平台的 Web 开发框架,它提供了一套丰富的用户界面组件,使得开发者可以构建出交互性强、性能优秀的网页应用。EXT.NET 1.x 版本是早期的一个稳定版本,包含了...

    Ext.ux.SwfUploadPanel.js

    `Ext.ux.SwfUploadPanel.js`是这样一个基于ExtJS和SwfUpload技术的插件,它实现了多文件上传的功能。这篇文章将深入探讨这个插件的工作原理、主要特点以及如何在实际项目中应用。 首先,`ExtJS`(全称为EXT ...

    Sencha 全系产品离线文档 打包下载 含ExtJS6.2

    Ext JS 6.2.x Ext JS 6.2.0 Ext JS 6.0.x Ext JS 6.0.2 Classic Ext JS 6.0.1 Classic Ext JS 6.0.0 Classic Ext JS 5.1.x Ext JS 5.1.3 Ext JS 5.1.2 Ext JS 5.1.1 Ext JS 5.1.0 Ext JS 5.0.x Ext JS ...

    Ext.ux.Upload.Dialog使用

    在IT行业中,`Ext.ux.Upload.Dialog`是一个用于Ext JS框架的第三方组件,它扩展了标准的对话框(Dialog)功能,提供了文件上传的能力。这个组件通常被用于Web应用程序,以便用户可以方便地向服务器上传文件。下面...

    org.restlet.ext.servlet

    看名字,有需要下jar包

    Ext JS Notification 插件

    而`Ext.ux.Notification.js`则是实际的Notification插件源代码,它扩展了Ext JS框架,添加了显示通知的功能。 在使用Notification插件之前,需要确保已经正确地引入了所有依赖文件。然后,可以通过以下步骤在应用中...

    Ext.ux.submit的例子

    Ext.ux.submit是一个基于Ext Core库的扩展,用于增强原生表单提交的功能。这个扩展主要专注于添加验证机制,使得在前端就能对用户输入的数据进行有效性检查,从而提高应用程序的安全性和用户体验。在深入探讨之前,...

    Extjs4.X下comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用

    store: Ext.create('Ext.data.TreeStore', { model: 'Department', root: { text: '所有部门', expanded: true, children: [ /* ... */ ] } }), displayField: 'text', valueField: 'id', mode: '...

    Ext.ux.ComboBoxTree

    带复选框的这是经过测试可以用的下拉树

    org.restlet.ext.servlet-2.1.1.jar

    org.restlet.ext.servlet-2.1.1.jar

    org.restlet.ext.slf4j.jar

    org.restlet.ext.slf4j.jar

Global site tag (gtag.js) - Google Analytics