Sencha Touch Fundamentals

Learn all the fundamentals of building a SenchaTouch mobile web application with just JavaScript.
Course info
Rating
(146)
Level
Intermediate
Updated
Jul 8, 2013
Duration
4h 32m
Table of contents
Introduction
JavaScript Fundamentals and the Touch Class System
Sencha Touch Components and Documentation Overview
Containers and Layout Management
Visual Components
Client Side Data Models And Stores
Bringing It All Together Line Of Business (LOB) Code Camp App
Description
Course info
Rating
(146)
Level
Intermediate
Updated
Jul 8, 2013
Duration
4h 32m
Description

From these course modules, you will learn all the fundamentals of building a SenchaTouch mobile web application with just JavaScript. You will learn how to leverage the Sencha Touch data and visual components to build world class mobile HTML5/CSS3 applications that can be deployed across multiple mobile platforms (IOS, Android, Blackberry, Windows 8 phone and others). Expect at the end of the course to be prepared to build high fidelity, high quality web applications based on a solid understanding of the fundamentals of Sencha Touch

About the author
About the author

Peter is the founder of Silicon Valley Code Camp and long-time software professional specializing in mobile and web technologies. He has also been a Microsoft MVP in ASP.NET since 2006.

More from the author
Building a Website with React and ASP.NET Core
Intermediate
3h 19m
22 May 2018
Securing Multi-tenant ASP.NET Web Apps
Intermediate
2h 37m
15 Sep 2017
ASP.NET Core Tag Helpers
Intermediate
2h 48m
20 Jun 2017
More courses by Peter Kellner
Section Introduction Transcripts
Section Introduction Transcripts

Sencha Touch Components and Documentation Overview
Components are really the core of Sencha Touch's library. They are what make up all the visual things that you see in Sencha whether it be a Button, TextBox, Carousel, Slider, Panel, Viewport, all those things are components. And what components have in common is they can render themselves on a page, they can center themselves on a page, they can enable and disable themselves, and they can render HTML. If you remember in our last example, we built a simple panel, and that panel essentially is a component. It's more than a component, but at its core it's a component, and we'll talk about what more means in a minute. So, let's take a look at extending our example that we did a few minutes ago. Let's take a look at the basic panel, but this time let's add some HTML to it and show that a component can render HTML with a template. That's one of the things a component can do. So, let's fire up Visual Studio and take a look.

Containers and Layout Management
Our next topic to talk about is containers. Well, we've spent a lot time talking about components, and a container actually is a component. So, at its core a container is simply a component that has extra juice. It inherits from component. Then it adds a few things. One thing it adds is the ability to add child components. That is, you saw in our previous section where we kind of loosely were using a panel and mentioned it as a component, but actually a panel is a container, which can contain other components. So, when we added items like buttons to the actual panel, which is a container, we did that in the items array, and that's what basically made the panel a container that we were adding components to. We didn't explain it that thoroughly, but that's essentially what we were doing. We were adding components to containers. We can remove the component from a container. We actually saw that in the previous section where we were looking at the event lifecycle. We did an Ext. Viewport. add to add a child component to the Viewport, the Viewport being a container, and then we did remove to remove it. And then finally they can have layout management. We briefly looked at that a little bit also in the last section. Remember we had a VBox where we displayed several components on top of each other. The only reason we could do that and we could do those alignment tricks, remember pack and align, was because we were putting those items in a panel, which is a container.

Visual Components
So, let's go and actually build an app that contains a bunch of visual components. So, the components we're going to demo are just a small subset of what's actually in the Sencha Touch package. We're going to use a TabPanel. We've seen that before. We're going to use a Panel. We've also seen that before. We're going to introduce a little video clip we can play. We're going to show the Button. We're going to use a button to launch actually the video, and we're going to use a TitleBar to hold the buttons that launch the video. And we're going to put up a Map just to show that we can.

Client Side Data Models And Stores
So we've touched the data side of Sencha Touch. We've made some simple data arrays, and we've associated them with lists, and we've put them in templates, but we really haven't looked at the looked at the power of Sencha Touch and how it deals with data sources either internally in JavaScript or externally from a server, so in this section we're going to talk about Sencha Touch data stores and models. We're going to first talk about stores because a store is essentially just a collection of models. Kind of confusing to say that, but once we get things defined it'll be more clear. So, we're going to progressively learn what a Sencha Touch store is and how to use it. We're going to start simple with just a JavaScript array, and we're going to work our way through all the different options stores can do. So, first let's define a store. A Sencha Touch store is just the static class Ext. data. Store, and it's a collection of records. We'll learn later that those are actually models in the Sencha Touch terminology, but let's just think of them as records. Just like a database has multiple rows, a Sencha Touch store has multiple records, or like I said earlier it has multiple models. So, we're going to use Visual Studio basically just as a JavaScript runner. We're going to use console. log to show how to create a store and some of the things we can do with it. We're then going to move to looking at those things visually with a DataView. And then finally we're going to upgrade the DataView because the DataView is limited in terms of grouping capability and some other things, and so the Ext. List derives from Ext. DataView and adds grouping, and the power of the store really comes through when you take a look at that.

Bringing It All Together Line Of Business (LOB) Code Camp App
So far in all the other modules we've taken little pieces of what will eventually be the Code Camp app and built them one step at a time. What we're going to do here is we're actually going to build the Code Camp app as if we are really building a production app and not do the simple shortcuts that we used previously just to put the information on a single HTML, to use the Ext onReady, but to actually build it the way we would build an app to do full compiling and packaging the way we would want if we were to actually build it for the app, any of the app stores. So, essentially what we're going to do is we're going to explain first where you need to find all the things to do this professional packaging. Then we're going to run a bunch of magic commands, and believe me these feel like magic commands. At the end of the day you don't really need to know what's happening inside your C# compiler or how the JavaScript runtime engine works. This is the same thing. But unfortunately Sencha makes us run a lot of kind of tricky commands to do what we need to do. Then I'm going to explain what it actually generated and show what the files are that important to us. And then finally I'm going to show you the steps to actually build this over and over again as you develop your app so that you can create both a testing build and a production build.