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