Ext.data.Store是Ext JS的數據存儲組件,提供了對數據的存儲和管理。但是在使用時,我們通常需要從后端獲取數據來填充數據存儲。這時候,就需要一種格式來描述數據。JSON是一種輕量級的數據交換格式,被廣泛應用于Web開發。因此,Ext.data.Store提供了對于JSON數據的支持,便于從后端獲取的JSON數據填充數據存儲。
Ext.create('Ext.data.Store', { storeId: 'exampleStore', fields: ['name', 'age', 'gender'], proxy: { type: 'ajax', url: 'example.php', reader: { type: 'json', rootProperty: 'data' } }, autoLoad: true });
在上面的代碼中,我們創建了一個Ext.data.Store數據存儲,其中設置了storeId、fields、proxy和autoLoad等屬性。重點講解proxy屬性,該屬性用于配置數據存儲的數據代理。本例中,我們使用的是ajax代理,指定了一個URL用于從后端獲取數據。同時,指定了一個JSON的reader來解析后端返回的JSON數據。其中,rootProperty是在解析JSON數據時指定的參數,用于告訴解析器數據從哪里開始。因此,在返回的JSON數據中,我們需要將真實的數據包裹在一個data數組中,以便于Ext.data.Store的JSON解析器能夠正確地解析JSON數據。
對于從后端獲取的JSON數據,我們需要保證其格式正確,符合Ext.data.Store的解析規則。如下所示:
{ "success": true, "data": [ { "name": "Tom", "age": 20, "gender": "male" }, { "name": "Lucy", "age": 19, "gender": "female" } ] }
在JSON數據中,我們需要包含一個success屬性,用于表示數據是否獲取成功。同時,需要包含一個data屬性,用于存放真實的數據。對于每一個數據對象,我們需要保證其屬性名與前文定義的fields屬性一一對應,用于Ext.data.Store正確地填充數據。