Daily Archives: September 16, 2013

Using Sencha.io Src in your Touch Apps


Sencha.io Src is a nifty little anonymous cloud service available from Sencha Inc. that will automatically scale images for a mobile devices. This is particularly handy if you’re trying to dynamically adapt markup that had been produced for desktop web to a mobile device.

Recently we developed a Sencha-based app for the Archdiocese of St. Louis. One of the functions of this app was to display news articles from http://stlouisreview.com/. Content is delivered to the device from a JSON data feed, however as illustrated below, none of the images were sized appropriately for mobile devices – resulting in a blown-out layout.

Our solution was to simply modify our Sencha Touch container’s display template to dynamically redirect the header image to Sencha io.src as illustrated below. Note that the project was developed using Sencha Architect, thereby necessitating use of an override:

Ext.define('ArchSTL.view.override.news.Detail', {
    override: 'ArchSTL.view.news.Detail',
    config: {
      tpl: Ext.create('Ext.XTemplate',
       '{[this.senchifyUrl(values.description)]}', {

        senchifyUrl: function(str) {

            // match src="url"
            var urls = str.match(/src=(.+?[\.jpg|\.gif|\.png]')/);

            // get width of viewport
            var width = Ext.Viewport.element.getWidth() - 50;
            if (urls != null) {
              var url = urls[0].slice(5,-1);
              str = str.replace(url,"http://src.sencha.io/" + width + "/" + url);
            return str;

This change to the template worked great, as illustrated by the final result:

You can learn more about Sencha io.src here:

Check it out!