QuickTip: ExtJS 4 panel gombok

Ma a következő dolog fordult velem elő: létrehoztam egy sima panelt, amelyre definiáltam 3 gombot is. A gombokhoz viszont renderelés után hozzá kellett férnem abból a célból, hogy ha a felhasználónak nincs megfelelő jogosultsága, ne tudja nyomkodni ezeket. Meglepődve tapasztaltam, hogy a panel.buttons property null értékkel rendelkezik, pedig hát ebbe definiáltam. Úgy tűnik az Ext ilyenkor átalakítja ez a tömböt egy ún. dockedItem-é, így renderelés után csak ebben érhetők el a gombok, nem is annyira bonyolult módon:

panel.getDockedComponent(x).getComponent(y);

ahol X a dockedItem indexe (ha nincs másik, akkor 0) és Y az elérni kívánt gomb indexe.

Subtitlers.hu – közösségi feliratfordítás

Útjára indult a legújabb feliratos oldal. Hogy ez miben más, mint a többi?

• Nincs telehányva reklámokkal a felület. Sőt, egyelőre egyáltalán nem lesz semmilyen reklám az oldalon. Ahogy időm engedi kiteszek egy támogatás gombot, ha valakinek tetszene a szolgáltatás és megtámogatná az oldal fenntartását
• Működik! Nem fogsz 404 – Az oldal nem található és hasonló szépségeket kapni. Ha mégis, akkor nagy gáz van
• Használható. Egyszerű, logikus felépítésű felületet terveztem, ami lehetővé teszi, hogy bármilyen céllal jössz is az oldalra, a leggyorsabban elérd azt.
• Felirat letöltés és feltöltés mellett, egy egészen újszerű szolgáltatást nyújt az oldal. Sok ember fordíthat egyszerre egy feliratot, így egyrészt lehet tehermentesíteni a fordítót, másrészt sokkal gyorsabban elkészülhet egy felirat. Ha 4-5 ember összeáll (és tegyük fel vágják olyan szinten az angolt, hogy használható feliratokat gyártanak), akkor 1-2 óra alatt lelehet fordítani egy feliratot.

Próbáld ki az oldalt és mondd el a véleményed, vagy ha hibát találtál, vagy ha van valami fejlesztési ötleted. Ha tetszik, oszd meg ahol tudod, hogy közösen tudjunk dolgozni a közös jóért

Ext.dd.DragTracker használata

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

var dragTracker = new Ext.dd.DragTracker({
	/* 
	 * Megadható vele, hogy hány pixelnyi
	 * egérmozgás után kezdődjön el a dragging
	 */
	tolerance : 3,
	/*
	 * Az itt megadott értékkel (ms) késlelteti 
	 * a "drag start" eseményt
	 */
	autoStart : 300,
	/*
	 * Ez a függvény hajtódik végre az egér lenyomása után,
	 * első és egyetlen paramétere a mousedown event
	 */
	onBeforeStart: function( e ) {},
	/*
	 * Draggelés közben hajtódik végre folyamatosan,
	 * első és egyetlen paramétere a mousemove event
	 */
	onDrag: function( e ) {},
	/*
	 * Ez a függvény hajtódik végre az egér felengedése után,
	 * első és egyetlen paramétere a mouseup event
	 */
	onEnd: function( e ) {}
 
});
 
/*
 * Az initEl paramétere a figyelni kívánt html elem
 */
dragTracker.initEl( HTMLElement );

Konfigurálható editor az egyes cellákhoz ExtJS gridben!

Nagyon szeretem az ExtJS-t, főleg a pontos api dokumentációt, de sajnos így is hiányos, ami miatt sok órát szoktam elvesztegetni. Nos a probléma egyszerűen megfogalmazva így néz ki: létre kell hoznom egy olyan szerkeszthető gridet (táblázatot) Ext-ben, hogy annak minden egyes cellája egy általam írt függvény által visszaadott form elemmel szerkeszthető legyen. Tehát például a második oszlop harmadik sorának celláját, más szerkesztővel lehessen megszerkeszteni, mint a második oszlop második sorának celláját. No problem, felütöm az API-t a megfelelő résznél és már ott is a megoldás, vagyis a grid-hez tartozó ColumnModel egyik függvénye, a setEditor, ami egy oszlop indexet (figyelem! az első oszlop a 0 indexű) és egy szerkesztőt vár. Na persze! Nem ilyen könnyű ám az élet. Az Ext Developer Team, ugyanis kihagyott egy fontos részletet az API-ból (illetve nem is hagyták ki, de a második paraméter objektumnak van feltüntetve, amire a paraszt azt hiszi, hogy az editor-t kell megadni),  nevezetesen, hogy a második paraméter egy “konvertáló”:  new Ext.grid.GridEditor(ide jön a form objektum). A baj ezzel az, hogy nincs feltüntetve sehol, egy eldugott ext témában találtam meg a megoldást. Tehát az editor megváltoztatásához (most egy szám beviteli mezőt fogok használni) egy ilyen parancs szükséges:

grid.getColumnModel().setEditor( index, new Ext.grid.GridEditor( new Ext.form.NumberField({}) ) );