/** * 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 applicationExt.application({//define the startupscreens for tablet and phone, as well as the iconphoneStartupScreen: 'resources/loading/Homescreen.jpg',tabletStartupScreen: 'resources/loading/Homescreen~ipad.jpg',

//require any components/classes what we will use in our examplerequires: ['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 listvar listConfiguration = this.getListConfiguration();

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

//give it a fixed witdh and heightwidth: 350,height: 370,

//make it centeredcentered: true,

//make the component modal so there is a mask around the panelmodal: true,

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

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

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

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

//filter the data using the firstName fieldsorters: 'name',

//autoload the data from the serverautoLoad: true,

//setup the grouping functionality to group by the first letter of the firstName fieldgrouper: {// 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 fileproxy: {type: 'ajax',url: 'js/contacts.json',root:'ebooks'} });

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

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

//enable disclosure iconsdisclosure: true,

//group the listgrouped: true,

//enable the indexBarindexBar: true,

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