未捕獲SyntaxError與extjs 4

Question

我一直在獲取UnCaught SyntaxError：意外令牌：。

我真的很困惑這會來自哪裏。當我使用JSON樣品它的工作原理

http://www.sencha.com/forum/topics-browse-remote.php

問題，也許我應該用HTTPPROXY。但我不確定如何納入這一點。

Ext.Loader.setConfig({ enabled: true }); 

Ext.Loader.setPath('Ext.ux', '../ux/'); 
Ext.require([ 
    'Ext.grid.*', 
    'Ext.data.*', 
    'Ext.util.*', 
    'Ext.toolbar.Paging', 
    'Ext.ux.PreviewPlugin', 
    'Ext.ModelManager', 
    'Ext.tip.QuickTipManager' 
]); 



Ext.onReady(function() { 
    Ext.tip.QuickTipManager.init(); 

    Ext.define('ForumThread', { 
     extend: 'Ext.data.Model', 
     fields: [ 
      'title', 'threadid' 
     ], 
     idProperty: 'threadid' 
    }); 

    // create the Data Store 

    var store = Ext.create('Ext.data.Store', { 
     pageSize: 50, 
     model: 'ForumThread', 
     remoteSort: true, 

     proxy: { 
         type: 'jsonp', 
      //url: 'http://www.sencha.com/forum/topics-browse-remote.php', 
      url: 'https://www.estore.localhost/usergrid/indexgrid', 
      reader: { 
       root: 'topics', 
       totalProperty: 'totalCount' 
      }, 
      // sends single sort as multi parameter 
      simpleSortMode: true 
     }, 
     sorters: [{ 
      property: 'title', 
      direction: 'DESC' 
     }] 
    }); 

    // pluggable renders 
    function renderTopic(value, p, record) { 
     return "test"; 
    } 


    var pluginExpanded = true; 
    var grid = Ext.create('Ext.grid.Panel', { 
     width: 700, 
     height: 500, 
     title: 'ExtJS.com - Browse Forums', 
     store: store, 
     disableSelection: true, 
     loadMask: true, 
     viewConfig: { 
      id: 'gv', 
      trackOver: false, 
      stripeRows: false, 
      plugins: [{ 
       ptype: 'preview', 
       bodyField: 'excerpt', 
       expanded: true, 
       pluginId: 'preview' 
      }] 
     }, 
     // grid columns 
     columns: [{ 
      // id assigned so we can apply custom css (e.g. .x-grid-cell-topic b { color:#333 }) 
      // TODO: This poses an issue in subclasses of Grid now because Headers are now Components 
      // therefore the id will be registered in the ComponentManager and conflict. Need a way to 
      // add additional CSS classes to the rendered cells. 
      id: 'topic', 
      text: "Topic", 
      dataIndex: 'title', 
      flex: 1, 
      renderer: renderTopic, 
      sortable: false 
     }], 
     // paging bar on the bottom 
     bbar: Ext.create('Ext.PagingToolbar', { 
      store: store, 
      displayInfo: true, 
      displayMsg: 'Displaying topics {0} - {1} of {2}', 
      emptyMsg: "No topics to display", 
      items: [ 
       '-', { 
        text: 'Show Preview', 
        pressed: pluginExpanded, 
        enableToggle: true, 
        toggleHandler: function (btn, pressed) { 
         var preview = Ext.getCmp('gv').getPlugin('preview'); 
         preview.toggleExpanded(pressed); 
        } 
       }] 
     }), 
     renderTo: 'topic-grid' 
    }); 

    // trigger the data store load 
    store.loadPage(1); 
}); 

這裏是JSON

{ 
    "totalCount": "4", 
    "topics": [{ 
     "threadid": "435", 
     "title": "55e38867-2b1e-4fc4-8179-5907c1c80136" 
    }, { 
     "threadid": "444", 
     "title": "4975db6c-d9cd-4628-a6e9-ca1d4815d28d" 
    }, { 
     "threadid": "529", 
     "title": "c778e5ea-eb79-42b1-8f13-7cba4600491f" 
    }, { 
     "threadid": "530", 
     "title": "a1024264-9eed-4784-ab91-cf2169151478" 
    }] 

}

Answer 1

通知，原（煎茶例如）URL返回一些額外的數據，不僅JSON。

讓你響應這個樣子的：

Ext.data.JsonP.callback1({ 
    "totalCount": "4", 
    "topics": [{ 
     "threadid": "435", 
     "title": "55e38867-2b1e-4fc4-8179-5907c1c80136" 
    }, { 
     "threadid": "444", 
     "title": "4975db6c-d9cd-4628-a6e9-ca1d4815d28d" 
    }, { 
     "threadid": "529", 
     "title": "c778e5ea-eb79-42b1-8f13-7cba4600491f" 
    }, { 
     "threadid": "530", 
     "title": "a1024264-9eed-4784-ab91-cf2169151478" 
    }] 
}); 

Answer 2

jsonP是在不同的域中從服務器獲取數據的特殊技術。的jsonP的主要思想是，

JsonPProxy注入一個<script>標籤到DOM每當一個AJAX請求 通常會進行

所以，想象一下，如果代理處理你的JSON會發生什麼。它會注入<script>標籤是這樣的：

<sript> 
{ 
    "totalCount": "4", 
    "topics": [{ 
     "threadid": "435", 
     "title": "55e38867-2b1e-4fc4-8179-5907c1c80136" 
    }, 
    // ... 
    ] 
} 
</script> 

當執行它這個腳本defenetly拋出異常。

因此，像Xupypr MV已經寫了，你應該換你outcoming - 從服務器字符串爲：

myCallback(
    //your json here 
); 

在這種情況下JsonPProxy將注入<script>這樣的：

<sript> 
myCallback({ 
    "totalCount": "4", 
    "topics": [{ 
     "threadid": "435", 
     "title": "55e38867-2b1e-4fc4-8179-5907c1c80136" 
    }, 
    // ... 
    ] 
}); 
</script> 

和這將是有效的<script>標記。

現在，你有你正在使用「myCallBack函數」作爲回調函數（注意callbackKey配置）店表示：

var store = Ext.create('Ext.data.Store', { 
    // ... 
    proxy: { 
     type: 'jsonp', 
     url: 'https://www.estore.localhost/usergrid/indexgrid', 
     callbackKey: 'myCallback', 
     // ... 
    }, 
    // ... 
}); 

退房docs獲取更多信息。

Answer 3

我遇到了同樣的問題，花了我一段時間才弄明白。

我使用Sencha Touch 2，它也實現了Ext.data.proxy.JsonP。 Extjs 4代理每次發送到服務器時都會自動創建一個回調參數，例如， callback1，callback2，依次。捕獲此參數並將其與json一起返回非常重要，否則第二次調用它時會抱怨沒有callback1方法。

本頁的「在服務器端實現」部分 http://docs.sencha.com/touch/2-0/#!/api/Ext.data.proxy.JsonP 描述瞭如何使用JsonP創建回調。我想原來的例子http://www.sencha.com/forum/topics-browse-remote.php也這樣做。

Answer 4

我也有同樣的問題，並且是服務器端代碼中的錯誤。我使用的是PHP文件，但沒有從前端追加回調。所以http://docs.sencha.com/touch/2-0/#!/api/Ext.data.proxy.JsonP有利於這也解釋了不同類型的服務器端代碼爲JSONP請求結構

感謝 Tapaswini