View Full Version : Easy accordion drag functionality? Please

23 Sep 2009, 7:21 AM
I am pretty new to EXTJS and I saw a site that allowed the panels of the left menu in the famous border layout to be dragged out seperately and placed back in the left "west" area. Can this be done pretty easy? With how nice the rest of the features work I would assume there is some sort of param like undockable: true but I can't find any documentation on this.

Bottomline: Drag an accordion out of west area float anywhere and allow to put back. My boss has to have this now before we commit to this framework. The life of a programmer.... sigh.

title : 'Menu',
region : 'west',
id : 'westPanel',
collapsible : true,
width : 220,
minWidth : 220,
maxWidth : 350,
layout : {
type : 'accordion',
animate : true
items : [{
title : 'item1',
html : '<p>Item 1</p>',
border : false,
iconCls : 'i1'
}, {

23 Sep 2009, 7:40 AM
Drag and drop is something that requires a bit of know-how and is not that simple to implement.

you need to learn the basics of drag and drop first.

my blog post will get you started: http://www.extjs.com/blog/2009/09/13/5-steps-drag-and-drop-with-ext-js/

Once you understand how to setup a drag proxy and a drop target, you will need to learn how to add and remove components from a container.

Also, I cover drag and drop extensively in ExtJS in Action.

23 Sep 2009, 8:11 AM
Thanks I have seen these posts and play around with it. Might have to pick up a book or two thanks for the suggestion. The application while kind of buggy is found at http://www.sl-king.com/mgrestviewer/ using EXTJS 1.1 from what I can tell.