ExtJS控制項樣式的修改

2021-06-08 15:22:18 字數 760 閱讀 5233

這裡說的修改不是去改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,然後定義panel時設定basecls屬性:

var mypanel = ext.panel({

basecls:'my-panel-no-border',

//其他屬性

沒文件,搜又不好搜,只能用這種最土的方法了。類似的還有個需求,checkboxgroup裡面的checkbox以列模式擺放時,各個checkbox是對齊的;現在需要

對checkbox縮排擺放,體現出一定的層次關係,就像樹形列表一樣。開啟firebug,找checkbox的樣式,加上什麼padding之類的屬性就行了。

關於extjs控制項的id和樣式的研究

extjs中包含了大量的控制項,我們用的時候會發現這些控制項的id和樣式太難把握了,粗略看上去好像沒有什麼規律性,這也讓我們為使用控制項的應用程式寫自動化測試帶來了難題。其實,這些控制項的id和樣式是有規律的。比方說 我們最簡單的面板控制項,他的樣式和id可能如下所示 其實這個控制項id和樣式是非常...

WPF動態修改控制項樣式

首先看一下視窗的xaml文件 window x class xmlns xmlns x xmlns d xmlns mc xmlns local mc ignorable d title mainwindow height 450 width 800 windowstartuplocation ce...

ExtJS 的樣式控制

basecls 所寫的 css將會應用到自己的元件上。注意要和 bodystyle 區別,大家可以自己試試,區別很明顯 bodystyle 所寫的css 將會應用到自己的內容上 cls 將應用到自己的 element iconcls 將定義好的 css應用到自己的前邊。ctcls 應用於自己的 co...