こんにちは、この記事では、ExtJS 6アプリケーションのテーマを作成する際の主なニュアンスについて説明しますが、この記事では、ExtJSの経験があることを前提としています。 例として最新のツールキットを使用します 。 従来のツールキットに特別な違いはありません。 この記事では、次の問題に対処します。

• 1.継承とトピックの作成
• 2.設計アプローチ
• 3. UIミックスインの使用

猫へようこそ。

はじめに：テストアプリケーションの作成

最新のツールキットのみを使用してテストアプリケーションを生成するには、次のコマンドを使用します。

sencha -sdk "\path\to\framework" generate app -modern TestApp "\path\to\application"
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

1.継承とトピックの作成

テーマを作成するとき、ExtJSは既存のテーマを継承できます。 自分でいくつかのことを最初から実装する必要があるか、または別のトピックから設計に参加する必要があるとすぐに判断する必要があります。 現在、ExtJS 6.0.1の最新バージョン（最新のツールキット ）には、8つの異なるトピックがあります。 それらの間の階層は次のとおりです。









クラシックツールキットには8つのメインテーマがあります（テーマネプチューンタッチなど、タッチ用に変更されたイベントもありますが、図には示されていません）。









このテーマまたはそのテーマがどれだけ自分に合っているかを確認するには、app.jsonで設定し、senchaアプリウォッチを使用して視聴します。 一部のテーマでは、個々のコントロールのスタイルが実装されていない場合があることも覚えておく必要があります（たとえば、togleglefieldはtheme-mountainviewに実装されていません）。



theme-tritonが親となるテーマを作成するには、次のコマンドを使用します。

 sencha generate theme --extend theme-triton my-test-theme
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その後、テーマmy-test-themeは「packages / local /」フォルダーに配置されます。 トピックのフォルダー構造を考慮してください。



package.json-トピックを説明するメインファイル。トピックのすべてのプロパティ（親、名前、バージョン、およびその依存関係）が表示されます。

sass-このフォルダーにはsassファイルのみが含まれます。その中には、変数作成用のvar 、ミックスイン作成用のsrc など 、カスタムミックスインと追加機能を作成するためのsrcフォルダーがあります。

リソース -このフォルダーには、画像やcssなどの静的リソースのみを保存する必要があります。

オーバーライド -jsファイルはこのフォルダーに格納され、既存のコントロールに追加機能を作成します。

2.設計アプローチ

テーマを作成したら、デザインの実装方法を正確に選択できます。 デザインを作成する方法は2つあります。適切な方法と、スクラップに対しては受け入れられず、実際にはありません。

• スタイルのオーバーライド -CSSファイルでExtJSスタイルをオーバーライドすることを前提としています（使用！重要）。 このメソッドは、sassに連絡したくない場合に使用でき、プロジェクトはそれほど大きくありません。 この方法のマイナス面は、冗長なCSSコードの作成です。
• UIミックスイン -本当の意味で、各コントロールに影響を与えることなく、任意のスタイルを実装できます。 ネイティブExtJSエンジンには、sassの理解が必要です。

3. UIミックスインの使用

トピックを作成したら、sassにグローバル変数を設定することをお勧めします。これにより、将来の生活が大幅に促進されます。 変数のリストはここにあります 。 グローバル変数を設定するには、ファイル「packages / local / my-test-theme / sass / var / Component.scss」を作成する必要があります。たとえば、次のように指定します。

 $base-color : #317040;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その後、結果を見ることができます（前後）。





$ base-colorを設定し、それだけで動作し、mixins（sass関数）を使用して色を変えることを強くお勧めします。 ExtJSのほぼすべてのコントロールには、独自のCSSミックスインがあります。 Buttonの例を使用したミックスインの使用を検討してください。 これを行うには、次の内容のファイル「my-test-theme / sass / src / Button.scss」を作成します。

 @include button-ui( $ui: 'lighten', $ui-button-color: lighten($base-color,20) //   20%   ); @include button-ui( $ui: 'darken', $ui-button-color: darken($base-color,20) //   20%   );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、必要なUIミックスインでボタンを追加できます。

  { xtype: 'button', ui: 'lighten', text: 'lighten button' },{ xtype: 'button', ui: 'darken', text: 'darken button' }, { xtype: 'button', text: 'original button' }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

結果は次のようになります。







したがって、UIミックスインを使用すると、あらゆるコントロールを免責で装飾できます。