Results 1 to 4 of 4

Thread: How to create Ext JS 5 "Hello World" application without using Sencha Cmd?

  1. #1
    Sencha User talha06's Avatar
    Join Date
    Jul 2009
    Location
    Turkey
    Posts
    327
    Answers
    10

    Default Answered: How to create Ext JS 5 "Hello World" application without using Sencha Cmd?

    Seems with the release of Ext JS 5, some major package changes are done. I want to learn which files I need to import to create "Hello World" application using Ext JS 5.

    Old way was importing theme css and library js file. But as I see, this doesn't work anymore - at least for Ext JS 5.0 Beta.

    I imported these theme css and library js resources; but framework doesn't recognize root of Ext despite I explicitly set path.

    App Structure:
    ??? app
    ??? app.js
    ??? extjs
    ??? index.jsp
    ??? resources
    ??? WEB-INF



    Imports:
    Code:
    <link rel="stylesheet" type="text/css" href="extjs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug.css">
    <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
    App.js
    Code:
    Ext.application({
        name: 'Ext5',
        appFolder: 'app',
        requires: ['Ext5.view.Viewport' ],
        paths: {
            Ext: './extjs'
        },
        enableQuickTips: true,
        launch: function () {
    
    
            console.log('Launching Ext JS 5 app');
    
    
        }
    });

    Errors:

    GET http://localhost:9090/ext5/packages/...=1396826196299 404 (Not Found)
    GET http://localhost:9090/ext5/packages/...=1396826196299 404 (Not Found)
    .......

    The right path is - as you see - localhost:9090/ext5/extjs/packages/....
    "People will never forget how you made them feel."
    linkedin.com/in/talhakabakus

  2. I don't think the files you are using are full builds of the framework. Just stubs to bootstrap via module loading.

    Change your code to:

    Code:
    <link rel="stylesheet" type="text/css" href="extjs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug.css">
    <script type="text/javascript" src="extjs/build/ext-all-debug.js"></script>
    Notice the "build" in the ext-all-debug.js path.

    If you look at the file size extjs/ext-all-debug.js should be about 40KB and extjs/build/ext-all-debug.js should be about 3.9MB.

    Does that resolve your issue ?

  3. #2
    Sencha Premium Member
    Join Date
    Dec 2010
    Location
    Auckland, NZ
    Posts
    58
    Answers
    3

    Default

    I don't think the files you are using are full builds of the framework. Just stubs to bootstrap via module loading.

    Change your code to:

    Code:
    <link rel="stylesheet" type="text/css" href="extjs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug.css">
    <script type="text/javascript" src="extjs/build/ext-all-debug.js"></script>
    Notice the "build" in the ext-all-debug.js path.

    If you look at the file size extjs/ext-all-debug.js should be about 40KB and extjs/build/ext-all-debug.js should be about 3.9MB.

    Does that resolve your issue ?

  4. #3
    Sencha User talha06's Avatar
    Join Date
    Jul 2009
    Location
    Turkey
    Posts
    327
    Answers
    10

    Default

    Thanks for your help, didn't notice path change of full build library files. It is moved into "build" folder as you said. Style resources path is also changed in Ext JS 5. fyi
    "People will never forget how you made them feel."
    linkedin.com/in/talhakabakus

  5. #4

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •