Ext JS 3.0 Cookbook: Clear step-by-step recipes for building impressive rich internet applications using the Ext JS JavaScript library

var colorsArray = new Array();

colorsArray[0] = 'Blue';
colorsArray[1] = 'Red';
colorsArray[2] = 'White';

var colorsJson = Ext.encode(colorsArray);

var colorsJson = '["Blue","Red","White"]';

var colorsArray = Ext.decode(colorsJson);

var selectedColors = {color1:'Blue', color2:'Red', color3:'White'};

var encodedUrl = Ext.urlEncode(selectedColors);
// encodedUrl is an encoded URL query string:
//color1=Blue&color2=Red&color3=White.

encodedUrl = location.search;

var selectedColors = Ext.urlDecode(encodedUrl); 
// Now the value of selectedColors' color1 property is 'Blue',
// color2's value is 'Red' and color3's value is 'White'.

var colorsArray = new Array();
colorsArray[0] = 'Blue';
colorsArray[1] = 'Red';
colorsArray[2] = 'White';
var colorsObject = { color1: 'Blue', color2: 'Red', color3: 'White' };
var aNumber = 1;
var aString = '1';
var sample;
var empty;

var colorsArrayType = Ext.type(colorsArray);
// colorsArrayType's value is "array".
var isArray = Ext.isArray(colorsArray);
// isArray is true
var colorsObjectType = Ext.type(colorsObject);
// colorsObjectType's value is "object".
var isArray = Ext.isArray(colorsObject);
// isArray is false
var number = Ext.num(aNumber, 0);
// number is 1.
number = Ext.num(aString, 0);
// Since aString is not numeric, the supplied
// default value (0) will be returned.
var defined = Ext.util.Format.undef(sample);
// defined is an empty string
sample = "sample is now defined";
defined = Ext.util.Format.undef(sample);
// defined is now "sample is now defined".
var notEmpty = Ext.value(empty, 'defaultValue', false);
// notEmpty is 'defaultValue'

var colorsArray = new Array();
colorsArray[0] = 'Blue';
colorsArray[1] = 'Red';
colorsArray[2] = 'White';

var position = colorsArray.indexOf('White');
// postition is 2, the index of 'White' in the array.
position = colorsArray.indexOf('Brown');
// 'Brown' does not exist in the array,
// position is -1.

colorsArray.remove('Blue');
position = colorsArray.indexOf('Blue');
// 'Blue' does not exist anymore,
// position is -1.

var needsEscape = "ExtJS's String Class will escape this";
var needsTrimming = " Needs trimming ";
var cls = 'color-class'
var color = 'Blue';
var sort = 'ASC';
var sample = "some text";
var longText = "This text should be truncated, it's really long.";
var withScript = 'Some text<script type="text/javascript">var color = "Blue";<\/script>';
var longText = "Only a part of this text is needed.";
var multiLineText = "One line\nAnother line\nYet another line";
var money = 29.99;
var sample1 = '22';
var sample2 = '550';
var sample3 = '1500';

var escaped = String.escape(needsEscape);
document.write(escaped + '<br/>');
// The escaped string is "ExtJS\'s String Class will escape this".
var trimmed = needsTrimming.trim();
document.write(trimmed + '<br/>');
// the trimmed string is "Needs trimming"
var formatted = String.format('<span class="{0}">{1}</span>', cls, color);
document.write(formatted + '<br/>');
// formatted is '<div class="color-class">Color</div>'
sort = sort.toggle('ASC', 'DESC');
document.write(sort + '<br/>');
// instead of conditional logic:
//sort = (sort == 'ASC' ? 'DESC' : 'ASC');
var converted = Ext.util.Format.uppercase(sample);
document.write(converted + '<br/>');
// converted is now "SOME TEXT".
sample = "SOME TEXT";
converted = Ext.util.Format.lowercase(sample);
// converted is now "some text".
document.write(converted + '<br/>');
sample = "some text";
converted = Ext.util.Format.capitalize(sample);
document.write(converted + '<br/>');
// converted is now "Some text".
var truncated = Ext.util.Format.ellipsis(longText, 20);
document.write(truncated + '<br/>');
// truncated is "This text should ...".
// Removing script tags
var noScript = Ext.util.Format.stripScripts(withScript);
document.write(noScript + '<br/>');
// noScript is "Some text".
// Returning a portion of a string
var subString = Ext.util.Format.substr(longText, 0, 11);
document.write(subString + '<br/>');
// subString is "Only a part".
// Converting newline characters to the html tag <br/>
var html = Ext.util.Format.nl2br(multiLineText);
document.write(html + '<br/>');
// html is
// One line
// Another line
// Yet another line
var usCurrency = Ext.util.Format.usMoney(money);
document.write(usCurrency + '<br/>');
// usCurrency is $29.99
// Normalizing strings
var normalized1 = String.leftPad(sample1, 4, '0');
// normalized1 is '0022'
var normalized2 = String.leftPad(sample2, 4, '0');
// normalized3 is '0550';
var normalized3 = String.leftPad(sample3, 4, '0');
// normalized2 is '1500'
document.write(normalized1 + '<br/>');
document.write(normalized2 + '<br/>');
document.write(normalized3 + '<br/>');

var number1 = 30;
var number2 = 75;

var constrained = number1.constrain(25, 50);
// constrained is 30 because number1 is
// within the specified range
constrained = number2.constrain(25, 50);
// constrained is 50 because number2 is
// greater than the max. value in the range

Date.patterns = {
ISO8601Long: "Y-m-d H:i:s",
ISO8601Short: "Y-m-d",
ShortDate: "n/j/Y",
LongDate: "l, F d, Y",
FullDateTime: "l, F d, Y g:i:s A",
MonthDay: "F d",
ShortTime: "g:i A",
LongTime: "g:i:s A",
SortableDateTime: "Y-m-d\\TH:i:s",
UniversalSortableDateTime: "Y-m-d H:i:sO",
YearMonth: "F, Y"
};

var now = new Date();

var ISO8601Long = now.format(Date.patterns.ISO8601Long);
//ISO8601Long is similar to 2009-03-05 14:01:45
var ISO8601Short = now.format(Date.patterns.ISO8601Short);
//ISO8601Long is similar to 2009-03-05
var ShortDate = now.format(Date.patterns.ShortDate);
//ISO8601Long is similar to 3/5/2009
var LongDate = now.format(Date.patterns.LongDate);
//ISO8601Long is similar to Thursday, March 05, 2009
var FullDateTime = now.format(Date.patterns.FullDateTime);
//ISO8601Long is similar to Thursday, March 05, 2009 2:01:45 PM
var MonthDay = now.format(Date.patterns.MonthDay);
//ISO8601Long is similar to March 05
var ShortTime = now.format(Date.patterns.ShortTime);
//ISO8601Long is similar to 2:01 PM
var LongTime = now.format(Date.patterns.LongTime);
//ISO8601Long is similar to 2:01:45 PM
var SortableDateTime = now.format(Date.patterns.SortableDateTime);
//ISO8601Long is similar to 2009-03-05T14:01:45
var UniversalSortableDateTime = now.format(Date.patterns.UniversalSortableDateTime);
//ISO8601Long is similar to 2009-03-05 14:01:45-0500
var YearMonth = now.format(Date.patterns.YearMonth);
//ISO8601Long is similar to March, 2009

var aDate = new Date();

aDate = Date.parseDate("March, 2009", Date.patterns.YearMonth);
//aDate = Thu Mar 5 00:00:00 EST 2009
aDate = Date.parseDate("2:01:45 PM", Date.patterns.LongTime);
//aDate = Thu Mar 5 14:01:45 EST 2009
aDate = Date.parseDate("2009-03-05", Date.patterns.ISO8601Short);
//aDate = Thu Mar 5 00:00:00 EST 2009

var low = Date.parseDate("July, 2008", Date.patterns.YearMonth);
var high = Date.parseDate("July, 2009", Date.patterns.YearMonth);

var now = new Date();
var inRange = now.between(low, high);
// inRange is true

Ext.namespace('ExtJSCookbook.Samples');

Ext JSCookbook.Samples.var1 = 'var1 (local)';
// ExtJSCookbook.Samples.var1 is limited to the ExtJSCookbook.Samples namespace
var var1 = 'var1 (global)';
// var1 is a global variable

// A custom type inside the Ext JSCookbook.Samples namespace
ExtJSCookbook.Samples.Person = function() {
return {
firstName: '',
lastName: '',
show: function() {
alert(this.firstName + ' ' + this.lastName);
}
}
}
var person1 = new Ext JSCookbook.Samples.Person();
person1.firstName = 'Jorge';
person1.lastName = 'Ramon';
person1.show();

Ext.applyIf(Array.prototype, {
copyTo: function(dest, startIndex) {
l = this.length;
for (var i = 0; i < l; i++) {
dest[startIndex + i] = this[i];
}
}
})

var source = new Array();
var destination = new Array();
source[0] = '1';
source[1] = '2';
source[2] = '3';
destination[0] = '4';
destination[1] = '5';
destination[2] = '6';
destination[3] = '7';
destination[4] = '8';
destination[5] = '9';

var serialized = destination.toString();
// serialized is "4,5,6,7,8,9"
// Copy the source array, starting at index 2 of the destination
source.copyTo(destination, 2);
serialized = destination.toString();
// serialized is "4,5,1,2,3,9"

// Add a function to the MixedCollection Class.
Ext.override(Ext.util.MixedCollection, {
addUnique: function(key, object) {
if (this.indexOf(object) > -1) return;
this.add(key, object);
}
});

Ext.onReady(function() {
// Create our enhanced collection.
var col = new Ext.util.MixedCollection();
// Confirm that the same value cannot be added twice.
col.add("key 1", "value 1");
document.write("Original count: " + col.getCount() + "<br/>");
// Use the added function to make sure duplicates are not
//added.
col.addUnique("key 2", "value 1");
// Number of elements in the collection is still 1.
document.write("Count after trying to add a duplicate: " + col.getCount() + "<br/>");
});

Ext.namespace("Samples");
Samples.ObservableList = function() {
this.items = [];
this.length = 0;
// The events our custom class will expose.
// The parent Class, Observable, will handle event publishing
//for us.
this.addEvents("add", "remove", "clear");
Samples.ObservableList.superclass.constructor.call(this);
};

Ext.extend(Samples.ObservableList, Ext.util.Observable, {
//Disable having functions as items.
allowFunctions: false,
//Our Class members go here...
});

Ext.extend(Samples.ObservableList, Ext.util.Observable, {
allowFunctions: false,
//Adds an item to the list and
//returns the position into which the new element was inserted.
add: function(o) {
this.items.push(o);
this.length++;
// Fire the add event, returning the position
// into which the new element was inserted.
pos = this.length - 1;
this.fireEvent("add", pos);
return pos;
},
// Inserts an item to the List at the specified index.
insert: function(index, o) {
//If the index is outside the list, insert the element at
// the end of the list.
if (index >= this.length) {
return this.add(o);
}
this.length++;
this.items.splice(index, 0, o);
this.fireEvent("add", index);
},
// Removes all items from the list.
clear: function() {
this.length = 0;
this.items = [];
this.fireEvent("clear");
},
// Determines the index of a specific item in the list.
indexOf: function(o) {
return this.items.indexOf(o);
},
// Determines whether the List contains a specific value.
contains: function(o) {
return this.indexOf(o) != -1;
},
// Our enumerator function. Executes the specified function
//once for every element in the list.
each: function(fn, scope) {
var items = [].concat(this.items); for (var i = 0, len = items.length; i < len; i++) {
if (fn.call(scope || items[i], items[i], i, len) === false) {
break;
}
}
},
custom JavaScript classescustom JavaScript classesbuilding// Removes the item at the specified index.
removeAt: function(index) {
if (index < this.length && index >= 0) {
this.length--;
var o = this.items[index];
this.items.splice(index, 1);
this.fireEvent("remove", o);
}
},
// Removes the first occurrence of a specific object.
remove: function(o) {
this.removeAt(this.indexOf(o));
},
// Return the element at the specified index.
item: function(index) {
var item = this.items[index];
return item;
}
});
Samples.ObservableList.prototype.get = Samples.ObservableList.prototype.item;

Ext.onReady(function() {
list = new Samples.ObservableList();
for (var i = 0; i < 15; i++) {
pos = list.add("test " + i);
}
// Add handlers for the list's events.
list.on("remove", function(o) {
alert("Removed: " + o);
});
list.on("add", function(index) {
alert("Added at position: " + index);
});
list.on("clear", function() {
alert("List length is: " + list.length);
});
document.write("List length is " + list.length + "<br/>");
// Insert an additional element and
//check that the add event fires.
var index = 2;
list.insert(index, "A new item");
document.write("Just inserted: " + list.item(index) + "<br/>");
document.write("List length is: " + list.length + "<br/>");
// Remove an item an verify that the remove event fires.
index = 5;
document.write("Removing item at position" + index + "<br/>");
list.removeAt(index);
document.write("List length after removal: " + list.length + "<br/>");
document.write("Clearing list...<br/>");
// Remove all items and check that the clear event fires.
list.clear();
document.write("List length after clear: " + list.length + "<br/>");
});