extjs - 在外面定义字段，然后带入项目灯

Question

我正在使用 extJs 6。我有如下代码，它可以是文本框或其他任何东西。我想为所有字段创建一个通用存储库，然后使用 xtype 或其他方法将其包含在报告中，因为相同的代码将在多个报告中使用。

  items: [
                {
                    xtype: 'combo',
                    fieldLabel: 'year',
                    name: 'Year',
                    displayField: 'Key',
                    valueField: 'Year',
                    value: new Date().getFullYear(),
                    store: {
                        type: 'years'
                    }
                },

它应该看起来像

   items: [
                    {
                        xtype: 'yearfield'
                    },
          ]

或者

  items: [
                            xtype: 'yearfield'
              ]

至于我应该如何定义这些字段以及它应该扩展什么。

Answer 1

由于您的旧字段是 of xtype:'combo'，它是 a Ext.form.field.ComboBox，因此您必须扩展它。

Ext.define('MyApp.view.MyOwnYearField',{
    extend:'Ext.form.field.ComboBox',
    xtype:'yearfield', // <- the xtype of MyOwnYearField is defined here
    fieldLabel: 'year',
    name: 'Year',
    displayField: 'Key',
    valueField: 'Year',
    value: new Date().getFullYear(),
    store: {
        type: 'years'
    }
});

在您可以使用之前xtype:'yearfield'，您必须加载文件所在的位置，例如通过将全名添加到requires列表中：

Ext.define('MyApp.view.SomeReport',{
    requires:[
        'MyApp.view.MyOwnYearField' // The class is loaded here
    ],
    items:[{
        xtype:'yearfield' // The class is referenced by xtype. 
                          // This is only possible after it has been loaded!
    }]