How to add a mask to a panel before the store loads and remove after the store loads

Question

I need to add a Loading Mask to my Tab Panel in sencha, I have a store being loaded via an Ajax Request in my Controller, But before the store loads I need to Put a loading mask, and After the store has been loaded I need to remove it. This is my code so far

My Controller

Ext.define('QvidiApp.controller.MyController', {
extend: 'Ext.app.Controller',

config: {
},

beforeLoad: function() {
    Ext.Ajax.on('beforeLoad', function (con, opt) {
            Ext.getCmp('mainTabPanel').setMasked({
                       xtype: 'loadmask',
                       message: 'Loading...',
                       indicator:true
            });
    }, this);
},

getGender: function() {
    Ext.Ajax.request({

        method: 'POST',
        timeout: 25000,
        disableCaching : true,
        useDefaultHeader : true,
        params: {
            class: 'Qvidi',
            method: 'getDataM'
        },
        url: 'server/index.php',
        success: function( response ){
            var r = Ext.decode( response.responseText );
            Ext.getStore('GenderStore').setData( r.results );
        }
    });

    Ext.getCmp('mainTabPanel').setMasked(false);

},

afterLoad: function() {
        Ext.getCmp('mainTabPanel').setMasked(false);
},

init: function(application) {
    QvidiApp.app.getController('MyController').beforeLoad();
    QvidiApp.app.getController('MyController').getGender();
    QvidiApp.app.getController('MyController').afterLoad();
    console.log('loaded');
}

});

And Here is my Tab Panel Code

{
            xtype: 'tabpanel',
            id: 'mainTabPanel',
            ui: 'light',
            layout: {
                type: 'card',
                animation: 'scroll'
            },
            items: [
                {
                    xtype: 'container',
                    title: 'Welcome',
                    iconCls: 'home',
                    id: 'welcomeTab',
                    items: [
                        {
                            xtype: 'image',
                            centered: true,
                            height: 85,
                            width: 318,
                            src: 'http://104.155.111.158/qvidim/PowerdbyNfinity.png'
                        }
                    ]
                },
                {
                    xtype: 'container',
                    title: 'Data',
                    iconCls: 'organize',
                    items: [
                        {
                            xtype: 'dataview',
                            height: 465,
                            id: 'dataview',
                            masked: true,
                            itemTpl: [
                                '    <tpl>',
                                '        <table style="width: 100%;">',
                                '            <tr>',
                                '                <td><div style="width:5em; text-align: left">{gender}</div></td>',
                                '                <td><div style="width:5em; text-align: left">{glances} </div></td>',
                                '                <td><div style="width:5em; text-overflow: ellipsis; display: block; overflow: hidden; text-align: left">{title}</div></td>',
                                '            </tr>  ',
                                '        </table>',
                                '        <hr>',
                                '    </tpl>'
                            ],
                            store: 'QvidiDataStore'
                        }
                    ]
                },
                {
                    xtype: 'container',
                    title: 'PieChart',
                    iconCls: 'info',
                    layout: 'fit',
                    scrollable: 'vertical',
                    items: [
                        {
                            xtype: 'polar',
                            id: 'genderPieChart',
                            colors: [
                                '#115fa6',
                                '#94ae0a',
                                '#a61120',
                                '#ff8809',
                                '#ffd13e',
                                '#a61187',
                                '#24ad9a',
                                '#7c7474',
                                '#a66111'
                            ],
                            store: 'GenderStore',
                            series: [
                                {
                                    type: 'pie',
                                    labelField: 'types',
                                    xField: 'counter'
                                }
                            ],
                            interactions: [
                                {
                                    type: 'rotate'
                                }
                            ]
                        }
                    ]
                },
                {
                    xtype: 'container',
                    title: 'BarChart',
                    iconCls: 'info',
                    scrollable: 'vertical',
                    items: [
                        {
                            xtype: 'chart',
                            centered: true,
                            height: 374,
                            colors: [
                                '#24ad9a',
                                '#7c7474',
                                '#a66111'
                            ],
                            store: 'ClipsViewed',
                            axes: [
                                {
                                    type: 'category',
                                    fields: [
                                        'title'
                                    ]
                                },
                                {
                                    type: 'numeric',
                                    fields: [
                                        'viewed'
                                    ],
                                    grid: {
                                        odd: {
                                            fill: '#e8e8e8'
                                        }
                                    },
                                    position: 'left'
                                }
                            ],
                            series: [
                                {
                                    type: 'bar',
                                    style: {
                                        minGapWidth: 1,
                                        minBarWidth: 80,
                                        maxBarWidth: 80
                                    },
                                    xField: 'title',
                                    yField: [
                                        'viewed',
                                        'glances'
                                    ]
                                }
                            ],
                            interactions: [
                                {
                                    type: 'panzoom'
                                }
                            ]
                        }
                    ]
                },
                {
                    xtype: 'container',
                    title: 'ClipsGenderChart',
                    iconCls: 'info',
                    scrollable: 'vertical',
                    items: [
                        {
                            xtype: 'chart',
                            centered: true,
                            height: 378,
                            colors: [
                                '#ff8809',
                                '#7c7474'
                            ],
                            store: 'ClipsGenderStore',
                            axes: [
                                {
                                    type: 'category',
                                    fields: [
                                        'title'
                                    ]
                                },
                                {
                                    type: 'numeric',
                                    fields: [
                                        'male'
                                    ],
                                    grid: {
                                        odd: {
                                            fill: '#e8e8e8'
                                        }
                                    },
                                    position: 'left'
                                }
                            ],
                            series: [
                                {
                                    type: 'bar',
                                    style: {
                                        minGapWidth: 1,
                                        minBarWidth: 80,
                                        maxBarWidth: 80
                                    },
                                    xField: 'title',
                                    yField: [
                                        'male',
                                        'female'
                                    ]
                                }
                            ],
                            interactions: [
                                {
                                    type: 'panzoom'
                                }
                            ]
                        }
                    ]
                }
            ],
            tabBar: {
                docked: 'bottom',
                ui: 'light'
            }
        }

I do not know why this does not work, i tested it in Chrome developer console, and this is the error I get on the console

Uncaught TypeError: Cannot read property 'setMasked' of undefined

Answer 1

You should be able to use beforeload and load event listeners to set and reset the mask like in below example

var store = Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    autoLoad: false,
    fields: ['id', 'name'],
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    },
    listeners: {
        beforeload: function(store, eOpts) {
            // You may want to get panel reference dynamically
            panel.mask("loading...");
        },
        load: function(store, eOpts) {
            // You may want to get panel reference dynamically
            panel.unmask();
        }
    }
});

var panel = Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: store,
    columns: [{
        text: 'Id',
        dataIndex: 'id',
        flex: 1
    }, {
        text: 'Name',
        dataIndex: 'name',
        flex: 1
    }],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

Ext.create('Ext.button.Button', {
    text: 'Load Data',
    renderTo: Ext.getBody(),
    handler: function() {
        store.load();
    }
});

Answer 2

Your code does not really make sense. this example must work. If you anything is unclear ask in comment

Controller

Ext.define('QvidiApp.controller.MyController', {
    extend: 'Ext.app.Controller',

    init: function(application) {
        this.control({
            "#genderPieChart": {
                afterrender: this.loadPieChartStore
            }
        });
    }

    loadPieChartStore: function(component) {
        var tabPanel = component.up("tabPanel[id=mainTabPanel]");
        tabPanel.setMasked({
                   xtype: 'loadmask',
                   message: 'Loading...',
                   indicator:true
        });
        Ext.Ajax.request({
            method: 'POST',
            timeout: 25000,
            disableCaching : true,
            useDefaultHeader : true,
            params: {
                class: 'Qvidi',
                method: 'getDataM'
            },
            url: 'server/index.php',
            success: function( response ){
                var r = Ext.decode( response.responseText );
                Ext.getStore('GenderStore').setData( r.results );
                tabPanel.setMasked(false);
                console.log('loaded');
            },
            failure:function(){
                tabPanel.setMasked(false);
            }
        });
    },

});

View

{
    xtype: 'container',
    title: 'PieChart',
    iconCls: 'info',
    layout: 'fit',
    scrollable: 'vertical',
    items: [
        {
            xtype: 'polar',
            itemId: 'genderPieChart',
            colors: [
                '#115fa6',
                '#94ae0a',
                '#a61120',
                '#ff8809',
                '#ffd13e',
                '#a61187',
                '#24ad9a',
                '#7c7474',
                '#a66111'
            ],
            store: 'GenderStore',
            series: [
                {
                    type: 'pie',
                    labelField: 'types',
                    xField: 'counter'
                }
            ],
            interactions: [
                {
                    type: 'rotate'
                }
            ]
        }
    ]
}