Announcing Sencha Touch 2.4.2 with Improved BlackBerry 10.3 Experience

It’s my pleasure to announce the release of Sencha Touch 2.4.2, which includes several improvements for the BlackBerry 10.3 experience. It is available for download today (and from the Support Portal). We would like to thank our partner, BlackBerry, for their continuous support to help make Sencha Touch a first class experience on the BlackBerry platform.



The fresh new look of BlackBerry version 10.3 reflects several improvements to align its look and feel with modern web design approaches. The following is a summary of the specific Sencha Touch components we updated in version 2.4.2 in order to make them look native with respect to BlackBerry 10.3:

  • ActionBar UI, SideBar, Tab Menu, Application Menu, and Context menu now reflect the BlackBerry 10.3 design specifications.
  • Buttons, Dropdowns, and Search fields in the Titlebar were updated for the new BlackBerry 10.3 design.
  • Segmented Buttons, Toggle Button, List Item, Picker, Dropdown, Checkbox, Radio, Textfield, Textarea, Slider, and regular Buttons, all now reflect the BlackBerry 10.3 native theme.
  • The Activity Indicator UI, and the IndexBar around the ListView were enhanced to provide a closer to native experience.

Please visit for the latest guides and API documents on Sencha Touch 2.4.2.

New customers can download Sencha Touch 2.4.2 free commercial version. Existing support customers can also download Touch 2.4.2 from the Support Portal.

As always, we’re grateful to our customers and the Sencha community for the continuous feedback and bug reports. We’re excited to hear how this release improves your Touch 2.4.2 apps for the BlackBerry 10.3 platform. Try it out and share your feedback in the forums.

1 Comment   Read more

Using URL Schemes with Sencha Touch, iOS, and Cordova

Enabling your mobile apps to launch other apps on the same device is convenient and enhances the user experience. A URL scheme is a mechanism that provides an app the ability to launch or resume another app. But the true power of a URL scheme is unleashed when you use it to pass data into the receiving app, thereby altering the apps behavior or directing the user to a specific location within the app.

So when might you want to implement a URL Scheme within your mobile app? Here are some common use cases:

  • Launching or resuming an app from another app
  • Sending data to an app
  • Transferring stored data from a “lite” version to a paid version of an app

In today’s post, I’m going to cover launching an app and sending it specific data from a URL.

Helping Users

CNX has a mobile portal app that provides end users access to all sorts of enterprise data while they’re on-the-go, but it must be configured with appropriate server connection details (IP/port/etc.) in order to function properly. In the original incarnation of this app, an administrator would direct users to download the app to their phone or tablet and then have them tap on a “Connections” icon to enter all the pertinent information. We quickly learned that getting users to tap in this information correctly was a bit problematic.

The solution was to give the administrators a way to send an email to new users with a special URL that, when tapped on a mobile device, would automatically launch or switch to the app and configure it with the proper connection details. This process avoided typos during setup, thereby making the users’ initial experience with the app much more positive.

Now, let’s go over the steps for setting up the application to handle this kind of URL scheme, in which one app (in this case, whatever email client is running on the user’s device) launches another app and sends it some specific data.

iOS Setup

The first step is to update the application’s -info.plist file with our custom URL. Below is an example of what the *-info.plist would look like after adding a custom URL scheme of “urlschemeexample” in xcode.

After a successful build, our application now will launch and resume from the new URL.

An example URL to launch the application would be: urlschemeexample://?foo=bar

If your end goal is simply to launch or resume the application, ignoring any query parameters, then this is the only required step. However, in our case, we want the app to consume data passed in through the URL’s query string, so we need to continue to the next step.


Cordova will call a global function named handleOpenURL if it exists. This function is passed one parameter: a string containing the full URL that was used to launch/resume the application. Given this process, we are going to add the handleOpenURL method in our Sencha Touch index.js file. Within it, we set a new property on the window called ‘launchURL’ which will hold the value of the full URL that was used to launch the application. This way we can access it once our Sencha Touch app is initializing.


We will use the controller’s init method to check if the application was launched by our URL scheme. If the ‘launchURL’ property on the window exists, then we know the application was launched from the URL. In such cases, the controller will call a method called ‘onURLLaunch’ (this is a method we will code within the controller later).

Only a couple more steps left. Continuing within the “init” method of our controller, delete the original handleOpenURL method (as this has already served its purpose when Cordova automatically called it upon launch). We are now going to repurpose this method for app resume functionality — meaning, switching the user over to an already launched app.

onURLLaunch Method

This method is called from our controller’s init method on both the launch and resume of our app. It takes two parameters, the first being the full URL and the second being the launch type (“launch” or “resume”). This makes it possible for your app to behave differently on a resume versus a launch, if such functionality is needed.

The final step is to extract the query string and use Ext.Object.fromQueryString to convert the query string into an object that the app can then use to perform any special actions needed.

We’re Done

And there you have it! As you can see, the URL scheme makes it possible to send all kinds of information from one app to another. All you need to do now is think of some good use cases where you can save your users from having to enter or re-enter data into an app.

2 Comments   Read more

Wearable JavaScript

The number of wearable devices sold globally, according to Juniper Research, was around 27 million units in 2014, likely to increase to 127 million units by 2017, along with estimated revenues to exceed $53 billion in 2019. With wearable devices becoming significantly more commonplace in the coming years, there’s a whole new platform on which to develop apps.

For mobile phones and tablets, it’s fairly simple and consistent to develop apps, because the same constants usually apply: the end user has a relatively large touch screen surface, with a soft keyboard, and a powerful webview for rendering the app.

The problem is that there are so many different types of wearable devices (e.g. smart watches, smart glasses, fitness trackers), and there’s a a lot of variation in the types of interfaces used to interact with these devices (e.g. voice interactions, tiny touch screens, light vs. hard touch screen presses, specific hardware buttons, and more), that there is no standard way to develop apps for all wearables.

So many different types of devices

So the question is: how can we easily develop applications for this new emerging market of wearable devices?

Unfortunately, due to the huge variance in devices, their differing levels of capabilities, and the lack of maturity in the market, the answer isn’t so simple. We can start here though: most (but not all) of these devices feature the ability to render web content.

For some wearable devices, it’s simple to develop an app using web technologies. For instance, a basic Sencha Touch app appears to render fine on a Tizen-powered Samsung Gear S device, but the same app can’t be deployed to an Apple Watch due to the complete absence of a webview on that device.

A Sencha Touch app running on a Tizen-powered Samsung Gear S smartwatch

Another screen of the Sencha Touch app

Clearly, web apps are a good place to start when targeting wearable devices, but there are still many questions, and it’s not straightforward right now to develop an app that runs across all wearable devices.

  • How are apps developed and deployed on the various platforms?
  • What kind of APIs are available to developers that choose to target this new and emerging market?
  • What kind of apps can be developed for devices that are very small?
  • What about the devices that don’t offer webviews?

I will be covering a lot of these questions and offering my thoughts in my session at O’Reilly Fluent Conference, San Francisco, April 20-22, 2015.

Wearable JavaScript
Tuesday April 21, 4:30-5:00pm, Salon 12/13/14/15

My session will highlight some ways to start developing web apps for wearable devices, look at the current limitations, available SDKs, the special considerations required for app development on such small devices, and the various capabilities that can be leveraged by using web technologies.

4 Comments   Read more

Ext JS Customer Spotlight: Greentree International

Image01 Greentree LogoGreentree International is comprised of technology and business buffs with one obsession: building the best business software. The latest version of our ERP software product, Greentree4, heralds the next generation of business management software for mid-tier companies. It draws on the rich Ext JS 5 touch-enabled framework to break down walls traditionally enshrouding ERP software. Greentree has broad appeal and is currently used by 10,000 companies globally, across more than 20 industry verticals. Our customers consistently tell us how their business has been transformed.

Why We Chose Ext JS, Sencha Touch and Cmd

We required a comprehensive rich user interface framework that delivered the following critical features to meet our goals.

  • Cross-platform: Must run on as broad a range of devices as possible and not rely on any particular operating system or browser vendor.
  • Performance: Must perform well to provide the user with a responsive user experience. This includes latent and low bandwidth connections.
  • Flexible: Must deliver a rich user interface to allow for a very flexible product. Examples of this are drag/drop, themes, paging grids, trees, advanced drop downs and searches, animations and effects, etc. Customizable: Must be able to enhance and extend the framework to meet unique Greentree requirements.
  • Supported: Have an active developer community with strong support forums.
  • Rich Library: Provide an extensive set of widgets, examples, and developer documentation.

Sencha Ext JS was head and shoulders above the competition, and we chose it as our framework because it delivered a comprehensive set of features to meet our goals. The alternatives we considered were DOJO, jQuery, YUI, QooXDoo, and DHTMLX. Since selecting Sencha frameworks, we have grown our knowledge and use of Ext JS and Sencha Touch to successfully deliver Greentree4.

Ext JS enabled us to transform our unique desktop application into a browser-based product across multiple devices. Creating a customized look and feel was easy with the Sencha theming guide and Sencha Cmd, SASS and Compass.

Ext JS 5 has enabled us to deliver a complex and powerful single page rich internet application to the desktop, tablet, and touch desktop world.

Our customers demanded a desktop experience on their tablets, which meant prior to Ext JS 5, we were facing a considerable challenge delivering our RIA to tablets using Sencha Touch. The merging of the Sencha Touch and Ext JS core frameworks and the integration of the touch event system into Ext JS 5 has saved us considerable development effort. It also made component extension and code sharing across the two frameworks significantly easier.

With performance as our focus, we by default took full advantage of the Ext JS buffered data store and implemented server-side sorting and filtering. All our grids use buffered datastores, which minimizes the dom footprint and only loads data when the user requires it. These improved grid render and datastore load times and meant we could with confidence add any grid view of data regardless of the size of the underlying data collection and know that performance wouldn’t be compromised.

The addition of the Sencha Touch buffered renderer to Ext JS again reduced the dom footprint of a grid and made the tablet performance of grid scrolling a much better experience.

The Ext JS framework with the component and Ext.dom.Element abstractions makes creating complex web applications easy. Without having to deal with the complexities of working with the dom directly, we were able to create a screen designer that enables our users to customize their forms, in a WYSIWYG designer, to better suit their business needs.

The screen designer allows users to change many attributes to customize for tablet, desktop, or both.

Improved Performance

Sencha Cmd combined with the GRUNT task runner has consolidated and simplified our build process and has made version upgrades and upgrade testing seamless.

It has also provided us with an easy way to define multiple environment build profiles that help with development, testing, and optimizations of our production builds

  • Production – Fully optimized and compressed single file resources
  • Testing – No optimizations, single file resources uncompressed
  • Development – No optimizations using the micro loader

With performance one of our key requirements, the Sencha Cmd production build and optimization settings (configurable in the app.json file) have provided us with significant performance improvements across our application on desktop and notably on tablet.

Business Value of Using Sencha Ext JS, Touch, and Cmd

Three years ago, with a wave of disruptive (better) technologies coming at us, we could see the potential to leverage the ERP engine in new ways. We pulled together the most talented global team available. We ramped up our already high investment in R&D and set our goals to leverage the enormous power of our existing systems and customers’ investments, use the best of the new technologies to add new platform capabilities that would engage and empower a much wider audience, and deliver real business benefits.

With business software, it’s what you can’t see that is probably the most critical part, so we need to talk about architecture and engineering. Greentree4‘s new capabilities are built on the right foundations. Sencha Ext JS 5 gives us a powerful HTML5 framework, rich with components. This has given us a huge advantage over building these components ourselves. Using the broad library of components within Ext JS, we have been able to extend and apply our own unique user designs much more quickly than if we had to build these from scratch.

Greentree4 has been designed with a unique single user interface design to deliver identical user experiences for tablet or desktop. The release of Ext JS 5 with touch enablement saved us at least 2 person-years of development time by delivering the same application on touch-enabled devices such as tablets.

Our server-based architecture now delivers the required user experience based on device, using Sencha Ext JS 5 for tablets and desktops, and Sencha Touch for small screen smartphones. This provides a compelling and performant user experience on any device. Sencha Cmd is used to maximize performance by optimizing builds.

We’ve maintained our strategic advantage by allowing customers to extend and customize for their unique requirements with features like our drag and drop Ext JS-based screen designer.

On top of this, most of our competitors still deliver annual enhancement upgrades. We offer continuous deployment, and Sencha Cmd combined with the GRUNT task runner has consolidated and simplified our build process to make version upgrades and upgrade testing seamless. We can deliver customer benefit much faster.

Our Advice to New Developers

  • Engage with Sencha Professional Services and have them review your architecture and coding structures to get the absolute maximum performance using best practices.
  • Subscribe to Sencha Premium Support for fast turnaround on questions.
  • Be an active beta program participant and provide Sencha with constructive feedback.
  • Become part of the Sencha Community to learn from other developers.

Final Thoughts

We have worked hard to create a close relationship with Sencha both locally and in the U.S., and we believe this has been beneficial to both our organisations. We look forward to adding even more business functionality to Greentree4 using Ext JS 6.

Greentree Primed for Business 1 Comment   Read more

Top Support Tips

Top Support Tips

Everlasting Scrollbars

by Kevin Cassidy

Have you ever wished you could always display your Touch container’s scrollbars instead of them automatically appearing and disappearing? Now you can. With this simple override, you can make use of Ext.scroll.View’s private indicatorsHidingDelay property. This override causes the container scroll bars to be visible whenever the indicatorsHidingDelay property is set to a negative value. If you want to return to the default behavior, you can call the setIndicatorsHidingDelay method with a positive value.

You can see the everlasting scrollbar in action here:

Note: This is a great tip but be cautious about using private configurations, methods and events. They may change at any point and their use is not supported if other issues occur.

on Destroyable

by Seth Lemmons and Greg Barry

Developers can easily add event listeners to Components and Elements by utilizing Ext.mixin.Observable’s on() method (shortcut for addListener()). That said, you may need to remove those listeners while maintaining the Component or Element to which they were attached. You canuse un() (shortcut for removeListener()) by passing it the same config and scope used with on(). However, there is a shortcut offered by on() that may be better suited to your needs — destroyable: true.

By default, the destroyable option is false. When set to false, on() will return the Component or Element to which the handlers were attached (Ext JS 4.x returns undefined). However, with destroyable: true, an object is returned with a destroy() method. When called, it will destroy the previously set event handlers while preserving your Component or Element.

You can see the destroyable config in action here:

20131111 Top Support Tips No Comments   Read more

Ext JS and Sencha Touch Customer Spotlight – is a modern and easy-to-use media management application targeting the needs of semi-professional and professional photographers, creative agencies, startups and SMEs. The software is built with Ext JS 5 and Sencha Touch 2.4. In addition, we used PHP and Perl in combination with MySQL database. enables users to collect, manage and share all kinds of media. A state of the art user interface, intuitive search fields, and various filters (GPS, date, author, orientation, etc.) allow users to find the needed files quickly and easily. also makes it possible to share files safely with colleagues and customers. Users can decide in which size and for which time period they want to make data available. They also can integrate freely selectable watermarks on their images.

The Media View

Why We Chose Ext JS

We chose Ext JS because we wanted to make the interface attractive and customer friendly — meaning our designers could change all styles and arrange all desktop elements exactly as they wanted. It was also important that the front-end framework not restrict us from building back-end processes that worked smoothly and quickly to ensure the best performance for our customers. The third goal was to ensure we delivered the application to market on time.

We had been working with Ext JS for more than five years and had excellent results using it in various software development projects, so we decided it was the best framework for building The major reasons why we had used Ext JS for such a long time are:

  • Ext JS components are perfect for the kind of software we build. We rarely have a case where Ext JS components don’t meet our needs.
  • Ext JS makes it easy for us to theme and extend components, when needed.
  • Ext JS offers the cross browser compatibility our customers expect.
  • The individual support and training provided by Sencha is excellent.
  • The Sencha community and the available user extensions inspire our own creativity.
  • The perfect interaction of Ext JS and Sencha Touch makes our job easier and offers a broad range of new possibilities for our application.

We used the following Ext JS components to build


We created all major pages of with dataviews. Depending on what needed to be depicted, we used various templates to adjust the look of the respective pages. It’s very simple to change the look of the dataviews, because there are an unlimited number of templates, which allows a nearly effortless creation of new designs. We also used several stores with the same model for our application. This means each view can also be filled with different content. We use this option mainly in the Media view (see above) and the Collections view (see below).

In addition, we use Buttons and Panels that are blended into the templates to provide the right functionality on each page.

The Collections View

The same dataview is used when selecting multiple files to edit, download, relocate or group. The only thing that differs here is the styling of the dataview. Further, the dataview is combined with buttons, tab panels, forms and grouping grids.

We use the DataView.DragSelector to improve the usability and enhance the possibilities of the dataview.

The built-in drag and drop functionality allowed us to integrate features that users expect, based on their experience using standard desktop applications. For example, that functionality enables users to select multiple dataview items (in mainly thumbnails of photos and files) with a mouseover event. It further allows an Explorer / Finder-like selection of multiple dataview items, by pressing the Shift or Ctrl key.


If a user clicks on one of the photos (item click), on any page, opens a window to display the file in full size and provides more information about it. Various layouts are used — combined with buttons, tab panels, forms and grouping grids again. This combination provides a lot of possible user actions and provides a good overview of the relevant data at the same time.

Using the tab panel, a user can open the tag catalog, manually tag files, and delete or adjust tags that were automatically set by — by reading the meta data and descriptions (EXIF, IPTC, etc). To implement this functionality, we used combo boxes and split buttons.

Features like the integrated combobox filter, and especially the combo boxes, improve the user experience, because they minimize the effort of manually tagging photos and files in the media database. Using Ext JS, we implemented a catalog of preset keywords, which can be easily updated by uploading csv files into Using this keyword catalog, the combobox displays various appropriate keywords when the user starts typing the first letters, and it refines these suggestions instantly when the user adds more letters.

All keywords selected or entered by the user are displayed as split buttons. Using split buttons makes it easy to work with the keywords, especially if the user wants to delete or change one of the keywords later. The development in this case was really effortless, because the buttontext is used to display the keywords, so we didn’t have to change the components.

Why We Chose Sencha Touch

During our first beta test, we recognized that more than 60% of the beta testers were trying to open shared image collections with mobile devices, including their smartphones and tablets. Back then, we did not have a mobile-optimized version of released. Due to the good experience we already had with Sencha Touch, we extended and optimized our application user interface for mobile users.

The biggest benefit was the time savings. Using Sencha Touch, we were able to create the first version of the mobile application in just one day of development work. This was possible because the shared images are displayed in dataviews. The navigation in the mobile version of was built by using well-known gestures like swipe, slide and pinch. Using these gestures, users can also switch to the single photo view and back. If we had started programming this app from scratch, not using the Sencha Touch framework, we would probably have needed several weeks to achieve similar results.

Our Advice to New Developers

What we love about Sencha is the continuous performance enhancements and the vision and expertise we see in the development of the various frameworks. The latest features are really easy to use. For more complicated use cases as well as a basic understanding of the products, Sencha provides in-depth training. We recommend that all developers who are just starting to use Ext JS attend one of the online or classroom courses, because they really boost your understanding of the broad range of possibilities in building apps with Sencha frameworks.

Another reason we really like using Sencha products is the good documentation, the forum and really vivid community that helps when you are stuck at some point of your development. They boost your creativity by solving complicated customer problems.

We also highly recommend Sencha Support. We contacted the support team when we had questions that were too specific for a Google search or the Ext JS community. Sencha provides really good and fast help to solve our questions and issues.

Final Thoughts

Ext JS facilitates team development and speeds up delivery of software projects by removing a lot of unnecessary, repetitive work for developers. At the same time, it offers unlimited possibilities to customize components to your needs.

In addition, you can really profit from the range of other products in the Sencha portfolio, including Sencha Touch. The various tools can be used easily in combination.

To enhance the features of, we are currently developing a video and sound archive that will be integrated into our current app. Using Ext JS, we can focus on the design work, as the framework takes over all the tedious tasks of the programming process.

If you’d like to try, you can get it either as an independent server solution or as a hardware and software bundle called box. box is the all-in-one solution for photographers and small teams, including a stylish and high performance mini server and the software.

spotlight-teaser.png No Comments   Read more

Integrating Corporate Bank Ecosystems on a Wide Range of Devices

Guest Blog Post

Integrating Corporate Bank Ecosystems on a Wide Range of DevicesOmniscient is a leading supplier of consulting services for Sencha Touch and Ext JS across Asia and the Americas. Our LIQUIDICE product is a Liquidity and Payments Management Application for corporate treasuries in large organizations, and we built it using Ext JS.

To survive in a highly volatile global economy, organizations need to monitor and manage their financial risks related to various internal and external (market) related factors, across their various entities and businesses.

Using LIQUIDICE, a Corporate Treasury can set up its global Bank Relationship Structure and configure the data connectivity channels with all of its banks. They can then monitor and manage their Global Cash and Liquidity positions across banks, currencies, accounts as well as business entities.

Integrating Corporate Bank Ecosystems on a Wide Range of Devices

Why we built LIQUIDICE using Ext JS

Omniscient has been actively involved in developing web applications as part of its consulting services. During this period, we worked with a variety of HTML and JavaScript frameworks and libraries. We realized fairly quickly that Ext JS offers multiple advantages over other JavaScript frameworks, the most important being the excellent quality of the support that we get from Sencha.

  • Support from Sencha – Having access to Sencha Support for Ext JS was one of the most important reasons for our choice. Lack of dependable support from other JavaScript frameworks is a serious drawback.
  • Rich Component Library – The rich component library offered by Ext JS, which has helped us to build an unbeatable user experience for displaying and manipulating large quantities of complex data in the user interface.
  • Cross Browser Compatibility – Since our customers use LIQUIDICE on a wide range of web browsers, this was an important factor for our choice. Ensuring Cross Browser on other JavaScript frameworks would have taken us at least 1.5 times more time and effort, both in terms of development and testing.
  • Suitable for Large Development Teams (often distributed across time zones) – Ext JS allows us to standardize our application development processes and helps create reusable components and utilities, to deliver the best application performance across every device. Maintenance costs on our applications have gone down by 20% because every developer on our team understands the Ext JS framework.

To address the customer need of accessing their global liquidity information after office hours from their smartphones, we needed to extend application access to a wide range of iOS and Android-based mobile devices. We evaluated some of the popular frameworks and decided to use Sencha Touch because of our positive experience with Ext JS. Also, because Sencha Touch follows the same development paradigms as Ext JS, it helped us to minimize the learning curve for our development teams. The images below illustrate the mobile version of the application using the Sencha Touch framework.

Integrating Corporate Bank Ecosystems on a Wide Range of Devices

Why we built LIQUIDICE Mobile using Sencha Touch

The key challenge was to provide a “ slice” of the application functionality and data on the smaller screen size by reusing the underlying code base, processing logic and security framework of the existing Ext JS enterprise application. Based on our experience with Ext JS, Sencha Touch was the logical choice for this development. Our team of Sencha Touch UX experts created a UI design that was a natural extension of the existing Ext JS application, with an added look-and-feel of a contemporary touch-based mobile application.

The following additional considerations helped validate our choice:

  • Short Learning Curve – The team was already familiar with Ext JS and there was a very short learning curve for Sencha Touch.
  • Look and Feel of Native Apps – Sencha Touch enables us to build applications that look and feel like native apps but have all of the benefits of HTML5. This allows us to use our existing development teams (that have experience and skills building desktop applications) to build mobile applications as well.
  • Access to native features – The user experience of the Balance Notifications and Alerts functionality in LIQUIDICE was enhanced through the use of the native alert features of the smartphones. Sencha Touch provides direct support for Apache Cordova APIs, which makes accessing native sensors of mobile devices easy.
  • Graphing capabilities – Support for visual representation of the liquidity information on the dashboard is a critical feature of LIQUIDICE, which is supported through the Sencha Touch graphing capabilities.
  • One Code Base Across Multiple Devices – All our Corporate Treasury customers expect a uniform user experience across iPhone and Android based mobile devices. Using Sencha Touch and Apache Cordova allowed us to maintain a single code base across multiple devices and deliver the uniform cross platform UX they expected.

Omniscient’s customers are some of the largest ISVs in Payments, Securities Processing, Collateral Management and Treasury technologies. Our Sencha Development Services Team has been working with these customers on the following categories of development projects:

  • Re-engineering JSP-based product UIs using Sencha Ext JS, by reusing the underlying business assets of the product
  • Extending desktop browser-based Ext JS applications to tablet and mobile devices using Sencha Touch
  • Building desktop browser-based Ext JS applications for Customer Administration and Configuration based on existing mobile applications

In the fast changing world of financial technologies, we use Ext JS and Sencha Touch for application development because our customers get the primary benefit of being able to leverage existing software product assets and phased investment in their product development.

We have also applied these benefits internally. Two architects from our consulting services team worked with our LIQUIDICE product team on the overall architecture and design of the LIQUIDICE mobile application to ensure that the design could scale up for massive amounts of anticipated data, and heavy concurrent user access demands.


Realizing the pervasiveness of the internet on all devices, companies are compelled to take a “universal access” strategy for their applications. The use of a unified framework involving Ext JS and Sencha Touch helps us to maximize the return on our investment with a single code base and talent pool. Our Consulting Services team is working with customers across the Americas and Asia on consulting and application development engagements using both of the Sencha frameworks. Our customers have experienced significant savings in time, effort and efficiency first by choosing to use Sencha frameworks (vis-à-vis other JavaScript or HTML 5 frameworks) and further by correctly implementing the Sencha framework to meet the functional requirements of their applications.

omniscient-teaser.png No Comments   Read more

Using GapDebug to Test Hybrid Web Apps Built with Sencha Frameworks


Using GapDebug to Test Hybrid Web Apps Built with Sencha FrameworksDevelopers have been using PhoneGap (and subsequently Cordova) to deploy hybrid mobile applications since 2009, when it was first created. By allowing web applications to run on native devices, the HTML5 community fully embraced PhoneGap and thousands of apps have since been released on iOS, Android and a wide variety of other platforms. But while the wrapper itself is great, unfortunately the debugging tools have lagged far behind their browser counterparts — and debugging across multiple platforms has often been painful.

In this post, we’ll introduce you to the new Genuitec GapDebug tool and explain how it makes debugging hybrid applications deployed with PhoneGap far easier than ever before. We will also compare GapDebug to the popular Weinre debugger and highlight the key differences between them.

GapDebug LogoGapDebug

GapDebug is a free cross-platform mobile app debugger developed by Genuitec for use with Android and iOS PhoneGap (or Cordova) applications. It runs on both Windows and Mac OSX and is packed full of killer features for exploring every aspect of a hybrid app’s state and execution.

GapDebug is a free cross-platform mobile app debugger developed by Genuitec for use with Android and iOS PhoneGap (or Cordova) applications.

Many Sencha developers use Cordova or PhoneGap every day to deploy their hybrid applications — but debugging an HTML5 app directly from the device can be a very frustrating experience. GapDebug makes this process much easier, using a single interface for all apps and devices, and without requiring the developer to add special code.

How GapDebug Works – Plug and Debug

Before you can begin debugging, your iOS or Android devices require a simple 1-time configuration as outlined here. With your device configured, simply plug and debug by connecting your device to the GapDebug host computer using a USB cable. The device may prompt you to approve the connection. Once the connection is completed, the device info will appear on the left of the GapDebug user interface in the Device Panel.

On the mobile device, launch the app that you wish to debug. If the app is not already present or up to date on the device, use the app installation button GapDebug Download Image found next to the device info to select and install a new version of the app. Alternatively, you can drag and drop a binary app executable file on the device to install it. When the app is launched, the app’s ID and icon will appear just under the device in the GapDebug Device Panel.

Selecting the app in the Device Panel will start a debug Inspector in a new tab pane on the right side of GapDebug user interface. Two versions of the inspector are provided: for iOS apps a custom version of Apple’s Safari Webkit Inspector is presented, while Android apps get a custom version of the Chrome Developer Tools.

GapDebug (Windows version)
GapDebug (Windows version)

Before we dig in and start debugging, let’s first examine how GapDebug is different than the popular debugging tool Weinre.

GapDebug vs Weinre

Until GapDebug, Weinre was the go-to cross platform debugger for PhoneGap apps. Weinre was developed in early 2011 by Patrick Meuller as an open source solution for remote debugging of iOS and Android PhoneGap applications. It consists of a JavaScript library that is dynamically loaded by the app at startup, a debugger user interface that runs in your browser, and a server that handles communications between the application and the user interface.

Weinre is implemented in JavaScript and requires Node.js to install and execute locally, although you can avoid setting up a local installation by using one of several freely available online Weinre servers.

Weinre debugger user interface
Weinre debugger user interface

While Weinre remains an innovative tool, it is beginning to show its age. Let’s look at some of the pros and cons of using Weinre:


  • The debugger provides tools for DOM and CSS inspection, resource browsing and analysis, and a JavaScript console
  • Developers can simultaneously debug multiple apps across multiple devices
  • Mobile devices only require a network connection, no USB tether required
  • No special device configuration required
  • Weinre debugging works for a wider range of iOS and Android OS versions than GapDebug. (GapDebug supports Android v4.4 and above and iOS v5 and above)
  • Open source under Apache license


  • The Weinre user interface is a dated version of the WebKit Inspector
  • No JavaScript debugging and profiling
  • Not easy to reload the app for testing events such as deviceready
  • Requires modification of application code to include a special instrumentation script
  • Device must be online with a network connection, can’t debug offline scenarios
  • Requires processing time for communication with remote Weinre server
  • Server connection frequently times out, terminating your debug session unexpectedly

Using GapDebug to observe frequent Weinre network XHR activity in an application
Using GapDebug to observe frequent Weinre network XHR activity in an application

By contrast, GapDebug first debuted in June 2014 and is being rapidly enhanced with monthly updates by a small team at Genuitec.


  • Provides the most powerful hybrid app debugging features available through the use of special versions of Safari WebKit Inspector and Chrome Developer Tools
  • Professional Windows and Mac OSX installers, with automatic updates
  • Free for all users including commercial use
  • Simultaneously debug multiple apps across multiple devices
  • No requirement to modify application code with special instrumentation library
  • Device does not require a network connection, can debug offline apps
  • Easy app reloading to test events such as deviceready
  • Windows users can remotely debug iOS apps
  • Remotely view, control and debug Android apps over the internet


  • USB tethering may be considered a negative by some users
  • At this time, no common inspector UI (for cross-platform debugging, you must learn both the Safari WebKit Inspector tool and the Chrome Developer Tools — Genuitec is working towards a common UI in future release)
  • Currently only supports Android v4.4 and above and iOS 5 and above

Using GapDebug with Sencha

Because Sencha Cmd already has tight integration with Cordova and PhoneGap, Ext JS and Sencha Touch developers can immediately benefit from the superior tooling of GapDebug.

Using GapDebug, you can simultaneously debug multiple apps running on iOS and Android, and you can even debug iOS apps from Windows. Considering all of the HTML and CSS inspection, JavaScript debugging, and resource profiling capabilities, using GapDebug is a great choice when it comes to wrapping Sencha applications with PhoneGap or Cordova.


In most areas, GapDebug exceeds the capabilities of Weinre. While both GapDebug and Weinre applications require instrumenting to support debugging, GapDebug is not invasive and does not modify your application code. The GapDebug inspector tools are state of the art and function even when the device is offline. Lastly, GapDebug continues to be rapidly improved by the Genuitec team.

Download GapDebug for free and start debugging your Ext JS and Sencha Touch applications today.

analyzing-the-roi-of-javascript-in-enterprise-software-development-1.png No Comments   Read more

Apple Shows Love for HTML5 with iOS 8

Optimizing The Development Process With Sencha Cmd 5We were as excited as everyone else with last week’s Apple iOS 8 release announcement. We have only had the iOS 8 GA bytes for a few days, but we wanted to do as quick and complete a write-up as we could to give the global web developer community an in-depth look at Apple’s latest release. There’s no doubt we’ll see a few items we missed in the next couple of weeks and months, but for now we wanted to run our battery of benchmarks and tests and share what we’ve already uncovered.

This post documents our performance and technical breakdowns of the current state of HTML5 as iOS 8 becomes the baseline for Apple devices. For a similar review of iOS 7 for web developers, please see our blog post from last year.

New iOS 8 Features Will Further HTML5 Development

Let’s begin by taking a look at some features that have been added with this upgrade.

New iOS8 Features Will Further HTML5 Development

Though all of these features are great and help further HTML5 development, the big ones that clearly stand out are:

WebGL – 3D Canvas Graphics

Hardware-accelerated 3D Graphics support — no question this is a huge feature for web developers. Though we will likely see this feature used heavily in gaming, there are a lot of additional uses, especially in the areas of animations and transitions. To get a quick peek at what is possible, fire up this WebGL Sprite Particle Demo.

CSS Shapes Level 1

This rarely seen feature was really only available to us in Chrome, Chrome for Android and Opera, but it has finally busted into the big time with prefixed support in iOS 8. CSS Shapes allows for much more dynamic text layouts that can make your application feel more like a magazine than a web page. To see some examples of this at work, check out Shapes from Adobe.

HTML Templates

One of the foundational elements in Web Components is now available in the latest Android and iOS browsers. This is a big step towards making a truly modular web and opens up a lot of potential with one less polyfill required.

Navigation/High Resolution Timing APIs

Though superficially not an extremely popular end user facing feature, having a streamlined performance timing API will allow for much better cross-platform benchmarking and performance testing.


Even though WebSQL has been, and still is, available for Android and iOS, we currently have no support for IE. To make matters even worse the Web SQL Spec is no longer maintained and will likely be dropped in a future version. Luckily for us, IndexedDB is now available across iOS, Android, Chrome for Android, Safari, IE Mobile and has partial support in Blackberry 10 and IE 10/11.

SVG Fragment Identifiers

This feature sneaks in under a very cryptic name, but trust us, it’s a powerful one. Currently available in IE 10, 11 and Mobile, iOS 8 Safari and Chrome for Android, SVG Fragment IDs allow for very powerful vector spritesheets. Not only will this be very important for web gaming but also more dynamic icons and other UI elements.

As mobile web developers, you are already used to working with the latest browser versions and features. We all know that Apple has a fantastic upgrade system that will allow iOS 8 to reach all of its users very quickly. If your application is targeted specifically at iOS devices, you can easily start using features like IndexedDB, SVG Fragments or benchmarking with the new Timing APIs. For those looking to keep parity with iOS 7 and/or develop for multiple platforms (Android, Windows Phone, BlackBerry), you can scope down these new features with Sencha Touch built-in OS detection. Sencha Touch will allow you to use the new features in your application now and phase out your older code over time.

The All New WKWebView

The All New WKWebView

With the release of iOS 8, we are both blessed and cursed with a bit of fragmentation. iOS 8 ships with two native webviews built in. The first is the good old “UIWebView” that we know and love. It currently is kept for legacy purposes, but lucky for us Apple did not simply smash the older iOS 7 “UWebView” into iOS 8, they have upgraded the core WebKit code to be on parity with their brand new webview, “WKWebView”. “WKWebView” will be the place to get your hybrid app, as we move into iOS 8. It has the Nitro JS engine, which we have tested and measured to have at least 4x the performance of “UIWebView”. This has the potential to be a huge win for hybrid apps. However, at this time, there are some significant bugs that impact just about everyone. More on that later in this post.

The good news is that the new high performance “WKWebView” is a step in the right direction from a Web development perspective. Even though JavaScript is rarely a bottleneck for applications as we typically see more issues with animation or DOM repaints, we believe that with substantial boosts to the Dom Core, the “WKWebView” will help Sencha Touch applications see huge performance improvements.

Performance Gains Across the Board

Performance testing is always a must, and this time around we have some rather interesting results. Overall, it looks like going to iOS 8 will be a win for everyone across the board. There are a few octane scores that were slightly lower in iOS 8, along with Base64 and Code Eval. So let’s dive into some charts and try to figure out what all this means.

Note: All these tests were done on a 5th generation iPod Touch in the hopes that, compared to all of the iPhone 5s and soon iPhone 6s out there, these score will help you find your lowest threshold for iOS development.

We can see that iOS 8 wins out in pretty much every test except CodeLoad.

Unfortunately, at the time of testing, Google Octane v2 crashes iOS 8 Safari for us, so we were unable to run any new tests. Regardless, this gives us a pretty good overview.

We can see that iOS 8 wins out in pretty much every test except CodeLoad. CodeLoad measures how quickly the JavaScript engine can start running after pulling in a very large JavaScript file. It’s worth mentioning the code for this test is based on Closure and jQuery, but one would have to agree that it’s a pretty good benchmark for this kind of thing.

For applications built with Sencha, we might see a slightly longer delay in application startup, as compared with iOS 7, because these applications tend to have larger JavaScript loads upfront instead of incremental loading. For all other tests, iOS 8 is either very close or a clear winner over iOS 7.

The Dom Core test from Dromaeo is actually much better than what the chart shows.

The Dom Core test from Dromaeo is actually much better than what the chart shows. The fact that Query shows such a huge improvement, overshadows the improvements in Attributes, Modification and Traversal. Looking at the raw numbers, we saw a 122% improvement in Attributes, 65% for Modification, 48% for Dom Traversal and a whopping 308% boost for Dom Query.

This is great news for Sencha developers as dom query is used a lot by Sencha frameworks.

After seeing dramatic improvements in the DOM Core tests, we looked at the CSS selector performance boosts at the framework level. Ext JS Selector times improved by 126% by simply moving to iOS 8 Safari.

After seeing dramatic improvements in the DOM Core tests, we looked at the CSS selector performance boosts at the framework level. Ext JS Selector times improved by 126% by simply moving to iOS 8 Safari.

Note that these CSS Selector tests currently use Ext JS 3.x and the framework has improved dramatically with the release of Ext JS 5.x. As a result, the actual improvements will be even better.

We can see there’s a  bit of a performance dip when working with Base64 strings and code evaluation via new Function and eval.

Moving on to some pure code tests, we’re looking at some fundamental JavaScript functions that almost every application would use. We can see there’s a bit of a performance dip when working with Base64 strings and code evaluation via new Function and eval. We did however get some dramatic gains in Arrays, specifically in Array construction. Developers shouldn’t be too concerned, as we already discussed in our Fastbook post, JavaScript is plenty fast for creating most any application. GPU compositing is much more important than the JavaScript for creating fluid apps nowadays. Which brings us to our next benchmark focused on GPU interactivity.

The chart here pretty much speaks for itself. We see a huge 78% increase in fps (frames per second) by simply switching to Safari in iOS 8 vs iOS 7.

The chart here pretty much speaks for itself. We see a huge 78% increase in fps (frames per second) by simply switching to Safari in iOS 8 vs iOS 7. It’s obvious that Canvas got a number of updates, and the results are really showing up in our WebGL examples.

If you skip ahead to the bug area, you will see that there are some challenges today that are keeping us from using the “WKWebView” in hybrid apps.

Now, this is a bit of a bittersweet chart, as we can easily see the vast improvement in “WKWebView”. But if you skip ahead to the bug area, you will see that there are some challenges today that are keeping us from using the “WKWebView” in hybrid apps.

If anything, we hope these numbers push more developers to head over to Apple and push to get these “WKWebView” bugs fixed ASAP, so we all can start taking advantage of these performance improvements in all our applications. Once again, the Dom Query overshadows all the other numbers. For the record, with “WKWebView”, Attributes is 208% faster, Modifications are 37% faster, Traversal is 249% better, and Query is a whopping 358% improvement over the old “UIWebView”.

Although the Sunspider test results are not nearly as dramatic, we still see some improvements.

Although the Sunspider test results are not nearly as dramatic, we still see some improvements. iOS 8 Safari came in about 14% ahead of iOS 7 Safari and the “UIWebView” jumped up about 5%. Small gains, but all positive, and they show that everything is moving in the right direction.

In this chart, we’re looking at the raw score from HTML5 Test, and it’s easy to see iOS 8 Safari has a nice boost in supported features over iOS 7.


In this chart, we’re looking at the raw score from HTML5 Test, and it’s easy to see iOS 8 Safari has a nice boost in supported features over iOS 7. However, to properly interpret these results, we need to discuss some changes under the covers that have a big impact on these statistics. So let us boil it down for for you with a few bullet points:

  • Seamless iFrame was removed in iOS 8
  • IndexedDB was added to iOS 8 Safari and “WKWebView”
  • IndexedDB is not available in iOS 8 “UIWebView” or Home screen apps
  • Objectstore ArrayBuffer does work in iOS 8 Safari and ”WKWebView” (Note: This test fails on the HTML5 Test site even though the feature is working. If this was properly detected, iOS 8 Safari would score a 440.)
  • Objectstore ArrayBuffer is not available in iOS 8 “UIWebView” or Homescreen apps
  • WebGL 3D Graphics were added to iOS 8 in Safari, “WKWebView”, “UIWebView” and home screen apps
  • The userAgent for “UIWebView”, “WKWebView” and a Homescreen app are identical

Even though Apple has done a pretty solid job of keeping “WKWebView”, “UIWebView”, Safari and Home Screen applications at the same level of functional capabilities, the differences may cause some frustration for Sencha developers. Developers now need to be a little more aware of the context in which their application is going to run. Example: “UIWebView” and Home Screen applications do not have IndexedDB or Objectstore Array Buffer support. Because the browser User Agents are the same, there’s no easy way to scope down your application based on where it’s being served, which means developers will need to feature detect these things individually.

The Bugs

3 major bugs that are going to potentially affect HTML5 developers and therefore, Sencha customers.

We all know that no release of any software is bug-free, and of course iOS 8 has a few worth mentioning. So far, we have uncovered what we consider to be three major bugs that are going to potentially affect HTML5 developers and therefore, Sencha customers. Now, that being said, these bugs are not specific to Sencha apps and will actually affect the development efforts of many developers for the next couple of months. If you wish to help, please check out the radar link below each bug and head over to the Apple Bug Reporter. There, you can duplicate our bug and submit it, and the more hard data and test results we provide proving the bug’s impact, the faster (we hope) they will be seen and then fixed.

WKWebView Local File Loading Bug

Remember that amazing new WebView I was just telling you all about? The one with the super fast Nitro JS engine and shiny new everything. Well, its broken… The bug here is a security issue which does not allow “WKWebView” to load files from the local filesystem. So what this means is that your embedded index.html is not accessible to the “WKWebView”. This is a blocker for PhoneGap and Cordova applications that are using offline/local files to serve up an application. So currently, if you would like to use “WKWebView” in your application, you must load your files from a remote server. For example, loading “index.html” will not work, but loading “” will work just fine.

Radar Bug Report:

XHR Local File Access

Currently, anything using the new “WKWebView” code has a broken XHR Local File issue. This includes Safari, homescreen apps and any embedded apps inside a “WKWebView”. If you’re using Cordova or PhoneGap, you will still be locked into the older “UIWebView” which does not suffer from this bug. The bug itself simply does not allow the XHR object to send local files off the phone. So, if your application currently is using the photo gallery or camera to grab an image and then via AJAX send it to the server, you are sadly out of luck in iOS 8. What you”ll see is that your application will hang with no response after calling “send.”

Radar Bug Report:

Home Screen Apps Lose Timing Functions After Lock/Wake

If your application is being used as a homescreen web application, you’ll find yourself in a sorry state. Of course, any web app can be converted into a home screen app by the user, so I guess technically this affects anyone making a remote web application. This bug is easily reproduced by simply calling setTimeout(callback, 1) or requestAnimationFrame(callback) via some button or event. When you first open your application, you’ll notice all timing functions are working fine. However if you lock your phone and then unlock to return to your application, you’ll see none of the timing functions can call callbacks anymore. They are simply broken at a native level. There is no reset, no bringing your application back to life, it’s a kill it and restart situation. These timing functions are crucial to the Sencha Touch and Ext JS frameworks along with pretty much every other JavaScript framework/library ever made. Definitely head over to Apple as soon as you can, and let them know that you would like to have all of your JavaScript functions, all the time.

Radar Bug Report:

There is some good news here, because so far we’ve only uncovered issues that affect “WKWebView” applications. If you are one of the many people that have tried or are using Sencha Space, there is absolutely no impact because your application is safe — with Space, you are inside a managed web runtime that includes a secure browser. If you haven’t tried Sencha Space yet, you should check it out here.

Things to Come

Overall, with the release of iOS 8, we’re very pleased with where Apple iOS is heading, because the performance improvements and new features are only going to improve user experiences for apps built on the iOS 8 platform. However, we certainly hope Apple addresses the bugs very quickly that we discussed, because their presence impairs the full realization of the power of iOS 8 for web developers — whether they use Sencha frameworks or any number of other popular alternatives.

If we look further into the future, we can expect to see a crossover between iOS 8 and Chrome for Android with great features such as CSS Shapes, srcset atrribute, and SVG fragment identifiers.

If we look further into the future, we can expect to see a crossover between iOS 8 and Chrome for Android with great features such as CSS Shapes, srcset atrribute, and SVG fragment identifiers. Though not shown in the above image, Chrome for Android already has partial support for WebGL 3D Canvas graphics and really the partial is more about older devices that are capable of running Chrome but just don’t have what is needed to power WebGL 3D.


iOS 8 is certainly an exciting release for Web developers with amazing new features and huge performance boosts that will further help HTML5 cross-platform development.

At Sencha, we’re always looking to help developers stay at the forefront of the next generation of web development. We are focused on bringing the best and most complete cross-platform solutions to our users, so they can deliver amazing application experiences to every device. We can’t wait to see what you all will invent with us. Thanks for tuning in, until next time.

ios8-teaser.png 16 Comments   Read more

Announcing Sencha Touch 2.4

Sencha Touch 2.4We’re proud to announce the release of Sencha Touch 2.4, which continues to enhance Sencha Touch support for the BlackBerry 10 browser and devices. About 18 months ago, we announced our collaboration with BlackBerry — optimizing Sencha Touch to run on the BlackBerry 10 browser and create a new theme and set of components to make building BlackBerry 10 applications as easy as possible. Sencha Touch 2.1.x, 2.2.x, and 2.3.x came with a BlackBerry theme and a set of components unique to BlackBerry.

Download Sencha Touch 2.4

Let’s dig into the details of this release and the enhancements.


The password field in the BlackBerry theme now has an eye icon to the right, which shows the password when tapped. The IndexBar for the list component is re-styled to match the native theme. Now when you press an index from the IndexBar, you see a magnified view of the index you pressed. We have also updated the styles for the Sliderfield to more closely match the native slider. A halo appears for the Sliderfield around the grip when it is being dragged back and forth.

Password field

Password field

Re-styled IndexBar
Slider Field

Updated Sliderfield

We have also updated the highlighting on list elements (onPress vs onRelease) to reflect BlackBerry 10 highlighting styles.




Sencha Touch 2.4 also introduces a new toast component that displays small messages, which expire and disappear after a predefined amount of time. The toast component can be used to provide information to users and allow them to continue with the application after the message expires.

Toast Component

Toast Component (Self-destructive Message)

Furthermore, Sencha Touch 2.4 extends its BlackBerry 10 theme support to Q10 and Q5 devices. The touch framework is now able to determine the screen resolution of the device and resize itself accordingly. As an example, if you run your Z10 application on a Q10 device, the tab menus and action overflow menus become scrollable and the action bar changes its height according to the screen size available on those devices.

In addition to the BlackBerry specific enhancements, we’ve included a number of bug fixes in this release, pertinent to both BlackBerry and other platforms. A list of all other fixes is available in the Sencha Touch 2.4 release notes.

We are proud of our collaboration with the BlackBerry team that helps us keep Sencha Touch on top of device diversity, so we can ensure Sencha Touch is available on the newest platforms as quickly as possible. The BlackBerry enhancements in Sencha Touch 2.4 provide a great opportunity for developers to build mobile applications that have the native-like look-and-feel of BlackBerry devices.

20140819-touch-2-4.png 16 Comments   Read more