針對extjs container部分,有時要設定樣式
但是介面上有很多container,雖說用style可以設定,但是乙個個設定後期維護難以維護
故引用scss檔案
scss的檔名要和js對應
,這樣的好處就是不用額外宣告引入scss檔案了
container.js是最外層的容器
類似這樣的結構
1
2
3
4
《子container>
《其他子控制項》
如果 子container裡有很多控制項,有同樣的樣式
我們就可以在
container.scss裡進行宣告乙個類
然後,那些子控制項 使用cls:'樣式類名'即可
****************************************====
話不多說,上**
for example
1
2
3
4
5
6
7
8
9
10
11
12
13
items:[
,
width:
'90%'
,
}
]
這個子控制項裡有margin、height、background等樣式,
而其他 同樣在container.js(這只是個檔名,隨便定義)容器內的 xtype:container,也有這些樣式
那可以在最外層的容器的scss檔案即container.scss 定義 (具體語法參照 搜尋 sass語法或scss語法)
1
2
3
4
5
6
.panel-container
然後 使用cls
1
2
3
4
5
6
7
8
9
10
items:[
,
width:
'90%'
,
}
]
CSS外部樣式的兩種引入方式
兩種方法 style.css rel stylesheet type text css 區別 1.從屬關係區別 link是html提供的標籤,不僅可以載入css檔案,還可以定義其它屬性 import是css提供的語法規則,只有匯入樣式表的作用。2.載入順序區別 載入頁面時,link標籤引入的css會...
CSS引入方式 內部樣式表 行內樣式表 外部樣式表
內部樣式表就是將css在寫html頁面內部。是將所有的css 抽取出來,單獨放到乙個標籤中。例如 divstyle 標籤理論上可以放在文件的任何地方,但是一般會放在文件的標籤中。通過此種方式,可以方便的控制整個頁面中的元素樣式設定,結構清晰,但是並沒有實現結構與樣式的完全分離。行內樣式表是在元素標籤...
引入外部樣式表的方法lLink和 import
引入外部樣式表的方法link與 inport的 區別 import link 從屬關係區別 是css提供的語法規則,只有帶入樣式表的作用 link是html提供的標籤,不僅可以載入css檔案,還可以定義rss,rel鏈結屬性等 載入順序區別 載入頁面時,import引入的樣式表在頁面載入完畢後被載入...