javascript - ExtJs Tree Grid パネルのカスタマイズ

Question

私は ExtJs 4.1 を使用しており、ExtJs-TreeGridを利用したいと考えています。ここでグリッドの例を見てください

このグリッドに次の機能を追加したい:

1. 特定のチェック ボックスを無効にする機能。
2. ノードがリーフ ノードでない場合にチェック ボックスを非表示にする機能 (詳細については、添付の画像を確認してください)

Answer 1

ここで私の答えを見てください。

特定のチェックボックスを無効にするには、renderer / processEvent メソッドを少し変更する必要があります。無効にするチェックボックスがわからないため、条件を提供する必要があるダミー関数を使用します。

Ext.define('My.tree.column.CheckColumn', {
    extend: 'Ext.ux.CheckColumn',
    alias: 'widget.mytreecheckcolumn',

    processEvent: function(type, view, cell, recordIndex, cellIndex, e, record, row) {
        if (record.isLeaf() && !record.get('disabled')) {
            return this.callParent(arguments);
        }
        else {
            return My.tree.column.CheckColumn.superclass.superclass.processEvent.apply(this, arguments);
        }
    },

    renderer : function(value, meta, record) {
        if (record.isLeaf()) {
            if (record.get('disabled')) {
                meta.tdCls += ' ' + this.disabledCls;
            }
            return this.callParent([value, meta]);
        }
        return '';
    }
});

また、デフォルトthis.disabledClsではx-item-disabled、列に目に見える変更を提供しないことに注意してください。たとえば、無効になっているチェックボックスの不透明度を変更したい場合は、独自のものを提供する必要があります。disabledCls

{
    xtype: 'mytreecheckcolumn',
    dataIndex: 'active',
    disabledCls: 'x-grid-cell-checkcolumn-disabled'
}

いくつかの CSS を使用します。

.x-grid-cell-checkcolumn-disabled {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
    opacity: 0.3;
}