原创 

ExtJS学习------Ext.Msg.show()学习

分类:    1129人阅读    IT小君  2015-07-26 10:52

     Ext.Msg.show()函数功能强大,参数多,以下我将介绍各参数功能:

      Ext.Msg.show({

            buttons:弹出框按钮设置,有如下选项:Ext.Msg.OK(只显示OK按钮),Ext.Msg.OKCANCEL(显示OK和Cancel按钮),Ext.Msg.CANCEL(只显示Cancel按钮),Ext.Msg.YESNO(显示Yes和No按钮),Ext.Msg.YESNOCANCEL(显示Yes,No和Cancel按钮)。

            closable:设置右上角是否有关闭符号(x),设置选项:true或false,true为显示,false为不显示。

            msg:“显示的内容",

            title:"弹出窗口显示的标题"

            fn:关闭窗口时所调用的程序。

            icon:设置弹出窗口显示的图标,选项有:Ext.Msg.INFO(带叹号的图标),Ext.Msg.ERROR(带X号的红色图标),Ext.Msg.WARNING(带叹号的黄色图标),Ext.Msg.QUESTION(带?号的图标)

            width:设置弹出框的宽度

            height:设置弹出框的高度。

            prompt:设置弹出框的输入框,选项有:true或false。true表示显示,false表示不显示。

            multiline:设置弹出框的多行输入框,选项有:true或false,true表示显示,false表示为不显示。

            progress:设置弹出框是否显示进度条,选项有:true或false,true表示显示,false表示不显示。

            progressText:"显示进度条的文字"

            wait:动态显示progress,选项有:true或false,true表示显示,false表示不显示。

            value:“显示文字",如果prompt设置为true时,该文本将显示在输入框中。

            waitConfig:配置参数,以控制显示progress,控制progress的参数为:{interval:500,duration:5000,fn:function{"加载完后触发方法"}},其中interval:表示触发的间隔时间,duration:进度条运作的时间长度,单位为ms,increment:数值,表示进度条每次更新的幅度大小。

            以下是显示进度条的例子:

            progress:设置为true时。代码如下:

      

   Ext.MessageBox.show({
                    title: "提示",
                    msg: "数据读取中...",
                    animal:"id1",
                    buttons: Ext.MessageBox.OK,
                    //multiline: true,
                    //prompt: true,
                    value:"abcdef",
                    width: 300,
                    height: 100,
                    modal:true,
                    closable: true,
                    progress: true,
                    icon:Ext.Msg.INFO,
                    fn: function (b, t) {
                        Ext.Msg.alert("提示", b + "-" + t);
                    };
                });

               var f = function (v) {
                    return function () {
                        if (v == 11) {
                            Ext.Msg.hide();
                        }
                        else {
                            Ext.Msg.updateProgress(v / 10, "正在读取【" + v + "】个文件");
                        }
                    };
                };
                for (var i = 1; i < 12; i++) {
                    setTimeout(f(i), i * 1000);
                }
            });

 

                     运行结果如下:

      

         以下为显示单行输入框的代码例子:

         

 Ext.MessageBox.show({
                    title: "提示",
                    msg: "数据读取中...",
                    animal:"id1",
                    buttons: Ext.MessageBox.OK,
                    //multiline: true,
                    prompt: true,
                    value:"abcdef",
                    width: 300,
                    height: 100,
                    modal:true,
                    closable: true,
                    //progress: true,
                    icon:Ext.Msg.INFO,
                    fn: function (b, t) {
                        Ext.Msg.alert("提示", b + "-" + t);
                    },
                });


 

         运行结果如下:

          

          以下为显示多行输入框,代码如下:

         

 Ext.MessageBox.show({
                    title: "提示",
                    msg: "数据读取中...",
                    animal:"id1",
                    buttons: Ext.MessageBox.OK,
                    multiline: true,
                    //prompt: true,
                    value:"abcdef",
                    width: 300,
                    height: 100,
                    modal:true,
                    closable: true,
                    //progress: true,
                    icon:Ext.Msg.INFO,
                    fn: function (b, t) {
                        Ext.Msg.alert("提示", b + "-" + t);
                    },
                });


 

        运行结果如下:

         

 

           

 

 

点击广告,支持我们为你提供更好的服务

html5 canvas进度条圆环图表统计动画特效

js+css3抽奖转盘旋转点餐代码

小众时尚单品在线电子商务网站模板

canvas炫酷鼠标移动文字粒子特效

响应式太阳能能源公司网站模板

中小型创意设计服务公司网站模板

有机水果蔬菜HTML5网站模板

HTML5数字产品服务公司网站模板

jQuery右端悬浮带返回顶部特效

网页设计开发公司网站模板

响应式咖啡饮品宣传网站模板

html5图标下拉搜索框自动匹配代码

HTML5现代家居装潢公司网站模板

响应式时尚单品在线商城网站模板

css鼠标跟随文字模糊特效

HTML5 Canvas竖直流动线条背景动画特效

现代时尚家具公司网站模板

css+js实现的颜色渐变数字时钟动画特效

html5 canvas彩色碎片组合球形旋转动画特效

html5 svg夜空中星星流星动画场景特效

点击广告,支持我们为你提供更好的服务
 工具推荐 更多»
点击广告,支持我们为你提供更好的服务