Problem about add() method of Viewport

[xwjiang]

I am trying to use the add() method of Viewport object to jump from the login page to the main page with Ext 4.1. The key code is as follows,

this.getLoginStore().load({ //Check username and password
params:Ext.encode({loginfo: usn+'|'+pwd}),
scope: this,
callback: function(records, operation, success) {
if (success) //is legal user
{
// Proceed to main page
Ext.getCmp('myviewport').removeAll(true);
Ext.getCmp('myviewport').add({xtype:'mainpanel',margin: '0 0 0 0'});
}
}
});


However, there are some blank margins in the main page.
34392

If I set the items of Viewport object to the main page/panel directly, the blank will no longer exist.

Ext.define('Pms.view.Viewport', {
extend: 'Ext.container.Viewport',


layout: 'fit',
id : 'myviewport',
//border: '0 0 0 0',
items: [{
xtype: 'mainpanel' // the main page
//xtype: 'loginpanel' // the login page
}]
});


So my question is how to remove the blank margins when I want to jump from the login page to the main page dynamically by using the add() method of Viewport. Thank you very much for your kindly help.

[scottmartin]

Have you inspected your page with Firebug to see where the margins are coming from?

Regards,
Scott.