ExtJS > Trigger-Field bei Enter auslösen

Damit ein Trigger-Field auch bei Enter ausgelöst wird, bedarf es einen kleinen Trick:

View Code JAVASCRIPT
Ext.create('Ext.panel.Panel', {
    items: [
        {
            xtype: 'triggerfield',
            triggerCls: 'x-form-search-trigger',
            emptyText: "Suchbegriff eingeben",
            onTriggerClick: function() {
                // Diese Funktion wird ausgeführt, wenn jemand auf den Button klickt
            },
            listeners: {
                specialkey: function(field, e) {
                    if(e.getKey() == e.ENTER)
                    {
                        field.onTriggerClick();
                    }
                }
            }
        }
    ]
});

Im Grunde wird einfach nur ein neues Event specialkey für das Element angelegt, das abfragt ob Enter gedrückt würde.

ExtJS > Text im Grid markieren

Seit ExtJS 4.1 ist es möglich ein Grid so zu konfigurieren, dass man den Text mit der Maus markieren kann.
Dazu muss man lediglich den Wert enableTextSelection in der ViewConfig auf true setzten:

View Code JAVASCRIPT
Ext.create('Ext.grid.Panel', {
    title: "Grid Titel",
    columnLines: true,
    store: "StoreName",
    viewConfig: {
        enableTextSelection: true
    },
    columns: [
        // Spalten...
    ]
});

Vor ExtJS 4.1 gab es hierfür keine Lösung, die mit allen Browsern kompatibel war.

Pfeil mit CSS erstellen

Mit dem border-Befehl lassen sich in CSS relativ einfach Pfeile erstellen. Dazu braucht man nichts weiter als drei HTML-Elemente und ein paar Zeilen CSS-Code.

Los geht’s mit dem HTML:

View Code HTML5
<div id="pfeil">
<div class="shape1"></div>
<div class="shape2"></div>
</div>

Dann das CSS:

View Code CSS
#pfeil {
    width: 50px;
    height: 50px;
    position: relative;
    margin-left: 10px;
}
#pfeil .shape1, #pfeil .shape2 {
    border-width: 40px;
    border-style: solid;
    height: 0;
    width: 0;
    border-color: #000 transparent transparent transparent;
    top: 10px;
    position: absolute;
}
 
#pfeil .shape2 {
    top: 0px;
    border-color: #fff transparent transparent transparent;
}

Das Ergebnis:
CSS Pfeil Demo

Die Erklärung will euch natürlich nicht vorenthalten.
Im Grunde werden hier nur zwei Dreiecke erstellt – eins in schwarz und eins in weiß – und dann übereinander gelegt. Dadurch entsteht ein nach unten zeigender Pfeil, der ähnlich aussieht wie in einer Selectbox.
Die Dreiecke entstehen jeweils aus einem viereckigen Element ohne Höhe und Breite und mit einem 40 Pixel dicken Rahmen. Aber nur der obere Rahmen bekommt eine Farbe, alle anderen Seiten bleiben transparent. Dadurch entsteht die dreieckige Form.

Und die Demo dazu gibt es hier:
http://jsfiddle.net/pGanL/1/