PDA

View Full Version : Ext.ux.AllowBlank



Dig4Fire
26 Sep 2009, 7:40 AM
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
26 Sep 2009, 2:35 PM
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
27 Sep 2009, 2:26 AM
Hi Nils, you are right. Code adjusted.

javaman
13 Jan 2010, 1:13 PM
please, do a exemple usage....

i tried to use but nothing happens....

[]'s

Dig4Fire
14 Jan 2010, 5:13 AM
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
14 Jan 2010, 7:26 AM
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
14 Jan 2010, 12:14 PM
Try your TabPanel with deferredRender: false

javaman
14 Jan 2010, 12:30 PM
I did, the example that I said is with deferredRender: false

[]'s

javaman
11 Feb 2010, 10:45 PM
The problem was that I had another plugin causing bugs with this

[]'s

wemerson.januario
29 May 2010, 11:11 AM
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
31 May 2010, 5:10 AM
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
31 May 2010, 7:38 PM
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
22 Jun 2010, 12:52 PM
tanks very good plugin fields!!

sosy
24 Jul 2010, 12:44 AM
Love it! Added it to my Favorites..