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

Question

第一次发帖，刚开始使用 extjs 2.3（在我的工作中）并且遇到了一个奇怪的问题。基本上我有一个选项让用户在他们选择的位置和许多预定义位置之间获取 SLD（直线距离），因此用户单击 SLD 按钮，将打开一个新窗口，执行以下操作，将预定义位置加载到一个 jsonstore，将此商店链接到新窗口中的网格中，当商店创建时，我还向 googles 方向服务发送请求以返回位置之间的行驶距离，在回调时，我将此数据添加到存储中，进而更新网格。

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

在我的生产机器上，当我使用 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->返回->SLD

Answer 1

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

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

-