我想清理我的代碼以獲得更好的可讀性，並將一些代碼放在額外的js文件中，但沒有任何我嘗試過的。如何分割代碼以提高可讀性？

這是一個子應用程序，並且仍然使用ExtJs 4.1的較大項目（Shopware）的一部分。

我有一個「main/window.js」，它擴展了'Ext.window.Window'。 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', 
],

，但它不工作。

我沒有經驗與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」裏面的整個代碼。我不確定在這種情況下使用Jaimee提供的xtype解決方案，因爲我不真正擴展'Ext.toolbar.Toolbar'。我只需要「shopCombo」代碼的「包裝器」，並將shopCombo的「Ext.toolbar.Toolbar」作爲一個項目返回。

來源

2017-04-12 Manuel

我很好奇你爲什麼要在一個函數中構建工具欄，你能解釋一下這個動機嗎？ – Jaimee

@Jaimee我編輯了我的原始問題來解釋我的動機。 – Manuel

有兩種很好的模式。您可以創建工具欄作爲您通過xtype引用的新視圖，或將其添加爲混合。 – Alexander

像創建其他視圖一樣創建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(...) 
     } 
    }

但是，我建議只是設置組合框的起始值，如果它是一個可預測的值。如果你還沒有，你需要將商店添加到你的控制器的商店配置中。

來源

2017-04-12 16:16:28 Jaimee

謝謝。我意識到這一點，但它不適合我。這樣做我擴展了一個類（Ext.toolbar.Toolbar），而不添加任何感覺奇怪的新功能。爲了澄清事情，我會延長我的問題。 – Manuel

@曼努埃爾我已經用你提供的新信息修改了我的答案。擴展類允許您添加自己的配置並創建一個可以輕鬆添加到應用程序中的視圖的自定義組件。如果你的目標是分裂並簡化你的代碼，我會推薦它 - 沒有要求擴展一個類的大規模改變。 – Jaimee

啊好吧謝謝你的代碼和解釋。 – Manuel

你可以使用工廠模式，像這樣：

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

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

    } 
} 
});

然後你就可以創建工具欄是這樣的：

根據您的構建過程中，你可能需要添加一個requires聲明。

來源

2017-04-13 10:38:10 oberbics

感謝您使用此解決方案。 – Manuel

如何分割代碼以提高可讀性？

編輯

回答

相關問題