View Full Version : Any News on Ext.behavior.Sortable

7 May 2012, 4:00 AM
Hey Guys,
Really love ST 2, it's great!

I have a project that requires dataviews with sortable items, I've done a bit of searching and found out that Droppable and Sortable haven't yet been ported to ST2.
I've opened up the source and found the two class files Sortable.js and Draggable.js being empty. I'm guessing these will get populated when this gets implemented.

But I also found Ext.Sortable with some behavior resembling what is needed for sortable but couldn't get it to work. I think this is some sort of relic since it's not included in the build.

A few questions:
1. Will this be implemented in the next release ? When will this be approximately ?
2. Is there a preview release system where I can get the bleeding edge, maybe I can work my way up from there ? What about IRC, is there anyplace where I can find some devs to help get this done ?
3. What would be the best place to start if I were to bake this behavior on my own ? Will the Ext.Sortable be good starting point?

NB4: I know that Ext.util.Sortable is for Sores / data and is NOT what I need.


9 May 2012, 7:08 AM
Nothing public at this time as far as I have heard.

10 May 2012, 4:50 PM
Hey Guys,

Thanks @mitchellsimoens (http://www.sencha.com/forum/member.php?22216-mitchellsimoens) for the reply. Sorry to hear the Sencha team isn't more open-source-y.

OK so I started building this on my own. I'm trying to built it as a mixin, which is something I've never done before so please forgive me for the bits of silly code in there AND please point those out.

I've setup a git repository to house the code and wrapped it in a example usage case for fast development. Here it is: https://github.com/oportocala/sencha2-dataview-sortable, the actual mixin file is here: https://github.com/oportocala/sencha2-dataview-sortable/blob/master/app/mixin/Sortable.js

It's still buggy and the code is less than beautiful and still has some external dependencies I couldn't resolve but it is a starting point and it is functional to a degree. So here is my plea for help:

First issue I would love it if someone could help is this:
1. Getting the index of the current item (that extends Ext.dataview.component.DataItem).
Currently the dataview needs to do this nasty trick:

listeners: {
refresh: function (me)
var items = me.getInnerItems();
items = items[0].items.items;

Ext.each(items, function (item, i) {
item.index = i;
item.initialIndex = i;
item.parentItems = items;
item.parentElement = me;
if (item.getTranslatable && item.getTranslatable())
item.getTranslatable().translate(0, 0, false);

Now I'm guessing this can be extracted by inspecting the dom of the element in relation to its parents but as of yet I've not figured it out.

2. Getting a reference to the siblings and the parent dataview of the current item; here I still need to do a item.parentItems = items; and item.parentElement = me; which are bad.

3. Proper mixin behaviour to get rid of this within the item class

initialize: function ()
this.mixins.sortable.constructor(this, this.config);

For the future I would like to replace the use of translatable to a more dom-manipulation workflow using helpers like insertAfter and insertBefore instead of translating the y-position of the items. This is consistent with what Ext.Sortable does, and that's a good place to get inspired from.

But for now if I can get some help with these issues that's a great starting point.
If you have ideas please post them here or fork me on github. In the meantime I'll try to setup a demo with github pages.