View Full Version : Change text on slider label

15 Nov 2010, 7:54 AM
I found a thread about doing this indicated that the only way to change the text on a label would be to manipulate the DOM directly. That thread is a couple of years old so I thought I'd just check to see if that's still the case. Is there still no support for changing the text on the label of a slider control (when using it on a form)? Is it the same situation for changing the text on a normal label?


18 Nov 2010, 7:17 AM
I eventually solved this by just poking around at the HTML and the DOM. It would really help if there was a function on the Slider class to do this, since this question seems to have been asked a few times. Although I found a post that created a new type extended from Slider, it doesn't help if you want to use the Ext Designer during development.

Anyway, my solution. The first thing to do is get the id for the label, which you can get to by navigating from the slider like this:
var labelId = Ext.getCmp('mySliderId').el.parent().dom.previousSibling.id;

If you're doing this from the Slider's change event, the first argument is a reference to the slider, so with that you can do this:
var labelId = slider.el.parent().dom.previousSibling.id;

Once you have the id you can change the text like this:
Ext.get(labelId).update('new text goes here');

Hopefully this will be of some use to someone.


19 Nov 2010, 7:23 AM
Slight update. If your using a SliderField instead of a Slider, then you get the label like this:
var labelId = slider.el.parent().parent().dom.previousSibling.id;


30 Nov 2010, 1:16 AM
Thx for your answer, I found a solution myself (extending a Ext.form.NumberField) by basically doing this at runtime:

var ct = this.el.findParent('div.x-form-item', 3, true);
var label = ct.first('label.x-form-item-label');