Вопрос по checkbox, extjs, extjs4, datagrid – Extjs checkcolumn отключить для некоторых строк, в зависимости от значения

15

У меня есть сетка, с контрольной колонкой. Это dataIndex, например, «проверено».

Я хочу отключить или скрыть флажки для некоторых строк, где другое значение, "a_ can_be_checked" например, является ложным / пустым.

Рендерер уже определен в контрольном столбце, возня с ним прерывает генерацию флажка.

Как мне это сделать?

Ваш Ответ

4   ответа
12

Я искал решение для этого и наткнулся на этот вопрос, но нигде не было работоспособного решения, чтобы показать отключенный флажок вместо флажка НЕТ, как описано в другом ответе. Это было как-то связано, но вот что я сделал (для 4.1.0):

I found that the extjs\examples\ux\css\CheckHeader.css file that is used by Ext.ux.CheckColumn does not have a disabled class, so I had to modify it to be more like the standard checkbox styling contained in ext-all.css (which does include a disabled checkbox class).

I had to extend Ext.ux.CheckColumn to prevent events being fired from disabled checkboxes.

Finally, I had to provide my own renderer to apply the disabled class according to my logic.

Код выглядит следующим образом.

Modified 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 по адресу:extjs\resources\themes\images\default\form\checkbox.gif.

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

The extended Ext.ux.CheckColumn class so that events will not get fired from disabled 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);
        }
    },

});

Implementation with custom renderer to apply disabled class according to my own logic:

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

    }
};
Я добавил это еще {cls.push (cssPrefix + "x-grid-checkheader"); } и это сработало для меня. Спасибо, это действительно мне очень помогло: P
Это прекрасно работает, чтобы отключить, но 1 проблема, которую я получаю, т.е. если она включена и не проверена, и я проверил ее, стиль остается тем же, и его не проверяют.
25

column.renderer = function(val, m, rec) {
    if (rec.get('can_be_checked') == 'FALSE'))
        return '';
    else
        return (new Ext.ux.CheckColumn()).renderer(val);
};
Но рендер уже определен в контрольном столбце. Я не хочу терять или повторять этот фрагмент кода, он может быть изменен в более новых версиях extjs.docs.sencha.com/ext-js/4-0/source/… Nameless
+1 - искал способ безопасно «рендерить» флажок без получения «истина» или «ложь»; в поле. Спасибо.
Я редактировал это. Попробуйте решение.
он работает, и некоторые записи не имеют CheckColumn, как предполагается. однако я не могу редактировать эти столбцы. Есть флажок, но я не могу изменить его значение. другой столбец, полный контрольных столбцов, может быть отредактирован. что не так с этим? это проблема инициализации?
используя этот ответ, Ext.ux.CheckColumn () будет создаваться каждый раз, когда вы визуализируете контрольный столбец, но не перерисовываете. Чтобы избежать этого, нам нужно вернуть defaultRenderer. Я разместил свой ответ ниже.
1

Я обнаружил, что решение проблемы с флажком не активируется при вводе кода Aniketos, вы должны убедиться, что в своем коде столбца вы указали xtype: & check; столбец проверки, который сделает свое дело

2

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

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();
},
Это должен быть правильный ответ, так как принятый может привести к проблемам с производительностью, так как создаются CheckColumns, которые никогда не уничтожаются, увеличивая размер Ext.ComponentManager и DOM для увеличения.

Похожие вопросы