2013年4月18日 星期四

Extjs

之前曾用過Extjs一段時間, 但總覺得Extjs的運作方式傾向於使用整個頁面作為一個Application的介面, 這另我很難簡單地在其他網頁上內嵌一些Extjs的Component, 而又不影響網頁本來的樣子, 最終放棄了這個使用方式.

最近突然想把Extjs的GridPanel放在一個用Bootstrap用theme的網頁上, 因為GridPanel實在做得很好, 不用有點可惜, 於是研究了一下

首先要在Html裡導入Extjs的js及css檔, 我用的是Extjs的gray theme, Extjs版本是4.2, css檔是/resources/ext-theme-gray/ext-theme-gray-all.css這個file. 導入後一看, 整個頁面的字型, 大小, 排版等都有些走樣了, 其原因主要是ext-theme-gray-all.css裡的一些CSS被應用到Extjs以外的DOM裡, 需要作以下修改:

.x-body { margin:0 }
Extjs會強制為body加上x-body這個class, 這有可能會對網頁做成影響, 而x-body只有這個margin:0的Style, 所以可以把x-body改成其他不會用的字串.

.x-border-box, .x-border * { box-sizing:borderbox;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-box-sizing:border-box}
這個規則會同樣被應用到很多DOM上, 我把.x-border *改成.x-border .x-panel *, 這樣只有x-panel內的DOM會被加上border-box, 我只需要用GridPanel, 這已經夠了, 如果以後發現其他有些Extjs的Component不正常可以再修改

另外Bootstrap的CSS會設定lineheight, 這會導致Extjs的MessageBox有些走樣, 以後需要用到再看看怎樣解決