Javascript 谷歌地图API v3：我可以使用ExtJS4.2在combobox中创建Place Autocomplete吗？

我已经在谷歌上搜索过了，但是没有找到解决方案。我读过文档，但它只是使用纯javascript

我读过@Ram写的旧帖子，但答案并没有解决我的问题，因为我想也许还有其他更棘手的方法，我现在还没有从我现有的知识中找到

我曾尝试使用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中，因为在键入location时，用户会动态调用此json。因此，如果我将Ext.data.store放在combobox之前的开头，combobox只显示原始存储，而不是在键入location时从用户处显示。但是，在尝试此url之前：

http://maps.google.com/maps/api/geocode/json?address=“地址”&传感器=假

有时这个url会给我一个json输出，但有时会给我错误“找不到服务器”。我不知道为什么，直到我发布这篇文章，url才会显示错误，但这不是问题，因为我有另一个技巧来获取json

我的问题是： 1.有没有一种方法可以从combobox动态加载json存储，它自己使用keyup listener调用我的ajax？我的意思是，不使用其他组合框从另一个组合框触发加载。 2.有没有办法使用ExtJS4.2创建这个地方自动完成？或者其他解决方法

非常感谢您的帮助

---

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

好的，看看下面的代码，这里我们只是使用了一个本地固定数据源，但在您的示例中，您可以使用适当的代理将其指向您的

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

Ext.application({
名字：“小提琴”，
启动：函数（）{
addressModel=Ext.define（“地址”{
扩展：“Ext.data.Model”，
代理：{
键入：“jsonp”，
网址：'https://jsonp.nodejitsu.com',
读者：{
键入：“json”，
root:'结果'，
totalProperty:“totalCount”
}
},
字段：[“格式化的地址”]
});
var ds=Ext.create（'Ext.data.Store'{
型号：“地址”
});
var panel=Ext.create（'Ext.panel.panel'{
renderTo:Ext.getBody（），
标题：“搜索地址”，
宽度：600，
车身衬垫：10，
布局：“锚定”，
项目：[{
xtype:'组合'，
门店：ds，
displayField:'标题'，
typeAhead:false，
希德拉贝尔：没错，
希德崔格：没错，
主播：100%，
enableKeyEvents:true，
列表配置：{
loadingText:“正在搜索…”，
emptyText:“找不到匹配的帖子。”，
//每个项目的自定义渲染模板
getInnerTpl:函数（）{
返回“{formatted_address}”；
}
},
//覆盖默认onSelect to do重定向
听众：{
选择：功能（组合、选择）{
变量地址=选择[0]；
如果（地址）{
警报（“您选择的”+地址.数据.格式化的\u地址）；
}
},
keyup：函数（组合）{
queryString=combo.getValue（）；
console.log（queryString）；
日志（addressModel）；
addressModel.getProxy（）.setExtraParam（'url'，'http://maps.google.com/maps/api/geocode/json?address=“+queryString+”&sensor=false”）；
}
}
}, {
xtype:'组件'，
样式：“页边距顶部：10px”，
html:“实时搜索至少需要4个字符。”
}]
});
}
});

---

演示：

为什么不使用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);
    },

xtype:'component'，
html:“”，
听众：{
渲染：函数（）{
var input=document.getElementById（'searchTextField'）；
autocomplete=new google.maps.places.autocomplete（输入，{types:['geocode']}）；
autocomplete.addListener（'place\u changed'，this.fillindAddress）；
},

现在，如果您想在面板中使用此组件，则与Sencha样式存在冲突。因此，您需要添加google api的html文件声明。（我尝试添加到css文件，但也不起作用） google自动完成动态样式：

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

.pac集装箱{
z指数：100000！重要；
}

---

这很简单，请看一看名为“实时搜索”的Sencha示例我以前看过sencha live search，但我还没有得到一些启发。也许你能帮我了解一下你的逻辑，如何使用它来创建自动完成？谢谢，你花时间创建了一个演示。我看过你的演示代码bro@Rob Schmuecker，我想问你关于“如果我在键入地址时搜索地址返回响应，该怎么办？”我的意思是，最初我在