ExtJS blog pont hu

A legeslegelső JavaScript próbálkozásom - legalább tíz éve - egy képnél az egér események lekezelése volt. Egérrel a kép felé mentünk és megváltozott a kép. Nagyon örültem, amikor sikerült. :)  Rögtön a második script ezután az volt, hogy betöltöttem ezeket a képeket a memóriába, hogy ne csak a mouseover eseménykor induljon el a letöltés.

Nosztalgikus hangulatba kerültem, amikor azzal a feladattal szembesültem, hogy az egyik alkalmazásban lassú net esetén egy-egy kép zavaróan lassúan jön le, és ezért jó lenne az egyik CSS fájlban lévő képeket előre letölteni.

Az alap script-et még régebben az Ajaxian-on láttam, de két okból át kellett alakítani. 1. a JQuery-t lecseréltem Ext-base -re. 2. nekem csak egyetlen egy CSS fájlban lévő képekre volt szükségem, a teljes ext-all.css tartalmára nem.

Egy ablak vagy egy panel elemhez nem csak a szokványos bezár, összecsuk stb. eszköz gombokat lehet hozzárendelni, hanem még egy tucat másikat. Kérdőjelet, fogaskereket és még ki tudja miket... már sokadszorra fordult velem elő, hogy a "ki tudja mik"-en gondolkodtam, majd minden alkalommal eldöntöttem, hogy ezeket valahol összegyűjtöm.

A doksiban fel van sorolva a lista. Ám mégiscsak többet nyújt, ha az ember látja is maga előtt ezeket.
Az, hogy miket használhatunk, legegyszerűbben úgy nézhetjük meg, hogy a css szabályok között kikeressük azokat, melyek .x-tool-akármi alakúak.

ExtJS-ben az ablakok alapértelmezetten 9000-es z-index-szel jelennek meg. (Ext.WindowMgr.zseed) Egészen addig nem is volt ez érdekes számomra, míg nem akartam a vonalzóval (MeasureIt) megméri valaminek a szélességét. Nem tudom, hogy honnan vehették az alapértelmezett z-index-et, de jelen helyzetben kevésnek bizonyul a 4721-es érték. Megoldás lehetne a Window Maneger értékét módosítani, de egyszerűbbnek tűnik a vonalzót "magasabbra" vinni:

Szinte csak új típusú komponensek készítésekor foglalkozok CSS szabályok írásával, máskülönben mindig az ExtJS alapértelmezett elemeit használom. Meg is lepődtem, amikor egy olyan feladat előtt álltam, ami egy az egyben CSS-sel megoldható, mégpedig gomboknál kellett az ikont jobb oldalra helyezni. Bár úgy is mondhatnám, hogy meglepődtem, amiért ezt nekem kellett megírni, és nem volt benne az ExtJS-ben alapértelmezetten. :)

Tehát a CSS kiegészítés:

Sosem értettem, hogy miért kell a icon és az iconCls-t így túlbonyolítani, bőven elég lenne csak az egyik (az icon), ám mégis néhol mindkettő van, néhol meg csak az iconCls.

Az ötlet, hogy készítsek egy singleton osztályt ennek a dilemmának a feloldására nem saját, ám a több megoldás közül egyik sem tetszett, így hát íme a száz plusz egyedik leegyszerűsített Ext.ux.iconCls: