ExtJS：仅为 Ext.panel.Panel 项容器设置加载掩码

Question

我有 Ext.panel.Panel 工具栏 (dockedItems) 和动态创建的内容 (items)。我只想 .setLoading() 面板项目并保持工具栏处于活动状态。有没有办法 select 面板项容器组件？

P.S。我可以使用 myPanel.items.each(function(item) {item.setLoading()})，但我觉得它的解决方案很糟糕。

Answer 1

您始终只能将加载蒙版应用于面板主体，因此工具栏处于活动状态且可单击。

做这个操作很简单。您必须调用指定 setLoading(load, target) 的面板的 .setLoading()，其中 load 是一个布尔值，目标是加载掩码的目标，应该类似于 target = panel.body.

根据我的回答我做了一点fiddle给你：

https://fiddle.sencha.com/#fiddle/12h0

fiddle的代码是：

Ext.application({
name: 'Fiddle',

launch: function() {
    Ext.create('Ext.panel.Panel', {
        renderTo: Ext.getBody(),
        border: true,
        width: 200,
        height: 200,
        margin: 100,
        id: 'myPanel',
        defaults: {
            margin: 10
        },
        layout: {
            type: 'vbox',
            pack: 'middle'
        },
        items: [{
            xtype: 'textfield',
            id: 'input'
        }, {
            xtype: 'panel',
            html: 'Other things',
            border: false
        }],
        dockedItems: [{
            xtype: 'toolbar',
            dock: 'bottom',
            items: [{
                text: 'Start Loading',
                listeners: {
                    click: function(th) {
                        Ext.getCmp('input').setValue('opetation');
                        var panel = Ext.getCmp('myPanel');
                        if (!panel.loading) panel.loading = true;
                        else panel.loading = false;
                        panel.setLoading(panel.loading, panel.body);

                        th.setText(panel.loading ? 'Stop Loading' : 'Start Loading');
                    }
                }
            }]
        }]
    });
}
});

ExtJS：仅为 Ext.panel.Panel 项容器设置加载掩码

ExtJS: Set loading mask only for Ext.panel.Panel items container

extjs

extjs4