Ext.namespace( 'instore.extlib.ui.form' );

instore.extlib.ui.form.SliderField = Ext.extend(Ext.Slider, {
  isFormField: true,
  onRender: function() {
    instore.extlib.ui.form.SliderField.superclass.onRender.apply(this, arguments);
    this.nrField = this.el.createChild({
      tag: 'input', 
      type: 'text',
      name: this.name,
      value: this.value,
      disabled:true,
      'class': "x-form-text",
      style: 'position:relative; float:right; left: 105px; margin-top:-22px; font-size:10px; width:80px;'
    });
  },
  setValue: function(v) {
    if(this.maxValue && v > this.maxValue) v = this.maxValue;
    if(this.minValue && v < this.minValue) v = this.minValue;
    
    instore.extlib.ui.form.SliderField.superclass.setValue.apply(this, arguments);
    this.nrField.dom.value = v;
  },
  getValue: function() {
    var v = this.nrField.dom.value;
    instore.extlib.ui.form.SliderField.superclass.setValue.apply(this, [v]);
    return v;
  },
  markInvalid: Ext.emptyFn,
  clearInvalid: Ext.emptyFn,
  validate: function() {
    this.nrField.dom.disabled=false;
    return true;
  }
});
Ext.reg('sliderfield', instore.extlib.ui.form.SliderField);

Ext.namespace( 'instore.extlib.ui.form.plugin' );
instore.extlib.ui.form.PercentField = Ext.extend(instore.extlib.ui.form.SliderField, {})
Ext.reg('percentfield', instore.extlib.ui.form.PercentField);