Ext js 4 slider always show tip demo

最新推荐文章于 2021-03-20 12:01:45 发布

原创最新推荐文章于 2021-03-20 12:01:45 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

extjs 专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何在ExtJS 4中创建一个始终显示提示文本的滑块组件。通过重写Ext.slider.Tip类并移除拖动结束时隐藏提示的功能，使得滑块的提示文本始终保持可见。

Ext js 4 slider always show tip demo

Ext.define('AlwaysVisibleTip', {
    extend: 'Ext.slider.Tip',

    init: function(slider) {
        var me = this;
        me.callParent(arguments);
        slider.removeListener('dragend', me.hide);
        slider.on({
            scope: me,
            change: me.onSlide,
            afterrender: function() {
                setTimeout(function() {
                    me.onSlide(slider, null, slider.thumbs[0]);
                }, 100);
            }
        });
    }
});
Ext.create('Ext.slider.Single', {
    width: 200,
    value: 50,
    increment: 1,
    minValue: 0,
    maxValue: 100,
    plugins: [Ext.create('AlwaysVisibleTip',{
        getText: function(thumb) {
            
            return thumb.value + '%';
        }
    })],
    tipText : function(thumb)
    {
        return thumb.value + '%';
    },
    renderTo: Ext.getBody()
});