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

Posted 2023-02-26

【中文标题】Ext.plugin.SortableList 不能按预期工作

【英文标题】：Ext.plugin.SortableList doesn't work as expected

【发布时间】：2014-02-26 03:40:34

【问题描述】：

我在我的项目中使用 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',
                    
                ]
            ,
        ],
    
);

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

谢谢。

【问题讨论】：

您可能需要在商店或列表中配置一些内容。

请详细告诉我应该配置哪些内容...谢谢。

【参考方案1】：

您缺少插件上的 handleSelector 配置：

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

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

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

【讨论】：

对不起，我试过了，但没有成功。什么都没发生，和以前一样。

我能看到的唯一其他区别是我运行的是 2.3.1...我可以保证可排序列表绝对可以与上面的代码 sn-p 一起使用！