Проблема с layout вот в такой связке: unigui + mobile+ JSInterface + Ext.draw.Container

[nimarufa]

Здравствуйте.

Нам требуется в нашем приложении UniGui задействовать Draw-движок ExtJS (https://docs.sencha.com/extjs/7.5.1/guides/core_concepts/draw/drawing.html).
В десктопной версией нашего приложения у нас всё получилось. Проблема возникла в мобильной версии приложения. Проблема возникла с использованием Layout родительского контейнера. Я сделали тестовый пример, с демонстрацией этой проблемы.

В этом тестовом примере:
1) используется mfPage;
2) подключается внешний js-файл files/ExtJSDrawTest.js (приведён далее);
3) в этом js-файле объявляется (Ext.define) компонент ExtDrawTest, наследуемый от Ext.draw.Container. Этот компонент просто рисует чёрную рамку по своему периметру с небольшим отступом. Для рисования используется sprite rect;
4) в примере есть две главные формы, одна для десктопной версии (MainForm), вторая для мобильной (MainMForm);
5) на обе формы положена панель, которая растягивается нв всю форму: uniAlignmentClient, form.Layaout=fit;
6) для панели свойство Layout установили в fit, чтобы дочерний компонент тоже занял всё пространство панели;
7) в код форм добавили вот такой код:

procedure ...UniFormCreate(Sender: TObject);
begin
  Panel.JSInterface.JSCallGlobal('DrawTestInit',[]);

  Panel.JSInterface.JSCallGlobal(
    'DrawTest.CreateDrawTest',
    [Panel.JSInterface.JSStatement(Panel.JSName)],
    FTestVarName
  );
end;

8 ) первым вызовом я объявляю наш тестовый компонент, а вторым добавляем его на панель. Всё делается в JS-коде. Связывание панели и тестового компонента выполняется в JS-коде через использование метода add;
9) в десктопной версии всё отлично работает, а вот в мобильной - нет. В мобильной не происходит растягивания нашего тестового компонента (наследника от Ext.draw.Container) на всю родительскую панель. Если прописать width и height то всё будет нормально, но нужно чтобы было именно автоматическе растягивание;
10) если в js-коде вместо нашего компонента создать панель (Ext.panel.Panel, см. закомментированный код далее), то тоже всё отлично работает в обоих версиях приложения.

Подскажите, в чём может быть проблема?

Вот вес JS-код (ExtJSDrawTest.js) :

class DrawTest {
    static IsInited = false;
    
    static CreateDrawTest(cnt) {
        let test = null;
        
        test = Ext.create('ExtDrawTest', {
            renderTo: Ext.getBody()
        });

/*
        test = Ext.create('Ext.panel.Panel', {
            title: 'Панель 1',
            html: 'Привет мир!',
            style: 'margin: 10px',
            border: true 
        });
*/
        cnt.add(test);
        
        return test;
    };
}

function DrawTestInit() {
    if (DrawTest.IsInited) { return; }
    DrawTest.IsInited = true;
    
    Ext.define("ExtDrawTest", {
        extend: "Ext.draw.Container",

        plugins: {
            spriteevents: true
        },

        sprit1: null,
        
        renderedHeight: 0, 
        renderedWidth: 0,

        drawTest: function() {
            let suf = this.getSurface(),
                h = this.getHeight(), w = this.getWidth(), sp = null;
            
            suf.removeAll(true);
            
            sp = suf.add({
                type: 'rect',
                x: 10,
                y: 10,
                lineWidth: 4,
                strokeStyle: 'black',
                width: w-20,
                height: h-20,
                zindex: 0
            });
            
            this.sprit1 = sp;
        },
        
        renderTest: function() {
            this.drawTest();
        },
        
        renderFrame: function () {
            this.renderTest();
            this.callParent();
        }
    });
}

Весь код проекта тоже прикладываю

ExtJSDrawTest.zip

[nimarufa]

Проблема оказалась не с layout.

Если в JS-коде в метод drawTest добавить вывод в консоль: 

console.log('w=' + w + ', h=' + h);

то оказывается, что getHeight() и getWidth() для мобильной версии возвращают null. По этой причине прорисовки и не происходит.

Может кто знает почему так?

 

[Sherzod]

1 hour ago, nimarufa said:

то оказывается, что getHeight() и getWidth() для мобильной версии возвращают null. По этой причине прорисовки и не происходит.

h = this.getHeight(), w = this.getWidth()

 

h = this.getHeight() ?? this.element.getHeight(), w = this.getWidth() ?? this.element.getWidth()

 

[nimarufa]

Так заработало! Спасибо!

[Sherzod]

Отлично!