ExtJS getClass（）动态隐藏/显示图标

使用Sencha Architect，我正在尝试一个带有操作列的网格。该列有两个可能的图标，它们根据网格行中的值隐藏或显示。这是一个有很好文档记录的用例，我试图尽可能地遵循示例代码，但就是不能让它工作

            columns: [
            {
                xtype: 'actioncolumn',
                width: 50,
                dataIndex: 'IsFilter',
                items: [
                    {
                        getClass: function(v, metadata, r, rowIndex, colIndex, store) {
                            var isFilter = r.get('IsFilter');
                            if (!isFilter) {
                                return  "x-hide-display";
                            } else {
                                console.log(r.get('Title') + ' sort');
                                return "x-grid-center-icon";
                            }
                        },
                        icon: 'resources/Images/png/sort35.png'
                    },
                    {
                        getClass: function(v, metadata, r, rowIndex, colIndex, store) {
                            if (v) {
                                return "x-hide-display";
                            } else {
                                console.log(r.get('Title') + ' filter');
                                return "x-grid-center-icon";
                            }
                        },
                        icon: 'resources/Images/png/funnel6.png'
                    }
                ]
            }

---

当我看到正确的控制台消息时，我知道逻辑工作正常。理想的结果是显示一个或另一个图标。相反，它总是同时显示两个图标。那么，我做错了什么呢？

这个问题必须在逻辑上，因为当我简化它并这样做时，它在改变真值和假值时对我起作用

    columns: [
        {
            xtype: 'actioncolumn',
            width: 50,
            dataIndex: 'IsFilter',
            items: [
                {
                    getClass: function(v, metadata, r, rowIndex, colIndex, store) {
                        if (true) {
                            return  "x-hide-display";
                        } else {
                            console.log(r.get('Title') + ' sort');
                            return "x-grid-center-icon";
                        }
                    },
                    icon: '/js/ext-3.4.0/resources/images/access/menu/unchecked.gif'
                },
                {
                    getClass: function(v, metadata, r, rowIndex, colIndex, store) {
                        if (false) {
                            return "x-hide-display";
                        } else {
                            console.log(r.get('Title') + ' filter');
                            return "x-grid-center-icon";
                        }
                    },
                    icon: '/js/ext-3.4.0/resources/images/access/menu/checked.gif'
                }
            ]
        },

---

检查

r.get（'IsFilter'）

和

如果（v）{

在正确的时间返回您期望的内容。

我认为问题在于您在项目中添加了两个图标。相反，在CSS类中添加图标，即在您的x-grid-center-icon和x-hide-display中，并根据您的情况返回该类

代码如下所示

columns: [
            {
                xtype: 'actioncolumn',
                width: 50,
                dataIndex: 'IsFilter',
                items: [
                    {
                        getClass: function(v, metadata, r, rowIndex, colIndex, store) {
                            var isFilter = r.get('IsFilter');
                            if (!isFilter) {
                                return  "hideDisplay";
                            } else {
                                console.log(r.get('Title') + ' sort');
                                return "showIcon";
                            }
                        },

                    },
                    {
                        getClass: function(v, metadata, r, rowIndex, colIndex, store) {
                            if (v) {
                                return "hideDisplay";
                            } else {
                                console.log(r.get('Title') + ' filter');
                                return "showIcon";
                            }
                        },

                    }
                ]
            }


CSS add the following :


    .hideDisplay
    {
      width: 32px;
      height: 32px;
      background-image:none;
    }

    .showIcon
    {
      width: 32px;
      height: 32px;
      background-image:resources/Images/png/sort35.png
    }

---

希望这对您有所帮助。

覆盖默认的Ext类并向其添加图像不是一个好主意，ExtJs经常使用这些类，您不希望这些图标到处都显示。只有在适当的位置。通过向父菜单添加一个id，然后只覆盖该选择器中的CSS，您的答案可能会有很大的改进s

#我的菜单.x-hide-display{…

您好，我不认为x-hide-display是一个操作项类。您是否已将x-hide-display的代码手动添加到CSS中？如果是，请在此处共享代码。如果不是，请添加

.x-hide-display{display:none；}

添加到您的CSS。谢谢您的回答。令人沮丧的是，当我同样简化逻辑时，我仍然看到两个图标。我确信逻辑是正确的，传递的值是正确的。您是否覆盖了CSS？我正在尝试添加showIconSort和showIconFilter的新CSS类，但尚未使其工作。您的意见是否正确做一个覆盖？好的。正如我所怀疑的，我做了一些愚蠢的事情。我在Sencha Architect工作。我需要做的是在单个ActionColumn上构建2个ActionColumnItems。然后一切都成功了！这对我来说在ExtJs 5上不起作用，但我已经在ExtJs 4上工作了。有人在5上做过吗？