- Ext.container.Viewport
- Ext.panel.Panel
Viewport 它的布局會占用整個 body,也應該是這樣，它會隨着瀏覽器的高度和寬度的變化而變化。
Panel 布局時需要提供一定的高度和寬度值，這個值是固定的，它不會隨着瀏覽器的變化而變化。
接下來，我來演示下，這兩者布局的差異，也是我在工作時遇到的問題然后解決之：
html:
<%@ 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>
</body>
</html>
Viewport:
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:
<%@ 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>
.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; }
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的高度，這樣一來，所有問題全部解決！