Results 1 to 5 of 5

Thread: MVC application tutorial SDK tools

  1. #1
    Sencha User vaucer's Avatar
    Join Date
    Aug 2009
    Location
    Paris
    Posts
    50

    Default MVC application tutorial SDK tools

    Hello All,

    I try to use the SDK deployment tool Sencha with MVC sample application included in the doc.

    My index:

    Code:
                                                   <html>
        <head>
            <title>User Ticket</title>
            <link rel="stylesheet" type="text/css" href="ext-4.0/resources/css/ext-all.css">
            <script type="text/javascript" src="ext-4.0/ext-debug.js"></script>
            <script type="text/javascript" src="appl.js"></script>
        </head>
    <body></body>
    </html>
    I run this command :

    Code:
    C:\Users\Vaucer\Mes projets\plasaid>sencha create jsb -a http://project.plasaid.
    loc/plasaid/index.html -p app.jsb3
    Then i get a file like this JSB3 file (i have truncated):

    Code:
    {
        "projectName": "Project Name",
        "licenseText": "Copyright(c) 2011 Company Name",
        "builds": [
            {
                "name": "All Classes",
                "target": "all-classes.js",
                "options": {
                    "debug": true
                },
                "files": [
                    {
                        "path": "ext-4.0/src/util/",
                        "name": "Observable.js"
                    },
                    {
                        "path": "ext-4.0/src/data/",
                        "name": "Operation.js"
                    },
                    {
                        "path": "ext-4.0/src/data/",
                        "name": "Association.js"
                    },
                    {
                        "path": "ext-4.0/src/data/",
                        "name": "validations.js"
                    },
                    {
                        "path": "ext-4.0/src/data/",
                        "name": "SortTypes.js"
                    },
                    {
                        "path": "ext-4.0/src/util/",
                        "name": "HashMap.js"
                    },
                    {
                        "path": "ext-4.0/src/util/",
                        "name": "Filter.js"
                    },
                    {
                        "path": "ext-4.0/src/util/",
                        "name": "Sorter.js"
                    },
                    {
                        "path": "ext-4.0/src/data/",
                        "name": "Connection.js"
                    },
                    {
                        "path": "ext-4.0/src/util/",
                        "name": "KeyMap.js"
                    },
                    {
                        "path": "ext-4.0/src/data/writer/",
                        "name": "Writer.js"
                    },
                    {
                        "path": "ext-4.0/src/panel/",
                        "name": "Proxy.js"
                    },
                    {
                        "path": "ext-4.0/src/",
                        "name": "Template.js"
                    },
                    {
                        "path": "ext-4.0/src/fx/",
                        "name": "CubicBezier.js"
                    },
                    {
                        "path": "ext-4.0/src/data/",
                        "name": "ResultSet.js"
                    },
                    {
                        "path": "ext-4.0/src/dd/",
                        "name": "StatusProxy.js"
                    },
    ....TRUNCATED.....
                    {
                        "path": "ext-4.0/src/dd/",
                        "name": "DropTarget.js"
                    },
                    {
                        "path": "ext-4.0/src/dd/",
                        "name": "DropZone.js"
                    },
                    {
                        "path": "ext-4.0/src/grid/header/",
                        "name": "DropZone.js"
                    },
                    {
                        "path": "ext-4.0/src/grid/plugin/",
                        "name": "HeaderReorderer.js"
                    }
                ]
            },
            {
                "name": "Application - Production",
                "target": "app-all.js",
                "compress": true,
                "files": [
                    {
                        "path": "",
                        "name": "all-classes.js"
                    },
                    {
                        "path": "",
                        "name": "app.js"
                    }
                ]
            }
        ],
        "resources": []
    }
    Then i build with this command :

    Code:
    sencha build -p app.jsb3 -d .
    The problem occurs when I launch my application with the result of the build :
    ext JSB .js + app-all.js

    I get this error in firebug:

    Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class:

    I add this line in my index html just between ext.js and app.js:

    <script type="text/javascript">Ext.Loader.setConfig({enabled:true});</script>

    And then i get this error in firebug:

    <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> <html><head> <title>404 Not Found</title> </head><body> <h1>Not Found</h1> <p>The requested URL /plasaid/container/Viewport.js was not found on this server.</p> </body></html>

    How i can simply deploy this simple example to use with ext.js & app-all.js file instead of ext-debug.js + app.js plz ?

    Thx you very much
    Vaucer

  2. #2
    Sencha User vaucer's Avatar
    Join Date
    Aug 2009
    Location
    Paris
    Posts
    50

    Default

    ok I found a workarround for my problem with this page:

    http://www.extjsframework.com/mvc/de...senchasdktools

    it have to replaced in "app.js"

    Code:
    Ext.application ({ 
    
     by
    
     Ext.create ('Ext.app.Application', {
    It's ok now my app start with ext.js + app-all.js builded file.

    But I encounter a new problem when I double click on a row I get the following error in firebug:

    g is undefined
    [Stopping on an error] (function () {var e = this, a = = Object.protot ...}; Ext.select Ext.core.Element.select;

    For info if i replace ext.js by ext-debug.js all is ok

    Thx you very much for your help
    Vaucer

  3. #3
    Sencha User
    Join Date
    Mar 2010
    Location
    Delft - The Netherlands
    Posts
    28

    Default

    You are problably missing some Ext Classes in your app-all.js. You must add these files to the Ext.require() array param in your index.html.

    PHP Code:
    <script>
        
    Ext.Loader.setConfig({
            
    enabledtrue,
            
    paths: {                    
                
    'MY''Link/to/MY/'
            
    }
        });

        
    Ext.require([
            
    'Ext.container.Viewport',
            
    'Ext.layout.container.Border',
            
    'Ext.form.field.ComboBox',

            
    // etc...

            
    'MY.controller.*',
            
    'MY.model.*',
            
    'MY.store.*',
            
    'MY.view.*'
        
    ]);
    </script>
                                                
    <script src="Link/to/MY/App.js"></script> 
    The best way to find which files you are missing is to develop using 'ext-debug.js' and take a look at your browser's console. It gives a warning everytime a file is loaded which isn't defined in Ext.require().

    See the getting started manual: http://docs.sencha.com/ext-js/4-0/#/...etting_started

  4. #4
    Sencha User vaucer's Avatar
    Join Date
    Aug 2009
    Location
    Paris
    Posts
    50

    Default

    Hi bas_tzx,

    First thx for your answer.

    But i don't understand sencha sdk tool (jsbuilder) is supposed to add all required classes no ?

    For classes linked to my app :

    Code:
    'MY.controller.*',
            'MY.model.*',
            'MY.store.*',
            'MY.view.*'
    they are already in my app-all after build

    I tried your solution but it don't work.

    Thx you
    Bye

  5. #5
    Sencha User
    Join Date
    Mar 2010
    Location
    Delft - The Netherlands
    Posts
    28

    Default

    Quote Originally Posted by vaucer View Post
    Hi bas_tzx,
    But i don't understand sencha sdk tool (jsbuilder) is supposed to add all required classes no ?
    No, not really. If you define classes using their xtype (and probably using Ext.create?), they are not included by the jsbuilder and therefor will not end up in your app-all.js. Thankfully, Firebug gives you feedback everytime it is dynamically loading a class and you should add this class to your Ext.require().

    The following code is from an application I built and when I comment out the checkBoxGroup, firebug gives me message. After building the application using jsbuilder it seems to work, but when I open the panel that is using the checkboxgroup, I get an error, because the class is missing from the app-all.js.

    PHP Code:
    Ext.require([                        
        
    'Ext.container.Viewport',
        
    'Ext.layout.container.Border',
        
    'Ext.layout.container.Card',
        
    'Ext.selection.CheckboxModel',
        
    'Ext.toolbar.TextItem',
        
    //'Ext.form.CheckboxGroup', this class will not be in the app-all.js
        
    'Ext.form.field.Checkbox',
        
    'Ext.form.field.File',
        
    'Ext.form.field.ComboBox',
        
    'Ext.grid.column.Date'
    ]); 
    Development, using ext-debug.js


    Quote Originally Posted by vaucer View Post
    For classes linked to my app :

    Code:
    'MY.controller.*',
            'MY.model.*',
            'MY.store.*',
            'MY.view.*'
    they are already in my app-all after build
    You are right about that. It seems you can leave that out

Posting Permissions

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