1. 定義壹個Store對象,並設置它的proxy屬性為API接口的URL,例如:
```
Ext.define('MyApp.store.MyStore', {
extend: 'Ext.data.Store',
alias: 'store.mystore',
model: 'MyApp.model.MyModel',
proxy: {
type: 'ajax',
url: '/api/data', // 這裏是API接口的URL
reader: {
type: 'json',
rootProperty: 'data'
}
}
});
```
在上述代碼中,`proxy`屬性用於指定數據的加載和保存方式,這裏使用了`ajax`類型的proxy,並設置了URL為`/api/data`。
2. 在需要調用接口的地方,實例化這個Store對象,並調用其`load()`方法來加載數據,例如:
```
var myStore = Ext.create('MyApp.store.MyStore');
myStore.load({
callback: function(records, operation, success) {
// 數據加載完成後的回調函數
if (success) {
// 數據加載成功
// 可以在這裏對加載到的數據進行進壹步處理
} else {
// 數據加載失敗
// 可以在這裏進行錯誤處理
}
}
});
```
在上述代碼中,通過`create()`方法實例化了`MyStore`對象,然後調用`load()`方法來加載數據。在加載完成後的回調函數中,可以對加載到的數據進行進壹步處理。
原因解釋:ExtJS中的Store對象用於管理前端應用程序與後端數據之間的交互。通過設置Store的proxy屬性為API接口的URL,可以告訴Store從哪裏獲取數據。調用Store的`load()`方法後,ExtJS會自動發送Ajax請求到指定的API接口,並將獲取到的數據加載到Store中。
拓展內容:除了調用接口獲取數據,Store還提供了其他壹些方法和事件,用於對數據進行增刪改查的操作。例如,可以使用Store的`add()`方法來添加新的記錄,使用`remove()`方法來刪除記錄,使用`sync()`方法將修改的數據保存到後端等。此外,Store還可以與Grid、Form等組件進行綁定,實現數據的展示和編輯功能。通過深入學習Store的API文檔和示例,可以更好地理解和使用ExtJS中的數據管理功能。