本篇要登场的有三个控件,分别是滚轴控件、进度条控件和编辑控件。
一、滚轴控件 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
|
//横向,初始值50
var slider1 = Ext.create(
'Ext.slider.Single'
, {
renderTo:
'slider1'
,
width: 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'
,
width: 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的值为10
Ext.fly(
"button1"
).on(
'click'
,
function
() {
slider1.setValue(10);
});
//获取滚轴1的值
Ext.fly(
"button2"
).on(
'click'
,
function
() {
Ext.MessageBox.alert(
"获取值"
,
"滚轴1的值:"
+ slider1.getValue());
});
//设置滚轴3的值为10,15
Ext.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
=
"width: 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'
,
width:
'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'
,
width:
'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'
,
width: 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: {
width: 110,
id:
"combo1"
,
//renderTo: 'div2',
triggerAction:
'all'
,
xtype:
'combo'
,
editable:
false
,
forceSelection:
true
,
store: [
'下拉项1'
,
'下拉项2'
,
'下拉项3'
]
}
});
var
panel =
new
Ext.Panel({
renderTo:
"div2"
,
width: 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);
});
}
}
});
|
效果如下:
处于编辑状态时:
作者:李盼(Lipan)
出处: [Lipan] ( http://www.cnblogs.com/lipan/)
版权声明:本文的版权归作者与博客园共有。转载时须注明本文的详细链接,否则作者将保留追究其法律责任。
出处: [Lipan] ( http://www.cnblogs.com/lipan/)
版权声明:本文的版权归作者与博客园共有。转载时须注明本文的详细链接,否则作者将保留追究其法律责任。