Results 1 to 8 of 8

Thread: Styling value of spinner

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Mar 2012
    Vote Rating

    Default Answered: Styling value of spinner


    I have a spinner:

    xtype: 'spinnerfield',
    id: 'Spinner',
    groupButtons: false,

    It's without a label, and the value field is between +/- signs.

    I want to style it, change it's height and background.

    Is it possible?

    I've tried using inputCls config, doesn't work...


  2. Working from the image you provided, I couldn't see a way to style the individual characters other than subclassing the spinner and re-writing the content. Here's how I did that starting with the new spinner class:

    Ext.define('My.ux.MySpinner', {
        extend: 'Ext.field.Spinner',
        xtype: 'myspinner',
        initialize: function() {
            // get the input element
            var inputEl = this.element.down("input");
            // insert a new element after the input
            // this will be used to re-write the value
            Ext.DomHelper.insertAfter(inputEl, {
                tag: 'div',
                cls: 'my-spinner-mask'
            // attach event handler used to update the mask
            this.on('change', this.handleSpin);
            // initialize the value in the mask
        updateSpinnerMask: function() {
            // split the spinner to individual characters
            var splitValue = new String(this.getValue()).split("");
            var newContent = "";
            // wrap each character in spans
            for(var i = 0; i < splitValue.length; i++) {
                newContent += "<span>" + splitValue[i] + "</span>";
            // update the spinner mask
        handleSpin: function(spinner, newValue) {
    This code essentially adds a new div element just under the input element and re-writes the value of the spinner with spans wrapping each character. After that, the following styles can be used:

    .x-spinner {
        background-color: transparent;
        input {
            display: none;
        .my-spinner-mask {
            position: relative;
            text-align: center;
            top: 50px;
            width: 100%;
            height: 44px;
            span {
                background-color: #333;
                color: #fff;
                margin-right: 2px;
                padding: 5px;
    to produce this result:

    Attachment 40148

    I hope this helps.


Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts