Hello. Please help me deal with the following situation:

Ext Designer ( ExtJs visual design ExtJs ) outputs two files with a finished program. The first one looks like this (EditingTemplateWindow.js):

 EditingTemplateWindow = Ext.extend(EditingTemplateWindowUi, { initComponent: function() { EditingTemplateWindow.superclass.initComponent.call(this); } });

In the second, the implementation of everything directly:

 EditingTemplateWindowUi = Ext.extend(Ext.Window, { // Реализация всего .... // ... .... .... .... });

Further, it all starts fine from the following code:

  Ext.onReady(function() { Ext.QuickTips.init(); var cmp1 = new EditingTemplateWindow({ renderTo: Ext.getBody() }); cmp1.show(); });

And the problem is this. I'm in my program, following the pattern trying to open my this window. I do this:

 //Глобальная переменная var editingTemplateWindow; // Логика программы на ExtJs... ... ... //Что-то произошло, и надо вывести пользователю мое окно: editingTemplateWindow = new EditingTemplateWindow();

Here the console gives an error: EditingTemplateWindow is not a constructor .
Question: how can I make the program work? And what Ext.extend function Ext.extend ?

  • Something not a lot of answers: (... and views - Anton Mukhin
  • I didn’t work with ExtJS, I can only assume: EditingTemplateWindow = function () {return Ext.extend (...); } And to check: console.log(Ext.extend(...)); . - ling

1 answer 1

The problem was that the JS files are not loaded in the correct order. Those. EditingTemplateWindow here is like a plugin for EditingTemplateWindowUi ( EditingTemplateWindow extends EditingTemplateWindowUi ).
It was then that JavaScript started to swear that the EditingTemplateWindow not a constructor. This was due to the fact that the EditingTemplateWindow variable could not be initialized as it should because EditingTemplateWindowUi was not found, which was immersed after.

As for the definition of Ext.extend , this Ext.extend allows for full-fledged inheritance according to the OOP paradigm. Those. This function returns the definition of a new class. This function has two call options:

 Ext.extend(Функция_суперкласса, переопределения (или overrides) )

and

 Ext.extend( Функция_подкласс, Функция_суперкласс, переопределения (или overrides))

And here are examples of calls for both methods:

 ex1 = Ext.extend(Ext.Window, { //переопределения методов функции (класса) Ext.Window //например поля width this.width = 666, //и не забываем вызвать метод инициализации суперкласса (Ext.Window) initComponent: function() { EditingTemplateWindow.superclass.initComponent.call(this);//вот оно } }); //вот пример вызова: var ee = new ex1(); ee.show();

Second

 function newClass(config) { // конструктор config.emptyText = "'5' не допускается"; newClass.superclass.constructor.call(this, config); }; Ext.extend(newClass, Ext.form.ComboBox, { setValue: function(v) { if (v == 5) { // если v равно 5, сообщить пользователю alert("'5' не допускается"); } else { // иначе вызываем метод родителя newClass.superclass.setValue.call(this, v); } } });

Well, that's it.