PDA

View Full Version : set an icon to the left of the form field



lafugacu78
25 Mar 2014, 5:34 PM
plugins



Ext.define('myapp.plugins.fieldicon', {
extend: 'Ext.AbstractPlugin',
alias: 'plugin.fieldicon',
init: function (field) {
this.field = field;
field.rendered ?
this.createicon() :
field.on('afterrender', this.createicon, this);
}
},


createicon: function(){
var
field= this.field;
field.bodyEl.insertFirst({
tag: 'img',
src: field.iconsrc,
width: 20
});
}

});


use


.....
{
xtype: 'datefield',
fieldLabel: 'Best Before',
plugins: ['fieldicon'],
iconsrc:'some img url',
value: new Date()
}
......


how to make the image on the left of this field?
note: must work with all types of fields

scottmartin
26 Mar 2014, 8:46 AM
You could setup an hbox container to paint the image. Here is a quick example that used this approach to paint a button:
http://ext4all.com/post/how-to-add-button-to-each-form-field.html

lafugacu78
27 Mar 2014, 6:29 AM
like that ?



Ext.define('myapp.plugin.fieldicon', {
extend: 'Ext.AbstractPlugin',
alias: 'plugin.fieldicon',
init: function(field) {
var
me = this;
me.field = field;


field.rendered ?
me.createIcon() :
field.on('afterrender', me.createIcon, me);


},
createIcon: function() {
var
me = this,
field = me.field;


var container = field.up();


var index = container.items.findIndex('id', field.id);


var fieldcontainer = new Ext.form.FieldContainer({
xtype: 'fieldcontainer',
layout: {type: 'hbox', align: 'middle'}
});


Ext.isEmpty(field.width) && Ext.apply(fieldcontainer, {flex: 1});




var icon = new Ext.Img({
cls: 'ticket-form-incon',
src: field.iconsrc
});






fieldcontainer.add(icon);
fieldcontainer.add(field);


container.insert(index, fieldcontainer);


if (!Ext.isEmpty(field.icontip)) {
icon.on('afterrender', function() {
new Ext.tip.ToolTip({
target: icon.getEl(),
html: '<div>' + field.icontip + '</div>'
});
});
}
}
});

jsakalos
29 Apr 2014, 4:00 AM
Is this what you want: Form Field Icon Plugin (http://extjs.eu/software/form-field-icon-plugin/)?