--- title: Mobile Web Development using Sencha description: In this blog, The writer takes you to various aspects of web development and delves deep into web application development using Apache Cordova platform and Sencha Touch library and its key features and functionalities. image: https://blog.e-zest.com/hs-fs/file-3441636592-jpg/blog-files/mobile-web-development-companies.jpg --- [![e-Zest logo\_An accion lab company\_Colour](https://blog.e-zest.com/hubfs/images/Logos%20with%20Tagline/Corporate/SVG/e-Zest%20logo_An%20accion%20lab%20company_Colour.svg "e-Zest logo_An accion lab company_Colour")](https://www.e-zest.com/) - [WORK](https://www.e-zest.com/our-work) - [SERVICES](https://www.e-zest.com/our-services) - [Product Engineering](https://www.e-zest.com/digital-product-engineering-services) - [Enterprise Data Services](https://www.e-zest.com/enterprise-data-services) - [Digital Commerce](https://www.e-zest.com/digital-commerce-services) - [Digital Operations](https://www.e-zest.com/digital-operations) - [Digital Consulting](https://www.e-zest.com/digital-transformation-consulting-services) - [Digital Experience Design](https://www.e-zest.com/digital-experience-design) - [INSIGHTS](https://blog.e-zest.com/) - [CAREERS](https://www.e-zest.com/careers) - [ENTERPRISE DATA SERVICES](https://www.e-zest.com/enterprise-data-services) - [GENERATIVE AI](https://www.e-zest.com/generative-ai) - [Healthcare](https://healthcare.e-zest.com) - [Contact Us](https://www.e-zest.com/contact-us) - ![Elevating Product Engineering with AI and ML](https://blog.e-zest.com/hubfs/Elevating%20Product%20Engineering%20with%20AI%20and%20ML.jpg) [BLOGS](https://blog.e-zest.com) #### Elevating Product Engineering with AI and ML As technology evolves and customer choices broaden, there is an increasing ... [Read more](https://blog.e-zest.com/elevating-product-engineering-with-ai-and-ml) - ![e-Zest – An Accion Labs Company gets Recognition as a Contender in the ISG Provider Lens™ Study on Digital Engineering Services 2024](https://blog.e-zest.com/hubfs/e-Zest%20%E2%80%93%20An%20Accion%20Labs%20Company%20-%20Gets%20Recognition%20as%20a%20Contender%20in%20the%20ISG%20Provider%20LensTM%20Study%20on%20Digital%20Engineering%20Services%202024.jpg) [NEWS](https://blog.e-zest.com/news) #### e-Zest – An Accion Labs Company gets Recognition as a Contender in the ISG Provider Lens™ Study on Digital Engineering Services 2024 We are delighted to announce that e-Zest – An Accion Labs Company has been ... [Read more](https://blog.e-zest.com/news/e-zest-an-accion-labs-company-gets-recognition-as-a-contender-in-the-isg-provider-lens-study-on-digital-engineering-services-2024) - ![e-Zest Solutions supports Digital Pune Mission](https://blog.e-zest.com/hubfs/blog-files/Digital%20Literacy%20Bus%20e-Zest.png) [CSR](https://blog.e-zest.com/csr) #### e-Zest Solutions supports Digital Pune Mission **Pune, India:** e-Zest Solutions, a leading digital technology innovation ... [Read more](https://blog.e-zest.com/csr/e-zest-solutions-supports-digital-pune-mission) - [Work](https://www.e-zest.com/our-work) - [Services](https://www.e-zest.com/our-services) - [Insights](https://blog.e-zest.com) - [Careers](https://www.e-zest.com/careers) - [Enterprise Data](https://www.e-zest.com/enterprise-data-services) - [Generative AI](https://www.e-zest.com/generative-ai) - [Innovations](https://www.e-zest.com/innovations) - [Healthcare](https://healthcare.e-zest.com) - [About](https://www.e-zest.com/about-us) - [Contact](https://www.e-zest.com/contact-us) - [Blog](https://blog.e-zest.com/) - [News](https://blog.e-zest.com/news) - [CSR](https://blog.e-zest.com/csr) - [![Linkedin Icon](https://blog.e-zest.com/hubfs/icons/linkedin_icon_white.svg)](https://www.linkedin.com/company/e-zest-solutions/) - [![Twitter Icon](https://blog.e-zest.com/hubfs/twitter-logo-silhouette%20(5).svg)](https://twitter.com/ezest) - [![Facebook Icon](https://blog.e-zest.com/hubfs/facebook-app-logo%20(4).svg)](https://www.facebook.com/61259256638) - [![Instagram Icon](https://blog.e-zest.com/hubfs/instagram-logo%20(4).svg)](https://www.instagram.com/ezestsolutions/) - [![Youtube Icon](https://blog.e-zest.com/hubfs/icons/youtube_icon_white.svg)](https://www.youtube.com/user/ezestcorporate) [![Go to top icon](https://blog.e-zest.com/hubfs/AA%20Assets/top%20button.svg)](https://blog.e-zest.com/mobile-web-development-using-sencha#top) Hit enter to search or ESC to close Insights e-Zest members share technology ideas to foster digital transformation. - [Blog](https://blog.e-zest.com) - [News](https://blog.e-zest.com/news) - [Podcasts](https://www.e-zest.com/podcasts) - [Healthcare](https://blog.e-zest.com/healthcare) - [CSR](https://blog.e-zest.com/csr) - [Whitepaper](https://blog.e-zest.com/whitepaper) - [Playbook](https://blog.e-zest.com/playbook) - [Media Kit](https://www.e-zest.com/media-kit) # Mobile Web Development using Sencha [Rupali Bhangale](https://blog.e-zest.com/author/rupali-bhangale) Nov 19, 2015 [Mobile Development](https://blog.e-zest.com/topic/mobile-development) [Technology](https://blog.e-zest.com/topic/technology) - - - - Before starting how to use sencha for web development let’s understand what is Web Development and it’s advantages. ![sencha.jpg](https://blog.e-zest.com/hubfs/blog-files/sencha.jpg "sencha.jpg") A **web** **application** or **web** **app** is any program that runs in a web browser. It is created in a browser-supported programming language (such as the combination of JavaScript, HTML and CSS) and relies on a web browser to render the application. **Why to prefer Web Development?** [![mobile web development companies](https://blog.e-zest.com/hs-fs/file-3441636592-jpg/blog-files/mobile-web-development-companies.jpg?width=259&height=194&name=mobile-web-development-companies.jpg)](https://blog.e-zest.com/hs-fs/file-3441636592-jpg/blog-files/mobile-web-development-companies.jpg) | Native | Hybrid | | --- | --- | | Platform specific | Platform independent | | Respective Development tools | Tools – TML%, CSS3, JS | | Time Consuming | Quick development | | Expensive Development | Less Development cost and direct access to native API’s with Cordova. | To create web applications we need a Apache Cordova platform and Sencha Touch library.   **Apache** **Cordova** [![apache cordova](https://blog.e-zest.com/hs-fs/file-3441636602-jpg/blog-files/apache-cordova.jpg?width=340&height=148&name=apache-cordova.jpg)](https://blog.e-zest.com/hs-fs/file-3441636602-jpg/blog-files/apache-cordova.jpg) Apache Cordova is a set of device APIs that allow a mobile app developer to access native device function such as the camera or accelerometer from JavaScript. Combined with a UI framework such as jQuery Mobile or Dojo Mobile or Sencha Touch, this allows a smartphone app to be developed with just HTML, CSS, and JavaScript. When using the Cordova APIs, an app can be built without any native code (Java, Objective-C, etc) from the app developer. Instead, web technologies are used, and they are hosted in the app itself locally (generally not on a remote http server). And because these JavaScript APIs are consistent across multiple device platforms and built on web standards, the app should be portable to other device platforms with minimal to no changes. Apps using Cordova are still packaged as apps using the platform SDKs, and can be made available for installation from each device's app store. Cordova provides a set of uniform JavaScript libraries that can be invoked, with device-specific native backing code for those JavaScript libraries. Cordova is available for the following platforms: iOS, Android, Blackberry, Windows Phone, Palm WebOS, Bada, and Symbian. **Sencha Touch** [![sencha touch](https://blog.e-zest.com/hs-fs/file-3441636612-jpg/blog-files/sencha-touch.jpg?width=225&height=224&name=sencha-touch.jpg)](https://blog.e-zest.com/hs-fs/file-3441636612-jpg/blog-files/sencha-touch.jpg) **Sencha Touch** is a user interface (UI) JavaScript library, or framework, specifically built for the Mobile Web. It can be used by Web developers to develop user interfaces for mobile web applications that look and feel like native applications on supported mobile devices. Sencha Touch includes a set of [graphical user interface](https://en.wikipedia.org/wiki/Graphical_user_interface) GUI-based [controls](https://en.wikipedia.org/wiki/GUI_widget) (or components) for use within mobile web applications. These components are optimized for touch input. The components are: 1. Buttons with device specific themes and effects; 2. Form elements such as text fields for email, date picker, and address; sliders, selectors, and combo-boxes; 3. List component with momentum-scrolling and an index bar; a minimal icon set; 4. Toolbars and Menus; 5. Movable tabs; 6. Bottom toolbars; 7. Map component with support for multi-touch gestures such as pinch and zoom. All the components can be themed according to the target device. This is done using [Sass](https://en.wikipedia.org/wiki/Sass_(stylesheet_language)), a stylesheet language built over CSS. Sencha Touch has eight in-built transition effects including slide over or under the current element, pop, flip, and cube. It supports common touch gestures built from [touch events](https://en.wikipedia.org/wiki/DOM_events), which are [Web standards](https://en.wikipedia.org/wiki/Web_standards) but supported only by [Android](https://en.wikipedia.org/wiki/Android_(operating_system)), [iOS](https://en.wikipedia.org/wiki/IOS), and some touch enabled devices. These are tap, double tap, swipe, scroll, and pinch. **Getting Started with Sencha touch** **Step 1 :** **Install [NodeJS](http://nodejs.org/)** . **Step 2 :** **Install Apache Cordova** ( Works for all platform ) To package the Sencha Touch app using Cordova install it using following command in terminal **npm install -g cordova** **Step 3 : Generate Sencha Touch app** Generate the Sencha Touch app by following below commands: In sencha touch folder **Touch :\> sencha generate app AppName folder/to/save/AppName(path)** **Step 4 : Enable Cordova support to app** To enable the Apache Cordova support to generated app change to app directory and run the following command, **AppName:\>sencha cordova init com.package.name AppName** After running above command you will see that sencha build process added following piece of code to your app.json file [![app.jason file in mobile development](https://blog.e-zest.com/hs-fs/file-3441636622-png/blog-files/jason-file.png?width=1029&height=363&name=jason-file.png)](https://blog.e-zest.com/hs-fs/file-3441636622-png/blog-files/jason-file.png) **Step 5: Change the app.json file property for building native package** Uncomment the following line for packaging iOS and Android //"platforms": "ios android", **Note :** You can edit this configuration to package for specific platform **Step 6 : Prepare native package, Install app and have native feel** To prepare the native platform package run the following command in terminal, **AppName:\> sencha app build –run native** Basic app will appear on your device as shown below:- [![sencha touch app development services](https://blog.e-zest.com/hs-fs/file-3441636632-png/blog-files/sencha-touch-app.png?width=342&height=535&name=sencha-touch-app.png)](https://blog.e-zest.com/hs-fs/file-3441636632-png/blog-files/sencha-touch-app.png) Sencha Touch can be used along with Cordova or Phonegap or its own native packager, to create applications native to a mobile device that have access to currently native-only components, and which can be made available from app marketplaces. As of Sencha Touch 2.3, Cordova is the favored packaging technology. I hope this blog article helped you with a clearer understanding of Sencha touch. I would like to hear your views on the subject and blog and expecting your suggestions if any.   - - - ### Similar Blog [![Offline Avenues in Blended Learning](https://blog.e-zest.com/hubfs/blog-files/blended_learning.jpg) Offline Avenues in Blended Learning **Time. Place. Path. Pace.** By Abhishek Mishra Dec 31, 2015](https://blog.e-zest.com/offline-avenues-in-blended-learning) [![Technology news handpicked for you - Week 42, 2015](https://blog.e-zest.com/hs-fs/file-3520297258-jpg/blog-files/tech-digest-42.jpg) Technology news handpicked for you - Week 42, 2015 **Dell-EMC merger aimed at the cloud** By Corporate Oct 16, 2015](https://blog.e-zest.com/technology-news-handpicked-for-you-week-42-2015/) [![Technology news making headlines - Week 41, 2015](https://blog.e-zest.com/hs-fs/file-3520297043-jpg/blog-files/tech-digest-41.jpg) Technology news making headlines - Week 41, 2015 **Amazon announces slew of product offerings at AWS re:Invent 2015** By Corporate Oct 10, 2015](https://blog.e-zest.com/technology-news-making-headlines-week-41-2015/) [![Google makes all the right moves at the Nexus event](https://blog.e-zest.com/hs-fs/file-3419272821-jpg/blog-files/nexus-event.jpg)](https://blog.e-zest.com/google-makes-all-the-right-moves-at-the-nexus-event/) [Google makes all the right moves at the Nexus event](https://blog.e-zest.com/google-makes-all-the-right-moves-at-the-nexus-event/) [The Nexus event has excited all the Android fan boys (including me) for the right reasons. While the](https://blog.e-zest.com/google-makes-all-the-right-moves-at-the-nexus-event/)[two new Nexus phones](http://www.google.com/nexus/) – Nexus ... By Shashank Venkat Sep 30, 2015 ## Helping Organizations Thrive in the Digital Age [Contact Us](https://www.e-zest.com/contact-us) - [About](https://www.e-zest.com/about-us) - [Services](https://www.e-zest.com/our-services) - [Work](https://www.e-zest.com/our-work) - [Insights](https://blog.e-zest.com/) - [Healthcare](https://healthcare.e-zest.com/) - [Accion Labs](https://www.accionlabs.com/) - - - - - - Dallas - Detroit - Hannover - Vienna - London - Pune © 2025 e-Zest Solutions - [Privacy Policy](https://www.e-zest.com/privacypolicy) - [Cookie Policy](https://www.e-zest.com/cookie-policy) Contact us Contact us e-Zest is a leading digital innovation partner for enterprises and technology companies that utilizes emerging technologies for creating engaging customers experiences. Being a customer-focused and technology-driven company, it always helps clients in crafting holistic business value for their software development efforts. It offers software development and consulting services for cloud computing, enterprise mobility, big data and analytics, user experience and digital commerce.