Sencha Touch is a mobile application framework to develop user interface for mobile apps in this tutorial, please notify us at [email protected] Sencha Touch Tutorial in PDF - Learn Sencha Touch in simple and easy steps starting from basic to advanced concepts with examples including Overview. The Citybars example is not helping me much and vitecek.info Sencha-Expenses-Touch pdf is also done differently. I am stuck on.
|Language:||English, Spanish, Portuguese|
|PDF File Size:||15.53 MB|
|Distribution:||Free* [*Regsitration Required]|
A Hands-On Tutorial for Mobile Applications Developers. Book Version: What we will do in this book is build a Sencha Touch application. To accomplish. By using the EWD/Sencha Touch 2 tags, you can build mobile applications for iOS vitecek.info): an abbreviated way to define Container Pages In the subsequent examples of this tutorial, you should use these tools to. where she writes about IT careers, Ext JS, Sencha Touch, Sencha Architect, Java , and general .. export to PDF, and Excel that are not supported natively by Ext JS. Java environment variables: vitecek.info
Control Control is a config which is similar to ref which takes ref as key and the value as listen function, which is called to perform some tasks.
Routes Controller defines the route in which it is interested in. With the help of routes, we can link any part of the application to the route provided. Sencha Touch not only supports Blackberry. Sencha Touch login: In the above example.
Sencha Touch provides the facility to use ajax to load and store the data. In ajax, we can fetch and store data from the same domain. For example, if you are using a domain www. However, if you are at domain www. Even though Ajax has the restriction, Sencha Touch gives you the flexibility to exchange data between different domains, which we will learn in subsequent chapters. Simple Ajax Request Ext. There are different parameters passed in an ajax call.
First parameter is URL of the domain where the ajax request is made. Get is to only fetch data. POST is to create new data and save it. PUT is to update or replace the existing data on the server. Next parameter is params in which we send data in the form of JSON, which helps in fetching and storing data. Once the timeout occurs. Once the request is aborted. Sencha Touch Header parameter shows the type of data sent by the server for the request. Sencha provides the facility to make cross-domain requests.
As in the above example. As the request is sent. Modern browser provides a new feature CORS cross. The default time for timeout is 30 seconds. Based on that. Sometimes a request takes too long to respond back and a timeout occurs. If your webserver has CORS enables. If we do not define any success or failure. It is also possible to abort the request by calling. Callback in the most useful method which makes the whole ajax concept asynchronous.
Cross Domain Request Ajax request can be only in the same domain. Once we get the response. In the callbacks. If response. We can customize it by the timeout parameter passed in the ajax request.
As Sencha follows the architecture based on top of base. Model is the base class which we need to extend while defining any model. Mostly we use ajax Proxy proxy to load store data. Sencha Touch Description Model Model is basically a collection of data or fields. In store. Defining a Model Ext. Data packages are related to model.
Description It is a collection of model instances. Description It is basically responsible for loading data in store. In the following example. Following are the validators: Ensures these is no empty value for the name field. Syntax validations: Mainly we define fields in model which are of the following types: Limits the length of the field. Ensures we do not allow the values which are defined in the list array.
Ensures only the values which are defined in the list. Ensures the field value is as per the given expression. Sencha Touch Fields Fields are to store a piece of information and collection of which is called model. It has two parameters. Store base class is Ext. Stores can be static and dynamic as well. In dynamic store. Static Store Ext. In a static store. To perform sorting locally.
Proxy The base class for proxy is Ext. Filter in key value pair as property be your field name and value be your value to be filtered. There are two types of proxies: Server Proxy Server proxies handle data from the remote server using Ajax.
Json data. Proxies can be written in model and store anywhere. Grouping can be performed with groupField in which we provide a field name based on which the grouping has to be done. Proxy is used by Models and Stores to handle the loading and saving of Model data.
Desktop Theme Consider your very first Hello World application. You can add different themes in place of classic theme and see the difference in the output based on the device we are using for the application.
The following CSS from the application is used for desktop theme. This is done simply by replacing the theme CSS file as explained in the following example.
Remove the following CSS from the application.
Sencha Touch This will produce the following result: Windows Theme Consider your very first Hello World application. Sencha Touch html: Remove the following CSS from the application: Based on the active profile. Sencha Touch helps us in this regard. We can have multiple devices as: We can declare device profile while writing an application code. Once it is done. Controller's init function Ext. Take a look at the following code to check where and how the different launch and init functions can be defined.
Sencha Touch Writing a simple tablet profile Ext. If the device is a tablet then phone profile's isActive function will return false and tablet profile's isActive function will return true and dependency tabletView will be loaded. Launch Process One more point to be noticed here is when we have profiles in the application. If the device is active. As we can see in profile.
As mentioned in the above example. Both profile and application's launch functions are optional. Application's launch function Ext. Profile's launch function Ext. Sencha Touch init: Application Level Dependencies Here. StudentsStore etc. The above way of declaration not only loads the file. The path of the other files will be: Once the stores are loaded. After loading the controller.
Profile-specific Dependencies When we are using profiles in an application. Profile specific dependencies are declared in the profiles itself instead of the application level declaration. Sencha Touch controllers: Cview External Dependencies We can specify the dependencies outside the application by giving fully qualified names of the classes as: Dependencies get loaded irrespective of the profile being active or not.
It is always good to keep modularity in larger applications. Nested Dependencies When we have larger application we have multiple controllers. For that.
In the above case. Sencha Touch In the above case. RIMTable system. BlackBerry system. This function will return true if you are using Android operating Ext. Method Description This function will return true if you are using webos operating Ext. Linux system. MacOs This function will return true if you are using Mac operating system. All the methods mentioned below can be checked in. Operating System Ext. This function will return true if you are using Linux operating Ext.
This function will return true if you are using BlackBerry operating Ext. Windows system.
Sencha Touch provides different functions to get information specific to the environment. This function will return true if you are using windows operating Ext. Android system. All the following methods return Boolean value. This function will return true if you are using IOS operating Ext. IE browser. Method Description Ext. FF it will return false. This function Ext. This function returns true if we are using Opera browser. This function returns true if we are using Safari browser.
Safari will return false. Chrome it will return false. This function returns true if we are using FireFox browser. Opera it will return false. This function returns true if we are using Chrome browser. This method returns true if the browser supports Ext. DeviceMotion the device motion feature. This method returns true if the browser supports classList feature of html5 which is used to add.
CssAnimations animations of css3. Audio audio tag feature of html5. CssTransforms css transform feature of css3. Method Description This method returns true if the browser supports Ext. History the history feature of html. Trident and Other. Css3dTransforms css 3d Transform feature of css3. It returns the browser engine name WebKit. Features Ext. Canvas canvas tag feature of html5. Orientation This method returns true if the browser can detect device orientation.
Geolocation the Geolocation feature of html5. CssTransitions transition feature of css3. This method returns true if the browser supports html 5's svg feature. Touch feature. OrientationChange This method returns true if the browser can detect the change in orientation of the device.
This method returns true if the browser supports vml. This method returns true if the browser supports WebSockets. Web sql database is a web page api for storing data Ext. This method returns true if the browser supports web Sql Database.
Range Range is a type of html input tag for range slider element. Web socket is basically a communication protocol for computers which supports two-way Ext. Vml an xml-based markup language. This method returns true if the browser has Touch Ext. Video html 5 video tags. SqlDatabase on which we can perform query operations. WebSockets communication between the clients and the server. Svg Svg stands for Scalable Vector Graphics.
Vml stands for vector markup language. Methods of Writing Events Following are the methods of writing events. Writing listener in Sencha Touch We will add the listener in the previous program itself by adding listen property to the panel.
This way we can also write multiple events in listeners property. Sencha Touch myButton. The other way to attach events is as follows: Attaching an Event Later In the previous method of writing events. Following example explains how to write custom events. Sencha Touch Once the page is loaded and the document is ready. Here we have written the custom event 'myEvent' and we are firing events as button. Fit 3 In this layout. Layout hBox Description hbox: This layout allows the element to be distributed in a horizontal manner.
Every time only one tab is visible and each tab is considered as a different component. This is one of the commonly used layout. Syntax Following is the simple syntax to use hbox layout. That could be horizontal. Tabs will be displayed on top of the container. Card TabPanel 4 This layout arranges different components in tab fashion. Sencha Touch has different layouts defined in its library though we can always write custom layouts as well.
Sencha Touch Example Following is a simple example showing the usage of hBox layout. This layout allows the element to be distributed in a vertical manner.
Syntax Following is the simple syntax to use vbox layout. Sencha Touch fullscreen: In this layout. Syntax Following is the simple syntax to use fit layout. This layout arranges different components in tab fashion. Syntax Following is the simple syntax to use card layout. Sencha Touch name: Look at the following example for back button functionality. For complete code base. Nested List Description This is to create a nested list view. It also provides routes functionality.
Syntax Following is the simple syntax to add a nested list. It has the simplest back button functionality. Based on the URL provided in the browser window.
This example shows the nested list which is nothing but a list inside a list. Sencha Touch Example Following is a simple example showing the usage. Advance Routing Sometimes we have advance parameters which include comma. To solve this problem.
Sencha Touch provides conditional routing where we can specify the condition of what type of data the parameter should accept. Sencha Touch Routing Simplest example of routes.
We can provide parameters in the URL and based on the specific parameter the function can get called. As shown in the above example. Sencha Touch gives us freedom to write routing in the main controller and the called function to be written in all the profiles with their profile specific ones. To resolve this issue. Sencha Touch conditions: There may be possibilities that different profiles may have different functionalities for the same URL.
Both the profiles have showLogin function with different code specific to the profile. This way we can share the same URL across multiple profile devices with their specific functionalities. As the above example shows. This is to provide an exact percentage of data transferred in Ext. File New file field is added to give more clarity about the type of field.
Following is the function to check whether the browser supports XHR2. XHR2 in Sencha Touch provides the progress bar feature.
XHR2 is xmlHttpRequest level 2. For any web application.
XHR2 is newly added so we need to check if the browser supports it or not. FileInput This to provide FileInput. Sencha Touch Following are the examples to send simple ajax request with and without parameter and uploading files using ajax. Panel' ]. Simple Ajax request without parameters. Sencha Touch ui: If you are using the chrome browser in the developer tool.
In this example. The above example shows the success ajax call as the URL mentioned is correct. Compare this and the previous example. FileInput' Sencha Touch ]. This example shows how to upload data using ajax call.
Component Carousel 1 This UI component is used to display the carousel. List 2 This UI component is used to display lists. Syntax Following is the simple syntax to add carousel. Syntax Following is the simple syntax to add list. Syntax Following is the simple syntax to add form. Sencha Touch This is to create a form view.
Charts Simple draw 1 This component is used to draw circle. Pie chart 2 This UI component is used to display Pie chart. Sencha Touch This UI component is used to display bar chart. Sencha Touch radius: Syntax Following is the simple syntax to add pie chart.
Syntax Following is the simple syntax to add line chart. Sencha Touch lineWidth: Syntax Following is the simple syntax to add bar chart. Sencha Touch launch: Syntax Following is the simple syntax to add area chart.
Sencha Touch series: Following is a simple example showing the usage. Syntax Following is the simple syntax to add a tab panel. Sencha Touch Navigation Description This is to create a navigation view. Syntax Following is the simple syntax to create a navigation form. We use data view basically when we want to show the same component multiple times. Syntax Following is the simple syntax to create a data view. Sencha Touch items: Use the following steps to create iOS certificate which is the same for Windows.
Enter your details and click OK. You can use an app builder to create CSR. Click the cogwheel icon and select option. One certificate can be used for multiple applications. Then select iOS cryptographic identity and click create. Following are the steps to create and install a native application on the device running iOS for development and testing.
Following are the links for native packaging concepts of Sencha Touch. Following are the steps to run an application on an iOS device. Mac OS. You should be logged in to the app builder and should have your app code running in it. This is a prerequisite to create an iOS certificate.
Step 1: I have to say, this is a great reference! We will cover a lot of topics surrounding Ext JS 6 and by the end you should have a solid understanding of the latest framework version, including:.
This eBook and its accompanying resources are packed with information, tutorials and step-by-step walkthroughs on all the important aspects of getting up to speed with Ext JS 6. Read the outlines of each chapter below to find out exactly what you'll be getting!
A quick rundown of the history of Ext JS and what we can expect in this release, including a summary of its new features. Dive into the new framework's architecture and key concepts, learning how Universal apps work and how we go about developing them. Discover the options for tailoring your applications to its environment using profiles and configurations. A deep dive into how to structure and architect Universal applications, including code sharing, Fashion and Live Update.
A detailed walk-through and analysis of the upgrade process, bring complementary Ext JS 5 and Sencha Touch apps together into a single Universal app. Watch me go through and discuss the process of upgrading and combining an Ext JS 5 and Sencha Touch application into a single cross-platform Universal application.
The new Live Update feature makes development much faster - find out how you set it up and make it work for you. You will receive 1 month access to my clinic sessions where you can ask and discuss your project and specific problems you are having. These hour-long sessions are run every week. The book has been really well received by the community and I'm delighted to have heard such great comments about it.
Whenever I am introduced to new technologies, my brain constantly comes up with questions - I found that these were answered as I thought of them in the next paragraph, giving the book a really easy read. The book gives great insight on how to get started with Ext JS 6 and how to combine the 2 toolkits 'classic' and 'modern'. It provides great examples and clear practical information. A must have for any Ext JS developer.
Got the book and finished it in one seating. It's about page long but filled with very juicy stuff. After reading this book, it gave me clear guidelines on how to create a Universal Web Application. It really answered all the questions I've had for ExtJS 6. The book is a very good reference and I will look inside from time to time so I quickly get the info I am after.
Stuart Ashworth is a web and mobile consultant, developer and an all-round web geek currently living in Glasgow, Scotland, with his wife Sophie and wee dog Meg.
There's a package perfect for you depending on your budget and the level of detail you want to get into. If you have any questions or comments on the book or about what package is best for you, drop me an email at stuart stuartashworth. If you want more Sencha related resources head over to my website at www.
I look forward to hearing from you! A practical guide to understanding and getting started with Sencha's Ext JS 6. We will cover a lot of topics surrounding Ext JS 6 and by the end you should have a solid understanding of the latest framework version, including: Understand the key concepts introduced with Ext JS 6 and how they apply to when developing applications.
Learn how to integrate the new features and components introduced in Ext JS 6 into your applications. Discover how to customise an application for different environments using Application Profiles.
Learn how to architect Universal Applications, including how to identify and structure shared code.