QML and extjs



  • Is it possible to use extjs with QML ?



  • 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



  • thanks for your reply.
    so i should use javascript instead of extjs ? am i right ?



  • 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



  • ExtJS is something that runs in a webbrowser and uses Javascript to create a user interface. That is a very different environment from Quick. This is never(TM) going to work.



  • but since it uses javascript why it will never going to work ?



  • [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 Ext

    Rectangle {
    id: appWindow
    width: 640
    height: 480

    Component.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.0

    Rectangle {
    id: container

    property 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

    !http://lh5.googleusercontent.com/-6iNTA-KVA48/UmK_qUCsJHI/AAAAAAAAAA0/nsxK6UB9rDM/w240-h161-no/extjs_project.png(project_directory)!


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.