ExtJs Ext.panel.Panel和Ext.container.Viewport布局问题
生活随笔
收集整理的這篇文章主要介紹了
ExtJs Ext.panel.Panel和Ext.container.Viewport布局问题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?
- 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的高度，這樣一來，所有問題全部解決！
轉載于:https://www.cnblogs.com/zhangwei595806165/p/3581912.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的ExtJs Ext.panel.Panel和Ext.container.Viewport布局问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 摩根士丹利华鑫基金公司面试
- 下一篇： Linux下的线程