javascript - ExtJS 6 中的标记字段错误

Question

我创建了一个非常小的 fiddle demo ，它展示了 tagfield 组件的两个令人讨厌的错误。在 FireFox 中可以观察到一个错误，在 Chrome 中可以观察到另一个错误。在 Chrome 中，你会看到一个看起来很糟糕的垂直滚动条:

在 FireFox 中，您可以看到，如果您选择两个值(存储中有两个值，然后从选择中删除第二个值，则标记字段仍将焦点放在第二行上，因此该值是不可见:

我希望所有这些错误都不是错误，而是一些配置错误。我希望，有人可以提供这些属性，应该配置这些属性来修复它。

代码

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.create('Ext.form.field.Tag',{
            renderTo: "tagfield",
            displayField: "name",
            valueField: "id",
            queryMode: 'local',
            autocomplete: 'off',
            grow: false,
            triggerOnClick: false,
            itemId: "BaseLayers",
            forceSelection: true,
            width: 200,
            matchFieldWidth: false,
            value: 1,
            store: {
                autoLoad: true,
                storeId: "BaseLayersStore",
                fields:[
                    {name:'id', type:'string'},
                    {name:'name', type:'string'}
                ],
                data: [{
                    id: 1,
                    name: "Very first value"
                },{
                    id: 2,
                    name: "Second value"
                }]
            }
        })
    }
});

Answer 1

如果您不想垂直滚动，可以使用grow:true配置。 请检查 fiddle :
https://fiddle.sencha.com/#view/editor&fiddle/1m9v

Ext.application({
name : 'Fiddle',

launch : function() {
    Ext.create('Ext.form.field.Tag',{
        renderTo: "tagfield",
        displayField: "name",
        valueField: "id",
        queryMode: 'local',
        autocomplete: 'off',
        grow: false,
        triggerOnClick: false,
        itemId: "BaseLayers",
        forceSelection: true,
        width: 200,
        grow:true,
        matchFieldWidth: false,
        value: 1,
        store: {
            autoLoad: true,
            storeId: "BaseLayersStore",
            fields:[
                {name:'id', type:'string'},
                {name:'name', type:'string'}
            ],
            data: [{
                id: 1,
                name: "Very first value"
            },{
                id: 2,
                name: "Second value"
            }]
        }
    })
}
});