1. #1
    Ext JS Premium Member
    Join Date
    Dec 2011
    Posts
    23
    Vote Rating
    1
    paul_wang is on a distinguished road

      0  

    Default Concatenate application js files

    Concatenate application js files


    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);

  2. #2
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,365
    Vote Rating
    135
    dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold

      0  

    Default


    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.
    Don Griffin
    Ext JS Development Team Lead

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  3. #3
    Ext JS Premium Member
    Join Date
    Dec 2011
    Posts
    23
    Vote Rating
    1
    paul_wang is on a distinguished road

      0  

    Default


    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}
        ]
    });

  4. #4
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,365
    Vote Rating
    135
    dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold

      0  

    Default


    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.
    Don Griffin
    Ext JS Development Team Lead

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

Thread Participants: 1