From Sencha - Learn

Contents 1 Bevezetés 1.1 Forgatókönyv 1 - Kezdő 1.2 Forgatókönyv 2 - Haladó 2 Akkor hogyan is?

Bevezetés

Forgatókönyv 1 - Kezdő

Hallottál már az Ext-ről, és megnézted az online példákat, belenéztél az API-ba. Nézzük meg, hogy ha nincs teszt szervered, hogyan tudod mégis kipróbálni az ExtJS-t.

Forgatókönyv 2 - Haladó

Találtál valami érdekeset számodra az API-ban amit szeretnél azonnal kipróbálni, de nem szeretnél teszt.html fájt létrenhozni csak azért, hogy megnézz egy funkciót a gyakorlatban.

Bármi is az oka, van egyszerű és gyors mód arra, hogy kipróbáld teszt szerver nélkül is. Amire szükséged van, az csak egy Firefox Firebuggal installálva. Ha még nincsenek a gépeden, akkor rakd fel őket most.

Akkor hogyan is?

• Nyisd meg a Ext API Documentáció-t. Remélem már megtetted ezelőtt is.
• Nyomj F12-t a Firebug konzol megnyitásához (ugye fut a Firebug a Firefoxodban?)
• Ha a Firebug konzolod csak egy sor, '>>>' kattints a kis piros felfelé mutató nyílra a jobb alsó sarokban, hogy a firebug többsoros üzemmódra váltson.
• Írd be a többsoros konzolba a következő sorokat és nyomj Ctrl-Enter-t a futtatáshoz:

Ext.get(document.body).update('<div id="test"></div>');

Uh. Minden eltűnt! Na nem kell megijedni, nem törölted az odalt. :-) A fenti sor a teljes DOM-ot lecserélte egy üres div-re aminek az id-je test. A body tartalma eltűnt, de az ExtJS könyvtár be van töltve és készen áll arra, hogy kipróbáld.

Tegyük fel, hogy az Ext.Panel API-t nézegeted és szeretnéd a saját szemeddel látni, hogy milyen könnyű egy új Panel objektumot létrehozni. Írd be ezt a Firebug konzolodba:

Ext.get(document.body).update('<div id="test"></div>');
new Ext.Panel({
	renderTo: 'test',
	width: '200px',
	title: 'Panel címe',
	html: 'Panel HTML tartalma'
});

Nyomd meg újra a Ctrl-Enter-t és voila, máris láthatod a friss, ropogós új Paneled a böngészőben.

Rendben. Nézzük meg most, hogy mi történik, ha egy új konfigurációs paramétert állítunk be, a collapsible-t. A kód még mindig látható a firebug-ban, hát adjunk hozzá még egy plusz sort:

Ext.get(document.body).update('<div id="test"></div>');
new Ext.Panel({
	renderTo: 'test',
	width: '200px',
	title: 'Panel címe',
	html: 'Panel HTML tartalma',
	collapsible: true
});

Nyomjs Ctrl-Enter-t és azonnal láthatod, hogy a Paneled jobb felső sarkában megjelent egy kis háromszög, amire kattintva a Panel tartalma hol eltűnik, hol megjelenik.

Amikor lenyomod a Ctrl-Enter-t, a kód első sora kitakarít mindent ami eddig benne volt a DOM-ban az előző futtatások során, így mindig tisztal lappal tudsz indulni. Egyszerű trükk, de nagyon hatásos ha valamit csak ki akarod próbálni, hogy egy konfigurációs paraméter mit is csinál.

Tetszőleges mennyiségű HTML-t adhatsz hozzá az update() funkcióval az első sorban és írhatsz hozzá mondjuk Javascript eseménykezelést is ha akarsz.

Most már csinálhatod saját magad, ugye, nem is volt nehéz...

• Ext Programmer's API Documentation
• Ext User Forums

This page was last modified on 12 January 2010, at 10:57. This page has been accessed 3,166 times.