本篇要登场的有三个控件，分别是滚轴控件、进度条控件和编辑控件。
一、滚轴控件 Ext.slider
1.滚轴控件的定义
下面我们定义三个具有代表意义滚轴控件，分别展示滚轴横向、纵向，以及单值、多值选择的特性：
[html]
|
1
2
3
4
5
6
7
8
9
10
11
|
<h1>滚轴控件</h1><div class="content"> <h2>横向，初始值50</h2> <div id="slider1"></div> <h2>纵向，带提示</h2> <div id="slider2"></div> <h2>多值，自定义提示</h2> <div id="slider3"></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
|
//横向，初始值50var slider1 = Ext.create('Ext.slider.Single', { renderTo: 'slider1', 214, minValue: 0, maxValue: 100, value: 50});//纵向，带提示new Ext.create('Ext.slider.Single', { renderTo: 'slider2', height: 150, minValue: 0, maxValue: 20, vertical: true, plugins: new Ext.slider.Tip()});//多值，自定义提示var slider3 = Ext.create('Ext.slider.Multi', { renderTo: 'slider3', 214, minValue: 0, maxValue: 20, values: [5, 12], plugins: new Ext.slider.Tip({ getText: function (thumb) { return Ext.String.format('当前：<b>{0}/20</b>', thumb.value); } })}); |
2.获取、设置滚轴控件的值
[html]
|
1
2
3
4
5
6
7
|
<h1>操作滚轴控件</h1><div class="content"><button id="button1">设置滚轴1的值为10</button><button id="button2">获取滚轴1的值</button><button id="button3">设置滚轴3的值为10,15</button><button id="button4">获取滚轴3的值集合</button></div> |
[Js]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
//设置滚轴1的值为10Ext.fly("button1").on('click', function () { slider1.setValue(10);});//获取滚轴1的值Ext.fly("button2").on('click', function () { Ext.MessageBox.alert("获取值", "滚轴1的值：" + slider1.getValue());});//设置滚轴3的值为10,15Ext.fly("button3").on('click', function () { slider3.setValue(0, 10); slider3.setValue(1, 15);});//获取滚轴3的值集合Ext.fly("button4").on('click', function () { Ext.MessageBox.alert("获取值", "滚轴3的值集合：" + slider3.getValues());}); |
3.效果展示
二、进度条控件 Ext.ProgressBar
1.加载进度条
[html]
|
1
2
3
4
|
<div class="content"> <button id="button1">执行</button> <div id="p1" style=" 300px;"></div></div><br /> |
[Js]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
//加载进度条var progressBar1 = Ext.create("Ext.ProgressBar", { id: "progressBar1", text: '准备中...', renderTo: 'p1'});Ext.fly("button1").on('click', function () { //模拟加载环境 var f = function (v) { return function () { var i = v / 12; progressBar1.updateProgress(i, '进度：' + v + '/12'); if (v == 12) { Ext.Msg.alert("提示", "加载完毕！"); progressBar1.reset(); //复位进度条 progressBar1.updateText("完成。"); } }; }; for (var i = 1; i < 13; i++) { setTimeout(f(i), i * 200); }}); |
2.等候进度条
[html]
|
1
2
3
4
5
|
<div class="content"> <button id="button2">执行</button> <div id="p2"></div> <span id="p2text"></span></div><br /> |
[Js]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
//等候进度条var pbar2 = Ext.create("Ext.ProgressBar", { id: "progressBar2", renderTo: 'p2', '150px'});pbar2.on('update', function (val) { //每次更新可以执行的动作 Ext.fly('p2text').dom.innerHTML += '>';});Ext.fly("button2").on('click', function () { Ext.fly('p2text').update('正在启动windows2000：'); pbar2.wait({ interval: 200, //每次更新的间隔周期 duration: 5000, //进度条运作时间的长度，单位是毫秒 increment: 5, //进度条每次更新的幅度大小,表示走完一轮要几次（默认为10）。 fn: function () { //当进度条完成自动更新后执行的回调函数。该函数没有参数。 Ext.fly('p2text').update('完成。'); } });}); |
3.等候进度条，等待第三方事件
[html]
|
1
2
3
4
5
|
<div class="content"> <button id="button3">执行</button> <div id="p3"></div> <span id="p3text"></span></div> |
[Js]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
//等候进度条，当第三方事件结束时，停止。var pbar3 = Ext.create("Ext.ProgressBar", { renderTo: 'p3', '250px'});Ext.fly("button3").on('click', function () { pbar3.wait({ interval: 100, increment: 5 }); Ext.fly('p3text').update('第三方事件正在执行，请稍候....'); setTimeout(function () { pbar3.reset(); Ext.fly('p3text').update('执行完毕.'); }, 5000);}); |
4.效果展示
三、编辑控件 Ext.Editor
编辑控件可以作用在一般html元素或者其他ext基本控件上，从而然这些基本元素和控件具备了编辑某些值的能力。
1.用文本框编辑普通文本
下面通过一个编辑控件作用在span标签上，双击该标签即可编辑该标签的文本类容。
[html]
|
1
2
3
4
|
<h1>用文本框编辑普通文本</h1><div class="content"><span id="span1">请双击我修改文字</span></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
|
//用文本框编辑普通文本var editor1 = new Ext.Editor({ shadow: false, completeOnEnter: true, //按回车时自动完成 cancelOnEsc: true, //按ESC自动退出编辑 updateEl: true, //有变化时更新 ignoreNoChange: true, //不理会没有变化的情况 listeners: { complete: function (editor, value, oldValue) { Ext.Msg.alert('文本被改变', "从“" + oldValue + "” 变为“" + value + "”"); } }, field: { allowBlank: false, xtype: 'textfield', 150, selectOnFocus: true }});Ext.get("span1").on('dblclick', function (event, span1_dom) { editor1.startEdit(span1_dom);}); |
效果如下：
处于编辑状态时：
2.用下拉列表编辑
这个例子要修改Ext.Panel控件的标题。
[html]
|
1
2
3
4
|
<h1>用下拉列表编辑</h1><div class="content" id="div2"></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
|
//用下拉列表编辑var editor2 = new Ext.Editor({ shadow: false, completeOnEnter: true, cancelOnEsc: true, updateEl: true, ignoreNoChange: true, listeners: { complete: function (editor, value, oldValue) { Ext.Msg.alert('文本被改变', "从“" + oldValue + "” 变为“" + value + "”"); } }, field: { 110, id: "combo1", //renderTo: 'div2', triggerAction: 'all', xtype: 'combo', editable: false, forceSelection: true, store: ['下拉项1', '下拉项2', '下拉项3'] }});var panel = new Ext.Panel({ renderTo: "div2", 200, height: 50, collapsible: true, layout: 'fit', title: '请双击标题', listeners: { afterrender: function (panel) { panel.header.titleCmp.textEl.on('dblclick', function (event, label1_dom) { editor2.startEdit(label1_dom); }); } }}); |
效果如下：
处于编辑状态时：
