#navi_header|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に色をつける | サラリーマンのすらすらIT日記 -- 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で切り替えているクラス名) #pre||> .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()で返している。 #pre||> {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のタグの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スキーマ)を使ったほうが良いかも。 ** イベントの伝播(propagation)を切りたい。デフォルトのイベントハンドラを無効化したい。 - extjs 4 event handling tutorials - Stack Overflow -- http://stackoverflow.com/questions/7260134/extjs-4-event-handling-tutorials - Stop event propagation does'nt work -- http://www.sencha.com/forum/showthread.php?223404-Stop-event-propagation-does-nt-work - Stopping Event Propagation -- http://www.sencha.com/forum/showthread.php?126951-Stopping-Event-Propagation - Stop Event propagation ? -- http://www.sencha.com/forum/showthread.php?122208-Stop-Event-propagation #navi_footer|JavaScript|