Sencha Touch JsonP Request TypeError Ext.data is undefined

Question

at the moment I'm working on my first Sencha Touch Application and I run into a problem I spent lots of hours until now.

I tried to get the value from a cross domain Json to fill a nested list in my application.

When I run my code in browser everything works fine. The List is filled and I can call a detail view by tap on a leafitem.

But after building the sencha touch app with "sencha app build", I only get the following error in the browser console when starting the app.

TypeError: Ext.data is undefined
Ext.data.JsonP.callback1({ Here is the long valid JSON content });

I don't unterstand, why Ext.data is undefined. I would appreciate if someone could help me. I tried several solutions but I couldn't get this running.

These are the contents of my files:

Store:

Ext.define("Test.store.ExpStore", {
extend: "Ext.data.TreeStore",

requires: [
    'Ext.data.JsonP'
],

config: {
    model: "Test.model.ExpModel",
    proxy: {
        type: 'jsonp',
        url: 'http://myurl/project/mylist.php',
        callbackKey: 'callback',
        reader: {
            type: 'json',
            rootProperty: 'experts'
        }
    }
}});

Model:

Ext.define('Test.model.ExpModel', {
extend: 'Ext.data.Model',
config: {
    fields: [
        {name: 'name', type: 'string'},
        {name: 'number', type: 'string'},
        {name: 'active', type: 'boolean'}
    ]
}});

ListView:

Ext.define('Test.view.ExpListView', {
extend: 'Ext.NestedList',
alias: 'widget.expListView',
config: {        
    fullscreen: true,
    title: "Experts",
    displayField: 'name',
    store: 'ExpStore',        
}});

app.json

"js": [
{
    "path": "touch/sencha-touch.js",
    "x-bootstrap": true
},
{
    "path": "bootstrap.js",
    "x-bootstrap": true
},
{
    "path": "app.js",
    "bundle": true,  /* Indicates that all class dependencies are concatenated into this file when build */
    "update": "delta"
}],

app.js

Ext.application({
name: 'Test',

requires: [
    'Ext.MessageBox',
    //'Ext.data.JsonP',
    'Ext.data.*'
],

models: [
    'ExpModel'
],

views: [
    //'Main'
    'ExpDetailsView',
    'ExpListView'
],

controllers: [
    'ExpController'
],

stores: [
    'ExpStore'
],

icon: {
    '57': 'resources/icons/Icon.png',
    '72': 'resources/icons/Icon~ipad.png',
    '114': 'resources/icons/Icon@2x.png',
    '144': 'resources/icons/Icon~ipad@2x.png'
},

isIconPrecomposed: true,

startupImage: {
    '320x460': 'resources/startup/320x460.jpg',
    '640x920': 'resources/startup/640x920.png',
    '768x1004': 'resources/startup/768x1004.png',
    '748x1024': 'resources/startup/748x1024.png',
    '1536x2008': 'resources/startup/1536x2008.png',
    '1496x2048': 'resources/startup/1496x2048.png'
},

launch: function() {
    // Destroy the #appLoadingIndicator element
    Ext.fly('appLoadingIndicator').destroy();

    var expListView = {
        xtype: 'expListView'
    };

    var expDetailsView = {
        xtype: 'expDetailsView'
    };

    // Initialize the main view
    Ext.Viewport.add(expListView, expDetailsView);
},

onUpdated: function() {
    Ext.Msg.confirm(
        "Application Update",
        "This application has just successfully been updated to the latest version. Reload now?",
        function(buttonId) {
            if (buttonId === 'yes') {
                window.location.reload();
            }
        }
    );
}});

Seems a problem with either your folder structure or `app.json` configuration file. Can you post the contents of the `"js": [ ... ]` section in `app.json`? — Andrea Casaccia, Feb 10 '15 at 11:59
When you run the application in the browser, in your console are there any warnings to say that an Ext class is being loaded asynchronously and that you need to add it as a require of the class using it? — mindparse, Feb 10 '15 at 19:07
The only warning is the following: "[DEPRECATE][Anonymous] Passing items as multiple arguments is deprecated, please use one single array of items instead". — sewi22, Feb 10 '15 at 19:24
This is a rather odd issue, when considering your code. When exactly is the store being loaded? Try moving your requires from the class over to app.js, and instead of doing requires "Ext.data.JsonP" - try changing it to "Ext.data.*". This will all files in the Ext.data namespace, which should help with debugging. Moving the requires to app.js will help debugging as well simply by requiring it early on in the dependency loading process. — OhmzTech, Feb 11 '15 at 02:26
Thanks for your comment. I already had these "requires" also in app.js. I also deleted the requires in the store. But that dont change anything on the situation. I added the content of app.js file above. — sewi22, Feb 11 '15 at 08:42
I suggest to fix those DEPRECATED messages because it can affect later on when you build your app. and regarding your question, I suggest to put your Proxy configuration inside your model. `Ext.define('Test.model.ExpModel', {` extend: 'Ext.data.Model', config: { proxy: { }, fields: [ {name: 'name', type: 'string'}, {name: 'number', type: 'string'}, {name: 'active', type: 'boolean'} ] }});` — Allan Jikamu, Feb 11 '15 at 16:04

Sencha Touch JsonP Request TypeError Ext.data is undefined

0 Answers0