ExtJS 4 Grid hide load mask

• Tweet

• Tweet

Hello,

When working with ExtJS Grid there are so many things that can happen to be a requirement.

For me one of those was not to show loading masking when grid is loaded, reloaded, refreshed etc etc.

Question was how to do it.

Well! luckily for me it turned out to be relatively simple

Ext.grid.Panel comes with a view config property that you can initialize with your custom settings

viewConfig: {
    // you configurations
}

viewConfig property is explained here

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel-cfg-viewConfig

Description says that your custom config object that will be applied to the grid’s UI view. That gives us an hint that we should be looking for settings that we can make to a Grid View

Now if you browse to this URL

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.View

You will see all sort of properties that you can make use of. One of them is loadMask.

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.View-cfg-loadMask

Value of loadMask can be either true/false or LoadMask object with custom settings.

Now if you add this to you Grid then the loadMask will not appear

viewConfig: {
    loadMask:false
}

An example Grid with no load mask will be something like this

Ext.create('Ext.grid.Panel', {
    title: 'Names',
    store: YOUR_STORE,
    columns: [
        { text: 'Name',  dataIndex: 'name' }
    ],
    height: 400,
    width: 450,
    renderTo: Ext.getBody(),
    viewConfig:{
       loadMask:false
    }
});

I hope this helps

Cheers,

Advertisement