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

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时，窗口就会变成一个模态窗口。

转载于:https://www.cnblogs.com/mingforyou/p/3282033.html

视图Ext.Viewport和窗口Ext.Window用法相关推荐

第3章[3.6] 说透Ext JS的窗口及对话框用法
关于浏览器的窗口和对话框的基本介绍可以参考: HTML窗口与对话框窗口类 Ext.window.Window Ext JS的窗口更类似于HTML的对话框, 但是Ext JS的窗口可以像一般的视图一样 ...
【Android 逆向】IDA 工具使用 ( IDA 32 位 / 64 位版本 | 汇编代码视图 IDA View-A | 字符串窗口 Strings window )
文章目录一.IDA 32 位 / 64 位版本二.汇编代码视图 IDA View-A 三.字符串窗口 Strings window 一.IDA 32 位 / 64 位版本 IDA 安装完毕后 ...
ExtJS面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)
通过此文能学习到如下内容 1.创建一个简单的面板 Ext.Panel 2.制作一个可以拖动的面板 Ext.Panel 3 .使用选项卡面板 3.使用Ext.Viewport搭一个简单布局(用一个小例子 ...
Ext.form.TextField组件的基本用法
本文主要介绍Ext.form.TextField组件的基本用法: <form id="form1" runat="server"> <div& ...
linux 弹出窗口,实现弹出窗口的window.open用法详解(js代码)
实现弹出窗口的window.open用法详解(js代码) [1.最基本的弹出窗口代码] 其实代码非常简单: 因为这是一段javascripts代码,所以它们应该放在 cript">标签 ...
Extjs Window用法详解 3 打印具体应用，是否关掉打印预览的界面
Extjs Window用法详解 3 打印具体应用,是否关掉打印预览的界面 Extjs 中的按钮元素 { xtype: 'buttongroup', title: '打印', items: [ me. ...
【Android 逆向】IDA 工具使用 ( 函数窗口 Function window | 创建引用图 Xrefs graph to | 创建调用图 Xrefs graph from )
文章目录一.函数窗口 Function window 二.创建引用图 Xrefs graph to 三.创建调用图 Xrefs graph from 一.函数窗口 Function window 左 ...
模式窗口showModalDialog的用法总结
最近几天一直在处理模式窗口的问题,索性写了这篇总结,以供参考: 1.打开窗口: var handle = window.showModalDialog(url, objects, feathers); ...
关闭窗口（window.close）
关闭窗口(window.close) close()关闭窗口用法: window.close(); //关闭本窗口或 <窗口对象>.close(); //关闭指定的窗口例如:关闭新建 ...
java ext.dirs_关于-Djava.ext.dirs使用及JAVA 命令参数详解System.setProperty
大家在linux环境下使用命令行执行java程序时,经常要使用到大量外部的jar包或class文件,一般我们有哪些方式可以用呢? -classpath,命令格式:# java -classpath , ...

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

视图Ext.Viewport和窗口Ext.Window用法相关推荐

最新文章

热门文章