Results 1 to 4 of 4

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

  1. #1
    Sencha Premium Member
    Join Date
    May 2011
    Posts
    9
    Answers
    1

    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.

    Code:
    var states = Ext.create('Ext.data.Store', {
        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:
    Code:
    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);
    }

  3. #2
    Sencha Premium Member
    Join Date
    May 2011
    Posts
    9
    Answers
    1

    Default

    Also, note that if you search in the documentation using the top-right search field for "displayTpl", no results show up.

    Also, no component in the Ext JS library lists "displayTpl" in its available config options.

    Is this a bug with the documentation?

    Some base component should use "displayTpl: undefined" so that we know it's part of a component's prototype and can be used as a config value.

    If this isn't a mistake and "displayTpl" isn't meant to be used, then example pages (like that for ComboBox) should not show examples that use "displayTpl".

    Just my humble opinion.

  4. #3
    Sencha Premium Member
    Join Date
    May 2011
    Posts
    9
    Answers
    1

    Default

    I ended up extending the ComboBox control and overriding getDisplayValue:
    Code:
    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);
    }

  5. #4
    Sencha User
    Join Date
    Dec 2015
    Posts
    14
    Answers
    1

    Default

    Here is how I solved:

    Code:
    {
                                xtype: 'combobox',
                                name: 'fechaLiquidacionCb',
                                emptyText: 'Seleccione fecha...',
                                store: Ext.create('Ext.data.ArrayStore', {
                                    fields: [
                                        {name: 'fLiq', type: 'date', dateFormat: 'Ymd'},
                                        {name: 'fechaConv', type: 'string',
                                            convert: function (value, record) {
                                                var fecha = record.get('fLiq');
                                                if (fecha !== null) {
                                                    return Ext.Date.format(fecha, 'd-m-Y');;
                                                }
                                            }}
                                    ]
                                }),
                                queryMode: 'local',
                                labelWidth: 73,
                                fieldLabel: 'Fecha Liquidacion',
                                displayField: 'fechaConv',
                                valueField: 'fLiq'
                            }

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
  •