Viewport不需要再指定renderTo，而我们也看到Viewport确实填充了整个浏览器显示区域，并会随着浏览器显示区域大小的改变而改改。他有三个特点：

1）、创建即可使用。不需要渲染，当组件在创建时会自动渲染到document.body节点。

2）、不能使用程序改变该控件的大小，也没有滚动条。

3）、只是作为容器组件，没有额外的属性、方法及事件

<HTML>

<HEAD>

<TITLE>布局</TITLE>

<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />

<script type="text/javascript" src="Ext/ext-base.js"></script>

<script type="text/javascript" src="Ext/ext-all.js"></script>

<script type="text/javascript" src="Ext/ext-lang-zh_CN.js" charset="utf-8"></script>

</HEAD>

<script type="text/javascript">

    Ext.onReady(function(){

       new Ext.Viewport({

          enableTabScroll: true,

          layout: "border",

          items: [{

             title: "面板",

             region: "north",

             height: 50,

             html: "<h1>网站后台管理系统!</h1>"

          }, {

             title:"菜单",

             region:"west",

             width:200,

             collapsible:true,

             html:"菜单栏"

          }, {

             xtype: "tabpanel",

             region: "center",

             items: [{

                title: "面板一"

             }, {

                title: "面板二"

             }]

          }]

       });

    });

</script>

<BODY>

    <script type="text/javascript" src="Ext/examples/shared/examples.js"></script>

</BODY>

</HTML>

窗口Window

我们来讲窗口Window控件，他可以用来表示应用程序中的一个窗口，在窗口中可以放置种种界面元素。窗口Ext.Window的父类是Ext.Panel，因此窗口其实是一种特殊的面板Panel。窗口包含了浮动、可拖动、可关闭、最大化、最小化等特性。

由于窗口是总是顶级容器，因此一般情况下我都是直接使用new操作符来创建一个Ext.Window对象来使用窗口。窗口中的内容与面板一样，可以是各种各样的Ext组件或控件元素，也可以是html片段或指定url中的html内容。由于窗口是一种特殊的面板，因此面板的能用特性对窗口仍然适用。相对于面板Ext.Panel来说，他不需要指定渲染目标，也就是不需要指定渲染到页面中的某一个节点。当调用窗口的show方法的时候，他会自动把窗口渲染(render)到当前文档的body节点中，并使该面板浮动在页面中，使得窗口不依赖于其它的父容器而存在。

窗口关闭及隐藏

窗口的隐藏及关闭。在程序中我们可以直接调用窗口对象的相关方法来实现窗口的隐藏及关闭操作。其中hide()方法用来隐藏窗口，而close()方法则用来直接关闭并销毁窗口。如果程序窗口在后面的程序中不需要重新显示，则应该使用hide()方法，这样可以节省再次初始化这个窗口所产生的资源消耗；如果窗口在后面的程序中不需要重新显示，则应该调用close()来关闭窗口，从而释放窗口对象所占用的系统资源。

默认情况下，窗口的标题工具栏中会包括一个关闭按钮，点击该按钮会执行窗口的关闭或隐藏操作。

模态及非模态窗口

窗口可以分为模态窗口及非模态窗口两种类型，所谓模态窗口就是指当该窗口打开时，除了本窗口中的内容可以操作以外，窗口以外的控件、界面元素及内容都处于不可用状态，只有当关闭该窗口后，这些变成不可用状态的元素及内容才能恢复成为可用状态；而非模态窗口打开时，不影响窗口以外的其它元素的可操作及可用状态。

在配置选项中通过modal选项来指定窗口是否属于模式窗口。默认情况下的窗口都是非模态窗口，当把modal属性设置为true时，窗口就会变成一个模态窗口。

视图Ext.Viewport和窗口Ext.Window用法的更多相关文章

  1. 18. 视图Ext.Viewport和窗口Ext.Window用法

    转自:http://www.cnblogs.com/linjiqin/archive/2011/06/22/2087003.html 视图Ext.Viewport和窗口Ext.Window用法. 1. ...

  2. [Phonegap+Sencha Touch] 移动开发26 Android下的sencha touch程序，转屏时，Ext.Viewport不能触发orientationchange事件的解决的方法

    Sencha touch 2.4.2 已经解决问题了. 比方你为Ext.Viewport的orientationchange事件加入了一个监听方法: Ext.Viewport.on('orientat ...

  3. Ext viewport的渲染

    Ext viewport的渲染 1.在app.js里创建 Ext.application({ name: 'MySecurity', extend: 'MySecurity.Application', ...

  4. ExtJS前端框架EXT弹出窗口事件

    https://blog.csdn.net/alsyuan/article/details/73240841 Ext.MessageBox.alert()Ext.MessageBox.alert()提 ...

  5. 谈谈Ext JS的组件——布局的用法

    概述 在Ext JS中.包括两类布局:组件类布局和容器类布局.由于有些组件是有不同的组件组合而成的,如字段就由标题和输入框构成,他们之间也是存在布局关系的,而这就须要组件类布局来处理组件内自己特有的布 ...

  6. 98.Ext.form.Label组件的基本用法

    转自:https://www.cnblogs.com/kelly/archive/2009/06/05/1496897.html 本篇介绍Ext.form.Label组件的基本用法: 这里通过上一篇介 ...

  7. 【技能】Ext.Viewport 实现左三右一排列方式。

    1.Extjs 布局非常是灵活.可是吐槽下CSS,太难重写,想自己重构一套都难哎... var viewport = new Ext.Viewport({ layout:'border', items ...

  8. 谈谈Ext JS的组件——布局的用法续一

    盒子布局 盒子布局主要作用是以水平(Ext.layout.container.HBox)或垂直方式(Ext.layout.container.VBox)来划分容器区域.这也是比較常有的布局方式. 使用 ...

  9. Extjs Window用法详解

    今天我们来介绍一下Extjs中一个常用的控件Window.Window的作用是在页面中创建一个窗口,这个窗口作为容器,可以在它里面加入grid.form等控件,从而来实现更加复杂的界面逻辑. 本文的示 ...

随机推荐

  1. Jmeter的接口测试简介

    一.安装Jmeter                                                          Jmeter官方首页:http://jmeter.apache. ...

  2. 使用PHP写了一个图片分割等份工具，便于前台页面切图时使用。

    目的: 由于网站更新活动较频繁,其大多数以静态图片为主,设计人员在除了设计图后都要给前端制作人员再次切图从而达到页面加载图片缓慢的问题,为了减少工作量做了该工具. 功能: 上传一张图,将其分割成指定等 ...

  3. Asp.Net Core2.0允许跨域请求设置

    1.services /// <summary> /// /// </summary> /// <param name="services">& ...

  4. 关于日志API接口中流量的使用。

    现状: 目前服务器使用带宽是2M,那么最大上行流量应该是250kb/s,而通过日志发现目前最大并发流量是350kb/s. 问题: 看到以上的结果时,我当时的疑问是最大并发流量超过了服务器最大上行流量, ...

  5. 002 使用Appender扩展logger框架

    这个地方,在看公司的源代码的时候,写的知识点: 现在再看,竟然不是太懂,重新写一份新的文档,外加示例说明. 一:说明 1.log4j 环境的三个主要组件: logger(日志记录器):控制要启用或禁用 ...

  6. Ubuntu 17.04 搭建 NodeJS

    可以在云主机上执行以下的命令: apt-get update apt-get install -y python-software-properties software-properties-com ...

  7. thinkphp3.2路由美化，url简化

    thinkphp的路由功能很实用也很强大,可以简化url,有强大的正则匹配,可以做成任何想要的url样式. 在前台的config.php配置文件中: 1.首先开启路由 1 'URL_ROUTER_ON ...

  8. HDU - 1027 Ignatius and the Princess II 全排列

    Ignatius and the Princess II Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K ( ...

  9. JAVAEE——宜立方商城13：订单系统实现、订单生成、Mycat数据库分片

    1. 学习计划 1.订单系统实现 2.订单生成 3.Mycat数据库分片 2. 订单系统 2.1. 功能分析 1.在购物车页面点击“去结算”按钮,跳转到订单确认页面 a) 必须要求用户登录 b) 使用 ...

  10. eclipse使用小技巧

    1.eclipse中SVN无版本信息显示,window-preference-general-appeerance-label decoration-svn勾上,显示有关项目中受 SVN 控制的资源的 ...