Ich versuche, Itemclick-Ereignis zu XTemplate-Elemente ohne Erfolg zu delegieren. Die Daten werden korrekt gerendert, aber das Ereignis itemclick löst bei der Wiedergabe der Ansicht einen Fehler aus. Der Fehler, ich erhalte, ist die folgende:Problem XTemplate Ereignisdelegierung mit verschachtelten Daten
TypeError: records[i] is undefined node.setAttribute('data-recordId', records[i].internalId);
Die Datenausgabe (welche Benutzer sieht) ist wie folgt:
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
Gibt es eine Möglichkeit, ein Ereignis zu delegieren verschachtelte Elemente XTemplate?
Bellow ist der Code, den ich verwende.
ich folgende Modelle haben, die verbunden sind:
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'
//}
});
und
Ext.define('Member', {
extend: 'Ext.data.Model',
fields: [
{ name: '_id', type: 'int' },
{ name: 'name', type: 'auto' },
{ name: 'model', type: 'auto' }
],
belongsTo: 'Gender'
});
Hier ist mein Speicher:
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'
}
}
});
Und meine Ansicht:
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}] {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}] {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}] {name}</span><br><br>' +
'</tpl>' +
'</tpl>' +
'</tpl>'
),
listeners: {
itemclick: function(view, record, item, index, e, eOpts) {
console.log(record.get('_id'));
}
}
}]
});
Die Daten, die ich ist diese Form zu laden bin versucht:
{
"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
}
nun ein anderer Ansatz: Was passiert, wenn ich eine andere Datenstruktur verwenden? Ist es möglich, das oben erwähnte Repräsentationslayout zu erreichen, wenn ich einen JSON wie folgt laden [nicht verschachtelt]?
{
"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
}