Ext JS is a javascript based application framework ideal for developing powerful desktop web applications. Web applications in Ext JS are formulated via techniques like Ajax, DHTML & DOM scripting. The first version of Ext JS was developed by Sencha Inc. After introducing the first version of Ext JS, Sencha has launched four more versions, the latest version being Ext JS 5.0 which was released on June 2, 2014. One of the exclusive features of Ext JS 5.0 is that it enables you to create desktop apps for touch-enabled gadgets. The Ext JS 5.0 is based on MVVM or Model View ViewModel architecture. This application framework comes with a charting package optimized for touch, in addition to some financial charting features. One of the other salient features of Ext JS 5.0 is that it is compatible with several browsers like Safari 6+, Firefox, IE8+, Chrome, and Opera 12+. Ext JS 5.0 comes with several features that help you to implement several functionalities with ease and with no concern over compatibility issues.

Getting Started

-> Download and install sencha cmd 5.
-> Open your terminal or console window and issue these commands:
sencha generate app -ext MyApp ./app
cd app
sencha app watch

What is MVVM?

MVVM is an architectural pattern for scripting software code which is mainly based on MVC pattern. The MVVM is characterized by the abstraction of a view known as ViewModel which makes it distinctive from MVC. The ViewModel is responsible for coordinating the corresponding data together with the View’s presentation via a strategy called data binding. The ViewModel coordinates the changes between a Model’s data and the View’s presentation of that data using a technique called “data binding”. As a result, the MVVM framework functions perfectly while reducing or eradicating the application logic which can manipulate the View.

Building a Login App

Step 1 – Generate your Application

sencha -sdk extjs/5.0.1 generate app TutorialApp ./TutorialApp

Step 2 – Create the Login View Components

create a new app/view folder called “login”. After creating the “login” folder, add the following files to said folder:
* Login.js
*loginController.js

Step 3 – Disable autoCreateViewport

remove the ‘autoCreateViewport’ config from the Ext.application config in app.js. app.js is located in the root of your project.

Step 4 – Create the Login Window

Ext.define("TutorialApp.view.login.Login",{
extend: 'Ext.window.Window',
xtype: 'login',
requires: [
'TutorialApp.view.login.LoginController',
'Ext.form.Panel'
],
controller: 'login',
bodyPadding: 10,
title: 'Login Window',
closable: false,
autoShow: true,
items: {
xtype: 'form',
reference: 'form',
items: [{
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username',
allowBlank: false
}, {
xtype: 'textfield',
name: 'password',
inputType: 'password',
fieldLabel: 'Password',
allowBlank: false
}, {
xtype: 'displayfield',
hideEmptyLabel: false,
value: 'Enter any non-blank password'
}],
buttons: [{
text: 'Login',
formBind: true,
listeners: {
click: 'onLoginClick'
}
}]
}
});

Step 5 – Add Login Logic

The entirety of LoginController.js is as follows

Ext.define('TutorialApp.view.login.LoginController', {
extend: 'Ext.app.ViewController',
alias: 'controller.login',
onLoginClick: function(){
localStorage.setItem("TutorialLoggedIn", true);
this.getView().destroy();
Ext.widget('app-main');
}
});

Step 6 – Add Launch Logic to Application.js

Ext.define('TutorialApp.Application', {
extend: 'Ext.app.Application',
name: 'TutorialApp',
views: [
'TutorialApp.view.login.Login',
'TutorialApp.view.main.Main'
],
launch: function () {
var supportsLocalStorage = Ext.supports.LocalStorage,
loggedIn;
if (!supportsLocalStorage) {
Ext.Msg.alert('Your Browser Does Not Support Local Storage');
return;
}
loggedIn = localStorage.getItem("TutorialLoggedIn");
Ext.widget(loggedIn ? 'app-main' : 'login');
}
});

Step 7 – Add Viewport Plugin

Adding the following line to Main.js
plugins: 'viewport',

Step 8 – Run the app

Integrating php and EXTJS for getting data from Database

1. php code to get data from database
<?php
$con=mysqli_connect("localhost","root","root","login");
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM Login");
while($row = mysqli_fetch_array($result)) {
echo $row['userName'] . " " . $row['passWord'];
}
mysqli_close($con);
?>

2. Ajax request in javascript file to get data

Ext.Ajax.request({
url : 'http://localhost/dev239/projects/project1/viewDb.php',
method: 'GET',
success: function (response) {
var text = response.responseText;
console.log(text);
},
failure: function (response) {
Ext.Msg.alert("Error",jsonResp.error);
}
});

3. Displaying in the Grid.

* Model

Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ 'username', 'password' ]
});

* Store

var userStore = Ext.create('Ext.data.Store', {
model: 'User',
data: text
});

* Grid Panel

Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: userStore,
width: 400,
height: 200,
title: 'Application Users',
columns: [
{
text: 'UserName',
width: 100,
sortable: false,
dataIndex: 'username'
},
{
text: 'Password',
width: 150,
dataIndex: 'password',
},
]
});

Ext JS 5.0 is currently regarded as one of the leading standards related to commercial web app development. When it comes to developing robust web applications you may not find a better suitable framework than Ext JS 5.0. Ext JS comes with a fully equipped suite and several built in themes in addition to 1000 APIs and several components. There are few features of Ext JS that makes it superior to the majority of JavaScript libraries.

Credits: Sencha.com

Know More About This Topic from our Techies

Latest Post