我正在尝试将itemclick事件委托给XTemplate项目但没有成功。数据正确呈现,但itemclick事件在呈现视图时抛出错误。我得到的错误如下:
TypeError:records [i]未定义node.setAttribute('data-recordId', 记录[I] .internalId);
数据输出(用户看到的内容)如下所示:
一个成功的男人是一个比妻子可以花更多钱的人。
4 Tom
5 David
6 Arthur
一个成功的女人是能找到这样一个男人的人。
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
}
答案 0 :(得分:0)
其他人帮我找到了解决方案。以下代码属于dataview。注意模板中与itemSelector匹配的额外div。
如果其他人在类似的情况下需要帮助,我在这里提供解决方案:
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'));
}
}
}
}]