PDA

View Full Version : Show Error Icon and tooltip on the grid



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;
}

zhw511006
2 Mar 2009, 9:08 PM
live demo please!

jackjia
3 Mar 2009, 7:33 AM
I don't have a place to host live demo. But here is a screen shot. When mouse over the field ('AAAs'), it shows tooltip for 'test error'

Jack

zhw511006
3 Mar 2009, 7:53 AM
I don't have a place to host live demo. But here is a screen shot. When mouse over the field ('AAAs'), it shows tooltip for 'test error'

Jack

Thank You!

I will try it!

mjlecomte
3 Mar 2009, 8:56 AM
I don't have a place to host live demo. But here is a screen shot. When mouse over the field ('AAAs'), it shows tooltip for 'test error'

Jack

FYI there is a ux repository where you can post live demos.

jackjia
3 Mar 2009, 9:10 AM
FYI there is a ux repository where you can post live demos.

Can you send me some detail information regarding this ux repository please?

mjlecomte
3 Mar 2009, 9:22 AM
Look in my signature. ;)

mjlecomte
3 Mar 2009, 9:25 AM
If you decide to post in the ux repo, the most difficult question for you will probably be what to name it. You could post in the ux repo thread a link back to this thread and the ux repo developer (SamuraiJack) will probably have some advice on how to publish it.

There's nothing saying that you can't post it as an "extension" to get categorized in the ux repo, but also include a file in your personal repository with the code for the override. Either way, you can host a demo, with screenshots, etc. in your personal repository.