如何在某些条件下自动对焦标记域

时间:2017-05-25 05:09:32

标签: javascript extjs extjs6

我有一个标记字段,我在其中加载一些值并发送到服务器。我想要的是再次重新加载那个标记字段组件时,应该自动选择这些值。 当前它们不是自动选择的,但是如果我将焦点放在标记字段上,那么这些值将被选中。

自动关注某些条件的方法是什么。不是所有的时间。

现在我只是显示数据,但这不是正确的方法,在IE中这不起作用。

这是我目前正在做的事情

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

我想要的是

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

1 个答案:

答案 0 :(得分:1)

我假设您的tagfield配置对象看起来像这样。

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',
}

通过此配置,如果您在标记字段中选择Alabama,Alaska,Arizona之类的状态,那么您将获得类似['AL','AK','AZ']的值,因为在标记字段配置中您已设置valueField: 'abbr'并且这些值将转到要保存的服务器。

重新加载后如果要选择这些值,则必须按原样给出这三个值。喜欢

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

如果您仍想要关注相同的字段,并且如果要在焦点上加载tagfield的商店,则可以使用标记字段的focus方法。

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);                   
          }
       });
    }); 
}

希望这有帮助。

如果您使用tagfield作为小部件,那么您可以在onWidgetAttach上使用widgetcolumn配置,并且可以在其上指定功能。

请参阅link