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.

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

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

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?

this is my attachment.
Thanks.

Quote:

---

Originally Posted by 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?

---

Any solution?

The store needs to be configured with

Code:

---

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

---

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

---

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

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