ExtJs 中Viewport的介绍与使用

ExtJs 中Viewport的介绍与使用

VeiwPort 代表整个浏览器显示区域，该对象渲染到页面的body 区域，并会随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort 实例。Viewport 不需要再指定renderTo，而我们也看到Viewport 确实填充了整个浏览器显示区域，并会随着浏览器显示区域大小的改变而改改。Viewport 主要用于应用程序的主界面，可以通过使用不同的布局来搭建出不同风格的应用程序主界面。在Viewport 上常用的布局有fit、border 等，当然在需要的时候其它布局也会常用。

举例1如下:

1. <script type="text/javascript">
2. <!--
3. Ext.onReady(function(){
4. var vport = newExt.Viewport({
5. enableTabScroll:true,
6. layout:"fit",//采用fit布局
7. items:[
8. {
9. title:"面板的标题",
10. html:"面板中的主体内容部分",
11. bbar:[
12. {text:"按钮1"},
13. {text:"按钮2"}]
14. }]
15. });
16. });
17. //-->
18. </script>

效果如下:

举例2：

1. <script type="text/javascript">
2. <!--
3. Ext.onReady(function(){
4. var vport = newExt.Viewport({
5. enableTabScroll:true,
6. layout:"border",//采用border布局
7. items:[
8. {
9. region:"north",
10. height:80,
11. title:"面板的标题(上部分)",
12. html:"<h1>新闻后台管理系统</h1>"
13. },
14. {
15. region:"west",
16. width:120,
17. title:"面板的标题(左部分)",
18. html:"<h1>连接部分</h1>"
19. },
20. {
21. xtype:"tabpanel",//面板的类型
22. region:"center",
23. html:"<h1>显示操作部分</h1>",
24. items:[
25. {title:"新闻管理"},
26. {title:"用户管理"}
27. ]
28. }
29. ]
30. });
31. });
32. //-->
33. </script>

效果如下:

备注:xtype一栏操作