Hello buddy,
When you are adding padding to your panel after that you must recalculate its layout also.
For that you just call the doLayout() of that panel to which you are giving padding.Code is below:

var panel = this.getMainPanel().getComponent(0);
panel.getEl().toggleCls('padding50');
panel.doLayout(); // this is the line you need to add to your code.

Hi,
As I review your code you have given width-400px to the west panel & width-300px to the east panel. You are applying padding 50px to the parent container. It means that the Ext-item where you are rendering your xtype: 'basePanel' should have width atleast 800px(400px of west + 300px of east + 100px padding).
So width may be the problem. So review the following code, it is working well: