Create, Build & Package Sencha Touch project using Sencha Cmd


Image

Problem Statement

In a typical Sencha Touch based enterprise project, we create various JS+CSS files and it becomes cumbersome to manage them during the development because they need to be listed in the proper order in the index.html file and for every addition of a file, we need to add it to the index.html, as well. After the development is done, we minify all the JS and CSS files to have better loading performance, and go back and modify the index.html file to use the minified files rather than individual files. After introduction of the new Class System in ExtJS this tedious task has been taken care by the framework and the developer is not required to do all that, anymore. This is a big relief. However, the new Class System expects a specific folder structure so that it can load the classes, dynamically, and is based on the MVC architecture. To make this managing of folder structure effortless and leverage the same for the minification, Sencha has provided a tool – Sencha Cmd. So, as long as you plan to use the MVC architecture offered by Sencha Touch, Sencha Cmd is a must tool to create, build and package your application.

Scope of the article

This article provides you steps to set up Sencha Touch project using Sencha Cmd with an example to create a registration form. The article will cover how we can generate a skeleton application using Sencha Cmd, how we create entities – model, view, controller, and store, and how we can build the application to get the minified JS and CSS out. The article will end with the steps to create a package and testing the same in a emulator. We have used Android for demonstration. However, the steps are similar for other platforms, as well.

Pre-requisites

  1.  Java Run-time Environment 1.6 or above
  2. Sencha Touch 2.1 or above
  3. Sencha Cmd 3.0 or above

Step 1: Install Sencha Cmd

1)  Extract the zip and double click on .exe file.

2) After running the command, you must see similar type of suggestions

Image

Click on Next> button

Image

After successful installation, it shows below message.

Image

Click on Finish button

3) Once all the above steps are done successfully, go to command line and enter command “sencha”. You must see suggestions for command as shown below.

Image

Step 2: Generate project structure using Sencha Cmd:

1) Create sample Sencha Sencha Touch project structure with following command.

Sencha -sdk /path/to/Sencha TouchsdkFolder generate app MyAppName /path/to/MyAppFolder

2) Project structure generated by above command will have the following structure:

Image

Step 3: Create sample model, view and controller using Sencha Cmd:

1)  Go to project path and create sample controller through Sencha Cmd.

Sencha generate controller Main

With above command, it should create controller with name Main

Ext.define('SenchaTouchExample.controller.Main', {

 extend: 'Ext.app.Controller'

});

2)  Create Model using following command

Sencha generate model Server name:string

With above command, it will create model with name Server and with field name and type as string

Ext.define(' SenchaTouchExample.model.Server', {

 extend: 'Ext.data.Model',

 fields: [

 { name: 'name', type: 'string' }

 ]

});

3)  Create sample view using following command.(There is no direct command to create view for Sencha Touch. But, it provides command to create form)

Options can be:

    • –fields – comma separated list of “name:type” field pairs
    • –name – The name of the form to generate
    • –xtype – Xtype for the form. Defaults to lowercase form of the name.

Sencha generate form Registration“name1:text”,“name2:text” registrationform

Above command will create a sample view with name specified.

Ext.define('SenchaTouchExample.view.Registration', {

 extend: 'Ext.form.Panel',

 xtype: 'registrationform',

 config: {

 title: 'Registration',

 items: [

 {

 name: 'name1',

 xtype: 'textfield',

 label: 'NAME1'

 },

 {

 name: 'name2',

 xtype: 'combofield',

 label: 'NAME2'

 },

 {

 xtype: 'button',

 text: 'Submit',

 ui: 'confirm'

 }

 ] 

 }

});

Note: Noother parameters available for creating view and controller except name.
Note: We cannot create store using Sencha Cmd.

Step 4: Create a registration form:

1)  Edit app.js and place the following code accordingly.

In the generated code, in the place where initializing the view,

 // Initialize the main view
 Ext.Viewport.add(Ext.create('SenchaTouchExample.view.Registration'));

2)  Create a view file with name Registration in app/view folder.

Sample code:

Ext.define('SenchaTouchExample.view.Registration', {

 extend: 'Ext.Container',

 xtype: 'main',

 config: {

 items:[{

 xtype: 'formpanel',

 scrollable: true,

 items : [{

 xtype : 'fieldset',

 title: 'Registration Form',

 defaults : {

 xtype : 'textfield',

 labelWidth : '35%'

 },

 items : [ {

 xtype : 'textfield',

 name : 'username',

 label : 'User Name/Email Id',

 placeHolder : 'Enter User Name/Email Id',

 required : true

 },{

 xtype : 'passwordfield',

 name : 'PassWord',

 label : 'Password',

 placeHolder : 'Enter Password',

 required : true

 }, {

 xtype : 'passwordfield',

 name : 'ConfirmPassword',

 placeHolder : 'Re-Enter Password',

 label : 'Re Enter Password',

 required : true

 }, {

 xtype: 'selectfield',

 name : 'servercombo',

 label: 'Server',

 displayField: 'name',

 valueField: 'name',

 store : Ext.create("SenchaTouchExample.store.Server", { autoLoad: true

 })

 },{

 xtype : 'button',

 margin : 10,

 ui : 'confirm',

 text : 'Ok'

 },{

 xtype: 'button',

 text: 'Cancel',

 margin : 10,

 ui : 'decline',

 handler: function(){

 this.up('formpanel').reset();

 }

 }]

 }]

 }

]

 }

});

3)  In the example, to show content in select field, store was specified. Hence, create a store, with the name Server, which is specified in the select field’s store.

Sample Code:

Ext.define('SenchaTouchExample.store.Server', {

 extend : 'Ext.data.Store',

 requires:['SenchaTouchExample.model.Server'],

 config: {

 model: 'SenchaTouchExample.model.Server',

 proxy: {

 type: "ajax",

 url : "data/server.json",

 reader: {

 type: "json",

 rootProperty: "data"

 }

 }

 }

});

4)  In above code, proxy was set and data is being retrieved from JSON file. So create a JSON file in data folder.

Sample JSON data:

{"data":[{"name":"Buddha"},{"name":"Zorba"},{"name":"Ashoka"}]}

Run the application:

Now, run the application. You should be able to see the registration form view similar to following output.

Image

Image

Emulator view:

Run the application in emulator

Image

Step 5: Packaging Application:

Packaging decreases the loading time of your application. Here are the steps to package your app using Sencha Cmd.

Go to your project folder and execute the following command.

Sencha app build production

Once, the command was executed, it should create a build folder in main project structure.

The structure looks like:

Image

app.js contains the whole code related to application. You can run the application by navigating browser to packaged location.

Summary: This article provides steps to create Sencha Touch project using Sencha Cmd with an example to create a registration form.

References:

Tagged with: , , , , , ,
Posted in Sencha Touch
2 comments on “Create, Build & Package Sencha Touch project using Sencha Cmd
  1. sunny says:

    Hi,
    Can you tell me how to deploy this application on android emulator/android device using sencha cmd

  2. Ali says:

    Hi,
    thanks for your introduction.
    And can you tell me how “Run the application in emulator”, which command can make the app to a Android apk package?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

We Have Moved Our Blog!

We have moved our blog to our company site. Check out https://walkingtree.tech/index.php/blog for all latest blogs.

Sencha Select Partner Sencha Training Partner
Xamarin Authorized Partner
Do More. With Sencha.

Recent Publication
%d bloggers like this: