How to split up code for better readability?

Question

I want to clean up my code for better readability and put some code in extra js-files but nothing I've tried has worked.

It's a SubApp and part of a larger Project (Shopware) that is still using ExtJs 4.1.

I have a "main/window.js" that extends 'Ext.window.Window'. initComponent looks like this:

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

createTopToolbar is a Method inside "main/window.js" that return a Ext.toolbar.Toolbar with some elements.

My goal is to put this method in an extra file.

I tried to create a new static/singleton class like this

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

But inside "main/window.js" i cannot call it using myapp.myplugin.view.main.Toptoolbar.createTopToolbar(), or main.Toptoolbar.createTopToolbar()

In app.js i tried to include it like this

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

but it doesnt work.

I have no experience with ExtJs and search for hours...hope someone can help me.

Thank you

Edit

To answer the question why i'm building the toolbar within a function. The whole functions looks like this:

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;

}

And i dont want the whole code inside my "main/window.js". I'm not sure using the xtype solution provided by Jaimee in this context because i dont realy extend 'Ext.toolbar.Toolbar'. I just need a "wrapper" for my "shopCombo" code and return 'Ext.toolbar.Toolbar' with shopCombo as an item.

Answer 1

Create the toolbar as you would any other view, and create an 'xtype' to add it to your window.

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

And then simply add it to your window's docked items like you would any other component:

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

And the load listener can be added to the store.

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

However, I'd suggest just setting a starting value for the combobox if it's a predictable value. You'll need to add the store to your controller's stores config if you haven't already.

Answer 2

You could use a factory pattern like so:

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

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

    }
} 
});

Then you can create the Toolbar this way:

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

Depending on your build process you may need to add a requires statement.