1、Viewport,顶级界面,浏览器显示区域。
代表整个浏览器的应用程序主界面控件。VeiwPort表示整个浏览器显示区域,该对象渲染到页面的body区域,并会随着浏览器显示区域的大小自动改变,一个页面中只能有一个ViewPort实例。看下面的代码:
Ext.onReady(function(){
new Ext.Viewport({
layout:"fit",
items:[{title:"面板",
html:"",
bbar:[{text:"按钮1"},
{text:"按钮2"}]
}]
});
});
2、Viewport特点
Viewport不需要再指定renderTo,而我们也看到Viewport确实填充了整个浏览器显示区域,并会随着浏览器显示区域大小的改变而改改。他有两个特点:
1、创建即可使用。不需要渲染,当组件在创建时会自动渲染到document.body节点。
2、不能使用程序改变该控件的大小,也没有滚动条。
3、只是作为容器组件,没有额外的属性、方法及事件
下面再来看看Viewport的应用场景:
Viewport主要用于应用程序的主界面,可以通过使用不同的布局来搭建出不同风格的应用程序主界面。在Viewport上常用的布局有fit、border等,当然在需要的时候其它布局也可以使用。看下面的代码:
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:"面板1"},
{title:"面板2"}]
}
]
});
});
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时,窗口就会变成一个模态窗口。
分享到:
相关推荐
extjs入门学习,各个组件的使用,包括Observable、Observable、BoxComponent、Container、Panel、Viewport及Window...
Windows DC 的视口与窗口 关系演示
视口位置 获取目标窗口的当前视口位置安装npm install viewport-position用法var viewportPosition = require('viewport-position')viewportPosition(/* (optional) target window object */)// => { top, right, ...
documentElement.clientWidth (而不是window.innerWidth ),因此报告的视口尺寸将排除滚动条尺寸。安装凉亭bower install -S viewport-dimensions npm npm i -S viewport-dimensions (导出一个对象:) var ...
// for small pages with total size less then the viewport var pageW = (scrW) ? winW : scrW; var pageH = (scrH) ? winH : scrH; return {PageW:pageW, PageH:pageH, WinW:winW, WinH:winH}; } ...
每当视口大小更改时,它都使用window侦听器自动更新。用法const SomeComponent = ( ) => { const viewport = useViewport ( ) ; return < > < div> The viewport is currently { viewport . width } pixels wide....
视口宽度.js 用于确定准确的跨浏览器视口宽度的解决方案。 更新 03/07/2015 Chrome、Opera、Safari 和 Firefox 都更新了渲染引擎,以在此问题上... 在 Chrome 和 Safari 中,如果页面上存在滚动条, window.innerWid
Ext3.0的个人笔记及例子,包括按钮,表单及验证,panel,window,TabPanel,treePanel,formPanel,gridPanel,viewPort等主要控件
react-viewport-height React的实用程序,可将100vh设置为等于实际浏览器内部窗口的高度。 由于vh在移动浏览器上有麻烦(主要是由于地址栏),因此有一些技巧可以解决它。 该软件包实现了的一个。用法npm install ...
JavaScript 获取当前页面可视高度和宽度及浏览器宽度和高度的函数 在Web开发中,获取当前页面的可视高度和宽度,以及浏览器的宽度和高度是非常重要的。这篇文章将为大家讲解如何使用JavaScript来获取这些信息。 ...
而获取css-width通过 window.screen.width获取。如iphone6的phys.width为750px,而css-width为375px。 二、明白一个浏览器默认行为。 试想,浏览器如果把电脑端的980px的网页展现在宽度为750px的iphone6手机屏上,...
viewport ; window . agentDetails . zoom ; window . agentDetails . pixelRatio ; window . agentDetails . browser ; window . agentDetails . browserVersion ; window . agentDetails . browserMajorVersion ;...
视口Polyfill 在CSS中为所有视口单位添加Polyfill! VH,VW,VMIN,VMAX。 如何使用它 克隆或下载此仓库 阅读viewportPolyfill.js内部的说明(我保证,这很容易!) 运行节点viewportPolyfill.js ...
meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1" />--> <title>Fanvas Demo</title> <!-- Note: All core fanvas ...
Affects all ContentPanel type controls including Panel, Window, Viewport 48. Removed .UpdateBody() Method. Please use .Update(). 49. Removed <ext:Window> .ShowOnLoad property. Please use .Hidden ...
并且您将在全局 window 对象中拥有一个函数,您可以使用它来发现当前大小: window.viewportIs(size) // return a boolean 其中size是 Bootstrap 大小之一(“xs”、“sm”、“md”或“lg”) 就是这样! :)
// Reset The Current Viewport glMatrixMode(GL_PROJECTION); // Select The Projection Matrix glLoadIdentity(); // Reset The Projection Matrix // Calculate The Aspect Ratio Of The...
// Reset The Current Viewport glMatrixMode(GL_PROJECTION); // Select The Projection Matrix glLoadIdentity(); // Reset The Projection Matrix // Calculate The Aspect Ratio Of The Window ...
Whether you want to create sidebars that remain in the viewport (browser window), add sticky section headings to lists or long articles, or overlap one element with another, this concise ebook will ...
npm install -D use-viewport-sizes 好处 非常轻巧且零依赖-在gzip之后添加1.9kb 无论用例如何,只有一个[removed]处理程序用于订阅无限数量的组件中的任何更改。 可选的防抖动功能,以延迟更新,直到用户停止...