HTML5 development practices-Sencha Touch (2)

HTML5 development practices-Sencha Touch (2)

Generally, the basic layout of a page is the same for an APP. Below are several tabs used for selection to achieve page switching. Click different buttons to switch to different content. Sencha Touch can easily perform such operations.

First, we need to make sure that we want to use TabPanel here. As the name suggests, this component adds a tab at the bottom of the interface and can switch between pages through the tab. The basic code is as follows:

 

Launch: function () {Ext. viewport. add ({Xtype: 'tabpanel ', // select tabpanel as the main panel tabBarPosition: 'bottom', // This attribute sets the tab position items: [// define the page topic content {title: 'home', iconCls: 'home', cls: 'home', html: [// enter the html page topic code here]. join ("")}, //…]});}

Let's take a look at the features of this component in Sencha Touch. After defining this component, you can use tabBarPosition to set the position of the tab. Usually at the bottom. Next, we can use items to define the content contained in TabPanel. Each definition of an items not only defines the content of the tab button, but also the content of the corresponding page.

The code above is used as an example. Now we define a tab with the title of Home and set the icon for it. The content in the html attribute is written in the tab page. You can directly use the normal html code or the CSS style. It is bound with the corresponding button of the tab. In this way, we can define multiple tabs, which forms the basic framework of the entire app.

In normal development, to make the development process clearer and simpler, we can write them on one interface and add them to one interface to achieve the desired effect.