Full correct example for MVVM grid with add/edit/delete ability

[4dmonster]

I'm looking in documentation, guides, live examples, forum for a full working example of a editable grid, with correct View, ViewController and ViewModel files.

Let's assume we have:

• Model for 'Currency' with 'name' and 'fullName' fields
• Store
• View with grid and buttons to add and delete records, and plugin for editing cells.

What code we must write in ViewController and ViewModel in order to make buttons work?

[MikeRH]

Here you go.

[josei]

Here you go. https://fiddle.sencha.com/#fiddle/lse

Simple and complete.
I liked.
You have my vote.

[MikeRH]

Just note that in a real app you need to have all requires:[] config set up to pull in your models, viewmodels, viewcontrollers, etc...

[4dmonster]

Here you go. https://fiddle.sencha.com/#fiddle/lse

MikeRH, thank you very much. Very good example: simple, full , clear.

P.S. i have accidentally marker wrong post as answer, and can't change it now.

[iculina]

Hi,
can anyone help me. Why this doesn't work when I

ADD
idProperty: 'id',

type : 'rest',
idParam: 'id',
appendId:true,

REMOVE
create : 'myurl/create',
update : 'myurl/update',
destroy : 'myurl/destroy'


I expected to have id in URLs for create, read, update and delete, but it doesn't work at all.

Ext.define('Fiddle.Name', {
    extend : 'Ext.data.Model',
    fields : [
        {
            type : 'int',
            name : 'id'
        },
        {
            type : 'string',
            name : 'first_name' 
       },
        {
            type : 'string',
            name : 'last_name'
        }
    ],
    idProperty: 'id',
    proxy : {
        type : 'rest',
        idParam: 'id',
        appendId:true,
        api : {
            read : 'data1.json'
        },        reader : {
            type : 'json',
            rootProperty : 'data'
        },        writer : {
            type : 'json',
            rootProperty : 'data',
            allowSingle : false
        }
    }
}); 

[rhubarb65]

for some reason the fiddle doesnt display the app for me.

Anyway, Is it possible that someone could add code to select the first record of the grid. Should work for REST backend.

[rhubarb65]

I think I found it. In grid:-

    viewConfig: {
        listeners: {
            viewready: function(view) {
                var store = view.lookupViewModel().getStore('MyStore');
                var selectionModel = view.getSelectionModel();
            
                store.on('load', function(){
                    selectionModel.select(0);
                    this.focusRow(0);
                }, this);
            }
        }
    },

[mitchellsimoens]

I updated the fiddle to use Fiddle 2's remote loading classes to mimic local dev and support the CRUD requests