ExtJs4 札记（8） Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件
日期：2014-05-16 浏览次数：20359 次
本篇要登场的有三个控件，分别是滚轴控件、进度条控件和编辑控件。 下面我们定义三个具有代表意义滚轴控件，分别展示滚轴横向、纵向，以及单值、多值选择的特性：一、滚轴控件 Ext.slider
1.滚轴控件的定义
<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]
//横向，初始值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]
<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的值为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]
<div class="content">
<button id="button1">执行</button>
<div id="p1" style="width: 300px;"></div>
</div><br />
[Js]
//加载进度条
var progressBar1 = Ext.create("Ext.ProgressBar", {
id: "progressBar1",
text: '准备中...',
renderTo: 'p1'
