2017-09-07 8 views
0

私はExtJsグリッドを持っていますが、その第1行は一時行として使用されています。グリッドでは、特定の列は編集できません。最初の行(一時的)の編集不可能なセルを編集不可能として表示したい。その一時的な行が編集不可能なように、これらの細胞を示すために、どのように任意の値を持っていないので(という灰色のようなセルのみ)画像で選択したようExtjsの行のグリッドセルのCSSを変更する方法4.1.3

をグレー表示として、私はそれらのセルを表示したいです enter image description here

答えて

1

明らかに、これらの要素に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

関連する問題