Sencha Touch SortableList

Question

http://docs.sencha.com/touch/2.3.1/#!/api/Ext.plugin.SortableList

更新问题：

代码：

Ext.application({
    name: 'Fiddle',

    launch: function() {
        var templ = new Ext.XTemplate(
      '<tpl if="isActive">',
            '<div style="color:red" class="',
            Ext.baseCSSPrefix + 'list-sortablehandle',
            '">',
        '</tpl>',    
    '<b>Name: {text}</b>',
        '<tpl if="isActive">',
            '</div>',
        '</tpl>',
            {
                // XTemplate configuration:
                compiled: true,
                // member functions:
                isitem2: function (name) {
                    return name == 'item2';
                },
            }
);

        Ext.Viewport.add({
            xtype: 'list',
            itemId: 'dynamicContainer',
            infinite: true,
            plugins: 'sortablelist',
            itemTpl: templ,//'<span style="width:30px;height:20px;background-color:gray;display:block;float:left;" class="' + Ext.baseCSSPrefix + 'list-sortablehandle"></span>{text}',
            listeners: [{
                event: 'dragsort',
                fn: function (list, row, from, to) {
                    console.log(to);
                }
            }],
            data: [{
                text: 'Item 1-Active',
                isActive:true
            }, {
                text: 'Item 2-Active',
                isActive: true
            },
             {
                text: 'Item 3-Active',
                isActive: true
            }, {
                text: 'Item 4',
                isActive: false
            },
                  {
                text: 'Item 5',
                isActive: false
            }]
        });

    }
});

See in Action:https://fiddle.sencha.com/#fiddle/3kl

在@mishoboss asnswer https://stackoverflow.com/a/21762299/1405008的帮助下

我几乎（70%）做了我想做的事，但我需要限制黑色的列表内容不应该由用户重新排列，我限制用户拖动特定单元格但是当用户拖动其他单元格时他们可以放置它是非活动单元格位置，也可以重新排序该单元格。但不应该是这样的。

在我的附加屏幕中，红色箭头标记的列表底部不应该是可排序的。

老问题 我查看了 sencha touch 文档，其中内置了名为 SortableList 的插件。但他们从未给出如何使用该插件的示例源代码。

RED：列表项不允许按用户拖动和排序 Yello：可排序的列表项

我知道这很容易通过 jquery 实现。

但我从来没有通过 sencha touch 插件获得任何想法或示例来实现这一点。

另外，我不想将 Jquery 添加到我的应用程序中，因为它可能会在与 sencha 框架一起使用时导致性能问题。

注意：另外我只希望用户在列表中点击并按住不只是拖动，因为它会影响默认滚动行为。 请帮忙！

Answer 1

我也玩了几个小时的 sortablelist。我就是这样做的：

                    xtype: 'list',
                    plugins:'sortablelist',
                    itemTpl: '<span class="'+Ext.baseCSSPrefix + 'list-sortablehandle"></span>{text}',
                    listeners: [
                        {
                            event: 'dragsort',
                            fn: function(list, row, from, to){
                                alert(to);
                            }
                        }
                    ],
...

注意，您需要一个“手柄”才能工作。句柄是您点击的区域，列表项变为可拖动的。句柄的默认选择器是

'.' + Ext.baseCSSPrefix + 'list-sortablehandle'

您可以使用 handleSelector 参数定义不同的选择器。

但是我无法让它正常工作。列表项变得可拖动，但它们不会对齐和重新排序。要么它有一些问题，要么我仍然缺少一些东西。如果您有任何成功，请在此处发布。

编辑：我刚刚在 Sencha Fiddle 上测试了一次：https://fiddle.sencha.com/fiddle/3k3/preview

仍然没有按预期工作。