PDA

View Full Version : [3.0.1] Little fixes for a rowEditor bugs.



dev-borealis
14 Sep 2009, 11:25 AM
Hi,

I found a bug with the rowEditor extension which make the update and cancel buttons show too far to the right when a grid have enough columns to have an horizontal scrollbar. The viewport width was used instead of the grid's width. So I changed this method in RowEditor.js:



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();
this.btns.el.shift({left: (width/2)-(bw/2)+scroll, top: h - 2, stopFx: true, duration:0.2});
}
},
to this:



positionButtons: function(){
if(this.btns){
var h = this.el.dom.clientHeight;
var view = this.grid.getView();
var scroll = view.scroller.dom.scrollLeft;
var width = (this.grid.getWidth() > view.mainBody.getWidth())?view.mainBody.getWidth():this.grid.getWidth();
var bw = this.btns.getWidth();
this.btns.el.shift({left: (width/2)-(bw/2)+scroll, top: h - 2, stopFx: true, duration:0.2});
}
},
and it seems to work.

I also found a bug which made the buttons appear over the row being edited. I modified the onShow method to fix this, by adding this.verifyLayout(true) at the end:



onShow: function(){
if(this.monitorValid){
this.startMonitoring();
}
Ext.ux.grid.RowEditor.superclass.onShow.apply(this, arguments);
this.verifyLayout(true);
},
Hopes it helps.

edit:

I ended up with a problem which caused editors to be misaligned, the last one being cut on the right by the grid. I fixed it by setting the default adjust to 1 in verifyLayout:



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() + 9 : undefined);
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 = 1;
if(i === (len - 1)){
adjust += 3; // outer padding
} else{
adjust += 1;
}
fields[i].show();
fields[i].setWidth(cm.getColumnWidth(i) - adjust);
} else{
fields[i].hide();
}
}
this.doLayout();
this.positionButtons();
}
},
I also have a bug with textareas in ie (editor cut in ie8, flow over the editor row in ie6 and ie7). I'll fiddle to fix it and post the fix here.

sidd
16 Sep 2009, 9:34 PM
Hi,

There was an issue with RowEditor height in ie... I made a fix ... don't know whether it is right way or not.


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(), undefined);
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 = 1; // Changed to 1
if(i === 0){
adjust += 0; // outer padding
}
if(i === (len - 1)){
adjust += 3; // outer padding
} else{
adjust += 1;
}
fields[i].show();
fields[i].setWidth(cm.getColumnWidth(i) - adjust);
} else{
fields[i].hide();
}
}
this.doLayout();
this.positionButtons();
}
},

Thanks,
Sidd.

dev-borealis
17 Sep 2009, 6:05 AM
Thanks,

It works for me.
I still have a little bug with height, but only with htmlEditors which are cut at the bottom.

jackjia
13 Oct 2009, 9:30 PM
I also have a bug with textareas in ie (editor cut in ie8, flow over the editor row in ie6 and ie7). I'll fiddle to fix it and post the fix here.I also found the same problem in ie. Did you find any solution?

dev-borealis
14 Oct 2009, 5:11 AM
Sidd's fix work with the height in ie. The html editor height is wrong only the first time the row editor is opened. It has the right height when you reopen it. I couldn't find a way to fix this.

Defaite
28 Oct 2009, 2:23 AM
If you have many columns, the tooltip show on the right of the lines. But the true right, so in the hidden part.

To check that, I change theses lines :




/*
* In declarations...
*/
...
focusDelay: 250,
errorSummary: true,
errorField: false,

/*
* More code...
*/

isValid: function(){
var valid = true;
var errorFieldT = false ;
this.items.each(function(f) {
if(!f.isValid(true)){
errorFieldT = f;
valid = false;
return false;
}
});
this.errorField = errorFieldT ;
return valid;
},

bindHandler : function(){
if(!this.bound){
return false; // stops binding
}
var valid = this.isValid();
if(!valid && this.errorSummary){
this.showTooltip(this.getErrorText().join(''), {anchor:'bottom', mouseOffset: [0,0], el: this.errorField.el});
}
this.btns.saveBtn.setDisabled(!valid);
this.fireEvent('validation', this, valid);
},

showTooltip: function(msg, options){
options = options || {anchor: 'right', mouseOffset: [3,4], el: this.btns.el} ;

var t = this.tooltip;
if(!t){
t = this.tooltip = new Ext.ToolTip({
maxWidth: 600,
cls: 'errorTip',
width: 300,
title: this.errorTitle,
autoHide: false,
anchor: options.anchor,
anchorToTarget: true,
mouseOffset: options.mouseOffset
});
}
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(options.el);
if(!t.rendered){
t.show();
t.hide();
}
t.body.update(msg);
t.doAutoWidth();
t.show();
}else if(t.rendered){
t.hide();
}
},


This code show the tooltip just to the left of the "Save/Cancel" buttons or just above a field in error.

I have added green code. ;-)

Defaite
28 Oct 2009, 5:57 AM
If you don't want an editor on a date column, the date is showed in javascript date object. To correct that, you can modify this code :



stopEditing : function(saveChanges){
this.editing = false;
if(!this.isVisible()){
return;
}
if(saveChanges === false || !this.isValid()){
this.hide();
return;
}
var changes = {}, r = this.record, hasChange = false;
var 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)){
var oldValue = r.data[dindex];
if(fields[i].column.editable || fields[i].column.editor) {
var value = this.postEditValue(fields[i].getValue(), oldValue, r, dindex);
if(String(oldValue) !== String(value)){
changes[dindex] = value;
hasChange = true;
}
}
}
}
}
/*
* More code...
*/

// private
preEditValue : function(r, field){
var value = r.data[field];
if(typeof value === 'object' && typeof value.getDate !== 'undefined') {
var items = r.fields.items ;
for(var i = 0; i < items.length; i++) {
if(items[i].name == field) {
if(typeof items[i].dateFormat !== 'undefined') {
var value = Ext.util.Format.dateRenderer(items[i].dateFormat)(value) ;
return value ;
}
break ;
}
}
}
return this.autoEncode && typeof value === 'string' ? Ext.util.Format.htmlDecode(value) : value;
},
Date is showed in the dateFormat property added in the store.

To Apply a good format in your "non editable fields", you can add this in your CSS :


.x-row-editor .x-form-display-field { font-family:arial,tahoma,helvetica,sans-serif; font-size:11px; text-align: center; }I have added green code. ;-)

Dipish
5 May 2010, 2:33 AM
Anybody managed to fix this (http://www.extjs.com/forum/showthread.php?93465-Extjs-row-editor-get-out-of-align-after-reorder-the-column-position.) bug?

ibralnet
13 May 2010, 3:50 AM
Hi,
Does any body know where can I find a stable version of the RowEditor to download ?
thanks in advance ^^

Dipish
14 May 2010, 12:03 AM
ibralnet, there is no 'relase', you've got to apply modifications by your own. Consider code posted in this thread and also in that one (http://www.extjs.com/forum/showthread.php?92140-OPEN-575-roweditor-column-drag-drop-resize-problems/page2)

ibralnet
14 May 2010, 1:22 AM
many thanks Dipish :)