Alex刺客

Dancing fingers, damage world. -- 舞动手指,破坏世界.

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  57 随笔 :: 0 文章 :: 76 评论 :: 0 Trackbacks
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);

3效果图
Images1


posted on 2010-08-03 09:08 Alex刺客 阅读(1408) 评论(0)  编辑  收藏 所属分类: ExtJS

只有注册用户登录后才能发表评论。


网站导航: