MessageBox的用法

来源：互联网发布：dbc2000 装备数据库编辑：程序博客网时间：2024/06/04 18:06

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Hello</title>    <link href="Extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css"/>    <script type="text/javascript" src="Extjs/ext-all-debug.js"></script>    <script type="text/javascript" src="Extjs/locale/ext-lang-zh_CN.js"></script>    <script type="text/javascript">        var person = {//json对象定义开始            'name': 'tom',            'age': 24,            'sex': 'male',            'married': false,            'books': [                //在数组中嵌入两个json对象                {'name': '中国通史', 'price': 30},                {'name': '世界通史', 'price': 20}            ]        }//json对象定义结束        //通过点(.)方式取得json对象的属性值        document.write('<h1>姓名:' + person.name + ',年龄:' + person.age + ',性别:' + person.sex + ',购买了《' + person.books[1].name + '》:￥' + person.books[1].price + '</h1>');        //或者通过括号的方式取得json对象的属性值        document.write('<h2>姓名:' + person['name'] + ',年龄:' + person['age'] + ',性别:' + person['sex'] + ',购买了《' + person['books'][0]['name'] + '》:￥' + person['books'][0]['price'] + '</h2>');    </script>    <script type="text/javascript">        Ext.onReady(function () {            //定义配置对象            var config = {                title: '示例01',                msg: '这是我的第一个示例'            }            //将配置对象传入方法中            Ext.Msg.show(config);            //Extjs支持HTML格式化            Ext.Msg.alert('示例02', '<font color=red>ExtJs支持HTML格式文本</font>');        });    </script></head><body><div id='toolbar'></div><!--            // Ext.MessageBox用法①            Ext.MessageBox.show({                title: '示例03',                msg: '请确定或取消',                buttons: Ext.MessageBox.OKCANCEL,                fn: callBack            });            function callBack(id){                alert('单击的按钮是：'+id);            }            //Ext.MessageBox用法②             Ext.MessageBox.confirm('提示','请单击我，做出选择',callBack);             function callBack(id){                    alert('单击的按钮ID是：'+id);             }             //Ext.MessageBox用法③             Ext.MessageBox.prompt('提示','输入一些内容看看：',callBack,this,true,"我是默认值");                function callBack(id,msg){                alert('单击的按钮ID是：'+id+'\n'+'输入的内容是：'+msg);             }             //Ext.MessageBox用法④             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用法⑤                //'ok'                Ext.MessageBox.msgButtons[0].setText('确定');                //'yes'                Ext.MessageBox.msgButtons[1].setText('是');                //'no'                Ext.MessageBox.msgButtons[2].setText('否');                //'cancel'                Ext.MessageBox.msgButtons[3].setText('取消');                Ext.MessageBox.show({                    title:'提示',                    msg:'自定义按钮文字',                    modal:true,                    buttons:Ext.Msg.YESNOCANCEL                });                //Ext.MessageBox用法⑥                Ext.MessageBox.msgButtons[0].setText('确认按钮');//第一次设置                Ext.MessageBox.alert('提示','提示信息一',function(){                Ext.MessageBox.msgButtons[0].setText('新的确认按钮');//第二次设置                Ext.MessageBox.alert('提示','提示信息二');                //Ext.MessageBox用法⑦                通过调用updateText方法定时更新提示信息                var msgBox = Ext.MessageBox.show({                    title:'提示',                    msg:'动态跟新的信息文字',                    modal:true,                    buttons:Ext.Msg.OK,                    fn:function(){                        //停止定时任务                        Ext.TaskManager.stop(task);                    }                })                //Ext.TaskManager是一个功能类，用来定时执行程序，                //在这里我们使用它来定时触发提示信息的更新。                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);                });                //Ext.MessageBox用法⑧                通过调用updateProgress方法同时更新提示信息和进度条                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'));                        //刷新10次后关闭信息提示对话框                        if(count > 10){                            Ext.TaskManager.stop(task);                            msgBox.hide();                        }                    },                    interval:1000                }                Ext.TaskManager.start(task);--><!--    进度条的使用        //手动模式的进度条        var ProgressBar = new Ext.ProgressBar({                width:300,//设定进度条的宽度                renderTo:'ProgressBar'         });            var count = 0;//滚动条被刷新的次数            var percentage = 0;//进度百分比            var progressText = '';//进度条信息            Ext.TaskManager.start({                run:function(){                    count++;                    //刷新10次后关闭信息提示对话框                    if(count > 10){                        ProgressBar.hide();                    }                    //计算进度                    percentage = count/10;                    progressText = percentage * 100 + '%'                    //更新信息提示对话框                    ProgressBar.updateProgress(percentage,progressText,true);                },                interval:1000,//设置时间间隔                repeat : 6//设置执行次数            });            //自动模式的进度条            var ProgressBar = new Ext.ProgressBar({                width:300,//设定进度条的宽度                renderTo:'ProgressBar'            });            ProgressBar.wait({                duration:10000,//进度条持续更新10秒钟                interval:1000,//每1秒钟更新一次                increment:10,//进度条分10次更新完毕                scope:this,//回调函数的执行范围                text : 'waiting',//进度条上的文字                fn:function(){//更新完成后调用的回调函数                    alert('更新完毕');                }             });             //css代码             <STYLE TYPE="text/css">                .custom .x-progress-inner {                    height:17px;                    background: #fff;                }                .custom .x-progress-bar {                    height:15px;                    background:transparent url(images/custom-bar-red.gif) repeat-x 0 0;                    border-top:1px solid #BEBEBE;                    border-bottom:1px solid #EFEFEF;                    border-right:0;                }              </STYLE>              //引用css样式的进度条                var ProgressBar = new Ext.ProgressBar({                    width:300,//设定进度条的宽度                    renderTo:'ProgressBar',                    cls:'custom'//使用自定义样式                });                ProgressBar.wait({                    duration:10000,//进度条持续更新10秒钟                    interval:1000,//每1秒钟更新一次                    increment:10//进度条分10次更新完毕                });--><!--     工具栏、菜单栏         //简单的工具栏         var toolbar = new Ext.toolbar.Toolbar({//创建工具栏            renderTo:'toolbar',            width:300        });        toolbar.add([//向工具栏中添加按钮            {                text:'新建',//按钮上显示的文字                handler:onButtonClick,//点击按钮的处理函数                iconCls:'newIcon'//在按钮上显示的图标            },            {text:'打开',handler:onButtonClick,iconCls:'openIcon'},            {text:'保存',handler:onButtonClick,iconCls:'saveIcon'}        ]);        function onButtonClick(btn){//点击按钮时调用的处理函数            alert(btn.text);//取得按钮上的文字        }        //使用add方法加入多种元素的复杂工具栏        var toolbar = new Ext.toolbar.Toolbar({//创建工具栏            renderTo:'toolbar',            width:500        });        toolbar.add(            {text:'新建'},{text:'打开'},            {text:'编辑'},{text:'保存'}, //加入按钮            '-',                          //加入工具栏分隔符            {     //加入表单元素                xtype:'textfield',                hideLabel : true,                width:150            },            '->',                        //加入一个充满工具栏的空白元素            '<a href=#>超连接</div>',    //加入一个Element元素            {xtype: 'tbspacer', width: 50},//加入一个空白元素，宽度为50像素            '静态文本'                   //加入一个简单字符串        );        //更多查看http://blog.csdn.net/e_wsq/article/category/418379/3--></body></html>
0 0