Question

第一次发帖，只开始使用extjs 2.3（在我的工作中）并遇到了一个奇怪的问题。基本上我可以选择让用户在他们选择的位置和多个预定位置之间获得SLD（直线距离），这样用户点击SLD按钮，会打开一个新窗口，执行以下操作，将预定位置加载到一个jsonstore，在新窗口中将这个商店链接到一个网格，当创建商店时我还发送一个请求谷歌方向服务返回位置之间的行车距离，在回调时我将这些数据添加到商店，然后更新网格。

我看到的问题是，第一次单击SLD按钮时，网格会显示信息，然后谷歌回调会将额外数据添加到商店中，我可以看到它显示在网格上。我在窗口上有一个后退按钮，单击该按钮会将用户返回到菜单窗口，破坏SLD窗口并清空存储，因此不再有SLD窗口的痕迹。当我在主菜单上再次单击SLD按钮时，问题就会发生，我可以看到带有数据的网格，但现在当谷歌回调返回并更新商店时，我看到单元格看起来已被编辑而未保存。

在我的制作机器上，当我使用Firefox或Chrome时，这个问题不会发生，只会发生在IE上，但是我写了一个小的jsFiddle来重现这个问题，现在我在运行测试时会在Chrome上发生问题。

我无法理解它第一次如何正常工作，然后第二次有这个问题，基本上它第一次运行相同的代码！

这就是我的测试结果，添加了虚拟数据和简化的东西来重现问题

var testData = [
    {'name': 'home', 'distance': 16.5, 'driving_distance': 0 },
    {'name': 'work', 'distance': 35.2, 'driving_distance': 0 },
    {'name': 'gym', 'distance': 12.8, 'driving_distance': 0 },
];

var locations;

// create store and load it with data
function createStore() {

    locations = new Ext.data.JsonStore({
        data: testData,
        sortInfo: {
            field: 'distance',
            direction: 'ASC'
        },
        fields: [
            { name: 'name' },
            { name: 'distance', type: 'float' },
            { name: 'driving_distance', type: 'float' }
        ]
    });

    var myLocation =  new google.maps.LatLng( '55.033778', '-7.125324' );
    var anyLocation = new google.maps.LatLng( '54.972441', '-7.345526' );
    var directionsService = new google.maps.DirectionsService();

    var request = {
        origin: new google.maps.LatLng( '55.033778', '-7.125324' ),
        destination: anyLocation,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };

    // get driving distance from myLocation to anyLocation and update locations store
    for ( var x = 0; x < locations.data.length; x++ )
    {
        // call directions service
        directionsService.route(request, function(response, status) {
            // do stuff if we get a result
            if (status == google.maps.DirectionsStatus.OK) {
                // update store items to use same value just for text purposes
                var distance = response.routes[0].legs[0].distance.value;
                distance = distance / 1000;

                // update on return call even though it updating the same thing 3 times
                locations.data.items[0].set('driving_distance', distance.toFixed(1));
                locations.data.items[1].set('driving_distance', (distance + 10.1).toFixed(1) );
                locations.data.items[2].set('driving_distance', (distance + 23.3).toFixed(1) );
                locations.commitChanges();
            }
        });
    }
}

new Ext.Window ({
    // menu normally consists of a combo box in which a user can select SLD
    title: 'Menu - cut down',
    id: 'rightClickWindow',
    headerPosition: 'left',
    scope: this,
    buttons: [{
        text: 'SLD',
        id: 'SLDButton',
        handler: function () {
            // hide menu window
            Ext.getCmp('rightClickWindow').hide();
            // create store
            createStore();
            // create SLD window
            new Ext.Window ({
                title: 'SLD',
                id: 'createSLDWindow',
                headerPosition: 'left',
                width: 450,
                scope: this,
                items: [{
                        xtype: 'grid',
                        id: 'SLDGrid',
                        singleSelect: true,
                        store: locations,
                        columns: [
                            {id: 'name', header: 'Location', width: 160, sortable: false, dataIndex: 'name'},
                            {header: 'SLD', width: 80, align: 'center', sortable: false, renderer: 'distance', dataIndex: 'distance'},
                            {header: 'Driving Distance', width: 90, align: 'center', sortable: false, renderer: 'driving_distance', dataIndex: 'driving_distance'}],
                        stripeRows: true,
                        autoExpandColumn: 'name',
                        enableHdMenu: false,
                        height: 250,
                        header: false
                } ],
                buttons: [{
                        text: 'Back',
                        id: 'SLDBackButton',
                        handler: function () {
                            // destroy SLD window
                            Ext.getCmp('createSLDWindow').destroy();
                            // show menu window
                            Ext.getCmp('rightClickWindow').show();
                            // destroy store
                            locations.loadData([],false);
                        }
                }],
                listeners: {
                    close: function (form) {
                        // destory everything
                        Ext.getCmp('createSLDWindow').destroy();
                        Ext.getCmp('rightClickWindow').destroy();
                        // destroy store
                        locations.loadData([],false);
                    }
                }
            }).show();
        }
    }]
}).show();

jsFiddle http://jsfiddle.net/UDkDY/74/

重现点击SLD - ＆gt;回来 - ＆gt; SLD

Answer 1

我认为更新值的方式存在问题：你发送3个请求（网格中每一行一个），但在每个请求的回调中你更新所有行（当你应该只更新对应于请求的行时）。

示例： http://jsfiddle.net/xer0d0he/

extjs 2.3网格在商店更新时失败

1 个答案: