Ext.ux.AllowBlank

[Dig4Fire]

Hello,

this is my first plugin. Its very simple. It marks required form fields (allowBlank: false) with asterisk and add hint under the form. Any comments are welcome.

16554



Ext.ns("Ext.ux", "Ext");

Ext.ux.AllowBlank = Ext.extend(Object, {

/**
* @param String
*/
asteriskColor: '#8B0000',

/**
* @param Boolean
*/
hint: true,

/**
* @param String
*/
hintText: 'Required fields',

/**
* @param String
*/
hintCls: '',

/**
* @param String
*/
hintStyle: 'font-family: tahoma,arial,helvetica,sans-serif; font-size: 12px; margin-top: 20px;',

/**
* constructor
* @param config
*/
constructor: function(config) {
config = config || {};
Ext.apply(this, config);

},
init: function(form) {

var requiredFields = false;
var color = this.asteriskColor;
var separator;

Ext.each(form.find(), function (item) {
if (item.allowBlank === false) {

if (item.labelSeparator) {
separator = item.labelSeparator;
} else if (form.defaults.labelSeparator) {
separator = form.defaults.labelSeparator;
} else {
separator = ':';
}

item.labelSeparator = '<span style="color:'+color+';">*</span>'+separator;
requiredFields = true;
}
});

if (requiredFields && this.hint){
form.add({
xtype: 'box',
anchor: '100%',
autoEl:{
tag:'div',
html: '<span style="color:'+color+';">*</span> '+this.hintText,
style: this.hintStyle,
cls: this.hintCls
}
});
}
}
});

Ext.preg('AllowBlank', Ext.ux.AllowBlank);

[mrsunshine]

hi Dig4fire,

nice lite plugin.

one thing i saw by reading.


item.labelSeparator = '<span style="color:'+color+';">*</span>:';with your plugin you set the labelSeparator hard to : maybe its better to use the useres configuerd one.


item.labelSeparator = '<span style="color:'+color+';">*</span>' + item.labelSeparator;

just as a hint to optimize the code ;)

greetings nils

[Dig4Fire]

Hi Nils, you are right. Code adjusted.

[javaman]

please, do a exemple usage....

i tried to use but nothing happens....

[]'s

[Dig4Fire]

Include the plugin-file

<script type="text/javascript" src="./js/plugins/Ext.ux.AllowBlank.js"></script>
and in your FormPanel-Config

plugins: Ext.ux.AllowBlank

[javaman]

I did that

The problem is, if I do only a FormPanel with fields, works fine, but If I do something like the exemple 5 of this: http://www.extjs.com/deploy/dev/examples/form/dynamic.html with fields inside a tab, for exemple, doesn't works

[]'s

[Animal]

Try your TabPanel with deferredRender: false

[javaman]

I did, the example that I said is with deferredRender: false

[]'s

[javaman]

The problem was that I had another plugin causing bugs with this

[]'s

[wemerson.januario]

Hi, Very nice work. I have tested and everything is Ok. But When we use it with on a form that have a fieldset item, It doesn't work. Anyone can help? Thanks!

[Paul999]

Hi, Very nice work. I have tested and everything is Ok. But When we use it with on a form that have a fieldset item, It doesn't work. Anyone can help? Thanks!

if you have fieldsets or panels in form, you have to make each on all fields...

Replace:


Ext.each(form.items.items, function (item) {on:


Ext.each(form.find(), function (item) {


All code:



Ext.ns("Ext.ux", "Ext");

Ext.ux.AllowBlank = Ext.extend(Object, {

/**
* @param String
*/
asteriskColor: '#8B0000',

/**
* @param Boolean
*/
hint: true,

/**
* @param String
*/
hintText: 'Required fields',

/**
* @param String
*/
hintCls: '',

/**
* @param String
*/
hintStyle: 'font-family: tahoma,arial,helvetica,sans-serif; font-size: 12px; margin-top: 20px;',

/**
* constructor
* @param config
*/
constructor: function(config) {
config = config || {};
Ext.apply(this, config);

},
init: function(form) {

var requiredFields = false;
var color = this.asteriskColor;
var separator;

Ext.each(form.find(), function (item) {
if (item.allowBlank === false) {

if (item.labelSeparator) {
separator = item.labelSeparator;
} else if (form.defaults.labelSeparator) {
separator = form.defaults.labelSeparator;
} else {
separator = ':';
}

item.labelSeparator = '<span style="color:'+color+';">*</span>'+separator;
requiredFields = true;
}
});

if (requiredFields && this.hint){
form.add({
xtype: 'box',
anchor: '100%',
autoEl:{
tag:'div',
html: '<span style="color:'+color+';">*</span> '+this.hintText,
style: this.hintStyle,
cls: this.hintCls
}
});
}
}
});

Ext.preg('AllowBlank', Ext.ux.AllowBlank);

[wemerson.januario]

Thanks very much @Paul999. You really solved my small problem. Maybe it can help many people who don't know the find() function. Thanks again.

[evertonce]

tanks very good plugin fields!!

[sosy]

Love it! Added it to my Favorites..