如何在extJS tagfield中設置插入符號位置

Question

我有一個標記場，我想在標記場中設置插入符位置。 選擇少量值后，插入符號將下降，因此我想設置在特定位置。 這是我正在嘗試的方法，任何人都可以請我解釋一下該如何做。

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

請檢查這個提琴手 。 對於第四個標記，插入符號將轉到下一行。 我希望插入符號應位於第一行。

這是預期的行為。 標簽字段始終在末尾留空白，以添加下一個標簽。 如果沒有足夠的空間將標記字段擴展到右側，則會通過添加新行來向下擴展。

如果您希望能夠在同一行上添加更多標簽，只需從面板中刪除width屬性。

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