Использование ExtJS через JSInterface

[nimarufa]

Здравствуйте!
Используем UniGui в своём проекте. Потребовалось реализовать построение графиков нестандартного вида. Графики из UniGui, из ExtJS, да и из других библиотек не подходят. Поэтому скорее всего придётся реализовывать что-то совё. При реализации хочется использовать некоторые возможности ExtJS. Возникли вопрос с тем как это сделать в UniGui-проекте. На базе "...\uniGUI\Demos\Desktop\Using JSInterface" сделал свой тестовый пример UniGuiChartTest1.zip (приложен). Вывести кнопку средствами ExtJS получилось, а вот с графиками (в примере два варианта реализации) возникли проблемы - не заработало. Не могли бы вы подсказать, что я не так делаю? Особенно интересует второй вариант (вариант графика, а не способа  вывода), где график инициализируется во внешнем файле ExtJSChartTest.js . Это наиболее близко к тому, что мне нужно (хотя всё равно не полностью). Средствами ExtJS пример из ExtJSChartTest.js на сайте sencha.com построить удалось (см. Test.jpg).

// ...

procedure TMainForm.Test1;
var
  JSI : IUniJSInterface;
begin
  JSI := Panel.JSInterface;

  JSI.JSCallGlobal(
    'Ext.create',
    ['Ext.Button',
     JSI.JSObject([
       'width', 200,
       'text', 'Button ...'
     ])
    ],
    'var xButton'
  );

  JSI.JSConfigArray('items', [JSI.JSStatement('xButton')]);

  UniSession.RelocateVar('var xButton', Panel.JSControl);
end;

procedure TMainForm.Test2;
var
  JSI : IUniJSInterface;
begin
  JSI := Panel.JSInterface;

  JSI.JSConfigArray('items', [
    JSI.JSObject(['xtype', 'button', 'width', 200, 'text', 'Button ...'])
  ]);
end;

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  // Ok:
  // Test1();

  // Ok:
  // Test2();

  // Error:
  // Test3();

  // Error:
  Test4();
end;

procedure TMainForm.Test3;
var
  JSI : IUniJSInterface;
begin
  JSI := Panel.JSInterface;

  JSI.JSCallGlobal(
    'Ext.create', [
      'Ext.chart.Chart',
        JSI.JSObject([
          'renderTo', 'document.body',
          'width', 400,
          'height', 300,
          'store', JSI.JSObject([
            'fields', JSI.JSArray(['time', 'value']),
            'data', JSI.JSArray([
              JSI.JSObject([
                'time', 1,
                'value', 14
              ]),
              JSI.JSObject([
                'time', 2,
                'value', 11
              ]),
              JSI.JSObject([
                'time', 3,
                'value', 13
              ]),
              JSI.JSObject([
                'time', 4,
                'value', 15
              ]),
              JSI.JSObject([
                'time', 5,
                'value', 12
              ])
            ])
          ]),
          'axes', JSI.JSArray([
            JSI.JSObject([
              'title', 'Value 1',
              'type',  'Numeric',
              'position', 'left',
              'fields', JSI.JSArray(['value']),
              'minimum', 0,
              'maximum', 20
            ]),
            JSI.JSObject([
              'title', 'Time 1',
              'type',  'Numeric',
              'position', 'bottom',
              'fields', JSI.JSArray(['time']),
              'minimum', 0,
              'maximum', 10
            ])
          ]),
          'series',JSI.JSArray([
             JSI.JSObject([
               'type', 'line',
               'xField', 'time',
               'yField', 'value'
             ])
          ])
       ])
    ],
    'var xChart'
  );

  JSI.JSConfigArray('items', [JSI.JSStatement('xChart')]);

  UniSession.RelocateVar('var xChart', Panel.JSControl);
end;

procedure TMainForm.Test4;
var
  JSI : IUniJSInterface;
begin
  JSI := Panel.JSInterface;

  JSI.JSConfigArray('items', [JSI.JSStatement('mychart')]); // from ExtJSChartTest.js
end;

// ...

procedure TUniServerModule.UniGUIServerModuleCreate(Sender: TObject);
begin
  CustomFiles.Add('files/ExtJSChartTest.js');
end;

// ...

UniGuiChartTest1.zip ExtJSChartTest.js

[nimarufa]

Получилось сделать то что хотел. Сделал следующим образом:

1) подключил внешний js-файл и в нём создал функцию;

2) код создания ExtJS-диаграммы перенёс в эту функцию;

3) через параметры функции передаю ссылку на контейнер (панель UniGui);

4) график помещаю на панель с помощью функции add контейнера;

5) вызов функции делаю так:

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

6) код функции у меня был такой:

function CreateChart(cnt) {
    Ext.define("Model1", {
        extend: "Ext.data.Model",
        fields: [{
                name: "depth",
                type: "int"
            }, {
                name: "time",
                type: "auto"
            }, {
                name: "value1",
                type: "number"
            }, {
                name: "value2",
                type: "number"
            }
        ]
    });

    xStore1 = Ext.create(
            "Ext.data.Store", {
            model: "Model1",
            data: [{
                    "depth": 1,
                    'time': new Date('Jan 1 2010').getTime(),
                    "value1": 18.34,
                    "value2": 0.04
                }, {
                    "depth": 2,
                    'time': new Date('Jan 2 2010').getTime(),
                    "value1": 2.67,
                    "value2": 14.87
                }, {
                    "depth": 3,
                    'time': new Date('Jan 3 2010').getTime(),
                    "value1": 1.90,
                    "value2": 5.72
                }, {
                    "depth": 4,
                    'time': new Date('Jan 4 2010').getTime(),
                    "value1": 21.37,
                    "value2": 2.13
                }, {
                    "depth": 5,
                    'time': new Date('Jan 5 2010').getTime(),
                    "value1": 2.67,
                    "value2": 8.53
                }, {
                    "depth": 6,
                    'time': new Date('Jan 6 2010').getTime(),
                    "value1": 18.22,
                    "value2": 4.62
                }, {
                    "depth": 7,
                    'time': new Date('Jan 7 2010').getTime(),
                    "value1": 28.51,
                    "value2": 12.43
                }, {
                    "depth": 8,
                    'time': new Date('Jan 8 2010').getTime(),
                    "value1": 34.43,
                    "value2": 4.40
                }, {
                    "depth": 9,
                    'time': new Date('Jan 9 2010').getTime(),
                    "value1": 21.65,
                    "value2": 13.87
                }, {
                    "depth": 10,
                    'time': new Date('Jan 10 2010').getTime(),
                    "value1": 12.98,
                    "value2": 35.44
                }, {
                    "depth": 11,
                    'time': new Date('Jan 11 2010').getTime(),
                    "value1": 22.96,
                    "value2": 38.70
                }, {
                    "depth": 12,
                    'time': new Date('Jan 12 2010').getTime(),
                    "value1": 0.49,
                    "value2": 51.90
                }, {
                    "depth": 13,
                    'time': new Date('Jan 13 2010').getTime(),
                    "value1": 20.87,
                    "value2": 62.07
                }, {
                    "depth": 14,
                    'time': new Date('Jan 14 2010').getTime(),
                    "value1": 25.10,
                    "value2": 78.46
                }, {
                    "depth": 15,
                    'time': new Date('Jan 15 2010').getTime(),
                    "value1": 16.87,
                    "value2": 56.80
                }
            ]
        });

    MyChart1 = Ext.create('Ext.chart.CartesianChart', {
        renderTo: document.body,
        store: xStore1,
        interactions: ['panzoom'],

        axes: [{
                type: 'numeric',
                fields: ['value1'],
                position: 'top',
                title: {
                    text: 'Value 1'
                }
            }, {
                type: 'numeric',
                fields: ['value2'],
                position: 'top',
                title: {
                    text: 'Value 2'
                }
            }, {
                type: 'numeric',
                fields: ['depth'],
                position: 'left',
                title: {
                    text: 'Depth'
                }
            }, {
                type: 'time',
                fields: ['time'],
                fromDate: new Date('Jan 1 2010'),
                toDate: new Date('Jan 15 2010'),
                position: 'left',
                title: {
                    text: 'Time'
                }
            }
        ],

        series: [{
                type: 'line',
                yField: 'depth',
                xField: 'value1',
                title: 'Value 1',
                style: {
                    fill: "#115fa6",
                    stroke: "#115fa6",
                    fillOpacity: 0.6,
                    miterLimit: 3,
                    lineCap: 'miter',
                    lineWidth: 2
                }
            }, {
                type: 'line',
                yField: 'depth',
                xField: 'value2',
                title: 'Value 2',
                style: {
                    smooth: true,
                    stroke: "#94ae0a",
                    fillOpacity: 0.6,
                    miterLimit: 3,
                    lineCap: 'miter',
                    lineWidth: 2
                }
            }
        ]
    });

    cnt.add(MyChart1);
};

7) функция строит график на подобии того, что я привёл в вопросе (код создания должен соответствовать версии ExtJS, которую использует UniGui-приложение)