PDA

View Full Version : Customizable Portal Help - Drag Widgets from Treepanel to Portal



littlefixit
27 Aug 2010, 7:16 AM
*I mistakenly placed this post/thread in the 2.0 Community Forums, and should have placed it here.*

Hello, all,

I'm struggling to find adequate documentation to allow me to build something that seems rather user intuitive. What I have now is a Viewport whose Center region contains a Group Tab containing a Portal, which behaves beautifully. In the East Region, I have a Popout Panel containing a Slider Panel Which contains Three sub-panels, the last of which contains a Tree Panel. (still with me? ) There are two other panels, in the north and south regions which I don't believe will be relevant for this discussion.

I'll include my code below, but I warn you it's nothing fancy. I just started learning this past week. :)

What I'm looking to do, or to be able to do, is to allow users to drag a child element (not the whole panel, just a name of a panel, for example) from the treepanel onto the Portal, and have it create a new panel in the portal where its dropped . Ideally, I'd like to use this to allow users to 'configure' their own Google-like homepage--though Google uses a separate page to add widget content.

Unfortunately, none of my attempts have met with success, namely because I am insufficiently experienced with dragging and dropping in Ext JS, and also because (as I said before) I have been unable to locate adequate documentation for the portal. I am able to drag elements out of the treepanel, but I cannot figure out how to make the portal accept the drop and convert the element to a new panel (or rather, create a new panel).

Here is an example of my current viewport:



var viewport = new Ext.Viewport({
layout:'border',
items:[{
region: "north",
xtype: 'panel',
contentEl: 'main_header_container',
border: false,
height: 116
},{
region:'east',
id:'east-panel',
title:'East',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'5 0 5 0',
cmargins:'5 0 5 5',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [{
html: Ext.example.shortBogusMarkup,
title:'Navigation',
autoScroll:true,
border:false,
iconCls:'nav'
},{
title:'Settings',
html: Ext.example.shortBogusMarkup,
border:false,
autoScroll:true,
iconCls:'settings'
},{
title:'Components',
iconCls: 'addcomponents',
xtype: 'treepanel',
useArrows: true,
border:false,
autoScroll:true,
animate: true,
enableDD: true,
containerScroll: true,
dataURL: 'get-nodes.php',
root: new Ext.tree.AsyncTreeNode({
expanded: true,
leaf: false,
text: 'Tree Root',
children: children
})

}]
},{
xtype: 'grouptabpanel',
region: 'center',
tabWidth: 130,
activeGroup: 0,
items: [{
mainItem: 1,
items: [{
title: 'Tickets',
iconCls: 'x-icon-subscriptions',
tabTip: 'Tickets tabtip',
style: 'padding: 10px;',
layout:'fit',
items: new SampleGrid()
},{
title: 'Dashboard',
xtype:'portal',
region:'center',
margins:'5 0 5 5',
items:[{
columnWidth:.33,
style:'padding:10px 0 10px 10px',
items:[{
title: 'Grid in a Portlet',
layout:'fit',
tools: tools,
items: new SampleGrid([0, 2, 3])
},{
title: 'Another Panel 1',
tools: tools,
html: Ext.example.shortBogusMarkup
}]
},{
columnWidth:.33,
style:'padding:10px 0 10px 10px',
items:[{
title: 'Panel 2',
tools: tools,
html: Ext.example.shortBogusMarkup
},{
title: 'Another Panel 2',
tools: tools,
html: Ext.example.shortBogusMarkup
}]
},{
columnWidth:.33,
style:'padding:10px',
items:[{
title: 'Panel 3',
tools: tools,
html: Ext.example.shortBogusMarkup
},{
title: 'Another Panel 3',
tools: tools,
html: Ext.example.shortBogusMarkup
}]
}]

/*
* Uncomment this block to test handling of the drop event. You could use this
* to save portlet position state for example. The event arg e is the custom
* event defined in Ext.ux.Portal.DropZone.
*/
// ,listeners: {
// 'drop': function(e){
// Ext.Msg.alert('Portlet Dropped', e.panel.title + '<br />Column: ' +
// e.columnIndex + '<br />Position: ' + e.position);
// }
// }
},{
title: 'Users',
iconCls: 'x-icon-users',
tabTip: 'Users tabtip',
style: 'padding: 10px;',
html: Ext.example.shortBogusMarkup
}]
}, {
expanded: true,
items: [{
title: 'Configuration',
tabTip: 'Configuration tabtip',
style: 'padding: 10px;',
html: Ext.example.shortBogusMarkup
},{
title: 'Email Templates',
iconCls: 'x-icon-templates',
tabTip: 'Templates tabtip',
style: 'padding: 10px',
html: Ext.example.shortBogusMarkup
}]
}]
},{
region: 'south',
xtype: 'panel',
height: 45,
contentEl: 'main_footer_container'
}]
});
I would appreciate any insight you may have into how this may be accomplished, or what resources I could reference to make it happen on my own.

Thank you for your time!

littlefixit
1 Sep 2010, 7:32 AM
Allright, so at this point, I've explored Ext.dd.DropTarget and Ext.dd.DropZone, and have tried to place both functions (at different times) on the viewport, the portal, and the portlet (one of the portal columns), to no avail. I cannot figure out which parameters of the drop area need to be changed to allow me to drop data from a treepanel in, let alone convert it to a new element. Can no one point me to better documentation on the portal class? Or perhaps an example of a treepanel with components that can be dragged to something other than another treepanel or gridpanel?

acoll
3 Sep 2010, 11:53 AM
I'm having the same exact problem.I ran into this as I am trying to develop an interactive and customizable portal for our customers to view/manage their account and their data. A solution from sencha would be much appreciated.

littlefixit
10 Sep 2010, 4:10 AM
Everyone I've spoken to has indicated that this is possible, but I'm sorry to say that I still cannot understand how. I've poured over the code for ux/Portal.js, ux/PortalColumn.js, and ux/Portlet.js. Here's some of what I've found out:
I've discovered that ux/Portlet.js extends Ext.Panel, and has the draggable attribute set to TRUE. Other than that, there's really not much to this 'component'. the panels are collapsible, and they're using the anchor attribute with a value of '100%'. A quick search of the API reveals that this is related to the layout used by the containing Portal Column.
PortalColumn extends Ext.Container, and uses (surprise) layout: 'anchor'. Its defaultType is 'portlet'.
Portal also extends Ext.Panel, and uses a defaultType of the Portal Column described above. There are two attributes in this extension, however, that I could not identify or locate in the API: initComponent, and initEvents. This is apparently where the initial DropZone configuration resides, but I'm very unfamiliar with that whole process. Is there anyone out there who might be able to shed some additional light on this?