2

私はコンボボックスプロパティのオートコンプリートでextjs + phpで作業しています。

Ext.define('Balaee.view.kp.Word.Word',  {
    extend:'Ext.form.Panel',
    id:'WordId',
    alias:'widget.Word',
    title:'Dictionary',

    items:[
    {

        xtype : 'combobox',
        fieldLabel : 'Enter the word',
        name : 'wordtext',
        displayField: 'word',
        valueField: 'word',
        allowBlank : false,
        emptyText : 'Enter the word',
        enableKeyEvents : true,
        autoSelect: true,
        id : 'wordtext',
        triggerAction:'all',
        typeAhead:true,
        typeAheadDelay:100,
        mode:'remote',
        minChars:1,
        forceSelection:true,
        hideTrigger:true,
        store:'kp.WordStore',
        listeners:  {
                specialkey: function (f,e) {    
                     if (e.getKey() == e.ENTER) {
                     this.up().down('button[action=SearchAction]').fireEvent('click');
                    }
                }
            }
        },
        {
            xtype:'button',
            formBind: true,
            fieldLabel:'Search',
            action:'SearchAction',
            text:'Search',
        }
    ]
});

上記のコンボボックスにバインドされているストアは、次のように機能しているサーバーから関数 URL を読み取ります-

public function actionGetword()
        {
             $record1=Word::model()->findAll();
             foreach($record1 as $record)
             {
             $main[]=array("wordId"=>$record->wordId,"word"=>$record->word);
             }
             echo "{ \"data\":".CJSON::encode($main)."} ";}

したがって、上記のコンボボックスにストアバインドすると、すべての単語がデータベースに保存されます。上記のフィールドに「テーブル」という単語を挿入しようとしている場合。「ta」と書いているとき、ドロップダウンに提案が表示されます。しかし、すべての単語を表示しています。しかし、「た」で始まる単語を提案ボックスにのみ表示したいのです。では、どうすればこれを変更できますか？誰か助けてくれませんか

4

1 に答える 1

0

やりたいことを実行するには、2 つの方法があります。現在行っているようにすべてのデータを一度にロードしてクライアント側でフィルタリングするか、サーバー側でデータをフィルタリングします。解決策 1 は 1 つの HTTP リクエストのみをトリガーし、コンボは非常に反応的になります。

サーバー側のフィルタリング

サーバーでフィルタリングする場合は、HTTP 要求のパラメーター「クエリ」をキャッチする必要があります。queryParamこれは、コンボ ボックスのオプションで構成できます。

例えば：

$query = isset($_REQUEST['query']) ? $_REQUEST['query'] : false;

$record1 = Word::model()->findAll();
$main = array();
foreach($record1 as $record) {
    // Only add data for records matching the query
    if ($query === false || substr($record->word, 0, strlen($query)) === $query) {
        $main[]=array("wordId"=>$record->wordId,"word"=>$record->word);
    }
}
echo "{ \"data\":".CJSON::encode($main)."} ";

このようなサーバーでは、クライアント コードは次のようになります。

var store = Ext.create('Ext.data.JsonStore', {
    fields: ['wordId', 'word']
    ,proxy: {
        // TODO...
    }
});

Ext.widget('combo', {
    renderTo: 'comboCt'
    ,queryMode: 'remote' // you have this one wrong, 'mode' was in Ext 3
    ,triggerAction: 'all'
    ,displayField: 'word'
    ,idField: 'wordId'
    ,minChars: 1
    ,store: store

    // not needed because 'query' is the default, but you could customize that here
    ,queryParam: 'query'
});

クライアント側のフィルタリング

解決策 1 の場合は、1 回の読み込みとローカルでのフィルター処理ですqueryMode。「ローカル」に設定し、ストアを個別に読み込む必要があります。store.load()メソッドまたはautoLoadオプションを使用できます。

サーバーで使用する必要があるクライアント コードの例:

var store = Ext.create('Ext.data.JsonStore', {
    fields: ['wordId', 'word']
    ,proxy: {
        // TODO...
    }

    // Load the store once
    ,autoLoad: true
});

Ext.widget('combo', {
    renderTo: 'comboCt'
    // local means the combo will work with data in the store buffer
    ,queryMode: 'local'
    ,triggerAction: 'all'
    ,displayField: 'word'
    ,idField: 'wordId'
    ,store: store
    ,minChars: 1
});
于 2013-05-07T19:53:26.520 に答える