View Full Version : Marking a GridPanel as invalid

16 Nov 2011, 9:47 AM
Hello all,
I've only recently started using Ext-JS and I came across a problem I can't solve.
I have a grid set up as such:

var simpleGrid = {
xtype : 'grid',
id : 'simple_grid',
columns : simpleGridColumns,
height : 175,
anchor : '80%',
enableColumnHide : false,
enableColumnMove : false,
enableColumnResize : false,
enableHdMenu : false,
stripeRows : true,
store : simpleStore,
selModel : new Ext.grid.RowSelectionModel(
singleSelect: true,

My requirement is that if no record is selected and the user submits the form, to mark the grid as "invalid" and display an error message, then to mark it as "valid" and remove the error message when a selection is made (similar to how form field validation works).
I have a method that returns if a record is selected or not but I can't figure out a way to visually toggle the grid's "validity" based on that.
How do I accomplish this?
Any help is appreciated.

16 Nov 2011, 10:56 AM
You do it with CSS, you define a css class that adds a yellow/red border to a div, and then when you go through your validation you just add that class to the grid's base element (grid.el). Will end up with code like "this.el.addClass('grid-invalid');" when invalid and probably just do a this.el.removeClass('grid-invalid') before you do the check in the validation procedure. GL, HF, hope that helps.