src/examples/list/app.js

   1 //<debug>
   2 Ext.Loader.setPath({
   3     'Ext': '../../src'
   4 });
   5 //</debug>
   6
   7 /**
   8  * This simple example shows the ability of the Ext.List component.
   9  *
  10  * In this example, it uses a grouped store to show group headers in the list. It also
  11  * includes an indicator so you can quickly swipe through each of the groups. On top of that
  12  * it has a disclosure button so you can disclose more information for a list item.
  13  */
  14
  15 //define the application
  16 Ext.application({
  17     //define the startupscreens for tablet and phone, as well as the icon
  18     startupImage: {
  19         '320x460': 'resources/startup/Default.jpg', // Non-retina iPhone, iPod touch, and all Android devices
  20         '640x920': 'resources/startup/640x920.png', // Retina iPhone and iPod touch
  21         '640x1096': 'resources/startup/640x1096.png', // iPhone 5 and iPod touch (fifth generation)
  22         '768x1004': 'resources/startup/768x1004.png', //  Non-retina iPad (first and second generation) in portrait orientation
  23         '748x1024': 'resources/startup/748x1024.png', //  Non-retina iPad (first and second generation) in landscape orientation
  24         '1536x2008': 'resources/startup/1536x2008.png', // : Retina iPad (third generation) in portrait orientation
  25         '1496x2048': 'resources/startup/1496x2048.png' // : Retina iPad (third generation) in landscape orientation
  26     },
  27
  28     isIconPrecomposed: false,
  29     icon: {
  30         57: 'resources/icons/icon.png',
  31         72: 'resources/icons/icon@72.png',
  32         114: 'resources/icons/icon@2x.png',
  33         144: 'resources/icons/icon@144.png'
  34     },
  35
  36     //require any components/classes what we will use in our example
  37     requires: [
  38         'Ext.MessageBox',
  39         'Ext.data.Store',
  40         'Ext.List',
  41         'Ext.plugin.PullRefresh'
  42     ],
  43
  44     /**
  45      * The launch method is called when the browser is ready, and the application can launch.
  46      *
  47      * Inside our launch method we create the list and show in in the viewport. We get the lists configuration
  48      * using the getListConfiguration method which we defined below.
  49      *
  50      * If the user is not on a phone, we wrap the list inside a panel which is centered on the page.
  51      */
  52     launch: function() {
  53         //get the configuration for the list
  54         var listConfiguration = this.getListConfiguration();
  55
  56         //if the device is not a phone, we want to create a centered panel and put the list
  57         //into that
  58         if (!Ext.os.is.Phone) {
  59             //use Ext.Viewport.add to add a new component into the viewport
  60             Ext.Viewport.add({
  61                 //give it an xtype of panel
  62                 xtype: 'panel',
  63
  64                 //give it a fixed witdh and height
  65                 width: 350,
  66                 height: 370,
  67
  68                 //make it centered
  69                 centered: true,
  70
  71                 //make the component modal so there is a mask around the panel
  72                 modal: true,
  73
  74                 //set hideOnMaskTap to false so the panel does not hide when you tap on the mask
  75                 hideOnMaskTap: false,
  76
  77                 //give it a layout of fit so the list stretches to the size of this panel
  78                 layout: 'fit',
  79
  80                 //insert the listConfiguration as an item into this panel
  81                 items: [listConfiguration]
  82             });
  83         } else {
  84             //if we are a phone, simply add the list as an item to the viewport
  85             Ext.Viewport.add(listConfiguration);
  86         }
  87     },
  88
  89     /**
  90      * Returns a configuration object to be used when adding the list to the viewport.
  91      */
  92     getListConfiguration: function() {
  93         //create a store instance
  94         var store = Ext.create('Ext.data.Store', {
  95             //give the store some fields
  96             fields: ['firstName', 'lastName'],
  97
  98             //filter the data using the firstName field
  99             sorters: 'firstName',
 100
 101             //autoload the data from the server
 102             autoLoad: true,
 103
 104             //setup the grouping functionality to group by the first letter of the firstName field
 105             grouper: {
 106                 groupFn: function(record) {
 107                     return record.get('firstName')[0];
 108                 }
 109             },
 110
 111             //setup the proxy for the store to use an ajax proxy and give it a url to load
 112             //the local contacts.json file
 113             proxy: {
 114                 type: 'ajax',
 115                 url: 'contacts.json'
 116             }
 117         });
 118
 119         return {
 120             //give it an xtype of list for the list component
 121             xtype: 'list',
 122
 123             id: 'list',
 124
 125 //            scrollable: {
 126 //                indicators: false
 127 //            },
 128
 129             //set the itemtpl to show the fields for the store
 130             itemTpl: '{firstName} {lastName}',
 131
 132             //enable disclosure icons
 133             //disclosure: true,
 134
 135             //group the list
 136             grouped: true,
 137
 138             //enable the indexBar
 139             indexBar: true,
 140
 141             infinite: true,
 142
 143             useSimpleItems: true,
 144
 145             variableHeights: true,
 146
 147             striped: true,
 148
 149             ui: 'round',
 150
 151             //set the function when a user taps on a disclsoure icon
 152             // onItemDisclosure: function(record, item, index, e) {
 153             //     //show a messagebox alert which shows the persons firstName
 154             //     e.stopEvent();
 155             //     Ext.Msg.alert('Disclose', 'Disclose more info for ' + record.get('firstName'));
 156             // },
 157
 158             //bind the store to this list
 159             store: store
 160         };
 161     }
 162 });