Я пытаюсь делегировать событие itemclick для элементов XTemplate без успеха. Данные отображаются правильно, но событие itemclick вызывает ошибку при просмотре представления. Ошибка, я получаю следующее:Ошибка делегирования событий XTemplate с вложенными данными
TypeError: records[i] is undefined node.setAttribute('data-recordId', records[i].internalId);
выходные данные (то, что пользователь видит), как следующее:
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
Есть ли способ передать событие в XTemplate вложенные элементы?
Bellow - это код, который я использую.
У меня есть следующие модели, связанные:
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'
//}
});
и
Ext.define('Member', {
extend: 'Ext.data.Model',
fields: [
{ name: '_id', type: 'int' },
{ name: 'name', type: 'auto' },
{ name: 'model', type: 'auto' }
],
belongsTo: 'Gender'
});
Вот мой магазин:
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'
}
}
});
И мое мнение:
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'));
}
}
}]
});
Данные, которые я пытаюсь загрузить имеет такой вид:
{
"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
}
Теперь другой подход: Что делать, если я использую другую структуру данных? Возможно ли достичь вышеупомянутого макета представления, если я загружаю JSON, например, следующее [не вложенное]?
{
"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
}