ExtJS是一個基于JavaScript語言的前端開發(fā)框架,它提供了豐富的UI組件和通用功能,適用于各種Web應用程序的開發(fā)。其中,JSON數(shù)據(jù)是ExtJS中不可缺少的一部分。JSON(JavaScript Object Notation)是一種輕量級數(shù)據(jù)交換格式,在Web應用程序中被廣泛使用。
在ExtJS中,我們可以使用Ext.Ajax.request方法來從服務器獲取JSON數(shù)據(jù),也可以使用Ext.data.JsonStore來讀取本地JSON數(shù)據(jù)。這些JSON數(shù)據(jù)可以是一個對象,也可以是一個數(shù)組。以下是一個簡單的JSON數(shù)據(jù)示例:
{ "name": "Tom", "age": 24, "gender": "male" }
我們可以通過以下代碼將該JSON數(shù)據(jù)請求從服務器并顯示在頁面上:
Ext.Ajax.request({ url: 'http://example.com/data.json', success: function(response){ var data = Ext.decode(response.responseText); Ext.getBody().createChild(data.name + ' is ' + data.age + ' years old and ' + data.gender + '.'); } });
在上面的代碼中,我們首先使用Ext.Ajax.request方法發(fā)送請求,指定JSON數(shù)據(jù)的URL地址。當成功獲取JSON數(shù)據(jù)后,我們將其解析為JavaScript對象,并使用Ext.getBody().createChild方法將數(shù)據(jù)顯示在頁面上。
除了從服務器獲取JSON數(shù)據(jù)外,我們還可以使用Ext.data.JsonStore來讀取本地JSON數(shù)據(jù)。以下是一個簡單的本地JSON數(shù)據(jù)示例:
[{ "name": "Tom", "age": 24, "gender": "male" },{ "name": "Lucy", "age": 22, "gender": "female" }]
我們可以通過以下代碼將該本地JSON數(shù)據(jù)讀取并顯示在頁面上:
var store = Ext.create('Ext.data.JsonStore', { fields: ['name', 'age', 'gender'], data: [{ "name": "Tom", "age": 24, "gender": "male" },{ "name": "Lucy", "age": 22, "gender": "female" }] }); Ext.create('Ext.grid.Panel', { renderTo: Ext.getBody(), store: store, columns: [{ text: 'Name', dataIndex: 'name' },{ text: 'Age', dataIndex: 'age' },{ text: 'Gender', dataIndex: 'gender' }] });
在上面的代碼中,我們首先通過Ext.data.JsonStore創(chuàng)建了一個本地JSON數(shù)據(jù)的Store,并指定了數(shù)據(jù)的各個字段。然后,我們創(chuàng)建了一個Grid來顯示該數(shù)據(jù),指定了Store和每列的數(shù)據(jù)字段。
總的來說,JSON數(shù)據(jù)在ExtJS中被廣泛使用,通過使用Ext.Ajax.request和Ext.data.JsonStore,我們可以方便地讀取和顯示JSON數(shù)據(jù)。在使用JSON數(shù)據(jù)時,我們需要注意其格式和語法,以避免出現(xiàn)錯誤。