ExtJs4在网页上面如何动态显示时间

2025-05-13 16:40:35
推荐回答(3个)
回答(1):

//写的时候可能需要自定义一些样式
tbar: [{
    xtype: 'label',
    width: 100,
    margins: {left: 10},
    id: 'clock',
    listeners: {
      'render': function() {
        clockGo();
      }
    }
  },{},{}]
  
  //---------------
  
  function clockGo() {
  Ext.TaskManager.start({
    run: function() {
      Ext.getCmp("clock").setText(Ext.Date.format(new Date(), 'g:i:s A'));
    },
    interval: 1000
  });
}

效果

回答(2):

Ext.create("Ext.Viewport", {id:"main", layout:"border",

        items:[

            {你的上方组件(网站logo)},

            { 你的左边组件(导航树形组件)},

            {你的中心工作区组件},

            {

                region:"south", id:"userstatus", xtype:"toolbar", height:30, margins:'0 0 0 0',

                items:["->",

                    {id:"loginedClock", text:"", iconCls:"silk-clock", minWidth:120}

                ],

                listeners:{

                    render:{

                        fn:function () {

                            Ext.TaskManager.start({

                                run:function () {

                                    Ext.getCmp("loginedClock").setText(Ext.Date.format(new Date(), 'g:i:s A'));

                                },

                                interval:1000

                            });

                        },

                        delay:100

                    }

                }

            }

        ]

    })


效果如图


这是我目前项目使用的源码,ExtJs4.1版本


要是你想增加 “星期”  可在下面代码处追加

Ext.getCmp("loginedClock").setText(Ext.Date.format(new Date(), 'g:i:s A'));

回答(3):

ExtJs在网页上面如何动态显示时间,代码如下:

//初始化一些变量 
var aWeek=['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
var clock = new Ext.Toolbar.TextItem(new Date().format('Y-m-d G:i:s A')+'  '+aWeek[new Date().getDay()]);  //定期更新时间
Ext.TaskMgr.start({
  run: function(){
        Ext.fly(clock.getEl()).update(new Date().format('Y-m-d G:i:s A')+'  '+aWeek[new Date().getDay()]);
  },
  interval: 1000
});

注:最后把clock放置在一个工具条Toolbar中,就可以在网页上面动态显示时间了。