Extjs4自动完成组合框问题

我正在 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)."} ";}

因此，存储绑定到上面的组合框将所有单词存储在数据库中。如果我尝试在上面的字段中插入单词“table”。当我写“ta”时，它在下拉列表中为我提供建议。但它显示所有单词。但我只想在建议框中包含以“ta”开头的单词。那么我该如何修改这个呢？有人能帮我吗

您有两种方法可以做您想做的事。要么像现在一样一次性加载所有数据，并在客户端进行过滤，要么在服务器端过滤数据。解决方案 1 将仅触发一个 HTTP 请求，该组合将非常被动。

服务器端过滤

如果要在服务器上进行过滤，则应该捕获 HTTP 请求的参数“query”。这可以通过选项进行配置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，即加载一次并在本地过滤，您必须设置queryMode到“本地”，并独立加载商店。您可以使用store.load()方法，或autoLoad option.

应该与您的服务器一起使用的示例客户端代码：

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