Sencha Touch development example: notepad application (1) (1)

At present, mobile application development is in full swing, such as Android and iOS applications. Developers are faced with the challenge of familiarizing themselves with the technical knowledge of the platform they use when developing wireless applications based on different operating platforms. Therefore, there are many cross-mobile development frameworks based on the HTML 5 standard. Developers only need to master the development skills of HTML 5, CSS and Javascript and related frameworks.

In the Sencha Touch project, we can download the latest version. This series of tutorials will be divided into four sections to explain how to use Sencha Touch to design a notepad application. You can simply record notes and save them on mobile devices.

Application

The main functions of the system include::

1) create a notebook content

2) edit the notebook content

3) Delete the notebook content

4) Save the notebook content in the mobile device application.

In this series of tutorials, it is better for readers to have basic development knowledge of ext js framework. In the first lecture, I will explain how to design the application framework.

Design Homepage

First, let's take a look at how to design the form that users use to create and edit notes. It can be roughly designed as follows:

You can see that there is a Save button and a delete button (a spam icon) on this page, corresponding to the elements in the Sencha Touch framework, as shown in:

The following figure shows the notebook list page:

The framework elements in Sencha Touch are as follows:

In addition, you also need to use a layout file, which is a bridge between the communication memo list page and the notebook page registration. Here we use the card layout of EXT for layout. The relationship between the two interfaces is as follows: