1. #1
    Sencha Premium Member
    Join Date
    Sep 2013
    Posts
    5
    Vote Rating
    0
    craig77 is on a distinguished road

      0  

    Default extjs 2.3 grid fails on store update

    extjs 2.3 grid fails on store update


    First time posting, have only started using extjs 2.3 (at my work) and have run into a strange issue. Basically I have an option for a user to get SLD (straight line distance) between a location they have selected and a number of predefined locations, so the users clicks the SLD button, a new window opens which does the following, loads predefined locations into a jsonstore, links this store into a grid in the new window, when the store is created I also send a request to googles directions service to return the driving distance between the locations, on callback I add this data to store which in turns updates the grid.
    The issue I see is, the first time the SLD button is clicked, the grid displays the information, and then the google callback adds the extra data into the store and I can see this displayed on the grid. I have a back button on the window, which when clicked returns the user to the menu window, destroys the SLD window and empties the store, so there is no trace of the SLD window any more. The issue will happen now when I click the SLD button again on the main menu, I can see the grid with data but now when the google callback returns and updates the store I see that the cells look like they have been edited and not saved.
    On my production machine this issue does not happen when I use Firefox or Chrome, only happens on IE, however I have wrote a small jsFiddle to reproduce the issue and now get the issue to happen on Chrome when I run the test.
    I can't understand how it can work correctly the first time, then the second time have this issue, and basically its running the same code as the first time!
    This is what my test looks like, have added dummy data and simplified things to reproduce issue

    Code:
    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/
    to reproduce click SLD -> back -> SLD

  2. #2
    Sencha Premium Member
    Join Date
    Sep 2013
    Posts
    5
    Vote Rating
    0
    craig77 is on a distinguished road

      0  

    Default


    bump

  3. #3
    Sencha Premium Member
    Join Date
    Sep 2013
    Posts
    5
    Vote Rating
    0
    craig77 is on a distinguished road

      0  

    Default


    bump

  4. #4
    Sencha Premium Member
    Join Date
    Sep 2013
    Posts
    5
    Vote Rating
    0
    craig77 is on a distinguished road

      0  

    Default


    no help

Tags for this Thread