workaround for Ext JS 4.1.1.1

[crwagner]

Sorry folks, I think this is not the right place to do this, but I could'nt create a pull request.

I'm trying to using the component on Ext JS 4.1.1 (I can't upgrade the solution to 4.2 or other right now), but is throwing a "superMethod is undefined" exception.

There's anything I can do "unnoficially" to use this UX component?

Thanks and sorry for my bad english.

[gportela85]

Hi,

Edit the Ext.ux.DateTimePicker Class and change the methods below:
Check this Fiddle: https://fiddle.sencha.com/#fiddle/ull

afterRender: function() {
    var me = this,
        el = me.el;

    me.timePicker = Ext.create('Ext.panel.Panel', {
        layout: {
            type: 'hbox',
            align: 'stretch'
        },
        border: false,
        defaults: {
            flex: 1
        },
        width: 130,
        floating: true,
        onMouseDown: function(e) {
            e.preventDefault();
        },
        showBy: function(cmp, pos, off) {
            var me = this;

            if (me.floating && cmp) {
                me.show();

                me.setPagePosition(me.el.getAlignToXY(cmp.el || cmp, pos || me.defaultAlign, off));
            }
        },
        dockedItems: [{
            xtype: 'toolbar',
            dock: 'top',
            ui: 'footer',
            items: [
                '->', {
                    xtype: 'label',
                    text: me.timeFormat == 'h' ? '12:00 AM' : '00:00'
                },
                '->'
            ]
        }],
        items: [me.hourSlider, me.minuteSlider]
    });

    me.callParent();
}

and

showTimePicker: function() {
    var me = this,
        el = me.el,
        timePicker = me.timePicker;
    Ext.defer(function() {
        var body = Ext.getBody(),
            bodyWidth = body.getViewSize().width,
            alignTo = (bodyWidth < (el.getX() + el.getWidth() + 140)) ? 'tl' : 'tr',
            xPos = alignTo == 'tl' ? -135 : 5,
            backgroundColor, toolbar;

        me.timePicker.setHeight(el.getHeight());
        me.timePicker.showBy(me, alignTo, [xPos, 0]);

        toolbar = me.timePicker.down('toolbar').getEl();
        backgroundColor = toolbar.getStyle('background-color');
        if (backgroundColor == 'transparent') {
            toolbar.setStyle('background-color', '#C7D8ED');
        }
    }, 1);
}

[crwagner]

Hi.
Thanks for the quick answer.
Unfortunately Ext keeps throwing the same exception (superMethod is undefined).
But I think this is because we are using not just the 4.1.1, but in fact the 4.1.1a-GPL (where the tiny "a" stands for "alpha"), and I forgot to mention this "detail".

We found another solution to our problem, but I like to congratulate you anyway for your component and support.

[gportela85]

Hi,

I'm glad you worked out a solution, however, you should really consider upgrading your app to a more recent Ext version since Sencha has made ExtJS 5.1 and 6.0 available in for GPL licensing.

Thanks,

[sakisss]

crwagner, would it possible to give some info about your datetime picker solution.i am using 4.1.1a too and have encountered the same problem... thnks.

[crwagner]

Hi sakisss

I ended up using another component found in sencha forum.
It is not as elegant as this one, but I was in a race against the clock

link:https://www.sencha.com/forum/showthread.php?137242-Ext.ux.DateTimeField-DateTimePicker-for-ext4-also-DateTimeMenu-TimePickerField

gportela85: I hope there is no problem to post links here, but if there is, feel free to delete it

[gportela85]

For 4.1.1a, you will need to add the overrides below

Ext.define('Ext.override.ux.DateTimeField', {
    override: 'Ext.ux.DateTimeField',

    getRefItems: function() {
        var me = this,
            result = [];
        try {
            result = me.callSuper();
        }
        catch(e) {
            result = [];
            if (window.console) {
                console.log(e);
            }
        }

        if (me.picker && me.picker.timePicker){
            result.push(me.picker.timePicker);
        }

        return result;
    }
});

Ext.define('Ext.override.ux.DateTimePicker', {
    override: 'Ext.ux.DateTimePicker',

    showTimePicker: function() {
        var me = this,
            el = me.el;

        Ext.defer(function() {
            var body = Ext.getBody(),
                bodyWidth = body.getViewSize().width,
                alignTo = (bodyWidth < (el.getX() + el.getWidth() + 140)) ? 'tl' : 'tr',
                xPos = alignTo == 'tl' ? -135 : 5,
                backgroundColor, toolbar;

            me.timePicker.setHeight(el.getHeight());
            if (me.timePicker.showBy) {
                me.timePicker.showBy(me, alignTo, [xPos, 0]);
            } else {
                me.timePicker.show();
                me.timePicker.setPagePosition(me.timePicker.el.getAlignToXY(me.el || me, alignTo || me.timePicker.defaultAlign, [xPos, 0]));
            }

            toolbar = me.timePicker.down('toolbar').getEl();
            backgroundColor = toolbar.getStyle('background-color');
            if (backgroundColor == 'transparent') {
                toolbar.setStyle('background-color', toolbar.getStyle('border-color'));
                toolbar.setStyle('color', '#FFF');
            }
        }, 1);
    }
});

[sakisss]

Well,thanks for the fast response guys, very helpful

[crwagner]

gportela85: You did a workaround to the 4.1.1 alpha version??? I need to try this one again. Your component is much prettier than the one I've found on Sencha Forum and linked up above.

[gportela85]

@crwagner I downloaded the 4.1.1a and worked out this set of overrides that made it work. Let me know if this helps.