2

好的，所以我想要一个看起来像这样的滑块。

只是无法弄清楚我们至少可以在哪里使用这些分隔符分隔符？因此，如果您看到有 7 个分隔符，并且我们在前 4 个和最后一个分隔符上有大标签。

您将如何处理这项任务？

在此处输入图像描述

4

3 回答 3

2

这是一个相当古老的问题，但我今天也面临着同样的需求。基于 GenieWanted 的回答，我得出了这个结论：

...
    {
        xtype: 'sliderfield',
        maxValue: 5,
        label: 'Some data',
        html: '<table width="100%" align="left"><tr><td width="25%">Min</td><td width="50%" align="center">Med</td><td width="25%" align="right">Max</td></tr></table>'        
    }
...

这对我来说非常有效，并且避免了寻找&nbsp;所需的正确数量。此外，我怀疑结果会因使用&nbsp;.

于 2014-04-17T21:12:20.790 回答
1

无法在滑块字段内添加标签。但是，您确实可以添加 HTML 来获得所需的输出。在配置面板上，转到 HTML 属性，然后添加如下内容：

<div style="padding-left:1em">|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|<div>Low&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Average &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;High </div></div>

我得到的输出：

在此处输入图像描述

您只需要调整 HTML 中文本的对齐方式。这样就行了！

祝你好运！

于 2013-07-12T06:11:27.043 回答
0

您可以像这样创建自定义滑块

Ext.ns('Ext.ux');
Ext.ux.CustomSlider = Ext.extend(Object, {
    valueTextClass: 'x-slider-value-text',
    showSliderBothEndValue: true,
    sliderEndValueStyle: 'color: black',

    constructor: function(config){
        Ext.apply(this, config);
        Ext.ux.CustomSlider.superclass.constructor.apply(this, arguments);
    },
    init: function(parent) {
        var me = this;
        parent.on({
            painted: {
                fn: function(component) {
                    if (me.showSliderBothEndValue) me.showSliderEndValue(this);
                    if (!this.valueTextEl) {
                        this.valueTextEl = component.element.createChild({
                            cls: me.valueTextClass
                        });
                    }
                }
            }
        });
    },
    showSliderEndValue: function(slider) {
        var sliderPosX = slider.getComponent().getThumb().element.getX();
        var thumbHeight = slider.getComponent().getThumb().element.getHeight();
        var sliderLength = slider.getComponent().element.getWidth();
        var minValueEl = slider.getComponent().element.createChild();
        minValueEl.setHtml(slider.getComponent().getMinValue());
        minValueEl.applyStyles('overflow:hidden;position:absolute');
        minValueEl.applyStyles(this.sliderEndValueStyle);
        minValueEl.setLeft(14);
        minValueEl.setTop(thumbHeight -7);
        var maxValueEl = slider.getComponent().element.createChild();
        maxValueEl.setHtml(slider.getComponent().getMaxValue());
        maxValueEl.applyStyles('overflow:hidden;position:absolute');
        maxValueEl.applyStyles(this.sliderEndValueStyle);
        maxValueEl.setLeft(sliderLength-45);
        maxValueEl.setTop(thumbHeight - 7);
    }
});

并像这样创建滑块

var slider = {
    xtype: 'sliderfield',
    flex : 6,
    label: "Percentage",
    name: "Percentage",
    value : 50,
    minValue : 0,
    maxValue : 100,
    labelWrap : true,
    labelAlign : 'left',
    increment : 10,
    plugins: [new Ext.ux.CustomSlider({
        showSliderBothEndValue: true
    })],
    listeners: {
        painted: function (slider) {
            var sliderPanelItems = this.parent.getInnerItems();
            sliderPanelItems[1].setValue(this.getValue());
        }, 
        change: function (me,slider, thumb, newVal, oldVal, opts) {
            var sliderPanelItems = this.parent.getInnerItems();
            sliderPanelItems[1].setValue(newVal);
      } 
    } 
};

结果会是这样

在此处输入图像描述

我使用这个链接做了这个

于 2013-07-12T10:37:48.157 回答