以下是Sencha.com Ext JS 4示例中“cell-editing.js”文件的片段。我想使用json.get将此xml数据存储转换为json数据存储。并获得一个示例json文件，以便我可以将其转换为动态json。注意，请参阅“//创建数据存储”下的代码块。现在，它显示的是xml格式。怎么办呢？
示例：
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/grid/cell-editing.html
（4.1.0的版本将来可能会改变）
我用他们的treegrid.js文件做了类似的事情，但是因为单元格编辑示例的结构包含多个字段类型（字符串，组合框/选择，布尔等等），我不知道是什么需要json文件的结构。这是treegrid.js代码：
var store = Ext.create('Ext.data.TreeStore', {
model: 'Task',
proxy: {
type: 'ajax',
url: 'http://localhost:8888/TreeGrid.ashx' // OR set to static file 'treegrid.json'
},
folderSort: true
});
“cell-editing.js”文件：
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.selection.CellModel',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*',
'Ext.form.*',
'Ext.ux.CheckColumn'
]);
Ext.onReady(function(){
function formatDate(value){
return value ? Ext.Date.dateFormat(value, 'M d, Y') : '';
}
Ext.define('Plant', {
extend: 'Ext.data.Model',
fields: [
// the 'name' below matches the tag name to read, except 'availDate'
// which is mapped to the tag 'availability'
{name: 'common', type: 'string'},
{name: 'botanical', type: 'string'},
{name: 'light'},
{name: 'price', type: 'float'},
// dates can be automatically converted by specifying dateFormat
{name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
{name: 'indoor', type: 'bool'}
]
});
// create the Data Store
var store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
autoDestroy: true,
model: 'Plant',
proxy: {
type: 'ajax',
// load remote data using HTTP
url: 'plants.xml',
// specify a XmlReader (coincides with the XML format of the returned data)
reader: {
type: 'xml',
// records will have a 'plant' tag
record: 'plant'
}
},
sorters: [{
property: 'common',
direction:'ASC'
}]
});
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});
// create the grid and specify what field you want
// to use for the editor at each header.
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [{
id: 'common',
header: 'Common Name',
dataIndex: 'common',
flex: 1,
editor: {
allowBlank: false
}
}, {
header: 'Light',
dataIndex: 'light',
width: 130,
editor: {
xtype: 'combobox',
typeAhead: true,
triggerAction: 'all',
selectOnTab: true,
store: [
['Shade','Shade'],
['Mostly Shady','Mostly Shady'],
['Sun or Shade','Sun or Shade'],
['Mostly Sunny','Mostly Sunny'],
['Sunny','Sunny']
],
lazyRender: true,
listClass: 'x-combo-list-small'
}
}, {
header: 'Price',
dataIndex: 'price',
width: 70,
align: 'right',
renderer: 'usMoney',
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 0,
maxValue: 100000
}
}, {
header: 'Available',
dataIndex: 'availDate',
width: 95,
renderer: formatDate,
editor: {
xtype: 'datefield',
format: 'm/d/y',
minValue: '01/01/06',
disabledDays: [0, 6],
disabledDaysText: 'Plants are not available on the weekends'
}
}, {
xtype: 'checkcolumn',
header: 'Indoor?',
dataIndex: 'indoor',
width: 55
}],
selModel: {
selType: 'cellmodel'
},
renderTo: 'editor-grid',
width: 600,
height: 300,
title: 'Edit Plants?',
frame: true,
tbar: [{
text: 'Add Plant',
handler : function(){
// Create a model instance
var r = Ext.create('Plant', {
common: 'New Plant 1',
light: 'Mostly Shady',
price: 0,
availDate: Ext.Date.clearTime(new Date()),
indoor: false
});
store.insert(0, r);
cellEditing.startEditByPosition({row: 0, column: 0});
}
}],
plugins: [cellEditing]
});
// manually trigger the data store load
store.load({
// store loading is asynchronous, use a load listener or callback to handle results
callback: function(){
Ext.Msg.show({
title: 'Store Load Callback',
msg: 'store was loaded, data available for processing',
modal: false,
icon: Ext.Msg.INFO,
buttons: Ext.Msg.OK
});
}
});
});
“plants.xml”文件：
<?xml version="1.0" encoding="ISO-8859-1"?>
<catalog>
<plant>
<common>Bloodroot</common>
<botanical>Sanguinaria canadensis</botanical>
<zone>4</zone>
<light>Mostly Shady</light>
<price>2.44</price>
<availability>03/15/2006</availability>
<indoor>true</indoor>
</plant>
<plant>
<common>Columbine</common>
<botanical>Aquilegia canadensis</botanical>
<zone>3</zone>
<light>Mostly Shady</light>
<price>9.37</price>
<availability>03/06/2006</availability>
<indoor>true</indoor>
</plant>
</catalog>
答案 0 :(得分：1)
将代理阅读器类型更改为“json”
答案 1 :(得分：1)
我从Ext-JS数据存储的主题“Ext JS 4 First Look”中找到了一些文档，从第82页开始。请注意，我必须在读者上添加“root”属性宾语。我注释掉了XML格式的行，并用JSON实现替换了这些行。我还包括一个示例JSON文件。 “light”字段是ComboBox（选择标记或下拉列表的Ext-JS版本）。确保值与实际对象中定义的值一致。
“cell-editing.js”文件：
// create the Data Store
var store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
autoDestroy: true,
model: 'Event',
proxy: {
type: 'ajax',
// load remote data using HTTP
//url: 'plants.xml',
url: 'plants.json',
// specify a XmlReader (coincides with the XML format of the returned data)
reader: {
//type: 'xml',
type: 'json',
// records will have a 'plant' tag
//record: 'plant',
root: 'plants'
}
},
sorters: [{
property: 'common',
direction:'ASC'
}]
});
“plants.json”文件：
{
"plants": [
{
"common": 'Bloodroot',
"botanical": 'Sanguinaria canadensis',
"zone": 4,
"light": 'Mostly Shady',
"price": 2.44,
"availability": '03/15/2006',
"indoor": 'true'
},
{
"common": 'Bloodroot',
"botanical": 'Sanguinaria canadensis',
"zone": 4,
"light": 'Mostly Shady',
"price": 2.44,
"availability": '03/15/2006',
"indoor": 'true'
}
]
}