EXT portal 레이아웃 동적 항목 추가 문제

현재 포탈 레이아웃에 패널을 동적으로 추가해야 합니다. 포탈 레이아웃에 정적으로 설치된 패널은 완전히 정상적이고, 생성된 후에add가 들어간 패널은 정상적으로 표시할 수 있습니다.

Ext.onReady(function(){
    var viewport = new Ext.Viewport({
        layout:'border',
        items:[{ 
            xtype:'portal',
            region:'center',
            margins:'35 5 5 0',
            items:[{
                columnWidth:.33,
                style:'padding:10px 0 10px 10px',
                items:[{
                    title: 'Grid in a Portlet',
                    layout:'fit'
                },{
                    title: 'Another Panel 1',
                    html: Ext.example.shortBogusMarkup
                }]
            },{id:"abc",
                columnWidth:.33,
                style:'padding:10px 0 10px 10px',
                items:[{
                    title: 'Panel 21',
                    html: Ext.example.shortBogusMarkup
                },{
                    title: 'Another Panel 22',
                    html: Ext.example.shortBogusMarkup
                }]
            },{id:"ccc",
                columnWidth:.33,
                style:'padding:10px',
                items:[{
                    title: 'Panel 31',
                    html: Ext.example.shortBogusMarkup
                },{
                    title: 'Panel 32',
                    html: Ext.example.shortBogusMarkup
                },{id:"bb",
                    title: 'Another Panel 33',
                    html: Ext.example.shortBogusMarkup
                }]
            }]
        }]
    });

 var pan1 = new Ext.Panel({
		title : 'new panel',
		html : " panel， ",
		anchor : '100%',
		frame : true,
		collapsible : true,
		draggable : true,
		cls : 'x-portlet'
	});


  Ext.getCmp('abc').add(pan1);
  Ext.getCmp('abc').doLayout();
});