ExtJs combobox dispalyfield with hyperlink

Question

I want combobox displayfield value with hyperlink. The selected combobox value should display with a hyperlink, if I click that selected combobox value then it will open in a new tab.

var multiComboMap = Ext.create('Ext.form.field.ComboBox', {
    fieldLabel: 'Select multiple states',
    renderTo: 'combo-map',
    multiSelect: true,
    //disabled: true,
    displayField:'locationMap',
    valueField:'locationId',
    id:'combo-map',
    width: 500,
    labelWidth: 130,
    emptyText: 'To view map select it',
    store: Ext.create('Ext.data.Store', //get data for the combobox
            {

        fields: [
            {

                name: 'locationId',
                type: 'int'
            },{
                name: 'locationName', 
                type: 'string'
            },{
                name: 'locationMap', 
                type: 'string'
            }
        ],

        proxy: {
            type: 'ajax',
            //url: '../data/users.asp',
            url: '/AOP_MEETING/venueMaster.json',
            reader: {
                type: 'json',
                root: 'venueMasterc'
            }
        },                            
        autoLoad: true
    }),
   triggerAction:'all',
   mode:'local',
   typeAhead: true,
   lastQuery:''
});

Thanks in advance.

Not sure I understand what you want to do here, by _"opening in a new tab"_ you mean opening a new browser tab / window to display the link? Or you want to open a new [Tab](http://docs-origin.sencha.com/extjs/4.2.1/#) for a [TabPanel](http://docs-origin.sencha.com/extjs/4.2.1/#!/api/Ext.tab.Panel)? — overlordhammer, Oct 23 '13 at 09:43

score 1 · Answer 1 · answered Oct 23 '13 at 09:52

1

You could use 'Ext.XTemplate' to add hyperlinks to combobox displayfield, but user have to ctrl+click on it open it in a new tab.

Sample here: https://fiddle.sencha.com/#fiddle/146

answered Oct 23 '13 at 09:52

newmount

1,921
1
12
10

Thanks @newmount . But the hyperlink is comming only in drop-down. After selecting the displayfield the hyperlink has gone. I want the selected displayfield with hyperlink. – abhishek Oct 23 '13 at 10:18
2

Adding **target="_blank"** to the link solves the ctrl+click problem – overlordhammer Oct 23 '13 at 10:19
@abhishek check this : http://stackoverflow.com/questions/9016859/extjs-4-render-html-of-a-selected-value-in-a-combobox – newmount Oct 23 '13 at 10:59
Thanks @newmount .. I have solved it like this listConfig: { // Custom rendering template for each item getInnerTpl: function() { return '{locationMap}'; } } I added this and now it's working – abhishek Oct 23 '13 at 13:16

ExtJs combobox dispalyfield with hyperlink

1 Answers1