title: ExtJs Message box sliding of message
body: <p>I came across <a href="http://dev.sencha.com/deploy/ext-4.0.0/examples/message-box/msg-box.html" rel="nofollow">this</a> example in extJs. i find that they are using Ext.example.msg for the sliding to happen. So, I have decided to store the file example.js in app/ext/example/example.js</p>
  
  <pre><code>Ext.example = function(){
      var msgCt;
  
      function createBox(t, s){
          return ['&lt;div class="msg"&gt;',
                  '&lt;div class="x-box-tl"&gt;&lt;div class="x-box-tr"&gt;&lt;div class="x-box-tc"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;',
                  '&lt;div class="x-box-ml"&gt;&lt;div class="x-box-mr"&gt;&lt;div class="x-box-mc"&gt;&lt;h3&gt;', t, '&lt;/h3&gt;', s, '&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;',
                  '&lt;div class="x-box-bl"&gt;&lt;div class="x-box-br"&gt;&lt;div class="x-box-bc"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;',
                  '&lt;/div&gt;'].join('');
      }
      return {
          msg : function(title, format){
              if(!msgCt){
                  msgCt = Ext.DomHelper.insertFirst(document.body, {id:'msg-div'}, true);
                  debugger;
              }
              msgCt.alignTo(document, 't-t');
              var s = String.format.apply(String, Array.prototype.slice.call(arguments, 1));
              var m = Ext.DomHelper.append(msgCt, {html:createBox(title, s)}, true);
              m.slideIn('t').pause(1).ghost("t", {remove:true});
          },
  
          init : function(){
              var t = Ext.get('exttheme');
              if(!t){ // run locally?
                  return;
              }
              var theme = Cookies.get('exttheme') || 'aero';
              if(theme){
                  t.dom.value = theme;
                  Ext.getBody().addClass('x-'+theme);
              }
              t.on('change', function(){
                  Cookies.set('exttheme', t.getValue());
                  setTimeout(function(){
                      window.location.reload();
                  }, 250);
              });
  
              var lb = Ext.get('lib-bar');
              if(lb){
                  lb.show();
              }
          }
      };
  }();
  </code></pre>
  
  <p>In index.html I have added the path <code>&lt;script src="./example/example.js" type="text/javascript" &gt;&lt;/script&gt;</code>. I keep a debugger inside example.js. It's failing at this ( <code>var s = String.format.apply(String, Array.prototype.slice.call(arguments, 1));</code>) line and displaying the message <strong>Uncaught TypeError: Cannot call method 'apply' of undefined</strong>. What is this about? I have a save button in my controller and  </p>
  
  <pre><code>Ext.MessageBox.alert('Save', 'xxxx', showResult);
  
  function showResult(btn){
      debugger;
      Ext.example.msg('Button Click', 'You clicked the {0} button', btn);
  };
  </code></pre>
  
  <p>What is the new methodology now in ExtJs 4.2. Suggestions please.</p>