Sencha Touch - 取消选择列表项？答案

【问题标题】：Sencha Touch - deselect list item?Sencha Touch - 取消选择列表项？
【发布时间】：2011-07-19 02:22:47
【问题描述】：

我正在开发一个 Sencha Touch 应用程序，并且有一个联系人列表。点击列表项时，会显示一个 ActionSheet，其中显示一些基本功能（例如调用、删除和忽略）。不幸的是，当用户点击并触发 ActionSheet 时，列表项在叠加层下方仍然处于选中状态（请参见下面的屏幕截图）：

这是绑定到 itemTap 事件的函数：

itemTap: function(list, index)
{
    // Deselect the selected record:
    var currentRecord = list.getStore().getAt(index);
    currentRecord.forename      = currentRecord.get('forename');
    currentRecord.surname       = currentRecord.get('surname');
    currentRecord.phoneNumber   = currentRecord.get('phoneNumber');
    currentRecord.shortFullName = currentRecord.forename + ' ' +  currentRecord.surname[0];

    list.getStore().deselect(index, true);

    callButton.setText('Call ' + currentRecord.shortFullName + ' (' + currentRecord.phoneNumber + ')');
    unfriendButton.setText('Remove ' + currentRecord.shortFullName + ' as friend');
    friendActionSheet.show();
}

很遗憾，list.getStore().deselect(index, true) 返回以下错误：Object [object Object] has no method 'deselect'

关于我可能做错了什么或如何实现这一点的任何想法？

【问题讨论】：

标签： javascript sencha-touch

【解决方案1】：

这对我有用：

    listeners: {
        itemtap: function(dv, ix, item, e) {
            // Clear the selection soon
            setTimeout(function(){dv.deselect(ix);},500);
        }
    }

【讨论】：

感谢 Chris，假设您是在 Sencha 论坛上为我解决问题的 Chris。它确实奏效了，我给了你一些帮助！
我比下面提到的disableSelection: true 方法更喜欢这种方法（尽管它效果很好），因为这会像往常一样突出显示用户的选择然后取消选择它，而disableSelection 从不突出显示要开始的选择与。

【解决方案2】：

在 Sencha Touch 2 中，使用 disableSelection: true，同时创建一个列表

Ext.define('App.view.NewsList',{
extend: 'Ext.List',
xtype: NEWS_LIST,

config: {
    store: NEWS_FEED,
    //deselectOnContainerClick: true,// not working in Sencha Touch 2
    disableSelection: true, // since Sencha Touch 2
    itemTpl: '{heading}'
} 
});

【讨论】：

如果是 nestedlist，也可以使用该选项。但是你必须像这样将它添加到listConfig 属性中：listConfig: { disableSelection: true }
对于nestedList的一些应用你也可以设置allowDeselect属性为true。

【解决方案3】：

如果要清除整个列表：

var selModel = app.views.notesList.deselect(app.views.notesList.getSelectedRecords());

【讨论】：

这适用于 Ext.dataview.List，除了使用 getSelection() 而不是 getSelectedRecords()。 Sencha Touch 2.1 就是这样。

【解决方案4】：

setTimeout 在这里真的不是一个好的解决方案。应该是这样的：

 listeners: {
        itemtap: function(list, ix, item, e) {
            // Clear the selection soon
            list.deselect(list.getSelectedRecords());
        }
    }

【讨论】：

【解决方案5】：

我没有尝试重现您的问题，但您可能想尝试：

list.deselect(currentRecord, true);

在你这样做之后，你可能需要打电话

doLayout()

或

doComponentLayout()

刷新视图。

【讨论】：

感谢@ballmw，但doLayout() 是Container 类的方法，不属于List 对象。 list.refresh() 清除选择，但也删除了对 HCI 不利的临时蓝色突出显示...
很高兴看到你找到了答案！

【解决方案6】：

这让我发疯了。

虽然批准的答案会起作用，但值得注意的是，您可以像这样延迟（就像嵌套列表一样）这样做：

    var selModel = app.views.VideosList.items.items[0].getSelectionModel();
    Ext.defer(selModel.deselectAll, 200, selModel);

我把它放在我的控制器中（当视图更改时调用它），其中 app.views.VideosList 是我的主面板，app.views.VideosList.items.items[0] 是该面板中的列表。

【讨论】：

【解决方案7】：

这是为我做的（sencha touch 2.3）：

list = Ext.Viewport.down('nestedlist');
list.getActiveItem().deselectAll();

【讨论】：