Sencha touch 2: Sorting / Grouping automatically fire when update data in store

问题

I have a model as following:

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

});

I have a store use this model.This store has a group function as below:

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

I show this store in a listview, the template of listview as below:

<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>

The list show as image below:

When user clicks on an item of list, I update the "IsSelected" field as below:

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);
    }
}

After event fired, the list is automatically update. Please see below image:

All item checked is moved to the end of a group. Are there anyone know it? Please tell me why and how to fix this problem. Thanks.

回答1:

Add a sorter to your store:

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

Here is a working fiddle.

Sorry...those fiddle links never work right- here's a working example working example.

Let me know if that doesn't work and I can get you the code I downloaded.

Good luck, Brad

来源：https://stackoverflow.com/questions/17564946/sencha-touch-2-sorting-grouping-automatically-fire-when-update-data-in-store

标签

listview

sorting

sencha-touch-2

store

grouping