Question

我正在使用tagfield，在选择了两个或三个值后，我的光标向下移动。我希望我的光标在同一行，即使有一些空格，在输入或选择任何值后，它会向下移动。任何人都可以帮我解决这个问题。我也指定了具体的宽度。

我的代码：

{   xtype: Tagfield,
    growMax  : 10,
    valueField: 'title',
    displayField: 'title',
    parentGrid : me,
    queryMode: 'local',
    autoLoadOnValue:true, 
    multiSelect: true,
    isFilterDataLoaded: false,
    disabled: true,
    triggers: {
        clear: {
            weight: -30,
            cls: 'button-cross',
            handler: function(){
               this.clearValue();
            }
        }
    },
}

这是我的小提琴手：TagfieldFiddle。重现步骤： 1.选择三个标签。 2.对于第四个标签，光标将转到下一行。我希望cursoer应该在第一线。

Answer 1

您必须根据输入的文本调整输入字段的大小。由于输入字段是Ext.dom.Element，因此您必须检查这是否适用于所有浏览器：

listeners:{
    afterrender: function(tagfield) {
        var minWidth = 10, // modify here for adjustable text field width
            el = Ext.getBody().createChild(),
            measurer = new Ext.util.TextMetrics(el);
        tagfield.inputEl.setWidth(minWidth);
        tagfield.inputEl.on('keyup', function() {
            var requiredWidth = measurer.getWidth(tagfield.inputEl.dom.value);
            tagfield.inputEl.setWidth(requiredWidth+minWidth);
        });
        tagfield.on('change', function() {
            var requiredWidth = measurer.getWidth(tagfield.inputEl.dom.value);
            tagfield.inputEl.setWidth(requiredWidth+minWidth);
        });
    }
}

在此处试试：https://fiddle.sencha.com/#view/editor&fiddle/20cb

我更改了ExtJS版本，因为ExtJS 6.0中的标记字段似乎存在错误 - 如果您通过键盘输入，则选择后不会删除输入内容。

Tagfield光标不在当前行

1 个答案: