[solved] xtype: portal - not working drag&drop panels

[RobertT]

Hi everybody

i have the following code, which shows what i want, except it does not allow me to drop panels and change their position. Any help will be appreciated.
Thanks

tabPanel1 =  new Ext.Panel({
		title: 'Panel 1', 
		collapsible: true, 
		width: 425, 
		autoHeight: true, 
		deferredRender: false, 
		draggable: true, 
		style:'padding: 10px 0 10px 0',
		autoLoad: {url: 'some url', scripts: true}
	});
	
	tabPanel2 =  new Ext.Panel({
		title: 'Panel 2', 
		collapsible: true, 
		width: 425, 
		autoHeight: true, 
		deferredRender: false, 
		draggable: true, 
		style:'padding: 10px 0 10px 0',
		autoLoad: {url: 'another url', scripts: true}
	});
	

	tabPanel3 = new Ext.Panel({
		title: 'Panel 3', 
		collapsible: true, 
		width: 425, 
		autoHeight: true, 
		deferredRender: false, 
     	draggable: true, 
		style:'padding: 10px 0 10px 0',
		autoLoad: {url: 'another url', scripts: true}
	});
	
	tabPanel4 = new Ext.Panel({
		title: 'Panel 4', 
		collapsible: true, 
		width: 425, 
		autoHeight: true, 
		deferredRender: false, 
		draggable: true, 
		style:'padding: 10px 0 10px 0',
		autoLoad: {url: 'another url', scripts: true}
	});
	
	tabPanel5 = new Ext.Panel({
		title: 'Panel 5',
		collapsible: true,
		width: 425,
		autoHeight: true,
		deferredRender: false,
		draggable: true,
		style:'padding: 10px 0 10px 0', 
		autoLoad: {url: 'an url', scripts: true}
	});
	
	tabPanel6 =  new Ext.Panel({
		title: 'Panel 6', 
		collapsible: true, 
		collapsed: true, 
		width: 425, 
		autoHeight: true, 
		deferredRender: false, 
		draggable: true, 
		style:'padding: 10px 0 10px 0',
		autoLoad: {url: 'my url', scripts: true}
	});
	
	var tabViewport = new Ext.Panel({
		renderTo: 'divCenter',
		autoScroll: true,
		bodyBorder: false, 
		deferredRender: false, 
		border: false, 
		layout: 'column', 
		xtype: 'portal',
		width: 900, 
        items:[
				{
					border: false, 
        			columnWidth: .5,
        			style:'padding:10px 5px 10px 10px',
        			items:[tabPanel2, tabPanel1]
        		},{
					border: false, 
        			columnWidth: .5,
        			style:'padding:10px 10px 10px 5px',
        			items:[tabPanel6, tabPanel3, tabPanel4, tabPanel5]
        		}
        	]
    });
	
	tabViewport.render();

i have included the portal.js and portlet.js files in my php file.

[evant]

The portal stuff isn't an officially supported component, more just an example of what you can do.

As such, you're best off taking the example and modifying it.

[wishamster]

The portal stuff isn't an officially supported component, more just an example of what you can do.

As such, you're best off taking the example and modifying it.

very proffesional answer to a problem. You should write that in the portal example, so all visitors know about it.


 does anyone else know about using drag&drop panels?

[evant]

Do you have the appropriate js files included?

[RobertT]

here is an example with the attached files.
Please change ext paths to the proper ext directory

[RobertT]

the problem was that Panel has no deferredRender, and xtype was not considerred.
Should have been declared as portal in the begining

[chullan]

I am also facing the same issue.Can you please help me with solution

thanks

[andrebiss]

I am with same problem. I dont understand your solution.

Can you explain better?

tks