ExtJS 3.4 Calendar Popup

by Alexander Tymchuk

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/3.4.1-1/resources/css/ext-all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/3.4.1-1/adapter/ext/ext-base.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/3.4.1-1/ext-all-debug.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<div id="Edit" style="margin-top: 10px">
  <input id="dtInput" type="text" class="date" name="dtInput" />
  <span id="command"></span>
</div>

CSS

body {
  padding: 20px;
}
.date {
  width: 150px;
  font-size: 14px;
  padding: 5px 8px;
  line-height: 1.5;
  float: left;
}
.showBtn {
  line-height: 2;
  width: 33px;
  height: 33px;
  text-align: center;
  display: inline-block;
  border: 1px solid #ccc;
  border-left: 0;
  cursor: pointer;
}

JavaScript

console.clear();
    var btn = new Ext.BoxComponent({
    	//el: 'command',
      text: 'Show',
      id: 'showBtn',
      cls: 'showBtn',
    	renderTo: 'command',
      html: '<i class="fa fa-calendar"></i>',
      initComponent: function(btn) {
      	Ext.BoxComponent.superclass.initComponent.call(this);
        if(this.menu == null) {
          this.menu = new Ext.menu.DateMenu({
            hideOnClick: false,
            focusOnSelect: false
          });
        }
      },
      listeners: {
      	render: function(cmp) {
        	cmp.getEl().on('click', cmp.onClick, cmp);
        }
      }, 
      onClick: function() {
        var visible = !!this.visible;
        if (!visible) {
          this.menu.show(Ext.get('showBtn'), "tr-br?");
        	this.menuEvents('on');
          this.visible = true;
        }
      },
      menuEvents: function(method) {
        this.menu[method]('select', this.onSelect, this);
        this.menu[method]('hide', this.onMenuHide, this);
        //this.menu[method]('show', this.onFocus, this);
    	},
      onSelect: function(m, d) {
          this.setValue(d);
          this.fireEvent('select', this, d);
          //this.menu.hide();
      },
      onMenuHide: function() {
          //this.focus(false, 60);
          this.visible = false;
          this.menuEvents('un');
      },
      setValue: function(d) {
      	var dt = d.toLocaleString();
      	console.log(dt);
      	Ext.fly('dtInput').dom.value = dt.replace(/,.*/, '');
      }
    });