Ext.ux.TimePicker [Archive]

curlybracket

4 Jan 2010, 4:11 PM

I am preparing the release of a TimePicker component, basing on a library to provide an objectorientated api for the HTML 5 canvas tag and want to hear your opinions about my current state.

You can find a demo right here:
http://js.curlybracket.de/Ext.ux.TimePicker/demo.html

Description:
I'm going to release the component the next days in this thread, i'f just to clean some mess up. The first alpha release of the canvas library is currently hosted at google code (http://code.google.com/p/curly-canvas/).

The TimePicker component makes use of the Ext.ux.Canvas and Ext.ux.Clock components and utilizes three Ext.ux.SpinnerField components for the time components. All methods of the Ext.form.Field class are properly overloaded. A value has to be given and is returned in the format "HH:MM:SS". The component is currently tested in Firefox 3.5 and IE 8.

What's also on the Roadmap?

Support to drag a clock hand and change the value directly in the canvas
Support different rendering formats (like a small clock on the right instead of the big one)

Snapshot:
18087

Downloads:
(Modify the path to your extjs manually in the demo.html file please)
Version 0.2 (http://js.curlybracket.de/Ext.ux.TimePicker/0.2.zip)

More Ext-like rendering of the clock
Enable circular scrolling of the spinners
Add configuration values to customize the clock rendering process
Updated canvas component to r25 (http://code.google.com/p/curly-canvas/source/detail?r=25)

Version 0.3 (http://js.curlybracket.de/Ext.ux.TimePicker/0.3.zip)

Added render and afterrender events to the ClockController
Added extraClockCfg property to the TimePickerField to make setting clock configurations easier
Translated doc comments of ClockController into english. Didn't realize i've left them in german in the previous release...

Looking forward to read your opinions :)

mitchellsimoens

4 Jan 2010, 7:59 PM

I like it! Is there an option to hide/show the clock. You could have the clock be able to render to a DOM element aswell.

galdaka

4 Jan 2010, 11:28 PM

Hi,

Excellent work. Sorry, my English is poor.

1) Will be posible add this widget as formField?

2) Would be great circular scrolling of hours, minutes and seconds. When field arrive to 23 / 59, goto 0,1,2...

3) Will be clock CSS customizable?

Thanks in advance,

curlybracket

5 Jan 2010, 12:45 AM

I like it! Is there an option to hide/show the clock. You could have the clock be able to render to a DOM element aswell.
Nice idea, i'll add an option to hide/show the clock.
The clock itself is an Ext.ux.Clock component, so you can do everything you want with it.

1) Will be posible add this widget as formField?The class is deriving the Ext.form.Field class, so it's already fully functional in a form.

2) Would be great circular scrolling of hours, minutes and seconds. When field arrive to 23 / 59, goto 0,1,2...Nice idea, i add that to my list.

3) Will be clock CSS customizable?No, that's not possible because the clock is based on the HTML 5 canvas tag, so the clock is drawn to a plain area and not customizable by css. I'll add some more configuration values to customize the rendering of the clock a bit more.

leeyesong

5 Jan 2010, 9:21 PM

I like it very much, thanks...

wm003

6 Jan 2010, 1:47 AM

Does (of course) not work in IE6. You should catch that with "if(Ext.isIE6)" to switch off the canvas clock in that case and just show the spinner. Now it leaves a js-error.

besides that: very nice extension ;)

edit: Idea: In case canvas is not supported you could switch the display to 3 transparent gif layers(because if canvas is not supported PNG won't also) with different line-positions of hour/minute/seconds line. That would also make the clock themeable / CSS customizable ;)

curlybracket

6 Jan 2010, 2:35 AM

Does (of course) not work in IE6. You should catch that with "if(Ext.isIE6)" to switch off the canvas clock in that case and just show the spinner. Now it leaves a js-error.
I've only tested in IE8 and there it's working. That's because i included the excanvas script for non-canvas browsers. I'll test the script in IE6.

curlybracket

30 Jan 2010, 6:27 AM

I've just updated the TimePicker component with a more ExtJS-like layout and the support to circular scroll the different spinners.
Also you can customize the clock rendering process a bit by using the clockCfg configuration value of the TimePicker.
You can find the version 0.2 download in the first post.

I've some rendering problems with the clock in the IE6. IE8 is working in compat and non-compat mode, so i think the IE7 is also fine. I'll have a look on that.

scipio

30 Jan 2010, 10:42 AM

Very cool! Great work.

jheid

31 Jan 2010, 2:48 PM

mitchellsimoens

31 Jan 2010, 5:36 PM

Great work.

Two additional points:

1. Would be great if the hour/minute will increase if the minute/second is 59+1 (or 0-1)
2. I would implement a scroll wheel support so that you can scroll the hours/minutes/seconds faster

We are kind of working to merge 2 projects but I have already thought of the first item. Second item will come eventually!

curlybracket

2 Feb 2010, 5:09 PM

Just uploaded the 0.3 release with minor changes. Also check out the TimeFieldPicker (http://www.extjs.com/forum/showthread.php?p=432796). It's a combination of this component and mizzory's TimeField.

mitchellsimoens

2 Feb 2010, 5:33 PM