zoukankan      html  css  js  c++  java
  • ExtJS学习之MessageBox

    MessageBox为ExtJS中的消息对话框,包括alert  confirm prompt show四种。

      

    1.index.html

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
     2 <html>
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     5 
     6 <!-- 引入css文件 -->
     7 <link rel="styleSheet"
     8     href="extjs/resources/css/ext-all.css">
     9 <!-- 引入js文件 -->
    10 <script type="text/javascript" charset="UTF-8" src="extjs/ext-all-debug.js"></script>
    11 <script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
    12 
    13 <script type="text/javascript" src="jquery-1.11.2.js"></script>
    14 <script type="text/javascript" src="index.js"></script>
    15 
    16     <title>Ext JS 4.1</title>
    17 </head>
    18 <body>
    19     <h2>Ext JS 4.1</h2>
    20     <input type="button" value="confirmShow" onclick="confirmShow();"/><br>
    21     <input type="button" value="promptShow" onclick="promptShow();"/><br>
    22     <input type="button" value="waitShow" onclick="waitShow();"/><br>
    23     <input type="button" value="showShow" onclick="showShow();"/><br>
    24 </body>
    25 </html>

    2.index.js

     1 Ext.onReady(function(){   
     2     Ext.Msg.alert('Status', 'Changes saved successfully.');
     3 });
     4 function confirmShow(){
     5     Ext.Msg.confirm('提示信息!','输入成功!',function(op){
     6         if(op == 'yes'){
     7             alert('确认了!');
     8             console.info(op);
     9         } else {
    10             alert('取消了!');
    11         }
    12     });
    13 }
    14 function promptShow(){
    15     Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
    16         if (btn == 'ok'){
    17             Ext.MessageBox.alert('提示信息!','输入成功!输入了:'+text);
    18         }
    19     });
    20 }
    21 function waitShow(){
    22     Ext.Msg.wait('提示信息','请等待!' ,{
    23        interval: 100,             //执行进度条的间隔时间
    24        duration: 4000,            //总时长
    25        increment: 40,            //执行进度条的次数(分几次执行)
    26        text: '下载中,请稍后...',    //进度条上的文字
    27        scope: this,
    28        fn: function(){
    29            Ext.MessageBox.alert('提示信息!','下载成功!');
    30            //Ext.MessageBox.hide();
    31        },
    32        animate:true                //动画效果
    33 });
    34 }
    35 function showShow(){
    36     Ext.Msg.show({
    37         title:'自定义提示框' , 
    38         msg:'内容' , 
    39         300 , 
    40         height:200 ,
    41         buttons:Ext.Msg.YES ,//OKCANCEL  YESNOCANCEL YES NO
    42         icon:Ext.Msg.WARNING        // ERROR INFO QUESTION  WARNING
    43     });
    44 }
  • 相关阅读:
    我的openwrt学习笔记(四):OpenWrt源码下载
    算法系列之“汉若塔”
    尖峰在线Oracle OCM实战 --开创国内Dtrace先河!
    Android开发屏幕适配知识点
    【cocos2d-js官方文档】十九、Cocos2d-JS单文件引擎使用指引
    PHP重载
    作为一个在城市打拼的人。
    关于马云最帅的照片是哪一张?!你们感受下!哈哈哈哈!(10P)
    Banana PI (香蕉派) 安装 ubuntu-core-14 最小核心的操作步骤
    (转载)偏序集的Dilworth定理学习
  • 原文地址:https://www.cnblogs.com/taozhiye/p/6626638.html
Copyright © 2011-2022 走看看