Wie zu kompilieren, ExtJs 5 Thema mit benutzerdefinierten scss Hinzugefügt

Ich habe festgestellt, ausführliche Antwort/info zu diesem Thema hier: http://www.sencha.com/products/extjs/up-and-running/themes-introduction

Ist es sehr hilfreich.

DETAILS:
Im Grunde genommen, wollte ich versuchen, dieses Beispiel lokal: http://dev.sencha.com/extjs/5.0.0/examples/kitchensink/#side-navigation-tabs

So, diese Dinge sind zu tun, was ich gefragt habe:

Zunächst müssen Sie zu generieren Arbeitsbereich mit Sencha Cmd . Im Arbeitsbereich gibt es ext lib mit Themen und Ihre apps + mit Ihren Themen Optional. ext - option bedeutet, dass dieser Befehl lädt extjs in Ihrem Arbeitsbereich, ist es sehr hilfreich.

 
sencha generate workspace ext mein Arbeitsplatz 

Dann müssen Sie in Ihrem Arbeitsbereich und generieren Sie die Anwendung. (-sdk ext das bedeutet, die extjs-lib ist im ext-Verzeichnis. ExtJs-lib wird immer dann verwendet, wenn Sie bauen app oder andere Operationen auf Sie app)

 
cd my-Arbeitsbereich 
sencha -sdk extern generieren app ThemeDemoApp theme-demo-app 

Wollte ich hinzufügen, benutzerdefinierte ui für meine tabpanel. Wir erstellen das tabpanel, in das richtige Verzeichnis:

 
cd theme-demo-app 
vim app/view/main/TabPanel.js 

Benutze ich vim, aber Sie können es mit einem beliebigen text-editor. Diesen code in die Datei:

 
Ext.define('ThemeDemoApp.Blick.main.TabPanel', { 
extend: 'Ext.tab.Panel", 
xtype: 'customtabpanel', 

ui: 'navigation', 
tabPosition: 'Links', 
tabRotation: 0, 

tabBar: { 
border: false 
}, 

items: [{ 
Titel: 'Tab 1', 
html: 'text content' 
}, { 
Titel: 'Tab 2', 
html: 'text content' 
}, { 
Titel: 'Tab 3', 
html: 'text content' 
}] 
}); 

Nun müssen wir definieren ui:'navigation' in css. Daher haben wir für Sie erstellen TabPanel.scss - Datei im selben Verzeichnis wie die Klasse ist relativ zur app (view/main) in sass/src Verzeichnis:

 
mkdir sass/src/view 
mkdir sass/src/view/main 
vim sass/src/view/main/TabPanel.scss 

Und setzen saas-Skript in die Datei mit jedem text-editor (ich nutze vim):

@include extjs-tab-panel-ui - ( 
$ui -: 'navigation', 
$ui-tab-background-color: transparent, 
$ui-tab-background-color-over: #505050, 
$ui-tab-hintergrund-Farbe aktiv: #303030, 
$ui-tab-hintergrund-Verlauf: 'none', 
$ui-tab-background-gradient-over: 'none', 
$ui-tab-background-gradient-aktiv: 'none', 
$ui-tab-color: #acacac, 
$ui-tab-Farbe-over: #c4c4c4, 
$ui-tab-Farbe aktiv: #fff, 
$ui-tab-Glyphe-color: #acacac, 
$ui-tab-Glyphe-Farbe-over: #c4c4c4, 
$ui-tab-Glyphe-Farbe aktiv: #fff, 
$ui-tab-Glyphe ' -opacity: 1, 
$ui-tab-border-radius: 0, 
$ui-tab-border-width: 0, 
$ui-tab-inner border-width: 0, 
$ui-tab-padding: 24px, 
$ui-tab-Marge: 0, 
$ui-tab-font-size: 15px, 
$ui-tab-font-size-over: 15px, 
$ui-tab-font-size-aktiv: 15px, 
$ui-tab-line-height: 19px, 
$ui-tab-font-weight: bold 
$ui-tab-font-weight-over: Fett, 
$ui-tab-font-weight-aktiv: Fett, 
$ui-tab-Symbol-Breite: 24px, 
$ui-tab-Symbol-height: 24px, 
$ui-bar-background-color: #404040, 
$ui-bar-hintergrund-Verlauf: 'none', 
$ui-bar-padding -: 0, 
$ui-Streifen-Höhe: 0 
); 

Lassen ' s verwenden unsere benutzerdefinierte tabpanel anstelle von Standard-tabpanel in app/view/main/Main.js Also code der Datei muss wie folgt Aussehen:

 
Ext.define('ThemeDemoApp.Blick.main.Main', { 
extend: 'Ext.container.Container', 
erfordert: ['ThemeDemoApp.Blick.main.TabPanel'], 
xtype: 'app-main", 

controller: 'main', 
viewModel: { 
Typ: 'main' 
}, 

layout: { 
Typ: 'border' 
}, 

items: [{ 
xtype: 'panel', 
binden: { 
Titel: '{name}' 
}, 
region: 'west', 
html: '<ul><li>Dieser Bereich wird Häufig verwendet für die navigation, zum Beispiel mit einer "Baum" - Komponente.</li></ul>', 
Breite: 250, 
split: true, 
tbar: [{ 
text: 'Button', 
handler: 'onClickButton' 
}] 
},{ 
region: 'center', 
xtype: 'customtabpanel' 
}] 
}); 

Nun müssen wir bauen, app. (Es ist wichtig, um unsere neue Komponente in benötigt sonst sencha cmd ignorieren, was wir bisher getan haben 🙂 )

 
sencha app build 

And run app lokal:

 
sencha app watch 

Und schließlich öffnen Sie diese und das Ergebnis sehen: Demo-App