Im vorherigen Beitrag haben wir uns ein Standard Backend View mit ExtJS in Shopware eingerichtet. Nun enthielten die Views relativ wenig Einstellungen und damit war es nicht schön anzusehen.
Das wollen wir nun mit einigen Anpassungen ändern.
Listing
Ext.define('Shopware.apps.Bug.view.list.List', {
extend: 'Shopware.grid.Panel',
alias: 'widget.bug-reporting-listing-grid',
region: 'center',
configure: function() {
return {
detailWindow: 'Shopware.apps.Bug.view.detail.Window',
columns: {
short_description: { header: 'Beschreibung', flex: 6 },
type: { header: 'Typ', flex: 2 },
created: { header: 'Erstellt am', flex: 2 }
}
};
}
});
columns
header
Hier geben wir den Titel der Spalte an
flex
Flex bezieht sich auf die Breite der Spalte. 100% = 10
Sprich möchten wir 3 Spaltig arbeiten können wir die erste mit 6 definieren und die letzten beiden mit 2 (siehe Beispiel oben)
Das ganze sieht dann wie folgt aus:
Detail
Ext.define('Shopware.apps.Bug.view.detail.Container', {
extend: 'Shopware.model.Container',
padding: 20,
configure: function() {
return {
controller: 'Bug',
fieldSets: [{
title: 'Testsystem',
fields: {
browser:{ disabled: true, fieldLabel: 'Browser' },
browser_version: { disabled: true, fieldLabel: 'Browser Version' },
operatingsystem: { disabled: true, fieldLabel: 'Operating System' }
}
}, {
title: 'Beschreibung',
fields: {
url: {fieldLabel: 'Shop URL' },
short_description: { fieldLabel: 'Titel' },
description: this.createDescription
}
}]
};
},
createDescription: function(model, formField) {
formField.xtype = 'textarea';
formField.height = 90;
formField.grow = true;
formField.fieldLabel = 'Beschreibung';
return formField;
}
});
Schauen wir uns den Detail View des Bug Models an. Hier finden wir einige interessante Einstellungen.
fieldSets
Hiermit setzen wir verschieden Sub-Blöcke im Fenster
Dadurch bleibt es auch bei umfangreichen Models immer Übersichtlich.
Die Fieldsets werden in runde Klammern gepackt und enthalten den Titel in title. Außerdem kann man dort auch noch die fields festlegen, benennen und entsprechend anpassen.
fieldLabel
Bestimmt das Label des jeweiligen Input Fields.
disabled
Legt fest ob das Input Feld beschreibbar ist oder nicht. Wir möchten nicht das der User oder Admin hier etwas an den Browserdaten des Testers ändert.
createDescription
Hier wird es nochmal interessant. Wir übergeben der Funktion das model sowie das jeweilige formfield
Mit der Funktion setzen wir den Typ auf textarea und die Höhe auf 90. Weiteres dazu findet Ihr in der ExtJS Doku
Ich hoffe ich konnte einen kleinen Einblick ins Backend geben – eventuell erweitere ich den Beitrag noch um eine Bildkomponente (Assoziationen).