ExtJS 5 - implementing multiple level grid grouping

Currently, I am trying to find a solution to organize my data by months and then further group the months by years. At the moment, I have only been able to group the data by years.

Is there someone who can assist me with this issue?

This is my model:

Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ 
// 'name', 
// 'email', 
'phone' ]});

Here is some sample data:

var userStore = Ext.create('Ext.data.Store', {
model: 'User',
data: [
    { year: '2015', month : 'march', phone: '555-111-1224' },
    { year: '2015', month : 'april', phone: '555-222-1234' },
    { year: '2014', month : 'march', phone: '555-222-1244' },
    { year: '2014', month : 'april', phone: '555-222-1254' }
],
groupField: 'year'});

Below is the code for the grid:

Ext.application({

name   : 'MyApp',

launch : function() {

    Ext.create('Ext.grid.Panel', {
        renderTo: Ext.getBody(),
        features: [{ ftype: 'grouping' }],
        store: userStore,
        width: 250,
        height: 300,
        title: 'Application Users',
        columns: [
            {
                text: 'Phone Number',
                flex: 1,
                dataIndex: 'phone',
                sortable: false,
                hideable: false
            }
        ]
    });
}});

Thank you in advance for your help!

Answer №1

Discover a more versatile approach in grouping your data on the store by utilizing the grouper configuration instead of the groupField.

Consider this example tailored to your needs:

var userStore = Ext.create('Ext.data.Store', {
    model: 'User',
    data: [
        { year: '2015', month : 'march', phone: '555-111-1224' },
        { year: '2015', month : 'april', phone: '555-222-1234' },
        { year: '2014', month : 'march', phone: '555-222-1244' },
        { year: '2014', month : 'april', phone: '555-222-1254' }
    ],    
    grouper: {
        groupFn: function(item) {
            return 'Month: ' + item.get('month') + ', Year: ' + item.get('year');
        }
    }
);

To see this method in action, visit .

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues have been identified with the functionality of the Am charts v3 XY in conjunction with a

I'm currently working on a project with angularJS and utilizing the npm package amcharts3 "^3.21.15". I've encountered a minor issue regarding the logarithmic scale in my XY chart. Below is my chart without the logarithmic scale: View working ch ...

Creating a three-dimensional spline that originates from the scene using THREE.js

I'm struggling with headaches while attempting to extrude a spline to the scene's origin. Here is my current approach: First, I create a spline using the following code snippet: let centerX = 0 let centerY = 0 let radius = 200 let coils = 50 le ...

Incorrect variable being updated in Vue.js

I created a filter method called itemsWithFilter to filter the items object and store the results in itemsResult. This function initially works as expected, but I noticed that it automatically updates the original items object. However, I intended for the ...

The PHP/JavaScript project is constantly reaching out to yourmeme-site.com

I am currently working on a project on my local server that involves sending frequent requests to your-mime-site.com. In this project, I have integrated the following jquery plugins: jQuery jQuery.form jQuery.validate jQuery.ui Aside from the plugins, ...

Is there a way to implement Method Chaining in JavaScript?

I am trying to chain these two method calls together: utils.map([1,2,3,4,5], function (el) { return ++el; } ) and utils.filter(function (el) {return !el%2; } While both methods work fine individually, the following chained code is not functioning corr ...

Transfer the values selected from checkboxes into an HTML input field

I am attempting to capture the values of checkboxes and then insert them into an input field once they have been checked. Using JavaScript, I have managed to show these values in a <span> tag successfully. However, when trying to do the same within a ...

The PHP header redirect to "url.php" fails to function correctly on GoDaddy's hosting platform

Hello everyone, I am facing an issue with the header ("Location: url.php") in PHP. I wrote the code using Macromedia Dreamweaver MX 2004. Everything works fine on my localhost server, but when I upload it to the godaddy server, the redirection gets stuck o ...

Using TypeScript with ReactJS

While working on a form using React-select, I encountered an issue when trying to pass parameters to a function. The error message returned was: Expected 1 arguments, but got 0.ts(2554) index.tsx(31, 31): An argument for 'selectRef' was not pr ...

Displaying particles in system

I'm utilizing the Three.js ParticleSystem to showcase a large number of points, which greatly improves performance. At certain zoom levels, the particles may appear very close together, leading to the appearance of strange De Moivre fringes when adju ...

Discovering discrepancies between an empty array and undefined in Mongoose

How can I distinguish between an empty array and a null/undefined value when retrieving data from MongoDB using Mongoose? Mongoose treats both as empty arrays, but the actual meanings in the database are different. For example: var Mongoose = require(&apo ...

What is preventing me from accessing the props of my functional component in an event handler?

I've encountered a strange issue within one of my components where both props and local state seem to disappear in an event handler function. export default function KeyboardState({layout, children}) { // Setting up local component state const [c ...

Tips for customizing the appearance of buttons in a JavaScript bxSlider

Take a look at my landing page: In the upper section, you'll find three buttons that allow you to switch between different slides. These buttons are named: credi5, credi10, and credi15. Now, I want to replace those buttons with images... specificall ...

Autocomplete in Vue.js with cascading suggestions based on object keys

I have been experimenting with creating a 3 or 4 level cascading autocomplete feature in Vue.js, but I'm facing some issues with its functionality. You can view the original code on this CodePen link. <div id="app"> <v-app id=&qu ...

The most effective method for incorporating a header and footer into an HTML page utilizing a variety of client-side frameworks

Looking for a solution for my HTML project where I want to incorporate a header and footer to minimize rework. Any suggestions on a good approach? I have experimented with AngularJS using ng-include, and here is the code snippet: var app = angular.module ...

What causes a merge conflict to occur within a React and Typescript project?

I stumbled upon this code snippet in our React/Typescript - JSX/TSX project with an unresolved Git merge conflict. Interestingly, the code successfully compiles and runs in the browser! Upon transpilation, I noticed that the top element is recognized as t ...

Using cannonjs and Three.js to connect a physics body with a visual mesh

I have written the code below to create two spheres using cannonjs with Three.js for rendering. var world, mass, body, shape, timeStep=1/60, camera, scene, renderer, geometry, material, mesh; initThree(); initCannon(); animate(); func ...

In VueJs, I am working on retrieving the ID and value of the element that has been clicked in order to successfully submit the data to

In my project, I am working on a feature that involves toggling job offers between visible and invisible using a toggle button. When the page loads, a GET request retrieves the status (true or false) from the database to determine whether the toggle button ...

Error message: When initiating AJAX requests in ASP.NET, the function is not defined for undefined

I recently followed a tutorial on creating AJAX requests for CRUD operations in an AngularJS application. However, upon trying to perform an AJAX request to retrieve data from the database, I encountered the following error when launching my application: ...

Reactjs application encounters an "err_connection_refused" error when attempting to connect to a Nodejs backend hosted on different network

I am currently developing an App with a Reactjs front end and node.js back end. The application runs smoothly on the server machine, but when I attempt to access it using localhost:4000 on a different machine connected to the same network, the front end fu ...

Using jQuery to identify keydown events in ASP.NET

Within the context of my project, there is a search button that automatically triggers when the ENTER key is pressed. How can I use jQuery to detect a keydown event specifically for a login button in an ASP.NET project? ...