Drag Drop (reorder) Panels within column layout Panel

[accilies]

Hello Everyone,

I have tried out all the various examples given in the forum and the site but was unsuccessful in getting the 4 panels within the main panel with column layout to be able re-arranged. Kindly review the base code I am using and please suggest a way whereby user can drag / drop a panel onto one of the remaining 3 panels and re-order them.

Paste Bin link : http://erxz.com/pb/12688

Code:

Ext.onReady(function(){
    Ext.QuickTips.init();
    var top = new Ext.Panel({
        labelAlign: 'top',
        frame: false,
        bodyStyle: 'padding:5px 5px 0',
        border: false,
        defaults: {
            border: false,
            bodyStyle: 'padding:5px 5px 0'
        },
        width: 600,
        items: [{
            layout: 'column',
            defaults: {
                draggable: true,
                ddGroup: "organizerDD"
            
            },
            items: [{
                columnWidth: 1,
                layout: 'fit',
                items: [{
                    xtype: 'panel',
                    html: 'First Name',
                    title: 'first',
                    frame: true
                }]
            }, {
                columnWidth: .5,
                layout: 'form',
                items: [{
                    xtype: 'panel',
                    title: 'center 1',
                    html: 'center 1'
                }]
            }, {
                columnWidth: .5,
                layout: 'form',
                items: [{
                    xtype: 'panel',
                    html: 'center 2',
                    title: 'center 2'
                }]
            }, {
                columnWidth: 1,
                layout: 'fit',
                items: [{
                    xtype: 'panel',
                    html: 'First Name',
                    title: 'first',
                    frame: true
                }]
            }]
        }]
    });
    top.render(document.body);
    
})

[Animal]

Check the "portal" example. Both online and in your examples directory.

[accilies]

Check the "portal" example. Both online and in your examples directory.

Hello Animal,

I have gone through all the examples and that has caused me to be overwhelmed. There is no simple explanation and usable defined path of what does draggable has to be configured. Portal example is good once basic usage of DDProxy, DragSource, etc etc are cleared.

[vitolini]

have you found a solution to this? I am having the same issue...

Thanks

[marcora]

Same for me... have you found a solution to this?

An example (much simpler than the portal example) would be greatly welcomed.

Thanks