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
    497
    Vote Rating
    41
    BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about

      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,181
    Vote Rating
    77
    ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough

      0  

    Default


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

    UI: Sencha Architect 3.x / ExtJS 4 MVC
    Server side: EJB 3.1 / CDI / JPA 2 / JAX-RS / JasperReports
    Application Server: Glassfish 3.1.x
    Databases: Oracle 10g & 11g / DB2 9 & 10 / Firebird 2.5

    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.


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