controller.gotocase.coffee

###
@class gotocase
@extends Ext.Controller
The gotocase controller
###
Ext.regController "gotocase",

    first: (options) ->
        caseid = options.id if options

        ## If a valid caseid was specified on the URL then goto it!
        if @isValid caseid then @goto(caseid) else @showMsg()

    showMsg: (options) ->
        # The {title} and {msg} are overridable, this is currently only used
        # when the user enters an invalid caseid.
        options or= {}
        options.title or= "Goto Case"
        options.msg or= ""

        config =
            focus: true
            # Using type=tel makes the iphone keyboard display the big button
            # number keyboard which is used when making a phone call.
            type: "tel"

        Ext.Msg.on 'show', @onMsgShow, this
        Ext.Msg.prompt options.title, options.msg, @onButtonTap, this, false, false, config

    onMsgShow: ->
        # Functions
        enableTTS = (el) ->
            el.set({ "x-webkit-speech": ""}) if el?

        @inputField = Ext.Msg.getEl().down('.x-msgbox-input')
        @inputField.on 'keyup', @onKeyUp, this
        @inputField.on 'webkitspeechchange', @onKeyUp, this
        enableTTS(@inputField)

        @cancelButton = Ext.Msg.getDockedComponent(1).getComponent(0)
        @okButton = Ext.Msg.getDockedComponent(1).getComponent(1)
        @okButton.disable()

    onKeyUp: (event,field) ->
        value = @inputField.dom.value
        if @isValid(value) then @okButton.enable() else @okButton.disable()

        enter = 13
        keyCode = event.browserEvent.keyCode

        tts = true if event.browserEvent.type is "webkitspeechchange"

        if tts or keyCode is enter and @isValid(value) then Ext.Msg.onClick(@okButton)

    onButtonTap: (button, caseid) ->
        return if button is "cancel"
        if button is "ok"
            # The caseid should have already been validated by @onKeyUp() do it
            # again just to be sure.
            if @isValid(caseid)
            then @goto(caseid)
            else
                alert = new Ext.util.DelayedTask ->
                    @showMsg
                        msg: "Please specifiy a valid caseid"
                ,this

                alert.delay(250)

    goto: (caseid) ->
        if caseid?
            Ext.dispatch
                controller: 'casedetail',
                action: 'first',
                id: caseid
                historyUrl: 'casedetail/' + caseid

    # The default Javascript behaviour for isNaN is to return 
    # true if the value is not an number. In this case we are
    # inverting the result and returning the *opposite**
    # i.e. checking to see if the input is valid number (integer).
    isValid: (x) ->
        return false if x is ""
        return true if not isNaN x

controller.gotocase.js

(function() {
  /*
  @class gotocase
  @extends Ext.Controller
  The gotocase controller
  */  Ext.regController("gotocase", {
    first: function(options) {
      var caseid;
      if (options) {
        caseid = options.id;
      }
      if (this.isValid(caseid)) {
        return this.goto(caseid);
      } else {
        return this.showMsg();
      }
    },
    showMsg: function(options) {
      var config;
      options || (options = {});
      options.title || (options.title = "Goto Case");
      options.msg || (options.msg = "");
      config = {
        focus: true,
        type: "tel"
      };
      Ext.Msg.on('show', this.onMsgShow, this);
      return Ext.Msg.prompt(options.title, options.msg, this.onButtonTap, this, false, false, config);
    },
    onMsgShow: function() {
      var enableTTS;
      enableTTS = function(el) {
        if (el != null) {
          return el.set({
            "x-webkit-speech": ""
          });
        }
      };
      this.inputField = Ext.Msg.getEl().down('.x-msgbox-input');
      this.inputField.on('keyup', this.onKeyUp, this);
      this.inputField.on('webkitspeechchange', this.onKeyUp, this);
      enableTTS(this.inputField);
      this.cancelButton = Ext.Msg.getDockedComponent(1).getComponent(0);
      this.okButton = Ext.Msg.getDockedComponent(1).getComponent(1);
      return this.okButton.disable();
    },
    onKeyUp: function(event, field) {
      var enter, keyCode, tts, value;
      value = this.inputField.dom.value;
      if (this.isValid(value)) {
        this.okButton.enable();
      } else {
        this.okButton.disable();
      }
      enter = 13;
      keyCode = event.browserEvent.keyCode;
      if (event.browserEvent.type === "webkitspeechchange") {
        tts = true;
      }
      if (tts || keyCode === enter && this.isValid(value)) {
        return Ext.Msg.onClick(this.okButton);
      }
    },
    onButtonTap: function(button, caseid) {
      var alert;
      if (button === "cancel") {
        return;
      }
      if (button === "ok") {
        if (this.isValid(caseid)) {
          return this.goto(caseid);
        } else {
          alert = new Ext.util.DelayedTask(function() {
            return this.showMsg({
              msg: "Please specifiy a valid caseid"
            });
          }, this);
          return alert.delay(250);
        }
      }
    },
    goto: function(caseid) {
      if (caseid != null) {
        return Ext.dispatch({
          controller: 'casedetail',
          action: 'first',
          id: caseid,
          historyUrl: 'casedetail/' + caseid
        });
      }
    },
    isValid: function(x) {
      if (x === "") {
        return false;
      }
      if (!isNaN(x)) {
        return true;
      }
    }
  });
}).call(this);

Ext.MsgBox.coffee

# Ext.Msg is by default a global ***shared*** singleton instance of the
# Ext.MessageBox class. The following helper will recycle the singleton
# back to default settings each time Ext.Msg is hidden.
#
# http://www.sencha.com/forum/showthread.php?116076-Messagebox-height

resetMsgBox = ->
    Ext.Msg = new Ext.MessageBox()
    Ext.Msg.on
        hide: (x) -> x.destroy()
        destroy: -> resetMsgBox()

# Activate the hack.
resetMsgBox()

Ext.MsgBox.js

(function() {
  var resetMsgBox;
  resetMsgBox = function() {
    Ext.Msg = new Ext.MessageBox();
    return Ext.Msg.on({
      hide: function(x) {
        return x.destroy();
      },
      destroy: function() {
        return resetMsgBox();
      }
    });
  };
  resetMsgBox();
}).call(this);