HTML5 Development--sencha Touch Chapter (2)

Source: Internet
Author: User

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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.