JavaScript/ExtJS/ExtJS4参考メモ

JavaScript / ExtJS / ExtJS4参考メモ

id: 1296 所有者: msakamoto-sf 作成日: 2014-06-08 20:20:40
カテゴリ: ExtJS JavaScript

[ Prev ]
[ Next ]
[ JavaScript ]

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

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

Ext.defineを利用したクラス生成：メンバ定義を後から行う – Ext JS 4 - code:x
- http://code.xenophy.com/?p=1224
Mixinを利用した多重継承クラスの作成とエイリアス – Ext JS 4 - code:x
- http://code.xenophy.com/?p=1231
Ext.isクラスを利用した判定 - code:x
- http://code.xenophy.com/?p=1304
Ext JS 4.0/4.1 MVCアプリケーション構造の理解 – 株式会社ゼノフィ社内勉強会資料 - code:x
- http://code.xenophy.com/?p=1686
Ext JS 4.0/4.1 MVCアプリケーション構造の理解II – 株式会社ゼノフィ社内勉強会資料 - code:x
- http://code.xenophy.com/?p=1747

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

How to display a super-long field in an ExtJS GridPanel - Stack Overflow
- http://stackoverflow.com/questions/10027075/how-to-display-a-super-long-field-in-an-extjs-gridpanel
css・white-space・折り返し・luckytime
- http://www7b.biglobe.ne.jp/~happy3q/hpmemo/st/st-07g.html
Exception With Butterfly Wings: Ext JS 4: How to wrap text in grid headers or cells
- http://forketyfork.blogspot.jp/2012/04/ext-js-4-how-to-wrap-text-in-grid.html
How to enable word-wrap in Grid cells?
- http://www.sencha.com/forum/showthread.php?7233-How-to-enable-word-wrap-in-Grid-cells
How can provide word wrap feature for the content inside a grid cell?
- http://www.sencha.com/forum/showthread.php?77787-How-can-provide-word-wrap-feature-for-the-content-inside-a-grid-cell
long text in grid cell
- http://www.sencha.com/forum/showthread.php?125219-long-text-in-grid-cell
ExtJs 4 - How to wrap a column header text to fit in the column width?
- http://www.sencha.com/forum/showthread.php?146615-ExtJs-4-How-to-wrap-a-column-header-text-to-fit-in-the-column-width
extjs grid column text wrap around/auto expand
- http://www.sencha.com/forum/showthread.php?205554-extjs-grid-column-text-wrap-around-auto-expand
ExtJsのグリッドで、セルのwhite-spaceをnormalにする方法 - konisimple log
- http://d.hatena.ne.jp/konisimple/20100630/1277908468
extjs - Word-wrap grid cells in Ext JS - Stack Overflow
- http://stackoverflow.com/questions/2106104/word-wrap-grid-cells-in-ext-js

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

Ext JS－GridのRowに色をつける | サラリーマンのすらすらＩＴ日記
- http://sookibizviz.blog81.fc2.com/blog-entry-485.html
Grid row color with getRowClass is not working
- http://www.sencha.com/forum/showthread.php?253998-Grid-row-color-with-getRowClass-is-not-working
Cannot apply getRowClass in GridPanel in extjs4
- http://www.sencha.com/forum/showthread.php?147073
css - changing background colors of grid rows dynamically in extjs 4.2.2 - Stack Overflow
- http://stackoverflow.com/questions/21826523/changing-background-colors-of-grid-rows-dynamically-in-extjs-4-2-2

注意：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やクリック時も変更したい

css - ExtJs Grid row hover color and high - Stack Overflow
- http://stackoverflow.com/questions/22486042/extjs-grid-row-hover-color-and-high

自力で解析した結果：(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で、行のデータによってアイコン表示/非表示を切り替えたい

The extjs4 xtype ‘actioncolumn’ in a nutshell | | Learn Some ThingsLearn Some Things
- http://www.learnsomethings.com/2011/09/25/the-new-extjs4-xtype-actioncolumn-in-a-nutshell/
extjs4 - How to hide action column in extjs 4 - Stack Overflow
- http://stackoverflow.com/questions/9574417/how-to-hide-action-column-in-extjs-4
Hide icon in action column for particular row
- http://www.sencha.com/forum/showthread.php?113590-Hide-icon-in-action-column-for-particular-row

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相当を実現したい

Colspan for grid header column in ext js 4.0
- http://www.sencha.com/forum/showthread.php?244951-Colspan-for-grid-header-column-in-ext-js-4.0
- http://www.sencha.com/forum/showthread.php?244951-Colspan-for-grid-header-column-in-ext-js-4.0/page2
http://jsfiddle.net/afXb4/1/
- →そのままイケた。.x-group-sub-header そのままでOK.

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

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

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

Adding icon in grid column's header
- http://www.sencha.com/forum/showthread.php?159005-Adding-icon-in-grid-column-s-header
- → imgタグで直接描画する他無さそう。画像URLの位置調整がナーバスなので、src="data:image/png;base64,..." 方式(dataスキーマ)を使ったほうが良いかも。