extJSタグフィールドのキャレット位置の設定方法

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」または「アンカー」設定を持っている必要があり、そうでなければ、それはminuscular初期幅

Answer 2

this fiddlerを確認してください。 4番目のタグの場合、キャレットは次の行に行きます。私はキャレットが最初の行になければならない。

これは動作を意図したものです。タグフィールドは、次のタグを追加するために最後に空白スペースを残します。タグフィールドを右に展開するための十分なスペースがない場合は、新しい行を追加することによって展開されます。

タグを同じ行に追加できるようにするには、パネルからwidth属性を削除します。

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