当前位置: 代码迷 >> Web前端 >> ext学习日记-提示框、进度条
  详细解决方案

ext学习日记-提示框、进度条

热度:95   发布时间:2013-08-10 21:14:06.0
ext学习日志-提示框、进度条

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="keywords" content="关键字" />

<meta name="description" content="简介" />

<title>ext</title>

<link href="index.css" rel="stylesheet" type="text/css" />

<link href="D:/wt2013/ext/ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="D:/wt2013/ext/ext-4.0.7-gpl/bootstrap.js"></script>

<script type="text/javascript" src="D:/wt2013/ext/ext-4.0.7-gpl/locale/ext-lang-zh_CN.js"></script>

<script type="text/javascript">

? Ext.onReady(function(){

? /*

? ? ?

? ? ?sExt.Msg.alert('Hello World!','<font color=red size="20px">你好!</font>');

alert('我会停止程序的执行!');

Ext.MessageBox.alert('提示','请单击我,确定',callBack);

?function callBack(id){

? ? alert('单击的按钮ID是:'+id);

}

/

?Ext.MessageBox.prompt('<font size=3px>报告复制</font>','请输入报告编号:',callBack,this,true,"我是默认");

?function callBack(id,msg){

? ? alert('单击的按钮ID是:'+id+'\n'+'输入的内容是: '+msg);

}

/

?Ext.MessageBox.wait('请等待,错做需要很长时间!','提示',{text:'进度条上的文字'});

?/

Ext.MessageBox.show({

? ? title:'提示',

msg:'我有三个按钮,和一个多行文本区。',

modal:true,

prompt:true,

value:'请输入',

fn:callBack,

buttons:Ext.Msg.YESNOCANCEL,

icon:Ext.Msg.QUESTION

})

function callBack(id,msg){

? ? alert('单击的按钮ID是:'+id+'\n'+'输入的内容是:'+msg);

}

/

Ext.MessageBox.msgButtons[0].setText('按钮一');

Ext.MessageBox.msgButtons[1].setText('按钮二');

Ext.MessageBox.msgButtons[2].setText('按钮三');

Ext.MessageBox.msgButtons[3].setText('按钮四');

Ext.MessageBox.show({

? ? title:'提示',

msg:'自定义文字',

modal:true,

buttons:Ext.Msg.YESNOCANCEL

});

/

Ext.MessageBox.msgButtons[0].setText('确认按钮');

Ext.MessageBox.alert('提示','提示信息',function(){

? ?Ext.MessageBox.msgButtons[0].setText('新的确认按钮');

Ext.MessageBox.alert('提示','提示信息二');

});

/

var msgBox = Ext.MessageBox.show({

title:'提示',

? ? msg:'动态更新的信息文字',

modal:false,

buttons:Ext.Msg.OK,

fn:function(){

? ?Ext.TaskManager.stop(task);

}

})

var task = {

? ?run:function(){

? ?msgBox.updateText('会动的时间:'+Ext.util.Format.date(new Date(),'Y-m-d g:i:s A'));

},

? ? ? ? interval:1000

}

Ext.TaskManager.start(task);

/

var msgBox = Ext.MessageBox.show({

? ?title:'提示',

msg:'动态更新的进度条和信息文字',

modal:true,

width:300,

progress:true

})

var count = 0; ?//滚动条被刷新的次数

var percentage = 0; ?//进度百分比

var progressText = '';

var task = {

? ?run:function(){

? ?count++;

//计算进度

percentage = count/10;

//生成进度条文字

progressText = '当前完成度:'+percentage*100+"%";

//更新信息提示对话框

msgBox.updateProgress(percentage,progressText,'当前时间:'+Ext.util.Format.date(new Date(),'Y-m-d g:i:s A'));

? ? ? ? ? ? if(count > 10){

? Ext.TaskManager.stop(task);

? msgBox.hide();

}

},

interval:1000

}

Ext.TaskManager.start(task);

*/

var ProgressBar = new Ext.ProgressBar({

? ?text:'使用renderTo为进度条定位',

width:300,

renderTo:'ProgressBar4'

});

? });

</script>

</head>

<body>

? <div id="ProgressBar1"> </div>

? <table id="ProgressBar2"></table>

? <table><tr id="ProgressBar3"></tr></table>

? <table><tr><td id="ProgressBar4"></td></tr></table>

</body>

</html>

  相关解决方案