ExtJS GroupingSummary网格：查找并选中分组记录的代码需求

Got it, here's a straightforward way to add a search functionality that lets you type a group name and automatically select the corresponding group record in your GroupingSummary grid. We'll hook this up in the grid's afterrender event so it's ready as soon as the grid loads.

Step-by-Step Implementation #

First, we'll add a search input field to the grid's toolbar, then wire up a keyup listener to handle the search and selection logic:

Ext.create('Ext.grid.Panel', {
    xtype: 'groupingsummary-grid',
    store: yourGroupedStore, // Replace with your actual store
    columns: yourColumnConfig, // Replace with your column setup
    features: [{
        ftype: 'groupingsummary',
        id: 'groupingFeature' // Give it an ID for easy access
    }],
    listeners: {
        afterrender: function(grid) {
            // Create a search text field
            const searchInput = Ext.create('Ext.form.field.Text', {
                emptyText: 'Type group name to select...',
                width: 280,
                margin: '5 10',
                listeners: {
                    keyup: function(field) {
                        const searchTerm = field.getValue().trim().toLowerCase();
                        const selectionModel = grid.getSelectionModel();
                        const view = grid.getView();
                        const store = grid.getStore();
                        const groupingFeature = grid.getFeature('groupingFeature');

                        // Clear any existing selection first
                        selectionModel.deselectAll();

                        if (!searchTerm) return;

                        // Loop through each record to find matching groups
                        store.each(record => {
                            const groupName = groupingFeature.getGroupString(record).toLowerCase();
                            // Check if the group name contains the search term (adjust for exact match if needed)
                            if (groupName.includes(searchTerm)) {
                                // Select the record belonging to the matching group
                                selectionModel.select(record);
                                // Scroll the group into view
                                view.scrollRowIntoView(store.indexOf(record));
                                // Expand the group if it's collapsed
                                groupingFeature.expand(groupingFeature.getGroupString(record));
                                return false; // Stop after first match—remove this to select all matching groups
                            }
                        });
                    }
                }
            });

            // Add the search field to a docked toolbar at the top of the grid
            grid.addDocked({
                xtype: 'toolbar',
                dock: 'top',
                items: [searchInput]
            });
        }
    }
});

Key Details to Note #

• Case Insensitivity: We convert both the search term and group name to lowercase so the search works regardless of capitalization.
• Match Type: Right now it uses includes() for partial matches—if you want exact matches only, replace includes(searchTerm) with === searchTerm.
• Multiple Matches: Remove the return false inside the store.each loop if you want to select all groups that match the search term instead of just the first one.
• Group Expansion: The code automatically expands the matched group so you can see the records under it—you can remove that line if you prefer to leave groups as they are.

This setup integrates seamlessly with your GroupingSummary grid and gives users a quick way to jump to and select specific groups without manually scrolling through the grid.

内容的提问来源于stack exchange，提问作者Sachet Patil