Ext.form.field.Time

[c2c-yuengling]

Hello,

Currently the TimeField will default its display from 12:00 AM - 11:59 AM respectively. And every time you expand the TimeField you see the 12:00 AM. No matter if you have changed the time within the field to say... 4:00 PM.

This topic has 2 questions.

First is it possible to have it be that the time field can still show from 12:00 AM - 11:59 PM but have the initial value be 12:00 PM and when you expand the field you see 12:00 PM at the top with the ability to scroll both up and down to see earlier or later times. (Start in the middle of the selections).

Second question: Is there a way to have the expanded selector default to the selected value?

I hope my questions make sense. If now I will gladly post screenshots.

-Thank you

[mitchellsimoens]

1. You can scroll the list when it is shown or rendered.
2. If you want a default value, set the value on the field if there is no value.

[c2c-yuengling]

Thank You Mitchell for your response.

Would there be any chance that you could give me an example of the code needed to scroll the selector.

Thank You

[g.sidler]

In Ext JS 4.0.7 Ext.form.field.Time does not work properly anymore, which make the component painful to use. There are two issues. You can easily reproduce these using the online example at http://dev.sencha.com/deploy/ext-4.0...eld-types.html (see field Time Field).

1. The dropdown list does not scroll to the selected value. To reproduce: Open the dropdown, select a time of 7:00 pm. Then, reopen the dropdown. The selected time is not visible. The expected behavior is that the dropdown automatically scrolls to the selected time. Looking at the source of the component, I see that there is code in there to do the scrolling, but I does not work.
2. The text input field and the dropdown show inconsistent information. To reproduce: Open the dropdown and select a time of 7:00 PM. Then, type into the text field a time of "2:00 AM". Reopen the dropdown. It still shows the time of 7:00 PM. The expected behavior is that the selected item in the dropdown list is consistent with the time shown in the text input field.

I tested these issues with FF 11, Chrome 17.X and IE 9. In Ext JS V 3.X this used to work properly.

Gabe

[mitchellsimoens]

I have tried both steps with 4.1.0 RC1 and seem to have been fixed.

[c2c-yuengling]

In Ext JS 4.0.7 Ext.form.field.Time does not work properly anymore, which make the component painful to use. There are two issues. You can easily reproduce these using the online example at http://dev.sencha.com/deploy/ext-4.0...eld-types.html (see field Time Field).

1. The dropdown list does not scroll to the selected value. To reproduce: Open the dropdown, select a time of 7:00 pm. Then, reopen the dropdown. The selected time is not visible. The expected behavior is that the dropdown automatically scrolls to the selected time. Looking at the source of the component, I see that there is code in there to do the scrolling, but I does not work.
2. The text input field and the dropdown show inconsistent information. To reproduce: Open the dropdown and select a time of 7:00 PM. Then, type into the text field a time of "2:00 AM". Reopen the dropdown. It still shows the time of 7:00 PM. The expected behavior is that the selected item in the dropdown list is consistent with the time shown in the text input field.

I tested these issues with FF 11, Chrome 17.X and IE 9. In Ext JS V 3.X this used to work properly.

Gabe

Gabe

As I have been struggling my way through making this work I have found resolutions to the first issue you were having.
The picker is attempting to scroll the wrong container.

This can be found within the onExpand function, in the Time.js form/field.

onExpand: function() {
        var me = this,
            keyNav = me.pickerKeyNav,
            selectOnTab = me.selectOnTab,
            picker = me.getPicker(),
            lastSelected = picker.getSelectionModel().lastSelected,
            itemNode;

        if (!keyNav) {
            keyNav = me.pickerKeyNav = Ext.create('Ext.view.BoundListKeyNav', this.inputEl, {
                boundList: picker,
                forceKeyDown: true,
                tab: function(e) {
                    if (selectOnTab) {
                        if(me.picker.highlightedItem) {
                            this.selectHighlighted(e);
                        } else {
                            me.collapse();
                        }
                        me.triggerBlur();
                    }
                    // Tab key event is allowed to propagate to field
                    return true;
                }
            });
            // stop tab monitoring from Ext.form.field.Trigger so it doesn't short-circuit selectOnTab
            if (selectOnTab) {
                me.ignoreMonitorTab = true;
            }
        }
        Ext.defer(keyNav.enable, 1, keyNav); //wait a bit so it doesn't react to the down arrow opening the picker

        // Highlight the last selected item and scroll it into view
        if (lastSelected) {
            itemNode = picker.getNode(lastSelected);
            if (itemNode) {
                picker.highlightItem(itemNode);
                //picker.el.scrollChildIntoView(itemNode, false);
                picker.el.down('.list-ct').scrollChildIntoView(itemNode, false);
            }
        }
    }

I hope this helps.

[g.sidler]

Hi Mitchell and c2c-yuengling,
Thanks for your feedback. I just tested with EXT JS 4.1 RC 1 and can confirm that both issues have been fixed. That's great!

Gabe