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

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

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

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

html:

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

　　

Viewport:

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

　　

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

现在我们来看看Panel:

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

　　

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

　　

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

　　

由此可知，利用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的高度，这样一来，所有问题全部解决！

ExtJs Ext.panel.Panel和Ext.container.Viewport布局问题的更多相关文章

  1. [转载]ExtJs4 笔记（9） Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...

  2. ExtJs4 笔记（9） Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件

    本篇讲解三个容器类控件. 一.面板控件 Ext.Panel 一个面板控件包括几个部分,有标题栏.工具栏.正文.按钮区.标题栏位于最上面,工具栏可以在四个位置放置,围绕中间部分正文,按钮区位于最小方.下 ...

  3. Javascript - ExtJs - Ext.form.Panel组件

    FormPanel组件(Ext.form.FormPanel) logogram:Ext.form.Panel | xtype:form Ext.form.Panel.配置 frame }//旗下所有 ...

  4. Ext.tree.Panel Extjs 在表格中添加树结构，并实现节点移动功能

    最近在用Extjs 做后台管理系统,真的非常好用.总结的东西分享一下. 先展示一下效果图 好了,开始吧! 首先说一下我的创建结构: 一.构造内容 这个函数中包括store的创建,treePanel的创 ...

  5. ExtJs 学习之开篇（三）Ext.grid.Panel表格中的处理

    Ext.grid.Panel Ext.create('Ext.grid.Panel',{        title:'测试表格',        width:400,        height:20 ...

  6. Extjs学习笔记--Ext.tree.Panel

    Ext.create('Ext.tree.Panel', { title: 'Simple Tree', width: 200, height: 150, store: store, rootVisi ...

  7. 【extjs】 extjs5 Ext.grid.Panel 搜索示例

    先看效果图: 页面js: <script type="text/javascript"> /** * 日志类型 store * */ var logTypeStore ...

  8. 【extjs】 ext5 Ext.grid.Panel 分页,搜索

    带有分页,搜索的grid. <%@page language="java" contentType="text/html; charset=UTF-8" ...

  9. [Extjs] Ext4 Ext.grid.Panel 分页实现（mybatis 分页插件-PageHelper 使用）

    先看图: 页面js代码: var userStore=Ext.create('Ext.data.Store', { storeId:'userStore', fields:['uname', 'ema ...

随机推荐

  1. 自定义手势_GestureOverlayVIew

    xml文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns ...

  2. C语言结构体的强制类型转换

    陈浩师兄03年的一篇博客<用C写有面向对象特点的程序>描述了用C语言来实现类似C++类继承的方法,这样方法的核心要点就是结构体的强制类型转换,让我来简单分析分析C语言中的结构体强制类型转换 ...

  3. C语言---翻译过程

    c的实现中包括两种环境: 1.翻译环境(translation environment):源程序---->机器指令 2.执行环境(execution environment):执行机器指令 这两 ...

  4. 介绍一些适用于 Web 开发者的 Atom 编辑器插件

    Atom 的社区很繁荣,有着丰富的扩展/插件(packages).安装 Atom 的 Package 非常简单,可以在编辑器的偏好设置里面安装,也可以在命令行中使用 apm 命令来安装. 在介绍适用于 ...

  5. matrix computing optimization schemes

    * stackoverflow: how does BLAS get such extern performance * Howto optimizate GEMM http://wiki.cs.ut ...

  6. linux 多核

    posix threading programming beej's guide to unix ipc the gnu c library: virtual memory allocation an ...

  7. VSPackge插件系列：简单文本编辑器的实现

    相比其它开发环境,VS的好用就不用多说了,尽管VS很人性化,但是针对具体的我们想实现的功能时,会力不从心,也许会有很多现成的插件,但是作为一名程序员,我还是喜欢自己去写一些东西,因为这样能随心所欲的想 ...

  8. oracle数据库常用操作命令

    查看Oracle的版本: select * from product_component_version; 查看当前用户所具有的权限: SELECT * FROM DBA_SYS_PRIVS WHER ...

  9. AndroidStudio学习记录

    AndroidStudio学习记录 1. 插件的使用. plugins.jetbrains.com插件网站. 2. 目录介绍: 1.Studio中有Project和Module的概念,前面说到Stud ...

  10. Ubuntu Update-rc.d命令详细介绍

    http://www.jb51.net/os/Ubuntu/182768.html Ubuntu或者Debian系统中update-rc.d命令,是用来更新系统启动项的脚本.这些脚本的链接位于/etc ...