가독성을 높이기 위해 코드를 분할하는 방법은 무엇입니까?

Question

가독성을 높이기 위해 코드를 정리하고 여분의 js 파일에 코드를 넣고 싶지만 시도한 것은 아무것도 없습니다.

이것은 SubJApp이고 ExtJs 4.1을 사용하는 더 큰 Project (Shopware)의 일부입니다.

"Ext.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; 
    } 

좋아하지만 내가 myapp.myplugin.view.main.Toptoolbar.createTopToolbar를 사용하여 호출 할 수 없습니다 "/ 주요 window.js"안에 새로운 정적/싱글 톤 클래스를 만들려고() 또는 main.Toptoolbar.createTopToolbar()는 app.js에서

이런

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

처럼 포함하려했지만 작동 그다지.

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'을 만들어 창에 추가하십시오.

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

그리고 부하 리스너가 저장소에 추가 할 수 있습니다 다음

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'); 
       } 
      } 
     } 
    }] 
}); 

그리고

은 단순히 다른 모든 구성 요소처럼 창문의 도킹 항목에 추가합니다.

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; 

    } 
} 
}); 

는 그런 다음 도구 모음이 방법을 만들 수 있습니다

initComponent: function() { 
    //... 
    me.dockedItems = [ 
     ToolbarFactory.factory(); 
    ]; 
    //... 
} 

을 빌드 프로세스에 따라 당신이 requires 문을 추가해야 할 수도 있습니다.