Results 1 to 3 of 3

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

  1. #1
    Sencha User
    Join Date
    Oct 2015
    Posts
    15

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

    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...

  2. #2
    Sencha User joel.watson's Avatar
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    446

    Default

    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

  3. #3
    Sencha User
    Join Date
    Oct 2015
    Posts
    15

    Default JSON Data manipulation in Grid EXT JS 5.x

    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

Similar Threads

  1. Edit Grid - Save Data
    By ust in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 12 May 2010, 11:50 AM
  2. Replies: 1
    Last Post: 4 Dec 2008, 5:12 PM
  3. Load edit form data from JSON store
    By sinma in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 5 Feb 2008, 12:30 AM
  4. Combobox problem (load form data from json when edit)
    By daviscabral in forum Ext 1.x: Help & Discussion
    Replies: 8
    Last Post: 21 Jan 2008, 11:28 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •