8 * @class Roo.form.DayPicker
9 * @extends Roo.form.Field
10 * A Day picker show [M] [T] [W] ....
12 * Creates a new Day Picker
13 * @param {Object} config Configuration options
15 Roo.form.DayPicker= function(config){
16 Roo.form.DayPicker.superclass.constructor.call(this, config);
20 Roo.extend(Roo.form.DayPicker, Roo.form.Field, {
22 * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
24 focusClass : undefined,
26 * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
28 fieldClass: "x-form-field",
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"})
34 defaultAutoCreate : { tag: "input", type: 'hidden', autocomplete: "new-password"},
37 actionMode : 'viewEl',
44 inputElement: false, // real input element?
45 basedOn: false, // ????
47 isFormField: true, // not sure where this is needed!!!!
49 onResize : function(){
50 Roo.form.Checkbox.superclass.onResize.apply(this, arguments);
52 this.el.alignTo(this.wrap, 'c-c');
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);
63 getResizeEl : function(){
67 getPositionEl : function(){
73 onRender : function(ct, position){
74 Roo.form.Checkbox.superclass.onRender.call(this, ct, position);
76 this.wrap = this.el.wrap({cls: 'x-form-daypick-item '});
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>';
85 var viewEl = this.wrap.createChild( r1 + '</tr>' + r2 + '</tr></table>');
86 viewEl.select('img').on('click', this.onClick, this);
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
100 initValue : Roo.emptyFn,
103 * Returns the checked state of the checkbox.
104 * @return {Boolean} True if checked, else false
106 getValue : function(){
107 return this.el.dom.value;
112 onClick : function(e){
113 //this.setChecked(!this.checked);
114 Roo.get(e.target).toggleClass('x-menu-item-checked');
116 //if(this.el.dom.checked != this.checked){
117 // this.setValue(this.el.dom.checked);
122 refreshValue : function()
125 this.viewEl.select('img',true).each(function(e,i,n) {
126 val += e.is(".x-menu-item-checked") ? String(n) : '';
128 this.setValue(val, true);
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.
137 setValue : function(v,suppressEvent){
141 var old = this.el.dom.value ;
142 this.el.dom.value = v;
148 this.viewEl.select('img',true).each(function(e,i,n) {
150 var on = e.is(".x-menu-item-checked");
151 var newv = v.indexOf(String(n)) > -1;
153 e.toggleClass('x-menu-item-checked');
159 this.fireEvent('change', this, v, old);
164 // handle setting of hidden value by some other method!!?!?
165 setFromHidden: function()
170 //console.log("SET FROM HIDDEN");
171 //alert('setFrom hidden');
172 this.setValue(this.el.dom.value);
175 onDestroy : function()
178 Roo.get(this.viewEl).remove();
181 Roo.form.DayPicker.superclass.onDestroy.call(this);