Two-way conversion between objects and URL data is a challenge that Ext JS can help with. Let's examine how a JavaScript object can be encoded for transmission through the URL query string, as well as how information contained in a URL can be used to build a JavaScript object.
The following steps will guide you through the process of encoding and decoding URL data:
1. Take a
selectedColorsobject as the data to be passed in a URL:var selectedColors = {color1:'Blue', color2:'Red', color3:'White'};2. Convert the object to URL data like this:
var encodedUrl = Ext.urlEncode(selectedColors); // encodedUrl is an encoded URL query string: //color1=Blue&color2=Red&color3=White.
3. Now, a URL can be built using the data just created. For example,
http://MyGreatApp/SetSelectedColors?color1=Blue&color2=Red&color3=White.4. You can easily create objects from the encoded URL. Assuming we obtained the data from the URL we used above
(http://MyGreatApp/SetSelectedColors?color1=Blue&color2=Red&color3=White), obtain the URL data like this:encodedUrl = location.search;
5. Re-create the
selectedColorsobject as follows: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'.
Ext.urlEncode(object) and Ext.urlDecode(string, overwrite) provide object serialization to URL data and URL data deserialization to objects respectively. Encoding is accomplished by creating the URL query string's key-value pairs based on each object property, or array value passed to the encoding function. Decoding is accomplished by creating an object with a property for each key-value pair that exists in the URL's query string.
You can use this recipe when your application needs to send information to the server via AJAX or standard HTTP requests, as well as when you need to use the URL's query string to feed the application data that can later be converted to JavaScript objects.