javascript - 如何将数据从数据库加载到组合框(自动完成)

Question

有时，在 jQuery 中很容易理解和实现的事情在 ExtJS 中可能需要很长时间才能完成，尽管 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'(或将其删除，因为默认为远程)后，无论输入什么值，都应使用查询参数中的值发送到存储代理 url。