In the 51cto topic "sencha touch getting started tutorial", we have a preliminary understanding of how to use sencha touch for development. In this series of tutorials, I will learn how to use sencha touch to develop a webpage Application Suitable for running on the iPad and explain the skills in detail. This article is intended for readers who have a certain degree of knowledge about sencha touch. If you are not familiar with the relevant content, check the topic of 51cto first.
Architectural Design
In this tutorial, you will be guided to use sench touch to design a homepage suitable for viewing on iPad and enjoy certain animation effects, let's first look at the final result we see on the simulator, as shown in:
In this example, the reader will learn how to use sencha touch to design basic iPad pages and the techniques and animation effects used in the design. Next we will start our learning journey.
Design page Diagram
First, let's take a look at the structure of our page. In order to help readers see the structure of the page clearly, we use different colors for the logo, such:
Framework page design
The following code encodes the index.html homepage:
<!DOCTYPE html>Here, we want to reference the CSS file and core file in sencha touch, and then here the first step, we name the JS file to be written as a index-a.js.
We start to write index-a.js step by step, the Code is as follows:
Ext.setup({ tabletStartupScreen: 'tablet_startup.png', icon: 'icon.png', glossOnIcon: true, });In Ext. setup, the sequence name is set and the size is set to 768*1024 pixels.
At the same time, in icon.pdf, icon.png is defined as the image of the application. Currently, only icon.png file names can be used. The glossonicon attribute specifies that the icon uses a glossy effect (set to true ). Next, we compile the onfunction method. The Code is as follows:
Ext.setup({ tabletStartupScreen: 'tablet_startup.png', icon: 'icon.png', glossOnIcon: true, onReady: function() { var header = new Ext.Panel({ height: 35, style:"background-color:lightblue;", html: "The info button and updated on date will go here." }); var masthead = new Ext.Panel({ height: 70, style:"background-color:blue;", html: "The masthead will go here." }); var sidebar = new Ext.Panel({ flex: 1, style:"background-color:red;", html: "The sidebar information will go here.", }); var stories = new Ext.Panel({ flex: 2, style:"background-color:green;", html: "The main story information will go here." }); var content = new Ext.Panel({ height: 899, layout: { type:'hbox', align:'stretch' }, items: [ sidebar, { xtype: 'component', height: 10, width: 10 }, stories ] }); rootPanel = new Ext.Panel({ fullscreen:true, style:"background-color:white", layout: { type:'vbox', align:'stretch' }, items:[header, masthead, content] }); }We will analyze the above Code one by one. First, the onready method is enabled when the page is loaded. Next, we define multiple pannel panel controls. The Panel function is to include other controls and form a relatively independent area. In the tutorial, we just fill in the color and text in the pannel to show the difference.
In the head panel, we noticed that the height is set. Because it is for iPad, a specific height is set here. If it is for other mobile devices, you can also set the actual height based on the actual situation. In the style attribute, you can set multiple values for the style attribute to be used. Here, only the background-color: blue color is set ). HTML sets text in the pannel.
In the next several pannel panels, the settings related values are similar to those of the head panel, which is not described in detail here. Note that in the sidebar panel, the flex attribute value is set to 1, and the stories Panel sets its attribute value to 2, we can see that the width of the sidebar is actually 1/2 of the width of the stories panel. If you want to set it to 1/3 of the stories panel width, you only need to set the flex attribute value in the stories panel to 3.
In the content panel, we demonstrate how to include multiple other panels in one panel. Here we set the height to 899 pixels. Note that if we add the heights of all the panels in the pannel, we can see that the height is 1004, rather than the Panel height of the iPad is 1024, because the height of 20pixels is occupied by the Status Toolbar of the iPad. In the layout attribute group, the type attribute is set to hbox, which indicates that the layout of controls in the panel is left-to-right, stretch indicates that the alignment of the control is to fill the size of the parent control in full. The slidebar and stories panels are listed in the items attribute list, and the section enclosed in braces is added here, the width and height are both 10. The xtype: component method is used here to demonstrate another method for creating controls. Of course, you can still use the pannel control here.
Finally, a large pannel Control Panel rootpanel is set. The full screen attribute (fullscreen: True) is set, and the background color is set to white. The layout mode is set to vbox, that is, three panel headers, masthead and content are placed vertically from top to bottom.
After running, the effect is as follows:
Design head pannel
Next, we try to modify the pannel of the header. When an image is added and the icon of the vertex header is implemented, a window is displayed. As shown in:
First, let's see how to embed an image in the header. The Code is as follows:
var masthead = new Ext.Panel({ html: '<center></center>', height: 70, });Next, we add a small pannel with the updated content. The Code is as follows:
var date = new Ext.Panel({ html: '<div class="date">Updated on: 05.06.11</div>', });Here we use the CSS format of dateto modify the index.html page to introduce a CSS style file:
<link rel="stylesheet" href="newsletter.css" type="text/css">Add another Info panel with an icon. The Code is as follows:
var info = new Ext.Panel({ html: '', height: 35, width: 35, });Because the default info icon of sencha touch is relatively large, a custom icon is used here and the size is 21*21 pixels, which is suitable for clicking.
Finally, we assemble the Code as follows:
var header = new Ext.Panel({ height: 35, padding: '10 20 0 20', layout: { type:'hbox', align:'start' }, items: [ info, { xtype: 'component', flex: 1 }, date ], });Note that the padding attribute is used here, which is, and respectively. Specifically, the distance between the info control and the leftmost part of the screen is 10 pixels, the image with the header is 20 pixels, while the pixel between the image and the control that represents the date is 0 (that is, close to). The last 20 represents the distance between the date control and the right side of the screen is 20 pixels. A component control is set between the info control and the date control to place images.
Next, we hope to achieve the following effect: When you click the small button in the info control, a window will pop up. Let's design this window first, as shown below:
var popup = new Ext.Panel({ floating: true, modal: true, centered: true, padding: 5, width: 500, height: 425, dockedItems: [ { xtype: 'toolbar', dock: 'top', title: 'APP Info', } ], items: [ { xtype: 'panel', centered: true, padding: 20, html: '<div class="infobox">You can fill this popup with whatever content you may like.</div>' } ]In the code above, the window popped up by setting the modal attribute is modal, that is, the exit, except that the other part of the window is not selectable, when any part outside the window is clicked, the pop-up window is closed. Padding is 5, and the Border width of the pop-up window is set.
In the dockeditems attribute list, the title bar attribute of the pop-up window is set. Here, the dock is top, indicating that the title bar is located at the top of the pop-up window. The items attribute list sets the attributes of the text section in the pop-up window.
After the pop-up window is completed, you need to write the relevant code in the event of the info button to open it. The Code is as follows:
info.on('afterrender', function(){ this.body.on('click', function(){ popup.show('pop'); }); });In the code above, after the page is fully loaded, a related click event processing function is added to the info button icon, with the content of which being Popup. Show ('pop ');
The above popup pop-up window display method is specified as pop. Of course, if you do not want to use the pop-up window effect, you can specify it as Popup. show () can also be used, or other effects can be used, such:
popup.show({type: 'slide', direction: 'down'});Summary
In the first part of this tutorial, I will explain how to use sencha touch to build basic page applications and some basic skills. In the next section, I will explain more complex animation techniques.
Turn: http://mobile.51cto.com/others-283272.htm
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
