ghuntley / ext.ux.touch.datetimepicker

Sencha Touch plugin that extends Ext.Picker to provide a Date/Time functionality.

Ext.ux.touch.DateTimePicker

This extension provides a DateTimePicker for the Sencha Touch framework by extending Ext.Picker.

Usage

datetimePicker = new Ext.ux.touch.DateTimePicker({
    useTitles: true,
    id: 'dt',
    value: {
        day: 23,
        month: 2,
        year: 2000,
        hour: 13,
        minute: 45
    },
    listeners: {
        "hide": function(picker) {
            window.alert((picker.getValue()));
        }
    }
}).show();

Screenshot

ext.ux.touch.datetimepicker's Issues

does not display well on lg g2

appears completely broken. values to pick from are not available

Does not display well on the iPhone

Not enough screen space makes the inputs just ...

How to use with xtypes?

So I've got the following code:

            items: [
                # Fields
                {
                    xtype: "fieldset"
                    defaults: 
                        required: true
                        labelAlign: "left"
                        labelWidth: "40%"
                    items: [ 
                            xtype: "textfield"
                            name: "name"
                            label: "Name"
                            placeHolder: 'My Event'
                            useClearIcon: true
                        , 
                            xtype: "textfield"
                            name: "description"
                            label: "Description"
                            placeHolder: 'is awesome'
                            useClearIcon: true
                        , 
                            new Ext.ux.touch.DateTimePicker(
                                useTitles: true
                                id: "dt"
                                value: 
                                    day: 23
                                    month: 2
                                    year: 2000
                                    hour: 13
                                    minute: 45
                                listeners: hide: (picker) ->
                                    window.alert (picker.getValue())
                            )
                    ]
                },

                # Actions
                {
                    xtype: "fieldset"
                    items: [ 
                        xtype: "button"
                        text: "Submit Event"
                        ui: "confirm"
                        handler: ->  
                            Evently.Views.eventForm.submit waitMsg: 
                                message: "Submitting"
                                cls: "demos-loading"
                    ]
                }
            ]

However that is not rendering the DateTimePicker correctly, is there a way to use it with xtypes like the other two fields?

Scrollwheel not supported

Hi, thanks for developing this component. We are using it in a old project, and it seems that the "official" scrollwheel patch doesn't work. This is the code on sencha forums to be able to use the mouse scrollwheel when on desktop. It works with the rest of lists and pickers, but not with yours. Do you know how can we solve it? Thanks!!

if (Ext.os.is.Desktop)
{
// Native scrolling in Browser
document.addEventListener('mousewheel', function(e){
var el = e.target;
var offset, scroller, _results;
_results = [];
while (el !== document.body) {
if (el && el.className && el.className.indexOf('x-container') >= 0) {
var cmp = Ext.getCmp(el.id);
if (cmp && typeof cmp.getScrollable == 'function' && cmp.getScrollable()){
var scroller = cmp.getScrollable().getScroller();
if (scroller) {
var offset = {x:0, y: -e.wheelDelta*0.5};
scroller.fireEvent('scrollstart', scroller, scroller.position.x, scroller.position.y, e);
scroller.scrollBy(offset.x, offset.y);
scroller.snapToBoundary();
scroller.fireEvent('scrollend', scroller, scroller.position.x, scroller.position.y-offset.y);
break;
}
}
}
_results.push(el = el.parentNode);
}
return _results;
}, false);
}