Question

我创建了一个自定义类

Ext.define('MyFormPanel, {
    extend: 'Ext.form.Panel',

    field1: null,
    field2: null

    constructor: function (config) {
            this.createFields();

            config.items.splice(0, 0, [
                    this.field1,
                    this.field2
            ]

            this.callParent([config]);
    }
});

但是它不会将我的字段添加到表单中。但是，如果我在config.items.splice交换

config.items[0] = this.field1;
config.items[1] = this.field2;

正确创建表单面板。

我的问题是我是否错误地使用了拼接命令？还有其他选择吗？

Answer 1

您没有正确使用拼接。它将元素作为单独的参数添加，而不是数组

还有其他问题：

缺少报价以关闭它的类名称
您对splice的来电未关闭，缺少)
您必须确保items是一个数组才能在其上调用splice
尚未将配置选项复制到this。

尝试以下https://fiddle.sencha.com/#fiddle/8ij

Ext.define('MyFormPanel', {
    extend: 'Ext.form.Panel',

    field1: null,
    field2: null

    constructor: function (config) {
            this.createFields();
            config.items = config.items || [];
            config.items.splice(0, 0, config.field1, config.field2);
            this.callParent([config]);
    }
});

你不应该覆盖构造函数。您应该覆盖initComponent

Ext.define('MyFormPanel', {
    extend: 'Ext.form.Panel',

    field1: null,
    field2: null

    initComponent: function () {
            this.createFields();
            this.items = this.items || [];
            this.items.splice(0, 0, this.field1, this.field2);
            this.callParent();
    }
});

Answer 2

从可读性的角度来看，很难确定构造函数正在尝试做什么。一些改进：

将所有的legwork移动到Juan建议的initComponent中创建字段。这包括对当前构造函数中对父initComponent的字段的依赖性。
您需要使用特殊的JavaScript保留字“arguments”（而不是[config]）开始调用super方法，这将使用调用当前方法的参数签名调用另一个方法。
非常确定您需要覆盖构造函数而不是initComponent的唯一时间是在使用不扩展任何组件的自定义类时。

为什么你不能使用Panel＃add（）方法在initComponent中添加字段？鉴于Ext API允许您直接添加字段，Splice感觉很讨厌。

Ext.define('MyFormPanel, {extend: 'Ext.form.Panel',
initComponent: function () {
  this.callParent(arguments);
  this.createFields();
},
createFields : function() {
     this.field1 = Ext.create('YourField1', {});
     this.add(this.field1);
     this.field2 = Ext.create('YourField2', {});
     this.add(this.field2);
}});

ExtJS类构造函数

2 个答案: