1. #1
    Sencha User
    Join Date
    Feb 2008
    Posts
    33
    Vote Rating
    0
    RobertT is on a distinguished road

      0  

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

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


    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

    Code:
    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.

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,055
    Vote Rating
    659
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    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.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext User wishamster's Avatar
    Join Date
    Jul 2008
    Posts
    2
    Vote Rating
    0
    wishamster is on a distinguished road

      0  

    Default


    Quote Originally Posted by evant View Post
    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?

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,055
    Vote Rating
    659
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Do you have the appropriate js files included?
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Sencha User
    Join Date
    Feb 2008
    Posts
    33
    Vote Rating
    0
    RobertT is on a distinguished road

      0  

    Default


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

  6. #6
    Sencha User
    Join Date
    Feb 2008
    Posts
    33
    Vote Rating
    0
    RobertT is on a distinguished road

      0  

    Default


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

  7. #7
    Ext User
    Join Date
    Aug 2009
    Posts
    21
    Vote Rating
    0
    chullan is on a distinguished road

      0  

    Default


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

    thanks

  8. #8
    Ext User
    Join Date
    Sep 2009
    Posts
    3
    Vote Rating
    0
    andrebiss is on a distinguished road

      0  

    Default


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

    Can you explain better?

    tks