Question

我在extjs + php上工作，自动完成了combobox属性。我有视图 -

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”开头的单词。那我该如何修改呢？有人可以帮助我

Answer 1

你有两种方法可以做你想做的事。要么像现在一样加载所有数据，要么在客户端进行过滤，要么过滤服务器端的数据。解决方案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选项。

应与服务器通信的示例客户端代码：

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

Extjs4自动完成组合框问题

1 个答案:

服务器端过滤

客户端过滤