Results 1 to 9 of 9

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

  1. #1

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

    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?

  2. Here you go.


  3. #2
    Sencha Premium Member
    Join Date
    Dec 2012
    Location
    Seattle, WA
    Posts
    423
    Answers
    34

    Default

    Here you go.


  4. #3
    Sencha Premium User
    Join Date
    Jul 2014
    Posts
    269
    Answers
    15

    Default

    Quote Originally Posted by MikeRH View Post
    Simple and complete.
    I liked.
    You have my vote.

  5. #4
    Sencha Premium Member
    Join Date
    Dec 2012
    Location
    Seattle, WA
    Posts
    423
    Answers
    34

    Default

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

  6. #5

    Default

    Quote Originally Posted by MikeRH View Post
    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.

  7. #6
    Sencha User
    Join Date
    Aug 2016
    Posts
    11

    Default

    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.


    PHP Code:
    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
            
    }
        }
    }); 

  8. #7
    Sencha Premium Member
    Join Date
    Oct 2014
    Posts
    55

    Default

    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.

  9. #8
    Sencha Premium Member
    Join Date
    Oct 2014
    Posts
    55

    Default

    I think I found it. In grid:-

    Code:
        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);
                }
            }
        },

  10. #9
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,448
    Answers
    3997

    Default

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

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

Similar Threads

  1. Replies: 1
    Last Post: 22 May 2013, 4:21 PM
  2. how can i use webservices to add/edit/delete grid
    By MElshennawy in forum Community Discussion
    Replies: 1
    Last Post: 24 Nov 2011, 8:37 AM
  3. How do I add edit and delete function for each row in grid
    By burgleboy711 in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 13 Mar 2011, 8:30 PM
  4. newbie - grid forum add edit delete
    By steryma in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 8 Nov 2007, 8:01 PM
  5. add/delete/edit rows in grid
    By aclavijo in forum Ext 1.x: Help & Discussion
    Replies: 15
    Last Post: 8 May 2007, 5:46 PM

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
  •