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的装饰器模式. 其实,python的原生的装饰器的应用比这个要强,要广的. ''' known = {0:0, 1:1} def fibonacci(n): assert(n ...

  2. Asp.net mvc 实时生成缩率图到硬盘

    之前对于缩率图的处理是在图片上传到服务器之后,同步生成两张不同尺寸的缩率供前端调用,刚开始还能满足需求,慢慢的随着前端展示的多样化,缩率图已不能前端展示的需求,所以考虑做一个实时生成图片缩率图服务. ...

  3. Ionic入门二：网格(Grid)页面布局

    ionic 的网格(Grid)和其他大部分框架有所不同,它采用了弹性盒子模型(Flexible Box Model) .而且在移动端,基本上的手机都支持.row 样式指定行,col 样式指定列. 1. ...

  4. 关于ecshop的mobile里user.php登录和注册验证码不显示

    在做ecshop模板的时候由于user.php里的登录和注册是在一个页面里切换的,这就致使这里的登录和注册里的验证码不显示 找到mobile/themesmobile/ecshoptemplate_m ...

  5. Java double 精度

    1. 范围  float和double的范围是由指数的位数来决定的.  float的指数位有8位,而double的指数位有11位,分布如下:  float:  1bit(符号位) 8bits(指数位) ...

  6. 【基础知识】JavaScript基础

    [学习日记]JavaScript基础 1,一般写在<head></head>中(其实可以放到任意位置); 2,弹出对话框 <scripttype="text/j ...

  7. python list的应用

    先看下面的操作 In [2]: lis = [(1,2),(3,4),(5,6)] In [3]: for a,b in lis: ...: if a == 1: ...: print (" ...

  8. Jquery API学习笔记

    学习网站 JQuery API 中文网: http://www.jquery123.com/ 学习一遍API可以更熟练的运用jquery并且拓展思路. 这里只挑选了一些我认为在开发中会用到的一些API ...

  9. 【拉格朗日插值法】【找规律】【高精度】Gym - 101156G - Non-Attacking Queens

    题意:问你n*n的国际象棋棋盘上放3个互不攻击皇后的方案数. oeis……公式见代码内 //a(n) = 5a(n - 1) - 8a(n - 2) + 14a(n - 4) - 14a(n - 5) ...

  10. 【SPFA判断负环】BZOJ1715- [Usaco2006 Dec]Wormholes 虫洞

    [题目大意] 判断一张图中是否存在负环. [思路] dfs版SPFA. #include<bits/stdc++.h> using namespace std; struct edge { ...