`

Viewport介绍

EXTJavaScriptCSSHTML 
阅读更多

Viewport代表整个游览器窗口,直接渲染到document.body节点,取代页面中的左右内容,一般作为应用程序的主界面。

<HTML>
<HEAD>
	<TITLE>使用EXT输出HelloWorld</TITLE>
	<!-- 导入extjs配置 … ... -->
	<link rel="stylesheet" type="text/css" href="./../ext/resources/css/ext-all.css"/>
	<script type="text/javascript" src="./../ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="./../ext/ext-all.js"></script>
	<script type="text/javascript">
		Ext.onReady(function(){
			Ext.BLANK_IMAGE_URL='./../ext/resources/images/default/s.gif';
			new Ext.Viewport({
				layout: 'border',
				items:[{
					region: 'north',
					height: 100,
					title: '顶部工具栏Logo及Banner'
				},{
					region: 'west',
					width: 150,
					title: '菜单栏'
				},{
					region: 'center',
					title: '主区域'
				},{
					region: 'south',
					height: 100,
					title: '版权信息'
				}]
			});
		});
	</script>
</HEAD>
<body id="form">
</body>
</HTML>
 
分享到：
| 面板panel介绍
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Ext Designer入门3-Viewport和Border布局

    1、Viewport介绍： Viewport 是一类特殊的容器。它创建后会自动填充到整个页面区域，并能自动适应页面缩放。一般作为用用程序全局容器使用。 2、Border布局介绍： Ext 几乎所有的容器组件都有layout属性。layout...

    viewport介绍1

    的viewport宽度会大于实际屏幕宽度，导致网页需要横向滚动，影响用户体验。通过设置`&lt;meta name="viewport" content="..."&gt;`，我们可以控制viewport的大小和缩放行为，确保网页在不同设备上适配良好。 第二，理解...

    前端项目-viewport-units-buggyfill.zip

    3. `README.md` 文件：提供项目介绍、使用方法和安装指南等信息。 4. `LICENSE` 文件：项目许可协议，规定了如何合法使用该项目的代码。 5. `.gitignore` 文件：定义了Git版本控制系统应忽略的文件和目录。 6. `...

    WPF_Viewport3D-master_wpfviewPort3D_

    Viewport3D基本介绍** ViewPort3D是WPF中呈现3D场景的主要容器。它将3D模型、相机和光照等元素组合在一起，提供一个2D屏幕上的3D视图。通过在ViewPort3D内添加各种3D对象，如MeshGeometry3D（3D网格）、Model3...

    html5开发之viewport使用

    学习html5 viewport的使用能帮你做到这一点……viewport 语法介绍： 复制代码代码如下: &lt;!– html document –&gt; &lt;meta name=”viewport” content=” height = [pixel_value | device-height] ,

    SPVLoc: Semantic Panoramic Viewport Matching for 6D Camera Local

    本文介绍了一种名为SPVLoc（Semantic Panoramic Viewport Matching）的新方法，该方法用于解决在未知环境中实现六维度（6D）相机定位的问题。SPVLoc是一种全局室内定位方法，它能够准确地确定查询图像中的6D相机位置...

    自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结

    在移动客户端手机页面布局中，meta标签的使用非常重要，今天我们将详细介绍meta标签中的几个关键属性，包括viewport、content、width、initial-scale、minimum-scale、maximum-scale，并解释它们在自适应布局中的...

    简单总结CSS3中视窗单位Viewport的常见用法

    介绍视窗(Viewport)单位 视窗(Viewport)是你的浏览器实际显示内容的区域——换句话说是你的不包括工具栏和按钮的网页浏览器。这些单位是vw,vh,vmin和vmax。它们都代表了浏览器（视窗(Viewport)）尺寸的比例和窗口...

    详解jquery插件jquery.viewport.js学习使用方法

    介绍 Viewport 是一个简单的jQuery插件，为元素添加自定义伪选择器和处理程序，以便在可视窗口内外进行简单的元素检测。 使用方法 [removed][removed] [removed][removed] 方法 $( ":in-viewport" ); $( ":...

    移动端REM布局与ViewportVW布局的实例运用

    两种常用的解决方案是REM（Root Em）布局和Viewport Width（VW）布局。这篇文章将深入探讨这两种布局方式，并通过实例来展示它们在JavaScript和CSS中的应用。 **一、REM布局** 1. **REM（Root Em）介绍** REM是以...

    react-vtkjs-.7z

    首先，`react-vtkjs-viewport-master.7z`是项目的主要源代码，它展示了如何在React应用中集成vtk.js来创建一个可交互的三维视口。React是一个流行的JavaScript库，用于构建用户界面，特别是单页面应用程序。它采用...

    vue做移动端适配最佳解决方案(亲测有效)

    主要介绍了vue做移动端适配最佳解决方案(亲测有效)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

    android WebView加载html5介绍

    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"&gt; ``` 在这个例子中，`width=device-width`使网页宽度与设备屏幕宽度相等，`initial-scale=1.0`设定初始缩放比例为1，即...

    vue移动端h5页面根据屏幕适配的四种方案.docx

    下面我们将介绍四种常见的屏幕适配方案。 方案一：淘宝开源的可伸缩布局计划 淘宝开源的可伸缩布局计划是一种常见的屏幕适配方案。它主要是按照设备设备像素比设置 scale 的值，保持视口 device-width 始终等于...

    HowToShow3DInWinform.7z

    本教程将介绍如何利用Helix Toolkit这一开源库在Winform中实现3D图形显示，并实现鼠标控制的缩放、旋转功能。 首先，了解Helix Toolkit。Helix Toolkit是专为WPF（Windows Presentation Foundation）设计的一套3D...

    使用javascript构建3D web 应用

    - **Map**作为Viewport的包装器，Viewport执行具体的工作。 - **map.viewport**：获取Viewport实例。 #### 七、Viewport属性与方法 - **属性**：包括camera、width、height等。 - **方法**：如animateTo、centerAt...

    iPhoneXRXS底部固定定位偏移解决方案.docx

    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover"&gt; ``` 其中，`viewport-fit=cover`表示让视口完全覆盖...

    vue 移动端适配.md

    cnpm i postcss-import postcss-url postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --save ``` #### 五、配置package.json文件 接下来...

    用前端页面实现个人简介！！！

    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; 我的个人简介 头像.jpg" alt="我的照片"&gt; 张三 前端开发者，热爱编程与设计 技能 &lt;li&gt;HTML/CSS&lt;/li&gt; &lt;li&gt;JavaScript ...

Magicbox
Global site tag (gtag.js) - Google Analytics