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. Objective-C写出Json文件(可作配置文件)

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC"; color: #008f00 } span. ...

  2. html&css笔记(1)

    本文是在阅读<head first html and css>时记下的一些需要注意的地方. 第3章 浏览器不会显示html文本中的空白符和换行. 标签的属性用来定义一个元素.p53 hre ...

  3. visual studio code 调试nodejs 配置简单HTTP服务器

    介绍 Visual Studio Code是一个轻量级的Web集成开发环境on Linux,Mac and Windows,特别是作为前端人员来了, 多了一个可供选择的生产力工具IDE,调试js代码简 ...

  4. .NET 体系结构（.net core、.net framework、xamarin之间的关系）

    这是一张来自官方的图. 图中.NET FRAMEWORK..NET CORE和XAMARIN是三个不同的运行时,这三个运行时在.NET STANDARD LIBRARY之上,它们都包含一些基础的组件, ...

  5. spring boot / cloud (五) 自签SSL证书以及HTTPS

    spring boot / cloud (五) 自签SSL证书以及HTTPS 前言 什么是HTTPS? HTTPS(全称:Hyper Text Transfer Protocol over Secur ...

  6. 再起航，我的学习笔记之JavaScript设计模式14(桥接模式)

    桥接模式 桥接模式(Bridge): 在系统沿着多个维度变化的同时,又不增加其复杂度并已达到解耦 从定义上看桥接模式的定义十分难以理解,那么我们来通过示例来演示什么是桥接模式. 现在我们需要做一个导航 ...

  7. Andrew Ng机器学习课程笔记--week4(神经网络)

    Neural Networks: Representation 一. 内容概要 Neural Network Model Representation 1 Model Representation 2 ...

  8. find the Nth highest salary（寻找第N高薪水）

    Suppose that you are given the following simple database table called Employee that has 2 columns na ...

  9. python+selenium自动化软件测试(第11章)：持续集成jenkins和GitHub的使用

    11.1 jenkins持续集成环境 相关安装包下载链接:http://pan.baidu.com/s/1qYhmlg4 密码:dcw2赠送jenkins集成selenium环境视频链接http:// ...

  10. 产品经理和Scrum Master都必须是领域专家吗？

    注明:原文来自 Mike Cohn的邮件推送,我已将原文贴在最后供参考,翻译的目的是为了锻炼自己的能力和理解水平,如有版权侵犯,请告之. Scrum Master 和 产品经理应该是领域专家吗?让我们 ...