Выполнить Ext.define через JSInterface

[nimarufa]

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

В Demos\Desktop\ имеется пример "Using JSInterface". Взял его за основу и, немного его переделав,  сделал тестовую программу (приложено).

Делаю следующий код (в комментариях прописан эквивалентный код ExtJS): 

procedure TMainForm.Test1;
var
  IJS : IUniJSInterface;
  JArr : array of TJSVariable;
  I : Integer;
begin
  IJS := Panel.JSInterface;

  // var xStore1 = Ext.create(
  //                  "Ext.data.Store",
  //                  {
  //                     fields: ["f1"],
  //                     data: [{f1:1}, {f1:2}, {f1:3}, {f1:4}, {f1:5}, {f1:6}, {f1:7}, {f1:8}, {f1:9}, {f1:10}]
  //                  }
  //               );

  SetLength(JArr, 10);
  for I := 0 to 9 do
  begin
    JArr[I].VType := vtObject;
    JArr[I].VObject := IJS.JSObject(['f1', I+1]);
  end;

  IJS.JSCallGlobal(
    'Ext.create', [
      'Ext.data.Store',
      IJS.JSObject([
        'fields', IJS.JSArray(['f1']),
        'data', IJS.JSArray(JArr)
      ])
    ],
    'var xStore1'
  );

  UniSession.RelocateVar('var xStore1', Panel.JSControl);

  // items:[
  //       {
  //        xtype:"combo",
  //        width:"175",
  //        y:40,
  //        fieldLabel:"Choose Item",
  //        displayField:"f1",
  //        valueField:"f1",
  //        queryMode:"local",
  //        store:xStore1,value:1
  //       }
  //      ]

  IJS.JSConfigArray('items', [
    IJS.JSObject([
      'xtype', 'combo',
      'width', '175',
      'y', 40,
      'fieldLabel', 'Choose Item',
      'displayField', 'f1',
      'valueField', 'f1',
      'queryMode', 'local',
      'store', IJS.JSStatement('xStore1'),
      'value', 1
    ])
  ]);
end;

Всё отлично работает.

Теперь в этот рабочий код вношу небольшую корректировку: меняю процедуру создания Store, с использованием Model и функции Ext.define:

procedure TMainForm.Test2;
var
  IJS : IUniJSInterface;
  JArr : array of TJSVariable;
  I : Integer;
begin
  IJS := Panel.JSInterface;

//   Ext.define('Model1', {
//        extend: 'Ext.data.Model',
//        fields: [
//            {name: 'fl', type: 'int'}
//        ]
//    });

  IJS.JSCallGlobal(
    'Ext.define',[
      'Model1',
      IJS.JSObject([
        'extend', 'Ext.data.Model',
        'fields', IJS.JSArray([
          IJS.JSObject([
            'name', 'fl', 'type', 'int'
          ])
        ])
      ])
    ]
  );

  // var xStore1 = Ext.create("Ext.data.Store",
  //   {
  //      model : 'Model1',
  //      data : [{f1:1},{f1:2},{f1:3},{f1:4},{f1:5},{f1:6},{f1:7},{f1:8},{f1:9},{f1:10}]
  //   }
  // );

  SetLength(JArr, 10);
  for I := 0 to 9 do
  begin
    JArr[I].VType := vtObject;
    JArr[I].VObject := IJS.JSObject(['f1', I+1]);
  end;

  IJS.JSCallGlobal(
    'Ext.create', [
      'Ext.data.Store',
      IJS.JSObject([
        'model', 'Model1',
        'data', IJS.JSArray(JArr)
      ])
    ],
    'var xStore1'
  );

// ...

И этот код уже НЕ рабочий. В консоле пишется, что не найден Model1, т.е. функция Ext.define выполнена не корректно.

Может кто-нибудь подсказать, что я не так делаю?

UniGuiChartTest3.zip

[nimarufa]

Вызвать Ext.define через JSInterface у меня так и не получилось. При любых вызовах в исходном коде страницы Ext.define-а нет, а остальное всё есть. Решил сделать немного по другому. Создал и подключил к проекту внешний js-файл, создал в этом файле функцию JavaScriptTest3 и в неё поместил вызов Ext.define из примера выше.

Вызов JavaScriptTest3 из кода проекта делаю так:

UniSession.JSCode('JavaScriptTest3();');

Таже процедура Test2 (см. последний код выше), только без Ext.define.

Хотя вызов JavaScriptTest3() я делю самой первой стройкой в процедуре Test2, в исходном коде страницы вызов этой функции идёт уже в самом конце, уже после остального кода ( ... var xStore1 = Ext.create("Ext.data.Store" ... прочего), и поэтому ничего у меня не работает. И чтобы я не делал это не меняется. Может кто знает как это исправить? Т.е. как сделать, чтобы JavaScriptTest3() вызывался до остального кода из Test2, а не после?

[nimarufa]

Сделал, что хотел. Правда не совсем так, как хотел, но меня устраивает. Основной целю было необходимость создания ExtJS компонента в UniGui приложении напрямую. Получилось сделать таким образом:

1) подключил внешний js-файл

2) в этом файле создал функцию с нужным кодом создания ExtJS-компонента. В этой функции в качестве параметра передавал ссылку на контейнер (панель UniGui);

3) функцию вызывал так:

procedure TMainForm.UniFormCreate(Sender: TObject);
var
  IJS : IUniJSInterface;
begin
  IJS := Panel.JSInterface;
  IJS.JSCallGlobal('CreateComboBox',[IJS.JSStatement(Panel.JSName),15]);
end;

4) код функции такой:

function CreateComboBox(cnt,maxvalue) {
  console.log("CreateComboBox:begin");

  Ext.define("Model1", {
        extend: "Ext.data.Model",
        fields: [
            {name: "fl", type: "int"}
        ]
    });

  xStore1 = Ext.create(
    "Ext.data.Store",
    {
      model: "Model1",
    }
  );

  for (let I = 1; I <= maxvalue; I++) {
    xStore1.add({f1:I});
  }

  var xCombo1 = Ext.create("Ext.form.ComboBox",
    {
      width: 175,
      y: 40,
      fieldLabel: "Choose Item",
      displayField: "f1",
      valueField: "f1",
      queryMode: "local",
      store: xStore1,
      value: 1
    }
  );

  cnt.add(xCombo1);

  console.log("CreateComboBox:end");
};