Ext-JS 4: Изменить хранилище данных примера сетки для редактирования ячеек, чтобы использовать JSON вместо XML
Ниже приведен фрагмент файла "cell-edit.js" в примере Sencha.com Ext JS 4. Я хотел бы превратить это хранилище данных xml в хранилище данных json, используя json.get. А также получите пример файла 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-edit.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
});
}
});
});
Файл "plant.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>
2 ответа
Мне удалось найти некоторую документацию в книге "Внешний взгляд на Ext JS 4" на тему хранилищ данных Ext-JS, начиная со страницы 82. Обратите внимание, что мне пришлось добавить свойство root в анонимный объект читателя. Я закомментировал строки для формата XML и заменил строки реализацией JSON. Я также включил пример файла JSON. Поле "light" - это ComboBox (Ext-JS-версия тега select или выпадающего списка). Убедитесь, что значения совпадают со значениями, определенными в реальном объекте.
Файл "cell-edit.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'
}]
});
файл "plant.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'
}
]
}