JSON Editor Column

The component bpcSettingColumn can be used in the Ext.grid.Panel for JSON settings. Once this column has been integrated into the grid, a "Preview" of the JSON object can be displayed in the column. In addition, the column provides a JSON editor that allows you to modify the JSON value by clicking on the cell. The following shows how to use this component in code.

Usage

Requirement:

CellEditing plugin enabled (see also: Ext.grid.plugin.CellEditing)
Store data model is BpcCommon.component.data.ObservableModel or a derivative of this model (see also: BpcCommon.component.data.ObservableModel)

Sample code for the column component

/**
 * This component should be defined under grid configuration -> columns: []
 */
{
   xtype : "bpcSettingColumn",
   dataIndex : "dataIndex",
   text : "My JSON Column"

   /**
    * If type is set to JSON, this column will
    * provide a json preview and a json editor
    */
   type : "json",

   /**
    * Set title for the json editor, which is in external popup window
    */
   codeEditorTitle : "My JSON Editor",
   // ...... Further configs as grid column
}
});

Sample code – usage in Ext.grid.Panel

The column can be used as follows in a Ext.grid.Panel.

Ext.create("Ext.window.Window", {
   title   : "Demo JSON Editor Column",
   height  : 200,
   width   : 500,
   items: [
      {
         xtype   : "grid",
         height  : 200,
         width   : 500,

         // ATTENTION: This plugin must be activated
         plugins : {
            cellediting : {
               clicksToEdit : 1
            }
         },
         store : {
            // ATTENTION: Store must use this data model
            model : "BpcCommon.component.data.ObservableModel",
            data  : [
               { text: "Edit Dummy Object", myJsonData: { foo: "bar", barrr: "fooo" } },
               { text: "Edit Dummy Array", myJsonData: [{ foo: "bar", barrr: "fooo" }] }
            ]
         },
         columns : [
            {
               text      : "Text",
               dataIndex : "text",
               flex      : 1
            },
            {
               xtype           : "bpcSettingColumn",
               text            : "My JSON Column",
               dataIndex       : "myJsonData",
               flex            : 3,
               type            : "json",
               codeEditorTitle : "My JSON Editor"
            }
         ]
      }
   ]
}).show();

Demo

jsonEditorColumn

Source code

Keywords: