extjs4 - テキストボックスの検索オプション

Question

ExtJs4を使用しています。Webアプリケーションにテキストボックスがあるフォームがあります。シナリオは、テキストボックスで任意のキーが押されたときに、検索（Googleなど）のようなAJAXを提供することです。検索はWebサービスを調べます。結果（JSONオブジェクト）をドロップドローンで表示します。Google検索と同様です。

これを行うためのアイデア、リンク、またはチュートリアルはありますか？

ありがとう

Answer 1

この例を試してください：http：//docs.sencha.com/ext-js/4-0/#！ / example / form / forum-search.html

Answer 2

これにはComboBoxを使用できます。トリガーありまたはなし（ TextBoxのように見えます）。

Senchaは良い例を提供します：http：
//docs.sencha.com/ext-js/4-0/# ！/ example / form / combos.html
http://docs.sencha.com/ext-js/4-0 /#!/example/form/forum-search.html

これは簡単な例です。

{
        xtype: 'combo',
        id: 'myCombo',
        store: Ext.create('Ext.data.ArrayStore', {
                model: Ext.define('ComboModel', {
                        extend: 'Ext.data.Model',
                        fields: ['id','data1','data2']
                }),
                proxy: {
                        type: 'ajax',
                        url : 'data.json',
                        reader: {
                                type: 'array'
                        }
                }

        }),
        triggerAction: 'query',
        minChars: 2,
        fieldLabel: 'Search',
        displayField: 'data1',
        msgTarget: 'side',
        triggerCls : 'x-form-search-trigger', // Search Icon For Instance
        listConfig: {
                getInnerTpl: function() {
                        return '<div>{data1}</div><div>{data2}</div>';
                }
        }
}

そしてJSONファイル：

[
    ['1','data1-1','data2-1'],
    ['2','data1-2','data2-2'],
    ['3','data1-3','data2-3'],
    ['4','data1-4','data2-4'],
    ['5','data1-5','data2-5']
]

Answer 3

この例http://docs.sencha.com/ext-js/4-1/#!/example/form/forum-search.htmlはあなたにとって興味深いものになると思います。この実現には、標準のコンボボックスコントロールが使用されます。あなたの場合、minCharsプロパティ= 1を設定する必要があります。この場合、Comboboxにバインドされたストアは、サーバーへのフィルターパラメーターを使用して標準のREADクエリを生成します。そこで結果を生成できます。