読みやすくするためにコードを分割する方法は？

Question

私はコードを読みやすくするためにクリーンアップし、余分なjsファイルにいくつかのコードを入れたいのですが、私が試したことはありませんでした。

これはSubAppであり、まだExtJs 4.1を使用している大きなプロジェクト（Shopware）の一部です。

私は「拡張子.window.Window」を拡張する「main/window.js」を持っています。 initComponentは次のようになります。

initComponent: function() { 
    //... 
    me.dockedItems = [ 
     me.createTopToolbar(), 
    ]; 
    //... 
} 

createTopToolbarは、いくつかの要素でExt.toolbar.Toolbarを返す「/メインwindow.js」内部メソッドです。

私の目標は、このメソッドを余分なファイルに入れることです。

私はこの

Ext.define('myapp.myplugin.view.main.Toptoolbar', { 
    singleton: true, 
    createTopToolbar: function(){ 
     // ... 
     return toolbar; 
    } 

しかし）「メイン/ window.js」私はmyapp.myplugin.view.main.Toptoolbar.createTopToolbarを（使用して、それを呼び出すことはできません内部のような新しい静的/シングルトンクラスを作成してみました、又はmain.Toptoolbar.createTopToolbar（）

app.jsで私はこの

views: [ 
    'main.Window', 
    'main.Toptoolbar', 
], 

ようにそれを含めることを試みたが、それは仕事をdoesntの。

私はExtJsの経験がなく、何時間も検索しています...誰かが私を助けてくれることを願っています。

はありがとう

編集

私は関数内でツールバーを構築していますなぜ疑問に答えるために。 全体の機能次のようになります。

createTopToolbar: function() { 
    var me = this; 

    var shopStore = Ext.create('Shopware.apps.Base.store.Shop'); 

    shopStore.filters.clear(); 
    shopStore.load({ 
     callback: function(records) { 
      shopCombo.setValue(records[0].get('id')); 
     } 
    }); 

    var shopCombo = Ext.create('Ext.form.field.ComboBox', { 
     name: 'shop-combo', 
     fieldLabel: 'Shop', 
     store: shopStore, 
     labelAlign: 'right', 
     labelStyle: 'margin-top: 2px', 
     queryMode: 'local', 
     valueField: 'id', 
     editable: false, 
     displayField: 'name', 
     listeners: { 
      'select': function() { 
       if (this.store.getAt('0')) { 
        me.fireEvent('changeShop'); 
       } 
      } 
     } 
    }); 

    var toolbar = Ext.create('Ext.toolbar.Toolbar', { 
     dock: 'top', 
     ui: 'shopware-ui', 
     items: [ 
      '->', 
      shopCombo 
     ] 
    }); 

    return toolbar; 

}

と私は私の「メイン/ window.js」内部コード全体をたくありません。 私は本当に 'Ext.toolbar.Toolbar'を拡張していないので、このコンテキストではJaimeeが提供するxtypeソリューションを使用しているかどうかはわかりません。私はちょうど私の "shopCombo"コードの "ラッパー"を必要とし、アイテムとしてshopComboで 'Ext.toolbar.Toolbar'を返します。

Answer 1

他のビューと同じようにtoolbarを作成し、 'xtype'を作成してウィンドウに追加します。

Ext.define('myapp.myplugin.view.main.Toptoolbar', { 
    extends: 'Ext.toolbar.Toolbar', 
    xtype: 'mytoptoolbar', 
    dock: 'top', 
    ui: 'shopware-ui', 
    items :[ 
     '->', 
     { 
     xtype: 'combobox', 
     name: 'shop-combo', 
     fieldLabel: 'Shop', 
     store: 'shopStore', 
     labelAlign: 'right', 
     labelStyle: 'margin-top: 2px', 
     queryMode: 'local', 
     valueField: 'id', 
     editable: false, 
     displayField: 'name', 
     listeners: { 
      'select': function() { 
       if (this.store.getAt('0')) { 
        me.fireEvent('changeShop'); 
       } 
      } 
     } 
    }] 
}); 

そして単にあなたのようなあなたのウィンドウのドッキングアイテムに追加し、他の構成要素になります。

initComponent: function() { 
    //... 
    me.dockedItems = [ 
     { 
      xtype: 'mytoptoolbar' 
     } 
    ]; 
    //... 
} 

と負荷リスナーがストアに追加することができます。

Ext.define('Shopware.apps.Base.store.Shop', { 
    // .... 
    listeners: 
    { 
     load: function() { 
      Ext.ComponentQuery.query("combobox[name='shop-combo']")[0].setValue(...) 
     } 
    } 

ただし、予測可能な値であれば、コンボボックスの開始値を設定することをおすすめします。まだ店舗の店舗設定​​に店舗を追加する必要があります。

Answer 2

あなたがそうのようなファクトリパターンを使用することができます。そして、あなたはツールバーをこの方法で作成することができます

Ext.define('ToolbarFactory', { 
alias : 'main.ToolbarFactory', 
statics : { 

    /** 
    * create the toolbar factory 
    */ 
    factory : function() { 
     console.log('create the toolbar'); 
     var toolbar = ....; 
     return toolbar; 

    } 
} 
}); 

：

​​

あなたがrequiresステートメントを追加する必要があり、ビルドプロセスに応じ。