1. #1
    Sencha User
    Join Date
    Nov 2012
    Posts
    84
    Vote Rating
    0
    koolll is on a distinguished road

      0  

    Default Unanswered: Sencha touch 2~add, delete, update a data record by using jersey

    Unanswered: Sencha touch 2~add, delete, update a data record by using jersey


    I am new for sencha touch. I need to add , update a data record detail. But I dont have any idea. Here is my sample code

    View.js
    Code:
    Ext.define('bluebutton.view.BlueButton.testing', {    extend: 'Ext.form.Panel',
        xtype: 'testing',
           requires: [
      
        'bluebutton.view.BlueButton.TransactionList',
        'bluebutton.view.BlueButton.MemberPopUp',
         'bluebutton.view.BlueButton.MemberDetail',
         'bluebutton.store.BlueButton.MemberList',
           
        ],
        config: {
         id:'register',
            items :[
               
                  {
                        xtype: 'textfield',
                        name: 'name',
                        label: 'Name'
                    },
                    {
                        xtype: 'emailfield',
                        name: 'email',
                        label: 'Email'
                    },
                  
                     {
                        xtype: 'button',
                        text: 'Send',
                        handler: function(button) {
                            var form = Ext.getCmp('register');
                              values = form.getValues();
    
            var myStore= new Ext.data.Store({
                model: 'bluebutton.model.BlueButton.MemberList'
            });
    
    
                var newModel = Ext.ModelMgr.create({ 'memberId': 1,
                            'name': 2,
                            'imgUrl': 3
                        }, 'bluebutton.model.BlueButton.MemberList');
    
    
                myStore.add(newModel);
    
    
                myStore.sync();
    
    
    
    
                              
    
    
    
    
    
    
    
    
    
    
    
    
    
    
                              
                        }
                    }
    
    
    
    
            ],
    
    
    
    
       }
    
    
    });


    Model.js
    Code:
    Ext.define('bluebutton.model.BlueButton.MemberList', {    extend: 'Ext.data.Model',
        config: {
            idProperty: 'memberModel',
            fields: [
                { name: 'memberId' },
                { name: 'name' },
                { name: 'imgUrl' },
                { name: 'age' },
                { name: 'address' },
                { name: 'pointAvalaible' },
                { name: 'lastVisited' },
            ],
    
    
    
    
      proxy: {
                type: 'ajax',
                actionMethods: {
                    create : 'POST',
                    read   : 'POST', // by default GET
                    update : 'POST',
                    destroy: 'POST'
                },
                url: 'http://localhost:8080/RESTFulExample/rest/json/metallica/testingj'
            },
     
     
        }
    
    
    });


    Store.js
    Code:
    Ext.define('bluebutton.store.BlueButton.MemberList', {
        extend: 'Ext.data.Store',
       requires: [
                  'bluebutton.model.BlueButton.MemberList'
        ],
    
    
        config: {
            grouper: {
                groupFn: function (record) {
                    return record.get('name')[0];
                }
            },
            
              
               model :'bluebutton.model.BlueButton.MemberList',
               storeId :'memberStore',
               autoLoad:false,
               pageSize: 5,
               clearOnPageLoad: false, 
           
            data: [
    
    
            ]
        }
    });


    Jersey.java
    Code:
     @POST     @Path("/testingj")
    //     @Consumes("application/x-www-form-urlencoded")
         @Consumes(MediaType.APPLICATION_JSON)
         public Response too(MultivaluedMap<String, String> form) {
         return Response.status(201).entity(form).build();
    
     }


    but I keep on hit tis error *XMLHttpRequest cannot load localhost:8080/RESTFulExample/rest/json/metallica/testingj?_dc=1358408853016. Origin localhost is not allowed by Access-Control-Allow-Origin.*
    Please guild me solution. thanks

  2. #2
    Sencha User
    Join Date
    Apr 2012
    Posts
    164
    Answers
    13
    Vote Rating
    9
    in4p will become famous soon enough

      0  

    Default


    Your problem is not with sencha - the browser is blocking this as a CORS request. You can update the server configuration to allow CORS (search it in Google), and it should resolve the issue.

    Quote Originally Posted by koolll View Post
    I am new for sencha touch. I need to add , update a data record detail. But I dont have any idea. Here is my sample code

    View.js
    Code:
    Ext.define('bluebutton.view.BlueButton.testing', {    extend: 'Ext.form.Panel',
        xtype: 'testing',
           requires: [
      
        'bluebutton.view.BlueButton.TransactionList',
        'bluebutton.view.BlueButton.MemberPopUp',
         'bluebutton.view.BlueButton.MemberDetail',
         'bluebutton.store.BlueButton.MemberList',
           
        ],
        config: {
         id:'register',
            items :[
               
                  {
                        xtype: 'textfield',
                        name: 'name',
                        label: 'Name'
                    },
                    {
                        xtype: 'emailfield',
                        name: 'email',
                        label: 'Email'
                    },
                  
                     {
                        xtype: 'button',
                        text: 'Send',
                        handler: function(button) {
                            var form = Ext.getCmp('register');
                              values = form.getValues();
    
            var myStore= new Ext.data.Store({
                model: 'bluebutton.model.BlueButton.MemberList'
            });
    
    
                var newModel = Ext.ModelMgr.create({ 'memberId': 1,
                            'name': 2,
                            'imgUrl': 3
                        }, 'bluebutton.model.BlueButton.MemberList');
    
    
                myStore.add(newModel);
    
    
                myStore.sync();
    
    
    
    
                              
    
    
    
    
    
    
    
    
    
    
    
    
    
    
                              
                        }
                    }
    
    
    
    
            ],
    
    
    
    
       }
    
    
    });


    Model.js
    Code:
    Ext.define('bluebutton.model.BlueButton.MemberList', {    extend: 'Ext.data.Model',
        config: {
            idProperty: 'memberModel',
            fields: [
                { name: 'memberId' },
                { name: 'name' },
                { name: 'imgUrl' },
                { name: 'age' },
                { name: 'address' },
                { name: 'pointAvalaible' },
                { name: 'lastVisited' },
            ],
    
    
    
    
      proxy: {
                type: 'ajax',
                actionMethods: {
                    create : 'POST',
                    read   : 'POST', // by default GET
                    update : 'POST',
                    destroy: 'POST'
                },
                url: 'http://localhost:8080/RESTFulExample/rest/json/metallica/testingj'
            },
     
     
        }
    
    
    });


    Store.js
    Code:
    Ext.define('bluebutton.store.BlueButton.MemberList', {
        extend: 'Ext.data.Store',
       requires: [
                  'bluebutton.model.BlueButton.MemberList'
        ],
    
    
        config: {
            grouper: {
                groupFn: function (record) {
                    return record.get('name')[0];
                }
            },
            
              
               model :'bluebutton.model.BlueButton.MemberList',
               storeId :'memberStore',
               autoLoad:false,
               pageSize: 5,
               clearOnPageLoad: false, 
           
            data: [
    
    
            ]
        }
    });


    Jersey.java
    Code:
     @POST     @Path("/testingj")
    //     @Consumes("application/x-www-form-urlencoded")
         @Consumes(MediaType.APPLICATION_JSON)
         public Response too(MultivaluedMap<String, String> form) {
         return Response.status(201).entity(form).build();
    
     }


    but I keep on hit tis error *XMLHttpRequest cannot load localhost:8080/RESTFulExample/rest/json/metallica/testingj?_dc=1358408853016. Origin localhost is not allowed by Access-Control-Allow-Origin.*
    Please guild me solution. thanks

  3. #3
    Sencha Premium Member dawesi's Avatar
    Join Date
    Mar 2007
    Location
    Melbourne, Australia (aka GMT+10)
    Posts
    1,082
    Answers
    24
    Vote Rating
    41
    dawesi has a spectacular aura about dawesi has a spectacular aura about

      0  

    Default


    aka to use type:'ajax' it needs to be a relative path in your url:

    Code:
    http://localhost:8080/RESTFulExample/rest/json/metallica/testingj
    
    should be 
    
    /RESTFulExample/rest/json/metallica/testingj
    Teahouse Training Company
    Official Certified Sencha Trainer

    Australia / New Zealand / Singapore / Hong Kong & APAC



    SenchaWorld.com - Sencha webinars, videos, etc
    SenchaForge.org - (coming soon)
    TeahouseHQ.com - Sencha ecosystem training portal

    Code Validation : JSLint | JSONLint | JSONPLint

  4. #4
    Sencha User
    Join Date
    Nov 2012
    Posts
    84
    Vote Rating
    0
    koolll is on a distinguished road

      0  

    Default


    Quote Originally Posted by dawesi View Post
    aka to use type:'ajax' it needs to be a relative path in your url:

    Code:
    http://localhost:8080/RESTFulExample/rest/json/metallica/testingj
    
    should be 
    
    /RESTFulExample/rest/json/metallica/testingj
    Hi, thanks for your reply. Actually I had separate two project. One is sencha touch project , antoher is backend service project, So if using /RESTFulExample/rest/json/metallica/testingj , sencha touch will able to find a correctly url?

  5. #5
    Sencha User
    Join Date
    Nov 2012
    Posts
    84
    Vote Rating
    0
    koolll is on a distinguished road

      0  

    Default


    Hi , I already enable CORS in my server. If I using this code
    Code:
                        	  form.submit({                            url: 'http://localhost:8080/RESTFulExample/rest/json/metallica/testingj',
              					method: 'POST',
                        	  
              					success: function (frm, res)  {
              						alert('Form submitted: ' + res.customfield);
              					},
              					failure: function (frm, res) {
              						alert('Form no submit!');
              					}
              				});
    The jersey server able to get the form data.But if I change the code
    Code:
      var form = Ext.getCmp('register');                          values = form.getValues();
    
    
            var myStore= new Ext.data.Store({
                model: 'bluebutton.model.BlueButton.MemberList'
            });
    
    
    
    
                var newModel = Ext.ModelMgr.create({ 'memberId': 1,
                            'name': 2,
                            'imgUrl': 3
                        }, 'bluebutton.model.BlueButton.MemberList');
    
    
    
    
                myStore.add(newModel);
    
    
    
    
                myStore.sync();

    I keep on hit tis error *XMLHttpRequest cannot load localhost:8080/RESTFulExample/rest/json/metallica/testingj?_dc=1358408853016. Origin localhost is not allowed by Access-Control-Allow-Origin.*

Thread Participants: 2

Tags for this Thread