home Glamenv-Septzen(ぐらめぬ・ぜぷつぇん)(archive)

JavaScript/ExtJS/ExtJS4参考メモ

作成日: 2014-06-08 20:20:40   /   last updated at: 2014-08-24 21:49:10
カテゴリ: ExtJS JavaScript 

ExtJS4系での参考リンクのメモ。

日本代理店＆Sencha本社から認定されたトレーニングを展開中の株式会社ゼノフィ様の技術Blogより、ExtJS4のクラスやMVCアーキテクチャについての解説

Gridのセル内で長い文字列を折り返す話題

GridのRowの背景色を、データの内容に応じて変更したい

注意：4.1 まではgetRowClass()で返すCSSクラス名単体でCSSで指定すればよかった。 

.x-mygrid-true { background-color: green !important; }

→ 4.2 になると .x-grid-cell をあわせる必要があるようだ。 

.x-mygrid-true .x-grid-cell {
    background-color: green !important;
}

Gridで、通常のRowの背景色だけでなく、mouse hoverやクリック時も変更したい

自力で解析した結果：(x-mygrid-true/falseは、booleanカラムに応じてRowのtrのCSSで切り替えているクラス名) 

.x-mygrid-true.x-grid-row-over .x-grid-cell {
    background-color: red !important;
}

.x-mygrid-true.x-grid-row-focused .x-grid-cell {
    background-color: green !important;
}

.x-mygrid-true .x-grid-cell {
    background-color: yellow !important;
}

.x-mygrid-false.x-grid-row-over .x-grid-cell {
    background-color: gray !important;
}

.x-mygrid-false.x-grid-row-focused .x-grid-cell {
    background-color: dimgray !important;
}

.x-mygrid-false .x-grid-cell {
    background-color: black !important;
}

ちょっとクセがあって、 

.x-mygrid-false
.x-grid-row-focused

はtrタグのclassに同時に設定され、".x-grid-cell"はその中のtdタグのclassに設定される。 

.x-mygrid-false .x-grid-row-focused .x-grid-cell {

だと駄目で、同時、というのを上手く指定するには空白分割ではなく、連結する必要があった。 

.x-mygrid-false.x-grid-row-focused .x-grid-cell {

Gridのactioncolumnで、行のデータによってアイコン表示/非表示を切り替えたい

getClass()のカスタマイズで実現できる。条件分岐で表示する方にする場合は、通常ならばiconClsで設定するクラス名を返す必要がある。表示しない場合だけ
"x-hide-display"して、表示する場合は何もしてないと、結局何も表示されずに終わる。

例：本来はiconClsで設定するアイコン表示用クラス名を、valueがtrueの場合にgetClass()で返している。 

{text: 'warn', xtype: 'actioncolumn', dataIndex: 'booleanField', items: [{
  getClass: function(value, metaData, record) {
      if (value) {
        return 'fam3-16px-database_delete';
      } else {
        return 'x-hide-display';
      }
  }
}]},

Gridのネストしたカラムの、ヘッダーだけを消したい。つまるところ、tableの<th>タグのcolspan相当を実現したい

.hide-sub-headers .x-group-sub-header {
    display: none;
}

ただし、これをすると、groupしたヘッダ自体ではfilterやソートが使えなくなるので、「カラム4, 5, 6 をまとめる、ただしソート&フィルタはカラム5の値を使う」ような器用な機能まではそのままでは実現できない。

Gridのヘッダーにアイコンを表示したい

イベントの伝播(propagation)を切りたい。デフォルトのイベントハンドラを無効化したい。

original url: https://www.glamenv-septzen.net/view/1296