Concatenate application js files

**paul_wang** · 1 Oct 2012 3:09 PM

Hi,

I'm trying to concatenate the application js files using Sencha Cmd but there seems to be some dependency problems. For some reason the controller and app.js doesn't appear at the end of concatenated files.

Using SenchaCmd 3.0.0-181.

I'm using example/app/simple as the testbed. Simple.html has been modified to use ext-all.js and I'm attempting to concatenate just the application js files.

Code:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title id="page-title">Account Manager</title>


    <link rel="stylesheet" type="text/css" href="../scripts/ext-4.1.1a/resources/css/ext-all.css">


    <!-- GC -->
    <script type="text/javascript" src="ext/ext-all.js"></script>


    <!-- <x-compile> -->
    <script type="text/javascript" src="app.js"></script>
    <!-- </x-compile> -->


</head>
<body>


</body>
</html>

This is the command I used. The ext directory contains 4.1.1a.

Code:

sencha -d -s ext\src compile -classpath=ext\src,app page -in simple.html -o simple-out.html -name foobar and include -s foobar and exclude -file ext and concat -o all-classes.js and metadata -filenames -o filenames.out

and here's the content of filenames.out. Shouldn't the last two files be app/controller/User.js and app.js? In this order the application doesn't display on the browser.

Code:

C:\work_tmp\apache\htdocs\simple>type filenames.out
bootstrap.loadScripts(app/view/user/List.js);
bootstrap.loadScripts(app/view/Viewport.js);
bootstrap.loadScripts(app.js);
bootstrap.loadScripts(sencha-compile-temp-dir/ce972644-f156-4c1b-8753-472d6b75fe7a/script-file-1.js);
bootstrap.loadScripts(app/controller/Users.js);
bootstrap.loadScripts(app/model/User.js);
bootstrap.loadScripts(app/store/Users.js);
bootstrap.loadScripts(app/view/user/Edit.js);

**dongryphon** · 2 Oct 2012 12:02 AM

Firstly you probably want to do this in your page:

Code:

    <!-- <x-compile> -->
        <!-- <x-bootstrap> -->
            <script type="text/javascript" src="ext/ext-all-dev.js"></script>
        <!-- </x-bootstrap> -->

        <script type="text/javascript" src="app.js"></script>
    <!-- </x-compile> -->

This will allow the compiler to pick only the Ext JS classes you need and combine them with your application code in one output file.

What you have will work but you will be downloading the entire Ext JS framework.

Secondly, on the dependency question, can you post the Ext.application call in your code? In particular, the "requires" or "uses" and "models", "views" and "controllers" configs as well.

**paul_wang** · 2 Oct 2012 10:28 AM

I specifically just want to concatenate the application files and exclude ext files because eventually we'd deploy a shared bootstrap file across multiple pages that can be cached by the browser.

As to the application, I'm using the simple app example packaged with ExtJS that's located in examples/app/simple.

app.js

Code:

Ext.application({    name: 'AM',


    // automatically create an instance of AM.view.Viewport
    autoCreateViewport: true,


    controllers: [
        'Users'
    ]
});

controller/Users.js

Code:

Ext.define('AM.controller.Users', {    extend: 'Ext.app.Controller',


    stores: ['Users'],


    models: ['User'],


    views: ['user.Edit', 'user.List'],


    refs: [
        {
            ref: 'usersPanel',
            selector: 'panel'
        }
    ],


    init: function() {
        this.control({
            'viewport > userlist dataview': {
                itemdblclick: this.editUser
            },
            'useredit button[action=save]': {
                click: this.updateUser
            }
        });
    },


    editUser: function(grid, record) {
        var edit = Ext.create('AM.view.user.Edit').show();


        edit.down('form').loadRecord(record);
    },


    updateUser: function(button) {
        var win    = button.up('window'),
            form   = win.down('form'),
            record = form.getRecord(),
            values = form.getValues();


        record.set(values);
        win.close();
        this.getUsersStore().sync();
    }
});

model/User.js

Code:

Ext.define('AM.model.User', {    extend: 'Ext.data.Model',
    fields: ['id', 'name', 'email']
});

store/Users.js

Code:

Ext.define('AM.store.Users', {    extend: 'Ext.data.Store',
    model: 'AM.model.User',
    autoLoad: true,


    proxy: {
        type: 'ajax',
        api: {
            read: 'data/users.json',
            update: 'data/updateUsers.json'
        },
        reader: {
            type: 'json',
            root: 'users',
            successProperty: 'success'
        }
    }
});

view/Viewport.js

Code:

Ext.define('AM.view.Viewport', {    extend: 'Ext.container.Viewport',


    layout: 'fit',
    items: [{
        xtype: 'userlist'
    }]
});

view/user/Edit.js

Code:

Ext.define('AM.view.user.Edit', {    extend: 'Ext.window.Window',
    alias : 'widget.useredit',


    requires: ['Ext.form.Panel'],


    title : 'Edit User',
    layout: 'fit',
    autoShow: true,
    height: 120,
    width: 280,


    initComponent: function() {
        this.items = [
            {
                xtype: 'form',
                padding: '5 5 0 5',
                border: false,
                style: 'background-color: #fff;',


                items: [
                    {
                        xtype: 'textfield',
                        name : 'name',
                        fieldLabel: 'Name'
                    },
                    {
                        xtype: 'textfield',
                        name : 'email',
                        fieldLabel: 'Email'
                    }
                ]
            }
        ];


        this.buttons = [
            {
                text: 'Save',
                action: 'save'
            },
            {
                text: 'Cancel',
                scope: this,
                handler: this.close
            }
        ];


        this.callParent(arguments);
    }
});

view/user/List.js

Code:

Ext.define('AM.view.user.List' ,{    extend: 'Ext.grid.Panel',
    alias : 'widget.userlist',


    title : 'All Users',
    store: 'Users',


    columns: [
        {header: 'Name',  dataIndex: 'name',  flex: 1},
        {header: 'Email', dataIndex: 'email', flex: 1}
    ]
});

**dongryphon** · 5 Oct 2012 11:06 PM

If you haven't already, this guide http://docs.sencha.com/ext-js/4-1/#!...mand_app_multi would be helpful to do what you are wanting.

You will still want to organize the HTML file roughly as I mentioned. The reason for this is the way that the compiler's page processor works: it replaces the "x-compile" block with one or more script tags. You will want to replace the "ext-all.js" script tag as part of your build which is what the "x-bootstrap" block is for.

There is a section of the above guide that describes this scenario more or less - look for the "Alternative Strategy - Sharing A Framework Subset" section.

Concatenate application js files

Thread Tools

Search Thread

Display

Concatenate application js files

Concatenate application js files