Ext.define('TP.Slider', {
    extend: 'Ext.panel.Panel',

    alias:  'widget.tp_slider',

    layout: {
        type: 'table',
        columns: 2,
        tableAttrs: {
            style: {
                width: '100%'
            }
        }
    },
    border: 0,
    items: [{
        xtype:      'sliderfield',
        minValue:   -1,
        maxValue:   300,
        width:      '100%',
        tipText: function(thumb){
            return String(TP.sliderValue2Txt(thumb.value));
        },
        listeners: {
            change: function(s) {
                var form    = s.up('form').getForm();
                var v       = s.getValue();
                var label   = s.up('panel').formConf.nameL;
                var newv    = {};
                newv[label] = TP.sliderValue2Txt(v);
                form.setValues(newv);
            }
        }
    }, {
        xtype:     'textfield',
        margin:    '0 0 0 10',
        readOnly:  true,
        cellCls:   'slider_txt',
        readOnly:  true,
        size:      4,
        maxLength: 7
    }],

    initComponent: function() {
        this.callParent();
        this.items.getAt(0).fieldLabel = this.formConf.fieldLabel;
        this.items.getAt(0).value      = this.formConf.value;
        this.items.getAt(0).name       = this.formConf.nameS;
        if(this.formConf.minValue != undefined) {
            this.items.getAt(0).minValue   = this.formConf.minValue;
        }
        this.items.getAt(1).name       = this.formConf.nameL;
    }
});
