PDA

View Full Version : required Fields indicator



RamsesAkaPus
23 Apr 2008, 5:56 PM
yes not much but I think it's important on form fields. User can't know anything about required fileds until pushes the submit button.

I had add a little code into ext-all.js for this.
In 72. line


renderItem:function(D,A,C){
if(D&&!D.rendered&&D.isFormField&&D.inputType!="hidden"){
var B=[
D.id,D.fieldLabel,
D.labelStyle||this.labelStyle||"",
this.elementStyle||"",
typeof D.labelSeparator=="undefined"?this.labelSeparator:D.labelSeparator,
(D.itemCls||this.container.itemCls||"")+(D.hideLabel?" x-hide-label":""),
D.clearCls||"x-form-clear-left"];
if(typeof A=="number"){
A=C.dom.childNodes[A]||null
}
if(A){
this.fieldTpl.insertBefore(A,B)
}else{
this.fieldTpl.append(C,B)
}
D.render("x-form-el-"+D.id)
}else{
Ext.layout.FormLayout.superclass.renderItem.apply(this,arguments)
}
}

I fixed the formlayout as this (changes in red)


renderItem:function(D,A,C){
if(D&&!D.rendered&&D.isFormField&&D.inputType!="hidden"){
if(D.allowBlank==false){
D.fieldLabel = D.fieldLabel+"<span style=\"color:red;\" ext:qtip=\"This field is required\"> * </span>"
}
var B=[
D.id,D.fieldLabel,
D.labelStyle||this.labelStyle||"",
this.elementStyle||"",
typeof D.labelSeparator=="undefined"?this.labelSeparator:D.labelSeparator,
(D.itemCls||this.container.itemCls||"")+(D.hideLabel?" x-hide-label":""),
D.clearCls||"x-form-clear-left"];
if(typeof A=="number"){
A=C.dom.childNodes[A]||null
}
if(A){
this.fieldTpl.insertBefore(A,B)
}else{
this.fieldTpl.append(C,B)
}
D.render("x-form-el-"+D.id)
}else{
Ext.layout.FormLayout.superclass.renderItem.apply(this,arguments)
}
}


so it puts a red star (*) indicator at the end of fieldLabel, to warn user that field is required for posting the form.

zilionis
23 Apr 2008, 9:14 PM
RamsesAkaPlus:

You need use apply. Just create new file, and include this script.
BTW Thanks for idea :}


Ext.apply(Ext.layout.FormLayout.prototype, {
renderItem:function(D,A,C){
if(D&&!D.rendered&&D.isFormField&&D.inputType!="hidden"){
if(D.allowBlank==false){
D.fieldLabel = D.fieldLabel+"<span style=\"color:red;\" ext:qtip=\"This field is required\"> * </span>"
}
var B=[
D.id,D.fieldLabel,
D.labelStyle||this.labelStyle||"",
this.elementStyle||"",
typeof D.labelSeparator=="undefined"?this.labelSeparator:D.labelSeparator,
(D.itemCls||this.container.itemCls||"")+(D.hideLabel?" x-hide-label":""),
D.clearCls||"x-form-clear-left"];
if(typeof A=="number"){
A=C.dom.childNodes[A]||null
}
if(A){
this.fieldTpl.insertBefore(A,B)
}else{
this.fieldTpl.append(C,B)
}
D.render("x-form-el-"+D.id)
}else{
Ext.layout.FormLayout.superclass.renderItem.apply(this,arguments)
}
}
});

chalu
25 Apr 2008, 7:07 PM
Good idea, just that it would be nicer if the developer can skin the colour of the asterik (*) say with a CSS class instead of defining a static color (red in this case) which may not blend well with themes.

sanjshah
26 Apr 2008, 4:45 AM
Thanks for the extension - is it possible to apply this to field using the apply to?

i.e.




var reqfield = new Ext.form.TextField({
width: 230,
allowBlank: false,
applyTo: 'reqfield'
});


Regards,

Sanj

durlabh
27 Apr 2008, 9:54 AM
Hi,

In my app, I did not want to add a "*" to save some space. Also, since I've qtip on my text boxes, I decided to set the color of the required labels to be red. For this, on any form panel, I can add this customization using following code:



formPanel.on('beforeRender', function(form) {
form.items.each(App.Layout.setLabelStyle);
});


As a general practice, I keep application level constants and functions in a separate file. Following is an example of how I keep these common functions and customizations:



App = {};

App.Defaults = {};

App.Defaults.Layout = {};

App.Defaults.Layout.requiredLabelStyle = "color:red";

App.Layout = {};

App.Layout.setLabelStyle = function(c){
if(c.doLayout && c != formPanel){
if(c.items){
c.items.each(fn);
}
}else if(c.isFormField && c.allowBlank == false){
Ext.applyIf(c, {
labelStyle: App.Defaults.Layout.requiredLabelStyle
});
}
};


Now, if you include this App specific js functions as an include in many apps, you can always override App.Defaults.Layout.requiredLabelStyle to anything you want.

I hope this helps.

franklt69
28 Apr 2008, 5:31 AM
Hi durlabh, I was testing you code but I have this trouble




App.Layout.setLabelStyle = function(c){
if(c.doLayout && c != formPanel){//I had to change to if(c.doLayout && c != Ext.FormPanel)
if(c.items){
c.items.each(fn);//who is fn, is not defined?
}
}else if(c.isFormField && c.allowBlank == false){
Ext.applyIf(c, {
labelStyle: App.Defaults.Layout.requiredLabelStyle
})



regards
Frank

durlabh
28 Apr 2008, 5:36 AM
App.Layout.setLabelStyle = function(c){
if(c.doLayout && c != Ext.FormPanel)
if(c.items){
c.items.each(App.Layout.setLabelStyle);
}
}else if(c.isFormField && c.allowBlank == false){
Ext.applyIf(c, {
labelStyle: App.Defaults.Layout.requiredLabelStyle
})


My mistake Frank. fn should be replaced to "App.Layout.setLabelStyle". This problem came up as I copied the code from a large app we are developing. Thanks for pointing out!

franklt69
28 Apr 2008, 10:31 AM
Hi I have a doubt about it:


yes not much but I think it's important on form fields. User can't know anything about required fileds until pushes the submit button.



When I have a formPanel with required fields, and I am adding a record (new record) the fields required appear with a line in red, so when is the case that you want to show to user the required field? when have data the formPanel?


regards
Frank

RamsesAkaPus
29 Apr 2008, 1:27 AM
hi,
In an article I've read so long time ago about effective form designing and User friendly coding, he was sayying that while people visiting your pages or filling your forms, its better showing them what we want from them, how much time it will get to fill the form like simple sentences like "New membership is easy with 2 steps!". In what we want from them part i think showing the user what especially they had to fill is important. As you said user can get required fields after posting the form if absent req fields. But is just a pre-information for the form to show user what necessary and what have to be enter.

franklt69
29 Apr 2008, 8:07 AM
Hi. RamsesAkaPus I am agreed with show to user the information to do a quick entry data, but the doubts is when I am adding a new record in a formPanel for default Extjs show this fields with a red underline so it is indicate the field is required, so when is necessary indicate it to the user?

regards
Frank

franklt69
3 May 2008, 2:32 PM
I am agreed with show to user the information in required field in red, to do a quick entry data, has or not data the record that is show in formPanel, but I have 2 doubts:

1- adding labelStyle the align in fields is wrong more info here http://extjs.com/forum/showthread.php?p=163529#post163529 how you fixed this issue?

2- will be possible to overwrite the method beforeRender to add this feature and don't set it for each formPanel in the app? (I was trying but fail)

formPanel.on('beforeRender', function(form) {
form.items.each(App.Layout.setLabelStyle);
});

regards
Frank

n24005
3 Sep 2009, 9:10 AM
App.Layout.setLabelStyle = function(c){
if(c.doLayout && c != Ext.FormPanel)
if(c.items){
c.items.each(App.Layout.setLabelStyle); // <--*******
}
}else if(c.isFormField && c.allowBlank == false){
Ext.applyIf(c, {
labelStyle: App.Defaults.Layout.requiredLabelStyle
})



Hi,

Yes, I am a newbie... I have just started using version 3, but I can't find a required fields indicator, but I did find this thread.

The above code works for top-level (ie when the function is initially called and has formPanel items), but when it has other items, the recursion fails with the error


c.items.each is not a function


I'm stumped.. Could it be because this was written for Ext 2.x? Is there an easier way to create a required field indicator in Ext 3.x?

Thanks,
Jeff

durlabh
16 Dec 2009, 12:54 PM
I should have used cascade function. Here is an example:



App.Layout = {
setLabelStyles: function(panel) {
panel.cascade(this.setLabelStyle);
},

setLabelStyle: function(c){
if(c.isFormField && c.allowBlank === false && c.fieldLabel) {
Ext.applyIf(c, {
labelStyle: 'color:red;'
});
}
}
};


To use:


this.form.on('beforerender', App.Layout.setLabelStyles, App.Layout);

liumingwei2009
30 Dec 2010, 6:05 AM
<img name="qqplusimg" style="display: none; margin-right: 3px;" align="absmiddle"> Ext.form.TextField.override({
initComponent: Ext.form.TextField.prototype.initComponent.createInterceptor(function(){
if (this.allowBlank === false && this.fieldLabel) {
this.fieldLabel += '<font color=red>*</font>';
}
})
});