您需要使用
列表配置
随着
项目TPL
在NestedList中获取自定义XTemplate样式。
NestedList文档说明:
getItemTextTpl(节点):字符串
重写此方法以提供单个节点的自定义模板渲染。模板将接收记录中的所有数据,并将接收它是否为叶节点。
但我发现它在ExtJS 6中不起作用。x、 它最终抛出错误,因为无法覆盖getItemTextTpl。
下面是listConfig和itemTpl的工作示例:
Ext.application({
name: 'Fiddle',
launch: function () {
var data = {
property: 'Groceries',
items: [{
property: 'Drinks',
items: [{
property: 'Water',
items: [{
property: 'Sparkling',
leaf: true
}, {
property: 'Still',
leaf: true
}]
}, {
property: 'Coffee',
leaf: true
}, {
property: 'Espresso',
leaf: true
}, {
property: 'Redbull',
leaf: true
}, {
property: 'Coke',
leaf: true
}, {
property: 'Diet Coke',
leaf: true
}]
}, {
property: 'Fruit',
items: [{
property: 'Bananas',
leaf: true
}, {
property: 'Lemon',
leaf: true
}]
}, {
property: 'Snacks',
items: [{
property: 'Nuts',
leaf: true
}, {
property: 'Pretzels',
leaf: true
}, {
property: 'Wasabi Peas',
leaf: true
}]
}]
};
var store = Ext.create('Ext.data.TreeStore', {
defaultRootProperty: 'items',
root: data
});
Ext.Viewport.add({
xtype: 'panel',
layout: 'fit',
title: 'Example',
items: [{
xtype: 'nestedlist',
fullscreen: true,
title: 'Groceries',
displayField: 'property',
store: store,
listConfig: {
itemTpl: '<span<tpl if="leaf == true"> class="x-list-item-leaf"</tpl>>{property} --- {leaf} --- Yeah --- Custom Thing here from template</span>'
}
}]
});
}
});
小提琴示例:
https://fiddle.sencha.com/#view/editor&fiddle/29t3
编辑:
使用组件而不是itemTpl的示例:
Ext.application({
name: 'Fiddle',
launch: function () {
var data = {
property: 'Groceries',
items: [{
property: 'Drinks',
items: [{
property: 'Water',
items: [{
property: 'Sparkling',
leaf: true
}, {
property: 'Still',
leaf: true
}]
}, {
property: 'Coffee',
leaf: true
}, {
property: 'Espresso',
leaf: true
}, {
property: 'Redbull',
leaf: true
}, {
property: 'Coke',
leaf: true
}, {
property: 'Diet Coke',
leaf: true
}]
}, {
property: 'Fruit',
items: [{
property: 'Bananas',
leaf: true
}, {
property: 'Lemon',
leaf: true
}]
}, {
property: 'Snacks',
items: [{
property: 'Nuts',
leaf: true
}, {
property: 'Pretzels',
leaf: true
}, {
property: 'Wasabi Peas',
leaf: true
}]
}]
};
var store = Ext.create('Ext.data.TreeStore', {
defaultRootProperty: 'items',
root: data
});
Ext.Viewport.add({
xtype: 'panel',
layout: 'fit',
title: 'Example',
items: [{
xtype: 'nestedlist',
fullscreen: true,
title: 'Groceries',
displayField: 'property1',
store: store,
listConfig: {
xtype: 'list',
itemConfig: {
xtype: 'panel',
layout: 'fit',
items: [{
xtype: 'textfield',
value: 'Custom thing here',
}]
}
}
}]
});
}
});
摆弄组件示例:
https://fiddle.sencha.com/#view/editor&fiddle/29u0
对于映射listItem中的数据,可以使用
https://docs.sencha.com/extjs/6.2.0/modern/Ext.dataview.ListItem.html#cfg-dataMap
下面是将ListItem与dataMap结合使用的示例:
https://www.sencha.com/forum/showthread.php?183774-dataMap-to-DataItem-s-items