ExtJS素材のテーマが機能していません

Question

私はExtJS 6.2.1を使用しています。私が直面している問題は、重要なテーマは私のページ全体のレイアウトを壊すことです。これは1つのウィンドウウィジェットだけで済みます。それは私が私のページへの材料のテーマを含ん方法です：

<link rel="stylesheet" href="/ext-6.2.1/build/modern/theme-material/resources/theme-material-all.css" type="text/css" /> 

そして、それはどのようなものか、この：私はそうのようなトリトンのテーマに切り替えるしかし、もし

：

<link rel="stylesheet" href="/ext-6.2.1/build/classic/theme-triton/resources/theme-triton-all.css" type="text/css" /> 

すべてが動作し始めます。

だから私はそれをどうやって間違っていて、どうすれば修正できますか？

Answer 1

classic-toolkitアプリケーションでは、modern-toolkitテーマを使用することはできません。これらはどちらも異なる構成要素を持っています&異なる設定プロパティ。

例えば、古典的なツールキットでは、Ext.window.Windowコンポーネントがあります。しかし、近代的なツールキットはExt.MessageBoxのコンポーネントを持っています。ラベルテキストを与えるために、古典ツールキットではfieldLabelを使用し、現代ツールキットではlabelを使用します。

モダンツールキットのテーマには、モダンキットのみでサポートされているコンポーネントのスタイルが含まれています。クラシックツールキットコンポーネントのスタイルはありません。そのため、出力が得られます。 同じ出力を達成するには、両方のツールキットで全体のコードが異なります。従来の&モダンツールキットの両方で設計されたポップアップの例を参照してください。

クラシック・ツールキットのポップアップ

Ext.create('Ext.window.Window', { 
    title: 'Login', 
width: 400, 
    items: [{ 
        xtype: 'textfield', 
        fieldLabel: 'User Name', 
        width:'100%', 
       }, 
       { 
        xtype: 'textfield', 
        width:'100%', 
        fieldLabel: 'Password', 
       }], 
       buttons:[{text:'Login'}] 
}).show(); 

現代のツールキットのポップアップ

Ext.create('Ext.MessageBox', { // window changes to messagebox 
    title: 'Login', 
width: 400, 
    items: [{ 
        xtype: 'textfield', 
        label: 'User Name', //fieldLabel changes to label 
        width:'100%', 
       }, 
       { 
        xtype: 'textfield', 
        width:'100%', 
        label: 'Password', 
       }], 
       buttons:[{text:'Login'}] 
}).show();