Ext.List Sortable Item

[pajelawrence]

Hi everyone,

Please help me guys how to implement the sorting of Items inside List component. I saw this example on Sencha Touch 1.x. I am using Sencha Touch 2 currently, but unfortunately there is no example in the ST2 SDK regarding to this matter.

And also the ST2 Docs in particular with Ext.util.Sortable has no detailed explanation regarding to this Utility.

Please help me guys. I really need this on my current project. Any suggestion and advice will be appreciated.

[mitchellsimoens]

ST2 Ext.util.Sortable != ST1 Ext.util.Sortable. They do two different things and are not interchangeable.

[borryshasian]

Did you mean sorting items like the phonebook app?
If that's what you meant, then this is how I do it:

In the view class:

Ext.define("MyApp.view.PhoneBook", {
    extend: 'Ext.dataview.List',
    xtype: 'phonebook',
    
    config:{
        title: 'Phone Book',
        scrollable: true,
        fullscreen: true,
        
        store: 'PhoneBookContacts',
        grouped: true,
        
        itemTpl: '{lastname} - {firstname}',
    }
});

In the model class:

Ext.define('MyApp.model.PhoneBookContact', {
    extend: 'Ext.data.Model',
    
    config:{
        fields: ['firstname', 'lastname']
    }
});

In the store class:

Ext.define('MyApp.store.PhoneBookContacts', {
    extend: 'Ext.data.Store',
    
    config: {
        model: 'MyApp.model.PhoneBookContact',
        sorters: 'lastname',
        
        grouper: function(record){
            return record.get('lastname')[0];
        },
        
        data: [
            {firstname: Bruce', lastname: 'Wayne'},
            {firstname: 'Peter Parker', lastname: 'Parker'},
            {firstname: 'Clark', lastname: 'Kent'},
        ],
    }
});

[pajelawrence]

@mitchellsimoens: Thanks for quick reply. How to implement the Ext.util.Sortable on each items of Ext.List in ST2?

Thanks

[pajelawrence]

Did you mean sorting items like the phonebook app?
If that's what you meant, then this is how I do it:

In the view class:

Ext.define("MyApp.view.PhoneBook", {
    extend: 'Ext.dataview.List',
    xtype: 'phonebook',
    
    config:{
        title: 'Phone Book',
        scrollable: true,
        fullscreen: true,
        
        store: 'PhoneBookContacts',
        grouped: true,
        
        itemTpl: '{lastname} - {firstname}',
    }
});

In the model class:

Ext.define('MyApp.model.PhoneBookContact', {
    extend: 'Ext.data.Model',
    
    config:{
        fields: ['firstname', 'lastname']
    }
});

In the store class:

Ext.define('MyApp.store.PhoneBookContacts', {
    extend: 'Ext.data.Store',
    
    config: {
        model: 'MyApp.model.PhoneBookContact',
        sorters: 'lastname',
        
        grouper: function(record){
            return record.get('lastname')[0];
        },
        
        data: [
            {firstname: Bruce', lastname: 'Wayne'},
            {firstname: 'Peter Parker', lastname: 'Parker'},
            {firstname: 'Clark', lastname: 'Kent'},
        ],
    }
});

@borryshasian: Thanks for reply: I mean is the Ext.List items is allow me to click (while holding), drag and drop vertically from top to bottom and vise versa.