как использовать href для столбца в Ext Grid Panel

Question

Я использую панель сетки, в которой мне нужно сделать столбец в качестве ссылки (он должен выглядеть как ссылка без действий).Я использую слушателя в gridpanel и по щелчку ячейки работает нормально.Единственное, что 1-й столбец должен выглядеть как ссылка.Но как поставить href = "#" я не уверен.Это мой код:

var addressDetailsStore = Ext.create('Ext.data.Store', {
    id:'addressDetailsStore',
    autoLoad: true,
    fields:
    [
    'addressType', 
    'street1', 
    'street2', 
    'province', 
    'city', 
    'country' 
    ], 
    proxy: {
        type: 'ajax',
        url: 'resources/json/addressDetails.json',  // url that will load data with respect to start and limit params    
        reader: {
            type: 'json',
            root: 'items',
        }
    }


});

Ext.define('iOMS.view.common.addressView', {
extend: 'Ext.grid.Panel',
alias: 'widget.AddressViewPanel',
    layout: 'fit',
    collapsible: true,
    title:'Address',

    store: addressDetailsStore,
    listeners:{
                cellclick:function (iView, iCellEl, iColIdx, iRecord, iRowEl, iRowIdx, iEvent){
// Getting the event and I am doing logic here..

}

Я просто хочу, чтобы столбцы 'addressType' выглядели как ссылки, и я не знаю, где поставить href ... Спасибо за ваши ответы-Praveen

Answer 1

Вы также можете использовать шаблон столбца:

columns: [
    { text: 'External Link', xtype: 'templatecolumn', tpl: '<a href="{url}">{title}</a>'}
]

Answer 2

Вы можете указать нужные столбцы, а для столбца, содержащего только ссылку, добавить средство визуализации.Этот пример может вам помочь.

var template = new Ext.XTemplate(
        '<a href="#"> </a>').compile();

columns:[
            {
                header: "",
                renderer: function () {
                    return template.applyTemplate();
                }
            },

Answer 3

Вы можете использовать функцию рендерера, как показано ниже

columns: [
        {
            header: 'number',
            dataIndex: 'number',
            flex: 1,
            renderer: function(number) {
                return Ext.String.format('<a href="#users/{0}">{0}</a>', number);
            }
        },