1. #1
    Sencha User KJedi's Avatar
    Join Date
    Feb 2008
    Location
    Ukraine, Mykolayiv
    Posts
    145
    Vote Rating
    1
    KJedi is on a distinguished road

      0  

    Default What happened to groupers?

    What happened to groupers?


    Groupers are not working. In the examples they are, but in my code when I do:
    Code:
    var store = CJ.user.getModel().allDeals();
    
    		store.setGrouper({
    			root: 'data',
    			property: 'active',
    			sortProperty: 'active',
    			direction: 'ASC',
    			groupFn: function (deal) {
    				var active = deal.get('active');
    
    				if (active == true) {
    					return CJ.t('Active');
    				}
    				else {
    					return CJ.t('Inactive');
    				}
    			}
    		});
    
    		store.sort('active');
    What I get:
    group not working.png
    This problem occurred when I migrated from PR2 to Beta3.

    What did Sencha did to groupers and why in the same situation, but in other place it is working fine:
    Code:
    var store = Ext.getStore('Deals');
    		store.setGrouper({
    			property: 'distance',
    			sortProperty: 'distance',
    			direction: 'ASC',
    			groupFn: function (val) {
    				var distances = [0, 250, 500, 1000, 1500, 2500, 3500, 5000, 10000, 15000, 20000];
    				var val = val.get('distance');
    				for (var i = distances.length - 1; i >= 0; i--) {
    					if (distances[i] < val) {
    						return CJ.model.Deal.formatDistance(distances[i], true);
    					}
    				}
    			}
    		});
    		store.sort('distance');
    Here what happens:
    group working.png
    CJ.model.Deal.formatDistance simply formats distance and shows it an a human-readable manner.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,121
    Vote Rating
    855
    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


    setGrouper should still work. On the store you use grouper so the associated set method is setGrouper

    Code:
            var store = Ext.create('Ext.data.Store', {
                //give the store some fields
                fields: ['firstName', 'lastName'],
    
                //filter the data using the firstName field
                sorters: 'firstName',
    
                //autoload the data from the server
                autoLoad: true,
    
                //setup the grouping functionality to group by the first letter of the firstName field
                grouper: {
                    groupFn: function(record) {
                        return record.get('firstName')[0];
                    }
                },
    
                //setup the proxy for the store to use an ajax proxy and give it a url to load
                //the local contacts.json file
                proxy: {
                    type: 'ajax',
                    url: 'contacts.json'
                }
            });
    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 KJedi's Avatar
    Join Date
    Feb 2008
    Location
    Ukraine, Mykolayiv
    Posts
    145
    Vote Rating
    1
    KJedi is on a distinguished road

      0  

    Question


    Did you read the code I posted?
    I used setGrouper in both cases. In once case it works, in another one - no! Why?

  4. #4
    Sencha User KJedi's Avatar
    Join Date
    Feb 2008
    Location
    Ukraine, Mykolayiv
    Posts
    145
    Vote Rating
    1
    KJedi is on a distinguished road

      0  

    Default


    One more example of the stupid behavior:
    Model:
    PHP Code:
    Ext.define('CJ.model.Message', {
        
    "extend""Ext.data.Model",
        
    config: {
            
    "proxy": {
                
    "type""rest",
                
    "reader": {
                    
    "type""json",
                    
    "rootProperty""items"
                
    },
                
    "url"CJ.constants.links.server "/js/mocks/chatOverview",
                
    appendIdtrue
            
    },
            
    "idProperty""messageId",
            
    "fields": [
                {
                    
    "name""messageId",
                    
    "type""int"
                
    },
                {
                    
    "name""dealId",
                    
    "type""int"
                
    },
                {
                    
    "name""dealOwnerId",
                    
    "type""int"
                
    },
                {
                    
    "name""dealTitle",
                    
    "type""string"
                
    },
                {
                    
    "name""senderId",
                    
    "type""int"
                
    },
                {
                    
    "name""senderUsername",
                    
    "type""string"
                
    },
                {
                    
    "name""receiverId",
                    
    "type""int"
                
    },
                {
                    
    "name""receiverUsername",
                    
    "type""string"
                
    },
                {
                    
    "name""dateCreated",
                    
    "type""date"
                
    },
                {
                    
    "name""message",
                    
    "type""string"
                
    }
            ],

            
    "validations": [
                {
                    
    "matcher""/^[0-9]*$/",
                    
    "type""format",
                    
    "field""dealId"
                
    }
            ]
        }
    }); 
    Store:
    PHP Code:
    Ext.define('CJ.store.RecentMessages', {
        
    extend'Ext.data.Store',
        
    requires: ['CJ.model.Message''CJ.store.Conversations'],
        
    config: {
            
    model'CJ.model.Message',
            
    autoloadtrue,
            
    proxy: {
                
    type"rest",
                
    reader: {
                    
    type"json",
                    
    rootProperty"items"
                
    },
                
    urlCJ.constants.links.server "/assets/js/mocks/chatOverview.js",
                
    appendIdtrue
            
    },
            
    grouper: {
                
    property'dateCreated',
                
    sortProperty'dateCreated',
                
    direction'DESC',
                
    groupFn: function (val) {
                    var 
    valDate val.get('dateCreated');
                    var 
    date = new Date();
                    if (
    date.getDate() == valDate.getDate() && (date.getTime() - valDate.getTime() <= 24 3600)) {
                        return 
    CJ.t('Today');
                    }
                    else {
                        
    date = new Date(Date.now() - 24 3600);
                        if (
    date.getDate() == valDate.getDate() && (date.getTime() - valDate.getTime() <= 24 3600)) {
                            return 
    CJ.t('Yesterday');
                        }
                        else {
                            return 
    Ext.Date.format(valDate'D, d M y');
                        }
                    }
                }
            }
        }
    }); 
    I render the content in the component that consists of title and a dataview:
    PHP Code:
    Ext.define('CJ.view.chat.cmp.OtherConversationList', {
        
    extend'Ext.Container',
        
    alias'widget.otherConversationList',
        
    config: {
            
    layout'vbox',
            
    items: [
                {
                    
    xtype'container',
                    
    cls'your-deal-title',
                    
    htmlCJ.t('Conversations with other users')
                },
                {
                    
    xtype'dataview',
                    
    ref'conversations',
                    
    itemTpl: new Ext.XTemplate('<div>' +
                            
    '<strong>{dealTitle}</strong>' +
                            
    '<br />' +
                            
    '<span>{[this.renderConversationCount(values.conversationCount)]}</span>' +
                            
    '</div>', {
                        
    renderConversationCount: function (count) {
                            return 
    CJ.t('{0} conversations'count);
                        }
                    }),
                    
    flex1,
                    
    groupedtrue
                
    }
            ]
        },
        
    constructor: function () {
            
    this.callParent(arguments);
            
    this.store Ext.getStore('RecentMessages');
            
    this.store.on('load'this.groupStorethis);
            
    this.conversationsList this.down('[ref=conversations]');
            
    this.groupStore();
            
    this.conversationsList.setStore(this.store);
        },
        
    /**
         *
         */
        
    groupStore: function () {
            
    this.store.setGrouper({
                
    property'dateCreated',
                
    sortProperty'dateCreated',
                
    direction'DESC',
                
    groupFn: function (val) {
                    var 
    valDate val.get('dateCreated');
                    var 
    date = new Date();
                    if (
    date.getDate() == valDate.getDate() && (date.getTime() - valDate.getTime() <= 24 3600)) {
                        return 
    CJ.t('Today');
                    }
                    else {
                        
    date = new Date(Date.now() - 24*3600);
                        if (
    date.getDate() == valDate.getDate() && (date.getTime() - valDate.getTime() <= 24 3600)) {
                            return 
    CJ.t('Yesterday');
                        }
                        else {
                            return 
    Ext.Date.format(valDate'D, d M y');
                        }
                    }
                }
            });

            
    this.store.sort('dateCreated''DESC');
        }
    }); 
    Data I get using mock:
    Code:
    {
    	"success": true,
    	"items": [
    		{
    			"messageId": 1,
    			"dealId": 1,
    			"dealOwnerId": 4,
    			"dealTitle": "6237266789",
    			"senderId": 4,
    			"senderUsername": "me",
    			"receiverId": 1,
    			"receiverUsername": "test",
    			"dateCreated": "2012-01-10 12:43:13",
    			"message": "First message goes here"
    		},
    		{
    			"messageId": 2,
    			"dealId": 2,
    			"dealOwnerId": 4,
    			"dealTitle": "4492492954",
    			"senderId": 4,
    			"senderUsername": "me",
    			"receiverId": 1,
    			"receiverUsername": "test",
    			"dateCreated": "2012-02-10 12:43:13",
    			"message": "Second message goes here"
    		},
    		{
    			"messageId": 3,
    			"dealId": 1,
    			"dealOwnerId": 4,
    			"dealTitle": "3456242187",
    			"senderId": 4,
    			"senderUsername": "me",
    			"receiverId": 2,
    			"receiverUsername": "qwerty",
    			"dateCreated": "2012-03-10 12:43:13",
    			"message": "Third message goes here"
    		}
    	]
    }
    There are 3 messages and they should be grouped by date. I am expecting to see 3 titles and one message under each title.
    What is wrong?

  5. #5
    Sencha User KJedi's Avatar
    Join Date
    Feb 2008
    Location
    Ukraine, Mykolayiv
    Posts
    145
    Vote Rating
    1
    KJedi is on a distinguished road

      0  

    Default


    Found what is wrong with the last example - if you want grouper, you need List, not Dataview.

    But the initial question still remains. Why it doesn't use the rendered string?

Thread Participants: 1