How to Load/Edit/save Data from To JSOn in EXt Js 5.x

[2mailpks]

Hi
I just wanted to load data from Json and Display in Grid, and edit,save back to same data to some file called data.json .

which is located in app directory...

[joel.watson]

Hi--

In order to write data back to the file, you'll need to either first send the data to the server and write the file via whatever application framework you are using on the server (php, nodejs, etc), or utilize the HTML5 File API. The first option will work regardless of the browser, while the second will depend on the level of implementation of the File API which the given browser has achieved (e.g., only going to work in modern browsers, no IE8, 9, etc).

I hope that gives you a good place to start--thanks!
Joel

[2mailpks]

I wanted to load a datas to grid from json and save data back to same json. meanwhile i could able to delete row..

Hi
I just wanted to edit row using rowedit plugin,
loaded data from json(i,e.. data/data.json)


I will start up placing my code

#app/view/main/Main.js
Ext.require([
'Grid2.view.main.MainController',
'Grid2.view.main.MainModel'
]);

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false
});
Ext.define('Grid2.view.main.Main', {
extend: 'Ext.container.Container',
xtype: 'app-main',
controller: 'main',
viewModel: {
type: 'main'
},
layout: {
type: 'border'
},
items: [{
region: 'east',
xtype: 'component',
padding: 10,
height: 10,
html: '<h3 align="center" style="color:WHITE;">PC-BLR-Task1</h3>'
},
{
region: 'center',
xtype: 'tabpanel',
items:[{
title: 'The Data',
xtype: 'grid',
store:'myData',
columns: [{ text: 'Name', dataIndex: 'Name',
flex : 1,editor: {
allowBlank: false

} },
{ text: 'Email', dataIndex: 'Email', flex: 1,editor: {
allowBlank: false,
vtype: 'email'
}},
{ text: 'DOJ', dataIndex: 'DOJ',renderer: Ext.util.Format.dateRenderer('d-m-Y')/*Used to Format the Date*/ },
{ text: 'Ban', dataIndex: 'Ban' ,editor: {
allowBlank: false
}},
],
tbar: [{
text: 'Add Employee',
iconCls: 'employee-add',
handler : function() {


rowEditing.cancelEdit();


// Create a model instance
var r = Ext.create('Grid2.model.myModel', {
Name: 'New Guy',
Email: '[email protected]',
DOJ:'12-12-15' /*Ext.Date.clearTime(new Date())*/,
Ban: 'ddsdsd',
active: true
});
store.insert(0, r);
rowEditing.startEdit(0, 0);
}
}, {
itemId: 'removeEmployee',
text: 'Remove Employee',
iconCls: 'employee-remove',
handler: function() {
var sm = grid.getSelectionModel();
rowEditing.cancelEdit();
store.remove(sm.getSelection());
if (store.getCount() > 0) {
sm.select(0);
}
},
disabled: false
},{
itemId: 'saveData',
text: 'Save Employee',
iconCls: 'employee-save',
handler: function() {
var sm = grid.getSelectionModel();
rowEditing.cancelEdit();
store.remove(sm.getSelection());
if (store.getCount() > 0) {
sm.select(0);
}
},
disabled: false
}],
selType: 'rowmodel',
plugins: {
ptype: 'rowediting',
clicksToEdit: 1
},
}],
}],
});


i am getting error where underlined column as
Uncaught ReferenceError: grid is not defined


My data model

#app/model/myModel.js

Ext.define('Grid2.model.myModel',{
extend : 'Ext.data.Model',
fields :[
'Name',
'Email',
'DOJ',
'Ban',
{
type :'string',
name :'Name'


},
{
type :'string',
name :'Email'


},
{
type :'date',
name :'DOJ',
},
{
type :'string',
name :'Name'


}]
});



my Store

#app/store/myData.js

Ext.define('Grid2.store.myData',{
extend :'Ext.data.Store',
requires :['Grid2.model.myModel'],
autoLoad : true ,
model : 'Grid2.model.myModel',
proxy :{
type: 'ajax',
url : 'data/data.json',
reader :{
type: 'json'
}
}
});






Pls resolve