如何在extJS标记字段中设置插入符号位置

Question

我有一个标记字段，我想在tagfield中设置插入位置。选择几个值后，插入符号会下降，所以我想设置在特定的位置。这是我正在尝试的，任何人都可以解释我如何做到这一点。

expand:function(field,eOpts){
        var field = arguments[0];
        var fieldValue = field.getValue();
        fieldValue.toString().length;
        var pos =  140;//fieldValue.toString().length + 30;
        var el = field.inputEl.dom;
        el.setAttribute("selStartPos",pos);
        if (typeof(el.selectionStart) === "number") {
            el.focus();
            el.setSelectionRange(pos, pos);
        }
    },

Answer 1

光标包含在具有特定宽度的输入元素中（在我们的示例中为128px）。

如果在触发字段的末尾，剩下的空间比输入元素的宽度少，它将跳转到下一行。

我们可以通过css调整输入的宽度，这样它将占用最小的空间，并且它将保留在最后一个选定的项目旁边。

.x-tagfield-input-field {
    width: 3px;
}
.x-tagfield .x-tagfield-input {
    margin: 0;
}

此方法的一个巨大的下降是您无法真正查看已键入的文本以过滤项目。但如果从下拉列表中直接选择项目，它将正常工作。

这是小提琴：https://fiddle.sencha.com/#view/editor&fiddle/20nd

注意：触发器字段应指定“minWidth”或“anchor”配置，否则，它将具有负的初始宽度

Answer 2

  

请检查this fiddler。对于第四个标签，插入符号将进入下一行。我希望插入符号应该在第一行。

这是预期的行为。标记字段在末尾留下空白空间，以便添加下一个标记。如果没有足够的空间将标记字段向右扩展，则会通过添加新行来扩展它。

如果您希望能够在同一行添加更多标签，只需从面板中删除width属性。

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    title: 'Sci-Fi Television',
    height: 200,
    //width: 500,