如何从 SenCha Touch 中的商店检索数据

Posted 2023-02-26

【中文标题】如何从 SenCha Touch 中的商店检索数据

【英文标题】：How to retrieve data from a store in SenCha Touch

【发布时间】：2014-04-04 04:47:25

【问题描述】：

现在我有我的商店：stuStore 设置，其中包含一些模型数据。 我有另一个页面是谷歌地图。

学生数据结构： 名称、地理位置、价值等......

我想根据他们在 stuStore 内的位置在谷歌地图上显示每个学生的信息。

顺便说一句，这里是代码：

Ext.define('myapp.view.Main', 
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    fullscreen: true,
    requires: [
        'Ext.TitleBar',
        'Ext.Video',
        'Ext.Map',
        'Ext.Panel',
        'Ext.tab.*',
        'Ext.*'
    ],
    config: 
        tabBarPosition: 'bottom',

        items: [
            
                title: 'myapp',
                iconCls:'maps',
                xtype: 'map',
                useCurrentLocation: true,
                store: 'myapp.store.stuStore'
            

我该怎么做？

提前致谢。

---

更新 1：

var mapdemo = Ext.create('Ext.Map', 
    mapOptions: 
        center: new google.maps.LatLng(-37.73228, 144.86900),  //nearby San Fran
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        navigationControl: true,
        navigationControlOptions: 
            style: google.maps.NavigationControlStyle.DEFAULT
        
    ,
    title: 'MyApp',
    iconCls: 'maps',
    fullscreen: true,
    xtype: 'map',
    id: 'mainMap',
    useCurrentLocation: false,
    listeners: 
        maprender: function (comp, googleMap) 
            var store, latlng, marker;
            store = Ext.getStore('myapp.store.stuStore');

            store.each(function (record, index, length) 
                latlng = new google.maps.LatLng(record.get('Lat'), record.get('Lng'));

                marker = new google.maps.Marker(
                    position: latlng,
                    map: this
                );
            );     
        

    
),
    infowindow = new google.maps.InfoWindow(
        content: 'Sencha HQ'
    );


Ext.define('myapp.view.Main', 
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    fullscreen: true,
    config: 
        tabBarPosition: 'bottom',
        items: [mapdemo],
    
);

这是我在 view\Main.js 中更新的代码

但我没有得到任何标记，并且一直抛出错误：

未捕获的类型错误：无法调用未定义的方法“每个”

顺便说一句，停靠在屏幕底部的工具栏上的图标也不见了。

请指点我正确的方向，谢谢~~~

【问题讨论】：

你好？？？有人可以帮我吗？真的是菜鸟问题，但请帮忙~~~ thx

朋友们好~~~欢迎任何意见/建议或答案~~~请说点什么~~

【参考方案1】：

您可以通过在 maprender 事件回调中循环它们来基于商店记录创建标记，如下所示：

Ext.define('myapp.controller.MapController', 
    extend: 'Ext.app.Controller',
    config: 
        refs: 
            mapComponent: 'main map'
        ,
        control: 
            mapComponent: 
                maprender: 'onMaprender',
            
        
    ,
    onMaprender: function(mapComponent, googleMap) 
        var store, latLng, marker;

        // Get store
        store = Ext.getStore('myapp.store.stuStore')

        // On each store record
        store.each(function(record, index, length) 

            // Get position
            latLng = new google.maps.LatLng(record.get('lat'), record.get('lng'));

            // Create marker
            marker = new google.maps.Marker(
                position: latLng,
                map: googleMap
            );
        );
    
);

看看我整理的this Sencha Fiddle。

【讨论】：

您好 M165437，非常感谢您的回复！！！真的！我是否需要做类似的事情：googleMap.draw(marker); ？？？我刚刚看到标记已初始化但从未使用过。再次感谢！！！

您好 Franva，标记应该会自动添加到地图中。我建议您查看Sencha Touch map example，也可以在您的 Sencha Touch SDK 的示例文件夹中找到。您是否在正确的位置（纬度/经度）寻找您的标记？

您好 M16，谢谢您的建议。我现在就去做，并尽快试一试，并随时通知您。再次感谢您的帮助！！！您是唯一回答我问题的人。我问错了吗？为什么没有其他答案？

mapComponent 引用了Sencha Touch map component。它是谷歌地图的包装。 'main map' 就像这个组件的路径：'main' 是视图的 xtype，'map' 是 Sencha Touch 地图组件的 xtype。 maprender 事件在 Sencha Touch 地图组件上触发，回调有两个参数，为您提供组件和实际的谷歌地图。

我把这个Sencha Fiddle放在一起。看看吧！