ExtJS

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.

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.