javascript - 从不同的文件 extjs 加载列

Question

我有很多这样的网格。我想从另一个 js 文件加载基本网格和列。这在 Extjs4 中可能吗？

Ext.define('App.view.MyGrid',
{
    extend : 'Ext.grid.Panel',
    alias : 'widget.resultsList',
    id : 'myGrid',
    header : false,
    columnLines : true,
    initComponent : function() {
    this.store = 'MyStore';
    this.columns = [
            // Can this loaded from a another file
    ]
  }
});

Answer 1

不确定这是否是最好的方法，但您可以使用 mixin 来做到这一点：

Ext.define('App.mixin.MyGridColumnsMixin',{
  getColumns : function() { 
    return [{}]; //your columns here
  }
});

Ext.define('App.view.MyGrid',{
  requires : ['App.mixin.MyGridColumnsMixin'],
  mixins : ['App.mixin.MyGridColumnsMixin'],
  initComponent : function() {
    var me = this,
        columns = me.getColumns(); //method of the mixin
    //applying the list of columns in this component
    Ext.applyIf(me, {
      columns: columns
    });
    me.callParent(arguments);
  }

});

Answer 2

它完全可行且完全直截了当。

Ext.define('App.view.BaseGrid',{
    extend : 'Ext.grid.Panel',
    header : false,
    columnLines : true,
    initComponent : function() {
        this.store = 'MyStore';
        this.columns = [{text:'fake',dataIndex:'fakeid'}];
        this.callParent(arguments);
    }
});

//从另一个文件加载

Ext.define('App.view.MyGrid', {
    extend : 'App.view.BaseGrid',
    alias : 'widget.resultsList',        
    initComponent : function() {
         this.store = 'MyOherStore';
         this.columns = [{text:'real',dataIndex:'id'}];
         this.callParent(arguments);
     }
});