NestedList的item样式定制

最新推荐文章于 2021-08-03 20:26:14 发布

sense_jw

最新推荐文章于 2021-08-03 20:26:14 发布

阅读量165

点赞数

CC 4.0 BY-SA版权

分类专栏： sencha

本文链接：https://blog.youkuaiyun.com/sense_jw/article/details/84531039

sencha 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何通过设置listConfig属性自定义NestedList组件中元素的显示样式，包括表格布局、图标展示和非叶节点的特殊处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

NestedList没有提供itemTpl属性，但实际上可以通过设置listConfig对元素的显示样式进行定制。如下：


Ext.define('Portal.view.Production', {
    extend: 'Ext.dataview.NestedList',

    requires: [
        'Ext.data.TreeStore'
    ],

    config: {
        id: 'production',
        hideOnMaskTap: true,
        backText: '返回',
        displayField: 'name',
        emptyText: '更多产品敬请期待……',
        store: 'Production',
        useSimpleItems: false,
        listConfig: {
            itemTpl: new Ext.XTemplate(
            '<table style="margin:0px;padding:0px" border=0><tr><td align="center"><tpl if="leaf == false"><div class="x-unsized x-list-disclosure" id="{id}" style="margin:0px 5px 10px 0px;float:left"></div><tpl elseif="images"><img style="margin:0px 10px 0px 0px" src="{[values.images.split(",")[0]]}" width="100px"></tpl></td><td align="left">{name}</td></tr></table>')
        },
        listeners: [
            {
                fn: 'onProductionListItemTap',
                event: 'itemtap'
            }
        ]
    },