How to use this SDK

[lukaslentner]

Hi guys,

is there a working tutorial about the SDK?? All I can find is the README-File, the File explaining shortly the JSON-Config format and an outdated tutorial.

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

Please send me a link ;-)))

Thankx
Lukas

[hello2008]

I have the same question and looking for the tutorial too.

[stevil]

At the moment, it doesn't appear that there is a self-contained document for the SDK tools.

However, there is information on how to use them for the tools' primary purposes:

1) Build/Package - http://docs.sencha.com/ext-js/4-0/#/...etting_started (see Heading #3. Deployment)
2) Theme slicing - http://docs.sencha.com/ext-js/4-0/#/guide/theming (see Supporting Legacy Browsers)

I know it's not anything like a complete reference, but perhaps it will help to move things along?

stevil

[lukaslentner]

Hi guys,

thankx a lot! thats what i needed. But when i include the ext.js and app-all.js some other classes (around 20) are beeing loaded.

Does sb. know why?

Lukas

[lukaslentner]

Ok, sorry I found it by myself:

I didn't use always: uses and requires

Thankx anyway for the support!

Lukas

[lucasguaru]

Hey Lukas,

Can you please tell us how did you use it?
I'm trying here but I don't have a clue how to do it.

Tks

[lukaslentner]

I'm on windows. I installed the package and followed exactly the rules stated in the 2 links above ...

If you know the commands, nothing special ;-))

[stevil]

ext.js is a thin version of the framework, which autoloads components and classes as it sees fit.

ext-all.js loads the whole framework - however, classes you write which depend on other classes you write (stores depending on models, etc.) will autoload those classes in any event, unless you create a build package for it.

If you're extending a class, you'll find that there's a subtle difference between "uses" and "requires".

"Uses" tells the class manager that some code inside the defined class will reference the "used" class - it's a "hint" to the class loader, but it does not guarantee that the class will be loaded before the class you're defining is instantiated.

"Requires" tells the class manager that the class HAS to be loaded before this class can be instantiated.

Outside class definition, Ext.require and Ext syncRequire take care of getting classes loaded for you.

stevil

[korax]

I really wish there was a clear tutorial on how to effectively use the SDK, when to use "uses" and "requires", the subtleties of the loader, etc. I'm having difficulty getting my minified app to run, and I don't well enough understand the way in which classes are loaded in order to debug where things are going wrong.

My app is pure MVC with the recommended architecture outlined here and here. I subclass Ext classes and my own classes routinely in my app. I actually consider myself fairly proficient in this architecture, so safe to say, there's nothing particularly wonky with my application layout.

In the app's entry file, I use the loader so:

     
// Set up loader
Ext.Loader.setConfig({ enabled: true });

// Load application files
Ext.Loader.setPath('MyApp', 'app');
Ext.require('MyApp.Application');

I don't use "uses" and "requires" anywhere else. In an included js app file, I load the application.

Ext.onReady(function() { Ext.create('MyApp.Application'); });

When I build my app with the SDK, the minfied file containing my app only has the onReady function after all my class definitions, as the loader functions are in the entry point index file and are not included in the build. I did this because of this advice from the docs here:

It's important to note that dynamic loading should only be used during development on your local machines. During production, all dependencies should be combined into one single JavaScript file.

Thought I'd done that. After including ext.js and my minified app file app-all.js, the console indicates that the framework is still attempting to load my class files from the MVC directories (app/view, app/controller, etc.). In the production environment, this of course breaks.

The usage docs are fairly lean, and I haven't been able to fight my way around this fairly simple problem for a few days now. If anyone has advice, or can point out what I'm so clearly doing wrong, I'd really appreciate it.

Thanks so much.
Louis

[wiznia]

I have the same problem as korax. Although a slight different structure.
In my entry file I have the ext files (css and js) and my app.js file.

In my app.js I have:

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('MyApp', '/app');

Ext.application({
autoCreateViewport: true,
....
controllers: [my controllers]
stores: [mystores]
});

The jsb3 generated is:

{
    "projectName": "Project Name",
    "licenseText": "Copyright(c) 2011 Company Name",
    "builds": [
        {
            "name": "All Classes",
            "target": "all-classes.js",
            "options": {
                "debug": true
            },
            "files": []
        },
        {
            "name": "Application - Production",
            "target": "app-all.js",
            "compress": true,
            "files": [
                {
                    "path": "",
                    "name": "all-classes.js"
                },
                {
                    "path": "",
                    "name": "app.js"
                }
            ]
        }
    ],
    "resources": []
}

I guess that in the files array there should be the files my app uses... I run the build command and my app-all.js just has the contents of the app.js
Any help??

Oh, and if someone can shed some light on the differences of uses and require it would be great. I use "uses", but in the app and the controllers there are the 'controllers', 'views' and 'stores' configurations... I don't know which method they use internally.