如何设置extJS标记域中的插入符号位置

我有一个标记域，并且希望在tagfield中设置插入符号的位置。在选择少数值后，脱字符号正在下降，所以我想设置在特定的位置。这是我正在尝试，任何人都可以请解释我如何做到这一点。如何设置extJS标记域中的插入符号位置

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

来源

2017-05-29 David

你是什么意思通过“脱口而出”。这不清楚。 –

@LorenzMeyer请检查这个提琴手https://fiddle.sencha.com/#view/editor&fiddle/20c8对于第四个标签插入符号将进入下一行。我想脱口秀应该在第一线。 – David

'caret'是否意味着光标？如果是，则为包含标记字段的面板指定宽度，然后选择三个值。标记字段水平扩展到其最大可用空间，即面板的宽度。之后它正在向下扩展。所以如果面板宽度最大化或评论，那么它工作正常。 –

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

如果在触发字段的末尾，有左比输入元件的宽度更小的空间，将跳转到下一行。

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

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

一个巨大的缺点是，你不会真的能够看到您键入筛选项目的文本。但如果直接从下拉列表中选择项目，它将正常工作。

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

注意：触发场应该有一个“minWidth”或指定的“锚”的配置，否则，它将有一个minuscular初始宽度

来源

2017-06-01 09:20:18 scebotari66

感谢您的回答。 +1是的它工作正常。只有输入的项目不会来。让我想出一些解决方案。 – David

我修复了很多问题，并且工作正常。一个简单的问题是，有什么方法可以改变'.x-tagfield-input-field {width：3px; }'编程。我的意思是最初我想要这个'50px'和后选第一个'20px'。那可能吗？ – David

当然！ tagfield具有对输入元素的引用，以便您可以像这样动态更改输入的宽度：'tagfield.inputEl.setWidth（300）'。 – scebotari66

请检查this fiddler。对于第四个标签，插入符号将进入下一行。我想脱口秀应该在第一线。

这是打算的行为。标记栏在结尾留下了空白区域，以便添加下一个标记。如果没有足够的空间将标记栏向右扩展，则会通过添加一个新行来扩展。

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

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

来源

2017-05-30 06:49:03

感谢您的回答。雅我知道这种打算的行为，但是有什么方法可以在那里插入字样。一旦我键入，然后去下一行对我来说很好。 – David

如何设置extJS标记域中的插入符号位置

回答

相关问题