Question

我创建了一个非常小的小提琴demo，它演示了tagfield组件的两个令人讨厌的错误。 FireFox中可以发现一个错误，Chrome中还有另一个错误。在Chrome中，你会看到一个看起来很糟糕的垂直卷轴：

在FireFox中你可以看到，如果你选择这两个值（商店中有两个值，然后从选择中删除第二个值，那么标记字段仍然将焦点保持在第二行，因此值为不可见：

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

CODE

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 配置。请检查小提琴：
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"
            }]
        }
    })
}
});

Tagfield在ExtJS 6中出现错误

1 个答案: