Ext Js, How to Change DatePicker Size

Here is the snippet of the code which shows how to change the datepicker’s size to your requirement.

new Ext.DatePicker({
  // ----
  listeners:{
    render: function(picker) {
      // sizing the date picker
      var elContainer = picker.el;
      var elTable = picker.el.down('table');
      elContainer.setWidth('98.5%');
      elTable.setWidth('100%');
      // or you can do following
      // can be both percentage or pixel value specified in number
      //picker.el.setSize({'height': 194, 'width':'98.5%'});
      //picker.el.dom.children[0].style.width = '100%'; // setting table width
    }
  }
});

If you set height and width of both datepicker’s container div and table to percentage, then this datepicker will fit into any resolution. If you want to fixed sized datepicker, then specify the pixel value in number. Remember, elContainer must be great or equal to elTable dimension.