While Ext JS was developed under the assumption that its users will most likely work with Sencha Cmd too, there's no hard and fast rule that dictates that it must be used.
We're not going to cover the installation of Sencha Cmd here. The latest installer is available on the Sencha website (http://www.sencha.com/) and should be a straightforward process.
In the next few pages, we'll create a small application without using Sencha Cmd and examine a couple of sticking points we'll hit on the way.
One of these sticking points comes up straightaway. With Sencha Cmd, creating a new application is as easy as the following command:
sencha -sdk ~/<path-to-ext-sdk> generate app MyApp ./my-app
Within seconds, Sencha Cmd creates a new directory called my-app
containing the following:
app.js
, app.json
, and Application.js
filesindex.html
file.sencha
directory and a build.xml
Now, much of this is part of the Sencha Cmd support infrastructure that we can discard. We're going to have to manually create a lot of the preceding detailed items. Let's get started.
Let's create the application directory and copy the Ext JS SDK in here:
Next up is the index.html
page. We can create a standard HTML5 page and need to hook up the JavaScript and HTML for Ext JS. In an application generated by Sencha Cmd, we'd have the Bootstrap files to help us here. They go through your application's dependency tree and autoload files accordingly. Without Sencha Cmd, we have to include these files manually. So, we end up with the following code:
<!DOCTYPE HTML> <html> <head> <title>NoCMD</title> <link rel="stylesheet" type="text/css" href="ext/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"> <script type="text/javascript" src="ext/build/ext-all.js"></script> <script type="text/javascript" src="ext/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script> <script type="text/javascript" src="Application.js"></script> </head> <body></body> </html>
We can now begin to build our application, starting with a small "Hello World" that displays a message box:
// Application.js Ext.application({ name: 'NoCMD', launch: function() { Ext.Msg.alert('Welcome', 'To our Command-free application!'), } });
Next step is to turn this into an MVVM application. Once we've built the directory structure by adding app
, app/model
, app/store
, and app/view
, we can add our first view. Remember that everything we've done so far would have been created with a single call to Sencha Cmd.
Here's the code for our view classes; the view model comes first:
Ext.define('NoCMD.view.main.MainModel', { extend: 'Ext.app.ViewModel', alias: 'viewmodel.main', data: { introText: 'Welcome to the Command-free MVVM application!', buttonText: 'Click Me!' } });
This is entirely standard and is followed by the view itself:
Ext.define('NoCMD.view.main.Main', { extend: 'Ext.Panel', requires: ['NoCMD.view.main.MainModel', 'NoCMD.view.main.MainController'], viewModel: 'main', controller: 'main', items: [ { xtype: 'component', bind: { html: '{introText}' } }, { xtype: 'button', bind: { text: '{buttonText}', handler: 'onClickButton' } } ] });
Note that in comparison with our previous apps, we have to explicitly require the view model and view controller. We'll come back to this in a moment. Finally, here's the view controller:
Ext.define('NoCMD.view.main.MainController', { extend: 'Ext.app.ViewController', requires: [ 'Ext.MessageBox' ], alias: 'controller.main', onClickButton: function () { Ext.Msg.alert('Confirm', 'Are you sure?'), } });
Let's go back to the requires
option. When working with Sencha Cmd, the viewModel
and controller configuration options are parsed as auto-dependencies. When we run the meta-command (or another command such as build that calls the meta-command), it compiles your code and produces Bootstrap files that tell Ext JS how to load your application.
Without Sencha Cmd, we have no autodependencies, so they must be specified explicitly with the requires
option. That's another couple of lines of code that we could have avoided.
Not to mention the fact that all of these view-related files could have been generated with just one command:
sencha generate view main.Main
We're already seeing how setting up our application and adding new features is simplified with Sencha Cmd. Let's look briefly at the other end of the process: deployment.
We want to ensure that our users have a production build as slim as possible to minimize download times. With Sencha Cmd, we can use the build
command to create a set of files for deployment that meet our requirements. Sencha Cmd will parse our JavaScript files and metadata and create a minimized JS file that only contains the classes we're actually using in our application. It does this by examining the requirements that each class has and building a tree of dependencies that can be combined into a single download.
Without Sencha Cmd, where are we? Here are the steps we'll need to take on each production build:
index.html
with this new file.Remember, this is only for JavaScript! Sencha Cmd can perform a similar process for CSS and compile the application's Sass files into a single download.
In truth, the nature of an Ext JS application is such that performing this kind of production optimization becomes a lengthy process and is prone to errors. In the rest of this chapter, we'll show how your builds and the rest of your workflow will become quicker, easily reproducible, and result in a higher-quality end product.