0
我試圖將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
}