PDA

View Full Version : How to custom the mark of the allowBlank field (afterLabelTextTpl)?



aaatech
26 Feb 2015, 10:40 PM
When use Ext 4.x, I use the flow code the mark all the "allowBlank = false" fields with a red star after the label.


Ext.define('app.form.field.Base',{
override : 'Ext.form.field.Base',
afterLabelTextTpl: new Ext.XTemplate('<tpl if="allowBlank === false"><span style = "color:red;">?</span></tpl>', { disableFormats: true })
});

But when I upgrade to Ext 5.x,it don't work any more, Can someone help me to slove it?

Thanks very much.

yeghikyan
27 Feb 2015, 1:35 AM
So is besser.

Ext.define('app.form.field.Base',{ override : 'Ext.form.field.Base',

initComponent: function() {
var me = this;
this.afterLabelTextTpl = new Ext.XTemplate(
'<tpl if="this.allowBlank()">',
'<span style = "color:red;">?</span>',
'</tpl>',
{
disableFormats: true,
allowBlank: function(){
return me.allowBlank === false;
}
}
);
this.callParent(arguments);
}
});


Ext.application({
name : 'Fiddle',


launch : function() {
Ext.create('Ext.form.Panel', {
title: "My Form",
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
fieldLabel: "Login name",
allowBlank: false
}, {
xtype: 'textfield',
fieldLabel: "Password",
allowBlank: false
}, {
xtype: 'textfield',
fieldLabel: "E-Mail",
allowBlank: true
}]
});
}
});

aaatech
27 Feb 2015, 5:00 PM
It works well, thank you very much!

daguijar
17 Mar 2015, 8:48 AM
Hi,I have been looking for a way like to this to visually identify required fields, and it looks like afterLabelTextTpl was exactly the config I needed, but it doesn't seem to work when the fieldLabel is bound and not directly set.

Following the previous example:


Ext.define('app.form.field.Base',{ override : 'Ext.form.field.Base',

initComponent: function() {
var me = this;
this.afterLabelTextTpl = new Ext.XTemplate(
'<tpl if="this.allowBlank()">',
'<span style = "color:red;">?</span>',
'</tpl>',
{
disableFormats: true,
allowBlank: function(){
return me.allowBlank === false;
}
}
);
this.callParent(arguments);
}
});


Ext.application({
name : 'Fiddle',

launch : function() {
Ext.create('Ext.form.Panel', {
viewModel : {
data : {
foo : 'Foobar'
}
},
title: "My Form",
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
//fieldLabel: "Login name",
allowBlank: false,
bind : {
fieldLabel: '{foo}'
}
}, {
xtype: 'textfield',
fieldLabel: "Password",
allowBlank: false
}, {
xtype: 'textfield',
fieldLabel: "E-Mail",
allowBlank: true
}]
});
}
});


Any help would be appreciated.

Thanks in advance.