Collection of useful extensions

[emblemparade]

Hi all,

The MongoVision (http://code.google.com/p/mongo-vision/) project contains several well-documented, Apache-licensed, Ext JS extensions that are easily usable in other projects:

LoadMask (http://code.google.com/p/mongo-vision/source/browse/trunk/modules/mongovision/src/web/static/script/ux/LoadMask.js): adds a load mask to any component, identically to how it's used in a GridPanel. Supports both Store and TreeLoader.
PerPage (http://code.google.com/p/mongo-vision/source/browse/trunk/modules/mongovision/src/web/static/script/ux/PerPage.js): a PagingToolbar plugin that displays and lets the user change the number of documents per page.
ReusableJsonStore (http://code.google.com/p/mongo-vision/source/browse/trunk/modules/mongovision/src/web/static/script/ux/ReusableJsonStore.js): a JsonStore that allows its data to be copied to others without requiring another request to the server.
TextFieldPopup (http://code.google.com/p/mongo-vision/source/browse/trunk/modules/mongovision/src/web/static/script/ux/TextFieldPopup.js): a TextField plugin that opens a large editor when the TextField is double-clicks.
ThemeSwitcher (http://code.google.com/p/mongo-vision/source/browse/trunk/modules/mongovision/src/web/static/script/ux/ThemeSwitcher.js): allows the user to change the Ext JS and other stylesheets via a ComboBox. Very flexible!
HumanJSON (http://code.google.com/p/mongo-vision/source/browse/trunk/modules/mongovision/src/web/static/script/ux/HumanJSON.js): JSON output specializing in human readability

All were developed and tested with Ext JS 3.3.1.

Enjoy, send us patches, and keep contributing excellent open source Ext JS extensions! If you want to report bugs or request features, please use the MongoVision Google Code page.

The MongoVision project might also interest Ext JS users in its own right:

There's a natural fit between MongoDB (http://www.mongodb.org/), Ext JS and Prudence (http://threecrickets.com/prudence/)'s "Savory JavaScript" edition. With JavaScript in the database, the client and the server, you never have to switch languages. And Prudence's natural REST makes it very easy to work with Ext JS' RESTful data package.

Overall, we find the Linux/Ext-JS/MongoDB/Prudence stack (LEMP?) to be extremely productive.

To that end, we've also started a project (http://code.google.com/p/mongodb-rhino/) to provide high-performance integration between Rhino, Prudence's JavaScript engine, and MongoDB. We hope it will help promote adoption of MongoDB on the JVM.

[zombeerose]

I reworked your HumanJSON class for Ext 4.



/**
* Copyright 2010-2011 Three Crickets LLC.
*
* The contents of this file are subject to the terms of the Apache License
* version 2.0: http://www.opensource.org/licenses/apache2.0.php
*
* Alternatively, you can obtain a royalty free commercial license with less
* limitations, transferable or non-transferable, directly from Three Crickets
* at http://threecrickets.com/
*
* @author http://code.google.com/p/mongo-vision/source/browse/trunk/modules/mongovision/src/web/static/script/ux/HumanJSON.js
*
* A JSON encoder that supports optional multiline indenting, HTML vs. plain text,
* and removing curly brackets from the root object. The point is to produce
* human-readable JSON, not necessarily the most compact JSON.
*
* We've been inspired by the code in Ext.util.JSON, though have diverged
* significantly. We also use some code from Douglas Crockford's json2.js.


* @class Ext.ux.HumanJSON
* @singleton
*/
Ext.define('Ext.ux.HumanJSON',function(){
//private
var escapable = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g;
var meta = {
'\b': '\\b',
'\t': '\\t',
'\n': '\\n',
'\f': '\\f',
'\r': '\\r',
'"' : '\\"',
'\\': '\\\\'
};

/**
* @private
* @param {String} string
*/
function quote(string) {
// Yanked from Douglas Crockford's json2.js (public domain)

// If the string contains no control characters, no quote characters, and no
// backslash characters, then we can safely slap some quotes around it.
// Otherwise we must also replace the offending characters with safe escape
// sequences.

escapable.lastIndex = 0;

return escapable.test(string) ? '"' + string.replace(escapable, function(a) {
var c = meta[a];
return typeof c === 'string' ? c : '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
}) + '"' : '"' + string + '"';
}//eof quote

/**
* @private
* @param {Boolean} html
*/
function space(html) {
return html ? '   ' : '\t';
}

/**
* @private
*/
function toJSON(value, html, multiline, indent, depth) {
var json = ''
,indentation = ''
,i = 0
,length
,keys = []
,key;

if (multiline) {
for (i = 0; i < depth; i++) {
indentation += space(html);
}
}
if (indent) {
json += indentation;
}

if ((value == null) || !Ext.isDefined(value)) {
json += 'null';
}
else if (Ext.isString(value)) {
if (html) {
value = value.replace(/</g, '&lt;');
value = value.replace(/>/g, '&gt;');
}
json += quote(value);
}
else if (typeof value == 'number') {
// Don't use isNumber here, since finite checks happen inside isNumber
json += (isFinite(value) ? String(value) : 'null');
}
else if (Ext.isBoolean(value)) {
json += String(value);
}
else if (Ext.isArray(value)) {
json += html ? '<span class="json-symbol">[</span>' : '[';
length = value.length;
if (length > 0) {
if (multiline) {
json += html ? '<br/>' : '\n';
}
for (i = 0; i < length - 1; i++) {
json += toJSON(value[i], html, multiline, true, depth + 1) + (multiline ? (html ? ',<br/>' : ',\n') : ', ');
}
json += toJSON(value[i], html, multiline, true, depth + 1);
if (multiline) {
json += (html ? '<br/>' : '\n') + indentation;
}
}
json += html ? '<span class="json-symbol">]</span>' : ']';
}
else {
if (depth > -1) {
json += html ? '<span class="json-symbol">{</span>' : '{';
}
for (key in value) {
keys.push(key);
}
length = keys.length;
if (length > 0) {
if (multiline && (depth > -1)) {
json += html ? '<br/>' : '\n';
}
for (i = 0; i < length - 1; i++) {
if (multiline && (depth > -1)) {
json += indentation + space(html);
}
json +=
(html ? '<span class="json-key">' + keys[i] + ':</span> ' : keys[i] + ': ') +
toJSON(value[keys[i]], html, multiline, false, depth + 1) +
(multiline ? (html ? '<span class="json-symbol">,</span><br/>' : ',\n') : (html ? '<span class="json-symbol">,</span> ' : ', '));
}
if (multiline && (depth > -1)) {
json += indentation + space(html);
}
json +=
(html ? '<span class="json-key">' + keys[i] + ':</span> ' : keys[i] + ': ') +
toJSON(value[keys[i]], html, multiline, false, depth + 1);
if (multiline && (depth > -1)) {
json += (html ? '<br/>' : '\n') + indentation;
}
}
if (depth > -1) {
json += html ? '<span class="json-symbol">}</span>' : '}';
}
}


return json;
} //eof toJSON


//public
var pub = {
singleton: true



/**
* Generates friendly human-readable output of an object in a JSON style format.
* A JSON encoder that supports HTML vs. plain text output, optional multiline indenting,
* and removal of curly brackets from the root object. The point is to produce human-readable
* JSON, which may not necessarily be the most compact JSON.
*
* @param {Object} object
* @param {Boolean} html HTML vs plain text
* @param {Boolean} multiline
* @return {String}
*/
,encode: function(value, html, multiline) {
return toJSON(value, html, multiline, false, -1);
} //eof encode

};
return pub;

}());//eo class


//eo file

[emblemparade]

Thanks! :)

Actually, I have to -- MongoVision has already been updated to work with Ext JS 4, so all these extensions should be good to go.