Book Image

Sencha MVC Architecture

By : Ajit Kumar
Book Image

Sencha MVC Architecture

By: Ajit Kumar

Overview of this book

<p>Sencha provides one of the most popular frameworks to build RIA applications (using ExtJS) and HTML5 compliant mobile applications (using Sencha Touch). Creating an application is always easy, but creating a highly maintainable and scalable application is challenging without having solid architectural practices in place.<br /><br />"Sencha MVC Architecture" covers all the aspects, from project design to building and packaging, creating and delivering an enterprise-class application by applying Sencha MVC Architecture. Every concept is supported with a functional code, which you can quickly try out and also understand how it works.<br /><br />The book presents the general MVC architecture and presents a case for the client-side MVC architecture and their importance. You will learn why we need to have client-side MVC architecture and how the concepts map to the Sencha MVC Architecture. You will then learn how to create an application in ExtJS as well as Sencha Touch by applying all the concepts and classes of Sencha MVC Architecture. The step-by-step approach helps you build a working application without getting into the detail of the constructs yet explains how things work. The later part of the book will explain the Sencha MVC Architecture constructs in detail &ndash; class system, loader, controller, etc. and the best practices introduced by the framework. The end of the book will walk you through the challenges that you will face when you model your application using the Sencha MVC Architecture and also show you how to overcome each one of them. You will learn how to make use of the tools to manage your project beginning from the project creation to delivery.</p>
Table of Contents (12 chapters)

View


Every view is a component in Ext JS as well as Touch. The kinds of views (visual presentation) that are available in Ext JS and the kind of behaviors they offer, differ considerably from Touch for the simple reason that each one of them addresses a different segment of devices and those devices have their own uniqueness. The component implementation is very different in the two frameworks. However, at a higher level, both frameworks have got three phases for every view component, shown as follows:

In the Initialization phase, do the following tasks:

  1. Register events.

  2. Apply styles.

  3. Call the hook method of the component/view class, which does the view-specific initialization. For example, initialize in Touch and initComponent in Ext JS.

  4. Register the component to the component manager.

  5. Initialize state.

  6. Initialize the plugins, if any.

  7. Enter the Render phase.

In the Render phase, do the following tasks:

  1. Generate elements and add them to the DOM.

  2. Apply custom styles.

  3. Initialize events.

  4. Initialize state...