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

Question

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

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

Answer 1

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

做这个操作很简单。 您必须调用指定setLoading(load, target) 的面板的.setLoading()，其中load 是布尔值，目标是加载掩码的目标，应该类似于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');
                    }
                }
            }]
        }]
    });
}
});