PDA

View Full Version : How to display a link (A and IMG) next to a TextField?



richardtallent
13 Jun 2012, 1:14 PM
I have text fields where the user is entering an email address, URL, or the unique name of some other business object.

I need to place a small (16x16) icon wrapped in an A tag to create a link. For URLs and emails, it could be based on the current value. For links to other business entities, the link URL would need to be passed in the definition of the form field from the server.

Example of my current code:

36214

I suspect this will either require some sort of template modification or maybe compositing a TextField and a Button object, but I'm completely lost on where to start.

Any help would be greatly appreciated. I'd especially be interested in seeing a solution that encapsulates the logic to define a new field type -- creating custom ExtJS components is a weak spot for me, and I need to do this for a few dozen fields.

I'm using ExtJS 4.1.

alexwells
14 Jun 2012, 6:49 AM
Here is some code for making a custom field with an icon. It is still rough around the edges, but it should get you started. Hope it helps.



// use something like this to define it
Ext.define('App.view.MyField',{
extend: "Ext.container.Container",
layout: 'hbox',
constructor: function(config){
this.callParent(config);
this.add([
{
xtype: 'component',
html: '<a href="'+config.href+'"><img src="'+config.src+'" width="16" height="16"></a>'
},{
xtype: 'textfield'
}
]);
}
});


// create an instance of it like this
var myField = Ext.create('App.view.MyField',{
href:'something.html',
src:'something.png'
})


// then add it to any container like this
aContainer.add(myField);