Extjs項目對富客戶端開發提供了強有力的支持，甚至改變了前端的開發方式，使得開發變得更加趨向於“面向組件”。對界面的美化而言，也是根本性的改變。普通的網頁美工面對extjs項目根本無法下手，需要腳本編寫人員配合美工一起來完成工作(另外,spketIDE提供的樣式修改工具也不理想)。
修改extjs的既有樣式：
1.覆蓋extjs的樣式表
這里說的修改不是去改extjs本身的ext-all.css, 也不建議這樣去做，這樣會影響所有頁面；而應該是用自定義的css去覆蓋某些控件的默認樣式。大部分控件都有類似cls、style的屬性供開發者去定制樣式；但具體要設置樣式的哪些屬性才能達到特定效果，api文檔就沒說了。比如要構建一個不帶邊框的panel，設置border、bodyborder屬性是不行的，還是會有1px的邊框。網上去搜就更難了，准備好萬能的firebug，自己摸索。
打開firebug，切換到html選項卡，找到panel對應的div節點，如下圖：
panel控件的基准樣式是x-panel，其中的border-style：solid就是設置邊框的，將其覆蓋為border-style:none就成無邊框的了。
具體方法：定義無邊框的樣式.my-panel-no-border{border-style:none}，然后定義panel時設置baseCls屬性：
var mypanel = Ext.Panel({
baseCls:'my-panel-no-border',
//其他屬性
});
沒文檔，搜又不好搜，只能用這種最土的方法了。類似的還有個需求，checkboxgroup里面的checkbox以列模式擺放時，各個checkbox是對齊的；現在需要
對checkbox縮進擺放，體現出一定的層次關系，就像樹形列表一樣。打開firebug，找checkbox的樣式，加上什么padding之類的屬性就行了。
2.采用js代碼動態修改，例如： Ext.get(this.header.query('ul')[0]).applyStyles('background-color:aqua');
3.大部分控件都有類似cls、style的屬性供開發者去定制樣式，例如：bodyStyle: "background-color:#dfe8f6; "不過不推薦這樣設置背景色，除非不准備更換主題，常做的方法是把panel背景設為透明background:transparent;這樣就不妨礙更換主題了
Extjs項目推薦使用第1種方式進行自定義樣式。顯而易見的是第2種方式是有很多缺點的：
1.腳本被解釋執行后才可以生效，影響腳本的整體響應速度。
2.很難維護。在一個數千行的腳本中維護這些“樣式代碼”恐怕不是一件易事，更何況，代碼一旦交給其他人維護，更是大海撈針。
3.如果采用addClass之類方式還可能會引起腳本出錯。extjs源碼中大量使用樣式名稱作為選擇器，一旦就某個dom增加了其他class,很可能造成這些代碼失效。
不過，第2種方法有時候也不得不作為一種“暴力手段”而發揮作用。
所以要采用覆蓋extjs樣式名稱的方法，將這些覆蓋掉的樣式名稱集中在一個樣式表文件中。
/*tab文字居中*/ span.x-tab-strip-text{ text-align:center; } /*所有組件body的基礎樣式*/ .x-panel-body , .x-tab-panel-body{ /*background-color: transparent;*/ /*這個樣式使得panel透明了，這樣就可以看到背景圖或顏色，否則框架會將白色作為背景色*/ } /*tab的樣式，tab切換耳朵右邊的藍色部分*/ ul.x-tab-strip-top{ background-image: url("../images/table_titlebg.gif"); background-repeat:repeat-x; }
其中的樣式名稱都是在extjs里面最先定義的，然后在這個文件中再覆蓋之(大部分情況是覆蓋這個樣式的一部分定義而不是全部)。找到某個ui組件的樣式需要熟練使用firebug才可以，有些時候要一層層div的尋找，需要一些耐心和技巧。
1 .x-panel-body,.x-tab-panel-body
這個樣式是panel的body部分，可參考ext-all.css或firebug來了解其原來的定義。在開發中，我們需要自定義panel的背景色，比如有些情況下希望panel是透明的，這樣只需如下定義即可
.x-panel-body , .x-tab-panel-body{
background-color: transparent;
}
2 .x-grid3
同樣的，grid組件的背景色是這里設置的，如果不設置，默認是白色的
3 .x-grid3-hd-row td 表頭的樣式
4 .x-grid3-row 表格中每一行的樣式
5 .x-grid3-row-alt 表格間隔色，框架會在在某些行上比如奇數行加上這個樣式
6 Tab頭文字居中
span.x-tab-strip-text{
text-align:center;
}
… …
Extjs的樣式比較多也比較碎，需要一段時間來找到並覆蓋，建議在開發中抽出一段時間來專門進行這個工作，這對代碼的維護和移植都是很有好處的。