git.ithinksw.org / extjs.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
Upgrade to ExtJS 3.0.3 - Released 10/11/2009
[extjs.git] / docs / source / RowEditor.html
diff --git a/docs/source/RowEditor.html b/docs/source/RowEditor.html
index 3a47def..7e158b4 100644 (file)
--- a/docs/source/RowEditor.html
+++ b/docs/source/RowEditor.html
@@ -1,10 +1,10 @@
-<html>\r
-<head>\r
-  <title>The source code</title>\r
-    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
-    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
-</head>\r
-<body  onload="prettyPrint();">\r
+<html>
+<head>
+  <title>The source code</title>
+    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+</head>
+<body  onload="prettyPrint();">
     <pre class="prettyprint lang-js">Ext.ns('Ext.ux.grid');
 
 <div id="cls-Ext.ux.grid.RowEditor"></div>/**
     <pre class="prettyprint lang-js">Ext.ns('Ext.ux.grid');
 
 <div id="cls-Ext.ux.grid.RowEditor"></div>/**
@@ -30,6 +30,11 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
     monitorValid: true,
     focusDelay: 250,
     errorSummary: true,
     monitorValid: true,
     focusDelay: 250,
     errorSummary: true,
+    
+    saveText: 'Save',
+    cancelText: 'Cancel',
+    commitChangesText: 'You need to commit or cancel your changes',
+    errorText: 'Errors',
 
     defaults: {
         normalWidth: true
 
     defaults: {
         normalWidth: true
@@ -46,6 +51,13 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
              * @param {Number} rowIndex The rowIndex of the row just edited
              */
             'beforeedit',
              * @param {Number} rowIndex The rowIndex of the row just edited
              */
             'beforeedit',
+            <div id="event-Ext.ux.grid.RowEditor-canceledit"></div>/**
+             * @event canceledit
+             * Fired when the editor is cancelled.
+             * @param {Ext.ux.grid.RowEditor} roweditor This object
+             * @param {Boolean} forced True if the cancel button is pressed, false is the editor was invalid. 
+             */
+            'canceledit',
             <div id="event-Ext.ux.grid.RowEditor-validateedit"></div>/**
              * @event validateedit
              * Fired after a row is edited and passes validation.
             <div id="event-Ext.ux.grid.RowEditor-validateedit"></div>/**
              * @event validateedit
              * Fired after a row is edited and passes validation.
@@ -92,7 +104,8 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
             columnresize: this.verifyLayout,
             columnmove: this.refreshFields,
             reconfigure: this.refreshFields,
             columnresize: this.verifyLayout,
             columnmove: this.refreshFields,
             reconfigure: this.refreshFields,
-           destroy : this.destroy,
+            beforedestroy : this.beforedestroy,
+            destroy : this.destroy,
             bodyscroll: {
                 buffer: 250,
                 fn: this.positionButtons
             bodyscroll: {
                 buffer: 250,
                 fn: this.positionButtons
@@ -102,6 +115,12 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
         grid.getView().on('refresh', this.stopEditing.createDelegate(this, []));
     },
 
         grid.getView().on('refresh', this.stopEditing.createDelegate(this, []));
     },
 
+    beforedestroy: function() {
+        this.grid.getStore().un('remove', this.onStoreRemove, this);
+        this.stopEditing(false);
+        Ext.destroy(this.btns);
+    },
+
     refreshFields: function(){
         this.initFields();
         this.verifyLayout();
     refreshFields: function(){
         this.initFields();
         this.verifyLayout();
@@ -120,17 +139,18 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
 
     startEditing: function(rowIndex, doFocus){
         if(this.editing && this.isDirty()){
 
     startEditing: function(rowIndex, doFocus){
         if(this.editing && this.isDirty()){
-            this.showTooltip('You need to commit or cancel your changes');
+            this.showTooltip(this.commitChangesText);
             return;
         }
             return;
         }
-        this.editing = true;
-        if(typeof rowIndex == 'object'){
+        if(Ext.isObject(rowIndex)){
             rowIndex = this.grid.getStore().indexOf(rowIndex);
         }
         if(this.fireEvent('beforeedit', this, rowIndex) !== false){
             rowIndex = this.grid.getStore().indexOf(rowIndex);
         }
         if(this.fireEvent('beforeedit', this, rowIndex) !== false){
-            var g = this.grid, view = g.getView();
-            var row = view.getRow(rowIndex);
-            var record = g.store.getAt(rowIndex);
+            this.editing = true;
+            var g = this.grid, view = g.getView(),
+                row = view.getRow(rowIndex),
+                record = g.store.getAt(rowIndex);
+                
             this.record = record;
             this.rowIndex = rowIndex;
             this.values = {};
             this.record = record;
             this.rowIndex = rowIndex;
             this.values = {};
@@ -147,7 +167,7 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
                 val = this.preEditValue(record, cm.getDataIndex(i));
                 f = fields[i];
                 f.setValue(val);
                 val = this.preEditValue(record, cm.getDataIndex(i));
                 f = fields[i];
                 f.setValue(val);
-                this.values[f.id] = val || '';
+                this.values[f.id] = Ext.isEmpty(val) ? '' : val;
             }
             this.verifyLayout(true);
             if(!this.isVisible()){
             }
             this.verifyLayout(true);
             if(!this.isVisible()){
@@ -171,16 +191,20 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
         }
         if(saveChanges === false || !this.isValid()){
             this.hide();
         }
         if(saveChanges === false || !this.isValid()){
             this.hide();
+            this.fireEvent('canceledit', this, saveChanges === false);
             return;
         }
             return;
         }
-        var changes = {}, r = this.record, hasChange = false;
-        var cm = this.grid.colModel, fields = this.items.items;
+        var changes = {}, 
+            r = this.record, 
+            hasChange = false,
+            cm = this.grid.colModel, 
+            fields = this.items.items;
         for(var i = 0, len = cm.getColumnCount(); i < len; i++){
             if(!cm.isHidden(i)){
                 var dindex = cm.getDataIndex(i);
                 if(!Ext.isEmpty(dindex)){
         for(var i = 0, len = cm.getColumnCount(); i < len; i++){
             if(!cm.isHidden(i)){
                 var dindex = cm.getDataIndex(i);
                 if(!Ext.isEmpty(dindex)){
-                    var oldValue = r.data[dindex];
-                    var value = this.postEditValue(fields[i].getValue(), oldValue, r, dindex);
+                    var oldValue = r.data[dindex],
+                        value = this.postEditValue(fields[i].getValue(), oldValue, r, dindex);
                     if(String(oldValue) !== String(value)){
                         changes[dindex] = value;
                         hasChange = true;
                     if(String(oldValue) !== String(value)){
                         changes[dindex] = value;
                         hasChange = true;
@@ -190,11 +214,9 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
         }
         if(hasChange && this.fireEvent('validateedit', this, changes, r, this.rowIndex) !== false){
             r.beginEdit();
         }
         if(hasChange && this.fireEvent('validateedit', this, changes, r, this.rowIndex) !== false){
             r.beginEdit();
-            for(var k in changes){
-                if(changes.hasOwnProperty(k)){
-                    r.set(k, changes[k]);
-                }
-            }
+            Ext.iterate(changes, function(name, value){
+                r.set(name, value);
+            });
             r.endEdit();
             this.fireEvent('afteredit', this, changes, r, this.rowIndex);
         }
             r.endEdit();
             this.fireEvent('afteredit', this, changes, r, this.rowIndex);
         }
@@ -204,14 +226,11 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
     verifyLayout: function(force){
         if(this.el && (this.isVisible() || force === true)){
             var row = this.grid.getView().getRow(this.rowIndex);
     verifyLayout: function(force){
         if(this.el && (this.isVisible() || force === true)){
             var row = this.grid.getView().getRow(this.rowIndex);
-            this.setSize(Ext.fly(row).getWidth(), Ext.isIE ? Ext.fly(row).getHeight() + (Ext.isBorderBox ? 9 : 0) : undefined);
+            this.setSize(Ext.fly(row).getWidth(), Ext.fly(row).getHeight() + 9);
             var cm = this.grid.colModel, fields = this.items.items;
             for(var i = 0, len = cm.getColumnCount(); i < len; i++){
                 if(!cm.isHidden(i)){
                     var adjust = 0;
             var cm = this.grid.colModel, fields = this.items.items;
             for(var i = 0, len = cm.getColumnCount(); i < len; i++){
                 if(!cm.isHidden(i)){
                     var adjust = 0;
-                    if(i === 0){
-                        adjust += 0; // outer padding
-                    }
                     if(i === (len - 1)){
                         adjust += 3; // outer padding
                     } else{
                     if(i === (len - 1)){
                         adjust += 3; // outer padding
                     } else{
@@ -236,8 +255,8 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
         var cm = this.grid.getColumnModel(), pm = Ext.layout.ContainerLayout.prototype.parseMargins;
         this.removeAll(false);
         for(var i = 0, len = cm.getColumnCount(); i < len; i++){
         var cm = this.grid.getColumnModel(), pm = Ext.layout.ContainerLayout.prototype.parseMargins;
         this.removeAll(false);
         for(var i = 0, len = cm.getColumnCount(); i < len; i++){
-            var c = cm.getColumnAt(i);
-            var ed = c.getEditor();
+            var c = cm.getColumnAt(i),
+                ed = c.getEditor();
             if(!ed){
                 ed = c.displayEditor || new Ext.form.DisplayField();
             }
             if(!ed){
                 ed = c.displayEditor || new Ext.form.DisplayField();
             }
@@ -313,12 +332,12 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
                 ref: 'saveBtn',
                 itemId: 'saveBtn',
                 xtype: 'button',
                 ref: 'saveBtn',
                 itemId: 'saveBtn',
                 xtype: 'button',
-                text: this.saveText || 'Save',
+                text: this.saveText,
                 width: this.minButtonWidth,
                 handler: this.stopEditing.createDelegate(this, [true])
             }, {
                 xtype: 'button',
                 width: this.minButtonWidth,
                 handler: this.stopEditing.createDelegate(this, [true])
             }, {
                 xtype: 'button',
-                text: this.cancelText || 'Cancel',
+                text: this.cancelText,
                 width: this.minButtonWidth,
                 handler: this.stopEditing.createDelegate(this, [false])
             }]
                 width: this.minButtonWidth,
                 handler: this.stopEditing.createDelegate(this, [false])
             }]
@@ -349,11 +368,13 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
 
     positionButtons: function(){
         if(this.btns){
 
     positionButtons: function(){
         if(this.btns){
-            var h = this.el.dom.clientHeight;
-            var view = this.grid.getView();
-            var scroll = view.scroller.dom.scrollLeft;
-            var width =  view.mainBody.getWidth();
-            var bw = this.btns.getWidth();
+            var g = this.grid,
+                h = this.el.dom.clientHeight,
+                view = g.getView(),
+                scroll = view.scroller.dom.scrollLeft,
+                bw = this.btns.getWidth(),
+                width = Math.min(g.getWidth(), g.getColumnModel().getTotalWidth());
+                
             this.btns.el.shift({left: (width/2)-(bw/2)+scroll, top: h - 2, stopFx: true, duration:0.2});
         }
     },
             this.btns.el.shift({left: (width/2)-(bw/2)+scroll, top: h - 2, stopFx: true, duration:0.2});
         }
     },
@@ -371,13 +392,14 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
 
     doFocus: function(pt){
         if(this.isVisible()){
 
     doFocus: function(pt){
         if(this.isVisible()){
-            var index = 0;
+            var index = 0,
+                cm = this.grid.getColumnModel(),
+                c;
             if(pt){
                 index = this.getTargetColumnIndex(pt);
             }
             if(pt){
                 index = this.getTargetColumnIndex(pt);
             }
-            var cm = this.grid.getColumnModel();
             for(var i = index||0, len = cm.getColumnCount(); i < len; i++){
             for(var i = index||0, len = cm.getColumnCount(); i < len; i++){
-                var c = cm.getColumnAt(i);
+                c = cm.getColumnAt(i);
                 if(!c.hidden && c.getEditor()){
                     c.getEditor().focus();
                     break;
                 if(!c.hidden && c.getEditor()){
                     c.getEditor().focus();
                     break;
@@ -387,10 +409,12 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
     },
 
     getTargetColumnIndex: function(pt){
     },
 
     getTargetColumnIndex: function(pt){
-        var grid = this.grid, v = grid.view;
-        var x = pt.left;
-        var cms = grid.colModel.config;
-        var i = 0, match = false;
+        var grid = this.grid, 
+            v = grid.view,
+            x = pt.left,
+            cms = grid.colModel.config,
+            i = 0, 
+            match = false;
         for(var len = cms.length, c; c = cms[i]; i++){
             if(!c.hidden){
                 if(Ext.fly(v.getHeaderCell(i)).getRegion().right >= x){
         for(var len = cms.length, c; c = cms[i]; i++){
             if(!c.hidden){
                 if(Ext.fly(v.getHeaderCell(i)).getRegion().right >= x){
@@ -451,21 +475,30 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
                 maxWidth: 600,
                 cls: 'errorTip',
                 width: 300,
                 maxWidth: 600,
                 cls: 'errorTip',
                 width: 300,
-                title: 'Errors',
+                title: this.errorText,
                 autoHide: false,
                 anchor: 'left',
                 anchorToTarget: true,
                 mouseOffset: [40,0]
             });
         }
                 autoHide: false,
                 anchor: 'left',
                 anchorToTarget: true,
                 mouseOffset: [40,0]
             });
         }
-        t.initTarget(this.items.last().getEl());
-        if(!t.rendered){
+        var v = this.grid.getView(),
+            top = parseInt(this.el.dom.style.top, 10),
+            scroll = v.scroller.dom.scrollTop,
+            h = this.el.getHeight();
+                
+        if(top + h >= scroll){
+            t.initTarget(this.items.last().getEl());
+            if(!t.rendered){
+                t.show();
+                t.hide();
+            }
+            t.body.update(msg);
+            t.doAutoWidth();
             t.show();
             t.show();
+        }else if(t.rendered){
             t.hide();
         }
             t.hide();
         }
-        t.body.update(msg);
-        t.doAutoWidth();
-        t.show();
     },
 
     getErrorText: function(){
     },
 
     getErrorText: function(){
@@ -520,6 +553,6 @@ Ext.override(Ext.ToolTip, {
         }
     }
 });
         }
     }
 });
-</pre>    \r
-</body>\r
+</pre>
+</body>
 </html>
\ No newline at end of file
 </html>
\ No newline at end of file
Mirror of ExtJS by Sencha Inc. <http://www.sencha.com/>.