liste etendue quand on clic ?

Bonjour,
j'arrive à afficher une liste qui est regroupée par le champ 'typo' avec justement l'entête de groupe.

jusque là j'ai bon, par contre je voudrais pouvoir cliquer sur ma ligne est à ce moment là ecarter les deux enreg pour faire apparaitre un contenu propre à chaque item.
lorsque l'on reclique il se referme par contre je ne sais pas quel composant je dois utiliser ou parametrage sur ma liste.

Merci

ci dessous le fichier main.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
Ext.define('Art', {
    extend: 'Ext.data.Model',
    config: {
        fields: ['nom', 'sigle', 'typo']
    }
});
 
Ext.create('Ext.data.Store', {
    id: 'ListStore',
    model: 'Art',
    sorters: 'nom',
    grouper: function(record) {
        return record.get('typo');
    },
    data: [
        {nom: 'jules', sigle: 'Benesh', typo: 'aa'},
        {nom: 'Julio', sigle: 'Minich', typo: 'aa'},
        {nom: 'Tania', sigle: 'Ricco', typo: 'bb'},
        {nom: 'Odessa', sigle: 'Steuck', typo: 'baa'},
        {nom: 'Nelson', sigle: 'Raber', typo: 'baa'},
        {nom: 'Tyrone', sigle: 'Scannell', typo: 'baa'},
        {nom: 'Allan', sigle: 'Disbrow', typo: 'baa'},
        {nom: 'Zebra', sigle: 'Evilias', typo: 'baa'}
    ]
});
 
Ext.define("MyApp.view.Main", {
    extend: 'Ext.tab.Panel',
    requires: [
        'Ext.TitleBar'
    ],
    config: {
        tabBarPosition: 'bottom',
 
        items: [
 
            {
            title: 'Grouped',
            iconCls: 'home',
            layout: Ext.os.deviceType == 'Phone' ? 'fit' : {
              type: 'vbox',
 
                align: 'center',
                pack: 'center'
            },
           // cls: 'demo-list',
            items: [{
                width: 300,
                height: 500,
 
                xtype: 'list',
                store: 'ListStore',
                itemTpl: '<div class="contact"><strong>{nom}</strong> {sigle}</div>',
                grouped: true,
                indexBar: false
            }]
        }
        ]
    }
});