src/examples/kiva/app/controller/Loans.js

   1 /**
   2  * @class Kiva.controller.Loans
   3  * @extends Ext.app.Controller
   4  *
   5  * The only controller in this simple application - this simply sets up the fullscreen viewport panel
   6  * and renders a detailed overlay whenever a Loan is tapped on.
   7  */
   8 Ext.define('Kiva.controller.Loans', {
   9     extend: 'Ext.app.Controller',
  10
  11     config: {
  12         profile: Ext.os.deviceType.toLowerCase(),
  13
  14         refs: {
  15             main: 'mainview',
  16             loansList: 'loanslist',
  17             loanFilter: 'loanfilter',
  18             searchField: 'searchfield',
  19             refreshButton: 'button[iconCls=refresh]'
  20         },
  21
  22         control: {
  23             'loanslist': {
  24                 select: 'onListTap'
  25             },
  26             'detail': {
  27                 hideanimationstart: 'onDetailHideAnimationStart'
  28             },
  29             'searchfield': {
  30                 action: 'onSearch'
  31             },
  32             'selectfield': {
  33                 change: 'onSelectChange'
  34             },
  35             'button[iconCls=refresh]': {
  36                 tap: 'onRefreshButtonTap'
  37             }
  38         }
  39     },
  40
  41     init: function() {
  42         Ext.getStore('Loans').on({
  43             scope: this,
  44
  45             beforeload: this.onBeforeStoreLoad,
  46             load: this.onStoreLoad
  47         });
  48     },
  49
  50     onListTap: function(list, loan) {
  51         if (!this.view) {
  52             this.view = Ext.create('Kiva.view.Detail');
  53         }
  54
  55         var view = this.view;
  56         view.setLoan(loan);
  57
  58         if (this.getProfile() == "phone") {
  59             view.setWidth(null);
  60             view.setHeight('85%');
  61             view.setTop(null);
  62             view.setLeft(0);
  63         }
  64
  65         if (!view.getParent()) {
  66             Ext.Viewport.add(view);
  67         }
  68
  69         view.show();
  70     },
  71
  72     onSearch: function(field) {
  73         this.doFilter({
  74             q: field.getValue()
  75         });
  76     },
  77
  78     onSelectChange: function(field) {
  79         if (!field.initialized) {
  80             return;
  81         }
  82
  83         var config = {};
  84         config[field.getName()] = field.getValue();
  85         this.doFilter(config);
  86     },
  87
  88     onDetailHideAnimationStart: function() {
  89         this.getLoansList().deselectAll();
  90     },
  91
  92     onRefreshButtonTap: function() {
  93         var store = Ext.getStore('Loans'),
  94             hasValue = Boolean(this.getSearchField().getValue().length);
  95
  96         if (!hasValue) {
  97             store.clearFilter();
  98         }
  99
 100         store.load();
 101     },
 102
 103     onBeforeStoreLoad: function() {
 104         this.getRefreshButton().setDisabled(true);
 105     },
 106
 107     onStoreLoad: function() {
 108         this.getRefreshButton().setDisabled(false);
 109     },
 110
 111     /**
 112      * @private
 113      * Listener for the 'filter' event fired by the listView set up in the 'list' action. This simply
 114      * gets the form values that the user wants to filter on and tells the Store to filter using them.
 115      */
 116     doFilter: function(values) {
 117         var store = Ext.getStore('Loans'),
 118             filters = [];
 119
 120         Ext.iterate(values, function(field, value) {
 121             filters.push({
 122                 property: field,
 123                 value   : value
 124             });
 125         });
 126
 127         store.clearFilter(true);
 128         store.filter(filters);
 129         store.load();
 130     }
 131 });