ここでこのトピックに関する詳細な回答/情報を見つけました: http://www.sencha.com/products/extjs/up-and-running/themes-introduction
とても助かります。
詳細:
基本的に、この例をローカルで試してみたかった: http://dev.sencha.com/extjs/5.0.0/examples/kitchensink/#side-navigation-tabs
だから、これらは私が尋ねたことを達成するためにやるべきことです：
まず、Sencha Cmdを使用してワークスペースを生成する必要があります。ワークスペースには、テーマを含む ext lib と、オプションでテーマを含むアプリ + があります。-extオプションは、このコマンドがワークスペース内に extjs をダウンロードすることを意味します。これは非常に役立ちます。
sencha generate workspace -ext my-workspace
次に、ワークスペースに移動して、アプリケーションを生成する必要があります。( -sdk extは、extjs lib が ext ディレクトリにあることを意味します。ExtJs lib は、アプリをビルドするとき、またはアプリで他の操作を行うときに常に使用されます)
cd マイ ワークスペース
sencha -sdk ext generate app ThemeDemoApp theme-demo-app
タブパネルにカスタム UI を追加したかったのです。そのタブパネルを適切なディレクトリに作成しましょう:
cd テーマ-デモ-アプリ
vim app/view/main/TabPanel.js
私はvimを使っていますが、どのテキストエディタでもできます。このコードをそのファイルに入れます。
Ext.define('ThemeDemoApp.view.main.TabPanel', {
拡張: 'Ext.tab.Panel',
xtype: 'customtabpanel',
ui: 'ナビゲーション',
tabPosition: '左',
タブローテーション: 0,
タブバー: {
ボーダー: false
}、
項目: [{
タイトル: 'タブ 1',
html: 'テキスト コンテンツ'
}、{
タイトル: 'タブ 2',
html: 'テキスト コンテンツ'
}、{
タイトル: 'タブ 3',
html: 'テキスト コンテンツ'
}]
});
ここで、css でui:'navigation'を定義する必要があります。このために、同じディレクトリにTabPanel.scssファイルを作成する必要があります。これは、クラスがsass/srcディレクトリの app ( view/main )に対して相対的であるためです。
mkdir sass/src/view
mkdir sass/src/view/main
vim sass/src/view/main/TabPanel.scss
そして、テキストエディタを使用してそのファイルにsaasスクリプトを入れます（私はvimを使用しています）：
@include extjs-tab-panel-ui(
$ui: 'ナビゲーション',
$ui-tab-background-color: 透明、
$ui-tab-background-color-over: #505050,
$ui-tab-background-color-active: #303030,
$ui-tab-background-gradient: 'なし',
$ui-tab-background-gradient-over: 'なし',
$ui-tab-background-gradient-active: 'なし',
$ui-tab-color: #acacac,
$ui-tab-color-over: #c4c4c4,
$ui-tab-color-active: #fff,
$ui-tab-glyph-color: #acacac,
$ui-tab-glyph-color-over: #c4c4c4,
$ui-tab-glyph-color-active: #fff,
$ui-tab-glyph-opacity: 1,
$ui-tab-border-radius: 0,
$ui-tab-border-width: 0,
$ui-tab-inner-border-width: 0,
$ui-tab-padding: 24px,
$ui-タブ-マージン: 0,
$ui-tab-font-size: 15px,
$ui-tab-font-size-over: 15px,
$ui-tab-font-size-active: 15px,
$ui-tab-line-height: 19px,
$ui-tab-font-weight: 太字、
$ui-tab-font-weight-over: 太字、
$ui-tab-font-weight-active: 太字、
$ui-tab-icon-width: 24px,
$ui-tab-icon-height: 24px,
$ui-bar-background-color: #404040,
$ui-bar-background-gradient: 'なし',
$ui-bar-padding: 0,
$ui ストリップ高さ: 0
);
app/view/main/Main.jsで使用されるデフォルトのタブパネルの代わりに、カスタム タブパネルを使用してみましょう。したがって、そのファイルのコードは次のようになります。
Ext.define('ThemeDemoApp.view.main.Main', {
拡張: 'Ext.container.Container',
必要: ['ThemeDemoApp.view.main.TabPanel'],
xtype: 'アプリメイン',
コントローラ: 'メイン',
ビューモデル: {
タイプ: 「メイン」
}、
レイアウト： {
タイプ: 'ボーダー'
}、
項目: [{
xtype: 'パネル',
練る： {
タイトル: '{name}'
}、
地域: '西',
html: '<ul><li>この領域は、「ツリー」コンポーネントを使用するなど、一般的にナビゲーションに使用されます。</li></ul>',
幅: 250,
分割: 真、
tbar: [{
テキスト: 'ボタン',
ハンドラ: 'onClickButton'
}]
},{
地域: 'センター',
xtype: 'customtabpanel'
}]
});
次に、アプリをビルドする必要があります。( requiresに新しいコンポーネントを配置することが重要です。そうしないと、sencha cmd はこれまでに行ったことを無視します:))
煎茶アプリビルド
アプリをローカルで実行します。
煎茶アプリウォッチ
そして最後にこれを開いて結果を見てください: Demo App