PDA

View Full Version : Minifying ExtJs application



apogee
19 Mar 2014, 1:34 PM
Hi,
We have an extjs application where the structure we laid out doesn't exactly match the structure Sencha recommends. In our structure we don't have an app.js but we do have a js where we mention the autoload and launch function, example as below along with the folder structure.

What we are looking is to minify all the JS files in admin folder and create one JS to be used, we tried looking at the Sencha CMD but of no luck. Can some one please point us for the exact steps for minifying our application for production use.


Ext.Loader.setConfig({
enabled: true,
paths: {
'Admin': '../../script/js/ace/admin',
'Ext.ux': '../../script/js/ext4/ux'
}
});


Ext.require('Admin.view.Administration');


Ext.application({
name: 'Admin',
appFolder: '../../script/js/ace/admin',
launch: function()
{
Ext.QuickTips.init();
var me = this;
Ext.create('Admin.view.Administration', {
renderTo: 'contentPanel'
});
}
});


Folder Structure of our application is.
48363

Thanks in advance and let us know if you need more information.

The current ext version we are using is 4.0.7 and we started migrating to 4.2.1.

Thanks

scottmartin
19 Mar 2014, 2:47 PM
we tried looking at the Sencha CMD but of no luck

Can you elaborate?

The most painless way would be to use Cmd and generate a new app with the same namespace.
Then copy all of your code over to the app DIR and run and few commands and your are done.

btw, apogee .. reminds me of the Commander Keen days <bg>

scottmartin
19 Mar 2014, 2:53 PM
The current ext version we are using is 4.0.7 and we started migrating to 4.2.1.

This is most likely the reason. You will need to use 4.2.1 (4.1.2a minimum) to support Cmd

apogee
19 Mar 2014, 3:18 PM
[QUOTE=scottmartin;1035142]Can you elaborate?

Upgraded our application to work with 4.2.1, but using our structure and tried Cmd

scottmartin
19 Mar 2014, 5:47 PM
For Cmd to work, it has to create the meta files then you copy over the files.



// read in all your classes from copied app files
sencha app refresh
// build app; compress
sencha app build


I would need to know the steps you have taken and where it has failed to help.

apogee
19 Mar 2014, 6:23 PM
The first thing I tried to do was generating JSB3 file, I know its deprecated in 4.2.1 but with the structure we have I felt that was the only option.
I tried the below command, but no jsb3 file got generated

sencha build admin.jsb3 <path to the admin js folder>



Thanks

scottmartin
20 Mar 2014, 3:49 AM
That is not going to work. You would need to generate a new app, then copy over your code to app DIR, then refresh


sencha -sdk /path/to/SDK generate app MyApp /path/to/myapp

apogee
20 Mar 2014, 5:22 AM
Thanks scott, I will try creating new app and copying my code.
Another thing with my folder structure is that we have multiple apps, and in most cases we try to use the js from other app folders.
For example in the below image we have utilities and admin apps, from utilities app we use SourceStore and the autoloader is defined as below to access the required


Ext.Loader.setConfig({
enabled: true,
paths: {
'Admin': '../../script/js/ace/admin',
'Utilities': '../../script/js/ace/utilities',
'Ext.ux': '../../script/js/ext4/ux'
}
});


In this case how does the Cmd work ? does it copy the required js into the minified version ?




48376

Thanks

scottmartin
20 Mar 2014, 5:41 AM
In this case, you would generate a workspace, then generate each app under:
http://docs.sencha.com/extjs/4.2.2/#!/guide/command_workspace