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

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

4

1 回答 1

0

你有两种方法可以做你想做的事。您可以像现在一样一次加载所有数据，然后在客户端进行过滤，或者在服务器端过滤数据。解决方案 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'
});

客户端过滤

方案一，即加载一次，本地过滤，必须设置queryMode为'local'，独立加载store。您可以使用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 回答