How to let load-mask in the center position?

[oye816]

I don't know why my load-mask is not in the center, it always shows on the top of pnel.
Could someone help me?

IMG_0819.PNG

part of my code

var serviceNewsDetailPanel = new Ext.Panel({   
    id: 'serviceNewsDetailPanel',
    cls : 'tabPage',
    fullscreen: true,
    scroll : false,
    layout: 'fit',    
    items: [
    {
        xtype: 'list',
        id: 'serviceNewsDetailList',                
        itemTpl: '<div style="font-size: 16px">{title}</div><div style="font-size: 14px">{pubDate}</div>',
        store: serviceNewsDetailStore,
        onItemDisclosure: true,
        listeners: {
            itemtap: function(dataview, index, item, e) {
                var url = dataview.store.getAt(index).data.link;
                
                window.open(url);
            }
        }
    }]   
});


var serviceCard = new Ext.Panel({
    id: 'serviceCard',
    title : '服務項目',
    iconCls : 'note1',    
    fullscreen : true,
    scroll: false,    
    layout: 'fit',
    dockedItems: [{
        xtype: 'toolbar',
        id : 'serviceToolbar',
        title : '服務項目',
        ui: 'leather',             
        cls: 'tabTopBar',
        height: 52,
        listeners: {
            add: function(container, component, index) {
                container.doLayout();
            }
        }
    }],
    items: [
    {
        xtype: 'panel',
        id: 'servicePanel',
        layout: 'card',
        scroll: false,
        fullscreen: true,
        items:[serviceBasePanel, serviceDetailPanel, serviceDatabasePanel, serviceNewsPanel, serviceNewsDetailPanel]        
    }
    ]
});

[mitchellsimoens]

Most likely it was rendered before a full layout was done so the element it is rendering to wasn't the full size.

[oye816]

still don't know how to fix it

[oye816]

Finally figure out how to fix it.

Need to set

Ext.getCmp('id').setActiveItem(child, 'slide');

before store to load data.