CODEWITHSUNDEEP
javascriptajaxextjs
alexandercannon
alexandercannon

Reputation: 544

extjs setloading(false) causes error

I call grid.setloading before an ajax call.

in the ajax done function I call grid.setloading(false, false). this removes the loading but leaves the grid controls broken and me with the error message Uncaught TypeError: Cannot read property 'componentLayoutCounter' of undefined if I try and use any of the grid controls such as next page or refresh.

    grid.setLoading();
    $.ajax({
        url: "test.py",
        context: document.body
    }).done(function() {
         alert('well done');
         grid.setLoading(false,false);
    });

Basically my question is what exactly is happening to my grid and is there a way to stop the user using the grid while the ajax works it's magic but without using setloading as it's giving me a headache. Or if I can fix the setloading function so it doesn't break the grid afterwards.

NB, if I don't use the setloading then the ajax works as intended and the grid maintains it's stability so it isn't in the rest of the script.

NB, the ajax call is really slow - up to a minute - as test.py communicates with a third party API that does some complex mumbo jumbo so I need some way to disable the grid while this is happening.

Thanks!

Upvotes: 0

Views: 1058

Answers (1)

egerardus
egerardus

Reputation: 11486

Why not apply a load mask over the whole grid, then unmask it on the load event. That will prevent the user from accessing any of the grid controls. You should also disable the loadMask from the grid view to prevent double masking which would look dumb. Something like this:

grid.el.mask('loading...', 'loadingMask');
$.ajax({
    url: "test.py",
    context: document.body
}).done(function() {
     alert('well done');
     grid.el.unmask();
});

To disable the default load mask on the row portion of the grid (gridview) use this viewConfig property when creating the grid:

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        { text: 'Name',  dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' }
    ],

    // this will prevent a double mask situation whenever the grid is loading
    viewConfig: {
        loadMask: false
    }

    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

Upvotes: 1

Related Questions