lixue150
- 浏览: 78441 次
- 性别:
- 来自: 合肥
-
文章分类
最新评论
-
lslsday：
djggggggggggggggggggggggggggggg ...
简单的Ckeditor--实现上传的功能 -
jps7777777：
fdsgfds
Ckeditor简单的数据提交
我学习ExtJs主要是从布局开始学习的，现在说的是border布局
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Border 实例</title>
<link rel="stylesheet" style="text/css"
href="ext/resources/css/ext-all.css" />
<link rel="stylesheet" style="text/css"
href="ext/resources/css/xtheme-blue.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" src="ext/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
new Ext.Viewport({
layout : "border",
items : [ {
region : "north",
height : 50,
title : "顶部面板"
}, {
region : "south",
height : 50,
title : "底部面板"
}, {
region : "center",
title : "中央面板"
}, {
region : "west",
width : 100,
title : "左边面板"
}, {
region : "east",
width : 100,
title : "右边面板"
} ]
});
});
</script>
</head>
<body>
</body>
</html>
设置就按照前面的accordion来设置，所用的ext文件也是一样的
运行就可以看到想要的效果
分享到：
发表评论
-
Struts2.0.11+spring2+Hibernate3jar包
2011-11-04 11:54 917Struts2.0.11+spring2+Hibernate3 ... -
Ext+struts2.1.6+spring2+hibernate3的jar包
2011-11-02 11:18 996Ext+struts2.1.6+spring2+hiberna ... -
设置下拉框的初始值
2011-10-27 14:50 6510var summaryDataCombo = new Ext. ... -
Ext.grid.ColumnModel
2011-08-08 13:24 1370Ext.grid.ColumnModel 主 ... -
Ext进行查询后分页的问题
2011-08-08 10:58 1178在Ext进行查询后 分页可以出现效果，但是单击下一页或是最后一 ... -
TreePanel常用配置
2011-08-08 10:32 983TreePanel基本配置参数: //TreePane ... -
TextField
2011-08-05 11:30 2415Ext.form.TextField 配置项： ... -
FormPanel常用的属性
2011-08-05 11:30 1265Ext.form.FormPanel 配置项： ... -
ext DateField控件格式
2011-08-04 17:49 2093以下是从网上查找的一 ... -
GridPanel简单实例
2011-08-01 09:31 797<!DOCTYPE html PUBLIC " ... -
Ext.grid.GridPanel
2011-08-01 09:15 1132Ext.grid.GridPanel 主要配置项： store ... -
ExtJs FormPanel 其他组件的应用
2011-07-29 16:50 888<!DOCTYPE html PUBLIC " ... -
ExtJs FormPanel 空验证
2011-07-29 15:43 1139<!DOCTYPE html PUBLIC " ... -
ExtJs--FormPanel的checkboxToggle属性效果
2011-07-29 14:49 1550<!DOCTYPE html PUBLIC " ... -
FormPanel fieldset应用
2011-07-29 14:36 862练习fieldset的使用 <!DOCTYPE htm ... -
ExtJs-FormPanel学习
2011-07-29 14:17 877<!DOCTYPE html PUBLIC " ... -
ExtJs--FormPanel主要配置项
2011-07-29 13:53 1031配置项： items：一个元素或元素数组 buttons： ... -
ExtJs viewPort属性
2011-07-29 11:57 15721.xtype属性 xtype ... -
ExtJs学习--ViewPort练习
2011-07-29 11:42 5075我现在是想要熟悉ExtJs的一些属性，然后在进行相关的应用 ... -
TreePanel学习--AsyncTreeNode
2011-07-28 10:47 1514主要与TreeNode进行一些比较，看这两个新建的树的代码有什 ...
相关推荐
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor 另外，不常见的布局有：tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
资源名称：ExtJS布局之border实例内容简介：border布局是常见的布局样式，本文档中一个实际项目的示例，比较简单，仅供初学者参考。感兴趣的朋友可以过来看看。自动生成行号，支持checkbox全选，动态选择显示哪些列...
ExtJS 3.0提供了多种布局模式，如“fit”（适应性布局）、“border”（边界布局）、“form”（表单布局）等，可以灵活地调整组件的大小和位置。布局管理器使得开发者无需关心具体的CSS样式，只需指定布局类型，框架...
- `Border`：边框布局，复杂的布局结构，常用于主内容和侧边栏的展示。 - **Ext.container.Viewport**：全屏容器，用于包裹整个应用界面。 - **Ext.tab.Panel**：页签面板，用于展示多个页面内容，每个页面作为一...
2. **布局管理**：ExtJS提供多种布局模式，如Fit、Border、Form、Table等，用于控制组件在容器中的排列方式和尺寸调整。 3. **数据绑定**：框架内置了数据绑定机制，使得视图（UI组件）可以直接与数据源进行同步，...
5. **高级布局管理**：框架提供了多种布局管理器，如Fit、Border、VBox、HBox等，能够灵活地调整组件的尺寸和位置。 6. **可访问性**：ExtJS重视无障碍性，为视力障碍的用户提供良好的支持，符合WCAG 2.0标准。 7....
7. **布局管理**：框架提供了多种布局模式，如Fit、Border、Form、Table等，用于灵活地组织和调整组件在容器中的位置和大小，适应不同屏幕尺寸和应用场景。 8. **事件处理**：ExtJS的事件驱动模型允许开发者通过...
《深入解析ExtJS4布局系统：从概念到实践》 一、引言 在Web开发领域，用户界面的布局设计是构建美观且功能强大的应用程序的关键环节。ExtJS，作为一款领先的JavaScript框架，提供了丰富的组件库和高度定制化的布局...
资源名称：ExtJS布局之border实例 中文WORD版内容简介：border布局是常见的布局样式，本文档中一个实际项目的示例，比较简单，仅供初学者参考。感兴趣的朋友可以过来看看资源截图： 资源太大，传百度网盘了，链接在...
##### 2.2 Border 布局 - **特点**：分为五个区域（北、南、东、西和中心），每个区域可以包含一个面板。 - **用途**：构建复杂的用户界面，如管理后台系统。 ##### 2.3 Accordion 布局 - **特点**：类似于手风琴...
2. **布局管理**：EXTJS提供多种布局方式，如Fit、Border、Form、Table等，满足不同布局需求。 3. **数据绑定**：EXTJS支持双向数据绑定，允许UI与数据模型实时同步，简化了数据操作。 4. **Ajax通信**：EXTJS内置...
### ExtJS4基础教程知识点...ExtJS4还有如`border`、`card`等多种布局选项，开发人员可以根据需要选择适合的布局来设计界面。 通过上述知识点的学习和实践，可以为接下来深入学习ExtJS4的其它高级特性打下坚实的基础。
ExtJS提供多种布局模式，如Fit布局、Border布局、Table布局等，满足不同布局需求。 4. **数据绑定（Data Binding）**：ExtJS的数据绑定机制允许将数据模型与UI组件直接关联，实现数据的实时更新。Model、Store和...
第十讲.ExtJS布局模式-Column、Table、Border 第十一讲.ExtJS布局模式-Box布局、使用ViewPort布局首页 第十二讲.ExtJS之Ext常用函数 第十三讲.ExtJS之Ext常用函数（二） 第十四讲.初识Ajax 第十五讲.ExtJS对...
ExtJS布局是构建用户界面的关键部分，特别是在使用ExtJS库时。本文主要讲解ExtJS的Column布局，一种非常灵活的布局方式，可以帮助开发者创建复杂的、响应式的用户界面。 Column布局在ExtJS中用于将容器（如Panel）...
- **边框布局（BorderLayout）**：使用`layout: "border"`，将容器分为东、南、西、北、中五个区域，每个区域可放置不同的组件，如`east`, `south`, `west`, `north`, `center`。 - **卡片式布局（CardLayout）**...
总之，ExtJS提供了一系列强大的布局管理功能，包括`column`、`fit`和`border`布局，以及动态添加和删除子元素的能力，这些都极大地增强了Web应用程序的灵活性和响应性。掌握这些布局技巧对于构建高质量的Web应用界面...
- Border布局是ExtJs中最复杂的布局之一，允许将容器分为五个区域：北部（north）、南部（south）、东部（east）、西部（west）和中心（center）。在这种布局中，左侧通常会设置为“west”区域，用于放置树形导航。...
- 示例代码：创建带有Border布局的Panel。 ### 结语 Extjs4作为一款功能强大的前端框架，对于初学者来说可能存在一定的学习曲线。本指南涵盖了从获取Extjs4到搭建学习环境、创建首个应用以及掌握关键API和布局...