web-dev-qa-db-ja.com

Extjs checkcolumnは、値に基づいて、一部の行で無効になります

チェックカラム付きのグリッドがあります。たとえば、dataIndexは「チェック済み」です。

一部の行のチェックボックスを無効または非表示にしたいのですが、別の値、たとえば「can_be_checked」はfalse /空です。

レンダラーはすでにcheckcolumnで定義されており、それをいじるとチェックボックスの生成が中断されます。

どうすればいいですか？

extjsdatagridcheckboxextjs4
16
Nameless

次に、レンダラーのすぐ内側にあるチェックボックスを非表示にすることができます。

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

私はこれに対する解決策を探していて、この質問に出くわしましたが、他の回答でカバーされているチェックボックスなしではなく、無効なチェックボックスを表示するための実行可能な解決策はどこにもありません。それはちょっと複雑でしたが、これが私がしたことです（4.1.0の場合）：

  1. Ext.ux.CheckColumnによって使用されるextjs\examples\ux\css\CheckHeader.cssファイルに無効なクラスがないことがわかりました。そのため、ext-all.css（無効なチェックボックスクラスが含まれています）に含まれている標準のチェックボックススタイルのように変更する必要がありました。

  2. 無効なチェックボックスからイベントが発生しないように、Ext.ux.CheckColumnを拡張する必要がありました。

  3. 最後に、ロジックに従って無効なクラスを適用するために、独自のレンダラーを提供する必要がありました。

コードは次のとおりです。

変更された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-imageurlは、通常extjs 4.1.0に付属しているこの画像を指しています：extjs\resources\themes\images\default\form\checkbox.gif。

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

    }
};
12
vanderwyst

Extjs 5を使用すると、ターゲットチェックボックスの場合はレンダラーメソッドでdefaultRendererを返し、その他のチェックボックスの場合は ''を返す方が簡単です。

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();
},
2
fen1ksss

また、この問題が発生しました。さらに一歩進めるには、チェックボックスの上にツールチップを表示する必要がありました。これが私が思いついた解決策であり、既存のチェックカラムウィジェットで最も侵襲性が低いようです...

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);
}
1
Allen Underwood

Aniketosコードを使用するときにチェックボックスをクリックできないという問題の解決策を見つけました。列のコードでxtypeを指定する必要があります： 'checkcolumn、それはトリックを行います

1
Carlos H