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

 ExtJs学习目录

 懒人笔记(1) ExtJs初探

 ExtJs懒人笔记(2) 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",
                width: 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

posted @   楠木大叔  阅读(915)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
点击右上角即可分享
微信分享提示
AI IDE Trae