1. #1
    Touch Premium Member
    Join Date
    Aug 2011
    Posts
    59
    Vote Rating
    0
    0steve is on a distinguished road

      0  

    Default How to style Datepicker Field?

    How to style Datepicker Field?


    Hi,

    I am using Sencha Touch 2.01 and Sencha Architect 2.1.0.
    I would like to know how do I go about styling the appearance of the datepickerfield?
    Like changing the font size, font color, background color (including the dropdown arrow), the border, etc.

    Here's a screenshot of what I want to style:
    Screen Shot 2013-02-01 at 10.33.11 AM.jpg

    Here's the code:
    Code:
    Ext.define('MyApp.view.MyContainer', {
        extend: 'Ext.Container',
    
    
        config: {
            items: [
                {
                    xtype: 'datepickerfield',
                    label: 'Field',
                    placeHolder: 'mm/dd/yyyy'
                }
            ]
        }
    
    
    });
    Thank You in Advance!

  2. #2
    Touch Premium Member BostonMerlin's Avatar
    Join Date
    Aug 2010
    Location
    Boston
    Posts
    523
    Vote Rating
    43
    BostonMerlin is a jewel in the rough BostonMerlin is a jewel in the rough BostonMerlin is a jewel in the rough

      0  

    Default


    Go to the documentation.....

    You can change the style by way of the numerous 'cls' elements attached to that component. Also, look at the many SASS css vars defined (also shown on that page). In addition, load up your page in Chrome then identify which parts of that component you want to modify via the Inspector.

    You also might want to read up on how to style sencha components

    Hope that helps
    John

  3. #3
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,323
    Vote Rating
    186
    ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold

      0  

    Default


    Quote Originally Posted by BostonMerlin View Post
    Go to the documentation.....
    RTFM or RTFD?

    UI: Sencha Architect 3.x / ExtJS 4 & 5
    Server side: JEE / EJB 3.x / CDI / JPA 2.x/ JAX-RS / JasperReports
    Application Server: Glassfish / WildFly
    Databases: Oracle / DB2 / MySQL / Firebird

    If you like my answer please vote!

  4. #4
    Sencha Premium Member
    Join Date
    Jan 2013
    Posts
    14
    Vote Rating
    0
    rianatdigitaltrike is on a distinguished road

      0  

    Default Styling the arrow

    Styling the arrow


    Set background to none on this element in your css and whatever color or image you set to the parent element will extend all of the way to the right.

    Code:
    .x-field-select .x-component-outer::before {
        background: none;
    }
    The icon is set on this element:

    Code:
    .x-selectmark-base, .x-field-select .x-component-outer::after


    And you can color it in this element:

    Code:
    .x-field-select .x-component-outer::after


    Also, the documentation doesn't say any of this. I had to hack through it on Google Chrome and two monitors since each one of these divs is messy as hell.