Loadingmask for a panel with 2 inner DataViews

[Martin1982]

I am creating a panel which acts as a container for 2 dataviews;

Ext.extend(Ext.Panel, {
  dockedItems: <toolbar stuff>,
  items: [
    { xtype: 'dataview', store: 'somestore', etc},
    { xtype: 'dataview', store: 'anotherstore', etc}
  ] 

This is pretty cool and stuff, but when opening up the card each of these dataviews triggers it's own loadingmask. I want 1 loadingmask centered for loading both panels.

I know I can do this on the viewport, but then the dockedItems become inaccessible, so what would be the appropriate way to have a loadingmask which only covers the items:[] section of my panel?

[NickT]

what if you added another panel and used its element as the targetEl of one of the views, while disabling the other data view loading panel...

Ext.ux.MyViewport = Ext.extend(Ext.Panel, {    dockedItems:[
// toolbar stuff
    ],
    listeners:{
        'render': function(panel){
            var dvPanel = Ext.getCmp(panel.id + '_dvPanel');
            var dv1 = Ext.getCmp(panel.id + '_dv1');
            var dv2 = Ext.getCmp(panel.id + '_dv2');
            dv2.setLoading(false);
            dv1.setLoading( {msg:"Please wait..."}, dvPanel.el);
        }
    },
    initComponent: function() {
        this.items=[
            {
                id: this.id + '_dvPanel',
                xtype:'panel',
                items:[
                    { id: this.id + '_dv1', xtype: 'dataview', store: 'somestore'},
                    { id: this.id + '_dv2', xtype: 'dataview', store: 'anotherstore'}
                ]
            }
        ];
        Ext.ux.MyViewport.superclass.initComponent.apply(this, arguments);
    }
});