Question

我在google上搜索了这个，但没有找到解决方案的运气。我已阅读this文档，但它只使用纯javascript。

我已阅读@Ram创建的旧帖子中的this，但答案并未解决我的问题，因为我认为可能还有其他想法更难以解决我的问题＆＃39现在从我目前的知识来达到它。

我尝试使用php中的ajax来检索预测并抛弃这个限制，这是我在c_places.php中的php代码：

function getPlaces(){
        $address = urlencode($this->input->post('place'));
        $request = file_get_contents("http://maps.google.com/maps/api/geocode/json?address=" . $address . "&sensor=false");
        // $json = json_decode($request, true);
        echo $request;
    }

这是我的ajax电话：

Ext.Ajax.request({
    url: 'c_places/getPlaces',
    params: {
        "place" : someplace
    },
    success: function(response, opts) {
        var obj = Ext.decode(response.responseText);
        console.dir(obj);
    },
    failure: function(response, opts) {
        console.info('server-side failure with status code ' + response.status);
    }
});

ajax从googleapis返回一个json obj，但是我不知道如何将这个json放到combobox的data.store中，因为这个在打字位置时动态地从用户调用。因此，如果我将Ext.data.store放在组合框之前的开头，组合框只显示原始商店，而不是用户在输入位置时。但是，在您尝试此网址之前：http://maps.google.com/maps/api/geocode/json?address="address"&sensor=false

有时这个网址给我一个json输出，但有时会给我错误＆＃34;服务器找不到＆＃34;。我不知道为什么，直到我发布这个网址告诉我错误，但这不是问题，因为我还有另一个获得json的技巧。

我的问题是： 1.有没有办法从组合框中动态加载json存储，它使用keyup监听器来调用我的ajax？我的意思是，不使用其他组合框来触发另一个组合框的负载。 2.有没有办法在使用ExtJS 4.2时创建这个地方自动完成？或其他想法来解决这个问题？

非常感谢任何帮助！

请纠正我，如果我的问题没有解决问题，或者我的问题是过于宽泛或不清楚问题陈述。我很乐意编辑我的帖子以提供更多细节。

Answer 1

好的，请看下面的代码，这里只是使用本地固定数据源，但在您的示例中，您将使用适当的代理指向c_places.php。由于在示例中数据源已修复，因此始终返回相同的数据，但在您的实例中，您必须检查键入的值。

Ext.application({
    name: 'Fiddle',

    launch: function() {
        addressModel = Ext.define("Addresses", {
            extend: 'Ext.data.Model',
            proxy: {
                type: 'jsonp',
                url: 'https://jsonp.nodejitsu.com',
                reader: {
                    type: 'json',
                    root: 'results',
                    totalProperty: 'totalCount'
                }
            },

            fields: ['formatted_address']
        });

        var ds = Ext.create('Ext.data.Store', {
            model: 'Addresses'
        });


        var panel = Ext.create('Ext.panel.Panel', {
            renderTo: Ext.getBody(),
            title: 'Search the Addresses',
            width: 600,
            bodyPadding: 10,
            layout: 'anchor',

            items: [{
                xtype: 'combo',
                store: ds,
                displayField: 'title',
                typeAhead: false,
                hideLabel: true,
                hideTrigger: true,
                anchor: '100%',
                enableKeyEvents: true,

                listConfig: {
                    loadingText: 'Searching...',
                    emptyText: 'No matching posts found.',

                    // Custom rendering template for each item
                    getInnerTpl: function() {
                        return '<div class="search-item">{formatted_address}</div>';
                    }
                },

                // override default onSelect to do redirect
                listeners: {
                    select: function(combo, selection) {
                        var address = selection[0];
                        if (address) {
                            alert('you picked ' + address.data.formatted_address);
                        }
                    },
                    keyup: function(combo) {
                        queryString = combo.getValue();
                        console.log(queryString);
                        console.log(addressModel);
                        addressModel.getProxy().setExtraParam('url', 'http://maps.google.com/maps/api/geocode/json?address=' + queryString + '&sensor=false');
                    }
                }
            }, {
                xtype: 'component',
                style: 'margin-top:10px',
                html: 'Live search requires a minimum of 4 characters.'
            }]
        });
    }
});

演示：https://fiddle.sencha.com/#fiddle/g70

Answer 2

为什么不使用sencha组合框，使用简单的文本输入作为google api自动完成文档的建议。（我首先尝试使用一个普通的文本域，但它没有工作）然后使用html声明一个组件，如下例所示，然后分配渲染：

xtype: 'component',
html: '<div> <input id="searchTextField" type="text" size="50"> </div>',
listeners: {
    render: function () {
        var input = document.getElementById('searchTextField');
        autocomplete = new google.maps.places.Autocomplete(input, { types: ['geocode'] });
        autocomplete.addListener('place_changed', this.fillInAddress);
    },

现在，如果您想在Panel中使用此组件，则与Sencha样式存在冲突。所以你需要添加google api的html文件声明。（我尝试添加到我的css文件，但它也没有工作）谷歌自动完成动态样式：

    <style type="text/css">
        .pac-container {
            z-index: 100000 !important;
        }
    </style>

Google Maps API v3：我可以使用ExtJS 4.2在组合框中创建地方自动填充功能吗？

2 个答案: