PDA

View Full Version : validation message



dougd_unc
13 Jun 2011, 12:25 PM
I would like to show a message on a TextField when it doesn't validate. I am using the email vtype, but so far, instead of showing a message, it just changes back to the previous value. How do I get it to show the validation message?

Here's the main part:




var email_editor = new Ext.form.TextField({
allowBlank: false,
vtype: 'email',
vtypeText: 'Please enter a valid email address' });
Here's most of the code:



//data store for the grid
var store = new Ext.data.ArrayStore({
id: 'studentStore',
fields: [
{name: 'first_name', type: 'string'},
{name: 'last_name', type: 'string'},
{name: 'email', type: 'string'}
]

});

Ext.onReady(function(){

/*
Ext.QuickTips.init();
Ext.QuickTips.getQuickTip().interceptTitles = true;
Ext.form.Field.prototype.msgTarget = 'side';
// default template structure for combobox hover messages
var tplstr = '<tpl for="."><div ext:qtip="{description}" class="ux-mselect-item ';
if(Ext.isIE || Ext.isIE7){
tplstr = tplstr + '" unselectable=on>{name}</div></tpl>';
}
else{
tplstr = tplstr + ' x-unselectable">{name}</div></tpl>';
}
*/

// Generic function to build the grid
function getGrid(){

if(Ext.getCmp('grid')){
gridPanel.removeAll();
}

var name_editor = new Ext.form.TextField({
allowBlank: false,
/* mode: 'local', */
triggerAction: 'all'});


var email_editor = new Ext.form.TextField({
allowBlank: false,
vtype: 'email',
vtypeText: 'Please enter a valid email address' });

//store.load();

// columns in grid
var tblColumns = [
{header: "First Name", width: 200, sortable: false, dataIndex: 'first_name', allowBlank: false, editor: name_editor },
{header: "Last Name", width: 200, sortable: false, dataIndex: 'last_name', allowBlank: false, editor: name_editor },
{header: "Email", width: 200, sortable: false, dataIndex: 'email', allowBlank: false, editor: email_editor },
];

// grid of associations
var grid = new Ext.grid.EditorGridPanel({
id:'student_grid',
store: store,
columns: tblColumns,
height: 250,
stripeRows: true,
anchor: '100% 100%',
loadMask: false,
bbar:[
{
text: 'Add Student',
iconCls: 'add',
handler: function(){
var u = new grid.store.recordType({
first_name: '',
last_name: '',
email: ''
});
grid.stopEditing();
grid.store.add(u);
grid.startEditing(grid.store.getCount()-1, 0);
}
},
{
text: 'Save',
iconCls: 'save',
handler: function(){
alert('saving');
}
},
{
text: 'Delete',
iconCls: 'destroy',
handler: function(){
var sm=grid.getSelectionModel();
var sel=sm.getSelectedCell();
if (sel != null) {
var index=sel[0];
data = grid.store.getAt(index);
grid.store.removeAt(index);
}
}
}


]
});


var students = new Ext.form.FormPanel({
formId : 'student_editor_form',
id : 'student_editor',
plain : true,
border : true,
anchor : '100%',
applyTo : 'table_content',
items : [grid]

});

//grid.relayEvents(grid.store,['update','destroy','save']); // ?????????????
}

getGrid();
});

diegotdai
13 Jun 2011, 1:01 PM
this might be the problem...
have a look at your last column definition....that coma should be omitted.



// columns in grid
var tblColumns = [
{header: "First Name", width: 200, sortable: false, dataIndex: 'first_name', allowBlank: false, editor: name_editor },
{header: "Last Name", width: 200, sortable: false, dataIndex: 'last_name', allowBlank: false, editor: name_editor },
{header: "Email", width: 200, sortable: false, dataIndex: 'email', allowBlank: false, editor: email_editor }, // this coma shouldn't be here
];


hope this helps

dougd_unc
13 Jun 2011, 1:05 PM
this might be the problem...
have a look at your last column definition....that coma should be omitted.



// columns in grid
var tblColumns = [
{header: "First Name", width: 200, sortable: false, dataIndex: 'first_name', allowBlank: false, editor: name_editor },
{header: "Last Name", width: 200, sortable: false, dataIndex: 'last_name', allowBlank: false, editor: name_editor },
{header: "Email", width: 200, sortable: false, dataIndex: 'email', allowBlank: false, editor: email_editor }, // this coma shouldn't be here
];


hope this helps

Thanks. But, I still don't get a validation message.

skirtle
13 Jun 2011, 5:57 PM
I think that could prove difficult in an editorgrid. Where would you expect to see the error message? Unlike a normal form where all fields are shown at all times, an editorgrid only allows one field to be edited at once, sharing a field for editing. As a result it can't prevent a user from clicking away from an invalid field without seizing up the entire grid. At that point it needs to ensure the value is valid, so it resets it to its previous value.

With a bit of work you could probably make it so that you can stop editing even when the field is invalid. You'd then need to do some work to apply a suitable renderer on the invalid grid cell (a bit like this (http://www.sencha.com/forum/showthread.php?134628)) and then display your error message somewhere. Altogether I reckon it'd be a lot of work to do it that way.

dougd_unc
13 Jun 2011, 6:07 PM
I think that could prove difficult in an editorgrid. Where would you expect to see the error message? Unlike a normal form where all fields are shown at all times, an editorgrid only allows one field to be edited at once, sharing a field for editing. As a result it can't prevent a user from clicking away from an invalid field without seizing up the entire grid. At that point it needs to ensure the value is valid, so it resets it to its previous value.

With a bit of work you could probably make it so that you can stop editing even when the field is invalid. You'd then need to do some work to apply a suitable renderer on the invalid grid cell (a bit like this (http://www.sencha.com/forum/showthread.php?134628)) and then display your error message somewhere. Altogether I reckon it'd be a lot of work to do it that way.

Oh... I thought it was an automatic part of the TextField.

Maybe just an alert? How could I do that?

skirtle
14 Jun 2011, 4:25 PM
Oh... I thought it was an automatic part of the TextField.

Sort of. It all works in a FormPanel but it only works partially elsewhere.


Maybe just an alert? How could I do that?

Really? I'd avoid an alert if I were you. When exactly would you show it, when the user tries to click away from the TextField? Are you going to keep forcing them to edit the field until they type in a valid email address?

You need to spend some time thinking about exactly how you want the user interactions to work. The default Ext behaviour is pretty sensible, so far I can only think of alternatives that would drive the end-user crazy.

When you do come to implement it, the most likely candidates are the methods and events of EditorGridPanel. If you load up the docs:

http://dev.sencha.com/deploy/ext-3.4.0/docs/?class=Ext.grid.EditorGridPanel

and click on the 'Hide Inherited Members' button (top-right, blue arrow, red minus) you'll see the main protagonists.

diegotdai
15 Jun 2011, 4:14 AM
No need for any hassle, if you create your editorgrid properly, and the editors are properly configured, you should see the error message in a tooltip, by the way, remove those allowBlank properties from the columns, columns don't have that property, that might be messing around with your tooltip....

dougd_unc
24 Jun 2011, 6:51 AM
I copied some code from somewhere else:



Ext.QuickTips.init();
Ext.QuickTips.getQuickTip().interceptTitles = true;

Ext.form.Field.prototype.msgTarget = 'side';
// default template structure for combobox hover messages
var tplstr = '<tpl for="."><div ext:qtip="{description}" class="ux-mselect-item ';
if(Ext.isIE || Ext.isIE7){
tplstr = tplstr + '" unselectable=on>{name}</div></tpl>';
}
else{
tplstr = tplstr + ' x-unselectable">{name}</div></tpl>';
}


And now I seem to get the correct error messages.