View Full Version : How to diplay a hyberlink text in the textfield on the combo box

14 Jun 2012, 2:59 AM
Hi all,

The dropdown list is still normal texts but after selecting, I want the text displayed in the text field as a hyberlink. Please help me.

Thanks & Cheers,

20 Jun 2012, 5:22 PM
I do not believe that is possible ... here are some alternatives that may be useful:

// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}

Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
allowBlank: false // requires a non-empty value
}, {
xtype: 'combobox',
fieldLabel: 'Choose State',
itemId: 'combofield',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
listeners: {
select: function(combo,records) { // simple example
var form = combo.up('form');
var newUrl = '<a href="http://google.com">'+records[0].data.name+'</a>';
}, {
html: '<a href="http://google.com">google.com</a>',
itemId: 'urlfield',
hidden: true


20 Jun 2012, 9:36 PM

It's not possible to make it with a textfield component as you can not set any link in the textfield's value .

However, you should create two different components here, one of them is textfield and the other one is a box.

Whenever you hovers on the link (box), there should be link/button says EDIT appears, and when you hits on the edit button, textfield should be visible with the editable content like <a>google.com</a>.

And when You hits the enter, it should be turn into box showing exactly the html content that has been provided by you in the textfield.