Introduction on Extjs

-


This post will give you a basic idea about ExtJS.
Here is the Official website link for ExtJS 

                          https://www.sencha.com/products/extjs/


what  is EXT JS?

Ext JS is the most powerful JavaScript based application development platform. It allows you to create data-intensive HTML 5 applications using JavaScript with cross-browser compatibility.

It  is a product of Snecha .

Why EXT JS?


 Ext JS framework allows us to build enterprise application with unified user experience using JavaScript without writing any HTML 5 or CSS code.

It also includes lot of built in themes and UI component which reduces your effort on writing HTML and CSS components to build any web applications

Features Of EXT JS

Supports object oriented programming which makes easy application development and maintenance.
Customizable UI widgets with collection of UI components like Grids,forms,charts,tree.
Ext JS supports Single Page Application development.
Ext JS includes MVC and MVVM architecture.


EXT JS Vs Angular JS



UI Components in Ext JS

Ext JS provides lot of UI components which reduces your effort on building any component using HTML.Below are the example

you can also create your own customized component using Ext JS.
Now lets see how to create a component.Here is the example .


Ext.onReady(function(){       
 Ext.create('Ext.Component', {       
     id:'myComponent',        
    renderTo: Ext.getBody(),     //similar to document.body   
    html:'<b>Hello World!</b>'    
});})

We already discussed that Ext JS uses MVC architecture .lets us discuss what is MVC .

MVC Architecture



Model-View-Controller (MVC) is an architectural pattern that divides the user interface of an application into three parts.Model-View-Controller (MVC) is an architectural pattern that divides the user interface of an application into three parts.
  • Model -Describes the common format for the data being used in the application
  • View-Represents the data to the user . View can be in different formats (e.g. Charts ,Grids)
  • Controller-Central part of an MVC application. It is responsible for the events in the application and delegates the request between Model and View

Ext JS Class System

  • Ext JS has more than 300 classes.
  • Ext is a global singleton class and it has 78 methods and 59 properties
  • Ext.Base is root of all classes created with Ext.define. 

Some of the important methods

    Methods available in Ext class

  1. Ext.application()
  2. Ext.apply()
  3. Ext.create() 
  4. Ext.define() 
  5. Ext.getCmp() 
  6. Ext.override() 

Defining a class in Ext JS

Ext.define() is used for defining class in Ext JS.
Detects and creates new namespaces if required.
Extends an existing class.
Verifies if the class being extended has been defined, if not, it will defer the creation of the new class until the class used for extending is available.
Returns Ext.Base object.

Syntax:

Ext.define(class name, class members/properties, callback function);


Ext.define('Student', {                              // ‘Student’ is the class name 
name : ‘test',                                                             //Class member
getName : function(){                                               //Class function
return "Student name is" + this.name;    
}}, 
function(){                                                         //callback function
alert('Student object created');
});

Creating  a class object 

var student2 = Ext.create('Student', 'XYZ');

//calling member function
student2.getName();

//Calling static  method 
 Student.staticMethodName();

Inheritance in Ext JS

Inheritance in Ext JS can be achieved by extend keyword.

Ext.define('Person', {    name : 'Unknown',     
constructor : function(name){        
if(name){           
 this.name = name;        
}    },     
getName : function(){    
    alert("My name is " + this.name);    
}});


Ext.define('Student', {    
extend : 'Person',   
schoolName : 'Unknown',     
 constructor : function(name, schoolName){   
    this.schoolName = schoolName || 'Unknown';     
     this.callParent(arguments);   
 },     
getSchoolName : function(){        
      alert("My school name is " + this.schoolName);    
}});

Calling Super and Sub Class Method


 var newStudent = new Student('XYZ', 'ABC School');
     newStudent.getName(); //output: XYZ
     newStudent.getSchoolName(); //output: ABC School

Comments

Post a Comment

Popular posts from this blog

Get rid of boring for loop and try using "range" and "rangeClosed"

-
Most of the Java developer already started using Java 15 but here is the feature in java 8  which  i want  to introduce to the people who doesn't  know about it or may be not using it. Lets see about two static methods  "range()" and "rangeClosed()". Usage  These two methods are available in IntStream and LongStream. IntStream -  IntStream class is an specialization of Stream interface for int primitive. It represents an stream of primitive int-valued elements supporting sequential and parallel aggregate operations.  IntStream is part of the java. util. stream package and implements AutoCloseable and BaseStream interfaces. Syntax range It returns the sequential ordered IntStream .It includes only the startInclusive value . static  IntStream  range( int  startInclusive ,  int  endInclusive) rangeClosed It returns the sequential ordered IntStream .It includes startInclusive and endInclusive values . static IntStream rangeCl...
Read more

HOW TO USE NOTE PAD AS YOUR PERSONAL DAIRY!!!!!

-
Image
                                                                             HOW TO USE  NOTE PAD AS YOUR PERSONAL DAIRY!!!!! 1. Open a blank Notepad file. 2. Write  .LOG  and not  .log  (case sensitive) as the first line of the file, followed by a enter. Save the file and close it. 3. Double-click the file to open it and notice that Notepad appends the current date and time to the end of the file and place the cursor on the line after. 4. Now type your notes, save and close the file. 5. Now place the cursor on the line after and type your notes. Each time you enter your notes, the time and date gets attached to the notes. Thus your Personal diary is ready to use now !
Read more

Create MultiSelect Dropdown using vue-multiselect

-
If you are working with bootstrap vue you might be noticed that bootstrap-vue doesn't have a searchable multi-select drop down yet. There are a lot of other vue plugins that provide this feature. I found vue-multiselect as a better one. It supports searchable multi-select dropdown with Vuex. It also has multiple props that can be used to parse option data. Let us create a simple vue-multi-select dropdown . Step 1: Install vue/multiselect via npm           npm install vue-multiselect --save Step 2: Import multiselect component inside vue file where ever its is used              <template>              </template>              <script>               import Multiselect from "vue-multiselect";              export default {         ...
Read more