Results 1 to 4 of 4

Thread: ComboBox with dates--formatting date display in field

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha Premium Member
    Join Date
    May 2011

    Default Answered: ComboBox with dates--formatting date display in field

    Is there an easier way or best practice for how to format the value that appears in the text of a combo when the displayField of the combo refers to a date type?

    What I'm doing now seems kinda silly, like I should be able to pass a "dateFormat" option into the ComboBox config or something.

    var states = Ext.create('', {
        fields: [
            { name: 'PolId', type: 'string' },
            { name: 'EffDate', type: 'date', dateFormat: 'MS' }
        data: [
            { "PolId": "GUID-HERE", "EffDate": "/Date(1232)/" }
    Ext.create('Ext.form.ComboBox', {
        fieldLabel: 'Choose Date',
        store: states,
        queryMode: 'local',
        valueField: 'PolId',
        displayField: 'EffDate',
        renderTo: Ext.getBody(),
        displayTpl: '<tpl for=".">' + '{EffDate:date("d/m/Y")}' + '</tpl>'
    See a sandbox here. Note that I don't care what the value looks like in the list; I only care about how to make sure the value displaying in the text field is formatted with date format string like "Y-m-d".

  2. I ended up extending the ComboBox control and overriding getDisplayValue:
    getDisplayValue: function () {
        if (this.multiSelect) {
            Ext.Error.raise('Support for `multiSelect` not implemented.')
        var selectedRecords = this.displayTplData,
            hasSelectedRecords = selectedRecords && !!selectedRecords.length;
        if (hasSelectedRecords) {
            var displayFieldValue = selectedRecords[0][this.displayField];
            if (displayFieldValue instanceof Date) {
                return Ext.Date.format(displayFieldValue, 'm/d/Y');
        return this.displayTpl.apply(this.displayTplData);

Tags for this Thread

Posting Permissions

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