値に基づいて一部の行でExtjs checkcolumnが無効になる

Question

私はcheckcolumnでグリッドを持っています。 dataIndexは、たとえば 'checked'です。

いくつかの行のチェックボックスを無効にするか非表示にしたいとします。たとえば、別の値 'can_be_checked'はfalse/emptyです。

レンダラーは既に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

他の回答に記載されているチェックボックスはありません。それは一種の関与していたが、ここ（4.1.0用）私がやったことだ：

1. 私は がExt.ux.CheckColumnで使用されていることExtJSの\例\ UX \ CSS \ CheckHeader.cssファイルがないことがわかりました私は をext-all.css（無効なチェックボックス クラスを含む）に含まれている標準チェックボックススタイリング のように変更する必要がありました。

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

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

コードは以下のとおりです。

.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で正常に船この画像にポイント以上の背景画像のURL：CheckHeader.css修正

ExtJSの\リソース\テーマ画像\を\デフォルト\フォーム\ checkbox.gif。

拡張Ext.ux.CheckColumnクラスのイベントが無効になっcheckcolumnsからクビにしないように：私は解決策を見つけた

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

：私自身のロジックに従って、無効なクラスを適用するためのカスタムレンダラと

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

}); 

実装Aniketosコードを使用するときにチェックボックスの問題をクリックできない場合は、xtype： 'checkcolumn'を指定した列のコードで、そのトリックを確実に行う必要があります。

Answer 4

私もこの問題に遭遇しました。それをさらに進めるには、チェックボックスにツールチップを表示する必要がありました。ここでは、他の人のために、ターゲットのチェックボックスと「」のためのレンダラー方法でdefaultRendererを返すことが容易であるExtJSの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); 
} 

Answer 5

です。

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