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: "off"},
  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 <<<<<<< HEAD
  79 <<<<<<< HEAD
  80         var r1 = '<table><tr>'
  81 =======
  82         var r1 = '<table><tr>';
  83 >>>>>>> bb63e2e529c47fb77152cfc02100d5ff9fdca211
  84 =======
  85         var r1 = '<table><tr>';
  86 >>>>>>> bb63e2e529c47fb77152cfc02100d5ff9fdca211
  87         var r2 = '<tr class="x-form-daypick-icons">';
  88         for (var i=0; i < 7; i++) {
  89             r1+= '<td><div>' + Date.dayNames[i].substring(0,3) + '</div></td>';
  90             r2+= '<td><img class="x-menu-item-icon" src="' + Roo.BLANK_IMAGE_URL  +'"></td>';
  91         }
  92
  93         var viewEl = this.wrap.createChild( r1 + '</tr>' + r2 + '</tr></table>');
  94         viewEl.select('img').on('click', this.onClick, this);
  95         this.viewEl = viewEl;
  96
  97
  98         // this will not work on Chrome!!!
  99         this.el.on('DOMAttrModified', this.setFromHidden,  this); //ff
 100         this.el.on('propertychange', this.setFromHidden,  this);  //ie
 101
 102
 103
 104
 105     },
 106
 107     // private
 108     initValue : Roo.emptyFn,
 109
 110     /**
 111      * Returns the checked state of the checkbox.
 112      * @return {Boolean} True if checked, else false
 113      */
 114     getValue : function(){
 115         return this.el.dom.value;
 116
 117     },
 118
 119         // private
 120     onClick : function(e){
 121         //this.setChecked(!this.checked);
 122         Roo.get(e.target).toggleClass('x-menu-item-checked');
 123         this.refreshValue();
 124         //if(this.el.dom.checked != this.checked){
 125         //    this.setValue(this.el.dom.checked);
 126        // }
 127     },
 128
 129     // private
 130     refreshValue : function()
 131     {
 132         var val = '';
 133         this.viewEl.select('img',true).each(function(e,i,n)  {
 134             val += e.is(".x-menu-item-checked") ? String(n) : '';
 135         });
 136         this.setValue(val, true);
 137     },
 138
 139     /**
 140      * Sets the checked state of the checkbox.
 141      * On is always based on a string comparison between inputValue and the param.
 142      * @param {Boolean/String} value - the value to set
 143      * @param {Boolean/String} suppressEvent - whether to suppress the checkchange event.
 144      */
 145     setValue : function(v,suppressEvent){
 146         if (!this.el.dom) {
 147             return;
 148         }
 149         var old = this.el.dom.value ;
 150         this.el.dom.value = v;
 151         if (suppressEvent) {
 152             return ;
 153         }
 154 <<<<<<< HEAD
 155 <<<<<<< HEAD
 156         var cur = {};
 157         for (var i =0; i < v.length;i++) {
 158             cur[v.substring(i,i+1)] = 1 ;
 159         }
 160 =======
 161
 162 >>>>>>> bb63e2e529c47fb77152cfc02100d5ff9fdca211
 163 =======
 164
 165 >>>>>>> bb63e2e529c47fb77152cfc02100d5ff9fdca211
 166         // update display..
 167         this.viewEl.select('img',true).each(function(e,i,n)  {
 168
 169             var on = e.is(".x-menu-item-checked");
 170 <<<<<<< HEAD
 171 <<<<<<< HEAD
 172             var newv = typeof(cur[n]) != 'undefined';
 173 =======
 174             var newv = v.indexOf(String(n)) > -1;
 175 >>>>>>> bb63e2e529c47fb77152cfc02100d5ff9fdca211
 176 =======
 177             var newv = v.indexOf(String(n)) > -1;
 178 >>>>>>> bb63e2e529c47fb77152cfc02100d5ff9fdca211
 179             if (on != newv) {
 180                 e.toggleClass('x-menu-item-checked');
 181             }
 182
 183         });
 184
 185
 186         this.fireEvent('change', this, v, old);
 187
 188
 189     },
 190
 191     // handle setting of hidden value by some other method!!?!?
 192     setFromHidden: function()
 193     {
 194         if(!this.el){
 195             return;
 196         }
 197         //console.log("SET FROM HIDDEN");
 198         //alert('setFrom hidden');
 199         this.setValue(this.el.dom.value);
 200     },
 201
 202     onDestroy : function()
 203     {
 204         if(this.viewEl){
 205             Roo.get(this.viewEl).remove();
 206         }
 207
 208         Roo.form.DayPicker.superclass.onDestroy.call(this);
 209     }
 210
 211 });