1. #1
    Sencha User
    Join Date
    Jun 2008
    Location
    Melbourne, Australia
    Posts
    18
    Vote Rating
    0
    acarapetis is on a distinguished road

      0  

    Default Very simple drag/drop example?

    Very simple drag/drop example?


    This is probably a lot easier than it seems, but I'm having a lot of trouble finding a simple example of drag-and-drop panel swapping - all the working Ext 2.x examples I've found have been working on pre-placed <ul><li> DOM structures and I can't seem to bend them to work with procedurally generated panels.

    Everything else in Ext seems to have excellent, simple examples that are very easy to comprehend and modify, so I'm surprised I can't find a usable example - hopefully someone can point me to one or help me out.

    All I need is a few panels in a column that I can swap around: something very similar to http://ext4sap.free.fr/sortable0.4.html but working on panels generated in Ext.onReady. I imagine the Ext.dd.DragDropMgr.swapNodes() function would be handy here. I've tried setting draggable: true, and got the panels to be "draggable" and I can move the ghost, but (of course) it simply disappeared with no change on release, and I couldn't get swapping to work on the endDrag event function.

    Here's a basic sample page that if I can get working, I should be able to expand to the application I need:

    Code:
    !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>DD Test</title>
    <link rel="stylesheet" type="text/css" href="/lib/ext2/resources/css/ext-all.css"/>
    <script type="text/javascript" src="/lib/ext2/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="/lib/ext2/ext-all.js"></script>
    <script type="text/javascript">
    Ext.onReady(function(){
        Ext.QuickTips.init();
    
        new Ext.Panel({
            renderTo:'edit', 
            title:'Test 1', 
            html: 'Big Test'
        })
    
        new Ext.Panel({
            renderTo:'edit', 
            title:'Test 2', 
            html: 'Another Test'
        })
    
        new Ext.Panel({
            renderTo:'edit', 
            title:'Test 3', 
            html: 'Last Test'
        })
    
    });
    </script>
    </head>
    <body>
    <div id="edit">
    </div>
    </body>
    </html>
    Thanks for your time.

  2. #2
    Ext User
    Join Date
    Jun 2008
    Posts
    5
    Vote Rating
    0
    ankri is on a distinguished road

      0  

    Default


    check the portal example in your examples folder. It helped me fixing my problem.

  3. #3
    Sencha User
    Join Date
    Jun 2008
    Location
    Melbourne, Australia
    Posts
    18
    Vote Rating
    0
    acarapetis is on a distinguished road

      0  

    Default


    I did have a look at the portal example, but I couldn't quite work out what was relevant: there seemed to be an awful lot of code, and it wasn't clear what was directly required for the drag-drop reordering, and what was there to implement the multi-column changing functionality.

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    48
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    What to you want to do? Just move Panels around?

  5. #5
    Ext JS Premium Member Event Horizon's Avatar
    Join Date
    May 2008
    Location
    Melbourne, Australia
    Posts
    42
    Vote Rating
    0
    Event Horizon is on a distinguished road

      0  

    Default


    The OP (I work with him), wants to drag a panel from it's current position, and drop it into another position and have it stay in that new position. (Rather like the example at http://ext4sap.free.fr/sortable0.4.html )

    We would then detect that the order of the panels has changed and send information about the new order of the panels to our server code.

  6. #6

  7. #7
    Sencha User
    Join Date
    Jun 2008
    Location
    Melbourne, Australia
    Posts
    18
    Vote Rating
    0
    acarapetis is on a distinguished road

      0  

    Default


    Animal: I attempted to implement that extension, but ran into a problem... I posted in that thread.

  8. #8
    Ext User
    Join Date
    May 2008
    Posts
    18
    Vote Rating
    0
    npintos is on a distinguished road

      0  

    Default


    My application needs the same as yours, i.e. letting the user sort 'things' and update this order on the server. Browsing and re-browsing i found this:

    http://tof2k.com/ext/sortable/
    (you need to extract the styles for drag and drop directly from the page source)

    here:

    http://extjs.com/forum/showthread.php?t=33857

    i'm still testing it but at least it renders correctly! Just change ViewPort for panel, and omit the contentEl parameter.

  9. #9
    Ext JS Premium Member Event Horizon's Avatar
    Join Date
    May 2008
    Location
    Melbourne, Australia
    Posts
    42
    Vote Rating
    0
    Event Horizon is on a distinguished road

      0  

    Default


    http://extjs.com/forum/showthread.php?t=33857

    i'm still testing it but at least it renders correctly! Just change ViewPort for panel, and omit the contentEl parameter.
    That's a useful extension, but I don't think it applies directly to what we are hoping to achieve.

    if I understand the SortableDataView correctly, it's designed to provide drag and drop sorting of records in a store associated with a DataView.

    The changes you're recommending would only provide drag and drop sorting of the same records in a store associated with a DataView inside a panel.

    We want to be able to drag and drop the panels themselves.

    I'll keep looking....

  10. #10