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

Ext JS Customer Spotlight: TriNet

eVestmentTriNet provides HR solutions to small and mid-sized businesses so companies can focus on developing their products, services and employees. Tailored by industry, TriNet bundled HR products provide critical core services of payroll, benefits, workers’ compensation and risk & compliance mitigation, as well as a dedicated HR team and a paperless cloud platform. TriNet handles many of the day-to-day responsibilities of being an employer and helps these companies contain HR costs, minimize employer-related risk and relieve the administrative burden of HR.

Why We Chose Ext JS

We used Ext JS to build a couple of applications, including TriNet Payroll. TriNet Payroll is an enhanced payroll solution that enables clients to preview estimated payroll costs before submitting payroll for processing.

Ext JS is an end-to-end solution, from a “single source of truth” in its data stores all the way to a set of industry-leading user interface components, including grids, charting, drawing and animation. We have used Ext JS grids extensively with our payroll and leave request applications. The Ext JS grid is extremely powerful and fast, with built-in column sorting and show/hide features. The TriNet dashboard application also utilizes various Ext JS chart components to provide a rich interactive user experience. With the depth and breadth of those features and its standardized API, we can deliver anything that our visual designers and product managers can imagine, with a faster time to market.

“We chose Ext JS 5 because it provides a number of dramatic advantages for building enterprise-class rich internet applications.

We looked at AngularJS, jQuery UI and YUI, but we chose Ext JS 5 because it provides a number of dramatic advantages for building enterprise-class rich internet applications. For instance, it has enabled us to deliver compelling user experiences for both desktop and tablet devices with the same code. The built-in support for both desktop and tablet interactions means there is very little custom coding required for the application to work in either environment. Sencha Cmd also is integrated with Cordova, so it’s simple to build a hybrid tablet application. The consistency of the API, its depth of components and tight integration translates to a very complete, expressive set of tools for rapidly building rich, intuitive interfaces.

Ext JS 5 also saves us time. The Ext JS framework ensures support for all popular browsers, and we do not need to expend engineering effort on browser compatibility issues.

Sencha Cmd is seamlessly integrated with Sass and Compass, which enables our team to write less CSS and gives us a mechanism to make our themes and styles well-organized and reusable. It also gives us a way to further customize our application styles, so we can more closely meet the specific needs of key customers and market segments.

Business Value of Using Ext JS

We received a lot of expert help from Sencha Support and Professional Services, and the Sencha support engineer has often made himself available to us on evenings and weekends. Not only does he have a tremendous amount of knowledge in all aspects of Ext JS development, but he also is a great mentor and source of creative solutions to difficult technical problems.

“As an object-oriented JavaScript framework with a robust, fully-functional class system, Ext JS provides familiar metaphors for software engineers coming from languages such as Java.

As an object-oriented JavaScript framework with a robust, fully-functional class system, Ext JS provides familiar metaphors for software engineers coming from languages such as Java, which we use on the back-end of our applications. The abstraction of the details of HTML and DOM manipulation into JavaScript also makes it possible to create custom, reusable components by using inheritance. This has substantially reduced the learning curve and training costs for our engineers who are new to web programming.

With the new Ext JS 5 Model-View-ViewModel (MVVM) architecture, we are writing even less custom code, which reduces the ‘bug surface’ of our applications. Taken together with Ext JS 5 Router/browser history capabilities, we are writing far less custom code and further accelerating the delivery of our products.

Sencha has a rigorous approach to JavaScript that provides a foundation on which to build well-organized, concise and testable applications that quickly load and respond to user input. Application footprints are made even smaller because we use Sencha Cmd as our build tool. Cmd not only minifies the code, but also inspects it and only includes framework and custom classes that are necessary for the application to run.

Our Advice to New Developers

  • Learn the framework: It’s critical to know the framework well if you’re developing applications for scalability and performance. We also recommend that you engage the Sencha Professional Services team to architect the application using best practices. This will reduce refactoring efforts later in the project.
  • Design for internationalization and 508 compliance: Ext JS provides support to internationalize your application and deliver 508 compliance. You should consider these features when you design the application.
  • Package common components: Ext JS provides many widgets out of the box. Consider packaging common components using Sencha command packages to reuse components across multiple applications.
  • Pay attention to performance: You’ll get optimal performance from your app if you follow Sencha best practices. You can use the Sencha knowledge base as well as the Professional Services and Support teams to design the application packages for performance and scalability. Pay attention to the memory footprint of the application components.

Final Thoughts

Sencha Ext JS is a robust framework for developing enterprise-class web applications, and its extensive set of tools makes development easier. The biggest advantage we see is the cross-browser and touch device support that enables us to build applications with a single code base. Support for 508 compliance is an added advantage to us. Overall, the Ext JS framework is well suited for data-intensive enterprise applications.

Ext JS 5 saves us time by ensuring support for all popular browsers, so we do not need to expend engineering effort on browser compatibility issues. No Comments   Read more

Ext JS Customer Spotlight: eVestment

eVestmenteVestment provides a flexible suite of easy-to-use, cloud-based solutions, built with Sencha Ext JS, .NET Services, and Elasticsearch, for institutional investment professionals. Through our data and web applications, we help over 2,500 clients identify and capitalize on global investment trends, better select and monitor investment managers and more successfully enable asset managers to market their funds worldwide. Our suite of analytical tools is used by top consultants, institutional investors, traditional asset managers and hedge funds worldwide.

Why We Chose Ext JS

At the beginning of 2012, eVestment acquired two firms with the goal of migrating all clients to a single, global platform and data cloud. We had a desktop-based application, a robust web application built with ASP.NET and a smaller web application written with Ext JS. We decided on a strategy to incorporate the best features from the three solutions into a single web-based platform.

We didn’t have the time to completely rewrite the eVestment platform from scratch, so we decided to reuse our existing business objects, expose them via services and work on a new presentation layer. We evaluated several different JavaScript frameworks and decided on Ext JS for the following reasons:

  • Ext JS offers a robust component library that we could readily use. The grids, buffered scrolling, and drag and drop panels are very slick and are among the many Ext JS controls we have employed in our platform.
  • Ext JS makes it easy to reuse our existing business logic and to integrate third party and existing content and libraries with our new platform.
  • Ext JS also offers compatibility with lots of browsers and browser versions.
  • We value the support and training that Sencha provides.
  • Members of our development team already had experience with Ext JS.

Here are some examples of how we leveraged the Ext JS framework to build the eVestment platform.

Tab Browsing: Our clients often have several investment profiles open simultaneously, and in previous versions of our platform, this required multiple windows to be opened. Users could have only one analysis module open at a time as well. Tab browsing provides clients with a convenient and user-friendly mechanism to quickly switch between multiple profiles or analyses which improves client productivity.

Tab Browsing on the eVestment Platform

Drag and Drop, Events: Our application design allows a user to drag and drop investment strategies to customize a portfolio or the onscreen analysis panels. Each panel on the screen is listening for events and content is immediately refreshed via asynchronous operations. This interface provides a very fluid and interactive experience that our users are very impressed with. Drag and drop is used throughout the platform, including our search feature, which allows a user to drag a target product to open an interactive profile or to augment an existing analysis.

Drag and Drop investment strategy with eVestment Portfolio Builder

Panels listening to events initiated from Drag and Drop

Drag and Drop from Modern Search

Tree Structure: The eVestment platform provides a tree structure in the primary workspace which allows users to organize investment strategies. The structure is collapsible, searchable, and provides a familiar interface that responds quickly, much like a local machine would.

Tree Structure on eVestment Platform

Search: The eVestment platform provides a high performance search feature that leverages a variety of Ext JS components such as drag and drop and charting (see histogram controls).

eVestment High Performance Search Feature

Business Value of Using Ext JS

Using Ext JS at eVestment has helped us on several fronts, including:

  • High performance, responsive user interface: One of the biggest benefits of Ext JS and the single page application architecture is how fast and responsive our platform is relative to the previous version. Our flagship profiles and search features now load with sub-second speed, despite the fact that the user is often searching across hundreds of thousands of products and several thousand data points. We have the most sophisticated financial professionals in the world using our platform and time is money, so speed is extremely important to our users.
  • Time-to-Market: Ext JS has enabled our teams to quickly prototype concepts using mock data — allowing business stakeholders and clients the opportunity to provide feedback that can be easily incorporated into the development cycle. For example, we were able to develop a high-fidelity liquidity simulator concept with Ext JS and mock data during a two day hackathon. The same concept would have taken quite a bit longer with other frameworks we have leveraged in the past. Once our stakeholders green-lighted the concept, we were able to plug in data and launch a new module in rapid order.
  • Developer productivity: The MVC model and use of mock data in the Ext JS stores has also increased efficiency by allowing our development teams to divide project tasks. For example, we can have a team working on the front-end while we have a separate team working on the service layer. Additionally, because the Ext library is so extensive, our team spends less time hand-rolling or modifying custom jQuery and more time focusing on new features and products for our clients.
  • Higher Quality: In the past, we often spent weeks doing styling tweaks, browser testing, and UI bug fixes before launching a new solution. The Ext JS libraries are very tight and well-tested, so we spend a lot less time building user experiences and get higher quality. Using a custom Ext JS theme has dramatically increased the consistency between our modules and solutions.

Our Advice to New Developers

New developers should invest in the training classes available from Sencha, and they should bookmark the Sencha documents. Ext JS is powerful, but given how comprehensive the framework is, developers should expect a learning curve. The training resources are invaluable and worth the time investment. We benefited greatly by having our developers attend the four-day on-site training, as well as the online training. Regardless of whether you take advantage of the training, familiarize yourself with the sample apps and documentation — they are comprehensive and excellent.

Final Thoughts

Using Sencha Ext JS has allowed eVestment to rapidly re-platform our web-based application using current UX/UI patterns. Our team now has a lot more time to focus on functionality for clients instead of spending time on creating and debugging low-level components and frameworks.

Using Sencha Ext JS has allowed eVestment to rapidly re-platform our web-based application using current UX/UI patterns. Our team now has a lot more time to focus on functionality for clients. No Comments   Read more

GXT Customer Spotlight – Logic9s ClearFactr

Logic9sLogic9s develops scalable software solutions that simplify data complexity. Our premier product is ClearFactr™, a SaaS application that combines a Self-Describing Spreadsheet®, a powerful simulator, a suite of analytics, and the ability to easily share and monitor everything with others. Logic9s targets a broad audience of traditional spreadsheet users who have experienced the workflow pains of models and formulas that are impossible to understand, analytics that are cumbersome to use, and poor communication.

A typical use of ClearFactr might be entrepreneurs looking to develop a financial model for their new company, and then sharing that plan, including the ability to run simulations on it, with a community of investors. Both parties benefit from the Self-Describing Spreadsheet.

Logic9s

The Self-Describing Spreadsheet was built with the Sencha GXT Grid widget

Each party also gets to configure, run and save simulations based on their own assumptions, and then they can compare and contrast the results. Patent-pending analytics like the Sensitivity Analyzer use unique visualization techniques to draw attention to important drivers and relationships within the plan that might otherwise go unnoticed.The owner of the plan, all the while, can see who’s really interacting with things, so they know how to prioritize their follow-up.

The front end of ClearFactr is built entirely with Sencha GXT. Amazon Web Services drives the rest of the app.

Why We Chose Sencha GXT

We wanted to leverage Java in a front-to-back fashion. Google Web Toolkit fit that bill perfectly, but left us wanting for the elaborate user interfaces we were envisioning. GXT, conceived and built in Java from the ground up, was the clear choice over some other alternatives we surveyed and experimented with. The cohesive design and architecture of GXT shines through its excellent Javadoc. Class and method names are completely intuitive, and our many years of Java Swing history translated perfectly to GXT within hours. BorderLayoutContainer for example, modeled after Swing’s BorderLayout class, forms the basis for ClearFactr’s highly interactive Dashboard. The relationships between the various classes and the implicit design patterns are tried-and-true and correspondingly powerful.

The GXT Grid widget dramatically outperformed alternatives in rendering and navigation speed, including in “dev mode”, which allows our developers to be that much more productive. Working with Sencha engineers, we made some important customizations to the widget to deliver the kind of user experiences we needed. We often hear comments like: “I can’t believe this isn’t a native desktop app.” And we’re just getting started.

Logic9s

ClearFactr’s Cell Ancestry feature was built with GXT Grid, TabPanel, Slider, MenuItems and more

The Sencha GXT charting library was a clear standout as well. Again, the API was the selling point, providing a completely natural integration to ClearFactr’s elaborate front-end data structures of analytical results. The rendering capabilities, and the ease with which these could be customized, further sealed the deal.

Logic9s

ClearFactr’s Simulation Summary Chart panel was built with the Sencha GXT charting library

Business Value of Using GXT

The greatest value of Sencha GXT is its architecture-neutral stance and full embrace of Java’s history and feature set. The API is built around Java Generics, so the UI code can easily and naturally work with real business objects containing powerful behaviors, not just simple data structures. Better yet, those behaviors can also be easily accessed at the server-side via the ‘shared’ package every GXT app supports.

Sencha isn’t in the server business, so they’re not trying to push a particular application architecture at you. Using GWT-RPC to communicate with AWS Elastic Beanstalk, for example, is trivially simple. It delivers excellent performance and scalability, affords complete compile-time type safety (which yields a completely self-documenting codebase that dev tools like Intellij IDEA can make the most of) and allows for the easiest, most maintainable gateway to ClearFactr’s highly parallelized, multi-component backend.

I’m a developer with many years of large-scale end user application development experience, but not on the Web. All of the benefits above allowed me to transition to a high-performance, highly scalable, Web-centric platform in short order. Most importantly, the resulting code base is a pleasure to work with, so it allows us to stay focused on understanding what our customers want and delivering those solutions without fighting a UX framework.

Our Advice to New Developers

When coming up the GXT learning curve, definitely start with the excellent Sencha GXT Explorer showcase. It’s filled with examples that demonstrate both capabilities and best practices. But if you need something really special, don’t hesitate to reach out to Professional Services. Put a price on your own time and consider the cost of getting too far down a road that could eventually present some severe architectural obstacle.

Final Thoughts

Sencha GXT literally made ClearFactr possible. We will soon be upgrading ClearFactr to GXT 3.1.We plan on using the new Theme Builder to develop a custom theme that will tie the graphic design of our app into our website. We’re also eager to use the enhancements to the Grid widget that support multi-line cells; they’ll make the Self-Describing-Spreadsheet that much more effective. As we say, we love Excel, but not for everything. For those cases where ClearFactr is a better fit, Sencha GXT ensures that we give our users a great experience and unquestionable value.

Sencha GXT allowed us to take our years of large-scale app dev experience and transition to a high-performance, highly scalable, web-centric platform in a very short time. We’re able to give our users a great experience and unquestionable value. 3 Comments   Read more

Sencha Touch Spotlight: United Heritage Life Insurance Company

United Heritage Life Insurance Company, the life insurance subsidiary of the United Heritage Financial Group, has been providing quality life insurance and annuity products since 1934. As customer needs have evolved, the software development team at United Heritage has upgraded their offerings, providing agents and customers with the tools they need to make important life decisions.

Mobile was a game changer for United Heritage Life, but in order to provide a highly tuned and responsive user experience, our development team had a challenge: we needed to quickly ‘mobilize’ our IBM i midrange (AS/400) environment with the existing group of developers and their skillsets as well as the infrastructure we had in place. Writing native applications with device SDKs wasn’t an option; we needed a solution that would make it easy to mobile-enable our business logic, tapping into enterprise back-end systems developed with CA Plex and RPG.

Why We Chose Sencha Touch

We watched a demonstration of Sencha Touch with CA Plex and CM WebClient at a conference and immediately saw a way to get our insurance products to market more quickly while reducing costs. We were already using an IBM i infrastructure to develop browser-based applications, but adding Sencha Touch to the mix, we knew we could create and publish mobile applications faster, without starting from scratch or compromising the user experience.

The hybrid HTML5/CSS3 Sencha Touch front-end is very flexible. We can easily support our BYOD policies because our enterprise insurance apps run equally well on Android and iOS, with native device level interactions, and the ability to publish on both app stores. We used the Sencha Touch support for Cordova to accomplish this, which made native packaging a seamless process. This integration was important, not only for app store support, but to gain access to the native device features. Sencha Touch device themes were also important because we needed our apps to look good on our target platforms.

Sencha Touch Spotlight, United Heritage Life Insurance Company<br />
“></a></p>
<figcaption>
<p>We used Sencha Touch support for Cordova for native packaging and device level interactions.</p>
</figcaption>
</figure>
<p>We used Sencha Touch support for Cordova for native packaging and device level interactions.</p>
<p>The combination of Sencha Touch with CA Plex and CM WebClient made it easy to build a mobile app that fit into our development team’s skillsets and workflow. We used CM WebClient to generate the presentation layer for our existing CA Plex client/server applications. Using Sencha Touch, we were able to create a component-based design that further reduced the learning curve by providing components that matched the controls our CA Plex developers understood. The components were based on a hierarchy of abstract component classes with a consistent set of properties and methods, which made adapting new components much easier. Sencha Touch is so flexible that any abstract or real components we needed could be created. We found the JSON structure which described the Sencha Touch applications easy to read and consistent.</p>
<p>We also used the Sencha Touch Grid to show tabular data in many different formats. This key feature helped us to make sure the data could be navigated easily on mobile phones.</p>
<figure class= Sencha Touch Spotlight, United Heritage Life Insurance Company<br />
“></a></p>
<figcaption>
<p>We used Sencha Touch components and grids to make tabular data easy to read on mobile phones
</p>
</figcaption>
</figure>
<p>At run-time, our mobile applications communicate with a Java Servlet that does a lot of the work. This communication integrates well with the JSON request and response method in Sencha Touch, resulting in great performance. Before starting our project, we compared the performance of Sencha Touch apps to natively-developed apps, because our apps had to perform with native-like responsiveness for our end users. We got the results we needed.</p>
<p>Using Sencha Touch support for Cordova, we were also able to easily set up the application, so agents can authenticate into the IBM i system and only have to install and configure the application once. After that, when agents log in, they are presented with a customized application list based on their needs.</p>
<h3>Business Value of Using Sencha Touch</h3>
<p>A high percentage of our business is in “pre-need” insurance, so we built the Pre-Need Calculator app for our agents. Using the combined solution of Sencha Touch with CA Plex and CM First WebClient, we were able to build a prototype with a familiar look and feel that made it easy for our agents to use. By investing time upfront to design a flexible user interface, we were able to build a second application, ‘final expense calculator,’ so both apps shared the same interface, with a choice of which path the agent wants to take. We reduced both our development time and the training time to bring agents up to speed on the new app. The production versions of the apps are available in Apple iTunes and Google Play stores, which makes it efficient to distribute to our network of agents. We see the value of this solution every day, because it does so much for us. It was much easier to build, integrate and distribute an HTML5 app than it would have been to develop a native mobile app from scratch.</p>
<h3>Our Advice for New Developers</h3>
<p>You have to take some time to see all that is offered with the Sencha Touch framework. But with some basic mentoring from CM First, we found it was easy to learn and use; we didn’t have to hire specialized mobile app developers. Our existing team mastered the new approach quickly. We found that we only needed minimal adjustments to our code, which meant we could roll out applications at the rate our business needed them.</p>
<h3>Final Thoughts</h3>
<p>Sencha Touch gave us the freedom to design whatever mobile interfaces we needed without worrying about operating systems or device issues. It insulated us from all the complexity. Our designs quickly became a reality on the screen.</p>
<p>If you are an IBM i hardware customer, you can take the skills you already have and begin to build mobile applications very quickly with Sencha Touch, CA Plex and CM WebClient. Other companies within the United Heritage Financial Group have seen what we’ve done with the solution and are ready to begin building their mobile apps.</p>
<a href=Sencha Touch gave us the freedom to design whatever mobile interfaces we needed without worrying about operating systems or device issues. It insulated us from all the complexity. Our designs quickly became a reality on the screen. 1 Comment   Read more

Sencha Touch and Ext JS Customer Spotlight: DecidoKompetensor & The Impossible Project

The Impossible Project

DecidoKompetensor is an IT company, based in Malmö and Helsingborg, Sweden, that specializes in business software and related solutions and services. We are the leading supplier of services for Sencha products in Scandinavia and work primarily with Sencha Touch and Ext JS. We have developed a solution using Ext JS and Sencha Touch to publish business data on the web and mobile phones in an easy and powerful way. We’ve started with business apps but the technology is also applicable in other areas. Our latest project was done for Impossible.

In October 2008, Impossible acquired the last factory in the world (in Enschede, NL) that manufactures Polaroid analog instant film and began to develop and produce completely new instant film materials for traditional Polaroid cameras. They now produce a range of analog instant film that works with the over 200 million vintage Polaroid cameras — still being used today. Impossible is also creating new hardware that will ensure the future of analog instant photography and give it relevance to new generations steeped in the digital world. The Instant Lab — the company’s first hardware product — uses the Apple iPhone high-resolution display to expose a digital image directly onto Impossible analog film. This is where the Impossible Project App comes in.

Originally conceived as a simple exposure tool, Impossible quickly realized that the goals for the application had to be set much higher. It was the entry point into the Impossible world of instant photography, so Impossible built four distinct features that encompass the “Impossible experience” 1) the Instant Lab Tool 2) the Impossible Gallery 3) an Instant Photo scanner, and 4) a mobile shop.

Impossible customers love analog instant photography and, as expected, the first feature they gravitated towards was the gallery. In the first two weeks after release, there were about 14,000 downloads, increased traffic through Impossible’s online gallery, and encouraging mobile sales.

Why We Chose Sencha Touch

We chose Sencha Touch as the mobile framework, mainly for its user experience. It was very important for Impossible to keep the user experience and UI uniform throughout the different features of the app. They also wanted the versatility of releasing the mobile shop on Android, in the future. Rather than relying on external iOS (or in the future, Android) developers, they wanted the flexibility of making big changes to the shop in-house. Finally, it made the user experience seamless. Overall, we are very happy with both the flexibility and the user experience that Sencha Touch provided.

Application Events

The ability to change the apps views depending on different server responses was very important. At any point in the buying process, things like currency and discount can change. To be sure that this change is reflected at every screen in the app, we used Application Events. These can be fired from any Controller and any Controller or View can listen to them.

//Fire Application event
me.getApplication().fireEvent('cartUpdated');
 
//Listen to application event
me.getApplication().on('cartUpdated', function(){
        //Do stuff when cart is updated
}, me);

REST API

The existing backend provided us with a REST API. This was easily adopted by using the proxies provided in the Sencha Touch data package. By just adding configuration to existing classes, we were able to communicate with this API and all of the create, read, update and delete actions we made in Sencha Touch immediately were synchronized with the backend.

X-Templates

The template system allowed us to generate HTML markup from data arrays. The shop article list and details view were created using the Ext.XTemplate template class. This enabled a lot of flexibility in the look and feel of these views while still relying on data provided from the API.

the impossible project

We used Ext.XTemplate to create HTML markup connected to data.

Associations

The data package gives us the ability to set up “associations” between models. This came in very handy when structuring the app data model. After describing each model, respectively, we can associate them with each other, and Sencha Touch generates functions for accessing the associated data very easily.

The above simplified code snippet shows how associations could be set up in a Cart model. To access the associated data, we simply call the auto-generated function on the cart model instance, and it returns an Ext.data.Store containing cart items.

Ext.define('App.model.Cart', {
        extend: 'Ext.data.Model',
        config: {
                hasMany: [
                        {
                                model: 'App.model.CartItem',
                                name: 'cartItems'
                        },
                        {
                                model: 'App.model.CreditCard',
                                name: 'creditCards',
                        }
                ]
        }
});

Routes

Because some navigation was being initialized from native buttons or functions, we needed a solid way to communicate into the web view. The URL part of a native web view is easily accessible from both Sencha Touch and native code, so we decided on this channel of communication. Using the “routes” config in the Sencha Touch controller, we could monitor the URL pattern and open the correct view by calling the right controller functions. Using this technique, we could also pass information from native into the Sencha Touch controller. Using the “before” controller config, we could also stop navigation if the URL pattern wasn’t valid or any information was missing.

Sencha Cmd

We got a lot of benefits from using the new Sencha Cmd tool. In addition to the obvious benefits of a standardized MVC structure, it gave us a great way to quickly build and deploy versions for testing and evaluation. It also makes it so much easier to upgrade to future Sencha Touch versions.

Sass/Compass Theming

Almost every view component was themed based on Photoshop images designed by an agency. Fonts, colors, pickers were all changed using Sass variables and custom-made layouts were pushed to their limits to make the theme pixel perfect. We think it turned out great.

The Impossible Project
The Impossible Project
The Impossible Project
The Impossible Project

The product view is a container that renders each product using an XTemplate. The cart contains a dataview with an XTemplate to display the products, a fieldset with a textfield to show order total, and a bottom toolbar with a custom UI applied.

Our Advice to New Developers

Our best advice for new developers is to take a training class and use the tools provided. Sencha Cmd and Sencha Architect are very helpful. Always abstract your re-usable classes, when possible. Application requirements often change late in the project, so being able to easily change and restructure code makes all the difference. Adopt best practices and you will end up with solutions that are upgradable and easy for your fellow developers to understand.

Final Thoughts

This was an exciting project for us. We had the opportunity to work closely with people developing native iPhone apps, and the hybrid approach allowed us to benefit from the best of both worlds. The Sencha Touch class system and layout system made it very easy for us to quickly get a prototype running. That helped us make important decisions early on, because we knew what would feel best when actually using it on a device.

20131007-Decido.jpg 2 Comments   Read more

Sencha Touch Customer Spotlight – harmon.ie

harmon.ie Sencha customer spotlight

harmon.ie logoharmon.ie, the user experience company for the mobile enterprise, provides products that deliver a consistent user experience on mobile devices, the desktop, and the cloud, for a host of social and collaboration platforms from vendors such as Microsoft and IBM. harmon.ie delivers a suite of connected apps bringing Office 365 to iOS, BlackBerry 10 and Android devices. Thousands of businesses including Citi, DuPont and BAE Systems already use harmon.ie. Our 1.5M users come from companies of every size that need fully-featured access to SharePoint and Office 365 from any mobile device. harmon.ie is a Microsoft and BlackBerry premier partner.

Why We Chose Sencha Touch

Building products for the mobile enterprise specifically targeted for BYOD environments, we needed a development infrastructure that would enable us to reuse development investments for the various mobile platforms. Sencha Touch was a natural choice due to its cross-platform capabilities. Moreover, being able to use the rich set of out-of-the-box, high-performance components from Sencha was key to helping harmon.ie deliver a product to market in a timely manner with a great user experience.

First, in order to render thousands of Office 365 and SharePoint documents in our app, we used the Sencha List-Store-Proxy model. By implementing a custom data proxy (which inherits from Ext.data.proxy) with server-side paging against the document repository, we were able to use the out-of-the-box List and ListPaging plugin components to provide high-performance access to Office 365 and SharePoint documents.


harmon.ie Sencha customer spotlight


harmon.ie Sencha customer spotlight

Office 365 documents displayed using a Sencha list component in iOS and Android devices

Second, Office 365 and SharePoint also offer methods to classify documents using taxonomy tags (ManagedMetadata). Choosing Sencha’s NestedList component was the perfect solution to provide our users to easily select tags from different levels in the taxonomy hierarchy.


harmon.ie Sencha customer spotlight


harmon.ie Sencha customer spotlight

Use of Nested List to Allow Users to Select Taxonomy Tags

Third, with the market release of BlackBerry 10 in early 2013, we used the flexible Sencha theming architecture and the basic BlackBerry 10 theme introduced in Sencha 2.2 to deliver our app to the BlackBerry 10 platform with a native look-and-feel, including Toolbars and Cross-Cuts menus, within months after the BlackBerry release.


harmon.ie Sencha customer spotlight


harmon.ie Sencha customer spotlight


harmon.ie Sencha customer spotlight

harmon.ie app using the BlackBerry 10 theme has a native look-and-feel

Additionally, the fact that Sencha Touch development is based on HTML5 and CSS3 web standards, conformed to our incumbent skill set; so bringing developers up-to-speed with the Sencha development environment was fast and easy.

Business Value of Using Sencha Touch

Sencha provided harmon.ie tremendous business value in the following areas:

  • Time-to-market: we released an initial iOS-based product to market within 6 months.
  • User experience: we were able to deliver a great user interface using the Sencha Touch out-of-the-box set of UI components and customizable components.
  • Development skills: leveraging existing development skills was key to our success. The hiring and training process was easier. Bringing developers (with Java/C# background) up-to-speed with the Sencha Touch framework was a simple matter of 3-4 weeks.
  • Cross-platform: supporting multiple platforms is essential in the enterprise market. Our ability to reuse development investments and thus promptly provide apps for the BlackBerry 10 and Android platforms was very important to our customers.

Our Advice to New Developers

Here are a few words of advice:

  • Spend some time learning Sencha Touch design patterns, specifically the MVC pattern. Coding according to the right patterns will enable you to maintain your application easily.
  • Take advantage of Sencha support: Sencha provides great customer support — so use it!
  • Remember there is a difference between a prototype and a fully functional app. Sometimes you’ll have to invest more than you’d expected in getting the app to work exactly as you specced it. * However, investing in the user experience pays off long term.

Don’t be intimidated — dive into the Sencha codebase: understanding the Sencha internal implementation will enable you to code better and implement exceptional solutions.

Final Thoughts

We are very pleased with our choice of Sencha Touch. The fact that Sencha provides a set of customizable UI components, and most importantly a complete framework (including the data transport layer) for building apps on different mobile platforms, enabled the harmon.ie development team to deliver great business value to customers in a short period of time. We look forward to continuing to use Sencha Touch to expand our mobile offerings and to help our customers maximize their collaboration investments.

20130821-harmonie-spotlight.jpg 1 Comment   Read more

Sencha Touch and Ext JS Spotlight: PureFacts Financial Solutions

Pure Facts

PureFacts Financial Solutions produces one of the leading Wealth Management Solutions available today, including tools such as Advisor Desktop (CRM), Reporting, Statements, Fees, Modeling, and more. Our solution allows wealth managers to use a single management interface to obtain a cohesive and comprehensive view of their clients’ assets.

### Why We Chose Sencha Ext JS and Touch

When the time came to replace PureFacts’s existing desktop-based solution, we decided to replace it with a modern Web-based architecture. We wanted a framework that had a comprehensive widget library and pre-built components; and one that would provide total control over the look and feel of the resulting user interfaces as well as easily integrate with our .NET back-end framework.

Ext JS fit our needs perfectly; we started developing our first solution based on the framework in 2009, using the Ext JS 3.x libraries. Using Ext.Direct as the communications provider, we were able to integrate the Ext JS framework with our existing .NET back-end. It was an immediate success — not only could we easily create a new web-based UI, the framework’s extensibility allowed us to efficiently deliver custom functionality to multiple independent clients, while maintaining a single code stream (one of the tenets of our new architecture). Our management team was very impressed with these results and made a strategic decision to use the Ext JS framework to build richer interfaces for the next version of our entire application suite.

Our management team was very impressed with these results and made a strategic decision to use the Ext JS framework to build richer interfaces for the next version of our entire application suite.

After upgrading to Ext JS 4.x, we were able to deliver new functionality at an ever-increasing pace. This was due to the new MVC architecture that Ext JS 4.x delivered. We were developing a greater number of pluggable components and the level of reuse at the UI level continued to increase. The Ext JS component design allowed extensions using Panels and Tabs, providing us with the ability to build complex layouts that fit our clients’ needs. Furthermore, the sophisticated Ext JS Charts and Table Grid components enabled us to customize and enhance data visualizations.

Due to the unique requirements of our clients, an important aspect of the solution was the ability to deliver custom functionality at the browser level, while retaining a consistent user experience and easily managing these customizations. Maintaining a secure application, while leveraging the concepts of a true role-based UI with customizations, was a real challenge for us. However, the openness of the Ext JS libraries gave us full control of the look and feel that we desired, providing us with a framework that can deliver a world-class user experience.

Pure Facts
Using Ext JS for component design allowed us to develop complex layouts using Panels and Tabs to provide wealth managers with a single comprehensive view of a client’s assets.

Pure Facts
Using the sophisticated Ext JS Charting and interactive Table Grid components, we easily configured different data views for each client.

Having already built a client web portal (our PurePortal product) on the Ext JS framework, we decided to make our first foray into a mobile interface. It was an easy choice to use the Sencha Touch framework, given our ongoing success with Ext JS. Cross-training developers to use Sencha Touch was an incredibly simple process since we had the pre-existing server-side APIs to deliver the data to the required UI elements. This is one of the most successful projects to date at PureFacts — we were able to create the mobile interface in a matter of weeks.

The Sencha Touch framework enabled us to create web apps for mobile devices with the look and feel of native mobile apps. Not only did Sencha Touch provide us with the speed and agility to bring in new developers, the framework enabled us to support multiple devices and ensured HTML5 compliance, so we could deliver the flexibility and multi-device support that we envisioned for our mobile app. The PurePortal mobile application was featured at SenchaCon 2013 in the BlackBerry Lounge.



Sencha Touch enabled us to support multiple devices, providing a robust and user friendly experience.

### Business Value of Using Sencha Ext JS and Touch

The ability to deliver a customizable and attractive user interface at the browser level was simply not possible using the older technologies such as Visual Basic 6 that we used to build our desktop solution. Using Sencha frameworks, our application suite is now evolving at a previously unimaginable pace, with a greater than 50% increase in our development speed, and is a truly world-class solution. The breadth and depth of the libraries, as well as the extensive documentation and support via the user forums, not to mention the abundant number of user extensions which can be easily applied to your solution, continue to impress us.

### Our Advice to New Developers

The best advice we can give new developers is to use the resources you have at your disposal. Try out the extensive examples, follow the forums and blogs, and get the newsletter (which always has valuable information). Our most important tip is to find an experienced trainer, especially if you are planning to build a single page desktop replacement app — the return on investment for training cannot be overstated. That said, don’t be afraid to jump right in and experiment, knowing full well that you may throw away what you just built, but it’s so easy to do this with the Sencha libraries that we encourage “learning by doing.”

### Final Thoughts

Our choice to use the Ext JS framework was an integral decision in replacing our existing desktop solution. As we continue to improve upon and evolve our application suite, both Ext JS and Sencha Touch will be cornerstones of our solutions. The Sencha libraries are among the best that we have ever used. Our developers enjoy working with them, our management team appreciates how they allow us to efficiently deliver rich interfaces, and most importantly our clients love the solutions we are now delivering.

20130807-purefacts.jpg No Comments   Read more

Sencha Touch Spotlight: Open Banking

sencha touch spotlight

Logate is a software development company focused on design, development, implementation and maintenance of enterprise software solutions and services, using the latest open source technologies and agile development methodology. We take as much time as needed to fully understand, not only our customer’s requirements, but also their business, so we provide a solution that fits their needs well.

Our product Open Banking, which is deploy at Hipotekarna Bank in Montenegro, provides important banking services through a mobile app. The app simplifies payments and provides real-time information about customer accounts, loans, savings and credit cards. Customers can also create payment templates and pay for services — like gym memberships, magazines subscriptions, house rentals etc. — within seconds. Hipotekarna Bank gets many benefits from offering this app including: building revenue sources and strengthening customer loyalty by offering new and better services, expanding brand presence, turning cellphones into ATMs for 24×7 service, and reducing the cost of direct teller interactions.

Open Banking was designed to integrate easily with the existing mobile network and banking infrastructure while opening new business opportunities for Hipotekarna Bank and providing a foundation for new cost-effective services and revenue opportunities.

Why We Chose Sencha Touch

The main reason we chose Sencha Touch is development time savings. Considering development for each mobile platform individually, you need to be familiar with different programming languages, different paradigms and platform constraints. Our biggest concern was whether HTML5 was ready for large mobile applications like our mobile banking app. After comparing several frameworks, we found that Sencha Touch provides the richest set of UI components, fully documented API and great community support.

That was not the only reason we chose Sencha Touch. Sencha has proven that HTML5 applications perform well on mobile devices. Not to mention that introducing a new developer to Sencha Touch is fast and easy. We reviewed the menu of UI widgets in the Kitchen Sink demo app, tried each one of them and, in a simple manner, chose widgets that best suit our design. Since it is an HTML5 application with CSS3 web standard, our developers did not have any problem fulfilling the needs of our designers.


With Sencha Touch, it was easy and familiar for our developers to style our app using CSS3.

Our designers were happy to see their ideas unchanged and fully implemented in the app.

In the beginning, we used standard Sencha Touch form and panel components, which allowed us to easily prototype and change the layout and app flow. Several times, we changed the layout in accordance with the new design requirements. This proved to be much easier on Sencha Touch than it would have been if we were building a native application. When we found the best version, we optimized our app structure and adjusted styles to meet our designer’s prototypes. Adjusting Sencha Touch default styles with SASS & Compass was incredibly easy and helped us tremendously to quickly adjust our app design. Plus, it was easy to integrate Google Maps into our application.

Logate Banking

Sencha Touch made it easy to integrate Google Maps with our app.
Logate Banking

The menus perform smoothly and naturally.

Open Banking has a large code base and maintainability is critically important. The new Sencha Touch model-view-controller architecture helped us here. We separated responsibilities within the team to handle different parts of the app. It takes us only a few hours to include a new developer, and this would be impossible without the Sencha Touch framework.

Business Value of Using Sencha Touch

By using Sencha Touch, we have significantly accelerated our development, mainly because we have a single code base for all platforms. We found what we were looking for in Sencha Touch capabilities:

  • Large set of UI components, which allows us to efficiently build the user interface for Open Banking.
  • Prompt build for iOS, Android, BlackBerry and other mobile platforms.
  • Open source and generous licensing terms for the platform.

Using Sencha Touch allows us to offer a better mobile experience for our customers. It is simpler and faster. Customers can pay, check account balances or find the nearest branch within seconds — it’s that easy.

Advice to New Developers

Learning Sencha Touch on your own can be challenging for beginners. As a first step, always check out the samples and if you have questions, the forum is a great place to ask for help. Besides the Sencha forum, Sencha also offers the Learn website with carefully prepared articles to help you get started using Sencha frameworks and tools. After you get over the initial challenges, you will find yourself building more complex components, and you will be very pleased with your results. If you want to learn even more, you can sign up for open training sessions on Sencha Touch, or request an on-site training for larger teams.

Final Thoughts

We’ve had a great experience using Sencha Touch. It’s not an ordinary set of UI components; it’s an advanced framework for building great mobile apps. Sencha Touch gives us exactly what we need to create appealing UI for our customers and to focus mainly on their business needs, while developing an efficient and maintainable code structure. We are looking forward to using Sencha Touch for all of our future mobile apps.

touch-spotlight-01.png No Comments   Read more

Sencha Touch, Ext JS and Architect Spotlight: UNIORG for SAP

UNIORG is a leading full service provider of SAP business solutions and certified partner of SAP AG. Besides offering conventional SAP consulting for the last 30 years, we have supported our clients with a broad range of products and services for deployment and development of their business information management systems. We continue to develop new SAP offerings to help our customers prepare their businesses for the future. We recently developed UNIORG OrderTracking for SAP HANA.

UNIORG OrderTracking is a mobile app that provides real-time monitoring of customer orders from the SAP ERP System, based on different dynamic criteria. Our app is useful for all SAP customers who want to equip their external partners, sales reps or internal employees with a fast, efficient view of current and historical orders. The application delivers real-time status, order value, classification characteristics and provides analysis functions on top of SAP HANA (In-Memory Technology), which is not achievable with the native SAP ERP system.

UNIORG OrderTracking is a mobile app that provides real-time monitoring of customer orders from the SAP ERP System.

### Why We Chose Sencha Touch, Ext JS and Architect
Sencha Touch fit our needs perfectly because we wanted to build a modern HTML5-based web UI with touch support that would work on almost any mobile device. The competitive solution of SAP and the SAP HTML5 framework based on JQuery is currently in beta and did not satisfy our needs for a high performance mobile solution.

The Sencha Touch API is similar to the Ext JS API, so we were able to take advantage of our broad knowledge and experience with Ext JS. We also used Sencha Architect to design our mobile apps, and the combination of Architect with Sencha Cmd gave us all the tools we needed right out of the box to be highly productive building mobile apps for SAP.

Sencha Architect and Cmd make it easy to prototype and give clients a hands-on demo.

Using Sencha Architect and Cmd, we can also prototype functional working mockups quickly to give clients a hands-on demo, rather than looking at non-functional layouts created with mockup/wireframing tools like Balsamic Mockups or Mockingbird. We can reuse designs and custom widgets by exporting and importing them between different Sencha Architect Projects and also use a custom theme that reflects the customer’s corporate design with very low effort — thanks to Compass/SASS and Sencha Cmd. For this reason, we designed the L-Shape (Surrounding Portal/App Navigation and Information Layout that allows switching between different apps) and added some static placeholder HTML as well as mockup data used by the list and data widgets. If the client decides to implement the solution, we then add some additional design using CSS and develop the business logic inside the target SAP system.

UNIORG OrderTracking includes graphic charts and integrated map visualization of partner addresses via Google maps.

Using Sencha Touch, we built an extensible and highly responsive platform. We included the Google Maps Panel widget and added some additional functionality using the Google Maps API (resolving addresses to coordinates, dynamically adding markers, etc.).

Statistical information is presented by using the native touch pie chart widget.

The Sencha object-oriented class approach allowed us to develop a custom oData Proxy for accessing SAP HANA Data Services. We decided to use the default Ajax proxy and customize the corresponding source inside sdk src folder. By doing it that way, we could use the standard building process that included our own Ajax proxy implementation for building/compiling the app. We also implemented the store filter functionality between local and remote stores directly inside the proxy, so any designed form filter widget is able to remotely filter the needed data without additional programming effort. The extended SAP HANA proxy is able to translate Ajax requests into oData requests transforming filter, paging and sorting into the corresponding SAP HANA oData format.

### Business Value of Using Sencha Touch, Ext JS and Architect
Using Sencha Touch, we got a multi-platform solution that runs perfectly on many devices including the Apple iPad and Samsung Google Nexus. We don’t have to develop the same solution for different devices with different SDKs. After some investigation into XCode, we calculated that it would have been an additional effort of 3-4 times to realize the same functionality inside a native XCode App. Furthermore, Sencha Touch delivers more widgets out-of-the-box. If we’d used XCode, we would have had to develop them ourselves. If we’d built our app for Android, it would have required a complete rebuild because XCode uses Objective C while Android SDK uses Java.
Sencha Touch uses native JavaScript on all supported devices, so we don’t have to rely on our developers to have knowledge of the individual platforms, which would lead to higher engineering resources and additional project management overhead. HTML5-based, cross platform, mobile development allows us to write one code base and reduce our development costs.

…we calculated that it would have been an additional effort of 3–4 times to realize the same functionality inside a native XCode App.

With Sencha Architect, we were able to build and release mobile apps quickly which reduced our costs and made it easier to maintain the apps. Our developers are much more productive using Sencha Touch. By implementing ExtDirect into SAP Application Server ABAP, we are able to include SAP ERP data at design time (using local apache with modproxy to inject ExtDirect SAP services into local app domain URI for Cross-Domain issues). Currently, the whole design process (including controller logic) can be done inside Sencha Architect. Using Eclipse, we customize the look and feel using themes and also build/theme the app using ant tasks that trigger the Sencha Cmd Build Tool. The next step is to deploy the app directly on the target SAP system by using a custom ant task that uses WebDav, so the whole build and deploy process is completely automated. The production version is stored inside the SAP development system and is rolled out (transported) with native SAP technology.

### Our Advice to New Developers
In addition to the great online API documentation, developers should also look at the Sencha Touch source code, which is part of the SDK download. In some cases, developers need to know how things work internally, and for that reason the source code is the best place to look. As an example, in a previous version of the API docs, the image property ‘mode’ was not listed, but it was used internally so we were able to review it. We wanted to have an image that stretched width and height to 100 percent of the surrounding container. After a quick look into the code, we found out that the property ‘mode’ controls the creation of an image tag or use of the CSS property. Keeping this in mind, we were able to set the required properties to get the experience we wanted.

### Final Thoughts
We found it easy to get started with Sencha Touch, especially with our Ext JS experience. By spending time with the examples and demos to learn the basics, you will love the object-oriented approach especially when you’re building cross-platform apps for mobile and desktop. Using Sencha Architect as the UI modeling tool, you can focus on user experience and efficiency instead of creating handcrafted UIs, and that makes it easier to build a better app. We also saved a lot of time by using Sencha Architect because it increased our productivity.

20130619-uniorg.jpg No Comments   Read more