1. #1
    Sencha User
    Join Date
    Oct 2010
    Location
    Chandigarh (INDIA)
    Posts
    143
    Vote Rating
    0
    sachin sachdeva is on a distinguished road

      0  

    Default Help ---List with root element in very siple json data not working in sencha touch 2

    Help ---List with root element in very siple json data not working in sencha touch 2


    Hi All

    I have a json data with a root element in it Now my problem is i am not able to create a list from it perhaps i have tried every possible exaplr avilable in sencha touch website.

    Error--'undefined' is not an object (evaluating 'record.get('name')[0]')

    MY JSON IS
    PHP Code:







    {
        
    "ebooks": [
            {
                
    "type""ebook",
                
    "pages""3",
                
    "name""10 page to new page",
                
    "id""1126"
            
    },
            {
                
    "type""ebook",
                
    "pages""10",
                
    "name""10 pages",
                
    "id""1124"
            
    }
        ],
        
    "total"2


    My code For List Is

    PHP Code:


    //<debug>
    Ext.Loader.setPath({
        
    'Ext''../../src'
    });
    //</debug>

    /**
     * This simple example shows the ability of the Ext.List component.
     *
     * In this example, it uses a grouped store to show group headers in the list. It also
     * includes an indicator so you can quickly swipe through each of the groups. On top of that
     * it has a disclosure button so you can disclose more information for a list item.
     */

    //define the application
    Ext.application({
        
    //define the startupscreens for tablet and phone, as well as the icon
        
    phoneStartupScreen'resources/loading/Homescreen.jpg',
        
    tabletStartupScreen'resources/loading/Homescreen~ipad.jpg',

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

        
    //require any components/classes what we will use in our example
        
    requires: [
            
    'Ext.data.Store',
            
    'Ext.List',
            
    'Ext.plugin.PullRefresh'
        
    ],

        
    /**
         * The launch method is called when the browser is ready, and the application can launch.
         *
         * Inside our launch method we create the list and show in in the viewport. We get the lists configuration
         * using the getListConfiguration method which we defined below.
         *
         * If the user is not on a phone, we wrap the list inside a panel which is centered on the page.
         */
        
    launch: function() {
            
    //get the configuration for the list
            
    var listConfiguration this.getListConfiguration();

            
    //if the device is not a phone, we want to create a centered panel and put the list
            //into that
            
    if (!Ext.os.is.Phone) {
                
    //use Ext.Viewport.add to add a new component into the viewport
                
    Ext.Viewport.add({
                    
    //give it an xtype of panel
                    
    xtype'panel',

                    
    //give it a fixed witdh and height
                    
    width350,
                    
    height370,

                    
    //make it centered
                    
    centeredtrue,

                    
    //make the component modal so there is a mask around the panel
                    
    modaltrue,

                    
    //set hideOnMaskTap to false so the panel does not hide when you tap on the mask
                    
    hideOnMaskTapfalse,

                    
    //give it a layout of fit so the list stretches to the size of this panel
                    
    layout'fit',

                    
    //insert the listConfiguration as an item into this panel
                    
    items: [listConfiguration]
                });
            } else {
                
    //if we are a phone, simply add the list as an item to the viewport
                
    Ext.Viewport.add(listConfiguration);
            }
        },

        
    /**
         * Returns a configuration object to be used when adding the list to the viewport.
         */
        
    getListConfiguration: function() {
            
    //create a store instance
            
    var store Ext.create('Ext.data.Store', {
                
    //give the store some fields
                
    fields: ['name''id'],

                
    //filter the data using the firstName field
                
    sorters'name',

                
    //autoload the data from the server
                
    autoLoadtrue,

                
    //setup the grouping functionality to group by the first letter of the firstName field
                
    grouper: {
    // I am getting error here-----------------------------------------------------
                    
    groupFn: function(record) {
                        return 
    record.get('name')[0];
                    }
                },

                
    //setup the proxy for the store to use an ajax proxy and give it a url to load
                //the local contacts.json file
                
    proxy: {
                    
    type'ajax',
                    
    url'js/contacts.json',
                    
    root:'ebooks'
                
    }
            });

            return {
                
    //give it an xtype of list for the list component
                
    xtype'list',

                
    //set the itemtpl to show the fields for the store
                
    itemTpl'<div class="contact2"><strong>{name}</strong></div>',

                
    //enable disclosure icons
                
    disclosuretrue,

                
    //group the list
                
    groupedtrue,

                
    //enable the indexBar
                
    indexBartrue,

                
    //set the function when a user taps on a disclsoure icon
                
    onItemDisclosure: function(recorditemindexe) {
                    
    //show a messagebox alert which shows the persons firstName
                    
    e.stopEvent();
                    
    Ext.Msg.alert('Disclose''Disclose more info for ' record.get('firstName'));
                },

                
    //bind the store to this list
                
    storestore
            
    };
        }
    }); 

    Please help ASAP

    Regards
    Sachin Sachdeva

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,525
    Vote Rating
    872
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Your proxy config should look like

    Code:
                proxy: {
                    type: 'ajax',
                    url: 'js/contacts.json',
                    reader : {
                        type : 'json',
                        rootProperty: 'ebooks'
                    }
                }
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1