Threaded View

  1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    76
    Answers
    1
    Vote Rating
    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

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar