PDA

View Full Version : [Beta 1] Ext.ux.TimeFieldPicker



mitchellsimoens
1 Feb 2010, 7:58 AM
This is the announcement of the development of 2 extension that were created and now being merged.

It all started with @curlybracket (http://www.extjs.com/forum/member.php?u=76178)'s extension Ext.ux.TimePicker (http://www.extjs.com/forum/showthread.php?t=88979) which sprouted @mizzory (http://www.extjs.com/forum/member.php?u=22216)'s Ext.ux.form.TimeField (http://www.extjs.com/forum/showthread.php?t=89404).

What comes from it is Ext.ux.form.TimeField plus the clock made from Ext.ux.TimePicker and what is known as Ext.ux.TimeFieldPicker.

Demo is here (http://www.simoens.org/ux/TimeFieldPicker/).

The demo has two clocks, first is for the 12 hour format field and the second is for the 24 hour format. Have fun watching the clock hands go round and round!

Attached is everything minus the Ext Library. You will of course have to change index.html to point to it.

mitchellsimoens
2 Feb 2010, 1:33 PM
So I have a clock tied to the field so the merging works.

So I moved onto having the time update every second and have both the field and the clock update. This works however when trying to change the field manually it just doesn't work yet but it's nice to see the clock move around every second!

curlybracket
2 Feb 2010, 1:42 PM
The clock component already has an implementation for a running clock. Just have a look on the ClockController's runTask property. My TimePicker simply sets this value to false. Have you used this approach? Then simply hooking into the render method is a way to update the TimeField as well synchronously to the clock.

mitchellsimoens
2 Feb 2010, 3:30 PM
I saw that however to keep them totally in sync I had to modify one component to tell the other what to do unless you know of a different way. I've redone some of my source already so I figured I'd change my code to work with the clock.

The big problem is with my field, once a new value is put into the field, the caret gets moved to the end of the value so therefore I have to first get the caret position, update the value, and then set the caret position. It works without the auto incrementing but when I have the value update every second, the caret is moved to the end so I have to rethink how to do it and still be efficient.

curlybracket
2 Feb 2010, 4:06 PM
I saw that however to keep them totally in sync I had to modify one component to tell the other what to do unless you know of a different way. I've redone some of my source already so I figured I'd change my code to work with the clock.Hmm, what about a render-event in the clock? That's quite easy to implement and is also very extjs-like.


The big problem is with my field, once a new value is put into the field, the caret gets moved to the end of the value so therefore I have to first get the caret position, update the value, and then set the caret position. It works without the auto incrementing but when I have the value update every second, the caret is moved to the end so I have to rethink how to do it and still be efficient.Ok, that's true. A solution could be to catch the focus event and stop the auto incrementing. When bluring the field, the clock may go on.

The main thing is, why should the clock run? It may be a bit annoying to set a specific time value and see the clock all the time manipulating my form data...

mitchellsimoens
3 Feb 2010, 9:32 AM
Just bumping to let everyone know I have updated the online demo and attached the zip file of the source! I will classify this has Beta 1. let me know of any bugs or any comments.

javaman
3 Feb 2010, 3:09 PM
very nice!

[]'s

Mjollnir26
5 Feb 2010, 5:30 AM
You guys just saved me weeks worth of work
Kudos!!

jheid
6 Feb 2010, 12:05 PM
Looks good but doesn't have IE support (in the demo), does it?
The mouse wheel support is good, would it be possible to increase/decrease the numbers depending on on the position of the mouse cursor (currently the keyboard cursor decides which number will be increased). It's difficult though, but it could be an experimental option to manually set the offset which decides which part should be changed (e.g. from 0 to 10 pixels for the hour, from 12 to 20 for the minute and so on). That would eliminate the need to do additionally clicks..

mitchellsimoens
6 Feb 2010, 7:53 PM
You guys just saved me weeks worth of work
Kudos!!

Great! thanks for that!

mitchellsimoens
6 Feb 2010, 7:55 PM
Looks good but doesn't have IE support (in the demo), does it?
The mouse wheel support is good, would it be possible to increase/decrease the numbers depending on on the position of the mouse cursor (currently the keyboard cursor decides which number will be increased). It's difficult though, but it could be an experimental option to manually set the offset which decides which part should be changed (e.g. from 0 to 10 pixels for the hour, from 12 to 20 for the minute and so on). That would eliminate the need to do additionally clicks..

I'm not too sure what you're talking about. Are you saying you want the mouse wheel to work better? It works as long as you keep the mouse over the field which seems odd but that's how it's work so far.

jheid
7 Feb 2010, 2:12 AM
I'm not too sure what you're talking about. Are you saying you want the mouse wheel to work better? It works as long as you keep the mouse over the field which seems odd but that's how it's work so far.

I meant the part of the time (hour, minute or second) that can be increased/decreased using the mouse wheel. I would prefer that if the mouse is over the hour part (10:xx:xx) the wheel would change the hour. If the mouse is over the minute part (xx:30:xx) then the minutes will change and so on. Currently the keyboard cursor decides not just the mouse position.

Besides: It seems that you can't set a format, stop the second counter and can't set a date.

mitchellsimoens
7 Feb 2010, 6:37 AM
I meant the part of the time (hour, minute or second) that can be increased/decreased using the mouse wheel. I would prefer that if the mouse is over the hour part (10:xx:xx) the wheel would change the hour. If the mouse is over the minute part (xx:30:xx) then the minutes will change and so on. Currently the keyboard cursor decides not just the mouse position.

I see, so have it change without have the caret on the field... hmmm.... we shall see!


Besides: It seems that you can't set a format, stop the second counter and can't set a date.

There are 2 time formats, a 12-hour and 24-hour (military) format. I have thought about having a config option to select if you wanted to hide the hours or minutes or whatever but incrementing the time but mouse click on the arrows would be extremely hard to guess.

curlybracket
7 Feb 2010, 8:00 AM
Looks good but doesn't have IE support (in the demo), does it?It has IE support, but i have some known problems with the IE 6. I'm working on a solution.

meisong
7 Feb 2010, 10:07 PM
very nice!

curlybracket
7 Feb 2010, 11:43 PM
There are 2 time formats, a 12-hour and 24-hour (military) format.BTW: It's not just for military uses. I'm from germany and the 12-hour format is here very exotic ;)

Edit: WTF? No OT-Tag?