ExtJS - Component Model

 

ExtJS Component Hierarchy

• Viewport in the base component that contains container and components .
• Container is a special type of component that holds other components.
• Components inside containers will be nested by tree like structure.

var p1 = Ext.create('Ext.panel.Panel', {
    title: ' Panel 1',
    html: '1 Panel'
});

var p2 = Ext.create('Ext.panel.Panel', {
    title: ' Panel 2',
    html: '2 Panel'
});

Ext.create('Ext.container.Viewport', {
    items: [ p1, p2 ]
});

ExtJS - Custom Events

1. In Extjs , Our own custom events can be added to the component.
2. Custom events will be fired explicitly, when required.
3. The execution of custom events will be done by fireevent().
4. Following code illustrates the situation

var button = Ext.create('Ext.Button', {
    renderTo: Ext.getBody(),
    text: "Fire custom event",
    listeners: {
        customEvent: function(button) {
            Ext.Msg.alert('Custom event called');
        }
    }
});

 button.fireEvent('customEvent', button); 

ExtJS - Remove Listeners

• As adding the listeners , Listeners can be removed from Extjs.
• Calling function ON() with the event will be creating the event.
• Below example explains how to remove the listener using UN() method.

var sayHello = function() {
   alert('Hello');
};

var button = Ext.create('Ext.Button', {
    renderTo: Ext.getBody(),
    text: 'Say Hello',
    listeners: {
        click: sayHello,
    }
});

button.un('click', sayHello);

ExtJS - What is Ext.defer?

Ext.defer or Ext.function.defer is a function similar to javascript setTimeout function.

Ext.defer(function() {
   alert('Hi')
 },  1000) ;

The function given in the defer will be executed after the number of millisecond specified.

Below are the arguments for Ext.defer
Ext.defer( fn, millis, [scope], [args], [appendArgs] ) 

ExtJS - On function

• ON is the function used to create a listeners for the component.
• The usage of ON is , allows you to create the listeners later.
• We can add the listeners for already instantiated components.

var button = Ext.create('Ext.Button', {
    renderTo: Ext.getBody(),
    text: 'Button'
});

button.on('click', function() {
    Ext.Msg.alert('Event listener called from [on]');
});

ExtJS - Event Listening

• ExtJS few events will be fired without user action like afterrender.
• There are events will be fired based on the user action like click, double click, mouseover etc.

Following code demonstrates , how to fire the event when user clicked.

Ext.create('Ext.Button', {
    text: 'Click me to call listener',
    renderTo: Ext.getBody(),
    listeners: {
        click: function() {
            Ext.Msg.alert('Listener function called!');
        }
    }
});

Same way multiple listeners can be added for same component

listeners: {
        click: function() {
            Ext.Msg.alert('Listener function called!');
        },
        mouseover: function() {
            //mouseover functionality
        }
    }

 

ExtJS - Events

Events

• Events Fires , whenever some activity occurs in the components.
• Following code has afterrender listener or event will be called after the   Ext.Component rendered.

   

 Ext.create('Ext.Panel', {
    html: 'Event Example',
    renderTo: Ext.getBody(),
    listeners: {
        afterrender: function() {
            Ext.Msg.alert('Panel is rendered');
        }
    }
});

Extjs - Sencha Commands

Generate New application

   > sencha generate app -ext newApp /path/newApp

Create Build for existing application

     > sencha app build (inside app dir)

Start Sencha server

     > sencha web start (inside app dir)

ExtJS Classes - OOPS

This article will explain you the  Ext JS’ concept of OOP and class-based programming.

1. Classes and Instances
2. Inheritance (polymorphism)
3. Encapsulation 

• 

  ExtJS Object oriented programming
  
  

  
  

   Below Example to Understand EXTJS classes

   

   Parent Class calc

   Ext.define('calc', { //Define Key word to create Class in ExtJS
       x:0,
       y:0,
       constructor: function (config) {
           Ext.apply(this, config);
       },
       getSum: function () {
           return this.x + this.y;
       },
       getMultiplication: function () {
           return this.x * this.y;
       },
       getDivision: function() {
          return this.x / this.y;
       }
   });

  
  

  Child Class Add extends Parent calc

    Ext.define('Add', {
       extend: 'calc',
       add: function() {
           return this.getSum();
       }
   });

  
  

  
  

  Instance Created for class Add

   var sum = Ext.create('Add', {x:10, y:15});
   Ext.Msg.alert('Addition', sum.add()); 
  
  
  

  Pictorial representation of Class and objects

  
  

  

Jacascript OOPs

1. Javascript is Classless, prototype-oriented language.
2. More flexible language and supports  Class-based programming.
3. Class based programming always forces strong typing , encapsulation and coding convention.
4. Class-based code is more likely to be predictable, extensible, and scalable over time.

It is important to be able to clearly distinguish between classes and instances. In simple terms, a class is the blueprint of a concept, while an instance is the actualization of the blueprint. Let’s look at some examples:

• “Building” is a class, while the Empire State Building is an instance of “Building”.
• “Dog” is a class, while Lassie is an instance of “Dog”.
• “Computer” is a class, while the computer you’re using is an instance of “Computer”.

Advantages of EXTjs 5

ExtJS 5

• Leading Standard for business grade web application
• Rich UI components
• One Stop for all rich UI Components
• Cross browser compatibility
• Advanced MVC Architecture
• Plugin free charting
• Modern UI Plugins
• Two way binding
• Routing Functionality
• Deep linking
• Build Tools
• Full documentation suite
• Built in Animation Support

Advantages of Angular JS

1. Data Binding - Angular JS provides two way binding is automatic synchronization of the data between model and view.
2. Extensible - AngularJS is customized and extensible . Allows you to create customizable components.
3. Code Reusability and Maintainability - AngularJS forces you to write code in modular way. Variables and functions can only be created to the respective component(Controller). Provides service and factory implemetation to use across the controllers.
4. Compatibility - AngularJS is compatible to all major browsers
5. Testing - AngularJS is designed to be testable so that you can test your AngularJS app components as easy as possible. It has dependency injection at its core, which makes it easy to test.
   
   
   

Angular JS Services

•   In Angular, Services are the business logic can be shared across the controllers.
•   Services needs to be injected(dependency injection) to make use of it in any component.
•   Services instantiates only when component demands (Lazy instantiation).
•   Services are Singleton, single reference shared across the components.
•   Services can have their own dependencies similar  declaring dependencies in a controller.

 

  <body ng-app="myApp">
     <div ng-controller="myController"> {{message}} <br />
     <input type="text" ng-model="sqr" ng-init="sqr=5"> Square of      <b>{{sqr}}</b> =   {{squareCtrl(sqr)}}
     </div>
  </body>
 
  <script>
  var myApp = angular.module('myApp',[]);
 
     // Service logger to log
     myApp.factory("logger", function() {
       return function(v) {
          console.log(v);
       }
     });
 
     // Square service for square arithmetic operation
     myApp.factory("square", [ "logger", function(logger) {

       return function(v) {
         // Service looger dependency injected to this service   
         logger("Square root for : " + v);
          return v * v;
       }
     }]);
 
    myApp.controller('myController', ['$scope', 'square', function($scope, square) {
 
     //Property to the scope
     $scope.message = 'Hello!';
   
     //Behaviour to the scope
     $scope.squareCtrl = function(v) {
        return square(v);
     };
   
  }]);
  </script>
 

Angular JS - Nested Controllers

•   In HTML DOM can be created in hierarchy(Parent and child DOM elements).
•   Same way, Angular JS controllers also attached to the DOM hierarchy.
•   Obviously these are the Nested controllers.
•   The variable $scope will be created for the respective controller.
•   Intresting point here is, The $scope variable will have the access to the  properties and methods to the higher $scope hierarchy.

    

 Nested Controllers

    <div ng-controller="ParentController" ng-app="nestedControllers">
    <p>{{prefix}} {{ctrl}}</p>

    <div ng-controller="ChildController">
      <p>{{prefix}} {{ctrl}}</p>

      <div ng-controller="GrandChildController">
        <p>{{prefix}} {{ctrl}}</p>
      </div>
    </div>
   

  $scope hierarchy

 
 <script>
    var myApp = angular.module('nestedControllers', []);
    myApp.controller('ParentController', ['$scope', function($scope) {
      $scope.ctrl = 'ParentController';
      $scope.prefix = 'I am'; //overrides in the child controllers
    }]);
    myApp.controller('ChildController', ['$scope', function($scope) {
      $scope.ctrl = 'ChildController';
    }]);
    myApp.controller('GrandChildController', ['$scope', function($scope) {
      $scope.ctrl = 'GrandChildController';
    }]);
</script>

Angular JS - Controllers

•   In Angular JS Controller is the Javascript constructor function. 
•   When directive ng-controller is added to the DOM, Angular create a   constructor function to the controller.
•   And creates variable $scope to the respective controller.

 
  <body ng-app="myApp">
     <div ng-controller="myController"> {{message}} <br />
     <input type="text" ng-model="sqr" ng-init="sqr=5"> Square of      <b>{{sqr}}</b> = {{square(sqr)}}
     </div>
  </body>
 
  <script>
  var myApp = angular.module('myApp',[]);
  myApp.controller('myController', ['$scope', function($scope) {

     //Property to the scope
     $scope.message = 'Hello!';
   
     //Behaviour to the scope
     $scope.square = function(v) {
        return v * v;
     };

  }]);
  </script>

Angular JS Data Binding

Traditional One Way Binding

Angular JS Two Way Binding

 

1. In Angular JS two way binding is automatic synchronization of the data between model and view. 
2. Following sample will help you to understand better.

<body ng-app ng-init="firstName = 'Sathish'; lastName = 'kumar';">
  <strong>First name:</strong> {{firstName}}
  <strong>Last name:</strong> <span ng-bind="lastName"></span>
  Set the first name: <input type="text" ng-model="firstName"/>
  Set the last name: <input type="text" ng-model="lastName"/>
</body>


Above Code binds the value in the view {{ firstName}} and ng-bind="lastName", When value is entered in the following input box
   <input type="text" ng-model="firstName"/>
   <input type="text" ng-model="lastName"/>
In Angular JS two way binding  can be acheived without writing any javascript events on the DOM object.

1.  ng-app - Defines the Angular JS template in the HTML markup for the application.
2.  ng-init - Initialize the data in the give variable  .
3.  ng-model  - Model is nothing but a variable stored in the scope.
4.  ng-bind - Binds the model/variable data in the specified DOM. 

AngularJS Concetps

	Please find the following significant concepts of the Angular JS

1. Template

HTML acts as the template engine with additional markups.

2. Directives

Extends the HTML DOM with the custom attributes .

3.Model

The values that are stored in variables on the scope are referred to as the model

4.Scope

Block or context in the HTML. So that Model is stored where controllers and directives can access it.

5.Expressions

An expression in a template is a JavaScript-like code snippet that allows to read and write variables. Note that those variables are not global variables. Just like variables in a JavaScript function live in a scope,

6.Compiler

When Angular starts your application, it parses and processes this new markup from the template using the compiler.

7.Filter

A filter formats the value of an expression for display to the user

8.View

The loaded, transformed and rendered DOM is then called the view.

9.Data Binding

Whenever the input values change, the value of the expressions are automatically recalculated and the DOM is updated with their values. The concept behind this is two-way data binding.

10.Controller

Business logic behind views. The purpose of controllers is to expose variables and functionality to expressions and directives.

11.Dependency Injection

Creates and wires objects and functions

12.Injector

Dependency Injection (DI) is a software design pattern that deals with how objects and functions get created and how they get a hold of their dependencies. Everything within Angular (directives, filters, controllers, services, ...) is created and wired using dependency injection. Within Angular, the DI container is called the injector.

13.Module

To use Dependency Injection, there needs to be a place where all the things that should work together are registered. In Angular JS, this is the purpose of the modules.

14.Service

View-independent logic from the controller into a service, so it can be reused by other parts of the application as well. Can be accessed from the different controllers.

AngularJS - Hello World

• Angular JS is a javascript opensource powerful framework.

• Angular JS provides us the efficient way to create Single Page Application (SPA).

• Angulars JS  lets you to extend traditional HTML.

• Extensible and works well with the other libraries.

               

    MVC WAY

 

• Angular JS helps you to  write clean MVC (Model View Controller) Javascript code.
  
• It uses HTML has the template language, by extending the DOM attributes.
  

 

Angular JS Hello World

  Like any other framework Angular JS also needs to be added in the script tag src 

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>

ng-app

Tells the framework that the HTML block is Angular application.

<body ng-app="myapp" ></body>

ng-model

Intended to be put inside of form elements and has two-way data binding ($scope -> view and view -> $scope)  

<input type="text" ng-model="uname" >

{{ }} Declaration

Specifying the Angular JS variables inside the HTML tags.

<h1>{{ uname }}</h1>

Hello World 

1. <!doctype html>
2. <html ng-app>
3. <head>
4. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
5. </head>
6. <body>
7. <div>
8. <label>Name:</label>
9. <input type="text" ng-model="uname" placeholder="Enter a your name">
10. <hr>
11. <h1>Hello {{uname}}!</h1>
12. </div>
13. </body>
14. </html>