ExtJs Ext.panel.Panel和Ext.container.Viewport佈局問題

時間 2019-11-19

標籤 extjs ext.panel.panel ext panel ext.container.viewport container viewport 佈局問題欄目 HTML5 简体版

原文原文鏈接

Ext.container.Viewport
Ext.panel.Panel

Viewport 它的佈局會佔用整個 body,也應該是這樣，它會隨着瀏覽器的高度和寬度的變化而變化。javascript

Panel 佈局時須要提供必定的高度和寬度值，這個值是固定的，它不會隨着瀏覽器的變化而變化。css

接下來，我來演示下，這二者佈局的差別，也是我在工做時遇到的問題而後解決之：html

html:java

<%@ 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;就可讓它居中，spa

可是，是的，我說了可是，高度要有固定值，也就是說你設置panel的高度爲：height:800,它就是800，這樣設置好嗎？server

很顯然這是行不通的，爲何？由於每一個人的電腦顯示器的屏幕顯示率是有差別的，你這樣設置成固定值，就有可能不是每臺電腦都能正常顯示，htm

有興趣的能夠本身試試。

不過這也是有解決方法的，就是利用「document.documentElement.clientHeight」來獲取當前瀏覽器的可見區域顯示高度，這樣一來

就解決了剛纔咱們提到的問題。

不要高興的太早，還有一個問題就是說，當你瀏覽器的寬度和高度變化時，由於你用「document.documentElement.clientHeight」

獲取的高度也是個固定值，也就是說，它不是隨着瀏覽器的變化而變化，這可不是咱們想要的。

不過咱們又有新的解決方法，這些方法都是有人在網上寫好的，baidu一下就有可能搜到，不過，我把它串聯起來，

這個代碼是這樣的：

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

利用window.onresize監聽瀏覽器的變化，動態的設置Panel的高度，這樣一來，全部問題所有解決！