Using Sencha.io Src in your Touch Apps

before

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;
        }
      })
    }
});

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

You can learn more about Sencha io.src here:
http://docs.sencha.io/current/index.html#!/guide/src

Check it out!

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