1. #1
    Sencha Premium Member
    Join Date
    May 2008
    Location
    Pasadena, California
    Posts
    172
    Answers
    27
    Vote Rating
    2
    NickT is on a distinguished road

      0  

    Default Answered: checkbox renderTpl

    Answered: checkbox renderTpl


    Hello,
    I was altering the checkbox to appear more like a natural checkbox in sencha touch 1.1 by adding this to checkbox config

    Code:
        baseCls: 'x-plain',    renderTpl: [
            '<tpl if="fieldEl"><input id="{inputId}" type="{inputType}" name="{name}" class="{fieldCls}" tabIndex="-1" ',
            '<tpl if="checked"> checked </tpl>',
            ' value="{inputValue}">&nbsp;{label}</input>',
            '</tpl>'
        ],
    this no longer works in 2.0. Can you advise as to what I can do in 2.0 to style the checkbox?

    thanks

  2. The underlying HTML for the component actually uses a <input type="checkbox" /> tag.

    The main CSS override you will need is below. However there are many other things you will need to add to make it look 'correct' in all devices.

    Code:
    .x-input-checkbox {
        -webkit-appearance: checkbox;
    }

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,346
    Answers
    3541
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    It's done via CSS. Inspect it and start enabling/disabling things.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    The underlying HTML for the component actually uses a <input type="checkbox" /> tag.

    The main CSS override you will need is below. However there are many other things you will need to add to make it look 'correct' in all devices.

    Code:
    .x-input-checkbox {
        -webkit-appearance: checkbox;
    }

Thread Participants: 2