EXT portal布局动态添加items问题-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_7117/article/details/82339700

本文介绍如何在ExtJS中动态地向portal布局内的panel区域添加新的Ext.Panel组件，并确保其能够正确显示及支持拖拽等交互行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在需要动态添加portal布局中的panel，前期静态放置到portal布局中的panel可以完全正常，而在生成后add进去的panel，可以正常显示

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();
});