Az ExtJs előnyeit leginkább akkor látja meg az ember, ha egy feladatot a körülmények miatt más eszközökkel kell megoldani, és tudja, hogy mindez Ext-ben csupán néhány sor lenne.
E gondolat nemrég az elemek pozicionálása okán jutottak eszembe.
Például hozzunk létre egy 300x300-as piros négyzetet és tegyük a képernyő közepére:
style: 'width: 300px;height:300px;background-color:red;'
});
el.alignTo(Ext.getBody(), 'c-c');
A második utasításhoz némi magyarázat:
Az újonnan létrehozott elemet helyezzük el a document.body-hoz képest úgy, hogy a body közepe illeszkedjen az elem közepéhez.
Ha azt szeretnénk, hogy a böngésző átméretezése után is legyen középen, akkor az alignTo függvény helyett használjuk az anchorTo függvényt.
Vegyünk egy másik példát, hozzunk létre két 100x100-as négyzetet, és tegyük úgy a képernyő közepére őket, hogy egymás mellett helyezkedjenek el és köztük legyen 10 pixel távolság.
style: 'width: 100px;height:100px;background-color:green;'
}).anchorTo(Ext.getBody(), 'l-c', [5, 0]);
Ext.getBody().createChild({
style: 'width: 100px;height:100px;background-color:blue;'
}).anchorTo(Ext.getBody(), 'r-c', [-5, 0]);
Az elem jobb oldala legyen a body közepéhez képest 5 pixellel balra. (a másiknál fordítva)
Végén meg zárjuk azzal a példasorozatot, hogy essen le az első négyzetünk egy kis pattogással:
(tehát a négyzet alja illeszkedjen a body aljához, offset nem kell, és az animációnál állítsuk be az időt és az animáció típusát)
Az átméretezés után nem minden esetben előnyös az anchorTo függvény animációja, ekkor használjuk inkább az alignTo-t, és az átméretezést kezeljük le külön a Ext.EventManager.onWindowResize segítségével.
Nem csak a nagyon nagy komponens gyűjteményéért, hanem ezekért az apróságokért is szeretjük az ExtJS-t! :)
