ExtJS 3.4 - How to "grey" the emptyText in DateField

Question

I encountered a problem in showing a datefield emptyText ("YYY-MM-DD") in grey color instead of black color.

Here is my code.

Style

.emptyText {
    color: grey;
}

Script

items : 
[ 
   {
    fieldLabel : "Create Date",
    xtype : 'compositefield',
    items : 
    [
        {
            xtype : "datefield",
            width : 110, 
            format: 'Y-m-d', 
            emptyText: "YYYY-MM-DD",
            emptyClass:"emptyText"
        },
        {
            xtype:"label", 
            width:20, 
            text: "to", 
            style:fieldLabelStyle2
        },
        {
            xtype : "datefield",
            width : 110,
            format: 'Y-m-d', 
            emptyText: "YYYY-MM-DD",
            emptyClass:"emptyText"
        } 
    ]
    }
]

I have also tried to include the html tag with style in emptyText, but the html tag is treated as plain text. It is set as follows

emptyText: '<span style="color:grey">YYYY-MM-DD</span>'

Answer 1

For ExtJS 3.x you can override the css class:

.x-form-empty-field {
    color: gray;
}

For ExtJS 4.x there is a property emptyCls.