重用部分配置有哪些好方法?

时间:2016-08-24 18:33:51

标签: extjs extjs6

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

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

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

这可以完成工作,但是更好的方法是以类似的方式工作(不为每个配置文件创建唯一的xtype,或修改constructor或{{1}中的配置}})。我只是希望能够像以前一样将misc可重用的配置文件内联。

2 个答案:

答案 0 :(得分:1)

我认为大多数其他选项可能会降低可读性或只是看起来完全错综复杂 - 但您可以覆盖基类并包含“named”列的配置。

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

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 /* superseding value */ }

<强>缺点

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

» Fiddle

答案 1 :(得分:0)

看看这些配置:

defaults配置适用于整个容器,其中columns有自己的默认选项。

希望这有帮助!