ExtJS - Versionsgeschichte

94.216.229.189: /* ExtJS Einbinden */

2010-03-09T12:16:36Z

ExtJS Einbinden

94.216.229.189: /* Ordnerstruktur von ExtJS */

2010-03-09T12:05:25Z

Ordnerstruktur von ExtJS

94.216.229.189: /* ExtJS Einbinden */

2010-03-09T11:53:53Z

ExtJS Einbinden

94.216.229.189: /* Schnelleinstieg ExtJS */

2010-03-09T11:48:48Z

Schnelleinstieg ExtJS

94.216.229.189: /* Debug */

2010-03-09T11:42:52Z

Debug

94.216.229.189 am 9. März 2010 um 11:41 Uhr

2010-03-09T11:41:48Z

94.216.229.189: /* CSS Manipulieren */

2010-03-09T11:08:11Z

CSS Manipulieren

94.216.229.189 am 9. März 2010 um 11:02 Uhr

2010-03-09T11:02:55Z

Neue Seite

== Schnelleinstige ==
siehe auch: http://www.extjs.com/products/extcore/manual/index.php

=== Globales Objekt Ext ===

var el = Ext.get('myElementId');
el.addClass('error');

Erzeugt eine Instanz mit Referenz auf das Elements myElementID und fügt die Klasse .error hinzu.

=== Flyweight Objekt Ext.fly zum Wiederverwenden ===

Ext.fly('myElementId').removeClass('error');

wird benutzt bei einmaligem Zugriff auf ein Element. Wird beim Start von ExtJS angelegt und bei wiederverwendung immer überschrieben.
<pre>
var el = Ext.fly('foo');
Ext.fly('bar').frame();
el.addClass('error');
</pre>
Hier wird nur das Element mit der id bar verändert, weil Ext.fly in der 2. Zeile schon wieder überschrieben wird. el enthält aber eine Referenz auf dieses Objekt. Daher wird in der 3. Zeile wieder nur die id bar verändert. Frame ist ein ExtJS Effekt.

=== Wichtige Funktionen und Objekte ===
==== Ext.get====
Gibt ein Ext Element zurück
<pre>
var el1 = Ext.get('elId'); // takes an element id
var el2 = Ext.get(el1); // takes an Ext.Element
var el3 = Ext.get(el1.dom); // takes an HTMLElement
</pre>
==== Ext.fly ====
Gleiche Argumente aber nur einmal verwenden (siehe oben) Spart dafür Speicher.
// We want to perform only one discrete action on this element.
Ext.fly('elId').hide();

==== Ext.getDom ====
Gibt einen Dom Knoten zurück (erwartet id, element oder dom Knoten)
<pre>
// gets dom node based on id
var elDom = Ext.getDom('elId');
// gets dom node based on the dom node
var elDom1 = Ext.getDom(elDom);

// If we don't know if we are working with an
// Ext.Element or a dom node use Ext.getDom
function(el){
var dom = Ext.getDom(el);
// do something with the dom node
}
</pre>
=== CSS Manipulieren ===
* addClass
To easily add a class to an element:

Ext.fly('elId').addClass('myCls'); // adds the class 'myCls' to the element

* radioClass
Add class in one element and remove that same class if it exists from all of its siblings in one call.

// add the class 'myCls' to the element and remove that same class from
// all sibilings.
Ext.fly('elId').radioClass('myCls');

* removeClass
Remove one or more classes from an element.

Ext.fly('elId').removeClass('myCls'); // remove the class from the element

* toggleClass
Toggle a class on/off. If it isn't applied to the element it will be, it is is then it will be removed.

Ext.fly('elId').toggleClass('myCls'); // the class is added
Ext.fly('elId').toggleClass('myCls'); // the class is removed
Ext.fly('elId').toggleClass('myCls'); // the class is added again

* hasClass
Check to see if the element has the class applied.

if (Ext.fly('elId').hasClass('myCls')) {
// it has the class
}

* replaceClass
Replace the class a with class b.

Ext.fly('elId').replaceClass('myClsA', 'myClsB');

* getStyle
Gets a normalized (currentStyle and computed style) property from the element.

var color = Ext.fly('elId').getStyle('color');
var zIndx = Ext.fly('elId').getStyle('z-index');
var fntFmly = Ext.fly('elId').getStyle('font-family');
// ... etc.

* setStyle
Set style properties on an element. Takes a string or an object literal.

Ext.fly('elId').setStyle('color', '#FFFFFF');
Ext.fly('elId').setStyle('z-index', 10);
Ext.fly('elId').setStyle({
display : 'block',
overflow : 'hidden',
cursor : 'pointer'
});
// animate the transition of color
Ext.fly('elId').setStyle('color', '#FFFFFF', true);
// animate the transition of color with a duration of .75 seconds
Ext.fly('elId').setStyle('color', '#FFFFFF', {duration: .75});
// ... etc.

* getColor
Gets a normalized (6 digit hex) color value for the passed in property, accepts a default value if the property is not set and a prefix (# is the default).

Ext.fly('elId').getColor('background-color');
Ext.fly('elId').getColor('color');
Ext.fly('elId').getColor('border-color');
// ... etc.

* setOpacity
Sets the opacity of the element.

Ext.fly('elId').setOpacity(.5);
Ext.fly('elId').setOpacity(.45, true); // animates
// animates with a duration of half a second
Ext.fly('elId').setOpacity(.45, {duration: .5});

* clearOpacity
Clears any opacity settings of the element.

Ext.fly('elId').clearOpacity();

== Debug ==
Geht super it Firebug. In der Konsole können Statements eingegeben und ausgeführt werden. Gute übersicht über das DOM

Firebug Methode console:
var el = Ext.get('myElementId');
console.dir(el);
console gibt Infos über das Element el aus.

@@ Zeile 195: / Zeile 195: @@
 <pre>
 <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
-<link rel="stylesheet" type="text/css" href="../extjs/resources/css/xtheme-slate.css" />
+<link rel="stylesheet" type="text/css" href="../extjs/resources/css/xtheme-grey.css" />
 </pre>
@@ Zeile 201: / Zeile 201: @@
   <script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
   <script type="text/javascript" src="../extjs/ext-all-debug.js"></script>
-  <script type="text/javascript" src="../extjs/build/locale/ext-lang-de-min.js"></script>
+  <script type="text/javascript" src="../extjs/src/locale/ext-lang-de-min.js"></script>
 </pre>

← Nächstältere Version		Version vom 9. März 2010, 12:05 Uhr
Zeile 150:		Zeile 150:
	Die Ordner adapter und resources benötigt ExtJS um korrekt zu funktionieren!		Die Ordner adapter und resources benötigt ExtJS um korrekt zu funktionieren!

		+	Ordnerstruktur bei 3.1:
		+	<pre>
		+	adapter/ -> old school?
		+	docs/ -> Api, Einfache Beispiele
		+	examples/ -> Beispiele (wie auf Homepage?)
		+	pkgs/
		+	resources/ -> Themes etc.
		+	src/
		+	adapter/
		+	core/
		+	data/
		+	dd/
		+	direct/
		+	locale/
		+	state/
		+	util/
		+	widgets/
		+	welcome/
		+
		+
		+	</pre>

	=== ExtJS Einbinden ===		=== ExtJS Einbinden ===

@@ Zeile 181: / Zeile 181: @@
   <script type="text/javascript" src="../extjs/ext-all-debug.js"></script>
   <script type="text/javascript" src="../extjs/build/locale/ext-lang-de-min.js"></script>
 </pre>

← Nächstältere Version		Version vom 9. März 2010, 11:48 Uhr
Zeile 137:		Zeile 137:

	== Schnelleinstieg ExtJS ==		== Schnelleinstieg ExtJS ==
		+	Z.T. aus: http://www.opensource-community.com/ExtJS_Tutorial.html (9.3.2010)
		+	ExtJS Dokumentation
		+	=== Ordnerstruktur von ExtJS ===
		+	<pre>
		+	adapter: Libaries die neben ExtJS eingebunden werden können (jquery, yui, prototype ...)
		+	build: Dateien um eine eigene ext-all.js zuzusammenzustellen
		+	docs: Dokumentation
		+	examples: Beispiele
		+	resources: Resourcen die ExtJS benötigt (Bilder / CSS)
		+	source: Der vollständige / unkomprimierte Quellcode
		+	</pre>
		+	Die Ordner adapter und resources benötigt ExtJS um korrekt zu funktionieren!
		+
		+
		+	=== ExtJS Einbinden ===
		+
		+	'''ext-all.css'''
		+
		+	Enthält das komplette Layout und muss eingebunden werden.
		+
		+	'''xtheme-xxx.css'''
		+
		+	Um ein anderes Theme zu wählen kann man dies einfach indem man das Standarddesign anschließend überlädt.
		+
		+	'''ext-base.js'''
		+
		+	Das Herzstück von ExtJS und muss immer geladen werden. Diese Datei muss angepasst werden wenn man andere Libaries einbinden möchte wie z.B. jQuery.
		+
		+	'''ext-all-debug.js / ext-all.js'''
		+
		+	Diese Datei enthält alle Widgets und sollte auf späteren Produktivsystemen auf die nonDebug Variante umgestellt werden
		+
		+	'''ext-lang-de-min.js'''
		+	ExtJS auf deutsch umstellen (verfügbare Sprachen im Ordner build/locale)
		+
		+	<pre>
		+	<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
		+	<link rel="stylesheet" type="text/css" href="../extjs/resources/css/xtheme-slate.css" />
		+	</pre>
		+
		+	<pre>
		+	<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
		+	<script type="text/javascript" src="../extjs/ext-all-debug.js"></script>
		+	<script type="text/javascript" src="../extjs/build/locale/ext-lang-de-min.js"></script>
		+	</pre>
		+
		+	=== Entwicklungsumgebungen ===
		+
		+	Spket IDE: ist ein Plugin für Eclips oder Dreamweaver und ist ein starkes Toolkit für Javascript und XML Entwicklung mit ExtJS Erweiterungen.
		+	Download unter: http://www.spket.com/
		+
		+	Aptana IDE: ist eine mächtige IDE in der Webentwicklung geworden und bittet viele Funktionen sowie ExtJS Erweiterungen
		+
		+
		+	=== Spacer Image ===
		+
		+	Standartmäßig läd ExtJS das 1px x 1px große transparente Gif von der URL http://www.extjs.com/s.gif.
		+	Möchte man dies auf seinen eigenen Server anpassen muss man nach der Ext.onReady Anweisung folgende Variable setzen:
		+
		+	Ext.onReady(function()
		+	{
		+	Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
		+
		+	Ext.Msg.alert('Hello', 'World');
		+	});
		+
		+
		+	Download unter www.extjs.com

@@ Zeile 128: / Zeile 128: @@
   Ext.fly('elId').clearOpacity();
-== Debug ==
+=== Debug ===
 Geht super it Firebug. In der Konsole können Statements eingegeben und ausgeführt werden. Gute übersicht über das DOM

@@ Zeile 1: / Zeile 1: @@
+== Schnelleinstieg Ext Core ==
 siehe auch: http://www.extjs.com/products/extcore/manual/index.php
@@ Zeile 136: / Zeile 135: @@
   console.dir(el);
 console gibt Infos über das Element el aus.

@@ Zeile 51: / Zeile 51: @@
 </pre>
 === CSS Manipulieren ===
-    *  addClass
+==== addClass ====
-      To easily add a class to an element:
+To easily add a class to an element:
+ Ext.fly('elId').addClass('myCls'); // adds the class 'myCls' to the element
        // add the class 'myCls' to the element and remove that same class from
        // all sibilings.
        Ext.fly('elId').radioClass('myCls');
-    * removeClass
+==== toggleClass ====
-      Remove one or more classes from an element.
+Toggle a class on/off. If it isn't applied to the element it will be, it is is then it will be removed.
+<pre>
        Ext.fly('elId').toggleClass('myCls'); //  the class is added
        Ext.fly('elId').toggleClass('myCls'); //  the class is removed
        Ext.fly('elId').toggleClass('myCls'); //  the class is added again
-    * hasClass
+==== getStyle ====
-      Check to see if the element has the class applied.
+Gets a normalized (currentStyle and computed style) property from the element.
+<pre>
        var color = Ext.fly('elId').getStyle('color');
        var zIndx = Ext.fly('elId').getStyle('z-index');
        var fntFmly = Ext.fly('elId').getStyle('font-family');
        // ... etc.
-    * setStyle
+==== setStyle ====
-      Set style properties on an element. Takes a string or an object literal.
+Set style properties on an element. Takes a string or an object literal.
+<pre>
        Ext.fly('elId').setStyle('color', '#FFFFFF');
        Ext.fly('elId').setStyle('z-index', 10);
@@ Zeile 110: / Zeile 108: @@
        Ext.fly('elId').setStyle('color', '#FFFFFF', {duration: .75});
        // ... etc.
+</pre>
-    * getColor
+====getColor====
-      Gets a normalized (6 digit hex) color value for the passed in property, accepts a default value if the property is not set and a prefix (# is the default).
+Gets a normalized (6 digit hex) color value for the passed in property, accepts a default value if the property is not set and a prefix (# is the default).
+<pre>
        Ext.fly('elId').getColor('background-color');
        Ext.fly('elId').getColor('color');
        Ext.fly('elId').getColor('border-color');
        // ... etc.
+</pre>
-    * setOpacity
+====setOpacity====
-      Sets the opacity of the element.
+Sets the opacity of the element.
+<pre>
        Ext.fly('elId').setOpacity(.5);
        Ext.fly('elId').setOpacity(.45, true); // animates
        // animates with a duration of half a second
        Ext.fly('elId').setOpacity(.45, {duration: .5});
+</pre>
-    * clearOpacity
+====clearOpacity====
-      Clears any opacity settings of the element.
+Clears any opacity settings of the element.
+ Ext.fly('elId').clearOpacity();
 == Debug ==