Question

我有一个带有checkcolumn的网格。例如，dataIndex是'checked'。

我想禁用或隐藏某些行的复选框，其中另一个值'can_be_checked'例如为false / empty。

Renderer已经在checkcolumn中定义，搞乱它会破坏复选框的生成。

我该怎么做？

Answer 1

您可以隐藏渲染器内的复选框，例如：

column.renderer = function(val, m, rec) {
    if (rec.get('can_be_checked') == 'FALSE'))
        return '';
    else
        return (new Ext.ux.CheckColumn()).renderer(val);
};

Answer 2

我一直在寻找这个问题的解决方案并且遇到了这个问题，但是在任何地方都没有可行的解决方案来显示禁用复选框而不是其他答案所涵盖的NO复选框。它有点牵扯，但这就是我所做的（4.1.0）：

我发现 extjs \ examples \ ux \ css \ CheckHeader.css 文件由Ext.ux.CheckColumn使用没有禁用类，所以我不得不修改它更像标准的复选框样式包含在 ext-all.css 中（包括禁用的复选框）类）。
我必须延长Ext.ux.CheckColumn以防止事件发生从禁用复选框中解雇。
最后，我必须提供自己的渲染器来应用禁用根据我的逻辑分类。

代码如下。

修改后的CheckHeader.css：

.x-grid-cell-checkcolumn .x-grid-cell-inner {
    padding-top: 4px;
    padding-bottom: 2px;
    line-height: 14px;
}
.x-grid-with-row-lines .x-grid-cell-checkcolumn .x-grid-cell-inner {
    padding-top: 3px;
}

.x-grid-checkheader {
    width: 13px;
    height: 13px;
    background-image: url('../images/checkbox.gif');
    background-repeat: no-repeat;
    background-color: transparent;
    overflow: hidden;
    padding: 0;
    border: 0;
    display: block;
    margin: auto;
}

.x-grid-checkheader-checked {
    background-position: 0 -13px;
}

.x-grid-checkheader-disabled {
    background-position: -39px 0;
}

.x-grid-checkheader-checked-disabled {
    background-position: -39px -13px;
}

.x-grid-checkheader-editor .x-form-cb-wrap {
    text-align: center;
}

上面的背景图片网址指向此图片，该图片通常附带extjs 4.1.0 at： extjs \ resources \ themes \ images \ default \ form \ checkbox.gif 。

$extjs\resources\themes\images\default\form\checkbox.gif$

扩展的Ext.ux.CheckColumn类，以便不会从禁用的checkcolumns中触发事件：

Ext.define('MyApp.ux.DisableCheckColumn', {
    extend: 'Ext.ux.CheckColumn',
    alias: 'widget.disablecheckcolumn',

    /**
     * Only process events for checkboxes that do not have a "disabled" class
     */
    processEvent: function(type, view, cell, recordIndex, cellIndex, e) {
        var enabled = Ext.query('[class*=disabled]', cell).length == 0,
            me = this;

        if (enabled) {
            me.callParent(arguments);
        }
    },

});

使用自定义渲染器实现根据我自己的逻辑应用已禁用的类：

column = {
    xtype: 'disablecheckcolumn',
    text: myText,
    dataIndex: myDataIndex,
    renderer: function(value, meta, record) {
        var cssPrefix = Ext.baseCSSPrefix,
            cls = [cssPrefix + 'grid-checkheader'],
            disabled = // logic to disable checkbox e.g.: !can_be_checked

        if (value && disabled) {
            cls.push(cssPrefix + 'grid-checkheader-checked-disabled');
        } else if (value) {
            cls.push(cssPrefix + 'grid-checkheader-checked');
        } else if (disabled) {
            cls.push(cssPrefix + 'grid-checkheader-disabled');
        }

        return '<div class="' + cls.join(' ') + '">&#160;</div>';

    }
};

Answer 3

使用extjs 5可以更容易地在渲染器方法中为目标复选框返回defaultRenderer，并且＆＃39;＆＃39;对于其他人。

renderer: function (value, metaData, record) {
    return (record.isLeaf()) ? '' : this.defaultRenderer(value, metaData);
}

这样不会渲染复选框本身，但所有事件（即checkchange，itemclick等）都将保留。如果您不想要它们，您可以在事件前事件中禁用它们，例如

onBeforeCheckRequestsChange: function(me, rowIndex, checked, eOpts) {
    var row = me.getView().getRow(rowIndex),
        record = me.getView().getRecord(row);
    return !record.isLeaf();
},

Answer 4

我在使用Aniketos代码时找到了复选框无法点击的问题的解决方案，你必须确保在你的列代码中指定xtype：＆＃39; checkcolumn，这样就可以了解

Answer 5

我也遇到了这个问题并且更进一步，我需要在复选框上显示工具提示。这是我提出的解决方案，它似乎是对现有checkcolumn小部件的侵入性最小......

renderer: function (value, metaData, record) {
    // Add a tooltip to the cell
    metaData.tdAttr = (record.get("someColumn") === "") ? 'data-qtip="A tip here"' : 'data-qtip="Alternate tip here"';

    if (record.get("someColumn") === "") {
        metaData.tdClass += " " + this.disabledCls;
    }

    // Using the built in defaultRenderer of the checkcolumn
    return this.defaultRenderer(value, metaData);
}

根据值，Extjs checkcolumn禁用某些行

5 个答案: