How to get the name of every title from accordion

[honeyandbee]

Hi

I am developing a module for attendance of the employee. I am using accordion which will sow the name of the year as their title. And in every accordion details I have put a grid which contains the name of the months. I can get the grid value in controller but can't get the name of the accordion header that's why I am not being able to show the desired result in grid. Can anyone please help me on this to get the heading of accordion title? My accordion details is given below :

Ext.define('Ext4Example.view.attendence.Timeperiod' ,{
    extend: 'Ext.form.Panel',
    alias : 'widget.timeperiod',
    id: 'timeperiod',
    region: 'west',
    border: false,
    width: 150,
    height:400,
    split: true,
    defaults: {
        // applied to each contained panel
        //bodyStyle: 'padding:15px'
    },
    layout: {
        // layout-specific configs go here
        type: 'accordion',
        titleCollapse: true,
        animate: true,
        activeOnTop: true
    },
    
    initComponent: function() {
        
        var today = new Date();
        var yyyy = today.getFullYear();
        
        this.items = [{
            title: 'Year '+yyyy,
            items: [{
            xtype: 'months'
            }]
            //html: 'Panel content!'
        },{
            title: 'Year '+(yyyy-1),
            items: [{
            xtype: 'months'
            }]
            //html: 'Panel content!'
        },{
            title: 'Year '+(yyyy-2),
            items: [{
            xtype: 'months'
            }]
            //html: 'Panel content!'
        },{
            title: 'Year '+(yyyy-3),
            items: [{
            xtype: 'months'
            }]
            //html: 'Panel content!'
        },{
            title: 'Year '+(yyyy-4),
            items: [{
            xtype: 'months'
            }]
            //html: 'Panel content!'
        }];
        
        this.callParent(arguments);
    }
});

[evant]

You're over-nesting. The grid should be the accordion item:

Ext.define('Ext4Example.view.attendence.Timeperiod' ,{
    extend: 'Ext.form.Panel',
    alias : 'widget.timeperiod',
    id: 'timeperiod',
    region: 'west',
    border: false,
    width: 150,
    height:400,
    split: true,
    defaults: {
        // applied to each contained panel
        //bodyStyle: 'padding:15px'
    },
    layout: {
        // layout-specific configs go here
        type: 'accordion',
        titleCollapse: true,
        animate: true,
        activeOnTop: true
    },
    
    initComponent: function() {
        
        var today = new Date();
        var yyyy = today.getFullYear();
        
        this.items = [{
            title: 'Year '+yyyy,
            xtype: 'months'
        },{
            title: 'Year '+(yyyy-1),
            xtype: 'months'
            //html: 'Panel content!'
        },{
            title: 'Year '+(yyyy-2),
            items: [{
            xtype: 'months'
            }]
            //html: 'Panel content!'
        }];
        
        this.callParent(arguments);
    }
});

[honeyandbee]

hello Evan

thank you for your reply. But I will show the data against a particular employee id which I will include later. And I am new to Extjs. Can you please edit my code to do the job done !?

That will be so helpfull. I can provide you complete sample code if you need.