Stop working when ID is assigned

[agarzon]

Not sure if a bug, but a the very moment you try to assign an id in the field, the picker stop working.

In this example, I just add and ID into the official example (https://fiddle.sencha.com/#fiddle/17cd&view/editor):

Ext.Loader.setPath("Ext.ux.DateTimePicker", "https://rawgit.com/gportela85/DateTimeField/datetimefield-4.2.x/src/DateTimePicker.js");
Ext.Loader.setPath("Ext.ux.DateTimeField", "https://rawgit.com/gportela85/DateTimeField/datetimefield-4.2.x/src/DateTimeField.js");

Ext.application({
    name: 'Fiddle',
    requires: [
        'Ext.ux.DateTimeField'
    ],
    launch: function () {
        Ext.widget("datetimefield", {
            id: 'anyId',
            fieldLabel: 'Date & Time',
            format: 'd/m/Y h:i A',
            value: new Date(),
            renderTo: Ext.getBody()
        });
    }
});

Having an id attribute is quite important in order to get the instance, like for example with Ext.getCmp().

[gportela85]

Hi,

Thanks for reporting the issue. I verified and the problem seems to be exclusive to ExtJS 4.
While I'm working on a fix for this, I would recommend that instead of using id you should use itemId and then to grab the Component use Ext.ComponentQuery.query('#id')[0]

Using Ext.ComponentQuery.query is the best way to handle this anyway, as you could have multiple datetimefields and simply run Ext.ComponentQuery.query('datetimefield') to get all of them and then do something like this:

var datetimefields = Ext.ComponentQuery.query('datetimefield');

datetimefields.forEach(function(field){
    var date = new Date();
    field.setMaxValue(date)
    field.setValue(date);
});

Check this fiddle: https://fiddle.sencha.com/#fiddle/1p0k&view/editor

[agarzon]

Thank you.

That's exactly what I did as a workaround. Using itemId and ComponentQuery and yes, is about version 4.

The problem is that we created a function that auto populate from ajax and is using Ext.getCmp() in order to find the components (dozens of forms), so the code is adapted to use id instead any other selector.

Eventually I will refactor everything to use Ext.ComponentQuery as selector, but will come handy to fix the issue with the id anyways.

Thanks again.

[gportela85]

This should fix it

Ext.define(null,{
    override: 'Ext.ux.DateTimeField',
    createPicker: function() {
         var me = this,
            parentPicker = this.callParent(),
            config = Ext.clone(Ext.merge(me.initialConfig, parentPicker.initialConfig)),
            excludes = ['renderTo', 'width', 'height', 'id', 'itemId'];

        // Avoiding duplicate ids error
        parentPicker.destroy();
    
        for (var i=0; i < excludes.length; i++) {
            if (config.hasOwnProperty([excludes[i]])) {
                delete config[excludes[i]];
            }
        }
    
        return Ext.create('Ext.ux.DateTimePicker', config);
    }
});

commit: 5168337