Ext JS-Snippets

Eine Snippet-Sammlung für Ext JS von Sencha.

Weblinks:

• API-Doku
• Beispiele
• Getting-Started-Guide
• Sencha-Videos

Cheat Sheet

Ext.util.MixedCollection:

• each(function(Ext.data.Model item, [Number index], [Number length]), [scope])
• add(String key, Object o) : Object
• addAll(Array/Object items)
• getAt(Number index) : Object
• getByKey(String key) : Object
• getCount() : Number
• removeAt(Number index) : Object
• removeAtKey(String key) : Object

Ext.data.Store:

• each(function(Ext.data.Model item, [Number index], [Number length]), [scope])
• add(Array/Object items)
• findExact(String fieldName, Object value, [Number startIndex]) : Number
• getAt(Number index) : Ext.data.Model
• getCount() : Number

Ext.container.Container (alias: Ext.Container, xtype: container):

• items : Ext.util.MixedCollection
• child([String selector = '::first']) : Ext.Component
• down([String selector = '::first']) : Ext.Component

Ext.Component:

• getWidth() : Number
• getHeight() : Number
• isVisible( [Boolean includeParents = false] ) : Boolean
• setVisible(Boolean visible)
• up([String selector = '::parent']) : Ext.Component

Installation der SDK Tools

• SDK Tools von der Ext JS-Seite herunterladen. Der Download-Link steht irgendwo links unten - einfach nach "SDK Tools" suchen.
• Installer ausführen
• Falls unter Mac OS der Aufruf von sencha im Fehler -bash: sencha: command not found endet, dann die SenchaSDKTools-Einträge aus ~/.profile in die ~/.bash_profile kopieren. Details siehe entsprechender Bug.

Nicht benötigte Verzeichnisse

Folgende Dateien und Verzeichnisse des Ext JS SDK werden benötigt (10 MB von 33 MB):

extjs/locale/**
extjs/resources/**
extjs/src/**
extjs/ext-dev.js
extjs/ext.js
extjs/license.txt

Klassen-Deklaration

Ext.define("mynamespace.MyClass", {

  alternateClassName: 'myothernamespace.MyClass',
  // singleton: true,

  extend: "MyBaseClass",
  mixins: [ somekey: "MixinClass" ],

  requires: [ "RequiredClass" ],
  uses: [ "UsedClass" ],

  statics: {
    A_CONSTANT: 5,
    staticField: 0,

    staticMethod: function(param) {
    }
  },

  config: {
    title: "default title"
  }

  constructor: function(config) {
    // the 'self' property of an instance refers to its class
    this.self.staticField ++;
  },

  // Special setter handling
  applyTitle: function(title) {
    return title;
  },

  myMethod: function(param1, param2) {
  }

});

Event-Handling

Klasse mit Event-Support:

Ext.define("mynamespace.MyObervableClass", {

  mixins: {
    observable: 'Ext.util.Observable'
  },

  constructor : function(config) {
    var me = this;

    me.addEvents(
      /**
       * @event someChange
       * Fires when some stuff changed.
       * @param {mynamespace.MyObervableClass} this
       * @param {String} stuff The new stuff
       */
      "someChange"
    );

    me.listeners = config.listeners;
    me.mixins.observable.constructor.call(me);
  },

  someMethod: function() {
    this.fireEvent("someChange", this, "new stuff");
  }

});

Benutzung:

Ext.define("mynamespace.MyClass", {

  constructor : function(config) {
    var obj = Ext.create("mynamespace.MyObervableClass", {
      listeners: {
        someChange: this.onSomeChange,
        scope: this
      }
    });
  },

  onSomeChange: function(src, stuff) {
    console.log("The new stuff is: " + stuff);
  }

});

Component-Events

Beim Anzeigen werden folgende Events in dieser Reihenfolge ausgelöst:

• added
• beforerender (hier ist das parent bekannt)
• render
• resize
• afterrender
• resize

Beim destroy werden folgende Events in dieser Reihenfolge ausgelöst:

• removed
• beforedestroy
• destroy