Javascript 带有自定义ListItem的NestedList
我正在尝试创建一个带有自定义NestedListItem组件的ExtJS 6.5.1 NestedList。我在internet或ExtJS文档中找不到一个工作示例Javascript 带有自定义ListItem的NestedList,javascript,extjs,extjs6.5.1,Javascript,Extjs,Extjs6.5.1,我正在尝试创建一个带有自定义NestedListItem组件的ExtJS 6.5.1 NestedList。我在internet或ExtJS文档中找不到一个工作示例 有人能给我看一个带有自定义组件项的列表或嵌套列表的工作示例吗？您需要使用listConfig和itemTpl来获得嵌套列表中的自定义XTemplate样式 NestedList文档说明： getItemTextTpl（节点）：字符串 重写此方法以提供单个节点的自定义模板呈现。模板将接收记录中的所有数据，并且还将接收是否为叶节点 但我
有人能给我看一个带有自定义组件项的列表或嵌套列表的工作示例吗？您需要使用listConfig和itemTpl来获得嵌套列表中的自定义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>'
}
}]
});
}
});
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',
}]
}
//itemTpl: '<span<tpl if="leaf == true"> class="x-list-item-leaf"</tpl>>{property} --- {leaf} --- Yeah --- Custom Thing here from template</span>'
}
}]
});
}
});
Ext.application({
名字：“小提琴”，
启动：函数（）{
风险值数据={
物业：'杂货'，
项目：[{
酒店：酒水，
项目：[{
物业:"水",，
项目：[{
属性：“闪闪发光”，
叶：是的
}, {
财产：'仍然'，
叶：是的
}]
}, {
酒店：咖啡店，
叶：是的
}, {
酒店名称：“浓缩咖啡”，
叶：是的
}, {
属性：“红牛”，
叶：是的
}, {
物业：'可口可乐'，
叶：是的
}, {
物业：'健怡可乐'，
叶：是的
}]
}, {
财产：'水果'，
项目：[{
物业：'香蕉'，
叶：是的
}, {
财产：'柠檬'，
叶：是的
}]
}, {
物业:"小吃",，
项目：[{
属性：'螺母'，
叶：是的
}, {
财产：'椒盐卷饼'，
叶：是的
}, {
财产：“芥末豌豆”，
叶：是的
}]
}]
};
var store=Ext.create（'Ext.data.TreeStore'{
defaultRootProperty:“项”，
根：数据
});
Ext.Viewport.add({
xtype:'面板'，
布局：“适合”，
标题：“示例”，
项目：[{
xtype:'嵌套列表'，
全屏：对，
标题：“食品杂货”，
displayField:'属性'，
店:店,，
列表配置：{
itemTpl:“{property}--{leaf}--Yeah--来自模板的自定义内容”
}
}]
});
}
});
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>'
}
}]
});
}
});
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',
}]
}
//itemTpl: '<span<tpl if="leaf == true"> class="x-list-item-leaf"</tpl>>{property} --- {leaf} --- Yeah --- Custom Thing here from template</span>'
}
}]
});
}
});
Ext.application({
名字：“小提琴”，
启动：函数（）{
风险值数据={
物业：'杂货'，
项目：[{
酒店：酒水，
项目：[{
物业:"水",，
项目：[{
属性：“闪闪发光”，
叶：是的
}, {
财产：'仍然'，
叶：是的
}]
}, {
酒店：咖啡店，
叶：是的
}, {
酒店名称：“浓缩咖啡”，
叶：是的
}, {
属性：“红牛”，
叶：是的
}, {
物业：'可口可乐'，
叶：是的
}, {
物业：'健怡可乐'，
叶：是的
}]
}, {
财产：'水果'，
项目：[{
物业：'香蕉'，
叶：是的
}, {
财产：'柠檬'，
叶：是的
}]
}, {
物业:"小吃",，
项目：[{
属性：'螺母'，
叶：是的
}, {
财产：'椒盐卷饼'，
叶：是的
}, {
财产：“芥末豌豆”，
叶：是的
}]
}]
};
var store=Ext.create（'Ext.data.TreeStore'{
defaultRootProperty:“项”，
根：数据
});
Ext.Viewport.add({
xtype:'面板'，
布局：“适合”，
标题：“示例”，
项目：[{
xtype:'嵌套列表'，
全屏：对，
标题：“食品杂货”，
显示字段：“property1”，
店:店,，
列表配置：{
xtype:'列表'，
itemConfig：{
xtype:'面板'，
布局：“适合”，
项目：[{
xtype:'textfield'，
值：“这里的自定义对象”，
}]
}
//itemTpl:“{property}--{leaf}--Yeah--来自模板的自定义内容”
}
}]
});
}
});