MVC in Sencha Touch & ExtJS

Jul 3, 2011Download as KEY, PDF1 like2,077 views

The document discusses two JavaScript frameworks from Sencha - Sencha Touch for building mobile apps using HTML5, CSS and JS, and ExtJS for building robust desktop apps. It provides an overview of their features and architectures, then demonstrates building a sample rock climbing app using both frameworks to showcase their capabilities.

Writing Mobile & Desktop
Apps with Sencha

@aaronwhite

Co-Founder
CTO

(Boundless Learning is a funded, stealth-mode
education startup doing *big* things)

Sencha

➡Sencha Touch
• HTML5 JS Framework for Mobile

➡ExtJS
• Robust JS Framework for Desktop

Sencha Touch

➡HTML5 / CSS3 / JS
➡Works with:
• iOS 3+
• Android 2.1+
• Blackberry 6+

➡Touch-centric

➡Tiny (120kb)
➡ Works w/ PhoneGap
➡MVC

MVC++

Model Store Proxy

View Controller

Example App!

RockLog
JS & rock-climbing go hand-in-hand, they’re both
dangerous if you don’t know what you’re doing

git checkout boilerplate
(basic file structure, basic app)

git checkout ﬁrst-controller
(viewport, routes, controller, view)

git checkout second-controller
(listeners, dispatching)

git checkout show-me-the-data
(models, store, list display)

git checkout view-record
(switching views, templating)

git checkout add-record
(forms, adding data to store)

Next Steps

➡Merge & minify
➡Add Proxy to Store
➡PhoneGap

ExtJS

➡Desktop Browser JS Framework
➡Robust
• Cross-browser
• Mature Class-system
• Thorough MVC
• Charting

➡Tools, Editors, etc
➡Frankly, it’s badass (story!)

MVC++

Model Store Proxy

View Controller

(But way better)

RockLog

Desktop
Now I’m just showing off

Next Steps

➡Merge & minify
➡Add Proxy to Store
➡All
sorts of bells &
whistles

GrapeCity has been developing JavaScript products for over six years. The browser landscape has changed greatly since we started and we have learned a lot along the way. Today, we manage Wijmo 5, a suite of JavaScript UI controls, specializing in a high-performance datagrid and powerful charts. In this session, we will give you a look inside our project. We will go over the collections of tools, frameworks, languages and patterns that we have refined over the years. You walk away from this session with useful tips for managing large-scale JavaScript applications.

AngularJS - GrapeCity Echo TokyoChris Bannon

In this session we will talk about the AngularJS application framework. What is it, why is it so successful, how does it help developers, how can you start using it today, how will it evolve? Introduction - a brief history of the evolution of HTML and JavaScript - why do we need application frameworks? Angular 1.x - what is it? - what are the main design goals? - what makes it different from other frameworks? - how does it work? example: the simplest Angular application - the power of custom directives example: a simple validation directive example: a simple Google Maps control directive Angular 2.0 - what is it? - how will it improve upon Angular 1.x? - when will it become available? - will it change everything?

Visualizing large data sets with wijmo enterprise webinarRoss Dederer

This document provides a summary of a presentation about visualizing large data sets with Wijmo Enterprise. The presentation covers an introduction to Wijmo, challenges of web development today, techniques for visualizing large datasets using Wijmo charts and grids, and includes live demos. Specifically, it discusses how to optimize charts for large datasets, use grids to visualize large amounts of data, handle the data layer with CollectionView, and visualize qualitative data with annotations and drill-down capabilities.

Wijmo 5 - GrapeCity Echo TokyoChris Bannon

In this session we will talk about the Wijmo 5 control suite. What is it, what makes it unique, how does it help developers, how can you start using it today, how will it evolve? Introduction - what is Wijmo 5? (next-generation of HTML/JS Controls) - modern browsers: EcmaScript 5/IE9 - no jQuery, no jQueryUI - TypeScript: object-orientation, type-safety, productivity - Interop (Angular 1.x, Knockout, more to come...) Wijmo Infrastructure - Events - Control - CollectionView (easier porting from Silverlight) - Others (Globalization, HttpRequest, Animations, etc: no jQuery) FlexGrid - XAML vs Angular (easier porting from Silverlight) - features, size, performance - extensibility: extend class, add functionality examples: filter, grouping, row details, etc FlexChart - multiple types - features, size, performance - extensibility: extend class, add functionality examples: financial, ranges, analytics, etc Others (time permitting...) - Input, Gauges - features, size, performance

SPTypeOutGrid: Knockout + TypeScript + SharePoint 2010 = Cool Grids in List F...Sam Larko

This document provides an overview of using TypeScript, Knockout, and model-view-viewmodel (MVVM) frameworks to create editable grids in SharePoint list forms. It introduces TypeScript as a strongly typed superset of JavaScript, Knockout as a library for two-way data binding, and how MVVM frameworks like Knockout separate the model and view. The document then demonstrates editable grid code using these technologies and provides resources for further information.

AspFred Rodriguez

Web: the future is now (GUADEC 2013)Igalia

By Claudio Saavedra. Now that WebKit2 is a core part of Web, the GNOME community has finally closed the gap and can be proud to present its users with a browser of world-class quality. But WebKit2 is just the start: there are plenty of challenges ahead and this is the best time for us to embrace them. In this talk we discuss the state of Web, the advantages and possibilities that WebKit2 brings to the browser, and our plans for the future.

AngularJStwopoint718

ExtJS Sencha TouchBohdan Dovhań

ExtJS is a JavaScript framework for building rich, interactive web applications. It originated as an extension to the YUI library created by Jack Slocum to include custom components like grids. It later became an independent framework with its own complete set of GUI components. In 2011, ExtJS 4.0 introduced a native Model-View-Controller architecture. The company behind ExtJS, Sencha, also produces Sencha Touch for building mobile apps using similar components and patterns as ExtJS.

SEO and MarketingAmith

This document discusses search engine optimization (SEO) and marketing. It begins with defining SEO and its importance for driving website traffic. It then covers key topics like search engines, on-page and off-page optimization techniques, SEO dos and don'ts, and tools like Google Analytics and Webmaster Tools. The goal of SEO is to get a site ranked highly in organic search results by optimizing pages with target keywords, links, and other on-page and off-page factors. Regular tracking and analysis of metrics is also recommended.

Kop ecarlosdom77

MVC In Sencha TouchAmith

This document provides an overview of MVC (Model View Controller) architecture in Sencha Touch. It defines the roles of the Model, View and Controller, including that the Model manages data, the View manages UI display, and the Controller listens for user input and updates the Model and View. Code examples are given of defining a Model, View and Controller class in Sencha Touch. The document also includes a file structure diagram and notes that a live coding demo carries risks.

For other uses, see hajjmajedma

1. The Hajj is the annual pilgrimage to Mecca, Saudi Arabia required of all able-bodied Muslims at least once in their lifetime. 2. During the Hajj, pilgrims perform a series of rituals including circling the Kaaba seven times, running between the hills of Al-Safa and Al-Marwah, and throwing stones at pillars representing the devil. 3. Over 2 million pilgrims now participate in the Hajj each year, requiring advanced crowd control techniques due to the large numbers of people.

Introduction to ExtJSArun Prasad

Google glass Amith

This document provides an overview of Google Glass, including what it is, its key features and specifications. Google Glass is an optical head-mounted display developed by Google that resembles a pair of eyeglasses. It uses voice commands and visual cues to provide information directly to the user's field of vision through an augmented reality experience. The document outlines Google Glass' development history and testing program, as well as its potential applications and the technologies that enable its functionality, such as Android and augmented reality. Programming approaches for Glass include developing native Android apps or creating "Glassware" apps using the Mirror API.

Busy Developer's Guide to Windows 8 HTML/JavaScript AppsJAX London

With the upcoming release of Windows 8, Microsoft decided to bring HTML+Javascript into the world of Windows-platform application development as a first-class citizen. But make no mistake, this isn’t an attempt to somehow subvert Web developers—it’s more about enabling Web developers to leverage those skills in building “native” Windows applications running on the Windows 8 laptops, desktops, and slates. In this presentation, we’ll go over the basics of building a Windows 8 app using HTML and JavaScript, including a brief overview of what’s possible—and what’s not—for the Web developer seeking to “go native” on Windows.

Using Cool New Frameworks in (Mobile) Domino AppsTeamstudio

Did you know there's an abundance of cool CSS and JS frameworks out there? Have you ever wanted to find out how you can use them in your own (mobile) Domino apps? Theo Heselmans shows real world applications from his customers using some of these powerful frameworks inside Domino. Explore with us on how they integrated Bootstrap, Ratchet.js, Knockout.js, Backbone.js, Underscore.js, jQuery.js and more!

Yii Framework - Do we really need another php framework?Joachim Eckert

Win j svsphonegap-damyan-petev-mihail-mateevMihail Mateev

This document provides an overview and comparison of WinJS and PhoneGap for developing Windows Store apps. It discusses the key components of WinJS like controls, layouts, animations and styling. It also explains how PhoneGap allows developing Windows Store apps using web technologies by providing access to native device APIs via a native web view. While WinJS and PhoneGap differ in their APIs, the document emphasizes they can both be used to create valid Windows Store apps and developers should choose based on preference and code portability needs. It encourages mixing frameworks freely as long as platform guidelines are followed.

Thug: a new low-interaction honeyclientAngelo Dell'Aera

Thug is a new low-interaction honeyclient for analyzing malicious web content and browser exploitation. It uses the Google V8 JavaScript engine and emulates different browser personalities to detect exploits. Thug analyzes content using static and dynamic analysis and logs results using MAEC format. Future work includes improving DOM emulation and JavaScript analysis to better identify vulnerabilities and exploit kits. The source code for Thug will be publicly released after the presentation.

What's New for AJAX Developers in IE8 Beta1?Janakiram MSV

Mobile App DevelopmentChris Morrell

Echo HTML5Nathan Smith

Fake it 'til you make itJonathan Snook

This document discusses how to create mobile apps that feel native using only web technologies. It covers supporting features in Mobile Safari like local storage, CSS3 features, and geolocation. It recommends using web technologies over native due to quicker iteration times. Specific techniques covered include detecting browser type, adding home screen icons, startup images, going full screen, and viewport settings. The document also discusses frameworks like jQuery Mobile but notes native DOM APIs may be sufficient. It covers input features, touch vs click, animations, locking orientation, and performance tips. It acknowledges limitations of Android and webOS and recommends testing on actual devices. Finally, it discusses hybrid mobile frameworks like PhoneGap and Titanium that allow developing for multiple platforms using one code

The current status of html5 technology and standardWonsuk Lee

The document discusses the current status of HTML5 technology and standards. It provides an overview of recent developments in the industry regarding HTML5, compares HTML5 to other technologies like Flash and Silverlight, and highlights examples of Google using HTML5 in products like Gmail and new features enabled by HTML5. It also covers the browser support and standardization status of HTML5, including details about the W3C working groups developing HTML5 and related standards.

Codemotion 2013 - Designing complex applications using html5 and knockoutjsFabio Franzini

The document discusses tools and frameworks for building complex applications using HTML5 and JavaScript. It begins with introductions and background on the speaker. The rest of the document outlines various topics: HTML5 and its benefits, JavaScript and patterns like modularity, client-side frameworks like KnockoutJS, server-side tools like TypeScript, packaging apps with Cordova or AppJS, and demonstrates some of the frameworks.

5 ways to embrace HTML5 todayDaniel Ryan

HTML5 Bootcamp: Essential HTML, CSS, & JavaScriptTodd Anglin

HTML5 and CSS3 have arrived and they are redefining rich, standards-based web development. Features previously the exclusive domain of browser plug-ins can now be added to web applications as easily as images. Understanding the new power that these standards define, as well as the rapidly increasing power and speed of JavaScript in modern browsers and devices is essential. These slides accompany a full-day workshop, where attendees are guided through the new features in HTML5 and CSS3, with special attention to how these technologies can be used today in new and old browsers.

JavaScript UI Architecture: Be all that you can beKyle Simpson

Ease into HTML5 and CSS3Brian Moon

More Related Content

Viewers also liked (7)

ExtJS Sencha TouchBohdan Dovhań

SEO and MarketingAmith

Kop ecarlosdom77

MVC In Sencha TouchAmith

For other uses, see hajjmajedma

Introduction to ExtJSArun Prasad

Google glass Amith

ExtJS Sencha TouchBohdan Dovhań

SEO and MarketingAmith

Kop ecarlosdom77

MVC In Sencha TouchAmith

For other uses, see hajjmajedma

Introduction to ExtJSArun Prasad

Google glass Amith

Similar to MVC in Sencha Touch & ExtJS (20)

Busy Developer's Guide to Windows 8 HTML/JavaScript AppsJAX London

Using Cool New Frameworks in (Mobile) Domino AppsTeamstudio

Yii Framework - Do we really need another php framework?Joachim Eckert

Win j svsphonegap-damyan-petev-mihail-mateevMihail Mateev

Thug: a new low-interaction honeyclientAngelo Dell'Aera

What's New for AJAX Developers in IE8 Beta1?Janakiram MSV

Mobile App DevelopmentChris Morrell

Echo HTML5Nathan Smith

Fake it 'til you make itJonathan Snook

The current status of html5 technology and standardWonsuk Lee

Codemotion 2013 - Designing complex applications using html5 and knockoutjsFabio Franzini

5 ways to embrace HTML5 todayDaniel Ryan

HTML5 Bootcamp: Essential HTML, CSS, & JavaScriptTodd Anglin

JavaScript UI Architecture: Be all that you can beKyle Simpson

Ease into HTML5 and CSS3Brian Moon

Mobile Java with GWT: Still "Write Once, Run Everywhere"Alex Theedom

Times have changed, and although Java ME still has market share, it is not available on all devices anymore. Java/Java ME developers had no problem moving to BlackBerry or Android but faced challenges on iOS. HTML5 plus PhoneGap apps promised a silver bullet for a “write once, run on all devices” approach via several frameworks, which, in the end, offered painful JavaScript and CSS development. Although GWT offers a great Java-to-JavaScript compiler and debugger, mgwt introduces native-looking widgets on iOS, Android, and even BlackBerry. Also, with the addition of GWT/PhoneGap projects, you can now code native-looking HTML apps that can use native APIs with regular, type-safe, well-known beautiful Java without coding a single line of HTML plus JavaScript. Learn more in this session.

HTML5 for Rich User ExperienceMahbubur Rahman

Canvas and WebGL allow for rich graphics and animation on the web through APIs for 2D and 3D drawing. Forms have been enhanced with new input types like email, number and date pickers. Features like drag and drop, geolocation, notifications and the history API enable more interactive experiences. Browser capabilities have been extended through APIs for multimedia, storage, web sockets and accessing hardware. HTML5 aims to provide these features to enhance user experience without additional plugins.

IPhone Web Development With Grails from CodeMash 2009Christopher Judd

Enjoying the full stack - Frontend 2010Christian Heilmann

Intro to mobile web application developmentzonathen

Busy Developer's Guide to Windows 8 HTML/JavaScript AppsJAX London

Using Cool New Frameworks in (Mobile) Domino AppsTeamstudio

Yii Framework - Do we really need another php framework?Joachim Eckert

Win j svsphonegap-damyan-petev-mihail-mateevMihail Mateev

Thug: a new low-interaction honeyclientAngelo Dell'Aera

What's New for AJAX Developers in IE8 Beta1?Janakiram MSV

Mobile App DevelopmentChris Morrell

Echo HTML5Nathan Smith

Fake it 'til you make itJonathan Snook

The current status of html5 technology and standardWonsuk Lee

Codemotion 2013 - Designing complex applications using html5 and knockoutjsFabio Franzini

5 ways to embrace HTML5 todayDaniel Ryan

HTML5 Bootcamp: Essential HTML, CSS, & JavaScriptTodd Anglin

JavaScript UI Architecture: Be all that you can beKyle Simpson

Ease into HTML5 and CSS3Brian Moon

Mobile Java with GWT: Still "Write Once, Run Everywhere"Alex Theedom

HTML5 for Rich User ExperienceMahbubur Rahman

IPhone Web Development With Grails from CodeMash 2009Christopher Judd

Enjoying the full stack - Frontend 2010Christian Heilmann

Intro to mobile web application developmentzonathen

Recently uploaded (20)

Splunk Security Update | Public Sector Summit Germany 2025Splunk

How Can I use the AI Hype in my Business Context?Daniel Lehner

𝙄𝙨 𝘼𝙄 𝙟𝙪𝙨𝙩 𝙝𝙮𝙥𝙚? 𝙊𝙧 𝙞𝙨 𝙞𝙩 𝙩𝙝𝙚 𝙜𝙖𝙢𝙚 𝙘𝙝𝙖𝙣𝙜𝙚𝙧 𝙮𝙤𝙪𝙧 𝙗𝙪𝙨𝙞𝙣𝙚𝙨𝙨 𝙣𝙚𝙚𝙙𝙨? Everyone’s talking about AI but is anyone really using it to create real value? Most companies want to leverage AI. Few know 𝗵𝗼𝘄. ✅ What exactly should you ask to find real AI opportunities? ✅ Which AI techniques actually fit your business? ✅ Is your data even ready for AI? If you’re not sure, you’re not alone. This is a condensed version of the slides I presented at a Linkedin webinar for Tecnovy on 28.04.2025.

Build Your Own Copilot & Agents For DevsBrian McKeiver

TrsLabs - Fintech Product & Business ConsultingTrs Labs

Hybrid Growth Mandate Model with TrsLabs Strategic Investments, Inorganic Growth, Business Model Pivoting are critical activities that business don't do/change everyday. In cases like this, it may benefit your business to choose a temporary external consultant. An unbiased plan driven by clearcut deliverables, market dynamics and without the influence of your internal office equations empower business leaders to make right choices. Getting things done within a budget within a timeframe is key to Growing Business - No matter whether you are a start-up or a big company Talk to us & Unlock the competitive advantage

AI and Data Privacy in 2025: Global TrendsInData Labs

In this infographic, we explore how businesses can implement effective governance frameworks to address AI data privacy. Understanding it is crucial for developing effective strategies that ensure compliance, safeguard customer trust, and leverage AI responsibly. Equip yourself with insights that can drive informed decision-making and position your organization for success in the future of data privacy. This infographic contains: -AI and data privacy: Key findings -Statistics on AI data privacy in the today’s world -Tips on how to overcome data privacy challenges -Benefits of AI data security investments. Keep up-to-date on how AI is reshaping privacy standards and what this entails for both individuals and organizations.

SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdfPrecisely

HCL Nomad Web – Best Practices and Managing Multiuser Environmentspanagenda

Webinar Recording: https://www.panagenda.com/webinars/hcl-nomad-web-best-practices-and-managing-multiuser-environments/ HCL Nomad Web is heralded as the next generation of the HCL Notes client, offering numerous advantages such as eliminating the need for packaging, distribution, and installation. Nomad Web client upgrades will be installed “automatically” in the background. This significantly reduces the administrative footprint compared to traditional HCL Notes clients. However, troubleshooting issues in Nomad Web present unique challenges compared to the Notes client. Join Christoph and Marc as they demonstrate how to simplify the troubleshooting process in HCL Nomad Web, ensuring a smoother and more efficient user experience. In this webinar, we will explore effective strategies for diagnosing and resolving common problems in HCL Nomad Web, including - Accessing the console - Locating and interpreting log files - Accessing the data folder within the browser’s cache (using OPFS) - Understand the difference between single- and multi-user scenarios - Utilizing Client Clocking

Complete Guide to Advanced Logistics Management Software in Riyadh.pdfSoftware Company

Explore the benefits and features of advanced logistics management software for businesses in Riyadh. This guide delves into the latest technologies, from real-time tracking and route optimization to warehouse management and inventory control, helping businesses streamline their logistics operations and reduce costs. Learn how implementing the right software solution can enhance efficiency, improve customer satisfaction, and provide a competitive edge in the growing logistics sector of Riyadh.

Cybersecurity Identity and Access Solutions using Azure ADVICTOR MAESTRE RAMIREZ

IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...organizerofv

Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Aqusag Technologies

Greenhouse_Monitoring_Presentation.pptx.hpbmnnxrvb

Manifest Pre-Seed Update | A Humanoid OEM Deeptech In Francechb3

Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...Impelsys Inc.

What is Model Context Protocol(MCP) - The new technology for communication bw...Vishnu Singh Chundawat

The MCP (Model Context Protocol) is a framework designed to manage context and interaction within complex systems. This SlideShare presentation will provide a detailed overview of the MCP Model, its applications, and how it plays a crucial role in improving communication and decision-making in distributed systems. We will explore the key concepts behind the protocol, including the importance of context, data management, and how this model enhances system adaptability and responsiveness. Ideal for software developers, system architects, and IT professionals, this presentation will offer valuable insights into how the MCP Model can streamline workflows, improve efficiency, and create more intuitive systems for a wide range of use cases.

Big Data Analytics Quick Research Guide by Arthur MorganArthur Morgan

This is a Quick Research Guide (QRG). QRGs include the following: - A brief, high-level overview of the QRG topic. - A milestone timeline for the QRG topic. - Links to various free online resource materials to provide a deeper dive into the QRG topic. - Conclusion and a recommendation for at least two books available in the SJPL system on the QRG topic. QRGs planned for the series: - Artificial Intelligence QRG - Quantum Computing QRG - Big Data Analytics QRG - Spacecraft Guidance, Navigation & Control QRG (coming 2026) - UK Home Computing & The Birth of ARM QRG (coming 2027) Any questions or comments? - Please contact Arthur Morgan at [email protected]. 100% human made.

Dev Dives: Automate and orchestrate your processes with UiPath MaestroUiPathCommunity

This session is designed to equip developers with the skills needed to build mission-critical, end-to-end processes that seamlessly orchestrate agents, people, and robots. 📕 Here's what you can expect: - Modeling: Build end-to-end processes using BPMN. - Implementing: Integrate agentic tasks, RPA, APIs, and advanced decisioning into processes. - Operating: Control process instances with rewind, replay, pause, and stop functions. - Monitoring: Use dashboards and embedded analytics for real-time insights into process instances. This webinar is a must-attend for developers looking to enhance their agentic automation skills and orchestrate robust, mission-critical processes. 👨‍🏫 Speaker: Andrei Vintila, Principal Product Manager @UiPath This session streamed live on April 29, 2025, 16:00 CET. Check out all our upcoming Dev Dives sessions at https://community.uipath.com/dev-dives-automation-developer-2025/.

Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...Noah Loul

Artificial intelligence is changing how businesses operate. Companies are using AI agents to automate tasks, reduce time spent on repetitive work, and focus more on high-value activities. Noah Loul, an AI strategist and entrepreneur, has helped dozens of companies streamline their operations using smart automation. He believes AI agents aren't just tools—they're workers that take on repeatable tasks so your human team can focus on what matters. If you want to reduce time waste and increase output, AI agents are the next move.

Cyber Awareness overview for 2025 month of securityriccardosl1

AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...SOFTTECHHUB

I started my online journey with several hosting services before stumbling upon Ai EngineHost. At first, the idea of paying one fee and getting lifetime access seemed too good to pass up. The platform is built on reliable US-based servers, ensuring your projects run at high speeds and remain safe. Let me take you step by step through its benefits and features as I explain why this hosting solution is a perfect fit for digital entrepreneurs.