Results 1 to 7 of 7

Thread: Uncaught TypeError: Cannot call method 'substring' of undefined

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    31

    Default Answered: Uncaught TypeError: Cannot call method 'substring' of undefined

    Hi,


    I'm trying to migrate my 1.1 app to 2.0 but i'm facing a few problems. I'm trying to create a Nested List to display the data in my json but it's not working so far. At first I could display the list but the data didn't show up or any error on the console which makes it harder to find the error, and now when i try to run it, it gives me this error "Uncaught TypeError: Cannot call method 'substring' of undefined".


    Here it's my code:


    Application.js:
    Code:
    Ext.Loader.setConfig({ enabled: true });
    
    
    Ext.application({
        name: 'CarApp',
        // THIS WILL LOAD THE VIEW IN app/view/Viewport.js
        autoCreateViewport: true,
        controllers: ['Car'],
        models     : ['Car'],
        stores     : ['Car']
    });

    app/view/Viewport.js:


    Code:
    Ext.define('CarApp.view.Viewport', {
        extend: 'Ext.Panel', 
        requires: ['CarApp.view.CarList'],
        config: {
            layout: 'vbox',
            fullscreen: true,
            items: [{
                    xtype: 'carlist',
                    flex: 1,
                }]
        }
    });

    app/view/CarList.js:


    Code:
    Ext.define('CarApp.view.CarList', {
        extend: 'Ext.NestedList',
        config: {
            layout: 'fit',
            items: [{
                xtype: 'carlist',
                store: CarApp.store.Car,
                displayField: 'brand',
                listeners: {
                    leafitemtap: function(list, index, item) {
                    }
                }
            }]
        }
    });

    app/store/Car.js:


    Code:
    Ext.define('CarApp.store.Car', {
        extend:'Ext.data.TreeStore',
        config: {
                    id: 'CarListStore',
                    model: 'Car',
                    root: 'carlist',
                    proxy: {
                        type: 'ajax',
                        url: 'CarApp/CarFile',
                    }
        }            
    });

    Code:
    app/model/Car.js
    
    
    Ext.define('CarApp.model.Car', {
        extend: 'Ext.data.Model',    
        fields: [
        {name: 'car_id',             type: 'int'},
        {name: 'brand',            type: 'String'},
       ],
    proxy: {
            type: 'ajax',
            url: '/CarApp/CarFile',
            reader: {
                type: 'json',
                root: 'carlist'
            }
        }
    });

    app/controller/Car.js:


    Code:
    Ext.define('CarApp.controller.Car', {
        extend: 'Ext.app.Controller',
        config: {
            profile: Ext.os.deviceType.toLowerCase()
        },
        views   : ['Viewport', 'CarList'],
        stores  : ['Car'],
        refs    : [ //I'm not sure how to work with these exactly
                {
                    ref         : 'CarList',
                    selector    : 'carlist',
                    xtype       : 'carlist'
                }
        ],
        init: function() {      
        }
    });

    I'm a bit lost here since it was quite a change from 1.1

  2. Hi, I can imagine its all quite a lot to take in at once I haven't tried to run your app, but here is a list of all the things I see wrong in your code.

    PHP Code:
    Ext.define('CarApp.view.CarList', {
        
    extend'Ext.NestedList',
        
    config: {
            
    // Don't add layout 'fit' (or any layout) on a NestedList. It
            // manages it's own (card) layout.
            //layout: 'fit',
            
    items: [{
                
    xtype'carlist',
                
    // Use store: 'Car' as we can't guarantee it is loaded yet
                
    store'Car',
                
    displayField'brand',
                
    listeners: {
                    
    leafitemtap: function(list, indexitem) {
                    }
                }
            }]
        }
    }); 
    In your store, you are adding all the configurations to the config object. While this is exactly what you would expect, unfortunately we haven't ported the whole data package to the new config system yet. Because of that every class related to data (Store, Model, Proxy, Reader etc) all still use the old paradigm. This will be changed before GA however.

    PHP Code:
    Ext.define('CarApp.store.Car', {
        
    extend:'Ext.data.TreeStore',
        
    // You don't have to give a store an id. By default it uses it's
        // name as the id, e.g. this store's id will be 'Car'
        //id: 'CarListStore',
        
    model'Car',
        
    root'carlist'
        
        
    // You don't have to set a proxy on both the Model and the Store.
        // Usually its preferred to set the proxy only on the Model
        // proxy: {
        //     type: 'ajax',
        //     url: 'CarApp/CarFile'
        // }
    }); 
    PHP Code:
    Ext.define('CarApp.controller.Car', {
        
    extend'Ext.app.Controller',
        
    // This doesn't do anything, it's kind of a hack in the kitchensink
        //config: {
        //    profile: Ext.os.deviceType.toLowerCase()
        //},
        
    views   : ['Viewport''CarList'],
        
    stores  : ['Car'],
        
    refs: [{
            
    ref         'CarList',
            
    selector    'carlist'
            
    // This is only used when you use autoCreate or forceCreate
            //xtype: 'carlist'
        
    }],
        
    init: function() {      
        }
    }); 
    I would highly suggest reading the following three articles, as they apply directly to ST2 as well.

    http://www.sencha.com/learn/architec...xt-js-4-part-1
    http://www.sencha.com/learn/architec...xt-js-4-part-2
    http://www.sencha.com/learn/architec...xt-js-4-part-3

    Let me know if this helps you get things going.

  3. #2
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Answers
    28

    Default

    Hi, I can imagine its all quite a lot to take in at once I haven't tried to run your app, but here is a list of all the things I see wrong in your code.

    PHP Code:
    Ext.define('CarApp.view.CarList', {
        
    extend'Ext.NestedList',
        
    config: {
            
    // Don't add layout 'fit' (or any layout) on a NestedList. It
            // manages it's own (card) layout.
            //layout: 'fit',
            
    items: [{
                
    xtype'carlist',
                
    // Use store: 'Car' as we can't guarantee it is loaded yet
                
    store'Car',
                
    displayField'brand',
                
    listeners: {
                    
    leafitemtap: function(list, indexitem) {
                    }
                }
            }]
        }
    }); 
    In your store, you are adding all the configurations to the config object. While this is exactly what you would expect, unfortunately we haven't ported the whole data package to the new config system yet. Because of that every class related to data (Store, Model, Proxy, Reader etc) all still use the old paradigm. This will be changed before GA however.

    PHP Code:
    Ext.define('CarApp.store.Car', {
        
    extend:'Ext.data.TreeStore',
        
    // You don't have to give a store an id. By default it uses it's
        // name as the id, e.g. this store's id will be 'Car'
        //id: 'CarListStore',
        
    model'Car',
        
    root'carlist'
        
        
    // You don't have to set a proxy on both the Model and the Store.
        // Usually its preferred to set the proxy only on the Model
        // proxy: {
        //     type: 'ajax',
        //     url: 'CarApp/CarFile'
        // }
    }); 
    PHP Code:
    Ext.define('CarApp.controller.Car', {
        
    extend'Ext.app.Controller',
        
    // This doesn't do anything, it's kind of a hack in the kitchensink
        //config: {
        //    profile: Ext.os.deviceType.toLowerCase()
        //},
        
    views   : ['Viewport''CarList'],
        
    stores  : ['Car'],
        
    refs: [{
            
    ref         'CarList',
            
    selector    'carlist'
            
    // This is only used when you use autoCreate or forceCreate
            //xtype: 'carlist'
        
    }],
        
    init: function() {      
        }
    }); 
    I would highly suggest reading the following three articles, as they apply directly to ST2 as well.

    http://www.sencha.com/learn/architec...xt-js-4-part-1
    http://www.sencha.com/learn/architec...xt-js-4-part-2
    http://www.sencha.com/learn/architec...xt-js-4-part-3

    Let me know if this helps you get things going.

  4. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    31

    Default

    Code:
    Ext.define('CarApp.view.CarList', {
        extend: 'Ext.NestedList',
        // config: { 
            // Don't add layout 'fit' (or any layout) on a NestedList. It
            // manages it's own (card) layout.
            //layout: 'fit',
            //items: [{
                xtype: 'carlist',
                // Use store: 'Car' as we can't guarantee it is loaded yet
                store: 'Car',
                displayField: 'brand',
                listeners: {
                    leafitemtap: function(list, index, item) {
                    }
                }
            //}]
        //}
    }); 
    Thanks for the help, i've managed to make the error dissappear by commenting the items and config fields on the declaration of the NestedList. So, i can actually see the list showing up when i run the application. The problem is, it doesn't load the list with the data. I've checked my Json file on jsonlint and it's valid and it doesn't show any error on the browser console

  5. #4
    Sencha User DrunkenBeard's Avatar
    Join Date
    May 2011
    Posts
    55
    Answers
    2

    Default

    Looking quickly through your code it doesn't seem you're actually loading your store anywhere, so you may have to add an "autoLoad: true" to your store or load it dynamically in the controller's launch method.

  6. #5
    Sencha User
    Join Date
    Aug 2011
    Posts
    31

    Default

    Code:
    Ext.define('CarApp.store.Car', {
        extend:'Ext.data.TreeStore',
        // You don't have to give a store an id. By default it uses it's
        // name as the id, e.g. this store's id will be 'Car'
        //id: 'CarListStore',
        model: 'Car',
        root: 'carlist',
        autoLoad: true
        
        // You don't have to set a proxy on both the Model and the Store.
        // Usually its preferred to set the proxy only on the Model
        // proxy: {
        //     type: 'ajax',
        //     url: 'CarApp/CarFile'
        // }
    });  
    Thanks for the tip, i tried that also but it doesn 't change the outcome
    It only shows the html i added 'Ola'

  7. #6
    Sencha User DrunkenBeard's Avatar
    Join Date
    May 2011
    Posts
    55
    Answers
    2

    Default

    Well, it may be worth mentioning that it's "autoLoad" not "autoload" (capital L)

  8. #7
    Sencha User
    Join Date
    Aug 2011
    Posts
    31

    Default

    Sorry lol, in fact i did wrote autoLoad on my code, just forgot to correct it on the post Apart from that it remains the same.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •