1. #1
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Vote Rating
    814
    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

      1  

    Default [2.0] Ext.ux.form.TimeField

    [2.0] Ext.ux.form.TimeField


    The SpinnerField is great. It's familiar, it looks good and it just works!

    Recently @curlybracket made an extension named "Ext.ux.TimePicker" which using the SpinnerField but I wanted something a little more familiar and something that looks a little better. Not that Ext.ux.TimePicker doesn't look familiar, I think it could be better with just one SpinnerField.

    I had to modify 2 of the ux files that is distributed with extjs - Spinner.js and SpinnerField.js. Attached are these files.

    UPDATE!!!!!!!!!!!!
    I have added a config option "twentyFour" that if set to true will display the Ext.ux.TimeField in a 24 hour time format. If set false, it will be in a 12 hour time format with am/pm. Attachment has been updated aswell as the online demo and screen shot below.

    UPDATE!!!!!!!!!!!!
    I have reworked the spin function so it will now keep an updated millisecond count in the config. This will now act as a clock so when the minutes pass 60, it'll add an hour aswell as change the minutes to zero. The online demo has been updated aswell as the attachment here. Also if you call the getRawValue() it will return the milliseconds where getValue() will return what you see in the field.

    UPDATE!!!!!!!!!!!!
    Add some more functions due to request... getHours(), getMinutes(), getSeconds(), isAM(), and isPM(). First three will return a number, the last two will return boolean.

    UPDATE!!!!!!!!!!!!
    Cleaned up the code and am using the date.format() functions instead of doing it all by hand.

    UPDATE!!!!!!!!!!!! 2.0
    Instead of having seperate functions to get the hours and minutes, I have decided to modify the getValue() function so now you enter the format you want returned. eg:
    Code:
    TimeField.getValue('h:i:s a')
    I have decided to leave the isAM() and isPM() functions though.

    Demo here
    Attached Files

  2. #2
    Sencha User elnove's Avatar
    Join Date
    Nov 2007
    Location
    Canada
    Posts
    110
    Vote Rating
    0
    elnove is on a distinguished road

      0  

    Default


    very nice
    thanks fow sharing.
    Live Long And Prosper \\//

    el

  3. #3
    Sencha User
    Join Date
    Feb 2009
    Posts
    57
    Vote Rating
    0
    javaman is on a distinguished road

      0  

    Default


    Well, i looked the demo and there are bugs

    the minutes can be negative and the bumber 60 appears on minutes instead of 00

    []'s

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Really, it should just extend SpinnerField, maintain an internel Date object, and add a certain increment to that on spin.

    So you could have it incrementing in seconds, minutes or hours.

    And you could specify a format string for it to display the time.

  5. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Vote Rating
    814
    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


    Quote Originally Posted by Animal View Post
    Really, it should just extend SpinnerField...
    I tried but the problem is is that the standard SpinnerField is an Ext.form.NumberField so I had to change that to Ext.form.TextField.

    Quote Originally Posted by Animal View Post
    And you could specify a format string for it to display the time.
    Was going to have this feature in a next release. The girlfriend wants me to make an app for her so whatever boss lady wants! lol

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Vote Rating
    814
    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


    Quote Originally Posted by javaman View Post
    the minutes can be negative and the bumber 60 appears on minutes instead of 00
    Both bugs are fixed! Online demo is fixed and the zip file above has been reuploaded!

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Still does not work.

    The 12 hour clock does not increment/decrement at all on spin.

    And the 24 hour one increments/decrements seconds, but that just wraps at 60/0 without ticking the minute over.

    You must perform incrementing/decrementing using Date arithmetic.

    Keep a Date object containing the value and use Date.add to add to it whatever increment has been configured (You should be able to configure an increment value and an increment unit)

  8. #8
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Vote Rating
    814
    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


    Quote Originally Posted by Animal View Post
    The 12 hour clock does not increment/decrement at all on spin.
    What browser are you using? I've tested with Chrom/FF/Safari on Mac/Win and hours, minutes, seconds, and am/pm move up or down.

    Quote Originally Posted by Animal View Post
    And the 24 hour one increments/decrements seconds, but that just wraps at 60/0 without ticking the minute over.
    I did not design this first version to tick the minute over when the seconds reach 60. When I can, this will be a config option so you can have the choice.

    Quote Originally Posted by Animal View Post
    Keep a Date object containing the value and use Date.add to add to it whatever increment has been configured (You should be able to configure an increment value and an increment unit)
    I get what you are saying on this and it'll probably replace much of the code that I still need to go through and cleanup.

    This was just a first version. In fact, I haven't even started numbering it yet so right now I'd put it in the proof of concept or dev stage. You can tell this by the lack of code cleanup that has been done. I posted it to let people know of the development and @javaman found a couple bugs that I overlooked. I appreciate you taking time to help me with this extension and have a to-do list started!

  9. #9
    Sencha User
    Join Date
    Feb 2009
    Posts
    57
    Vote Rating
    0
    javaman is on a distinguished road

      0  

    Default




    I thing you could do: in 12hrs, when you go up and pass by 12 hour, it could change am/pm, like on watch

    []'s

  10. #10
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Vote Rating
    814
    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


    Quote Originally Posted by javaman View Post
    I thing you could do: in 12hrs, when you go up and pass by 12 hour, it could change am/pm, like on watch
    Yeah, I'll add this as a config option like what I was telling Animal when the seconds get too 60 it'll add one to the minutes.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.