0

I've inherited an application that uses ExtJS and am relatively unfamiliar with it's conventions.

I have a select box for time entry that defaults to a time passed in. Is it possible to set selected = selected for the value it defaults to? Currently the default time is displayed, but when you click on the box the list of options defaults to the first value (So if the default it 2pm, when you click to select an alternative time you are taken to 12am not 2pm).

The code:

{
            xtype: 'timefield',
            id: 'timeselect',
            name: 'starttime',
            fieldLabel: 'Start Time',
            labelWidth: 80,
            labelAlign: 'right',
            width: 160,
            minValue: '12:00 AM',
            maxValue: '11:55 PM',
            value: MyApp.config.AppConfig.time, //Current time rounded to hour
            increment: 15
        },

Thanks!

Edit: To clarify. The select box shows the correct time when the page loads. But when the user clicks on the select, they are taken to the start of the option list (12:00 am in this case). I'm hoping to have the option list default to the time selected (similar to ). Thanks!

Edit #2: The application uses v4.0.7

4
  • Can you clarify this part "Is it possible to set selected = selected for the value it defaults to?". Thanks Dec 18, 2013 at 18:51
  • Typically a select form element would let you use <option selected="selected">default</option> to default to an item in the list (i.e. stackoverflow.com/questions/3518002/…). When the user clicks on the dropdown to change the time, I'd like to default to the time shown, not the first item in the list. So if it defaults to 2pm, when they click on it, they would see the 2pm option, and not 12:00 AM.
    – Matt
    Dec 18, 2013 at 21:01
  • 1
    That is the default behaviour: fiddle.sencha.com/#fiddle/29k Dec 18, 2013 at 21:27
  • I should have specified that the application is using v4.0.7. When I change the version in the fiddle above, I don't see 2:00 PM selected when I click on the dropdown (in Chrome). Any suggestions? Thanks again!
    – Matt
    Dec 18, 2013 at 21:53

1 Answer 1

2

The solution is simple then: upgrade your version of Ext! Not that simple? Patch it in the meanwhile. I must confess that I tried to copy the code of the v4.2 of Ext.form.field.Time into the fiddle. That didn't work. Here's a cleaner approach:

Ext.define('Ext.ux.fix.Ext.form.field.Time.CurrentSelectionOnExpand', {
    override: 'Ext.form.field.Time'

    ,initComponent: function() {
        this.callParent();
        this.on({
            scope: this
            ,delay: 1 // let render
            ,expand: function() {
                this.highlightCurrent();
            } 
        });
    }

    // copied from Ext.view.BoundListKeyNav.method#highlightAt()
    ,highlightCurrent: function() {
        var me = this,
            picker = me.picker,
            index = picker.store.find('disp', me.getRawValue()),
            item = picker.all.item(index)
        if (item) {
            item = item.dom;
            picker.highlightItem(item);
            picker.getTargetEl().scrollChildIntoView(item, false);
        }
    }
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.