grouping grid with the first char

[nicolabaldo]

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.

[aconran]

You can override the "getGroupString" method on your grouper to return the first character of that field.

[nicolabaldo]

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

[aconran]

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?

[nicolabaldo]

this is my attachment.
Thanks.

[nicolabaldo]

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?

[Animal]

The store needs to be configured with

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

[Animal]

Try this override for the Store class

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

[Animal]

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

[nicolabaldo]

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