Ha olyan komponenst gyártunk, amelyhez legfeljebb 2 vagy 3 CSS szabály tartozik, akkor joggal megfordul az ember fejében, hogy ehhez felesleges külön .js és külön .css fájl. Azt a néhány szabályt dinamikusan is hozzá lehetne adni a rendszerhez. Teljesítmény csökkenésről szerintem értelmetlen beszélni, ellenben átláthatóbbá válna a komponensünk, ha a hozzá tartozó részek egy helyen lennénk. (természetesen a különválasztást továbbra is megtartva). És nem utolsó sorban, ha a szerver oldali keretrendszer nem kezeli külön, akkor oldalletöltésnél kevesebb kérés menne a szerverhez.
A triviális megoldás az lenne, hogy:
Ext.util.CSS.createStyleSheet(style);
Ám ezzel az a probléma, hogy nem definiálható CSS-sel felül. (és most IE miatt tekintsünk el az !important-tól, vagy képzeljünk oda olyan CSS szabályokat, amelyek használnak !important-ot)
Tehát, olyasmit szeretnénk, mintha a HEAD tag végén lenne néhány szabály, amelyek felüldefiniálhatnák a JS-sel készített szabályokat.
body {
color: red;
}
--></style>
Ha visszatérünk az eredeti problémához, hogy két fájlunk van, és a CSS fájlt közvetlenül az ext-all.css után illesztenénk be, akkor adja magát a második verzió:
tag: 'style',
type: 'text/css',
html: style
});
Szó szerint a következőt csináljuk: megkeressük az ext-all.css –t és utána betesszük az új stíluslapot a DOM-ba. Ötletnek jó volt, de IE alatt nem történik semmi.
Így akkor, a megoldást végül az adta, hogy egy már létező stíluslaphoz adjuk hozzá az új szabályokat:
if (sheet.href && sheet.href.match(/ext-all.css/)) {
if (Ext.isIE) {
sheet.cssText += style;
} else {
sheet.insertRule(style, sheet.cssRules.length);
}
}
});
Megnézheted itt, meg itt illetve itt a különböző verziók viselkedését.
