UberGrid in an MVC app with Sencha Cmd

snehal · Post by **snehal** » Fri May 03, 2013 1:35 pm

We tried using UberGrid with MVC.
Everything works fine, tried the sample provided with the code.
The build does not work as expected and shows an error in the console.
The grid gets loaded displays data. However it still shows the following error in the console:

Code: Select all

    Uncaught TypeError: Object #<Object> has no method 'define' ubergrid-all-debug.js:1
        (anonymous function)

We did the following changes:
Changed the index.html to include:

Code: Select all

  <link href="touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
             <link href="resources/css/ubergrid-all-debug.css" rel="stylesheet" type="text/css" />
             
            <!-- The line below must be kept intact for Sencha Command to build your application -->
            <script id="microloader" type="text/javascript" src="touch/sencha-touch-all-debug.js"></script>
              <script src="ubergrid/ubergrid-all-debug.js" type="text/javascript"></script>
              <script src="app.js" type="text/javascript"></script>

Also, changed the following in app.json:

Code: Select all

"js": [
                {
                    "path": "touch/sencha-touch-all-debug.js",
                    "x-bootstrap": true
                },{
                    "path": "ubergrid/ubergrid-all-debug.js"
                },
                {
                    "path": "app.js",
                    "bundle": true,  /* Indicates that all class dependencies are concatenated into this file when build */
                    "update": "delta"
                },{
                    "path": "data.js"
                }
            ],

did the same for css files.
And added the following to .sencha\app\sencha.cfg
app.classpath=${app.dir}/app.js,${app.dir}/app,${app.dir}/lib/UberGrid

the lib directory is at the same level as the app directory.
We want to eliminate error on the console for the build. The app however works as expected and there is no error for development environemnt.
Any clue of what we are doing wrong?

Post by **mats** » Sun May 05, 2013 10:24 am

Can you upload a sample we can inspect?

snehal · Post by **snehal** » Mon May 06, 2013 7:11 am

Attached a zip containing the code. The app runs properly, but we are getting an error in the console. (Have removed the touch directory from the zip and some resources due the file upload limit.)

Post by **mats** » Mon May 06, 2013 7:57 am

Can't reproduce any errors using Touch 2.2.0. What version are you using?

snehal · Post by **snehal** » Mon May 06, 2013 8:21 am

We are using touch 2.1.1. Is it possible to get a fix for this version?

Post by **mats** » Mon May 06, 2013 8:25 am

Not sure exactly what's causing this. Did you try it with v2.2 to see if it actually works then?

snehal · Post by **snehal** » Mon May 06, 2013 9:25 am

I tried using version 2.2 also. Same issue exists.
In the development mode there is no error and the application works perfect.
However, when we execute sencha app build and build the app for production, the app gets built also works perfect. But if you check the console it shows the following error:
Uncaught TypeError: Object #<Object> has no method 'define' ubergrid-all-debug.js:1
(anonymous function)

seems like before even the extjs library is loaded it is trying to load ubergrid-all-debug. But I checked the sequence in app.json its correct also the application is working fine.

Post by **mats** » Mon May 06, 2013 9:27 am

Hmm, I could not reproduce this using your the solution you uploaded. Normally you don't include touch-all-debug.js and ubergrid-all-debug.js in the HTML page, but instead use the 'app.json' setup, can you try using that instead? Our samples look like this:

Code: Select all

<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
    <meta charset="UTF-8">
    <script src="http://cdn.sencha.io/touch/sencha-touch-2.2.0/microloader/development.js" type="text/javascript"></script>
    <title>Basic UberGrid</title>
</head>
<body>
</body>
</html>

app.json

Code: Select all

{
    "name": "Basic",
    "js": [
        {
            "path": "http://cdn.sencha.io/touch/sencha-touch-2.2.0/sencha-touch-all-debug.js"
        },
        {
            "path": "../../ubergrid-all-debug.js"
        },
        {
            "path": "../shared/shared.js",
            "update": "delta"
        },
        {
            "path": "basic.js",
            "update": "delta"
        }
    ],
    "css": [
        {
            "path": "http://cdn.sencha.io/touch/sencha-touch-2.2.0/resources/css/sencha-touch.css",
            "update": "delta"
        },
        {
            "path": "../../resources/css/ubergrid-all.css",
            "update": "delta"
        },
        {
            "path": "basic.css",
            "update": "delta"
        }
    ],
    "appCache": {
        "cache": [
            "basic.html"
        ],
        "network": [
            "*"
        ],
        "fallback": []
    },
    "extras": [
        "resources/images",
        "resources/icons",
        "resources/loading"
    ],
    "archivePath": "archive",
    "buildPaths": {
        "testing": "../../deploy/testing/basic",
        "production": "../../deploy/production/basic",
        "package": "../../deploy/package/basic",
        "native": "../../deploy/native/basic"
    },
    "buildOptions": {
        "product": "touch",
        "minVersion": 3,
        "debug": false,
        "logger": "no"
    },
    "id": "3a867610-670a-11e1-a90e-4318029d18bb"
}

snehal · Post by **snehal** » Mon May 06, 2013 11:07 am

Tried as you mentioned.
The html file contains:

Code: Select all

<!-- The line below must be kept intact for Sencha Command to build your application -->
    <script id="microloader" type="text/javascript" src="touch/microloader/development.js"></script>

app.json:

Code: Select all

  "js": [
        {
            "path": "touch/sencha-touch-all-debug.js"
        },{
         	"path": "ubergrid/ubergrid-all-debug.js"
        },
        {
            "path": "app.js"
        }
    ],

Also the css paths are added.
However we get the following error then:
Error evaluating http://localhost:7070/UberGridMVC/build ... l-debug.js with message: TypeError: Object #<Object> has no method 'define'

Do you have a working example of the MVC with build for production for UberGrid?

Post by **mats** » Mon May 06, 2013 11:09 am

Can you upload a sample that we can inspect?

Forum

Bryntum Support Forums

UberGrid in an MVC app with Sencha Cmd

Re: UberGrid in an MVC app with Sencha Cmd

Re: UberGrid in an MVC app with Sencha Cmd

Re: UberGrid in an MVC app with Sencha Cmd

Re: UberGrid in an MVC app with Sencha Cmd

Re: UberGrid in an MVC app with Sencha Cmd

Re: UberGrid in an MVC app with Sencha Cmd

Re: UberGrid in an MVC app with Sencha Cmd

Re: UberGrid in an MVC app with Sencha Cmd

Re: UberGrid in an MVC app with Sencha Cmd

Re: UberGrid in an MVC app with Sencha Cmd