Heute möchte ich gerne meine Programmierung eines Dropdown Buttons zeigen, den ich für den Sencha Market Place erstellt habe.
Download
Der Download liegt hier im Sencha Touch Market
Hintergrund
Diese Component habe ich einmal für den Sencha Touch Market erstellt. Das DropDown ermöglicht es, verschiedene Components in einen Container zu packen und über einen Button sichtbar zu machen oder zu verstecken. Hier eine Demo:
Live-Beispiel
Im roten Rahmen über diesem Artikel seht Ihr ein Beispiel.
Einbinden in Euer Projekt
Nach der Programmierung sollte Eurer so ähnlich aussehen.
Wichtig ist ‘Ext.ux’ und der ‘requires’ Teil
//<debugger>
Ext.Loader.setPath({
Ext: 'touch/src',
'App': 'pp',
'Ext.ux': 'ux'
});
//</debugger>
Ext.application({
name: 'App',
requires: [// UX
'Ext.ux.mgd.dropdown.DropDown'
],
...
Fügt die Dateien in folgendes Verzeichnis ein:
myApp
app
ux // << --- hier
mgd
dropdown
DropDown.js
Die Sidebar wird über das xType ‘buttondropdown’ hinzugefügt.
items: [
{
xtype: 'buttondropdown',
itemId: 'demoDropDown',
text: 'Tap to open',
dropdownItems: [
{xtype: 'container', html:'Hide Components'},
{xtype: 'container', html:'on tap with animation'}
],
openBeforeFn: function() {
var dropdown = Ext.Viewport.down('#demoDropDown');
dropdown.buttonElement.setText('Tap to close');
},
closeBeforeFn: function() {
var dropdown = Ext.Viewport.down('#demoDropDown');
dropdown.buttonElement.setText('Tap to open');
}
}
]
Der Text des Buttons wird über text gesetzt und die beinhalteten Componenten als Array in dropdownItems übergeben.
Die Funktion openBeforeFn führt etwas vor dem Öffnen aus (ebenso openAfterFn, closeBeforeFn, closeAfterFn).