ExtJs4在网页上面如何动态显示时间
实现代码如下:
//初始化一些变量
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中,就可以在网页上面动态显示时间了. 展开
//写的时候可能需要自定义一些样式
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
});
}
效果
微测检测5.10
2023-05-10 广告
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'));
我要的写法不是这样的，我需要的是在bbar中添加
我需要的不是这样的编写方式，而是在bbar中添加，该如何？
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中，就可以在网页上面动态显示时间了。
