10 March 2011

How validation and submit button works in Extjs ?

As You know , users are naughty by nature ,so they are addicted from put illegal characters  and other evil stuff to field   incorrectly , because that give a user a amazing oportunity to call to call center (or in worst case your boss to you ) and shout on innocent victims (or you) about they terrific and spooky experience they had because they didn't read something, they fill some form incorrectly and now shit happens to them and they want refund or other repayment, because "users are brainless and stupid".
So... you decided to use validation in Ext.

You set restrictions and you add submit button and you expect that  Ext they care  of turn on/off submit button (if everything is ok / something is wrong), because you learned that Ext likes to take care of everything else.


So you run script and ....Boooo .... Extjs didn't take care .
You've done research and you discover then in order to make submit button work you need:
In form (when you put all configuration stuff) you set monitorValid : true
In submit button (when as above  you put all configuration stuff) you set  add formBind : true

and then when you check website your jaw hit the floor because your bloody submit button is still enabled and you wondering ... wtf ?

The reason why it isn't working for You is ... because  your button(s) are configured and located outside of the formPanel.

If you move your buttons inside the formPanel object, and set monitorValid:true and formBind : true options in proper place then you will discover that IT WORKS :).

Below you have simply example how to implement


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>ExtJS test zone.</title>
<link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css" /> <!-- you need provide path to ext's css -->
<script src="lib/extjs/adapter/ext/ext-base.js"></script> <!-- you need provide path to ext's base -->
<script src="lib/extjs/ext-all.js"></script> <!-- you need provide path to ext's main extjs javascript file -->


<script type="text/javascript">

Ext.onReady(function(){

var feeForWatchingPornAtWorkForm = new Ext.FormPanel({
renderTo: document.body,
labelWidth: 75,
url:'save-form.php', // useless and should be overridden
frame:true,
title: 'Fee For Watching Porn At Work Appication Form',
bodyStyle:'padding:5px 5px 0',
width: 350,
monitorValid:true,
defaultType: 'textfield',
items: [{
fieldLabel: 'User Name',
name: 'userName',
allowBlank:false
},{
fieldLabel: 'Departament',
name: 'departament',
allowBlank:false
},{
fieldLabel: 'Email',
name: 'email',
vtype:'email',
allowBlank:false
},{
xtype: 'textarea',
width: 250,
height: 100,
fieldLabel: 'Declaration',
emptyText: 'Yes, i promise i will not watch porn at work again.Yes i am delight that company will put my picture with text "I watched porn and i appoligize company for use work time for private pleasure" in staffroom!'
}
],
buttons: [{
text: 'Send',
formBind:true
},{
text: 'Cancel'
}]
});

});


</script>
</head>

<body>

</body>

</html>




Sources:
sencha forum link 1