jackjia
2 Mar 2009, 1:25 PM
Hi there,
This is my first post. I would like to share the idea to show the error icon and error tooltip on the grid. It is based on the errors property on the record. If record.errors[columnName] contains any string, the grid shows the error icon and qtip. Any comments?
Jack.
Here is the code:
Ext.override(Ext.grid.GridView, {
init: function(grid){
this.grid = grid;
this.initTemplates();
// modified template, add {cellCss} on div (for error icon and qtip)
this.templates.cell = new Ext.Template(
'<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} {css}" style="{style}" tabIndex="0" {cellAttr}>',
'<div class="x-grid3-cell-inner x-grid3-col-{id} {cellCss}" unselectable="on" {attr}>{value}</div>',
"</td>");
this.initData(grid.store, grid.colModel);
this.initUI(grid);
},
doRender : function(cs, rs, ds, startRow, colCount, stripe){
var ts = this.templates, ct = ts.cell, rt = ts.row, last = colCount-1;
var tstyle = 'width:'+this.getTotalWidth()+';';
// buffers
var buf = [], cb, c, p, rp = {tstyle: tstyle}, r;
var errMsg;
for(var j = 0, len = rs.length; j < len; j++){
r = rs[j]; cb = [];
var rowIndex = (j+startRow);
for(var i = 0; i < colCount; i++){
c = cs[i];
p = {};
p.id = c.id;
p.css = i == 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
p.attr = p.cellAttr = "";
p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
p.style = c.style;
if(p.value == undefined || p.value === "") p.value = " ";
if(r.dirty && typeof r.modified[c.name] !== 'undefined'){
p.css += ' x-grid3-dirty-cell';
}
// here is the changes
errMsg = this.getCellError(r, c.name);
if (errMsg) {
p.css += ' x-grid-cell-invalid';
p.cellCss = 'x-grid-invalid-icon';
p.attr += " ext:qclass='x-form-invalid-tip'";
p.attr += " ext:qtip='" + errMsg + "'";
}
// end changes
cb[cb.length] = ct.apply(p);
}
var alt = [];
if(stripe && ((rowIndex+1) % 2 == 0)){
alt[0] = "x-grid3-row-alt";
}
if(r.dirty){
alt[1] = " x-grid3-dirty-row";
}
rp.cols = colCount;
if(this.getRowClass){
alt[2] = this.getRowClass(r, rowIndex, rp, ds);
}
rp.alt = alt.join(" ");
rp.cells = cb.join("");
buf[buf.length] = rt.apply(rp);
}
return buf.join("");
},
getCellError: function(record, field) {
// based on the record.errors to determine if there is any error
if (field == '')
return record.error;
else if (record.errors && record.errors[field])
return record.errors[field];
else
return null;
},
});
.x-grid-invalid-icon {
background: transparent url(/content/resources/images/default/form/exclamation.gif) no-repeat right;
padding-right : 20px;
}
.x-grid-cell-invalid {
background:#fff url(/content/resources/images/default/grid/invalid_line.gif) repeat-x bottom;
border: 1px solid #dd7870;
}
This is my first post. I would like to share the idea to show the error icon and error tooltip on the grid. It is based on the errors property on the record. If record.errors[columnName] contains any string, the grid shows the error icon and qtip. Any comments?
Jack.
Here is the code:
Ext.override(Ext.grid.GridView, {
init: function(grid){
this.grid = grid;
this.initTemplates();
// modified template, add {cellCss} on div (for error icon and qtip)
this.templates.cell = new Ext.Template(
'<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} {css}" style="{style}" tabIndex="0" {cellAttr}>',
'<div class="x-grid3-cell-inner x-grid3-col-{id} {cellCss}" unselectable="on" {attr}>{value}</div>',
"</td>");
this.initData(grid.store, grid.colModel);
this.initUI(grid);
},
doRender : function(cs, rs, ds, startRow, colCount, stripe){
var ts = this.templates, ct = ts.cell, rt = ts.row, last = colCount-1;
var tstyle = 'width:'+this.getTotalWidth()+';';
// buffers
var buf = [], cb, c, p, rp = {tstyle: tstyle}, r;
var errMsg;
for(var j = 0, len = rs.length; j < len; j++){
r = rs[j]; cb = [];
var rowIndex = (j+startRow);
for(var i = 0; i < colCount; i++){
c = cs[i];
p = {};
p.id = c.id;
p.css = i == 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
p.attr = p.cellAttr = "";
p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
p.style = c.style;
if(p.value == undefined || p.value === "") p.value = " ";
if(r.dirty && typeof r.modified[c.name] !== 'undefined'){
p.css += ' x-grid3-dirty-cell';
}
// here is the changes
errMsg = this.getCellError(r, c.name);
if (errMsg) {
p.css += ' x-grid-cell-invalid';
p.cellCss = 'x-grid-invalid-icon';
p.attr += " ext:qclass='x-form-invalid-tip'";
p.attr += " ext:qtip='" + errMsg + "'";
}
// end changes
cb[cb.length] = ct.apply(p);
}
var alt = [];
if(stripe && ((rowIndex+1) % 2 == 0)){
alt[0] = "x-grid3-row-alt";
}
if(r.dirty){
alt[1] = " x-grid3-dirty-row";
}
rp.cols = colCount;
if(this.getRowClass){
alt[2] = this.getRowClass(r, rowIndex, rp, ds);
}
rp.alt = alt.join(" ");
rp.cells = cb.join("");
buf[buf.length] = rt.apply(rp);
}
return buf.join("");
},
getCellError: function(record, field) {
// based on the record.errors to determine if there is any error
if (field == '')
return record.error;
else if (record.errors && record.errors[field])
return record.errors[field];
else
return null;
},
});
.x-grid-invalid-icon {
background: transparent url(/content/resources/images/default/form/exclamation.gif) no-repeat right;
padding-right : 20px;
}
.x-grid-cell-invalid {
background:#fff url(/content/resources/images/default/grid/invalid_line.gif) repeat-x bottom;
border: 1px solid #dd7870;
}