转自: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. NioEventLoop.run select处理IO事件(boss/worker)流程:

    NioEventLoop.run select处理IO事件(boss/worker)流程:processSelectedKeysprocessSelectedKeysOptimizedprocessS ...

  2. Mybatis_HelloWorld

    [梗概] 1.根据XML配置文件(全局配置文件,有数据源的一些运行信息)创建一个SqlSessionFactory对象. 2.sql映射文件:配置了每一个sql以及sql的封装规则. 3.将sql映射 ...

  3. 【03】AJAX 向服务器发送请求

    AJAX 向服务器发送请求   创建 XMLHttpRequest 对象后,就可以向服务器发送请求了. XMLHttpRequest 对象的 open() 方法和 send() 方法用来向服务器发送请 ...

  4. [BZOJ1179] [Apio2009]Atm(tarjan缩点 + spfa)

    传送门 题意 N个点M条边的有向图 每个点有点权 从某一个结点出发 问能获得的最大点权和 一个点的点权最多被计算一次 N<=500000 M<=500000 思路 先tarjan缩点,然后 ...

  5. HDU 4944

    FSF’s game Problem Description FSF has programmed a game.In this game, players need to divide a rect ...

  6. requests模块发送POST请求

    在HTTP协议中,post提交的数据必须放在消息主体中,但是协议中并没有规定必须使用什么编码方式,从而导致了 提交方式 的不同.服务端根据请求头中的 Content-Type 字段来获知请求中的消息主 ...

  7. Redis 配置【十】

    参考:http://www.runoob.com/redis/redis-conf.html Redis 的配置文件位于 Redis 安装目录下,文件名为 redis.conf. 你可以通过 CONF ...

  8. POJ 2828 Buy Tickets (线段树 || 树状数组)

    题目大意 一些小朋友在排队,每次来一个人,第i个人会插到第x个人的后面.权值为y.保证x∈[0,i-1]. 按照最后的队伍顺序,依次输出每个人的权值. 解题分析 好气吖.本来是在做splay练习,然后 ...

  9. Delphi XE4 inline 的用法

    为了提高应用程序的性能,可以用inline声明一个函数过过程,对于声明为inline的过程,编译器在编译时,会取代正常的过程调用方式,取而代之是直接把这个函数的编译代码拿过来生成到调用该过程的地方,有 ...

  10. excel 合并 单元格内容

    刚刚有人问怎么合并单元格内容,正好excel 我也不会,顺便查查记录一下 1.假设有两个单元格如下:           单元格1 单元格2           2. 在一个空白单元格输入 =( 这代 ...