{"id":3642,"date":"2011-04-14T21:41:06","date_gmt":"2011-04-14T16:11:06","guid":{"rendered":"https:\/\/2thenew.today\/blog\/?p=3642"},"modified":"2016-09-01T16:04:01","modified_gmt":"2016-09-01T10:34:01","slug":"getting-started-with-extjs","status":"publish","type":"post","link":"https:\/\/2thenew.today\/blog\/getting-started-with-extjs\/","title":{"rendered":"Getting started with extJS"},"content":{"rendered":"

Ext.JS JavaScript Framework a cross-browser JavaScript<\/a> library for building rich internet applications. It is built for developing high performance, customizable UI widgets and features a well designed, documented and extensible Component model. It is available in both Commercial and Open Source licenses are available.<\/p>\n

Step 1:<\/strong>
\nFirst download the source css and js<\/p>\n

Step 2:<\/strong>
\nInclude the following css and js as<\/p>\n

[html]
\n<script src="..\/..\/adapter\/ext\/ext-base.js" type="text\/javascript"><\/script>
\n<script src="..\/..\/ext-all.js" type="text\/javascript"><\/script>
\n[\/html]<\/p>\n

Now start writing the code in script tag or make js file.
\njQuery and extJS comparisions:<\/p>\n

Document is ready<\/strong><\/p>\n

[html]
\n\/\/document is raedy in jQuery
\n<script type="text\/javascript">\/\/ <![CDATA[
\n$(document).ready(function() {
\n \/\/ do stuff when DOM is ready
\n});
\n\/\/ ]]><\/script><\/p>\n

\/\/in extJS
\n<script type="text\/javascript">\/\/ <![CDATA[
\nExt.onReady(function() {
\n \/\/ do stuff when DOM is ready
\n});
\n\/\/ ]]><\/script>
\n[\/html]<\/p>\n

Selecting elements<\/strong><\/p>\n

[html]
\n\/\/ Selecting by ID in jQuery
\nvar myDiv = $("#element-id");
\n\/\/ Selecting by ID in Extjs
\nvar myDiv = Ext.get(‘element-id’);
\n\/\/ Perform some action on it
\n\/\/ Add a class
\nmyDiv.addClass(‘my-class’);
\n\/\/ Set the width 100 px,
\n\/\/ true is for applying default animation on change
\nmyDiv.setWidth(100, true);
\n\/\/ Retrive some information of the element
\n\/\/ Get the elements box info as object {x, y, width, height}
\nvar box = myDiv.getBox();<\/p>\n

extJS:<\/p>\n

\/\/ Select elements with CSS Selector
\nvar imgs = Ext.select("#my-div div.member img");
\n\/\/ or select directly from an existing element
\nvar members = Ext.get(‘my-div’);
\nvar imgs = members.select(‘div.member img’);
\n\/\/ Now, any Ext.Element actions can be performed on all the elements in this collection
\n[\/html]<\/p>\n

Dom scripting<\/strong><\/p>\n

[html]
\nvar el1 = Ext.get("my-1st-div");
\nvar el2 = Ext.get("my-2nd-div");
\n\/\/ Appending elements
\nel1.appendChild("A new paragraph").appendTo(el2)
\n\/\/ Replcing, removing
\nvar el3 = Ext.get("my-3rd-div");
\nExt.get("my-4th-div").replace(el3).insertAfter(el2);
\nel2.remove()
\n[\/html]<\/p>\n

Events<\/strong><\/p>\n

[html]
\n\/\/ Binding an event in jQuery
\n$(".btn").click(function() {
\n\/\/ Do something on button click
\n});<\/p>\n

\/\/ Binding an event in Extjs
\nExt.select(‘.btn’).on(‘click’, function() {
\n\/\/ Do something on button click
\n});
\n[\/html]<\/p>\n

Ajax<\/strong><\/p>\n

[html]
\n\/\/ Basic request in jQuery
\n$.ajax({
\ntype: "POST",
\nurl: url,
\ndata: { x: ‘y },
\nsuccess: function(msg){
\nalert( "Data Saved: " + msg );
\n}
\n});<\/p>\n

\/\/ Basic request in Ext
\nExt.Ajax.request({
\nurl: url,
\nparams: { x: ‘abc’ },
\nsuccess: function(msg){
\nalert( "Data Saved: " + msg );
\n}
\n});
\n[\/html]<\/p>\n

Here, I have listed the basic difference between jQuery and extJS for complete reference
\nhope it helps you guys \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"

Ext.JS JavaScript Framework a cross-browser JavaScript library for building rich internet applications. It is built for developing high performance, customizable UI widgets and features a well designed, documented and extensible Component model. It is available in both Commercial and Open Source licenses are available. Step 1: First download the source css and js Step 2: […]<\/p>\n","protected":false},"author":27,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":15,"footnotes":""},"categories":[7],"tags":[643,55],"class_list":["post-3642","post","type-post","status-publish","format-standard","hentry","category-grails","tag-extjs","tag-javascript"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t