ExtJs6.0.1往Viewport容器添加子容器报错?报错

我使用的是ExtJs6.0.1版本

下面代码是这样

Ext.onReady(function(){

<p>
	<span>function</span> transTime() {
</p>
<p>
	<span>var</span> dt = <span>new</span> Date();
</p>
<p>
	<span>var</span> time = Ext.Date.format(dt, <span>'A'</span>);
</p>
<p>
	<span>if</span> (time == <span>'AM'</span>) {
</p>
<p>
	<span> </span><span>return</span><span> </span>'早上好,'<span>;</span>
</p>
<p>
	} <span>else</span> {
</p>
<p>
	<span> </span><span>return</span><span> </span>'下午好,王子超'<span>;</span>
</p>
<p>
	}
</p>
<p>
	}
</p>
<p>
	<span>var</span> updateClock = <span>function</span>() {
</p>
<p>
	<span>var</span> date = <span>new</span> Date();
</p>
<p>
	<span> </span><span>var</span><span> aWeek = [</span>'星期天'<span>, </span>'星期一'<span>, </span>'星期二'<span>, </span>'星期三'<span>, </span>'星期四'<span>, </span>'星期五'<span>, </span>'星期六'<span>];</span>
</p>
<p>
	Ext.getElementById(<span>'clock'</span>).text = <span>"现在是"</span>
</p>
<p>
	+ Ext.Date.format(date, <span>'Y年m月d日	'</span> + aWeek[<span>new</span> Date().getDay()]
</p>
<p>
	+ <span>'	H时i分s秒'</span>);
</p>
<p>
	}
</p>
<p>
	<span>var</span> task = Ext.TaskManager.start({
</p>
<p>
	run : updateClock,
</p>
<p>
	interval : 1000
</p>
<p>
	});
</p>
<p>
	<span> Ext.define(</span>'com.mfe.extjs.view.Title'<span>, {</span>
</p>
<p>
	<span> extend : </span>'Ext.panel.Panel'<span>,</span>
</p>
<p>
	<span> alias : </span>'widget.title'<span>,</span>
</p>
<p>
	html : <span>'ccc'</span>,
</p>
<p>
	split : <span>true</span>,
</p>
<p>
	bbar : [transTime(), <span>'-'</span>, {
</p>
<p>
	id : <span>'clock'</span>
</p>
<p>
	}, <span>'->'</span>, {
</p>
<p>
	text : <span>'退出'</span>,
</p>
<p>
	iconCls : <span>'icon-logout'</span>,
</p>
<p>
	name : <span>'logout'</span>,
</p>
<p>
	handler : <span>function</span>() {
</p>
<p>
	document.location.>"login.html"</span>;
</p>
<p>
	}
</p>
<p>
	}],
</p>
<p>
	<span> bodyStyle : </span>'backgroud-color:#99bbe8;line-height : 50px;padding-left:20px;font-size:22px;color:#000000;font-family:黑体;font-weight:bolder;'
</p>
<p>
	<span> + </span>'background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(153,187, 232, 0.4) ), color-stop(50%, rgba(153, 187, 232, 1) ),color-stop(0%, rgba(153, 187, 232, 0.4) ) )'
</p>
<p>
	<br>
</p>
<p>
	});
</p>
<p>
	<span> Ext.create(</span>'Ext.container.Viewport'<span>, {</span>
</p>
<p>
	    layout: <span>'border'</span>,
</p>
<p>
	    items: [{
</p>
<p>
	    	height : 80,
</p>
<p>
	        region: <span>'north'</span>,
</p>
<p>
	        xtype:<span>'title'</span>
</p>
<p>
	    }, {
</p>
<p>
	        region: <span>'west'</span>,
</p>
<p>
	        collapsible: <span>true</span>,
</p>
<p>
	        title: <span>'Navigation'</span>,
</p>
<p>
	        width: 150
</p>
<p>
	<span>         </span>// could use a TreePanel or AccordionLayout for <span>navigational</span> items
</p>
<p>
	    }]
</p>
<p>
	});
</p>
<p>
	});
</p>

 只要这么写就会报错：Ext.ComponentManager.register(): Registering duplicate component id "clock"

Uncaught TypeError: Cannot read property 'dom' of null

如果我把

Ext.create('Ext.container.Viewport', {

<p style="font-size:13.3333px;">
	    layout: 'border',
</p>
<p style="font-size:13.3333px;">
	    items: [{
</p>
<p style="font-size:13.3333px;">
	    height : 80,
</p>
<p style="font-size:13.3333px;">
	        region: 'north',
</p>
<p style="font-size:13.3333px;">
	        xtype:'title'
</p>
<p style="font-size:13.3333px;">
	    }, {
</p>
<p style="font-size:13.3333px;">
	        region: 'west',
</p>
<p style="font-size:13.3333px;">
	        collapsible: true,
</p>
<p style="font-size:13.3333px;">
	        title: 'Navigation',
</p>
<p style="font-size:13.3333px;">
	        width: 150
</p>
<p style="font-size:13.3333px;">
	        // could use a TreePanel or AccordionLayout for navigational items
</p>
<p style="font-size:13.3333px;">
	    }]
</p>
<p style="font-size:13.3333px;">
	});
</p>

改成

Ext.create('Ext.container.Viewport', {

    layout: 'border',

    items: [{

    height : 80,

        region: 'north',

        xtype:'title'

    }]

});这样就会没事，，请问大神这是因为什么啊！怎么解决啊