//Ext.require(['*']);
Ext.onReady(function() {
Ext.MessageBox.msgButtons[0].setText('确定'); //ok
Ext.MessageBox.msgButtons[1].setText('接受'); //yes
Ext.MessageBox.msgButtons[2].setText('取消'); //no
Ext.MessageBox.msgButtons[3].setText('放弃'); //cancel
var toolbar = new Ext.toolbar.Toolbar({
renderTo : 'toolbar',
width : 800
});
toolbar.add([ {
text : '标准提示框', // 按钮上显示的文字
handler : extjsAlert, // 单击后调用的函数
inconCls : 'newIcon' // 按钮上显示的图标
}, '-', // 加入工具栏分隔符
{
text : '确认消息框',
handler : extjsConfirm,
inconCls : 'newIcon'
}, '-', '->',// 加入一个充满工具栏的空白元素
{
text : '输入信息提示框',
handler : extjsPrompt,
inconCls : 'newIcon'
}, '-',{
text : '进度条提示框',
handler : extjsWait,
inconCls : 'newIcon'
}, '-',{
text : 'show提示框',
handler : extjsShow,
inconCls : 'newIcon'
},'-',{
text : '更新提示文字',
handler : extjsRefresh,
inconCls : 'newIcon'
}, '-',{
text : '更新进度条',
handler : extjsRefreshProgerss,
inconCls : 'newIcon'
}]);
function extjsAlert(btn) {
Ext.MessageBox.alert('提示框名称', '<font color=red>内容,支持HTML格式文本<font>');
alert('!'); // Ext的消息框是异步执行,不会影响程序的运行,所以如果需要根据提示框的选择结果确定流程,需将选择后的函数放在提示框的回调函数中
}
function extjsConfirm(btn) { // 显示YES/NO按钮,做出选择
Ext.MessageBox.confirm('提示框名称', '请单击我,做出选择', callBack);
function callBack(id) { // 传入回调函数中按钮id是区分用户选择的唯一方法,通过判断该参数来执行不同的操作
Ext.MessageBox.alert('选择结果', '点击了' + id + '按钮');
}
}
function extjsPrompt() { // 显示一个获取用户输入信息的提示框,接收用户输入
Ext.MessageBox.prompt('提示框名称', '请输入...', callBack, this,true, '这是默认值');
function callBack(id, msg) { // 传入回调函数中按钮id是区分用户选择的唯一方法,通过判断该参数来执行不同的操作
Ext.MessageBox.alert('选择结果', '点击了' + id + '按钮' + '\n' + '输入内容是:'
+ 'msg');
}
}
function extjsWait(btn) { //不能定义一个时间自动关闭
Ext.MessageBox.wait('正在运行中,请等待...', '提示框名称', {text:'进度条上的文字'});
}
function extjsShow(btn) { //上述三个提示框内部调用的都是这个方法,配置丰富,具体看API文档
Ext.MessageBox.show({
title:'提示框名称',
msg:'三个按钮,和一行文本输入域',
width:600,
height:500,
modal:true,
prompt:true,
value:'请输入...',
fn:callBack,
buttons:Ext.Msg.YESNOCANCEL,
icon:Ext.Msg.QUESTION
});
function callBack(id,msg){
Ext.MessageBox.alert('选择结果', '点击了' + id + '按钮' + '\n' + '输入内容是:'
+ 'msg');
}
}
function extjsRefresh(btn){
var msgBox=Ext.MessageBox.show({
title:'提示',
msg:'动态更新的信息文字',
modal:true,
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 H:i:s'));
},
interval:1000
};
Ext.TaskManager.start(task);
}
function extjsRefreshProgerss(btn){
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 H:i:s'));
if(count > 10){
Ext.TaskManager.stop(this);
msgBox.hide();
}
},
interval:300
};
Ext.TaskManager.start(task);
}
});