I started working with Sencha in 2009. It was ExtJS back then and was only for web development. Once started, I immediately fell in love with the library because of its structure and beautiful widgets. However, the learning curve was very steep and only a handful of developers were actively working on it that time.

There was hardly any good example or tutorial available on the web except Sencha’s examples and Saki’s blog. I remember posting in Sencha forum whenever I was stuck and used to get solutions and advises almost immediately from some great ExtJS developers like Animal (that is still his nickname in sencha forum), Saki, Jay Garcia (Author of ExtJS in Action, Sencha Touch in Action)  and Ed Spencer. Following their blog posts and forum answers taught me how to write effective and quality Sencha codes. Till now, I have developed 50+ medium and large level Sencha Touch/ExtJS applications and at present mentoring a large team of Sencha developers at Innofied.

Today the scenario is much different and Sencha is a large community now with a huge user base. You get lots of Sencha tutorials all over the web but a very handful of them actually teach you how to follow specific guidelines while developing a medium level Sencha project. Often I see Sencha Touch projects from different programmers with hardly any planning and architecture of code and hence an absolute unmanageable code base. So, here I am listing some simple Sencha Touch coding guidelines following which will greatly help you manage your Sencha Touch apps:

1. Always have a Utility file

It is recommended  to always maintain a Utility file in your application.   Here we can manage all general information like API url details, function to handle errors, showing alert messages etc. You can make it a singleton class and put it in a separate “util” folder under “app”.

Utility.js

Ext.define('App.util.Utility', {
  singleton: true
  // Other properties and methods here
});

2. Access all APIs from a single property

Most of the developers writes the proxy urls or ajax urls directly in the Store or Controller file as a String. It helps a lot if you maintain all the api urls in Utility and use the reference directly. Check this:

api method

// A self executing function to return an object with all the api urls
api: (function () {
  // This is the base API url
  var baseUrl = 'http://www.example.com/api/';

  return {
    baseUrl: baseUrl,
    categories: baseUrl + 'categories',
    about: baseUrl + 'about'
  }
})()

Here api is an self executing function added in Util to return complete set of all the API urls and you can access it like this:App.util.Utility.categories. This way if ever you need make any changes to api details, you will never need to search in your app files – Utility is the one stop address for all the urls.

3. Maintain all the templates inside index.html

In almost all the examples and tutorials you will see people add tpl or itemTpl with lots of html tags as strings. It becomes very irritating to debug, change and format because most of us use IDEs and html inside Javascript files sucks as hell. So, at Innofied we follow a simple process: We add all the templates in index html file like this:

Templates inside index.html 

<!-- Sales Rep TPL Info -->
<script type="text/template" id="tpl_sales_rep_info">
  <div class="black-box sales-rep-details" id="sales_rep_info_block">
    <div class="name">{name}</div>
    <div><a href="tel:{phone}">{phone}</a></div>
    <div><a href="mailto:{email}">{email}</a></div>
  </div>
</script>

<!-- Sales Rep TPL Input -->
<script type="text/template" id="tpl_sales_rep_input">
  <div class="contact-us">
    <div class="black-box">
      <div class="value">
         Enter your zip code
      </div>
    </div>
    <div class="black-box">
    <div class="label">Zip Code</div>
    <div class="value">
      <input type="text" name="sales_rep_zip" id="sales_rep_zip"/>
    </div>
  </div>
</div>
</script>

 

We keep all the html fragments inside SCRIPT tag, so these html elements are not added in the DOM and you can access the data simply by accessing innerHTML of the Script tags. This works perfectly fine while creating builds and template codes in Views become easy to maintain.

Sample tpl

var touchTeam = Ext.create('Ext.DataView', {
  store: 'MyStore',
  itemTpl: document.getElementById('tpl_sales_rep_input').innerHTML
});

 

4. Animate and activate containers from a common function

I prefer to manage handling all the page transitions and activation from a common function inside Utility class. The benefits are multifold:

1. All the transitions are managed from a single place. So, if I find a particular platform or device not supporting the animations well, I can set it off easily.
2. Default sencha transition is slide. You can change it to fade or some other by changing it here without going through all the setActiveItem functions.
3. Maintain animation duration.
4. Code reuse.

Have a look at the function below which I found so helpful for a large navigational apps.

showActiveItem method

// Add these properties and the method in your Utility class

// Type of animation
animationType : 'slide',

// Default animation duration is 250ms. You can change it here
animationDuration : 100,

// Turn ON or OFF the transitions
enablePageAnimations : true,

// Method to activate a panel
showActiveItem: function (parentPanel, childPanel, animation) {
  animation = Ext.apply({
    type: this.animationType,
    duration: this.animationDuration
  }, animation || {});

  if (parentPanel && childPanel) {
    // enablePageAnimations property of Utility says whether to turn ON or OFF the transition
    if (this.enablePageAnimations) {
      parentPanel.animateActiveItem(childPanel, animation);
    } else {
      parentPanel.setActiveItem(childPanel);
    }
  }

  return this;
}


// Use it in your Controller like this
var panel = new Ext.Container({
  html : 'Hellow World!'
});

this.getMain().add(panel);
App.util.Utility.showActiveItem(this.getMain(), panel);

Start using the above points and you will soon see the benefits. I am not saying they are the best ways to do it but I used these in multiple apps and found these will reduce your last minute headache a lot. I am going to add some more concepts in the 2nd part of this post. Stay tuned!