Question

使用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'
                    }
                ]
            }

我知道逻辑有效，因为我看到了正确的控制台消息。期望的结果是显示一个图标或另一个。相反，它总是显示两个图标。那么，我做错了什么？

Answer 1

问题必须在逻辑中，因为当我简化它并执行此操作时，它可以帮助我改变真假值。

    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');和if (v) {实际上是否会在正确的时间返回您所期望的内容。

Answer 2

我认为问题是你要在项目中添加两个图标。而不是在CSS类中添加图标，即在 x-grid-center-icon 和 x-中隐藏显示并根据您的情况返回该类。

代码如下所示。

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
    }

希望这会对你有所帮助。

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

2 个答案: