Heute möchte ich gerne meine Programmierung einer Tab Sidebar für den Sencha Market Place zeigen.
Download
Der Download liegt hier im Sencha Touch Market
Live-Beispiel
Das Beispiel ist über dem roten Bereich zu sehen.
Die drei Striche und “myApp” gehören zum Toggle Button, der über die Component mit verwaltet wird.
Bei Slideeffekt kann man frei wählen, ob man den aktiven Inhalt des Viewports mit verschieben möchte oder dieser Überlagert werden soll.
Der Text kann jederzeit gewechselt werden, das Menü auch ohne Button benutzt, das Symbol und die Position getauscht…
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.tab.Sidebar'
],
...
Fügt die Dateien in folgendes Verzeichnis ein:
myApp
app
ux // << --- hier
mgd
tab
Sidebar.js
Die Sidebar wird über das xType ‘tabsidebar’ hinzugefügt.
{
xtype: 'tabsidebar',
indicator: { // button to open and close the menu
text: 'myApp',
iconMask: true,
iconCls: 'action',
iconAlign: 'left',
width: '35%'
},
header: 'm-gd.com', //Header for the menu
items: [ // items inside the menu
{
text: 'Home'
},
{
text: 'Imprint'
}
]
}
Bindet das beigelegte SCSS File in den Root Ordner vom SCSS ein (selbe Level wie app.scss) und styled dann über die folgenden Variablen in der app.scss die Sidebar:
@import 'tabsidebar'
Now you can change the settings by adding some/all of the following lines to the app.scss, before the @import line.
// Button Indicator (to open and close the menu)
$mgd-sidebar-indicator-height: 2.4rem;
$mgd-sidebar-indicator-width: 4rem;
$mgd-sidebar-indicator-color-1: lighten(#1e416c, 8%);
$mgd-sidebar-indicator-color-2: darken(#1e416c, 8%);
$mgd-sidebar-indicator-right-radius: 0.5rem;
$mgd-sidebar-indicator-text-color: white;
$mgd-sidebar-indicator-font-size: 0.8em;
$mgd-sidebar-indicator-font-style: italic;
// Sidebar Menu
$mgd-sidebar-background: #EEE;
$mgd-sidebar-divider: 1px solid #999;
$mgd-sidebar-header-height: 2.9rem;
$mgd-sidebar-header-color-1: darken(#999, 4%);
$mgd-sidebar-header-color-2: lighten(#CCC, 4%);