1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    4
    Answers
    1
    Vote Rating
    0
    f20 is on a distinguished road

      0  

    Default Answered: Ext.data.proxy.Ajax and WCF services via JSON

    Answered: Ext.data.proxy.Ajax and WCF services via JSON


    I'm trying to make ExtJs work with backend running WCF RIA services with JSON endpoint enabled. The backend I have uses GetXXX for read data and CommitChanges for create/update/delete data. It also has not ExtJs standard message format, so I have store class defined like this:

    Code:
    function cloneObject(src, dst) {
        for (var key in src)
        {
            dst[key] = src[key];
        }
    
    
        return dst;
    }
    
    
    Ext.define('MyApp.store.Items', {
        extend: 'Ext.data.Store',
        model: 'MyApp.model.Tax',
        autoLoad: true,
        autoSync: true,    
    
    
        proxy: {
            type: 'ajax',
            api: {
                read: '/MyApp/MyAppWeb-Web-MyAppDomain.svc/JSON/GetItems',
                update: '/MyApp/MyAppWeb-Web-MyAppDomain.svc/JSON/SubmitChanges',
                create: '/MyApp/MyAppWeb-Web-MyAppDomain.svc/JSON/SubmitChanges',
                destroy: '/MyApp/MyAppWeb-Web-MyAppDomain.svc/JSON/SubmitChanges'
            },
            reader: {
                type: 'json',
                root: 'GetItemsResult.RootResults',
                successProperty: null,
                totalProperty: 'GetItemsResult.TotalCount'
            },
    
    
            writer: {
                type: 'json',
                root: 'changeSet',
                currentOperation: null,
    
    
                getRecordData: function(record) {
    
    
                    var changeSet = [];
                    var entity = { 
                        Id: 0, 
                        Operation: 3,
                        Entity: { 
                            __type: 'Items:#MyApp.Web' 
                        },
                        OriginalEntity: {
                            __type: 'Items:#MyApp.Web' 
                        }
                    };
    
    
                    cloneObject(record.data, entity.Entity);
                    cloneObject(record.raw, entity.OriginalEntity);
                    changeSet.push(entity);
    
    
                    return changeSet;
                }
            }
        }
    });
    As you can in order to accomodate Microsoft JSON endpoint format I had to override getRecordData and create custom JSON object. I can probably replace cloneObject function with merge function, right? (I'm still kind of new to ExtJs, so may be I'm trying to "invent a bicycle" here.

    It works more or less as expected for update, however for create and delete I need to create slightly different message format. Different Operation code and no need to send OriginalEntity. However inside getRecordData I don't have information about what kind of operation is being performed. So question #1

    What is the best approach here? Override 'write' method as well or is there another way?

    Question #2. After any update standard store class would call reader in order to parse response, but response for update is very different then response for GetItems and I have no idea how to handle that.

    Any suggestions or links to walk-through on how to tie ExtJs and Domain Services?

  2. Ok, so I managed to make it work doing the following:

    - Extended Ext.data.writer.Json by saving current operation in write() method, and then creating Microsoft required JSON objects in getRecordData()

    - Extended Ext.data.proxy.Ajax by adding new config property 'readerOnCommit' and then making sure in processResponse() function that we use different readers based on action (default reader when we do 'read' and readerOnCommit when we do all other three actions)

    Is it acceptable or are there easier ways ti accomplish same goal?

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,824
    Answers
    3470
    Vote Rating
    836
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You could do this in the writeRecords method as write will just build the data and then execute writeRecords.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    4
    Answers
    1
    Vote Rating
    0
    f20 is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    You could do this in the writeRecords method as write will just build the data and then execute writeRecords.
    Thank you for you answer. But that's exactly the point. In writeRecords I will have already incorrectly formatted records, correct? Or you're saying do everything in writeRecords (formatting too)?

    What about the second part of the question? Is there way to manage different response formats for get/update?

  5. #4
    Sencha User
    Join Date
    Nov 2011
    Posts
    4
    Answers
    1
    Vote Rating
    0
    f20 is on a distinguished road

      0  

    Default


    Ok, so I managed to make it work doing the following:

    - Extended Ext.data.writer.Json by saving current operation in write() method, and then creating Microsoft required JSON objects in getRecordData()

    - Extended Ext.data.proxy.Ajax by adding new config property 'readerOnCommit' and then making sure in processResponse() function that we use different readers based on action (default reader when we do 'read' and readerOnCommit when we do all other three actions)

    Is it acceptable or are there easier ways ti accomplish same goal?

  6. #5
    Sencha User
    Join Date
    Apr 2012
    Posts
    3
    Vote Rating
    0
    Marouene is on a distinguished road

      0  

    Default #code

    #code


    Could you please < f20 > publish for us the final code that resolved your issue thanks in advance <f20>

    Quote Originally Posted by f20 View Post
    Ok, so I managed to make it work doing the following:

    - Extended Ext.data.writer.Json by saving current operation in write() method, and then creating Microsoft required JSON objects in getRecordData()

    - Extended Ext.data.proxy.Ajax by adding new config property 'readerOnCommit' and then making sure in processResponse() function that we use different readers based on action (default reader when we do 'read' and readerOnCommit when we do all other three actions)

    Is it acceptable or are there easier ways ti accomplish same goal?

  7. #6
    Sencha User
    Join Date
    Nov 2011
    Posts
    4
    Answers
    1
    Vote Rating
    0
    f20 is on a distinguished road

      0  

    Default


    At this point the code went long way since original question and it will be hard to post something relevant right now. Feel free to ask particular questions if you have any.

  8. #7
    Sencha User
    Join Date
    Apr 2012
    Posts
    3
    Vote Rating
    0
    Marouene is on a distinguished road

      0  

    Default


    Thanks <f20> Best Regards.

  9. #8
    Sencha User
    Join Date
    Apr 2012
    Posts
    3
    Vote Rating
    0
    Marouene is on a distinguished road

      0  

    Default


    I mean how we can use these APIs declared (read, update, create and destroy)??
    You can present some examples for me
    Thanks in advance dear <f20>
    King Regards.
    Quote Originally Posted by f20 View Post
    At this point the code went long way since original question and it will be hard to post something relevant right now. Feel free to ask particular questions if you have any.