Decode url in EXTJS

We can decode urls in EXTJS using the Ext.urlDecode() function. if encodedUrl is an encoded URL query string like food1=Dal&food2=Naan&food3=Rice we can an object as follows: var selectedFood = Ext.urlDecode(encodedUrl); Now the selectedFood’s properties will be {food1:’Dal’, food2:’Naan’,food3:’Rice’};
Continue reading…

Enjoyed this post? Share it!

 
 

Encode url in EXTJS

We can encode urls in EXTJS using the Ext.urlEncode() function. Example: Sample Object: var selectedFood = {food1:’Dal’, food2:’Naan’,food3:’Rice’}; Convert the object to URL data: var encodedUrl = Ext.urlEncode(selectedFood); // encodedUrl is an encoded URL query string://food1=Dal&food2=Naan&food3=Rice
Continue reading…

Enjoyed this post? Share it!

 
 

Create array from JSON string in EXTJS

This example demonstrates how to re-create the array based on its JSON string. Take the JSON representation of foodArray: var foodJson = ‘["Dal","Naan","Rice"]’; Parse the JSON and rebuild the array: var foodArray = Ext.decode(foodJson); Output values in the array: foodArray[0] = ‘Dal’; foodArray[1] = ‘Naan’; foodArray[2] = ‘Rice’;
Continue reading…

Enjoyed this post? Share it!

 
 

Get dropdown select options using EXTJS

<html> <head> <title>Get select options from dropdown in EXTJS</title> <link rel="stylesheet" type="text/css" href="../ext/css/ext-all.css"/> <script type="text/javascript" src="../ext/ext-base.js"></script> <script type="text/javascript" src="../ext/ext-all-debug.js"></script> <script type="text/javascript"> Ext.BLANK_IMAGE_URL = ‘../ext/images/default/s.gif’;   Ext.onReady(function() { var select = Ext.get(’states-select’); Ext.each(select.options, function(item,index) { document.write(index + ‘<br/>’); }); }); </script> </head> <body> <select id="states-select"> <option>AL</option> <option>AZ</option> <option>IL</option> <option>CA</option> </select> </body> </html>
Continue reading…

Enjoyed this post? Share it!

 
 

Get elements by class name in EXTJS

<html> <head> <title>Get all elements by class in page</title> <link rel="stylesheet" type="text/css" href="../ext/css/ext-all.css"/> <script type="text/javascript" src="../ext/ext-base.js"></script> <script type="text/javascript" src="../ext/ext-all-debug.js"></script> <script type="text/javascript"> Ext.BLANK_IMAGE_URL = ‘../ext/images/default/s.gif’;   Ext.onReady(function() { // Get all the elements with specified class. var classLinks = Ext.query(’.item’); Ext.each(classLinks, function(item,index) { document.write(index + ‘<br/>’); }); });   </script> </head> <body> <div id="fdiv" class="item">This is […]
Continue reading…

Enjoyed this post? Share it!

 
 

Get all div elements using EXTJS

<html> <head> <title>Get all div elements in page</title> <link rel="stylesheet" type="text/css" href="../ext/css/ext-all.css"/> <script type="text/javascript" src="../ext/ext-base.js"></script> <script type="text/javascript" src="../ext/ext-all-debug.js"></script> <script type="text/javascript"> Ext.BLANK_IMAGE_URL = ‘../ext/images/default/s.gif’;   Ext.onReady(function() { // Get all the div elements. var nodes = Ext.query(’div’); Ext.each(nodes, function(item, index, allItems) { document.write(index + ‘<br/>’); }); });   </script> </head> <body> <div id="fdiv">This is the first […]
Continue reading…

Enjoyed this post? Share it!

 
 

Get DOM nodes and elements using EXTJS

We can use the Ext.get(element) or Ext.Element.get(element) to get a reference to any element in the document. This function can be used to retrieve references that encapsulate DOM elements. <html> <head> <title>Retrieve DOM with EXT-JS</title> <link rel="stylesheet" type="text/css" href="../ext/css/ext-all.css"/> <script type="text/javascript" src="../ext/ext-base.js"></script> <script type="text/javascript" src="../ext/ext-all-debug.js"></script> <script type="text/javascript"> Ext.BLANK_IMAGE_URL = ‘../ext/images/default/s.gif’; Ext.onReady(function() { var theDiv = […]
Continue reading…

Enjoyed this post? Share it!

 
 

Display alert box using ext-js

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title id=’title’>HTML Page setup Tutorial</title>   <!– ** CSS ** –> <!– base library –> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />   <!– overrides to base library –>     <!– ** Javascript ** –> <!– ExtJS library: base/adapter –> <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script> <!– ExtJS library: all widgets –> […]
Continue reading…

Enjoyed this post? Share it!