How to Apply Disclosure only to Certain Group(s)?

[JeaffreyGilbert]

I currently have grouping like this:

groups-disclosure.png
Code:

Ext.regModel('Contact', {
                fields: ['firstName', 'lastName']
            });
            
            var store = new Ext.data.JsonStore({
                model  : 'Contact',
                getGroupString : function(record) {
                    //return record.get('lastName')[0];
                    return record.get('group');
                },
                data: [
                    {firstName: 'Tung', lastName: 'Hauw', group: 'Parents'},
                    {firstName: 'Regina', lastName: 'Clarissa', group: 'Parents'},
                    {firstName: 'Melvin', lastName: 'Gilbert', group: 'Children'},
                    {firstName: 'Jeaffrey', lastName: 'Gilbert', group: 'Children'},
                    {firstName: 'Melissa', lastName: 'Merryl Gilbert', group: 'Children'},
                    {firstName: 'Jesica', lastName: 'Merryl Gilbert', group: 'Children'}
                ]
            });
            
            var list1 = new Ext.List({
                flex: 1,
                cls: 'list_simple',
                sorters: ['firstName', 'group'],
                itemTpl: '{firstName} {lastName}',
                grouped: true,
                groupTpl : [
                    '<tpl for=".">',
                        '<div class="x-list-group x-group-{id}">',
                            '<h3 class="x-list-header"><div class="header">{group}</div></h3>',
                            '<div class="x-list-group-items">',
                                '{items}',
                            '</div>',
                        '</div>',
                    '</tpl>'
                ],
                onItemDisclosure: function(record, btn, index) {
                    Ext.Msg.alert('Tap', 'Disclose more info for ' + record.get('firstName') + ' ' + record.get('lastName'), Ext.emptyFn);
                },
                store: store
            });

I need to have specific disclosure for specific group. With my code above, I get all groups have the same disclosure. I'm trying to achieve this design:

groups-disclosure-2.png
No disclosure for Parent's items. If we slide on Parent's row, we will see Remove button. Also, it has tap event.

I don't have idea where I should move/change the disclosure event. My first thought is hide the disclosure button on Parents by CSS, but I'm finding elegant way.

Please also give me a clue to create tapping and sliding event for Parents' items (don't apply to Children's rows).

Thanks in advance!

[rdougan]

Add a 'disclosure' field into your model, and set it to false in the records where you do not want it to show.

[JeaffreyGilbert]

Thanks for the reply. I tried with your direction but no changes. Did I miss something in the code?

Ext.regModel('Contact', {
    fields: ['firstName', 'lastName', 'disclosure'],
});
            
var store = new Ext.data.JsonStore({
    model  : 'Contact',
        getGroupString : function(record) {
        //return record.get('lastName')[0];
        return record.get('group');
    },
    data: [
        {firstName: 'Tung', lastName: 'Hauw', group: 'Parents', disclosure:false},
        {firstName: 'Regina', lastName: 'Clarissa', group: 'Parents', disclosure:false},
        {firstName: 'Melvin', lastName: 'Gilbert', group: 'Children'},
        {firstName: 'Jeaffrey', lastName: 'Gilbert', group: 'Children'},
        {firstName: 'Melissa', lastName: 'Merryl Gilbert', group: 'Children'},
        {firstName: 'Jesica', lastName: 'Merryl Gilbert', group: 'Children'}
    ]
});

var list1 = new Ext.List({
    flex: 1,
    cls: 'list_simple',
    sorters: ['firstName', 'group'],
    itemTpl: '{firstName} {lastName}',
    grouped: true,
    groupTpl : [
        '<tpl for=".">',
            '<div class="x-list-group x-group-{id}">',
                '<h3 class="x-list-header"><div class="header">{group}</div></h3>',
                '<div class="x-list-group-items">',
                    '{items}',
                '</div>',
            '</div>',
        '</tpl>'
    ],
    onItemDisclosure: function(record, btn, index) {
        Ext.Msg.alert('Tap', 'Disclose more info for ' + record.get('firstName') + ' ' + record.get('lastName'), Ext.emptyFn);
    },
    store: store
});