We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 29661
    • 116 Posts
    Hello everyone,

    I have a huge problem that terrifies me at night: can't focus combobox

    I made a combobox:
    Bookit.combo.UserList = function(config) {
        config = config || {};
        Ext.applyIf(config,{
            id: 'bookit-extra-userlist-live',
            name: 'user',
            hiddenName: 'user',
            url: Bookit.config.connectorUrl,
        	baseParams: { action: 'mgr/bookit/extra/getUsers' },
    		minChars: 1,
    		fields: ['id','fullname'],
    		displayField:'fullname',
    		valueField: 'id',
    		forceSelection: false,
            typeAhead: true,
            selectOnFocus:true,
            loadingText: _('bookit.searching'),
            mode: 'remote',
            editable: true,
            triggerAction: 'all',
            emptyText: _('bookit.fillName')
        });
        Bookit.combo.UserList.superclass.constructor.call(this,config);
    };
    Ext.extend(Bookit.combo.UserList,MODx.combo.ComboBox);
    Ext.reg('bookit-extra-userlist-live',Bookit.combo.UserList);
    	


    That i put in window:
    Bookit.window.NewBook = function(config) {
        config = config || {};
        Ext.applyIf(config,{
            id: 'bookit-window-newbook'
            ,title: _('bookit.newBook')
            ,url: Bookit.config.connectorUrl
            ,baseParams: { 
            	action: 'mgr/bookit/board/saveBook'
            }
            ,fields: [{
                focus: true
                ,xtype: 'bookit-extra-userlist-live'
                ,fieldLabel: _('bookit.fullname')
                ,name: 'fullname'
                //,id: 'userlist'
                ,width: 300
                ,listeners: {
                    'select': {fn:this.testuj,scope:this}
                }
            },{
                xtype: 'textfield'
                ,fieldLabel: _('bookit.phone')
                ,name: 'phone'
                ,width: 300
            },{
                xtype: 'textfield'
                ,fieldLabel: _('email')
                ,name: 'email'
                ,width: 300
            },{
                xtype: 'bookit-extra-combo-items'
                ,fieldLabel: _('bookit.item')
                ,name: 'item'
                ,width: 300
            },{
                xtype: 'timefield'
                ,fieldLabel: _('bookit.time')
                ,format: MODx.config.manager_time_format
                ,increment: 60
                ,minValue: '7:00'
                ,maxValue: '21:00'
                ,name: 'time'
                ,width: 300
            },{
                xtype: 'numberfield'
                ,fieldLabel: _('bookit.hourCount')
                ,id: 'count'
                ,name: 'count'
                ,minValue: 1
                ,enableKeyEvents:true
                ,maxValue: 15
                ,width: 300
                ,listeners:{
                	keyup:function(field, e){
                    	Ext.getCmp('sliderCount').setValue(parseInt(field.getRawValue()));
                    }
                }
            },{
                xtype: 'sliderfield'
                ,name: 'sliderCount'
                ,id: 'sliderCount'
                ,useTips: false
                ,minValue: 1
                ,maxValue: 15
                ,increment: 1
                ,width: 300
                ,scope: this
                
            }]
            ,buttons: [{
                text: config.cancelBtnText || _('cancel')
                ,scope: this
                ,handler: function() { this.close(); }
            },{
                text: config.saveBtnText || _('save')
                ,scope: this
                ,handler: this.submit
            }]
        });
        Bookit.window.NewBook.superclass.constructor.call(this,config);
        Ext.getCmp('sliderCount').slider.on('change', function(slider,newvalue,oldvalue){Ext.getCmp('count').setValue(newvalue);});
    };
    Ext.extend(Bookit.window.NewBook,MODx.Window, {
    	testuj: function() {
    		var userid = Ext.getCmp('bookit-extra-userlist-live').value
    		var newBookWindow = this;
    		MODx.Ajax.request({
                url: Bookit.config.connectorUrl
                ,params: {
                    action: 'mgr/bookit/board/getUserDetails'
                    ,id: userid
                }
    	        ,listeners: {
    	            'success': {fn:function(r) {		    			        
    	            	newBookWindow.setValues(r.object);
    	            },scope:this}
    	        }
            });
    		//this.setValues([{id:'email', value:'[email protected]'}])
    		//Ext.getCmp('bookit-extra-combo-items').setValue(2);
        }
    	
    });
    Ext.reg('bookit-window-newbook',Bookit.window.NewBook);


    What I need:
    When the window is loaded, I want to focus combobox (firstfield), so user can directly type in the combo (without using mouse to the combobox by clicking in).

    I didn't find any help.... and combobox doesn't have focus method as other textfields...

    Anyone know how to fix this problem please (I will be grateful for any help)? [ed. note: TheBoxer last edited this post 14 years, 9 months ago.]
      --
      John
      @theboxer
      • 28042 ☆ A M B ☆
      • 24,524 Posts
      Looks like adding a time delay to the focus does the trick... http://www.sencha.com/forum/showthread.php?46896-2.2-Combobox-focus
        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
        • 29661
        • 116 Posts
        thx 4 reply, I tried this as well, but when I try to call focus method getting this:
        Ext.getCmp('bookit-extra-userlist-live').focus()
        TypeError: Property 'focus' of object [object Object] is not a function
        Ext.getCmp('bookit-extra-userlist-live').focus('', 10)
        TypeError: Property 'focus' of object [object Object] is not a function


        Look like combobox doesn't have focus method...
          --
          John
          @theboxer
          • 29661
          • 116 Posts
          Ok,

          think I found the solution, maybe it is not the best and straight way, but it works for me (any other better solution are welcome)

          solution:

          add code bellow to the end of window definition
          	this.on('show', function(){
          		var task = new Ext.util.DelayedTask(function(){
          			this.fp.getForm().el.dom[1].select();
          		}, this);
          		task.delay(200); 
          	});
            --
            John
            @theboxer