ExtJS 提供了一個(gè)方便的方法將 JSON 數(shù)據(jù)與 ExtJS 組件進(jìn)行綁定，從而快速構(gòu)建富交互式的 Web 應(yīng)用程序。當(dāng)我們在使用 ExtJS 構(gòu)建應(yīng)用程序時(shí)，有時(shí)候我們需要在 JSON 數(shù)據(jù)中添加一些額外的值，這些值可以用于在組件之間傳遞信息，或者在數(shù)據(jù)加載時(shí)提供更多的上下文信息。下面是一個(gè)示例，可以看到如何向 JSON 中添加額外的 value。

// JSON 數(shù)據(jù)源
var data = {
"title": "ExtJS JSON 加 Value 示例",
"url": "http://www.example.com",
"author": {
"name": "John Doe",
"email": "john.doe@example.com"
}
};
// 在 JSON 中添加額外的 value
data["extraValue"] = "這是一個(gè)額外的值";
// 創(chuàng)建 ExtJS 組件
var panel = new Ext.Panel({
title: data.title,
html: "
更多信息請(qǐng)?jiān)L問" + data.url + "
",
items: [
{
xtype: "textfield",
fieldLabel: "作者姓名",
value: data.author.name
},
{
xtype: "textfield",
fieldLabel: "作者郵箱",
value: data.author.email
}
]
});
// 顯示組件
panel.render(document.body);

在上面的示例中，我們在 JSON 數(shù)據(jù)源中添加了一個(gè)名為 extraValue 的值。這個(gè)值可以被傳遞到創(chuàng)建的 ExtJS 組件中的任何地方，比如可以放在組件的 config 中，或者直接在組件的方法中使用。

使用 ExtJS 的 jsonReader 或者 ext.data.JsonStore 來處理 JSON 數(shù)據(jù)時(shí)，也可以輕松地訪問這些額外的 value。只需要在 jsonReader 或者 JsonStore 的配置中設(shè)置屬性 root，讓其指向包含 extraValue 的 JSON 數(shù)據(jù)即可：

var store = new Ext.data.JsonStore({
url: "data.json",
root: "data",
fields: [
"title",
"url",
"author.name",
"author.email",
"extraValue"
]
});
// 顯示數(shù)據(jù)
store.load();
store.each(function(record) {
console.log(record.get("extraValue"));
});

在上面的示例中，我們在 JsonStore 的配置中設(shè)置了 root 屬性，讓其指向包含 extraValue 的 JSON 數(shù)據(jù)。在使用 each 方法遍歷數(shù)據(jù)時(shí)，我們可以輕松地訪問 extraValue 的值。