PDA

View Full Version : 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.


<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.


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.


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:



<!-- <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

Ext.application({ name: 'AM',


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


controllers: [
'Users'
]
});

controller/Users.js

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

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

store/Users.js

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

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


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

view/user/Edit.js

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

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/#!/guide/command_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.