03_Ext_Viewport_Window

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的更多相关文章

随机推荐

linux命令后台执行
fg.bg.jobs.&.nohup.ctrl+z.ctrl+c 命令一.& 加在一个命令的最后,可以把这个命令放到后台执行,如 watch -n 10 sh test.sh &am ...
BotVS开发基础—2.5 策略交互
一.代码部分 isOpen = False; # 是否开仓 price = 0; # 全局变量价格 amount = 0; # 全局变量下单量 def exec_command(command) ...
Python | 多种编码文件（中文）乱码问题解决
问题线索 1 可以知道的是,文本文件的默认编码并不是utf8. 我们打开一个文本文件,并点击另存为 2 我们在新窗口的编码一栏看到默认编码是ANSI.先不管这个编码是什么编码,但是通过下拉列表我们 ...
STL中map的用法
map是STL的一个关联容器,它提供一对一(其中第一个可以称为关键字,每个关键字只能在map中出现一次,第二个可能称为该关键字的值)的数据处理能力,由于这个特性,它完成有可能在我们处理一对一数据的时候 ...
迈向angularjs2系列(4):脏值检测机制
目录一: 概念简介脏值检测,简单的说就是在MVC的构架中,视图会通过模型的change事件来更新自己. 脏值检测的核心代码是观察者模式的实现,其机制会执行digest循环,在特定UI组件的上下文执 ...
Thinkjs学习2—数据库的配置
以github登录认证为例,说明如何通过mvc三部分的配合,实现这个功能. 要实现的功能:首页判断用户是否登录,如果没有登录,显示登录界面,用户点击按钮进入github登录验证,并保存用户的信息,登录 ...
使用idea和studio进行调试的方法
新入职一个公司,使用得IDE发生了一些变化 ,对于idea的使用,之前有提到过,今天主要的内容是使用idea和studio进行调试的快捷键. 虽然现在计算机开发的语言多种多样,但是使用C#写客户端,使 ...
web安全普及：通俗易懂，如何让网站变得更安全？以实例来讲述网站入侵原理及防护。
本篇以我自己的网站[http://www.1996v.com]为例来通俗易懂的讲述如何防止网站被入侵,如何让网站更安全. 要想足够安全,首先得知道其中的道理. 本文例子通俗易懂,从"破解网站 ...
浅读K-means
百度百科释义为 K-means算法是硬聚类算法,是典型的基于原型的目标函数聚类方法的代表,它是数据点到原型的某种距离作为优化的目标函数,利用函数求极值的方法得到迭代运算的调整规则.K-means算法以 ...
java 读取json
http://blog.csdn.net/5iasp/article/details/38545875 private void readAccount() throws IOException { ...

03_Ext_Viewport_Window_Dialog

03_Ext_Viewport_Window_Dialog的更多相关文章

随机推荐

热门专题