In dem ExtJS Framework gibt es für die Grids, die praktischen Grid Filter. Diese lassen sich ganz einfach einbauen und das ganze sieht dann zum Beispiel so aus:

Mit dem List Filter lassen sich diese Checkboxen darstellen. Die Werte darin sind aber statisch hinterlegt. Man kann auch einen Store im Filter hinterlegen und dann die Werte serverseitig laden. In meinen Fall sollte ich aber die Werte aus den Daten des Grid automatisch ermitteln.

Dazu habe ich erst mal den Ext.data.Store um einen Methode erweitert, die mir die eindeutigen Wert einer Spalte zurückgibt:

Ext.override(Ext.data.Store, {
    getUniqueData:function (index){
        this.unique_data = new Array();
        this.each(function(record){
            var value = record.get(index);
            if(this.unique_data.indexOf(value)==-1){
                this.unique_data.push(value);
            }

        },this);
        return this.unique_data;
    }
});

Dann habe ich mir einen neuen Filter erzeugt, abgeleitet von der Klasse: Ext.ux.grid.filter.ListFilter die nur zwei Optionen benötigt:

1. uniqueStore: eine Referenz auf den Store des Grid
2. dataIndex: der Spalten Index

Der Filter hängt sich an den load Event des Store vom Grid und erzeugt danach seine eigenen Optionen:

Ext.ux.grid.filter.UniqueListFilter  = Ext.extend(Ext.ux.grid.filter.ListFilter, {
    init : function(){
        this.uniqueStore.addListener('load',function(){
            this.options = [];
            var values = this.uniqueStore.getUniqueData(this.dataIndex);
            Ext.each(values,function(value){
                this.options.push([value, value]);
            },this);
            Ext.ux.grid.filter.UniqueListFilter.superclass.init.call(this);
        },
        this
        );
    }
});

Diesen Filter kann einfach in meinen GridFilters instanzieren:

var filters = new Ext.ux.grid.GridFilters(
            {
                local:true,
                filters:[
                    {type: 'string',  dataIndex: 'Account'},
                    {type: 'numeric', dataIndex: 'BasePrice'},
                    new Ext.ux.grid.filter.UniqueListFilter({
                        uniqueStore:ds,
                        dataIndex: 'BaseCurrency'

                    }),
                ]
            }
        );

Im Grid werden die filter über die plugin Schnittstelle eingebunden:

plugins: [filters,...],

Der Ext.data.XmlReader in dem ExtJs Framework ist einer wunderbare Sache. Mit ihm lassen sich XML Daten per Ajax wunderbar auslesen und verarbeiten. Dieser Reader wird in der Regel in Grids verwendet. Im Reader definiert man auch den Dataindex für das Grid und dessen Header. Darauf wiederum greifen bestimmte Plugin, wie das Grid Filter Plugin zu.

In meinen Projekt kam es öfters vor das die Werte nicht eins zu eins aus der XML Datei übernommen wurden, sondern mittels einer individuellen Render Funktion für die Ausgabe abgepasst wurde.

cm: new Ext.grid.ColumnModel([
            {
                header: "XY",
                width:80,
                sortable:true,
                dataIndex:'abc',
                renderer :function(...
            },

Das funktioniert zwar einwandfrei, aber da das nur in der Ausgabe geschieht, kann ich nicht nach dieser Spalte sortieren, oder in dieser per Filter suchen.

Auch an anderen Stellen habe ich deshalb nach einer Möglichkeit gesucht, den Wert im Reader manuell anzupassen.Versteckt in der der Dokumentation der Klasse Ext.data.Record habe ich die Möglichkeit einer convert Funktion gefunden.

Neben dem Mapping kann man über die Eigenschaft convert eine Callback Funktion angeben mit der man den Wert individuell bearbeiten kann.

reader: new Ext.data.XmlReader({
                    record: 'item'
                }, [{
                    name: 'nominal',
                    mapping: 'price@nominal',
                    convert:function(v,r){
                        var value = "K";
                        if(parseFloat(v)<0){
                            value =  "V";
                        }

                        value += '-' + Ext.DomQuery.selectValue('base-currency', r);
                        value += '/' +Ext.DomQuery.selectValue('quote-currency', r);
                        return value;
                    }
                }

Somit erzeuge ich einen individuellen Dataindex nach dem ich auch sortieren und filtern kann.

Beim Erstellen von Webseiten mit umfangreicher Client Funktionalität (Rich Clients) setzt man heutzutage eines der zahlreichen Javascript Frameworks ein. Auf den ersten Blick wirken diese perfekt und es scheint so als könnte man alles damit machen.

Doch leider sind diese Frameworks noch neu, und das Zusammenspiel der verschiedenen Kompoenten klappt nicht immer.

Beim Einsatz von script.aculo.us kamm ich schnell an die Grenzen des Machbaren. Trotzdem konnte das Projekt wie gewünscht umgesetzt werden. In der nachfolgenden Zeit hatte ich erstmal keine aufwendigen Rich Clients zu entwicklen und bin deshalb auf das Framework Jquery umgestiegen. Dieses eignet sich besonders für kleinere Aufgaben. Die Syntax ist sehr leicht verständlich und intuitiv, auch für Benutzer die von dem eigentlichen JavaScript keine Ahnung haben.

Als ich dann mal wieder eine aufwendigere Oberfläche erstellen musste wollte ich kein neues Framework einbinden um Ladenzeit zu sparen und habe deshalb Jquery UI eingesetzt. Dieses war zu den damaligen Zeitpunkt noch nicht so richtig stabil und es kamen einige Beschwerden von Kunden. Ich musste deshalb einiges der Funktionalität in bestimmten Browsern ausschalten.

Neuerdings ist es scheinbar stabil und ein Update hat die Kundenprobleme gelöst.

Jquery UI ist aber noch nicht so umfangreich wie ich es mir wünschen würde und und die Features scheinen nicht einheitlich programmiert zu sein.

ExtJS ist auch ein Javascript Framework das sich besonders durch seine schicken Widgets auszeichnet.
Die Basis Sprache erinnert mich an prototype und ist im Gegensatz zu Jquery mehr für Erfahrene Nutzer und nicht für “Gelegenheit’s-Javascript Programmierer”. Das ist nicht abwertend gemeint, aber es gibt viele Programmierer die sich nicht ernsthaft mit JavaScript auseinander setzen wollen.

Genau wie in Jquery gibt es die Möglichkeit einfach durch den DOM zu wandeln und diesen zu modifizieren. Wirklich interessant wird ExtJS mit seinen genialen Widgets. Mit diesen Wigdet lassen sich ganz einfach schicke DataGrids, Tabs, Fenster, Dialoge, Tooltips, Menübäume und aufwendige Formulare darstellen. Wenn man sich die ausführliche Dokumentation anschaut erkennt man, dass ExtJS sehr mächtig ist und man sich nicht erst viele Plugins besorgen muss.

Ajax Requests lassen sich in ExtJS und in Jquery genauso einfach umsetzen.

Besonders schön finde ich das Interface Design bei ExtJS. Dieses ist einheitlich und bietet eine gute Basis.

Auch für ExtJS gibt es unzählige Plugins.

Der Vorteil an ExtJS ist die Firma die dahinter steht. Es ist nur für Open Source Anwendungen kostenfrei, ansonsten kostet eine Lizenz ab 289$. Ich denke durch dieses Konzept ist der Umfang des Frameworks möglich und es gewährleistet auch eine gewisse Code Qualität und Sicherheit den ich bei anderen Frameworks zur Zeit vermisse.

Wenn man seine Seiten mit einfache Lightbox Effekten oder Tabs aufwerten möchte, dann ist Jquery UI die bessere Wahl. Wenn man aber eine aufwendige Anwendung im Desktop Stil erstellen will, würde ich eher  ExtJS einsetzen und die Lizenskosten in Kauf nehmen. Mit Jquery UI lassen sich einfacher Anwenungen schreiben, die auch ohne JavaScript zu verwenden sind.