javascript - extjsクラシックサンドボックスとクラシックテーマ

Question

ExtJS classic sandboxとclassicテーマの違いを知っている人はいますか?

examples/resources/classic sandboxでテーマを見つけましたが、右上隅のツールバーには 4 つのオプション (access、classic、grey、Neptune) しかありません。可能であれば、この 5 番目のオプションを設定するにはどうすればよいですか。 folder

Answer 1

Sandbox は一種の遊び場のように聞こえますが、私はそれを見たことはありません (補足: sanbox は default が使用しているときにプレフィックスx4を使用しますx)。とにかく、それまたは他のテーマを追加できます

サンドボックスの場合、ローダーには静的な名前のプレフィックスがあるため、微調整する必要がありますext-all。したがって、次のファイルの名前を変更します。

resources/css/ext-sandbox.css
resources/css/ext-sandbox-debug.css 

に

resources/css/ext-all-sandbox.css
resources/css/ext-all-sandbox-debug.css

その後オープン

examples/shared/options-toolbar.js

および次のコンポーネント定義

{
    xtype: 'combo',
    rtl: false,
    width: 170,
    labelWidth: 50,
    fieldLabel: 'Theme',
    displayField: 'name',
    valueField: 'value',
    labelStyle: 'cursor:move;',
    margin: '0 10 0 0',
    store: Ext.create('Ext.data.Store', {
         fields: ['value', 'name'],
         data : [
             { value: 'access', name: 'Accessibility' },
             { value: 'classic', name: 'Classic' },
             { value: 'gray', name: 'Gray' },
             { value: 'neptune', name: 'Neptune' }
         ]
    }),
/....

次のようなデータ配列に { 値: 'sandbox', name: 'Classic Sandbox' } を追加します

data : [
    { value: 'access', name: 'Accessibility' },
    { value: 'classic', name: 'Classic' },
    { value: 'gray', name: 'Gray' },
    { value: 'neptune', name: 'Neptune' },
    { value: 'sandbox', name: 'Classic Sandbox' } // new line
]

開いexamples/themes/themes.jsて見つけるfunction getSizing(id)

新しいテーマに基づいてサイズを追加します。サンドボックスの場合は変更します

if (theme == 'gray') {

に

if (theme == 'gray' || theme == 'sandbox') {

それでおしまい。これで、オプション コンボから選択できるようになり、ロードされます。