PDA

View Full Version : Adding JSonEditor to ExtJS page



eyo
6 Jan 2015, 5:46 AM
Hello all,

I'm using MVC and I want to add a JSonEditor to my view. (https://github.com/josdejong/jsoneditor/)

I can add it to normal js file but I don't know how to add to extjs file as a component. Could you please explain how can i do it?

Regards, eyo.

lumberjack
8 Jan 2015, 11:49 AM
That's a bit outside of the Sencha support scope and I don't have any experience with that myself.? I'll defer to the community's collective experience on this one.? Best of luck!


Thanks,
Brian

eyo
17 Jan 2015, 1:04 AM
I made something and it seems working. Open for discuss :) Enjoy it!



Ext.define( 'Ext.ux.jsoneditor.JSONEditor' , {
extend : 'Ext.form.field.Base' ,
alias : 'widget.jsoneditor' ,

labelAlign : 'top' ,
height : '100%' ,
flex : 1 ,
border : false ,

value : null ,
container : null ,
editor : null ,
readOnly : false ,

listeners : {
afterrender : function () {
this.jsonEditorReady();
} ,
resize : function ( win , width , height ) {
this.container.setHeight( height - 20 );
}
} ,

fieldSubTpl : [ '<div id="{id}" style="height: 100%;width: 100%;overflow: auto"></div>',
{disableFormats : true} ] ,



initComponent : function () {
this.callParent( arguments );
} ,

jsonEditorReady : function () {

/**
* this.getSubTplData().id = <div id="{id}">
*/
this.container = Ext.get( this.getSubTplData().id );

/**
* Available modes :
* 'tree' : - Edit, add, move, remove, and duplicate fields and values.
* - Change type of values.
* - Sort arrays and objects.
* - Colorized code.
* - Search & highlight text in the treeview.
* - Undo and redo all actions.
* 'code' : - Format and compact JSON.
* - Colorized code (powered by Ace).
* - Inspect JSON (powered by Ace).
* 'view' : Readonly
* 'form' : Readonly
* 'text' : Format and compact JSON
*
### Usage :
* options : {
* mode: 'tree',
* // allowed modes, this will create combobox.
* modes: ['code', 'form', 'text', 'tree', 'view']
* }
*/
this.options = { mode : (this.readOnly ? 'view' : 'tree') };

this.editor = new JSONEditor( this.container , this.options , this.value );
} ,

getValue : function () {
return this.editor ? this.editor.getText() : null;
} ,

/**
* value : jsonObject
*/
setValue : function ( value ) {
if ( this.editor ) return this.editor.setText( value );
} ,

setReadOnly : function ( readOnly ) {
var childNodes = document.getElementById( this.getSubTplData().id ).childNodes;

if ( Ext.isDefined( childNodes ) && childNodes.length > 0 ) {

/**
* There was a bug from jsoneditoronline. For fixing it we wrote this code.
*/
if ( Ext.get( childNodes[0].id ) ) {
Ext.get( childNodes[0].id ).destroy();
}
this.editor.setMode( readOnly ? 'view' : 'tree' );
}
}
} );


You can call it with:


{
xtype : 'jsoneditor' ,
name : 'schema' ,
fieldLabel : 'Schema'
}


You have to add to your index page;


<!-- JsonEditor -->
<link rel="stylesheet" type="text/css" href="resources/jsoneditor/jsoneditor.css" />
<script src="resources/jsoneditor/jsoneditor.js"></script>
<script src="resources/jsoneditor/asset/ace/ace.js"></script>
<script src="resources/jsoneditor/asset/jsonlint/jsonlint.js"></script>


You can download them: https://github.com/josdejong/jsoneditor/
(https://github.com/josdejong/jsoneditor/)
(https://github.com/josdejong/jsoneditor/)Thanks!
eyo