[html]

 代码如下

   

滚轴控件

   
       

横向，初始值50

       

       

纵向，带提示

       

        

多值，自定义提示

       
   

[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("当前：{0}/20", thumb.value);
            }
        })
    });

2.获取、设置滚轴控件的值
[html]

 代码如下    

操作滚轴控件

   
    设置滚轴1的值为10
    获取滚轴1的值
    设置滚轴3的值为10,15
    获取滚轴3的值集合
   

[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());
    });

效果图片如下

extjs4.2_extjs4中滚轴控件 Ext.slider的用法

http://m.bbyears.com/wangyezhizuo/32994.html

推荐访问:extjs4api