Viewport Viewport

　　代表整个浏览器窗口，直接渲染到document.body节点，取代页面中的所有内容。一般作为应用程序主界面.

随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort实例。

Ext.onReady(function(){

        new Ext.Viewport({
            layout: 'border',   //布局
            items:[{region:'north',title:'顶部工具Logo及Banner',height:100},
                   {region:'west',title:'菜单区',width:200},
                   {region:'center',title:'主区域'}]
        });
    });

Window

　　表示应用程序窗口，其实是一个浮动的层，直接调用show方法显示窗口，窗口有关闭按钮； 窗口的关闭直接调用close方法，窗口的隐藏使用hide方法； 使用modal属性来配置模式窗口

　　窗口有一个属性 closeAction来设置到底是close还是hide

　　应用程序创建窗口是比较耗资源的.

　　

　　我们可以创建一个窗口池，以后用的时候拿过来直接使用.

Ext中提供的对话框Ext.MessageBox及Ext.Msg

　　Ext的对话框都封装在Ext.MessageBox类，该类还有一个简写形式即Ext.Msg，可以直接通过Ext.MessageBox或Ext.Msg类直接调用相应的对话框方法来显示漂亮的Ext对话框

　　alert  prompt  confirm  wait  progress  show

<body>
    <a href="javascript:testAlert()">Ext对话框</a>
    <a href="javascript:testConfirm()">Ext确认框</a>
    <a href="javascript:testPrompt()">Ext输入框</a>
    <a href="javascript:testWait()">Ext等待对话框</a>
    <a href="javascript:testProgress()">Ext进度条</a>
    <a href="javascript:testShow()">Ext自定义对话框</a>

</body>
function testAlert(){

    Ext.MessageBox.alert("友情提示：","禁止攀爬!");
}
//  Ext.Msg 是 Ext.MessageBox的别名
function testConfirm(){
    // 要取得Ext对话框的结果，使用回调函数
    Ext.Msg.confirm('友情提示', '是否真的删除?:', function(btn){
        if (btn == 'yes'){
            Ext.Msg.alert("数据已经删除");
        }
    });
}

function testPrompt(){
    Ext.Msg.prompt('友情提示',
            '请输入您的电话:',
            function(btn, text){
                if (btn == 'ok'){
                    Ext.Msg.alert("您的电话:"+text);
                }
            },
            this,   //作用域,默认是window
            50,     // 输入框的高度，也可以设置为true
            'awei'  //默认值
            );
}

// 等待对话框
function testWait(){

    var ret=Ext.MessageBox.wait("正在处理中，请稍候...");
    //3秒后让该对话框消失
    setTimeout(function(){
        ret.hide();
    },3000);
}

//进度条
function testProgress(){

    var ret=Ext.MessageBox.progress("进度条...","正在处理");
    var i=0;
    //每隔500毫秒更新进度条
    var timer=setInterval(function(){
        ret.updateProgress( i+=0.1, (i*100)+"%" );
    },500);
    //结束时清理掉定时器
    setTimeout(function(){
        ret.hide();
        clearInterval(timer);
    },10000);
}

//自定义对话框
function testShow(){

    Ext.Msg.show({
           title:'保存数据',
           msg: '请<font color="red">选择</font>操作?', //这里支持的是html
           buttons: Ext.Msg.YESNOCANCEL,
           fn: doSave,
          // animEl: 'elId',
           icon: Ext.MessageBox.QUESTION
        });
}

function doSave(button,text){
        if(button=='yes'){
        Ext.Msg.alert("数据已经报存");
    }else if(button=='no'){

    }else{

    }
}

03_Ext_Viewport_Window_Dialog的更多相关文章

随机推荐

  1. 横排列表(li)的左右对齐

    效果如下: HTML代码如下: <div class="overdiv"> <ul> <li>1</li> <li>2& ...

  2. Springboot+resteasy定时任务

    定时任务 需求:按每日统计点赞数.评论数.热度的增加量(不是现有量) 1.每天零点执行:首先遍历出user的统计字段 然后插入到新创建的表中. 2.每天一点执行:根据时间段将两表的数据相减创建增量字段 ...

  3. Android 读写文件

    Android 读写文件 Android使用一个非常类似与其他平台上的基于磁盘的文件系统. 这节课讲述如何利用File APIs在Android文件系统中读写文件. File 对象非常适合于流式顺序数 ...

  4. GUI与UI的区别

    GUI 图形用户界面(**Graphical User Interface**,简称 GUI,又称图形用户接口)是指采用图形方式显示的计算机操作用户界面. 与早期计算机使用的命令行界面相比,图形界面对 ...

  5. python+selenium自动化软件测试(第15章)：基础实战（2）

    #coding:utf-8 #for windows/py2.7 from time import sleep from selenium import webdriver browser = web ...

  6. poj 2763 Housewife Wind （树链剖分）

    题目链接:http://poj.org/problem?id=2763 题意: 给定一棵含n个结点的树和树的边权,共有q次操作,分为两种 0 c :求从位置s到c的距离,然后s变成c 1 a b:把第 ...

  7. 网络唤醒原理浅析(Wake On LAN)

    之前我的一篇文章<网络唤醒全攻略(Wake On Lan)>介绍过如何设置远程唤醒电脑,着重于使用,这篇主要从原理方面解析一下当中的奥妙: 原理 将唤醒魔术包发送的被唤醒机器的网卡上,魔术 ...

  8. Java：用Lambda表达式简化代码一例

    之前,调用第3方服务,每个方法都差不多“长”这样, 写起来啰嗦, 改起来麻烦, 还容易改漏. public void authorizeRoleToUser(Long userId, List< ...

  9. CAP和BASE理论

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt370 1. CAP理论 2000年7月,加州大学伯克利分校的Eric Bre ...

  10. Spring事务管理（一）

    对于Spring相信很多做web开发的小活动一定不陌生,Spring中我们经常谈到的就是IOC和AOP,但是对于Spring的事务管理,相信大家一定也很感兴趣,今天我们就探讨一下Spring中的事务管 ...