Asked  9 Months ago    Answers:  5   Viewed   53 times

I was following this tutorial of Sencha Touch: http://www.vimeo.com/15672696 Perfect tutorial, worked flawless.

But when I tried to reuse this code for my own project, I doesn't work. Here is wat I did:

In my Sencha touch application I wrote the following function:

showContacts = function()
{
    Ext.util.JSONP.request({
        url: 'http://www.hotcoffee.be/check-relations/index.php/json/contactpersonen',
        callbackKey: "callback",
        params: {
            unique: Math.random()
        },
        callback: function(data)
        {
            var contacts = data.results;
            nameOfPanel.update(contacts);
        }
    });
}

First, I wrote my own JSON file with PHP (codeigniter):

<?
    $row[] = array(
        "name" => $item->name,
        "first_name" => $item->first_name,
        "avatar"=>$item->avatar
    );

    // PASSING THE ARRAY $row TO A VIEW
    // ON THE VIEW I OUTPUT THE ARRAY

    $this->output->set_content_type('application/json')->set_output(json_encode($row));
?>

(Result: see URL of showContacts function)

This didn't work, so I assumed something was wrong with using a PHP file as JSON, so I created a JSON file:

(Result: http://www.hotcoffee.be/check-relations/json/friends.json)

Now it seems that also this didn't work. I'm breaking my head over it a lot of houres... I also receive the following messages in Chrome's debugger:

Resource interpreted as Script but transferred with MIME type application/json. (contactpersonen:-1)
Uncaught SyntaxError: Unexpected token : (contactpersonen:1)
Resource interpreted as Image but transferred with MIME type text/html. (csi:-1)

Another thing is that I can ensure that the panels and tpl's are written well, because with hardcoded testdata it does work. Only loading the JSON file is the problem.

Anyone knows how to handle it? Thank you very much!

 Answers

58

I answered a similar question here: Sencha seems to not like Rails' json. It is specific to Rails but the concept still applies.

Essentially James Pearce is correct. What you are returning needs to be wrapped in a tag and the callback function. This will insert the code on your page and run the script, which has the effect of calling the function you provide.

$response = "<script type='text/javascript'>";
$response .= $_GET['callback'] . "(" . json_encode($row) . ")";
$response .= "</script>";
$this->output->set_content_type('application/json')->set_output($response);
Wednesday, March 31, 2021
 
GGio
answered 9 Months ago
20

Update: Sorry, for the irrelevant example I had given

Where is your pages[i].update(this.record.data.images); ?

You can try the following -

var numberOfPages = this.record.data.length;
// Create pages for the carousel
var pages = [];
for (var i=0; i<numberOfPages; i++) {
    var tmp = new Ext.Component({
        id: 'page'+i,
        cls: 'page',
        tpl: '<tpl for=".">{imageurl}</tpl>'
    });
    tmp.update(this.record.data[i].images);
    pages.push(tmp);
}
Friday, May 28, 2021
 
CodeCaster
answered 7 Months ago
55

Instead of the handlers, you should use this.control in the controller:

this.control({
    '#first': {
        tap: function() {
            Ext.Viewport.add({
                xtype: 'testsecond'
            });
        }
    },

(you can drop the handlers: from the button in the view definition)

Also, you probably shouldn't hard-code ids in the first place.

The way I handle buttons like this is:

items: [
            {
                xtype: 'button',
                ui: 'normal',
                text: 'Go To First Screen',
                go: 'testsecond'
            },
       ...

Then in a base controller that applies to all views, I do something like:

this.control({
    'button[go]': {
        tap: function(btn) {
            Ext.Viewport.setActiveItem({
                xtype: btn.go
            });
        }
    },
Tuesday, August 10, 2021
 
Ouerghi Yassine
answered 4 Months ago
60
root : 'data',
totalCount : 'num_rows'

Is deprecated. Use:

rootProperty: 'data',
totalProperty: 'num_rows'

Make sure you included Sencha Touch from sencha-touch-all-compat.js for development. It'll report in the browser console all deprecated things that you use.

Friday, October 15, 2021
 
Fábio Oliveira
answered 2 Months ago
29

Thanks to @Saki . I pick one sentence from sencha official blog to help other people meet this problem:

With the introduction of Ext JS 4.2 and theme packages, compass watch no longer understood the structure of themes making “sencha ant sass” the only option for building Sass. The “sass” build step, however, was a forced, full rebuild and was many times slower than compass watch.

This is the link: http://www.sencha.com/blog/using-the-new-app-watch-command-in-sencha-cmd-4/

Sunday, November 14, 2021
 
Arbalest
answered 3 Weeks ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share