Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-9184 in a recent build.
  1. #1
    Ext JS Premium Member
    Join Date
    Dec 2011
    Posts
    231
    Vote Rating
    2
    nicolabaldo is on a distinguished road

      0  

    Default grouping grid with the first char

    grouping grid with the first char


    I use ExtJs 4.1.3 and Architect.
    I've got a grid with the fields: name and surname.
    I need to group the surname by the first char, for example:

    A:
    ANDERSON GINA
    ANDERSON PAOLA

    B:
    BAT MAN
    BAT MOBILE

    ...

    I set the groupField= surname[0] but It doesn't work...
    Any solution?
    Thanks.

  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,399
    Vote Rating
    128
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    You can override the "getGroupString" method on your grouper to return the first character of that field.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  3. #3
    Ext JS Premium Member
    Join Date
    Dec 2011
    Posts
    231
    Vote Rating
    2
    nicolabaldo is on a distinguished road

      0  

    Default


    It works with ExtJ s4.1.3 but withExtJs 4.2 no!

  4. #4
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,399
    Vote Rating
    128
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Interesting; sounds like a Ext JS 4.2 bug. Could you provide a simple example for me to pass along to the Ext JS team?
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  5. #5
    Ext JS Premium Member
    Join Date
    Dec 2011
    Posts
    231
    Vote Rating
    2
    nicolabaldo is on a distinguished road

      0  

    Default see the test||

    see the test||


    this is my attachment.
    Thanks.
    Attached Files

  6. #6
    Ext JS Premium Member
    Join Date
    Dec 2011
    Posts
    231
    Vote Rating
    2
    nicolabaldo is on a distinguished road

      0  

    Default any solution?

    any solution?


    Quote Originally Posted by aconran View Post
    Interesting; sounds like a Ext JS 4.2 bug. Could you provide a simple example for me to pass along to the Ext JS team?
    Any solution?

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    57
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    The store needs to be configured with

    Code:
    groupers: {
                        property: "nome",
                        getGroupString: function(record) {
                            debugger;
                            return record.get('nome')[0];
                        }
                    },

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    57
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Try this override for the Store class

    Code:
    Ext.override(Ext.data.Store, {
        constructor: function(config) {
            // Clone the config so we don't modify the original config object
            config = Ext.apply({}, config);
    
            var me = this,
                groupers = config.groupers || me.groupers,
                groupField = config.groupField || me.groupField,
                proxy,
                data;
    
            /**
             * @event beforeprefetch
             * Fires before a prefetch occurs. Return `false` to cancel.
             * @param {Ext.data.Store} this
             * @param {Ext.data.Operation} operation The associated operation.
             */
            /**
             * @event groupchange
             * Fired whenever the grouping in the grid changes.
             * @param {Ext.data.Store} store The store.
             * @param {Ext.util.Grouper[]} groupers The array of Grouper objects.
             */
            /**
             * @event prefetch
             * Fires whenever records have been prefetched.
             * @param {Ext.data.Store} this
             * @param {Ext.data.Model[]} records An array of records.
             * @param {Boolean} successful `true` if the operation was successful.
             * @param {Ext.data.Operation} operation The associated operation.
             */
            /**
             * @event filterchange
             * Fired whenever the filter set changes.
             * @param {Ext.data.Store} store The store.
             * @param {Ext.util.Filter[]} filters The array of Filter objects.
             */
            data = config.data || me.data;
    
            if (data) {
                me.inlineData = data;
                delete config.data;
            }
    
            if (!groupers && groupField) {
                groupers = [{
                    property : groupField,
                    direction: config.groupDir || me.groupDir
                }];
            
                // Allow a custom getGroupString implementation to prevail
                if (me.getGroupString !== Ext.data.Store.prototype.getGroupString) {
                    groupers[0].getGroupString = function(record) {
                        return me.getGroupString(record);
                    }
                }
            }
            delete config.groupers;
    
            /**
             * @cfg {Ext.util.MixedCollection} groupers
             * The collection of {@link Ext.util.Grouper Groupers} currently applied to this Store.
             */
            me.groupers = new Ext.util.MixedCollection(false, Ext.data.Store.grouperIdFn);
            me.groupers.addAll(me.decodeGroupers(groupers));
    
            me.groups = new Ext.util.MixedCollection(false, Ext.data.Store.groupIdFn);
    
            me.callParent([config]);
            // don't use *config* anymore from here on... use *me* instead...
    
            if (me.buffered) {
                me.data = new me.PageMap({
                    store: me,
                    keyFn: Ext.data.Store.recordIdFn,
                    pageSize: me.pageSize,
                    maxSize: me.purgePageCount,
                    listeners: {
                        // Whenever PageMap gets cleared, it means we re no longer interested in 
                        // any outstanding page prefetches, so cancel tham all
                        clear: me.onPageMapClear,
                        scope: me
                    }
                });
                me.pageRequests = {};
    
                // Sorting, grouping and filtering may only be remote for buffered stores.
                me.remoteSort = me.remoteGroup = me.remoteFilter = true;
    
                me.sortOnLoad = false;
                me.filterOnLoad = false;
            } else {
               /**
                * @property {Ext.util.MixedCollection/Ext.data.Store.PageMap} data
                * When this Store is not {@link #buffered}, the `data` property is a MixedCollection which holds this store's local cache of records.
                * 
                * When this store *is* {@link #buffered}, the `data` property is a cache of *pages* of records used to satisfy load requests from the Store when the associated view
                * scrolls. Depending on how the {@link #leadingBufferZone buffer zone} and {@link #purgePageCount} are configured,
                * pages which are scrolled out of view may be evicted from the cache, and need to be re-requested from the server
                * when scrolled back into view. For this reason, if using {@link #buffered}, it is recommended that you configure
                * your Model definitions with a unique {@link Ext.data.Model#idProperty} so that records which return to the page
                * cache may be matched against previously selected records. 
                *
                * Pages in the direction of scroll are prefetched from the remote server and loaded into this cache *before*
                * they are needed based upon the {@link #leadingBufferZone buffer zone} so that scrolling can proceed without visible pauses for data loading.
                */
                me.data = new Ext.util.MixedCollection({
                    getKey: Ext.data.Store.recordIdFn,
                    maintainIndices: true
                });
                me.data.pageSize = me.pageSize;
            }
    
            // Only sort by group fields if we are doing local grouping
            if (me.remoteGroup) {
                me.remoteSort = true;
            }
    
            proxy = me.proxy;
            data = me.inlineData;
    
            // Page size for non-buffered Store defaults to 25
            // For a buffered Store, the default page size is taken from the initial call to prefetch.
            if (!me.buffered && !me.pageSize) {
                me.pageSize = me.defaultPageSize;
            }
    
            if (data) {
                if (proxy instanceof Ext.data.proxy.Memory) {
                    proxy.data = data;
                    me.read();
                } else {
                    me.add.apply(me, [data]);
                }
    
                // Beginning grouped, group using existing grouper collection but suppress events
                if (me.groupers.items.length && !me.remoteGroup) {
                    me.group(null, null, true);
                }
    
                // Grouping will sort, so not grouped, but locally sorted, just sort
                else if (!me.remoteSort) {
                    me.sort();
                }
                delete me.inlineData;
            } else if (me.autoLoad) {
                // Defer the load until after the current event handler has finished and set up any associated views.
                Ext.defer(me.load, 1, me, [ typeof me.autoLoad === 'object' ? me.autoLoad : undefined ]);
            }
        }
    });

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    57
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.

  10. #10
    Ext JS Premium Member
    Join Date
    Dec 2011
    Posts
    231
    Vote Rating
    2
    nicolabaldo is on a distinguished road

      0  

    Default


    Thank for reply me.
    I insert your override on beforerender of the panel (only for a test) but I still have the problem.

Thread Participants: 2