1. #1
    Sencha User
    Join Date
    Jun 2009
    Posts
    47
    Vote Rating
    0
    curlybracket is on a distinguished road

      0  

    Default Ext.ux.TimePicker

    Ext.ux.TimePicker


    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.

    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:
    clock.png

    Downloads:
    (Modify the path to your extjs manually in the demo.html file please)
    Version 0.2
    • 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
    Version 0.3
    • 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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Vote Rating
    851
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.

  3. #3
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,166
    Vote Rating
    -1
    galdaka is an unknown quantity at this point

      0  

    Default


    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,

  4. #4
    Sencha User
    Join Date
    Jun 2009
    Posts
    47
    Vote Rating
    0
    curlybracket is on a distinguished road

      0  

    Default


    Quote Originally Posted by mizzory View Post
    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.

  5. #5
    Ext User
    Join Date
    Jul 2009
    Posts
    4
    Vote Rating
    0
    leeyesong is on a distinguished road

      0  

    Default


    I like it very much, thanks...

  6. #6
    Sencha User
    Join Date
    Oct 2007
    Location
    Berlin, Germany
    Posts
    891
    Vote Rating
    9
    wm003 will become famous soon enough

      0  

    Default


    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

  7. #7
    Sencha User
    Join Date
    Jun 2009
    Posts
    47
    Vote Rating
    0
    curlybracket is on a distinguished road

      0  

    Default


    Quote Originally Posted by wm003 View Post
    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.

  8. #8
    Sencha User
    Join Date
    Jun 2009
    Posts
    47
    Vote Rating
    0
    curlybracket is on a distinguished road

      0  

    Default


    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.

  9. #9
    Sencha User scipio's Avatar
    Join Date
    Nov 2007
    Posts
    38
    Vote Rating
    0
    scipio is on a distinguished road

      0  

    Default


    Very cool! Great work.

  10. #10
    Ext JS Premium Member
    Join Date
    Apr 2007
    Posts
    294
    Vote Rating
    0
    jheid is on a distinguished road

      0  

    Default


    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