转自:http://www.cnblogs.com/linjiqin/archive/2011/06/22/2087003.html

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

1、Viewport,顶级界面,浏览器显示区域。

代表整个浏览器的应用程序主界面控件。VeiwPort表示整个浏览器显示区域,该对象渲染到页面的body区域,并会随着浏览器显示区域的大小自动改变,一个页面中只能有一个ViewPort实例。看下面的代码:
  1. <script type="text/javascript">
  2. Ext.onReady(function(){
  3. new Ext.Viewport({
  4. layout: "fit",
  5. items: [{
  6. title: "面板",
  7. html: "",
  8. bbar: [{
  9. text: "按钮一"
  10. },{
  11. text: "按钮二"
  12. }]
  13. }]
  14. });
  15. });
  16. </script>

显示效果:

2、Viewport特点

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

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

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

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

下面再来看看Viewport的应用场景:

Viewport主要用于应用程序的主界面,可以通过使用不同的布局来搭建出不同风格的应用程序主界面。在Viewport上常用的布局有fit、border等,当然在需要的时候其它布局也可以使用。看下面的代码:

  1. <script type="text/javascript">
  2. Ext.onReady(function(){
  3. new Ext.Viewport({
  4. enableTabScroll: true,
  5. layout: "border",
  6. items: [{
  7. title: "面板",
  8. region: "north",
  9. height: 50,
  10. html: "<h1>网站后台管理系统!</h1>"
  11. }, {
  12. title:"菜单",
  13. region:"west",
  14. width:200,
  15. collapsible:true,
  16. html:"菜单栏"
  17. }, {
  18. xtype: "tabpanel",
  19. region: "center",
  20. items: [{
  21. title: "面板一"
  22. }, {
  23. title: "面板二"
  24. }]
  25. }]
  26. });
  27. });
  28. </script>

显示效果如下:

3、窗口Window

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

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

4、窗口关闭及隐藏

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

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

5、模态及非模态窗口

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

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

转载来自 http://www.cnblogs.com/linjiqin/archive/2011/06/22/2087003.html

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

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

    Viewport不需要再指定renderTo,而我们也看到Viewport确实填充了整个浏览器显示区域,并会随着浏览器显示区域大小的改变而改改.他有三个特点: 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.Viewport 实现左三右一排列方式。

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

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

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

  7. opener 属性是一个可读可写的属性,可返回对创建该窗口的 Window 对象的引用

    opener 属性是一个可读可写的属性,可返回对创建该窗口的 Window 对象的引用

  8. 【转】分析器窗口 Profiler window

    转自unity圣典: http://game.ceeger.com/Manual/ProfilerWindow.html http://game.ceeger.com/Manual/Profiler. ...

  9. javascript 打开新窗口(window.open)

    打开新窗口(window.open) open() 方法可以查找一个已经存在或者新建的浏览器窗口. 语法: window.open([URL], [窗口名称], [参数字符串]) 参数说明: URL: ...

随机推荐

  1. c++中的三角函数

    c++中想求cos或sin: 1.首先得包含头文件,include<math.h> 2.sin(),cos(),中是弧度数,即若是角度a,则应写成cou<<sin(a*pi/1 ...

  2. HTML、CSS常用技巧

    一.HTML 在介绍HTML之前,我们先看一下HTML的文档树结构,主要包括哪些: (一).头部标签 1,Doctype Doctype告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档 ...

  3. stm32 调试时卡在LDR R0, =SystemInit

    网上找到的可能的原因 堆栈空间默认的太小 默认startup_stm32f10x_hd.s中 Stack_Size EQU 0x00000400,如果改大之后,可能调试就可以正常运行. 出现最多的情况 ...

  4. JavaScript学习---简易图片轮播

    效果如下: 图片定时轮播 点击左右控制显示下一张或上一张图片 index.html文件 <html> <head> <title> js编写实现幻灯片效果 < ...

  5. js变量类型详解

    <html> <title>js变量类型详解</title> <meta http-equiv="content-type" conten ...

  6. ie下php session不能用(域名的合法定义)

    今天遇到了一个奇怪的问题.应用程序的后台ie下居然无法登陆,老是提示验证码不正确,明明输入是正确的.于是抓包.测试.调试,最终发现罪魁祸首phpsessionid在ie下没有办法写入.研究了一下,发现 ...

  7. 【BZOJ4710】分特产(容斥原理,组合计数)

    题意:有m种特产,第i种有a[i]个 有n个同学分特产,要求: 1.恰好分完 2.每个人至少要分到一个 求方案数模10^9+7 n,m,a[i]<=1000 思路:WYZ作业 首先考虑对于每一种 ...

  8. 莫比乌斯反演套路三、四--BZOJ2154: Crash的数字表格 && BZOJ2693: jzptab

    t<=1e4个询问每次问n,m<=1e7,$\sum_{1\leqslant x \leqslant n,1 \leqslant y\leqslant m}lcm(x,y)$. 首先题目要 ...

  9. Mayor's posters POJ - 2528

    The citizens of Bytetown, AB, could not stand that the candidates in the mayoral election campaign h ...

  10. JAVA初级复习知识点归纳

    JDK的安装: 下载.安装 配置环境变量 a) path:.;%JAVA_HOME%\bin; b) JAVA_HOME:JDK的安装目录 c) classpath JDK和JRE和JVM: JAVA ...