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. Python 离线环境

    一.应用场景 比如:对于数据安全要求比较严格的机房,服务器是不允许上网的.那么我现在开发了一套python程序,需要一些模块,怎么运行? 二.离线包制作 有2个解决方案: 1. 使用requireme ...

  2. Python学习笔记：一手漂亮的Python函数

    使用类和函数定义模型 函数是抽象和封装的基本方法之一 重构函数  -- 命名合理  -- 具有单一功能  -- 包含文档注释  -- 返回一个值  -- 代码不超过 50 行  -- 幂等函数,尽可能 ...

  3. 防止一个exe被打开多次

    mutex有一个名字,如果这个exe已经打开了,createNew返回的就是false,程序就退出了. 这是个wpf application的例子 protected override void On ...

  4. 【BZOJ】1061: [Noi2008]志愿者招募

    题解 可能是世界上最裸的一个单纯形 (话说全幺模矩阵是啥我到现在都不知道) 假装我们已经看过了算导,或者xxx的论文,知道了单纯形是怎么实现的 扔一个blog走掉..https://www.cnblo ...

  5. 如何让 C++ 和 C# 一样易用，而且效率更高？

    (未完成,待续..) 第一章:C++基本功 1. 养成良好的编码习惯. 2. 堆上的资源随用随还,严格控制生命周期. 第二章:一些调试心得 1. 在VisualStudio环境下,曾出现 Detect ...

  6. Python 中的语句

    上一节已经了解到了Python中的基本数据类型和一些基本的操作,本节就大致讲一下关于Python中的语句的相关问题. 我们熟悉的print()语句可能是这样的.print('YJK923') or p ...

  7. Oracle 默认的几个登陆用户名和密码

    默认用户有这么几个,system,sys,scott,hr ,一般scott 和hr 作为你的练习用户.system的默认密码是 manager sys的默认密码是 change_on_install ...

  8. 日报 18/07/15 Java 性能优化

    尽量指定类和方法的final修饰符 带有final修饰符的类是不可派生的 在java核心api中 有许多应用final的例子 例如 java.lang.string整个类都是final的 为类指定fi ...

  9. alpha冲刺阶段博客集合

    作业格式 课程名称:软件工程1916|W(福州大学) 作业要求:项目Alpha冲刺(团队) 团队名称: 那周余嘉熊掌将得队 作业目标:作业集合 团队信息: 队员学号 队员姓名 博客地址 备注 2216 ...

  10. bzoj 2150 最小路径覆盖

    最小路径覆盖问题是:给定一个DAG,该DAG的一个路径覆盖是一个路径的集合,使得每个点属于且仅属于其中一条路径,问题就是求一个大小最小的路径集合. 做法是将每个点A拆成两个点A1,A2,如果A-> ...