ExtJs Ext.panel.Panel和Ext.container.Viewport布局问题

 

  • Ext.container.Viewport
  • Ext.panel.Panel

Viewport 它的布局会占用整个 body,也应该是这样，它会随着浏览器的高度和宽度的变化而变化。

Panel 布局时需要提供一定的高度和宽度值，这个值是固定的，它不会随着浏览器的变化而变化。

接下来，我来演示下，这两者布局的差异，也是我在工作时遇到的问题然后解决之：

html:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
 
<!DOCTYPE html>
<html>
<head runat="server">
    <meta name="viewport" content="width=device-width" />
    <title>博客管理</title>
    <link href="../../Scripts/extjs/resources/css/ext-all-neptune.css" rel="stylesheet"
        type="text/css" />
    <link href="../../Scripts/Lib/Manage/Manage.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/extjs/ext-all.js" type="text/javascript"></script>
    <script src="../../Scripts/extjs/ext-theme-neptune.js" type="text/javascript"></script>
    <script src="../../Scripts/extjs/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
    <script src="../../Scripts/Lib/Manage/Manage.js" type="text/javascript"></script>
</head>
<body><br>
</body>
</html>

　　

Viewport:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
Ext.onReady(function () {
    Viewport();
});
 
function Viewport() {
    var viewport = Ext.create("Ext.container.Viewport", {
        layout: {
            type: 'border',
            padding: '5',
        },
        items: [{
            region: 'north',
            height: 50,
            border: false,
            margin: '0,0,0,0',
            bodyStyle: {
                        background: '#3992D4'
            },
            html: '<div class="header"><div class="title">优尔博客后台管理</div><div class="user">欢迎你：张威，<a href="#">退出</a></div></div>'
        }, {
            region: 'west',
            title: '博客导航',
            width: 250,
            stateId: 'statePanelExample',
            stateful: true,
            split: true,
            collapsible: true,
            padding:'0',
            layout: 'accordion',
            items: [
                {
                    title: '功能管理',
                    layout: 'fit',
                    items: [{
                        xtype: 'treepanel',
                        border: 0,
                        rootVisible: false,
                        root: {
                            expanded: true,
                            children: [
                            { id: '01', text: '文章管理', leaf: true, href: '#' },
                                { id: '02', text: '标签管理', leaf: true, href: '#' },
                                { id: '03', text: '用户管理', leaf: true, href: '#' }
                            ]
                        }
                    }]
                }, {
                    title: '博客设置',
                    layout: 'fit',
                    items: [{
                        xtype: 'treepanel',
                        border: 0,
                        rootVisible: false,
                        root: {
                            expanded: true,
                            children: [
                            { id: '01', text: '标题设置', leaf: true, href: '#' },
                                { id: '02', text: '模板设置', leaf: true, href: '#' },
                                { id: '03', text: '联系方式', leaf: true, href: '#' }
                            ]
                        }
                    }]
                }, {
                    title: '通知设置',
                    layout: 'fit',
                    items: [{
                        xtype: 'treepanel',
                        border: 0,
                        rootVisible: false,
                        root: {
                            expanded: true,
                            children: [
                            { id: '01', text: '通知设置', leaf: true, href: '#' }
                            ]
                        }
                    }]
                },{
                    title: '系统菜单',
                    layout: 'fit',
                    items: [{
                        xtype: 'treepanel',
                        border: 0,
                        rootVisible: false,
                        root: {
                            expanded: true,
                            children: [
                            { id: '01', text: '密码修改', leaf: true, href: '#' }
                            ]
                        }
                    }]
                }
            ]
        }, {
            region: 'center',
            xtype: 'tabpanel',
            id: 'MainTabPanel',
            activeTab: 0,
            items: {
                title: '首页',
                html: '<h1>欢迎使用优尔博客1.0系统</h1>'
            }
        }, {
            region: 'south',
            collapsible: false,
            bodyStyle: {
            background: '#3992D4'
        },
            html: '<div class="footer">© 合肥优尔电子科技有限公司 2014</div>',
            split: false,
            height: 22
        }]
    });
}

　　

通过F12工具分析可知，Viewport确实占用整个body,

现在我们来看看Panel:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
 
<!DOCTYPE html>
<html>
<head runat="server">
    <meta name="viewport" content="width=device-width" />
    <title>博客管理</title>
    <link href="../../Scripts/extjs/resources/css/ext-all-neptune.css" rel="stylesheet"
        type="text/css" />
    <link href="../../Scripts/Lib/Manage/Manage.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/extjs/ext-all.js" type="text/javascript"></script>
    <script src="../../Scripts/extjs/ext-theme-neptune.js" type="text/javascript"></script>
    <script src="../../Scripts/extjs/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
    <script src="../../Scripts/Lib/Manage/Manage.js" type="text/javascript"></script>
</head>
<body>
    <div id="container"></div>
</body>
</html>

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.title{
    text-align: left;
    color: white;
    font-weight: bold;
    font-size: 30px;
    margin: 0;
    padding: 0;
    padding-top: 5px;
    width: 85%;
    height: 100%;
    float: left;
}
.footer {
    text-align: center;
    color: white;
    font-weight: bold;
    padding-top: 5px;
}
.user {
    float: left;
    color: white;
    width:15%;
    height: 100%;
    font-size: 14px;
    padding-top: 15px;
    font-weight: bold;
}
.user a
{
    margin-left: 10px;
    color: white;
}
#container {
    width: 1170px;
    margin: 0 auto;
}

　　

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
Ext.onReady(function () {
   var panel= ExtPanel();
    window.onresize = function() {
        panel.setHeight(document.documentElement.clientHeight);
    };
});
 
function ExtPanel() {
    var pandel = Ext.create("Ext.panel.Panel", {
        renderTo:'container',
        width:1170,
        height:document.documentElement.clientHeight,
        layout: {
            type: 'border',
            padding: '5',
        },
        items: [{
            region: 'north',
            height: 50,
            border: false,
            margin: '0,0,0,0',
            bodyStyle: {
                        background: '#3992D4'
            },
            html: '<div class="header"><div class="title">优尔博客后台管理</div><div class="user">欢迎你：张威，<a href="#">退出</a></div></div>'
        }, {
            region: 'west',
            title: '博客导航',
            width: 250,
            stateId: 'statePanelExample',
            stateful: true,
            split: true,
            collapsible: true,
            padding:'0',
            layout: 'accordion',
            items: [
                {
                    title: '功能管理',
                    layout: 'fit',
                    items: [{
                        xtype: 'treepanel',
                        border: 0,
                        rootVisible: false,
                        root: {
                            expanded: true,
                            children: [
                            { id: '01', text: '文章管理', leaf: true, href: '#' },
                                { id: '02', text: '标签管理', leaf: true, href: '#' },
                                { id: '03', text: '用户管理', leaf: true, href: '#' }
                            ]
                        }
                    }]
                }, {
                    title: '博客设置',
                    layout: 'fit',
                    items: [{
                        xtype: 'treepanel',
                        border: 0,
                        rootVisible: false,
                        root: {
                            expanded: true,
                            children: [
                            { id: '01', text: '标题设置', leaf: true, href: '#' },
                                { id: '02', text: '模板设置', leaf: true, href: '#' },
                                { id: '03', text: '联系方式', leaf: true, href: '#' }
                            ]
                        }
                    }]
                }, {
                    title: '通知设置',
                    layout: 'fit',
                    items: [{
                        xtype: 'treepanel',
                        border: 0,
                        rootVisible: false,
                        root: {
                            expanded: true,
                            children: [
                            { id: '01', text: '通知设置', leaf: true, href: '#' }
                            ]
                        }
                    }]
                },{
                    title: '系统菜单',
                    layout: 'fit',
                    items: [{
                        xtype: 'treepanel',
                        border: 0,
                        rootVisible: false,
                        root: {
                            expanded: true,
                            children: [
                            { id: '01', text: '密码修改', leaf: true, href: '#' }
                            ]
                        }
                    }]
                }
            ]
        }, {
            region: 'center',
            xtype: 'tabpanel',
            id: 'MainTabPanel',
            activeTab: 0,
            items: {
                title: '首页',
                html: '<h1>欢迎使用优尔博客1.0系统</h1>'
            }
        }, {
            region: 'south',
            collapsible: false,
            bodyStyle: {
            background: '#3992D4'
        },
            html: '<div class="footer">© 合肥优尔电子科技有限公司 2014</div>',
            split: false,
            height: 22
        }]
    });
    return pandel;
}

　　

由此可知，利用renderTo将整个的panel放在container里，然后再设置container的width:1170px和margin:0 auto;就可以让它居中，

但是，是的，我说了但是，高度要有固定值，也就是说你设置panel的高度为：height:800,它就是800，这样设置好吗？

很显然这是行不通的，为什么？因为每个人的电脑显示器的屏幕显示率是有差异的，你这样设置成固定值，就有可能不是每台电脑都能正常显示，

有兴趣的可以自己试试。

不过这也是有解决方法的，就是利用“document.documentElement.clientHeight”来获取当前浏览器的可见区域显示高度，这样一来

就解决了刚才我们提到的问题。

不要高兴的太早，还有一个问题就是说，当你浏览器的宽度和高度变化时，因为你用“document.documentElement.clientHeight”

获取的高度也是个固定值，也就是说，它不是随着浏览器的变化而变化，这可不是我们想要的。

不过我们又有新的解决方法，这些方法都是有人在网上写好的，baidu一下就有可能搜到，不过 ，我把它串联起来，

这个代码是这样的：

var panel= ExtPanel();
window.onresize = function() {
panel.setHeight(document.documentElement.clientHeight);
};

利用window.onresize监听浏览器的变化，动态的设置Panel的高度，这样一来，所有问题全部解决！

posted @   Seaurl  阅读(5563)  评论(9)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· [AI/GPT/综述] AI Agent的设计模式综述
点击右上角即可分享
微信分享提示
AI IDE Trae