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
DOMINIK SYMONOWICZ's blogs - FOREVER HUNGRY of knowledge, sarcasm, smiling, music, dancing, and food ...lots of food. This IT blog is a collection of notes with a simple solution with an explanation, added documentation, sarcastic comment and weird example. I also write about a lesson learnt from my mistakes. A non-it blog can be found here: Dominik Symonowicz's non-IT blog and website
No comments:
Post a Comment