Connecting Your Sencha Touch Apps with Windows Azure

At SenchaCon 2013, our CEO Michael Mullany announced the beginning of a strategic partnership with Microsoft that connects our developer communities, combining the power of Sencha Touch with the capabilities of Windows Azure cloud services.

Today, we are introducing the Sencha Touch Extensions for Windows Azure — and it’s available now on Sencha Market or installed directly through Sencha Cmd:

sencha package get touch-azure

In this article, I’ll introduce you to the Sencha Touch Extensions for Windows Azure and give you some tips on getting started with using it in your Sencha Touch applications.

For more information and detailed instructions for getting started with the Sencha Touch Extensions for Windows Azure, check out our API documentation and guides. The package also ships with several examples to help you get going!

Sencha Touch Extensions for Windows Azure

The Sencha Touch Extensions for Windows Azure are a package that easily connect your Sencha Touch application to your Windows Azure mobile and storage services. It seamlessly supports:

  • connecting to your data and custom APIs
  • authenticating users via Microsoft, Google, Facebook and Twitter
  • managing push notifications for iOS, Android and Windows Phone
  • advanced Table and Blob storage

With Sencha Touch and Windows Azure, it has never been easier to develop mobile applications that live in the cloud! Check out this video: Using Sencha with Windows Azure Mobile Services.

Getting Started

Using the Sencha Touch Extensions for Windows Azure package in your Sencha Touch application is simple! After the Sencha Touch Extensions for Windows Azure are installed on your machine, the first step is to add the package to your app.json as a required resource:

requires : [

Next, add as a required dependency in your Ext.application():

requires : [

Azure Mobile Services

If you are connecting your application to your Windows Azure mobile services account, the last step is to initialize Ext.Azure with your mobile services credentials:

    requires : [
    launch : function() {
                    appKey : '...',
                    appUrl : '...'
                    //optional configs for authentication 
                    //and push notifications

At this point, we can choose to connect to our mobile service’s data using the class. Just attach the proxy to any model or store as usual:

Ext.create(‘, {
    proxy : {
            type : ‘azure’,
            tableName : ‘mytable’ //from your Azure account

With the azure data proxy, we don’t need to define a url on the store — Ext.Azure automatically knows where to connect to pull its data. The azure proxy will also correctly format the paging/filtering parameters and cross-domain HTTP headers for us, making it incredibly simple to interact with the Mobile Services REST API.

If we need to authenticate users, we can easily do this through Windows Azure as well. The class (and optionally the view) seamlessly handle the necessary oAuth redirects to authenticate users via Microsoft, Google, Facebook or Twitter:‘twitter’); //launched oAuth dialogue/redirect

Finally, we can use the power of Windows Azure to manage push notifications across a variety of mobile devices. Using a Sencha Touch application packaged with Cordova, we simply need to add a pushConfig object to our Ext.Azure configuration:

    requires : [
    launch : function() {
                    appKey : '...',
                    appUrl : '...',
                    pushConfig : {
                            ios : true,
                            android : ‘...’,
                            windowsphone : ‘...’

The singleton will automatically register your device to receive push notifications. While the logic for managing and sending push notifications physically lives in the Windows Azure portal (see our user guide), your Sencha Touch application only needs to listen for the “pushnotification” event. Then you can notify the user as you see fit.

Azure Storage Services

If you are connecting your application to your Windows Azure storage services account, we can simply create Table and Blob components, as needed, in our application code:

var blobAccount = Ext.create('', {
    accountName : '...',
    accessKey   : '...'
    //params here...

Using Sencha Architect

The Sencha Touch Extensions for Windows Azure are fully compatible with Sencha Architect. While you’ll need to follow our guide on installation, using Ext.Azure with Sencha Architect is very easy.

First, check that the Sencha Touch Extensions for Windows Azure package is available in your Toolbox:

Next, create a new property on your Application node named “azure”. It should be an object and look like this:

azure : {
    appKey : '...',
    appUrl : '...'
    //other configs for authentication
    //and push notifications

The last step is to drag into your Project Inspector. This class will automatically initialize Ext.Azure for us when the application starts — and now we can begin using the Ext.Azure utilities however we want.

To the Cloud!

We’re very excited about our strategic partnership with Microsoft and we can’t wait for you to try the Sencha Touch Extensions for Windows Azure.

By combining the power of Sencha Touch with the capabilities of Windows Azure cloud services, we know that you are going to build some fantastic applications. Tell us about them in the comments or on the forum!

20140220-touch-apps-azure-teaser.jpg 2 Comments   Read more

Top Support Tips

The Sencha Support team shares their top tips for using Sencha frameworks in the Sencha newsletter each month. In this article, we’ll give you a few new tips and a round-up of the top tips from earlier this year. If you’d like to get these tips and lots of technical articles on using Sencha frameworks, subscribe to the monthly Sencha newsletter.

Mavericks took Ruby 2 to Town (Sencha Cmd)

by Greg Barry

As you may or may not know, Sencha Cmd has always relied on Ruby 1.9.3 and below. There were some changes in Ruby 2.0 that created a few issues. For the morbidly curious, Ext JS themes use Sass variables which are set to “null !default”. Our “Cmd version” of Sass is an older version because newer versions introduced changes in the behavior of such variables. Ruby 2.0 introduced its own breaking change that was incompatible with the version of Sass included in Cmd. All of these things caused compatibility problems, which is why we required the older version of Ruby.

However, with the release of Mavericks came a default installation of Ruby 2.0. We made some quick adjustments, and we have a Cmd build that now works with Ruby 2.0. This new version of Cmd is shipped with a patched version of Sass that prevents the issues we ran into previously. This fix is available now in Cmd 4.0.1 beta.

Ext.util.Observable.capture() (Ext JS)

by Seth Lemmons

If you have ever wanted to see all of the events fired by a class that uses Ext.util.Observable, you can use the static capture method. You can do something like the following to see all events fired by a grid:

    var grid = Ext.widget('gridpanel', {
            renderTo: document.body,
            title: 'Capture Example',
            heigh: 300,
            width: 500,
            store: {
                    fields: ['foo'],
                    data: [{
                            foo: 'bar'
            columns: [{
                    text: 'Foo',
                    dataIndex: 'foo',
                    flex: 1
    Ext.util.Observable.capture(grid, function (eventName, args) {
            // console.log() will not work on all browsers - modify accordingly
            console.log(eventName); // log the event's name as it's fired

The capture method calls the function passed as the second param. Passed as params to this callback function are 1) the name of the event fired and 2) an array of the arguments passed from the firing of the event.

Not only can the capture method give you additional insights into how and when an observable instance is firing events, the callback method can also return false in order to prevent the firing of the event. If a class has a -before event it is best practice to use that to prevent the firing of an event, but if it does not, the capture method can be a handy utility method. You can read more about Observable’s capture method here.

AutoMaximize No More! (Sencha Touch)

by Greg Barry

In the past, we were able to emulate a full screen Web View with a setting called autoMaximize on the Viewport utility class. This effectively hid the the top and bottom bars in a web application. However, the helpfulness and functionality of this configuration became less and less useful as devices changed to prevent this sort of workaround. In fact, this configuration has gotten to the point of creating issues in Touch 2.3.0, especially when using iOS7. At this time, it is recommended that users remove the autoMaximize setting from their applications.

One Store to Rule Them All (Ext JS)

by Greg Barry

When building an app with Ext JS, conventionally, you give your store a storeId, which can then be shared via multiple components. However, if Grid A and Grid B share a store, and you filter the store, both grids will now present filtered data. What if you don’t want all of your components to be modified when the store changes? Have no fear!

When you define the store, you can give it an alias of ‘store.storealias’ (where storealias is your chosen alias name).

For example:

Ext.define('', {
        extend: '',
        storeId: 'MyStore',
        alias: 'store.mystore',
        fields: ['foo', 'bar']

Now, when you attach your store to your component, you’re actually attaching a new instance of the store and your components can remain separate.

store: {
        type: 'mystore'

To learn more, read the docs.

Segmenting a Line Chart (Ext JS)

by Mitchell Simoens

Sencha Ext JS offers a rich and full-featured charting package that’s plugin free and works cross-browser from IE6 to the newest Chrome version. A common question is how to display a line chart but not have a continuous line. Ext JS makes this very simple to accomplish by using false within your data. If you return false, this will be treated as a non-data point and will not draw the marker or the lines connecting the data points before and after the false data point. Here is an example:

var store = Ext.create('', {
        fields : ['month', 'foo', 'bar'],
        data   : [
                { month : 'January',   foo : 7,     bar : false },
                { month : 'February',  foo : 8,     bar : 3     },
                { month : 'March',     foo : 8,     bar : 2     },
                { month : 'April',     foo : 7,     bar : 1     },
                { month : 'May',       foo : false, bar : 1     },
                { month : 'June',      foo : 5,     bar : 1     },
                { month : 'July',      foo : 5,     bar : 1     },
                { month : 'August',    foo : false, bar : 1     },
                { month : 'September', foo : 7,     bar : 1     },
                { month : 'October',   foo : 8,     bar : 2     },
                { month : 'November',  foo : 8,     bar : 3     },
                { month : 'December',  foo : 7,     bar : false }
Ext.create('Ext.chart.Chart', {
        renderTo : Ext.getBody(),
        width    : 500,
        height   : 300,
        animate  : true,
        store    : store,
        axes     : [
                        type     : 'Numeric',
                        position : 'left',
                        fields   : ['foo', 'bar'],
                        title    : 'Sample Values',
                        minimum  : 0
                        type     : 'Category',
                        position : 'bottom',
                        fields   : ['month'],
                        title    : 'Month'
        series   : [
                        type   : 'line',
                        axis   : 'left',
                        xField : 'month',
                        yField : 'foo'
                        type   : 'line',
                        axis   : 'left',
                        xField : 'month',
                        yField : 'bar'

In this example, we have two line series to show the values of foo and bar. The foo line displays as 3 separate lines because of the two false values for May and August. The bar line displays as a single line, but unlike the foo line series, the bar series does not display the January and December data points due to the false values.

You can read more about Field Triggers here:

Building Responsive Apps Using Sencha Touch Button Sensitivity (Sencha Touch)

by Greg Barry

As device resolution gets bigger and better, some users may experience issues with Sencha Touch button sensitivity. Not to worry, we introduced a new event recognizer configuration item called moveDistance in Sencha Touch 2.2.0. MoveDistance determines the maximum distance in pixels a touchstart event can travel and still be considered a tap. On larger devices, the default 8px may be a bit too low, so some taps may be disregarded. To adjust this sensitivity, simply add the following to your application block.

    name : 'MyApp',
    eventPublishers : {
            touchGesture : {
                    recognizers : {
                            tap : {
                                        xclass      : 'Ext.event.recognizer.Tap',
                                        moveDistance : 20 //This was adjusted from the default 8

You can read more about the moveDistance configuration here.

Using Concatenation – Quicker File Transmission (Sencha Cmd)

By Seth Lemmons

Most of the time a developer will use Sencha Cmd to generate and then build Ext JS and Sencha Touch applications where the output JavaScript file is an all-classes.js file linked from the Cmd built index page. But, what if you want to concatenate a set of files that you choose and have them compressed for quicker file transmission?

For simple file creation using select files (not an application that requires Cmd to sort out the dependencies of each interconnected class), you can use the fs and concat commands.

For example, to concatenate the JavaScript file A and B, you could use the following command:

sencha fs concat -to=concatenated.js -from=file-a.js,/file-b.js

Or, if you want to minify the output, you could use:

sencha fs concat -to=concatenated.js -from=file-a.js,file-b.js and minify -yui -from=concatenated.js -to=minified.js

*-yui or -closure could be used for the compression option

You can read more about this function in our docs:!/guide/command_advanced

Battling Compression (Sencha Cmd and Ext JS)

by Greg Barry

There may be a situation in which an Ext JS user would like to create an uncompressed production build. Luckily, this is quite simple to do.

Just open your configuration, located here:


Once there, you can modify several compression settings.

To disable YUI compression change:


To disable CSS compression change:


You can read more about customizing Sencha Cmd options here:!/guide/command_advanced

20131111-top-support-tips.jpg 4 Comments   Read more

Announcing Sencha Touch 2.3 – Touch Grid, Cordova Support, and New Themes


Sencha Touch 2.3Today we’re releasing Sencha Touch 2.3 with lots of new features, an iOS 7-friendly theme, as well as an exclusive Touch Grid for our product bundles (Sencha Complete and Sencha Touch Bundle). Sencha Touch 2.3 includes 3 new themes: Cupertino (themed for iOS 7), Cupertino Classic (themed for iOS6.x and below), Mountain View (themed for Android), and enhancements to other themes (including BlackBerry 10 upgrades). Sencha Touch 2.3 also integrates Cordova to enable access to more device features, and includes other enhancements. The release of these features takes mobile app development with Sencha frameworks to a whole new level, especially for data-rich applications that access device features.

Download Sencha Touch 2.3

The iOS 7 Theme for HTML5

Sencha Touch Grid

It takes a herculean effort to build themes that look native to your target platform. There is absolutely no doubt that the iOS 7 look-and-feel is the most significant change since the first release of iOS. With the release of iOS 7, everyone wants to get their apps to look native on iOS 7 as soon as possible. With Sencha Touch 2.3, we are providing out-of-the-box support for iOS 7. You can upgrade your existing iOS apps built with Sencha Touch very quickly, and you can even choose between Cupertino and Cupertino Classic based on the platform version you are targeting with your iOS apps.

Other New Themes & Enhancements

The existing themes for Sencha Touch have received a number of enhancements in version 2.3. We have gone through the Blackberry 10 theme in great detail and enhanced its unique look and feel to match Blackberry 10 specifications exactly. In addition, we have included new themes for iOS and Android: Cupertino Classic (pre-iOS 7 friendly theme) and Mountain View (Android friendly theme). For more information on BlackBerry 10 theme, visit BlackBerry Developer Blog.

Themes can be used based on their respective platforms using the theme switching capabilities of Sencha Touch. For more details on BlackBerry 10 development, see the BlackBerry Getting Started guide.

The All New Touch Grid

Sencha Touch Grid

Sencha Touch Grid is a highly optimized grid component for touch devices. The Touch Grid makes it easy to fetch, sort, filter, and edit large amounts of data on touch devices. It’s easy to configure each column of the grid as well as customize any column using column renderers.

The Sencha Touch Grid uses a plugin architecture to support additional grid functionality such as:

  1. ViewOptions to allow showing, hiding and reordering of grid columns
  2. ColumnResizing to allow using pinch gestures to resize columns
  3. Editable to enable editing grid contents for an entire row (one at a time)
  4. MultiSelection to enable selection and deletion of multiple rows at a time
  5. PagingToolbar to quickly navigate to another page of data
  6. SummaryRow to add or pin an additional row of summarized data (averages, max, min, etc.) to the top of the grid

Touch Grid is available as part of Sencha Complete or the Sencha Touch Bundle.

In the near term, we’ll be releasing some enhancements to the Touch Grid, including a buffered store. If there’s a feature enhancement you want, please suggest it n the forums to help improve the component. Touch Grid will be supported in Sencha Architect 3 via a User Extension in an upcoming release.

Evaluate Sencha Complete
Evaluate Sencha Touch Bundle

Cordova Support

The Sencha Touch 2.3 release has new native packaging capabilities for Sencha developers and includes a number of new themes and enhancements. With Touch 2.3, we have made native packaging as seamless as possible. We’ve updated the device APIs and Sencha Cmd to make Apache Cordova a fully supported component. Touch 2.3 supports Cordova APIs for Accelerometer, Camera, Capture, Compass, Connection, Contacts, Device, Events, File, Geolocation, Globalization, InAppBrowser, Media, Notification, Splashscreen, and Storage. In addition, Touch 2.3 supports Adobe PhoneGap Build from within Sencha Cmd 4.0 which can package your application for multiple devices with a single command. We’ve also included a detailed guide for creating native builds on your local machines. Touch 2.3 does not directly support Cordova API plugins such as the Bluetooth plugin, but you can use them in your application by following the directions provided in our guides.

File Upload & Progress Indicator

Touch 2.3

Sencha Touch 2.3 also includes full support for XMLHTTPRequest Level 2 (XHR2) on devices that support XHR2. The XHR2 specifications include improved support for files and images as well as access to progress events. We have included a new ProgressIndicator Component in Sencha Touch 2.3 that uses the new XHR2 capability to give users a true indication when working with files. A new Ext.field.File component has been added with capture support on device.

Sencha Cmd 4.0

With this release, we have done considerable internal refactoring to support the latest Sencha Touch version as well as Cordova integration. The new ant cordova command enables access to Cordova 2.9.0 APIs and packaging. We have also added the new app watch command. app watch runs in the background and automatically handles changes to the common files and continually updates any changes to your project. When changes are detected, only the minimum amount of work necessary is performed to bring your app and its CSS up to date, saving you from having to manually run app refresh or rebuild your SASS. This feature is available for both Touch and Ext JS in Sencha Cmd 4.0.

Download Sencha Cmd 4.0


Creating visually compelling mobile applications and making them run fast is hard work for developers. With the release of Sencha Touch 2.3, iOS 7 theme, Sencha Touch Grid, and Cordova support, along with other new themes, delivering the amazing web application experiences becomes that much easier. These enhancements provide a great opportunity for those who are building data rich applications and those who want to provide native-like look-and-feel for iOS, Android and BlackBerry devices. We are very excited about this release and would like to hear about your experiences with these new features. Remember to give us your feedback on the forums, so we can keep improving them for you.

20130927-touch-2-3.png 14 Comments   Read more

Sencha March Madness

It’s not everyday we release two product updates and launch a new bundle in one fell swoop, but today is not an ordinary day. We’re very excited to announce the release of Sencha Architect 2.2, Sencha Ext JS 4.2, and the new Sencha Touch Bundle.

If there’s a common theme across all three of these announcements, it is developer productivity. Today’s releases make things faster, easier, and more convenient for developers. The new Sencha Touch Bundle brings all of our mobile development technologies together in a convenient and cost-effective package. The many new features in Architect 2.2 and Ext JS 4.2 range from better team capabilities in Architect to Internet Explorer 10 support and the Neptune theme in Ext JS. And better yet, they all work well together, letting you easily use these new Ext JS features from within Architect.

You can get a great introduction to the new releases in this video, where a few of our engineers and product managers talk about it in their own words.

We also cover all of the details of each product below, and you can look forward to a few follow-up blog posts in the coming week that will go even deeper on specific features and functionality.

Sencha Architect 2.2

Sencha Architect

Larger and larger projects are getting built in Sencha Architect with multiple developers working on the same project and in Architect 2.2, that’s exactly what we focused on: improving the experience for developers working on large projects and in multi-person teams.

  • We start off with massive performance improvements. We upgraded the platform of Architect to our own Sencha Desktop Packager 1.1, resulting in a significant performance improvement. Additionally, Architect now selectively loads components as the developer opens them, instead of opening all project components at once. These changes reduce Architect’s memory footprint on real world projects by 60% to 80%, and speeds up project load times for large projects by an order of magnitude.

  • To enable better integration with source control systems Architect now watches the developer’s file system for changes to project files that happen when synchronizing changes from other developers. When changes are detected, Architect handles all the updates to the underlying files seamlessly. If a collision happens, we now prompt the user about how to proceed.

  • As projects grow in complexity, it can be hard to keep track of all the components and to navigate around the project. Architect 2.2 adds multiple tab support to the canvas enabling easy switching between components. There’s a new Quick Open feature to make it easy to find and open a component in your project — which is a major time savings on the business-scale projects being built in Architect.

  • Quick Open Feature and Tabs

  • After making Architect faster, easier to navigate, and easier for teams to use, we also made it easier to write great apps with improvements for bringing in external libraries, inserting custom code into components, and mocking up data for stores. Many applications use other libraries with the Sencha frameworks, and Architect 2.2 allows simpler integration of these external JavaScript libraries without using code overrides by using createAlias and createClass configs to set up an xtype or class name for the external component. Additionally, when a component starts its lifecycle, it’s now easier to insert your custom behavior code using the new processConfig (Ext JS) or initialize (Touch) configs in Architect.

    If you have been using custom overrides before, this new method makes it easier to keep the application more streamlined and uses frameworks best practices. Lastly, for many applications, it is not easy during development to get good data from their store(s), for example the store may require geolocation information, or a user-specific authentication token. Architect 2.2 now supports mock-up data in a store’s Data config. This mock data is available to render in canvas views, but is not included in the final code that Architect generates, making it both easier and safer to design your application.

  • And of course Architect 2.2 supports the latest released frameworks and all their features, about which you can read more below. Architect 2.2 makes it easy to get all the new framework goodness by upgrading existing projects to Ext JS 4.2 with just a couple of mouse clicks.
  • Upgrade

Sencha Ext JS 4.2

Sencha Ext JS

For the release of Sencha Ext JS 4.2, we’ve been working on some of the most demanded features from our customers and community, in addition to working on general stability, bugs, and performance improvements. For the full list of what’s new and changed, please check out the Release Notes.

  • Big data grids: we’ve done a major overhaul of the bufferedrender in Ext JS 4.2 in order to support enterprise developers who are building high data point applications. Applications such as financial or insurance applications can take advantage of these new capabilities to show much larger data sets across a large variety of browsers. To see how dramatic the changes are, check out this video walkthrough.

  • Neptune theme: The long awaited Neptune theme is finally here! Neptune gives developers a light and clean, fully modern UI with even even more powerful customization capabilities. We’ve restructured how themes are built in Ext JS to be more flexible and integrated theme packaging with Cmd so it’s easy to share and also easy to minify themes. Pictures speak a thousand words, so check out any of the Ext JS demos, which now have Neptune enabled by default, but give you a convenient way to switch to the classic, grey and accessibility themes.

  • Right-to-left support: if you’re a developer who has requirements to build applications for the Middle East or East Asia, the new support for right-to-left in Ext JS 4.2 will make your life significantly easier. We’ve enabled it as an optional package so the framework doesn’t carry extra weight for this support, but if you need it, it’s right there for you to enable it.

  • IE10 support: Ext JS 4.2 now fully supports Internet Explorer 10, ensuring your applications have uninterrupted application compatibility as IE10 shows up in more businesses. (note: we’re also actively working on a patch for Ext JS 3.4 to add IE10 support, so stay tuned).

Sencha Touch Bundle

Sencha Touch Bundle

Sencha Touch has continued its amazing trajectory, and Touch adoption has continued to grow rapidly. In parallel with our constant improvements to Touch, we’ve been steadily building out a rich set of premium mobile development tools to help developers be very productive and efficient building apps with Touch — but we’ve left it up to developers to find and buy these, as well as technical support, individually. Today, we’re rolling out the Sencha Touch Bundle, to bring all of that together and make it easy for customers to buy a single package of mobile development tools, components, and business-grade support.

The Touch Bundle includes Sencha Touch, Sencha Touch Charts, Sencha Architect, Sencha Eclipse Plugin, plus business-grade support and maintenance for all the products. We’re making it available today at a special introductory price of $695 ($100 off of list price). If you’re a serious mobile developer who wants the best possible toolset with full support, this is a great deal.

Sencha Touch 2.2 (Beta)

We’re also using today to call attention to Sencha Touch 2.2, which is currently in beta. Touch 2.2 brings you powerful new components, support for Windows Phone 8 and IE10, significant performance enhancements, and more. We’re still working on additional betas and would love your feedback, so we invite you to check out the beta here.

Final Thoughts

Ext JS 4.2 delivers on our previous commitment to deliver a modern theme as well as RTL in the Ext JS 4 product train. We are still actively working on accessibility, which is the final remaining product commitment that we made for Ext JS 4.

Also, we wanted to give special thanks to our beta testers, who downloaded and tried early builds of these products, and gave us very valuable feedback. These releases are much stronger thanks to your help. We love your support and we’re excited to release these products to you and to the broader Sencha community.

Finally, Sencha Architect 2.2, Sencha Ext JS 4.2, and the new Sencha Touch Bundle are all available for download and purchase today. Please give them a try and let us know what you think!

20130313-march-madness.png No Comments   Read more