javascript - 带有自定义 ListItem 的 NestedList

Question

我正在尝试使用自定义 NestedListItem 组件创建 ExtJS 6.5.1 NestedList。我在 Internet 或 ExtJS 文档中找不到工作示例。

任何人都可以向我展示带有自定义组件项的 List 或 NestedList 的工作示例吗？

Answer 1

您将需要使用listConfig和itemTpl 在NestedList中获取自定义 XTemplate 样式。

NestedList 文档说：

getItemTextTpl（节点）：字符串

覆盖此方法以提供单个节点的自定义模板呈现。模板将接收 Record 中的所有数据，并且还将接收它是否是叶节点。

但我发现它在 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

编辑：

使用 Component 而不是 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',
                        }]
                    }
                    //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/29u0

对于 listItem 中的映射数据，您可以使用https://docs.sencha.com/extjs/6.2.0/modern/Ext.dataview.ListItem.html#cfg-dataMap

以下是使用带有 dataMap 的 ListItem 的示例：https ://www.sencha.com/forum/showthread.php?183774-dataMap-to-DataItem-s-items