XTemplate event delegation issue with nested data

Question

I’m trying to delegate itemclick event to XTemplate items with no success. The data is rendered correctly but the itemclick event throws me an error when the view rendered. The error that I get is the following:

TypeError: records[i] is undefined node.setAttribute('data-recordId', records[i].internalId);

The data output (what user sees) is like the following: 

A successful man is one who makes more money than his wife can spend.

• 4 Tom

• 5 David

• 6 Arthur

A successful woman is one who can find such a man.

• 1 Joanne

• 2 Tina

• 3 Kate

Is there any way to delegate an event to XTemplate nested items?

Bellow is the code that I’m using.

I have the following Models that are associated:

Ext.define('Gender', {
    extend: 'Ext.data.Model',


    fields: [
        { name: 'gender', type: 'auto' }
    ],


    hasMany:{model:'Member', name:'member'}


    //associations: {
    //    type: 'hasMany',
    //    model: 'Member',
    //    name: 'member',
    //    associationKey: 'member'
    //}
});

and

Ext.define('Member', {
    extend: 'Ext.data.Model',


    fields: [
        { name: '_id', type: 'int' },
        { name: 'name', type: 'auto' },
        { name: 'model', type: 'auto' }
    ],


    belongsTo: 'Gender'
});

Here is my store:

Ext.define('GenderStore', {
    extend: 'Ext.data.Store',
    model: 'Gender',
    storeId: 'genderstore',


    autoLoad: true,


    proxy: {
        type: 'ajax',
        pageParam: false, //to remove param "page"
        startParam: false, //to remove param "start"
        limitParam: false, //to remove param "limit"
        noCache: false, //to remove param "_dc"
        url: '/data/data.json',
        extraParams: {},
        reader: {
            type: 'json',
            rootProperty: 'data',
            successProperty: 'success',
            totalProperty: 'dataset'
        }
    }


});

And my view:

Ext.define("GenderView",{
    extend: "Ext.panel.Panel",
    id: 'genderview',
    xtype: 'genderview',


    bodyPadding: 20,
    autoScroll: true,


    title: 'Gender View',
    closable: false,
    tooltip: 'Gender View',


    items: [{
        xtype: 'dataview',
        margin: '20 80 20 80',
        store: Ext.create('GenderStore'),
        emptyText: 'Try again!!!',
        loadMask: false,
        itemSelector: '.gender',


        // tpl: new Ext.XTemplate(
//             '<tpl for=".">' +
//             '<p>{gender}</p>' +
//                 '<tpl for="member">' +
//                     '<span class="gender">[{_id}]&nbsp;&nbsp;{name}</span><br><br>' +
//                 '</tpl>' +
//             '</tpl>'
//         ),


        tpl: new Ext.XTemplate(
            '<tpl for=".">' +
                        
                '<tpl if="gender == \'male\'">' +
                    '<p>A successful man is one who makes more money than his wife can spend.</p>' +                
                    '<tpl for="member">' +
                        '<span class="gender">[{_id}]&nbsp;&nbsp;{name}</span><br><br>' +
                    '</tpl>' +
                '<tpl else>' +
                    '<p>A successful woman is one who can find such a man.</p>' +                    
                    '<tpl for="member">' +
                        '<span class="gender">[{_id}]&nbsp;&nbsp;{name}</span><br><br>' +
                    '</tpl>' +
                '</tpl>' +
                
            '</tpl>'
        ),


        listeners: {
            itemclick: function(view, record, item, index, e, eOpts) {
                console.log(record.get('_id'));
            }
        }
    }]


});

The data that I'm trying to load is of this form:

{
    "data": [{
        "gender": "female",
        "member": [{
            "_id": 1,
            "name": "Joanne",
            "model": "female"
        }, {
            "_id": 2,
            "name": "Tina",
            "model": "female"
        }, {
            "_id": 3,
            "name": "Kate",
            "model": "female"
        }]
    }, {
        "gender": "male",
        "member": [{
            "_id": 4,
            "name": "Tom",
            "model": "male"
        }, {
            "_id": 5,
            "name": "David",
            "model": "male"
        }, {
            "_id": 6,
            "name": "Arthur",
            "model": "male"
        }]
    }],
    "dataset": 6,
    "message": "OK",
    "success": true
}

Now a different approach: What if I use a different data structure? Is it possible to achieve the aforementioned representation layout if I load a JSON like the following [not nested]?

{           
    "data": [{                                   
        "_id": 1,
        "name": "Joanne",
        "model": "female"                       
    }, {                                   
        "_id": 2,
        "name": "Tina",
        "model": "female"                       
    }, {                                   
        "_id": 3,
        "name": "Kate",
        "model": "female"                       
    }, {                                   
        "_id": 4,
        "name": "Tom",
        "model": "male"                       
    }, {                                  
        "_id": 5,
        "name": "David",
        "model": "male"                       
    }, {                                   
        "_id": 6,
        "name": "Arthur",
         "model": "male"                       
    }],
    "dataset": 6,
    "message": "OK",
    "success": true
}

Answer 1

Someone else helped me to find the solution. The code below belongs to the dataview. Notice the extra div in the template that matches the itemSelector.

I provide the solution here if someone else ever needs help in a similar situation:

items: [{
        xtype: 'dataview',
        margin: '20 80 20 80',
        store: {
            type: 'gender'
        },
        emptyText: 'Try again!!!',
        loadMask: false,
        itemSelector: '.gender-wrap',
        tpl: new Ext.XTemplate(
            '<tpl for=".">' +
                '<div class="gender-wrap">' +
                    '<tpl if="gender == \'male\'">' + 
                        '<p>A successful man is one who makes more money than his wife can spend.</p>' + 
                        '<tpl for="member">' + 
                            '<span class="gender" child:id="{_id}">[{_id}]  {name}</span><br><br>' + 
                        '</tpl>' + 
                    '<tpl else>' + 
                        '<p>A successful woman is one who can find such a man.</p>' + 
                        '<tpl for="member">' + 
                            '<span class="gender" child:id="{_id}">[{_id}]  {name}</span><br><br>' + 
                        '</tpl>' + 
                    '</tpl>' +
                '</div>' +
            '</tpl>'
        ),
        listeners: {
            itemclick: function(view, record, item, index, e, eOpts) {
                var child = e.getTarget('.gender', 3, true),
                    id    = child && child.getAttribute('id', 'child');

                if (id) {
                    console.log('click was on', id, 'of this gender', record.get('gender'));
                }
            }
        }
    }]