Ext.plugin.SortableList 不能按预期工作

Question

我在我的项目中使用 Sencha Touch 2.3.0。而且我的项目需要其中的可排序列表...只需拖放列表项即可更改存储顺序。

似乎Ext.plugin.SortableList 存在这种精致的功能，但我无法让它按照我的意愿运行。虽然我已将此插件添加到我的列表中，但所有项目都被卡住并且无法移动。和以前一样。

这是我目前实现的。

Ext.define('ImageGallery.view.ImagePreferences', {
    extend: 'Ext.Container',
    xtype: 'image_preference_view',

    requires: [
        'Ext.plugin.SortableList',
    ],

    config: {
        title: 'Image Preferences',

        items: [
            {
                xtype: 'list',
                disableSelection: true,
                style: 'width: 100%; height: 100%; border-top: 1px solid white; background-color: white;',
                itemTpl: '<div class = "m_li_preference">\
                                <div class = "m_switch_no_dp">OFF</div>\
                                <div class = "m_switch_yes_dp">ON</div>\
                          </div>',

                id: 'id_list_preferences',

                store: 'id_preference_store',

                scrollable: false,
                deselectOnContainerClick: true,

                plugins: [
                    {
                        xclass: 'Ext.plugin.SortableList',
                    }
                ]
            },
        ],
    }
});

当然，我认为不可能通过这么简单的步骤来完成。所以我希望任何有这个问题经验的人帮助我。任何说明将不胜感激。

谢谢。

Answer 1

您缺少插件上的 handleSelector 配置：

plugins: [
        {
            xclass: 'Ext.plugin.SortableList',
            handleSelector: '.reorderlistitem'
        }
    ],

然后，在我的 itemTpl 上，我确保列表中的每个项目都有一个带有“reorderlistitem”类的图标，我使用 CSS 浮动到 x-list-item 的右侧。我认为大多数用户都希望看到一个由三个水平线组成的图标。

我不确定可排序列表是否可以在关闭滚动的情况下工作。在使插件正常工作的非标准列表配置方面，我遇到了很多问题。最终我选择了无限：真正的标准滚动，它适用于这些设置。