Sencha Inc. | HTML5 Apps

Videos

Tutorials

Creating Custom Layouts in Ext JS and Sencha Touch

The Layout system is one of the most powerful and unique parts of the Sencha frameworks. Layouts handle the sizing and positioning of every Component in your application, so you don't need to manage those pieces manually. Ext JS and Sencha Touch have many similarities between their Layout classes, but most Ext JS and Sencha Touch developers have probably never looked under the hood of the Layout system.

This video compliments the blog post seen here: http://www.sencha.com/blog/creating-custom-layouts-in-ext-js-and-sencha-touch


Sencha Glass Demo

Ross shows Sencha Touch running on Google Glass.


Re-skinning Your Apps Just Got Easier with Sencha Architect 3

Ever had to reskin UI components to match a visual design or brand standard? The new Themes feature in Architect 3 makes changing the look and feel of your app easier than ever.

If you’re familiar with Sass/SCSS, you’ll find this new feature a huge time saver. Architect 3 now allows you to locate and change the different variables and rules that define the visual appearance of the UI components in Ext JS and Sencha Touch.

In this one-hour webinar, Lee Boonstra, Sencha Trainer & Theming Expert, will show you how to:

Load a template and modify it
Customize the look and feel of an app, and see the changes in Architect
Export your template for use on Sencha Market or in other applications

Some working knowledge or experience with Sass/SCSS is recommended, but not required.


Cordova & PhoneGap with Sencha Cmd 4

Here we give you an overview of the new Cordova & PhoneGap Support in Sencha Command 4. We look specifically at building a Sencha Touch 2.3 application with Cordova support then again with PhoneGap support. We also look at Sencha Commands PhoneGap Build integration to allow for Cloud building which will remove the need for local native development.
We really hope you find these features as exciting as we do, and we cannot wait to see what applications you come up with! Please hit up the forums with any issues and also to shoot us a link to any cool apps or projects being worked on with these tools!
You can find Sencha Touch Here: sencha.com/products/touch
Sencha Command can be found here: sencha.com/products/sencha-cmd/
NodeJS is also required for both PhoneGap and Cordova CLI: nodejs.org


Sencha Space Invoke API Demo

A Quick video demonstrating how web applications running inside of space can communicate with each other using the Invoke API


Build a Sencha Touch Asset Tracking App in 15 minutes!

Join Sencha Developer Marketing Manager, Luke Kilpatrick to walk through step by step on how to build an IT Asset tracking app using Sencha Architect, Sencha Touch and local storage.

To do this tutorial you will need a local web server, Safari or Chrome and Sencha Touch Bundle.
You can get a 30 Evaluation of Sencha Touch Bundle here: http://www.sencha.com/products/touch-bundle/

To get a copy of the code that is cut and pasted in - please download this file
http://cdn.sencha.io/examples/AssetTrackerExample.txt

To learn more go to http://developer.sencha.com


Building Cross-Platform Mobile Apps with Sencha Touch Bundle

Sencha Sales Engineer, Daniel Gallo demonstrates how easy it is to build mobile applications for any device with HTML5 and Sencha Touch Bundle. In this one-hour video, he will show you the power of using Sencha Architect, Sencha Touch 2.2, and Sencha Touch Charts to build a cross-platform app, that works on Windows Phone 8, Blackberry 10, iOS and Android phones.

Link to the slides: https://speakerdeck.com/danielgallo/building-cross-platform-mobile-apps-with-sencha-touch-bundle

The project files includes the Sencha Architect project, PHP pages and MySQL database generation scripts to recreate the sample dataset : https://github.com/DanielGallo/CustomerApp


Theme-Switching in Sencha Touch 2.2

Sencha Touch 2.2 provides custom theming capabilities for different platforms. In this video, we have put together a demonstration of how easy it is to add theme-switching capability for different platforms, as well as customizing each theme for your application to appear the way you would like for each platform.

For providing a theme-switching capability, the first step is to create a theme in the application code base, which has a base theme to start with. As demonstrated in the video, by replicating the base theme, you can create additional resources (customizable) and configure the app to load different themes based on platform specific paths defined on your app configuration file. With Sencha Touch, your app automatically detects the platform, and the theme specific to the platform defined in the configuration file gets loaded for styling and appearance. Once you have configured the app to switch themes, you can always edit each platform-specific theme to customize the appearance.


Icon-Fonts in Sencha Touch 2.2

Unlike previous versions of Sencha Touch, version 2.2 has started using the pictos icon-fonts to replace the need to render icons using images. Since icons-fonts are vector in nature, they can be scaled infinitely and styled dynamically using CSS. This video demonstrates a set of icon fonts included in the default Sencha Touch 2.2 theme, and the mechanism to include additional icons for your custom themes provided by pictos or even other icon font sets such as IcoMoon.


Watch List Code Walkthrough

We walkthrough The Watch List, a Sencha Touch sample application that uses the Facebook Open Graph APIs and a small node.js server to communicate with your friends what movies you have watched and want to see.


Connecting to AMF Data Sources using Ext JS

In this video you will learn how to use the Advanced Data Connectors in Sencha Ext JS to connect to AMF data sources, such as ColdFusion, LCDS, and Blaze DS.


Building a geolocation app using Sencha Touch and Architect 2.2

In this step-by-step tutorial, we create a Sencha Touch 2.1 app called PlacesApp, which searches for local businesses based on a search string inputted by the user. It will also display a rating for each business.


Webinar recording: Theming your app for iOS, Android, WP8 and BB10

Theming Sencha Touch applications is one the major steps in getting an application built and deployed. Teams looking to build custom themes need to consider various theming best practices in addition to thinking about what platforms their application needs to support.

Presenters:

Ryan Collier, Sencha professional service's main UI designer and master themer, will share his insights and best practices so that your Sencha Touch applications look better than ever and scale to various devices.

Robert Dougan, lead developer of Sencha Touch 2, will present his thoughts on how to unlock the power of the new theming system. New features to enable support for iOS, Android, Windows Phone and Blackberry 10.


How to build a ticket tracking system with Sencha Architect 2.2 and Sencha Ext JS 4.2

Dave Stummer of the Sencha Architect team walks you through building a simple ticketing app with Sencha Architect and Ext JS, using the MVC design pattern. This tutorial is a great way to get up and running with Sencha technologies for application development.


Upgrading to Neptune and Ext JS 4.2 in Architect 2.2

Gil Gordon gives a quick demo showing how easy it is to upgrade your existing Sencha Ext JS 4.x project to use Ext JS 4.2 and the new Neptune theme. You can upgrade your app and give it a new look with only a few clicks.


Buffering large datasets in an Ext JS 4.2 Grid for high performance

Sencha Ext JS includes rich grids that allow you to render virtually any size of dataset quickly in many browsers. In this demo, over 7000 records are loaded and displayed both with and without the new Buffered Renderer plugin to highlight the significant performance increase.

http://www.sencha.com/blog/first-look-at-ext-js-4-2-grid/


Adding Charts to a Sencha Touch app

Sencha charting makes it easy to show large sets of data on both mobile and desktop. Using Sencha Architect, setting up a project to take advantage of this rich charting capability is fast, straightforward and requires little code. This video will show you how to add both bar charts and line charts into a Sencha Touch application.

The code for this app is available on github: https://github.com/senchalearn/CompanyStats
A live demo of the app: http://senchalearn.github.com/CompanyStats/app.html


Build Powerful Windows Phone 8 Apps with Open Standards and Sencha Tools

This webinar was broadcast on 1-15-2013.


Sencha Architect supports Sencha Touch 2.1 Charts

Building an app that uses Sencha Touch Charts is now easier than ever. Our latest version of Sencha Architect now supports Sencha Touch Charts! Check out this demo with the Sencha Architect team on how to easily build an app with Sencha Touch Charts.


Building Multi-device Apps with Sencha Complete

Daniel Gallo, Sencha's sales engineer in the UK presents how to build an application for managing customers with a .Net/MS SQL backend with Sencha Touch and Sencha Ext JS powering the front end HTML5 interfaces.