ExtJS控件樣式的修改(示例無邊框panel)

這裏說的修改不是去改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之類的屬性就行了。


發佈了118 篇原創文章 · 獲贊 36 · 訪問量 76萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章