Sencha Touch: Working with Phone/Tablet Profiles

Sencha Touch application are build to use on wide variety of devices from phones to Tablets. Usually people prefer to use phone apps while out of the house to rapidly gather some information or to perform some action – often in a very short time. Writing separate apps for each platform is time consuming, error-prone and plain boring.

Thankfully, Sencha Touch’s Device Profiles give us a simple way to share between device types as much code as needed, while making it easy to customize behavior, appearance, and workflows for each device.

Note: If you are new to Sencha Touch then please refer to my post to get started with Sencha Touch

Setting Up Profiles

Step 01) Generate the initial start-up using following sencha Cmd command.
sencha generate app TechZoo c:\SenchaWeb\profile

Step 02) Go to profile folder and execute following commands to generate profiles.

sencha generate profile Phone repeat to create Tablet profile
sencha generate profile Tablet

if you go to profile directory, you will see sencha has created two js file, each containing configuration of its respective profile (phone and tablet)
This profile can have its own Model, View and controllers which can be invoked when sencha detect the current user profile.

Step 03) Create a Generic view called MainView which will serve as a Base Panel for Phone, Tablet views.

Now create Two views (one for each Profile) which extends our Main view to use the benefits of Inheritance.

Step 04) Update your app.js file to look similar to following.

Step 05) You are all set now to view your app in Phone, Tablet profile.

Start Sencha Cmd in-build webserver using sencha web start and hit http://localhost:1841/profile/index.html?deviceType=Phone URL. Note that you can view the tablet profile by passing deviceType=Tablet in above URL.

Output

Hit http://localhost:1841/profile/index.html?deviceType=Phone URL to view Phone profile in Action.

and use http://localhost:1841/profile/index.html?deviceType=Tablet URL to view Phone profile in Action.

happy Coding :)

View Tablet Profile / View Phone Profile



Sencha-Touch-Device-Profile Download

About the Author

has written 68 posts.

I Love Coding, Analyzing, Designing and doing it the right way. I am obsessed about learn anything new daily and sharing what I have learn each Day. This Blog is journey of my Zeal, going through step by step to the mountain of desire to become prefect. Google Wanna Hire me ?

Copyright © 2017 TechZoo - Technology Blog. All rights reserved.
Proudly powered by WordPress. Developed by 7Tech Solutions