ExtJs懒人笔记(2) ExtJs页面布局

ExtJs学习目录

懒人笔记(1) ExtJs初探

ExtJs懒人笔记(3) 动态Grid的实现

页面布局，对于做Web开发者来说是一定不会陌生的，而这些一般也是由前台开发人员完成的。我以前也是和前台开发人员一起合作完成一些网站，

但是让我一个人设计前台的布局，就有点犯难了。今天就简单介绍一下如何使用ExtJs的Panel来构造一个简单的页面布局。

从官方给的API可以看到Ext.Panel类继承自Ext.Container，很显然就是一个容器，我们常称为面板。通俗来讲，面板相当于一张干净的白纸，如果

直接在上面添加内容，将很难控制面板中内容的显示位置，面板元素越多就越显得凌乱，所以需要在面板上划分不同的区域，将面板内容展示到希望的位置上。

Panel在ExtJs中的地位很重要，使用很广泛。Panel就像一个容器，里面可以嵌套很多panel，还有toolBar 之类的东西。好吧，废话不多说，以实用为主。

先看效果1

效果2

代码：

View Code

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/Content/ext-3.4.0/resources/css/ext-all.css" />
    <script type="text/javascript" src="http://www.cnblogs.com/Content/ext-3.4.0/adapter/ext/ext-base.js"></script>
    <script src="http://www.cnblogs.com/Content/ext-3.4.0/ext-all.js" type="text/javascript"></script>
    <title>第二堂课——ExrJsPanel使用</title>
    <script type="text/javascript" language="javascript">
        Ext.onReady(function () {
            Ext.Msg.alert("测试", "测试");

            var pnNorth = new Ext.Panel({
                id: 'pnNorth',
                // autoWidth: true,
                frame: true,
                region: 'north',
                html: '<div style="background-image:url(../images/logo.gif); height:50px;"><h1>顶部</h1></div>',
                tbar: [
                {
                    text: 'btn1',
                    handler: function () {
                        Ext.Msg.alert("brn1","你点击了brn1");
                    }
                }
                ]
            });

            var pnSouth = new Ext.Panel({
                id: 'pnSouth',
                // autoWidth: true,
                frame: true,
                region: 'south',
                html: '<h1>底部</h1></div>'
            });


            var pnWest = new Ext.Panel({
                id: "pnWest",
                 200,
                height: 'auto',
                split: true, //显示分隔条
                region: 'west',
                collapsible: true,
                items:
                    {
                        title: "面板1",
                        html: "<div id=\"dr\"></div>"
                    },
                html: '<h1>左部</h1>'
            });



            var pnCenter = new Ext.TabPanel({
                region: 'center',
                activeTab: 0,
                html: '<h1>中部</h1>'
            });




            var vp = new Ext.Viewport({
                layout: "border",
                items: [
                        pnNorth,
                        pnWest,
                        pnCenter,
                        pnSouth
                    ]
            });

        });
    </script>
</head>
<body>
    <div>
    </div>
</body>
</html>

转载请注明出处：Good_Luck