您的位置：首页 > 其它

EXT_信息提示框组件_Ext.MessageBox

2010-04-11 15:12 357 查看
1.只读信息提示框：Ext.MessageBox.alert()

<mce:script type="text/javascript"><!--
/*
注意：
Ext.MessageBox是异步的，它的调用不会停止浏览器中代码执行，如希望信息提示出现等待用户反馈后才执行代码，需设置一回调函数
调用格式:
alert(String title,String msg,[Function fn],[Object scope])
*/

//当DOM树加载完毕后执行
Ext.onReady(function(){
Ext.MessageBox.alert('只读信息提示框','Ext只读信息提示框alert',callBack);

//回调函数
function callBack(id){
alert('单击的按钮id是:' + id);
}
});
// --></mce:script>


2.确认信息框：Ext.MessageBox.confirm()

<mce:script type="text/javascript"><!--
/*
注意:传入回调函数中按钮id是区分用户选择唯一方法，据此参数判断执行不同操作
调用格式:
confirm(String title,String msg,[Function fn],[Object scope])
*/

Ext.onReady(function(){
Ext.MessageBox.confirm('确认信息框','Ext确认信息框confirm',callBack);

function callBack(id)
{
alert('单击按钮id:' + id);
}
});
// --></mce:script>


3.获取用户输入信息提示框：Ext.MessageBox.prompt()

<mce:script type="text/javascript"><!--
/*
调用格式:
prompt(String title,String msg,[Function fn],[Object scope],[Boolean/Number multiline])
[Boolean/Number multiline]:设置false(默认)显示一单行文本,true以默认高度显示多行文本,还可
以像素为单位直接设置文本域高度
*/

Ext.onReady(function(){
Ext.MessageBox.prompt('获取用户输入信息提示框','用户输入内容:',callBack,this,true);

function callBack(id,msg)
{
alert('单击按钮id：' + id +　'/n输入内容:' + msg);
}
});
// --></mce:script>


4.基于JSON配置灵活显示新的信息提示框：Ext.MessageBox.show()

<mce:script type="text/javascript"><!--
/*
调用格式:
show(Object config)
常用配置项表:
title         String          提示框标题
msg           String          显示信息内容
width         String          对话框宽度，以像素为单位
closable      Boolean         是否显示右上角关闭按钮
modal         Boolean         是否窗口模式
fn            Function        回调函数
progress      Boolean         是否显示一进度条(由程序控制滚动)
progressText  String          进度条上显示文字
wait          Boolean         是否显示一自动滚动的进度条
true    显示一单行文本，vlaue值将显示在文本域中
prompt        Boolean
false
multiline     Boolean         是否显示多行文本

buttons       Object/Boolean  是否显示按钮或显示一配置对象按钮
Ext.Msg.CANCEL
Ext.Msg.OK
Ext.Msg.OKCANCEL
Ext.Msg.YESNO
Ext.Msg.YESNOCANCEL

icon          String          样式文件，为对话框提供一背景图
Ext.Msg.ERROR
Ext.Msg.INFO
Ext.Msg.QUESTION
Ext.Msg.WARNING
*/

Ext.onReady(function(){
var config = {
title:'基于配置显示新的信息提示框',
msg:'三个按钮，和一个多行文本区',
modal:true,
prompt:true,
value:'请输入',
fn:callBack,
buttons:Ext.Msg.YESNOCANCEL,
icon:Ext.Msg.QUESTION
}

Ext.MessageBox.show(config);

function callBack(id,msg)
{
alert('单击按钮id:' + id + '/n输入内容:' + msg);
}
});
// --></mce:script>


补：Ext.Msg(Ext.MessageBox)的其他功能

<mce:script type="text/javascript"><!--
/*
buttonText通过配置对象，改变默认按钮文字,必须放在创建提示框之前！
*/
//改变默认按钮文字
function msg_chang_butText()
{
/*Ext.MessageBox.buttonText = {
yes:'按钮一',
no:'按钮二',
//cancel:'按钮三'
}*/

Ext.MessageBox.buttonText.yes = '按钮一';
Ext.MessageBox.buttonText.no = '按钮二';

var config = {
title:'自定义按钮文字的对话框',
msg:'自定义按钮文字',
modal:true,
buttons:Ext.Msg.YESNOCANCEL
}

Ext.MessageBox.show(config);
}

/*
updateText([String text])更新显示文字
*/
//动态显示提示信息
function msg_dynamic_showText()
{
var config = {
title:'动态提示',
msg:'动态更新信息文字',
modal:true,
buttons:Ext.Msg.OK,
width:300
}

var msgBox = Ext.MessageBox.show(config);

//Ext.TaskMgr用来定时执行程序
Ext.TaskMgr.start({
run:function(){
msgBox.updateText('会动的时间:' + new Date().format('Y-m-d g:i:s A'));
},
interval:1000       //1s后调用一次
});
}

/*
updateProgress(Number value,String progressText,String msg)更新进度条及提示信息
value:0-1间数字，默认为0
progressText:进度条上显示的文字
msg:其他信息内容
*/
function msg_updateProgress()
{
var config = {
title:'更新进度条及信息',
msg:'更新:',
modal:true,
width:300,
progress:true
}

var msgBox = Ext.MessageBox.show(config);

var count = 0;             //滚动条被刷新次数
var percentage = 0;        //进度百分比
var progressText = '';     //进度条显示文字

var config_Task = {
run:function(){
count ++;

if(count > 10)     //刷新10次后关闭信息提示对话框
{
//隐藏进度条
msgBox.hide();
}

//计算进度数
percentage = count / 10;
//生产进度条文字
progressText = '当前完成度:' + percentage*100 + "%";
//跟新显示信息对话框
msgBox.updateProgress(percentage,progressText,'当前时间:' + new Date().format('Y-m-d g:i:s A'));
},
interval:1000
}

Ext.TaskMgr.start(config_Task);
}
// --></mce:script>

</head>

<body>
注：此处并未移除时间调用，会有问题！
<br /><br />
<a href="javascript:msg_chang_butText();" mce_href="javascript:msg_chang_butText();" >改变Ext.Msg的默认按钮文字</a>
<br /><br />
<a href="javascript:msg_dynamic_showText();" mce_href="javascript:msg_dynamic_showText();">动态更新提示框</a>
<br /><br />
<a href="javascript:msg_updateProgress();" mce_href="javascript:msg_updateProgress();">更新进度条及提示信息</a>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航