2

ストアを使用して、入力時にユーザーに値を提案する ext コンボボックスがあります。

ここにその例があります:コンボボックスの例

提案されたテキストリストがDOMの要素にレンダリングされるようにする方法はありますか? 「applyTo」構成オプションを意味するものではないことに注意してください。これは、テキストボックスを含むコントロール全体を DOM 要素にレンダリングするためです。

4

5 に答える 5

1

プラグイン内からプライベート メソッドを呼び出したり、オーバーライドしたりできるため、これにはプラグインを使用できます。

var suggested_text_plugin = {

    init: function(o) {

        o.onTypeAhead = function() {
            // Original code from the sources goes here:

            if(this.store.getCount() > 0){
                var r = this.store.getAt(0);
                var newValue = r.data[this.displayField];
                var len = newValue.length;
                var selStart = this.getRawValue().length;
                if(selStart != len){
                    this.setRawValue(newValue);
                    this.selectText(selStart, newValue.length);
                }
            }

         // Your code to display newValue in DOM
         ......myDom.getEl().update(newValue);
        };
    }
};


// in combobox code:

var cb = new Ext.form.ComboBox({
    ....
    plugins: suggested_text_plugin,
    ....
});

メソッドのチェーン全体を作成して、元のメソッドを自分のメソッドの前または後に呼び出すことも可能だと思いますが、まだ試していません。

また、非標準のプラグイン定義と呼び出しメソッド (文書化されていない) を使用することについて、私を強く押し付けないでください。それは私の物事の見方です。

編集：

メソッドチェーンは次のように実装できると思います（テストされていません）：

....
o.origTypeAhead = new Function(this.onTypeAhead.toSource());
// or just
o.origTypeAhead = this.onTypeAhead;
....

o.onTypeAhead = function() {
    // Call original
    this.origTypeAhead();
    // Display value into your DOM element
    ...myDom....
};
于 2008-09-16T18:45:21.017 に答える
1

@qui

考慮すべきもう 1 つの点は、initList が API の一部ではないことです。Ext の将来のリリースでは、そのメソッドがなくなるか、動作が大幅に変更される可能性があります。アップグレードする予定がない場合は、心配する必要はありません。

于 2008-09-17T17:36:36.260 に答える
0

明確にするために、選択したテキストをテキスト入力の真下以外の場所にレンダリングする必要があります。正しい？

ComboBox は、Ext.DataView、テキスト入力、およびオプションのトリガー ボタンを組み合わせたものです。あなたが望むものに対する公式のオプションはなく、それをハッキングしてあなたが望むものにするのは本当に苦痛です. したがって、最も簡単な方法は (必要なコンポーネントを含む他のライブラリを見つけて使用する以外に)、上記のコンポーネントを使用して独自のライブラリを構築することです。

  1. テキスト ボックスを作成します。必要に応じてExt.form.TextFieldを使用して、keyup イベントを観察できます。
  2. ストアにバインドされた DataView を作成し、任意の DOM 要素にレンダリングします。必要に応じて、「selectionchange」イベントをリッスンし、選択に応じて必要なアクションを実行します。たとえば、Ext.form.Hidden (またはプレーンな HTML input type="hidden" 要素) の setValue。
  3. keyup イベント リスナーで、ストアのフィルター メソッド (ドキュメントを参照) を呼び出し、フィールド名とテキスト フィールドの値を渡します。例: store.filter('name',new RegEx(value+'.*'))

少し手間はかかりますが、独自のコンポーネントをゼロから作成したり、ComboBox をハッキングして思い通りに動作させるよりもはるかに短時間で済みます。

于 2008-09-16T17:14:14.153 に答える
0

@qui

Ok。(既存のコンボ フィールドに加えて) 追加の DOM フィールドが必要だと思いました。

しかし、あなたのソリューションは ComboBox クラスのメソッドをオーバーライドしますよね? これにより、すべてのコンボ ボックスが同じ DOM にレンダリングされます。プラグインを使用すると、1 つの特定のインスタンスのみがオーバーライドされます。

于 2008-09-17T14:18:40.917 に答える
0

@Thevs

あなたは正しい軌道に乗っていたと思います。

私がしたことは、Combobox の initList メソッドをオーバーライドすることでした。

    Ext.override(Ext.form.ComboBox, {
    initList : function(){

コードを見ると、提案のリストをデータビューにレンダリングする部分が見えます。したがって、apply を必要な dom 要素に設定するだけです。

            this.view = new Ext.DataView({
            //applyTo: this.innerList,
            applyTo: "contentbox",
于 2008-09-17T10:20:46.387 に答える