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

Question

I've got Ext.panel.Panel with toolbar (dockedItems) and dynamically created content (items). I want to .setLoading() only for panel items and leave toolbar active. Is there way to select panel items container component?

P.S. I can use myPanel.items.each(function(item) {item.setLoading()}), but its bad solution imo.

Answer 1

You can always apply the loading mask only to the body of the panel, so the toolbar is active and clickable.

To do this operation is very simple. You have to invoke the .setLoading() of the panel specifing setLoading(load, target) where load is a boolean and the target is the target of the loading mask, that should be something like target = panel.body.

According my answer I've made a little fiddle for you:

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

The code of the fiddle is:

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