git.roojs.org Git - roojs1/blob - Roo/form/DayPicker.js

   1 /*
   2  *
   3  * Licence- LGPL
   4  *
   5  */
   6
   7 /**
   8  * @class Roo.form.DayPicker
   9  * @extends Roo.form.Field
  10  * A Day picker show [M] [T] [W] ....
  11  * @constructor
  12  * Creates a new Day Picker
  13  * @param {Object} config Configuration options
  14  */
  15 Roo.form.DayPicker= function(config){
  16     Roo.form.DayPicker.superclass.constructor.call(this, config);
  17
  18 };
  19
  20 Roo.extend(Roo.form.DayPicker, Roo.form.Field,  {
  21     /**
  22      * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
  23      */
  24     focusClass : undefined,
  25     /**
  26      * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
  27      */
  28     fieldClass: "x-form-field",
  29
  30     /**
  31      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
  32      * {tag: "input", type: "checkbox", autocomplete: "off"})
  33      */
  34     defaultAutoCreate : { tag: "input", type: 'hidden', autocomplete: "new-password"},
  35
  36
  37     actionMode : 'viewEl',
  38     //
  39     // private
  40
  41     inputType : 'hidden',
  42
  43
  44     inputElement: false, // real input element?
  45     basedOn: false, // ????
  46
  47     isFormField: true, // not sure where this is needed!!!!
  48
  49     onResize : function(){
  50         Roo.form.Checkbox.superclass.onResize.apply(this, arguments);
  51         if(!this.boxLabel){
  52             this.el.alignTo(this.wrap, 'c-c');
  53         }
  54     },
  55
  56     initEvents : function(){
  57         Roo.form.Checkbox.superclass.initEvents.call(this);
  58         this.el.on("click", this.onClick,  this);
  59         this.el.on("change", this.onClick,  this);
  60     },
  61
  62
  63     getResizeEl : function(){
  64         return this.wrap;
  65     },
  66
  67     getPositionEl : function(){
  68         return this.wrap;
  69     },
  70
  71
  72     // private
  73     onRender : function(ct, position){
  74         Roo.form.Checkbox.superclass.onRender.call(this, ct, position);
  75
  76         this.wrap = this.el.wrap({cls: 'x-form-daypick-item '});
  77
  78         var r1 = '<table><tr>';
  79         var r2 = '<tr class="x-form-daypick-icons">';
  80         for (var i=0; i < 7; i++) {
  81             r1+= '<td><div>' + Date.dayNames[i].substring(0,3) + '</div></td>';
  82             r2+= '<td><img class="x-menu-item-icon" src="' + Roo.BLANK_IMAGE_URL  +'"></td>';
  83         }
  84
  85         var viewEl = this.wrap.createChild( r1 + '</tr>' + r2 + '</tr></table>');
  86         viewEl.select('img').on('click', this.onClick, this);
  87         this.viewEl = viewEl;
  88
  89
  90         // this will not work on Chrome!!!
  91         this.el.on('DOMAttrModified', this.setFromHidden,  this); //ff
  92         this.el.on('propertychange', this.setFromHidden,  this);  //ie
  93
  94
  95
  96
  97     },
  98
  99     // private
 100     initValue : Roo.emptyFn,
 101
 102     /**
 103      * Returns the checked state of the checkbox.
 104      * @return {Boolean} True if checked, else false
 105      */
 106     getValue : function(){
 107         return this.el.dom.value;
 108
 109     },
 110
 111         // private
 112     onClick : function(e){
 113         //this.setChecked(!this.checked);
 114         Roo.get(e.target).toggleClass('x-menu-item-checked');
 115         this.refreshValue();
 116         //if(this.el.dom.checked != this.checked){
 117         //    this.setValue(this.el.dom.checked);
 118        // }
 119     },
 120
 121     // private
 122     refreshValue : function()
 123     {
 124         var val = '';
 125         this.viewEl.select('img',true).each(function(e,i,n)  {
 126             val += e.is(".x-menu-item-checked") ? String(n) : '';
 127         });
 128         this.setValue(val, true);
 129     },
 130
 131     /**
 132      * Sets the checked state of the checkbox.
 133      * On is always based on a string comparison between inputValue and the param.
 134      * @param {Boolean/String} value - the value to set
 135      * @param {Boolean/String} suppressEvent - whether to suppress the checkchange event.
 136      */
 137     setValue : function(v,suppressEvent){
 138         if (!this.el.dom) {
 139             return;
 140         }
 141         var old = this.el.dom.value ;
 142         this.el.dom.value = v;
 143         if (suppressEvent) {
 144             return ;
 145         }
 146
 147         // update display..
 148         this.viewEl.select('img',true).each(function(e,i,n)  {
 149
 150             var on = e.is(".x-menu-item-checked");
 151             var newv = v.indexOf(String(n)) > -1;
 152             if (on != newv) {
 153                 e.toggleClass('x-menu-item-checked');
 154             }
 155
 156         });
 157
 158
 159         this.fireEvent('change', this, v, old);
 160
 161
 162     },
 163
 164     // handle setting of hidden value by some other method!!?!?
 165     setFromHidden: function()
 166     {
 167         if(!this.el){
 168             return;
 169         }
 170         //console.log("SET FROM HIDDEN");
 171         //alert('setFrom hidden');
 172         this.setValue(this.el.dom.value);
 173     },
 174
 175     onDestroy : function()
 176     {
 177         if(this.viewEl){
 178             Roo.get(this.viewEl).remove();
 179         }
 180
 181         Roo.form.DayPicker.superclass.onDestroy.call(this);
 182     }
 183
 184 });