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