Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

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