shmily2038
- 浏览: 817641 次
- 性别:
- 来自: 厦门
-
文章分类
- 全部博客 (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 2034比较点 extjs jquery 是 ... -
extjs和jquery各适用于什么场景
2013-01-21 11:14 13801.应该说粒度不同，extjs ... -
sqlite 数据类型 全面
2011-06-14 13:49 1251一般数据采用的固定的 ... -
extjs direct下载地址
2010-09-11 18:23 1111http://code.google.com/p/direct ... -
json返回数据，首先要做的事
2010-09-08 12:45 1102var json=eval("("+jso ... -
ExtJS 面向对象
2010-08-25 15:15 9791：支持命名空间 <script type=&qu ... -
Ext.data-DataProxy/HttpProxy/MemoryProxy/ScriptTagProxy
2010-08-03 09:15 1142Ext.data-DataProxy/HttpProxy/Me ... -
extjs表单的提交
2010-06-24 17:01 12704//ExtJs 表单提交 form.getForm(). ... -
JSONLib解析json数组
2010-06-24 15:33 1695public class JsonHelper { /** ... -
Jsonlib
2010-06-24 13:13 1327使用JSON-LIB可以极大的简化JAVA对象转换成JSON对 ... -
以"对象"方式接收json数据.(解决乱码问题)
2010-06-24 10:36 5382客户端(传输数据无中文): Java代码 //序号控件失去 ... -
extjs的xtype
2010-06-24 09:06 1273基本组件： xtype Class 描述 button E ... -
EXTJS 查询数据,分页显示时传送自定义参数,添加控件的任何事件模板
2010-06-21 13:25 2159EXTJS 查询数据,分页显示时传送自定义参数,添加控件的任何 ... -
Extjs 分页查询的参数问题
2010-06-21 12:57 2378先按条件查询数据，再点下一页保留住查询条件,解决方案是将查询参 ... -
EXT中grid分页实现的完整例子－－－从前台到后台
2010-05-25 00:14 13681// -------------------- 定义grid- ... -
ExtJs的el和contentEl的区别
2010-05-19 16:46 33991、把<div id="div_exam&qu ... -
Ext gird分页学习
2010-04-23 13:33 1029var store = new Ext.data.Store( ... -
SModel了解
2010-04-21 09:35 14631、比较 jsonlib，Xstream，gson，smode ... -
xstream实现JAVA对象和XML的相互转化
2010-04-20 21:56 2486首页 http://xstream.codehaus.org ... -
使用XStream把Java对象XML/JSON格式的序列化和反序列化
2010-04-20 21:54 2008试了一下Thoughtworks的XStream，以测试驱动和 ...
相关推荐
ExtJS布局之border实例，有代码 border布局是常见的布局样式，下面是一个实际项目的示例，比较简单，仅供初学者参考。
ExtJS border布局使用说明，需要的朋友可以参考下。
ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor 另外，不常见的布局有：tab、vbox、hbox 具体使用方法可见该文件的案例代码。 该文件含ext3.2.0压缩版，可直接运行哦...
资源名称：ExtJS布局之border实例 中文WORD版内容简介：border布局是常见的布局样式，本文档中一个实际项目的示例，比较简单，仅供初学者参考。感兴趣的朋友可以过来看看资源截图： 资源太大，传百度网盘了，链接在...
第十讲.ExtJS布局模式-Column、Table、Border 第十一讲.ExtJS布局模式-Box布局、使用ViewPort布局首页 第十二讲.ExtJS之Ext常用函数 第十三讲.ExtJS之Ext常用函数（二） 第十四讲.初识Ajax 第十五讲.ExtJS对...
EXTJS4自学手册——EXT容器布局（Fit,Card,Border） EXTJS4自学手册——EXT组件布局 四、Extjs页面控件 EXTJS4自学手册——页面控件（表格） EXTJS4自学手册——页面控件（表格的特性属性） EXTJS4自学手册——页面...
7)Border区域布局 8)ExtJS的组件 9)Column列布局 10)组件的使用 11)Fit布局 12)Form布局 13)组件的配置属性 14)Accordion布局 15)事件处理 16)Card布局 17)Pable布局及其它布局 18)工具栏Toolbar 19)选项面板...
Border布局由类Ext.layout.BorderLayout定义，布局名称为border。
3、通过实现角色管理、用户管理、部门管理三个基础的功能模块，演示了Viewport、Container、Panel、Grid、Window、Form、Tree等常用组件的用法，以及border、column、form、fit、accordion、hbox等常用布局方式；...
mvc个人写的 boeder布局
border布局是常见的布局样式，下面是一个实际项目的示例，比较简单，仅供初学者参考。 前两天遇到一个border布局的界面问题，如下： west是一个tree a，center是一个tree b和一个Panel，如下图
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 ...
4、通过实现角色管理、用户管理两个基础的功能模块，演示了Viewport、Container、Panel、TreePanel、Grid、Window、Form等常用组件的用法，以及border、column、form、fit、hbox等常用布局方式； 5、通过自定义一个...
……………………………………………………………………………………………………26 5.2 Border区域布局……….…………………………………………………………………………………………….27 5.3 Column列布局...
经常用到上下左右，中间填充满这样的布局，在java swing中有BorderLayout，HTML中通常使用CSS来实现布局，但要实现border layout这样的效果有些麻烦，很多第三方实现，比如easyui, extjs，功能过于强大，我只是想要...
我只说一下安装和汉化的步骤 ，需要下载的都已经下载在资源里面了！ 第一步：Ext需要支持AIR的支持。下载并安装 ... ...附：以处提供两个教程：Border布局.7z，Combobox.7z，请下载7z格式解压包查看
目录 第一章 ExtJs大比拼JQuery：Dom文档操作 3 一、选择器 4 二、属性 8 四、筛选 10 五、文档处理 11 ...四、border 144 五、card 146 六、column 148 七、fit 150 八、table 151 九、vbox 152 十、hbox 154