私はExtJsグリッドを持っていますが、その第1行は一時行として使用されています。グリッドでは、特定の列は編集できません。最初の行(一時的)の編集不可能なセルを編集不可能として表示したい。その一時的な行が編集不可能なように、これらの細胞を示すために、どのように任意の値を持っていないので(という灰色のようなセルのみ)画像で選択したようExtjsの行のグリッドセルのCSSを変更する方法4.1.3
をグレー表示として、私はそれらのセルを表示したいです
私はExtJsグリッドを持っていますが、その第1行は一時行として使用されています。グリッドでは、特定の列は編集できません。最初の行(一時的)の編集不可能なセルを編集不可能として表示したい。その一時的な行が編集不可能なように、これらの細胞を示すために、どのように任意の値を持っていないので(という灰色のようなセルのみ)画像で選択したようExtjsの行のグリッドセルのCSSを変更する方法4.1.3
をグレー表示として、私はそれらのセルを表示したいです
明らかに、これらの要素にCSSルールを適用することで実現できます。列をターゲットに設定するには、tdCls列の設定を使用します。
この列の表のセルに適用するCSSクラス名。
通常getRowClass方法が使用されているが、私はそれがグリッドのすべての行に呼び出されますので、これは、過剰になると思い、この特定の場合、この中で、私たちはただのクラスを必要とし、行をターゲットに最初の行だから私は行く方法は、ビューのviewreadyイベントの最初の行にクラスを追加することだと思います。
解決策は次のとおりです。必要な列のためのtdCls
を追加します。
{
text: 'Serial',
dataIndex: 'serial',
tdCls: 'serial-column',
width: 200
}
は、最初の行にクラスを追加します。
viewConfig: {
listeners: {
viewready: function (view) {
Ext.get(view.getNode(0)).addCls('first-row');
}
}
}
は、それからちょうどCSSを経由して必要なスタイルを適用します。ここでは
.first-row .serial-column {
background: #ccc;
}
での作業ですフィドル:https://fiddle.sencha.com/#view/editor&fiddle/26aq
PS これは、ExtJSグリッドセルのスタイリングについての実際のチュートリアルです。http://skirtlesden.com/articles/styling-extjs-grid-cells