HTML5 Development--sencha Touch Chapter (2)

General app, the basic layout of the page is the same, the following is a few tab, to choose to achieve the role of page switching. Click on the different buttons, the interface will switch to different content. This can be done easily in Sencha touch.

First, we want to make sure we're using TabPanel to build here. As the name implies, the component adds tab to the bottom of the interface and can tab through the page. The base code is as follows:

Launch:function () {         Ext.Viewport.add ({                   Xtype: ' TabPanel ',//select TabPanel as the main panel                   tabbarposition: ' Bottom ',/ /This Property sets tab position                   items:[                            //define page theme contents                            {         title: ' Home ', Iconcls: ' Home ',         cls: ' Home ',         html:[ Here write the HTML page subject part code].join ("")},//...]});}

Let's think about the features of the component in Sencha touch, and after defining the component, you can set the tab location by Tabbarposition. Generally at the bottom. Next, we can use items to define what is contained in the TabPanel. When you define an item, you define not only the contents of the tab button, but also the content of the page it corresponds to.

For example, in the code above, we now define a tab with the title home, and also set the icon for it. The content inside the HTML attribute is written in the tab page. You can write directly using normal HTML code, or you can include CSS styles. It is bound to the button that corresponds to tab. In this way, we can define multiple tab interfaces and form the basic framework of the entire app.

In the normal development, in order to make the development process more clear and simple, we can write an interface, and finally add them to an interface, to achieve the effect we want.

HTML5 Development--sencha Touch Chapter (2)