大佬教程收集整理的这篇文章主要介绍了视图Ext.Viewport和窗口Ext.Window用法,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
视图Ext.Viewport和窗口Ext.Window用法.
<script type="text/javascript"> Ext.onReady(function(){ new Ext.Viewport({ layout: "fit",items: [{ title: "面板",html: "",bbar: [{ text: "按钮一" },{ text: "按钮二" }] }] }); }); </script>
Viewport不需要再指定renderTo,而我们也看到Viewport确实填充了整个浏览器显示区域,并会随着浏览器显示区域大小的改变而改改。他有三个特点:
1)、创建即可使用。不需要渲染,当组件在创建时会自动渲染到document.body节点。
2)、不能使用程序改变该控件的大小,也没有滚动条。
下面再来看看Viewport的应用场景:
Viewport主要用于应用程序的主界面,可以通过使用不同的布局来搭建出不同风格的应用程序主界面。在Viewport上常用的布局有fit、border等,当然在需要的时候其它布局也可以使用。看下面的代码:
<script type="text/javascript"> Ext.onReady(function(){ new Ext.Viewport({ enableTabScroll: true,layout: "border",region: "north",height: 50,html: "<h1>网站后台管理系统!</h1>" },{ title:"菜单",region:"West",width:200,collapsible:true,html:"菜单栏" },{ xtype: "tabpanel",region: "center",items: [{ title: "面板一" },{ title: "面板二" }] }] }); }); </script>显示效果如下:
我们来讲窗口Window控件,他可以用来表示应用程序中的一个窗口,在窗口中可以放置种种界面元素。窗口Ext.Window的父类是Ext.Panel,因此窗口其实是一种特殊的面板Panel。窗口包含了浮动、可拖动、可关闭、最大化、最小化等特性。
由于窗口是总是顶级容器,因此一般情况下我都是直接使用New操作符来创建一个Ext.Window对象来使用窗口。窗口中的内容与面板一样,可以是各种各样的Ext组件或控件元素,也可以是html片段或指定url中的html内容。由于窗口是一种特殊的面板,因此面板的能用特性对窗口仍然适用。相对于面板Ext.Panel来说,他不需要指定渲染目标,也就是不需要指定渲染到页面中的某一个节点。当调用窗口的show方法的时候,他会自动把窗口渲染(render)到当前文档的body节点中,并使该面板浮动在页面中,使得窗口不依赖于其它的父容器而存在。
窗口的隐藏及关闭。在程序中我们可以直接调用窗口对象的相关方法来实现窗口的隐藏及关闭操作。其中hide()方法用来隐藏窗口,而close()方法则用来直接关闭并销毁窗口。如果程序窗口在后面的程序中不需要重新显示,则应该使用hide()方法,这样可以节省再次初始化这个窗口所产生的资源消耗;如果窗口在后面的程序中不需要重新显示,则应该调用close()来关闭窗口,从而释放窗口对象所占用的系统资源。
默认情况下,窗口的标题工具栏中会包括一个关闭按钮,点击该按钮会执行窗口的关闭或隐藏操作。
以上是大佬教程为你收集整理的视图Ext.Viewport和窗口Ext.Window用法全部内容,希望文章能够帮你解决视图Ext.Viewport和窗口Ext.Window用法所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。