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. 阿里云ECS部署ES

    背景 最近越来越多的公司把业务搬迁到云上,公司也有这个计划,自己抽时间在阿里云和Azure上做了一些小的尝试,现在把阿里云上部署ES和kibana记录下来.为以后做一个参考,也希望对其他人有帮助. 这 ...

  2. “最美天气”版本II

    抓取实时天气前需要首先获得所有地区的cityCode,因为在最后queryWeather的时候需要传递这个参数. 最美天气获取全部cityCode及cityName的方法: 1.获取34个省及直辖市的 ...

  3. python -- 装饰器的高级应用

    装饰器和装饰器模式装饰器模式是面向对象的一种设计模式,支持将行为动态增加到已经存在的对象上.当装饰一个对象的时候,就表示独立与其他类实例对象,为该对象扩展了新的功能. python的装饰器不是装饰器模 ...

  4. hdu4675 GCD of Sequence

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4675 题意: 给定一个长度为n的序列a,且 1<=a[i]<=m,求分别有多少个序列b,使 ...

  5. java二分查找详解

    二分查找又称折半查找,优点是比较次数少,查找速度快,平均性能好:其缺点是要求待查表为有序表,且插入删除困难.因此,折半查找方法适用于不经常变动而查找频繁的有序列表.首先,假设表中元素是按升序排列,将表 ...

  6. Java对象的创建

    学了很久的java,是时候来一波深入思考了.比如:对象是如何在JVM中创建,并且被使用的.本文主要讲解下new对象的创建过程.要想更深入的了解建议去认认真真的看几遍<深入理解Java虚拟机> ...

  7. LeetCode315—Count of Smaller Numbers After Self—Java版归并算法

    这是我在研究leetcode的solution第一个解决算法时,自己做出的理解,并且为了大家能看懂,做出了详细的注释. 此算法算是剑指Offer36的升级版,都使用的归并算法,但是此处的算法,难度更高 ...

  8. python基础学习（十二）

    模块 前面有简单介绍如何使用import从外部模块获取函数并且为自己的程序所用: >>> import math >>> math.sin(0) #sin为正弦函数 ...

  9. [2013-01-15]The Little Schemer 学习笔记

    <The Little Schemer> FP编程.lisp入门必备 这书貌似没中文版: 有英文pdf版:完整版下载链接 英文不好的,被前几页噎住的,可以先到这里看翻译好的前言部分 看完人 ...

  10. Maven项目下update maven后Eclipse报错：java.lang.ClassNotFoundException: ContextLoaderL

    Maven项目下update maven后Eclipse报错:java.lang.ClassNotFoundException: ContextLoaderL     严重: Error config ...