Wikizone - Benutzerbeiträge [de]

ExtJS

2010-03-09T12:16:36Z

94.216.229.189: /* ExtJS Einbinden */

== Schnelleinstieg Ext Core ==
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.
<pre>
// add the class 'myCls' to the element and remove that same class from
// all sibilings.
Ext.fly('elId').radioClass('myCls');
</pre>
====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.
<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
</pre>
==== hasClass ====
Check to see if the element has the class applied.
<pre>
if (Ext.fly('elId').hasClass('myCls')) {
// it has the class
}
</pre>
====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.
<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.
</pre>

==== setStyle ====
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);
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.
</pre>
====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).
<pre>
Ext.fly('elId').getColor('background-color');
Ext.fly('elId').getColor('color');
Ext.fly('elId').getColor('border-color');
// ... etc.
</pre>
====setOpacity====
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====
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.

== 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!

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 ===

'''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-grey.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/src/locale/ext-lang-de-min.js"></script>
</pre>

==== Include Order ====
Die Reihenfolge in der JS Dateien eingebunden werden ist wichtig. Im Folgenden ein Auszug aus der INCLUDE_ORDER.txt der 3.1.1
<pre>
All adapter related files below are located in
/adapters/<lib name>/ of this zip file.

Your include order should be:

Ext Stand-alone
-------------------------------------------------------------------
ext-base.js
ext-all.js (or your choice of files)

Yahoo! UI (.12+)
-------------------------------------------------------------------
yui-utilities.js
ext-yui-adapter.js
ext-all.js (or your choice of files)

jQuery (1.1+)
-------------------------------------------------------------------
jquery.js
ext-jquery-adapter.js
ext-all.js (or your choice of files)

Prototype (1.5+) / Scriptaculous (1.7+)
-------------------------------------------------------------------
prototype.js
scriptaculous.js?load=effects (or whatever you want to load)
ext-prototype-adapter.js
ext-all.js (or your choice of files)
</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

ExtJS

2010-03-09T12:05:25Z

94.216.229.189: /* Ordnerstruktur von ExtJS */

== Schnelleinstieg Ext Core ==
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.
<pre>
// add the class 'myCls' to the element and remove that same class from
// all sibilings.
Ext.fly('elId').radioClass('myCls');
</pre>
====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.
<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
</pre>
==== hasClass ====
Check to see if the element has the class applied.
<pre>
if (Ext.fly('elId').hasClass('myCls')) {
// it has the class
}
</pre>
====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.
<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.
</pre>

==== setStyle ====
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);
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.
</pre>
====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).
<pre>
Ext.fly('elId').getColor('background-color');
Ext.fly('elId').getColor('color');
Ext.fly('elId').getColor('border-color');
// ... etc.
</pre>
====setOpacity====
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====
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.

== 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!

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 ===

'''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>

==== Include Order ====
Die Reihenfolge in der JS Dateien eingebunden werden ist wichtig. Im Folgenden ein Auszug aus der INCLUDE_ORDER.txt der 3.1.1
<pre>
All adapter related files below are located in
/adapters/<lib name>/ of this zip file.

Your include order should be:

Ext Stand-alone
-------------------------------------------------------------------
ext-base.js
ext-all.js (or your choice of files)

Yahoo! UI (.12+)
-------------------------------------------------------------------
yui-utilities.js
ext-yui-adapter.js
ext-all.js (or your choice of files)

jQuery (1.1+)
-------------------------------------------------------------------
jquery.js
ext-jquery-adapter.js
ext-all.js (or your choice of files)

Prototype (1.5+) / Scriptaculous (1.7+)
-------------------------------------------------------------------
prototype.js
scriptaculous.js?load=effects (or whatever you want to load)
ext-prototype-adapter.js
ext-all.js (or your choice of files)
</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

ExtJS

2010-03-09T11:53:53Z

94.216.229.189: /* ExtJS Einbinden */

== Schnelleinstieg Ext Core ==
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.
<pre>
// add the class 'myCls' to the element and remove that same class from
// all sibilings.
Ext.fly('elId').radioClass('myCls');
</pre>
====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.
<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
</pre>
==== hasClass ====
Check to see if the element has the class applied.
<pre>
if (Ext.fly('elId').hasClass('myCls')) {
// it has the class
}
</pre>
====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.
<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.
</pre>

==== setStyle ====
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);
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.
</pre>
====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).
<pre>
Ext.fly('elId').getColor('background-color');
Ext.fly('elId').getColor('color');
Ext.fly('elId').getColor('border-color');
// ... etc.
</pre>
====setOpacity====
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====
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.

== 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>

==== Include Order ====
Die Reihenfolge in der JS Dateien eingebunden werden ist wichtig. Im Folgenden ein Auszug aus der INCLUDE_ORDER.txt der 3.1.1
<pre>
All adapter related files below are located in
/adapters/<lib name>/ of this zip file.

Your include order should be:

Ext Stand-alone
-------------------------------------------------------------------
ext-base.js
ext-all.js (or your choice of files)

Yahoo! UI (.12+)
-------------------------------------------------------------------
yui-utilities.js
ext-yui-adapter.js
ext-all.js (or your choice of files)

jQuery (1.1+)
-------------------------------------------------------------------
jquery.js
ext-jquery-adapter.js
ext-all.js (or your choice of files)

Prototype (1.5+) / Scriptaculous (1.7+)
-------------------------------------------------------------------
prototype.js
scriptaculous.js?load=effects (or whatever you want to load)
ext-prototype-adapter.js
ext-all.js (or your choice of files)
</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

ExtJS

2010-03-09T11:48:48Z

94.216.229.189: /* Schnelleinstieg ExtJS */

== Schnelleinstieg Ext Core ==
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.
<pre>
// add the class 'myCls' to the element and remove that same class from
// all sibilings.
Ext.fly('elId').radioClass('myCls');
</pre>
====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.
<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
</pre>
==== hasClass ====
Check to see if the element has the class applied.
<pre>
if (Ext.fly('elId').hasClass('myCls')) {
// it has the class
}
</pre>
====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.
<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.
</pre>

==== setStyle ====
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);
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.
</pre>
====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).
<pre>
Ext.fly('elId').getColor('background-color');
Ext.fly('elId').getColor('color');
Ext.fly('elId').getColor('border-color');
// ... etc.
</pre>
====setOpacity====
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====
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.

== 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

ExtJS

2010-03-09T11:42:52Z

94.216.229.189: /* Debug */

ExtJS

2010-03-09T11:41:48Z

94.216.229.189:

ExtJS

2010-03-09T11:08:11Z

94.216.229.189: /* CSS Manipulieren */

== 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.
<pre>
// add the class 'myCls' to the element and remove that same class from
// all sibilings.
Ext.fly('elId').radioClass('myCls');
</pre>
====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.
<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
</pre>
==== hasClass ====
Check to see if the element has the class applied.
<pre>
if (Ext.fly('elId').hasClass('myCls')) {
// it has the class
}
</pre>
====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.
<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.
</pre>

==== setStyle ====
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);
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.
</pre>
====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).
<pre>
Ext.fly('elId').getColor('background-color');
Ext.fly('elId').getColor('color');
Ext.fly('elId').getColor('border-color');
// ... etc.
</pre>
====setOpacity====
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====
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.

ExtJS

2010-03-09T11:02:55Z

94.216.229.189:

== 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.

Typo3 Extensions - JavaScript Frameworks nutzen

2010-03-09T10:45:47Z

94.216.229.189:

== Weiterführende Links: ==

[[ExtJS]]

Es gibt mehrere Möglichkeiten:

* Frameworks die bereits in Typo3 integriert sind
* Frameworks die für Typo3 in Extensions verpackt vorkonfiguriert sind
* Frameworks die man komplett von Hand einspielt.
* Man packt die Teile des Frameworks seiner Wahl die man benötigt einfach mit in seine Extension ein.

Beispielhaft eine Lösung mit dem

== jsmanager ==

Der JSManager kann verschiedene JSl Frameworks in die Ausgabe der Seite einbinden. Im Moment ist das die jquery und die extbase Extension die die entsprechenden Frameworks mitbringen. Dazu wird in der localconf der Extension die Funktion

require_once(t3lib_extMgm::extPath('extjs', 'class.tx_extjs.php'));
tx_jsmanager_Manager::register(new tx_extjs());

Problematisch ist der jsmanager im Zusammenhang mit updates. Es ist auch nicht ganz klar wie groß die Akzeptanz dieser Extension in Zukunft sein wird.

Eigener Ansatz.

Eine kleine Extension, die nichts anderes macht als durch TS Konfigurationen auf einen Ordner zuzugreifen und die passenden Dateien in den Header der Seite zu laden.

Eventuell könnte dazu auch in den Seiteneigenschaften ein Dropdownfeld mit den integrierten Frameworks anzeigen. Konfiguration könnte so aussehen:

Todo