examples/shared/extjs/App.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 /**
  16  * Ext.App
  17  * @extends Ext.util.Observable
  18  * @author Chris Scott
  19  */
  20 Ext.define('Ext.App', {
  21     extend: 'Ext.util.Observable',
  22
  23     /***
  24      * response status codes.
  25      */
  26     STATUS_EXCEPTION :          'exception',
  27     STATUS_VALIDATION_ERROR :   "validation",
  28     STATUS_ERROR:               "error",
  29     STATUS_NOTICE:              "notice",
  30     STATUS_OK:                  "ok",
  31     STATUS_HELP:                "help",
  32
  33     /**
  34      * @cfg {Object} api
  35      * remoting api.  should be defined in your own config js.
  36      */
  37     api: {
  38         url: null,
  39         type: null,
  40         actions: {}
  41     },
  42
  43     // private, ref to message-box Element.
  44     msgCt : null,
  45
  46     constructor: function(config) {
  47         this.views = [];
  48
  49         this.initStateProvider();
  50
  51         Ext.apply(this, config);
  52
  53         if (!this.api.actions) {
  54             this.api.actions = {};
  55         }
  56
  57         Ext.onReady(this.onReady, this);
  58
  59         Ext.App.superclass.constructor.apply(this, arguments);
  60     },
  61
  62     // @protected, onReady, executes when Ext.onReady fires.
  63     onReady : function() {
  64         // create the msgBox container.  used for App.setAlert
  65         this.msgCt = Ext.DomHelper.insertFirst(document.body, {id:'msg-div'}, true);
  66         this.msgCt.setStyle('position', 'absolute');
  67         this.msgCt.setStyle('z-index', 9999);
  68         this.msgCt.setWidth(300);
  69     },
  70
  71     initStateProvider : function() {
  72         /*
  73          * set days to be however long you think cookies should last
  74          */
  75         var days = '';        // expires when browser closes
  76         if(days){
  77             var date = new Date();
  78             date.setTime(date.getTime()+(days*24*60*60*1000));
  79             var exptime = "; expires="+date.toGMTString();
  80         } else {
  81             var exptime = null;
  82         }
  83
  84         // register provider with state manager.
  85         Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider', {
  86             path: '/',
  87             expires: exptime,
  88             domain: null,
  89             secure: false
  90         }));
  91     },
  92
  93     /**
  94      * registerView
  95      * register an application view component.
  96      * @param {Object} view
  97      */
  98     registerView : function(view) {
  99         this.views.push(view);
 100     },
 101
 102     /**
 103      * getViews
 104      * return list of registered views
 105      */
 106     getViews : function() {
 107         return this.views;
 108     },
 109
 110     /**
 111      * registerActions
 112      * registers new actions for API
 113      * @param {Object} actions
 114      */
 115     registerActions : function(actions) {
 116         Ext.apply(this.api.actions, actions);
 117     },
 118
 119     /**
 120      * getAPI
 121      * return Ext Remoting api
 122      */
 123     getAPI : function() {
 124         return this.api;
 125     },
 126
 127     /***
 128      * setAlert
 129      * show the message box.  Aliased to addMessage
 130      * @param {String} msg
 131      * @param {Bool} status
 132      */
 133     setAlert : function(status, msg) {
 134         this.addMessage(status, msg);
 135     },
 136
 137     /***
 138      * adds a message to queue.
 139      * @param {String} msg
 140      * @param {Bool} status
 141      */
 142     addMessage : function(status, msg) {
 143         var delay = 3;    // <-- default delay of msg box is 1 second.
 144         if (status == false) {
 145             delay = 5;    // <-- when status is error, msg box delay is 3 seconds.
 146         }
 147         // add some smarts to msg's duration (div by 13.3 between 3 & 9 seconds)
 148         delay = msg.length / 13.3;
 149         if (delay < 3) {
 150             delay = 3;
 151         }
 152         else if (delay > 9) {
 153             delay = 9;
 154         }
 155
 156         this.msgCt.alignTo(document, 't-t');
 157         Ext.DomHelper.append(this.msgCt, {html:this.buildMessageBox(status, String.format.apply(String, Array.prototype.slice.call(arguments, 1)))}, true).slideIn('t').pause(delay).ghost("t", {remove:true});
 158     },
 159
 160     /***
 161      * buildMessageBox
 162      */
 163     buildMessageBox : function(title, msg) {
 164         switch (title) {
 165             case true:
 166                 title = this.STATUS_OK;
 167                 break;
 168             case false:
 169                 title = this.STATUS_ERROR;
 170                 break;
 171         }
 172         return [
 173             '<div class="app-msg">',
 174             '<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>',
 175             '<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc"><h3 class="x-icon-text icon-status-' + title + '">', title, '</h3>', msg, '</div></div></div>',
 176             '<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>',
 177             '</div>'
 178         ].join('');
 179     },
 180
 181     /**
 182      * decodeStatusIcon
 183      * @param {Object} status
 184      */
 185     decodeStatusIcon : function(status) {
 186         var iconCls = '';
 187         switch (status) {
 188             case true:
 189             case this.STATUS_OK:
 190                 iconCls = this.ICON_OK;
 191                 break;
 192             case this.STATUS_NOTICE:
 193                 iconCls = this.ICON_NOTICE;
 194                 break;
 195             case false:
 196             case this.STATUS_ERROR:
 197                 iconCls = this.ICON_ERROR;
 198                 break;
 199             case this.STATUS_HELP:
 200                 iconCls = this.ICON_HELP;
 201                 break;
 202         }
 203         return iconCls;
 204     },
 205
 206     /***
 207      * setViewState, alias for Ext.state.Manager.set
 208      * @param {Object} key
 209      * @param {Object} value
 210      */
 211     setViewState : function(key, value) {
 212         Ext.state.Manager.set(key, value);
 213     },
 214
 215     /***
 216      * getViewState, aliaz for Ext.state.Manager.get
 217      * @param {Object} cmd
 218      */
 219     getViewState : function(key) {
 220         return Ext.state.Manager.get(key);
 221     },
 222
 223     /**
 224      * t
 225      * translation function.  needs to be implemented.  simply echos supplied word back currently.
 226      * @param {String} to translate
 227      * @return {String} translated.
 228      */
 229     t : function(words) {
 230         return words;
 231     },
 232
 233     handleResponse : function(res) {
 234         if (res.type == this.STATUS_EXCEPTION) {
 235             return this.handleException(res);
 236         }
 237         if (res.message.length > 0) {
 238             this.setAlert(res.status, res.message);
 239         }
 240     },
 241
 242     handleException : function(res) {
 243         Ext.MessageBox.alert(res.type.toUpperCase(), res.message);
 244     }
 245 });
 246