外部コンボボックスから DOM 内の要素への推奨値のレンダリング

StackOverflow https://stackoverflow.com/questions/74266

  •  09-06-2019
  •  | 
  •  

質問

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

その例は次のとおりです。 コンボボックスの例

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

役に立ちましたか？

解決

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

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....
};

他のヒント

@qui

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

したがって、選択したテキストをテキスト入力の直下以外の場所にレンダリングする必要があることを明確にしてください。正しい？

ComboBox は単に次のものを組み合わせたものです 拡張データビュー, 、テキスト入力、およびオプションのトリガー ボタン。あなたが望むものを実現する公式のオプションはなく、あなたが望むものを実現するためにそれをハッキングするのは非常に苦痛です。したがって、最も簡単な行動方針は (必要なことを正確に実行するコンポーネントを含む他のライブラリを見つけて使用する以外)、上記のコンポーネントを使用して独自のライブラリを構築することです。

  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 をハックして希望どおりに動作させるよりははるかに短くなります。

@Thevs

あなたは正しい道を歩んでいたと思います。

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

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

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

            this.view = new Ext.DataView({
            //applyTo: this.innerList,
            applyTo: "contentbox",

@qui

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

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top