Understanding Sencha Ext JS

Can we use Ext JS to manipulate DOM? Can we use it if we want pretty and user-friendly components (forms, grids, trees, and so on)? Can we use it if we need some nice charts? Can we use the Model View Controller (MVC) architecture to organize the application with Ext JS? What if we want to use a two-way data-binding between the Model and the View? Can we do that using Ext JS? And what if we do not like the colors of Ext JS components' look and feel? Can we easily change it too? And now a difficult one; can we make a build to obfuscate and optimize the CSS and JavaScript files of our application using Ext JS? Is Ext JS responsive? Can we use it in mobile devices?

Amazingly, the answer is positive to all the preceding questions! As we can see, Ext JS is a complete frontend framework. The mastermind company behind Ext JS is Sencha Inc. (http://sencha.com).

Sencha Ext JS also has a cousin called Sencha Touch. It also has the amazing features we just mentioned, but focuses on the mobile cross-platform world. We will talk very briefly about Ext JS and Sencha Touch in later chapters of this book.

Architecture of Ext JS applications

Before we get started, let's make sure we understand a few of the core concepts. Ext JS is a frontend framework based on JavaScript and HTML5. This means Ext JS does not connect to the database directly. For storage, we can use one of the types of HTML5 storage, such as Web SQL or local storage, but these types of storage allow us to store only 5 MB of data, which is very little for a common application.

Usually, we want to use MySQL, Oracle, MS Server or any other database. To be able to store information in a database, we need to use a server-side language, such as PHP, Java, C#, Ruby, Python, Node.js, and so on. Ext JS will communicate with the server-side language (or web services), and the server will connect to the database or any other storage (documents repository, for example).

The following diagram exemplifies the architecture of an application developed with Ext JS: