0

我有一个模型如下：

Ext.define('MyProject.model.Contact', {
extend: 'Ext.data.Model',
config: {
    fields: [
        {
            name: 'ID'
        },
        {
            name: 'Image'
        },
        {
            name: 'Name'
        },
        {
            name: 'IsSelected'
        }
    ]
}

});

我有一个商店使用这个模型。这个商店有一个组功能如下：

        groupFn: function(item) {
            if (item.get('Name')) {
                return item.get('Name')[0].toUpperCase();
            } else {
                return ' ';
            }
        }

我在一个列表视图中显示这个商店，列表视图的模板如下：

<img src="{Image}" height="45" width="45">
<span style="">{Name}</span>
<span style="float:right; padding-right: 40px;">
   <input type="checkbox" <tpl if="IsSelected === true">checked="checked"</tpl>/>
</span>

列表如下图所示： 列表视图显示数据

当用户单击列表项时，我将“IsSelected”字段更新如下：

onListItemTap: function(dataview, index, target, record, e, eOpts) {
    var isSelected = record.getData().IsSelected;
    if (isSelected === true) {
        record.set("IsSelected", false);
    } else {
        record.set("IsSelected", true);
    }
}

事件触发后，列表会自动更新。请看下图： 数据更新后的listview

所有选中的项目都移动到组的末尾。有人知道吗？请告诉我为什么以及如何解决这个问题。谢谢。

4

1 回答 1

1

将分拣机添加到您的商店：

    sorters : [{
        property : 'Name', 
        direction : 'Asc'
    }]

这是一个工作小提琴。

抱歉......那些小提琴链接永远不会正常工作 - 这是一个工作示例工作示例。

如果这不起作用，请告诉我，我可以为您提供我下载的代码。

祝你好运，布拉德

于 2013-07-10T14:32:38.567 回答