Как я могу переопределить компонент текстового поля в 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} 
    ] 

}); 

Но это не работает, она возвращает ошибку

**

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

**

Любая идея приветствуется.

Answer 1

У вас есть по крайней мере три вопроса, один из них отсутствуют кавычки xtype (должно быть xtype : 'mytextfield').

override сообщает Ext, чтобы переопределить старый компонент. Таким образом, Ext.field.Input переопределяется с помощью функции updateValue, которую вы определили. Это изменяет каждое существующее поле ввода, потому что все они происходят от Ext.field.Input (например, текстовое поле, комбо и т. Д.), Но не создать новый тип xtype по имени mytextfield. Чтобы создать новый тип xtype, вы расширяете существующий класс (extend:'Ext.field.Input').

Наконец, идея при использовании требует, чтобы путь и имя файла и квалифицировали имя совпадения вида. Если у вас есть приложение под названием 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 на имена пакетов. при определении класса он всегда должен быть полностью квалифицированным.

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; 
       } 
      } 
     });