javascript - 如何在商店加载之前向面板添加 mask 并在商店加载后删除 mask

Question

我需要在sencha中的选项卡面板中添加一个加载掩码，我在 Controller 中通过Ajax请求加载了一个商店，但是在商店加载之前我需要放置一个加载掩码，并且在商店加载之后已加载，我需要将其删除。这是我到目前为止的代码

我的 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');
}

});

这是我的选项卡面板代码

{
            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'
            }
        }

我不知道为什么这不起作用，我在 Chrome 开发者控制台中测试了它，这是我在控制台上收到的错误

未捕获类型错误:无法读取未定义的属性“setMasked”

Answer 1

您的代码实际上没有意义。这个例子必须有效。如果还有什么不清楚的可以在评论里提问

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);
            }
        });
    },

});

查看

{
    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'
                }
            ]
        }
    ]
}