Resize layout make reference to datetimefield change to datetimefield-picker

[helloyan]

See gif below

startDate and endDate is the same type of datetimefield

If i callout the picker before resize, the reference to datetimefield change to datetimefield-picker, if i resize first , all things works right,event if i do resize many times.

resize code

onToggleNavigationSize:function () {
var me = this,
refs = me.getReferences(),
navigationList = refs['navigationTreeList'],
wrapContainer = refs['mainContainerWrap'],
collapsing = !navigationList.getMicro(),
new_width = collapsing ? 60 : 250;

    if (Ext.isIE9m || !Ext.os.is.Desktop) {
        Ext.suspendLayouts();

        refs.logo.setWidth(new_width);

        navigationList.setWidth(new_width);
        navigationList.setMicro(collapsing);

        Ext.resumeLayouts(); // do not flush the layout here...

        // No animation for IE9 or lower...
        wrapContainer.layout.animatePolicy = wrapContainer.layout.animate = null;
        wrapContainer.updateLayout();  // ... since this will flush them
    }
    else {
        if (!collapsing) {
            // If we are leaving micro mode (expanding), we do that first so that the
            // text of the items in the navlist will be revealed by the animation.
            navigationList.setMicro(false);
        }

        // Start this layout first since it does not require a layout
        refs.logo.animate({dynamic: true, to: {width: new_width}});

        // Directly adjust the width config and then run the main wrap container layout
        // as the root layout (it and its chidren). This will cause the adjusted size to
        // be flushed to the element and animate to that new size.
        navigationList.width = new_width;
        wrapContainer.updateLayout({isRoot: true});
        navigationList.el.addCls('nav-tree-animating');

        // We need to switch to micro mode on the navlist *after* the animation (this
        // allows the "sweep" to leave the item text in place until it is no longer
        // visible.
        if (collapsing) {
            navigationList.on({
                afterlayoutanimation: function () {
                    navigationList.setMicro(true);
                    navigationList.el.removeCls('nav-tree-animating');
                },
                single: true
            });
        }
    }
} 

[gportela85]

Can you provide a fiddle reproducing this issue? I created this one for you so you can get started: https://fiddle.sencha.com/#fiddle/2fbp&view/editor

[helloyan]

I don't known how to create a fiddler, my test code is down

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

Ext.application({
    name: 'Fiddle',
    requires: [
        'Ext.ux.DateTimeField'
    ],
    launch: function () {
        Ext.create('Ext.Panel', {
            layout: 'border',
            renderTo: document.body,
            width: 700,
            height: 500,
            items: [{
                xtype: 'panel',
                region: 'west',
                title: 'Menu',
                collapsible: true,
                width: 100
            }, {
                xtype: 'panel',
                referenceHolder: true,
                region: 'center',
                tbar: [{
                    xtype: 'datetimefield',
                    fieldLabel: 'Start Date',
                    reference: 'startDate'
                }, {
                    xtype: 'datetimefield',
                    fieldLabel: 'End Date',
                    reference: 'endDate'
                }, {
                    xtype: 'button',
                    text: 'help',
                    handler: function () {
                        console.log(this.up().up().getReferences())
                    }
                }]
            }]
        })
    }
});

from gif you can see, the origin reference startDate of type datetimefiled now change to datetimefield-picke

[helloyan]

hello , did you resolve it?

[gportela85]

try this override

Ext.define(null, {
    override: 'Ext.ux.DateTimeField',
    createPicker: function() {
        var me = this,
            parentPicker = this.callSuper(),
            parentConfig = Ext.clone(parentPicker.initialConfig),
            initialConfig = Ext.clone(me.initialConfig),
            excludes = ['renderTo', 'width', 'height', 'bind', 'reference'];

        // Avoiding duplicate ids error
        parentPicker.destroy();

        for (var i=0; i < excludes.length; i++) {
            if (initialConfig.hasOwnProperty([excludes[i]])) {
                delete initialConfig[excludes[i]];
            }
        }
    
        return Ext.create('Ext.ux.DateTimePicker', Ext.merge(initialConfig, parentConfig));
    }
})