CODEWITHSUNDEEP
extjs
hudi
hudi

Reputation: 16525

How to debug sencha application

I am very new to using sencha. I have simple application and I want to add debug js library to see errors and warning. Problem is when I add this js to my app I see just blank screen and errors in this library. My index.html look like:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Account Manager</title>
<script
    src="http://cdn.sencha.com/ext/gpl/4.2.0/examples/shared/include-ext.js"></script>
<script
    src="http://cdn.sencha.com/ext/gpl/4.2.0/examples/shared/options-toolbar.js"></script>
<script src="../../api-debug.js"></script>
<script src="app.js"></script>
<script src="ext-all-debug.js"></script>
</head>
<body></body>
</html>

when I remove ext-all-debug.js everything works.

So what I am doing wrong ?

Upvotes: 1

Views: 3976

Answers (1)

Peter Bartels
Peter Bartels

Reputation: 1514

You have added ExtJs twice. You don't need to add the JS file from their examples. You need to add ext-all-debug.js and the css file. Mine looks something like this:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Account Manager</title>

<link rel="stylesheet" type="text/css" href="resources/css/ext-all-debug.css"/>
<script src="ext-all-debug.js"></script>
<script src="app.js"></script>
</head>
<body></body>
</html>

You might also want to have a look at the Sencha CMD that can create the setup for you:

sencha -sdk /path/to/sdk generate app

More info here: http://docs.sencha.com/extjs/4.2.0/#!/guide/command

To use dynamic loading of classes add this to your code:

Ext.Loader.setConfig({
    enabled : true,
    paths   : {
        Ext : "ext/src" //path to ext
            //add custom/yourown namespaces here and their paths
    }
});

And replace ext-all-debug.js with ext.js or ext-dev.js

<script src="../common/js/Ext/ext-dev.js" type="text/javascript"></script>

Use require in your code to let the loader know which classes to use:

Ext.require("Ext.form.Panel);

Upvotes: 2

Related Questions