11

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
    }
Lorenz Meyer
  • 19,166
  • 22
  • 75
  • 121
David
  • 4,266
  • 8
  • 34
  • 69
  • Do you mean you are experiencing the same as [this bug report](https://www.sencha.com/forum/showthread.php?344610-Tagfield-with-createOnEnter-does-not-show-value-after-loadRecord)? – Alexander May 25 '17 at 06:22
  • @Alexander Yes a Similar kind of. My Value is getting appear when I click on focus. So I just thinking is there anyway I can get focused once I load. Also I was using my code but placeholder is not working in IE. I checked in doc and there is something called `preFocus` to avoid use of `placeholder` But I don't sure how to make use of that. Can you please help me how to use `preFocus ` or something similar – David May 25 '17 at 06:26
  • I have checked the tagfield source code. Please try whether the config option `autoLoadOnValue:true` works for you. It works in the fiddle from the bug report. – Alexander May 25 '17 at 06:29
  • `autoLoadOnValue:true ` will work only after the store get load. But In my case I am geeting store only after tagfield component get focused. – David May 25 '17 at 06:38
  • Nope, `autoLoadOnValue` will force the store load when the value is set. At least in 6.2.1 - which version do you use? – Alexander May 25 '17 at 06:44
  • Yes, I am using the same version. I trying with `autoLoadOnValue` but no luck. – David May 25 '17 at 07:32
  • @Alexander ANy IE11 heck for placeholder ? That also I may use to display value – David May 25 '17 at 07:54
  • Are you using `viewcontroller` for that particular form? if yes then you can use `bind` config to bind value. – Ronak Patel May 25 '17 at 09:52
  • Isn't `xtype` case sensitive ? – Lorenz Meyer May 29 '17 at 12:02

1 Answers1

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.

Ronak Patel
  • 651
  • 6
  • 19