src/examples/pullrefresh/app.js

   1 //<debug>
   2 Ext.Loader.setPath({
   3     'Ext': '../../src'
   4 });
   5 //</debug>
   6
   7 // This utility function takes a date and returns a representation in words.
   8 var timeAgoInWords = function(date) {
   9     try {
  10         var now = Math.ceil(Number(new Date()) / 1000),
  11             dateTime = Math.ceil(Number(new Date(date)) / 1000),
  12             diff = now - dateTime,
  13             str;
  14
  15         if (diff < 60) {
  16             return String(diff) + ' seconds ago';
  17         } else if (diff < 3600) {
  18             str = String(Math.ceil(diff / (60)));
  19             return str + (str == "1" ? ' minute' : ' minutes') + ' ago';
  20         } else if (diff < 86400) {
  21             str = String(Math.ceil(diff / (3600)));
  22             return str + (str == "1" ? ' hour' : ' hours') + ' ago';
  23         } else if (diff < 60 * 60 * 24 * 365) {
  24             str = String(Math.ceil(diff / (60 * 60 * 24)));
  25             return str + (str == "1" ? ' day' : ' days') + ' ago';
  26         } else {
  27             return Ext.Date.format(new Date(date), 'jS M \'y');
  28         }
  29     } catch (e) {
  30         return '';
  31     }
  32 };
  33
  34 /**
  35  * This examples illustrates the 'List Paging' and 'Pull Refresh' plugins
  36  */
  37 Ext.setup({
  38     requires: [
  39         'Ext.data.Store',
  40         'Ext.List',
  41         'Ext.data.proxy.Rest',
  42         'Ext.plugin.ListPaging',
  43         'Ext.plugin.PullRefresh'
  44     ],
  45
  46     startupImage: {
  47         '320x460': 'resources/startup/Default.jpg', // Non-retina iPhone, iPod touch, and all Android devices
  48         '640x920': 'resources/startup/640x920.png', // Retina iPhone and iPod touch
  49         '640x1096': 'resources/startup/640x1096.png', // iPhone 5 and iPod touch (fifth generation)
  50         '768x1004': 'resources/startup/768x1004.png', //  Non-retina iPad (first and second generation) in portrait orientation
  51         '748x1024': 'resources/startup/748x1024.png', //  Non-retina iPad (first and second generation) in landscape orientation
  52         '1536x2008': 'resources/startup/1536x2008.png', // : Retina iPad (third generation) in portrait orientation
  53         '1496x2048': 'resources/startup/1496x2048.png' // : Retina iPad (third generation) in landscape orientation
  54     },
  55
  56     isIconPrecomposed: false,
  57     icon: {
  58         57: 'resources/icons/icon.png',
  59         72: 'resources/icons/icon@72.png',
  60         114: 'resources/icons/icon@2x.png',
  61         144: 'resources/icons/icon@144.png'
  62     },
  63
  64     onReady: function() {
  65         Ext.override(Ext.data.proxy.Rest, {
  66             getMethod: function(){
  67                 return 'POST';
  68             }
  69         });
  70
  71         Ext.define('TweetStore', {
  72             extend: 'Ext.data.Store',
  73
  74             config: {
  75                 fields: ['from_user', 'profile_image_url', 'text', 'created_at'],
  76
  77                 pageSize: 15,
  78                 autoLoad:true,
  79                 proxy: {
  80                     type: 'rest',
  81                     url: 'http://schematic-ipsum.herokuapp.com/?n=15',
  82
  83                     extraParams: {
  84                          "type": "object",
  85                          "properties[id][type]":"string",
  86                          "properties[id][ipsum]":"id",
  87                          "properties[from_user][type]":"string",
  88                          "properties[from_user][ipsum]":"first name",
  89                          "properties[profile_image_url][type]":"string",
  90                          "properties[profile_image_url][ipsum]":"small image",
  91                          "properties[text][type]":"string",
  92                          "properties[text][ipsum]":"sentence",
  93                          "properties[created_at][type]":"string",
  94                          "properties[created_at][format]":"date-time"
  95                     }
  96                 }
  97             }
  98         });
  99
 100         Ext.define('TweetList', {
 101             extend: 'Ext.List',
 102
 103             config: {
 104                 useSimpleItems: false,
 105                 variableHeights: true,
 106                 infinite: true,
 107                 disableSelection: true,
 108                 allowDeselect: false,
 109                 scrollToTopOnRefresh: false,
 110                 store: Ext.create('TweetStore'),
 111
 112                 plugins: [
 113                     { xclass: 'Ext.plugin.ListPaging' },
 114                     { xclass: 'Ext.plugin.PullRefresh' }
 115                 ],
 116                 emptyText: '<p class="no-searches">No tweets found matching that search</p>',
 117
 118                 itemTpl: Ext.create('Ext.XTemplate',
 119                     '<div class="twitter-post">',
 120                     '<img src="{profile_image_url}" />',
 121                     '<div class="tweet">',
 122                     '<span class="posted">{[this.posted(values.created_at)]}</span>',
 123                     '<h2>@{from_user}</h2>',
 124                     '<p>{text}</p>',
 125                     '</div>',
 126                     {
 127                         posted: timeAgoInWords
 128                     }
 129                 )
 130             }
 131         });
 132
 133         if (Ext.os.is.Phone) {
 134             Ext.create('TweetList', {
 135                 fullscreen: true
 136             });
 137         } else {
 138             Ext.Viewport.add({
 139                 xclass: 'TweetList',
 140                 width: 380,
 141                 height: 420,
 142                 centered: true,
 143                 modal: true,
 144                 hideOnMaskTap: false
 145             }).show();
 146         }
 147     }
 148 });