错误信息:
IE:SCRIPT1009: 缺少 '}'
FF:
SyntaxError: identifier starts immediately after numeric literal
..."id100", "statFlag":"0",stepList:[{"id":100step1,"jobId":100,"stepName":"100step...
出现错误的Ext代码:
data:{'total':[ {"id":"100", "jobName":"id100", "statFlag":"0",stepList:[{"id":100step1,"jobId":100,"stepName":"100step1","moniContent":null},{"id":100step2,"jobId":100,"stepName":"100step1","moniContent":null}]}, {"id":"101", "jobName":"id101", "statFlag":"0",stepList:[{"id":101step1,"jobId":101,"stepName":"101step1","moniContent":null},{"id":101step2,"jobId":101,"stepName":"101step1","moniContent":null}]}, {"id":"102", "jobName":"id102", "statFlag":"0",stepList:[{"id":102step1,"jobId":102,"stepName":"102step1","moniContent":null},{"id":102step2,"jobId":102,"stepName":"102step1","moniContent":null}]}, {"id":"103", "jobName":"id103", "statFlag":"0",stepList:[{"id":103step1,"jobId":103,"stepName":"103step1","moniContent":null},{"id":103step2,"jobId":103,"stepName":"103step1","moniContent":null}]} ]}, proxy: { type: 'memory', reader: { type: 'json', root: 'total' }
错误原因:
json数据中,字符串数据没有用引号
比较而言,FF的错误提示更准确
不知道怎么用Live Writer上传文件,就把完整代码粘上来,相关js,css文件可以去网上下
改正过的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- EXT --> <link rel="stylesheet" type="text/css" href="ext4.0/resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="ext4.0/shared/example.css" /> <script type="text/javascript" src="common/js/common.js"></script> <script type="text/javascript" src="ext4.0/bootstrap.js"></script> <script type="text/javascript" src="common/jquery/jquery-1.3.2.min.js"></script> <title>自动化查看</title> <style type="text/css"> .icon-grid { background-image:url(ext4.0/shared/icons/fam/grid.png) !important; } .icon-clear-group { background-image:url(ext4.0/shared/icons/fam/control_rewind.png) !important; } .progress-out{300px;height:20px;background:#EEE;} .progress-in{0px; height:20px;background:#AAA;color:white;text-align:center;} </style> <script type="text/javascript"> <!--// jQuery.noConflict(); Ext.Loader.setConfig({ enabled: true }); Ext.Loader.setPath('Ext.ux', 'ext4.0/ux'); Ext.onReady(function(){ //JOB 模型 Ext.define('Job', { extend: 'Ext.data.Model', fields: ['id', 'jobName','statFlag','stepList'] }); function statFlag(val,meta,model,rowIndex,colIndex) { if (val == 0) { return '<span style="color:#gray;">未运行</span>'; } else if (val == 1) { return '<span style="color:#9AD936;">正在执行</span>'; } else if (val == 2) { return '<span style="color:red;">运行出错</span>'; } else if (val == 3) { return '<span style="color:red;">告警一次</span>'; } return val; }; function stepFlag(val,meta,model,rowIndex,colIndex) { if(val == null || val == ''){ val = '<span style="color:#gray;">未运行</span>'; } return val; }; Ext.create('Ext.container.Viewport', { layout: 'border', padding:2, items: [{ region: 'center', layout:'border', border:false, flex:2, items:[ { region:'center', title:'总数据', frame:true, xtype:'grid', id:'jobGrid', columns: [{ text: 'ID', flex: 1, dataIndex: 'id' },{ text: '名称', flex: 1, dataIndex: 'jobName' },{ text: '运行状态', flex: 1, renderer:statFlag, dataIndex: 'statFlag' }], store:Ext.create('Ext.data.Store', { // autoLoad:true, model: 'Job', data:{'total':[ {"id":"100", "jobName":"id100", "statFlag":"0",stepList:[{"id":"100step1","jobId":"100","stepName":"100step1","moniContent":null},{"id":"100step2","jobId":"100","stepName":"100step1","moniContent":null}]}, {"id":"101", "jobName":"id101", "statFlag":"0",stepList:[{"id":"101step1","jobId":"101","stepName":"101step1","moniContent":null},{"id":"101step2","jobId":"101","stepName":"101step1","moniContent":null}]}, {"id":"102", "jobName":"id102", "statFlag":"0",stepList:[{"id":"102step1","jobId":"102","stepName":"102step1","moniContent":null},{"id":"102step2","jobId":"102","stepName":"102step1","moniContent":null}]}, {"id":"103", "jobName":"id103", "statFlag":"0",stepList:[{"id":"103step1","jobId":"103","stepName":"103step1","moniContent":null},{"id":"103step2","jobId":"103","stepName":"103step1","moniContent":null}]} ]}, proxy: { type: 'memory', reader: { type: 'json', root: 'total' } } }), listeners:{ 'selectionchange':function(_this,selected,eOpts){ if(selected.length > 0){ Ext.data.StoreManager.lookup('stepStore').loadData(selected[0].get('stepList')) } } } } ] }, { region: 'east', border:false, hideCollapseTool:true, collapsible: true, split: true, flex:1, layout:'border', items:[ { region:'center', flex:1, title:'步骤列表', frame:true, xtype:'grid', columns: [ { header: 'ID', dataIndex: 'id',flex:1}, { header: '步骤', dataIndex: 'stepName', flex: 2 }, { header: '状态', dataIndex: 'moniContent',flex: 2,renderer:stepFlag} ], store:Ext.create('Ext.data.Store', { storeId:'stepStore', fields:['id', 'stepName', 'moniContent','stepKey'], data:[], proxy: { type: 'memory', reader: { type: 'json' } } }) } ] }] }); }); //--> </script> </head> <body> </body> </html>