Search code examples
extjsextjs6

ExtJS quick start - how to run


I've started to learn Ext JS and immediately stumbled on the 1st step of their quick start.

Where should I put that hello world code to see the result in my web page, not their interactive demo?

I have local web server up and running, so the question is in application's files layout.


Solution

  • You create an app.js file in the root of your project, and then put the code there. You also should include this file in the index.html file, after the inclusion of library scripts, like so:

    <script type="text/javascript" src="app.js"></script>
    

    Basically you firstly load the ExtJS library files, and then you load a file that does something using ExtJS.

    Or you might not need any additional file, just include the code in index.html (also after the library is loaded) in form of inline javascript:

    <script type="text/javascript">
       Ext.application({
        name: 'MyApp',
    
        launch: function() {
            Ext.Viewport.add({
                xtype: 'panel',
                title: 'New Panel',
                html: 'My new panel!'
            });
        }
    });
    </script>