Sencha touch store and proxy problems

Question

Like always I try to do this for my own, I read the documentation of sencha touch 2 for using stores but I can't make what I want, I need to make a quick application that can help me to stand how work the stores and proxy into sencha touch, and them I can add this feature to my real project. So this is what I want:

Ext.define("ejemplo.view.Main", {
    extend: 'Ext.Panel',

    requires: [
        'Ext.form.FieldSet',
    ],

    config: {
        fullscreen: true,
        scrollable: true,

        items: [
            {
                xtype: 'fieldset',
                title: 'Guardando Data',
                centered: true,

                items: [
                    {
                        xtype: 'textfield',
                        label: 'Nombre',
                    },
                    {
                        xtype: 'button',
                        ui: 'confirm',
                        text: 'Guargar',

                        handler: function(){
                            //Store my data locally
                        }                   
                    }
                ]
            },
            {
                xtype: 'button',
                text: 'Almacen',
                ui: 'action',
                docked: 'bottom',

                handler: function(){
                    //Show the data
                }
            }
        ]
    }
});

However, I know that this quick app can make the things more easily for all guys that need stand how store the data into sencha touch locally and them can use this data for whatever we need.

Is simply if I make the file and put this file into path for my app, but when I want run the app on other devices this solution no worked. So, please help

Additional, when I make and take the data how i can do a PUT Request to my server from sencha touch?

here you can read a tutorial how to store and read data locally using HTML5 Local Storage http://miamicoder.com/2012/how-to-create-a-sencha-touch-2-app-part-1/ — masu.mo, Aug 04 '12 at 22:07
Thanks for your link, I go to read and do it maybe can solved my problem. — Alexis Duran, Aug 04 '12 at 23:04
SOLVED: If someone needs the answers the code of Oleg was right, just add requires: [Ext.Ajax] for fix the problem. — Alexis Duran, Aug 05 '12 at 23:38

olegtaranenko · Accepted Answer · 2012-08-05T05:58:07.963

1

Ext.Ajax.request({
    url : '/your/request/to/server/url',
    method : 'GET', // You can set also method: 'PUT' (answer for 2nd question)
    params : { // your params you want to send 
        user: 'Alexis
    },

    success : function(response) {
    ...
    },

    failure : function(response) {

    ...
    },
})

In the callback function you could handle responce via

if (response.responseText) {
    result = Ext.decode(response.responseText);
}

Have a look at the Sencha doc for more info

Cheers, Oleg

edited Aug 05 '12 at 05:58

answered Aug 04 '12 at 22:17

olegtaranenko

3,722
3
26
33

I read the documentation, "Using AJAX" but I don't why if i write Ext.Ajax.request({ url : App.app.getApiUrl(request.url), method : request.method || 'POST', headers : { 'Content-Type' : 'application/x-www-form-urlencoded' }, params : request.params || {}, success : function(response) { ... }, failure : function(response) { ... }, }) cosole say me that can't do request to undifined object :/ – Alexis Duran Aug 04 '12 at 23:08
method : String The default HTTP method to be used for requests. Note that this is case-sensitive and should be all caps. Is no way to send a PUT request? Defaults to undefined; if not set but params are present will use "POST", otherwise "GET". – Alexis Duran Aug 04 '12 at 23:09
I don't stand what you want told me :/ either the code, can be i little more illustrated? – Alexis Duran Aug 04 '12 at 23:14
This look great, let me try! :) Thanks, a lot! – Alexis Duran Aug 05 '12 at 18:10
Thanks very very much, for the answer really, I think that these answer can be do everything what I want, however I get the same error when I try to use Ext.Ajax.request console say >> Cannot call method 'request' of undefined. I don't want bother you but can you say me what happend? – Alexis Duran Aug 05 '12 at 18:16
Maybe can be the url? i try with this url: 'localhost:5984/mymoney/2';, this is my couchdb server, with a http request this url return a JSON with 2 files – Alexis Duran Aug 05 '12 at 19:09
do you use chrome for development? if yes try to press Ctrl-Shift-I. It opens the chrome's Developer Tools. You could click on the gray mark to enable breaking on the exception. You have to click two times, till the mark became violet... App will stop at the 'undefined' exception and you can see what is exact wrong in your case :) – olegtaranenko Aug 05 '12 at 19:50
Right, I use chrome to see the results of my code, either I use the console to see what happens, but this is the problem I can't use Ext.Ajax.request because I got the error see: http://www.mediafire.com/view/?kmzety3ziupa4wx – Alexis Duran Aug 05 '12 at 20:07
what version of Sencha you are using? – olegtaranenko Aug 05 '12 at 20:32
in Dev Tools click at the Sources Tab and make sure 'Pause on uncaught exception' is set (small violet icon). Than you get a line of exception. If the line Ext.Ajax.request() - check the sencha version. May be it is not 2.0 – olegtaranenko Aug 05 '12 at 20:37
I dont have points for chats and i can't speak to much for here, i think that i work with sencha touch 2.0 i check at command line and the first time that i download sencha was with 2.0.2 how we can chat? can you? Srry :( and i can't see "the small violet icon" :'( – Alexis Duran Aug 05 '12 at 21:14
if you use gtalk than add me olegtaranenko at gmail point com – olegtaranenko Aug 05 '12 at 21:52

hekomobile · Answer 2 · 2012-08-05T19:25:27.723

0

Hi @Alexis you can try with simple example so like this, for you stand how works the proxy into Sencha Touch

<!DOCTYPE html>
<html lang="en">
<head>
<title>Whatever</title>

      <link rel="stylesheet" href="sencha-touch/resources/css/sencha-touch.css" type="text/css" media="screen" />

     <script src="sencha-touch/sencha-touch.js" type="text/javascript"></script>
     <script type="text/javascript">
           Ext.onReady(function() {
                Ext.Ajax.request({
                      url: 'your_file_url',
                      params: {
                           format: 'json',
                      },
                      success: function(response, opts) {
                            var info = Ext.util.JSON.decode(response.responseText)
                            alert(info)
                            console.dir(info)
                            console.log('Response:-:-:-: ' + response.responseText)
                     },
                     failure: function(response) {
                            ...
                     },
                })
           })
    </script>
</head>
<body>
</body>
</html>

Above code is a simple file for request to JSON file, this code do you can using into handler: function() { ... } instanced of xtype: button.

UPDATE

Into url: '' put only file name, e.g. myFileJson.json or myFileJson.php or whatever valid extension. :)

If you have a problem please let me know.

I hope help you. :)

edited Aug 05 '12 at 19:25

answered Aug 05 '12 at 18:26

hekomobile

1,388
1
14
35

Thanks! ^^ Let me see what I get! – Alexis Duran Aug 05 '12 at 18:40
I don't know why but seems like always happens with Ext.Ajax.request something that I don't know.. Sorry for ask again, but like i said to Mr. @olegtaranenko the console shows me>> Uncaught TypeError: Cannot call method 'request' of undefined. Can you tell me what i missing? – Alexis Duran Aug 05 '12 at 18:45
Maybe can be the url? i try with this url: 'http://localhost:5984/mymoney/2', this is my couchdb server, with a http request this url return a JSON with 2 files. – Alexis Duran Aug 05 '12 at 19:08
Show me how do you doing the request on url. Thxs. :) – hekomobile Aug 05 '12 at 19:11
Just add the source code for first step to see what i get, See this: http://jsfiddle.net/VFSB7/ - i saw this post, but i already have the two solutions i think http://stackoverflow.com/questions/5776847/uncaught-typeerror-cannot-call-method-request-of-undefined – Alexis Duran Aug 05 '12 at 19:19
I did update my answer. Only put file name into `url: ''`. That's it. :) – hekomobile Aug 05 '12 at 19:26
Yes, is easy but the problem is the Ajax object i think :/ I can used always got the error >> http://www.mediafire.com/view/?kmzety3ziupa4wx i don't know why. – Alexis Duran Aug 05 '12 at 20:08
Oh I see, only remove `Ext.onReady(function() {` and `})`. Jaja :) – hekomobile Aug 05 '12 at 20:17
is the same thing, i try with the two ways and i got the same error :/ – Alexis Duran Aug 05 '12 at 21:16
I need to add: requires:[Ext.Ajax] Thanks a lot for your help – Alexis Duran Aug 05 '12 at 23:38

Sencha touch store and proxy problems

2 Answers2