Ext.slider控件的用法

短命女 2022-07-21 12:22 213阅读 0赞

Ext提供的slider组件含有横向、纵向，以及单值、多值选择的特性，我们可以利用这些属性设计出漂亮的滚轴控件，下面介绍几个Ext.slider控件的实例：

**一、定义slider滚轴控件**

<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>

//横向，初始值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); } }) });

**效果图**

![20140504225350828.gif][]

**二、获取、设置滚轴控件的值**

<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>

//设置滚轴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()); });

**效果图**

![20140504225426610.gif][]

JScript 代码    复制

[20140504225350828.gif]: /images/20220720/8cbb55bba2844cda8e8bcf17c01e5145.png
[20140504225426610.gif]: /images/20220720/c4864282d1774c21aee4a13cb6234884.png