Text inside spinner

[halogen]

I want to put a unit after the number in a spinner that is sensitive to plurality. e.g. instead of "1", "2", and "3", I want it to display "1 person", "2 people", and "3 people".

And no, putting a note in the label to remind the user what the units are is not satisfactory. The text has to be after the number and to the left of the minus and plus buttons. And it has to be changeable based on the value of the spinner.

[jerome76]

Try inspecting the elements of where the "1", "2", and "3", show up and see if you can replace them with the "1 person", "2 people", and "3 people" that you want.

If that doesn't work out I also suggest you look at the source code for Ext.Spinner and see how they build the "1", "2", and "3". Then create some sort of override for it.

Good luck! Time for the weekend for me

[halogen]

I looked through the source code of Spinner.js and found that it is a child of the Number class, which means I'll have to define a new "SpinnerWithUnits" class that extends the Text class in order to allow non-numerical characters to show up in the HTML element.

Maybe someone has already written such a class. I'll keep looking.

[net02]

Actually you can extend the basic spinner and put text in it by overriding its component input type!
This way you don't have to extend a textfield adding the whole spinner logic

Here's a quick example

Ext.define('My.pplSpinner', {
    extend: 'Ext.field.Spinner',
    alias: 'widget.pplspinner',

    config: {
        component: {
             //here's the <input type="..."> fix
            type: 'text'
        }
    },
    
    updateValue: function(newValue, oldValue) {
        if (newValue > 1)
            newValue = newValue + ' people';
        else
            newValue = newValue + ' person';
  
        this.callParent([newValue, oldValue]);
    },
    
    getValue: function() {
        // parseInt will do the dirty job of cutting off the attached string
        return parseInt(this.getComponent().getValue());
    }
});