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

debugcn 发表于 Dev

用户1919

有时，虽然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数据库中获取数据，然后呢？我在哪里存储数据？是否可以将它们放在商店中？如果是，如何定义商店的形式？

任何帮助或示例将不胜感激。

谢谢你。

用户1919

在互联网上进行了一些搜索之后，借助这篇文章，我设法使它起作用。

这是我所做的：

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

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

我希望这对以后的人有所帮助。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。