ExtJS 是一款流行的 JavaScript 框架,可用于構建創建富 Web 應用程序和用戶界面。在 ExtJS 中,我們可以很容易地讀取本地 JSON 文件并在我們的應用程序中使用它。
要讀取本地 JSON 文件,我們需要使用 Ext.Ajax.request() 方法并設置它的 dataType 為 'json'。下面是一個簡單的例子:
Ext.Ajax.request({
url: 'example.json',
dataType: 'json',
success: function(response) {
console.log(response.responseText);
},
failure: function(response) {
console.error(response.statusText);
}
});
在上面的代碼中,我們使用了 Ext.Ajax.request() 方法,并提供了 JSON 文件的路徑,dataType 為 'json',以及一個成功和失敗的回調。如果讀取成功,我們可以在成功回調函數中訪問 response.responseText,并將其解析為 JSON 對象來使用它。
我們還可以使用 Ext.data.Store 類來讀取 JSON 文件。這是一個更方便的方法,因為它允許我們設置數據模型,以便更好地管理和使用數據。
Ext.define('ExampleModel', {
extend: 'Ext.data.Model',
fields: ['name', 'age']
});
var store = Ext.create('Ext.data.Store', {
model: 'ExampleModel',
proxy: {
type: 'ajax',
url: 'example.json',
reader: {
type: 'json'
}
},
autoLoad: true
});
在上面的代碼中,我們定義了一個 ExampleModel,它指定了需要展示的字段。然后,我們創建了一個名稱為“store”的對象,并使用 Ext.create() 方法創建它。我們定義了一個代理,該代理使用了 AJAX 方法來讀取 JSON 文件,并將 reader 類型設置為 JSON。autoLoad 屬性設置為 true,以便在創建 Store 對象后自動加載。
以上是 ExtJS 中讀取本地 JSON 文件的兩種方法。它們都是非常簡單和易于實現的。使用這些方法,我們可以很輕松地讀取本地 JSON 文件,并使用數據來構建功能強大的 Web 應用程序。