QML and extjs
-
QML is using Javascript for its expressions. There is no DOM API as QML is a different kind of technology. The only APIs available are the Qt APIs (Qt.Something) and the core ECMAScript APIs (Number, Function, Data, etc...).
Of course there is a QML web view. Maybe you can interact from QML/Javascript with extjs using the QML web view API. But stay tuned, Qt components for Symbian and friends could be released soon. Should deliver the same functionality
-
I don't know extjs, but it looks like Qt components. For instance take a look at http://labs.qt.nokia.com/2010/09/10/building-the-future-reintroducing-the-qt-quick-components/ .
-
Thanks.
i ll share it on the forum when i found or create a solution.
this is a link about the extjs , you can check it :http://www.sencha.com .
thank you again -
[quote author="Naouali" date="1302171303"]but since it uses javascript why it will never going to work ?[/quote]
Because a Quick context is not a browser. Javascript is just a programming language. What makes extJs work, is that it has access to everything a browser offers access to from that language: canvas, a HTML DOM tree, and many other features. Quick gives javascript access to its added features, but those are not the same as what is offered by modern browsers.
What would work, obviously, is to use a WebView in your QML scene, and run ExtJS inside that webview.
-
[quote author="Andre" date="1302171569"]
What would work, obviously, is to use a WebView in your QML scene, and run ExtJS inside that webview.[/quote]
thanks for this solution and sorry if i don't get you fast , i m new to Qt and trying to learn it as fast as i can cause i need to finish my FYP in a short period .
Thank you again.
-
[quote author="Naouali" date="1302168306"]Is it possible to use extjs with QML ?[/quote]
Yes is completely Possible.
[quote author="Naouali" date="1302171303"]but since it uses javascript why it will never going to work ?[/quote]
To do it work you need to recreate the ExtJS classes and call QML objects instead calling HTML elements in the views
For example, in the documentation ("http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.button.Button" ) of extjs you can see that creating a button is as simple as:
@Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function() {
alert('You clicked the button!');
}
});@But the problem is that QML by default dosn't renders ExtJS, so the posible solution is create a JS file into the QML project that mimics the ExtJS objects.
@var component;
var sprite;function create(name, arguments) {
console.log('name:',name);
component = Qt.createComponent(name +".qml");
sprite = component.createObject(appWindow, arguments);if (sprite == null) { // Error Handling console.log("Error creating object"); }}
@and them call this file from the main QML like this
@import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Window 2.0
import 'content/Ext.js' as ExtRectangle {
id: appWindow
width: 640
height: 480Component.onCompleted: Ext.create('Button', {x: 200, y: 200, text:"hello2"})}
@As you can see I can call Ext.create('Button') inside a QML Rectangle. Now the last step is to create the QML button file
@
import QtQuick 2.0Rectangle {
id: containerproperty variant text signal clicked height: text.height + 10; width: text.width + 20 border.width: 1 radius: 4 antialiasing: true gradient: Gradient { GradientStop { position: 0.0 color: !mouseArea.pressed ? "#eeeeee" : "#888888" } GradientStop { position: 1.0 color: !mouseArea.pressed ? "#888888" : "#333333" } } MouseArea { id: mouseArea anchors.fill: parent onClicked: container.clicked() } Text { id: text anchors.centerIn:parent font.pointSize: 10 text: parent.text }}
@this is the project directory example
