class system

I just want to include a view to another view and make it visible when run, however I only encounter a white screen. I could not find the problem.
More clearly when a define a panel insteadn 'Login' in the main panel it works, but I want to include panel where it has already define outside the main panel and then include. I tried many time but could not achieve it.

Another question about forum: how will I write code segment in the coding style?

Here is code

/////////MAIN PANEL////////

Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',

height: 430,
width: 703,
layout: {
type: 'absolute'
},
title: 'Conference Room',
views:['Login'],
initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'combobox',
x: 450,
y: 0,
fieldLabel: 'User Type'
},
{
xtype: 'Login'
}
]
});

me.callParent(arguments);
}

});




/////////LOGIN PANEL////////

Ext.define('MyAjaxApp.view.Login', {
extend: 'Ext.form.Panel',
alias : 'widget.Login',
frame:true,
x: 0,
y: 0,
height: 120,
width: 270,
title: 'Login Panel',

items: [{
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username'
},{
xtype: 'textfield',
name: 'password',
fieldLabel: 'Password',
inputType: 'password',
}],

buttons: [{
text: 'Login',
action: 'login'
}]
});

My problem is with require system of the extjs. I do not understand why it is not working.

It works when I simply define a component and create one instance just under it as below

Ext.define(MyGrid,{

}

Ext.create(MyGrid);


However I want to define it outside the file in views directory for example
like
Ext.define(MyApp.view.MyGrid,{

}


and include it file where I want to create one instance.
I know this is very basic question about the extjs but I used require, view all places but I could noy achieve it.