PDA

View Full Version : Problem when adding 'x-form-invalid' to metaData.css on editor grid renderer



forumuser1080
24 May 2011, 5:53 PM
I and trying to get my cells to render with the red underline and red border of an invalid form field if they are invalid. This is because some cells are programmatically inserted into the grid and I want them to display as invalid.

I can add the css in the renderer function but when I click in the cell it now has two red borders. Any ideas?

Here is a quick example of what I am trying to do


Ext.onReady(function() {
new Ext.Viewport({
items: [{
xtype: 'editorgrid',
store: new Ext.data.JsonStore({
fields: [
{name: 'common', type: 'string'},
{name: 'price', type: 'int'}
],
data: [{
common: 'one',
price: 100
},{
common: 'two',
price: 200
}]
}),
width: 600,
height: 300,
autoExpandColumn: 'common', // column with this id will be expanded
title: 'Edit Plants?',
frame: true,
clicksToEdit: 1,
columns: [{
id: 'common',
header: 'Common Name',
dataIndex: 'common',
width: 220,
// use shorthand alias defined above
editor: new Ext.form.TextField({
allowBlank: false
})
},{
header: 'Price',
dataIndex: 'price',
width: 70,
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
if (value > 100) {
metaData.css = 'x-form-invalid';
}
return value;
},
editor: new Ext.form.NumberField({
allowBlank: false,
allowNegative: false,
maxValue: 100000,
validator: function(value) {
if (value > 100) {
return 'value cannot exceed 100';
}
}
})
}]
}]
})
});


I have included screen shots of the grid before editing (which looks good) and during edit (which has an extra red border)

forumuser1080
25 May 2011, 5:42 PM
Any one have any ideas, I just cannot figure out what to do here. I think I would just need to remove the x-form-invalid css class when I am in edit mode but I am not sure how.

skirtle
28 May 2011, 8:53 AM
You've got a few options. The one that looked easiest to me was to change the CSS class applied to the NumberField when it's invalid:


editor: new Ext.form.NumberField({
...
invalidClass: 'my-invalid-class',
...
})

You'll then need to do whatever styling you require for my-invalid-class.

forumuser1080
28 May 2011, 10:22 AM
Thanks for the response but that is not what I want. To be more clear the default for invalidClass is x-form-invalid which is what I want when the field is invalid.

However you get no indication of an invalid field when you are not in edit mode. I.E. invalidClass is only for when you are in edit mode ('typing') and your entry is invalid.

I need for my grid to render the cell as invalid. The user has the option to add cells from a different panel and they could be invalid so I want to grid to render them that way so the user knows they need to make a change. I.E. I will not be in edit mode.

I am pretty sure the right way is to use a renderer as I already showed in the example I gave (which works). The problem is that when I go into edit mode (please see the screen shot) I get two red borders instead of one. Which means when I go into edit mode I want to remove the x-form-invalid class from the rendered cell.

Is this possible?????????????

skirtle
28 May 2011, 10:36 AM
Maybe I wasn't clear enough, I meant for you to combine your original approach with my approach. Effectively I was suggesting fixing the double-border issue by suppressing the NumberField's border, rather than trying to dynamically add/remove the border on the cell.

forumuser1080
28 May 2011, 2:42 PM
If I remove the border on the NumberField then when I am editing and I change the number to a valid number the redbox will not go away until I am done editing and the cell gets re-rendered.

I think I should just be able to remove the css class ('x-form-invalid').

If I add a listener on the grid panel 'beforedit' I should be able to simply remove the 'x-form-invalid' class that I added during the render right?

If so I could use some help.

skirtle
28 May 2011, 4:11 PM
Fair enough.

I think getting rid of it is the easier part:


...
xtype: 'editorgrid',
listeners: {
beforeedit: function(e) {
Ext.fly(e.grid.getView().getCell(e.row, e.column)).removeClass('x-form-invalid');
}
},
...

The harder part is putting it back in again. If the cell value hasn't changed it won't be rerendered. I think the easiest way to rerender it is to call refresh() on the view but it seems to be non-trivial finding a suitable place to put the call. The afteredit and validateedit events both look like good candidates but even with forceValidation set to true I couldn't get either of them to fire if the cell was both unchanged and invalid.

In the end I resorted to the following horrendous hack. I'm sure there must be a better way:


editor: new Ext.form.NumberField({
...
listeners: {
blur: function() {
// viewport is a reference to the viewport, item 0 is the editorgrid
var view = viewport.items.itemAt(0).getView();
view.refresh.defer(1, view); // Have to defer or we render the old value, not the new value
}
}
})

This was using ExtJS 3.2.1. Maybe you'll have better luck with the other editorgrid events if you're using a newer version.

forumuser1080
28 May 2011, 5:40 PM
Thanks so much for the help!!!!

I am using 3.2.1 at the moment and don't plan to move to a newer version for a while so I am stuck with it for now.

I looked around at the documentation (as I am sure you did :) ) and I could not find a property to set to always get the cell to render again even if the value is unchanged (wishful thinking right), although I am not sure that it is possible.

Although not the prettiest solution it does work. I will keep plugging away to see if I can get something a little less fragile....thanks again though.

Anyone else had any luck getting something like this to work, seems like I could use all the help I can get.