Ext4.2学习之Slider滑动条表单控件

lang20150928

于 2021-03-20 12:01:45 发布

阅读量341

点赞数

分类专栏： extjs 文章标签： html js

本文链接：https://blog.csdn.net/m0_37607945/article/details/115025263

版权

extjs 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

顾名思义，滑动条表单控件就是可以将滑动条作为一个表单控件放在表单面板中进行布局，实现表单数据的修改、读取与提交功能。
在这里插入图片描述

如果在一个滑动条上指定多个滑块，使用values属性即可

最后通过getValues函数获取滑动条的数值，返回的结果是一个字符串，如果是多个滑块，那么返回的数值以逗号进行分割。

对应源码如下

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link type="text/css" rel="stylesheet" href="ext-4/resources/css/ext-all.css"/>
    <script type="text/javascript" src="ext-4/ext-all.js"></script>
    <script type="text/javascript" src="ext-4/locale/ext-lang-zh_CN.js"></script>
    <script type="text/javascript">
        Ext.onReady(function () {
            var form = new Ext.form.FormPanel({
                width: 800,
                height: 200,
                title: '滑动条表单控件',

                bodyStyle: 'padding: 10px;',
                renderTo: 'container',
                // 定义滑块
                defaultType: 'sliderfield',
                buttonAlign: 'left',
                // 拉动滑块的时候会显示值
                defaults: {
                    anchor: '95%',
                    tipText: function (thumb) {
                        return String(thumb.value) + '%';
                    }
                },
                items: [{
                    fieldLabel: 'Sound Effects',
                    value: 50,
                    name: 'fx'
                }, {
                    fieldLabel: 'Ambient Sounds',
                    value: 80,
                    name: 'ambient'
                }, {
                    fieldLabel: 'Interface Sounds',
                    value: 25,
                    name: 'iface'
                }],
                buttons: [{
                    text: 'submit'
                }, {
                    text: 'reset'
                }]
            });

            var horizontal = new Ext.Slider({
                renderTo: 'multi-slider-horizontal',
                width   : 214,
                minValue: 0,
                maxValue: 100,
                values  : [10, 50, 90],
                plugins : new Ext.slider.Tip()
            });

            var vertical = new Ext.Slider({
                renderTo : 'multi-slider-vertical',
                vertical : true,
                height   : 214,
                minValue: 0,
                maxValue: 100,
                values  : [10, 50, 90],
                plugins : new Ext.slider.Tip()
            });

            Ext.get('btn').on('click', function() {
                // 点击按钮时 获取水平滑块和垂直滑块的值
                Ext.Msg.alert('info', horizontal.getValues() + '|' + vertical.getValues());
            });

        });
    </script>
</head>
<body>
<div id="container" style="margin:20px;"></div>
<div id="multi-slider-horizontal" style="margin:20px;"></div>
<div id="multi-slider-vertical" style="margin:20px;"></div>

<button id="btn">btn</button>
</body>
</html>

lang20150928

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ext4.2学习之Slider滑动条表单控件

顾名思义，滑动条表单控件就是可以将滑动条作为一个表单控件放在表单面板中进行布局，实现表单数据的修改、读取与提交功能。如果在一个滑动条上指定多个滑块，使用values属性即可最后通过getValues函数获取滑动条的数值，返回的结果是一个字符串，如果是多个滑块，那么返回的数值以逗号进行分割。对应源码如下<!DOCTYPE html><html><head> <title>Hello World</title>
复制链接

扫一扫