本篇讲解三个容器类控件。
一、面板控件 Ext.Panel
一个面板控件包括几个部分，有标题栏、工具栏、正文、按钮区。标题栏位于最上面，工具栏可以在四个位置放置，围绕中间部分正文，按钮区位于最小方。下面介绍几个基本配置项：
1.title:设置面板标题文本。
2.tbar,lbar,rbar,bbar:分别设置上、左、右、下四个部位的工具栏。
3.html，items:前者用来设置正文部分的html，后者设置正文部分的ext控件。
4.buttons:设置按钮区的按钮。
下面看看面板生成代码：
[html]
|
1
2
3
|
<h1>Panel</h1><div id="div1" class="content"></div> |
[Js]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
Ext.onReady(function () { var p = Ext.create('Ext.Panel', { title: '面板标题', collapsible: true, renderTo: 'div1', 400, height: 300, autoScroll: false, bodyBorder: true, buttonAlign: 'right', buttons: [{ text: "按钮1", handler: function () { Ext.Msg.alert("提示", "第一个事件"); }, id: "bt1" }, { text: "按钮2", id: "bt2" } ], floating: true, footerCfg: { tag: 'span', id: 'span1', html: '面板底部' }, items: [{ xtype: "button", text: "按钮" }], tbar: Ext.create('Ext.toolbar.Toolbar', { items: ["工具栏"] }), html: "<b>正文</b>" }); p.setPosition(40, 50);}); |
效果如下：
二、窗口控件 Ext.window.Window
窗口控件与面板控件基本类似，只不过他看起来像一个窗口，具备最大化，最小化，打开关闭、拖动等窗口操作，下面看看窗口生成代码：
下面看看面板生成代码：
[html]
|
1
2
3
4
5
|
<h1>窗口</h1><div class="content" style="height:300px"><button id="button1">打开窗口</button> <div id="win1"></div></div> |
[Js]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
Ext.onReady(function () { var window1 = Ext.create('Ext.window.Window', { applyTo: 'win1', layout: 'table', //内部元素布局方式{absolute accordion anchor border card column fit form table} 500, height: 200, closeAction: 'hide', //窗口关闭的方式：hide/close plain: true, title: "窗口标题", maximizable: true, //是否可以最大化 minimizable: true, //是否可以最小化 closable: false, //是否可以关闭 modal: true, //是否为模态窗口 resizable: false, //是否可以改变窗口大小 items: [{ text: '按钮', xtype: "button" }, { 214, minValue: 0, maxValue: 100, value: 50, xtype: "slider" }, { xtype: "button", text: '一个菜单', "60px", height: "15px", menu: { items: [ new Ext.ColorPalette({ listeners: { select: function (cp, color) { Ext.Msg.alert('颜色选择', '你选择了' + color + '。'); } } }), '-', { text: '菜单项1' }, { text: '菜单项2' }, { text: '菜单项3' } ] } }], buttons: [{ text: '确定', disabled: true }, { text: '取消', handler: function () { window1.hide(); } }] }); Ext.fly("button1").on("click", function () { window1.show(Ext.get("button1")); });}); |
效果如下：
三、布局控件 Ext.container.Viewport
布局控件一般用于整个页面的排版布局，它按四个方向分为四块区域，和中间正文部分，四个区域都可以自动隐藏，其实这个控件的核心功能就是用到了“border”方式的布局，下面看看生成代码：
[Js]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
Ext.onReady(function () { Ext.create('Ext.container.Viewport', { layout: 'border', items: [{ region: 'north', html: '<h1>这里放置logo</h1>', xtype: "panel", title: "标题", autoHeight: true, border: false, margins: '0 0 5 0' }, { region: 'west', collapsible: true, title: '左侧导航', xtype: 'panel', 200, autoScroll: true }, { region: 'center', xtype: 'tabpanel', activeItem: 0, items: { title: '首页', html: '这里是首页正文内容' } }, { region: 'south', title: '底部', collapsible: true, //允许折叠 html: '这里放置版权信息', split: true, height: 100, minHeight: 100 }] });}); |
效果如下：
