Qwebengine with EXTJ ???

elicat

Does anyone know if it is possible to integrate a project in EXTJ into a QML file by connecting it with QtWebEngine?
Is it possible to operate an EXTJ project in QT ??

Lingfa

Yes, you can

use QtWebChannel communicate in between HTML/JavaScript and C++,
use QWebEngineView::setUrl(const QUrl &url) to host a your html page,
use QWebEnginePage::runJavaScript() to inject js,
use registerObject in HTML invoke C++ methods.

Mix C++ and HTML/JavaScript is powerful.

<!DOCTYPE html>
<html>
   <head>
      <script src="qwebchannel.js"></script>
   </head>
   <body>
      <link rel="stylesheet" type="text/css"
         href="http://(your.com)/extjs/4.2.1/resources/css/ext-all.css" />
      <script type="text/javascript"
         src="http://(your.com)/4.2.1/ext-all.js"></script>
      <script type="text/javascript"
         src="yourtools.js"></script>
   </body>
</html>

elicat

hello, I have make a project with webengine and i have used :
use QtWebChannel communicate in between HTML/JavaScript and C++,
use QWebEngineView::setUrl(const QUrl &url) to host a your html page,
use registerObject in HTML invoke C++ methods.

I could not method : QWebEnginePage::runJavaScript() to inject js,
Have you a example please?

in my project with webengine i have call a sample html page whit bootstrab end i call a function c++ reading value element of forms.

After i have change and i have call index.html of project EXTJ but it does not work.
I had not thought about trying with the declaration of extj .. now I try and then communicate what happens.
Uhmm but i have version 6.6 of EXTJ..

Lingfa

@elicat Here is an example, which 1) injectJavaScript from C++ and 2) call JavaScript function from C++.

void MainWindow::injectJavaScript()
{
    QString script = "function plus(a,b) {return a+b;}";
    m_view->page()->runJavaScript(script);
}

void MainWindow::onePlusTwo()
{
    QString script = "plus(1,2)";
    m_view->page()->runJavaScript(script, [&] (const QVariant &v) {
        QMessageBox::information(this, "Result", v.toString()) ;
    });
}

You can click here to download source code repository, and compile RunJavaScript project.

elicat

@Lingfa hello,
really many thanks for the example of the project
but it does not totally correspond to what I have to do. In the project that I have commissioned I can not use the socket and I have two areas in a qml file where two different forms are loaded in two different HTML files. Given the topic completely different from the post title I create a new post.

https://forum.qt.io/topic/92675/one-qml-two-file-html-inside-how-can-i-call-javascript-functions-inside-its-from-c

Lingfa

@elicat User can type in a form in HTML page,

<form name='myForm' onsubmit=\"%1.validateForm(document.forms['myForm']['fname'].value)\" >
<input type='text' name='fname' />
<input type='submit' value='Submit' />
</form>

Click a HTML button will invoke a c++ function:

void JsHelper::validateForm(const QVariant &v)
{
    m_win->validateForm(v);
}

or
2) click on a C++ button, run JavaScript, to retrieve a HTML form.

void MainWindow::retraveFormName()
{
    QString js = "document.forms['myForm']['fname'].value";
    m_view->page()->runJavaScript(js, [&](const QVariant &v) {
        emit message(v.toString());
    });
}

Hope this answers your question. source core ...

elicat

Thanks for your response,
In your example you have declare webengine into main and after you have open window.
In my work i have file QML with various component and i have use this method for connect webengine at page into area of qml.

                EngineIndexHtml {
                    id: idMenuVeticalBox
                    WebChannel.id: "channelMenuVeticalBox"
                }
                WebEngineView {
                    id: viewEngineVerticalMenu
                    anchors.fill: parent
                    url: "/html/vertticalmenu.html"
                    webChannel: channel
                }
                WebChannel {
                    id: channelVerticalMenu
                    registeredObjects: [idMenuVeticalBox]
                }

please look other post fo question call function.

https://forum.qt.io/topic/92675/one-qml-two-file-html-inside-how-can-i-call-javascript-functions-inside-its-from-c

elicat

information for the reader and is interested in the operation of an EXTJ Classic project, connected to an area within a QML connected to webengine / webchannel.

Using the sencha CMD method```

https://docs.sencha.com/cmd/6.6.0/guides/extjs/cmd_app.html

and following the directions you can create a project. The only thing is that the url to be inserted to put the project in the QML file must be complete.
For example :
WebEngineView {
   url: "C:/Users/xxxx/OneDrive/VisualStudioApplicazioni/WebEngineMinimalExample/extj/formApp/index.html";
   webChannel: channelPage2
}

But NOT

WebEngineView {
   url: "/extj/formApp/index.html";
   webChannel: channelPage2
}

I have not understood why yet.

Now I have project open into area into a QML file.

But the project dont see the include file in index.html file of project.

<script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>

And so I have project correct but dont' talk with QT/QML file/C++

elicat

according to the opinion of Sencha technicians, in order to make an EXTJ project work within a QML through the QtWebEngine method, it is necessary to modify the Chromium of QT.

https://wiki.qt.io/QtWebEngine

I was able to include a project in an area of a QML file and to read the elements of a form but it is not possible to send the data through the WebChannel.
The reason is the EXTJ project, as it is structured, it does not recognize the loading of

<script type = "text / javascript" src = "qrc: ///qtwebchannel/qwebchannel.js"> </ script>

If someone knows how to have him loaded in EXTJ and create the webchannel object that serves for communication with the QT / QML project, I would be happy to publish the whole sample project.

Note: I have also tried to insert all the code "qtwebchannel / qwebchannel.js" in no Load status of the form in EXTJ but in any case the object that should be built is "undefined".

The technicians of Extj say it is "the fault" of the Chromium.