Add new form element Roo.form.DayPicker, a row of 7 checkboxes for Mon-Sun.

diff --git a/Roo/form/DayPicker.js b/Roo/form/DayPicker.js
new file mode 100644 (file)
index 0000000..b002504
--- /dev/null
+++ b/Roo/form/DayPicker.js
@@ -0,0 +1,187 @@
+/*
+ * 
+ * Licence- LGPL
+ * 
+ */
+
+/**
+ * @class Roo.form.DayPicker
+ * @extends Roo.form.Field
+ * A Day picker show [M] [T] [W] ....
+ * @constructor
+ * Creates a new Day Picker
+ * @param {Object} config Configuration options
+ */
+Roo.form.DayPicker= function(config){
+    Roo.form.DayPicker.superclass.constructor.call(this, config);
+     
+};
+
+Roo.extend(Roo.form.DayPicker, Roo.form.Field,  {
+    /**
+     * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
+     */
+    focusClass : undefined,
+    /**
+     * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
+     */
+    fieldClass: "x-form-field",
+   
+    /**
+     * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
+     * {tag: "input", type: "checkbox", autocomplete: "off"})
+     */
+    defaultAutoCreate : { tag: "input", type: 'hidden', autocomplete: "off"},
+    
+   
+    actionMode : 'viewEl', 
+    //
+    // private
+ 
+    inputType : 'hidden',
+    
+     
+    inputElement: false, // real input element?
+    basedOn: false, // ????
+    
+    isFormField: true, // not sure where this is needed!!!!
+
+    onResize : function(){
+        Roo.form.Checkbox.superclass.onResize.apply(this, arguments);
+        if(!this.boxLabel){
+            this.el.alignTo(this.wrap, 'c-c');
+        }
+    },
+
+    initEvents : function(){
+        Roo.form.Checkbox.superclass.initEvents.call(this);
+        this.el.on("click", this.onClick,  this);
+        this.el.on("change", this.onClick,  this);
+    },
+
+
+    getResizeEl : function(){
+        return this.wrap;
+    },
+
+    getPositionEl : function(){
+        return this.wrap;
+    },
+
+    
+    // private
+    onRender : function(ct, position){
+        Roo.form.Checkbox.superclass.onRender.call(this, ct, position);
+       
+        this.wrap = this.el.wrap({cls: 'x-form-daypick-item '});
+        
+        var r1 = '<table><tr>'
+        var r2 = '<tr class="x-form-daypick-icons">';
+        for (var i=0; i < 7; i++) {
+            r1+= '<td><div>' + Date.dayNames[i].substring(0,3) + '</div></td>';
+            r2+= '<td><img class="x-menu-item-icon" src="' + Roo.BLANK_IMAGE_URL  +'"></td>';
+        }
+        
+        var viewEl = this.wrap.createChild( r1 + '</tr>' + r2 + '</tr></table>');
+        viewEl.select('img').on('click', this.onClick, this);
+        this.viewEl = viewEl;   
+        
+        
+        // this will not work on Chrome!!!
+        this.el.on('DOMAttrModified', this.setFromHidden,  this); //ff
+        this.el.on('propertychange', this.setFromHidden,  this);  //ie
+        
+        
+          
+
+    },
+
+    // private
+    initValue : Roo.emptyFn,
+
+    /**
+     * Returns the checked state of the checkbox.
+     * @return {Boolean} True if checked, else false
+     */
+    getValue : function(){
+        return this.el.dom.value;
+        
+    },
+
+       // private
+    onClick : function(e){ 
+        //this.setChecked(!this.checked);
+        Roo.get(e.target).toggleClass('x-menu-item-checked');
+        this.refreshValue();
+        //if(this.el.dom.checked != this.checked){
+        //    this.setValue(this.el.dom.checked);
+       // }
+    },
+    
+    // private
+    refreshValue : function()
+    {
+        var val = '';
+        this.viewEl.select('img',true).each(function(e,i,n)  {
+            val += e.is(".x-menu-item-checked") ? String(n) : '';
+        });
+        this.setValue(val, true);
+    },
+
+    /**
+     * Sets the checked state of the checkbox.
+     * On is always based on a string comparison between inputValue and the param.
+     * @param {Boolean/String} value - the value to set 
+     * @param {Boolean/String} suppressEvent - whether to suppress the checkchange event.
+     */
+    setValue : function(v,suppressEvent){
+        if (!this.el.dom) {
+            return;
+        }
+        var old = this.el.dom.value ;
+        this.el.dom.value = v;
+        if (suppressEvent) {
+            return ;
+        }
+        var cur = {};
+        for (var i =0; i < v.length;i++) {
+            cur[v.substring(i,i+1)] = 1 ;
+        }
+        // update display..
+        this.viewEl.select('img',true).each(function(e,i,n)  {
+            
+            var on = e.is(".x-menu-item-checked");
+            var newv = typeof(cur[n]) != 'undefined';
+            if (on != newv) {
+                e.toggleClass('x-menu-item-checked');
+            }
+            
+        });
+        
+        
+        this.fireEvent('change', this, v, old);
+        
+        
+    },
+   
+    // handle setting of hidden value by some other method!!?!?
+    setFromHidden: function()
+    {
+        if(!this.el){
+            return;
+        }
+        //console.log("SET FROM HIDDEN");
+        //alert('setFrom hidden');
+        this.setValue(this.el.dom.value);
+    },
+    
+    onDestroy : function()
+    {
+        if(this.viewEl){
+            Roo.get(this.viewEl).remove();
+        }
+         
+        Roo.form.DayPicker.superclass.onDestroy.call(this);
+    }
+
+});
\ No newline at end of file

diff --git a/css/daypicker.css b/css/daypicker.css
new file mode 100644 (file)
index 0000000..c313572
--- /dev/null
+++ b/css/daypicker.css
@@ -0,0 +1,19 @@
+
+
+
+.x-form-daypick-item td div {
+    width: 30px;
+    text-align: center;
+}
+
+.x-form-daypick-icons td img {
+    background: url(../images/default/menu/chk-sprite.gif) no-repeat 0 0;
+    width: 16px;
+    height: 16px;
+    margin: 0;
+    margin-left: 5px;
+    
+}
+.x-form-daypick-icons td img.x-menu-item-checked {
+    background-position: 0 -16px;
+}
\ No newline at end of file

diff --git a/css/form.css b/css/form.css
index c3a7448..e772038 100644 (file)
--- a/css/form.css
+++ b/css/form.css
@@ -71,7 +71,10 @@
     padding-top: 2px;
     padding-bottom: 2px;
 }
+/*
+on our demo's this is far to small
 
+*/
 .x-form-item .x-form-text 
 {
      height: 14px; /* need to determine when this should be larger or smaller.. ? */

diff --git a/examples/form/dynamic.html b/examples/form/dynamic.html
index e47af96..f1659c5 100644 (file)
--- a/examples/form/dynamic.html
+++ b/examples/form/dynamic.html
@@ -1,24 +1,27 @@
-<!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">-->
+<!DOCTYPE html 
+      PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 <html>
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+<meta http-equiv="Content-Type" content="text/html; charset=utf8">
 <title>Forms</title>
    
      
-    <link rel="stylesheet" type="text/css" href="../../css/roojs-debug.css"/>
+    <link rel="stylesheet" type="text/css" href="../../css/roojs.css"/>
     <link rel="stylesheet" type="text/css" href="../../css/xtheme-slate.css"/> 
-
+    <link rel="stylesheet" type="text/css" href="../../css/daypicker.css"/> 
 
 
      <script type="text/javascript" src="../../roojs-debug.js"></script>   
        
+    <script type="text/javascript" src="../../Roo/form/DayPicker.js"></script>
   
-<script type="text/javascript" src="states.js"></script>
-<script type="text/javascript" src="dynamic.js"></script>
-<link rel="stylesheet" type="text/css" href="forms.css" />
-
-<!-- Common Styles for the examples -->
-<link rel="stylesheet" type="text/css" href="../examples.css" />
+    <script type="text/javascript" src="states.js"></script>
+    <script type="text/javascript" src="dynamic.js"></script>
+    <script type="text/javascript" src="../examples.js"></script>&nbsp;
+    
+    <!-- Common Styles for the examples -->
+    <link rel="stylesheet" type="text/css" href="../examples.css" />
 
 
 
@@ -32,56 +35,56 @@
 </style>
 </head>
 <body>
-<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
-<h1>Dynamic Forms built with JavaScript</h1>
-<p>
-    These forms do not do anything and have very little validation. They solely demonstrate
-    how you can use Ext Forms to build and layout forms on the fly.
-</p>
-
-<p>The js is not minified so it is readable. See 
-<button type="button" onclick="RooDocs.viewSource.show('/dynamic.js')">dynamic.js</button> and 
-<button type="button" onclick="RooDocs.viewSource.show('/dynamic.html')">dynamic.html</button>
-.</p>
-
-
-
-
-<div style="width:345px;"  class="roodocs-formblock">
-    <h3>Display Form</h3>
-    <div id="form-ct5"></div>
-</div>
-
-
-<div class="roodocs-formblock" style="width:280px;height:170px">
-    <h3 style="margin-bottom:5px;">Simple Form</h3>
-    <div id="form-ct"></div>
-</div>
-<br/>
- 
-
-<div style="width:565px;" class="roodocs-formblock">
     
-        <h3 style="margin-bottom:5px;">Multi-column and labels top</h3>
-        <div id="form-ct2"></div>
+    <h1>Dynamic Forms built with JavaScript</h1>
+    <p>
+        These forms do not do anything and have very little validation. They solely demonstrate
+        how you can use Ext Forms to build and layout forms on the fly.
+    </p>
     
-</div>
-
-
-
-<br/>
-<div style="width:345px;"  class="roodocs-formblock">
-    <h3>Fieldsets, labels right and complex fields</h3>
-    <div id="form-ct3"></div>
-</div>
-
-<br/>
-<div style="width:600px;" class="roodocs-formblock">
-        <h3 style="margin-bottom:5px;">Multi-column, nesting and fieldsets</h3>
-        <div id="form-ct4"> </div>
-</div>
-
-<div class="x-form-clear"></div>
+    <p>The js is not minified so it is readable. See 
+    <button type="button" onclick="RooDocs.viewSource.show('/dynamic.js')">dynamic.js</button> and 
+    <button type="button" onclick="RooDocs.viewSource.show('/dynamic.html')">dynamic.html</button>
+    .</p>
+    
+    
+    
+    
+    <div style="width:345px;"  class="roodocs-formblock">
+        <h3>Display Form</h3>
+        <div id="form-ct5"></div>
+    </div>
+    
+    
+    <div class="roodocs-formblock" style="width:325px;height:200px">
+        <h3 style="margin-bottom:5px;">Simple Form</h3>
+        <div id="form-ct"></div>
+    </div>
+    <br/>
+     
+    
+    <div style="width:565px;" class="roodocs-formblock">
+        
+            <h3 style="margin-bottom:5px;">Multi-column and labels top</h3>
+            <div id="form-ct2"></div>
+        
+    </div>
+    
+    
+    
+    <br/>
+    <div style="width:345px;"  class="roodocs-formblock">
+        <h3>Fieldsets, labels right and complex fields</h3>
+        <div id="form-ct3"></div>
+    </div>
+    
+    <br/>
+    <div style="width:600px;" class="roodocs-formblock">
+            <h3 style="margin-bottom:5px;">Multi-column, nesting and fieldsets</h3>
+            <div id="form-ct4"> </div>
+    </div>
+    
+    <div class="x-form-clear"></div>
 
 
 

diff --git a/examples/form/dynamic.js b/examples/form/dynamic.js
index 8e66b56..d95d755 100644 (file)
--- a/examples/form/dynamic.js
+++ b/examples/form/dynamic.js
@@ -9,7 +9,8 @@
  * <script type="text/javascript">
  */
  
-var mform;\r
+var mform;
+var simple\r
 Roo.onReady(function(){
 
     Roo.QuickTips.init();
@@ -20,7 +21,7 @@ Roo.onReady(function(){
     /*
      * ================  Simple form  =======================
      */
-    var simple = new Roo.form.Form({
+    simple = new Roo.form.Form({
         labelWidth: 75, // label settings here cascade unless overridden
         url:'save-form.php'
     });
@@ -49,6 +50,11 @@ Roo.onReady(function(){
             name: 'email',
             vtype:'email',
             width:175
+        }),
+         new Roo.form.DayPicker({
+            fieldLabel: 'Pick a day',
+            name: 'daypick',
+            width:175
         })
     );