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

Question

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

p.S.我可以使用myPanel.items.each(function(item) {item.setLoading()})，但它的坏解决方案是。

Answer 1

您总是可以将加载掩码仅应用于面板的主体，因此工具栏是活动的且可单击的。

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

根据我的回答，我为你做了一把小小提琴：

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

小提琴的代码是：

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