• 选学校
  • 高中毕后选择什么学校好
  • 启蒙星
  • 北大青鸟课程介绍
  • 北大青鸟助你走上高级软件工程师修炼之路
  • 转行不是梦,学北大青鸟IT培训
  • 北大青鸟辉煌12年
  • 株洲北大青鸟校区升级

您现在的位置:株洲北大青鸟 >> >> 师资力量>> 技术天地

师资力量
开班信息
输入姓名手机号码预约试听课程
姓  名:*
手机号:*
创业摇篮班
开班日期:10月15日
招生人数:25
就业直通班
开班日期:10月31日
招生人数:25
就业精英班
开班日期:9月13日
招生人数:已满
技术天地
  • 轻松搞定Extjs[连载]——第四章:消息框
  • 发表日期:2009/5/25 16:25:30 阅读数:1271  
  •  
  •        轻松搞定Extjs[连载]——第四章:消息框

                                    株洲北大青鸟   李赞红

    第四章:消息框
    一、话说消息框
        大家对消息框并不陌生哈,消息框通常是一个模式窗口,会屏蔽掉当前窗口所有的鼠标键盘事件,关闭后才能继续后面的操作。消息框的类型也不一而足,有显示信息的,有提示输入的,有确定用户行为的,IE和Firefox默认的消息框很难看啊,死气沉沉,古板枯燥,看多了令人生厌。
     
        不过,好消息是Ext为我们带来了全新风格的消息框,那个舒服啊,啧啧啧……
     
           Extjs在实现消息框的时候,完全摈弃了传统的风格,不再弹出新的对话框,而是在当前页面跳出一个层,并将原页面完整覆盖。
     
        原来,只是一种模拟。
     
        在Ext中,定义了一个类MessageBox,该类还有一个更精简的名字Msg,所有消息框都定义在该类中。
     
     
          
    二、最简单的消息框——提示框
        最简单的?Extjs有最简单的东西吗?没有。如果深入了解,发现每个细节都不简单,但是,幸好大部分时候我们只是用用,解决项目中的实际问题,到底Jack如何做到的,让喜欢玩的人玩去吧。
     
        提示框的语法:
           Ext.MessageBox. alert ( String title, String msg, Function fn, Object scope );
        参数定义如下:
    1、  title:标题
    2、  msg:提示内容
    3、  fn:提示框关闭后自动调用的回调函数
    4、  scope:作用域,用于指定this指向哪里,一般不用管他,特殊情况下有用
    其实,通常情况下,我们用得更多的是title和msg两个参数,举例如下①:
    extjsAlert = function(){
         Ext.MessageBox.alert("提示框", "这是一个提示框");
    }
        也可以这样:
    extjsAlert = function(){
         Ext.MessageBox.alert("提示框", "这是一个提示框", function(){
                alert("提示框关闭了");
         });
    }
        页面代码是这样的:<input type="button" value="alert" onclick="extjsAlert();">,记住函数名不要使用和DOM模型相同的名字,他们犯冲。
    三、输入框
        输入框用来提示输入字符串,相当于window.prompt()方法。
     
        语法:
           Ext.MessageBox.prompt(String title,String msg, Function fn, Object scope, Boolean/Number multiline )
        从定义中可以看到,前四个参数和提示框一样,最后多了一个参数,如果为true或为数字,将允许输入多行或者指定默认高度(像素)。
        示例如下②:
    extjsPrompt = function(){
         Ext.MessageBox.prompt("输入框", "请输入您的姓名:", function(btn, txt){
                Ext.MessageBox.alert("结果", "您点击了" + btn + "按钮,<br>输入的内容为" + txt);
         });
    }
        如果显示多行,看下面示例③:
    extjsPrompt = function(){
         Ext.MessageBox.prompt("输入框", "请输入您的姓名:", function(btn, txt){
                Ext.MessageBox.alert("结果", "您点击了" + btn + "按钮,<br>输入的内容为" + txt);
         }, this, 300);
    }
        注意回调函数的参数,第一个为点击的按钮的名字,如果点击确定,为“ok”,如果点击取消,为“cancel”,第二个参数就是用户输入的文本。
    四、确认框
        确认框提示用户作出选择,语法如下:
           Ext.MessageBox.confirm ( String title, String msg, Function fn, Object scope )
        参数同上,示例如下:
    extjsComfirm = function(){
         Ext.MessageBox.confirm("确认", "请点击下面的按钮作出选择", function(btn){
                Ext.MessageBox.alert("您单击的按钮是:" + btn);
         });
    }
        我们可以通过回调函数的参数btn采取相应的行动。
     
    五、自定义消息框
        如果上面所有的消息框都无法满足我们的需求,譬如没有图标、按钮类型太少,甚至更BT的,如果想要个进度条怎么办?哈哈,别急,Extjs息数为你想到了。我们可以使用show()方法自定义消息框,只需要稍微配置一下就可以了。
     
           show()方法的语法如下:
           Ext.MessageBox.show ( Object config )
        语法是不是显得更简单?不要小瞧了他,config这个参数可谓包罗万象,使用json格式可以传输很多信息到方法中去。
           config中常见属性如下:
                  title:消息框标题栏
                  msg:消息内容
                  width:消息框的宽度
                  multiline:是否显示多行文本
                  closable:是否显示关闭按钮
                  buttons:按钮
                  icon:图标
                  fn:回调函数
        举例说明:
    extjsCustom = function(){
         var config = {
                title: "自定义对话框",
                msg: "这是一个自定义对话框,想怎么搞就怎么搞",
                width: 400,
                multiline: true,
                closable: false,
                buttons: Ext.MessageBox.YESNOCANCEL,
                icon: Ext.MessageBox.QUESTION,
                fn: function(btn, txt){
                       Ext.MessageBox.alert("结果", "您点击了‘yes’按钮<br>,输入的值是:" + txt);
                }
         };
         Ext.MessageBox.show(config);
    }
        在上面的例子中,不熟悉的有buttons和icon,这些选项在Ext.MessageBox中已有定义。
           buttons(按钮)的取值如下:
                  OK:只有“确定”按钮
                  CANCEL:只有“取消”按钮
                  OKCANCEL:有“确定”和“取消”按钮
                  YESNO:有“是”和“否”按钮
                  YESNOCANCEL:有“是”、“否”和“取消”按钮
           icons(图标)取值如下:
                  INFO:信息图标
                  WARNING:警告图标
                  QUESTION:询问图标
                  ERROR:错误图标
    六、进度条对话框
        进度条对话框可以说是一个创举,让一个富了现实意义和使用价值的进度条轻松实现,随着进度条的滚动,我们的心情也随之畅快起来。代码赋予我们无穷的活力,让人们的视觉再次受到最强烈的冲击。
     
        进度条对话框也是一个自定义消息框,配置config时添时progress=true即可,同时还可以设置其他相关信息,如进度提示等。Extjs为我们提供的只是一个对话框而已,进度条的滚动还得通过代码实现。下面是进度条的代码示范:
    extjsProgress = function(){
         Ext.MessageBox.show({
               title: '请等待',
               msg: '正在加载项目...',
               progressText: '正在初始化...',
               width:300,
               progress:true, //此属性证明这是一个进度条
               closable:false
           });
     
           var f = function(v){
                return function(){
                    if(v == 12){
                        Ext.MessageBox.hide();
                        Ext.MessageBox.alert('完成', '所有项目加载完成!');
                    }else{
                        var i = v/11;
                        Ext.MessageBox.updateProgress(i, Math.round(100*i)+'% 已完成');
                    }
               };
           };
          
           for(var i = 1; i < 13; i++){
               setTimeout(f(i), i*500);
           }
    }
        在上面的代码中,progressText属性是进度条滚动之前最初的文本,滚动进程由updateProgress(Number value, String progressText)方法来定义,参数value是从0~1之间的小数,表示进度百分比;progressText则表示进度条滚动过程中的文本提示信息,如Ext.MessageBox.updateProgress(i, Math.round(100*i)+'% 已完成');。
    七、让消息框飞出来
        很显然,这是一个动画效果。Extjs允许我们将消息框从指定的位置飞出来,关闭时又飞回去,很炫吧!实现也相当轻松,只要设置animEl选项即可,该选项指定一个标签,即消息框从标签处飞出,关闭后又飞回标签。下面是演示代码:
    extjsAnimal = function(){
         var config = {
                title: "飞出的消息框",
                msg: "这是一个自定义对话框,是飞出来的哦。",
                width: 400,
                multiline: true,
                closable: false,
                buttons: Ext.MessageBox.YESNOCANCEL,
                icon: Ext.MessageBox.QUESTION,
                animEl: "fly"
         };
         Ext.MessageBox.show(config);
    }
           animEl的值为“fly”,这是按钮的id值,在html页面中这样定义:<input type="button" value="Animal" id="fly" onclick="extjsAnimal();"><br>。
    八、小结
        本节是Extjs最简单的内容,和浏览器传统的效果相比,效果更加炫丽动感。一个小小的消息框,Extjs如此注重细节,实在难能可贵。我们有理由相信,富客户端的蓝天,即将徐徐展开。
     
        以下是本章使用的html页面内容:
    <input type="button" value="Alert" onclick="extjsAlert();"><br>
    <input type="button" value="Prompt" onclick="extjsPrompt();"><br>
    <input type="button" value="Comfirm" onclick="extjsComfirm();"><br>
    <input type="button" value="Custom" onclick="extjsCustom();"><br>
    <input type="button" value="Progress" onclick="extjsProgress();"><br>
    <input type="button" value="Animal" id="fly" onclick="extjsAnimal();"><br>
上一篇:Java中的基本数据类型
下一篇:轻松搞定Extjs[连载]——第三章:Ext OOP基础
分享到:

版权所有 ©株洲健坤科技职业培训学校    学校地址:株洲市天元区黄山路205号健坤大厦(天元区消防中队对面)

咨询报名热线:400-8812-866    邮箱地址:4008812866@b.qq.com   备案号: 湘ICP备10202015号  

北大青鸟学费是多少 湖南北大青鸟怎么样
株洲北大青鸟好不好 株洲北大青鸟学费多少 株洲北大青鸟学校这么样
秒速时时彩官方网站