Ext.plugin.SortableList无法按预期工作

时间:2014-02-26 03:40:34

标签: javascript jquery html5 sencha-touch

我正在使用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 个答案:

答案 0 :(得分:0)

您缺少插件上的handleSelector配置:

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

在我的itemTpl上,我确定那里有一个带有课程&#34; reorderlistitem&#34;的图标。对于列表中的每个项目,我使用CSS浮动到x-list-item的右侧。我认为大多数用户希望看到的是彼此相同的三条水平线的图标。

我不确定可排序列表是否可以在滚动关闭的情况下使用。我有很多关于非标准列表配置的问题让插件工作。最终我选择了无限:真实和标准滚动,它适用于我这些设置。