Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Sortable Elements/Tabs

  1. #1
    Ext JS Premium Member bryall's Avatar
    Join Date
    Jun 2010
    Location
    Philadelphia, PA
    Posts
    111

    Question Sortable Elements/Tabs

    I've been trying to figure out a way to do this for the last few days and haven't come up with anything.

    Is it possible to have sortable elements connected through tabs with extjs? I'd prefer not to use plugins, but even the ones I found don't appear to be as flexible as needed.

    I'm looking for functionality similar to http://jqueryui.com/demos/sortable/#...s-through-tabs

    Thanks in advanced

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    Yes, you can do that, but you would have to write the drag&drop implementation for tabs yourself.

    I recommend reading this to familiarize yourself with how drag&drop works in Ext.

  3. #3
    Ext JS Premium Member bryall's Avatar
    Join Date
    Jun 2010
    Location
    Philadelphia, PA
    Posts
    111

    Default

    Thanks for the reply Condor, I've read that article a few times and tried to implement everything I need but failed each time. I don't see extjs supporting sorting natively. I also don't see how I could set the tabs as drop zones because I'll never know the id of each tab.

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    A tab is not a dropzone. The entire TabPanel strip is a dropzone.

    You have to wait for the TabPanel render event and create the dropzone with the strip as el (you can also specify an element instead of an id).

  5. #5
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    Weird UI where the two lists are artificially separated by being on different tabs, and the drop MUST be through the tab selector?

    Smacks of making it just so just "because".

    Surely a side-by-side implementation is more intuitive?

    http://dev.sencha.com/deploy/dev/exa...lect-demo.html

  6. #6
    Ext JS Premium Member bryall's Avatar
    Join Date
    Jun 2010
    Location
    Philadelphia, PA
    Posts
    111

    Default

    Condor I was able to get the the individual tabs as drop targets, so that will definitely make this useful. My only other concern is with the sorting of elements. I need to be able to sort DIVs because we're going for a portlet effect, I looked at the extjs portlets but it appeared they need to be in portals which we can't have.

    Animal - Unfortunately I'm not using this functionality as a list, but rather as ports being transferred between tabs. So the multi-select stuff won't do. I have a working model of this in jquery but obviously ExtJS is going to be our preferred library.

  7. #7
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    So you are dragging/dropping Containers between tabs?

  8. #8
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    Are you really using divs or are you actually dragging Ext components?

  9. #9
    Ext JS Premium Member bryall's Avatar
    Join Date
    Jun 2010
    Location
    Philadelphia, PA
    Posts
    111

    Default

    Condor it'll be using divs not an ext component

  10. #10
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    So the TabPanel strip el has a DropZone made out of it, and the getTargetFromEvent finds the tab selector <li> that you are over.

    The tabs themselves should be DragZones.

    I don't like the concept of having to register a DD object for every draggable item as that blog entry suggests!

    See the http://dev.sencha.com/deploy/dev/exa...dropzones.html example

    It shows a single DragZone and a single DropZone

    The DragZone handles multiple draggables.

Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 1
    Last Post: 4 Feb 2010, 9:03 AM
  2. Sortable List with elements selectable by mouse drag
    By peterkaufmanenator in forum Community Discussion
    Replies: 1
    Last Post: 29 Dec 2009, 10:13 AM
  3. submit elements from tabs in a tabpanel
    By ollitsch in forum Ext GWT: Discussion
    Replies: 2
    Last Post: 21 Aug 2009, 3:34 AM
  4. Reusing form elements in different tabs
    By Turban in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 22 May 2008, 3:13 PM
  5. Sortable Tabs per Drag
    By stamm in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 12 Jul 2007, 8:15 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •