代码之家  ›  专栏  ›  技术社区  ›  Tony J Watson

带有自定义ListItem的NestedList

  •  0
  • Tony J Watson  · 技术社区  · 7 年前

    我试图创建一个带有自定义NestedListItem组件的ExtJS 6.5.1 NestedList。我在互联网上或ExtJS文档中找不到工作示例。

    有人能给我展示一个带有自定义组件项的列表或嵌套列表的工作示例吗?

    1 回复  |  直到 7 年前
        1
  •  1
  •   Saurabh Nemade    7 年前

    您需要使用 列表配置 随着 项目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',
                            }]
                        }
                        //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

    下面是将ListItem与dataMap结合使用的示例: https://www.sencha.com/forum/showthread.php?183774-dataMap-to-DataItem-s-items