creating all classes from sencha sdk

Question

I'm trying to use the sencha sdk to generate my minified file.

I have my page set up on

http://www.mysite.localhost/ext/jobs/index.html

reading from just index.html is not easily possible. When i enter

sencha create jsb -a http://www.mysite.localhost/ext/jobs/index.html -p app.jsb3

I get the following jsb file.

{
    "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": []
}

ie it's not included all my classes. If i update

"path": "app/", "name": "app.js"

app-all.js is created correctly. But how can i get the controllers and views. There are a lot of files. Does any one have any example mvc application jsb. My app is base on pandora.

app/app.js

    Ext.Loader.setConfig({ enabled: true });
    Ext.application({

        name: 'Pandora',
        models: ['Part', 'Material', 'Job', 'Process', 'Invoice', 'InvoiceDetail', 'PurchaseOrder'],
        stores: ['SalesContact', 'Parts', 'Materials', 'Jobs', 'AccountHandlers', 'JobTypes', 'Processs', 'Artwork', 'Varnish', 'VarnishType', 'PrintType', 'ProofRequired', 'InvoiceDetails', 'PurchaseOrders'],
  controllers: ['Part', 'Material', 'Job', 'Process', 'Invoice'],
        launch: function () {

            Ext.QuickTips.init();
            var cmp1 = Ext.create('App.view.Jobs', {
                renderTo: "form-job"
            });
            cmp1.show();
        }

    });

index.html

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="ext-all-debug.js"></script>
    <script type="text/javascript" src="app/app.js"></script>
</head>
<body>
    <div id="form-job"></div>
</body>
</html>

I am having the same problem myself at the moment. I am missing my ux, controllers, and views. It manages to find my stores and models. That's it. I am looking for how the requires: property comes into play with respect to the Viewport. You pass it an array of views, and one would infer the controllers with it. — subv3rsion

subv3rsion subv3rsion · Accepted Answer · 2012-02-14T18:38:20

Update

We got this working without the need for including everything in Ext.Loader() in app.js. Make sure you pass Ext.Loader() an array with your Viewport class. Still make sure you do the correct uses: and requires:. That way you final output for the jsb3 file contains everything.

I managed to sort this out on my end. I needed to use the Ext.Loader() in my app.js file. The general idea is you need to tell the loader where your source files are. Making sure your class file's are included in the build. Based on your code above for app/app.js.

Ext.Loader.setConfig({ enabled: true });

// SDK builder required source files, use the class names.
Ext.Loader.require(['Pandora.view.Viewport']);

Ext.application({

    name: 'Pandora',
    models: ['Part', 'Material', 'Job', 'Process', 'Invoice', 'InvoiceDetail', 'PurchaseOrder'],
    stores: ['SalesContact', 'Parts', 'Materials', 'Jobs', 'AccountHandlers', 'JobTypes', 'Processs', 'Artwork', 'Varnish', 'VarnishType', 'PrintType', 'ProofRequired', 'InvoiceDetails', 'PurchaseOrders'],
    controllers: ['Part', 'Material', 'Job', 'Process', 'Invoice'],
    launch: function () {

        Ext.QuickTips.init();
        var cmp1 = Ext.create('App.view.Jobs', {
            renderTo: "form-job"
        });
        cmp1.show();
    }

});

I found that in your view and controller classes make sure if you have stores tied to your view (like a combobox) that you are adding items to the view itself in the initComponent and you use the requires: 'MyApp.store.Users' for the class. Or you will receive strange errors as the view will initialize before the store.

The Ext.Loader.require() must be placed before the Ext.Application. Once you have it all setup with the models and controllers, you'll want to add your views too.

You should be in a good place to create your jsb3 file now, and see that your models, views, and controllers are now part of the process for the build.

creating all classes from sencha sdk

1 Answers