ExtJS3.0之面板

在学习了HelloWorld之后，下面来看一下面板。这里不再帖出所有代码。

保持HelloWorld中HTML页面内容不变。只里只更改firstJs.js文件。

如下所示：

 

VeiwPort代表整个浏览器显示区域，该对象渲染到页面的body区域，并会随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort实例。看下面的代码：

 

Ext.onReady(function() {
    new Ext.Viewport({
        enableTabScroll : true,
        layout : "fit",
        items : [{
            title : "面板",
            html : "我爱人民币！",
            bbar : [{
                text : "按钮1"
            }, {
                text : "按钮2"
            }]
        }]
    });
});

预览效果不再给出。

Viewport不需要再指定renderTo，而我们也看到Viewport确实填充了整个浏览器显示区域，并会随着浏览器显示区域大小的改变而改改。
Viewport主要用于应用程序的主界面，可以通过使用不同的布局来搭建出不同风格的应用程序主界面。在Viewport上常用的布局有fit、border等，当然在需要的时候其它布局也会常用。看下面的代码：

Ext.onReady(function() {
    new Ext.Viewport({
        enableTabScroll : true,
        layout : "border",
        items : [{
            title : "面板",
            region : "north",
            height : 50,
            html : "

网站后台管理系统!

"
        }, {
            title : "菜单",
            region : "west",
            width : 200,
            collapsible : true,
            html : "菜单栏"
        }, {
            xtype : "tabpanel",
            region : "center",
            items : [{
                title : "面板1"
            }, {
                title : "面板2"
            }]
        }]
    });
});


 

以上代码笔者已经测试通过。