Как загрузить приложение React/Lib внутри компонента ExtJs - программирование
Подтвердить что ты не робот

Как загрузить приложение React/Lib внутри компонента ExtJs

Мы используем Extjs 3.1, и мы пытаемся интегрировать reactjs в. у нас есть библиотека поставщиков, которая реагирует, reacr-dom, redux и другие библиотеки упакованы и включены как скрипт.

Вот мой код extjs

var CompositeViewer = Ext.extend(Ext.BoxComponent, {
    itemId: 'CompositeViewer',
    requires: [
        'ReactDOM' //my lib file name is vendor.lib.js
    ],
    initComponent: function() {
        Ext.apply(this, {
            autoEl: {
                tag: 'div',
                cls: 'normalize'
            }
        });
        CompositeViewer.superclass.initComponent.apply(this, arg);
    },
    onRender: function(ct, position) {
        CompositeViewer.superclass.onRender.apply(this, arg);
        console.log(ReactDOM); //OFCOURSE ReactDOM is undefined  
        /// HOW TO LOAD/Render REACT APP AND OTHER LIBS
    },
    beforeDestroy: function() {
        CompositeViewer.superclass.onDestroy.apply(this, arg);
    }
});

Нужна помощь в том, как загрузить реактивные /javascript-библиотеки в контейнер extjs.

EDIT: уточнить бит больше.

  1. Поскольку у меня нет возможности загружать внешние зависимости (реагировать, сокращать и т.д.) Из cdn, как я могу связать его отдельно и какой тип (commonjs, umd или var)
  2. Как связать мое приложение, чтобы ExtJS мог импортировать его (как отдельный lib?)
4b9b3361

ОТВЕТЫ

Ответ 1

Вот как вы можете это сделать.

Использование рабочего примера ExtJS 3.4.1:

Ext.onReady(function () {
    Ext.create({
        xtype: 'panel',
        renderTo: Ext.getBody(),
        title: 'ExtJS Panel',
        items: [{
            xtype: 'label',
            text: 'ExtJS Compoent'
        }, {
            xtype: 'panel',
            listeners: {
                afterrender: function () {
                    const e = React.createElement;

                    ReactDOM.render(
                        e('div', null, 'ReactJS Component'),
                        this.el.dom
                    );
                    console.log('afterrender');
                }
            }
        }]
    });
});

Ссылка на Fiddle (ExtJS 3.4.1): https://fiddle.sencha.com/#view/editor&fiddle/2l12

Использование ExtJS 5 и выше Рабочий пример:

Ext.application({
    name: 'Fiddle',

    launch: function () {

        Ext.create({
            xtype: 'panel',
            renderTo: Ext.getBody(),
            requires: [
                'ReactDOM'
            ],
            title: "Some ExtJS Panel",
            items: [{
                xtype: 'label',
                text: "ExtJS Component"
            }, {
                xtype: 'panel',
                id: 'react-panel',
                height: 400,
                initComponent: function () {
                    console.log('do some extjs stuff here');
                    this.superclass.initComponent.apply(this, arguments);
                },
                listeners: {
                    afterrender: function () {
                        console.log();
                        const e = React.createElement;

                        ReactDOM.render(
                            e('div', null, 'ReactJS Component'),
                            this.el.dom
                        );
                        console.log('afterrender');
                    }
                }
            }]
        });
    }
});

Ссылка на Fiddle (ExtJS 5 и выше): https://fiddle.sencha.com/#view/editor&fiddle/2l11