Question

我正在考虑在视图中创建一个名为MyTextField.js的文件，其内容为

Ext.define('MyTextField',
{

override: 'Ext.field.Input',
xtype: 'mytextfield',

    updateValue: function(newValue) {
        var input = this.input;
        if (input && input.dom.value != newValue) {
            input.dom.value = newValue;
        }
    }
});

然后在我的其他视图FormView.js

中使用它

Ext.define('AnotherScreen', {
    extend: 'Ext.form.Panel',
    xtype: 'anotherscreen',
    controller: 'controllerx',
    viewModel: 'viewmodelx',
     requires: [
        'MyTextField'
    ],
    layout: 'vbox',
    items: [
             { xtype : mytextfield}
    ]

});

但这不起作用，它会返回错误

**

Uncaught Error: [Ext.create] Unrecognized class name / alias: 
MyTextField

**

非常欢迎任何想法。

Answer 1

您至少有三个问题，其中一个是缺少xtype周围的引号（应该是xtype : 'mytextfield'）。

override告诉Ext覆盖旧组件。因此，Ext.field.Input将被您定义的updateValue函数覆盖。这会更改每个现有输入字段，因为它们都来自Ext.field.Input（例如文本字段，组合等），但不创建名为“mytextfield”的新xtype。要创建新的xtype，可以扩展现有的类（extend:'Ext.field.Input'）。

最后，使用require时的想法是文件的路径和名称以及视图的限定名称匹配。如果您有一个名为MyAppName的应用程序，则在app/view/MyTextField.js中定义组件MyAppName.view.MyTextField。然后，当您使用requires:['MyAppName.view.MyTextField']时，应正确解析文件路径，并且可以从那里按xtype引用组件。

Answer 2

我相信您应该使用extend来创建自定义类。

为了使用xtype创建您的课程，您应该提供alias。

下面显示的内容应该有效：

Ext.define('MyTextField', {
    extend: 'Ext.field.Input',
    alias: 'widget.mytextfield',

    updateValue: function(newValue) {
        var input = this.input;
        if (input && input.dom.value != newValue) {
            input.dom.value = newValue;
        }
    }
});

Answer 3

我相信这应该有效。每当我们定义任何课程时，我们应该扩展父类而不是覆盖它。请将xxxx更改为包名。在定义类时，它应始终是完全限定的名称。

Node

如何覆盖extjs中的textfield组件并在应用程序中以多种形式使用它？

3 个答案: