Dependencies are Out of Order

[rhapsodyv]

Hi,

This is a strange thing. Maybe I'm doing something wrong.
My all-classes looks like this (in this order):

Ext.define('MyApp.foo.bar', {
extend: 'Ext.tree.Panel',
....

Ext.define('Ext.tree.Panel', {
extend: 'Ext.panel.Table',
...

The tree.Panel was included after some classes that use it. So, when I open my app, it will load all stuff of tree.Panel to meet the MyApp.foo.bar requirements.

I'm using SDK 2.0- Developer preview.

[mitchellsimoens]

I have had no issues with the order in my apps.

[rhapsodyv]

Hum.
I will try figure out what I'm doing wrong...
How SDK works? Do It handle 'extend', 'require' and Ext.create?

Do I need require all ext classes that I use?
Maybe I can't use Ext.Loader in development to have the right generated jsb3.

Thanks.

[aw1zard2]

In my app.js I did a simple require and everything in the order I wanted it.

Ext.Loader.setConfig({
    enabled: true,
    paths: {
        'APP.arch': '.',
        'Ext.ux.form': './js-4.0.7/plugin',
        'Ext.ux': './js-4.0.7/plugin'
    }
});
Ext.application({
    name: 'APP.arch',
    appFolder: 'js-4.0.7/arch',
    requires: [
        'APP.arch.Ajax',
        'APP.arch.Submit',
        'APP.arch.Grid',
        'APP.arch.Paging',
        'APP.arch.PingTask',
        'APP.arch.Panel',
        'APP.arch.Form',
        'APP.arch.TabPanel',
        'APP.arch.FieldSet',
        'APP.arch.Combo',
        'APP.arch.Container',
        'APP.arch.TimeField',
        'APP.arch.Checkbox',
        'APP.arch.Radio',
        'APP.arch.NumberField',
        'APP.arch.MoneyField',
        'APP.arch.TextArea',
        'APP.arch.TriggerField',
        'APP.arch.TreePanel',
        'APP.arch.TextField',
        'APP.arch.Format',
        'APP.arch.DateField',
        'APP.arch.Printer',
        'APP.arch.DateHelper',
        'APP.arch.MultiFieldTime',
        'APP.arch.MultiFieldDate',
        'APP.arch.DateMenu',
        'APP.arch.DatePicker',
        'APP.arch.PhoneField',
        'Ext.ux.form.InputTextMask',
        'Ext.ux.RowExpander',
        'Ext.ux.TemplateRowExpander',
        'APP.arch.DateFilter',
        'APP.arch.Button',
        'APP.arch.LoadingButton'
    ]
}); 

When I do sencha build everything is placed in order with no issues.

[aw1zard2]

The reason for the js-4.0.7 folder is we are upgrading projects from 3.1.1 to 3.4 to 4.0.7 then to 4.1 when it comes available.

It made it easier for us to manage every Ext JS version we needed based off our architecture.
Also made upgrading a breeze following the same structure.

We have the following directories below in 1 location.

ext-4.0.7/ext-all.js
js-4.0.7/app.js
resources-4.0.7/css/mytheme.css
resources-4.0.7/images/myimage.jpg

[rhapsodyv]

Hi,

Thanks for the help. But I think I found something.


Looking for the code of Sencha SDK I discovered that it use Ext.Loader.history to get the files of the project.

   Ext.onReady(function() {            Ext.Loader.history.forEach(function(item) { 

But I have a doubt:
There are lots of callbacks listening on Ext.onReady. There some on my app, there one in Ext.Application that initializes the controllers, and so on.
How is guaranteed that the Sencha SDK callback will be called by last?
For example, if the Sencha SDK callback was called before the application onReady callback, the controllers and views won't be loaded, then lots of dependencies won't be loaded too.


Seems that Ext.Loader.history will have only the files loaded until it's onReady callback is called. Is that right? Do I miss something?

To solve this, do I need explicit require all my app classes (controllers, views, models, ...)?

Thanks again!

[aw1zard2]

I only gave an example of our arch-app.js.
We also have a common-app.js which has controllers/models/views in it.
We then have what we call a zone-app.js.
We added functionality to the Ext.app.Application and Ext.app.Controller just so you know to get this to work correctly.

Mitchell Simoens has a good example of multiple applications/controllers on his github. https://github.com/mitchellsimoens/SubAppDemo

I do the requires in the arch-app.js to load first for the common-app.js.
In the common-app.js I do my controllers/models/views in order that i want them to load.

Ext.Loader.setConfig({
    enabled: true,
    paths: {
        'APP.common': '.'
    }
});
Ext.application({
    name: 'APP.common',
    enableQuickTips: true,
    appFolder: 'js-4.0.7/common',
    controllers: [
                  'APP.common.controller.MainClientController',
                  'APP.common.controller.TestScreenController'
    ],
    config: {
        myParam: undefined
    },
    launch: function() {
        //TODO after everything is loaded   
    }
}); 

[rhapsodyv]

Ok.

I've made all requires. But if I require my controllers, the App doesn't launch!
Ext.app.Application:constructor requires the controllers and waits for the load in a onReady callback, but it is never called when the controllers was already loaded.


I think I'm close... :-p

Thanks.

[aw1zard2]

If you look at my common i have no requires but controllers listed instead.
And it loads everything.
I do models and views inside the controllers.

Only do the requires if your extending a component like we are.
Or if a model/view needs certain components to function.

[bax1989]

Even if I declare them with a requires property inside the object passed to Ext.application method it does not add them to the build descriptor. The generated build descriptor contains only 2 of my classes and not all Ext classes needed.