extjs - 重用部分配置有哪些好方法？

Question

例如，我有几个共享公共(public)列的网格(问题不限于列，任何配置对象)。目前我正在做这样的事情:

//columns.js
var columns = {"reusable1": {...}, "reusable2": {...}};

//grid views
Ext.define('MyApp.view.Grid', {
    columns: [
        {text:'inline column1'},
        columns.reusable1,
        columns.reusable2,
        {text:'inline column2'},
    ]
});

这样就完成了工作，但是以类似的方式工作的更好方法是什么(无需为每个配置 block 创建唯一的 xtype，或修改 constructor 或 initComponent 中的配置)。我只是希望能够像以前一样将其他可重用的配置片段内联。

Answer 1

我认为大多数其他选项可能会降低可读性或看起来完全令人费解 - 但您可以重写基类并包括 “命名” 列的配置。

我假设当您说“不在构造函数中修改配置”时，您指的是实现列的网格而不是可以在其他地方整理的类似逻辑。

Ext.define('App.override.grid.column.Column', {
    override: 'Ext.grid.column.Column',

    config: {
        name: null    
    },

    statics: {
        namedColumns: {
            reusable1: { /* ... */ },
            reusable2: { /* ... */ },
            // ...
        }
    },

    constructor: function(args){
        var _args = args || {},
            statics = Ext.grid.column.Column,
            defaults = statics.namedColumns[_args.name] || {};
        this.callParent([Ext.apply({}, _args, defaults)]);
    }
});

用法

Ext.define('App.view.Grid', {
    columns: [
        { text: 'inline column1' },
        { name: 'reusable1'      },
        { name: 'reusable2'      },
        { text: 'inline column2' },
    ]
});

优势

• 在项目结构中整理，而不是存在于全局范围内。
• 避免潜在的依赖性问题，因为 Sencha CMD 将确保在声明任何网格之前覆盖(并通过扩展这些默认值)存在。
• 命名配置更灵活，可以内联巧妙地覆盖。
  例如 { name: 'reusable', flex: 2/*取代值 */

缺点

• xtype 不能用作默认配置的一部分，除了常规网格列之外，仍然需要内联指定它。
  例如 { xtype: 'datecolumn', name: 'some-defaults' }

» Fiddle