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的高度，这样一来，所有问题全部解决！
ExtJs Ext.panel.Panel和Ext.container.Viewport布局问题的更多相关文章
- [转载]ExtJs4 笔记（9） Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件
作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...
- ExtJs4 笔记（9） Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件
本篇讲解三个容器类控件. 一.面板控件 Ext.Panel 一个面板控件包括几个部分,有标题栏.工具栏.正文.按钮区.标题栏位于最上面,工具栏可以在四个位置放置,围绕中间部分正文,按钮区位于最小方.下 ...
- Javascript - ExtJs - Ext.form.Panel组件
FormPanel组件(Ext.form.FormPanel) logogram:Ext.form.Panel | xtype:form Ext.form.Panel.配置 frame }//旗下所有 ...
- Ext.tree.Panel Extjs 在表格中添加树结构，并实现节点移动功能
最近在用Extjs 做后台管理系统,真的非常好用.总结的东西分享一下. 先展示一下效果图 好了,开始吧! 首先说一下我的创建结构: 一.构造内容 这个函数中包括store的创建,treePanel的创 ...
- ExtJs 学习之开篇（三）Ext.grid.Panel表格中的处理
Ext.grid.Panel Ext.create('Ext.grid.Panel',{ title:'测试表格', width:400, height:20 ...
- Extjs学习笔记--Ext.tree.Panel
Ext.create('Ext.tree.Panel', { title: 'Simple Tree', width: 200, height: 150, store: store, rootVisi ...
- 【extjs】 extjs5 Ext.grid.Panel 搜索示例
先看效果图: 页面js: <script type="text/javascript"> /** * 日志类型 store * */ var logTypeStore ...
- 【extjs】 ext5 Ext.grid.Panel 分页,搜索
带有分页,搜索的grid. <%@page language="java" contentType="text/html; charset=UTF-8" ...
- [Extjs] Ext4 Ext.grid.Panel 分页实现（mybatis 分页插件-PageHelper 使用）
先看图: 页面js代码: var userStore=Ext.create('Ext.data.Store', { storeId:'userStore', fields:['uname', 'ema ...
随机推荐
- 区块上的三角形状的css写法
.navbar .navline > .dropdown > .dropdown-menu:before { content: ''; display: inline-block; bor ...
- 介绍一些适用于 Web 开发者的 Atom 编辑器插件
Atom 的社区很繁荣,有着丰富的扩展/插件(packages).安装 Atom 的 Package 非常简单,可以在编辑器的偏好设置里面安装,也可以在命令行中使用 apm 命令来安装. 在介绍适用于 ...
- 关于JFace带复选框的树
树的复选框用CheckboxTreeViewer实现.由于其子类ContainerCheckedTreeViewer在没有选择全部子节点时可以自动将父节点设置成灰选,所以实现树的复选框更多的是用Con ...
- 【C语言】5-结构体
一.什么是结构体 * 在实际应用中,我们通常需要由不同类型的数据来构成一个整体,比如学生这个整体可以由姓名.年龄.身高等数据构成,这些数据都具有不同的类型,姓名可以是字符串类型,年龄可以是整型,身高可 ...
- Html5时钟的实现
最近准备把自己的博客装修一下,首先,先为自己设计一个时钟吧,希望博客园能够尽快发放给我使用js的权限! 自从看见了苹果设计的那款因为侵权而赔钱了时钟,我就决定我的时钟一定是要参考这个来设计了! 不得不 ...
- 关于H5中的Canvas API的探索
Canvas API 是H5中比较炫酷的一部分内容.可以通过它动态的生成和展示图形.图表.图像以及动画.下面我将学习一下Canvas API. 最后有书籍和源码. 一.概述: 1.基本元素: 在网页上 ...
- JD（转载）
时间:2012-9-11 地点:川大 我只能说第一家公司,不是一般的火爆.不得不吐槽一下: 京东宣讲完全没有计划,只看到个下午两点半宣讲,结果跑过去,下午两点是宣讲管培的.在川大外的德克士呆了一下午. ...
- iOS-Reachability的使用
// 下载地址:http://pan.baidu.com/s/1gd5NNDD // 1. 添加Reachability.h和Reachibility.m文件到项目中 // 2. 添加System ...
- 12天学好C语言——记录我的C语言学习之路（Day 10）
12天学好C语言--记录我的C语言学习之路 Day 10: 接着昨天的指针部分学习,有这么一个题目: //还是四个学生,四门成绩,只要有学生一门功课没及格就输出这个学生的所有成绩 /*//progra ...
- Java 7 新的 try-with-resources 语句，自动资源释放
Java 7 的编译器和运行环境支持新的 try-with-resources 语句,称为 ARM 块(Automatic Resource Management) ,自动资源管理. 新的语句支持包括 ...