Changeset 13731

Show
Ignore:
Timestamp:
05/14/08 10:04:13 (6 months ago)
Author:
BryanForbes
Message:

refs #6545, #6546, and #6353 !strict

  • Added ability to edit in DataGrid?.
  • Merged cells and editors into dojox.grid.cells.*.
  • Updated _EditManager and _Layout to reflect change in cells.
  • Added more parse options to DataGrid?.markupFactory to work with change in cells.
  • Changed dijit editors to dijit cells and placed in grid/cells/dijit.js.
  • Updated tests to reflect changes.
  • Added DataGrid? tests to show editing with regular and dijit editors.
Location:
dojox/trunk/grid
Files:
4 added
1 removed
25 modified
2 moved

Legend:

Unmodified
Added
Removed

  • dojox/trunk/grid/cells/dijit.js

    r13698 r13731  
    1 dojo.provide("dojox.grid._data.dijitEditors"); 
    2  
    3 dojo.require("dojox.grid._data.editors"); 
     1dojo.provide("dojox.grid.cells.dijit"); 
     2 
     3dojo.require("dojox.grid.cells"); 
    44 
    55dojo.require("dijit.form.DateTextBox"); 
    … …  
    1515dojo.require("dijit.Editor"); 
    1616 
    17 dojo.declare("dojox.grid._data.editors.Dijit", dojox.grid._data.editors.base, { 
    18         editorClass: "dijit.form.TextBox", 
    19         constructor: function(inCell){ 
    20                 this.editor = null; 
    21                 this.editorClass = dojo.getObject(this.cell.editorClass || this.editorClass); 
    22         }, 
    23         format: function(inDatum, inRowIndex){ 
    24                 this.needFormatNode(inDatum, inRowIndex); 
    25                 return "<div></div>"; 
    26         }, 
    27         getValue: function(inRowIndex){ 
    28                 return this.editor.getValue(); 
    29         }, 
    30         setValue: function(inRowIndex, inValue){ 
    31                 if(this.editor&&this.editor.setValue){ 
    32                         this.editor.setValue(inValue); 
    33                 }else{ 
     17(function(){ 
     18        var dgc = dojox.grid.cells; 
     19        dojo.declare("dojox.grid.cells._Widget", dgc._Base, { 
     20                widgetClass: "dijit.form.TextBox", 
     21                constructor: function(inCell){ 
     22                        this.widget = null; 
     23                        this.widgetClass = dojo.getObject(this.widgetClass); 
     24                }, 
     25                formatEditing: function(inDatum, inRowIndex){ 
     26                        this.needFormatNode(inDatum, inRowIndex); 
     27                        return "<div></div>"; 
     28                }, 
     29                getValue: function(inRowIndex){ 
     30                        return this.widget.getValue(); 
     31                }, 
     32                setValue: function(inRowIndex, inValue){ 
     33                        if(this.widget&&this.widget.setValue){ 
     34                                this.widget.setValue(inValue); 
     35                        }else{ 
     36                                this.inherited(arguments); 
     37                        } 
     38                }, 
     39                getWidgetProps: function(inDatum){ 
     40                        return dojo.mixin({}, this.widgetProps||{}, { 
     41                                constraints: dojo.mixin({}, this.constraint) || {}, //TODO: really just for ValidationTextBoxes 
     42                                value: inDatum 
     43                        }); 
     44                }, 
     45                createWidget: function(inNode, inDatum, inRowIndex){ 
     46                        return new this.widgetClass(this.getWidgetProps(inDatum), inNode); 
     47                }, 
     48                attachWidget: function(inNode, inDatum, inRowIndex){ 
     49                        inNode.appendChild(this.widget.domNode); 
     50                        this.setValue(inRowIndex, inDatum); 
     51                }, 
     52                formatNode: function(inNode, inDatum, inRowIndex){ 
     53                        if(!this.widgetClass){ 
     54                                return inDatum; 
     55                        } 
     56                        if(!this.widget){ 
     57                                this.widget = this.createWidget.apply(this, arguments); 
     58                        }else{ 
     59                                this.attachWidget.apply(this, arguments); 
     60                        } 
     61                        this.sizeWidget.apply(this, arguments); 
     62                        this.grid.rowHeightChanged(inRowIndex); 
     63                        this.focus(); 
     64                }, 
     65                sizeWidget: function(inNode, inDatum, inRowIndex){ 
     66                        var 
     67                                p = this.getNode(inRowIndex), 
     68                                box = dojo.contentBox(p); 
     69                        dojo.marginBox(this.widget.domNode, {w: box.w}); 
     70                }, 
     71                focus: function(inRowIndex, inNode){ 
     72                        if(this.widget){ 
     73                                setTimeout(dojo.hitch(this.widget, function(){ 
     74                                        dojox.grid.util.fire(this, "focus"); 
     75                                }), 0); 
     76                        } 
     77                }, 
     78                _finish: function(inRowIndex){ 
    3479                        this.inherited(arguments); 
    35                 } 
    36         }, 
    37         getEditorProps: function(inDatum){ 
    38                 return dojo.mixin({}, this.cell.editorProps||{}, { 
    39                         constraints: dojo.mixin({}, this.cell.constraint) || {}, //TODO: really just for ValidationTextBoxes 
    40                         value: inDatum 
    41                 }); 
    42         }, 
    43         createEditor: function(inNode, inDatum, inRowIndex){ 
    44                 return new this.editorClass(this.getEditorProps(inDatum), inNode); 
    45  
    46         }, 
    47         attachEditor: function(inNode, inDatum, inRowIndex){ 
    48                 inNode.appendChild(this.editor.domNode); 
    49                 this.setValue(inRowIndex, inDatum); 
    50         }, 
    51         formatNode: function(inNode, inDatum, inRowIndex){ 
    52                 if(!this.editorClass){ 
    53                         return inDatum; 
    54                 } 
    55                 if(!this.editor){ 
    56                         this.editor = this.createEditor.apply(this, arguments); 
    57                 }else{ 
    58                         this.attachEditor.apply(this, arguments); 
    59                 } 
    60                 this.sizeEditor.apply(this, arguments); 
    61                 this.cell.grid.rowHeightChanged(inRowIndex); 
    62                 this.focus(); 
    63         }, 
    64         sizeEditor: function(inNode, inDatum, inRowIndex){ 
    65                 var 
    66                         p = this.cell.getNode(inRowIndex), 
    67                         box = dojo.contentBox(p); 
    68                 dojo.marginBox(this.editor.domNode, {w: box.w}); 
    69         }, 
    70         focus: function(inRowIndex, inNode){ 
    71                 if(this.editor){ 
    72                         setTimeout(dojo.hitch(this.editor, function(){ 
    73                                 dojox.grid.util.fire(this, "focus"); 
    74                         }), 0); 
    75                 } 
    76         }, 
    77         _finish: function(inRowIndex){ 
    78                 this.inherited(arguments); 
    79                 dojox.grid.util.removeNode(this.editor.domNode); 
    80         } 
    81 }); 
    82  
    83 dojo.declare("dojox.grid._data.editors.ComboBox", dojox.grid._data.editors.Dijit, { 
    84         editorClass: "dijit.form.ComboBox", 
    85         getEditorProps: function(inDatum){ 
    86                 var items=[]; 
    87                 dojo.forEach(this.cell.options, function(o){ 
    88                         items.push({name: o, value: o}); 
    89                 }); 
    90                 var store = new dojo.data.ItemFileReadStore({data: {identifier:"name", items: items}}); 
    91                 return dojo.mixin({}, this.cell.editorProps||{}, { 
    92                         value: inDatum, 
    93                         store: store 
    94                 }); 
    95         }, 
    96         getValue: function(){ 
    97                 var e = this.editor; 
    98                 // make sure to apply the displayed value 
    99                 e.setDisplayedValue(e.getDisplayedValue()); 
    100                 return e.getValue(); 
    101         } 
    102 }); 
    103  
    104 dojo.declare("dojox.grid._data.editors.DateTextBox", dojox.grid._data.editors.Dijit, { 
    105         editorClass: "dijit.form.DateTextBox", 
    106         setValue: function(inRowIndex, inValue){ 
    107                 if(this.editor){ 
    108                         this.editor.setValue(new Date(inValue)); 
    109                 }else{ 
     80                        dojox.grid.util.removeNode(this.widget.domNode); 
     81                } 
     82        }); 
     83        dgc._Widget.markupFactory = function(node, cell){ 
     84                var d = dojo; 
     85                var widgetProps = d.trim(d.attr(node, "widgetProps")||""); 
     86                var constraint = d.trim(d.attr(node, "constraint")||""); 
     87                var widgetClass = d.trim(d.attr(node, "widgetClass")||""); 
     88                if(widgetProps){ 
     89                        cell.widgetProps = d.fromJson(widgetProps); 
     90                } 
     91                if(constraint){ 
     92                        cell.constraint = d.fromJson(constraint); 
     93                } 
     94                if(widgetClass){ 
     95                        cell.widgetClass = d.getObject(widgetClass); 
     96                } 
     97        } 
     98 
     99        dojo.declare("dojox.grid.cells.ComboBox", dgc._Widget, { 
     100                widgetClass: "dijit.form.ComboBox", 
     101                getWidgetProps: function(inDatum){ 
     102                        var items=[]; 
     103                        dojo.forEach(this.options, function(o){ 
     104                                items.push({name: o, value: o}); 
     105                        }); 
     106                        var store = new dojo.data.ItemFileReadStore({data: {identifier:"name", items: items}}); 
     107                        return dojo.mixin({}, this.widgetProps||{}, { 
     108                                value: inDatum, 
     109                                store: store 
     110                        }); 
     111                }, 
     112                getValue: function(){ 
     113                        var e = this.widget; 
     114                        // make sure to apply the displayed value 
     115                        e.setDisplayedValue(e.getDisplayedValue()); 
     116                        return e.getValue(); 
     117                } 
     118        }); 
     119        dgc.ComboBox.markupFactory = function(node, cell){ 
     120                dgc._Widget.markupFactory(node, cell); 
     121                var d=dojo; 
     122                var options = d.trim(d.attr(node, "options")||""); 
     123                if(options){ 
     124                        var o = options.split(','); 
     125                        if(o[0] != options){ 
     126                                cell.options = o; 
     127                        } 
     128                } 
     129        } 
     130 
     131        dojo.declare("dojox.grid.cells.DateTextBox", dgc._Widget, { 
     132                widgetClass: "dijit.form.DateTextBox", 
     133                setValue: function(inRowIndex, inValue){ 
     134                        if(this.widget){ 
     135                                this.widget.setValue(new Date(inValue)); 
     136                        }else{ 
     137                                this.inherited(arguments); 
     138                        } 
     139                }, 
     140                getWidgetProps: function(inDatum){ 
     141                        return dojo.mixin(this.inherited(arguments), { 
     142                                value: new Date(inDatum) 
     143                        }); 
     144                } 
     145        }); 
     146        dgc.DateTextBox.markupFactory = function(node, cell){ 
     147                dgc._Widget.markupFactory(node, cell); 
     148        } 
     149 
     150        dojo.declare("dojox.grid.cells.CheckBox", dgc._Widget, { 
     151                widgetClass: "dijit.form.CheckBox", 
     152                getValue: function(){ 
     153                        return this.widget.checked; 
     154                }, 
     155                setValue: function(inRowIndex, inValue){ 
     156                        if(this.widget&&this.widget.setAttribute){ 
     157                                this.widget.setAttribute("checked", inValue); 
     158                        }else{ 
     159                                this.inherited(arguments); 
     160                        } 
     161                }, 
     162                sizeWidget: function(inNode, inDatum, inRowIndex){ 
     163                        return; 
     164                } 
     165        }); 
     166        dgc.CheckBox.markupFactory = function(node, cell){ 
     167                dgc._Widget.markupFactory(node, cell); 
     168        } 
     169 
     170        dojo.declare("dojox.grid.cells.Editor", dgc._Widget, { 
     171                widgetClass: "dijit.Editor", 
     172                getWidgetProps: function(inDatum){ 
     173                        return dojo.mixin({}, this.widgetProps||{}, { 
     174                                height: this.widgetHeight || "100px" 
     175                        }); 
     176                }, 
     177                createWidget: function(inNode, inDatum, inRowIndex){ 
     178                        // widget needs its value set after creation 
     179                        var widget = new this.widgetClass(this.getWidgetProps(inDatum), inNode); 
     180                        dojo.connect(widget, 'onLoad', dojo.hitch(this, 'populateEditor')); 
     181                        return widget; 
     182                }, 
     183                formatNode: function(inNode, inDatum, inRowIndex){ 
     184                        this.content = inDatum; 
    110185                        this.inherited(arguments); 
    111                 } 
    112         }, 
    113         getEditorProps: function(inDatum){ 
    114                 return dojo.mixin(this.inherited(arguments), { 
    115                         value: new Date(inDatum) 
    116                 }); 
    117         } 
    118 }); 
    119  
    120  
    121 dojo.declare("dojox.grid._data.editors.CheckBox", dojox.grid._data.editors.Dijit, { 
    122         editorClass: "dijit.form.CheckBox", 
    123         getValue: function(){ 
    124                 return this.editor.checked; 
    125         }, 
    126         setValue: function(inRowIndex, inValue){ 
    127                 if(this.editor&&this.editor.setAttribute){ 
    128                         this.editor.setAttribute("checked", inValue); 
    129                 }else{ 
    130                         this.inherited(arguments); 
    131                 } 
    132         }, 
    133         sizeEditor: function(inNode, inDatum, inRowIndex){ 
    134                 return; 
    135         } 
    136 }); 
    137  
    138  
    139 dojo.declare("dojox.grid._data.editors.Editor", dojox.grid._data.editors.Dijit, { 
    140         editorClass: "dijit.Editor", 
    141         getEditorProps: function(inDatum){ 
    142                 return dojo.mixin({}, this.cell.editorProps||{}, { 
    143                         height: this.cell.editorHeight || "100px" 
    144                 }); 
    145         }, 
    146         createEditor: function(inNode, inDatum, inRowIndex){ 
    147                 // editor needs its value set after creation 
    148                 var editor = new this.editorClass(this.getEditorProps(inDatum), inNode); 
    149                 dojo.connect(editor, 'onLoad', dojo.hitch(this, 'populateEditor')); 
    150                 return editor; 
    151         }, 
    152         formatNode: function(inNode, inDatum, inRowIndex){ 
    153                 this.content = inDatum; 
    154                 this.inherited(arguments); 
    155                 if(dojo.isMoz){ 
    156                         // FIXME: seem to need to reopen the editor and display the toolbar 
    157                         var e = this.editor; 
    158                         e.open(); 
    159                         if(this.cell.editorToolbar){ 
    160                                 dojo.place(e.toolbar.domNode, e.editingArea, "before"); 
    161                         } 
    162                 } 
    163         }, 
    164         populateEditor: function(){ 
    165                 this.editor.setValue(this.content); 
    166                 this.editor.placeCursorAtEnd(); 
    167         } 
    168 }); 
     186                        if(dojo.isMoz){ 
     187                                // FIXME: seem to need to reopen the editor and display the toolbar 
     188                                var e = this.widget; 
     189                                e.open(); 
     190                                if(this.widgetToolbar){ 
     191                                        dojo.place(e.toolbar.domNode, e.editingArea, "before"); 
     192                                } 
     193                        } 
     194                }, 
     195                populateEditor: function(){ 
     196                        this.widget.setValue(this.content); 
     197                        this.widget.placeCursorAtEnd(); 
     198                } 
     199        }); 
     200        dgc.Editor.markupFactory = function(node, cell){ 
     201                dgc._Widget.markupFactory(node, cell); 
     202                var d = dojo; 
     203                var h = dojo.trim(dojo.attr(node, "widgetHeight")||""); 
     204                if(h){ 
     205                        if((h != "auto")&&(h.substr(-2) != "em")){ 
     206                                h = parseInt(w)+"px"; 
     207                        } 
     208                        cell.widgetHeight = h; 
     209                } 
     210        } 
     211})(); 

  • dojox/trunk/grid/cells/_base.js

    r13646 r13731  
    1 dojo.provide("dojox.grid._Cell"); 
    2  
    3 dojo.declare("dojox.grid._Cell", null, { 
    4         // summary: 
    5         //      Respresents a grid cell and contains information about column options and methods 
    6         //      for retrieving cell related information. 
    7         //      Each column in a grid layout has a cell object and most events and many methods 
    8         //      provide access to these objects. 
    9         styles: '', 
    10         constructor: function(inProps){ 
    11                 dojo.mixin(this, inProps); 
    12                 if(this.editor){this.editor = new this.editor(this);} 
    13         }, 
    14         // data source 
    15         format: function(inRowIndex){ 
     1dojo.provide("dojox.grid.cells._base"); 
     2 
     3dojo.require("dojox.grid.util"); 
     4 
     5(function(){ 
     6        var focusSelectNode = function(inNode){ 
     7                try{ 
     8                        dojox.grid.util.fire(inNode, "focus"); 
     9                        dojox.grid.util.fire(inNode, "select"); 
     10                }catch(e){// IE sux bad 
     11                } 
     12        }; 
     13         
     14        var whenIdle = function(/*inContext, inMethod, args ...*/){ 
     15                setTimeout(dojo.hitch.apply(dojo, arguments), 0); 
     16        }; 
     17 
     18        var dgc = dojox.grid.cells; 
     19 
     20        dojo.declare("dojox.grid.cells._Base", null, { 
    1621                // summary: 
    17                 //      provides the html for a given grid cell. 
    18                 // inRowIndex: int 
    19                 // grid row index 
    20                 // returns: html for a given grid cell 
    21                 var f, i=this.grid.edit.info, d=this.get ? this.get(inRowIndex) : this.value; 
    22                 if(this.editor && (this.editor.alwaysOn || (i.rowIndex==inRowIndex && i.cell==this))){ 
    23                         return this.editor.format(d, inRowIndex); 
    24                 }else{ 
    25                         return (f = this.formatter) ? f.call(this, d, inRowIndex) : d; 
    26                 } 
    27         }, 
    28         // utility 
    29         getNode: function(inRowIndex){ 
     22                //      Respresents a grid cell and contains information about column options and methods 
     23                //      for retrieving cell related information. 
     24                //      Each column in a grid layout has a cell object and most events and many methods 
     25                //      provide access to these objects. 
     26                styles: '', 
     27                editable: false, 
     28                alwaysEditing: false, 
     29                formatter: null, 
     30                //private 
     31                _valueProp: "value", 
     32                _formatPending: false, 
     33 
     34                constructor: function(inProps){ 
     35                        dojo.mixin(this, inProps); 
     36                        //if(this.editor){this.editor = new this.editor(this);} 
     37                }, 
     38                // data source 
     39                format: function(inRowIndex){ 
     40                        // summary: 
     41                        //      provides the html for a given grid cell. 
     42                        // inRowIndex: int 
     43                        // grid row index 
     44                        // returns: html for a given grid cell 
     45                        var f, i=this.grid.edit.info, d=this.get ? this.get(inRowIndex) : this.value; 
     46                        if(this.editable && (this.alwaysEditing || (i.rowIndex==inRowIndex && i.cell==this))){ 
     47                                return this.formatEditing(d, inRowIndex); 
     48                        }else{ 
     49                                return (f = this.formatter) ? f.call(this, d, inRowIndex) : d; 
     50                        } 
     51                }, 
     52                formatEditing: function(inDatum, inRowIndex){ 
     53                        // summary: 
     54                        //      formats the cell for editing 
     55                        // inDatum: anything 
     56                        //      cell data to edit 
     57                        // inRowIndex: int 
     58                        //      grid row index 
     59                        // returns: string of html to place in grid cell 
     60                }, 
     61                // utility 
     62                getNode: function(inRowIndex){ 
     63                        // summary: 
     64                        //      gets the dom node for a given grid cell. 
     65                        // inRowIndex: int 
     66                        // grid row index 
     67                        // returns: dom node for a given grid cell 
     68                        var node = this.view.getCellNode(inRowIndex, this.index); 
     69                        if(node){ 
     70                                return node.firstChild; 
     71                        }else{ 
     72                                return 0; 
     73                        } 
     74                }, 
     75                isFlex: function(){ 
     76                        var uw = this.unitWidth; 
     77                        return uw && (uw=='auto' || uw.slice(-1)=='%'); 
     78                }, 
     79                // edit support 
     80                applyEdit: function(inValue, inRowIndex){ 
     81                        this.grid.edit.applyCellEdit(inValue, this, inRowIndex); 
     82                }, 
     83                cancelEdit: function(inRowIndex){ 
     84                        this.grid.doCancelEdit(inRowIndex); 
     85                }, 
     86                _onEditBlur: function(inRowIndex){ 
     87                        if(this.grid.edit.isEditCell(inRowIndex, this.index)){ 
     88                                //console.log('editor onblur', e); 
     89                                this.grid.edit.apply(); 
     90                        } 
     91                }, 
     92                registerOnBlur: function(inNode, inRowIndex){ 
     93                        if(this.commitOnBlur){ 
     94                                dojo.connect(inNode, "onblur", function(e){ 
     95                                        // hack: if editor still thinks this editor is current some ms after it blurs, assume we've focused away from grid 
     96                                        setTimeout(dojo.hitch(this, "_onEditBlur", inRowIndex), 250); 
     97                                }); 
     98                        } 
     99                }, 
     100                //protected 
     101                needFormatNode: function(inDatum, inRowIndex){ 
     102                        this._formatPending = true; 
     103                        whenIdle(this, "_formatNode", inDatum, inRowIndex); 
     104                }, 
     105                cancelFormatNode: function(){ 
     106                        this._formatPending = false; 
     107                }, 
     108                //private 
     109                _formatNode: function(inDatum, inRowIndex){ 
     110                        if(this._formatPending){ 
     111                                this._formatPending = false; 
     112                                // make cell selectable 
     113                                dojo.setSelectable(this.grid.domNode, true); 
     114                                this.formatNode(this.getNode(inRowIndex), inDatum, inRowIndex); 
     115                        } 
     116                }, 
     117                //protected 
     118                formatNode: function(inNode, inDatum, inRowIndex){ 
     119                        // summary: 
     120                        //      format the editing dom node. Use when editor is a widget. 
     121                        // inNode: dom node 
     122                        // dom node for the editor 
     123                        // inDatum: anything 
     124                        //      cell data to edit 
     125                        // inRowIndex: int 
     126                        //      grid row index 
     127                        if(dojo.isIE){ 
     128                                // IE sux bad 
     129                                whenIdle(this, "focus", inRowIndex, inNode); 
     130                        }else{ 
     131                                this.focus(inRowIndex, inNode); 
     132                        } 
     133                }, 
     134                dispatchEvent: function(m, e){ 
     135                        if(m in this){ 
     136                                return this[m](e); 
     137                        } 
     138                }, 
     139                //public 
     140                getValue: function(inRowIndex){ 
     141                        // summary: 
     142                        //      returns value entered into editor 
     143                        // inRowIndex: int 
     144                        // grid row index 
     145                        // returns: 
     146                        //      value of editor 
     147                        return this.getNode(inRowIndex)[this._valueProp]; 
     148                }, 
     149                setValue: function(inRowIndex, inValue){ 
     150                        // summary: 
     151                        //      set the value of the grid editor 
     152                        // inRowIndex: int 
     153                        // grid row index 
     154                        // inValue: anything 
     155                        //      value of editor 
     156                        var n = this.getNode(inRowIndex); 
     157                        if(n){ 
     158                                n[this._valueProp] = inValue 
     159                        }; 
     160    &