1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    76
    Vote Rating
    1
    Answers
    1
    Monti123 is on a distinguished road

      0  

    Default Answered: Styling value of spinner

    Answered: Styling value of spinner


    Hi,

    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...

    Thanks

  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:

    Code:
    Ext.define('My.ux.MySpinner', {
        extend: 'Ext.field.Spinner',
        xtype: 'myspinner',
    
    
        initialize: function() {
            this.callParent(arguments);
    
    
            // 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
            this.updateSpinnerMask();
        },
    
    
        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
            this.element.down('.my-spinner-mask').setHtml(newContent);
        },
    
    
        handleSpin: function(spinner, newValue) {
            this.updateSpinnerMask();
        }
    });
    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:

    Code:
    .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.

    Brice

  3. #2
    Sencha User bricemason's Avatar
    Join Date
    Jan 2008
    Location
    Upstate NY
    Posts
    280
    Vote Rating
    44
    Answers
    49
    bricemason has a spectacular aura about bricemason has a spectacular aura about bricemason has a spectacular aura about

      0  

    Default


    It's certainly possible. I did a test with inputCls as well and attempted to override the height and background.

    Just specifying an inputCls of something like my-spinner-input, and using the following css won't work.

    Code:
    .my-spinner-input {
        height: 90px;
        background-color: red;
    }
    because the selector isn't specific enough. Use the element inspector in Google Chrome to get a better handle on the css hierarchy and adjust the selector.

    Try it again and if you still can't get it going, post a more specific example.

    Brice
    Brice Mason
    Front End Developer
    Modus Create

    @bricemason
    bricemason.com

    Sencha Touch Screencasts
    Vimeo - Sencha Touch Channel

    Github Projects:
    Sencha Cordova Builder enables the automatic creation, building, and running of PhoneGap (Cordova) projects with Sencha Touch.

    Am I Sencha Touch Ready? checks your system to determine what you need to do to start Sencha Touch development. If you're having trouble getting up and running, try this out.

    Sencha Tools Bridge allows Sencha SDK Tools to co-exist with Sencha Cmd on the same system.

  4. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    76
    Vote Rating
    1
    Answers
    1
    Monti123 is on a distinguished road

      0  

    Default


    Hi Brice,

    Specifically, what I need is:
    1. A top-margin in the value, so it would be pushed down a bit comparing to the +\- buttons.
    2. An ability to style the numbers.
    See attached image.Spinner.png

    I tried margin-top - doesn't have any effect.
    padding-top has the same effect as height, it just makes the +\- button have more height but doesn't lower the value itself.

    Regarding background, seems like background-color effects all the area between the +\- buttons and not just the value...

    Thanks in advance.

  5. #4
    Sencha User bricemason's Avatar
    Join Date
    Jan 2008
    Location
    Upstate NY
    Posts
    280
    Vote Rating
    44
    Answers
    49
    bricemason has a spectacular aura about bricemason has a spectacular aura about bricemason has a spectacular aura about

      0  

    Default


    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:

    Code:
    Ext.define('My.ux.MySpinner', {
        extend: 'Ext.field.Spinner',
        xtype: 'myspinner',
    
    
        initialize: function() {
            this.callParent(arguments);
    
    
            // 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
            this.updateSpinnerMask();
        },
    
    
        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
            this.element.down('.my-spinner-mask').setHtml(newContent);
        },
    
    
        handleSpin: function(spinner, newValue) {
            this.updateSpinnerMask();
        }
    });
    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:

    Code:
    .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:

    screen-shot.png

    I hope this helps.

    Brice
    Last edited by bricemason; 18 Nov 2012 at 4:15 AM. Reason: originally specified handling the spin event. change event is better and will cover uses such as setValue()
    Brice Mason
    Front End Developer
    Modus Create

    @bricemason
    bricemason.com

    Sencha Touch Screencasts
    Vimeo - Sencha Touch Channel

    Github Projects:
    Sencha Cordova Builder enables the automatic creation, building, and running of PhoneGap (Cordova) projects with Sencha Touch.

    Am I Sencha Touch Ready? checks your system to determine what you need to do to start Sencha Touch development. If you're having trouble getting up and running, try this out.

    Sencha Tools Bridge allows Sencha SDK Tools to co-exist with Sencha Cmd on the same system.

  6. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    76
    Vote Rating
    1
    Answers
    1
    Monti123 is on a distinguished road

      0  

    Default


    Thanks a lot!

  7. #6
    Sencha User
    Join Date
    Mar 2012
    Posts
    76
    Vote Rating
    1
    Answers
    1
    Monti123 is on a distinguished road

      0  

    Default


    One last thing I noticed, when implementing your great answer:

    The + \ - buttons aren't round, they're elliptic (more height than width), not like in your example...

    I added

    .x-spinner-button
    {
    width: 30px;
    height: 30px;
    }

    in order to fix that.

    And another thing, Sencha couldn't find the event "change", so I used "spin" instead.


    Thanks again!
    Last edited by Monti123; 26 Nov 2012 at 10:42 AM. Reason: Found the solution

  8. #7
    Sencha User bricemason's Avatar
    Join Date
    Jan 2008
    Location
    Upstate NY
    Posts
    280
    Vote Rating
    44
    Answers
    49
    bricemason has a spectacular aura about bricemason has a spectacular aura about bricemason has a spectacular aura about

      0  

    Default


    Double check that change event handler code, here's the reference:

    http://docs.sencha.com/touch/2-1/#!/...r-event-change

    If you use the spin event, it won't cover a scenario where setValue is called on the spinner.

    Brice
    Brice Mason
    Front End Developer
    Modus Create

    @bricemason
    bricemason.com

    Sencha Touch Screencasts
    Vimeo - Sencha Touch Channel

    Github Projects:
    Sencha Cordova Builder enables the automatic creation, building, and running of PhoneGap (Cordova) projects with Sencha Touch.

    Am I Sencha Touch Ready? checks your system to determine what you need to do to start Sencha Touch development. If you're having trouble getting up and running, try this out.

    Sencha Tools Bridge allows Sencha SDK Tools to co-exist with Sencha Cmd on the same system.

  9. #8
    Sencha User
    Join Date
    Mar 2012
    Posts
    76
    Vote Rating
    1
    Answers
    1
    Monti123 is on a distinguished road

      0  

    Default


    Yo,

    I'll play with it a little to see what's going on.

    Thanks a lot

Thread Participants: 1

Tags for this Thread