-
What is Ext JS
over 8 years ago
Hi All,
Today we will discuss about one of the very powerful and widely use JavaScript framework Ext JS for building application with interactive design and cross platform compatibility using various techniques like Ajax, Dynamic HTML (DHTML) and DOM scripting languages and it also supports large array of browsers as well.
Ext JS help you to make single page application (SPA) and it also supports various famous design pattern like MVC (Model) and MVVM and it also supports Two way data binding.
Ext JS first came in picture in April 15, 2007 and it was built by Jack Slocum, Just after the JQuery and it became very popular as it has great functionalities and excitability and its helped to make various enterprise level application as well.
The latest version of the Ext JS is Ext JS 6.0, and its been developed by Sencha. you can find out more about it by following this link sencha docs.
Ext JS also come with fully customizable builtin themes which can be directly used in your application.
In Ext JS, we have to write very little HTML by hand as most of your day to day development is done exclusively in JavaScript in which you will get components and widgets.
The folder structure for the Ext JS frame work goes like this :
To understand it, you can go through the code sample :
in HTML page - (index.html) :
<!DOCTYPE html> <html> <head> <title>First ExtJS 4 Application</title> <link rel="stylesheet" type="text/css" href="http://cdn.sencha.com/ext/gpl/5.1.0/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css" /> <script type="text/javascript" src="http://cdn.sencha.com/ext/gpl/5.1.0/build/ext-all.js"></script> <script type="text/javascript" src="http://cdn.sencha.com/ext/gpl/5.1.0/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script> <script src="app/app.js"></script> </head> <body> </body> </html>In app.js we have :
Ext.application({ name: 'my-website.com', launch: function () { Ext.create('Ext.container.Viewport', { layout: 'fit', items: [{ title: 'My ExtJS Application - title of the page', html: '<div style="color:red; font-weight:bold;">Text of the body goes here.'</div>' }] }); } });
0 Comment(s)