Question

虽然ExtJS确实是一个很棒的库，但有时在jQuery中易于理解和实现的东西在ExtJS中可能需要很长时间才能完成。我想要做的是创建一个具有自动完成功能的组合框。

使用本地商店非常简单。

首先我创建了商店：

var searchOptions = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data: [{
        "name": "Value1"
    }, {
        "name": "Value2"
    }]
});

然后我创建了这样的组合框：

{
    xtype: 'combo',
    displayField: 'name',
    fieldLabel: 'Insert NodeId',
    labelAlign: 'right',
    width: 200,
    margin: 5,
    id: 'nodeId',
    valueField: 'id',
    store: searchOptions,
    queryMode: 'local',
    minChars: 1,
    hideTrigger: true,
    forceSelection: true,
    typeAhead: true,
    listeners: {
        render: function() {
            this.store.load();
        }
    }
}

现在我想要的是运行这个远程而不是本地。如果我理解正确，我需要发送一个Ajax请求，从我的postgresql数据库中获取数据然后是什么？我在哪里存储数据？是否可以将它们放在商店中，如果是，我该如何定义商店的形式？

任何帮助或示例都会受到赞赏。

谢谢。

Answer 1

您需要做的第一件事是使用可以加载远程数据的代理配置searchOptions商店。它应该有一个指向加载数据的服务的URL。像

这样的东西

 proxy : {
    type    : 'rest',
    url     : '/api/service/users',
    reader  : {
        type : 'json',
        root : 'users'
    }
}

如果您将该服务配置为根据名为query的查询参数过滤其值，则可以将组合框链接到自动完成。请求应该类似于http://domain.com/api/service/users?query=Frank。

将组合框queryMode设置为'remote'（或因为远程是默认设置而将其删除）后，输入的任何值都应使用查询参数中的值发送到商店代理网址。

Answer 2

在互联网上进行一些搜索并借助post之后，我设法让它发挥作用。

这就是我所做的：

首先，我创建了一个商店，如：

var autoCompleteStore = new Ext.data.JsonStore({
    fields:['onomasia'],
    proxy: new Ext.data.HttpProxy({
        url: 'autocomplete/getautocomplete.php',
            method: 'POST'
        }),
    baseParams:{task: "onomasia"}      
});

然后我创建了一个组合框：

// DEFINE THE COMBO BOX FOR THE AUTOCOMPLETE
var nodeOikismoiField = new Ext.form.ComboBox({
    id:'nodeId',
    name: 'oikismos',
    fieldLabel: 'Insert NodeId',
    displayField: 'onomasia',
    store: autoCompleteStore,
    mode: 'remote',
    allowBlank: false,
    valueField: 'onomasia',
    anchor:'95%',
    triggerAction: 'all',
    labelAlign : 'right',
    width: 200,
    margin: 5,
    minChars:1
});

我在视口中调用了组合框。

最后，我的getautocomplete.php文件如下所示：

<?php
    include 'postgresConnect.php';

    $query = "SELECT onomasia FROM oikismoi_covered LIMIT 3"; 
    $resultImg = pg_query($dbconn, $query);
    $json = array();

    while ($oikismos = pg_fetch_row($resultImg)) {
        $json[] = array(
            'onomasia'=> $oikismos[0]
        );
    }

    echo json_encode($json);
?>

我希望将来可以帮助某人。

如何将数据从数据库加载到组合框（自动完成）

2 个答案: