Source: tool/JsonEditor.js

/**
 *  以列表的形式 编辑json对象
 */
Rsd.define('Rsd.tool.JsonEditor', {
    extend: 'Rsd.container.Dialog',
    requires: [
        'Rsd.control.Grid',
        'Rsd.form.Label',
        'Rsd.form.Button'
    ],
    xtype: 'json-editor',
    width:800,
    height:600,
    items: [
        {
            xtype:'grid',
            readOnly:false,
            label:false,
            border:false,
            width:'100%',
            overflow:'auto',
            style:{backgroundColor:'rgba(255, 255, 255, 0.25)'},
            columns:[
               
                {text:'值',width:'60%',dataIndex:'value',editable:true},
                {dataIndex:'op',width:'10%'}
            ], 
            /**
             * 通过rowdblclick实现自定义编辑
            */
            rowdblclick:'pr_rowdblclick', 
            /**
             * 通过rowclick实现自定义编辑
             */
            rowclick:'pr_rowdblclick', 
            /**
             * change 事件
             */
            onChanged:null,
            flex:1
        },
        {
            xtype:'container',
            height:70,
            items:
            [
                {
                    xtype:'button',
                    text:'保存'
                }
            ]
        }
    ],
    /**
     * 
     * @param {*} config 
     */
    constructor: function JsonEditor(config) {
        config = config || {};
        this.apply(config); 
    },
    /*
    * */
    load:function load(json) {
 
        this.data = json||this.data||{}; 
        
        var _grid = this.items[0];
        _grid.loadData(this.data);
    },
     /**
         * 
         * @param {*} row 
         * @param {*} data 
         */
    pr_rowdblclick:function pr_rowdblclick(row,data) {
        var me = this;
        var grid = this.items[0];
        var rowIndex = data.rowIndex;
        //console.log(row),console.log(data);
        if(row['___edit']===false)
        {
            return;
        }
        if(row['value'] instanceof  Element)
        {
            return;
        }
       
        if(Rsd.isObject(row['value']))
        {
            Rsd.create(me.$className,{
                parent:me,
                width:'80%',
                height:'80%',
                data:row['value']
            }).showDialog();

            return;

        }
       if(Rsd.isArray(row['value']))
       {
            Rsd.create(me.$className,{
                parent:me,
                width:'80%',
                height:'80%',
                data:row['value']
            }).showDialog();

            return;
       }
        {
            grid.editRow(rowIndex, true,1,Rsd.widget(row['xtype']||'text',{
                //margin:'3 5 3 5',
                width:'100%',
                height:'90%',
                name:row['name'],
                textChanged:function (sender,event) {
                
                    me.data[sender.name] = sender.getValue();
                    me.funApplyByIOC(me.onChanged,[me.data])

                },
            }));
        }
    }

});