shmily2038
- 浏览: 832806 次
- 性别:
- 来自: 厦门
-
文章分类
- 全部博客 (363)
- 2010年3月 (3)
- 2010年4月 (3)
- Java (116)
- ExtJs (22)
- EJB3.0 (11)
- JQuery (28)
- SqlServer (5)
- Oracle (17)
- hibernate (21)
- struts2 (14)
- php (10)
- JavaScript (11)
- jbpm (6)
- spring (24)
- lucene (2)
- ibatis (7)
- C# (8)
- mysql (11)
- json (3)
- webservice (3)
- 设计模式 (1)
- jdbc (1)
- servlet (2)
- ice (6)
- 日常软件问题 (2)
- 生活 (2)
- iphone (1)
- rest (3)
- ruby (2)
- linux (13)
- quartz (1)
- poi (1)
- redis (13)
- memcached (4)
- nosql (2)
- tomcat调优 (1)
- 项目管理 (0)
最新评论
-
天使建站：
jquery里和数组相关的操作 附带具体的实例 ...
jquery对象数组 -
Cy0941：
$('#formId').form('submit',...) ...
easyui的form表单提交处理 -
shmily2038：
swifth 写道楼主，，你的命令写错啦，，[root@ser ...
centos直接yum安装nginx -
swifth：
楼主，，你的命令写错啦，，[root@server ~]# y ...
centos直接yum安装nginx -
随遇而安DXX：
...
REST
border(边界) 布局是指，把面板组件显示在 北 东 南 西 中 的哪个区域。
center 区域的面板是不能够少的。
1. index.html
在导入ExtJS CSS + JS 后 增加以下1 <head>
2
3 <script type="text/javascript" src="js/LayoutBorder.js"></script>
4 </head>
2.LayoutBorder.js
1 Ext.ns("alex.extjs.layout");
2
3 alex.extjs.layout.PrettyPanel = function(){
4
5 //Ext.QuickTips.init(); //初始化快速提示
6
7 var northPanel = new Ext.Panel({
8 region: 'north', //指定在北部
9 title: '北部面板', //面板标题
10 height: 80, //指定高度
11 collapsible: true, //可以折叠
12 frame: true,
13 html: '<center>可折叠面板</center>'
14 });
15
16 var eastPanel = new Ext.Panel({
17 region: 'east', //指定在东部
18 title: '东部面板',
19 width: 100,
20 split: true, //可调高/宽度
21 minSize: 80, //最小高/宽度
22 maxSize: 400, //最大高/宽度
23 html: '可调宽度面板'
24 });
25
26
27 var southPanel = new Ext.Panel({
28 region: 'south',
29 //title: '南部面板',
30 height: 80,
31 collapseMode: 'mini', //折叠后是窄边框
32 split: true, //可调高/宽度
33 minSize: 40, //最小高/宽度
34 maxSize: 200, //最大高/宽度
35 frame: true,
36 html: '<center>可折叠(窄边框) + 可调宽度面板</center>'
37 });
38
39 var westPanel = new Ext.Panel({
40 title: '西部面板',
41 region: 'west',
42 split: true,
43 collapsible: true,
44 collapseMode: 'mini',
45 margins: '0 0 0 5', //当前组件的西边页边距为5
46 width: 200,
47 html: '有标题 + 可折叠(窄边框) + 可调宽度面板'
48 });
49
50 var centerPanel = new Ext.Panel({
51 region: 'center', //边界布局,必须有 center
52 html: ''
53 });
54
55 var viewport = new Ext.Viewport({ //生成一个 ExtJS 视窗 组件对象
56 renderTo: Ext.getBody(), //呈现在 Html Body标签中
57 layout: 'border', //使用边界布局
58 items:[northPanel, eastPanel, southPanel, westPanel, centerPanel]
59 });
60 }
61
62 Ext.onReady(alex.extjs.layout.PrettyPanel);
center 区域的面板是不能够少的。
1. index.html
在导入ExtJS CSS + JS 后 增加以下1 <head>
2
3 <script type="text/javascript" src="js/LayoutBorder.js"></script>
4 </head>
2.LayoutBorder.js
1 Ext.ns("alex.extjs.layout");
2
3 alex.extjs.layout.PrettyPanel = function(){
4
5 //Ext.QuickTips.init(); //初始化快速提示
6
7 var northPanel = new Ext.Panel({
8 region: 'north', //指定在北部
9 title: '北部面板', //面板标题
10 height: 80, //指定高度
11 collapsible: true, //可以折叠
12 frame: true,
13 html: '<center>可折叠面板</center>'
14 });
15
16 var eastPanel = new Ext.Panel({
17 region: 'east', //指定在东部
18 title: '东部面板',
19 width: 100,
20 split: true, //可调高/宽度
21 minSize: 80, //最小高/宽度
22 maxSize: 400, //最大高/宽度
23 html: '可调宽度面板'
24 });
25
26
27 var southPanel = new Ext.Panel({
28 region: 'south',
29 //title: '南部面板',
30 height: 80,
31 collapseMode: 'mini', //折叠后是窄边框
32 split: true, //可调高/宽度
33 minSize: 40, //最小高/宽度
34 maxSize: 200, //最大高/宽度
35 frame: true,
36 html: '<center>可折叠(窄边框) + 可调宽度面板</center>'
37 });
38
39 var westPanel = new Ext.Panel({
40 title: '西部面板',
41 region: 'west',
42 split: true,
43 collapsible: true,
44 collapseMode: 'mini',
45 margins: '0 0 0 5', //当前组件的西边页边距为5
46 width: 200,
47 html: '有标题 + 可折叠(窄边框) + 可调宽度面板'
48 });
49
50 var centerPanel = new Ext.Panel({
51 region: 'center', //边界布局,必须有 center
52 html: ''
53 });
54
55 var viewport = new Ext.Viewport({ //生成一个 ExtJS 视窗 组件对象
56 renderTo: Ext.getBody(), //呈现在 Html Body标签中
57 layout: 'border', //使用边界布局
58 items:[northPanel, eastPanel, southPanel, westPanel, centerPanel]
59 });
60 }
61
62 Ext.onReady(alex.extjs.layout.PrettyPanel);
分享到：
发表评论
-
extjs和jquery各适用于什么场景
2013-01-23 09:49 2073比较点 extjs jquery 是 ... -
extjs和jquery各适用于什么场景
2013-01-21 11:14 14131.应该说粒度不同，extjs ... -
sqlite 数据类型 全面
2011-06-14 13:49 1292一般数据采用的固定的 ... -
extjs direct下载地址
2010-09-11 18:23 1178http://code.google.com/p/direct ... -
json返回数据，首先要做的事
2010-09-08 12:45 1162var json=eval("("+jso ... -
ExtJS 面向对象
2010-08-25 15:15 10051：支持命名空间 <script type=&qu ... -
Ext.data-DataProxy/HttpProxy/MemoryProxy/ScriptTagProxy
2010-08-03 09:15 1178Ext.data-DataProxy/HttpProxy/Me ... -
extjs表单的提交
2010-06-24 17:01 12762//ExtJs 表单提交 form.getForm(). ... -
JSONLib解析json数组
2010-06-24 15:33 1734public class JsonHelper { /** ... -
Jsonlib
2010-06-24 13:13 1360使用JSON-LIB可以极大的简化JAVA对象转换成JSON对 ... -
以"对象"方式接收json数据.(解决乱码问题)
2010-06-24 10:36 5425客户端(传输数据无中文): Java代码 //序号控件失去 ... -
extjs的xtype
2010-06-24 09:06 1318基本组件： xtype Class 描述 button E ... -
EXTJS 查询数据,分页显示时传送自定义参数,添加控件的任何事件模板
2010-06-21 13:25 2213EXTJS 查询数据,分页显示时传送自定义参数,添加控件的任何 ... -
Extjs 分页查询的参数问题
2010-06-21 12:57 2414先按条件查询数据，再点下一页保留住查询条件,解决方案是将查询参 ... -
EXT中grid分页实现的完整例子－－－从前台到后台
2010-05-25 00:14 13717// -------------------- 定义grid- ... -
ExtJs的el和contentEl的区别
2010-05-19 16:46 34351、把<div id="div_exam&qu ... -
Ext gird分页学习
2010-04-23 13:33 1061var store = new Ext.data.Store( ... -
SModel了解
2010-04-21 09:35 15171、比较 jsonlib，Xstream，gson，smode ... -
xstream实现JAVA对象和XML的相互转化
2010-04-20 21:56 2515首页 http://xstream.codehaus.org ... -
使用XStream把Java对象XML/JSON格式的序列化和反序列化
2010-04-20 21:54 2042试了一下Thoughtworks的XStream，以测试驱动和 ...
相关推荐
#### 一、Border布局简介 在ExtJS框架中，`border`布局是一种非常常见的布局方式，它将容器划分为五个区域：north（北）、south（南）、east（东）、west（西）以及center（中心）。通过这种布局方式可以非常方便地...
接下来是Border布局的一个实际应用示例，通过ExtJS提供的代码样例，我们可以看到如何通过编程方式创建一个使用Border布局的页面： ```javascript Ext.onReady(function(){ new Ext.Viewport({ layout: "border", ...
ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor 另外，不常见的布局有：tab、vbox、hbox 具体使用方法可见该文件的案例代码。 该文件含ext3.2.0压缩版，可直接运行哦...
资源名称：ExtJS布局之border实例 中文WORD版内容简介：border布局是常见的布局样式，本文档中一个实际项目的示例，比较简单，仅供初学者参考。感兴趣的朋友可以过来看看资源截图： 资源太大，传百度网盘了，链接在...
- **边框布局（BorderLayout）**：使用`layout: "border"`，将容器分为东、南、西、北、中五个区域，每个区域可放置不同的组件，如`east`, `south`, `west`, `north`, `center`。 - **卡片式布局（CardLayout）**...
Border布局是由`Ext.layout.BorderLayout`定义的，其核心概念是将容器分为“东”、“南”、“西”、“北”和“中心”五个区域，每个区域都可以放置不同的组件。这种布局非常适合创建具有固定头部、底部和侧边栏的...
在ExtJS中，折叠布局（Accordion Layout）是一种特殊的布局方式，它将所有子组件（Panels）垂直堆叠，并且在任何时刻只允许一个面板展开显示其内容，其他面板则保持折叠状态。`layout: 'accordion'` 就是用来设置...
ExtJS布局是构建用户界面的关键部分，特别是在使用ExtJS库时。本文主要讲解ExtJS的Column布局，一种非常灵活的布局方式，可以帮助开发者创建复杂的、响应式的用户界面。 Column布局在ExtJS中用于将容器（如Panel）...
在本篇文章中，我们将深入探讨如何在ExtJS MVC框架下实现Border布局，以构建高效且灵活的用户界面。 **什么是ExtJS MVC** MVC模式是一种软件设计模式，将应用程序分为三个主要部分：模型（Model）、视图（View）和...
总之，ExtJS提供了一系列强大的布局管理功能，包括`column`、`fit`和`border`布局，以及动态添加和删除子元素的能力，这些都极大地增强了Web应用程序的灵活性和响应性。掌握这些布局技巧对于构建高质量的Web应用界面...
6. **页面布局**：整个页面可能使用了ExtJS 的布局管理器，如`border`布局，将页面分为左侧和右侧两部分，左侧是TreePanel，右侧是可折叠的TabPanel。 7. **URL 链接处理**：`嘉瑞传播.url`可能是一个树节点的`href...
- Border布局是ExtJs中最复杂的布局之一，允许将容器分为五个区域：北部（north）、南部（south）、东部（east）、西部（west）和中心（center）。在这种布局中，左侧通常会设置为“west”区域，用于放置树形导航。...
本文将深入探讨两种ExtJS 4中的布局方式：Accordion布局和Border布局。 首先，我们来看Accordion布局。Accordion布局，又称为手风琴布局，它的特点是只有一个面板处于展开状态，其余面板均折叠。这种布局适用于展示...
- **定义**：Border布局由类`Ext.layout.BorderLayout`定义，布局名称为`border`，这是一种非常实用且常见的布局方式，适用于创建具有固定结构的应用界面。 - **特性**： - 将容器划分为东、南、西、北和中心五个...
### ExtJS布局管理学习指南 #### 一、引言 ExtJS是一款强大的JavaScript框架，用于构建复杂的前端应用程序。其中布局管理是ExtJS的核心特性之一，它可以帮助开发者有效地组织UI组件，使得用户界面既美观又实用。...
第十讲.ExtJS布局模式-Column、Table、Border 第十一讲.ExtJS布局模式-Box布局、使用ViewPort布局首页 第十二讲.ExtJS之Ext常用函数 第十三讲.ExtJS之Ext常用函数（二） 第十四讲.初识Ajax 第十五讲.ExtJS对...
本文将详细介绍Extjs4中三种主要的布局方式：Fit布局、Border布局和Accordion布局。 Fit布局是Extjs4中提供的简单布局之一。当一个容器采用Fit布局时，其子元素将自动填满整个父容器的空间。这意味着子元素的尺寸会...
### Extjs FieldSet 两行两列布局解析 在Extjs框架中，`FieldSet`是一种常见的组件，常用于组织一组相关的表单字段，并通过一个标题来标识这组字段的主题。本文将详细介绍如何使用Extjs实现一个两行两列布局的`...