22,Viewport及Window组件使用

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"} ] }); } );

---

 2.

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组件

---

4.