1. #1
    Ext JS Premium Member
    Join Date
    Mar 2011
    Posts
    3
    Vote Rating
    0
    c2c-yuengling is on a distinguished road

      0  

    Default Ext.form.field.Time

    Ext.form.field.Time


    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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,074
    Vote Rating
    854
    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


    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.
    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.

  3. #3
    Ext JS Premium Member
    Join Date
    Mar 2011
    Posts
    3
    Vote Rating
    0
    c2c-yuengling is on a distinguished road

      0  

    Default


    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

  4. #4
    Ext JS Premium Member
    Join Date
    Mar 2010
    Location
    Switzerland
    Posts
    24
    Vote Rating
    6
    g.sidler is on a distinguished road

      0  

    Default Ext.form.field.Time does not work properly

    Ext.form.field.Time does not work properly


    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
    Check out Teamup Calendar - Easy-to-use planner and calendar built on Ext JS4

  5. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,074
    Vote Rating
    854
    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 have tried both steps with 4.1.0 RC1 and seem to have been fixed.
    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.

  6. #6
    Ext JS Premium Member
    Join Date
    Mar 2011
    Posts
    3
    Vote Rating
    0
    c2c-yuengling is on a distinguished road

      0  

    Default


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

    Code:
    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.

  7. #7
    Ext JS Premium Member
    Join Date
    Mar 2010
    Location
    Switzerland
    Posts
    24
    Vote Rating
    6
    g.sidler is on a distinguished road

      0  

    Default Fixed in EXT JS 4.1 RC1

    Fixed in EXT JS 4.1 RC1


    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
    Check out Teamup Calendar - Easy-to-use planner and calendar built on Ext JS4

Thread Participants: 2

Tags for this Thread