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.

var el = Ext.fly('foo');
Ext.fly('bar').frame();
el.addClass('error');

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

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

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)

      // 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
      }

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.

Schnelleinstieg ExtJS

Z.T. aus: http://www.opensource-community.com/ExtJS_Tutorial.html (9.3.2010) ExtJS Dokumentation

Ordnerstruktur von ExtJS

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

Die Ordner adapter und resources benötigt ExtJS um korrekt zu funktionieren!

Ordnerstruktur bei 3.1:

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/

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)

 
<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" />

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

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

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)

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