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. SQL 根据生日和日期计算年龄

    FLOOR(datediff(DY,p.Dob,o.RegisterTime)/365

  2. hbase 性能调

    一. HBase的通用优化 1 高可用 在 HBase 中 Hmaster 负责监控 RegionServer 的生命周期,均衡 RegionServer 的负载,如果 Hmaster 挂掉了,那么整 ...

  3. CentOS7.5之Sqoop1.4.7的安装使用

    一 Sqoop简介 Apache Sqoop(TM) 于 2012 年 3 月孵化出来,现在是一个顶级的 Apache 项目.是一种旨在有效地在 Apache Hadoop 和诸如关系数据库等结构化数 ...

  4. python开发之路Day17-算法设计(冒泡排序、选择排序、插入排序、二叉树)

    s12-20160514-day17 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...

  5. RabbitMQ路由类型

    关于RabbitMQ的Exchange类型 参考地址:<RabbitMQ学习系列(四): 几种Exchange 模式> github地址:https://github.com/ChenWe ...

  6. Spark入门2（Spark简析）

    一.Spark核心概念-RDD RDD是弹性分布式数据集,一个RDD由多个partition构成,一个partition对应一个task.RDD的操作分为两种:Trasformation(把一个RDD ...

  7. maven 发布jar包到远程仓库

    有的时候我们需要发布一些自己写的相关jar包到maven私服,供项目组使用. 首先在setting.xml文件添加,这里 注意 要保证该账户有发布的权限 <servers> <ser ...

  8. Spring的模块组成

    Spring的模块组成 1.核心容器:核心容器提供 Spring 框架的基本功能(Spring Core).核心容器的主要组件是 BeanFactory,它是工厂模式的实现. BeanFactory ...

  9. [BZOJ4883][Lydsy1705月赛]棋盘上的守卫(Kruskal)

    对每行每列分别建一个点,问题转为选n+m条边,并给每条边选一个点覆盖,使每个点都被覆盖.也就是最小生成环套树森林. 用和Kruskal一样的方法,将边从小到大排序,若一条边被选入后连通块仍然是一个环套 ...

  10. [Hdu4372] Count the Buildings

    [Hdu4372] Count the Buildings Description There are N buildings standing in a straight line in the C ...