`

Ext.Viewport的border布局

EXTJavaScriptCSSHTML 
阅读更多 
<html>
	<head>
    <title>Feed Viewer 3</title>
    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
    <script type="text/javascript" src="adapter/ext/ext-base.js"></script>
 		<script type="text/javascript" src="ext-all.js"></script>
 	</head>
 	
 	<body>
 		<div id="west" class="x-hide-display">
        <p>Hi. I'm the west panel.</p>
    </div>
 		<script type="text/javascript">
 			Ext.onReady(function() {
 				var viewport = new Ext.Viewport({
 					layout:'border',
 					items:[{
 						region:'west',
 						title:'管理中心',
 						split:true,//
 						width:200,
 						minSize:175,
 						maxSize:300,
 						height:600,
 						collapsible:true,//拥有隐藏功能
 						margins:'0 0 5 5',
 						cmargins:'0 5 5 5',
 						layout:'accordion',//可折叠菜单
 						layoutConfig:{
 							animate:true //启用动画效果
 						},
 						items:[{
 							title:'now',
 							html:	'n1'
 						},{
 							title:'now2',
 							html:'n2'
 						}]
 					},{
 						region:'center'
 					}]
 				});
 			}); 				
 		</script>
 	</body>
</html>
 
分享到：
| SMSlib使用
评论
发表评论

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

相关推荐

    Ext.Viewport布局

    ### Ext.Viewport布局详解 在前端开发领域，尤其是基于Ext JS框架进行应用设计时，`Ext.Viewport`布局是至关重要的概念。它提供了一个全面的、全屏的容器，用于组织和展示各种UI组件，如面板、表格、图表等。在给定...

    Ext Designer入门3-Viewport和Border布局

    本节介绍 Ext的Border布局以及如何创建一个Viewport。 1、Viewport介绍： Viewport 是一类特殊的容器。它创建后会自动填充到整个页面区域，并能自动适应页面缩放。一般作为用用程序全局容器使用。 2、Border布局...

    Ext Js权威指南(.zip.001

    9.4.9　边框布局：ext.layout.container.border / 451 9.4.10　自动布局：ext.layout.container.auto / 453 9.4.11　表格布局：ext.layout.container.table / 454 9.4.12　列布局：ext.layout.container.column / ...

    关于viewport,Ext.panel和Ext.form.panel的关系

    那个深入浅出ext作者比我还懒 viewport存放Ext.panel对象,其容器中的成员可以以borderlayout方式布局

    Ext介绍以及_ext页面布局

    4. **Border布局**：Border布局是最常用的布局之一，它将容器分为五个区域：东(east)、南(south)、西(west)、北(north)和中心(center)。每个区域可以独立放置组件，提供灵活的页面布局。 例如，创建一个包含北部...

    ext实例 ext操作步骤

    var viewport = new Ext.Viewport({ layout: 'border', // 布局，必须是border items: [northPanel, westPanel, centerPanel, eastPanel, southPanel] }); ``` 这里的`northPanel`, `westPanel`, `centerPanel`, `...

    EXT 布局 Layout 资料

    **Border** 布局由类 `Ext.layout.BorderLayout` 定义，其布局名称为 `border`。Border 布局将容器划分为五个区域：东 (`east`)、南 (`south`)、西 (`west`)、北 (`north`) 和中心 (`center`)。 在向容器添加子元素...

    ExtJS项目 一个博客系统

    在ExtJS中，这些可以通过创建不同的组件来实现，如`Ext.container.Viewport`用于定义整个页面布局，`Ext.grid.Panel`用于展示文章列表，`Ext.form.field.Text`和`Ext.button.Button`组合用于构建搜索表单。...

    ExtJSWeb应用程序开发指南(第2版)

    5.2.1 0Border边框布局 5.2.1 1Box盒布局 5.3 使用ViewPort 5.4 Ext.tab.Panel页签 5.5 本章小结 第6章 常用工具类与函数 6.1 非常有用的Ext.core.Element 6.2 Ext常用函数 6.2.1 Ext.onReady（） 6.2.2 ...

    EXT制作的布局，使用border layout, 稍做改动即可添加到自己的项目里， 简单实用。让你感受EXT的强大

    本示例主要讲解了EXT如何利用Border Layout实现一个简单而实用的布局设计。 Border Layout是EXT中的一种预定义布局，顾名思义，它将容器划分为五个区域：north, south, east, west 和 center。这些区域按照它们的...

    ExtJS-3.4.0系列目录

    - `Border`：边框布局，复杂的布局结构，常用于主内容和侧边栏的展示。 - **Ext.container.Viewport**：全屏容器，用于包裹整个应用界面。 - **Ext.tab.Panel**：页签面板，用于展示多个页面内容，每个页面作为一...

    Ext教程ext2-Ext简易教程

    2. Border布局：将容器分为五个区域（东、南、西、北、中），每个子组件可以指定在哪个区域内显示。 3. Column布局：将容器视为一列，并通过`columnWidth`或`width`属性指定子组件的宽度，可以混合使用百分比和绝对...

    ExtJs4_笔记.docx

    - **Ext.Panel**、**Ext.window.Window**和**Ext.container.Viewport**：面板、窗口和布局控件的使用。 - **Ext.tab.Panel**：详细讲解了选项卡的创建和操作。 - **Ext.ListView**和**Ext.view.View**：数据视图的...

    ext布局(Layout.html)例子.pdf

    Border布局将屏幕分为五个区域：东、南、西、北和中心（中央）。通过`region`属性来定位子组件，如`region: 'north'`表示放置在上方。中央区域是必需的，其他区域可选。这种布局常用于创建带有侧边栏和头部/尾部的...

    extjs布局全面讲解

    - **定义**：Border布局由类`Ext.layout.BorderLayout`定义，布局名称为`border`，这是一种非常实用且常见的布局方式，适用于创建具有固定结构的应用界面。 - **特性**： - 将容器划分为东、南、西、北和中心五个...

    前台代发示例

    第四部分介绍了如何使用 `Ext.Viewport` 来布局整个应用。示例代码如下： ```javascript new Ext.Viewport({ layout: "border", items: [ { region: "north", title: "", html: "", height: 100 }, { ...

    搜集来的ext布局材料

    2. **Border布局**： - `border` 布局是EXTJS中的一种复合布局，可以将容器划分为多个区域，便于创建复杂的多面板布局。 - 区域包括：`north`（顶部）、`south`（底部）、`east`（右侧）、`west`（左侧）和`center...

    extjs布局管理学习指南

    new Ext.Viewport({ renderTo: Ext.getBody(), layout: "border", items: [ {region: "north", title: "顶部", height: 50}, {region: "south", title: "底部", height: 50}, {region: "west", title: "左侧...

    Ext与后台数据库交互

    `Viewport`是Ext框架中的一个容器组件，用于填充整个浏览器窗口。它采用`region`定义各个区块的显示，如`north`、`south`、`east`、`west`和`center`等。其中`center`区域是必不可少的，通常用来放置主要内容。 ###...

    ExtJS 2.0实用简明教程 之Border区域布局

    该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。看下面的...

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