加载复杂对象以存储在 sencha touch 1.1 中

Question

我有一个以下格式返回的 json 对象。

`{
    "ParkingFacilities": [
        {
            "VendorID": 1200,
            "FacilityID": 902,
            "ParkingType": "Garage",
            "BARTValidationRequired": null,
            "LotName": "California and Steiner Lot",
            "City": "San Francisco",
            "Street": "2450 California Street",
            "Neighborhood": "Fillmore",
            "Latitude": "37.790000",
            "Longitude": "-122.430000",
            "Distance": "",
            "Availability": "Space Available: <b>30%</b> (210/65) <br>Current Price: $8/hr-$35/hr max <br />Open Today:",
            "Details": null,
            "Hours": "",
            "Entrance": "",
            "Contact": "",
            "TodayTimings": null,
            "TotalParkingSpace": 45,
            "AvailableParkingSpace": 16,
            "OccupiedParkingSpace": 29,
            "PercentFull": 64,
            "Rendering": 2,
            "OwnershipAgencyType": null
        }


    ],
    "ParkingZones": [
        {
            "ZoneID": 1,
            "City": "San Francisco",
            "Neighborhood": "Fisherman's Wharf",
            "CentralLatitude": 37.80696471,
            "CentralLongitude": -122.41867077,
            "LocationDescription": "Leavenworth & Beach",
            "Total": 197,
            "Available": 45,
            "Availability": "Space Available: <b>45%</b> (89/197)",
            "Occupied": 89,
            "Distance": "0.4 Miles",
            "Rendering": 3
        }
    ]
}`

我想知道如何为这个 json 结构创建模型并使用然后渲染它以在地图上绘制点。

    Ext.regModel("parking.models.Facility", {
    fields:
        [
                       { name: 'VendorID', type: 'int' },
                       { name: 'FacilityID', type: 'int' },
                       { name: 'ParkingType', type: 'string' },
                       { name: 'BARTValidationRequired', type: 'auto' },
                       { name: 'LotName', type: 'string' },
                       { name: 'City', type: 'string' },
                       { name: 'Neighborhood', type: 'string' },
                       { name: 'Latitude', type: 'auto' },
                       { name: 'Longitude', type: 'auto' },
                       { name: 'Distance', type: 'auto' },
                       { name: 'Availability', type: 'string' },
                       { name: 'Details', type: 'string' },
                       { name: 'Hours', type: 'auto' },
                       { name: 'Entrance', type: 'string' },
                       { name: 'Contact', type: 'auto' },
                       { name: 'TodayTimings', type: 'auto' },
                       { name: 'TotalParkingSpace', type: 'float' },
                       { name: 'AvailableParkingSpace', type: 'float' },
                       { name: 'OccupiedParkingSpace', type: 'float' },
                       { name: 'PercentFull', type: 'auto' },
                       { name: 'Rendering', type: 'int' },
                       { name: 'OwnershipAgencyType', type: 'auto' }
        ]
});


Ext.regModel("parking.models.Zones", {
    fields:
        [
                       { name: 'ZoneID', type: 'int' },
                       { name: 'City', type: 'string' },
                       { name: 'Neighborhood', type: 'string' },
                       { name: 'CentralLatitude', type: 'auto' },
                       { name: 'CentralLongitude', type: 'auto' },
                       { name: 'LocationDescription', type: 'string' },
                       { name: 'Total', type: 'float' },
                       { name: 'Available', type: 'float' },
                       { name: 'Availability', type: 'string' },
                       { name: 'Occupied', type: 'float' },
                       { name: 'Distance', type: 'auto' },
                       { name: 'Rendering', type: 'int' }

        ]

});

我为停车设施创建的商店：

    parking.stores.parkingFacility = new Ext.data.Store({
        model: 'parking.models.Facility',
        proxy: {
            type: 'ajax',
            url: 'GetParkingFacilityByCity.json',
            reader: {
                type: 'json',
                root: 'ParkingFacilities'
            }
        },
        autoLoad:true
    });


This is how i render it in my view

  var map = new Ext.Map({
                 title: 'Map',
                 useCurrentLocation: true,
                 mapOptions: {
                     center: new google.maps.LatLng(37.381592, -122.135672),
                     zoom: 12,
                     mapTypeId: google.maps.MapTypeId.ROADMAP,
                     navigationControl: true,
                     navigationControlOptions: {
                         style: google.maps.NavigationControlStyle.DEFAULT
                     }
                 },
                 listeners: {
                     maprender: function (comp, map) {
                         var image = 'icon_blueP.png';
                         ***data = parking.stores.parkingFacility;
                         for (var i = 0, ln = data.data.length; i < ln; i++) {
                             addMarkers(data.data.items[i], image);
                         }***
                     }
                 }

             });


var addMarkers = function (data,image) {

    var latLng = new google.maps.LatLng(data.get('Latitude'), data.get('Longitude')); 
        var marker = new google.maps.Marker({
            map: map.map,
            position: latLng,
            icon:image
        });

          google.maps.event.addListener(marker, 'click', function() {
                                         infowindow.open(map, marker);
                                    });

        //  setTimeout( function(){ map.panTo (position); } , 1000);

}

问题不是创建 2 个单独的商店。我可以使用单个商店，然后在谷歌地图中渲染时使用单个商店来获取所有信息。

这就是问题发生的地方，

> ***data = parking.stores.parkingFacility;
>                              for (var i = 0, ln = data.data.length; i < ln; i++) {
>                                  addMarkers(data.data.items[i], image);
>                              }***

我是否需要调用类似的东西

      data 2= parking.stores.zones 
        for (var i = 0, ln = data.data.length; i < ln; i++) {
                                 addMarkers(data.data.items[i], image);
                             }

，或者是否有更好的方法来做到这一点。有人可以帮我提供样品吗？

谢谢 帕万

Answer 1

我的解决方案是创建一个类型为 auto 的数据存储，如下所示。

Ext.regModel("PF", {
    fields:
        [
            { name: 'ParkingFacilities', type: 'auto' },

            { name: 'ParkingZones', type: 'auto' }
       ]
});

希望这对某人有所帮助。