修改

Question

我想清理我的代码以获得更好的可读性，并将一些代码放在额外的js文件中，但我尝试过的任何代码都没有。

它是SubApp，是仍在使用ExtJs 4.1的大型项目（Shopware）的一部分。

我有一个＆＃34; main / window.js＆＃34;扩展＆＃39; Ext.window.Window＆＃39;。 initComponent看起来像这样：

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

createTopToolbar是一个内部的方法＆＃34; main / window.js＆＃34;返回带有一些元素的Ext.toolbar.Toolbar。

我的目标是将此方法放在一个额外的文件中。

我试图像这样创建一个新的静态/单例类

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

但在＆＃34; main / window.js＆＃34;我不能使用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;

}

我不希望我的＆＃34; main / window.js＆＃34;中的整个代码。我不确定在这种情况下使用Jaimee提供的xtype解决方案，因为我不会真正扩展＆＃39; Ext.toolbar.Toolbar＆＃39;。我只需要一个＆＃34;包装＆＃34;为我的＆＃34; shopCombo＆＃34;代码并返回＆＃39; Ext.toolbar.Toolbar＆＃39;以shopCombo作为项目。

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;

    }
} 
});

然后你可以这样创建工具栏：

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

根据您的构建过程，您可能需要添加requires语句。

如何拆分代码以提高可读性？

修改

2 个答案: