Extjs checkcolumn отключен для некоторых строк, основанный на значении

Ответ 1

Вы можете скрыть флажок только внутри средства визуализации, например:

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

Ответ 2

Я искал решение этого вопроса и наткнулся на этот вопрос, но ни одно работоспособное решение нигде не отображало флажок с отключенным, а не НЕТ, как описано в другом ответе. Это было похоже на участие, но вот что я сделал (для 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;
}

Образец background-image выше указывает на это изображение, которое обычно поставляется с extjs 4.1.0 по адресу: extjs\resources\themes\images\default\form\checkbox.gif.

Расширенный класс Ext.ux.CheckColumn, чтобы события не запускались из отключенных контрольных столбцов:

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>';

    }
};

Ответ 3

Используя extjs 5, проще вернуть defaultRenderer в метод renderer для целевых флажков и '' для других.

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

Такой флажок не будет отображаться, но все события (т.е. checkchange, itemclick и т.д.) будут оставлены. Если вы также не хотите их, вы можете отключить их в beforesmth событии, например

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

Ответ 4

Я нашел решение проблемы с флажком, который нельзя щелкнуть, когда вы используете код Aniketos, вы должны убедиться, что в вашем коде столбца вы указываете xtype: 'checkcolumn, который сделает трюк

Ответ 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);
}