1. #1
    Sencha User
    Join Date
    Aug 2010
    Posts
    45
    Vote Rating
    0
    pajelawrence is on a distinguished road

      0  

    Question Ext.List Sortable Item

    Ext.List Sortable Item


    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.


  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,220
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    ST2 Ext.util.Sortable != ST1 Ext.util.Sortable. They do two different things and are not interchangeable.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User borryshasian's Avatar
    Join Date
    Feb 2012
    Location
    Singapore
    Posts
    29
    Vote Rating
    1
    borryshasian is on a distinguished road

      0  

    Default


    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:
    Code:
    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:
    Code:
    Ext.define('MyApp.model.PhoneBookContact', {
        extend: 'Ext.data.Model',
        
        config:{
            fields: ['firstname', 'lastname']
        }
    });
    In the store class:
    Code:
    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'},
            ],
        }
    });

  4. #4
    Sencha User
    Join Date
    Aug 2010
    Posts
    45
    Vote Rating
    0
    pajelawrence is on a distinguished road

      0  

    Default


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

    Thanks

  5. #5
    Sencha User
    Join Date
    Aug 2010
    Posts
    45
    Vote Rating
    0
    pajelawrence is on a distinguished road

      0  

    Default


    Quote Originally Posted by borryshasian View Post
    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:
    Code:
    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:
    Code:
    Ext.define('MyApp.model.PhoneBookContact', {
        extend: 'Ext.data.Model',
        
        config:{
            fields: ['firstname', 'lastname']
        }
    });
    In the store class:
    Code:
    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.