在渲染时隐藏检查单元 - extjs 6.5.3 现代答案

【问题标题】：Hide checkcell on render - extjs 6.5.3 modern在渲染时隐藏检查单元 - extjs 6.5.3 现代
【发布时间】：2020-06-22 20:36:48
【问题描述】：

如果另一个column 的值是null，我试图隐藏checkcolumn 的checkcell。但不幸的是，根据sencha docs 只有在单元格类型为 Ext.grid.cell.Cell 的默认值时才会处理此配置。

所以renderer 配置的解决方案将不起作用。

例如：

{
        xtype: 'checkcolumn',
        dataIndex: 'isSomething',
        text: '',
        width: 30,
        menuDisabled: true,
        headerCheckbox: false,
        renderer: function(value, record) {
            var relatedValue = record.get('somethingElse');
            return relatedValue ? new Ext.grid.column.Check().renderer(value) : '';
        }
    }

有什么技巧或窍门可以做到这一点吗？

【问题讨论】：

标签： javascript extjs grid extjs6-modern

【解决方案1】：

您可以使用gridcell 并在gridcell 内部使用checkbox 来满足您的要求。

在这个FIDDLE中，我使用gridcell和checkbox创建了一个演示。我希望这将帮助/指导您实现您的要求。

代码片段

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create({

            xtype: 'grid',

            title: 'Tree Grid Demo',

            // itemConfig: {
            //     viewModel: true
            // },

            store: {

                fields: [{
                    name: 'isCheck',
                    defaultValue: true
                }],
                data: [{
                    firstname: "Michael",
                    lastname: "Scott",
                    seniority: 7,
                    department: "Management",
                    hired: "01/10/2004"
                }, {
                    firstname: "Dwight",
                    lastname: "Schrute",
                    seniority: 2,
                    department: "Sales",
                    hired: "04/01/2004"
                }, {
                    firstname: "Jim",
                    lastname: "Halpert",
                    seniority: 3,
                    department: "Sales",
                    hired: "02/22/2006"
                }, {
                    firstname: "Kevin",
                    lastname: "Malone",
                    seniority: 4,
                    department: '',
                    hired: "06/10/2007"
                }, {
                    firstname: "Angela",
                    lastname: "Martin",
                    seniority: 5,
                    department: "Accounting",
                    hired: "10/21/2008"
                }]
            },

            columns: [{
                text: 'First Name',
                dataIndex: 'firstname'
            }, {
                text: 'Last Name',
                dataIndex: 'lastname'
            }, {
                text: 'Hired Month',
                dataIndex: 'hired'
            }, {
                text: '',
                width: 30,
                renderer: function (value, record, index, cell) {
                    if (record.get('department')) {
                        cell.setTools({
                            xtype: 'checkbox',
                            checked: record.get('isCheck')
                        });
                    } else {
                        return '';
                    }
                }

                /*cell: {
                    tools: {
                        xtype: 'checkbox',
                        bind: {
                            hidden: '{!record.department}',
                            checked: '{record.isCheck}'
                        }
                    }
                }*/
            }],

            fullscreen: true
        });
    }
});

【讨论】：

感谢 N. Jadhav。我将尝试在我的代码上实现它。你的小提琴很有魅力。
可悲的是，我在 MVC 上而不是在 MVVM 上，但我会弄清楚的。
@Απόπατος 我已经更新了没有 mvvm 和 FIDDLE 的答案。请检查

【解决方案2】：

基于this answer of mine，当您将覆盖添加到代码中时，您可以使用以下内容：

Ext.util.CSS.createStyleSheet('.hideCheck .x-grid-checkcolumn::after { content: \'\' }');
Ext.create('Ext.grid.Panel', {
    columns: [{
        xtype:'checkcolumn',
        updateMeta: function(v, meta, record) {
            if(v===null) meta.tdCls = "hideCheck";
        }

Relevant fiddle

【讨论】：

这对现代也有用吗？因为我的问题是关于现代的。

【解决方案3】：

可能是使用单元格的 hidden 属性。

提示：此属性被标记为私有！

{   
    xtype: 'grid',
    store: store,

    itemConfig: {
        viewModel: true
    },

    columns: [{
        xtype: 'checkcolumn',
        text: 'Boolean',
        dataIndex: 'bool',
        width: 200,
        cell: {
            hideMode: 'visibility',
            bind: {
                hidden: '{!record.bool}'
            }
        },
    }]
}

Fiddle

【讨论】：

【解决方案4】：

                            <Renderer  Handler="if(record.data.Field !== null && record.data.Field.length &gt; 0){
                                      return true;
                                               }else{
                                      return false;
                                                } "/>

【讨论】：

您能否详细说明您的答案并解释它如何以及为什么解决了原始问题？