Extjs報錯處理

developerguy發表於2013-09-10
JS

錯誤資訊：

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{width:300px;height:20px;background:#EEE;}
        .progress-in{width: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>
 
 
 
 
 
 


相關文章