22,Viewport及Window组件使用

最新推荐文章于 2025-08-18 20:44:42 发布

g710710

最新推荐文章于 2025-08-18 20:44:42 发布

阅读量774

点赞数

分类专栏： Ext 文章标签： border layout function html 浏览器 menu

Ext 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了ExtJS中Viewport的应用及布局配置，展示了如何使用Viewport覆盖整个浏览器窗口，并通过示例详细解释了如何创建带有不同区域的Viewport实例。此外，还探讨了使用Accordion布局的Panel组件来实现可折叠面板的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.Viewport实例

Ext.onReady(function(){ // alert("123"); /*var win=new Ext.ViewPort( { loyout:"border", item:[ {region:"north", height:100, title:"logo and banner" }, { region:"west", width:150, title:"menu" }, { region:"center", title:"main" } ] } );*/ new Ext.Viewport({ title: "Viewport", layout: "border", // defaults: { //bodyStyle: "background-color: #FFFFcc;", //frame: true //}, items: [ //accordion, {region:"north", height:100,title:"logo and banner"}, {region:"west",width:150,title:"menu"}, {region:"center",title:"main"} ] }); } );

Ext.Viewport代表浏览器窗口的整个显示区域，将document body作为渲染对象，它会根据浏览器窗口的大小自动调整自身的尺寸。
在一个页面中只允许出现一个Viewport实例，没有提供对滚动条的支持。

Ext.onReady(function(){ var accordion = new Ext.Panel({ title: "功能分组", layout: "accordion", layoutConfig: { animate: true }, width: 250, minWidth: 100, region: "west", split: false, collapsible: true, items: [ {title:"嵌套面板一", html:"嵌套面板一", iconCls:"save"}, {title:"嵌套面板二", html:"嵌套面板二", iconCls:"search"}, {title:"嵌套面板三", html:"嵌套面板三", iconCls:"back"} ] }); new Ext.Viewport({ title: "Viewport", layout: "border", defaults: { bodyStyle: "background-color: #FFFFFF;", frame: true }, items: [ accordion, {region:"north", height:100}, {region:"center"} ] }); });

3.window组件