Results 1 to 4 of 4

Thread: How to style Datepicker Field?

  1. #1
    Touch Premium Member
    Join Date
    Aug 2011
    Posts
    59
    Vote Rating
    1
      0  

    Default 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
    548
    Vote Rating
    44
      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,526
    Vote Rating
    347
      -1  

    Default

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

    UI: Sencha Architect 3.x / ExtJS 4 - 6
    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
      0  

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


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •