ExtJS 4升级至7后Treelist展开图标不显示问题求助

升级ExtJS版本后，使用xtype: 'treelist'组件时，展开/折叠图标无法显示，可通过以下方式解决：

一、启用默认图标样式 #

ExtJS 7的TreeList默认依赖主题自带的图标样式，若使用自定义主题需确保包含TreeList的图标CSS类。也可在组件配置中显式指定图标类：

{
    xtype: 'treelist',
    ui: 'nav', // 启用默认导航样式，保证图标样式生效
    expanderIconCls: 'x-fa fa-chevron-right', // 展开状态图标（Font Awesome）
    collapsedIconCls: 'x-fa fa-chevron-down' // 折叠状态图标（Font Awesome）
}

注：需确保项目已引入Font Awesome资源，或替换为ExtJS内置图标类（如x-icon-expand、x-icon-collapse）。

二、修复样式冲突 #

你的代码中给TreeList设置了marginLeft: "-30px"，该样式会将图标区域挤出可视范围，导致图标无法显示。建议移除该样式：

style: {
    fontSize: "14px",
    fontWeight: "normal"
    // 移除 marginLeft: "-30px"
}

三、自定义图标模板 #

若需要完全自定义图标，可通过itemTpl重写节点模板：

{
    xtype: 'treelist',
    itemTpl: [
        '<div class="treelist-item-icon {iconCls}"></div>',
        '<div class="treelist-item-text">{text}</div>',
        '<tpl if="expandable">',
            '<div class="treelist-expander {expanded?\'expanded\':\'collapsed\'}"></div>',
        '</tpl>'
    ],
    // 配合自定义CSS
}

添加对应的CSS样式：

.treelist-expander {
    width: 16px;
    height: 16px;
    background-image: url('展开图标路径');
    background-size: cover;
}
.treelist-expander.expanded {
    background-image: url('折叠图标路径');
}

适配你的代码修改示例 #

调整右侧面板的TreeList配置，确保图标正常显示：

{
    xtype: "treelist",
    store: Ext.create("Ext.data.TreeStore", {
        root: {
            children: [{
                text: "A",
                iconCls: "x-fa fa-folder-open",
                expanded: true,
                children: [
                    {text: "Addresses", leaf: true},
                    {text: "Address connections", leaf: true},
                    {text: "Address validation", leaf: true}
                ]
            },{
                text: "B",
                iconCls: "x-fa fa-folder-open",
                expanded: true,
                children: [{text: "Barcode scannings", leaf: true}]
            },{
                text: "C",
                expanded: true,
                children: [
                    {text: "Calendar planner", leaf: true},
                    {text: "Chartek", leaf: true},
                    {text: "Chartek planner", leaf: true},
                    {text: "Chartek templates", leaf: true},
                    {text: "Claims", leaf: true},
                    {text: "Commodities", leaf: true},
                    {text: "Currencies", leaf: true},
                    {text: "Customers", leaf: true}
                ]
            }]
        }
    }),
    ui: 'nav',
    expanderIconCls: 'x-fa fa-chevron-right',
    collapsedIconCls: 'x-fa fa-chevron-down',
    style: {
        fontSize: "14px",
        fontWeight: "normal"
    },
    listeners: {
        itemmouseenter: function (view, record, item) {
            Ext.fly(item).setStyle({});
        },
        itemmouseleave: function (view, record, item) {
            Ext.fly(item).setStyle({});
        }
    }
}

内容的提问来源于stack exchange，提问作者steve