How to make automatic focus of tagfield on some condition

Question

I have a tagfield in which I am loading some value and sending to the server. What I want is when reload that tagfield component again, those value should be automatically selected. currently They are not automatically selected, But If I am giving a focus to the tagfield then those value are coming as selected.

What is the way to give automatically focus on some condition. Not all the time.

Right now I am just displaying the data but this is not correct way to do and in IE this is not working.

Here what I am doing currently

if(myField.xtype == "tagfield"){
        myField.xtype.setValue(myValue);
        myField.xtype.inputEl.set({'placeholder':myValue});
    }

What I want is

if(myField.xtype == "tagfield"){
        // Automatic Focus  OR
        // Someway by which I can set the value
    }

Answer 1

I am assuming that your tagfield config object is look like this.

var store =  Ext.create('Ext.data.ArrayStore',{ 
fields: [
    'abbr',
    'state',
    'description',
    'country'
],
data: [
    [0, 'AL', 'Alabama', 'The Heart of Dixie'],
    [1, 'AK', 'Alaska', 'The Land of the Midnight Sun'],
    [2, 'AZ', 'Arizona', 'The Grand Canyon State'],
    [3, 'AR', 'Arkansas', 'The Natural State'],
    [4, 'CA', 'California', 'The Golden State'],
    [5, 'CO', 'Colorado', 'The Mountain State'],
    [6, 'CT', 'Connecticut', 'The Constitution State'],
    [7, 'DE', 'Delaware', 'The First State'],
    [8, 'DC', 'District of Columbia', "The Nation's Capital"],
    [9, 'FL', 'Florida', 'The Sunshine State'],
    [10, 'GA', 'Georgia', 'The Peach State'],
    [11, 'HI', 'Hawaii', 'The Aloha State'],
    [12, 'ID', 'Idaho', 'Famous Potatoes']
] 
});

{
        xtype: 'tagfield',
        fieldLabel: 'Select a state',
        store: store,
        reference: 'states',
        displayField: 'state',
        valueField: 'abbr',
        filterPickList: true,
        queryMode: 'local',
}

By this config if you select states like Alabama,Alaska,Arizona in tag fields then you will get value like this ['AL','AK','AZ'] because in tag field config you have set valueField: 'abbr' and those value will go to server to save.

After reloading if you want to select those values then you have to give those three value as it is. like

if(myField.xtype == "tagfield"){//tagfield is in lower case 
         myField.setValue(['AL','AK','AZ']); // myField.setValue(myValue);
}

If you still want to focus same field and if you are loading tagfield's store on focus then you can use focus method of tag field.

if(myField.xtype == "tagfield"){ //tagfield is in lower case 
       myField.focus(true,true,function(){
       myField.getStore().load({
          callback: function(records, operation, success) {
              myField.setValue(['AL','AK','AZ']);//myField.setValue(myValue);                   
          }
       });
    }); 
}

Hope this helps.

If you have use tagfield as widget then you can use onWidgetAttach config on widgetcolumn and you can specify function on it.

Please refer link.