PDA

View Full Version : Combobox with link button



webfriend13
1 Oct 2012, 7:08 PM
Hi All,

I want to add link button to each item in the combobox as shown in the below image.

39077

Please share code/link or plugin I can use to add link button to combobox. I am using Extjs 4.1

vietits
1 Oct 2012, 7:45 PM
Try this:


Ext.onReady(function(){
Ext.create('Ext.form.field.ComboBox', {
renderTo: Ext.getBody(),
width: 200,
queryMode: 'local',
valueField: 'id',
displayField: 'name',
store: {
fields: ['id', 'name', 'link'],
data: [
{ id: 1, name: 'A', link: 'http://www.google.com'},
{ id: 2, name: 'B', link: 'http://www.yahoo.com'},
{ id: 3, name: 'C', link: 'http://www.microsoft.com'}
]
},
listConfig: {
tpl: [
'<ul><tpl for=".">',
'<li role="option" class="x-boundlist-item">{name} <a href="{link}" target="_blank">{link}</a></li>',
'</tpl></ul>'
]
}
});
});

webfriend13
1 Oct 2012, 8:39 PM
Hi Vietits,

Thank you for quick reply. I am able to add link to the combobox (as shown in the belwo image).
Is it possible to create logical separation between the text and the link? I want to separate the text and the link for two reasons:
a) After I click on link, it actually selects the item (who's link i have seelcted) and it fires the select event of the combo-box which I want to avoid. (clicking on link must not trigger select event)
b) I want to suggest to user that these two are separate actions.

Right nowI am seeing the combobox like this.

39078

vietits
1 Oct 2012, 11:49 PM
You can modify tpl to do that. Example:


Ext.onReady(function(){
Ext.create('Ext.form.field.ComboBox', {
renderTo: Ext.getBody(),
width: 200,
queryMode: 'local',
valueField: 'id',
displayField: 'name',
store: {
fields: ['id', 'name', 'link'],
data: [
{ id: 1, name: 'A', link: 'http://www.google.com'},
{ id: 2, name: 'B', link: 'http://www.yahoo.com'},
{ id: 3, name: 'C', link: 'http://www.microsoft.com'}
]
},
listConfig: {
tpl: [
'<table width="100%"><tpl for=".">',
'<tr>',
'<td role="option" class="x-boundlist-item" width="70%">{name}</td>',
'<td align="right"><a href="{link}" width="30%" target="_blank">manage</a></td>',
'</tr>',
'</tpl></table>'
]
}
});
});

webfriend13
2 Oct 2012, 12:27 AM
Hi Vietits,

AWESOME !!!! This is what I was looking for. Thank you. =D>

webfriend13
3 Oct 2012, 11:24 PM
Hi Vietits,





Ext.onReady(function(){
Ext.create('Ext.form.field.ComboBox', {
renderTo: Ext.getBody(),
width: 200,
queryMode: 'local',
valueField: 'id',
displayField: 'name',
store: {
fields: ['id', 'name', 'link'],
data: [
{ id: 1, name: 'A', link: 'http://www.google.com'},
{ id: 2, name: 'B', link: 'http://www.yahoo.com'},
{ id: 3, name: 'C', link: 'http://www.microsoft.com'}
]
},
listConfig: {
tpl: [
'<ul><tpl for=".">',
'<li role="option" class="x-boundlist-item">{name} <a href="{link}" target="_blank">{link}</a></li>',
'</tpl></ul>'
]
}
});
});




If I use above code, I am seeing list like this:
39131

Problem: If I click on Manage link, system also fires the select event of the dropdown list. I dont want to fire the select event of the combobox if I have clicked on the link.

vietits
4 Oct 2012, 12:22 AM
Have you tried the solution I posted on post #4? Combobox won't fire 'select' event if you click on 'manage' link.

webfriend13
4 Oct 2012, 10:16 PM
HI Vietits,

Yes, I have tried that and it does not fire 'select' event. But the problem with this approach is, when i move mosue of the list, system changes the back color for first TD and not for 2nd TD. I know I need to class="x-boundlist-item" in second TD as well. But If I add "x-boundlist-item" class in second TD, system is throwing some javascript error saying 'InterId is null' :(.

Thank you replying. I really appreciate your help.

vietits
4 Oct 2012, 11:27 PM
Then, try this:


Ext.onReady(function(){
Ext.create('Ext.form.field.ComboBox', {
renderTo: Ext.getBody(),
width: 200,
queryMode: 'local',
valueField: 'id',
displayField: 'name',
store: {
fields: ['id', 'name', 'link'],
data: [
{ id: 1, name: 'A', link: 'http://www.google.com'},
{ id: 2, name: 'B', link: 'http://www.yahoo.com'},
{ id: 3, name: 'C', link: 'http://www.microsoft.com'}
]
},
listConfig: {
tpl: [
'<table width="100%"><tpl for=".">',
'<tr role="option" class="x-boundlist-item">',
'<td width="70%">{name}</td>',
'<td align="right"><a href="{link}" width="30%" target="_blank">manage</a></td>',
'</tr>',
'</tpl></table>'
],
listeners: {
beforeitemclick: function(view, record, item, index, event){
return event.target.nodeName != 'A';
}
}
}
});
});

webfriend13
5 Oct 2012, 12:43 AM
Hi Vietits,

Thank you for the quick reply. The solution you suggested is working fine :D. Without the listner, system also calls the select event of the combox even when I click on the link. While i understand the use of the listner, I am not sure how it is working.

Thank you once again for the help =D>. I cannot thank you enough :)