1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    25
    Answers
    1
    Vote Rating
    1
    delebash is on a distinguished road

      0  

    Default Answered: Best approach to removing two json fields before ajax post in MVC extjs4.2

    Answered: Best approach to removing two json fields before ajax post in MVC extjs4.2


    I am using the example MVC application in the docs to connect to a NoSQL DB(Wakanda). I have read/update working fine, but for the create method the server expects 2 fields to not be included in the post so it knows its a new record __KEY and __STAMP. So based on a specific action either Create,Read,Update,Delete I need to modify the data differently. Looked at docs and examples but hard to follow and not sure of best practices with MVC so any help would be appreciated. Here is what am trying so far. Added listener for write event but this fires after post. Looks like maybe Writer is where I need to manipulate data but unable to find example of how to do this. These fields will always need to be removed for any Create so if it can be done in a more global manner instead of specifying in each store that would be great.

    This is taken from the MVC doc example using a popup form from a grid to save data to a store and then proxy to a database via ajax using json.

    Using ExtJs 4.2

    Model
    Code:
    Ext.define('AM.model.User', {
        extend : 'Ext.data.Model',
        idProperty : '__KEY',
        fields : ['name', 'email', '__KEY', '__STAMP']
    });
    Store
    Code:
    var crudServiceBaseUrl = "http://127.0.0.1:8081/cors/";
    
    Ext.define('AM.store.Users', {
        extend : 'Ext.data.Store',
        model : 'AM.model.User',
        autoLoad : true,
        proxy : {
            idProperty : '__KEY',
            type : 'ajax',
            api : {
                read : crudServiceBaseUrl + 'Users',
                update : crudServiceBaseUrl + 'Users/?$method=update'
            },           
                    
            reader : {
                type : 'json',
                root : '__ENTITIES',
                idProperty : '__KEY'
            } 
            
        }, 
        update: function( record, operation, modifiedFieldNames, eOpts ){
            debugger;
             console.log("records");
        },
        onCreateRecords: function(records, operation, success) {
            console.log(records);
        },
    
        onUpdateRecords: function(records, operation, success) {
          //  debugger;
         //   console.log(records);
        },
    
        onDestroyRecords: function(records, operation, success) {
            console.log(records);
        },
        listeners: {
                update: function(store, record, operation, eOpts ) {
                    switch(operation) {
                        case Ext.data.Model.EDIT:
                           console.log('INFO', 'Updating record...');
                            break;
                        case Ext.data.Model.COMMIT:
                            console.log('INFO', 'Record was updated!');
                            break;
                        case Ext.data.Model.REJECT:
                            console.log('ERR', 'Something went horribly wrong :( Data was rejected!');
                            break;
                    } 
                },
                 beforesync: function(options, eOpts ){
                       debugger; 
                    }
    }  
         // listeners : {
                            // write : function(store, action, result, res, rs) {
                                // debugger;
                                // console.log('WRITE', arguments);
                            // }                        
                    // },
    })
    View
    Code:
    Ext.define('AM.view.user.Edit', {
        extend: 'Ext.window.Window',
        alias: 'widget.useredit',
    
        title: 'Edit User',
        layout: 'fit',
        autoShow: true,
    
        initComponent: function() {
            this.items = [
                {
                    xtype: 'form',
                    items: [
                        {
                            xtype: 'textfield',
                            name : 'name',
                            fieldLabel: 'Name'
                        },
                        {
                            xtype: 'textfield',
                            name : 'email',
                            fieldLabel: 'Email'
                        }
                    ]
                }
            ];
    
            this.buttons = [
                {
                    text: 'Save',
                    action: 'save'
                },
                {
                    text: 'Cancel',
                    scope: this,
                    handler: this.close
                }
            ];
    
            this.callParent(arguments);
        }
    });
    Read request returns Json which parses on __ENTITIES
    Code:
    {"__entityModel":"Users","__COUNT":2,"__SENT":2,"__FIRST":0,"__ENTITIES":[{"__KEY":"1","__STAMP":24,"ID":1,"name":"ddd","email":"a"},{"__KEY":"2","__STAMP":2,"ID":2,"name":"a","email":"a"}]}
    Create request should be just

    {"name":"test","email":"green"}

    Oh in the code I am using Update function to try and manipulate the json data just because that is currently working, but once I find out how to manipulate data before post I will move it to the Create function

    Thanks, Dan

  2. You could implement overridden version of getRecordData() in your writer to customize the data anyway you need to before it is sent to the server:

    http://docs.sencha.com/extjs/4.2.0/s...-getRecordData

  3. #2
    Sencha User existdissolve's Avatar
    Join Date
    Jan 2010
    Location
    Kansas
    Posts
    522
    Answers
    31
    Vote Rating
    85
    existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice

      0  

    Default


    You could implement overridden version of getRecordData() in your writer to customize the data anyway you need to before it is sent to the server:

    http://docs.sencha.com/extjs/4.2.0/s...-getRecordData

  4. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    25
    Answers
    1
    Vote Rating
    1
    delebash is on a distinguished road

      0  

    Default


    Thanks, that is exactly what I did
    Code:
     writer : {
                type : 'json',
                writeAllFields : false,
                getRecordData : function(record, operation) {
                    switch(operation.action) {
                        case 'create':
                            console.log('INFO', 'Create');
                            delete record.data.__KEY
                            delete record.data.__STAMP
                            return record.data
                            break;
                        case 'update':
                            console.log('INFO', 'Updating');
                            var myrecord = record.getChanges();
                            myrecord.__KEY = record.data.__KEY
                            myrecord.__STAMP = record.data.__STAMP
                            return myrecord
                            break;
                    }
                },

Thread Participants: 1

Tags for this Thread