ExtJS中格式化json显示


,  {
    xtype: 'button',
    text: '格式化',
    iconCls: 'icon-edit',
    colspan: 2,
    width: 100,
    margin: "-23 0 0 70",
    listeners: {
        'click': {
            fn: this.formatJson,
            scope: this
        }
    }
}

formatJson : function(options) {
    var dataform = this.down('dataform');
    var json=dataform.down("[name='actConfigValue']").getValue();
    var reg = null,
        formatted = '',
        pad = 0,
        PADDING = '    '; // one can also use '\t' or a different number of spaces

    // optional settings
    options = options || {};
    // remove newline where '{' or '[' follows ':'
    options.newlineAfterColonIfBeforeBraceOrBracket = (options.newlineAfterColonIfBeforeBraceOrBracket === true) ? true : false;
    // use a space after a colon
    options.spaceAfterColon = (options.spaceAfterColon === false) ? false : true;

    // begin formatting...
    if (typeof json !== 'string') {
        // make sure we start with the JSON as a string
        json = JSON.stringify(json);
    } else {
        // is already a string, so parse and re-stringify in order to remove extra whitespace
        json = JSON.parse(json);
        json = JSON.stringify(json);
    }

    // add newline before and after curly braces
    reg = /([\{\}])/g;
    json = json.replace(reg, '\r\n$1\r\n');

    // add newline before and after square brackets
    reg = /([\[\]])/g;
    json = json.replace(reg, '\r\n$1\r\n');

    // add newline after comma
    reg = /(\,)/g;
    json = json.replace(reg, '$1\r\n');

    // remove multiple newlines
    reg = /(\r\n\r\n)/g;
    json = json.replace(reg, '\r\n');

    // remove newlines before commas
    reg = /\r\n\,/g;
    json = json.replace(reg, ',');

    // optional formatting...
    if (!options.newlineAfterColonIfBeforeBraceOrBracket) {
        reg = /\:\r\n\{/g;
        json = json.replace(reg, ':{');
        reg = /\:\r\n\[/g;
        json = json.replace(reg, ':[');
    }
    if (options.spaceAfterColon) {
        reg = /\:/g;
        json = json.replace(reg, ': ');
    }

    $.each(json.split('\r\n'), function(index, node) {
        var i = 0,
            indent = 0,
            padding = '';

        if (node.match(/\{$/) || node.match(/\[$/)) {
            indent = 1;
        } else if (node.match(/\}/) || node.match(/\]/)) {
            if (pad !== 0) {
                pad -= 1;
            }
        } else {
            indent = 0;
        }

        for (i = 0; i < pad; i++) {
            padding += PADDING;
        }

        formatted += padding + node + '\r\n';
        pad += indent;
    });
    dataform.down("[name='actConfigValue']").setValue(formatted);
    // return formatted;
},
时间: 2024-10-13 08:43:51

ExtJS中格式化json显示的相关文章

javascript格式化json显示实例分析

  javascript格式化json显示.          实例分析了javascript操作json格式化的相关技巧,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了javascript格式化json显示方法.分享给大家供大家参考.具体分析如下: 将json对象或者json字符串格式化方便在网页上限制 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

javascript格式化json显示实例分析_javascript技巧

本文实例讲述了javascript格式化json显示方法.分享给大家供大家参考.具体分析如下: 将json对象或者json字符串格式化方便在网页上限制 var formatJson = function(json, options) { var reg = null, formatted = '', pad = 0, PADDING = ''; //one can also use '\t' or a different number of spaces // optional settings

extjs combobox 在 IE 中无法正常显示的问题解决

关于extjs combobox 在 IE 中无法正常显示的问题解决 ,我们经过分析实现,最后给解决办法.下面看实例. combobox中的数据由服务端数据填充,刚一开始很多网上的例子都是少了一句,如下 var companies = new Ext.data.JsonStore({     url: '/Company/GetCompanies/',     root: 'companies',     fields: [ { name: 'CompanyID' }, { name: 'Com

extjs中如何用GridPanel显示xml格式的数据

问题描述 extjs中如何用GridPanel显示xml格式的数据 我代码运行时没有报错误,就是显示不出来我要的数据extjs代码如下:Ext.onReady(function(){ //Ext.BLANK_IMAGE_URL=""../Ext/resources/images/default/s.gig""; //记录类型var Person=new Ext.data.Record.create([{name:""id""m

布局-Extjs中panel嵌套不显示的问题

问题描述 Extjs中panel嵌套不显示的问题 Ext.namespace("ideaproject.js"); var _login = ideaproject.js; _login.createPanel = function(){ var panel = new Ext.Panel({ renderTo : 'loginpanel', layout:"border", width:525, height:290, defaults:{border:false

ExtJs中chart图表中能否将数据直接显示在图表上

问题描述 ExtJs中chart图表中能否将数据直接显示在图表上.现在只能通过将鼠标放上去才显示数据,有没有把值也在图表标示出来. 解决方案 解决方案二:感觉应该可以吧,你研究下setting配置文件解决方案三:对了,找官网上的example翻翻,看有没有是你需要的例子.解决方案四:它默认的都是tootip的做也是可以做的这个Ext自身没有封装其实这种图标的东西目前大都是这种的包括googleapi中大多都是这种风格的我们也可以不必非得在上边显示解决方案五:谢谢上面几位回复,找了一些资料好像都不

jsp-在JSP中引用了ExtJS框架,为什么显示不正常?

问题描述 在JSP中引用了ExtJS框架,为什么显示不正常? 解决方案 解决方案二: 样式没有正确倒入吧,什么版本的ext,而且怎么倒入了2次ext框架

Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法_extjs

在Extjs中的GridPanel会有这样的情况,隐藏列会显示在menuDisabled中 如下图: 但是这个一般没有什么用处,只是用于后台取值的作用. so  加一个属性:hideable:false就可以搞定了 复制代码 代码如下: { header: "attendanceId", dataIndex: "attendanceId", hideable: false, hidden: true },

extjs传值问题,显示不正确

问题描述 extjs传值问题,显示不正确 { layout:'column', width:210, border:false, items:[{ border:false, height:104, width:210, bodyStyle : 'padding-left:15px', html:' 提示:' +'普通提现是第二个工作日处理出款,出款后1-24小时内到账:加急提现是当天处理出款,当天到账(节假日非工行加急到账时间视银行处理为准),收取'+ {name:'charges',xtyp