Create & build Sencha ExtJS project using Sencha Cmd


Image

Problem Statement

In a typical Sencha ExtJS 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 ExtJS, 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 ExtJS 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.

Pre-requisites:

  1.  Java Run-time Environment 1.6  or above
  2. ExtJs 4.1.1a 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 ExtJs project structure with following command.

sencha -sdk /path/to/ExtJssdkFolder 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('extjsExample.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('extjsExample.model.Server', {
 extend: 'Ext.data.Model',
 fields: [

 { name: 'name', type: 'string' }
]
});

3)  Create sample view using following command (ExtJs Specific. Doesn’t work for touch )

sencha generate view Registration

Above command will create a sample view with name specified.

Ext.define("extjsExample.view.MyCmdView", {
 extend: 'Ext.Component',
 html: 'Hello, World!!'
});

Note: No other 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 add registrationform xtype in viewport as an item.
Ext.application({

controllers: ["Main"],

views: ['Registration'],

requires:['extjsExample.view.Registration'],

name: 'extjsExample',

launch: function() {

Ext.create('Ext.container.Viewport', {

items: {

xtype: 'registrationform'

}
});
}

});

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

Sample code:

Ext.define("extjsExample.view.Registration", {

 extend: 'Ext.Container',

 xtype: 'registrationform',

 requires:['Ext.layout.container.Card','Ext.form.field.ComboBox',

 'Ext.form.field.Text'],

renderTo: Ext.getBody(),

width: 500,

 height: 200,

 initComponent : function() {

 var me = this;

 var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';

Ext.apply(me, {

 ltems: [{

 xtype: 'form',

 frame: true,

 title: 'Registration Form',

 bodyPadding: '10 10 0',

 defaults: {

 anchor: '100%',

 allowBlank: false,

 msgTarget: 'side',

 labelWidth: 120

 },

items: [{

 xtype: 'textfield',

 name: 'username',

 emptyText: 'Enter User Name / Mail id',

 afterLabelTextTpl: required,

 fieldLabel: 'User Name/Mail Id'

 },{

 xtype: 'textfield',

 name: 'password',

 inputType: 'password',

 afterLabelTextTpl: required,

 emptyText: 'Enter Password',

 fieldLabel: 'Password'

 },{

 xtype: 'textfield',

 name: 'retype-password',

 inputType: 'password',

 afterLabelTextTpl: required,

 emptyText: 'Re-Enter Password',

 fieldLabel: 'Re-Enter Password'

 },{

 xtype: 'combo',

 name: 'server',

 allowBlank : true,

 fieldLabel: 'Server',

 store: Ext.create('extjsExample.store.Server'),

 displayField: 'name',

 editable: false,

 valueField: 'name'

 }],

buttons: [{

 text: 'Ok',

},{

 text: 'Cancel',

 handler: function() {

 this.up('form').getForm().reset();

 }

 }]

 }]

 });

 me.callParent(arguments);

 }

});

3)  In the example, to show content in combobox,  store was specified. Hence, Create a store, with the name Server, which is specified in the combo box’s store.

Sample Code:

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

 extend : 'Ext.data.Store',

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

model: 'extjsExample.model.Server',

 storeId : 'server',

 proxy: {

 type: 'ajax',

 url: 'data/server.json',

 reader: {

 type: 'json',

 root: '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 in your server. You should be able to see the registration form view similar to following output.

Image

Click on dropdown to see JSON data.

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, above command was executed, it should create a build folder in main project structure.

The structure looks like:

Image

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

Summary: This article has provided steps to create and build Sencha ExtJS project using Sencha Cmd with an example to create a registration form.

References:

Tagged with: , , , ,
Posted in Sencha ExtJS
8 comments on “Create & build Sencha ExtJS project using Sencha Cmd
  1. venkateshtejap says:

    Hi,

    In the Registration.js file please use the “items” instead of “items”.

    Thanks,
    Venkatesh Teja.

  2. Maz says:

    In the last point you mentioned Run the command from you project folder. Which folder are you exactly referring to?

  3. janardhan pasumarthi says:

    @Partha,

    Do you see any errors in console? And are you able to run the application without build?

  4. partha says:

    I have created and built according to the instruction, but nothing showing in the browser.
    what would be the reason?

  5. Humayun Javed says:

    Hi nice Post but i am facing a problem that is after building testing app using sencha app build testing…when i load it in browser Ext.Loader not able to find all controllers of my app. Please tell what would be the reason? waiting for reply. and here is my app.js code

    Ext.application({
    name: ‘SB’,

    controllers: [
    ‘Login’,
    ‘Routes’,
    ‘Stores’,
    ‘opsHierarchy’,
    ‘UserManagementSSC’,
    ‘UserManagementCDC’,
    ‘ReasonCodeConfig’,
    ‘Trips’,
    ‘ProviderManagement’,
    ‘Photos’,
    ‘Reports’
    ],

    autoCreateViewport: true,
    launch: function () {

    Ext.util.Cookies.clear(‘utype’);
    Ext.util.Cookies.clear(‘providerID’);
    Ext.Ajax.timeout = 150000;

    var phNumberVType = {
    telNumber: function(val, field){
    var phoneRegex = /^(\d{3}[-]?){1,2}(\d{4})$/;
    return phoneRegex.test(val);
    },
    telNumberText: ‘Not a valid phone number. Must be in the format 123-4567 or 123-456-7890 (dashes optional)’,
    telNumberMask: /[\d\-]/
    };

    Ext.apply(Ext.form.field.VTypes, phNumberVType);

    Ext.apply(Ext.form.VTypes, {
    ‘multiemail’ : function(v) {
    var array = v.split(‘;’);
    var valid = true;
    Ext.each(array, function(value) {
    if (!this.email(value)) {
    valid = false;
    return false;
    };
    }, this);
    return valid;
    },

    ‘multiemailText’ : ‘This field should be an e-mail address, or a list of email addresses separated by (;) and without space in the format “user@domain.com;test@test.com”‘,

    ‘multiemailMask’ : /[a-z0-9_\.\-@\;]/i,

    ’email’ : function(v){
    var email = /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/;
    return email.test(v);
    }
    });

    var task = new Ext.util.DelayedTask(function() {
    // Fade out the body mask
    splashscreen.fadeOut({
    duration: 1000,
    remove:true
    });
    // Fade out the icon and message
    splashscreen.next().fadeOut({
    duration: 1000,
    remove:true,
    listeners: {
    afteranimate: function() {
    // Set the body as unmasked after the animation
    Ext.getBody().unmask();
    }
    }
    });
    });
    // Run the fade 500 milliseconds after launch.
    task.delay(500);
    }
    });

  6. @purna
    First you define some name for the common app.
    i.e prefix for the common source.
    for example Common could be the prefix name/common app name.
    then define your classes with this name like
    Ext.define(‘Common.view.Admin’,{});

    In the app.js or application.js
    deinfe the path for the name Common
    like
    Ext.Loader.setPath({
    ‘Common’:’path/to/your/common/src’
    });

    And add requires for the classes defined in common/src in your application.

    Ext loader will load the classes form the common/src or the path given in the setPath function

  7. k purna chandra reddy says:

    hi ,
    where to create common code folder like common/src .
    how to mentation path in ext.define .

    Ext.define(‘ ——. common.src.Admin’,{
    extends:’Ext.container.Container’

    …………………………..

    });

  8. k purna chandra reddy says:

    Thanks You so much for your Post. It Really helped me .

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: