转自: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. 九度oj 题目1057:众数

    题目1057:众数 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:9744 解决:3263 题目描述: 输入20个数,每个数都在1-10之间,求1-10中的众数(众数就是出现次数最多的数, ...

  2. 7-16 一元多项式求导(20 分)(有关while(scanf("%d",&n)!=EOF))

    7-16 一元多项式求导(20 分) 设计函数求一元多项式的导数. 输入格式: 以指数递降方式输入多项式非零项系数和指数(绝对值均为不超过1000的整数).数字间以空格分隔. 输出格式: 以与输入相同 ...

  3. POJ 3348 最直接的凸包问题

    题目大意: 给定一堆树的点,找到能组合成的最大面积,一个物体占50面积,求最多放多少物体 #include <cstdio> #include <cstring> #inclu ...

  4. hdu 4033 状态压缩枚举

    /* 看别人的的思路 搜索搜不出来我太挫了 状态压缩枚举+好的位置 */ #include<stdio.h> #include<string.h> #define N 20 i ...

  5. Python模块:logging、

    logging模块: 很多程序都有记录日志的需求,并且日志中包含的信息既有正常的程序访问日志,还可能有错误.警告等信息输出.Python的logging模块提供了标准的日志接口,你可以通过它存储各种格 ...

  6. hosts.allow和hosts.deny文件

    之前想通过外部主机访问自己主机上的VMWare虚拟机,使用了VMWare的NAT端口映射,经过一番尝试,算是成功了,总结一下. VMWare NAT端口映射就可以将虚拟机上的服务映射成自己主机上的端口 ...

  7. Layui弹出层、日期和时间选择、即时通讯、分页

    Layui弹出层.日期和时间选择.即时通讯.分页 弹层组件文档 - layui.layer 对于弹出层的感觉是:layer 至今仍作为 layui 的代表作,她的受众广泛并非偶然,而是这数年来的坚持. ...

  8. Layui图标

    layui 图标 layui 的所有图标全部采用字体形式,取材于阿里巴巴矢量图标库(iconfont).因此你可以把一个 icon 看作是一个普通的文字,这意味着你直接用 css 控制文字属性,如 c ...

  9. springboot + mybatis 完成图片上传并保存到数据库

    添加依赖 <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons- ...

  10. HDOJ 5381 The sum of gcd 莫队算法

    大神题解: http://blog.csdn.net/u014800748/article/details/47680899 The sum of gcd Time Limit: 2000/1000 ...