gistfile1.txt

Ext.define('RIP.LabeledSlider',{
    /* A slider that shows its value next to it*/
    extend: 'Ext.field.Slider',
    xtype: 'labeledslider',
    updateToolTip: function() {
        this.valuediv.innerHTML = this.getValue();
    },
    reset: function() {
        this.callParent(arguments);
        this.updateToolTip();
    },
    config: {
        listeners: {
            initialize: function() {
                this.element.appendChild(Ext.Element.create({
                    'tag':'div', class:'sliderValue', html:0,
                    'style': 'font-weight: bold; padding: 18px 11px; width:2.5em'
                }));
                this.valuediv = this.element.query('.sliderValue')[0];
                this.getComponent().on({
                    scope: this,
                    drag: 'updateToolTip'
                });
                this.on({
                    scope: this,
                    change: 'updateToolTip',
                    show: 'updateToolTip'
                });
            }
        }
    }
});