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.