如何覆盖 extjs 中的文本字段组件并在整个应用程序中以多种形式使用它？

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}
    ]

});

但这不起作用，它 returns 一个错误

**

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

**

非常欢迎任何想法。

Answer 1

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

为了使用 xtype 创建您的 class，您应该提供 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 2

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

override 告诉 Ext 覆盖旧组件。因此 Ext.field.Input 被您定义的 updateValue 函数覆盖。这会更改每个现有的输入字段，因为它们都派生自 Ext.field.Input（例如文本字段、组合等），但它 而不是 创建一个名为 [=29 的新 xtype =].要创建新的 xtype，您可以扩展现有的 class (extend:'Ext.field.Input').

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

Answer 3

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

 Ext.define('xxx.xxxx.xxxx.MyTextField', {
            extend: 'Ext.field.Input',
            alias: 'widget.mytextfield',
            xtype: 'mytextfield',    
            updateValue: function(newValue) {
                var input = this.input;
                if (input && input.dom.value != newValue) {
                    input.dom.value = newValue;
                }
            }
        });

如何覆盖 extjs 中的文本字段组件并在整个应用程序中以多种形式使用它？

how can I override a the textfield component in extjs and use it in multiple forms accross the app?

extjs

sencha-touch

sencha-touch-2